@skdx/web-components 0.26.0

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

@@ -0,0 +1,110 @@
+import { LitElement, type PropertyValues } from 'lit';
+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.
+ *
+ * @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.
+ *
+ * @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>
+ * ```
+ */
+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;
+    /** 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';
+    /** 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 */
+    invalid: boolean;
+    /** Makes every box read-only, still focusable but not editable. @default false */
+    readOnly: boolean;
+    /** Marks the field required for native form validation, until every box is filled. @default false */
+    required: boolean;
+    /** 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.`).
+     * @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()`.
+     * @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.
+     * @default undefined — pasted text is used as-is.
+     */
+    sanitize?: (pasted: string) => string;
+    protected updated(changed: PropertyValues): void;
+    private syncFormState;
+    /** Restores the code the `value` attribute declared, like a native input's `defaultValue`. */
+    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.
+     */
+    setValue(next: string): void;
+    /**
+     * @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.
+     */
+    private submitForm;
+    /** @internal Focuses the field at `index`, if it exists. */
+    focusIndex(index: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-pin-input': SkdxPinInput;
+    }
+}
+export {};

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

@@ -0,0 +1,110 @@
+import { LitElement, type PropertyValues } from 'lit';
+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.
+ *
+ * @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.
+ *
+ * @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>
+ * ```
+ */
+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;
+    /** 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';
+    /** 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 */
+    invalid: boolean;
+    /** Makes every box read-only, still focusable but not editable. @default false */
+    readOnly: boolean;
+    /** Marks the field required for native form validation, until every box is filled. @default false */
+    required: boolean;
+    /** 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.`).
+     * @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()`.
+     * @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.
+     * @default undefined — pasted text is used as-is.
+     */
+    sanitize?: (pasted: string) => string;
+    protected updated(changed: PropertyValues): void;
+    private syncFormState;
+    /** Restores the code the `value` attribute declared, like a native input's `defaultValue`. */
+    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.
+     */
+    setValue(next: string): void;
+    /**
+     * @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.
+     */
+    private submitForm;
+    /** @internal Focuses the field at `index`, if it exists. */
+    focusIndex(index: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-pin-input': SkdxPinInput;
+    }
+}
+export {};

package/dist/pin-input/PinInput.js

