@spectrum-web-components/theme 0.14.12 → 0.14.14-overlay.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/theme",
-    "version": "0.14.12",
+    "version": "0.14.14-overlay.22+e296a22f1",
     "publishConfig": {
         "access": "public"
     },
@@ -133,8 +133,8 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.4",
-        "@spectrum-web-components/styles": "^0.23.1"
+        "@spectrum-web-components/base": "^0.7.5-overlay.250+e296a22f1",
+        "@spectrum-web-components/styles": "^0.23.3-overlay.22+e296a22f1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -150,5 +150,5 @@
         "./src/express/core.js",
         "./src/express/themes.js"
     ],
-    "gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
+    "gitHead": "e296a22f1eeff7d62753caf21d2bae4ba406cbbd"
 }

package/src/Theme.dev.js

@@ -340,6 +340,7 @@ const _Theme = class extends HTMLElement {
     );
   }
   _handleContextPresence(event) {
+    event.stopPropagation();
     const target = event.composedPath()[0];
     if (this._contextConsumers.has(target)) {
       return;

package/src/Theme.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Theme.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 {\n    CSSResult,\n    CSSResultGroup,\n    supportsAdoptingStyleSheets,\n} from '@spectrum-web-components/base';\n\ndeclare global {\n    interface Window {\n        ShadyCSS: {\n            nativeShadow: boolean;\n            prepareTemplate(\n                template: HTMLTemplateElement,\n                elementName: string,\n                typeExtension?: string\n            ): void;\n            styleElement(host: HTMLElement): void;\n            ScopingShim: {\n                prepareAdoptedCssText(\n                    cssTextArray: string[],\n                    elementName: string\n                ): void;\n            };\n        };\n    }\n}\n\ntype ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {\n    adoptedStyleSheets?: CSSStyleSheet[];\n};\n\ntype FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';\ntype SettableFragmentTypes = 'color' | 'scale' | 'theme';\ntype FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;\nexport type ThemeFragmentMap = Map<FragmentType, FragmentMap>;\nexport type Color =\n    | 'light'\n    | 'lightest'\n    | 'dark'\n    | 'darkest'\n    | 'light-express'\n    | 'lightest-express'\n    | 'dark-express'\n    | 'darkest-express';\nexport type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';\nexport type ThemeVariant = 'spectrum' | 'express';\nconst ThemeVariantValues = ['spectrum', 'express'];\nconst ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];\nconst ColorValues = [\n    'light',\n    'lightest',\n    'dark',\n    'darkest',\n    'light-express',\n    'lightest-express',\n    'dark-express',\n    'darkest-express',\n];\ntype FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';\n\nexport interface ThemeData {\n    color?: Color;\n    scale?: Scale;\n    lang?: string;\n    theme?: ThemeVariant;\n}\n\ntype ThemeKindProvider = {\n    [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';\n};\n\nexport interface ProvideLang {\n    callback: (lang: string, unsubscribe: () => void) => void;\n}\n\n/**\n * @element sp-theme\n * @attr {string} [lang=\"\"] - The language of the content scoped to this `sp-theme` element, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang\" target=\"_blank\">MDN reference</a>.\n *\n * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration\n */\nexport class Theme extends HTMLElement implements ThemeKindProvider {\n    private static themeFragmentsByKind: ThemeFragmentMap = new Map();\n    private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);\n    private static templateElement?: HTMLTemplateElement;\n    private static instances: Set<Theme> = new Set();\n\n    static get observedAttributes(): string[] {\n        return ['color', 'scale', 'theme', 'lang', 'dir'];\n    }\n\n    _dir: 'ltr' | 'rtl' | '' = '';\n\n    override set dir(dir: 'ltr' | 'rtl' | '') {\n        if (dir === this.dir) return;\n        this.setAttribute('dir', dir);\n        this._dir = dir;\n        const targetDir = dir === 'rtl' ? dir : 'ltr';\n        this.trackedChildren.forEach((el) => {\n            el.setAttribute('dir', targetDir);\n        });\n    }\n\n    /**\n     * Reading direction of the content scoped to this `sp-theme` element.\n     * @type {\"ltr\" | \"rtl\" | \"\"}\n     * @attr\n     */\n    override get dir(): 'ltr' | 'rtl' | '' {\n        return this._dir;\n    }\n\n    protected attributeChangedCallback(\n        attrName: SettableFragmentTypes | 'lang' | 'dir',\n        old: string | null,\n        value: string | null\n    ): void {\n        if (old === value) {\n            return;\n        }\n        if (attrName === 'color') {\n            this.color = value as Color;\n        } else if (attrName === 'scale') {\n            this.scale = value as Scale;\n        } else if (attrName === 'lang' && !!value) {\n            this.lang = value;\n            this._provideContext();\n        } else if (attrName === 'theme') {\n            this.theme = value as ThemeVariant;\n        } else if (attrName === 'dir') {\n            this.dir = value as 'ltr' | 'rtl' | '';\n        }\n    }\n\n    private requestUpdate(): void {\n        if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {\n            window.ShadyCSS.styleElement(this);\n        } else {\n            this.shouldAdoptStyles();\n        }\n    }\n\n    public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n    private _theme: ThemeVariant | '' = 'spectrum';\n\n    /**\n     * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"spectrum\" | \"express\" | \"\"}\n     * @attr\n     */\n    get theme(): ThemeVariant | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('theme');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._theme || (name as ThemeVariant) || '';\n    }\n\n    set theme(newValue: ThemeVariant | '') {\n        if (newValue === this._theme) return;\n        const theme =\n            !!newValue && ThemeVariantValues.includes(newValue)\n                ? newValue\n                : this.theme;\n        if (theme !== this._theme) {\n            this._theme = theme;\n            this.requestUpdate();\n        }\n        if (theme) {\n            this.setAttribute('theme', theme);\n        } else {\n            this.removeAttribute('theme');\n        }\n    }\n\n    private _color: Color | '' = '';\n\n    /**\n     * The Spectrum color stops to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"lightest\" | \"light\" | \"dark\" | \"darkest\" | \"\"}\n     * @attr\n     */\n    get color(): Color | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('color');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._color || (name as Color) || '';\n    }\n\n    set color(newValue: Color | '') {\n        if (newValue === this._color) return;\n        const color =\n            !!newValue && ColorValues.includes(newValue)\n                ? newValue\n                : this.color;\n        if (color !== this._color) {\n            this._color = color;\n            this.requestUpdate();\n        }\n        if (color) {\n            this.setAttribute('color', color);\n        } else {\n            this.removeAttribute('color');\n        }\n    }\n\n    private _scale: Scale | '' = '';\n\n    /**\n     * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"medium\" | \"large\" | \"\"}\n     * @attr\n     */\n    get scale(): Scale | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('scale');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._scale || (name as Scale) || '';\n    }\n\n    set scale(newValue: Scale | '') {\n        if (newValue === this._scale) return;\n        const scale =\n            !!newValue && ScaleValues.includes(newValue)\n                ? newValue\n                : this.scale;\n        if (scale !== this._scale) {\n            this._scale = scale;\n            this.requestUpdate();\n        }\n        if (scale) {\n            this.setAttribute('scale', scale);\n        } else {\n            this.removeAttribute('scale');\n        }\n    }\n\n    private get styles(): CSSResultGroup[] {\n        const themeKinds: FragmentType[] = [\n            ...Theme.themeFragmentsByKind.keys(),\n        ];\n        const getStyle = (\n            fragments: FragmentMap,\n            name: FragmentName,\n            kind?: FragmentType\n        ): CSSResultGroup | undefined => {\n            const currentStyles =\n                kind && kind !== 'theme' && this.theme === 'express'\n                    ? fragments.get(`${name}-express`)\n                    : fragments.get(name);\n            // theme=\"spectrum\" is available by default and doesn't need to be applied.\n            const isAppliedFragment =\n                name === 'spectrum' || !kind || this.hasAttribute(kind);\n            if (currentStyles && isAppliedFragment) {\n                return currentStyles.styles;\n            }\n            return;\n        };\n        const styles = themeKinds.reduce((acc, kind) => {\n            const kindFragments = Theme.themeFragmentsByKind.get(\n                kind\n            ) as FragmentMap;\n            let style: CSSResultGroup | undefined;\n            if (kind === 'app' || kind === 'core') {\n                style = getStyle(kindFragments, kind);\n            } else {\n                const { [kind]: name } = this;\n                style = getStyle(kindFragments, <FragmentName>name, kind);\n            }\n            if (style) {\n                acc.push(style);\n            }\n            return acc;\n        }, [] as CSSResultGroup[]);\n        if (window.__swc.DEBUG) {\n            const issues: string[] = [];\n            const checkForAttribute = (\n                name: FragmentType,\n                resolvedValue?: string,\n                actualValue?: string\n            ): void => {\n                const themeModifier =\n                    this.theme && this.theme !== 'spectrum'\n                        ? `-${this.theme}`\n                        : '';\n                if (!resolvedValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute and there is no default value on which to fallback.`\n                    );\n                } else if (!actualValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute, the default value (\"${resolvedValue}\") is being used as a fallback.`\n                    );\n                } else if (\n                    !Theme.themeFragmentsByKind\n                        .get(name)\n                        ?.get(\n                            resolvedValue +\n                                (name === 'theme' ? '' : themeModifier)\n                        )\n                ) {\n                    issues.push(\n                        `You have set \"${name}='${resolvedValue}'\" but the associated theme fragment has not been loaded.`\n                    );\n                }\n            };\n            checkForAttribute('theme', this.theme, this._theme);\n            checkForAttribute('color', this.color, this._color);\n            checkForAttribute('scale', this.scale, this._scale);\n            if (issues.length) {\n                window.__swc.warn(\n                    this,\n                    'You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',\n                    {\n                        issues,\n                    }\n                );\n            }\n        }\n        return [...styles];\n    }\n\n    private static get template(): HTMLTemplateElement {\n        if (!this.templateElement) {\n            this.templateElement = document.createElement('template');\n            this.templateElement.innerHTML = '<slot></slot>';\n        }\n        return this.templateElement;\n    }\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const node = document.importNode(Theme.template.content, true);\n        this.shadowRoot.appendChild(node);\n        this.shouldAdoptStyles();\n        this.addEventListener(\n            'sp-query-theme',\n            this.onQueryTheme as EventListener\n        );\n        this.addEventListener(\n            'sp-language-context',\n            this._handleContextPresence as EventListener\n        );\n        this.updateComplete = this.__createDeferredPromise();\n    }\n\n    public updateComplete!: Promise<boolean>;\n    private __resolve!: (compelted: boolean) => void;\n\n    private __createDeferredPromise(): Promise<boolean> {\n        return new Promise((resolve) => {\n            this.__resolve = resolve;\n        });\n    }\n\n    private onQueryTheme(event: CustomEvent<ThemeData>): void {\n        if (event.defaultPrevented) {\n            return;\n        }\n        event.preventDefault();\n        const { detail: theme } = event;\n        theme.color = this.color || undefined;\n        theme.scale = this.scale || undefined;\n        theme.lang =\n            this.lang || document.documentElement.lang || navigator.language;\n        theme.theme = this.theme || undefined;\n    }\n\n    protected connectedCallback(): void {\n        this.shouldAdoptStyles();\n        // Note, first update/render handles styleElement so we only call this if\n        // connected after first update.\n        /* c8 ignore next 3 */\n        if (window.ShadyCSS !== undefined) {\n            window.ShadyCSS.styleElement(this);\n        }\n        // Add `this` to the instances array.\n        Theme.instances.add(this);\n        if (!this.hasAttribute('dir')) {\n            let dirParent = ((this as HTMLElement).assignedSlot ||\n                this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;\n            while (\n                dirParent !== document.documentElement &&\n                !(dirParent instanceof Theme)\n            ) {\n                dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node\n                    dirParent.parentNode || // DOM Element detected\n                    (dirParent as ShadowRoot).host) as\n                    | HTMLElement\n                    | DocumentFragment\n                    | ShadowRoot;\n            }\n            this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';\n        }\n    }\n\n    protected disconnectedCallback(): void {\n        // Remove `this` to the instances array.\n        Theme.instances.delete(this);\n    }\n\n    public startManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.add(el);\n    }\n\n    public stopManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.delete(el);\n    }\n\n    private trackedChildren: Set<HTMLElement> = new Set();\n\n    private _updateRequested = false;\n\n    private async shouldAdoptStyles(): Promise<void> {\n        if (!this._updateRequested) {\n            this.updateComplete = this.__createDeferredPromise();\n            this._updateRequested = true;\n            this._updateRequested = await false;\n            this.adoptStyles();\n            this.__resolve(true);\n        }\n    }\n\n    protected adoptStyles(): void {\n        const styles = this.styles; // No test coverage on Edge\n\n        // There are three separate cases here based on Shadow DOM support.\n        // (1) shadowRoot polyfilled: use ShadyCSS\n        // (2) shadowRoot.adoptedStyleSheets available: use it.\n        // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after\n        // rendering\n        /* c8 ignore next */ if (\n            window.ShadyCSS !== undefined &&\n            !window.ShadyCSS.nativeShadow &&\n            window.ShadyCSS.ScopingShim\n        ) {\n            // For browsers using the shim, there seems to be one set of\n            // processed styles per template, so it is hard to nest styles. So,\n            // for those, we load in all style fragments and then switch using a\n            // host selector (e.g. :host([color='dark']))\n            const fragmentCSS: string[] = [];\n            for (const [kind, fragments] of Theme.themeFragmentsByKind) {\n                for (const [name, { styles }] of fragments) {\n                    if (name === 'default') continue;\n                    let cssText = (styles as CSSResult).cssText;\n                    if (!Theme.defaultFragments.has(name as FragmentName)) {\n                        cssText = cssText.replace(\n                            ':host',\n                            `:host([${kind}='${name}'])`\n                        );\n                    }\n                    fragmentCSS.push(cssText);\n                }\n            }\n            window.ShadyCSS.ScopingShim.prepareAdoptedCssText(\n                fragmentCSS,\n                this.localName\n            );\n            window.ShadyCSS.prepareTemplate(Theme.template, this.localName);\n        } else if (supportsAdoptingStyleSheets) {\n            const styleSheets: CSSStyleSheet[] = [];\n            for (const style of styles) {\n                styleSheets.push(\n                    (style as CSSResult).styleSheet as CSSStyleSheet\n                );\n            }\n            this.shadowRoot.adoptedStyleSheets = styleSheets;\n        } else {\n            const styleNodes = this.shadowRoot.querySelectorAll('style');\n            styleNodes.forEach((element) => element.remove());\n            styles.forEach((s) => {\n                const style = document.createElement('style');\n                style.textContent = (s as CSSResult).cssText;\n                this.shadowRoot.appendChild(style);\n            });\n        }\n    }\n\n    static registerThemeFragment(\n        name: FragmentName,\n        kind: FragmentType,\n        styles: CSSResultGroup\n    ): void {\n        const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();\n        if (fragmentMap.size === 0) {\n            Theme.themeFragmentsByKind.set(kind, fragmentMap);\n            // we're adding our first fragment for this kind, set as default\n            fragmentMap.set('default', { name, styles });\n            Theme.defaultFragments.add(name);\n        }\n        fragmentMap.set(name, { name, styles });\n        Theme.instances.forEach((instance) => instance.shouldAdoptStyles());\n    }\n\n    private _contextConsumers = new Map<\n        HTMLElement,\n        [ProvideLang['callback'], () => void]\n    >();\n\n    private _provideContext(): void {\n        this._contextConsumers.forEach(([callback, unsubscribe]) =>\n            callback(this.lang, unsubscribe)\n        );\n    }\n\n    private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n        const target = event.composedPath()[0] as HTMLElement;\n        if (this._contextConsumers.has(target)) {\n            return;\n        }\n        this._contextConsumers.set(target, [\n            event.detail.callback,\n            () => this._contextConsumers.delete(target),\n        ]);\n        const [callback, unsubscribe] =\n            this._contextConsumers.get(target) || [];\n        if (callback && unsubscribe) {\n            callback(\n                this.lang ||\n                    document.documentElement.lang ||\n                    navigator.language,\n                unsubscribe\n            );\n        }\n    }\n}\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 {\n    CSSResult,\n    CSSResultGroup,\n    supportsAdoptingStyleSheets,\n} from '@spectrum-web-components/base';\n\ndeclare global {\n    interface Window {\n        ShadyCSS: {\n            nativeShadow: boolean;\n            prepareTemplate(\n                template: HTMLTemplateElement,\n                elementName: string,\n                typeExtension?: string\n            ): void;\n            styleElement(host: HTMLElement): void;\n            ScopingShim: {\n                prepareAdoptedCssText(\n                    cssTextArray: string[],\n                    elementName: string\n                ): void;\n            };\n        };\n    }\n}\n\ntype ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {\n    adoptedStyleSheets?: CSSStyleSheet[];\n};\n\ntype FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';\ntype SettableFragmentTypes = 'color' | 'scale' | 'theme';\ntype FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;\nexport type ThemeFragmentMap = Map<FragmentType, FragmentMap>;\nexport type Color =\n    | 'light'\n    | 'lightest'\n    | 'dark'\n    | 'darkest'\n    | 'light-express'\n    | 'lightest-express'\n    | 'dark-express'\n    | 'darkest-express';\nexport type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';\nexport type ThemeVariant = 'spectrum' | 'express';\nconst ThemeVariantValues = ['spectrum', 'express'];\nconst ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];\nconst ColorValues = [\n    'light',\n    'lightest',\n    'dark',\n    'darkest',\n    'light-express',\n    'lightest-express',\n    'dark-express',\n    'darkest-express',\n];\ntype FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';\n\nexport interface ThemeData {\n    color?: Color;\n    scale?: Scale;\n    lang?: string;\n    theme?: ThemeVariant;\n}\n\ntype ThemeKindProvider = {\n    [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';\n};\n\nexport interface ProvideLang {\n    callback: (lang: string, unsubscribe: () => void) => void;\n}\n\n/**\n * @element sp-theme\n * @attr {string} [lang=\"\"] - The language of the content scoped to this `sp-theme` element, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang\" target=\"_blank\">MDN reference</a>.\n *\n * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration\n */\nexport class Theme extends HTMLElement implements ThemeKindProvider {\n    private static themeFragmentsByKind: ThemeFragmentMap = new Map();\n    private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);\n    private static templateElement?: HTMLTemplateElement;\n    private static instances: Set<Theme> = new Set();\n\n    static get observedAttributes(): string[] {\n        return ['color', 'scale', 'theme', 'lang', 'dir'];\n    }\n\n    _dir: 'ltr' | 'rtl' | '' = '';\n\n    override set dir(dir: 'ltr' | 'rtl' | '') {\n        if (dir === this.dir) return;\n        this.setAttribute('dir', dir);\n        this._dir = dir;\n        const targetDir = dir === 'rtl' ? dir : 'ltr';\n        this.trackedChildren.forEach((el) => {\n            el.setAttribute('dir', targetDir);\n        });\n    }\n\n    /**\n     * Reading direction of the content scoped to this `sp-theme` element.\n     * @type {\"ltr\" | \"rtl\" | \"\"}\n     * @attr\n     */\n    override get dir(): 'ltr' | 'rtl' | '' {\n        return this._dir;\n    }\n\n    protected attributeChangedCallback(\n        attrName: SettableFragmentTypes | 'lang' | 'dir',\n        old: string | null,\n        value: string | null\n    ): void {\n        if (old === value) {\n            return;\n        }\n        if (attrName === 'color') {\n            this.color = value as Color;\n        } else if (attrName === 'scale') {\n            this.scale = value as Scale;\n        } else if (attrName === 'lang' && !!value) {\n            this.lang = value;\n            this._provideContext();\n        } else if (attrName === 'theme') {\n            this.theme = value as ThemeVariant;\n        } else if (attrName === 'dir') {\n            this.dir = value as 'ltr' | 'rtl' | '';\n        }\n    }\n\n    private requestUpdate(): void {\n        if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {\n            window.ShadyCSS.styleElement(this);\n        } else {\n            this.shouldAdoptStyles();\n        }\n    }\n\n    public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n    private _theme: ThemeVariant | '' = 'spectrum';\n\n    /**\n     * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"spectrum\" | \"express\" | \"\"}\n     * @attr\n     */\n    get theme(): ThemeVariant | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('theme');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._theme || (name as ThemeVariant) || '';\n    }\n\n    set theme(newValue: ThemeVariant | '') {\n        if (newValue === this._theme) return;\n        const theme =\n            !!newValue && ThemeVariantValues.includes(newValue)\n                ? newValue\n                : this.theme;\n        if (theme !== this._theme) {\n            this._theme = theme;\n            this.requestUpdate();\n        }\n        if (theme) {\n            this.setAttribute('theme', theme);\n        } else {\n            this.removeAttribute('theme');\n        }\n    }\n\n    private _color: Color | '' = '';\n\n    /**\n     * The Spectrum color stops to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"lightest\" | \"light\" | \"dark\" | \"darkest\" | \"\"}\n     * @attr\n     */\n    get color(): Color | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('color');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._color || (name as Color) || '';\n    }\n\n    set color(newValue: Color | '') {\n        if (newValue === this._color) return;\n        const color =\n            !!newValue && ColorValues.includes(newValue)\n                ? newValue\n                : this.color;\n        if (color !== this._color) {\n            this._color = color;\n            this.requestUpdate();\n        }\n        if (color) {\n            this.setAttribute('color', color);\n        } else {\n            this.removeAttribute('color');\n        }\n    }\n\n    private _scale: Scale | '' = '';\n\n    /**\n     * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"medium\" | \"large\" | \"\"}\n     * @attr\n     */\n    get scale(): Scale | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('scale');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._scale || (name as Scale) || '';\n    }\n\n    set scale(newValue: Scale | '') {\n        if (newValue === this._scale) return;\n        const scale =\n            !!newValue && ScaleValues.includes(newValue)\n                ? newValue\n                : this.scale;\n        if (scale !== this._scale) {\n            this._scale = scale;\n            this.requestUpdate();\n        }\n        if (scale) {\n            this.setAttribute('scale', scale);\n        } else {\n            this.removeAttribute('scale');\n        }\n    }\n\n    private get styles(): CSSResultGroup[] {\n        const themeKinds: FragmentType[] = [\n            ...Theme.themeFragmentsByKind.keys(),\n        ];\n        const getStyle = (\n            fragments: FragmentMap,\n            name: FragmentName,\n            kind?: FragmentType\n        ): CSSResultGroup | undefined => {\n            const currentStyles =\n                kind && kind !== 'theme' && this.theme === 'express'\n                    ? fragments.get(`${name}-express`)\n                    : fragments.get(name);\n            // theme=\"spectrum\" is available by default and doesn't need to be applied.\n            const isAppliedFragment =\n                name === 'spectrum' || !kind || this.hasAttribute(kind);\n            if (currentStyles && isAppliedFragment) {\n                return currentStyles.styles;\n            }\n            return;\n        };\n        const styles = themeKinds.reduce((acc, kind) => {\n            const kindFragments = Theme.themeFragmentsByKind.get(\n                kind\n            ) as FragmentMap;\n            let style: CSSResultGroup | undefined;\n            if (kind === 'app' || kind === 'core') {\n                style = getStyle(kindFragments, kind);\n            } else {\n                const { [kind]: name } = this;\n                style = getStyle(kindFragments, <FragmentName>name, kind);\n            }\n            if (style) {\n                acc.push(style);\n            }\n            return acc;\n        }, [] as CSSResultGroup[]);\n        if (window.__swc.DEBUG) {\n            const issues: string[] = [];\n            const checkForAttribute = (\n                name: FragmentType,\n                resolvedValue?: string,\n                actualValue?: string\n            ): void => {\n                const themeModifier =\n                    this.theme && this.theme !== 'spectrum'\n                        ? `-${this.theme}`\n                        : '';\n                if (!resolvedValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute and there is no default value on which to fallback.`\n                    );\n                } else if (!actualValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute, the default value (\"${resolvedValue}\") is being used as a fallback.`\n                    );\n                } else if (\n                    !Theme.themeFragmentsByKind\n                        .get(name)\n                        ?.get(\n                            resolvedValue +\n                                (name === 'theme' ? '' : themeModifier)\n                        )\n                ) {\n                    issues.push(\n                        `You have set \"${name}='${resolvedValue}'\" but the associated theme fragment has not been loaded.`\n                    );\n                }\n            };\n            checkForAttribute('theme', this.theme, this._theme);\n            checkForAttribute('color', this.color, this._color);\n            checkForAttribute('scale', this.scale, this._scale);\n            if (issues.length) {\n                window.__swc.warn(\n                    this,\n                    'You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',\n                    {\n                        issues,\n                    }\n                );\n            }\n        }\n        return [...styles];\n    }\n\n    private static get template(): HTMLTemplateElement {\n        if (!this.templateElement) {\n            this.templateElement = document.createElement('template');\n            this.templateElement.innerHTML = '<slot></slot>';\n        }\n        return this.templateElement;\n    }\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const node = document.importNode(Theme.template.content, true);\n        this.shadowRoot.appendChild(node);\n        this.shouldAdoptStyles();\n        this.addEventListener(\n            'sp-query-theme',\n            this.onQueryTheme as EventListener\n        );\n        this.addEventListener(\n            'sp-language-context',\n            this._handleContextPresence as EventListener\n        );\n        this.updateComplete = this.__createDeferredPromise();\n    }\n\n    public updateComplete!: Promise<boolean>;\n    private __resolve!: (compelted: boolean) => void;\n\n    private __createDeferredPromise(): Promise<boolean> {\n        return new Promise((resolve) => {\n            this.__resolve = resolve;\n        });\n    }\n\n    private onQueryTheme(event: CustomEvent<ThemeData>): void {\n        if (event.defaultPrevented) {\n            return;\n        }\n        event.preventDefault();\n        const { detail: theme } = event;\n        theme.color = this.color || undefined;\n        theme.scale = this.scale || undefined;\n        theme.lang =\n            this.lang || document.documentElement.lang || navigator.language;\n        theme.theme = this.theme || undefined;\n    }\n\n    protected connectedCallback(): void {\n        this.shouldAdoptStyles();\n        // Note, first update/render handles styleElement so we only call this if\n        // connected after first update.\n        /* c8 ignore next 3 */\n        if (window.ShadyCSS !== undefined) {\n            window.ShadyCSS.styleElement(this);\n        }\n        // Add `this` to the instances array.\n        Theme.instances.add(this);\n        if (!this.hasAttribute('dir')) {\n            let dirParent = ((this as HTMLElement).assignedSlot ||\n                this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;\n            while (\n                dirParent !== document.documentElement &&\n                !(dirParent instanceof Theme)\n            ) {\n                dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node\n                    dirParent.parentNode || // DOM Element detected\n                    (dirParent as ShadowRoot).host) as\n                    | HTMLElement\n                    | DocumentFragment\n                    | ShadowRoot;\n            }\n            this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';\n        }\n    }\n\n    protected disconnectedCallback(): void {\n        // Remove `this` to the instances array.\n        Theme.instances.delete(this);\n    }\n\n    public startManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.add(el);\n    }\n\n    public stopManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.delete(el);\n    }\n\n    private trackedChildren: Set<HTMLElement> = new Set();\n\n    private _updateRequested = false;\n\n    private async shouldAdoptStyles(): Promise<void> {\n        if (!this._updateRequested) {\n            this.updateComplete = this.__createDeferredPromise();\n            this._updateRequested = true;\n            this._updateRequested = await false;\n            this.adoptStyles();\n            this.__resolve(true);\n        }\n    }\n\n    protected adoptStyles(): void {\n        const styles = this.styles; // No test coverage on Edge\n\n        // There are three separate cases here based on Shadow DOM support.\n        // (1) shadowRoot polyfilled: use ShadyCSS\n        // (2) shadowRoot.adoptedStyleSheets available: use it.\n        // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after\n        // rendering\n        /* c8 ignore next */ if (\n            window.ShadyCSS !== undefined &&\n            !window.ShadyCSS.nativeShadow &&\n            window.ShadyCSS.ScopingShim\n        ) {\n            // For browsers using the shim, there seems to be one set of\n            // processed styles per template, so it is hard to nest styles. So,\n            // for those, we load in all style fragments and then switch using a\n            // host selector (e.g. :host([color='dark']))\n            const fragmentCSS: string[] = [];\n            for (const [kind, fragments] of Theme.themeFragmentsByKind) {\n                for (const [name, { styles }] of fragments) {\n                    if (name === 'default') continue;\n                    let cssText = (styles as CSSResult).cssText;\n                    if (!Theme.defaultFragments.has(name as FragmentName)) {\n                        cssText = cssText.replace(\n                            ':host',\n                            `:host([${kind}='${name}'])`\n                        );\n                    }\n                    fragmentCSS.push(cssText);\n                }\n            }\n            window.ShadyCSS.ScopingShim.prepareAdoptedCssText(\n                fragmentCSS,\n                this.localName\n            );\n            window.ShadyCSS.prepareTemplate(Theme.template, this.localName);\n        } else if (supportsAdoptingStyleSheets) {\n            const styleSheets: CSSStyleSheet[] = [];\n            for (const style of styles) {\n                styleSheets.push(\n                    (style as CSSResult).styleSheet as CSSStyleSheet\n                );\n            }\n            this.shadowRoot.adoptedStyleSheets = styleSheets;\n        } else {\n            const styleNodes = this.shadowRoot.querySelectorAll('style');\n            styleNodes.forEach((element) => element.remove());\n            styles.forEach((s) => {\n                const style = document.createElement('style');\n                style.textContent = (s as CSSResult).cssText;\n                this.shadowRoot.appendChild(style);\n            });\n        }\n    }\n\n    static registerThemeFragment(\n        name: FragmentName,\n        kind: FragmentType,\n        styles: CSSResultGroup\n    ): void {\n        const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();\n        if (fragmentMap.size === 0) {\n            Theme.themeFragmentsByKind.set(kind, fragmentMap);\n            // we're adding our first fragment for this kind, set as default\n            fragmentMap.set('default', { name, styles });\n            Theme.defaultFragments.add(name);\n        }\n        fragmentMap.set(name, { name, styles });\n        Theme.instances.forEach((instance) => instance.shouldAdoptStyles());\n    }\n\n    private _contextConsumers = new Map<\n        HTMLElement,\n        [ProvideLang['callback'], () => void]\n    >();\n\n    private _provideContext(): void {\n        this._contextConsumers.forEach(([callback, unsubscribe]) =>\n            callback(this.lang, unsubscribe)\n        );\n    }\n\n    private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n        event.stopPropagation();\n        const target = event.composedPath()[0] as HTMLElement;\n        if (this._contextConsumers.has(target)) {\n            return;\n        }\n        this._contextConsumers.set(target, [\n            event.detail.callback,\n            () => this._contextConsumers.delete(target),\n        ]);\n        const [callback, unsubscribe] =\n            this._contextConsumers.get(target) || [];\n        if (callback && unsubscribe) {\n            callback(\n                this.lang ||\n                    document.documentElement.lang ||\n                    navigator.language,\n                unsubscribe\n            );\n        }\n    }\n}\n"],
+  "mappings": "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",
   "names": ["styles"]
 }

package/src/Theme.js

@@ -1,2 +1,2 @@
-"use strict";import{supportsAdoptingStyleSheets as h}from"@spectrum-web-components/base";const d=["spectrum","express"],m=["medium","large","medium-express","large-express"],c=["light","lightest","dark","darkest","light-express","lightest-express","dark-express","darkest-express"],r=class extends HTMLElement{constructor(){super();this._dir="";this._theme="spectrum";this._color="";this._scale="";this.trackedChildren=new Set;this._updateRequested=!1;this._contextConsumers=new Map;this.attachShadow({mode:"open"});const e=document.importNode(r.template.content,!0);this.shadowRoot.appendChild(e),this.shouldAdoptStyles(),this.addEventListener("sp-query-theme",this.onQueryTheme),this.addEventListener("sp-language-context",this._handleContextPresence),this.updateComplete=this.__createDeferredPromise()}static get observedAttributes(){return["color","scale","theme","lang","dir"]}set dir(e){if(e===this.dir)return;this.setAttribute("dir",e),this._dir=e;const t=e==="rtl"?e:"ltr";this.trackedChildren.forEach(s=>{s.setAttribute("dir",t)})}get dir(){return this._dir}attributeChangedCallback(e,t,s){t!==s&&(e==="color"?this.color=s:e==="scale"?this.scale=s:e==="lang"&&s?(this.lang=s,this._provideContext()):e==="theme"?this.theme=s:e==="dir"&&(this.dir=s))}requestUpdate(){window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow?window.ShadyCSS.styleElement(this):this.shouldAdoptStyles()}get theme(){const e=r.themeFragmentsByKind.get("theme"),{name:t}=e&&e.get("default")||{};return this._theme||t||""}set theme(e){if(e===this._theme)return;const t=e&&d.includes(e)?e:this.theme;t!==this._theme&&(this._theme=t,this.requestUpdate()),t?this.setAttribute("theme",t):this.removeAttribute("theme")}get color(){const e=r.themeFragmentsByKind.get("color"),{name:t}=e&&e.get("default")||{};return this._color||t||""}set color(e){if(e===this._color)return;const t=e&&c.includes(e)?e:this.color;t!==this._color&&(this._color=t,this.requestUpdate()),t?this.setAttribute("color",t):this.removeAttribute("color")}get scale(){const e=r.themeFragmentsByKind.get("scale"),{name:t}=e&&e.get("default")||{};return this._scale||t||""}set scale(e){if(e===this._scale)return;const t=e&&m.includes(e)?e:this.scale;t!==this._scale&&(this._scale=t,this.requestUpdate()),t?this.setAttribute("scale",t):this.removeAttribute("scale")}get styles(){const e=[...r.themeFragmentsByKind.keys()],t=(a,i,n)=>{const o=n&&n!=="theme"&&this.theme==="express"?a.get(`${i}-express`):a.get(i),l=i==="spectrum"||!n||this.hasAttribute(n);if(o&&l)return o.styles};return[...e.reduce((a,i)=>{const n=r.themeFragmentsByKind.get(i);let o;if(i==="app"||i==="core")o=t(n,i);else{const{[i]:l}=this;o=t(n,l,i)}return o&&a.push(o),a},[])]}static get template(){return this.templateElement||(this.templateElement=document.createElement("template"),this.templateElement.innerHTML="<slot></slot>"),this.templateElement}__createDeferredPromise(){return new Promise(e=>{this.__resolve=e})}onQueryTheme(e){if(e.defaultPrevented)return;e.preventDefault();const{detail:t}=e;t.color=this.color||void 0,t.scale=this.scale||void 0,t.lang=this.lang||document.documentElement.lang||navigator.language,t.theme=this.theme||void 0}connectedCallback(){if(this.shouldAdoptStyles(),window.ShadyCSS!==void 0&&window.ShadyCSS.styleElement(this),r.instances.add(this),!this.hasAttribute("dir")){let e=this.assignedSlot||this.parentNode;for(;e!==document.documentElement&&!(e instanceof r);)e=e.assignedSlot||e.parentNode||e.host;this.dir=e.dir==="rtl"?e.dir:"ltr"}}disconnectedCallback(){r.instances.delete(this)}startManagingContentDirection(e){this.trackedChildren.add(e)}stopManagingContentDirection(e){this.trackedChildren.delete(e)}async shouldAdoptStyles(){this._updateRequested||(this.updateComplete=this.__createDeferredPromise(),this._updateRequested=!0,this._updateRequested=await!1,this.adoptStyles(),this.__resolve(!0))}adoptStyles(){const e=this.styles;if(window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow&&window.ShadyCSS.ScopingShim){const t=[];for(const[s,a]of r.themeFragmentsByKind)for(const[i,{styles:n}]of a){if(i==="default")continue;let o=n.cssText;r.defaultFragments.has(i)||(o=o.replace(":host",`:host([${s}='${i}'])`)),t.push(o)}window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t,this.localName),window.ShadyCSS.prepareTemplate(r.template,this.localName)}else if(h){const t=[];for(const s of e)t.push(s.styleSheet);this.shadowRoot.adoptedStyleSheets=t}else this.shadowRoot.querySelectorAll("style").forEach(s=>s.remove()),e.forEach(s=>{const a=document.createElement("style");a.textContent=s.cssText,this.shadowRoot.appendChild(a)})}static registerThemeFragment(e,t,s){const a=r.themeFragmentsByKind.get(t)||new Map;a.size===0&&(r.themeFragmentsByKind.set(t,a),a.set("default",{name:e,styles:s}),r.defaultFragments.add(e)),a.set(e,{name:e,styles:s}),r.instances.forEach(i=>i.shouldAdoptStyles())}_provideContext(){this._contextConsumers.forEach(([e,t])=>e(this.lang,t))}_handleContextPresence(e){const t=e.composedPath()[0];if(this._contextConsumers.has(t))return;this._contextConsumers.set(t,[e.detail.callback,()=>this._contextConsumers.delete(t)]);const[s,a]=this._contextConsumers.get(t)||[];s&&a&&s(this.lang||document.documentElement.lang||navigator.language,a)}};export let Theme=r;Theme.themeFragmentsByKind=new Map,Theme.defaultFragments=new Set(["spectrum"]),Theme.instances=new Set;
+"use strict";import{supportsAdoptingStyleSheets as h}from"@spectrum-web-components/base";const d=["spectrum","express"],m=["medium","large","medium-express","large-express"],c=["light","lightest","dark","darkest","light-express","lightest-express","dark-express","darkest-express"],r=class extends HTMLElement{constructor(){super();this._dir="";this._theme="spectrum";this._color="";this._scale="";this.trackedChildren=new Set;this._updateRequested=!1;this._contextConsumers=new Map;this.attachShadow({mode:"open"});const e=document.importNode(r.template.content,!0);this.shadowRoot.appendChild(e),this.shouldAdoptStyles(),this.addEventListener("sp-query-theme",this.onQueryTheme),this.addEventListener("sp-language-context",this._handleContextPresence),this.updateComplete=this.__createDeferredPromise()}static get observedAttributes(){return["color","scale","theme","lang","dir"]}set dir(e){if(e===this.dir)return;this.setAttribute("dir",e),this._dir=e;const t=e==="rtl"?e:"ltr";this.trackedChildren.forEach(s=>{s.setAttribute("dir",t)})}get dir(){return this._dir}attributeChangedCallback(e,t,s){t!==s&&(e==="color"?this.color=s:e==="scale"?this.scale=s:e==="lang"&&s?(this.lang=s,this._provideContext()):e==="theme"?this.theme=s:e==="dir"&&(this.dir=s))}requestUpdate(){window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow?window.ShadyCSS.styleElement(this):this.shouldAdoptStyles()}get theme(){const e=r.themeFragmentsByKind.get("theme"),{name:t}=e&&e.get("default")||{};return this._theme||t||""}set theme(e){if(e===this._theme)return;const t=e&&d.includes(e)?e:this.theme;t!==this._theme&&(this._theme=t,this.requestUpdate()),t?this.setAttribute("theme",t):this.removeAttribute("theme")}get color(){const e=r.themeFragmentsByKind.get("color"),{name:t}=e&&e.get("default")||{};return this._color||t||""}set color(e){if(e===this._color)return;const t=e&&c.includes(e)?e:this.color;t!==this._color&&(this._color=t,this.requestUpdate()),t?this.setAttribute("color",t):this.removeAttribute("color")}get scale(){const e=r.themeFragmentsByKind.get("scale"),{name:t}=e&&e.get("default")||{};return this._scale||t||""}set scale(e){if(e===this._scale)return;const t=e&&m.includes(e)?e:this.scale;t!==this._scale&&(this._scale=t,this.requestUpdate()),t?this.setAttribute("scale",t):this.removeAttribute("scale")}get styles(){const e=[...r.themeFragmentsByKind.keys()],t=(a,i,n)=>{const o=n&&n!=="theme"&&this.theme==="express"?a.get(`${i}-express`):a.get(i),l=i==="spectrum"||!n||this.hasAttribute(n);if(o&&l)return o.styles};return[...e.reduce((a,i)=>{const n=r.themeFragmentsByKind.get(i);let o;if(i==="app"||i==="core")o=t(n,i);else{const{[i]:l}=this;o=t(n,l,i)}return o&&a.push(o),a},[])]}static get template(){return this.templateElement||(this.templateElement=document.createElement("template"),this.templateElement.innerHTML="<slot></slot>"),this.templateElement}__createDeferredPromise(){return new Promise(e=>{this.__resolve=e})}onQueryTheme(e){if(e.defaultPrevented)return;e.preventDefault();const{detail:t}=e;t.color=this.color||void 0,t.scale=this.scale||void 0,t.lang=this.lang||document.documentElement.lang||navigator.language,t.theme=this.theme||void 0}connectedCallback(){if(this.shouldAdoptStyles(),window.ShadyCSS!==void 0&&window.ShadyCSS.styleElement(this),r.instances.add(this),!this.hasAttribute("dir")){let e=this.assignedSlot||this.parentNode;for(;e!==document.documentElement&&!(e instanceof r);)e=e.assignedSlot||e.parentNode||e.host;this.dir=e.dir==="rtl"?e.dir:"ltr"}}disconnectedCallback(){r.instances.delete(this)}startManagingContentDirection(e){this.trackedChildren.add(e)}stopManagingContentDirection(e){this.trackedChildren.delete(e)}async shouldAdoptStyles(){this._updateRequested||(this.updateComplete=this.__createDeferredPromise(),this._updateRequested=!0,this._updateRequested=await!1,this.adoptStyles(),this.__resolve(!0))}adoptStyles(){const e=this.styles;if(window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow&&window.ShadyCSS.ScopingShim){const t=[];for(const[s,a]of r.themeFragmentsByKind)for(const[i,{styles:n}]of a){if(i==="default")continue;let o=n.cssText;r.defaultFragments.has(i)||(o=o.replace(":host",`:host([${s}='${i}'])`)),t.push(o)}window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t,this.localName),window.ShadyCSS.prepareTemplate(r.template,this.localName)}else if(h){const t=[];for(const s of e)t.push(s.styleSheet);this.shadowRoot.adoptedStyleSheets=t}else this.shadowRoot.querySelectorAll("style").forEach(s=>s.remove()),e.forEach(s=>{const a=document.createElement("style");a.textContent=s.cssText,this.shadowRoot.appendChild(a)})}static registerThemeFragment(e,t,s){const a=r.themeFragmentsByKind.get(t)||new Map;a.size===0&&(r.themeFragmentsByKind.set(t,a),a.set("default",{name:e,styles:s}),r.defaultFragments.add(e)),a.set(e,{name:e,styles:s}),r.instances.forEach(i=>i.shouldAdoptStyles())}_provideContext(){this._contextConsumers.forEach(([e,t])=>e(this.lang,t))}_handleContextPresence(e){e.stopPropagation();const t=e.composedPath()[0];if(this._contextConsumers.has(t))return;this._contextConsumers.set(t,[e.detail.callback,()=>this._contextConsumers.delete(t)]);const[s,a]=this._contextConsumers.get(t)||[];s&&a&&s(this.lang||document.documentElement.lang||navigator.language,a)}};export let Theme=r;Theme.themeFragmentsByKind=new Map,Theme.defaultFragments=new Set(["spectrum"]),Theme.instances=new Set;
 //# sourceMappingURL=Theme.js.map

