@vielzeug/refine 3.2.0 → 3.3.0

package/dist/command-palette.js.map

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

package/dist/content/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-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)}}@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(: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))){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:not(:has(button:active,a[href]:active,input:active,select:active,textarea:active,summary:active,[role=button]:active,[role=link]: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);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)}}@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(: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))){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)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host[interactive]:not([disabled]):active:not(:has(button:active,a[href]:active,input:active,select:active,textarea:active,summary:active,[role=button]:active,[role=link]: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-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\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  /* `:active` bubbles to every ancestor of whatever element is actually being pressed, so\n     without the `:not(:has(...))` guard, pressing a nested interactive descendant (a swatch\n     button, a slotted `<ore-button>`, a link, etc. — kept in sync with card.ts's\n     `INTERACTIVE_DESCENDANT_SELECTOR`) would *also* visually \"press\" the whole card even though\n     `handleClick` already ignores the click for activation purposes. `:host(:has(...))`\n     (`:has()` as `:host()`'s functional argument) is invalid — `:host()` only accepts a compound\n     selector and doesn't accept `:has()` inside it, so the bare `:host` pseudo-class chained\n     directly with the rest (no parentheses around it) is used instead — same reasoning as\n     list-item.css's identical `:host:has(...)` rules. */\n  :host[interactive]:not([disabled]):active:not(\n    :has(\n      button:active,\n      a[href]:active,\n      input:active,\n      select:active,\n      textarea:active,\n      summary:active,\n      [role='button']:active,\n      [role='link']:active\n    )\n  ) .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    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\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);\n  }\n\n  :host([interactive]) .card {\n    cursor: pointer;\n    will-change: transform;\n  }\n\n  /* `:active` bubbles to every ancestor of whatever element is actually being pressed, so\n     without the `:not(:has(...))` guard, pressing a nested interactive descendant (a swatch\n     button, a slotted `<ore-button>`, a link, etc. — kept in sync with card.ts's\n     `INTERACTIVE_DESCENDANT_SELECTOR`) would *also* visually \"press\" the whole card even though\n     `handleClick` already ignores the click for activation purposes. `:host(:has(...))`\n     (`:has()` as `:host()`'s functional argument) is invalid — `:host()` only accepts a compound\n     selector and doesn't accept `:has()` inside it, so the bare `:host` pseudo-class chained\n     directly with the rest (no parentheses around it) is used instead — same reasoning as\n     list-item.css's identical `:host:has(...)` rules. */\n  :host[interactive]:not([disabled]):active:not(\n    :has(\n      button:active,\n      a[href]:active,\n      input:active,\n      select:active,\n      textarea:active,\n      summary:active,\n      [role='button']:active,\n      [role='link']:active\n    )\n  ) .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-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)}}@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(: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))){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:not(:has(button:active,a[href]:active,input:active,select:active,textarea:active,summary:active,[role=button]:active,[role=link]: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);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)}}@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(: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))){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)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host[interactive]:not([disabled]):active:not(:has(button:active,a[href]:active,input:active,select:active,textarea:active,summary:active,[role=button]:active,[role=link]: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-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\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  /* `:active` bubbles to every ancestor of whatever element is actually being pressed, so\n     without the `:not(:has(...))` guard, pressing a nested interactive descendant (a swatch\n     button, a slotted `<ore-button>`, a link, etc. — kept in sync with card.ts's\n     `INTERACTIVE_DESCENDANT_SELECTOR`) would *also* visually \"press\" the whole card even though\n     `handleClick` already ignores the click for activation purposes. `:host(:has(...))`\n     (`:has()` as `:host()`'s functional argument) is invalid — `:host()` only accepts a compound\n     selector and doesn't accept `:has()` inside it, so the bare `:host` pseudo-class chained\n     directly with the rest (no parentheses around it) is used instead — same reasoning as\n     list-item.css's identical `:host:has(...)` rules. */\n  :host[interactive]:not([disabled]):active:not(\n    :has(\n      button:active,\n      a[href]:active,\n      input:active,\n      select:active,\n      textarea:active,\n      summary:active,\n      [role='button']:active,\n      [role='link']:active\n    )\n  ) .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    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\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);\n  }\n\n  :host([interactive]) .card {\n    cursor: pointer;\n    will-change: transform;\n  }\n\n  /* `:active` bubbles to every ancestor of whatever element is actually being pressed, so\n     without the `:not(:has(...))` guard, pressing a nested interactive descendant (a swatch\n     button, a slotted `<ore-button>`, a link, etc. — kept in sync with card.ts's\n     `INTERACTIVE_DESCENDANT_SELECTOR`) would *also* visually \"press\" the whole card even though\n     `handleClick` already ignores the click for activation purposes. `:host(:has(...))`\n     (`:has()` as `:host()`'s functional argument) is invalid — `:host()` only accepts a compound\n     selector and doesn't accept `:has()` inside it, so the bare `:host` pseudo-class chained\n     directly with the rest (no parentheses around it) is used instead — same reasoning as\n     list-item.css's identical `:host:has(...)` rules. */\n  :host[interactive]:not([disabled]):active:not(\n    :has(\n      button:active,\n      a[href]:active,\n      input:active,\n      select:active,\n      textarea:active,\n      summary:active,\n      [role='button']:active,\n      [role='link']:active\n    )\n  ) .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/index.d.ts