@@ -0,0 +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`
+    :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};

package/dist/pin-input/PinInputField.cjs

@@ -0,0 +1,21 @@
+"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`
+      <input
+        part="field"
+        inputmode=${t.type==="numeric"?"numeric":"text"}
+        autocomplete=${this.index===0?"one-time-code":"off"}
+        type=${t.mask&&e?"password":"text"}
+        maxlength="1"
+        aria-label=${this.hostLabel??o.nothing}
+        ?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}
+        .value=${this.char}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+        @paste=${this.handlePaste}
+      />
+    `}};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});

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

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-pin-input-field>` — a single character box of a `<skdx-pin-input>`.
+ * Reads/writes its character at `index` in the root's joined value. Sets
+ * `maxlength="1"`, `inputmode` from the root's `type`,
+ * `autocomplete="one-time-code"` on the first box, renders `type="password"`
+ * once filled when `mask` is set, and reflects `disabled`/`invalid`/`readOnly`
+ * from the root. Typing or pasting auto-advances focus to the next box;
+ * Backspace on an empty box clears and focuses the previous one; Arrow
+ * Left/Right move focus between boxes; pasting a multi-character string
+ * fills consecutive boxes from `index` onward. Must be used inside
+ * `<skdx-pin-input>`.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
+ * boundary a wrapping `<label>` cannot name the `<input>` (a label names its
+ * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
+ * see it (`querySelectorAll()` does not pierce a shadow root). Putting
+ * `display: contents` on the `<input>` instead is not an option: CSS Display 3
+ * computes it to `none` on form controls.
+ *
+ * @csspart field - The native `<input>` element. **`::part(field)` does not reach it.**
+ * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
+ * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-pin-input-field > input { … }`.
+ */
+export declare class SkdxPinInputField extends LitElement {
+    /** Light DOM, for the labelling reasons in the class docblock. */
+    createRenderRoot(): this;
+    /** This box's position in the pin, zero-based. */
+    index: number;
+    /** Accessible name for the inner `<input>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Moves DOM focus into this box's native `<input>` element — `focusIndex()`
+     * on the root walks the boxes through here. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(): void;
+    private readonly handleRootUpdate;
+    private get char();
+    private commitChar;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handlePaste;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-pin-input-field': SkdxPinInputField;
+    }
+}

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

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-pin-input-field>` — a single character box of a `<skdx-pin-input>`.
+ * Reads/writes its character at `index` in the root's joined value. Sets
+ * `maxlength="1"`, `inputmode` from the root's `type`,
+ * `autocomplete="one-time-code"` on the first box, renders `type="password"`
+ * once filled when `mask` is set, and reflects `disabled`/`invalid`/`readOnly`
+ * from the root. Typing or pasting auto-advances focus to the next box;
+ * Backspace on an empty box clears and focuses the previous one; Arrow
+ * Left/Right move focus between boxes; pasting a multi-character string
+ * fills consecutive boxes from `index` onward. Must be used inside
+ * `<skdx-pin-input>`.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
+ * boundary a wrapping `<label>` cannot name the `<input>` (a label names its
+ * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
+ * see it (`querySelectorAll()` does not pierce a shadow root). Putting
+ * `display: contents` on the `<input>` instead is not an option: CSS Display 3
+ * computes it to `none` on form controls.
+ *
+ * @csspart field - The native `<input>` element. **`::part(field)` does not reach it.**
+ * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
+ * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-pin-input-field > input { … }`.
+ */
+export declare class SkdxPinInputField extends LitElement {
+    /** Light DOM, for the labelling reasons in the class docblock. */
+    createRenderRoot(): this;
+    /** This box's position in the pin, zero-based. */
+    index: number;
+    /** Accessible name for the inner `<input>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Moves DOM focus into this box's native `<input>` element — `focusIndex()`
+     * on the root walks the boxes through here. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(): void;
+    private readonly handleRootUpdate;
+    private get char();
+    private commitChar;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handlePaste;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-pin-input-field': SkdxPinInputField;
+    }
+}

package/dist/pin-input/PinInputField.js

@@ -0,0 +1,21 @@
+var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(h,d,t,e)=>{for(var i=e>1?void 0:e?c(d,t):d,r=h.length-1,o;r>=0;r--)(o=h[r])&&(i=(e?o(d,t,i):o(i))||i);return e&&i&&u(d,t,i),i};import{html as p,LitElement as f,nothing as n}from"lit";import{property as m,state as v}from"lit/decorators.js";import{takeHostAriaLabel as x}from"../internal/aria-label.js";import{customElement as y}from"../internal/define.js";import{directionalKey as b}from"../internal/direction.js";import{reflectHostState as g}from"../internal/part.js";import{installLightDomStyles as $}from"../internal/styles.js";var k=/^[0-9]$/,a=class extends f{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"&&!k.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=b(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 r=this.root.value.split(""),o=this.index-1;for(let s=0;s<i.length&&this.index+s<this.root.length;s++)r[this.index+s]=i[s],o=this.index+s;this.root.setValue(r.join("")),this.root.focusIndex(Math.min(o+1,this.root.length-1))}}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),$(),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=x(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(){g(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let t=this.root;if(!t)return p``;let e=this.char!=="";return p`
+      <input
+        part="field"
+        inputmode=${t.type==="numeric"?"numeric":"text"}
+        autocomplete=${this.index===0?"one-time-code":"off"}
+        type=${t.mask&&e?"password":"text"}
+        maxlength="1"
+        aria-label=${this.hostLabel??n}
+        ?disabled=${t.disabled}
+        ?readonly=${t.readOnly}
+        aria-invalid=${t.invalid?"true":n}
+        aria-readonly=${t.readOnly?"true":n}
+        data-disabled=${t.disabled?"":n}
+        data-invalid=${t.invalid?"":n}
+        data-readonly=${t.readOnly?"":n}
+        .value=${this.char}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+        @paste=${this.handlePaste}
+      />
+    `}};l([m({type:Number})],a.prototype,"index",2),l([v()],a.prototype,"hostLabel",2),a=l([y("skdx-pin-input-field","pin-input","field")],a);export{a as SkdxPinInputField};

package/dist/pin-input/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var m=(o,n)=>{for(var r in n)t(o,r,{get:n[r],enumerable:!0})},u=(o,n,r,x)=>{if(n&&typeof n=="object"||typeof n=="function")for(let p of f(n))!k.call(o,p)&&p!==r&&t(o,p,{get:()=>n[p],enumerable:!(x=i(n,p))||x.enumerable});return o};var I=o=>u(t({},"__esModule",{value:!0}),o);var P={};m(P,{SkdxPinInput:()=>d.SkdxPinInput,SkdxPinInputField:()=>e.SkdxPinInputField});module.exports=I(P);var d=require("./PinInput.cjs"),e=require("./PinInputField.cjs");0&&(module.exports={SkdxPinInput,SkdxPinInputField});

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

@@ -0,0 +1,2 @@
+export { SkdxPinInput } from './PinInput.cjs';
+export { SkdxPinInputField } from './PinInputField.cjs';

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

@@ -0,0 +1,2 @@
+export { SkdxPinInput } from './PinInput.js';
+export { SkdxPinInputField } from './PinInputField.js';

package/dist/pin-input/index.js

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

package/dist/popover/Popover.cjs

@@ -0,0 +1,5 @@
+"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(o,e)=>{for(var t in e)p(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!b.call(o,n)&&n!==t&&p(o,n,{get:()=>e[n],enumerable:!(s=h(e,n))||s.enumerable});return o};var O=o=>E(p({},"__esModule",{value:!0}),o),a=(o,e,t,s)=>{for(var n=s>1?void 0:s?h(e,t):e,d=o.length-1,c;d>=0;d--)(c=o[d])&&(n=(s?c(e,t,n):c(n))||n);return s&&n&&p(e,t,n),n};var y={};g(y,{SkdxPopover:()=>i});module.exports=O(y);var r=require("lit"),l=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/ids.cjs"),f=require("../internal/open-change-complete.cjs"),v=require("../internal/styles.cjs");var i=class extends r.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!1;this.contentId=(0,u.nextId)("skdx-popover-content");this.triggerEl=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(t){let s=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,t.has("open")&&!s&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),t.size>0&&this.dispatchEvent(new CustomEvent("skdx-popover-internal-update")),t.has("open")&&!s&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,f.notifyOpenChangeComplete)(()=>this.querySelector("skdx-popover-content"),this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}setOpen(t){this.open!==t&&(this.open=t)}focusTrigger(){this.triggerEl?.focus()}render(){return r.html`<slot></slot>`}};i.styles=[v.hiddenHostStyles,r.css`
+      :host {
+        display: contents;
+      }
+    `],a([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),a([(0,l.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),a([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"modal",2),i=a([(0,m.customElement)("skdx-popover")],i);0&&(module.exports={SkdxPopover});

package/dist/popover/Popover.d.cts

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-popover>` — the Web Components implementation of the shared Popover
+ * contract (see `@skdx/shared`'s `popoverContract`). Owns the open state
+ * and hands it down to `<skdx-popover-trigger>` / `<skdx-popover-content>` /
+ * `<skdx-popover-close>`, which look it up via `closest('skdx-popover')` and
+ * re-render on the `skdx-popover-internal-update` event this element
+ * dispatches whenever `open`/`modal` change — the same shared-state pattern
+ * `<skdx-select>` uses, since Web Components have no built-in context
+ * mechanism.
+ *
+ * Renders only a `<slot>`. Non-modal by default; `<skdx-popover-content>`
+ * floats against the trigger via `positionFloating()` and needs no portal
+ * (`strategy: 'fixed'` isn't clipped by `overflow` ancestors).
+ *
+ * @example
+ * ```html
+ * <skdx-popover>
+ *   <skdx-popover-trigger>Share</skdx-popover-trigger>
+ *   <skdx-popover-content>
+ *     <p>Share this page with your team.</p>
+ *     <skdx-popover-close>Close</skdx-popover-close>
+ *   </skdx-popover-content>
+ * </skdx-popover>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state after `<skdx-popover-content>`'s enter or exit animation has finished — as soon as the content has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxPopover extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the popover is currently open. Listen for `open-change` to observe or override changes.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect,
+     * and only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Whether `<skdx-popover-content>` traps focus while open. Non-modal (the
+     * default) lets the rest of the page stay interactive.
+     * @default false
+     */
+    modal: boolean;
+    readonly contentId: string;
+    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal */
+    setOpen(next: boolean): void;
+    /** @internal */
+    focusTrigger(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover': SkdxPopover;
+    }
+}

