@skdx/web-components 0.26.0

package/dist/field/FieldCharacterCount.d.cts

@@ -0,0 +1,72 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * `<skdx-field-character-count>` — a running character count for the control a
+ * `<skdx-field>` wraps: GOV.UK's pattern, which works the same for a
+ * `<skdx-textarea>` and a `<skdx-text-field>` because the count belongs to the
+ * field, not to the control.
+ *
+ * `max-length` is a *soft* limit: it is deliberately not set as the control's
+ * native `maxlength`, because that truncates silently and leaves the user with
+ * no idea their text was cut. Going over it instead makes the Field invalid
+ * through the same path as any other error — `data-invalid`, `aria-invalid` on
+ * the control, a message in `<skdx-field-error>`, and a blocked submit — plus
+ * `data-over-limit` here and on the Field for styling.
+ *
+ * Nothing here is a live region. The count is announced through the shared
+ * announcer one typing pause after the last keystroke, so a screen reader hears
+ * one number instead of a running commentary over every character typed.
+ *
+ * Below the threshold the host is `hidden` and drops
+ * `data-skdx-field-character-count` entirely — a custom element cannot un-author
+ * the tag the consumer wrote, so it stops *being* a character count instead,
+ * the same way React simply renders nothing.
+ *
+ * @csspart character-count - The `<span>` element inside the shadow root.
+ * @slot - Custom copy replacing the default "N characters remaining" message.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Why are you applying?</skdx-field-label>
+ *   <textarea></textarea>
+ *   <skdx-field-character-count max-length="200" threshold="75"></skdx-field-character-count>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldCharacterCount extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The soft limit. Deliberately not the control's native `maxlength`, which
+     * silently truncates instead of telling the user they went over.
+     */
+    maxLength: number;
+    /**
+     * Percentage of `maxLength` that must be typed before the count appears at
+     * all — GOV.UK's way of keeping a long field quiet until it matters.
+     * @default 0 — visible from the first render.
+     */
+    threshold: number;
+    /**
+     * Cached, not looked up per call: `disconnectedCallback` runs *after* the
+     * element has left the tree, so `closest()` would already answer `null` at
+     * exactly the moment the count has to be unregistered.
+     */
+    private field;
+    /** Characters currently in the field's control. */
+    private get count();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(): void;
+    private register;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-character-count': SkdxFieldCharacterCount;
+    }
+}

package/dist/field/FieldCharacterCount.d.ts

@@ -0,0 +1,72 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * `<skdx-field-character-count>` — a running character count for the control a
+ * `<skdx-field>` wraps: GOV.UK's pattern, which works the same for a
+ * `<skdx-textarea>` and a `<skdx-text-field>` because the count belongs to the
+ * field, not to the control.
+ *
+ * `max-length` is a *soft* limit: it is deliberately not set as the control's
+ * native `maxlength`, because that truncates silently and leaves the user with
+ * no idea their text was cut. Going over it instead makes the Field invalid
+ * through the same path as any other error — `data-invalid`, `aria-invalid` on
+ * the control, a message in `<skdx-field-error>`, and a blocked submit — plus
+ * `data-over-limit` here and on the Field for styling.
+ *
+ * Nothing here is a live region. The count is announced through the shared
+ * announcer one typing pause after the last keystroke, so a screen reader hears
+ * one number instead of a running commentary over every character typed.
+ *
+ * Below the threshold the host is `hidden` and drops
+ * `data-skdx-field-character-count` entirely — a custom element cannot un-author
+ * the tag the consumer wrote, so it stops *being* a character count instead,
+ * the same way React simply renders nothing.
+ *
+ * @csspart character-count - The `<span>` element inside the shadow root.
+ * @slot - Custom copy replacing the default "N characters remaining" message.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Why are you applying?</skdx-field-label>
+ *   <textarea></textarea>
+ *   <skdx-field-character-count max-length="200" threshold="75"></skdx-field-character-count>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldCharacterCount extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The soft limit. Deliberately not the control's native `maxlength`, which
+     * silently truncates instead of telling the user they went over.
+     */
+    maxLength: number;
+    /**
+     * Percentage of `maxLength` that must be typed before the count appears at
+     * all — GOV.UK's way of keeping a long field quiet until it matters.
+     * @default 0 — visible from the first render.
+     */
+    threshold: number;
+    /**
+     * Cached, not looked up per call: `disconnectedCallback` runs *after* the
+     * element has left the tree, so `closest()` would already answer `null` at
+     * exactly the moment the count has to be unregistered.
+     */
+    private field;
+    /** Characters currently in the field's control. */
+    private get count();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(): void;
+    private register;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-character-count': SkdxFieldCharacterCount;
+    }
+}

package/dist/field/FieldCharacterCount.js