@@ -16,6 +16,8 @@ export type { OreCopyCommandEvents, OreCopyCommandProps } from './copy-command/c
 export { COPY_COMMAND_TAG } from './copy-command/copy-command';
 export type { IconNode, OreIconProps } from './icon/icon';
 export { ICON_TAG, registerIcons } from './icon/icon';
+export type { KeyboardKeySize, OreKeyboardKeyProps, OreKeyboardShortcutProps } from './keyboard-key/keyboard-key';
+export { KEYBOARD_KEY_TAG, KEYBOARD_SHORTCUT_TAG } from './keyboard-key/keyboard-key';
 export type { ListContext, ListVariant, OreListEvents, OreListProps } from './list/list';
 export { LIST_CTX, LIST_TAG } from './list/list';
 export type { ListItemRevealSide, OreListItemEvents, OreListItemProps } from './list/list-item';
@@ -24,6 +26,8 @@ export type { MarqueeDirection, OreMarqueeProps } from './marquee/marquee';
 export { MARQUEE_TAG } from './marquee/marquee';
 export type { OrePaginationEvents, OrePaginationProps } from './pagination/pagination';
 export { PAGINATION_TAG } from './pagination/pagination';
+export type { OreQrCodeEvents, OreQrCodeProps } from './qr-code/qr-code';
+export { QR_CODE_TAG } from './qr-code/qr-code';
 export type { OreSeparatorProps } from './separator/separator';
 export { SEPARATOR_TAG } from './separator/separator';
 export type { OreStatsProps, StatsTrendDirection, StatsVariant } from './stats/stats';

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

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

