@vielzeug/refine 1.5.3 → 1.7.0

package/dist/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  bind,\n  getHost,\n  onCleanup,\n  onElement,\n  useEmit,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { AddEventListeners, ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport type { OreComboboxEvents, OreComboboxProps, ComboboxOptionInput, ComboboxOptionItem } from './combobox.types';\n\nimport {\n  lifecycleSignal,\n  createChoiceField,\n  createInteraction,\n  createOptionList,\n  type DialogCloseReason,\n  type OverlayOpenReason,\n} from '../../headless';\nimport { reducedMotionMixin, srOnlyMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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 `<ore-form>` validation\n *\n * @fires {CustomEvent} change - Emitted when selection changes. detail: { value: string | string[], values: string[], labels: string[] }\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    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 formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const query = signal('');\n\n    // Element refs needed by the composite option-list factory.\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: fCtxProps.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      validateOn: formCtx?.validateOn,\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 = createOptionList<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      onClose: (reason) => {\n        emit('close', { reason });\n\n        if (!abortSignal.aborted) restoreQueryFromSelection();\n\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open', { 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: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    let lastQueryBeforeClear: string | null = null;\n    let isRestoringQuery = false;\n\n    // Convenience getter for single-select\n    const selectedValue = computed(() => selectedValues.value[0] ?? '');\n\n    // Expose .value as a JS property accessor on the host element\n    Object.defineProperty(el, 'value', {\n      configurable: true,\n      get: () => (isMultiple() ? selectedValues.value : selectedValue.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([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    const selectedValueItems = computed(() => selectedValues.value);\n    const selectedLabelItems = computed(() =>\n      selectedValues.value.map((value) => allOptions.value.find((option) => option.value === value)?.label ?? value),\n    );\n\n    function emitChange(originalEvent?: Event) {\n      emit('change', { labels: selectedLabelItems.value, originalEvent, values: selectedValueItems.value });\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(event);\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: DialogCloseReason = '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(originalEvent);\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(originalEvent);\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(e);\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(e);\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 handleShadowOptionPointerMove = (event: PointerEvent): void => {\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 || option.disabled) 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    const shadowRoot = el.shadowRoot;\n\n    if (shadowRoot) {\n      shadowRoot.addEventListener('pointermove', handleShadowOptionPointerMove as EventListener);\n    }\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) 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      shadowRoot?.removeEventListener('pointermove', handleShadowOptionPointerMove as EventListener);\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n      stopObserving();\n    });\n\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.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        :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 ?? ''}</span\n      >\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`<div class=\"dropdown-loading\">Loading...</div>`;\n            }\n\n            if (filteredOptions.value.length === 0) {\n              if (creatableLabel.value) {\n                return html`<button\n                  type=\"button\"\n                  class=\"no-results-create\"\n                  ?data-focused=${() => focusedIndex.value === -1}>\n                  ${creatableLabel.value}\n                </button>`;\n              }\n\n              return html`<div class=\"no-results\" role=\"presentation\">No results found</div>`;\n            }\n\n            return filteredOptions.value.map((option, index) => {\n              return html`<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        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, srOnlyMixin, componentStyles],\n}) as unknown as AddEventListeners<OreComboboxEvents>;\n"],"mappings":";;;;;;;;;;;;AA6EA,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,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,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAA4D;CAC5E;CACA,MAAM,GAAO;EACX,IAAM,IAAK,GAAQ,GACb,IAAO,GAA2B,GAClC,IAAQ,IAER,IAAU,GAAO,EAAQ,GACzB,IAAY,GAAe,GAAO,CAAO,GACzC,IAAQ,EAAO,EAAE,GAGnB,IAAmC,MACnC,IAA8B,MAC9B,IAAiC,MACjC,IAAgC,MAG9B,IAAc,GAAiB,GAE/B,IAAc,EAAgB,CAAS,GACvC,IAAS,EAAkB;GAC/B,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,OAAO,EAAM;GACb,gBAAgB,EAAM;GACtB,UAAU,EAAM;GAChB,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ;GACR,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC,GAIK,IAAkB,EAA6B,CAAC,CAAC,GAEjD,IAAa,GAAqC;GACtD,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,UAAU,MAAW;IAKnB,AAJA,EAAK,SAAS,EAAE,UAAO,CAAC,GAEnB,EAAY,WAAS,GAA0B,GAEpD,EAAO,kBAAkB,MAAM;GACjC;GACA,SAAS,MAAW,EAAK,QAAQ,EAAE,UAAO,CAAC;GAC3C,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,uBAAmB,GAElE,UAAmB,EAAQ,EAAM,SAAS,OAC1C,WAAoB,EAAQ,EAAM,UAAU,OAC5C,WAAmB,EAAQ,EAAM,YAAY,CAAC;EAEpD,GAAK,EACH,MAAM;GACJ,YAAa,EAAO,QAAQ,KAAO,KAAA;GACnC,MAAM,EAAU;GAChB,SAAS,EAAU;EACrB,EACF,CAAC;EAED,IAAI,IAAsC,MACtC,IAAmB,IAGjB,IAAgB,QAAe,EAAe,MAAM,MAAM,EAAE;EAGlE,OAAO,eAAe,GAAI,SAAS;GACjC,cAAc;GACd,WAAY,EAAW,IAAI,EAAe,QAAQ,EAAc;GAChE,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,CAAC,OAAO,CAAC,CAAC,CAAC;GAC9B;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,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,GAAW,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,IAE9E,KAAqB,QAAe,EAAe,KAAK,GACxD,KAAqB,QACzB,EAAe,MAAM,KAAK,MAAU,EAAW,MAAM,MAAM,MAAW,EAAO,UAAU,CAAK,CAAC,EAAE,SAAS,CAAK,CAC/G;EAEA,SAAS,EAAW,GAAuB;GACzC,EAAK,UAAU;IAAE,QAAQ,GAAmB;IAAO;IAAe,QAAQ,GAAmB;GAAM,CAAC;EACtG;EAEA,SAAS,GAAW,GAAoB;GACtC,EAAM,gBAAgB;GAEtB,IAAM,IAAS,EAA0C,QAAQ;GAE7D,MAAU,KAAA,MAEd,EAAoB,OAAO,CAAK,GAChC,EAAW,CAAK,GAChB,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,GAAW,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,IAA4B,gBAAgB;GAC9D,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,GAAuB;GAChE,EAAI,aAEJ,EAAW,KACb,EAAoB,OAAO,EAAI,KAAK,GACpC,EAAM,QAAQ,IACd,EAAW,CAAa,GACxB,EAAkB,QAAQ,GAEtB,EAAM,UAAU,SAClB,EAAW,GAIb,EAAe,GACf,4BAA4B,EAAe,CAAC,MAE5C,EAAoB,OAAO,EAAI,KAAK,GACpC,EAAM,QAAQ,EAAI,OAClB,EAAW,CAAa,GACxB,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,CAAC,GACZ,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,CAAC,GACZ,EAAkB,QAAQ;KAG5B;IACF,KAAK;KACH,GAAW,cAAc,CAAC;KAE1B;IACF,KAAK;KACH,EAAW,cAAc;KACzB;IACF,SACE;GACJ;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;KAAS;IAAO;IAC9C,YAAY;IACZ,WAAW;IACX,SAAS;GACX,CAAC,SAEY,EAAS,WAAW;EACnC,EAEsB,CAAuB,GAEvC,KAAiC,MAA8B;GACnE,IAAM,IAAS,EAAM;GAErB,IAAI,EAAE,aAAkB,UAAU;GAElC,IAAM,IAAW,EAAO,QAAqB,SAAS;GAEtD,IAAI,CAAC,GAAU;GAEf,IAAM,IAAS,EAAyB,CAAQ;GAEhD,IAAI,CAAC,KAAU,EAAO,UAAU;GAEhC,IAAM,IAAa,EAAgB,MAAM,WAAW,MAAc,EAAU,UAAU,EAAO,KAAK;GAElG,AAAI,KAAc,KAChB,EAAW,IAAI,CAAU;EAE7B,GACM,IAAa,EAAG;EAEtB,AAAI,KACF,EAAW,iBAAiB,eAAe,CAA8C;EAG3F,IAAM,MAA0B,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;IAE3C,KAEL,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,GAAuB,CAAE,GAChD,IAAyB;EAC3B,GAEM,WAAqC;GACpC,MAED,MAA2B,KAAa,MAE5C,IAAuB,GACvB,IAAuB,GAAuB,CAAS,GACvD,IAAyB;EAC3B;EA2GA,OAzGA,QAAY;GAGV,AAFA,GAAuB,GAEnB,EAAO,SACL,KAAc,iBAAiB,KAAc,CAAC,EAAW,QAAQ,eAAe,KAAG,EAAW,YAAY,GAE9G,GAAe,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;GAKd,AAJA,GAAY,oBAAoB,eAAe,CAA8C,GAC7F,IAAuB,GACvB,IAAuB,MACvB,IAAyB,MACzB,GAAc;EAChB,CAAC,GAQM,CAAI;;;;cAID,EAAY;wBACF,EAAM,MAAM,SAAS,GAAG;wBACxB,GAAiB;kCACP,EAAM,kBAAkB,CAAC,SAAS,QAAQ;wBAb/C,EAAM,OAAO,SAAS,KAAA,EActB;uBAbD,EAAU,MAAM,SAAS,KAAA,EAc1B;0BAbI,EAAU,SAAS,SAAS,KAAA,EAc1B;0BAbF,EAAM,SAAS,SAAS,KAAA,EActB;yBACR,EAAM,OAAO,SAAS,GAAG;wBAC1B,EAAM,MAAM,SAAS,GAAG;qBAC3B,EAAW;2BACL,GAAM;4BAjBC,EAAM,UAAU,QAAQ,KAAO,KAAA,EAkB5B;uBACd,EAAM,KAAK,SAAS,GAAG;mBAC3B,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,GAAW;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;iBAC3B,EAAM,MAAM,SAAS,GAAG;;;;;oBAKrB,GAAG,EAAQ,WAAW;;2BAEf,EAAO,MAAM;eACzB,MAA2B;GAChC,IAAa;EACf,EAAE;;;sBAGY,GAAG,EAAQ,UAAU;0BAE/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,mDAGT,EAAgB,MAAM,WAAW,IAC/B,EAAe,QACV,CAAI;;;wCAGa,EAAa,UAAU,GAAG;oBAC9C,EAAe,MAAM;6BAIpB,CAAI,uEAGN,EAAgB,MAAM,KAAK,GAAQ,MACjC,CAAI;;;sBAGH,GAAG,EAAQ,OAAO,IAAQ;qCACX,EAAM;qCACN,EAAO,MAAM;wCAEhC,OACE,EAAW,IAAI,EAAe,MAAM,SAAS,EAAO,KAAK,IAAI,EAAc,UAAU,EAAO,KAC9F,EAAE;iCACa,OAAO,EAAO,QAAQ,EAAE;yBAChC,+DAA+D,IAAQ,GAAG,MAAM;sCACnE,EAAa,UAAU,EAAM;uCAEjD,EAAW,IAAI,EAAe,MAAM,SAAS,EAAO,KAAK,IAAI,EAAc,UAAU,EAAO,MAAM;iCACnF,EAAO,SAAS;wBACzB,EAAO,MAAM;;;;qBAKxB,IAzCyB,GA0C1B;;;;CAIV;CACA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EAAC;EAAoB;EAAa;CAAe;AAC3D,CAAC"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  bind,\n  getHost,\n  onCleanup,\n  onElement,\n  useEmit,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { AddEventListeners, ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport type { OreComboboxEvents, OreComboboxProps, ComboboxOptionInput, ComboboxOptionItem } from './combobox.types';\n\nimport {\n  lifecycleSignal,\n  createChoiceField,\n  createInteraction,\n  createOptionList,\n  type DialogCloseReason,\n  type OverlayOpenReason,\n} from '../../headless';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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 `<ore-form>` validation\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n *\n * @fires {CustomEvent} change - Emitted when selection changes. detail: { value: string | string[], values: string[], labels: string[] }\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 formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const query = signal('');\n\n    // Element refs needed by the composite option-list factory.\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: fCtxProps.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      validateOn: formCtx?.validateOn,\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 = createOptionList<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      onClose: (reason) => {\n        emit('close', { reason });\n\n        if (!abortSignal.aborted) restoreQueryFromSelection();\n\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open', { 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: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    let lastQueryBeforeClear: string | null = null;\n    let isRestoringQuery = false;\n\n    // Convenience getter for single-select\n    const selectedValue = computed(() => selectedValues.value[0] ?? '');\n\n    // Expose .value as a JS property accessor on the host element\n    Object.defineProperty(el, 'value', {\n      configurable: true,\n      get: () => (isMultiple() ? selectedValues.value : selectedValue.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([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    const selectedValueItems = computed(() => selectedValues.value);\n    const selectedLabelItems = computed(() =>\n      selectedValues.value.map((value) => allOptions.value.find((option) => option.value === value)?.label ?? value),\n    );\n\n    function emitChange(originalEvent?: Event) {\n      emit('change', { labels: selectedLabelItems.value, originalEvent, values: selectedValueItems.value });\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(event);\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: DialogCloseReason = '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(originalEvent);\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(originalEvent);\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(e);\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(e);\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 handleShadowOptionPointerMove = (event: PointerEvent): void => {\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 || option.disabled) 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    const shadowRoot = el.shadowRoot;\n\n    if (shadowRoot) {\n      shadowRoot.addEventListener('pointermove', handleShadowOptionPointerMove as EventListener);\n    }\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) 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      shadowRoot?.removeEventListener('pointermove', handleShadowOptionPointerMove as EventListener);\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n      stopObserving();\n    });\n\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.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 ?? ''}</span\n      >\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`<div class=\"dropdown-loading\">Loading...</div>`;\n            }\n\n            if (filteredOptions.value.length === 0) {\n              if (creatableLabel.value) {\n                return html`<button\n                  type=\"button\"\n                  class=\"no-results-create\"\n                  ?data-focused=${() => focusedIndex.value === -1}>\n                  ${creatableLabel.value}\n                </button>`;\n              }\n\n              return html`<div class=\"no-results\" role=\"presentation\">No results found</div>`;\n            }\n\n            return filteredOptions.value.map((option, index) => {\n              return html`<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        </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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"}

package/dist/content/card/card.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--card-bg,var(--color-canvas));--_color:var(--card-color,var(--color-contrast-900));--_border:var(--card-border,var(--border));--_border-color:var(--card-border-color,var(--color-contrast-300));--_radius:var(--card-radius,var(--rounded-lg));--_padding:var(--card-padding,var(--size-4));--_shadow:var(--card-shadow,var(--shadow-sm));--_hover-shadow:var(--card-hover-shadow,var(--shadow-md));flex-direction:column;display:flex;position:relative}.card{color:var(--_color);background:var(--_bg);border-radius:var(--_radius);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card-media{flex-shrink:0;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex:1;min-height:0;display:flex}.card-header,.card-content,.card-footer{padding:var(--_padding)}.card-header{padding-bottom:calc(var(--_padding) / 2)}.card-footer{padding-top:calc(var(--_padding) / 2)}.card-content{flex:1}.card-actions{gap:var(--size-2);padding:var(--_padding);padding-top:calc(var(--_padding) / 2);flex-wrap:wrap;align-items:center;display:flex}[hidden]{display:none}}@layer refine.variants{:host(:not([variant],[color])){--_shadow:var(--card-shadow,var(--shadow-sm))}:host(:not([variant],[color])) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host(:not([variant])[color]){--_bg:var(--card-bg,var(--_theme-backdrop));--_border-color:var(--card-border-color,var(--_theme-border))}:host(:not([variant])[color]) .card{border:var(--_border) solid var(--_border-color)}:host(:not([variant])[color]:hover){--_bg:var(--card-bg,color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));--_border-color:var(--card-border-color,var(--_theme-focus))}:host([variant=solid]){--_bg:var(--card-bg,var(--_theme-base));--_color:var(--card-color,var(--_theme-contrast));--_border-color:var(--card-border-color,var(--_theme-base));--_shadow:var(--card-shadow,var(--shadow-sm))}:host([variant=solid]) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host([variant=flat]){--_border-color:var(--card-border-color,color-mix(in oklch, var(--_theme-border) 50%, transparent))}:host([variant=flat]) .card{border:var(--_border) solid var(--_border-color)}:host([variant=glass]) .card{text-shadow:var(--text-shadow-xs);border:var(--_border) solid var(--_border-color);box-shadow:var(--card-shadow,var(--shadow-md)), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-xl)), var(--inset-shadow-sm);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1);backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1)}:host([variant=glass][interactive]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-2xl)), var(--inset-shadow-sm)}}@layer refine.overrides{.loading-bar{background:linear-gradient(90deg, transparent 0%, var(--_theme-base,var(--color-primary)) 50%, transparent 100%);width:65%;height:3px;display:none;position:absolute;top:0}.loading-bar:not(: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)){left:0}.loading-bar: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)){right:0}:host([loading]) .loading-bar{animation:var(--_motion-animation,loading-bar 1.4s linear infinite);display:block}:host(:dir(rtl)[loading]) .loading-bar{animation-direction:reverse}:host([disabled]){pointer-events:none;opacity:.6}:host([disabled][interactive]) .card{cursor:not-allowed}:host([interactive]:not([disabled]):hover) .card{box-shadow:var(--_hover-shadow);transform:translateY(-2px)scale(1.01)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host([interactive]:not([disabled]):active) .card{box-shadow:var(--_shadow);transition:box-shadow var(--transition-fast), transform .12s var(--ease-spring);transform:translateY(0)scale(.99)}:host([interactive]:focus-visible) .card{outline:var(--border-2) solid var(--_theme-focus,var(--color-primary));outline-offset:var(--border-2)}:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-media{width:30%;min-width:192px;max-width:320px}:host([orientation=horizontal]) .card-media img{object-fit:cover;width:100%;height:100%}:host([orientation=horizontal]) .card-body{flex:1}}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--card-bg,var(--color-canvas));--_color:var(--card-color,var(--color-contrast-900));--_border:var(--card-border,var(--border));--_border-color:var(--card-border-color,var(--color-divider));--_radius:var(--card-radius,var(--rounded-lg));--_padding:var(--card-padding,var(--size-4));--_shadow:var(--card-shadow,var(--shadow-sm));--_hover-shadow:var(--card-hover-shadow,var(--shadow-md));flex-direction:column;display:flex;position:relative}.card{color:var(--_color);background:var(--_bg);border-radius:var(--_radius);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card-media{flex-shrink:0;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex:1;min-height:0;display:flex}.card-header,.card-content,.card-footer{padding:var(--_padding)}.card-header{padding-bottom:calc(var(--_padding) / 2)}.card-footer{padding-top:calc(var(--_padding) / 2)}.card-content{flex:1}.card-actions{gap:var(--size-2);padding:var(--_padding);padding-top:calc(var(--_padding) / 2);flex-wrap:wrap;align-items:center;display:flex}[hidden]{display:none}}@layer refine.variants{:host(:not([variant],[color])){--_shadow:var(--card-shadow,var(--shadow-sm))}:host(:not([variant],[color])) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host(:not([variant])[color]){--_bg:var(--card-bg,var(--_theme-backdrop));--_border-color:var(--card-border-color,var(--_theme-border))}:host(:not([variant])[color]) .card{border:var(--_border) solid var(--_border-color)}:host(:not([variant])[color]:hover){--_bg:var(--card-bg,color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));--_border-color:var(--card-border-color,var(--_theme-focus))}:host([variant=solid]){--_bg:var(--card-bg,var(--_theme-base));--_color:var(--card-color,var(--_theme-contrast));--_border-color:var(--card-border-color,var(--_theme-base));--_shadow:var(--card-shadow,var(--shadow-sm))}:host([variant=solid]) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host([variant=flat]){--_border-color:var(--card-border-color,color-mix(in oklch, var(--_theme-border) 50%, transparent))}:host([variant=flat]) .card{border:var(--_border) solid var(--_border-color)}:host([variant=glass]) .card{text-shadow:var(--text-shadow-xs);border:var(--_border) solid var(--_border-color);box-shadow:var(--card-shadow,var(--shadow-md)), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-xl)), var(--inset-shadow-sm);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1);backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1)}:host([variant=glass][interactive]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-2xl)), var(--inset-shadow-sm)}}@layer refine.overrides{.loading-bar{background:linear-gradient(90deg, transparent 0%, var(--_theme-base,var(--color-primary)) 50%, transparent 100%);width:65%;height:3px;display:none;position:absolute;top:0}.loading-bar:not(: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)){left:0}.loading-bar: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)){right:0}:host([loading]) .loading-bar{animation:var(--_motion-animation,loading-bar 1.4s linear infinite);display:block}:host(:dir(rtl)[loading]) .loading-bar{animation-direction:reverse}:host([disabled]){pointer-events:none;opacity:.6}:host([disabled][interactive]) .card{cursor:not-allowed}:host([interactive]:not([disabled]):hover) .card{box-shadow:var(--_hover-shadow);transform:translateY(-2px)scale(1.01)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host([interactive]:not([disabled]):active) .card{box-shadow:var(--_shadow);transition:box-shadow var(--transition-fast), transform .12s var(--ease-spring);transform:translateY(0)scale(.99)}:host([interactive]:focus-visible) .card{outline:var(--border-2) solid var(--_theme-focus,var(--color-primary));outline-offset:var(--border-2)}:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-media{width:30%;min-width:192px;max-width:320px}:host([orientation=horizontal]) .card-media img{object-fit:cover;width:100%;height:100%}:host([orientation=horizontal]) .card-body{flex:1}}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}`;exports.default=e;
 //# sourceMappingURL=card.css.cjs.map

package/dist/content/card/card.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.css.cjs","names":[],"sources":["../../../src/content/card/card.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--card-bg, var(--color-canvas));\n    --_color: var(--card-color, var(--color-contrast-900));\n    --_border: var(--card-border, var(--border));\n    --_border-color: var(--card-border-color, var(--color-contrast-300));\n    --_radius: var(--card-radius, var(--rounded-lg));\n    --_padding: var(--card-padding, var(--size-4));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n    --_hover-shadow: var(--card-hover-shadow, var(--shadow-md));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .card {\n    position: relative;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n\n  /* ── Card Structure ───────────────────────── */\n\n  .card-media {\n    flex-shrink: 0;\n    overflow: hidden;\n  }\n\n  .card-media img {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n  }\n\n  .card-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .card-header,\n  .card-content,\n  .card-footer {\n    padding: var(--_padding);\n  }\n\n  .card-header {\n    padding-bottom: calc(var(--_padding) / 2);\n  }\n\n  .card-footer {\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  .card-content {\n    flex: 1;\n  }\n\n  .card-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  [hidden] {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  /* Default — bordered card with shadow */\n  :host(:not([variant], [color])) {\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host(:not([variant], [color])) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Default + color — tinted backdrop */\n  :host(:not([variant])[color]) {\n    --_bg: var(--card-bg, var(--_theme-backdrop));\n    --_border-color: var(--card-border-color, var(--_theme-border));\n  }\n\n  :host(:not([variant])[color]) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  :host(:not([variant])[color]:hover) {\n    --_bg: var(--card-bg, color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));\n    --_border-color: var(--card-border-color, var(--_theme-focus));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--card-bg, var(--_theme-base));\n    --_color: var(--card-color, var(--_theme-contrast));\n    --_border-color: var(--card-border-color, var(--_theme-base));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host([variant='solid']) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Flat — tinted backdrop, subtle border */\n  :host([variant='flat']) {\n    --_border-color: var(--card-border-color, color-mix(in oklch, var(--_theme-border) 50%, transparent));\n  }\n\n  :host([variant='flat']) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  /* Glass — frosted blur panel */\n  :host([variant='glass']) .card {\n    text-shadow: var(--text-shadow-xs);\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--card-shadow, var(--shadow-md)), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  :host([variant='glass']:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-xl)), var(--inset-shadow-sm);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='glass'][interactive]:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-2xl)), var(--inset-shadow-sm);\n  }\n}\n\n@layer refine.overrides {\n  /* ── Loading bar ──────────────────────────── */\n\n  /* Bar lives inside .card which already has overflow:hidden,\n       so translateX can sweep freely without any overflow. */\n  .loading-bar {\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0;\n    display: none;\n    width: 65%;\n    height: 3px;\n    background: linear-gradient(90deg, transparent 0%, var(--_theme-base, var(--color-primary)) 50%, transparent 100%);\n  }\n\n  :host([loading]) .loading-bar {\n    display: block;\n    animation: var(--_motion-animation, loading-bar 1.4s linear infinite);\n  }\n\n  /* In RTL the loading bar sweeps right-to-left */\n  :host(:dir(rtl)[loading]) .loading-bar {\n    animation-direction: reverse;\n  }\n\n  /* ── Disabled ─────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  :host([disabled][interactive]) .card {\n    cursor: not-allowed;\n  }\n\n  /* ── Interactive hover/active ─────────────── */\n\n  :host([interactive]:not([disabled]):hover) .card {\n    box-shadow: var(--_hover-shadow);\n    transform: translateY(-2px) scale(1.01);\n  }\n\n  :host([interactive]) .card {\n    cursor: pointer;\n    will-change: transform;\n  }\n\n  :host([interactive]:not([disabled]):active) .card {\n    box-shadow: var(--_shadow);\n    transform: translateY(0) scale(0.99);\n    transition:\n      box-shadow var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  :host([interactive]:focus-visible) .card {\n    outline: var(--border-2) solid var(--_theme-focus, var(--color-primary));\n    outline-offset: var(--border-2);\n  }\n\n  /* ── Horizontal orientation ───────────────── */\n\n  :host([orientation='horizontal']) .card {\n    flex-direction: row;\n  }\n\n  :host([orientation='horizontal']) .card-media {\n    width: 30%;\n    min-width: 192px;\n    max-width: 320px;\n  }\n\n  :host([orientation='horizontal']) .card-media img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :host([orientation='horizontal']) .card-body {\n    flex: 1;\n  }\n}\n\n@keyframes loading-bar {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(200%);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"card.css.cjs","names":[],"sources":["../../../src/content/card/card.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--card-bg, var(--color-canvas));\n    --_color: var(--card-color, var(--color-contrast-900));\n    --_border: var(--card-border, var(--border));\n    --_border-color: var(--card-border-color, var(--color-divider));\n    --_radius: var(--card-radius, var(--rounded-lg));\n    --_padding: var(--card-padding, var(--size-4));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n    --_hover-shadow: var(--card-hover-shadow, var(--shadow-md));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .card {\n    position: relative;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n\n  /* ── Card Structure ───────────────────────── */\n\n  .card-media {\n    flex-shrink: 0;\n    overflow: hidden;\n  }\n\n  .card-media img {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n  }\n\n  .card-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .card-header,\n  .card-content,\n  .card-footer {\n    padding: var(--_padding);\n  }\n\n  .card-header {\n    padding-bottom: calc(var(--_padding) / 2);\n  }\n\n  .card-footer {\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  .card-content {\n    flex: 1;\n  }\n\n  .card-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  [hidden] {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  /* Default — bordered card with shadow */\n  :host(:not([variant], [color])) {\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host(:not([variant], [color])) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Default + color — tinted backdrop */\n  :host(:not([variant])[color]) {\n    --_bg: var(--card-bg, var(--_theme-backdrop));\n    --_border-color: var(--card-border-color, var(--_theme-border));\n  }\n\n  :host(:not([variant])[color]) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  :host(:not([variant])[color]:hover) {\n    --_bg: var(--card-bg, color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));\n    --_border-color: var(--card-border-color, var(--_theme-focus));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--card-bg, var(--_theme-base));\n    --_color: var(--card-color, var(--_theme-contrast));\n    --_border-color: var(--card-border-color, var(--_theme-base));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host([variant='solid']) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Flat — tinted backdrop, subtle border */\n  :host([variant='flat']) {\n    --_border-color: var(--card-border-color, color-mix(in oklch, var(--_theme-border) 50%, transparent));\n  }\n\n  :host([variant='flat']) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  /* Glass — frosted blur panel */\n  :host([variant='glass']) .card {\n    text-shadow: var(--text-shadow-xs);\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--card-shadow, var(--shadow-md)), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  :host([variant='glass']:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-xl)), var(--inset-shadow-sm);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='glass'][interactive]:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-2xl)), var(--inset-shadow-sm);\n  }\n}\n\n@layer refine.overrides {\n  /* ── Loading bar ──────────────────────────── */\n\n  /* Bar lives inside .card which already has overflow:hidden,\n       so translateX can sweep freely without any overflow. */\n  .loading-bar {\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0;\n    display: none;\n    width: 65%;\n    height: 3px;\n    background: linear-gradient(90deg, transparent 0%, var(--_theme-base, var(--color-primary)) 50%, transparent 100%);\n  }\n\n  :host([loading]) .loading-bar {\n    display: block;\n    animation: var(--_motion-animation, loading-bar 1.4s linear infinite);\n  }\n\n  /* In RTL the loading bar sweeps right-to-left */\n  :host(:dir(rtl)[loading]) .loading-bar {\n    animation-direction: reverse;\n  }\n\n  /* ── Disabled ─────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  :host([disabled][interactive]) .card {\n    cursor: not-allowed;\n  }\n\n  /* ── Interactive hover/active ─────────────── */\n\n  :host([interactive]:not([disabled]):hover) .card {\n    box-shadow: var(--_hover-shadow);\n    transform: translateY(-2px) scale(1.01);\n  }\n\n  :host([interactive]) .card {\n    cursor: pointer;\n    will-change: transform;\n  }\n\n  :host([interactive]:not([disabled]):active) .card {\n    box-shadow: var(--_shadow);\n    transform: translateY(0) scale(0.99);\n    transition:\n      box-shadow var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  :host([interactive]:focus-visible) .card {\n    outline: var(--border-2) solid var(--_theme-focus, var(--color-primary));\n    outline-offset: var(--border-2);\n  }\n\n  /* ── Horizontal orientation ───────────────── */\n\n  :host([orientation='horizontal']) .card {\n    flex-direction: row;\n  }\n\n  :host([orientation='horizontal']) .card-media {\n    width: 30%;\n    min-width: 192px;\n    max-width: 320px;\n  }\n\n  :host([orientation='horizontal']) .card-media img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :host([orientation='horizontal']) .card-body {\n    flex: 1;\n  }\n}\n\n@keyframes loading-bar {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(200%);\n  }\n}\n"],"mappings":""}

package/dist/content/card/card.css.js

@@ -1,5 +1,5 @@
 //#region src/content/card/card.css?inline
-var e = "@layer refine.base{:host{--_bg:var(--card-bg,var(--color-canvas));--_color:var(--card-color,var(--color-contrast-900));--_border:var(--card-border,var(--border));--_border-color:var(--card-border-color,var(--color-contrast-300));--_radius:var(--card-radius,var(--rounded-lg));--_padding:var(--card-padding,var(--size-4));--_shadow:var(--card-shadow,var(--shadow-sm));--_hover-shadow:var(--card-hover-shadow,var(--shadow-md));flex-direction:column;display:flex;position:relative}.card{color:var(--_color);background:var(--_bg);border-radius:var(--_radius);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card-media{flex-shrink:0;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex:1;min-height:0;display:flex}.card-header,.card-content,.card-footer{padding:var(--_padding)}.card-header{padding-bottom:calc(var(--_padding) / 2)}.card-footer{padding-top:calc(var(--_padding) / 2)}.card-content{flex:1}.card-actions{gap:var(--size-2);padding:var(--_padding);padding-top:calc(var(--_padding) / 2);flex-wrap:wrap;align-items:center;display:flex}[hidden]{display:none}}@layer refine.variants{:host(:not([variant],[color])){--_shadow:var(--card-shadow,var(--shadow-sm))}:host(:not([variant],[color])) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host(:not([variant])[color]){--_bg:var(--card-bg,var(--_theme-backdrop));--_border-color:var(--card-border-color,var(--_theme-border))}:host(:not([variant])[color]) .card{border:var(--_border) solid var(--_border-color)}:host(:not([variant])[color]:hover){--_bg:var(--card-bg,color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));--_border-color:var(--card-border-color,var(--_theme-focus))}:host([variant=solid]){--_bg:var(--card-bg,var(--_theme-base));--_color:var(--card-color,var(--_theme-contrast));--_border-color:var(--card-border-color,var(--_theme-base));--_shadow:var(--card-shadow,var(--shadow-sm))}:host([variant=solid]) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host([variant=flat]){--_border-color:var(--card-border-color,color-mix(in oklch, var(--_theme-border) 50%, transparent))}:host([variant=flat]) .card{border:var(--_border) solid var(--_border-color)}:host([variant=glass]) .card{text-shadow:var(--text-shadow-xs);border:var(--_border) solid var(--_border-color);box-shadow:var(--card-shadow,var(--shadow-md)), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-xl)), var(--inset-shadow-sm);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1);backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1)}:host([variant=glass][interactive]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-2xl)), var(--inset-shadow-sm)}}@layer refine.overrides{.loading-bar{background:linear-gradient(90deg, transparent 0%, var(--_theme-base,var(--color-primary)) 50%, transparent 100%);width:65%;height:3px;display:none;position:absolute;top:0}.loading-bar:not(: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)){left:0}.loading-bar: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)){right:0}:host([loading]) .loading-bar{animation:var(--_motion-animation,loading-bar 1.4s linear infinite);display:block}:host(:dir(rtl)[loading]) .loading-bar{animation-direction:reverse}:host([disabled]){pointer-events:none;opacity:.6}:host([disabled][interactive]) .card{cursor:not-allowed}:host([interactive]:not([disabled]):hover) .card{box-shadow:var(--_hover-shadow);transform:translateY(-2px)scale(1.01)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host([interactive]:not([disabled]):active) .card{box-shadow:var(--_shadow);transition:box-shadow var(--transition-fast), transform .12s var(--ease-spring);transform:translateY(0)scale(.99)}:host([interactive]:focus-visible) .card{outline:var(--border-2) solid var(--_theme-focus,var(--color-primary));outline-offset:var(--border-2)}:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-media{width:30%;min-width:192px;max-width:320px}:host([orientation=horizontal]) .card-media img{object-fit:cover;width:100%;height:100%}:host([orientation=horizontal]) .card-body{flex:1}}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}";
+var e = "@layer refine.base{:host{--_bg:var(--card-bg,var(--color-canvas));--_color:var(--card-color,var(--color-contrast-900));--_border:var(--card-border,var(--border));--_border-color:var(--card-border-color,var(--color-divider));--_radius:var(--card-radius,var(--rounded-lg));--_padding:var(--card-padding,var(--size-4));--_shadow:var(--card-shadow,var(--shadow-sm));--_hover-shadow:var(--card-hover-shadow,var(--shadow-md));flex-direction:column;display:flex;position:relative}.card{color:var(--_color);background:var(--_bg);border-radius:var(--_radius);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card-media{flex-shrink:0;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex:1;min-height:0;display:flex}.card-header,.card-content,.card-footer{padding:var(--_padding)}.card-header{padding-bottom:calc(var(--_padding) / 2)}.card-footer{padding-top:calc(var(--_padding) / 2)}.card-content{flex:1}.card-actions{gap:var(--size-2);padding:var(--_padding);padding-top:calc(var(--_padding) / 2);flex-wrap:wrap;align-items:center;display:flex}[hidden]{display:none}}@layer refine.variants{:host(:not([variant],[color])){--_shadow:var(--card-shadow,var(--shadow-sm))}:host(:not([variant],[color])) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host(:not([variant])[color]){--_bg:var(--card-bg,var(--_theme-backdrop));--_border-color:var(--card-border-color,var(--_theme-border))}:host(:not([variant])[color]) .card{border:var(--_border) solid var(--_border-color)}:host(:not([variant])[color]:hover){--_bg:var(--card-bg,color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));--_border-color:var(--card-border-color,var(--_theme-focus))}:host([variant=solid]){--_bg:var(--card-bg,var(--_theme-base));--_color:var(--card-color,var(--_theme-contrast));--_border-color:var(--card-border-color,var(--_theme-base));--_shadow:var(--card-shadow,var(--shadow-sm))}:host([variant=solid]) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host([variant=flat]){--_border-color:var(--card-border-color,color-mix(in oklch, var(--_theme-border) 50%, transparent))}:host([variant=flat]) .card{border:var(--_border) solid var(--_border-color)}:host([variant=glass]) .card{text-shadow:var(--text-shadow-xs);border:var(--_border) solid var(--_border-color);box-shadow:var(--card-shadow,var(--shadow-md)), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-xl)), var(--inset-shadow-sm);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1);backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1)}:host([variant=glass][interactive]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-2xl)), var(--inset-shadow-sm)}}@layer refine.overrides{.loading-bar{background:linear-gradient(90deg, transparent 0%, var(--_theme-base,var(--color-primary)) 50%, transparent 100%);width:65%;height:3px;display:none;position:absolute;top:0}.loading-bar:not(: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)){left:0}.loading-bar: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)){right:0}:host([loading]) .loading-bar{animation:var(--_motion-animation,loading-bar 1.4s linear infinite);display:block}:host(:dir(rtl)[loading]) .loading-bar{animation-direction:reverse}:host([disabled]){pointer-events:none;opacity:.6}:host([disabled][interactive]) .card{cursor:not-allowed}:host([interactive]:not([disabled]):hover) .card{box-shadow:var(--_hover-shadow);transform:translateY(-2px)scale(1.01)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host([interactive]:not([disabled]):active) .card{box-shadow:var(--_shadow);transition:box-shadow var(--transition-fast), transform .12s var(--ease-spring);transform:translateY(0)scale(.99)}:host([interactive]:focus-visible) .card{outline:var(--border-2) solid var(--_theme-focus,var(--color-primary));outline-offset:var(--border-2)}:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-media{width:30%;min-width:192px;max-width:320px}:host([orientation=horizontal]) .card-media img{object-fit:cover;width:100%;height:100%}:host([orientation=horizontal]) .card-body{flex:1}}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}";
 //#endregion
 export { e as default };
 

package/dist/content/card/card.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.css.js","names":[],"sources":["../../../src/content/card/card.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--card-bg, var(--color-canvas));\n    --_color: var(--card-color, var(--color-contrast-900));\n    --_border: var(--card-border, var(--border));\n    --_border-color: var(--card-border-color, var(--color-contrast-300));\n    --_radius: var(--card-radius, var(--rounded-lg));\n    --_padding: var(--card-padding, var(--size-4));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n    --_hover-shadow: var(--card-hover-shadow, var(--shadow-md));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .card {\n    position: relative;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n\n  /* ── Card Structure ───────────────────────── */\n\n  .card-media {\n    flex-shrink: 0;\n    overflow: hidden;\n  }\n\n  .card-media img {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n  }\n\n  .card-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .card-header,\n  .card-content,\n  .card-footer {\n    padding: var(--_padding);\n  }\n\n  .card-header {\n    padding-bottom: calc(var(--_padding) / 2);\n  }\n\n  .card-footer {\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  .card-content {\n    flex: 1;\n  }\n\n  .card-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  [hidden] {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  /* Default — bordered card with shadow */\n  :host(:not([variant], [color])) {\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host(:not([variant], [color])) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Default + color — tinted backdrop */\n  :host(:not([variant])[color]) {\n    --_bg: var(--card-bg, var(--_theme-backdrop));\n    --_border-color: var(--card-border-color, var(--_theme-border));\n  }\n\n  :host(:not([variant])[color]) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  :host(:not([variant])[color]:hover) {\n    --_bg: var(--card-bg, color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));\n    --_border-color: var(--card-border-color, var(--_theme-focus));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--card-bg, var(--_theme-base));\n    --_color: var(--card-color, var(--_theme-contrast));\n    --_border-color: var(--card-border-color, var(--_theme-base));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host([variant='solid']) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Flat — tinted backdrop, subtle border */\n  :host([variant='flat']) {\n    --_border-color: var(--card-border-color, color-mix(in oklch, var(--_theme-border) 50%, transparent));\n  }\n\n  :host([variant='flat']) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  /* Glass — frosted blur panel */\n  :host([variant='glass']) .card {\n    text-shadow: var(--text-shadow-xs);\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--card-shadow, var(--shadow-md)), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  :host([variant='glass']:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-xl)), var(--inset-shadow-sm);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='glass'][interactive]:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-2xl)), var(--inset-shadow-sm);\n  }\n}\n\n@layer refine.overrides {\n  /* ── Loading bar ──────────────────────────── */\n\n  /* Bar lives inside .card which already has overflow:hidden,\n       so translateX can sweep freely without any overflow. */\n  .loading-bar {\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0;\n    display: none;\n    width: 65%;\n    height: 3px;\n    background: linear-gradient(90deg, transparent 0%, var(--_theme-base, var(--color-primary)) 50%, transparent 100%);\n  }\n\n  :host([loading]) .loading-bar {\n    display: block;\n    animation: var(--_motion-animation, loading-bar 1.4s linear infinite);\n  }\n\n  /* In RTL the loading bar sweeps right-to-left */\n  :host(:dir(rtl)[loading]) .loading-bar {\n    animation-direction: reverse;\n  }\n\n  /* ── Disabled ─────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  :host([disabled][interactive]) .card {\n    cursor: not-allowed;\n  }\n\n  /* ── Interactive hover/active ─────────────── */\n\n  :host([interactive]:not([disabled]):hover) .card {\n    box-shadow: var(--_hover-shadow);\n    transform: translateY(-2px) scale(1.01);\n  }\n\n  :host([interactive]) .card {\n    cursor: pointer;\n    will-change: transform;\n  }\n\n  :host([interactive]:not([disabled]):active) .card {\n    box-shadow: var(--_shadow);\n    transform: translateY(0) scale(0.99);\n    transition:\n      box-shadow var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  :host([interactive]:focus-visible) .card {\n    outline: var(--border-2) solid var(--_theme-focus, var(--color-primary));\n    outline-offset: var(--border-2);\n  }\n\n  /* ── Horizontal orientation ───────────────── */\n\n  :host([orientation='horizontal']) .card {\n    flex-direction: row;\n  }\n\n  :host([orientation='horizontal']) .card-media {\n    width: 30%;\n    min-width: 192px;\n    max-width: 320px;\n  }\n\n  :host([orientation='horizontal']) .card-media img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :host([orientation='horizontal']) .card-body {\n    flex: 1;\n  }\n}\n\n@keyframes loading-bar {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(200%);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"card.css.js","names":[],"sources":["../../../src/content/card/card.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--card-bg, var(--color-canvas));\n    --_color: var(--card-color, var(--color-contrast-900));\n    --_border: var(--card-border, var(--border));\n    --_border-color: var(--card-border-color, var(--color-divider));\n    --_radius: var(--card-radius, var(--rounded-lg));\n    --_padding: var(--card-padding, var(--size-4));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n    --_hover-shadow: var(--card-hover-shadow, var(--shadow-md));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .card {\n    position: relative;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n\n  /* ── Card Structure ───────────────────────── */\n\n  .card-media {\n    flex-shrink: 0;\n    overflow: hidden;\n  }\n\n  .card-media img {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n  }\n\n  .card-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .card-header,\n  .card-content,\n  .card-footer {\n    padding: var(--_padding);\n  }\n\n  .card-header {\n    padding-bottom: calc(var(--_padding) / 2);\n  }\n\n  .card-footer {\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  .card-content {\n    flex: 1;\n  }\n\n  .card-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    padding-top: calc(var(--_padding) / 2);\n  }\n\n  [hidden] {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  /* Default — bordered card with shadow */\n  :host(:not([variant], [color])) {\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host(:not([variant], [color])) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Default + color — tinted backdrop */\n  :host(:not([variant])[color]) {\n    --_bg: var(--card-bg, var(--_theme-backdrop));\n    --_border-color: var(--card-border-color, var(--_theme-border));\n  }\n\n  :host(:not([variant])[color]) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  :host(:not([variant])[color]:hover) {\n    --_bg: var(--card-bg, color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));\n    --_border-color: var(--card-border-color, var(--_theme-focus));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--card-bg, var(--_theme-base));\n    --_color: var(--card-color, var(--_theme-contrast));\n    --_border-color: var(--card-border-color, var(--_theme-base));\n    --_shadow: var(--card-shadow, var(--shadow-sm));\n  }\n\n  :host([variant='solid']) .card {\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  /* Flat — tinted backdrop, subtle border */\n  :host([variant='flat']) {\n    --_border-color: var(--card-border-color, color-mix(in oklch, var(--_theme-border) 50%, transparent));\n  }\n\n  :host([variant='flat']) .card {\n    border: var(--_border) solid var(--_border-color);\n  }\n\n  /* Glass — frosted blur panel */\n  :host([variant='glass']) .card {\n    text-shadow: var(--text-shadow-xs);\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--card-shadow, var(--shadow-md)), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  :host([variant='glass']:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-xl)), var(--inset-shadow-sm);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='glass'][interactive]:hover) .card {\n    box-shadow: var(--card-hover-shadow, var(--shadow-2xl)), var(--inset-shadow-sm);\n  }\n}\n\n@layer refine.overrides {\n  /* ── Loading bar ──────────────────────────── */\n\n  /* Bar lives inside .card which already has overflow:hidden,\n       so translateX can sweep freely without any overflow. */\n  .loading-bar {\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0;\n    display: none;\n    width: 65%;\n    height: 3px;\n    background: linear-gradient(90deg, transparent 0%, var(--_theme-base, var(--color-primary)) 50%, transparent 100%);\n  }\n\n  :host([loading]) .loading-bar {\n    display: block;\n    animation: var(--_motion-animation, loading-bar 1.4s linear infinite);\n  }\n\n  /* In RTL the loading bar sweeps right-to-left */\n  :host(:dir(rtl)[loading]) .loading-bar {\n    animation-direction: reverse;\n  }\n\n  /* ── Disabled ─────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  :host([disabled][interactive]) .card {\n    cursor: not-allowed;\n  }\n\n  /* ── Interactive hover/active ─────────────── */\n\n  :host([interactive]:not([disabled]):hover) .card {\n    box-shadow: var(--_hover-shadow);\n    transform: translateY(-2px) scale(1.01);\n  }\n\n  :host([interactive]) .card {\n    cursor: pointer;\n    will-change: transform;\n  }\n\n  :host([interactive]:not([disabled]):active) .card {\n    box-shadow: var(--_shadow);\n    transform: translateY(0) scale(0.99);\n    transition:\n      box-shadow var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  :host([interactive]:focus-visible) .card {\n    outline: var(--border-2) solid var(--_theme-focus, var(--color-primary));\n    outline-offset: var(--border-2);\n  }\n\n  /* ── Horizontal orientation ───────────────── */\n\n  :host([orientation='horizontal']) .card {\n    flex-direction: row;\n  }\n\n  :host([orientation='horizontal']) .card-media {\n    width: 30%;\n    min-width: 192px;\n    max-width: 320px;\n  }\n\n  :host([orientation='horizontal']) .card-media img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :host([orientation='horizontal']) .card-body {\n    flex: 1;\n  }\n}\n\n@keyframes loading-bar {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(200%);\n  }\n}\n"],"mappings":""}

package/dist/content/chat-message/chat-message.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor:not(: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)){margin-left:var(--size-0-5)}.cursor: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)){margin-right:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(: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)){border-right-color:#0000}.spinner: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)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor:not(: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)){margin-left:var(--size-0-5)}.cursor: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)){margin-right:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(: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)){border-right-color:#0000}.spinner: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)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}`;exports.default=e;
 //# sourceMappingURL=chat-message.css.cjs.map

