@diwacopilot/components 1.0.0

package/dist/esm/diwa-select.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-select.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-select/diwa-select-styles.ts","src/components/diwa-select/diwa-select.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\nimport type { SelectState } from './types';\r\n\r\nexport const getComponentCss = (\r\n  isOpen: boolean,\r\n  _disabled: boolean,\r\n  _state: SelectState,\r\n  _compact: boolean,\r\n  isUp: boolean = false,\r\n): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    width: 100%;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Label ──────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n    cursor: default;\r\n  }\r\n\r\n  :host([hide-label]) .label {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  .label__required {\r\n    color: var(--diwa-notification-error);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    margin-left: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Description ────────────────────────────────────────────────────── */\r\n\r\n  .description {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-2);\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Trigger ────────────────────────────────────────────────────────── */\r\n\r\n  .trigger {\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));\n    padding: 0 var(--diwa-space-3);\r\n    box-sizing: border-box;\r\n    gap: var(--diwa-space-2);\r\n\r\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    font-family: inherit;\r\n    color: var(--diwa-text-primary);\r\n    text-align: left;\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n\r\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    :host(:not([disabled])) .trigger:hover {\n      border-color: var(--diwa-border-hover);\n    }\n  }\n\r\n  ${isOpen && !isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }' : ''}\r\n  ${isOpen && isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }' : ''}\r\n\r\n  /* ── Focus ring on trigger itself ───────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.trigger')}\r\n\r\n  /* ── Selected text ──────────────────────────────────────────────────── */\r\n\r\n  .trigger__value {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .trigger__placeholder {\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  /* ── Chevron icon ───────────────────────────────────────────────────── */\r\n\r\n  .trigger__chevron {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    color: var(--diwa-text-secondary);\r\n    transition: transform var(--diwa-transition-fast);\r\n    ${isOpen ? 'transform: rotate(180deg);' : ''}\r\n  }\r\n\r\n  .trigger__chevron svg {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  /* ── Dropdown panel ─────────────────────────────────────────────────── */\r\n\r\n  .dropdown {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: var(--diwa-z-dropdown);\r\n    background-color: var(--diwa-bg-elevated);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\r\n    border-top: none;\r\n    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));\r\n    overflow: hidden;\r\n    box-shadow: var(--diwa-shadow-lg);\r\n    display: ${isOpen ? 'block' : 'none'};\r\n  }\r\n\r\n  .dropdown--up {\r\n    top: auto;\r\n    bottom: 100%;\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\r\n    border-bottom: none;\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;\r\n    margin-bottom: -1px;\r\n  }\r\n\r\n  /* ── Filter input ───────────────────────────────────────────────────── */\r\n\r\n  .filter {\r\n    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n  }\r\n\r\n  .filter__input {\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n    border-radius: var(--diwa-radius-sm);\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-family: inherit;\r\n    outline: none;\r\n    transition: border-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  .filter__input::placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  .filter__input:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  .filter__input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\r\n  /* ── Options list ───────────────────────────────────────────────────── */\r\n\r\n  .options {\r\n    max-height: var(--diwa-select-dropdown-max-height);\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-1);\r\n  }\r\n\r\n  .options::-webkit-scrollbar {\r\n    width: var(--diwa-scrollbar-width);\r\n  }\r\n\r\n  .options::-webkit-scrollbar-track {\r\n    background: transparent;\r\n  }\r\n\r\n  .options::-webkit-scrollbar-thumb {\r\n    background-color: var(--diwa-border);\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  /* ── Compact ────────────────────────────────────────────────────────── */\r\n\r\n  :host([compact]) .trigger {\n    min-height: var(--diwa-touch-target-min-size-compact, 32px);\n    font-size: var(--diwa-font-size-md);\n    padding: 0 var(--diwa-space-2);\n  }\n\r\n  /* ── States: error / success ────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) .trigger {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"success\"]) .trigger {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  /* ── Message ────────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    margin-top: var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: var(--diwa-line-height-normal);\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  :host([state=\"error\"]) .message {\r\n    color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"success\"]) .message {\r\n    color: var(--diwa-notification-success);\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .trigger {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    opacity: var(--diwa-opacity-disabled);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.trigger', '.trigger__chevron', '.filter__input')}\r\n`;\r\n\r\n\r\n","import {\r\n  Component,\r\n  Element,\r\n  Event,\r\n  type EventEmitter,\r\n  Host,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from '@stencil/core';\r\nimport type {\r\n  SelectChangeEventDetail,\r\n  SelectDropdownDirection,\r\n  SelectState,\r\n  SelectTheme,\r\n  SelectToggleEventDetail,\r\n} from './types';\r\nimport { getComponentCss } from './diwa-select-styles';\r\n\r\n/** Module-level counter for unique IDs. */\r\nlet selectIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-select\r\n *\r\n * A fully accessible single-select dropdown with built-in text filter,\r\n * keyboard navigation, and form integration.\r\n *\r\n * Based on the Diwa select API contract.\n *\r\n * Usage:\r\n *   <diwa-select name=\"fruit\" label=\"Favourite fruit\">\r\n *     <diwa-select-option>Please select…</diwa-select-option>\r\n *     <diwa-select-option value=\"apple\">Apple</diwa-select-option>\r\n *     <diwa-select-option value=\"banana\">Banana</diwa-select-option>\r\n *   </diwa-select>\r\n *\r\n * @slot default      — diwa-select-option elements\r\n * @slot label        — Custom label content (overrides the label prop)\r\n * @slot description  — Custom description content\r\n * @slot message      — Custom message content\r\n */\r\n@Component({\r\n  tag: 'diwa-select',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSelect {\r\n  @Element() host!: HTMLElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Theme — cascades down to child options. */\r\n  @Prop({ reflect: true }) theme: SelectTheme = 'dark';\r\n\r\n  /** Visible label text. */\r\n  @Prop() label?: string;\r\n\r\n  /** Optional description shown below the label. */\r\n  @Prop() description?: string;\r\n\r\n  /** HTML name attribute — identifies the field in form submissions. */\r\n  @Prop() name: string = '';\r\n\r\n  /** Currently selected value. Mutable — updated on user interaction. */\r\n  @Prop({ mutable: true }) value?: string;\r\n\r\n  /** Validation state. */\r\n  @Prop({ reflect: true }) state: SelectState = 'none';\r\n\r\n  /** Helper / validation message shown below the trigger. */\r\n  @Prop() message?: string;\r\n\r\n  /** Hides the label visually while keeping it accessible. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  /** Disables interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Marks the field as required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Compact variant — reduces the trigger height. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Preferred direction for the dropdown panel.\r\n   * `'auto'` detects viewport space and flips upward if needed.\r\n   */\r\n  @Prop() dropdownDirection: SelectDropdownDirection = 'auto';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Emitted when the selection changes. */\r\n  @Event({ bubbles: true })\r\n  change!: EventEmitter<SelectChangeEventDetail>;\r\n\r\n  /** Emitted when the dropdown opens or closes. */\r\n  @Event({ bubbles: false })\r\n  toggle!: EventEmitter<SelectToggleEventDetail>;\r\n\r\n  /** Emitted when the component loses focus (dropdown closes via click-outside). */\r\n  @Event({ bubbles: false })\r\n  blur!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Internal state\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @State() private isOpen: boolean = false;\r\n  @State() private hasFilterResults: boolean = true;\r\n  @State() private dropdownClass: string = 'dropdown';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private refs / tracking\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private internalId: string = `diwa-s-${++selectIdCounter}`;\r\n  private triggerEl!: HTMLDivElement;\r\n  private filterInputEl?: HTMLInputElement;\r\n  private options: HTMLDiwaSelectOptionElement[] = [];\r\n  private highlightedIndex: number = -1;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('theme')\r\n  onThemeChange(): void {\r\n    this.syncChildThemes();\r\n  }\r\n\r\n  @Watch('value')\r\n  onValueChange(): void {\r\n    this.syncSelectionFromValue();\r\n  }\r\n\r\n  @Watch('isOpen')\r\n  onIsOpenChange(open: boolean): void {\r\n    this.toggle.emit({ open });\r\n    if (open) {\r\n      this.updateDropdownDirection();\r\n      this.highlightedIndex = this.getFirstHighlightIndex();\r\n      this.applyHighlight();\r\n      requestAnimationFrame(() => {\r\n        this.filterInputEl?.focus();\r\n      });\r\n    } else {\r\n      this.clearHighlight();\r\n      this.highlightedIndex = -1;\r\n      this.resetFilter();\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  connectedCallback(): void {\r\n    document.addEventListener('mousedown', this.onClickOutside, true);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.removeEventListener('mousedown', this.onClickOutside, true);\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.collectOptions();\r\n    this.syncSelectionFromValue();\r\n    this.syncChildThemes();\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Public methods\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Programmatically opens the dropdown. */\r\n  @Method()\r\n  async open(): Promise<void> {\r\n    this.isOpen = true;\r\n  }\r\n\r\n  /** Programmatically closes the dropdown. */\r\n  @Method()\r\n  async close(): Promise<void> {\r\n    this.isOpen = false;\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Event listeners\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Listen('diwaSelectOptionUpdate')\r\n  onOptionUpdate(e: CustomEvent<{ value: string | undefined }>): void {\r\n    e.stopPropagation();\r\n    this.value = e.detail.value;\r\n    this.syncSelectionFromValue();\r\n    this.change.emit({ name: this.name, value: this.value ?? '' });\r\n    this.isOpen = false;\r\n    forceUpdate(this.host);\r\n    requestAnimationFrame(() => {\r\n      this.triggerEl.focus();\r\n    });\r\n  }\r\n\r\n  @Listen('slotchange')\r\n  onSlotChange(): void {\r\n    this.collectOptions();\r\n    this.syncSelectionFromValue();\r\n    this.syncChildThemes();\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private collectOptions(): void {\r\n    this.options = Array.from(\r\n      this.host.querySelectorAll<HTMLDiwaSelectOptionElement>('diwa-select-option'),\r\n    );\r\n  }\r\n\r\n  private syncSelectionFromValue(): void {\r\n    for (const opt of this.options) {\r\n      const shouldBeSelected = opt.value !== undefined && opt.value === this.value;\r\n      if (opt.selected !== shouldBeSelected) {\r\n        opt.selected = shouldBeSelected;\r\n        forceUpdate(opt);\r\n      }\r\n    }\r\n  }\r\n\r\n  private syncChildThemes(): void {\r\n    for (const opt of this.options) {\r\n      if (opt.theme !== this.theme) {\r\n        opt.theme = this.theme;\r\n        forceUpdate(opt);\r\n      }\r\n    }\r\n  }\r\n\r\n  private getVisibleOptions(): HTMLDiwaSelectOptionElement[] {\r\n    return this.options.filter((o) => !o.disabled && o.style.display !== 'none');\r\n  }\r\n\r\n  private getFirstHighlightIndex(): number {\r\n    const visible = this.getVisibleOptions();\r\n    const firstSelected = visible.findIndex((o) => o.selected);\r\n    return firstSelected >= 0 ? firstSelected : 0;\r\n  }\r\n\r\n  private applyHighlight(): void {\r\n    const visible = this.getVisibleOptions();\r\n    visible.forEach((opt, i) => {\r\n      opt.highlighted = i === this.highlightedIndex;\r\n    });\r\n  }\r\n\r\n  private clearHighlight(): void {\r\n    for (const opt of this.options) {\r\n      if (opt.highlighted) opt.highlighted = false;\r\n    }\r\n    this.highlightedIndex = -1;\r\n  }\r\n\r\n  private updateDropdownDirection(): void {\r\n    if (this.dropdownDirection !== 'auto') {\r\n      this.dropdownClass = this.dropdownDirection === 'up' ? 'dropdown dropdown--up' : 'dropdown';\r\n      return;\r\n    }\r\n    const rect = this.triggerEl.getBoundingClientRect();\r\n    const spaceBelow = window.innerHeight - rect.bottom;\r\n    this.dropdownClass = spaceBelow < 260 ? 'dropdown dropdown--up' : 'dropdown';\r\n  }\r\n\r\n  private resetFilter(): void {\r\n    if (this.filterInputEl) this.filterInputEl.value = '';\r\n    this.hasFilterResults = true;\r\n    for (const opt of this.options) {\r\n      opt.style.display = '';\r\n    }\r\n  }\r\n\r\n  private onClickOutside = (e: MouseEvent): void => {\r\n    if (!this.isOpen) return;\r\n    const path = e.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.isOpen = false;\r\n      this.blur.emit();\r\n    }\r\n  };\r\n\r\n  private onTriggerClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  private onTriggerKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n\r\n    if (!this.isOpen) {\r\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\r\n        e.preventDefault();\r\n        this.isOpen = true;\r\n      }\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case 'Escape':\r\n      case 'Tab': {\r\n        e.preventDefault();\r\n        this.isOpen = false;\r\n        this.triggerEl.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        e.preventDefault();\r\n        const visible = this.getVisibleOptions();\r\n        this.highlightedIndex = Math.min(this.highlightedIndex + 1, visible.length - 1);\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        e.preventDefault();\r\n        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'Home': {\r\n        e.preventDefault();\r\n        this.highlightedIndex = 0;\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'End': {\r\n        e.preventDefault();\r\n        const vis = this.getVisibleOptions();\r\n        this.highlightedIndex = vis.length - 1;\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'Enter':\r\n      case ' ': {\r\n        e.preventDefault();\r\n        const current = this.getVisibleOptions()[this.highlightedIndex];\r\n        if (current && !current.disabled) {\r\n          current.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  private onFilterInput = (e: Event): void => {\r\n    const term = (e.target as HTMLInputElement).value.toLowerCase();\r\n\r\n    let anyVisible = false;\r\n    for (const opt of this.options) {\r\n      const text = (opt.textContent ?? '').toLowerCase();\r\n      const match = text.includes(term);\r\n      opt.style.display = match ? '' : 'none';\r\n      if (match) anyVisible = true;\r\n    }\r\n    this.hasFilterResults = anyVisible;\r\n    this.highlightedIndex = 0;\r\n    this.applyHighlight();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Computed display values\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get selectedLabel(): string {\r\n    const selected = this.options.find((o) => o.value !== undefined && o.value === this.value);\r\n    return (selected?.textContent ?? '').trim();\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const labelId = `${this.internalId}-label`;\r\n    const listboxId = `${this.internalId}-listbox`;\r\n    const hintId = `${this.internalId}-hint`;\r\n    const hasMessage = !!this.message && this.state !== 'none';\r\n    const hasValue = this.value !== undefined && this.value !== '';\r\n    const displayLabel = hasValue ? this.selectedLabel : undefined;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up'))} />\r\n\r\n        {/* Label */}\r\n        {(this.label || this.host.querySelector('[slot=\"label\"]')) && (\r\n          <span class=\"label\" id={labelId} part=\"label\">\r\n            <slot name=\"label\">{this.label}</slot>\r\n            {this.required && <span class=\"label__required\" aria-hidden=\"true\">*</span>}\r\n          </span>\r\n        )}\r\n\r\n        {/* Description */}\r\n        {(this.description || this.host.querySelector('[slot=\"description\"]')) && (\r\n          <span class=\"description\" part=\"description\">\r\n            <slot name=\"description\">{this.description}</slot>\r\n          </span>\r\n        )}\r\n\r\n        {/* Trigger */}\r\n        <div\r\n          class=\"trigger\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded={this.isOpen ? 'true' : 'false'}\r\n          aria-controls={listboxId}\r\n          aria-labelledby={this.label ? labelId : undefined}\r\n          aria-required={this.required ? 'true' : undefined}\r\n          aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n          aria-describedby={hasMessage ? hintId : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.onTriggerClick}\r\n          onKeyDown={this.onTriggerKeyDown}\r\n          ref={(el) => (this.triggerEl = el as HTMLDivElement)}\r\n          part=\"trigger\"\r\n        >\r\n          <span class={`trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`} part=\"value\">\r\n            {displayLabel ?? (this.label || 'Select an option')}\r\n          </span>\r\n\r\n          {/* Chevron */}\r\n          <span class=\"trigger__chevron\" aria-hidden=\"true\" part=\"chevron\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polyline points=\"6 9 12 15 18 9\" />\r\n            </svg>\r\n          </span>\r\n        </div>\r\n\r\n        {/* Dropdown */}\r\n        <div\r\n          class={this.dropdownClass}\r\n          role=\"listbox\"\r\n          id={listboxId}\r\n          aria-multiselectable=\"false\"\r\n          aria-labelledby={this.label ? labelId : undefined}\r\n          part=\"dropdown\"\r\n        >\r\n          {/* Filter */}\r\n          <div class=\"filter\" part=\"filter\">\r\n            <input\r\n              class=\"filter__input\"\r\n              type=\"text\"\r\n              placeholder=\"Filter options…\"\r\n              aria-label=\"Filter options\"\r\n              onInput={this.onFilterInput}\r\n              ref={(el) => (this.filterInputEl = el as HTMLInputElement)}\r\n              part=\"filter-input\"\r\n            />\r\n          </div>\r\n\r\n          {/* Options */}\r\n          <div class=\"options\" part=\"options\">\r\n            {!this.hasFilterResults && (\r\n              <div class=\"no-results\" aria-live=\"polite\">No options found</div>\r\n            )}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n\r\n        {/* Message */}\r\n        {hasMessage && (\r\n          <span class=\"message\" id={hintId} role=\"status\" part=\"message\">\r\n            <slot name=\"message\">{this.message}</slot>\r\n          </span>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-spinner.entry.js

@@ -0,0 +1,97 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+import { a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+import { L as LoaderCircle } from './loader-circle-300f00a4.js';
+
+const getComponentCss = () => `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    align-self: center;
+    width: var(--diwa-spinner-size-md);
+    height: var(--diwa-spinner-size-md);
+  }
+
+  :host([size="sm"]) {
+    width: var(--diwa-spinner-size-sm);
+    height: var(--diwa-spinner-size-sm);
+  }
+
+  :host([size="lg"]) {
+    width: var(--diwa-spinner-size-lg);
+    height: var(--diwa-spinner-size-lg);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .glyph {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: var(--diwa-spinner-color, currentColor);
+    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;
+    transform-origin: center;
+  }
+
+  @keyframes diwa-spinner-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  ${getReducedMotionStyle('.glyph')}
+`;
+
+var _a;
+function toInnerSvg(nodes) {
+    return nodes
+        .map(([tag, attrs]) => {
+        const attrStr = Object.entries(attrs)
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(' ');
+        return `<${tag} ${attrStr}/>`;
+    })
+        .join('');
+}
+const loaderCircleSvg = toInnerSvg((_a = LoaderCircle) !== null && _a !== void 0 ? _a : []);
+const DiwaSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Size tier — controls diameter of the spinner ring. */
+        this.size = "md";
+        /** Per-component theme override. */
+        this.theme = "dark";
+        /**
+         * Accessible label announced by screen readers.
+         * Defaults to "Loading" when omitted.
+         */
+        this.label = "Loading";
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    componentDidRender() {
+        if (this.svgEl) {
+            this.svgEl.innerHTML = loaderCircleSvg;
+        }
+    }
+    render() {
+        return (
+        /**
+         * role="status" on the Host allows screen readers to announce
+         * when the spinner appears without stealing focus (live region,
+         * polite by default). aria-label provides the announcement text.
+         */
+        h(Host, { key: 'a819142d7dc507445298f867d27e62969aa8baf1', role: "status", "aria-label": this.label, "data-theme": this.theme }, h("style", { key: 'a107427b94c4a64fd01d41633c26faba8fa93d18', innerHTML: getComponentCss() }), h("svg", { key: 'a49ebf8de19eac90de9adcaa290a3a5bb1910ba1', ref: (el) => (this.svgEl = el), class: "glyph", "aria-hidden": "true", part: "ring", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+};
+
+export { DiwaSpinner as diwa_spinner };
+
+//# sourceMappingURL=diwa-spinner.entry.js.map

package/dist/esm/diwa-spinner.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-spinner.entry.js","mappings":";;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCzC,qBAAqB,CAAC,QAAQ,CAAC;CAClC;;;ACnCD,SAAS,UAAU,CAAC,KAAe;IACjC,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;QAChB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;aAClC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;aAC9B,IAAI,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,IAAI,GAAG,IAAI,OAAO,IAAI,CAAC;KAC/B,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC;AAED,MAAM,eAAe,GAAG,UAAU,CAAC,MAACA,YAA+C,mCAAI,EAAE,CAAC,CAAC;MA0B9E,WAAW;IAJxB;;;;;;QAY2B,SAAI,GAAgB,IAAI,CAAC;;QAGzB,UAAK,GAAU,MAAM,CAAC;;;;;QAMvC,UAAK,GAAW,SAAS,CAAC;KAqCnC;;;;IA/BC,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe,CAAC;SACxC;KACF;IAED,MAAM;QACJ;;;;;;QAME,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,KAAK,gBAAc,IAAI,CAAC,KAAK,IAChE,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAmB,CAAC,EAC/C,KAAK,EAAC,OAAO,iBACD,MAAM,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACG,EACP;KACH;;;;;","names":["icons.LoaderCircle"],"sources":["src/components/diwa-spinner/diwa-spinner-styles.ts","src/components/diwa-spinner/diwa-spinner.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    align-self: center;\r\n    width: var(--diwa-spinner-size-md);\r\n    height: var(--diwa-spinner-size-md);\r\n  }\r\n\r\n  :host([size=\"sm\"]) {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) {\r\n    width: var(--diwa-spinner-size-lg);\r\n    height: var(--diwa-spinner-size-lg);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .glyph {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    color: var(--diwa-spinner-color, currentColor);\r\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\r\n    transform-origin: center;\r\n  }\r\n\r\n  @keyframes diwa-spinner-spin {\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  ${getReducedMotionStyle('.glyph')}\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport { icons } from 'lucide';\r\nimport type { SpinnerSize } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from './diwa-spinner-styles';\r\n\r\ntype IconNode = ReadonlyArray<readonly [string, Record<string, string>]>;\r\n\r\nfunction toInnerSvg(nodes: IconNode): string {\r\n  return nodes\r\n    .map(([tag, attrs]) => {\r\n      const attrStr = Object.entries(attrs)\r\n        .map(([k, v]) => `${k}=\"${v}\"`)\r\n        .join(' ');\r\n      return `<${tag} ${attrStr}/>`;\r\n    })\r\n    .join('');\r\n}\r\n\r\nconst loaderCircleSvg = toInnerSvg((icons as Record<string, IconNode>).LoaderCircle ?? []);\r\n\r\n/**\r\n * @component diwa-spinner\r\n *\r\n * An animated loading indicator based on a Lucide circular spinner glyph.\r\n * Communicates asynchronous activity to both sighted users and screen readers\r\n * via role=\"status\" and an accessible label.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-spinner-size-sm    Diameter for the sm tier (default 14px)\r\n *   --diwa-spinner-size-md    Diameter for the md tier (default 16px)\r\n *   --diwa-spinner-size-lg    Diameter for the lg tier (default 20px)\r\n *   --diwa-spinner-color      Spinner stroke colour (defaults to currentColor)\r\n *\r\n * Usage:\r\n *   <diwa-spinner></diwa-spinner>\r\n *   <diwa-spinner size=\"lg\" label=\"Saving changes…\"></diwa-spinner>\r\n *\r\n * Parity: mirrors stateless/stateful spinner behavior with consistent\n * aria-label propagation and size variants.\n */\r\n@Component({\r\n  tag: \"diwa-spinner\",\r\n  shadow: true,\r\n})\r\nexport class DiwaSpinner {\r\n  private svgEl?: SVGSVGElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Size tier — controls diameter of the spinner ring. */\r\n  @Prop({ reflect: true }) size: SpinnerSize = \"md\";\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /**\r\n   * Accessible label announced by screen readers.\r\n   * Defaults to \"Loading\" when omitted.\r\n   */\r\n  @Prop() label: string = \"Loading\";\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentDidRender() {\r\n    if (this.svgEl) {\r\n      this.svgEl.innerHTML = loaderCircleSvg;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      /**\r\n       * role=\"status\" on the Host allows screen readers to announce\r\n       * when the spinner appears without stealing focus (live region,\r\n       * polite by default). aria-label provides the announcement text.\r\n       */\r\n      <Host role=\"status\" aria-label={this.label} data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <svg\r\n          ref={(el) => (this.svgEl = el as SVGSVGElement)}\r\n          class=\"glyph\"\r\n          aria-hidden=\"true\"\r\n          part=\"ring\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-stepper-horizontal-item.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3fa02c74.js';
+
+const getComponentCss = (state, isLast) => {
+    const circleColor = state === 'complete'
+        ? 'var(--diwa-notification-success)'
+        : state === 'current'
+            ? 'var(--diwa-accent)'
+            : 'var(--diwa-border)';
+    const labelColor = state === 'incomplete' ? 'var(--diwa-text-muted)' : 'var(--diwa-text-primary)';
+    return `
+  :host {
+    display: flex;
+    align-items: flex-start;
+    flex: 1;
+    min-width: 0;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    gap: var(--diwa-space-2);
+    position: relative;
+  }
+
+  /* Connector line to the right */
+  .connector {
+    display: ${isLast ? 'none' : 'block'};
+    position: absolute;
+    top: calc(var(--diwa-stepper-step-size) / 2);
+    left: calc(50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));
+    right: calc(-50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));
+    height: var(--diwa-border-width-thin);
+    background: ${state === 'complete' ? 'var(--diwa-notification-success)' : 'var(--diwa-border)'};
+  }
+
+  .circle {
+    width: var(--diwa-stepper-step-size);
+    height: var(--diwa-stepper-step-size);
+    border-radius: 50%;
+    background: ${circleColor};
+    color: var(--diwa-text-on-accent, #fff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .circle-inner {
+    color: inherit;
+    font-size: var(--diwa-font-size-xs, 12px);
+    font-weight: var(--diwa-font-weight-medium);
+    line-height: 1;
+  }
+
+  .label {
+    font-size: var(--diwa-font-size-sm);
+    font-weight: ${state === 'current' ? 'var(--diwa-font-weight-medium)' : 'var(--diwa-font-weight-normal, 400)'};
+    color: ${labelColor};
+    text-align: center;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .sublabel {
+    font-size: var(--diwa-font-size-xs, 11px);
+    color: var(--diwa-text-muted);
+    text-align: center;
+  }
+  `;
+};
+
+const DiwaStepperHorizontalItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Step label text. */
+        this.label = '';
+        /** Optional secondary label (e.g. estimated time). */
+        this.sublabel = '';
+        /** Step state — managed by the parent stepper. */
+        this.state = 'incomplete';
+        /** 1-based step number icon — managed by the parent stepper. */
+        this.stepNumber = 1;
+        /** Whether this is the last step (hides the connector line) — managed by the parent. */
+        this.isLast = false;
+    }
+    renderIcon() {
+        if (this.state === 'complete') {
+            // Checkmark SVG
+            return (h("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "2,8 6,12 14,4" })));
+        }
+        return h("span", { class: "circle-inner" }, this.stepNumber);
+    }
+    render() {
+        return (h(Host, { key: 'f607bb4a3025642270b9fa62f32053f1f66cd7d5', role: "listitem", "aria-current": this.state === 'current' ? 'step' : undefined }, h("style", { key: 'eb24b7bb547f8b388e58203797047c9496d91c44', innerHTML: getComponentCss(this.state, this.isLast) }), h("div", { key: 'b40a388ae0a301cdd79d110a102318f9c053afec', class: "item" }, h("div", { key: '39470f2d8d52af9c7bd51bc4b628a2be85afeff1', class: "circle" }, this.renderIcon()), h("div", { key: '18f6fe713a9957b51131d34bb9feba346691efcf', class: "connector", "aria-hidden": "true" }), this.label && h("span", { key: '18cf0195b215688c238c9ca69fdeea790ea927fd', class: "label" }, this.label), this.sublabel && h("span", { key: '8841a928b2bf64c5055ad9ec9aad04bbe5251b8a', class: "sublabel" }, this.sublabel))));
+    }
+    get host() { return getElement(this); }
+};
+
+export { DiwaStepperHorizontalItem as diwa_stepper_horizontal_item };
+
+//# sourceMappingURL=diwa-stepper-horizontal-item.entry.js.map

package/dist/esm/diwa-stepper-horizontal-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-stepper-horizontal-item.entry.js","mappings":";;AAEO,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,MAAe;IAC/D,MAAM,WAAW,GACf,KAAK,KAAK,UAAU;UAChB,kCAAkC;UAClC,KAAK,KAAK,SAAS;cACjB,oBAAoB;cACpB,oBAAoB,CAAC;IAE7B,MAAM,UAAU,GAAG,KAAK,KAAK,YAAY,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;IAElG,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;eAyBM,MAAM,GAAG,MAAM,GAAG,OAAO;;;;;;kBAMtB,KAAK,KAAK,UAAU,GAAG,kCAAkC,GAAG,oBAAoB;;;;;;;kBAOhF,WAAW;;;;;;;;;;;;;;;;;mBAiBV,KAAK,KAAK,SAAS,GAAG,gCAAgC,GAAG,qCAAqC;aACpG,UAAU;;;;;;;;;;;;;;GAcpB,CAAC;AACJ,CAAC;;MChEY,yBAAyB;IAJtC;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,UAAK,GAAW,EAAE,CAAC;;QAGnB,aAAQ,GAAW,EAAE,CAAC;;QAGU,UAAK,GAAc,YAAY,CAAC;;QAG/C,eAAU,GAAW,CAAC,CAAC;;QAGvB,WAAM,GAAY,KAAK,CAAC;KA6BlD;IA3BS,UAAU;QAChB,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE;;YAE7B,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,IAC/I,gBAAU,MAAM,EAAC,eAAe,GAAG,CAC/B,EACN;SACH;QACD,OAAO,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,UAAU,CAAQ,CAAC;KAC5D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,kBAAe,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAC/E,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAI,EAC9D,4DAAK,KAAK,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,UAAU,EAAE,CACd,EACN,4DAAK,KAAK,EAAC,WAAW,iBAAa,MAAM,GAAG,EAC3C,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrD,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC3D,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item-styles.ts","src/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item.tsx"],"sourcesContent":["import type { StepState } from './types';\r\n\r\nexport const getComponentCss = (state: StepState, isLast: boolean): string => {\r\n  const circleColor =\r\n    state === 'complete'\r\n      ? 'var(--diwa-notification-success)'\r\n      : state === 'current'\r\n        ? 'var(--diwa-accent)'\r\n        : 'var(--diwa-border)';\r\n\r\n  const labelColor = state === 'incomplete' ? 'var(--diwa-text-muted)' : 'var(--diwa-text-primary)';\r\n\r\n  return `\r\n  :host {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    flex: 1;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    flex: 1;\r\n    min-width: 0;\r\n    gap: var(--diwa-space-2);\r\n    position: relative;\r\n  }\r\n\r\n  /* Connector line to the right */\r\n  .connector {\r\n    display: ${isLast ? 'none' : 'block'};\r\n    position: absolute;\r\n    top: calc(var(--diwa-stepper-step-size) / 2);\r\n    left: calc(50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));\r\n    right: calc(-50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));\r\n    height: var(--diwa-border-width-thin);\r\n    background: ${state === 'complete' ? 'var(--diwa-notification-success)' : 'var(--diwa-border)'};\r\n  }\r\n\r\n  .circle {\r\n    width: var(--diwa-stepper-step-size);\r\n    height: var(--diwa-stepper-step-size);\r\n    border-radius: 50%;\r\n    background: ${circleColor};\r\n    color: var(--diwa-text-on-accent, #fff);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .circle-inner {\r\n    color: inherit;\r\n    font-size: var(--diwa-font-size-xs, 12px);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n    line-height: 1;\r\n  }\r\n\r\n  .label {\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-weight: ${state === 'current' ? 'var(--diwa-font-weight-medium)' : 'var(--diwa-font-weight-normal, 400)'};\r\n    color: ${labelColor};\r\n    text-align: center;\r\n    line-height: 1.3;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    max-width: 100%;\r\n  }\r\n\r\n  .sublabel {\r\n    font-size: var(--diwa-font-size-xs, 11px);\r\n    color: var(--diwa-text-muted);\r\n    text-align: center;\r\n  }\r\n  `;\r\n};\r\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { StepState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-stepper-horizontal-item-styles';\r\n\r\n/**\r\n * @component diwa-stepper-horizontal-item\r\n *\r\n * A single step in a `diwa-stepper-horizontal`. The parent manages `state`,\r\n * `stepNumber`, and `isLast` automatically. Provide a step label via the\r\n * `label` prop; additional context can be added with `sublabel`.\r\n *\r\n * Usage:\r\n *   <diwa-stepper-horizontal-item label=\"Account\">Create your account</diwa-stepper-horizontal-item>\r\n */\r\n@Component({\r\n  tag: 'diwa-stepper-horizontal-item',\r\n  shadow: true,\r\n})\r\nexport class DiwaStepperHorizontalItem {\r\n  @Element() host!: HTMLDiwaStepperHorizontalItemElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Step label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Optional secondary label (e.g. estimated time). */\r\n  @Prop() sublabel: string = '';\r\n\r\n  /** Step state — managed by the parent stepper. */\r\n  @Prop({ mutable: true, reflect: true }) state: StepState = 'incomplete';\r\n\r\n  /** 1-based step number icon — managed by the parent stepper. */\r\n  @Prop({ mutable: true }) stepNumber: number = 1;\r\n\r\n  /** Whether this is the last step (hides the connector line) — managed by the parent. */\r\n  @Prop({ mutable: true }) isLast: boolean = false;\r\n\r\n  private renderIcon() {\r\n    if (this.state === 'complete') {\r\n      // Checkmark SVG\r\n      return (\r\n        <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"2,8 6,12 14,4\" />\r\n        </svg>\r\n      );\r\n    }\r\n    return <span class=\"circle-inner\">{this.stepNumber}</span>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"listitem\" aria-current={this.state === 'current' ? 'step' : undefined}>\r\n        <style innerHTML={getComponentCss(this.state, this.isLast)} />\r\n        <div class=\"item\">\r\n          <div class=\"circle\">\r\n            {this.renderIcon()}\r\n          </div>\r\n          <div class=\"connector\" aria-hidden=\"true\" />\r\n          {this.label && <span class=\"label\">{this.label}</span>}\r\n          {this.sublabel && <span class=\"sublabel\">{this.sublabel}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-stepper-horizontal.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+
+const getComponentCss = () => `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .stepper {
+    display: flex;
+    align-items: flex-start;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .stepper::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const DiwaStepperHorizontal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "update", 1);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Zero-based index of the current active step. */
+        this.activeStepIndex = 0;
+    }
+    handleIndexChange() {
+        this.syncItems();
+    }
+    componentDidLoad() {
+        this.syncItems();
+    }
+    componentDidUpdate() {
+        this.syncItems();
+    }
+    getItems() {
+        return Array.from(this.host.querySelectorAll('diwa-stepper-horizontal-item'));
+    }
+    syncItems() {
+        const items = this.getItems();
+        const total = items.length;
+        items.forEach((item, i) => {
+            if (i < this.activeStepIndex) {
+                item.state = 'complete';
+            }
+            else if (i === this.activeStepIndex) {
+                item.state = 'current';
+            }
+            else {
+                item.state = 'incomplete';
+            }
+            item.stepNumber = i + 1;
+            item.isLast = i === total - 1;
+        });
+    }
+    render() {
+        return (h(Host, { key: '1757e9375f388f949957317c856cc8607f941b04', "data-theme": this.theme }, h("style", { key: 'e5aa89e60aa678cd2d607aee67c4c8bc81058a0c', innerHTML: getComponentCss() }), h("div", { key: 'e5ca0a96129a84534d286781b80036ce9c3033db', class: "stepper", role: "list", "aria-label": "Progress" }, h("slot", { key: '157ae71fb67eeab4979cf7c0eb441e83e0c35cc6' }))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "activeStepIndex": ["handleIndexChange"]
+    }; }
+};
+
+export { DiwaStepperHorizontal as diwa_stepper_horizontal };
+
+//# sourceMappingURL=diwa-stepper-horizontal.entry.js.map

package/dist/esm/diwa-stepper-horizontal.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-stepper-horizontal.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;CAoB5C;;MCGY,qBAAqB;IAJlC;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAI/C,oBAAe,GAAW,CAAC,CAAC;KAuD7B;IA5CC,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAEO,QAAQ;QACd,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CACjB,CAAC;KAC7C;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC3B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE;gBAC3B,IAAY,CAAC,KAAK,GAAG,UAAU,CAAC;aAClC;iBAAM,IAAI,CAAC,KAAK,IAAI,CAAC,eAAe,EAAE;gBACpC,IAAY,CAAC,KAAK,GAAG,SAAS,CAAC;aACjC;iBAAM;gBACJ,IAAY,CAAC,KAAK,GAAG,YAAY,CAAC;aACpC;YACA,IAAY,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;YAChC,IAAY,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,gBAAY,UAAU,IACpD,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/diwa-stepper-horizontal/diwa-stepper-horizontal-styles.ts","src/components/diwa-stepper-horizontal/diwa-stepper-horizontal.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .stepper {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  .stepper::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { StepperHorizontalUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-stepper-horizontal-styles';\r\n\r\n/**\r\n * @component diwa-stepper-horizontal\r\n *\r\n * Displays a horizontal sequence of steps, indicating progress through a\r\n * multi-step workflow. Accepts `diwa-stepper-horizontal-item` children and\r\n * manages their `state` (complete/current/incomplete) based on `activeStepIndex`.\r\n *\r\n * Usage:\r\n *   <diwa-stepper-horizontal active-step-index={1}>\r\n *     <diwa-stepper-horizontal-item>Account</diwa-stepper-horizontal-item>\r\n *     <diwa-stepper-horizontal-item>Details</diwa-stepper-horizontal-item>\r\n *     <diwa-stepper-horizontal-item>Review</diwa-stepper-horizontal-item>\r\n *   </diwa-stepper-horizontal>\r\n */\r\n@Component({\r\n  tag: 'diwa-stepper-horizontal',\r\n  shadow: true,\r\n})\r\nexport class DiwaStepperHorizontal {\r\n  @Element() host!: HTMLDiwaStepperHorizontalElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Zero-based index of the current active step. */\r\n  @Prop({ mutable: true, attribute: 'active-step-index' })\r\n  activeStepIndex: number = 0;\r\n\r\n  /**\r\n   * Emitted when the active step index changes (e.g. the consumer calls\r\n   * next/prev). This component does not auto-advance — use this event\r\n   * to update `activeStepIndex` externally.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<StepperHorizontalUpdateEventDetail>;\r\n\r\n  @Watch('activeStepIndex')\r\n  handleIndexChange() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncItems();\r\n  }\r\n\r\n  private getItems(): HTMLDiwaStepperHorizontalItemElement[] {\r\n    return Array.from(\r\n      this.host.querySelectorAll('diwa-stepper-horizontal-item'),\r\n    ) as HTMLDiwaStepperHorizontalItemElement[];\r\n  }\r\n\r\n  private syncItems() {\r\n    const items = this.getItems();\r\n    const total = items.length;\r\n    items.forEach((item, i) => {\r\n      if (i < this.activeStepIndex) {\r\n        (item as any).state = 'complete';\r\n      } else if (i === this.activeStepIndex) {\r\n        (item as any).state = 'current';\r\n      } else {\r\n        (item as any).state = 'incomplete';\r\n      }\r\n      (item as any).stepNumber = i + 1;\r\n      (item as any).isLast = i === total - 1;\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"stepper\" role=\"list\" aria-label=\"Progress\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-switch.entry.js

@@ -0,0 +1,130 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+
+const getComponentCss = (checked, disabled, loading, alignLabel, compact) => {
+    // Subtract border-width from inset: `top` on an absolutely-positioned child
+    // is measured from the *padding edge* (inside the border), so we must remove
+    // the border thickness to land exactly at the visual centre of the track.
+    const thumbInset = 'calc((var(--diwa-switch-track-height) - var(--diwa-switch-thumb-size)) / 2 - var(--diwa-border-width-base))';
+    const trackBg = checked
+        ? 'var(--diwa-accent)'
+        : 'var(--diwa-bg-elevated)';
+    const trackBorder = checked ? 'var(--diwa-accent)' : 'var(--diwa-border)';
+    const thumbTranslate = checked
+        ? `translateX(calc(var(--diwa-switch-track-width) - (2 * var(--diwa-border-width-base)) - var(--diwa-switch-thumb-size) - ${thumbInset}))`
+        : `translateX(${thumbInset})`;
+    const opacityRules = disabled || loading ? 'opacity: 0.5; pointer-events: none;' : '';
+    const flexDir = alignLabel === 'start' ? 'row-reverse' : 'row';
+    return `
+    :host {
+      display: inline-flex;
+      font-family: var(--diwa-font-family-base);
+      outline: none;
+      ${compact ? `
+      --diwa-switch-track-width:  32px;
+      --diwa-switch-track-height: 18px;
+      --diwa-switch-thumb-size:   12px;
+      ` : ''}
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .wrapper {
+      display: inline-flex;
+      flex-direction: ${flexDir};
+      align-items: center;
+      gap: var(--diwa-space-3);
+      min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};
+      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
+      ${opacityRules}
+    }
+    .track {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: var(--diwa-switch-track-width);
+      height: var(--diwa-switch-track-height);
+      background: ${trackBg};
+      border: var(--diwa-border-width-base) solid ${trackBorder};
+      border-radius: var(--diwa-radius-xl);
+      box-sizing: border-box;
+      flex-shrink: 0;
+      transition: background var(--diwa-transition-base), border-color var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      .wrapper:hover .track {
+        border-color: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-text-secondary)'};
+        background: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-bg-hover)'};
+      }
+    }
+    ${getFocusStyle('.track')}
+    .thumb {
+      position: absolute;
+      top: ${thumbInset};
+      left: 0;
+      width: var(--diwa-switch-thumb-size);
+      height: var(--diwa-switch-thumb-size);
+      background: var(--diwa-bg-surface);
+      border-radius: 50%;
+      transform: ${thumbTranslate};
+      box-shadow: var(--diwa-shadow-sm);
+      transition: transform var(--diwa-transition-base), background var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);
+      pointer-events: none;
+    }
+    .loading-indicator {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .label {
+      font-family: var(--diwa-font-family-base);
+      font-size: var(--diwa-font-size-base);
+      font-weight: var(--diwa-font-weight-medium);
+      line-height: var(--diwa-line-height-normal);
+      color: var(--diwa-text-primary);
+      user-select: none;
+    }
+
+    ${getReducedMotionStyle('.track', '.thumb')}
+  `;
+};
+
+const DiwaSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "update", 1);
+        /** Whether the switch is in the on state. */
+        this.checked = false;
+        /** Disables interaction. No events fire while disabled. */
+        this.disabled = false;
+        /** Shows a loading state. Disables interaction while active. */
+        this.loading = false;
+        /** Position of the label relative to the track. */
+        this.alignLabel = 'end';
+        /** Reduces track and thumb dimensions for use in dense layouts. */
+        this.compact = false;
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.handleClick = () => {
+            if (this.disabled || this.loading)
+                return;
+            this.update.emit({ checked: !this.checked });
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'd91f87b0a1cd45f78de0dec583a052d9f93b2aac', "data-theme": this.theme }, h("style", { key: '5aa877ca115f4d29fccaac75187d7c7f2faa66d0', innerHTML: getComponentCss(this.checked, this.disabled, this.loading, this.alignLabel, this.compact) }), h("span", { key: '7d4a5a790a354f725d116fa97e995c9de9892164', class: "wrapper", onClick: this.handleClick }, h("span", { key: 'be6c39efaf203cd93c2490e12a77f4f42f3b41a0', class: "track", role: "switch", "aria-checked": String(this.checked), "aria-disabled": this.disabled || this.loading ? 'true' : undefined, tabIndex: this.disabled || this.loading ? -1 : 0, onKeyDown: this.handleKeyDown }, !this.loading && h("span", { key: '93864d7af34c4ff03563b02d869c0e8cc3fd3d27', class: "thumb" }), this.loading && (h("span", { key: '97e033c8c8eb3ba7d31256fb4adea4a145b8f3ff', class: "loading-indicator", "aria-hidden": "true" }, h("diwa-spinner", { key: '90ee1fdaf77186f249bc4d5afc54e49dbbfc491f', size: "sm" })))), h("span", { key: '17b3ded00758d0a11649d811f2ab78c90302326d', class: "label" }, h("slot", { key: 'a7793c1eafea2282b0ca212ee05a072723b5f9e6' })))));
+    }
+    static get delegatesFocus() { return true; }
+};
+
+export { DiwaSwitch as diwa_switch };
+
+//# sourceMappingURL=diwa-switch.entry.js.map

package/dist/esm/diwa-switch.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-switch.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-switch/diwa-switch-styles.ts","src/components/diwa-switch/diwa-switch.tsx"],"sourcesContent":["import type { SwitchAlignLabel } from './types';\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (\r\n  checked: boolean,\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  alignLabel: SwitchAlignLabel,\r\n  compact: boolean,\r\n): string => {\r\n  // Subtract border-width from inset: `top` on an absolutely-positioned child\r\n  // is measured from the *padding edge* (inside the border), so we must remove\r\n  // the border thickness to land exactly at the visual centre of the track.\r\n  const thumbInset = 'calc((var(--diwa-switch-track-height) - var(--diwa-switch-thumb-size)) / 2 - var(--diwa-border-width-base))';\r\n  const trackBg = checked\r\n    ? 'var(--diwa-accent)'\r\n    : 'var(--diwa-bg-elevated)';\r\n  const trackBorder = checked ? 'var(--diwa-accent)' : 'var(--diwa-border)';\r\n  const thumbTranslate = checked\r\n    ? `translateX(calc(var(--diwa-switch-track-width) - (2 * var(--diwa-border-width-base)) - var(--diwa-switch-thumb-size) - ${thumbInset}))`\r\n    : `translateX(${thumbInset})`;\r\n  const opacityRules = disabled || loading ? 'opacity: 0.5; pointer-events: none;' : '';\r\n  const flexDir = alignLabel === 'start' ? 'row-reverse' : 'row';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n      ${compact ? `\r\n      --diwa-switch-track-width:  32px;\r\n      --diwa-switch-track-height: 18px;\r\n      --diwa-switch-thumb-size:   12px;\r\n      ` : ''}\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .wrapper {\n      display: inline-flex;\n      flex-direction: ${flexDir};\n      align-items: center;\n      gap: var(--diwa-space-3);\n      min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      ${opacityRules}\n    }\n    .track {\r\n      position: relative;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      width: var(--diwa-switch-track-width);\r\n      height: var(--diwa-switch-track-height);\r\n      background: ${trackBg};\r\n      border: var(--diwa-border-width-base) solid ${trackBorder};\r\n      border-radius: var(--diwa-radius-xl);\r\n      box-sizing: border-box;\r\n      flex-shrink: 0;\r\n      transition: background var(--diwa-transition-base), border-color var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\r\n    }\r\n    @media (hover: hover) and (pointer: fine) {\n      .wrapper:hover .track {\n        border-color: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-text-secondary)'};\n        background: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-bg-hover)'};\n      }\n    }\n    ${getFocusStyle('.track')}\r\n    .thumb {\r\n      position: absolute;\r\n      top: ${thumbInset};\r\n      left: 0;\r\n      width: var(--diwa-switch-thumb-size);\r\n      height: var(--diwa-switch-thumb-size);\r\n      background: var(--diwa-bg-surface);\r\n      border-radius: 50%;\r\n      transform: ${thumbTranslate};\r\n      box-shadow: var(--diwa-shadow-sm);\r\n      transition: transform var(--diwa-transition-base), background var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\r\n      pointer-events: none;\r\n    }\r\n    .loading-indicator {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n    .label {\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: var(--diwa-font-size-base);\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-normal);\r\n      color: var(--diwa-text-primary);\r\n      user-select: none;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.track', '.thumb')}\r\n  `;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { SwitchAlignLabel, SwitchUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-switch-styles';\r\n\r\n/**\r\n * @slot default — Label text for the switch.\r\n *\r\n * @controlled {\"props\": [\"checked\"], \"event\": \"update\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-switch',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSwitch {\r\n  /** Whether the switch is in the on state. */\r\n  @Prop({ reflect: true }) checked: boolean = false;\r\n\r\n  /** Disables interaction. No events fire while disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Shows a loading state. Disables interaction while active. */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /** Position of the label relative to the track. */\r\n  @Prop() alignLabel: SwitchAlignLabel = 'end';\r\n\r\n  /** Reduces track and thumb dimensions for use in dense layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when the checked state changes. */\r\n  @Event({ bubbles: false, composed: false }) update!: EventEmitter<SwitchUpdateEventDetail>;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled || this.loading) return;\r\n    this.update.emit({ checked: !this.checked });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (e.key === ' ' || e.key === 'Enter') {\r\n      e.preventDefault();\r\n      this.handleClick();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.checked, this.disabled, this.loading, this.alignLabel, this.compact)} />\r\n        <span\r\n          class=\"wrapper\"\r\n          onClick={this.handleClick}\r\n        >\r\n          <span\r\n            class=\"track\"\r\n            role=\"switch\"\r\n            aria-checked={String(this.checked)}\r\n            aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n            tabIndex={this.disabled || this.loading ? -1 : 0}\r\n            onKeyDown={this.handleKeyDown}\r\n          >\r\n            {!this.loading && <span class=\"thumb\" />}\r\n            {this.loading && (\r\n              <span class=\"loading-indicator\" aria-hidden=\"true\">\r\n                <diwa-spinner size=\"sm\" />\r\n              </span>\r\n            )}\r\n          </span>\r\n          <span class=\"label\">\r\n            <slot />\r\n          </span>\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-table-body.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+
+const getComponentCss = () => `
+  :host { display: table-row-group; }
+  :host([hidden]) { display: none; }
+  ::slotted(:nth-child(even)) {
+    background: var(--diwa-table-stripe-color, transparent);
+  }
+`;
+
+const DiwaTableBody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.theme = 'dark';
+    }
+    render() {
+        return (h(Host, { key: 'a024d6ad7c17f14455ab25b23b700c2f63098d14', role: "rowgroup", "data-theme": this.theme }, h("style", { key: '33868e52817f6d9e238d86074e27876a619f8e6f', innerHTML: getComponentCss() }), h("slot", { key: 'd5306abf932c93ef0d8c760d4f546a4175f8472c' })));
+    }
+};
+
+export { DiwaTableBody as diwa_table_body };
+
+//# sourceMappingURL=diwa-table-body.entry.js.map

package/dist/esm/diwa-table-body.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-table-body.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;CAM5C;;MCAY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1C,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-body/diwa-table-body-styles.ts","src/components/diwa-table-body/diwa-table-body.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host { display: table-row-group; }\r\n  :host([hidden]) { display: none; }\r\n  ::slotted(:nth-child(even)) {\r\n    background: var(--diwa-table-stripe-color, transparent);\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-body-styles';\r\n\r\n/** @component diwa-table-body — Maps to <tbody> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-body', shadow: true })\r\nexport class DiwaTableBody {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"rowgroup\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}