package/dist/content/keyboard-key/keyboard-key.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{vertical-align:middle;display:inline-flex}.key{box-sizing:border-box;padding:var(--keyboard-key-padding-block,var(--size-0-5)) var(--keyboard-key-padding-inline,var(--size-1-5));font-family:var(--keyboard-key-font-family,var(--font-mono,monospace));font-size:var(--keyboard-key-font-size,var(--text-xs));font-weight:var(--keyboard-key-font-weight,inherit);line-height:var(--leading-normal);color:var(--keyboard-key-color,var(--color-contrast-500));white-space:nowrap;background:var(--keyboard-key-bg,var(--color-contrast-100));border:var(--border) solid var(--keyboard-key-border-color,var(--color-contrast-200));border-bottom-width:calc(var(--border) + 1px);border-radius:var(--keyboard-key-radius,var(--rounded-sm));box-shadow:var(--keyboard-key-shadow,none);transition:box-shadow var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.symbol[hidden]{display:none}}@layer refine.sizes{:host([size=lg]) .key{min-width:var(--keyboard-key-min-width,var(--size-16));min-height:var(--keyboard-key-min-height,var(--size-16));padding:var(--keyboard-key-padding-block,var(--size-3)) var(--keyboard-key-padding-inline,var(--size-4));font-family:var(--keyboard-key-font-family,var(--font-sans));font-size:var(--keyboard-key-font-size,var(--text-2xl));font-weight:var(--keyboard-key-font-weight,var(--font-medium));color:var(--keyboard-key-color,var(--color-contrast-700));background:var(--keyboard-key-bg,var(--color-contrast-50));border-color:var(--keyboard-key-border-color,var(--color-contrast-300));border-bottom-width:var(--size-1);border-radius:var(--keyboard-key-radius,var(--rounded-md));box-shadow:var(--keyboard-key-shadow,var(--shadow-xs));position:relative}:host([size=lg]) .key[data-has-symbol]{padding-top:var(--size-6);justify-content:flex-start;align-items:flex-end}:host([size=lg]) .symbol{font-size:var(--text-sm);color:var(--keyboard-key-symbol-color,var(--color-contrast-500));top:var(--size-2);position:absolute}:host([size=lg]) .symbol:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-2-5)}:host([size=lg]) .symbol: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)){left:var(--size-2-5)}:host([size=lg]) .key[data-has-symbol] .label{font-size:var(--text-md)}}@layer refine.states{.key[data-pressed]{box-shadow:0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color,var(--color-contrast-200)), var(--keyboard-key-shadow,none);transform:translateY(var(--border-2))}:host([size=lg]) .key[data-pressed]{border-bottom-width:var(--border);box-shadow:0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color,var(--color-contrast-200)), var(--keyboard-key-shadow,var(--shadow-xs))}}`;exports.default=e;
+//# sourceMappingURL=keyboard-key.css.cjs.map

package/dist/content/keyboard-key/keyboard-key.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.css.cjs","names":[],"sources":["../../../src/content/keyboard-key/keyboard-key.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .key {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--keyboard-key-padding-block, var(--size-0-5)) var(--keyboard-key-padding-inline, var(--size-1-5));\n    font-family: var(--keyboard-key-font-family, var(--font-mono, monospace));\n    font-size: var(--keyboard-key-font-size, var(--text-xs));\n    font-weight: var(--keyboard-key-font-weight, inherit);\n    line-height: var(--leading-normal);\n    color: var(--keyboard-key-color, var(--color-contrast-500));\n    white-space: nowrap;\n    background: var(--keyboard-key-bg, var(--color-contrast-100));\n    border: var(--border) solid var(--keyboard-key-border-color, var(--color-contrast-200));\n    border-block-end-width: calc(var(--border) + 1px);\n    border-radius: var(--keyboard-key-radius, var(--rounded-sm));\n    box-shadow: var(--keyboard-key-shadow, none);\n    transition:\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .symbol[hidden] {\n    display: none;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='lg']) .key {\n    position: relative;\n    min-width: var(--keyboard-key-min-width, var(--size-16));\n    min-height: var(--keyboard-key-min-height, var(--size-16));\n    padding: var(--keyboard-key-padding-block, var(--size-3)) var(--keyboard-key-padding-inline, var(--size-4));\n    font-family: var(--keyboard-key-font-family, var(--font-sans));\n    font-size: var(--keyboard-key-font-size, var(--text-2xl));\n    font-weight: var(--keyboard-key-font-weight, var(--font-medium));\n    color: var(--keyboard-key-color, var(--color-contrast-700));\n    background: var(--keyboard-key-bg, var(--color-contrast-50));\n    border-color: var(--keyboard-key-border-color, var(--color-contrast-300));\n    border-block-end-width: var(--size-1);\n    border-radius: var(--keyboard-key-radius, var(--rounded-md));\n    box-shadow: var(--keyboard-key-shadow, var(--shadow-xs));\n  }\n\n  :host([size='lg']) .key[data-has-symbol] {\n    align-items: flex-end;\n    justify-content: flex-start;\n    padding-block-start: var(--size-6);\n  }\n\n  :host([size='lg']) .symbol {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--keyboard-key-symbol-color, var(--color-contrast-500));\n  }\n\n  :host([size='lg']) .key[data-has-symbol] .label {\n    font-size: var(--text-md);\n  }\n}\n\n@layer refine.states {\n  .key[data-pressed] {\n    box-shadow:\n      0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color, var(--color-contrast-200)),\n      var(--keyboard-key-shadow, none);\n    transform: translateY(var(--border-2));\n  }\n\n  :host([size='lg']) .key[data-pressed] {\n    border-block-end-width: var(--border);\n    box-shadow:\n      0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color, var(--color-contrast-200)),\n      var(--keyboard-key-shadow, var(--shadow-xs));\n  }\n}\n"],"mappings":""}

package/dist/content/keyboard-key/keyboard-key.css.js

@@ -0,0 +1,6 @@
+//#region src/content/keyboard-key/keyboard-key.css?inline
+var e = "@layer refine.base{:host{vertical-align:middle;display:inline-flex}.key{box-sizing:border-box;padding:var(--keyboard-key-padding-block,var(--size-0-5)) var(--keyboard-key-padding-inline,var(--size-1-5));font-family:var(--keyboard-key-font-family,var(--font-mono,monospace));font-size:var(--keyboard-key-font-size,var(--text-xs));font-weight:var(--keyboard-key-font-weight,inherit);line-height:var(--leading-normal);color:var(--keyboard-key-color,var(--color-contrast-500));white-space:nowrap;background:var(--keyboard-key-bg,var(--color-contrast-100));border:var(--border) solid var(--keyboard-key-border-color,var(--color-contrast-200));border-bottom-width:calc(var(--border) + 1px);border-radius:var(--keyboard-key-radius,var(--rounded-sm));box-shadow:var(--keyboard-key-shadow,none);transition:box-shadow var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.symbol[hidden]{display:none}}@layer refine.sizes{:host([size=lg]) .key{min-width:var(--keyboard-key-min-width,var(--size-16));min-height:var(--keyboard-key-min-height,var(--size-16));padding:var(--keyboard-key-padding-block,var(--size-3)) var(--keyboard-key-padding-inline,var(--size-4));font-family:var(--keyboard-key-font-family,var(--font-sans));font-size:var(--keyboard-key-font-size,var(--text-2xl));font-weight:var(--keyboard-key-font-weight,var(--font-medium));color:var(--keyboard-key-color,var(--color-contrast-700));background:var(--keyboard-key-bg,var(--color-contrast-50));border-color:var(--keyboard-key-border-color,var(--color-contrast-300));border-bottom-width:var(--size-1);border-radius:var(--keyboard-key-radius,var(--rounded-md));box-shadow:var(--keyboard-key-shadow,var(--shadow-xs));position:relative}:host([size=lg]) .key[data-has-symbol]{padding-top:var(--size-6);justify-content:flex-start;align-items:flex-end}:host([size=lg]) .symbol{font-size:var(--text-sm);color:var(--keyboard-key-symbol-color,var(--color-contrast-500));top:var(--size-2);position:absolute}:host([size=lg]) .symbol:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-2-5)}:host([size=lg]) .symbol: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)){left:var(--size-2-5)}:host([size=lg]) .key[data-has-symbol] .label{font-size:var(--text-md)}}@layer refine.states{.key[data-pressed]{box-shadow:0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color,var(--color-contrast-200)), var(--keyboard-key-shadow,none);transform:translateY(var(--border-2))}:host([size=lg]) .key[data-pressed]{border-bottom-width:var(--border);box-shadow:0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color,var(--color-contrast-200)), var(--keyboard-key-shadow,var(--shadow-xs))}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=keyboard-key.css.js.map

package/dist/content/keyboard-key/keyboard-key.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.css.js","names":[],"sources":["../../../src/content/keyboard-key/keyboard-key.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .key {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--keyboard-key-padding-block, var(--size-0-5)) var(--keyboard-key-padding-inline, var(--size-1-5));\n    font-family: var(--keyboard-key-font-family, var(--font-mono, monospace));\n    font-size: var(--keyboard-key-font-size, var(--text-xs));\n    font-weight: var(--keyboard-key-font-weight, inherit);\n    line-height: var(--leading-normal);\n    color: var(--keyboard-key-color, var(--color-contrast-500));\n    white-space: nowrap;\n    background: var(--keyboard-key-bg, var(--color-contrast-100));\n    border: var(--border) solid var(--keyboard-key-border-color, var(--color-contrast-200));\n    border-block-end-width: calc(var(--border) + 1px);\n    border-radius: var(--keyboard-key-radius, var(--rounded-sm));\n    box-shadow: var(--keyboard-key-shadow, none);\n    transition:\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .symbol[hidden] {\n    display: none;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='lg']) .key {\n    position: relative;\n    min-width: var(--keyboard-key-min-width, var(--size-16));\n    min-height: var(--keyboard-key-min-height, var(--size-16));\n    padding: var(--keyboard-key-padding-block, var(--size-3)) var(--keyboard-key-padding-inline, var(--size-4));\n    font-family: var(--keyboard-key-font-family, var(--font-sans));\n    font-size: var(--keyboard-key-font-size, var(--text-2xl));\n    font-weight: var(--keyboard-key-font-weight, var(--font-medium));\n    color: var(--keyboard-key-color, var(--color-contrast-700));\n    background: var(--keyboard-key-bg, var(--color-contrast-50));\n    border-color: var(--keyboard-key-border-color, var(--color-contrast-300));\n    border-block-end-width: var(--size-1);\n    border-radius: var(--keyboard-key-radius, var(--rounded-md));\n    box-shadow: var(--keyboard-key-shadow, var(--shadow-xs));\n  }\n\n  :host([size='lg']) .key[data-has-symbol] {\n    align-items: flex-end;\n    justify-content: flex-start;\n    padding-block-start: var(--size-6);\n  }\n\n  :host([size='lg']) .symbol {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--keyboard-key-symbol-color, var(--color-contrast-500));\n  }\n\n  :host([size='lg']) .key[data-has-symbol] .label {\n    font-size: var(--text-md);\n  }\n}\n\n@layer refine.states {\n  .key[data-pressed] {\n    box-shadow:\n      0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color, var(--color-contrast-200)),\n      var(--keyboard-key-shadow, none);\n    transform: translateY(var(--border-2));\n  }\n\n  :host([size='lg']) .key[data-pressed] {\n    border-block-end-width: var(--border);\n    box-shadow:\n      0 0 0 var(--size-2) var(--keyboard-key-pressed-ring-color, var(--color-contrast-200)),\n      var(--keyboard-key-shadow, var(--shadow-xs));\n  }\n}\n"],"mappings":""}

package/dist/content/keyboard-key/keyboard-key.d.ts

@@ -0,0 +1,12 @@
+export type KeyboardKeySize = 'sm' | 'lg';
+export type OreKeyboardKeyProps = {
+    pressed?: boolean;
+    size?: KeyboardKeySize;
+    symbol?: string;
+};
+export type OreKeyboardShortcutProps = {
+    pressed?: boolean;
+};
+export declare const KEYBOARD_SHORTCUT_TAG: "ore-keyboard-shortcut";
+export declare const KEYBOARD_KEY_TAG: "ore-keyboard-key";
+//# sourceMappingURL=keyboard-key.d.ts.map

package/dist/content/keyboard-key/keyboard-key.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.d.ts","sourceRoot":"","sources":["../../../src/content/keyboard-key/keyboard-key.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAG,uBAAgC,CAAC;AAatE,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

package/dist/content/keyboard-key/keyboard-shortcut.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{vertical-align:middle;display:inline-flex}.shortcut{box-sizing:border-box;gap:var(--keyboard-shortcut-gap,var(--size-2));padding:var(--keyboard-shortcut-padding,var(--size-2));border-radius:var(--keyboard-shortcut-radius,var(--rounded-lg));transition:background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);background:0 0;align-items:stretch;display:inline-flex}}@layer refine.states{.shortcut[data-pressed]{background:var(--keyboard-shortcut-pressed-bg,var(--color-contrast-200));box-shadow:0 0 0 var(--border) var(--keyboard-shortcut-pressed-border-color,var(--color-contrast-300));transform:translateY(var(--border-2))}}`;exports.default=e;
+//# sourceMappingURL=keyboard-shortcut.css.cjs.map

