1042-form-field-mixin

.changeset/cruel-eels-open.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/menu': minor
+---
+
+**Fixed** MenuItem focus stealing from input elements on mouseover by enhanceing MenuItem's `handleMouseover` method to detect when an input element currently has focus and prevent stealing focus in those cases.

packages/color-field/README.md

@@ -33,7 +33,7 @@ The color field consists of several key parts:
 - **Size variations**: Different size options to match your design requirements
 
 ```html
-<sp-color-field value="#ffff00"></sp-color-field>
+<sp-color-field value="#ffff00">Background color</sp-color-field>
 ```
 
 ### Options
@@ -45,15 +45,23 @@ The color field consists of several key parts:
 <sp-tab-panel value="s">
 
 ```html
-<sp-color-field size="s" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="s"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
 <sp-tab value="m">Medium</sp-tab>
 <sp-tab-panel value="m">
 
 ```html
-<sp-color-field size="m" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="m"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -62,7 +70,11 @@ The color field consists of several key parts:
 <sp-tab-panel value="l">
 
 ```html
-<sp-color-field size="l" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="l"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -71,7 +83,11 @@ The color field consists of several key parts:
 <sp-tab-panel value="xl">
 
 ```html
-<sp-color-field size="xl" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="xl"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -82,15 +98,15 @@ The color field consists of several key parts:
 When `view-color` is true, the color handle will be rendered. This is useful for development and debugging purposes.
 
 ```html
-<sp-color-field view-color value="#f00"></sp-color-field>
+<sp-color-field view-color value="#f00">Icon color</sp-color-field>
 ```
 
 #### Quiet
 
 A quiet color field provides a more subtle appearance:
 
 ```html
-<sp-color-field quiet value="#e6e600"></sp-color-field>
+<sp-color-field quiet value="#e6e600">Icon color</sp-color-field>
 ```
 
 ### States
@@ -100,23 +116,23 @@ A quiet color field provides a more subtle appearance:
 The default state of the color field, ready for user input:
 
 ```html
-<sp-color-field value="#ffff00"></sp-color-field>
+<sp-color-field value="#ffff00">Icon color</sp-color-field>
 ```
 
 #### Read Only
 
 A readonly color field that displays the color value but prevents user modification:
 
 ```html
-<sp-color-field readonly value="#ffff00"></sp-color-field>
+<sp-color-field readonly value="#ffff00">Icon color</sp-color-field>
 ```
 
 #### Invalid Input
 
 If the input value is not a valid color, `<sp-color-field>` will not accept it and may show validation feedback:
 
 ```html
-<sp-color-field value="not a color"></sp-color-field>
+<sp-color-field value="not a color">Icon color</sp-color-field>
 ```
 
 ### Behaviors
