@skdx/web-components 0.26.0

package/dist/editable/EditableSubmitTrigger.js

@@ -0,0 +1,17 @@
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(r,i,t,s)=>{for(var e=s>1?void 0:s?c(i,t):i,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(s?a(i,t,e):a(e))||e);return s&&e&&h(i,t,e),e};import{css as p,html as m,nothing as d}from"lit";import{takeHostAriaLabel as u}from"../internal/aria-label.js";import{customElement as b}from"../internal/define.js";import{controlBoxOnHost as v,delegatesFocusShadowRootOptions as f,hiddenHostStyles as g,resetNativeControl as k}from"../internal/styles.js";import{SkdxEditablePart as y}from"./Editable.js";var o=class extends y{constructor(){super(...arguments);this.label=null;this.handleMouseDown=t=>{t.preventDefault()};this.handleClick=()=>{this.root?.submit()}}connectedCallback(){super.connectedCallback(),this.label=u(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}render(){let t=this.root;return t?m`
+      <button
+        part="submit-trigger"
+        type="button"
+        aria-label=${this.label??d}
+        data-state="editing"
+        ?disabled=${t.disabled}
+        @mousedown=${this.handleMouseDown}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `:d}};o.shadowRootOptions=f,o.styles=[k,g,p`
+      :host {
+        display: inline-block;
+      }
+    `,v],o=n([b("skdx-editable-submit-trigger","editable","submit-trigger")],o);export{o as SkdxEditableSubmitTrigger};

package/dist/editable/EditableTextarea.cjs

@@ -0,0 +1,17 @@
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(o,r)=>{for(var e in r)n(o,e,{get:r[e],enumerable:!0})},g=(o,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of v(r))!b.call(o,a)&&a!==e&&n(o,a,{get:()=>r[a],enumerable:!(t=u(r,a))||t.enumerable});return o};var x=o=>g(n({},"__esModule",{value:!0}),o),h=(o,r,e,t)=>{for(var a=t>1?void 0:t?u(r,e):r,s=o.length-1,d;s>=0;s--)(d=o[s])&&(a=(t?d(r,e,a):d(a))||a);return t&&a&&n(r,e,a),a};var E={};y(E,{SkdxEditableTextarea:()=>l});module.exports=x(E);var i=require("lit"),c=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),p=require("../internal/styles.cjs"),f=require("./Editable.cjs");var l=class extends f.SkdxEditablePart{constructor(){super(...arguments);this.label=null;this.handleInput=e=>{this.root?.setValue(e.target.value)};this.handleKeydown=e=>{let t=this.root;if(t){if(e.key==="Escape"){e.preventDefault(),t.cancel();return}e.key==="Enter"&&(!e.metaKey&&!e.ctrlKey||t.submitsOnEnter&&(e.preventDefault(),t.submit()))}};this.handleBlur=()=>{this.root?.submitsOnBlur&&this.root.submit()}}createRenderRoot(){return this}focus(e){this.control?.focus(e)}connectedCallback(){super.connectedCallback(),(0,p.installLightDomStyles)(),this.label=(0,c.takeHostAriaLabel)(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}get control(){return this.querySelector("textarea")}focusEditor(e){let t=this.control;t&&(t.focus(),e?t.select():t.setSelectionRange(t.value.length,t.value.length))}render(){let e=this.root;return e?i.html`
+      <textarea
+        part="textarea"
+        aria-label=${this.label??i.nothing}
+        placeholder=${e.placeholder??i.nothing}
+        maxlength=${e.maxLength??i.nothing}
+        .value=${e.text}
+        ?disabled=${e.disabled}
+        ?readonly=${e.readOnly}
+        ?required=${e.required}
+        data-state="editing"
+        data-empty=${e.text===""?"":i.nothing}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+        @blur=${this.handleBlur}
+      ></textarea>
+    `:i.nothing}};l=h([(0,m.customElement)("skdx-editable-textarea","editable","textarea")],l);0&&(module.exports={SkdxEditableTextarea});

package/dist/editable/EditableTextarea.d.cts

@@ -0,0 +1,68 @@
+import { nothing } from 'lit';
+import { SkdxEditablePart } from './Editable.cjs';
+/**
+ * `<skdx-editable-textarea>` — the multi-line editor for an `<skdx-editable>`, a
+ * drop-in alternative to `<skdx-editable-input>` and never used alongside it.
+ * Hidden outside edit mode, and a native `<textarea>` inside it, taking value,
+ * `placeholder`, `disabled`, `read-only`, `required` and `max-length` from the
+ * root. Must be used inside `<skdx-editable>`.
+ *
+ * The one behavioural difference is Enter, and it matters: in a multi-line
+ * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
+ * (still gated on `submit-mode` including `'enter'`). A plain Enter is left
+ * entirely alone. Escape still cancels, and blur still submits under
+ * `submit-mode` `'blur'`/`'both'`.
+ *
+ * @example
+ * ```html
+ * <skdx-editable placeholder="Add a note" submit-mode="enter">
+ *   <skdx-editable-preview></skdx-editable-preview>
+ *   <skdx-editable-textarea aria-label="Note" rows="4"></skdx-editable-textarea>
+ * </skdx-editable>
+ * ```
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
+ * boundary a wrapping `<label>` cannot name the `<textarea>` (a label names its
+ * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
+ * see it (`querySelectorAll()` does not pierce a shadow root). Putting
+ * `display: contents` on the `<textarea>` instead is not an option: CSS Display
+ * 3 computes it to `none` on form controls.
+ *
+ * @csspart textarea - The native `<textarea>` element. **`::part(textarea)` does not reach
+ * it.** This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so the
+ * name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-editable-textarea > textarea { … }`.
+ */
+export declare class SkdxEditableTextarea extends SkdxEditablePart {
+    /** Light DOM, for the labelling reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<textarea>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<textarea>` inside. */
+    private label;
+    connectedCallback(): void;
+    protected updated(): void;
+    /** The native control, once rendered. */
+    private get control();
+    /**
+     * @internal Called by the root when edit mode opens — never by a consumer.
+     * `selectAll` selects the whole value so typing replaces it; otherwise the
+     * caret goes to the end so typing appends.
+     */
+    focusEditor(selectAll: boolean): void;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handleBlur;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-editable-textarea': SkdxEditableTextarea;
+    }
+}