package/dist/popover/Popover.d.ts

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-popover>` — the Web Components implementation of the shared Popover
+ * contract (see `@skdx/shared`'s `popoverContract`). Owns the open state
+ * and hands it down to `<skdx-popover-trigger>` / `<skdx-popover-content>` /
+ * `<skdx-popover-close>`, which look it up via `closest('skdx-popover')` and
+ * re-render on the `skdx-popover-internal-update` event this element
+ * dispatches whenever `open`/`modal` change — the same shared-state pattern
+ * `<skdx-select>` uses, since Web Components have no built-in context
+ * mechanism.
+ *
+ * Renders only a `<slot>`. Non-modal by default; `<skdx-popover-content>`
+ * floats against the trigger via `positionFloating()` and needs no portal
+ * (`strategy: 'fixed'` isn't clipped by `overflow` ancestors).
+ *
+ * @example
+ * ```html
+ * <skdx-popover>
+ *   <skdx-popover-trigger>Share</skdx-popover-trigger>
+ *   <skdx-popover-content>
+ *     <p>Share this page with your team.</p>
+ *     <skdx-popover-close>Close</skdx-popover-close>
+ *   </skdx-popover-content>
+ * </skdx-popover>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state after `<skdx-popover-content>`'s enter or exit animation has finished — as soon as the content has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxPopover extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the popover is currently open. Listen for `open-change` to observe or override changes.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect,
+     * and only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Whether `<skdx-popover-content>` traps focus while open. Non-modal (the
+     * default) lets the rest of the page stay interactive.
+     * @default false
+     */
+    modal: boolean;
+    readonly contentId: string;
+    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal */
+    setOpen(next: boolean): void;
+    /** @internal */
+    focusTrigger(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover': SkdxPopover;
+    }
+}

