@sky.ui/core 0.0.53 → 0.0.55

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\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[] = [];\r\n\r\n  /** Bound selection as item `value` strings (requires `value` on items). Coerces null to `[]`. */\r\n  @property({ type: Array })\r\n  get selectedValues(): string[] {\r\n    return this._selectedValues;\r\n  }\r\n  set selectedValues(value: string[] | null | undefined) {\r\n    const old = this._selectedValues;\r\n    this._selectedValues = Array.isArray(value) ? value : [];\r\n    this.requestUpdate(\"selectedValues\", old);\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","currentIndex","_syncingSelectedValues","_onItemActivate","e","onItemActivate","_onSlotChange","_applySelectedValuesFromProp","_focusFirstNavigable","selectedValues","value","old","Array","isArray","requestUpdate","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","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.d.ts

@@ -12,6 +12,7 @@ export type SkyListitemActivateDetail = {
  *
  * @documentation https://sky-ui.com/components/list
  *
+ * @slot - Fallback label text when `content` is not used.
  * @slot content - Main content of the list item (usually label or text).
  * @slot actions - Trailing action elements (e.g., icons, buttons).
  * @property {string} avatar - Optional avatar image URL.

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

@@ -1,4 +1,4 @@
-import{css as e,LitElement as t,html as s,nothing as r}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{when as o}from"lit/directives/when.js";import{PresetController as n}from"../helper/controllers/preset-controller.js";var l=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?d(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&l(t,s,i),i};let c=class extends t{constructor(){super(...arguments),this.avatar="",this.value="",this.subheader="",this.selected=!1,this.dense=!1,this.disabled=!1,this.preset="",this._presets=new n(this)}onClick(){this.disabled||this.subheader||this.dispatchEvent(new CustomEvent("item-activate",{detail:{item:this},bubbles:!0,composed:!0}))}setSelected(e){this.selected=e,this.requestUpdate()}render(){return this.subheader?s`
+import{css as e,LitElement as t,html as s,nothing as r}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{when as o}from"lit/directives/when.js";import{PresetController as n}from"../helper/controllers/preset-controller.js";var l=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?d(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&l(t,s,i),i};let c=class extends t{constructor(){super(...arguments),this.avatar="",this.value="",this.subheader="",this.selected=!1,this.dense=!1,this.disabled=!1,this.preset="",this._presets=new n(this)}onClick(){this.disabled||this.subheader||this.dispatchEvent(new CustomEvent("item-activate",{detail:{item:this},bubbles:!0,composed:!0}))}setSelected(e){this.selected!==e&&(this.selected=e)}render(){return this.subheader?s`
         <div class="subheader" part="subheader" role="presentation">${this.subheader}</div>
       `:s`
       <div
@@ -21,7 +21,9 @@ import{css as e,LitElement as t,html as s,nothing as r}from"lit";import{property
             </div>
           `)}
 
-        <div class="content" part="content"><slot name="content"></slot></div>
+        <div class="content" part="content">
+          <slot name="content"><slot></slot></slot>
+        </div>
 
         <div class="actions" part="actions">
           <slot name="actions">${r}</slot>

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 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    this.selected = selected;\r\n    this.requestUpdate();\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\"><slot name=\"content\"></slot></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","requestUpdate","render","html","when","nothing","styles","css","__decorateClass","property","type","String","prototype","reflect","Boolean","customElement"],"mappings":"6bAoEO,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,GACVJ,KAAKI,SAAWA,EAChBJ,KAAKkB,eACP,CAES,MAAAC,GACP,OAAInB,KAAKG,UACAiB,CAAA;sEACyDpB,KAAKG;QAIhEiB,CAAA;;;;;wBAKapB,KAAKI,SAAW,OAAS;wBACzBJ,KAAKM,SAAW,OAAS;;iBAEhCN,KAAKU;;UAEZW,EACArB,KAAKC,OACL,IAAMmB,CAAA;;;;sBAIMpB,KAAKC;;;;;;;;;;iCAWMqB;;;KAI/B,GAhLW3B,EAeK4B,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAdGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPjC,EACiBkC,UAAA,SAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAHPjC,EAGiBkC,UAAA,QAAA,GACeJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAJxBnC,EAIgCkC,UAAA,YAAA,GACCJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KALzBnC,EAKiCkC,UAAA,WAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KANzBnC,EAMiCkC,UAAA,QAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KAPzBnC,EAOiCkC,UAAA,WAAA,GAIDJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAXxBnC,EAWgCkC,UAAA,SAAA,GAXhClC,EAAN8B,EAAA,CADNO,EAAc,iBACFrC"}
+{"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-radio/sky-radio.js

@@ -1,4 +1,4 @@
-import{unsafeCSS as e,css as t,LitElement as r,html as o}from"lit";import{property as s,state as i,customElement as a}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as c}from"../helper/utils/contrast-color.js";import{FormControlBase as h}from"../helper/internals/form-control-base.js";import{PresetController as p}from"../helper/controllers/preset-controller.js";import{skyFocusRingHostStyles as y}from"../helper/styles/focus-ring.js";var u=Object.defineProperty,k=Object.getOwnPropertyDescriptor,b=(e,t,r,o)=>{for(var s,i=o>1?void 0:o?k(t,r):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(o?s(t,r,i):s(i))||i);return o&&i&&u(t,r,i),i};let m=class extends h{constructor(){super(),this.label="",this.value="",this.checked=!1,this.color="primary",this.compact=!1,this._hasMeaningfulSlot=!1,this.preset="",this._presets=new p(this),this._onSlotChange=e=>{const t=e.target,r=this._slotHasMeaningfulContent(t);r!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=r)},this.onNativeChange=e=>{const t=e.currentTarget;if(this.disabled||this.readonly)return void(t.checked!==this.checked&&(t.checked=this.checked));const r=t.checked&&!this.checked;if(this.checked=t.checked,this.checked&&this.name&&!this.closest("sky-radio-group")){const e=Array.from(document.querySelectorAll("sky-radio"));for(const t of e)t!==this&&t.name===this.name&&(t.checked=!1)}r&&(this.dispatchEvent(new CustomEvent("radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",e),this.reemitNativeEvent("input",e),this.syncFormValue(),this.syncValidity())},this.handleKeydown=e=>{if(!(this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key)){e.preventDefault();const t=this.shadowRoot?.querySelector("input[type='radio']");t?.click()}},this.captureDefaultValue("")}syncStyleVars(){this.style.setProperty("--radio-checked-color",d(this.color))}update(e){(0===e.size||e.has("color")||e.has("preset"))&&this.syncStyleVars(),super.update(e)}check(){this.disabled||this.readonly||(this.checked=!0,this.syncFormValue())}focusRadio(){const e=this.shadowRoot?.querySelector('input[type="radio"]');e?.focus()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}updated(e){const t=this.shadowRoot?.querySelector("input[type='radio']");e.has("checked")&&(t&&t.checked!==this.checked&&(t.checked=this.checked),void 0!==e.get("checked")&&(this.syncFormValue(),this.syncValidity())),(e.has("disabled")||e.has("readonly"))&&(t&&(t.disabled=this.disabled,t.readOnly=this.readonly),this.tabIndex=this.disabled?-1:0),e.has("value")&&(this.syncFormValue(),this.syncValidity())}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}getFormValue(){return this.checked?this.value:null}setValueFromFormState(e){this.checked="string"==typeof e&&e===this.value}getValidityAnchor(){return this.getNativeControl()||void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector("input[type='radio']")||null}onNativeValueMutated(e){const t=this.getNativeControl();t&&(this.checked=t.checked)}getCustomErrorMessage(){return this.validationErrors?.[0]||""}get validationErrors(){return this.required&&!this.checked?[this.requiredMessage]:[]}render(){return o`
+import{unsafeCSS as e,css as t,LitElement as r,html as o}from"lit";import{property as s,state as i,customElement as a}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as c}from"../helper/utils/contrast-color.js";import{FormControlBase as h}from"../helper/internals/form-control-base.js";import{PresetController as p}from"../helper/controllers/preset-controller.js";import{skyFocusRingHostStyles as y}from"../helper/styles/focus-ring.js";var u=Object.defineProperty,k=Object.getOwnPropertyDescriptor,b=(e,t,r,o)=>{for(var s,i=o>1?void 0:o?k(t,r):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(o?s(t,r,i):s(i))||i);return o&&i&&u(t,r,i),i};let m=class extends h{constructor(){super(),this.label="",this.value="",this.checked=!1,this.color="primary",this.compact=!1,this._hasMeaningfulSlot=!1,this.preset="",this._presets=new p(this),this._onSlotChange=e=>{const t=e.target,r=this._slotHasMeaningfulContent(t);r!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=r)},this.onNativeChange=e=>{const t=e.currentTarget;if(this.disabled||this.readonly)return void(t.checked!==this.checked&&(t.checked=this.checked));const r=t.checked&&!this.checked;if(this.checked=t.checked,this.checked&&this.name&&!this.closest("sky-radio-group")){const e=this.form??this.getRootNode(),t=Array.from(e.querySelectorAll("sky-radio"));for(const e of t)e!==this&&e.name===this.name&&(e.checked=!1)}r&&(this.dispatchEvent(new CustomEvent("radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",e),this.reemitNativeEvent("input",e),this.syncFormValue(),this.syncValidity())},this.handleKeydown=e=>{if(!(this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key)){e.preventDefault();const t=this.shadowRoot?.querySelector("input[type='radio']");t?.click()}},this.captureDefaultValue("")}syncStyleVars(){this.style.setProperty("--radio-checked-color",d(this.color))}update(e){(0===e.size||e.has("color")||e.has("preset"))&&this.syncStyleVars(),super.update(e)}check(){this.disabled||this.readonly||(this.checked=!0,this.syncFormValue())}focusRadio(){const e=this.shadowRoot?.querySelector('input[type="radio"]');e?.focus()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}updated(e){const t=this.shadowRoot?.querySelector("input[type='radio']");e.has("checked")&&(t&&t.checked!==this.checked&&(t.checked=this.checked),void 0!==e.get("checked")&&(this.syncFormValue(),this.syncValidity())),(e.has("disabled")||e.has("readonly"))&&(t&&(t.disabled=this.disabled,t.readOnly=this.readonly),this.tabIndex=this.disabled?-1:0),e.has("value")&&(this.syncFormValue(),this.syncValidity())}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}getFormValue(){return this.checked?this.value:null}setValueFromFormState(e){this.checked="string"==typeof e&&e===this.value}getValidityAnchor(){return this.getNativeControl()||void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector("input[type='radio']")||null}onNativeValueMutated(e){const t=this.getNativeControl();t&&(this.checked=t.checked)}getCustomErrorMessage(){return this.validationErrors?.[0]||""}get validationErrors(){return this.required&&!this.checked?[this.requiredMessage]:[]}render(){return o`
       <label
         part="label"
         ?disabled=${this.disabled}

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

@@ -1 +1 @@
-{"version":3,"file":"sky-radio.js","sources":["../../src/sky-radio/sky-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\r\n\r\nexport type SkyRadioSelectDetail = { value: string };\r\nexport type SkyRadioValidationErrorDetail = { errors: string[] };\r\nexport type SkyRadioValueClearedDetail = { value: \"\" };\r\n\r\n/**\r\n * @element sky-radio\r\n *\r\n * @summary Single radio option for grouped or standalone selection.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/radio\r\n *\r\n * @slot - Content to display instead of the label property.\r\n *\r\n * @csspart wrapper - The circular radio control element.\r\n * @csspart input - The native hidden radio input element.\r\n * @csspart label - The text label element.\r\n *\r\n * @property {string} label - Text label displayed beside the control.\r\n * @property {string} value - Option value used for selection and form value.\r\n * @property {boolean} checked - Whether this option is selected.\r\n * @property {string} name - Radio name used for same-name exclusivity.\r\n * @property {string} color - Accent color used in checked state.\r\n * @property {boolean} disabled - Disables user interaction.\r\n * @property {boolean} readonly - Prevents selection changes while still allowing focus.\r\n * @property {boolean} required - Enables required validation for standalone usage.\r\n * @property {string} requiredMessage - Error message for required validation failures.\r\n * @property {boolean} compact - Compact control size.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n *\r\n * @fires {CustomEvent<SkyRadioSelectDetail>} radio-select - Fired when the option becomes selected.\r\n * @fires {Event} change - Native change event for form compatibility.\r\n * @fires {Event} input - Native input event for form compatibility.\r\n * @fires {CustomEvent<SkyRadioValidationErrorDetail>} validation-error - Fired when validation errors occur.\r\n * @fires {CustomEvent<SkyRadioValueClearedDetail>} value-cleared - Fired when selection is reset.\r\n * @method check Selects this radio option.\r\n * @method focusRadio Focuses the underlying native radio control.\r\n *\r\n * @Behavior\r\n * - Uses a native hidden radio input for semantics and keyboard interaction.\r\n * - Supports grouped usage inside `sky-radio-group` and standalone usage.\r\n * - Synchronizes checked state and form value through `FormControlBase`.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *   <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *   <sky-radio value=\"green\">Green Environment</sky-radio>\r\n * </sky-radio-group>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *     <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *     <sky-radio value=\"green\">Green Environment</sky-radio>\r\n *   </sky-radio-group>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *       <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *       <sky-radio value=\"green\">Green Environment</sky-radio>\r\n *     </sky-radio-group>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-radio\")\r\nexport class SkyRadio extends FormControlBase {\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: String }) value: string = \"\";\r\n  @property({ type: Boolean, reflect: true }) checked: boolean = false;\r\n  @property({ type: String }) color: string = \"primary\";\r\n  @property({ type: Boolean, reflect: true }) compact = false;\r\n  @state() private _hasMeaningfulSlot = false;\r\n\r\n  private syncStyleVars(): void {\r\n    this.style.setProperty(\"--radio-checked-color\", resolveColor(this.color));\r\n  }\r\n\r\n  /** After PresetController hostUpdate — paint with current color. */\r\n  protected override update(changed: Map<string, unknown>): void {\r\n    if (changed.size === 0 || changed.has(\"color\") || changed.has(\"preset\")) {\r\n      this.syncStyleVars();\r\n    }\r\n    super.update(changed);\r\n  }\r\n\r\n  public check(): void {\r\n    if (this.disabled || this.readonly) return;\r\n    this.checked = true;\r\n    this.syncFormValue();\r\n  }\r\n\r\n  public focusRadio(): void {\r\n    const input = this.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement | null;\r\n    input?.focus();\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 override styles = [\r\n    skyFocusRingHostStyles,\r\n    css`\r\n    :host {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      --sky-radio-size: 18px;\r\n      --sky-radio-dot: 10px;\r\n      --sky-focus-ring-color: var(--radio-checked-color, var(--sky-active-primary));\r\n    }\r\n\r\n    :host([compact]) {\r\n      --sky-radio-size: 14px;\r\n      --sky-radio-dot: 8px;\r\n    }\r\n\r\n    :host([compact]) label {\r\n      font-size: var(--sky-font-size-xs);\r\n      gap: var(--sky-space-1, 4px);\r\n    }\r\n\r\n    /* readonly: allow focus + keyboard traversal, but show subtle visual state */\r\n    :host([readonly]) label {\r\n      cursor: default;\r\n    }\r\n\r\n    label {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n      color: var(--sky-text-primary);\r\n      cursor: pointer;\r\n      font-size: var(--sky-font-size-sm);\r\n      font-family: var(--sky-font);\r\n    }\r\n\r\n    label[disabled] {\r\n      pointer-events: none;\r\n      opacity: 0.6;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    :host([disabled]) label,\r\n    :host([disabled]) .radio-wrapper {\r\n      pointer-events: none;\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n\r\n    .radio-wrapper {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      width: var(--sky-radio-size);\r\n      height: var(--sky-radio-size);\r\n      display: inline-block;\r\n      background: var(--sky-glass-solid);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: 2px solid var(--sky-text-tertiary);\r\n      border-radius: 50%;\r\n      transition:\r\n        border-color var(--sky-transition-normal, 200ms ease),\r\n        background-color var(--sky-transition-normal, 200ms ease),\r\n        box-shadow var(--sky-transition-normal, 200ms ease);\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .radio-wrapper::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%) scale(0);\r\n      width: var(--sky-radio-dot);\r\n      height: var(--sky-radio-dot);\r\n      background-color: var(--sky-glass-solid);\r\n      border-radius: 50%;\r\n      transition:\r\n        transform var(--sky-transition-normal, 200ms ease),\r\n        background-color var(--sky-transition-normal, 200ms ease);\r\n    }\r\n\r\n    .radio-wrapper.checked {\r\n      border-color: var(--radio-checked-color);\r\n      background-color: var(--radio-checked-color);\r\n    }\r\n\r\n    .radio-wrapper.checked::before {\r\n      transform: translate(-50%, -50%) scale(1);\r\n      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));\r\n    }\r\n\r\n    input[type=\"radio\"] {\r\n      position: absolute;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      width: 0;\r\n      height: 0;\r\n    }\r\n\r\n    :host(:focus-within) .radio-wrapper {\r\n      box-shadow: var(--sky-focus-ring);\r\n      border-color: var(--radio-checked-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .radio-wrapper,\r\n      .radio-wrapper::before {\r\n        transition: none;\r\n      }\r\n    }\r\n\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".radio-wrapper.checked::before\",\r\n          fillVar: \"--radio-checked-color\",\r\n          property: \"background-color\",\r\n        },\r\n      ]),\r\n    )}\r\n  `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n    this.captureDefaultValue(\"\");\r\n  }\r\n  static override shadowRootOptions = {\r\n    ...LitElement.shadowRootOptions,\r\n    delegatesFocus: true,\r\n  };\r\n\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"keydown\", this.handleKeydown);\r\n    if (!this.hasAttribute(\"tabindex\")) {\r\n      this.tabIndex = this.disabled ? -1 : 0;\r\n    }\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    this.removeEventListener(\"keydown\", this.handleKeydown);\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  override updated(changed: Map<string, unknown>): void {\r\n    const input = this.shadowRoot?.querySelector<HTMLInputElement>(\r\n      \"input[type='radio']\",\r\n    );\r\n\r\n    if (changed.has(\"checked\")) {\r\n      if (input && input.checked !== this.checked) input.checked = this.checked;\r\n\r\n      if (changed.get(\"checked\") !== undefined) {\r\n        this.syncFormValue();\r\n        this.syncValidity();\r\n      }\r\n    }\r\n    if (changed.has(\"disabled\") || changed.has(\"readonly\")) {\r\n      if (input) {\r\n        input.disabled = this.disabled;\r\n        input.readOnly = this.readonly;\r\n      }\r\n      this.tabIndex = this.disabled ? -1 : 0;\r\n    }\r\n\r\n    if (changed.has(\"value\")) {\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  private _onSlotChange = (e: Event) => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const next = this._slotHasMeaningfulContent(slot);\r\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\r\n  };\r\n\r\n  private onNativeChange = (e: Event) => {\r\n    const input = e.currentTarget as HTMLInputElement;\r\n\r\n    // Ignore native toggles when disabled or readonly; re-sync checked state.\r\n    if (this.disabled || this.readonly) {\r\n      if (input.checked !== this.checked) {\r\n        input.checked = this.checked;\r\n      }\r\n      return;\r\n    }\r\n\r\n    const becameChecked = input.checked && !this.checked;\r\n    this.checked = input.checked;\r\n\r\n    // When used individually, uncheck siblings with the same name\r\n    if (this.checked && this.name && !this.closest(\"sky-radio-group\")) {\r\n      const all = Array.from(document.querySelectorAll<SkyRadio>(\"sky-radio\"));\r\n      for (const r of all) {\r\n        if (r !== this && r.name === this.name) r.checked = false;\r\n      }\r\n    }\r\n\r\n    if (becameChecked) {\r\n      this.dispatchEvent(\r\n        new CustomEvent<SkyRadioSelectDetail>(\"radio-select\", {\r\n          detail: { value: this.value },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n\r\n      this.reemitNativeEvent(\"change\", e);\r\n      this.reemitNativeEvent(\"input\", e);\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  };\r\n\r\n  private handleKeydown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.readonly) return;\r\n\r\n    if (event.key === \" \" || event.key === \"Enter\") {\r\n      event.preventDefault();\r\n      const input = this.shadowRoot?.querySelector<HTMLInputElement>(\r\n        \"input[type='radio']\"\r\n      );\r\n      input?.click();\r\n    }\r\n  };\r\n\r\n  /** Get the current value for form submission */\r\n  protected override getFormValue(): FormState {\r\n    return this.checked ? this.value : null;\r\n  }\r\n\r\n  /** Set value from form state (e.g., form reset) */\r\n  protected override setValueFromFormState(state: FormState): void {\r\n    if (typeof state === \"string\") {\r\n      this.checked = state === this.value;\r\n    } else {\r\n      this.checked = false;\r\n    }\r\n  }\r\n\r\n  /** Get the validity anchor (the hidden input) */\r\n  protected override getValidityAnchor(): HTMLElement | undefined {\r\n    return this.getNativeControl() || undefined;\r\n  }\r\n\r\n  /** Check if empty (for required validation) */\r\n  protected override isEmpty(): boolean {\r\n    return !this.checked;\r\n  }\r\n\r\n  /** Get the native control (hidden radio input) */\r\n  protected override getNativeControl(): HTMLElement | null {\r\n    return this.shadowRoot?.querySelector<HTMLElement>(\"input[type='radio']\") || null;\r\n  }\r\n\r\n  /** Handle native value mutation */\r\n  protected override onNativeValueMutated(_native: any): void {\r\n    const input = this.getNativeControl() as HTMLInputElement;\r\n    if (input) {\r\n      this.checked = input.checked;\r\n    }\r\n  }\r\n\r\n  /** Override to provide custom error messages */\r\n  protected override getCustomErrorMessage(): string {\r\n    return this.validationErrors?.[0] || \"\";\r\n  }\r\n\r\n  /** Get current validation errors */\r\n  get validationErrors(): string[] {\r\n    return this.required && !this.checked ? [this.requiredMessage] : [];\r\n  }\r\n\r\n  override render() {\r\n    return html`\r\n      <label\r\n        part=\"label\"\r\n        ?disabled=${this.disabled}\r\n        ?readonly=${this.readonly}\r\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\r\n        aria-readonly=${this.readonly ? \"true\" : \"false\"}\r\n      >\r\n        <input\r\n          type=\"radio\"\r\n          part=\"input\"\r\n          .name=${this.name}\r\n          .value=${this.value}\r\n          .checked=${this.checked}\r\n          @change=${this.onNativeChange}\r\n          ?disabled=${this.disabled}\r\n          ?required=${this.required}\r\n        />\r\n        <div\r\n          class=${classMap({ \"radio-wrapper\": true, checked: this.checked })}\r\n          part=\"wrapper\"\r\n        ></div>\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasMeaningfulSlot, () => this.label)}\r\n      </label>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyRadio","FormControlBase","constructor","super","this","label","value","checked","color","compact","_hasMeaningfulSlot","preset","_presets","PresetController","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","onNativeChange","input","currentTarget","disabled","readonly","becameChecked","name","closest","all","Array","from","document","querySelectorAll","r","dispatchEvent","CustomEvent","detail","bubbles","composed","reemitNativeEvent","syncFormValue","syncValidity","handleKeydown","event","key","preventDefault","shadowRoot","querySelector","click","captureDefaultValue","syncStyleVars","style","setProperty","resolveColor","update","changed","size","has","check","focusRadio","focus","connectedCallback","addEventListener","hasAttribute","tabIndex","disconnectedCallback","removeEventListener","updated","get","readOnly","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","trim","length","getFormValue","setValueFromFormState","state","getValidityAnchor","getNativeControl","isEmpty","onNativeValueMutated","_native","getCustomErrorMessage","validationErrors","required","requiredMessage","render","html","classMap","when","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","property","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-radio.js","sources":["../../src/sky-radio/sky-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\r\n\r\nexport type SkyRadioSelectDetail = { value: string };\r\nexport type SkyRadioValidationErrorDetail = { errors: string[] };\r\nexport type SkyRadioValueClearedDetail = { value: \"\" };\r\n\r\n/**\r\n * @element sky-radio\r\n *\r\n * @summary Single radio option for grouped or standalone selection.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/radio\r\n *\r\n * @slot - Content to display instead of the label property.\r\n *\r\n * @csspart wrapper - The circular radio control element.\r\n * @csspart input - The native hidden radio input element.\r\n * @csspart label - The text label element.\r\n *\r\n * @property {string} label - Text label displayed beside the control.\r\n * @property {string} value - Option value used for selection and form value.\r\n * @property {boolean} checked - Whether this option is selected.\r\n * @property {string} name - Radio name used for same-name exclusivity.\r\n * @property {string} color - Accent color used in checked state.\r\n * @property {boolean} disabled - Disables user interaction.\r\n * @property {boolean} readonly - Prevents selection changes while still allowing focus.\r\n * @property {boolean} required - Enables required validation for standalone usage.\r\n * @property {string} requiredMessage - Error message for required validation failures.\r\n * @property {boolean} compact - Compact control size.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n *\r\n * @fires {CustomEvent<SkyRadioSelectDetail>} radio-select - Fired when the option becomes selected.\r\n * @fires {Event} change - Native change event for form compatibility.\r\n * @fires {Event} input - Native input event for form compatibility.\r\n * @fires {CustomEvent<SkyRadioValidationErrorDetail>} validation-error - Fired when validation errors occur.\r\n * @fires {CustomEvent<SkyRadioValueClearedDetail>} value-cleared - Fired when selection is reset.\r\n * @method check Selects this radio option.\r\n * @method focusRadio Focuses the underlying native radio control.\r\n *\r\n * @Behavior\r\n * - Uses a native hidden radio input for semantics and keyboard interaction.\r\n * - Supports grouped usage inside `sky-radio-group` and standalone usage.\r\n * - Synchronizes checked state and form value through `FormControlBase`.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *   <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *   <sky-radio value=\"green\">Green Environment</sky-radio>\r\n * </sky-radio-group>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *     <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *     <sky-radio value=\"green\">Green Environment</sky-radio>\r\n *   </sky-radio-group>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *       <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *       <sky-radio value=\"green\">Green Environment</sky-radio>\r\n *     </sky-radio-group>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-radio\")\r\nexport class SkyRadio extends FormControlBase {\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: String }) value: string = \"\";\r\n  @property({ type: Boolean, reflect: true }) checked: boolean = false;\r\n  @property({ type: String }) color: string = \"primary\";\r\n  @property({ type: Boolean, reflect: true }) compact = false;\r\n  @state() private _hasMeaningfulSlot = false;\r\n\r\n  private syncStyleVars(): void {\r\n    this.style.setProperty(\"--radio-checked-color\", resolveColor(this.color));\r\n  }\r\n\r\n  /** After PresetController hostUpdate — paint with current color. */\r\n  protected override update(changed: Map<string, unknown>): void {\r\n    if (changed.size === 0 || changed.has(\"color\") || changed.has(\"preset\")) {\r\n      this.syncStyleVars();\r\n    }\r\n    super.update(changed);\r\n  }\r\n\r\n  public check(): void {\r\n    if (this.disabled || this.readonly) return;\r\n    this.checked = true;\r\n    this.syncFormValue();\r\n  }\r\n\r\n  public focusRadio(): void {\r\n    const input = this.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement | null;\r\n    input?.focus();\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 override styles = [\r\n    skyFocusRingHostStyles,\r\n    css`\r\n    :host {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      --sky-radio-size: 18px;\r\n      --sky-radio-dot: 10px;\r\n      --sky-focus-ring-color: var(--radio-checked-color, var(--sky-active-primary));\r\n    }\r\n\r\n    :host([compact]) {\r\n      --sky-radio-size: 14px;\r\n      --sky-radio-dot: 8px;\r\n    }\r\n\r\n    :host([compact]) label {\r\n      font-size: var(--sky-font-size-xs);\r\n      gap: var(--sky-space-1, 4px);\r\n    }\r\n\r\n    /* readonly: allow focus + keyboard traversal, but show subtle visual state */\r\n    :host([readonly]) label {\r\n      cursor: default;\r\n    }\r\n\r\n    label {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n      color: var(--sky-text-primary);\r\n      cursor: pointer;\r\n      font-size: var(--sky-font-size-sm);\r\n      font-family: var(--sky-font);\r\n    }\r\n\r\n    label[disabled] {\r\n      pointer-events: none;\r\n      opacity: 0.6;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    :host([disabled]) label,\r\n    :host([disabled]) .radio-wrapper {\r\n      pointer-events: none;\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n\r\n    .radio-wrapper {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      width: var(--sky-radio-size);\r\n      height: var(--sky-radio-size);\r\n      display: inline-block;\r\n      background: var(--sky-glass-solid);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: 2px solid var(--sky-text-tertiary);\r\n      border-radius: 50%;\r\n      transition:\r\n        border-color var(--sky-transition-normal, 200ms ease),\r\n        background-color var(--sky-transition-normal, 200ms ease),\r\n        box-shadow var(--sky-transition-normal, 200ms ease);\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .radio-wrapper::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%) scale(0);\r\n      width: var(--sky-radio-dot);\r\n      height: var(--sky-radio-dot);\r\n      background-color: var(--sky-glass-solid);\r\n      border-radius: 50%;\r\n      transition:\r\n        transform var(--sky-transition-normal, 200ms ease),\r\n        background-color var(--sky-transition-normal, 200ms ease);\r\n    }\r\n\r\n    .radio-wrapper.checked {\r\n      border-color: var(--radio-checked-color);\r\n      background-color: var(--radio-checked-color);\r\n    }\r\n\r\n    .radio-wrapper.checked::before {\r\n      transform: translate(-50%, -50%) scale(1);\r\n      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));\r\n    }\r\n\r\n    input[type=\"radio\"] {\r\n      position: absolute;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      width: 0;\r\n      height: 0;\r\n    }\r\n\r\n    :host(:focus-within) .radio-wrapper {\r\n      box-shadow: var(--sky-focus-ring);\r\n      border-color: var(--radio-checked-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .radio-wrapper,\r\n      .radio-wrapper::before {\r\n        transition: none;\r\n      }\r\n    }\r\n\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".radio-wrapper.checked::before\",\r\n          fillVar: \"--radio-checked-color\",\r\n          property: \"background-color\",\r\n        },\r\n      ]),\r\n    )}\r\n  `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n    this.captureDefaultValue(\"\");\r\n  }\r\n  static override shadowRootOptions = {\r\n    ...LitElement.shadowRootOptions,\r\n    delegatesFocus: true,\r\n  };\r\n\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"keydown\", this.handleKeydown);\r\n    if (!this.hasAttribute(\"tabindex\")) {\r\n      this.tabIndex = this.disabled ? -1 : 0;\r\n    }\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    this.removeEventListener(\"keydown\", this.handleKeydown);\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  override updated(changed: Map<string, unknown>): void {\r\n    const input = this.shadowRoot?.querySelector<HTMLInputElement>(\r\n      \"input[type='radio']\",\r\n    );\r\n\r\n    if (changed.has(\"checked\")) {\r\n      if (input && input.checked !== this.checked) input.checked = this.checked;\r\n\r\n      if (changed.get(\"checked\") !== undefined) {\r\n        this.syncFormValue();\r\n        this.syncValidity();\r\n      }\r\n    }\r\n    if (changed.has(\"disabled\") || changed.has(\"readonly\")) {\r\n      if (input) {\r\n        input.disabled = this.disabled;\r\n        input.readOnly = this.readonly;\r\n      }\r\n      this.tabIndex = this.disabled ? -1 : 0;\r\n    }\r\n\r\n    if (changed.has(\"value\")) {\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  private _onSlotChange = (e: Event) => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const next = this._slotHasMeaningfulContent(slot);\r\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\r\n  };\r\n\r\n  private onNativeChange = (e: Event) => {\r\n    const input = e.currentTarget as HTMLInputElement;\r\n\r\n    // Ignore native toggles when disabled or readonly; re-sync checked state.\r\n    if (this.disabled || this.readonly) {\r\n      if (input.checked !== this.checked) {\r\n        input.checked = this.checked;\r\n      }\r\n      return;\r\n    }\r\n\r\n    const becameChecked = input.checked && !this.checked;\r\n    this.checked = input.checked;\r\n\r\n    // When used individually, uncheck siblings with the same name\r\n    if (this.checked && this.name && !this.closest(\"sky-radio-group\")) {\r\n      const scope: ParentNode = this.form ?? (this.getRootNode() as Document | ShadowRoot);\r\n      const all = Array.from(scope.querySelectorAll<SkyRadio>(\"sky-radio\"));\r\n      for (const r of all) {\r\n        if (r !== this && r.name === this.name) r.checked = false;\r\n      }\r\n    }\r\n\r\n    if (becameChecked) {\r\n      this.dispatchEvent(\r\n        new CustomEvent<SkyRadioSelectDetail>(\"radio-select\", {\r\n          detail: { value: this.value },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n\r\n      this.reemitNativeEvent(\"change\", e);\r\n      this.reemitNativeEvent(\"input\", e);\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  };\r\n\r\n  private handleKeydown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.readonly) return;\r\n\r\n    if (event.key === \" \" || event.key === \"Enter\") {\r\n      event.preventDefault();\r\n      const input = this.shadowRoot?.querySelector<HTMLInputElement>(\r\n        \"input[type='radio']\"\r\n      );\r\n      input?.click();\r\n    }\r\n  };\r\n\r\n  /** Get the current value for form submission */\r\n  protected override getFormValue(): FormState {\r\n    return this.checked ? this.value : null;\r\n  }\r\n\r\n  /** Set value from form state (e.g., form reset) */\r\n  protected override setValueFromFormState(state: FormState): void {\r\n    if (typeof state === \"string\") {\r\n      this.checked = state === this.value;\r\n    } else {\r\n      this.checked = false;\r\n    }\r\n  }\r\n\r\n  /** Get the validity anchor (the hidden input) */\r\n  protected override getValidityAnchor(): HTMLElement | undefined {\r\n    return this.getNativeControl() || undefined;\r\n  }\r\n\r\n  /** Check if empty (for required validation) */\r\n  protected override isEmpty(): boolean {\r\n    return !this.checked;\r\n  }\r\n\r\n  /** Get the native control (hidden radio input) */\r\n  protected override getNativeControl(): HTMLElement | null {\r\n    return this.shadowRoot?.querySelector<HTMLElement>(\"input[type='radio']\") || null;\r\n  }\r\n\r\n  /** Handle native value mutation */\r\n  protected override onNativeValueMutated(_native: any): void {\r\n    const input = this.getNativeControl() as HTMLInputElement;\r\n    if (input) {\r\n      this.checked = input.checked;\r\n    }\r\n  }\r\n\r\n  /** Override to provide custom error messages */\r\n  protected override getCustomErrorMessage(): string {\r\n    return this.validationErrors?.[0] || \"\";\r\n  }\r\n\r\n  /** Get current validation errors */\r\n  get validationErrors(): string[] {\r\n    return this.required && !this.checked ? [this.requiredMessage] : [];\r\n  }\r\n\r\n  override render() {\r\n    return html`\r\n      <label\r\n        part=\"label\"\r\n        ?disabled=${this.disabled}\r\n        ?readonly=${this.readonly}\r\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\r\n        aria-readonly=${this.readonly ? \"true\" : \"false\"}\r\n      >\r\n        <input\r\n          type=\"radio\"\r\n          part=\"input\"\r\n          .name=${this.name}\r\n          .value=${this.value}\r\n          .checked=${this.checked}\r\n          @change=${this.onNativeChange}\r\n          ?disabled=${this.disabled}\r\n          ?required=${this.required}\r\n        />\r\n        <div\r\n          class=${classMap({ \"radio-wrapper\": true, checked: this.checked })}\r\n          part=\"wrapper\"\r\n        ></div>\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasMeaningfulSlot, () => this.label)}\r\n      </label>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyRadio","FormControlBase","constructor","super","this","label","value","checked","color","compact","_hasMeaningfulSlot","preset","_presets","PresetController","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","onNativeChange","input","currentTarget","disabled","readonly","becameChecked","name","closest","scope","form","getRootNode","all","Array","from","querySelectorAll","r","dispatchEvent","CustomEvent","detail","bubbles","composed","reemitNativeEvent","syncFormValue","syncValidity","handleKeydown","event","key","preventDefault","shadowRoot","querySelector","click","captureDefaultValue","syncStyleVars","style","setProperty","resolveColor","update","changed","size","has","check","focusRadio","focus","connectedCallback","addEventListener","hasAttribute","tabIndex","disconnectedCallback","removeEventListener","updated","get","readOnly","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","trim","length","getFormValue","setValueFromFormState","state","getValidityAnchor","getNativeControl","isEmpty","onNativeValueMutated","_native","getCustomErrorMessage","validationErrors","required","requiredMessage","render","html","classMap","when","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","property","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-simple-table/sky-simple-table.d.ts

@@ -49,8 +49,12 @@ export type SkySimpleTableColumn = {
  * ```
  */
 export declare class SkySimpleTable extends LitElement {
-    data: SkySimpleTableRow[];
-    columns: SkySimpleTableColumn[];
+    private _data;
+    get data(): SkySimpleTableRow[];
+    set data(value: SkySimpleTableRow[] | null | undefined);
+    private _columns;
+    get columns(): SkySimpleTableColumn[];
+    set columns(value: SkySimpleTableColumn[] | null | undefined);
     emptyText: string;
     get column(): SkySimpleTableColumn[];
     set column(value: SkySimpleTableColumn[] | null | undefined);
@@ -61,6 +65,7 @@ export declare class SkySimpleTable extends LitElement {
     private get _safeData();
     private get _resolvedColumns();
     private _toTitle;
+    private _cellStyleCache;
     private _formatCell;
     private _cellStyle;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1,9 +1,9 @@
-import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{repeat as l}from"lit/directives/repeat.js";import{styleMap as i}from"lit/directives/style-map.js";import{PresetController as p}from"../helper/controllers/preset-controller.js";var n=Object.defineProperty,y=Object.getOwnPropertyDescriptor,d=(t,r,e,a)=>{for(var s,o=a>1?void 0:a?y(r,e):r,l=t.length-1;l>=0;l--)(s=t[l])&&(o=(a?s(r,e,o):s(o))||o);return a&&o&&n(r,e,o),o};let c=class extends r{constructor(){super(...arguments),this.data=[],this.columns=[],this.emptyText="No data available",this.preset="",this._presets=new p(this)}get column(){return this.columns}set column(t){const r=this.columns;this.columns=Array.isArray(t)?t:[],this.requestUpdate("column",r)}get _safeData(){return Array.isArray(this.data)?this.data:[]}get _resolvedColumns(){if(Array.isArray(this.columns)&&this.columns.length>0)return this.columns.filter(t=>Boolean(t?.key));const t=this._safeData[0];return t?Object.keys(t).map(t=>({key:t,label:this._toTitle(t)})):[]}_toTitle(t){return t.replace(/[_-]+/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/\b\w/g,t=>t.toUpperCase())}_formatCell(t){return null==t?"":t instanceof Date?t.toLocaleDateString():String(t)}_cellStyle(t){return{textAlign:t.align,width:t.width}}render(){const t=this._safeData,r=this._resolvedColumns;return t.length&&r.length?e`
+import{css as t,LitElement as e,html as r,nothing as a}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{repeat as l}from"lit/directives/repeat.js";import{styleMap as i}from"lit/directives/style-map.js";import{PresetController as n}from"../helper/controllers/preset-controller.js";import{arrayPropHasChanged as p,EMPTY_ARRAY as d,coerceArray as y}from"../helper/utils/stable-array.js";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,m=(t,e,r,a)=>{for(var s,o=a>1?void 0:a?h(e,r):e,l=t.length-1;l>=0;l--)(s=t[l])&&(o=(a?s(e,r,o):s(o))||o);return a&&o&&c(e,r,o),o};let u=class extends e{constructor(){super(...arguments),this._data=d,this._columns=d,this.emptyText="No data available",this.preset="",this._presets=new n(this),this._cellStyleCache=new WeakMap}get data(){return this._data}set data(t){this._data=y(t)}get columns(){return this._columns}set columns(t){this._columns=y(t)}get column(){return this.columns}set column(t){this.columns=y(t)}get _safeData(){return Array.isArray(this.data)?this.data:[]}get _resolvedColumns(){if(Array.isArray(this.columns)&&this.columns.length>0)return this.columns.filter(t=>Boolean(t?.key));const t=this._safeData[0];return t?Object.keys(t).map(t=>({key:t,label:this._toTitle(t)})):[]}_toTitle(t){return t.replace(/[_-]+/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/\b\w/g,t=>t.toUpperCase())}_formatCell(t){return null==t?"":t instanceof Date?t.toLocaleDateString():String(t)}_cellStyle(t){const e=this._cellStyleCache.get(t);if(e&&e.textAlign===t.align&&e.width===t.width)return e;const r={textAlign:t.align,width:t.width};return this._cellStyleCache.set(t,r),r}render(){const t=this._safeData,e=this._resolvedColumns;return t.length&&e.length?r`
       <div class="wrapper" part="wrapper">
         <table part="table">
           <thead>
             <tr>
-              ${l(r,t=>t.key,t=>e`
+              ${l(e,t=>t.key,t=>r`
                   <th
                     part="header-cell"
                     style=${i(this._cellStyle(t))}
@@ -14,11 +14,11 @@ import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property
             </tr>
           </thead>
           <tbody>
-            ${l(t,(t,r)=>String(t.id??r),t=>e`
+            ${l(t,(t,e)=>String(t.id??e),t=>r`
                 <tr part="row">
-                  ${l(r,t=>t.key,r=>e`
-                      <td part="cell" style=${i(this._cellStyle(r))}>
-                        ${this._formatCell(t[r.key])||a}
+                  ${l(e,t=>t.key,e=>r`
+                      <td part="cell" style=${i(this._cellStyle(e))}>
+                        ${this._formatCell(t[e.key])||a}
                       </td>
                     `)}
                 </tr>
@@ -26,11 +26,11 @@ import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property
           </tbody>
         </table>
       </div>
-    `:e`
+    `:r`
         <div class="wrapper" part="wrapper">
           <div class="empty" part="empty">${this.emptyText}</div>
         </div>
-      `}};c.styles=t`
+      `}};u.styles=t`
     :host {
       display: block;
       width: 100%;
@@ -96,5 +96,5 @@ import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property
       text-align: center;
       font-size: var(--sky-font-size-sm, 0.875rem);
     }
-  `,d([s({type:Array})],c.prototype,"data",2),d([s({type:Array})],c.prototype,"columns",2),d([s({type:String})],c.prototype,"emptyText",2),d([s({type:Array})],c.prototype,"column",1),d([s({type:String,reflect:!0})],c.prototype,"preset",2),c=d([o("sky-simple-table")],c);export{c as SkySimpleTable};
+  `,m([s({type:Array,hasChanged:p})],u.prototype,"data",1),m([s({type:Array,hasChanged:p})],u.prototype,"columns",1),m([s({type:String})],u.prototype,"emptyText",2),m([s({type:Array,hasChanged:p})],u.prototype,"column",1),m([s({type:String,reflect:!0})],u.prototype,"preset",2),u=m([o("sky-simple-table")],u);export{u as SkySimpleTable};
 //# sourceMappingURL=sky-simple-table.js.map

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\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  @property({ type: Array }) data: SkySimpleTableRow[] = [];\r\n  @property({ type: Array }) columns: SkySimpleTableColumn[] = [];\r\n  @property({ type: String }) emptyText = \"No data available\";\r\n\r\n  @property({ type: Array })\r\n  get column(): SkySimpleTableColumn[] {\r\n    return this.columns;\r\n  }\r\n\r\n  set column(value: SkySimpleTableColumn[] | null | undefined) {\r\n    const old = this.columns;\r\n    this.columns = Array.isArray(value) ? value : [];\r\n    this.requestUpdate(\"column\", old);\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 _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    return {\r\n      textAlign: column.align,\r\n      width: column.width,\r\n    };\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","columns","emptyText","preset","_presets","PresetController","column","value","old","Array","isArray","requestUpdate","_safeData","_resolvedColumns","length","filter","Boolean","key","firstRow","Object","keys","map","label","_toTitle","replace","char","toUpperCase","_formatCell","Date","toLocaleDateString","String","_cellStyle","textAlign","align","width","render","rows","html","repeat","styleMap","header","row","index","id","nothing","styles","css","__decorateClass","property","type","prototype","reflect","customElement"],"mappings":"wfAiEO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,GAAAC,SAAAC,WACsBC,KAAAC,KAA4B,GAC5BD,KAAAE,QAAkC,GACjCF,KAAAG,UAAY,oBAeGH,KAAAI,OAAS,GAEpDJ,KAAQK,SAAW,IAAIC,EAAiBN,KAAI,CAd5C,UAAIO,GACF,OAAOP,KAAKE,OACd,CAEA,UAAIK,CAAOC,GACT,MAAMC,EAAMT,KAAKE,QACjBF,KAAKE,QAAUQ,MAAMC,QAAQH,GAASA,EAAQ,GAC9CR,KAAKY,cAAc,SAAUH,EAC/B,CA4EA,aAAYI,GACV,OAAOH,MAAMC,QAAQX,KAAKC,MAAQD,KAAKC,KAAO,EAChD,CAEA,oBAAYa,GACV,GAAIJ,MAAMC,QAAQX,KAAKE,UAAYF,KAAKE,QAAQa,OAAS,EACvD,OAAOf,KAAKE,QAAQc,OAAQT,GAAWU,QAAQV,GAAQW,MAGzD,MAAMC,EAAWnB,KAAKa,UAAU,GAChC,OAAKM,EAEEC,OAAOC,KAAKF,GAAUG,IAAKJ,IAAA,CAChCA,MACAK,MAAOvB,KAAKwB,SAASN,MAJD,EAMxB,CAEQ,QAAAM,CAAShB,GACf,OAAOA,EACJiB,QAAQ,SAAU,KAClBA,QAAQ,kBAAmB,SAC3BA,QAAQ,QAAUC,GAASA,EAAKC,cACrC,CAEQ,WAAAC,CAAYpB,GAClB,OAAIA,QAA8C,GAC9CA,aAAiBqB,KAAarB,EAAMsB,qBACjCC,OAAOvB,EAChB,CAEQ,UAAAwB,CAAWzB,GACjB,MAAO,CACL0B,UAAW1B,EAAO2B,MAClBC,MAAO5B,EAAO4B,MAElB,CAEA,MAAAC,GACE,MAAMC,EAAOrC,KAAKa,UACZX,EAAUF,KAAKc,iBAErB,OAAKuB,EAAKtB,QAAWb,EAAQa,OAQtBuB,CAAA;;;;;gBAKKC,EACArC,EACCK,GAAWA,EAAOW,IAClBX,GAAW+B,CAAA;;;4BAGAE,EAASxC,KAAKgC,WAAWzB;;sBAE/BA,EAAOkC,QAAUlC,EAAOgB,OAASvB,KAAKwB,SAASjB,EAAOW;;;;;;cAO9DqB,EACAF,EACA,CAACK,EAAKC,IAAUZ,OAAOW,EAAIE,IAAMD,GAChCD,GAAQJ,CAAA;;oBAEHC,EACArC,EACCK,GAAWA,EAAOW,IAClBX,GAAW+B,CAAA;8CACcE,EAASxC,KAAKgC,WAAWzB;0BAC7CP,KAAK4B,YAAYc,EAAInC,EAAOW,OAAS2B;;;;;;;;MArClDP,CAAA;;4CAE+BtC,KAAKG;;OA8C/C,GArLWR,EAsBJmD,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArBWC,EAAA,CAA1BC,EAAS,CAAEC,KAAMxC,SADPf,EACgBwD,UAAA,OAAA,GACAH,EAAA,CAA1BC,EAAS,CAAEC,KAAMxC,SAFPf,EAEgBwD,UAAA,UAAA,GACCH,EAAA,CAA3BC,EAAS,CAAEC,KAAMnB,UAHPpC,EAGiBwD,UAAA,YAAA,GAGxBH,EAAA,CADHC,EAAS,CAAEC,KAAMxC,SALPf,EAMPwD,UAAA,SAAA,GAYuCH,EAAA,CAA1CC,EAAS,CAAEC,KAAMnB,OAAQqB,SAAS,KAlBxBzD,EAkBgCwD,UAAA,SAAA,GAlBhCxD,EAANqD,EAAA,CADNK,EAAc,qBACF1D"}
+{"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}function b(e){return{light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})}}function g(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function x(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function f(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function v(e){return f(e),e}function $(e,r){const t=g(r),o=x(100*t);if(t<=0)return"transparent";if(t>=1)return v(e);if(f(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function S(e,r,t){return`color-mix(in oklch, ${e} ${x(r)}%, ${t})`}function E(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function w(e){return`\n${e} {\n  scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-track")} {\n  background: var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-thumb")} {\n  background-color: var(--sky-scrollbar-thumb);\n}\n${E(e,"::-webkit-scrollbar-thumb:hover")} {\n  background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function F(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function z(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 C=i("sky/theme");let j=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      ${w("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())}z(this.hostScrollbarStyleId,w("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",v(r?"#FFFFFF":"#0B1020")),o("sky-text-light",v(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",v(e.color.background)),o("sky-text-primary",v(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??S(n,m.primary,y),d=c?.secondary??S(n,m.secondary,y),p=c?.tertiary??S(n,m.tertiary,y),k=r?.4:.34,u={primary:g(l.primary,k),secondary:g(l.secondary??l.primary,k),tertiary:g(l.tertiary??l.primary,k),solid:g(l.solid,1)};o("sky-glass-primary",$(h,u.primary)),o("sky-glass-secondary",$(d,u.secondary)),o("sky-glass-tertiary",$(p,u.tertiary)),o("sky-glass-solid",$(n,u.solid));const b=g(e.glassSurface?.top,r?.26:.24),x=g(e.glassSurface?.bottom,r?.08:.06);o("sky-glass-surface",`linear-gradient(\n      180deg,\n      ${$(d,b)},\n      ${$(h,x)}\n    )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,$(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,$(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 f=e.scrollbar;o("sky-scrollbar-track",f?.track??"transparent"),o("sky-scrollbar-thumb",f?.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",f?.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 E=["active","success","warning","danger","info"];E.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)`)}),E.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))`)}),E.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 w=(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=w(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=w(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}(b(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=F(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=F(e,":root");z(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=b(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>`}};j.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:.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`
     :host {
       display: contents;
     }
@@ -8,5 +8,5 @@ import{css as e,LitElement as r,html as t}from"lit";import{property as o,state a
       color: var(--sky-text-primary);
       background: var(--sky-background-color);
     }
-  `,y([o({type:Object})],j.prototype,"userTheme",2),y([o({type:String,reflect:!0})],j.prototype,"scope",2),y([o({type:String,reflect:!0})],j.prototype,"preference",2),y([s()],j.prototype,"mode",2),y([n({context:C})],j.prototype,"_ctx",2),y([o({type:Boolean})],j.prototype,"persist",2),y([o({type:Boolean})],j.prototype,"broadcast",2),j=y([a("sky-theme-provider")],j);export{j as SkyThemeProvider,m as defaultTheme,p as getCurrentTheme,h as getThemePreference,b as mergeTheme,k as onThemeChange,d as resolveActualTheme,C as themeContext};
+  `,y([o({type:Object})],B.prototype,"userTheme",2),y([o({type:String,reflect:!0})],B.prototype,"scope",2),y([o({type:String,reflect:!0})],B.prototype,"preference",2),y([s()],B.prototype,"mode",2),y([n({context:O})],B.prototype,"_ctx",2),y([o({type:Boolean})],B.prototype,"persist",2),y([o({type:Boolean})],B.prototype,"broadcast",2),B=y([a("sky-theme-provider")],B);export{B as SkyThemeProvider,m as defaultTheme,p as getCurrentTheme,h as getThemePreference,x as mergeTheme,k as onThemeChange,d as resolveActualTheme,O as themeContext};
 //# sourceMappingURL=sky-theme-provider.js.map