@nldd/design-system 0.8.82 → 0.8.84

package/dist/components/forms/form/form.js

@@ -1,19 +1,18 @@
 /**
  * Nederlandse Digitale Dienst Form Component
  *
- * Plain custom element (extends HTMLElement, no Lit) — required for light-DOM
+ * Plain custom element (extends HTMLElement, no Lit), required for light-DOM
  * autofill. Renders a real <form> element in the LIGHT DOM around its
  * children. Chrome's autofill engine looks for native <input> elements that
  * have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't
  * find them, so we keep this component shadow-less.
  *
  * **Differs from other nldd-* components:**
- * - Geen shadowRoot — alle children leven in light DOM (binnen het inner <form>)
- * - Geen Lit — pure HTMLElement met handmatige attribute-mirroring
- * - **Vereist global stylesheet import** — vertical rhythm en form-section
- *   divider-suppression regels staan in `dist/css/form.css` (of `global.css`),
- *   niet in een component-specifieke shadow stylesheet. Import deze als deel
- *   van je app's globale CSS bundle.
+ * - No shadowRoot: all children live in the light DOM (inside the inner <form>)
+ * - No Lit: a plain HTMLElement with manual attribute mirroring
+ * - **Requires a global stylesheet import**: the vertical rhythm rules live in
+ *   `dist/css/form.css` (or `global.css`), not in a component-specific shadow
+ *   stylesheet. Import it as part of your app's global CSS bundle.
  *
  * **Two usage modes:**
  *
@@ -22,25 +21,26 @@
  *    Simplest API.
  *
  * 2. **User-provided form** (framework-friendly): write your own `<form>`
- *    as direct child. Component detects it, takes over attribute-mirroring,
- *    en skipt de migration. Children blijven waar je framework ze plaatst —
- *    geen DOM-shuffling die met React/Vue/Angular reconciliation conflicteert.
+ *    as direct child. Component detects it, takes over attribute mirroring,
+ *    and skips the migration. Children stay where your framework puts them,
+ *    so there is no DOM shuffling to conflict with React/Vue/Angular
+ *    reconciliation.
  *
  * **Framework interop:**
  *
- * In auto-wrap mode wordt elke direct child verplaatst naar het inner form
- * via een MutationObserver. Voor de meeste React/Vue use cases werkt dit
- * prima omdat frameworks alleen DOM-mutaties doen wanneer hun virtual DOM
- * verandert. Voor edge cases (animatie-libs die DOM-positie tracken,
- * SSR-hydration mismatches, frameworks die actief sibling-positions
- * controleren) gebruik dan **user-provided form** mode.
+ * In auto-wrap mode every direct child is moved into the inner form through a
+ * MutationObserver. That works fine for most React/Vue use cases, because
+ * frameworks only mutate the DOM when their virtual DOM changes. For edge
+ * cases (animation libraries that track DOM position, SSR hydration
+ * mismatches, frameworks that actively check sibling positions) use
+ * **user-provided form** mode instead.
  *
- * Voor programmatische manipulatie: gebruik de `form` getter zodat je
- * direct met het inner `<form>` element werkt:
+ * For programmatic manipulation, use the `form` getter so you work with the
+ * inner `<form>` element directly:
  *
  *     const inner = document.querySelector('nldd-form').form;
  *     inner.checkValidity();
- *     inner.appendChild(myInput);  // skipt migration-overhead
+ *     inner.appendChild(myInput);  // skips the migration overhead
  *
  * @element nldd-form
  *
@@ -51,16 +51,16 @@
  * @attr {string} enctype - Encoding type for submission
  * @attr {string} target - Submit target ('_self' | '_blank' | ...)
  * @attr {string} autocomplete - 'on' | 'off' (form-level autofill toggle)
- * @attr {string} label-alignment - Default `label-alignment` voor descendant nldd-form-field en nldd-form-actions ('top' | 'right' | 'left'). Wordt naar descendants gepropageerd als `form-label-alignment`. Een eigen `label-alignment` op de descendant heeft voorrang via CSS-cascade.
+ * @attr {string} label-alignment - Default `label-alignment` for descendant nldd-form-field and nldd-form-actions ('top' | 'right' | 'left'). Propagated to descendants as `form-label-alignment`. A `label-alignment` of its own on the descendant takes precedence through the CSS cascade.
  *
- * @prop {HTMLFormElement | null} form - The inner <form> element (read-only). Use voor `form.checkValidity()`, directe DOM-manipulatie, of als doel voor framework-managed children.
+ * @prop {HTMLFormElement | null} form - The inner <form> element (read-only). Use it for `form.checkValidity()`, direct DOM manipulation, or as the target for framework-managed children.
  *
  * Events bubble naturally from the inner <form>:
  * @fires submit
  * @fires reset
  *
  * @example
- * Globale stylesheet import (eenmalig in je app entry):
+ * Global stylesheet import (once, in your app entry):
  * ```js
  * import '@nldd/design-system/styles';
  * ```
@@ -98,6 +98,105 @@ export class NLDDForm extends HTMLElement {
         super(...arguments);
         this._form = null;
         this._observer = null;
+        /**
+         * Marks a control as invalid at the moment the platform says so, and
+         * unmarks it as soon as it is fixed.
+         *
+         * `setValidity` and the `invalid` attribute answer different questions.
+         * The first is whether the value is acceptable, which decides whether the
+         * form goes; the second is whether to show that, which is a design
+         * decision about timing. Without something joining them, a control whose
+         * validation list refuses a value blocks the submit while the screen says
+         * nothing.
+         *
+         * The browser already picks the moment: it fires `invalid` on every failing
+         * control when the form is submitted. That event does not bubble, so this
+         * listens in the capture phase. Setting the attribute earlier stays the
+         * consumer's call.
+         *
+         * Cancelling that event takes the native validation bubble away, and that is
+         * the point. This system writes its own messages, under the field, in its
+         * own type: a second one from the browser says the same thing again, in
+         * browser chrome, above the field, and disappears on its own while ours
+         * stays. A field that then has nothing to say is a field that needs an
+         * nldd-validation-list, not a bubble.
+         */
+        this._handleInvalid = (e) => {
+            e.preventDefault();
+            const control = e.target;
+            if (!control)
+                return;
+            // Every control, not just this one. The browser judged the whole form,
+            // and a field that happened to pass has been asked the same question as
+            // the one that failed. Marking only the failures would leave two fields
+            // in one form behaving differently: break the one that passed and it
+            // stays quiet, while its neighbour speaks up as you type.
+            for (const el of this._form?.elements ?? [])
+                this._judged.add(el);
+            this._judged.add(control);
+            control.toggleAttribute('invalid', true);
+            // The browser fires invalid on every failing control in tree order, so
+            // the first event of a round is the field to land on. Cancelling that
+            // event above takes away the native bubble and, with it, the browser's
+            // own move to the first failing field. Without this a submit that fails
+            // leaves focus where it was, which for anyone not looking at the screen
+            // means nothing happened at all: no bubble, no focus, and no live region
+            // anywhere in a form. Deferred, so the whole round has been fired and
+            // the submit algorithm is done before focus moves.
+            if (this._focusTarget)
+                return;
+            this._focusTarget = control;
+            queueMicrotask(() => {
+                this._focusTarget?.focus?.();
+                this._focusTarget = null;
+            });
+        };
+        /** The first control to fail this round, focused once the round is over. */
+        this._focusTarget = null;
+        /**
+         * A reset takes the marks off with the values.
+         *
+         * A reset fires no `input`, so nothing above hears it and a field that was
+         * refused keeps its mark over a value the user just cleared. `judging` goes
+         * with it: the question has been withdrawn, so the hints come back and the
+         * field is what it was before anyone submitted.
+         *
+         * Deferred because the event comes first and the values go back after it,
+         * so anything read here would still be the old one.
+         */
+        this._handleReset = () => {
+            queueMicrotask(() => {
+                this._judged = new WeakSet();
+                for (const el of this._form?.elements ?? [])
+                    el.removeAttribute('invalid');
+                for (const list of this.querySelectorAll('nldd-validation-list')) {
+                    list.removeAttribute('judging');
+                }
+            });
+        };
+        /**
+         * From the first verdict onward, the mark follows the value.
+         *
+         * The platform has no "valid" event, so without this a control that is put
+         * right keeps its mark until the next submit: you fixed it and the field
+         * still says you did not. And it has to work the other way too. Undo the
+         * fix and the value is refused again, so a form that stays quiet leaves you
+         * with a submit that does nothing and nothing on screen saying why.
+         *
+         * Only after that first verdict, which is what `_judged` remembers. Before
+         * it, a field would turn red on the first character typed into it, about a
+         * value nobody has asked for yet.
+         */
+        this._handleInput = (e) => {
+            const control = e.target;
+            if (!control || !this._judged.has(control))
+                return;
+            const validity = control.internals?.validity ?? control.validity;
+            if (validity)
+                control.toggleAttribute('invalid', !validity.valid);
+        };
+        /** Controls the platform has judged at least once. */
+        this._judged = new WeakSet();
         /** When true, user provided their own <form> child — skip migration. */
         this._userProvidedForm = false;
     }