package/dist/editable/EditableTextarea.d.ts

@@ -0,0 +1,68 @@
+import { nothing } from 'lit';
+import { SkdxEditablePart } from './Editable.js';
+/**
+ * `<skdx-editable-textarea>` — the multi-line editor for an `<skdx-editable>`, a
+ * drop-in alternative to `<skdx-editable-input>` and never used alongside it.
+ * Hidden outside edit mode, and a native `<textarea>` inside it, taking value,
+ * `placeholder`, `disabled`, `read-only`, `required` and `max-length` from the
+ * root. Must be used inside `<skdx-editable>`.
+ *
+ * The one behavioural difference is Enter, and it matters: in a multi-line
+ * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
+ * (still gated on `submit-mode` including `'enter'`). A plain Enter is left
+ * entirely alone. Escape still cancels, and blur still submits under
+ * `submit-mode` `'blur'`/`'both'`.
+ *
+ * @example
+ * ```html
+ * <skdx-editable placeholder="Add a note" submit-mode="enter">
+ *   <skdx-editable-preview></skdx-editable-preview>
+ *   <skdx-editable-textarea aria-label="Note" rows="4"></skdx-editable-textarea>
+ * </skdx-editable>
+ * ```
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
+ * boundary a wrapping `<label>` cannot name the `<textarea>` (a label names its
+ * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
+ * see it (`querySelectorAll()` does not pierce a shadow root). Putting
+ * `display: contents` on the `<textarea>` instead is not an option: CSS Display
+ * 3 computes it to `none` on form controls.
+ *
+ * @csspart textarea - The native `<textarea>` element. **`::part(textarea)` does not reach
+ * it.** This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so the
+ * name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-editable-textarea > textarea { … }`.
+ */
+export declare class SkdxEditableTextarea extends SkdxEditablePart {
+    /** Light DOM, for the labelling reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<textarea>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<textarea>` inside. */
+    private label;
+    connectedCallback(): void;
+    protected updated(): void;
+    /** The native control, once rendered. */
+    private get control();
+    /**
+     * @internal Called by the root when edit mode opens — never by a consumer.
+     * `selectAll` selects the whole value so typing replaces it; otherwise the
+     * caret goes to the end so typing appends.
+     */
+    focusEditor(selectAll: boolean): void;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handleBlur;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-editable-textarea': SkdxEditableTextarea;
+    }
+}

package/dist/editable/EditableTextarea.js

