@skdx/web-components 0.26.0 → 0.28.0

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

@@ -4,100 +4,115 @@ 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.
+ * **It *is* a `<skdx-text-field>`**, extended rather than re-implemented:
+ * every text-field property, form participation, `inputId` wiring and
+ * `value-change` come from the base class unchanged. 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
+ * 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.
+ * `skdx-text-field-internal-update` event the base class dispatches, with
+ * `visible` added to the set of changes that trigger it.
  *
  * 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.
+ * Every visibility change is announced politely ("Password shown"/"Password
+ * hidden") — without it a screen-reader user pressing the toggle gets
+ * `aria-pressed` and nothing else. The initial state announces nothing, since
+ * there was no change to report.
  *
- * 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.
+ * The plaintext value is never copied into an attribute: `value` stays
+ * un-reflected, so a secret never ends up in serialised HTML.
+ *
+ * With no authored parts, this derives the same way `<skdx-text-field>` does
+ * but with a `<skdx-password-input-field>` in place of the Input and, while
+ * `showToggle`, a `<skdx-password-input-toggle>` after it. Hand composition
+ * still wins.
+ *
+ * **No `trailing` slot**, unlike `<skdx-text-field>`: the derived Toggle *is*
+ * the trailing adornment. `placeholder`, `leading`, `clearable` and
+ * `clearLabel` are all still inherited. There is no `label`/`description`
+ * prop either — wrap in `<skdx-field>` for those.
  *
  * @example
  * ```html
+ * <skdx-password-input clearable></skdx-password-input>
+ * ```
+ * ```html
  * <skdx-password-input>
  *   <skdx-password-input-field placeholder="Password"></skdx-password-input-field>
  *   <skdx-password-input-toggle>👁</skdx-password-input-toggle>
  * </skdx-password-input>
  * ```
  *
- * @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 visible-change - Fires with the new visibility whenever it changes, controlled or not.
  * @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.
+     * Whether the characters are revealed, for controlled usage. Pair with `on-visible-change`.
+     * @default undefined — uncontrolled, tracks its own visibility internally.
      */
     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.
+     * Initial visibility, for uncontrolled usage, seeding the first render.
+     * @default false — the field starts masked.
      */
     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.
+     * Replaces the message the browser shows when a `required` password field
+     * is submitted empty.
      * @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.
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel: string;
+    /**
+     * Words the polite live-region message announced when visibility changes. Return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
      */
     getVisibilityAnnouncement?: (visible: boolean) => string;
+    /**
+     * Makes the field read-only: the value stays focusable and submitted, editing is blocked. The toggle stays operable.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Renders the derived `<skdx-password-input-toggle>`. Ignored when `children` is given.
+     * @default true
+     */
+    showToggle: boolean;
     /** Last visibility handed to the live region, seeded on the first update so mounting announces nothing. */
     private announced?;
+    protected readonly fillAnatomy: () => void;
     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.
+     * Reveals or re-masks the characters and dispatches `visible-change`. A
+     * request matching the current state emits nothing, and a disabled field
+     * cannot be revealed.
      */
     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.
+     * @internal Same contract as the base class's, but looks the input up
+     * under this family's tag (`<skdx-password-input-field>` rather than
+     * `<skdx-text-field-input>`), since the field renders into the light DOM.
      */
     syncFormState(): void;
