@diwacopilot/components 1.0.0 → 1.1.0

package/dist/diwa-components/p-d0762292.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","isOpen","_disabled","_state","_compact","isUp","getFocusStyle","getReducedMotionStyle","selectIdCounter","DiwaSelect","constructor","hostRef","this","theme","name","state","hideLabel","disabled","required","compact","dropdownDirection","hasFilterResults","dropdownClass","internalId","options","highlightedIndex","onClickOutside","e","path","composedPath","includes","host","blur","emit","onTriggerClick","onTriggerKeyDown","key","preventDefault","triggerEl","focus","visible","getVisibleOptions","Math","min","length","applyHighlight","max","vis","current","dispatchEvent","MouseEvent","bubbles","composed","onFilterInput","term","target","value","toLowerCase","anyVisible","opt","text","_a","textContent","match","style","display","onThemeChange","syncChildThemes","onValueChange","syncSelectionFromValue","onIsOpenChange","open","toggle","updateDropdownDirection","getFirstHighlightIndex","requestAnimationFrame","filterInputEl","clearHighlight","resetFilter","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","componentDidLoad","collectOptions","close","onOptionUpdate","stopPropagation","detail","change","forceUpdate","onSlotChange","Array","from","querySelectorAll","shouldBeSelected","undefined","selected","filter","o","firstSelected","findIndex","forEach","i","highlighted","rect","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","selectedLabel","find","trim","render","labelId","listboxId","hintId","hasMessage","message","hasValue","displayLabel","h","Host","innerHTML","label","querySelector","class","id","part","description","role","tabIndex","onClick","onKeyDown","ref","el","viewBox","fill","stroke","points","type","placeholder","onInput"],"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"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-f22b6145.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as n,H as i}from"./p-ed4017f0.js";const r={neutral:{bg:"var(--diwa-bg-surface)",color:"var(--diwa-text-primary)",border:"var(--diwa-border)"},primary:{bg:"var(--diwa-accent-bg)",color:"var(--diwa-accent)",border:"var(--diwa-accent)"},info:{bg:"var(--diwa-notification-info-soft)",color:"var(--diwa-notification-info)",border:"var(--diwa-color-info-300)"},success:{bg:"var(--diwa-notification-success-soft)",color:"var(--diwa-notification-success)",border:"transparent"},warning:{bg:"var(--diwa-notification-warning-soft)",color:"var(--diwa-notification-warning)",border:"transparent"},error:{bg:"var(--diwa-notification-error-soft)",color:"var(--diwa-notification-error)",border:"transparent"}};const e=(a,n)=>{const{bg:i,color:e,border:o}=r[a];const t=n?"1px":"2px";const d=n?"6px":"10px";const s=n?"var(--diwa-font-size-sm)":"var(--diwa-font-size-md)";return`\n    :host {\n      display: inline-flex;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--diwa-space-1);\n      padding: ${t} ${d};\n      font-family: var(--diwa-font-family-base);\n      font-size: ${s};\n      font-weight: var(--diwa-font-weight-medium);\n      line-height: var(--diwa-line-height-tight);\n      color: ${e};\n      background: ${i};\n      border: var(--diwa-border-width-thin) solid ${o};\n      border-radius: var(--diwa-radius-sm);\n      white-space: nowrap;\n      user-select: none;\n    }\n    .icon {\n      display: flex;\n      align-items: center;\n      flex-shrink: 0;\n    }\n  `};const o=class{constructor(n){a(this,n);this.variant="neutral";this.compact=false;this.theme="dark"}render(){return n(i,{key:"dfa84844b35c6b8235c98e808a9b9dd6d477d1fa","data-theme":this.theme},n("style",{key:"8e4f31a14ed706ab4ed23f29b1cc2e0f62ad2574",innerHTML:e(this.variant,this.compact)}),n("span",{key:"6114522f5907c57eb3431943cd54d74cda2efc2b",class:"tag"},this.icon&&n("span",{key:"a5ab13a007c58c6ad70b3d50f3432513a6c50158",class:"icon"},n("diwa-icon",{key:"d8a27e315e5cd715bb6eddd17fe776d9ac2b04a2",name:this.icon,size:this.compact?12:14})),n("slot",{key:"a0009c67eb1a12d3fb4de706b22d15cc68f17942"})))}};export{o as diwa_tag};
-//# sourceMappingURL=p-f22b6145.entry.js.map

