@skdx/vue 0.26.0 → 0.28.0

package/dist/password-input/PasswordInputField.vue.d.ts

@@ -1,23 +1,8 @@
 /**
- * The native `<input>` for a `<SkdxPasswordInput>`. It *is* a
- * `<SkdxTextFieldInput>` — same `id`, same value wiring, same
- * `aria-invalid`/`data-disabled`/`data-invalid` — with one attribute taken
- * over: `type` is `password` while the root is hidden and `text` while it is
- * visible. Toggling the type rather than swapping the element keeps the same
- * DOM node, so focus, selection and caret position survive the flip.
- *
- * `type` is deliberately not a prop and is bound after `$attrs`, so a consumer
- * cannot pin the field open while the toggle claims it is masked.
- *
- * `autocomplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
- * Input Purpose) and is overridable — a sign-up or change-password form wants
- * `new-password`.
- *
- * The value is never written into an attribute by this component: nothing here
- * copies it into a `data-*` or `aria-*` where a plaintext credential would end
- * up in serialised HTML.
- *
- * Must be used inside `<SkdxPasswordInput>`.
+ * Native `<input>` for a password field, wired to toggle between `password`
+ * and `text` types. Type is bound after `$attrs` so a consumer cannot pin it
+ * open. `autocomplete` defaults to `current-password` and is overridable.
+ * Value never enters attributes. Must be used inside `<SkdxPasswordInput>`.
  *
  * @example
  * ```vue

package/dist/password-input/PasswordInputField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("../text-field/TextFieldInput.vue.cjs"),u=require("./context.cjs");let e=require("vue");var a=(0,e.defineComponent)({inheritAttrs:!1,__name:"PasswordInputField",setup(n){const t=(0,e.inject)(u.PASSWORD_INPUT_CONTEXT);if(!t)throw new Error("<SkdxPasswordInputField> must be used inside <SkdxPasswordInput>.");return(r,d)=>((0,e.openBlock)(),(0,e.createBlock)(s.default,(0,e.mergeProps)({class:"skdx-password-input__field","data-part":"field",autocomplete:"current-password","data-state":(0,e.unref)(t).visible.value?"visible":"hidden"},r.$attrs,{type:(0,e.unref)(t).visible.value?"text":"password"}),null,16,["data-state","type"]))}});exports.default=a;
+const s=require("../text-field/TextFieldInput.vue.cjs"),a=require("./context.cjs");let e=require("vue");var u=(0,e.defineComponent)({inheritAttrs:!1,__name:"PasswordInputField",setup(n){const t=(0,e.inject)(a.PASSWORD_INPUT_CONTEXT);if(!t)throw new Error("<SkdxPasswordInputField> must be used inside <SkdxPasswordInput>.");return(r,d)=>((0,e.openBlock)(),(0,e.createBlock)(s.default,(0,e.mergeProps)({class:"skdx-password-input__field","data-part":"field",autocomplete:"current-password","read-only":(0,e.unref)(t).readOnly.value,"data-state":(0,e.unref)(t).visible.value?"visible":"hidden"},r.$attrs,{type:(0,e.unref)(t).visible.value?"text":"password"}),null,16,["read-only","data-state","type"]))}});exports.default=u;

package/dist/password-input/PasswordInputField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"../text-field/TextFieldInput.vue.js";import{PASSWORD_INPUT_CONTEXT as t}from"./context.js";import{createBlock as s,defineComponent as a,inject as r,mergeProps as o,openBlock as d,unref as i}from"vue";var n=/* @__PURE__ */a({inheritAttrs:!1,__name:"PasswordInputField",setup(a){const n=r(t);if(!n)throw new Error("<SkdxPasswordInputField> must be used inside <SkdxPasswordInput>.");return(t,a)=>(d(),s(e,o({class:"skdx-password-input__field","data-part":"field",autocomplete:"current-password","data-state":i(n).visible.value?"visible":"hidden"},t.$attrs,{type:i(n).visible.value?"text":"password"}),null,16,["data-state","type"]))}});export{n as default};
+import e from"../text-field/TextFieldInput.vue.js";import{PASSWORD_INPUT_CONTEXT as t}from"./context.js";import{createBlock as s,defineComponent as a,inject as r,mergeProps as d,openBlock as o,unref as i}from"vue";var n=/* @__PURE__ */a({inheritAttrs:!1,__name:"PasswordInputField",setup(a){const n=r(t);if(!n)throw new Error("<SkdxPasswordInputField> must be used inside <SkdxPasswordInput>.");return(t,a)=>(o(),s(e,d({class:"skdx-password-input__field","data-part":"field",autocomplete:"current-password","read-only":i(n).readOnly.value,"data-state":i(n).visible.value?"visible":"hidden"},t.$attrs,{type:i(n).visible.value?"text":"password"}),null,16,["read-only","data-state","type"]))}});export{n as default};

