@nldd/design-system 0.8.37

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

@@ -0,0 +1,123 @@
+/**
+ * Nederlandse Digitale Dienst Form Field Components (Lit + TypeScript)
+ *
+ * @element nldd-form-field
+ *
+ * @attr {string} label-alignment  - 'top' (default) | 'right' | 'left'
+ * @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.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @element nldd-form-field-help-text
+ *
+ * @slot - Help text content. May contain inline elements including links.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @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-form-field-help-text>
+ *     At least 8 characters. <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';
+export type LabelAlignment = 'top' | 'left' | 'right';
+export declare class NLDDFormField extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Controls how the label is positioned relative to the input.
+     *  - 'top'   : label above the input (default)
+     *  - 'right' : 240 px column, right-aligned text
+     *  - 'left'  : 240 px column, left-aligned text
+     *
+     * Collapses to 'top' automatically when the container is < 640 px wide.
+     */
+    labelAlignment: LabelAlignment;
+    /** Label text. When empty no label is rendered but side-alignment indent is preserved. */
+    label: string;
+    /**
+     * Short supporting text shown below the label. Same typography as the
+     * optional badge. Use nldd-form-field-help-text for longer descriptive text.
+     */
+    supportingLabel: string;
+    /**
+     * When true an "Optional" badge is shown next to the label.
+     * Required fields are intentionally left unmarked per design spec.
+     *
+     * Note: nldd-form-field does not auto-propagate `required` or `aria-required`
+     * to the slotted input. If the field is required, set `required` directly
+     * on the slotted input element so screen readers announce it correctly.
+     */
+    optional: boolean;
+    /** Label text for the optional badge. Defaults to 'Optioneel'. Override for localisation. */
+    optionalLabel: string;
+    private _childObserver;
+    private _observer;
+    private _hasErrors;
+    render(): import("lit-html").TemplateResult;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    /** Called when the label header is clicked — focuses the slotted input. */
+    _focusInput(e: Event): void;
+    private _onSlotChange;
+    /** First child element that is not a form field helper component. */
+    private _findInput;
+    /**
+     * Reads `invalid` and `error-message` from the input and toggles
+     * the `invalid` attribute on the referenced nldd-form-field-error-text elements.
+     * Also sets `aria-describedby` on the input to reference visible error texts.
+     *
+     * Note: this mechanism relies on the slotted input reflecting an `invalid`
+     * attribute, which nldd-text-field and nldd-password-field do. Plain native
+     * `<input>` elements use constraint validation (validity.valid, the `invalid`
+     * event) instead — support for native inputs is a known limitation and
+     * tracked as a follow-up.
+     */
+    private _syncErrorText;
+}
+export declare class NLDDFormFieldHelpText extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult;
+}
+export declare class NLDDFormFieldErrorText extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * When present the error text is visible.
+     * Managed automatically by the parent nldd-form-field — do not set manually.
+     */
+    invalid: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-form-field': NLDDFormField;
+        'nldd-form-field-help-text': NLDDFormFieldHelpText;
+        'nldd-form-field-error-text': NLDDFormFieldErrorText;
+    }
+}
+//# sourceMappingURL=form-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAajC,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAiBtD,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAEzC;;;;;;;OAOG;IAEH,cAAc,EAAE,cAAc,CAAS;IAEvC,0FAA0F;IAE1F,KAAK,SAAM;IAEX;;;OAGG;IAEH,eAAe,SAAM;IAErB;;;;;;;OAOG;IAEH,QAAQ,UAAS;IAEjB,6FAA6F;IAE7F,aAAa,SAAe;IAE5B,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,SAAS,CAAiC;IAGlD,OAAO,CAAC,UAAU,CAAS;IAElB,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAO1C,iBAAiB;IAMjB,YAAY;IAIZ,oBAAoB;IAM7B,2EAA2E;IACpE,WAAW,CAAC,CAAC,EAAE,KAAK;IAgB3B,OAAO,CAAC,aAAa;IAkDrB,qEAAqE;IACrE,OAAO,CAAC,UAAU;IAKlB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,cAAc;CA4CtB;AAOD,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAExC,iBAAiB;IAOjB,MAAM;CAGf;AAOD,qBACa,sBAAuB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAA4B;IAElD;;;OAGG;IAEH,OAAO,UAAS;IAEP,iBAAiB;IAOjB,MAAM;CAGf;AAGD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;QACjC,2BAA2B,EAAE,qBAAqB,CAAC;QACnD,4BAA4B,EAAE,sBAAsB,CAAC;KACrD;CACD"}

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