@@ -0,0 +1,10 @@
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var o=(l,r,e,t)=>{for(var i=t>1?void 0:t?m(r,e):r,h=l.length-1,d;h>=0;h--)(d=l[h])&&(i=(t?d(r,e,i):d(i))||i);return t&&i&&c(r,e,i),i};import{css as p,html as u,LitElement as v}from"lit";import{property as a}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{characterCountMessage as b,characterCountVisible as g,FIELD_CHARACTER_COUNT_ATTRIBUTE as n}from"./field-core.js";var s=class extends v{constructor(){super(...arguments);this.maxLength=0;this.threshold=0;this.field=null}get count(){return this.field?.count??0}connectedCallback(){super.connectedCallback(),this.field=this.closest("skdx-field, skdx-fieldset"),this.register(),this.sync()}disconnectedCallback(){this.field?.setCharacterCount?.(null),this.field=null,super.disconnectedCallback()}refresh(){this.sync(),this.requestUpdate()}willUpdate(e){(e.has("maxLength")||e.has("threshold"))&&this.register()}updated(){this.sync()}register(){this.field?.setCharacterCount?.({maxLength:this.maxLength,threshold:this.threshold})}sync(){let e=this.count,t=g(e,this.maxLength,this.threshold);this.hidden=!t,t?this.setAttribute(n,""):this.removeAttribute(n),t&&this.maxLength-e<0?this.setAttribute("data-over-limit",""):this.removeAttribute("data-over-limit")}render(){return u`<span part="character-count"
+      ><slot>${b(this.maxLength-this.count)}</slot></span
+    >`}};s.styles=p`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,o([a({type:Number,attribute:"max-length"})],s.prototype,"maxLength",2),o([a({type:Number})],s.prototype,"threshold",2),s=o([f("skdx-field-character-count","field","character-count")],s);export{s as SkdxFieldCharacterCount};

package/dist/field/FieldDescription.cjs

@@ -0,0 +1,5 @@
+"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(i,e)=>{for(var r in e)l(i,r,{get:e[r],enumerable:!0})},k=(i,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(i,t)&&t!==r&&l(i,t,{get:()=>e[t],enumerable:!(d=p(e,t))||d.enumerable});return i};var I=i=>k(l({},"__esModule",{value:!0}),i),a=(i,e,r,d)=>{for(var t=d>1?void 0:d?p(e,r):e,n=i.length-1,c;n>=0;n--)(c=i[n])&&(t=(d?c(e,r,t):c(t))||t);return d&&t&&l(e,r,t),t};var x={};v(x,{SkdxFieldDescription:()=>s});module.exports=I(x);var o=require("lit"),f=require("../internal/define.cjs"),m=require("./field-core.cjs");var s=class extends o.LitElement{get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.setAttribute(m.FIELD_DESCRIPTION_ATTRIBUTE,""),this.refresh()}refresh(){let e=this.field;e?.descriptionId&&this.id!==e.descriptionId&&(this.id=e.descriptionId)}updated(){this.refresh()}render(){return o.html`<span part="description"><slot></slot></span>`}};s.styles=o.css`
+    :host {
+      display: block;
+    }
+  `,s=a([(0,f.customElement)("skdx-field-description","field","description")],s);0&&(module.exports={SkdxFieldDescription});

package/dist/field/FieldDescription.d.cts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-field-description>` — help text for a `<skdx-field>`. Takes the field's
+ * `descriptionId` as its **own host id** and carries
+ * `data-skdx-field-description` on the host too, because that is what the
+ * field's controller scans the light DOM for before merging the id into the
+ * control's `aria-describedby` — so the text is announced *with* the control
+ * instead of being left to be discovered by browsing.
+ *
+ * @csspart description - The `<span>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Password</skdx-field-label>
+ *   <input type="password" />
+ *   <skdx-field-description>At least 12 characters.</skdx-field-description>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-description': SkdxFieldDescription;
+    }
+}

package/dist/field/FieldDescription.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-field-description>` — help text for a `<skdx-field>`. Takes the field's
+ * `descriptionId` as its **own host id** and carries
+ * `data-skdx-field-description` on the host too, because that is what the
+ * field's controller scans the light DOM for before merging the id into the
+ * control's `aria-describedby` — so the text is announced *with* the control
+ * instead of being left to be discovered by browsing.
+ *
+ * @csspart description - The `<span>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Password</skdx-field-label>
+ *   <input type="password" />
+ *   <skdx-field-description>At least 12 characters.</skdx-field-description>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-description': SkdxFieldDescription;
+    }
+}

package/dist/field/FieldDescription.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(d,e,s,r)=>{for(var t=r>1?void 0:r?p(e,s):e,o=d.length-1,l;o>=0;o--)(l=d[o])&&(t=(r?l(e,s,t):l(t))||t);return r&&t&&c(e,s,t),t};import{css as a,html as f,LitElement as m}from"lit";import{customElement as h}from"../internal/define.js";import{FIELD_DESCRIPTION_ATTRIBUTE as u}from"./field-core.js";var i=class extends m{get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.setAttribute(u,""),this.refresh()}refresh(){let e=this.field;e?.descriptionId&&this.id!==e.descriptionId&&(this.id=e.descriptionId)}updated(){this.refresh()}render(){return f`<span part="description"><slot></slot></span>`}};i.styles=a`
+    :host {
+      display: block;
+    }
+  `,i=n([h("skdx-field-description","field","description")],i);export{i as SkdxFieldDescription};

package/dist/field/FieldError.cjs

@@ -0,0 +1,8 @@
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var x=(i,t)=>{for(var s in t)n(i,s,{get:t[s],enumerable:!0})},v=(i,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!u.call(i,e)&&e!==s&&n(i,e,{get:()=>t[e],enumerable:!(r=m(t,e))||r.enumerable});return i};var g=i=>v(n({},"__esModule",{value:!0}),i),c=(i,t,s,r)=>{for(var e=r>1?void 0:r?m(t,s):t,l=i.length-1,h;l>=0;l--)(h=i[l])&&(e=(r?h(t,s,e):h(e))||e);return r&&e&&n(t,s,e),e};var b={};x(b,{SkdxFieldError:()=>o});module.exports=g(b);var d=require("lit"),f=require("../internal/define.cjs"),a=require("./field-core.cjs");var o=class extends d.LitElement{constructor(){super(...arguments);this.customMessage=""}get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.customMessage=this.textContent?.trim()??"",this.refresh()}refresh(){let s=this.field;if(!s?.errorId)return;this.id!==s.errorId&&(this.id=s.errorId);let r=s.messages,e=this.customMessage||r.join(" ");r.length>0?(this.textContent!==e&&(this.textContent=e),this.setAttribute(a.FIELD_ERROR_ATTRIBUTE,""),this.removeAttribute("hidden")):(!this.customMessage&&this.textContent!==""&&(this.textContent=""),this.removeAttribute(a.FIELD_ERROR_ATTRIBUTE),this.setAttribute("hidden",""))}updated(){this.refresh()}render(){return d.html`<span part="error"><slot></slot></span>`}};o.styles=d.css`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,o=c([(0,f.customElement)("skdx-field-error","field","error")],o);0&&(module.exports={SkdxFieldError});

