@nldd/design-system 0.8.83 → 0.8.84

package/dist/utilities/codemirror/codemirror-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codemirror-element.d.ts","sourceRoot":"","sources":["../../../src/utilities/codemirror/codemirror-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAElF;;;;;;;;;GASG;AACH,8BAAsB,qBAAsB,SAAQ,UAAU;IAC7D,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAE5B,wFAAwF;IACxF,OAAO,CAAC,WAAW,CAAS;IAE5B,+EAA+E;IAC/E,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,yDAAyD;IACzD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS;IAEpE,0DAA0D;IAC1D,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,SAAS,EAAE;IAEjD,2DAA2D;IAC3D,SAAS,KAAK,GAAG,IAAI,MAAM,CAE1B;IAED,SAAS,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAa/C;;;;;;OAMG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,aAAa,IAAI,MAAM;IAIjC,SAAS,CAAC,aAAa,IAAI,IAAI;IAK/B,wEAAwE;IACxE,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAMpC,0EAA0E;IAC1E,SAAS,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAI3E;;;;;OAKG;IACM,KAAK,IAAI,IAAI;IAItB;;;;;;OAMG;IACH,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAajC,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;CAOrC"}
+{"version":3,"file":"codemirror-element.d.ts","sourceRoot":"","sources":["../../../src/utilities/codemirror/codemirror-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAElF;;;;;;;;;GASG;AACH,8BAAsB,qBAAsB,SAAQ,UAAU;IAC7D,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAE5B,wFAAwF;IACxF,OAAO,CAAC,WAAW,CAAS;IAE5B,+EAA+E;IAC/E,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,yDAAyD;IACzD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS;IAEpE,0DAA0D;IAC1D,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,SAAS,EAAE;IAEjD,2DAA2D;IAC3D,SAAS,KAAK,GAAG,IAAI,MAAM,CAE1B;IAED,SAAS,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAmB/C;;;;;;OAMG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,aAAa,IAAI,MAAM;IAIjC,SAAS,CAAC,aAAa,IAAI,IAAI;IAK/B,wEAAwE;IACxE,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAMpC,0EAA0E;IAC1E,SAAS,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAI3E;;;;;OAKG;IACM,KAAK,IAAI,IAAI;IAItB;;;;;;OAMG;IACH,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAajC,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;CAOrC"}

package/dist/utilities/codemirror/codemirror-element.js

@@ -33,6 +33,11 @@ export class NLDDCodeMirrorElement extends LitElement {
             root: this.shadowRoot ?? undefined,
         });
         this._hasMounted = true;