@@ -0,0 +1,314 @@
+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;
+};
+/**
+ * Nederlandse Digitale Dienst Form Field Components (Lit + TypeScript)
+ *
+ * @element nldd-form-field
+ *
+ * @attr {string} label-alignment  - 'top' (default) | 'right' | 'left'
+ * @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.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @element nldd-form-field-help-text
+ *
+ * @slot - Help text content. May contain inline elements including links.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @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-form-field-help-text>
+ *     At least 8 characters. <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 { formFieldStyles, formFieldHelpTextStyles, formFieldErrorTextStyles, } from './form-field.styles.js';
+import { formFieldTemplate, formFieldHelpTextTemplate, formFieldErrorTextTemplate, } 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'];
+// crypto.randomUUID() requires a secure context (HTTPS or localhost).
+// The fallback uses Math.random() which is sufficient for non-security-sensitive DOM IDs.
+function generateId() {
+    const uuid = crypto.randomUUID?.() ?? Math.random().toString(36).slice(2);
+    return `nldd-field-input-${uuid}`;
+}
+/* ============================================================
+   nldd-form-field
+   ============================================================ */
+let NLDDFormField = class NLDDFormField extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls how the label is positioned relative to the input.
+         *  - 'top'   : label above the input (default)
+         *  - 'right' : 240 px column, right-aligned text
+         *  - 'left'  : 240 px column, left-aligned text
+         *
+         * Collapses to 'top' automatically when the container is < 640 px wide.
+         */
+        this.labelAlignment = 'top';
+        /** Label text. When empty no label is rendered but side-alignment indent is preserved. */
+        this.label = '';
+        /**
+         * Short supporting text shown below the label. Same typography as the
+         * optional badge. Use nldd-form-field-help-text for longer descriptive text.
+         */
+        this.supportingLabel = '';
+        /**
+         * When true an "Optional" badge is shown next to the label.
+         * Required fields are intentionally left unmarked per design spec.
+         *
+         * Note: nldd-form-field does not auto-propagate `required` or `aria-required`
+         * to the slotted input. If the field is required, set `required` directly
+         * on the slotted input element so screen readers announce it correctly.
+         */
+        this.optional = false;
+        /** Label text for the optional badge. Defaults to 'Optioneel'. Override for localisation. */
+        this.optionalLabel = 'Optioneel';
+        this._childObserver = null;
+        this._observer = null;
+        this._hasErrors = false;
+    }
+    render() {
+        return formFieldTemplate(this);
+    }
+    updated(changed) {
+        this.classList.toggle('has-errors', this._hasErrors);
+        if (changed.has('label')) {
+            this._onSlotChange();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._childObserver = new MutationObserver(() => this._onSlotChange());
+        this._childObserver.observe(this, { childList: true });
+    }
+    firstUpdated() {
+        this._onSlotChange();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._childObserver?.disconnect();
+        this._observer?.disconnect();
+    }
+    /** Called when the label header is clicked — focuses the slotted input. */
+    _focusInput(e) {
+        // <label for> cannot cross shadow boundaries so we focus manually.
+        const input = this._findInput();
+        if (!input)
+            return;
+        // Only preventDefault for text-like inputs to avoid double-firing focus.
+        // For checkbox/radio, preventDefault cancels the native toggle — don't call it.
+        const tag = input.tagName.toLowerCase();
+        const type = input.type?.toLowerCase();
+        if (tag !== 'input' || (type !== 'checkbox' && type !== 'radio')) {
+            e.preventDefault();
+        }
+        input.focus();
+    }
+    _onSlotChange() {
+        // Disconnect the previous attribute observer before wiring up a new one.
+        this._observer?.disconnect();
+        const input = this._findInput();
+        if (!input)
+            return;
+        // Ensure the inner native input has an id so aria-describedby can reference it.
+        // For custom elements (nldd-text-field, nldd-password-field) inputId is a property
+        // that gets forwarded to the inner <input id>. For plain <input> elements we set
+        // the id directly. We never set the host element's id to avoid duplicate IDs.
+        const isCustomInput = 'inputId' in input;
+        if (isCustomInput) {
+            const existingId = input.inputId;
+            const generatedId = existingId || generateId();
+            input.inputId = generatedId;
+        }
+        else {
+            if (!input.id)
+                input.id = generateId();
+        }
+        // Custom elements (nldd-text-field, nldd-password-field) expose an `accessible-label`
+        // attribute that they forward to their inner <input aria-label>. Native <input>
+        // elements have no such property — set aria-label directly on them instead.
+        if (this.label) {
+            if (isCustomInput) {
+                input.setAttribute('accessible-label', this.label);
+                input.removeAttribute('aria-label');
+            }
+            else {
+                input.setAttribute('aria-label', this.label);
+                input.removeAttribute('accessible-label');
+            }
+        }
+        else {
+            input.removeAttribute('accessible-label');
+            input.removeAttribute('aria-label');
+        }
+        // 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();
+    }
+    /** First child element that is not a form field helper component. */
+    _findInput() {
+        return Array.from(this.children)
+            .find(el => !HELPER_TAGS.includes(el.tagName.toLowerCase()));
+    }
+    /**
+     * Reads `invalid` and `error-message` from the input and toggles
+     * the `invalid` attribute on the referenced nldd-form-field-error-text elements.
+     * Also sets `aria-describedby` on the input to reference visible error texts.
+     *
+     * Note: this mechanism relies on the slotted input reflecting an `invalid`
+     * attribute, which nldd-text-field and nldd-password-field do. Plain native
+     * `<input>` elements use constraint validation (validity.valid, the `invalid`
+     * event) instead — support for native inputs is a known limitation and
+     * tracked as a follow-up.
+     */
+    _syncErrorText() {
+        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;
+        }
+        else {
+            if (describedByIds.length > 0) {
+                input.setAttribute('aria-describedby', describedByValue);
+            }
+            else {
+                input.removeAttribute('aria-describedby');
+            }
+        }
+        this._hasErrors = visibleErrorIds.length > 0;
+    }
+};
+NLDDFormField.styles = formFieldStyles;
+__decorate([
+    property({ type: String, attribute: 'label-alignment', reflect: true })
+], NLDDFormField.prototype, "labelAlignment", void 0);
+__decorate([
+    property({ type: String })
+], NLDDFormField.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-label' })
+], NLDDFormField.prototype, "supportingLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], NLDDFormField.prototype, "optional", void 0);
+__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);
+export { NLDDFormField };
+/* ============================================================
+   nldd-form-field-help-text
+   ============================================================ */
+let NLDDFormFieldHelpText = class NLDDFormFieldHelpText extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        // Assign to the 'help' slot automatically so consumers don't need to set slot="help" manually.
+        // Note: this will overwrite any explicit slot attribute set by the consumer.
+        this.slot = 'help';
+    }
+    render() {
+        return formFieldHelpTextTemplate(this);
+    }
+};
+NLDDFormFieldHelpText.styles = formFieldHelpTextStyles;
+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

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

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

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

@@ -0,0 +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,yBAsJ3B,CAAC;AAMF,eAAO,MAAM,uBAAuB,yBA6CnC,CAAC;AAMF,eAAO,MAAM,wBAAwB,yBAiDpC,CAAC"}