package/dist/field/FieldError.d.cts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-field-error>` — the error text for a `<skdx-field>`. `hidden` and
+ * carrying nothing while the field is valid; once the field fails, its host id
+ * (the field's `errorId`) joins the control's `aria-describedby` and the
+ * control gains `aria-invalid="true"`.
+ *
+ * `data-skdx-field-error` goes on the **host**, and only while there are
+ * messages — that attribute is both what the field's controller scans for
+ * before merging the id into `aria-describedby` (mirroring React, where the
+ * element simply does not render while valid) and what a
+ * `<skdx-form-error-summary>` looks for to read this field's link text.
+ *
+ * The generated message is written to the host's own `textContent` and
+ * projected through the shadow `<slot>`, rather than rendered as shadow
+ * content: the summary reads `textContent`, which does not reach into a shadow
+ * root. Text supplied by the consumer is captured on connect and always wins,
+ * the way `children` overrides the generated copy in React.
+ *
+ * @csspart error - The `<span>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Name</skdx-field-label>
+ *   <input />
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldError extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Consumer-supplied copy, captured before we ever write to `textContent`. */
+    private customMessage;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-error': SkdxFieldError;
+    }
+}

package/dist/field/FieldError.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-field-error>` — the error text for a `<skdx-field>`. `hidden` and
+ * carrying nothing while the field is valid; once the field fails, its host id
+ * (the field's `errorId`) joins the control's `aria-describedby` and the
+ * control gains `aria-invalid="true"`.
+ *
+ * `data-skdx-field-error` goes on the **host**, and only while there are
+ * messages — that attribute is both what the field's controller scans for
+ * before merging the id into `aria-describedby` (mirroring React, where the
+ * element simply does not render while valid) and what a
+ * `<skdx-form-error-summary>` looks for to read this field's link text.
+ *
+ * The generated message is written to the host's own `textContent` and
+ * projected through the shadow `<slot>`, rather than rendered as shadow
+ * content: the summary reads `textContent`, which does not reach into a shadow
+ * root. Text supplied by the consumer is captured on connect and always wins,
+ * the way `children` overrides the generated copy in React.
+ *
+ * @csspart error - The `<span>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Name</skdx-field-label>
+ *   <input />
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldError extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Consumer-supplied copy, captured before we ever write to `textContent`. */
+    private customMessage;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-error': SkdxFieldError;
+    }
+}

