@skdx/web-components 0.26.0

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

@@ -0,0 +1,107 @@
+import type { PropertyValues } from 'lit';
+import { SkdxTextField } from '../text-field/TextField.cjs';
+/**
+ * `<skdx-password-input>` — the Web Components implementation of the shared
+ * PasswordInput contract (see `@skdx/shared`'s `passwordInputContract`).
+ *
+ * **It *is* a `<skdx-text-field>`**, extended rather than re-implemented: every
+ * text-field property — `value`, `disabled`, `invalid`, `required`, `name` —
+ * plus the form participation, the `inputId` wiring and the `value-change`
+ * event come from that base class unchanged, so anything true of a text field's
+ * value handling is true here. The only state added is whether the characters
+ * are revealed.
+ *
+ * Its parts (`<skdx-password-input-field>`, `<skdx-password-input-toggle>`) are
+ * light-DOM custom elements that find this root with
+ * `closest('skdx-password-input')` and re-render on the same
+ * `skdx-text-field-internal-update` event the base class already dispatches — this
+ * element adds `visible` to the set of changes that trigger it, so the parts
+ * listen to exactly one event. Custom elements have no context API; the DOM
+ * tree itself is the shared context.
+ *
+ * Masked is the only safe default: a credential rendered on a screen someone
+ * else might be looking at starts hidden, and revealing is a deliberate act.
+ *
+ * Every change of visibility is announced politely through the shared live
+ * region ("Password shown" / "Password hidden"). A masked field flipping to
+ * plaintext is a purely visual event: without the announcement a screen-reader
+ * user pressing the toggle gets `aria-pressed` and nothing else, and never
+ * learns that their password is now on screen. The announcement is driven by
+ * the resolved state, so the initial state announces nothing — there was no
+ * change for the user to miss.
+ *
+ * The plaintext value is never copied into an attribute: `value` is inherited
+ * from `<skdx-text-field>` deliberately un-reflected, and nothing here writes it
+ * into a `data-*` or `aria-*` where a secret would end up in serialised HTML.
+ *
+ * @example
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field placeholder="Password"></skdx-password-input-field>
+ *   <skdx-password-input-toggle>👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ *
+ * @fires visible-change - Fires with the new visibility (boolean) whenever the characters are revealed or re-masked. Suppressed when the requested state already matches the current one.
+ * @fires value-change - Fires with the new value (string) as the user types. Inherited from `<skdx-text-field>`.
+ */
+export declare class SkdxPasswordInput extends SkdxTextField {
+    /**
+     * Whether the characters are revealed. The property is the single source of
+     * truth, like a native `<input>`'s `checked`: a consumer that wants
+     * controlled behaviour listens for `visible-change` and writes it back.
+     * @default false — the field starts masked, which is the only safe default
+     * for a credential rendered on a screen someone else might be looking at.
+     */
+    visible: boolean;
+    /**
+     * Initial visibility, for uncontrolled usage. Applied once, on connect, and
+     * only if `visible` wasn't already set.
+     * @default false — masked on first paint; nothing is announced for it,
+     * because no change happened.
+     */
+    defaultVisible: boolean;
+    /**
+     * Replaces the message the browser shows when a `required` password field is
+     * submitted empty. Redeclared here rather than left to `<skdx-text-field>` so
+     * the attribute shows up on this element's own manifest entry — a
+     * credential field is the one people most often want custom wording on.
+     * @default undefined — keeps `'Please fill out this field.'`
+     */
+    requiredMessage?: string;
+    /**
+     * Words the polite live-region message announced when visibility changes.
+     * The toggle's own name does not change, so this announcement is the only
+     * confirmation a screen-reader user gets that the characters are now
+     * readable on screen. Return `''` to announce nothing. Property only — it is
+     * a function, so it cannot come from an attribute.
+     * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
+     */
+    getVisibilityAnnouncement?: (visible: boolean) => string;
+    /** Last visibility handed to the live region, seeded on the first update so mounting announces nothing. */
+    private announced?;
+    connectedCallback(): void;
+    /**
+     * Reveals or re-masks the characters and dispatches `visible-change`. Called
+     * by `<skdx-password-input-toggle>`. A request that matches the current state
+     * emits nothing, and a disabled field cannot be revealed — there is nothing
+     * to reveal in a field nobody can use.
+     */
+    setVisible(next: boolean): void;
+    /**
+     * @internal Same contract as the base class's: publish the value, mirror the
+     * real input's `ValidityState`. Overridden only to look the input up under
+     * this family's tag — `<skdx-password-input-field>` rather than
+     * `<skdx-text-field-input>` — so `required`, `minlength`, `pattern` and the
+     * rest keep being mirrored exactly as they are on a plain text field. A
+     * plain descendant lookup: the field renders its `<input>` into the light
+     * DOM, so there is no shadow root to step through anymore.
+     */
+    syncFormState(): void;
+    protected updated(changed: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-password-input': SkdxPasswordInput;
+    }
+}

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

