@vielzeug/refine 2.0.3 → 2.1.2

package/dist/otp-input.cjs

@@ -1,23 +1,23 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/field-variants.css.cjs"),i=require("./core/nav.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./inputs/otp-input/otp-input.css.cjs");let c=require("@vielzeug/ore"),l=require("@vielzeug/ripple"),u=require("@vielzeug/ripple/watch");var d=`ore-otp-input`;(0,c.define)(d,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,label:c.prop.string(`One-time password`),length:c.prop.number(6),masked:c.prop.bool(!1),name:c.prop.string(),separator:c.prop.string(),type:c.prop.oneOf([`numeric`,`alphanumeric`],`numeric`),value:c.prop.string(),variant:c.prop.string()},setup(t){let n=(0,c.getHost)(),r=(0,c.useEmit)(),a=(0,l.computed)(()=>Number(t.length.value)||6),s=(0,l.computed)(()=>!!t.disabled.value),d=(0,l.computed)(()=>Array.from({length:a.value},(e,t)=>t)),f=(0,l.signal)(String(t.value.value||``)),p=()=>String(t.value.value||``);(0,c.useField)({disabled:s,toFormValue:e=>e,value:f}),(0,c.bind)({attr:{size:t.size,value:()=>f.value||null,variant:t.variant}});function m(){return[...n.shadowRoot?.querySelectorAll(`input.cell`)??[]]}let h=i.createListControl({getItems:()=>m(),keys:{next:[`ArrowRight`],prev:[`ArrowLeft`]},loop:!1,onNavigate:(e,t)=>{m()[t]?.focus()},signal:e.lifecycleSignal(c.onCleanup)});function g(){return m().map(e=>e.value).join(``)}function _(e){let t=m(),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)}),f.value=g()}o.defineFieldValue(n,()=>f.value,e=>{_(e)});function v(e,t){let i=m(),a=g(),s=t??(a.length===i.length&&a.split(``).every(Boolean));f.value=a,o.setFieldValue(n,a),o.dispatchNativeFieldEvent(n,`input`),o.dispatchNativeFieldEvent(n,`change`),s&&r(`complete`,{originalEvent:e,value:a})}function y(e){return t.type.value===`numeric`?/^\d$/.test(e):/^[a-z\d]$/i.test(e)}function b(e,t){let n=e.target,r=n.value;if(r.length>1&&(r=r.slice(-1)),r&&!y(r)){n.value=``;return}n.value=r;let i=m();v(e),r&&t<i.length-1&&(i[t+1].focus(),i[t+1].select())}function x(e,t){let n=e.target,r=m();if(h.set(t),e.key===`Backspace`){if(n.value)n.value=``;else if(t>0){let e=r[h.navigate(`prev`)];e&&(e.select(),e.value=``)}v(e,!1),e.preventDefault()}else h.handleKeydown(e)}function S(e){e.preventDefault();let t=(e.clipboardData?.getData(`text`)??``).split(``).filter(e=>y(e)).slice(0,a.value),n=m();t.forEach((e,t)=>{n[t]&&(n[t].value=e)}),v(e),n[Math.min(t.length,n.length-1)]?.focus()}(0,u.watch)(t.value,e=>{_(String(e||``))}),(0,u.watch)(t.length,()=>{requestAnimationFrame(()=>_(p()))});let C=(0,l.computed)(()=>{let e=Number(t.length.value)||6;return t.separator.value==null?-1:Math.floor(e/2)});return(0,c.onMounted)(()=>{_(p())}),c.html`
-      <div class="otp-group" part="group" role="group" aria-label="${t.label}">
-        ${()=>d.value.map(e=>c.html`
-              ${()=>C.value>0&&e===C.value?c.html`
-                      <span class="separator" aria-hidden="true">${()=>t.separator.value||`-`}</span>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/field-variants.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/ore.cjs"),i=require("./core/nav.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./inputs/otp-input/otp-input.css.cjs");let c=require("@vielzeug/ore"),l=require("@vielzeug/ripple");var u=`ore-otp-input`;(0,c.define)(u,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,label:c.prop.string(`One-time password`),length:c.prop.number(6),masked:c.prop.bool(!1),name:c.prop.string(),separator:c.prop.string(),type:c.prop.oneOf([`numeric`,`alphanumeric`],`numeric`),value:c.prop.string(),variant:c.prop.string()},setup(e){let t=(0,c.getHost)(),n=(0,c.useEmit)(),a=(0,l.computed)(()=>Number(e.length.value)||6),s=(0,l.computed)(()=>!!e.disabled.value),u=(0,l.computed)(()=>Array.from({length:a.value},(e,t)=>t)),d=(0,l.signal)(String(e.value.value||``)),f=()=>String(e.value.value||``);(0,c.useField)({disabled:s,toFormValue:e=>e,value:d}),(0,c.bind)({attr:{size:e.size,value:()=>d.value||null,variant:e.variant}});function p(){return[...t.shadowRoot?.querySelectorAll(`input.cell`)??[]]}let m=i.createListControl({getItems:()=>p(),keys:{next:[`ArrowRight`],prev:[`ArrowLeft`]},loop:!1,onNavigate:(e,t)=>{p()[t]?.focus()},signal:r.lifecycleSignal(c.onCleanup)});function h(){return p().map(e=>e.value).join(``)}function g(e){let t=p(),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)}),d.value=h()}o.defineFieldValue(t,()=>d.value,e=>{g(e)});function _(e,r){let i=p(),a=h(),s=r??(a.length===i.length&&a.split(``).every(Boolean));d.value=a,o.setFieldValue(t,a),o.dispatchNativeFieldEvent(t,`input`),o.dispatchNativeFieldEvent(t,`change`),s&&n(`complete`,{originalEvent:e,value:a})}function v(t){return e.type.value===`numeric`?/^\d$/.test(t):/^[a-z\d]$/i.test(t)}function y(e,t){let n=e.target,r=n.value;if(r.length>1&&(r=r.slice(-1)),r&&!v(r)){n.value=``;return}n.value=r;let i=p();_(e),r&&t<i.length-1&&(i[t+1].focus(),i[t+1].select())}function b(e,t){let n=e.target,r=p();if(m.set(t),e.key===`Backspace`){if(n.value)n.value=``;else if(t>0){let e=r[m.navigate(`prev`)];e&&(e.select(),e.value=``)}_(e,!1),e.preventDefault()}else m.handleKeydown(e)}function x(e){e.preventDefault();let t=(e.clipboardData?.getData(`text`)??``).split(``).filter(e=>v(e)).slice(0,a.value),n=p();t.forEach((e,t)=>{n[t]&&(n[t].value=e)}),_(e),n[Math.min(t.length,n.length-1)]?.focus()}(0,l.watch)(e.value,e=>{g(String(e||``))}),(0,l.watch)(e.length,()=>{requestAnimationFrame(()=>g(f()))});let S=(0,l.computed)(()=>{let t=Number(e.length.value)||6;return e.separator.value==null?-1:Math.floor(t/2)});return(0,c.onMounted)(()=>{g(f())}),c.html`
+      <div class="otp-group" part="group" role="group" aria-label="${e.label}">
+        ${()=>u.value.map(t=>c.html`
+              ${()=>S.value>0&&t===S.value?c.html`
+                      <span class="separator" aria-hidden="true">${()=>e.separator.value||`-`}</span>
                     `:``}
               <input
                 class="cell"
                 part="cell"
-                type="${()=>t.masked.value?`password`:`text`}"
-                inputmode="${()=>t.type.value===`numeric`?`numeric`:`text`}"
+                type="${()=>e.masked.value?`password`:`text`}"
+                inputmode="${()=>e.type.value===`numeric`?`numeric`:`text`}"
                 maxlength="1"
-                autocomplete="${()=>e===0?`one-time-code`:`off`}"
-                aria-label="${()=>`Digit ${e+1} of ${a.value}`}"
+                autocomplete="${()=>t===0?`one-time-code`:`off`}"
+                aria-label="${()=>`Digit ${t+1} of ${a.value}`}"
                 disabled="${()=>s.value?!0:null}"
-                @input="${t=>b(t,e)}"
-                @keydown="${t=>x(t,e)}"
-                @paste="${t=>e===0?S(t):t.preventDefault()}"
+                @input="${e=>y(e,t)}"
+                @keydown="${e=>b(e,t)}"
+                @paste="${e=>t===0?x(e):e.preventDefault()}"
                 @focus="${e=>e.target.select()}" />
             `)}
       </div>
-    `},styles:[n.colorThemeMixin,t.sizeVariantMixin({}),n.forcedColorsFocusMixin(`.cell`),s.default,r.fieldVariantMixin({accentVar:`--_cell-focus-border`,container:`.cell`,tokenPrefix:`otp-cell`})]}),exports.OTP_INPUT_TAG=d;
+    `},styles:[n.colorThemeMixin,t.sizeVariantMixin({}),n.forcedColorsFocusMixin(`.cell`),s.default,e.fieldVariantMixin({accentVar:`--_cell-focus-border`,container:`.cell`,tokenPrefix:`otp-cell`})]}),exports.OTP_INPUT_TAG=u;
 //# sourceMappingURL=otp-input.cjs.map