package/dist/field/FieldError.js

@@ -0,0 +1,8 @@
+var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(o,i,t,s)=>{for(var e=s>1?void 0:s?m(i,t):i,d=o.length-1,n;d>=0;d--)(n=o[d])&&(e=(s?n(i,t,e):n(e))||e);return s&&e&&a(i,t,e),e};import{css as c,html as f,LitElement as p}from"lit";import{customElement as u}from"../internal/define.js";import{FIELD_ERROR_ATTRIBUTE as h}from"./field-core.js";var r=class extends p{constructor(){super(...arguments);this.customMessage=""}get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.customMessage=this.textContent?.trim()??"",this.refresh()}refresh(){let t=this.field;if(!t?.errorId)return;this.id!==t.errorId&&(this.id=t.errorId);let s=t.messages,e=this.customMessage||s.join(" ");s.length>0?(this.textContent!==e&&(this.textContent=e),this.setAttribute(h,""),this.removeAttribute("hidden")):(!this.customMessage&&this.textContent!==""&&(this.textContent=""),this.removeAttribute(h),this.setAttribute("hidden",""))}updated(){this.refresh()}render(){return f`<span part="error"><slot></slot></span>`}};r.styles=c`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,r=l([u("skdx-field-error","field","error")],r);export{r as SkdxFieldError};

package/dist/field/FieldLabel.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var m=(r,t)=>{for(var e in t)a(r,e,{get:t[e],enumerable:!0})},I=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of b(t))!u.call(r,l)&&l!==e&&a(r,l,{get:()=>t[l],enumerable:!(i=p(t,l))||i.enumerable});return r};var g=r=>I(a({},"__esModule",{value:!0}),r),s=(r,t,e,i)=>{for(var l=i>1?void 0:i?p(t,e):t,c=r.length-1,f;c>=0;c--)(f=r[c])&&(l=(i?f(t,e,l):f(l))||l);return i&&l&&a(t,e,l),l};var v={};m(v,{SkdxFieldLabel:()=>d});module.exports=g(v);var o=require("lit"),n=require("lit/decorators.js"),h=require("../internal/define.cjs");var d=class extends o.LitElement{constructor(){super(...arguments);this.labelId="";this.controlId="";this.grouped=!1}get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.refresh()}refresh(){let e=this.field;if(!e?.labelId)return;this.id!==e.labelId&&(this.id=e.labelId),this.labelId=e.labelId,this.controlId=e.controlId,this.grouped=e.grouped;let i=e.control;i&&!this.grouped&&!i.hasAttribute("aria-labelledby")&&i.setAttribute("aria-labelledby",this.labelId)}updated(){this.refresh()}render(){return this.grouped?o.html`<legend part="legend" id=${this.labelId}><slot></slot></legend>`:o.html`<label part="label" for=${this.controlId}><slot></slot></label>`}};d.styles=o.css`
+    :host {
+      display: inline-block;
+    }
+  `,s([(0,n.state)()],d.prototype,"labelId",2),s([(0,n.state)()],d.prototype,"controlId",2),s([(0,n.state)()],d.prototype,"grouped",2),d=s([(0,h.customElement)("skdx-field-label","field","label")],d);0&&(module.exports={SkdxFieldLabel});

package/dist/field/FieldLabel.d.cts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-field-label>` — the label for a `<skdx-field>`'s control. Renders a
+ * `<label>` whose `for` names the discovered control, or a `<legend>` inside a
+ * `<skdx-fieldset>`, since a `<label for>` may not reference a
+ * `[role="radiogroup"]`.
+ *
+ * Finds its field with `this.closest('skdx-field, skdx-fieldset')`, the same way
+ * `<skdx-form-message>` finds its `<skdx-form-field>`, and takes the field's
+ * `labelId` as its **own host id** — the host is in the light DOM, so the
+ * group control's `aria-labelledby` can actually resolve against it (an IDREF
+ * does not cross a shadow boundary, the constraint already noted on
+ * `<skdx-form-label>`). The shadow `<legend>` mirrors that same id so `::part`
+ * styling and the shared `assertFieldLabelContract` both see the element they
+ * expect; duplicate ids in two different trees are legal and resolve
+ * independently.
+ *
+ * For the same IDREF reason the shadow `<label for>` cannot name a light-DOM
+ * control on its own, so in non-group mode this element additionally points
+ * the control's `aria-labelledby` back at its host id — otherwise a plain
+ * `<skdx-field>`'s control would have no accessible name at all. A consumer who
+ * set `aria-labelledby` themselves keeps it.
+ *
+ * @csspart label - The `<label>` element, in non-group mode.
+ * @csspart legend - The `<legend>` element, inside a `<skdx-fieldset>`.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Email</skdx-field-label>
+ *   <input type="email" />
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Mirrored from the field so a change re-renders; assigning the same value does not. */
+    private labelId;
+    private controlId;
+    private grouped;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-label': SkdxFieldLabel;
+    }
+}

