@nldd/design-system 0.8.83 → 0.8.85

package/dist/components/forms/validation-list/validation-list.js

@@ -0,0 +1,358 @@
+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 Validation List (Lit + TypeScript)
+ *
+ * Everything a value has to satisfy, in one list. A requirement you can state
+ * up front is an item with a rule, and it checks itself while you type. One
+ * only a server can decide is an item without a rule, and the app names it in
+ * `unmet` on the control.
+ *
+ * The list has two modes and `judging` is the switch. Before a verdict it shows
+ * its hints, which are the requirements of the field. After one it shows
+ * everything the value does not satisfy, and the hints are gone. It throws that
+ * switch itself the moment its control turns `invalid`, so when the field is
+ * judged is the consumer's decision, and the right moment is on submit.
+ *
+ * Hints are off by default. A phone number does not need its format spelled out
+ * before anyone has typed, while the rules for a password do.
+ *
+ * There are no checkmarks. The control already shows a validation icon of its
+ * own, and repeating that per line says the same thing three times.
+ *
+ * @element nldd-validation-list
+ *
+ * @attr {string} for - Id of the control this list is about. Not needed inside an nldd-form-field, which hands its own control over.
+ * @attr {boolean} hint - Show every item before there is a verdict, as the requirements of the field. Overridable per item.
+ * @attr {boolean} judging - Drop the hints, because this field has been judged. Turned on by the list itself once its control is `invalid`, and settable by hand. What turns red follows `invalid`, not this.
+ *
+ * @slot - nldd-validation-item elements.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @element nldd-validation-item
+ *
+ * @attr {string} match - Regular expression the value has to contain. Not anchored, unlike the native `pattern`: `[A-Z]` means "has a capital in it".
+ * @attr {number} minlength - Fewest characters the value may have.
+ * @attr {number} maxlength - Most characters the value may have.
+ * @attr {boolean} required - The value may not be empty. Use it on a field whose other rules would pass an empty value.
+ * @attr {boolean} hint - Show this item before there is a verdict, whatever the list says.
+ * @attr {boolean} unmet - Whether the value fails this item. Managed by the list; do not set it yourself.
+ * @attr {boolean} visible - Whether the item is on screen. Managed by the list.
+ *
+ * @slot - The text of the requirement.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * Give every item an id that names its field as well as its rule. An id has to
+ * be unique in the whole document, and `length` is the first thing three fields
+ * in one form will all reach for.
+ *
+ * @example
+ * <nldd-form-field label="Wachtwoord">
+ *   <nldd-password-field name="password" invalid unmet="password-breach"></nldd-password-field>
+ *   <nldd-validation-list hint>
+ *     <nldd-validation-item id="password-length" minlength="8">Minimaal 8 tekens</nldd-validation-item>
+ *     <nldd-validation-item id="password-capital" match="[A-Z]">Een hoofdletter</nldd-validation-item>
+ *     <nldd-validation-item id="password-breach">Dit wachtwoord staat in een bekend datalek</nldd-validation-item>
+ *   </nldd-validation-list>
+ * </nldd-form-field>
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { validationListStyles, validationItemStyles } from './validation-list.styles.js';
+import { validationListTemplate, validationItemTemplate } from './validation-list.template.js';
+/* ============================================================
+   nldd-validation-item
+   ============================================================ */
+let NLDDValidationItem = class NLDDValidationItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Not anchored, unlike the native `pattern`. See the note at the top. */
+        this.match = '';
+        /** For a field whose other rules would pass an empty value. See `test`. */
+        this.required = false;
+        this.hint = false;
+        this.unmet = false;
+        this.visible = false;
+    }
+    /** Whether this item judges itself, or waits for the app to name it. */
+    get hasRule() {
+        return this.required
+            || Boolean(this.match)
+            || this.minlength !== undefined
+            || this.maxlength !== undefined;
+    }
+    /**
+     * Whether `value` satisfies this item, or null when there is nothing to
+     * satisfy because the item carries no rule.
+     *
+     * An empty value is held against the rules like any other, so "minimaal 8
+     * tekens" fails on it, because it does. What keeps a fresh field from
+     * lighting up all of its requirements is not this method but the verdict: an
+     * item only turns critical once the control says `invalid`, and an untouched
+     * field has not been judged yet.
+     */
+    test(value) {
+        if (!this.hasRule)
+            return null;
+        if (this.required && !value)
+            return false;
+        if (this.minlength !== undefined && value.length < this.minlength)
+            return false;
+        if (this.maxlength !== undefined && value.length > this.maxlength)
+            return false;
+        if (this.match && !new RegExp(this.match, 'u').test(value))
+            return false;
+        return true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'listitem');
+    }
+    render() {
+        return validationItemTemplate(this);
+    }
+};
+NLDDValidationItem.styles = validationItemStyles;
+__decorate([
+    property({ type: String })
+], NLDDValidationItem.prototype, "match", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDValidationItem.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDValidationItem.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "hint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "unmet", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "visible", void 0);
+NLDDValidationItem = __decorate([
+    customElement('nldd-validation-item')
+], NLDDValidationItem);
+export { NLDDValidationItem };
+/* ============================================================
+   nldd-validation-list
+   ============================================================ */
+let NLDDValidationList = class NLDDValidationList extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Id of the control, for a list that sits outside an nldd-form-field. */
+        this.for = '';
+        this.hint = false;
+        /**
+         * Whether the list is judging the value or explaining what the field wants.
+         *
+         * The switch between the two modes. Off, the hints state the requirements;
+         * on, they are gone and what is left is whatever the value fails. It goes on
+         * the moment the control is `invalid`, and then stays on. A field that has
+         * been judged does not become unjudged: repair the value and the control
+         * turns valid again, but the question the hints answered has been asked and
+         * settled, so bringing them back would undo the one thing the verdict
+         * achieved.
+         *
+         * What it does not decide is what turns red. That follows `invalid` on the
+         * control and nothing else, so a line never goes critical under a field that
+         * looks fine.
+         *
+         * So when a field starts being judged is decided by whoever writes `invalid`
+         * on the control, and the moment to do that is on submit. Writing it while
+         * someone is still typing turns a field red about a value that is not
+         * finished, which is the one thing this list is built to avoid.
+         *
+         * Set it yourself to flip the mode without a control saying anything, and
+         * clear it to put the field back the way it started, which is what a reset
+         * wants.
+         */
+        this.judging = false;
+        /**
+         * The control this list is about.
+         *
+         * Set by the wrapping nldd-form-field, which already answers "which control
+         * is this field about" for the label and the description. A `for` of its own
+         * wins, and setting this property directly is what a test or a story does.
+         */
+        this.control = null;
+        this._resolved = null;
+        this._observer = null;
+        this._onInput = () => this._evaluate();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resolve();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._detach();
+    }
+    /**
+     * Resolving and latching happen before the render, not after it.
+     *
+     * Both write a reactive property, `_resolved` and `judging`, and writing one
+     * from `updated()` asks for a second render on top of the one that just
+     * finished. That is a dev-mode warning on every field that arrives already
+     * invalid. Reading what they need does not take a render: the control is
+     * found by id or handed over as a property, and the items are light DOM.
+     */
+    willUpdate(changed) {
+        if (changed.has('for') || changed.has('control'))
+            this._resolve();
+        this._latchJudging();
+    }
+    updated() {
+        this._evaluate();
+    }
+    /**
+     * A field that has been judged does not become unjudged, so this only ever
+     * goes on. What turns red is `invalid` and nothing else; this decides only
+     * whether the hints are still on screen.
+     */
+    _latchJudging() {
+        if (this._resolved?.hasAttribute('invalid'))
+            this.judging = true;
+    }
+    render() {
+        return validationListTemplate(this);
+    }
+    get _items() {
+        return Array.from(this.children)
+            .filter((el) => el instanceof NLDDValidationItem);
+    }
+    /**
+     * Finds the control and starts listening to it.
+     *
+     * `getRootNode()` and not `document`: an IDREF only resolves inside its own
+     * tree, and a consumer who puts this form inside a component of their own
+     * would otherwise find nothing.
+     */
+    _resolve() {
+        const root = this.getRootNode();
+        const next = this.for ? root.getElementById?.(this.for) ?? null : this.control;
+        // `_observer` and not just the control: taking this element out of the DOM
+        // and putting it back, which is what a consumer portalling a sheet to the
+        // body does, runs disconnectedCallback and takes the listener with it. The
+        // control never changed, so comparing only that would find no work to do
+        // and the list would sit there reacting to nothing.
+        if (next === this._resolved && this._observer)
+            return;
+        this._detach();
+        this._resolved = next;
+        if (!next)
+            return;
+        next.addEventListener('input', this._onInput);
+        this._observer = new MutationObserver(() => {
+            this._latchJudging();
+            this._evaluate();
+        });
+        this._observer.observe(next, { attributes: true, attributeFilter: ['invalid', 'unmet'] });
+    }
+    _detach() {
+        this._resolved?.removeEventListener('input', this._onInput);
+        this._observer?.disconnect();
+        this._observer = null;
+    }
+    _currentValue() {
+        if (this.value !== undefined)
+            return this.value;
+        const control = this._resolved;
+        return control?.value === undefined || control.value === null ? '' : String(control.value);
+    }
+    /**
+     * Decides per item whether it is met, and what that makes visible.
+     *
+     * An item with a rule judges itself; one without waits to be named in
+     * `unmet` on the control. Never both: a rule is held against the value as it
+     * is now, while `unmet` is a snapshot of the last check and therefore older,
+     * so letting the snapshot win would show a mistake that has been fixed.
+     */
+    _evaluate() {
+        const control = this._resolved;
+        // The two attributes answer two questions and are kept apart on purpose.
+        // `invalid` decides what turns critical, so a line never goes red under a
+        // field that looks fine; `judging` only decides whether the hints are
+        // still on screen, and unlike `invalid` it does not come back off.
+        const invalid = control?.hasAttribute('invalid') ?? false;
+        const named = (control?.getAttribute('unmet') ?? '').split(' ').filter(Boolean);
+        const value = this._currentValue();
+        let anyVisible = false;
+        let anyRuleFails = false;
+        const messages = [];
+        for (const item of this._items) {
+            const rule = item.test(value);
+            const failing = rule === null ? named.includes(item.id) : !rule;
+            if (import.meta.env?.DEV && rule !== null && named.includes(item.id)) {
+                console.warn(`<nldd-validation-list>: item "${item.id}" has a rule of its own and is also named in \`unmet\`. `
+                    + 'The rule decides, and the name is ignored: it is a snapshot of the previous check and cannot be newer '
+                    + 'than the value. Drop it from `unmet`, or take the rule off the item.');
+            }
+            item.unmet = invalid && failing;
+            item.visible = item.unmet || (!this.judging && (item.hint || this.hint));
+            if (item.visible)
+                anyVisible = true;
+            if (rule === false) {
+                anyRuleFails = true;
+                messages.push(item.textContent?.trim() ?? '');
+            }
+        }
+        this.classList.toggle('has-items', anyVisible);
+        this._reportValidity(anyRuleFails, messages);
+    }
+    /**
+     * Hands the verdict to the control, so a form with a failing rule does not
+     * submit.
+     *
+     * Only the rules. What the app named in `unmet` it already knows, and
+     * reporting that back would be this list telling the app what the app told
+     * it.
+     *
+     * Through `setCustomValidity` and not into `internals` directly. A control
+     * reports its own `required` and `pattern` through the same channel, and
+     * `setValidity` writes the whole set of flags at once: writing here would
+     * erase those on the way in, and they would erase this on the next render.
+     * The platform's own name for a reason of your own is the one both sides
+     * understand, and a plain native input answers to it too.
+     */
+    _reportValidity(fails, messages) {
+        const control = this._resolved;
+        if (!control?.setCustomValidity)
+            return;
+        control.setCustomValidity(fails ? messages.filter(Boolean).join('. ') : '');
+    }
+};
+NLDDValidationList.styles = validationListStyles;
+__decorate([
+    property({ type: String })
+], NLDDValidationList.prototype, "for", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationList.prototype, "hint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationList.prototype, "judging", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDValidationList.prototype, "control", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDValidationList.prototype, "value", void 0);
+__decorate([
+    state()
+], NLDDValidationList.prototype, "_resolved", void 0);
+NLDDValidationList = __decorate([
+    customElement('nldd-validation-list')
+], NLDDValidationList);
+export { NLDDValidationList };
+//# sourceMappingURL=validation-list.js.map

package/dist/components/forms/validation-list/validation-list.js.map

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

package/dist/components/forms/validation-list/validation-list.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const validationListStyles: import("lit").CSSResult;
+export declare const validationItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=validation-list.styles.d.ts.map

package/dist/components/forms/validation-list/validation-list.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,yBA2BhC,CAAC;AAGF,eAAO,MAAM,oBAAoB,yBA2BhC,CAAC"}

package/dist/components/forms/validation-list/validation-list.styles.js

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+export const validationListStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_gap: var(--primitives-space-2);
+
+		display: block;
+	}
+
+	:host(:not(.has-items)) {
+		display: none;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # List */
+
+	.validation-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_gap);
+	}
+`;
+export const validationItemStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_content-color: var(--semantics-content-color);
+		--_font: var(--primitives-font-body-sm-regular-tight);
+
+		display: none;
+		color: var(--_content-color);
+		font: var(--_font);
+	}
+
+	:host([visible]) {
+		display: block;
+	}
+
+	:host([unmet]) {
+		--_content-color: var(--semantics-content-critical-color);
+	}
+
+	/* After the visible rule at equal specificity: hidden must also win on an
+	   item that is currently shown. */
+	:host([hidden]) {
+		display: none;
+	}
+`;
+//# sourceMappingURL=validation-list.styles.js.map