package/dist/content/chat-message/chat-message.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.css.cjs","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"chat-message.css.cjs","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/content/chat-message/chat-message.css.js

@@ -1,5 +1,5 @@
 //#region src/content/chat-message/chat-message.css?inline
-var e = "@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor:not(: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)){margin-left:var(--size-0-5)}.cursor: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)){margin-right:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(: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)){border-right-color:#0000}.spinner: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)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}";
+var e = "@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor:not(: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)){margin-left:var(--size-0-5)}.cursor: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)){margin-right:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(: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)){border-right-color:#0000}.spinner: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)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}";
 //#endregion
 export { e as default };
 

package/dist/content/chat-message/chat-message.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.css.js","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"chat-message.css.js","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/content/icon/icon.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AA0CpF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,CAInE;AA2BD,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/content/icon/icon.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AA2CpF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,CAInE;AA2CD,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/content/index.d.ts

@@ -14,6 +14,10 @@ export { CHAT_MESSAGE_TAG } from './chat-message/chat-message';
 export type { ChatMessageSender, ChatMessageStatus, OreChatMessageEvents, OreChatMessageProps, } from './chat-message/chat-message';
 export { ICON_TAG, registerIcons } from './icon/icon';
 export type { OreIconProps, IconNode } from './icon/icon';