package/dist/password-input/PasswordInputToggle.vue.d.cts

@@ -1,24 +1,7 @@
 /**
- * The reveal button for a `<SkdxPasswordInput>`. Renders a
- * `<button type="button">` carrying `aria-pressed`, so assistive tech reports a
- * toggle that is currently on or off rather than a button that did something
- * unknowable.
- *
- * **It stays in the tab order.** `tabindex="-1"` is a common shortcut for
- * "adornment inside a field" and it is wrong here: revealing the characters is
- * the only way a keyboard user can check what they typed, and taking the button
- * out of tab navigation makes that unreachable without a pointer (WCAG 2.1.1).
- * Tab from the field lands on the toggle.
- *
- * An accessible name is always present: it defaults to "Show password" /
- * "Hide password", flipping with the state so the name and `aria-pressed`
- * agree. Pass your own `aria-label` to localise it — but pass one, because an
- * icon-only button with no name announces as "button".
- *
- * Disabled follows the root's `disabled`, and both `data-state` and
- * `data-disabled` are exposed for styling.
- *
- * Must be used inside `<SkdxPasswordInput>`.
+ * Reveal toggle for a `<SkdxPasswordInput>` with `aria-pressed`. Stays in tab
+ * order (keyboard users need it to verify input); label is always "Show password"
+ * with `aria-pressed` indicating state. Must be used inside `<SkdxPasswordInput>`.
  *
  * @example
  * ```vue

package/dist/password-input/PasswordInputToggle.vue.d.ts

@@ -1,24 +1,7 @@
 /**
- * The reveal button for a `<SkdxPasswordInput>`. Renders a
- * `<button type="button">` carrying `aria-pressed`, so assistive tech reports a
- * toggle that is currently on or off rather than a button that did something
- * unknowable.
- *
- * **It stays in the tab order.** `tabindex="-1"` is a common shortcut for
- * "adornment inside a field" and it is wrong here: revealing the characters is
- * the only way a keyboard user can check what they typed, and taking the button
- * out of tab navigation makes that unreachable without a pointer (WCAG 2.1.1).
- * Tab from the field lands on the toggle.
- *
- * An accessible name is always present: it defaults to "Show password" /
- * "Hide password", flipping with the state so the name and `aria-pressed`
- * agree. Pass your own `aria-label` to localise it — but pass one, because an
- * icon-only button with no name announces as "button".
- *
- * Disabled follows the root's `disabled`, and both `data-state` and
- * `data-disabled` are exposed for styling.
- *
- * Must be used inside `<SkdxPasswordInput>`.
+ * Reveal toggle for a `<SkdxPasswordInput>` with `aria-pressed`. Stays in tab
+ * order (keyboard users need it to verify input); label is always "Show password"
+ * with `aria-pressed` indicating state. Must be used inside `<SkdxPasswordInput>`.
  *
  * @example
  * ```vue

package/dist/password-input/PasswordInputToggle.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const d=require("./context.cjs");let e=require("vue");var r=["aria-pressed","aria-label","disabled","data-state","data-disabled"],l=(0,e.defineComponent)({__name:"PasswordInputToggle",setup(i){const a=(0,e.inject)(d.PASSWORD_INPUT_CONTEXT);if(!a)throw new Error("<SkdxPasswordInputToggle> must be used inside <SkdxPasswordInput>.");function t(){a.setVisible(!a.visible.value)}return(s,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-password-input__toggle","data-part":"toggle",type:"button","aria-pressed":(0,e.unref)(a).visible.value,"aria-label":(0,e.unref)(a).visible.value?"Hide password":"Show password",disabled:(0,e.unref)(a).disabled.value,"data-state":(0,e.unref)(a).visible.value?"visible":"hidden","data-disabled":(0,e.unref)(a).disabled.value?"":void 0,onClick:t},[(0,e.renderSlot)(s.$slots,"default")],8,r))}});exports.default=l;
+const l=require("./context.cjs");let e=require("vue");var r=["aria-pressed","aria-label","disabled","data-state","data-disabled"],d=(0,e.defineComponent)({__name:"PasswordInputToggle",setup(i){const a=(0,e.inject)(l.PASSWORD_INPUT_CONTEXT);if(!a)throw new Error("<SkdxPasswordInputToggle> must be used inside <SkdxPasswordInput>.");function t(){a.setVisible(!a.visible.value)}return(s,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-password-input__toggle","data-part":"toggle",type:"button","aria-pressed":(0,e.unref)(a).visible.value,"aria-label":(0,e.unref)(a).revealLabel.value,disabled:(0,e.unref)(a).disabled.value,"data-state":(0,e.unref)(a).visible.value?"visible":"hidden","data-disabled":(0,e.unref)(a).disabled.value?"":void 0,onClick:t},[(0,e.renderSlot)(s.$slots,"default")],8,r))}});exports.default=d;

package/dist/password-input/PasswordInputToggle.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{PASSWORD_INPUT_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as s,inject as t,openBlock as d,renderSlot as i,unref as l}from"vue";var o=["aria-pressed","aria-label","disabled","data-state","data-disabled"],r=/* @__PURE__ */s({__name:"PasswordInputToggle",setup(s){const r=t(e);if(!r)throw new Error("<SkdxPasswordInputToggle> must be used inside <SkdxPasswordInput>.");function n(){r.setVisible(!r.visible.value)}return(e,s)=>(d(),a("button",{class:"skdx-password-input__toggle","data-part":"toggle",type:"button","aria-pressed":l(r).visible.value,"aria-label":l(r).visible.value?"Hide password":"Show password",disabled:l(r).disabled.value,"data-state":l(r).visible.value?"visible":"hidden","data-disabled":l(r).disabled.value?"":void 0,onClick:n},[i(e.$slots,"default")],8,o))}});export{r as default};
+import{PASSWORD_INPUT_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as s,inject as t,openBlock as l,renderSlot as d,unref as i}from"vue";var o=["aria-pressed","aria-label","disabled","data-state","data-disabled"],r=/* @__PURE__ */s({__name:"PasswordInputToggle",setup(s){const r=t(e);if(!r)throw new Error("<SkdxPasswordInputToggle> must be used inside <SkdxPasswordInput>.");function n(){r.setVisible(!r.visible.value)}return(e,s)=>(l(),a("button",{class:"skdx-password-input__toggle","data-part":"toggle",type:"button","aria-pressed":i(r).visible.value,"aria-label":i(r).revealLabel.value,disabled:i(r).disabled.value,"data-state":i(r).visible.value?"visible":"hidden","data-disabled":i(r).disabled.value?"":void 0,onClick:n},[d(e.$slots,"default")],8,o))}});export{r as default};

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

