@nldd/design-system 0.8.82 → 0.8.84

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

@@ -9,14 +9,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * @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.
  *
  * ─────────────────────────────────────────────────────────────────────────
  *
@@ -26,32 +26,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * ─────────────────────────────────────────────────────────────────────────
  *
- * @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';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { setOwnedAttribute } from '../../../utilities/owned-attribute.js';
-import { formFieldStyles, formFieldHelpTextStyles, formFieldErrorTextStyles, } from './form-field.styles.js';
-import { formFieldTemplate, formFieldHelpTextTemplate, formFieldErrorTextTemplate, } from './form-field.template.js';
+import { applyDescribedBy } from '../../../utilities/described-by-mixin.js';
+import { formFieldStyles, formFieldHelpTextStyles, } from './form-field.styles.js';
+import { formFieldTemplate, formFieldHelpTextTemplate, } from './form-field.template.js';
 // Exclude helper elements so _findInput() never returns them instead of the actual input
-const HELPER_TAGS = ['nldd-form-field-help-text', 'nldd-form-field-error-text'];
+const HELPER_TAGS = ['nldd-form-field-help-text'];
 /**
  * Whether this element is the input a field is about.
  *
@@ -118,18 +112,15 @@ let NLDDFormField = class NLDDFormField extends LitElement {
         /** Label text for the optional badge. Defaults to 'Optioneel'. Override for localisation. */
         this.optionalLabel = 'Optioneel';
         this._childObserver = null;
-        this._observer = null;
         /** The last label this field wrote onto the control, so it only takes back its own. */
         this._appliedLabel = null;
         /** Keeps the "no input found" warning to one per field rather than one per mutation. */
         this._warnedNoInput = false;
-        this._hasErrors = false;
     }
     render() {
         return formFieldTemplate(this);
     }
     updated(changed) {
-        this.classList.toggle('has-errors', this._hasErrors);
         if (changed.has('label')) {
             this._onSlotChange();
         }
@@ -145,7 +136,6 @@ let NLDDFormField = class NLDDFormField extends LitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this._childObserver?.disconnect();
-        this._observer?.disconnect();
     }
     /**
      * Called when the label is clicked — focuses the slotted input.
@@ -170,8 +160,6 @@ let NLDDFormField = class NLDDFormField extends LitElement {
         input.focus();
     }
     _onSlotChange() {
-        // Disconnect the previous attribute observer before wiring up a new one.
-        this._observer?.disconnect();
         const input = this._findInput();
         if (!input) {
             // Only once there is something to look at. An empty field is usually one
@@ -202,17 +190,8 @@ let NLDDFormField = class NLDDFormField extends LitElement {
                 input.id = generateId();
         }
         this._applyAccessibleLabel(input);
-        // Ensure each help text element has an id so it can be referenced in aria-describedby
-        Array.from(this.children)
-            .filter(el => el.tagName.toLowerCase() === 'nldd-form-field-help-text')
-            .forEach(el => { if (!el.id)
-            el.id = generateId(); });
-        this._observer = new MutationObserver(() => this._syncErrorText());
-        this._observer.observe(input, {
-            attributes: true,
-            attributeFilter: ['invalid', 'error-message'],
-        });
-        this._syncErrorText();
+        this._adoptValidationLists(input);
+        this._syncDescription();
     }
     /**
      * Hands the label to the control as its accessible name, through whichever
@@ -247,6 +226,42 @@ let NLDDFormField = class NLDDFormField extends LitElement {
             return;
         this._appliedLabel = setOwnedAttribute(input, attribute, this.label, this._appliedLabel);
     }
+    /**
+     * 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.
+     */
+    _adoptValidationLists(input) {
+        const lists = Array.from(this.children)
+            .filter((el) => el.tagName.toLowerCase() === 'nldd-validation-list');
+        if (!lists.length)
+            return;
+        for (const list of lists) {
+            if (!list.getAttribute('for'))
+                list.control = input;
+        }
+        if (!import.meta.env?.DEV)
+            return;
+        const controls = Array.from(this.children)
+            .filter(el => !HELPER_TAGS.includes(el.tagName.toLowerCase()) && isFormInput(el));
+        if (controls.length < 2)
+            return;
+        const readsValue = lists.some(list => !list.getAttribute('for') && Array.from(list.children)
+            .some(item => item.hasAttribute('match') || item.hasAttribute('minlength') || item.hasAttribute('maxlength')));
+        if (!readsValue)
+            return;
+        const which = this.label ? ` (label="${this.label}")` : '';
+        console.warn(`<nldd-form-field>${which}: more than one control, and the validation list has rules that read a value. `
+            + `It is reading <${input.localName}>, the first one. Set \`for\` on the list if it should read another.`);
+    }
     /**
      * The input this field is about: the first one in the light DOM, wrapped or
      * not.
@@ -278,55 +293,41 @@ let NLDDFormField = class NLDDFormField extends LitElement {
         return undefined;
     }
     /**
-     * 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.
+     * 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.
      *
-     * 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.
+     * 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.
      */