package/dist/field/FieldLabel.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-field-label>` — the label for a `<skdx-field>`'s control. Renders a
+ * `<label>` whose `for` names the discovered control, or a `<legend>` inside a
+ * `<skdx-fieldset>`, since a `<label for>` may not reference a
+ * `[role="radiogroup"]`.
+ *
+ * Finds its field with `this.closest('skdx-field, skdx-fieldset')`, the same way
+ * `<skdx-form-message>` finds its `<skdx-form-field>`, and takes the field's
+ * `labelId` as its **own host id** — the host is in the light DOM, so the
+ * group control's `aria-labelledby` can actually resolve against it (an IDREF
+ * does not cross a shadow boundary, the constraint already noted on
+ * `<skdx-form-label>`). The shadow `<legend>` mirrors that same id so `::part`
+ * styling and the shared `assertFieldLabelContract` both see the element they
+ * expect; duplicate ids in two different trees are legal and resolve
+ * independently.
+ *
+ * For the same IDREF reason the shadow `<label for>` cannot name a light-DOM
+ * control on its own, so in non-group mode this element additionally points
+ * the control's `aria-labelledby` back at its host id — otherwise a plain
+ * `<skdx-field>`'s control would have no accessible name at all. A consumer who
+ * set `aria-labelledby` themselves keeps it.
+ *
+ * @csspart label - The `<label>` element, in non-group mode.
+ * @csspart legend - The `<legend>` element, inside a `<skdx-fieldset>`.
+ *
+ * @example
+ * ```html
+ * <skdx-field>
+ *   <skdx-field-label>Email</skdx-field-label>
+ *   <input type="email" />
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Mirrored from the field so a change re-renders; assigning the same value does not. */
+    private labelId;
+    private controlId;
+    private grouped;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field whenever its snapshot changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-label': SkdxFieldLabel;
+    }
+}

package/dist/field/FieldLabel.js