@@ -1,11 +1,15 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 /** @internal Shared state a PasswordInput root provides so its Field/Toggle parts read the same visibility. */
 export interface PasswordInputContext {
-    /** Whether the characters are currently revealed — the resolved state, controlled or not. */
+    /** Whether characters are revealed. */
     visible: ComputedRef<boolean>;
-    /** The root's `disabled`, so the Toggle disables together with the field. */
+    /** The root's `disabled`, so the Toggle disables with the field. */
     disabled: ComputedRef<boolean>;
-    /** Requests a new visibility. No-op when it matches the current state; a controlled parent may refuse it. */
+    /** The root's `readOnly`, forwarded to the field. Toggle stays operable. */
+    readOnly: ComputedRef<boolean>;
+    /** Accessible name for the Toggle. */
+    revealLabel: ComputedRef<string>;
+    /** Requests new visibility. A controlled parent may refuse it. */
     setVisible: (visible: boolean) => void;
 }
 /** @internal Injection key a PasswordInput root provides so its Field flips `type` and its Toggle flips the state. */

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

@@ -1,11 +1,15 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 /** @internal Shared state a PasswordInput root provides so its Field/Toggle parts read the same visibility. */
 export interface PasswordInputContext {
-    /** Whether the characters are currently revealed — the resolved state, controlled or not. */
+    /** Whether characters are revealed. */
     visible: ComputedRef<boolean>;
-    /** The root's `disabled`, so the Toggle disables together with the field. */
+    /** The root's `disabled`, so the Toggle disables with the field. */
     disabled: ComputedRef<boolean>;
-    /** Requests a new visibility. No-op when it matches the current state; a controlled parent may refuse it. */
+    /** The root's `readOnly`, forwarded to the field. Toggle stays operable. */
+    readOnly: ComputedRef<boolean>;
+    /** Accessible name for the Toggle. */
+    revealLabel: ComputedRef<string>;
+    /** Requests new visibility. A controlled parent may refuse it. */
     setVisible: (visible: boolean) => void;
 }
 /** @internal Injection key a PasswordInput root provides so its Field flips `type` and its Toggle flips the state. */