-    _syncErrorText() {
+    _syncDescription() {
         const input = this._findInput();
         if (!input)
             return;
-        const isCustomInput = 'inputId' in input;
-        const isInvalid = input.hasAttribute('invalid');
-        const referencedIds = (input.getAttribute('error-message') ?? '')
-            .split(' ')
-            .filter(Boolean);
-        const allErrorTexts = Array.from(this.children)
-            .filter(el => el.tagName.toLowerCase() === 'nldd-form-field-error-text');
-        const helpIds = Array.from(this.children)
-            .filter(el => el.tagName.toLowerCase() === 'nldd-form-field-help-text' && el.id)
-            .map(el => el.id);
-        const visibleErrorIds = [];
-        for (const el of allErrorTexts) {
-            const shouldShow = isInvalid && referencedIds.includes(el.id);
-            el.toggleAttribute('invalid', shouldShow);
-            if (shouldShow && el.id)
-                visibleErrorIds.push(el.id);
-        }
-        // Prepend help text IDs so they are announced first, then error IDs.
-        const describedByIds = [...helpIds, ...visibleErrorIds];
-        const describedByValue = describedByIds.join(' ');
-        if (isCustomInput) {
-            // For custom elements (nldd-text-field, nldd-password-field), set error-message-ids
-            // so they can forward it to the inner <input aria-describedby>. IDs do not cross
-            // shadow DOM boundaries so setting aria-describedby on the host is not sufficient.
-            input.errorMessageIds = describedByValue;
+        const children = Array.from(this.children);
+        const tag = (el) => el.tagName.toLowerCase();
+        const describedBy = [
+            ...children.filter(el => tag(el) === 'nldd-validation-list'),
+            ...children.filter(el => tag(el) === 'nldd-form-field-help-text'),
+        ];
+        if ('describedByElements' in input) {
+            input.describedByElements = describedBy;
         }
         else {
-            if (describedByIds.length > 0) {
-                input.setAttribute('aria-describedby', describedByValue);
-            }
-            else {
-                input.removeAttribute('aria-describedby');
-            }
+            applyDescribedBy(input, describedBy);
         }
-        this._hasErrors = visibleErrorIds.length > 0;
     }
 };
 NLDDFormField.styles = formFieldStyles;
@@ -345,9 +346,6 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'optional-label' })
 ], NLDDFormField.prototype, "optionalLabel", void 0);
-__decorate([
-    state()
-], NLDDFormField.prototype, "_hasErrors", void 0);
 NLDDFormField = __decorate([
     customElement('nldd-form-field')
 ], NLDDFormField);
@@ -371,34 +369,4 @@ NLDDFormFieldHelpText = __decorate([
     customElement('nldd-form-field-help-text')
 ], NLDDFormFieldHelpText);
 export { NLDDFormFieldHelpText };