@@ -0,0 +1,107 @@
+import type { PropertyValues } from 'lit';
+import { SkdxTextField } from '../text-field/TextField.js';
+/**
+ * `<skdx-password-input>` — the Web Components implementation of the shared
+ * PasswordInput contract (see `@skdx/shared`'s `passwordInputContract`).
+ *
+ * **It *is* a `<skdx-text-field>`**, extended rather than re-implemented: every
+ * text-field property — `value`, `disabled`, `invalid`, `required`, `name` —
+ * plus the form participation, the `inputId` wiring and the `value-change`
+ * event come from that base class unchanged, so anything true of a text field's
+ * value handling is true here. The only state added is whether the characters
+ * are revealed.
+ *
+ * Its parts (`<skdx-password-input-field>`, `<skdx-password-input-toggle>`) are
+ * light-DOM custom elements that find this root with
+ * `closest('skdx-password-input')` and re-render on the same
+ * `skdx-text-field-internal-update` event the base class already dispatches — this
+ * element adds `visible` to the set of changes that trigger it, so the parts
+ * listen to exactly one event. Custom elements have no context API; the DOM
+ * tree itself is the shared context.
+ *
+ * Masked is the only safe default: a credential rendered on a screen someone
+ * else might be looking at starts hidden, and revealing is a deliberate act.
+ *
+ * Every change of visibility is announced politely through the shared live
+ * region ("Password shown" / "Password hidden"). A masked field flipping to
+ * plaintext is a purely visual event: without the announcement a screen-reader
+ * user pressing the toggle gets `aria-pressed` and nothing else, and never
+ * learns that their password is now on screen. The announcement is driven by
+ * the resolved state, so the initial state announces nothing — there was no
+ * change for the user to miss.
+ *
+ * The plaintext value is never copied into an attribute: `value` is inherited
+ * from `<skdx-text-field>` deliberately un-reflected, and nothing here writes it
+ * into a `data-*` or `aria-*` where a secret would end up in serialised HTML.
+ *
+ * @example
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field placeholder="Password"></skdx-password-input-field>
+ *   <skdx-password-input-toggle>👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ *
+ * @fires visible-change - Fires with the new visibility (boolean) whenever the characters are revealed or re-masked. Suppressed when the requested state already matches the current one.
+ * @fires value-change - Fires with the new value (string) as the user types. Inherited from `<skdx-text-field>`.
+ */
+export declare class SkdxPasswordInput extends SkdxTextField {
+    /**
+     * Whether the characters are revealed. The property is the single source of
+     * truth, like a native `<input>`'s `checked`: a consumer that wants
+     * controlled behaviour listens for `visible-change` and writes it back.
+     * @default false — the field starts masked, which is the only safe default
+     * for a credential rendered on a screen someone else might be looking at.
+     */
+    visible: boolean;
+    /**
+     * Initial visibility, for uncontrolled usage. Applied once, on connect, and
+     * only if `visible` wasn't already set.
+     * @default false — masked on first paint; nothing is announced for it,
+     * because no change happened.
+     */
+    defaultVisible: boolean;
+    /**
+     * Replaces the message the browser shows when a `required` password field is
+     * submitted empty. Redeclared here rather than left to `<skdx-text-field>` so
+     * the attribute shows up on this element's own manifest entry — a
+     * credential field is the one people most often want custom wording on.
+     * @default undefined — keeps `'Please fill out this field.'`
+     */
+    requiredMessage?: string;
+    /**
+     * Words the polite live-region message announced when visibility changes.
+     * The toggle's own name does not change, so this announcement is the only
+     * confirmation a screen-reader user gets that the characters are now
+     * readable on screen. Return `''` to announce nothing. Property only — it is
+     * a function, so it cannot come from an attribute.
+     * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
+     */
+    getVisibilityAnnouncement?: (visible: boolean) => string;
+    /** Last visibility handed to the live region, seeded on the first update so mounting announces nothing. */
+    private announced?;
+    connectedCallback(): void;
+    /**
+     * Reveals or re-masks the characters and dispatches `visible-change`. Called
+     * by `<skdx-password-input-toggle>`. A request that matches the current state
+     * emits nothing, and a disabled field cannot be revealed — there is nothing
+     * to reveal in a field nobody can use.
+     */
+    setVisible(next: boolean): void;
+    /**
+     * @internal Same contract as the base class's: publish the value, mirror the
+     * real input's `ValidityState`. Overridden only to look the input up under
+     * this family's tag — `<skdx-password-input-field>` rather than
+     * `<skdx-text-field-input>` — so `required`, `minlength`, `pattern` and the
+     * rest keep being mirrored exactly as they are on a plain text field. A
+     * plain descendant lookup: the field renders its `<input>` into the light
+     * DOM, so there is no shadow root to step through anymore.
+     */
+    syncFormState(): void;
+    protected updated(changed: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-password-input': SkdxPasswordInput;
+    }
+}

