@skdx/web-components 0.26.0

package/dist/floating-panel/gesture.d.cts

@@ -0,0 +1,25 @@
+/**
+ * Arrow-key handling shared by `<skdx-floating-panel-header>` (which moves the
+ * panel) and `<skdx-floating-panel-resize-trigger>` (which resizes it). The two
+ * gestures differ only in what they do with the delta, so the delta is worked
+ * out once here.
+ *
+ * @internal
+ */
+/** How much further one Shift+arrow travels than one plain arrow. */
+export declare const SHIFT_MULTIPLIER = 10;
+/**
+ * The pixel delta an arrow keypress asks for, or `null` when the key was not
+ * an arrow. `step` comes from the root; Shift multiplies it by
+ * {@link SHIFT_MULTIPLIER}.
+ *
+ * Authored for LTR: `directionalKey` swaps the horizontal arrows under
+ * `dir="rtl"` before the branches below see them, exactly as every other
+ * horizontal interaction in the package does.
+ *
+ * @internal
+ */
+export declare function arrowDelta(event: KeyboardEvent, el: Element, step: number): {
+    dx: number;
+    dy: number;
+} | null;

package/dist/floating-panel/gesture.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Arrow-key handling shared by `<skdx-floating-panel-header>` (which moves the
+ * panel) and `<skdx-floating-panel-resize-trigger>` (which resizes it). The two
+ * gestures differ only in what they do with the delta, so the delta is worked
+ * out once here.
+ *
+ * @internal
+ */
+/** How much further one Shift+arrow travels than one plain arrow. */
+export declare const SHIFT_MULTIPLIER = 10;
+/**
+ * The pixel delta an arrow keypress asks for, or `null` when the key was not
+ * an arrow. `step` comes from the root; Shift multiplies it by
+ * {@link SHIFT_MULTIPLIER}.
+ *
+ * Authored for LTR: `directionalKey` swaps the horizontal arrows under
+ * `dir="rtl"` before the branches below see them, exactly as every other
+ * horizontal interaction in the package does.
+ *
+ * @internal
+ */
+export declare function arrowDelta(event: KeyboardEvent, el: Element, step: number): {
+    dx: number;
+    dy: number;
+} | null;

package/dist/floating-panel/gesture.js

@@ -0,0 +1 @@
+import{directionalKey as o}from"../internal/direction.js";var d=10;function a(e,t,n){let r=n*(e.shiftKey?d:1);switch(o(e.key,t)){case"ArrowLeft":return{dx:-r,dy:0};case"ArrowRight":return{dx:r,dy:0};case"ArrowUp":return{dx:0,dy:-r};case"ArrowDown":return{dx:0,dy:r};default:return null}}export{d as SHIFT_MULTIPLIER,a as arrowDelta};

package/dist/floating-panel/index.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var n in e)l(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!k.call(t,o)&&o!==n&&l(t,o,{get:()=>e[o],enumerable:!(r=d(e,o))||r.enumerable});return t};var T=t=>s(l({},"__esModule",{value:!0}),t);var u={};y(u,{SkdxFloatingPanel:()=>a.SkdxFloatingPanel,SkdxFloatingPanelCloseTrigger:()=>F.SkdxFloatingPanelCloseTrigger,SkdxFloatingPanelContent:()=>x.SkdxFloatingPanelContent,SkdxFloatingPanelHeader:()=>P.SkdxFloatingPanelHeader,SkdxFloatingPanelPortal:()=>g.SkdxFloatingPanelPortal,SkdxFloatingPanelResizeTrigger:()=>S.SkdxFloatingPanelResizeTrigger,SkdxFloatingPanelStageTrigger:()=>m.SkdxFloatingPanelStageTrigger,SkdxFloatingPanelTitle:()=>p.SkdxFloatingPanelTitle,SkdxFloatingPanelTrigger:()=>i.SkdxFloatingPanelTrigger,gestureAnnouncement:()=>a.gestureAnnouncement});module.exports=T(u);var a=require("./FloatingPanel.cjs"),i=require("./FloatingPanelTrigger.cjs"),g=require("./FloatingPanelPortal.cjs"),x=require("./FloatingPanelContent.cjs"),P=require("./FloatingPanelHeader.cjs"),p=require("./FloatingPanelTitle.cjs"),F=require("./FloatingPanelCloseTrigger.cjs"),S=require("./FloatingPanelResizeTrigger.cjs"),m=require("./FloatingPanelStageTrigger.cjs");0&&(module.exports={SkdxFloatingPanel,SkdxFloatingPanelCloseTrigger,SkdxFloatingPanelContent,SkdxFloatingPanelHeader,SkdxFloatingPanelPortal,SkdxFloatingPanelResizeTrigger,SkdxFloatingPanelStageTrigger,SkdxFloatingPanelTitle,SkdxFloatingPanelTrigger,gestureAnnouncement});

