@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/number-input.cjs

@@ -1,55 +1,55 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/states.css.cjs`);require(`./styles/index.cjs`),require(`./button.cjs`);const t=require(`./icons.cjs`);require(`./input.cjs`);const n=require(`./inputs/number-input/number-input.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({formAssociated:!0,props:{color:{default:void 0},disabled:{default:!1},fullwidth:{default:!1},label:{default:void 0},"label-placement":{default:`inset`},"large-step":{default:void 0},max:{default:void 0},min:{default:void 0},name:{default:void 0},nullable:{default:!1},placeholder:{default:void 0},readonly:{default:!1},size:{default:void 0},step:{default:1},value:{default:void 0},variant:{default:void 0}},setup({emit:e,host:n,props:i}){let a=(0,r.signal)(i.value.value==null?``:String(i.value.value));(0,r.defineField)({disabled:(0,r.computed)(()=>!!i.disabled.value),value:(0,r.computed)(()=>a.value===``?null:a.value)},{onReset:()=>{a.value=i.value.value==null?``:String(i.value.value)}}),(0,r.watch)(i.value,e=>{let t=e==null?``:String(e);a.value!==t&&(a.value=t)});function o(e){let t=i.min.value,n=i.max.value;return t!=null&&e<Number(t)?Number(t):n!=null&&e>Number(n)?Number(n):e}function s(){let e=a.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function c(t,r){let i=t==null?null:o(t);a.value=i==null?``:String(i),i==null?n.removeAttribute(`value`):n.setAttribute(`value`,String(i)),e(`change`,{originalEvent:r,value:i})}function l(e,t){i.disabled.value||i.readonly.value||c((s()??(i.min.value==null?0:Number(i.min.value)))+e,t)}function u(e){if(i.disabled.value||i.readonly.value)return;let t=Number(i.step.value)||1,n=Number(i[`large-step`].value)||t*10;switch(e.key){case`ArrowDown`:e.preventDefault(),l(-t,e);break;case`ArrowUp`:e.preventDefault(),l(t,e);break;case`End`:i.max.value!=null&&(e.preventDefault(),c(Number(i.max.value),e));break;case`Home`:i.min.value!=null&&(e.preventDefault(),c(Number(i.min.value),e));break;case`PageDown`:e.preventDefault(),l(-n,e);break;case`PageUp`:e.preventDefault(),l(n,e);break}}let d=(0,r.computed)(()=>i.min.value!=null&&s()!=null&&s()<=Number(i.min.value)),f=(0,r.computed)(()=>i.max.value!=null&&s()!=null&&s()>=Number(i.max.value));return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/states.css.cjs`);require(`./styles/index.cjs`);const n=require(`./packages/craftit/dist/controls/spinner-control.cjs`);require(`./packages/craftit/dist/controls.cjs`),require(`./button.cjs`),require(`./input.cjs`);const r=require(`./inputs/number-input/number-input.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,fullwidth:!1,label:void 0,"label-placement":`inset`,"large-step":void 0,max:void 0,min:void 0,name:void 0,nullable:!1,placeholder:void 0,readonly:!1,step:1,value:void 0,variant:void 0},o=(0,i.define)(`bit-number-input`,{formAssociated:!0,props:a,setup({emit:e,host:t,props:r}){let a=e=>e==null?``:String(e),o=(0,i.computed)(()=>!!r.disabled.value),s=(0,i.computed)(()=>!!r.readonly.value),c=(0,i.signal)(a(r.value.value)),l=(0,i.signal)(a(r.value.value)),u=e=>{c.value!==e&&(c.value=e),l.value!==e&&(l.value=e)};t.bind(`attr`,{value:()=>l.value||null}),(0,i.defineField)({disabled:o,value:(0,i.computed)(()=>c.value===``?null:c.value)},{onReset:()=>{u(a(r.value.value))}}),(0,i.watch)(r.value,e=>{u(a(e))});function d(e){let t=r.min.value,n=r.max.value;return t!=null&&e<Number(t)?Number(t):n!=null&&e>Number(n)?Number(n):e}function f(){let e=c.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function p(t,n){let r=t==null?null:d(t);u(r==null?``:String(r)),e(`change`,{originalEvent:n,value:r})}let m=n.i({commit:p,disabled:()=>o.value,largeStep:()=>r[`large-step`].value,max:()=>r.max.value,min:()=>r.min.value,parse:f,readonly:()=>s.value,step:()=>r.step.value});function h(e){m.handleKeydown(e)}let g=(0,i.computed)(()=>m.atMin()),_=(0,i.computed)(()=>m.atMax()),v=(0,i.computed)(()=>o.value||s.value);return i.html`
       <div
         class="wrapper"
         role="spinbutton"
         part="control"
-        :aria-valuenow="${()=>s()??null}"
-        :aria-valuemin="${()=>i.min.value??null}"
-        :aria-valuemax="${()=>i.max.value??null}"
-        :aria-label="${()=>i.label.value||null}"
-        :aria-disabled="${()=>i.disabled.value?`true`:null}"
-        :aria-readonly="${()=>i.readonly.value?`true`:null}"
-        @keydown="${u}">
+        :aria-valuenow="${()=>f()??null}"
+        :aria-valuemin="${()=>r.min.value??null}"
+        :aria-valuemax="${()=>r.max.value??null}"
+        :aria-label="${()=>r.label.value||null}"
+        :aria-disabled="${()=>o.value?`true`:null}"
+        :aria-readonly="${()=>s.value?`true`:null}"
+        @keydown="${h}">
         <bit-button
           icon-only
           type="button"
           part="decrement-btn"
           aria-label="Decrease"
           variant="ghost"
-          :size="${()=>i.size.value||null}"
-          :color="${()=>i.color.value||null}"
-          ?disabled="${()=>i.disabled.value||i.readonly.value||d.value}"
-          @click="${e=>l(-(Number(i.step.value)||1),e)}"
-          >${t.minusIcon}</bit-button
-        >
+          :size="${()=>r.size.value||null}"
+          :color="${()=>r.color.value||null}"
+          ?disabled="${()=>v.value||g.value}"
+          @click="${e=>m.incrementBy(-(Number(r.step.value)||1),e)}"
+          ><bit-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></bit-icon
+        ></bit-button>
         <bit-input
           part="input"
           type="text"
           inputmode="decimal"
           aria-hidden="true"
-          :value="${()=>a.value}"
-          :label="${()=>i.label.value||null}"
-          :label-placement="${()=>i[`label-placement`].value}"
-          :placeholder="${()=>i.placeholder.value||null}"
-          :color="${()=>i.color.value||null}"
-          :size="${()=>i.size.value||null}"
-          :variant="${()=>i.variant.value||null}"
-          ?disabled="${()=>i.disabled.value}"
-          ?readonly="${()=>i.readonly.value}"
-          @input="${t=>{let n=t.detail?.value;typeof n==`string`&&(a.value=n,e(`input`,{originalEvent:t.detail?.originalEvent??t,value:s()}))}}"
-          @change="${e=>{let t=e.detail?.value;if(typeof t!=`string`)return;a.value=t;let n=e.detail?.originalEvent??e;c(s(),n)}}"></bit-input>
+          :value="${()=>c.value}"
+          :label="${()=>r.label.value||null}"
+          :label-placement="${()=>r[`label-placement`].value}"
+          :placeholder="${()=>r.placeholder.value||null}"
+          :color="${()=>r.color.value||null}"
+          :size="${()=>r.size.value||null}"
+          :variant="${()=>r.variant.value||null}"
+          ?disabled="${()=>o.value}"
+          ?readonly="${()=>s.value}"
+          @input="${t=>{let n=t.detail?.value;typeof n==`string`&&(c.value=n,e(`input`,{originalEvent:t.detail?.originalEvent??t,value:f()}))}}"
+          @change="${e=>{let t=e.detail?.value;if(typeof t!=`string`)return;c.value=t;let n=e.detail?.originalEvent??e;p(f(),n)}}"></bit-input>
         <bit-button
           icon-only
           type="button"
           part="increment-btn"
           aria-label="Increase"
           variant="ghost"
-          :size="${()=>i.size.value||null}"
-          :color="${()=>i.color.value||null}"
-          ?disabled="${()=>i.disabled.value||i.readonly.value||f.value}"
-          @click="${e=>l(Number(i.step.value)||1,e)}"
-          >${t.plusIcon}</bit-button
-        >
+          :size="${()=>r.size.value||null}"
+          :color="${()=>r.color.value||null}"
+          ?disabled="${()=>v.value||_.value}"
+          @click="${e=>m.incrementBy(Number(r.step.value)||1,e)}"
+          ><bit-icon name="plus" size="14" stroke-width="2.5" aria-hidden="true"></bit-icon
+        ></bit-button>
       </div>
-    `},styles:[e.disabledStateMixin(),n.default],tag:`bit-number-input`});exports.NUMBER_INPUT_TAG=i;
+    `},styles:[t.disabledStateMixin(),r.default]});exports.NUMBER_INPUT_TAG=o;
 //# sourceMappingURL=number-input.cjs.map

package/dist/number-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { computed, defineComponent, defineField, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport { minusIcon, plusIcon } from '../../icons';\nimport { disabledStateMixin } from '../../styles';\n// Ensure child components are registered\nimport '../button/button';\nimport '../input/input';\nimport styles from './number-input.css?inline';\n\nexport type BitNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\n};\n\n/** Number Input props */\nexport type BitNumberInputProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Stretch to full width of container */\n    fullwidth?: boolean;\n    /** Visible label */\n    label?: string;\n    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n    'label-placement'?: 'inset' | 'outside';\n    /** Large step (for Page Up/Down, default: 10 × step) */\n    'large-step'?: number;\n    /** Maximum allowed value */\n    max?: number;\n    /** Minimum allowed value */\n    min?: number;\n    name?: string;\n    /** Allow null/empty value */\n    nullable?: boolean;\n    /** Form field name */\n\n    /** Placeholder text */\n    placeholder?: string;\n    /** Make the input read-only */\n    readonly?: boolean;\n    /** Step size for increment/decrement */\n    step?: number;\n    /** Current numeric value */\n    value?: number;\n    /** Visual variant */\n    variant?: VisualVariant;\n  };\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element bit-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @example\n * ```html\n * <bit-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></bit-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = defineComponent<BitNumberInputProps, BitNumberInputEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    fullwidth: { default: false },\n    label: { default: undefined },\n    'label-placement': { default: 'inset' },\n    'large-step': { default: undefined },\n    max: { default: undefined },\n    min: { default: undefined },\n    name: { default: undefined },\n    nullable: { default: false },\n    placeholder: { default: undefined },\n    readonly: { default: false },\n    size: { default: undefined },\n    step: { default: 1 },\n    value: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const inputValue = signal<string>(props.value.value != null ? String(props.value.value) : '');\n\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        value: computed(() => (inputValue.value !== '' ? inputValue.value : null)),\n      },\n      {\n        onReset: () => {\n          inputValue.value = props.value.value != null ? String(props.value.value) : '';\n        },\n      },\n    );\n    watch(props.value, (v) => {\n      const newVal = v != null ? String(v) : '';\n\n      if (inputValue.value !== newVal) inputValue.value = newVal;\n    });\n    function clamp(n: number): number {\n      const min = props.min.value;\n      const max = props.max.value;\n\n      if (min != null && n < Number(min)) return Number(min);\n\n      if (max != null && n > Number(max)) return Number(max);\n\n      return n;\n    }\n    function parseValue(): number | null {\n      const v = inputValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n    function commit(val: number | null, originalEvent?: Event) {\n      const clamped = val != null ? clamp(val) : null;\n\n      inputValue.value = clamped != null ? String(clamped) : '';\n\n      if (clamped != null) host.setAttribute('value', String(clamped));\n      else host.removeAttribute('value');\n\n      emit('change', { originalEvent, value: clamped });\n    }\n    function increment(delta: number, originalEvent?: Event) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const current = parseValue() ?? (props.min.value != null ? Number(props.min.value) : 0);\n\n      commit(current + delta, originalEvent);\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const step = Number(props.step.value) || 1;\n      const largeStep = Number(props['large-step'].value) || step * 10;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          increment(-step, e);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          increment(step, e);\n          break;\n        case 'End':\n          if (props.max.value != null) {\n            e.preventDefault();\n            commit(Number(props.max.value), e);\n          }\n\n          break;\n        case 'Home':\n          if (props.min.value != null) {\n            e.preventDefault();\n            commit(Number(props.min.value), e);\n          }\n\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          increment(-largeStep, e);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          increment(largeStep, e);\n          break;\n      }\n    }\n\n    const atMin = computed(\n      () => props.min.value != null && parseValue() != null && parseValue()! <= Number(props.min.value),\n    );\n    const atMax = computed(\n      () => props.max.value != null && parseValue() != null && parseValue()! >= Number(props.max.value),\n    );\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"spinbutton\"\n        part=\"control\"\n        :aria-valuenow=\"${() => parseValue() ?? null}\"\n        :aria-valuemin=\"${() => props.min.value ?? null}\"\n        :aria-valuemax=\"${() => props.max.value ?? null}\"\n        :aria-label=\"${() => props.label.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        :aria-readonly=\"${() => (props.readonly.value ? 'true' : null)}\"\n        @keydown=\"${handleKeydown}\">\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMin.value}\"\n          @click=\"${(e: Event) => increment(-(Number(props.step.value) || 1), e)}\"\n          >${minusIcon}</bit-button\n        >\n        <bit-input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          aria-hidden=\"true\"\n          :value=\"${() => inputValue.value}\"\n          :label=\"${() => props.label.value || null}\"\n          :label-placement=\"${() => props['label-placement'].value}\"\n          :placeholder=\"${() => props.placeholder.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          :size=\"${() => props.size.value || null}\"\n          :variant=\"${() => props.variant.value || null}\"\n          ?disabled=\"${() => props.disabled.value}\"\n          ?readonly=\"${() => props.readonly.value}\"\n          @input=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            emit('input', { originalEvent, value: parseValue() });\n          }}\"\n          @change=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            commit(parseValue(), originalEvent);\n          }}\"></bit-input>\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMax.value}\"\n          @click=\"${(e: Event) => increment(Number(props.step.value) || 1, e)}\"\n          >${plusIcon}</bit-button\n        >\n      </div>\n    `;\n  },\n  styles: [disabledStateMixin(), styles],\n  tag: 'bit-number-input',\n});\n"],"mappings":"yUAiFA,IAAa,GAAA,EAAA,EAAA,iBAA8E,CACzF,eAAgB,GAChB,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,UAAW,CAAE,QAAS,GAAO,CAC7B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,kBAAmB,CAAE,QAAS,QAAS,CACvC,aAAc,CAAE,QAAS,IAAA,GAAW,CACpC,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,SAAU,CAAE,QAAS,GAAO,CAC5B,YAAa,CAAE,QAAS,IAAA,GAAW,CACnC,SAAU,CAAE,QAAS,GAAO,CAC5B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,KAAM,CAAE,QAAS,EAAG,CACpB,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAA4B,EAAM,MAAM,OAAS,KAAmC,GAA5B,OAAO,EAAM,MAAM,MAAM,CAAM,EAE7F,EAAA,EAAA,aACE,CACE,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,MAAO,CACvD,OAAA,EAAA,EAAA,cAAuB,EAAW,QAAU,GAAwB,KAAnB,EAAW,MAAc,CAC3E,CACD,CACE,YAAe,CACb,EAAW,MAAQ,EAAM,MAAM,OAAS,KAAmC,GAA5B,OAAO,EAAM,MAAM,MAAM,EAE3E,CACF,EACD,EAAA,EAAA,OAAM,EAAM,MAAQ,GAAM,CACxB,IAAM,EAAS,GAAK,KAAmB,GAAZ,OAAO,EAAE,CAEhC,EAAW,QAAU,IAAQ,EAAW,MAAQ,IACpD,CACF,SAAS,EAAM,EAAmB,CAChC,IAAM,EAAM,EAAM,IAAI,MAChB,EAAM,EAAM,IAAI,MAMtB,OAJI,GAAO,MAAQ,EAAI,OAAO,EAAI,CAAS,OAAO,EAAI,CAElD,GAAO,MAAQ,EAAI,OAAO,EAAI,CAAS,OAAO,EAAI,CAE/C,EAET,SAAS,GAA4B,CACnC,IAAM,EAAI,EAAW,MAAM,MAAM,CAEjC,GAAI,CAAC,EAAG,OAAO,KAEf,IAAM,EAAI,OAAO,WAAW,EAAE,CAE9B,OAAO,OAAO,MAAM,EAAE,CAAG,KAAO,EAElC,SAAS,EAAO,EAAoB,EAAuB,CACzD,IAAM,EAAU,GAAO,KAAoB,KAAb,EAAM,EAAI,CAExC,EAAW,MAAQ,GAAW,KAAyB,GAAlB,OAAO,EAAQ,CAEhD,GAAW,KACV,EAAK,gBAAgB,QAAQ,CADb,EAAK,aAAa,QAAS,OAAO,EAAQ,CAAC,CAGhE,EAAK,SAAU,CAAE,gBAAe,MAAO,EAAS,CAAC,CAEnD,SAAS,EAAU,EAAe,EAAuB,CACnD,EAAM,SAAS,OAAS,EAAM,SAAS,OAI3C,GAFgB,GAAY,GAAK,EAAM,IAAI,OAAS,KAAiC,EAA1B,OAAO,EAAM,IAAI,MAAM,GAEjE,EAAO,EAAc,CAExC,SAAS,EAAc,EAAkB,CACvC,GAAI,EAAM,SAAS,OAAS,EAAM,SAAS,MAAO,OAElD,IAAM,EAAO,OAAO,EAAM,KAAK,MAAM,EAAI,EACnC,EAAY,OAAO,EAAM,cAAc,MAAM,EAAI,EAAO,GAE9D,OAAQ,EAAE,IAAV,CACE,IAAK,YACH,EAAE,gBAAgB,CAClB,EAAU,CAAC,EAAM,EAAE,CACnB,MACF,IAAK,UACH,EAAE,gBAAgB,CAClB,EAAU,EAAM,EAAE,CAClB,MACF,IAAK,MACC,EAAM,IAAI,OAAS,OACrB,EAAE,gBAAgB,CAClB,EAAO,OAAO,EAAM,IAAI,MAAM,CAAE,EAAE,EAGpC,MACF,IAAK,OACC,EAAM,IAAI,OAAS,OACrB,EAAE,gBAAgB,CAClB,EAAO,OAAO,EAAM,IAAI,MAAM,CAAE,EAAE,EAGpC,MACF,IAAK,WACH,EAAE,gBAAgB,CAClB,EAAU,CAAC,EAAW,EAAE,CACxB,MACF,IAAK,SACH,EAAE,gBAAgB,CAClB,EAAU,EAAW,EAAE,CACvB,OAIN,IAAM,GAAA,EAAA,EAAA,cACE,EAAM,IAAI,OAAS,MAAQ,GAAY,EAAI,MAAQ,GAAY,EAAK,OAAO,EAAM,IAAI,MAAM,CAClG,CACK,GAAA,EAAA,EAAA,cACE,EAAM,IAAI,OAAS,MAAQ,GAAY,EAAI,MAAQ,GAAY,EAAK,OAAO,EAAM,IAAI,MAAM,CAClG,CAED,MAAO,GAAA,IAAI;;;;;8BAKiB,GAAY,EAAI,KAAK;8BACrB,EAAM,IAAI,OAAS,KAAK;8BACxB,EAAM,IAAI,OAAS,KAAK;2BAC3B,EAAM,MAAM,OAAS,KAAK;8BACtB,EAAM,SAAS,MAAQ,OAAS,KAAM;8BACtC,EAAM,SAAS,MAAQ,OAAS,KAAM;oBACnD,EAAc;;;;;;;uBAOT,EAAM,KAAK,OAAS,KAAK;wBACxB,EAAM,MAAM,OAAS,KAAK;2BACvB,EAAM,SAAS,OAAS,EAAM,SAAS,OAAS,EAAM,MAAM;oBACpE,GAAa,EAAU,EAAE,OAAO,EAAM,KAAK,MAAM,EAAI,GAAI,EAAE,CAAC;aACpE,EAAA,UAAU;;;;;;;wBAOG,EAAW,MAAM;wBACjB,EAAM,MAAM,OAAS,KAAK;kCAChB,EAAM,mBAAmB,MAAM;8BACnC,EAAM,YAAY,OAAS,KAAK;wBACtC,EAAM,MAAM,OAAS,KAAK;uBAC3B,EAAM,KAAK,OAAS,KAAK;0BACtB,EAAM,QAAQ,OAAS,KAAK;2BAC3B,EAAM,SAAS,MAAM;2BACrB,EAAM,SAAS,MAAM;oBAC7B,GAAa,CACtB,IAAM,EACJ,EAGA,QAAQ,MAEN,OAAO,GAAM,WAEjB,EAAW,MAAQ,EAInB,EAAK,QAAS,CAAE,cAFO,EAA6C,QAAQ,eAAiB,EAE9D,MAAO,GAAY,CAAE,CAAC,GACrD;qBACU,GAAa,CACvB,IAAM,EACJ,EAGA,QAAQ,MAEV,GAAI,OAAO,GAAM,SAAU,OAE3B,EAAW,MAAQ,EAEnB,IAAM,EAAiB,EAA6C,QAAQ,eAAiB,EAE7F,EAAO,GAAY,CAAE,EAAc,EACnC;;;;;;;uBAOa,EAAM,KAAK,OAAS,KAAK;wBACxB,EAAM,MAAM,OAAS,KAAK;2BACvB,EAAM,SAAS,OAAS,EAAM,SAAS,OAAS,EAAM,MAAM;oBACpE,GAAa,EAAU,OAAO,EAAM,KAAK,MAAM,EAAI,EAAG,EAAE,CAAC;aACjE,EAAA,SAAS;;;OAKpB,OAAQ,CAAC,EAAA,oBAAoB,CAAE,EAAA,QAAO,CACtC,IAAK,mBACN,CAAC"}
+{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { define, computed, defineField, html, signal, watch } from '@vielzeug/craftit';\nimport { createSpinnerControl } from '@vielzeug/craftit/controls';\n\nimport type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { disabledStateMixin } from '../../styles';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\n// Ensure child components are registered\nimport '../button/button';\nimport '../input/input';\nimport styles from './number-input.css?inline';\n\nexport type BitNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\n};\n\n/** Number Input props */\nexport type BitNumberInputProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Stretch to full width of container */\n    fullwidth?: boolean;\n    /** Visible label */\n    label?: string;\n    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n    'label-placement'?: 'inset' | 'outside';\n    /** Large step (for Page Up/Down, default: 10 × step) */\n    'large-step'?: number;\n    /** Maximum allowed value */\n    max?: number;\n    /** Minimum allowed value */\n    min?: number;\n    name?: string;\n    /** Allow null/empty value */\n    nullable?: boolean;\n    /** Form field name */\n\n    /** Placeholder text */\n    placeholder?: string;\n    /** Make the input read-only */\n    readonly?: boolean;\n    /** Step size for increment/decrement */\n    step?: number;\n    /** Current numeric value */\n    value?: number;\n    /** Visual variant */\n    variant?: VisualVariant;\n  };\n\nconst numberInputProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  fullwidth: false,\n  label: undefined,\n  'label-placement': 'inset',\n  'large-step': undefined,\n  max: undefined,\n  min: undefined,\n  name: undefined,\n  nullable: false,\n  placeholder: undefined,\n  readonly: false,\n  step: 1,\n  value: undefined,\n  variant: undefined,\n} satisfies PropBundle<BitNumberInputProps>;\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element bit-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @example\n * ```html\n * <bit-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></bit-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = define<BitNumberInputProps, BitNumberInputEvents>('bit-number-input', {\n  formAssociated: true,\n  props: numberInputProps,\n  setup({ emit, host, props }) {\n    const normalizeValue = (value: number | string | undefined | null): string => (value != null ? String(value) : '');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n    const inputValue = signal<string>(normalizeValue(props.value.value));\n    const committedValue = signal<string>(normalizeValue(props.value.value));\n    const syncValueState = (nextValue: string) => {\n      if (inputValue.value !== nextValue) inputValue.value = nextValue;\n\n      if (committedValue.value !== nextValue) committedValue.value = nextValue;\n    };\n\n    host.bind('attr', {\n      value: () => committedValue.value || null,\n    });\n\n    defineField(\n      {\n        disabled: isDisabled,\n        value: computed(() => (inputValue.value !== '' ? inputValue.value : null)),\n      },\n      {\n        onReset: () => {\n          syncValueState(normalizeValue(props.value.value));\n        },\n      },\n    );\n    watch(props.value, (v) => {\n      syncValueState(normalizeValue(v));\n    });\n    function clamp(n: number): number {\n      const min = props.min.value;\n      const max = props.max.value;\n\n      if (min != null && n < Number(min)) return Number(min);\n\n      if (max != null && n > Number(max)) return Number(max);\n\n      return n;\n    }\n    function parseValue(): number | null {\n      const v = inputValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n    function commit(val: number | null, originalEvent?: Event) {\n      const clamped = val != null ? clamp(val) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      syncValueState(nextValue);\n\n      emit('change', { originalEvent, value: clamped });\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: () => isDisabled.value,\n      largeStep: () => props['large-step'].value,\n      max: () => props.max.value,\n      min: () => props.min.value,\n      parse: parseValue,\n      readonly: () => isReadonly.value,\n      step: () => props.step.value,\n    });\n\n    function handleKeydown(e: KeyboardEvent) {\n      spinner.handleKeydown(e);\n    }\n\n    const atMin = computed(() => spinner.atMin());\n    const atMax = computed(() => spinner.atMax());\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"spinbutton\"\n        part=\"control\"\n        :aria-valuenow=\"${() => parseValue() ?? null}\"\n        :aria-valuemin=\"${() => props.min.value ?? null}\"\n        :aria-valuemax=\"${() => props.max.value ?? null}\"\n        :aria-label=\"${() => props.label.value || null}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :aria-readonly=\"${() => (isReadonly.value ? 'true' : null)}\"\n        @keydown=\"${handleKeydown}\">\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => isNonInteractive.value || atMin.value}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\"\n          ><bit-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon\n        ></bit-button>\n        <bit-input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          aria-hidden=\"true\"\n          :value=\"${() => inputValue.value}\"\n          :label=\"${() => props.label.value || null}\"\n          :label-placement=\"${() => props['label-placement'].value}\"\n          :placeholder=\"${() => props.placeholder.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          :size=\"${() => props.size.value || null}\"\n          :variant=\"${() => props.variant.value || null}\"\n          ?disabled=\"${() => isDisabled.value}\"\n          ?readonly=\"${() => isReadonly.value}\"\n          @input=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            emit('input', { originalEvent, value: parseValue() });\n          }}\"\n          @change=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            commit(parseValue(), originalEvent);\n          }}\"></bit-input>\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => isNonInteractive.value || atMax.value}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\"\n          ><bit-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon\n        ></bit-button>\n      </div>\n    `;\n  },\n  styles: [disabledStateMixin(), styles],\n});\n"],"mappings":"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"}

package/dist/number-input.js

@@ -1,138 +1,127 @@
-import { disabledStateMixin as e } from "./styles/mixins/states.css.js";
+import "./icon.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { disabledStateMixin as r } from "./styles/mixins/states.css.js";
 import "./styles/index.js";
+import { i } from "./packages/craftit/dist/controls/spinner-control.js";
+import "./packages/craftit/dist/controls.js";
 import "./button.js";
-import { minusIcon as t, plusIcon as n } from "./icons.js";
 import "./input.js";
-import r from "./inputs/number-input/number-input.css?inline.js";
-import { computed as i, defineComponent as a, defineField as o, html as s, signal as c, watch as l } from "@vielzeug/craftit";
-//#region src/inputs/number-input/number-input.ts
-var u = a({
+import a from "./inputs/number-input/number-input.css?inline.js";
+import { computed as o, define as s, defineField as c, html as l, signal as u, watch as d } from "@vielzeug/craftit";
+var f = s("bit-number-input", {
 	formAssociated: !0,
 	props: {
-		color: { default: void 0 },
-		disabled: { default: !1 },
-		fullwidth: { default: !1 },
-		label: { default: void 0 },
-		"label-placement": { default: "inset" },
-		"large-step": { default: void 0 },
-		max: { default: void 0 },
-		min: { default: void 0 },
-		name: { default: void 0 },
-		nullable: { default: !1 },
-		placeholder: { default: void 0 },
-		readonly: { default: !1 },
-		size: { default: void 0 },
-		step: { default: 1 },
-		value: { default: void 0 },
-		variant: { default: void 0 }
+		...n,
+		...t,
+		...e,
+		fullwidth: !1,
+		label: void 0,
+		"label-placement": "inset",
+		"large-step": void 0,
+		max: void 0,
+		min: void 0,
+		name: void 0,
+		nullable: !1,
+		placeholder: void 0,
+		readonly: !1,
+		step: 1,
+		value: void 0,
+		variant: void 0
 	},
-	setup({ emit: e, host: r, props: a }) {
-		let u = c(a.value.value == null ? "" : String(a.value.value));
-		o({
-			disabled: i(() => !!a.disabled.value),
-			value: i(() => u.value === "" ? null : u.value)
+	setup({ emit: e, host: t, props: n }) {
+		let r = (e) => e == null ? "" : String(e), a = o(() => !!n.disabled.value), s = o(() => !!n.readonly.value), f = u(r(n.value.value)), p = u(r(n.value.value)), m = (e) => {
+			f.value !== e && (f.value = e), p.value !== e && (p.value = e);
+		};
+		t.bind("attr", { value: () => p.value || null }), c({
+			disabled: a,
+			value: o(() => f.value === "" ? null : f.value)
 		}, { onReset: () => {
-			u.value = a.value.value == null ? "" : String(a.value.value);
-		} }), l(a.value, (e) => {
-			let t = e == null ? "" : String(e);
-			u.value !== t && (u.value = t);
+			m(r(n.value.value));
+		} }), d(n.value, (e) => {
+			m(r(e));
 		});
-		function d(e) {
-			let t = a.min.value, n = a.max.value;
-			return t != null && e < Number(t) ? Number(t) : n != null && e > Number(n) ? Number(n) : e;
+		function h(e) {
+			let t = n.min.value, r = n.max.value;
+			return t != null && e < Number(t) ? Number(t) : r != null && e > Number(r) ? Number(r) : e;
 		}
-		function f() {
-			let e = u.value.trim();
+		function g() {
+			let e = f.value.trim();
 			if (!e) return null;
 			let t = Number.parseFloat(e);
 			return Number.isNaN(t) ? null : t;
 		}
-		function p(t, n) {
-			let i = t == null ? null : d(t);
-			u.value = i == null ? "" : String(i), i == null ? r.removeAttribute("value") : r.setAttribute("value", String(i)), e("change", {
+		function _(t, n) {
+			let r = t == null ? null : h(t);
+			m(r == null ? "" : String(r)), e("change", {
 				originalEvent: n,
-				value: i
+				value: r
 			});
 		}
-		function m(e, t) {
-			a.disabled.value || a.readonly.value || p((f() ?? (a.min.value == null ? 0 : Number(a.min.value))) + e, t);
-		}
-		function h(e) {
-			if (a.disabled.value || a.readonly.value) return;
-			let t = Number(a.step.value) || 1, n = Number(a["large-step"].value) || t * 10;
-			switch (e.key) {
-				case "ArrowDown":
-					e.preventDefault(), m(-t, e);
-					break;
-				case "ArrowUp":
-					e.preventDefault(), m(t, e);
-					break;
-				case "End":
-					a.max.value != null && (e.preventDefault(), p(Number(a.max.value), e));
-					break;
-				case "Home":
-					a.min.value != null && (e.preventDefault(), p(Number(a.min.value), e));
-					break;
-				case "PageDown":
-					e.preventDefault(), m(-n, e);
-					break;
-				case "PageUp":
-					e.preventDefault(), m(n, e);
-					break;
-			}
+		let v = i({
+			commit: _,
+			disabled: () => a.value,
+			largeStep: () => n["large-step"].value,
+			max: () => n.max.value,
+			min: () => n.min.value,
+			parse: g,
+			readonly: () => s.value,
+			step: () => n.step.value
+		});
+		function y(e) {
+			v.handleKeydown(e);
 		}
-		let g = i(() => a.min.value != null && f() != null && f() <= Number(a.min.value)), _ = i(() => a.max.value != null && f() != null && f() >= Number(a.max.value));
-		return s`
+		let b = o(() => v.atMin()), x = o(() => v.atMax()), S = o(() => a.value || s.value);
+		return l`
       <div
         class="wrapper"
         role="spinbutton"
         part="control"
-        :aria-valuenow="${() => f() ?? null}"
-        :aria-valuemin="${() => a.min.value ?? null}"
-        :aria-valuemax="${() => a.max.value ?? null}"
-        :aria-label="${() => a.label.value || null}"
-        :aria-disabled="${() => a.disabled.value ? "true" : null}"
-        :aria-readonly="${() => a.readonly.value ? "true" : null}"
-        @keydown="${h}">
+        :aria-valuenow="${() => g() ?? null}"
+        :aria-valuemin="${() => n.min.value ?? null}"
+        :aria-valuemax="${() => n.max.value ?? null}"
+        :aria-label="${() => n.label.value || null}"
+        :aria-disabled="${() => a.value ? "true" : null}"
+        :aria-readonly="${() => s.value ? "true" : null}"
+        @keydown="${y}">
         <bit-button
           icon-only
           type="button"
           part="decrement-btn"
           aria-label="Decrease"
           variant="ghost"
-          :size="${() => a.size.value || null}"
-          :color="${() => a.color.value || null}"
-          ?disabled="${() => a.disabled.value || a.readonly.value || g.value}"
-          @click="${(e) => m(-(Number(a.step.value) || 1), e)}"
-          >${t}</bit-button
-        >
+          :size="${() => n.size.value || null}"
+          :color="${() => n.color.value || null}"
+          ?disabled="${() => S.value || b.value}"
+          @click="${(e) => v.incrementBy(-(Number(n.step.value) || 1), e)}"
+          ><bit-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></bit-icon
+        ></bit-button>
         <bit-input
           part="input"
           type="text"
           inputmode="decimal"
           aria-hidden="true"
-          :value="${() => u.value}"
-          :label="${() => a.label.value || null}"
-          :label-placement="${() => a["label-placement"].value}"
-          :placeholder="${() => a.placeholder.value || null}"
-          :color="${() => a.color.value || null}"
-          :size="${() => a.size.value || null}"
-          :variant="${() => a.variant.value || null}"
-          ?disabled="${() => a.disabled.value}"
-          ?readonly="${() => a.readonly.value}"
+          :value="${() => f.value}"
+          :label="${() => n.label.value || null}"
+          :label-placement="${() => n["label-placement"].value}"
+          :placeholder="${() => n.placeholder.value || null}"
+          :color="${() => n.color.value || null}"
+          :size="${() => n.size.value || null}"
+          :variant="${() => n.variant.value || null}"
+          ?disabled="${() => a.value}"
+          ?readonly="${() => s.value}"
           @input="${(t) => {
 			let n = t.detail?.value;
-			typeof n == "string" && (u.value = n, e("input", {
+			typeof n == "string" && (f.value = n, e("input", {
 				originalEvent: t.detail?.originalEvent ?? t,
-				value: f()
+				value: g()
 			}));
 		}}"
           @change="${(e) => {
 			let t = e.detail?.value;
 			if (typeof t != "string") return;
-			u.value = t;
+			f.value = t;
 			let n = e.detail?.originalEvent ?? e;
-			p(f(), n);
+			_(g(), n);
 		}}"></bit-input>
         <bit-button
           icon-only
@@ -140,19 +129,18 @@ var u = a({
           part="increment-btn"
           aria-label="Increase"
           variant="ghost"
-          :size="${() => a.size.value || null}"
-          :color="${() => a.color.value || null}"
-          ?disabled="${() => a.disabled.value || a.readonly.value || _.value}"
-          @click="${(e) => m(Number(a.step.value) || 1, e)}"
-          >${n}</bit-button
-        >
+          :size="${() => n.size.value || null}"
+          :color="${() => n.color.value || null}"
+          ?disabled="${() => S.value || x.value}"
+          @click="${(e) => v.incrementBy(Number(n.step.value) || 1, e)}"
+          ><bit-icon name="plus" size="14" stroke-width="2.5" aria-hidden="true"></bit-icon
+        ></bit-button>
       </div>
     `;
 	},
-	styles: [e(), r],
-	tag: "bit-number-input"
+	styles: [r(), a]
 });
 //#endregion
-export { u as NUMBER_INPUT_TAG };
+export { f as NUMBER_INPUT_TAG };
 
 //# sourceMappingURL=number-input.js.map

package/dist/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { computed, defineComponent, defineField, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport { minusIcon, plusIcon } from '../../icons';\nimport { disabledStateMixin } from '../../styles';\n// Ensure child components are registered\nimport '../button/button';\nimport '../input/input';\nimport styles from './number-input.css?inline';\n\nexport type BitNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\n};\n\n/** Number Input props */\nexport type BitNumberInputProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Stretch to full width of container */\n    fullwidth?: boolean;\n    /** Visible label */\n    label?: string;\n    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n    'label-placement'?: 'inset' | 'outside';\n    /** Large step (for Page Up/Down, default: 10 × step) */\n    'large-step'?: number;\n    /** Maximum allowed value */\n    max?: number;\n    /** Minimum allowed value */\n    min?: number;\n    name?: string;\n    /** Allow null/empty value */\n    nullable?: boolean;\n    /** Form field name */\n\n    /** Placeholder text */\n    placeholder?: string;\n    /** Make the input read-only */\n    readonly?: boolean;\n    /** Step size for increment/decrement */\n    step?: number;\n    /** Current numeric value */\n    value?: number;\n    /** Visual variant */\n    variant?: VisualVariant;\n  };\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element bit-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @example\n * ```html\n * <bit-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></bit-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = defineComponent<BitNumberInputProps, BitNumberInputEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    fullwidth: { default: false },\n    label: { default: undefined },\n    'label-placement': { default: 'inset' },\n    'large-step': { default: undefined },\n    max: { default: undefined },\n    min: { default: undefined },\n    name: { default: undefined },\n    nullable: { default: false },\n    placeholder: { default: undefined },\n    readonly: { default: false },\n    size: { default: undefined },\n    step: { default: 1 },\n    value: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const inputValue = signal<string>(props.value.value != null ? String(props.value.value) : '');\n\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        value: computed(() => (inputValue.value !== '' ? inputValue.value : null)),\n      },\n      {\n        onReset: () => {\n          inputValue.value = props.value.value != null ? String(props.value.value) : '';\n        },\n      },\n    );\n    watch(props.value, (v) => {\n      const newVal = v != null ? String(v) : '';\n\n      if (inputValue.value !== newVal) inputValue.value = newVal;\n    });\n    function clamp(n: number): number {\n      const min = props.min.value;\n      const max = props.max.value;\n\n      if (min != null && n < Number(min)) return Number(min);\n\n      if (max != null && n > Number(max)) return Number(max);\n\n      return n;\n    }\n    function parseValue(): number | null {\n      const v = inputValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n    function commit(val: number | null, originalEvent?: Event) {\n      const clamped = val != null ? clamp(val) : null;\n\n      inputValue.value = clamped != null ? String(clamped) : '';\n\n      if (clamped != null) host.setAttribute('value', String(clamped));\n      else host.removeAttribute('value');\n\n      emit('change', { originalEvent, value: clamped });\n    }\n    function increment(delta: number, originalEvent?: Event) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const current = parseValue() ?? (props.min.value != null ? Number(props.min.value) : 0);\n\n      commit(current + delta, originalEvent);\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const step = Number(props.step.value) || 1;\n      const largeStep = Number(props['large-step'].value) || step * 10;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          increment(-step, e);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          increment(step, e);\n          break;\n        case 'End':\n          if (props.max.value != null) {\n            e.preventDefault();\n            commit(Number(props.max.value), e);\n          }\n\n          break;\n        case 'Home':\n          if (props.min.value != null) {\n            e.preventDefault();\n            commit(Number(props.min.value), e);\n          }\n\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          increment(-largeStep, e);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          increment(largeStep, e);\n          break;\n      }\n    }\n\n    const atMin = computed(\n      () => props.min.value != null && parseValue() != null && parseValue()! <= Number(props.min.value),\n    );\n    const atMax = computed(\n      () => props.max.value != null && parseValue() != null && parseValue()! >= Number(props.max.value),\n    );\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"spinbutton\"\n        part=\"control\"\n        :aria-valuenow=\"${() => parseValue() ?? null}\"\n        :aria-valuemin=\"${() => props.min.value ?? null}\"\n        :aria-valuemax=\"${() => props.max.value ?? null}\"\n        :aria-label=\"${() => props.label.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        :aria-readonly=\"${() => (props.readonly.value ? 'true' : null)}\"\n        @keydown=\"${handleKeydown}\">\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMin.value}\"\n          @click=\"${(e: Event) => increment(-(Number(props.step.value) || 1), e)}\"\n          >${minusIcon}</bit-button\n        >\n        <bit-input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          aria-hidden=\"true\"\n          :value=\"${() => inputValue.value}\"\n          :label=\"${() => props.label.value || null}\"\n          :label-placement=\"${() => props['label-placement'].value}\"\n          :placeholder=\"${() => props.placeholder.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          :size=\"${() => props.size.value || null}\"\n          :variant=\"${() => props.variant.value || null}\"\n          ?disabled=\"${() => props.disabled.value}\"\n          ?readonly=\"${() => props.readonly.value}\"\n          @input=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            emit('input', { originalEvent, value: parseValue() });\n          }}\"\n          @change=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            commit(parseValue(), originalEvent);\n          }}\"></bit-input>\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMax.value}\"\n          @click=\"${(e: Event) => increment(Number(props.step.value) || 1, e)}\"\n          >${plusIcon}</bit-button\n        >\n      </div>\n    `;\n  },\n  styles: [disabledStateMixin(), styles],\n  tag: 'bit-number-input',\n});\n"],"mappings":"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"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { define, computed, defineField, html, signal, watch } from '@vielzeug/craftit';\nimport { createSpinnerControl } from '@vielzeug/craftit/controls';\n\nimport type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { disabledStateMixin } from '../../styles';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\n// Ensure child components are registered\nimport '../button/button';\nimport '../input/input';\nimport styles from './number-input.css?inline';\n\nexport type BitNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\n};\n\n/** Number Input props */\nexport type BitNumberInputProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Stretch to full width of container */\n    fullwidth?: boolean;\n    /** Visible label */\n    label?: string;\n    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n    'label-placement'?: 'inset' | 'outside';\n    /** Large step (for Page Up/Down, default: 10 × step) */\n    'large-step'?: number;\n    /** Maximum allowed value */\n    max?: number;\n    /** Minimum allowed value */\n    min?: number;\n    name?: string;\n    /** Allow null/empty value */\n    nullable?: boolean;\n    /** Form field name */\n\n    /** Placeholder text */\n    placeholder?: string;\n    /** Make the input read-only */\n    readonly?: boolean;\n    /** Step size for increment/decrement */\n    step?: number;\n    /** Current numeric value */\n    value?: number;\n    /** Visual variant */\n    variant?: VisualVariant;\n  };\n\nconst numberInputProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  fullwidth: false,\n  label: undefined,\n  'label-placement': 'inset',\n  'large-step': undefined,\n  max: undefined,\n  min: undefined,\n  name: undefined,\n  nullable: false,\n  placeholder: undefined,\n  readonly: false,\n  step: 1,\n  value: undefined,\n  variant: undefined,\n} satisfies PropBundle<BitNumberInputProps>;\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element bit-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @example\n * ```html\n * <bit-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></bit-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = define<BitNumberInputProps, BitNumberInputEvents>('bit-number-input', {\n  formAssociated: true,\n  props: numberInputProps,\n  setup({ emit, host, props }) {\n    const normalizeValue = (value: number | string | undefined | null): string => (value != null ? String(value) : '');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n    const inputValue = signal<string>(normalizeValue(props.value.value));\n    const committedValue = signal<string>(normalizeValue(props.value.value));\n    const syncValueState = (nextValue: string) => {\n      if (inputValue.value !== nextValue) inputValue.value = nextValue;\n\n      if (committedValue.value !== nextValue) committedValue.value = nextValue;\n    };\n\n    host.bind('attr', {\n      value: () => committedValue.value || null,\n    });\n\n    defineField(\n      {\n        disabled: isDisabled,\n        value: computed(() => (inputValue.value !== '' ? inputValue.value : null)),\n      },\n      {\n        onReset: () => {\n          syncValueState(normalizeValue(props.value.value));\n        },\n      },\n    );\n    watch(props.value, (v) => {\n      syncValueState(normalizeValue(v));\n    });\n    function clamp(n: number): number {\n      const min = props.min.value;\n      const max = props.max.value;\n\n      if (min != null && n < Number(min)) return Number(min);\n\n      if (max != null && n > Number(max)) return Number(max);\n\n      return n;\n    }\n    function parseValue(): number | null {\n      const v = inputValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n    function commit(val: number | null, originalEvent?: Event) {\n      const clamped = val != null ? clamp(val) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      syncValueState(nextValue);\n\n      emit('change', { originalEvent, value: clamped });\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: () => isDisabled.value,\n      largeStep: () => props['large-step'].value,\n      max: () => props.max.value,\n      min: () => props.min.value,\n      parse: parseValue,\n      readonly: () => isReadonly.value,\n      step: () => props.step.value,\n    });\n\n    function handleKeydown(e: KeyboardEvent) {\n      spinner.handleKeydown(e);\n    }\n\n    const atMin = computed(() => spinner.atMin());\n    const atMax = computed(() => spinner.atMax());\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"spinbutton\"\n        part=\"control\"\n        :aria-valuenow=\"${() => parseValue() ?? null}\"\n        :aria-valuemin=\"${() => props.min.value ?? null}\"\n        :aria-valuemax=\"${() => props.max.value ?? null}\"\n        :aria-label=\"${() => props.label.value || null}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :aria-readonly=\"${() => (isReadonly.value ? 'true' : null)}\"\n        @keydown=\"${handleKeydown}\">\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => isNonInteractive.value || atMin.value}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\"\n          ><bit-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon\n        ></bit-button>\n        <bit-input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          aria-hidden=\"true\"\n          :value=\"${() => inputValue.value}\"\n          :label=\"${() => props.label.value || null}\"\n          :label-placement=\"${() => props['label-placement'].value}\"\n          :placeholder=\"${() => props.placeholder.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          :size=\"${() => props.size.value || null}\"\n          :variant=\"${() => props.variant.value || null}\"\n          ?disabled=\"${() => isDisabled.value}\"\n          ?readonly=\"${() => isReadonly.value}\"\n          @input=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            emit('input', { originalEvent, value: parseValue() });\n          }}\"\n          @change=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            commit(parseValue(), originalEvent);\n          }}\"></bit-input>\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => isNonInteractive.value || atMax.value}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\"\n          ><bit-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon\n        ></bit-button>\n      </div>\n    `;\n  },\n  styles: [disabledStateMixin(), styles],\n});\n"],"mappings":"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"}

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`);require(`./styles/index.cjs`);const n=require(`./inputs/otp-input/otp-input.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{color:(0,r.typed)(void 0),disabled:(0,r.typed)(!1),label:(0,r.typed)(`One-time password`),length:(0,r.typed)(6),masked:(0,r.typed)(!1),name:(0,r.typed)(void 0),separator:(0,r.typed)(void 0),size:(0,r.typed)(void 0),type:(0,r.typed)(`numeric`),value:(0,r.typed)(``),variant:(0,r.typed)(void 0)},setup({emit:e,host:t,props:n}){let i=(0,r.computed)(()=>Array.from({length:Number(n.length.value)||6},(e,t)=>t));function a(){return[...t.shadowRoot?.querySelectorAll(`input.cell`)??[]]}function o(){return a().map(e=>e.value).join(``)}function s(e){return n.type.value===`numeric`?/^\d$/.test(e):/^[a-z\d]$/i.test(e)}function c(n,r){let i=n.target,c=i.value;if(c.length>1&&(c=c.slice(-1)),c&&!s(c)){i.value=``;return}i.value=c;let l=a(),u=o(),d=u.length===l.length&&u.split(``).every(Boolean);t.setAttribute(`value`,u),e(`change`,{complete:d,originalEvent:n,value:u}),d&&e(`complete`,{originalEvent:n,value:u}),c&&r<l.length-1&&(l[r+1].focus(),l[r+1].select())}function l(n,r){let i=n.target,s=a();if(n.key===`Backspace`){i.value?i.value=``:r>0&&(s[r-1].focus(),s[r-1].select(),s[r-1].value=``);let a=o();t.setAttribute(`value`,a),e(`change`,{complete:!1,originalEvent:n,value:a}),n.preventDefault()}else n.key===`ArrowLeft`&&r>0?(s[r-1].focus(),n.preventDefault()):n.key===`ArrowRight`&&r<s.length-1?(s[r+1].focus(),n.preventDefault()):n.key===`Home`?(s[0].focus(),n.preventDefault()):n.key===`End`&&(s[s.length-1].focus(),n.preventDefault())}function u(r){r.preventDefault();let i=(r.clipboardData?.getData(`text`)??``).split(``).filter(e=>s(e)).slice(0,Number(n.length.value)||6),c=a();i.forEach((e,t)=>{c[t]&&(c[t].value=e)});let l=o(),u=l.length===c.length&&l.split(``).every(Boolean);t.setAttribute(`value`,l),e(`change`,{complete:u,originalEvent:r,value:l}),u&&e(`complete`,{originalEvent:r,value:l}),c[Math.min(i.length,c.length-1)]?.focus()}(0,r.onMount)(()=>{let e=String(n.value.value||``),t=a();e.split(``).forEach((e,n)=>{t[n]&&(t[n].value=e)})});let d=(0,r.computed)(()=>{let e=Number(n.length.value)||6;return n.separator.value==null?-1:Math.floor(e/2)});return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./packages/craftit/dist/controls/list-control.cjs`),i=require(`./packages/craftit/dist/controls/list-key-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const a=require(`./inputs/otp-input/otp-input.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,label:`One-time password`,length:6,masked:!1,name:void 0,separator:void 0,type:`numeric`,value:``,variant:void 0},c=(0,o.define)(`bit-otp-input`,{props:s,setup({emit:e,host:t,props:n}){let a=(0,o.computed)(()=>Number(n.length.value)||6),s=(0,o.computed)(()=>!!n.disabled.value),c=(0,o.computed)(()=>Array.from({length:a.value},(e,t)=>t)),l=(0,o.signal)(0),u=(0,o.signal)(String(n.value.value||``)),d=()=>String(n.value.value||``);t.bind(`attr`,{value:()=>u.value||null});function f(){return[...t.shadowRoot?.querySelectorAll(`input.cell`)??[]]}let p=r.n({getIndex:()=>l.value,getItems:()=>f(),loop:!1,setIndex:e=>{l.value=e,f()[e]?.focus()}}),m=i.n({control:p,keys:{next:[`ArrowRight`],prev:[`ArrowLeft`]}});function h(){return f().map(e=>e.value).join(``)}function g(e){let t=f(),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)}),u.value=h()}function _(t,n){let r=f(),i=h(),a=n??(i.length===r.length&&i.split(``).every(Boolean));u.value=i,e(`change`,{complete:a,originalEvent:t,value:i}),a&&e(`complete`,{originalEvent:t,value:i})}function v(e){return n.type.value===`numeric`?/^\d$/.test(e):/^[a-z\d]$/i.test(e)}function y(e,t){let n=e.target,r=n.value;if(r.length>1&&(r=r.slice(-1)),r&&!v(r)){n.value=``;return}n.value=r;let i=f();_(e),r&&t<i.length-1&&(i[t+1].focus(),i[t+1].select())}function b(e,t){let n=e.target,r=f();if(l.value=t,e.key===`Backspace`){if(n.value)n.value=``;else if(t>0){let e=r[p.prev().index];e&&(e.select(),e.value=``)}_(e,!1),e.preventDefault()}else m.handleKeydown(e)}function x(e){e.preventDefault();let t=(e.clipboardData?.getData(`text`)??``).split(``).filter(e=>v(e)).slice(0,a.value),n=f();t.forEach((e,t)=>{n[t]&&(n[t].value=e)}),_(e),n[Math.min(t.length,n.length-1)]?.focus()}(0,o.onMount)(()=>{g(d())}),(0,o.watch)(n.value,e=>{g(String(e||``))}),(0,o.watch)(n.length,()=>{requestAnimationFrame(()=>g(d()))});let S=(0,o.computed)(()=>{let e=Number(n.length.value)||6;return n.separator.value==null?-1:Math.floor(e/2)});return o.html`
       <div class="otp-group" part="group" role="group" :aria-label="${()=>n.label.value}">
-        ${()=>i.value.map(e=>r.html`
-              ${()=>d.value>0&&e===d.value?r.html`<span class="separator" aria-hidden="true">${()=>n.separator.value||`-`}</span>`:``}
+        ${()=>c.value.map(e=>o.html`
+              ${()=>S.value>0&&e===S.value?o.html`<span class="separator" aria-hidden="true">${()=>n.separator.value||`-`}</span>`:``}
               <input
                 class="cell"
                 part="cell"
@@ -9,14 +9,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 :inputmode="${()=>n.type.value===`numeric`?`numeric`:`text`}"
                 maxlength="1"
                 :autocomplete="${()=>e===0?`one-time-code`:`off`}"
-                :aria-label="${()=>`Digit ${e+1} of ${n.length.value}`}"
-                :disabled="${()=>n.disabled.value||null}"
+                :aria-label="${()=>`Digit ${e+1} of ${a.value}`}"
+                :disabled="${()=>s.value?!0:null}"
                 :name="${()=>n.name.value?`${n.name.value}[${e}]`:null}"
-                @input="${t=>c(t,e)}"
-                @keydown="${t=>l(t,e)}"
-                @paste="${t=>e===0?u(t):t.preventDefault()}"
+                @input="${t=>y(t,e)}"
+                @keydown="${t=>b(t,e)}"
+                @paste="${t=>e===0?x(t):t.preventDefault()}"
                 @focus="${e=>e.target.select()}" />
             `)}
       </div>
-    `},styles:[t.colorThemeMixin,e.sizeVariantMixin({}),t.forcedColorsFocusMixin(`.cell`),n.default],tag:`bit-otp-input`});exports.OTP_INPUT_TAG=i;
+    `},styles:[n.colorThemeMixin,t.sizeVariantMixin({}),n.forcedColorsFocusMixin(`.cell`),a.default]});exports.OTP_INPUT_TAG=c;
 //# 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 { computed, defineComponent, html, onMount, typed } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport styles from './otp-input.css?inline';\n\nexport type BitOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type BitOtpInputProps = {\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' | 'glass'>;\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 bit-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\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 * @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-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border color\n *\n * @example\n * ```html\n * <bit-otp-input length=\"6\" color=\"primary\"></bit-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = defineComponent<BitOtpInputProps, BitOtpInputEvents>({\n  props: {\n    color: typed<BitOtpInputProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    label: typed<string>('One-time password'),\n    length: typed<number>(6),\n    masked: typed<boolean>(false),\n    name: typed<string | undefined>(undefined),\n    separator: typed<string | undefined>(undefined),\n    size: typed<BitOtpInputProps['size']>(undefined),\n    type: typed<BitOtpInputProps['type']>('numeric'),\n    value: typed<string>(''),\n    variant: typed<BitOtpInputProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const cells = computed(() => Array.from({ length: Number(props.length.value) || 6 }, (_, i) => i));\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\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      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\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      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          allInputs[index - 1].focus();\n          allInputs[index - 1].select();\n          allInputs[index - 1].value = '';\n        }\n\n        const full = getValue();\n\n        host.setAttribute('value', full);\n        emit('change', { complete: false, originalEvent: e, value: full });\n        e.preventDefault();\n      } else if (e.key === 'ArrowLeft' && index > 0) {\n        allInputs[index - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowRight' && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Home') {\n        allInputs[0].focus();\n        e.preventDefault();\n      } else if (e.key === 'End') {\n        allInputs[allInputs.length - 1].focus();\n        e.preventDefault();\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, Number(props.length.value) || 6);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\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    onMount(() => {\n      // Populate cells from value prop on mount\n      const initialVal = String(props.value.value || '');\n      const allInputs = getInputs();\n\n      initialVal.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\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    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value}\">\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 ${props.length.value}`}\"\n                :disabled=\"${() => props.disabled.value || null}\"\n                :name=\"${() => (props.name.value ? `${props.name.value}[${i}]` : 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  tag: 'bit-otp-input',\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, computed, html, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createListControl, createListKeyControl } from '@vielzeug/craftit/controls';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport styles from './otp-input.css?inline';\n\nexport type BitOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type BitOtpInputProps = {\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' | 'glass'>;\n};\n\nconst otpInputProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  label: 'One-time password',\n  length: 6,\n  masked: false,\n  name: undefined,\n  separator: undefined,\n  type: 'numeric',\n  value: '',\n  variant: undefined,\n} satisfies PropBundle<BitOtpInputProps>;\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 bit-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\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 * @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-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border color\n *\n * @example\n * ```html\n * <bit-otp-input length=\"6\" color=\"primary\"></bit-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = define<BitOtpInputProps, BitOtpInputEvents>('bit-otp-input', {\n  props: otpInputProps,\n  setup({ emit, host, props }) {\n    const lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const cells = computed(() => Array.from({ length: lengthValue.value }, (_, i) => i));\n    const focusedIndex = signal(0);\n    const otpValue = signal(String(props.value.value || ''));\n    const normalizedPropValue = () => String(props.value.value || '');\n\n    host.bind('attr', {\n      value: () => otpValue.value || null,\n    });\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n\n    const listControl = createListControl({\n      getIndex: () => focusedIndex.value,\n      getItems: () => getInputs(),\n      loop: false,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n\n        const inputs = getInputs();\n\n        inputs[index]?.focus();\n      },\n    });\n\n    const otpListKeys = createListKeyControl({\n      control: listControl,\n      keys: { next: ['ArrowRight'], prev: ['ArrowLeft'] },\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      focusedIndex.value = index;\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          const prevIndex = listControl.prev().index;\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        otpListKeys.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    onMount(() => {\n      // Populate cells from value prop on mount\n      syncInputsFromValue(normalizedPropValue());\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    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value}\">\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                :name=\"${() => (props.name.value ? `${props.name.value}[${i}]` : 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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"}