package/dist/password-input/PasswordInput.js

@@ -0,0 +1 @@
+var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var s=(n,l,e,o)=>{for(var t=o>1?void 0:o?b(l,e):l,a=n.length-1,d;a>=0;a--)(d=n[a])&&(t=(o?d(l,e,t):d(t))||t);return o&&t&&u(l,e,t),t};import{property as r}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{SkdxTextField as v}from"../text-field/TextField.js";import{announce as c}from"../utils/live-announcer.js";function p(n){return n?"Password shown":"Password hidden"}var i=class extends v{constructor(){super(...arguments);this.visible=!1;this.defaultVisible=!1}connectedCallback(){super.connectedCallback(),this.defaultVisible&&!this.hasAttribute("visible")&&(this.visible=!0)}setVisible(e){this.disabled||e===this.visible||(this.visible=e,this.dispatchEvent(new CustomEvent("visible-change",{detail:e,bubbles:!0,composed:!0})))}syncFormState(){this.setFormValue(this.value);let e=this.querySelector("skdx-password-input-field input");e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}updated(e){super.updated(e),this.setAttribute("data-state",this.visible?"visible":"hidden"),e.has("visible")&&this.announced!==void 0&&this.dispatchEvent(new CustomEvent("skdx-text-field-internal-update")),this.announced===void 0?this.announced=this.visible:this.announced!==this.visible&&(this.announced=this.visible,c((this.getVisibilityAnnouncement??p)(this.visible)))}};s([r({type:Boolean,reflect:!0})],i.prototype,"visible",2),s([r({type:Boolean,attribute:"default-visible"})],i.prototype,"defaultVisible",2),s([r({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([r({attribute:!1})],i.prototype,"getVisibilityAnnouncement",2),i=s([h("skdx-password-input","password-input","root")],i);export{i as SkdxPasswordInput};

package/dist/password-input/PasswordInputField.cjs

@@ -0,0 +1,18 @@
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var $=(r,t)=>{for(var e in t)l(r,e,{get:t[e],enumerable:!0})},g=(r,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of b(t))!f.call(r,i)&&i!==e&&l(r,i,{get:()=>t[i],enumerable:!(a=h(t,i))||a.enumerable});return r};var k=r=>g(l({},"__esModule",{value:!0}),r),n=(r,t,e,a)=>{for(var i=a>1?void 0:a?h(t,e):t,d=r.length-1,p;d>=0;d--)(p=r[d])&&(i=(a?p(t,e,i):p(i))||i);return a&&i&&l(t,e,i),i};var x={};$(x,{SkdxPasswordInputField:()=>s});module.exports=k(x);var o=require("lit"),u=require("lit/decorators.js"),c=require("../internal/aria-label.cjs"),v=require("../internal/define.cjs"),m=require("../internal/styles.cjs");var s=class extends o.LitElement{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(),(0,m.installLightDomStyles)(),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=(0,c.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(){this.root?.syncFormState()}render(){let e=this.root;if(!e)return o.nothing;let a=e.visible;return o.html`
+      <input
+        part="input"
+        id=${e.inputId}
+        type=${a?"text":"password"}
+        autocomplete=${this.autoComplete}
+        placeholder=${this.placeholder??o.nothing}
+        aria-label=${this.label??o.nothing}
+        .value=${e.value}
+        ?disabled=${e.disabled}
+        ?required=${e.required}
+        aria-invalid=${e.invalid?"true":o.nothing}
+        data-state=${a?"visible":"hidden"}
+        data-disabled=${e.disabled?"":o.nothing}
+        data-invalid=${e.invalid?"":o.nothing}
+        @input=${this.handleInput}
+      />
+    `}};n([(0,u.property)({type:String})],s.prototype,"placeholder",2),n([(0,u.property)({type:String,attribute:"autocomplete"})],s.prototype,"autoComplete",2),s=n([(0,v.customElement)("skdx-password-input-field","password-input","field")],s);0&&(module.exports={SkdxPasswordInputField});

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

@@ -0,0 +1,94 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-password-input-field>` — the native `<input>` for a
+ * `<skdx-password-input>`. Looks up its ancestor root via `closest()` and
+ * reads its value/disabled/required/invalid exactly as
+ * `<skdx-text-field-input>` does, re-rendering whenever the root dispatches
+ * `skdx-text-field-internal-update`. Must be used inside `<skdx-password-input>`.
+ *
+ * **The root owns `type`.** It is `password` while the root is hidden and
+ * `text` while it is visible, and there is deliberately no `type` property
+ * here: a consumer who could set it would be able to pin the field open while
+ * the toggle claims it is masked. Flipping the type on the same node — rather
+ * than swapping the element — keeps focus, selection and caret across the
+ * flip.
+ *
+ * `autocomplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
+ * Input Purpose) and is overridable — a sign-up or change-password form wants
+ * `new-password`.
+ *
+ * The value reaches the input through its `.value` *property*, never an
+ * attribute: nothing here copies the secret into a `data-*` or `aria-*`.
+ *
+ * An `aria-label` written on this host is moved onto the `<input>`, which is
+ * the element carrying the role — left on the host it would name nothing and
+ * sit on an element with no role at all.
+ *
+ * @example
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field
+ *     placeholder="Password"
+ *     autocomplete="new-password"
+ *   ></skdx-password-input-field>
+ *   <skdx-password-input-toggle>👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), like `<skdx-text-field-input>`, `<skdx-multi-select-input>` and every
+ * other native control in this package. It was the last one behind a shadow
+ * boundary, and the boundary cost more than it bought: `el.querySelector('input')`
+ * on the root — which is how a consumer, `<skdx-field>` and the method-coverage
+ * gate all reach a field's control — returned `null` here and returned the
+ * `<input>` for every sibling family.
+ *
+ * The one thing the boundary was protecting is
+ * `<skdx-password-input>`'s `syncFormState()`, which hands this `<input>` to
+ * `mirrorValidity()` so `minlength`, `pattern` and the rest keep reaching the
+ * form. Its lookup moved with the control, from
+ * `querySelector('skdx-password-input-field')?.shadowRoot?.querySelector('input')`
+ * to `querySelector('skdx-password-input-field input')` — exactly the rewrite
+ * `<skdx-text-field>`'s `inputElement` getter got when its input moved.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` 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-password-input-field > input { … }`.
+ */
+export declare class SkdxPasswordInputField extends LitElement {
+    /** Light DOM, for the reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<input>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Placeholder text passed straight through to the native input.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Native `autocomplete` token for the input.
+     * @default 'current-password' — WCAG 2.1 SC 1.3.5; set `new-password` on a
+     * sign-up or change-password form so the browser offers to generate one.
+     */
+    autoComplete: string;
+    private root;
+    /** A consumer-supplied `aria-label`, moved off the host so it names the `<input>` that carries the role. */
+    private label;
+    private readonly onRootChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleInput;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-password-input-field': SkdxPasswordInputField;
+    }
+}

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

@@ -0,0 +1,94 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-password-input-field>` — the native `<input>` for a
+ * `<skdx-password-input>`. Looks up its ancestor root via `closest()` and
+ * reads its value/disabled/required/invalid exactly as
+ * `<skdx-text-field-input>` does, re-rendering whenever the root dispatches
+ * `skdx-text-field-internal-update`. Must be used inside `<skdx-password-input>`.
+ *
+ * **The root owns `type`.** It is `password` while the root is hidden and
+ * `text` while it is visible, and there is deliberately no `type` property
+ * here: a consumer who could set it would be able to pin the field open while
+ * the toggle claims it is masked. Flipping the type on the same node — rather
+ * than swapping the element — keeps focus, selection and caret across the
+ * flip.
+ *
+ * `autocomplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
+ * Input Purpose) and is overridable — a sign-up or change-password form wants
+ * `new-password`.
+ *
+ * The value reaches the input through its `.value` *property*, never an
+ * attribute: nothing here copies the secret into a `data-*` or `aria-*`.
+ *
+ * An `aria-label` written on this host is moved onto the `<input>`, which is
+ * the element carrying the role — left on the host it would name nothing and
+ * sit on an element with no role at all.
+ *
+ * @example
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field
+ *     placeholder="Password"
+ *     autocomplete="new-password"
+ *   ></skdx-password-input-field>
+ *   <skdx-password-input-toggle>👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), like `<skdx-text-field-input>`, `<skdx-multi-select-input>` and every
+ * other native control in this package. It was the last one behind a shadow
+ * boundary, and the boundary cost more than it bought: `el.querySelector('input')`
+ * on the root — which is how a consumer, `<skdx-field>` and the method-coverage
+ * gate all reach a field's control — returned `null` here and returned the
+ * `<input>` for every sibling family.
+ *
+ * The one thing the boundary was protecting is
+ * `<skdx-password-input>`'s `syncFormState()`, which hands this `<input>` to
+ * `mirrorValidity()` so `minlength`, `pattern` and the rest keep reaching the
+ * form. Its lookup moved with the control, from
+ * `querySelector('skdx-password-input-field')?.shadowRoot?.querySelector('input')`
+ * to `querySelector('skdx-password-input-field input')` — exactly the rewrite
+ * `<skdx-text-field>`'s `inputElement` getter got when its input moved.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` 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-password-input-field > input { … }`.
+ */
+export declare class SkdxPasswordInputField extends LitElement {
+    /** Light DOM, for the reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<input>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Placeholder text passed straight through to the native input.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Native `autocomplete` token for the input.
+     * @default 'current-password' — WCAG 2.1 SC 1.3.5; set `new-password` on a
+     * sign-up or change-password form so the browser offers to generate one.
+     */
+    autoComplete: string;
+    private root;
+    /** A consumer-supplied `aria-label`, moved off the host so it names the `<input>` that carries the role. */
+    private label;
+    private readonly onRootChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleInput;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-password-input-field': SkdxPasswordInputField;
+    }
+}

