@skdx/web-components 0.28.0 → 0.30.0

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

@@ -1,8 +1,6 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 /**
- * Native `<input>` for `<skdx-password-input>`. Root owns type: password / text
- * per visibility toggle. `autocomplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5).
- * Renders into light DOM; `aria-label` moves to `<input>`.
+ * Native `<input>` for `<skdx-password-input>`, switching type between `password` and `text` per the visibility toggle.
  *
  * @example
  * ```html
@@ -17,7 +15,7 @@ import { LitElement, nothing } from 'lit';
  */
 export declare class SkdxPasswordInputField extends LitElement {
     /** Light DOM, for the reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     /** Forward focus to the native `<input>`. */
     focus(options?: FocusOptions): void;
     /**
@@ -30,6 +28,28 @@ export declare class SkdxPasswordInputField extends LitElement {
      * @default 'current-password' (WCAG 2.1 SC 1.3.5); set `new-password` for sign-up / change forms.
      */
     autoComplete: string;
+    /** Native `<input>` `pattern` — a regular expression the value has to match for constraint validation. @default undefined */
+    pattern?: string;
+    /**
+     * Native `<input>` `minlength` — shortest value constraint validation accepts, reported as `tooShort`; only fires after a user edit.
+     * @default undefined — no lower bound on the value's length.
+     */
+    minLength?: number;
+    /**
+     * Native `<input>` `maxlength` — longest value the field accepts, reported as `tooLong`; the browser caps typing and truncates pastes.
+     * @default undefined — no upper bound on the value's length.
+     */
+    maxLength?: number;
+    /**
+     * Visual weight the skin renders, reflected as `data-variant`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
     private root;
     /** A consumer-supplied `aria-label`, moved off the host so it names the `<input>` that carries the role. */
     private label;
@@ -38,7 +58,7 @@ export declare class SkdxPasswordInputField extends LitElement {
     disconnectedCallback(): void;
     private readonly handleInput;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/password-input/PasswordInputField.js

@@ -1,19 +1,22 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,a,e,t)=>{for(var i=t>1?void 0:t?h(a,e):a,n=l.length-1,d;n>=0;n--)(d=l[n])&&(i=(t?d(a,e,i):d(i))||i);return t&&i&&u(a,e,i),i};import{html as c,LitElement as v,nothing as r}from"lit";import{property as p}from"lit/decorators.js";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{customElement as b}from"../internal/define.js";import{installLightDomStyles as f}from"../internal/styles.js";var o=class extends v{constructor(){super(...arguments);this.autoComplete="current-password";this.root=null;this.label=null;this.onRootChange=()=>this.requestUpdate();this.handleInput=e=>{this.root?.setValue(e.target.value)}}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){if(super.connectedCallback(),f(),this.root=this.closest("skdx-password-input"),!this.root)throw new Error("<skdx-password-input-field> must be used inside <skdx-password-input>.");this.label=m(this)??this.label,this.root.addEventListener("skdx-text-field-internal-update",this.onRootChange)}disconnectedCallback(){this.root?.removeEventListener("skdx-text-field-internal-update",this.onRootChange),super.disconnectedCallback()}updated(){this.root?.syncFormState()}render(){let e=this.root;if(!e)return r;let t=e.visible;return c`
+var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(s,l,t,n)=>{for(var a=n>1?void 0:n?h(l,t):l,d=s.length-1,p;d>=0;d--)(p=s[d])&&(a=(n?p(l,t,a):p(a))||a);return n&&a&&m(l,t,a),a};import{html as c,LitElement as v,nothing as i}from"lit";import{property as o}from"lit/decorators.js";import{takeHostAriaLabel as g}from"../internal/aria-label.js";import{customElement as b}from"../internal/define.js";import{installLightDomStyles as f}from"../internal/light-dom-styles.js";import{TEXT_FIELD_FAMILY as u}from"../text-field/family.js";var e=class extends v{constructor(){super(...arguments);this.autoComplete="current-password";this.root=null;this.label=null;this.onRootChange=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setValue(t.target.value)}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),f(),this.root=this.closest("skdx-password-input"),!this.root)throw new Error("<skdx-password-input-field> must be used inside <skdx-password-input>.");this.label=g(this)??this.label,this.root.addEventListener(u.event,this.onRootChange)}disconnectedCallback(){this.root?.removeEventListener(u.event,this.onRootChange),super.disconnectedCallback()}updated(){this.root?.syncFormState()}render(){let t=this.root;if(!t)return i;let n=t.visible;return c`
       <input
         part="input"
-        id=${e.inputId}
-        type=${t?"text":"password"}
+        id=${t.inputId}
+        type=${n?"text":"password"}
         autocomplete=${this.autoComplete}
-        placeholder=${this.placeholder??r}
-        aria-label=${this.label??r}
-        .value=${e.value}
-        ?disabled=${e.disabled}
-        ?readonly=${e.readOnly}
-        ?required=${e.required}
-        aria-invalid=${e.invalid?"true":r}
-        data-state=${t?"visible":"hidden"}
-        data-disabled=${e.disabled?"":r}
-        data-invalid=${e.invalid?"":r}
+        placeholder=${this.placeholder??i}
+        pattern=${this.pattern??i}
+        minlength=${this.minLength??i}
+        maxlength=${this.maxLength??i}
+        aria-label=${this.label??i}
+        .value=${t.value}
+        ?disabled=${t.disabled}
+        ?readonly=${t.readOnly}
+        ?required=${t.required}
+        aria-invalid=${t.invalid?"true":i}
+        data-state=${n?"visible":"hidden"}
+        data-disabled=${t.disabled?"":i}
+        data-invalid=${t.invalid?"":i}
         @input=${this.handleInput}
       />
-    `}};s([p({type:String})],o.prototype,"placeholder",2),s([p({type:String,attribute:"autocomplete"})],o.prototype,"autoComplete",2),o=s([b("skdx-password-input-field","password-input","field")],o);export{o as SkdxPasswordInputField};
+    `}};r([o({type:String})],e.prototype,"placeholder",2),r([o({type:String,attribute:"autocomplete"})],e.prototype,"autoComplete",2),r([o({type:String,reflect:!0})],e.prototype,"pattern",2),r([o({type:Number,reflect:!0,attribute:"minlength"})],e.prototype,"minLength",2),r([o({type:Number,reflect:!0,attribute:"maxlength"})],e.prototype,"maxLength",2),r([o({type:String,reflect:!0,attribute:"data-variant"})],e.prototype,"variant",2),r([o({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),e=r([b("skdx-password-input-field","password-input","field")],e);export{e as SkdxPasswordInputField};

package/dist/password-input/PasswordInputToggle.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(s,o)=>{for(var t in o)d(s,t,{get:o[t],enumerable:!0})},g=(s,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of m(o))!k.call(s,e)&&e!==t&&d(s,e,{get:()=>o[e],enumerable:!(i=c(o,e))||i.enumerable});return s};var x=s=>g(d({},"__esModule",{value:!0}),s),h=(s,o,t,i)=>{for(var e=i>1?void 0:i?c(o,t):o,n=s.length-1,p;n>=0;n--)(p=s[n])&&(e=(i?p(o,t,e):p(e))||e);return i&&e&&d(o,t,e),e};var C={};f(C,{SkdxPasswordInputToggle:()=>l});module.exports=x(C);var r=require("lit"),b=require("../internal/aria-label.cjs"),u=require("../internal/define.cjs"),v=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var l=class extends r.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootChange=()=>this.requestUpdate();this.handleClick=()=>{let t=this.root;t&&t.setVisible(!t.visible)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-password-input"),!this.root)throw new Error("<skdx-password-input-toggle> must be used inside <skdx-password-input>.");this.label=(0,b.takeHostAriaLabel)(this)??this.label,this.root.addEventListener("skdx-text-field-internal-update",this.onRootChange)}disconnectedCallback(){this.root?.removeEventListener("skdx-text-field-internal-update",this.onRootChange),super.disconnectedCallback()}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null})}render(){let t=this.root;if(!t)return r.nothing;let i=t.visible,e=t.disabled;return r.html`
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var k=(s,o)=>{for(var t in o)n(s,t,{get:o[t],enumerable:!0})},C=(s,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of f(o))!g.call(s,e)&&e!==t&&n(s,e,{get:()=>o[e],enumerable:!(i=h(o,e))||i.enumerable});return s};var y=s=>C(n({},"__esModule",{value:!0}),s),b=(s,o,t,i)=>{for(var e=i>1?void 0:i?h(o,t):o,d=s.length-1,p;d>=0;d--)(p=s[d])&&(e=(i?p(o,t,e):p(e))||e);return i&&e&&n(o,t,e),e};var w={};k(w,{SkdxPasswordInputToggle:()=>l});module.exports=y(w);var r=require("lit"),u=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),v=require("../internal/part.cjs"),a=require("../internal/styles.cjs"),c=require("../text-field/family.cjs");var l=class extends r.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootChange=()=>this.requestUpdate();this.handleClick=()=>{let t=this.root;t&&t.setVisible(!t.visible)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-password-input"),!this.root)throw new Error("<skdx-password-input-toggle> must be used inside <skdx-password-input>.");this.label=(0,u.takeHostAriaLabel)(this)??this.label,this.root.addEventListener(c.TEXT_FIELD_FAMILY.event,this.onRootChange)}disconnectedCallback(){this.root?.removeEventListener(c.TEXT_FIELD_FAMILY.event,this.onRootChange),super.disconnectedCallback()}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null})}render(){let t=this.root;if(!t)return r.nothing;let i=t.visible,e=t.disabled;return r.html`
       <button
         part="toggle"
         type="button"
@@ -15,4 +15,4 @@
       :host {
         display: contents;
       }
-    `,a.controlBoxOnHost],l=h([(0,u.customElement)("skdx-password-input-toggle","password-input","toggle")],l);0&&(module.exports={SkdxPasswordInputToggle});
+    `,a.controlBoxOnHost],l=b([(0,m.customElement)("skdx-password-input-toggle","password-input","toggle")],l);0&&(module.exports={SkdxPasswordInputToggle});

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

@@ -1,9 +1,6 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 /**
- * Reveal button for `<skdx-password-input>` with `aria-pressed` toggle state.
- * Must be in tab order (revealing is the only keyboard check for typed text, WCAG 2.1.1).
- * Name stays static ("Show password"); `aria-pressed` indicates state.
- * Write `aria-label` on the host to localize.
+ * Reveal button for `<skdx-password-input>` with `aria-pressed` toggle state; write `aria-label` on the host to localize.
  *
  * @example
  * ```html
@@ -25,7 +22,7 @@ export declare class SkdxPasswordInputToggle extends LitElement {
     disconnectedCallback(): void;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,9 +1,6 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 /**
- * Reveal button for `<skdx-password-input>` with `aria-pressed` toggle state.
- * Must be in tab order (revealing is the only keyboard check for typed text, WCAG 2.1.1).
- * Name stays static ("Show password"); `aria-pressed` indicates state.
- * Write `aria-label` on the host to localize.
+ * Reveal button for `<skdx-password-input>` with `aria-pressed` toggle state; write `aria-label` on the host to localize.
  *
  * @example
  * ```html
@@ -25,7 +22,7 @@ export declare class SkdxPasswordInputToggle extends LitElement {
     disconnectedCallback(): void;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/password-input/PasswordInputToggle.js

@@ -1,4 +1,4 @@
-var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(r,s,t,o)=>{for(var e=o>1?void 0:o?c(s,t):s,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(o?a(s,t,e):a(e))||e);return o&&e&&p(s,t,e),e};import{css as h,html as b,LitElement as u,nothing as n}from"lit";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as m}from"../internal/define.js";import{reflectHostState as k}from"../internal/part.js";import{controlBoxOnHost as f,hiddenHostStyles as g,resetNativeControl as x}from"../internal/styles.js";var i=class extends u{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootChange=()=>this.requestUpdate();this.handleClick=()=>{let t=this.root;t&&t.setVisible(!t.visible)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-password-input"),!this.root)throw new Error("<skdx-password-input-toggle> must be used inside <skdx-password-input>.");this.label=v(this)??this.label,this.root.addEventListener("skdx-text-field-internal-update",this.onRootChange)}disconnectedCallback(){this.root?.removeEventListener("skdx-text-field-internal-update",this.onRootChange),super.disconnectedCallback()}updated(){k(this,{"data-disabled":this.root?.disabled?"":null})}render(){let t=this.root;if(!t)return n;let o=t.visible,e=t.disabled;return b`
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,s,t,o)=>{for(var e=o>1?void 0:o?h(s,t):s,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(o?a(s,t,e):a(e))||e);return o&&e&&c(s,t,e),e};import{css as b,html as u,LitElement as m,nothing as d}from"lit";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as f}from"../internal/define.js";import{reflectHostState as g}from"../internal/part.js";import{controlBoxOnHost as k,hiddenHostStyles as C,resetNativeControl as y}from"../internal/styles.js";import{TEXT_FIELD_FAMILY as p}from"../text-field/family.js";var i=class extends m{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootChange=()=>this.requestUpdate();this.handleClick=()=>{let t=this.root;t&&t.setVisible(!t.visible)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-password-input"),!this.root)throw new Error("<skdx-password-input-toggle> must be used inside <skdx-password-input>.");this.label=v(this)??this.label,this.root.addEventListener(p.event,this.onRootChange)}disconnectedCallback(){this.root?.removeEventListener(p.event,this.onRootChange),super.disconnectedCallback()}updated(){g(this,{"data-disabled":this.root?.disabled?"":null})}render(){let t=this.root;if(!t)return d;let o=t.visible,e=t.disabled;return u`
       <button
         part="toggle"
         type="button"
@@ -6,13 +6,13 @@ var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(r,s,t,o
         aria-label=${this.label??t.revealLabel}
         ?disabled=${e}
         data-state=${o?"visible":"hidden"}
-        data-disabled=${e?"":n}
+        data-disabled=${e?"":d}
         @click=${this.handleClick}
       >
         <slot></slot>
       </button>
-    `}};i.styles=[x,g,h`
+    `}};i.styles=[y,C,b`
       :host {
         display: contents;
       }
-    `,f],i=d([m("skdx-password-input-toggle","password-input","toggle")],i);export{i as SkdxPasswordInputToggle};
+    `,k],i=n([f("skdx-password-input-toggle","password-input","toggle")],i);export{i as SkdxPasswordInputToggle};

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

@@ -1,9 +1,6 @@
 /**
  * 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';

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

@@ -1,9 +1,6 @@
 /**
  * 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';

package/dist/pin-input/PinInput.cjs

@@ -1,5 +1,5 @@
-"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`
+"use strict";var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var B=(a,o)=>{for(var e in o)d(a,e,{get:o[e],enumerable:!0})},M=(a,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of V(o))!T.call(a,l)&&l!==e&&d(a,l,{get:()=>o[l],enumerable:!(i=v(o,l))||i.enumerable});return a};var C=a=>M(d({},"__esModule",{value:!0}),a),r=(a,o,e,i)=>{for(var l=i>1?void 0:i?v(o,e):o,u=a.length-1,n;u>=0;u--)(n=a[u])&&(l=(i?n(o,e,l):n(l))||l);return i&&l&&d(o,e,l),l};var E={};B(E,{SkdxPinInput:()=>t});module.exports=C(E);var h=require("lit"),s=require("lit/decorators.js"),g=require("../internal/authored.cjs"),y=require("../internal/define.cjs"),b=require("../internal/dev-mode.cjs"),m=require("../internal/events.cjs"),A=require("../internal/form-associated.cjs"),q=require("../internal/part.cjs"),p=require("../internal/pin-chars.cjs"),w=require("./family.cjs"),c=require("./PinInputAnatomy.cjs"),f=require("./slots.cjs");var t=class extends(0,A.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=p.pinInputDigitLabel;this.seeded=!1;this.fillAnatomy=()=>{(0,g.hasAuthoredParts)(this,c.PIN_INPUT_ANATOMY_GENERATED)||(0,c.fillPinInputAnatomy)(this)};this.mountedValue="";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.mountedValue=this.value,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&&(0,b.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,p.pinCharAcceptor)(this.type,this.pattern)(e)}reportInvalid(e,i){(0,m.emit)(this,"value-invalid",{value:e,index:i})}updated(e){e.size>0&&w.PIN_INPUT_FAMILY.notify(this),e.has("length")&&this.fillAnatomy(),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),(0,q.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||this.mountedValue}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,(0,m.emit)(this,"value-change",i),!(i.length!==this.length||l)){if((0,m.emit)(this,"value-complete",i),this.blurOnComplete){let u=Array.from(this.querySelectorAll("skdx-pin-input-field input"));(u.find(F=>F===this.ownerDocument.activeElement)??u[u.length-1])?.blur()}this.autoSubmit&&this.submitForm()}}get slots(){return this.writtenSlots.length===this.length&&(0,f.joinPinSlots)(this.writtenSlots)===this.value?this.writtenSlots:(0,f.toPinSlots)(this.value,this.length)}writeSlots(e){let i=[...this.slots];e(i),this.writtenSlots=i,this.setValue((0,f.joinPinSlots)(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(u=>{for(let n=0;n<i.length&&e+n<this.length;n++)u[e+n]=i[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>`}};t.styles=h.css`
     :host {
       display: contents;
     }
-  `,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});
+  `,r([(0,s.property)({type:String})],t.prototype,"value",2),r([(0,s.property)({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),r([(0,s.property)({type:Number})],t.prototype,"length",2),r([(0,s.property)({type:String})],t.prototype,"type",2),r([(0,s.property)({type:String})],t.prototype,"pattern",2),r([(0,s.property)({type:String})],t.prototype,"placeholder",2),r([(0,s.property)({type:Boolean,reflect:!0})],t.prototype,"otp",2),r([(0,s.property)({type:Boolean,reflect:!0,attribute:"auto-focus"})],t.prototype,"autoFocus",2),r([(0,s.property)({type:Boolean,reflect:!0,attribute:"blur-on-complete"})],t.prototype,"blurOnComplete",2),r([(0,s.property)({type:Boolean,reflect:!0,attribute:"select-on-focus"})],t.prototype,"selectOnFocus",2),r([(0,s.property)({type:Boolean,reflect:!0})],t.prototype,"mask",2),r([(0,s.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([(0,s.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([(0,s.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([(0,s.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),r([(0,s.property)({type:String,reflect:!0})],t.prototype,"name",2),r([(0,s.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([(0,s.property)({type:Boolean,reflect:!0,attribute:"auto-submit"})],t.prototype,"autoSubmit",2),r([(0,s.property)({attribute:!1})],t.prototype,"sanitize",2),r([(0,s.property)({attribute:!1})],t.prototype,"digitLabel",2),r([(0,s.property)({type:String,reflect:!0,attribute:"data-density"})],t.prototype,"density",2),r([(0,s.property)({type:String,reflect:!0,attribute:"data-shape"})],t.prototype,"shape",2),r([(0,s.property)({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),t=r([(0,y.customElement)("skdx-pin-input","pin-input","root")],t);0&&(module.exports={SkdxPinInput});

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

@@ -1,12 +1,10 @@
-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) & {
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { type PinInputType } from '../internal/pin-chars.cjs';
+declare const SkdxPinInput_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * 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.
+ * Owns the joined PIN value as shared-state root for the input-field boxes, form-associated via `ElementInternals` with `name` for one entry.
  *
  * @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.
@@ -25,7 +23,11 @@ export declare class SkdxPinInput extends SkdxPinInput_base {
      * @default '' — an empty code.
      */
     defaultValue: string;
-    /** Number of character boxes rendered and the max length of `value`. @default 6 */
+    /**
+     * Number of character boxes rendered and the max length of `value`.
+     * @default 6
+     * @min 1
+     */
     length: number;
     /**
      * Which characters a box accepts; `pattern` overrides it entirely.
@@ -97,63 +99,57 @@ export declare class SkdxPinInput extends SkdxPinInput_base {
      * @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).
+     * Row spacing the skin applies, reflected as `data-density`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
      */
-    clear(): void;
+    density?: 'default' | 'compact' | 'loose' | (string & {}) | undefined;
     /**
-     * Moves focus into first box; overrides `HTMLElement.focus()` for `display: contents`.
+     * Corner rounding the skin applies, reflected as `data-shape`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
      */
-    focus(): void;
+    shape?: 'rounded' | 'square' | 'pill' | (string & {}) | undefined;
     /**
-     * @internal Whether a character passes the `type`/`pattern` filter — one
-     * predicate for typing and pasting, so the two can't disagree.
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
      */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+    private seeded;
+    private readonly fillAnatomy;
+    connectedCallback(): void;
+    private mountedValue;
+    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. */
     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 declared `defaultValue`, like a native input's own. */
+    /** Restores the declared `defaultValue`, like a native input's own; a pin given only a `value` attribute falls back to the code it mounted with. */
     formResetCallback(): void;
-    /**
-     * @internal Sets joined value (truncated), dispatching `value-change` synchronously,
-     * not via async `updated()`.
-     */
+    /** @internal Sets the joined value (truncated), dispatching `value-change` synchronously. */
     setValue(next: string): void;
-    /**
-     * Fixed-length array rebuilt when it disagrees with `value` (outside write, reset,
-     * `length` rebound).
-     */
+    /** 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).
-     */
+    /** @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).
-     */
+    /** @internal Writes consecutive boxes starting at `index`; returns last index written. */
     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.
-     */
+    /** @internal Cleans pasted text through the consumer's `sanitize` hook before the digit filter applies. */
     sanitizePaste(pasted: string): string;
-    /**
-     * Tries `skdx-form.trySubmit()` first, then native form or ancestor `<form>`.
-     */
+    /** Tries `skdx-form.trySubmit()` first, then native form or ancestor `<form>`. */
     private submitForm;
     /** @internal Focuses the field at `index`, if it exists. */
     focusIndex(index: number): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,12 +1,10 @@
-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) & {
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { type PinInputType } from '../internal/pin-chars.js';
+declare const SkdxPinInput_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * 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.
+ * Owns the joined PIN value as shared-state root for the input-field boxes, form-associated via `ElementInternals` with `name` for one entry.
  *
  * @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.
@@ -25,7 +23,11 @@ export declare class SkdxPinInput extends SkdxPinInput_base {
      * @default '' — an empty code.
      */
     defaultValue: string;
-    /** Number of character boxes rendered and the max length of `value`. @default 6 */
+    /**
+     * Number of character boxes rendered and the max length of `value`.
+     * @default 6
+     * @min 1
+     */
     length: number;
     /**
      * Which characters a box accepts; `pattern` overrides it entirely.
@@ -97,63 +99,57 @@ export declare class SkdxPinInput extends SkdxPinInput_base {
      * @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).
+     * Row spacing the skin applies, reflected as `data-density`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
      */
-    clear(): void;
+    density?: 'default' | 'compact' | 'loose' | (string & {}) | undefined;
     /**
-     * Moves focus into first box; overrides `HTMLElement.focus()` for `display: contents`.
+     * Corner rounding the skin applies, reflected as `data-shape`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
      */
-    focus(): void;
+    shape?: 'rounded' | 'square' | 'pill' | (string & {}) | undefined;
     /**
-     * @internal Whether a character passes the `type`/`pattern` filter — one
-     * predicate for typing and pasting, so the two can't disagree.
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
      */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+    private seeded;
+    private readonly fillAnatomy;
+    connectedCallback(): void;
+    private mountedValue;
+    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. */
     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 declared `defaultValue`, like a native input's own. */
+    /** Restores the declared `defaultValue`, like a native input's own; a pin given only a `value` attribute falls back to the code it mounted with. */
     formResetCallback(): void;
-    /**
-     * @internal Sets joined value (truncated), dispatching `value-change` synchronously,
-     * not via async `updated()`.
-     */
+    /** @internal Sets the joined value (truncated), dispatching `value-change` synchronously. */
     setValue(next: string): void;
-    /**
-     * Fixed-length array rebuilt when it disagrees with `value` (outside write, reset,
-     * `length` rebound).
-     */
+    /** 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).
-     */
+    /** @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).
-     */
+    /** @internal Writes consecutive boxes starting at `index`; returns last index written. */
     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.
-     */
+    /** @internal Cleans pasted text through the consumer's `sanitize` hook before the digit filter applies. */
     sanitizePaste(pasted: string): string;
-    /**
-     * Tries `skdx-form.trySubmit()` first, then native form or ancestor `<form>`.
-     */
+    /** Tries `skdx-form.trySubmit()` first, then native form or ancestor `<form>`. */
     private submitForm;
     /** @internal Focuses the field at `index`, if it exists. */
     focusIndex(index: number): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/pin-input/PinInput.js

@@ -1,5 +1,5 @@
-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`
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(u,n,e,r)=>{for(var l=r>1?void 0:r?p(n,e):n,a=u.length-1,o;a>=0;a--)(o=u[a])&&(l=(r?o(n,e,l):o(l))||l);return r&&l&&m(n,e,l),l};import{css as c,html as v,LitElement as g}from"lit";import{property as s}from"lit/decorators.js";import{hasAuthoredParts as y}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{isDevMode as A}from"../internal/dev-mode.js";import{emit as h}from"../internal/events.js";import{FormAssociated as q}from"../internal/form-associated.js";import{reflectHostState as w}from"../internal/part.js";import{pinCharAcceptor as F,pinInputDigitLabel as V}from"../internal/pin-chars.js";import{PIN_INPUT_FAMILY as T}from"./family.js";import{fillPinInputAnatomy as B,PIN_INPUT_ANATOMY_GENERATED as M}from"./PinInputAnatomy.js";import{joinPinSlots as f,toPinSlots as C}from"./slots.js";var t=class extends q(g){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=V;this.seeded=!1;this.fillAnatomy=()=>{y(this,M)||B(this)};this.mountedValue="";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.mountedValue=this.value,this.autoFocus&&Promise.all(Array.from(this.querySelectorAll("skdx-pin-input-field")).map(r=>r.updateComplete)).then(()=>this.focus());let e=this.querySelectorAll("skdx-pin-input-field").length;e!==0&&e!==this.length&&A()&&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 F(this.type,this.pattern)(e)}reportInvalid(e,r){h(this,"value-invalid",{value:e,index:r})}updated(e){e.size>0&&T.notify(this),e.has("length")&&this.fillAnatomy(),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),w(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||this.mountedValue}setValue(e){let r=e.slice(0,this.length);if(r===this.value)return;let l=this.value.length===this.length;if(this.value=r,h(this,"value-change",r),!(r.length!==this.length||l)){if(h(this,"value-complete",r),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&&f(this.writtenSlots)===this.value?this.writtenSlots:C(this.value,this.length)}writeSlots(e){let r=[...this.slots];e(r),this.writtenSlots=r,this.setValue(f(r))}charAt(e){return this.slots[e]??""}setCharAt(e,r){this.writeSlots(l=>{l[e]=r})}fillFrom(e,r){let l=e-1;return this.writeSlots(a=>{for(let o=0;o<r.length&&e+o<this.length;o++)a[e+o]=r[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 v`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=c`
     :host {
       display: contents;
     }
-  `,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};
+  `,i([s({type:String})],t.prototype,"value",2),i([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({type:Number})],t.prototype,"length",2),i([s({type:String})],t.prototype,"type",2),i([s({type:String})],t.prototype,"pattern",2),i([s({type:String})],t.prototype,"placeholder",2),i([s({type:Boolean,reflect:!0})],t.prototype,"otp",2),i([s({type:Boolean,reflect:!0,attribute:"auto-focus"})],t.prototype,"autoFocus",2),i([s({type:Boolean,reflect:!0,attribute:"blur-on-complete"})],t.prototype,"blurOnComplete",2),i([s({type:Boolean,reflect:!0,attribute:"select-on-focus"})],t.prototype,"selectOnFocus",2),i([s({type:Boolean,reflect:!0})],t.prototype,"mask",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([s({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([s({type:Boolean,reflect:!0})],t.prototype,"required",2),i([s({type:String,reflect:!0})],t.prototype,"name",2),i([s({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([s({type:Boolean,reflect:!0,attribute:"auto-submit"})],t.prototype,"autoSubmit",2),i([s({attribute:!1})],t.prototype,"sanitize",2),i([s({attribute:!1})],t.prototype,"digitLabel",2),i([s({type:String,reflect:!0,attribute:"data-density"})],t.prototype,"density",2),i([s({type:String,reflect:!0,attribute:"data-shape"})],t.prototype,"shape",2),i([s({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),t=i([b("skdx-pin-input","pin-input","root")],t);export{t as SkdxPinInput};

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

@@ -2,12 +2,5 @@ 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
- */
+/** @internal Builds the canonical anatomy: `length` Field boxes, indexed `0` through `length - 1`. */
 export declare function fillPinInputAnatomy(root: SkdxPinInput): void;

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

@@ -2,12 +2,5 @@ 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
- */
+/** @internal Builds the canonical anatomy: `length` Field boxes, indexed `0` through `length - 1`. */
 export declare function fillPinInputAnatomy(root: SkdxPinInput): void;