+        // CodeMirror builds its DOM after the render that made room for it, so
+        // anything that points at .cm-content ran too early. Ask for one more
+        // update now that it is there, or the description and aria-invalid land
+        // nowhere and stay there.
+        this.requestUpdate();
     }
     /**
      * Per-mount setup hook, called right after the view is created — on the

package/dist/utilities/codemirror/codemirror-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"codemirror-element.js","sourceRoot":"","sources":["../../../src/utilities/codemirror/codemirror-element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"codemirror-element.js","sourceRoot":"","sources":["../../../src/utilities/codemirror/codemirror-element.ts"],"names":[],"mappings":"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"}

package/dist/utilities/described-by-mixin.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = abstract new (...args: any[]) => T;
+/** An element that accepts references to the elements describing it. */
+export interface DescribedElement {
+    describedByElements: readonly Element[];
+    /** The element the description belongs to. Override where it differs. */
+    describedTarget(): Element | null;
+}
+/**
+ * Points an element at the elements that describe it.
+ *
+ * Element references and not ids, because an id only resolves inside the tree
+ * of the element that carries it. An `aria-describedby="err"` on an input in a
+ * shadow root cannot find an error text in the light DOM: the attribute is
+ * written, the id is right, and the description comes out empty.
+ * `ariaDescribedByElements` takes the elements themselves and crosses the
+ * boundary.
+ */
+export declare function applyDescribedBy(target: Element | null | undefined, elements: readonly Element[]): void;
+/**
+ * Announces that a control is invalid, on the element assistive software meets.
+ *
+ * Nothing is drawn for it, and that is a decision rather than an omission: what
+ * is wrong belongs in an nldd-validation-list, in words. A red ring
+ * around a single checkbox would say the option is wrong, while it is the
+ * question that is unanswered. Choosing not to show it is no reason to keep
+ * quiet about it, so `aria-invalid` goes on regardless.
+ *
+ * A component that wraps another one hands the state on, the same way it hands
+ * on the description.
+ */
+export declare function applyInvalid(target: Element | null | undefined, invalid: boolean): void;
+/**
+ * Lets nldd-form-field hand a control the help and error texts that describe
+ * it, wherever that control renders them.
+ *
+ * The component answers where, because only it knows: a text field describes
+ * its inner input, a radio group describes itself because it carries the role,
+ * and an editor describes the contenteditable it builds. Override
+ * `describedTarget()` when the default of "the first native control in my
+ * shadow root" is not it.
+ *
+ * A controller, not an `updated()` override: a component that defines its own
+ * `updated()` would have to remember to call super, and forgetting that fails
+ * silently in exactly the way this mixin exists to prevent.
+ */
+export declare function DescribedBy<T extends Constructor<LitElement>>(Base: T): T & Constructor<DescribedElement>;
+export {};
+//# sourceMappingURL=described-by-mixin.d.ts.map

package/dist/utilities/described-by-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"described-by-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/described-by-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,wEAAwE;AACxE,MAAM,WAAW,gBAAgB;IAChC,mBAAmB,EAAE,SAAS,OAAO,EAAE,CAAC;IACxC,yEAAyE;IACzE,eAAe,IAAI,OAAO,GAAG,IAAI,CAAC;CAClC;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAavG;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAQvF;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC5D,IAAI,EAAE,CAAC,GACL,CAAC,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAsCnC"}

package/dist/utilities/described-by-mixin.js

