@sky.ui/core 0.0.38 → 0.0.40

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

@@ -1 +1 @@
-{"version":3,"file":"sky-list.js","sources":["../../src/sky-list/sky-list.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { customElement, property, queryAssignedElements } from \"lit/decorators.js\";\r\nimport type { SkyListitem } from \"../sky-listitem/sky-listitem.js\";\r\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://library.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 * @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  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","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';\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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"}

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;
 };
@@ -10,7 +10,7 @@ export type SkyListitemActivateDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/list
+ * @documentation https://sky-ui.com/components/list
  *
  * @slot content - Main content of the list item (usually label or text).
  * @slot actions - Trailing action elements (e.g., icons, buttons).

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

@@ -1,5 +1,7 @@
 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>
+        <div class="subheader" part="subheader" role="presentation">
+          ${this.subheader}
+        </div>
       `:s`
       <div
         class="list-item"
@@ -12,12 +14,7 @@ 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>
           `)}
 

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

@@ -1 +1 @@
-{"version":3,"file":"sky-listitem.js","sources":["../../src/sky-listitem/sky-listitem.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\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://library.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 * @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  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","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;sEACyDjB,KAAKG;QAIhEc,CAAA;;;;;wBAKajB,KAAKI,SAAW,OAAS;wBACzBJ,KAAKM,SAAW,OAAS;;iBAEhCN,KAAKO;;UAEZW,EACAlB,KAAKC,OACL,IAAMgB,CAAA;;;;sBAIMjB,KAAKC;;;;;;;;;;iCAWMkB;;;KAI/B,GA1KWxB,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';\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"}

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
@@ -16,7 +16,7 @@ export type SkyRadioValueClearedDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/radio
+ * @documentation https://sky-ui.com/components/radio
  *
  * @slot - Content to display instead of the label property.
  *
@@ -33,6 +33,7 @@ export type SkyRadioValueClearedDetail = {
  * @property {boolean} readonly - Prevents selection changes while still allowing focus.
  * @property {boolean} required - Enables required validation for standalone usage.
  * @property {string} requiredMessage - Error message for required validation failures.
+ * @property {boolean} compact - Compact control size.
  *
  * @fires {CustomEvent<SkyRadioSelectDetail>} radio-select - Fired when the option becomes selected.
  * @fires {Event} change - Native change event for form compatibility.
@@ -78,6 +79,7 @@ export declare class SkyRadio extends FormControlBase {
     value: string;
     checked: boolean;
     color: string;
+    compact: boolean;
     private _hasMeaningfulSlot;
     private syncStyleVars;
     protected willUpdate(changed: Map<string, unknown>): void;

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

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

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

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement } from 'lit';
 /**
  * @element sky-row
  *
@@ -7,7 +7,7 @@ import { LitElement } from "lit";
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/grid
+ * @documentation https://sky-ui.com/components/grid
  * @dependency sky-grid
  *
  * @slot - Default slot for child content.

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\";\r\nimport { LitElement, html, css } from \"lit\";\r\n\r\n\r\n/**\r\n * @element sky-row\r\n *\r\n * @summary Lightweight semantic row wrapper for use inside `sky-grid`.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/grid\r\n * @dependency sky-grid\r\n *\r\n * @slot - Default slot for child content.\r\n *\r\n * @Behavior\r\n * - Renders as `display: contents` so it does not add layout wrappers.\r\n * - Preserves semantic grouping for rows while children participate directly in parent layout.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-grid columns=\"3\" gap=\"12px\">\r\n *   <sky-row>\r\n *     <div>Account</div>\r\n *     <div>Status</div>\r\n *     <div>Actions</div>\r\n *   </sky-row>\r\n * </sky-grid>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-grid columns=\"3\" gap=\"12px\">\r\n *     <sky-row>\r\n *       <div>Account</div>\r\n *       <div>Status</div>\r\n *       <div>Actions</div>\r\n *     </sky-row>\r\n *   </sky-grid>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-grid columns=\"3\" gap=\"12px\">\r\n *       <sky-row>\r\n *         <div>Account</div>\r\n *         <div>Status</div>\r\n *         <div>Actions</div>\r\n *       </sky-row>\r\n *     </sky-grid>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-row\")\r\nexport class SkyRow extends LitElement {\r\n  static override styles = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n  `;\r\n\r\n  override render() {\r\n    return html`<slot></slot>`;\r\n  }\r\n}"],"names":["SkyRow","LitElement","render","html","styles","css","__decorateClass","customElement"],"mappings":"4IAyDO,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 } 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"}

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`. */
@@ -15,7 +15,7 @@ export declare function resolveSheetRadius(input: string): string;
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/sheet
+ * @documentation https://sky-ui.com/components/sheet
  *
  * @slot - Content placed inside the sheet container.
  *

package/dist/sky-sheet/sky-sheet.js

@@ -10,49 +10,49 @@ import{css as r,LitElement as s,html as a}from"lit";import{property as e,customE
     }
 
     /* background */
-    :host([bg="primary"]) {
+    :host([bg='primary']) {
       background: var(--sky-glass-primary);
     }
-    :host([bg="secondary"]) {
+    :host([bg='secondary']) {
       background: var(--sky-glass-secondary);
     }
-    :host([bg="tertiary"]) {
+    :host([bg='tertiary']) {
       background: var(--sky-glass-tertiary);
     }
-    :host([bg="solid"]) {
+    :host([bg='solid']) {
       background: var(--sky-glass-solid);
       background-image: none;
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
     }
-    :host([bg="transparent"]) {
+    :host([bg='transparent']) {
       background: transparent;
       background-image: none;
     }
 
-    :host([bg="primary"]:not([blurLevel="none"])),
-    :host([bg="secondary"]:not([blurLevel="none"])),
-    :host([bg="tertiary"]:not([blurLevel="none"])) {
+    :host([bg='primary']:not([blurLevel='none'])),
+    :host([bg='secondary']:not([blurLevel='none'])),
+    :host([bg='tertiary']:not([blurLevel='none'])) {
       background-image: var(--sky-glass-surface);
     }
 
-    :host([blurLevel="none"]) {
+    :host([blurLevel='none']) {
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
     }
-    :host([blurLevel="sm"]) {
+    :host([blurLevel='sm']) {
       backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
         var(--sky-saturation-primary);
       -webkit-backdrop-filter: var(--sky-blur-primary)
         var(--sky-brightness-primary) var(--sky-saturation-primary);
     }
-    :host([blurLevel="md"]) {
+    :host([blurLevel='md']) {
       backdrop-filter: var(--sky-blur-secondary) var(--sky-brightness-secondary)
         var(--sky-saturation-secondary);
       -webkit-backdrop-filter: var(--sky-blur-secondary)
         var(--sky-brightness-secondary) var(--sky-saturation-secondary);
     }
-    :host([blurLevel="lg"]) {
+    :host([blurLevel='lg']) {
       backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)
         var(--sky-saturation-tertiary);
       -webkit-backdrop-filter: var(--sky-blur-tertiary)
@@ -60,33 +60,33 @@ import{css as r,LitElement as s,html as a}from"lit";import{property as e,customE
     }
 
     /* shadow */
-    :host([shadow="none"]) {
+    :host([shadow='none']) {
       box-shadow: none;
     }
-    :host([shadow="sm"]) {
+    :host([shadow='sm']) {
       box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);
     }
-    :host([shadow="md"]) {
+    :host([shadow='md']) {
       box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);
     }
-    :host([shadow="lg"]) {
+    :host([shadow='lg']) {
       box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);
     }
-    :host([shadow="inset"]) {
+    :host([shadow='inset']) {
       box-shadow: var(--sky-box-shadow-inset);
     }
 
     /* border */
-    :host([border="none"]) {
+    :host([border='none']) {
       border: none;
     }
-    :host([border="sm"]) {
+    :host([border='sm']) {
       border: var(--sky-border-primary);
     }
-    :host([border="md"]) {
+    :host([border='md']) {
       border: var(--sky-border-secondary);
     }
-    :host([border="lg"]) {
+    :host([border='lg']) {
       border: var(--sky-border-tertiary);
     }
   `,n([e({type:String,reflect:!0})],l.prototype,"bg",2),n([e({type:String,reflect:!0})],l.prototype,"blurLevel",2),n([e({type:String,reflect:!0})],l.prototype,"shadow",2),n([e({type:String,reflect:!0})],l.prototype,"border",2),n([e({type:String,reflect:!0})],l.prototype,"radius",2),l=n([o("sky-sheet")],l);export{l as SkySheet,b as resolveSheetRadius};