@@ -0,0 +1,17 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(l,a,e,t)=>{for(var r=t>1?void 0:t?h(a,e):a,n=l.length-1,s;n>=0;n--)(s=l[n])&&(r=(t?s(a,e,r):s(r))||r);return t&&r&&u(a,e,r),r};import{html as c,nothing as o}from"lit";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{customElement as p}from"../internal/define.js";import{installLightDomStyles as f}from"../internal/styles.js";import{SkdxEditablePart as v}from"./Editable.js";var i=class extends v{constructor(){super(...arguments);this.label=null;this.handleInput=e=>{this.root?.setValue(e.target.value)};this.handleKeydown=e=>{let t=this.root;if(t){if(e.key==="Escape"){e.preventDefault(),t.cancel();return}e.key==="Enter"&&(!e.metaKey&&!e.ctrlKey||t.submitsOnEnter&&(e.preventDefault(),t.submit()))}};this.handleBlur=()=>{this.root?.submitsOnBlur&&this.root.submit()}}createRenderRoot(){return this}focus(e){this.control?.focus(e)}connectedCallback(){super.connectedCallback(),f(),this.label=m(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}get control(){return this.querySelector("textarea")}focusEditor(e){let t=this.control;t&&(t.focus(),e?t.select():t.setSelectionRange(t.value.length,t.value.length))}render(){let e=this.root;return e?c`
+      <textarea
+        part="textarea"
+        aria-label=${this.label??o}
+        placeholder=${e.placeholder??o}
+        maxlength=${e.maxLength??o}
+        .value=${e.text}
+        ?disabled=${e.disabled}
+        ?readonly=${e.readOnly}
+        ?required=${e.required}
+        data-state="editing"
+        data-empty=${e.text===""?"":o}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+        @blur=${this.handleBlur}
+      ></textarea>
+    `:o}};i=d([p("skdx-editable-textarea","editable","textarea")],i);export{i as SkdxEditableTextarea};

package/dist/editable/index.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var d in e)i(t,d,{get:e[d],enumerable:!0})},T=(t,e,d,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!f.call(t,r)&&r!==d&&i(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var n=t=>T(i({},"__esModule",{value:!0}),t);var u={};g(u,{SkdxEditable:()=>x.SkdxEditable,SkdxEditableCancelTrigger:()=>S.SkdxEditableCancelTrigger,SkdxEditableEditTrigger:()=>m.SkdxEditableEditTrigger,SkdxEditableInput:()=>b.SkdxEditableInput,SkdxEditablePreview:()=>a.SkdxEditablePreview,SkdxEditableSubmitTrigger:()=>E.SkdxEditableSubmitTrigger,SkdxEditableTextarea:()=>l.SkdxEditableTextarea});module.exports=n(u);var x=require("./Editable.cjs"),a=require("./EditablePreview.cjs"),b=require("./EditableInput.cjs"),l=require("./EditableTextarea.cjs"),E=require("./EditableSubmitTrigger.cjs"),S=require("./EditableCancelTrigger.cjs"),m=require("./EditableEditTrigger.cjs");0&&(module.exports={SkdxEditable,SkdxEditableCancelTrigger,SkdxEditableEditTrigger,SkdxEditableInput,SkdxEditablePreview,SkdxEditableSubmitTrigger,SkdxEditableTextarea});

package/dist/editable/index.d.cts

@@ -0,0 +1,8 @@
+export { SkdxEditable } from './Editable.cjs';
+export type { SkdxEditableActivationMode, SkdxEditableSubmitMode } from './Editable.cjs';
+export { SkdxEditablePreview } from './EditablePreview.cjs';
+export { SkdxEditableInput } from './EditableInput.cjs';
+export { SkdxEditableTextarea } from './EditableTextarea.cjs';
+export { SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.cjs';
+export { SkdxEditableCancelTrigger } from './EditableCancelTrigger.cjs';
+export { SkdxEditableEditTrigger } from './EditableEditTrigger.cjs';

package/dist/editable/index.d.ts

@@ -0,0 +1,8 @@
+export { SkdxEditable } from './Editable.js';
+export type { SkdxEditableActivationMode, SkdxEditableSubmitMode } from './Editable.js';
+export { SkdxEditablePreview } from './EditablePreview.js';
+export { SkdxEditableInput } from './EditableInput.js';
+export { SkdxEditableTextarea } from './EditableTextarea.js';
+export { SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.js';
+export { SkdxEditableCancelTrigger } from './EditableCancelTrigger.js';
+export { SkdxEditableEditTrigger } from './EditableEditTrigger.js';

package/dist/editable/index.js

@@ -0,0 +1 @@
+import{SkdxEditable as r}from"./Editable.js";import{SkdxEditablePreview as i}from"./EditablePreview.js";import{SkdxEditableInput as x}from"./EditableInput.js";import{SkdxEditableTextarea as b}from"./EditableTextarea.js";import{SkdxEditableSubmitTrigger as E}from"./EditableSubmitTrigger.js";import{SkdxEditableCancelTrigger as m}from"./EditableCancelTrigger.js";import{SkdxEditableEditTrigger as k}from"./EditableEditTrigger.js";export{r as SkdxEditable,m as SkdxEditableCancelTrigger,k as SkdxEditableEditTrigger,x as SkdxEditableInput,i as SkdxEditablePreview,E as SkdxEditableSubmitTrigger,b as SkdxEditableTextarea};

package/dist/field/Field.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var y=(s,e)=>{for(var t in e)h(s,t,{get:e[t],enumerable:!0})},M=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!C.call(s,i)&&i!==t&&h(s,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return s};var b=s=>M(h({},"__esModule",{value:!0}),s),n=(s,e,t,r)=>{for(var i=r>1?void 0:r?p(e,t):e,c=s.length-1,m;c>=0;c--)(m=s[c])&&(i=(r?m(e,t,i):m(i))||i);return r&&i&&h(e,t,i),i};var E={};y(E,{SkdxField:()=>o});module.exports=b(E);var l=require("lit"),a=require("lit/decorators.js"),v=require("../internal/define.cjs"),d=require("../internal/ids.cjs"),f=require("../utils/live-announcer.cjs"),u=require("./field-core.cjs");var o=class extends l.LitElement{constructor(){super(...arguments);this.mode="blur";this.labelId=(0,d.nextId)("skdx-field-label");this.descriptionId=(0,d.nextId)("skdx-field-description");this.errorId=(0,d.nextId)("skdx-field-error");this.fallbackControlId=(0,d.nextId)("skdx-field-control");this.controller=new u.FieldController({labelId:this.labelId,descriptionId:this.descriptionId,errorId:this.errorId,controlId:this.fallbackControlId,grouped:this.grouped,onSnapshotChange:()=>this.handleSnapshotChange(),announce:f.announce});this.mirrored="";this.mirrorQueued=!1;this.nativeForm=null;this.resetMirror=()=>{this.mirrored&&(this.mirrored="",this.control?.setCustomValidity?.(""))};this.handleSlotChange=()=>{this.controller.sync(),this.refreshParts()}}get grouped(){return!1}get control(){return(0,u.findFieldControl)(this)}get messages(){return this.controller.state.errors}get controlId(){return this.controller.state.controlId}get count(){return this.controller.state.count}setCharacterCount(t){this.controller.setCharacterCount(t)}get state(){return this.controller.state}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.resetMirror,!0),this.addEventListener("change",this.resetMirror,!0),this.addEventListener("focusout",this.resetMirror,!0),this.nativeForm=this.closest("form"),this.nativeForm&&this.ownerDocument.addEventListener("submit",this.resetMirror,!0),this.applyProps(),this.controller.connect(this)}disconnectedCallback(){this.removeEventListener("input",this.resetMirror,!0),this.removeEventListener("change",this.resetMirror,!0),this.removeEventListener("focusout",this.resetMirror,!0),this.nativeForm&&this.ownerDocument.removeEventListener("submit",this.resetMirror,!0),this.nativeForm=null,this.controller.disconnect(),super.disconnectedCallback()}updated(){this.applyProps(),this.controller.sync()}validate(){return this.resetMirror(),this.controller.validate()}applyProps(){this.controller.setProps({validate:this.validator,mode:this.mode,errors:this.errors,value:this.value,name:this.name,getCharacterCountMessage:this.getCharacterCountMessage,invalidMessage:this.invalidMessage})}handleSnapshotChange(){this.refreshParts(),this.controller.sync(),this.queueMirror()}refreshParts(){let t=this.querySelectorAll("skdx-field-label, skdx-field-description, skdx-field-error, skdx-field-character-count");for(let r of t)r.refresh?.()}queueMirror(){this.mirrorQueued||(this.mirrorQueued=!0,queueMicrotask(()=>{this.mirrorQueued=!1,this.mirrorValidity()}))}mirrorValidity(){let t=this.control;if(typeof t?.setCustomValidity!="function")return;let r=this.messages[0]??"";r!==this.mirrored&&(this.mirrored=r,t.setCustomValidity(r))}render(){return l.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};o.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,n([(0,a.property)({type:String,reflect:!0})],o.prototype,"name",2),n([(0,a.property)({type:String})],o.prototype,"mode",2),n([(0,a.property)({attribute:"errors"})],o.prototype,"errors",2),n([(0,a.property)({attribute:!1})],o.prototype,"value",2),n([(0,a.property)({attribute:!1})],o.prototype,"validator",2),n([(0,a.property)({attribute:!1})],o.prototype,"getCharacterCountMessage",2),n([(0,a.property)({attribute:"invalid-message"})],o.prototype,"invalidMessage",2),o=n([(0,v.customElement)("skdx-field","field","root")],o);0&&(module.exports={SkdxField});

package/dist/field/Field.d.cts

@@ -0,0 +1,180 @@
+import { LitElement } from 'lit';
+import { type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidator } from './field-core.cjs';
+/**
+ * `<skdx-field>` — wraps one form control and wires its `<skdx-field-label>`,
+ * `<skdx-field-description>`, and `<skdx-field-error>` to it: generated ids,
+ * `aria-describedby`, `aria-invalid`, and the
+ * `data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled` state
+ * hooks on both this element and the control. Any control works — an skdx
+ * component, a native `<input>`, or a third-party widget — because the Field
+ * *finds* it in its own subtree rather than expecting it to cooperate.
+ *
+ * Also owns the field's validation model: `validator` (sync or async), `mode`,
+ * server errors through `errors`, and the wrapped control's own native
+ * constraint validation as a fallback, so plain `required` works with no
+ * configuration. Every rule lives in `field-core.ts`, shared verbatim with the
+ * other four framework packages; this element only feeds the controller and
+ * renders a slot.
+ *
+ * **Light-DOM transparent on purpose.** The shadow root is nothing but a
+ * `<slot>`, so the slotted control stays in *this element's* light DOM and
+ * `this.querySelectorAll(...)` inside `findFieldControl()` reaches it — the
+ * same reason `<skdx-form-control>` reads `this.firstElementChild`. The custom
+ * element itself is the Field root handed to `controller.connect(this)`, which
+ * is what carries `data-skdx-field`.
+ *
+ * @slot - A `<skdx-field-label>`, the control, an optional
+ * `<skdx-field-description>`, and a `<skdx-field-error>`.
+ * @fires validity-change - `{ valid, errors, touched, dirty, filled }`, bubbling,
+ * so a `<skdx-form-error-summary>` anywhere above re-scans.
+ *
+ * @example
+ * ```html
+ * <skdx-field name="name">
+ *   <skdx-field-label>Name</skdx-field-label>
+ *   <input />
+ *   <skdx-field-description>As shown on your passport.</skdx-field-description>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxField extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Field name, used as the fallback error-summary link text when the field
+     * renders no error element of its own.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * When validation first runs. Regardless of mode, a field that has already
+     * failed re-validates on every input so the error clears as soon as it is
+     * fixed.
+     * @default 'blur'
+     */
+    mode: FieldMode;
+    /**
+     * Server-injected errors, always shown, listed before anything the validator
+     * produces; clearing this clears them.
+     *
+     * As an attribute it is a single message (`errors="That email is taken"`) —
+     * no JSON or comma parsing, because a comma is legitimate message copy. Set
+     * the *property* to a `string[]` for several messages.
+     * @default undefined
+     */
+    errors?: string | string[];
+    /**
+     * Value handed to the validator. Leave unset and the Field reads the
+     * discovered control's `checked` (checkbox/radio) or `value` instead.
+     * Property only — a value is rarely a string.
+     * @default undefined
+     */
+    value?: unknown;
+    /**
+     * This field's validator, returning one message, several, or
+     * `null`/`undefined` when the value is acceptable. May be async; a
+     * resolution from a superseded run is discarded.
+     *
+     * Named `validator`, not `validate`, because the contract *also* declares
+     * the imperative `validate(): Promise<boolean>` method that `<skdx-form>`'s
+     * `trySubmit()` calls — one JavaScript class cannot carry both under one
+     * name. Property only: a function has no attribute form.
+     * @default undefined
+     */
+    validator?: FieldValidator;
+    /**
+     * Words the character-count copy — what `<skdx-field-character-count>`
+     * renders, what is announced one typing pause later, and the error raised
+     * once the value goes over the soft limit. A negative `remaining` means over
+     * the limit. Property only: a function has no attribute form.
+     * @default undefined — the built-in English wording ("You have 5 characters remaining").
+     */
+    getCharacterCountMessage?: (remaining: number) => string;
+    /**
+     * What the Field says when the wrapped control fails native constraint
+     * validation but the browser reports no message of its own — a rare path,
+     * and the one place a Field otherwise emits untranslatable English.
+     * @default undefined — keeps `'This field is invalid.'`
+     */
+    invalidMessage?: string;
+    /** @internal The `<skdx-field-label>`'s host id — the `aria-labelledby` target in group mode. */
+    readonly labelId: string;
+    /** @internal The `<skdx-field-description>`'s host id. */
+    readonly descriptionId: string;
+    /** @internal The `<skdx-field-error>`'s host id. */
+    readonly errorId: string;
+    /** @internal Fallback id assigned to a control that brought none of its own. */
+    readonly fallbackControlId: string;
+    /**
+     * @internal `true` for `<skdx-fieldset>`: the label is a `<legend>` and the
+     * control is named with `aria-labelledby` rather than `for`/`id`. A getter,
+     * not a field, so the subclass's override is already visible while this
+     * class's own field initialisers (the controller) run.
+     */
+    get grouped(): boolean;
+    private readonly controller;
+    /** The last message pushed into the control, so we neither re-write nor clear someone else's. */
+    private mirrored;
+    /** Whether a mirror write is already queued for this turn. */
+    private mirrorQueued;
+    /** The native `<form>` we hung the mirror-reset on, if any. */
+    private nativeForm;
+    /** @internal The control this Field discovered, or `null` when it wraps nothing focusable. */
+    get control(): HTMLElement | null;
+    /** @internal The current messages — read by `<skdx-field-error>` to render itself. */
+    get messages(): string[];
+    /** @internal The discovered control's id — the label's `for` target. */
+    get controlId(): string;
+    /** @internal Length of the control's value — read by `<skdx-field-character-count>` to render itself. */
+    get count(): number;
+    /**
+     * @internal Registers (or clears, with `null`) the character count. Called by
+     * `<skdx-field-character-count>` on connect, on property change, and on
+     * disconnect.
+     */
+    setCharacterCount(options: FieldCharacterCountOptions | null): void;
+    /** The full current state: `{ controlId, errors, valid, touched, dirty, filled }`. */
+    get state(): FieldSnapshot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Runs validation now and resolves to whether the field is valid. Called by
+     * `<skdx-form>`'s `trySubmit()`, and available to any consumer driving
+     * validation imperatively.
+     */
+    validate(): Promise<boolean>;
+    private applyProps;
+    private handleSnapshotChange;
+    private refreshParts;
+    /**
+     * Queues the mirror for the end of the current turn instead of writing it
+     * from inside `update()`.
+     *
+     * The controller announces a snapshot change *before* it runs the validator,
+     * so mirroring synchronously would put our own message into the control's
+     * `customError` in time for the very next `commit()` to read it back through
+     * `nativeMessage()` as a native constraint failure — an error that then
+     * re-composes itself from its own mirror and can never clear. The
+     * `resetMirror` listeners only cover the message left over from the
+     * *previous* interaction; this covers the one made during this one.
+     */
+    private queueMirror;
+    /**
+     * Pushes the field's first message into the control's own validity, so a
+     * control that participates in constraint validation reports the Field's
+     * error too — a native input through `setCustomValidity`, an skdx
+     * `FormAssociated` element through the same method backed by
+     * `ElementInternals.setValidity`. A control with neither is left alone.
+     */
+    private mirrorValidity;
+    /** Drops our mirrored message before the controller reads the control's native validity. */
+    private readonly resetMirror;
+    private readonly handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field': SkdxField;
+    }
+}

package/dist/field/Field.d.ts

@@ -0,0 +1,180 @@
+import { LitElement } from 'lit';
+import { type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidator } from './field-core.js';
+/**
+ * `<skdx-field>` — wraps one form control and wires its `<skdx-field-label>`,
+ * `<skdx-field-description>`, and `<skdx-field-error>` to it: generated ids,
+ * `aria-describedby`, `aria-invalid`, and the
+ * `data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled` state
+ * hooks on both this element and the control. Any control works — an skdx
+ * component, a native `<input>`, or a third-party widget — because the Field
+ * *finds* it in its own subtree rather than expecting it to cooperate.
+ *
+ * Also owns the field's validation model: `validator` (sync or async), `mode`,
+ * server errors through `errors`, and the wrapped control's own native
+ * constraint validation as a fallback, so plain `required` works with no
+ * configuration. Every rule lives in `field-core.ts`, shared verbatim with the
+ * other four framework packages; this element only feeds the controller and
+ * renders a slot.
+ *
+ * **Light-DOM transparent on purpose.** The shadow root is nothing but a
+ * `<slot>`, so the slotted control stays in *this element's* light DOM and
+ * `this.querySelectorAll(...)` inside `findFieldControl()` reaches it — the
+ * same reason `<skdx-form-control>` reads `this.firstElementChild`. The custom
+ * element itself is the Field root handed to `controller.connect(this)`, which
+ * is what carries `data-skdx-field`.
+ *
+ * @slot - A `<skdx-field-label>`, the control, an optional
+ * `<skdx-field-description>`, and a `<skdx-field-error>`.
+ * @fires validity-change - `{ valid, errors, touched, dirty, filled }`, bubbling,
+ * so a `<skdx-form-error-summary>` anywhere above re-scans.
+ *
+ * @example
+ * ```html
+ * <skdx-field name="name">
+ *   <skdx-field-label>Name</skdx-field-label>
+ *   <input />
+ *   <skdx-field-description>As shown on your passport.</skdx-field-description>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxField extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Field name, used as the fallback error-summary link text when the field
+     * renders no error element of its own.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * When validation first runs. Regardless of mode, a field that has already
+     * failed re-validates on every input so the error clears as soon as it is
+     * fixed.
+     * @default 'blur'
+     */
+    mode: FieldMode;
+    /**
+     * Server-injected errors, always shown, listed before anything the validator
+     * produces; clearing this clears them.
+     *
+     * As an attribute it is a single message (`errors="That email is taken"`) —
+     * no JSON or comma parsing, because a comma is legitimate message copy. Set
+     * the *property* to a `string[]` for several messages.
+     * @default undefined
+     */
+    errors?: string | string[];
+    /**
+     * Value handed to the validator. Leave unset and the Field reads the
+     * discovered control's `checked` (checkbox/radio) or `value` instead.
+     * Property only — a value is rarely a string.
+     * @default undefined
+     */
+    value?: unknown;
+    /**
+     * This field's validator, returning one message, several, or
+     * `null`/`undefined` when the value is acceptable. May be async; a
+     * resolution from a superseded run is discarded.
+     *
+     * Named `validator`, not `validate`, because the contract *also* declares
+     * the imperative `validate(): Promise<boolean>` method that `<skdx-form>`'s
+     * `trySubmit()` calls — one JavaScript class cannot carry both under one
+     * name. Property only: a function has no attribute form.
+     * @default undefined
+     */
+    validator?: FieldValidator;
+    /**
+     * Words the character-count copy — what `<skdx-field-character-count>`
+     * renders, what is announced one typing pause later, and the error raised
+     * once the value goes over the soft limit. A negative `remaining` means over
+     * the limit. Property only: a function has no attribute form.
+     * @default undefined — the built-in English wording ("You have 5 characters remaining").
+     */
+    getCharacterCountMessage?: (remaining: number) => string;
+    /**
+     * What the Field says when the wrapped control fails native constraint
+     * validation but the browser reports no message of its own — a rare path,
+     * and the one place a Field otherwise emits untranslatable English.
+     * @default undefined — keeps `'This field is invalid.'`
+     */
+    invalidMessage?: string;
+    /** @internal The `<skdx-field-label>`'s host id — the `aria-labelledby` target in group mode. */
+    readonly labelId: string;
+    /** @internal The `<skdx-field-description>`'s host id. */
+    readonly descriptionId: string;
+    /** @internal The `<skdx-field-error>`'s host id. */
+    readonly errorId: string;
+    /** @internal Fallback id assigned to a control that brought none of its own. */
+    readonly fallbackControlId: string;
+    /**
+     * @internal `true` for `<skdx-fieldset>`: the label is a `<legend>` and the
+     * control is named with `aria-labelledby` rather than `for`/`id`. A getter,
+     * not a field, so the subclass's override is already visible while this
+     * class's own field initialisers (the controller) run.
+     */
+    get grouped(): boolean;
+    private readonly controller;
+    /** The last message pushed into the control, so we neither re-write nor clear someone else's. */
+    private mirrored;
+    /** Whether a mirror write is already queued for this turn. */
+    private mirrorQueued;
+    /** The native `<form>` we hung the mirror-reset on, if any. */
+    private nativeForm;
+    /** @internal The control this Field discovered, or `null` when it wraps nothing focusable. */
+    get control(): HTMLElement | null;
+    /** @internal The current messages — read by `<skdx-field-error>` to render itself. */
+    get messages(): string[];
+    /** @internal The discovered control's id — the label's `for` target. */
+    get controlId(): string;
+    /** @internal Length of the control's value — read by `<skdx-field-character-count>` to render itself. */
+    get count(): number;
+    /**
+     * @internal Registers (or clears, with `null`) the character count. Called by
+     * `<skdx-field-character-count>` on connect, on property change, and on
+     * disconnect.
+     */
+    setCharacterCount(options: FieldCharacterCountOptions | null): void;
+    /** The full current state: `{ controlId, errors, valid, touched, dirty, filled }`. */
+    get state(): FieldSnapshot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Runs validation now and resolves to whether the field is valid. Called by
+     * `<skdx-form>`'s `trySubmit()`, and available to any consumer driving
+     * validation imperatively.
+     */
+    validate(): Promise<boolean>;
+    private applyProps;
+    private handleSnapshotChange;
+    private refreshParts;
+    /**
+     * Queues the mirror for the end of the current turn instead of writing it
+     * from inside `update()`.
+     *
+     * The controller announces a snapshot change *before* it runs the validator,
+     * so mirroring synchronously would put our own message into the control's
+     * `customError` in time for the very next `commit()` to read it back through
+     * `nativeMessage()` as a native constraint failure — an error that then
+     * re-composes itself from its own mirror and can never clear. The
+     * `resetMirror` listeners only cover the message left over from the
+     * *previous* interaction; this covers the one made during this one.
+     */
+    private queueMirror;
+    /**
+     * Pushes the field's first message into the control's own validity, so a
+     * control that participates in constraint validation reports the Field's
+     * error too — a native input through `setCustomValidity`, an skdx
+     * `FormAssociated` element through the same method backed by
+     * `ElementInternals.setValidity`. A control with neither is left alone.
+     */
+    private mirrorValidity;
+    /** Drops our mirrored message before the controller reads the control's native validity. */
+    private readonly resetMirror;
+    private readonly handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field': SkdxField;
+    }
+}