package/dist/password-input/PasswordInputField.js

@@ -0,0 +1,18 @@
+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`
+      <input
+        part="input"
+        id=${e.inputId}
+        type=${t?"text":"password"}
+        autocomplete=${this.autoComplete}
+        placeholder=${this.placeholder??r}
+        aria-label=${this.label??r}
+        .value=${e.value}
+        ?disabled=${e.disabled}
+        ?required=${e.required}
+        aria-invalid=${e.invalid?"true":r}
+        data-state=${t?"visible":"hidden"}
+        data-disabled=${e.disabled?"":r}
+        data-invalid=${e.invalid?"":r}
+        @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};

package/dist/password-input/PasswordInputToggle.cjs

@@ -0,0 +1,18 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=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 v(o))!k.call(s,e)&&e!==t&&d(s,e,{get:()=>o[e],enumerable:!(i=c(o,e))||i.enumerable});return s};var w=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 x={};f(x,{SkdxPasswordInputToggle:()=>a});module.exports=w(x);var r=require("lit"),b=require("../internal/aria-label.cjs"),u=require("../internal/define.cjs"),m=require("../internal/part.cjs"),l=require("../internal/styles.cjs");var a=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,m.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"
+        aria-pressed=${i}
+        aria-label=${this.label??(i?"Hide password":"Show password")}
+        ?disabled=${e}
+        data-state=${i?"visible":"hidden"}
+        data-disabled=${e?"":r.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};a.styles=[l.resetNativeControl,l.hiddenHostStyles,r.css`
+      :host {
+        display: contents;
+      }
+    `,l.controlBoxOnHost],a=h([(0,u.customElement)("skdx-password-input-toggle","password-input","toggle")],a);0&&(module.exports={SkdxPasswordInputToggle});

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

@@ -0,0 +1,52 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-password-input-toggle>` — the reveal button for a
+ * `<skdx-password-input>`. Renders a `<button type="button">` carrying
+ * `aria-pressed`, so assistive tech reports a toggle that is currently on or
+ * off rather than a button that did something unknowable. Must be used inside
+ * `<skdx-password-input>`.
+ *
+ * **It stays in the tab order.** `tabindex="-1"` is the usual shortcut for an
+ * adornment inside a field and it is wrong here: revealing the characters is
+ * the only way a keyboard user can check what they typed, so taking the button
+ * out of tab navigation makes that unreachable without a pointer (WCAG 2.1.1).
+ * Tab from the field lands on the toggle, and Enter/Space operate it — native
+ * `<button>` behaviour, not re-implemented. Toggling never moves focus, so
+ * revealing mid-entry does not cost the user their place.
+ *
+ * An accessible name is always present: it defaults to "Show password" /
+ * "Hide password", flipping with the state so the name and `aria-pressed`
+ * agree. Write `aria-label` on the host to localise it — the attribute is
+ * moved onto the inner `<button>`, where the role that it names actually
+ * lives.
+ *
+ * Disabled follows the root's `disabled`, and both `data-state` and
+ * `data-disabled` are exposed so an icon can swap from CSS.
+ *
+ * @example
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field placeholder="Password"></skdx-password-input-field>
+ *   <skdx-password-input-toggle aria-label="Afficher le mot de passe">👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ *
+ * @csspart toggle - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxPasswordInputToggle extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    /** A consumer-supplied `aria-label`, moved off the host so it names the element that carries the role. */
+    private label;
+    private readonly onRootChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-password-input-toggle': SkdxPasswordInputToggle;
+    }
+}

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