package/dist/password-input/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PasswordInput.vue.cjs"),r=require("./PasswordInputField.vue.cjs"),u=require("./PasswordInputToggle.vue.cjs");exports.SkdxPasswordInput=e.default;exports.SkdxPasswordInputField=r.default;exports.SkdxPasswordInputToggle=u.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PasswordInput.vue.cjs");exports.SkdxPasswordInput=e.default;

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

@@ -1,3 +1 @@
 export { default as SkdxPasswordInput } from './PasswordInput.vue.cjs';
-export { default as SkdxPasswordInputField } from './PasswordInputField.vue.cjs';
-export { default as SkdxPasswordInputToggle } from './PasswordInputToggle.vue.cjs';

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

@@ -1,3 +1 @@
 export { default as SkdxPasswordInput } from './PasswordInput.vue.js';
-export { default as SkdxPasswordInputField } from './PasswordInputField.vue.js';
-export { default as SkdxPasswordInputToggle } from './PasswordInputToggle.vue.js';

package/dist/password-input/index.js

@@ -1 +1 @@
-import s from"./PasswordInput.vue.js";import o from"./PasswordInputField.vue.js";import r from"./PasswordInputToggle.vue.js";export{s as SkdxPasswordInput,o as SkdxPasswordInputField,r as SkdxPasswordInputToggle};
+import s from"./PasswordInput.vue.js";export{s as SkdxPasswordInput};

package/dist/password-input/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PasswordInputField.vue.cjs"),r=require("./PasswordInputToggle.vue.cjs"),u=require("./PasswordInput.vue.cjs");exports.SkdxPasswordInput=u.default;exports.SkdxPasswordInputField=e.default;exports.SkdxPasswordInputToggle=r.default;

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

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `SkdxPasswordInput` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * The recipe derives its body from slots when given children, rendering these parts explicitly.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxPasswordInput, SkdxPasswordInputField, SkdxPasswordInputToggle } from '@skdx/vue/primitives/password-input';
+ * </script>
+ *
+ * <template>
+ *   <SkdxPasswordInput v-model:value="password">
+ *     <SkdxPasswordInputField placeholder="Password" />
+ *     <SkdxPasswordInputToggle />
+ *   </SkdxPasswordInput>
+ * </template>
+ * ```
+ */
+export { default as SkdxPasswordInput } from './PasswordInput.vue.cjs';
+export { default as SkdxPasswordInputField } from './PasswordInputField.vue.cjs';
+export { default as SkdxPasswordInputToggle } from './PasswordInputToggle.vue.cjs';

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

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `SkdxPasswordInput` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * The recipe derives its body from slots when given children, rendering these parts explicitly.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxPasswordInput, SkdxPasswordInputField, SkdxPasswordInputToggle } from '@skdx/vue/primitives/password-input';
+ * </script>
+ *
+ * <template>
+ *   <SkdxPasswordInput v-model:value="password">
+ *     <SkdxPasswordInputField placeholder="Password" />
+ *     <SkdxPasswordInputToggle />
+ *   </SkdxPasswordInput>
+ * </template>
+ * ```
+ */
+export { default as SkdxPasswordInput } from './PasswordInput.vue.js';
+export { default as SkdxPasswordInputField } from './PasswordInputField.vue.js';
+export { default as SkdxPasswordInputToggle } from './PasswordInputToggle.vue.js';

package/dist/password-input/primitives.js

@@ -0,0 +1 @@
+import s from"./PasswordInputField.vue.js";import o from"./PasswordInputToggle.vue.js";import r from"./PasswordInput.vue.js";export{r as SkdxPasswordInput,s as SkdxPasswordInputField,o as SkdxPasswordInputToggle};

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

@@ -1,20 +1,12 @@
+import { type PinInputType } from './charFilter.cjs';
 /**
- * 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.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;