@skdx/web-components 0.27.0 → 0.28.0

package/dist/form/FormControl.d.cts

@@ -1,14 +1,7 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-form-control>` — wires `id`, `name`, and `aria-labelledby` onto its
- * single light-DOM child input, using `this.firstElementChild` directly
- * (slotting doesn't move a node in the actual DOM tree, so this always finds
- * the real control) rather than React's `Slot`/prop-injection approach.
- * Capture-phase listens for `invalid`/`blur`/`change` on itself — since the
- * control is a genuine light-DOM child, this intercepts those events
- * regardless of whether they bubble (`invalid` and `blur` don't) — to
- * snapshot the control's `ValidityState` into its `<skdx-form-field>` and set
- * `aria-invalid`/`aria-describedby` on the control once it fails validation.
+ * Wires `id`, `name`, and `aria-labelledby` to its light-DOM child input,
+ * snapshots validation state, and sets `aria-invalid` / `aria-describedby`.
  * Must be used inside `<skdx-form-field>`.
  *
  * @example
@@ -22,6 +15,8 @@ export declare class SkdxFormControl extends LitElement {
     static styles: import("lit").CSSResult;
     private fieldEl;
     private controlEl;
+    /** Consumer's original `aria-describedby`; merged with validation message. */
+    private baseDescribedBy;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
@@ -31,6 +26,17 @@ export declare class SkdxFormControl extends LitElement {
      * constraint validation on this field's control.
      */
     validate(): boolean;
+    /**
+     * @internal The consumer's own control element, so `<skdx-form>` can send
+     * focus to the first one that failed. Nothing else may reach past this
+     * wrapper into the light-DOM child.
+     */
+    get control(): HTMLElement | null;
+    /**
+     * @internal Re-applies `aria-invalid` / `aria-describedby` when server errors
+     * arrive outside the browser's validation pass.
+     */
+    refreshValidityAttributes(): void;
     private readonly _handleValidityEvent;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/form/FormControl.d.ts

@@ -1,14 +1,7 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-form-control>` — wires `id`, `name`, and `aria-labelledby` onto its
- * single light-DOM child input, using `this.firstElementChild` directly
- * (slotting doesn't move a node in the actual DOM tree, so this always finds
- * the real control) rather than React's `Slot`/prop-injection approach.
- * Capture-phase listens for `invalid`/`blur`/`change` on itself — since the
- * control is a genuine light-DOM child, this intercepts those events
- * regardless of whether they bubble (`invalid` and `blur` don't) — to
- * snapshot the control's `ValidityState` into its `<skdx-form-field>` and set
- * `aria-invalid`/`aria-describedby` on the control once it fails validation.
+ * Wires `id`, `name`, and `aria-labelledby` to its light-DOM child input,
+ * snapshots validation state, and sets `aria-invalid` / `aria-describedby`.
  * Must be used inside `<skdx-form-field>`.
  *
  * @example
@@ -22,6 +15,8 @@ export declare class SkdxFormControl extends LitElement {
     static styles: import("lit").CSSResult;
     private fieldEl;
     private controlEl;
+    /** Consumer's original `aria-describedby`; merged with validation message. */
+    private baseDescribedBy;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
@@ -31,6 +26,17 @@ export declare class SkdxFormControl extends LitElement {
      * constraint validation on this field's control.
      */
     validate(): boolean;
+    /**
+     * @internal The consumer's own control element, so `<skdx-form>` can send
+     * focus to the first one that failed. Nothing else may reach past this
+     * wrapper into the light-DOM child.
+     */
+    get control(): HTMLElement | null;
+    /**
+     * @internal Re-applies `aria-invalid` / `aria-describedby` when server errors
+     * arrive outside the browser's validation pass.
+     */
+    refreshValidityAttributes(): void;
     private readonly _handleValidityEvent;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/form/FormControl.js

@@ -1,5 +1,5 @@
-var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(a,l,e,t)=>{for(var i=t>1?void 0:t?c(l,e):l,n=a.length-1,d;n>=0;n--)(d=a[n])&&(i=(t?d(l,e,i):d(i))||i);return t&&i&&o(l,e,i),i};import{css as h,html as m,LitElement as v}from"lit";import{customElement as u}from"../internal/define.js";import{ensureId as b}from"../internal/ids.js";import{applyHostPart as f}from"../internal/part.js";import{snapshotValidity as y}from"./validity.js";var r=class extends v{constructor(){super(...arguments);this.fieldEl=null;this.controlEl=null;this._syncControlAttributes=()=>{let e=this.fieldEl,t=this.firstElementChild;if(!e||!t)return;this.controlEl=t,f(t,"form","control"),t.setAttribute("id",e.fieldId),e.name&&t.setAttribute("name",e.name);let i=e.querySelector("skdx-form-label");i&&t.setAttribute("aria-labelledby",b(i,"skdx-form-label","label"))};this._handleValidityEvent=()=>{let e=this.controlEl,t=this.fieldEl;if(!e?.validity||!t)return;let i=y(e.validity);t.setValidity(i),i.valid?(e.removeAttribute("aria-invalid"),e.removeAttribute("aria-describedby")):(e.setAttribute("aria-invalid","true"),e.setAttribute("aria-describedby",t.messageId))}}connectedCallback(){if(super.connectedCallback(),this.fieldEl=this.closest("skdx-form-field"),!this.fieldEl)throw new Error("<skdx-form-control> must be used inside <skdx-form-field>.");this.addEventListener("invalid",this._handleValidityEvent,!0),this.addEventListener("blur",this._handleValidityEvent,!0),this.addEventListener("change",this._handleValidityEvent,!0)}disconnectedCallback(){this.removeEventListener("invalid",this._handleValidityEvent,!0),this.removeEventListener("blur",this._handleValidityEvent,!0),this.removeEventListener("change",this._handleValidityEvent,!0),super.disconnectedCallback()}firstUpdated(){this._syncControlAttributes()}validate(){return this.controlEl?.checkValidity?.()??!0}render(){return m`<slot @slotchange=${this._syncControlAttributes}></slot>`}};r.styles=h`
+var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var c=(d,s,i,e)=>{for(var t=e>1?void 0:e?v(s,i):s,r=d.length-1,l;r>=0;r--)(l=d[r])&&(t=(e?l(s,i,t):l(t))||t);return e&&t&&m(s,i,t),t};import{css as b,html as u,LitElement as f}from"lit";import{customElement as y}from"../internal/define.js";import{ensureId as E}from"../internal/ids.js";import{applyHostPart as p}from"../internal/part.js";import{mergeDescribedBy as V}from"./described-by.js";import{snapshotValidity as g}from"./validity.js";var n=class extends f{constructor(){super(...arguments);this.fieldEl=null;this.controlEl=null;this.baseDescribedBy=null;this._syncControlAttributes=()=>{let i=this.fieldEl,e=this.firstElementChild;if(!i||!e)return;e!==this.controlEl&&(this.baseDescribedBy=e.getAttribute("aria-describedby")),this.controlEl=e,p(e,"form","control"),e.id||e.setAttribute("id",i.fieldId),i.name&&e.setAttribute("name",i.name);let t=i.querySelector("skdx-form-label");t&&e.setAttribute("aria-labelledby",E(t,"skdx-form-label","label"))};this._handleValidityEvent=i=>{let e=this.controlEl,t=this.fieldEl;if(!e?.validity||!t)return;let r=this.closest("skdx-form")?.validationMode??"change";if(i?.type==="blur"&&r==="submit"||i?.type==="change"&&r!=="change")return;let l=g(e.validity);t.setValidity(l);let h=this.closest("skdx-form")?.serverErrors(t.name)??[],a=l.valid&&h.length===0;a?e.removeAttribute("aria-invalid"):e.setAttribute("aria-invalid","true");let o=V(this.baseDescribedBy,a?void 0:t.messageId);o?e.setAttribute("aria-describedby",o):e.removeAttribute("aria-describedby")}}connectedCallback(){if(super.connectedCallback(),this.fieldEl=this.closest("skdx-form-field"),!this.fieldEl)throw new Error("<skdx-form-control> must be used inside <skdx-form-field>.");this.addEventListener("invalid",this._handleValidityEvent,!0),this.addEventListener("blur",this._handleValidityEvent,!0),this.addEventListener("change",this._handleValidityEvent,!0)}disconnectedCallback(){this.removeEventListener("invalid",this._handleValidityEvent,!0),this.removeEventListener("blur",this._handleValidityEvent,!0),this.removeEventListener("change",this._handleValidityEvent,!0),super.disconnectedCallback()}firstUpdated(){this._syncControlAttributes()}validate(){return this.controlEl?.checkValidity?.()??!0}get control(){return this.controlEl}refreshValidityAttributes(){this._handleValidityEvent()}render(){return u`<slot @slotchange=${this._syncControlAttributes}></slot>`}};n.styles=b`
     :host {
       display: contents;
     }
-  `,r=s([u("skdx-form-control")],r);export{r as SkdxFormControl};
+  `,n=c([y("skdx-form-control")],n);export{n as SkdxFormControl};

package/dist/form/FormErrorSummary.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var E=(s,t)=>{for(var e in t)l(s,e,{get:t[e],enumerable:!0})},k=(s,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!g.call(s,r)&&r!==e&&l(s,r,{get:()=>t[r],enumerable:!(i=h(t,r))||i.enumerable});return s};var y=s=>k(l({},"__esModule",{value:!0}),s),c=(s,t,e,i)=>{for(var r=i>1?void 0:i?h(t,e):t,u=s.length-1,p;u>=0;u--)(p=s[u])&&(r=(i?p(t,e,r):p(r))||r);return i&&r&&l(t,e,r),r};var L={};E(L,{SkdxFormErrorSummary:()=>a});module.exports=y(L);var n=require("lit"),d=require("lit/decorators.js"),o=require("../field/field-core.cjs"),m=require("../internal/define.cjs"),f=require("../internal/part.cjs"),v=require("../internal/styles.cjs");var a=class extends n.LitElement{constructor(){super(...arguments);this.noAutoFocus=!1;this.entries=[];this.wasReporting=!1;this.scope=null;this.rescan=()=>{this.scope&&(this.entries=(0,o.collectFieldErrors)(this.scope))};this.handleLinkClick=(e,i)=>{e.preventDefault(),(0,o.focusFieldTarget)(i)}}createRenderRoot(){return this}get autoFocus(){return!this.noAutoFocus}set autoFocus(e){this.noAutoFocus=!e}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert"),this.setAttribute("tabindex","-1"),this.setAttribute("data-skdx-error-summary",""),this.setAttribute("part","summary"),(0,v.installLightDomStyles)(),this.scope=(0,o.errorSummaryScope)(this),this.scope.addEventListener(o.FIELD_VALIDITY_CHANGE_EVENT,this.rescan),this.rescan()}disconnectedCallback(){this.scope?.removeEventListener(o.FIELD_VALIDITY_CHANGE_EVENT,this.rescan),this.scope=null,super.disconnectedCallback()}updated(){if((0,f.reflectHostState)(this,{hidden:this.entries.length===0?"":null}),this.entries.length===0){this.wasReporting=!1;return}this.wasReporting||(this.wasReporting=!0,this.autoFocus&&this.focus())}render(){return n.html`
-      <ul class="skdx-form__error-summary-list">
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(s,t)=>{for(var e in t)l(s,e,{get:t[e],enumerable:!0})},y=(s,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!b.call(s,r)&&r!==e&&l(s,r,{get:()=>t[r],enumerable:!(i=h(t,r))||i.enumerable});return s};var E=s=>y(l({},"__esModule",{value:!0}),s),u=(s,t,e,i)=>{for(var r=i>1?void 0:i?h(t,e):t,d=s.length-1,p;d>=0;d--)(p=s[d])&&(r=(i?p(t,e,r):p(r))||r);return i&&r&&l(t,e,r),r};var k={};g(k,{SkdxFormErrorSummary:()=>a});module.exports=E(k);var n=require("lit"),c=require("lit/decorators.js"),o=require("../field/field-core.cjs"),f=require("../internal/define.cjs"),m=require("../internal/part.cjs"),v=require("../internal/styles.cjs");var a=class extends n.LitElement{constructor(){super(...arguments);this.noAutoFocus=!1;this.entries=[];this.wasReporting=!1;this.scope=null;this.rescanQueued=!1;this.requestRescan=()=>{this.rescanQueued||(this.rescanQueued=!0,queueMicrotask(()=>{this.rescanQueued=!1,this.rescan()}))};this.rescan=()=>{this.scope&&(this.entries=(0,o.collectFieldErrors)(this.scope))};this.handleLinkClick=(e,i)=>{e.preventDefault(),(0,o.focusFieldTarget)(i)}}createRenderRoot(){return this}get autoFocus(){return!this.noAutoFocus}set autoFocus(e){this.noAutoFocus=!e}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert"),this.setAttribute("tabindex","-1"),this.setAttribute("data-skdx-error-summary",""),this.setAttribute("part","summary"),(0,v.installLightDomStyles)(),this.scope=(0,o.errorSummaryScope)(this);for(let e of o.ERROR_SUMMARY_RESCAN_EVENTS)this.scope.addEventListener(e,this.requestRescan,!0);this.rescan()}disconnectedCallback(){for(let e of o.ERROR_SUMMARY_RESCAN_EVENTS)this.scope?.removeEventListener(e,this.requestRescan,!0);this.scope=null,super.disconnectedCallback()}updated(){if((0,m.reflectHostState)(this,{hidden:this.entries.length===0?"":null}),this.entries.length===0){this.wasReporting=!1;return}this.wasReporting||(this.wasReporting=!0,this.autoFocus&&this.focus())}render(){return n.html`
+      <ul class="skdx-form__error-summary-list" role="list">
         ${this.entries.map(e=>n.html`
             <li>
               <a
@@ -12,4 +12,4 @@
             </li>
           `)}
       </ul>
-    `}};c([(0,d.property)({type:Boolean,attribute:"no-auto-focus"})],a.prototype,"noAutoFocus",2),c([(0,d.state)()],a.prototype,"entries",2),a=c([(0,m.customElement)("skdx-form-error-summary","form","error-summary")],a);0&&(module.exports={SkdxFormErrorSummary});
+    `}};u([(0,c.property)({type:Boolean,attribute:"no-auto-focus"})],a.prototype,"noAutoFocus",2),u([(0,c.state)()],a.prototype,"entries",2),a=u([(0,f.customElement)("skdx-form-error-summary","form","error-summary")],a);0&&(module.exports={SkdxFormErrorSummary});

package/dist/form/FormErrorSummary.d.cts

@@ -1,39 +1,10 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-form-error-summary>` — the GOV.UK error summary for a `<skdx-form>` (or
- * a native `<form>`): a `role="alert"` container listing one in-page link per
- * currently-failing field, focused the first time it appears so a keyboard or
- * screen-reader user lands on the errors rather than back at the top of the
- * page.
+ * GOV.UK error summary for a form. `role="alert"` container listing in-page links
+ * to failing fields, scanned on validity-change. Renders into light DOM for CSS class styling.
  *
- * It keeps no field registry. It scans its form for
- * `[data-skdx-field][data-invalid]` and re-scans whenever a field's bubbling
- * `validity-change` event reaches it, so any `<skdx-field>`/`<skdx-fieldset>`
- * anywhere in the form is listed without registering itself. Clicking a link
- * focuses that field's control — or, when the field is a group, the first
- * control *inside* the group, which is the GOV.UK rule.
- *
- * Rendered (empty and `hidden`) even with nothing to report, so the alert
- * fires when its content appears.
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root): the host itself is the `role="alert"` container, and the generated
- * `<ul>`/`<a>`s carry the `skdx-form__error-summary-list` /
- * `skdx-form__error-summary-link` classes so a document-level `@skdx/skins`
- * stylesheet reaches them, exactly as it does the consumer-composed markup in
- * React. The heading children written inside this tag stay where they are,
- * before the generated list — give the heading the
- * `skdx-form__error-summary-title` class to skin it, as in the other
- * frameworks.
- *
- * @slot - Heading content, written directly inside the tag (there is no shadow
- * root, so no `<slot>` — the children simply stay in place, hidden with the
- * host while there is nothing to report).
- * @csspart summary - The `role="alert"` container — the host element itself.
- * **`::part(summary)` does not reach it**: this element renders into the light
- * DOM and `::part()` only matches inside a shadow root, so the `part`
- * attribute is inert here. It is kept so the name matches the styling-hooks
- * contract; style the host as an ordinary element instead.
+ * @slot - Heading content placed before the generated error list.
+ * @csspart summary - The `role="alert"` container (host element; rendered in light DOM).
  *
  * @example
  * ```html
@@ -67,6 +38,17 @@ export declare class SkdxFormErrorSummary extends LitElement {
     private scope;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Whether a deferred rescan is already queued, so a burst of events costs one scan. */
+    private rescanQueued;
+    /**
+     * Deferred by a microtask, because capture-phase listeners run outer-first:
+     * this element's listener is on the `<skdx-form>` and
+     * `<skdx-form-control>`'s is on itself, so scanning from the event read the
+     * DOM *before* the control had been given its `aria-invalid` and the message
+     * its `hidden`. Every framework defers this scan for the same class of
+     * reason; this is the platform's version of it.
+     */
+    private readonly requestRescan;
     private readonly rescan;
     protected updated(): void;
     private readonly handleLinkClick;

package/dist/form/FormErrorSummary.d.ts

@@ -1,39 +1,10 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-form-error-summary>` — the GOV.UK error summary for a `<skdx-form>` (or
- * a native `<form>`): a `role="alert"` container listing one in-page link per
- * currently-failing field, focused the first time it appears so a keyboard or
- * screen-reader user lands on the errors rather than back at the top of the
- * page.
+ * GOV.UK error summary for a form. `role="alert"` container listing in-page links
+ * to failing fields, scanned on validity-change. Renders into light DOM for CSS class styling.
  *
- * It keeps no field registry. It scans its form for
- * `[data-skdx-field][data-invalid]` and re-scans whenever a field's bubbling
- * `validity-change` event reaches it, so any `<skdx-field>`/`<skdx-fieldset>`
- * anywhere in the form is listed without registering itself. Clicking a link
- * focuses that field's control — or, when the field is a group, the first
- * control *inside* the group, which is the GOV.UK rule.
- *
- * Rendered (empty and `hidden`) even with nothing to report, so the alert
- * fires when its content appears.
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root): the host itself is the `role="alert"` container, and the generated
- * `<ul>`/`<a>`s carry the `skdx-form__error-summary-list` /
- * `skdx-form__error-summary-link` classes so a document-level `@skdx/skins`
- * stylesheet reaches them, exactly as it does the consumer-composed markup in
- * React. The heading children written inside this tag stay where they are,
- * before the generated list — give the heading the
- * `skdx-form__error-summary-title` class to skin it, as in the other
- * frameworks.
- *
- * @slot - Heading content, written directly inside the tag (there is no shadow
- * root, so no `<slot>` — the children simply stay in place, hidden with the
- * host while there is nothing to report).
- * @csspart summary - The `role="alert"` container — the host element itself.
- * **`::part(summary)` does not reach it**: this element renders into the light
- * DOM and `::part()` only matches inside a shadow root, so the `part`
- * attribute is inert here. It is kept so the name matches the styling-hooks
- * contract; style the host as an ordinary element instead.
+ * @slot - Heading content placed before the generated error list.
+ * @csspart summary - The `role="alert"` container (host element; rendered in light DOM).
  *
  * @example
  * ```html
@@ -67,6 +38,17 @@ export declare class SkdxFormErrorSummary extends LitElement {
     private scope;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Whether a deferred rescan is already queued, so a burst of events costs one scan. */
+    private rescanQueued;
+    /**
+     * Deferred by a microtask, because capture-phase listeners run outer-first:
+     * this element's listener is on the `<skdx-form>` and
+     * `<skdx-form-control>`'s is on itself, so scanning from the event read the
+     * DOM *before* the control had been given its `aria-invalid` and the message
+     * its `hidden`. Every framework defers this scan for the same class of
+     * reason; this is the platform's version of it.
+     */
+    private readonly requestRescan;
     private readonly rescan;
     protected updated(): void;
     private readonly handleLinkClick;

package/dist/form/FormErrorSummary.js

@@ -1,6 +1,6 @@
-var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(a,i,e,t)=>{for(var r=t>1?void 0:t?p(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&u(i,e,r),r};import{html as c,LitElement as h}from"lit";import{property as m,state as f}from"lit/decorators.js";import{collectFieldErrors as v,errorSummaryScope as b,FIELD_VALIDITY_CHANGE_EVENT as d,focusFieldTarget as g}from"../field/field-core.js";import{customElement as E}from"../internal/define.js";import{reflectHostState as k}from"../internal/part.js";import{installLightDomStyles as y}from"../internal/styles.js";var s=class extends h{constructor(){super(...arguments);this.noAutoFocus=!1;this.entries=[];this.wasReporting=!1;this.scope=null;this.rescan=()=>{this.scope&&(this.entries=v(this.scope))};this.handleLinkClick=(e,t)=>{e.preventDefault(),g(t)}}createRenderRoot(){return this}get autoFocus(){return!this.noAutoFocus}set autoFocus(e){this.noAutoFocus=!e}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert"),this.setAttribute("tabindex","-1"),this.setAttribute("data-skdx-error-summary",""),this.setAttribute("part","summary"),y(),this.scope=b(this),this.scope.addEventListener(d,this.rescan),this.rescan()}disconnectedCallback(){this.scope?.removeEventListener(d,this.rescan),this.scope=null,super.disconnectedCallback()}updated(){if(k(this,{hidden:this.entries.length===0?"":null}),this.entries.length===0){this.wasReporting=!1;return}this.wasReporting||(this.wasReporting=!0,this.autoFocus&&this.focus())}render(){return c`
-      <ul class="skdx-form__error-summary-list">
-        ${this.entries.map(e=>c`
+var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(a,i,e,t)=>{for(var r=t>1?void 0:t?p(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&d(i,e,r),r};import{html as u,LitElement as h}from"lit";import{property as f,state as m}from"lit/decorators.js";import{collectFieldErrors as v,ERROR_SUMMARY_RESCAN_EVENTS as c,errorSummaryScope as R,focusFieldTarget as b}from"../field/field-core.js";import{customElement as g}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{installLightDomStyles as E}from"../internal/styles.js";var s=class extends h{constructor(){super(...arguments);this.noAutoFocus=!1;this.entries=[];this.wasReporting=!1;this.scope=null;this.rescanQueued=!1;this.requestRescan=()=>{this.rescanQueued||(this.rescanQueued=!0,queueMicrotask(()=>{this.rescanQueued=!1,this.rescan()}))};this.rescan=()=>{this.scope&&(this.entries=v(this.scope))};this.handleLinkClick=(e,t)=>{e.preventDefault(),b(t)}}createRenderRoot(){return this}get autoFocus(){return!this.noAutoFocus}set autoFocus(e){this.noAutoFocus=!e}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert"),this.setAttribute("tabindex","-1"),this.setAttribute("data-skdx-error-summary",""),this.setAttribute("part","summary"),E(),this.scope=R(this);for(let e of c)this.scope.addEventListener(e,this.requestRescan,!0);this.rescan()}disconnectedCallback(){for(let e of c)this.scope?.removeEventListener(e,this.requestRescan,!0);this.scope=null,super.disconnectedCallback()}updated(){if(y(this,{hidden:this.entries.length===0?"":null}),this.entries.length===0){this.wasReporting=!1;return}this.wasReporting||(this.wasReporting=!0,this.autoFocus&&this.focus())}render(){return u`
+      <ul class="skdx-form__error-summary-list" role="list">
+        ${this.entries.map(e=>u`
             <li>
               <a
                 class="skdx-form__error-summary-link"
@@ -12,4 +12,4 @@ var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(a,i,e,t
             </li>
           `)}
       </ul>
-    `}};o([m({type:Boolean,attribute:"no-auto-focus"})],s.prototype,"noAutoFocus",2),o([f()],s.prototype,"entries",2),s=o([E("skdx-form-error-summary","form","error-summary")],s);export{s as SkdxFormErrorSummary};
+    `}};o([f({type:Boolean,attribute:"no-auto-focus"})],s.prototype,"noAutoFocus",2),o([m()],s.prototype,"entries",2),s=o([g("skdx-form-error-summary","form","error-summary")],s);export{s as SkdxFormErrorSummary};

package/dist/form/FormField.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var c=(r,e)=>{for(var s in e)d(r,s,{get:e[s],enumerable:!0})},M=(r,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!v.call(r,t)&&t!==s&&d(r,t,{get:()=>e[t],enumerable:!(i=g(e,t))||i.enumerable});return r};var u=r=>M(d({},"__esModule",{value:!0}),r),f=(r,e,s,i)=>{for(var t=i>1?void 0:i?g(e,s):e,l=r.length-1,m;l>=0;l--)(m=r[l])&&(t=(i?m(e,s,t):m(t))||t);return i&&t&&d(e,s,t),t};var _={};c(_,{SkdxFormField:()=>a});module.exports=u(_);var o=require("lit"),p=require("lit/decorators.js"),y=require("../internal/define.cjs"),n=require("../internal/ids.cjs");var a=class extends o.LitElement{constructor(){super(...arguments);this.name="";this.fieldId=(0,n.nextId)("skdx-form-field");this.messageId=(0,n.nextId)("skdx-form-message");this._messages=new Set}get validity(){return this._validity}setValidity(s){this._validity=s;for(let i of this._messages)i.refresh()}registerMessage(s){this._messages.add(s)}unregisterMessage(s){this._messages.delete(s)}render(){return o.html`<slot></slot>`}};a.styles=o.css`
+"use strict";var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(i,t)=>{for(var e in t)m(i,e,{get:t[e],enumerable:!0})},M=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of c(t))!u.call(i,s)&&s!==e&&m(i,s,{get:()=>t[s],enumerable:!(r=p(t,s))||r.enumerable});return i};var _=i=>M(m({},"__esModule",{value:!0}),i),l=(i,t,e,r)=>{for(var s=r>1?void 0:r?p(t,e):t,f=i.length-1,h;f>=0;f--)(h=i[f])&&(s=(r?h(t,e,s):h(s))||s);return r&&s&&m(t,e,s),s};var A={};b(A,{SkdxFormField:()=>a});module.exports=_(A);var o=require("lit"),d=require("lit/decorators.js"),n=require("../field/field-core.cjs"),y=require("../internal/define.cjs"),g=require("../internal/ids.cjs"),v=require("./FormFieldAnatomy.cjs");var a=class extends o.LitElement{constructor(){super(...arguments);this.name="";this.fieldId=(0,g.nextId)("skdx-form-field");this.messageId=(0,g.nextId)("skdx-form-message");this._messages=new Set;this.fillAnatomy=()=>(0,v.fillFormFieldAnatomy)(this)}get validity(){return this._validity}setValidity(e){this._validity=e;for(let r of this._messages)r.refresh()}refresh(){for(let e of this._messages)e.refresh()}registerMessage(e){this._messages.add(e)}unregisterMessage(e){this._messages.delete(e)}connectedCallback(){super.connectedCallback(),this.setAttribute(n.FORM_FIELD_ATTRIBUTE,""),queueMicrotask(this.fillAnatomy)}updated(e){this.name?this.setAttribute(n.FIELD_NAME_ATTRIBUTE,this.name):this.removeAttribute(n.FIELD_NAME_ATTRIBUTE),(e.has("label")||e.has("message"))&&this.fillAnatomy()}render(){return o.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};a.styles=o.css`
     :host {
       display: block;
     }
-  `,f([(0,p.property)({type:String,reflect:!0})],a.prototype,"name",2),a=f([(0,y.customElement)("skdx-form-field","form","field")],a);0&&(module.exports={SkdxFormField});
+  `,l([(0,d.property)({type:String,reflect:!0})],a.prototype,"name",2),l([(0,d.property)({type:String})],a.prototype,"label",2),l([(0,d.property)({type:String})],a.prototype,"message",2),a=l([(0,y.customElement)("skdx-form-field","form","field")],a);0&&(module.exports={SkdxFormField});

package/dist/form/FormField.d.cts

@@ -5,20 +5,19 @@ export interface RefreshableFormMessage {
     refresh(): void;
 }
 /**
- * `<skdx-form-field>` — groups one field's `<skdx-form-label>`,
- * `<skdx-form-control>`, and `<skdx-form-message>`(s). Generates the shared
- * `fieldId`/`messageId` pair its descendants read via
- * `this.closest('skdx-form-field')`, and holds the latest `ValiditySnapshot`
- * reported by its `<skdx-form-control>` — the same closest()-based
- * light-DOM-sibling linking `<skdx-dialog-content>` uses for its
- * Title/Description ids.
+ * Groups one field's Label, Control, and Message(s). Generates shared
+ * `fieldId`/`messageId` for descendants and holds the latest
+ * `ValiditySnapshot` from its Control.
+ *
+ * The one Form family component on the main entry point (consumer decides
+ * where it goes). `label` and `message` derive Label, Control, and catch-all
+ * Message around the control. Derived parts stand down if consumer authored
+ * them; all are primitives from `@skdx/web-components/primitives/form`.
  *
  * @example
  * ```html
- * <skdx-form-field name="username">
- *   <skdx-form-label>Username</skdx-form-label>
- *   <skdx-form-control><input required /></skdx-form-control>
- *   <skdx-form-message>Username is required.</skdx-form-message>
+ * <skdx-form-field name="username" label="Username" message="Username is required.">
+ *   <input required />
  * </skdx-form-field>
  * ```
  */
@@ -26,6 +25,19 @@ export declare class SkdxFormField extends LitElement {
     static styles: import("lit").CSSResult;
     /** Field name, matched against the `name` attribute of the native input rendered inside `FormControl`. */
     name: string;
+    /**
+     * The control's visible label, rendered into a derived `<skdx-form-label>`
+     * that the control's `aria-labelledby` points at.
+     * @default undefined — no label is derived.
+     */
+    label?: string;
+    /**
+     * Message shown when the field is invalid, rendered into a derived
+     * catch-all `<skdx-form-message>` (no `match`, covers every `ValidityState`
+     * reason). For per-reason messages, use primitives.
+     * @default undefined — no message is derived.
+     */
+    message?: string;
     readonly fieldId: string;
     readonly messageId: string;
     private _validity?;
@@ -34,10 +46,15 @@ export declare class SkdxFormField extends LitElement {
     get validity(): ValiditySnapshot | undefined;
     /** @internal Called by this field's `<skdx-form-control>` whenever its child control's validity changes. */
     setValidity(next: ValiditySnapshot | undefined): void;
+    /** @internal Called by `<skdx-form>` when its `errors` map changes, so this field's messages re-evaluate. */
+    refresh(): void;
     /** @internal Called by a mounting `<skdx-form-message>`. */
     registerMessage(el: RefreshableFormMessage): void;
     /** @internal Called by an unmounting `<skdx-form-message>`. */
     unregisterMessage(el: RefreshableFormMessage): void;
+    connectedCallback(): void;
+    private readonly fillAnatomy;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/form/FormField.d.ts

@@ -5,20 +5,19 @@ export interface RefreshableFormMessage {
     refresh(): void;
 }
 /**
- * `<skdx-form-field>` — groups one field's `<skdx-form-label>`,
- * `<skdx-form-control>`, and `<skdx-form-message>`(s). Generates the shared
- * `fieldId`/`messageId` pair its descendants read via
- * `this.closest('skdx-form-field')`, and holds the latest `ValiditySnapshot`
- * reported by its `<skdx-form-control>` — the same closest()-based
- * light-DOM-sibling linking `<skdx-dialog-content>` uses for its
- * Title/Description ids.
+ * Groups one field's Label, Control, and Message(s). Generates shared
+ * `fieldId`/`messageId` for descendants and holds the latest
+ * `ValiditySnapshot` from its Control.
+ *
+ * The one Form family component on the main entry point (consumer decides
+ * where it goes). `label` and `message` derive Label, Control, and catch-all
+ * Message around the control. Derived parts stand down if consumer authored
+ * them; all are primitives from `@skdx/web-components/primitives/form`.
  *
  * @example
  * ```html
- * <skdx-form-field name="username">
- *   <skdx-form-label>Username</skdx-form-label>
- *   <skdx-form-control><input required /></skdx-form-control>
- *   <skdx-form-message>Username is required.</skdx-form-message>
+ * <skdx-form-field name="username" label="Username" message="Username is required.">
+ *   <input required />
  * </skdx-form-field>
  * ```
  */
@@ -26,6 +25,19 @@ export declare class SkdxFormField extends LitElement {
     static styles: import("lit").CSSResult;
     /** Field name, matched against the `name` attribute of the native input rendered inside `FormControl`. */
     name: string;
+    /**
+     * The control's visible label, rendered into a derived `<skdx-form-label>`
+     * that the control's `aria-labelledby` points at.
+     * @default undefined — no label is derived.
+     */
+    label?: string;
+    /**
+     * Message shown when the field is invalid, rendered into a derived
+     * catch-all `<skdx-form-message>` (no `match`, covers every `ValidityState`
+     * reason). For per-reason messages, use primitives.
+     * @default undefined — no message is derived.
+     */
+    message?: string;
     readonly fieldId: string;
     readonly messageId: string;
     private _validity?;
@@ -34,10 +46,15 @@ export declare class SkdxFormField extends LitElement {
     get validity(): ValiditySnapshot | undefined;
     /** @internal Called by this field's `<skdx-form-control>` whenever its child control's validity changes. */
     setValidity(next: ValiditySnapshot | undefined): void;
+    /** @internal Called by `<skdx-form>` when its `errors` map changes, so this field's messages re-evaluate. */
+    refresh(): void;
     /** @internal Called by a mounting `<skdx-form-message>`. */
     registerMessage(el: RefreshableFormMessage): void;
     /** @internal Called by an unmounting `<skdx-form-message>`. */
     unregisterMessage(el: RefreshableFormMessage): void;
+    connectedCallback(): void;
+    private readonly fillAnatomy;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/form/FormField.js

@@ -1,5 +1,5 @@
-var f=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var l=(a,i,e,t)=>{for(var s=t>1?void 0:t?n(i,e):i,o=a.length-1,d;o>=0;o--)(d=a[o])&&(s=(t?d(i,e,s):d(s))||s);return t&&s&&f(i,e,s),s};import{css as g,html as p,LitElement as y}from"lit";import{property as h}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{nextId as m}from"../internal/ids.js";var r=class extends y{constructor(){super(...arguments);this.name="";this.fieldId=m("skdx-form-field");this.messageId=m("skdx-form-message");this._messages=new Set}get validity(){return this._validity}setValidity(e){this._validity=e;for(let t of this._messages)t.refresh()}registerMessage(e){this._messages.add(e)}unregisterMessage(e){this._messages.delete(e)}render(){return p`<slot></slot>`}};r.styles=g`
+var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var a=(o,r,e,i)=>{for(var s=i>1?void 0:i?g(r,e):r,l=o.length-1,n;l>=0;l--)(n=o[l])&&(s=(i?n(r,e,s):n(s))||s);return i&&s&&h(r,e,s),s};import{css as p,html as y,LitElement as v}from"lit";import{property as m}from"lit/decorators.js";import{FIELD_NAME_ATTRIBUTE as d,FORM_FIELD_ATTRIBUTE as c}from"../field/field-core.js";import{customElement as u}from"../internal/define.js";import{nextId as f}from"../internal/ids.js";import{fillFormFieldAnatomy as b}from"./FormFieldAnatomy.js";var t=class extends v{constructor(){super(...arguments);this.name="";this.fieldId=f("skdx-form-field");this.messageId=f("skdx-form-message");this._messages=new Set;this.fillAnatomy=()=>b(this)}get validity(){return this._validity}setValidity(e){this._validity=e;for(let i of this._messages)i.refresh()}refresh(){for(let e of this._messages)e.refresh()}registerMessage(e){this._messages.add(e)}unregisterMessage(e){this._messages.delete(e)}connectedCallback(){super.connectedCallback(),this.setAttribute(c,""),queueMicrotask(this.fillAnatomy)}updated(e){this.name?this.setAttribute(d,this.name):this.removeAttribute(d),(e.has("label")||e.has("message"))&&this.fillAnatomy()}render(){return y`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=p`
     :host {
       display: block;
     }
-  `,l([h({type:String,reflect:!0})],r.prototype,"name",2),r=l([v("skdx-form-field","form","field")],r);export{r as SkdxFormField};
+  `,a([m({type:String,reflect:!0})],t.prototype,"name",2),a([m({type:String})],t.prototype,"label",2),a([m({type:String})],t.prototype,"message",2),t=a([u("skdx-form-field","form","field")],t);export{t as SkdxFormField};

package/dist/form/FormFieldAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!u.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(n=c(t,r))||n.enumerable});return e};var k=e=>p(a({},"__esModule",{value:!0}),e);var h={};x(h,{FORM_FIELD_ANATOMY_GENERATED:()=>d,fillFormFieldAnatomy:()=>E});module.exports=k(h);var l=require("../internal/derive.cjs"),N=require("./FormLabel.cjs"),b=require("./FormControl.cjs"),y=require("./FormMessage.cjs"),d="data-skdx-form-field-generated",F=new Set(["skdx-form-label","skdx-form-control","skdx-form-message"]);function A(e){let t=d;if((0,l.hasAuthoredPart)(e,"skdx-form-control",t))return null;let o=(0,l.generatedPart)(e,"skdx-form-control",t);if(o)return o;let n=Array.from(e.children).filter(m=>!m.hasAttribute(t)&&!F.has(m.tagName.toLowerCase()));if(n.length===0)return null;let r=document.createElement("skdx-form-control");return r.setAttribute(t,""),r.append(...n),r}function E(e){let t=d,o=(0,l.textPart)(e,"skdx-form-label",e.label,t),n=(0,l.textPart)(e,"skdx-form-message",e.message,t),r=A(e),m=new Set([o,r,n].filter(s=>s!==null)),i=Array.from(e.childNodes).filter(s=>!m.has(s)&&!(s.nodeType===Node.ELEMENT_NODE&&s.hasAttribute(t)));(0,l.applyChildren)(e,[...o?[o]:[],...i,...r?[r]:[],...n?[n]:[]])}0&&(module.exports={FORM_FIELD_ANATOMY_GENERATED,fillFormFieldAnatomy});

package/dist/form/FormFieldAnatomy.d.cts

@@ -0,0 +1,13 @@
+import type { SkdxFormField } from './FormField.cjs';
+import './FormLabel.cjs';
+import './FormControl.cjs';
+import './FormMessage.cjs';
+/** @internal Marks a direct child of `<skdx-form-field>` this module generated. */
+export declare const FORM_FIELD_ANATOMY_GENERATED = "data-skdx-form-field-generated";
+/**
+ * Draws Label, Control, and Message around consumer's control. No derive-or-compose switch
+ * (child IS control). Each derived part stands down where consumer authored one, so both
+ * patterns work in same element.
+ * @internal
+ */
+export declare function fillFormFieldAnatomy(root: SkdxFormField): void;

package/dist/form/FormFieldAnatomy.d.ts

@@ -0,0 +1,13 @@
+import type { SkdxFormField } from './FormField.js';
+import './FormLabel.js';
+import './FormControl.js';
+import './FormMessage.js';
+/** @internal Marks a direct child of `<skdx-form-field>` this module generated. */
+export declare const FORM_FIELD_ANATOMY_GENERATED = "data-skdx-form-field-generated";
+/**
+ * Draws Label, Control, and Message around consumer's control. No derive-or-compose switch
+ * (child IS control). Each derived part stands down where consumer authored one, so both
+ * patterns work in same element.
+ * @internal
+ */
+export declare function fillFormFieldAnatomy(root: SkdxFormField): void;

package/dist/form/FormFieldAnatomy.js

@@ -0,0 +1 @@
+import{applyChildren as i,generatedPart as c,hasAuthoredPart as f,textPart as m}from"../internal/derive.js";import"./FormLabel.js";import"./FormControl.js";import"./FormMessage.js";var a="data-skdx-form-field-generated",u=new Set(["skdx-form-label","skdx-form-control","skdx-form-message"]);function x(e){let t=a;if(f(e,"skdx-form-control",t))return null;let o=c(e,"skdx-form-control",t);if(o)return o;let n=Array.from(e.children).filter(s=>!s.hasAttribute(t)&&!u.has(s.tagName.toLowerCase()));if(n.length===0)return null;let r=document.createElement("skdx-form-control");return r.setAttribute(t,""),r.append(...n),r}function E(e){let t=a,o=m(e,"skdx-form-label",e.label,t),n=m(e,"skdx-form-message",e.message,t),r=x(e),s=new Set([o,r,n].filter(l=>l!==null)),d=Array.from(e.childNodes).filter(l=>!s.has(l)&&!(l.nodeType===Node.ELEMENT_NODE&&l.hasAttribute(t)));i(e,[...o?[o]:[],...d,...r?[r]:[],...n?[n]:[]])}export{a as FORM_FIELD_ANATOMY_GENERATED,E as fillFormFieldAnatomy};

package/dist/form/FormLabel.cjs

@@ -1,5 +1,5 @@
-"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var h=(o,e)=>{for(var r in e)n(o,r,{get:e[r],enumerable:!0})},k=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of u(e))!v.call(o,l)&&l!==r&&n(o,l,{get:()=>e[l],enumerable:!(t=c(e,l))||t.enumerable});return o};var x=o=>k(n({},"__esModule",{value:!0}),o),d=(o,e,r,t)=>{for(var l=t>1?void 0:t?c(e,r):e,i=o.length-1,m;i>=0;i--)(m=o[i])&&(l=(t?m(e,r,l):m(l))||l);return t&&l&&n(e,r,l),l};var E={};h(E,{SkdxFormLabel:()=>s});module.exports=x(E);var a=require("lit"),b=require("../internal/define.cjs"),f=require("../internal/ids.cjs"),p=require("../internal/styles.cjs");var s=class extends a.LitElement{connectedCallback(){super.connectedCallback(),(0,f.ensureId)(this,"skdx-form-label","label")}render(){return a.html`<label part="label"><slot></slot></label>`}};s.styles=[a.css`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var r in e)d(o,r,{get:e[r],enumerable:!0})},v=(o,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of g(e))!k.call(o,l)&&l!==r&&d(o,l,{get:()=>e[l],enumerable:!(i=c(e,l))||i.enumerable});return o};var x=o=>v(d({},"__esModule",{value:!0}),o),f=(o,e,r,i)=>{for(var l=i>1?void 0:i?c(e,r):e,m=o.length-1,n;m>=0;m--)(n=o[m])&&(l=(i?n(e,r,l):n(l))||l);return i&&l&&d(e,r,l),l};var I={};u(I,{SkdxFormLabel:()=>s});module.exports=x(I);var t=require("lit"),p=require("lit/decorators.js"),a=require("../internal/define.cjs"),b=require("../internal/ids.cjs"),h=require("../internal/styles.cjs");var s=class extends t.LitElement{connectedCallback(){super.connectedCallback(),(0,b.ensureId)(this,"skdx-form-label","label");let e=this.closest("skdx-form-field");e&&(0,a.whenUpgraded)(e,()=>this.forId=e.fieldId)}render(){return t.html`<label part="label" for=${this.forId??t.nothing}><slot></slot></label>`}};s.styles=[t.css`
       :host {
         display: inline-block;
       }
-    `,p.controlBoxOnHost],s=d([(0,b.customElement)("skdx-form-label","form","label")],s);0&&(module.exports={SkdxFormLabel});
+    `,h.controlBoxOnHost],f([(0,p.state)()],s.prototype,"forId",2),s=f([(0,a.customElement)("skdx-form-label","form","label")],s);0&&(module.exports={SkdxFormLabel});

package/dist/form/FormLabel.d.cts

@@ -1,20 +1,13 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-form-label>` — a label for a `<skdx-form-field>`'s control. Ensures
- * itself a light-DOM `id` on connect so a sibling `<skdx-form-control>` can
- * point its control's `aria-labelledby` at it — the reverse direction of
- * React's `<label htmlFor>`, since a shadow-DOM `<label for>` can't resolve
- * against a light-DOM control's `id` (an IDREF can't cross a shadow
- * boundary, the same constraint noted on `<skdx-dialog-content>`).
- *
- * ponytail: no click-to-focus (native `<label for>` can't cross the shadow
- * boundary here) — add a click handler that manually focuses the field's
- * control if that UX matters.
+ * `<skdx-form-label>` — label for a field's control. Ensures itself a light-DOM `id` so `aria-labelledby` works
+ * (IDREFs can't cross shadow boundaries), and sets `for` to the field's control id for native click-to-focus.
  *
  * @csspart label - The `<label>` element inside the shadow root.
  */
 export declare class SkdxFormLabel extends LitElement {
     static styles: import("lit").CSSResult[];
+    private forId?;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/form/FormLabel.d.ts

@@ -1,20 +1,13 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-form-label>` — a label for a `<skdx-form-field>`'s control. Ensures
- * itself a light-DOM `id` on connect so a sibling `<skdx-form-control>` can
- * point its control's `aria-labelledby` at it — the reverse direction of
- * React's `<label htmlFor>`, since a shadow-DOM `<label for>` can't resolve
- * against a light-DOM control's `id` (an IDREF can't cross a shadow
- * boundary, the same constraint noted on `<skdx-dialog-content>`).
- *
- * ponytail: no click-to-focus (native `<label for>` can't cross the shadow
- * boundary here) — add a click handler that manually focuses the field's
- * control if that UX matters.
+ * `<skdx-form-label>` — label for a field's control. Ensures itself a light-DOM `id` so `aria-labelledby` works
+ * (IDREFs can't cross shadow boundaries), and sets `for` to the field's control id for native click-to-focus.
  *
  * @csspart label - The `<label>` element inside the shadow root.
  */
 export declare class SkdxFormLabel extends LitElement {
     static styles: import("lit").CSSResult[];
+    private forId?;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/form/FormLabel.js

@@ -1,5 +1,5 @@
-var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(t,o,s,r)=>{for(var e=r>1?void 0:r?c(o,s):o,a=t.length-1,n;a>=0;a--)(n=t[a])&&(e=(r?n(o,s,e):n(e))||e);return r&&e&&m(o,s,e),e};import{css as d,html as b,LitElement as f}from"lit";import{customElement as p}from"../internal/define.js";import{ensureId as u}from"../internal/ids.js";import{controlBoxOnHost as v}from"../internal/styles.js";var l=class extends f{connectedCallback(){super.connectedCallback(),u(this,"skdx-form-label","label")}render(){return b`<label part="label"><slot></slot></label>`}};l.styles=[d`
+var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(t,e,i,r)=>{for(var l=r>1?void 0:r?n(e,i):e,s=t.length-1,d;s>=0;s--)(d=t[s])&&(l=(r?d(e,i,l):d(l))||l);return r&&l&&m(e,i,l),l};import{css as f,html as c,LitElement as p,nothing as b}from"lit";import{state as h}from"lit/decorators.js";import{customElement as g,whenUpgraded as k}from"../internal/define.js";import{ensureId as u}from"../internal/ids.js";import{controlBoxOnHost as v}from"../internal/styles.js";var o=class extends p{connectedCallback(){super.connectedCallback(),u(this,"skdx-form-label","label");let e=this.closest("skdx-form-field");e&&k(e,()=>this.forId=e.fieldId)}render(){return c`<label part="label" for=${this.forId??b}><slot></slot></label>`}};o.styles=[f`
       :host {
         display: inline-block;
       }
-    `,v],l=i([p("skdx-form-label","form","label")],l);export{l as SkdxFormLabel};
+    `,v],a([h()],o.prototype,"forId",2),o=a([g("skdx-form-label","form","label")],o);export{o as SkdxFormLabel};

package/dist/form/FormMessage.cjs

@@ -1,8 +1,8 @@
-"use strict";var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(s,t)=>{for(var i in t)o(s,i,{get:t[i],enumerable:!0})},u=(s,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!y.call(s,e)&&e!==i&&o(s,e,{get:()=>t[e],enumerable:!(l=f(t,e))||l.enumerable});return s};var b=s=>u(o({},"__esModule",{value:!0}),s),a=(s,t,i,l)=>{for(var e=l>1?void 0:l?f(t,i):t,c=s.length-1,n;c>=0;c--)(n=s[c])&&(e=(l?n(t,i,e):n(e))||e);return l&&e&&o(t,i,e),e};var E={};v(E,{SkdxFormMessage:()=>r});module.exports=b(E);var d=require("lit"),h=require("lit/decorators.js"),m=require("../internal/define.cjs");var r=class extends d.LitElement{constructor(){super(...arguments);this.forceMatch=!1;this.fieldEl=null}connectedCallback(){super.connectedCallback(),this.fieldEl=this.closest("skdx-form-field"),this.fieldEl?.registerMessage(this),this._sync()}disconnectedCallback(){this.fieldEl&&this.fieldEl.unregisterMessage(this),super.disconnectedCallback()}refresh(){this._sync()}_sync(){let i=this.fieldEl;if(!i)return;this.id||(this.id=i.messageId);let l=i.validity,e=this.forceMatch;!e&&l&&(e=this.match?l[this.match]===!0:!l.valid),e?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return d.html`<slot></slot>`}};r.styles=d.css`
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var u=(r,t)=>{for(var i in t)c(r,i,{get:t[i],enumerable:!0})},b=(r,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of E(t))!y.call(r,e)&&e!==i&&c(r,e,{get:()=>t[e],enumerable:!(s=m(t,e))||s.enumerable});return r};var T=r=>b(c({},"__esModule",{value:!0}),r),h=(r,t,i,s)=>{for(var e=s>1?void 0:s?m(t,i):t,l=r.length-1,f;l>=0;l--)(f=r[l])&&(e=(s?f(t,i,e):f(e))||e);return s&&e&&c(t,i,e),e};var g={};u(g,{SkdxFormMessage:()=>o});module.exports=T(g);var d=require("lit"),a=require("lit/decorators.js"),p=require("../field/field-core.cjs"),n=require("../internal/define.cjs"),v=require("./server-errors.cjs");var o=class extends d.LitElement{constructor(){super(...arguments);this.forceMatch=!1;this.fieldEl=null;this.serverErrorText=""}connectedCallback(){super.connectedCallback(),this.setAttribute(p.FORM_MESSAGE_ATTRIBUTE,""),this.fieldEl=this.closest("skdx-form-field"),this.fieldEl&&(0,n.whenUpgraded)(this.fieldEl,()=>{this.fieldEl?.registerMessage(this),this._sync()})}disconnectedCallback(){this.fieldEl&&this.fieldEl.unregisterMessage(this),super.disconnectedCallback()}refresh(){this._sync()}_sync(){let i=this.fieldEl;if(!i)return;this.id||(this.id=i.messageId);let s=this.match?[]:this.closest("skdx-form")?.serverErrors(i.name)??[];this.serverErrorText=(0,v.formErrorText)(s);let e=i.validity,l=this.forceMatch||s.length>0;!l&&e&&(l=this.match?e[this.match]===!0:!e.valid),l?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return this.serverErrorText?d.html`${this.serverErrorText}`:d.html`<slot></slot>`}};o.styles=d.css`
     :host {
       display: block;
     }
     :host([hidden]) {
       display: none;
     }
-  `,a([(0,h.property)({type:String})],r.prototype,"match",2),a([(0,h.property)({type:Boolean,attribute:"force-match"})],r.prototype,"forceMatch",2),r=a([(0,m.customElement)("skdx-form-message","form","message")],r);0&&(module.exports={SkdxFormMessage});
+  `,h([(0,a.property)({type:String})],o.prototype,"match",2),h([(0,a.property)({type:Boolean,attribute:"force-match"})],o.prototype,"forceMatch",2),h([(0,a.state)()],o.prototype,"serverErrorText",2),o=h([(0,n.customElement)("skdx-form-message","form","message")],o);0&&(module.exports={SkdxFormMessage});