@spectrum-web-components/picker - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,22 @@ # Change Log
 
+# [0.4.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/picker@0.3.1...@spectrum-web-components/picker@0.4.0) (2021-03-22)
+
+### Bug Fixes
+
+-   add support for "readonly" attribute ([4bce3b7](https://github.com/adobe/spectrum-web-components/commit/4bce3b7b6910ac50e80efe6a8f63f57843feafb3))
+-   analyze errors, properly this time ([df685a2](https://github.com/adobe/spectrum-web-components/commit/df685a20f57379442d54f026b8ad7cef474a067b))
+-   analyze type errors, and add deprecated syntax tests ([b7e67a1](https://github.com/adobe/spectrum-web-components/commit/b7e67a103d5a3bb355a8ee4682ef9621d8d59872))
+-   bad merge conflict resolution ([e408d61](https://github.com/adobe/spectrum-web-components/commit/e408d61c82ee4ea8463be7d76f480b260fd5aa30))
+-   hopefully fix CI ([ea87245](https://github.com/adobe/spectrum-web-components/commit/ea87245359128ad4f9d790d2dc5d5dd36208bc25))
+-   issues with optionsMenu & menuItems ([01a7e35](https://github.com/adobe/spectrum-web-components/commit/01a7e35099cef1d8185e79ee94dfad36ece7ba8d))
+-   remove <sp-menu> usage where deprecated ([387db3b](https://github.com/adobe/spectrum-web-components/commit/387db3be95c98ab220e517fe12a4db7a2496fe5f))
+-   simplify optionsMenu usage and fix tests ([91241b7](https://github.com/adobe/spectrum-web-components/commit/91241b7bddc434c7220fc0fbd65389d0ca38f674))
+-   slot documentation ([0ebd260](https://github.com/adobe/spectrum-web-components/commit/0ebd2609bad9e95ee24428cb2fa666d23bdb85f8))
+-   split-button tests & lots of cleanup based on review feedback ([10b4a04](https://github.com/adobe/spectrum-web-components/commit/10b4a04c5791d1acd9e59d48a8960b9c17aa89c7)), closes [#1189](https://github.com/adobe/spectrum-web-components/issues/1189)
+
+### Features
+
+-   **picker:** process field-label content for more accurate a11y tree ([dc9df54](https://github.com/adobe/spectrum-web-components/commit/dc9df54d052edc46c2399f0f7b12d3b5d4aff740))
+-   deprecate sp-menu in PickerBase derived classes ([bbb773c](https://github.com/adobe/spectrum-web-components/commit/bbb773c915587b9d92875e333a6b422ec878a8ea))
+
 ## [0.3.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/picker@0.3.0...@spectrum-web-components/picker@0.3.1) (2021-03-05)
@@ -8,0 +28,0 @@

custom-elements.json

@@ -28,2 +28,7 @@ {
         {
+          "name": "readonly",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "placement",
@@ -52,13 +57,2 @@ "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"",
           "default": "false"
-        },
-        {
-          "name": "autofocus",
-          "description": "When this control is rendered, focus it automatically",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "tabIndex",
-          "description": "The tab index to apply to this control. See general documentation about\nthe tabindex HTML property",
-          "type": "number"
         }
@@ -68,7 +62,2 @@ ],
         {
-          "name": "openOverlay",
-          "type": "(target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<...>",
-          "default": "\"async (\\n        target: HTMLElement,\\n        interaction: TriggerInteractions,\\n        content: HTMLElement,\\n        options: OverlayOptions\\n    ): Promise<() => void> => {\\n        return await openOverlay(target, interaction, content, options);\\n    }\""
-        },
-        {
           "name": "button",
@@ -105,4 +94,15 @@ "type": "HTMLButtonElement"
         {
+          "name": "readonly",
+          "attribute": "readonly",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "menuItems",
+          "type": "MenuItem[]",
+          "default": "[]"
+        },
+        {
           "name": "optionsMenu",
-          "type": "Menu | undefined"
+          "type": "Menu"
         },
@@ -132,7 +132,2 @@ {
         {
-          "name": "onKeydown",
-          "type": "(event: KeyboardEvent) => void",
-          "default": "\"(event: KeyboardEvent): void => {\\n        const { code } = event;\\n        if (!code.startsWith('Arrow')) {\\n            return;\\n        }\\n        event.preventDefault();\\n        /* c8 ignore next 3 */\\n        if (!this.optionsMenu) {\\n            return;\\n        }\\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\\n            this.open = true;\\n            return;\\n        }\\n        const selectedIndex = this.selectedItem\\n            ? this.optionsMenu.menuItems.indexOf(this.selectedItem)\\n            : -1;\\n        // use a positive offset to find the first non-disabled item when no selection is available.\\n        const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;\\n        let nextIndex = selectedIndex + nextOffset;\\n        while (\\n            this.optionsMenu.menuItems[nextIndex] &&\\n            this.optionsMenu.menuItems[nextIndex].disabled\\n        ) {\\n            nextIndex += nextOffset;\\n        }\\n        nextIndex = Math.max(\\n            Math.min(nextIndex, this.optionsMenu.menuItems.length),\\n            0\\n        );\\n        if (!this.value || nextIndex !== selectedIndex) {\\n            this.setValueFromItem(this.optionsMenu.menuItems[nextIndex]);\\n        }\\n    }\""
-        },
-        {
           "name": "size",
@@ -150,21 +145,4 @@ "attribute": "size",
         {
-          "name": "autofocus",
-          "attribute": "autofocus",
-          "description": "When this control is rendered, focus it automatically",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "tabIndex",
-          "attribute": "tabIndex",
-          "description": "The tab index to apply to this control. See general documentation about\nthe tabindex HTML property",
-          "type": "number"
-        },
-        {
           "name": "focusElement",
           "type": "HTMLElement"
-        },
-        {
-          "name": "shadowRoot",
-          "type": "ShadowRoot"
         }
@@ -174,11 +152,12 @@ ],
         {
-          "name": "sp-open",
+          "name": "change",
+          "description": "Announces that the `value` of the element has changed"
+        },
+        {
+          "name": "sp-opened",
           "description": "Announces that the overlay has been opened"
         },
         {
-          "name": "sp-close",
+          "name": "sp-closed",
           "description": "Announces that the overlay has been closed"
-        },
-        {
-          "name": "change"
         }
@@ -190,6 +169,2 @@ ],
           "description": "The placeholder content for the picker"
-        },
-        {
-          "name": "",
-          "description": "The menu of options that will display when the picker is open"
         }
@@ -196,0 +171,0 @@ ]

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.3.1",
+    "version": "0.4.0",
     "description": "",
@@ -61,14 +61,14 @@ "main": "src/index.js",
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.1",
-        "@spectrum-web-components/button": "^0.13.1",
-        "@spectrum-web-components/icon": "^0.9.1",
-        "@spectrum-web-components/icons-ui": "^0.6.1",
-        "@spectrum-web-components/icons-workflow": "^0.6.1",
-        "@spectrum-web-components/menu": "^0.7.1",
-        "@spectrum-web-components/overlay": "^0.10.1",
-        "@spectrum-web-components/popover": "^0.9.1",
-        "@spectrum-web-components/shared": "^0.11.1",
+        "@spectrum-web-components/base": "^0.4.2",
+        "@spectrum-web-components/button": "^0.13.2",
+        "@spectrum-web-components/icon": "^0.9.2",
+        "@spectrum-web-components/icons-ui": "^0.6.2",
+        "@spectrum-web-components/icons-workflow": "^0.6.2",
+        "@spectrum-web-components/menu": "^0.8.0",
+        "@spectrum-web-components/overlay": "^0.11.0",
+        "@spectrum-web-components/popover": "^0.9.2",
+        "@spectrum-web-components/shared": "^0.12.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "b7f12041404bffdd65b1472f22b6f3eacbf7157c"
+    "gitHead": "ca6cd53b42caa5c52255f2af313d1689cf67157f"
 }

README.md

 ## Description
 
-An `<sp-picker>` is an alternative to HTML's `<select>` element. Use an `<sp-menu>` element to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.
+An `<sp-picker>` is an alternative to HTML's `<select>` element. Use `<sp-menu-item>` elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.
 
@@ -9,2 +9,3 @@ ### Usage
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/picker?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/picker)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/guTpKeAjgecibF150Qbg/src/index.ts)
 
@@ -46,4 +47,5 @@ ```
 <sp-field-group>
-    <sp-picker size="s" label="Selection type">
-        <sp-menu>
+    <div>
+        <sp-field-label for="picker-s" size="s">Selection type:</sp-field-label>
+        <sp-picker id="picker-s" size="s" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -56,6 +58,9 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
-    <sp-picker quiet size="s" label="Selection type">
-        <sp-menu>
+        </sp-picker>
+    </div>
+    <div>
+        <sp-field-label for="picker-s-quiet" size="s">
+            Selection type:
+        </sp-field-label>
+        <sp-picker id="picker-s-quiet" quiet size="s" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -68,4 +73,4 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
+        </sp-picker>
+    </div>
 </sp-field-group>
@@ -80,4 +85,5 @@ ```
 <sp-field-group>
-    <sp-picker size="m" label="Selection type">
-        <sp-menu>
+    <div>
+        <sp-field-label for="picker-m" size="m">Selection type:</sp-field-label>
+        <sp-picker id="picker-m" size="m" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -90,6 +96,9 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
-    <sp-picker quiet size="m" label="Selection type">
-        <sp-menu>
+        </sp-picker>
+    </div>
+    <div>
+        <sp-field-label for="picker-m-quiet" size="m">
+            Selection type:
+        </sp-field-label>
+        <sp-picker id="picker-m-quiet" quiet size="m" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -102,4 +111,4 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
+        </sp-picker>
+    </div>
 </sp-field-group>
@@ -114,4 +123,5 @@ ```
 <sp-field-group>
-    <sp-picker size="l" label="Selection type">
-        <sp-menu>
+    <div>
+        <sp-field-label for="picker-l" size="l">Selection type:</sp-field-label>
+        <sp-picker id="picker-l" size="l" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -124,6 +134,9 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
-    <sp-picker quiet size="l" label="Selection type">
-        <sp-menu>
+        </sp-picker>
+    </div>
+    <div>
+        <sp-field-label for="picker-l-quiet" size="l">
+            Selection type:
+        </sp-field-label>
+        <sp-picker id="picker-l-quiet" quiet size="l" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -136,4 +149,4 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
+        </sp-picker>
+    </div>
 </sp-field-group>
@@ -148,4 +161,7 @@ ```
 <sp-field-group>
-    <sp-picker size="xl" label="Selection type">
-        <sp-menu>
+    <div>
+        <sp-field-label for="picker-xl" size="xl">
+            Selection type:
+        </sp-field-label>
+        <sp-picker id="picker-xl" size="xl" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -158,6 +174,9 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
-    <sp-picker quiet size="xl" label="Selection type">
-        <sp-menu>
+        </sp-picker>
+    </div>
+    <div>
+        <sp-field-label for="picker-xl-quiet" size="xl">
+            Selection type:
+        </sp-field-label>
+        <sp-picker id="picker-xl-quiet" quiet size="xl" label="Selection type">
             <sp-menu-item>Deselect</sp-menu-item>
@@ -170,4 +189,4 @@ <sp-menu-item>Select inverse</sp-menu-item>
             <sp-menu-item disabled>Make work path</sp-menu-item>
-        </sp-menu>
-    </sp-picker>
+        </sp-picker>
+    </div>
 </sp-field-group>
@@ -185,15 +204,15 @@ ```
 ```html
+<sp-field-label for="picker-value">Selection type:</sp-field-label>
 <sp-picker
     label="Select a Country with a very long label, too long in fact"
     value="item-2"
+    id="picker-value"
 >
-    <sp-menu>
-        <sp-menu-item value="item-1">Deselect</sp-menu-item>
-        <sp-menu-item value="item-2">Select inverse</sp-menu-item>
-        <sp-menu-item value="item-3">Feather...</sp-menu-item>
-        <sp-menu-item value="item-4">Select and mask...</sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item value="item-5">Save selection</sp-menu-item>
-        <sp-menu-item disabled value="item-6">Make work path</sp-menu-item>
-    </sp-menu>
+    <sp-menu-item value="item-1">Deselect</sp-menu-item>
+    <sp-menu-item value="item-2">Select inverse</sp-menu-item>
+    <sp-menu-item value="item-3">Feather...</sp-menu-item>
+    <sp-menu-item value="item-4">Select and mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item value="item-5">Save selection</sp-menu-item>
+    <sp-menu-item disabled value="item-6">Make work path</sp-menu-item>
 </sp-picker>
@@ -205,15 +224,15 @@ ```
 ```html
+<sp-field-label for="picker-item-text">Selection type:</sp-field-label>
 <sp-picker
     label="Select a Country with a very long label, too long in fact"
     value="Feather..."
+    id="picker-item-text"
 >
-    <sp-menu>
-        <sp-menu-item>Deselect</sp-menu-item>
-        <sp-menu-item>Select inverse</sp-menu-item>
-        <sp-menu-item>Feather...</sp-menu-item>
-        <sp-menu-item>Select and mask...</sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item>Save selection</sp-menu-item>
-        <sp-menu-item>Make work path</sp-menu-item>
-    </sp-menu>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save selection</sp-menu-item>
+    <sp-menu-item>Make work path</sp-menu-item>
 </sp-picker>
@@ -227,20 +246,19 @@ ```
 ```html
-<p><strong>Standard:</strong></p>
+<sp-field-label for="picker-invalid">Standard:</sp-field-label>
 <sp-picker
     label="Select a Country with a very long label, too long in fact"
     invalid
+    id="picker-invalid"
 >
-    <sp-menu>
-        <sp-menu-item>Deselect</sp-menu-item>
-        <sp-menu-item>Select inverse</sp-menu-item>
-        <sp-menu-item>Feather...</sp-menu-item>
-        <sp-menu-item>Select and mask...</sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item>Save selection</sp-menu-item>
-        <sp-menu-item disabled>Make work path</sp-menu-item>
-    </sp-menu>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save selection</sp-menu-item>
+    <sp-menu-item disabled>Make work path</sp-menu-item>
 </sp-picker>
 <br />
 <br />
-<p><strong>Quiet:</strong></p>
+<sp-field-label for="picker-invalid-quiet">Quiet:</sp-field-label>
 <sp-picker
@@ -250,12 +268,11 @@ label="Select a Country with a very long label, too long in fact"
     quiet
+    id="picker-invalid-quiet"
 >
-    <sp-menu>
-        <sp-menu-item>Deselect</sp-menu-item>
-        <sp-menu-item>Select inverse</sp-menu-item>
-        <sp-menu-item>Feather...</sp-menu-item>
-        <sp-menu-item>Select and mask...</sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item>Save selection</sp-menu-item>
-        <sp-menu-item disabled>Make work path</sp-menu-item>
-    </sp-menu>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save selection</sp-menu-item>
+    <sp-menu-item disabled>Make work path</sp-menu-item>
 </sp-picker>
@@ -267,20 +284,19 @@ ```
 ```html
-<p><strong>Standard:</strong></p>
+<sp-field-label for="picker-disabled">Standard:</sp-field-label>
 <sp-picker
     label="Select a Country with a very long label, too long in fact"
     disabled
+    id="picker-disabled"
 >
-    <sp-menu>
-        <sp-menu-item>Deselect</sp-menu-item>
-        <sp-menu-item>Select inverse</sp-menu-item>
-        <sp-menu-item>Feather...</sp-menu-item>
-        <sp-menu-item>Select and mask...</sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item>Save selection</sp-menu-item>
-        <sp-menu-item disabled>Make work path</sp-menu-item>
-    </sp-menu>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save selection</sp-menu-item>
+    <sp-menu-item disabled>Make work path</sp-menu-item>
 </sp-picker>
 <br />
 <br />
-<p><strong>Quiet:</strong></p>
+<sp-field-label for="picker-disabled">Quiet:</sp-field-label>
 <sp-picker
@@ -290,12 +306,11 @@ label="Select a Country with a very long label, too long in fact"
     quiet
+    id="picker-disabled-quiet"
 >
-    <sp-menu>
-        <sp-menu-item>Deselect</sp-menu-item>
-        <sp-menu-item>Select inverse</sp-menu-item>
-        <sp-menu-item>Feather...</sp-menu-item>
-        <sp-menu-item>Select and mask...</sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item>Save selection</sp-menu-item>
-        <sp-menu-item disabled>Make work path</sp-menu-item>
-    </sp-menu>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save selection</sp-menu-item>
+    <sp-menu-item disabled>Make work path</sp-menu-item>
 </sp-picker>
@@ -306,2 +321,2 @@ ```
 
-An `<sp-picker>` parent will ensure that the wrapped `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-picker>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
+To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element.

src/picker.css.js

@@ -18,5 +18,5 @@ /*
 var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width)}:host([quiet]){width:auto;min-width:0}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{width:100%;min-width:100%;max-width:100%}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
+var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width)}:host([quiet]){width:auto;min-width:0}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{width:100%;min-width:100%;max-width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
 `;
 export default styles;
 //# sourceMappingURL=picker.css.js.map

src/picker.css.ts

@@ -18,4 +18,4 @@ /*
 var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width)}:host([quiet]){width:auto;min-width:0}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{width:100%;min-width:100%;max-width:100%}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
+var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width)}:host([quiet]){width:auto;min-width:0}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{width:100%;min-width:100%;max-width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
 `;
 export default styles;

src/Picker.d.ts

@@ -5,2 +5,3 @@ import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/menu/sp-menu.js';
 import { MenuItem, Menu } from '@spectrum-web-components/menu';
@@ -16,8 +17,11 @@ import '@spectrum-web-components/popover/sp-popover.js';
  * @slot label - The placeholder content for the picker
- * @slot {"sp-menu"} - The menu of options that will display when the picker is open
  *
- * @fires sp-open - Announces that the overlay has been opened
- * @fires sp-close - Announces that the overlay has been closed
+ * @fires change - Announces that the `value` of the element has changed
+ * @fires sp-opened - Announces that the overlay has been opened
+ * @fires sp-closed - Announces that the overlay has been closed
  */
 export declare class PickerBase extends PickerBase_base {
+    /**
+     * @private
+     */
     static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
@@ -31,3 +35,6 @@ button: HTMLButtonElement;
     open: boolean;
-    optionsMenu?: Menu;
+    readonly: boolean;
+    menuItems: MenuItem[];
+    private restoreChildren?;
+    optionsMenu: Menu;
     /**
@@ -42,6 +49,5 @@ * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
     private closeOverlay?;
-    private popover?;
-    protected listRole: string;
+    private popover;
+    protected listRole: 'listbox' | 'menu';
     protected itemRole: string;
-    private placeholder?;
     constructor();
@@ -54,5 +60,5 @@ get focusElement(): HTMLElement;
     onClick(event: Event): void;
-    onKeydown: (event: KeyboardEvent) => void;
+    protected onKeydown: (event: KeyboardEvent) => void;
     setValueFromItem(item: MenuItem): Promise<void>;
-    toggle(): void;
+    toggle(target?: boolean): void;
     close(): void;
@@ -66,8 +72,11 @@ protected onOverlayClosed(): void;
     protected render(): TemplateResult;
+    protected get renderPopover(): TemplateResult;
+    protected updateMenuItems(): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
-    private manageSelection;
+    protected manageSelection(): void;
     private menuStatePromise;
     private menuStateResolver;
     protected _getUpdateComplete(): Promise<void>;
+    connectedCallback(): void;
     disconnectedCallback(): void;
@@ -77,4 +86,4 @@ }
     static get styles(): CSSResultArray;
-    onKeydown: (event: KeyboardEvent) => void;
+    protected onKeydown: (event: KeyboardEvent) => void;
 }
 export {};

src/Picker.js

@@ -17,4 +17,6 @@ /*
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/popover/sp-popover.js';
@@ -31,6 +33,6 @@ import { openOverlay, } from '@spectrum-web-components/overlay';
  * @slot label - The placeholder content for the picker
- * @slot {"sp-menu"} - The menu of options that will display when the picker is open
  *
- * @fires sp-open - Announces that the overlay has been opened
- * @fires sp-close - Announces that the overlay has been closed
+ * @fires change - Announces that the `value` of the element has changed
+ * @fires sp-opened - Announces that the overlay has been opened
+ * @fires sp-closed - Announces that the overlay has been closed
  */
@@ -44,2 +46,4 @@ export class PickerBase extends SizedMixin(Focusable) {
         this.open = false;
+        this.readonly = false;
+        this.menuItems = [];
         /**
@@ -59,7 +63,3 @@ * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
             event.preventDefault();
-            /* c8 ignore next 3 */
-            if (!this.optionsMenu) {
-                return;
-            }
-            this.open = true;
+            this.toggle(true);
         };
@@ -81,3 +81,3 @@ this.menuStatePromise = Promise.resolve();
     get focusElement() {
-        if (this.open && this.optionsMenu) {
+        if (this.open) {
             return this.optionsMenu;
@@ -134,6 +134,12 @@ }
     }
-    toggle() {
-        this.open = !this.open;
+    toggle(target) {
+        if (this.readonly) {
+            return;
+        }
+        this.open = typeof target !== 'undefined' ? target : !this.open;
     }
     close() {
+        if (this.readonly) {
+            return;
+        }
         this.open = false;
@@ -143,10 +149,6 @@ }
         this.close();
-        if (this.optionsMenu && this.placeholder) {
-            const parentElement = this.placeholder.parentElement ||
-                this.placeholder.getRootNode();
-            if (parentElement) {
-                parentElement.replaceChild(this.optionsMenu, this.placeholder);
-            }
+        if (this.restoreChildren) {
+            this.restoreChildren();
+            this.restoreChildren = undefined;
         }
-        delete this.placeholder;
         this.menuStateResolver();
@@ -156,15 +158,18 @@ }
         /* c8 ignore next 9 */
-        if (!this.popover ||
-            !this.optionsMenu ||
-            this.optionsMenu.children.length === 0) {
+        let reparentableChildren = [];
+        const deprecatedMenu = this.querySelector('sp-menu');
+        if (deprecatedMenu) {
+            reparentableChildren = Array.from(deprecatedMenu.children);
+        }
+        else {
+            reparentableChildren = Array.from(this.children).filter((element) => {
+                return !element.hasAttribute('slot');
+            });
+        }
+        if (reparentableChildren.length === 0) {
             this.menuStateResolver();
             return;
         }
-        this.placeholder = document.createComment('placeholder for optionsMenu');
+        this.restoreChildren = reparentChildren(reparentableChildren, this.optionsMenu);
         this.optionsMenu.selectable = true;
-        const parentElement = this.optionsMenu.parentElement || this.optionsMenu.getRootNode();
-        if (parentElement) {
-            parentElement.replaceChild(this.placeholder, this.optionsMenu);
-        }
-        this.popover.append(this.optionsMenu);
         this.sizePopover(this.popover);
@@ -176,2 +181,3 @@ const { popover } = this;
         });
+        this.manageSelection();
         this.menuStateResolver();
@@ -220,5 +226,4 @@ }
                 aria-haspopup="true"
-                aria-controls="popover"
                 aria-expanded=${this.open ? 'true' : 'false'}
-                aria-label=${ifDefined(this.label || undefined)}
+                aria-labelledby="button label"
                 id="button"
@@ -237,3 +242,7 @@ class="button"
         return html `
-            ${this.renderButton}
+            ${this.renderButton} ${this.renderPopover}
+        `;
+    }
+    get renderPopover() {
+        return html `
             <sp-popover
@@ -244,8 +253,21 @@ open
                 @sp-overlay-closed=${this.onOverlayClosed}
-            ></sp-popover>
+            >
+                <sp-menu id="menu" role="${this.listRole}"></sp-menu>
+            </sp-popover>
         `;
     }
+    updateMenuItems() {
+        this.menuItems = [
+            ...this.querySelectorAll('sp-menu-item'),
+        ];
+    }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.optionsMenu = this.querySelector('sp-menu');
+        // Since the sp-menu gets reparented by the popover, initialize it here
+        this.optionsMenu = this.shadowRoot.querySelector('sp-menu');
+        this.updateMenuItems();
+        const deprecatedMenu = this.querySelector('sp-menu');
+        if (deprecatedMenu) {
+            console.warn(`Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`);
+        }
     }
@@ -255,4 +277,3 @@ updated(changedProperties) {
         if (changedProperties.has('value') &&
-            !changedProperties.has('selectedItem') &&
-            this.optionsMenu) {
+            !changedProperties.has('selectedItem')) {
             this.manageSelection();
@@ -274,10 +295,7 @@ }
     }
-    async manageSelection() {
+    manageSelection() {
         /* c8 ignore next 3 */
-        if (!this.optionsMenu) {
-            return;
-        }
-        if (this.optionsMenu.menuItems.length) {
+        if (this.menuItems.length > 0) {
             let selectedItem;
-            this.optionsMenu.menuItems.map((item) => {
+            this.menuItems.forEach((item) => {
                 if (this.value === item.value && !item.disabled) {
@@ -298,9 +316,7 @@ selectedItem = item;
             }
-            this.optionsMenu.updateSelectedItemIndex();
+            if (this.open) {
+                this.optionsMenu.updateSelectedItemIndex();
+            }
             return;
         }
-        await this.optionsMenu.updateComplete;
-        if (this.optionsMenu.menuItems.length) {
-            this.manageSelection();
-        }
     }
@@ -311,2 +327,8 @@ async _getUpdateComplete() {
     }
+    connectedCallback() {
+        if (!this.open) {
+            this.updateMenuItems();
+        }
+        super.connectedCallback();
+    }
     disconnectedCallback() {
@@ -317,2 +339,5 @@ this.open = false;
 }
+/**
+ * @private
+ */
 PickerBase.openOverlay = async (target, interaction, content, options) => {
@@ -340,2 +365,5 @@ return await openOverlay(target, interaction, content, options);
 __decorate([
+    property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "readonly", void 0);
+__decorate([
     property()
@@ -360,16 +388,12 @@ ], PickerBase.prototype, "placement", void 0);
             const { code } = event;
-            if (!code.startsWith('Arrow')) {
+            if (!code.startsWith('Arrow') || this.readonly) {
                 return;
             }
             event.preventDefault();
-            /* c8 ignore next 3 */
-            if (!this.optionsMenu) {
-                return;
-            }
             if (code === 'ArrowUp' || code === 'ArrowDown') {
-                this.open = true;
+                this.toggle(true);
                 return;
             }
             const selectedIndex = this.selectedItem
-                ? this.optionsMenu.menuItems.indexOf(this.selectedItem)
+                ? this.menuItems.indexOf(this.selectedItem)
                 : -1;
@@ -379,9 +403,11 @@ // use a positive offset to find the first non-disabled item when no selection is available.
             let nextIndex = selectedIndex + nextOffset;
-            while (this.optionsMenu.menuItems[nextIndex] &&
-                this.optionsMenu.menuItems[nextIndex].disabled) {
+            while (this.menuItems[nextIndex] &&
+                this.menuItems[nextIndex].disabled) {
                 nextIndex += nextOffset;
             }
-            nextIndex = Math.max(Math.min(nextIndex, this.optionsMenu.menuItems.length), 0);
+            if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {
+                return;
+            }
             if (!this.value || nextIndex !== selectedIndex) {
-                this.setValueFromItem(this.optionsMenu.menuItems[nextIndex]);
+                this.setValueFromItem(this.menuItems[nextIndex]);
             }
@@ -388,0 +414,0 @@ };

src/Picker.ts

@@ -30,4 +30,6 @@ /*
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import '@spectrum-web-components/menu/sp-menu.js';
 import {
@@ -40,2 +42,3 @@ MenuItem,
 import '@spectrum-web-components/popover/sp-popover.js';
+import { Popover } from '@spectrum-web-components/popover';
 import {
@@ -60,8 +63,11 @@ Placement,
  * @slot label - The placeholder content for the picker
- * @slot {"sp-menu"} - The menu of options that will display when the picker is open
  *
- * @fires sp-open - Announces that the overlay has been opened
- * @fires sp-close - Announces that the overlay has been closed
+ * @fires change - Announces that the `value` of the element has changed
+ * @fires sp-opened - Announces that the overlay has been opened
+ * @fires sp-closed - Announces that the overlay has been closed
  */
 export class PickerBase extends SizedMixin(Focusable) {
+    /**
+     * @private
+     */
     public static openOverlay = async (
@@ -98,4 +104,10 @@ target: HTMLElement,
 
-    public optionsMenu?: Menu;
+    @property({ type: Boolean, reflect: true })
+    public readonly = false;
 
+    public menuItems: MenuItem[] = [];
+    private restoreChildren?: Function;
+
+    public optionsMenu!: Menu;
+
     /**
@@ -121,7 +133,6 @@ * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
     @query('sp-popover')
-    private popover?: HTMLElement;
+    private popover!: Popover;
 
-    protected listRole = 'listbox';
+    protected listRole: 'listbox' | 'menu' = 'listbox';
     protected itemRole = 'option';
-    private placeholder?: Comment;
 
@@ -149,3 +160,3 @@ public constructor() {
     public get focusElement(): HTMLElement {
-        if (this.open && this.optionsMenu) {
+        if (this.open) {
             return this.optionsMenu;
@@ -193,3 +204,3 @@ }
 
-    public onKeydown = (event: KeyboardEvent): void => {
+    protected onKeydown = (event: KeyboardEvent): void => {
         if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {
@@ -199,7 +210,3 @@ return;
         event.preventDefault();
-        /* c8 ignore next 3 */
-        if (!this.optionsMenu) {
-            return;
-        }
-        this.open = true;
+        this.toggle(true);
     };
@@ -231,7 +238,13 @@
 
-    public toggle(): void {
-        this.open = !this.open;
+    public toggle(target?: boolean): void {
+        if (this.readonly) {
+            return;
+        }
+        this.open = typeof target !== 'undefined' ? target : !this.open;
     }
 
     public close(): void {
+        if (this.readonly) {
+            return;
+        }
         this.open = false;
@@ -242,14 +255,7 @@ }
         this.close();
-        if (this.optionsMenu && this.placeholder) {
-            const parentElement =
-                this.placeholder.parentElement ||
-                this.placeholder.getRootNode();
-
-            if (parentElement) {
-                parentElement.replaceChild(this.optionsMenu, this.placeholder);
-            }
+        if (this.restoreChildren) {
+            this.restoreChildren();
+            this.restoreChildren = undefined;
         }
 
-        delete this.placeholder;
-
         this.menuStateResolver();
@@ -260,7 +266,16 @@ }
         /* c8 ignore next 9 */
-        if (
-            !this.popover ||
-            !this.optionsMenu ||
-            this.optionsMenu.children.length === 0
-        ) {
+        let reparentableChildren: Element[] = [];
+
+        const deprecatedMenu = this.querySelector('sp-menu');
+        if (deprecatedMenu) {
+            reparentableChildren = Array.from(deprecatedMenu.children);
+        } else {
+            reparentableChildren = Array.from(this.children).filter(
+                (element) => {
+                    return !element.hasAttribute('slot');
+                }
+            );
+        }
+
+        if (reparentableChildren.length === 0) {
             this.menuStateResolver();
@@ -270,4 +285,5 @@ return;
 
-        this.placeholder = document.createComment(
-            'placeholder for optionsMenu'
+        this.restoreChildren = reparentChildren(
+            reparentableChildren,
+            this.optionsMenu
         );
@@ -277,10 +293,2 @@
 
-        const parentElement =
-            this.optionsMenu.parentElement || this.optionsMenu.getRootNode();
-
-        if (parentElement) {
-            parentElement.replaceChild(this.placeholder, this.optionsMenu);
-        }
-
-        this.popover.append(this.optionsMenu);
         this.sizePopover(this.popover);
@@ -292,2 +300,3 @@ const { popover } = this;
         });
+        this.manageSelection();
         this.menuStateResolver();
@@ -340,5 +349,4 @@ }
                 aria-haspopup="true"
-                aria-controls="popover"
                 aria-expanded=${this.open ? 'true' : 'false'}
-                aria-label=${ifDefined(this.label || undefined)}
+                aria-labelledby="button label"
                 id="button"
@@ -358,3 +366,8 @@ class="button"
         return html`
-            ${this.renderButton}
+            ${this.renderButton} ${this.renderPopover}
+        `;
+    }
+
+    protected get renderPopover(): TemplateResult {
+        return html`
             <sp-popover
@@ -365,10 +378,28 @@ open
                 @sp-overlay-closed=${this.onOverlayClosed}
-            ></sp-popover>
+            >
+                <sp-menu id="menu" role="${this.listRole}"></sp-menu>
+            </sp-popover>
         `;
     }
 
+    protected updateMenuItems(): void {
+        this.menuItems = [
+            ...this.querySelectorAll('sp-menu-item'),
+        ] as MenuItem[];
+    }
+
     protected firstUpdated(changedProperties: PropertyValues): void {
         super.firstUpdated(changedProperties);
 
-        this.optionsMenu = this.querySelector('sp-menu') as Menu;
+        // Since the sp-menu gets reparented by the popover, initialize it here
+        this.optionsMenu = this.shadowRoot.querySelector('sp-menu') as Menu;
+
+        this.updateMenuItems();
+
+        const deprecatedMenu = this.querySelector('sp-menu');
+        if (deprecatedMenu) {
+            console.warn(
+                `Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`
+            );
+        }
     }
@@ -380,4 +411,3 @@
             changedProperties.has('value') &&
-            !changedProperties.has('selectedItem') &&
-            this.optionsMenu
+            !changedProperties.has('selectedItem')
         ) {
@@ -404,10 +434,7 @@ this.manageSelection();
 
-    private async manageSelection(): Promise<void> {
+    protected manageSelection(): void {
         /* c8 ignore next 3 */
-        if (!this.optionsMenu) {
-            return;
-        }
-        if (this.optionsMenu.menuItems.length) {
+        if (this.menuItems.length > 0) {
             let selectedItem: MenuItem | undefined;
-            this.optionsMenu.menuItems.map((item) => {
+            this.menuItems.forEach((item) => {
                 if (this.value === item.value && !item.disabled) {
@@ -426,9 +453,7 @@ selectedItem = item;
             }
-            this.optionsMenu.updateSelectedItemIndex();
+            if (this.open) {
+                this.optionsMenu.updateSelectedItemIndex();
+            }
             return;
         }
-        await this.optionsMenu.updateComplete;
-        if (this.optionsMenu.menuItems.length) {
-            this.manageSelection();
-        }
     }
@@ -444,2 +469,9 @@
 
+    public connectedCallback(): void {
+        if (!this.open) {
+            this.updateMenuItems();
+        }
+        super.connectedCallback();
+    }
+
     public disconnectedCallback(): void {
@@ -457,18 +489,14 @@ this.open = false;
 
-    public onKeydown = (event: KeyboardEvent): void => {
+    protected onKeydown = (event: KeyboardEvent): void => {
         const { code } = event;
-        if (!code.startsWith('Arrow')) {
+        if (!code.startsWith('Arrow') || this.readonly) {
             return;
         }
         event.preventDefault();
-        /* c8 ignore next 3 */
-        if (!this.optionsMenu) {
-            return;
-        }
         if (code === 'ArrowUp' || code === 'ArrowDown') {
-            this.open = true;
+            this.toggle(true);
             return;
         }
         const selectedIndex = this.selectedItem
-            ? this.optionsMenu.menuItems.indexOf(this.selectedItem)
+            ? this.menuItems.indexOf(this.selectedItem)
             : -1;
@@ -479,15 +507,14 @@ // use a positive offset to find the first non-disabled item when no selection is available.
         while (
-            this.optionsMenu.menuItems[nextIndex] &&
-            this.optionsMenu.menuItems[nextIndex].disabled
+            this.menuItems[nextIndex] &&
+            this.menuItems[nextIndex].disabled
         ) {
             nextIndex += nextOffset;
         }
-        nextIndex = Math.max(
-            Math.min(nextIndex, this.optionsMenu.menuItems.length),
-            0
-        );
+        if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {
+            return;
+        }
         if (!this.value || nextIndex !== selectedIndex) {
-            this.setValueFromItem(this.optionsMenu.menuItems[nextIndex]);
+            this.setValueFromItem(this.menuItems[nextIndex]);
         }
     };
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

269958

increased by1.53%

Lines of code

2605

increased by1.32%

Number of lines in readme file

303

increased by5.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@spectrum-web-components/menu@0.8.10(transitive)

• - Removed@spectrum-web-components/action-button@0.4.7(transitive)

• - Removed@spectrum-web-components/menu@0.7.1(transitive)

• - Removed@spectrum-web-components/overlay@0.10.1(transitive)

• - Removed@spectrum-web-components/shared@0.11.1(transitive)

• Updated@spectrum-web-components/base@^0.4.2

• Updated@spectrum-web-components/button@^0.13.2

• Updated@spectrum-web-components/icon@^0.9.2

• Updated@spectrum-web-components/icons-ui@^0.6.2

• Updated@spectrum-web-components/icons-workflow@^0.6.2

• Updated@spectrum-web-components/menu@^0.8.0

• Updated@spectrum-web-components/overlay@^0.11.0

• Updated@spectrum-web-components/popover@^0.9.2

• Updated@spectrum-web-components/shared@^0.12.0