@sky.ui/core 0.0.57 → 0.0.58
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/dist/custom-elements.json +4322 -4322
- package/dist/helper/controllers/animation-controller.js.map +1 -1
- package/dist/helper/controllers/preset-controller.js.map +1 -1
- package/dist/helper/iconify-offline.js.map +1 -1
- package/dist/helper/styles/focus-ring.js.map +1 -1
- package/dist/helper/utils/component-presets.js.map +1 -1
- package/dist/helper/utils/size-resolver.js.map +1 -1
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-image/srcset-utils.js.map +1 -1
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -1
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-list.js","sources":["../../src/sky-list/sky-list.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues } from \"lit\";\nimport { customElement, property, queryAssignedElements } from \"lit/decorators.js\";\nimport type { SkyListitem } from \"../sky-listitem/sky-listitem.js\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\nimport {\n arrayPropHasChanged,\n coerceArray,\n EMPTY_ARRAY,\n} from \"../helper/utils/stable-array\";\n\nexport type SkyListSelectionMode = \"none\" | \"single\" | \"multiple\";\nexport type SkyListChangeDetail = {\n selectedItems: SkyListitem[];\n /** Values from each selected item's `value` (empty string if unset). */\n selectedValues: string[];\n};\n\n/**\n * @element sky-list\n *\n * @summary Styled list container for `sky-listitem` with selection modes and keyboard navigation.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/list\n *\n * @uiVModel selectedValues list-change detail=selectedValues\n *\n * @slot - Default slot for `<sky-listitem>` children.\n * @property {SkyListSelectionMode} selection - Selection mode (`none`, `single`, `multiple`).\n * @property {string[]} selectedValues - Selected item `value`s (mirror for `v-model`; set each `<sky-listitem value=\"…\">`). Default: `[]`.\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n * @fires {CustomEvent<SkyListChangeDetail>} list-change - Fired when selected items change.\n * @method focusListItem Focuses a list item by index.\n * @method getItems Returns current slotted list items.\n *\n * @csspart list-container - The main container wrapping slotted list items.\n *\n * @Behavior\n * - Manages activation and selection state for slotted `sky-listitem` children.\n * - Supports keyboard navigation (`ArrowUp/Down`, `Home/End`, `Enter`, `Space`).\n * - Emits a normalized selected-items payload on each selection update.\n *\n * @example\n * ```html\n * <sky-list selection=\"single\">\n * <sky-listitem>Option A</sky-listitem>\n * <sky-listitem>Option B</sky-listitem>\n * <sky-listitem>Option C</sky-listitem>\n * </sky-list>\n * ```\n * ```vue\n * <template>\n * <sky-list selection=\"single\" @list-change=\"onListChange\">\n * <sky-listitem>Option A</sky-listitem>\n * <sky-listitem>Option B</sky-listitem>\n * <sky-listitem>Option C</sky-listitem>\n * </sky-list>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n * return (\n * <sky-list selection=\"single\">\n * <sky-listitem>Option A</sky-listitem>\n * <sky-listitem>Option B</sky-listitem>\n * <sky-listitem>Option C</sky-listitem>\n * </sky-list>\n * );\n * }\n * ```\n */\n@customElement(\"sky-list\")\nexport class SkyList extends LitElement {\n\n /** Named prop preset from nearest `sky-config-provider`. */\n @property({ type: String, reflect: true }) preset = \"\";\n\n private _presets = new PresetController(this);\n\n static override styles = css`\n :host {\n display: block;\n font-family: var(--sky-font);\n }\n\n .list-container {\n width: 100%;\n border-radius: var(--sky-radius-secondary);\n overflow: hidden;\n background: var(--sky-glass-solid);\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n border: var(--sky-border-primary);\n box-shadow:\n var(--sky-box-shadow-inset),\n var(--sky-box-shadow-secondary);\n isolation: isolate;\n }\n\n ::slotted(sky-listitem[subheader]) {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n `;\n\n @property({ type: String }) selection: SkyListSelectionMode = \"none\";\n\n private _selectedValues: string[] = EMPTY_ARRAY as string[];\n\n /** Bound selection as item `value` strings (requires `value` on items). Coerces null to `[]`. */\n @property({ type: Array, hasChanged: arrayPropHasChanged })\n get selectedValues(): string[] {\n return this._selectedValues;\n }\n set selectedValues(value: string[] | null | undefined) {\n this._selectedValues = coerceArray(value);\n }\n\n @queryAssignedElements({ flatten: true })\n private items!: SkyListitem[];\n\n private currentIndex = 0;\n\n /** Avoid feedback when syncing selection from the `selectedValues` prop. */\n private _syncingSelectedValues = false;\n\n private _onItemActivate = (e: Event) => this.onItemActivate(e as CustomEvent);\n\n private _onSlotChange = () => {\n this._applySelectedValuesFromProp();\n this._focusFirstNavigable();\n };\n\n override firstUpdated(): void {\n this.syncAriaRole();\n this.addEventListener(\"keydown\", this.onKeydown);\n this.addEventListener(\"item-activate\", this._onItemActivate);\n this._applySelectedValuesFromProp();\n this._focusFirstNavigable();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.onKeydown);\n this.removeEventListener(\"item-activate\", this._onItemActivate);\n }\n\n private syncAriaRole(): void {\n if (this.selection === \"none\") {\n this.setAttribute(\"role\", \"list\");\n this.removeAttribute(\"aria-multiselectable\");\n return;\n }\n\n this.setAttribute(\"role\", \"listbox\");\n if (this.selection === \"multiple\") {\n this.setAttribute(\"aria-multiselectable\", \"true\");\n } else {\n this.removeAttribute(\"aria-multiselectable\");\n }\n }\n\n private navigableItems(): SkyListitem[] {\n return (this.items ?? []).filter((item) => this.isNavigableItem(item));\n }\n\n private isNavigableItem(item: SkyListitem | undefined): boolean {\n return !!item && !item.disabled && !item.subheader;\n }\n\n private itemIndex(item: SkyListitem): number {\n return (this.items ?? []).indexOf(item);\n }\n\n private onItemActivate(e: CustomEvent): void {\n const item = e.detail.item as SkyListitem;\n if (!this.isNavigableItem(item)) return;\n\n if (this.selection === \"single\") {\n this.items.forEach((i) => i.setSelected(false));\n item.setSelected(true);\n } else if (this.selection === \"multiple\") {\n item.setSelected(!item.selected);\n }\n\n const selectedItems = this.items.filter((i) => i.selected);\n const selectedValues = selectedItems.map((i) => i.value || \"\");\n this._syncingSelectedValues = true;\n this.selectedValues = [...selectedValues];\n this._syncingSelectedValues = false;\n\n this.dispatchEvent(\n new CustomEvent<SkyListChangeDetail>(\"list-change\", {\n detail: {\n selectedItems,\n selectedValues,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** Applies `selectedValues` from the host to child items. */\n private _applySelectedValuesFromProp(): void {\n if (!this.items?.length || this.selection === \"none\") return;\n\n const want = new Set(this.selectedValues ?? []);\n if (this.selection === \"single\") {\n const first = [...want][0];\n for (const item of this.items) {\n if (item.subheader) continue;\n item.setSelected(first !== undefined && item.value === first);\n }\n return;\n }\n\n for (const item of this.items) {\n if (item.subheader) continue;\n item.setSelected(want.has(item.value));\n }\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has(\"selection\")) {\n this.syncAriaRole();\n }\n\n if ((changed.has(\"selectedValues\") || changed.has(\"selection\")) && !this._syncingSelectedValues) {\n this._applySelectedValuesFromProp();\n }\n }\n\n private onKeydown(e: KeyboardEvent): void {\n const navigable = this.navigableItems();\n if (!navigable.length) return;\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n this.focusStep(1);\n break;\n case \"ArrowUp\":\n e.preventDefault();\n this.focusStep(-1);\n break;\n case \"Home\":\n e.preventDefault();\n this.focusItem(this.itemIndex(navigable[0]!));\n break;\n case \"End\":\n e.preventDefault();\n this.focusItem(this.itemIndex(navigable[navigable.length - 1]!));\n break;\n case \" \":\n case \"Enter\":\n e.preventDefault();\n this.items[this.currentIndex]?.dispatchEvent(\n new CustomEvent(\"item-activate\", {\n detail: { item: this.items[this.currentIndex] },\n bubbles: true,\n composed: true,\n }),\n );\n break;\n }\n }\n\n private focusStep(delta: number): void {\n const navigable = this.navigableItems();\n if (!navigable.length) return;\n\n const current = this.items[this.currentIndex];\n let navIdx = current ? navigable.indexOf(current) : -1;\n if (navIdx < 0) navIdx = delta > 0 ? -1 : navigable.length;\n\n const nextNavIdx = Math.max(0, Math.min(navIdx + delta, navigable.length - 1));\n const next = navigable[nextNavIdx];\n if (next) this.focusItem(this.itemIndex(next));\n }\n\n private _focusFirstNavigable(): void {\n const first = this.navigableItems()[0];\n if (first) this.focusItem(this.itemIndex(first));\n }\n\n private focusItem(index: number): void {\n if (!this.items?.length) return;\n\n const len = this.items.length;\n let next = Math.max(0, Math.min(index, len - 1));\n if (!this.isNavigableItem(this.items[next])) {\n const navigable = this.navigableItems();\n const candidate = navigable.find((item) => this.itemIndex(item) >= next) ?? navigable[0];\n if (!candidate) return;\n next = this.itemIndex(candidate);\n }\n\n const prev = this.items[this.currentIndex];\n if (prev) prev.shadowRoot?.querySelector(\".list-item\")?.setAttribute(\"tabindex\", \"-1\");\n\n this.currentIndex = next;\n const current = this.items[this.currentIndex];\n if (current && this.isNavigableItem(current)) {\n const el = current.shadowRoot?.querySelector(\".list-item\") as HTMLElement | null;\n if (el) {\n el.setAttribute(\"tabindex\", \"0\");\n el.focus();\n }\n }\n }\n\n public focusListItem(index: number): void {\n this.focusItem(index);\n }\n\n public getItems(): SkyListitem[] {\n return [...(this.items ?? [])];\n }\n\n override render() {\n return html`\n <div class=\"list-container\" part=\"list-container\">\n <slot @slotchange=${this._onSlotChange}></slot>\n </div>\n `;\n }\n}"],"names":["SkyList","LitElement","constructor","super","arguments","this","preset","_presets","PresetController","selection","_selectedValues","EMPTY_ARRAY","currentIndex","_syncingSelectedValues","_onItemActivate","e","onItemActivate","_onSlotChange","_applySelectedValuesFromProp","_focusFirstNavigable","selectedValues","value","coerceArray","firstUpdated","syncAriaRole","addEventListener","onKeydown","disconnectedCallback","removeEventListener","setAttribute","removeAttribute","navigableItems","items","filter","item","isNavigableItem","disabled","subheader","itemIndex","indexOf","detail","forEach","i","setSelected","selected","selectedItems","map","dispatchEvent","CustomEvent","bubbles","composed","length","want","Set","first","has","updated","changed","navigable","key","preventDefault","focusStep","focusItem","delta","current","navIdx","next","Math","max","min","index","len","candidate","find","prev","shadowRoot","querySelector","el","focus","focusListItem","getItems","render","html","styles","css","__decorateClass","property","type","String","reflect","prototype","Array","hasChanged","arrayPropHasChanged","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sky-list.js","sources":["../../src/sky-list/sky-list.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { customElement, property, queryAssignedElements } from \"lit/decorators.js\";\r\nimport type { SkyListitem } from \"../sky-listitem/sky-listitem.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport {\r\n arrayPropHasChanged,\r\n coerceArray,\r\n EMPTY_ARRAY,\r\n} from \"../helper/utils/stable-array\";\r\n\r\nexport type SkyListSelectionMode = \"none\" | \"single\" | \"multiple\";\r\nexport type SkyListChangeDetail = {\r\n selectedItems: SkyListitem[];\r\n /** Values from each selected item's `value` (empty string if unset). */\r\n selectedValues: string[];\r\n};\r\n\r\n/**\r\n * @element sky-list\r\n *\r\n * @summary Styled list container for `sky-listitem` with selection modes and keyboard navigation.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/list\r\n *\r\n * @uiVModel selectedValues list-change detail=selectedValues\r\n *\r\n * @slot - Default slot for `<sky-listitem>` children.\r\n * @property {SkyListSelectionMode} selection - Selection mode (`none`, `single`, `multiple`).\r\n * @property {string[]} selectedValues - Selected item `value`s (mirror for `v-model`; set each `<sky-listitem value=\"…\">`). Default: `[]`.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @fires {CustomEvent<SkyListChangeDetail>} list-change - Fired when selected items change.\r\n * @method focusListItem Focuses a list item by index.\r\n * @method getItems Returns current slotted list items.\r\n *\r\n * @csspart list-container - The main container wrapping slotted list items.\r\n *\r\n * @Behavior\r\n * - Manages activation and selection state for slotted `sky-listitem` children.\r\n * - Supports keyboard navigation (`ArrowUp/Down`, `Home/End`, `Enter`, `Space`).\r\n * - Emits a normalized selected-items payload on each selection update.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-list selection=\"single\">\r\n * <sky-listitem>Option A</sky-listitem>\r\n * <sky-listitem>Option B</sky-listitem>\r\n * <sky-listitem>Option C</sky-listitem>\r\n * </sky-list>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-list selection=\"single\" @list-change=\"onListChange\">\r\n * <sky-listitem>Option A</sky-listitem>\r\n * <sky-listitem>Option B</sky-listitem>\r\n * <sky-listitem>Option C</sky-listitem>\r\n * </sky-list>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return (\r\n * <sky-list selection=\"single\">\r\n * <sky-listitem>Option A</sky-listitem>\r\n * <sky-listitem>Option B</sky-listitem>\r\n * <sky-listitem>Option C</sky-listitem>\r\n * </sky-list>\r\n * );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-list\")\r\nexport class SkyList extends LitElement {\r\n\r\n /** Named prop preset from nearest `sky-config-provider`. */\r\n @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n private _presets = new PresetController(this);\r\n\r\n static override styles = css`\r\n :host {\r\n display: block;\r\n font-family: var(--sky-font);\r\n }\r\n\r\n .list-container {\r\n width: 100%;\r\n border-radius: var(--sky-radius-secondary);\r\n overflow: hidden;\r\n background: var(--sky-glass-solid);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n border: var(--sky-border-primary);\r\n box-shadow:\r\n var(--sky-box-shadow-inset),\r\n var(--sky-box-shadow-secondary);\r\n isolation: isolate;\r\n }\r\n\r\n ::slotted(sky-listitem[subheader]) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n }\r\n `;\r\n\r\n @property({ type: String }) selection: SkyListSelectionMode = \"none\";\r\n\r\n private _selectedValues: string[] = EMPTY_ARRAY as string[];\r\n\r\n /** Bound selection as item `value` strings (requires `value` on items). Coerces null to `[]`. */\r\n @property({ type: Array, hasChanged: arrayPropHasChanged })\r\n get selectedValues(): string[] {\r\n return this._selectedValues;\r\n }\r\n set selectedValues(value: string[] | null | undefined) {\r\n this._selectedValues = coerceArray(value);\r\n }\r\n\r\n @queryAssignedElements({ flatten: true })\r\n private items!: SkyListitem[];\r\n\r\n private currentIndex = 0;\r\n\r\n /** Avoid feedback when syncing selection from the `selectedValues` prop. */\r\n private _syncingSelectedValues = false;\r\n\r\n private _onItemActivate = (e: Event) => this.onItemActivate(e as CustomEvent);\r\n\r\n private _onSlotChange = () => {\r\n this._applySelectedValuesFromProp();\r\n this._focusFirstNavigable();\r\n };\r\n\r\n override firstUpdated(): void {\r\n this.syncAriaRole();\r\n this.addEventListener(\"keydown\", this.onKeydown);\r\n this.addEventListener(\"item-activate\", this._onItemActivate);\r\n this._applySelectedValuesFromProp();\r\n this._focusFirstNavigable();\r\n }\r\n\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"keydown\", this.onKeydown);\r\n this.removeEventListener(\"item-activate\", this._onItemActivate);\r\n }\r\n\r\n private syncAriaRole(): void {\r\n if (this.selection === \"none\") {\r\n this.setAttribute(\"role\", \"list\");\r\n this.removeAttribute(\"aria-multiselectable\");\r\n return;\r\n }\r\n\r\n this.setAttribute(\"role\", \"listbox\");\r\n if (this.selection === \"multiple\") {\r\n this.setAttribute(\"aria-multiselectable\", \"true\");\r\n } else {\r\n this.removeAttribute(\"aria-multiselectable\");\r\n }\r\n }\r\n\r\n private navigableItems(): SkyListitem[] {\r\n return (this.items ?? []).filter((item) => this.isNavigableItem(item));\r\n }\r\n\r\n private isNavigableItem(item: SkyListitem | undefined): boolean {\r\n return !!item && !item.disabled && !item.subheader;\r\n }\r\n\r\n private itemIndex(item: SkyListitem): number {\r\n return (this.items ?? []).indexOf(item);\r\n }\r\n\r\n private onItemActivate(e: CustomEvent): void {\r\n const item = e.detail.item as SkyListitem;\r\n if (!this.isNavigableItem(item)) return;\r\n\r\n if (this.selection === \"single\") {\r\n this.items.forEach((i) => i.setSelected(false));\r\n item.setSelected(true);\r\n } else if (this.selection === \"multiple\") {\r\n item.setSelected(!item.selected);\r\n }\r\n\r\n const selectedItems = this.items.filter((i) => i.selected);\r\n const selectedValues = selectedItems.map((i) => i.value || \"\");\r\n this._syncingSelectedValues = true;\r\n this.selectedValues = [...selectedValues];\r\n this._syncingSelectedValues = false;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyListChangeDetail>(\"list-change\", {\r\n detail: {\r\n selectedItems,\r\n selectedValues,\r\n },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** Applies `selectedValues` from the host to child items. */\r\n private _applySelectedValuesFromProp(): void {\r\n if (!this.items?.length || this.selection === \"none\") return;\r\n\r\n const want = new Set(this.selectedValues ?? []);\r\n if (this.selection === \"single\") {\r\n const first = [...want][0];\r\n for (const item of this.items) {\r\n if (item.subheader) continue;\r\n item.setSelected(first !== undefined && item.value === first);\r\n }\r\n return;\r\n }\r\n\r\n for (const item of this.items) {\r\n if (item.subheader) continue;\r\n item.setSelected(want.has(item.value));\r\n }\r\n }\r\n\r\n override updated(changed: PropertyValues): void {\r\n super.updated(changed);\r\n\r\n if (changed.has(\"selection\")) {\r\n this.syncAriaRole();\r\n }\r\n\r\n if ((changed.has(\"selectedValues\") || changed.has(\"selection\")) && !this._syncingSelectedValues) {\r\n this._applySelectedValuesFromProp();\r\n }\r\n }\r\n\r\n private onKeydown(e: KeyboardEvent): void {\r\n const navigable = this.navigableItems();\r\n if (!navigable.length) return;\r\n\r\n switch (e.key) {\r\n case \"ArrowDown\":\r\n e.preventDefault();\r\n this.focusStep(1);\r\n break;\r\n case \"ArrowUp\":\r\n e.preventDefault();\r\n this.focusStep(-1);\r\n break;\r\n case \"Home\":\r\n e.preventDefault();\r\n this.focusItem(this.itemIndex(navigable[0]!));\r\n break;\r\n case \"End\":\r\n e.preventDefault();\r\n this.focusItem(this.itemIndex(navigable[navigable.length - 1]!));\r\n break;\r\n case \" \":\r\n case \"Enter\":\r\n e.preventDefault();\r\n this.items[this.currentIndex]?.dispatchEvent(\r\n new CustomEvent(\"item-activate\", {\r\n detail: { item: this.items[this.currentIndex] },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n break;\r\n }\r\n }\r\n\r\n private focusStep(delta: number): void {\r\n const navigable = this.navigableItems();\r\n if (!navigable.length) return;\r\n\r\n const current = this.items[this.currentIndex];\r\n let navIdx = current ? navigable.indexOf(current) : -1;\r\n if (navIdx < 0) navIdx = delta > 0 ? -1 : navigable.length;\r\n\r\n const nextNavIdx = Math.max(0, Math.min(navIdx + delta, navigable.length - 1));\r\n const next = navigable[nextNavIdx];\r\n if (next) this.focusItem(this.itemIndex(next));\r\n }\r\n\r\n private _focusFirstNavigable(): void {\r\n const first = this.navigableItems()[0];\r\n if (first) this.focusItem(this.itemIndex(first));\r\n }\r\n\r\n private focusItem(index: number): void {\r\n if (!this.items?.length) return;\r\n\r\n const len = this.items.length;\r\n let next = Math.max(0, Math.min(index, len - 1));\r\n if (!this.isNavigableItem(this.items[next])) {\r\n const navigable = this.navigableItems();\r\n const candidate = navigable.find((item) => this.itemIndex(item) >= next) ?? navigable[0];\r\n if (!candidate) return;\r\n next = this.itemIndex(candidate);\r\n }\r\n\r\n const prev = this.items[this.currentIndex];\r\n if (prev) prev.shadowRoot?.querySelector(\".list-item\")?.setAttribute(\"tabindex\", \"-1\");\r\n\r\n this.currentIndex = next;\r\n const current = this.items[this.currentIndex];\r\n if (current && this.isNavigableItem(current)) {\r\n const el = current.shadowRoot?.querySelector(\".list-item\") as HTMLElement | null;\r\n if (el) {\r\n el.setAttribute(\"tabindex\", \"0\");\r\n el.focus();\r\n }\r\n }\r\n }\r\n\r\n public focusListItem(index: number): void {\r\n this.focusItem(index);\r\n }\r\n\r\n public getItems(): SkyListitem[] {\r\n return [...(this.items ?? [])];\r\n }\r\n\r\n override render() {\r\n return html`\r\n <div class=\"list-container\" part=\"list-container\">\r\n <slot @slotchange=${this._onSlotChange}></slot>\r\n </div>\r\n `;\r\n }\r\n}"],"names":["SkyList","LitElement","constructor","super","arguments","this","preset","_presets","PresetController","selection","_selectedValues","EMPTY_ARRAY","currentIndex","_syncingSelectedValues","_onItemActivate","e","onItemActivate","_onSlotChange","_applySelectedValuesFromProp","_focusFirstNavigable","selectedValues","value","coerceArray","firstUpdated","syncAriaRole","addEventListener","onKeydown","disconnectedCallback","removeEventListener","setAttribute","removeAttribute","navigableItems","items","filter","item","isNavigableItem","disabled","subheader","itemIndex","indexOf","detail","forEach","i","setSelected","selected","selectedItems","map","dispatchEvent","CustomEvent","bubbles","composed","length","want","Set","first","has","updated","changed","navigable","key","preventDefault","focusStep","focusItem","delta","current","navIdx","next","Math","max","min","index","len","candidate","find","prev","shadowRoot","querySelector","el","focus","focusListItem","getItems","render","html","styles","css","__decorateClass","property","type","String","reflect","prototype","Array","hasChanged","arrayPropHasChanged","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-listitem.js","sources":["../../src/sky-listitem/sky-listitem.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\n\nexport type SkyListitemActivateDetail = { item: SkyListitem };\n\n/**\n * @element sky-listitem\n *\n * @summary List item with optional avatar, actions, subheader mode, and selectable state.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/list\n *\n * @slot - Fallback label text when `content` is not used.\n * @slot content - Main content of the list item (usually label or text).\n * @slot actions - Trailing action elements (e.g., icons, buttons).\n * @property {string} avatar - Optional avatar image URL.\n * @property {string} value - Stable id for selection (`sky-list` `selectedValues` / `list-change`). Default: `\"\"`.\n * @property {string} subheader - Subheader text; when set, item renders as a section header.\n * @property {boolean} selected - Whether item is selected.\n * @property {boolean} dense - Whether compact spacing is used.\n * @property {boolean} disabled - Whether interaction is disabled.\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n * @fires {CustomEvent<SkyListitemActivateDetail>} item-activate - Fired when the item is activated.\n * @method setSelected Sets selection state programmatically.\n *\n * @csspart list-item - The main list item container.\n * @csspart leading - The leading section (avatar container).\n * @csspart avatar - The avatar image element.\n * @csspart content - The content wrapper for the main slot.\n * @csspart actions - The trailing actions container.\n * @csspart subheader - The subheader divider element.\n *\n * @Behavior\n * - Renders either a selectable list row or a non-interactive subheader variant.\n * - Emits `item-activate` for parent list orchestration.\n * - Supports compact and disabled display variants.\n *\n * @example\n * ```html\n * <sky-listitem avatar=\"https://example.com/avatar.jpg\" selected>\n * <span slot=\"content\">John Doe</span>\n * <button slot=\"actions\" type=\"button\">Action</button>\n * </sky-listitem>\n * ```\n * ```vue\n * <template>\n * <sky-listitem avatar=\"https://example.com/avatar.jpg\" selected @item-activate=\"onActivate\">\n * <span slot=\"content\">John Doe</span>\n * <button slot=\"actions\" type=\"button\">Action</button>\n * </sky-listitem>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n * return (\n * <sky-listitem avatar=\"https://example.com/avatar.jpg\" selected>\n * <span slot=\"content\">John Doe</span>\n * <button slot=\"actions\" type=\"button\">Action</button>\n * </sky-listitem>\n * );\n * }\n * ```\n */\n@customElement(\"sky-listitem\")\nexport class SkyListitem extends LitElement {\n @property({ type: String }) avatar = \"\";\n /** Optional stable value for list selection (`sky-list` binding). */\n @property({ type: String }) value = \"\";\n @property({ type: String, reflect: true }) subheader = \"\";\n @property({ type: Boolean, reflect: true }) selected = false;\n @property({ type: Boolean, reflect: true }) dense = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n\n /** Named prop preset from nearest `sky-config-provider`. */\n @property({ type: String, reflect: true }) preset = \"\";\n\n private _presets = new PresetController(this);\n\n static override styles = css`\n :host {\n display: block;\n cursor: pointer;\n outline: none;\n }\n\n :host([subheader]) {\n cursor: default;\n }\n\n :host([disabled]) {\n opacity: var(--sky-opacity-disabled, 0.6);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n .list-item {\n display: flex;\n align-items: center;\n padding: var(--sky-space-2\\\\.5, 10px) var(--sky-space-3\\\\.5, 14px);\n border-bottom: var(--sky-border-primary);\n border-inline-start: 3px solid transparent;\n transition:\n background var(--sky-transition-normal, 200ms ease),\n border-color var(--sky-transition-normal, 200ms ease),\n box-shadow var(--sky-transition-normal, 200ms ease);\n color: var(--sky-text-primary);\n position: relative;\n box-sizing: border-box;\n }\n\n :host(:hover:not([disabled])) .list-item,\n :host(:focus-visible) .list-item {\n background: var(--sky-hover-primary);\n }\n\n :host(:focus-visible) .list-item {\n box-shadow: var(--sky-focus-ring);\n }\n\n :host([selected]) .list-item {\n background: var(--sky-hover-secondary);\n border-inline-start-color: var(--sky-active-primary);\n }\n\n :host(:last-child) .list-item {\n border-bottom: none;\n }\n\n .leading {\n display: flex;\n align-items: center;\n margin-inline-end: var(--sky-space-3, 12px);\n flex-shrink: 0;\n }\n\n .avatar {\n width: 40px;\n height: 40px;\n border-radius: var(--sky-radius-full);\n object-fit: cover;\n background: var(--sky-hover-tertiary);\n }\n\n :host([dense]) .list-item {\n padding: var(--sky-space-1\\\\.5, 6px) var(--sky-space-2\\\\.5, 10px);\n }\n\n :host([dense]) .avatar {\n width: 32px;\n height: 32px;\n }\n\n .content {\n flex: 1 1 auto;\n min-width: 0;\n text-align: start;\n font-family: var(--sky-font);\n }\n\n .actions {\n display: flex;\n align-items: center;\n margin-inline-start: var(--sky-space-3, 12px);\n gap: var(--sky-space-2, 8px);\n flex-shrink: 0;\n }\n\n .subheader {\n font-family: var(--sky-font);\n font-size: var(--sky-font-size-sm);\n text-align: start;\n color: var(--sky-text-secondary);\n padding: var(--sky-space-1\\\\.5, 6px) var(--sky-space-3\\\\.5, 14px);\n font-weight: var(--sky-font-weight-semibold);\n background: var(--sky-hover-tertiary);\n border-bottom: var(--sky-border-primary);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .list-item {\n transition: none;\n }\n }\n `;\n\n private onClick(): void {\n if (this.disabled || this.subheader) return;\n this.dispatchEvent(\n new CustomEvent<SkyListitemActivateDetail>(\"item-activate\", {\n detail: { item: this },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n setSelected(selected: boolean): void {\n if (this.selected === selected) return;\n this.selected = selected;\n }\n\n override render() {\n if (this.subheader) {\n return html`\n <div class=\"subheader\" part=\"subheader\" role=\"presentation\">${this.subheader}</div>\n `;\n }\n\n return html`\n <div\n class=\"list-item\"\n part=\"list-item\"\n role=\"option\"\n aria-selected=${this.selected ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n tabindex=\"-1\"\n @click=${this.onClick}\n >\n ${when(\n this.avatar,\n () => html`\n <div class=\"leading\" part=\"leading\">\n <img\n class=\"avatar\"\n src=${this.avatar}\n alt=\"\"\n part=\"avatar\"\n />\n </div>\n `,\n )}\n\n <div class=\"content\" part=\"content\">\n <slot name=\"content\"><slot></slot></slot>\n </div>\n\n <div class=\"actions\" part=\"actions\">\n <slot name=\"actions\">${nothing}</slot>\n </div>\n </div>\n `;\n }\n}"],"names":["SkyListitem","LitElement","constructor","super","arguments","this","avatar","value","subheader","selected","dense","disabled","preset","_presets","PresetController","onClick","dispatchEvent","CustomEvent","detail","item","bubbles","composed","setSelected","render","html","when","nothing","styles","css","__decorateClass","property","type","String","prototype","reflect","Boolean","customElement"],"mappings":"6bAqEO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,GAAAC,SAAAC,WACuBC,KAAAC,OAAS,GAETD,KAAAE,MAAQ,GACOF,KAAAG,UAAY,GACXH,KAAAI,UAAW,EACXJ,KAAAK,OAAQ,EACRL,KAAAM,UAAW,EAIZN,KAAAO,OAAS,GAEpDP,KAAQQ,SAAW,IAAIC,EAAiBT,KAAI,CA6GpC,OAAAU,GACFV,KAAKM,UAAYN,KAAKG,WAC1BH,KAAKW,cACH,IAAIC,YAAuC,gBAAiB,CAC1DC,OAAQ,CAAEC,KAAMd,MAChBe,SAAS,EACTC,UAAU,IAGhB,CAEA,WAAAC,CAAYb,GACNJ,KAAKI,WAAaA,IACtBJ,KAAKI,SAAWA,EAClB,CAES,MAAAc,GACP,OAAIlB,KAAKG,UACAgB,CAAA;sEACyDnB,KAAKG;QAIhEgB,CAAA;;;;;wBAKanB,KAAKI,SAAW,OAAS;wBACzBJ,KAAKM,SAAW,OAAS;;iBAEhCN,KAAKU;;UAEZU,EACApB,KAAKC,OACL,IAAMkB,CAAA;;;;sBAIMnB,KAAKC;;;;;;;;;;;;iCAaMoB;;;KAI/B,GAlLW1B,EAeK2B,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAdGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPhC,EACiBiC,UAAA,SAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAHPhC,EAGiBiC,UAAA,QAAA,GACeJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAJxBlC,EAIgCiC,UAAA,YAAA,GACCJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KALzBlC,EAKiCiC,UAAA,WAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KANzBlC,EAMiCiC,UAAA,QAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KAPzBlC,EAOiCiC,UAAA,WAAA,GAIDJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAXxBlC,EAWgCiC,UAAA,SAAA,GAXhCjC,EAAN6B,EAAA,CADNO,EAAc,iBACFpC"}
|
|
1
|
+
{"version":3,"file":"sky-listitem.js","sources":["../../src/sky-listitem/sky-listitem.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyListitemActivateDetail = { item: SkyListitem };\r\n\r\n/**\r\n * @element sky-listitem\r\n *\r\n * @summary List item with optional avatar, actions, subheader mode, and selectable state.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/list\r\n *\r\n * @slot - Fallback label text when `content` is not used.\r\n * @slot content - Main content of the list item (usually label or text).\r\n * @slot actions - Trailing action elements (e.g., icons, buttons).\r\n * @property {string} avatar - Optional avatar image URL.\r\n * @property {string} value - Stable id for selection (`sky-list` `selectedValues` / `list-change`). Default: `\"\"`.\r\n * @property {string} subheader - Subheader text; when set, item renders as a section header.\r\n * @property {boolean} selected - Whether item is selected.\r\n * @property {boolean} dense - Whether compact spacing is used.\r\n * @property {boolean} disabled - Whether interaction is disabled.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @fires {CustomEvent<SkyListitemActivateDetail>} item-activate - Fired when the item is activated.\r\n * @method setSelected Sets selection state programmatically.\r\n *\r\n * @csspart list-item - The main list item container.\r\n * @csspart leading - The leading section (avatar container).\r\n * @csspart avatar - The avatar image element.\r\n * @csspart content - The content wrapper for the main slot.\r\n * @csspart actions - The trailing actions container.\r\n * @csspart subheader - The subheader divider element.\r\n *\r\n * @Behavior\r\n * - Renders either a selectable list row or a non-interactive subheader variant.\r\n * - Emits `item-activate` for parent list orchestration.\r\n * - Supports compact and disabled display variants.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-listitem avatar=\"https://example.com/avatar.jpg\" selected>\r\n * <span slot=\"content\">John Doe</span>\r\n * <button slot=\"actions\" type=\"button\">Action</button>\r\n * </sky-listitem>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-listitem avatar=\"https://example.com/avatar.jpg\" selected @item-activate=\"onActivate\">\r\n * <span slot=\"content\">John Doe</span>\r\n * <button slot=\"actions\" type=\"button\">Action</button>\r\n * </sky-listitem>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return (\r\n * <sky-listitem avatar=\"https://example.com/avatar.jpg\" selected>\r\n * <span slot=\"content\">John Doe</span>\r\n * <button slot=\"actions\" type=\"button\">Action</button>\r\n * </sky-listitem>\r\n * );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-listitem\")\r\nexport class SkyListitem extends LitElement {\r\n @property({ type: String }) avatar = \"\";\r\n /** Optional stable value for list selection (`sky-list` binding). */\r\n @property({ type: String }) value = \"\";\r\n @property({ type: String, reflect: true }) subheader = \"\";\r\n @property({ type: Boolean, reflect: true }) selected = false;\r\n @property({ type: Boolean, reflect: true }) dense = false;\r\n @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n\r\n /** Named prop preset from nearest `sky-config-provider`. */\r\n @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n private _presets = new PresetController(this);\r\n\r\n static override styles = css`\r\n :host {\r\n display: block;\r\n cursor: pointer;\r\n outline: none;\r\n }\r\n\r\n :host([subheader]) {\r\n cursor: default;\r\n }\r\n\r\n :host([disabled]) {\r\n opacity: var(--sky-opacity-disabled, 0.6);\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n }\r\n\r\n .list-item {\r\n display: flex;\r\n align-items: center;\r\n padding: var(--sky-space-2\\\\.5, 10px) var(--sky-space-3\\\\.5, 14px);\r\n border-bottom: var(--sky-border-primary);\r\n border-inline-start: 3px solid transparent;\r\n transition:\r\n background var(--sky-transition-normal, 200ms ease),\r\n border-color var(--sky-transition-normal, 200ms ease),\r\n box-shadow var(--sky-transition-normal, 200ms ease);\r\n color: var(--sky-text-primary);\r\n position: relative;\r\n box-sizing: border-box;\r\n }\r\n\r\n :host(:hover:not([disabled])) .list-item,\r\n :host(:focus-visible) .list-item {\r\n background: var(--sky-hover-primary);\r\n }\r\n\r\n :host(:focus-visible) .list-item {\r\n box-shadow: var(--sky-focus-ring);\r\n }\r\n\r\n :host([selected]) .list-item {\r\n background: var(--sky-hover-secondary);\r\n border-inline-start-color: var(--sky-active-primary);\r\n }\r\n\r\n :host(:last-child) .list-item {\r\n border-bottom: none;\r\n }\r\n\r\n .leading {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-end: var(--sky-space-3, 12px);\r\n flex-shrink: 0;\r\n }\r\n\r\n .avatar {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--sky-radius-full);\r\n object-fit: cover;\r\n background: var(--sky-hover-tertiary);\r\n }\r\n\r\n :host([dense]) .list-item {\r\n padding: var(--sky-space-1\\\\.5, 6px) var(--sky-space-2\\\\.5, 10px);\r\n }\r\n\r\n :host([dense]) .avatar {\r\n width: 32px;\r\n height: 32px;\r\n }\r\n\r\n .content {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n text-align: start;\r\n font-family: var(--sky-font);\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: var(--sky-space-3, 12px);\r\n gap: var(--sky-space-2, 8px);\r\n flex-shrink: 0;\r\n }\r\n\r\n .subheader {\r\n font-family: var(--sky-font);\r\n font-size: var(--sky-font-size-sm);\r\n text-align: start;\r\n color: var(--sky-text-secondary);\r\n padding: var(--sky-space-1\\\\.5, 6px) var(--sky-space-3\\\\.5, 14px);\r\n font-weight: var(--sky-font-weight-semibold);\r\n background: var(--sky-hover-tertiary);\r\n border-bottom: var(--sky-border-primary);\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .list-item {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n private onClick(): void {\r\n if (this.disabled || this.subheader) return;\r\n this.dispatchEvent(\r\n new CustomEvent<SkyListitemActivateDetail>(\"item-activate\", {\r\n detail: { item: this },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n setSelected(selected: boolean): void {\r\n if (this.selected === selected) return;\r\n this.selected = selected;\r\n }\r\n\r\n override render() {\r\n if (this.subheader) {\r\n return html`\r\n <div class=\"subheader\" part=\"subheader\" role=\"presentation\">${this.subheader}</div>\r\n `;\r\n }\r\n\r\n return html`\r\n <div\r\n class=\"list-item\"\r\n part=\"list-item\"\r\n role=\"option\"\r\n aria-selected=${this.selected ? \"true\" : \"false\"}\r\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\r\n tabindex=\"-1\"\r\n @click=${this.onClick}\r\n >\r\n ${when(\r\n this.avatar,\r\n () => html`\r\n <div class=\"leading\" part=\"leading\">\r\n <img\r\n class=\"avatar\"\r\n src=${this.avatar}\r\n alt=\"\"\r\n part=\"avatar\"\r\n />\r\n </div>\r\n `,\r\n )}\r\n\r\n <div class=\"content\" part=\"content\">\r\n <slot name=\"content\"><slot></slot></slot>\r\n </div>\r\n\r\n <div class=\"actions\" part=\"actions\">\r\n <slot name=\"actions\">${nothing}</slot>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}"],"names":["SkyListitem","LitElement","constructor","super","arguments","this","avatar","value","subheader","selected","dense","disabled","preset","_presets","PresetController","onClick","dispatchEvent","CustomEvent","detail","item","bubbles","composed","setSelected","render","html","when","nothing","styles","css","__decorateClass","property","type","String","prototype","reflect","Boolean","customElement"],"mappings":"6bAqEO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,GAAAC,SAAAC,WACuBC,KAAAC,OAAS,GAETD,KAAAE,MAAQ,GACOF,KAAAG,UAAY,GACXH,KAAAI,UAAW,EACXJ,KAAAK,OAAQ,EACRL,KAAAM,UAAW,EAIZN,KAAAO,OAAS,GAEpDP,KAAQQ,SAAW,IAAIC,EAAiBT,KAAI,CA6GpC,OAAAU,GACFV,KAAKM,UAAYN,KAAKG,WAC1BH,KAAKW,cACH,IAAIC,YAAuC,gBAAiB,CAC1DC,OAAQ,CAAEC,KAAMd,MAChBe,SAAS,EACTC,UAAU,IAGhB,CAEA,WAAAC,CAAYb,GACNJ,KAAKI,WAAaA,IACtBJ,KAAKI,SAAWA,EAClB,CAES,MAAAc,GACP,OAAIlB,KAAKG,UACAgB,CAAA;sEACyDnB,KAAKG;QAIhEgB,CAAA;;;;;wBAKanB,KAAKI,SAAW,OAAS;wBACzBJ,KAAKM,SAAW,OAAS;;iBAEhCN,KAAKU;;UAEZU,EACApB,KAAKC,OACL,IAAMkB,CAAA;;;;sBAIMnB,KAAKC;;;;;;;;;;;;iCAaMoB;;;KAI/B,GAlLW1B,EAeK2B,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAdGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPhC,EACiBiC,UAAA,SAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAHPhC,EAGiBiC,UAAA,QAAA,GACeJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAJxBlC,EAIgCiC,UAAA,YAAA,GACCJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KALzBlC,EAKiCiC,UAAA,WAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KANzBlC,EAMiCiC,UAAA,QAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KAPzBlC,EAOiCiC,UAAA,WAAA,GAIDJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAXxBlC,EAWgCiC,UAAA,SAAA,GAXhCjC,EAAN6B,EAAA,CADNO,EAAc,iBACFpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-simple-table.js","sources":["../../src/sky-simple-table/sky-simple-table.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\nimport {\n arrayPropHasChanged,\n coerceArray,\n EMPTY_ARRAY,\n} from \"../helper/utils/stable-array\";\n\nexport type SkySimpleTableCellValue =\n | string\n | number\n | boolean\n | null\n | undefined\n | Date;\n\nexport type SkySimpleTableRow = Record<string, SkySimpleTableCellValue>;\n\nexport type SkySimpleTableColumn = {\n key: string;\n label?: string;\n header?: string;\n align?: \"left\" | \"center\" | \"right\";\n width?: string;\n};\n\n/**\n * @element sky-simple-table\n *\n * @summary Lightweight table for rendering simple object rows from `data` and `columns` props.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/simple-table\n *\n * @csspart wrapper - Scrollable table wrapper.\n * @csspart table - The native table element.\n * @csspart header-cell - Header cells.\n * @csspart row - Body rows.\n * @csspart cell - Body cells.\n * @csspart empty - Empty state message.\n *\n * @property {SkySimpleTableRow[]} data - Plain object rows.\n * @property {SkySimpleTableColumn[]} columns - Column definitions. Uses first row keys when omitted.\n * @property {SkySimpleTableColumn[]} column - Alias for `columns`.\n * @property {string} emptyText - Message shown when there are no rows.\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n *\n * @example\n * ```html\n * <sky-simple-table></sky-simple-table>\n * <script>\n * const table = document.querySelector(\"sky-simple-table\");\n * table.columns = [\n * { key: \"name\", label: \"Name\" },\n * { key: \"role\", label: \"Role\" },\n * { key: \"status\", label: \"Status\" },\n * ];\n * table.data = [\n * { name: \"Aarav Patel\", role: \"Designer\", status: \"Active\" },\n * { name: \"Maya Shah\", role: \"Engineer\", status: \"Away\" },\n * ];\n * </script>\n * ```\n */\n@customElement(\"sky-simple-table\")\nexport class SkySimpleTable extends LitElement {\n private _data: SkySimpleTableRow[] = EMPTY_ARRAY as SkySimpleTableRow[];\n @property({ type: Array, hasChanged: arrayPropHasChanged })\n get data(): SkySimpleTableRow[] {\n return this._data;\n }\n set data(value: SkySimpleTableRow[] | null | undefined) {\n this._data = coerceArray(value);\n }\n\n private _columns: SkySimpleTableColumn[] = EMPTY_ARRAY as SkySimpleTableColumn[];\n @property({ type: Array, hasChanged: arrayPropHasChanged })\n get columns(): SkySimpleTableColumn[] {\n return this._columns;\n }\n set columns(value: SkySimpleTableColumn[] | null | undefined) {\n this._columns = coerceArray(value);\n }\n\n @property({ type: String }) emptyText = \"No data available\";\n\n @property({ type: Array, hasChanged: arrayPropHasChanged })\n get column(): SkySimpleTableColumn[] {\n return this.columns;\n }\n\n set column(value: SkySimpleTableColumn[] | null | undefined) {\n this.columns = coerceArray(value);\n }\n\n\n /** Named prop preset from nearest `sky-config-provider`. */\n @property({ type: String, reflect: true }) preset = \"\";\n\n private _presets = new PresetController(this);\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n color: var(--sky-text-primary);\n font-family: var(--sky-font);\n }\n\n .wrapper {\n width: 100%;\n overflow-x: auto;\n border: var(--sky-border-primary);\n border-radius: var(--sky-radius-secondary);\n background: var(--sky-glass-primary);\n box-shadow: var(--sky-box-shadow-primary);\n }\n\n table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: var(--sky-font-size-sm, 0.875rem);\n }\n\n thead {\n background: var(--sky-glass-secondary);\n }\n\n th,\n td {\n box-sizing: border-box;\n padding: var(--sky-space-3, 12px) var(--sky-space-4, 16px);\n border-bottom: 1px solid var(--sky-border-light);\n text-align: left;\n white-space: nowrap;\n }\n\n th {\n color: var(--sky-text-secondary);\n font-weight: 700;\n letter-spacing: 0.02em;\n }\n\n td {\n color: var(--sky-text-primary);\n }\n\n tbody tr:last-child td {\n border-bottom: 0;\n }\n\n tbody tr {\n transition: background var(--sky-duration-fast, 120ms)\n var(--sky-ease-default, ease);\n }\n\n tbody tr:hover {\n background: var(--sky-hover-primary);\n }\n\n .empty {\n padding: var(--sky-space-6, 24px);\n color: var(--sky-text-secondary);\n text-align: center;\n font-size: var(--sky-font-size-sm, 0.875rem);\n }\n `;\n\n private get _safeData(): SkySimpleTableRow[] {\n return Array.isArray(this.data) ? this.data : [];\n }\n\n private get _resolvedColumns(): SkySimpleTableColumn[] {\n if (Array.isArray(this.columns) && this.columns.length > 0) {\n return this.columns.filter((column) => Boolean(column?.key));\n }\n\n const firstRow = this._safeData[0];\n if (!firstRow) return [];\n\n return Object.keys(firstRow).map((key) => ({\n key,\n label: this._toTitle(key),\n }));\n }\n\n private _toTitle(value: string): string {\n return value\n .replace(/[_-]+/g, \" \")\n .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n .replace(/\\b\\w/g, (char) => char.toUpperCase());\n }\n\n private _cellStyleCache = new WeakMap<\n SkySimpleTableColumn,\n { textAlign?: string; width?: string }\n >();\n\n private _formatCell(value: SkySimpleTableCellValue): string {\n if (value === null || value === undefined) return \"\";\n if (value instanceof Date) return value.toLocaleDateString();\n return String(value);\n }\n\n private _cellStyle(column: SkySimpleTableColumn) {\n const cached = this._cellStyleCache.get(column);\n if (\n cached &&\n cached.textAlign === column.align &&\n cached.width === column.width\n ) {\n return cached;\n }\n const style = {\n textAlign: column.align,\n width: column.width,\n };\n this._cellStyleCache.set(column, style);\n return style;\n }\n\n render() {\n const rows = this._safeData;\n const columns = this._resolvedColumns;\n\n if (!rows.length || !columns.length) {\n return html`\n <div class=\"wrapper\" part=\"wrapper\">\n <div class=\"empty\" part=\"empty\">${this.emptyText}</div>\n </div>\n `;\n }\n\n return html`\n <div class=\"wrapper\" part=\"wrapper\">\n <table part=\"table\">\n <thead>\n <tr>\n ${repeat(\n columns,\n (column) => column.key,\n (column) => html`\n <th\n part=\"header-cell\"\n style=${styleMap(this._cellStyle(column))}\n >\n ${column.header ?? column.label ?? this._toTitle(column.key)}\n </th>\n `,\n )}\n </tr>\n </thead>\n <tbody>\n ${repeat(\n rows,\n (row, index) => String(row.id ?? index),\n (row) => html`\n <tr part=\"row\">\n ${repeat(\n columns,\n (column) => column.key,\n (column) => html`\n <td part=\"cell\" style=${styleMap(this._cellStyle(column))}>\n ${this._formatCell(row[column.key]) || nothing}\n </td>\n `,\n )}\n </tr>\n `,\n )}\n </tbody>\n </table>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"sky-simple-table\": SkySimpleTable;\n }\n}\n"],"names":["SkySimpleTable","LitElement","constructor","super","arguments","this","_data","EMPTY_ARRAY","_columns","emptyText","preset","_presets","PresetController","_cellStyleCache","WeakMap","data","value","coerceArray","columns","column","_safeData","Array","isArray","_resolvedColumns","length","filter","Boolean","key","firstRow","Object","keys","map","label","_toTitle","replace","char","toUpperCase","_formatCell","Date","toLocaleDateString","String","_cellStyle","cached","get","textAlign","align","width","style","set","render","rows","html","repeat","styleMap","header","row","index","id","nothing","styles","css","__decorateClass","property","type","hasChanged","arrayPropHasChanged","prototype","reflect","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sky-simple-table.js","sources":["../../src/sky-simple-table/sky-simple-table.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { repeat } from \"lit/directives/repeat.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport {\r\n arrayPropHasChanged,\r\n coerceArray,\r\n EMPTY_ARRAY,\r\n} from \"../helper/utils/stable-array\";\r\n\r\nexport type SkySimpleTableCellValue =\r\n | string\r\n | number\r\n | boolean\r\n | null\r\n | undefined\r\n | Date;\r\n\r\nexport type SkySimpleTableRow = Record<string, SkySimpleTableCellValue>;\r\n\r\nexport type SkySimpleTableColumn = {\r\n key: string;\r\n label?: string;\r\n header?: string;\r\n align?: \"left\" | \"center\" | \"right\";\r\n width?: string;\r\n};\r\n\r\n/**\r\n * @element sky-simple-table\r\n *\r\n * @summary Lightweight table for rendering simple object rows from `data` and `columns` props.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/simple-table\r\n *\r\n * @csspart wrapper - Scrollable table wrapper.\r\n * @csspart table - The native table element.\r\n * @csspart header-cell - Header cells.\r\n * @csspart row - Body rows.\r\n * @csspart cell - Body cells.\r\n * @csspart empty - Empty state message.\r\n *\r\n * @property {SkySimpleTableRow[]} data - Plain object rows.\r\n * @property {SkySimpleTableColumn[]} columns - Column definitions. Uses first row keys when omitted.\r\n * @property {SkySimpleTableColumn[]} column - Alias for `columns`.\r\n * @property {string} emptyText - Message shown when there are no rows.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-simple-table></sky-simple-table>\r\n * <script>\r\n * const table = document.querySelector(\"sky-simple-table\");\r\n * table.columns = [\r\n * { key: \"name\", label: \"Name\" },\r\n * { key: \"role\", label: \"Role\" },\r\n * { key: \"status\", label: \"Status\" },\r\n * ];\r\n * table.data = [\r\n * { name: \"Aarav Patel\", role: \"Designer\", status: \"Active\" },\r\n * { name: \"Maya Shah\", role: \"Engineer\", status: \"Away\" },\r\n * ];\r\n * </script>\r\n * ```\r\n */\r\n@customElement(\"sky-simple-table\")\r\nexport class SkySimpleTable extends LitElement {\r\n private _data: SkySimpleTableRow[] = EMPTY_ARRAY as SkySimpleTableRow[];\r\n @property({ type: Array, hasChanged: arrayPropHasChanged })\r\n get data(): SkySimpleTableRow[] {\r\n return this._data;\r\n }\r\n set data(value: SkySimpleTableRow[] | null | undefined) {\r\n this._data = coerceArray(value);\r\n }\r\n\r\n private _columns: SkySimpleTableColumn[] = EMPTY_ARRAY as SkySimpleTableColumn[];\r\n @property({ type: Array, hasChanged: arrayPropHasChanged })\r\n get columns(): SkySimpleTableColumn[] {\r\n return this._columns;\r\n }\r\n set columns(value: SkySimpleTableColumn[] | null | undefined) {\r\n this._columns = coerceArray(value);\r\n }\r\n\r\n @property({ type: String }) emptyText = \"No data available\";\r\n\r\n @property({ type: Array, hasChanged: arrayPropHasChanged })\r\n get column(): SkySimpleTableColumn[] {\r\n return this.columns;\r\n }\r\n\r\n set column(value: SkySimpleTableColumn[] | null | undefined) {\r\n this.columns = coerceArray(value);\r\n }\r\n\r\n\r\n /** Named prop preset from nearest `sky-config-provider`. */\r\n @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n private _presets = new PresetController(this);\r\n\r\n static styles = css`\r\n :host {\r\n display: block;\r\n width: 100%;\r\n color: var(--sky-text-primary);\r\n font-family: var(--sky-font);\r\n }\r\n\r\n .wrapper {\r\n width: 100%;\r\n overflow-x: auto;\r\n border: var(--sky-border-primary);\r\n border-radius: var(--sky-radius-secondary);\r\n background: var(--sky-glass-primary);\r\n box-shadow: var(--sky-box-shadow-primary);\r\n }\r\n\r\n table {\r\n width: 100%;\r\n min-width: max-content;\r\n border-collapse: collapse;\r\n font-size: var(--sky-font-size-sm, 0.875rem);\r\n }\r\n\r\n thead {\r\n background: var(--sky-glass-secondary);\r\n }\r\n\r\n th,\r\n td {\r\n box-sizing: border-box;\r\n padding: var(--sky-space-3, 12px) var(--sky-space-4, 16px);\r\n border-bottom: 1px solid var(--sky-border-light);\r\n text-align: left;\r\n white-space: nowrap;\r\n }\r\n\r\n th {\r\n color: var(--sky-text-secondary);\r\n font-weight: 700;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n td {\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n tbody tr:last-child td {\r\n border-bottom: 0;\r\n }\r\n\r\n tbody tr {\r\n transition: background var(--sky-duration-fast, 120ms)\r\n var(--sky-ease-default, ease);\r\n }\r\n\r\n tbody tr:hover {\r\n background: var(--sky-hover-primary);\r\n }\r\n\r\n .empty {\r\n padding: var(--sky-space-6, 24px);\r\n color: var(--sky-text-secondary);\r\n text-align: center;\r\n font-size: var(--sky-font-size-sm, 0.875rem);\r\n }\r\n `;\r\n\r\n private get _safeData(): SkySimpleTableRow[] {\r\n return Array.isArray(this.data) ? this.data : [];\r\n }\r\n\r\n private get _resolvedColumns(): SkySimpleTableColumn[] {\r\n if (Array.isArray(this.columns) && this.columns.length > 0) {\r\n return this.columns.filter((column) => Boolean(column?.key));\r\n }\r\n\r\n const firstRow = this._safeData[0];\r\n if (!firstRow) return [];\r\n\r\n return Object.keys(firstRow).map((key) => ({\r\n key,\r\n label: this._toTitle(key),\r\n }));\r\n }\r\n\r\n private _toTitle(value: string): string {\r\n return value\r\n .replace(/[_-]+/g, \" \")\r\n .replace(/([a-z])([A-Z])/g, \"$1 $2\")\r\n .replace(/\\b\\w/g, (char) => char.toUpperCase());\r\n }\r\n\r\n private _cellStyleCache = new WeakMap<\r\n SkySimpleTableColumn,\r\n { textAlign?: string; width?: string }\r\n >();\r\n\r\n private _formatCell(value: SkySimpleTableCellValue): string {\r\n if (value === null || value === undefined) return \"\";\r\n if (value instanceof Date) return value.toLocaleDateString();\r\n return String(value);\r\n }\r\n\r\n private _cellStyle(column: SkySimpleTableColumn) {\r\n const cached = this._cellStyleCache.get(column);\r\n if (\r\n cached &&\r\n cached.textAlign === column.align &&\r\n cached.width === column.width\r\n ) {\r\n return cached;\r\n }\r\n const style = {\r\n textAlign: column.align,\r\n width: column.width,\r\n };\r\n this._cellStyleCache.set(column, style);\r\n return style;\r\n }\r\n\r\n render() {\r\n const rows = this._safeData;\r\n const columns = this._resolvedColumns;\r\n\r\n if (!rows.length || !columns.length) {\r\n return html`\r\n <div class=\"wrapper\" part=\"wrapper\">\r\n <div class=\"empty\" part=\"empty\">${this.emptyText}</div>\r\n </div>\r\n `;\r\n }\r\n\r\n return html`\r\n <div class=\"wrapper\" part=\"wrapper\">\r\n <table part=\"table\">\r\n <thead>\r\n <tr>\r\n ${repeat(\r\n columns,\r\n (column) => column.key,\r\n (column) => html`\r\n <th\r\n part=\"header-cell\"\r\n style=${styleMap(this._cellStyle(column))}\r\n >\r\n ${column.header ?? column.label ?? this._toTitle(column.key)}\r\n </th>\r\n `,\r\n )}\r\n </tr>\r\n </thead>\r\n <tbody>\r\n ${repeat(\r\n rows,\r\n (row, index) => String(row.id ?? index),\r\n (row) => html`\r\n <tr part=\"row\">\r\n ${repeat(\r\n columns,\r\n (column) => column.key,\r\n (column) => html`\r\n <td part=\"cell\" style=${styleMap(this._cellStyle(column))}>\r\n ${this._formatCell(row[column.key]) || nothing}\r\n </td>\r\n `,\r\n )}\r\n </tr>\r\n `,\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"sky-simple-table\": SkySimpleTable;\r\n }\r\n}\r\n"],"names":["SkySimpleTable","LitElement","constructor","super","arguments","this","_data","EMPTY_ARRAY","_columns","emptyText","preset","_presets","PresetController","_cellStyleCache","WeakMap","data","value","coerceArray","columns","column","_safeData","Array","isArray","_resolvedColumns","length","filter","Boolean","key","firstRow","Object","keys","map","label","_toTitle","replace","char","toUpperCase","_formatCell","Date","toLocaleDateString","String","_cellStyle","cached","get","textAlign","align","width","style","set","render","rows","html","repeat","styleMap","header","row","index","id","nothing","styles","css","__decorateClass","property","type","hasChanged","arrayPropHasChanged","prototype","reflect","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-theme-provider.js","sources":["../../src/sky-theme-provider/sky-theme-provider.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createContext, provide } from \"@lit/context\";\n\nexport interface ThemeConfig {\n light: ThemeModeConfig;\n dark: ThemeModeConfig;\n}\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\nexport type PartialTheme = Partial<ThemeConfig>;\n\n/** Extended ThemeModeConfig: added typography & spacing tokens */\nexport interface ThemeModeConfig {\n glass: {\n baseColor: string;\n /** Optional per-level base shades; if omitted, secondary/tertiary are derived by mixing baseColor with foreground */\n baseShades?: {\n primary?: string;\n secondary?: string;\n tertiary?: string;\n };\n opacities: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"solid\", number>;\n };\n glassHover: {\n color: string;\n opacity: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"solid\", number>;\n };\n overlay: {\n color: string;\n opacities: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"solid\", number>;\n };\n\n fontFamily: string;\n /** Monospace font stack; used for --sky-font-mono and bounded mono presets */\n fontFamilyMono?: string;\n\n /* typography scales & spacing */\n fontSize?: Record<\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\",\n string\n >;\n fontWeight?: Record<\n \"thin\" | \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\" | \"extrabold\",\n string\n >;\n lineHeight?: Record<\n \"tight\" | \"snug\" | \"normal\" | \"relaxed\" | \"loose\",\n string\n >;\n letterSpacing?: Record<\n \"tighter\" | \"tight\" | \"normal\" | \"wide\" | \"wider\",\n string\n >;\n glassSurface?: {\n top: number;\n bottom: number;\n };\n spacing?: Record<\n | \"0\"\n | \"px\"\n | \"0.5\"\n | \"1\"\n | \"1.5\"\n | \"2\"\n | \"2.5\"\n | \"3\"\n | \"3.5\"\n | \"4\"\n | \"5\"\n | \"6\"\n | \"8\"\n | \"10\"\n | \"12\"\n | \"16\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"40\"\n | \"48\"\n | \"56\"\n | \"64\",\n string\n >;\n\n /* Simplified color system - only primaries needed */\n color: {\n /* Only primary colors needed - everything else auto-generated */\n background: string;\n foreground: string;\n active: string;\n success: string;\n warning: string;\n danger: string;\n info: string;\n };\n\n /* Existing properties */\n blur: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\n radius: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"full\", string>;\n boxshadow: Record<\n \"primary\" | \"secondary\" | \"tertiary\" | \"inset\" | \"hover\",\n string\n >;\n brightness: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\n saturation: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\n border: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\n separator: string;\n\n /** Motion: duration and easing for consistent, themeable transitions */\n motion?: {\n duration?: Record<\"instant\" | \"fast\" | \"normal\" | \"slow\", string>;\n ease?: Record<\"default\" | \"in\" | \"out\" | \"inOut\" | \"bounce\", string>;\n };\n /** Z-index scale for predictable stacking (dropdown, modal, toast, etc.) */\n zIndex?: Record<\n \"base\" | \"dropdown\" | \"sticky\" | \"fixed\" | \"modal\" | \"popover\" | \"toast\" | \"max\",\n number\n >;\n /** Opacity tokens for disabled/muted states */\n opacity?: Record<\"disabled\" | \"muted\" | \"subtle\", number>;\n /** Optional native scrollbar color tints; sizing stays platform-native. */\n scrollbar?: {\n thumb?: string;\n thumbHover?: string;\n track?: string;\n };\n}\n\nconst THEME_KEY = \"theme\";\n\n/* default theme: Pure Glass (sky-ui-example DEFAULT_SITE_THEME_ID) */\nexport const defaultTheme: ThemeConfig = {\n light: {\n glass: {\n baseColor: \"#FFFFFF\",\n baseShades: {\n secondary: \"#F1F5F9\",\n tertiary: \"#E2E8F0\",\n },\n /* Ultra-thin frosted fill — hierarchy via shade + blur */\n opacities: { primary: 0.1, secondary: 0.12, tertiary: 0.16, solid: 0.18 },\n },\n overlay: {\n color: \"#E8EEF6\",\n opacities: { primary: 0.75, secondary: 0.33, tertiary: 0.19, solid: 1.0 },\n },\n glassHover: {\n color: \"#0F172A\",\n opacity: { primary: 0.06, secondary: 0.08, tertiary: 0.1, solid: 1.0 },\n },\n fontFamily:\n \"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n fontFamilyMono:\n \"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace\",\n fontSize: {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n md: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n },\n fontWeight: {\n thin: \"100\",\n light: \"300\",\n normal: \"400\",\n medium: \"500\",\n semibold: \"600\",\n bold: \"700\",\n extrabold: \"800\",\n },\n lineHeight: {\n tight: \"1.1\",\n snug: \"1.25\",\n normal: \"1.5\",\n relaxed: \"1.75\",\n loose: \"2\",\n },\n letterSpacing: {\n tighter: \"-0.03em\",\n tight: \"-0.015em\",\n normal: \"0em\",\n wide: \"0.02em\",\n wider: \"0.04em\",\n },\n spacing: {\n \"0\": \"0px\",\n px: \"1px\",\n \"0.5\": \"0.125rem\",\n \"1\": \"0.25rem\",\n \"1.5\": \"0.375rem\",\n \"2\": \"0.5rem\",\n \"2.5\": \"0.625rem\",\n \"3\": \"0.75rem\",\n \"3.5\": \"0.875rem\",\n \"4\": \"1rem\",\n \"5\": \"1.25rem\",\n \"6\": \"1.5rem\",\n \"8\": \"2rem\",\n \"10\": \"2.5rem\",\n \"12\": \"3rem\",\n \"16\": \"4rem\",\n \"20\": \"5rem\",\n \"24\": \"6rem\",\n \"32\": \"8rem\",\n \"40\": \"10rem\",\n \"48\": \"12rem\",\n \"56\": \"14rem\",\n \"64\": \"16rem\",\n },\n\n color: {\n background: \"#E8EEF6\",\n foreground: \"#0F172A\",\n active: \"#2563EB\",\n success: \"#17C964\",\n warning: \"#F5A524\",\n danger: \"#FF383C\",\n info: \"#6366F1\",\n },\n\n blur: { primary: \"12px\", secondary: \"24px\", tertiary: \"32px\" },\n radius: {\n primary: \"8px\",\n secondary: \"12px\",\n tertiary: \"16px\",\n full: \"9999px\",\n },\n boxshadow: {\n primary: \"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)\",\n secondary: \"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)\",\n tertiary: \"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)\",\n inset:\n \"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)\",\n hover: \"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)\",\n },\n brightness: { primary: \"1.04\", secondary: \"1.08\", tertiary: \"1.10\" },\n saturation: { primary: \"1.08\", secondary: \"1.14\", tertiary: \"1.20\" },\n separator: \"rgba(15, 23, 42, 0.12)\",\n border: {\n primary: \"1px solid rgba(15, 23, 42, 0.14)\",\n secondary:\n \"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)\",\n tertiary:\n \"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)\",\n },\n glassSurface: { top: 0.14, bottom: 0.03 },\n motion: {\n duration: { instant: \"0ms\", fast: \"120ms\", normal: \"200ms\", slow: \"300ms\" },\n ease: {\n default: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n in: \"cubic-bezier(0.4, 0, 1, 1)\",\n out: \"cubic-bezier(0, 0, 0.2, 1)\",\n inOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n bounce: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n },\n },\n zIndex: {\n base: 0,\n dropdown: 1000,\n sticky: 1100,\n fixed: 1200,\n modal: 1300,\n popover: 1400,\n toast: 1500,\n max: 9999,\n },\n opacity: { disabled: 0.5, muted: 0.7, subtle: 0.85 },\n scrollbar: {\n track: \"transparent\",\n thumb:\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)\",\n thumbHover:\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)\",\n },\n },\n\n dark: {\n glass: {\n baseColor: \"#141B2D\",\n baseShades: {\n secondary: \"#1A2235\",\n tertiary: \"#222C42\",\n },\n opacities: { primary: 0.16, secondary: 0.18, tertiary: 0.22, solid: 0.24 },\n },\n overlay: {\n color: \"#0B1020\",\n opacities: { primary: 0.75, secondary: 0.33, tertiary: 0.19, solid: 1.0 },\n },\n glassHover: {\n color: \"#E2E8F0\",\n opacity: { primary: 0.08, secondary: 0.1, tertiary: 0.12, solid: 1.0 },\n },\n fontFamily:\n \"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n fontFamilyMono:\n \"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace\",\n fontSize: {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n md: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n },\n fontWeight: {\n thin: \"100\",\n light: \"300\",\n normal: \"400\",\n medium: \"500\",\n semibold: \"600\",\n bold: \"700\",\n extrabold: \"800\",\n },\n lineHeight: {\n tight: \"1.1\",\n snug: \"1.25\",\n normal: \"1.5\",\n relaxed: \"1.75\",\n loose: \"2\",\n },\n letterSpacing: {\n tighter: \"-0.03em\",\n tight: \"-0.015em\",\n normal: \"0em\",\n wide: \"0.02em\",\n wider: \"0.04em\",\n },\n spacing: {\n \"0\": \"0px\",\n px: \"1px\",\n \"0.5\": \"0.125rem\",\n \"1\": \"0.25rem\",\n \"1.5\": \"0.375rem\",\n \"2\": \"0.5rem\",\n \"2.5\": \"0.625rem\",\n \"3\": \"0.75rem\",\n \"3.5\": \"0.875rem\",\n \"4\": \"1rem\",\n \"5\": \"1.25rem\",\n \"6\": \"1.5rem\",\n \"8\": \"2rem\",\n \"10\": \"2.5rem\",\n \"12\": \"3rem\",\n \"16\": \"4rem\",\n \"20\": \"5rem\",\n \"24\": \"6rem\",\n \"32\": \"8rem\",\n \"40\": \"10rem\",\n \"48\": \"12rem\",\n \"56\": \"14rem\",\n \"64\": \"16rem\",\n },\n\n color: {\n background: \"#0B1020\",\n foreground: \"#E2E8F0\",\n active: \"#2563EB\",\n success: \"#17C964\",\n warning: \"#F7B750\",\n danger: \"#DB3B3E\",\n info: \"#818CF8\",\n },\n\n blur: { primary: \"12px\", secondary: \"24px\", tertiary: \"32px\" },\n radius: {\n primary: \"8px\",\n secondary: \"12px\",\n tertiary: \"16px\",\n full: \"9999px\",\n },\n boxshadow: {\n primary: \"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)\",\n secondary: \"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)\",\n tertiary: \"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)\",\n inset:\n \"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)\",\n hover: \"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)\",\n },\n brightness: { primary: \"1.04\", secondary: \"1.08\", tertiary: \"1.10\" },\n saturation: { primary: \"1.08\", secondary: \"1.14\", tertiary: \"1.20\" },\n separator: \"rgba(226, 232, 240, 0.1)\",\n border: {\n primary: \"1px solid rgba(226, 232, 240, 0.14)\",\n secondary:\n \"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)\",\n tertiary:\n \"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)\",\n },\n glassSurface: { top: 0.16, bottom: 0.05 },\n motion: {\n duration: { instant: \"0ms\", fast: \"120ms\", normal: \"200ms\", slow: \"300ms\" },\n ease: {\n default: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n in: \"cubic-bezier(0.4, 0, 1, 1)\",\n out: \"cubic-bezier(0, 0, 0.2, 1)\",\n inOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n bounce: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n },\n },\n zIndex: {\n base: 0,\n dropdown: 1000,\n sticky: 1100,\n fixed: 1200,\n modal: 1300,\n popover: 1400,\n toast: 1500,\n max: 9999,\n },\n opacity: { disabled: 0.5, muted: 0.7, subtle: 0.85 },\n scrollbar: {\n track: \"transparent\",\n thumb:\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)\",\n thumbHover:\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)\",\n },\n },\n};\n\nexport function getThemePreference(): ThemePreference {\n try {\n if (typeof localStorage !== \"undefined\") {\n const v = localStorage.getItem(THEME_KEY) as ThemePreference | null;\n return v === \"light\" || v === \"dark\" || v === \"system\" ? v : \"system\";\n }\n } catch { }\n return \"system\";\n}\n\nexport function resolveActualTheme(pref: ThemePreference): \"light\" | \"dark\" {\n if (typeof window === \"undefined\") return \"light\";\n if (pref === \"system\") {\n try {\n if (window.matchMedia) {\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n }\n } catch { }\n return \"light\";\n }\n return pref;\n}\n\n/** Returns \"light\" | \"dark\" (prefers provider, falls back to system). SSR-safe: returns \"light\" when document is undefined. */\nexport function getCurrentTheme(): \"light\" | \"dark\" {\n if (typeof document === \"undefined\") return \"light\";\n const de = document.documentElement;\n const v = de.getAttribute(\"data-theme\");\n if (v === \"light\" || v === \"dark\") return v;\n return typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n}\n\n/** Subscribe to theme changes. Returns an unsubscribe function. SSR-safe: returns no-op when window is undefined. */\nexport function onThemeChange(\n cb: (mode: \"light\" | \"dark\", preference?: ThemePreference) => void,\n) {\n if (typeof window === \"undefined\") return () => {};\n const handler = (e: Event) => {\n const { mode, preference } = (e as CustomEvent).detail || {};\n if (mode === \"light\" || mode === \"dark\") cb(mode, preference);\n else cb(getCurrentTheme(), undefined);\n };\n window.addEventListener(\"sky-theme\", handler);\n\n queueMicrotask(() => cb(getCurrentTheme(), undefined));\n return () => window.removeEventListener(\"sky-theme\", handler);\n}\n\nfunction deepMerge<T>(target: T, source: Partial<T>): T {\n const t: any = Array.isArray(target)\n ? [...(target as any)]\n : { ...(target as any) };\n for (const k in source) {\n const sv: any = (source as any)[k];\n if (sv && typeof sv === \"object\" && !Array.isArray(sv)) {\n t[k] = deepMerge((target as any)[k], sv);\n } else {\n t[k] = sv ?? (target as any)[k];\n }\n }\n return t;\n}\n\nlet lastMergeUser: Partial<ThemeConfig> | undefined;\nlet lastMergeResult: ThemeConfig | undefined;\n\nexport function mergeTheme(userTheme: Partial<ThemeConfig>): ThemeConfig {\n if (userTheme === lastMergeUser && lastMergeResult) return lastMergeResult;\n lastMergeResult = {\n light: deepMerge(defaultTheme.light, userTheme.light ?? {}),\n dark: deepMerge(defaultTheme.dark, userTheme.dark ?? {}),\n };\n lastMergeUser = userTheme;\n return lastMergeResult;\n}\n\n/* color & glass helpers */\n\nfunction clampAlpha(alpha: number | undefined, fallback = 1): number {\n const value =\n typeof alpha === \"number\" && Number.isFinite(alpha) ? alpha : fallback;\n\n return Math.max(0, Math.min(1, value));\n}\n\nfunction clampPercent(value: number): number {\n if (!Number.isFinite(value)) return 100;\n return Math.max(0, Math.min(100, Math.round(value)));\n}\n\nfunction isOKLCH(value: string): boolean {\n return /^oklch\\(\\s*[\\d.]+\\s+[\\d.]+\\s+[\\d.]+(?:deg)?(?:\\s*\\/\\s*[\\d.]+%?)?\\s*\\)$/i.test(\n value.trim(),\n );\n}\n\nfunction toOKLCH(hexOrOKLCH: string): string {\n if (isOKLCH(hexOrOKLCH)) return hexOrOKLCH;\n return hexOrOKLCH;\n}\n\nfunction toOKLCHAlpha(hexOrOKLCH: string, alpha: number): string {\n const safeAlpha = clampAlpha(alpha);\n const alphaPct = clampPercent(safeAlpha * 100);\n\n if (safeAlpha <= 0) return \"transparent\";\n if (safeAlpha >= 1) return toOKLCH(hexOrOKLCH);\n\n if (isOKLCH(hexOrOKLCH)) {\n const value = hexOrOKLCH.trim();\n\n return value.includes(\"/\")\n ? value\n : value.replace(/\\)$/, ` / ${alphaPct}%)`);\n }\n\n return `color-mix(in oklch, ${hexOrOKLCH} ${alphaPct}%, transparent)`;\n}\n\nfunction mixOKLCH(colorA: string, amountA: number, colorB: string): string {\n return `color-mix(in oklch, ${colorA} ${clampPercent(amountA)}%, ${colorB})`;\n}\n\n/**\n * generateVarMap emits typography & spacing tokens and semantic role tokens.\n *\n * Glass hierarchy is shade-based with optional per-tier fill opacity:\n * - primary = base/default glass shade\n * - secondary = raised/elevated glass shade\n * - tertiary = floating/modal/popover glass shade\n * - Fill strength: glass.opacities.primary | secondary | tertiary\n * (secondary/tertiary fall back to primary when omitted).\n */\nfunction generateVarMap(\n theme: ThemeModeConfig,\n isDark: boolean,\n): Record<string, string> {\n const out: Record<string, string> = {};\n\n const set = (k: string, v?: string) => {\n if (v != null) out[`--${k}`] = v;\n };\n\n /* base contrast tokens */\n\n set(\"sky-text-dark\", toOKLCH(isDark ? \"#FFFFFF\" : \"#0B1020\"));\n set(\"sky-text-light\", toOKLCH(isDark ? \"#030712\" : \"#FFFFFF\"));\n\n /* font family tokens */\n\n const fontSans = theme.fontFamily;\n const fontMono = theme.fontFamilyMono ?? \"ui-monospace, monospace\";\n\n set(\"sky-font\", fontSans);\n set(\"sky-font-sans\", fontSans);\n set(\"sky-font-mono\", fontMono);\n\n /* background + text tokens */\n\n set(\"sky-background-color\", toOKLCH(theme.color.background));\n set(\"sky-text-primary\", toOKLCH(theme.color.foreground));\n\n const textSteps: Record<\n \"secondary\" | \"tertiary\" | \"quaternary\" | \"quinary\",\n number\n > = isDark\n ? {\n secondary: 82,\n tertiary: 66,\n quaternary: 50,\n quinary: 36,\n }\n : {\n secondary: 76,\n tertiary: 60,\n quaternary: 44,\n quinary: 30,\n };\n\n Object.entries(textSteps).forEach(([level, pct]) => {\n set(\n `sky-text-${level}`,\n `color-mix(in oklch, var(--sky-text-primary) ${pct}%, var(--sky-background-color))`,\n );\n });\n\n [\"primary\", \"secondary\", \"tertiary\", \"quaternary\", \"quinary\"].forEach(\n (level) => {\n set(\n `sky-text-${level}-hover`,\n `color-mix(in oklch, var(--sky-text-${level}) 86%, var(--sky-text-dark))`,\n );\n },\n );\n\n /* shade-based glass generation */\n\n const { baseColor, baseShades, opacities: op } = theme.glass;\n\n const glassShadeAnchor = theme.color.foreground;\n\n const glassShadeSteps = isDark\n ? {\n primary: 96,\n secondary: 88,\n tertiary: 78,\n }\n : {\n primary: 96,\n secondary: 90,\n tertiary: 82,\n };\n\n const glassPrimaryShade =\n baseShades?.primary ??\n mixOKLCH(\n baseColor,\n glassShadeSteps.primary,\n glassShadeAnchor,\n );\n\n const glassSecondaryShade =\n baseShades?.secondary ??\n mixOKLCH(baseColor, glassShadeSteps.secondary, glassShadeAnchor);\n\n const glassTertiaryShade =\n baseShades?.tertiary ??\n mixOKLCH(baseColor, glassShadeSteps.tertiary, glassShadeAnchor);\n\n const glassStrengthFallback = isDark ? 0.4 : 0.34;\n const glassStrength = {\n primary: clampAlpha(op.primary, glassStrengthFallback),\n secondary: clampAlpha(\n op.secondary ?? op.primary,\n glassStrengthFallback\n ),\n tertiary: clampAlpha(op.tertiary ?? op.primary, glassStrengthFallback),\n // Solid surface fill (inputs / actions). Defaults fully opaque, but themes\n // can lower `opacities.solid` for a translucent \"frosted solid\" look.\n solid: clampAlpha(op.solid, 1),\n };\n\n set(\n \"sky-glass-primary\",\n toOKLCHAlpha(glassPrimaryShade, glassStrength.primary)\n );\n set(\n \"sky-glass-secondary\",\n toOKLCHAlpha(glassSecondaryShade, glassStrength.secondary)\n );\n set(\n \"sky-glass-tertiary\",\n toOKLCHAlpha(glassTertiaryShade, glassStrength.tertiary)\n );\n\n set(\"sky-glass-solid\", toOKLCHAlpha(baseColor, glassStrength.solid));\n\n const glassSurfaceTopAlpha = clampAlpha(\n theme.glassSurface?.top,\n isDark ? 0.26 : 0.24,\n );\n\n const glassSurfaceBottomAlpha = clampAlpha(\n theme.glassSurface?.bottom,\n isDark ? 0.08 : 0.06,\n );\n\n set(\n \"sky-glass-surface\",\n `linear-gradient(\n 180deg,\n ${toOKLCHAlpha(glassSecondaryShade, glassSurfaceTopAlpha)},\n ${toOKLCHAlpha(glassPrimaryShade, glassSurfaceBottomAlpha)}\n )`,\n );\n\n /* overlay tokens */\n\n Object.entries(theme.overlay.opacities).forEach(([k, v]) => {\n set(`sky-overlay-${k}`, toOKLCHAlpha(theme.overlay.color, v));\n });\n\n /* hover overlay tokens */\n\n Object.entries(theme.glassHover.opacity).forEach(([k, v]) => {\n set(`sky-hover-${k}`, toOKLCHAlpha(theme.glassHover.color, v));\n });\n\n /* border / radius / blur / effects */\n\n Object.entries(theme.border).forEach(([k, v]) => {\n set(`sky-border-${k}`, v);\n });\n\n Object.entries(theme.radius).forEach(([k, v]) => {\n set(`sky-radius-${k}`, v);\n });\n\n Object.entries(theme.blur).forEach(([k, v]) => {\n set(`sky-blur-${k}`, `blur(${v})`);\n });\n\n Object.entries(theme.brightness).forEach(([k, v]) => {\n set(`sky-brightness-${k}`, `brightness(${v})`);\n });\n\n Object.entries(theme.saturation).forEach(([k, v]) => {\n set(`sky-saturation-${k}`, `saturate(${v})`);\n });\n\n Object.entries(theme.boxshadow).forEach(([k, v]) => {\n set(`sky-box-shadow-${k}`, v);\n });\n\n set(\"sky-border-light\", theme.separator);\n\n /* motion tokens */\n\n Object.entries(theme.motion?.duration ?? {}).forEach(([k, v]) => {\n set(`sky-duration-${k}`, v);\n });\n\n Object.entries(theme.motion?.ease ?? {}).forEach(([k, v]) => {\n set(`sky-ease-${k}`, v);\n });\n\n set(\n \"sky-transition-default\",\n [\n \"background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n ].join(\", \"),\n );\n\n set(\n \"sky-transition-fast\",\n [\n \"background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n \"opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\n ].join(\", \"),\n );\n\n /* z-index tokens */\n\n Object.entries(theme.zIndex ?? {}).forEach(([k, v]) => {\n set(`sky-z-${k}`, String(v));\n });\n\n /* opacity tokens */\n\n Object.entries(theme.opacity ?? {}).forEach(([k, v]) => {\n set(`sky-opacity-${k}`, String(v));\n });\n\n /* native scrollbar color tokens (size stays OS-native) */\n\n const scrollbar = theme.scrollbar;\n set(\"sky-scrollbar-track\", scrollbar?.track ?? \"transparent\");\n set(\n \"sky-scrollbar-thumb\",\n scrollbar?.thumb ??\n (isDark\n ? \"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)\"\n : \"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)\"),\n );\n set(\n \"sky-scrollbar-thumb-hover\",\n scrollbar?.thumbHover ??\n (isDark\n ? \"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))\"\n : \"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))\"),\n );\n\n /* text shadow */\n\n set(\n \"sky-text-shadow-on-glass\",\n isDark\n ? \"0 1px 2px rgba(0,0,0,0.45)\"\n : \"0 1px 1px rgba(255,255,255,0.55)\",\n );\n\n /* semantic color scales */\n\n const semanticColors = [\n \"active\",\n \"success\",\n \"warning\",\n \"danger\",\n \"info\",\n ] as const;\n\n semanticColors.forEach((key) => {\n const baseColor = theme.color[key];\n\n set(`sky-${key}-primary`, baseColor);\n\n set(\n `sky-${key}-secondary`,\n `color-mix(in oklch, var(--sky-${key}-primary) 82%, var(--sky-background-color))`,\n );\n\n set(\n `sky-${key}-tertiary`,\n `color-mix(in oklch, var(--sky-${key}-primary) 62%, var(--sky-background-color))`,\n );\n\n set(\n `sky-${key}-quaternary`,\n `color-mix(in oklch, var(--sky-${key}-primary) 42%, var(--sky-background-color))`,\n );\n\n set(\n `sky-${key}-quinary`,\n `color-mix(in oklch, var(--sky-${key}-primary) 24%, var(--sky-background-color))`,\n );\n\n set(\n `sky-${key}-primary-dark`,\n `color-mix(in oklch, var(--sky-${key}-primary) 88%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-secondary-dark`,\n `color-mix(in oklch, var(--sky-${key}-primary) 72%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-tertiary-dark`,\n `color-mix(in oklch, var(--sky-${key}-primary) 56%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-quaternary-dark`,\n `color-mix(in oklch, var(--sky-${key}-primary) 40%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-quinary-dark`,\n `color-mix(in oklch, var(--sky-${key}-primary) 28%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-g0`,\n `color-mix(in oklch, var(--sky-${key}-primary) 12%, transparent)`,\n );\n\n set(\n `sky-${key}-g1`,\n `color-mix(in oklch, var(--sky-${key}-primary) 24%, transparent)`,\n );\n\n set(\n `sky-${key}-g2`,\n `color-mix(in oklch, var(--sky-${key}-primary) 48%, transparent)`,\n );\n });\n\n /* semantic hover tokens */\n\n semanticColors.forEach((key) => {\n set(\n `sky-${key}-primary-hover`,\n `color-mix(in oklch, var(--sky-${key}-primary) 86%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-secondary-hover`,\n `color-mix(in oklch, var(--sky-${key}-secondary) 86%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-tertiary-hover`,\n `color-mix(in oklch, var(--sky-${key}-tertiary) 86%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-quaternary-hover`,\n `color-mix(in oklch, var(--sky-${key}-quaternary) 86%, var(--sky-text-dark))`,\n );\n\n set(\n `sky-${key}-quinary-hover`,\n `color-mix(in oklch, var(--sky-${key}-quinary) 86%, var(--sky-text-dark))`,\n );\n });\n\n /* ring tokens */\n\n semanticColors.forEach((key) => {\n set(`sky-ring-${key}-1`, `0 0 0 1px var(--sky-${key}-primary)`);\n set(`sky-ring-${key}-2`, `0 0 0 2px var(--sky-${key}-primary)`);\n set(`sky-ring-${key}-3`, `0 0 0 3px var(--sky-${key}-primary)`);\n set(`sky-ring-${key}-4`, `0 0 0 4px var(--sky-${key}-primary)`);\n set(`sky-ring-${key}-5`, `0 0 0 5px var(--sky-${key}-primary)`);\n\n set(\n `sky-ring-${key}-inset-1`,\n `inset 0 0 0 1px var(--sky-${key}-primary)`,\n );\n\n set(\n `sky-ring-${key}-inset-2`,\n `inset 0 0 0 2px var(--sky-${key}-primary)`,\n );\n\n set(\n `sky-ring-${key}-inset-3`,\n `inset 0 0 0 3px var(--sky-${key}-primary)`,\n );\n });\n\n // Focus ring: nested var() resolves on this host, then inherits substituted.\n // Components that set `--sky-focus-ring-color` must also redeclare `--sky-focus-ring`\n // (see `helper/styles/focus-ring.ts`).\n set(\"sky-focus-ring-color\", \"var(--sky-active-primary)\");\n set(\n \"sky-focus-ring\",\n \"0 0 0 3px color-mix(in oklch, var(--sky-focus-ring-color, var(--sky-active-primary)) 42%, transparent)\",\n );\n\n set(\"sky-focus-ring-offset\", \"2px\");\n\n set(\"sky-text-white\", \"oklch(1 0 0)\");\n set(\"sky-text-black\", \"oklch(0 0 0)\");\n\n /* on-color fallbacks (solid fills; prefer CSS contrast-color() when supported) */\n set(\"sky-on-color-fallback-light\", \"var(--sky-text-white)\");\n set(\"sky-on-color-fallback-dark\", \"var(--sky-text-black)\");\n\n // Static no-@supports fallbacks (assume dark fill → light FG). Components that\n // paint solid fills should enhance with contrast-color(var(--_fill)).\n set(\"sky-on-active-primary\", \"var(--sky-on-color-fallback-light)\");\n set(\"sky-on-success-primary\", \"var(--sky-on-color-fallback-light)\");\n set(\"sky-on-warning-primary\", \"var(--sky-on-color-fallback-light)\");\n set(\"sky-on-danger-primary\", \"var(--sky-on-color-fallback-light)\");\n set(\"sky-on-info-primary\", \"var(--sky-on-color-fallback-light)\");\n\n /* typography scale tokens */\n\n Object.entries(theme.fontSize ?? {}).forEach(([k, v]) => {\n set(`sky-font-size-${k}`, v);\n });\n\n Object.entries(theme.fontWeight ?? {}).forEach(([k, v]) => {\n set(`sky-font-weight-${k}`, v);\n });\n\n Object.entries(theme.lineHeight ?? {}).forEach(([k, v]) => {\n set(`sky-line-height-${k}`, v);\n });\n\n Object.entries(theme.letterSpacing ?? {}).forEach(([k, v]) => {\n set(`sky-letter-spacing-${k}`, v);\n });\n\n /* font shorthand presets */\n\n const getFontSize = (key: string, fallback: string) =>\n (theme.fontSize as Record<string, string> | undefined)?.[key] ?? fallback;\n\n const getLineHeight = (key: string, fallback: string) =>\n (theme.lineHeight as Record<string, string> | undefined)?.[key] ??\n fallback;\n\n const fontPresets: Array<{ key: string; size: string; line: string }> = [\n { key: \"xs\", size: \"xs\", line: \"tight\" },\n { key: \"sm\", size: \"sm\", line: \"snug\" },\n { key: \"md\", size: \"md\", line: \"normal\" },\n { key: \"lg\", size: \"lg\", line: \"snug\" },\n { key: \"xl\", size: \"xl\", line: \"snug\" },\n { key: \"2xl\", size: \"2xl\", line: \"tight\" },\n { key: \"3xl\", size: \"3xl\", line: \"tight\" },\n { key: \"4xl\", size: \"4xl\", line: \"tight\" },\n ];\n\n for (const { key, size, line } of fontPresets) {\n const sizeVal = getFontSize(size, \"1rem\");\n const lineVal = getLineHeight(line, \"1.5\");\n\n set(`sky-font-${key}`, `${sizeVal} / ${lineVal} var(--sky-font-sans)`);\n set(`sky-font-mono-${key}`, `${sizeVal} / ${lineVal} var(--sky-font-mono)`);\n }\n\n /* spacing tokens */\n\n Object.entries(theme.spacing ?? {}).forEach(([k, v]) => {\n set(`sky-space-${k}`, v);\n });\n\n /* semantic typography role tokens */\n\n const roleMap = {\n body: { size: \"md\", weight: \"normal\", line: \"normal\" },\n label: { size: \"sm\", weight: \"medium\", line: \"snug\" },\n caption: { size: \"xs\", weight: \"normal\", line: \"tight\" },\n title: { size: \"lg\", weight: \"semibold\", line: \"snug\" },\n heading: { size: \"2xl\", weight: \"bold\", line: \"tight\" },\n display: { size: \"4xl\", weight: \"bold\", line: \"tight\" },\n } as const;\n\n const getFontWeight = (key: string, fallback: string) =>\n (theme.fontWeight as Record<string, string> | undefined)?.[key] ??\n fallback;\n\n for (const [role, cfg] of Object.entries(roleMap)) {\n const sizeVal = getFontSize(cfg.size, \"1rem\");\n const weightVal = getFontWeight(cfg.weight, \"400\");\n const lineVal = getLineHeight(cfg.line, \"1.5\");\n\n set(\n `sky-text-${role}`,\n `${weightVal} ${sizeVal}/${lineVal} var(--sky-font-sans)`,\n );\n }\n\n return out;\n}\n\n/** Expand comma-separated selectors so pseudo-elements attach to each branch. */\nfunction withPseudoSelectors(selector: string, pseudo: string): string {\n return selector\n .split(\",\")\n .map((part) => `${part.trim()}${pseudo}`)\n .join(\",\\n\");\n}\n\n/** Tints native scrollbars from `--sky-scrollbar-*` tokens; width/thickness stay OS-native. */\nfunction buildNativeScrollbarCSS(selector: string): string {\n const webkitTrack = withPseudoSelectors(selector, \"::-webkit-scrollbar-track\");\n const webkitThumb = withPseudoSelectors(selector, \"::-webkit-scrollbar-thumb\");\n const webkitThumbHover = withPseudoSelectors(\n selector,\n \"::-webkit-scrollbar-thumb:hover\",\n );\n\n return `\n${selector} {\n scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${webkitTrack} {\n background: var(--sky-scrollbar-track);\n}\n${webkitThumb} {\n background-color: var(--sky-scrollbar-thumb);\n}\n${webkitThumbHover} {\n background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim();\n}\n\nconst NATIVE_SCROLLBAR_ROOT_SELECTOR = \"html, body, *\";\nconst NATIVE_SCROLLBAR_HOST_SELECTOR =\n \"sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *\";\n\n/* buildVarCSS keeps same semantics */\nfunction buildVarCSS(vars: Record<string, string>, selector: string) {\n // Custom-property names containing \".\" (e.g. --sky-space-2.5) are invalid CSS\n // idents unless the dot is escaped. Without this, fractional spacing tokens are\n // dropped by the parser and never defined. Escape the dot in the name only.\n const body = Object.entries(vars)\n .map(([k, v]) => `${k.replace(/\\./g, \"\\\\.\")}:${v};`)\n .join(\"\");\n return `${selector}{${body}}`;\n}\n\nfunction ensureStyleTag(id: string, cssText: string): HTMLStyleElement {\n let tag = document.getElementById(id) as HTMLStyleElement | null;\n if (!tag) {\n tag = document.createElement(\"style\");\n tag.id = id;\n document.head.appendChild(tag);\n }\n tag.textContent = cssText;\n return tag;\n}\n\n/* context + provider implementation (unchanged except for token emission) */\nexport interface ThemeContextValue {\n mode: \"light\" | \"dark\";\n preference: ThemePreference;\n theme: ThemeConfig;\n setPreference: (pref: ThemePreference) => void;\n togglePreference: () => ThemePreference;\n}\nexport const themeContext = createContext<ThemeContextValue>(\"sky/theme\");\ntype ThemeScope = \"root\" | \"host\" | \"both\";\nexport type SkyThemeProviderScope = ThemeScope;\nexport type SkyThemeProviderGlobalChangeDetail = {\n mode: \"light\" | \"dark\";\n preference: ThemePreference;\n};\n\n\n/**\n * @element sky-theme-provider\n *\n * @summary Theme provider for light, dark, and system preferences with CSS variable generation.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/theme-provider\n *\n * @slot - Default slot for content that will receive theme context.\n *\n * @csspart container - The theme provider container element.\n *\n * @property {Partial<ThemeConfig>} userTheme - Custom theme overrides.\n * @property {SkyThemeProviderScope} scope - Where CSS variables are applied.\n * @property {\"light\"|\"dark\"|\"system\"} preference - Theme preference.\n * @property {boolean} persist - Persists preference in localStorage.\n * @property {boolean} broadcast - Broadcasts theme changes through events.\n *\n * @fires {CustomEvent<SkyThemeProviderGlobalChangeDetail>} theme-change-global - Fired when theme changes globally.\n * @fires {CustomEvent<SkyThemeProviderGlobalChangeDetail>} sky-theme - Fired on global theme updates.\n *\n * @Behavior\n * - Resolves light/dark mode from explicit or system preference.\n * - Emits CSS custom properties for color, typography, spacing, and motion tokens.\n * - Provides theme context for descendant components.\n *\n * @example\n * ```html\n * <sky-theme-provider preference=\"system\" scope=\"both\">\n * <app-content></app-content>\n * </sky-theme-provider>\n * ```\n * ```vue\n * <template>\n * <sky-theme-provider :user-theme=\"theme\" preference=\"dark\" scope=\"both\">\n * <app-content />\n * </sky-theme-provider>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n * return <sky-theme-provider userTheme={theme} preference=\"dark\" scope=\"both\"><app-content /></sky-theme-provider>;\n * }\n * ```\n */\n@customElement(\"sky-theme-provider\")\nexport class SkyThemeProvider extends LitElement {\n /** User theme overrides. From HTML pass JSON, e.g. usertheme='{\"primary\":\"#0af\"}'. */\n @property({ type: Object }) userTheme?: PartialTheme;\n\n /** Where to apply CSS vars and global CSS. Default: \"root\". */\n @property({ type: String, reflect: true }) scope: ThemeScope = \"root\";\n\n @property({ type: String, reflect: true })\n preference: ThemePreference = getThemePreference();\n\n @state() private mode: \"light\" | \"dark\" = \"light\";\n\n @provide({ context: themeContext })\n private _ctx!: ThemeContextValue;\n\n @property({ type: Boolean }) persist: boolean = true;\n @property({ type: Boolean }) broadcast: boolean = true;\n\n private media: MediaQueryList | null = null;\n private globalStyleId = \"sky-theme-provider-global-style\";\n private hostScrollbarStyleId = \"sky-theme-provider-host-scrollbar\";\n private hostSheet: CSSStyleSheet | null = null;\n private hostStyleEl: HTMLStyleElement | null = null;\n private rootVarsStyleId = \"sky-theme-vars-root\";\n\n static styles = css`\n :host {\n display: contents;\n }\n\n :host {\n font-family: var(--sky-font);\n color: var(--sky-text-primary);\n background: var(--sky-background-color);\n }\n `;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.mode = resolveActualTheme(this.preference);\n this.pushContext();\n this.setupSystemWatcher();\n if (this.scope === \"host\") {\n this.applyVariables();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.media?.removeEventListener(\"change\", this.onSystemChange);\n\n if (this.hostStyleEl && this.hostStyleEl.parentNode) {\n this.hostStyleEl.parentNode.removeChild(this.hostStyleEl);\n this.hostStyleEl = null;\n }\n\n if (this.scope === \"host\") {\n const s = document.getElementById(this.globalStyleId);\n if (s) s.remove();\n const hostScrollbar = document.getElementById(this.hostScrollbarStyleId);\n if (hostScrollbar) hostScrollbar.remove();\n }\n }\n\n protected firstUpdated(): void {\n if (this.scope === \"root\" || this.scope === \"both\") {\n this.applyVariables();\n }\n }\n\n override updated(changedProperties: Map<string | number | symbol, unknown>): void {\n super.updated(changedProperties);\n\n // Ensure context is updated after DOM updates\n if (\n changedProperties.has(\"userTheme\") ||\n changedProperties.has(\"mode\") ||\n changedProperties.has(\"preference\") ||\n changedProperties.has(\"scope\")\n ) {\n this.pushContext();\n }\n }\n\n protected override willUpdate(changed: Map<string, unknown>): void {\n const prefChanged = changed.has(\"preference\");\n const scopeChanged = changed.has(\"scope\");\n const userThemeChanged = changed.has(\"userTheme\");\n\n let modeChanged = false;\n\n if (prefChanged || scopeChanged) {\n const nextMode = resolveActualTheme(this.preference);\n if (nextMode !== this.mode) {\n this.mode = nextMode;\n modeChanged = true;\n }\n }\n\n const hydrated = !!this.hasUpdated;\n const canApplyNow = this.scope === \"host\" || hydrated;\n if (canApplyNow && (modeChanged || scopeChanged || userThemeChanged)) {\n this.applyVariables();\n }\n\n if (prefChanged || modeChanged || userThemeChanged || scopeChanged) {\n this.pushContext();\n\n // Avoid broadcasting before hydration when scope touches root. Host-only providers still broadcast\n // when userTheme / mode / preference updates so consumers (e.g. sky-chart mono palette) can refresh.\n const hostThemeChanged =\n this.scope === \"host\" &&\n hydrated &&\n (userThemeChanged || prefChanged || modeChanged || scopeChanged);\n if (\n this.broadcast &&\n ((this.scope === \"root\" || this.scope === \"both\") || hostThemeChanged)\n ) {\n this.broadcastTheme();\n }\n }\n }\n\n private setRootThemeAttrs() {\n const de = document.documentElement;\n de.toggleAttribute(\"data-theme-light\", this.mode === \"light\");\n de.toggleAttribute(\"data-theme-dark\", this.mode === \"dark\");\n de.setAttribute(\"data-theme\", this.mode);\n (de.style as any).colorScheme = this.mode;\n de.classList.toggle(\"dark\", this.mode === \"dark\");\n }\n\n private broadcastTheme() {\n const detail = { mode: this.mode, preference: this.preference };\n window.dispatchEvent(new CustomEvent(\"sky-theme\", { detail }));\n\n window.dispatchEvent(new CustomEvent(\"theme-change-global\", { detail }));\n }\n\n public setPreference(pref: ThemePreference) {\n try {\n if (this.persist && (this.scope === \"root\" || this.scope === \"both\")) {\n localStorage.setItem(\"theme\", pref);\n }\n } catch { }\n this.preference = pref;\n\n if (this.broadcast && (this.scope === \"root\" || this.scope === \"both\")) {\n this.dispatchEvent(\n new CustomEvent(\"theme-change-global\", {\n bubbles: true,\n composed: true,\n }),\n );\n }\n }\n\n public togglePreference(): ThemePreference {\n const current = this.preference ?? getThemePreference();\n const next: ThemePreference =\n current === \"light\" ? \"dark\" : current === \"dark\" ? \"system\" : \"light\";\n this.setPreference(next);\n return next;\n }\n\n private onSystemChange = () => {\n if ((this.preference ?? getThemePreference()) === \"system\") {\n this.mode = resolveActualTheme(\"system\");\n this.applyVariables();\n this.pushContext();\n this.dispatchEvent(\n new CustomEvent(\"theme-change-global\", {\n bubbles: true,\n composed: true,\n }),\n );\n }\n };\n\n private setupSystemWatcher() {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n this.media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n this.media.addEventListener(\"change\", this.onSystemChange);\n }\n\n /** Ensure global body + dialog + native scrollbar rules when scope touches root. */\n private ensureGlobalStyle() {\n if (typeof document === \"undefined\") return;\n const cssText = `\n body {\n font-family: var(--sky-font);\n margin: 0;\n padding: 0;\n background: var(--sky-background-color);\n color: var(--sky-text-primary);\n }\n\n html[data-sky-dialog-open=\"true\"] {\n overflow: hidden !important;\n position: relative;\n height: 100%;\n }\n\n ${buildNativeScrollbarCSS(NATIVE_SCROLLBAR_ROOT_SELECTOR)}\n `.trim();\n\n let tag = document.getElementById(\n this.globalStyleId,\n ) as HTMLStyleElement | null;\n if (!tag) {\n tag = document.createElement(\"style\");\n tag.id = this.globalStyleId;\n tag.textContent = cssText;\n document.head.appendChild(tag);\n } else {\n tag.textContent = cssText;\n }\n }\n\n private applyHostNativeScrollbars(enabled: boolean) {\n if (typeof document === \"undefined\") return;\n this.toggleAttribute(\"sky-native-scrollbars\", enabled);\n if (!enabled) {\n const tag = document.getElementById(this.hostScrollbarStyleId);\n if (tag) tag.remove();\n return;\n }\n ensureStyleTag(\n this.hostScrollbarStyleId,\n buildNativeScrollbarCSS(NATIVE_SCROLLBAR_HOST_SELECTOR),\n );\n }\n\n private applyVariables() {\n const full = mergeTheme(this.userTheme || {});\n const modeTheme = full[this.mode];\n const isDark = this.mode === \"dark\";\n const vars = generateVarMap(modeTheme, isDark);\n\n this.toggleAttribute(\"data-theme-light\", this.mode === \"light\");\n this.toggleAttribute(\"data-theme-dark\", this.mode === \"dark\");\n\n if (this.scope === \"host\" || this.scope === \"both\") {\n const cssText = buildVarCSS(vars, \":host\");\n\n if (\n \"adoptedStyleSheets\" in Document.prototype &&\n \"replaceSync\" in CSSStyleSheet.prototype\n ) {\n if (!this.hostSheet) {\n this.hostSheet = new CSSStyleSheet();\n\n const current =\n (this.renderRoot as ShadowRoot).adoptedStyleSheets ?? [];\n (this.renderRoot as ShadowRoot).adoptedStyleSheets = [\n ...current,\n this.hostSheet,\n ];\n }\n this.hostSheet.replaceSync(cssText);\n } else {\n if (!this.hostStyleEl) {\n this.hostStyleEl = document.createElement(\"style\");\n this.renderRoot.appendChild(this.hostStyleEl);\n }\n this.hostStyleEl.textContent = cssText;\n }\n\n this.style.removeProperty(\"color\");\n this.style.removeProperty(\"background\");\n\n this.applyHostNativeScrollbars(true);\n } else {\n this.applyHostNativeScrollbars(false);\n }\n\n if (this.scope === \"root\" || this.scope === \"both\") {\n const cssText = buildVarCSS(vars, \":root\");\n ensureStyleTag(this.rootVarsStyleId, cssText);\n\n this.setRootThemeAttrs();\n this.ensureGlobalStyle();\n\n if (document.body) {\n document.body.style.removeProperty(\"color\");\n document.body.style.removeProperty(\"background\");\n document.body.style.removeProperty(\"font-family\");\n }\n\n this.broadcastTheme();\n }\n }\n\n private pushContext() {\n const mergedTheme = mergeTheme(this.userTheme ?? {});\n\n this._ctx = {\n mode: this.mode,\n preference: this.preference,\n theme: mergedTheme,\n setPreference: (pref: ThemePreference) => this.setPreference(pref),\n togglePreference: () => this.togglePreference(),\n };\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n"],"names":["defaultTheme","light","glass","baseColor","baseShades","secondary","tertiary","opacities","primary","solid","overlay","color","glassHover","opacity","fontFamily","fontFamilyMono","fontSize","xs","sm","md","lg","xl","fontWeight","thin","normal","medium","semibold","bold","extrabold","lineHeight","tight","snug","relaxed","loose","letterSpacing","tighter","wide","wider","spacing","px","background","foreground","active","success","warning","danger","info","blur","radius","full","boxshadow","inset","hover","brightness","saturation","separator","border","glassSurface","top","bottom","motion","duration","instant","fast","slow","ease","default","in","out","inOut","bounce","zIndex","base","dropdown","sticky","fixed","modal","popover","toast","max","disabled","muted","subtle","scrollbar","track","thumb","thumbHover","dark","getThemePreference","localStorage","v","getItem","resolveActualTheme","pref","window","matchMedia","matches","getCurrentTheme","document","documentElement","getAttribute","onThemeChange","cb","handler","e","mode","preference","detail","addEventListener","queueMicrotask","removeEventListener","deepMerge","target","source","t","Array","isArray","k","sv","lastMergeUser","lastMergeResult","mergeTheme","userTheme","clampAlpha","alpha","fallback","value","Number","isFinite","Math","min","clampPercent","round","isOKLCH","test","trim","toOKLCH","hexOrOKLCH","toOKLCHAlpha","safeAlpha","alphaPct","includes","replace","mixOKLCH","colorA","amountA","colorB","withPseudoSelectors","selector","pseudo","split","map","part","join","buildNativeScrollbarCSS","buildVarCSS","vars","Object","entries","ensureStyleTag","id","cssText","tag","getElementById","createElement","head","appendChild","textContent","themeContext","createContext","SkyThemeProvider","LitElement","constructor","super","arguments","this","scope","persist","broadcast","media","globalStyleId","hostScrollbarStyleId","hostSheet","hostStyleEl","rootVarsStyleId","onSystemChange","applyVariables","pushContext","dispatchEvent","CustomEvent","bubbles","composed","connectedCallback","setupSystemWatcher","disconnectedCallback","parentNode","removeChild","s","remove","hostScrollbar","firstUpdated","updated","changedProperties","has","willUpdate","changed","prefChanged","scopeChanged","userThemeChanged","modeChanged","nextMode","hydrated","hasUpdated","hostThemeChanged","broadcastTheme","setRootThemeAttrs","de","toggleAttribute","setAttribute","style","colorScheme","classList","toggle","setPreference","setItem","togglePreference","current","next","ensureGlobalStyle","applyHostNativeScrollbars","enabled","theme","isDark","set","fontSans","fontMono","textSteps","quaternary","quinary","forEach","level","pct","op","glassShadeAnchor","glassShadeSteps","glassPrimaryShade","glassSecondaryShade","glassTertiaryShade","glassStrengthFallback","glassStrength","glassSurfaceTopAlpha","glassSurfaceBottomAlpha","String","semanticColors","key","getFontSize","getLineHeight","fontPresets","size","line","sizeVal","lineVal","roleMap","body","weight","label","caption","title","heading","display","getFontWeight","role","cfg","weightVal","generateVarMap","Document","prototype","CSSStyleSheet","renderRoot","adoptedStyleSheets","replaceSync","removeProperty","mergedTheme","_ctx","render","html","styles","css","__decorateClass","property","type","reflect","state","provide","context","Boolean","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sky-theme-provider.js","sources":["../../src/sky-theme-provider/sky-theme-provider.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { createContext, provide } from \"@lit/context\";\r\n\r\nexport interface ThemeConfig {\r\n light: ThemeModeConfig;\r\n dark: ThemeModeConfig;\r\n}\r\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\r\nexport type PartialTheme = Partial<ThemeConfig>;\r\n\r\n/** Extended ThemeModeConfig: added typography & spacing tokens */\r\nexport interface ThemeModeConfig {\r\n glass: {\r\n baseColor: string;\r\n /** Optional per-level base shades; if omitted, secondary/tertiary are derived by mixing baseColor with foreground */\r\n baseShades?: {\r\n primary?: string;\r\n secondary?: string;\r\n tertiary?: string;\r\n };\r\n opacities: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"solid\", number>;\r\n };\r\n glassHover: {\r\n color: string;\r\n opacity: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"solid\", number>;\r\n };\r\n overlay: {\r\n color: string;\r\n opacities: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"solid\", number>;\r\n };\r\n\r\n fontFamily: string;\r\n /** Monospace font stack; used for --sky-font-mono and bounded mono presets */\r\n fontFamilyMono?: string;\r\n\r\n /* typography scales & spacing */\r\n fontSize?: Record<\r\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\",\r\n string\r\n >;\r\n fontWeight?: Record<\r\n \"thin\" | \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\" | \"extrabold\",\r\n string\r\n >;\r\n lineHeight?: Record<\r\n \"tight\" | \"snug\" | \"normal\" | \"relaxed\" | \"loose\",\r\n string\r\n >;\r\n letterSpacing?: Record<\r\n \"tighter\" | \"tight\" | \"normal\" | \"wide\" | \"wider\",\r\n string\r\n >;\r\n glassSurface?: {\r\n top: number;\r\n bottom: number;\r\n };\r\n spacing?: Record<\r\n | \"0\"\r\n | \"px\"\r\n | \"0.5\"\r\n | \"1\"\r\n | \"1.5\"\r\n | \"2\"\r\n | \"2.5\"\r\n | \"3\"\r\n | \"3.5\"\r\n | \"4\"\r\n | \"5\"\r\n | \"6\"\r\n | \"8\"\r\n | \"10\"\r\n | \"12\"\r\n | \"16\"\r\n | \"20\"\r\n | \"24\"\r\n | \"32\"\r\n | \"40\"\r\n | \"48\"\r\n | \"56\"\r\n | \"64\",\r\n string\r\n >;\r\n\r\n /* Simplified color system - only primaries needed */\r\n color: {\r\n /* Only primary colors needed - everything else auto-generated */\r\n background: string;\r\n foreground: string;\r\n active: string;\r\n success: string;\r\n warning: string;\r\n danger: string;\r\n info: string;\r\n };\r\n\r\n /* Existing properties */\r\n blur: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\r\n radius: Record<\"primary\" | \"secondary\" | \"tertiary\" | \"full\", string>;\r\n boxshadow: Record<\r\n \"primary\" | \"secondary\" | \"tertiary\" | \"inset\" | \"hover\",\r\n string\r\n >;\r\n brightness: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\r\n saturation: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\r\n border: Record<\"primary\" | \"secondary\" | \"tertiary\", string>;\r\n separator: string;\r\n\r\n /** Motion: duration and easing for consistent, themeable transitions */\r\n motion?: {\r\n duration?: Record<\"instant\" | \"fast\" | \"normal\" | \"slow\", string>;\r\n ease?: Record<\"default\" | \"in\" | \"out\" | \"inOut\" | \"bounce\", string>;\r\n };\r\n /** Z-index scale for predictable stacking (dropdown, modal, toast, etc.) */\r\n zIndex?: Record<\r\n \"base\" | \"dropdown\" | \"sticky\" | \"fixed\" | \"modal\" | \"popover\" | \"toast\" | \"max\",\r\n number\r\n >;\r\n /** Opacity tokens for disabled/muted states */\r\n opacity?: Record<\"disabled\" | \"muted\" | \"subtle\", number>;\r\n /** Optional native scrollbar color tints; sizing stays platform-native. */\r\n scrollbar?: {\r\n thumb?: string;\r\n thumbHover?: string;\r\n track?: string;\r\n };\r\n}\r\n\r\nconst THEME_KEY = \"theme\";\r\n\r\n/* default theme: Pure Glass (sky-ui-example DEFAULT_SITE_THEME_ID) */\r\nexport const defaultTheme: ThemeConfig = {\r\n light: {\r\n glass: {\r\n baseColor: \"#FFFFFF\",\r\n baseShades: {\r\n secondary: \"#F1F5F9\",\r\n tertiary: \"#E2E8F0\",\r\n },\r\n /* Ultra-thin frosted fill — hierarchy via shade + blur */\r\n opacities: { primary: 0.1, secondary: 0.12, tertiary: 0.16, solid: 0.18 },\r\n },\r\n overlay: {\r\n color: \"#E8EEF6\",\r\n opacities: { primary: 0.75, secondary: 0.33, tertiary: 0.19, solid: 1.0 },\r\n },\r\n glassHover: {\r\n color: \"#0F172A\",\r\n opacity: { primary: 0.06, secondary: 0.08, tertiary: 0.1, solid: 1.0 },\r\n },\r\n fontFamily:\r\n \"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\r\n fontFamilyMono:\r\n \"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace\",\r\n fontSize: {\r\n xs: \"0.75rem\",\r\n sm: \"0.875rem\",\r\n md: \"1rem\",\r\n lg: \"1.125rem\",\r\n xl: \"1.25rem\",\r\n \"2xl\": \"1.5rem\",\r\n \"3xl\": \"1.875rem\",\r\n \"4xl\": \"2.25rem\",\r\n \"5xl\": \"3rem\",\r\n \"6xl\": \"3.75rem\",\r\n },\r\n fontWeight: {\r\n thin: \"100\",\r\n light: \"300\",\r\n normal: \"400\",\r\n medium: \"500\",\r\n semibold: \"600\",\r\n bold: \"700\",\r\n extrabold: \"800\",\r\n },\r\n lineHeight: {\r\n tight: \"1.1\",\r\n snug: \"1.25\",\r\n normal: \"1.5\",\r\n relaxed: \"1.75\",\r\n loose: \"2\",\r\n },\r\n letterSpacing: {\r\n tighter: \"-0.03em\",\r\n tight: \"-0.015em\",\r\n normal: \"0em\",\r\n wide: \"0.02em\",\r\n wider: \"0.04em\",\r\n },\r\n spacing: {\r\n \"0\": \"0px\",\r\n px: \"1px\",\r\n \"0.5\": \"0.125rem\",\r\n \"1\": \"0.25rem\",\r\n \"1.5\": \"0.375rem\",\r\n \"2\": \"0.5rem\",\r\n \"2.5\": \"0.625rem\",\r\n \"3\": \"0.75rem\",\r\n \"3.5\": \"0.875rem\",\r\n \"4\": \"1rem\",\r\n \"5\": \"1.25rem\",\r\n \"6\": \"1.5rem\",\r\n \"8\": \"2rem\",\r\n \"10\": \"2.5rem\",\r\n \"12\": \"3rem\",\r\n \"16\": \"4rem\",\r\n \"20\": \"5rem\",\r\n \"24\": \"6rem\",\r\n \"32\": \"8rem\",\r\n \"40\": \"10rem\",\r\n \"48\": \"12rem\",\r\n \"56\": \"14rem\",\r\n \"64\": \"16rem\",\r\n },\r\n\r\n color: {\r\n background: \"#E8EEF6\",\r\n foreground: \"#0F172A\",\r\n active: \"#2563EB\",\r\n success: \"#17C964\",\r\n warning: \"#F5A524\",\r\n danger: \"#FF383C\",\r\n info: \"#6366F1\",\r\n },\r\n\r\n blur: { primary: \"12px\", secondary: \"24px\", tertiary: \"32px\" },\r\n radius: {\r\n primary: \"8px\",\r\n secondary: \"12px\",\r\n tertiary: \"16px\",\r\n full: \"9999px\",\r\n },\r\n boxshadow: {\r\n primary: \"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)\",\r\n secondary: \"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)\",\r\n tertiary: \"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)\",\r\n inset:\r\n \"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)\",\r\n hover: \"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)\",\r\n },\r\n brightness: { primary: \"1.04\", secondary: \"1.08\", tertiary: \"1.10\" },\r\n saturation: { primary: \"1.08\", secondary: \"1.14\", tertiary: \"1.20\" },\r\n separator: \"rgba(15, 23, 42, 0.12)\",\r\n border: {\r\n primary: \"1px solid rgba(15, 23, 42, 0.14)\",\r\n secondary:\r\n \"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)\",\r\n tertiary:\r\n \"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)\",\r\n },\r\n glassSurface: { top: 0.14, bottom: 0.03 },\r\n motion: {\r\n duration: { instant: \"0ms\", fast: \"120ms\", normal: \"200ms\", slow: \"300ms\" },\r\n ease: {\r\n default: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n in: \"cubic-bezier(0.4, 0, 1, 1)\",\r\n out: \"cubic-bezier(0, 0, 0.2, 1)\",\r\n inOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n bounce: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\r\n },\r\n },\r\n zIndex: {\r\n base: 0,\r\n dropdown: 1000,\r\n sticky: 1100,\r\n fixed: 1200,\r\n modal: 1300,\r\n popover: 1400,\r\n toast: 1500,\r\n max: 9999,\r\n },\r\n opacity: { disabled: 0.5, muted: 0.7, subtle: 0.85 },\r\n scrollbar: {\r\n track: \"transparent\",\r\n thumb:\r\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)\",\r\n thumbHover:\r\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)\",\r\n },\r\n },\r\n\r\n dark: {\r\n glass: {\r\n baseColor: \"#141B2D\",\r\n baseShades: {\r\n secondary: \"#1A2235\",\r\n tertiary: \"#222C42\",\r\n },\r\n opacities: { primary: 0.16, secondary: 0.18, tertiary: 0.22, solid: 0.24 },\r\n },\r\n overlay: {\r\n color: \"#0B1020\",\r\n opacities: { primary: 0.75, secondary: 0.33, tertiary: 0.19, solid: 1.0 },\r\n },\r\n glassHover: {\r\n color: \"#E2E8F0\",\r\n opacity: { primary: 0.08, secondary: 0.1, tertiary: 0.12, solid: 1.0 },\r\n },\r\n fontFamily:\r\n \"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\r\n fontFamilyMono:\r\n \"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace\",\r\n fontSize: {\r\n xs: \"0.75rem\",\r\n sm: \"0.875rem\",\r\n md: \"1rem\",\r\n lg: \"1.125rem\",\r\n xl: \"1.25rem\",\r\n \"2xl\": \"1.5rem\",\r\n \"3xl\": \"1.875rem\",\r\n \"4xl\": \"2.25rem\",\r\n \"5xl\": \"3rem\",\r\n \"6xl\": \"3.75rem\",\r\n },\r\n fontWeight: {\r\n thin: \"100\",\r\n light: \"300\",\r\n normal: \"400\",\r\n medium: \"500\",\r\n semibold: \"600\",\r\n bold: \"700\",\r\n extrabold: \"800\",\r\n },\r\n lineHeight: {\r\n tight: \"1.1\",\r\n snug: \"1.25\",\r\n normal: \"1.5\",\r\n relaxed: \"1.75\",\r\n loose: \"2\",\r\n },\r\n letterSpacing: {\r\n tighter: \"-0.03em\",\r\n tight: \"-0.015em\",\r\n normal: \"0em\",\r\n wide: \"0.02em\",\r\n wider: \"0.04em\",\r\n },\r\n spacing: {\r\n \"0\": \"0px\",\r\n px: \"1px\",\r\n \"0.5\": \"0.125rem\",\r\n \"1\": \"0.25rem\",\r\n \"1.5\": \"0.375rem\",\r\n \"2\": \"0.5rem\",\r\n \"2.5\": \"0.625rem\",\r\n \"3\": \"0.75rem\",\r\n \"3.5\": \"0.875rem\",\r\n \"4\": \"1rem\",\r\n \"5\": \"1.25rem\",\r\n \"6\": \"1.5rem\",\r\n \"8\": \"2rem\",\r\n \"10\": \"2.5rem\",\r\n \"12\": \"3rem\",\r\n \"16\": \"4rem\",\r\n \"20\": \"5rem\",\r\n \"24\": \"6rem\",\r\n \"32\": \"8rem\",\r\n \"40\": \"10rem\",\r\n \"48\": \"12rem\",\r\n \"56\": \"14rem\",\r\n \"64\": \"16rem\",\r\n },\r\n\r\n color: {\r\n background: \"#0B1020\",\r\n foreground: \"#E2E8F0\",\r\n active: \"#2563EB\",\r\n success: \"#17C964\",\r\n warning: \"#F7B750\",\r\n danger: \"#DB3B3E\",\r\n info: \"#818CF8\",\r\n },\r\n\r\n blur: { primary: \"12px\", secondary: \"24px\", tertiary: \"32px\" },\r\n radius: {\r\n primary: \"8px\",\r\n secondary: \"12px\",\r\n tertiary: \"16px\",\r\n full: \"9999px\",\r\n },\r\n boxshadow: {\r\n primary: \"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)\",\r\n secondary: \"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)\",\r\n tertiary: \"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)\",\r\n inset:\r\n \"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)\",\r\n hover: \"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)\",\r\n },\r\n brightness: { primary: \"1.04\", secondary: \"1.08\", tertiary: \"1.10\" },\r\n saturation: { primary: \"1.08\", secondary: \"1.14\", tertiary: \"1.20\" },\r\n separator: \"rgba(226, 232, 240, 0.1)\",\r\n border: {\r\n primary: \"1px solid rgba(226, 232, 240, 0.14)\",\r\n secondary:\r\n \"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)\",\r\n tertiary:\r\n \"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)\",\r\n },\r\n glassSurface: { top: 0.16, bottom: 0.05 },\r\n motion: {\r\n duration: { instant: \"0ms\", fast: \"120ms\", normal: \"200ms\", slow: \"300ms\" },\r\n ease: {\r\n default: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n in: \"cubic-bezier(0.4, 0, 1, 1)\",\r\n out: \"cubic-bezier(0, 0, 0.2, 1)\",\r\n inOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n bounce: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\r\n },\r\n },\r\n zIndex: {\r\n base: 0,\r\n dropdown: 1000,\r\n sticky: 1100,\r\n fixed: 1200,\r\n modal: 1300,\r\n popover: 1400,\r\n toast: 1500,\r\n max: 9999,\r\n },\r\n opacity: { disabled: 0.5, muted: 0.7, subtle: 0.85 },\r\n scrollbar: {\r\n track: \"transparent\",\r\n thumb:\r\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)\",\r\n thumbHover:\r\n \"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)\",\r\n },\r\n },\r\n};\r\n\r\nexport function getThemePreference(): ThemePreference {\r\n try {\r\n if (typeof localStorage !== \"undefined\") {\r\n const v = localStorage.getItem(THEME_KEY) as ThemePreference | null;\r\n return v === \"light\" || v === \"dark\" || v === \"system\" ? v : \"system\";\r\n }\r\n } catch { }\r\n return \"system\";\r\n}\r\n\r\nexport function resolveActualTheme(pref: ThemePreference): \"light\" | \"dark\" {\r\n if (typeof window === \"undefined\") return \"light\";\r\n if (pref === \"system\") {\r\n try {\r\n if (window.matchMedia) {\r\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\r\n ? \"dark\"\r\n : \"light\";\r\n }\r\n } catch { }\r\n return \"light\";\r\n }\r\n return pref;\r\n}\r\n\r\n/** Returns \"light\" | \"dark\" (prefers provider, falls back to system). SSR-safe: returns \"light\" when document is undefined. */\r\nexport function getCurrentTheme(): \"light\" | \"dark\" {\r\n if (typeof document === \"undefined\") return \"light\";\r\n const de = document.documentElement;\r\n const v = de.getAttribute(\"data-theme\");\r\n if (v === \"light\" || v === \"dark\") return v;\r\n return typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-color-scheme: dark)\").matches\r\n ? \"dark\"\r\n : \"light\";\r\n}\r\n\r\n/** Subscribe to theme changes. Returns an unsubscribe function. SSR-safe: returns no-op when window is undefined. */\r\nexport function onThemeChange(\r\n cb: (mode: \"light\" | \"dark\", preference?: ThemePreference) => void,\r\n) {\r\n if (typeof window === \"undefined\") return () => {};\r\n const handler = (e: Event) => {\r\n const { mode, preference } = (e as CustomEvent).detail || {};\r\n if (mode === \"light\" || mode === \"dark\") cb(mode, preference);\r\n else cb(getCurrentTheme(), undefined);\r\n };\r\n window.addEventListener(\"sky-theme\", handler);\r\n\r\n queueMicrotask(() => cb(getCurrentTheme(), undefined));\r\n return () => window.removeEventListener(\"sky-theme\", handler);\r\n}\r\n\r\nfunction deepMerge<T>(target: T, source: Partial<T>): T {\r\n const t: any = Array.isArray(target)\r\n ? [...(target as any)]\r\n : { ...(target as any) };\r\n for (const k in source) {\r\n const sv: any = (source as any)[k];\r\n if (sv && typeof sv === \"object\" && !Array.isArray(sv)) {\r\n t[k] = deepMerge((target as any)[k], sv);\r\n } else {\r\n t[k] = sv ?? (target as any)[k];\r\n }\r\n }\r\n return t;\r\n}\r\n\r\nlet lastMergeUser: Partial<ThemeConfig> | undefined;\r\nlet lastMergeResult: ThemeConfig | undefined;\r\n\r\nexport function mergeTheme(userTheme: Partial<ThemeConfig>): ThemeConfig {\r\n if (userTheme === lastMergeUser && lastMergeResult) return lastMergeResult;\r\n lastMergeResult = {\r\n light: deepMerge(defaultTheme.light, userTheme.light ?? {}),\r\n dark: deepMerge(defaultTheme.dark, userTheme.dark ?? {}),\r\n };\r\n lastMergeUser = userTheme;\r\n return lastMergeResult;\r\n}\r\n\r\n/* color & glass helpers */\r\n\r\nfunction clampAlpha(alpha: number | undefined, fallback = 1): number {\r\n const value =\r\n typeof alpha === \"number\" && Number.isFinite(alpha) ? alpha : fallback;\r\n\r\n return Math.max(0, Math.min(1, value));\r\n}\r\n\r\nfunction clampPercent(value: number): number {\r\n if (!Number.isFinite(value)) return 100;\r\n return Math.max(0, Math.min(100, Math.round(value)));\r\n}\r\n\r\nfunction isOKLCH(value: string): boolean {\r\n return /^oklch\\(\\s*[\\d.]+\\s+[\\d.]+\\s+[\\d.]+(?:deg)?(?:\\s*\\/\\s*[\\d.]+%?)?\\s*\\)$/i.test(\r\n value.trim(),\r\n );\r\n}\r\n\r\nfunction toOKLCH(hexOrOKLCH: string): string {\r\n if (isOKLCH(hexOrOKLCH)) return hexOrOKLCH;\r\n return hexOrOKLCH;\r\n}\r\n\r\nfunction toOKLCHAlpha(hexOrOKLCH: string, alpha: number): string {\r\n const safeAlpha = clampAlpha(alpha);\r\n const alphaPct = clampPercent(safeAlpha * 100);\r\n\r\n if (safeAlpha <= 0) return \"transparent\";\r\n if (safeAlpha >= 1) return toOKLCH(hexOrOKLCH);\r\n\r\n if (isOKLCH(hexOrOKLCH)) {\r\n const value = hexOrOKLCH.trim();\r\n\r\n return value.includes(\"/\")\r\n ? value\r\n : value.replace(/\\)$/, ` / ${alphaPct}%)`);\r\n }\r\n\r\n return `color-mix(in oklch, ${hexOrOKLCH} ${alphaPct}%, transparent)`;\r\n}\r\n\r\nfunction mixOKLCH(colorA: string, amountA: number, colorB: string): string {\r\n return `color-mix(in oklch, ${colorA} ${clampPercent(amountA)}%, ${colorB})`;\r\n}\r\n\r\n/**\r\n * generateVarMap emits typography & spacing tokens and semantic role tokens.\r\n *\r\n * Glass hierarchy is shade-based with optional per-tier fill opacity:\r\n * - primary = base/default glass shade\r\n * - secondary = raised/elevated glass shade\r\n * - tertiary = floating/modal/popover glass shade\r\n * - Fill strength: glass.opacities.primary | secondary | tertiary\r\n * (secondary/tertiary fall back to primary when omitted).\r\n */\r\nfunction generateVarMap(\r\n theme: ThemeModeConfig,\r\n isDark: boolean,\r\n): Record<string, string> {\r\n const out: Record<string, string> = {};\r\n\r\n const set = (k: string, v?: string) => {\r\n if (v != null) out[`--${k}`] = v;\r\n };\r\n\r\n /* base contrast tokens */\r\n\r\n set(\"sky-text-dark\", toOKLCH(isDark ? \"#FFFFFF\" : \"#0B1020\"));\r\n set(\"sky-text-light\", toOKLCH(isDark ? \"#030712\" : \"#FFFFFF\"));\r\n\r\n /* font family tokens */\r\n\r\n const fontSans = theme.fontFamily;\r\n const fontMono = theme.fontFamilyMono ?? \"ui-monospace, monospace\";\r\n\r\n set(\"sky-font\", fontSans);\r\n set(\"sky-font-sans\", fontSans);\r\n set(\"sky-font-mono\", fontMono);\r\n\r\n /* background + text tokens */\r\n\r\n set(\"sky-background-color\", toOKLCH(theme.color.background));\r\n set(\"sky-text-primary\", toOKLCH(theme.color.foreground));\r\n\r\n const textSteps: Record<\r\n \"secondary\" | \"tertiary\" | \"quaternary\" | \"quinary\",\r\n number\r\n > = isDark\r\n ? {\r\n secondary: 82,\r\n tertiary: 66,\r\n quaternary: 50,\r\n quinary: 36,\r\n }\r\n : {\r\n secondary: 76,\r\n tertiary: 60,\r\n quaternary: 44,\r\n quinary: 30,\r\n };\r\n\r\n Object.entries(textSteps).forEach(([level, pct]) => {\r\n set(\r\n `sky-text-${level}`,\r\n `color-mix(in oklch, var(--sky-text-primary) ${pct}%, var(--sky-background-color))`,\r\n );\r\n });\r\n\r\n [\"primary\", \"secondary\", \"tertiary\", \"quaternary\", \"quinary\"].forEach(\r\n (level) => {\r\n set(\r\n `sky-text-${level}-hover`,\r\n `color-mix(in oklch, var(--sky-text-${level}) 86%, var(--sky-text-dark))`,\r\n );\r\n },\r\n );\r\n\r\n /* shade-based glass generation */\r\n\r\n const { baseColor, baseShades, opacities: op } = theme.glass;\r\n\r\n const glassShadeAnchor = theme.color.foreground;\r\n\r\n const glassShadeSteps = isDark\r\n ? {\r\n primary: 96,\r\n secondary: 88,\r\n tertiary: 78,\r\n }\r\n : {\r\n primary: 96,\r\n secondary: 90,\r\n tertiary: 82,\r\n };\r\n\r\n const glassPrimaryShade =\r\n baseShades?.primary ??\r\n mixOKLCH(\r\n baseColor,\r\n glassShadeSteps.primary,\r\n glassShadeAnchor,\r\n );\r\n\r\n const glassSecondaryShade =\r\n baseShades?.secondary ??\r\n mixOKLCH(baseColor, glassShadeSteps.secondary, glassShadeAnchor);\r\n\r\n const glassTertiaryShade =\r\n baseShades?.tertiary ??\r\n mixOKLCH(baseColor, glassShadeSteps.tertiary, glassShadeAnchor);\r\n\r\n const glassStrengthFallback = isDark ? 0.4 : 0.34;\r\n const glassStrength = {\r\n primary: clampAlpha(op.primary, glassStrengthFallback),\r\n secondary: clampAlpha(\r\n op.secondary ?? op.primary,\r\n glassStrengthFallback\r\n ),\r\n tertiary: clampAlpha(op.tertiary ?? op.primary, glassStrengthFallback),\r\n // Solid surface fill (inputs / actions). Defaults fully opaque, but themes\r\n // can lower `opacities.solid` for a translucent \"frosted solid\" look.\r\n solid: clampAlpha(op.solid, 1),\r\n };\r\n\r\n set(\r\n \"sky-glass-primary\",\r\n toOKLCHAlpha(glassPrimaryShade, glassStrength.primary)\r\n );\r\n set(\r\n \"sky-glass-secondary\",\r\n toOKLCHAlpha(glassSecondaryShade, glassStrength.secondary)\r\n );\r\n set(\r\n \"sky-glass-tertiary\",\r\n toOKLCHAlpha(glassTertiaryShade, glassStrength.tertiary)\r\n );\r\n\r\n set(\"sky-glass-solid\", toOKLCHAlpha(baseColor, glassStrength.solid));\r\n\r\n const glassSurfaceTopAlpha = clampAlpha(\r\n theme.glassSurface?.top,\r\n isDark ? 0.26 : 0.24,\r\n );\r\n\r\n const glassSurfaceBottomAlpha = clampAlpha(\r\n theme.glassSurface?.bottom,\r\n isDark ? 0.08 : 0.06,\r\n );\r\n\r\n set(\r\n \"sky-glass-surface\",\r\n `linear-gradient(\r\n 180deg,\r\n ${toOKLCHAlpha(glassSecondaryShade, glassSurfaceTopAlpha)},\r\n ${toOKLCHAlpha(glassPrimaryShade, glassSurfaceBottomAlpha)}\r\n )`,\r\n );\r\n\r\n /* overlay tokens */\r\n\r\n Object.entries(theme.overlay.opacities).forEach(([k, v]) => {\r\n set(`sky-overlay-${k}`, toOKLCHAlpha(theme.overlay.color, v));\r\n });\r\n\r\n /* hover overlay tokens */\r\n\r\n Object.entries(theme.glassHover.opacity).forEach(([k, v]) => {\r\n set(`sky-hover-${k}`, toOKLCHAlpha(theme.glassHover.color, v));\r\n });\r\n\r\n /* border / radius / blur / effects */\r\n\r\n Object.entries(theme.border).forEach(([k, v]) => {\r\n set(`sky-border-${k}`, v);\r\n });\r\n\r\n Object.entries(theme.radius).forEach(([k, v]) => {\r\n set(`sky-radius-${k}`, v);\r\n });\r\n\r\n Object.entries(theme.blur).forEach(([k, v]) => {\r\n set(`sky-blur-${k}`, `blur(${v})`);\r\n });\r\n\r\n Object.entries(theme.brightness).forEach(([k, v]) => {\r\n set(`sky-brightness-${k}`, `brightness(${v})`);\r\n });\r\n\r\n Object.entries(theme.saturation).forEach(([k, v]) => {\r\n set(`sky-saturation-${k}`, `saturate(${v})`);\r\n });\r\n\r\n Object.entries(theme.boxshadow).forEach(([k, v]) => {\r\n set(`sky-box-shadow-${k}`, v);\r\n });\r\n\r\n set(\"sky-border-light\", theme.separator);\r\n\r\n /* motion tokens */\r\n\r\n Object.entries(theme.motion?.duration ?? {}).forEach(([k, v]) => {\r\n set(`sky-duration-${k}`, v);\r\n });\r\n\r\n Object.entries(theme.motion?.ease ?? {}).forEach(([k, v]) => {\r\n set(`sky-ease-${k}`, v);\r\n });\r\n\r\n set(\r\n \"sky-transition-default\",\r\n [\r\n \"background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n ].join(\", \"),\r\n );\r\n\r\n set(\r\n \"sky-transition-fast\",\r\n [\r\n \"background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n \"opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))\",\r\n ].join(\", \"),\r\n );\r\n\r\n /* z-index tokens */\r\n\r\n Object.entries(theme.zIndex ?? {}).forEach(([k, v]) => {\r\n set(`sky-z-${k}`, String(v));\r\n });\r\n\r\n /* opacity tokens */\r\n\r\n Object.entries(theme.opacity ?? {}).forEach(([k, v]) => {\r\n set(`sky-opacity-${k}`, String(v));\r\n });\r\n\r\n /* native scrollbar color tokens (size stays OS-native) */\r\n\r\n const scrollbar = theme.scrollbar;\r\n set(\"sky-scrollbar-track\", scrollbar?.track ?? \"transparent\");\r\n set(\r\n \"sky-scrollbar-thumb\",\r\n scrollbar?.thumb ??\r\n (isDark\r\n ? \"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)\"\r\n : \"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)\"),\r\n );\r\n set(\r\n \"sky-scrollbar-thumb-hover\",\r\n scrollbar?.thumbHover ??\r\n (isDark\r\n ? \"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))\"\r\n : \"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))\"),\r\n );\r\n\r\n /* text shadow */\r\n\r\n set(\r\n \"sky-text-shadow-on-glass\",\r\n isDark\r\n ? \"0 1px 2px rgba(0,0,0,0.45)\"\r\n : \"0 1px 1px rgba(255,255,255,0.55)\",\r\n );\r\n\r\n /* semantic color scales */\r\n\r\n const semanticColors = [\r\n \"active\",\r\n \"success\",\r\n \"warning\",\r\n \"danger\",\r\n \"info\",\r\n ] as const;\r\n\r\n semanticColors.forEach((key) => {\r\n const baseColor = theme.color[key];\r\n\r\n set(`sky-${key}-primary`, baseColor);\r\n\r\n set(\r\n `sky-${key}-secondary`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 82%, var(--sky-background-color))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-tertiary`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 62%, var(--sky-background-color))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-quaternary`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 42%, var(--sky-background-color))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-quinary`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 24%, var(--sky-background-color))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-primary-dark`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 88%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-secondary-dark`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 72%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-tertiary-dark`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 56%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-quaternary-dark`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 40%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-quinary-dark`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 28%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-g0`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 12%, transparent)`,\r\n );\r\n\r\n set(\r\n `sky-${key}-g1`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 24%, transparent)`,\r\n );\r\n\r\n set(\r\n `sky-${key}-g2`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 48%, transparent)`,\r\n );\r\n });\r\n\r\n /* semantic hover tokens */\r\n\r\n semanticColors.forEach((key) => {\r\n set(\r\n `sky-${key}-primary-hover`,\r\n `color-mix(in oklch, var(--sky-${key}-primary) 86%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-secondary-hover`,\r\n `color-mix(in oklch, var(--sky-${key}-secondary) 86%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-tertiary-hover`,\r\n `color-mix(in oklch, var(--sky-${key}-tertiary) 86%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-quaternary-hover`,\r\n `color-mix(in oklch, var(--sky-${key}-quaternary) 86%, var(--sky-text-dark))`,\r\n );\r\n\r\n set(\r\n `sky-${key}-quinary-hover`,\r\n `color-mix(in oklch, var(--sky-${key}-quinary) 86%, var(--sky-text-dark))`,\r\n );\r\n });\r\n\r\n /* ring tokens */\r\n\r\n semanticColors.forEach((key) => {\r\n set(`sky-ring-${key}-1`, `0 0 0 1px var(--sky-${key}-primary)`);\r\n set(`sky-ring-${key}-2`, `0 0 0 2px var(--sky-${key}-primary)`);\r\n set(`sky-ring-${key}-3`, `0 0 0 3px var(--sky-${key}-primary)`);\r\n set(`sky-ring-${key}-4`, `0 0 0 4px var(--sky-${key}-primary)`);\r\n set(`sky-ring-${key}-5`, `0 0 0 5px var(--sky-${key}-primary)`);\r\n\r\n set(\r\n `sky-ring-${key}-inset-1`,\r\n `inset 0 0 0 1px var(--sky-${key}-primary)`,\r\n );\r\n\r\n set(\r\n `sky-ring-${key}-inset-2`,\r\n `inset 0 0 0 2px var(--sky-${key}-primary)`,\r\n );\r\n\r\n set(\r\n `sky-ring-${key}-inset-3`,\r\n `inset 0 0 0 3px var(--sky-${key}-primary)`,\r\n );\r\n });\r\n\r\n // Focus ring: nested var() resolves on this host, then inherits substituted.\r\n // Components that set `--sky-focus-ring-color` must also redeclare `--sky-focus-ring`\r\n // (see `helper/styles/focus-ring.ts`).\r\n set(\"sky-focus-ring-color\", \"var(--sky-active-primary)\");\r\n set(\r\n \"sky-focus-ring\",\r\n \"0 0 0 3px color-mix(in oklch, var(--sky-focus-ring-color, var(--sky-active-primary)) 42%, transparent)\",\r\n );\r\n\r\n set(\"sky-focus-ring-offset\", \"2px\");\r\n\r\n set(\"sky-text-white\", \"oklch(1 0 0)\");\r\n set(\"sky-text-black\", \"oklch(0 0 0)\");\r\n\r\n /* on-color fallbacks (solid fills; prefer CSS contrast-color() when supported) */\r\n set(\"sky-on-color-fallback-light\", \"var(--sky-text-white)\");\r\n set(\"sky-on-color-fallback-dark\", \"var(--sky-text-black)\");\r\n\r\n // Static no-@supports fallbacks (assume dark fill → light FG). Components that\r\n // paint solid fills should enhance with contrast-color(var(--_fill)).\r\n set(\"sky-on-active-primary\", \"var(--sky-on-color-fallback-light)\");\r\n set(\"sky-on-success-primary\", \"var(--sky-on-color-fallback-light)\");\r\n set(\"sky-on-warning-primary\", \"var(--sky-on-color-fallback-light)\");\r\n set(\"sky-on-danger-primary\", \"var(--sky-on-color-fallback-light)\");\r\n set(\"sky-on-info-primary\", \"var(--sky-on-color-fallback-light)\");\r\n\r\n /* typography scale tokens */\r\n\r\n Object.entries(theme.fontSize ?? {}).forEach(([k, v]) => {\r\n set(`sky-font-size-${k}`, v);\r\n });\r\n\r\n Object.entries(theme.fontWeight ?? {}).forEach(([k, v]) => {\r\n set(`sky-font-weight-${k}`, v);\r\n });\r\n\r\n Object.entries(theme.lineHeight ?? {}).forEach(([k, v]) => {\r\n set(`sky-line-height-${k}`, v);\r\n });\r\n\r\n Object.entries(theme.letterSpacing ?? {}).forEach(([k, v]) => {\r\n set(`sky-letter-spacing-${k}`, v);\r\n });\r\n\r\n /* font shorthand presets */\r\n\r\n const getFontSize = (key: string, fallback: string) =>\r\n (theme.fontSize as Record<string, string> | undefined)?.[key] ?? fallback;\r\n\r\n const getLineHeight = (key: string, fallback: string) =>\r\n (theme.lineHeight as Record<string, string> | undefined)?.[key] ??\r\n fallback;\r\n\r\n const fontPresets: Array<{ key: string; size: string; line: string }> = [\r\n { key: \"xs\", size: \"xs\", line: \"tight\" },\r\n { key: \"sm\", size: \"sm\", line: \"snug\" },\r\n { key: \"md\", size: \"md\", line: \"normal\" },\r\n { key: \"lg\", size: \"lg\", line: \"snug\" },\r\n { key: \"xl\", size: \"xl\", line: \"snug\" },\r\n { key: \"2xl\", size: \"2xl\", line: \"tight\" },\r\n { key: \"3xl\", size: \"3xl\", line: \"tight\" },\r\n { key: \"4xl\", size: \"4xl\", line: \"tight\" },\r\n ];\r\n\r\n for (const { key, size, line } of fontPresets) {\r\n const sizeVal = getFontSize(size, \"1rem\");\r\n const lineVal = getLineHeight(line, \"1.5\");\r\n\r\n set(`sky-font-${key}`, `${sizeVal} / ${lineVal} var(--sky-font-sans)`);\r\n set(`sky-font-mono-${key}`, `${sizeVal} / ${lineVal} var(--sky-font-mono)`);\r\n }\r\n\r\n /* spacing tokens */\r\n\r\n Object.entries(theme.spacing ?? {}).forEach(([k, v]) => {\r\n set(`sky-space-${k}`, v);\r\n });\r\n\r\n /* semantic typography role tokens */\r\n\r\n const roleMap = {\r\n body: { size: \"md\", weight: \"normal\", line: \"normal\" },\r\n label: { size: \"sm\", weight: \"medium\", line: \"snug\" },\r\n caption: { size: \"xs\", weight: \"normal\", line: \"tight\" },\r\n title: { size: \"lg\", weight: \"semibold\", line: \"snug\" },\r\n heading: { size: \"2xl\", weight: \"bold\", line: \"tight\" },\r\n display: { size: \"4xl\", weight: \"bold\", line: \"tight\" },\r\n } as const;\r\n\r\n const getFontWeight = (key: string, fallback: string) =>\r\n (theme.fontWeight as Record<string, string> | undefined)?.[key] ??\r\n fallback;\r\n\r\n for (const [role, cfg] of Object.entries(roleMap)) {\r\n const sizeVal = getFontSize(cfg.size, \"1rem\");\r\n const weightVal = getFontWeight(cfg.weight, \"400\");\r\n const lineVal = getLineHeight(cfg.line, \"1.5\");\r\n\r\n set(\r\n `sky-text-${role}`,\r\n `${weightVal} ${sizeVal}/${lineVal} var(--sky-font-sans)`,\r\n );\r\n }\r\n\r\n return out;\r\n}\r\n\r\n/** Expand comma-separated selectors so pseudo-elements attach to each branch. */\r\nfunction withPseudoSelectors(selector: string, pseudo: string): string {\r\n return selector\r\n .split(\",\")\r\n .map((part) => `${part.trim()}${pseudo}`)\r\n .join(\",\\n\");\r\n}\r\n\r\n/** Tints native scrollbars from `--sky-scrollbar-*` tokens; width/thickness stay OS-native. */\r\nfunction buildNativeScrollbarCSS(selector: string): string {\r\n const webkitTrack = withPseudoSelectors(selector, \"::-webkit-scrollbar-track\");\r\n const webkitThumb = withPseudoSelectors(selector, \"::-webkit-scrollbar-thumb\");\r\n const webkitThumbHover = withPseudoSelectors(\r\n selector,\r\n \"::-webkit-scrollbar-thumb:hover\",\r\n );\r\n\r\n return `\r\n${selector} {\r\n scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\r\n}\r\n${webkitTrack} {\r\n background: var(--sky-scrollbar-track);\r\n}\r\n${webkitThumb} {\r\n background-color: var(--sky-scrollbar-thumb);\r\n}\r\n${webkitThumbHover} {\r\n background-color: var(--sky-scrollbar-thumb-hover);\r\n}\r\n`.trim();\r\n}\r\n\r\nconst NATIVE_SCROLLBAR_ROOT_SELECTOR = \"html, body, *\";\r\nconst NATIVE_SCROLLBAR_HOST_SELECTOR =\r\n \"sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *\";\r\n\r\n/* buildVarCSS keeps same semantics */\r\nfunction buildVarCSS(vars: Record<string, string>, selector: string) {\r\n // Custom-property names containing \".\" (e.g. --sky-space-2.5) are invalid CSS\r\n // idents unless the dot is escaped. Without this, fractional spacing tokens are\r\n // dropped by the parser and never defined. Escape the dot in the name only.\r\n const body = Object.entries(vars)\r\n .map(([k, v]) => `${k.replace(/\\./g, \"\\\\.\")}:${v};`)\r\n .join(\"\");\r\n return `${selector}{${body}}`;\r\n}\r\n\r\nfunction ensureStyleTag(id: string, cssText: string): HTMLStyleElement {\r\n let tag = document.getElementById(id) as HTMLStyleElement | null;\r\n if (!tag) {\r\n tag = document.createElement(\"style\");\r\n tag.id = id;\r\n document.head.appendChild(tag);\r\n }\r\n tag.textContent = cssText;\r\n return tag;\r\n}\r\n\r\n/* context + provider implementation (unchanged except for token emission) */\r\nexport interface ThemeContextValue {\r\n mode: \"light\" | \"dark\";\r\n preference: ThemePreference;\r\n theme: ThemeConfig;\r\n setPreference: (pref: ThemePreference) => void;\r\n togglePreference: () => ThemePreference;\r\n}\r\nexport const themeContext = createContext<ThemeContextValue>(\"sky/theme\");\r\ntype ThemeScope = \"root\" | \"host\" | \"both\";\r\nexport type SkyThemeProviderScope = ThemeScope;\r\nexport type SkyThemeProviderGlobalChangeDetail = {\r\n mode: \"light\" | \"dark\";\r\n preference: ThemePreference;\r\n};\r\n\r\n\r\n/**\r\n * @element sky-theme-provider\r\n *\r\n * @summary Theme provider for light, dark, and system preferences with CSS variable generation.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/theme-provider\r\n *\r\n * @slot - Default slot for content that will receive theme context.\r\n *\r\n * @csspart container - The theme provider container element.\r\n *\r\n * @property {Partial<ThemeConfig>} userTheme - Custom theme overrides.\r\n * @property {SkyThemeProviderScope} scope - Where CSS variables are applied.\r\n * @property {\"light\"|\"dark\"|\"system\"} preference - Theme preference.\r\n * @property {boolean} persist - Persists preference in localStorage.\r\n * @property {boolean} broadcast - Broadcasts theme changes through events.\r\n *\r\n * @fires {CustomEvent<SkyThemeProviderGlobalChangeDetail>} theme-change-global - Fired when theme changes globally.\r\n * @fires {CustomEvent<SkyThemeProviderGlobalChangeDetail>} sky-theme - Fired on global theme updates.\r\n *\r\n * @Behavior\r\n * - Resolves light/dark mode from explicit or system preference.\r\n * - Emits CSS custom properties for color, typography, spacing, and motion tokens.\r\n * - Provides theme context for descendant components.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-theme-provider preference=\"system\" scope=\"both\">\r\n * <app-content></app-content>\r\n * </sky-theme-provider>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-theme-provider :user-theme=\"theme\" preference=\"dark\" scope=\"both\">\r\n * <app-content />\r\n * </sky-theme-provider>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return <sky-theme-provider userTheme={theme} preference=\"dark\" scope=\"both\"><app-content /></sky-theme-provider>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-theme-provider\")\r\nexport class SkyThemeProvider extends LitElement {\r\n /** User theme overrides. From HTML pass JSON, e.g. usertheme='{\"primary\":\"#0af\"}'. */\r\n @property({ type: Object }) userTheme?: PartialTheme;\r\n\r\n /** Where to apply CSS vars and global CSS. Default: \"root\". */\r\n @property({ type: String, reflect: true }) scope: ThemeScope = \"root\";\r\n\r\n @property({ type: String, reflect: true })\r\n preference: ThemePreference = getThemePreference();\r\n\r\n @state() private mode: \"light\" | \"dark\" = \"light\";\r\n\r\n @provide({ context: themeContext })\r\n private _ctx!: ThemeContextValue;\r\n\r\n @property({ type: Boolean }) persist: boolean = true;\r\n @property({ type: Boolean }) broadcast: boolean = true;\r\n\r\n private media: MediaQueryList | null = null;\r\n private globalStyleId = \"sky-theme-provider-global-style\";\r\n private hostScrollbarStyleId = \"sky-theme-provider-host-scrollbar\";\r\n private hostSheet: CSSStyleSheet | null = null;\r\n private hostStyleEl: HTMLStyleElement | null = null;\r\n private rootVarsStyleId = \"sky-theme-vars-root\";\r\n\r\n static styles = css`\r\n :host {\r\n display: contents;\r\n }\r\n\r\n :host {\r\n font-family: var(--sky-font);\r\n color: var(--sky-text-primary);\r\n background: var(--sky-background-color);\r\n }\r\n `;\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n this.mode = resolveActualTheme(this.preference);\r\n this.pushContext();\r\n this.setupSystemWatcher();\r\n if (this.scope === \"host\") {\r\n this.applyVariables();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.media?.removeEventListener(\"change\", this.onSystemChange);\r\n\r\n if (this.hostStyleEl && this.hostStyleEl.parentNode) {\r\n this.hostStyleEl.parentNode.removeChild(this.hostStyleEl);\r\n this.hostStyleEl = null;\r\n }\r\n\r\n if (this.scope === \"host\") {\r\n const s = document.getElementById(this.globalStyleId);\r\n if (s) s.remove();\r\n const hostScrollbar = document.getElementById(this.hostScrollbarStyleId);\r\n if (hostScrollbar) hostScrollbar.remove();\r\n }\r\n }\r\n\r\n protected firstUpdated(): void {\r\n if (this.scope === \"root\" || this.scope === \"both\") {\r\n this.applyVariables();\r\n }\r\n }\r\n\r\n override updated(changedProperties: Map<string | number | symbol, unknown>): void {\r\n super.updated(changedProperties);\r\n\r\n // Ensure context is updated after DOM updates\r\n if (\r\n changedProperties.has(\"userTheme\") ||\r\n changedProperties.has(\"mode\") ||\r\n changedProperties.has(\"preference\") ||\r\n changedProperties.has(\"scope\")\r\n ) {\r\n this.pushContext();\r\n }\r\n }\r\n\r\n protected override willUpdate(changed: Map<string, unknown>): void {\r\n const prefChanged = changed.has(\"preference\");\r\n const scopeChanged = changed.has(\"scope\");\r\n const userThemeChanged = changed.has(\"userTheme\");\r\n\r\n let modeChanged = false;\r\n\r\n if (prefChanged || scopeChanged) {\r\n const nextMode = resolveActualTheme(this.preference);\r\n if (nextMode !== this.mode) {\r\n this.mode = nextMode;\r\n modeChanged = true;\r\n }\r\n }\r\n\r\n const hydrated = !!this.hasUpdated;\r\n const canApplyNow = this.scope === \"host\" || hydrated;\r\n if (canApplyNow && (modeChanged || scopeChanged || userThemeChanged)) {\r\n this.applyVariables();\r\n }\r\n\r\n if (prefChanged || modeChanged || userThemeChanged || scopeChanged) {\r\n this.pushContext();\r\n\r\n // Avoid broadcasting before hydration when scope touches root. Host-only providers still broadcast\r\n // when userTheme / mode / preference updates so consumers (e.g. sky-chart mono palette) can refresh.\r\n const hostThemeChanged =\r\n this.scope === \"host\" &&\r\n hydrated &&\r\n (userThemeChanged || prefChanged || modeChanged || scopeChanged);\r\n if (\r\n this.broadcast &&\r\n ((this.scope === \"root\" || this.scope === \"both\") || hostThemeChanged)\r\n ) {\r\n this.broadcastTheme();\r\n }\r\n }\r\n }\r\n\r\n private setRootThemeAttrs() {\r\n const de = document.documentElement;\r\n de.toggleAttribute(\"data-theme-light\", this.mode === \"light\");\r\n de.toggleAttribute(\"data-theme-dark\", this.mode === \"dark\");\r\n de.setAttribute(\"data-theme\", this.mode);\r\n (de.style as any).colorScheme = this.mode;\r\n de.classList.toggle(\"dark\", this.mode === \"dark\");\r\n }\r\n\r\n private broadcastTheme() {\r\n const detail = { mode: this.mode, preference: this.preference };\r\n window.dispatchEvent(new CustomEvent(\"sky-theme\", { detail }));\r\n\r\n window.dispatchEvent(new CustomEvent(\"theme-change-global\", { detail }));\r\n }\r\n\r\n public setPreference(pref: ThemePreference) {\r\n try {\r\n if (this.persist && (this.scope === \"root\" || this.scope === \"both\")) {\r\n localStorage.setItem(\"theme\", pref);\r\n }\r\n } catch { }\r\n this.preference = pref;\r\n\r\n if (this.broadcast && (this.scope === \"root\" || this.scope === \"both\")) {\r\n this.dispatchEvent(\r\n new CustomEvent(\"theme-change-global\", {\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n }\r\n\r\n public togglePreference(): ThemePreference {\r\n const current = this.preference ?? getThemePreference();\r\n const next: ThemePreference =\r\n current === \"light\" ? \"dark\" : current === \"dark\" ? \"system\" : \"light\";\r\n this.setPreference(next);\r\n return next;\r\n }\r\n\r\n private onSystemChange = () => {\r\n if ((this.preference ?? getThemePreference()) === \"system\") {\r\n this.mode = resolveActualTheme(\"system\");\r\n this.applyVariables();\r\n this.pushContext();\r\n this.dispatchEvent(\r\n new CustomEvent(\"theme-change-global\", {\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n };\r\n\r\n private setupSystemWatcher() {\r\n if (typeof window === \"undefined\" || !window.matchMedia) return;\r\n this.media = window.matchMedia(\"(prefers-color-scheme: dark)\");\r\n this.media.addEventListener(\"change\", this.onSystemChange);\r\n }\r\n\r\n /** Ensure global body + dialog + native scrollbar rules when scope touches root. */\r\n private ensureGlobalStyle() {\r\n if (typeof document === \"undefined\") return;\r\n const cssText = `\r\n body {\r\n font-family: var(--sky-font);\r\n margin: 0;\r\n padding: 0;\r\n background: var(--sky-background-color);\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n html[data-sky-dialog-open=\"true\"] {\r\n overflow: hidden !important;\r\n position: relative;\r\n height: 100%;\r\n }\r\n\r\n ${buildNativeScrollbarCSS(NATIVE_SCROLLBAR_ROOT_SELECTOR)}\r\n `.trim();\r\n\r\n let tag = document.getElementById(\r\n this.globalStyleId,\r\n ) as HTMLStyleElement | null;\r\n if (!tag) {\r\n tag = document.createElement(\"style\");\r\n tag.id = this.globalStyleId;\r\n tag.textContent = cssText;\r\n document.head.appendChild(tag);\r\n } else {\r\n tag.textContent = cssText;\r\n }\r\n }\r\n\r\n private applyHostNativeScrollbars(enabled: boolean) {\r\n if (typeof document === \"undefined\") return;\r\n this.toggleAttribute(\"sky-native-scrollbars\", enabled);\r\n if (!enabled) {\r\n const tag = document.getElementById(this.hostScrollbarStyleId);\r\n if (tag) tag.remove();\r\n return;\r\n }\r\n ensureStyleTag(\r\n this.hostScrollbarStyleId,\r\n buildNativeScrollbarCSS(NATIVE_SCROLLBAR_HOST_SELECTOR),\r\n );\r\n }\r\n\r\n private applyVariables() {\r\n const full = mergeTheme(this.userTheme || {});\r\n const modeTheme = full[this.mode];\r\n const isDark = this.mode === \"dark\";\r\n const vars = generateVarMap(modeTheme, isDark);\r\n\r\n this.toggleAttribute(\"data-theme-light\", this.mode === \"light\");\r\n this.toggleAttribute(\"data-theme-dark\", this.mode === \"dark\");\r\n\r\n if (this.scope === \"host\" || this.scope === \"both\") {\r\n const cssText = buildVarCSS(vars, \":host\");\r\n\r\n if (\r\n \"adoptedStyleSheets\" in Document.prototype &&\r\n \"replaceSync\" in CSSStyleSheet.prototype\r\n ) {\r\n if (!this.hostSheet) {\r\n this.hostSheet = new CSSStyleSheet();\r\n\r\n const current =\r\n (this.renderRoot as ShadowRoot).adoptedStyleSheets ?? [];\r\n (this.renderRoot as ShadowRoot).adoptedStyleSheets = [\r\n ...current,\r\n this.hostSheet,\r\n ];\r\n }\r\n this.hostSheet.replaceSync(cssText);\r\n } else {\r\n if (!this.hostStyleEl) {\r\n this.hostStyleEl = document.createElement(\"style\");\r\n this.renderRoot.appendChild(this.hostStyleEl);\r\n }\r\n this.hostStyleEl.textContent = cssText;\r\n }\r\n\r\n this.style.removeProperty(\"color\");\r\n this.style.removeProperty(\"background\");\r\n\r\n this.applyHostNativeScrollbars(true);\r\n } else {\r\n this.applyHostNativeScrollbars(false);\r\n }\r\n\r\n if (this.scope === \"root\" || this.scope === \"both\") {\r\n const cssText = buildVarCSS(vars, \":root\");\r\n ensureStyleTag(this.rootVarsStyleId, cssText);\r\n\r\n this.setRootThemeAttrs();\r\n this.ensureGlobalStyle();\r\n\r\n if (document.body) {\r\n document.body.style.removeProperty(\"color\");\r\n document.body.style.removeProperty(\"background\");\r\n document.body.style.removeProperty(\"font-family\");\r\n }\r\n\r\n this.broadcastTheme();\r\n }\r\n }\r\n\r\n private pushContext() {\r\n const mergedTheme = mergeTheme(this.userTheme ?? {});\r\n\r\n this._ctx = {\r\n mode: this.mode,\r\n preference: this.preference,\r\n theme: mergedTheme,\r\n setPreference: (pref: ThemePreference) => this.setPreference(pref),\r\n togglePreference: () => this.togglePreference(),\r\n };\r\n }\r\n\r\n override render() {\r\n return html`<slot></slot>`;\r\n }\r\n}\r\n"],"names":["defaultTheme","light","glass","baseColor","baseShades","secondary","tertiary","opacities","primary","solid","overlay","color","glassHover","opacity","fontFamily","fontFamilyMono","fontSize","xs","sm","md","lg","xl","fontWeight","thin","normal","medium","semibold","bold","extrabold","lineHeight","tight","snug","relaxed","loose","letterSpacing","tighter","wide","wider","spacing","px","background","foreground","active","success","warning","danger","info","blur","radius","full","boxshadow","inset","hover","brightness","saturation","separator","border","glassSurface","top","bottom","motion","duration","instant","fast","slow","ease","default","in","out","inOut","bounce","zIndex","base","dropdown","sticky","fixed","modal","popover","toast","max","disabled","muted","subtle","scrollbar","track","thumb","thumbHover","dark","getThemePreference","localStorage","v","getItem","resolveActualTheme","pref","window","matchMedia","matches","getCurrentTheme","document","documentElement","getAttribute","onThemeChange","cb","handler","e","mode","preference","detail","addEventListener","queueMicrotask","removeEventListener","deepMerge","target","source","t","Array","isArray","k","sv","lastMergeUser","lastMergeResult","mergeTheme","userTheme","clampAlpha","alpha","fallback","value","Number","isFinite","Math","min","clampPercent","round","isOKLCH","test","trim","toOKLCH","hexOrOKLCH","toOKLCHAlpha","safeAlpha","alphaPct","includes","replace","mixOKLCH","colorA","amountA","colorB","withPseudoSelectors","selector","pseudo","split","map","part","join","buildNativeScrollbarCSS","buildVarCSS","vars","Object","entries","ensureStyleTag","id","cssText","tag","getElementById","createElement","head","appendChild","textContent","themeContext","createContext","SkyThemeProvider","LitElement","constructor","super","arguments","this","scope","persist","broadcast","media","globalStyleId","hostScrollbarStyleId","hostSheet","hostStyleEl","rootVarsStyleId","onSystemChange","applyVariables","pushContext","dispatchEvent","CustomEvent","bubbles","composed","connectedCallback","setupSystemWatcher","disconnectedCallback","parentNode","removeChild","s","remove","hostScrollbar","firstUpdated","updated","changedProperties","has","willUpdate","changed","prefChanged","scopeChanged","userThemeChanged","modeChanged","nextMode","hydrated","hasUpdated","hostThemeChanged","broadcastTheme","setRootThemeAttrs","de","toggleAttribute","setAttribute","style","colorScheme","classList","toggle","setPreference","setItem","togglePreference","current","next","ensureGlobalStyle","applyHostNativeScrollbars","enabled","theme","isDark","set","fontSans","fontMono","textSteps","quaternary","quinary","forEach","level","pct","op","glassShadeAnchor","glassShadeSteps","glassPrimaryShade","glassSecondaryShade","glassTertiaryShade","glassStrengthFallback","glassStrength","glassSurfaceTopAlpha","glassSurfaceBottomAlpha","String","semanticColors","key","getFontSize","getLineHeight","fontPresets","size","line","sizeVal","lineVal","roleMap","body","weight","label","caption","title","heading","display","getFontWeight","role","cfg","weightVal","generateVarMap","Document","prototype","CSSStyleSheet","renderRoot","adoptedStyleSheets","replaceSync","removeProperty","mergedTheme","_ctx","render","html","styles","css","__decorateClass","property","type","reflect","state","provide","context","Boolean","customElement"],"mappings":"yXAgIA,MAGaA,EAA4B,CACvCC,MAAO,CACLC,MAAO,CACLC,UAAW,UACXC,WAAY,CACVC,UAAW,UACXC,SAAU,WAGZC,UAAW,CAAEC,QAAS,GAAKH,UAAW,IAAMC,SAAU,IAAMG,MAAO,MAErEC,QAAS,CACPC,MAAO,UACPJ,UAAW,CAAEC,QAAS,IAAMH,UAAW,IAAMC,SAAU,IAAMG,MAAO,IAEtEG,WAAY,CACVD,MAAO,UACPE,QAAS,CAAEL,QAAS,IAAMH,UAAW,IAAMC,SAAU,GAAKG,MAAO,IAEnEK,WACE,gFACFC,eACE,iEACFC,SAAU,CACRC,GAAI,UACJC,GAAI,WACJC,GAAI,OACJC,GAAI,WACJC,GAAI,UACJ,MAAO,SACP,MAAO,WACP,MAAO,UACP,MAAO,OACP,MAAO,WAETC,WAAY,CACVC,KAAM,MACNtB,MAAO,MACPuB,OAAQ,MACRC,OAAQ,MACRC,SAAU,MACVC,KAAM,MACNC,UAAW,OAEbC,WAAY,CACVC,MAAO,MACPC,KAAM,OACNP,OAAQ,MACRQ,QAAS,OACTC,MAAO,KAETC,cAAe,CACbC,QAAS,UACTL,MAAO,WACPN,OAAQ,MACRY,KAAM,SACNC,MAAO,UAETC,QAAS,CACP,EAAK,MACLC,GAAI,MACJ,GAAO,WACP,EAAK,UACL,IAAO,WACP,EAAK,SACL,IAAO,WACP,EAAK,UACL,IAAO,WACP,EAAK,OACL,EAAK,UACL,EAAK,SACL,EAAK,OACL,GAAM,SACN,GAAM,OACN,GAAM,OACN,GAAM,OACN,GAAM,OACN,GAAM,OACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,SAGR5B,MAAO,CACL6B,WAAY,UACZC,WAAY,UACZC,OAAQ,UACRC,QAAS,UACTC,QAAS,UACTC,OAAQ,UACRC,KAAM,WAGRC,KAAM,CAAEvC,QAAS,OAAQH,UAAW,OAAQC,SAAU,QACtD0C,OAAQ,CACNxC,QAAS,MACTH,UAAW,OACXC,SAAU,OACV2C,KAAM,UAERC,UAAW,CACT1C,QAAS,qEACTH,UAAW,sEACXC,SAAU,sEACV6C,MACE,iFACFC,MAAO,uEAETC,WAAY,CAAE7C,QAAS,OAAQH,UAAW,OAAQC,SAAU,QAC5DgD,WAAY,CAAE9C,QAAS,OAAQH,UAAW,OAAQC,SAAU,QAC5DiD,UAAW,yBACXC,OAAQ,CACNhD,QAAS,mCACTH,UACE,wEACFC,SACE,yEAEJmD,aAAc,CAAEC,IAAK,IAAMC,OAAQ,KACnCC,OAAQ,CACNC,SAAU,CAAEC,QAAS,MAAOC,KAAM,QAASvC,OAAQ,QAASwC,KAAM,SAClEC,KAAM,CACJC,QAAS,+BACTC,GAAI,6BACJC,IAAK,6BACLC,MAAO,+BACPC,OAAQ,sCAGZC,OAAQ,CACNC,KAAM,EACNC,SAAU,IACVC,OAAQ,KACRC,MAAO,KACPC,MAAO,KACPC,QAAS,KACTC,MAAO,KACPC,IAAK,MAEPlE,QAAS,CAAEmE,SAAU,GAAKC,MAAO,GAAKC,OAAQ,KAC9CC,UAAW,CACTC,MAAO,cACPC,MACE,kFACFC,WACE,oFAINC,KAAM,CACJrF,MAAO,CACLC,UAAW,UACXC,WAAY,CACVC,UAAW,UACXC,SAAU,WAEZC,UAAW,CAAEC,QAAS,IAAMH,UAAW,IAAMC,SAAU,IAAMG,MAAO,MAEtEC,QAAS,CACPC,MAAO,UACPJ,UAAW,CAAEC,QAAS,IAAMH,UAAW,IAAMC,SAAU,IAAMG,MAAO,IAEtEG,WAAY,CACVD,MAAO,UACPE,QAAS,CAAEL,QAAS,IAAMH,UAAW,GAAKC,SAAU,IAAMG,MAAO,IAEnEK,WACE,gFACFC,eACE,iEACFC,SAAU,CACRC,GAAI,UACJC,GAAI,WACJC,GAAI,OACJC,GAAI,WACJC,GAAI,UACJ,MAAO,SACP,MAAO,WACP,MAAO,UACP,MAAO,OACP,MAAO,WAETC,WAAY,CACVC,KAAM,MACNtB,MAAO,MACPuB,OAAQ,MACRC,OAAQ,MACRC,SAAU,MACVC,KAAM,MACNC,UAAW,OAEbC,WAAY,CACVC,MAAO,MACPC,KAAM,OACNP,OAAQ,MACRQ,QAAS,OACTC,MAAO,KAETC,cAAe,CACbC,QAAS,UACTL,MAAO,WACPN,OAAQ,MACRY,KAAM,SACNC,MAAO,UAETC,QAAS,CACP,EAAK,MACLC,GAAI,MACJ,GAAO,WACP,EAAK,UACL,IAAO,WACP,EAAK,SACL,IAAO,WACP,EAAK,UACL,IAAO,WACP,EAAK,OACL,EAAK,UACL,EAAK,SACL,EAAK,OACL,GAAM,SACN,GAAM,OACN,GAAM,OACN,GAAM,OACN,GAAM,OACN,GAAM,OACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,SAGR5B,MAAO,CACL6B,WAAY,UACZC,WAAY,UACZC,OAAQ,UACRC,QAAS,UACTC,QAAS,UACTC,OAAQ,UACRC,KAAM,WAGRC,KAAM,CAAEvC,QAAS,OAAQH,UAAW,OAAQC,SAAU,QACtD0C,OAAQ,CACNxC,QAAS,MACTH,UAAW,OACXC,SAAU,OACV2C,KAAM,UAERC,UAAW,CACT1C,QAAS,8DACTH,UAAW,gEACXC,SAAU,+DACV6C,MACE,6EACFC,MAAO,iEAETC,WAAY,CAAE7C,QAAS,OAAQH,UAAW,OAAQC,SAAU,QAC5DgD,WAAY,CAAE9C,QAAS,OAAQH,UAAW,OAAQC,SAAU,QAC5DiD,UAAW,2BACXC,OAAQ,CACNhD,QAAS,sCACTH,UACE,2EACFC,SACE,4EAEJmD,aAAc,CAAEC,IAAK,IAAMC,OAAQ,KACnCC,OAAQ,CACNC,SAAU,CAAEC,QAAS,MAAOC,KAAM,QAASvC,OAAQ,QAASwC,KAAM,SAClEC,KAAM,CACJC,QAAS,+BACTC,GAAI,6BACJC,IAAK,6BACLC,MAAO,+BACPC,OAAQ,sCAGZC,OAAQ,CACNC,KAAM,EACNC,SAAU,IACVC,OAAQ,KACRC,MAAO,KACPC,MAAO,KACPC,QAAS,KACTC,MAAO,KACPC,IAAK,MAEPlE,QAAS,CAAEmE,SAAU,GAAKC,MAAO,GAAKC,OAAQ,KAC9CC,UAAW,CACTC,MAAO,cACPC,MACE,kFACFC,WACE,qFAKD,SAASE,IACd,IACE,GAA4B,oBAAjBC,aAA8B,CACvC,MAAMC,EAAID,aAAaE,QAjTX,SAkTZ,MAAa,UAAND,GAAuB,SAANA,GAAsB,WAANA,EAAiBA,EAAI,QAC/D,CACF,CAAA,MAAU,CACV,MAAO,QACT,CAEO,SAASE,EAAmBC,GACjC,GAAsB,oBAAXC,OAAwB,MAAO,QAC1C,GAAa,WAATD,EAAmB,CACrB,IACE,GAAIC,OAAOC,WACT,OAAOD,OAAOC,WAAW,gCAAgCC,QACrD,OACA,OAER,CAAA,MAAU,CACV,MAAO,OACT,CACA,OAAOH,CACT,CAGO,SAASI,IACd,GAAwB,oBAAbC,SAA0B,MAAO,QAC5C,MACMR,EADKQ,SAASC,gBACPC,aAAa,cAC1B,MAAU,UAANV,GAAuB,SAANA,EAAqBA,EACb,oBAAfK,YAA8BA,WAAW,gCAAgCC,QACnF,OACA,OACN,CAGO,SAASK,EACdC,GAEA,GAAsB,oBAAXR,OAAwB,MAAO,OAC1C,MAAMS,EAAWC,IACf,MAAMC,KAAEA,EAAAC,WAAMA,GAAgBF,EAAkBG,QAAU,CAAA,EAC7C,UAATF,GAA6B,SAATA,EAAiBH,EAAGG,EAAMC,GAC7CJ,EAAGL,aAKV,OAHAH,OAAOc,iBAAiB,YAAaL,GAErCM,eAAe,IAAMP,EAAGL,SAAmB,IACpC,IAAMH,OAAOgB,oBAAoB,YAAaP,EACvD,CAEA,SAASQ,EAAaC,EAAWC,GAC/B,MAAMC,EAASC,MAAMC,QAAQJ,GACzB,IAAKA,GACL,IAAMA,GACV,IAAA,MAAWK,KAAKJ,EAAQ,CACtB,MAAMK,EAAWL,EAAeI,GAC5BC,GAAoB,iBAAPA,IAAoBH,MAAMC,QAAQE,GACjDJ,EAAEG,GAAKN,EAAWC,EAAeK,GAAIC,GAErCJ,EAAEG,GAAKC,GAAON,EAAeK,EAEjC,CACA,OAAOH,CACT,CAEA,IAAIK,EACAC,EAEG,SAASC,EAAWC,GACzB,OAAIA,IAAcH,GAAiBC,IACnCA,EAAkB,CAChBvH,MAAO8G,EAAU/G,EAAaC,MAAOyH,EAAUzH,OAAS,IACxDsF,KAAMwB,EAAU/G,EAAauF,KAAMmC,EAAUnC,MAAQ,CAAA,IAEvDgC,EAAgBG,GAL2CF,CAO7D,CAIA,SAASG,EAAWC,EAA2BC,EAAW,GACxD,MAAMC,EACa,iBAAVF,GAAsBG,OAAOC,SAASJ,GAASA,EAAQC,EAEhE,OAAOI,KAAKlD,IAAI,EAAGkD,KAAKC,IAAI,EAAGJ,GACjC,CAEA,SAASK,EAAaL,GACpB,OAAKC,OAAOC,SAASF,GACdG,KAAKlD,IAAI,EAAGkD,KAAKC,IAAI,IAAKD,KAAKG,MAAMN,KADR,GAEtC,CAEA,SAASO,EAAQP,GACf,MAAO,0EAA0EQ,KAC/ER,EAAMS,OAEV,CAEA,SAASC,EAAQC,GACf,OAAIJ,EAAQI,GAAoBA,CAElC,CAEA,SAASC,EAAaD,EAAoBb,GACxC,MAAMe,EAAYhB,EAAWC,GACvBgB,EAAWT,EAAyB,IAAZQ,GAE9B,GAAIA,GAAa,EAAG,MAAO,cAC3B,GAAIA,GAAa,EAAG,OAAOH,EAAQC,GAEnC,GAAIJ,EAAQI,GAAa,CACvB,MAAMX,EAAQW,EAAWF,OAEzB,OAAOT,EAAMe,SAAS,KAClBf,EACAA,EAAMgB,QAAQ,MAAO,MAAMF,MACjC,CAEA,MAAO,uBAAuBH,KAAcG,kBAC9C,CAEA,SAASG,EAASC,EAAgBC,EAAiBC,GACjD,MAAO,uBAAuBF,KAAUb,EAAac,QAAcC,IACrE,CA0fA,SAASC,EAAoBC,EAAkBC,GAC7C,OAAOD,EACJE,MAAM,KACNC,IAAKC,GAAS,GAAGA,EAAKjB,SAASc,KAC/BI,KAAK,MACV,CAGA,SAASC,EAAwBN,GAQ/B,MAAO,KACPA,sFARoBD,EAAoBC,EAAU,iFAC9BD,EAAoBC,EAAU,uFACzBD,EACvBC,EACA,mGAgBFb,MACF,CAOA,SAASoB,EAAYC,EAA8BR,GAOjD,MAAO,GAAGA,KAHGS,OAAOC,QAAQF,GACzBL,IAAI,EAAElC,EAAG3B,KAAO,GAAG2B,EAAEyB,QAAQ,MAAO,UAAUpD,MAC9C+D,KAAK,MAEV,CAEA,SAASM,EAAeC,EAAYC,GAClC,IAAIC,EAAMhE,SAASiE,eAAeH,GAOlC,OANKE,IACHA,EAAMhE,SAASkE,cAAc,SAC7BF,EAAIF,GAAKA,EACT9D,SAASmE,KAAKC,YAAYJ,IAE5BA,EAAIK,YAAcN,EACXC,CACT,CAUO,MAAMM,EAAeC,EAAiC,aAyDtD,IAAMC,EAAN,cAA+BC,EAA/B,WAAAC,GAAAC,SAAAC,WAKsCC,KAAAC,MAAoB,OAG/DD,KAAArE,WAA8BlB,IAErBuF,KAAQtE,KAAyB,QAKbsE,KAAAE,SAAmB,EACnBF,KAAAG,WAAqB,EAElDH,KAAQI,MAA+B,KACvCJ,KAAQK,cAAgB,kCACxBL,KAAQM,qBAAuB,oCAC/BN,KAAQO,UAAkC,KAC1CP,KAAQQ,YAAuC,KAC/CR,KAAQS,gBAAkB,sBA8I1BT,KAAQU,eAAiB,KAC2B,YAA7CV,KAAKrE,YAAclB,OACtBuF,KAAKtE,KAAOb,EAAmB,UAC/BmF,KAAKW,iBACLX,KAAKY,cACLZ,KAAKa,cACH,IAAIC,YAAY,sBAAuB,CACrCC,SAAS,EACTC,UAAU,MAIlB,CA5IA,iBAAAC,GACEnB,MAAMmB,oBACNjB,KAAKtE,KAAOb,EAAmBmF,KAAKrE,YACpCqE,KAAKY,cACLZ,KAAKkB,qBACc,SAAflB,KAAKC,OACPD,KAAKW,gBAET,CAEA,oBAAAQ,GASE,GARArB,MAAMqB,uBACNnB,KAAKI,OAAOrE,oBAAoB,SAAUiE,KAAKU,gBAE3CV,KAAKQ,aAAeR,KAAKQ,YAAYY,aACvCpB,KAAKQ,YAAYY,WAAWC,YAAYrB,KAAKQ,aAC7CR,KAAKQ,YAAc,MAGF,SAAfR,KAAKC,MAAkB,CACzB,MAAMqB,EAAInG,SAASiE,eAAeY,KAAKK,eACnCiB,KAAKC,SACT,MAAMC,EAAgBrG,SAASiE,eAAeY,KAAKM,sBAC/CkB,KAA6BD,QACnC,CACF,CAEU,YAAAE,GACW,SAAfzB,KAAKC,OAAmC,SAAfD,KAAKC,OAChCD,KAAKW,gBAET,CAES,OAAAe,CAAQC,GACf7B,MAAM4B,QAAQC,IAIZA,EAAkBC,IAAI,cACtBD,EAAkBC,IAAI,SACtBD,EAAkBC,IAAI,eACtBD,EAAkBC,IAAI,WAEtB5B,KAAKY,aAET,CAEmB,UAAAiB,CAAWC,GAC5B,MAAMC,EAAcD,EAAQF,IAAI,cAC1BI,EAAeF,EAAQF,IAAI,SAC3BK,EAAmBH,EAAQF,IAAI,aAErC,IAAIM,GAAc,EAElB,GAAIH,GAAeC,EAAc,CAC/B,MAAMG,EAAWtH,EAAmBmF,KAAKrE,YACrCwG,IAAanC,KAAKtE,OACpBsE,KAAKtE,KAAOyG,EACZD,GAAc,EAElB,CAEA,MAAME,IAAapC,KAAKqC,WAMxB,IALmC,SAAfrC,KAAKC,OAAoBmC,KACzBF,GAAeF,GAAgBC,IACjDjC,KAAKW,iBAGHoB,GAAeG,GAAeD,GAAoBD,EAAc,CAClEhC,KAAKY,cAIL,MAAM0B,EACW,SAAftC,KAAKC,OACLmC,IACCH,GAAoBF,GAAeG,GAAeF,GAEnDhC,KAAKG,YACY,SAAfH,KAAKC,OAAmC,SAAfD,KAAKC,OAAqBqC,IAErDtC,KAAKuC,gBAET,CACF,CAEQ,iBAAAC,GACN,MAAMC,EAAKtH,SAASC,gBACpBqH,EAAGC,gBAAgB,mBAAkC,UAAd1C,KAAKtE,MAC5C+G,EAAGC,gBAAgB,kBAAiC,SAAd1C,KAAKtE,MAC3C+G,EAAGE,aAAa,aAAc3C,KAAKtE,MAClC+G,EAAGG,MAAcC,YAAc7C,KAAKtE,KACrC+G,EAAGK,UAAUC,OAAO,OAAsB,SAAd/C,KAAKtE,KACnC,CAEQ,cAAA6G,GACN,MAAM3G,EAAS,CAAEF,KAAMsE,KAAKtE,KAAMC,WAAYqE,KAAKrE,YACnDZ,OAAO8F,cAAc,IAAIC,YAAY,YAAa,CAAElF,YAEpDb,OAAO8F,cAAc,IAAIC,YAAY,sBAAuB,CAAElF,WAChE,CAEO,aAAAoH,CAAclI,GACnB,KACMkF,KAAKE,SAA2B,SAAfF,KAAKC,OAAmC,SAAfD,KAAKC,OACjDvF,aAAauI,QAAQ,QAASnI,EAElC,CAAA,MAAU,CACVkF,KAAKrE,WAAab,GAEdkF,KAAKG,WAA6B,SAAfH,KAAKC,OAAmC,SAAfD,KAAKC,OACnDD,KAAKa,cACH,IAAIC,YAAY,sBAAuB,CACrCC,SAAS,EACTC,UAAU,IAIlB,CAEO,gBAAAkC,GACL,MAAMC,EAAUnD,KAAKrE,YAAclB,IAC7B2I,EACQ,UAAZD,EAAsB,OAAqB,SAAZA,EAAqB,SAAW,QAEjE,OADAnD,KAAKgD,cAAcI,GACZA,CACT,CAgBQ,kBAAAlC,GACgB,oBAAXnG,QAA2BA,OAAOC,aAC7CgF,KAAKI,MAAQrF,OAAOC,WAAW,gCAC/BgF,KAAKI,MAAMvE,iBAAiB,SAAUmE,KAAKU,gBAC7C,CAGQ,iBAAA2C,GACN,GAAwB,oBAAblI,SAA0B,OACrC,MAAM+D,EAAU,+VAeZP,EAtS+B,yBAuSjCnB,OAEF,IAAI2B,EAAMhE,SAASiE,eACjBY,KAAKK,eAEFlB,EAMHA,EAAIK,YAAcN,GALlBC,EAAMhE,SAASkE,cAAc,SAC7BF,EAAIF,GAAKe,KAAKK,cACdlB,EAAIK,YAAcN,EAClB/D,SAASmE,KAAKC,YAAYJ,GAI9B,CAEQ,yBAAAmE,CAA0BC,GAChC,GAAwB,oBAAbpI,SAAX,CAEA,GADA6E,KAAK0C,gBAAgB,wBAAyBa,IACzCA,EAAS,CACZ,MAAMpE,EAAMhE,SAASiE,eAAeY,KAAKM,sBAEzC,YADInB,KAASoC,SAEf,CACAvC,EACEgB,KAAKM,qBACL3B,EA9TJ,0FAqTuC,CAWvC,CAEQ,cAAAgC,GACN,MAGM9B,EAt1BV,SACE2E,EACAC,GAEA,MAAMpK,EAA8B,CAAA,EAE9BqK,EAAM,CAACpH,EAAW3B,KACb,MAALA,IAAWtB,EAAI,KAAKiD,KAAO3B,IAKjC+I,EAAI,gBAAiBjG,EAAQgG,EAAS,UAAY,YAClDC,EAAI,iBAAkBjG,EAAQgG,EAAS,UAAY,YAInD,MAAME,EAAWH,EAAMzN,WACjB6N,EAAWJ,EAAMxN,gBAAkB,0BAEzC0N,EAAI,WAAYC,GAChBD,EAAI,gBAAiBC,GACrBD,EAAI,gBAAiBE,GAIrBF,EAAI,uBAAwBjG,EAAQ+F,EAAM5N,MAAM6B,aAChDiM,EAAI,mBAAoBjG,EAAQ+F,EAAM5N,MAAM8B,aAE5C,MAAMmM,EAGFJ,EACA,CACEnO,UAAW,GACXC,SAAU,GACVuO,WAAY,GACZC,QAAS,IAEX,CACEzO,UAAW,GACXC,SAAU,GACVuO,WAAY,GACZC,QAAS,IAGfjF,OAAOC,QAAQ8E,GAAWG,QAAQ,EAAEC,EAAOC,MACzCR,EACE,YAAYO,IACZ,+CAA+CC,sCAInD,CAAC,UAAW,YAAa,WAAY,aAAc,WAAWF,QAC3DC,IACCP,EACE,YAAYO,UACZ,sCAAsCA,mCAO5C,MAAM7O,UAAEA,EAAAC,WAAWA,EAAYG,UAAW2O,GAAOX,EAAMrO,MAEjDiP,EAAmBZ,EAAM5N,MAAM8B,WAE/B2M,EAAkBZ,EACpB,CACEhO,QAAS,GACTH,UAAW,GACXC,SAAU,IAEZ,CACEE,QAAS,GACTH,UAAW,GACXC,SAAU,IAGV+O,EACNjP,GAAYI,SACZuI,EACE5I,EACAiP,EAAgB5O,QAChB2O,GAGIG,EACJlP,GAAYC,WACZ0I,EAAS5I,EAAWiP,EAAgB/O,UAAW8O,GAE3CI,EACJnP,GAAYE,UACZyI,EAAS5I,EAAWiP,EAAgB9O,SAAU6O,GAE1CK,EAAwBhB,EAAS,GAAM,IACvCiB,EAAgB,CACpBjP,QAASmH,EAAWuH,EAAG1O,QAASgP,GAChCnP,UAAWsH,EACTuH,EAAG7O,WAAa6O,EAAG1O,QACnBgP,GAEFlP,SAAUqH,EAAWuH,EAAG5O,UAAY4O,EAAG1O,QAASgP,GAGhD/O,MAAOkH,EAAWuH,EAAGzO,MAAO,IAG9BgO,EACE,oBACA/F,EAAa2G,EAAmBI,EAAcjP,UAEhDiO,EACE,sBACA/F,EAAa4G,EAAqBG,EAAcpP,YAElDoO,EACE,qBACA/F,EAAa6G,EAAoBE,EAAcnP,WAGjDmO,EAAI,kBAAmB/F,EAAavI,EAAWsP,EAAchP,QAE7D,MAAMiP,EAAuB/H,EAC3B4G,EAAM9K,cAAcC,IACpB8K,EAAS,IAAO,KAGZmB,EAA0BhI,EAC9B4G,EAAM9K,cAAcE,OACpB6K,EAAS,IAAO,KAGlBC,EACE,oBACA,0CAEI/F,EAAa4G,EAAqBI,cAClChH,EAAa2G,EAAmBM,aAMtC9F,OAAOC,QAAQyE,EAAM7N,QAAQH,WAAWwO,QAAQ,EAAE1H,EAAG3B,MACnD+I,EAAI,eAAepH,IAAKqB,EAAa6F,EAAM7N,QAAQC,MAAO+E,MAK5DmE,OAAOC,QAAQyE,EAAM3N,WAAWC,SAASkO,QAAQ,EAAE1H,EAAG3B,MACpD+I,EAAI,aAAapH,IAAKqB,EAAa6F,EAAM3N,WAAWD,MAAO+E,MAK7DmE,OAAOC,QAAQyE,EAAM/K,QAAQuL,QAAQ,EAAE1H,EAAG3B,MACxC+I,EAAI,cAAcpH,IAAK3B,KAGzBmE,OAAOC,QAAQyE,EAAMvL,QAAQ+L,QAAQ,EAAE1H,EAAG3B,MACxC+I,EAAI,cAAcpH,IAAK3B,KAGzBmE,OAAOC,QAAQyE,EAAMxL,MAAMgM,QAAQ,EAAE1H,EAAG3B,MACtC+I,EAAI,YAAYpH,IAAK,QAAQ3B,QAG/BmE,OAAOC,QAAQyE,EAAMlL,YAAY0L,QAAQ,EAAE1H,EAAG3B,MAC5C+I,EAAI,kBAAkBpH,IAAK,cAAc3B,QAG3CmE,OAAOC,QAAQyE,EAAMjL,YAAYyL,QAAQ,EAAE1H,EAAG3B,MAC5C+I,EAAI,kBAAkBpH,IAAK,YAAY3B,QAGzCmE,OAAOC,QAAQyE,EAAMrL,WAAW6L,QAAQ,EAAE1H,EAAG3B,MAC3C+I,EAAI,kBAAkBpH,IAAK3B,KAG7B+I,EAAI,mBAAoBF,EAAMhL,WAI9BsG,OAAOC,QAAQyE,EAAM3K,QAAQC,UAAY,IAAIkL,QAAQ,EAAE1H,EAAG3B,MACxD+I,EAAI,gBAAgBpH,IAAK3B,KAG3BmE,OAAOC,QAAQyE,EAAM3K,QAAQK,MAAQ,IAAI8K,QAAQ,EAAE1H,EAAG3B,MACpD+I,EAAI,YAAYpH,IAAK3B,KAGvB+I,EACE,yBACA,CACE,2GACA,uGACA,gGACA,qGACA,oGACA,mGACAhF,KAAK,OAGTgF,EACE,sBACA,CACE,yGACA,qGACA,8FACA,mGACA,iGACAhF,KAAK,OAKTI,OAAOC,QAAQyE,EAAMhK,QAAU,CAAA,GAAIwK,QAAQ,EAAE1H,EAAG3B,MAC9C+I,EAAI,SAASpH,IAAKuI,OAAOlK,MAK3BmE,OAAOC,QAAQyE,EAAM1N,SAAW,CAAA,GAAIkO,QAAQ,EAAE1H,EAAG3B,MAC/C+I,EAAI,eAAepH,IAAKuI,OAAOlK,MAKjC,MAAMP,EAAYoJ,EAAMpJ,UACxBsJ,EAAI,sBAAuBtJ,GAAWC,OAAS,eAC/CqJ,EACE,sBACAtJ,GAAWE,QACRmJ,EACG,iEACA,mEAERC,EACE,4BACAtJ,GAAWG,aACRkJ,EACG,gFACA,kFAKRC,EACE,2BACAD,EACI,6BACA,oCAKN,MAAMqB,EAAiB,CACrB,SACA,UACA,UACA,SACA,QAGFA,EAAed,QAASe,IACtB,MAAM3P,EAAYoO,EAAM5N,MAAMmP,GAE9BrB,EAAI,OAAOqB,YAAe3P,GAE1BsO,EACE,OAAOqB,cACP,iCAAiCA,gDAGnCrB,EACE,OAAOqB,aACP,iCAAiCA,gDAGnCrB,EACE,OAAOqB,eACP,iCAAiCA,gDAGnCrB,EACE,OAAOqB,YACP,iCAAiCA,gDAGnCrB,EACE,OAAOqB,iBACP,iCAAiCA,yCAGnCrB,EACE,OAAOqB,mBACP,iCAAiCA,yCAGnCrB,EACE,OAAOqB,kBACP,iCAAiCA,yCAGnCrB,EACE,OAAOqB,oBACP,iCAAiCA,yCAGnCrB,EACE,OAAOqB,iBACP,iCAAiCA,yCAGnCrB,EACE,OAAOqB,OACP,iCAAiCA,gCAGnCrB,EACE,OAAOqB,OACP,iCAAiCA,gCAGnCrB,EACE,OAAOqB,OACP,iCAAiCA,kCAMrCD,EAAed,QAASe,IACtBrB,EACE,OAAOqB,kBACP,iCAAiCA,yCAGnCrB,EACE,OAAOqB,oBACP,iCAAiCA,2CAGnCrB,EACE,OAAOqB,mBACP,iCAAiCA,0CAGnCrB,EACE,OAAOqB,qBACP,iCAAiCA,4CAGnCrB,EACE,OAAOqB,kBACP,iCAAiCA,2CAMrCD,EAAed,QAASe,IACtBrB,EAAI,YAAYqB,MAAS,uBAAuBA,cAChDrB,EAAI,YAAYqB,MAAS,uBAAuBA,cAChDrB,EAAI,YAAYqB,MAAS,uBAAuBA,cAChDrB,EAAI,YAAYqB,MAAS,uBAAuBA,cAChDrB,EAAI,YAAYqB,MAAS,uBAAuBA,cAEhDrB,EACE,YAAYqB,YACZ,6BAA6BA,cAG/BrB,EACE,YAAYqB,YACZ,6BAA6BA,cAG/BrB,EACE,YAAYqB,YACZ,6BAA6BA,gBAOjCrB,EAAI,uBAAwB,6BAC5BA,EACE,iBACA,0GAGFA,EAAI,wBAAyB,OAE7BA,EAAI,iBAAkB,gBACtBA,EAAI,iBAAkB,gBAGtBA,EAAI,8BAA+B,yBACnCA,EAAI,6BAA8B,yBAIlCA,EAAI,wBAAyB,sCAC7BA,EAAI,yBAA0B,sCAC9BA,EAAI,yBAA0B,sCAC9BA,EAAI,wBAAyB,sCAC7BA,EAAI,sBAAuB,sCAI3B5E,OAAOC,QAAQyE,EAAMvN,UAAY,CAAA,GAAI+N,QAAQ,EAAE1H,EAAG3B,MAChD+I,EAAI,iBAAiBpH,IAAK3B,KAG5BmE,OAAOC,QAAQyE,EAAMjN,YAAc,CAAA,GAAIyN,QAAQ,EAAE1H,EAAG3B,MAClD+I,EAAI,mBAAmBpH,IAAK3B,KAG9BmE,OAAOC,QAAQyE,EAAM1M,YAAc,CAAA,GAAIkN,QAAQ,EAAE1H,EAAG3B,MAClD+I,EAAI,mBAAmBpH,IAAK3B,KAG9BmE,OAAOC,QAAQyE,EAAMrM,eAAiB,CAAA,GAAI6M,QAAQ,EAAE1H,EAAG3B,MACrD+I,EAAI,sBAAsBpH,IAAK3B,KAKjC,MAAMqK,EAAc,CAACD,EAAajI,IAC/B0G,EAAMvN,WAAkD8O,IAAQjI,EAE7DmI,EAAgB,CAACF,EAAajI,IACjC0G,EAAM1M,aAAoDiO,IAC3DjI,EAEIoI,EAAkE,CACtE,CAAEH,IAAK,KAAMI,KAAM,KAAMC,KAAM,SAC/B,CAAEL,IAAK,KAAMI,KAAM,KAAMC,KAAM,QAC/B,CAAEL,IAAK,KAAMI,KAAM,KAAMC,KAAM,UAC/B,CAAEL,IAAK,KAAMI,KAAM,KAAMC,KAAM,QAC/B,CAAEL,IAAK,KAAMI,KAAM,KAAMC,KAAM,QAC/B,CAAEL,IAAK,MAAOI,KAAM,MAAOC,KAAM,SACjC,CAAEL,IAAK,MAAOI,KAAM,MAAOC,KAAM,SACjC,CAAEL,IAAK,MAAOI,KAAM,MAAOC,KAAM,UAGnC,IAAA,MAAWL,IAAEA,EAAAI,KAAKA,EAAAC,KAAMA,KAAUF,EAAa,CAC7C,MAAMG,EAAUL,EAAYG,EAAM,QAC5BG,EAAUL,EAAcG,EAAM,OAEpC1B,EAAI,YAAYqB,IAAO,GAAGM,OAAaC,0BACvC5B,EAAI,iBAAiBqB,IAAO,GAAGM,OAAaC,yBAC9C,CAIAxG,OAAOC,QAAQyE,EAAMjM,SAAW,CAAA,GAAIyM,QAAQ,EAAE1H,EAAG3B,MAC/C+I,EAAI,aAAapH,IAAK3B,KAKxB,MAAM4K,EAAU,CACdC,KAAM,CAAEL,KAAM,KAAMM,OAAQ,SAAUL,KAAM,UAC5CM,MAAO,CAAEP,KAAM,KAAMM,OAAQ,SAAUL,KAAM,QAC7CO,QAAS,CAAER,KAAM,KAAMM,OAAQ,SAAUL,KAAM,SAC/CQ,MAAO,CAAET,KAAM,KAAMM,OAAQ,WAAYL,KAAM,QAC/CS,QAAS,CAAEV,KAAM,MAAOM,OAAQ,OAAQL,KAAM,SAC9CU,QAAS,CAAEX,KAAM,MAAOM,OAAQ,OAAQL,KAAM,UAG1CW,EAAgB,CAAChB,EAAajI,IACjC0G,EAAMjN,aAAoDwO,IAC3DjI,EAEF,IAAA,MAAYkJ,EAAMC,KAAQnH,OAAOC,QAAQwG,GAAU,CACjD,MAAMF,EAAUL,EAAYiB,EAAId,KAAM,QAChCe,EAAYH,EAAcE,EAAIR,OAAQ,OACtCH,EAAUL,EAAcgB,EAAIb,KAAM,OAExC1B,EACE,YAAYsC,IACZ,GAAGE,KAAab,KAAWC,yBAE/B,CAEA,OAAOjM,CACT,CA2WiB8M,CAHAzJ,EAAWsD,KAAKrD,WAAa,CAAA,GACnBqD,KAAKtE,MACC,SAAdsE,KAAKtE,MAMpB,GAHAsE,KAAK0C,gBAAgB,mBAAkC,UAAd1C,KAAKtE,MAC9CsE,KAAK0C,gBAAgB,kBAAiC,SAAd1C,KAAKtE,MAE1B,SAAfsE,KAAKC,OAAmC,SAAfD,KAAKC,MAAkB,CAClD,MAAMf,EAAUN,EAAYC,EAAM,SAElC,GACE,uBAAwBuH,SAASC,WACjC,gBAAiBC,cAAcD,UAC/B,CACA,IAAKrG,KAAKO,UAAW,CACnBP,KAAKO,UAAY,IAAI+F,cAErB,MAAMnD,EACHnD,KAAKuG,WAA0BC,oBAAsB,GACvDxG,KAAKuG,WAA0BC,mBAAqB,IAChDrD,EACHnD,KAAKO,UAET,CACAP,KAAKO,UAAUkG,YAAYvH,EAC7B,MACOc,KAAKQ,cACRR,KAAKQ,YAAcrF,SAASkE,cAAc,SAC1CW,KAAKuG,WAAWhH,YAAYS,KAAKQ,cAEnCR,KAAKQ,YAAYhB,YAAcN,EAGjCc,KAAK4C,MAAM8D,eAAe,SAC1B1G,KAAK4C,MAAM8D,eAAe,cAE1B1G,KAAKsD,2BAA0B,EACjC,MACEtD,KAAKsD,2BAA0B,GAGjC,GAAmB,SAAftD,KAAKC,OAAmC,SAAfD,KAAKC,MAAkB,CAClD,MAAMf,EAAUN,EAAYC,EAAM,SAClCG,EAAegB,KAAKS,gBAAiBvB,GAErCc,KAAKwC,oBACLxC,KAAKqD,oBAEDlI,SAASqK,OACXrK,SAASqK,KAAK5C,MAAM8D,eAAe,SACnCvL,SAASqK,KAAK5C,MAAM8D,eAAe,cACnCvL,SAASqK,KAAK5C,MAAM8D,eAAe,gBAGrC1G,KAAKuC,gBACP,CACF,CAEQ,WAAA3B,GACN,MAAM+F,EAAcjK,EAAWsD,KAAKrD,WAAa,CAAA,GAEjDqD,KAAK4G,KAAO,CACVlL,KAAMsE,KAAKtE,KACXC,WAAYqE,KAAKrE,WACjB6H,MAAOmD,EACP3D,cAAgBlI,GAA0BkF,KAAKgD,cAAclI,GAC7DoI,iBAAkB,IAAMlD,KAAKkD,mBAEjC,CAES,MAAA2D,GACP,OAAOC,CAAA,eACT,GAnTWnH,EAyBJoH,OAASC,CAAA;;;;;;;;;;IAvBYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMrI,UAFPa,EAEiB0G,UAAA,YAAA,GAGeY,EAAA,CAA1CC,EAAS,CAAEC,KAAMtC,OAAQuC,SAAS,KALxBzH,EAKgC0G,UAAA,QAAA,GAG3CY,EAAA,CADCC,EAAS,CAAEC,KAAMtC,OAAQuC,SAAS,KAPxBzH,EAQX0G,UAAA,aAAA,GAEiBY,EAAA,CAAhBI,KAVU1H,EAUM0G,UAAA,OAAA,GAGTY,EAAA,CADPK,EAAQ,CAAEC,QAAS9H,KAZTE,EAaH0G,UAAA,OAAA,GAEqBY,EAAA,CAA5BC,EAAS,CAAEC,KAAMK,WAfP7H,EAekB0G,UAAA,UAAA,GACAY,EAAA,CAA5BC,EAAS,CAAEC,KAAMK,WAhBP7H,EAgBkB0G,UAAA,YAAA,GAhBlB1G,EAANsH,EAAA,CADNQ,EAAc,uBACF9H"}
|