package/dist/content/keyboard-key/keyboard-shortcut.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-shortcut.css.cjs","names":[],"sources":["../../../src/content/keyboard-key/keyboard-shortcut.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .shortcut {\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--keyboard-shortcut-gap, var(--size-2));\n    align-items: stretch;\n    padding: var(--keyboard-shortcut-padding, var(--size-2));\n    background: transparent;\n    border-radius: var(--keyboard-shortcut-radius, var(--rounded-lg));\n    transition:\n      background var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast);\n  }\n}\n\n@layer refine.states {\n  .shortcut[data-pressed] {\n    background: var(--keyboard-shortcut-pressed-bg, var(--color-contrast-200));\n    box-shadow: 0 0 0 var(--border) var(--keyboard-shortcut-pressed-border-color, var(--color-contrast-300));\n    transform: translateY(var(--border-2));\n  }\n}\n"],"mappings":""}

package/dist/content/keyboard-key/keyboard-shortcut.css.js

@@ -0,0 +1,6 @@
+//#region src/content/keyboard-key/keyboard-shortcut.css?inline
+var e = "@layer refine.base{:host{vertical-align:middle;display:inline-flex}.shortcut{box-sizing:border-box;gap:var(--keyboard-shortcut-gap,var(--size-2));padding:var(--keyboard-shortcut-padding,var(--size-2));border-radius:var(--keyboard-shortcut-radius,var(--rounded-lg));transition:background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);background:0 0;align-items:stretch;display:inline-flex}}@layer refine.states{.shortcut[data-pressed]{background:var(--keyboard-shortcut-pressed-bg,var(--color-contrast-200));box-shadow:0 0 0 var(--border) var(--keyboard-shortcut-pressed-border-color,var(--color-contrast-300));transform:translateY(var(--border-2))}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=keyboard-shortcut.css.js.map