package/dist/floating-panel/index.d.cts

@@ -0,0 +1,9 @@
+export { SkdxFloatingPanel, gestureAnnouncement, type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelResizeDirection, type FloatingPanelSize, type FloatingPanelStage, } from './FloatingPanel.cjs';
+export { SkdxFloatingPanelTrigger } from './FloatingPanelTrigger.cjs';
+export { SkdxFloatingPanelPortal } from './FloatingPanelPortal.cjs';
+export { SkdxFloatingPanelContent } from './FloatingPanelContent.cjs';
+export { SkdxFloatingPanelHeader } from './FloatingPanelHeader.cjs';
+export { SkdxFloatingPanelTitle } from './FloatingPanelTitle.cjs';
+export { SkdxFloatingPanelCloseTrigger } from './FloatingPanelCloseTrigger.cjs';
+export { SkdxFloatingPanelResizeTrigger } from './FloatingPanelResizeTrigger.cjs';
+export { SkdxFloatingPanelStageTrigger } from './FloatingPanelStageTrigger.cjs';

package/dist/floating-panel/index.d.ts

@@ -0,0 +1,9 @@
+export { SkdxFloatingPanel, gestureAnnouncement, type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelResizeDirection, type FloatingPanelSize, type FloatingPanelStage, } from './FloatingPanel.js';
+export { SkdxFloatingPanelTrigger } from './FloatingPanelTrigger.js';
+export { SkdxFloatingPanelPortal } from './FloatingPanelPortal.js';
+export { SkdxFloatingPanelContent } from './FloatingPanelContent.js';
+export { SkdxFloatingPanelHeader } from './FloatingPanelHeader.js';
+export { SkdxFloatingPanelTitle } from './FloatingPanelTitle.js';
+export { SkdxFloatingPanelCloseTrigger } from './FloatingPanelCloseTrigger.js';
+export { SkdxFloatingPanelResizeTrigger } from './FloatingPanelResizeTrigger.js';
+export { SkdxFloatingPanelStageTrigger } from './FloatingPanelStageTrigger.js';

package/dist/floating-panel/index.js

@@ -0,0 +1 @@
+import{SkdxFloatingPanel as o,gestureAnnouncement as n}from"./FloatingPanel.js";import{SkdxFloatingPanelTrigger as l}from"./FloatingPanelTrigger.js";import{SkdxFloatingPanelPortal as i}from"./FloatingPanelPortal.js";import{SkdxFloatingPanelContent as x}from"./FloatingPanelContent.js";import{SkdxFloatingPanelHeader as p}from"./FloatingPanelHeader.js";import{SkdxFloatingPanelTitle as S}from"./FloatingPanelTitle.js";import{SkdxFloatingPanelCloseTrigger as d}from"./FloatingPanelCloseTrigger.js";import{SkdxFloatingPanelResizeTrigger as k}from"./FloatingPanelResizeTrigger.js";import{SkdxFloatingPanelStageTrigger as s}from"./FloatingPanelStageTrigger.js";export{o as SkdxFloatingPanel,d as SkdxFloatingPanelCloseTrigger,x as SkdxFloatingPanelContent,p as SkdxFloatingPanelHeader,i as SkdxFloatingPanelPortal,k as SkdxFloatingPanelResizeTrigger,s as SkdxFloatingPanelStageTrigger,S as SkdxFloatingPanelTitle,l as SkdxFloatingPanelTrigger,n as gestureAnnouncement};

