@sky.ui/core 0.0.58 → 0.0.60

package/dist/sky-list/sky-list.js.map

@@ -1 +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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"}
+{"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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"}

package/dist/sky-listitem/sky-listitem.js.map

@@ -1 +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"}
+{"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"}

package/dist/sky-simple-table/sky-simple-table.js.map

@@ -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\";\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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"}
+{"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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"}

package/dist/sky-theme-provider/sky-theme-provider.js

@@ -1,4 +1,4 @@
-import{css as e,LitElement as r,html as t}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";import{createContext as i,provide as n}from"@lit/context";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,y=(e,r,t,o)=>{for(var s,a=o>1?void 0:o?l(r,t):r,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(r,t,a):s(a))||a);return o&&a&&c(r,t,a),a};const m={light:{glass:{baseColor:"#FFFFFF",baseShades:{secondary:"#F1F5F9",tertiary:"#E2E8F0"},opacities:{primary:.1,secondary:.12,tertiary:.16,solid:.18}},overlay:{color:"#E8EEF6",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#0F172A",opacity:{primary:.06,secondary:.08,tertiary:.1,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#E8EEF6",foreground:"#0F172A",active:"#2563EB",success:"#17C964",warning:"#F5A524",danger:"#FF383C",info:"#6366F1"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)",secondary:"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)",tertiary:"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)",hover:"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(15, 23, 42, 0.12)",border:{primary:"1px solid rgba(15, 23, 42, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)"},glassSurface:{top:.14,bottom:.03},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)"}},dark:{glass:{baseColor:"#141B2D",baseShades:{secondary:"#1A2235",tertiary:"#222C42"},opacities:{primary:.16,secondary:.18,tertiary:.22,solid:.24}},overlay:{color:"#0B1020",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#E2E8F0",opacity:{primary:.08,secondary:.1,tertiary:.12,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#0B1020",foreground:"#E2E8F0",active:"#2563EB",success:"#17C964",warning:"#F7B750",danger:"#DB3B3E",info:"#818CF8"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)",secondary:"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)",tertiary:"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)",hover:"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(226, 232, 240, 0.1)",border:{primary:"1px solid rgba(226, 232, 240, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)"},glassSurface:{top:.16,bottom:.05},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)"}}};function h(){try{if("undefined"!=typeof localStorage){const e=localStorage.getItem("theme");return"light"===e||"dark"===e||"system"===e?e:"system"}}catch{}return"system"}function d(e){if("undefined"==typeof window)return"light";if("system"===e){try{if(window.matchMedia)return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{}return"light"}return e}function p(){if("undefined"==typeof document)return"light";const e=document.documentElement.getAttribute("data-theme");return"light"===e||"dark"===e?e:"undefined"!=typeof matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function k(e){if("undefined"==typeof window)return()=>{};const r=r=>{const{mode:t,preference:o}=r.detail||{};"light"===t||"dark"===t?e(t,o):e(p(),void 0)};return window.addEventListener("sky-theme",r),queueMicrotask(()=>e(p(),void 0)),()=>window.removeEventListener("sky-theme",r)}function u(e,r){const t=Array.isArray(e)?[...e]:{...e};for(const o in r){const s=r[o];s&&"object"==typeof s&&!Array.isArray(s)?t[o]=u(e[o],s):t[o]=s??e[o]}return t}let b,g;function x(e){return e===b&&g||(g={light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})},b=e),g}function f(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function v(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function $(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function S(e){return $(e),e}function E(e,r){const t=f(r),o=v(100*t);if(t<=0)return"transparent";if(t>=1)return S(e);if($(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function w(e,r,t){return`color-mix(in oklch, ${e} ${v(r)}%, ${t})`}function F(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function z(e){return`\n${e} {\n  scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${F(e,"::-webkit-scrollbar-track")} {\n  background: var(--sky-scrollbar-track);\n}\n${F(e,"::-webkit-scrollbar-thumb")} {\n  background-color: var(--sky-scrollbar-thumb);\n}\n${F(e,"::-webkit-scrollbar-thumb:hover")} {\n  background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function C(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function j(e,r){let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=r,t}const O=i("sky/theme");let B=class extends r{constructor(){super(...arguments),this.scope="root",this.preference=h(),this.mode="light",this.persist=!0,this.broadcast=!0,this.media=null,this.globalStyleId="sky-theme-provider-global-style",this.hostScrollbarStyleId="sky-theme-provider-host-scrollbar",this.hostSheet=null,this.hostStyleEl=null,this.rootVarsStyleId="sky-theme-vars-root",this.onSystemChange=()=>{"system"===(this.preference??h())&&(this.mode=d("system"),this.applyVariables(),this.pushContext(),this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.mode=d(this.preference),this.pushContext(),this.setupSystemWatcher(),"host"===this.scope&&this.applyVariables()}disconnectedCallback(){if(super.disconnectedCallback(),this.media?.removeEventListener("change",this.onSystemChange),this.hostStyleEl&&this.hostStyleEl.parentNode&&(this.hostStyleEl.parentNode.removeChild(this.hostStyleEl),this.hostStyleEl=null),"host"===this.scope){const e=document.getElementById(this.globalStyleId);e&&e.remove();const r=document.getElementById(this.hostScrollbarStyleId);r&&r.remove()}}firstUpdated(){"root"!==this.scope&&"both"!==this.scope||this.applyVariables()}updated(e){super.updated(e),(e.has("userTheme")||e.has("mode")||e.has("preference")||e.has("scope"))&&this.pushContext()}willUpdate(e){const r=e.has("preference"),t=e.has("scope"),o=e.has("userTheme");let s=!1;if(r||t){const e=d(this.preference);e!==this.mode&&(this.mode=e,s=!0)}const a=!!this.hasUpdated;if(("host"===this.scope||a)&&(s||t||o)&&this.applyVariables(),r||s||o||t){this.pushContext();const e="host"===this.scope&&a&&(o||r||s||t);this.broadcast&&("root"===this.scope||"both"===this.scope||e)&&this.broadcastTheme()}}setRootThemeAttrs(){const e=document.documentElement;e.toggleAttribute("data-theme-light","light"===this.mode),e.toggleAttribute("data-theme-dark","dark"===this.mode),e.setAttribute("data-theme",this.mode),e.style.colorScheme=this.mode,e.classList.toggle("dark","dark"===this.mode)}broadcastTheme(){const e={mode:this.mode,preference:this.preference};window.dispatchEvent(new CustomEvent("sky-theme",{detail:e})),window.dispatchEvent(new CustomEvent("theme-change-global",{detail:e}))}setPreference(e){try{!this.persist||"root"!==this.scope&&"both"!==this.scope||localStorage.setItem("theme",e)}catch{}this.preference=e,!this.broadcast||"root"!==this.scope&&"both"!==this.scope||this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0}))}togglePreference(){const e=this.preference??h(),r="light"===e?"dark":"dark"===e?"system":"light";return this.setPreference(r),r}setupSystemWatcher(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("(prefers-color-scheme: dark)"),this.media.addEventListener("change",this.onSystemChange))}ensureGlobalStyle(){if("undefined"==typeof document)return;const e=`\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      ${z("html, body, *")}\n    `.trim();let r=document.getElementById(this.globalStyleId);r?r.textContent=e:(r=document.createElement("style"),r.id=this.globalStyleId,r.textContent=e,document.head.appendChild(r))}applyHostNativeScrollbars(e){if("undefined"!=typeof document){if(this.toggleAttribute("sky-native-scrollbars",e),!e){const e=document.getElementById(this.hostScrollbarStyleId);return void(e&&e.remove())}j(this.hostScrollbarStyleId,z("sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *"))}}applyVariables(){const e=function(e,r){const t={},o=(e,r)=>{null!=r&&(t[`--${e}`]=r)};o("sky-text-dark",S(r?"#FFFFFF":"#0B1020")),o("sky-text-light",S(r?"#030712":"#FFFFFF"));const s=e.fontFamily,a=e.fontFamilyMono??"ui-monospace, monospace";o("sky-font",s),o("sky-font-sans",s),o("sky-font-mono",a),o("sky-background-color",S(e.color.background)),o("sky-text-primary",S(e.color.foreground));const i=r?{secondary:82,tertiary:66,quaternary:50,quinary:36}:{secondary:76,tertiary:60,quaternary:44,quinary:30};Object.entries(i).forEach(([e,r])=>{o(`sky-text-${e}`,`color-mix(in oklch, var(--sky-text-primary) ${r}%, var(--sky-background-color))`)}),["primary","secondary","tertiary","quaternary","quinary"].forEach(e=>{o(`sky-text-${e}-hover`,`color-mix(in oklch, var(--sky-text-${e}) 86%, var(--sky-text-dark))`)});const{baseColor:n,baseShades:c,opacities:l}=e.glass,y=e.color.foreground,m=r?{primary:96,secondary:88,tertiary:78}:{primary:96,secondary:90,tertiary:82},h=c?.primary??w(n,m.primary,y),d=c?.secondary??w(n,m.secondary,y),p=c?.tertiary??w(n,m.tertiary,y),k=r?.4:.34,u={primary:f(l.primary,k),secondary:f(l.secondary??l.primary,k),tertiary:f(l.tertiary??l.primary,k),solid:f(l.solid,1)};o("sky-glass-primary",E(h,u.primary)),o("sky-glass-secondary",E(d,u.secondary)),o("sky-glass-tertiary",E(p,u.tertiary)),o("sky-glass-solid",E(n,u.solid));const b=f(e.glassSurface?.top,r?.26:.24),g=f(e.glassSurface?.bottom,r?.08:.06);o("sky-glass-surface",`linear-gradient(\n      180deg,\n      ${E(d,b)},\n      ${E(h,g)}\n    )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,E(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,E(e.glassHover.color,t))}),Object.entries(e.border).forEach(([e,r])=>{o(`sky-border-${e}`,r)}),Object.entries(e.radius).forEach(([e,r])=>{o(`sky-radius-${e}`,r)}),Object.entries(e.blur).forEach(([e,r])=>{o(`sky-blur-${e}`,`blur(${r})`)}),Object.entries(e.brightness).forEach(([e,r])=>{o(`sky-brightness-${e}`,`brightness(${r})`)}),Object.entries(e.saturation).forEach(([e,r])=>{o(`sky-saturation-${e}`,`saturate(${r})`)}),Object.entries(e.boxshadow).forEach(([e,r])=>{o(`sky-box-shadow-${e}`,r)}),o("sky-border-light",e.separator),Object.entries(e.motion?.duration??{}).forEach(([e,r])=>{o(`sky-duration-${e}`,r)}),Object.entries(e.motion?.ease??{}).forEach(([e,r])=>{o(`sky-ease-${e}`,r)}),o("sky-transition-default",["background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),o("sky-transition-fast",["background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),Object.entries(e.zIndex??{}).forEach(([e,r])=>{o(`sky-z-${e}`,String(r))}),Object.entries(e.opacity??{}).forEach(([e,r])=>{o(`sky-opacity-${e}`,String(r))});const x=e.scrollbar;o("sky-scrollbar-track",x?.track??"transparent"),o("sky-scrollbar-thumb",x?.thumb??(r?"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)":"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)")),o("sky-scrollbar-thumb-hover",x?.thumbHover??(r?"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))":"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))")),o("sky-text-shadow-on-glass",r?"0 1px 2px rgba(0,0,0,0.45)":"0 1px 1px rgba(255,255,255,0.55)");const v=["active","success","warning","danger","info"];v.forEach(r=>{const t=e.color[r];o(`sky-${r}-primary`,t),o(`sky-${r}-secondary`,`color-mix(in oklch, var(--sky-${r}-primary) 82%, var(--sky-background-color))`),o(`sky-${r}-tertiary`,`color-mix(in oklch, var(--sky-${r}-primary) 62%, var(--sky-background-color))`),o(`sky-${r}-quaternary`,`color-mix(in oklch, var(--sky-${r}-primary) 42%, var(--sky-background-color))`),o(`sky-${r}-quinary`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, var(--sky-background-color))`),o(`sky-${r}-primary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 88%, var(--sky-text-dark))`),o(`sky-${r}-secondary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 72%, var(--sky-text-dark))`),o(`sky-${r}-tertiary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 56%, var(--sky-text-dark))`),o(`sky-${r}-quaternary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 40%, var(--sky-text-dark))`),o(`sky-${r}-quinary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 28%, var(--sky-text-dark))`),o(`sky-${r}-g0`,`color-mix(in oklch, var(--sky-${r}-primary) 12%, transparent)`),o(`sky-${r}-g1`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, transparent)`),o(`sky-${r}-g2`,`color-mix(in oklch, var(--sky-${r}-primary) 48%, transparent)`)}),v.forEach(e=>{o(`sky-${e}-primary-hover`,`color-mix(in oklch, var(--sky-${e}-primary) 86%, var(--sky-text-dark))`),o(`sky-${e}-secondary-hover`,`color-mix(in oklch, var(--sky-${e}-secondary) 86%, var(--sky-text-dark))`),o(`sky-${e}-tertiary-hover`,`color-mix(in oklch, var(--sky-${e}-tertiary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quaternary-hover`,`color-mix(in oklch, var(--sky-${e}-quaternary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quinary-hover`,`color-mix(in oklch, var(--sky-${e}-quinary) 86%, var(--sky-text-dark))`)}),v.forEach(e=>{o(`sky-ring-${e}-1`,`0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-2`,`0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-3`,`0 0 0 3px var(--sky-${e}-primary)`),o(`sky-ring-${e}-4`,`0 0 0 4px var(--sky-${e}-primary)`),o(`sky-ring-${e}-5`,`0 0 0 5px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-1`,`inset 0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-2`,`inset 0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-3`,`inset 0 0 0 3px var(--sky-${e}-primary)`)}),o("sky-focus-ring-color","var(--sky-active-primary)"),o("sky-focus-ring","0 0 0 3px color-mix(in oklch, var(--sky-focus-ring-color, var(--sky-active-primary)) 42%, transparent)"),o("sky-focus-ring-offset","2px"),o("sky-text-white","oklch(1 0 0)"),o("sky-text-black","oklch(0 0 0)"),o("sky-on-color-fallback-light","var(--sky-text-white)"),o("sky-on-color-fallback-dark","var(--sky-text-black)"),o("sky-on-active-primary","var(--sky-on-color-fallback-light)"),o("sky-on-success-primary","var(--sky-on-color-fallback-light)"),o("sky-on-warning-primary","var(--sky-on-color-fallback-light)"),o("sky-on-danger-primary","var(--sky-on-color-fallback-light)"),o("sky-on-info-primary","var(--sky-on-color-fallback-light)"),Object.entries(e.fontSize??{}).forEach(([e,r])=>{o(`sky-font-size-${e}`,r)}),Object.entries(e.fontWeight??{}).forEach(([e,r])=>{o(`sky-font-weight-${e}`,r)}),Object.entries(e.lineHeight??{}).forEach(([e,r])=>{o(`sky-line-height-${e}`,r)}),Object.entries(e.letterSpacing??{}).forEach(([e,r])=>{o(`sky-letter-spacing-${e}`,r)});const $=(r,t)=>e.fontSize?.[r]??t,F=(r,t)=>e.lineHeight?.[r]??t,z=[{key:"xs",size:"xs",line:"tight"},{key:"sm",size:"sm",line:"snug"},{key:"md",size:"md",line:"normal"},{key:"lg",size:"lg",line:"snug"},{key:"xl",size:"xl",line:"snug"},{key:"2xl",size:"2xl",line:"tight"},{key:"3xl",size:"3xl",line:"tight"},{key:"4xl",size:"4xl",line:"tight"}];for(const{key:e,size:r,line:t}of z){const s=$(r,"1rem"),a=F(t,"1.5");o(`sky-font-${e}`,`${s} / ${a} var(--sky-font-sans)`),o(`sky-font-mono-${e}`,`${s} / ${a} var(--sky-font-mono)`)}Object.entries(e.spacing??{}).forEach(([e,r])=>{o(`sky-space-${e}`,r)});const C={body:{size:"md",weight:"normal",line:"normal"},label:{size:"sm",weight:"medium",line:"snug"},caption:{size:"xs",weight:"normal",line:"tight"},title:{size:"lg",weight:"semibold",line:"snug"},heading:{size:"2xl",weight:"bold",line:"tight"},display:{size:"4xl",weight:"bold",line:"tight"}},j=(r,t)=>e.fontWeight?.[r]??t;for(const[e,r]of Object.entries(C)){const t=$(r.size,"1rem"),s=j(r.weight,"400"),a=F(r.line,"1.5");o(`sky-text-${e}`,`${s} ${t}/${a} var(--sky-font-sans)`)}return t}(x(this.userTheme||{})[this.mode],"dark"===this.mode);if(this.toggleAttribute("data-theme-light","light"===this.mode),this.toggleAttribute("data-theme-dark","dark"===this.mode),"host"===this.scope||"both"===this.scope){const r=C(e,":host");if("adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype){if(!this.hostSheet){this.hostSheet=new CSSStyleSheet;const e=this.renderRoot.adoptedStyleSheets??[];this.renderRoot.adoptedStyleSheets=[...e,this.hostSheet]}this.hostSheet.replaceSync(r)}else this.hostStyleEl||(this.hostStyleEl=document.createElement("style"),this.renderRoot.appendChild(this.hostStyleEl)),this.hostStyleEl.textContent=r;this.style.removeProperty("color"),this.style.removeProperty("background"),this.applyHostNativeScrollbars(!0)}else this.applyHostNativeScrollbars(!1);if("root"===this.scope||"both"===this.scope){const r=C(e,":root");j(this.rootVarsStyleId,r),this.setRootThemeAttrs(),this.ensureGlobalStyle(),document.body&&(document.body.style.removeProperty("color"),document.body.style.removeProperty("background"),document.body.style.removeProperty("font-family")),this.broadcastTheme()}}pushContext(){const e=x(this.userTheme??{});this._ctx={mode:this.mode,preference:this.preference,theme:e,setPreference:e=>this.setPreference(e),togglePreference:()=>this.togglePreference()}}render(){return t`<slot></slot>`}};B.styles=e`
+import{css as e,LitElement as r,html as t}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";import{createContext as i,provide as n}from"@lit/context";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,y=(e,r,t,o)=>{for(var s,a=o>1?void 0:o?l(r,t):r,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(r,t,a):s(a))||a);return o&&a&&c(r,t,a),a};const m={light:{glass:{baseColor:"#FFFFFF",baseShades:{secondary:"#F1F5F9",tertiary:"#E2E8F0"},opacities:{primary:.1,secondary:.12,tertiary:.16,solid:.18}},overlay:{color:"#E8EEF6",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#0F172A",opacity:{primary:.06,secondary:.08,tertiary:.1,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#E8EEF6",foreground:"#0F172A",active:"#2563EB",success:"#17C964",warning:"#F5A524",danger:"#FF383C",info:"#6366F1"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)",secondary:"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)",tertiary:"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)",hover:"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(15, 23, 42, 0.12)",border:{primary:"1px solid rgba(15, 23, 42, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)"},glassSurface:{top:.11,bottom:.08},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)"}},dark:{glass:{baseColor:"#141B2D",baseShades:{secondary:"#1A2235",tertiary:"#222C42"},opacities:{primary:.16,secondary:.18,tertiary:.22,solid:.24}},overlay:{color:"#0B1020",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#E2E8F0",opacity:{primary:.08,secondary:.1,tertiary:.12,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#0B1020",foreground:"#E2E8F0",active:"#2563EB",success:"#17C964",warning:"#F7B750",danger:"#DB3B3E",info:"#818CF8"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)",secondary:"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)",tertiary:"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)",hover:"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(226, 232, 240, 0.1)",border:{primary:"1px solid rgba(226, 232, 240, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)"},glassSurface:{top:.16,bottom:.14},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)"}}};function h(){try{if("undefined"!=typeof localStorage){const e=localStorage.getItem("theme");return"light"===e||"dark"===e||"system"===e?e:"system"}}catch{}return"system"}function d(e){if("undefined"==typeof window)return"light";if("system"===e){try{if(window.matchMedia)return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{}return"light"}return e}function p(){if("undefined"==typeof document)return"light";const e=document.documentElement.getAttribute("data-theme");return"light"===e||"dark"===e?e:"undefined"!=typeof matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function k(e){if("undefined"==typeof window)return()=>{};const r=r=>{const{mode:t,preference:o}=r.detail||{};"light"===t||"dark"===t?e(t,o):e(p(),void 0)};return window.addEventListener("sky-theme",r),queueMicrotask(()=>e(p(),void 0)),()=>window.removeEventListener("sky-theme",r)}function u(e,r){const t=Array.isArray(e)?[...e]:{...e};for(const o in r){const s=r[o];s&&"object"==typeof s&&!Array.isArray(s)?t[o]=u(e[o],s):t[o]=s??e[o]}return t}let b,g;function x(e){return e===b&&g||(g={light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})},b=e),g}function f(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function v(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function $(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function S(e){return $(e),e}function E(e,r){const t=f(r),o=v(100*t);if(t<=0)return"transparent";if(t>=1)return S(e);if($(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function w(e,r,t){return`color-mix(in oklch, ${e} ${v(r)}%, ${t})`}function F(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function z(e){return`\n${e} {\n  scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${F(e,"::-webkit-scrollbar-track")} {\n  background: var(--sky-scrollbar-track);\n}\n${F(e,"::-webkit-scrollbar-thumb")} {\n  background-color: var(--sky-scrollbar-thumb);\n}\n${F(e,"::-webkit-scrollbar-thumb:hover")} {\n  background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function C(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function j(e,r){let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=r,t}const O=i("sky/theme");let B=class extends r{constructor(){super(...arguments),this.scope="root",this.preference=h(),this.mode="light",this.persist=!0,this.broadcast=!0,this.media=null,this.globalStyleId="sky-theme-provider-global-style",this.hostScrollbarStyleId="sky-theme-provider-host-scrollbar",this.hostSheet=null,this.hostStyleEl=null,this.rootVarsStyleId="sky-theme-vars-root",this.onSystemChange=()=>{"system"===(this.preference??h())&&(this.mode=d("system"),this.applyVariables(),this.pushContext(),this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.mode=d(this.preference),this.pushContext(),this.setupSystemWatcher(),"host"===this.scope&&this.applyVariables()}disconnectedCallback(){if(super.disconnectedCallback(),this.media?.removeEventListener("change",this.onSystemChange),this.hostStyleEl&&this.hostStyleEl.parentNode&&(this.hostStyleEl.parentNode.removeChild(this.hostStyleEl),this.hostStyleEl=null),"host"===this.scope){const e=document.getElementById(this.globalStyleId);e&&e.remove();const r=document.getElementById(this.hostScrollbarStyleId);r&&r.remove()}}firstUpdated(){"root"!==this.scope&&"both"!==this.scope||this.applyVariables()}updated(e){super.updated(e),(e.has("userTheme")||e.has("mode")||e.has("preference")||e.has("scope"))&&this.pushContext()}willUpdate(e){const r=e.has("preference"),t=e.has("scope"),o=e.has("userTheme");let s=!1;if(r||t){const e=d(this.preference);e!==this.mode&&(this.mode=e,s=!0)}const a=!!this.hasUpdated;if(("host"===this.scope||a)&&(s||t||o)&&this.applyVariables(),r||s||o||t){this.pushContext();const e="host"===this.scope&&a&&(o||r||s||t);this.broadcast&&("root"===this.scope||"both"===this.scope||e)&&this.broadcastTheme()}}setRootThemeAttrs(){const e=document.documentElement;e.toggleAttribute("data-theme-light","light"===this.mode),e.toggleAttribute("data-theme-dark","dark"===this.mode),e.setAttribute("data-theme",this.mode),e.style.colorScheme=this.mode,e.classList.toggle("dark","dark"===this.mode)}broadcastTheme(){const e={mode:this.mode,preference:this.preference};window.dispatchEvent(new CustomEvent("sky-theme",{detail:e})),window.dispatchEvent(new CustomEvent("theme-change-global",{detail:e}))}setPreference(e){try{!this.persist||"root"!==this.scope&&"both"!==this.scope||localStorage.setItem("theme",e)}catch{}this.preference=e,!this.broadcast||"root"!==this.scope&&"both"!==this.scope||this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0}))}togglePreference(){const e=this.preference??h(),r="light"===e?"dark":"dark"===e?"system":"light";return this.setPreference(r),r}setupSystemWatcher(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("(prefers-color-scheme: dark)"),this.media.addEventListener("change",this.onSystemChange))}ensureGlobalStyle(){if("undefined"==typeof document)return;const e=`\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      ${z("html, body, *")}\n    `.trim();let r=document.getElementById(this.globalStyleId);r?r.textContent=e:(r=document.createElement("style"),r.id=this.globalStyleId,r.textContent=e,document.head.appendChild(r))}applyHostNativeScrollbars(e){if("undefined"!=typeof document){if(this.toggleAttribute("sky-native-scrollbars",e),!e){const e=document.getElementById(this.hostScrollbarStyleId);return void(e&&e.remove())}j(this.hostScrollbarStyleId,z("sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *"))}}applyVariables(){const e=function(e,r){const t={},o=(e,r)=>{null!=r&&(t[`--${e}`]=r)};o("sky-text-dark",S(r?"#FFFFFF":"#0B1020")),o("sky-text-light",S(r?"#030712":"#FFFFFF"));const s=e.fontFamily,a=e.fontFamilyMono??"ui-monospace, monospace";o("sky-font",s),o("sky-font-sans",s),o("sky-font-mono",a),o("sky-background-color",S(e.color.background)),o("sky-text-primary",S(e.color.foreground));const i=r?{secondary:82,tertiary:66,quaternary:50,quinary:36}:{secondary:76,tertiary:60,quaternary:44,quinary:30};Object.entries(i).forEach(([e,r])=>{o(`sky-text-${e}`,`color-mix(in oklch, var(--sky-text-primary) ${r}%, var(--sky-background-color))`)}),["primary","secondary","tertiary","quaternary","quinary"].forEach(e=>{o(`sky-text-${e}-hover`,`color-mix(in oklch, var(--sky-text-${e}) 86%, var(--sky-text-dark))`)});const{baseColor:n,baseShades:c,opacities:l}=e.glass,y=e.color.foreground,m=r?{primary:96,secondary:88,tertiary:78}:{primary:96,secondary:90,tertiary:82},h=c?.primary??w(n,m.primary,y),d=c?.secondary??w(n,m.secondary,y),p=c?.tertiary??w(n,m.tertiary,y),k=r?.4:.34,u={primary:f(l.primary,k),secondary:f(l.secondary??l.primary,k),tertiary:f(l.tertiary??l.primary,k),solid:f(l.solid,1)};o("sky-glass-primary",E(h,u.primary)),o("sky-glass-secondary",E(d,u.secondary)),o("sky-glass-tertiary",E(p,u.tertiary)),o("sky-glass-solid",E(n,u.solid));const b=f(e.glassSurface?.top,r?.16:.11),g=f(e.glassSurface?.bottom,r?.14:.08);o("sky-glass-surface",`linear-gradient(\n      180deg,\n      ${E(r?h:d,b)},\n      ${E(h,g)}\n    )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,E(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,E(e.glassHover.color,t))}),Object.entries(e.border).forEach(([e,r])=>{o(`sky-border-${e}`,r)}),Object.entries(e.radius).forEach(([e,r])=>{o(`sky-radius-${e}`,r)}),Object.entries(e.blur).forEach(([e,r])=>{o(`sky-blur-${e}`,`blur(${r})`)}),Object.entries(e.brightness).forEach(([e,r])=>{o(`sky-brightness-${e}`,`brightness(${r})`)}),Object.entries(e.saturation).forEach(([e,r])=>{o(`sky-saturation-${e}`,`saturate(${r})`)}),Object.entries(e.boxshadow).forEach(([e,r])=>{o(`sky-box-shadow-${e}`,r)}),o("sky-border-light",e.separator),Object.entries(e.motion?.duration??{}).forEach(([e,r])=>{o(`sky-duration-${e}`,r)}),Object.entries(e.motion?.ease??{}).forEach(([e,r])=>{o(`sky-ease-${e}`,r)}),o("sky-transition-default",["background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),o("sky-transition-fast",["background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),Object.entries(e.zIndex??{}).forEach(([e,r])=>{o(`sky-z-${e}`,String(r))}),Object.entries(e.opacity??{}).forEach(([e,r])=>{o(`sky-opacity-${e}`,String(r))});const x=e.scrollbar;o("sky-scrollbar-track",x?.track??"transparent"),o("sky-scrollbar-thumb",x?.thumb??(r?"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)":"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)")),o("sky-scrollbar-thumb-hover",x?.thumbHover??(r?"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))":"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))")),o("sky-text-shadow-on-glass",r?"0 1px 2px rgba(0,0,0,0.45)":"0 1px 1px rgba(255,255,255,0.55)");const v=["active","success","warning","danger","info"];v.forEach(r=>{const t=e.color[r];o(`sky-${r}-primary`,t),o(`sky-${r}-secondary`,`color-mix(in oklch, var(--sky-${r}-primary) 82%, var(--sky-background-color))`),o(`sky-${r}-tertiary`,`color-mix(in oklch, var(--sky-${r}-primary) 62%, var(--sky-background-color))`),o(`sky-${r}-quaternary`,`color-mix(in oklch, var(--sky-${r}-primary) 42%, var(--sky-background-color))`),o(`sky-${r}-quinary`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, var(--sky-background-color))`),o(`sky-${r}-primary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 88%, var(--sky-text-dark))`),o(`sky-${r}-secondary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 72%, var(--sky-text-dark))`),o(`sky-${r}-tertiary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 56%, var(--sky-text-dark))`),o(`sky-${r}-quaternary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 40%, var(--sky-text-dark))`),o(`sky-${r}-quinary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 28%, var(--sky-text-dark))`),o(`sky-${r}-g0`,`color-mix(in oklch, var(--sky-${r}-primary) 12%, transparent)`),o(`sky-${r}-g1`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, transparent)`),o(`sky-${r}-g2`,`color-mix(in oklch, var(--sky-${r}-primary) 48%, transparent)`)}),v.forEach(e=>{o(`sky-${e}-primary-hover`,`color-mix(in oklch, var(--sky-${e}-primary) 86%, var(--sky-text-dark))`),o(`sky-${e}-secondary-hover`,`color-mix(in oklch, var(--sky-${e}-secondary) 86%, var(--sky-text-dark))`),o(`sky-${e}-tertiary-hover`,`color-mix(in oklch, var(--sky-${e}-tertiary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quaternary-hover`,`color-mix(in oklch, var(--sky-${e}-quaternary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quinary-hover`,`color-mix(in oklch, var(--sky-${e}-quinary) 86%, var(--sky-text-dark))`)}),v.forEach(e=>{o(`sky-ring-${e}-1`,`0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-2`,`0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-3`,`0 0 0 3px var(--sky-${e}-primary)`),o(`sky-ring-${e}-4`,`0 0 0 4px var(--sky-${e}-primary)`),o(`sky-ring-${e}-5`,`0 0 0 5px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-1`,`inset 0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-2`,`inset 0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-3`,`inset 0 0 0 3px var(--sky-${e}-primary)`)}),o("sky-focus-ring-color","var(--sky-active-primary)"),o("sky-focus-ring","0 0 0 3px color-mix(in oklch, var(--sky-focus-ring-color, var(--sky-active-primary)) 42%, transparent)"),o("sky-focus-ring-offset","2px"),o("sky-text-white","oklch(1 0 0)"),o("sky-text-black","oklch(0 0 0)"),o("sky-on-color-fallback-light","var(--sky-text-white)"),o("sky-on-color-fallback-dark","var(--sky-text-black)"),o("sky-on-active-primary","var(--sky-on-color-fallback-light)"),o("sky-on-success-primary","var(--sky-on-color-fallback-light)"),o("sky-on-warning-primary","var(--sky-on-color-fallback-light)"),o("sky-on-danger-primary","var(--sky-on-color-fallback-light)"),o("sky-on-info-primary","var(--sky-on-color-fallback-light)"),Object.entries(e.fontSize??{}).forEach(([e,r])=>{o(`sky-font-size-${e}`,r)}),Object.entries(e.fontWeight??{}).forEach(([e,r])=>{o(`sky-font-weight-${e}`,r)}),Object.entries(e.lineHeight??{}).forEach(([e,r])=>{o(`sky-line-height-${e}`,r)}),Object.entries(e.letterSpacing??{}).forEach(([e,r])=>{o(`sky-letter-spacing-${e}`,r)});const $=(r,t)=>e.fontSize?.[r]??t,F=(r,t)=>e.lineHeight?.[r]??t,z=[{key:"xs",size:"xs",line:"tight"},{key:"sm",size:"sm",line:"snug"},{key:"md",size:"md",line:"normal"},{key:"lg",size:"lg",line:"snug"},{key:"xl",size:"xl",line:"snug"},{key:"2xl",size:"2xl",line:"tight"},{key:"3xl",size:"3xl",line:"tight"},{key:"4xl",size:"4xl",line:"tight"}];for(const{key:e,size:r,line:t}of z){const s=$(r,"1rem"),a=F(t,"1.5");o(`sky-font-${e}`,`${s} / ${a} var(--sky-font-sans)`),o(`sky-font-mono-${e}`,`${s} / ${a} var(--sky-font-mono)`)}Object.entries(e.spacing??{}).forEach(([e,r])=>{o(`sky-space-${e}`,r)});const C={body:{size:"md",weight:"normal",line:"normal"},label:{size:"sm",weight:"medium",line:"snug"},caption:{size:"xs",weight:"normal",line:"tight"},title:{size:"lg",weight:"semibold",line:"snug"},heading:{size:"2xl",weight:"bold",line:"tight"},display:{size:"4xl",weight:"bold",line:"tight"}},j=(r,t)=>e.fontWeight?.[r]??t;for(const[e,r]of Object.entries(C)){const t=$(r.size,"1rem"),s=j(r.weight,"400"),a=F(r.line,"1.5");o(`sky-text-${e}`,`${s} ${t}/${a} var(--sky-font-sans)`)}return t}(x(this.userTheme||{})[this.mode],"dark"===this.mode);if(this.toggleAttribute("data-theme-light","light"===this.mode),this.toggleAttribute("data-theme-dark","dark"===this.mode),"host"===this.scope||"both"===this.scope){const r=C(e,":host");if("adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype){if(!this.hostSheet){this.hostSheet=new CSSStyleSheet;const e=this.renderRoot.adoptedStyleSheets??[];this.renderRoot.adoptedStyleSheets=[...e,this.hostSheet]}this.hostSheet.replaceSync(r)}else this.hostStyleEl||(this.hostStyleEl=document.createElement("style"),this.renderRoot.appendChild(this.hostStyleEl)),this.hostStyleEl.textContent=r;this.style.removeProperty("color"),this.style.removeProperty("background"),this.applyHostNativeScrollbars(!0)}else this.applyHostNativeScrollbars(!1);if("root"===this.scope||"both"===this.scope){const r=C(e,":root");j(this.rootVarsStyleId,r),this.setRootThemeAttrs(),this.ensureGlobalStyle(),document.body&&(document.body.style.removeProperty("color"),document.body.style.removeProperty("background"),document.body.style.removeProperty("font-family")),this.broadcastTheme()}}pushContext(){const e=x(this.userTheme??{});this._ctx={mode:this.mode,preference:this.preference,theme:e,setPreference:e=>this.setPreference(e),togglePreference:()=>this.togglePreference()}}render(){return t`<slot></slot>`}};B.styles=e`
     :host {
       display: contents;
     }