+    /**
+     * A form reset restores `defaultValue` (the base class's job) *and* re-masks
+     * the field to `defaultVisible` — leaving a credential on screen after
+     * reset would be the failure mode.
+     *
+     * Written straight to the property rather than through `setVisible`,
+     * matching how `formResetCallback` restores the value: a form-associated
+     * element owns its own state (see `contracts/form-validity.ts`).
+     */
+    formResetCallback(): void;
     protected updated(changed: PropertyValues): void;
 }
 declare global {

package/dist/password-input/PasswordInput.js

@@ -1 +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};
+var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var t=(o,r,e,a)=>{for(var s=a>1?void 0:a?b(r,e):r,n=o.length-1,u;n>=0;n--)(u=o[n])&&(s=(a?u(r,e,s):u(s))||s);return a&&s&&d(r,e,s),s};import{property as l}from"lit/decorators.js";import{hasAuthoredParts as h}from"../internal/authored.js";import{customElement as f}from"../internal/define.js";import{SkdxTextField as v}from"../text-field/TextField.js";import{announce as m}from"../utils/live-announcer.js";import{fillPasswordInputAnatomy as p,PASSWORD_INPUT_ANATOMY_GENERATED as c,PASSWORD_INPUT_RENDER_SLOTS as y}from"./PasswordInputAnatomy.js";function g(o){return o?"Password shown":"Password hidden"}var i=class extends v{constructor(){super(...arguments);this.visible=!1;this.defaultVisible=!1;this.revealLabel="Show password";this.readOnly=!1;this.showToggle=!0;this.fillAnatomy=()=>{h(this,c,y)||p(this)}}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.")}formResetCallback(){super.formResetCallback(),this.visible=this.defaultVisible}updated(e){super.updated(e),e.has("showToggle")&&this.fillAnatomy(),this.setAttribute("data-state",this.visible?"visible":"hidden"),(e.has("visible")||e.has("readOnly"))&&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,m((this.getVisibilityAnnouncement??g)(this.visible)))}};t([l({type:Boolean,reflect:!0})],i.prototype,"visible",2),t([l({type:Boolean,attribute:"default-visible"})],i.prototype,"defaultVisible",2),t([l({attribute:"required-message"})],i.prototype,"requiredMessage",2),t([l({attribute:"reveal-label"})],i.prototype,"revealLabel",2),t([l({attribute:!1})],i.prototype,"getVisibilityAnnouncement",2),t([l({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),t([l({type:Boolean,reflect:!0,attribute:"show-toggle"})],i.prototype,"showToggle",2),i=t([f("skdx-password-input","password-input","root")],i);export{i as SkdxPasswordInput};

package/dist/password-input/PasswordInputAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},x=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of u(e))!c.call(t,l)&&l!==s&&r(t,l,{get:()=>e[l],enumerable:!(n=p(e,l))||n.enumerable});return t};var f=t=>x(r({},"__esModule",{value:!0}),t);var b={};m(b,{PASSWORD_INPUT_ANATOMY_GENERATED:()=>a,PASSWORD_INPUT_RENDER_SLOTS:()=>g,fillPasswordInputAnatomy:()=>A});module.exports=f(b);var d=require("../internal/derive.cjs"),w=require("../text-field/TextFieldClearButton.cjs"),E=require("../text-field/TextFieldSlot.cjs"),P=require("./PasswordInputField.cjs"),S=require("./PasswordInputToggle.cjs"),a="data-skdx-password-input-generated",g=["leading"];function A(t){let e=a,s=(0,d.claimSlot)(t,"leading","skdx-text-field-slot",e);s&&s.setAttribute("side","start");let n=(0,d.generatedPart)(t,"skdx-password-input-field",e)??document.createElement("skdx-password-input-field");n.setAttribute(e,""),t.placeholder!=null?n.setAttribute("placeholder",t.placeholder):n.removeAttribute("placeholder");let l=t.showToggle?(0,d.generatedPart)(t,"skdx-password-input-toggle",e)??document.createElement("skdx-password-input-toggle"):null;l&&l.setAttribute(e,"");let i=t.clearable?(0,d.generatedPart)(t,"skdx-text-field-clear-button",e)??document.createElement("skdx-text-field-clear-button"):null;i&&(i.setAttribute(e,""),i.setAttribute("label",t.clearLabel)),(0,d.applyChildren)(t,[s,n,l,i].filter(o=>o!==null))}0&&(module.exports={PASSWORD_INPUT_ANATOMY_GENERATED,PASSWORD_INPUT_RENDER_SLOTS,fillPasswordInputAnatomy});

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