package/dist/otp-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.cjs","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onCleanup, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n  change: Event;\n  complete: { originalEvent?: Event; value: string };\n  input: Event;\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 input - Emitted whenever a cell changes.\n * @fires change - Emitted whenever a cell changes.\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 lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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: props.size,\n        value: () => otpValue.value || null,\n        variant: props.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      signal: lifecycleSignal(onCleanup),\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    defineFieldValue(\n      el,\n      () => otpValue.value,\n      (value) => {\n        syncInputsFromValue(value);\n      },\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      setFieldValue(el, full);\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\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`\n                      <span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>\n                    `\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: [\n    colorThemeMixin,\n    sizeVariantMixin({}),\n    forcedColorsFocusMixin('.cell'),\n    componentStyles,\n    // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why.\n    fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.cjs","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit, useField } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n  change: Event;\n  complete: { originalEvent?: Event; value: string };\n  input: Event;\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 input - Emitted whenever a cell changes.\n * @fires change - Emitted whenever a cell changes.\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 lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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: props.size,\n        value: () => otpValue.value || null,\n        variant: props.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      signal: lifecycleSignal(onCleanup),\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    defineFieldValue(\n      el,\n      () => otpValue.value,\n      (value) => {\n        syncInputsFromValue(value);\n      },\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      setFieldValue(el, full);\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\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`\n                      <span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>\n                    `\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: [\n    colorThemeMixin,\n    sizeVariantMixin({}),\n    forcedColorsFocusMixin('.cell'),\n    componentStyles,\n    // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why.\n    fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n  ],\n});\n"],"mappings":"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"}

package/dist/otp-input.js

@@ -1,14 +1,13 @@
-import { lifecycleSignal as e } from "./core/ore.js";
+import { fieldVariantMixin as e } from "./styles/mixins/field-variants.css.js";
 import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
 import { colorThemeMixin as n, forcedColorsFocusMixin as r } from "./styles/mixins/theme.css.js";
-import { fieldVariantMixin as i } from "./styles/mixins/field-variants.css.js";
+import { lifecycleSignal as i } from "./core/ore.js";
 import { createListControl as a } from "./core/nav.js";
 import { disablableBundle as o, sizableBundle as s, themableBundle as c } from "./shared/prop-bundles.js";
 import { defineFieldValue as l, dispatchNativeFieldEvent as u, setFieldValue as d } from "./inputs/shared/native-field-event.js";
 import f from "./inputs/otp-input/otp-input.css.js";
 import { bind as p, define as m, getHost as h, html as g, onCleanup as _, onMounted as v, prop as y, useEmit as b, useField as x } from "@vielzeug/ore";
-import { computed as S, signal as C } from "@vielzeug/ripple";
-import { watch as w } from "@vielzeug/ripple/watch";
+import { computed as S, signal as C, watch as w } from "@vielzeug/ripple";
 //#region src/inputs/otp-input/otp-input.ts
 var T = "ore-otp-input";
 m(T, {
@@ -26,19 +25,19 @@ m(T, {
 		value: y.string(),
 		variant: y.string()
 	},
-	setup(t) {
-		let n = h(), r = b(), i = S(() => Number(t.length.value) || 6), o = S(() => !!t.disabled.value), s = S(() => Array.from({ length: i.value }, (e, t) => t)), c = C(String(t.value.value || "")), f = () => String(t.value.value || "");
+	setup(e) {
+		let t = h(), n = b(), r = S(() => Number(e.length.value) || 6), o = S(() => !!e.disabled.value), s = S(() => Array.from({ length: r.value }, (e, t) => t)), c = C(String(e.value.value || "")), f = () => String(e.value.value || "");
 		x({
 			disabled: o,
 			toFormValue: (e) => e,
 			value: c
 		}), p({ attr: {
-			size: t.size,
+			size: e.size,
 			value: () => c.value || null,
-			variant: t.variant
+			variant: e.variant
 		} });
 		function m() {
-			return [...n.shadowRoot?.querySelectorAll("input.cell") ?? []];
+			return [...t.shadowRoot?.querySelectorAll("input.cell") ?? []];
 		}
 		let y = a({
 			getItems: () => m(),
@@ -50,7 +49,7 @@ m(T, {
 			onNavigate: (e, t) => {
 				m()[t]?.focus();
 			},
-			signal: e(_)
+			signal: i(_)
 		});
 		function T() {
 			return m().map((e) => e.value).join("");
@@ -62,18 +61,18 @@ m(T, {
 				t[n] && (t[n].value = e);
 			}), c.value = T();
 		}
-		l(n, () => c.value, (e) => {
+		l(t, () => c.value, (e) => {
 			E(e);
 		});
-		function D(e, t) {
-			let i = m(), a = T(), o = t ?? (a.length === i.length && a.split("").every(Boolean));
-			c.value = a, d(n, a), u(n, "input"), u(n, "change"), o && r("complete", {
+		function D(e, r) {
+			let i = m(), a = T(), o = r ?? (a.length === i.length && a.split("").every(Boolean));
+			c.value = a, d(t, a), u(t, "input"), u(t, "change"), o && n("complete", {
 				originalEvent: e,
 				value: a
 			});
 		}
-		function O(e) {
-			return t.type.value === "numeric" ? /^\d$/.test(e) : /^[a-z\d]$/i.test(e);
+		function O(t) {
+			return e.type.value === "numeric" ? /^\d$/.test(t) : /^[a-z\d]$/i.test(t);
 		}
 		function k(e, t) {
 			let n = e.target, r = n.value;
@@ -98,40 +97,40 @@ m(T, {
 		}
 		function j(e) {
 			e.preventDefault();
-			let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => O(e)).slice(0, i.value), n = m();
+			let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => O(e)).slice(0, r.value), n = m();
 			t.forEach((e, t) => {
 				n[t] && (n[t].value = e);
 			}), D(e), n[Math.min(t.length, n.length - 1)]?.focus();
 		}
-		w(t.value, (e) => {
+		w(e.value, (e) => {
 			E(String(e || ""));
-		}), w(t.length, () => {
+		}), w(e.length, () => {
 			requestAnimationFrame(() => E(f()));
 		});
 		let M = S(() => {
-			let e = Number(t.length.value) || 6;
-			return t.separator.value == null ? -1 : Math.floor(e / 2);
+			let t = Number(e.length.value) || 6;
+			return e.separator.value == null ? -1 : Math.floor(t / 2);
 		});
 		return v(() => {
 			E(f());
 		}), g`
-      <div class="otp-group" part="group" role="group" aria-label="${t.label}">
-        ${() => s.value.map((e) => g`
-              ${() => M.value > 0 && e === M.value ? g`
-                      <span class="separator" aria-hidden="true">${() => t.separator.value || "-"}</span>
+      <div class="otp-group" part="group" role="group" aria-label="${e.label}">
+        ${() => s.value.map((t) => g`
+              ${() => M.value > 0 && t === M.value ? g`
+                      <span class="separator" aria-hidden="true">${() => e.separator.value || "-"}</span>
                     ` : ""}
               <input
                 class="cell"
                 part="cell"
-                type="${() => t.masked.value ? "password" : "text"}"
-                inputmode="${() => t.type.value === "numeric" ? "numeric" : "text"}"
+                type="${() => e.masked.value ? "password" : "text"}"
+                inputmode="${() => e.type.value === "numeric" ? "numeric" : "text"}"
                 maxlength="1"
-                autocomplete="${() => e === 0 ? "one-time-code" : "off"}"
-                aria-label="${() => `Digit ${e + 1} of ${i.value}`}"
+                autocomplete="${() => t === 0 ? "one-time-code" : "off"}"
+                aria-label="${() => `Digit ${t + 1} of ${r.value}`}"
                 disabled="${() => o.value ? !0 : null}"
-                @input="${(t) => k(t, e)}"
-                @keydown="${(t) => A(t, e)}"
-                @paste="${(t) => e === 0 ? j(t) : t.preventDefault()}"
+                @input="${(e) => k(e, t)}"
+                @keydown="${(e) => A(e, t)}"
+                @paste="${(e) => t === 0 ? j(e) : e.preventDefault()}"
                 @focus="${(e) => e.target.select()}" />
             `)}
       </div>
@@ -142,7 +141,7 @@ m(T, {
 		t({}),
 		r(".cell"),
 		f,
-		i({
+		e({
 			accentVar: "--_cell-focus-border",
 			container: ".cell",
 			tokenPrefix: "otp-cell"

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, html, prop, bind, getHost, onCleanup, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n  change: Event;\n  complete: { originalEvent?: Event; value: string };\n  input: Event;\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 input - Emitted whenever a cell changes.\n * @fires change - Emitted whenever a cell changes.\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 lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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: props.size,\n        value: () => otpValue.value || null,\n        variant: props.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      signal: lifecycleSignal(onCleanup),\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    defineFieldValue(\n      el,\n      () => otpValue.value,\n      (value) => {\n        syncInputsFromValue(value);\n      },\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      setFieldValue(el, full);\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\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`\n                      <span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>\n                    `\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: [\n    colorThemeMixin,\n    sizeVariantMixin({}),\n    forcedColorsFocusMixin('.cell'),\n    componentStyles,\n    // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why.\n    fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit, useField } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n  change: Event;\n  complete: { originalEvent?: Event; value: string };\n  input: Event;\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 input - Emitted whenever a cell changes.\n * @fires change - Emitted whenever a cell changes.\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 lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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: props.size,\n        value: () => otpValue.value || null,\n        variant: props.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      signal: lifecycleSignal(onCleanup),\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    defineFieldValue(\n      el,\n      () => otpValue.value,\n      (value) => {\n        syncInputsFromValue(value);\n      },\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      setFieldValue(el, full);\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\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`\n                      <span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>\n                    `\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: [\n    colorThemeMixin,\n    sizeVariantMixin({}),\n    forcedColorsFocusMixin('.cell'),\n    componentStyles,\n    // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why.\n    fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n  ],\n});\n"],"mappings":"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"}

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

@@ -1 +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"}
+{"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' }\n  | { 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":"AAWA,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.map

@@ -1 +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"}
+{"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,GACzB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,GAChC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,kBAAkB,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,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.map

@@ -1 +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"}
+{"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' }\n  | { 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":";AAWA,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

@@ -1,2 +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;
+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::-ms-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::-ms-backdrop{opacity:0}}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::-ms-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(: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-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}}`;exports.default=e;
 //# sourceMappingURL=command-palette.css.cjs.map

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

@@ -1 +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":""}
+{"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;\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 //#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}}";
+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::-ms-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::-ms-backdrop{opacity:0}}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::-ms-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(: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-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}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +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":""}
+{"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;\n  }\n}\n"],"mappings":""}

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

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