@skdx/web-components 0.26.0

package/dist/tags-input/TagsInputItem.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tags-input-item>` — a single rendered tag within a
+ * `<skdx-tags-input>`. Renders `display: contents` plus `data-disabled`
+ * mirroring the root; typically wraps the tag's label and a
+ * `<skdx-tags-input-item-delete>` button. Must be used inside
+ * `<skdx-tags-input>`.
+ */
+export declare class SkdxTagsInputItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** This tag's position in the list, zero-based. */
+    index: number;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private syncDisabled;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tags-input-item': SkdxTagsInputItem;
+    }
+}

package/dist/tags-input/TagsInputItem.js

@@ -0,0 +1,5 @@
+var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(o,s,r,i)=>{for(var t=i>1?void 0:i?p(s,r):s,a=o.length-1,d;a>=0;a--)(d=o[a])&&(t=(i?d(s,r,t):d(t))||t);return i&&t&&l(s,r,t),t};import{css as c,html as u,LitElement as h}from"lit";import{property as m}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";var e=class extends h{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.syncDisabled()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item> must be used inside <skdx-tags-input>.");this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),this.syncDisabled()}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}syncDisabled(){this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return u`<slot></slot>`}};e.styles=c`
+    :host {
+      display: contents;
+    }
+  `,n([m({type:Number})],e.prototype,"index",2),e=n([b("skdx-tags-input-item","tags-input","item")],e);export{e as SkdxTagsInputItem};

package/dist/tags-input/TagsInputItemDelete.cjs

@@ -0,0 +1,16 @@
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},x=(o,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!k.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return o};var y=o=>x(l({},"__esModule",{value:!0}),o),n=(o,e,i,s)=>{for(var t=s>1?void 0:s?u(e,i):e,p=o.length-1,c;p>=0;p--)(c=o[p])&&(t=(s?c(e,i,t):c(t))||t);return s&&t&&l(e,i,t),t};var C={};f(C,{SkdxTagsInputItemDelete:()=>r});module.exports=y(C);var d=require("lit"),h=require("lit/decorators.js"),b=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs"),v=require("./TagsInput.cjs");var r=class extends d.LitElement{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{!this.root||this.root.disabled||((0,v.focusDeleteNeighbor)(this),this.root.removeTag(this.index))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-delete> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-delete",""),this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null})}render(){let i=this.root,s=this.label??`Remove ${i?.value[this.index]??""}`.trim(),t=!!i?.disabled;return d.html`
+      <button
+        part="delete"
+        type="button"
+        aria-label=${s}
+        ?disabled=${t}
+        data-disabled=${t?"":d.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};r.shadowRootOptions=a.delegatesFocusShadowRootOptions,r.styles=[a.resetNativeControl,a.hiddenHostStyles,d.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],n([(0,h.property)({type:Number})],r.prototype,"index",2),n([(0,h.property)({type:String})],r.prototype,"label",2),r=n([(0,b.customElement)("skdx-tags-input-item-delete","tags-input","item-delete")],r);0&&(module.exports={SkdxTagsInputItemDelete});