package/dist/form/Form.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},v=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!u.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(l=n(e,o))||l.enumerable});return t};var x=t=>v(d({},"__esModule",{value:!0}),t),c=(t,e,r,l)=>{for(var o=l>1?void 0:l?n(e,r):e,s=t.length-1,a;s>=0;s--)(a=t[s])&&(o=(l?a(e,r,o):a(o))||o);return l&&o&&d(e,r,o),o};var b={};y(b,{SkdxForm:()=>i});module.exports=x(b);var m=require("lit"),f=require("../internal/define.cjs");var i=class extends m.LitElement{async trySubmit(){let r=Array.from(this.querySelectorAll("skdx-form-control")).map(s=>s.validate()).every(Boolean),l=Array.from(this.querySelectorAll("skdx-field, skdx-fieldset")),o=await Promise.all(l.map(s=>s.validate?.()??!0));r&&o.every(Boolean)&&this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))}render(){return m.html`<slot></slot>`}};i.styles=m.css`
+    :host {
+      display: block;
+    }
+  `,i=c([(0,f.customElement)("skdx-form","form","root")],i);0&&(module.exports={SkdxForm});

package/dist/form/Form.d.cts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-form>` — root of a headless validation/accessibility-wiring layer
+ * (see `@skdx/shared`'s `formContract`), not a native `<form>`
+ * reimplementation. No custom validators — `required`/`pattern`/`min`/
+ * `type="email"` etc. on the consumer's own input do the validating, via
+ * each `<skdx-form-control>`'s own native Constraint Validation API calls.
+ *
+ * `trySubmit()` (called by `<skdx-form-submit>`) walks every descendant
+ * `<skdx-form-control>` and runs its native `checkValidity()`, and awaits
+ * `validate()` on every descendant `<skdx-field>`/`<skdx-fieldset>` — which
+ * *do* own a validation model; only once all of them pass does this dispatch
+ * `submit`.
+ *
+ * @example
+ * ```html
+ * <skdx-form>
+ *   <skdx-form-field name="email">
+ *     <skdx-form-label>Email</skdx-form-label>
+ *     <skdx-form-control><input type="email" required /></skdx-form-control>
+ *     <skdx-form-message match="valueMissing">Email is required.</skdx-form-message>
+ *   </skdx-form-field>
+ *   <skdx-form-submit>Submit</skdx-form-submit>
+ * </skdx-form>
+ * ```
+ *
+ * @fires submit - Fired after every native control and every descendant `<skdx-field>` has validated successfully. Nothing is submitted natively — the handler owns what happens next.
+ */
+export declare class SkdxForm extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Runs native constraint validation across every `<skdx-form-control>`
+     * descendant and the full validation model of every `<skdx-field>` /
+     * `<skdx-fieldset>` descendant; dispatches a bubbling `submit` event only
+     * once all of them pass. Called by `<skdx-form-submit>`'s click handler.
+     *
+     * Async because a Field's validator may be — every field is still run (no
+     * short-circuit), so the user sees *all* the errors and the
+     * `<skdx-form-error-summary>` can list them, not just the first.
+     */
+    trySubmit(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form': SkdxForm;
+    }
+}

package/dist/form/Form.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-form>` — root of a headless validation/accessibility-wiring layer
+ * (see `@skdx/shared`'s `formContract`), not a native `<form>`
+ * reimplementation. No custom validators — `required`/`pattern`/`min`/
+ * `type="email"` etc. on the consumer's own input do the validating, via
+ * each `<skdx-form-control>`'s own native Constraint Validation API calls.
+ *
+ * `trySubmit()` (called by `<skdx-form-submit>`) walks every descendant
+ * `<skdx-form-control>` and runs its native `checkValidity()`, and awaits
+ * `validate()` on every descendant `<skdx-field>`/`<skdx-fieldset>` — which
+ * *do* own a validation model; only once all of them pass does this dispatch
+ * `submit`.
+ *
+ * @example
+ * ```html
+ * <skdx-form>
+ *   <skdx-form-field name="email">
+ *     <skdx-form-label>Email</skdx-form-label>
+ *     <skdx-form-control><input type="email" required /></skdx-form-control>
+ *     <skdx-form-message match="valueMissing">Email is required.</skdx-form-message>
+ *   </skdx-form-field>
+ *   <skdx-form-submit>Submit</skdx-form-submit>
+ * </skdx-form>
+ * ```
+ *
+ * @fires submit - Fired after every native control and every descendant `<skdx-field>` has validated successfully. Nothing is submitted natively — the handler owns what happens next.
+ */
+export declare class SkdxForm extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Runs native constraint validation across every `<skdx-form-control>`
+     * descendant and the full validation model of every `<skdx-field>` /
+     * `<skdx-fieldset>` descendant; dispatches a bubbling `submit` event only
+     * once all of them pass. Called by `<skdx-form-submit>`'s click handler.
+     *
+     * Async because a Field's validator may be — every field is still run (no
+     * short-circuit), so the user sees *all* the errors and the
+     * `<skdx-form-error-summary>` can list them, not just the first.
+     */
+    trySubmit(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form': SkdxForm;
+    }
+}