-/* ============================================================
-   nldd-form-field-error-text
-   ============================================================ */
-let NLDDFormFieldErrorText = class NLDDFormFieldErrorText extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * When present the error text is visible.
-         * Managed automatically by the parent nldd-form-field — do not set manually.
-         */
-        this.invalid = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Assign to the 'errors' slot automatically so consumers don't need to set slot="errors" manually.
-        // Note: this will overwrite any explicit slot attribute set by the consumer.
-        this.slot = 'errors';
-    }
-    render() {
-        return formFieldErrorTextTemplate(this);
-    }
-};
-NLDDFormFieldErrorText.styles = formFieldErrorTextStyles;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NLDDFormFieldErrorText.prototype, "invalid", void 0);
-NLDDFormFieldErrorText = __decorate([
-    customElement('nldd-form-field-error-text')
-], NLDDFormFieldErrorText);
-export { NLDDFormFieldErrorText };
 //# sourceMappingURL=form-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAyB,MAAM,0CAA0C,CAAC;AACnG,OAAO,EACN,eAAe,EACf,uBAAuB,GACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACN,iBAAiB,EACjB,yBAAyB,GACzB,MAAM,0BAA0B,CAAC;AAIlC,yFAAyF;AACzF,MAAM,WAAW,GAAG,CAAC,2BAA2B,CAAC,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,SAAS,WAAW,CAAC,EAAW;IAC/B,OAAO,EAAE,YAAY,gBAAgB;WACjC,EAAE,YAAY,iBAAiB;WAC/B,EAAE,YAAY,mBAAmB;WAChC,EAAE,CAAC,WAAyC,CAAC,WAAW,KAAK,IAAI,CAAC;AACxE,CAAC;AAED,sEAAsE;AACtE,0FAA0F;AAC1F,SAAS,UAAU;IAClB,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1E,OAAO,oBAAoB,IAAI,EAAE,CAAC;AACnC,CAAC;AAGD;;kEAEkE;AAG3D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAGN;;;;;;;;;;;;;;WAcG;QAEH,mBAAc,GAA+B,SAAS,CAAC;QAEvD,0FAA0F;QAE1F,UAAK,GAAG,EAAE,CAAC;QAEX;;;WAGG;QAEH,oBAAe,GAAG,EAAE,CAAC;QAErB;;;;;;;WAOG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB,6FAA6F;QAE7F,kBAAa,GAAG,WAAW,CAAC;QAEpB,mBAAc,GAA4B,IAAI,CAAC;QAEvD,uFAAuF;QAC/E,kBAAa,GAAkB,IAAI,CAAC;QAE5C,wFAAwF;QAChF,mBAAc,GAAG,KAAK,CAAC;IAgOhC,CAAC;IA9NS,MAAM;QACd,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEQ,OAAO,CAAC,OAAkC;QAClD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC;IACF,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,CAAC;IAEQ,YAAY;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;IACnC,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACI,WAAW,CAAC,CAAQ;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,CAAC,CAAC,cAAc,EAAE,CAAC;QAClB,KAAqB,CAAC,KAAK,EAAE,CAAC;IAChC,CAAC;IAEO,aAAa;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,yEAAyE;YACzE,uEAAuE;YACvE,qCAAqC;YACrC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAC1C,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;YAC9D,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBAChE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3D,OAAO,CAAC,IAAI,CAAC,oBAAoB,KAAK,6NAA6N,CAAC,CAAC;YACtQ,CAAC;YACD,OAAO;QACR,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAE5B,gFAAgF;QAChF,kFAAkF;QAClF,mFAAmF;QACnF,kFAAkF;QAClF,6DAA6D;QAC7D,IAAI,SAAS,IAAI,KAAK,EAAE,CAAC;YACxB,MAAM,UAAU,GAAI,KAA2C,CAAC,OAAO,CAAC;YACxE,MAAM,WAAW,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC;YAC9C,KAA2C,CAAC,OAAO,GAAG,WAAW,CAAC;QACpE,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,KAAK,CAAC,EAAE;gBAAE,KAAK,CAAC,EAAE,GAAG,UAAU,EAAE,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACK,qBAAqB,CAAC,KAAc;QAC3C,MAAM,SAAS,GAAG,iBAAiB,IAAI,KAAK;YAC3C,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,KAAK,YAAY,gBAAgB;mBAC/B,KAAK,YAAY,iBAAiB;mBAClC,KAAK,YAAY,mBAAmB;gBACvC,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,IAAI,CAAC;QACT,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1F,CAAC;IAED;;;;;;;;;;;;OAYG;IACK,qBAAqB,CAAC,KAAc;QAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aACrC,MAAM,CAAC,CAAC,EAAE,EAAmD,EAAE,CAC/D,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,sBAAsB,CAAC,CAAC;QACvD,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAE1B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBAAE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrD,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG;YAAE,OAAO;QAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aACxC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;QACnF,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAEhC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC1F,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAChH,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,OAAO,CAAC,IAAI,CACX,oBAAoB,KAAK,gFAAgF;cACvG,kBAAkB,KAAK,CAAC,SAAS,sEAAsE,CACzG,CAAC;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,UAAU;QACjB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aACxC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAChE,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC9B,IAAI,WAAW,CAAC,KAAK,CAAC;gBAAE,OAAO,KAAK,CAAC;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzE,IAAI,MAAM;gBAAE,OAAO,MAAM,CAAC;QAC3B,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACK,gBAAgB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,GAAG,GAAG,CAAC,EAAW,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QACtD,MAAM,WAAW,GAAG;YACnB,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,sBAAsB,CAAC;YAC5D,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,2BAA2B,CAAC;SACjE,CAAC;QAEF,IAAI,qBAAqB,IAAI,KAAK,EAAE,CAAC;YACnC,KAAqC,CAAC,mBAAmB,GAAG,WAAW,CAAC;QAC1E,CAAC;aAAM,CAAC;YACP,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QACtC,CAAC;IACF,CAAC;;AAnRe,oBAAM,GAAG,eAAe,AAAlB,CAAmB;AAkBzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACjB;AAIvD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAOX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sDACrC;AAWrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACX;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;oDAC5B;AA7ChB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqRzB;;AAGD;;kEAEkE;AAG3D,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAG3C,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,+FAA+F;QAC/F,6EAA6E;QAC7E,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;IACpB,CAAC;IAEQ,MAAM;QACd,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;;AAXe,4BAAM,GAAG,uBAAuB,AAA1B,CAA2B;AADrC,qBAAqB;IADjC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,qBAAqB,CAajC"}

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