@@ -0,0 +1,52 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-password-input-toggle>` — the reveal button for a
+ * `<skdx-password-input>`. Renders a `<button type="button">` carrying
+ * `aria-pressed`, so assistive tech reports a toggle that is currently on or
+ * off rather than a button that did something unknowable. Must be used inside
+ * `<skdx-password-input>`.
+ *
+ * **It stays in the tab order.** `tabindex="-1"` is the usual shortcut for an
+ * adornment inside a field and it is wrong here: revealing the characters is
+ * the only way a keyboard user can check what they typed, so taking the button
+ * out of tab navigation makes that unreachable without a pointer (WCAG 2.1.1).
+ * Tab from the field lands on the toggle, and Enter/Space operate it — native
+ * `<button>` behaviour, not re-implemented. Toggling never moves focus, so
+ * revealing mid-entry does not cost the user their place.
+ *
+ * An accessible name is always present: it defaults to "Show password" /
+ * "Hide password", flipping with the state so the name and `aria-pressed`
+ * agree. Write `aria-label` on the host to localise it — the attribute is
+ * moved onto the inner `<button>`, where the role that it names actually
+ * lives.
+ *
+ * Disabled follows the root's `disabled`, and both `data-state` and
+ * `data-disabled` are exposed so an icon can swap from CSS.
+ *
+ * @example
+ * ```html
+ * <skdx-password-input>
+ *   <skdx-password-input-field placeholder="Password"></skdx-password-input-field>
+ *   <skdx-password-input-toggle aria-label="Afficher le mot de passe">👁</skdx-password-input-toggle>
+ * </skdx-password-input>
+ * ```
+ *
+ * @csspart toggle - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxPasswordInputToggle extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    /** A consumer-supplied `aria-label`, moved off the host so it names the element that carries the role. */
+    private label;
+    private readonly onRootChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-password-input-toggle': SkdxPasswordInputToggle;
+    }
+}

package/dist/password-input/PasswordInputToggle.js

@@ -0,0 +1,18 @@
+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,a=r.length-1,l;a>=0;a--)(l=r[a])&&(e=(o?l(s,t,e):l(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 m}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as k}from"../internal/part.js";import{controlBoxOnHost as f,hiddenHostStyles as g,resetNativeControl as w}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=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(){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`
+      <button
+        part="toggle"
+        type="button"
+        aria-pressed=${o}
+        aria-label=${this.label??(o?"Hide password":"Show password")}
+        ?disabled=${e}
+        data-state=${o?"visible":"hidden"}
+        data-disabled=${e?"":n}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};i.styles=[w,g,h`
+      :host {
+        display: contents;
+      }
+    `,f],i=d([v("skdx-password-input-toggle","password-input","toggle")],i);export{i as SkdxPasswordInputToggle};

