@nldd/design-system 0.8.83 → 0.8.84

package/dist/components/{dist-C0PiB1dr.js → dist-CjaG8dOI.js}

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, O as sublanguageProp, P as IterMode, R as NodeWeakMap, W as EditorView, _ as flatIndent, at as EditorSelection, g as delimitedIndent, h as defineLanguageFacet, i as LocalTokenGroup, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Ccw7ZfsU.js";
-import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-C400RcFU.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, O as sublanguageProp, P as IterMode, R as NodeWeakMap, W as EditorView, _ as flatIndent, at as EditorSelection, g as delimitedIndent, h as defineLanguageFacet, i as LocalTokenGroup, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-C6gnorjP.js";
+import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-B_3OW7pC.js";
 //#region node_modules/@lezer/javascript/dist/index.js
 var noSemi = 316;
 var noSemiType = 317;

package/dist/components/{dist-CCg5Mso_.js → dist-DZoFKUO-.js}

@@ -1,4 +1,4 @@
-import { C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Ccw7ZfsU.js";
+import { C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-C6gnorjP.js";
 //#region node_modules/@lezer/rust/dist/index.js
 var closureParamDelim = 1;
 var tpOpen = 2;

package/dist/components/{dist-Bq4xc7Bm.js → dist-DaavuU6W.js}

@@ -1,5 +1,5 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, y as foldNodeProp } from "./dist-Ccw7ZfsU.js";
-import { a as ifNotIn, r as completeFromList } from "./dist-C400RcFU.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, y as foldNodeProp } from "./dist-C6gnorjP.js";
+import { a as ifNotIn, r as completeFromList } from "./dist-B_3OW7pC.js";
 //#region node_modules/@codemirror/lang-sql/dist/index.js
 var whitespace = 36;
 var LineComment = 1;
@@ -121,6 +121,8 @@ function keywords(keywords, types, builtin) {
 	for (let kw of (builtin || "").split(" ")) if (kw) result[kw] = Builtin;
 	return result;
 }
+var SQLTypes = "array binary bit boolean char character clob date decimal double float int integer interval large national nchar nclob numeric object precision real smallint time timestamp varchar varying ";
+var SQLKeywords = "absolute action add after all allocate alter and any are as asc assertion at authorization before begin between both breadth by call cascade cascaded case cast catalog check close collate collation column commit condition connect connection constraint constraints constructor continue corresponding count create cross cube current current_date current_default_transform_group current_transform_group_for_type current_path current_role current_time current_timestamp current_user cursor cycle data day deallocate declare default deferrable deferred delete depth deref desc describe descriptor deterministic diagnostics disconnect distinct do domain drop dynamic each else elseif end end-exec equals escape except exception exec execute exists exit external fetch first for foreign found from free full function general get global go goto grant group grouping handle having hold hour identity if immediate in indicator initially inner inout input insert intersect into is isolation join key language last lateral leading leave left level like limit local localtime localtimestamp locator loop map match method minute modifies module month names natural nesting new next no none not of old on only open option or order ordinality out outer output overlaps pad parameter partial path prepare preserve primary prior privileges procedure public read reads recursive redo ref references referencing relative release repeat resignal restrict result return returns revoke right role rollback rollup routine row rows savepoint schema scroll search second section select session session_user set sets signal similar size some space specific specifictype sql sqlexception sqlstate sqlwarning start state static system_user table temporary then timezone_hour timezone_minute to trailing transaction translation treat trigger under undo union unique unnest until update usage user using value values view when whenever where while with without work write year zone ";
 var defaults = {
 	backslashEscapes: false,
 	hashComments: false,
@@ -136,7 +138,7 @@ var defaults = {
 	specialVar: "?",
 	identifierQuotes: "\"",
 	caseInsensitiveIdentifiers: false,
-	words: /*@__PURE__*/ keywords("absolute action add after all allocate alter and any are as asc assertion at authorization before begin between both breadth by call cascade cascaded case cast catalog check close collate collation column commit condition connect connection constraint constraints constructor continue corresponding count create cross cube current current_date current_default_transform_group current_transform_group_for_type current_path current_role current_time current_timestamp current_user cursor cycle data day deallocate declare default deferrable deferred delete depth deref desc describe descriptor deterministic diagnostics disconnect distinct do domain drop dynamic each else elseif end end-exec equals escape except exception exec execute exists exit external fetch first for foreign found from free full function general get global go goto grant group grouping handle having hold hour identity if immediate in indicator initially inner inout input insert intersect into is isolation join key language last lateral leading leave left level like limit local localtime localtimestamp locator loop map match method minute modifies module month names natural nesting new next no none not of old on only open option or order ordinality out outer output overlaps pad parameter partial path prepare preserve primary prior privileges procedure public read reads recursive redo ref references referencing relative release repeat resignal restrict result return returns revoke right role rollback rollup routine row rows savepoint schema scroll search second section select session session_user set sets signal similar size some space specific specifictype sql sqlexception sqlstate sqlwarning start state static system_user table temporary then timezone_hour timezone_minute to trailing transaction translation treat trigger under undo union unique unnest until update usage user using value values view when whenever where while with without work write year zone ", "array binary bit boolean char character clob date decimal double float int integer interval large national nchar nclob numeric object precision real smallint time timestamp varchar varying ")
+	words: /*@__PURE__*/ keywords(SQLKeywords, SQLTypes)
 };
 function dialect(spec, kws, types, builtin) {
 	let dialect = {};
@@ -620,5 +622,14 @@ function sql(config = {}) {
 The standard SQL dialect.
 */
 var StandardSQL = /*@__PURE__*/ SQLDialect.define({});
+SQLKeywords + "", SQLTypes + "";
+var MySQLKeywords = "accessible algorithm analyze asensitive authors auto_increment autocommit avg avg_row_length binlog btree cache catalog_name chain change changed checkpoint checksum class_origin client_statistics coalesce code collations columns comment committed completion concurrent consistent contains contributors convert database databases day_hour day_microsecond day_minute day_second delay_key_write delayed delimiter des_key_file dev_pop dev_samp deviance directory disable discard distinctrow div dual dumpfile enable enclosed ends engine engines enum errors escaped even event events every explain extended fast field fields flush force found_rows fulltext grants handler hash high_priority hosts hour_microsecond hour_minute hour_second ignore ignore_server_ids import index index_statistics infile innodb insensitive insert_method install invoker iterate keys kill linear lines list load lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modify mutex mysql_errno no_write_to_binlog offline offset one online optimize optionally outfile pack_keys parser partition partitions password phase plugin plugins prev processlist profile profiles purge query quick range read_write rebuild recover regexp relaylog remove rename reorganize repair repeatable replace require resume rlike row_format rtree schedule schema_name schemas second_microsecond security sensitive separator serializable server share show slave slow snapshot soname spatial sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result ssl starting starts std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace terminated triggers truncate uncommitted uninstall unlock upgrade use use_frm user_resources user_statistics utc_date utc_time utc_timestamp variables views warnings xa xor year_month zerofill";
+SQLTypes + "";
+SQLKeywords + "" + MySQLKeywords;
+SQLKeywords + "" + MySQLKeywords;
+SQLKeywords + "", SQLTypes + "";
+SQLKeywords + "", SQLTypes + "";
+SQLTypes + "";
+SQLKeywords + "", SQLTypes + "";
 //#endregion
 export { sql };

package/dist/components/{dist-BYVOPNHp.js → dist-la_b3ZSq.js}

@@ -1,4 +1,4 @@
-import { C as indentNodeProp, M as styleTags, N as tags, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Ccw7ZfsU.js";
+import { C as indentNodeProp, M as styleTags, N as tags, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-C6gnorjP.js";
 //#region node_modules/@lezer/yaml/dist/index.js
 var blockEnd = 63;
 var eof = 64;

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

@@ -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';
  * ```
@@ -87,6 +87,60 @@ export declare class NLDDForm extends HTMLElement {
     static get observedAttributes(): string[];
     private _form;
     private _observer;
+    /**
+     * 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.
+     */
+    private _handleInvalid;
+    /** The first control to fail this round, focused once the round is over. */
+    private _focusTarget;
+    /**
+     * 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.
+     */
+    private _handleReset;
+    /**
+     * 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.
+     */
+    private _handleInput;
+    /** Controls the platform has judged at least once. */
+    private _judged;
     /** When true, user provided their own <form> child — skip migration. */
     private _userProvidedForm;
     connectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/form.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AAcH,qBAAa,QAAS,SAAQ,WAAW;IACxC,MAAM,KAAK,kBAAkB,aAE5B;IAED,OAAO,CAAC,KAAK,CAAgC;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,wEAAwE;IACxE,OAAO,CAAC,iBAAiB,CAAS;IAElC,iBAAiB,IAAI,IAAI;IAoEzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAU3F;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,iBAAiB;IAQzB,uEAAuE;IACvE,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;CACD;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/form.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AAcH,qBAAa,QAAS,SAAQ,WAAW;IACxC,MAAM,KAAK,kBAAkB,aAE5B;IAED,OAAO,CAAC,KAAK,CAAgC;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAElD;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,cAAc,CA6BpB;IAEF,4EAA4E;IAC5E,OAAO,CAAC,YAAY,CAA4B;IAEhD;;;;;;;;;;OAUG;IACH,OAAO,CAAC,YAAY,CAQlB;IAEF;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,YAAY,CAKlB;IAEF,sDAAsD;IACtD,OAAO,CAAC,OAAO,CAA0B;IACzC,wEAAwE;IACxE,OAAO,CAAC,iBAAiB,CAAS;IAElC,iBAAiB,IAAI,IAAI;IAwEzB,oBAAoB,IAAI,IAAI;IAQ5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAU3F;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,iBAAiB;IAQzB,uEAAuE;IACvE,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;CACD;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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":"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"}

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"}