package/dist/tags-input/TagsInputItemDelete.d.cts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tags-input-item-delete>` — removes its associated tag (by `index`)
+ * from the closest `<skdx-tags-input>` on click. Renders a native
+ * `<button type="button">` in shadow DOM with an auto-generated
+ * `aria-label="Remove <tag>"`, disabled + `data-disabled` when the root is
+ * disabled. Must be used inside `<skdx-tags-input>`.
+ *
+ * Because the button is its own tab stop, it hands focus to the next delete
+ * button (or the previous one, or the draft field) *before* removing the tag,
+ * so deleting a tag never drops focus onto `<body>`.
+ *
+ * @csspart delete - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxTagsInputItemDelete extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The tag's position in the list to remove on click, zero-based. */
+    index: number;
+    /**
+     * Accessible name for the inner `<button>`, replacing the generated
+     * `Remove <tag>`. The button lives in this element's shadow root, so an
+     * `aria-label` written on the host names nothing — this property is the only
+     * way in from markup, and "Remove" is not a word in every language. Set it
+     * per tag (the whole string, not a prefix), since it is what distinguishes
+     * one delete button from the next.
+     * @default undefined — keeps `` `Remove ${tag}` ``
+     */
+    label?: string;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tags-input-item-delete': SkdxTagsInputItemDelete;
+    }
+}

package/dist/tags-input/TagsInputItemDelete.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tags-input-item-delete>` — removes its associated tag (by `index`)
+ * from the closest `<skdx-tags-input>` on click. Renders a native
+ * `<button type="button">` in shadow DOM with an auto-generated
+ * `aria-label="Remove <tag>"`, disabled + `data-disabled` when the root is
+ * disabled. Must be used inside `<skdx-tags-input>`.
+ *
+ * Because the button is its own tab stop, it hands focus to the next delete
+ * button (or the previous one, or the draft field) *before* removing the tag,
+ * so deleting a tag never drops focus onto `<body>`.
+ *
+ * @csspart delete - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxTagsInputItemDelete extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The tag's position in the list to remove on click, zero-based. */
+    index: number;
+    /**
+     * Accessible name for the inner `<button>`, replacing the generated
+     * `Remove <tag>`. The button lives in this element's shadow root, so an
+     * `aria-label` written on the host names nothing — this property is the only
+     * way in from markup, and "Remove" is not a word in every language. Set it
+     * per tag (the whole string, not a prefix), since it is what distinguishes
+     * one delete button from the next.
+     * @default undefined — keeps `` `Remove ${tag}` ``
+     */
+    label?: string;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tags-input-item-delete': SkdxTagsInputItemDelete;
+    }
+}

package/dist/tags-input/TagsInputItemDelete.js

@@ -0,0 +1,16 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(d,s,o,i)=>{for(var t=i>1?void 0:i?c(s,o):s,a=d.length-1,l;a>=0;a--)(l=d[a])&&(t=(i?l(s,o,t):l(t))||t);return i&&t&&p(s,o,t),t};import{css as h,html as u,LitElement as b,nothing as m}from"lit";import{property as n}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as g}from"../internal/part.js";import{controlBoxOnHost as k,delegatesFocusShadowRootOptions as f,hiddenHostStyles as x,resetNativeControl as y}from"../internal/styles.js";import{focusDeleteNeighbor as C}from"./TagsInput.js";var e=class extends b{constructor(){super(...arguments);this.index=0;this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{!this.root||this.root.disabled||(C(this),this.root.removeTag(this.index))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-tags-input"),!this.root)throw new Error("<skdx-tags-input-item-delete> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-delete",""),this.root.addEventListener("skdx-tags-input-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-tags-input-internal-update",this.handleRootUpdate),super.disconnectedCallback()}updated(){g(this,{"data-disabled":this.root?.disabled?"":null})}render(){let o=this.root,i=this.label??`Remove ${o?.value[this.index]??""}`.trim(),t=!!o?.disabled;return u`
+      <button
+        part="delete"
+        type="button"
+        aria-label=${i}
+        ?disabled=${t}
+        data-disabled=${t?"":m}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=f,e.styles=[y,x,h`
+      :host {
+        display: inline-block;
+      }
+    `,k],r([n({type:Number})],e.prototype,"index",2),r([n({type:String})],e.prototype,"label",2),e=r([v("skdx-tags-input-item-delete","tags-input","item-delete")],e);export{e as SkdxTagsInputItemDelete};

package/dist/tags-input/index.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of d(t))!f.call(e,p)&&p!==o&&r(e,p,{get:()=>t[p],enumerable:!(x=a(t,p))||x.enumerable});return e};var s=e=>k(r({},"__esModule",{value:!0}),e);var S={};g(S,{SkdxTagsInput:()=>I.SkdxTagsInput,SkdxTagsInputInput:()=>u.SkdxTagsInputInput,SkdxTagsInputItem:()=>m.SkdxTagsInputItem,SkdxTagsInputItemDelete:()=>n.SkdxTagsInputItemDelete});module.exports=s(S);var I=require("./TagsInput.cjs"),m=require("./TagsInputItem.cjs"),n=require("./TagsInputItemDelete.cjs"),u=require("./TagsInputInput.cjs");0&&(module.exports={SkdxTagsInput,SkdxTagsInputInput,SkdxTagsInputItem,SkdxTagsInputItemDelete});

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

@@ -0,0 +1,4 @@
+export { SkdxTagsInput } from './TagsInput.cjs';
+export { SkdxTagsInputItem } from './TagsInputItem.cjs';
+export { SkdxTagsInputItemDelete } from './TagsInputItemDelete.cjs';
+export { SkdxTagsInputInput } from './TagsInputInput.cjs';

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

@@ -0,0 +1,4 @@
+export { SkdxTagsInput } from './TagsInput.js';
+export { SkdxTagsInputItem } from './TagsInputItem.js';
+export { SkdxTagsInputItemDelete } from './TagsInputItemDelete.js';
+export { SkdxTagsInputInput } from './TagsInputInput.js';

package/dist/tags-input/index.js

@@ -0,0 +1 @@
+import{SkdxTagsInput as p}from"./TagsInput.js";import{SkdxTagsInputItem as r}from"./TagsInputItem.js";import{SkdxTagsInputItemDelete as I}from"./TagsInputItemDelete.js";import{SkdxTagsInputInput as n}from"./TagsInputInput.js";export{p as SkdxTagsInput,n as SkdxTagsInputInput,r as SkdxTagsInputItem,I as SkdxTagsInputItemDelete};

package/dist/text-field/TextField.cjs

@@ -0,0 +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`
+      <div
+        part="root"
+        data-disabled=${this.disabled?"":l.nothing}
+        data-invalid=${this.invalid?"":l.nothing}
+      >
+        <slot></slot>
+      </div>
+    `}};s.styles=l.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});

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

