@spectrum-web-components/theme 0.50.0-beta.0 → 1.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -4
- package/src/Theme.d.ts +0 -22
- package/src/Theme.dev.js +0 -23
- package/src/Theme.dev.js.map +2 -2
- package/src/Theme.js.map +2 -2
- package/src/express/scale-large-core-tokens.css.dev.js +1 -1
- package/src/express/scale-large-core-tokens.css.dev.js.map +1 -1
- package/src/express/scale-large-core-tokens.css.js +1 -1
- package/src/express/scale-large-core-tokens.css.js.map +1 -1
- package/src/express/scale-large.css.dev.js +1 -1
- package/src/express/scale-large.css.dev.js.map +1 -1
- package/src/express/scale-large.css.js +1 -1
- package/src/express/scale-large.css.js.map +1 -1
- package/src/express/scale-medium-core-tokens.css.dev.js +1 -1
- package/src/express/scale-medium-core-tokens.css.dev.js.map +1 -1
- package/src/express/scale-medium-core-tokens.css.js +1 -1
- package/src/express/scale-medium-core-tokens.css.js.map +1 -1
- package/src/express/scale-medium.css.dev.js +1 -1
- package/src/express/scale-medium.css.dev.js.map +1 -1
- package/src/express/scale-medium.css.js +3 -3
- package/src/express/scale-medium.css.js.map +1 -1
- package/src/express/theme-core-tokens.css.dev.js +1 -1
- package/src/express/theme-core-tokens.css.dev.js.map +1 -1
- package/src/express/theme-core-tokens.css.js +1 -1
- package/src/express/theme-core-tokens.css.js.map +1 -1
- package/src/express/theme-dark.css.dev.js +1 -1
- package/src/express/theme-dark.css.dev.js.map +1 -1
- package/src/express/theme-dark.css.js +1 -1
- package/src/express/theme-dark.css.js.map +1 -1
- package/src/express/theme-light.css.dev.js +1 -1
- package/src/express/theme-light.css.dev.js.map +1 -1
- package/src/express/theme-light.css.js +1 -1
- package/src/express/theme-light.css.js.map +1 -1
- package/src/express/theme.css.dev.js +1 -1
- package/src/express/theme.css.dev.js.map +1 -1
- package/src/express/theme.css.js +1 -1
- package/src/express/theme.css.js.map +1 -1
- package/src/scale-large-core-tokens.css.dev.js +1 -1
- package/src/scale-large-core-tokens.css.dev.js.map +1 -1
- package/src/scale-large-core-tokens.css.js +1 -1
- package/src/scale-large-core-tokens.css.js.map +1 -1
- package/src/scale-large.css.dev.js +1 -1
- package/src/scale-large.css.dev.js.map +1 -1
- package/src/scale-large.css.js +3 -3
- package/src/scale-large.css.js.map +1 -1
- package/src/scale-medium-core-tokens.css.dev.js +1 -1
- package/src/scale-medium-core-tokens.css.dev.js.map +1 -1
- package/src/scale-medium-core-tokens.css.js +1 -1
- package/src/scale-medium-core-tokens.css.js.map +1 -1
- package/src/scale-medium.css.dev.js +1 -1
- package/src/scale-medium.css.dev.js.map +1 -1
- package/src/scale-medium.css.js +3 -3
- package/src/scale-medium.css.js.map +1 -1
- package/src/spectrum-two/scale-large-core-tokens.css.dev.js +1 -1
- package/src/spectrum-two/scale-large-core-tokens.css.dev.js.map +1 -1
- package/src/spectrum-two/scale-large-core-tokens.css.js +1 -1
- package/src/spectrum-two/scale-large-core-tokens.css.js.map +1 -1
- package/src/spectrum-two/scale-medium-core-tokens.css.dev.js +1 -1
- package/src/spectrum-two/scale-medium-core-tokens.css.dev.js.map +1 -1
- package/src/spectrum-two/scale-medium-core-tokens.css.js +1 -1
- package/src/spectrum-two/scale-medium-core-tokens.css.js.map +1 -1
- package/src/spectrum-two/theme-core-tokens.css.dev.js +1 -1
- package/src/spectrum-two/theme-core-tokens.css.dev.js.map +1 -1
- package/src/spectrum-two/theme-core-tokens.css.js +1 -1
- package/src/spectrum-two/theme-core-tokens.css.js.map +1 -1
- package/src/spectrum-two/theme-dark-core-tokens.css.dev.js +1 -1
- package/src/spectrum-two/theme-dark-core-tokens.css.dev.js.map +1 -1
- package/src/spectrum-two/theme-dark-core-tokens.css.js +1 -1
- package/src/spectrum-two/theme-dark-core-tokens.css.js.map +1 -1
- package/src/spectrum-two/theme-light-core-tokens.css.dev.js +1 -1
- package/src/spectrum-two/theme-light-core-tokens.css.dev.js.map +1 -1
- package/src/spectrum-two/theme-light-core-tokens.css.js +1 -1
- package/src/spectrum-two/theme-light-core-tokens.css.js.map +1 -1
- package/src/spectrum-two/theme.css.dev.js +1 -1
- package/src/spectrum-two/theme.css.dev.js.map +1 -1
- package/src/spectrum-two/theme.css.js +1 -1
- package/src/spectrum-two/theme.css.js.map +1 -1
- package/src/theme-core-tokens.css.dev.js +1 -1
- package/src/theme-core-tokens.css.dev.js.map +1 -1
- package/src/theme-core-tokens.css.js +1 -1
- package/src/theme-core-tokens.css.js.map +1 -1
- package/src/theme-interfaces.d.ts +7 -0
- package/src/theme-interfaces.dev.js.map +1 -1
- package/src/theme-interfaces.js.map +1 -1
- package/src/theme.css.dev.js +1 -1
- package/src/theme.css.dev.js.map +1 -1
- package/src/theme.css.js +3 -3
- package/src/theme.css.js.map +1 -1
- package/src/typography.css.dev.js +1 -1
- package/src/typography.css.dev.js.map +1 -1
- package/src/typography.css.js +1 -1
- package/src/typography.css.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-rc.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -237,8 +237,8 @@
|
|
|
237
237
|
"lit-html"
|
|
238
238
|
],
|
|
239
239
|
"dependencies": {
|
|
240
|
-
"@spectrum-web-components/base": "^0.
|
|
241
|
-
"@spectrum-web-components/styles": "^0.
|
|
240
|
+
"@spectrum-web-components/base": "^1.0.0-rc.0",
|
|
241
|
+
"@spectrum-web-components/styles": "^1.0.0-rc.0"
|
|
242
242
|
},
|
|
243
243
|
"types": "./src/index.d.ts",
|
|
244
244
|
"customElements": "custom-elements.json",
|
|
@@ -265,5 +265,5 @@
|
|
|
265
265
|
"./src/spectrum-two/themes.js",
|
|
266
266
|
"./src/spectrum-two/themes-*.js"
|
|
267
267
|
],
|
|
268
|
-
"gitHead": "
|
|
268
|
+
"gitHead": "24a3e0d1d0ead33c41454223b290a258b75d3111"
|
|
269
269
|
}
|
package/src/Theme.d.ts
CHANGED
|
@@ -60,22 +60,7 @@ export declare class Theme extends HTMLElement implements ThemeKindProvider {
|
|
|
60
60
|
private get styles();
|
|
61
61
|
private static get template();
|
|
62
62
|
constructor();
|
|
63
|
-
/**
|
|
64
|
-
* Stores system context consumers and their associated callbacks.
|
|
65
|
-
*
|
|
66
|
-
* This Map associates each consumer component (HTMLElement) with a tuple containing:
|
|
67
|
-
* - The `SystemContextCallback` function to be invoked with the system context.
|
|
68
|
-
* - An `unsubscribe` function to remove the consumer from the Map when it's no longer needed.
|
|
69
|
-
*/
|
|
70
63
|
private _systemContextConsumers;
|
|
71
|
-
/**
|
|
72
|
-
* Handles the 'sp-system-context' event dispatched by descendant components requesting the system context.
|
|
73
|
-
*
|
|
74
|
-
* This method registers the requesting component's callback and provides the current system context to it.
|
|
75
|
-
* It also manages the unsubscribe mechanism to clean up when the component is disconnected.
|
|
76
|
-
*
|
|
77
|
-
* @param event - The custom event containing the callback function to provide the system context.
|
|
78
|
-
*/
|
|
79
64
|
private _handleSystemContext;
|
|
80
65
|
updateComplete: Promise<boolean>;
|
|
81
66
|
private __resolve;
|
|
@@ -91,13 +76,6 @@ export declare class Theme extends HTMLElement implements ThemeKindProvider {
|
|
|
91
76
|
static registerThemeFragment(name: FragmentName, kind: FragmentType, styles: CSSResultGroup): void;
|
|
92
77
|
private _contextConsumers;
|
|
93
78
|
private _provideContext;
|
|
94
|
-
/**
|
|
95
|
-
* Provides the current system context to all registered consumers.
|
|
96
|
-
*
|
|
97
|
-
* This method iterates over all registered system context consumers and invokes their callbacks,
|
|
98
|
-
* passing the current system variant and the unsubscribe function. This ensures that any component
|
|
99
|
-
* consuming the system context receives the updated system variant when the `system` (or `theme`) attribute changes.
|
|
100
|
-
*/
|
|
101
79
|
private _provideSystemContext;
|
|
102
80
|
private _handleContextPresence;
|
|
103
81
|
}
|
package/src/Theme.dev.js
CHANGED
|
@@ -12,13 +12,6 @@ const _Theme = class _Theme extends HTMLElement {
|
|
|
12
12
|
this._system = "spectrum";
|
|
13
13
|
this._color = "";
|
|
14
14
|
this._scale = "";
|
|
15
|
-
/**
|
|
16
|
-
* Stores system context consumers and their associated callbacks.
|
|
17
|
-
*
|
|
18
|
-
* This Map associates each consumer component (HTMLElement) with a tuple containing:
|
|
19
|
-
* - The `SystemContextCallback` function to be invoked with the system context.
|
|
20
|
-
* - An `unsubscribe` function to remove the consumer from the Map when it's no longer needed.
|
|
21
|
-
*/
|
|
22
15
|
this._systemContextConsumers = /* @__PURE__ */ new Map();
|
|
23
16
|
this.trackedChildren = /* @__PURE__ */ new Set();
|
|
24
17
|
this._updateRequested = false;
|
|
@@ -228,14 +221,6 @@ const _Theme = class _Theme extends HTMLElement {
|
|
|
228
221
|
}
|
|
229
222
|
return this.templateElement;
|
|
230
223
|
}
|
|
231
|
-
/**
|
|
232
|
-
* Handles the 'sp-system-context' event dispatched by descendant components requesting the system context.
|
|
233
|
-
*
|
|
234
|
-
* This method registers the requesting component's callback and provides the current system context to it.
|
|
235
|
-
* It also manages the unsubscribe mechanism to clean up when the component is disconnected.
|
|
236
|
-
*
|
|
237
|
-
* @param event - The custom event containing the callback function to provide the system context.
|
|
238
|
-
*/
|
|
239
224
|
_handleSystemContext(event) {
|
|
240
225
|
event.stopPropagation();
|
|
241
226
|
const target = event.composedPath()[0];
|
|
@@ -312,14 +297,6 @@ const _Theme = class _Theme extends HTMLElement {
|
|
|
312
297
|
([callback, unsubscribe]) => callback(this.lang, unsubscribe)
|
|
313
298
|
);
|
|
314
299
|
}
|
|
315
|
-
/**
|
|
316
|
-
* Provides the current system context to all registered consumers.
|
|
317
|
-
*
|
|
318
|
-
* This method iterates over all registered system context consumers and invokes their callbacks,
|
|
319
|
-
* passing the current system variant and the unsubscribe function. This ensures that any component
|
|
320
|
-
* consuming the system context receives the updated system variant when the `system` (or `theme`) attribute changes.
|
|
321
|
-
*/
|
|
322
|
-
/* c8 ignore next 5 */
|
|
323
300
|
_provideSystemContext() {
|
|
324
301
|
this._systemContextConsumers.forEach(
|
|
325
302
|
([callback, unsubscribe]) => callback(this.system, unsubscribe)
|
package/src/Theme.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Theme.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { CSSResult, CSSResultGroup } from '@spectrum-web-components/base';\nimport { version } from '@spectrum-web-components/base/src/version.js';\nimport {\n Color,\n COLOR_VALUES,\n FragmentMap,\n FragmentName,\n FragmentType,\n ProvideLang,\n Scale,\n SCALE_VALUES,\n SettableFragmentTypes,\n ShadowRootWithAdoptedStyleSheets,\n SYSTEM_VARIANT_VALUES,\n SystemContextCallback,\n SystemVariant,\n ThemeFragmentMap,\n ThemeKindProvider,\n} from './theme-interfaces.dev.js'\nexport type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };\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 static VERSION = version;\n\n static get observedAttributes(): string[] {\n return [\n 'color',\n 'scale',\n 'lang',\n 'dir',\n 'system',\n /* deprecated attributes, but still observing */\n 'theme',\n ];\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 /* c8 ignore next 3 */\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 /* c8 ignore next 3 */\n } else if (attrName === 'lang' && !!value) {\n this.lang = value;\n this._provideContext();\n } else if (attrName === 'theme') {\n this.theme = value as SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'system') {\n this.system = value as SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'dir') {\n this.dir = value as 'ltr' | 'rtl' | '';\n }\n }\n private requestUpdate(): void {\n this.shouldAdoptStyles();\n }\n\n public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n private _system: SystemVariant | '' = 'spectrum';\n /**\n * The Spectrum system 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 system(): SystemVariant | '' {\n const systemFragments = Theme.themeFragmentsByKind.get('system');\n const { name } =\n (systemFragments && systemFragments.get('default')) || {};\n return this._system || (name as SystemVariant) || '';\n }\n\n set system(newValue: SystemVariant | '') {\n if (newValue === this._system) return;\n const system =\n !!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)\n ? newValue\n : this.system;\n if (system !== this._system) {\n this._system = system;\n this.requestUpdate();\n }\n if (system) {\n this.setAttribute('system', system);\n /* c8 ignore next 3 */\n } else {\n this.removeAttribute('system');\n }\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n get theme(): SystemVariant | '' {\n /* c8 ignore next 3 */\n if (!this.system) {\n this.removeAttribute('system');\n }\n return this.system;\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n set theme(newValue: SystemVariant | '') {\n this.system = newValue;\n this.requestUpdate();\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 && COLOR_VALUES.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 /* c8 ignore next 3 */\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 && SCALE_VALUES.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 /* c8 ignore next 3 */\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 &&\n kind !== 'theme' &&\n kind !== 'system' &&\n this.theme !== 'spectrum' &&\n this.system !== 'spectrum'\n ? fragments.get(`${name}-${this.system}`)\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 const themeFragmentsByKind = Theme.themeFragmentsByKind;\n\n checkForIssues(\n this,\n this.system,\n this.color,\n this.scale,\n this.hasAttribute('theme'),\n themeFragmentsByKind\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-language-context',\n this._handleContextPresence as EventListener\n );\n this.addEventListener(\n 'sp-system-context',\n this._handleSystemContext as EventListener\n );\n\n this.updateComplete = this.__createDeferredPromise();\n }\n\n /**\n * Stores system context consumers and their associated callbacks.\n *\n * This Map associates each consumer component (HTMLElement) with a tuple containing:\n * - The `SystemContextCallback` function to be invoked with the system context.\n * - An `unsubscribe` function to remove the consumer from the Map when it's no longer needed.\n */\n private _systemContextConsumers = new Map<\n HTMLElement,\n [SystemContextCallback, () => void]\n >();\n\n /**\n * Handles the 'sp-system-context' event dispatched by descendant components requesting the system context.\n *\n * This method registers the requesting component's callback and provides the current system context to it.\n * It also manages the unsubscribe mechanism to clean up when the component is disconnected.\n *\n * @param event - The custom event containing the callback function to provide the system context.\n */\n private _handleSystemContext(\n event: CustomEvent<{ callback: SystemContextCallback }>\n ): void {\n event.stopPropagation();\n\n const target = event.composedPath()[0] as HTMLElement;\n\n /* c8 ignore next 4 */\n // Avoid duplicate registrations\n if (this._systemContextConsumers.has(target)) {\n return;\n }\n\n // Create an unsubscribe function\n const unsubscribe: () => void = () =>\n this._systemContextConsumers.delete(target);\n\n // Store the callback and unsubscribe function\n this._systemContextConsumers.set(target, [\n event.detail.callback,\n unsubscribe,\n ]);\n\n // Provide the context data\n const [callback] = this._systemContextConsumers.get(target) || [];\n if (callback) {\n callback(this.system, unsubscribe);\n }\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 protected connectedCallback(): void {\n // Note, first update/render handles styleElement so we only call this if\n // connected after first update.\n this.shouldAdoptStyles();\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;\n const styleSheets: CSSStyleSheet[] = [];\n for (const style of styles) {\n styleSheets.push((style as CSSResult).styleSheet!);\n }\n this.shadowRoot.adoptedStyleSheets = styleSheets;\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 /* c8 ignore next 5 */\n private _provideContext(): void {\n this._contextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.lang, unsubscribe)\n );\n }\n\n /**\n * Provides the current system context to all registered consumers.\n *\n * This method iterates over all registered system context consumers and invokes their callbacks,\n * passing the current system variant and the unsubscribe function. This ensures that any component\n * consuming the system context receives the updated system variant when the `system` (or `theme`) attribute changes.\n */\n /* c8 ignore next 5 */\n private _provideSystemContext(): void {\n this._systemContextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.system, unsubscribe)\n );\n }\n\n private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n event.stopPropagation();\n const target = event.composedPath()[0] as HTMLElement;\n /* c8 ignore next 3 */\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\nfunction warnBetaSystem(instance: Theme, value: SystemVariant): void {\n if (window.__swc.DEBUG && value === 'spectrum-two') {\n window.__swc.warn(\n instance,\n 'You are currently using the beta version of the Spectrum Two system. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.',\n 'https://s2.spectrum.adobe.com/',\n { level: 'high' }\n );\n }\n}\n\nfunction checkForIssues(\n instance: Theme,\n system: SystemVariant | '',\n color: Color | '',\n scale: Scale | '',\n hasThemeAttribute: boolean,\n themeFragmentsByKind: ThemeFragmentMap\n): void {\n if (window.__swc.DEBUG) {\n const issues: string[] = [];\n const checkForAttribute = (\n name: 'system' | 'color' | 'scale',\n resolvedValue: string,\n actualValue: string | null\n ): void => {\n const systemModifier =\n system && system !== 'spectrum' ? `-${system}` : '';\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 !themeFragmentsByKind\n .get(name)\n ?.get(\n resolvedValue +\n (name === 'system' ? '' : systemModifier)\n )\n ) {\n issues.push(\n `You have set \"${name}='${resolvedValue}'\" but the associated system fragment has not been loaded.`\n );\n }\n };\n\n if (hasThemeAttribute) {\n issues.push(\n `DEPRECATION NOTICE: the \"theme\" attribute has been deprecated in favor of \"system\". For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n if (['lightest', 'darkest'].includes(color || '')) {\n issues.push(\n `DEPRECATION NOTICE: Color \"lightest\" and \"darkest\" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n checkForAttribute('system', system, instance.getAttribute('system'));\n checkForAttribute('color', color, instance.getAttribute('color'));\n checkForAttribute('scale', scale, instance.getAttribute('scale'));\n\n if (issues.length) {\n window.__swc.warn(\n instance,\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 { issues }\n );\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";AAaA,SAAS,eAAe;AACxB;AAAA,EAEI;AAAA,EAMA;AAAA,EAGA;AAAA,OAKG;AAQA,MAAM,SAAN,MAAM,eAAc,YAAyC;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { CSSResult, CSSResultGroup } from '@spectrum-web-components/base';\nimport { version } from '@spectrum-web-components/base/src/version.js';\nimport {\n Color,\n COLOR_VALUES,\n FragmentMap,\n FragmentName,\n FragmentType,\n ProvideLang,\n Scale,\n SCALE_VALUES,\n SettableFragmentTypes,\n ShadowRootWithAdoptedStyleSheets,\n SYSTEM_VARIANT_VALUES,\n SystemContextCallback,\n SystemVariant,\n ThemeFragmentMap,\n ThemeKindProvider,\n} from './theme-interfaces.dev.js'\nexport type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };\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 static VERSION = version;\n\n static get observedAttributes(): string[] {\n return [\n 'color',\n 'scale',\n 'lang',\n 'dir',\n 'system',\n /* deprecated attributes, but still observing */\n 'theme',\n ];\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 /* c8 ignore next 3 */\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 SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'system') {\n this.system = value as SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'dir') {\n this.dir = value as 'ltr' | 'rtl' | '';\n }\n }\n private requestUpdate(): void {\n this.shouldAdoptStyles();\n }\n\n public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n private _system: SystemVariant | '' = 'spectrum';\n /**\n * The Spectrum system 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 system(): SystemVariant | '' {\n const systemFragments = Theme.themeFragmentsByKind.get('system');\n const { name } =\n (systemFragments && systemFragments.get('default')) || {};\n return this._system || (name as SystemVariant) || '';\n }\n\n set system(newValue: SystemVariant | '') {\n if (newValue === this._system) return;\n const system =\n !!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)\n ? newValue\n : this.system;\n if (system !== this._system) {\n this._system = system;\n this.requestUpdate();\n }\n if (system) {\n this.setAttribute('system', system);\n /* c8 ignore next 3 */\n } else {\n this.removeAttribute('system');\n }\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n get theme(): SystemVariant | '' {\n /* c8 ignore next 3 */\n if (!this.system) {\n this.removeAttribute('system');\n }\n return this.system;\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n set theme(newValue: SystemVariant | '') {\n this.system = newValue;\n this.requestUpdate();\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 && COLOR_VALUES.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 && SCALE_VALUES.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 /* c8 ignore next 3 */\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 &&\n kind !== 'theme' &&\n kind !== 'system' &&\n this.theme !== 'spectrum' &&\n this.system !== 'spectrum'\n ? fragments.get(`${name}-${this.system}`)\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 const themeFragmentsByKind = Theme.themeFragmentsByKind;\n\n checkForIssues(\n this,\n this.system,\n this.color,\n this.scale,\n this.hasAttribute('theme'),\n themeFragmentsByKind\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-language-context',\n this._handleContextPresence as EventListener\n );\n this.addEventListener(\n 'sp-system-context',\n this._handleSystemContext as EventListener\n );\n\n this.updateComplete = this.__createDeferredPromise();\n }\n\n private _systemContextConsumers = new Map<\n HTMLElement,\n [SystemContextCallback, () => void]\n >();\n\n private _handleSystemContext(\n event: CustomEvent<{ callback: SystemContextCallback }>\n ): void {\n event.stopPropagation();\n\n const target = event.composedPath()[0] as HTMLElement;\n\n // Avoid duplicate registrations\n if (this._systemContextConsumers.has(target)) {\n return;\n }\n\n // Create an unsubscribe function\n const unsubscribe: () => void = () =>\n this._systemContextConsumers.delete(target);\n\n // Store the callback and unsubscribe function\n this._systemContextConsumers.set(target, [\n event.detail.callback,\n unsubscribe,\n ]);\n\n // Provide the context data\n const [callback] = this._systemContextConsumers.get(target) || [];\n if (callback) {\n callback(this.system, unsubscribe);\n }\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 protected connectedCallback(): void {\n // Note, first update/render handles styleElement so we only call this if\n // connected after first update.\n this.shouldAdoptStyles();\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;\n const styleSheets: CSSStyleSheet[] = [];\n for (const style of styles) {\n styleSheets.push((style as CSSResult).styleSheet!);\n }\n this.shadowRoot.adoptedStyleSheets = styleSheets;\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 /* c8 ignore next 5 */\n private _provideContext(): void {\n this._contextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.lang, unsubscribe)\n );\n }\n\n private _provideSystemContext(): void {\n this._systemContextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.system, unsubscribe)\n );\n }\n\n private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n event.stopPropagation();\n const target = event.composedPath()[0] as HTMLElement;\n /* c8 ignore next 3 */\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\nfunction warnBetaSystem(instance: Theme, value: SystemVariant): void {\n if (window.__swc.DEBUG && value === 'spectrum-two') {\n window.__swc.warn(\n instance,\n 'You are currently using the beta version of the Spectrum Two system. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.',\n 'https://s2.spectrum.adobe.com/',\n { level: 'high' }\n );\n }\n}\n\nfunction checkForIssues(\n instance: Theme,\n system: SystemVariant | '',\n color: Color | '',\n scale: Scale | '',\n hasThemeAttribute: boolean,\n themeFragmentsByKind: ThemeFragmentMap\n): void {\n if (window.__swc.DEBUG) {\n const issues: string[] = [];\n const checkForAttribute = (\n name: 'system' | 'color' | 'scale',\n resolvedValue: string,\n actualValue: string | null\n ): void => {\n const systemModifier =\n system && system !== 'spectrum' ? `-${system}` : '';\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 !themeFragmentsByKind\n .get(name)\n ?.get(\n resolvedValue +\n (name === 'system' ? '' : systemModifier)\n )\n ) {\n issues.push(\n `You have set \"${name}='${resolvedValue}'\" but the associated system fragment has not been loaded.`\n );\n }\n };\n\n if (hasThemeAttribute) {\n issues.push(\n `DEPRECATION NOTICE: the \"theme\" attribute has been deprecated in favor of \"system\". For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n if (['lightest', 'darkest'].includes(color || '')) {\n issues.push(\n `DEPRECATION NOTICE: Color \"lightest\" and \"darkest\" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n checkForAttribute('system', system, instance.getAttribute('system'));\n checkForAttribute('color', color, instance.getAttribute('color'));\n checkForAttribute('scale', scale, instance.getAttribute('scale'));\n\n if (issues.length) {\n window.__swc.warn(\n instance,\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 { issues }\n );\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAaA,SAAS,eAAe;AACxB;AAAA,EAEI;AAAA,EAMA;AAAA,EAGA;AAAA,OAKG;AAQA,MAAM,SAAN,MAAM,eAAc,YAAyC;AAAA,EAgQhE,cAAc;AACV,UAAM;AA9OV,gBAA2B;AAuD3B,SAAQ,UAA8B;AAoDtC,SAAQ,SAAqB;AAiC7B,SAAQ,SAAqB;AAmH7B,SAAQ,0BAA0B,oBAAI,IAGpC;AA8EF,SAAQ,kBAAoC,oBAAI,IAAI;AAEpD,SAAQ,mBAAmB;AAqC3B,SAAQ,oBAAoB,oBAAI,IAG9B;AA3IE,SAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAClC,UAAM,OAAO,SAAS,WAAW,OAAM,SAAS,SAAS,IAAI;AAC7D,SAAK,WAAW,YAAY,IAAI;AAChC,SAAK,kBAAkB;AACvB,SAAK;AAAA,MACD;AAAA,MACA,KAAK;AAAA,IACT;AACA,SAAK;AAAA,MACD;AAAA,MACA,KAAK;AAAA,IACT;AAEA,SAAK,iBAAiB,KAAK,wBAAwB;AAAA,EACvD;AAAA,EAzQA,WAAW,qBAA+B;AACtC,WAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,IACJ;AAAA,EACJ;AAAA,EAIA,IAAa,IAAI,KAAyB;AACtC,QAAI,QAAQ,KAAK,IAAK;AACtB,SAAK,aAAa,OAAO,GAAG;AAC5B,SAAK,OAAO;AACZ,UAAM,YAAY,QAAQ,QAAQ,MAAM;AAExC,SAAK,gBAAgB,QAAQ,CAAC,OAAO;AACjC,SAAG,aAAa,OAAO,SAAS;AAAA,IACpC,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAa,MAA0B;AACnC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEU,yBACN,UACA,KACA,OACI;AACJ,QAAI,QAAQ,OAAO;AACf;AAAA,IACJ;AACA,QAAI,aAAa,SAAS;AACtB,WAAK,QAAQ;AAAA,IACjB,WAAW,aAAa,SAAS;AAC7B,WAAK,QAAQ;AAAA,IACjB,WAAW,aAAa,UAAU,CAAC,CAAC,OAAO;AACvC,WAAK,OAAO;AACZ,WAAK,gBAAgB;AAAA,IACzB,WAAW,aAAa,SAAS;AAC7B,WAAK,QAAQ;AACb,WAAK,sBAAsB;AAC3B,qBAAe,MAAM,KAAsB;AAAA,IAC/C,WAAW,aAAa,UAAU;AAC9B,WAAK,SAAS;AACd,WAAK,sBAAsB;AAC3B,qBAAe,MAAM,KAAsB;AAAA,IAC/C,WAAW,aAAa,OAAO;AAC3B,WAAK,MAAM;AAAA,IACf;AAAA,EACJ;AAAA,EACQ,gBAAsB;AAC1B,SAAK,kBAAkB;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,IAAI,SAA6B;AAC7B,UAAM,kBAAkB,OAAM,qBAAqB,IAAI,QAAQ;AAC/D,UAAM,EAAE,KAAK,IACR,mBAAmB,gBAAgB,IAAI,SAAS,KAAM,CAAC;AAC5D,WAAO,KAAK,WAAY,QAA0B;AAAA,EACtD;AAAA,EAEA,IAAI,OAAO,UAA8B;AACrC,QAAI,aAAa,KAAK,QAAS;AAC/B,UAAM,SACF,CAAC,CAAC,YAAY,sBAAsB,SAAS,QAAQ,IAC/C,WACA,KAAK;AACf,QAAI,WAAW,KAAK,SAAS;AACzB,WAAK,UAAU;AACf,WAAK,cAAc;AAAA,IACvB;AACA,QAAI,QAAQ;AACR,WAAK,aAAa,UAAU,MAAM;AAAA,IAEtC,OAAO;AACH,WAAK,gBAAgB,QAAQ;AAAA,IACjC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,QAA4B;AAE5B,QAAI,CAAC,KAAK,QAAQ;AACd,WAAK,gBAAgB,QAAQ;AAAA,IACjC;AACA,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM,UAA8B;AACpC,SAAK,SAAS;AACd,SAAK,cAAc;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,IAAI,QAAoB;AACpB,UAAM,iBAAiB,OAAM,qBAAqB,IAAI,OAAO;AAC7D,UAAM,EAAE,KAAK,IACR,kBAAkB,eAAe,IAAI,SAAS,KAAM,CAAC;AAC1D,WAAO,KAAK,UAAW,QAAkB;AAAA,EAC7C;AAAA,EAEA,IAAI,MAAM,UAAsB;AAC5B,QAAI,aAAa,KAAK,OAAQ;AAC9B,UAAM,QACF,CAAC,CAAC,YAAY,aAAa,SAAS,QAAQ,IACtC,WACA,KAAK;AACf,QAAI,UAAU,KAAK,QAAQ;AACvB,WAAK,SAAS;AACd,WAAK,cAAc;AAAA,IACvB;AACA,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,KAAK;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,OAAO;AAAA,IAChC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,IAAI,QAAoB;AACpB,UAAM,iBAAiB,OAAM,qBAAqB,IAAI,OAAO;AAC7D,UAAM,EAAE,KAAK,IACR,kBAAkB,eAAe,IAAI,SAAS,KAAM,CAAC;AAC1D,WAAO,KAAK,UAAW,QAAkB;AAAA,EAC7C;AAAA,EAEA,IAAI,MAAM,UAAsB;AAC5B,QAAI,aAAa,KAAK,OAAQ;AAC9B,UAAM,QACF,CAAC,CAAC,YAAY,aAAa,SAAS,QAAQ,IACtC,WACA,KAAK;AACf,QAAI,UAAU,KAAK,QAAQ;AACvB,WAAK,SAAS;AACd,WAAK,cAAc;AAAA,IACvB;AACA,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,KAAK;AAAA,IAEpC,OAAO;AACH,WAAK,gBAAgB,OAAO;AAAA,IAChC;AAAA,EACJ;AAAA,EAEA,IAAY,SAA2B;AACnC,UAAM,aAA6B;AAAA,MAC/B,GAAG,OAAM,qBAAqB,KAAK;AAAA,IACvC;AACA,UAAM,WAAW,CACb,WACA,MACA,SAC6B;AAC7B,YAAM,gBACF,QACA,SAAS,WACT,SAAS,YACT,KAAK,UAAU,cACf,KAAK,WAAW,aACV,UAAU,IAAI,GAAG,IAAI,IAAI,KAAK,MAAM,EAAE,IACtC,UAAU,IAAI,IAAI;AAE5B,YAAM,oBACF,SAAS,cAAc,CAAC,QAAQ,KAAK,aAAa,IAAI;AAC1D,UAAI,iBAAiB,mBAAmB;AACpC,eAAO,cAAc;AAAA,MACzB;AACA;AAAA,IACJ;AACA,UAAM,SAAS,WAAW,OAAO,CAAC,KAAK,SAAS;AAC5C,YAAM,gBAAgB,OAAM,qBAAqB;AAAA,QAC7C;AAAA,MACJ;AACA,UAAI;AACJ,UAAI,SAAS,SAAS,SAAS,QAAQ;AACnC,gBAAQ,SAAS,eAAe,IAAI;AAAA,MACxC,OAAO;AACH,cAAM,EAAE,CAAC,IAAI,GAAG,KAAK,IAAI;AACzB,gBAAQ,SAAS,eAA6B,MAAM,IAAI;AAAA,MAC5D;AACA,UAAI,OAAO;AACP,YAAI,KAAK,KAAK;AAAA,MAClB;AACA,aAAO;AAAA,IACX,GAAG,CAAC,CAAqB;AACzB,UAAM,uBAAuB,OAAM;AAEnC;AAAA,MACI;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK,aAAa,OAAO;AAAA,MACzB;AAAA,IACJ;AAEA,WAAO,CAAC,GAAG,MAAM;AAAA,EACrB;AAAA,EAEA,WAAmB,WAAgC;AAC/C,QAAI,CAAC,KAAK,iBAAiB;AACvB,WAAK,kBAAkB,SAAS,cAAc,UAAU;AACxD,WAAK,gBAAgB,YAAY;AAAA,IACrC;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,EAyBQ,qBACJ,OACI;AACJ,UAAM,gBAAgB;AAEtB,UAAM,SAAS,MAAM,aAAa,EAAE,CAAC;AAGrC,QAAI,KAAK,wBAAwB,IAAI,MAAM,GAAG;AAC1C;AAAA,IACJ;AAGA,UAAM,cAA0B,MAC5B,KAAK,wBAAwB,OAAO,MAAM;AAG9C,SAAK,wBAAwB,IAAI,QAAQ;AAAA,MACrC,MAAM,OAAO;AAAA,MACb;AAAA,IACJ,CAAC;AAGD,UAAM,CAAC,QAAQ,IAAI,KAAK,wBAAwB,IAAI,MAAM,KAAK,CAAC;AAChE,QAAI,UAAU;AACV,eAAS,KAAK,QAAQ,WAAW;AAAA,IACrC;AAAA,EACJ;AAAA,EAKQ,0BAA4C;AAChD,WAAO,IAAI,QAAQ,CAAC,YAAY;AAC5B,WAAK,YAAY;AAAA,IACrB,CAAC;AAAA,EACL;AAAA,EAEU,oBAA0B;AAGhC,SAAK,kBAAkB;AAGvB,WAAM,UAAU,IAAI,IAAI;AACxB,QAAI,CAAC,KAAK,aAAa,KAAK,GAAG;AAC3B,UAAI,YAAc,KAAqB,gBACnC,KAAK;AACT,aACI,cAAc,SAAS,mBACvB,EAAE,qBAAqB,SACzB;AACE,oBAAc,UAA0B;AAAA,QACpC,UAAU;AAAA,QACT,UAAyB;AAAA,MAIlC;AACA,WAAK,MAAM,UAAU,QAAQ,QAAQ,UAAU,MAAM;AAAA,IACzD;AAAA,EACJ;AAAA,EAEU,uBAA6B;AAEnC,WAAM,UAAU,OAAO,IAAI;AAAA,EAC/B;AAAA,EAEO,8BAA8B,IAAuB;AACxD,SAAK,gBAAgB,IAAI,EAAE;AAAA,EAC/B;AAAA,EAEO,6BAA6B,IAAuB;AACvD,SAAK,gBAAgB,OAAO,EAAE;AAAA,EAClC;AAAA,EAMA,MAAc,oBAAmC;AAC7C,QAAI,CAAC,KAAK,kBAAkB;AACxB,WAAK,iBAAiB,KAAK,wBAAwB;AACnD,WAAK,mBAAmB;AACxB,WAAK,mBAAmB,MAAM;AAC9B,WAAK,YAAY;AACjB,WAAK,UAAU,IAAI;AAAA,IACvB;AAAA,EACJ;AAAA,EAEU,cAAoB;AAC1B,UAAM,SAAS,KAAK;AACpB,UAAM,cAA+B,CAAC;AACtC,eAAW,SAAS,QAAQ;AACxB,kBAAY,KAAM,MAAoB,UAAW;AAAA,IACrD;AACA,SAAK,WAAW,qBAAqB;AAAA,EACzC;AAAA,EAEA,OAAO,sBACH,MACA,MACA,QACI;AACJ,UAAM,cAAc,OAAM,qBAAqB,IAAI,IAAI,KAAK,oBAAI,IAAI;AACpE,QAAI,YAAY,SAAS,GAAG;AACxB,aAAM,qBAAqB,IAAI,MAAM,WAAW;AAEhD,kBAAY,IAAI,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,aAAM,iBAAiB,IAAI,IAAI;AAAA,IACnC;AACA,gBAAY,IAAI,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,WAAM,UAAU,QAAQ,CAAC,aAAa,SAAS,kBAAkB,CAAC;AAAA,EACtE;AAAA;AAAA,EAQQ,kBAAwB;AAC5B,SAAK,kBAAkB;AAAA,MAAQ,CAAC,CAAC,UAAU,WAAW,MAClD,SAAS,KAAK,MAAM,WAAW;AAAA,IACnC;AAAA,EACJ;AAAA,EAEQ,wBAA8B;AAClC,SAAK,wBAAwB;AAAA,MAAQ,CAAC,CAAC,UAAU,WAAW,MACxD,SAAS,KAAK,QAAQ,WAAW;AAAA,IACrC;AAAA,EACJ;AAAA,EAEQ,uBAAuB,OAAuC;AAClE,UAAM,gBAAgB;AACtB,UAAM,SAAS,MAAM,aAAa,EAAE,CAAC;AAErC,QAAI,KAAK,kBAAkB,IAAI,MAAM,GAAG;AACpC;AAAA,IACJ;AACA,SAAK,kBAAkB,IAAI,QAAQ;AAAA,MAC/B,MAAM,OAAO;AAAA,MACb,MAAM,KAAK,kBAAkB,OAAO,MAAM;AAAA,IAC9C,CAAC;AACD,UAAM,CAAC,UAAU,WAAW,IACxB,KAAK,kBAAkB,IAAI,MAAM,KAAK,CAAC;AAC3C,QAAI,YAAY,aAAa;AACzB;AAAA,QACI,KAAK,QACD,SAAS,gBAAgB,QACzB,UAAU;AAAA,QACd;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;AAlba,OACM,uBAAyC,oBAAI,IAAI;AADvD,OAEM,mBAAsC,oBAAI,IAAI,CAAC,UAAU,CAAC;AAFhE,OAIM,YAAwB,oBAAI,IAAI;AAJtC,OAKF,UAAU;AALd,WAAM,QAAN;AAobP,SAAS,eAAe,UAAiB,OAA4B;AACjE,MAA0B,UAAU,gBAAgB;AAChD,WAAO,MAAM;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,EAAE,OAAO,OAAO;AAAA,IACpB;AAAA,EACJ;AACJ;AAEA,SAAS,eACL,UACA,QACA,OACA,OACA,mBACA,sBACI;AACJ,MAAI,MAAoB;AACpB,UAAM,SAAmB,CAAC;AAC1B,UAAM,oBAAoB,CACtB,MACA,eACA,gBACO;AAnfnB;AAofY,YAAM,iBACF,UAAU,WAAW,aAAa,IAAI,MAAM,KAAK;AACrD,UAAI,CAAC,eAAe;AAChB,eAAO;AAAA,UACH,oCAAoC,IAAI;AAAA,QAC5C;AAAA,MACJ,WAAW,CAAC,aAAa;AACrB,eAAO;AAAA,UACH,oCAAoC,IAAI,oCAAoC,aAAa;AAAA,QAC7F;AAAA,MACJ,WACI,GAAC,0BACI,IAAI,IAAI,MADZ,mBAEK;AAAA,QACE,iBACK,SAAS,WAAW,KAAK;AAAA,UAExC;AACE,eAAO;AAAA,UACH,iBAAiB,IAAI,KAAK,aAAa;AAAA,QAC3C;AAAA,MACJ;AAAA,IACJ;AAEA,QAAI,mBAAmB;AACnB,aAAO;AAAA,QACH;AAAA,MACJ;AAAA,IACJ;AACA,QAAI,CAAC,YAAY,SAAS,EAAE,SAAS,SAAS,EAAE,GAAG;AAC/C,aAAO;AAAA,QACH;AAAA,MACJ;AAAA,IACJ;AACA,sBAAkB,UAAU,QAAQ,SAAS,aAAa,QAAQ,CAAC;AACnE,sBAAkB,SAAS,OAAO,SAAS,aAAa,OAAO,CAAC;AAChE,sBAAkB,SAAS,OAAO,SAAS,aAAa,OAAO,CAAC;AAEhE,QAAI,OAAO,QAAQ;AACf,aAAO,MAAM;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,EAAE,OAAO;AAAA,MACb;AAAA,IACJ;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Theme.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Theme.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { CSSResult, CSSResultGroup } from '@spectrum-web-components/base';\nimport { version } from '@spectrum-web-components/base/src/version.js';\nimport {\n Color,\n COLOR_VALUES,\n FragmentMap,\n FragmentName,\n FragmentType,\n ProvideLang,\n Scale,\n SCALE_VALUES,\n SettableFragmentTypes,\n ShadowRootWithAdoptedStyleSheets,\n SYSTEM_VARIANT_VALUES,\n SystemContextCallback,\n SystemVariant,\n ThemeFragmentMap,\n ThemeKindProvider,\n} from './theme-interfaces.js';\nexport type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };\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 static VERSION = version;\n\n static get observedAttributes(): string[] {\n return [\n 'color',\n 'scale',\n 'lang',\n 'dir',\n 'system',\n /* deprecated attributes, but still observing */\n 'theme',\n ];\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 /* c8 ignore next 3 */\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 /* c8 ignore next 3 */\n } else if (attrName === 'lang' && !!value) {\n this.lang = value;\n this._provideContext();\n } else if (attrName === 'theme') {\n this.theme = value as SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'system') {\n this.system = value as SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'dir') {\n this.dir = value as 'ltr' | 'rtl' | '';\n }\n }\n private requestUpdate(): void {\n this.shouldAdoptStyles();\n }\n\n public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n private _system: SystemVariant | '' = 'spectrum';\n /**\n * The Spectrum system 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 system(): SystemVariant | '' {\n const systemFragments = Theme.themeFragmentsByKind.get('system');\n const { name } =\n (systemFragments && systemFragments.get('default')) || {};\n return this._system || (name as SystemVariant) || '';\n }\n\n set system(newValue: SystemVariant | '') {\n if (newValue === this._system) return;\n const system =\n !!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)\n ? newValue\n : this.system;\n if (system !== this._system) {\n this._system = system;\n this.requestUpdate();\n }\n if (system) {\n this.setAttribute('system', system);\n /* c8 ignore next 3 */\n } else {\n this.removeAttribute('system');\n }\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n get theme(): SystemVariant | '' {\n /* c8 ignore next 3 */\n if (!this.system) {\n this.removeAttribute('system');\n }\n return this.system;\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n set theme(newValue: SystemVariant | '') {\n this.system = newValue;\n this.requestUpdate();\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 && COLOR_VALUES.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 /* c8 ignore next 3 */\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 && SCALE_VALUES.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 /* c8 ignore next 3 */\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 &&\n kind !== 'theme' &&\n kind !== 'system' &&\n this.theme !== 'spectrum' &&\n this.system !== 'spectrum'\n ? fragments.get(`${name}-${this.system}`)\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 const themeFragmentsByKind = Theme.themeFragmentsByKind;\n\n checkForIssues(\n this,\n this.system,\n this.color,\n this.scale,\n this.hasAttribute('theme'),\n themeFragmentsByKind\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-language-context',\n this._handleContextPresence as EventListener\n );\n this.addEventListener(\n 'sp-system-context',\n this._handleSystemContext as EventListener\n );\n\n this.updateComplete = this.__createDeferredPromise();\n }\n\n /**\n * Stores system context consumers and their associated callbacks.\n *\n * This Map associates each consumer component (HTMLElement) with a tuple containing:\n * - The `SystemContextCallback` function to be invoked with the system context.\n * - An `unsubscribe` function to remove the consumer from the Map when it's no longer needed.\n */\n private _systemContextConsumers = new Map<\n HTMLElement,\n [SystemContextCallback, () => void]\n >();\n\n /**\n * Handles the 'sp-system-context' event dispatched by descendant components requesting the system context.\n *\n * This method registers the requesting component's callback and provides the current system context to it.\n * It also manages the unsubscribe mechanism to clean up when the component is disconnected.\n *\n * @param event - The custom event containing the callback function to provide the system context.\n */\n private _handleSystemContext(\n event: CustomEvent<{ callback: SystemContextCallback }>\n ): void {\n event.stopPropagation();\n\n const target = event.composedPath()[0] as HTMLElement;\n\n /* c8 ignore next 4 */\n // Avoid duplicate registrations\n if (this._systemContextConsumers.has(target)) {\n return;\n }\n\n // Create an unsubscribe function\n const unsubscribe: () => void = () =>\n this._systemContextConsumers.delete(target);\n\n // Store the callback and unsubscribe function\n this._systemContextConsumers.set(target, [\n event.detail.callback,\n unsubscribe,\n ]);\n\n // Provide the context data\n const [callback] = this._systemContextConsumers.get(target) || [];\n if (callback) {\n callback(this.system, unsubscribe);\n }\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 protected connectedCallback(): void {\n // Note, first update/render handles styleElement so we only call this if\n // connected after first update.\n this.shouldAdoptStyles();\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;\n const styleSheets: CSSStyleSheet[] = [];\n for (const style of styles) {\n styleSheets.push((style as CSSResult).styleSheet!);\n }\n this.shadowRoot.adoptedStyleSheets = styleSheets;\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 /* c8 ignore next 5 */\n private _provideContext(): void {\n this._contextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.lang, unsubscribe)\n );\n }\n\n /**\n * Provides the current system context to all registered consumers.\n *\n * This method iterates over all registered system context consumers and invokes their callbacks,\n * passing the current system variant and the unsubscribe function. This ensures that any component\n * consuming the system context receives the updated system variant when the `system` (or `theme`) attribute changes.\n */\n /* c8 ignore next 5 */\n private _provideSystemContext(): void {\n this._systemContextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.system, unsubscribe)\n );\n }\n\n private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n event.stopPropagation();\n const target = event.composedPath()[0] as HTMLElement;\n /* c8 ignore next 3 */\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\nfunction warnBetaSystem(instance: Theme, value: SystemVariant): void {\n if (window.__swc.DEBUG && value === 'spectrum-two') {\n window.__swc.warn(\n instance,\n 'You are currently using the beta version of the Spectrum Two system. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.',\n 'https://s2.spectrum.adobe.com/',\n { level: 'high' }\n );\n }\n}\n\nfunction checkForIssues(\n instance: Theme,\n system: SystemVariant | '',\n color: Color | '',\n scale: Scale | '',\n hasThemeAttribute: boolean,\n themeFragmentsByKind: ThemeFragmentMap\n): void {\n if (window.__swc.DEBUG) {\n const issues: string[] = [];\n const checkForAttribute = (\n name: 'system' | 'color' | 'scale',\n resolvedValue: string,\n actualValue: string | null\n ): void => {\n const systemModifier =\n system && system !== 'spectrum' ? `-${system}` : '';\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 !themeFragmentsByKind\n .get(name)\n ?.get(\n resolvedValue +\n (name === 'system' ? '' : systemModifier)\n )\n ) {\n issues.push(\n `You have set \"${name}='${resolvedValue}'\" but the associated system fragment has not been loaded.`\n );\n }\n };\n\n if (hasThemeAttribute) {\n issues.push(\n `DEPRECATION NOTICE: the \"theme\" attribute has been deprecated in favor of \"system\". For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n if (['lightest', 'darkest'].includes(color || '')) {\n issues.push(\n `DEPRECATION NOTICE: Color \"lightest\" and \"darkest\" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n checkForAttribute('system', system, instance.getAttribute('system'));\n checkForAttribute('color', color, instance.getAttribute('color'));\n checkForAttribute('scale', scale, instance.getAttribute('scale'));\n\n if (issues.length) {\n window.__swc.warn(\n instance,\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 { issues }\n );\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "aAaA,OAAS,WAAAA,MAAe,+CACxB,OAEI,gBAAAC,EAMA,gBAAAC,EAGA,yBAAAC,MAKG,wBAQA,MAAMC,EAAN,MAAMA,UAAc,WAAyC,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { CSSResult, CSSResultGroup } from '@spectrum-web-components/base';\nimport { version } from '@spectrum-web-components/base/src/version.js';\nimport {\n Color,\n COLOR_VALUES,\n FragmentMap,\n FragmentName,\n FragmentType,\n ProvideLang,\n Scale,\n SCALE_VALUES,\n SettableFragmentTypes,\n ShadowRootWithAdoptedStyleSheets,\n SYSTEM_VARIANT_VALUES,\n SystemContextCallback,\n SystemVariant,\n ThemeFragmentMap,\n ThemeKindProvider,\n} from './theme-interfaces.js';\nexport type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };\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 static VERSION = version;\n\n static get observedAttributes(): string[] {\n return [\n 'color',\n 'scale',\n 'lang',\n 'dir',\n 'system',\n /* deprecated attributes, but still observing */\n 'theme',\n ];\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 /* c8 ignore next 3 */\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 SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'system') {\n this.system = value as SystemVariant;\n this._provideSystemContext();\n warnBetaSystem(this, value as SystemVariant);\n } else if (attrName === 'dir') {\n this.dir = value as 'ltr' | 'rtl' | '';\n }\n }\n private requestUpdate(): void {\n this.shouldAdoptStyles();\n }\n\n public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n private _system: SystemVariant | '' = 'spectrum';\n /**\n * The Spectrum system 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 system(): SystemVariant | '' {\n const systemFragments = Theme.themeFragmentsByKind.get('system');\n const { name } =\n (systemFragments && systemFragments.get('default')) || {};\n return this._system || (name as SystemVariant) || '';\n }\n\n set system(newValue: SystemVariant | '') {\n if (newValue === this._system) return;\n const system =\n !!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)\n ? newValue\n : this.system;\n if (system !== this._system) {\n this._system = system;\n this.requestUpdate();\n }\n if (system) {\n this.setAttribute('system', system);\n /* c8 ignore next 3 */\n } else {\n this.removeAttribute('system');\n }\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n get theme(): SystemVariant | '' {\n /* c8 ignore next 3 */\n if (!this.system) {\n this.removeAttribute('system');\n }\n return this.system;\n }\n\n /*\n * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.\n */\n set theme(newValue: SystemVariant | '') {\n this.system = newValue;\n this.requestUpdate();\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 && COLOR_VALUES.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 && SCALE_VALUES.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 /* c8 ignore next 3 */\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 &&\n kind !== 'theme' &&\n kind !== 'system' &&\n this.theme !== 'spectrum' &&\n this.system !== 'spectrum'\n ? fragments.get(`${name}-${this.system}`)\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 const themeFragmentsByKind = Theme.themeFragmentsByKind;\n\n checkForIssues(\n this,\n this.system,\n this.color,\n this.scale,\n this.hasAttribute('theme'),\n themeFragmentsByKind\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-language-context',\n this._handleContextPresence as EventListener\n );\n this.addEventListener(\n 'sp-system-context',\n this._handleSystemContext as EventListener\n );\n\n this.updateComplete = this.__createDeferredPromise();\n }\n\n private _systemContextConsumers = new Map<\n HTMLElement,\n [SystemContextCallback, () => void]\n >();\n\n private _handleSystemContext(\n event: CustomEvent<{ callback: SystemContextCallback }>\n ): void {\n event.stopPropagation();\n\n const target = event.composedPath()[0] as HTMLElement;\n\n // Avoid duplicate registrations\n if (this._systemContextConsumers.has(target)) {\n return;\n }\n\n // Create an unsubscribe function\n const unsubscribe: () => void = () =>\n this._systemContextConsumers.delete(target);\n\n // Store the callback and unsubscribe function\n this._systemContextConsumers.set(target, [\n event.detail.callback,\n unsubscribe,\n ]);\n\n // Provide the context data\n const [callback] = this._systemContextConsumers.get(target) || [];\n if (callback) {\n callback(this.system, unsubscribe);\n }\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 protected connectedCallback(): void {\n // Note, first update/render handles styleElement so we only call this if\n // connected after first update.\n this.shouldAdoptStyles();\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;\n const styleSheets: CSSStyleSheet[] = [];\n for (const style of styles) {\n styleSheets.push((style as CSSResult).styleSheet!);\n }\n this.shadowRoot.adoptedStyleSheets = styleSheets;\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 /* c8 ignore next 5 */\n private _provideContext(): void {\n this._contextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.lang, unsubscribe)\n );\n }\n\n private _provideSystemContext(): void {\n this._systemContextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.system, unsubscribe)\n );\n }\n\n private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n event.stopPropagation();\n const target = event.composedPath()[0] as HTMLElement;\n /* c8 ignore next 3 */\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\nfunction warnBetaSystem(instance: Theme, value: SystemVariant): void {\n if (window.__swc.DEBUG && value === 'spectrum-two') {\n window.__swc.warn(\n instance,\n 'You are currently using the beta version of the Spectrum Two system. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.',\n 'https://s2.spectrum.adobe.com/',\n { level: 'high' }\n );\n }\n}\n\nfunction checkForIssues(\n instance: Theme,\n system: SystemVariant | '',\n color: Color | '',\n scale: Scale | '',\n hasThemeAttribute: boolean,\n themeFragmentsByKind: ThemeFragmentMap\n): void {\n if (window.__swc.DEBUG) {\n const issues: string[] = [];\n const checkForAttribute = (\n name: 'system' | 'color' | 'scale',\n resolvedValue: string,\n actualValue: string | null\n ): void => {\n const systemModifier =\n system && system !== 'spectrum' ? `-${system}` : '';\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 !themeFragmentsByKind\n .get(name)\n ?.get(\n resolvedValue +\n (name === 'system' ? '' : systemModifier)\n )\n ) {\n issues.push(\n `You have set \"${name}='${resolvedValue}'\" but the associated system fragment has not been loaded.`\n );\n }\n };\n\n if (hasThemeAttribute) {\n issues.push(\n `DEPRECATION NOTICE: the \"theme\" attribute has been deprecated in favor of \"system\". For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n if (['lightest', 'darkest'].includes(color || '')) {\n issues.push(\n `DEPRECATION NOTICE: Color \"lightest\" and \"darkest\" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`\n );\n }\n checkForAttribute('system', system, instance.getAttribute('system'));\n checkForAttribute('color', color, instance.getAttribute('color'));\n checkForAttribute('scale', scale, instance.getAttribute('scale'));\n\n if (issues.length) {\n window.__swc.warn(\n instance,\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 { issues }\n );\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["version", "COLOR_VALUES", "SCALE_VALUES", "SYSTEM_VARIANT_VALUES", "_Theme", "node", "dir", "targetDir", "el", "attrName", "old", "value", "systemFragments", "name", "newValue", "system", "themeFragments", "color", "scale", "themeKinds", "getStyle", "fragments", "kind", "currentStyles", "isAppliedFragment", "styles", "acc", "kindFragments", "style", "themeFragmentsByKind", "event", "target", "unsubscribe", "callback", "resolve", "dirParent", "styleSheets", "fragmentMap", "instance", "warnBetaSystem", "checkForIssues", "hasThemeAttribute"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host,:root{--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-arrow-icon-size-75:12px;--spectrum-arrow-icon-size-100:14px;--spectrum-arrow-icon-size-200:16px;--spectrum-arrow-icon-size-300:16px;--spectrum-arrow-icon-size-400:18px;--spectrum-arrow-icon-size-500:22px;--spectrum-arrow-icon-size-600:24px;--spectrum-asterisk-icon-size-100:10px;--spectrum-asterisk-icon-size-200:12px;--spectrum-asterisk-icon-size-300:12px;--spectrum-checkmark-icon-size-50:12px;--spectrum-checkmark-icon-size-75:12px;--spectrum-checkmark-icon-size-100:14px;--spectrum-checkmark-icon-size-200:14px;--spectrum-checkmark-icon-size-300:16px;--spectrum-checkmark-icon-size-400:18px;--spectrum-checkmark-icon-size-500:20px;--spectrum-checkmark-icon-size-600:24px;--spectrum-chevron-icon-size-50:8px;--spectrum-chevron-icon-size-75:12px;--spectrum-chevron-icon-size-100:14px;--spectrum-chevron-icon-size-200:14px;--spectrum-chevron-icon-size-300:16px;--spectrum-chevron-icon-size-400:18px;--spectrum-chevron-icon-size-500:20px;--spectrum-chevron-icon-size-600:24px;--spectrum-corner-triangle-icon-size-75:6px;--spectrum-corner-triangle-icon-size-100:7px;--spectrum-corner-triangle-icon-size-200:8px;--spectrum-corner-triangle-icon-size-300:8px;--spectrum-cross-icon-size-75:10px;--spectrum-cross-icon-size-100:10px;--spectrum-cross-icon-size-200:12px;--spectrum-cross-icon-size-300:14px;--spectrum-cross-icon-size-400:16px;--spectrum-cross-icon-size-500:16px;--spectrum-cross-icon-size-600:18px;--spectrum-dash-icon-size-50:10px;--spectrum-dash-icon-size-75:10px;--spectrum-dash-icon-size-100:12px;--spectrum-dash-icon-size-200:14px;--spectrum-dash-icon-size-300:16px;--spectrum-dash-icon-size-400:18px;--spectrum-dash-icon-size-500:20px;--spectrum-dash-icon-size-600:22px;--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-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-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-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-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-slider-control-to-field-label-small:6px;--spectrum-slider-control-to-field-label-medium:10px;--spectrum-slider-control-to-field-label-large:14px;--spectrum-slider-control-to-field-label-extra-large:17px;--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-contextual-help-title-size:var(--spectrum-heading-size-xxs);--spectrum-contextual-help-body-size:var(--spectrum-body-size-xs);--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-top-to-workflow-icon:21px;--spectrum-alert-banner-top-to-text:21px;--spectrum-alert-banner-bottom-to-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-width:216px;--spectrum-coach-mark-minimum-width:216px;--spectrum-coach-mark-maximum-width:248px;--spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300);--spectrum-coach-mark-pagination-text-to-bottom-edge:22px;--spectrum-coach-mark-media-height:162px;--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-regular-small:7px;--spectrum-accordion-small-top-to-text-spacious:12px;--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-content-area-top-to-content:10px;--spectrum-accordion-content-area-bottom-to-content:20px;--spectrum-color-handle-size:20px;--spectrum-color-handle-size-key-focus:40px;--spectrum-table-column-header-row-top-to-text-small:10px;--spectrum-table-column-header-row-top-to-text-medium:9px;--spectrum-table-column-header-row-top-to-text-large:13px;--spectrum-table-column-header-row-top-to-text-extra-large:16px;--spectrum-table-column-header-row-bottom-to-text-small:11px;--spectrum-table-column-header-row-bottom-to-text-medium:10px;--spectrum-table-column-header-row-bottom-to-text-large:13px;--spectrum-table-column-header-row-bottom-to-text-extra-large:17px;--spectrum-table-row-height-small-regular:40px;--spectrum-table-row-height-medium-regular:50px;--spectrum-table-row-height-large-regular:60px;--spectrum-table-row-height-extra-large-regular:70px;--spectrum-table-row-height-small-spacious:50px;--spectrum-table-row-height-medium-spacious:60px;--spectrum-table-row-height-large-spacious:70px;--spectrum-table-row-height-extra-large-spacious:80px;--spectrum-table-row-top-to-text-small-regular:10px;--spectrum-table-row-top-to-text-medium-regular:14px;--spectrum-table-row-top-to-text-large-regular:18px;--spectrum-table-row-top-to-text-extra-large-regular:21px;--spectrum-table-row-bottom-to-text-small-regular:11px;--spectrum-table-row-bottom-to-text-medium-regular:15px;--spectrum-table-row-bottom-to-text-large-regular:18px;--spectrum-table-row-bottom-to-text-extra-large-regular:22px;--spectrum-table-row-top-to-text-small-spacious:15px;--spectrum-table-row-top-to-text-medium-spacious:18px;--spectrum-table-row-top-to-text-large-spacious:23px;--spectrum-table-row-top-to-text-extra-large-spacious:26px;--spectrum-table-row-bottom-to-text-small-spacious:16px;--spectrum-table-row-bottom-to-text-medium-spacious:18px;--spectrum-table-row-bottom-to-text-large-spacious:23px;--spectrum-table-row-bottom-to-text-extra-large-spacious:27px;--spectrum-table-checkbox-to-text:30px;--spectrum-table-header-row-checkbox-to-top-small:14px;--spectrum-table-header-row-checkbox-to-top-medium:13px;--spectrum-table-header-row-checkbox-to-top-large:17px;--spectrum-table-header-row-checkbox-to-top-extra-large:21px;--spectrum-table-row-checkbox-to-top-small-compact:9px;--spectrum-table-row-checkbox-to-top-small-regular:14px;--spectrum-table-row-checkbox-to-top-small-spacious:19px;--spectrum-table-row-checkbox-to-top-medium-compact:13px;--spectrum-table-row-checkbox-to-top-medium-regular:18px;--spectrum-table-row-checkbox-to-top-medium-spacious:23px;--spectrum-table-row-checkbox-to-top-large-compact:17px;--spectrum-table-row-checkbox-to-top-large-regular:22px;--spectrum-table-row-checkbox-to-top-large-spacious:27px;--spectrum-table-row-checkbox-to-top-extra-large-compact:21px;--spectrum-table-row-checkbox-to-top-extra-large-regular:26px;--spectrum-table-row-checkbox-to-top-extra-large-spacious:31px;--spectrum-table-section-header-row-height-small:30px;--spectrum-table-section-header-row-height-medium:40px;--spectrum-table-section-header-row-height-large:50px;--spectrum-table-section-header-row-height-extra-large:60px;--spectrum-table-thumbnail-to-top-minimum-small-compact:5px;--spectrum-table-thumbnail-to-top-minimum-medium-compact:6px;--spectrum-table-thumbnail-to-top-minimum-large-compact:9px;--spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px;--spectrum-table-thumbnail-to-top-minimum-small-regular:6px;--spectrum-table-thumbnail-to-top-minimum-medium-regular:9px;--spectrum-table-thumbnail-to-top-minimum-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-small-spacious:9px;--spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-large-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px;--spectrum-tab-item-to-tab-item-horizontal-small:27px;--spectrum-tab-item-to-tab-item-horizontal-medium:30px;--spectrum-tab-item-to-tab-item-horizontal-large:33px;--spectrum-tab-item-to-tab-item-horizontal-extra-large:36px;--spectrum-tab-item-to-tab-item-vertical-small:5px;--spectrum-tab-item-to-tab-item-vertical-medium:5px;--spectrum-tab-item-to-tab-item-vertical-large:6px;--spectrum-tab-item-to-tab-item-vertical-extra-large:6px;--spectrum-tab-item-start-to-edge-small:13px;--spectrum-tab-item-start-to-edge-medium:15px;--spectrum-tab-item-start-to-edge-large:17px;--spectrum-tab-item-start-to-edge-extra-large:19px;--spectrum-tab-item-top-to-text-small:14px;--spectrum-tab-item-bottom-to-text-small:15px;--spectrum-tab-item-top-to-text-medium:18px;--spectrum-tab-item-bottom-to-text-medium:19px;--spectrum-tab-item-top-to-text-large:22px;--spectrum-tab-item-bottom-to-text-large:22px;--spectrum-tab-item-top-to-text-extra-large:25px;--spectrum-tab-item-bottom-to-text-extra-large:25px;--spectrum-tab-item-top-to-text-compact-small:5px;--spectrum-tab-item-bottom-to-text-compact-small:6px;--spectrum-tab-item-top-to-text-compact-medium:9px;--spectrum-tab-item-bottom-to-text-compact-medium:10px;--spectrum-tab-item-top-to-text-compact-large:12px;--spectrum-tab-item-bottom-to-text-compact-large:14px;--spectrum-tab-item-top-to-text-compact-extra-large:15px;--spectrum-tab-item-bottom-to-text-compact-extra-large:17px;--spectrum-tab-item-top-to-workflow-icon-small:15px;--spectrum-tab-item-top-to-workflow-icon-medium:19px;--spectrum-tab-item-top-to-workflow-icon-large:23px;--spectrum-tab-item-top-to-workflow-icon-extra-large:26px;--spectrum-tab-item-top-to-workflow-icon-compact-small:5px;--spectrum-tab-item-top-to-workflow-icon-compact-medium:9px;--spectrum-tab-item-top-to-workflow-icon-compact-large:13px;--spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px;--spectrum-tab-item-focus-indicator-gap-small:9px;--spectrum-tab-item-focus-indicator-gap-medium:10px;--spectrum-tab-item-focus-indicator-gap-large:11px;--spectrum-tab-item-focus-indicator-gap-extra-large:12px;--spectrum-side-navigation-width:240px;--spectrum-side-navigation-minimum-width:200px;--spectrum-side-navigation-maximum-width:300px;--spectrum-side-navigation-second-level-edge-to-text:30px;--spectrum-side-navigation-third-level-edge-to-text:45px;--spectrum-side-navigation-with-icon-second-level-edge-to-text:62px;--spectrum-side-navigation-with-icon-third-level-edge-to-text:77px;--spectrum-side-navigation-item-to-item:5px;--spectrum-side-navigation-item-to-header:30px;--spectrum-side-navigation-header-to-item:10px;--spectrum-side-navigation-bottom-to-text:10px;--spectrum-tray-top-to-content-area:5px;--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-end-edge-to-disclosure-icon-75:9px;--spectrum-field-end-edge-to-disclosure-icon-100:13px;--spectrum-field-end-edge-to-disclosure-icon-200:17px;--spectrum-field-end-edge-to-disclosure-icon-300:22px;--spectrum-field-top-to-disclosure-icon-75:9px;--spectrum-field-top-to-disclosure-icon-100:13px;--spectrum-field-top-to-disclosure-icon-200:17px;--spectrum-field-top-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:7px;--spectrum-navigational-indicator-top-to-back-icon-medium:12px;--spectrum-navigational-indicator-top-to-back-icon-large:16px;--spectrum-navigational-indicator-top-to-back-icon-extra-large:19px;--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-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-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";--spectrum-colorwheel-colorarea-container-size:182px;--spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);--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);--spectrum-button-top-to-text-small:6px;--spectrum-button-bottom-to-text-small:5px;--spectrum-button-top-to-text-medium:9px;--spectrum-button-bottom-to-text-medium:10px;--spectrum-button-top-to-text-large:12px;--spectrum-button-bottom-to-text-large:13px;--spectrum-button-top-to-text-extra-large:16px;--spectrum-button-bottom-to-text-extra-large:17px;--spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);--spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);--spectrum-alert-dialog-padding:var(--spectrum-spacing-400);--spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);--spectrum-coach-indicator-gap:8px;--spectrum-coach-indicator-ring-diameter:20px;--spectrum-coach-indicator-quiet-ring-diameter:10px;--spectrum-coachmark-buttongroup-display:none;--spectrum-coachmark-buttongroup-mobile-display:flex;--spectrum-coachmark-menu-display:none;--spectrum-coachmark-menu-mobile-display:inline-flex;--spectrum-well-padding:20px;--spectrum-well-margin-top:5px;--spectrum-well-min-width:300px;--spectrum-well-border-radius:5px;--spectrum-workflow-icon-size-xxl:40px;--spectrum-workflow-icon-size-xxs:15px;--spectrum-treeview-item-indentation-medium:20px;--spectrum-treeview-item-indentation-small:15px;--spectrum-treeview-item-indentation-large:25px;--spectrum-treeview-item-indentation-extra-large:30px;--spectrum-treeview-indicator-inset-block-start:6px;--spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;--spectrum-dialog-confirm-entry-animation-distance:25px;--spectrum-dialog-confirm-hero-height:160px;--spectrum-dialog-confirm-border-radius:5px;--spectrum-dialog-confirm-title-text-size:19px;--spectrum-dialog-confirm-description-text-size:15px;--spectrum-dialog-confirm-padding-grid:24px;--spectrum-datepicker-initial-width:160px;--spectrum-datepicker-generic-padding:15px;--spectrum-datepicker-dash-line-height:30px;--spectrum-datepicker-width-quiet-first:90px;--spectrum-datepicker-width-quiet-second:20px;--spectrum-datepicker-datetime-width-first:45px;--spectrum-datepicker-invalid-icon-to-button:10px;--spectrum-datepicker-invalid-icon-to-button-quiet:9px;--spectrum-datepicker-input-datetime-width:30px;--spectrum-pagination-textfield-width:60px;--spectrum-pagination-item-inline-spacing:6px;--spectrum-dial-border-radius:20px;--spectrum-dial-handle-position:10px;--spectrum-dial-handle-block-margin:20px;--spectrum-dial-handle-inline-margin:20px;--spectrum-dial-controls-margin:10px;--spectrum-dial-label-gap-y:6px;--spectrum-dial-label-container-top-to-text:5px;--spectrum-assetcard-focus-ring-border-radius:9px;--spectrum-assetcard-selectionindicator-margin:15px;--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);--spectrum-tooltip-animation-distance:5px;--spectrum-ui-icon-medium-display:none;--spectrum-ui-icon-large-display:block}: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";--spectrum-dialog-confirm-border-radius:8px;--spectrum-dial-border-radius:15px;--spectrum-assetcard-focus-ring-border-radius:12px}: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-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}:root,:host{--spectrum-global-alias-appframe-border-size:1px;--swc-scale-factor:1.25}
|
|
4
|
+
:host,:root{--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-arrow-icon-size-75:12px;--spectrum-arrow-icon-size-100:14px;--spectrum-arrow-icon-size-200:16px;--spectrum-arrow-icon-size-300:16px;--spectrum-arrow-icon-size-400:18px;--spectrum-arrow-icon-size-500:22px;--spectrum-arrow-icon-size-600:24px;--spectrum-asterisk-icon-size-100:10px;--spectrum-asterisk-icon-size-200:12px;--spectrum-asterisk-icon-size-300:12px;--spectrum-checkmark-icon-size-50:12px;--spectrum-checkmark-icon-size-75:12px;--spectrum-checkmark-icon-size-100:14px;--spectrum-checkmark-icon-size-200:14px;--spectrum-checkmark-icon-size-300:16px;--spectrum-checkmark-icon-size-400:18px;--spectrum-checkmark-icon-size-500:20px;--spectrum-checkmark-icon-size-600:24px;--spectrum-chevron-icon-size-50:8px;--spectrum-chevron-icon-size-75:12px;--spectrum-chevron-icon-size-100:14px;--spectrum-chevron-icon-size-200:14px;--spectrum-chevron-icon-size-300:16px;--spectrum-chevron-icon-size-400:18px;--spectrum-chevron-icon-size-500:20px;--spectrum-chevron-icon-size-600:24px;--spectrum-corner-triangle-icon-size-75:6px;--spectrum-corner-triangle-icon-size-100:7px;--spectrum-corner-triangle-icon-size-200:8px;--spectrum-corner-triangle-icon-size-300:8px;--spectrum-cross-icon-size-75:10px;--spectrum-cross-icon-size-100:10px;--spectrum-cross-icon-size-200:12px;--spectrum-cross-icon-size-300:14px;--spectrum-cross-icon-size-400:16px;--spectrum-cross-icon-size-500:16px;--spectrum-cross-icon-size-600:18px;--spectrum-dash-icon-size-50:10px;--spectrum-dash-icon-size-75:10px;--spectrum-dash-icon-size-100:12px;--spectrum-dash-icon-size-200:14px;--spectrum-dash-icon-size-300:16px;--spectrum-dash-icon-size-400:18px;--spectrum-dash-icon-size-500:20px;--spectrum-dash-icon-size-600:22px;--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-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-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-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-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-slider-control-to-field-label-small:6px;--spectrum-slider-control-to-field-label-medium:10px;--spectrum-slider-control-to-field-label-large:14px;--spectrum-slider-control-to-field-label-extra-large:17px;--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-contextual-help-title-size:var(--spectrum-heading-size-xxs);--spectrum-contextual-help-body-size:var(--spectrum-body-size-xs);--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-top-to-workflow-icon:21px;--spectrum-alert-banner-top-to-text:21px;--spectrum-alert-banner-bottom-to-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-width:216px;--spectrum-coach-mark-minimum-width:216px;--spectrum-coach-mark-maximum-width:248px;--spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300);--spectrum-coach-mark-pagination-text-to-bottom-edge:22px;--spectrum-coach-mark-media-height:162px;--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-regular-small:7px;--spectrum-accordion-small-top-to-text-spacious:12px;--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-content-area-top-to-content:10px;--spectrum-accordion-content-area-bottom-to-content:20px;--spectrum-color-handle-size:20px;--spectrum-color-handle-size-key-focus:40px;--spectrum-table-column-header-row-top-to-text-small:10px;--spectrum-table-column-header-row-top-to-text-medium:9px;--spectrum-table-column-header-row-top-to-text-large:13px;--spectrum-table-column-header-row-top-to-text-extra-large:16px;--spectrum-table-column-header-row-bottom-to-text-small:11px;--spectrum-table-column-header-row-bottom-to-text-medium:10px;--spectrum-table-column-header-row-bottom-to-text-large:13px;--spectrum-table-column-header-row-bottom-to-text-extra-large:17px;--spectrum-table-row-height-small-regular:40px;--spectrum-table-row-height-medium-regular:50px;--spectrum-table-row-height-large-regular:60px;--spectrum-table-row-height-extra-large-regular:70px;--spectrum-table-row-height-small-spacious:50px;--spectrum-table-row-height-medium-spacious:60px;--spectrum-table-row-height-large-spacious:70px;--spectrum-table-row-height-extra-large-spacious:80px;--spectrum-table-row-top-to-text-small-regular:10px;--spectrum-table-row-top-to-text-medium-regular:14px;--spectrum-table-row-top-to-text-large-regular:18px;--spectrum-table-row-top-to-text-extra-large-regular:21px;--spectrum-table-row-bottom-to-text-small-regular:11px;--spectrum-table-row-bottom-to-text-medium-regular:15px;--spectrum-table-row-bottom-to-text-large-regular:18px;--spectrum-table-row-bottom-to-text-extra-large-regular:22px;--spectrum-table-row-top-to-text-small-spacious:15px;--spectrum-table-row-top-to-text-medium-spacious:18px;--spectrum-table-row-top-to-text-large-spacious:23px;--spectrum-table-row-top-to-text-extra-large-spacious:26px;--spectrum-table-row-bottom-to-text-small-spacious:16px;--spectrum-table-row-bottom-to-text-medium-spacious:18px;--spectrum-table-row-bottom-to-text-large-spacious:23px;--spectrum-table-row-bottom-to-text-extra-large-spacious:27px;--spectrum-table-checkbox-to-text:30px;--spectrum-table-header-row-checkbox-to-top-small:14px;--spectrum-table-header-row-checkbox-to-top-medium:13px;--spectrum-table-header-row-checkbox-to-top-large:17px;--spectrum-table-header-row-checkbox-to-top-extra-large:21px;--spectrum-table-row-checkbox-to-top-small-compact:9px;--spectrum-table-row-checkbox-to-top-small-regular:14px;--spectrum-table-row-checkbox-to-top-small-spacious:19px;--spectrum-table-row-checkbox-to-top-medium-compact:13px;--spectrum-table-row-checkbox-to-top-medium-regular:18px;--spectrum-table-row-checkbox-to-top-medium-spacious:23px;--spectrum-table-row-checkbox-to-top-large-compact:17px;--spectrum-table-row-checkbox-to-top-large-regular:22px;--spectrum-table-row-checkbox-to-top-large-spacious:27px;--spectrum-table-row-checkbox-to-top-extra-large-compact:21px;--spectrum-table-row-checkbox-to-top-extra-large-regular:26px;--spectrum-table-row-checkbox-to-top-extra-large-spacious:31px;--spectrum-table-section-header-row-height-small:30px;--spectrum-table-section-header-row-height-medium:40px;--spectrum-table-section-header-row-height-large:50px;--spectrum-table-section-header-row-height-extra-large:60px;--spectrum-table-thumbnail-to-top-minimum-small-compact:5px;--spectrum-table-thumbnail-to-top-minimum-medium-compact:6px;--spectrum-table-thumbnail-to-top-minimum-large-compact:9px;--spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px;--spectrum-table-thumbnail-to-top-minimum-small-regular:6px;--spectrum-table-thumbnail-to-top-minimum-medium-regular:9px;--spectrum-table-thumbnail-to-top-minimum-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-small-spacious:9px;--spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-large-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px;--spectrum-tab-item-to-tab-item-horizontal-small:27px;--spectrum-tab-item-to-tab-item-horizontal-medium:30px;--spectrum-tab-item-to-tab-item-horizontal-large:33px;--spectrum-tab-item-to-tab-item-horizontal-extra-large:36px;--spectrum-tab-item-to-tab-item-vertical-small:5px;--spectrum-tab-item-to-tab-item-vertical-medium:5px;--spectrum-tab-item-to-tab-item-vertical-large:6px;--spectrum-tab-item-to-tab-item-vertical-extra-large:6px;--spectrum-tab-item-start-to-edge-small:13px;--spectrum-tab-item-start-to-edge-medium:15px;--spectrum-tab-item-start-to-edge-large:17px;--spectrum-tab-item-start-to-edge-extra-large:19px;--spectrum-tab-item-top-to-text-small:14px;--spectrum-tab-item-bottom-to-text-small:15px;--spectrum-tab-item-top-to-text-medium:18px;--spectrum-tab-item-bottom-to-text-medium:19px;--spectrum-tab-item-top-to-text-large:22px;--spectrum-tab-item-bottom-to-text-large:22px;--spectrum-tab-item-top-to-text-extra-large:25px;--spectrum-tab-item-bottom-to-text-extra-large:25px;--spectrum-tab-item-top-to-text-compact-small:5px;--spectrum-tab-item-bottom-to-text-compact-small:6px;--spectrum-tab-item-top-to-text-compact-medium:9px;--spectrum-tab-item-bottom-to-text-compact-medium:10px;--spectrum-tab-item-top-to-text-compact-large:12px;--spectrum-tab-item-bottom-to-text-compact-large:14px;--spectrum-tab-item-top-to-text-compact-extra-large:15px;--spectrum-tab-item-bottom-to-text-compact-extra-large:17px;--spectrum-tab-item-top-to-workflow-icon-small:15px;--spectrum-tab-item-top-to-workflow-icon-medium:19px;--spectrum-tab-item-top-to-workflow-icon-large:23px;--spectrum-tab-item-top-to-workflow-icon-extra-large:26px;--spectrum-tab-item-top-to-workflow-icon-compact-small:5px;--spectrum-tab-item-top-to-workflow-icon-compact-medium:9px;--spectrum-tab-item-top-to-workflow-icon-compact-large:13px;--spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px;--spectrum-tab-item-focus-indicator-gap-small:9px;--spectrum-tab-item-focus-indicator-gap-medium:10px;--spectrum-tab-item-focus-indicator-gap-large:11px;--spectrum-tab-item-focus-indicator-gap-extra-large:12px;--spectrum-side-navigation-width:240px;--spectrum-side-navigation-minimum-width:200px;--spectrum-side-navigation-maximum-width:300px;--spectrum-side-navigation-second-level-edge-to-text:30px;--spectrum-side-navigation-third-level-edge-to-text:45px;--spectrum-side-navigation-with-icon-second-level-edge-to-text:62px;--spectrum-side-navigation-with-icon-third-level-edge-to-text:77px;--spectrum-side-navigation-item-to-item:5px;--spectrum-side-navigation-item-to-header:30px;--spectrum-side-navigation-header-to-item:10px;--spectrum-side-navigation-bottom-to-text:10px;--spectrum-tray-top-to-content-area:5px;--spectrum-accordion-top-to-text-spacious-small:12px;--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-end-edge-to-disclosure-icon-75:9px;--spectrum-field-end-edge-to-disclosure-icon-100:13px;--spectrum-field-end-edge-to-disclosure-icon-200:17px;--spectrum-field-end-edge-to-disclosure-icon-300:22px;--spectrum-field-top-to-disclosure-icon-75:9px;--spectrum-field-top-to-disclosure-icon-100:13px;--spectrum-field-top-to-disclosure-icon-200:17px;--spectrum-field-top-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:7px;--spectrum-navigational-indicator-top-to-back-icon-medium:12px;--spectrum-navigational-indicator-top-to-back-icon-large:16px;--spectrum-navigational-indicator-top-to-back-icon-extra-large:19px;--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-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-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";--spectrum-colorwheel-colorarea-container-size:182px;--spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);--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);--spectrum-button-top-to-text-small:6px;--spectrum-button-bottom-to-text-small:5px;--spectrum-button-top-to-text-medium:9px;--spectrum-button-bottom-to-text-medium:10px;--spectrum-button-top-to-text-large:12px;--spectrum-button-bottom-to-text-large:13px;--spectrum-button-top-to-text-extra-large:16px;--spectrum-button-bottom-to-text-extra-large:17px;--spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);--spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);--spectrum-alert-dialog-padding:var(--spectrum-spacing-400);--spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);--spectrum-coach-indicator-gap:8px;--spectrum-coach-indicator-ring-diameter:20px;--spectrum-coach-indicator-quiet-ring-diameter:10px;--spectrum-coachmark-buttongroup-display:none;--spectrum-coachmark-buttongroup-mobile-display:flex;--spectrum-coachmark-menu-display:none;--spectrum-coachmark-menu-mobile-display:inline-flex;--spectrum-well-padding:20px;--spectrum-well-margin-top:5px;--spectrum-well-min-width:300px;--spectrum-well-border-radius:5px;--spectrum-workflow-icon-size-xxl:40px;--spectrum-workflow-icon-size-xxs:15px;--spectrum-treeview-item-indentation-medium:20px;--spectrum-treeview-item-indentation-small:15px;--spectrum-treeview-item-indentation-large:25px;--spectrum-treeview-item-indentation-extra-large:30px;--spectrum-treeview-indicator-inset-block-start:6px;--spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;--spectrum-dialog-confirm-entry-animation-distance:25px;--spectrum-dialog-confirm-hero-height:160px;--spectrum-dialog-confirm-border-radius:5px;--spectrum-dialog-confirm-title-text-size:19px;--spectrum-dialog-confirm-description-text-size:15px;--spectrum-dialog-confirm-padding-grid:24px;--spectrum-datepicker-initial-width:160px;--spectrum-datepicker-generic-padding:15px;--spectrum-datepicker-dash-line-height:30px;--spectrum-datepicker-width-quiet-first:90px;--spectrum-datepicker-width-quiet-second:20px;--spectrum-datepicker-datetime-width-first:45px;--spectrum-datepicker-invalid-icon-to-button:10px;--spectrum-datepicker-invalid-icon-to-button-quiet:9px;--spectrum-datepicker-input-datetime-width:30px;--spectrum-pagination-textfield-width:60px;--spectrum-pagination-item-inline-spacing:6px;--spectrum-dial-border-radius:20px;--spectrum-dial-handle-position:10px;--spectrum-dial-handle-block-margin:20px;--spectrum-dial-handle-inline-margin:20px;--spectrum-dial-controls-margin:10px;--spectrum-dial-label-gap-y:6px;--spectrum-dial-label-container-top-to-text:5px;--spectrum-assetcard-focus-ring-border-radius:9px;--spectrum-assetcard-selectionindicator-margin:15px;--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);--spectrum-tooltip-animation-distance:5px;--spectrum-ui-icon-medium-display:none;--spectrum-ui-icon-large-display:block}: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";--spectrum-dialog-confirm-border-radius:8px;--spectrum-dial-border-radius:15px;--spectrum-assetcard-focus-ring-border-radius:12px}: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-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;--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";--spectrum-dialog-confirm-border-radius:8px;--spectrum-dial-border-radius:15px;--spectrum-assetcard-focus-ring-border-radius:12px}:root,:host{--spectrum-global-alias-appframe-border-size:1px;--swc-scale-factor:1.25}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=scale-large-core-tokens.css.dev.js.map
|