@sky.ui/core 0.0.40 → 0.0.42

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';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport type { SkyListitem } from '../sky-listitem/sky-listitem.js';\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 * @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  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: var(--sky-box-shadow-inset), 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[] = [];\n\n  /** Bound selection as item `value` strings (requires `value` on items). Coerces null to `[]`. */\n  @property({ type: Array })\n  get selectedValues(): string[] {\n    return this._selectedValues;\n  }\n  set selectedValues(value: string[] | null | undefined) {\n    const old = this._selectedValues;\n    this._selectedValues = Array.isArray(value) ? value : [];\n    this.requestUpdate('selectedValues', old);\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 (\n      (changed.has('selectedValues') || changed.has('selection')) &&\n      !this._syncingSelectedValues\n    ) {\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(\n      0,\n      Math.min(navIdx + delta, navigable.length - 1)\n    );\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 =\n        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)\n      prev.shadowRoot\n        ?.querySelector('.list-item')\n        ?.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(\n        '.list-item'\n      ) 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}\n"],"names":["SkyList","LitElement","constructor","super","arguments","this","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","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\";\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\";\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: `\"\"`.\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\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`\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":"6ZAqEO,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,GAAAC,SAAAC,WAGsCC,KAAAC,OAAS,GAEpDD,KAAQE,SAAW,IAAIC,EAAiBH,MA6BZA,KAAAI,UAAkC,OAE9DJ,KAAQK,gBAA4B,GAgBpCL,KAAQM,aAAe,EAGvBN,KAAQO,wBAAyB,EAEjCP,KAAQQ,gBAAmBC,GAAaT,KAAKU,eAAeD,GAE5DT,KAAQW,cAAgB,KACtBX,KAAKY,+BACLZ,KAAKa,uBACP,CAtBA,kBAAIC,GACF,OAAOd,KAAKK,eACd,CACA,kBAAIS,CAAeC,GACjB,MAAMC,EAAMhB,KAAKK,gBACjBL,KAAKK,gBAAkBY,MAAMC,QAAQH,GAASA,EAAQ,GACtDf,KAAKmB,cAAc,iBAAkBH,EACvC,CAiBS,YAAAI,GACPpB,KAAKqB,eACLrB,KAAKsB,iBAAiB,UAAWtB,KAAKuB,WACtCvB,KAAKsB,iBAAiB,gBAAiBtB,KAAKQ,iBAC5CR,KAAKY,+BACLZ,KAAKa,sBACP,CAES,oBAAAW,GACP1B,MAAM0B,uBACNxB,KAAKyB,oBAAoB,UAAWzB,KAAKuB,WACzCvB,KAAKyB,oBAAoB,gBAAiBzB,KAAKQ,gBACjD,CAEQ,YAAAa,GACN,GAAuB,SAAnBrB,KAAKI,UAGP,OAFAJ,KAAK0B,aAAa,OAAQ,aAC1B1B,KAAK2B,gBAAgB,wBAIvB3B,KAAK0B,aAAa,OAAQ,WACH,aAAnB1B,KAAKI,UACPJ,KAAK0B,aAAa,uBAAwB,QAE1C1B,KAAK2B,gBAAgB,uBAEzB,CAEQ,cAAAC,GACN,OAAQ5B,KAAK6B,OAAS,IAAIC,OAAQC,GAAS/B,KAAKgC,gBAAgBD,GAClE,CAEQ,eAAAC,CAAgBD,GACtB,QAASA,IAASA,EAAKE,WAAaF,EAAKG,SAC3C,CAEQ,SAAAC,CAAUJ,GAChB,OAAQ/B,KAAK6B,OAAS,IAAIO,QAAQL,EACpC,CAEQ,cAAArB,CAAeD,GACrB,MAAMsB,EAAOtB,EAAE4B,OAAON,KACtB,IAAK/B,KAAKgC,gBAAgBD,GAAO,OAEV,WAAnB/B,KAAKI,WACPJ,KAAK6B,MAAMS,QAASC,GAAMA,EAAEC,aAAY,IACxCT,EAAKS,aAAY,IACW,aAAnBxC,KAAKI,WACd2B,EAAKS,aAAaT,EAAKU,UAGzB,MAAMC,EAAgB1C,KAAK6B,MAAMC,OAAQS,GAAMA,EAAEE,UAC3C3B,EAAiB4B,EAAcC,IAAKJ,GAAMA,EAAExB,OAAS,IAC3Df,KAAKO,wBAAyB,EAC9BP,KAAKc,eAAiB,IAAIA,GAC1Bd,KAAKO,wBAAyB,EAE9BP,KAAK4C,cACH,IAAIC,YAAiC,cAAe,CAClDR,OAAQ,CACNK,gBACA5B,kBAEFgC,SAAS,EACTC,UAAU,IAGhB,CAGQ,4BAAAnC,GACN,IAAKZ,KAAK6B,OAAOmB,QAA6B,SAAnBhD,KAAKI,UAAsB,OAEtD,MAAM6C,EAAO,IAAIC,IAAIlD,KAAKc,gBAAkB,IAC5C,GAAuB,WAAnBd,KAAKI,UAAwB,CAC/B,MAAM+C,EAAQ,IAAIF,GAAM,GACxB,IAAA,MAAWlB,KAAQ/B,KAAK6B,MAClBE,EAAKG,WACTH,EAAKS,iBAAsB,IAAVW,GAAuBpB,EAAKhB,QAAUoC,GAEzD,MACF,CAEA,IAAA,MAAWpB,KAAQ/B,KAAK6B,MAClBE,EAAKG,WACTH,EAAKS,YAAYS,EAAKG,IAAIrB,EAAKhB,OAEnC,CAES,OAAAsC,CAAQC,GACfxD,MAAMuD,QAAQC,GAEVA,EAAQF,IAAI,cACdpD,KAAKqB,gBAGFiC,EAAQF,IAAI,oBAAqBE,EAAQF,IAAI,cAAkBpD,KAAKO,wBACvEP,KAAKY,8BAET,CAEQ,SAAAW,CAAUd,GAChB,MAAM8C,EAAYvD,KAAK4B,iBACvB,GAAK2B,EAAUP,OAEf,OAAQvC,EAAE+C,KACR,IAAK,YACH/C,EAAEgD,iBACFzD,KAAK0D,UAAU,GACf,MACF,IAAK,UACHjD,EAAEgD,iBACFzD,KAAK0D,cACL,MACF,IAAK,OACHjD,EAAEgD,iBACFzD,KAAK2D,UAAU3D,KAAKmC,UAAUoB,EAAU,KACxC,MACF,IAAK,MACH9C,EAAEgD,iBACFzD,KAAK2D,UAAU3D,KAAKmC,UAAUoB,EAAUA,EAAUP,OAAS,KAC3D,MACF,IAAK,IACL,IAAK,QACHvC,EAAEgD,iBACFzD,KAAK6B,MAAM7B,KAAKM,eAAesC,cAC7B,IAAIC,YAAY,gBAAiB,CAC/BR,OAAQ,CAAEN,KAAM/B,KAAK6B,MAAM7B,KAAKM,eAChCwC,SAAS,EACTC,UAAU,KAKpB,CAEQ,SAAAW,CAAUE,GAChB,MAAML,EAAYvD,KAAK4B,iBACvB,IAAK2B,EAAUP,OAAQ,OAEvB,MAAMa,EAAU7D,KAAK6B,MAAM7B,KAAKM,cAChC,IAAIwD,EAASD,EAAUN,EAAUnB,QAAQyB,IAAW,EAChDC,EAAS,IAAGA,EAASF,EAAQ,GAAI,EAAKL,EAAUP,QAEpD,MACMe,EAAOR,EADMS,KAAKC,IAAI,EAAGD,KAAKE,IAAIJ,EAASF,EAAOL,EAAUP,OAAS,KAEvEe,GAAM/D,KAAK2D,UAAU3D,KAAKmC,UAAU4B,GAC1C,CAEQ,oBAAAlD,GACN,MAAMsC,EAAQnD,KAAK4B,iBAAiB,GAChCuB,GAAOnD,KAAK2D,UAAU3D,KAAKmC,UAAUgB,GAC3C,CAEQ,SAAAQ,CAAUQ,GAChB,IAAKnE,KAAK6B,OAAOmB,OAAQ,OAEzB,MAAMoB,EAAMpE,KAAK6B,MAAMmB,OACvB,IAAIe,EAAOC,KAAKC,IAAI,EAAGD,KAAKE,IAAIC,EAAOC,EAAM,IAC7C,IAAKpE,KAAKgC,gBAAgBhC,KAAK6B,MAAMkC,IAAQ,CAC3C,MAAMR,EAAYvD,KAAK4B,iBACjByC,EAAYd,EAAUe,KAAMvC,GAAS/B,KAAKmC,UAAUJ,IAASgC,IAASR,EAAU,GACtF,IAAKc,EAAW,OAChBN,EAAO/D,KAAKmC,UAAUkC,EACxB,CAEA,MAAME,EAAOvE,KAAK6B,MAAM7B,KAAKM,cACzBiE,KAAWC,YAAYC,cAAc,eAAe/C,aAAa,WAAY,MAEjF1B,KAAKM,aAAeyD,EACpB,MAAMF,EAAU7D,KAAK6B,MAAM7B,KAAKM,cAChC,GAAIuD,GAAW7D,KAAKgC,gBAAgB6B,GAAU,CAC5C,MAAMa,EAAKb,EAAQW,YAAYC,cAAc,cACzCC,IACFA,EAAGhD,aAAa,WAAY,KAC5BgD,EAAGC,QAEP,CACF,CAEO,aAAAC,CAAcT,GACnBnE,KAAK2D,UAAUQ,EACjB,CAEO,QAAAU,GACL,MAAO,IAAK7E,KAAK6B,OAAS,GAC5B,CAES,MAAAiD,GACP,OAAOC,CAAA;;4BAEiB/E,KAAKW;;KAG/B,GAnQWhB,EAOKqF,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAJkBC,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAHxB3F,EAGgC4F,UAAA,SAAA,GA+BfL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAlCP1F,EAkCiB4F,UAAA,YAAA,GAMxBL,EAAA,CADHC,EAAS,CAAEC,KAAMnE,SAvCPtB,EAwCP4F,UAAA,iBAAA,GAUIL,EAAA,CADPM,EAAsB,CAAEC,SAAS,KAjDvB9F,EAkDH4F,UAAA,QAAA,GAlDG5F,EAANuF,EAAA,CADNQ,EAAc,aACF/F"}