+export { LIST_ITEM_TAG } from './list/list-item';
+export type { ListItemRevealSide, OreListItemEvents, OreListItemProps } from './list/list-item';
+export { LIST_CTX, LIST_TAG } from './list/list';
+export type { ListContext, ListVariant, OreListEvents, OreListProps } from './list/list';
 export { PAGINATION_TAG } from './pagination/pagination';
 export type { OrePaginationEvents, OrePaginationProps } from './pagination/pagination';
 export { SEPARATOR_TAG } from './separator/separator';

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

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

package/dist/content/list/_list-item-reveal.cjs

@@ -0,0 +1,2 @@
+const e=require("../../headless/swipe.cjs");var t=64,n=t*3,r=.85;function i(i,a){let o=e=>e.distance<0?`right`:`left`,s=()=>{i.removeAttribute(`data-dragging`),i.removeAttribute(`data-confirming`),i.style.removeProperty(`--_swipe-x`)};return e.createSwipeControl({axis:()=>`x`,captureTarget:()=>null,disabled:a.disabled,onCancel:s,onCommit:e=>{let t=o(e);s(),a.hasActions(t)&&(i.removeAttribute(`revealed`),a.onConfirm(t))},onMove:e=>{let n=o(e);if(!a.hasActions(n))return;let s=Math.min(Math.abs(e.distance)/t,1);i.setAttribute(`data-dragging`,``),i.toggleAttribute(`data-confirming`,e.progress>=r),i.style.setProperty(`--_swipe-x`,String((n===`left`?1:-1)*s))},onRelease:e=>{let n=o(e);s(),a.hasActions(n)&&Math.abs(e.distance)>=t&&i.setAttribute(`revealed`,n)},threshold:()=>n})}exports.createRevealState=i;
+//# sourceMappingURL=_list-item-reveal.cjs.map