package/src/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Theme.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 {\n    CSSResult,\n    CSSResultGroup,\n    supportsAdoptingStyleSheets,\n} from '@spectrum-web-components/base';\n\ndeclare global {\n    interface Window {\n        ShadyCSS: {\n            nativeShadow: boolean;\n            prepareTemplate(\n                template: HTMLTemplateElement,\n                elementName: string,\n                typeExtension?: string\n            ): void;\n            styleElement(host: HTMLElement): void;\n            ScopingShim: {\n                prepareAdoptedCssText(\n                    cssTextArray: string[],\n                    elementName: string\n                ): void;\n            };\n        };\n    }\n}\n\ntype ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {\n    adoptedStyleSheets?: CSSStyleSheet[];\n};\n\ntype FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';\ntype SettableFragmentTypes = 'color' | 'scale' | 'theme';\ntype FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;\nexport type ThemeFragmentMap = Map<FragmentType, FragmentMap>;\nexport type Color =\n    | 'light'\n    | 'lightest'\n    | 'dark'\n    | 'darkest'\n    | 'light-express'\n    | 'lightest-express'\n    | 'dark-express'\n    | 'darkest-express';\nexport type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';\nexport type ThemeVariant = 'spectrum' | 'express';\nconst ThemeVariantValues = ['spectrum', 'express'];\nconst ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];\nconst ColorValues = [\n    'light',\n    'lightest',\n    'dark',\n    'darkest',\n    'light-express',\n    'lightest-express',\n    'dark-express',\n    'darkest-express',\n];\ntype FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';\n\nexport interface ThemeData {\n    color?: Color;\n    scale?: Scale;\n    lang?: string;\n    theme?: ThemeVariant;\n}\n\ntype ThemeKindProvider = {\n    [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';\n};\n\nexport interface ProvideLang {\n    callback: (lang: string, unsubscribe: () => void) => void;\n}\n\n/**\n * @element sp-theme\n * @attr {string} [lang=\"\"] - The language of the content scoped to this `sp-theme` element, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang\" target=\"_blank\">MDN reference</a>.\n *\n * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration\n */\nexport class Theme extends HTMLElement implements ThemeKindProvider {\n    private static themeFragmentsByKind: ThemeFragmentMap = new Map();\n    private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);\n    private static templateElement?: HTMLTemplateElement;\n    private static instances: Set<Theme> = new Set();\n\n    static get observedAttributes(): string[] {\n        return ['color', 'scale', 'theme', 'lang', 'dir'];\n    }\n\n    _dir: 'ltr' | 'rtl' | '' = '';\n\n    override set dir(dir: 'ltr' | 'rtl' | '') {\n        if (dir === this.dir) return;\n        this.setAttribute('dir', dir);\n        this._dir = dir;\n        const targetDir = dir === 'rtl' ? dir : 'ltr';\n        this.trackedChildren.forEach((el) => {\n            el.setAttribute('dir', targetDir);\n        });\n    }\n\n    /**\n     * Reading direction of the content scoped to this `sp-theme` element.\n     * @type {\"ltr\" | \"rtl\" | \"\"}\n     * @attr\n     */\n    override get dir(): 'ltr' | 'rtl' | '' {\n        return this._dir;\n    }\n\n    protected attributeChangedCallback(\n        attrName: SettableFragmentTypes | 'lang' | 'dir',\n        old: string | null,\n        value: string | null\n    ): void {\n        if (old === value) {\n            return;\n        }\n        if (attrName === 'color') {\n            this.color = value as Color;\n        } else if (attrName === 'scale') {\n            this.scale = value as Scale;\n        } else if (attrName === 'lang' && !!value) {\n            this.lang = value;\n            this._provideContext();\n        } else if (attrName === 'theme') {\n            this.theme = value as ThemeVariant;\n        } else if (attrName === 'dir') {\n            this.dir = value as 'ltr' | 'rtl' | '';\n        }\n    }\n\n    private requestUpdate(): void {\n        if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {\n            window.ShadyCSS.styleElement(this);\n        } else {\n            this.shouldAdoptStyles();\n        }\n    }\n\n    public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n    private _theme: ThemeVariant | '' = 'spectrum';\n\n    /**\n     * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"spectrum\" | \"express\" | \"\"}\n     * @attr\n     */\n    get theme(): ThemeVariant | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('theme');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._theme || (name as ThemeVariant) || '';\n    }\n\n    set theme(newValue: ThemeVariant | '') {\n        if (newValue === this._theme) return;\n        const theme =\n            !!newValue && ThemeVariantValues.includes(newValue)\n                ? newValue\n                : this.theme;\n        if (theme !== this._theme) {\n            this._theme = theme;\n            this.requestUpdate();\n        }\n        if (theme) {\n            this.setAttribute('theme', theme);\n        } else {\n            this.removeAttribute('theme');\n        }\n    }\n\n    private _color: Color | '' = '';\n\n    /**\n     * The Spectrum color stops to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"lightest\" | \"light\" | \"dark\" | \"darkest\" | \"\"}\n     * @attr\n     */\n    get color(): Color | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('color');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._color || (name as Color) || '';\n    }\n\n    set color(newValue: Color | '') {\n        if (newValue === this._color) return;\n        const color =\n            !!newValue && ColorValues.includes(newValue)\n                ? newValue\n                : this.color;\n        if (color !== this._color) {\n            this._color = color;\n            this.requestUpdate();\n        }\n        if (color) {\n            this.setAttribute('color', color);\n        } else {\n            this.removeAttribute('color');\n        }\n    }\n\n    private _scale: Scale | '' = '';\n\n    /**\n     * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"medium\" | \"large\" | \"\"}\n     * @attr\n     */\n    get scale(): Scale | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('scale');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._scale || (name as Scale) || '';\n    }\n\n    set scale(newValue: Scale | '') {\n        if (newValue === this._scale) return;\n        const scale =\n            !!newValue && ScaleValues.includes(newValue)\n                ? newValue\n                : this.scale;\n        if (scale !== this._scale) {\n            this._scale = scale;\n            this.requestUpdate();\n        }\n        if (scale) {\n            this.setAttribute('scale', scale);\n        } else {\n            this.removeAttribute('scale');\n        }\n    }\n\n    private get styles(): CSSResultGroup[] {\n        const themeKinds: FragmentType[] = [\n            ...Theme.themeFragmentsByKind.keys(),\n        ];\n        const getStyle = (\n            fragments: FragmentMap,\n            name: FragmentName,\n            kind?: FragmentType\n        ): CSSResultGroup | undefined => {\n            const currentStyles =\n                kind && kind !== 'theme' && this.theme === 'express'\n                    ? fragments.get(`${name}-express`)\n                    : fragments.get(name);\n            // theme=\"spectrum\" is available by default and doesn't need to be applied.\n            const isAppliedFragment =\n                name === 'spectrum' || !kind || this.hasAttribute(kind);\n            if (currentStyles && isAppliedFragment) {\n                return currentStyles.styles;\n            }\n            return;\n        };\n        const styles = themeKinds.reduce((acc, kind) => {\n            const kindFragments = Theme.themeFragmentsByKind.get(\n                kind\n            ) as FragmentMap;\n            let style: CSSResultGroup | undefined;\n            if (kind === 'app' || kind === 'core') {\n                style = getStyle(kindFragments, kind);\n            } else {\n                const { [kind]: name } = this;\n                style = getStyle(kindFragments, <FragmentName>name, kind);\n            }\n            if (style) {\n                acc.push(style);\n            }\n            return acc;\n        }, [] as CSSResultGroup[]);\n        if (window.__swc.DEBUG) {\n            const issues: string[] = [];\n            const checkForAttribute = (\n                name: FragmentType,\n                resolvedValue?: string,\n                actualValue?: string\n            ): void => {\n                const themeModifier =\n                    this.theme && this.theme !== 'spectrum'\n                        ? `-${this.theme}`\n                        : '';\n                if (!resolvedValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute and there is no default value on which to fallback.`\n                    );\n                } else if (!actualValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute, the default value (\"${resolvedValue}\") is being used as a fallback.`\n                    );\n                } else if (\n                    !Theme.themeFragmentsByKind\n                        .get(name)\n                        ?.get(\n                            resolvedValue +\n                                (name === 'theme' ? '' : themeModifier)\n                        )\n                ) {\n                    issues.push(\n                        `You have set \"${name}='${resolvedValue}'\" but the associated theme fragment has not been loaded.`\n                    );\n                }\n            };\n            checkForAttribute('theme', this.theme, this._theme);\n            checkForAttribute('color', this.color, this._color);\n            checkForAttribute('scale', this.scale, this._scale);\n            if (issues.length) {\n                window.__swc.warn(\n                    this,\n                    'You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',\n                    {\n                        issues,\n                    }\n                );\n            }\n        }\n        return [...styles];\n    }\n\n    private static get template(): HTMLTemplateElement {\n        if (!this.templateElement) {\n            this.templateElement = document.createElement('template');\n            this.templateElement.innerHTML = '<slot></slot>';\n        }\n        return this.templateElement;\n    }\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const node = document.importNode(Theme.template.content, true);\n        this.shadowRoot.appendChild(node);\n        this.shouldAdoptStyles();\n        this.addEventListener(\n            'sp-query-theme',\n            this.onQueryTheme as EventListener\n        );\n        this.addEventListener(\n            'sp-language-context',\n            this._handleContextPresence as EventListener\n        );\n        this.updateComplete = this.__createDeferredPromise();\n    }\n\n    public updateComplete!: Promise<boolean>;\n    private __resolve!: (compelted: boolean) => void;\n\n    private __createDeferredPromise(): Promise<boolean> {\n        return new Promise((resolve) => {\n            this.__resolve = resolve;\n        });\n    }\n\n    private onQueryTheme(event: CustomEvent<ThemeData>): void {\n        if (event.defaultPrevented) {\n            return;\n        }\n        event.preventDefault();\n        const { detail: theme } = event;\n        theme.color = this.color || undefined;\n        theme.scale = this.scale || undefined;\n        theme.lang =\n            this.lang || document.documentElement.lang || navigator.language;\n        theme.theme = this.theme || undefined;\n    }\n\n    protected connectedCallback(): void {\n        this.shouldAdoptStyles();\n        // Note, first update/render handles styleElement so we only call this if\n        // connected after first update.\n        /* c8 ignore next 3 */\n        if (window.ShadyCSS !== undefined) {\n            window.ShadyCSS.styleElement(this);\n        }\n        // Add `this` to the instances array.\n        Theme.instances.add(this);\n        if (!this.hasAttribute('dir')) {\n            let dirParent = ((this as HTMLElement).assignedSlot ||\n                this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;\n            while (\n                dirParent !== document.documentElement &&\n                !(dirParent instanceof Theme)\n            ) {\n                dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node\n                    dirParent.parentNode || // DOM Element detected\n                    (dirParent as ShadowRoot).host) as\n                    | HTMLElement\n                    | DocumentFragment\n                    | ShadowRoot;\n            }\n            this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';\n        }\n    }\n\n    protected disconnectedCallback(): void {\n        // Remove `this` to the instances array.\n        Theme.instances.delete(this);\n    }\n\n    public startManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.add(el);\n    }\n\n    public stopManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.delete(el);\n    }\n\n    private trackedChildren: Set<HTMLElement> = new Set();\n\n    private _updateRequested = false;\n\n    private async shouldAdoptStyles(): Promise<void> {\n        if (!this._updateRequested) {\n            this.updateComplete = this.__createDeferredPromise();\n            this._updateRequested = true;\n            this._updateRequested = await false;\n            this.adoptStyles();\n            this.__resolve(true);\n        }\n    }\n\n    protected adoptStyles(): void {\n        const styles = this.styles; // No test coverage on Edge\n\n        // There are three separate cases here based on Shadow DOM support.\n        // (1) shadowRoot polyfilled: use ShadyCSS\n        // (2) shadowRoot.adoptedStyleSheets available: use it.\n        // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after\n        // rendering\n        /* c8 ignore next */ if (\n            window.ShadyCSS !== undefined &&\n            !window.ShadyCSS.nativeShadow &&\n            window.ShadyCSS.ScopingShim\n        ) {\n            // For browsers using the shim, there seems to be one set of\n            // processed styles per template, so it is hard to nest styles. So,\n            // for those, we load in all style fragments and then switch using a\n            // host selector (e.g. :host([color='dark']))\n            const fragmentCSS: string[] = [];\n            for (const [kind, fragments] of Theme.themeFragmentsByKind) {\n                for (const [name, { styles }] of fragments) {\n                    if (name === 'default') continue;\n                    let cssText = (styles as CSSResult).cssText;\n                    if (!Theme.defaultFragments.has(name as FragmentName)) {\n                        cssText = cssText.replace(\n                            ':host',\n                            `:host([${kind}='${name}'])`\n                        );\n                    }\n                    fragmentCSS.push(cssText);\n                }\n            }\n            window.ShadyCSS.ScopingShim.prepareAdoptedCssText(\n                fragmentCSS,\n                this.localName\n            );\n            window.ShadyCSS.prepareTemplate(Theme.template, this.localName);\n        } else if (supportsAdoptingStyleSheets) {\n            const styleSheets: CSSStyleSheet[] = [];\n            for (const style of styles) {\n                styleSheets.push(\n                    (style as CSSResult).styleSheet as CSSStyleSheet\n                );\n            }\n            this.shadowRoot.adoptedStyleSheets = styleSheets;\n        } else {\n            const styleNodes = this.shadowRoot.querySelectorAll('style');\n            styleNodes.forEach((element) => element.remove());\n            styles.forEach((s) => {\n                const style = document.createElement('style');\n                style.textContent = (s as CSSResult).cssText;\n                this.shadowRoot.appendChild(style);\n            });\n        }\n    }\n\n    static registerThemeFragment(\n        name: FragmentName,\n        kind: FragmentType,\n        styles: CSSResultGroup\n    ): void {\n        const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();\n        if (fragmentMap.size === 0) {\n            Theme.themeFragmentsByKind.set(kind, fragmentMap);\n            // we're adding our first fragment for this kind, set as default\n            fragmentMap.set('default', { name, styles });\n            Theme.defaultFragments.add(name);\n        }\n        fragmentMap.set(name, { name, styles });\n        Theme.instances.forEach((instance) => instance.shouldAdoptStyles());\n    }\n\n    private _contextConsumers = new Map<\n        HTMLElement,\n        [ProvideLang['callback'], () => void]\n    >();\n\n    private _provideContext(): void {\n        this._contextConsumers.forEach(([callback, unsubscribe]) =>\n            callback(this.lang, unsubscribe)\n        );\n    }\n\n    private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n        const target = event.composedPath()[0] as HTMLElement;\n        if (this._contextConsumers.has(target)) {\n            return;\n        }\n        this._contextConsumers.set(target, [\n            event.detail.callback,\n            () => this._contextConsumers.delete(target),\n        ]);\n        const [callback, unsubscribe] =\n            this._contextConsumers.get(target) || [];\n        if (callback && unsubscribe) {\n            callback(\n                this.lang ||\n                    document.documentElement.lang ||\n                    navigator.language,\n                unsubscribe\n            );\n        }\n    }\n}\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 {\n    CSSResult,\n    CSSResultGroup,\n    supportsAdoptingStyleSheets,\n} from '@spectrum-web-components/base';\n\ndeclare global {\n    interface Window {\n        ShadyCSS: {\n            nativeShadow: boolean;\n            prepareTemplate(\n                template: HTMLTemplateElement,\n                elementName: string,\n                typeExtension?: string\n            ): void;\n            styleElement(host: HTMLElement): void;\n            ScopingShim: {\n                prepareAdoptedCssText(\n                    cssTextArray: string[],\n                    elementName: string\n                ): void;\n            };\n        };\n    }\n}\n\ntype ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {\n    adoptedStyleSheets?: CSSStyleSheet[];\n};\n\ntype FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';\ntype SettableFragmentTypes = 'color' | 'scale' | 'theme';\ntype FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;\nexport type ThemeFragmentMap = Map<FragmentType, FragmentMap>;\nexport type Color =\n    | 'light'\n    | 'lightest'\n    | 'dark'\n    | 'darkest'\n    | 'light-express'\n    | 'lightest-express'\n    | 'dark-express'\n    | 'darkest-express';\nexport type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';\nexport type ThemeVariant = 'spectrum' | 'express';\nconst ThemeVariantValues = ['spectrum', 'express'];\nconst ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];\nconst ColorValues = [\n    'light',\n    'lightest',\n    'dark',\n    'darkest',\n    'light-express',\n    'lightest-express',\n    'dark-express',\n    'darkest-express',\n];\ntype FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';\n\nexport interface ThemeData {\n    color?: Color;\n    scale?: Scale;\n    lang?: string;\n    theme?: ThemeVariant;\n}\n\ntype ThemeKindProvider = {\n    [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';\n};\n\nexport interface ProvideLang {\n    callback: (lang: string, unsubscribe: () => void) => void;\n}\n\n/**\n * @element sp-theme\n * @attr {string} [lang=\"\"] - The language of the content scoped to this `sp-theme` element, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang\" target=\"_blank\">MDN reference</a>.\n *\n * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration\n */\nexport class Theme extends HTMLElement implements ThemeKindProvider {\n    private static themeFragmentsByKind: ThemeFragmentMap = new Map();\n    private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);\n    private static templateElement?: HTMLTemplateElement;\n    private static instances: Set<Theme> = new Set();\n\n    static get observedAttributes(): string[] {\n        return ['color', 'scale', 'theme', 'lang', 'dir'];\n    }\n\n    _dir: 'ltr' | 'rtl' | '' = '';\n\n    override set dir(dir: 'ltr' | 'rtl' | '') {\n        if (dir === this.dir) return;\n        this.setAttribute('dir', dir);\n        this._dir = dir;\n        const targetDir = dir === 'rtl' ? dir : 'ltr';\n        this.trackedChildren.forEach((el) => {\n            el.setAttribute('dir', targetDir);\n        });\n    }\n\n    /**\n     * Reading direction of the content scoped to this `sp-theme` element.\n     * @type {\"ltr\" | \"rtl\" | \"\"}\n     * @attr\n     */\n    override get dir(): 'ltr' | 'rtl' | '' {\n        return this._dir;\n    }\n\n    protected attributeChangedCallback(\n        attrName: SettableFragmentTypes | 'lang' | 'dir',\n        old: string | null,\n        value: string | null\n    ): void {\n        if (old === value) {\n            return;\n        }\n        if (attrName === 'color') {\n            this.color = value as Color;\n        } else if (attrName === 'scale') {\n            this.scale = value as Scale;\n        } else if (attrName === 'lang' && !!value) {\n            this.lang = value;\n            this._provideContext();\n        } else if (attrName === 'theme') {\n            this.theme = value as ThemeVariant;\n        } else if (attrName === 'dir') {\n            this.dir = value as 'ltr' | 'rtl' | '';\n        }\n    }\n\n    private requestUpdate(): void {\n        if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {\n            window.ShadyCSS.styleElement(this);\n        } else {\n            this.shouldAdoptStyles();\n        }\n    }\n\n    public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n    private _theme: ThemeVariant | '' = 'spectrum';\n\n    /**\n     * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"spectrum\" | \"express\" | \"\"}\n     * @attr\n     */\n    get theme(): ThemeVariant | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('theme');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._theme || (name as ThemeVariant) || '';\n    }\n\n    set theme(newValue: ThemeVariant | '') {\n        if (newValue === this._theme) return;\n        const theme =\n            !!newValue && ThemeVariantValues.includes(newValue)\n                ? newValue\n                : this.theme;\n        if (theme !== this._theme) {\n            this._theme = theme;\n            this.requestUpdate();\n        }\n        if (theme) {\n            this.setAttribute('theme', theme);\n        } else {\n            this.removeAttribute('theme');\n        }\n    }\n\n    private _color: Color | '' = '';\n\n    /**\n     * The Spectrum color stops to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"lightest\" | \"light\" | \"dark\" | \"darkest\" | \"\"}\n     * @attr\n     */\n    get color(): Color | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('color');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._color || (name as Color) || '';\n    }\n\n    set color(newValue: Color | '') {\n        if (newValue === this._color) return;\n        const color =\n            !!newValue && ColorValues.includes(newValue)\n                ? newValue\n                : this.color;\n        if (color !== this._color) {\n            this._color = color;\n            this.requestUpdate();\n        }\n        if (color) {\n            this.setAttribute('color', color);\n        } else {\n            this.removeAttribute('color');\n        }\n    }\n\n    private _scale: Scale | '' = '';\n\n    /**\n     * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.\n     *\n     * A value is requried.\n     * @type {\"medium\" | \"large\" | \"\"}\n     * @attr\n     */\n    get scale(): Scale | '' {\n        const themeFragments = Theme.themeFragmentsByKind.get('scale');\n        const { name } =\n            (themeFragments && themeFragments.get('default')) || {};\n        return this._scale || (name as Scale) || '';\n    }\n\n    set scale(newValue: Scale | '') {\n        if (newValue === this._scale) return;\n        const scale =\n            !!newValue && ScaleValues.includes(newValue)\n                ? newValue\n                : this.scale;\n        if (scale !== this._scale) {\n            this._scale = scale;\n            this.requestUpdate();\n        }\n        if (scale) {\n            this.setAttribute('scale', scale);\n        } else {\n            this.removeAttribute('scale');\n        }\n    }\n\n    private get styles(): CSSResultGroup[] {\n        const themeKinds: FragmentType[] = [\n            ...Theme.themeFragmentsByKind.keys(),\n        ];\n        const getStyle = (\n            fragments: FragmentMap,\n            name: FragmentName,\n            kind?: FragmentType\n        ): CSSResultGroup | undefined => {\n            const currentStyles =\n                kind && kind !== 'theme' && this.theme === 'express'\n                    ? fragments.get(`${name}-express`)\n                    : fragments.get(name);\n            // theme=\"spectrum\" is available by default and doesn't need to be applied.\n            const isAppliedFragment =\n                name === 'spectrum' || !kind || this.hasAttribute(kind);\n            if (currentStyles && isAppliedFragment) {\n                return currentStyles.styles;\n            }\n            return;\n        };\n        const styles = themeKinds.reduce((acc, kind) => {\n            const kindFragments = Theme.themeFragmentsByKind.get(\n                kind\n            ) as FragmentMap;\n            let style: CSSResultGroup | undefined;\n            if (kind === 'app' || kind === 'core') {\n                style = getStyle(kindFragments, kind);\n            } else {\n                const { [kind]: name } = this;\n                style = getStyle(kindFragments, <FragmentName>name, kind);\n            }\n            if (style) {\n                acc.push(style);\n            }\n            return acc;\n        }, [] as CSSResultGroup[]);\n        if (window.__swc.DEBUG) {\n            const issues: string[] = [];\n            const checkForAttribute = (\n                name: FragmentType,\n                resolvedValue?: string,\n                actualValue?: string\n            ): void => {\n                const themeModifier =\n                    this.theme && this.theme !== 'spectrum'\n                        ? `-${this.theme}`\n                        : '';\n                if (!resolvedValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute and there is no default value on which to fallback.`\n                    );\n                } else if (!actualValue) {\n                    issues.push(\n                        `You have not explicitly set the \"${name}\" attribute, the default value (\"${resolvedValue}\") is being used as a fallback.`\n                    );\n                } else if (\n                    !Theme.themeFragmentsByKind\n                        .get(name)\n                        ?.get(\n                            resolvedValue +\n                                (name === 'theme' ? '' : themeModifier)\n                        )\n                ) {\n                    issues.push(\n                        `You have set \"${name}='${resolvedValue}'\" but the associated theme fragment has not been loaded.`\n                    );\n                }\n            };\n            checkForAttribute('theme', this.theme, this._theme);\n            checkForAttribute('color', this.color, this._color);\n            checkForAttribute('scale', this.scale, this._scale);\n            if (issues.length) {\n                window.__swc.warn(\n                    this,\n                    'You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',\n                    {\n                        issues,\n                    }\n                );\n            }\n        }\n        return [...styles];\n    }\n\n    private static get template(): HTMLTemplateElement {\n        if (!this.templateElement) {\n            this.templateElement = document.createElement('template');\n            this.templateElement.innerHTML = '<slot></slot>';\n        }\n        return this.templateElement;\n    }\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const node = document.importNode(Theme.template.content, true);\n        this.shadowRoot.appendChild(node);\n        this.shouldAdoptStyles();\n        this.addEventListener(\n            'sp-query-theme',\n            this.onQueryTheme as EventListener\n        );\n        this.addEventListener(\n            'sp-language-context',\n            this._handleContextPresence as EventListener\n        );\n        this.updateComplete = this.__createDeferredPromise();\n    }\n\n    public updateComplete!: Promise<boolean>;\n    private __resolve!: (compelted: boolean) => void;\n\n    private __createDeferredPromise(): Promise<boolean> {\n        return new Promise((resolve) => {\n            this.__resolve = resolve;\n        });\n    }\n\n    private onQueryTheme(event: CustomEvent<ThemeData>): void {\n        if (event.defaultPrevented) {\n            return;\n        }\n        event.preventDefault();\n        const { detail: theme } = event;\n        theme.color = this.color || undefined;\n        theme.scale = this.scale || undefined;\n        theme.lang =\n            this.lang || document.documentElement.lang || navigator.language;\n        theme.theme = this.theme || undefined;\n    }\n\n    protected connectedCallback(): void {\n        this.shouldAdoptStyles();\n        // Note, first update/render handles styleElement so we only call this if\n        // connected after first update.\n        /* c8 ignore next 3 */\n        if (window.ShadyCSS !== undefined) {\n            window.ShadyCSS.styleElement(this);\n        }\n        // Add `this` to the instances array.\n        Theme.instances.add(this);\n        if (!this.hasAttribute('dir')) {\n            let dirParent = ((this as HTMLElement).assignedSlot ||\n                this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;\n            while (\n                dirParent !== document.documentElement &&\n                !(dirParent instanceof Theme)\n            ) {\n                dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node\n                    dirParent.parentNode || // DOM Element detected\n                    (dirParent as ShadowRoot).host) as\n                    | HTMLElement\n                    | DocumentFragment\n                    | ShadowRoot;\n            }\n            this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';\n        }\n    }\n\n    protected disconnectedCallback(): void {\n        // Remove `this` to the instances array.\n        Theme.instances.delete(this);\n    }\n\n    public startManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.add(el);\n    }\n\n    public stopManagingContentDirection(el: HTMLElement): void {\n        this.trackedChildren.delete(el);\n    }\n\n    private trackedChildren: Set<HTMLElement> = new Set();\n\n    private _updateRequested = false;\n\n    private async shouldAdoptStyles(): Promise<void> {\n        if (!this._updateRequested) {\n            this.updateComplete = this.__createDeferredPromise();\n            this._updateRequested = true;\n            this._updateRequested = await false;\n            this.adoptStyles();\n            this.__resolve(true);\n        }\n    }\n\n    protected adoptStyles(): void {\n        const styles = this.styles; // No test coverage on Edge\n\n        // There are three separate cases here based on Shadow DOM support.\n        // (1) shadowRoot polyfilled: use ShadyCSS\n        // (2) shadowRoot.adoptedStyleSheets available: use it.\n        // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after\n        // rendering\n        /* c8 ignore next */ if (\n            window.ShadyCSS !== undefined &&\n            !window.ShadyCSS.nativeShadow &&\n            window.ShadyCSS.ScopingShim\n        ) {\n            // For browsers using the shim, there seems to be one set of\n            // processed styles per template, so it is hard to nest styles. So,\n            // for those, we load in all style fragments and then switch using a\n            // host selector (e.g. :host([color='dark']))\n            const fragmentCSS: string[] = [];\n            for (const [kind, fragments] of Theme.themeFragmentsByKind) {\n                for (const [name, { styles }] of fragments) {\n                    if (name === 'default') continue;\n                    let cssText = (styles as CSSResult).cssText;\n                    if (!Theme.defaultFragments.has(name as FragmentName)) {\n                        cssText = cssText.replace(\n                            ':host',\n                            `:host([${kind}='${name}'])`\n                        );\n                    }\n                    fragmentCSS.push(cssText);\n                }\n            }\n            window.ShadyCSS.ScopingShim.prepareAdoptedCssText(\n                fragmentCSS,\n                this.localName\n            );\n            window.ShadyCSS.prepareTemplate(Theme.template, this.localName);\n        } else if (supportsAdoptingStyleSheets) {\n            const styleSheets: CSSStyleSheet[] = [];\n            for (const style of styles) {\n                styleSheets.push(\n                    (style as CSSResult).styleSheet as CSSStyleSheet\n                );\n            }\n            this.shadowRoot.adoptedStyleSheets = styleSheets;\n        } else {\n            const styleNodes = this.shadowRoot.querySelectorAll('style');\n            styleNodes.forEach((element) => element.remove());\n            styles.forEach((s) => {\n                const style = document.createElement('style');\n                style.textContent = (s as CSSResult).cssText;\n                this.shadowRoot.appendChild(style);\n            });\n        }\n    }\n\n    static registerThemeFragment(\n        name: FragmentName,\n        kind: FragmentType,\n        styles: CSSResultGroup\n    ): void {\n        const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();\n        if (fragmentMap.size === 0) {\n            Theme.themeFragmentsByKind.set(kind, fragmentMap);\n            // we're adding our first fragment for this kind, set as default\n            fragmentMap.set('default', { name, styles });\n            Theme.defaultFragments.add(name);\n        }\n        fragmentMap.set(name, { name, styles });\n        Theme.instances.forEach((instance) => instance.shouldAdoptStyles());\n    }\n\n    private _contextConsumers = new Map<\n        HTMLElement,\n        [ProvideLang['callback'], () => void]\n    >();\n\n    private _provideContext(): void {\n        this._contextConsumers.forEach(([callback, unsubscribe]) =>\n            callback(this.lang, unsubscribe)\n        );\n    }\n\n    private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n        event.stopPropagation();\n        const target = event.composedPath()[0] as HTMLElement;\n        if (this._contextConsumers.has(target)) {\n            return;\n        }\n        this._contextConsumers.set(target, [\n            event.detail.callback,\n            () => this._contextConsumers.delete(target),\n        ]);\n        const [callback, unsubscribe] =\n            this._contextConsumers.get(target) || [];\n        if (callback && unsubscribe) {\n            callback(\n                this.lang ||\n                    document.documentElement.lang ||\n                    navigator.language,\n                unsubscribe\n            );\n        }\n    }\n}\n"],
+  "mappings": "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",
   "names": ["supportsAdoptingStyleSheets", "ThemeVariantValues", "ScaleValues", "ColorValues", "_Theme", "node", "dir", "targetDir", "el", "attrName", "old", "value", "themeFragments", "name", "newValue", "theme", "color", "scale", "themeKinds", "getStyle", "fragments", "kind", "currentStyles", "isAppliedFragment", "acc", "kindFragments", "style", "resolve", "event", "dirParent", "styles", "fragmentCSS", "cssText", "styleSheets", "element", "fragmentMap", "instance", "callback", "unsubscribe", "target"]
 }

package/src/express/scale-large.css.dev.js

@@ -1,7 +1,149 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host,:root{--spectrum-global-dimension-scale-factor:1.25;--spectrum-global-dimension-size-0:0px;--spectrum-global-dimension-size-10:1px;--spectrum-global-dimension-size-25:2px;--spectrum-global-dimension-size-30:3px;--spectrum-global-dimension-size-40:4px;--spectrum-global-dimension-size-50:5px;--spectrum-global-dimension-size-65:6px;--spectrum-global-dimension-size-75:8px;--spectrum-global-dimension-size-85:9px;--spectrum-global-dimension-size-100:10px;--spectrum-global-dimension-size-115:11px;--spectrum-global-dimension-size-125:13px;--spectrum-global-dimension-size-130:14px;--spectrum-global-dimension-size-150:15px;--spectrum-global-dimension-size-160:16px;--spectrum-global-dimension-size-175:18px;--spectrum-global-dimension-size-185:19px;--spectrum-global-dimension-size-200:20px;--spectrum-global-dimension-size-225:22px;--spectrum-global-dimension-size-250:25px;--spectrum-global-dimension-size-275:28px;--spectrum-global-dimension-size-300:30px;--spectrum-global-dimension-size-325:32px;--spectrum-global-dimension-size-350:35px;--spectrum-global-dimension-size-400:40px;--spectrum-global-dimension-size-450:45px;--spectrum-global-dimension-size-500:50px;--spectrum-global-dimension-size-550:56px;--spectrum-global-dimension-size-600:60px;--spectrum-global-dimension-size-650:65px;--spectrum-global-dimension-size-675:68px;--spectrum-global-dimension-size-700:70px;--spectrum-global-dimension-size-750:75px;--spectrum-global-dimension-size-800:80px;--spectrum-global-dimension-size-900:90px;--spectrum-global-dimension-size-1000:100px;--spectrum-global-dimension-size-1125:112px;--spectrum-global-dimension-size-1200:120px;--spectrum-global-dimension-size-1250:125px;--spectrum-global-dimension-size-1600:160px;--spectrum-global-dimension-size-1700:170px;--spectrum-global-dimension-size-1800:180px;--spectrum-global-dimension-size-2000:200px;--spectrum-global-dimension-size-2400:240px;--spectrum-global-dimension-size-2500:250px;--spectrum-global-dimension-size-3000:300px;--spectrum-global-dimension-size-3400:340px;--spectrum-global-dimension-size-3600:360px;--spectrum-global-dimension-size-4600:460px;--spectrum-global-dimension-size-5000:500px;--spectrum-global-dimension-size-6000:600px;--spectrum-global-dimension-font-size-25:12px;--spectrum-global-dimension-font-size-50:13px;--spectrum-global-dimension-font-size-75:15px;--spectrum-global-dimension-font-size-100:17px;--spectrum-global-dimension-font-size-150:18px;--spectrum-global-dimension-font-size-200:19px;--spectrum-global-dimension-font-size-300:22px;--spectrum-global-dimension-font-size-400:24px;--spectrum-global-dimension-font-size-500:27px;--spectrum-global-dimension-font-size-600:31px;--spectrum-global-dimension-font-size-700:34px;--spectrum-global-dimension-font-size-800:39px;--spectrum-global-dimension-font-size-900:44px;--spectrum-global-dimension-font-size-1000:49px;--spectrum-global-dimension-font-size-1100:55px;--spectrum-global-dimension-font-size-1200:62px;--spectrum-global-dimension-font-size-1300:70px;--spectrum-alias-item-text-padding-top-l:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-item-text-padding-bottom-s:var(--spectrum-global-dimension-static-size-85);--spectrum-alias-item-workflow-padding-left-m:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-item-rounded-workflow-padding-left-m:17px;--spectrum-alias-item-rounded-workflow-padding-left-xl:27px;--spectrum-alias-item-mark-padding-top-m:var(--spectrum-global-dimension-static-size-85);--spectrum-alias-item-mark-padding-bottom-m:var(--spectrum-global-dimension-static-size-85);--spectrum-alias-item-mark-padding-left-m:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-item-control-1-size-l:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-item-control-1-size-xl:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-item-control-2-size-s:var(--spectrum-global-dimension-size-160);--spectrum-alias-item-control-3-height-s:var(--spectrum-global-dimension-size-160);--spectrum-alias-item-control-3-width-s:var(--spectrum-global-dimension-size-325);--spectrum-alias-item-control-3-width-m:var(--spectrum-global-dimension-static-size-450);--spectrum-alias-item-control-3-width-l:41px;--spectrum-alias-item-control-3-width-xl:46px;--spectrum-alias-item-mark-size-m:var(--spectrum-global-dimension-static-size-325);--spectrum-alias-component-focusring-border-radius:var(--spectrum-alias-focus-ring-border-radius-regular);--spectrum-alias-focus-ring-border-radius-small:var(--spectrum-global-dimension-size-75);--spectrum-alias-focus-ring-border-radius-regular:12px;--spectrum-alias-control-three-width-m:34px;--spectrum-alias-control-three-width-l:38px;--spectrum-alias-control-three-width-xl:var(--spectrum-global-dimension-static-size-550);--spectrum-alias-focus-ring-radius-default:var(--spectrum-global-dimension-static-size-115);--spectrum-alias-workflow-icon-size-l:var(--spectrum-global-dimension-static-size-300);--spectrum-alias-ui-icon-chevron-size-75:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-chevron-size-100:var(--spectrum-global-dimension-static-size-175);--spectrum-alias-ui-icon-chevron-size-200:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-chevron-size-300:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-chevron-size-400:var(--spectrum-global-dimension-static-size-225);--spectrum-alias-ui-icon-chevron-size-500:var(--spectrum-global-dimension-static-size-250);--spectrum-alias-ui-icon-checkmark-size-50:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-checkmark-size-75:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-checkmark-size-100:var(--spectrum-global-dimension-static-size-175);--spectrum-alias-ui-icon-checkmark-size-200:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-checkmark-size-300:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-checkmark-size-400:var(--spectrum-global-dimension-static-size-225);--spectrum-alias-ui-icon-checkmark-size-500:var(--spectrum-global-dimension-static-size-250);--spectrum-alias-ui-icon-checkmark-size-600:var(--spectrum-global-dimension-static-size-300);--spectrum-alias-ui-icon-dash-size-50:var(--spectrum-global-dimension-static-size-125);--spectrum-alias-ui-icon-dash-size-75:var(--spectrum-global-dimension-static-size-125);--spectrum-alias-ui-icon-dash-size-100:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-dash-size-200:var(--spectrum-global-dimension-static-size-175);--spectrum-alias-ui-icon-dash-size-300:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-dash-size-400:var(--spectrum-global-dimension-static-size-225);--spectrum-alias-ui-icon-dash-size-500:var(--spectrum-global-dimension-static-size-250);--spectrum-alias-ui-icon-dash-size-600:var(--spectrum-global-dimension-static-size-275);--spectrum-alias-ui-icon-cross-size-75:var(--spectrum-global-dimension-static-size-125);--spectrum-alias-ui-icon-cross-size-100:var(--spectrum-global-dimension-static-size-125);--spectrum-alias-ui-icon-cross-size-200:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-cross-size-300:var(--spectrum-global-dimension-static-size-175);--spectrum-alias-ui-icon-cross-size-400:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-cross-size-500:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-cross-size-600:var(--spectrum-global-dimension-static-size-225);--spectrum-alias-ui-icon-arrow-size-75:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-arrow-size-100:var(--spectrum-global-dimension-static-size-175);--spectrum-alias-ui-icon-arrow-size-200:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-arrow-size-300:var(--spectrum-global-dimension-static-size-200);--spectrum-alias-ui-icon-arrow-size-400:var(--spectrum-global-dimension-static-size-225);--spectrum-alias-ui-icon-arrow-size-500:var(--spectrum-global-dimension-static-size-275);--spectrum-alias-ui-icon-arrow-size-600:var(--spectrum-global-dimension-static-size-300);--spectrum-alias-ui-icon-triplegripper-size-100-width:var(--spectrum-global-dimension-static-size-175);--spectrum-alias-ui-icon-doublegripper-size-100-height:var(--spectrum-global-dimension-static-size-75);--spectrum-alias-ui-icon-singlegripper-size-100-height:var(--spectrum-global-dimension-static-size-50);--spectrum-alias-ui-icon-cornertriangle-size-100:var(--spectrum-global-dimension-static-size-85);--spectrum-alias-ui-icon-cornertriangle-size-300:var(--spectrum-global-dimension-static-size-100);--spectrum-alias-ui-icon-asterisk-size-200:var(--spectrum-global-dimension-static-size-150);--spectrum-alias-ui-icon-asterisk-size-300:var(--spectrum-global-dimension-static-size-150);--spectrum-dialog-confirm-title-text-size:var(--spectrum-alias-heading-xs-text-size);--spectrum-dialog-confirm-description-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-dialog-confirm-padding:var(--spectrum-global-dimension-static-size-300);--spectrum-listitem-m-texticon-padding-left:var(--spectrum-global-dimension-static-size-150);--spectrum-listitem-m-textthumbnail-padding-left:var(--spectrum-global-dimension-static-size-150)}:host,:root{--spectrum-global-alias-appframe-border-size:1px}:host,:root{--spectrum-field-label-text-to-asterisk-small:5px;--spectrum-field-label-text-to-asterisk-medium:5px;--spectrum-field-label-text-to-asterisk-large:6px;--spectrum-field-label-text-to-asterisk-extra-large:6px;--spectrum-field-label-top-to-asterisk-small:11px;--spectrum-field-label-top-to-asterisk-medium:15px;--spectrum-field-label-top-to-asterisk-large:19px;--spectrum-field-label-top-to-asterisk-extra-large:24px;--spectrum-field-label-top-margin-small:0px;--spectrum-field-label-top-margin-medium:5px;--spectrum-field-label-top-margin-large:6px;--spectrum-field-label-top-margin-extra-large:6px;--spectrum-field-label-to-component-quiet-small:-10px;--spectrum-field-label-to-component-quiet-medium:-10px;--spectrum-field-label-to-component-quiet-large:-15px;--spectrum-field-label-to-component-quiet-extra-large:-19px;--spectrum-help-text-top-to-workflow-icon-small:5px;--spectrum-help-text-top-to-workflow-icon-medium:4px;--spectrum-help-text-top-to-workflow-icon-large:8px;--spectrum-help-text-top-to-workflow-icon-extra-large:11px;--spectrum-status-light-dot-size-small:8px;--spectrum-status-light-dot-size-medium:10px;--spectrum-status-light-dot-size-large:12px;--spectrum-status-light-dot-size-extra-large:12px;--spectrum-status-light-top-to-dot-small:11px;--spectrum-status-light-top-to-dot-medium:15px;--spectrum-status-light-top-to-dot-large:19px;--spectrum-status-light-top-to-dot-extra-large:24px;--spectrum-action-button-edge-to-hold-icon-extra-small:3px;--spectrum-action-button-edge-to-hold-icon-small:3px;--spectrum-action-button-edge-to-hold-icon-medium:5px;--spectrum-action-button-edge-to-hold-icon-large:6px;--spectrum-action-button-edge-to-hold-icon-extra-large:7px;--spectrum-tooltip-tip-width:10px;--spectrum-tooltip-tip-height:5px;--spectrum-tooltip-maximum-width:200px;--spectrum-progress-circle-size-small:20px;--spectrum-progress-circle-size-medium:40px;--spectrum-progress-circle-size-large:80px;--spectrum-progress-circle-thickness-small:3px;--spectrum-progress-circle-thickness-medium:4px;--spectrum-progress-circle-thickness-large:5px;--spectrum-toast-height:56px;--spectrum-toast-maximum-width:420px;--spectrum-toast-top-to-workflow-icon:17px;--spectrum-toast-top-to-text:16px;--spectrum-toast-bottom-to-text:19px;--spectrum-action-bar-height:56px;--spectrum-action-bar-top-to-item-counter:16px;--spectrum-swatch-size-extra-small:20px;--spectrum-swatch-size-small:30px;--spectrum-swatch-size-medium:40px;--spectrum-swatch-size-large:50px;--spectrum-progress-bar-thickness-small:5px;--spectrum-progress-bar-thickness-medium:8px;--spectrum-progress-bar-thickness-large:10px;--spectrum-progress-bar-thickness-extra-large:13px;--spectrum-meter-default-width:240px;--spectrum-meter-thickness-small:5px;--spectrum-meter-thickness-large:8px;--spectrum-tag-top-to-avatar-small:5px;--spectrum-tag-top-to-avatar-medium:7px;--spectrum-tag-top-to-avatar-large:11px;--spectrum-tag-top-to-cross-icon-small:10px;--spectrum-tag-top-to-cross-icon-medium:15px;--spectrum-tag-top-to-cross-icon-large:19px;--spectrum-popover-top-to-content-area:5px;--spectrum-menu-item-edge-to-content-not-selected-small:24px;--spectrum-menu-item-edge-to-content-not-selected-medium:42px;--spectrum-menu-item-edge-to-content-not-selected-large:47px;--spectrum-menu-item-edge-to-content-not-selected-extra-large:54px;--spectrum-menu-item-top-to-disclosure-icon-small:9px;--spectrum-menu-item-top-to-disclosure-icon-medium:13px;--spectrum-menu-item-top-to-disclosure-icon-large:17px;--spectrum-menu-item-top-to-disclosure-icon-extra-large:22px;--spectrum-picker-visual-to-disclosure-icon-small:9px;--spectrum-picker-visual-to-disclosure-icon-medium:10px;--spectrum-picker-visual-to-disclosure-icon-large:11px;--spectrum-picker-visual-to-disclosure-icon-extra-large:13px;--spectrum-text-area-minimum-width:140px;--spectrum-text-area-minimum-height:70px;--spectrum-combo-box-visual-to-field-button-small:9px;--spectrum-combo-box-visual-to-field-button-medium:10px;--spectrum-combo-box-visual-to-field-button-large:11px;--spectrum-combo-box-visual-to-field-button-extra-large:13px;--spectrum-thumbnail-size-50:20px;--spectrum-thumbnail-size-75:22px;--spectrum-thumbnail-size-100:26px;--spectrum-thumbnail-size-200:28px;--spectrum-thumbnail-size-300:32px;--spectrum-thumbnail-size-400:36px;--spectrum-thumbnail-size-500:40px;--spectrum-thumbnail-size-600:46px;--spectrum-thumbnail-size-700:50px;--spectrum-thumbnail-size-800:55px;--spectrum-thumbnail-size-900:62px;--spectrum-thumbnail-size-1000:70px;--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs);--spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs);--spectrum-opacity-checkerboard-square-size:10px;--spectrum-breadcrumbs-height-multiline:84px;--spectrum-breadcrumbs-top-to-text:17px;--spectrum-breadcrumbs-top-to-text-compact:16px;--spectrum-breadcrumbs-top-to-text-multiline:15px;--spectrum-breadcrumbs-bottom-to-text:19px;--spectrum-breadcrumbs-bottom-to-text-compact:19px;--spectrum-breadcrumbs-bottom-to-text-multiline:10px;--spectrum-breadcrumbs-start-edge-to-text:9px;--spectrum-breadcrumbs-top-text-to-bottom-text:11px;--spectrum-breadcrumbs-top-to-separator-icon:25px;--spectrum-breadcrumbs-top-to-separator-icon-compact:23px;--spectrum-breadcrumbs-top-to-separator-icon-multiline:20px;--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px;--spectrum-breadcrumbs-top-to-truncated-menu:10px;--spectrum-breadcrumbs-top-to-truncated-menu-compact:5px;--spectrum-avatar-size-50:20px;--spectrum-avatar-size-75:22px;--spectrum-avatar-size-100:26px;--spectrum-avatar-size-200:28px;--spectrum-avatar-size-300:32px;--spectrum-avatar-size-400:36px;--spectrum-avatar-size-500:40px;--spectrum-avatar-size-600:46px;--spectrum-avatar-size-700:50px;--spectrum-alert-banner-minimum-height:64px;--spectrum-alert-banner-width:680px;--spectrum-alert-banner-to-top-workflow-icon:21px;--spectrum-alert-banner-to-top-text:21px;--spectrum-alert-banner-to-bottom-text:22px;--spectrum-rating-indicator-width:22px;--spectrum-rating-indicator-to-icon:5px;--spectrum-color-area-width:240px;--spectrum-color-area-minimum-width:80px;--spectrum-color-area-height:240px;--spectrum-color-area-minimum-height:80px;--spectrum-color-wheel-width:240px;--spectrum-color-wheel-minimum-width:219px;--spectrum-color-slider-length:240px;--spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s);--spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s);--spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs);--spectrum-workflow-icon-size-50:18px;--spectrum-workflow-icon-size-75:20px;--spectrum-workflow-icon-size-100:22px;--spectrum-workflow-icon-size-200:24px;--spectrum-workflow-icon-size-300:28px;--spectrum-text-to-visual-50:8px;--spectrum-text-to-visual-75:9px;--spectrum-text-to-visual-100:10px;--spectrum-text-to-visual-200:11px;--spectrum-text-to-visual-300:13px;--spectrum-text-to-control-75:11px;--spectrum-text-to-control-100:13px;--spectrum-text-to-control-200:14px;--spectrum-text-to-control-300:16px;--spectrum-component-height-50:26px;--spectrum-component-height-75:30px;--spectrum-component-height-100:40px;--spectrum-component-height-200:50px;--spectrum-component-height-300:60px;--spectrum-component-pill-edge-to-visual-75:13px;--spectrum-component-pill-edge-to-visual-100:17px;--spectrum-component-pill-edge-to-visual-200:22px;--spectrum-component-pill-edge-to-visual-300:27px;--spectrum-component-pill-edge-to-visual-only-75:5px;--spectrum-component-pill-edge-to-visual-only-100:9px;--spectrum-component-pill-edge-to-visual-only-200:13px;--spectrum-component-pill-edge-to-visual-only-300:16px;--spectrum-component-pill-edge-to-text-75:15px;--spectrum-component-pill-edge-to-text-100:20px;--spectrum-component-pill-edge-to-text-200:25px;--spectrum-component-pill-edge-to-text-300:30px;--spectrum-component-edge-to-visual-50:7px;--spectrum-component-edge-to-visual-75:9px;--spectrum-component-edge-to-visual-100:12px;--spectrum-component-edge-to-visual-200:16px;--spectrum-component-edge-to-visual-300:19px;--spectrum-component-edge-to-visual-only-50:4px;--spectrum-component-edge-to-visual-only-75:5px;--spectrum-component-edge-to-visual-only-100:9px;--spectrum-component-edge-to-visual-only-200:13px;--spectrum-component-edge-to-visual-only-300:16px;--spectrum-component-edge-to-text-50:10px;--spectrum-component-edge-to-text-75:11px;--spectrum-component-edge-to-text-100:15px;--spectrum-component-edge-to-text-200:19px;--spectrum-component-edge-to-text-300:22px;--spectrum-component-top-to-workflow-icon-50:4px;--spectrum-component-top-to-workflow-icon-75:5px;--spectrum-component-top-to-workflow-icon-100:9px;--spectrum-component-top-to-workflow-icon-200:13px;--spectrum-component-top-to-workflow-icon-300:16px;--spectrum-component-top-to-text-50:4px;--spectrum-component-top-to-text-75:5px;--spectrum-component-top-to-text-100:8px;--spectrum-component-top-to-text-200:12px;--spectrum-component-top-to-text-300:15px;--spectrum-component-bottom-to-text-50:6px;--spectrum-component-bottom-to-text-75:6px;--spectrum-component-bottom-to-text-100:11px;--spectrum-component-bottom-to-text-200:14px;--spectrum-component-bottom-to-text-300:18px;--spectrum-component-to-menu-small:7px;--spectrum-component-to-menu-medium:8px;--spectrum-component-to-menu-large:9px;--spectrum-component-to-menu-extra-large:10px;--spectrum-field-edge-to-disclosure-icon-75:9px;--spectrum-field-edge-to-disclosure-icon-100:13px;--spectrum-field-edge-to-disclosure-icon-200:17px;--spectrum-field-edge-to-disclosure-icon-300:22px;--spectrum-field-top-to-alert-icon-small:5px;--spectrum-field-top-to-alert-icon-medium:9px;--spectrum-field-top-to-alert-icon-large:13px;--spectrum-field-top-to-alert-icon-extra-large:16px;--spectrum-field-top-to-validation-icon-small:9px;--spectrum-field-top-to-validation-icon-medium:13px;--spectrum-field-top-to-validation-icon-large:17px;--spectrum-field-top-to-validation-icon-extra-large:22px;--spectrum-field-top-to-progress-circle-small:7px;--spectrum-field-top-to-progress-circle-medium:12px;--spectrum-field-top-to-progress-circle-large:17px;--spectrum-field-top-to-progress-circle-extra-large:22px;--spectrum-field-edge-to-alert-icon-small:11px;--spectrum-field-edge-to-alert-icon-medium:15px;--spectrum-field-edge-to-alert-icon-large:19px;--spectrum-field-edge-to-alert-icon-extra-large:22px;--spectrum-field-edge-to-validation-icon-small:11px;--spectrum-field-edge-to-validation-icon-medium:15px;--spectrum-field-edge-to-validation-icon-large:19px;--spectrum-field-edge-to-validation-icon-extra-large:22px;--spectrum-field-text-to-alert-icon-small:10px;--spectrum-field-text-to-alert-icon-medium:15px;--spectrum-field-text-to-alert-icon-large:19px;--spectrum-field-text-to-alert-icon-extra-large:22px;--spectrum-field-text-to-validation-icon-small:10px;--spectrum-field-text-to-validation-icon-medium:15px;--spectrum-field-text-to-validation-icon-large:19px;--spectrum-field-text-to-validation-icon-extra-large:22px;--spectrum-field-width:240px;--spectrum-character-count-to-field-quiet-small:-4px;--spectrum-character-count-to-field-quiet-medium:-4px;--spectrum-character-count-to-field-quiet-large:-4px;--spectrum-character-count-to-field-quiet-extra-large:-5px;--spectrum-side-label-character-count-to-field:15px;--spectrum-side-label-character-count-top-margin-small:5px;--spectrum-side-label-character-count-top-margin-medium:10px;--spectrum-side-label-character-count-top-margin-large:14px;--spectrum-side-label-character-count-top-margin-extra-large:18px;--spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px;--spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px;--spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px;--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px;--spectrum-navigational-indicator-top-to-back-icon-small:9px;--spectrum-navigational-indicator-top-to-back-icon-medium:13px;--spectrum-navigational-indicator-top-to-back-icon-large:17px;--spectrum-navigational-indicator-top-to-back-icon-extra-large:22px;--spectrum-color-control-track-width:30px;--spectrum-font-size-50:13px;--spectrum-font-size-75:15px;--spectrum-font-size-100:17px;--spectrum-font-size-200:19px;--spectrum-font-size-300:22px;--spectrum-font-size-400:24px;--spectrum-font-size-500:27px;--spectrum-font-size-600:31px;--spectrum-font-size-700:34px;--spectrum-font-size-800:39px;--spectrum-font-size-900:44px;--spectrum-font-size-1000:49px;--spectrum-font-size-1100:55px;--spectrum-font-size-1200:62px;--spectrum-font-size-1300:70px}:host,:root{--spectrum-edge-to-visual-only-75:5px;--spectrum-edge-to-visual-only-100:9px;--spectrum-edge-to-visual-only-200:13px;--spectrum-edge-to-visual-only-300:16px;--spectrum-slider-tick-mark-height:13px;--spectrum-slider-ramp-track-height:20px;--spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";--spectrum-colorwheel-colorarea-container-size:182px;--spectrum-color-handle-size:20px;--spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;--spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;--spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;--spectrum-menu-item-checkmark-height-small:12px;--spectrum-menu-item-checkmark-height-medium:14px;--spectrum-menu-item-checkmark-height-large:16px;--spectrum-menu-item-checkmark-height-extra-large:16px;--spectrum-menu-item-checkmark-width-small:12px;--spectrum-menu-item-checkmark-width-medium:14px;--spectrum-menu-item-checkmark-width-large:16px;--spectrum-menu-item-checkmark-width-extra-large:16px}:host,:root{--spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";--spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"}:host,:root{--spectrum-checkbox-control-size-small:18px;--spectrum-checkbox-control-size-medium:20px;--spectrum-checkbox-control-size-large:22px;--spectrum-checkbox-control-size-extra-large:26px;--spectrum-checkbox-top-to-control-small:6px;--spectrum-checkbox-top-to-control-medium:10px;--spectrum-checkbox-top-to-control-large:14px;--spectrum-checkbox-top-to-control-extra-large:17px;--spectrum-switch-control-width-small:32px;--spectrum-switch-control-width-medium:36px;--spectrum-switch-control-width-large:41px;--spectrum-switch-control-width-extra-large:46px;--spectrum-switch-control-height-small:18px;--spectrum-switch-control-height-medium:20px;--spectrum-switch-control-height-large:22px;--spectrum-switch-control-height-extra-large:26px;--spectrum-switch-top-to-control-small:6px;--spectrum-switch-top-to-control-medium:10px;--spectrum-switch-top-to-control-large:14px;--spectrum-switch-top-to-control-extra-large:17px;--spectrum-radio-button-control-size-small:18px;--spectrum-radio-button-control-size-medium:20px;--spectrum-radio-button-control-size-large:22px;--spectrum-radio-button-control-size-extra-large:26px;--spectrum-radio-button-top-to-control-small:6px;--spectrum-radio-button-top-to-control-medium:10px;--spectrum-radio-button-top-to-control-large:14px;--spectrum-radio-button-top-to-control-extra-large:17px;--spectrum-slider-control-height-small:22px;--spectrum-slider-control-height-medium:24px;--spectrum-slider-control-height-large:28px;--spectrum-slider-control-height-extra-large:30px;--spectrum-slider-handle-size-small:22px;--spectrum-slider-handle-size-medium:24px;--spectrum-slider-handle-size-large:28px;--spectrum-slider-handle-size-extra-large:30px;--spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);--spectrum-slider-bottom-to-handle-small:4px;--spectrum-slider-bottom-to-handle-medium:8px;--spectrum-slider-bottom-to-handle-large:12px;--spectrum-slider-bottom-to-handle-extra-large:15px;--spectrum-color-loupe-height:50px;--spectrum-color-loupe-width:40px;--spectrum-corner-radius-75:4px;--spectrum-corner-radius-100:8px;--spectrum-corner-radius-200:16px;--spectrum-drop-shadow-x:0px;--spectrum-drop-shadow-y:4px;--spectrum-drop-shadow-blur:16px}
+:host,:root{--spectrum-global-dimension-scale-factor:1.25;--spectrum-global-dimension-size-0:0px;--spectrum-global-dimension-size-10:1px;--spectrum-global-dimension-size-25:2px;--spectrum-global-dimension-size-30:3px;--spectrum-global-dimension-size-40:4px;--spectrum-global-dimension-size-50:5px;--spectrum-global-dimension-size-65:6px;--spectrum-global-dimension-size-75:8px;--spectrum-global-dimension-size-85:9px;--spectrum-global-dimension-size-100:10px;--spectrum-global-dimension-size-115:11px;--spectrum-global-dimension-size-125:13px;--spectrum-global-dimension-size-130:14px;--spectrum-global-dimension-size-150:15px;--spectrum-global-dimension-size-160:16px;--spectrum-global-dimension-size-175:18px;--spectrum-global-dimension-size-185:19px;--spectrum-global-dimension-size-200:20px;--spectrum-global-dimension-size-225:22px;--spectrum-global-dimension-size-250:25px;--spectrum-global-dimension-size-275:28px;--spectrum-global-dimension-size-300:30px;--spectrum-global-dimension-size-325:32px;--spectrum-global-dimension-size-350:35px;--spectrum-global-dimension-size-400:40px;--spectrum-global-dimension-size-450:45px;--spectrum-global-dimension-size-500:50px;--spectrum-global-dimension-size-550:56px;--spectrum-global-dimension-size-600:60px;--spectrum-global-dimension-size-650:65px;--spectrum-global-dimension-size-675:68px;--spectrum-global-dimension-size-700:70px;--spectrum-global-dimension-size-750:75px;--spectrum-global-dimension-size-800:80px;--spectrum-global-dimension-size-900:90px;--spectrum-global-dimension-size-1000:100px;--spectrum-global-dimension-size-1125:112px;--spectrum-global-dimension-size-1200:120px;--spectrum-global-dimension-size-1250:125px;--spectrum-global-dimension-size-1600:160px;--spectrum-global-dimension-size-1700:170px;--spectrum-global-dimension-size-1800:180px;--spectrum-global-dimension-size-2000:200px;--spectrum-global-dimension-size-2400:240px;--spectrum-global-dimension-size-2500:250px;--spectrum-global-dimension-size-3000:300px;--spectrum-global-dimension-size-3400:340px;--spectrum-global-dimension-size-3600:360px;--spectrum-global-dimension-size-4600:460px;--spectrum-global-dimension-size-5000:500px;--spectrum-global-dimension-size-6000:600px;--spectrum-global-dimension-font-size-25:12px;--spectrum-global-dimension-font-size-50:13px;--spectrum-global-dimension-font-size-75:15px;--spectrum-global-dimension-font-size-100:17px;--spectrum-global-dimension-font-size-150:18px;--spectrum-global-dimension-font-size-200:19px;--spectrum-global-dimension-font-size-300:22px;--spectrum-global-dimension-font-size-400:24px;--spectrum-global-dimension-font-size-500:27px;--spectrum-global-dimension-font-size-600:31px;--spectrum-global-dimension-font-size-700:34px;--spectrum-global-dimension-font-size-800:39px;--spectrum-global-dimension-font-size-900:44px;--spectrum-global-dimension-font-size-1000:49px;--spectrum-global-dimension-font-size-1100:55px;--spectrum-global-dimension-font-size-1200:62px;--spectrum-global-dimension-font-size-1300:70px;--spectrum-alias-item-text-padding-top-l:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-item-text-padding-bottom-s:var(
+--spectrum-global-dimension-static-size-85
+);--spectrum-alias-item-workflow-padding-left-m:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-item-rounded-workflow-padding-left-m:17px;--spectrum-alias-item-rounded-workflow-padding-left-xl:27px;--spectrum-alias-item-mark-padding-top-m:var(
+--spectrum-global-dimension-static-size-85
+);--spectrum-alias-item-mark-padding-bottom-m:var(
+--spectrum-global-dimension-static-size-85
+);--spectrum-alias-item-mark-padding-left-m:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-item-control-1-size-l:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-item-control-1-size-xl:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-item-control-2-size-s:var(
+--spectrum-global-dimension-size-160
+);--spectrum-alias-item-control-3-height-s:var(
+--spectrum-global-dimension-size-160
+);--spectrum-alias-item-control-3-width-s:var(
+--spectrum-global-dimension-size-325
+);--spectrum-alias-item-control-3-width-m:var(
+--spectrum-global-dimension-static-size-450
+);--spectrum-alias-item-control-3-width-l:41px;--spectrum-alias-item-control-3-width-xl:46px;--spectrum-alias-item-mark-size-m:var(
+--spectrum-global-dimension-static-size-325
+);--spectrum-alias-component-focusring-border-radius:var(
+--spectrum-alias-focus-ring-border-radius-regular
+);--spectrum-alias-focus-ring-border-radius-small:var(
+--spectrum-global-dimension-size-75
+);--spectrum-alias-focus-ring-border-radius-regular:12px;--spectrum-alias-control-three-width-m:34px;--spectrum-alias-control-three-width-l:38px;--spectrum-alias-control-three-width-xl:var(
+--spectrum-global-dimension-static-size-550
+);--spectrum-alias-focus-ring-radius-default:var(
+--spectrum-global-dimension-static-size-115
+);--spectrum-alias-workflow-icon-size-l:var(
+--spectrum-global-dimension-static-size-300
+);--spectrum-alias-ui-icon-chevron-size-75:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-chevron-size-100:var(
+--spectrum-global-dimension-static-size-175
+);--spectrum-alias-ui-icon-chevron-size-200:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-chevron-size-300:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-chevron-size-400:var(
+--spectrum-global-dimension-static-size-225
+);--spectrum-alias-ui-icon-chevron-size-500:var(
+--spectrum-global-dimension-static-size-250
+);--spectrum-alias-ui-icon-checkmark-size-50:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-checkmark-size-75:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-checkmark-size-100:var(
+--spectrum-global-dimension-static-size-175
+);--spectrum-alias-ui-icon-checkmark-size-200:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-checkmark-size-300:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-checkmark-size-400:var(
+--spectrum-global-dimension-static-size-225
+);--spectrum-alias-ui-icon-checkmark-size-500:var(
+--spectrum-global-dimension-static-size-250
+);--spectrum-alias-ui-icon-checkmark-size-600:var(
+--spectrum-global-dimension-static-size-300
+);--spectrum-alias-ui-icon-dash-size-50:var(
+--spectrum-global-dimension-static-size-125
+);--spectrum-alias-ui-icon-dash-size-75:var(
+--spectrum-global-dimension-static-size-125
+);--spectrum-alias-ui-icon-dash-size-100:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-dash-size-200:var(
+--spectrum-global-dimension-static-size-175
+);--spectrum-alias-ui-icon-dash-size-300:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-dash-size-400:var(
+--spectrum-global-dimension-static-size-225
+);--spectrum-alias-ui-icon-dash-size-500:var(
+--spectrum-global-dimension-static-size-250
+);--spectrum-alias-ui-icon-dash-size-600:var(
+--spectrum-global-dimension-static-size-275
+);--spectrum-alias-ui-icon-cross-size-75:var(
+--spectrum-global-dimension-static-size-125
+);--spectrum-alias-ui-icon-cross-size-100:var(
+--spectrum-global-dimension-static-size-125
+);--spectrum-alias-ui-icon-cross-size-200:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-cross-size-300:var(
+--spectrum-global-dimension-static-size-175
+);--spectrum-alias-ui-icon-cross-size-400:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-cross-size-500:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-cross-size-600:var(
+--spectrum-global-dimension-static-size-225
+);--spectrum-alias-ui-icon-arrow-size-75:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-arrow-size-100:var(
+--spectrum-global-dimension-static-size-175
+);--spectrum-alias-ui-icon-arrow-size-200:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-arrow-size-300:var(
+--spectrum-global-dimension-static-size-200
+);--spectrum-alias-ui-icon-arrow-size-400:var(
+--spectrum-global-dimension-static-size-225
+);--spectrum-alias-ui-icon-arrow-size-500:var(
+--spectrum-global-dimension-static-size-275
+);--spectrum-alias-ui-icon-arrow-size-600:var(
+--spectrum-global-dimension-static-size-300
+);--spectrum-alias-ui-icon-triplegripper-size-100-width:var(
+--spectrum-global-dimension-static-size-175
+);--spectrum-alias-ui-icon-doublegripper-size-100-height:var(
+--spectrum-global-dimension-static-size-75
+);--spectrum-alias-ui-icon-singlegripper-size-100-height:var(
+--spectrum-global-dimension-static-size-50
+);--spectrum-alias-ui-icon-cornertriangle-size-100:var(
+--spectrum-global-dimension-static-size-85
+);--spectrum-alias-ui-icon-cornertriangle-size-300:var(
+--spectrum-global-dimension-static-size-100
+);--spectrum-alias-ui-icon-asterisk-size-200:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-alias-ui-icon-asterisk-size-300:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-dialog-confirm-title-text-size:var(
+--spectrum-alias-heading-xs-text-size
+);--spectrum-dialog-confirm-description-text-size:var(
+--spectrum-global-dimension-font-size-75
+);--spectrum-dialog-confirm-padding:var(
+--spectrum-global-dimension-static-size-300
+);--spectrum-listitem-m-texticon-padding-left:var(
+--spectrum-global-dimension-static-size-150
+);--spectrum-listitem-m-textthumbnail-padding-left:var(
+--spectrum-global-dimension-static-size-150
+)}:host,:root{--spectrum-global-alias-appframe-border-size:1px}:host,:root{--spectrum-field-label-text-to-asterisk-small:5px;--spectrum-field-label-text-to-asterisk-medium:5px;--spectrum-field-label-text-to-asterisk-large:6px;--spectrum-field-label-text-to-asterisk-extra-large:6px;--spectrum-field-label-top-to-asterisk-small:11px;--spectrum-field-label-top-to-asterisk-medium:15px;--spectrum-field-label-top-to-asterisk-large:19px;--spectrum-field-label-top-to-asterisk-extra-large:24px;--spectrum-field-label-top-margin-small:0px;--spectrum-field-label-top-margin-medium:5px;--spectrum-field-label-top-margin-large:6px;--spectrum-field-label-top-margin-extra-large:6px;--spectrum-field-label-to-component-quiet-small:-10px;--spectrum-field-label-to-component-quiet-medium:-10px;--spectrum-field-label-to-component-quiet-large:-15px;--spectrum-field-label-to-component-quiet-extra-large:-19px;--spectrum-help-text-top-to-workflow-icon-small:5px;--spectrum-help-text-top-to-workflow-icon-medium:4px;--spectrum-help-text-top-to-workflow-icon-large:8px;--spectrum-help-text-top-to-workflow-icon-extra-large:11px;--spectrum-status-light-dot-size-small:8px;--spectrum-status-light-dot-size-medium:10px;--spectrum-status-light-dot-size-large:12px;--spectrum-status-light-dot-size-extra-large:12px;--spectrum-status-light-top-to-dot-small:11px;--spectrum-status-light-top-to-dot-medium:15px;--spectrum-status-light-top-to-dot-large:19px;--spectrum-status-light-top-to-dot-extra-large:24px;--spectrum-action-button-edge-to-hold-icon-extra-small:3px;--spectrum-action-button-edge-to-hold-icon-small:3px;--spectrum-action-button-edge-to-hold-icon-medium:5px;--spectrum-action-button-edge-to-hold-icon-large:6px;--spectrum-action-button-edge-to-hold-icon-extra-large:7px;--spectrum-tooltip-tip-width:10px;--spectrum-tooltip-tip-height:5px;--spectrum-tooltip-maximum-width:200px;--spectrum-progress-circle-size-small:20px;--spectrum-progress-circle-size-medium:40px;--spectrum-progress-circle-size-large:80px;--spectrum-progress-circle-thickness-small:3px;--spectrum-progress-circle-thickness-medium:4px;--spectrum-progress-circle-thickness-large:5px;--spectrum-toast-height:56px;--spectrum-toast-maximum-width:420px;--spectrum-toast-top-to-workflow-icon:17px;--spectrum-toast-top-to-text:16px;--spectrum-toast-bottom-to-text:19px;--spectrum-action-bar-height:56px;--spectrum-action-bar-top-to-item-counter:16px;--spectrum-swatch-size-extra-small:20px;--spectrum-swatch-size-small:30px;--spectrum-swatch-size-medium:40px;--spectrum-swatch-size-large:50px;--spectrum-progress-bar-thickness-small:5px;--spectrum-progress-bar-thickness-medium:8px;--spectrum-progress-bar-thickness-large:10px;--spectrum-progress-bar-thickness-extra-large:13px;--spectrum-meter-default-width:240px;--spectrum-meter-thickness-small:5px;--spectrum-meter-thickness-large:8px;--spectrum-tag-top-to-avatar-small:5px;--spectrum-tag-top-to-avatar-medium:7px;--spectrum-tag-top-to-avatar-large:11px;--spectrum-tag-top-to-cross-icon-small:10px;--spectrum-tag-top-to-cross-icon-medium:15px;--spectrum-tag-top-to-cross-icon-large:19px;--spectrum-popover-top-to-content-area:5px;--spectrum-menu-item-edge-to-content-not-selected-small:24px;--spectrum-menu-item-edge-to-content-not-selected-medium:42px;--spectrum-menu-item-edge-to-content-not-selected-large:47px;--spectrum-menu-item-edge-to-content-not-selected-extra-large:54px;--spectrum-menu-item-top-to-disclosure-icon-small:9px;--spectrum-menu-item-top-to-disclosure-icon-medium:13px;--spectrum-menu-item-top-to-disclosure-icon-large:17px;--spectrum-menu-item-top-to-disclosure-icon-extra-large:22px;--spectrum-menu-item-top-to-selected-icon-small:9px;--spectrum-menu-item-top-to-selected-icon-medium:13px;--spectrum-menu-item-top-to-selected-icon-large:17px;--spectrum-menu-item-top-to-selected-icon-extra-large:22px;--spectrum-picker-visual-to-disclosure-icon-small:9px;--spectrum-picker-visual-to-disclosure-icon-medium:10px;--spectrum-picker-visual-to-disclosure-icon-large:11px;--spectrum-picker-visual-to-disclosure-icon-extra-large:13px;--spectrum-text-area-minimum-width:140px;--spectrum-text-area-minimum-height:70px;--spectrum-combo-box-visual-to-field-button-small:9px;--spectrum-combo-box-visual-to-field-button-medium:10px;--spectrum-combo-box-visual-to-field-button-large:11px;--spectrum-combo-box-visual-to-field-button-extra-large:13px;--spectrum-thumbnail-size-50:20px;--spectrum-thumbnail-size-75:22px;--spectrum-thumbnail-size-100:26px;--spectrum-thumbnail-size-200:28px;--spectrum-thumbnail-size-300:32px;--spectrum-thumbnail-size-400:36px;--spectrum-thumbnail-size-500:40px;--spectrum-thumbnail-size-600:46px;--spectrum-thumbnail-size-700:50px;--spectrum-thumbnail-size-800:55px;--spectrum-thumbnail-size-900:62px;--spectrum-thumbnail-size-1000:70px;--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs);--spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs);--spectrum-opacity-checkerboard-square-size:10px;--spectrum-breadcrumbs-height-multiline:84px;--spectrum-breadcrumbs-top-to-text:17px;--spectrum-breadcrumbs-top-to-text-compact:16px;--spectrum-breadcrumbs-top-to-text-multiline:15px;--spectrum-breadcrumbs-bottom-to-text:19px;--spectrum-breadcrumbs-bottom-to-text-compact:19px;--spectrum-breadcrumbs-bottom-to-text-multiline:10px;--spectrum-breadcrumbs-start-edge-to-text:9px;--spectrum-breadcrumbs-top-text-to-bottom-text:11px;--spectrum-breadcrumbs-top-to-separator-icon:25px;--spectrum-breadcrumbs-top-to-separator-icon-compact:23px;--spectrum-breadcrumbs-top-to-separator-icon-multiline:20px;--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px;--spectrum-breadcrumbs-top-to-truncated-menu:10px;--spectrum-breadcrumbs-top-to-truncated-menu-compact:5px;--spectrum-avatar-size-50:20px;--spectrum-avatar-size-75:22px;--spectrum-avatar-size-100:26px;--spectrum-avatar-size-200:28px;--spectrum-avatar-size-300:32px;--spectrum-avatar-size-400:36px;--spectrum-avatar-size-500:40px;--spectrum-avatar-size-600:46px;--spectrum-avatar-size-700:50px;--spectrum-alert-banner-minimum-height:64px;--spectrum-alert-banner-width:680px;--spectrum-alert-banner-to-top-workflow-icon:21px;--spectrum-alert-banner-to-top-text:21px;--spectrum-alert-banner-to-bottom-text:22px;--spectrum-rating-indicator-width:22px;--spectrum-rating-indicator-to-icon:5px;--spectrum-color-area-width:240px;--spectrum-color-area-minimum-width:80px;--spectrum-color-area-height:240px;--spectrum-color-area-minimum-height:80px;--spectrum-color-wheel-width:240px;--spectrum-color-wheel-minimum-width:219px;--spectrum-color-slider-length:240px;--spectrum-color-slider-minimum-length:100px;--spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s);--spectrum-illustrated-message-cjk-title-size:var(
+--spectrum-heading-cjk-size-s
+);--spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs);--spectrum-coach-mark-minimum-width:208px;--spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300);--spectrum-coach-mark-pagination-text-to-bottom-edge:22px;--spectrum-coach-mark-media-minimum-height:121px;--spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs);--spectrum-coach-mark-body-size:var(--spectrum-body-size-xs);--spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs);--spectrum-accordion-top-to-text-compact-small:2px;--spectrum-accordion-top-to-text-regular-small:7px;--spectrum-accordion-small-top-to-text-spacious:12px;--spectrum-accordion-top-to-text-compact-medium:4px;--spectrum-accordion-top-to-text-regular-medium:9px;--spectrum-accordion-top-to-text-spacious-medium:14px;--spectrum-accordion-top-to-text-compact-large:7px;--spectrum-accordion-top-to-text-regular-large:12px;--spectrum-accordion-top-to-text-spacious-large:14px;--spectrum-accordion-top-to-text-compact-extra-large:7px;--spectrum-accordion-top-to-text-regular-extra-large:12px;--spectrum-accordion-top-to-text-spacious-extra-large:14px;--spectrum-accordion-bottom-to-text-compact-small:4px;--spectrum-accordion-bottom-to-text-regular-small:9px;--spectrum-accordion-bottom-to-text-spacious-small:14px;--spectrum-accordion-bottom-to-text-compact-medium:8px;--spectrum-accordion-bottom-to-text-regular-medium:13px;--spectrum-accordion-bottom-to-text-spacious-medium:18px;--spectrum-accordion-bottom-to-text-compact-large:9px;--spectrum-accordion-bottom-to-text-regular-large:14px;--spectrum-accordion-bottom-to-text-spacious-large:19px;--spectrum-accordion-bottom-to-text-compact-extra-large:10px;--spectrum-accordion-bottom-to-text-regular-extra-large:15px;--spectrum-accordion-bottom-to-text-spacious-extra-large:21px;--spectrum-accordion-minimum-width:250px;--spectrum-accordion-disclosure-indicator-to-text:0px;--spectrum-accordion-edge-to-disclosure-indicator:0px;--spectrum-accordion-edge-to-text:0px;--spectrum-accordion-focus-indicator-gap:0px;--spectrum-accordion-content-area-top-to-content:10px;--spectrum-accordion-content-area-bottom-to-content:20px;--spectrum-workflow-icon-size-50:18px;--spectrum-workflow-icon-size-75:20px;--spectrum-workflow-icon-size-100:22px;--spectrum-workflow-icon-size-200:24px;--spectrum-workflow-icon-size-300:28px;--spectrum-text-to-visual-50:8px;--spectrum-text-to-visual-75:9px;--spectrum-text-to-visual-100:10px;--spectrum-text-to-visual-200:11px;--spectrum-text-to-visual-300:13px;--spectrum-text-to-control-75:11px;--spectrum-text-to-control-100:13px;--spectrum-text-to-control-200:14px;--spectrum-text-to-control-300:16px;--spectrum-component-height-50:26px;--spectrum-component-height-75:30px;--spectrum-component-height-100:40px;--spectrum-component-height-200:50px;--spectrum-component-height-300:60px;--spectrum-component-height-400:70px;--spectrum-component-height-500:80px;--spectrum-component-pill-edge-to-visual-75:13px;--spectrum-component-pill-edge-to-visual-100:17px;--spectrum-component-pill-edge-to-visual-200:22px;--spectrum-component-pill-edge-to-visual-300:27px;--spectrum-component-pill-edge-to-visual-only-75:5px;--spectrum-component-pill-edge-to-visual-only-100:9px;--spectrum-component-pill-edge-to-visual-only-200:13px;--spectrum-component-pill-edge-to-visual-only-300:16px;--spectrum-component-pill-edge-to-text-75:15px;--spectrum-component-pill-edge-to-text-100:20px;--spectrum-component-pill-edge-to-text-200:25px;--spectrum-component-pill-edge-to-text-300:30px;--spectrum-component-edge-to-visual-50:7px;--spectrum-component-edge-to-visual-75:9px;--spectrum-component-edge-to-visual-100:12px;--spectrum-component-edge-to-visual-200:16px;--spectrum-component-edge-to-visual-300:19px;--spectrum-component-edge-to-visual-only-50:4px;--spectrum-component-edge-to-visual-only-75:5px;--spectrum-component-edge-to-visual-only-100:9px;--spectrum-component-edge-to-visual-only-200:13px;--spectrum-component-edge-to-visual-only-300:16px;--spectrum-component-edge-to-text-50:10px;--spectrum-component-edge-to-text-75:11px;--spectrum-component-edge-to-text-100:15px;--spectrum-component-edge-to-text-200:19px;--spectrum-component-edge-to-text-300:22px;--spectrum-component-top-to-workflow-icon-50:4px;--spectrum-component-top-to-workflow-icon-75:5px;--spectrum-component-top-to-workflow-icon-100:9px;--spectrum-component-top-to-workflow-icon-200:13px;--spectrum-component-top-to-workflow-icon-300:16px;--spectrum-component-top-to-text-50:4px;--spectrum-component-top-to-text-75:5px;--spectrum-component-top-to-text-100:8px;--spectrum-component-top-to-text-200:12px;--spectrum-component-top-to-text-300:15px;--spectrum-component-bottom-to-text-50:6px;--spectrum-component-bottom-to-text-75:6px;--spectrum-component-bottom-to-text-100:11px;--spectrum-component-bottom-to-text-200:14px;--spectrum-component-bottom-to-text-300:18px;--spectrum-component-to-menu-small:7px;--spectrum-component-to-menu-medium:8px;--spectrum-component-to-menu-large:9px;--spectrum-component-to-menu-extra-large:10px;--spectrum-field-edge-to-disclosure-icon-75:9px;--spectrum-field-edge-to-disclosure-icon-100:13px;--spectrum-field-edge-to-disclosure-icon-200:17px;--spectrum-field-edge-to-disclosure-icon-300:22px;--spectrum-field-top-to-alert-icon-small:5px;--spectrum-field-top-to-alert-icon-medium:9px;--spectrum-field-top-to-alert-icon-large:13px;--spectrum-field-top-to-alert-icon-extra-large:16px;--spectrum-field-top-to-validation-icon-small:9px;--spectrum-field-top-to-validation-icon-medium:13px;--spectrum-field-top-to-validation-icon-large:17px;--spectrum-field-top-to-validation-icon-extra-large:22px;--spectrum-field-top-to-progress-circle-small:7px;--spectrum-field-top-to-progress-circle-medium:12px;--spectrum-field-top-to-progress-circle-large:17px;--spectrum-field-top-to-progress-circle-extra-large:22px;--spectrum-field-edge-to-alert-icon-small:11px;--spectrum-field-edge-to-alert-icon-medium:15px;--spectrum-field-edge-to-alert-icon-large:19px;--spectrum-field-edge-to-alert-icon-extra-large:22px;--spectrum-field-edge-to-validation-icon-small:11px;--spectrum-field-edge-to-validation-icon-medium:15px;--spectrum-field-edge-to-validation-icon-large:19px;--spectrum-field-edge-to-validation-icon-extra-large:22px;--spectrum-field-text-to-alert-icon-small:10px;--spectrum-field-text-to-alert-icon-medium:15px;--spectrum-field-text-to-alert-icon-large:19px;--spectrum-field-text-to-alert-icon-extra-large:22px;--spectrum-field-text-to-validation-icon-small:10px;--spectrum-field-text-to-validation-icon-medium:15px;--spectrum-field-text-to-validation-icon-large:19px;--spectrum-field-text-to-validation-icon-extra-large:22px;--spectrum-field-width:240px;--spectrum-character-count-to-field-quiet-small:-4px;--spectrum-character-count-to-field-quiet-medium:-4px;--spectrum-character-count-to-field-quiet-large:-4px;--spectrum-character-count-to-field-quiet-extra-large:-5px;--spectrum-side-label-character-count-to-field:15px;--spectrum-side-label-character-count-top-margin-small:5px;--spectrum-side-label-character-count-top-margin-medium:10px;--spectrum-side-label-character-count-top-margin-large:14px;--spectrum-side-label-character-count-top-margin-extra-large:18px;--spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px;--spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px;--spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px;--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px;--spectrum-navigational-indicator-top-to-back-icon-small:9px;--spectrum-navigational-indicator-top-to-back-icon-medium:13px;--spectrum-navigational-indicator-top-to-back-icon-large:17px;--spectrum-navigational-indicator-top-to-back-icon-extra-large:22px;--spectrum-color-control-track-width:30px;--spectrum-font-size-50:13px;--spectrum-font-size-75:15px;--spectrum-font-size-100:17px;--spectrum-font-size-200:19px;--spectrum-font-size-300:22px;--spectrum-font-size-400:24px;--spectrum-font-size-500:27px;--spectrum-font-size-600:31px;--spectrum-font-size-700:34px;--spectrum-font-size-800:39px;--spectrum-font-size-900:44px;--spectrum-font-size-1000:49px;--spectrum-font-size-1100:55px;--spectrum-font-size-1200:62px;--spectrum-font-size-1300:70px}:host,:root{--spectrum-edge-to-visual-only-75:5px;--spectrum-edge-to-visual-only-100:9px;--spectrum-edge-to-visual-only-200:13px;--spectrum-edge-to-visual-only-300:16px;--spectrum-slider-tick-mark-height:13px;--spectrum-slider-ramp-track-height:20px;--spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";--spectrum-colorwheel-colorarea-container-size:182px;--spectrum-color-handle-size:20px;--spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;--spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;--spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;--spectrum-menu-item-checkmark-height-small:12px;--spectrum-menu-item-checkmark-height-medium:14px;--spectrum-menu-item-checkmark-height-large:16px;--spectrum-menu-item-checkmark-height-extra-large:16px;--spectrum-menu-item-checkmark-width-small:12px;--spectrum-menu-item-checkmark-width-medium:14px;--spectrum-menu-item-checkmark-width-large:16px;--spectrum-menu-item-checkmark-width-extra-large:16px;--spectrum-rating-icon-spacing:var(--spectrum-spacing-100)}:host,:root{--spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";--spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"}:host,:root{--spectrum-checkbox-control-size-small:18px;--spectrum-checkbox-control-size-medium:20px;--spectrum-checkbox-control-size-large:22px;--spectrum-checkbox-control-size-extra-large:26px;--spectrum-checkbox-top-to-control-small:6px;--spectrum-checkbox-top-to-control-medium:10px;--spectrum-checkbox-top-to-control-large:14px;--spectrum-checkbox-top-to-control-extra-large:17px;--spectrum-switch-control-width-small:32px;--spectrum-switch-control-width-medium:36px;--spectrum-switch-control-width-large:41px;--spectrum-switch-control-width-extra-large:46px;--spectrum-switch-control-height-small:18px;--spectrum-switch-control-height-medium:20px;--spectrum-switch-control-height-large:22px;--spectrum-switch-control-height-extra-large:26px;--spectrum-switch-top-to-control-small:6px;--spectrum-switch-top-to-control-medium:10px;--spectrum-switch-top-to-control-large:14px;--spectrum-switch-top-to-control-extra-large:17px;--spectrum-radio-button-control-size-small:18px;--spectrum-radio-button-control-size-medium:20px;--spectrum-radio-button-control-size-large:22px;--spectrum-radio-button-control-size-extra-large:26px;--spectrum-radio-button-top-to-control-small:6px;--spectrum-radio-button-top-to-control-medium:10px;--spectrum-radio-button-top-to-control-large:14px;--spectrum-radio-button-top-to-control-extra-large:17px;--spectrum-slider-control-height-small:22px;--spectrum-slider-control-height-medium:24px;--spectrum-slider-control-height-large:28px;--spectrum-slider-control-height-extra-large:30px;--spectrum-slider-handle-size-small:22px;--spectrum-slider-handle-size-medium:24px;--spectrum-slider-handle-size-large:28px;--spectrum-slider-handle-size-extra-large:30px;--spectrum-slider-handle-border-width-down-small:var(
+--spectrum-border-width-200
+);--spectrum-slider-handle-border-width-down-medium:var(
+--spectrum-border-width-200
+);--spectrum-slider-handle-border-width-down-large:var(
+--spectrum-border-width-200
+);--spectrum-slider-handle-border-width-down-extra-large:var(
+--spectrum-border-width-200
+);--spectrum-slider-bottom-to-handle-small:4px;--spectrum-slider-bottom-to-handle-medium:8px;--spectrum-slider-bottom-to-handle-large:12px;--spectrum-slider-bottom-to-handle-extra-large:15px;--spectrum-color-loupe-height:50px;--spectrum-color-loupe-width:40px;--spectrum-color-handle-size:24px;--spectrum-color-handle-size-key-focus:48px;--spectrum-corner-radius-75:4px;--spectrum-corner-radius-100:8px;--spectrum-corner-radius-200:16px;--spectrum-drop-shadow-x:0px;--spectrum-drop-shadow-y:4px;--spectrum-drop-shadow-blur:16px}
 `;
 export default styles;
 //# sourceMappingURL=scale-large.css.dev.js.map