@vielzeug/refine 1.1.1 → 1.3.0

package/dist/ore/dist/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","names":[],"sources":["../../../../../ore/dist/utils/dom.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";var t=e=>{for(let t=e.length-1;t>=0;t--)e[t]()},n=e=>{for(let t of e)t.remove()},r=new Set([`action`,`cite`,`codebase`,`data`,`formaction`,`href`,`manifest`,`ping`,`poster`,`src`,`xlink:href`]),i=/^\\s*(?:(?:javascript|vbscript|blob):|data:(?:[^,]*\\/(?:html|svg\\+xml)|application\\/(?:xhtml|xml)))/i,a=(t,n,a)=>{let o=n.toLowerCase();if(/^on[a-z]/i.test(n)){e(`Blocked setAttribute(\"${n}\", ...) — inline event handler attributes are not supported. Use @${n.slice(2)} binding syntax instead.`),t.removeAttribute(n);return}if(o===`srcdoc`){e(`Blocked setAttribute(\"srcdoc\", ...) — \"srcdoc\" holds raw HTML, not a URL, and is not supported via attribute binding. Use raw() with a registered sanitizer if you need to inject trusted HTML.`),t.removeAttribute(n);return}if(a==null||a===!1){t.removeAttribute(n);return}let s=a===!0?`true`:String(a);if(r.has(o)&&i.test(s)){e(`Blocked dangerous URL scheme in attribute \"${n}\". Only safe URLs are permitted in URL-accepting attributes.`),t.removeAttribute(n);return}t.setAttribute(n,s)},o=(e,t,n,r)=>{if(!e)return()=>{};let i=n;return e.addEventListener(t,i,r),()=>e.removeEventListener(t,i,r)},s=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),c=e=>Array.isArray(e)||typeof e==`object`&&!!e;export{c as isStructuredValue,o as listen,n as removeNodes,t as runAll,a as setAttr,s as toKebab};\n//# sourceMappingURL=dom.js.map"],"mappings":";;AAAkC,IAAI,KAAE,MAAG;CAAC,KAAI,IAAI,IAAE,EAAE,SAAO,GAAE,KAAG,GAAE,KAAI,EAAE,EAAE,CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,KAAI,IAAI,KAAK,GAAE,EAAE,OAAO;AAAC,GAAE,oBAAE,IAAI,IAAI;CAAC;CAAS;CAAO;CAAW;CAAO;CAAa;CAAO;CAAW;CAAO;CAAS;CAAM;AAAY,CAAC,GAAE,IAAE,uGAAsG,KAAG,GAAE,GAAE,MAAI;CAAC,IAAI,IAAE,EAAE,YAAY;CAAE,IAAG,YAAY,KAAK,CAAC,GAAE;EAAC,EAAE,yBAAyB,EAAE,oEAAoE,EAAE,MAAM,CAAC,EAAE,yBAAyB,GAAE,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,IAAG,MAAI,UAAS;EAAC,EAAE,qMAAiM,GAAE,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,IAAG,KAAG,QAAM,MAAI,CAAC,GAAE;EAAC,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,IAAI,IAAE,MAAI,CAAC,IAAE,SAAO,OAAO,CAAC;CAAE,IAAG,EAAE,IAAI,CAAC,KAAG,EAAE,KAAK,CAAC,GAAE;EAAC,EAAE,8CAA8C,EAAE,6DAA6D,GAAE,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,EAAE,aAAa,GAAE,CAAC;AAAC,GAAE,KAAG,GAAE,GAAE,GAAE,MAAI;CAAC,IAAG,CAAC,GAAE,aAAU,CAAC;CAAE,IAAI,IAAE;CAAE,OAAO,EAAE,iBAAiB,GAAE,GAAE,CAAC,SAAM,EAAE,oBAAoB,GAAE,GAAE,CAAC;AAAC,GAAE,KAAE,MAAG,EAAE,QAAQ,WAAS,MAAG,IAAI,EAAE,YAAY,GAAG,GAAE,KAAE,MAAG,MAAM,QAAQ,CAAC,KAAG,OAAO,KAAG,YAAU,CAAC,CAAC"}
+{"version":3,"file":"dom.js","names":[],"sources":["../../../../../ore/dist/utils/dom.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";var t=e=>{for(let t=e.length-1;t>=0;t--)e[t]()},n=e=>{for(let t of e)t.remove()},r=new Set([`action`,`cite`,`codebase`,`data`,`formaction`,`href`,`manifest`,`ping`,`poster`,`src`,`xlink:href`]),i=/^\\s*(?:(?:javascript|vbscript|blob):|data:(?:[^,]*\\/(?:html|svg\\+xml)|application\\/(?:xhtml|xml)))/i,a=(t,n,a)=>{let o=n.toLowerCase();if(/^on[a-z]/i.test(n)){e(`Blocked setAttribute(\"${n}\", ...) — inline event handler attributes are not supported. Use @${n.slice(2)} binding syntax instead.`),t.removeAttribute(n);return}if(o===`srcdoc`){e(`Blocked setAttribute(\"srcdoc\", ...) — \"srcdoc\" holds raw HTML, not a URL, and is not supported via attribute binding. Use raw() with a registered sanitizer if you need to inject trusted HTML.`),t.removeAttribute(n);return}if(a==null||a===!1){t.removeAttribute(n);return}let s=a===!0?`true`:String(a);if(r.has(o)&&i.test(s)){e(`Blocked dangerous URL scheme in attribute \"${n}\". Only safe URLs are permitted in URL-accepting attributes.`),t.removeAttribute(n);return}t.setAttribute(n,s)},o=(e,t,n,r)=>{if(!e)return()=>{};let i=n;return e.addEventListener(t,i,r),()=>e.removeEventListener(t,i,r)},s=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),c=e=>Array.isArray(e)||typeof e==`object`&&!!e;export{c as isStructuredValue,o as listen,n as removeNodes,t as runAll,a as setAttr,s as toKebab};\n//# sourceMappingURL=dom.js.map"],"mappings":";;AAAkC,IAAI,KAAE,MAAG;CAAC,KAAI,IAAI,IAAE,EAAE,SAAO,GAAE,KAAG,GAAE,KAAI,EAAE,EAAE,CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,KAAI,IAAI,KAAK,GAAE,EAAE,OAAO;AAAC,GAAE,oBAAE,IAAI,IAAI;CAAC;CAAS;CAAO;CAAW;CAAO;CAAa;CAAO;CAAW;CAAO;CAAS;CAAM;AAAY,CAAC,GAAE,IAAE,uGAAsG,KAAG,GAAE,GAAE,MAAI;CAAC,IAAI,IAAE,EAAE,YAAY;CAAE,IAAG,YAAY,KAAK,CAAC,GAAE;EAAC,EAAE,yBAAyB,EAAE,oEAAoE,EAAE,MAAM,CAAC,EAAE,yBAAyB,GAAE,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,IAAG,MAAI,UAAS;EAAC,EAAE,qMAAiM,GAAE,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,IAAG,KAAG,QAAM,MAAI,CAAC,GAAE;EAAC,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,IAAI,IAAE,MAAI,CAAC,IAAE,SAAO,OAAO,CAAC;CAAE,IAAG,EAAE,IAAI,CAAC,KAAG,EAAE,KAAK,CAAC,GAAE;EAAC,EAAE,8CAA8C,EAAE,6DAA6D,GAAE,EAAE,gBAAgB,CAAC;EAAE;CAAM;CAAC,EAAE,aAAa,GAAE,CAAC;AAAC,GAA8G,KAAE,MAAG,EAAE,QAAQ,WAAS,MAAG,IAAI,EAAE,YAAY,GAAG,GAAE,KAAE,MAAG,MAAM,QAAQ,CAAC,KAAG,OAAO,KAAG,YAAU,CAAC,CAAC"}

package/dist/otp-input.cjs

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

package/dist/otp-input.js

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

package/dist/otp-input.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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