package/dist/components/forms/validation-list/validation-list.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BtC,CAAC;AAGF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BtC,CAAC"}

package/dist/components/forms/validation-list/validation-list.template.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDValidationList, NLDDValidationItem } from './validation-list.js';
+export declare function validationListTemplate(_component: NLDDValidationList): TemplateResult;
+export declare function validationItemTemplate(_component: NLDDValidationItem): TemplateResult;
+//# sourceMappingURL=validation-list.template.d.ts.map

package/dist/components/forms/validation-list/validation-list.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAEnF,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,kBAAkB,GAAG,cAAc,CAQrF;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,kBAAkB,GAAG,cAAc,CAIrF"}

package/dist/components/forms/validation-list/validation-list.template.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+export function validationListTemplate(_component) {
+    return html `
+		<div class="validation-list"
+			role="list"
+		>
+			<slot></slot>
+		</div>
+	`;
+}
+export function validationItemTemplate(_component) {
+    return html `
+		<slot></slot>
+	`;
+}
+//# sourceMappingURL=validation-list.template.js.map

package/dist/components/forms/validation-list/validation-list.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.template.js","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,sBAAsB,CAAC,UAA8B;IACpE,OAAO,IAAI,CAAA;;;;;;EAMV,CAAC;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,UAA8B;IACpE,OAAO,IAAI,CAAA;;EAEV,CAAC;AACH,CAAC"}

