@spectrum-web-components/overlay 0.31.1-react.2 → 0.31.1-react.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/custom-elements.json +16 -4
  2. package/package.json +6 -6
  3. package/stories/overlay-story-components.js +18 -15
  4. package/stories/overlay-story-components.js.map +2 -2
  5. package/stories/overlay.stories.js +217 -194
  6. package/stories/overlay.stories.js.map +2 -2
  7. package/test/index.js +53 -39
  8. package/test/index.js.map +2 -2
  9. package/test/overlay-trigger-extended.test.js +3 -2
  10. package/test/overlay-trigger-extended.test.js.map +2 -2
  11. package/test/overlay.test.js +2 -3
  12. package/test/overlay.test.js.map +2 -2
package/stories/overlay.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["overlay.stories.ts"],
4
- "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\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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n openOverlay,\n Overlay,\n OverlayContentTypes,\n OverlayTrigger,\n Placement,\n TriggerInteractions,\n VirtualTrigger,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { DialogWrapper } from '@spectrum-web-components/dialog';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { render } from 'lit-html';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { Button } from '@spectrum-web-components/button';\n\nconst storyStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n },\n};\n\ninterface Properties {\n placement: Placement;\n offset: number;\n open?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n type,\n}: Properties): TemplateResult => {\n return html`\n ${storyStyles}\n <overlay-trigger\n id=\"trigger\"\n placement=\"${placement}\"\n offset=\"${offset}\"\n open=${ifDefined(open)}\n type=${ifDefined(type)}\n >\n <sp-button variant=\"primary\" slot=\"trigger\">Show Popover</sp-button>\n <sp-popover\n dialog\n slot=\"click-content\"\n placement=\"${placement}\"\n tip\n >\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n dialog\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n open\n >\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-popover>\n\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </div>\n </sp-popover>\n <sp-tooltip\n slot=\"hover-content\"\n ?delayed=${open !== 'hover'}\n tip=\"bottom\"\n >\n Click to open a popover.\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\n\nexport const openHoverContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'hover',\n });\n\nexport const openClickContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'click',\n });\n\nclass ScrollForcer extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n this.setup();\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n this.previousElementSibling?.addEventListener(\n 'sp-opened',\n () => {\n this.doScroll();\n },\n { once: true }\n );\n }\n\n async doScroll(): Promise<void> {\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 100;\n }\n\n await nextFrame();\n await nextFrame();\n this.ready(true);\n }\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('scroll-forcer', ScrollForcer);\n\nexport const clickContentClosedOnScroll = (\n args: Properties\n): TemplateResult => html`\n <div style=\"margin: 50vh 0 100vh;\">\n ${template({\n ...args,\n open: 'click',\n })}\n </div>\n`;\nclickContentClosedOnScroll.decorators = [\n (story: () => TemplateResult): TemplateResult => html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: auto !important;\n }\n </style>\n ${story()}\n <scroll-forcer></scroll-forcer>\n `,\n];\n\nexport const noCloseOnResize = (args: Properties): TemplateResult => html`\n <style>\n sp-button:hover {\n border: 10px solid;\n width: 100px;\n }\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\nnoCloseOnResize.swc_vrt = {\n skip: true,\n};\n\nexport const customizedClickContent = (\n args: Properties\n): TemplateResult => html`\n <style>\n active-overlay::part(theme) {\n --styled-div-background-color: var(--spectrum-semantic-cta-background-color-default);\n --spectrum-button-m-cta-texticon-background-color: rebeccapurple;\n }\n </style>\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\n\nconst extraText = html`\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\nexport const inline = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-overlay slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-overlay>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const replace = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"replace\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-overlay slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-overlay>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const deep = (): TemplateResult => html`\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 1 with buttons + selfmanaged Tooltips\n </sp-button>\n <sp-popover dialog slot=\"click-content\" direction=\"bottom\" tip open>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n A\n </sp-action-button>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n B\n </sp-action-button>\n </sp-popover>\n </overlay-trigger>\n\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 2 with buttons without ToolTips\n </sp-button>\n <sp-popover dialog slot=\"click-content\" direction=\"bottom\" tip open>\n <sp-action-button>X</sp-action-button>\n <sp-action-button>Y</sp-action-button>\n </sp-popover>\n </overlay-trigger>\n`;\ndeep.swc_vrt = {\n skip: true,\n};\n\nexport const modalLoose = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog\n size=\"s\"\n dismissable\n slot=\"click-content\"\n @closed=${(event: Event & { target: DialogWrapper }) =>\n event.target.dispatchEvent(closeEvent)}\n >\n <h2 slot=\"heading\">Loose Dialog</h2>\n <p>\n The\n <code>sp-dialog</code>\n element is not \"meant\" to be a modal alone. In that way it\n does not manage its own\n <code>open</code>\n attribute or outline when it should have\n <code>pointer-events: auto</code>\n . It's a part of this test suite to prove that content in\n this way can be used in an\n <code>overlay-trigger</code>\n element.\n </p>\n </sp-dialog>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const modalManaged = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog-wrapper\n underlay\n slot=\"click-content\"\n headline=\"Wrapped Dialog w/ Hero Image\"\n confirm-label=\"Keep Both\"\n secondary-label=\"Replace\"\n cancel-label=\"Cancel\"\n footer=\"Content for footer\"\n @confirm=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @secondary=${(\n event: Event & { target: DialogWrapper }\n ): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @cancel=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n <p>\n The\n <code>sp-dialog-wrapper</code>\n element has been prepared for use in an\n <code>overlay-trigger</code>\n element by it's combination of modal, underlay, etc. styles\n and features.\n </p>\n </sp-dialog-wrapper>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const deepNesting = (): TemplateResult => {\n const color = window.__swc_hack_knobs__.defaultColor;\n const outter = color === 'light' ? 'dark' : 'light';\n return html`\n ${storyStyles}\n <sp-theme\n color=${outter}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <sp-theme\n color=${color}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <recursive-popover\n tabindex=\"\"\n style=\"\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n padding: var(--spectrum-global-dimension-size-225);\n \"\n ></recursive-popover>\n </sp-theme>\n </sp-theme>\n `;\n};\n\nexport const edges = (): TemplateResult => {\n return html`\n <style>\n .demo {\n position: absolute;\n }\n .top-left {\n top: 0;\n left: 0;\n }\n .top-right {\n top: 0;\n right: 0;\n }\n .bottom-right {\n bottom: 0;\n right: 0;\n }\n .bottom-left {\n bottom: 0;\n left: 0;\n }\n </style>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo top-right\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo bottom-left\" placement=\"top\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"top\" class=\"demo bottom-right\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nexport const updated = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <overlay-target-icon\n slot=\"trigger\"\n style=\"translate(400px, 300px)\"\n ></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Click to open popover\n </sp-tooltip>\n <sp-popover\n dialog\n slot=\"click-content\"\n position=\"bottom\"\n tip\n open\n >\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n dialog\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n open\n >\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </div>\n </sp-popover>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const sideHoverDraggable = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger placement=\"right\">\n <overlay-target-icon slot=\"trigger\"></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"right\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Vivamus egestas sed enim sed condimentum. Nunc facilisis\n scelerisque massa sed luctus. Orci varius natoque penatibus\n et magnis dis parturient montes, nascetur ridiculus mus.\n Suspendisse sagittis sodales purus vitae ultricies. Integer\n at dui sem. Sed quam tortor, ornare in nisi et, rhoncus\n lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.\n Sed feugiat semper libero, sit amet vehicula orci fermentum\n id. Vivamus imperdiet egestas luctus. Mauris tincidunt\n malesuada ante, faucibus viverra nunc blandit a. Fusce et\n nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a\n ultricies dui. In hac habitasse platea dictumst. Curabitur\n gravida lobortis vestibulum.\n </sp-tooltip>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const longpress = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\" hold-affordance>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">Search real hard...</sp-tooltip>\n <sp-popover slot=\"longpress-content\" tip>\n <sp-action-group\n @change=${(event: Event & { target: HTMLElement }) =>\n event.target.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n selects=\"single\"\n vertical\n style=\"margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);\"\n >\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const clickAndHoverTargets = (): TemplateResult => {\n return html`\n <div>\n ${storyStyles}\n <style>\n .friendly-target {\n padding: 4px;\n margin: 6px;\n border: 2px solid black;\n border-radius: 6px;\n cursor: default;\n }\n </style>\n <overlay-trigger placement=\"right\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Click me\n </div>\n <sp-tooltip slot=\"click-content\" tip=\"right\">\n Ok, now hover the other trigger\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"left\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Then hover me\n </div>\n <sp-tooltip slot=\"hover-content\" tip=\"right\">\n Now click my trigger -- I should stay open, but the other\n overlay should close\n </sp-tooltip>\n </overlay-trigger>\n </div>\n `;\n};\nclickAndHoverTargets.swc_vrt = {\n skip: true,\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass ComplexModalReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const picker = document.querySelector('#test-picker') as Picker;\n picker.addEventListener('sp-opened', this.handlePickerOpen);\n picker.open = true;\n };\n\n handlePickerOpen = async (): Promise<void> => {\n const picker = document.querySelector('#test-picker') as Picker;\n const actions = [nextFrame, picker.updateComplete];\n\n await Promise.all(actions);\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('complex-modal-ready', ComplexModalReady);\n\nconst complexModalDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <complex-modal-ready></complex-modal-ready>\n `;\n};\n\nexport const complexModal = (): TemplateResult => {\n return html`\n <style>\n body {\n --swc-margin-test: 10px;\n margin: var(--swc-margin-test);\n }\n sp-story-decorator::part(container) {\n min-height: calc(100vh - (2 * var(--swc-margin-test)));\n padding: 0;\n display: grid;\n place-content: center;\n }\n active-overlay > * {\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n }\n </style>\n <overlay-trigger type=\"modal\" placement=\"none\" open=\"click\">\n <sp-dialog-wrapper\n slot=\"click-content\"\n headline=\"Dialog title\"\n dismissable\n underlay\n footer=\"Content for footer\"\n >\n <sp-field-label for=\"test-picker\">\n Selection type:\n </sp-field-label>\n <sp-picker id=\"test-picker\">\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-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-picker>\n </sp-dialog-wrapper>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n </overlay-trigger>\n `;\n};\n\ncomplexModal.decorators = [complexModalDecorator];\n\nexport const superComplexModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"accent\">Toggle Dialog</sp-button>\n <sp-popover dialog slot=\"click-content\">\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <overlay-trigger type=\"modal\">\n <sp-button slot=\"trigger\" variant=\"secondary\">\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <p>\n When you get this deep, this ActiveOverlay\n should be the only one in [slot=\"open\"].\n </p>\n <p>\n All of the rest of the ActiveOverlay\n elements should have had their [slot]\n attribute removed.\n </p>\n <p>\n Closing this ActiveOverlay should replace\n them...\n </p>\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nclass StartEndContextmenu extends HTMLElement {\n override shadowRoot!: ShadowRoot;\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `\n <style>\n :host {\n display: flex;\n align-items: stretch;\n }\n div {\n width: 50%;\n height: 100%;\n }\n </style>\n <div id=\"start\"></div>\n <div id=\"end\"></div>\n `;\n }\n}\n\ncustomElements.define('start-end-contextmenu', StartEndContextmenu);\n\nexport const virtualElement = (args: Properties): TemplateResult => {\n const contextMenuTemplate = (kind = ''): TemplateResult => html`\n <sp-popover\n style=\"width:300px;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">Menu source: ${kind}</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-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n const pointerenter = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const source = event.composedPath()[0] as HTMLDivElement;\n const { id } = source;\n const trigger = event.target as HTMLElement;\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const fragment = document.createDocumentFragment();\n render(contextMenuTemplate(id), fragment);\n const popover = fragment.querySelector('sp-popover') as Popover;\n openOverlay(trigger, 'modal', popover, {\n placement: args.placement,\n receivesFocus: 'auto',\n virtualTrigger,\n });\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n </style>\n <start-end-contextmenu\n class=\"app-root\"\n @contextmenu=${pointerenter}\n ></start-end-contextmenu>\n `;\n};\n\nvirtualElement.args = {\n placement: 'right-start' as Placement,\n};\n\nexport const detachedElement = (): TemplateResult => {\n let closeOverlay: (() => void) | undefined;\n const openDetachedOverlayContent = async ({\n target,\n }: {\n target: HTMLElement;\n }): Promise<void> => {\n if (closeOverlay) {\n closeOverlay();\n closeOverlay = undefined;\n return;\n }\n const div = document.createElement('div');\n div.textContent = 'This div is overlaid';\n div.setAttribute(\n 'style',\n `\n background-color: var(--spectrum-global-color-gray-50);\n color: var(--spectrum-global-color-gray-800);\n border: 1px solid;\n padding: 2em;\n `\n );\n closeOverlay = await Overlay.open(target, 'click', div, {\n offset: 0,\n placement: 'bottom',\n });\n };\n requestAnimationFrame(() => {\n openDetachedOverlayContent({\n target: document.querySelector(\n '#detached-content-trigger'\n ) as HTMLElement,\n });\n });\n return html`\n <sp-action-button\n id=\"detached-content-trigger\"\n @click=${openDetachedOverlayContent}\n @sp-closed=${() => (closeOverlay = undefined)}\n >\n <sp-icon-open-in\n slot=\"icon\"\n label=\"Open in overlay\"\n ></sp-icon-open-in>\n </sp-action-button>\n `;\n};\n\nclass DefinedOverlayReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n const button = document.querySelector(\n `[slot=\"trigger\"]`\n ) as HTMLButtonElement;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n button.click();\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const popover = document.querySelector('popover-content');\n if (!popover) {\n return;\n }\n popover.addEventListener('sp-opened', this.handlePopoverOpen);\n popover.button.click();\n };\n\n handlePopoverOpen = async (): Promise<void> => {\n await nextFrame();\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('defined-overlay-ready', DefinedOverlayReady);\n\nconst definedOverlayDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <defined-overlay-ready></defined-overlay-ready>\n `;\n};\n\nexport const definedOverlayElement = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"bottom\" type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" dialog>\n <popover-content></popover-content>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\ndefinedOverlayElement.decorators = [definedOverlayDecorator];\n\nexport const modalWithinNonModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\" dialog>\n <overlay-trigger type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open modal overlay\n </sp-button>\n <sp-popover slot=\"click-content\" dialog>\n Modal overlay\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const updating = (): TemplateResult => {\n const update = (): void => {\n const button = document.querySelector('[slot=\"trigger\"]') as Button;\n button.style.left = `${Math.floor(Math.random() * 200)}px`;\n button.style.top = `${Math.floor(Math.random() * 200)}px`;\n button.style.position = 'fixed';\n Overlay.update();\n };\n return html`\n <overlay-trigger type=\"click\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\" dialog>\n <sp-button variant=\"primary\" @click=${update}>\n Update trigger location.\n </sp-button>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nupdating.swc_vrt = {\n skip: true,\n};\n\nexport const accordion = (): TemplateResult => {\n const handleToggle = (): void => {\n Overlay.update();\n };\n return html`\n <overlay-trigger type=\"modal\" placement=\"right\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open overlay w/ accordion\n </sp-button>\n <div slot=\"click-content\" style=\"max-height: 100%;display: flex;\">\n <sp-popover\n open\n dialog\n style=\"overflow-y: scroll;position: static;\"\n >\n <sp-accordion\n allow-multiple\n @sp-accordion-item-toggle=${handleToggle}\n >\n <sp-accordion-item label=\"Some things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Other things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"More things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Additional things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n </sp-accordion>\n </sp-popover>\n </div>\n </overlay-trigger>\n `;\n};\n\naccordion.swc_vrt = {\n skip: true,\n};\n"],
5
- "mappings": ";AAUA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAC1B;AAAA,EACI;AAAA,EACA;AAAA,EAKA;AAAA,OACG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AACP,SAAS,cAAc;AAIvB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCpB,eAAe;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,QAAQ,EAAE,SAAS,SAAS;AAAA,IAC5B,WAAW;AAAA,MACP,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACF,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,WAAW,QAAQ;AAAA,MAC1C;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,MACP,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,MAAM;AAAA,MAC7B;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA,EACf;AACJ;AASA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA,UACD;AAAA;AAAA;AAAA,yBAGe;AAAA,sBACH;AAAA,mBACH,UAAU,IAAI;AAAA,mBACd,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAMJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAoCF,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpC;AAEO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAEnE,aAAM,mBAAmB,CAAC,SAC7B,SAAS;AAAA,EACL,GAAG;AAAA,EACH,MAAM;AACV,CAAC;AAEE,aAAM,mBAAmB,CAAC,SAC7B,SAAS;AAAA,EACL,GAAG;AAAA,EACH,MAAM;AACV,CAAC;AAEL,MAAM,qBAAqB,YAAY;AAAA,EAGnC,cAAc;AACV,UAAM;AAmCV,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAlC1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AAAA,IACjB,CAAC;AACD,SAAK,MAAM;AAAA,EACf;AAAA,EAEA,MAAM,QAAuB;AAvOjC;AAwOQ,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,eAAK,2BAAL,mBAA6B;AAAA,MACzB;AAAA,MACA,MAAM;AACF,aAAK,SAAS;AAAA,MAClB;AAAA,MACA,EAAE,MAAM,KAAK;AAAA;AAAA,EAErB;AAAA,EAEA,MAAM,WAA0B;AAC5B,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,QAAI,SAAS,kBAAkB;AAC3B,eAAS,iBAAiB,YAAY;AAAA,IAC1C;AAEA,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB,SAAK,MAAM,IAAI;AAAA,EACnB;AAAA,EAIA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,iBAAiB,YAAY;AAE5C,aAAM,6BAA6B,CACtC,SACiB;AAAA;AAAA,UAEX,SAAS;AAAA,EACP,GAAG;AAAA,EACH,MAAM;AACV,CAAC;AAAA;AAAA;AAGT,2BAA2B,aAAa;AAAA,EACpC,CAAC,UAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAU3C,MAAM;AAAA;AAAA;AAGhB;AAEO,aAAM,kBAAkB,CAAC,SAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO/D,SAAS;AAAA,EACP,GAAG;AAAA,EACH,MAAM;AACV,CAAC;AAAA;AAEL,gBAAgB,UAAU;AAAA,EACtB,MAAM;AACV;AAEO,aAAM,yBAAyB,CAClC,SACiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQf,SAAS;AAAA,EACP,GAAG;AAAA,EACH,MAAM;AACV,CAAC;AAAA;AAGL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX,aAAM,SAAS,MAAsB;AACxC,QAAM,aAAa,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AACvE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKkB,CAAC,UAAiD;AACvD,UAAM,OAAO,cAAc,UAAU;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMV;AAAA;AAEV;AAEO,aAAM,UAAU,MAAsB;AACzC,QAAM,aAAa,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AACvE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKkB,CAAC,UAAiD;AACvD,UAAM,OAAO,cAAc,UAAU;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMV;AAAA;AAEV;AAEO,aAAM,OAAO,MAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+B1C,KAAK,UAAU;AAAA,EACX,MAAM;AACV;AAEO,aAAM,aAAa,MAAsB;AAC5C,QAAM,aAAa,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AACvE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOe,CAAC,UACP,MAAM,OAAO,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAkB/C;AAAA;AAEV;AAEO,aAAM,eAAe,MAAsB;AAC9C,QAAM,aAAa,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AACvE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAWgB,CAAC,UAAmD;AAC3D,UAAM,OAAO,cAAc,UAAU;AAAA,EACzC;AAAA,6BACa,CACT,UACO;AACP,UAAM,OAAO,cAAc,UAAU;AAAA,EACzC;AAAA,0BACU,CAAC,UAAmD;AAC1D,UAAM,OAAO,cAAc,UAAU;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYN;AAAA;AAEV;AAEO,aAAM,cAAc,MAAsB;AAC7C,QAAM,QAAQ,OAAO,mBAAmB;AACxC,QAAM,SAAS,UAAU,UAAU,SAAS;AAC5C,SAAO;AAAA,UACD;AAAA;AAAA,oBAEU;AAAA,oBACA,OAAO,mBAAmB;AAAA,oBAC1B,OAAO,mBAAmB;AAAA,kBAC5B,OAAO,mBAAmB;AAAA;AAAA;AAAA,wBAGpB;AAAA,wBACA,OAAO,mBAAmB;AAAA,wBAC1B,OAAO,mBAAmB;AAAA,sBAC5B,OAAO,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA,UACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DV;AAEO,aAAM,qBAAqB,MAAsB;AACpD,SAAO;AAAA,UACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BV;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAQmB,CAAC,UACP,MAAM,OAAO;AAAA,IACT,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB;AAEO,aAAM,uBAAuB,MAAsB;AACtD,SAAO;AAAA;AAAA,cAEG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6Bd;AACA,qBAAqB,UAAU;AAAA,EAC3B,MAAM;AACV;AAEA,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,0BAA0B,YAAY;AAAA,EAGxC,cAAc;AACV,UAAM;AAgBV,+BAAsB,YAA2B;AAC7C,YAAM,UAAU;AAEhB,YAAM,SAAS,SAAS,cAAc,cAAc;AACpD,aAAO,iBAAiB,aAAa,KAAK,gBAAgB;AAC1D,aAAO,OAAO;AAAA,IAClB;AAEA,4BAAmB,YAA2B;AAC1C,YAAM,SAAS,SAAS,cAAc,cAAc;AACpD,YAAM,UAAU,CAAC,WAAW,OAAO,cAAc;AAEjD,YAAM,QAAQ,IAAI,OAAO;AAEzB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAhC1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAEhB,UAAM,UAAU,SAAS;AAAA,MACrB;AAAA,IACJ;AACA,YAAQ,iBAAiB,aAAa,KAAK,mBAAmB;AAAA,EAClE;AAAA,EAqBA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,uBAAuB,iBAAiB;AAE9D,MAAM,wBAAwB,CAAC,UAAgD;AAC3E,SAAO;AAAA,UACD,MAAM;AAAA;AAAA;AAGhB;AAEO,aAAM,eAAe,MAAsB;AAC9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoEX;AAEA,aAAa,aAAa,CAAC,qBAAqB;AAEzC,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCX;AAEA,MAAM,4BAA4B,YAAY;AAAA,EAE1C,cAAc;AACV,UAAM;AACN,SAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAClC,SAAK,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchC;AACJ;AAEA,eAAe,OAAO,yBAAyB,mBAAmB;AAE3D,aAAM,iBAAiB,CAAC,SAAqC;AAChE,QAAM,sBAAsB,CAAC,OAAO,OAAuB;AAAA;AAAA;AAAA,qBAG1C,CAAC,UAAc;AAv6BpC;AAw6BgB,uBAAM,WAAN,mBAAc;AAAA,MACV,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uDAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYnD,QAAM,eAAe,OAAO,UAAuC;AAC/D,UAAM,eAAe;AACrB,UAAM,SAAS,MAAM,aAAa,EAAE,CAAC;AACrC,UAAM,EAAE,GAAG,IAAI;AACf,UAAM,UAAU,MAAM;AACtB,UAAM,iBAAiB,IAAI,eAAe,MAAM,SAAS,MAAM,OAAO;AACtE,UAAM,WAAW,SAAS,uBAAuB;AACjD,WAAO,oBAAoB,EAAE,GAAG,QAAQ;AACxC,UAAM,UAAU,SAAS,cAAc,YAAY;AACnD,gBAAY,SAAS,SAAS,SAAS;AAAA,MACnC,WAAW,KAAK;AAAA,MAChB,eAAe;AAAA,MACf;AAAA,IACJ,CAAC;AAAA,EACL;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BASgB;AAAA;AAAA;AAG3B;AAEA,eAAe,OAAO;AAAA,EAClB,WAAW;AACf;AAEO,aAAM,kBAAkB,MAAsB;AACjD,MAAI;AACJ,QAAM,6BAA6B,OAAO;AAAA,IACtC;AAAA,EACJ,MAEqB;AACjB,QAAI,cAAc;AACd,mBAAa;AACb,qBAAe;AACf;AAAA,IACJ;AACA,UAAM,MAAM,SAAS,cAAc,KAAK;AACxC,QAAI,cAAc;AAClB,QAAI;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMJ;AACA,mBAAe,MAAM,QAAQ,KAAK,QAAQ,SAAS,KAAK;AAAA,MACpD,QAAQ;AAAA,MACR,WAAW;AAAA,IACf,CAAC;AAAA,EACL;AACA,wBAAsB,MAAM;AACxB,+BAA2B;AAAA,MACvB,QAAQ,SAAS;AAAA,QACb;AAAA,MACJ;AAAA,IACJ,CAAC;AAAA,EACL,CAAC;AACD,SAAO;AAAA;AAAA;AAAA,qBAGU;AAAA,yBACI,MAAO,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C;AAEA,MAAM,4BAA4B,YAAY;AAAA,EAG1C,cAAc;AACV,UAAM;AAoBV,+BAAsB,YAA2B;AAC7C,YAAM,UAAU;AAEhB,YAAM,UAAU,SAAS,cAAc,iBAAiB;AACxD,UAAI,CAAC,SAAS;AACV;AAAA,MACJ;AACA,cAAQ,iBAAiB,aAAa,KAAK,iBAAiB;AAC5D,cAAQ,OAAO,MAAM;AAAA,IACzB;AAEA,6BAAoB,YAA2B;AAC3C,YAAM,UAAU;AAEhB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AApC1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAEhB,UAAM,UAAU,SAAS;AAAA,MACrB;AAAA,IACJ;AACA,UAAM,SAAS,SAAS;AAAA,MACpB;AAAA,IACJ;AACA,YAAQ,iBAAiB,aAAa,KAAK,mBAAmB;AAC9D,WAAO,MAAM;AAAA,EACjB;AAAA,EAqBA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,yBAAyB,mBAAmB;AAElE,MAAM,0BAA0B,CAC5B,UACiB;AACjB,SAAO;AAAA,UACD,MAAM;AAAA;AAAA;AAGhB;AAEO,aAAM,wBAAwB,MAAsB;AACvD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQX;AAEA,sBAAsB,aAAa,CAAC,uBAAuB;AAEpD,aAAM,sBAAsB,MAAsB;AACrD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBX;AAEO,aAAM,WAAW,MAAsB;AAC1C,QAAM,SAAS,MAAY;AACvB,UAAM,SAAS,SAAS,cAAc,kBAAkB;AACxD,WAAO,MAAM,OAAO,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACrD,WAAO,MAAM,MAAM,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACpD,WAAO,MAAM,WAAW;AACxB,YAAQ,OAAO;AAAA,EACnB;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sDAM2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtD;AAEA,SAAS,UAAU;AAAA,EACf,MAAM;AACV;AAEO,aAAM,YAAY,MAAsB;AAC3C,QAAM,eAAe,MAAY;AAC7B,YAAQ,OAAO;AAAA,EACnB;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oDAayC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DpD;AAEA,UAAU,UAAU;AAAA,EAChB,MAAM;AACV;",
4
+ "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\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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n openOverlay,\n Overlay,\n OverlayContentTypes,\n OverlayTrigger,\n Placement,\n TriggerInteractions,\n VirtualTrigger,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { DialogWrapper } from '@spectrum-web-components/dialog';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { render } from 'lit-html';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { Button } from '@spectrum-web-components/button';\n\nconst storyStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n },\n};\n\ninterface Properties {\n placement: Placement;\n offset: number;\n open?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n type,\n}: Properties): TemplateResult => {\n return html`\n ${storyStyles}\n <overlay-trigger\n id=\"trigger\"\n placement=\"${placement}\"\n offset=\"${offset}\"\n open=${ifDefined(open)}\n type=${ifDefined(type)}\n >\n <sp-button variant=\"primary\" slot=\"trigger\">Show Popover</sp-button>\n <sp-popover slot=\"click-content\" placement=\"${placement}\" tip>\n <sp-dialog no-divider>\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n open\n >\n <sp-dialog size=\"s\" no-divider>\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-dialog>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </div>\n </sp-dialog>\n </sp-popover>\n <sp-tooltip\n slot=\"hover-content\"\n ?delayed=${open !== 'hover'}\n tip=\"bottom\"\n >\n Click to open a popover.\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\n\nexport const openHoverContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'hover',\n });\n\nexport const openClickContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'click',\n });\n\nclass ScrollForcer extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n this.setup();\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n this.previousElementSibling?.addEventListener(\n 'sp-opened',\n () => {\n this.doScroll();\n },\n { once: true }\n );\n }\n\n async doScroll(): Promise<void> {\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 100;\n }\n\n await nextFrame();\n await nextFrame();\n this.ready(true);\n }\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('scroll-forcer', ScrollForcer);\n\nexport const clickContentClosedOnScroll = (\n args: Properties\n): TemplateResult => html`\n <div style=\"margin: 50vh 0 100vh;\">\n ${template({\n ...args,\n open: 'click',\n })}\n </div>\n`;\nclickContentClosedOnScroll.decorators = [\n (story: () => TemplateResult): TemplateResult => html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: auto !important;\n }\n </style>\n ${story()}\n <scroll-forcer></scroll-forcer>\n `,\n];\n\nexport const noCloseOnResize = (args: Properties): TemplateResult => html`\n <style>\n sp-button:hover {\n border: 10px solid;\n width: 100px;\n }\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\nnoCloseOnResize.swc_vrt = {\n skip: true,\n};\n\nexport const customizedClickContent = (\n args: Properties\n): TemplateResult => html`\n <style>\n active-overlay::part(theme) {\n --styled-div-background-color: var(--spectrum-semantic-cta-background-color-default);\n --spectrum-button-m-cta-texticon-background-color: rebeccapurple;\n }\n </style>\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\n\nconst extraText = html`\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\nexport const inline = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-overlay slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-overlay>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const replace = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"replace\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-overlay slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-overlay>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const deep = (): TemplateResult => html`\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 1 with buttons + selfmanaged Tooltips\n </sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" tip open>\n <sp-dialog size=\"s\" no-divider>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n A\n </sp-action-button>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n B\n </sp-action-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 2 with buttons without ToolTips\n </sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" tip open>\n <sp-dialog size=\"s\" no-divider>\n <sp-action-button>X</sp-action-button>\n <sp-action-button>Y</sp-action-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n`;\ndeep.swc_vrt = {\n skip: true,\n};\n\nexport const modalLoose = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog\n size=\"s\"\n dismissable\n slot=\"click-content\"\n @closed=${(event: Event & { target: DialogWrapper }) =>\n event.target.dispatchEvent(closeEvent)}\n >\n <h2 slot=\"heading\">Loose Dialog</h2>\n <p>\n The\n <code>sp-dialog</code>\n element is not \"meant\" to be a modal alone. In that way it\n does not manage its own\n <code>open</code>\n attribute or outline when it should have\n <code>pointer-events: auto</code>\n . It's a part of this test suite to prove that content in\n this way can be used in an\n <code>overlay-trigger</code>\n element.\n </p>\n </sp-dialog>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const modalManaged = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog-wrapper\n underlay\n slot=\"click-content\"\n headline=\"Wrapped Dialog w/ Hero Image\"\n confirm-label=\"Keep Both\"\n secondary-label=\"Replace\"\n cancel-label=\"Cancel\"\n footer=\"Content for footer\"\n @confirm=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @secondary=${(\n event: Event & { target: DialogWrapper }\n ): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @cancel=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n <p>\n The\n <code>sp-dialog-wrapper</code>\n element has been prepared for use in an\n <code>overlay-trigger</code>\n element by it's combination of modal, underlay, etc. styles\n and features.\n </p>\n </sp-dialog-wrapper>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const deepNesting = (): TemplateResult => {\n const color = window.__swc_hack_knobs__.defaultColor;\n const outter = color === 'light' ? 'dark' : 'light';\n return html`\n ${storyStyles}\n <sp-theme\n color=${outter}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <sp-theme\n color=${color}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <recursive-popover\n tabindex=\"\"\n style=\"\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n padding: var(--spectrum-global-dimension-size-225);\n \"\n ></recursive-popover>\n </sp-theme>\n </sp-theme>\n `;\n};\n\nexport const edges = (): TemplateResult => {\n return html`\n <style>\n .demo {\n position: absolute;\n }\n .top-left {\n top: 0;\n left: 0;\n }\n .top-right {\n top: 0;\n right: 0;\n }\n .bottom-right {\n bottom: 0;\n right: 0;\n }\n .bottom-left {\n bottom: 0;\n left: 0;\n }\n </style>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo top-right\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo bottom-left\" placement=\"top\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"top\" class=\"demo bottom-right\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed open tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nexport const updated = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <overlay-target-icon\n slot=\"trigger\"\n style=\"translate(400px, 300px)\"\n ></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Click to open popover\n </sp-tooltip>\n <sp-popover slot=\"click-content\" position=\"bottom\" tip open>\n <sp-dialog size=\"s\" no-divider>\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger\n id=\"inner-trigger\"\n placement=\"bottom\"\n >\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n open\n >\n <sp-dialog size=\"s\" no-divider>\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-dialog>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </div>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const sideHoverDraggable = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger placement=\"right\">\n <overlay-target-icon slot=\"trigger\"></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"right\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Vivamus egestas sed enim sed condimentum. Nunc facilisis\n scelerisque massa sed luctus. Orci varius natoque penatibus\n et magnis dis parturient montes, nascetur ridiculus mus.\n Suspendisse sagittis sodales purus vitae ultricies. Integer\n at dui sem. Sed quam tortor, ornare in nisi et, rhoncus\n lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.\n Sed feugiat semper libero, sit amet vehicula orci fermentum\n id. Vivamus imperdiet egestas luctus. Mauris tincidunt\n malesuada ante, faucibus viverra nunc blandit a. Fusce et\n nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a\n ultricies dui. In hac habitasse platea dictumst. Curabitur\n gravida lobortis vestibulum.\n </sp-tooltip>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const longpress = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\" hold-affordance>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">Search real hard...</sp-tooltip>\n <sp-popover slot=\"longpress-content\" tip>\n <sp-action-group\n @change=${(event: Event & { target: HTMLElement }) =>\n event.target.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n selects=\"single\"\n vertical\n style=\"margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);\"\n >\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const clickAndHoverTargets = (): TemplateResult => {\n return html`\n <div>\n ${storyStyles}\n <style>\n .friendly-target {\n padding: 4px;\n margin: 6px;\n border: 2px solid black;\n border-radius: 6px;\n cursor: default;\n }\n </style>\n <overlay-trigger placement=\"right\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Click me\n </div>\n <sp-tooltip slot=\"click-content\" tip=\"right\">\n Ok, now hover the other trigger\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"left\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Then hover me\n </div>\n <sp-tooltip slot=\"hover-content\" tip=\"right\">\n Now click my trigger -- I should stay open, but the other\n overlay should close\n </sp-tooltip>\n </overlay-trigger>\n </div>\n `;\n};\nclickAndHoverTargets.swc_vrt = {\n skip: true,\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass ComplexModalReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const picker = document.querySelector('#test-picker') as Picker;\n picker.addEventListener('sp-opened', this.handlePickerOpen);\n picker.open = true;\n };\n\n handlePickerOpen = async (): Promise<void> => {\n const picker = document.querySelector('#test-picker') as Picker;\n const actions = [nextFrame, picker.updateComplete];\n\n await Promise.all(actions);\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('complex-modal-ready', ComplexModalReady);\n\nconst complexModalDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <complex-modal-ready></complex-modal-ready>\n `;\n};\n\nexport const complexModal = (): TemplateResult => {\n return html`\n <style>\n body {\n --swc-margin-test: 10px;\n margin: var(--swc-margin-test);\n }\n sp-story-decorator::part(container) {\n min-height: calc(100vh - (2 * var(--swc-margin-test)));\n padding: 0;\n display: grid;\n place-content: center;\n }\n active-overlay > * {\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n }\n </style>\n <overlay-trigger type=\"modal\" placement=\"none\" open=\"click\">\n <sp-dialog-wrapper\n slot=\"click-content\"\n headline=\"Dialog title\"\n dismissable\n underlay\n footer=\"Content for footer\"\n >\n <sp-field-label for=\"test-picker\">\n Selection type:\n </sp-field-label>\n <sp-picker id=\"test-picker\">\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-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-picker>\n </sp-dialog-wrapper>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n </overlay-trigger>\n `;\n};\n\ncomplexModal.decorators = [complexModalDecorator];\n\nexport const superComplexModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"accent\">Toggle Dialog</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\">\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <p>\n When you get this deep, this\n ActiveOverlay should be the only\n one in [slot=\"open\"].\n </p>\n <p>\n All of the rest of the\n ActiveOverlay elements should\n have had their [slot] attribute\n removed.\n </p>\n <p>\n Closing this ActiveOverlay\n should replace them...\n </p>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nclass StartEndContextmenu extends HTMLElement {\n override shadowRoot!: ShadowRoot;\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `\n <style>\n :host {\n display: flex;\n align-items: stretch;\n }\n div {\n width: 50%;\n height: 100%;\n }\n </style>\n <div id=\"start\"></div>\n <div id=\"end\"></div>\n `;\n }\n}\n\ncustomElements.define('start-end-contextmenu', StartEndContextmenu);\n\nexport const virtualElement = (args: Properties): TemplateResult => {\n const contextMenuTemplate = (kind = ''): TemplateResult => html`\n <sp-popover\n style=\"width:300px;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">Menu source: ${kind}</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-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n const pointerenter = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const source = event.composedPath()[0] as HTMLDivElement;\n const { id } = source;\n const trigger = event.target as HTMLElement;\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const fragment = document.createDocumentFragment();\n render(contextMenuTemplate(id), fragment);\n const popover = fragment.querySelector('sp-popover') as Popover;\n openOverlay(trigger, 'modal', popover, {\n placement: args.placement,\n receivesFocus: 'auto',\n virtualTrigger,\n });\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n </style>\n <start-end-contextmenu\n class=\"app-root\"\n @contextmenu=${pointerenter}\n ></start-end-contextmenu>\n `;\n};\n\nvirtualElement.args = {\n placement: 'right-start' as Placement,\n};\n\nexport const detachedElement = (): TemplateResult => {\n let closeOverlay: (() => void) | undefined;\n const openDetachedOverlayContent = async ({\n target,\n }: {\n target: HTMLElement;\n }): Promise<void> => {\n if (closeOverlay) {\n closeOverlay();\n closeOverlay = undefined;\n return;\n }\n const div = document.createElement('div');\n div.textContent = 'This div is overlaid';\n div.setAttribute(\n 'style',\n `\n background-color: var(--spectrum-global-color-gray-50);\n color: var(--spectrum-global-color-gray-800);\n border: 1px solid;\n padding: 2em;\n `\n );\n closeOverlay = await Overlay.open(target, 'click', div, {\n offset: 0,\n placement: 'bottom',\n });\n };\n requestAnimationFrame(() => {\n openDetachedOverlayContent({\n target: document.querySelector(\n '#detached-content-trigger'\n ) as HTMLElement,\n });\n });\n return html`\n <sp-action-button\n id=\"detached-content-trigger\"\n @click=${openDetachedOverlayContent}\n @sp-closed=${() => (closeOverlay = undefined)}\n >\n <sp-icon-open-in\n slot=\"icon\"\n label=\"Open in overlay\"\n ></sp-icon-open-in>\n </sp-action-button>\n `;\n};\n\nclass DefinedOverlayReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n const button = document.querySelector(\n `[slot=\"trigger\"]`\n ) as HTMLButtonElement;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n button.click();\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const popover = document.querySelector('popover-content');\n if (!popover) {\n return;\n }\n popover.addEventListener('sp-opened', this.handlePopoverOpen);\n popover.button.click();\n };\n\n handlePopoverOpen = async (): Promise<void> => {\n await nextFrame();\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('defined-overlay-ready', DefinedOverlayReady);\n\nconst definedOverlayDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <defined-overlay-ready></defined-overlay-ready>\n `;\n};\n\nexport const definedOverlayElement = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"bottom\" type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\">\n <sp-dialog no-divider>\n <popover-content></popover-content>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\ndefinedOverlayElement.decorators = [definedOverlayDecorator];\n\nexport const modalWithinNonModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <overlay-trigger type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open modal overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n Modal overlay\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const updating = (): TemplateResult => {\n const update = (): void => {\n const button = document.querySelector('[slot=\"trigger\"]') as Button;\n button.style.left = `${Math.floor(Math.random() * 200)}px`;\n button.style.top = `${Math.floor(Math.random() * 200)}px`;\n button.style.position = 'fixed';\n Overlay.update();\n };\n return html`\n <overlay-trigger type=\"click\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <sp-button variant=\"primary\" @click=${update}>\n Update trigger location.\n </sp-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nupdating.swc_vrt = {\n skip: true,\n};\n\nexport const accordion = (): TemplateResult => {\n const handleToggle = (): void => {\n Overlay.update();\n };\n return html`\n <overlay-trigger type=\"modal\" placement=\"right\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open overlay w/ accordion\n </sp-button>\n <div slot=\"click-content\" style=\"max-height: 100%;display: flex;\">\n <sp-popover open style=\"overflow-y: scroll;position: static;\">\n <sp-dialog size=\"s\" no-divider>\n <sp-accordion\n allow-multiple\n @sp-accordion-item-toggle=${handleToggle}\n >\n <sp-accordion-item label=\"Some things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Other things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"More things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Additional things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n </sp-accordion>\n </sp-dialog>\n </sp-popover>\n </div>\n </overlay-trigger>\n `;\n};\n\naccordion.swc_vrt = {\n skip: true,\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/test/index.js CHANGED
@@ -62,14 +62,16 @@ export const runOverlayTriggerTests = () => {
62
62
  </sp-button>
63
63
  <sp-popover
64
64
  id="outer-popover"
65
- dialog
66
65
  slot="click-content"
67
66
  direction="bottom"
68
67
  tip
69
68
  open
70
69
  tabindex="0"
71
70
  >
72
- <div class="options-popover-content">
71
+ <sp-dialog
72
+ no-divider
73
+ class="options-popover-content"
74
+ >
73
75
  <overlay-trigger
74
76
  id="inner-trigger"
75
77
  placement="bottom"
@@ -82,21 +84,21 @@ export const runOverlayTriggerTests = () => {
82
84
  </sp-button>
83
85
  <sp-popover
84
86
  id="inner-popover"
85
- dialog
86
87
  slot="click-content"
87
88
  direction="bottom"
88
89
  tip
89
90
  open
90
91
  tabindex="0"
91
92
  >
92
- <div
93
+ <sp-dialog
94
+ no-divider
93
95
  class="options-popover-content"
94
96
  >
95
97
  Another Popover
96
- </div>
98
+ </sp-dialog>
97
99
  </sp-popover>
98
100
  </overlay-trigger>
99
- </div>
101
+ </sp-dialog>
100
102
  </sp-popover>
101
103
  <div
102
104
  id="hover-content"
@@ -573,39 +575,51 @@ export const runOverlayTriggerTests = () => {
573
575
  <sp-button slot="trigger" variant="accent">
574
576
  Toggle Dialog
575
577
  </sp-button>
576
- <sp-popover dialog slot="click-content">
577
- <overlay-trigger>
578
- <sp-button slot="trigger" variant="primary">
579
- Toggle Dialog
580
- </sp-button>
581
- <sp-popover dialog slot="click-content">
582
- <overlay-trigger type="modal">
583
- <sp-button
584
- slot="trigger"
585
- variant="secondary"
586
- >
587
- Toggle Dialog
588
- </sp-button>
589
- <sp-popover dialog slot="click-content">
590
- <p>
591
- When you get this deep, this
592
- ActiveOverlay should be the only
593
- one in [slot="open"].
594
- </p>
595
- <p>
596
- All of the rest of the
597
- ActiveOverlay elements should
598
- have had their [slot] attribute
599
- removed.
600
- </p>
601
- <p>
602
- Closing this ActiveOverlay
603
- should replace them...
604
- </p>
605
- </sp-popover>
606
- </overlay-trigger>
607
- </sp-popover>
608
- </overlay-trigger>
578
+ <sp-popover slot="click-content">
579
+ <sp-dialog no-divider>
580
+ <overlay-trigger>
581
+ <sp-button slot="trigger" variant="primary">
582
+ Toggle Dialog
583
+ </sp-button>
584
+ <sp-popover slot="click-content">
585
+ <sp-dialog no-divider>
586
+ <overlay-trigger type="modal">
587
+ <sp-button
588
+ slot="trigger"
589
+ variant="secondary"
590
+ >
591
+ Toggle Dialog
592
+ </sp-button>
593
+ <sp-popover
594
+ slot="click-content"
595
+ >
596
+ <sp-dialog no-divider>
597
+ <p>
598
+ When you get this
599
+ deep, this
600
+ ActiveOverlay should
601
+ be the only one in
602
+ [slot="open"].
603
+ </p>
604
+ <p>
605
+ All of the rest of
606
+ the ActiveOverlay
607
+ elements should have
608
+ had their [slot]
609
+ attribute removed.
610
+ </p>
611
+ <p>
612
+ Closing this
613
+ ActiveOverlay should
614
+ replace them...
615
+ </p>
616
+ </sp-dialog>
617
+ </sp-popover>
618
+ </overlay-trigger>
619
+ </sp-dialog>
620
+ </sp-popover>
621
+ </overlay-trigger>
622
+ </sp-dialog>
609
623
  </sp-popover>
610
624
  </overlay-trigger>
611
625
  `);