@vielzeug/refine 1.8.0 → 2.0.0

package/dist/command-palette.js

@@ -1,114 +1,126 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import { warn as t } from "./_dev.js";
-import { lifecycleSignal as n } from "./headless/ore.js";
-import { createListControl as r } from "./headless/nav.js";
-import { announce as i } from "./headless/announcer.js";
-import { useDialogControl as a } from "./overlay/shared/use-dialog.js";
-import { buildRows as o, filterItems as s, normalizeItem as c, parseSlottedItems as l, splitShortcutKeys as u } from "./overlay/command-palette/command-palette-items.js";
-import d from "./overlay/command-palette/command-palette.css.js";
-import { define as f, getHost as p, html as m, onCleanup as h, onEvent as g, onMounted as _, prop as v, ref as y, useEmit as b } from "@vielzeug/ore";
-import { computed as x, signal as S, watch as C } from "@vielzeug/ripple";
-import { createKeymap as w } from "@vielzeug/keymap";
+import { lifecycleSignal as e } from "./core/ore.js";
+import "./_dev.js";
+import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { announce as n } from "./core/announcer.js";
+import { createListControl as r } from "./core/nav.js";
+import { useDialogControl as i } from "./overlay/shared/use-dialog.js";
+import { buildRows as a, filterItems as o, normalizeItem as s, parseSlottedItems as c, splitShortcutKeys as l } from "./overlay/command-palette/command-palette-items.js";
+import u from "./overlay/command-palette/command-palette.css.js";
+import { define as d, getHost as f, html as p, onCleanup as m, onEvent as h, onMounted as g, prop as _, ref as v, useEmit as y } from "@vielzeug/ore";
+import { computed as b, signal as x } from "@vielzeug/ripple";
+import { watch as S } from "@vielzeug/ripple/watch";
+import { createKeymap as C } from "@vielzeug/keymap";
 //#region src/overlay/command-palette/command-palette.ts