package/dist/form/Form.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=(i,r,l,t)=>{for(var e=t>1?void 0:t?n(r,l):r,o=i.length-1,m;o>=0;o--)(m=i[o])&&(e=(t?m(r,l,e):m(e))||e);return t&&e&&a(r,l,e),e};import{css as c,html as f,LitElement as p}from"lit";import{customElement as u}from"../internal/define.js";var s=class extends p{async trySubmit(){let l=Array.from(this.querySelectorAll("skdx-form-control")).map(o=>o.validate()).every(Boolean),t=Array.from(this.querySelectorAll("skdx-field, skdx-fieldset")),e=await Promise.all(t.map(o=>o.validate?.()??!0));l&&e.every(Boolean)&&this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))}render(){return f`<slot></slot>`}};s.styles=c`
+    :host {
+      display: block;
+    }
+  `,s=d([u("skdx-form","form","root")],s);export{s as SkdxForm};

package/dist/form/FormControl.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(r,l)=>{for(var e in l)d(r,e,{get:l[e],enumerable:!0})},p=(r,l,e,i)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of f(l))!y.call(r,t)&&t!==e&&d(r,t,{get:()=>l[t],enumerable:!(i=c(l,t))||i.enumerable});return r};var V=r=>p(d({},"__esModule",{value:!0}),r),h=(r,l,e,i)=>{for(var t=i>1?void 0:i?c(l,e):l,s=r.length-1,o;s>=0;s--)(o=r[s])&&(t=(i?o(l,e,t):o(t))||t);return i&&t&&d(l,e,t),t};var k={};E(k,{SkdxFormControl:()=>a});module.exports=V(k);var n=require("lit"),m=require("../internal/define.cjs"),v=require("../internal/ids.cjs"),u=require("../internal/part.cjs"),b=require("./validity.cjs");var a=class extends n.LitElement{constructor(){super(...arguments);this.fieldEl=null;this.controlEl=null;this._syncControlAttributes=()=>{let e=this.fieldEl,i=this.firstElementChild;if(!e||!i)return;this.controlEl=i,(0,u.applyHostPart)(i,"form","control"),i.setAttribute("id",e.fieldId),e.name&&i.setAttribute("name",e.name);let t=e.querySelector("skdx-form-label");t&&i.setAttribute("aria-labelledby",(0,v.ensureId)(t,"skdx-form-label","label"))};this._handleValidityEvent=()=>{let e=this.controlEl,i=this.fieldEl;if(!e?.validity||!i)return;let t=(0,b.snapshotValidity)(e.validity);i.setValidity(t),t.valid?(e.removeAttribute("aria-invalid"),e.removeAttribute("aria-describedby")):(e.setAttribute("aria-invalid","true"),e.setAttribute("aria-describedby",i.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 n.html`<slot @slotchange=${this._syncControlAttributes}></slot>`}};a.styles=n.css`
+    :host {
+      display: contents;
+    }
+  `,a=h([(0,m.customElement)("skdx-form-control")],a);0&&(module.exports={SkdxFormControl});

package/dist/form/FormControl.d.cts

@@ -0,0 +1,41 @@
+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.
+ * Must be used inside `<skdx-form-field>`.
+ *
+ * @example
+ * ```html
+ * <skdx-form-field name="email">
+ *   <skdx-form-control><input type="email" required /></skdx-form-control>
+ * </skdx-form-field>
+ * ```
+ */
+export declare class SkdxFormControl extends LitElement {
+    static styles: import("lit").CSSResult;
+    private fieldEl;
+    private controlEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private _syncControlAttributes;
+    /**
+     * @internal Called by `<skdx-form>`'s `trySubmit()` to run native
+     * constraint validation on this field's control.
+     */
+    validate(): boolean;
+    private readonly _handleValidityEvent;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form-control': SkdxFormControl;
+    }
+}

package/dist/form/FormControl.d.ts

@@ -0,0 +1,41 @@
+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.
+ * Must be used inside `<skdx-form-field>`.
+ *
+ * @example
+ * ```html
+ * <skdx-form-field name="email">
+ *   <skdx-form-control><input type="email" required /></skdx-form-control>
+ * </skdx-form-field>
+ * ```
+ */
+export declare class SkdxFormControl extends LitElement {
+    static styles: import("lit").CSSResult;
+    private fieldEl;
+    private controlEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private _syncControlAttributes;
+    /**
+     * @internal Called by `<skdx-form>`'s `trySubmit()` to run native
+     * constraint validation on this field's control.
+     */
+    validate(): boolean;
+    private readonly _handleValidityEvent;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form-control': SkdxFormControl;
+    }
+}

package/dist/form/FormControl.js

@@ -0,0 +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`
+    :host {
+      display: contents;
+    }
+  `,r=s([u("skdx-form-control")],r);export{r as SkdxFormControl};

package/dist/form/FormErrorSummary.cjs

@@ -0,0 +1,15 @@
+"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">
+        ${this.entries.map(e=>n.html`
+            <li>
+              <a
+                class="skdx-form__error-summary-link"
+                href="#${e.id}"
+                @click=${i=>this.handleLinkClick(i,e.id)}
+              >
+                ${e.message}
+              </a>
+            </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});

package/dist/form/FormErrorSummary.d.cts

@@ -0,0 +1,79 @@
+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.
+ *
+ * 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.
+ *
+ * @example
+ * ```html
+ * <skdx-form>
+ *   <skdx-form-error-summary><h2>There is a problem</h2></skdx-form-error-summary>
+ *   <skdx-field name="name">…</skdx-field>
+ *   <skdx-form-submit>Save</skdx-form-submit>
+ * </skdx-form>
+ * ```
+ */
+export declare class SkdxFormErrorSummary extends LitElement {
+    /** Light DOM, so the skin's document stylesheet reaches the list and links. */
+    protected createRenderRoot(): HTMLElement;
+    /**
+     * Set `no-auto-focus` to stop the summary taking focus the moment it starts
+     * reporting — for a form that manages focus itself.
+     * @default false
+     */
+    noAutoFocus: boolean;
+    /**
+     * Whether the summary focuses itself on the transition into reporting. The
+     * contract's name for the same switch as `no-auto-focus`, inverted, so the
+     * attribute can keep the boolean-defaults-false shape HTML requires.
+     * @default true
+     */
+    get autoFocus(): boolean;
+    set autoFocus(on: boolean);
+    private entries;
+    /** Whether the previous render listed anything, so focus moves only on the empty → non-empty edge. */
+    private wasReporting;
+    private scope;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly rescan;
+    protected updated(): void;
+    private readonly handleLinkClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form-error-summary': SkdxFormErrorSummary;
+    }
+}

package/dist/form/FormErrorSummary.d.ts

@@ -0,0 +1,79 @@
+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.
+ *
+ * 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.
+ *
+ * @example
+ * ```html
+ * <skdx-form>
+ *   <skdx-form-error-summary><h2>There is a problem</h2></skdx-form-error-summary>
+ *   <skdx-field name="name">…</skdx-field>
+ *   <skdx-form-submit>Save</skdx-form-submit>
+ * </skdx-form>
+ * ```
+ */
+export declare class SkdxFormErrorSummary extends LitElement {
+    /** Light DOM, so the skin's document stylesheet reaches the list and links. */
+    protected createRenderRoot(): HTMLElement;
+    /**
+     * Set `no-auto-focus` to stop the summary taking focus the moment it starts
+     * reporting — for a form that manages focus itself.
+     * @default false
+     */
+    noAutoFocus: boolean;
+    /**
+     * Whether the summary focuses itself on the transition into reporting. The
+     * contract's name for the same switch as `no-auto-focus`, inverted, so the
+     * attribute can keep the boolean-defaults-false shape HTML requires.
+     * @default true
+     */
+    get autoFocus(): boolean;
+    set autoFocus(on: boolean);
+    private entries;
+    /** Whether the previous render listed anything, so focus moves only on the empty → non-empty edge. */
+    private wasReporting;
+    private scope;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly rescan;
+    protected updated(): void;
+    private readonly handleLinkClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form-error-summary': SkdxFormErrorSummary;
+    }
+}

package/dist/form/FormErrorSummary.js

@@ -0,0 +1,15 @@
+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`
+            <li>
+              <a
+                class="skdx-form__error-summary-link"
+                href="#${e.id}"
+                @click=${t=>this.handleLinkClick(t,e.id)}
+              >
+                ${e.message}
+              </a>
+            </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};

package/dist/form/FormField.cjs

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

package/dist/form/FormField.d.cts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import type { ValiditySnapshot } from './validity.cjs';
+/** A registered message that can be told to re-sync against the field's latest validity. */
+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.
+ *
+ * @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>
+ * ```
+ */
+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;
+    readonly fieldId: string;
+    readonly messageId: string;
+    private _validity?;
+    private readonly _messages;
+    /** The field's most recent validity snapshot, or `undefined` if not yet validated. */
+    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 a mounting `<skdx-form-message>`. */
+    registerMessage(el: RefreshableFormMessage): void;
+    /** @internal Called by an unmounting `<skdx-form-message>`. */
+    unregisterMessage(el: RefreshableFormMessage): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form-field': SkdxFormField;
+    }
+}

package/dist/form/FormField.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import type { ValiditySnapshot } from './validity.js';
+/** A registered message that can be told to re-sync against the field's latest validity. */
+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.
+ *
+ * @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>
+ * ```
+ */
+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;
+    readonly fieldId: string;
+    readonly messageId: string;
+    private _validity?;
+    private readonly _messages;
+    /** The field's most recent validity snapshot, or `undefined` if not yet validated. */
+    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 a mounting `<skdx-form-message>`. */
+    registerMessage(el: RefreshableFormMessage): void;
+    /** @internal Called by an unmounting `<skdx-form-message>`. */
+    unregisterMessage(el: RefreshableFormMessage): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-form-field': SkdxFormField;
+    }
+}

package/dist/form/FormField.js

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

package/dist/form/FormLabel.cjs

@@ -0,0 +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`
+      :host {
+        display: inline-block;
+      }
+    `,p.controlBoxOnHost],s=d([(0,b.customElement)("skdx-form-label","form","label")],s);0&&(module.exports={SkdxFormLabel});