package/dist/popover/Popover.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(r,s,e,o)=>{for(var t=o>1?void 0:o?c(s,e):s,a=r.length-1,p;a>=0;a--)(p=r[a])&&(t=(o?p(s,e,t):p(t))||t);return o&&t&&d(s,e,t),t};import{css as h,html as m,LitElement as u}from"lit";import{property as l}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{nextId as v}from"../internal/ids.js";import{notifyOpenChangeComplete as C}from"../internal/open-change-complete.js";import{hiddenHostStyles as b}from"../internal/styles.js";var n=class extends u{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!1;this.contentId=v("skdx-popover-content");this.triggerEl=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let o=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!o&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-popover-internal-update")),e.has("open")&&!o&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=C(()=>this.querySelector("skdx-popover-content"),this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}setOpen(e){this.open!==e&&(this.open=e)}focusTrigger(){this.triggerEl?.focus()}render(){return m`<slot></slot>`}};n.styles=[b,h`
+      :host {
+        display: contents;
+      }
+    `],i([l({type:Boolean,reflect:!0})],n.prototype,"open",2),i([l({type:Boolean,attribute:"default-open"})],n.prototype,"defaultOpen",2),i([l({type:Boolean,reflect:!0})],n.prototype,"modal",2),n=i([f("skdx-popover")],n);export{n as SkdxPopover};

package/dist/popover/PopoverArrow.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var o in e)t(a,o,{get:e[o],enumerable:!0})},v=(a,e,o,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of i(e))!x.call(a,r)&&r!==o&&t(a,r,{get:()=>e[r],enumerable:!(m=c(e,r))||m.enumerable});return a};var w=a=>v(t({},"__esModule",{value:!0}),a),n=(a,e,o,m)=>{for(var r=m>1?void 0:m?c(e,o):e,l=a.length-1,s;l>=0;l--)(s=a[l])&&(r=(m?s(e,o,r):s(r))||r);return m&&r&&t(e,o,r),r};var E={};g(E,{SkdxPopoverArrow:()=>p});module.exports=w(E);var d=require("../internal/define.cjs"),f=require("../internal/overlay-arrow.cjs");var p=class extends f.SkdxOverlayArrow{};p=n([(0,d.customElement)("skdx-popover-arrow","popover","arrow")],p);0&&(module.exports={SkdxPopoverArrow});

package/dist/popover/PopoverArrow.d.cts

@@ -0,0 +1,22 @@
+import { SkdxOverlayArrow } from '../internal/overlay-arrow.cjs';
+/**
+ * `<skdx-popover-arrow>` — optional pointer from `<skdx-popover-content>` back
+ * at the trigger. Render it inside `<skdx-popover-content>`; it self-positions
+ * from the resolved placement (see `data-side` on the content) and so takes
+ * no positioning attributes of its own.
+ *
+ * @example
+ * ```html
+ * <skdx-popover-content side="right" align="start">
+ *   <p>Popover content.</p>
+ *   <skdx-popover-arrow></skdx-popover-arrow>
+ * </skdx-popover-content>
+ * ```
+ */
+export declare class SkdxPopoverArrow extends SkdxOverlayArrow {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-arrow': SkdxPopoverArrow;
+    }
+}

package/dist/popover/PopoverArrow.d.ts

@@ -0,0 +1,22 @@
+import { SkdxOverlayArrow } from '../internal/overlay-arrow.js';
+/**
+ * `<skdx-popover-arrow>` — optional pointer from `<skdx-popover-content>` back
+ * at the trigger. Render it inside `<skdx-popover-content>`; it self-positions
+ * from the resolved placement (see `data-side` on the content) and so takes
+ * no positioning attributes of its own.
+ *
+ * @example
+ * ```html
+ * <skdx-popover-content side="right" align="start">
+ *   <p>Popover content.</p>
+ *   <skdx-popover-arrow></skdx-popover-arrow>
+ * </skdx-popover-content>
+ * ```
+ */
+export declare class SkdxPopoverArrow extends SkdxOverlayArrow {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-arrow': SkdxPopoverArrow;
+    }
+}

package/dist/popover/PopoverArrow.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=(m,r,p,a)=>{for(var e=a>1?void 0:a?n(r,p):r,t=m.length-1,l;t>=0;t--)(l=m[t])&&(e=(a?l(r,p,e):l(e))||e);return a&&e&&c(r,p,e),e};import{customElement as d}from"../internal/define.js";import{SkdxOverlayArrow as f}from"../internal/overlay-arrow.js";var o=class extends f{};o=s([d("skdx-popover-arrow","popover","arrow")],o);export{o as SkdxPopoverArrow};