package/dist/content/keyboard-key/keyboard-shortcut.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-shortcut.css.js","names":[],"sources":["../../../src/content/keyboard-key/keyboard-shortcut.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .shortcut {\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--keyboard-shortcut-gap, var(--size-2));\n    align-items: stretch;\n    padding: var(--keyboard-shortcut-padding, var(--size-2));\n    background: transparent;\n    border-radius: var(--keyboard-shortcut-radius, var(--rounded-lg));\n    transition:\n      background var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast);\n  }\n}\n\n@layer refine.states {\n  .shortcut[data-pressed] {\n    background: var(--keyboard-shortcut-pressed-bg, var(--color-contrast-200));\n    box-shadow: 0 0 0 var(--border) var(--keyboard-shortcut-pressed-border-color, var(--color-contrast-300));\n    transform: translateY(var(--border-2));\n  }\n}\n"],"mappings":""}

package/dist/content/qr-code/qr-code.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_dark:var(--qr-code-dark,currentColor);--_light:var(--qr-code-light,transparent);--_radius:var(--qr-code-radius,var(--rounded-md));--_padding:var(--qr-code-padding,var(--size-3));--_bg:var(--qr-code-bg,var(--color-canvas));--_error-color:var(--qr-code-error-color,var(--text-color-secondary));--_border:var(--qr-code-border,var(--border));--_border-color:var(--qr-code-border-color,var(--color-divider));--_shadow:var(--qr-code-shadow,var(--shadow-sm));display:inline-block}:host([hidden]){display:none}.wrapper{--_size:var(--qr-code-size,var(--_size-px,192px));gap:var(--size-2);flex-direction:column;align-items:center;max-width:100%;display:inline-flex}.svg{box-sizing:border-box;width:var(--_size);height:var(--_size);padding:var(--_padding);background:var(--_light);border-radius:var(--_radius);display:block}:host([variant=card]) .svg{background:var(--_bg);border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}.svg svg{width:100%;height:100%;display:block}.caption{margin-block:var(--size-2);font-size:var(--text-sm);color:var(--text-color-secondary);text-align:center}.error{box-sizing:border-box;width:var(--_size);min-height:var(--_size);padding:var(--_padding);font-size:var(--text-sm);color:var(--_error-color);text-align:center;border:var(--border-width,1px) dashed var(--color-contrast-300);border-radius:var(--_radius);justify-content:center;align-items:center;display:flex}}`;exports.default=e;
+//# sourceMappingURL=qr-code.css.cjs.map

package/dist/content/qr-code/qr-code.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.css.cjs","names":[],"sources":["../../../src/content/qr-code/qr-code.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dark: var(--qr-code-dark, currentColor);\n    --_light: var(--qr-code-light, transparent);\n    --_radius: var(--qr-code-radius, var(--rounded-md));\n    --_padding: var(--qr-code-padding, var(--size-3));\n    --_bg: var(--qr-code-bg, var(--color-canvas));\n    --_error-color: var(--qr-code-error-color, var(--text-color-secondary));\n    --_border: var(--qr-code-border, var(--border));\n    --_border-color: var(--qr-code-border-color, var(--color-divider));\n    --_shadow: var(--qr-code-shadow, var(--shadow-sm));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .wrapper {\n    /* --_size resolves here (not :host) so it can see the inline --_size-px set on this element. */\n    --_size: var(--qr-code-size, var(--_size-px, 192px));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    max-width: 100%;\n  }\n\n  .svg {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_size);\n    height: var(--_size);\n    padding: var(--_padding);\n    background: var(--_light);\n    border-radius: var(--_radius);\n  }\n\n  :host([variant='card']) .svg {\n    background: var(--_bg);\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  .svg svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .caption {\n    margin-block: var(--size-2);\n    font-size: var(--text-sm);\n    color: var(--text-color-secondary);\n    text-align: center;\n  }\n\n  .error {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_size);\n    min-height: var(--_size);\n    padding: var(--_padding);\n    font-size: var(--text-sm);\n    color: var(--_error-color);\n    text-align: center;\n    border: var(--border-width, 1px) dashed var(--color-contrast-300);\n    border-radius: var(--_radius);\n  }\n}\n"],"mappings":""}

package/dist/content/qr-code/qr-code.css.js

@@ -0,0 +1,6 @@
+//#region src/content/qr-code/qr-code.css?inline
+var e = "@layer refine.base{:host{--_dark:var(--qr-code-dark,currentColor);--_light:var(--qr-code-light,transparent);--_radius:var(--qr-code-radius,var(--rounded-md));--_padding:var(--qr-code-padding,var(--size-3));--_bg:var(--qr-code-bg,var(--color-canvas));--_error-color:var(--qr-code-error-color,var(--text-color-secondary));--_border:var(--qr-code-border,var(--border));--_border-color:var(--qr-code-border-color,var(--color-divider));--_shadow:var(--qr-code-shadow,var(--shadow-sm));display:inline-block}:host([hidden]){display:none}.wrapper{--_size:var(--qr-code-size,var(--_size-px,192px));gap:var(--size-2);flex-direction:column;align-items:center;max-width:100%;display:inline-flex}.svg{box-sizing:border-box;width:var(--_size);height:var(--_size);padding:var(--_padding);background:var(--_light);border-radius:var(--_radius);display:block}:host([variant=card]) .svg{background:var(--_bg);border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}.svg svg{width:100%;height:100%;display:block}.caption{margin-block:var(--size-2);font-size:var(--text-sm);color:var(--text-color-secondary);text-align:center}.error{box-sizing:border-box;width:var(--_size);min-height:var(--_size);padding:var(--_padding);font-size:var(--text-sm);color:var(--_error-color);text-align:center;border:var(--border-width,1px) dashed var(--color-contrast-300);border-radius:var(--_radius);justify-content:center;align-items:center;display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=qr-code.css.js.map

package/dist/content/qr-code/qr-code.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.css.js","names":[],"sources":["../../../src/content/qr-code/qr-code.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dark: var(--qr-code-dark, currentColor);\n    --_light: var(--qr-code-light, transparent);\n    --_radius: var(--qr-code-radius, var(--rounded-md));\n    --_padding: var(--qr-code-padding, var(--size-3));\n    --_bg: var(--qr-code-bg, var(--color-canvas));\n    --_error-color: var(--qr-code-error-color, var(--text-color-secondary));\n    --_border: var(--qr-code-border, var(--border));\n    --_border-color: var(--qr-code-border-color, var(--color-divider));\n    --_shadow: var(--qr-code-shadow, var(--shadow-sm));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .wrapper {\n    /* --_size resolves here (not :host) so it can see the inline --_size-px set on this element. */\n    --_size: var(--qr-code-size, var(--_size-px, 192px));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    max-width: 100%;\n  }\n\n  .svg {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_size);\n    height: var(--_size);\n    padding: var(--_padding);\n    background: var(--_light);\n    border-radius: var(--_radius);\n  }\n\n  :host([variant='card']) .svg {\n    background: var(--_bg);\n    border: var(--_border) solid var(--_border-color);\n    box-shadow: var(--_shadow);\n  }\n\n  .svg svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .caption {\n    margin-block: var(--size-2);\n    font-size: var(--text-sm);\n    color: var(--text-color-secondary);\n    text-align: center;\n  }\n\n  .error {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_size);\n    min-height: var(--_size);\n    padding: var(--_padding);\n    font-size: var(--text-sm);\n    color: var(--_error-color);\n    text-align: center;\n    border: var(--border-width, 1px) dashed var(--color-contrast-300);\n    border-radius: var(--_radius);\n  }\n}\n"],"mappings":""}

package/dist/content/qr-code/qr-code.d.ts

@@ -0,0 +1,74 @@
+import { type QrErrorCorrection, SigilError } from '@vielzeug/sigil';
+import type { ComponentSize, RoundedSize } from '../../types';
+/** QR code component properties */
+export type OreQrCodeProps = {
+    /** Error-correction level */
+    'error-correction'?: QrErrorCorrection;
+    /** Accessible label for the rendered code */
+    label?: string;
+    /** Quiet-zone width in modules */
+    margin?: number;
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** Rendered size: named scale or pixel number */
+    size?: ComponentSize | number;
+    /** The payload to encode */
+    value?: string;
+    /** Surface variant: 'flat' (transparent) or 'card' (themed background) */
+    variant?: 'flat' | 'card';
+};
+/** QR code component events */
+export type OreQrCodeEvents = {
+    /** Emitted whenever the code is (re)rendered. detail: `{ version, size }` */
+    render: {
+        version: number;
+        size: number;
+    };
+    /** Emitted when encoding fails (e.g. payload exceeds capacity). detail: `{ error }` */
+    error: {
+        error: SigilError;
+    };
+};
+/**
+ * Renders a QR code for `value` as inline SVG — themeable via `currentColor`,
+ * crisp at any scale, no canvas. On capacity errors the component shows an
+ * error state and emits `error` rather than throwing.
+ *
+ * @element ore-qr-code
+ *
+ * @attr {string} value - The payload to encode
+ * @attr {string} error-correction - 'L' | 'M' | 'Q' | 'H' (default 'M')
+ * @attr {number} margin - Quiet-zone modules (default 4)
+ * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value
+ * @attr {string} label - Accessible label (default "QR code")
+ * @attr {string} rounded - Border radius for the card variant
+ *
+ * @fires render - detail: `{ version, size }` after each successful render
+ * @fires error - detail: `{ error }` when encoding fails
+ *
+ * @slot caption - Optional caption rendered below the code
+ *
+ * @cssprop --qr-code-dark - Module color (default `currentColor`)
+ * @cssprop --qr-code-light - Background color (default `transparent`)
+ * @cssprop --qr-code-size - Rendered size in px (overrides `size`)
+ * @cssprop --qr-code-radius - Border radius
+ * @cssprop --qr-code-padding - Inner padding
+ * @cssprop --qr-code-bg - Card background (variant="card")
+ * @cssprop --qr-code-border - Card border width (variant="card")
+ * @cssprop --qr-code-border-color - Card border color (variant="card")
+ * @cssprop --qr-code-shadow - Card box shadow (variant="card")
+ * @cssprop --qr-code-error-color - Error-state text color
+ *
+ * @part wrapper - Outer container
+ * @part svg - The rendered `<svg>` element
+ * @part caption - Caption slot container
+ * @part error - Error-state container
+ *
+ * @example
+ * ```html
+ * <ore-qr-code value="https://example.com"></ore-qr-code>
+ * <ore-qr-code value="otpauth://…" error-correction="H" size="256"></ore-qr-code>
+ * ```
+ */
+export declare const QR_CODE_TAG: "ore-qr-code";
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/content/qr-code/qr-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../../../src/content/qr-code/qr-code.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,iBAAiB,EAAE,UAAU,EAAS,MAAM,iBAAiB,CAAC;AAGtF,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG9D,mCAAmC;AACnC,MAAM,MAAM,cAAc,GAAG;IAC3B,6BAA6B;IAC7B,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;IACvC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC9B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,eAAe,GAAG;IAC5B,6EAA6E;IAC7E,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,uFAAuF;IACvF,KAAK,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,CAAC;CAC9B,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}

package/dist/content/stepper/step.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;display:flex}.label{gap:var(--size-1);min-width:0;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}`;exports.default=e;
+var e=`@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;max-width:100%;display:flex}.label{gap:var(--size-1);min-width:0;max-width:100%;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}`;exports.default=e;
 //# sourceMappingURL=step.css.cjs.map

package/dist/content/stepper/step.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}

package/dist/content/stepper/step.css.js

@@ -1,5 +1,5 @@
 //#region src/content/stepper/step.css?inline
-var e = "@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;display:flex}.label{gap:var(--size-1);min-width:0;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}";
+var e = "@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;max-width:100%;display:flex}.label{gap:var(--size-1);min-width:0;max-width:100%;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}";
 //#endregion
 export { e as default };