@@ -0,0 +1,79 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const SkdxTextField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    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>`.
+ *
+ * @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>
+ * ```
+ *
+ * @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.
+ */
+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. */
+    invalid: boolean;
+    /** Marks the wrapped input required for native form validation. */
+    required: boolean;
+    /** Current value. Listen for `value-change` for controlled usage. */
+    value: 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.
+     * @default undefined — keeps `'Please fill out this field.'`
+     */
+    requiredMessage?: string;
+    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. */
+    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.
+     */
+    syncFormState(): void;
+    /** Restores the value the `value` attribute declared, like a native input's `defaultValue`. */
+    formResetCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text-field': SkdxTextField;
+    }
+}
+export {};

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

@@ -0,0 +1,79 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const SkdxTextField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    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>`.
+ *
+ * @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>
+ * ```
+ *
+ * @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.
+ */
+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. */
+    invalid: boolean;
+    /** Marks the wrapped input required for native form validation. */
+    required: boolean;
+    /** Current value. Listen for `value-change` for controlled usage. */
+    value: 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.
+     * @default undefined — keeps `'Please fill out this field.'`
+     */
+    requiredMessage?: string;
+    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. */
+    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.
+     */
+    syncFormState(): void;
+    /** Restores the value the `value` attribute declared, like a native input's `defaultValue`. */
+    formResetCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text-field': SkdxTextField;
+    }
+}
+export {};

package/dist/text-field/TextField.js

