@skdx/web-components 0.26.0 → 0.28.0

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

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `<skdx-password-input>` — the parts the recipe composes.
+ *
+ * Reach for these when the derived anatomy is not the structure you need.
+ * The recipe (`<skdx-password-input>` from `@skdx/web-components`) is built from exactly these elements.
+ *
+ * @example
+ * ```ts
+ * import * as PasswordInput from '@skdx/web-components/primitives/password-input';
+ * ```
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field placeholder="Password"></skdx-password-input-field>
+ *   <skdx-password-input-toggle>👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ */
+export { SkdxPasswordInputField } from './PasswordInputField.js';
+export { SkdxPasswordInputToggle } from './PasswordInputToggle.js';

package/dist/password-input/primitives.js

@@ -0,0 +1 @@
+import{SkdxPasswordInputField as d}from"./PasswordInputField.js";import{SkdxPasswordInputToggle as p}from"./PasswordInputToggle.js";export{d as SkdxPasswordInputField,p as SkdxPasswordInputToggle};

package/dist/pin-input/PinInput.cjs

@@ -1,5 +1,5 @@
-"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(o,s)=>{for(var e in s)n(o,e,{get:s[e],enumerable:!0})},b=(o,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of v(s))!y.call(o,i)&&i!==e&&n(o,i,{get:()=>s[i],enumerable:!(r=d(s,i))||r.enumerable});return o};var E=o=>b(n({},"__esModule",{value:!0}),o),l=(o,s,e,r)=>{for(var i=r>1?void 0:r?d(s,e):s,m=o.length-1,h;m>=0;m--)(h=o[m])&&(i=(r?h(s,e,i):h(i))||i);return r&&i&&n(s,e,i),i};var q={};g(q,{SkdxPinInput:()=>t});module.exports=E(q);var u=require("lit"),a=require("lit/decorators.js"),c=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs"),p=require("../internal/part.cjs");var t=class extends(0,f.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.value="";this.length=6;this.type="text";this.mask=!1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.autoSubmit=!1}updated(e){e.size>0&&this.dispatchEvent(new CustomEvent("skdx-pin-input-internal-update")),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),(0,p.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value),this.setValueMissing(this.required&&this.value.length<this.length,`Please fill in all ${this.length} characters.`,this.querySelector("skdx-pin-input-field input"))}formResetCallback(){this.value=this.getAttribute("value")??""}setValue(e){let r=e.slice(0,this.length);if(r===this.value)return;let i=this.value.length===this.length;this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0})),!(r.length!==this.length||i)&&(this.dispatchEvent(new CustomEvent("value-complete",{detail:r,bubbles:!0,composed:!0})),this.autoSubmit&&this.submitForm())}sanitizePaste(e){return this.sanitize?.(e)??e}submitForm(){let e=this.closest("skdx-form");if(e){e.trySubmit?.();return}(this.form??this.closest("form"))?.requestSubmit()}focusIndex(e){Array.from(this.querySelectorAll("skdx-pin-input-field"))[e]?.focus()}render(){return u.html`<slot></slot>`}};t.styles=u.css`
+"use strict";var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var F=(a,o)=>{for(var e in o)f(a,e,{get:o[e],enumerable:!0})},B=(a,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of C(o))!q.call(a,l)&&l!==e&&f(a,l,{get:()=>o[l],enumerable:!(t=p(o,l))||t.enumerable});return a};var V=a=>B(f({},"__esModule",{value:!0}),a),s=(a,o,e,t)=>{for(var l=t>1?void 0:t?p(o,e):o,u=a.length-1,n;u>=0;u--)(n=a[u])&&(l=(t?n(o,e,l):n(l))||l);return t&&l&&f(o,e,l),l};var M={};F(M,{SkdxPinInput:()=>i});module.exports=V(M);var h=require("lit"),r=require("lit/decorators.js"),c=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),g=require("../internal/form-associated.cjs"),b=require("../internal/part.cjs"),y=require("../utils/is-dev-mode.cjs"),A=require("./charFilter.cjs"),w=require("./digitLabel.cjs"),m=require("./PinInputAnatomy.cjs"),d=require("./slots.cjs");var i=class extends(0,g.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value="";this.defaultValue="";this.length=6;this.type="text";this.otp=!0;this.autoFocus=!1;this.blurOnComplete=!1;this.selectOnFocus=!1;this.mask=!1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.autoSubmit=!1;this.digitLabel=w.pinInputDigitLabel;this.seeded=!1;this.fillAnatomy=()=>{(0,c.hasAuthoredParts)(this,m.PIN_INPUT_ANATOMY_GENERATED)||(0,m.fillPinInputAnatomy)(this)};this.writtenSlots=[]}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.setAttribute("role","group"),queueMicrotask(this.fillAnatomy)}firstUpdated(){this.autoFocus&&Promise.all(Array.from(this.querySelectorAll("skdx-pin-input-field")).map(t=>t.updateComplete)).then(()=>this.focus());let e=this.querySelectorAll("skdx-pin-input-field").length;e!==0&&e!==this.length&&(0,y.isDevMode)()&&console.warn(`<skdx-pin-input>: ${e} <skdx-pin-input-field>${e===1?"":"s"} rendered but length is ${this.length}. Render exactly one field per position, with contiguous \`index\` values from 0 to ${this.length-1} \u2014 otherwise the value can never complete and value-complete never fires.`)}clear(){this.setValue("")}focus(){this.focusIndex(0)}accepts(e){return(0,A.pinCharAcceptor)(this.type,this.pattern)(e)}reportInvalid(e,t){this.dispatchEvent(new CustomEvent("value-invalid",{detail:{value:e,index:t},bubbles:!0,composed:!0}))}updated(e){e.size>0&&this.dispatchEvent(new CustomEvent("skdx-pin-input-internal-update")),e.has("length")&&this.fillAnatomy(),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),(0,b.reflectHostState)(this,{"aria-invalid":this.invalid?"true":null,"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value),this.setValueMissing(this.required&&this.value.length<this.length,`Please fill in all ${this.length} characters.`,this.querySelector("skdx-pin-input-field input"))}formResetCallback(){this.value=this.defaultValue}setValue(e){let t=e.slice(0,this.length);if(t===this.value)return;let l=this.value.length===this.length;if(this.value=t,this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),!(t.length!==this.length||l)){if(this.dispatchEvent(new CustomEvent("value-complete",{detail:t,bubbles:!0,composed:!0})),this.blurOnComplete){let u=Array.from(this.querySelectorAll("skdx-pin-input-field input"));(u.find(E=>E===this.ownerDocument.activeElement)??u[u.length-1])?.blur()}this.autoSubmit&&this.submitForm()}}get slots(){return this.writtenSlots.length===this.length&&(0,d.joinPinSlots)(this.writtenSlots)===this.value?this.writtenSlots:(0,d.toPinSlots)(this.value,this.length)}writeSlots(e){let t=[...this.slots];e(t),this.writtenSlots=t,this.setValue((0,d.joinPinSlots)(t))}charAt(e){return this.slots[e]??""}setCharAt(e,t){this.writeSlots(l=>{l[e]=t})}fillFrom(e,t){let l=e-1;return this.writeSlots(u=>{for(let n=0;n<t.length&&e+n<this.length;n++)u[e+n]=t[n],l=e+n}),l}sanitizePaste(e){return this.sanitize?.(e)??e}submitForm(){let e=this.closest("skdx-form");if(e){e.trySubmit?.();return}(this.form??this.closest("form"))?.requestSubmit()}focusIndex(e){Array.from(this.querySelectorAll("skdx-pin-input-field"))[e]?.focus()}render(){return h.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};i.styles=h.css`
     :host {
       display: contents;
     }
-  `,l([(0,a.property)({type:String})],t.prototype,"value",2),l([(0,a.property)({type:Number})],t.prototype,"length",2),l([(0,a.property)({type:String})],t.prototype,"type",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"mask",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),l([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),l([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),l([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),l([(0,a.property)({type:Boolean,reflect:!0,attribute:"auto-submit"})],t.prototype,"autoSubmit",2),l([(0,a.property)({attribute:!1})],t.prototype,"sanitize",2),t=l([(0,c.customElement)("skdx-pin-input","pin-input","root")],t);0&&(module.exports={SkdxPinInput});
+  `,s([(0,r.property)({type:String})],i.prototype,"value",2),s([(0,r.property)({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),s([(0,r.property)({type:Number})],i.prototype,"length",2),s([(0,r.property)({type:String})],i.prototype,"type",2),s([(0,r.property)({type:String})],i.prototype,"pattern",2),s([(0,r.property)({type:String})],i.prototype,"placeholder",2),s([(0,r.property)({type:Boolean,reflect:!0})],i.prototype,"otp",2),s([(0,r.property)({type:Boolean,reflect:!0,attribute:"auto-focus"})],i.prototype,"autoFocus",2),s([(0,r.property)({type:Boolean,reflect:!0,attribute:"blur-on-complete"})],i.prototype,"blurOnComplete",2),s([(0,r.property)({type:Boolean,reflect:!0,attribute:"select-on-focus"})],i.prototype,"selectOnFocus",2),s([(0,r.property)({type:Boolean,reflect:!0})],i.prototype,"mask",2),s([(0,r.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([(0,r.property)({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([(0,r.property)({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),s([(0,r.property)({type:Boolean,reflect:!0})],i.prototype,"required",2),s([(0,r.property)({type:String,reflect:!0})],i.prototype,"name",2),s([(0,r.property)({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([(0,r.property)({type:Boolean,reflect:!0,attribute:"auto-submit"})],i.prototype,"autoSubmit",2),s([(0,r.property)({attribute:!1})],i.prototype,"sanitize",2),s([(0,r.property)({attribute:!1})],i.prototype,"digitLabel",2),i=s([(0,v.customElement)("skdx-pin-input","pin-input","root")],i);0&&(module.exports={SkdxPinInput});

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

@@ -1,49 +1,75 @@
 import { LitElement, type PropertyValues } from 'lit';
+import { type PinInputType } from './charFilter.cjs';
 declare const SkdxPinInput_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-pin-input>` — the Web Components implementation of the shared
- * PinInput contract (see `@skdx/shared`'s `pinInputContract`). Owns the
- * joined string value and acts as the shared-state root that
- * `<skdx-pin-input-field>` boxes look up via `closest('skdx-pin-input')`,
- * re-rendering on the `skdx-pin-input-internal-update` event this element
- * dispatches whenever a relevant property changes (same convention as
- * `<skdx-select>`). Renders `display: contents` — layout of the boxes is
- * entirely up to your CSS.
- *
- * Form-associated via `ElementInternals`: with a `name`, the joined value is
- * submitted by the surrounding `<form>` as a single entry. A `required`
- * pin-input is `valueMissing` until every box is filled — a half-typed code
- * is no more submittable than an empty one.
+ * Owns the joined PIN value and is shared-state root for input-field boxes. `role="group"` on host;
+ * form-associated via `ElementInternals` with `name` for one entry. Derives `length` boxes
+ * unless hand-composed.
  *
  * @fires value-change - Any box changed. `detail` is the new joined value.
- * @fires value-complete - The last box was filled. `detail` is the full value.
- * Fires once per completion, not on every keystroke that keeps it complete.
- *
+ * @fires value-complete - The last box was filled; `detail` is the full value.
+ * @fires value-invalid - A character the `type` / `pattern` filter refused; `detail` is `{ value, index }`.
  * @example
  * ```html
- * <skdx-pin-input length="4" type="numeric">
- *   <skdx-pin-input-field index="0"></skdx-pin-input-field>
- *   <skdx-pin-input-field index="1"></skdx-pin-input-field>
- *   <skdx-pin-input-field index="2"></skdx-pin-input-field>
- *   <skdx-pin-input-field index="3"></skdx-pin-input-field>
- * </skdx-pin-input>
+ * <skdx-pin-input aria-label="One-time code" length="4" type="numeric"></skdx-pin-input>
  * ```
  */
 export declare class SkdxPinInput extends SkdxPinInput_base {
     static styles: import("lit").CSSResult;
     /** Current joined value. Listen for `value-change` to observe or override changes. */
     value: string;
+    /**
+     * The code a form reset restores; also seeds `value` on connect when no `value` attribute was authored.
+     * @default '' — an empty code.
+     */
+    defaultValue: string;
     /** Number of character boxes rendered and the max length of `value`. @default 6 */
     length: number;
-    /** `'numeric'` restricts each box to digits 0-9 only. @default 'text' */
-    type: 'text' | 'numeric';
+    /**
+     * Which characters a box accepts; `pattern` overrides it entirely.
+     * @default 'text'
+     */
+    type: PinInputType;
+    /**
+     * A regular-expression source tested against one character at a time, replacing whatever `type` names.
+     * @default undefined — `type` decides.
+     */
+    pattern?: string;
+    /**
+     * A single character drawn in every empty box to indicate slots waiting for a code.
+     * @default undefined — empty boxes are blank.
+     */
+    placeholder?: string;
+    /**
+     * Advertises `autocomplete="one-time-code"` on the first box so the platform can offer a received code.
+     * @default true
+     */
+    otp: boolean;
+    /**
+     * Focuses the first box on connect; off by default to avoid stealing focus from ongoing reading.
+     * @default false
+     */
+    autoFocus: boolean;
+    /**
+     * Blurs the focused box when the code completes, so a soft keyboard closes.
+     * @default false
+     */
+    blurOnComplete: boolean;
+    /**
+     * Selects a box's existing character when focus lands in it, so correcting one digit is a single keystroke.
+     * @default false
+     */
+    selectOnFocus: boolean;
     /** Renders filled boxes as a password field instead of plain text. @default false */
     mask: boolean;
     /** Disables every box, excluding them from the tab order. @default false */
     disabled: boolean;
-    /** Marks the field as invalid, exposed as `aria-invalid`/`data-invalid`. @default false */
+    /**
+     * Marks the field as invalid with `aria-invalid` on the host and `data-invalid` on every box.
+     * @default false
+     */
     invalid: boolean;
     /** Makes every box read-only, still focusable but not editable. @default false */
     readOnly: boolean;
@@ -52,50 +78,77 @@ export declare class SkdxPinInput extends SkdxPinInput_base {
     /** Name used as the `FormData` entry key when the field is inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` field is
-     * submitted before every box is filled. Note the built-in wording
-     * interpolates `length`, so an override is a fixed string — reproduce the
-     * count yourself if the number matters (`Enter all 6 digits.`).
+     * Replaces the message shown when a `required` field is submitted before every box is filled.
      * @default undefined — keeps `` `Please fill in all ${length} characters.` ``
      */
     requiredMessage?: string;
     /**
-     * Submit the surrounding form as soon as the value completes — a native
-     * `<form>` through `requestSubmit()` (so validation and the submit event
-     * still run), an ancestor `<skdx-form>` through its own `trySubmit()`.
+     * Submit the surrounding form as soon as the value completes.
      * @default false
      */
     autoSubmit: boolean;
     /**
-     * Cleans pasted text before it is distributed across the boxes — strip the
-     * spaces and dashes an authenticator app copies along with the code. Runs
-     * before the `type="numeric"` digit filter. Property only: a function has no
-     * attribute form.
+     * Cleans pasted text before it is distributed across the boxes; runs before the `type="numeric"` digit filter.
      * @default undefined — pasted text is used as-is.
      */
     sanitize?: (pasted: string) => string;
+    /**
+     * Words each box's `aria-label` from its 1-based position and `length`; declared here to avoid per-box duplication.
+     * @default {@link pinInputDigitLabel} — `` `Digit ${index} of ${length}` ``
+     */
+    digitLabel: (index: number, length: number) => string;
+    private seeded;
+    private readonly fillAnatomy;
+    connectedCallback(): void;
+    protected firstUpdated(): void;
+    /**
+     * Empties every box (only imperative writer; `value` prop handles setting).
+     */
+    clear(): void;
+    /**
+     * Moves focus into first box; overrides `HTMLElement.focus()` for `display: contents`.
+     */
+    focus(): void;
+    /**
+     * @internal Whether a character passes the `type`/`pattern` filter — one
+     * predicate for typing and pasting, so the two can't disagree.
+     */
+    accepts(char: string): boolean;
+    /** @internal Dispatches `value-invalid` for a character the filter refused. */
+    reportInvalid(char: string, index: number): void;
     protected updated(changed: PropertyValues): void;
     private syncFormState;
-    /** Restores the code the `value` attribute declared, like a native input's `defaultValue`. */
+    /** Restores the declared `defaultValue`, like a native input's own. */
     formResetCallback(): void;
     /**
-     * @internal Sets the joined value, truncated to `length`, dispatching
-     * `value-change` synchronously (not via Lit's async `updated()` lifecycle)
-     * so callers observing the event right after a keystroke or paste see it
-     * without awaiting a render.
+     * @internal Sets joined value (truncated), dispatching `value-change` synchronously,
+     * not via async `updated()`.
      */
     setValue(next: string): void;
+    /**
+     * Fixed-length array rebuilt when it disagrees with `value` (outside write, reset,
+     * `length` rebound).
+     */
+    private writtenSlots;
+    private get slots();
+    private writeSlots;
+    /**
+     * @internal Gets character at `index` from slot array (handles holes).
+     */
+    charAt(index: number): string;
+    /** @internal Writes one box's character (`''` clears it) and publishes the joined value. */
+    setCharAt(index: number, char: string): void;
+    /**
+     * @internal Writes consecutive boxes starting at `index`; returns last index written (paste path).
+     */
+    fillFrom(index: number, chars: string): number;
     /**
      * @internal Cleans pasted text through the consumer's `sanitize` hook, before
      * `<skdx-pin-input-field>` applies the `type="numeric"` digit filter.
      */
     sanitizePaste(pasted: string): string;
     /**
-     * The form this pin input submits into. `<skdx-form>` is not a native form
-     * (it has no `requestSubmit`), so its own `trySubmit()` is the entry point —
-     * the same call `<skdx-form-submit>`'s click handler makes. Otherwise the
-     * native owner from `ElementInternals`, falling back to the nearest
-     * ancestor `<form>` where `internals.form` is unavailable.
+     * Tries `skdx-form.trySubmit()` first, then native form or ancestor `<form>`.
      */
     private submitForm;
     /** @internal Focuses the field at `index`, if it exists. */

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

@@ -1,49 +1,75 @@
 import { LitElement, type PropertyValues } from 'lit';
+import { type PinInputType } from './charFilter.js';
 declare const SkdxPinInput_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-pin-input>` — the Web Components implementation of the shared
- * PinInput contract (see `@skdx/shared`'s `pinInputContract`). Owns the
- * joined string value and acts as the shared-state root that
- * `<skdx-pin-input-field>` boxes look up via `closest('skdx-pin-input')`,
- * re-rendering on the `skdx-pin-input-internal-update` event this element
- * dispatches whenever a relevant property changes (same convention as
- * `<skdx-select>`). Renders `display: contents` — layout of the boxes is
- * entirely up to your CSS.
- *
- * Form-associated via `ElementInternals`: with a `name`, the joined value is
- * submitted by the surrounding `<form>` as a single entry. A `required`
- * pin-input is `valueMissing` until every box is filled — a half-typed code
- * is no more submittable than an empty one.
+ * Owns the joined PIN value and is shared-state root for input-field boxes. `role="group"` on host;
+ * form-associated via `ElementInternals` with `name` for one entry. Derives `length` boxes
+ * unless hand-composed.
  *
  * @fires value-change - Any box changed. `detail` is the new joined value.
- * @fires value-complete - The last box was filled. `detail` is the full value.
- * Fires once per completion, not on every keystroke that keeps it complete.
- *
+ * @fires value-complete - The last box was filled; `detail` is the full value.
+ * @fires value-invalid - A character the `type` / `pattern` filter refused; `detail` is `{ value, index }`.
  * @example
  * ```html
- * <skdx-pin-input length="4" type="numeric">
- *   <skdx-pin-input-field index="0"></skdx-pin-input-field>
- *   <skdx-pin-input-field index="1"></skdx-pin-input-field>
- *   <skdx-pin-input-field index="2"></skdx-pin-input-field>
- *   <skdx-pin-input-field index="3"></skdx-pin-input-field>
- * </skdx-pin-input>
+ * <skdx-pin-input aria-label="One-time code" length="4" type="numeric"></skdx-pin-input>
  * ```
  */
 export declare class SkdxPinInput extends SkdxPinInput_base {
     static styles: import("lit").CSSResult;
     /** Current joined value. Listen for `value-change` to observe or override changes. */
     value: string;
+    /**
+     * The code a form reset restores; also seeds `value` on connect when no `value` attribute was authored.
+     * @default '' — an empty code.
+     */
+    defaultValue: string;
     /** Number of character boxes rendered and the max length of `value`. @default 6 */
     length: number;
-    /** `'numeric'` restricts each box to digits 0-9 only. @default 'text' */
-    type: 'text' | 'numeric';
+    /**
+     * Which characters a box accepts; `pattern` overrides it entirely.
+     * @default 'text'
+     */
+    type: PinInputType;
+    /**
+     * A regular-expression source tested against one character at a time, replacing whatever `type` names.
+     * @default undefined — `type` decides.
+     */
+    pattern?: string;
+    /**
+     * A single character drawn in every empty box to indicate slots waiting for a code.
+     * @default undefined — empty boxes are blank.
+     */
+    placeholder?: string;
+    /**
+     * Advertises `autocomplete="one-time-code"` on the first box so the platform can offer a received code.
+     * @default true
+     */
+    otp: boolean;
+    /**
+     * Focuses the first box on connect; off by default to avoid stealing focus from ongoing reading.
+     * @default false
+     */
+    autoFocus: boolean;
+    /**
+     * Blurs the focused box when the code completes, so a soft keyboard closes.
+     * @default false
+     */
+    blurOnComplete: boolean;
+    /**
+     * Selects a box's existing character when focus lands in it, so correcting one digit is a single keystroke.
+     * @default false
+     */
+    selectOnFocus: boolean;
     /** Renders filled boxes as a password field instead of plain text. @default false */
     mask: boolean;
     /** Disables every box, excluding them from the tab order. @default false */
     disabled: boolean;
-    /** Marks the field as invalid, exposed as `aria-invalid`/`data-invalid`. @default false */
+    /**
+     * Marks the field as invalid with `aria-invalid` on the host and `data-invalid` on every box.
+     * @default false
+     */
     invalid: boolean;
     /** Makes every box read-only, still focusable but not editable. @default false */
     readOnly: boolean;
@@ -52,50 +78,77 @@ export declare class SkdxPinInput extends SkdxPinInput_base {
     /** Name used as the `FormData` entry key when the field is inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` field is
-     * submitted before every box is filled. Note the built-in wording
-     * interpolates `length`, so an override is a fixed string — reproduce the
-     * count yourself if the number matters (`Enter all 6 digits.`).
+     * Replaces the message shown when a `required` field is submitted before every box is filled.
      * @default undefined — keeps `` `Please fill in all ${length} characters.` ``
      */
     requiredMessage?: string;
     /**
-     * Submit the surrounding form as soon as the value completes — a native
-     * `<form>` through `requestSubmit()` (so validation and the submit event
-     * still run), an ancestor `<skdx-form>` through its own `trySubmit()`.
+     * Submit the surrounding form as soon as the value completes.
      * @default false
      */
     autoSubmit: boolean;
     /**
-     * Cleans pasted text before it is distributed across the boxes — strip the
-     * spaces and dashes an authenticator app copies along with the code. Runs
-     * before the `type="numeric"` digit filter. Property only: a function has no
-     * attribute form.
+     * Cleans pasted text before it is distributed across the boxes; runs before the `type="numeric"` digit filter.
      * @default undefined — pasted text is used as-is.
      */
     sanitize?: (pasted: string) => string;
+    /**
+     * Words each box's `aria-label` from its 1-based position and `length`; declared here to avoid per-box duplication.
+     * @default {@link pinInputDigitLabel} — `` `Digit ${index} of ${length}` ``
+     */
+    digitLabel: (index: number, length: number) => string;
+    private seeded;
+    private readonly fillAnatomy;
+    connectedCallback(): void;
+    protected firstUpdated(): void;
+    /**
+     * Empties every box (only imperative writer; `value` prop handles setting).
+     */
+    clear(): void;
+    /**
+     * Moves focus into first box; overrides `HTMLElement.focus()` for `display: contents`.
+     */
+    focus(): void;
+    /**
+     * @internal Whether a character passes the `type`/`pattern` filter — one
+     * predicate for typing and pasting, so the two can't disagree.
+     */
+    accepts(char: string): boolean;
+    /** @internal Dispatches `value-invalid` for a character the filter refused. */
+    reportInvalid(char: string, index: number): void;
     protected updated(changed: PropertyValues): void;
     private syncFormState;
-    /** Restores the code the `value` attribute declared, like a native input's `defaultValue`. */
+    /** Restores the declared `defaultValue`, like a native input's own. */
     formResetCallback(): void;
     /**
-     * @internal Sets the joined value, truncated to `length`, dispatching
-     * `value-change` synchronously (not via Lit's async `updated()` lifecycle)
-     * so callers observing the event right after a keystroke or paste see it
-     * without awaiting a render.
+     * @internal Sets joined value (truncated), dispatching `value-change` synchronously,
+     * not via async `updated()`.
      */
     setValue(next: string): void;
+    /**
+     * Fixed-length array rebuilt when it disagrees with `value` (outside write, reset,
+     * `length` rebound).
+     */
+    private writtenSlots;
+    private get slots();
+    private writeSlots;
+    /**
+     * @internal Gets character at `index` from slot array (handles holes).
+     */
+    charAt(index: number): string;
+    /** @internal Writes one box's character (`''` clears it) and publishes the joined value. */
+    setCharAt(index: number, char: string): void;
+    /**
+     * @internal Writes consecutive boxes starting at `index`; returns last index written (paste path).
+     */
+    fillFrom(index: number, chars: string): number;
     /**
      * @internal Cleans pasted text through the consumer's `sanitize` hook, before
      * `<skdx-pin-input-field>` applies the `type="numeric"` digit filter.
      */
     sanitizePaste(pasted: string): string;
     /**
-     * The form this pin input submits into. `<skdx-form>` is not a native form
-     * (it has no `requestSubmit`), so its own `trySubmit()` is the entry point —
-     * the same call `<skdx-form-submit>`'s click handler makes. Otherwise the
-     * native owner from `ElementInternals`, falling back to the nearest
-     * ancestor `<form>` where `internals.form` is unavailable.
+     * Tries `skdx-form.trySubmit()` first, then native form or ancestor `<form>`.
      */
     private submitForm;
     /** @internal Focuses the field at `index`, if it exists. */

package/dist/pin-input/PinInput.js

@@ -1,5 +1,5 @@
-var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(o,a,e,r)=>{for(var l=r>1?void 0:r?h(a,e):a,u=o.length-1,n;u>=0;u--)(n=o[u])&&(l=(r?n(a,e,l):n(l))||l);return r&&l&&m(a,e,l),l};import{css as d,html as c,LitElement as f}from"lit";import{property as i}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";import{FormAssociated as v}from"../internal/form-associated.js";import{reflectHostState as y}from"../internal/part.js";var t=class extends v(f){constructor(){super(...arguments);this.value="";this.length=6;this.type="text";this.mask=!1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.autoSubmit=!1}updated(e){e.size>0&&this.dispatchEvent(new CustomEvent("skdx-pin-input-internal-update")),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),y(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value),this.setValueMissing(this.required&&this.value.length<this.length,`Please fill in all ${this.length} characters.`,this.querySelector("skdx-pin-input-field input"))}formResetCallback(){this.value=this.getAttribute("value")??""}setValue(e){let r=e.slice(0,this.length);if(r===this.value)return;let l=this.value.length===this.length;this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0})),!(r.length!==this.length||l)&&(this.dispatchEvent(new CustomEvent("value-complete",{detail:r,bubbles:!0,composed:!0})),this.autoSubmit&&this.submitForm())}sanitizePaste(e){return this.sanitize?.(e)??e}submitForm(){let e=this.closest("skdx-form");if(e){e.trySubmit?.();return}(this.form??this.closest("form"))?.requestSubmit()}focusIndex(e){Array.from(this.querySelectorAll("skdx-pin-input-field"))[e]?.focus()}render(){return c`<slot></slot>`}};t.styles=d`
+var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(u,n,e,i)=>{for(var l=i>1?void 0:i?m(n,e):n,a=u.length-1,o;a>=0;a--)(o=u[a])&&(l=(i?o(n,e,l):o(l))||l);return i&&l&&f(n,e,l),l};import{css as p,html as c,LitElement as v}from"lit";import{property as r}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{FormAssociated as y}from"../internal/form-associated.js";import{reflectHostState as A}from"../internal/part.js";import{isDevMode as w}from"../utils/is-dev-mode.js";import{pinCharAcceptor as E}from"./charFilter.js";import{pinInputDigitLabel as C}from"./digitLabel.js";import{fillPinInputAnatomy as q,PIN_INPUT_ANATOMY_GENERATED as F}from"./PinInputAnatomy.js";import{joinPinSlots as h,toPinSlots as B}from"./slots.js";var t=class extends y(v){constructor(){super(...arguments);this.value="";this.defaultValue="";this.length=6;this.type="text";this.otp=!0;this.autoFocus=!1;this.blurOnComplete=!1;this.selectOnFocus=!1;this.mask=!1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.autoSubmit=!1;this.digitLabel=C;this.seeded=!1;this.fillAnatomy=()=>{g(this,F)||q(this)};this.writtenSlots=[]}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.setAttribute("role","group"),queueMicrotask(this.fillAnatomy)}firstUpdated(){this.autoFocus&&Promise.all(Array.from(this.querySelectorAll("skdx-pin-input-field")).map(i=>i.updateComplete)).then(()=>this.focus());let e=this.querySelectorAll("skdx-pin-input-field").length;e!==0&&e!==this.length&&w()&&console.warn(`<skdx-pin-input>: ${e} <skdx-pin-input-field>${e===1?"":"s"} rendered but length is ${this.length}. Render exactly one field per position, with contiguous \`index\` values from 0 to ${this.length-1} \u2014 otherwise the value can never complete and value-complete never fires.`)}clear(){this.setValue("")}focus(){this.focusIndex(0)}accepts(e){return E(this.type,this.pattern)(e)}reportInvalid(e,i){this.dispatchEvent(new CustomEvent("value-invalid",{detail:{value:e,index:i},bubbles:!0,composed:!0}))}updated(e){e.size>0&&this.dispatchEvent(new CustomEvent("skdx-pin-input-internal-update")),e.has("length")&&this.fillAnatomy(),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),A(this,{"aria-invalid":this.invalid?"true":null,"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value),this.setValueMissing(this.required&&this.value.length<this.length,`Please fill in all ${this.length} characters.`,this.querySelector("skdx-pin-input-field input"))}formResetCallback(){this.value=this.defaultValue}setValue(e){let i=e.slice(0,this.length);if(i===this.value)return;let l=this.value.length===this.length;if(this.value=i,this.dispatchEvent(new CustomEvent("value-change",{detail:i,bubbles:!0,composed:!0})),!(i.length!==this.length||l)){if(this.dispatchEvent(new CustomEvent("value-complete",{detail:i,bubbles:!0,composed:!0})),this.blurOnComplete){let a=Array.from(this.querySelectorAll("skdx-pin-input-field input"));(a.find(d=>d===this.ownerDocument.activeElement)??a[a.length-1])?.blur()}this.autoSubmit&&this.submitForm()}}get slots(){return this.writtenSlots.length===this.length&&h(this.writtenSlots)===this.value?this.writtenSlots:B(this.value,this.length)}writeSlots(e){let i=[...this.slots];e(i),this.writtenSlots=i,this.setValue(h(i))}charAt(e){return this.slots[e]??""}setCharAt(e,i){this.writeSlots(l=>{l[e]=i})}fillFrom(e,i){let l=e-1;return this.writeSlots(a=>{for(let o=0;o<i.length&&e+o<this.length;o++)a[e+o]=i[o],l=e+o}),l}sanitizePaste(e){return this.sanitize?.(e)??e}submitForm(){let e=this.closest("skdx-form");if(e){e.trySubmit?.();return}(this.form??this.closest("form"))?.requestSubmit()}focusIndex(e){Array.from(this.querySelectorAll("skdx-pin-input-field"))[e]?.focus()}render(){return c`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=p`
     :host {
       display: contents;
     }
-  `,s([i({type:String})],t.prototype,"value",2),s([i({type:Number})],t.prototype,"length",2),s([i({type:String})],t.prototype,"type",2),s([i({type:Boolean,reflect:!0})],t.prototype,"mask",2),s([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),s([i({type:Boolean,reflect:!0})],t.prototype,"invalid",2),s([i({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),s([i({type:Boolean,reflect:!0})],t.prototype,"required",2),s([i({type:String,reflect:!0})],t.prototype,"name",2),s([i({attribute:"required-message"})],t.prototype,"requiredMessage",2),s([i({type:Boolean,reflect:!0,attribute:"auto-submit"})],t.prototype,"autoSubmit",2),s([i({attribute:!1})],t.prototype,"sanitize",2),t=s([p("skdx-pin-input","pin-input","root")],t);export{t as SkdxPinInput};
+  `,s([r({type:String})],t.prototype,"value",2),s([r({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),s([r({type:Number})],t.prototype,"length",2),s([r({type:String})],t.prototype,"type",2),s([r({type:String})],t.prototype,"pattern",2),s([r({type:String})],t.prototype,"placeholder",2),s([r({type:Boolean,reflect:!0})],t.prototype,"otp",2),s([r({type:Boolean,reflect:!0,attribute:"auto-focus"})],t.prototype,"autoFocus",2),s([r({type:Boolean,reflect:!0,attribute:"blur-on-complete"})],t.prototype,"blurOnComplete",2),s([r({type:Boolean,reflect:!0,attribute:"select-on-focus"})],t.prototype,"selectOnFocus",2),s([r({type:Boolean,reflect:!0})],t.prototype,"mask",2),s([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),s([r({type:Boolean,reflect:!0})],t.prototype,"invalid",2),s([r({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),s([r({type:Boolean,reflect:!0})],t.prototype,"required",2),s([r({type:String,reflect:!0})],t.prototype,"name",2),s([r({attribute:"required-message"})],t.prototype,"requiredMessage",2),s([r({type:Boolean,reflect:!0,attribute:"auto-submit"})],t.prototype,"autoSubmit",2),s([r({attribute:!1})],t.prototype,"sanitize",2),s([r({attribute:!1})],t.prototype,"digitLabel",2),t=s([b("skdx-pin-input","pin-input","root")],t);export{t as SkdxPinInput};

package/dist/pin-input/PinInputAnatomy.cjs

@@ -0,0 +1,4 @@
+"use strict";var d=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var x=(n,t)=>{for(var i in t)d(n,i,{get:t[i],enumerable:!0})},l=(n,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of o(t))!u.call(n,e)&&e!==i&&d(n,e,{get:()=>t[e],enumerable:!(r=a(t,e))||r.enumerable});return n};var m=n=>l(d({},"__esModule",{value:!0}),n);var k={};x(k,{PIN_INPUT_ANATOMY_GENERATED:()=>f,fillPinInputAnatomy:()=>s});module.exports=m(k);var p=require("lit"),P=require("./PinInputField.cjs"),f="data-skdx-pin-input-generated";function s(n){(0,p.render)(p.html`${Array.from({length:n.length},(t,i)=>p.html`<skdx-pin-input-field
+          index=${i}
+          data-skdx-pin-input-generated
+        ></skdx-pin-input-field>`)}`,n,{host:n})}0&&(module.exports={PIN_INPUT_ANATOMY_GENERATED,fillPinInputAnatomy});

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

@@ -0,0 +1,13 @@
+import type { SkdxPinInput } from './PinInput.cjs';
+import './PinInputField.cjs';
+/** @internal Marks a direct child of `<skdx-pin-input>` this module generated. */
+export declare const PIN_INPUT_ANATOMY_GENERATED = "data-skdx-pin-input-generated";
+/**
+ * Builds the canonical anatomy: `length` Field boxes, indexed `0` through
+ * `length - 1`.
+ *
+ * Only called by `<skdx-pin-input>` itself, once it has established that it
+ * has no consumer-authored composition.
+ * @internal
+ */
+export declare function fillPinInputAnatomy(root: SkdxPinInput): void;

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

@@ -0,0 +1,13 @@
+import type { SkdxPinInput } from './PinInput.js';
+import './PinInputField.js';
+/** @internal Marks a direct child of `<skdx-pin-input>` this module generated. */
+export declare const PIN_INPUT_ANATOMY_GENERATED = "data-skdx-pin-input-generated";
+/**
+ * Builds the canonical anatomy: `length` Field boxes, indexed `0` through
+ * `length - 1`.
+ *
+ * Only called by `<skdx-pin-input>` itself, once it has established that it
+ * has no consumer-authored composition.
+ * @internal
+ */
+export declare function fillPinInputAnatomy(root: SkdxPinInput): void;

package/dist/pin-input/PinInputAnatomy.js

@@ -0,0 +1,4 @@
+import{html as t,render as e}from"lit";import"./PinInputField.js";var a="data-skdx-pin-input-generated";function o(n){e(t`${Array.from({length:n.length},(p,i)=>t`<skdx-pin-input-field
+          index=${i}
+          data-skdx-pin-input-generated
+        ></skdx-pin-input-field>`)}`,n,{host:n})}export{a as PIN_INPUT_ANATOMY_GENERATED,o as fillPinInputAnatomy};

package/dist/pin-input/PinInputField.cjs

@@ -1,21 +1,22 @@
-"use strict";var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var $=(s,r)=>{for(var t in r)h(s,t,{get:r[t],enumerable:!0})},k=(s,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of b(r))!g.call(s,i)&&i!==t&&h(s,i,{get:()=>r[i],enumerable:!(e=c(r,i))||e.enumerable});return s};var C=s=>k(h({},"__esModule",{value:!0}),s),p=(s,r,t,e)=>{for(var i=e>1?void 0:e?c(r,t):r,a=s.length-1,d;a>=0;a--)(d=s[a])&&(i=(e?d(r,t,i):d(i))||i);return e&&i&&h(r,t,i),i};var L={};$(L,{SkdxPinInputField:()=>n});module.exports=C(L);var o=require("lit"),u=require("lit/decorators.js"),f=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),v=require("../internal/direction.cjs"),x=require("../internal/part.cjs"),y=require("../internal/styles.cjs");var E=/^[0-9]$/,n=class extends o.LitElement{constructor(){super(...arguments);this.index=0;this.hostLabel=null;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{if(!this.root||this.root.disabled)return;let e=t.target.value;if(e===""){this.commitChar(""),this.requestUpdate();return}if(this.root.type==="numeric"&&!E.test(e)){this.requestUpdate();return}this.commitChar(e),this.index<this.root.length-1&&this.root.focusIndex(this.index+1)};this.handleKeydown=t=>{if(!this.root||this.root.disabled)return;let e=(0,v.directionalKey)(t.key,this);if(e==="Backspace"){if(t.preventDefault(),this.char)this.commitChar("");else if(this.index>0){let i=this.root.value.split("");i[this.index-1]="",this.root.setValue(i.join("")),this.root.focusIndex(this.index-1)}}else e==="ArrowLeft"&&this.index>0?(t.preventDefault(),this.root.focusIndex(this.index-1)):e==="ArrowRight"&&this.index<this.root.length-1&&(t.preventDefault(),this.root.focusIndex(this.index+1))};this.handlePaste=t=>{if(!this.root||this.root.disabled)return;t.preventDefault();let e=this.root.sanitizePaste(t.clipboardData?.getData("text")??""),i=this.root.type==="numeric"?e.replace(/[^0-9]/g,""):e;if(!i)return;let a=this.root.value.split(""),d=this.index-1;for(let l=0;l<i.length&&this.index+l<this.root.length;l++)a[this.index+l]=i[l],d=this.index+l;this.root.setValue(a.join("")),this.root.focusIndex(Math.min(d+1,this.root.length-1))}}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),(0,y.installLightDomStyles)(),this.root=this.closest("skdx-pin-input"),!this.root)throw new Error("<skdx-pin-input-field> must be used inside <skdx-pin-input>.");this.root.addEventListener("skdx-pin-input-internal-update",this.handleRootUpdate),this.hostLabel=(0,f.takeHostAriaLabel)(this)}disconnectedCallback(){this.root?.removeEventListener("skdx-pin-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}focus(){this.querySelector("input")?.focus()}get char(){return this.root?.value[this.index]??""}commitChar(t){if(!this.root)return;let e=this.root.value.split("");e[this.index]=t,this.root.setValue(e.join(""))}updated(){(0,x.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let t=this.root;if(!t)return o.html``;let e=this.char!=="";return o.html`
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(o,r)=>{for(var t in r)l(o,t,{get:r[t],enumerable:!0})},$=(o,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of y(r))!b.call(o,i)&&i!==t&&l(o,i,{get:()=>r[i],enumerable:!(e=u(r,i))||e.enumerable});return o};var k=o=>$(l({},"__esModule",{value:!0}),o),h=(o,r,t,e)=>{for(var i=e>1?void 0:e?u(r,t):r,d=o.length-1,a;d>=0;d--)(a=o[d])&&(i=(e?a(r,t,i):a(i))||i);return e&&i&&l(r,t,i),i};var L={};g(L,{SkdxPinInputField:()=>n});module.exports=k(L);var s=require("lit"),p=require("lit/decorators.js"),c=require("../internal/aria-label.cjs"),f=require("../internal/define.cjs"),m=require("../internal/direction.cjs"),x=require("../internal/part.cjs"),v=require("../internal/styles.cjs");var n=class extends s.LitElement{constructor(){super(...arguments);this.index=0;this.hostLabel=null;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{if(!this.root||this.root.disabled)return;let e=t.target.value;if(e===""){this.commitChar(""),this.requestUpdate();return}if(!this.root.accepts(e)){t.target.value=this.char,this.requestUpdate(),this.root.reportInvalid(e,this.index);return}this.commitChar(e),this.index<this.root.length-1&&this.root.focusIndex(this.index+1)};this.handleFocus=t=>{this.root?.selectOnFocus&&t.target.select()};this.handleKeydown=t=>{if(!this.root||this.root.disabled)return;let e=(0,m.directionalKey)(t.key,this);if(e==="Backspace")t.preventDefault(),this.char?this.commitChar(""):this.index>0&&(this.root.setCharAt(this.index-1,""),this.root.focusIndex(this.index-1));else if(e==="Delete"){if(this.root.readOnly)return;t.preventDefault(),this.char&&this.commitChar("")}else e==="ArrowLeft"&&this.index>0?(t.preventDefault(),this.root.focusIndex(this.index-1)):e==="ArrowRight"&&this.index<this.root.length-1&&(t.preventDefault(),this.root.focusIndex(this.index+1))};this.handlePaste=t=>{if(!this.root||this.root.disabled)return;t.preventDefault();let e=this.root.sanitizePaste(t.clipboardData?.getData("text")??""),i="";for(let a of e)this.root.accepts(a)?i+=a:this.root.reportInvalid(a,Math.min(this.index+i.length,this.root.length-1));if(!i)return;let d=this.root.fillFrom(this.index,i);this.root.focusIndex(Math.min(d+1,this.root.length-1))}}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),(0,v.installLightDomStyles)(),this.root=this.closest("skdx-pin-input"),!this.root)throw new Error("<skdx-pin-input-field> must be used inside <skdx-pin-input>.");this.root.addEventListener("skdx-pin-input-internal-update",this.handleRootUpdate),this.hostLabel=(0,c.takeHostAriaLabel)(this)}disconnectedCallback(){this.root?.removeEventListener("skdx-pin-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}focus(){this.querySelector("input")?.focus()}get char(){return this.root?.charAt(this.index)??""}commitChar(t){this.root?.setCharAt(this.index,t)}updated(){(0,x.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let t=this.root;if(!t)return s.html``;let e=this.char!=="";return s.html`
       <input
         part="field"
         inputmode=${t.type==="numeric"?"numeric":"text"}
-        autocomplete=${this.index===0?"one-time-code":"off"}
+        autocomplete=${t.otp&&this.index===0?"one-time-code":"off"}
         type=${t.mask&&e?"password":"text"}
+        placeholder=${t.placeholder??s.nothing}
         maxlength="1"
-        aria-label=${this.hostLabel??o.nothing}
+        aria-label=${this.hostLabel??t.digitLabel(this.index+1,t.length)}
         ?disabled=${t.disabled}
         ?readonly=${t.readOnly}
-        aria-invalid=${t.invalid?"true":o.nothing}
-        aria-readonly=${t.readOnly?"true":o.nothing}
-        data-disabled=${t.disabled?"":o.nothing}
-        data-invalid=${t.invalid?"":o.nothing}
-        data-readonly=${t.readOnly?"":o.nothing}
+        aria-readonly=${t.readOnly?"true":s.nothing}
+        data-disabled=${t.disabled?"":s.nothing}
+        data-invalid=${t.invalid?"":s.nothing}
+        data-readonly=${t.readOnly?"":s.nothing}
         .value=${this.char}
         @input=${this.handleInput}
         @keydown=${this.handleKeydown}
         @paste=${this.handlePaste}
+        @focus=${this.handleFocus}
       />
-    `}};p([(0,u.property)({type:Number})],n.prototype,"index",2),p([(0,u.state)()],n.prototype,"hostLabel",2),n=p([(0,m.customElement)("skdx-pin-input-field","pin-input","field")],n);0&&(module.exports={SkdxPinInputField});
+    `}};h([(0,p.property)({type:Number})],n.prototype,"index",2),h([(0,p.state)()],n.prototype,"hostLabel",2),n=h([(0,f.customElement)("skdx-pin-input-field","pin-input","field")],n);0&&(module.exports={SkdxPinInputField});