package/dist/sky-listitem/sky-listitem.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 export type SkyListitemActivateDetail = {
     item: SkyListitem;
 };
@@ -20,6 +20,7 @@ export type SkyListitemActivateDetail = {
  * @property {boolean} selected - Whether item is selected.
  * @property {boolean} dense - Whether compact spacing is used.
  * @property {boolean} disabled - Whether interaction is disabled.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @fires {CustomEvent<SkyListitemActivateDetail>} item-activate - Fired when the item is activated.
  * @method setSelected Sets selection state programmatically.
  *
@@ -69,6 +70,9 @@ export declare class SkyListitem extends LitElement {
     selected: boolean;
     dense: boolean;
     disabled: boolean;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     private onClick;
     setSelected(selected: boolean): void;

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

@@ -1,7 +1,5 @@
-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";var n=Object.defineProperty,l=Object.getOwnPropertyDescriptor,d=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?l(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&&n(t,s,i),i};let p=class extends t{constructor(){super(...arguments),this.avatar="",this.value="",this.subheader="",this.selected=!1,this.dense=!1,this.disabled=!1}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`
-        <div class="subheader" part="subheader" role="presentation">
-          ${this.subheader}
-        </div>
+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`
+        <div class="subheader" part="subheader" role="presentation">${this.subheader}</div>
       `:s`
       <div
         class="list-item"
@@ -14,7 +12,12 @@ import{css as e,LitElement as t,html as s,nothing as r}from"lit";import{property
       >
         ${o(this.avatar,()=>s`
             <div class="leading" part="leading">
-              <img class="avatar" src=${this.avatar} alt="" part="avatar" />
+              <img
+                class="avatar"
+                src=${this.avatar}
+                alt=""
+                part="avatar"
+              />
             </div>
           `)}
 
@@ -24,7 +27,7 @@ import{css as e,LitElement as t,html as s,nothing as r}from"lit";import{property
           <slot name="actions">${r}</slot>
         </div>
       </div>
-    `}};p.styles=e`
+    `}};c.styles=e`
     :host {
       display: block;
       cursor: pointer;
@@ -129,5 +132,5 @@ import{css as e,LitElement as t,html as s,nothing as r}from"lit";import{property
         transition: none;
       }
     }
-  `,d([a({type:String})],p.prototype,"avatar",2),d([a({type:String})],p.prototype,"value",2),d([a({type:String,reflect:!0})],p.prototype,"subheader",2),d([a({type:Boolean,reflect:!0})],p.prototype,"selected",2),d([a({type:Boolean,reflect:!0})],p.prototype,"dense",2),d([a({type:Boolean,reflect:!0})],p.prototype,"disabled",2),p=d([i("sky-listitem")],p);export{p as SkyListitem};
+  `,p([a({type:String})],c.prototype,"avatar",2),p([a({type:String})],c.prototype,"value",2),p([a({type:String,reflect:!0})],c.prototype,"subheader",2),p([a({type:Boolean,reflect:!0})],c.prototype,"selected",2),p([a({type:Boolean,reflect:!0})],c.prototype,"dense",2),p([a({type:Boolean,reflect:!0})],c.prototype,"disabled",2),p([a({type:String,reflect:!0})],c.prototype,"preset",2),c=p([i("sky-listitem")],c);export{c as SkyListitem};
 //# sourceMappingURL=sky-listitem.js.map

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';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\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 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 * @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  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    this.selected = selected;\n    this.requestUpdate();\n  }\n\n  override render() {\n    if (this.subheader) {\n      return html`\n        <div class=\"subheader\" part=\"subheader\" role=\"presentation\">\n          ${this.subheader}\n        </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 class=\"avatar\" src=${this.avatar} alt=\"\" part=\"avatar\" />\n            </div>\n          `\n        )}\n\n        <div class=\"content\" part=\"content\"><slot name=\"content\"></slot></div>\n\n        <div class=\"actions\" part=\"actions\">\n          <slot name=\"actions\">${nothing}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["SkyListitem","LitElement","constructor","super","arguments","this","avatar","value","subheader","selected","dense","disabled","onClick","dispatchEvent","CustomEvent","detail","item","bubbles","composed","setSelected","requestUpdate","render","html","when","nothing","styles","css","__decorateClass","property","type","String","prototype","reflect","Boolean","customElement"],"mappings":"+WAkEO,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,CAAA,CA6G/C,OAAAC,GACFP,KAAKM,UAAYN,KAAKG,WAC1BH,KAAKQ,cACH,IAAIC,YAAuC,gBAAiB,CAC1DC,OAAQ,CAAEC,KAAMX,MAChBY,SAAS,EACTC,UAAU,IAGhB,CAEA,WAAAC,CAAYV,GACVJ,KAAKI,SAAWA,EAChBJ,KAAKe,eACP,CAES,MAAAC,GACP,OAAIhB,KAAKG,UACAc,CAAA;;YAEDjB,KAAKG;;QAKNc,CAAA;;;;;wBAKajB,KAAKI,SAAW,OAAS;wBACzBJ,KAAKM,SAAW,OAAS;;iBAEhCN,KAAKO;;UAEZW,EACAlB,KAAKC,OACL,IAAMgB,CAAA;;wCAEwBjB,KAAKC;;;;;;;iCAQZkB;;;KAI/B,GAvKWxB,EASKyB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IARGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADP9B,EACiB+B,UAAA,SAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAHP9B,EAGiB+B,UAAA,QAAA,GACeJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAJxBhC,EAIgC+B,UAAA,YAAA,GACCJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KALzBhC,EAKiC+B,UAAA,WAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KANzBhC,EAMiC+B,UAAA,QAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KAPzBhC,EAOiC+B,UAAA,WAAA,GAPjC/B,EAAN2B,EAAA,CADNO,EAAc,iBACFlC"}
+{"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\";\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: `\"\"`.\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\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`\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"}