package/dist/components/{icon-C1Kikpol.js → icon-Cd4BloIM.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { t as __decorate } from "./decorate-BKn10QQi.js";
+import { t as __decorate } from "./decorate-lwt_OrAG.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -21,6 +21,7 @@ var iconStyles = css`
 		--_size: 100%;
 		--_color: inherit;
 		--_custom-color: inherit;
+		--_glyph-scale: 1;
 
 		display: inline-flex;
 		width: var(--_size);
@@ -95,7 +96,34 @@ var iconStyles = css`
 
 	svg {
 		display: block;
-		width: 100%;
+		width: calc(100% * var(--_glyph-scale));
+	}
+
+
+	/* # Box
+	 *
+	 * The colour question turns around: [color] and [custom-color] paint the
+	 * box, and the glyph takes whatever contrasts with it. That flip is the
+	 * reason this is a component option and not a box a consumer builds; the
+	 * pair is the part a consumer cannot check by eye.
+	 *
+	 * [size] measures the box, so the same size renders a smaller glyph with
+	 * [box] than without. Four fifths of the box, and a radius of a fifth,
+	 * both written as a ratio so a change lands everywhere at once. */
+
+	:host([box]) {
+		--_glyph-scale: calc(4 / 5);
+
+		border-radius: calc(var(--_size) / 5);
+		background-color: currentColor;
+		height: var(--_size);
+		justify-content: center;
+	}
+
+	/* Resolved against the host's currentColor, which the rule above painted the
+	   box with, and only then assigned to the glyph. Same route as nldd-badge. */
+	:host([box]) svg {
+		color: var(--semantics-content-contrast-color);
 	}
 `;
 //#endregion
@@ -373,6 +401,7 @@ var aliases = {
 	"countdown": "timer",
 	"sfp": "transceiver-module",
 	"delete": "trash",
+	"tools": "screwdriver-wrench",
 	"path": "point-bottom-left-to-point-top-right-s-curve-path",
 	"traject": "point-bottom-left-to-point-top-right-s-curve-path",
 	"power": "power-plug",
@@ -676,6 +705,7 @@ var iconRegistry = /* @__PURE__ */ new Map([
 	["moon", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M10.47 2.12a8.99 8.99 0 0 0 11.41 11.4 10 10 0 1 1-11.4-11.4M8 5.07A8 8 0 1 0 18.93 16 11 11 0 0 1 8 5.07\"/>\n</svg>"],
 	["network-structure", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M12 1a3 3 0 0 1 2.89 3.8l1.95 1.13A2.99 2.99 0 0 1 22 8a3 3 0 0 1-2.32 2.92v2.16a3 3 0 1 1-2.84 5l-1.95 1.12a3 3 0 1 1-5.78 0l-1.95-1.13A2.99 2.99 0 0 1 2 16a3 3 0 0 1 2.32-2.92v-2.16a3 3 0 1 1 2.84-5L9.11 4.8A3 3 0 0 1 12 1m0 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-4.1-3.79c.13.5.13 1.06 0 1.55l1.96 1.14a3 3 0 0 1 1.39-.8v-2.2a3 3 0 0 1-1.4-.81zm6.25-1.12a3 3 0 0 1-1.4.81v2.2a3 3 0 0 1 1.39.8l1.96-1.14a3 3 0 0 1 0-1.55zM5 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2m14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-4.1-3.79c.13.5.13 1.07 0 1.58l1.95 1.12a3 3 0 0 1 1.33-.8v-2.23a3 3 0 0 1-1.33-.79zm-7.75-1.12a3 3 0 0 1-1.33.8v2.23a3 3 0 0 1 1.33.79l1.96-1.12a3 3 0 0 1 0-1.58zM12 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2M7.9 7.23c.13.5.13 1.06 0 1.56L9.84 9.9a3 3 0 0 1 1.4-.81V6.9a3 3 0 0 1-1.4-.8zm6.24-1.13a3 3 0 0 1-1.39.8v2.2a3 3 0 0 1 1.4.8l1.95-1.1a3 3 0 0 1 0-1.56zM5 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-7-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2\"/>\n</svg>"],
 	["network-switch", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M8 9h-2v-2h2v2z\"/>\n	<path fill=\"currentColor\" d=\"M11.33 9h-2v-2h2v2z\"/>\n	<path fill=\"currentColor\" d=\"M14.67 9h-2v-2h2v2z\"/>\n	<path fill=\"currentColor\" d=\"M18 9h-2v-2h2v2z\"/>\n	<path fill=\"currentColor\" d=\"M22 5v6c0 1.1-.9 2-2 2h-7v3.17c.85 .31 1.52 .98 1.83 1.83h7.17v2h-7.17c-.42 1.16-1.52 2-2.83 2c-1.31 0-2.41-.84-2.83-2h-7.17v-2h7.17c.31-.85 .98-1.52 1.83-1.83v-3.17h-7c-1.1 0-2-.9-2-2v-6c0-1.1 .9-2 2-2h16c1.1 0 2 .9 2 2zm-10 13c-.55 0-1 .45-1 1c0 .55 .45 1 1 1c.55 0 1-.45 1-1c0-.55-.45-1-1-1zm-8-7h16v-6h-16v6z\"/>\n</svg>"],
+	["note", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M17 7H7V8.5H17V7Z\"/>\n	<path fill=\"currentColor\" d=\"M17 10H7V11.5H17V10Z\"/>\n	<path fill=\"currentColor\" d=\"M12 14.5V13H7V14.5H12Z\"/>\n	<path fill=\"currentColor\" d=\"M16.59 20.41L20.41 16.59C20.79 16.21 21 15.7 21 15.17V6C21 4.34 19.66 3 18 3H6C4.34 3 3 4.34 3 6V18C3 19.66 4.34 21 6 21H15.17C15.7 21 16.21 20.79 16.59 20.41ZM6 19C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V14H16C14.9 14 14 14.9 14 16V19H6ZM16 16H18.17L16 18.17V16Z\"/>\n</svg>"],
 	["numbered-list", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M5.43 14a2 2 0 0 1 1.3 3.4l-1.1 1.1H7.5V20h-4v-1.5l2.16-2.16a.5.5 0 0 0 .14-.4.5.5 0 0 0-.47-.44.5.5 0 0 0-.51.37l-1.45-.39A2 2 0 0 1 5.43 14M22 19H10v-2h12zM22 13H10v-2h12zM6.5 10H5V5.5H3.5V4h3zM22 7H10V5h12z\"/>\n</svg>"],
 	["paintbrush", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M18.13 2.51a2.39 2.39 0 0 1 3.35 3.35l-7.31 9.26A3.7 3.7 0 0 1 12 16.46c-.28 2.52-2.62 4.49-5.47 4.49a5.5 5.5 0 0 1-5.04-3h.04c1.38 0 2.5-.9 2.5-2a4 4 0 0 1 3.48-3.97 4 4 0 0 1 1.35-2.16zM8.04 13.95a2 2 0 0 0-2 2c0 1.1-.45 2-1.12 2.66q.72.33 1.62.34c1.66 0 3.5-1.2 3.5-3a2 2 0 0 0-2-2m2.07-2.56q-.43.35-.59.84a4 4 0 0 1 2.24 2.23q.49-.15.84-.58l1.08-1.37-2.2-2.2zm9.25-7.3-6.3 4.97 1.87 1.86 4.98-6.3c.27-.34-.2-.81-.55-.54\"/>\n</svg>"],
 	["paper-plane", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M19.7 2.74c.96-.31 1.87.6 1.56 1.57l-5.73 17.94c-.4.98-1.8 1.03-2.27.07L10.2 14.5a1.3 1.3 0 0 0-.7-.7l-7.72-3.03c-1.1-.42-1.04-2 .08-2.35zm-7.77 10.75q.08.15.13.29l2.25 5.74 3.94-12.36zm-7.45-3.8 5.74 2.25.3.13 6.32-6.32z\"/>\n</svg>"],
@@ -725,6 +755,7 @@ var iconRegistry = /* @__PURE__ */ new Map([
 	["rectangle-stack-text", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M14 17H6v-2h8zm4-4H6v-2h12z\"/>\n	<path fill=\"currentColor\" d=\"M19 7a3 3 0 0 1 3 3v9a3 3 0 0 1-2.846 2.996L19 22H5l-.154-.004a3 3 0 0 1-2.842-2.842L2 19v-9a3 3 0 0 1 3-3zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1zm13.5-4.5A1.5 1.5 0 0 1 20 6H4a1.5 1.5 0 0 1 1.5-1.5zm-2-2.5A1.5 1.5 0 0 1 18 3.5H6A1.5 1.5 0 0 1 7.5 2z\"/>\n</svg>"],
 	["scissor", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M2.4 6.14a3 3 0 0 1 5.55 2.05l2.82 1.62 8.75-2.95a2 2 0 0 1 2.44.87L7.95 15.82a3 3 0 1 1-1-1.74L8.83 13a2 2 0 0 1 0-2L6.95 9.92A3 3 0 0 1 2.4 6.14m3.47 9.72a1 1 0 1 0-1.73 1 1 1 0 0 0 1.73-1m4.7-4.61a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5M5.5 6.77a1 1 0 1 0-1 1.74 1 1 0 0 0 1-1.74\"/>\n	<path fill=\"currentColor\" d=\"M21.96 16.27a2 2 0 0 1-2.44.87l-7.5-2.53 3.53-2.04z\"/>\n</svg>"],
 	["score-meter", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M5.24 14.81a7 7 0 0 0 1.81 3.14l-2.12 2.12a10 10 0 0 1-2.59-4.48zm13.83-8.88a10 10 0 0 1 0 14.14l-2.12-2.12a7 7 0 0 0 0-9.9zm-3.33 3.75c.44.5.8 1.11 1 1.74l-3.27 1.89a1.5 1.5 0 1 1-1-1.73zM7.05 8.05A7 7 0 0 0 5 13H2a10 10 0 0 1 2.93-7.07zM12 3a10 10 0 0 1 5 1.34l-1.5 2.6a7 7 0 0 0-7 0L7 4.34A10 10 0 0 1 12 3\"/>\n</svg>"],
+	["screwdriver-wrench", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M11.29 14.71L9.65 16.35C9.87 16.86 10 17.41 10 18C10 20.21 8.21 22 6 22C5.41 22 4.86 21.87 4.35 21.65L6.15 19.85C6.34 19.66 6.34 19.34 6.15 19.15L4.85 17.85C4.66 17.66 4.34 17.66 4.15 17.85L2.35 19.65C2.13 19.14 2 18.59 2 18C2 15.79 3.79 14 6 14C6.59 14 7.14 14.13 7.65 14.35L7.97 14.02L8.2 13.98L10.17 13.59L11.29 14.71Z\"/>\n	<path fill=\"currentColor\" d=\"M3.04 3.04C4.42 1.66 6.66 1.66 8.04 3.04L12.62 7.62C12.86 7.86 12.96 8.2 12.9 8.52L12.5 10.5L16.5 14.5L18.59 14.92C18.85 14.97 19.08 15.12 19.23 15.34L22 19.5L19.46 22L15.34 19.23C15.12 19.08 14.97 18.85 14.92 18.6L14.5 16.5L10.5 12.5L8.52 12.9L8.4 12.91C8.15 12.93 7.91 12.86 7.71 12.7L7.62 12.62L3.04 8.04C1.7 6.7 1.66 4.56 2.92 3.17L3.04 3.04ZM16.8 17.8L19.22 19.43L19.42 19.23L17.79 16.8L16.55 16.55L16.8 17.8ZM6.63 4.45C6.03 3.85 5.05 3.85 4.45 4.45C3.85 5.05 3.85 6.03 4.45 6.63L8.66 10.83L10.11 10.54L10.47 10.47L10.54 10.11L10.83 8.66L6.63 4.45Z\"/>\n	<path fill=\"currentColor\" d=\"M18 2C18.59 2 19.14 2.13 19.65 2.35L17.85 4.15C17.66 4.34 17.66 4.66 17.85 4.85L19.15 6.15C19.34 6.34 19.66 6.34 19.85 6.15L21.65 4.35C21.87 4.86 22 5.41 22 6C22 8.21 20.21 10 18 10C17.41 10 16.86 9.87 16.35 9.65L14.71 11.29L13.59 10.17L13.98 8.2L14.02 7.97L14.35 7.65C14.13 7.14 14 6.59 14 6C14 3.79 15.79 2 18 2Z\"/>\n</svg>"],
 	["seal-check-mark", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"m15.66 7.41-4.7 4.71-2.71-2.7L9.66 8l1.3 1.3L14.25 6z\"/>\n	<path fill=\"currentColor\" d=\"M12 1a8 8 0 0 1 5 14.24V23l-5-2-5 2v-7.76A8 8 0 0 1 12 1m3 15.42a8 8 0 0 1-6 0v3.62l3-1.2 3 1.2zM12 3a6 6 0 1 0 0 12 6 6 0 0 0 0-12\"/>\n</svg>"],
 	["seal-star", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M11.77 5.16a.25.25 0 0 1 .46 0l.87 2.1a.3.3 0 0 0 .22.15l2.27.18a.25.25 0 0 1 .14.44L14 9.51a.3.3 0 0 0-.08.25l.53 2.21a.25.25 0 0 1-.38.27l-1.94-1.18a.3.3 0 0 0-.26 0l-1.94 1.18a.25.25 0 0 1-.38-.27l.53-2.21a.3.3 0 0 0-.08-.25L8.27 8.03a.25.25 0 0 1 .15-.44l2.27-.18a.3.3 0 0 0 .2-.15z\"/>\n	<path fill=\"currentColor\" d=\"M12 1a8 8 0 0 1 8 8 8 8 0 0 1-3 6.24V23l-5-2-5 2v-7.76A8 8 0 0 1 4 9a8 8 0 0 1 8-8m3 15.42a8 8 0 0 1-6 0v3.62l3-1.2 3 1.2zM12 3a6 6 0 1 0 0 12 6 6 0 0 0 0-12\"/>\n</svg>"],
 	["shield", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M16.43 4.58C13.55 3.63 10.45 3.63 7.57 4.58L5 5.44V11.72C5 13.72 6 15.6 7.67 16.71L12 19.6L16.33 16.71C18 15.6 19 13.72 19 11.72V5.44L16.43 4.58ZM21 11.97C20.92 14.55 19.59 16.94 17.44 18.38L12 22L6.56 18.38C4.41 16.94 3.08 14.55 3 11.97L3 5.44C3 4.58 3.55 3.82 4.37 3.54L6.94 2.69C10.22 1.59 13.78 1.59 17.06 2.69L19.63 3.54C20.45 3.82 21 4.58 21 5.44L21 11.97Z\"/>\n</svg>"],
@@ -774,9 +805,11 @@ var iconRegistry = /* @__PURE__ */ new Map([
 	["tray", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M21 6v12c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V6a3 3 0 0 1 3-3h12c1.66 0 3 1.34 3 3M5 18a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4h-3.126a4.002 4.002 0 0 1-7.748 0H5zM6 5a1 1 0 0 0-1 1v6h5v1c0 1.083.92 2 2 2s2-.918 2-2v-1h5V6a1 1 0 0 0-1-1z\"/>\n</svg>"],
 	["tree-structure", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M20 15a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-3c0-1.1.9-2 2-2h1.5v-1a1 1 0 0 0-1-1H14c-.77 0-1.47-.3-2-.77-.53.48-1.23.77-2 .77H8.5a1 1 0 0 0-1 1v1H9a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3c0-1.1.9-2 2-2h1.5v-1a3 3 0 0 1 3-3H10a1 1 0 0 0 1-1V9H9a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-2v1a1 1 0 0 0 1 1h1.5a3 3 0 0 1 3 3v1zM4 20h5v-3H4zm11 0h5v-3h-5zM9 7h6V4H9z\"/>\n</svg>"],
 	["triangle-square-circle", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M17.5 13a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M10 13a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm-5 6h4v-4H5zm6.57-16.25a.5.5 0 0 1 .86 0l4.33 7.5a.5.5 0 0 1-.36.75H7.6a.5.5 0 0 1-.36-.75zM10.27 9h3.46L12 6z\"/>\n</svg>"],
+	["tulip", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M12 2c1.34.42 2.79 1.58 4.03 3.07A8 8 0 0 1 19 4.5V12a7 7 0 0 1-6 6.93V22h-2v-3.07A7 7 0 0 1 5 12V4.5q1.62 0 3.02.6C9.27 3.6 10.72 2.41 12 2M7 12a5 5 0 0 0 4 4.9v-4.4a6 6 0 0 0-4-5.66zm10-5.16a6 6 0 0 0-4 5.66v4.4a5 5 0 0 0 4-4.9zm-4.98-2.66A9 9 0 0 0 9.8 6.1q1.36 1.03 2.2 2.53a8 8 0 0 1 2.24-2.56 9 9 0 0 0-2.22-1.89\"/>\n</svg>"],
+	["tulip-light", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n	<path fill=\"currentColor\" d=\"M16 2c2.08.84 3.99 2.55 5.51 4.63A10 10 0 0 1 25 6v10a9 9 0 0 1-8 8.94V30h-2v-5.06A9 9 0 0 1 7 16V6q1.85 0 3.49.63C12 4.55 13.92 2.83 16 2M9 16a7 7 0 0 0 6 6.93V16a8 8 0 0 0-6-7.75zm14-7.75A8 8 0 0 0 17 16v6.93A7 7 0 0 0 23 16zm-7-4.04c-1.3.7-2.58 1.87-3.69 3.32 1.58 1 2.87 2.42 3.69 4.1.82-1.68 2.1-3.1 3.69-4.1A12 12 0 0 0 16 4.2\"/>\n</svg>"],
 	["underlined", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M20 22H4v-2h16zM8 13c0 1.33 1.43 3 4 3s4-1.67 4-3V2h2v11c0 2.76-2.69 5-6 5s-6-2.24-6-5V2h2z\"/>\n</svg>"],
 	["video-camera", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M20.283 5.264C20.91 4.62 22 5.064 22 5.96l-.013 12.24c.013.739-1.077 1.179-1.707.539L17 15.362V16.5c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3v-9a3 3 0 0 1 3-3h9c1.657 0 3 1.34 3 3v1.137zM5 6.5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1zm12 5.005v.99l3 3.081V8.423z\"/>\n</svg>"],
-	["viewfinder", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M5 18a1 1 0 0 0 1 1h2v2H6a3 3 0 0 1-3-3v-2h2zm16 0a3 3 0 0 1-3 3h-2v-2h2a1 1 0 0 0 1-1v-2h2zM8 5H6a1 1 0 0 0-1 1v2H3V6a3 3 0 0 1 3-3h2zm13 1v2h-2V6a1 1 0 0 0-1-1h-2V3h2a3 3 0 0 1 3 3\"/>\n</svg>"],
+	["viewfinder", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M5 18a1 1 0 0 0 1 1h3v2H6a3 3 0 0 1-3-3v-3h2zm16 0a3 3 0 0 1-3 3h-3v-2h3a1 1 0 0 0 1-1v-3h2zM9 5H6a1 1 0 0 0-1 1v3H3V6a3 3 0 0 1 3-3h3zm12 1v3h-2V6a1 1 0 0 0-1-1h-3V3h3a3 3 0 0 1 3 3\"/>\n</svg>"],
 	["viewfinder-line", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M5 18a1 1 0 0 0 1 1h3v2H6a3 3 0 0 1-3-3v-3h2zm16 0a3 3 0 0 1-3 3h-3v-2h3a1 1 0 0 0 1-1v-3h2zm1-5H2v-2h20zM9 5H6a1 1 0 0 0-1 1v3H3V6a3 3 0 0 1 3-3h3zm9-2a3 3 0 0 1 3 3v3h-2V6a1 1 0 0 0-1-1h-3V3z\"/>\n</svg>"],
 	["waving-crossing-lines", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M22 15c-4.83 0-7.45 .95-10.02 1.93c-2.65 1.01-5.29 2.07-9.98 2.07v-2c4.31 0 6.67-.94 9.27-1.93c2.68-1.02 5.56-2.07 10.73-2.07v2z\"/>\n	<path fill=\"currentColor\" d=\"M18.18 16.24c1.11 .48 2.36 .76 3.82 .76v2c-2.81 0-4.97-.88-6.76-2.13c.88-.26 1.84-.47 2.94-.63z\"/>\n	<path fill=\"currentColor\" d=\"M22 7c-4.66 0-7.18 1.83-9.77 3.8c-2.62 1.99-5.36 4.2-10.23 4.2v-2c4.13 0 6.39-1.79 9.02-3.8c2.66-2.03 5.64-4.2 10.98-4.2v2z\"/>\n	<path fill=\"currentColor\" d=\"M12.69 11.7c.42 .47 .84 .93 1.26 1.38c-.74 .21-1.43 .45-2.08 .69c-.27-.29-.53-.58-.78-.87c.56-.4 1.09-.81 1.6-1.2z\"/>\n	<path fill=\"currentColor\" d=\"M5.61 9c.65 .39 1.27 .89 1.88 1.48c-.31 .19-.63 .36-.95 .52h-4.54v-2h3.61z\"/>\n	<path fill=\"currentColor\" d=\"M22 11h-8.38c1.05-.77 2.09-1.47 3.29-2h5.09v2z\"/>\n	<path fill=\"currentColor\" d=\"M2 5c3.54 0 5.97 1.7 8 3.72c-.56 .43-1.1 .83-1.64 1.2c-1.77-1.73-3.66-2.92-6.36-2.92v-2z\"/>\n</svg>"],
 	["wheat", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n	<path fill=\"currentColor\" d=\"M8 22H6v-3h2zm10 0h-2v-3h2zM3 14a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M3 10a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M3 6a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M7 2a4 4 0 0 1 0 5.29A4 4 0 0 1 7 2m10 0a4 4 0 0 1 0 5.29A4 4 0 0 1 17 2\"/>\n</svg>"]
@@ -797,6 +830,7 @@ var NLDDIcon = (_NLDDIcon = class NLDDIcon extends LitElement {
 		this.size = "";
 		this.color = "";
 		this.customColor = "";
+		this.box = false;
 		this._iconSvg = null;
 	}
 	connectedCallback() {
@@ -835,6 +869,10 @@ __decorate([property({
 	attribute: "custom-color",
 	converter: reflectNonDefault("")
 })], NLDDIcon.prototype, "customColor", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDIcon.prototype, "box", void 0);
 __decorate([state()], NLDDIcon.prototype, "_iconSvg", void 0);
 NLDDIcon = __decorate([customElement("nldd-icon")], NLDDIcon);
 //#endregion

package/dist/components/{icon-button-BYy6hnAY.js → icon-button-CXN0yaVx.js}

@@ -1,8 +1,8 @@
 import { t as inheritedTextReset } from "./shadow-resets-aG-rgyNQ.js";
-import { t as __decorate } from "./decorate-BKn10QQi.js";
-import { t as withTranslations } from "./with-translations-DzAdFTK8.js";
+import { t as __decorate } from "./decorate-lwt_OrAG.js";
+import { t as withTranslations } from "./with-translations-CqUV9S5g.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import "./icon-C1Kikpol.js";
+import "./icon-Cd4BloIM.js";
 import { r as isTouchMode } from "./input-modality-DhTeUxKi.js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -1102,7 +1102,7 @@ function tooltipTemplate(component) {
 *
 * @element nldd-tooltip
 * @attr {string} text - Tooltip text
-* @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behaviour.
+* @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behavior.
 * @attr {string} placement - Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices)
 * @attr {string} timing - When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant.
 *
@@ -1484,7 +1484,7 @@ var nlddIconButtonTranslations = { "components.icon-button.opens-in-new-tab-labe
 * Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
 *
 * @element nldd-icon-button
-* @attr {string} variant - Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken.
+* @attr {string} variant - Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces.
 * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
 * @attr {boolean} hide-lg-text - In lg size, hides the text label and enlarges the icon by one step (28px)
 * @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when a control group draws a single border instead).

package/dist/components/index.d.ts

@@ -31,6 +31,7 @@ export { NLDDTooltip } from './content/tooltip/tooltip.js';
 export { NLDDForm } from './forms/form/form.js';
 export { NLDDFormActions } from './forms/form-actions/form-actions.js';
 export { NLDDFormField } from './forms/form-field/form-field.js';
+export { NLDDValidationList } from './forms/validation-list/validation-list.js';
 export { NLDDFormSection } from './forms/form-section/form-section.js';
 export { NLDDCheckbox } from './inputs/checkbox/checkbox.js';
 export { NLDDCheckboxField } from './inputs/checkbox-field/checkbox-field.js';