@@ -0,0 +1,15 @@
+import '../text-field/TextFieldClearButton.cjs';
+import '../text-field/TextFieldSlot.cjs';
+import type { SkdxPasswordInput } from './PasswordInput.cjs';
+import './PasswordInputField.cjs';
+import './PasswordInputToggle.cjs';
+/** @internal Marks a direct child of `<skdx-password-input>` this module generated. */
+export declare const PASSWORD_INPUT_ANATOMY_GENERATED = "data-skdx-password-input-generated";
+/** @internal The slot markers the derived anatomy consumes. */
+export declare const PASSWORD_INPUT_RENDER_SLOTS: readonly ["leading"];
+/**
+ * Build the canonical anatomy: Field with Toggle and optional Clear button.
+ * No trailing Slot; the Toggle is the trailing adornment. No label or description.
+ * @internal
+ */
+export declare function fillPasswordInputAnatomy(root: SkdxPasswordInput): void;

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

@@ -0,0 +1,15 @@
+import '../text-field/TextFieldClearButton.js';
+import '../text-field/TextFieldSlot.js';
+import type { SkdxPasswordInput } from './PasswordInput.js';
+import './PasswordInputField.js';
+import './PasswordInputToggle.js';
+/** @internal Marks a direct child of `<skdx-password-input>` this module generated. */
+export declare const PASSWORD_INPUT_ANATOMY_GENERATED = "data-skdx-password-input-generated";
+/** @internal The slot markers the derived anatomy consumes. */
+export declare const PASSWORD_INPUT_RENDER_SLOTS: readonly ["leading"];
+/**
+ * Build the canonical anatomy: Field with Toggle and optional Clear button.
+ * No trailing Slot; the Toggle is the trailing adornment. No label or description.
+ * @internal
+ */
+export declare function fillPasswordInputAnatomy(root: SkdxPasswordInput): void;

package/dist/password-input/PasswordInputAnatomy.js

@@ -0,0 +1 @@
+import{applyChildren as a,claimSlot as o,generatedPart as i}from"../internal/derive.js";import"../text-field/TextFieldClearButton.js";import"../text-field/TextFieldSlot.js";import"./PasswordInputField.js";import"./PasswordInputToggle.js";var p="data-skdx-password-input-generated",g=["leading"];function A(t){let e=p,d=o(t,"leading","skdx-text-field-slot",e);d&&d.setAttribute("side","start");let l=i(t,"skdx-password-input-field",e)??document.createElement("skdx-password-input-field");l.setAttribute(e,""),t.placeholder!=null?l.setAttribute("placeholder",t.placeholder):l.removeAttribute("placeholder");let n=t.showToggle?i(t,"skdx-password-input-toggle",e)??document.createElement("skdx-password-input-toggle"):null;n&&n.setAttribute(e,"");let s=t.clearable?i(t,"skdx-text-field-clear-button",e)??document.createElement("skdx-text-field-clear-button"):null;s&&(s.setAttribute(e,""),s.setAttribute("label",t.clearLabel)),a(t,[d,l,n,s].filter(r=>r!==null))}export{p as PASSWORD_INPUT_ANATOMY_GENERATED,g as PASSWORD_INPUT_RENDER_SLOTS,A as fillPasswordInputAnatomy};

package/dist/password-input/PasswordInputField.cjs

@@ -1,4 +1,4 @@
-"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`
+"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 y=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 k={};$(k,{SkdxPasswordInputField:()=>s});module.exports=y(k);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}
@@ -8,6 +8,7 @@
         aria-label=${this.label??o.nothing}
         .value=${e.value}
         ?disabled=${e.disabled}
+        ?readonly=${e.readOnly}
         ?required=${e.required}
         aria-invalid=${e.invalid?"true":o.nothing}
         data-state=${a?"visible":"hidden"}

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

@@ -1,70 +1,24 @@
 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.
+ * 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>`.
  *
  * @example
  * ```html
  * <skdx-password-input>
