@vielzeug/refine 1.1.3 → 1.3.1

package/dist/otp-input.js

@@ -2,119 +2,121 @@ import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
 import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
 import { disablableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
 import { createListControl as o } from "./headless/nav.js";
-import { FORM_CTX as s, useFormContext as c } from "./inputs/shared/form-context.js";
-import l from "./inputs/otp-input/otp-input.css?inline.js";
-import { define as u, html as d, inject as f, prop as p, useField as m } from "@vielzeug/ore";
-import { computed as h, signal as g, watch as _ } from "@vielzeug/ripple";
+import { useField as s } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import { FORM_CTX as c, useFormContext as l } from "./inputs/shared/form-context.js";
+import u from "./inputs/otp-input/otp-input.css.js";
+import { bind as d, define as f, getHost as p, html as m, inject as h, onMounted as g, prop as _, useEmit as v } from "@vielzeug/ore";
+import { computed as y, signal as b, watch as x } from "@vielzeug/ripple";
 //#region src/inputs/otp-input/otp-input.ts
-var v = "ore-otp-input";
-u(v, {
+var S = "ore-otp-input";
+f(S, {
 	formAssociated: !0,
 	props: {
 		...a,
 		...i,
 		...r,
-		label: p.string("One-time password"),
-		length: p.number(6),
-		masked: p.bool(!1),
-		name: p.string(),
-		separator: p.string(),
-		type: p.oneOf(["numeric", "alphanumeric"], "numeric"),
-		value: p.string(),
-		variant: p.string()
+		label: _.string("One-time password"),
+		length: _.number(6),
+		masked: _.bool(!1),
+		name: _.string(),
+		separator: _.string(),
+		type: _.oneOf(["numeric", "alphanumeric"], "numeric"),
+		value: _.string(),
+		variant: _.string()
 	},
-	setup(e, { bind: t, el: n, emit: r, onMounted: i }) {
-		let a = c(t, e, f(s)), l = h(() => Number(e.length.value) || 6), u = a.disabled, p = h(() => Array.from({ length: l.value }, (e, t) => t)), v = g(String(e.value.value || "")), y = () => String(e.value.value || "");
-		m({
-			disabled: u,
+	setup(e) {
+		let t = p(), n = v(), r = l(e, h(c)), i = y(() => Number(e.length.value) || 6), a = r.disabled, u = y(() => Array.from({ length: i.value }, (e, t) => t)), f = b(String(e.value.value || "")), _ = () => String(e.value.value || "");
+		s({
+			disabled: a,
 			toFormValue: (e) => e,
-			value: v
-		}), t({ attr: {
-			size: a.size,
-			value: () => v.value || null,
-			variant: a.variant
+			value: f
+		}), d({ attr: {
+			size: r.size,
+			value: () => f.value || null,
+			variant: r.variant
 		} });
-		function b() {
-			return [...n.shadowRoot?.querySelectorAll("input.cell") ?? []];
+		function S() {
+			return [...t.shadowRoot?.querySelectorAll("input.cell") ?? []];
 		}
-		let x = o({
-			getItems: () => b(),
+		let C = o({
+			getItems: () => S(),
 			keys: {
 				next: ["ArrowRight"],
 				prev: ["ArrowLeft"]
 			},
 			loop: !1,
 			onNavigate: (e, t) => {
-				b()[t]?.focus();
+				S()[t]?.focus();
 			}
 		});
-		function S() {
-			return b().map((e) => e.value).join("");
+		function w() {
+			return S().map((e) => e.value).join("");
 		}
-		function C(e) {
-			let t = b(), n = String(e || "").slice(0, t.length);
+		function T(e) {
+			let t = S(), n = String(e || "").slice(0, t.length);
 			for (let e of t) e.value = "";
 			n.split("").forEach((e, n) => {
 				t[n] && (t[n].value = e);
-			}), v.value = S();
+			}), f.value = w();
 		}
-		function w(e, t) {
-			let n = b(), i = S(), a = t ?? (i.length === n.length && i.split("").every(Boolean));
-			v.value = i, r("change", {
+		function E(e, t) {
+			let r = S(), i = w(), a = t ?? (i.length === r.length && i.split("").every(Boolean));
+			f.value = i, n("change", {
 				complete: a,
 				originalEvent: e,
 				value: i
-			}), a && r("complete", {
+			}), a && n("complete", {
 				originalEvent: e,
 				value: i
 			});
 		}
-		function T(t) {
+		function D(t) {
 			return e.type.value === "numeric" ? /^\d$/.test(t) : /^[a-z\d]$/i.test(t);
 		}
-		function E(e, t) {
+		function O(e, t) {
 			let n = e.target, r = n.value;
-			if (r.length > 1 && (r = r.slice(-1)), r && !T(r)) {
+			if (r.length > 1 && (r = r.slice(-1)), r && !D(r)) {
 				n.value = "";
 				return;
 			}
 			n.value = r;
-			let i = b();
-			w(e), r && t < i.length - 1 && (i[t + 1].focus(), i[t + 1].select());
+			let i = S();
+			E(e), r && t < i.length - 1 && (i[t + 1].focus(), i[t + 1].select());
 		}
-		function D(e, t) {
-			let n = e.target, r = b();
-			if (x.set(t), e.key === "Backspace") {
+		function k(e, t) {
+			let n = e.target, r = S();
+			if (C.set(t), e.key === "Backspace") {
 				if (n.value) n.value = "";
 				else if (t > 0) {
-					let e = r[x.navigate("prev")];
+					let e = r[C.navigate("prev")];
 					e && (e.select(), e.value = "");
 				}
-				w(e, !1), e.preventDefault();
-			} else x.handleKeydown(e);
+				E(e, !1), e.preventDefault();
+			} else C.handleKeydown(e);
 		}
-		function O(e) {
+		function A(e) {
 			e.preventDefault();
-			let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => T(e)).slice(0, l.value), n = b();
+			let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => D(e)).slice(0, i.value), n = S();
 			t.forEach((e, t) => {
 				n[t] && (n[t].value = e);
-			}), w(e), n[Math.min(t.length, n.length - 1)]?.focus();
+			}), E(e), n[Math.min(t.length, n.length - 1)]?.focus();
 		}
-		_(e.value, (e) => {
-			C(String(e || ""));
-		}), _(e.length, () => {
-			requestAnimationFrame(() => C(y()));
+		x(e.value, (e) => {
+			T(String(e || ""));
+		}), x(e.length, () => {
+			requestAnimationFrame(() => T(_()));
 		});
-		let k = h(() => {
+		let j = y(() => {
 			let t = Number(e.length.value) || 6;
 			return e.separator.value == null ? -1 : Math.floor(t / 2);
 		});
-		return i(() => {
-			C(y());
-		}), d`
+		return g(() => {
+			T(_());
+		}), m`
       <div class="otp-group" part="group" role="group" :aria-label="${e.label}">
-        ${() => p.value.map((t) => d`
-              ${() => k.value > 0 && t === k.value ? d`<span class="separator" aria-hidden="true">${() => e.separator.value || "-"}</span>` : ""}
+        ${() => u.value.map((t) => m`
+              ${() => j.value > 0 && t === j.value ? m`<span class="separator" aria-hidden="true">${() => e.separator.value || "-"}</span>` : ""}
               <input
                 class="cell"
                 part="cell"
@@ -122,11 +124,11 @@ u(v, {
                 :inputmode="${() => e.type.value === "numeric" ? "numeric" : "text"}"
                 maxlength="1"
                 :autocomplete="${() => t === 0 ? "one-time-code" : "off"}"
-                :aria-label="${() => `Digit ${t + 1} of ${l.value}`}"
-                :disabled="${() => u.value ? !0 : null}"
-                @input="${(e) => E(e, t)}"
-                @keydown="${(e) => D(e, t)}"
-                @paste="${(e) => t === 0 ? O(e) : e.preventDefault()}"
+                :aria-label="${() => `Digit ${t + 1} of ${i.value}`}"
+                :disabled="${() => a.value ? !0 : null}"
+                @input="${(e) => O(e, t)}"
+                @keydown="${(e) => k(e, t)}"
+                @paste="${(e) => t === 0 ? A(e) : e.preventDefault()}"
                 @focus="${(e) => e.target.select()}" />
             `)}
       </div>
@@ -136,10 +138,10 @@ u(v, {
 		t,
 		e({}),
 		n(".cell"),
-		l
+		u
 	]
 });
 //#endregion
-export { v as OTP_INPUT_TAG };
+export { S as OTP_INPUT_TAG };
 
 //# sourceMappingURL=otp-input.js.map

package/dist/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createListControl } from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport styles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type OreOtpInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Make inputs disabled */\n  disabled?: boolean;\n  /** Accessible label */\n  label?: string;\n  /** Number of input cells */\n  length?: number;\n  /** Mask input (show dots instead of characters) */\n  masked?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Show a separator in the middle (e.g. \"–\") */\n  separator?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n  type?: 'numeric' | 'alphanumeric';\n  /** Current value */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element ore-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @slot label - Custom label above the OTP input\n * @slot helper - Custom helper text below the OTP input\n * @slot error - Custom error content below the OTP input\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-bg - Cell background color\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border/caret color\n * @cssprop --otp-cell-hover-bg - Cell background on hover (flat/ghost variants)\n * @cssprop --otp-cell-hover-border-color - Cell border on hover (flat/bordered variants)\n * @cssprop --otp-cell-focus-bg - Cell background when focused (flat variant)\n * @cssprop --otp-cell-focus-border-color - Cell border when focused (flat variant)\n *\n * @part group - Group container.\n * @part cell - Shadow part for the `cell` element.\n * @example\n * ```html\n * <ore-otp-input length=\"6\" color=\"primary\"></ore-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = 'ore-otp-input' as const;\ndefine<OreOtpInputProps, OreOtpInputEvents>(OTP_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    label: prop.string('One-time password'),\n    length: prop.number(6),\n    masked: prop.bool(false),\n    name: prop.string(),\n    separator: prop.string(),\n    type: prop.oneOf(['numeric', 'alphanumeric'] as const, 'numeric'),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n  },\n  setup(props, { bind, el, emit, onMounted }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = fCtxProps.disabled;\n    const cells = computed(() => Array.from({ length: lengthValue.value }, (_, i) => i));\n    const otpValue = signal(String(props.value.value || ''));\n    const normalizedPropValue = () => String(props.value.value || '');\n\n    // Form association: the joined cell value is the single form value for `name`,\n    // since individual per-cell <input> elements inside the shadow root cannot\n    // participate in an ancestor <form>'s submission on their own.\n    useField<string>({ disabled: isDisabled, toFormValue: (v) => v, value: otpValue });\n\n    bind({\n      attr: {\n        size: fCtxProps.size,\n        value: () => otpValue.value || null,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n\n    const listControl = createListControl({\n      getItems: () => getInputs(),\n      keys: { next: ['ArrowRight'], prev: ['ArrowLeft'] },\n      loop: false,\n      onNavigate: (_action, index) => {\n        const inputs = getInputs();\n\n        inputs[index]?.focus();\n      },\n    });\n\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\n    }\n    function syncInputsFromValue(raw: string) {\n      const allInputs = getInputs();\n      const normalized = String(raw || '').slice(0, allInputs.length);\n\n      for (const input of allInputs) input.value = '';\n\n      normalized.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\n\n      otpValue.value = getValue();\n    }\n    function emitOtpState(originalEvent?: Event, forceComplete?: boolean): void {\n      const allInputs = getInputs();\n      const full = getValue();\n      const complete = forceComplete ?? (full.length === allInputs.length && full.split('').every(Boolean));\n\n      otpValue.value = full;\n      emit('change', { complete, originalEvent, value: full });\n\n      if (complete) emit('complete', { originalEvent, value: full });\n    }\n    function isAllowed(char: string): boolean {\n      if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n      return /^[a-z\\d]$/i.test(char);\n    }\n    function handleInput(e: Event, index: number) {\n      const input = e.target as HTMLInputElement;\n      let val = input.value;\n\n      // Keep only last character if multiple were typed somehow\n      if (val.length > 1) val = val.slice(-1);\n\n      // Validate character\n      if (val && !isAllowed(val)) {\n        input.value = '';\n\n        return;\n      }\n\n      input.value = val;\n\n      const allInputs = getInputs();\n\n      emitOtpState(e);\n\n      // Auto-advance\n      if (val && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        allInputs[index + 1].select();\n      }\n    }\n    function handleKeydown(e: KeyboardEvent, index: number) {\n      const input = e.target as HTMLInputElement;\n      const allInputs = getInputs();\n\n      listControl.set(index);\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          const prevIndex = listControl.navigate('prev');\n          const prevInput = allInputs[prevIndex];\n\n          if (prevInput) {\n            prevInput.select();\n            prevInput.value = '';\n          }\n        }\n\n        emitOtpState(e, false);\n        e.preventDefault();\n      } else {\n        listControl.handleKeydown(e);\n      }\n    }\n    function handlePaste(e: ClipboardEvent) {\n      e.preventDefault();\n\n      const pasted = e.clipboardData?.getData('text') ?? '';\n      const chars = pasted\n        .split('')\n        .filter((c) => isAllowed(c))\n        .slice(0, lengthValue.value);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      emitOtpState(e);\n\n      // Focus the cell after last pasted char\n      const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n      allInputs[focusIdx]?.focus();\n    }\n\n    watch(props.value, (value) => {\n      syncInputsFromValue(String(value || ''));\n    });\n\n    watch(props.length, () => {\n      // Cells re-render when length changes; sync after DOM updates.\n      requestAnimationFrame(() => syncInputsFromValue(normalizedPropValue()));\n    });\n\n    const separatorIdx = computed(() => {\n      const len = Number(props.length.value) || 6;\n\n      return props.separator.value != null ? Math.floor(len / 2) : -1;\n    });\n\n    onMounted(() => {\n      // Populate cells from value prop on mount\n      syncInputsFromValue(normalizedPropValue());\n    });\n\n    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${props.label}\">\n        ${() =>\n          cells.value.map(\n            (i) => html`\n              ${() =>\n                separatorIdx.value > 0 && i === separatorIdx.value\n                  ? html`<span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>`\n                  : ''}\n              <input\n                class=\"cell\"\n                part=\"cell\"\n                :type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n                :inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n                maxlength=\"1\"\n                :autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n                :aria-label=\"${() => `Digit ${i + 1} of ${lengthValue.value}`}\"\n                :disabled=\"${() => (isDisabled.value ? true : null)}\"\n                @input=\"${(e: Event) => handleInput(e, i)}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n                @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n                @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n            `,\n          )}\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), forcedColorsFocusMixin('.cell'), styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createListControl } from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport styles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type OreOtpInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Make inputs disabled */\n  disabled?: boolean;\n  /** Accessible label */\n  label?: string;\n  /** Number of input cells */\n  length?: number;\n  /** Mask input (show dots instead of characters) */\n  masked?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Show a separator in the middle (e.g. \"–\") */\n  separator?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n  type?: 'numeric' | 'alphanumeric';\n  /** Current value */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element ore-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @slot label - Custom label above the OTP input\n * @slot helper - Custom helper text below the OTP input\n * @slot error - Custom error content below the OTP input\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-bg - Cell background color\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border/caret color\n * @cssprop --otp-cell-hover-bg - Cell background on hover (flat/ghost variants)\n * @cssprop --otp-cell-hover-border-color - Cell border on hover (flat/bordered variants)\n * @cssprop --otp-cell-focus-bg - Cell background when focused (flat variant)\n * @cssprop --otp-cell-focus-border-color - Cell border when focused (flat variant)\n *\n * @part group - Group container.\n * @part cell - Shadow part for the `cell` element.\n * @example\n * ```html\n * <ore-otp-input length=\"6\" color=\"primary\"></ore-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = 'ore-otp-input' as const;\ndefine<OreOtpInputProps>(OTP_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    label: prop.string('One-time password'),\n    length: prop.number(6),\n    masked: prop.bool(false),\n    name: prop.string(),\n    separator: prop.string(),\n    type: prop.oneOf(['numeric', 'alphanumeric'] as const, 'numeric'),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreOtpInputEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = fCtxProps.disabled;\n    const cells = computed(() => Array.from({ length: lengthValue.value }, (_, i) => i));\n    const otpValue = signal(String(props.value.value || ''));\n    const normalizedPropValue = () => String(props.value.value || '');\n\n    // Form association: the joined cell value is the single form value for `name`,\n    // since individual per-cell <input> elements inside the shadow root cannot\n    // participate in an ancestor <form>'s submission on their own.\n    useField<string>({ disabled: isDisabled, toFormValue: (v) => v, value: otpValue });\n\n    bind({\n      attr: {\n        size: fCtxProps.size,\n        value: () => otpValue.value || null,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n\n    const listControl = createListControl({\n      getItems: () => getInputs(),\n      keys: { next: ['ArrowRight'], prev: ['ArrowLeft'] },\n      loop: false,\n      onNavigate: (_action, index) => {\n        const inputs = getInputs();\n\n        inputs[index]?.focus();\n      },\n    });\n\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\n    }\n    function syncInputsFromValue(raw: string) {\n      const allInputs = getInputs();\n      const normalized = String(raw || '').slice(0, allInputs.length);\n\n      for (const input of allInputs) input.value = '';\n\n      normalized.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\n\n      otpValue.value = getValue();\n    }\n    function emitOtpState(originalEvent?: Event, forceComplete?: boolean): void {\n      const allInputs = getInputs();\n      const full = getValue();\n      const complete = forceComplete ?? (full.length === allInputs.length && full.split('').every(Boolean));\n\n      otpValue.value = full;\n      emit('change', { complete, originalEvent, value: full });\n\n      if (complete) emit('complete', { originalEvent, value: full });\n    }\n    function isAllowed(char: string): boolean {\n      if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n      return /^[a-z\\d]$/i.test(char);\n    }\n    function handleInput(e: Event, index: number) {\n      const input = e.target as HTMLInputElement;\n      let val = input.value;\n\n      // Keep only last character if multiple were typed somehow\n      if (val.length > 1) val = val.slice(-1);\n\n      // Validate character\n      if (val && !isAllowed(val)) {\n        input.value = '';\n\n        return;\n      }\n\n      input.value = val;\n\n      const allInputs = getInputs();\n\n      emitOtpState(e);\n\n      // Auto-advance\n      if (val && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        allInputs[index + 1].select();\n      }\n    }\n    function handleKeydown(e: KeyboardEvent, index: number) {\n      const input = e.target as HTMLInputElement;\n      const allInputs = getInputs();\n\n      listControl.set(index);\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          const prevIndex = listControl.navigate('prev');\n          const prevInput = allInputs[prevIndex];\n\n          if (prevInput) {\n            prevInput.select();\n            prevInput.value = '';\n          }\n        }\n\n        emitOtpState(e, false);\n        e.preventDefault();\n      } else {\n        listControl.handleKeydown(e);\n      }\n    }\n    function handlePaste(e: ClipboardEvent) {\n      e.preventDefault();\n\n      const pasted = e.clipboardData?.getData('text') ?? '';\n      const chars = pasted\n        .split('')\n        .filter((c) => isAllowed(c))\n        .slice(0, lengthValue.value);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      emitOtpState(e);\n\n      // Focus the cell after last pasted char\n      const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n      allInputs[focusIdx]?.focus();\n    }\n\n    watch(props.value, (value) => {\n      syncInputsFromValue(String(value || ''));\n    });\n\n    watch(props.length, () => {\n      // Cells re-render when length changes; sync after DOM updates.\n      requestAnimationFrame(() => syncInputsFromValue(normalizedPropValue()));\n    });\n\n    const separatorIdx = computed(() => {\n      const len = Number(props.length.value) || 6;\n\n      return props.separator.value != null ? Math.floor(len / 2) : -1;\n    });\n\n    onMounted(() => {\n      // Populate cells from value prop on mount\n      syncInputsFromValue(normalizedPropValue());\n    });\n\n    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${props.label}\">\n        ${() =>\n          cells.value.map(\n            (i) => html`\n              ${() =>\n                separatorIdx.value > 0 && i === separatorIdx.value\n                  ? html`<span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>`\n                  : ''}\n              <input\n                class=\"cell\"\n                part=\"cell\"\n                :type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n                :inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n                maxlength=\"1\"\n                :autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n                :aria-label=\"${() => `Digit ${i + 1} of ${lengthValue.value}`}\"\n                :disabled=\"${() => (isDisabled.value ? true : null)}\"\n                @input=\"${(e: Event) => handleInput(e, i)}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n                @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n                @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n            `,\n          )}\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), forcedColorsFocusMixin('.cell'), styles],\n});\n"],"mappings":"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"}

package/dist/overlay/command-palette/command-palette-items.cjs

@@ -0,0 +1,2 @@
+function e(e){return e.filter(e=>e.localName===`ore-command-palette-item`).map(e=>({disabled:e.hasAttribute(`disabled`),group:e.getAttribute(`group`)??void 0,icon:e.getAttribute(`icon`)??void 0,keywords:(e.getAttribute(`keywords`)??``).split(`,`).map(e=>e.trim()).filter(Boolean),label:e.getAttribute(`label`)||[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent?.trim()).filter(Boolean).join(` `)||``,shortcut:e.getAttribute(`shortcut`)??void 0,value:e.getAttribute(`value`)??``}))}function t(e){return e.split(`+`).map(e=>e.trim()).filter(Boolean)}function n(e){return{disabled:!!e.disabled,group:e.group,icon:e.icon,keywords:e.keywords??[],label:e.label??e.value,shortcut:e.shortcut,value:e.value}}function r(e,t,n){if(n)return e;let r=t.toLowerCase().trim();return r?e.filter(e=>e.label.toLowerCase().includes(r)||e.value.toLowerCase().includes(r)||e.keywords.some(e=>e.toLowerCase().includes(r))):e}function i(e){let t=new Map;for(let n of e){let e=n.group,r=t.get(e);r||(r=[],t.set(e,r)),r.push(n)}let n=[],r=0;for(let[e,i]of t){e!==void 0&&n.push({group:e,type:`group`});for(let e of i)n.push({idx:r++,item:e,type:`item`})}return n}exports.buildRows=i,exports.filterItems=r,exports.normalizeItem=n,exports.parseSlottedItems=e,exports.splitShortcutKeys=t;
+//# sourceMappingURL=command-palette-items.cjs.map

package/dist/overlay/command-palette/command-palette-items.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette-items.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"sourcesContent":["import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';\n\n// ── Flat row model ────────────────────────────────────────────────────────────\n// Items are grouped by `group` (preserving first-seen order) and flattened into a\n// single list of rows so the listbox can render group headings inline while\n// keyboard navigation still walks a single, index-addressable sequence.\n\nexport type CommandPaletteRow =\n  { group: string; type: 'group' } | { idx: number; item: CommandPaletteItem; type: 'item' };\n\nexport function parseSlottedItems(elements: Element[]): CommandPaletteItem[] {\n  return elements\n    .filter((el) => el.localName === 'ore-command-palette-item')\n    .map((el) => ({\n      disabled: el.hasAttribute('disabled'),\n      group: el.getAttribute('group') ?? undefined,\n      icon: el.getAttribute('icon') ?? undefined,\n      keywords: (el.getAttribute('keywords') ?? '')\n        .split(',')\n        .map((term) => term.trim())\n        .filter(Boolean),\n      label:\n        el.getAttribute('label') ||\n        [...el.childNodes]\n          .filter((node) => node.nodeType === Node.TEXT_NODE)\n          .map((node) => node.textContent?.trim())\n          .filter(Boolean)\n          .join(' ') ||\n        '',\n      shortcut: el.getAttribute('shortcut') ?? undefined,\n      value: el.getAttribute('value') ?? '',\n    }));\n}\n\n/**\n * Splits a display-only shortcut hint into individual keys so each can be rendered in its\n * own `<kbd>`. Keys are separated with `+` (e.g. `\"⌘+N\"` → `[\"⌘\", \"N\"]`); a shortcut with no\n * `+` renders as a single key, unchanged. A literal `+` key can't be represented this way —\n * spell it out instead (e.g. `\"Ctrl+Plus\"`).\n */\nexport function splitShortcutKeys(shortcut: string): string[] {\n  return shortcut\n    .split('+')\n    .map((key) => key.trim())\n    .filter(Boolean);\n}\n\nexport function normalizeItem(input: CommandPaletteItemInput): CommandPaletteItem {\n  return {\n    disabled: Boolean(input.disabled),\n    group: input.group,\n    icon: input.icon,\n    keywords: input.keywords ?? [],\n    label: input.label ?? input.value,\n    shortcut: input.shortcut,\n    value: input.value,\n  };\n}\n\nexport function filterItems(items: CommandPaletteItem[], query: string, noFilter: boolean): CommandPaletteItem[] {\n  if (noFilter) return items;\n\n  const normalizedQuery = query.toLowerCase().trim();\n\n  if (!normalizedQuery) return items;\n\n  return items.filter(\n    (item) =>\n      item.label.toLowerCase().includes(normalizedQuery) ||\n      item.value.toLowerCase().includes(normalizedQuery) ||\n      item.keywords.some((keyword) => keyword.toLowerCase().includes(normalizedQuery)),\n  );\n}\n\n/** Groups items by `group` (first-seen order) and flattens into index-addressable rows. */\nexport function buildRows(items: CommandPaletteItem[]): CommandPaletteRow[] {\n  const groups = new Map<string | undefined, CommandPaletteItem[]>();\n\n  for (const item of items) {\n    const key = item.group;\n    let bucket = groups.get(key);\n\n    if (!bucket) {\n      bucket = [];\n      groups.set(key, bucket);\n    }\n\n    bucket.push(item);\n  }\n\n  const rows: CommandPaletteRow[] = [];\n  let idx = 0;\n\n  for (const [group, groupItems] of groups) {\n    if (group !== undefined) rows.push({ group, type: 'group' });\n\n    for (const item of groupItems) rows.push({ idx: idx++, item, type: 'item' });\n  }\n\n  return rows;\n}\n"],"mappings":"AAUA,SAAgB,EAAkB,EAA2C,CAC3E,OAAO,EACJ,OAAQ,GAAO,EAAG,YAAc,0BAA0B,CAAC,CAC3D,IAAK,IAAQ,CACZ,SAAU,EAAG,aAAa,UAAU,EACpC,MAAO,EAAG,aAAa,OAAO,GAAK,IAAA,GACnC,KAAM,EAAG,aAAa,MAAM,GAAK,IAAA,GACjC,UAAW,EAAG,aAAa,UAAU,GAAK,GAAA,CACvC,MAAM,GAAG,CAAC,CACV,IAAK,GAAS,EAAK,KAAK,CAAC,CAAC,CAC1B,OAAO,OAAO,EACjB,MACE,EAAG,aAAa,OAAO,GACvB,CAAC,GAAG,EAAG,UAAU,CAAC,CACf,OAAQ,GAAS,EAAK,WAAa,KAAK,SAAS,CAAC,CAClD,IAAK,GAAS,EAAK,aAAa,KAAK,CAAC,CAAC,CACvC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACX,GACF,SAAU,EAAG,aAAa,UAAU,GAAK,IAAA,GACzC,MAAO,EAAG,aAAa,OAAO,GAAK,EACrC,EAAE,CACN,CAQA,SAAgB,EAAkB,EAA4B,CAC5D,OAAO,EACJ,MAAM,GAAG,CAAC,CACV,IAAK,GAAQ,EAAI,KAAK,CAAC,CAAC,CACxB,OAAO,OAAO,CACnB,CAEA,SAAgB,EAAc,EAAoD,CAChF,MAAO,CACL,SAAU,EAAQ,EAAM,SACxB,MAAO,EAAM,MACb,KAAM,EAAM,KACZ,SAAU,EAAM,UAAY,CAAC,EAC7B,MAAO,EAAM,OAAS,EAAM,MAC5B,SAAU,EAAM,SAChB,MAAO,EAAM,KACf,CACF,CAEA,SAAgB,EAAY,EAA6B,EAAe,EAAyC,CAC/G,GAAI,EAAU,OAAO,EAErB,IAAM,EAAkB,EAAM,YAAY,CAAC,CAAC,KAAK,EAIjD,OAFK,EAEE,EAAM,OACV,GACC,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,GACjD,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,GACjD,EAAK,SAAS,KAAM,GAAY,EAAQ,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CACnF,EAP6B,CAQ/B,CAGA,SAAgB,EAAU,EAAkD,CAC1E,IAAM,EAAS,IAAI,IAEnB,IAAK,IAAM,KAAQ,EAAO,CACxB,IAAM,EAAM,EAAK,MACb,EAAS,EAAO,IAAI,CAAG,EAEtB,IACH,EAAS,CAAC,EACV,EAAO,IAAI,EAAK,CAAM,GAGxB,EAAO,KAAK,CAAI,CAClB,CAEA,IAAM,EAA4B,CAAC,EAC/B,EAAM,EAEV,IAAK,GAAM,CAAC,EAAO,KAAe,EAAQ,CACpC,IAAU,IAAA,IAAW,EAAK,KAAK,CAAE,QAAO,KAAM,OAAQ,CAAC,EAE3D,IAAK,IAAM,KAAQ,EAAY,EAAK,KAAK,CAAE,IAAK,IAAO,OAAM,KAAM,MAAO,CAAC,CAC7E,CAEA,OAAO,CACT"}

package/dist/overlay/command-palette/command-palette-items.d.ts

@@ -0,0 +1,22 @@
+import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';
+export type CommandPaletteRow = {
+    group: string;
+    type: 'group';
+} | {
+    idx: number;
+    item: CommandPaletteItem;
+    type: 'item';
+};
+export declare function parseSlottedItems(elements: Element[]): CommandPaletteItem[];
+/**
+ * Splits a display-only shortcut hint into individual keys so each can be rendered in its
+ * own `<kbd>`. Keys are separated with `+` (e.g. `"⌘+N"` → `["⌘", "N"]`); a shortcut with no
+ * `+` renders as a single key, unchanged. A literal `+` key can't be represented this way —
+ * spell it out instead (e.g. `"Ctrl+Plus"`).
+ */
+export declare function splitShortcutKeys(shortcut: string): string[];
+export declare function normalizeItem(input: CommandPaletteItemInput): CommandPaletteItem;
+export declare function filterItems(items: CommandPaletteItem[], query: string, noFilter: boolean): CommandPaletteItem[];
+/** Groups items by `group` (first-seen order) and flattens into index-addressable rows. */
+export declare function buildRows(items: CommandPaletteItem[]): CommandPaletteRow[];
+//# sourceMappingURL=command-palette-items.d.ts.map

package/dist/overlay/command-palette/command-palette-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette-items.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAO3F,MAAM,MAAM,iBAAiB,GAC3B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,kBAAkB,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7F,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAsB3E;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAK5D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,uBAAuB,GAAG,kBAAkB,CAUhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,kBAAkB,EAAE,CAa/G;AAED,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE,CAyB1E"}

package/dist/overlay/command-palette/command-palette-items.js

@@ -0,0 +1,55 @@
+//#region src/overlay/command-palette/command-palette-items.ts
+function e(e) {
+	return e.filter((e) => e.localName === "ore-command-palette-item").map((e) => ({
+		disabled: e.hasAttribute("disabled"),
+		group: e.getAttribute("group") ?? void 0,
+		icon: e.getAttribute("icon") ?? void 0,
+		keywords: (e.getAttribute("keywords") ?? "").split(",").map((e) => e.trim()).filter(Boolean),
+		label: e.getAttribute("label") || [...e.childNodes].filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent?.trim()).filter(Boolean).join(" ") || "",
+		shortcut: e.getAttribute("shortcut") ?? void 0,
+		value: e.getAttribute("value") ?? ""
+	}));
+}
+function t(e) {
+	return e.split("+").map((e) => e.trim()).filter(Boolean);
+}
+function n(e) {
+	return {
+		disabled: !!e.disabled,
+		group: e.group,
+		icon: e.icon,
+		keywords: e.keywords ?? [],
+		label: e.label ?? e.value,
+		shortcut: e.shortcut,
+		value: e.value
+	};
+}
+function r(e, t, n) {
+	if (n) return e;
+	let r = t.toLowerCase().trim();
+	return r ? e.filter((e) => e.label.toLowerCase().includes(r) || e.value.toLowerCase().includes(r) || e.keywords.some((e) => e.toLowerCase().includes(r))) : e;
+}
+function i(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = n.group, r = t.get(e);
+		r || (r = [], t.set(e, r)), r.push(n);
+	}
+	let n = [], r = 0;
+	for (let [e, i] of t) {
+		e !== void 0 && n.push({
+			group: e,
+			type: "group"
+		});
+		for (let e of i) n.push({
+			idx: r++,
+			item: e,
+			type: "item"
+		});
+	}
+	return n;
+}
+//#endregion
+export { i as buildRows, r as filterItems, n as normalizeItem, e as parseSlottedItems, t as splitShortcutKeys };
+
+//# sourceMappingURL=command-palette-items.js.map

package/dist/overlay/command-palette/command-palette-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette-items.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"sourcesContent":["import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';\n\n// ── Flat row model ────────────────────────────────────────────────────────────\n// Items are grouped by `group` (preserving first-seen order) and flattened into a\n// single list of rows so the listbox can render group headings inline while\n// keyboard navigation still walks a single, index-addressable sequence.\n\nexport type CommandPaletteRow =\n  { group: string; type: 'group' } | { idx: number; item: CommandPaletteItem; type: 'item' };\n\nexport function parseSlottedItems(elements: Element[]): CommandPaletteItem[] {\n  return elements\n    .filter((el) => el.localName === 'ore-command-palette-item')\n    .map((el) => ({\n      disabled: el.hasAttribute('disabled'),\n      group: el.getAttribute('group') ?? undefined,\n      icon: el.getAttribute('icon') ?? undefined,\n      keywords: (el.getAttribute('keywords') ?? '')\n        .split(',')\n        .map((term) => term.trim())\n        .filter(Boolean),\n      label:\n        el.getAttribute('label') ||\n        [...el.childNodes]\n          .filter((node) => node.nodeType === Node.TEXT_NODE)\n          .map((node) => node.textContent?.trim())\n          .filter(Boolean)\n          .join(' ') ||\n        '',\n      shortcut: el.getAttribute('shortcut') ?? undefined,\n      value: el.getAttribute('value') ?? '',\n    }));\n}\n\n/**\n * Splits a display-only shortcut hint into individual keys so each can be rendered in its\n * own `<kbd>`. Keys are separated with `+` (e.g. `\"⌘+N\"` → `[\"⌘\", \"N\"]`); a shortcut with no\n * `+` renders as a single key, unchanged. A literal `+` key can't be represented this way —\n * spell it out instead (e.g. `\"Ctrl+Plus\"`).\n */\nexport function splitShortcutKeys(shortcut: string): string[] {\n  return shortcut\n    .split('+')\n    .map((key) => key.trim())\n    .filter(Boolean);\n}\n\nexport function normalizeItem(input: CommandPaletteItemInput): CommandPaletteItem {\n  return {\n    disabled: Boolean(input.disabled),\n    group: input.group,\n    icon: input.icon,\n    keywords: input.keywords ?? [],\n    label: input.label ?? input.value,\n    shortcut: input.shortcut,\n    value: input.value,\n  };\n}\n\nexport function filterItems(items: CommandPaletteItem[], query: string, noFilter: boolean): CommandPaletteItem[] {\n  if (noFilter) return items;\n\n  const normalizedQuery = query.toLowerCase().trim();\n\n  if (!normalizedQuery) return items;\n\n  return items.filter(\n    (item) =>\n      item.label.toLowerCase().includes(normalizedQuery) ||\n      item.value.toLowerCase().includes(normalizedQuery) ||\n      item.keywords.some((keyword) => keyword.toLowerCase().includes(normalizedQuery)),\n  );\n}\n\n/** Groups items by `group` (first-seen order) and flattens into index-addressable rows. */\nexport function buildRows(items: CommandPaletteItem[]): CommandPaletteRow[] {\n  const groups = new Map<string | undefined, CommandPaletteItem[]>();\n\n  for (const item of items) {\n    const key = item.group;\n    let bucket = groups.get(key);\n\n    if (!bucket) {\n      bucket = [];\n      groups.set(key, bucket);\n    }\n\n    bucket.push(item);\n  }\n\n  const rows: CommandPaletteRow[] = [];\n  let idx = 0;\n\n  for (const [group, groupItems] of groups) {\n    if (group !== undefined) rows.push({ group, type: 'group' });\n\n    for (const item of groupItems) rows.push({ idx: idx++, item, type: 'item' });\n  }\n\n  return rows;\n}\n"],"mappings":";AAUA,SAAgB,EAAkB,GAA2C;CAC3E,OAAO,EACJ,QAAQ,MAAO,EAAG,cAAc,0BAA0B,CAAC,CAC3D,KAAK,OAAQ;EACZ,UAAU,EAAG,aAAa,UAAU;EACpC,OAAO,EAAG,aAAa,OAAO,KAAK,KAAA;EACnC,MAAM,EAAG,aAAa,MAAM,KAAK,KAAA;EACjC,WAAW,EAAG,aAAa,UAAU,KAAK,GAAA,CACvC,MAAM,GAAG,CAAC,CACV,KAAK,MAAS,EAAK,KAAK,CAAC,CAAC,CAC1B,OAAO,OAAO;EACjB,OACE,EAAG,aAAa,OAAO,KACvB,CAAC,GAAG,EAAG,UAAU,CAAC,CACf,QAAQ,MAAS,EAAK,aAAa,KAAK,SAAS,CAAC,CAClD,KAAK,MAAS,EAAK,aAAa,KAAK,CAAC,CAAC,CACvC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KACX;EACF,UAAU,EAAG,aAAa,UAAU,KAAK,KAAA;EACzC,OAAO,EAAG,aAAa,OAAO,KAAK;CACrC,EAAE;AACN;AAQA,SAAgB,EAAkB,GAA4B;CAC5D,OAAO,EACJ,MAAM,GAAG,CAAC,CACV,KAAK,MAAQ,EAAI,KAAK,CAAC,CAAC,CACxB,OAAO,OAAO;AACnB;AAEA,SAAgB,EAAc,GAAoD;CAChF,OAAO;EACL,UAAU,EAAQ,EAAM;EACxB,OAAO,EAAM;EACb,MAAM,EAAM;EACZ,UAAU,EAAM,YAAY,CAAC;EAC7B,OAAO,EAAM,SAAS,EAAM;EAC5B,UAAU,EAAM;EAChB,OAAO,EAAM;CACf;AACF;AAEA,SAAgB,EAAY,GAA6B,GAAe,GAAyC;CAC/G,IAAI,GAAU,OAAO;CAErB,IAAM,IAAkB,EAAM,YAAY,CAAC,CAAC,KAAK;CAIjD,OAFK,IAEE,EAAM,QACV,MACC,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,KACjD,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,KACjD,EAAK,SAAS,MAAM,MAAY,EAAQ,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CACnF,IAP6B;AAQ/B;AAGA,SAAgB,EAAU,GAAkD;CAC1E,IAAM,oBAAS,IAAI,IAA8C;CAEjE,KAAK,IAAM,KAAQ,GAAO;EACxB,IAAM,IAAM,EAAK,OACb,IAAS,EAAO,IAAI,CAAG;EAO3B,AALK,MACH,IAAS,CAAC,GACV,EAAO,IAAI,GAAK,CAAM,IAGxB,EAAO,KAAK,CAAI;CAClB;CAEA,IAAM,IAA4B,CAAC,GAC/B,IAAM;CAEV,KAAK,IAAM,CAAC,GAAO,MAAe,GAAQ;EACxC,AAAI,MAAU,KAAA,KAAW,EAAK,KAAK;GAAE;GAAO,MAAM;EAAQ,CAAC;EAE3D,KAAK,IAAM,KAAQ,GAAY,EAAK,KAAK;GAAE,KAAK;GAAO;GAAM,MAAM;EAAO,CAAC;CAC7E;CAEA,OAAO;AACT"}

package/dist/overlay/command-palette/command-palette.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_radius:var(--command-palette-radius,var(--rounded-lg));--_max-width:var(--command-palette-max-width,40rem);--_backdrop-bg:var(--command-palette-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--command-palette-bg,var(--color-canvas));--_panel-border-color:var(--command-palette-border-color,var(--color-divider));--_option-hover-bg:var(--command-palette-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--command-palette-option-focus-bg,color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;padding-top:min(14vh, var(--size-24));background:0 0;border:none;justify-content:center;align-items:flex-start;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:min(28rem, calc(100dvh - var(--size-16)));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--command-palette-shadow,var(--shadow-2xl));opacity:1;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}@media (width<=640px){.panel{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4))}dialog{padding-top:var(--size-4)}}.search{gap:var(--size-2);padding:var(--size-3) var(--size-4);border-bottom:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.search-icon{color:var(--color-contrast-400);flex-shrink:0;display:inline-flex}.search-input{min-width:0;font:inherit;font-size:var(--text-md);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1;padding:0}.search-input::placeholder{color:var(--color-contrast-400)}.search-loader{border:2px solid var(--color-contrast-300);width:1em;height:1em;animation:command-palette-spin var(--transition-loader) infinite;border-radius:50%;flex-shrink:0;display:inline-flex}.search-loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.search-loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.search-loader[hidden]{display:none}@keyframes command-palette-spin{to{transform:rotate(360deg)}}.listbox{padding:var(--size-1);overscroll-behavior:contain;scrollbar-width:thin;flex:1;overflow-y:auto}.empty{padding:var(--size-6) var(--size-3);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.group-heading{padding:var(--size-2) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.item{gap:var(--size-2-5);padding:var(--size-2) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);align-items:center;display:flex}.item:hover:not([data-disabled]){background:var(--_option-hover-bg)}.item[data-focused]:not([data-disabled]){background:var(--_option-focus-bg)}.item[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.item-icon{color:var(--color-contrast-500);flex-shrink:0;align-items:center;display:inline-flex}.item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item-shortcut{gap:var(--size-1);flex-shrink:0;display:inline-flex}.item-shortcut kbd{padding:var(--size-0-5) var(--size-1-5);font-family:var(--font-mono,monospace);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}.footer{gap:var(--size-4);padding:var(--size-2) var(--size-4);font-size:var(--text-xs);color:var(--color-contrast-500);border-top:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.footer-hint{gap:var(--size-1);align-items:center;display:inline-flex}.footer kbd{padding:var(--size-0-5) var(--size-1);font-family:inherit;font-size:var(--text-xs);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}::slotted(ore-command-palette-item){display:none!important}}`;exports.default=e;
+//# sourceMappingURL=command-palette.css.cjs.map

package/dist/overlay/command-palette/command-palette.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.css.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--command-palette-radius, var(--rounded-lg));\n    --_max-width: var(--command-palette-max-width, 40rem);\n    --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n    --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n    --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --command-palette-option-focus-bg,\n      color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets — see ore-dialog for the full rationale.\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding-block-start: min(14vh, var(--size-24));\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog:not([open]) .panel {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-xs));\n    transition:\n      opacity var(--transition-normal),\n      overlay var(--transition-normal) allow-discrete,\n      display var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: min(28rem, calc(100dvh - var(--size-16)));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-md));\n    transform: scale(1) translateY(0);\n    transition:\n      opacity 200ms var(--ease-spring),\n      transform 200ms var(--ease-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  @media (width <= 640px) {\n    .panel {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n    }\n\n    dialog {\n      padding-block-start: var(--size-4);\n    }\n  }\n\n  /* =====================\n       Search field\n       ===================== */\n\n  .search {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-3) var(--size-4);\n    border-block-end: var(--border) solid var(--color-contrast-100);\n  }\n\n  .search-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    color: var(--color-contrast-400);\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-md);\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .search-input::placeholder {\n    color: var(--color-contrast-400);\n  }\n\n  .search-loader {\n    display: inline-flex;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: command-palette-spin var(--transition-loader) infinite;\n  }\n\n  .search-loader[hidden] {\n    display: none;\n  }\n\n  @keyframes command-palette-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* =====================\n       Listbox\n       ===================== */\n\n  .listbox {\n    flex: 1;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-width: thin;\n  }\n\n  .empty {\n    padding: var(--size-6) var(--size-3);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .group-heading {\n    padding: var(--size-2) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  .item {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .item:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .item[data-focused]:not([data-disabled]) {\n    background: var(--_option-focus-bg);\n  }\n\n  .item[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .item-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .item-shortcut {\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n  }\n\n  .item-shortcut kbd {\n    padding: var(--size-0-5) var(--size-1-5);\n    font-family: var(--font-mono, monospace);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom-width: calc(var(--border) + 1px);\n    border-radius: var(--rounded-sm);\n  }\n\n  /* =====================\n       Footer hints\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-4);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    border-block-start: var(--border) solid var(--color-contrast-100);\n  }\n\n  .footer-hint {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .footer kbd {\n    padding: var(--size-0-5) var(--size-1);\n    font-family: inherit;\n    font-size: var(--text-xs);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom-width: calc(var(--border) + 1px);\n    border-radius: var(--rounded-sm);\n  }\n\n  /* Slotted item elements are pure data nodes — never rendered directly. */\n  ::slotted(ore-command-palette-item) {\n    display: none !important;\n  }\n}\n"],"mappings":""}

package/dist/overlay/command-palette/command-palette.css.js

@@ -0,0 +1,6 @@
+//#region src/overlay/command-palette/command-palette.css?inline
+var e = "@layer refine.base{:host{--_radius:var(--command-palette-radius,var(--rounded-lg));--_max-width:var(--command-palette-max-width,40rem);--_backdrop-bg:var(--command-palette-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--command-palette-bg,var(--color-canvas));--_panel-border-color:var(--command-palette-border-color,var(--color-divider));--_option-hover-bg:var(--command-palette-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--command-palette-option-focus-bg,color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;padding-top:min(14vh, var(--size-24));background:0 0;border:none;justify-content:center;align-items:flex-start;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:min(28rem, calc(100dvh - var(--size-16)));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--command-palette-shadow,var(--shadow-2xl));opacity:1;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}@media (width<=640px){.panel{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4))}dialog{padding-top:var(--size-4)}}.search{gap:var(--size-2);padding:var(--size-3) var(--size-4);border-bottom:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.search-icon{color:var(--color-contrast-400);flex-shrink:0;display:inline-flex}.search-input{min-width:0;font:inherit;font-size:var(--text-md);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1;padding:0}.search-input::placeholder{color:var(--color-contrast-400)}.search-loader{border:2px solid var(--color-contrast-300);width:1em;height:1em;animation:command-palette-spin var(--transition-loader) infinite;border-radius:50%;flex-shrink:0;display:inline-flex}.search-loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.search-loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.search-loader[hidden]{display:none}@keyframes command-palette-spin{to{transform:rotate(360deg)}}.listbox{padding:var(--size-1);overscroll-behavior:contain;scrollbar-width:thin;flex:1;overflow-y:auto}.empty{padding:var(--size-6) var(--size-3);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.group-heading{padding:var(--size-2) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.item{gap:var(--size-2-5);padding:var(--size-2) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);align-items:center;display:flex}.item:hover:not([data-disabled]){background:var(--_option-hover-bg)}.item[data-focused]:not([data-disabled]){background:var(--_option-focus-bg)}.item[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.item-icon{color:var(--color-contrast-500);flex-shrink:0;align-items:center;display:inline-flex}.item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item-shortcut{gap:var(--size-1);flex-shrink:0;display:inline-flex}.item-shortcut kbd{padding:var(--size-0-5) var(--size-1-5);font-family:var(--font-mono,monospace);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}.footer{gap:var(--size-4);padding:var(--size-2) var(--size-4);font-size:var(--text-xs);color:var(--color-contrast-500);border-top:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.footer-hint{gap:var(--size-1);align-items:center;display:inline-flex}.footer kbd{padding:var(--size-0-5) var(--size-1);font-family:inherit;font-size:var(--text-xs);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}::slotted(ore-command-palette-item){display:none!important}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=command-palette.css.js.map

package/dist/overlay/command-palette/command-palette.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.css.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--command-palette-radius, var(--rounded-lg));\n    --_max-width: var(--command-palette-max-width, 40rem);\n    --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n    --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n    --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --command-palette-option-focus-bg,\n      color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets — see ore-dialog for the full rationale.\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding-block-start: min(14vh, var(--size-24));\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog:not([open]) .panel {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-xs));\n    transition:\n      opacity var(--transition-normal),\n      overlay var(--transition-normal) allow-discrete,\n      display var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: min(28rem, calc(100dvh - var(--size-16)));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-md));\n    transform: scale(1) translateY(0);\n    transition:\n      opacity 200ms var(--ease-spring),\n      transform 200ms var(--ease-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  @media (width <= 640px) {\n    .panel {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n    }\n\n    dialog {\n      padding-block-start: var(--size-4);\n    }\n  }\n\n  /* =====================\n       Search field\n       ===================== */\n\n  .search {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-3) var(--size-4);\n    border-block-end: var(--border) solid var(--color-contrast-100);\n  }\n\n  .search-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    color: var(--color-contrast-400);\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-md);\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .search-input::placeholder {\n    color: var(--color-contrast-400);\n  }\n\n  .search-loader {\n    display: inline-flex;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: command-palette-spin var(--transition-loader) infinite;\n  }\n\n  .search-loader[hidden] {\n    display: none;\n  }\n\n  @keyframes command-palette-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* =====================\n       Listbox\n       ===================== */\n\n  .listbox {\n    flex: 1;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-width: thin;\n  }\n\n  .empty {\n    padding: var(--size-6) var(--size-3);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .group-heading {\n    padding: var(--size-2) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  .item {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .item:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .item[data-focused]:not([data-disabled]) {\n    background: var(--_option-focus-bg);\n  }\n\n  .item[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .item-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .item-shortcut {\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n  }\n\n  .item-shortcut kbd {\n    padding: var(--size-0-5) var(--size-1-5);\n    font-family: var(--font-mono, monospace);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom-width: calc(var(--border) + 1px);\n    border-radius: var(--rounded-sm);\n  }\n\n  /* =====================\n       Footer hints\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-4);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    border-block-start: var(--border) solid var(--color-contrast-100);\n  }\n\n  .footer-hint {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .footer kbd {\n    padding: var(--size-0-5) var(--size-1);\n    font-family: inherit;\n    font-size: var(--text-xs);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom-width: calc(var(--border) + 1px);\n    border-radius: var(--rounded-sm);\n  }\n\n  /* Slotted item elements are pure data nodes — never rendered directly. */\n  ::slotted(ore-command-palette-item) {\n    display: none !important;\n  }\n}\n"],"mappings":""}

package/dist/overlay/command-palette/command-palette.d.ts

@@ -0,0 +1,72 @@
+import '../../content/icon/icon';
+export type { OreCommandPaletteEvents, OreCommandPaletteProps } from './command-palette.types';
+/**
+ * A pure data node describing one command. Never rendered directly — `ore-command-palette`
+ * reads its attributes/text content and renders the visible row itself.
+ *
+ * @element ore-command-palette-item
+ *
+ * @attr {string} value - Value emitted by the `select` event and matched against the search query
+ * @attr {string} label - Explicit label text; falls back to the element's text content
+ * @attr {string} group - Group heading the item is clustered under
+ * @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"`)
+ * @attr {boolean} disabled - Excludes the item from keyboard navigation and selection
+ *
+ * @slot icon - Optional leading icon content
+ *
+ * @example
+ * ```html
+ * <ore-command-palette-item value="new-file" group="File" shortcut="⌘+N">New File</ore-command-palette-item>
+ * ```
+ */
+export declare const COMMAND_PALETTE_ITEM_TAG: "ore-command-palette-item";
+/**
+ * A searchable, keyboard-driven list of commands presented in a centered modal —
+ * the "⌘K" pattern popularized by editors and productivity apps. Built on the
+ * native `<dialog>` element (focus trap, top-layer stacking, `Escape`-to-close)
+ * and `@vielzeug/keymap` for the global shortcut that opens it.
+ *
+ * @element ore-command-palette
+ * @element ore-command-palette-item - Slotted command definition (place in default slot)
+ *
+ * @attr {boolean} open - Controls the open state of the palette
+ * @attr {string} label - Accessible label for the dialog (screen-reader-only heading)
+ * @attr {string} placeholder - Placeholder text for the search input
+ * @attr {string} shortcut - Global keyboard shortcut (keymap syntax) that toggles the palette. Default `"mod+k"`; set to `""` to disable
+ * @attr {boolean} no-filter - Disable built-in client-side filtering (for server-driven search)
+ * @attr {boolean} loading - Shows a loading row below the search input
+ * @attr {string} empty-text - Message shown when no item matches the query
+ * @attr {boolean} keep-open-on-select - Keep the palette open after an item is selected
+ *
+ * @fires open - Fired when the palette opens. detail: `{ reason }`
+ * @fires close - Fired when the palette closes. detail: `{ reason }`
+ * @fires search - Fired on every keystroke in the search input. detail: `{ query }`
+ * @fires select - Fired when a command is chosen (click or `Enter`). detail: `{ value, label, item }`
+ *
+ * @slot - `<ore-command-palette-item>` elements (alternative/supplement to the `items` prop)
+ *
+ * @cssprop --command-palette-bg - Panel background color
+ * @cssprop --command-palette-border-color - Panel border color
+ * @cssprop --command-palette-radius - Panel border radius
+ * @cssprop --command-palette-shadow - Panel drop shadow
+ * @cssprop --command-palette-max-width - Maximum panel width
+ * @cssprop --command-palette-backdrop - Backdrop overlay color
+ * @cssprop --command-palette-option-hover-bg - Item background on hover
+ * @cssprop --command-palette-option-focus-bg - Item background when keyboard-focused
+ *
+ * @part dialog - Dialog root container
+ * @part panel - Panel container
+ * @part input - Search input
+ * @part listbox - Listbox of matching commands
+ *
+ * @example
+ * ```html
+ * <ore-command-palette label="Command palette" placeholder="Type a command…">
+ *   <ore-command-palette-item value="new-file" group="File" shortcut="⌘+N">New File</ore-command-palette-item>
+ *   <ore-command-palette-item value="open-file" group="File" shortcut="⌘+O">Open File…</ore-command-palette-item>
+ *   <ore-command-palette-item value="toggle-theme" group="View">Toggle Theme</ore-command-palette-item>
+ * </ore-command-palette>
+ * ```
+ */
+export declare const COMMAND_PALETTE_TAG: "ore-command-palette";
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/overlay/command-palette/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.ts"],"names":[],"mappings":"AAWA,OAAO,yBAAyB,CAAC;AAGjC,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAE/F;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,wBAAwB,EAAG,0BAAmC,CAAC;AAO5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,mBAAmB,EAAG,qBAA8B,CAAC"}