package/dist/content/list/_list-item-reveal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_list-item-reveal.cjs","names":[],"sources":["../../../src/content/list/_list-item-reveal.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport type { ListItemRevealSide } from './list-item';\n\nimport { createSwipeControl, type SwipeControl, type SwipeControlDetail } from '../../headless';\n\n/** Drag distance (px) past which the action panel snaps fully open on release. */\nconst REVEAL_THRESHOLD = 64;\n/** Drag distance (px) past which the swipe auto-confirms the action — \"swiped all the way\". */\nconst CONFIRM_THRESHOLD = REVEAL_THRESHOLD * 3;\n/** Fraction of CONFIRM_THRESHOLD past which `data-confirming` warns the drag is about to fire. */\nconst CONFIRM_WARNING_RATIO = 0.85;\n\nexport type RevealStateOptions = {\n  disabled: Readable<boolean>;\n  hasActions: (side: ListItemRevealSide) => boolean;\n  /** The full-swipe-through gesture fired — emit `confirm` and click the slot's own action. */\n  onConfirm: (side: ListItemRevealSide) => void;\n};\n\n/**\n * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots\n * — isolated here since it's the one genuinely tricky part of the component (three distance\n * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a\n * `headless/` primitive: `createSwipeControl` itself already is one (shared with `ore-toast`),\n * but this two-stage reveal/confirm layer on top of it has exactly one consumer today —\n * generalizing it further would be speculative, not reusable.\n *\n * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`\n * style — it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`\n * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this\n * module setting the attribute is enough to drive both that watcher and `list.css`'s\n * `[revealed]` styling.\n */\nexport function createRevealState(el: HTMLElement, options: RevealStateOptions): SwipeControl {\n  const resolveSide = (detail: SwipeControlDetail): ListItemRevealSide => (detail.distance < 0 ? 'right' : 'left');\n\n  // Inline `--_swipe-x` override during an active drag lets the row (and both action panels,\n  // which read the same variable) follow the pointer 1:1 with no transition lag. Clearing it\n  // hands control back to the `[revealed]`/`:focus-within` CSS rules in list-item.css, which\n  // then animate normally via the CSS `transition`.\n  const resetInline = (): void => {\n    el.removeAttribute('data-dragging');\n    el.removeAttribute('data-confirming');\n    el.style.removeProperty('--_swipe-x');\n  };\n\n  return createSwipeControl({\n    axis: () => 'x',\n    // Do not capture the pointer — capture would steal clicks from action buttons revealed\n    // mid-gesture (same reasoning as ore-toast's swipe-to-dismiss).\n    captureTarget: () => null,\n    disabled: options.disabled,\n    onCancel: resetInline,\n    // `threshold`/`distance`/`progress` are all wired to CONFIRM_THRESHOLD (the outer, rarer\n    // gesture) — onCommit only fires once the swipe has gone all the way through.\n    onCommit: (detail) => {\n      const side = resolveSide(detail);\n\n      resetInline();\n\n      if (!options.hasActions(side)) return;\n\n      el.removeAttribute('revealed');\n      options.onConfirm(side);\n    },\n    onMove: (detail) => {\n      const side = resolveSide(detail);\n\n      if (!options.hasActions(side)) return;\n\n      // Reveal follows the pointer up to REVEAL_THRESHOLD, then holds fully open while the\n      // drag continues on toward CONFIRM_THRESHOLD (still tracked by `detail`/onCommit above).\n      const revealProgress = Math.min(Math.abs(detail.distance) / REVEAL_THRESHOLD, 1);\n\n      el.setAttribute('data-dragging', '');\n      el.toggleAttribute('data-confirming', detail.progress >= CONFIRM_WARNING_RATIO);\n      el.style.setProperty('--_swipe-x', String((side === 'left' ? 1 : -1) * revealProgress));\n    },\n    onRelease: (detail) => {\n      const side = resolveSide(detail);\n\n      resetInline();\n\n      if (options.hasActions(side) && Math.abs(detail.distance) >= REVEAL_THRESHOLD) el.setAttribute('revealed', side);\n    },\n    threshold: () => CONFIRM_THRESHOLD,\n  });\n}\n"],"mappings":"4CAOA,IAAM,EAAmB,GAEnB,EAAoB,EAAmB,EAEvC,EAAwB,IAuB9B,SAAgB,EAAkB,EAAiB,EAA2C,CAC5F,IAAM,EAAe,GAAoD,EAAO,SAAW,EAAI,QAAU,OAMnG,MAA0B,CAC9B,EAAG,gBAAgB,eAAe,EAClC,EAAG,gBAAgB,iBAAiB,EACpC,EAAG,MAAM,eAAe,YAAY,CACtC,EAEA,OAAO,EAAA,mBAAmB,CACxB,SAAY,IAGZ,kBAAqB,KACrB,SAAU,EAAQ,SAClB,SAAU,EAGV,SAAW,GAAW,CACpB,IAAM,EAAO,EAAY,CAAM,EAE/B,EAAY,EAEP,EAAQ,WAAW,CAAI,IAE5B,EAAG,gBAAgB,UAAU,EAC7B,EAAQ,UAAU,CAAI,EACxB,EACA,OAAS,GAAW,CAClB,IAAM,EAAO,EAAY,CAAM,EAE/B,GAAI,CAAC,EAAQ,WAAW,CAAI,EAAG,OAI/B,IAAM,EAAiB,KAAK,IAAI,KAAK,IAAI,EAAO,QAAQ,EAAI,EAAkB,CAAC,EAE/E,EAAG,aAAa,gBAAiB,EAAE,EACnC,EAAG,gBAAgB,kBAAmB,EAAO,UAAY,CAAqB,EAC9E,EAAG,MAAM,YAAY,aAAc,QAAQ,IAAS,OAAS,EAAI,IAAM,CAAc,CAAC,CACxF,EACA,UAAY,GAAW,CACrB,IAAM,EAAO,EAAY,CAAM,EAE/B,EAAY,EAER,EAAQ,WAAW,CAAI,GAAK,KAAK,IAAI,EAAO,QAAQ,GAAK,GAAkB,EAAG,aAAa,WAAY,CAAI,CACjH,EACA,cAAiB,CACnB,CAAC,CACH"}

package/dist/content/list/_list-item-reveal.d.ts

@@ -0,0 +1,25 @@
+import type { Readable } from '@vielzeug/ripple';
+import type { ListItemRevealSide } from './list-item';
+import { type SwipeControl } from '../../headless';
+export type RevealStateOptions = {
+    disabled: Readable<boolean>;
+    hasActions: (side: ListItemRevealSide) => boolean;
+    /** The full-swipe-through gesture fired — emit `confirm` and click the slot's own action. */
+    onConfirm: (side: ListItemRevealSide) => void;
+};
+/**
+ * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots
+ * — isolated here since it's the one genuinely tricky part of the component (three distance
+ * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a
+ * `headless/` primitive: `createSwipeControl` itself already is one (shared with `ore-toast`),
+ * but this two-stage reveal/confirm layer on top of it has exactly one consumer today —
+ * generalizing it further would be speculative, not reusable.
+ *
+ * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`
+ * style — it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`
+ * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this
+ * module setting the attribute is enough to drive both that watcher and `list.css`'s
+ * `[revealed]` styling.
+ */
+export declare function createRevealState(el: HTMLElement, options: RevealStateOptions): SwipeControl;
+//# sourceMappingURL=_list-item-reveal.d.ts.map

package/dist/content/list/_list-item-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_list-item-reveal.d.ts","sourceRoot":"","sources":["../../../src/content/list/_list-item-reveal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAsB,KAAK,YAAY,EAA2B,MAAM,gBAAgB,CAAC;AAShG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,OAAO,CAAC;IAClD,6FAA6F;IAC7F,SAAS,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,kBAAkB,GAAG,YAAY,CAsD5F"}

package/dist/content/list/_list-item-reveal.js

@@ -0,0 +1,33 @@
+import { createSwipeControl as e } from "../../headless/swipe.js";
+//#region src/content/list/_list-item-reveal.ts
+var t = 64, n = t * 3, r = .85;
+function i(i, a) {
+	let o = (e) => e.distance < 0 ? "right" : "left", s = () => {
+		i.removeAttribute("data-dragging"), i.removeAttribute("data-confirming"), i.style.removeProperty("--_swipe-x");
+	};
+	return e({
+		axis: () => "x",
+		captureTarget: () => null,
+		disabled: a.disabled,
+		onCancel: s,
+		onCommit: (e) => {
+			let t = o(e);
+			s(), a.hasActions(t) && (i.removeAttribute("revealed"), a.onConfirm(t));
+		},
+		onMove: (e) => {
+			let n = o(e);
+			if (!a.hasActions(n)) return;
+			let s = Math.min(Math.abs(e.distance) / t, 1);
+			i.setAttribute("data-dragging", ""), i.toggleAttribute("data-confirming", e.progress >= r), i.style.setProperty("--_swipe-x", String((n === "left" ? 1 : -1) * s));
+		},
+		onRelease: (e) => {
+			let n = o(e);
+			s(), a.hasActions(n) && Math.abs(e.distance) >= t && i.setAttribute("revealed", n);
+		},
+		threshold: () => n
+	});
+}
+//#endregion
+export { i as createRevealState };
+
+//# sourceMappingURL=_list-item-reveal.js.map