package/dist/field/Field.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(l,n,t,r)=>{for(var o=r>1?void 0:r?c(n,t):n,d=l.length-1,h;d>=0;d--)(h=l[d])&&(o=(r?h(n,t,o):h(o))||o);return r&&o&&u(n,t,o),o};import{css as m,html as p,LitElement as v}from"lit";import{property as s}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{nextId as a}from"../internal/ids.js";import{announce as g}from"../utils/live-announcer.js";import{FieldController as C,findFieldControl as y}from"./field-core.js";var e=class extends v{constructor(){super(...arguments);this.mode="blur";this.labelId=a("skdx-field-label");this.descriptionId=a("skdx-field-description");this.errorId=a("skdx-field-error");this.fallbackControlId=a("skdx-field-control");this.controller=new C({labelId:this.labelId,descriptionId:this.descriptionId,errorId:this.errorId,controlId:this.fallbackControlId,grouped:this.grouped,onSnapshotChange:()=>this.handleSnapshotChange(),announce:g});this.mirrored="";this.mirrorQueued=!1;this.nativeForm=null;this.resetMirror=()=>{this.mirrored&&(this.mirrored="",this.control?.setCustomValidity?.(""))};this.handleSlotChange=()=>{this.controller.sync(),this.refreshParts()}}get grouped(){return!1}get control(){return y(this)}get messages(){return this.controller.state.errors}get controlId(){return this.controller.state.controlId}get count(){return this.controller.state.count}setCharacterCount(t){this.controller.setCharacterCount(t)}get state(){return this.controller.state}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.resetMirror,!0),this.addEventListener("change",this.resetMirror,!0),this.addEventListener("focusout",this.resetMirror,!0),this.nativeForm=this.closest("form"),this.nativeForm&&this.ownerDocument.addEventListener("submit",this.resetMirror,!0),this.applyProps(),this.controller.connect(this)}disconnectedCallback(){this.removeEventListener("input",this.resetMirror,!0),this.removeEventListener("change",this.resetMirror,!0),this.removeEventListener("focusout",this.resetMirror,!0),this.nativeForm&&this.ownerDocument.removeEventListener("submit",this.resetMirror,!0),this.nativeForm=null,this.controller.disconnect(),super.disconnectedCallback()}updated(){this.applyProps(),this.controller.sync()}validate(){return this.resetMirror(),this.controller.validate()}applyProps(){this.controller.setProps({validate:this.validator,mode:this.mode,errors:this.errors,value:this.value,name:this.name,getCharacterCountMessage:this.getCharacterCountMessage,invalidMessage:this.invalidMessage})}handleSnapshotChange(){this.refreshParts(),this.controller.sync(),this.queueMirror()}refreshParts(){let t=this.querySelectorAll("skdx-field-label, skdx-field-description, skdx-field-error, skdx-field-character-count");for(let r of t)r.refresh?.()}queueMirror(){this.mirrorQueued||(this.mirrorQueued=!0,queueMicrotask(()=>{this.mirrorQueued=!1,this.mirrorValidity()}))}mirrorValidity(){let t=this.control;if(typeof t?.setCustomValidity!="function")return;let r=this.messages[0]??"";r!==this.mirrored&&(this.mirrored=r,t.setCustomValidity(r))}render(){return p`<slot @slotchange=${this.handleSlotChange}></slot>`}};e.styles=m`
+    :host {
+      display: block;
+    }
+  `,i([s({type:String,reflect:!0})],e.prototype,"name",2),i([s({type:String})],e.prototype,"mode",2),i([s({attribute:"errors"})],e.prototype,"errors",2),i([s({attribute:!1})],e.prototype,"value",2),i([s({attribute:!1})],e.prototype,"validator",2),i([s({attribute:!1})],e.prototype,"getCharacterCountMessage",2),i([s({attribute:"invalid-message"})],e.prototype,"invalidMessage",2),e=i([f("skdx-field","field","root")],e);export{e as SkdxField};

package/dist/field/FieldCharacterCount.cjs

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