package/dist/password-input/index.cjs

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

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

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

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

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

package/dist/password-input/index.js

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

package/dist/pin-input/PinInput.cjs

@@ -0,0 +1,5 @@
+"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(o,s)=>{for(var e in s)n(o,e,{get:s[e],enumerable:!0})},b=(o,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of v(s))!y.call(o,i)&&i!==e&&n(o,i,{get:()=>s[i],enumerable:!(r=d(s,i))||r.enumerable});return o};var E=o=>b(n({},"__esModule",{value:!0}),o),l=(o,s,e,r)=>{for(var i=r>1?void 0:r?d(s,e):s,m=o.length-1,h;m>=0;m--)(h=o[m])&&(i=(r?h(s,e,i):h(i))||i);return r&&i&&n(s,e,i),i};var q={};g(q,{SkdxPinInput:()=>t});module.exports=E(q);var u=require("lit"),a=require("lit/decorators.js"),c=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs"),p=require("../internal/part.cjs");var t=class extends(0,f.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.value="";this.length=6;this.type="text";this.mask=!1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.autoSubmit=!1}updated(e){e.size>0&&this.dispatchEvent(new CustomEvent("skdx-pin-input-internal-update")),(e.has("value")||e.has("required")||e.has("length"))&&this.syncFormState(),(0,p.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value),this.setValueMissing(this.required&&this.value.length<this.length,`Please fill in all ${this.length} characters.`,this.querySelector("skdx-pin-input-field input"))}formResetCallback(){this.value=this.getAttribute("value")??""}setValue(e){let r=e.slice(0,this.length);if(r===this.value)return;let i=this.value.length===this.length;this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0})),!(r.length!==this.length||i)&&(this.dispatchEvent(new CustomEvent("value-complete",{detail:r,bubbles:!0,composed:!0})),this.autoSubmit&&this.submitForm())}sanitizePaste(e){return this.sanitize?.(e)??e}submitForm(){let e=this.closest("skdx-form");if(e){e.trySubmit?.();return}(this.form??this.closest("form"))?.requestSubmit()}focusIndex(e){Array.from(this.querySelectorAll("skdx-pin-input-field"))[e]?.focus()}render(){return u.html`<slot></slot>`}};t.styles=u.css`
+    :host {
+      display: contents;
+    }
+  `,l([(0,a.property)({type:String})],t.prototype,"value",2),l([(0,a.property)({type:Number})],t.prototype,"length",2),l([(0,a.property)({type:String})],t.prototype,"type",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"mask",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),l([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),l([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),l([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),l([(0,a.property)({type:Boolean,reflect:!0,attribute:"auto-submit"})],t.prototype,"autoSubmit",2),l([(0,a.property)({attribute:!1})],t.prototype,"sanitize",2),t=l([(0,c.customElement)("skdx-pin-input","pin-input","root")],t);0&&(module.exports={SkdxPinInput});