@vielzeug/refine 2.2.5 → 2.4.0

package/dist/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  prop,\n  ref,\n  useEmit,\n  useField,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport {\n  createChoiceField,\n  createInteraction,\n  createListboxDropdown,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenReason,\n} from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport type { ComboboxOptionInput, ComboboxOptionItem, OreComboboxEvents, OreComboboxProps } from './combobox.types';\nimport { filterOptions, getCreatableLabel, makeCreatableValue, parseSlottedOptions } from './combobox-options';\nimport '../../feedback/chip/chip';\nimport '../input/input';\nimport componentStyles from './combobox.css?inline';\n\nexport type { OreComboboxEvents, OreComboboxProps } from './combobox.types';\n\n/**\n * A searchable select field with multiple selection, custom option creation, and large-list support.\n *\n * @element ore-combobox\n *\n * @attr {string} value - Selected value(s). Use comma-separated for multiple.\n * @attr {boolean} multiple - Enable multiple selection\n * @attr {boolean} creatable - Allow users to create custom options from search query\n * @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)\n * @attr {string} placeholder - Placeholder text\n * @attr {boolean} required - Require a non-blank selection for native form validation\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n *\n * @fires input - Emitted when the selection changes.\n * @fires change - Emitted when the selection changes.\n * @fires open-change - Emitted when the dropdown state changes. detail: { open, reason }\n * @fires {CustomEvent} search - Emitted when user types. detail: { query: string }\n *\n * @slot - Slotted combobox options and option groups\n * @cssprop --combobox-dropdown-bg - Dropdown panel background color\n * @cssprop --combobox-dropdown-border-color - Dropdown panel border color\n * @cssprop --combobox-option-hover-bg - Option background on hover\n * @cssprop --combobox-option-focus-bg - Option background when keyboard-focused\n * @cssprop --combobox-option-selected-bg - Option background when selected\n * @cssprop --combobox-option-selected-focus-bg - Option background when selected and focused\n * @cssprop --input-bg - Field background (passed through to ore-input)\n * @cssprop --input-border-color - Field border color (passed through to ore-input)\n *\n * @part wrapper - Root wrapper around the entire field\n * @part label - Label element shown inside or outside the field\n * @part field - Field container that holds the trigger input and clear button\n * @part input - Search input used to filter and select options\n * @part clear-btn - Button that clears the current selection/query\n * @part dropdown - Popup list container for options\n * @part helper-text - Helper text displayed below the field\n * @example\n * ```html\n * <ore-combobox label=\"Country\" name=\"country\">\n *   <ore-combobox-option value=\"us\">United States</ore-combobox-option>\n *   <ore-combobox-option value=\"gb\">United Kingdom</ore-combobox-option>\n *   <ore-combobox-option value=\"de\" disabled>Germany</ore-combobox-option>\n * </ore-combobox>\n * ```\n */\nexport const COMBOBOX_TAG = 'ore-combobox' as const;\ndefine<OreComboboxProps>(COMBOBOX_TAG, {\n  formAssociated: true,\n  props: {\n    autoclose: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    creatable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    'no-filter': prop.bool(false),\n    options: prop.data<ComboboxOptionInput[]>(),\n    placeholder: prop.string('Select...'),\n    required: prop.bool(false),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreComboboxEvents>();\n    const watch = watchEffect;\n\n    const query = signal('');\n\n    // Element refs needed by the listbox dropdown.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null; // set to the ore-input host once it mounts\n    let dropdownEl: HTMLElement | null = null;\n    let listboxEl: HTMLElement | null = null;\n\n    // Ref to the ore-input host; resolved when the template renders.\n    const bitInputRef = ref<HTMLElement>();\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'combobox',\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    // filteredOptions signal declared before optionList so the getItems getter\n    // captures the live signal reference rather than needing a factory indirection.\n    const filteredOptions = signal<ComboboxOptionItem[]>([]);\n\n    const optionList = createListboxDropdown<ComboboxOptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => filteredOptions.value,\n      getOptionId: (index) => `${choice.fieldId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => choice.disabled.value,\n      isItemDisabled: (option) => option.disabled,\n      onClose: (reason) => {\n        emit('open-change', { open: false, reason });\n\n        if (!abortSignal.aborted) restoreQueryFromSelection();\n\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n\n    const { disabled: isDisabled, fieldId: comboId, selectedValues, triggerValidation } = choice;\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const { focusedIndex, isOpen, scrollFocusedIntoView, updatePosition } = optionList;\n    // ── State ────────────────────────────────────────────────────────────────\n    const isMultiple = () => Boolean(props.multiple.value);\n    const isCreatable = () => Boolean(props.creatable.value);\n    const isNoFilter = () => Boolean(props['no-filter'].value);\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    let lastQueryBeforeClear: string | null = null;\n    let isRestoringQuery = false;\n\n    const selectedValue = computed(() => selectedValues.value[0] ?? '');\n\n    // Expose a native-like, string-valued `.value` property on the host.\n    Object.defineProperty(el, 'value', {\n      configurable: true,\n      get: () => choice.formValue.value,\n      set: (val: unknown) => {\n        const v = val as string | string[] | null | undefined;\n\n        if (Array.isArray(v)) {\n          choice.setValues(v.map((entry) => String(entry ?? '')));\n\n          return;\n        }\n\n        if (v == null || v === '') {\n          choice.clear();\n\n          return;\n        }\n\n        choice.setValues(isMultiple() ? String(v).split(',') : [String(v)]);\n      },\n    });\n\n    const hasValue = () => selectedValues.value.length > 0;\n\n    function focusLiveInput() {\n      inputEl?.focus();\n    }\n\n    // ── Options ──────────────────────────────────────────────────────────────\n    const slottedOptions = signal<ComboboxOptionItem[]>([]);\n    const createdOptions = signal<ComboboxOptionItem[]>([]);\n    const isLoading = () => Boolean(props.loading.value);\n\n    function normalizeOption(option: ComboboxOptionInput): ComboboxOptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        iconEl: option.iconEl ?? null,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    // Merged options: explicit prop value overrides slotted options.\n    const allOptions = computed<ComboboxOptionItem[]>(() => {\n      const optionsProp = props.options.value;\n      const base = Array.isArray(optionsProp) ? optionsProp.map(normalizeOption) : slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    const selectionController = {\n      clear: () => {\n        choice.clear();\n      },\n      remove: (key: string) => {\n        choice.removeValue(key);\n      },\n      select: (key: string) => {\n        choice.selectValue(key);\n      },\n      toggle: (key: string) => {\n        choice.toggleValue(key);\n      },\n    };\n\n    function readOptions(elements: Element[] = Array.from(el.children)) {\n      slottedOptions.value = parseSlottedOptions(elements);\n\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        query.value = match?.label ?? selectedValue.value;\n      }\n    }\n\n    // Initialize from light DOM immediately; onMounted/observer keep this in sync afterwards.\n    readOptions();\n\n    watch(() => {\n      const nextOptions = filterOptions(allOptions.value, query.value, isNoFilter());\n\n      filteredOptions.value = isMultiple()\n        ? nextOptions.filter((option) => !selectedValues.value.includes(option.value))\n        : nextOptions;\n    });\n\n    // \"Create\" option shown when creatable + query doesn't match any existing option\n    const creatableLabel = computed(() => {\n      return getCreatableLabel(query.value, isCreatable(), filteredOptions.value);\n    });\n    const inputPlaceholder = () =>\n      isMultiple() && selectedValues.value.length > 0 ? '' : props.placeholder.value || '';\n\n    function emitChange() {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      selectionController.remove(value);\n      emitChange();\n      triggerValidation('change');\n    }\n\n    function restoreQueryFromSelection() {\n      // Keep input text and selected value in sync whenever the popup closes.\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        isRestoringQuery = true;\n        query.value = match?.label ?? '';\n        Promise.resolve().then(() => {\n          isRestoringQuery = false;\n        });\n\n        return;\n      }\n\n      query.value = '';\n    }\n\n    watch(() => {\n      if (isOpen.value && !isMultiple() && selectedValue.value && focusedIndex.value === -1 && query.value === '') {\n        const selectedIndex = filteredOptions.value.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n    });\n\n    // ── Open / Close ─────────────────────────────────────────────────────────\n    function openPopup(clearFilter = true, reason: OverlayOpenReason = 'programmatic') {\n      if (clearFilter) {\n        lastQueryBeforeClear = query.value;\n        query.value = '';\n      }\n\n      // Pre-compute focused index BEFORE opening so the first render has it set\n      if (!isMultiple() && selectedValue.value) {\n        const freshOptions = filterOptions(allOptions.value, '', isNoFilter());\n        const selectedIndex = freshOptions.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n\n      optionList.open(reason);\n\n      if (!isMultiple() && selectedValue.value && focusedIndex.value >= 0) {\n        requestAnimationFrame(() => {\n          scrollFocusedIntoView();\n        });\n      }\n    }\n\n    function closePopup(reason: DropdownCloseReason = 'programmatic') {\n      optionList.close(reason);\n    }\n\n    const fieldPress = createInteraction({\n      disabled: isDisabled,\n      onPress: () => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      },\n    });\n\n    const enterPress = createInteraction({\n      disabled: isDisabled,\n      keys: ['Enter'],\n      onPress: (originalEvent: Event) => {\n        const opts = filteredOptions.value;\n\n        if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) {\n          selectOption(opts[focusedIndex.value], originalEvent);\n        } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) {\n          // Focused on the \"create\" item\n          createOption(query.value, originalEvent);\n        } else if (!isOpen.value) {\n          openPopup(true, 'keyboard');\n        }\n      },\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectOption(opt: ComboboxOptionItem, _originalEvent?: Event) {\n      if (opt.disabled) return;\n\n      if (isMultiple()) {\n        selectionController.toggle(opt.value);\n        query.value = '';\n        emitChange();\n        triggerValidation('change');\n\n        if (props.autoclose.value) {\n          closePopup();\n        }\n\n        // Keep dropdown open in multiple mode (unless autoclose is true)\n        focusLiveInput();\n        requestAnimationFrame(() => focusLiveInput());\n      } else {\n        selectionController.select(opt.value);\n        query.value = opt.label;\n        emitChange();\n        triggerValidation('change');\n        closePopup();\n        focusLiveInput();\n      }\n    }\n    function resolveOptionFromElement(optionEl: HTMLElement): ComboboxOptionItem | null {\n      const indexAttr = optionEl.getAttribute('data-option-index');\n      const index = indexAttr ? Number(indexAttr) : -1;\n\n      if (Number.isInteger(index) && index >= 0 && index < filteredOptions.value.length) {\n        return filteredOptions.value[index] ?? null;\n      }\n\n      const valueAttr = optionEl.getAttribute('data-option-value');\n\n      if (valueAttr) {\n        const byValue = filteredOptions.value.find((option) => option.value === valueAttr);\n\n        if (byValue) return byValue;\n      }\n\n      const labelText = optionEl.querySelector('span')?.textContent?.trim() ?? optionEl.textContent?.trim() ?? '';\n\n      if (!labelText) return null;\n\n      return filteredOptions.value.find((option) => option.label === labelText || option.value === labelText) ?? null;\n    }\n    function clearValue(e: Event) {\n      e.stopPropagation();\n      selectionController.clear();\n      query.value = '';\n      emitChange();\n      triggerValidation('change');\n      focusLiveInput();\n    }\n    function handleInput(e: InputEvent) {\n      const target = e.target as HTMLInputElement;\n      const newValue = target.value;\n\n      // Skip all input processing if we're in the middle of restoring the query\n      // This prevents the clearing logic from firing during close/restore\n      if (isRestoringQuery) {\n        return;\n      }\n\n      if (newValue === query.value) return;\n\n      query.value = newValue;\n\n      if (!isMultiple()) {\n        const currentItem = selectedValues.value[0];\n        const currentLabel = currentItem\n          ? (allOptions.value.find((o) => o.value === currentItem)?.label ?? currentItem)\n          : '';\n\n        // Preserve the current selection while typing. Selection should only\n        // change when a new option is committed or when the user explicitly clears.\n        const isJustOpening = newValue === '' && lastQueryBeforeClear === currentLabel;\n\n        if (isJustOpening) {\n          lastQueryBeforeClear = null;\n        }\n      }\n\n      optionList.navigate('first');\n\n      if (!isOpen.value) openPopup(false, 'keyboard');\n\n      emit('search', { query: target.value });\n    }\n    function handleFocus() {\n      // Intentionally no-op: open only on explicit click or keyboard.\n      // Opening on every focus surprises users tabbing through a form.\n    }\n\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n            optionList.navigate('first');\n          } else {\n            optionList.navigate('next');\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n          } else {\n            optionList.navigate('prev');\n          }\n\n          break;\n        case 'Backspace':\n          // In multiple mode, remove the last chip when the input is empty\n          if (isMultiple() && !query.value && selectedValues.value.length > 0) {\n            choice.removeValue(selectedValues.value[selectedValues.value.length - 1] ?? '');\n            emitChange();\n            triggerValidation('change');\n          }\n\n          break;\n        case 'Enter':\n          enterPress.handleKeydown(e);\n\n          break;\n        case 'Tab':\n          closePopup('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // ── Create option ────────────────────────────────────────────────────────\n    function createOption(rawQuery: string, originalEvent?: Event) {\n      const actualLabel = rawQuery.trim();\n\n      if (!actualLabel) return;\n\n      const value = makeCreatableValue(actualLabel);\n      const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label: actualLabel, value };\n\n      createdOptions.value = [...createdOptions.value, newOpt];\n      selectOption(newOpt, originalEvent);\n    }\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    const observeLightDomOptions = (): (() => void) => {\n      const observer = new MutationObserver(() => {\n        readOptions();\n      });\n\n      observer.observe(el, {\n        attributeFilter: ['disabled', 'label', 'value'],\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      return () => observer.disconnect();\n    };\n\n    const stopObserving = observeLightDomOptions();\n\n    const createListboxListeners = (listEl: HTMLElement): (() => void) => {\n      const handleActivate = (event: Event) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const createRow = target.closest<HTMLElement>('.no-results-create');\n\n        if (createRow) {\n          event.preventDefault();\n          event.stopPropagation();\n          createOption(query.value, event);\n\n          return;\n        }\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option || option.disabled) return;\n\n        selectOption(option, event);\n      };\n\n      const handlePointerMove = (event: PointerEvent) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option) return;\n\n        const focusedIdx = filteredOptions.value.findIndex((candidate) => candidate.value === option.value);\n\n        if (focusedIdx >= 0) {\n          optionList.set(focusedIdx);\n        }\n      };\n\n      listEl.addEventListener('click', handleActivate);\n      listEl.addEventListener('pointermove', handlePointerMove);\n\n      return () => {\n        listEl.removeEventListener('click', handleActivate);\n        listEl.removeEventListener('pointermove', handlePointerMove);\n      };\n    };\n\n    let stopListboxListeners: (() => void) | null = null;\n    let listboxListenersTarget: HTMLElement | null = null;\n\n    const setListboxElement = (el: HTMLElement | null): void => {\n      listboxEl = el;\n\n      if (listboxListenersTarget === el) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n\n      if (!el) return;\n\n      stopListboxListeners = createListboxListeners(el);\n      listboxListenersTarget = el;\n    };\n\n    const ensureListboxListeners = (): void => {\n      if (!listboxEl) return;\n\n      if (listboxListenersTarget === listboxEl && stopListboxListeners) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = createListboxListeners(listboxEl);\n      listboxListenersTarget = listboxEl;\n    };\n\n    watch(() => {\n      ensureListboxListeners();\n\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n\n        updatePosition();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root\n    // and attach all combobox-specific ARIA + event handlers imperatively.\n    // MUST be registered before the ARIA effects below so inputEl is set first\n    // when bitInputRef fires (effects run in registration order).\n    onElement(bitInputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      rawInput.setAttribute('aria-controls', `${comboId}-listbox`);\n\n      const handleInputClick = (): void => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      };\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', handleFocus);\n      rawInput.addEventListener('click', handleInputClick);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', handleFocus);\n        rawInput.removeEventListener('click', handleInputClick);\n      };\n    });\n\n    // Reactively sync combobox-specific ARIA attrs that ore-input doesn't manage.\n    // Uses bitInputRef (a signal) as the gate so the effect re-runs when the\n    // inner input mounts — inputEl is a plain variable and would not trigger re-runs.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      el.setAttribute('aria-expanded', String(isOpen.value));\n\n      if (isDisabled.value) {\n        el.setAttribute('aria-disabled', 'true');\n      } else {\n        el.removeAttribute('aria-disabled');\n      }\n\n      if (props.error.value) {\n        el.setAttribute('aria-invalid', 'true');\n        el.setAttribute('aria-errormessage', `${comboId}-error`);\n      } else {\n        el.removeAttribute('aria-invalid');\n        el.removeAttribute('aria-errormessage');\n      }\n    });\n\n    // Reactively sync the query signal into the raw input value.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      if (el.value !== query.value) el.value = query.value;\n    });\n\n    onCleanup(() => {\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n      stopObserving();\n    });\n\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <slot></slot>\n      <ore-input\n        class=\"trigger\"\n        ref=${bitInputRef}\n        label=\"${() => props.label.value ?? ''}\"\n        placeholder=\"${inputPlaceholder}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        color=\"${inputColor}\"\n        size=\"${inputSize}\"\n        variant=\"${inputVariant}\"\n        rounded=\"${inputRounded}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${isDisabled}\"\n        ?required=\"${() => false}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?success=\"${() => props.success.value}\"\n        name=\"${() => props.name.value ?? ''}\"\n        @click=\"${(e: MouseEvent) => {\n          fieldPress.handleClick(e);\n        }}\"\n        part=\"wrapper\">\n        <div slot=\"prefix\" class=\"chips-row\">\n          <!-- Keep chip list diffing isolated so input node identity stays stable. -->\n          <span class=\"chips-list\">\n            ${() =>\n              (isMultiple() ? selectedValues.value : []).map(\n                (value) => html`\n                  <ore-chip\n                    value=${value}\n                    label=${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    color=\"${props.color}\"\n                    @remove=${removeChip}>\n                    ${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span slot=\"suffix\" class=\"combobox-suffix\" aria-hidden=\"true\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=${() => !hasValue()}\n            @click=\"${clearValue}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <span class=\"combobox-suffix-end\">\n            <span class=\"loader\"></span>\n            <span class=\"chevron\">\n              <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n            </span>\n          </span>\n        </span>\n      </ore-input>\n      <span\n        class=\"sr-only\"\n        id=\"${() => `${comboId}-error`}\"\n        role=\"alert\"\n        aria-live=\"assertive\"\n        ?hidden=\"${() => !props.error.value}\">\n        ${() => props.error.value ?? ''}\n      </span>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${comboId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(el: HTMLElement | null) => {\n          dropdownEl = el;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${comboId}-listbox`}\"\n          style=\"${() =>\n            isOpen.value && filteredOptions.value.length > 0 ? `height:${filteredOptions.value.length * 36}px;` : ''}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"\n          ref=${(el: HTMLElement | null) => {\n            setListboxElement(el);\n          }}>\n          ${() => {\n            if (!isOpen.value) return '';\n\n            if (isLoading()) {\n              return html`\n                <div class=\"dropdown-loading\">Loading...</div>\n              `;\n            }\n\n            if (filteredOptions.value.length === 0) {\n              if (creatableLabel.value) {\n                return html`\n                  <button type=\"button\" class=\"no-results-create\" ?data-focused=${() => focusedIndex.value === -1}>\n                    ${creatableLabel.value}\n                  </button>\n                `;\n              }\n\n              return html`\n                <div class=\"no-results\" role=\"presentation\">No results found</div>\n              `;\n            }\n\n            return filteredOptions.value.map((option, index) => {\n              return html`\n                <div\n                  class=\"option\"\n                  role=\"option\"\n                  id=\"${`${comboId}-opt-${index}`}\"\n                  data-option-index=\"${index}\"\n                  data-option-value=\"${option.value}\"\n                  aria-selected=\"${() =>\n                    String(\n                      isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value,\n                    )}\"\n                  aria-disabled=\"${String(option.disabled)}\"\n                  style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * 36}px);`}\"\n                  ?data-focused=${() => focusedIndex.value === index}\n                  ?data-selected=${() =>\n                    isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value}\n                  ?data-disabled=${option.disabled}>\n                  <span>${option.label}</span>\n                  <span class=\"option-check\" aria-hidden=\"true\">\n                    <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                  </span>\n                </div>\n              `;\n            });\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin, componentStyles],\n}) as unknown as AddEventListeners<OreComboboxEvents>;\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  prop,\n  ref,\n  useEmit,\n  useField,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport {\n  createChoiceField,\n  createInteraction,\n  createListboxDropdown,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenReason,\n} from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport type { ComboboxOptionInput, ComboboxOptionItem, OreComboboxEvents, OreComboboxProps } from './combobox.types';\nimport { filterOptions, getCreatableLabel, makeCreatableValue, parseSlottedOptions } from './combobox-options';\nimport '../../feedback/chip/chip';\nimport '../input/input';\nimport componentStyles from './combobox.css?inline';\n\nexport type { OreComboboxEvents, OreComboboxProps } from './combobox.types';\n\n/**\n * A searchable select field with multiple selection, custom option creation, and large-list support.\n *\n * @element ore-combobox\n *\n * @attr {string} value - Selected value(s). Use comma-separated for multiple.\n * @attr {boolean} multiple - Enable multiple selection\n * @attr {boolean} creatable - Allow users to create custom options from search query\n * @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)\n * @attr {boolean} hide-label - Hide the visible label while retaining its accessible name\n * @attr {string} placeholder - Placeholder text\n * @attr {boolean} required - Require a non-blank selection for native form validation\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n *\n * @fires input - Emitted when the selection changes.\n * @fires change - Emitted when the selection changes.\n * @fires open-change - Emitted when the dropdown state changes. detail: { open, reason }\n * @fires {CustomEvent} search - Emitted when user types. detail: { query: string }\n *\n * @slot - Slotted combobox options and option groups\n * @cssprop --combobox-dropdown-bg - Dropdown panel background color\n * @cssprop --combobox-dropdown-border-color - Dropdown panel border color\n * @cssprop --combobox-option-hover-bg - Option background on hover\n * @cssprop --combobox-option-focus-bg - Option background when keyboard-focused\n * @cssprop --combobox-option-selected-bg - Option background when selected\n * @cssprop --combobox-option-selected-focus-bg - Option background when selected and focused\n * @cssprop --input-bg - Field background (passed through to ore-input)\n * @cssprop --input-border-color - Field border color (passed through to ore-input)\n *\n * @part wrapper - Root wrapper around the entire field\n * @part label - Label element shown inside or outside the field\n * @part field - Field container that holds the trigger input and clear button\n * @part input - Search input used to filter and select options\n * @part clear-btn - Button that clears the current selection/query\n * @part dropdown - Popup list container for options\n * @part helper-text - Helper text displayed below the field\n * @example\n * ```html\n * <ore-combobox label=\"Country\" name=\"country\">\n *   <ore-combobox-option value=\"us\">United States</ore-combobox-option>\n *   <ore-combobox-option value=\"gb\">United Kingdom</ore-combobox-option>\n *   <ore-combobox-option value=\"de\" disabled>Germany</ore-combobox-option>\n * </ore-combobox>\n * ```\n */\nexport const COMBOBOX_TAG = 'ore-combobox' as const;\ndefine<OreComboboxProps>(COMBOBOX_TAG, {\n  formAssociated: true,\n  props: {\n    autoclose: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    creatable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    'hide-label': prop.bool(false),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    'no-filter': prop.bool(false),\n    options: prop.data<ComboboxOptionInput[]>(),\n    placeholder: prop.string('Select...'),\n    required: prop.bool(false),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreComboboxEvents>();\n    const watch = watchEffect;\n\n    const query = signal('');\n\n    // Element refs needed by the listbox dropdown.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null; // set to the ore-input host once it mounts\n    let dropdownEl: HTMLElement | null = null;\n    let listboxEl: HTMLElement | null = null;\n\n    // Ref to the ore-input host; resolved when the template renders.\n    const bitInputRef = ref<HTMLElement>();\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'combobox',\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    // filteredOptions signal declared before optionList so the getItems getter\n    // captures the live signal reference rather than needing a factory indirection.\n    const filteredOptions = signal<ComboboxOptionItem[]>([]);\n\n    const optionList = createListboxDropdown<ComboboxOptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => filteredOptions.value,\n      getOptionId: (index) => `${choice.fieldId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => choice.disabled.value,\n      isItemDisabled: (option) => option.disabled,\n      onClose: (reason) => {\n        emit('open-change', { open: false, reason });\n\n        if (!abortSignal.aborted) restoreQueryFromSelection();\n\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n\n    const { disabled: isDisabled, fieldId: comboId, selectedValues, triggerValidation } = choice;\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const { focusedIndex, isOpen, scrollFocusedIntoView, updatePosition } = optionList;\n    // ── State ────────────────────────────────────────────────────────────────\n    const isMultiple = () => Boolean(props.multiple.value);\n    const isCreatable = () => Boolean(props.creatable.value);\n    const isNoFilter = () => Boolean(props['no-filter'].value);\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    let lastQueryBeforeClear: string | null = null;\n    let isRestoringQuery = false;\n\n    const selectedValue = computed(() => selectedValues.value[0] ?? '');\n\n    // Expose a native-like, string-valued `.value` property on the host.\n    Object.defineProperty(el, 'value', {\n      configurable: true,\n      get: () => choice.formValue.value,\n      set: (val: unknown) => {\n        const v = val as string | string[] | null | undefined;\n\n        if (Array.isArray(v)) {\n          choice.setValues(v.map((entry) => String(entry ?? '')));\n\n          return;\n        }\n\n        if (v == null || v === '') {\n          choice.clear();\n\n          return;\n        }\n\n        choice.setValues(isMultiple() ? String(v).split(',') : [String(v)]);\n      },\n    });\n\n    const hasValue = () => selectedValues.value.length > 0;\n\n    function focusLiveInput() {\n      inputEl?.focus();\n    }\n\n    // ── Options ──────────────────────────────────────────────────────────────\n    const slottedOptions = signal<ComboboxOptionItem[]>([]);\n    const createdOptions = signal<ComboboxOptionItem[]>([]);\n    const isLoading = () => Boolean(props.loading.value);\n\n    function normalizeOption(option: ComboboxOptionInput): ComboboxOptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        disabledReason: option.disabledReason,\n        iconEl: option.iconEl ?? null,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    // Merged options: explicit prop value overrides slotted options.\n    const allOptions = computed<ComboboxOptionItem[]>(() => {\n      const optionsProp = props.options.value;\n      const base = Array.isArray(optionsProp) ? optionsProp.map(normalizeOption) : slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    const selectionController = {\n      clear: () => {\n        choice.clear();\n      },\n      remove: (key: string) => {\n        choice.removeValue(key);\n      },\n      select: (key: string) => {\n        choice.selectValue(key);\n      },\n      toggle: (key: string) => {\n        choice.toggleValue(key);\n      },\n    };\n\n    function readOptions(elements: Element[] = Array.from(el.children)) {\n      slottedOptions.value = parseSlottedOptions(elements);\n\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        query.value = match?.label ?? selectedValue.value;\n      }\n    }\n\n    // Initialize from light DOM immediately; onMounted/observer keep this in sync afterwards.\n    readOptions();\n\n    watch(() => {\n      const nextOptions = filterOptions(allOptions.value, query.value, isNoFilter());\n\n      filteredOptions.value = isMultiple()\n        ? nextOptions.filter((option) => !selectedValues.value.includes(option.value))\n        : nextOptions;\n    });\n\n    // \"Create\" option shown when creatable + query doesn't match any existing option\n    const creatableLabel = computed(() => {\n      return getCreatableLabel(query.value, isCreatable(), filteredOptions.value);\n    });\n    const inputPlaceholder = () =>\n      isMultiple() && selectedValues.value.length > 0 ? '' : props.placeholder.value || '';\n\n    function emitChange() {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      selectionController.remove(value);\n      emitChange();\n      triggerValidation('change');\n    }\n\n    function restoreQueryFromSelection() {\n      // Keep input text and selected value in sync whenever the popup closes.\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        isRestoringQuery = true;\n        query.value = match?.label ?? '';\n        Promise.resolve().then(() => {\n          isRestoringQuery = false;\n        });\n\n        return;\n      }\n\n      query.value = '';\n    }\n\n    watch(() => {\n      if (isOpen.value && !isMultiple() && selectedValue.value && focusedIndex.value === -1 && query.value === '') {\n        const selectedIndex = filteredOptions.value.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n    });\n\n    // ── Open / Close ─────────────────────────────────────────────────────────\n    function openPopup(clearFilter = true, reason: OverlayOpenReason = 'programmatic') {\n      if (clearFilter) {\n        lastQueryBeforeClear = query.value;\n        query.value = '';\n      }\n\n      // Pre-compute focused index BEFORE opening so the first render has it set\n      if (!isMultiple() && selectedValue.value) {\n        const freshOptions = filterOptions(allOptions.value, '', isNoFilter());\n        const selectedIndex = freshOptions.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n\n      optionList.open(reason);\n\n      if (!isMultiple() && selectedValue.value && focusedIndex.value >= 0) {\n        requestAnimationFrame(() => {\n          scrollFocusedIntoView();\n        });\n      }\n    }\n\n    function closePopup(reason: DropdownCloseReason = 'programmatic') {\n      optionList.close(reason);\n    }\n\n    const fieldPress = createInteraction({\n      disabled: isDisabled,\n      onPress: () => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      },\n    });\n\n    const enterPress = createInteraction({\n      disabled: isDisabled,\n      keys: ['Enter'],\n      onPress: (originalEvent: Event) => {\n        const opts = filteredOptions.value;\n\n        if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) {\n          selectOption(opts[focusedIndex.value], originalEvent);\n        } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) {\n          // Focused on the \"create\" item\n          createOption(query.value, originalEvent);\n        } else if (!isOpen.value) {\n          openPopup(true, 'keyboard');\n        }\n      },\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectOption(opt: ComboboxOptionItem, _originalEvent?: Event) {\n      if (opt.disabled) return;\n\n      if (isMultiple()) {\n        selectionController.toggle(opt.value);\n        query.value = '';\n        emitChange();\n        triggerValidation('change');\n\n        if (props.autoclose.value) {\n          closePopup();\n        }\n\n        // Keep dropdown open in multiple mode (unless autoclose is true)\n        focusLiveInput();\n        requestAnimationFrame(() => focusLiveInput());\n      } else {\n        selectionController.select(opt.value);\n        query.value = opt.label;\n        emitChange();\n        triggerValidation('change');\n        closePopup();\n        focusLiveInput();\n      }\n    }\n    function resolveOptionFromElement(optionEl: HTMLElement): ComboboxOptionItem | null {\n      const indexAttr = optionEl.getAttribute('data-option-index');\n      const index = indexAttr ? Number(indexAttr) : -1;\n\n      if (Number.isInteger(index) && index >= 0 && index < filteredOptions.value.length) {\n        return filteredOptions.value[index] ?? null;\n      }\n\n      const valueAttr = optionEl.getAttribute('data-option-value');\n\n      if (valueAttr) {\n        const byValue = filteredOptions.value.find((option) => option.value === valueAttr);\n\n        if (byValue) return byValue;\n      }\n\n      const labelText = optionEl.querySelector('span')?.textContent?.trim() ?? optionEl.textContent?.trim() ?? '';\n\n      if (!labelText) return null;\n\n      return filteredOptions.value.find((option) => option.label === labelText || option.value === labelText) ?? null;\n    }\n    function clearValue(e: Event) {\n      e.stopPropagation();\n      selectionController.clear();\n      query.value = '';\n      emitChange();\n      triggerValidation('change');\n      focusLiveInput();\n    }\n    function handleInput(e: InputEvent) {\n      const target = e.target as HTMLInputElement;\n      const newValue = target.value;\n\n      // Skip all input processing if we're in the middle of restoring the query\n      // This prevents the clearing logic from firing during close/restore\n      if (isRestoringQuery) {\n        return;\n      }\n\n      if (newValue === query.value) return;\n\n      query.value = newValue;\n\n      if (!isMultiple()) {\n        const currentItem = selectedValues.value[0];\n        const currentLabel = currentItem\n          ? (allOptions.value.find((o) => o.value === currentItem)?.label ?? currentItem)\n          : '';\n\n        // Preserve the current selection while typing. Selection should only\n        // change when a new option is committed or when the user explicitly clears.\n        const isJustOpening = newValue === '' && lastQueryBeforeClear === currentLabel;\n\n        if (isJustOpening) {\n          lastQueryBeforeClear = null;\n        }\n      }\n\n      optionList.navigate('first');\n\n      if (!isOpen.value) openPopup(false, 'keyboard');\n\n      emit('search', { query: target.value });\n    }\n    function handleFocus() {\n      // Intentionally no-op: open only on explicit click or keyboard.\n      // Opening on every focus surprises users tabbing through a form.\n    }\n\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n            optionList.navigate('first');\n          } else {\n            optionList.navigate('next');\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n          } else {\n            optionList.navigate('prev');\n          }\n\n          break;\n        case 'Backspace':\n          // In multiple mode, remove the last chip when the input is empty\n          if (isMultiple() && !query.value && selectedValues.value.length > 0) {\n            choice.removeValue(selectedValues.value[selectedValues.value.length - 1] ?? '');\n            emitChange();\n            triggerValidation('change');\n          }\n\n          break;\n        case 'Enter':\n          enterPress.handleKeydown(e);\n\n          break;\n        case 'Tab':\n          closePopup('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // ── Create option ────────────────────────────────────────────────────────\n    function createOption(rawQuery: string, originalEvent?: Event) {\n      const actualLabel = rawQuery.trim();\n\n      if (!actualLabel) return;\n\n      const value = makeCreatableValue(actualLabel);\n      const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label: actualLabel, value };\n\n      createdOptions.value = [...createdOptions.value, newOpt];\n      selectOption(newOpt, originalEvent);\n    }\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    const observeLightDomOptions = (): (() => void) => {\n      const observer = new MutationObserver(() => {\n        readOptions();\n      });\n\n      observer.observe(el, {\n        attributeFilter: ['disabled', 'disabled-reason', 'label', 'value'],\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      return () => observer.disconnect();\n    };\n\n    const stopObserving = observeLightDomOptions();\n\n    const createListboxListeners = (listEl: HTMLElement): (() => void) => {\n      const handleActivate = (event: Event) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const createRow = target.closest<HTMLElement>('.no-results-create');\n\n        if (createRow) {\n          event.preventDefault();\n          event.stopPropagation();\n          createOption(query.value, event);\n\n          return;\n        }\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option || option.disabled) return;\n\n        selectOption(option, event);\n      };\n\n      const handlePointerMove = (event: PointerEvent) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option) return;\n\n        const focusedIdx = filteredOptions.value.findIndex((candidate) => candidate.value === option.value);\n\n        if (focusedIdx >= 0) {\n          optionList.set(focusedIdx);\n        }\n      };\n\n      listEl.addEventListener('click', handleActivate);\n      listEl.addEventListener('pointermove', handlePointerMove);\n\n      return () => {\n        listEl.removeEventListener('click', handleActivate);\n        listEl.removeEventListener('pointermove', handlePointerMove);\n      };\n    };\n\n    let stopListboxListeners: (() => void) | null = null;\n    let listboxListenersTarget: HTMLElement | null = null;\n\n    const setListboxElement = (el: HTMLElement | null): void => {\n      listboxEl = el;\n\n      if (listboxListenersTarget === el) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n\n      if (!el) return;\n\n      stopListboxListeners = createListboxListeners(el);\n      listboxListenersTarget = el;\n    };\n\n    const ensureListboxListeners = (): void => {\n      if (!listboxEl) return;\n\n      if (listboxListenersTarget === listboxEl && stopListboxListeners) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = createListboxListeners(listboxEl);\n      listboxListenersTarget = listboxEl;\n    };\n\n    watch(() => {\n      ensureListboxListeners();\n\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n\n        updatePosition();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root\n    // and attach all combobox-specific ARIA + event handlers imperatively.\n    // MUST be registered before the ARIA effects below so inputEl is set first\n    // when bitInputRef fires (effects run in registration order).\n    onElement(bitInputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      rawInput.setAttribute('aria-controls', `${comboId}-listbox`);\n\n      const handleInputClick = (): void => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      };\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', handleFocus);\n      rawInput.addEventListener('click', handleInputClick);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', handleFocus);\n        rawInput.removeEventListener('click', handleInputClick);\n      };\n    });\n\n    // Reactively sync combobox-specific ARIA attrs that ore-input doesn't manage.\n    // Uses bitInputRef (a signal) as the gate so the effect re-runs when the\n    // inner input mounts — inputEl is a plain variable and would not trigger re-runs.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      el.setAttribute('aria-expanded', String(isOpen.value));\n\n      if (isDisabled.value) {\n        el.setAttribute('aria-disabled', 'true');\n      } else {\n        el.removeAttribute('aria-disabled');\n      }\n\n      if (props.error.value) {\n        el.setAttribute('aria-invalid', 'true');\n        el.setAttribute('aria-errormessage', `${comboId}-error`);\n      } else {\n        el.removeAttribute('aria-invalid');\n        el.removeAttribute('aria-errormessage');\n      }\n    });\n\n    // Reactively sync the query signal into the raw input value.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      if (el.value !== query.value) el.value = query.value;\n    });\n\n    onCleanup(() => {\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n      stopObserving();\n    });\n\n    const hideLabel = () => props['hide-label'].value;\n    const inputAriaLabel = () => (hideLabel() ? (props.label.value ?? '') : null);\n    const inputLabel = () => (hideLabel() ? '' : (props.label.value ?? ''));\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <slot></slot>\n      <ore-input\n        class=\"trigger\"\n        ref=${bitInputRef}\n        aria-label=\"${inputAriaLabel}\"\n        label=\"${inputLabel}\"\n        placeholder=\"${inputPlaceholder}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        color=\"${inputColor}\"\n        size=\"${inputSize}\"\n        variant=\"${inputVariant}\"\n        rounded=\"${inputRounded}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${isDisabled}\"\n        ?required=\"${() => false}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?success=\"${() => props.success.value}\"\n        name=\"${() => props.name.value ?? ''}\"\n        @click=\"${(e: MouseEvent) => {\n          fieldPress.handleClick(e);\n        }}\"\n        part=\"wrapper\">\n        <div slot=\"prefix\" class=\"chips-row\">\n          <!-- Keep chip list diffing isolated so input node identity stays stable. -->\n          <span class=\"chips-list\">\n            ${() =>\n              (isMultiple() ? selectedValues.value : []).map(\n                (value) => html`\n                  <ore-chip\n                    value=${value}\n                    label=${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    color=\"${props.color}\"\n                    @remove=${removeChip}>\n                    ${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span slot=\"suffix\" class=\"combobox-suffix\" aria-hidden=\"true\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=${() => !hasValue()}\n            @click=\"${clearValue}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <span class=\"combobox-suffix-end\">\n            <span class=\"loader\"></span>\n            <span class=\"chevron\">\n              <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n            </span>\n          </span>\n        </span>\n      </ore-input>\n      <span\n        class=\"sr-only\"\n        id=\"${() => `${comboId}-error`}\"\n        role=\"alert\"\n        aria-live=\"assertive\"\n        ?hidden=\"${() => !props.error.value}\">\n        ${() => props.error.value ?? ''}\n      </span>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${comboId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(el: HTMLElement | null) => {\n          dropdownEl = el;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${comboId}-listbox`}\"\n          style=\"${() =>\n            isOpen.value && filteredOptions.value.length > 0 ? `height:${filteredOptions.value.length * 36}px;` : ''}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"\n          ref=${(el: HTMLElement | null) => {\n            setListboxElement(el);\n          }}>\n          ${() => {\n            if (!isOpen.value) return '';\n\n            if (isLoading()) {\n              return html`\n                <div class=\"dropdown-loading\">Loading...</div>\n              `;\n            }\n\n            if (filteredOptions.value.length === 0) {\n              if (creatableLabel.value) {\n                return html`\n                  <button type=\"button\" class=\"no-results-create\" ?data-focused=${() => focusedIndex.value === -1}>\n                    ${creatableLabel.value}\n                  </button>\n                `;\n              }\n\n              return html`\n                <div class=\"no-results\" role=\"presentation\">No results found</div>\n              `;\n            }\n\n            return filteredOptions.value.map((option, index) => {\n              return html`\n                <div\n                  class=\"option\"\n                  role=\"option\"\n                  id=\"${`${comboId}-opt-${index}`}\"\n                  data-option-index=\"${index}\"\n                  data-option-value=\"${option.value}\"\n                  aria-selected=\"${() =>\n                    String(\n                      isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value,\n                    )}\"\n                  aria-disabled=\"${String(option.disabled)}\"\n                  style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * 36}px);`}\"\n                  ?data-focused=${() => focusedIndex.value === index}\n                  ?data-selected=${() =>\n                    isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value}\n                  ?data-disabled=${option.disabled}>\n                  <span>${option.label}</span>\n                  ${\n                    option.disabled && option.disabledReason\n                      ? html`<small class=\"disabled-reason\" title=\"${option.disabledReason}\">${option.disabledReason}</small>`\n                      : html``\n                  }\n                  <span class=\"option-check\" aria-hidden=\"true\">\n                    <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                  </span>\n                </div>\n              `;\n            });\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin, componentStyles],\n}) as unknown as AddEventListeners<OreComboboxEvents>;\n"],"mappings":";;;;;;;;;;;;;AA8EA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,gBAAgB;CAChB,OAAO;EACL,WAAW,EAAK,KAAK,EAAK;EAC1B,OAAO,EAAK,OAAmB;EAC/B,WAAW,EAAK,KAAK,EAAK;EAC1B,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,OAAO;EACpB,cAAc,EAAK,KAAK,EAAK;EAC7B,OAAO,EAAK,OAAO;EACnB,mBAAmB,EAAK,MAAM,CAAC,SAAS,SAAS,GAAY,OAAO;EACpE,SAAS,EAAK,KAAK,EAAK;EACxB,UAAU,EAAK,KAAK,EAAK;EACzB,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,KAAK,EAAK;EAC5B,SAAS,EAAK,KAA4B;EAC1C,aAAa,EAAK,OAAO,WAAW;EACpC,UAAU,EAAK,KAAK,EAAK;EACzB,SAAS,EAAK,OAAoB;EAClC,MAAM,EAAK,OAAsB;EACjC,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAA4D;CAC5E;CACA,MAAM,GAAO;EACX,IAAM,IAAK,GAAQ,GACb,IAAO,GAA2B,GAClC,IAAQ,IAER,IAAQ,EAAO,EAAE,GAGnB,IAAmC,MACnC,IAA8B,MAC9B,IAAiC,MACjC,IAAgC,MAG9B,IAAc,GAAiB,GAE/B,IAAc,GAAgB,CAAS,GACvC,IAAS,GAAkB;GAC/B,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,OAAO,EAAM;GACb,gBAAgB,EAAM;GACtB,UAAU,EAAM;GAChB,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ;GACR,OAAO,EAAM;EACf,CAAC,GAIK,IAAkB,EAA6B,CAAC,CAAC,GAEjD,IAAa,GAA0C;GAC3D,mBAAmB;GACnB,+BAA+B,GAAY,cAA2B,gBAAgB,KAAK;GAC3F,gBAAgB,EAAgB;GAChC,cAAc,MAAU,GAAG,EAAO,QAAQ,OAAO;GACjD,gBAAgB;GAChB,oBAAoB;GACpB,kBAAkB;GAClB,kBAAkB,EAAO,SAAS;GAClC,iBAAiB,MAAW,EAAO;GACnC,UAAU,MAAW;IAKnB,AAJA,EAAK,eAAe;KAAE,MAAM;KAAO;IAAO,CAAC,GAEtC,EAAY,WAAS,GAA0B,GAEpD,EAAO,kBAAkB,MAAM;GACjC;GACA,SAAS,MAAW,EAAK,eAAe;IAAE,MAAM;IAAM;GAAO,CAAC;GAC9D,cAAc;GACd,QAAQ;EACV,CAAC,GAEK,EAAE,UAAU,GAAY,SAAS,GAAS,mBAAgB,yBAAsB;EAEtF,EAAO,gBACL,GAAiB;GACf,UAAU,EAAO;GACjB,SAAS,EAAO;GAChB,cAAc,MAAM;GACpB,mBAAmB,EAAO;GAC1B,UAAU,EAAO;GACjB,OAAO,EAAO;EAChB,CAAC,CACH;EAEA,IAAM,EAAE,iBAAc,WAAQ,2BAAuB,sBAAmB,GAElE,UAAmB,EAAQ,EAAM,SAAS,OAC1C,WAAoB,EAAQ,EAAM,UAAU,OAC5C,UAAmB,EAAQ,EAAM,YAAY,CAAC;EAEpD,GAAK,EACH,MAAM;GACJ,YAAa,EAAO,QAAQ,KAAO,KAAA;GACnC,MAAM,EAAM;GACZ,SAAS,EAAM;EACjB,EACF,CAAC;EAED,IAAI,IAAsC,MACtC,IAAmB,IAEjB,IAAgB,QAAe,EAAe,MAAM,MAAM,EAAE;EAGlE,OAAO,eAAe,GAAI,SAAS;GACjC,cAAc;GACd,WAAW,EAAO,UAAU;GAC5B,MAAM,MAAiB;IACrB,IAAM,IAAI;IAEV,IAAI,MAAM,QAAQ,CAAC,GAAG;KACpB,EAAO,UAAU,EAAE,KAAK,MAAU,OAAO,KAAS,EAAE,CAAC,CAAC;KAEtD;IACF;IAEA,IAAI,KAAK,QAAQ,MAAM,IAAI;KACzB,EAAO,MAAM;KAEb;IACF;IAEA,EAAO,UAAU,EAAW,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;GACpE;EACF,CAAC;EAED,IAAM,WAAiB,EAAe,MAAM,SAAS;EAErD,SAAS,IAAiB;GACxB,GAAS,MAAM;EACjB;EAGA,IAAM,IAAiB,EAA6B,CAAC,CAAC,GAChD,IAAiB,EAA6B,CAAC,CAAC,GAChD,WAAkB,EAAQ,EAAM,QAAQ;EAE9C,SAAS,GAAgB,GAAiD;GACxE,OAAO;IACL,UAAU,EAAQ,EAAO;IACzB,gBAAgB,EAAO;IACvB,QAAQ,EAAO,UAAU;IACzB,OAAO,EAAO,SAAS,EAAO;IAC9B,OAAO,EAAO;GAChB;EACF;EAGA,IAAM,IAAa,QAAqC;GACtD,IAAM,IAAc,EAAM,QAAQ,OAC5B,IAAO,MAAM,QAAQ,CAAW,IAAI,EAAY,IAAI,EAAe,IAAI,EAAe;GAI5F,OAFI,EAAe,MAAM,WAAW,IAAU,IAEvC,CAAC,GAAG,GAAM,GAAG,EAAe,KAAK;EAC1C,CAAC,GAEK,IAAsB;GAC1B,aAAa;IACX,EAAO,MAAM;GACf;GACA,SAAS,MAAgB;IACvB,EAAO,YAAY,CAAG;GACxB;GACA,SAAS,MAAgB;IACvB,EAAO,YAAY,CAAG;GACxB;GACA,SAAS,MAAgB;IACvB,EAAO,YAAY,CAAG;GACxB;EACF;EAEA,SAAS,EAAY,IAAsB,MAAM,KAAK,EAAG,QAAQ,GAAG;GAGlE,IAFA,EAAe,QAAQ,GAAoB,CAAQ,GAE/C,CAAC,EAAW,GAAG;IACjB,IAAM,IAAQ,EAAW,MAAM,MAAM,MAAW,EAAO,UAAU,EAAc,KAAK;IAEpF,EAAM,QAAQ,GAAO,SAAS,EAAc;GAC9C;EACF;EAKA,AAFA,EAAY,GAEZ,QAAY;GACV,IAAM,IAAc,EAAc,EAAW,OAAO,EAAM,OAAO,EAAW,CAAC;GAE7E,EAAgB,QAAQ,EAAW,IAC/B,EAAY,QAAQ,MAAW,CAAC,EAAe,MAAM,SAAS,EAAO,KAAK,CAAC,IAC3E;EACN,CAAC;EAGD,IAAM,IAAiB,QACd,GAAkB,EAAM,OAAO,GAAY,GAAG,EAAgB,KAAK,CAC3E,GACK,WACJ,EAAW,KAAK,EAAe,MAAM,SAAS,IAAI,KAAK,EAAM,YAAY,SAAS;EAEpF,SAAS,IAAa;GAEpB,AADA,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;EACvC;EAEA,SAAS,EAAW,GAAoB;GACtC,EAAM,gBAAgB;GAEtB,IAAM,IAAS,EAA0C,QAAQ;GAE7D,MAAU,KAAA,MAEd,EAAoB,OAAO,CAAK,GAChC,EAAW,GACX,EAAkB,QAAQ;EAC5B;EAEA,SAAS,KAA4B;GAEnC,IAAI,CAAC,EAAW,GAAG;IACjB,IAAM,IAAQ,EAAW,MAAM,MAAM,MAAW,EAAO,UAAU,EAAc,KAAK;IAIpF,AAFA,IAAmB,IACnB,EAAM,QAAQ,GAAO,SAAS,IAC9B,QAAQ,QAAQ,CAAC,CAAC,WAAW;KAC3B,IAAmB;IACrB,CAAC;IAED;GACF;GAEA,EAAM,QAAQ;EAChB;EAEA,QAAY;GACV,IAAI,EAAO,SAAS,CAAC,EAAW,KAAK,EAAc,SAAS,EAAa,UAAU,MAAM,EAAM,UAAU,IAAI;IAC3G,IAAM,IAAgB,EAAgB,MAAM,WAAW,MAAW,EAAO,UAAU,EAAc,KAAK;IAEtG,AAAI,KAAiB,KACnB,EAAW,IAAI,CAAa;GAEhC;EACF,CAAC;EAGD,SAAS,EAAU,IAAc,IAAM,IAA4B,gBAAgB;GAOjF,IANI,MACF,IAAuB,EAAM,OAC7B,EAAM,QAAQ,KAIZ,CAAC,EAAW,KAAK,EAAc,OAAO;IAExC,IAAM,IADe,EAAc,EAAW,OAAO,IAAI,EAAW,CAC9C,CAAA,CAAa,WAAW,MAAW,EAAO,UAAU,EAAc,KAAK;IAE7F,AAAI,KAAiB,KACnB,EAAW,IAAI,CAAa;GAEhC;GAIA,AAFA,EAAW,KAAK,CAAM,GAElB,CAAC,EAAW,KAAK,EAAc,SAAS,EAAa,SAAS,KAChE,4BAA4B;IAC1B,GAAsB;GACxB,CAAC;EAEL;EAEA,SAAS,EAAW,IAA8B,gBAAgB;GAChE,EAAW,MAAM,CAAM;EACzB;EAEA,IAAM,KAAa,EAAkB;GACnC,UAAU;GACV,eAAe;IAGb,AAFK,EAAO,SAAO,EAAU,IAAM,OAAO,GAE1C,EAAe;GACjB;EACF,CAAC,GAEK,KAAa,EAAkB;GACnC,UAAU;GACV,MAAM,CAAC,OAAO;GACd,UAAU,MAAyB;IACjC,IAAM,IAAO,EAAgB;IAE7B,AAAI,EAAO,SAAS,EAAa,SAAS,KAAK,EAAa,QAAQ,EAAK,SACvE,EAAa,EAAK,EAAa,QAAQ,CAAa,IAC3C,EAAO,SAAS,EAAa,UAAU,MAAM,EAAe,QAErE,EAAa,EAAM,OAAO,CAAa,IAC7B,EAAO,SACjB,EAAU,IAAM,UAAU;GAE9B;EACF,CAAC;EAGD,SAAS,EAAa,GAAyB,GAAwB;GACjE,EAAI,aAEJ,EAAW,KACb,EAAoB,OAAO,EAAI,KAAK,GACpC,EAAM,QAAQ,IACd,EAAW,GACX,EAAkB,QAAQ,GAEtB,EAAM,UAAU,SAClB,EAAW,GAIb,EAAe,GACf,4BAA4B,EAAe,CAAC,MAE5C,EAAoB,OAAO,EAAI,KAAK,GACpC,EAAM,QAAQ,EAAI,OAClB,EAAW,GACX,EAAkB,QAAQ,GAC1B,EAAW,GACX,EAAe;EAEnB;EACA,SAAS,EAAyB,GAAkD;GAClF,IAAM,IAAY,EAAS,aAAa,mBAAmB,GACrD,IAAQ,IAAY,OAAO,CAAS,IAAI;GAE9C,IAAI,OAAO,UAAU,CAAK,KAAK,KAAS,KAAK,IAAQ,EAAgB,MAAM,QACzE,OAAO,EAAgB,MAAM,MAAU;GAGzC,IAAM,IAAY,EAAS,aAAa,mBAAmB;GAE3D,IAAI,GAAW;IACb,IAAM,IAAU,EAAgB,MAAM,MAAM,MAAW,EAAO,UAAU,CAAS;IAEjF,IAAI,GAAS,OAAO;GACtB;GAEA,IAAM,IAAY,EAAS,cAAc,MAAM,CAAC,EAAE,aAAa,KAAK,KAAK,EAAS,aAAa,KAAK,KAAK;GAIzG,OAFK,IAEE,EAAgB,MAAM,MAAM,MAAW,EAAO,UAAU,KAAa,EAAO,UAAU,CAAS,KAAK,OAFpF;EAGzB;EACA,SAAS,GAAW,GAAU;GAM5B,AALA,EAAE,gBAAgB,GAClB,EAAoB,MAAM,GAC1B,EAAM,QAAQ,IACd,EAAW,GACX,EAAkB,QAAQ,GAC1B,EAAe;EACjB;EACA,SAAS,EAAY,GAAe;GAClC,IAAM,IAAS,EAAE,QACX,IAAW,EAAO;GAIpB,UAIA,MAAa,EAAM,OAIvB;QAFA,EAAM,QAAQ,GAEV,CAAC,EAAW,GAAG;KACjB,IAAM,IAAc,EAAe,MAAM,IACnC,IAAe,IAChB,EAAW,MAAM,MAAM,MAAM,EAAE,UAAU,CAAW,CAAC,EAAE,SAAS,IACjE;KAMJ,AAFsB,MAAa,MAAM,MAAyB,MAGhE,IAAuB;IAE3B;IAMA,AAJA,EAAW,SAAS,OAAO,GAEtB,EAAO,SAAO,EAAU,IAAO,UAAU,GAE9C,EAAK,UAAU,EAAE,OAAO,EAAO,MAAM,CAAC;GANtC;EAOF;EACA,SAAS,IAAc,CAGvB;EAGA,SAAS,EAAc,GAAkB;GACnC,OAAW,SAEX,GAAW,cAAc,CAAC,GAE9B,QAAQ,EAAE,KAAV;IACE,KAAK;KAGH,AAFA,EAAE,eAAe,GAEZ,EAAO,QAIV,EAAW,SAAS,MAAM,KAH1B,EAAU,IAAM,UAAU,GAC1B,EAAW,SAAS,OAAO;KAK7B;IACF,KAAK;KAGH,AAFA,EAAE,eAAe,GAEZ,EAAO,QAGV,EAAW,SAAS,MAAM,IAF1B,EAAU,IAAM,UAAU;KAK5B;IACF,KAAK;KAEH,AAAI,EAAW,KAAK,CAAC,EAAM,SAAS,EAAe,MAAM,SAAS,MAChE,EAAO,YAAY,EAAe,MAAM,EAAe,MAAM,SAAS,MAAM,EAAE,GAC9E,EAAW,GACX,EAAkB,QAAQ;KAG5B;IACF,KAAK;KACH,GAAW,cAAc,CAAC;KAE1B;IACF,KAAK,OACH,EAAW,cAAc;GAI7B;EACF;EAGA,SAAS,EAAa,GAAkB,GAAuB;GAC7D,IAAM,IAAc,EAAS,KAAK;GAElC,IAAI,CAAC,GAAa;GAGlB,IAAM,IAA6B;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;IAAa,OAD1E,GAAmB,CACuD;GAAM;GAG9F,AADA,EAAe,QAAQ,CAAC,GAAG,EAAe,OAAO,CAAM,GACvD,EAAa,GAAQ,CAAa;EACpC;EAkBA,IAAM,YAf6C;GACjD,IAAM,IAAW,IAAI,uBAAuB;IAC1C,EAAY;GACd,CAAC;GASD,OAPA,EAAS,QAAQ,GAAI;IACnB,iBAAiB;KAAC;KAAY;KAAmB;KAAS;IAAO;IACjE,YAAY;IACZ,WAAW;IACX,SAAS;GACX,CAAC,SAEY,EAAS,WAAW;EACnC,EAEsB,CAAuB,GAEvC,KAA0B,MAAsC;GACpE,IAAM,KAAkB,MAAiB;IACvC,IAAM,IAAS,EAAM;IAErB,IAAI,EAAE,aAAkB,UAAU;IAIlC,IAFkB,EAAO,QAAqB,oBAE1C,GAAW;KAGb,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAa,EAAM,OAAO,CAAK;KAE/B;IACF;IAEA,IAAM,IAAW,EAAO,QAAqB,SAAS;IAEtD,IAAI,CAAC,GAAU;IAGf,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;IAEtB,IAAM,IAAS,EAAyB,CAAQ;IAE5C,AAAC,KAAU,GAAO,YAEtB,EAAa,GAAQ,CAAK;GAC5B,GAEM,KAAqB,MAAwB;IACjD,IAAM,IAAS,EAAM;IAErB,IAAI,EAAE,aAAkB,UAAU;IAElC,IAAM,IAAW,EAAO,QAAqB,SAAS;IAEtD,IAAI,CAAC,GAAU;IAEf,IAAM,IAAS,EAAyB,CAAQ;IAEhD,IAAI,CAAC,GAAQ;IAEb,IAAM,IAAa,EAAgB,MAAM,WAAW,MAAc,EAAU,UAAU,EAAO,KAAK;IAElG,AAAI,KAAc,KAChB,EAAW,IAAI,CAAU;GAE7B;GAKA,OAHA,EAAO,iBAAiB,SAAS,CAAc,GAC/C,EAAO,iBAAiB,eAAe,CAAiB,SAE3C;IAEX,AADA,EAAO,oBAAoB,SAAS,CAAc,GAClD,EAAO,oBAAoB,eAAe,CAAiB;GAC7D;EACF,GAEI,IAA4C,MAC5C,IAA6C,MAE3C,MAAqB,MAAiC;GAC1D,IAAY,GAER,MAA2B,MAE/B,IAAuB,GACvB,IAAuB,MACvB,IAAyB,MAEpB,MAEL,IAAuB,EAAuB,CAAE,GAChD,IAAyB;EAC3B,GAEM,WAAqC;GACpC,MAED,MAA2B,KAAa,MAE5C,IAAuB,GACvB,IAAuB,EAAuB,CAAS,GACvD,IAAyB;EAC3B;EA6FA,AA3FA,QAAY;GAGV,AAFA,GAAuB,GAEnB,EAAO,SACL,KAAc,iBAAiB,KAAc,CAAC,EAAW,QAAQ,eAAe,KAAG,EAAW,YAAY,GAE9G,EAAe,KAEX,KAAc,iBAAiB,KAAc,EAAW,QAAQ,eAAe,KAAG,EAAW,YAAY;EAEjH,CAAC,GAMD,GAAU,IAAc,MAAe;GACrC,IAAU;GAEV,IAAM,IAAW,EAAW,YAAY,cAAgC,OAAO,KAAK;GAEpF,IAAI,CAAC,GAAU;GASf,AAPA,IAAU,GAEV,EAAS,aAAa,QAAQ,UAAU,GACxC,EAAS,aAAa,gBAAgB,KAAK,GAC3C,EAAS,aAAa,qBAAqB,MAAM,GACjD,EAAS,aAAa,iBAAiB,SAAS,GAChD,EAAS,aAAa,cAAc,OAAO,GAC3C,EAAS,aAAa,iBAAiB,GAAG,EAAQ,SAAS;GAE3D,IAAM,UAA+B;IAGnC,AAFK,EAAO,SAAO,EAAU,IAAM,OAAO,GAE1C,EAAe;GACjB;GAOA,OALA,EAAS,iBAAiB,SAAS,CAA4B,GAC/D,EAAS,iBAAiB,WAAW,CAA8B,GACnE,EAAS,iBAAiB,SAAS,CAAW,GAC9C,EAAS,iBAAiB,SAAS,CAAgB,SAEtC;IAMX,AALA,IAAU,MACV,IAAU,MACV,EAAS,oBAAoB,SAAS,CAA4B,GAClE,EAAS,oBAAoB,WAAW,CAA8B,GACtE,EAAS,oBAAoB,SAAS,CAAW,GACjD,EAAS,oBAAoB,SAAS,CAAgB;GACxD;EACF,CAAC,GAKD,QAAY;GACV,IAAI,CAAC,EAAY,OAAO;GAExB,IAAM,IAAK;GAEN,MAEL,EAAG,aAAa,iBAAiB,OAAO,EAAO,KAAK,CAAC,GAEjD,EAAW,QACb,EAAG,aAAa,iBAAiB,MAAM,IAEvC,EAAG,gBAAgB,eAAe,GAGhC,EAAM,MAAM,SACd,EAAG,aAAa,gBAAgB,MAAM,GACtC,EAAG,aAAa,qBAAqB,GAAG,EAAQ,OAAO,MAEvD,EAAG,gBAAgB,cAAc,GACjC,EAAG,gBAAgB,mBAAmB;EAE1C,CAAC,GAGD,QAAY;GACV,IAAI,CAAC,EAAY,OAAO;GAExB,IAAM,IAAK;GAEN,KAED,EAAG,UAAU,EAAM,UAAO,EAAG,QAAQ,EAAM;EACjD,CAAC,GAED,QAAgB;GAId,AAHA,IAAuB,GACvB,IAAuB,MACvB,IAAyB,MACzB,GAAc;EAChB,CAAC;EAED,IAAM,UAAkB,EAAM,aAAa,CAAC;EAS5C,OAAO,CAAI;;;;cAID,EAAY;4BAZQ,EAAU,IAAK,EAAM,MAAM,SAAS,KAAM,KAavC;uBAZP,EAAU,IAAI,KAAM,EAAM,MAAM,SAAS,GAa3C;uBACL,GAAiB;iCACP,EAAM,kBAAkB,CAAC,SAAS,QAAQ;uBAd9C,EAAM,OAAO,SAAS,KAAA,EAevB;sBAdA,EAAM,MAAM,SAAS,KAAA,EAevB;yBAdK,EAAM,SAAS,SAAS,KAAA,EAevB;yBAdD,EAAM,SAAS,SAAS,KAAA,EAevB;wBACR,EAAM,OAAO,SAAS,GAAG;uBAC1B,EAAM,MAAM,SAAS,GAAG;qBAC1B,EAAW;2BACL,GAAM;4BAlBC,EAAM,UAAU,QAAQ,KAAO,KAAA,EAmB5B;0BACX,EAAM,QAAQ,MAAM;sBACxB,EAAM,KAAK,SAAS,GAAG;mBAC1B,MAAkB;GAC3B,GAAW,YAAY,CAAC;EAC1B,EAAE;;;;;qBAMK,EAAW,IAAI,EAAe,QAAQ,CAAC,EAAA,CAAG,KACxC,MAAU,CAAI;;4BAEH,EAAM;4BACN,EAAW,MAAM,MAAM,MAAW,EAAO,UAAU,CAAK,CAAC,EAAE,SAAS,EAAM;;;;6BAIzE,EAAM,MAAM;8BACX,EAAW;sBACnB,EAAW,MAAM,MAAM,MAAW,EAAO,UAAU,CAAK,CAAC,EAAE,SAAS,EAAM;;iBAGlF,EAAE;;;;;;;;;;4BAUY,CAAC,GAAS,EAAE;sBAClB,GAAW;;;;;;;;;;;;;oBAab,GAAG,EAAQ,QAAQ;;;yBAGd,CAAC,EAAM,MAAM,MAAM;gBAC5B,EAAM,MAAM,SAAS,GAAG;;;;;oBAKpB,GAAG,EAAQ,WAAW;;2BAEf,EAAO,MAAM;eACzB,MAA2B;GAChC,IAAa;EACf,EAAE;;;sBAGY,GAAG,EAAQ,UAAU;yBAE/B,EAAO,SAAS,EAAgB,MAAM,SAAS,IAAI,UAAU,EAAgB,MAAM,SAAS,GAAG,OAAO,GAAG;8BACvF,EAAM,MAAM,SAAS,EAAM,YAAY,SAAS,UAAU;iBACvE,MAA2B;GAChC,GAAkB,CAAE;EACtB,EAAE;kBAEK,EAAO,QAER,GAAU,IACL,CAAI;;kBAKT,EAAgB,MAAM,WAAW,IAC/B,EAAe,QACV,CAAI;wFAC6D,EAAa,UAAU,GAAG;sBAC5F,EAAe,MAAM;;oBAKtB,CAAI;;kBAKN,EAAgB,MAAM,KAAK,GAAQ,MACjC,CAAI;;;;wBAID,GAAG,EAAQ,OAAO,IAAQ;uCACX,EAAM;uCACN,EAAO,MAAM;yCAEhC,OACE,EAAW,IAAI,EAAe,MAAM,SAAS,EAAO,KAAK,IAAI,EAAc,UAAU,EAAO,KAC9F,EAAE;mCACa,OAAO,EAAO,QAAQ,EAAE;2BAChC,+DAA+D,IAAQ,GAAG,MAAM;wCACnE,EAAa,UAAU,EAAM;yCAEjD,EAAW,IAAI,EAAe,MAAM,SAAS,EAAO,KAAK,IAAI,EAAc,UAAU,EAAO,MAAM;mCACnF,EAAO,SAAS;0BACzB,EAAO,MAAM;oBAEnB,EAAO,YAAY,EAAO,iBACtB,CAAI,yCAAyC,EAAO,eAAe,IAAI,EAAO,eAAe,YAC7F,CAAI,GACT;;;;;eAMN,IAnDyB,GAoD1B;;;;CAIV;CACA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EAAC;EAAiB;EAAoB;EAAqB;EAAa;CAAe;AACjG,CAAC"}

package/dist/command-palette.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/announcer.cjs");require("./_dev.cjs");const n=require("./core/ore.cjs"),r=require("./core/nav.cjs"),i=require("./overlay/shared/use-dialog.cjs"),a=require("./overlay/command-palette/command-palette-items.cjs"),o=require("./overlay/command-palette/command-palette.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/keymap");var u=e=>e==null?void 0:e===``||e===`true`,d=`ore-command-palette-item`;(0,s.define)(d,{setup(){return s.html``}});var f=`ore-command-palette`;(0,s.define)(f,{props:{"default-open":s.prop.bool(!1),"empty-text":s.prop.string(`No results found.`),items:s.prop.data(),"keep-open-on-select":s.prop.bool(!1),label:s.prop.string(`Command palette`),loading:s.prop.bool(!1),"no-filter":s.prop.bool(!1),open:{default:void 0,parse:u},placeholder:s.prop.string(`Type a command or search…`),shortcut:s.prop.string(`mod+k`)},setup(e){let o=(0,s.getHost)(),u=(0,s.useEmit)(),d=n.lifecycleSignal(s.onCleanup),f=(0,s.ref)(),p=(0,s.ref)(),m=`cmdk-listbox`,h=null,g=(0,c.signal)(``),_=(0,c.signal)([]),v=()=>{_.value=a.parseSlottedItems([...o.children])};v();let y=new MutationObserver(v);y.observe(o,{characterData:!0,childList:!0,subtree:!0}),(0,s.onCleanup)(()=>y.disconnect());let b=(0,c.computed)(()=>{let t=e.items.value;return Array.isArray(t)?t.map(a.normalizeItem):_.value}),x=(0,c.computed)(()=>a.filterItems(b.value,g.value,!!e[`no-filter`].value)),S=(0,c.computed)(()=>a.buildRows(x.value)),C=r.createListControl({getItems:()=>x.value,isItemDisabled:e=>e.disabled,onNavigate:()=>{h?.querySelector(`[data-focused]`)?.scrollIntoView({block:`nearest`})},signal:d}),{focusedIndex:w}=C,T=()=>{g.value=``,C.reset()},{closeWithAnimation:E,overlay:D,requestClose:O,setupNativeListeners:k}=i.useDialogControl({defaultOpen:e[`default-open`],dialogRef:f,getPanelEl:()=>f.value?.querySelector(`.panel`),host:o,initialFocus:(0,c.computed)(()=>`.search-input`),isPersistent:()=>!1,onCleanup:s.onCleanup,onEvent:s.onEvent,onNativeClose:e=>{u(`open-change`,{open:!1,reason:e}),T()},onOpen:e=>{u(`open-change`,{open:!0,reason:e}),C.navigate(`first`)},openProp:e.open,performClose:()=>E(),returnFocus:(0,c.computed)(()=>!0)}),A=(0,l.createKeymap)();A.mount(window),(0,s.onCleanup)(()=>A.dispose());let j=null;(0,c.watch)(e.shortcut,e=>{j?.(),j=null;let t=(e??``).trim();if(t)try{j=A.bind(t,()=>{D.toggle(`keyboard`,`trigger`)})}catch(e){`${t}${e instanceof Error?e.message:String(e)}`}},{immediate:!0}),(0,s.onMounted)(()=>{k()});function M(t){t.disabled||(u(`select`,{item:t,label:t.label,value:t.value}),e[`keep-open-on-select`].value?p.value?.focus():O(`trigger`))}function N(n){let r=n.target.value;g.value=r,C.navigate(`first`),u(`search`,{query:r});let i=x.value.length;t.announce(i===0?e[`empty-text`].value:`${i} result${i===1?``:`s`} found`)}function P(e){if(!C.handleKeydown(e)&&e.key===`Enter`){let t=C.getActiveItem()??x.value.find(e=>!e.disabled);t&&(e.preventDefault(),M(t))}}return s.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/announcer.cjs");require("./_dev.cjs");const n=require("./core/ore.cjs"),r=require("./core/nav.cjs"),i=require("./overlay/shared/use-dialog.cjs"),a=require("./overlay/command-palette/command-palette-items.cjs"),o=require("./overlay/command-palette/command-palette.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/keymap");var u=e=>e==null?void 0:e===``||e===`true`,d=`ore-command-palette-item`;(0,s.define)(d,{setup(){return s.html``}});var f=`ore-command-palette`;(0,s.define)(f,{props:{"default-open":s.prop.bool(!1),"empty-text":s.prop.string(`No results found.`),items:s.prop.data(),"keep-open-on-select":s.prop.bool(!1),label:s.prop.string(`Command palette`),loading:s.prop.bool(!1),"no-filter":s.prop.bool(!1),open:{default:void 0,parse:u},placeholder:s.prop.string(`Type a command or search…`),shortcut:s.prop.string(`mod+k`)},setup(e){let o=(0,s.getHost)(),u=(0,s.useEmit)(),d=n.lifecycleSignal(s.onCleanup),f=(0,s.ref)(),p=(0,s.ref)(),m=`cmdk-listbox`,h=null,g=(0,c.signal)(``),_=(0,c.signal)([]),v=()=>{_.value=a.parseSlottedItems([...o.children])};v();let y=new MutationObserver(v);y.observe(o,{characterData:!0,childList:!0,subtree:!0}),(0,s.onCleanup)(()=>y.disconnect());let b=(0,c.computed)(()=>{let t=e.items.value;return Array.isArray(t)?t.map(a.normalizeItem):_.value}),x=(0,c.computed)(()=>a.filterItems(b.value,g.value,!!e[`no-filter`].value)),S=(0,c.computed)(()=>a.buildRows(x.value)),C=r.createListControl({getItems:()=>x.value,isItemDisabled:e=>e.disabled,onNavigate:()=>{h?.querySelector(`[data-focused]`)?.scrollIntoView({block:`nearest`})},signal:d}),{focusedIndex:w}=C,T=()=>{g.value=``,C.reset()},{closeWithAnimation:E,overlay:D,requestClose:O,setupNativeListeners:k}=i.useDialogControl({defaultOpen:e[`default-open`],dialogRef:f,getPanelEl:()=>f.value?.querySelector(`.panel`),host:o,initialFocus:(0,c.computed)(()=>`.search-input`),isPersistent:()=>!1,onCleanup:s.onCleanup,onEvent:s.onEvent,onNativeClose:e=>{u(`open-change`,{open:!1,reason:e}),T()},onOpen:e=>{u(`open-change`,{open:!0,reason:e}),C.navigate(`first`)},openProp:e.open,performClose:()=>E(),returnFocus:(0,c.computed)(()=>!0)}),A=(0,l.createKeymap)();A.mount(window),(0,s.onCleanup)(()=>A.dispose());let j=null;(0,c.watch)(e.shortcut,e=>{j?.(),j=null;let t=(e??``).trim();if(t)try{j=A.bind(t,()=>{D.toggle(`keyboard`,`trigger`)})}catch(e){`${t}${e instanceof Error?e.message:String(e)}`}},{immediate:!0}),(0,s.onMounted)(()=>{k()});function M(t){t.disabled||(u(`select`,{item:t,label:t.label,value:t.value}),e[`keep-open-on-select`].value?p.value?.focus():O(`trigger`))}function N(n){let r=n.target.value;g.value=r,C.navigate(`first`),u(`search`,{query:r});let i=x.value.length;t.announce(i===0?e[`empty-text`].value:`${i} result${i===1?``:`s`} found`,{document:o.ownerDocument})}function P(e){if(!C.handleKeydown(e)&&e.key===`Enter`){let t=C.getActiveItem()??x.value.find(e=>!e.disabled);t&&(e.preventDefault(),M(t))}}return s.html`
       <dialog ref="${f}" class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
         <div class="panel" part="panel">
           <div class="search" part="search">

package/dist/command-palette.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.cjs","names":[],"sources":["../src/overlay/command-palette/command-palette.ts"],"sourcesContent":["import { createKeymap } from '@vielzeug/keymap';\nimport { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { warn } from '../../_dev';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport type { CommandPaletteItem, OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\nimport { buildRows, filterItems, normalizeItem, parseSlottedItems, splitShortcutKeys } from './command-palette-items';\nimport '../../content/icon/icon';\nimport componentStyles from './command-palette.css?inline';\n\nexport type { OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * A pure data node describing one command. Never rendered directly — `ore-command-palette`\n * reads its attributes/text content and renders the visible row itself.\n *\n * @element ore-command-palette-item\n *\n * @attr {string} value - Value emitted by the `select` event and matched against the search query\n * @attr {string} label - Explicit label text; falls back to the element's text content\n * @attr {string} group - Group heading the item is clustered under\n * @attr {string} shortcut - Display-only keyboard hint rendered at the end of the row, one `<kbd>` per `+`-separated key (e.g. `\"⌘+S\"` renders two keycaps; a literal `+` key isn't representable — spell it out, e.g. `\"Ctrl+Plus\"`)\n * @attr {boolean} disabled - Excludes the item from keyboard navigation and selection\n *\n * @slot icon - Optional leading icon content\n *\n * @example\n * ```html\n * <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n * ```\n */\nexport const COMMAND_PALETTE_ITEM_TAG = 'ore-command-palette-item' as const;\ndefine(COMMAND_PALETTE_ITEM_TAG, {\n  setup() {\n    return html``;\n  },\n});\n\n/**\n * A searchable, keyboard-driven list of commands presented in a centered modal —\n * the \"⌘K\" pattern popularized by editors and productivity apps. Built on the\n * native `<dialog>` element (focus trap, top-layer stacking, `Escape`-to-close)\n * and `@vielzeug/keymap` for the global shortcut that opens it.\n *\n * @element ore-command-palette\n * @element ore-command-palette-item - Slotted command definition (place in default slot)\n *\n * @attr {boolean} open - Controls the open state of the palette\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} label - Accessible label for the dialog (screen-reader-only heading)\n * @attr {string} placeholder - Placeholder text for the search input\n * @attr {string} shortcut - Global keyboard shortcut (keymap syntax) that toggles the palette. Default `\"mod+k\"`; set to `\"\"` to disable\n * @attr {boolean} no-filter - Disable built-in client-side filtering (for server-driven search)\n * @attr {boolean} loading - Shows a loading row below the search input\n * @attr {string} empty-text - Message shown when no item matches the query\n * @attr {boolean} keep-open-on-select - Keep the palette open after an item is selected\n *\n * @fires open-change - Fired when the palette state changes. detail: `{ open, reason }`\n * @fires search - Fired on every keystroke in the search input. detail: `{ query }`\n * @fires select - Fired when a command is chosen (click or `Enter`). detail: `{ value, label, item }`\n *\n * @slot - `<ore-command-palette-item>` elements (alternative/supplement to the `items` prop)\n *\n * @cssprop --command-palette-bg - Panel background color\n * @cssprop --command-palette-border-color - Panel border color\n * @cssprop --command-palette-radius - Panel border radius\n * @cssprop --command-palette-shadow - Panel drop shadow\n * @cssprop --command-palette-max-width - Maximum panel width\n * @cssprop --command-palette-backdrop - Backdrop overlay color\n * @cssprop --command-palette-option-hover-bg - Item background on hover\n * @cssprop --command-palette-option-focus-bg - Item background when keyboard-focused\n *\n * @part dialog - Dialog root container\n * @part panel - Panel container\n * @part input - Search input\n * @part listbox - Listbox of matching commands\n *\n * @example\n * ```html\n * <ore-command-palette label=\"Command palette\" placeholder=\"Type a command…\">\n *   <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n *   <ore-command-palette-item value=\"open-file\" group=\"File\" shortcut=\"⌘+O\">Open File…</ore-command-palette-item>\n *   <ore-command-palette-item value=\"toggle-theme\" group=\"View\">Toggle Theme</ore-command-palette-item>\n * </ore-command-palette>\n * ```\n */\nexport const COMMAND_PALETTE_TAG = 'ore-command-palette' as const;\ndefine<OreCommandPaletteProps>(COMMAND_PALETTE_TAG, {\n  props: {\n    'default-open': prop.bool(false),\n    'empty-text': prop.string('No results found.'),\n    items: prop.data<OreCommandPaletteProps['items']>(),\n    'keep-open-on-select': prop.bool(false),\n    label: prop.string('Command palette'),\n    loading: prop.bool(false),\n    'no-filter': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placeholder: prop.string('Type a command or search…'),\n    shortcut: prop.string('mod+k'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCommandPaletteEvents>();\n    const abortSignal = lifecycleSignal(onCleanup);\n\n    const dialogRef = ref<HTMLDialogElement>();\n    const searchInputRef = ref<HTMLInputElement>();\n    const listboxId = 'cmdk-listbox';\n\n    let listboxEl: HTMLElement | null = null;\n\n    const query = signal('');\n\n    // ── Items: slotted <ore-command-palette-item> elements, merged with the `items` prop ──\n    // Items are pure data nodes (see `ore-command-palette-item`'s own doc comment) — they're\n    // never projected through a `<slot>`, just read directly off the host's light DOM. That\n    // sidesteps `useSlots()`/`slotchange` entirely: a plain MutationObserver on the host\n    // already covers everything `slotchange` would (an item added or removed) *and* the case\n    // it can't — an already-assigned item's own text/attributes changing. For items written\n    // as static, inline HTML, the browser's parser can insert the last item before appending\n    // its text-node child; without watching `characterData`, that would permanently cache an\n    // empty label, since nothing else re-triggers once the element itself stops changing.\n    const slottedItems = signal<CommandPaletteItem[]>([]);\n\n    const reparseSlottedItems = (): void => {\n      slottedItems.value = parseSlottedItems([...el.children]);\n    };\n\n    reparseSlottedItems();\n\n    const lightDomObserver = new MutationObserver(reparseSlottedItems);\n\n    lightDomObserver.observe(el, { characterData: true, childList: true, subtree: true });\n    onCleanup(() => lightDomObserver.disconnect());\n\n    const allItems = computed<CommandPaletteItem[]>(() => {\n      const explicit = props.items.value;\n\n      return Array.isArray(explicit) ? explicit.map(normalizeItem) : slottedItems.value;\n    });\n\n    const filteredItems = computed(() => filterItems(allItems.value, query.value, Boolean(props['no-filter'].value)));\n    const rows = computed(() => buildRows(filteredItems.value));\n\n    // ── Keyboard navigation over the filtered list (Up/Down/Home/End) ──\n    const scrollFocusedIntoView = (): void => {\n      listboxEl?.querySelector<HTMLElement>('[data-focused]')?.scrollIntoView({ block: 'nearest' });\n    };\n\n    const list = createListControl<CommandPaletteItem>({\n      getItems: () => filteredItems.value,\n      isItemDisabled: (item) => item.disabled,\n      onNavigate: scrollFocusedIntoView,\n      signal: abortSignal,\n    });\n    const { focusedIndex } = list;\n\n    // ── Dialog chrome: native <dialog>, focus trap, Escape, backdrop click ──\n    const resetSearch = (): void => {\n      query.value = '';\n      list.reset();\n    };\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: computed(() => '.search-input'),\n      isPersistent: () => false,\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        emit('open-change', { open: false, reason });\n        resetSearch();\n      },\n      onOpen: (reason) => {\n        emit('open-change', { open: true, reason });\n        list.navigate('first');\n      },\n      openProp: props.open,\n      performClose: () => closeWithAnimation(),\n      returnFocus: computed(() => true),\n    });\n\n    // ── Global keyboard shortcut (opens/closes the palette from anywhere) ──\n    const globalKeymap = createKeymap();\n\n    globalKeymap.mount(window);\n    onCleanup(() => globalKeymap.dispose());\n\n    let unbindShortcut: (() => void) | null = null;\n\n    watch(\n      props.shortcut,\n      (shortcutStr) => {\n        unbindShortcut?.();\n        unbindShortcut = null;\n\n        const trimmed = (shortcutStr ?? '').trim();\n\n        if (!trimmed) return;\n\n        try {\n          unbindShortcut = globalKeymap.bind(trimmed, () => {\n            overlay.toggle('keyboard', 'trigger');\n          });\n        } catch (error) {\n          warn(`invalid \"shortcut\" value \"${trimmed}\" — ${error instanceof Error ? error.message : String(error)}`);\n        }\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      setupNativeListeners();\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectItem(item: CommandPaletteItem): void {\n      if (item.disabled) return;\n\n      emit('select', { item, label: item.label, value: item.value });\n\n      if (props['keep-open-on-select'].value) {\n        searchInputRef.value?.focus();\n      } else {\n        requestClose('trigger');\n      }\n    }\n\n    function handleInput(e: Event): void {\n      const value = (e.target as HTMLInputElement).value;\n\n      query.value = value;\n      list.navigate('first');\n      emit('search', { query: value });\n\n      const count = filteredItems.value.length;\n\n      announce(count === 0 ? props['empty-text'].value! : `${count} result${count === 1 ? '' : 's'} found`);\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (list.handleKeydown(e)) return;\n\n      if (e.key === 'Enter') {\n        // `list.navigate('first')` (called on open and on every keystroke) already keeps\n        // the focused row off a disabled item, so this fallback is only ever reached when\n        // nothing has been focused yet — but it mirrors `selectItem`'s own disabled guard\n        // rather than blindly grabbing index 0, in case that navigate-on-open wiring ever\n        // changes.\n        const active = list.getActiveItem() ?? filteredItems.value.find((item) => !item.disabled);\n\n        if (active) {\n          e.preventDefault();\n          selectItem(active);\n        }\n      }\n    }\n\n    return html`\n      <dialog ref=\"${dialogRef}\" class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"panel\" part=\"panel\">\n          <div class=\"search\" part=\"search\">\n            <span class=\"search-icon\" aria-hidden=\"true\"><ore-icon name=\"search\" size=\"18\"></ore-icon></span>\n            <input\n              ref=\"${searchInputRef}\"\n              class=\"search-input\"\n              part=\"input\"\n              type=\"text\"\n              role=\"combobox\"\n              autocomplete=\"off\"\n              spellcheck=\"false\"\n              aria-expanded=\"true\"\n              aria-autocomplete=\"list\"\n              aria-controls=\"${listboxId}\"\n              aria-activedescendant=\"${() => (focusedIndex.value >= 0 ? `${listboxId}-opt-${focusedIndex.value}` : '')}\"\n              placeholder=\"${props.placeholder}\"\n              value=\"${query}\"\n              @input=\"${handleInput}\"\n              @keydown=\"${handleKeydown}\" />\n            <span class=\"search-loader\" ?hidden=\"${() => !props.loading.value}\" aria-hidden=\"true\"></span>\n          </div>\n          <div\n            class=\"listbox\"\n            part=\"listbox\"\n            role=\"listbox\"\n            id=\"${listboxId}\"\n            aria-label=\"Commands\"\n            ref=\"${(listEl: HTMLElement) => {\n              listboxEl = listEl;\n            }}\">\n            <div class=\"empty\" role=\"presentation\" ?hidden=\"${() => props.loading.value || rows.value.length > 0}\">\n              ${() => props['empty-text'].value}\n            </div>\n            ${() =>\n              rows.value.map((row) =>\n                row.type === 'group'\n                  ? html`\n                      <div class=\"group-heading\" role=\"presentation\">${row.group}</div>\n                    `\n                  : html`\n                      <div\n                        class=\"item\"\n                        part=\"item\"\n                        role=\"option\"\n                        id=\"${`${listboxId}-opt-${row.idx}`}\"\n                        aria-selected=\"${() => String(focusedIndex.value === row.idx)}\"\n                        aria-disabled=\"${() => String(row.item.disabled)}\"\n                        ?data-focused=\"${() => focusedIndex.value === row.idx}\"\n                        ?data-disabled=\"${() => row.item.disabled}\"\n                        @click=\"${(e: MouseEvent) => {\n                          e.stopPropagation();\n                          selectItem(row.item);\n                        }}\"\n                        @pointerenter=\"${() => {\n                          list.set(row.idx);\n                        }}\">\n                        ${\n                          row.item.icon\n                            ? html`\n                                <span class=\"item-icon\" aria-hidden=\"true\">\n                                  <ore-icon name=\"${row.item.icon}\" size=\"16\"></ore-icon>\n                                </span>\n                              `\n                            : ''\n                        }\n                        <span class=\"item-label\">${row.item.label}</span>\n                        ${\n                          row.item.shortcut\n                            ? html`\n                                <span class=\"item-shortcut\">\n                                  ${splitShortcutKeys(row.item.shortcut).map(\n                                    (key) => html`\n                                      <kbd>${key}</kbd>\n                                    `,\n                                  )}\n                                </span>\n                              `\n                            : ''\n                        }\n                      </div>\n                    `,\n              )}\n          </div>\n          <div class=\"footer\" part=\"footer\">\n            <span class=\"footer-hint\">\n              <kbd>↑</kbd>\n              <kbd>↓</kbd>\n              Navigate\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Enter</kbd>\n              Select\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Esc</kbd>\n              Close\n            </span>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"command-palette.cjs","names":[],"sources":["../src/overlay/command-palette/command-palette.ts"],"sourcesContent":["import { createKeymap } from '@vielzeug/keymap';\nimport { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { warn } from '../../_dev';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport type { CommandPaletteItem, OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\nimport { buildRows, filterItems, normalizeItem, parseSlottedItems, splitShortcutKeys } from './command-palette-items';\nimport '../../content/icon/icon';\nimport componentStyles from './command-palette.css?inline';\n\nexport type { OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * A pure data node describing one command. Never rendered directly — `ore-command-palette`\n * reads its attributes/text content and renders the visible row itself.\n *\n * @element ore-command-palette-item\n *\n * @attr {string} value - Value emitted by the `select` event and matched against the search query\n * @attr {string} label - Explicit label text; falls back to the element's text content\n * @attr {string} group - Group heading the item is clustered under\n * @attr {string} shortcut - Display-only keyboard hint rendered at the end of the row, one `<kbd>` per `+`-separated key (e.g. `\"⌘+S\"` renders two keycaps; a literal `+` key isn't representable — spell it out, e.g. `\"Ctrl+Plus\"`)\n * @attr {boolean} disabled - Excludes the item from keyboard navigation and selection\n *\n * @slot icon - Optional leading icon content\n *\n * @example\n * ```html\n * <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n * ```\n */\nexport const COMMAND_PALETTE_ITEM_TAG = 'ore-command-palette-item' as const;\ndefine(COMMAND_PALETTE_ITEM_TAG, {\n  setup() {\n    return html``;\n  },\n});\n\n/**\n * A searchable, keyboard-driven list of commands presented in a centered modal —\n * the \"⌘K\" pattern popularized by editors and productivity apps. Built on the\n * native `<dialog>` element (focus trap, top-layer stacking, `Escape`-to-close)\n * and `@vielzeug/keymap` for the global shortcut that opens it.\n *\n * @element ore-command-palette\n * @element ore-command-palette-item - Slotted command definition (place in default slot)\n *\n * @attr {boolean} open - Controls the open state of the palette\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} label - Accessible label for the dialog (screen-reader-only heading)\n * @attr {string} placeholder - Placeholder text for the search input\n * @attr {string} shortcut - Global keyboard shortcut (keymap syntax) that toggles the palette. Default `\"mod+k\"`; set to `\"\"` to disable\n * @attr {boolean} no-filter - Disable built-in client-side filtering (for server-driven search)\n * @attr {boolean} loading - Shows a loading row below the search input\n * @attr {string} empty-text - Message shown when no item matches the query\n * @attr {boolean} keep-open-on-select - Keep the palette open after an item is selected\n *\n * @fires open-change - Fired when the palette state changes. detail: `{ open, reason }`\n * @fires search - Fired on every keystroke in the search input. detail: `{ query }`\n * @fires select - Fired when a command is chosen (click or `Enter`). detail: `{ value, label, item }`\n *\n * @slot - `<ore-command-palette-item>` elements (alternative/supplement to the `items` prop)\n *\n * @cssprop --command-palette-bg - Panel background color\n * @cssprop --command-palette-border-color - Panel border color\n * @cssprop --command-palette-radius - Panel border radius\n * @cssprop --command-palette-shadow - Panel drop shadow\n * @cssprop --command-palette-max-width - Maximum panel width\n * @cssprop --command-palette-backdrop - Backdrop overlay color\n * @cssprop --command-palette-option-hover-bg - Item background on hover\n * @cssprop --command-palette-option-focus-bg - Item background when keyboard-focused\n *\n * @part dialog - Dialog root container\n * @part panel - Panel container\n * @part input - Search input\n * @part listbox - Listbox of matching commands\n *\n * @example\n * ```html\n * <ore-command-palette label=\"Command palette\" placeholder=\"Type a command…\">\n *   <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n *   <ore-command-palette-item value=\"open-file\" group=\"File\" shortcut=\"⌘+O\">Open File…</ore-command-palette-item>\n *   <ore-command-palette-item value=\"toggle-theme\" group=\"View\">Toggle Theme</ore-command-palette-item>\n * </ore-command-palette>\n * ```\n */\nexport const COMMAND_PALETTE_TAG = 'ore-command-palette' as const;\ndefine<OreCommandPaletteProps>(COMMAND_PALETTE_TAG, {\n  props: {\n    'default-open': prop.bool(false),\n    'empty-text': prop.string('No results found.'),\n    items: prop.data<OreCommandPaletteProps['items']>(),\n    'keep-open-on-select': prop.bool(false),\n    label: prop.string('Command palette'),\n    loading: prop.bool(false),\n    'no-filter': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placeholder: prop.string('Type a command or search…'),\n    shortcut: prop.string('mod+k'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCommandPaletteEvents>();\n    const abortSignal = lifecycleSignal(onCleanup);\n\n    const dialogRef = ref<HTMLDialogElement>();\n    const searchInputRef = ref<HTMLInputElement>();\n    const listboxId = 'cmdk-listbox';\n\n    let listboxEl: HTMLElement | null = null;\n\n    const query = signal('');\n\n    // ── Items: slotted <ore-command-palette-item> elements, merged with the `items` prop ──\n    // Items are pure data nodes (see `ore-command-palette-item`'s own doc comment) — they're\n    // never projected through a `<slot>`, just read directly off the host's light DOM. That\n    // sidesteps `useSlots()`/`slotchange` entirely: a plain MutationObserver on the host\n    // already covers everything `slotchange` would (an item added or removed) *and* the case\n    // it can't — an already-assigned item's own text/attributes changing. For items written\n    // as static, inline HTML, the browser's parser can insert the last item before appending\n    // its text-node child; without watching `characterData`, that would permanently cache an\n    // empty label, since nothing else re-triggers once the element itself stops changing.\n    const slottedItems = signal<CommandPaletteItem[]>([]);\n\n    const reparseSlottedItems = (): void => {\n      slottedItems.value = parseSlottedItems([...el.children]);\n    };\n\n    reparseSlottedItems();\n\n    const lightDomObserver = new MutationObserver(reparseSlottedItems);\n\n    lightDomObserver.observe(el, { characterData: true, childList: true, subtree: true });\n    onCleanup(() => lightDomObserver.disconnect());\n\n    const allItems = computed<CommandPaletteItem[]>(() => {\n      const explicit = props.items.value;\n\n      return Array.isArray(explicit) ? explicit.map(normalizeItem) : slottedItems.value;\n    });\n\n    const filteredItems = computed(() => filterItems(allItems.value, query.value, Boolean(props['no-filter'].value)));\n    const rows = computed(() => buildRows(filteredItems.value));\n\n    // ── Keyboard navigation over the filtered list (Up/Down/Home/End) ──\n    const scrollFocusedIntoView = (): void => {\n      listboxEl?.querySelector<HTMLElement>('[data-focused]')?.scrollIntoView({ block: 'nearest' });\n    };\n\n    const list = createListControl<CommandPaletteItem>({\n      getItems: () => filteredItems.value,\n      isItemDisabled: (item) => item.disabled,\n      onNavigate: scrollFocusedIntoView,\n      signal: abortSignal,\n    });\n    const { focusedIndex } = list;\n\n    // ── Dialog chrome: native <dialog>, focus trap, Escape, backdrop click ──\n    const resetSearch = (): void => {\n      query.value = '';\n      list.reset();\n    };\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: computed(() => '.search-input'),\n      isPersistent: () => false,\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        emit('open-change', { open: false, reason });\n        resetSearch();\n      },\n      onOpen: (reason) => {\n        emit('open-change', { open: true, reason });\n        list.navigate('first');\n      },\n      openProp: props.open,\n      performClose: () => closeWithAnimation(),\n      returnFocus: computed(() => true),\n    });\n\n    // ── Global keyboard shortcut (opens/closes the palette from anywhere) ──\n    const globalKeymap = createKeymap();\n\n    globalKeymap.mount(window);\n    onCleanup(() => globalKeymap.dispose());\n\n    let unbindShortcut: (() => void) | null = null;\n\n    watch(\n      props.shortcut,\n      (shortcutStr) => {\n        unbindShortcut?.();\n        unbindShortcut = null;\n\n        const trimmed = (shortcutStr ?? '').trim();\n\n        if (!trimmed) return;\n\n        try {\n          unbindShortcut = globalKeymap.bind(trimmed, () => {\n            overlay.toggle('keyboard', 'trigger');\n          });\n        } catch (error) {\n          warn(`invalid \"shortcut\" value \"${trimmed}\" — ${error instanceof Error ? error.message : String(error)}`);\n        }\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      setupNativeListeners();\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectItem(item: CommandPaletteItem): void {\n      if (item.disabled) return;\n\n      emit('select', { item, label: item.label, value: item.value });\n\n      if (props['keep-open-on-select'].value) {\n        searchInputRef.value?.focus();\n      } else {\n        requestClose('trigger');\n      }\n    }\n\n    function handleInput(e: Event): void {\n      const value = (e.target as HTMLInputElement).value;\n\n      query.value = value;\n      list.navigate('first');\n      emit('search', { query: value });\n\n      const count = filteredItems.value.length;\n\n      announce(count === 0 ? props['empty-text'].value! : `${count} result${count === 1 ? '' : 's'} found`, {\n        document: el.ownerDocument,\n      });\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (list.handleKeydown(e)) return;\n\n      if (e.key === 'Enter') {\n        // `list.navigate('first')` (called on open and on every keystroke) already keeps\n        // the focused row off a disabled item, so this fallback is only ever reached when\n        // nothing has been focused yet — but it mirrors `selectItem`'s own disabled guard\n        // rather than blindly grabbing index 0, in case that navigate-on-open wiring ever\n        // changes.\n        const active = list.getActiveItem() ?? filteredItems.value.find((item) => !item.disabled);\n\n        if (active) {\n          e.preventDefault();\n          selectItem(active);\n        }\n      }\n    }\n\n    return html`\n      <dialog ref=\"${dialogRef}\" class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"panel\" part=\"panel\">\n          <div class=\"search\" part=\"search\">\n            <span class=\"search-icon\" aria-hidden=\"true\"><ore-icon name=\"search\" size=\"18\"></ore-icon></span>\n            <input\n              ref=\"${searchInputRef}\"\n              class=\"search-input\"\n              part=\"input\"\n              type=\"text\"\n              role=\"combobox\"\n              autocomplete=\"off\"\n              spellcheck=\"false\"\n              aria-expanded=\"true\"\n              aria-autocomplete=\"list\"\n              aria-controls=\"${listboxId}\"\n              aria-activedescendant=\"${() => (focusedIndex.value >= 0 ? `${listboxId}-opt-${focusedIndex.value}` : '')}\"\n              placeholder=\"${props.placeholder}\"\n              value=\"${query}\"\n              @input=\"${handleInput}\"\n              @keydown=\"${handleKeydown}\" />\n            <span class=\"search-loader\" ?hidden=\"${() => !props.loading.value}\" aria-hidden=\"true\"></span>\n          </div>\n          <div\n            class=\"listbox\"\n            part=\"listbox\"\n            role=\"listbox\"\n            id=\"${listboxId}\"\n            aria-label=\"Commands\"\n            ref=\"${(listEl: HTMLElement) => {\n              listboxEl = listEl;\n            }}\">\n            <div class=\"empty\" role=\"presentation\" ?hidden=\"${() => props.loading.value || rows.value.length > 0}\">\n              ${() => props['empty-text'].value}\n            </div>\n            ${() =>\n              rows.value.map((row) =>\n                row.type === 'group'\n                  ? html`\n                      <div class=\"group-heading\" role=\"presentation\">${row.group}</div>\n                    `\n                  : html`\n                      <div\n                        class=\"item\"\n                        part=\"item\"\n                        role=\"option\"\n                        id=\"${`${listboxId}-opt-${row.idx}`}\"\n                        aria-selected=\"${() => String(focusedIndex.value === row.idx)}\"\n                        aria-disabled=\"${() => String(row.item.disabled)}\"\n                        ?data-focused=\"${() => focusedIndex.value === row.idx}\"\n                        ?data-disabled=\"${() => row.item.disabled}\"\n                        @click=\"${(e: MouseEvent) => {\n                          e.stopPropagation();\n                          selectItem(row.item);\n                        }}\"\n                        @pointerenter=\"${() => {\n                          list.set(row.idx);\n                        }}\">\n                        ${\n                          row.item.icon\n                            ? html`\n                                <span class=\"item-icon\" aria-hidden=\"true\">\n                                  <ore-icon name=\"${row.item.icon}\" size=\"16\"></ore-icon>\n                                </span>\n                              `\n                            : ''\n                        }\n                        <span class=\"item-label\">${row.item.label}</span>\n                        ${\n                          row.item.shortcut\n                            ? html`\n                                <span class=\"item-shortcut\">\n                                  ${splitShortcutKeys(row.item.shortcut).map(\n                                    (key) => html`\n                                      <kbd>${key}</kbd>\n                                    `,\n                                  )}\n                                </span>\n                              `\n                            : ''\n                        }\n                      </div>\n                    `,\n              )}\n          </div>\n          <div class=\"footer\" part=\"footer\">\n            <span class=\"footer-hint\">\n              <kbd>↑</kbd>\n              <kbd>↓</kbd>\n              Navigate\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Enter</kbd>\n              Select\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Esc</kbd>\n              Close\n            </span>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/command-palette.js

@@ -105,7 +105,7 @@ d(E, {
 			let r = n.target.value;
 			O.value = r, F.navigate("first"), d("search", { query: r });
 			let i = N.value.length;
-			t(i === 0 ? e["empty-text"].value : `${i} result${i === 1 ? "" : "s"} found`);
+			t(i === 0 ? e["empty-text"].value : `${i} result${i === 1 ? "" : "s"} found`, { document: u.ownerDocument });
 		}
 		function K(e) {
 			if (!F.handleKeydown(e) && e.key === "Enter") {

package/dist/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.js","names":[],"sources":["../src/overlay/command-palette/command-palette.ts"],"sourcesContent":["import { createKeymap } from '@vielzeug/keymap';\nimport { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { warn } from '../../_dev';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport type { CommandPaletteItem, OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\nimport { buildRows, filterItems, normalizeItem, parseSlottedItems, splitShortcutKeys } from './command-palette-items';\nimport '../../content/icon/icon';\nimport componentStyles from './command-palette.css?inline';\n\nexport type { OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * A pure data node describing one command. Never rendered directly — `ore-command-palette`\n * reads its attributes/text content and renders the visible row itself.\n *\n * @element ore-command-palette-item\n *\n * @attr {string} value - Value emitted by the `select` event and matched against the search query\n * @attr {string} label - Explicit label text; falls back to the element's text content\n * @attr {string} group - Group heading the item is clustered under\n * @attr {string} shortcut - Display-only keyboard hint rendered at the end of the row, one `<kbd>` per `+`-separated key (e.g. `\"⌘+S\"` renders two keycaps; a literal `+` key isn't representable — spell it out, e.g. `\"Ctrl+Plus\"`)\n * @attr {boolean} disabled - Excludes the item from keyboard navigation and selection\n *\n * @slot icon - Optional leading icon content\n *\n * @example\n * ```html\n * <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n * ```\n */\nexport const COMMAND_PALETTE_ITEM_TAG = 'ore-command-palette-item' as const;\ndefine(COMMAND_PALETTE_ITEM_TAG, {\n  setup() {\n    return html``;\n  },\n});\n\n/**\n * A searchable, keyboard-driven list of commands presented in a centered modal —\n * the \"⌘K\" pattern popularized by editors and productivity apps. Built on the\n * native `<dialog>` element (focus trap, top-layer stacking, `Escape`-to-close)\n * and `@vielzeug/keymap` for the global shortcut that opens it.\n *\n * @element ore-command-palette\n * @element ore-command-palette-item - Slotted command definition (place in default slot)\n *\n * @attr {boolean} open - Controls the open state of the palette\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} label - Accessible label for the dialog (screen-reader-only heading)\n * @attr {string} placeholder - Placeholder text for the search input\n * @attr {string} shortcut - Global keyboard shortcut (keymap syntax) that toggles the palette. Default `\"mod+k\"`; set to `\"\"` to disable\n * @attr {boolean} no-filter - Disable built-in client-side filtering (for server-driven search)\n * @attr {boolean} loading - Shows a loading row below the search input\n * @attr {string} empty-text - Message shown when no item matches the query\n * @attr {boolean} keep-open-on-select - Keep the palette open after an item is selected\n *\n * @fires open-change - Fired when the palette state changes. detail: `{ open, reason }`\n * @fires search - Fired on every keystroke in the search input. detail: `{ query }`\n * @fires select - Fired when a command is chosen (click or `Enter`). detail: `{ value, label, item }`\n *\n * @slot - `<ore-command-palette-item>` elements (alternative/supplement to the `items` prop)\n *\n * @cssprop --command-palette-bg - Panel background color\n * @cssprop --command-palette-border-color - Panel border color\n * @cssprop --command-palette-radius - Panel border radius\n * @cssprop --command-palette-shadow - Panel drop shadow\n * @cssprop --command-palette-max-width - Maximum panel width\n * @cssprop --command-palette-backdrop - Backdrop overlay color\n * @cssprop --command-palette-option-hover-bg - Item background on hover\n * @cssprop --command-palette-option-focus-bg - Item background when keyboard-focused\n *\n * @part dialog - Dialog root container\n * @part panel - Panel container\n * @part input - Search input\n * @part listbox - Listbox of matching commands\n *\n * @example\n * ```html\n * <ore-command-palette label=\"Command palette\" placeholder=\"Type a command…\">\n *   <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n *   <ore-command-palette-item value=\"open-file\" group=\"File\" shortcut=\"⌘+O\">Open File…</ore-command-palette-item>\n *   <ore-command-palette-item value=\"toggle-theme\" group=\"View\">Toggle Theme</ore-command-palette-item>\n * </ore-command-palette>\n * ```\n */\nexport const COMMAND_PALETTE_TAG = 'ore-command-palette' as const;\ndefine<OreCommandPaletteProps>(COMMAND_PALETTE_TAG, {\n  props: {\n    'default-open': prop.bool(false),\n    'empty-text': prop.string('No results found.'),\n    items: prop.data<OreCommandPaletteProps['items']>(),\n    'keep-open-on-select': prop.bool(false),\n    label: prop.string('Command palette'),\n    loading: prop.bool(false),\n    'no-filter': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placeholder: prop.string('Type a command or search…'),\n    shortcut: prop.string('mod+k'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCommandPaletteEvents>();\n    const abortSignal = lifecycleSignal(onCleanup);\n\n    const dialogRef = ref<HTMLDialogElement>();\n    const searchInputRef = ref<HTMLInputElement>();\n    const listboxId = 'cmdk-listbox';\n\n    let listboxEl: HTMLElement | null = null;\n\n    const query = signal('');\n\n    // ── Items: slotted <ore-command-palette-item> elements, merged with the `items` prop ──\n    // Items are pure data nodes (see `ore-command-palette-item`'s own doc comment) — they're\n    // never projected through a `<slot>`, just read directly off the host's light DOM. That\n    // sidesteps `useSlots()`/`slotchange` entirely: a plain MutationObserver on the host\n    // already covers everything `slotchange` would (an item added or removed) *and* the case\n    // it can't — an already-assigned item's own text/attributes changing. For items written\n    // as static, inline HTML, the browser's parser can insert the last item before appending\n    // its text-node child; without watching `characterData`, that would permanently cache an\n    // empty label, since nothing else re-triggers once the element itself stops changing.\n    const slottedItems = signal<CommandPaletteItem[]>([]);\n\n    const reparseSlottedItems = (): void => {\n      slottedItems.value = parseSlottedItems([...el.children]);\n    };\n\n    reparseSlottedItems();\n\n    const lightDomObserver = new MutationObserver(reparseSlottedItems);\n\n    lightDomObserver.observe(el, { characterData: true, childList: true, subtree: true });\n    onCleanup(() => lightDomObserver.disconnect());\n\n    const allItems = computed<CommandPaletteItem[]>(() => {\n      const explicit = props.items.value;\n\n      return Array.isArray(explicit) ? explicit.map(normalizeItem) : slottedItems.value;\n    });\n\n    const filteredItems = computed(() => filterItems(allItems.value, query.value, Boolean(props['no-filter'].value)));\n    const rows = computed(() => buildRows(filteredItems.value));\n\n    // ── Keyboard navigation over the filtered list (Up/Down/Home/End) ──\n    const scrollFocusedIntoView = (): void => {\n      listboxEl?.querySelector<HTMLElement>('[data-focused]')?.scrollIntoView({ block: 'nearest' });\n    };\n\n    const list = createListControl<CommandPaletteItem>({\n      getItems: () => filteredItems.value,\n      isItemDisabled: (item) => item.disabled,\n      onNavigate: scrollFocusedIntoView,\n      signal: abortSignal,\n    });\n    const { focusedIndex } = list;\n\n    // ── Dialog chrome: native <dialog>, focus trap, Escape, backdrop click ──\n    const resetSearch = (): void => {\n      query.value = '';\n      list.reset();\n    };\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: computed(() => '.search-input'),\n      isPersistent: () => false,\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        emit('open-change', { open: false, reason });\n        resetSearch();\n      },\n      onOpen: (reason) => {\n        emit('open-change', { open: true, reason });\n        list.navigate('first');\n      },\n      openProp: props.open,\n      performClose: () => closeWithAnimation(),\n      returnFocus: computed(() => true),\n    });\n\n    // ── Global keyboard shortcut (opens/closes the palette from anywhere) ──\n    const globalKeymap = createKeymap();\n\n    globalKeymap.mount(window);\n    onCleanup(() => globalKeymap.dispose());\n\n    let unbindShortcut: (() => void) | null = null;\n\n    watch(\n      props.shortcut,\n      (shortcutStr) => {\n        unbindShortcut?.();\n        unbindShortcut = null;\n\n        const trimmed = (shortcutStr ?? '').trim();\n\n        if (!trimmed) return;\n\n        try {\n          unbindShortcut = globalKeymap.bind(trimmed, () => {\n            overlay.toggle('keyboard', 'trigger');\n          });\n        } catch (error) {\n          warn(`invalid \"shortcut\" value \"${trimmed}\" — ${error instanceof Error ? error.message : String(error)}`);\n        }\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      setupNativeListeners();\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectItem(item: CommandPaletteItem): void {\n      if (item.disabled) return;\n\n      emit('select', { item, label: item.label, value: item.value });\n\n      if (props['keep-open-on-select'].value) {\n        searchInputRef.value?.focus();\n      } else {\n        requestClose('trigger');\n      }\n    }\n\n    function handleInput(e: Event): void {\n      const value = (e.target as HTMLInputElement).value;\n\n      query.value = value;\n      list.navigate('first');\n      emit('search', { query: value });\n\n      const count = filteredItems.value.length;\n\n      announce(count === 0 ? props['empty-text'].value! : `${count} result${count === 1 ? '' : 's'} found`);\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (list.handleKeydown(e)) return;\n\n      if (e.key === 'Enter') {\n        // `list.navigate('first')` (called on open and on every keystroke) already keeps\n        // the focused row off a disabled item, so this fallback is only ever reached when\n        // nothing has been focused yet — but it mirrors `selectItem`'s own disabled guard\n        // rather than blindly grabbing index 0, in case that navigate-on-open wiring ever\n        // changes.\n        const active = list.getActiveItem() ?? filteredItems.value.find((item) => !item.disabled);\n\n        if (active) {\n          e.preventDefault();\n          selectItem(active);\n        }\n      }\n    }\n\n    return html`\n      <dialog ref=\"${dialogRef}\" class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"panel\" part=\"panel\">\n          <div class=\"search\" part=\"search\">\n            <span class=\"search-icon\" aria-hidden=\"true\"><ore-icon name=\"search\" size=\"18\"></ore-icon></span>\n            <input\n              ref=\"${searchInputRef}\"\n              class=\"search-input\"\n              part=\"input\"\n              type=\"text\"\n              role=\"combobox\"\n              autocomplete=\"off\"\n              spellcheck=\"false\"\n              aria-expanded=\"true\"\n              aria-autocomplete=\"list\"\n              aria-controls=\"${listboxId}\"\n              aria-activedescendant=\"${() => (focusedIndex.value >= 0 ? `${listboxId}-opt-${focusedIndex.value}` : '')}\"\n              placeholder=\"${props.placeholder}\"\n              value=\"${query}\"\n              @input=\"${handleInput}\"\n              @keydown=\"${handleKeydown}\" />\n            <span class=\"search-loader\" ?hidden=\"${() => !props.loading.value}\" aria-hidden=\"true\"></span>\n          </div>\n          <div\n            class=\"listbox\"\n            part=\"listbox\"\n            role=\"listbox\"\n            id=\"${listboxId}\"\n            aria-label=\"Commands\"\n            ref=\"${(listEl: HTMLElement) => {\n              listboxEl = listEl;\n            }}\">\n            <div class=\"empty\" role=\"presentation\" ?hidden=\"${() => props.loading.value || rows.value.length > 0}\">\n              ${() => props['empty-text'].value}\n            </div>\n            ${() =>\n              rows.value.map((row) =>\n                row.type === 'group'\n                  ? html`\n                      <div class=\"group-heading\" role=\"presentation\">${row.group}</div>\n                    `\n                  : html`\n                      <div\n                        class=\"item\"\n                        part=\"item\"\n                        role=\"option\"\n                        id=\"${`${listboxId}-opt-${row.idx}`}\"\n                        aria-selected=\"${() => String(focusedIndex.value === row.idx)}\"\n                        aria-disabled=\"${() => String(row.item.disabled)}\"\n                        ?data-focused=\"${() => focusedIndex.value === row.idx}\"\n                        ?data-disabled=\"${() => row.item.disabled}\"\n                        @click=\"${(e: MouseEvent) => {\n                          e.stopPropagation();\n                          selectItem(row.item);\n                        }}\"\n                        @pointerenter=\"${() => {\n                          list.set(row.idx);\n                        }}\">\n                        ${\n                          row.item.icon\n                            ? html`\n                                <span class=\"item-icon\" aria-hidden=\"true\">\n                                  <ore-icon name=\"${row.item.icon}\" size=\"16\"></ore-icon>\n                                </span>\n                              `\n                            : ''\n                        }\n                        <span class=\"item-label\">${row.item.label}</span>\n                        ${\n                          row.item.shortcut\n                            ? html`\n                                <span class=\"item-shortcut\">\n                                  ${splitShortcutKeys(row.item.shortcut).map(\n                                    (key) => html`\n                                      <kbd>${key}</kbd>\n                                    `,\n                                  )}\n                                </span>\n                              `\n                            : ''\n                        }\n                      </div>\n                    `,\n              )}\n          </div>\n          <div class=\"footer\" part=\"footer\">\n            <span class=\"footer-hint\">\n              <kbd>↑</kbd>\n              <kbd>↓</kbd>\n              Navigate\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Enter</kbd>\n              Select\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Esc</kbd>\n              Close\n            </span>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"command-palette.js","names":[],"sources":["../src/overlay/command-palette/command-palette.ts"],"sourcesContent":["import { createKeymap } from '@vielzeug/keymap';\nimport { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { warn } from '../../_dev';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport type { CommandPaletteItem, OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\nimport { buildRows, filterItems, normalizeItem, parseSlottedItems, splitShortcutKeys } from './command-palette-items';\nimport '../../content/icon/icon';\nimport componentStyles from './command-palette.css?inline';\n\nexport type { OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * A pure data node describing one command. Never rendered directly — `ore-command-palette`\n * reads its attributes/text content and renders the visible row itself.\n *\n * @element ore-command-palette-item\n *\n * @attr {string} value - Value emitted by the `select` event and matched against the search query\n * @attr {string} label - Explicit label text; falls back to the element's text content\n * @attr {string} group - Group heading the item is clustered under\n * @attr {string} shortcut - Display-only keyboard hint rendered at the end of the row, one `<kbd>` per `+`-separated key (e.g. `\"⌘+S\"` renders two keycaps; a literal `+` key isn't representable — spell it out, e.g. `\"Ctrl+Plus\"`)\n * @attr {boolean} disabled - Excludes the item from keyboard navigation and selection\n *\n * @slot icon - Optional leading icon content\n *\n * @example\n * ```html\n * <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n * ```\n */\nexport const COMMAND_PALETTE_ITEM_TAG = 'ore-command-palette-item' as const;\ndefine(COMMAND_PALETTE_ITEM_TAG, {\n  setup() {\n    return html``;\n  },\n});\n\n/**\n * A searchable, keyboard-driven list of commands presented in a centered modal —\n * the \"⌘K\" pattern popularized by editors and productivity apps. Built on the\n * native `<dialog>` element (focus trap, top-layer stacking, `Escape`-to-close)\n * and `@vielzeug/keymap` for the global shortcut that opens it.\n *\n * @element ore-command-palette\n * @element ore-command-palette-item - Slotted command definition (place in default slot)\n *\n * @attr {boolean} open - Controls the open state of the palette\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} label - Accessible label for the dialog (screen-reader-only heading)\n * @attr {string} placeholder - Placeholder text for the search input\n * @attr {string} shortcut - Global keyboard shortcut (keymap syntax) that toggles the palette. Default `\"mod+k\"`; set to `\"\"` to disable\n * @attr {boolean} no-filter - Disable built-in client-side filtering (for server-driven search)\n * @attr {boolean} loading - Shows a loading row below the search input\n * @attr {string} empty-text - Message shown when no item matches the query\n * @attr {boolean} keep-open-on-select - Keep the palette open after an item is selected\n *\n * @fires open-change - Fired when the palette state changes. detail: `{ open, reason }`\n * @fires search - Fired on every keystroke in the search input. detail: `{ query }`\n * @fires select - Fired when a command is chosen (click or `Enter`). detail: `{ value, label, item }`\n *\n * @slot - `<ore-command-palette-item>` elements (alternative/supplement to the `items` prop)\n *\n * @cssprop --command-palette-bg - Panel background color\n * @cssprop --command-palette-border-color - Panel border color\n * @cssprop --command-palette-radius - Panel border radius\n * @cssprop --command-palette-shadow - Panel drop shadow\n * @cssprop --command-palette-max-width - Maximum panel width\n * @cssprop --command-palette-backdrop - Backdrop overlay color\n * @cssprop --command-palette-option-hover-bg - Item background on hover\n * @cssprop --command-palette-option-focus-bg - Item background when keyboard-focused\n *\n * @part dialog - Dialog root container\n * @part panel - Panel container\n * @part input - Search input\n * @part listbox - Listbox of matching commands\n *\n * @example\n * ```html\n * <ore-command-palette label=\"Command palette\" placeholder=\"Type a command…\">\n *   <ore-command-palette-item value=\"new-file\" group=\"File\" shortcut=\"⌘+N\">New File</ore-command-palette-item>\n *   <ore-command-palette-item value=\"open-file\" group=\"File\" shortcut=\"⌘+O\">Open File…</ore-command-palette-item>\n *   <ore-command-palette-item value=\"toggle-theme\" group=\"View\">Toggle Theme</ore-command-palette-item>\n * </ore-command-palette>\n * ```\n */\nexport const COMMAND_PALETTE_TAG = 'ore-command-palette' as const;\ndefine<OreCommandPaletteProps>(COMMAND_PALETTE_TAG, {\n  props: {\n    'default-open': prop.bool(false),\n    'empty-text': prop.string('No results found.'),\n    items: prop.data<OreCommandPaletteProps['items']>(),\n    'keep-open-on-select': prop.bool(false),\n    label: prop.string('Command palette'),\n    loading: prop.bool(false),\n    'no-filter': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placeholder: prop.string('Type a command or search…'),\n    shortcut: prop.string('mod+k'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCommandPaletteEvents>();\n    const abortSignal = lifecycleSignal(onCleanup);\n\n    const dialogRef = ref<HTMLDialogElement>();\n    const searchInputRef = ref<HTMLInputElement>();\n    const listboxId = 'cmdk-listbox';\n\n    let listboxEl: HTMLElement | null = null;\n\n    const query = signal('');\n\n    // ── Items: slotted <ore-command-palette-item> elements, merged with the `items` prop ──\n    // Items are pure data nodes (see `ore-command-palette-item`'s own doc comment) — they're\n    // never projected through a `<slot>`, just read directly off the host's light DOM. That\n    // sidesteps `useSlots()`/`slotchange` entirely: a plain MutationObserver on the host\n    // already covers everything `slotchange` would (an item added or removed) *and* the case\n    // it can't — an already-assigned item's own text/attributes changing. For items written\n    // as static, inline HTML, the browser's parser can insert the last item before appending\n    // its text-node child; without watching `characterData`, that would permanently cache an\n    // empty label, since nothing else re-triggers once the element itself stops changing.\n    const slottedItems = signal<CommandPaletteItem[]>([]);\n\n    const reparseSlottedItems = (): void => {\n      slottedItems.value = parseSlottedItems([...el.children]);\n    };\n\n    reparseSlottedItems();\n\n    const lightDomObserver = new MutationObserver(reparseSlottedItems);\n\n    lightDomObserver.observe(el, { characterData: true, childList: true, subtree: true });\n    onCleanup(() => lightDomObserver.disconnect());\n\n    const allItems = computed<CommandPaletteItem[]>(() => {\n      const explicit = props.items.value;\n\n      return Array.isArray(explicit) ? explicit.map(normalizeItem) : slottedItems.value;\n    });\n\n    const filteredItems = computed(() => filterItems(allItems.value, query.value, Boolean(props['no-filter'].value)));\n    const rows = computed(() => buildRows(filteredItems.value));\n\n    // ── Keyboard navigation over the filtered list (Up/Down/Home/End) ──\n    const scrollFocusedIntoView = (): void => {\n      listboxEl?.querySelector<HTMLElement>('[data-focused]')?.scrollIntoView({ block: 'nearest' });\n    };\n\n    const list = createListControl<CommandPaletteItem>({\n      getItems: () => filteredItems.value,\n      isItemDisabled: (item) => item.disabled,\n      onNavigate: scrollFocusedIntoView,\n      signal: abortSignal,\n    });\n    const { focusedIndex } = list;\n\n    // ── Dialog chrome: native <dialog>, focus trap, Escape, backdrop click ──\n    const resetSearch = (): void => {\n      query.value = '';\n      list.reset();\n    };\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: computed(() => '.search-input'),\n      isPersistent: () => false,\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        emit('open-change', { open: false, reason });\n        resetSearch();\n      },\n      onOpen: (reason) => {\n        emit('open-change', { open: true, reason });\n        list.navigate('first');\n      },\n      openProp: props.open,\n      performClose: () => closeWithAnimation(),\n      returnFocus: computed(() => true),\n    });\n\n    // ── Global keyboard shortcut (opens/closes the palette from anywhere) ──\n    const globalKeymap = createKeymap();\n\n    globalKeymap.mount(window);\n    onCleanup(() => globalKeymap.dispose());\n\n    let unbindShortcut: (() => void) | null = null;\n\n    watch(\n      props.shortcut,\n      (shortcutStr) => {\n        unbindShortcut?.();\n        unbindShortcut = null;\n\n        const trimmed = (shortcutStr ?? '').trim();\n\n        if (!trimmed) return;\n\n        try {\n          unbindShortcut = globalKeymap.bind(trimmed, () => {\n            overlay.toggle('keyboard', 'trigger');\n          });\n        } catch (error) {\n          warn(`invalid \"shortcut\" value \"${trimmed}\" — ${error instanceof Error ? error.message : String(error)}`);\n        }\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      setupNativeListeners();\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectItem(item: CommandPaletteItem): void {\n      if (item.disabled) return;\n\n      emit('select', { item, label: item.label, value: item.value });\n\n      if (props['keep-open-on-select'].value) {\n        searchInputRef.value?.focus();\n      } else {\n        requestClose('trigger');\n      }\n    }\n\n    function handleInput(e: Event): void {\n      const value = (e.target as HTMLInputElement).value;\n\n      query.value = value;\n      list.navigate('first');\n      emit('search', { query: value });\n\n      const count = filteredItems.value.length;\n\n      announce(count === 0 ? props['empty-text'].value! : `${count} result${count === 1 ? '' : 's'} found`, {\n        document: el.ownerDocument,\n      });\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (list.handleKeydown(e)) return;\n\n      if (e.key === 'Enter') {\n        // `list.navigate('first')` (called on open and on every keystroke) already keeps\n        // the focused row off a disabled item, so this fallback is only ever reached when\n        // nothing has been focused yet — but it mirrors `selectItem`'s own disabled guard\n        // rather than blindly grabbing index 0, in case that navigate-on-open wiring ever\n        // changes.\n        const active = list.getActiveItem() ?? filteredItems.value.find((item) => !item.disabled);\n\n        if (active) {\n          e.preventDefault();\n          selectItem(active);\n        }\n      }\n    }\n\n    return html`\n      <dialog ref=\"${dialogRef}\" class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"panel\" part=\"panel\">\n          <div class=\"search\" part=\"search\">\n            <span class=\"search-icon\" aria-hidden=\"true\"><ore-icon name=\"search\" size=\"18\"></ore-icon></span>\n            <input\n              ref=\"${searchInputRef}\"\n              class=\"search-input\"\n              part=\"input\"\n              type=\"text\"\n              role=\"combobox\"\n              autocomplete=\"off\"\n              spellcheck=\"false\"\n              aria-expanded=\"true\"\n              aria-autocomplete=\"list\"\n              aria-controls=\"${listboxId}\"\n              aria-activedescendant=\"${() => (focusedIndex.value >= 0 ? `${listboxId}-opt-${focusedIndex.value}` : '')}\"\n              placeholder=\"${props.placeholder}\"\n              value=\"${query}\"\n              @input=\"${handleInput}\"\n              @keydown=\"${handleKeydown}\" />\n            <span class=\"search-loader\" ?hidden=\"${() => !props.loading.value}\" aria-hidden=\"true\"></span>\n          </div>\n          <div\n            class=\"listbox\"\n            part=\"listbox\"\n            role=\"listbox\"\n            id=\"${listboxId}\"\n            aria-label=\"Commands\"\n            ref=\"${(listEl: HTMLElement) => {\n              listboxEl = listEl;\n            }}\">\n            <div class=\"empty\" role=\"presentation\" ?hidden=\"${() => props.loading.value || rows.value.length > 0}\">\n              ${() => props['empty-text'].value}\n            </div>\n            ${() =>\n              rows.value.map((row) =>\n                row.type === 'group'\n                  ? html`\n                      <div class=\"group-heading\" role=\"presentation\">${row.group}</div>\n                    `\n                  : html`\n                      <div\n                        class=\"item\"\n                        part=\"item\"\n                        role=\"option\"\n                        id=\"${`${listboxId}-opt-${row.idx}`}\"\n                        aria-selected=\"${() => String(focusedIndex.value === row.idx)}\"\n                        aria-disabled=\"${() => String(row.item.disabled)}\"\n                        ?data-focused=\"${() => focusedIndex.value === row.idx}\"\n                        ?data-disabled=\"${() => row.item.disabled}\"\n                        @click=\"${(e: MouseEvent) => {\n                          e.stopPropagation();\n                          selectItem(row.item);\n                        }}\"\n                        @pointerenter=\"${() => {\n                          list.set(row.idx);\n                        }}\">\n                        ${\n                          row.item.icon\n                            ? html`\n                                <span class=\"item-icon\" aria-hidden=\"true\">\n                                  <ore-icon name=\"${row.item.icon}\" size=\"16\"></ore-icon>\n                                </span>\n                              `\n                            : ''\n                        }\n                        <span class=\"item-label\">${row.item.label}</span>\n                        ${\n                          row.item.shortcut\n                            ? html`\n                                <span class=\"item-shortcut\">\n                                  ${splitShortcutKeys(row.item.shortcut).map(\n                                    (key) => html`\n                                      <kbd>${key}</kbd>\n                                    `,\n                                  )}\n                                </span>\n                              `\n                            : ''\n                        }\n                      </div>\n                    `,\n              )}\n          </div>\n          <div class=\"footer\" part=\"footer\">\n            <span class=\"footer-hint\">\n              <kbd>↑</kbd>\n              <kbd>↓</kbd>\n              Navigate\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Enter</kbd>\n              Select\n            </span>\n            <span class=\"footer-hint\">\n              <kbd>Esc</kbd>\n              Close\n            </span>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/content/index.d.ts

@@ -26,6 +26,8 @@ export type { OrePaginationEvents, OrePaginationProps } from './pagination/pagin
 export { PAGINATION_TAG } from './pagination/pagination';
 export type { OreSeparatorProps } from './separator/separator';
 export { SEPARATOR_TAG } from './separator/separator';
+export type { OreStatsProps, StatsTrendDirection, StatsVariant } from './stats/stats';
+export { STATS_TAG } from './stats/stats';
 export type { OreStepProps } from './stepper/step';
 export { STEP_TAG } from './stepper/step';
 export type { OreStepperEvents, OreStepperProps, StepperContext } from './stepper/stepper';

package/dist/content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACvE,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACvE,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/content/list/list-item.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_actions-width:var(--list-item-actions-width,var(--size-24));color:var(--color-contrast-700);display:block;position:relative;overflow:hidden}.row{z-index:1;box-sizing:border-box;gap:var(--_gap,var(--size-4));width:100%;min-height:var(--_min-height,var(--size-4));padding:var(--_padding,var(--size-2-5) var(--size-4));font-size:var(--_font-size,var(--text-sm));touch-action:pan-y;cursor:default;background:var(--list-item-bg,var(--color-canvas));transform:translateX(calc(var(--_swipe-x,0) * var(--_actions-width)));transition:var(--_motion-transition,transform var(--transition-fast), background var(--transition-fast));border:none;outline:none;align-items:center;display:flex;position:relative}.row:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left;padding-right:var(--_padding-inline-end,var(--size-6))}.row:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right;padding-left:var(--_padding-inline-end,var(--size-6))}.leading,.trailing{flex-shrink:0;align-items:center;display:flex}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-400);white-space:nowrap;display:block;overflow:hidden}.description:empty{display:none}.row:hover{background:var(--list-item-hover-bg,var(--color-contrast-100))}.row:focus-visible{outline:var(--focus-ring);outline-offset:-2px}:host([selected]) .row{color:var(--color-primary);background:var(--list-item-selected-bg,color-mix(in oklch, var(--color-primary) 10%, transparent))}:host([disabled]){pointer-events:none;opacity:.6}.actions{width:var(--_actions-width);transition:var(--_motion-transition,transform var(--transition-fast));align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.actions ::slotted(*){flex:1;height:100%}.actions-left{transform:translateX(calc((var(--_swipe-x,0) - 1) * 100%));left:0}.actions-right{transform:translateX(calc((var(--_swipe-x,0) + 1) * 100%));right:0}:host([revealed=left]){--_swipe-x:1}:host([revealed=right]){--_swipe-x:-1}:host:has(.actions-left:focus-within){--_swipe-x:1}:host:has(.actions-right:focus-within){--_swipe-x:-1}:host([data-dragging]) .row,:host([data-dragging]) .actions-left,:host([data-dragging]) .actions-right{transition:none}:host([data-confirming]) .actions-left,:host([data-confirming]) .actions-right{filter:saturate(1.4)brightness(.94)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_actions-width:var(--list-item-actions-width,var(--size-24));color:var(--color-contrast-700);display:block;position:relative;overflow:hidden}.row{z-index:1;box-sizing:border-box;gap:var(--_gap,var(--size-4));width:100%;min-height:var(--_min-height,var(--size-4));padding:var(--_padding,var(--size-2-5) var(--size-4));font-size:var(--_font-size,var(--text-sm));touch-action:pan-y;cursor:default;background:var(--list-item-bg,var(--color-canvas));transform:translateX(calc(var(--_swipe-x,0) * var(--_actions-width)));transition:var(--_motion-transition,transform var(--transition-fast), background var(--transition-fast));border:none;outline:none;align-items:center;display:flex;position:relative}.row:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left;padding-right:var(--_padding-inline-end,var(--size-6))}.row:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right;padding-left:var(--_padding-inline-end,var(--size-6))}:host([data-two-line]) .row{min-height:var(--_min-height-two-line,var(--size-18))}:host([actionable]) .row{cursor:pointer}.leading,.trailing{flex-shrink:0;align-items:center;display:flex}.leading[hidden],.trailing[hidden]{display:none}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);white-space:nowrap;display:block;overflow:hidden}.description:empty{display:none}.row:hover{background:var(--list-item-hover-bg,var(--color-contrast-100))}.row:focus-visible{outline:var(--focus-ring);outline-offset:-2px}:host([selected]) .row{color:var(--color-primary);background:var(--list-item-selected-bg,color-mix(in oklch, var(--color-primary) 10%, transparent))}:host([disabled]){pointer-events:none;opacity:.6}.actions{width:var(--_actions-width);transition:var(--_motion-transition,transform var(--transition-fast));align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.actions ::slotted(*){flex:1;height:100%}.actions-left{transform:translateX(calc((var(--_swipe-x,0) - 1) * 100%));left:0}.actions-right{transform:translateX(calc((var(--_swipe-x,0) + 1) * 100%));right:0}:host([revealed=left]){--_swipe-x:1}:host([revealed=right]){--_swipe-x:-1}:host:has(.actions-left:focus-within){--_swipe-x:1}:host:has(.actions-right:focus-within){--_swipe-x:-1}:host([data-dragging]) .row,:host([data-dragging]) .actions-left,:host([data-dragging]) .actions-right{transition:none}:host([data-confirming]) .actions-left,:host([data-confirming]) .actions-right{filter:saturate(1.4)brightness(.94)}}`;exports.default=e;
 //# sourceMappingURL=list-item.css.cjs.map

package/dist/content/list/list-item.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.css.cjs","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array — they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, 0) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel — the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size — pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid — `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD) — set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"list-item.css.cjs","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array — they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, 0) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  :host([data-two-line]) .row {\n    min-height: var(--_min-height-two-line, var(--size-18));\n  }\n\n  :host([actionable]) .row {\n    cursor: pointer;\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .leading[hidden],\n  .trailing[hidden] {\n    display: none;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel — the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size — pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid — `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD) — set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n}\n"],"mappings":""}

package/dist/content/list/list-item.css.js

@@ -1,5 +1,5 @@
 //#region src/content/list/list-item.css?inline
-var e = "@layer refine.base{:host{--_actions-width:var(--list-item-actions-width,var(--size-24));color:var(--color-contrast-700);display:block;position:relative;overflow:hidden}.row{z-index:1;box-sizing:border-box;gap:var(--_gap,var(--size-4));width:100%;min-height:var(--_min-height,var(--size-4));padding:var(--_padding,var(--size-2-5) var(--size-4));font-size:var(--_font-size,var(--text-sm));touch-action:pan-y;cursor:default;background:var(--list-item-bg,var(--color-canvas));transform:translateX(calc(var(--_swipe-x,0) * var(--_actions-width)));transition:var(--_motion-transition,transform var(--transition-fast), background var(--transition-fast));border:none;outline:none;align-items:center;display:flex;position:relative}.row:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left;padding-right:var(--_padding-inline-end,var(--size-6))}.row:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right;padding-left:var(--_padding-inline-end,var(--size-6))}.leading,.trailing{flex-shrink:0;align-items:center;display:flex}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-400);white-space:nowrap;display:block;overflow:hidden}.description:empty{display:none}.row:hover{background:var(--list-item-hover-bg,var(--color-contrast-100))}.row:focus-visible{outline:var(--focus-ring);outline-offset:-2px}:host([selected]) .row{color:var(--color-primary);background:var(--list-item-selected-bg,color-mix(in oklch, var(--color-primary) 10%, transparent))}:host([disabled]){pointer-events:none;opacity:.6}.actions{width:var(--_actions-width);transition:var(--_motion-transition,transform var(--transition-fast));align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.actions ::slotted(*){flex:1;height:100%}.actions-left{transform:translateX(calc((var(--_swipe-x,0) - 1) * 100%));left:0}.actions-right{transform:translateX(calc((var(--_swipe-x,0) + 1) * 100%));right:0}:host([revealed=left]){--_swipe-x:1}:host([revealed=right]){--_swipe-x:-1}:host:has(.actions-left:focus-within){--_swipe-x:1}:host:has(.actions-right:focus-within){--_swipe-x:-1}:host([data-dragging]) .row,:host([data-dragging]) .actions-left,:host([data-dragging]) .actions-right{transition:none}:host([data-confirming]) .actions-left,:host([data-confirming]) .actions-right{filter:saturate(1.4)brightness(.94)}}";
+var e = "@layer refine.base{:host{--_actions-width:var(--list-item-actions-width,var(--size-24));color:var(--color-contrast-700);display:block;position:relative;overflow:hidden}.row{z-index:1;box-sizing:border-box;gap:var(--_gap,var(--size-4));width:100%;min-height:var(--_min-height,var(--size-4));padding:var(--_padding,var(--size-2-5) var(--size-4));font-size:var(--_font-size,var(--text-sm));touch-action:pan-y;cursor:default;background:var(--list-item-bg,var(--color-canvas));transform:translateX(calc(var(--_swipe-x,0) * var(--_actions-width)));transition:var(--_motion-transition,transform var(--transition-fast), background var(--transition-fast));border:none;outline:none;align-items:center;display:flex;position:relative}.row:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left;padding-right:var(--_padding-inline-end,var(--size-6))}.row:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right;padding-left:var(--_padding-inline-end,var(--size-6))}:host([data-two-line]) .row{min-height:var(--_min-height-two-line,var(--size-18))}:host([actionable]) .row{cursor:pointer}.leading,.trailing{flex-shrink:0;align-items:center;display:flex}.leading[hidden],.trailing[hidden]{display:none}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);white-space:nowrap;display:block;overflow:hidden}.description:empty{display:none}.row:hover{background:var(--list-item-hover-bg,var(--color-contrast-100))}.row:focus-visible{outline:var(--focus-ring);outline-offset:-2px}:host([selected]) .row{color:var(--color-primary);background:var(--list-item-selected-bg,color-mix(in oklch, var(--color-primary) 10%, transparent))}:host([disabled]){pointer-events:none;opacity:.6}.actions{width:var(--_actions-width);transition:var(--_motion-transition,transform var(--transition-fast));align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.actions ::slotted(*){flex:1;height:100%}.actions-left{transform:translateX(calc((var(--_swipe-x,0) - 1) * 100%));left:0}.actions-right{transform:translateX(calc((var(--_swipe-x,0) + 1) * 100%));right:0}:host([revealed=left]){--_swipe-x:1}:host([revealed=right]){--_swipe-x:-1}:host:has(.actions-left:focus-within){--_swipe-x:1}:host:has(.actions-right:focus-within){--_swipe-x:-1}:host([data-dragging]) .row,:host([data-dragging]) .actions-left,:host([data-dragging]) .actions-right{transition:none}:host([data-confirming]) .actions-left,:host([data-confirming]) .actions-right{filter:saturate(1.4)brightness(.94)}}";
 //#endregion
 export { e as default };