@@ -1,4 +1,3 @@
 export declare const formFieldStyles: import("lit").CSSResult;
 export declare const formFieldHelpTextStyles: import("lit").CSSResult;
-export declare const formFieldErrorTextStyles: import("lit").CSSResult;
 //# sourceMappingURL=form-field.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,yBA+K3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAwDnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBA4DpC,CAAC"}
+{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,yBA0K3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAwDnC,CAAC"}

package/dist/components/forms/form-field/form-field.styles.js

@@ -11,7 +11,8 @@ export const formFieldStyles = css `
 	/* # Host */
 
 	:host {
-		--_gap: var(--primitives-space-3);
+		--_gap: var(--primitives-space-4);
+		--_description-gap: var(--primitives-space-4);
 
 		${inheritedTextReset}
 		display: block;
@@ -108,7 +109,7 @@ export const formFieldStyles = css `
 		gap: var(--primitives-space-4);
 		align-items: baseline;
 		color: var(--semantics-content-color);
-		font: var(--primitives-font-body-md-regular-tight);
+		font: var(--primitives-font-body-md-regular-flat);
 		text-wrap: pretty;
 	}
 
@@ -166,17 +167,11 @@ export const formFieldStyles = css `
 		flex-basis: 0;
 	}
 
-
-	/* # Errors */
-
-	.form-field__errors {
-		display: flex;
-		flex-direction: column;
+	::slotted(nldd-validation-list) {
+		margin-block-start: var(--_description-gap);
 	}
 
-	:host(.has-errors) .form-field__errors {
-		margin-top: var(--primitives-space-3);
-	}
+
 `;
 export const formFieldHelpTextStyles = css `
 
@@ -198,73 +193,12 @@ export const formFieldHelpTextStyles = css `
 	/* # Help text */
 
 	.form-field__help-text {
-		margin: var(--primitives-space-3) 0 0;
+		margin: var(--primitives-space-4) 0 0;
 		color: var(--semantics-content-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
 
 
-	/* # Links */
-
-	::slotted(a) {
-		${slottedReset}
-		${inheritedTextReset}
-		border-radius: var(--primitives-corner-radius-xxs) !important;
-		color: var(--semantics-links-color) !important;
-		text-decoration: underline !important;
-		text-underline-offset: var(--primitives-space-2) !important;
-	}
-
-	@media (hover: hover) {
-		::slotted(a:hover) {
-			color: var(--semantics-links-is-hovered-color) !important;
-		}
-	}
-
-	::slotted(a:active) {
-		color: var(--semantics-links-is-active-color) !important;
-	}
-
-	::slotted(a:focus-visible) {
-		outline: var(--semantics-focus-ring-outline) !important;
-		outline-offset: var(--semantics-focus-ring-outline-offset) !important;
-		box-shadow: var(--semantics-focus-ring-box-shadow) !important;
-	}
-
-	::slotted(a:focus:not(:focus-visible)) {
-		outline: none !important;
-	}
-`;
-export const formFieldErrorTextStyles = css `
-
-
-	/* # Host */
-
-	:host {
-		${inheritedTextReset}
-		display: none;
-	}
-
-	:host([invalid]) {
-		display: block;
-	}
-
-	/* After the invalid rule at equal specificity: hidden must also win on an
-	   error text that is currently shown. */
-	:host([hidden]) {
-		display: none;
-	}
-
-
-	/* # Error text */
-
-	.form-field__error-text {
-		margin: 0;
-		color: var(--semantics-content-critical-color);
-		font: var(--primitives-font-body-sm-regular-tight);
-	}
-
-
 	/* # Links */
 
 	::slotted(a) {

package/dist/components/forms/form-field/form-field.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;IAW9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;2BAwBK,KAAK;;;;;;;;;;;;;;;;;;;;;;;;2BAwBL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;2BAQL,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;;;;;;;;;;;;;;;;;;2BAqBL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;2BAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;IAMtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;IAuBlB,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;IAMvC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BlB,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC"}
+{"version":3,"file":"form-field.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;IAY9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;2BAwBK,KAAK;;;;;;;;;;;;;;;;;;;;;;;;2BAwBL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;2BAQL,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;;;;;;;;;;;;;;;;;;2BAqBL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;2BAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;IAMtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;IAuBlB,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC"}

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

@@ -1,8 +1,6 @@
 import { TemplateResult } from 'lit';
 import type { NLDDFormField } from './form-field.js';
 import type { NLDDFormFieldHelpText } from './form-field.js';
-import type { NLDDFormFieldErrorText } from './form-field.js';
 export declare function formFieldTemplate(component: NLDDFormField): TemplateResult;
 export declare function formFieldHelpTextTemplate(_component: NLDDFormFieldHelpText): TemplateResult;
-export declare function formFieldErrorTextTemplate(_component: NLDDFormFieldErrorText): TemplateResult;
 //# sourceMappingURL=form-field.template.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAU9D,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CAmC1E;AAMD,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,qBAAqB,GAAG,cAAc,CAM3F;AAMD,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,sBAAsB,GAAG,cAAc,CAM7F"}
+{"version":3,"file":"form-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAU7D,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CA8B1E;AAMD,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,qBAAqB,GAAG,cAAc,CAM3F"}

package/dist/components/forms/form-field/form-field.template.js

@@ -30,11 +30,6 @@ export function formFieldTemplate(component) {
 			${headerEl}
 			<div class="form-field__main">
 				<slot></slot>
-				<div class="form-field__errors"
-					aria-live="polite"
-				>
-					<slot name="errors"></slot>
-				</div>
 				<slot name="help"></slot>
 			</div>
 		</div>
@@ -50,14 +45,4 @@ export function formFieldHelpTextTemplate(_component) {
 		</p>
 	`;
 }
-/* ============================================================
-   nldd-form-field-error-text
-   ============================================================ */
-export function formFieldErrorTextTemplate(_component) {
-    return html `
-		<p class="form-field__error-text">
-			<slot></slot>
-		</p>
-	`;
-}
 //# sourceMappingURL=form-field.template.js.map

package/dist/components/forms/form-field/form-field.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.template.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.template.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAKpD;;kEAEkE;AAElE,SAAS,cAAc,CAAC,KAAa;IACpC,OAAO,IAAI,CAAA,sCAAsC,KAAK,SAAS,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,kBAAkB,GAAG,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,CAAC,kBAAkB,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAI,CAAA;mCACa,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC7D,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEN,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;;OAE7C,SAAS,CAAC,KAAK;OACf,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO;;IAEzE,CAAC,CAAC,CAAC,OAAO;KACT,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA;iDACmB,SAAS,CAAC,eAAe;IACtE,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;IAEF,OAAO,IAAI,CAAA;;KAEP,QAAQ;;;;;;;;;;;EAWX,CAAC;AACH,CAAC;AAED;;kEAEkE;AAElE,MAAM,UAAU,yBAAyB,CAAC,UAAiC;IAC1E,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC;AAED;;kEAEkE;AAElE,MAAM,UAAU,0BAA0B,CAAC,UAAkC;IAC5E,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC"}
+{"version":3,"file":"form-field.template.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.template.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAIpD;;kEAEkE;AAElE,SAAS,cAAc,CAAC,KAAa;IACpC,OAAO,IAAI,CAAA,sCAAsC,KAAK,SAAS,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,kBAAkB,GAAG,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,CAAC,kBAAkB,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAI,CAAA;mCACa,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC7D,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEN,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;;OAE7C,SAAS,CAAC,KAAK;OACf,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO;;IAEzE,CAAC,CAAC,CAAC,OAAO;KACT,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA;iDACmB,SAAS,CAAC,eAAe;IACtE,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;IAEF,OAAO,IAAI,CAAA;;KAEP,QAAQ;;;;;;EAMX,CAAC;AACH,CAAC;AAED;;kEAEkE;AAElE,MAAM,UAAU,yBAAyB,CAAC,UAAiC;IAC1E,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC"}

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

@@ -1,18 +1,18 @@
 /**
  * Nederlandse Digitale Dienst Form Section Component
  *
- * Plain custom element (extends HTMLElement, no Lit) — light-DOM render
- * lost een NVDA + Firefox a11y-bug op waar shadow-DOM <fieldset> + <legend>
- * niet betrouwbaar als group-label aangekondigd worden voor slotted
- * controls. Native fieldset/legend in light DOM werkt correct over alle
- * AT/browser-combinaties.
+ * Plain custom element (extends HTMLElement, no Lit). The light-DOM render
+ * works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> +
+ * <legend> is not reliably announced as the group label for slotted controls.
+ * A native fieldset/legend in the light DOM works correctly across all
+ * AT/browser combinations.
  *
  * **Differs from shadow components:**
- * - Geen shadowRoot — alle children leven in light DOM (binnen het
- *   gerenderde <fieldset>).
- * - Geen Lit — pure HTMLElement met handmatige DOM-mutation.
- * - **Vereist global stylesheet import** — `dist/css/form-section.css`
- *   (of `global.css`). Form-section heeft geen shadow stylesheet.
+ * - No shadowRoot: all children live in the light DOM (inside the rendered
+ *   <fieldset>).
+ * - No Lit: a plain HTMLElement with manual DOM mutation.
+ * - **Requires a global stylesheet import**: `dist/css/form-section.css` (or
+ *   `global.css`). Form-section has no shadow stylesheet.
  *
  * Renders to:
  *
@@ -28,22 +28,20 @@
  *         </fieldset>
  *     </nldd-form-section>
  *
- * **Accessibility note**: de title rendert als `<legend>`. Dat is
- * semantisch een **groep-label**, geen heading. Screenreaders
- * kondigen 't aan wanneer de gebruiker in de fieldset komt, maar
- * gebruikers die met de H-toets door headings springen slaan 'm
- * over. Visueel lijkt 't op een heading; gebruik dit component dus
- * voor *form-grouping*, niet als pagina-structuur. Voor echte
- * page-headings: gebruik een apart heading-element boven het form.
+ * **Accessibility note**: the title renders as a `<legend>`. Semantically that
+ * is a **group label**, not a heading. Screen readers announce it when the user
+ * enters the fieldset, but users jumping through headings with the H key skip
+ * it. Visually it looks like a heading, so use this component for *form
+ * grouping*, not as page structure. For real page headings, use a separate
+ * heading element above the form.
  *
- * **Supporting-text lengte**: de subtitle staat als `<span>` binnen
- * de `<legend>` zodat SR 'm meeleest als group label. Bijwerking: bij
- * elke field-entry binnen de sectie wordt de hele legend (titel +
- * subtitel) opnieuw uitgesproken. Houd `supporting-text` daarom kort
- * (richtlijn: ≤ ~80 tekens) en gebruik 'm voor groep-introductie
- * ("Vul je adresgegevens in"), niet voor uitgebreide instructies.
- * Voor langere uitleg op een specifiek veld: gebruik
- * `nldd-form-field-help-text` op dat veld.
+ * **Supporting-text length**: the subtitle sits as a `<span>` inside the
+ * `<legend>` so a screen reader reads it along as the group label. Side effect:
+ * on every field entry within the section, the whole legend (title + subtitle)
+ * is spoken again. Keep `supporting-text` short (roughly 80 characters or less)
+ * and use it to introduce the group ("Vul je adresgegevens in"), not for
+ * detailed instructions. For a longer explanation on one specific field, use
+ * `nldd-form-field-help-text` on that field.
  *
  *     <nldd-form>
  *         <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in.">
@@ -60,10 +58,10 @@
  *
  * @element nldd-form-section
  *
- * @attr {string} text - Heading-tekst (gerenderd in `<legend>`).
- * @attr {string} supporting-text - Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note).
+ * @attr {string} text - Heading text (rendered in the `<legend>`).
+ * @attr {string} supporting-text - Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note).
  *
- * Children van de form-section worden in `.form-section__main` geplaatst.
+ * Children of the form-section are placed in `.form-section__main`.
  */
 export declare class NLDDFormSection extends HTMLElement {
     static get observedAttributes(): string[];

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

@@ -1 +1 @@
-{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AAQH,qBAAa,eAAgB,SAAQ,WAAW;IAC/C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAoC;IACrD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,iBAAiB,CAAS;IAElC,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAG/B;IAED,iBAAiB,IAAI,IAAI;IAyBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAU5C,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;CAsCrB;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AAQH,qBAAa,eAAgB,SAAQ,WAAW;IAC/C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAoC;IACrD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,iBAAiB,CAAS;IAElC,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAG/B;IAED,iBAAiB,IAAI,IAAI;IAyBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAU5C,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;CAsCrB;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}