@nldd/design-system 0.8.37

package/dist/components/content/tooltip/tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyF/B,CAAC"}

package/dist/components/content/tooltip/tooltip.template.d.ts

@@ -0,0 +1,4 @@
+import type { TemplateResult } from 'lit';
+import type { NLDDTooltip } from './tooltip.js';
+export declare function tooltipTemplate(component: NLDDTooltip): TemplateResult;
+//# sourceMappingURL=tooltip.template.d.ts.map

package/dist/components/content/tooltip/tooltip.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,GAAG,cAAc,CAgBtE"}

package/dist/components/content/tooltip/tooltip.template.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+export function tooltipTemplate(component) {
+    return html `
+		<slot
+			@mouseenter=${component._handleTriggerEnter}
+			@mouseleave=${component._handleTriggerLeave}
+			@focusin=${component._handleFocusIn}
+			@focusout=${component._handleFocusOut}
+		></slot>
+		<div class=${classMap({ tooltip: true, 'is-visible': component._visible && !component._focusVisible, 'is-focus-visible': component._visible && component._focusVisible })}
+			aria-hidden="true"
+			@mouseenter=${component._handleTooltipEnter}
+			@mouseleave=${component._handleTooltipLeave}
+		>
+			<div class="tooltip__body">${component.text}</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=tooltip.template.js.map

package/dist/components/content/tooltip/tooltip.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.template.js","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,MAAM,UAAU,eAAe,CAAC,SAAsB;IACrD,OAAO,IAAI,CAAA;;iBAEK,SAAS,CAAC,mBAAmB;iBAC7B,SAAS,CAAC,mBAAmB;cAChC,SAAS,CAAC,cAAc;eACvB,SAAS,CAAC,eAAe;;eAEzB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,kBAAkB,EAAE,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,aAAa,EAAE,CAAC;;iBAE1J,SAAS,CAAC,mBAAmB;iBAC7B,SAAS,CAAC,mBAAmB;;gCAEd,SAAS,CAAC,IAAI;;EAE5C,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,138 @@
+/**
+ * Nederlandse Digitale Dienst Form Component
+ *
+ * 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.
+ *
+ * **Two usage modes:**
+ *
+ * 1. **Auto-wrap** (default): write children directly. Component creates a
+ *    `<form>` element and migrates children into it via MutationObserver.
+ *    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.
+ *
+ * **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.
+ *
+ * Voor programmatische manipulatie: gebruik de `form` getter zodat je
+ * direct met het inner `<form>` element werkt:
+ *
+ *     const inner = document.querySelector('nldd-form').form;
+ *     inner.checkValidity();
+ *     inner.appendChild(myInput);  // skipt migration-overhead
+ *
+ * @element nldd-form
+ *
+ * @attr {string}  name             - Form name
+ * @attr {string}  action           - URL endpoint for submission
+ * @attr {string}  method           - HTTP method ('get' | 'post' | 'dialog')
+ * @attr {boolean} novalidate       - Skip native browser validation
+ * @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'). Individuele
+ *                                    elementen kunnen het overrulen.
+ *
+ * @prop {HTMLFormElement | null} form - The inner <form> element (read-only).
+ *                                       Use voor `form.checkValidity()`,
+ *                                       directe DOM-manipulatie, of als doel
+ *                                       voor framework-managed children.
+ *
+ * Events bubble naturally from the inner <form>:
+ * @fires submit
+ * @fires reset
+ *
+ * @example
+ * Globale stylesheet import (eenmalig in je app entry):
+ * ```js
+ * import '@nldd/design-system/styles';
+ * ```
+ *
+ * Auto-wrap mode:
+ * ```html
+ * <nldd-form name="profile" novalidate>
+ *   <nldd-text-field name="email" autocomplete="email"></nldd-text-field>
+ *   <nldd-button type="submit" text="Verstuur"></nldd-button>
+ * </nldd-form>
+ * ```
+ *
+ * User-provided form mode (React/Vue/Angular):
+ * ```html
+ * <nldd-form name="profile" novalidate>
+ *   <form>
+ *     <nldd-text-field name="email" autocomplete="email"></nldd-text-field>
+ *     <nldd-button type="submit" text="Verstuur"></nldd-button>
+ *   </form>
+ * </nldd-form>
+ * ```
+ */
+export declare class NLDDForm extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _form;
+    private _observer;
+    /** When true, user provided their own <form> child — skip migration. */
+    private _userProvidedForm;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string | null, newVal: string | null): void;
+    /**
+     * Push `label-alignment` to descendant nldd-form-field and nldd-form-actions
+     * elements that don't have an explicit own value. We track inherited
+     * assignments via a data-attribute so subsequent updates only touch the
+     * elements we previously inherited to — explicit per-element overrides
+     * are preserved.
+     *
+     * **Timing-subtleties (Lit reflect-default + MutationObserver race):**
+     *
+     * Lit-based descendants (nldd-form-field, nldd-form-actions) reflecten hun
+     * default `label-alignment="top"` op het attribuut wanneer hun eerste
+     * update fired. Een naïeve `hasOwn`-check zou dan elke vers gemaakte
+     * descendant als "explicit own value" zien en propagation skippen.
+     *
+     * In praktijk werkt 't omdat:
+     * 1. Bij parsed HTML fires de form's connectedCallback VOORDAT children
+     *    upgraden — propagation set 'right' op het attribuut, child upgrade
+     *    leest dat als initial value (geen reflect-default-conflict).
+     * 2. Bij dynamic appendChild fires de MutationObserver na DOM-mutation
+     *    maar microtask-volgorde laat de propagation z'n attribuut zetten
+     *    voordat Lit's reflection 't kan overschrijven (Lit reflect = ook
+     *    microtask, maar de MO callback runt eerder in deze flow).
+     *
+     * Regression test: form.test.ts "propageert ook naar later toegevoegde
+     * form-actions children" verifieert deze flow. Verander deze guard
+     * niet zonder die test te draaien.
+     */
+    private _propagateLabelAlignment;
+    private _mirrorAttributes;
+    /** The inner <form> element. Useful for `form.checkValidity()` etc. */
+    get form(): HTMLFormElement | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-form': NLDDForm;
+    }
+}
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/form.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AAeH,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;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,OAAO,CAAC,wBAAwB;IAiBhC,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

@@ -0,0 +1,260 @@
+/**
+ * Nederlandse Digitale Dienst Form Component
+ *
+ * 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.
+ *
+ * **Two usage modes:**
+ *
+ * 1. **Auto-wrap** (default): write children directly. Component creates a
+ *    `<form>` element and migrates children into it via MutationObserver.
+ *    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.
+ *
+ * **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.
+ *
+ * Voor programmatische manipulatie: gebruik de `form` getter zodat je
+ * direct met het inner `<form>` element werkt:
+ *
+ *     const inner = document.querySelector('nldd-form').form;
+ *     inner.checkValidity();
+ *     inner.appendChild(myInput);  // skipt migration-overhead
+ *
+ * @element nldd-form
+ *
+ * @attr {string}  name             - Form name
+ * @attr {string}  action           - URL endpoint for submission
+ * @attr {string}  method           - HTTP method ('get' | 'post' | 'dialog')
+ * @attr {boolean} novalidate       - Skip native browser validation
+ * @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'). Individuele
+ *                                    elementen kunnen het overrulen.
+ *
+ * @prop {HTMLFormElement | null} form - The inner <form> element (read-only).
+ *                                       Use voor `form.checkValidity()`,
+ *                                       directe DOM-manipulatie, of als doel
+ *                                       voor framework-managed children.
+ *
+ * Events bubble naturally from the inner <form>:
+ * @fires submit
+ * @fires reset
+ *
+ * @example
+ * Globale stylesheet import (eenmalig in je app entry):
+ * ```js
+ * import '@nldd/design-system/styles';
+ * ```
+ *
+ * Auto-wrap mode:
+ * ```html
+ * <nldd-form name="profile" novalidate>
+ *   <nldd-text-field name="email" autocomplete="email"></nldd-text-field>
+ *   <nldd-button type="submit" text="Verstuur"></nldd-button>
+ * </nldd-form>
+ * ```
+ *
+ * User-provided form mode (React/Vue/Angular):
+ * ```html
+ * <nldd-form name="profile" novalidate>
+ *   <form>
+ *     <nldd-text-field name="email" autocomplete="email"></nldd-text-field>
+ *     <nldd-button type="submit" text="Verstuur"></nldd-button>
+ *   </form>
+ * </nldd-form>
+ * ```
+ */
+const FORWARDED_ATTRIBUTES = [
+    'name',
+    'action',
+    'method',
+    'novalidate',
+    'enctype',
+    'target',
+    'autocomplete',
+];
+const DESCENDANT_SELECTOR = 'nldd-form-field, nldd-form-actions';
+const INHERITED_MARKER = 'formAlignmentInherited';
+export class NLDDForm extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._form = null;
+        this._observer = null;
+        /** When true, user provided their own <form> child — skip migration. */
+        this._userProvidedForm = false;
+    }
+    static get observedAttributes() {
+        return [...FORWARDED_ATTRIBUTES, 'label-alignment'];
+    }
+    connectedCallback() {
+        // One-time setup: detect user-provided <form> or create one ourselves.
+        // Subsequent connect cycles (move in DOM) skip this block but still
+        // re-attach the observer below.
+        if (!this._form) {
+            // User-provided form mode: framework-managed <form> as direct
+            // child. We take it over for attribute-mirroring/propagation but
+            // skip migration so we don't conflict with framework reconciliation.
+            const userForm = this.querySelector(':scope > form');
+            if (userForm) {
+                this._form = userForm;
+                this._userProvidedForm = true;
+                this._mirrorAttributes();
+            }
+            else {
+                // Auto-wrap mode: create inner <form> and migrate initial children.
+                const form = document.createElement('form');
+                this._form = form;
+                this._mirrorAttributes();
+                // Move existing light-DOM children into the form.
+                // For HTML parsed by the browser, connectedCallback fires at the
+                // opening tag — children are added one-by-one AFTER and surface
+                // via the MutationObserver below. This loop only matters for
+                // programmatic patterns (createElement + appendChild children +
+                // then attach), where children are already present at connect.
+                const initialChildren = Array.from(this.childNodes);
+                for (const node of initialChildren) {
+                    form.appendChild(node);
+                }
+                this.appendChild(form);
+            }
+        }
+        // (Re-)attach the observer on every connect. After disconnectedCallback
+        // nulls _observer, a subsequent connectedCallback must rebuild it —
+        // otherwise children appended after a move/reconnect would never land
+        // in the inner <form>.
+        if (!this._observer) {
+            const form = this._form;
+            const userProvided = this._userProvidedForm;
+            this._observer = new MutationObserver(mutations => {
+                for (const m of mutations) {
+                    // Migrate only direct children of the host (children of
+                    // the nldd-form itself, NOT descendants of e.g. a nested
+                    // form-section). Nested children are already inside the
+                    // inner form via their parent migration.
+                    if (m.target !== this)
+                        continue;
+                    // In user-provided form mode: skip migration. User's
+                    // framework controls placement; we don't shuffle DOM.
+                    if (userProvided)
+                        continue;
+                    m.addedNodes.forEach(node => {
+                        if (node === form)
+                            return;
+                        form.appendChild(node);
+                    });
+                }
+                // Newly added descendants — also from inside a nested
+                // nldd-form-section — should receive the inherited alignment.
+                this._propagateLabelAlignment(this.getAttribute('label-alignment'));
+            });
+            // subtree:true so dynamically added form-fields inside a
+            // nested form-section ook getrokken worden door de propagation.
+            this._observer.observe(this, { childList: true, subtree: true });
+        }
+        // Propagate label-alignment to current children (initial + after reconnect)
+        this._propagateLabelAlignment(this.getAttribute('label-alignment'));
+    }
+    disconnectedCallback() {
+        this._observer?.disconnect();
+        this._observer = null;
+    }
+    attributeChangedCallback(name, _oldVal, newVal) {
+        if (name === 'label-alignment') {
+            this._propagateLabelAlignment(newVal);
+            return;
+        }
+        if (!this._form)
+            return;
+        if (newVal === null)
+            this._form.removeAttribute(name);
+        else
+            this._form.setAttribute(name, newVal);
+    }
+    /**
+     * Push `label-alignment` to descendant nldd-form-field and nldd-form-actions
+     * elements that don't have an explicit own value. We track inherited
+     * assignments via a data-attribute so subsequent updates only touch the
+     * elements we previously inherited to — explicit per-element overrides
+     * are preserved.
+     *
+     * **Timing-subtleties (Lit reflect-default + MutationObserver race):**
+     *
+     * Lit-based descendants (nldd-form-field, nldd-form-actions) reflecten hun
+     * default `label-alignment="top"` op het attribuut wanneer hun eerste
+     * update fired. Een naïeve `hasOwn`-check zou dan elke vers gemaakte
+     * descendant als "explicit own value" zien en propagation skippen.
+     *
+     * In praktijk werkt 't omdat:
+     * 1. Bij parsed HTML fires de form's connectedCallback VOORDAT children
+     *    upgraden — propagation set 'right' op het attribuut, child upgrade
+     *    leest dat als initial value (geen reflect-default-conflict).
+     * 2. Bij dynamic appendChild fires de MutationObserver na DOM-mutation
+     *    maar microtask-volgorde laat de propagation z'n attribuut zetten
+     *    voordat Lit's reflection 't kan overschrijven (Lit reflect = ook
+     *    microtask, maar de MO callback runt eerder in deze flow).
+     *
+     * Regression test: form.test.ts "propageert ook naar later toegevoegde
+     * form-actions children" verifieert deze flow. Verander deze guard
+     * niet zonder die test te draaien.
+     */
+    _propagateLabelAlignment(value) {
+        const fields = this.querySelectorAll(DESCENDANT_SELECTOR);
+        fields.forEach(f => {
+            const isInherited = f.dataset[INHERITED_MARKER] === 'true';
+            const hasOwn = f.hasAttribute('label-alignment');
+            // Skip elements that have an explicit own attribute we didn't set
+            if (hasOwn && !isInherited)
+                return;
+            if (value) {
+                f.setAttribute('label-alignment', value);
+                f.dataset[INHERITED_MARKER] = 'true';
+            }
+            else if (isInherited) {
+                f.removeAttribute('label-alignment');
+                delete f.dataset[INHERITED_MARKER];
+            }
+        });
+    }
+    _mirrorAttributes() {
+        if (!this._form)
+            return;
+        for (const attr of FORWARDED_ATTRIBUTES) {
+            const val = this.getAttribute(attr);
+            if (val !== null)
+                this._form.setAttribute(attr, val);
+        }
+    }
+    /** The inner <form> element. Useful for `form.checkValidity()` etc. */
+    get form() {
+        return this._form;
+    }
+}
+if (!customElements.get('nldd-form')) {
+    customElements.define('nldd-form', NLDDForm);
+}
+//# sourceMappingURL=form.js.map

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

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

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ *
+ * Erft `label-alignment` automatisch over van een wrappende `<nldd-form>`:
+ * de form mirrort z'n eigen `label-alignment` naar descendant
+ * `nldd-form-actions` (en `nldd-form-field`) via een MutationObserver
+ * en JS-attribuut-propagatie. Een expliciete eigen `label-alignment` op de
+ * form-actions zelf wordt nooit overschreven.
+ *
+ *     <nldd-form label-alignment="right">
+ *         <nldd-form-field>...</nldd-form-field>
+ *         <nldd-form-actions>
+ *             <nldd-button-group>
+ *                 <nldd-button variant="primary" type="submit" text="Opslaan"></nldd-button>
+ *             </nldd-button-group>
+ *         </nldd-form-actions>
+ *     </nldd-form>
+ *
+ * @element nldd-form-actions
+ *
+ * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'.
+ *                                  Wordt geërfd van een wrappende nldd-form als niet expliciet gezet.
+ *
+ * @slot - Actie-elementen (button, button-group, etc.)
+ */
+import { LitElement } from 'lit';
+export type LabelAlignment = 'top' | 'left' | 'right';
+export declare class NLDDFormActions extends LitElement {
+    static styles: import("lit").CSSResult;
+    labelAlignment: LabelAlignment;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-form-actions': NLDDFormActions;
+    }
+}
+//# sourceMappingURL=form-actions.d.ts.map

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

@@ -0,0 +1 @@
+{"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;IAG3C,cAAc,EAAE,cAAc,CAAS;IAE9B,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

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ *
+ * Erft `label-alignment` automatisch over van een wrappende `<nldd-form>`:
+ * de form mirrort z'n eigen `label-alignment` naar descendant
+ * `nldd-form-actions` (en `nldd-form-field`) via een MutationObserver
+ * en JS-attribuut-propagatie. Een expliciete eigen `label-alignment` op de
+ * form-actions zelf wordt nooit overschreven.
+ *
+ *     <nldd-form label-alignment="right">
+ *         <nldd-form-field>...</nldd-form-field>
+ *         <nldd-form-actions>
+ *             <nldd-button-group>
+ *                 <nldd-button variant="primary" type="submit" text="Opslaan"></nldd-button>
+ *             </nldd-button-group>
+ *         </nldd-form-actions>
+ *     </nldd-form>
+ *
+ * @element nldd-form-actions
+ *
+ * @attr {string} label-alignment - 'top' (default) | 'right' | 'left'.
+ *                                  Wordt geërfd van een wrappende nldd-form als niet expliciet gezet.
+ *
+ * @slot - Actie-elementen (button, button-group, etc.)
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { formActionsStyles } from './form-actions.styles.js';
+import { formActionsTemplate } from './form-actions.template.js';
+let NLDDFormActions = class NLDDFormActions extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.labelAlignment = 'top';
+    }
+    render() {
+        return formActionsTemplate();
+    }
+};
+NLDDFormActions.styles = formActionsStyles;
+__decorate([
+    property({ type: String, reflect: true, attribute: 'label-alignment' })
+], NLDDFormActions.prototype, "labelAlignment", void 0);
+NLDDFormActions = __decorate([
+    customElement('nldd-form-actions')
+], NLDDFormActions);
+export { NLDDFormActions };
+//# sourceMappingURL=form-actions.js.map

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

@@ -0,0 +1 @@
+{"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;;QAIN,mBAAc,GAAmB,KAAK,CAAC;IAKxC,CAAC;IAHS,MAAM;QACd,OAAO,mBAAmB,EAAE,CAAC;IAC9B,CAAC;;AAPe,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;uDACjC;AAJ3B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAS3B"}

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

@@ -0,0 +1,2 @@
+export declare const formActionsStyles: import("lit").CSSResult;
+//# sourceMappingURL=form-actions.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAqD7B,CAAC"}

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

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+export const formActionsStyles = 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-field. */
+
+	.form-actions {
+		display: flex;
+		flex-direction: column;
+	}
+
+	:host([label-alignment='left']) .form-actions,
+	:host([label-alignment='right']) .form-actions {
+		@container (min-width: 641px) {
+			flex-direction: row;
+			align-items: start;
+			gap: var(--semantics-forms-columns-gap);
+		}
+	}
+
+	:host([label-alignment='left']) .form-actions::before,
+	:host([label-alignment='right']) .form-actions::before {
+		@container (min-width: 641px) {
+			content: '';
+			flex-grow: 0;
+			flex-shrink: 0;
+			width: var(--semantics-forms-label-column-width);
+		}
+	}
+
+
+	/* # Main */
+
+	.form-actions__main {
+		display: flex;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
+		min-width: 0;
+	}
+`;
+//# sourceMappingURL=form-actions.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDnC,CAAC"}

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

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+export declare function formActionsTemplate(): TemplateResult;
+//# sourceMappingURL=form-actions.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,wBAAgB,mBAAmB,IAAI,cAAc,CAQpD"}

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

@@ -0,0 +1,11 @@
+import { html } from 'lit';
+export function formActionsTemplate() {
+    return html `
+		<div class="form-actions">
+			<div class="form-actions__main">
+				<slot></slot>
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=form-actions.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.template.js","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,MAAM,UAAU,mBAAmB;IAClC,OAAO,IAAI,CAAA;;;;;;EAMV,CAAC;AACH,CAAC"}