package/dist/sky-radio/sky-radio.d.ts

@@ -1,4 +1,4 @@
-import { FormControlBase, FormState } from '../helper/internals/form-control-base';
+import { FormControlBase, FormState } from "../helper/internals/form-control-base";
 export type SkyRadioSelectDetail = {
     value: string;
 };
@@ -6,7 +6,7 @@ export type SkyRadioValidationErrorDetail = {
     errors: string[];
 };
 export type SkyRadioValueClearedDetail = {
-    value: '';
+    value: "";
 };
 /**
  * @element sky-radio
@@ -34,6 +34,7 @@ export type SkyRadioValueClearedDetail = {
  * @property {boolean} required - Enables required validation for standalone usage.
  * @property {string} requiredMessage - Error message for required validation failures.
  * @property {boolean} compact - Compact control size.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  *
  * @fires {CustomEvent<SkyRadioSelectDetail>} radio-select - Fired when the option becomes selected.
  * @fires {Event} change - Native change event for form compatibility.
@@ -82,10 +83,14 @@ export declare class SkyRadio extends FormControlBase {
     compact: boolean;
     private _hasMeaningfulSlot;
     private syncStyleVars;
-    protected willUpdate(changed: Map<string, unknown>): void;
+    /** After PresetController hostUpdate — paint with current color. */
+    protected update(changed: Map<string, unknown>): void;
     check(): void;
     focusRadio(): void;