-var T = "ore-command-palette-item";
-f(T, { setup() {
-	return m``;
+var w = (e) => e == null ? void 0 : e === "" || e === "true", T = "ore-command-palette-item";
+d(T, { setup() {
+	return p``;
 } });
 var E = "ore-command-palette";
-f(E, {
+d(E, {
 	props: {
-		"empty-text": v.string("No results found."),
-		items: v.data(),
-		"keep-open-on-select": v.bool(!1),
-		label: v.string("Command palette"),
-		loading: v.bool(!1),
-		"no-filter": v.bool(!1),
-		open: v.bool(!1),
-		placeholder: v.string("Type a command or search…"),
-		shortcut: v.string("mod+k")
+		"default-open": _.bool(!1),
+		"empty-text": _.string("No results found."),
+		items: _.data(),
+		"keep-open-on-select": _.bool(!1),
+		label: _.string("Command palette"),
+		loading: _.bool(!1),
+		"no-filter": _.bool(!1),
+		open: {
+			default: void 0,
+			parse: w
+		},
+		placeholder: _.string("Type a command or search…"),
+		shortcut: _.string("mod+k")
 	},
-	setup(e) {
-		let d = p(), f = b(), v = n(h), T = y(), E = y(), D = "cmdk-listbox", O = null, k = S(""), A = S([]), j = () => {
-			A.value = l([...d.children]);
+	setup(t) {
+		let u = f(), d = y(), _ = e(m), w = v(), T = v(), E = "cmdk-listbox", D = null, O = x(""), k = x([]), A = () => {
+			k.value = c([...u.children]);
 		};
-		j();
-		let M = new MutationObserver(j);
-		M.observe(d, {
+		A();
+		let j = new MutationObserver(A);
+		j.observe(u, {
 			characterData: !0,
 			childList: !0,
 			subtree: !0
-		}), h(() => M.disconnect());
-		let N = x(() => {
-			let t = e.items.value;
-			return Array.isArray(t) ? t.map(c) : A.value;
-		}), P = x(() => s(N.value, k.value, !!e["no-filter"].value)), F = x(() => o(P.value)), I = r({
-			getItems: () => P.value,
+		}), m(() => j.disconnect());
+		let M = b(() => {
+			let e = t.items.value;
+			return Array.isArray(e) ? e.map(s) : k.value;
+		}), N = b(() => o(M.value, O.value, !!t["no-filter"].value)), P = b(() => a(N.value)), F = r({
+			getItems: () => N.value,
 			isItemDisabled: (e) => e.disabled,
 			onNavigate: () => {
-				O?.querySelector("[data-focused]")?.scrollIntoView({ block: "nearest" });
+				D?.querySelector("[data-focused]")?.scrollIntoView({ block: "nearest" });
 			},
-			signal: v
-		}), { focusedIndex: L } = I, R = () => {
-			k.value = "", I.reset();
-		}, { closeWithAnimation: z, overlay: B, requestClose: V, setupNativeListeners: H } = a({
-			dialogRef: T,
-			getPanelEl: () => T.value?.querySelector(".panel"),
-			host: d,
-			initialFocus: x(() => ".search-input"),
+			signal: _
+		}), { focusedIndex: I } = F, L = () => {
+			O.value = "", F.reset();
+		}, { closeWithAnimation: R, overlay: z, requestClose: B, setupNativeListeners: V } = i({
+			defaultOpen: t["default-open"],
+			dialogRef: w,
+			getPanelEl: () => w.value?.querySelector(".panel"),
+			host: u,
+			initialFocus: b(() => ".search-input"),
 			isPersistent: () => !1,
-			onCleanup: h,
-			onEvent: g,
+			onCleanup: m,
+			onEvent: h,
 			onNativeClose: (e) => {
-				f("close", { reason: e }), R();
+				d("open-change", {
+					open: !1,
+					reason: e
+				}), L();
 			},
 			onOpen: (e) => {
-				f("open", { reason: e }), I.navigate("first");
+				d("open-change", {
+					open: !0,
+					reason: e
+				}), F.navigate("first");
 			},
-			openProp: e.open,
-			performClose: () => z(),
-			returnFocus: x(() => !0)
-		}), U = w();
-		U.mount(window), h(() => U.dispose());
-		let W = null;
-		C(e.shortcut, (e) => {
-			W?.(), W = null;
-			let n = (e ?? "").trim();
-			if (n) try {
-				W = U.bind(n, () => {
-					B.toggle("keyboard", "trigger");
+			openProp: t.open,
+			performClose: () => R(),
+			returnFocus: b(() => !0)
+		}), H = C();
+		H.mount(window), m(() => H.dispose());
+		let U = null;
+		S(t.shortcut, (e) => {
+			U?.(), U = null;
+			let t = (e ?? "").trim();
+			if (t) try {
+				U = H.bind(t, () => {
+					z.toggle("keyboard", "trigger");
 				});
 			} catch (e) {
-				t(`invalid "shortcut" value "${n}" — ${e instanceof Error ? e.message : String(e)}`);
+				`${t}${e instanceof Error ? e.message : String(e)}`;
 			}
-		}, { immediate: !0 }), _(() => {
-			H();
+		}, { immediate: !0 }), g(() => {
+			V();
 		});
-		function G(t) {
-			t.disabled || (f("select", {
-				item: t,
-				label: t.label,
-				value: t.value
-			}), e["keep-open-on-select"].value ? E.value?.focus() : V("trigger"));
+		function W(e) {
+			e.disabled || (d("select", {
+				item: e,
+				label: e.label,
+				value: e.value
+			}), t["keep-open-on-select"].value ? T.value?.focus() : B("trigger"));
 		}
-		function K(t) {
-			let n = t.target.value;
-			k.value = n, I.navigate("first"), f("search", { query: n });
-			let r = P.value.length;
-			i(r === 0 ? e["empty-text"].value : `${r} result${r === 1 ? "" : "s"} found`);
+		function G(e) {
+			let r = e.target.value;
+			O.value = r, F.navigate("first"), d("search", { query: r });
+			let i = N.value.length;
+			n(i === 0 ? t["empty-text"].value : `${i} result${i === 1 ? "" : "s"} found`);
 		}
-		function q(e) {
-			if (!I.handleKeydown(e) && e.key === "Enter") {
-				let t = I.getActiveItem() ?? P.value.find((e) => !e.disabled);
-				t && (e.preventDefault(), G(t));
+		function K(e) {
+			if (!F.handleKeydown(e) && e.key === "Enter") {
+				let t = F.getActiveItem() ?? N.value.find((e) => !e.disabled);
+				t && (e.preventDefault(), W(t));
 			}
 		}
-		return m`
-      <dialog ref="${T}" class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
+		return p`
+      <dialog ref="${w}" class="dialog" part="dialog" aria-label="${t.label}" aria-modal="true">
         <div class="panel" part="panel">
           <div class="search" part="search">
             <span class="search-icon" aria-hidden="true"><ore-icon name="search" size="18"></ore-icon></span>
             <input
-              ref="${E}"
+              ref="${T}"
               class="search-input"
               part="input"
               type="text"
@@ -117,60 +129,80 @@ f(E, {
               spellcheck="false"
               aria-expanded="true"
               aria-autocomplete="list"
-              aria-controls="${D}"
-              aria-activedescendant="${() => L.value >= 0 ? `${D}-opt-${L.value}` : ""}"
-              placeholder="${e.placeholder}"
-              value="${k}"
-              @input="${K}"
-              @keydown="${q}" />
-            <span class="search-loader" ?hidden="${() => !e.loading.value}" aria-hidden="true"></span>
+              aria-controls="${E}"
+              aria-activedescendant="${() => I.value >= 0 ? `${E}-opt-${I.value}` : ""}"
+              placeholder="${t.placeholder}"
+              value="${O}"
+              @input="${G}"
+              @keydown="${K}" />
+            <span class="search-loader" ?hidden="${() => !t.loading.value}" aria-hidden="true"></span>
           </div>
           <div
             class="listbox"
             part="listbox"
             role="listbox"
-            id="${D}"
+            id="${E}"
             aria-label="Commands"
             ref="${(e) => {
-			O = e;
+			D = e;
 		}}">
-            <div class="empty" role="presentation" ?hidden="${() => e.loading.value || F.value.length > 0}">
-              ${() => e["empty-text"].value}
+            <div class="empty" role="presentation" ?hidden="${() => t.loading.value || P.value.length > 0}">
+              ${() => t["empty-text"].value}
             </div>
-            ${() => F.value.map((e) => e.type === "group" ? m`<div class="group-heading" role="presentation">${e.group}</div>` : m`<div
-                      class="item"
-                      part="item"
-                      role="option"
-                      id="${`${D}-opt-${e.idx}`}"
-                      aria-selected="${() => String(L.value === e.idx)}"
-                      aria-disabled="${() => String(e.item.disabled)}"
-                      ?data-focused="${() => L.value === e.idx}"
-                      ?data-disabled="${() => e.item.disabled}"
-                      @click="${(t) => {
-			t.stopPropagation(), G(e.item);
+            ${() => P.value.map((e) => e.type === "group" ? p`
+                      <div class="group-heading" role="presentation">${e.group}</div>
+                    ` : p`
+                      <div
+                        class="item"
+                        part="item"
+                        role="option"
+                        id="${`${E}-opt-${e.idx}`}"
+                        aria-selected="${() => String(I.value === e.idx)}"
+                        aria-disabled="${() => String(e.item.disabled)}"
+                        ?data-focused="${() => I.value === e.idx}"
+                        ?data-disabled="${() => e.item.disabled}"
+                        @click="${(t) => {
+			t.stopPropagation(), W(e.item);
 		}}"
-                      @pointerenter="${() => {
-			I.set(e.idx);
+                        @pointerenter="${() => {
+			F.set(e.idx);
 		}}">
-                      ${e.item.icon ? m`<span class="item-icon" aria-hidden="true"
-                              ><ore-icon name="${e.item.icon}" size="16"></ore-icon
-                            ></span>` : ""}
-                      <span class="item-label">${e.item.label}</span>
-                      ${e.item.shortcut ? m`<span class="item-shortcut"
-                              >${u(e.item.shortcut).map((e) => m`<kbd>${e}</kbd>`)}</span
-                            >` : ""}
-                    </div>`)}
+                        ${e.item.icon ? p`
+                                <span class="item-icon" aria-hidden="true">
+                                  <ore-icon name="${e.item.icon}" size="16"></ore-icon>
+                                </span>
+                              ` : ""}
+                        <span class="item-label">${e.item.label}</span>
+                        ${e.item.shortcut ? p`
+                                <span class="item-shortcut">
+                                  ${l(e.item.shortcut).map((e) => p`
+                                      <kbd>${e}</kbd>
+                                    `)}
+                                </span>
+                              ` : ""}
+                      </div>
+                    `)}
           </div>
           <div class="footer" part="footer">
-            <span class="footer-hint"><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
-            <span class="footer-hint"><kbd>Enter</kbd> Select</span>
-            <span class="footer-hint"><kbd>Esc</kbd> Close</span>
+            <span class="footer-hint">
+              <kbd>↑</kbd>
+              <kbd>↓</kbd>
+              Navigate
+            </span>
+            <span class="footer-hint">
+              <kbd>Enter</kbd>
+              Select
+            </span>
+            <span class="footer-hint">
+              <kbd>Esc</kbd>
+              Close
+            </span>
           </div>
         </div>
       </dialog>
     `;
 	},
-	styles: [e, d]
+	styles: [t, u]
 });
 //#endregion
 export { T as COMMAND_PALETTE_ITEM_TAG, E as COMMAND_PALETTE_TAG };

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

package/dist/content/avatar/avatar-group.d.ts

@@ -0,0 +1,33 @@
+/** AvatarGroup component properties */
+export type OreAvatarGroupProps = {
+    /** Maximum number of avatars to show before showing a +N badge */
+    max?: number;
+    /** Total count shown in the overflow badge (defaults to the actual hidden count) */
+    total?: number;
+};
+/**
+ * Groups multiple `ore-avatar` elements in a stacked, overlapping row.
+ *
+ * @element ore-avatar-group
+ *
+ * @attr {number} max - Max visible avatars before overflow badge (default: 5)
+ * @attr {number} total - Override the total count displayed in the badge
+ *
+ * @slot - `ore-avatar` elements
+ *
+ * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)
+ *
+ * @part overflow - Overflow count badge shown when avatars exceed `max`.
+ *
+ * @example
+ * ```html
+ * <ore-avatar-group max="3">
+ *   <ore-avatar src="/a.jpg" alt="Alice"></ore-avatar>
+ *   <ore-avatar src="/b.jpg" alt="Bob"></ore-avatar>
+ *   <ore-avatar src="/c.jpg" alt="Carol"></ore-avatar>
+ *   <ore-avatar src="/d.jpg" alt="Dave"></ore-avatar>
+ * </ore-avatar-group>
+ * ```
+ */
+export declare const AVATAR_GROUP_TAG: "ore-avatar-group";
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/content/avatar/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/content/avatar/avatar-group.ts"],"names":[],"mappings":"AAKA,uCAAuC;AACvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

package/dist/content/avatar/avatar.d.ts

@@ -53,36 +53,4 @@ export type OreAvatarProps = {
  * ```
  */
 export declare const AVATAR_TAG: "ore-avatar";
-/** AvatarGroup component properties */
-export type OreAvatarGroupProps = {
-    /** Maximum number of avatars to show before showing a +N badge */
-    max?: number;
-    /** Total count shown in the overflow badge (defaults to the actual hidden count) */
-    total?: number;
-};
-/**
- * Groups multiple `ore-avatar` elements in a stacked, overlapping row.
- *
- * @element ore-avatar-group
- *
- * @attr {number} max - Max visible avatars before overflow badge (default: 5)
- * @attr {number} total - Override the total count displayed in the badge
- *
- * @slot - `ore-avatar` elements
- *
- * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)
- *
- * @part overflow - Overflow count badge shown when avatars exceed `max`.
- *
- * @example
- * ```html
- * <ore-avatar-group max="3">
- *   <ore-avatar src="/a.jpg" alt="Alice"></ore-avatar>
- *   <ore-avatar src="/b.jpg" alt="Bob"></ore-avatar>
- *   <ore-avatar src="/c.jpg" alt="Carol"></ore-avatar>
- *   <ore-avatar src="/d.jpg" alt="Dave"></ore-avatar>
- * </ore-avatar-group>
- * ```
- */
-export declare const AVATAR_GROUP_TAG: "ore-avatar-group";
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/content/avatar/avatar.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,cAAc,CAAC;AAMtB,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AASlE,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,4FAA4F;IAC5F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC;AAwGhD,uCAAuC;AACvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/content/avatar/avatar.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,cAAc,CAAC;AAKtB,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AASlE,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,4FAA4F;IAC5F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

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