@nldd/design-system 0.8.37

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

@@ -0,0 +1,258 @@
+import { css } from 'lit';
+/* ============================================================
+   nldd-form-field
+   ============================================================ */
+export const formFieldStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		container-type: inline-size;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block
+	   641px = breakpoints.mdMin (zie src/assets/styles/breakpoints.ts).
+	   Houd in sync met form.css's @media queries en form-actions. */
+
+	.form-field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--components-form-field-gap);
+	}
+
+	:host([label-alignment='left']) .form-field,
+	:host([label-alignment='right']) .form-field {
+		@container (min-width: 641px) {
+			flex-direction: row;
+			align-items: start;
+			gap: var(--semantics-forms-columns-gap);
+		}
+	}
+
+
+	/* # Header */
+
+	.form-field__header {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+	}
+
+	:host([label-alignment='left']) .form-field__header,
+	:host([label-alignment='right']) .form-field__header {
+		@container (min-width: 641px) {
+			flex-grow: 0;
+			flex-shrink: 0;
+			justify-content: center;
+			width: var(--semantics-forms-label-column-width);
+			min-height: var(--semantics-controls-md-min-size);
+		}
+	}
+
+	:host([label-alignment='right']) .form-field__header {
+		@container (min-width: 641px) {
+			align-items: end;
+			text-align: right;
+		}
+	}
+
+	:host([label-alignment='left']) .form-field__header {
+		@container (min-width: 641px) {
+			align-items: start;
+			text-align: left;
+		}
+	}
+
+	.form-field__header.is-empty {
+		display: none;
+	}
+
+	:host([label-alignment='left']) .form-field__header.is-empty,
+	:host([label-alignment='right']) .form-field__header.is-empty {
+		@container (min-width: 641px) {
+			display: flex;
+		}
+	}
+
+
+	/* # Label */
+
+	.form-field__label {
+		display: inline-flex;
+		align-items: baseline;
+		gap: var(--primitives-space-4);
+		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-md-regular-tight);
+	}
+
+	:host([label-alignment='left']) .form-field__label,
+	:host([label-alignment='right']) .form-field__label {
+		@container (min-width: 641px) {
+			display: flex;
+			flex-direction: column;
+			gap: var(--primitives-space-0);
+		}
+	}
+
+	:host([label-alignment='right']) .form-field__label {
+		@container (min-width: 641px) {
+			align-items: end;
+		}
+	}
+
+	:host([label-alignment='left']) .form-field__label {
+		@container (min-width: 641px) {
+			align-items: start;
+		}
+	}
+
+
+	/* # Optional indicator */
+
+	.form-field__optional {
+		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-xs-regular-tight);
+	}
+
+
+	/* # Supporting label */
+
+	.form-field__supporting-label {
+		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-xs-regular-tight);
+	}
+
+
+	/* # Main */
+
+	.form-field__main {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
+		min-width: 0;
+	}
+
+
+	/* # Errors */
+
+	.form-field__errors {
+		display: flex;
+		flex-direction: column;
+	}
+
+	:host(.has-errors) .form-field__errors {
+		margin-top: var(--primitives-space-2);
+	}
+`;
+/* ============================================================
+   nldd-form-field-help-text
+   ============================================================ */
+export const formFieldHelpTextStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: contents;
+	}
+
+
+	/* # Help text */
+
+	.form-field__help-text {
+		margin: var(--primitives-space-2) 0 0;
+		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+
+	/* # Links */
+
+	::slotted(a) {
+		color: var(--semantics-links-color);
+		text-decoration: underline;
+		text-underline-offset: var(--primitives-space-2);
+		border-radius: var(--primitives-corner-radius-xxs);
+	}
+
+	::slotted(a:hover) {
+		color: var(--semantics-links-is-hovered-color);
+	}
+
+	::slotted(a:active) {
+		color: var(--semantics-links-is-active-color);
+	}
+
+	::slotted(a:focus-visible) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	::slotted(a:focus:not(:focus-visible)) {
+		outline: none;
+	}
+`;
+/* ============================================================
+   nldd-form-field-error-text
+   ============================================================ */
+export const formFieldErrorTextStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: none;
+	}
+
+	:host([invalid]) {
+		display: block;
+	}
+
+
+	/* # Error text */
+
+	.form-field__error-text {
+		margin: 0;
+		color: var(--semantics-content-error-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+
+	/* # Links */
+
+	::slotted(a) {
+		color: var(--semantics-links-color);
+		text-decoration: underline;
+		text-underline-offset: var(--primitives-space-2);
+		border-radius: var(--primitives-corner-radius-xxs);
+	}
+
+	::slotted(a:hover) {
+		color: var(--semantics-links-is-hovered-color);
+	}
+
+	::slotted(a:active) {
+		color: var(--semantics-links-is-active-color);
+	}
+
+	::slotted(a:focus-visible) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	::slotted(a:focus:not(:focus-visible)) {
+		outline: none;
+	}
+`;
+//# sourceMappingURL=form-field.styles.js.map

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

@@ -0,0 +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,MAAM,KAAK,CAAC;AAE1B;;kEAEkE;AAElE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJjC,CAAC;AAEF;;kEAEkE;AAElE,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,CAAC;AAEF;;kEAEkE;AAElE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD1C,CAAC"}

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,63 @@
+/* eslint-disable lit-a11y/click-events-have-key-events -- label delegates to inner input */
+import { html, nothing } from 'lit';
+/* ============================================================
+   nldd-form-field
+   ============================================================ */
+function renderOptional(label) {
+    return html `<span class="form-field__optional">${label}</span>`;
+}
+export function formFieldTemplate(component) {
+    const hasLabel = Boolean(component.label);
+    const hasSupportingLabel = Boolean(component.supportingLabel);
+    const isHeaderEmpty = !hasLabel && !hasSupportingLabel;
+    const headerEl = html `
+		<div class="form-field__header ${isHeaderEmpty ? 'is-empty' : ''}">
+			${hasLabel ? html `
+				<label class="form-field__label"
+					@click=${(e) => component._focusInput(e)}
+				>
+					${component.label}
+					${component.optional ? renderOptional(component.optionalLabel) : nothing}
+				</label>
+			` : nothing}
+			${hasSupportingLabel ? html `
+				<span class="form-field__supporting-label">${component.supportingLabel}</span>
+			` : nothing}
+		</div>
+	`;
+    return html `
+		<div class="form-field">
+			${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>
+	`;
+}
+/* ============================================================
+   nldd-form-field-help-text
+   ============================================================ */
+export function formFieldHelpTextTemplate(_component) {
+    return html `
+		<p class="form-field__help-text">
+			<slot></slot>
+		</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

@@ -0,0 +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"}

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

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ *
+ * **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.
+ *
+ * Renders to:
+ *
+ *     <nldd-form-section>
+ *         <fieldset class="form-section">
+ *             <legend class="form-section__header">
+ *                 <span class="form-section__title">Title</span>
+ *                 <span class="form-section__subtitle">Subtitle</span>
+ *             </legend>
+ *             <div class="form-section__main">
+ *                 [user's children]
+ *             </div>
+ *         </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.
+ *
+ * **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.
+ *
+ *     <nldd-form>
+ *         <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in.">
+ *             <nldd-form-field label="Voornaam">...</nldd-form-field>
+ *             <nldd-form-field label="Achternaam">...</nldd-form-field>
+ *         </nldd-form-section>
+ *
+ *         <nldd-form-section text="Adres">
+ *             <nldd-form-field label="Straat">...</nldd-form-field>
+ *         </nldd-form-section>
+ *
+ *         <nldd-form-actions>...</nldd-form-actions>
+ *     </nldd-form>
+ *
+ * @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).
+ *
+ * Children van de form-section worden in `.form-section__main` geplaatst.
+ */
+export declare class NLDDFormSection extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _fieldset;
+    private _legend;
+    private _main;
+    private _observer;
+    private _hasWarnedNoLabel;
+    get text(): string;
+    set text(value: string);
+    get supportingText(): string;
+    set supportingText(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private _warnIfNoLabel;
+    private _buildStructure;
+    private _renderLegend;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-form-section': NLDDFormSection;
+    }
+}
+//# sourceMappingURL=form-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;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;CAqCrB;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

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

@@ -0,0 +1,211 @@
+/**
+ * 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.
+ *
+ * **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.
+ *
+ * Renders to:
+ *
+ *     <nldd-form-section>
+ *         <fieldset class="form-section">
+ *             <legend class="form-section__header">
+ *                 <span class="form-section__title">Title</span>
+ *                 <span class="form-section__subtitle">Subtitle</span>
+ *             </legend>
+ *             <div class="form-section__main">
+ *                 [user's children]
+ *             </div>
+ *         </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.
+ *
+ * **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.
+ *
+ *     <nldd-form>
+ *         <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in.">
+ *             <nldd-form-field label="Voornaam">...</nldd-form-field>
+ *             <nldd-form-field label="Achternaam">...</nldd-form-field>
+ *         </nldd-form-section>
+ *
+ *         <nldd-form-section text="Adres">
+ *             <nldd-form-field label="Straat">...</nldd-form-field>
+ *         </nldd-form-section>
+ *
+ *         <nldd-form-actions>...</nldd-form-actions>
+ *     </nldd-form>
+ *
+ * @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).
+ *
+ * Children van de form-section worden in `.form-section__main` geplaatst.
+ */
+const FIELDSET_CLASS = 'form-section';
+const HEADER_CLASS = 'form-section__header';
+const TITLE_CLASS = 'form-section__title';
+const SUBTITLE_CLASS = 'form-section__subtitle';
+const MAIN_CLASS = 'form-section__main';
+export class NLDDFormSection extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._fieldset = null;
+        this._legend = null;
+        this._main = null;
+        this._observer = null;
+        this._hasWarnedNoLabel = false;
+    }
+    static get observedAttributes() {
+        return ['text', 'supporting-text'];
+    }
+    get text() {
+        return this.getAttribute('text') ?? '';
+    }
+    set text(value) {
+        if (value)
+            this.setAttribute('text', value);
+        else
+            this.removeAttribute('text');
+    }
+    get supportingText() {
+        return this.getAttribute('supporting-text') ?? '';
+    }
+    set supportingText(value) {
+        if (value)
+            this.setAttribute('supporting-text', value);
+        else
+            this.removeAttribute('supporting-text');
+    }
+    connectedCallback() {
+        // One-time setup: build fieldset/legend/main and migrate children.
+        // Subsequent connect cycles (e.g. when nldd-form moves us into its
+        // inner <form>) skip this block but still re-attach the observer.
+        if (!this._fieldset)
+            this._buildStructure();
+        this._renderLegend();
+        this._warnIfNoLabel();
+        // (Re-)attach observer on every connect to catch dynamically added
+        // children (which would otherwise land outside the inner fieldset).
+        if (!this._observer) {
+            const main = this._main;
+            this._observer = new MutationObserver(mutations => {
+                for (const m of mutations) {
+                    if (m.target !== this)
+                        continue;
+                    m.addedNodes.forEach(node => {
+                        if (node === this._fieldset)
+                            return;
+                        main?.appendChild(node);
+                    });
+                }
+            });
+            this._observer.observe(this, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        this._observer?.disconnect();
+        this._observer = null;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'text' || name === 'supporting-text') {
+            // Pas re-renderen na _buildStructure (eerste connect).
+            if (this._legend) {
+                this._renderLegend();
+                this._warnIfNoLabel();
+            }
+        }
+    }
+    _warnIfNoLabel() {
+        // Dev-only — productieconsoles van end-users blijven schoon.
+        if (!import.meta.env?.DEV)
+            return;
+        if (this._hasWarnedNoLabel)
+            return;
+        if (this.text || this.supportingText)
+            return;
+        this._hasWarnedNoLabel = true;
+        console.warn('<nldd-form-section>: No `text` or `supporting-text` provided. The <fieldset> has no accessible name and screen readers may announce it as just "group" (Chrome) or nothing (Firefox). Set `text` for a group label, or document this section as purely visual grouping.');
+    }
+    _buildStructure() {
+        // Save user's existing children (light-DOM at construction time).
+        const initialChildren = Array.from(this.childNodes);
+        // Create structure: <fieldset><legend/><div.main/></fieldset>
+        const fieldset = document.createElement('fieldset');
+        fieldset.className = FIELDSET_CLASS;
+        const legend = document.createElement('legend');
+        legend.className = HEADER_CLASS;
+        const main = document.createElement('div');
+        main.className = MAIN_CLASS;
+        fieldset.append(legend, main);
+        // Move children into main
+        for (const child of initialChildren) {
+            main.appendChild(child);
+        }
+        this.appendChild(fieldset);
+        this._fieldset = fieldset;
+        this._legend = legend;
+        this._main = main;
+    }
+    _renderLegend() {
+        const legend = this._legend;
+        if (!legend)
+            return;
+        const text = this.text;
+        const supportingText = this.supportingText;
+        const hasContent = !!text || !!supportingText;
+        // Clear existing legend content.
+        legend.textContent = '';
+        if (text) {
+            const titleSpan = document.createElement('span');
+            titleSpan.className = TITLE_CLASS;
+            titleSpan.textContent = text;
+            legend.appendChild(titleSpan);
+        }
+        if (supportingText) {
+            const subtitleSpan = document.createElement('span');
+            subtitleSpan.className = SUBTITLE_CLASS;
+            subtitleSpan.textContent = supportingText;
+            legend.appendChild(subtitleSpan);
+        }
+        // Hide legend completely (incl. its space) if empty so .form-section__main
+        // becomes :first-child and z'n margin-top collapseert via CSS.
+        //
+        // A11y-implicatie: zonder legend heeft de <fieldset> geen accessible
+        // name. SR-gedrag varieert (Chrome: "group", Firefox: niets). Dat is
+        // een bewuste keuze — een form-section kan ook puur als visueel-
+        // grouping (divider + padding) gebruikt worden zonder heading. Wil je
+        // een SR-naam zonder zichtbare title? Wrap dan het form in een
+        // nldd-form-section MET text, of gebruik aria-labelledby op de
+        // individuele velden.
+        legend.hidden = !hasContent;
+    }
+}
+if (!customElements.get('nldd-form-section')) {
+    customElements.define('nldd-form-section', NLDDFormSection);
+}
+//# sourceMappingURL=form-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-section.js","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"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"}