@@ -0,0 +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`
+      <div
+        part="root"
+        data-disabled=${this.disabled?"":d}
+        data-invalid=${this.invalid?"":d}
+      >
+        <slot></slot>
+      </div>
+    `}};t.styles=m`
+    :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};

package/dist/text-field/TextFieldClearButton.cjs

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

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

@@ -0,0 +1,40 @@
+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>`.
+ *
+ * @example
+ * ```html
+ * <skdx-text-field>
+ *   <skdx-text-field-input></skdx-text-field-input>
+ *   <skdx-text-field-clear-button>×</skdx-text-field-clear-button>
+ * </skdx-text-field>
+ * ```
+ *
+ * @csspart clear-button - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxTextFieldClearButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Keep mounted even when the field is empty (for exit animations). @default false */
+    forceMount: boolean;
+    /**
+     * Accessible name for the inner `<button>`. The button lives in this
+     * element's shadow root, so an `aria-label` written on the host names
+     * nothing — this property is the only way in from markup. "Clear" is also
+     * anonymous next to several fields on one form; "Clear search" is better.
+     * @default 'Clear'
+     */
+    label: string;
+    private field;
+    private readonly onFieldChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text-field-clear-button': SkdxTextFieldClearButton;
+    }
+}

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

@@ -0,0 +1,40 @@
+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>`.
+ *
+ * @example
+ * ```html
+ * <skdx-text-field>
+ *   <skdx-text-field-input></skdx-text-field-input>
+ *   <skdx-text-field-clear-button>×</skdx-text-field-clear-button>
+ * </skdx-text-field>
+ * ```
+ *
+ * @csspart clear-button - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxTextFieldClearButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Keep mounted even when the field is empty (for exit animations). @default false */
+    forceMount: boolean;
+    /**
+     * Accessible name for the inner `<button>`. The button lives in this
+     * element's shadow root, so an `aria-label` written on the host names
+     * nothing — this property is the only way in from markup. "Clear" is also
+     * anonymous next to several fields on one form; "Clear search" is better.
+     * @default 'Clear'
+     */
+    label: string;
+    private field;
+    private readonly onFieldChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text-field-clear-button': SkdxTextFieldClearButton;
+    }
+}

package/dist/text-field/TextFieldClearButton.js

@@ -0,0 +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`
+      <button part="clear-button" type="button" aria-label=${this.label} @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `:a:a}};t.styles=[k,x,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};

package/dist/text-field/TextFieldInput.cjs

@@ -0,0 +1,15 @@
+"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`
+      <input
+        part="input"
+        id=${e.inputId}
+        type=${this.type}
+        placeholder=${this.placeholder??r.nothing}
+        .value=${e.value}
+        ?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}
+        @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});

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

@@ -0,0 +1,112 @@
+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.
+ *
+ * @example Wrapping label — its name is mirrored onto the `<input>`.
+ * ```html
+ * <label>
+ *   Email
+ *   <skdx-text-field>
+ *     <skdx-text-field-input type="email"></skdx-text-field-input>
+ *   </skdx-text-field>
+ * </label>
+ * ```
+ *
+ * @example `<skdx-field>` — also wires description, error and `aria-invalid`.
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Email</skdx-field-label>
+ *   <skdx-text-field>
+ *     <skdx-text-field-input type="email"></skdx-text-field-input>
+ *   </skdx-text-field>
+ * </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 { … }`.
+ */
+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
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /** Native `<input>` `type` attribute, e.g. `'text'`, `'email'`, `'password'`. @default 'text' */
+    type: string;
+    /**
+     * Placeholder text passed straight through to the native input.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    private field;
+    private readonly onFieldChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleInput;
+    /** The label id this element wrote, so removing the label clears only what it put there. */
+    private ownLabelId;
+    /**
+     * Points the `<input>` at a wrapping `<label>` with `aria-labelledby`.
+     *
+     * The label itself is associated with the `<skdx-text-field>` host — it is
+     * form-associated, so it is labelable and the label's search for a labelable
+     * descendant stops there (see the class docblock). The host has no role and
+     * takes no focus, so without this the name is computed onto a generic wrapper
+     * and the `<input>` has none.
+     *
+     * Stays out of the way inside a Field, which owns `aria-labelledby` there and
+     * merges the description, error and character-count ids into the same
+     * attribute — writing the label's id over it would drop them. Checking for
+     * the Field rather than for a value already on the `<input>` keeps this
+     * independent of which of the two renders last.
+     */
+    private syncLabelling;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-text-field-input': SkdxTextFieldInput;
+    }
+}