@@ -134,7 +150,7 @@ For a complete list of supported color formats, see the [ColorController documen
 A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `BB` (blue) are hexadecimal integers between `00` and `FF` specifying the intensity of the color.
 
 ```html
-<sp-color-field view-color value="#ff0000"></sp-color-field>
+<sp-color-field view-color value="#ff0000" label="Text color"></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -144,7 +160,7 @@ A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `
 Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for `#RRGGBB`. In the shorthand form, `R` (red), `G` (green), and `B` (blue) are hexadecimal characters between `0` and `F`. Each character is repeated to create the full 6-digit color code. For example, `#123` would expand to `#112233`.
 
 ```html
-<sp-color-field view-color value="#f00"></sp-color-field>
+<sp-color-field view-color value="#f00" label="Text color"></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -154,7 +170,11 @@ Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for
 An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
 
 ```html
-<sp-color-field view-color value="rgb(255,0,0)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="rgb(255,0,0)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -164,7 +184,11 @@ An RGB color value is specified with: rgb(red, green, blue). Each parameter defi
 An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alpha` parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
 
 ```html
-<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="rgba(0,255,0,0.3)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -174,7 +198,11 @@ An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alp
 An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
 
 ```html
-<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="hsl(234, 70%, 50%)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -184,7 +212,11 @@ An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a
 An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
 
 ```html
-<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="hsv(0, 70%, 50%)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>

packages/color-field/stories/color-field-sizes.stories.ts

@@ -10,8 +10,6 @@
  * governing permissions and limitations under the License.
  */
 import { TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/help-text/sp-help-text.js';
 import { ColorFieldMarkup } from './template.js';
 

packages/combobox/README.md

@@ -120,8 +120,8 @@ mutate() {
 ### Quiet
 
 ```html
-<sp-field-label for="color">Color</sp-field-label>
-<sp-combobox id="color" quiet>
+<sp-combobox quiet>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -140,8 +140,8 @@ The suggested popup menu items will remain the same regardless of the currently-
 Whenever the currently-typed input exactly matches the `value` of a popup menu item, that item is automatically selected.
 
 ```html
-<sp-field-label for="color-none" autocomplete="none">Color</sp-field-label>
-<sp-combobox id="color-none">
+<sp-combobox>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -155,8 +155,8 @@ Whenever the currently-typed input exactly matches the `value` of a popup menu i
 The popup menu items are filtered to only those completing the currently-input value.
 
 ```html
-<sp-field-label for="color-list" autocomplete="list">Color</sp-field-label>
-<sp-combobox id="color-list">
+<sp-combobox>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -170,15 +170,15 @@ The popup menu items are filtered to only those completing the currently-input v
 <sp-tab-panel value="disabled">
 
 ```html
-<sp-field-label for="color-disabled">Color</sp-field-label>
-<sp-combobox id="color-disabled" disabled>
+<sp-combobox disabled>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
 </sp-combobox>
 <br />
-<sp-field-label for="color-disabled-item">Color</sp-field-label>
-<sp-combobox id="color">
+<sp-combobox>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue" disabled>Blue</sp-menu-item>
@@ -190,8 +190,8 @@ The popup menu items are filtered to only those completing the currently-input v
 <sp-tab-panel value="invalid">
 
 ```html
-<sp-field-label for="color-invalid">Color</sp-field-label>
-<sp-combobox id="color-invalid" invalid>
+<sp-combobox invalid>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -206,8 +206,8 @@ The popup menu items are filtered to only those completing the currently-input v
 <sp-tab-panel value="pending">
 
 ```html
-<sp-field-label for="color">Color</sp-field-label>
-<sp-combobox id="color" pending>
+<sp-combobox pending>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -222,12 +222,12 @@ The popup menu items are filtered to only those completing the currently-input v
 #### Provide a label
 
 A combobox must be labeled.
-Typically, you should render a visible label via `<sp-field-label>`.
+Typically, you should render a visible label via the `label` slot.
 For exceptional cases, provide an accessible label via the `label` attribute.
 
 ```html
-<sp-field-label for="color">Color</sp-field-label>
-<sp-combobox id="color">
+<sp-combobox>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -245,8 +245,8 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 <sp-tab-panel value="help-text">
 
 ```html
-<sp-field-label for="color1">Color</sp-field-label>
-<sp-combobox id="color1">
+<sp-combobox>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -259,8 +259,8 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 <sp-tab-panel value="negative-help-text">
 
 ```html
-<sp-field-label for="color2">Color</sp-field-label>
-<sp-combobox id="color2" required>
+<sp-combobox required>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -274,8 +274,8 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 <sp-tab-panel value="tooltip">
 
 ```html
-<sp-field-label for="color3">Color</sp-field-label>
-<sp-combobox id="color3">
+<sp-combobox>
+    <span slot="field-label">Color</span>
     <sp-tooltip slot="tooltip">
         Color options, such as red, green, or blue.
     </sp-tooltip>

packages/combobox/package.json

@@ -66,6 +66,7 @@
     "dependencies": {
         "@spectrum-web-components/action-button": "1.9.0",
         "@spectrum-web-components/base": "1.9.0",
+        "@spectrum-web-components/field-label": "1.9.0",
         "@spectrum-web-components/icon": "1.9.0",
         "@spectrum-web-components/icons-ui": "1.9.0",
         "@spectrum-web-components/menu": "1.9.0",
@@ -74,6 +75,7 @@
         "@spectrum-web-components/popover": "1.9.0",
         "@spectrum-web-components/progress-circle": "1.9.0",
         "@spectrum-web-components/reactive-controllers": "1.9.0",
+        "@spectrum-web-components/shared": "1.9.0",
         "@spectrum-web-components/textfield": "1.9.0"
     },
     "types": "./src/index.d.ts",