@@ -169,12 +268,18 @@ export class NLDDForm extends HTMLElement {
             // nested form-section are pulled in by the propagation as well.
             this._observer.observe(this, { childList: true, subtree: true });
         }
+        this.addEventListener('invalid', this._handleInvalid, true);
+        this.addEventListener('input', this._handleInput);
+        this.addEventListener('reset', this._handleReset);
         // Propagate label-alignment to current children (initial + after reconnect)
         this._propagateLabelAlignment(this.getAttribute('label-alignment'));
     }
     disconnectedCallback() {
         this._observer?.disconnect();
         this._observer = null;
+        this.removeEventListener('invalid', this._handleInvalid, true);
+        this.removeEventListener('input', this._handleInput);
+        this.removeEventListener('reset', this._handleReset);
     }
     attributeChangedCallback(name, _oldVal, newVal) {
         if (name === 'label-alignment') {

package/dist/components/forms/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/forms/form/form.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/forms/form/form.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AAEH,MAAM,oBAAoB,GAAG;IAC5B,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,cAAc;CACL,CAAC;AAEX,MAAM,mBAAmB,GAAG,oCAAoC,CAAC;AAEjE,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAKS,UAAK,GAA2B,IAAI,CAAC;QACrC,cAAS,GAA4B,IAAI,CAAC;QAElD;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACK,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,OAAO,GAAG,CAAC,CAAC,MAAwB,CAAC;YAC3C,IAAI,CAAC,OAAO;gBAAE,OAAO;YAErB,uEAAuE;YACvE,wEAAwE;YACxE,wEAAwE;YACxE,qEAAqE;YACrE,0DAA0D;YAC1D,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,IAAI,EAAE;gBAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAClE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAE1B,OAAO,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;YAEzC,uEAAuE;YACvE,sEAAsE;YACtE,uEAAuE;YACvE,wEAAwE;YACxE,wEAAwE;YACxE,yEAAyE;YACzE,sEAAsE;YACtE,mDAAmD;YACnD,IAAI,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAsB,CAAC;YAC3C,cAAc,CAAC,GAAG,EAAE;gBACnB,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAC1B,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,4EAA4E;QACpE,iBAAY,GAAuB,IAAI,CAAC;QAEhD;;;;;;;;;;WAUG;QACK,iBAAY,GAAG,GAAG,EAAE;YAC3B,cAAc,CAAC,GAAG,EAAE;gBACnB,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,EAAW,CAAC;gBACtC,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,IAAI,EAAE;oBAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3E,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,EAAE,CAAC;oBAClE,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF;;;;;;;;;;;;WAYG;QACK,iBAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;YACnC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAuF,CAAC;YAC1G,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;gBAAE,OAAO;YACnD,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;YACjE,IAAI,QAAQ;gBAAE,OAAO,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC,CAAC;QAEF,sDAAsD;QAC9C,YAAO,GAAG,IAAI,OAAO,EAAW,CAAC;QACzC,wEAAwE;QAChE,sBAAiB,GAAG,KAAK,CAAC;IAgInC,CAAC;IA5OA,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,GAAG,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;IACrD,CAAC;IA4GD,iBAAiB;QAChB,uEAAuE;QACvE,oEAAoE;QACpE,gCAAgC;QAChC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,8DAA8D;YAC9D,iEAAiE;YACjE,qEAAqE;YACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACrD,IAAI,QAAQ,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,GAAG,QAA2B,CAAC;gBACzC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACP,oEAAoE;gBACpE,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAEzB,kDAAkD;gBAClD,iEAAiE;gBACjE,gEAAgE;gBAChE,6DAA6D;gBAC7D,gEAAgE;gBAChE,+DAA+D;gBAC/D,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACpD,KAAK,MAAM,IAAI,IAAI,eAAe,EAAE,CAAC;oBACpC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC;gBACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACF,CAAC;QAED,wEAAwE;QACxE,oEAAoE;QACpE,sEAAsE;QACtE,uBAAuB;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;gBACjD,KAAK,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC;oBAC3B,wDAAwD;oBACxD,yDAAyD;oBACzD,wDAAwD;oBACxD,yCAAyC;oBACzC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI;wBAAE,SAAS;oBAChC,qDAAqD;oBACrD,sDAAsD;oBACtD,IAAI,YAAY;wBAAE,SAAS;oBAC3B,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;wBAC3B,IAAI,IAAI,KAAK,IAAI;4BAAE,OAAO;wBAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBACxB,CAAC,CAAC,CAAC;gBACJ,CAAC;gBACD,sDAAsD;gBACtD,8DAA8D;gBAC9D,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC;YACrE,CAAC,CAAC,CAAC;YACH,yDAAyD;YACzD,gEAAgE;YAChE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAElD,4EAA4E;QAC5E,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,OAAsB,EAAE,MAAqB;QACnF,IAAI,IAAI,KAAK,iBAAiB,EAAE,CAAC;YAChC,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;YACtC,OAAO;QACR,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,MAAM,KAAK,IAAI;YAAE,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;;YACjD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACK,wBAAwB,CAAC,KAAoB;QACpD,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAc,mBAAmB,CAAC,CAAC;QACvE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,sBAAsB,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC;IAC7E,CAAC;IAEO,iBAAiB;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,KAAK,MAAM,IAAI,IAAI,oBAAoB,EAAE,CAAC;YACzC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACpC,IAAI,GAAG,KAAK,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QACtD,CAAC;IACF,CAAC;IAED,uEAAuE;IACvE,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,KAAK,CAAC;IACnB,CAAC;CACD;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACtC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC9C,CAAC"}

package/dist/components/forms/form-actions/form-actions.d.ts

@@ -1,19 +1,18 @@
 /**
  * Nederlandse Digitale Dienst Form Actions Component (Lit + TypeScript)
  *
- * Een layout-wrapper voor de actie-knoppen onderaan een formulier (typisch
- * een submit-button of button-group). Volgt dezelfde responsive layout als
- * `nldd-form-field`: met `label-alignment="right"` of `"left"` krijgt de
- * inhoud dezelfde insprong als de invoervelden boven, dankzij een
- * `::before`-pseudo-element dat fungeert als spacer-kolom waar de label
- * zou staan.
+ * A layout wrapper for the action buttons at the bottom of a form (typically a
+ * submit button or a button group). Follows the same responsive layout as
+ * `nldd-form-field`: with `label-alignment="right"` or `"left"` the content
+ * gets the same indent as the fields above it, thanks to a `::before`
+ * pseudo-element that acts as the spacer column where the label would sit.
  *
- * Erft `label-alignment` automatisch over van een wrappende `<nldd-form>`:
- * de form propageert z'n eigen `label-alignment` als `form-label-alignment`
- * naar descendant `nldd-form-actions` (en `nldd-form-field`) via een
- * MutationObserver. Een expliciete eigen `label-alignment` op de form-actions
- * wint via CSS-cascade — de form-code raakt het `label-alignment` attribuut
- * van de descendant nooit aan.
+ * Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the
+ * form propagates its own `label-alignment` as `form-label-alignment` to
+ * descendant `nldd-form-actions` (and `nldd-form-field`) through a
+ * MutationObserver. An explicit `label-alignment` on the form-actions itself
+ * wins through the CSS cascade, and the form code never touches the
+ * `label-alignment` attribute of the descendant.
  *
  *     <nldd-form label-alignment="right">
  *         <nldd-form-field>...</nldd-form-field>
@@ -26,10 +25,10 @@
  *
  * @element nldd-form-actions
  *
- * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment.
- * @attr {string} form-label-alignment - Door wrappende nldd-form gezet als fallback. Niet zelf zetten in consumer-code.
+ * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment.
+ * @attr {string} form-label-alignment - Set by a wrapping nldd-form as a fallback. Do not set it yourself in consumer code.
  *
- * @slot - Actie-elementen (button, button-group, etc.)
+ * @slot - Action elements (button, button-group, and so on)
  */
 import { LitElement } from 'lit';
 export type LabelAlignment = 'top' | 'left' | 'right';

package/dist/components/forms/form-actions/form-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAE3C;;;;;OAKG;IAEH,cAAc,EAAE,cAAc,GAAG,SAAS,CAAa;IAE9C,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"form-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAE3C;;;;;OAKG;IAEH,cAAc,EAAE,cAAc,GAAG,SAAS,CAAa;IAE9C,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/forms/form-actions/form-actions.js

@@ -1,19 +1,18 @@
 /**
  * Nederlandse Digitale Dienst Form Actions Component (Lit + TypeScript)
  *
- * Een layout-wrapper voor de actie-knoppen onderaan een formulier (typisch
- * een submit-button of button-group). Volgt dezelfde responsive layout als
- * `nldd-form-field`: met `label-alignment="right"` of `"left"` krijgt de
- * inhoud dezelfde insprong als de invoervelden boven, dankzij een
- * `::before`-pseudo-element dat fungeert als spacer-kolom waar de label
- * zou staan.
+ * A layout wrapper for the action buttons at the bottom of a form (typically a
+ * submit button or a button group). Follows the same responsive layout as
+ * `nldd-form-field`: with `label-alignment="right"` or `"left"` the content
+ * gets the same indent as the fields above it, thanks to a `::before`
+ * pseudo-element that acts as the spacer column where the label would sit.
  *
- * Erft `label-alignment` automatisch over van een wrappende `<nldd-form>`:
- * de form propageert z'n eigen `label-alignment` als `form-label-alignment`
- * naar descendant `nldd-form-actions` (en `nldd-form-field`) via een
- * MutationObserver. Een expliciete eigen `label-alignment` op de form-actions
- * wint via CSS-cascade — de form-code raakt het `label-alignment` attribuut
- * van de descendant nooit aan.
+ * Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the
+ * form propagates its own `label-alignment` as `form-label-alignment` to
+ * descendant `nldd-form-actions` (and `nldd-form-field`) through a
+ * MutationObserver. An explicit `label-alignment` on the form-actions itself
+ * wins through the CSS cascade, and the form code never touches the
+ * `label-alignment` attribute of the descendant.
  *
  *     <nldd-form label-alignment="right">
  *         <nldd-form-field>...</nldd-form-field>
@@ -26,10 +25,10 @@
  *
  * @element nldd-form-actions
  *
- * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment.
- * @attr {string} form-label-alignment - Door wrappende nldd-form gezet als fallback. Niet zelf zetten in consumer-code.
+ * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment.
+ * @attr {string} form-label-alignment - Set by a wrapping nldd-form as a fallback. Do not set it yourself in consumer code.
  *
- * @slot - Actie-elementen (button, button-group, etc.)
+ * @slot - Action elements (button, button-group, and so on)
  */
 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;

package/dist/components/forms/form-actions/form-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-actions.js","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAK1D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGN;;;;;WAKG;QAEH,mBAAc,GAA+B,SAAS,CAAC;IAKxD,CAAC;IAHS,MAAM;QACd,OAAO,mBAAmB,EAAE,CAAC;IAC9B,CAAC;;AAbe,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAS3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;uDACjB;AAV3C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAe3B"}
+{"version":3,"file":"form-actions.js","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAK1D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGN;;;;;WAKG;QAEH,mBAAc,GAA+B,SAAS,CAAC;IAKxD,CAAC;IAHS,MAAM;QACd,OAAO,mBAAmB,EAAE,CAAC;IAC9B,CAAC;;AAbe,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAS3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;uDACjB;AAV3C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAe3B"}

package/dist/components/forms/form-field/form-field.d.ts

@@ -3,14 +3,14 @@
  *
  * @element nldd-form-field
  *
- * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment.
- * @attr {string} form-label-alignment - Door wrappende nldd-form gezet als fallback. Niet zelf zetten in consumer-code.
+ * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment.
+ * @attr {string} form-label-alignment - Set by a wrapping nldd-form as a fallback. Do not set it yourself in consumer code.
  * @attr {string} label - Field label text. Omit for no-label layout.
  * @attr {string} supporting-label - Short supporting text below the label. Same typography as optional badge.
  * @attr {boolean} optional - Shows an optional badge next to the label.
  * @attr {string} optional-label - Text for the optional badge. Defaults to 'Optioneel'.
  *
- * @slot - The slotted input (e.g. nldd-text-field). Set `invalid` and `error-message="id1 id2"` on the input to wire up error texts. nldd-form-field-error-text elements assign themselves to the errors slot automatically.
+ * @slot - The slotted input (e.g. nldd-text-field), its nldd-validation-list and its nldd-form-field-help-text.
  *
  * ─────────────────────────────────────────────────────────────────────────
  *
@@ -20,23 +20,16 @@
  *
  * ─────────────────────────────────────────────────────────────────────────
  *
- * @element nldd-form-field-error-text
- *
- * @attr {string} id - Referenced by the input's `error-message` attribute.
- * @attr {boolean} invalid - Visibility managed automatically by nldd-form-field.
- *
- * @slot - The error message text.
- *
- * ─────────────────────────────────────────────────────────────────────────
- *
  * @example
  * <nldd-form-field label="Password">
+ *   <nldd-password-field invalid></nldd-password-field>
+ *   <nldd-validation-list>
+ *     <nldd-validation-item id="password-required" required>This field is required.</nldd-validation-item>
+ *     <nldd-validation-item id="password-length" minlength="8">Must be at least 8 characters.</nldd-validation-item>
+ *   </nldd-validation-list>
  *   <nldd-form-field-help-text>
- *     At least 8 characters. <a href="/help">Learn more</a>.
+ *     We only use this to sign you in. <a href="/help">Learn more</a>.
  *   </nldd-form-field-help-text>
- *   <nldd-text-field invalid error-message="error-required error-length"></nldd-text-field>
- *   <nldd-form-field-error-text id="error-required">This field is required.</nldd-form-field-error-text>
- *   <nldd-form-field-error-text id="error-length">Must be at least 8 characters.</nldd-form-field-error-text>
  * </nldd-form-field>
  */
 import { LitElement } from 'lit';
@@ -78,12 +71,10 @@ export declare class NLDDFormField extends LitElement {
     /** Label text for the optional badge. Defaults to 'Optioneel'. Override for localisation. */
     optionalLabel: string;
     private _childObserver;
-    private _observer;
     /** The last label this field wrote onto the control, so it only takes back its own. */
     private _appliedLabel;
     /** Keeps the "no input found" warning to one per field rather than one per mutation. */
     private _warnedNoInput;
-    private _hasErrors;
     render(): import("lit-html").TemplateResult;
     updated(changed: Map<PropertyKey, unknown>): void;
     connectedCallback(): void;
@@ -128,6 +119,20 @@ export declare class NLDDFormField extends LitElement {
      * takes back what it did not write.
      */
     private _applyAccessibleLabel;
+    /**
+     * Hands every validation list in this field the control it is about, so it
+     * does not have to go looking for one.
+     *
+     * A list with a `for` of its own is left alone: that is how you say it is
+     * about a different control than the first.
+     *
+     * More than one control in a field is allowed and sometimes right, a radio
+     * group with an "Anders" text field beside it being the case this component
+     * is built for. But a list that reads a value would then quietly read the
+     * wrong one, and nothing on screen would show it: the rules simply never
+     * match. Say so once, where it can still be fixed.
+     */
+    private _adoptValidationLists;
     /**
      * The input this field is about: the first one in the light DOM, wrapped or
      * not.
@@ -148,38 +153,36 @@ export declare class NLDDFormField extends LitElement {
      */
     private _findInput;
     /**
-     * Reads `invalid` and `error-message` from the input and toggles
-     * the `invalid` attribute on the referenced nldd-form-field-error-text elements.
-     * Also sets `aria-describedby` on the input to reference visible error texts.
-     *
-     * Note: this mechanism relies on the slotted input reflecting an `invalid`
-     * attribute, which nldd-text-field and nldd-password-field do. Plain native
-     * `<input>` elements use constraint validation (validity.valid, the `invalid`
-     * event) instead — support for native inputs is a known limitation and
-     * tracked as a follow-up.
+     * Hands the control the elements that describe it.
+     *
+     * Elements and not ids. An IDREF resolves inside the tree of the element
+     * that carries it, so an id written here cannot be found from inside a
+     * component's shadow root: the attribute lands, the id is right, and the
+     * description comes out empty. A control that renders its own input takes
+     * `describedByElements` and puts the references where they belong; anything
+     * that is the control itself, a native input or a host with a role of its
+     * own, is pointed at directly.
+     *
+     * The list once, not each of its items. The items come and go while you
+     * type, and a description rewritten per keystroke is a lot of churn in
+     * something assistive software is reading. A hidden item counts for nothing
+     * in the description, so one reference gives exactly what is on screen, and
+     * this never has to run again when the value changes.
+     *
+     * The requirements before the plain help text: what is wrong is why you are
+     * here.
      */
-    private _syncErrorText;
+    private _syncDescription;
 }
 export declare class NLDDFormFieldHelpText extends LitElement {
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult;
 }
-export declare class NLDDFormFieldErrorText extends LitElement {
-    static styles: import("lit").CSSResult;
-    /**
-     * When present the error text is visible.
-     * Managed automatically by the parent nldd-form-field — do not set manually.
-     */
-    invalid: boolean;
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult;
-}
 declare global {
     interface HTMLElementTagNameMap {
         'nldd-form-field': NLDDFormField;
         'nldd-form-field-help-text': NLDDFormFieldHelpText;
-        'nldd-form-field-error-text': NLDDFormFieldErrorText;
     }
 }
 //# sourceMappingURL=form-field.d.ts.map

package/dist/components/forms/form-field/form-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAcjC,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAqCtD,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAEzC;;;;;;;;;;;;;;OAcG;IAEH,cAAc,EAAE,cAAc,GAAG,SAAS,CAAa;IAEvD,0FAA0F;IAE1F,KAAK,SAAM;IAEX;;;OAGG;IAEH,eAAe,SAAM;IAErB;;;;;;;OAOG;IAEH,QAAQ,UAAS;IAEjB,6FAA6F;IAE7F,aAAa,SAAe;IAE5B,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,SAAS,CAAiC;IAElD,uFAAuF;IACvF,OAAO,CAAC,aAAa,CAAuB;IAE5C,wFAAwF;IACxF,OAAO,CAAC,cAAc,CAAS;IAG/B,OAAO,CAAC,UAAU,CAAS;IAElB,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAO1C,iBAAiB;IAMjB,YAAY;IAIZ,oBAAoB;IAM7B;;;;;;;;;;;;;;OAcG;IACI,WAAW,CAAC,CAAC,EAAE,KAAK;IAQ3B,OAAO,CAAC,aAAa;IAiDrB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,UAAU;IAWlB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,cAAc;CA4CtB;AAOD,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAExC,iBAAiB;IAOjB,MAAM;CAGf;AAOD,qBACa,sBAAuB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAA4B;IAElD;;;OAGG;IAEH,OAAO,UAAS;IAEP,iBAAiB;IAOjB,MAAM;CAGf;AAGD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;QACjC,2BAA2B,EAAE,qBAAqB,CAAC;QACnD,4BAA4B,EAAE,sBAAsB,CAAC;KACrD;CACD"}
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAajC,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAqCtD,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAEzC;;;;;;;;;;;;;;OAcG;IAEH,cAAc,EAAE,cAAc,GAAG,SAAS,CAAa;IAEvD,0FAA0F;IAE1F,KAAK,SAAM;IAEX;;;OAGG;IAEH,eAAe,SAAM;IAErB;;;;;;;OAOG;IAEH,QAAQ,UAAS;IAEjB,6FAA6F;IAE7F,aAAa,SAAe;IAE5B,OAAO,CAAC,cAAc,CAAiC;IAEvD,uFAAuF;IACvF,OAAO,CAAC,aAAa,CAAuB;IAE5C,wFAAwF;IACxF,OAAO,CAAC,cAAc,CAAS;IAEtB,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAM1C,iBAAiB;IAMjB,YAAY;IAIZ,oBAAoB;IAK7B;;;;;;;;;;;;;;OAcG;IACI,WAAW,CAAC,CAAC,EAAE,KAAK;IAQ3B,OAAO,CAAC,aAAa;IAmCrB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,qBAAqB;IA0B7B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,UAAU;IAWlB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,gBAAgB;CAiBxB;AAOD,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAExC,iBAAiB;IAOjB,MAAM;CAGf;AAGD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;QACjC,2BAA2B,EAAE,qBAAqB,CAAC;KACnD;CACD"}