@skdx/web-components 0.27.0 → 0.28.0

package/dist/text/index.d.ts

@@ -0,0 +1 @@
+export { SkdxText } from './Text.js';

package/dist/text/index.js

@@ -0,0 +1 @@
+import{SkdxText as o}from"./Text.js";export{o as SkdxText};

package/dist/text-field/TextField.cjs

@@ -1,16 +1,16 @@
-"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},g=(r,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of c(t))!y.call(r,i)&&i!==e&&u(r,i,{get:()=>t[i],enumerable:!(a=h(t,i))||a.enumerable});return r};var E=r=>g(u({},"__esModule",{value:!0}),r),o=(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&&u(t,e,i),i};var q={};b(q,{SkdxTextField:()=>s});module.exports=E(q);var l=require("lit"),n=require("lit/decorators.js"),m=require("../internal/define.cjs"),v=require("../internal/form-associated.cjs"),f=require("../internal/ids.cjs");var s=class extends(0,v.FormAssociated)(l.LitElement){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.inputId=(0,f.nextId)("skdx-text-field");this.hasUpdatedOnce=!1}setValue(e){this.value!==e&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}formResetCallback(){this.value=this.getAttribute("value")??""}updated(e){let a=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(a||this.dispatchEvent(new CustomEvent("skdx-text-field-internal-update")),this.syncFormState())}render(){return l.html`
+"use strict";var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var g=(r,i)=>{for(var e in i)d(r,e,{get:i[e],enumerable:!0})},A=(r,i,e,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of b(i))!E.call(r,a)&&a!==e&&d(r,a,{get:()=>i[a],enumerable:!(n=f(i,a))||n.enumerable});return r};var M=r=>A(d({},"__esModule",{value:!0}),r),s=(r,i,e,n)=>{for(var a=n>1?void 0:n?f(i,e):i,h=r.length-1,p;h>=0;h--)(p=r[h])&&(a=(n?p(i,e,a):p(a))||a);return n&&a&&d(i,e,a),a};var V={};g(V,{SkdxTextField:()=>t});module.exports=M(V);var o=require("lit"),l=require("lit/decorators.js"),m=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),c=require("../internal/form-associated.cjs"),y=require("../internal/ids.cjs"),u=require("./TextFieldAnatomy.cjs");var t=class extends(0,c.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.readOnly=!1;this.inputId=(0,y.nextId)("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{(0,m.hasAuthoredParts)(this,u.TEXT_FIELD_ANATOMY_GENERATED,u.TEXT_FIELD_RENDER_SLOTS)||(0,u.fillTextFieldAnatomy)(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(e){this.value!==e&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(e){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(n||this.dispatchEvent(new CustomEvent("skdx-text-field-internal-update")),this.syncFormState()),(e.has("clearable")||e.has("clearLabel")||e.has("placeholder")||e.has("readOnly"))&&this.fillAnatomy()}render(){return o.html`
       <div
         part="root"
-        data-disabled=${this.disabled?"":l.nothing}
-        data-invalid=${this.invalid?"":l.nothing}
+        data-disabled=${this.disabled?"":o.nothing}
+        data-invalid=${this.invalid?"":o.nothing}
       >
-        <slot></slot>
+        <slot @slotchange=${this.fillAnatomy}></slot>
       </div>
-    `}};s.styles=l.css`
+    `}};t.styles=o.css`
     :host {
       display: block;
     }
     :host([hidden]) {
       display: none;
     }
-  `,o([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),o([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"invalid",2),o([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"required",2),o([(0,n.property)({type:String})],s.prototype,"value",2),o([(0,n.property)({type:String,reflect:!0})],s.prototype,"name",2),o([(0,n.property)({attribute:"required-message"})],s.prototype,"requiredMessage",2),s=o([(0,m.customElement)("skdx-text-field","text-field","root")],s);0&&(module.exports={SkdxTextField});
+  `,s([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),s([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),s([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),s([(0,l.property)({type:String})],t.prototype,"value",2),s([(0,l.property)({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),s([(0,l.property)({type:String,reflect:!0})],t.prototype,"name",2),s([(0,l.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),s([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"clearable",2),s([(0,l.property)({type:String,attribute:"clear-label"})],t.prototype,"clearLabel",2),s([(0,l.property)({type:String})],t.prototype,"placeholder",2),s([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),t=s([(0,v.customElement)("skdx-text-field","text-field","root")],t);0&&(module.exports={SkdxTextField});

package/dist/text-field/TextField.d.cts

@@ -3,70 +3,93 @@ declare const SkdxTextField_base: typeof LitElement & (new (...args: any[]) => i
     formAssociated: boolean;
 };
 /**
- * `<skdx-text-field>` — the Web Components implementation of the shared
- * TextField contract (see `@skdx/shared`'s `textFieldContract`). Root of a
- * text field: owns the value and disabled/invalid/required state in shadow
- * DOM. Its parts (`<skdx-text-field-input>`, `<skdx-text-field-slot>`,
- * `<skdx-text-field-clear-button>`) are separate light-DOM custom elements
- * that look themselves up via `closest('skdx-text-field')` and listen for a
- * `skdx-text-field-internal-update` event this element dispatches on every
- * relevant property change — no framework/context system needed, just
- * native DOM traversal and `CustomEvent`. That event is **internal**: it is
- * this family's private root→parts channel, named like the equivalent
- * channel in every other compound family here, and its name, payload and
- * timing may change in any release.
- *
- * Form-associated via `ElementInternals`: with a `name`, the field's value is
- * submitted by the surrounding `<form>` and the wrapped input's own
- * `ValidityState` (including `required`) is mirrored onto the host, so
- * `checkValidity()`/`reportValidity()` and the browser's validation bubble
- * work as they would on a native `<input>`.
+ * Text field root: owns value and disabled/invalid/required state. Form-associated via
+ * `ElementInternals`; with a `name`, submitted by `<form>` and input's `ValidityState`
+ * mirrored to the host. Derives Input from `placeholder`/`readOnly`, Slots from
+ * `leading`/`trailing` children, ClearButton from `clearable`. No `label` or `description`
+ * prop (both belong to `<skdx-field>`).
  *
  * @example
  * ```html
- * <skdx-text-field>
- *   <skdx-text-field-slot side="start">🔍</skdx-text-field-slot>
- *   <skdx-text-field-input placeholder="Search…"></skdx-text-field-input>
- *   <skdx-text-field-clear-button>×</skdx-text-field-clear-button>
+ * <skdx-text-field clearable>
+ *   <span slot="leading" aria-hidden="true">🔍</span>
  * </skdx-text-field>
  * ```
  *
- * @csspart root - The wrapping `<div>` inside the shadow root.
- *
- * @fires value-change - Fired with the new value (string) as the user types, and when `<skdx-text-field-clear-button>` empties the field.
+ * @fires value-change - Fired with new value as user types or clears the field.
  */
 export declare class SkdxTextField extends SkdxTextField_base {
     static styles: import("lit").CSSResult;
     /** Disables the field and the wrapped input. */
     disabled: boolean;
-    /** Marks the field invalid; sets data-invalid on the root and aria-invalid/data-invalid on the input. */
+    /** Marks the field invalid; sets aria-invalid on the input. */
     invalid: boolean;
     /** Marks the wrapped input required for native form validation. */
     required: boolean;
     /** Current value. Listen for `value-change` for controlled usage. */
     value: string;
+    /**
+     * The value a form reset restores (native input's `defaultValue`). Also
+     * seeds `value` on connect when no `value` attribute was authored, making
+     * `default-value` alone a complete uncontrolled declaration. Read from the
+     * property at reset time (not attribute), since framework wrappers and
+     * `el.value = …` set the property; reading the attribute would reset a
+     * field whose value was assigned (not authored) to empty.
+     * @default '' — an empty field.
+     */
+    defaultValue: string;
     /** 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 empty. The wording is otherwise baked into the component and
-     * sealed behind the shadow root, so this is the only way to translate it or
-     * to say something the surrounding form actually cares about.
+     * Replaces the browser's required-field message. This is the only translation
+     * route, since it's sealed behind the shadow root.
      * @default undefined — keeps `'Please fill out this field.'`
      */
     requiredMessage?: string;
+    /** Derives a ClearButton that resets `value` to empty. @default false */
+    clearable: boolean;
+    /** Accessible name for the derived ClearButton. @default 'Clear' */
+    clearLabel: string;
+    /**
+     * Placeholder text for the derived Input (forwarded when the root derives one).
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Marks the derived Input read-only: the value stays focusable, selectable
+     * and submitted, and only editing is blocked.
+     * @default false
+     */
+    readOnly: boolean;
     readonly inputId: string;
     private hasUpdatedOnce;
-    /** Sets the value and notifies listeners/parts; the text it already holds is a no-op. Called by TextFieldInput/TextFieldClearButton. */
+    /**
+     * The control's `ValidityState`, live. Read it for custom error rendering
+     * (`validity.valueMissing`, etc.) instead of parsing the browser message.
+     * Reads `ElementInternals` first — it's the truth source. Native input state
+     * is mirrored into it; `setCustomValidity()` writes only there. Includes jsdom
+     * fallback and pre-mount `null`.
+     */
+    get validity(): ValidityState | null;
+    /** The message the browser would show for the current validity; `''` when valid. */
+    get validationMessage(): string;
+    /**
+     * @internal Private root→parts write channel. Called by input/clear-button
+     * parts via `closest()` — `protected` can't express cross-class access. Not
+     * consumer API; use `value` property instead. Sets the value and notifies
+     * listeners; a no-op if already set.
+     */
     setValue(next: string): void;
     private get inputElement();
     /**
-     * @internal Publishes the current value and validity to the form. Also
-     * called by `<skdx-text-field-input>` right after it renders, so the mirrored
-     * `ValidityState` is read from an input whose DOM value is already current.
+     * @internal Publishes value and validity to the form (called after input render,
+     * so `ValidityState` reads current DOM value).
      */
     syncFormState(): void;
-    /** Restores the value the `value` attribute declared, like a native input's `defaultValue`. */
+    private seeded;
+    connectedCallback(): void;
+    protected readonly fillAnatomy: () => void;
+    /** Restores the declared `defaultValue`, like a native input's own. */
     formResetCallback(): void;
     protected updated(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;

package/dist/text-field/TextField.d.ts

@@ -3,70 +3,93 @@ declare const SkdxTextField_base: typeof LitElement & (new (...args: any[]) => i
     formAssociated: boolean;
 };
 /**
- * `<skdx-text-field>` — the Web Components implementation of the shared
- * TextField contract (see `@skdx/shared`'s `textFieldContract`). Root of a
- * text field: owns the value and disabled/invalid/required state in shadow
- * DOM. Its parts (`<skdx-text-field-input>`, `<skdx-text-field-slot>`,
- * `<skdx-text-field-clear-button>`) are separate light-DOM custom elements
- * that look themselves up via `closest('skdx-text-field')` and listen for a
- * `skdx-text-field-internal-update` event this element dispatches on every
- * relevant property change — no framework/context system needed, just
- * native DOM traversal and `CustomEvent`. That event is **internal**: it is
- * this family's private root→parts channel, named like the equivalent
- * channel in every other compound family here, and its name, payload and
- * timing may change in any release.
- *
- * Form-associated via `ElementInternals`: with a `name`, the field's value is
- * submitted by the surrounding `<form>` and the wrapped input's own
- * `ValidityState` (including `required`) is mirrored onto the host, so
- * `checkValidity()`/`reportValidity()` and the browser's validation bubble
- * work as they would on a native `<input>`.
+ * Text field root: owns value and disabled/invalid/required state. Form-associated via
+ * `ElementInternals`; with a `name`, submitted by `<form>` and input's `ValidityState`
+ * mirrored to the host. Derives Input from `placeholder`/`readOnly`, Slots from
+ * `leading`/`trailing` children, ClearButton from `clearable`. No `label` or `description`
+ * prop (both belong to `<skdx-field>`).
  *
  * @example
  * ```html
- * <skdx-text-field>
- *   <skdx-text-field-slot side="start">🔍</skdx-text-field-slot>
- *   <skdx-text-field-input placeholder="Search…"></skdx-text-field-input>
- *   <skdx-text-field-clear-button>×</skdx-text-field-clear-button>
+ * <skdx-text-field clearable>
+ *   <span slot="leading" aria-hidden="true">🔍</span>
  * </skdx-text-field>
  * ```
  *
- * @csspart root - The wrapping `<div>` inside the shadow root.
- *
- * @fires value-change - Fired with the new value (string) as the user types, and when `<skdx-text-field-clear-button>` empties the field.
+ * @fires value-change - Fired with new value as user types or clears the field.
  */
 export declare class SkdxTextField extends SkdxTextField_base {
     static styles: import("lit").CSSResult;
     /** Disables the field and the wrapped input. */
     disabled: boolean;
-    /** Marks the field invalid; sets data-invalid on the root and aria-invalid/data-invalid on the input. */
+    /** Marks the field invalid; sets aria-invalid on the input. */
     invalid: boolean;
     /** Marks the wrapped input required for native form validation. */
     required: boolean;
     /** Current value. Listen for `value-change` for controlled usage. */
     value: string;
+    /**
+     * The value a form reset restores (native input's `defaultValue`). Also
+     * seeds `value` on connect when no `value` attribute was authored, making
+     * `default-value` alone a complete uncontrolled declaration. Read from the
+     * property at reset time (not attribute), since framework wrappers and
+     * `el.value = …` set the property; reading the attribute would reset a
+     * field whose value was assigned (not authored) to empty.
+     * @default '' — an empty field.
+     */
+    defaultValue: string;
     /** 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 empty. The wording is otherwise baked into the component and
-     * sealed behind the shadow root, so this is the only way to translate it or
-     * to say something the surrounding form actually cares about.
+     * Replaces the browser's required-field message. This is the only translation
+     * route, since it's sealed behind the shadow root.
      * @default undefined — keeps `'Please fill out this field.'`
      */
     requiredMessage?: string;
+    /** Derives a ClearButton that resets `value` to empty. @default false */
+    clearable: boolean;
+    /** Accessible name for the derived ClearButton. @default 'Clear' */
+    clearLabel: string;
+    /**
+     * Placeholder text for the derived Input (forwarded when the root derives one).
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Marks the derived Input read-only: the value stays focusable, selectable
+     * and submitted, and only editing is blocked.
+     * @default false
+     */
+    readOnly: boolean;
     readonly inputId: string;
     private hasUpdatedOnce;
-    /** Sets the value and notifies listeners/parts; the text it already holds is a no-op. Called by TextFieldInput/TextFieldClearButton. */
+    /**
+     * The control's `ValidityState`, live. Read it for custom error rendering
+     * (`validity.valueMissing`, etc.) instead of parsing the browser message.
+     * Reads `ElementInternals` first — it's the truth source. Native input state
+     * is mirrored into it; `setCustomValidity()` writes only there. Includes jsdom
+     * fallback and pre-mount `null`.
+     */
+    get validity(): ValidityState | null;
+    /** The message the browser would show for the current validity; `''` when valid. */
+    get validationMessage(): string;
+    /**
+     * @internal Private root→parts write channel. Called by input/clear-button
+     * parts via `closest()` — `protected` can't express cross-class access. Not
+     * consumer API; use `value` property instead. Sets the value and notifies
+     * listeners; a no-op if already set.
+     */
     setValue(next: string): void;
     private get inputElement();
     /**
-     * @internal Publishes the current value and validity to the form. Also
-     * called by `<skdx-text-field-input>` right after it renders, so the mirrored
-     * `ValidityState` is read from an input whose DOM value is already current.
+     * @internal Publishes value and validity to the form (called after input render,
+     * so `ValidityState` reads current DOM value).
      */
     syncFormState(): void;
-    /** Restores the value the `value` attribute declared, like a native input's `defaultValue`. */
+    private seeded;
+    connectedCallback(): void;
+    protected readonly fillAnatomy: () => void;
+    /** Restores the declared `defaultValue`, like a native input's own. */
     formResetCallback(): void;
     protected updated(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;

package/dist/text-field/TextField.js

@@ -1,16 +1,16 @@
-var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(o,l,e,r)=>{for(var s=r>1?void 0:r?h(l,e):l,n=o.length-1,u;n>=0;n--)(u=o[n])&&(s=(r?u(l,e,s):u(s))||s);return r&&s&&p(l,e,s),s};import{css as m,html as v,LitElement as f,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";import{FormAssociated as y}from"../internal/form-associated.js";import{nextId as b}from"../internal/ids.js";var t=class extends y(f){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.inputId=b("skdx-text-field");this.hasUpdatedOnce=!1}setValue(e){this.value!==e&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}formResetCallback(){this.value=this.getAttribute("value")??""}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(r||this.dispatchEvent(new CustomEvent("skdx-text-field-internal-update")),this.syncFormState())}render(){return v`
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(n,r,e,l)=>{for(var s=l>1?void 0:l?p(r,e):r,o=n.length-1,u;o>=0;o--)(u=n[o])&&(s=(l?u(r,e,s):u(s))||s);return l&&s&&h(r,e,s),s};import{css as f,html as m,LitElement as v,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as y}from"../internal/define.js";import{FormAssociated as b}from"../internal/form-associated.js";import{nextId as E}from"../internal/ids.js";import{fillTextFieldAnatomy as g,TEXT_FIELD_ANATOMY_GENERATED as A,TEXT_FIELD_RENDER_SLOTS as M}from"./TextFieldAnatomy.js";var t=class extends b(v){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.readOnly=!1;this.inputId=E("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{c(this,A,M)||g(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(e){this.value!==e&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(e){let l=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(l||this.dispatchEvent(new CustomEvent("skdx-text-field-internal-update")),this.syncFormState()),(e.has("clearable")||e.has("clearLabel")||e.has("placeholder")||e.has("readOnly"))&&this.fillAnatomy()}render(){return m`
       <div
         part="root"
         data-disabled=${this.disabled?"":d}
         data-invalid=${this.invalid?"":d}
       >
-        <slot></slot>
+        <slot @slotchange=${this.fillAnatomy}></slot>
       </div>
-    `}};t.styles=m`
+    `}};t.styles=f`
     :host {
       display: block;
     }
     :host([hidden]) {
       display: none;
     }
-  `,i([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([a({type:Boolean,reflect:!0})],t.prototype,"required",2),i([a({type:String})],t.prototype,"value",2),i([a({type:String,reflect:!0})],t.prototype,"name",2),i([a({attribute:"required-message"})],t.prototype,"requiredMessage",2),t=i([c("skdx-text-field","text-field","root")],t);export{t as SkdxTextField};
+  `,i([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([a({type:Boolean,reflect:!0})],t.prototype,"required",2),i([a({type:String})],t.prototype,"value",2),i([a({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([a({type:String,reflect:!0})],t.prototype,"name",2),i([a({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([a({type:Boolean,reflect:!0})],t.prototype,"clearable",2),i([a({type:String,attribute:"clear-label"})],t.prototype,"clearLabel",2),i([a({type:String})],t.prototype,"placeholder",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),t=i([y("skdx-text-field","text-field","root")],t);export{t as SkdxTextField};

package/dist/text-field/TextFieldAnatomy.cjs

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

package/dist/text-field/TextFieldAnatomy.d.cts

@@ -0,0 +1,15 @@
+import type { SkdxTextField } from './TextField.cjs';
+import './TextFieldClearButton.cjs';
+import './TextFieldInput.cjs';
+import './TextFieldSlot.cjs';
+/** @internal Marks a direct child of `<skdx-text-field>` this module generated. */
+export declare const TEXT_FIELD_ANATOMY_GENERATED = "data-skdx-text-field-generated";
+/** @internal The slot markers the derived anatomy consumes, so they do not read as hand composition. */
+export declare const TEXT_FIELD_RENDER_SLOTS: readonly ["leading", "trailing"];
+/**
+ * Builds the canonical anatomy from the root's data props: optional leading/trailing
+ * Slots, the Input (carrying `placeholder`/`readOnly`), and optional ClearButton.
+ * No label or description — those belong to `<skdx-field>`.
+ * @internal
+ */
+export declare function fillTextFieldAnatomy(root: SkdxTextField): void;

package/dist/text-field/TextFieldAnatomy.d.ts

@@ -0,0 +1,15 @@
+import type { SkdxTextField } from './TextField.js';
+import './TextFieldClearButton.js';
+import './TextFieldInput.js';
+import './TextFieldSlot.js';
+/** @internal Marks a direct child of `<skdx-text-field>` this module generated. */
+export declare const TEXT_FIELD_ANATOMY_GENERATED = "data-skdx-text-field-generated";
+/** @internal The slot markers the derived anatomy consumes, so they do not read as hand composition. */
+export declare const TEXT_FIELD_RENDER_SLOTS: readonly ["leading", "trailing"];
+/**
+ * Builds the canonical anatomy from the root's data props: optional leading/trailing
+ * Slots, the Input (carrying `placeholder`/`readOnly`), and optional ClearButton.
+ * No label or description — those belong to `<skdx-field>`.
+ * @internal
+ */
+export declare function fillTextFieldAnatomy(root: SkdxTextField): void;

package/dist/text-field/TextFieldAnatomy.js

@@ -0,0 +1 @@
+import{applyChildren as c,claimSlot as r,generatedPart as a}from"../internal/derive.js";import"./TextFieldClearButton.js";import"./TextFieldInput.js";import"./TextFieldSlot.js";var x="data-skdx-text-field-generated",m=["leading","trailing"];function b(e){let t=x,d=r(e,"leading","skdx-text-field-slot",t);d&&d.setAttribute("side","start");let n=r(e,"trailing","skdx-text-field-slot",t);n&&n.setAttribute("side","end");let l=a(e,"skdx-text-field-input",t)??document.createElement("skdx-text-field-input");l.setAttribute(t,""),e.placeholder!=null?l.setAttribute("placeholder",e.placeholder):l.removeAttribute("placeholder"),e.readOnly?l.setAttribute("readonly",""):l.removeAttribute("readonly");let i=e.clearable?a(e,"skdx-text-field-clear-button",t)??document.createElement("skdx-text-field-clear-button"):null;i&&(i.setAttribute(t,""),i.setAttribute("label",e.clearLabel)),c(e,[d,l,n,i].filter(s=>s!==null))}export{x as TEXT_FIELD_ANATOMY_GENERATED,m as TEXT_FIELD_RENDER_SLOTS,b as fillTextFieldAnatomy};

package/dist/text-field/TextFieldClearButton.cjs

@@ -1,9 +1,9 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(i,e)=>{for(var l in e)d(i,l,{get:e[l],enumerable:!0})},x=(i,e,l,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!b.call(i,t)&&t!==l&&d(i,t,{get:()=>e[t],enumerable:!(n=p(e,t))||n.enumerable});return i};var k=i=>x(d({},"__esModule",{value:!0}),i),a=(i,e,l,n)=>{for(var t=n>1?void 0:n?p(e,l):e,c=i.length-1,f;c>=0;c--)(f=i[c])&&(t=(n?f(e,l,t):f(t))||t);return n&&t&&d(e,l,t),t};var y={};v(y,{SkdxTextFieldClearButton:()=>o});module.exports=k(y);var r=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs"),s=require("../internal/styles.cjs");var o=class extends r.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.label="Clear";this.field=null;this.onFieldChange=()=>this.requestUpdate();this.handleClick=()=>{this.field?.setValue("")}}connectedCallback(){if(super.connectedCallback(),this.field=this.closest("skdx-text-field"),!this.field)throw new Error("<skdx-text-field-clear-button> must be used inside <skdx-text-field>.");this.field.addEventListener("skdx-text-field-internal-update",this.onFieldChange)}disconnectedCallback(){this.field?.removeEventListener("skdx-text-field-internal-update",this.onFieldChange),super.disconnectedCallback()}render(){let l=this.field;return l?this.forceMount||l.value!==""?r.html`
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var b=(i,e)=>{for(var l in e)d(i,l,{get:e[l],enumerable:!0})},k=(i,e,l,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!x.call(i,t)&&t!==l&&d(i,t,{get:()=>e[t],enumerable:!(n=p(e,t))||n.enumerable});return i};var v=i=>k(d({},"__esModule",{value:!0}),i),a=(i,e,l,n)=>{for(var t=n>1?void 0:n?p(e,l):e,c=i.length-1,f;c>=0;c--)(f=i[c])&&(t=(n?f(e,l,t):f(t))||t);return n&&t&&d(e,l,t),t};var y={};b(y,{SkdxTextFieldClearButton:()=>s});module.exports=v(y);var r=require("lit"),u=require("lit/decorators.js"),h=require("../internal/define.cjs"),o=require("../internal/styles.cjs");var s=class extends r.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.label="Clear";this.field=null;this.onFieldChange=()=>this.requestUpdate();this.handleClick=()=>{(this.field?.querySelector("skdx-text-field-input, skdx-password-input-field")??null)?.focus(),this.field?.setValue("")}}connectedCallback(){if(super.connectedCallback(),this.field=this.closest("skdx-text-field, skdx-password-input"),!this.field)throw new Error("<skdx-text-field-clear-button> must be used inside <skdx-text-field> or <skdx-password-input>.");this.field.addEventListener("skdx-text-field-internal-update",this.onFieldChange)}disconnectedCallback(){this.field?.removeEventListener("skdx-text-field-internal-update",this.onFieldChange),super.disconnectedCallback()}render(){let l=this.field;return l?this.forceMount||l.value!==""?r.html`
       <button part="clear-button" type="button" aria-label=${this.label} @click=${this.handleClick}>
         <slot></slot>
       </button>
-    `:r.nothing:r.nothing}};o.styles=[s.resetNativeControl,s.hiddenHostStyles,r.css`
+    `:r.nothing:r.nothing}};s.styles=[o.resetNativeControl,o.hiddenHostStyles,r.css`
       :host {
         display: contents;
       }
-    `,s.controlBoxOnHost],a([(0,h.property)({type:Boolean,attribute:"force-mount",reflect:!0})],o.prototype,"forceMount",2),a([(0,h.property)({type:String})],o.prototype,"label",2),o=a([(0,u.customElement)("skdx-text-field-clear-button","text-field","clear-button")],o);0&&(module.exports={SkdxTextFieldClearButton});
+    `,o.controlBoxOnHost],a([(0,u.property)({type:Boolean,attribute:"force-mount",reflect:!0})],s.prototype,"forceMount",2),a([(0,u.property)({type:String})],s.prototype,"label",2),s=a([(0,h.customElement)("skdx-text-field-clear-button","text-field","clear-button")],s);0&&(module.exports={SkdxTextFieldClearButton});

package/dist/text-field/TextFieldClearButton.d.cts

@@ -1,8 +1,6 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-text-field-clear-button>` — resets a `<skdx-text-field>`'s value to
- * the empty string. Renders only once the field has a non-empty value,
- * unless `force-mount` is set. Must be used inside `<skdx-text-field>`.
+ * Resets `<skdx-text-field>` to empty. Renders when field has non-empty value (unless `force-mount`). Use inside text-field or password-input.
  *
  * @example
  * ```html

package/dist/text-field/TextFieldClearButton.d.ts

@@ -1,8 +1,6 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-text-field-clear-button>` — resets a `<skdx-text-field>`'s value to
- * the empty string. Renders only once the field has a non-empty value,
- * unless `force-mount` is set. Must be used inside `<skdx-text-field>`.
+ * Resets `<skdx-text-field>` to empty. Renders when field has non-empty value (unless `force-mount`). Use inside text-field or password-input.
  *
  * @example
  * ```html

package/dist/text-field/TextFieldClearButton.js

@@ -1,9 +1,9 @@
-var f=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(n,l,i,r)=>{for(var e=r>1?void 0:r?h(l,i):l,s=n.length-1,d;s>=0;s--)(d=n[s])&&(e=(r?d(l,i,e):d(e))||e);return r&&e&&f(l,i,e),e};import{css as p,html as u,LitElement as m,nothing as a}from"lit";import{property as c}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{controlBoxOnHost as v,hiddenHostStyles as x,resetNativeControl as k}from"../internal/styles.js";var t=class extends m{constructor(){super(...arguments);this.forceMount=!1;this.label="Clear";this.field=null;this.onFieldChange=()=>this.requestUpdate();this.handleClick=()=>{this.field?.setValue("")}}connectedCallback(){if(super.connectedCallback(),this.field=this.closest("skdx-text-field"),!this.field)throw new Error("<skdx-text-field-clear-button> must be used inside <skdx-text-field>.");this.field.addEventListener("skdx-text-field-internal-update",this.onFieldChange)}disconnectedCallback(){this.field?.removeEventListener("skdx-text-field-internal-update",this.onFieldChange),super.disconnectedCallback()}render(){let i=this.field;return i?this.forceMount||i.value!==""?u`
+var f=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(n,l,i,r)=>{for(var e=r>1?void 0:r?u(l,i):l,o=n.length-1,d;o>=0;o--)(d=n[o])&&(e=(r?d(l,i,e):d(e))||e);return r&&e&&f(l,i,e),e};import{css as p,html as h,LitElement as m,nothing as a}from"lit";import{property as c}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{controlBoxOnHost as b,hiddenHostStyles as k,resetNativeControl as v}from"../internal/styles.js";var t=class extends m{constructor(){super(...arguments);this.forceMount=!1;this.label="Clear";this.field=null;this.onFieldChange=()=>this.requestUpdate();this.handleClick=()=>{(this.field?.querySelector("skdx-text-field-input, skdx-password-input-field")??null)?.focus(),this.field?.setValue("")}}connectedCallback(){if(super.connectedCallback(),this.field=this.closest("skdx-text-field, skdx-password-input"),!this.field)throw new Error("<skdx-text-field-clear-button> must be used inside <skdx-text-field> or <skdx-password-input>.");this.field.addEventListener("skdx-text-field-internal-update",this.onFieldChange)}disconnectedCallback(){this.field?.removeEventListener("skdx-text-field-internal-update",this.onFieldChange),super.disconnectedCallback()}render(){let i=this.field;return i?this.forceMount||i.value!==""?h`
       <button part="clear-button" type="button" aria-label=${this.label} @click=${this.handleClick}>
         <slot></slot>
       </button>
-    `:a:a}};t.styles=[k,x,p`
+    `:a:a}};t.styles=[v,k,p`
       :host {
         display: contents;
       }
-    `,v],o([c({type:Boolean,attribute:"force-mount",reflect:!0})],t.prototype,"forceMount",2),o([c({type:String})],t.prototype,"label",2),t=o([b("skdx-text-field-clear-button","text-field","clear-button")],t);export{t as SkdxTextFieldClearButton};
+    `,b],s([c({type:Boolean,attribute:"force-mount",reflect:!0})],t.prototype,"forceMount",2),s([c({type:String})],t.prototype,"label",2),t=s([x("skdx-text-field-clear-button","text-field","clear-button")],t);export{t as SkdxTextFieldClearButton};

package/dist/text-field/TextFieldInput.cjs

@@ -1,15 +1,22 @@
-"use strict";var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(l,i)=>{for(var e in i)a(l,e,{get:i[e],enumerable:!0})},L=(l,i,e,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of x(i))!y.call(l,t)&&t!==e&&a(l,t,{get:()=>i[t],enumerable:!(d=f(i,t))||d.enumerable});return l};var $=l=>L(a({},"__esModule",{value:!0}),l),s=(l,i,e,d)=>{for(var t=d>1?void 0:d?f(i,e):i,o=l.length-1,u;o>=0;o--)(u=l[o])&&(t=(d?u(i,e,t):u(t))||t);return d&&t&&a(i,e,t),t};var k={};g(k,{SkdxTextFieldInput:()=>n});module.exports=$(k);var r=require("lit"),p=require("lit/decorators.js"),c=require("../field/field-core.cjs"),h=require("../internal/define.cjs"),v=require("../internal/ids.cjs"),b=require("../internal/part.cjs"),m=require("../internal/styles.cjs");var n=class extends r.LitElement{constructor(){super(...arguments);this.type="text";this.field=null;this.onFieldChange=()=>this.requestUpdate();this.handleInput=e=>{this.field?.setValue(e.target.value)};this.ownLabelId=null}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){if(super.connectedCallback(),(0,m.installLightDomStyles)(),this.field=this.closest("skdx-text-field"),!this.field)throw new Error("<skdx-text-field-input> must be used inside <skdx-text-field>.");this.field.addEventListener("skdx-text-field-internal-update",this.onFieldChange)}disconnectedCallback(){this.field?.removeEventListener("skdx-text-field-internal-update",this.onFieldChange),super.disconnectedCallback()}syncLabelling(){let e=this.field,d=this.querySelector("input");if(!d||!e||e.closest(`[${c.FIELD_ROOT_ATTRIBUTE}]`))return;let t=e.closest("label");if(!t){this.ownLabelId!==null&&d.removeAttribute("aria-labelledby"),this.ownLabelId=null;return}this.ownLabelId=(0,v.ensureId)(t,"skdx-text-field","label"),d.setAttribute("aria-labelledby",this.ownLabelId)}updated(){this.field?.syncFormState(),this.syncLabelling(),(0,b.reflectHostState)(this,{"data-disabled":this.field?.disabled?"":null,"data-invalid":this.field?.invalid?"":null})}render(){let e=this.field;return e?r.html`
+"use strict";var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var L=(n,r)=>{for(var e in r)o(n,e,{get:r[e],enumerable:!0})},$=(n,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of y(r))!g.call(n,t)&&t!==e&&o(n,t,{get:()=>r[t],enumerable:!(a=h(r,t))||a.enumerable});return n};var E=n=>$(o({},"__esModule",{value:!0}),n),d=(n,r,e,a)=>{for(var t=a>1?void 0:a?h(r,e):r,u=n.length-1,p;u>=0;u--)(p=n[u])&&(t=(a?p(r,e,t):p(t))||t);return a&&t&&o(r,e,t),t};var w={};L(w,{SkdxTextFieldInput:()=>l});module.exports=E(w);var i=require("lit"),s=require("lit/decorators.js"),c=require("../field/field-core.cjs"),f=require("../internal/define.cjs"),m=require("../internal/ids.cjs"),b=require("../internal/part.cjs"),v=require("../internal/styles.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.type="text";this.readOnly=!1;this.inputMode="";this.field=null;this.onFieldChange=()=>this.requestUpdate();this.handleInput=e=>{this.field?.setValue(e.target.value)};this.ownLabelId=null}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){if(super.connectedCallback(),(0,v.installLightDomStyles)(),this.field=this.closest("skdx-text-field"),!this.field)throw new Error("<skdx-text-field-input> must be used inside <skdx-text-field>.");this.field.addEventListener("skdx-text-field-internal-update",this.onFieldChange)}disconnectedCallback(){this.field?.removeEventListener("skdx-text-field-internal-update",this.onFieldChange),super.disconnectedCallback()}syncLabelling(){let e=this.field,a=this.querySelector("input");if(!a||!e||e.closest(`[${c.FIELD_ROOT_ATTRIBUTE}]`))return;let t=e.closest("label");if(!t){this.ownLabelId!==null&&a.removeAttribute("aria-labelledby"),this.ownLabelId=null;return}this.ownLabelId=(0,m.ensureId)(t,"skdx-text-field","label"),a.setAttribute("aria-labelledby",this.ownLabelId)}updated(){this.field?.syncFormState(),this.syncLabelling(),(0,b.reflectHostState)(this,{"data-disabled":this.field?.disabled?"":null,"data-invalid":this.field?.invalid?"":null})}render(){let e=this.field;return e?i.html`
       <input
         part="input"
         id=${e.inputId}
         type=${this.type}
-        placeholder=${this.placeholder??r.nothing}
+        placeholder=${this.placeholder??i.nothing}
+        pattern=${this.pattern??i.nothing}
+        minlength=${this.minLength??i.nothing}
+        maxlength=${this.maxLength??i.nothing}
+        autocomplete=${this.autocomplete??i.nothing}
+        inputmode=${this.inputMode||i.nothing}
+        aria-describedby=${this.ariaDescribedBy??i.nothing}
         .value=${e.value}
+        ?readonly=${this.readOnly}
         ?disabled=${e.disabled}
         ?required=${e.required}
-        aria-invalid=${e.invalid?"true":r.nothing}
-        data-disabled=${e.disabled?"":r.nothing}
-        data-invalid=${e.invalid?"":r.nothing}
+        aria-invalid=${e.invalid?"true":i.nothing}
+        data-disabled=${e.disabled?"":i.nothing}
+        data-invalid=${e.invalid?"":i.nothing}
         @input=${this.handleInput}
       />
-    `:r.nothing}};s([(0,p.property)({type:String,reflect:!0})],n.prototype,"type",2),s([(0,p.property)({type:String})],n.prototype,"placeholder",2),n=s([(0,h.customElement)("skdx-text-field-input","text-field","input")],n);0&&(module.exports={SkdxTextFieldInput});
+    `:i.nothing}};d([(0,s.property)({type:String,reflect:!0})],l.prototype,"type",2),d([(0,s.property)({type:String})],l.prototype,"placeholder",2),d([(0,s.property)({type:Boolean,reflect:!0})],l.prototype,"readOnly",2),d([(0,s.property)({type:String,reflect:!0})],l.prototype,"pattern",2),d([(0,s.property)({type:Number,reflect:!0,attribute:"minlength"})],l.prototype,"minLength",2),d([(0,s.property)({type:Number,reflect:!0,attribute:"maxlength"})],l.prototype,"maxLength",2),d([(0,s.property)({type:String,reflect:!0})],l.prototype,"autocomplete",2),d([(0,s.property)({type:String,attribute:"inputmode"})],l.prototype,"inputMode",2),d([(0,s.property)({type:String,attribute:"aria-describedby"})],l.prototype,"ariaDescribedBy",2),l=d([(0,f.customElement)("skdx-text-field-input","text-field","input")],l);0&&(module.exports={SkdxTextFieldInput});

package/dist/text-field/TextFieldInput.d.cts

@@ -1,41 +1,8 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-text-field-input>` — the native `<input>` for a `<skdx-text-field>`.
- * Looks up its ancestor `<skdx-text-field>` via `closest()` and reads/writes
- * its value/disabled/required/invalid, re-rendering whenever the field
- * dispatches `skdx-text-field-internal-update`. Must be used inside
- * `<skdx-text-field>`.
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-combobox-input>` and `<skdx-command-input>`
- * do, and it was the last of the input elements still behind a shadow
- * boundary. Both ways of naming the control were broken while it was:
- *
- *   - `<skdx-field>` could not find it *at all*. `findFieldControl()` matches
- *     with `root.querySelectorAll(…)`, which does not pierce a shadow root,
- *     and this element sets no `data-skdx-field-control` to opt in — so a
- *     `<skdx-field>` wrapping a text field wired up no `aria-labelledby`,
- *     `aria-describedby` or `aria-invalid`, and the control had no accessible
- *     name.
- *   - A wrapping `<label>` could not name it either: a label names its first
- *     labelable *descendant*, and the `<input>` was in another tree.
- *
- * `<skdx-field>` works now, because the `<input>` is in the same tree as the
- * label. A wrapping `<label>` needs one more step, and it is worth being
- * precise about why. `<skdx-text-field>` is form-associated, and a
- * form-associated custom element *is* a labelable element — so the host, not
- * the `<input>`, is the first labelable descendant a wrapping `<label>` finds,
- * and `label.control` is the host however the tree is arranged. That leaves the
- * name on an element with no role that never takes focus, while the `<input>`
- * the user actually reaches stays anonymous. So the association is mirrored onto
- * the `<input>` with `aria-labelledby` (`syncLabelling()` below), which is what
- * puts the name where it is announced.
- *
- * Note what still does not work: `<label for="…">` pointing at this element. The
- * `id` lands on `<skdx-text-field-input>`, which — unlike the field host — is not
- * form-associated and so is not labelable, and the `id` the `<input>` itself
- * carries is {@link SkdxTextField.inputId} — generated, so a consumer cannot name
- * it in advance. Use either form below instead.
+ * Native `<input>` for `<skdx-text-field>` (must be inside it). Renders light DOM
+ * so labels/fields can reach it. `<label for="">` can't point here; use wrapping label
+ * or `<skdx-field>`.
  *
  * @example Wrapping label — its name is mirrored onto the `<input>`.
  * ```html
@@ -57,18 +24,14 @@ import { LitElement, nothing } from 'lit';
  * </skdx-field>
  * ```
  *
- * @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-text-field-input > input { … }`.
+ * @csspart input - The native `<input>`. `::part()` does not reach light DOM; style as `skdx-text-field-input > input { … }`.
  */
 export declare class SkdxTextFieldInput extends LitElement {
     /** Light DOM, for the labelling 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
+     * Reaches through to the native `<input>`. A shadow root with
+     * `delegatesFocus` would do this for free; this light-DOM element has to
      * forward focus itself.
      */
     focus(options?: FocusOptions): void;
@@ -79,6 +42,37 @@ export declare class SkdxTextFieldInput extends LitElement {
      * @default undefined — no placeholder.
      */
     placeholder?: string;
+    /** Native `<input>` `readonly`: the value is selectable and submitted, but not editable. @default false */
+    readOnly: boolean;
+    /** Native `<input>` `pattern` — a regular expression the value has to match for constraint validation. @default undefined */
+    pattern?: string;
+    /**
+     * Native `<input>` `minlength` — shortest value constraint validation accepts, reported as `tooShort`.
+     * Only fires after a user edit; pair with `required` when an empty field must also fail.
+     * @default undefined — no lower bound on the value's length.
+     */
+    minLength?: number;
+    /**
+     * Native `<input>` `maxlength` — longest value the field accepts, reported as `tooLong`.
+     * Browser caps typing and truncates pastes; only user edits are reported, never code assignments.
+     * @default undefined — no upper bound on the value's length.
+     */
+    maxLength?: number;
+    /** Native `<input>` `autocomplete`, e.g. `'username'`, `'current-password'`, `'off'`. @default undefined */
+    autocomplete?: string;
+    /**
+     * Native `<input>` `inputmode`, which picks the on-screen keyboard.
+     * Overrides `HTMLElement.inputMode` (which reflects to host, not the element receiving focus).
+     * @default '' — the platform's default keyboard.
+     */
+    inputMode: string;
+    /**
+     * `aria-describedby` for the `<input>`, so hints or error messages are announced.
+     * Written on the input (not the host) since the host carries no role.
+     * Inside `<skdx-field>`, the Field folds its own description and error ids alongside this.
+     * @default undefined
+     */
+    ariaDescribedBy?: string;
     private field;
     private readonly onFieldChange;
     connectedCallback(): void;