- *   <skdx-password-input-field
- *     placeholder="Password"
- *     autocomplete="new-password"
- *   ></skdx-password-input-field>
+ *   <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 { … }`.
+ * @csspart input - Native `<input>` element; light DOM so `::part()` does not reach it.
+ * Style as `skdx-password-input-field > input` instead.
  */
 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.
-     */
+    /** Forward focus to the native `<input>`. */
     focus(options?: FocusOptions): void;
     /**
      * Placeholder text passed straight through to the native input.
@@ -72,9 +26,8 @@ export declare class SkdxPasswordInputField extends LitElement {
      */
     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.
+     * Native `autocomplete` hint for password managers, defaulting to `current-password`.
+     * @default 'current-password' (WCAG 2.1 SC 1.3.5); set `new-password` for sign-up / change forms.
      */
     autoComplete: string;
     private root;

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

@@ -1,70 +1,24 @@
 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.
+ * 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>`.
  *
  * @example
  * ```html
  * <skdx-password-input>
- *   <skdx-password-input-field
- *     placeholder="Password"
- *     autocomplete="new-password"
- *   ></skdx-password-input-field>
+ *   <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 { … }`.
+ * @csspart input - Native `<input>` element; light DOM so `::part()` does not reach it.
+ * Style as `skdx-password-input-field > input` instead.
  */
 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.
-     */
+    /** Forward focus to the native `<input>`. */
     focus(options?: FocusOptions): void;
     /**
      * Placeholder text passed straight through to the native input.
@@ -72,9 +26,8 @@ export declare class SkdxPasswordInputField extends LitElement {
      */
     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.
+     * Native `autocomplete` hint for password managers, defaulting to `current-password`.
+     * @default 'current-password' (WCAG 2.1 SC 1.3.5); set `new-password` for sign-up / change forms.
      */
     autoComplete: string;
     private root;

package/dist/password-input/PasswordInputField.js

@@ -8,6 +8,7 @@ var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,a,e,t
         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"}

package/dist/password-input/PasswordInputToggle.cjs

@@ -1,9 +1,9 @@
-"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`
+"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`
       <button
         part="toggle"
         type="button"
         aria-pressed=${i}
-        aria-label=${this.label??(i?"Hide password":"Show password")}
+        aria-label=${this.label??t.revealLabel}
         ?disabled=${e}
         data-state=${i?"visible":"hidden"}
         data-disabled=${e?"":r.nothing}
@@ -11,8 +11,8 @@
       >
         <slot></slot>
       </button>
-    `}};a.styles=[l.resetNativeControl,l.hiddenHostStyles,r.css`
+    `}};l.styles=[a.resetNativeControl,a.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});
+    `,a.controlBoxOnHost],l=h([(0,u.customElement)("skdx-password-input-toggle","password-input","toggle")],l);0&&(module.exports={SkdxPasswordInputToggle});

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

@@ -1,27 +1,9 @@
 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.
+ * 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.
  *
  * @example
  * ```html

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

@@ -1,27 +1,9 @@
 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.
+ * 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.
  *
  * @example
  * ```html

package/dist/password-input/PasswordInputToggle.js

@@ -1,9 +1,9 @@
-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`
+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`
       <button
         part="toggle"
         type="button"
         aria-pressed=${o}
-        aria-label=${this.label??(o?"Hide password":"Show password")}
+        aria-label=${this.label??t.revealLabel}
         ?disabled=${e}
         data-state=${o?"visible":"hidden"}
         data-disabled=${e?"":n}
@@ -11,8 +11,8 @@ var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(r,s,t,o
       >
         <slot></slot>
       </button>
-    `}};i.styles=[w,g,h`
+    `}};i.styles=[x,g,h`
       :host {
         display: contents;
       }
-    `,f],i=d([v("skdx-password-input-toggle","password-input","toggle")],i);export{i as SkdxPasswordInputToggle};
+    `,f],i=d([m("skdx-password-input-toggle","password-input","toggle")],i);export{i as SkdxPasswordInputToggle};

package/dist/password-input/index.cjs

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

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

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

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

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

package/dist/password-input/index.js

@@ -1 +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};
+import{SkdxPasswordInput as d}from"./PasswordInput.js";export{d as SkdxPasswordInput};

package/dist/password-input/primitives.cjs

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

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

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