package/dist/diwa-components/p-f22b6145.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["VARIANT_MAP","neutral","bg","color","border","primary","info","success","warning","error","getComponentCss","variant","compact","paddingY","paddingX","fontSize","DiwaTag","constructor","hostRef","this","theme","render","h","Host","key","innerHTML","class","icon","name","size"],"sources":["src/components/diwa-tag/diwa-tag-styles.ts","src/components/diwa-tag/diwa-tag.tsx"],"sourcesContent":["import type { TagVariant } from './types';\r\n\r\nconst VARIANT_MAP: Record<TagVariant, { bg: string; color: string; border: string }> = {\r\n  neutral: {\r\n    bg: 'var(--diwa-bg-surface)',\r\n    color: 'var(--diwa-text-primary)',\r\n    border: 'var(--diwa-border)',\r\n  },\r\n  primary: {\r\n    bg: 'var(--diwa-accent-bg)',\r\n    color: 'var(--diwa-accent)',\r\n    border: 'var(--diwa-accent)',\r\n  },\r\n  info: {\r\n    bg: 'var(--diwa-notification-info-soft)',\r\n    color: 'var(--diwa-notification-info)',\r\n    border: 'var(--diwa-color-info-300)',\r\n  },\r\n  success: {\r\n    bg: 'var(--diwa-notification-success-soft)',\r\n    color: 'var(--diwa-notification-success)',\r\n    border: 'transparent',\r\n  },\r\n  warning: {\r\n    bg: 'var(--diwa-notification-warning-soft)',\r\n    color: 'var(--diwa-notification-warning)',\r\n    border: 'transparent',\r\n  },\r\n  error: {\r\n    bg: 'var(--diwa-notification-error-soft)',\r\n    color: 'var(--diwa-notification-error)',\r\n    border: 'transparent',\r\n  },\r\n};\r\n\r\nexport const getComponentCss = (variant: TagVariant, compact: boolean): string => {\r\n  const { bg, color, border } = VARIANT_MAP[variant];\r\n  const paddingY = compact ? '1px' : '2px';\r\n  const paddingX = compact ? '6px' : '10px';\r\n  const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--diwa-space-1);\r\n      padding: ${paddingY} ${paddingX};\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${fontSize};\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-tight);\r\n      color: ${color};\r\n      background: ${bg};\r\n      border: var(--diwa-border-width-thin) solid ${border};\r\n      border-radius: var(--diwa-radius-sm);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n    }\r\n  `;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TagVariant } from './types';\r\nimport { getComponentCss } from './diwa-tag-styles';\r\n\r\n/**\r\n * @slot default — Tag label content.\r\n */\r\n@Component({\r\n  tag: 'diwa-tag',\r\n  shadow: true,\r\n})\r\nexport class DiwaTag {\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: TagVariant = 'neutral';\r\n\r\n  /** Renders a compact (smaller) version of the tag. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Lucide icon name to display before the label, or omit for no icon. */\r\n  @Prop() icon?: string;\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  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.variant, this.compact)} />\r\n        <span class=\"tag\">\r\n          {this.icon && (\r\n            <span class=\"icon\">\r\n              <diwa-icon name={this.icon} size={this.compact ? 12 : 14} />\r\n            </span>\r\n          )}\r\n          <slot />\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAEA,MAAMA,EAAiF,CACrFC,QAAS,CACPC,GAAI,yBACJC,MAAO,2BACPC,OAAQ,sBAEVC,QAAS,CACPH,GAAI,wBACJC,MAAO,qBACPC,OAAQ,sBAEVE,KAAM,CACJJ,GAAI,qCACJC,MAAO,gCACPC,OAAQ,8BAEVG,QAAS,CACPL,GAAI,wCACJC,MAAO,mCACPC,OAAQ,eAEVI,QAAS,CACPN,GAAI,wCACJC,MAAO,mCACPC,OAAQ,eAEVK,MAAO,CACLP,GAAI,sCACJC,MAAO,iCACPC,OAAQ,gBAIL,MAAMM,EAAkB,CAACC,EAAqBC,KACnD,MAAMV,GAAEA,EAAEC,MAAEA,EAAKC,OAAEA,GAAWJ,EAAYW,GAC1C,MAAME,EAAWD,EAAU,MAAQ,MACnC,MAAME,EAAWF,EAAU,MAAQ,OACnC,MAAMG,EAAWH,EAAU,2BAA6B,2BAExD,MAAO,+NAWQC,KAAYC,0EAEVC,2HAGJZ,yBACKD,yDACgCE,+MAUjD,E,MCzDUY,EAAO,MAJpB,WAAAC,CAAAC,G,UAM2BC,KAAAR,QAAsB,UAGtBQ,KAAAP,QAAmB,MAMnBO,KAAAC,MAAe,M,CAExC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAaL,KAAKC,OACrBE,EAAA,SAAAE,IAAA,2CAAOC,UAAWf,EAAgBS,KAAKR,QAASQ,KAAKP,WACrDU,EAAA,QAAAE,IAAA,2CAAME,MAAM,OACTP,KAAKQ,MACJL,EAAA,QAAAE,IAAA,2CAAME,MAAM,QACVJ,EAAA,aAAAE,IAAA,2CAAWI,KAAMT,KAAKQ,KAAME,KAAMV,KAAKP,QAAU,GAAK,MAG1DU,EAAA,QAAAE,IAAA,8C","ignoreList":[]}