-    static styles: import("lit").CSSResult;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
+    static styles: import("lit").CSSResult[];
     constructor();
     static shadowRootOptions: {
         clonable?: boolean;

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

@@ -1,4 +1,4 @@
-import{unsafeCSS as e,css as t,LitElement as o,html as r}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";var p=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(e,t,o,r)=>{for(var s,i=r>1?void 0:r?y(t,o):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(r?s(t,o,i):s(i))||i);return r&&i&&p(t,o,i),i};let k=class extends h{constructor(){super(),this.label="",this.value="",this.checked=!1,this.color="primary",this.compact=!1,this._hasMeaningfulSlot=!1,this._onSlotChange=e=>{const t=e.target,o=this._slotHasMeaningfulContent(t);o!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=o)},this.onNativeChange=e=>{const t=e.currentTarget;if(this.disabled||this.readonly)return void(t.checked!==this.checked&&(t.checked=this.checked));const o=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)}o&&(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))}willUpdate(e){super.willUpdate(e),(0===e.size||e.has("color"))&&this.syncStyleVars()}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 r`
+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`
       <label
         part="label"
         ?disabled=${this.disabled}
@@ -23,12 +23,13 @@ import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{proper
         <slot @slotchange=${this._onSlotChange}></slot>
         ${l(!this._hasMeaningfulSlot,()=>this.label)}
       </label>
-    `}};k.styles=t`
+    `}};m.styles=[y,t`
     :host {
       display: inline-flex;
       align-items: center;
       --sky-radio-size: 18px;
       --sky-radio-dot: 10px;
+      --sky-focus-ring-color: var(--radio-checked-color, var(--sky-active-primary));
     }
 
     :host([compact]) {
@@ -89,7 +90,7 @@ import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{proper
     }
 
     .radio-wrapper::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 50%;
       left: 50%;
@@ -110,13 +111,10 @@ import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{proper
 
     .radio-wrapper.checked::before {
       transform: translate(-50%, -50%) scale(1);
-      background-color: var(
-        --sky-on-color-fallback-light,
-        var(--sky-text-white)
-      );
+      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));
     }
 
-    input[type='radio'] {
+    input[type="radio"] {
       position: absolute;
       opacity: 0;
       pointer-events: none;
@@ -143,5 +141,5 @@ import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{proper
     }
 
     ${e(c([{selector:".radio-wrapper.checked::before",fillVar:"--radio-checked-color",property:"background-color"}]))}
-  `,k.shadowRootOptions={...o.shadowRootOptions,delegatesFocus:!0},u([s({type:String})],k.prototype,"label",2),u([s({type:String})],k.prototype,"value",2),u([s({type:Boolean,reflect:!0})],k.prototype,"checked",2),u([s({type:String})],k.prototype,"color",2),u([s({type:Boolean,reflect:!0})],k.prototype,"compact",2),u([i()],k.prototype,"_hasMeaningfulSlot",2),k=u([a("sky-radio")],k);export{k as SkyRadio};
+  `],m.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0},b([s({type:String})],m.prototype,"label",2),b([s({type:String})],m.prototype,"value",2),b([s({type:Boolean,reflect:!0})],m.prototype,"checked",2),b([s({type:String})],m.prototype,"color",2),b([s({type:Boolean,reflect:!0})],m.prototype,"compact",2),b([i()],m.prototype,"_hasMeaningfulSlot",2),b([s({type:String,reflect:!0})],m.prototype,"preset",2),m=b([a("sky-radio")],m);export{m as SkyRadio};
 //# sourceMappingURL=sky-radio.js.map

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

package/dist/sky-row/sky-row.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 /**
  * @element sky-row
  *
@@ -52,6 +52,9 @@ import { LitElement } from 'lit';
  * ```
  */
 export declare class SkyRow extends LitElement {
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/sky-row/sky-row.js

@@ -1,6 +1,6 @@
-import{customElement as r}from"lit/decorators.js";import{css as t,LitElement as e,html as o}from"lit";var s=Object.getOwnPropertyDescriptor;let l=class extends e{render(){return o`<slot></slot>`}};l.styles=t`
+import{property as r,customElement as t}from"lit/decorators.js";import{css as e,LitElement as o,html as s}from"lit";import{PresetController as p}from"../helper/controllers/preset-controller.js";var l=Object.defineProperty,n=Object.getOwnPropertyDescriptor,i=(r,t,e,o)=>{for(var s,p=o>1?void 0:o?n(t,e):t,i=r.length-1;i>=0;i--)(s=r[i])&&(p=(o?s(t,e,p):s(p))||p);return o&&p&&l(t,e,p),p};let c=class extends o{constructor(){super(...arguments),this.preset="",this._presets=new p(this)}render(){return s`<slot></slot>`}};c.styles=e`
     :host {
       display: contents;
     }
-  `,l=((r,t,e,o)=>{for(var l,n=o>1?void 0:o?s(t,e):t,i=r.length-1;i>=0;i--)(l=r[i])&&(n=l(n)||n);return n})([r("sky-row")],l);export{l as SkyRow};
+  `,i([r({type:String,reflect:!0})],c.prototype,"preset",2),c=i([t("sky-row")],c);export{c as SkyRow};
 //# sourceMappingURL=sky-row.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-row.js","sources":["../../src/sky-row/sky-row.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { LitElement, html, css } from 'lit';\n\n/**\n * @element sky-row\n *\n * @summary Lightweight semantic row wrapper for use inside `sky-grid`.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/grid\n * @dependency sky-grid\n *\n * @slot - Default slot for child content.\n *\n * @Behavior\n * - Renders as `display: contents` so it does not add layout wrappers.\n * - Preserves semantic grouping for rows while children participate directly in parent layout.\n *\n * @example\n * ```html\n * <sky-grid columns=\"3\" gap=\"12px\">\n *   <sky-row>\n *     <div>Account</div>\n *     <div>Status</div>\n *     <div>Actions</div>\n *   </sky-row>\n * </sky-grid>\n * ```\n * ```vue\n * <template>\n *   <sky-grid columns=\"3\" gap=\"12px\">\n *     <sky-row>\n *       <div>Account</div>\n *       <div>Status</div>\n *       <div>Actions</div>\n *     </sky-row>\n *   </sky-grid>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-grid columns=\"3\" gap=\"12px\">\n *       <sky-row>\n *         <div>Account</div>\n *         <div>Status</div>\n *         <div>Actions</div>\n *       </sky-row>\n *     </sky-grid>\n *   );\n * }\n * ```\n */\n@customElement('sky-row')\nexport class SkyRow extends LitElement {\n  static override styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["SkyRow","LitElement","render","html","styles","css","__decorateClass","customElement"],"mappings":"4IAwDO,IAAMA,EAAN,cAAqBC,EAOjB,MAAAC,GACP,OAAOC,CAAA,eACT,GATWH,EACKI,OAASC,CAAA;;;;IADdL,uGAANM,CAAA,CADNC,EAAc,YACFP"}
+{"version":3,"file":"sky-row.js","sources":["../../src/sky-row/sky-row.ts"],"sourcesContent":["import { customElement, property } from \"lit/decorators.js\";\nimport { LitElement, html, css } from \"lit\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\n\n\n/**\n * @element sky-row\n *\n * @summary Lightweight semantic row wrapper for use inside `sky-grid`.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/grid\n * @dependency sky-grid\n *\n * @slot - Default slot for child content.\n *\n * @Behavior\n * - Renders as `display: contents` so it does not add layout wrappers.\n * - Preserves semantic grouping for rows while children participate directly in parent layout.\n *\n * @example\n * ```html\n * <sky-grid columns=\"3\" gap=\"12px\">\n *   <sky-row>\n *     <div>Account</div>\n *     <div>Status</div>\n *     <div>Actions</div>\n *   </sky-row>\n * </sky-grid>\n * ```\n * ```vue\n * <template>\n *   <sky-grid columns=\"3\" gap=\"12px\">\n *     <sky-row>\n *       <div>Account</div>\n *       <div>Status</div>\n *       <div>Actions</div>\n *     </sky-row>\n *   </sky-grid>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-grid columns=\"3\" gap=\"12px\">\n *       <sky-row>\n *         <div>Account</div>\n *         <div>Status</div>\n *         <div>Actions</div>\n *       </sky-row>\n *     </sky-grid>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-row\")\nexport class SkyRow 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: contents;\n    }\n  `;\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}"],"names":["SkyRow","LitElement","constructor","super","arguments","this","preset","_presets","PresetController","render","html","styles","css","__decorateClass","property","type","String","reflect","prototype","customElement"],"mappings":"kYA0DO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,GAAAC,SAAAC,WAGsCC,KAAAC,OAAS,GAEpDD,KAAQE,SAAW,IAAIC,EAAiBH,KAAI,CAQnC,MAAAI,GACP,OAAOC,CAAA,eACT,GAfWV,EAOKW,OAASC,CAAA;;;;IAJkBC,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAHxBjB,EAGgCkB,UAAA,SAAA,GAHhClB,EAANa,EAAA,CADNM,EAAc,YACFnB"}

package/dist/sky-sheet/sky-sheet.d.ts

@@ -1,8 +1,8 @@
-import { LitElement, type PropertyValues } from 'lit';
-export type SkySheetBackground = 'primary' | 'secondary' | 'tertiary' | 'solid' | 'transparent';
-export type SkySheetBlurLevel = 'none' | 'sm' | 'md' | 'lg';
-export type SkySheetShadow = 'none' | 'sm' | 'md' | 'lg' | 'inset';
-export type SkySheetBorder = 'none' | 'sm' | 'md' | 'lg';
+import { LitElement, type PropertyValues } from "lit";
+export type SkySheetBackground = "primary" | "secondary" | "tertiary" | "solid" | "transparent";
+export type SkySheetBlurLevel = "none" | "sm" | "md" | "lg";
+export type SkySheetShadow = "none" | "sm" | "md" | "lg" | "inset";
+export type SkySheetBorder = "none" | "sm" | "md" | "lg";
 /** Preset tokens or any CSS length (e.g. `1rem`, `16px`). */
 export type SkySheetRadius = string;
 /** Preset map includes `xl`; arbitrary values pass through like `resolveRadius`. */
@@ -24,6 +24,7 @@ export declare function resolveSheetRadius(input: string): string;
  * @property {SkySheetShadow} shadow - Shadow style preset.
  * @property {SkySheetBorder} border - Border style preset.
  * @property {SkySheetRadius} radius - Preset (`none`, `sm`, `md`, `lg`, `xl`) or CSS length (`1rem`, `16px`).
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  *
  * @Behavior
  * - Applies visual styles directly on `:host` for compact composition.
@@ -64,7 +65,11 @@ export declare class SkySheet extends LitElement {
     radius: SkySheetRadius;
     connectedCallback(): void;
     private _applyRadiusVar;
-    protected willUpdate(changed: PropertyValues): void;
+    /** After PresetController hostUpdate — paint with current radius. */
+    protected update(changed: PropertyValues): void;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }