@skdx/vue 0.27.0 → 0.28.0

package/dist/pin-input/PinInput.vue.d.ts

@@ -1,20 +1,12 @@
+import { type PinInputType } from './charFilter.js';
 /**
- * The Vue implementation of the shared PinInput contract (see
- * `@skdx/shared`'s `pinInputContract`). Owns the joined string value and
- * `provide()`s it, plus cross-field focus movement, to `SkdxPinInputField`
- * children. Renders a plain `<div>`.
+ * PIN input managing joined string value across field boxes. Renders
+ * `<div role="group">` for accessibility; boxes read as one value not N fields.
+ * Emits `value-complete` when last box filled; with `auto-submit`, calls
+ * `requestSubmit()` on surrounding form.
  *
- * Emits `value-complete` the moment the last box is filled — with
- * `auto-submit`, it also calls `requestSubmit()` on the surrounding `<form>`,
- * which is what a one-time-passcode screen usually wants.
- *
- * With a `name`, one visually-hidden native input submits the joined value as a
- * single entry with the surrounding `<form>` (the boxes themselves never submit
- * — a passcode is one field, not six), `required` reports `valueMissing` when
- * empty and `patternMismatch` when half-typed, and
- * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to
- * that input. Resetting the form restores the value the input was declared
- * with, emitting `value-change` so a controlled parent follows it.
+ * With `name`, hidden input submits joined value; `required`/validation
+ * delegate to it. Derives `length` boxes unless default slot provided.
  */
 type __VLS_Props = {
     /** Current value, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -25,12 +17,61 @@ type __VLS_Props = {
     length?: number;
     /** Disables every field in this pin input. */
     disabled?: boolean;
-    /** Marks the field as invalid, exposed as `data-invalid`/`aria-invalid`. */
+    /**
+     * Marks the field as invalid: `aria-invalid` on the `role="group"` root,
+     * and `data-invalid` on the root *and* every box. One wrong code is one
+     * error, so the ARIA state sits once on the element that represents the
+     * whole code; `data-invalid` stays per box because it is the styling hook
+     * and every box has to paint itself.
+     */
     invalid?: boolean;
     /** Makes every field read-only, native `readOnly` plus `aria-readonly`. */
     readOnly?: boolean;
-    /** `'numeric'` restricts each box to digits 0-9 and sets `inputmode="numeric"`. */
-    type?: 'text' | 'numeric';
+    /**
+     * Which characters a box accepts: `'text'` anything, `'numeric'` digits 0-9
+     * (and `inputmode="numeric"`), `'alphanumeric'` ASCII letters and digits,
+     * `'alphabetic'` ASCII letters. `pattern` overrides it entirely.
+     * @default 'text'
+     */
+    type?: PinInputType;
+    /**
+     * A regular-expression source tested against **one character at a time**,
+     * replacing whatever set `type` names — `'[A-Fa-f0-9]'` for a hex code.
+     * @default undefined
+     */
+    pattern?: string;
+    /**
+     * A single character drawn in every empty box — a dot or a circle, so the
+     * boxes read as slots waiting for a code. No default glyph on purpose.
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Advertises `autocomplete="one-time-code"` on the first box so the
+     * platform can offer a code it received. Turn it off for a PIN pad or a
+     * door code, where that suggestion will never arrive.
+     * @default true
+     */
+    otp?: boolean;
+    /**
+     * Focuses the first box on mount, which is what a screen whose only job is
+     * the code wants. Off by default: a pin further down a page that steals
+     * focus moves the user away from whatever they were reading.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Blurs the focused box the moment the code completes, so a soft keyboard
+     * closes and whatever the completion triggers is on screen.
+     * @default false
+     */
+    blurOnComplete?: boolean;
+    /**
+     * Selects a box's existing character when focus lands in it, so correcting
+     * one digit is a single keystroke instead of a delete and a retype.
+     * @default false
+     */
+    selectOnFocus?: boolean;
     /** Renders filled boxes as `type="password"` (dots) instead of plain text. */
     mask?: boolean;
     /**
@@ -50,6 +91,14 @@ type __VLS_Props = {
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` this pin submits into, for a pin rendered outside it —
+     * inside a portalled dialog, which is where a passcode prompt lives.
+     * Forwarded to the hidden input's `form` attribute, which is also how the
+     * reset listener finds the form.
+     * @default undefined
+     */
+    form?: string;
     /**
      * Marks the hidden form input required, so an empty pin reports
      * `valueMissing`. A partly-typed one reports `patternMismatch`: the input
@@ -58,37 +107,76 @@ type __VLS_Props = {
      * @default false
      */
     required?: boolean;
+    /**
+     * Words each box's `aria-label`, from the box's **1-based** position and
+     * the pin's `length`.
+     *
+     * Declared on the root, not per box: focus auto-advances on every
+     * keystroke, so every box needs a name saying which one it is, and writing
+     * N of them by hand is N chances to get the count wrong and one
+     * translation per box. A consumer's own `aria-label` on a
+     * `SkdxPinInputField` still wins over it, through attribute fallthrough.
+     * @default pinInputDigitLabel — `` `Digit ${index} of ${length}` ``
+     */
+    digitLabel?: (index: number, length: number) => string;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Full manual composition — one Field per position. */
+    default?(): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** Reports whether the hidden form input satisfies its constraints. `true` without a `name`. */
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
+    /**
+     * Empties every box and publishes the empty value — what a rejected code
+     * needs. Deliberately the only imperative writer: `value` is already
+     * bindable, and a `setValue` beside it would compete with it.
+     */
+    clear: () => void;
+    /**
+     * Moves DOM focus into the first box — the counterpart of `clear()`, since a
+     * rejected code is cleared and then handed back to the user.
+     */
+    focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string) => any;
     "value-change": (value: string) => any;
     "value-complete": (value: string) => any;
+    "value-invalid": (detail: {
+        value: string;
+        index: number;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onValue-change"?: ((value: string) => any) | undefined;
     "onValue-complete"?: ((value: string) => any) | undefined;
+    "onValue-invalid"?: ((detail: {
+        value: string;
+        index: number;
+    }) => any) | undefined;
 }>, {
-    disabled: boolean;
-    type: "text" | "numeric";
+    form: string;
     length: number;
     mask: boolean;
+    pattern: string;
+    disabled: boolean;
+    type: PinInputType;
+    placeholder: string;
+    value: string;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: string;
     invalid: boolean;
     defaultValue: string;
-    readOnly: boolean;
+    autoFocus: boolean;
+    otp: boolean;
+    blurOnComplete: boolean;
+    selectOnFocus: boolean;
     autoSubmit: boolean;
     sanitize: (pasted: string) => string;
+    digitLabel: (index: number, length: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/pin-input/PinInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const k=require("../utils/useFormReset.cjs"),b=require("./context.cjs");let e=require("vue");var V=["data-disabled","data-invalid","data-readonly"],q=["name","^value","pattern","required","disabled"],B=(0,e.defineComponent)({__name:"PinInput",props:{value:{default:void 0},defaultValue:{default:""},length:{default:6},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},type:{default:"text"},mask:{type:Boolean,default:!1},autoSubmit:{type:Boolean,default:!1},sanitize:{type:Function,default:void 0},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","value-complete"],setup(l,{expose:c,emit:f}){const t=l,d=f,o=(0,e.ref)(t.defaultValue),r=(0,e.computed)(()=>t.value===void 0?o.value:t.value),s=(0,e.ref)([]),v=(0,e.ref)(null);function p(a){const u=r.value.length===t.length;t.value===void 0&&(o.value=a),d("update:value",a),d("value-change",a),!(a.length!==t.length||u)&&(d("value-complete",a),t.autoSubmit&&v.value?.closest("form")?.requestSubmit())}function m(a){return t.sanitize?.(a)??a}function y(a){s.value[a]?.focus()}function h(a,u){s.value[a]=u}(0,e.provide)(b.PIN_INPUT_CONTEXT,{value:r,length:(0,e.computed)(()=>t.length),type:(0,e.computed)(()=>t.type),mask:(0,e.computed)(()=>t.mask),disabled:(0,e.computed)(()=>t.disabled),invalid:(0,e.computed)(()=>t.invalid),readOnly:(0,e.computed)(()=>t.readOnly),setValue:p,focusIndex:y,registerField:h,sanitizePaste:m});const n=(0,e.ref)(null),g=(0,e.computed)(()=>`.{${t.length}}`),i=t.value??t.defaultValue;return k.useFormReset(()=>n.value,()=>{t.value===void 0&&(o.value=i),d("update:value",i),d("value-change",i),(0,e.nextTick)(()=>{s.value.forEach((a,u)=>{a&&(a.value=i[u]??"")})})}),c({checkValidity:()=>n.value?.checkValidity()??!0,reportValidity:()=>n.value?.reportValidity()??!0}),(a,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-pin-input","data-part":"root","data-skdx-component":"pin-input",ref_key:"rootRef",ref:v,"data-disabled":l.disabled?"":void 0,"data-invalid":l.invalid?"":void 0,"data-readonly":l.readOnly?"":void 0},[(0,e.renderSlot)(a.$slots,"default"),l.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:n,type:"text","aria-hidden":"true",tabindex:"-1",name:l.name,"^value":r.value,pattern:g.value,required:l.required,disabled:l.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,q)):(0,e.createCommentVNode)("",!0)],8,V))}});exports.default=B;
+const w=require("../utils/is-dev-mode.cjs"),C=require("../utils/useFormReset.cjs"),E=require("./charFilter.cjs"),_=require("./context.cjs"),$=require("./digitLabel.cjs"),L=require("./PinInputAnatomy.vue.cjs"),f=require("./slots.cjs");let l=require("vue");var N=["aria-invalid","data-disabled","data-invalid","data-readonly"],R=["name","form","^value","pattern","required","disabled"],A=(0,l.defineComponent)({__name:"PinInput",props:{value:{default:void 0},defaultValue:{default:""},length:{default:6},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},type:{default:"text"},pattern:{default:void 0},placeholder:{default:void 0},otp:{type:Boolean,default:!0},autoFocus:{type:Boolean,default:!1},blurOnComplete:{type:Boolean,default:!1},selectOnFocus:{type:Boolean,default:!1},mask:{type:Boolean,default:!1},autoSubmit:{type:Boolean,default:!1},sanitize:{type:Function,default:void 0},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},digitLabel:{type:Function,default:$.pinInputDigitLabel}},emits:["update:value","value-change","value-complete","value-invalid"],setup(n,{expose:q,emit:k}){const t=n,o=k,p=(0,l.ref)(t.defaultValue),u=(0,l.computed)(()=>t.value===void 0?p.value:t.value),i=(0,l.ref)([]),h=(0,l.ref)(null);function g(e){const a=u.value.length===t.length;t.value===void 0&&(p.value=e),o("update:value",e),o("value-change",e),!(e.length!==t.length||a)&&(o("value-complete",e),t.blurOnComplete&&(i.value.find(d=>d===document.activeElement)??i.value[t.length-1])?.blur(),t.autoSubmit&&(c.value?.form??h.value?.closest("form"))?.requestSubmit())}const s=(0,l.ref)(f.toPinSlots(u.value,t.length)),y=(0,l.computed)(()=>s.value.length===t.length&&f.joinPinSlots(s.value)===u.value?s.value:f.toPinSlots(u.value,t.length));function b(e){const a=[...y.value];e(a),s.value=a,g(f.joinPinSlots(a))}function B(e){return y.value[e]??""}function F(e,a){b(d=>{d[e]=a})}function P(e,a){let d=e-1;return b(x=>{for(let r=0;r<a.length&&e+r<t.length;r++)x[e+r]=a[r],d=e+r}),d}function S(e){return t.sanitize?.(e)??e}function m(e){i.value[e]?.focus()}function V(e,a){i.value[e]=a}const I=(0,l.computed)(()=>E.pinCharAcceptor(t.type,t.pattern));(0,l.provide)(_.PIN_INPUT_CONTEXT,{value:u,length:(0,l.computed)(()=>t.length),type:(0,l.computed)(()=>t.type),mask:(0,l.computed)(()=>t.mask),disabled:(0,l.computed)(()=>t.disabled),invalid:(0,l.computed)(()=>t.invalid),readOnly:(0,l.computed)(()=>t.readOnly),placeholder:(0,l.computed)(()=>t.placeholder),otp:(0,l.computed)(()=>t.otp),selectOnFocus:(0,l.computed)(()=>t.selectOnFocus),accepts:e=>I.value(e),reportInvalid:(e,a)=>o("value-invalid",{value:e,index:a}),digitLabel:(0,l.computed)(()=>t.digitLabel),charAt:B,setCharAt:F,fillFrom:P,focusIndex:m,registerField:V,sanitizePaste:S});const c=(0,l.ref)(null),O=(0,l.computed)(()=>`.{${t.length}}`),v=t.value??t.defaultValue;return C.useFormReset(()=>c.value,()=>{t.value===void 0&&(p.value=v),o("update:value",v),o("value-change",v),(0,l.nextTick)(()=>{i.value.forEach((e,a)=>{e&&(e.value=v[a]??"")})})}),(0,l.onMounted)(()=>{t.autoFocus&&m(0)}),(0,l.watchEffect)(()=>{u.value;const e=i.value.filter(Boolean).length;e!==0&&e!==t.length&&w.isDevMode()&&console.warn(`SkdxPinInput: ${e} SkdxPinInputField${e===1?"":"s"} rendered but length is ${t.length}. Render exactly one field per position, with contiguous \`index\` values from 0 to ${t.length-1} — otherwise the value can never complete and value-complete never fires.`)}),q({checkValidity:()=>c.value?.checkValidity()??!0,reportValidity:()=>c.value?.reportValidity()??!0,clear:()=>g(""),focus:()=>m(0)}),(e,a)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{class:"skdx-pin-input","data-part":"root","data-skdx-component":"pin-input",role:"group",ref_key:"rootRef",ref:h,"aria-invalid":n.invalid?!0:void 0,"data-disabled":n.disabled?"":void 0,"data-invalid":n.invalid?"":void 0,"data-readonly":n.readOnly?"":void 0},[(0,l.renderSlot)(e.$slots,"default",{},()=>[(0,l.createVNode)(L.default,{length:n.length},null,8,["length"])]),n.name?((0,l.openBlock)(),(0,l.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:c,type:"text","aria-hidden":"true",tabindex:"-1",name:n.name,form:n.form,"^value":u.value,pattern:O.value,required:n.required,disabled:n.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,R)):(0,l.createCommentVNode)("",!0)],8,N))}});exports.default=A;

package/dist/pin-input/PinInput.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{PIN_INPUT_CONTEXT as a}from"./context.js";import{computed as t,createCommentVNode as l,createElementBlock as d,defineComponent as u,nextTick as n,openBlock as i,provide as o,ref as s,renderSlot as r}from"vue";var v=["data-disabled","data-invalid","data-readonly"],p=["name","^value","pattern","required","disabled"],f=/* @__PURE__ */u({__name:"PinInput",props:{value:{default:void 0},defaultValue:{default:""},length:{default:6},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},type:{default:"text"},mask:{type:Boolean,default:!1},autoSubmit:{type:Boolean,default:!1},sanitize:{type:Function,default:void 0},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","value-complete"],setup(u,{expose:f,emit:m}){const c=u,y=m,h=s(c.defaultValue),b=t(()=>void 0===c.value?h.value:c.value),g=s([]),k=s(null);o(a,{value:b,length:t(()=>c.length),type:t(()=>c.type),mask:t(()=>c.mask),disabled:t(()=>c.disabled),invalid:t(()=>c.invalid),readOnly:t(()=>c.readOnly),setValue:function(e){const a=b.value.length===c.length;void 0===c.value&&(h.value=e),y("update:value",e),y("value-change",e),e.length===c.length&&!a&&(y("value-complete",e),c.autoSubmit&&k.value?.closest("form")?.requestSubmit())},focusIndex:function(e){g.value[e]?.focus()},registerField:function(e,a){g.value[e]=a},sanitizePaste:function(e){return c.sanitize?.(e)??e}});const x=s(null),V=t(()=>`.{${c.length}}`),B=c.value??c.defaultValue;return e(()=>x.value,()=>{void 0===c.value&&(h.value=B),y("update:value",B),y("value-change",B),n(()=>{g.value.forEach((e,a)=>{e&&(e.value=B[a]??"")})})}),f({checkValidity:()=>x.value?.checkValidity()??!0,reportValidity:()=>x.value?.reportValidity()??!0}),(e,a)=>(i(),d("div",{class:"skdx-pin-input","data-part":"root","data-skdx-component":"pin-input",ref_key:"rootRef",ref:k,"data-disabled":u.disabled?"":void 0,"data-invalid":u.invalid?"":void 0,"data-readonly":u.readOnly?"":void 0},[r(e.$slots,"default"),u.name?(i(),d("input",{key:0,ref_key:"hiddenEl",ref:x,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,"^value":b.value,pattern:V.value,required:u.required,disabled:u.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,p)):l("",!0)],8,v))}});export{f as default};
+import{isDevMode as e}from"../utils/is-dev-mode.js";import{useFormReset as t}from"../utils/useFormReset.js";import{pinCharAcceptor as a}from"./charFilter.js";import{PIN_INPUT_CONTEXT as l}from"./context.js";import{pinInputDigitLabel as n}from"./digitLabel.js";import o from"./PinInputAnatomy.vue.js";import{joinPinSlots as i,toPinSlots as u}from"./slots.js";import{computed as d,createCommentVNode as r,createElementBlock as s,createVNode as v,defineComponent as p,nextTick as c,onMounted as f,openBlock as m,provide as h,ref as g,renderSlot as y,watchEffect as b}from"vue";var x=["aria-invalid","data-disabled","data-invalid","data-readonly"],k=["name","form","^value","pattern","required","disabled"],B=/* @__PURE__ */p({__name:"PinInput",props:{value:{default:void 0},defaultValue:{default:""},length:{default:6},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},type:{default:"text"},pattern:{default:void 0},placeholder:{default:void 0},otp:{type:Boolean,default:!0},autoFocus:{type:Boolean,default:!1},blurOnComplete:{type:Boolean,default:!1},selectOnFocus:{type:Boolean,default:!1},mask:{type:Boolean,default:!1},autoSubmit:{type:Boolean,default:!1},sanitize:{type:Function,default:void 0},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},digitLabel:{type:Function,default:n}},emits:["update:value","value-change","value-complete","value-invalid"],setup(n,{expose:p,emit:B}){const F=n,O=B,I=g(F.defaultValue),P=d(()=>void 0===F.value?I.value:F.value),V=g([]),j=g(null);function S(e){const t=P.value.length===F.length;void 0===F.value&&(I.value=e),O("update:value",e),O("value-change",e),e.length===F.length&&!t&&(O("value-complete",e),F.blurOnComplete&&(V.value.find(e=>e===document.activeElement)??V.value[F.length-1])?.blur(),F.autoSubmit&&(w.value?.form??j.value?.closest("form"))?.requestSubmit())}const C=g(u(P.value,F.length)),E=d(()=>C.value.length===F.length&&i(C.value)===P.value?C.value:u(P.value,F.length));function $(e){const t=[...E.value];e(t),C.value=t,S(i(t))}function _(e){V.value[e]?.focus()}const q=d(()=>a(F.type,F.pattern));h(l,{value:P,length:d(()=>F.length),type:d(()=>F.type),mask:d(()=>F.mask),disabled:d(()=>F.disabled),invalid:d(()=>F.invalid),readOnly:d(()=>F.readOnly),placeholder:d(()=>F.placeholder),otp:d(()=>F.otp),selectOnFocus:d(()=>F.selectOnFocus),accepts:e=>q.value(e),reportInvalid:(e,t)=>O("value-invalid",{value:e,index:t}),digitLabel:d(()=>F.digitLabel),charAt:function(e){return E.value[e]??""},setCharAt:function(e,t){$(a=>{a[e]=t})},fillFrom:function(e,t){let a=e-1;return $(l=>{for(let n=0;n<t.length&&e+n<F.length;n++)l[e+n]=t[n],a=e+n}),a},focusIndex:_,registerField:function(e,t){V.value[e]=t},sanitizePaste:function(e){return F.sanitize?.(e)??e}});const w=g(null),L=d(()=>`.{${F.length}}`),N=F.value??F.defaultValue;return t(()=>w.value,()=>{void 0===F.value&&(I.value=N),O("update:value",N),O("value-change",N),c(()=>{V.value.forEach((e,t)=>{e&&(e.value=N[t]??"")})})}),f(()=>{F.autoFocus&&_(0)}),b(()=>{P.value;const t=V.value.filter(Boolean).length;0!==t&&t!==F.length&&e()&&console.warn(`SkdxPinInput: ${t} SkdxPinInputField${1===t?"":"s"} rendered but length is ${F.length}. Render exactly one field per position, with contiguous \`index\` values from 0 to ${F.length-1} — otherwise the value can never complete and value-complete never fires.`)}),p({checkValidity:()=>w.value?.checkValidity()??!0,reportValidity:()=>w.value?.reportValidity()??!0,clear:()=>S(""),focus:()=>_(0)}),(e,t)=>(m(),s("div",{class:"skdx-pin-input","data-part":"root","data-skdx-component":"pin-input",role:"group",ref_key:"rootRef",ref:j,"aria-invalid":!!n.invalid||void 0,"data-disabled":n.disabled?"":void 0,"data-invalid":n.invalid?"":void 0,"data-readonly":n.readOnly?"":void 0},[y(e.$slots,"default",{},()=>[v(o,{length:n.length},null,8,["length"])]),n.name?(m(),s("input",{key:0,ref_key:"hiddenEl",ref:w,type:"text","aria-hidden":"true",tabindex:"-1",name:n.name,form:n.form,"^value":P.value,pattern:L.value,required:n.required,disabled:n.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,k)):r("",!0)],8,x))}});export{B as default};

package/dist/pin-input/PinInputAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./PinInputAnatomy.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/pin-input/PinInputAnatomy.vue.d.cts

@@ -0,0 +1,15 @@
+/**
+ * The anatomy an `SkdxPinInput` draws when its default slot holds none of its
+ * own parts: `length` Field boxes, one per position from 0 to `length - 1`.
+ *
+ * Not exported from the package — the React port's `PinInputAnatomy.tsx` is
+ * the same component, and the two must stay in step.
+ * @internal
+ */
+type __VLS_Props = {
+    length?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    length: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/pin-input/PinInputAnatomy.vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The anatomy an `SkdxPinInput` draws when its default slot holds none of its
+ * own parts: `length` Field boxes, one per position from 0 to `length - 1`.
+ *
+ * Not exported from the package — the React port's `PinInputAnatomy.tsx` is
+ * the same component, and the two must stay in step.
+ * @internal
+ */
+type __VLS_Props = {
+    length?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    length: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/pin-input/PinInputAnatomy.vue.js

@@ -0,0 +1 @@
+import t from"./PinInputAnatomy.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/pin-input/PinInputAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./PinInputField.vue.cjs");let e=require("vue");var u=(0,e.defineComponent)({__name:"PinInputAnatomy",props:{length:{default:6}},setup(n){return(l,a)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(n.length,t=>((0,e.openBlock)(),(0,e.createBlock)(r.default,{key:t-1,index:t-1},null,8,["index"]))),128))}});exports.default=u;