@@ -0,0 +1,5 @@
+var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(o,i,e,t)=>{for(var r=t>1?void 0:t?p(i,e):i,s=o.length-1,a;s>=0;s--)(a=o[s])&&(r=(t?a(i,e,r):a(r))||r);return t&&r&&f(i,e,r),r};import{css as h,html as c,LitElement as b}from"lit";import{state as n}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";var l=class extends b{constructor(){super(...arguments);this.labelId="";this.controlId="";this.grouped=!1}get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.refresh()}refresh(){let e=this.field;if(!e?.labelId)return;this.id!==e.labelId&&(this.id=e.labelId),this.labelId=e.labelId,this.controlId=e.controlId,this.grouped=e.grouped;let t=e.control;t&&!this.grouped&&!t.hasAttribute("aria-labelledby")&&t.setAttribute("aria-labelledby",this.labelId)}updated(){this.refresh()}render(){return this.grouped?c`<legend part="legend" id=${this.labelId}><slot></slot></legend>`:c`<label part="label" for=${this.controlId}><slot></slot></label>`}};l.styles=h`
+    :host {
+      display: inline-block;
+    }
+  `,d([n()],l.prototype,"labelId",2),d([n()],l.prototype,"controlId",2),d([n()],l.prototype,"grouped",2),l=d([u("skdx-field-label","field","label")],l);export{l as SkdxFieldLabel};

package/dist/field/Fieldset.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},g=(r,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!b.call(r,t)&&t!==o&&i(r,t,{get:()=>e[t],enumerable:!(l=d(e,t))||l.enumerable});return r};var h=r=>g(i({},"__esModule",{value:!0}),r),n=(r,e,o,l)=>{for(var t=l>1?void 0:l?d(e,o):e,s=r.length-1,c;s>=0;s--)(c=r[s])&&(t=(l?c(e,o,t):c(t))||t);return l&&t&&i(e,o,t),t};var k={};f(k,{SkdxFieldset:()=>a});module.exports=h(k);var m=require("../internal/define.cjs"),u=require("./Field.cjs");var a=class extends u.SkdxField{get grouped(){return!0}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","group"),super.connectedCallback()}};a=n([(0,m.customElement)("skdx-fieldset")],a);0&&(module.exports={SkdxFieldset});

package/dist/field/Fieldset.d.cts

@@ -0,0 +1,43 @@
+import { SkdxField } from './Field.cjs';
+/**
+ * `<skdx-fieldset>` — a `<skdx-field>` in group mode: its `<skdx-field-label>`
+ * renders a `<legend>` and the group control is named with `aria-labelledby`
+ * instead of `for`/`id`, because a `<label for>` may not reference a
+ * `[role="radiogroup"]`. Same properties, same validation model, same state
+ * hooks as `<skdx-field>`.
+ *
+ * **Why no `<fieldset>` element.** Rendering `<fieldset><slot></slot></fieldset>`
+ * would put the shadow `<fieldset>` between this host and the slotted control
+ * in the *flattened* tree only — the control still lives in this element's
+ * light DOM, but the `<legend>` would then live in the shadow root where its
+ * `id` cannot be referenced by a light-DOM control's `aria-labelledby` (an
+ * IDREF does not cross a shadow boundary). So the shadow root stays a bare
+ * `<slot>` and the host carries `role="group"` itself, which is what a
+ * `<fieldset>` maps to anyway. The consumer keeps the `<legend>` — rendered by
+ * `<skdx-field-label>` — and its host id in the light DOM, where the group's
+ * `aria-labelledby` resolves.
+ *
+ * @slot - A `<skdx-field-label>`, the group control, an optional
+ * `<skdx-field-description>`, and a `<skdx-field-error>`.
+ *
+ * @example
+ * ```html
+ * <skdx-fieldset name="plan">
+ *   <skdx-field-label>Plan</skdx-field-label>
+ *   <div role="radiogroup">
+ *     <input type="radio" name="plan" value="free" />
+ *     <input type="radio" name="plan" value="pro" />
+ *   </div>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-fieldset>
+ * ```
+ */
+export declare class SkdxFieldset extends SkdxField {
+    get grouped(): boolean;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-fieldset': SkdxFieldset;
+    }
+}

package/dist/field/Fieldset.d.ts

@@ -0,0 +1,43 @@
+import { SkdxField } from './Field.js';
+/**
+ * `<skdx-fieldset>` — a `<skdx-field>` in group mode: its `<skdx-field-label>`
+ * renders a `<legend>` and the group control is named with `aria-labelledby`
+ * instead of `for`/`id`, because a `<label for>` may not reference a
+ * `[role="radiogroup"]`. Same properties, same validation model, same state
+ * hooks as `<skdx-field>`.
+ *
+ * **Why no `<fieldset>` element.** Rendering `<fieldset><slot></slot></fieldset>`
+ * would put the shadow `<fieldset>` between this host and the slotted control
+ * in the *flattened* tree only — the control still lives in this element's
+ * light DOM, but the `<legend>` would then live in the shadow root where its
+ * `id` cannot be referenced by a light-DOM control's `aria-labelledby` (an
+ * IDREF does not cross a shadow boundary). So the shadow root stays a bare
+ * `<slot>` and the host carries `role="group"` itself, which is what a
+ * `<fieldset>` maps to anyway. The consumer keeps the `<legend>` — rendered by
+ * `<skdx-field-label>` — and its host id in the light DOM, where the group's
+ * `aria-labelledby` resolves.
+ *
+ * @slot - A `<skdx-field-label>`, the group control, an optional
+ * `<skdx-field-description>`, and a `<skdx-field-error>`.
+ *
+ * @example
+ * ```html
+ * <skdx-fieldset name="plan">
+ *   <skdx-field-label>Plan</skdx-field-label>
+ *   <div role="radiogroup">
+ *     <input type="radio" name="plan" value="free" />
+ *     <input type="radio" name="plan" value="pro" />
+ *   </div>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-fieldset>
+ * ```
+ */
+export declare class SkdxFieldset extends SkdxField {
+    get grouped(): boolean;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-fieldset': SkdxFieldset;
+    }
+}

package/dist/field/Fieldset.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var c=(l,t,a,r)=>{for(var e=r>1?void 0:r?n(t,a):t,i=l.length-1,s;i>=0;i--)(s=l[i])&&(e=(r?s(t,a,e):s(e))||e);return r&&e&&d(t,a,e),e};import{customElement as m}from"../internal/define.js";import{SkdxField as u}from"./Field.js";var o=class extends u{get grouped(){return!0}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","group"),super.connectedCallback()}};o=c([m("skdx-fieldset")],o);export{o as SkdxFieldset};

package/dist/field/field-core.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var R=(r,t)=>{for(var e in t)p(r,e,{get:t[e],enumerable:!0})},V=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of O(t))!_.call(r,i)&&i!==e&&p(r,i,{get:()=>t[i],enumerable:!(n=M(t,i))||n.enumerable});return r};var k=r=>V(p({},"__esModule",{value:!0}),r);var q={};R(q,{CHARACTER_COUNT_ANNOUNCE_DELAY_MS:()=>N,FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>D,FIELD_CONTROL_ATTRIBUTE:()=>L,FIELD_CONTROL_SELECTOR:()=>I,FIELD_DESCRIPTION_ATTRIBUTE:()=>T,FIELD_ERROR_ATTRIBUTE:()=>v,FIELD_MESSAGE_ATTRIBUTE:()=>c,FIELD_NAME_ATTRIBUTE:()=>h,FIELD_ROOT_ATTRIBUTE:()=>d,FIELD_VALIDITY_CHANGE_EVENT:()=>y,FieldController:()=>g,NATIVE_INVALID_FALLBACK_MESSAGE:()=>x,characterCountMessage:()=>A,characterCountVisible:()=>C,collectFieldErrors:()=>U,errorSummaryScope:()=>H,findFieldControl:()=>b,focusFieldTarget:()=>$,isFilled:()=>u,normalizeMessages:()=>m,readControlValue:()=>F});module.exports=k(q);var y="validity-change",d="data-skdx-field",h="data-skdx-field-name",c="data-skdx-field-message",T="data-skdx-field-description",v="data-skdx-field-error",D="data-skdx-field-character-count",N=1e3;function A(r){let t=Math.abs(r),e=t===1?"character":"characters";return r<0?`You have ${t} ${e} too many`:`You have ${t} ${e} remaining`}function C(r,t,e=0){return e<=0?!0:r>=t*e/100}var x="This field is invalid.",L="data-skdx-field-control",I=[`[${L}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),w=new Set(["radiogroup","group"]),B=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function m(r){return r==null?[]:(Array.isArray(r)?r:[r]).filter(e=>typeof e=="string"&&e.trim()!=="")}function b(r){for(let t of Array.from(r.querySelectorAll(I)))if(t.getAttribute("aria-hidden")!=="true"&&t.closest(`[${d}]`)===r)return t;return null}function f(r,t){for(let e of Array.from(r.querySelectorAll(t)))if(e.closest(`[${d}]`)===r)return e;return null}function F(r){if(!r)return;let t=r;return t.type==="checkbox"||t.type==="radio"?t.checked:"value"in r?t.value:r.querySelector('input[aria-hidden="true"]')?.value}function u(r){return r==null||r===!1||r===""?!1:!(Array.isArray(r)&&r.length===0)}function a(r,t,e){e?r.setAttribute(t,""):r.removeAttribute(t)}function P(r,...t){let e=r.split(/\s+/).filter(Boolean);for(let n of t)n&&!e.includes(n)&&e.push(n);return e.join(" ")}function H(r){return r.closest("form, skdx-form")??r.parentElement??r}function U(r){return Array.from(r.querySelectorAll(`[${d}][data-invalid]`)).flatMap(e=>{let n=b(e),o=f(e,`[${v}]`)?.textContent?.trim()||e.getAttribute(c)||e.getAttribute(h)||"";return!n?.id||!o?[]:[{id:n.id,message:o}]})}function $(r,t=document){let e=t.getElementById(r);if(!e)return;let n=e.getAttribute("role"),o=(e.tagName==="FIELDSET"||n!==null&&w.has(n)?e.querySelector(B):null)??e;o.focus(),o.scrollIntoView?.({block:"center"})}var g=class{constructor(t){this.options=t;this.props={};this.root=null;this.form=null;this.control=null;this.baseDescribedBy="";this.runToken=0;this.pending=!1;this.injected=[];this.custom=[];this.characterCount=null;this.handleInput=()=>{let t=this.isOverLimit(this.snapshot.count),e=this.readCount();this.update({dirty:!0,filled:u(this.resolveValue()),count:e,errors:this.composeErrors(e)}),this.scheduleCountAnnouncement(e,t),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleFocusOut=()=>{let t=this.readCount();this.update({touched:!0,filled:u(this.resolveValue()),count:t,errors:this.composeErrors(t)}),((this.props.mode??"blur")==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=t=>{if(t.target!==this.form)return;this.markTouched();let e=this.runValidation({silent:!0});if(E(e)){t.preventDefault();return}(e.length>0||this.pending)&&t.preventDefault()};this.snapshot={controlId:t.controlId,errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0}}get state(){return this.snapshot}setProps(t){this.props=t;let e=m(t.errors??null);j(this.injected,e)||(this.injected=e,this.update({errors:this.composeErrors()}))}setCharacterCount(t){if((this.characterCount?.maxLength??null)===(t?.maxLength??null)&&(this.characterCount?.threshold??0)===(t?.threshold??0))return;this.characterCount=t;let n=this.readCount();this.update({count:n,errors:this.composeErrors(n)})}readCount(){let t=this.resolveValue();return typeof t=="string"?t.length:0}countMessage(t){return(this.props.getCharacterCountMessage??A)(t)}isOverLimit(t){return this.characterCount!==null&&t>this.characterCount.maxLength}composeErrors(t=this.snapshot.count){let e=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(t)&&e.push(this.countMessage(this.characterCount.maxLength-t)),e}scheduleCountAnnouncement(t,e){let n=this.characterCount;if(!n)return;if(clearTimeout(this.announceTimer),this.isOverLimit(t)){e||this.options.announce(this.countMessage(n.maxLength-t),"assertive");return}if(!C(t,n.maxLength,n.threshold))return;let i=n.maxLength-t;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(i),"polite")},1e3)}connect(t){this.root=t,t.setAttribute(d,""),t.addEventListener("input",this.handleInput,!0),t.addEventListener("change",this.handleInput,!0),t.addEventListener("focusout",this.handleFocusOut,!0),this.form=t.closest("form"),this.form&&t.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let e=this.readCount();this.update({filled:u(this.resolveValue()),count:e,errors:this.composeErrors(e)})}disconnect(){clearTimeout(this.announceTimer);let t=this.root;t&&(t.removeEventListener("input",this.handleInput,!0),t.removeEventListener("change",this.handleInput,!0),t.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&t.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),this.root=null,this.form=null,this.control=null)}sync(){let t=this.root;if(!t)return;let e=b(t);e!==this.control&&(this.control=e,this.baseDescribedBy=e?.getAttribute("aria-describedby")??"");let{name:n}=this.props;n?t.setAttribute(h,n):t.removeAttribute(h);let i=this.snapshot.errors.join(" ");if(i?t.setAttribute(c,i):t.removeAttribute(c),this.applyStateAttributes(t),!e)return;e.id||(e.id=this.options.controlId),e.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:e.id},this.options.onSnapshotChange(this.snapshot));let o=f(t,`[${T}]`)!==null,s=f(t,`[${v}]`)!==null,l=P(this.baseDescribedBy,o?this.options.descriptionId:void 0,s?this.options.errorId:void 0);l?e.setAttribute("aria-describedby",l):e.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid");let S=t.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&S?e.setAttribute("aria-labelledby",this.options.labelId):e.getAttribute("aria-labelledby")===this.options.labelId&&e.removeAttribute("aria-labelledby"),this.applyStateAttributes(e)}validate(){return Promise.resolve(this.runValidation()).then(t=>t.length===0)}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(t){let{errors:e,touched:n,dirty:i,filled:o,count:s}=this.snapshot;a(t,"data-invalid",e.length>0),a(t,"data-valid",e.length===0),a(t,"data-touched",n),a(t,"data-dirty",i),a(t,"data-filled",o),a(t,"data-over-limit",this.isOverLimit(s))}resolveValue(){return this.props.value!==void 0?this.props.value:F(this.control)}nativeMessage(){let t=this.control;return!t?.validity||t.validity.valid?null:t.validationMessage||this.props.invalidMessage||x}runValidation(t={}){let e=++this.runToken,n=this.props.validate?.(this.resolveValue());return E(n)?(this.pending=!0,Promise.resolve(n).then(i=>e!==this.runToken?this.snapshot.errors:(this.pending=!1,this.commit(i,t)))):this.commit(n,t)}commit(t,e){if(this.custom=m(t),this.custom.length===0&&this.injected.length===0){let l=this.nativeMessage();l&&(this.custom=[l])}let n=this.readCount(),i=this.composeErrors(n),o=this.snapshot.errors.length===0;this.update({errors:i,count:n,filled:u(this.resolveValue())});let s=i[0];return s&&o&&!e.silent&&this.options.announce(s,"assertive"),i}update(t){let e={...this.snapshot,...t,valid:!0};e.valid=e.errors.length===0,!G(this.snapshot,e)&&(this.snapshot=e,this.sync(),this.options.onSnapshotChange(e),this.root?.dispatchEvent(new CustomEvent(y,{bubbles:!0,composed:!0,detail:{valid:e.valid,errors:e.errors,touched:e.touched,dirty:e.dirty,filled:e.filled,count:e.count}})))}};function E(r){return typeof r?.then=="function"}function j(r,t){return r.length===t.length&&r.every((e,n)=>e===t[n])}function G(r,t){return r.controlId===t.controlId&&r.valid===t.valid&&r.touched===t.touched&&r.dirty===t.dirty&&r.filled===t.filled&&r.count===t.count&&r.errors.length===t.errors.length&&r.errors.every((e,n)=>e===t.errors[n])}0&&(module.exports={CHARACTER_COUNT_ANNOUNCE_DELAY_MS,FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_CONTROL_ATTRIBUTE,FIELD_CONTROL_SELECTOR,FIELD_DESCRIPTION_ATTRIBUTE,FIELD_ERROR_ATTRIBUTE,FIELD_MESSAGE_ATTRIBUTE,FIELD_NAME_ATTRIBUTE,FIELD_ROOT_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT,FieldController,NATIVE_INVALID_FALLBACK_MESSAGE,characterCountMessage,characterCountVisible,collectFieldErrors,errorSummaryScope,findFieldControl,focusFieldTarget,isFilled,normalizeMessages,readControlValue});