@spectrum-web-components/picker 0.41.2 → 0.42.1

package/stories/picker.stories.js

@@ -14,6 +14,7 @@ import { isOverlayOpen } from "../../overlay/stories/index.js";
 import "../../overlay/stories/index.js";
 import { handleChange, Template } from "./template.js";
 import { argTypes } from "./args.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 export default {
   title: "Picker",
   component: "sp-picker",
@@ -21,9 +22,11 @@ export default {
     disabled: false,
     invalid: false,
     open: false,
-    quiet: false
+    quiet: false,
+    pending: false
   },
   argTypes: {
+    ...argTypes,
     onChange: { action: "change" },
     open: {
       name: "open",
@@ -35,12 +38,24 @@ export default {
       },
       control: "boolean"
     },
-    ...argTypes
+    pending: {
+      name: "pending",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    }
   }
 };
 export const Default = (args) => {
   return html`
-        <sp-field-label for="picker-1">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             id="picker-1"
             @change=${handleChange(args)}
@@ -69,10 +84,16 @@ export const disabled = (args) => Template(args);
 disabled.args = {
   disabled: true
 };
+export const invalid = (args) => Template(args);
+invalid.args = {
+  invalid: true
+};
 export const tooltip = (args) => {
   const { open, ...rest } = args;
   return html`
-        <sp-field-label for="picker-1">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             id="picker-1"
             @change=${handleChange(args)}
@@ -111,7 +132,11 @@ tooltip.args = {
 tooltip.decorators = [isOverlayOpen];
 export const leftSideLabel = (args) => {
   return html`
-        <sp-field-label side-aligned="start" for="picker-1">
+        <sp-field-label
+            side-aligned="start"
+            for="picker-1"
+            size=${ifDefined(args.size)}
+        >
             Where do you live?
         </sp-field-label>
         <sp-picker
@@ -187,7 +212,9 @@ export const slottedLabel = (args) => {
 };
 export const quiet = (args) => {
   return html`
-        <sp-field-label for="picker-quiet">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             ${spreadProps(args)}
             id="picker-quiet"
@@ -213,7 +240,11 @@ quiet.args = {
 };
 export const quietSideLabel = (args) => {
   return html`
-        <sp-field-label side-aligned="start" for="picker-quiet-sidelabel">
+        <sp-field-label
+            side-aligned="start"
+            for="picker-quiet-sidelabel"
+            size=${ifDefined(args.size)}
+        >
             Where do you live?
         </sp-field-label>
         <sp-picker
@@ -241,7 +272,7 @@ quietSideLabel.args = {
 };
 export const icons = (args) => {
   return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -268,7 +299,7 @@ export const icons = (args) => {
 };
 export const iconsNone = (args) => {
   return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -300,7 +331,7 @@ iconsNone.args = {
 iconsNone.decorators = [isOverlayOpen];
 export const iconValue = (args) => {
   return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -329,7 +360,7 @@ export const iconValue = (args) => {
 };
 export const iconsOnly = (args) => {
   return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -366,7 +397,7 @@ export const Open = (args) => {
             }
         </style>
         <fieldset class="backdrop-filter-test">
-            <sp-field-label for="picker-open">
+            <sp-field-label for="picker-open" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -387,7 +418,7 @@ export const Open = (args) => {
             </sp-picker>
         </fieldset>
         <fieldset>
-            <sp-field-label for="picker-closed">
+            <sp-field-label for="picker-closed" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -446,7 +477,7 @@ export const OpenShowingEdgeCase = (args) => {
             .
         </p>
         <fieldset class="backdrop-filter-test">
-            <sp-field-label for="picker-open">
+            <sp-field-label for="picker-open" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -467,7 +498,7 @@ export const OpenShowingEdgeCase = (args) => {
             </sp-picker>
         </fieldset>
         <fieldset>
-            <sp-field-label for="picker-closed">
+            <sp-field-label for="picker-closed" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -492,7 +523,9 @@ OpenShowingEdgeCase.swc_vrt = {
 };
 export const initialValue = (args) => {
   return html`
-        <sp-field-label for="picker-initial">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-initial" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             id="picker-initial"
             @change=${handleChange(args)}
@@ -534,7 +567,7 @@ export const readonly = (args) => {
 export const custom = (args) => {
   const initialState = "lb1-mo";
   return html`
-        <sp-field-label for="picker-state">
+        <sp-field-label for="picker-state" size=${ifDefined(args.size)}>
             What state do you live in?
         </sp-field-label>
         <sp-picker

package/stories/picker.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["picker.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport { states } from './states.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport '../../overlay/stories/index.js';\nimport { handleChange, StoryArgs, Template } from './template.js';\nimport { argTypes } from './args.js';\n\nexport default {\n    title: 'Picker',\n    component: 'sp-picker',\n    args: {\n        disabled: false,\n        invalid: false,\n        open: false,\n        quiet: false,\n    },\n    argTypes: {\n        onChange: { action: 'change' },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        ...argTypes,\n    },\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-1\">Where do you live?</sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => Template(args);\ndisabled.args = {\n    disabled: true,\n};\n\nexport const tooltip = (args: StoryArgs): TemplateResult => {\n    const { open, ...rest } = args;\n    return html`\n        <sp-field-label for=\"picker-1\">Where do you live?</sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(rest)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n            <sp-tooltip\n                slot=\"tooltip\"\n                ?open=${open}\n                self-managed\n                placement=\"right\"\n            >\n                This Picker wants to know where you live.\n            </sp-tooltip>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ntooltip.args = {\n    open: true,\n};\ntooltip.decorators = [isOverlayOpen];\n\nexport const leftSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label side-aligned=\"start\" for=\"picker-1\">\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const noVisibleLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            label=\"Where do you live?\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const slottedLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker @change=${handleChange(args)} ${spreadProps(args)}>\n            <span slot=\"label\">Where do you live?</span>\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const quiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\">Where do you live?</sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquiet.args = {\n    quiet: true,\n};\n\nexport const quietSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label side-aligned=\"start\" for=\"picker-quiet-sidelabel\">\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet-sidelabel\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquietSideLabel.args = {\n    quiet: true,\n};\n\nexport const icons = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\">\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsNone = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\">\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n            icons=\"none\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsNone.args = {\n    open: true,\n};\niconsNone.decorators = [isOverlayOpen];\n\nexport const iconValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\">\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            icons=\"only\"\n            style=\"width: 100px\"\n            value=\"2\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\">\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            style=\"width: 100px\"\n            value=\"3\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\" label=\"Edit\"></sp-icon-edit>\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\" label=\"Copy\"></sp-icon-copy>\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\" label=\"Delete\"></sp-icon-delete>\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsOnly.args = {\n    open: true,\n};\niconsOnly.decorators = [isOverlayOpen];\n\nexport const Open = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n        </style>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\">\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\">\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpen.args = {\n    open: true,\n};\nOpen.decorators = [isOverlayOpen];\n\nexport const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n            /* Enforce CSS stacking to test \"transition-behavior: allow-discrete\" */\n            /* Breaks the story in non-[popover] supporting browsers */\n            fieldset:nth-of-type(2) {\n                position: relative;\n                z-index: 2;\n            }\n            .backdrop-filter-test {\n                backdrop-filter: saturate(80%);\n            }\n        </style>\n        <p>\n            In browser that do not support\n            <code>[popover]</code>\n            , the following \"open\"\n            <code>sp-picker</code>\n            will display behind both the closed\n            <code>sp-picker</code>\n            as well as the\n            <code>fieldset</code>\n            that contains it.\n        </p>\n        <p>\n            Learn more about this situation in our\n            <sp-link\n                href=\"https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support\"\n            >\n                documentation site\n            </sp-link>\n            .\n        </p>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\">\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\">\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpenShowingEdgeCase.args = {\n    open: true,\n};\nOpenShowingEdgeCase.decorators = [isOverlayOpen];\nOpenShowingEdgeCase.swc_vrt = {\n    skip: true,\n};\n\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-initial\">Where do you live?</sp-field-label>\n        <sp-picker\n            id=\"picker-initial\"\n            @change=${handleChange(args)}\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const readonly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            readonly\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const custom = (args: StoryArgs): TemplateResult => {\n    const initialState = 'lb1-mo';\n    return html`\n        <sp-field-label for=\"picker-state\">\n            What state do you live in?\n        </sp-field-label>\n        <sp-picker\n            style=\"width: 400px;\"\n            @change=${handleChange(args)}\n            id=\"picker-state\"\n            label=\"Pick a state\"\n            ${spreadProps(args)}\n            value=${initialState}\n        >\n            ${states.map(\n                (state) => html`\n                    <sp-menu-item\n                        id=${state.id}\n                        value=${state.id}\n                        ?selected=${state.id === initialState}\n                    >\n                        ${state.label}\n                    </sp-menu-item>\n                `\n            )}\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ncustom.args = {\n    open: true,\n};\ncustom.decorators = [isOverlayOpen];\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport { states } from './states.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport '../../overlay/stories/index.js';\nimport { handleChange, StoryArgs, Template } from './template.js';\nimport { argTypes } from './args.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\n\nexport default {\n    title: 'Picker',\n    component: 'sp-picker',\n    args: {\n        disabled: false,\n        invalid: false,\n        open: false,\n        quiet: false,\n        pending: false,\n    },\n    argTypes: {\n        ...argTypes,\n        onChange: { action: 'change' },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        pending: {\n            name: 'pending',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => Template(args);\ndisabled.args = {\n    disabled: true,\n};\n\nexport const invalid = (args: StoryArgs): TemplateResult => Template(args);\ninvalid.args = {\n    invalid: true,\n};\n\nexport const tooltip = (args: StoryArgs): TemplateResult => {\n    const { open, ...rest } = args;\n    return html`\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(rest)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n            <sp-tooltip\n                slot=\"tooltip\"\n                ?open=${open}\n                self-managed\n                placement=\"right\"\n            >\n                This Picker wants to know where you live.\n            </sp-tooltip>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ntooltip.args = {\n    open: true,\n};\ntooltip.decorators = [isOverlayOpen];\n\nexport const leftSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label\n            side-aligned=\"start\"\n            for=\"picker-1\"\n            size=${ifDefined(args.size)}\n        >\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const noVisibleLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            label=\"Where do you live?\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const slottedLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker @change=${handleChange(args)} ${spreadProps(args)}>\n            <span slot=\"label\">Where do you live?</span>\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const quiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquiet.args = {\n    quiet: true,\n};\n\nexport const quietSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label\n            side-aligned=\"start\"\n            for=\"picker-quiet-sidelabel\"\n            size=${ifDefined(args.size)}\n        >\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet-sidelabel\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquietSideLabel.args = {\n    quiet: true,\n};\n\nexport const icons = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsNone = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n            icons=\"none\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsNone.args = {\n    open: true,\n};\niconsNone.decorators = [isOverlayOpen];\n\nexport const iconValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            icons=\"only\"\n            style=\"width: 100px\"\n            value=\"2\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            style=\"width: 100px\"\n            value=\"3\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\" label=\"Edit\"></sp-icon-edit>\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\" label=\"Copy\"></sp-icon-copy>\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\" label=\"Delete\"></sp-icon-delete>\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsOnly.args = {\n    open: true,\n};\niconsOnly.decorators = [isOverlayOpen];\n\nexport const Open = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n        </style>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpen.args = {\n    open: true,\n};\nOpen.decorators = [isOverlayOpen];\n\nexport const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n            /* Enforce CSS stacking to test \"transition-behavior: allow-discrete\" */\n            /* Breaks the story in non-[popover] supporting browsers */\n            fieldset:nth-of-type(2) {\n                position: relative;\n                z-index: 2;\n            }\n            .backdrop-filter-test {\n                backdrop-filter: saturate(80%);\n            }\n        </style>\n        <p>\n            In browser that do not support\n            <code>[popover]</code>\n            , the following \"open\"\n            <code>sp-picker</code>\n            will display behind both the closed\n            <code>sp-picker</code>\n            as well as the\n            <code>fieldset</code>\n            that contains it.\n        </p>\n        <p>\n            Learn more about this situation in our\n            <sp-link\n                href=\"https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support\"\n            >\n                documentation site\n            </sp-link>\n            .\n        </p>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpenShowingEdgeCase.args = {\n    open: true,\n};\nOpenShowingEdgeCase.decorators = [isOverlayOpen];\nOpenShowingEdgeCase.swc_vrt = {\n    skip: true,\n};\n\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-initial\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-initial\"\n            @change=${handleChange(args)}\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const readonly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            readonly\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const custom = (args: StoryArgs): TemplateResult => {\n    const initialState = 'lb1-mo';\n    return html`\n        <sp-field-label for=\"picker-state\" size=${ifDefined(args.size)}>\n            What state do you live in?\n        </sp-field-label>\n        <sp-picker\n            style=\"width: 400px;\"\n            @change=${handleChange(args)}\n            id=\"picker-state\"\n            label=\"Pick a state\"\n            ${spreadProps(args)}\n            value=${initialState}\n        >\n            ${states.map(\n                (state) => html`\n                    <sp-menu-item\n                        id=${state.id}\n                        value=${state.id}\n                        ?selected=${state.id === initialState}\n                    >\n                        ${state.label}\n                    </sp-menu-item>\n                `\n            )}\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ncustom.args = {\n    open: true,\n};\ncustom.decorators = [isOverlayOpen];\n"],
+  "mappings": "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",
   "names": []
 }

package/stories/template.js

@@ -1,16 +1,21 @@
 "use strict";
-import { html } from "@spectrum-web-components/base";
+import {
+  html
+} from "@spectrum-web-components/base";
 import "@spectrum-web-components/field-label/sp-field-label.js";
 import "@spectrum-web-components/picker/sp-picker.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import { spreadProps } from "../../../test/lit-helpers.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 export const handleChange = ({ onChange }) => (event) => {
   const picker = event.target;
   if (onChange)
     onChange(picker.value);
 };
 export const Template = (args) => html`
-    <sp-field-label for="picker-1">Where do you live?</sp-field-label>
+    <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+        Where do you live?
+    </sp-field-label>
     <sp-picker
         id="picker-1"
         @change=${handleChange(args)}

package/stories/template.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["template.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, type TemplateResult } from '@spectrum-web-components/base';\nimport type { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\n\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport interface StoryArgs {\n    disabled?: boolean;\n    invalid?: boolean;\n    open?: boolean;\n    quiet?: boolean;\n    showText?: boolean;\n    onChange?: (val: string) => void;\n    [prop: string]: unknown;\n}\n\nexport const handleChange =\n    ({ onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const picker = event.target as Picker;\n        if (onChange) onChange(picker.value);\n    };\n\nexport const Template = (args: StoryArgs): TemplateResult => html`\n    <sp-field-label for=\"picker-1\">Where do you live?</sp-field-label>\n    <sp-picker\n        id=\"picker-1\"\n        @change=${handleChange(args)}\n        label=\"Choose your neighborhood\"\n        ${spreadProps(args)}\n    >\n        <sp-menu-item value=\"option-1\">Carol Gardens</sp-menu-item>\n        <sp-menu-item value=\"option-2\">Cobble Hill</sp-menu-item>\n        <sp-menu-item value=\"option-3\">Ft. Greene</sp-menu-item>\n        <sp-menu-item value=\"option-4\">Park Slope</sp-menu-item>\n        <sp-menu-item disabled value=\"option-5\">Prospect Park</sp-menu-item>\n        <sp-menu-item value=\"option-6\">Red Hook</sp-menu-item>\n    </sp-picker>\n`;\n"],
-  "mappings": ";AAYA,SAAS,YAAiC;AAE1C,OAAO;AACP,OAAO;AACP,OAAO;AAEP,SAAS,mBAAmB;AAYrB,aAAM,eACT,CAAC,EAAE,SAAS,MACZ,CAAC,UAAuB;AACpB,QAAM,SAAS,MAAM;AACrB,MAAI;AAAU,aAAS,OAAO,KAAK;AACvC;AAEG,aAAM,WAAW,CAAC,SAAoC;AAAA;AAAA;AAAA;AAAA,kBAI3C,aAAa,IAAI,CAAC;AAAA;AAAA,UAE1B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    ElementSize,\n    html,\n    type TemplateResult,\n} from '@spectrum-web-components/base';\nimport type { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\n\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\n\nexport interface StoryArgs {\n    disabled?: boolean;\n    invalid?: boolean;\n    open?: boolean;\n    quiet?: boolean;\n    pending?: boolean;\n    showText?: boolean;\n    onChange?: (val: string) => void;\n    [prop: string]: unknown;\n    size?: ElementSize;\n}\n\nexport const handleChange =\n    ({ onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const picker = event.target as Picker;\n        if (onChange) onChange(picker.value);\n    };\n\nexport const Template = (args: StoryArgs): TemplateResult => html`\n    <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n        Where do you live?\n    </sp-field-label>\n    <sp-picker\n        id=\"picker-1\"\n        @change=${handleChange(args)}\n        label=\"Choose your neighborhood\"\n        ${spreadProps(args)}\n    >\n        <sp-menu-item value=\"option-1\">Carol Gardens</sp-menu-item>\n        <sp-menu-item value=\"option-2\">Cobble Hill</sp-menu-item>\n        <sp-menu-item value=\"option-3\">Ft. Greene</sp-menu-item>\n        <sp-menu-item value=\"option-4\">Park Slope</sp-menu-item>\n        <sp-menu-item disabled value=\"option-5\">Prospect Park</sp-menu-item>\n        <sp-menu-item value=\"option-6\">Red Hook</sp-menu-item>\n    </sp-picker>\n`;\n"],
+  "mappings": ";AAYA;AAAA,EAEI;AAAA,OAEG;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAcnB,aAAM,eACT,CAAC,EAAE,SAAS,MACZ,CAAC,UAAuB;AACpB,QAAM,SAAS,MAAM;AACrB,MAAI;AAAU,aAAS,OAAO,KAAK;AACvC;AAEG,aAAM,WAAW,CAAC,SAAoC;AAAA,0CACnB,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAK5C,aAAa,IAAI,CAAC;AAAA;AAAA,UAE1B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/test/index.js

@@ -31,8 +31,10 @@ import {
   slottedLabel,
   tooltip
 } from "../stories/picker.stories.js";
+import { M as pending } from "../stories/picker-pending.stories.js";
 import { sendMouse } from "../../../test/plugins/browser.js";
 import {
+  detectOS,
   ignoreResizeObserverLoopError,
   fixture as styledFixture
 } from "../../../test/testing-helpers.js";
@@ -42,6 +44,7 @@ import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/theme/src/themes.js";
+import { isWebKit } from "@spectrum-web-components/shared";
 ignoreResizeObserverLoopError(before, after);
 const isMenuActiveElement = function(el) {
   var _a;
@@ -150,26 +153,70 @@ export function runPickerTests() {
                 </div>
             `);
       const el2 = test.querySelector("sp-picker");
+      await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
       let snapshot = await a11ySnapshot({});
+      let name = "Where do you live?";
+      const isWebKitLinux = isWebKit() && detectOS() === "Linux";
+      let node = findAccessibilityNode(
+        snapshot,
+        (node2) => node2.name === name || isWebKitLinux && node2.description === name
+      );
       expect(
-        findAccessibilityNode(
+        node,
+        `pre escape hatch node not available: ${JSON.stringify(
           snapshot,
-          (node) => node.name === "Where do you live?"
-        ),
-        "`name` is the label text"
+          null,
+          "  "
+        )}`
       ).to.not.be.null;
+      if (isWebKitLinux) {
+        const iOSNode = findAccessibilityNode(
+          snapshot,
+          (node2) => node2.name === name
+        );
+        expect(
+          iOSNode,
+          `post escape hatch node available: ${JSON.stringify(
+            snapshot,
+            null,
+            "  "
+          )}`
+        ).to.be.null;
+      }
       el2.value = "option-2";
       await elementUpdated(el2);
       await nextFrame();
       await nextFrame();
       snapshot = await a11ySnapshot({});
+      name = "Select Inverse Where do you live?";
+      node = findAccessibilityNode(
+        snapshot,
+        (node2) => node2.name === name || isWebKitLinux && node2.description === name
+      );
       expect(
-        findAccessibilityNode(
+        node,
+        `pre escape hatch node not available: ${JSON.stringify(
           snapshot,
-          (node) => node.name === "Select Inverse Where do you live?"
-        ),
-        "`name` is the the selected item text plus the label text"
+          null,
+          "  "
+        )}`
       ).to.not.be.null;
+      if (isWebKitLinux) {
+        const iOSNode = findAccessibilityNode(
+          snapshot,
+          (node2) => node2.name === name
+        );
+        expect(
+          iOSNode,
+          `post escape hatch node available: ${JSON.stringify(
+            snapshot,
+            null,
+            "  "
+          )}`
+        ).to.not.be.null;
+      }
     });
   });
   describe("standard", () => {
@@ -1570,5 +1617,38 @@ export function runPickerTests() {
       expect(this.el.open).to.be.false;
     });
   });
+  describe("pending", function() {
+    beforeEach(async function() {
+      const test = await fixture(html`
+                <div>${pending({ pending: true })}</div>
+            `);
+      this.label = test.querySelector("sp-field-label");
+      this.el = test.querySelector("sp-picker");
+      await elementUpdated(this.elel);
+    });
+    it("receives focus from an `<sp-field-label>`", async function() {
+      expect(this.el.focused).to.be.false;
+      this.label.click();
+      await elementUpdated(this.el);
+      expect(this.el.focused).to.be.true;
+    });
+    it("does not open from `click()`", async function() {
+      expect(this.el.open).to.be.false;
+      this.el.click();
+      await elementUpdated(this.el);
+      expect(this.el.open).to.be.false;
+    });
+    it('manages its "name" value in the accessibility tree when [pending]', async () => {
+      const snapshot = await a11ySnapshot(
+        {}
+      );
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Pending Choose your neighborhood Where do you live?"
+        )
+      ).to.not.be.null;
+    });
+  });
 }
 //# sourceMappingURL=index.js.map