@@ -0,0 +1,109 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+/**
+ * Points an element at the elements that describe it.
+ *
+ * Element references and not ids, because an id only resolves inside the tree
+ * of the element that carries it. An `aria-describedby="err"` on an input in a
+ * shadow root cannot find an error text in the light DOM: the attribute is
+ * written, the id is right, and the description comes out empty.
+ * `ariaDescribedByElements` takes the elements themselves and crosses the
+ * boundary.
+ */
+export function applyDescribedBy(target, elements) {
+    if (!target)
+        return;
+    // A component that wraps another one hands the question on rather than
+    // answering it. nldd-checkbox-field renders an nldd-checkbox, and only that
+    // one knows which element inside itself is the control.
+    if ('describedByElements' in target) {
+        target.describedByElements = [...elements];
+        return;
+    }
+    const el = target;
+    el.ariaDescribedByElements = elements.length ? [...elements] : null;
+}
+/**
+ * Announces that a control is invalid, on the element assistive software meets.
+ *
+ * Nothing is drawn for it, and that is a decision rather than an omission: what
+ * is wrong belongs in an nldd-validation-list, in words. A red ring
+ * around a single checkbox would say the option is wrong, while it is the
+ * question that is unanswered. Choosing not to show it is no reason to keep
+ * quiet about it, so `aria-invalid` goes on regardless.
+ *
+ * A component that wraps another one hands the state on, the same way it hands
+ * on the description.
+ */
+export function applyInvalid(target, invalid) {
+    if (!target)
+        return;
+    if ('invalid' in target) {
+        target.invalid = invalid;
+        return;
+    }
+    if (invalid)
+        target.setAttribute('aria-invalid', 'true');
+    else
+        target.removeAttribute('aria-invalid');
+}
+/**
+ * Lets nldd-form-field hand a control the help and error texts that describe
+ * it, wherever that control renders them.
+ *
+ * The component answers where, because only it knows: a text field describes
+ * its inner input, a radio group describes itself because it carries the role,
+ * and an editor describes the contenteditable it builds. Override
+ * `describedTarget()` when the default of "the first native control in my
+ * shadow root" is not it.
+ *
+ * A controller, not an `updated()` override: a component that defines its own
+ * `updated()` would have to remember to call super, and forgetting that fails
+ * silently in exactly the way this mixin exists to prevent.
+ */
+export function DescribedBy(Base) {
+    class DescribedByMixin extends Base {
+        constructor(...args) {
+            super(...args);
+            /** Set by nldd-form-field. A consumer never writes this. */
+            this.describedByElements = [];
+            const apply = {
+                hostUpdated: () => {
+                    const target = this.describedTarget();
+                    applyDescribedBy(target, this.describedByElements);
+                    // Optional: nldd-button carries this mixin for its description and
+                    // has no validity of its own.
+                    const invalid = this.invalid;
+                    if (invalid !== undefined)
+                        applyInvalid(target, invalid);
+                },
+            };
+            this.addController(apply);
+        }
+        /**
+         * The element the description belongs to. Override where it differs.
+         *
+         * Public rather than protected because TypeScript refuses to emit a
+         * declaration for an anonymous class with protected members, and a mixin
+         * returns exactly that. Same reason `formValue()` is public in
+         * FormAssociated.
+         */
+        describedTarget() {
+            return this.shadowRoot?.querySelector('input, textarea, select') ?? null;
+        }
+    }
+    __decorate([
+        property({ attribute: false })
+    ], DescribedByMixin.prototype, "describedByElements", void 0);
+    // Annotated rather than inferred: an inferred mixin return type writes the
+    // whole anonymous class into the .d.ts, privates of the base included, and
+    // TypeScript refuses to emit that (TS4094). Nesting two mixins makes it
+    // certain.
+    return DescribedByMixin;
+}
+//# sourceMappingURL=described-by-mixin.js.map

package/dist/utilities/described-by-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"described-by-mixin.js","sourceRoot":"","sources":["../../src/utilities/described-by-mixin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAc7C;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAAkC,EAAE,QAA4B;IAChG,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,uEAAuE;IACvE,4EAA4E;IAC5E,wDAAwD;IACxD,IAAI,qBAAqB,IAAI,MAAM,EAAE,CAAC;QACpC,MAAsC,CAAC,mBAAmB,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC5E,OAAO;IACR,CAAC;IAED,MAAM,EAAE,GAAG,MAA0E,CAAC;IACtF,EAAE,CAAC,uBAAuB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACrE,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY,CAAC,MAAkC,EAAE,OAAgB;IAChF,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,MAAyC,CAAC,OAAO,GAAG,OAAO,CAAC;QAC7D,OAAO;IACR,CAAC;IACD,IAAI,OAAO;QAAE,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;;QACpD,MAAM,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAC1B,IAAO;IAEP,MAAe,gBAAiB,SAAQ,IAAI;QAK3C,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YALhB,4DAA4D;YAE5D,wBAAmB,GAAuB,EAAE,CAAC;YAI5C,MAAM,KAAK,GAAuB;gBACjC,WAAW,EAAE,GAAG,EAAE;oBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;oBACtC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;oBACnD,mEAAmE;oBACnE,8BAA8B;oBAC9B,MAAM,OAAO,GAAI,IAA8B,CAAC,OAAO,CAAC;oBACxD,IAAI,OAAO,KAAK,SAAS;wBAAE,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAC1D,CAAC;aACD,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QAED;;;;;;;WAOG;QACH,eAAe;YACd,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,IAAI,CAAC;QAC1E,CAAC;KACD;IA5BA;QADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iEACc;IA6B9C,2EAA2E;IAC3E,2EAA2E;IAC3E,wEAAwE;IACxE,WAAW;IACX,OAAO,gBAAgE,CAAC;AACzE,CAAC"}