package/dist/pin-input/PinInputAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"./PinInputField.vue.js";import{Fragment as n,createBlock as t,createElementBlock as a,defineComponent as l,openBlock as o,renderList as r}from"vue";var s=/* @__PURE__ */l({__name:"PinInputAnatomy",props:{length:{default:6}},setup:l=>(s,p)=>(o(!0),a(n,null,r(l.length,n=>(o(),t(e,{key:n-1,index:n-1},null,8,["index"]))),128))});export{s as default};

package/dist/pin-input/PinInputField.vue.d.cts

@@ -1,12 +1,11 @@
 /**
- * A single character box of a `SkdxPinInput`. Reads/writes its character at
- * `index` in the shared value via context. Typing or pasting auto-advances
- * focus; Backspace on an empty box clears and moves back; Arrow Left/Right
- * move focus between boxes; pasting a multi-character string fills
- * consecutive boxes from `index` onward.
+ * Single character box: reads/writes at `index`, auto-advances on typing/paste,
+ * Backspace moves back, arrows move between boxes. Named by root's digitLabel.
  */
 type __VLS_Props = {
-    /** This box's 0-indexed position within the pin's combined value. */
+    /**
+     * 0-indexed position in pin value (aria-label counts from 1).
+     */
     index: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/pin-input/PinInputField.vue.d.ts

@@ -1,12 +1,11 @@
 /**
- * A single character box of a `SkdxPinInput`. Reads/writes its character at
- * `index` in the shared value via context. Typing or pasting auto-advances
- * focus; Backspace on an empty box clears and moves back; Arrow Left/Right
- * move focus between boxes; pasting a multi-character string fills
- * consecutive boxes from `index` onward.
+ * Single character box: reads/writes at `index`, auto-advances on typing/paste,
+ * Backspace moves back, arrows move between boxes. Named by root's digitLabel.
  */
 type __VLS_Props = {
-    /** This box's 0-indexed position within the pin's combined value. */
+    /**
+     * 0-indexed position in pin value (aria-label counts from 1).
+     */
     index: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/pin-input/PinInputField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const g=require("../utils/reassertValue.cjs"),v=require("../utils/direction.cjs"),_=require("./context.cjs");let a=require("vue");var I=["inputmode","autocomplete","type","disabled","readonly","aria-invalid","aria-readonly","data-disabled","data-invalid","data-readonly","value"],b=(0,a.defineComponent)({__name:"PinInputField",props:{index:{}},setup(d){const f=/^[0-9]$/,n=d,e=(0,a.inject)(_.PIN_INPUT_CONTEXT);if(!e)throw new Error("<SkdxPinInputField> must be used inside <SkdxPinInput>.");const p=v.useDirection(),r=(0,a.computed)(()=>e.value.value[n.index]??""),x=(0,a.computed)(()=>r.value!=="");function o(t){const i=e.value.value.split("");i[n.index]=t,e.setValue(i.join("").slice(0,e.length.value))}function h(t){if(e.disabled.value)return;const i=t.target.value;if(i===""){o("");return}if(e.type.value==="numeric"&&!f.test(i)){t.target.value=r.value;return}o(i),g.reassertValue(t.target,()=>r.value),n.index<e.length.value-1&&e.focusIndex(n.index+1)}function y(t){if(e.disabled.value)return;const i=v.directionalKey(t.key,t.currentTarget,p());if(i==="Backspace"){if(e.readOnly.value)return;if(t.preventDefault(),r.value)o("");else if(n.index>0){const l=e.value.value.split("");l[n.index-1]="",e.setValue(l.join("").slice(0,e.length.value)),e.focusIndex(n.index-1)}}else i==="ArrowLeft"?n.index>0&&(t.preventDefault(),e.focusIndex(n.index-1)):i==="ArrowRight"&&n.index<e.length.value-1&&(t.preventDefault(),e.focusIndex(n.index+1))}function m(t){if(e.disabled.value||e.readOnly.value)return;t.preventDefault();const i=e.sanitizePaste(t.clipboardData?.getData("text")??""),l=e.type.value==="numeric"?i.replace(/[^0-9]/g,""):i;if(!l)return;const s=e.value.value.split("");let c=n.index-1;for(let u=0;u<l.length&&n.index+u<e.length.value;u++)s[n.index+u]=l[u],c=n.index+u;e.setValue(s.join("").slice(0,e.length.value)),e.focusIndex(Math.min(c+1,e.length.value-1))}return(t,i)=>((0,a.openBlock)(),(0,a.createElementBlock)("input",{class:"skdx-pin-input__field","data-part":"field",ref:l=>(0,a.unref)(e).registerField(d.index,l),inputmode:(0,a.unref)(e).type.value==="numeric"?"numeric":"text",autocomplete:d.index===0?"one-time-code":"off",type:(0,a.unref)(e).mask.value&&x.value?"password":"text",maxlength:"1",disabled:(0,a.unref)(e).disabled.value,readonly:(0,a.unref)(e).readOnly.value,"aria-invalid":(0,a.unref)(e).invalid.value?!0:void 0,"aria-readonly":(0,a.unref)(e).readOnly.value?!0:void 0,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-invalid":(0,a.unref)(e).invalid.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,value:r.value,onInput:h,onKeydown:y,onPaste:m},null,40,I))}});exports.default=b;
+const y=require("../utils/reassertValue.cjs"),c=require("../utils/direction.cjs"),g=require("./context.cjs");let a=require("vue");var _=["inputmode","autocomplete","type","placeholder","disabled","readonly","aria-label","aria-readonly","data-disabled","data-invalid","data-readonly","value"],b=(0,a.defineComponent)({__name:"PinInputField",props:{index:{}},setup(u){const n=u,e=(0,a.inject)(g.PIN_INPUT_CONTEXT);if(!e)throw new Error("<SkdxPinInputField> must be used inside <SkdxPinInput>.");const s=c.useDirection(),i=(0,a.computed)(()=>e.charAt(n.index)),f=(0,a.computed)(()=>i.value!=="");function d(t){e.setCharAt(n.index,t)}function v(t){if(e.disabled.value)return;const r=t.target.value;if(r===""){d("");return}if(!e.accepts(r)){t.target.value=i.value,e.reportInvalid(r,n.index);return}d(r),y.reassertValue(t.target,()=>i.value),n.index<e.length.value-1&&e.focusIndex(n.index+1)}function p(t){e.selectOnFocus.value&&t.target.select()}function x(t){if(e.disabled.value)return;const r=c.directionalKey(t.key,t.currentTarget,s());if(r==="Backspace"){if(e.readOnly.value)return;t.preventDefault(),i.value?d(""):n.index>0&&(e.setCharAt(n.index-1,""),e.focusIndex(n.index-1))}else if(r==="Delete"){if(e.readOnly.value)return;t.preventDefault(),i.value&&d("")}else r==="ArrowLeft"?n.index>0&&(t.preventDefault(),e.focusIndex(n.index-1)):r==="ArrowRight"&&n.index<e.length.value-1&&(t.preventDefault(),e.focusIndex(n.index+1))}function h(t){if(e.disabled.value||e.readOnly.value)return;t.preventDefault();const r=e.sanitizePaste(t.clipboardData?.getData("text")??"");let l="";for(const o of r)e.accepts(o)?l+=o:e.reportInvalid(o,Math.min(n.index+l.length,e.length.value-1));if(!l)return;const m=e.fillFrom(n.index,l);e.focusIndex(Math.min(m+1,e.length.value-1))}return(t,r)=>((0,a.openBlock)(),(0,a.createElementBlock)("input",{class:"skdx-pin-input__field","data-part":"field",ref:l=>(0,a.unref)(e).registerField(u.index,l),inputmode:(0,a.unref)(e).type.value==="numeric"?"numeric":"text",autocomplete:(0,a.unref)(e).otp.value&&u.index===0?"one-time-code":"off",type:(0,a.unref)(e).mask.value&&f.value?"password":"text",placeholder:(0,a.unref)(e).placeholder.value,maxlength:"1",disabled:(0,a.unref)(e).disabled.value,readonly:(0,a.unref)(e).readOnly.value,"aria-label":(0,a.unref)(e).digitLabel.value(u.index+1,(0,a.unref)(e).length.value),"aria-readonly":(0,a.unref)(e).readOnly.value?!0:void 0,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-invalid":(0,a.unref)(e).invalid.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,value:i.value,onInput:v,onKeydown:x,onPaste:h,onFocus:p},null,40,_))}});exports.default=b;

package/dist/pin-input/PinInputField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{reassertValue as e}from"../utils/reassertValue.js";import{directionalKey as a,useDirection as t}from"../utils/direction.js";import{PIN_INPUT_CONTEXT as n}from"./context.js";import{computed as l,createElementBlock as i,defineComponent as d,inject as u,openBlock as r,unref as o}from"vue";var s=["inputmode","autocomplete","type","disabled","readonly","aria-invalid","aria-readonly","data-disabled","data-invalid","data-readonly","value"],v=/* @__PURE__ */d({__name:"PinInputField",props:{index:{}},setup(d){const v=/^[0-9]$/,c=d,p=u(n);if(!p)throw new Error("<SkdxPinInputField> must be used inside <SkdxPinInput>.");const f=t(),x=l(()=>p.value.value[c.index]??""),m=l(()=>""!==x.value);function y(e){const a=p.value.value.split("");a[c.index]=e,p.setValue(a.join("").slice(0,p.length.value))}function g(a){if(p.disabled.value)return;const t=a.target.value;""!==t?"numeric"!==p.type.value||v.test(t)?(y(t),e(a.target,()=>x.value),c.index<p.length.value-1&&p.focusIndex(c.index+1)):a.target.value=x.value:y("")}function h(e){if(p.disabled.value)return;const t=a(e.key,e.currentTarget,f());if("Backspace"===t){if(p.readOnly.value)return;if(e.preventDefault(),x.value)y("");else if(c.index>0){const e=p.value.value.split("");e[c.index-1]="",p.setValue(e.join("").slice(0,p.length.value)),p.focusIndex(c.index-1)}}else"ArrowLeft"===t?c.index>0&&(e.preventDefault(),p.focusIndex(c.index-1)):"ArrowRight"===t&&c.index<p.length.value-1&&(e.preventDefault(),p.focusIndex(c.index+1))}function b(e){if(p.disabled.value||p.readOnly.value)return;e.preventDefault();const a=p.sanitizePaste(e.clipboardData?.getData("text")??""),t="numeric"===p.type.value?a.replace(/[^0-9]/g,""):a;if(!t)return;const n=p.value.value.split("");let l=c.index-1;for(let e=0;e<t.length&&c.index+e<p.length.value;e++)n[c.index+e]=t[e],l=c.index+e;p.setValue(n.join("").slice(0,p.length.value)),p.focusIndex(Math.min(l+1,p.length.value-1))}return(e,a)=>(r(),i("input",{class:"skdx-pin-input__field","data-part":"field",ref:e=>o(p).registerField(d.index,e),inputmode:"numeric"===o(p).type.value?"numeric":"text",autocomplete:0===d.index?"one-time-code":"off",type:o(p).mask.value&&m.value?"password":"text",maxlength:"1",disabled:o(p).disabled.value,readonly:o(p).readOnly.value,"aria-invalid":!!o(p).invalid.value||void 0,"aria-readonly":!!o(p).readOnly.value||void 0,"data-disabled":o(p).disabled.value?"":void 0,"data-invalid":o(p).invalid.value?"":void 0,"data-readonly":o(p).readOnly.value?"":void 0,value:x.value,onInput:g,onKeydown:h,onPaste:b},null,40,s))}});export{v as default};
+import{reassertValue as e}from"../utils/reassertValue.js";import{directionalKey as a,useDirection as t}from"../utils/direction.js";import{PIN_INPUT_CONTEXT as n}from"./context.js";import{computed as l,createElementBlock as i,defineComponent as d,inject as r,openBlock as u,unref as o}from"vue";var s=["inputmode","autocomplete","type","placeholder","disabled","readonly","aria-label","aria-readonly","data-disabled","data-invalid","data-readonly","value"],v=/* @__PURE__ */d({__name:"PinInputField",props:{index:{}},setup(d){const v=d,c=r(n);if(!c)throw new Error("<SkdxPinInputField> must be used inside <SkdxPinInput>.");const p=t(),f=l(()=>c.charAt(v.index)),x=l(()=>""!==f.value);function m(e){c.setCharAt(v.index,e)}function y(a){if(c.disabled.value)return;const t=a.target.value;if(""!==t)return c.accepts(t)?(m(t),e(a.target,()=>f.value),void(v.index<c.length.value-1&&c.focusIndex(v.index+1))):(a.target.value=f.value,void c.reportInvalid(t,v.index));m("")}function h(e){c.selectOnFocus.value&&e.target.select()}function g(e){if(c.disabled.value)return;const t=a(e.key,e.currentTarget,p());if("Backspace"===t){if(c.readOnly.value)return;e.preventDefault(),f.value?m(""):v.index>0&&(c.setCharAt(v.index-1,""),c.focusIndex(v.index-1))}else if("Delete"===t){if(c.readOnly.value)return;e.preventDefault(),f.value&&m("")}else"ArrowLeft"===t?v.index>0&&(e.preventDefault(),c.focusIndex(v.index-1)):"ArrowRight"===t&&v.index<c.length.value-1&&(e.preventDefault(),c.focusIndex(v.index+1))}function b(e){if(c.disabled.value||c.readOnly.value)return;e.preventDefault();const a=c.sanitizePaste(e.clipboardData?.getData("text")??"");let t="";for(const e of a)c.accepts(e)?t+=e:c.reportInvalid(e,Math.min(v.index+t.length,c.length.value-1));if(!t)return;const n=c.fillFrom(v.index,t);c.focusIndex(Math.min(n+1,c.length.value-1))}return(e,a)=>(u(),i("input",{class:"skdx-pin-input__field","data-part":"field",ref:e=>o(c).registerField(d.index,e),inputmode:"numeric"===o(c).type.value?"numeric":"text",autocomplete:o(c).otp.value&&0===d.index?"one-time-code":"off",type:o(c).mask.value&&x.value?"password":"text",placeholder:o(c).placeholder.value,maxlength:"1",disabled:o(c).disabled.value,readonly:o(c).readOnly.value,"aria-label":o(c).digitLabel.value(d.index+1,o(c).length.value),"aria-readonly":!!o(c).readOnly.value||void 0,"data-disabled":o(c).disabled.value?"":void 0,"data-invalid":o(c).invalid.value?"":void 0,"data-readonly":o(c).readOnly.value?"":void 0,value:f.value,onInput:y,onKeydown:g,onPaste:b,onFocus:h},null,40,s))}});export{v as default};

package/dist/pin-input/charFilter.cjs

@@ -0,0 +1 @@
+var i={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function u(r,n){if(n){const e=new RegExp(n);return c=>e.test(c)}const t=i[r]??null;return t?e=>t.test(e):()=>!0}exports.pinCharAcceptor=u;

package/dist/pin-input/charFilter.d.cts

@@ -0,0 +1,17 @@
+/**
+ * Which single characters a PinInput box accepts.
+ * One decision per root, asked per character for both keystrokes and pastes.
+ * @internal
+ */
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/**
+ * Builds the per-character predicate from `type` and `pattern`.
+ * Pattern replaces type (doesn't narrow), allowing widening like [A-Fa-f0-9].
+ */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/**
+ * Returns the pattern expression for reporting (Angular's NG_VALIDATORS).
+ * '.' for 'text' which accepts all.
+ */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;

package/dist/pin-input/charFilter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Which single characters a PinInput box accepts.
+ * One decision per root, asked per character for both keystrokes and pastes.
+ * @internal
+ */
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/**
+ * Builds the per-character predicate from `type` and `pattern`.
+ * Pattern replaces type (doesn't narrow), allowing widening like [A-Fa-f0-9].
+ */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/**
+ * Returns the pattern expression for reporting (Angular's NG_VALIDATORS).
+ * '.' for 'text' which accepts all.
+ */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;

package/dist/pin-input/charFilter.js

@@ -0,0 +1 @@
+var t={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function e(e,n){if(n){const t=new RegExp(n);return e=>t.test(e)}const r=t[e]??null;return r?t=>r.test(t):()=>!0}export{e as pinCharAcceptor};

package/dist/pin-input/context.d.cts

@@ -1,18 +1,43 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+import type { PinInputType } from './charFilter.cjs';
 /** @internal Injection key a PinInput provides so its fields can read/drive shared state. */
 export interface PinInputContext {
+    /** Joined value; boxes read via charAt. */
     value: ComputedRef<string>;
     length: ComputedRef<number>;
-    type: ComputedRef<'text' | 'numeric'>;
+    type: ComputedRef<PinInputType>;
     mask: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
     invalid: ComputedRef<boolean>;
     readOnly: ComputedRef<boolean>;
-    setValue: (next: string) => void;
+    /** A single character drawn in every empty box, or `undefined` for none. */
+    placeholder: ComputedRef<string | undefined>;
+    /** Whether box 0 advertises `autocomplete="one-time-code"`. */
+    otp: ComputedRef<boolean>;
+    /** Whether a box selects the character it already holds when focus lands in it. */
+    selectOnFocus: ComputedRef<boolean>;
+    /**
+     * Whether character passes type/pattern filter. Built once per root.
+     */
+    accepts: (char: string) => boolean;
+    /** Emits `value-invalid` for a character the filter refused. */
+    reportInvalid: (char: string, index: number) => void;
+    /**
+     * Character at index, read from slot array (keeps position).
+     */
+    charAt: (index: number) => string;
+    /** Writes one box's character (`''` clears it) and publishes the joined value. */
+    setCharAt: (index: number, char: string) => void;
+    /**
+     * Writes consecutive boxes from index; returns last written (paste path).
+     */
+    fillFrom: (index: number, chars: string) => number;
     focusIndex: (index: number) => void;
     registerField: (index: number, el: HTMLInputElement | null) => void;
     /** Runs the root's `sanitize` hook over pasted text; identity when none is set. */
     sanitizePaste: (pasted: string) => string;
+    /** Creates `aria-label` from 1-based index and length. */
+    digitLabel: ComputedRef<(index: number, length: number) => string>;
 }
 /** @internal Injection key a PinInput provides so its fields share value, config, and focus/registration handlers. */
 export declare const PIN_INPUT_CONTEXT: InjectionKey<PinInputContext>;

package/dist/pin-input/context.d.ts

@@ -1,18 +1,43 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+import type { PinInputType } from './charFilter.js';
 /** @internal Injection key a PinInput provides so its fields can read/drive shared state. */
 export interface PinInputContext {
+    /** Joined value; boxes read via charAt. */
     value: ComputedRef<string>;
     length: ComputedRef<number>;
-    type: ComputedRef<'text' | 'numeric'>;
+    type: ComputedRef<PinInputType>;
     mask: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
     invalid: ComputedRef<boolean>;
     readOnly: ComputedRef<boolean>;
-    setValue: (next: string) => void;
+    /** A single character drawn in every empty box, or `undefined` for none. */
+    placeholder: ComputedRef<string | undefined>;
+    /** Whether box 0 advertises `autocomplete="one-time-code"`. */
+    otp: ComputedRef<boolean>;
+    /** Whether a box selects the character it already holds when focus lands in it. */
+    selectOnFocus: ComputedRef<boolean>;
+    /**
+     * Whether character passes type/pattern filter. Built once per root.
+     */
+    accepts: (char: string) => boolean;
+    /** Emits `value-invalid` for a character the filter refused. */
+    reportInvalid: (char: string, index: number) => void;
+    /**
+     * Character at index, read from slot array (keeps position).
+     */
+    charAt: (index: number) => string;
+    /** Writes one box's character (`''` clears it) and publishes the joined value. */
+    setCharAt: (index: number, char: string) => void;
+    /**
+     * Writes consecutive boxes from index; returns last written (paste path).
+     */
+    fillFrom: (index: number, chars: string) => number;
     focusIndex: (index: number) => void;
     registerField: (index: number, el: HTMLInputElement | null) => void;
     /** Runs the root's `sanitize` hook over pasted text; identity when none is set. */
     sanitizePaste: (pasted: string) => string;
+    /** Creates `aria-label` from 1-based index and length. */
+    digitLabel: ComputedRef<(index: number, length: number) => string>;
 }
 /** @internal Injection key a PinInput provides so its fields share value, config, and focus/registration handlers. */
 export declare const PIN_INPUT_CONTEXT: InjectionKey<PinInputContext>;

package/dist/pin-input/digitLabel.cjs

@@ -0,0 +1 @@
+function t(i,n){return`Digit ${i} of ${n}`}exports.pinInputDigitLabel=t;

package/dist/pin-input/digitLabel.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Default accessible name for a pin box. `index` is 1-based.
+ * @param index the box's position, counting from 1
+ * @param length the total number of boxes
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/pin-input/digitLabel.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Default accessible name for a pin box. `index` is 1-based.
+ * @param index the box's position, counting from 1
+ * @param length the total number of boxes
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/pin-input/digitLabel.js

@@ -0,0 +1 @@
+function i(i,t){return`Digit ${i} of ${t}`}export{i as pinInputDigitLabel};

package/dist/pin-input/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PinInput.vue.cjs"),i=require("./PinInputField.vue.cjs");exports.SkdxPinInput=e.default;exports.SkdxPinInputField=i.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./digitLabel.cjs"),i=require("./PinInput.vue.cjs");exports.SkdxPinInput=i.default;exports.pinInputDigitLabel=e.pinInputDigitLabel;

package/dist/pin-input/index.d.cts

@@ -1,2 +1,2 @@
 export { default as SkdxPinInput } from './PinInput.vue.cjs';
-export { default as SkdxPinInputField } from './PinInputField.vue.cjs';
+export { pinInputDigitLabel } from './digitLabel.cjs';

package/dist/pin-input/index.d.ts

@@ -1,2 +1,2 @@
 export { default as SkdxPinInput } from './PinInput.vue.js';
-export { default as SkdxPinInputField } from './PinInputField.vue.js';
+export { pinInputDigitLabel } from './digitLabel.js';

package/dist/pin-input/index.js

@@ -1 +1 @@
-import i from"./PinInput.vue.js";import n from"./PinInputField.vue.js";export{i as SkdxPinInput,n as SkdxPinInputField};
+import{pinInputDigitLabel as i}from"./digitLabel.js";import t from"./PinInput.vue.js";export{t as SkdxPinInput,i as pinInputDigitLabel};

package/dist/pin-input/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PinInputField.vue.cjs"),i=require("./PinInput.vue.cjs");exports.SkdxPinInput=i.default;exports.SkdxPinInputField=e.default;

package/dist/pin-input/primitives.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Advanced primitives for `SkdxPinInput` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxPinInput, SkdxPinInputField } from '@skdx/vue/primitives/pin-input';
+ * </script>
+ *
+ * <template>
+ *   <SkdxPinInput :length="4">
+ *     <SkdxPinInputField v-for="i in 4" :key="i - 1" :index="i - 1" />
+ *   </SkdxPinInput>
+ * </template>
+ * ```
+ */
+export { default as SkdxPinInput } from './PinInput.vue.cjs';
+export { default as SkdxPinInputField } from './PinInputField.vue.cjs';

package/dist/pin-input/primitives.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Advanced primitives for `SkdxPinInput` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxPinInput, SkdxPinInputField } from '@skdx/vue/primitives/pin-input';
+ * </script>
+ *
+ * <template>
+ *   <SkdxPinInput :length="4">
+ *     <SkdxPinInputField v-for="i in 4" :key="i - 1" :index="i - 1" />
+ *   </SkdxPinInput>
+ * </template>
+ * ```
+ */
+export { default as SkdxPinInput } from './PinInput.vue.js';
+export { default as SkdxPinInputField } from './PinInputField.vue.js';

package/dist/pin-input/primitives.js

@@ -0,0 +1 @@
+import i from"./PinInputField.vue.js";import n from"./PinInput.vue.js";export{n as SkdxPinInput,i as SkdxPinInputField};

package/dist/pin-input/slots.cjs

@@ -0,0 +1 @@
+function i(n,o){return Array.from({length:o},(l,t)=>n[t]??"")}function r(n){return n.join("")}exports.joinPinSlots=r;exports.toPinSlots=i;

package/dist/pin-input/slots.d.cts

@@ -0,0 +1,11 @@
+/**
+ * Positional model for PinInput: array-backed slots joined into a string value.
+ * Uses array indexing to preserve holes when boxes are skipped.
+ * @internal
+ */
+/**
+ * Splits a value into slots, left-packed. Holes come only from user skips.
+ */
+export declare function toPinSlots(value: string, length: number): string[];
+/** Join slots into published value. */
+export declare function joinPinSlots(slots: readonly string[]): string;