package/dist/utilities/form-associated-mixin.d.ts

@@ -9,6 +9,11 @@ export interface FormAssociatedElement {
     /** Extra state for bfcache and state restore, when the value alone is not enough. */
     formState(): FormValue | undefined;
     commitFormValue(): void;
+    /** The native control whose constraints the host reports as its own. */
+    validationTarget(): HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+    /** A reason of your own, on top of the native ones. Empty clears it. */
+    setCustomValidity(message: string): void;
+    commitValidity(): void;
 }
 /**
  * Turns a Lit element into a form-associated custom element: it submits under

package/dist/utilities/form-associated-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAE1D,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AAIxD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IACrC,+EAA+E;IAC/E,SAAS,IAAI,SAAS,CAAC;IACvB,qFAAqF;IACrF,SAAS,IAAI,SAAS,GAAG,SAAS,CAAC;IACnC,eAAe,IAAI,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAsC/B,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CACjG"}
+{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAW1D,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AAIxD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IACrC,+EAA+E;IAC/E,SAAS,IAAI,SAAS,CAAC;IACvB,qFAAqF;IACrF,SAAS,IAAI,SAAS,GAAG,SAAS,CAAC;IACnC,eAAe,IAAI,IAAI,CAAC;IACxB,wEAAwE;IACxE,gBAAgB,IAAI,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,IAAI,CAAC;IACtF,wEAAwE;IACxE,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,cAAc,IAAI,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAwG/B,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CACjG"}

package/dist/utilities/form-associated-mixin.js

@@ -1,3 +1,11 @@
+/**
+ * The flags a native control can raise, in the order the platform lists them.
+ * `valid` is not one of them: it is the answer, not a reason.
+ */
+const VALIDITY_FLAGS = [
+    'badInput', 'customError', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow',
+    'stepMismatch', 'tooLong', 'tooShort', 'typeMismatch', 'valueMissing',
+];
 /**
  * Turns a Lit element into a form-associated custom element: it submits under
  * `name`, follows a disabled fieldset, and can be read back with `FormData`.
@@ -21,6 +29,7 @@ export function FormAssociated(Base) {
         constructor(...args) {
             super(...args);
             this.internals = this.attachInternals();
+            this._customValidity = '';
             // A controller, not an updated() override: a component that defines
             // its own updated() would have to remember to call super.
             const commit = { hostUpdated: () => this.commitFormValue() };
@@ -39,6 +48,66 @@ export function FormAssociated(Base) {
         /** Commit the value now, from the handler that changed it. */
         commitFormValue() {
             this.internals.setFormValue(this.formValue(), this.formState());
+            this.commitValidity();
+        }
+        /**
+         * The native control this host speaks for.
+         *
+         * The constraint attributes are handed to a control inside the shadow
+         * root, and that control is not a member of the form around the host: the
+         * form sees the host, the host sees the control, and without something
+         * joining them a `required` field submits empty. Override when the control
+         * is not the first one in the shadow root, or return null for a component
+         * that has no native control to speak for.
+         */
+        validationTarget() {
+            return this.shadowRoot?.querySelector('input, textarea, select') ?? null;
+        }
+        /**
+         * A reason the host is invalid that no attribute can express: a server that
+         * refused the value, or an nldd-validation-list whose rule it fails. Kept
+         * beside the native flags rather than replacing them, because
+         * `setValidity` writes the whole set at once and the two arrive from
+         * different places at different times.
+         */
+        setCustomValidity(message) {
+            this._customValidity = message;
+            this.commitValidity();
+        }
+        /**
+         * Hands the control's verdict to the form, as the host's own.
+         *
+         * Called on every render and from `commitFormValue`, so it follows the
+         * value for the same reason and with the same timing.
+         */
+        commitValidity() {
+            const target = this.validationTarget();
+            const custom = this._customValidity;
+            if (!target && !custom) {
+                this.internals.setValidity({});
+                return;
+            }
+            const flags = {};
+            let message = '';
+            if (target && !target.validity.valid) {
+                for (const sleutel of VALIDITY_FLAGS) {
+                    if (target.validity[sleutel])
+                        flags[sleutel] = true;
+                }
+                message = target.validationMessage;
+            }
+            if (custom) {
+                flags.customError = true;
+                // The custom reason first: it is the one this system wrote, and the
+                // native message is the browser's own wording for the same field.
+                message = custom;
+            }
+            const anchor = (target ?? this);
+            if (Object.keys(flags).length === 0) {
+                this.internals.setValidity({});
+                return;
+            }
+            this.internals.setValidity(flags, message, anchor);
         }
         formDisabledCallback(disabled) {
             // Every form-associated component declares its own `disabled` property

package/dist/utilities/form-associated-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.js","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAoC,IAAO;IACxE,MAAe,mBAAoB,SAAQ,IAAI;QAK9C,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAHP,cAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YAI3C,oEAAoE;YACpE,0DAA0D;YAC1D,MAAM,MAAM,GAAuB,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;YACjF,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;QAED,0EAA0E;QAC1E,SAAS;YACR,OAAO,IAAI,CAAC;QACb,CAAC;QAED;;gEAEwD;QACxD,SAAS;YACR,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,8DAA8D;QAC9D,eAAe;YACd,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACjE,CAAC;QAED,oBAAoB,CAAC,QAAiB;YACrC,uEAAuE;YACvE,6DAA6D;YAC5D,IAAyC,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAChE,CAAC;;IAjCM,kCAAc,GAAG,IAAI,AAAP,CAAQ;IAoC9B,OAAO,mBAA0F,CAAC;AACnG,CAAC"}
+{"version":3,"file":"form-associated-mixin.js","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.83",
+  "version": "0.8.84",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -106,6 +106,10 @@
       "types": "./dist/components/forms/form-field/form-field.d.ts",
       "default": "./dist/components/forms/form-field/form-field.js"
     },
+    "./validation-list": {
+      "types": "./dist/components/forms/validation-list/validation-list.d.ts",
+      "default": "./dist/components/forms/validation-list/validation-list.js"
+    },
     "./form-section": {
       "types": "./dist/components/forms/form-section/form-section.d.ts",
       "default": "./dist/components/forms/form-section/form-section.js"
@@ -531,9 +535,10 @@
     "@storybook/addon-themes": "^10.5.7",
     "@storybook/addon-vitest": "^10.5.7",
     "@storybook/web-components-vite": "^10.5.7",
-    "@vitest/browser-playwright": "4.1.10",
-    "@vitest/coverage-v8": "4.1.10",
+    "@vitest/browser-playwright": "4.1.11",
+    "@vitest/coverage-v8": "4.1.11",
     "conventional-changelog": "^8.1.0",
+    "conventional-changelog-conventionalcommits": "10.2.1",
     "eslint": "^10.8.0",
     "eslint-plugin-lit-a11y": "^5.1.1",
     "eslint-plugin-storybook": "^10.5.7",
@@ -543,8 +548,8 @@
     "storybook": "^10.5.7",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
-    "vite": "8.2.1",
-    "vitest": "4.1.10",
+    "vite": "8.2.2",
+    "vitest": "4.1.11",
     "vue": "^3.5.40",
     "vue-tsc": "^3.3.7"
   },
@@ -579,5 +584,8 @@
     "@lezer/highlight": "^1.2.3",
     "lit": "^3.3.1"
   },
-  "customElements": "custom-elements.json"
+  "customElements": "custom-elements.json",
+  "overrides": {
+    "conventional-changelog-conventionalcommits": "10.2.1"
+  }
 }