@nldd/design-system 0.8.39 → 0.8.40

package/dist/components/components.js

@@ -740,14 +740,14 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["trash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" fill-rule="evenodd" d="M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2h5v2h-1.08L19 19.046A3 3 0 0 1 16 22H8a3 3 0 0 1-3-2.954L4.08 8H3V6h5zM6.087 8l.91 10.917L7 19a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l.003-.083L17.914 8zM14 6h-4V4h4zm-3 4v8H9v-8zm4 0v8h-2v-8z"/>\n</svg>'],
   ["underlined", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M20 22H4v-2h16zM8.7 12.07q0 1.92.81 2.8.84.87 2.55.87 1.61 0 2.47-.91.89-.94.89-2.67V2h2.37v10.16q0 1.78-.72 3.1a4.7 4.7 0 0 1-2.04 2.02q-1.32.81-3.14.72-2.83.09-4.27-1.44c-.95-.9-1.42-2.36-1.42-4.2V2h2.5z"/>\n</svg>']
 ]);
-var __defProp$1d = Object.defineProperty;
-var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
-var __decorateClass$1f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(target, key) : target;
+var __defProp$1e = Object.defineProperty;
+var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
+var __decorateClass$1g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1d(target, key, result);
+  if (kind && result) __defProp$1e(target, key, result);
   return result;
 };
 [
@@ -785,23 +785,23 @@ let NLDDIcon = class extends LitElement {
   }
 };
 NLDDIcon.styles = iconStyles;
-__decorateClass$1f([
+__decorateClass$1g([
   property({ type: String })
 ], NLDDIcon.prototype, "name", 2);
-__decorateClass$1f([
+__decorateClass$1g([
   state()
 ], NLDDIcon.prototype, "_iconSvg", 2);
-NLDDIcon = __decorateClass$1f([
+NLDDIcon = __decorateClass$1g([
   customElement("nldd-icon")
 ], NLDDIcon);
-var __defProp$1c = Object.defineProperty;
-var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
-var __decorateClass$1e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(target, key) : target;
+var __defProp$1d = Object.defineProperty;
+var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
+var __decorateClass$1f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1c(target, key, result);
+  if (kind && result) __defProp$1d(target, key, result);
   return result;
 };
 let NLDDButton = class extends LitElement {
@@ -849,49 +849,49 @@ let NLDDButton = class extends LitElement {
   }
 };
 NLDDButton.styles = buttonStyles;
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDButton.prototype, "variant", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDButton.prototype, "size", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: Boolean, reflect: true, attribute: "full-width" })
 ], NLDDButton.prototype, "fullWidth", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: Boolean, reflect: true, attribute: "expandable" })
 ], NLDDButton.prototype, "expandable", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDButton.prototype, "type", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDButton.prototype, "popovertarget", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: Boolean, reflect: true })
 ], NLDDButton.prototype, "disabled", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDButton.prototype, "text", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, attribute: "start-icon" })
 ], NLDDButton.prototype, "startIcon", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, attribute: "end-icon" })
 ], NLDDButton.prototype, "endIcon", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDButton.prototype, "accessibleLabel", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDButton.prototype, "href", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDButton.prototype, "target", 2);
-__decorateClass$1e([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDButton.prototype, "rel", 2);
-NLDDButton = __decorateClass$1e([
+NLDDButton = __decorateClass$1f([
   customElement("nldd-button")
 ], NLDDButton);
 const iconButtonStyles = css`
@@ -1359,14 +1359,14 @@ function isPointerMode() {
 function isTouchMode() {
   return getInputModality() === "touch";
 }
-var __defProp$1b = Object.defineProperty;
-var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
-var __decorateClass$1d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(target, key) : target;
+var __defProp$1c = Object.defineProperty;
+var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
+var __decorateClass$1e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1b(target, key, result);
+  if (kind && result) __defProp$1c(target, key, result);
   return result;
 };
 let tooltipCounter = 0;
@@ -1569,19 +1569,19 @@ let NLDDTooltip = class extends LitElement {
   }
 };
 NLDDTooltip.styles = tooltipStyles;
-__decorateClass$1d([
+__decorateClass$1e([
   property({ type: String, reflect: true })
 ], NLDDTooltip.prototype, "text", 2);
-__decorateClass$1d([
+__decorateClass$1e([
   property({ type: String, reflect: true })
 ], NLDDTooltip.prototype, "placement", 2);
-__decorateClass$1d([
+__decorateClass$1e([
   property({ type: Boolean, reflect: true })
 ], NLDDTooltip.prototype, "disabled", 2);
-__decorateClass$1d([
+__decorateClass$1e([
   state()
 ], NLDDTooltip.prototype, "_visible", 2);
-NLDDTooltip = __decorateClass$1d([
+NLDDTooltip = __decorateClass$1e([
   customElement("nldd-tooltip")
 ], NLDDTooltip);
 function renderContent(component) {
@@ -1643,14 +1643,14 @@ function template$l() {
   }
   return renderButton();
 }
-var __defProp$1a = Object.defineProperty;
-var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(target, key) : target;
+var __defProp$1b = Object.defineProperty;
+var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
+var __decorateClass$1d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1a(target, key, result);
+  if (kind && result) __defProp$1b(target, key, result);
   return result;
 };
 let NLDDIconButton = class extends LitElement {
@@ -1701,46 +1701,46 @@ let NLDDIconButton = class extends LitElement {
   }
 };
 NLDDIconButton.styles = iconButtonStyles;
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDIconButton.prototype, "variant", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDIconButton.prototype, "size", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: Boolean, reflect: true })
 ], NLDDIconButton.prototype, "disabled", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDIconButton.prototype, "type", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: Boolean, reflect: true, attribute: "expandable" })
 ], NLDDIconButton.prototype, "expandable", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: Boolean, reflect: true, attribute: "full-width" })
 ], NLDDIconButton.prototype, "fullWidth", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String })
 ], NLDDIconButton.prototype, "popovertarget", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String })
 ], NLDDIconButton.prototype, "text", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String })
 ], NLDDIconButton.prototype, "icon", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDIconButton.prototype, "accessibleLabel", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDIconButton.prototype, "href", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String })
 ], NLDDIconButton.prototype, "target", 2);
-__decorateClass$1c([
+__decorateClass$1d([
   property({ type: String })
 ], NLDDIconButton.prototype, "rel", 2);
-NLDDIconButton = __decorateClass$1c([
+NLDDIconButton = __decorateClass$1d([
   customElement("nldd-icon-button")
 ], NLDDIconButton);
 const splitButtonStyles = css`
@@ -2221,13 +2221,13 @@ function template$j() {
 		${this.icon ? html`<nldd-icon name=${this.icon}></nldd-icon>` : html`<slot></slot>`}
 	`;
 }
-var __defProp$19 = Object.defineProperty;
-var __decorateClass$1b = (decorators, target, key, kind) => {
+var __defProp$1a = Object.defineProperty;
+var __decorateClass$1c = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$19(target, key, result);
+  if (result) __defProp$1a(target, key, result);
   return result;
 };
 function VisibilityMixin(Base) {
@@ -2263,22 +2263,22 @@ function VisibilityMixin(Base) {
       this._visibilityStyle.textContent = rules.join("\n");
     }
   }
-  __decorateClass$1b([
+  __decorateClass$1c([
     property({ type: String, reflect: true, attribute: "hide-below" })
   ], WithVisibility.prototype, "hideBelow");
-  __decorateClass$1b([
+  __decorateClass$1c([
     property({ type: String, reflect: true, attribute: "hide-above" })
   ], WithVisibility.prototype, "hideAbove");
   return WithVisibility;
 }
-var __defProp$18 = Object.defineProperty;
-var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
+var __defProp$19 = Object.defineProperty;
+var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$18(target, key, result);
+  if (kind && result) __defProp$19(target, key, result);
   return result;
 };
 let NLDDIconCell = class extends VisibilityMixin(LitElement) {
@@ -2294,19 +2294,19 @@ let NLDDIconCell = class extends VisibilityMixin(LitElement) {
   }
 };
 NLDDIconCell.styles = iconCellStyles;
-__decorateClass$1a([
+__decorateClass$1b([
   property({ type: String, reflect: true, attribute: "vertical-alignment" })
 ], NLDDIconCell.prototype, "verticalAlignment", 2);
-__decorateClass$1a([
+__decorateClass$1b([
   property({ type: String, reflect: true })
 ], NLDDIconCell.prototype, "size", 2);
-__decorateClass$1a([
+__decorateClass$1b([
   property({ type: String, reflect: true })
 ], NLDDIconCell.prototype, "color", 2);
-__decorateClass$1a([
+__decorateClass$1b([
   property({ type: String, reflect: true })
 ], NLDDIconCell.prototype, "icon", 2);
-NLDDIconCell = __decorateClass$1a([
+NLDDIconCell = __decorateClass$1b([
   customElement("nldd-icon-cell")
 ], NLDDIconCell);
 const spacerCellStyles = css`
@@ -2354,14 +2354,14 @@ const spacerCellStyles = css`
 		width: auto;
 	}
 `;
-var __defProp$17 = Object.defineProperty;
-var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
-var __decorateClass$19 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
+var __defProp$18 = Object.defineProperty;
+var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$17(target, key, result);
+  if (kind && result) __defProp$18(target, key, result);
   return result;
 };
 let NLDDSpacerCell = class extends VisibilityMixin(LitElement) {
@@ -2374,10 +2374,10 @@ let NLDDSpacerCell = class extends VisibilityMixin(LitElement) {
   }
 };
 NLDDSpacerCell.styles = spacerCellStyles;
-__decorateClass$19([
+__decorateClass$1a([
   property({ type: String, reflect: true })
 ], NLDDSpacerCell.prototype, "size", 2);
-NLDDSpacerCell = __decorateClass$19([
+NLDDSpacerCell = __decorateClass$1a([
   customElement("nldd-spacer-cell")
 ], NLDDSpacerCell);
 const textCellStyles = css`
@@ -2597,14 +2597,14 @@ function template$i() {
 		${this.supportingText ? html`<p class="text-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
 	`;
 }
-var __defProp$16 = Object.defineProperty;
-var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
-var __decorateClass$18 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
+var __defProp$17 = Object.defineProperty;
+var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
+var __decorateClass$19 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$16(target, key, result);
+  if (kind && result) __defProp$17(target, key, result);
   return result;
 };
 let NLDDTextCell = class extends VisibilityMixin(LitElement) {
@@ -2655,46 +2655,46 @@ let NLDDTextCell = class extends VisibilityMixin(LitElement) {
   }
 };
 NLDDTextCell.styles = [textCellStyles];
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true })
 ], NLDDTextCell.prototype, "size", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true })
 ], NLDDTextCell.prototype, "color", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true })
 ], NLDDTextCell.prototype, "width", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDTextCell.prototype, "minWidth", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDTextCell.prototype, "maxWidth", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDTextCell.prototype, "minHeight", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true, attribute: "horizontal-alignment" })
 ], NLDDTextCell.prototype, "horizontalAlignment", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, reflect: true, attribute: "vertical-alignment" })
 ], NLDDTextCell.prototype, "verticalAlignment", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String })
 ], NLDDTextCell.prototype, "text", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String })
 ], NLDDTextCell.prototype, "overline", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDTextCell.prototype, "supportingText", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String })
 ], NLDDTextCell.prototype, "query", 2);
-__decorateClass$18([
+__decorateClass$19([
   property({ type: String, attribute: "query-mark-mode" })
 ], NLDDTextCell.prototype, "queryMarkMode", 2);
-NLDDTextCell = __decorateClass$18([
+NLDDTextCell = __decorateClass$19([
   customElement("nldd-text-cell")
 ], NLDDTextCell);
 const textCell = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -2893,14 +2893,14 @@ function template$h() {
 	</div>
 	`;
 }
-var __defProp$15 = Object.defineProperty;
-var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
-var __decorateClass$17 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
+var __defProp$16 = Object.defineProperty;
+var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
+var __decorateClass$18 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$15(target, key, result);
+  if (kind && result) __defProp$16(target, key, result);
   return result;
 };
 let NLDDButtonGroup = class extends LitElement {
@@ -2933,26 +2933,26 @@ let NLDDButtonGroup = class extends LitElement {
   }
 };
 NLDDButtonGroup.styles = buttonGroupStyles;
-__decorateClass$17([
+__decorateClass$18([
   property({ type: String, reflect: true })
 ], NLDDButtonGroup.prototype, "size", 2);
-__decorateClass$17([
+__decorateClass$18([
   property({ type: String, reflect: true })
 ], NLDDButtonGroup.prototype, "orientation", 2);
-__decorateClass$17([
+__decorateClass$18([
   query("slot")
 ], NLDDButtonGroup.prototype, "_slot", 2);
-NLDDButtonGroup = __decorateClass$17([
+NLDDButtonGroup = __decorateClass$18([
   customElement("nldd-button-group")
 ], NLDDButtonGroup);
-var __defProp$14 = Object.defineProperty;
-var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
-var __decorateClass$16 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
+var __defProp$15 = Object.defineProperty;
+var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
+var __decorateClass$17 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$14(target, key, result);
+  if (kind && result) __defProp$15(target, key, result);
   return result;
 };
 let NLDDInlineDialog = class extends LitElement {
@@ -2996,38 +2996,38 @@ let NLDDInlineDialog = class extends LitElement {
   }
 };
 NLDDInlineDialog.styles = inlineDialogStyles;
-__decorateClass$16([
+__decorateClass$17([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "variant", 2);
-__decorateClass$16([
+__decorateClass$17([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "icon", 2);
-__decorateClass$16([
+__decorateClass$17([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "text", 2);
-__decorateClass$16([
+__decorateClass$17([
   property({ type: String, reflect: true, attribute: "supporting-text" })
 ], NLDDInlineDialog.prototype, "supportingText", 2);
-__decorateClass$16([
+__decorateClass$17([
   property({ type: Number, reflect: true, attribute: "heading-level" })
 ], NLDDInlineDialog.prototype, "headingLevel", 2);
-__decorateClass$16([
+__decorateClass$17([
   state()
 ], NLDDInlineDialog.prototype, "_hasContent", 2);
-__decorateClass$16([
+__decorateClass$17([
   state()
 ], NLDDInlineDialog.prototype, "_hasActions", 2);
-NLDDInlineDialog = __decorateClass$16([
+NLDDInlineDialog = __decorateClass$17([
   customElement("nldd-inline-dialog")
 ], NLDDInlineDialog);
 const POPOVER_REOPEN_GUARD_MS = 100;
-var __defProp$13 = Object.defineProperty;
-var __decorateClass$15 = (decorators, target, key, kind) => {
+var __defProp$14 = Object.defineProperty;
+var __decorateClass$16 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$13(target, key, result);
+  if (result) __defProp$14(target, key, result);
   return result;
 };
 const _NLDDMenuDivider = class _NLDDMenuDivider extends LitElement {
@@ -3089,37 +3089,37 @@ const _NLDDMenuItem = (_a = class extends LitElement {
     return menuItemTemplate.call(this, this.menuVariant);
   }
 }, _a.styles = menuItemStyles, _a._idCounter = 0, _a);
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "text");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "value");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "aliases");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "details");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "icon");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "type");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: Boolean, reflect: true })
 ], _NLDDMenuItem.prototype, "selected");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: Boolean, reflect: true })
 ], _NLDDMenuItem.prototype, "disabled");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "query");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true, attribute: "query-mark-mode" })
 ], _NLDDMenuItem.prototype, "queryMarkMode");
-__decorateClass$15([
+__decorateClass$16([
   state()
 ], _NLDDMenuItem.prototype, "menuVariant");
 let NLDDMenuItem = _NLDDMenuItem;
@@ -3451,50 +3451,50 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
 };
 _NLDDMenu.styles = menuStyles;
 let NLDDMenu = _NLDDMenu;
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], NLDDMenu.prototype, "anchor");
-__decorateClass$15([
+__decorateClass$16([
   property({ attribute: false })
 ], NLDDMenu.prototype, "anchorElement");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], NLDDMenu.prototype, "placement");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], NLDDMenu.prototype, "variant");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, attribute: "empty-text" })
 ], NLDDMenu.prototype, "emptyText");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, attribute: "empty-supporting-text" })
 ], NLDDMenu.prototype, "emptySupportingText");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: String, reflect: true })
 ], NLDDMenu.prototype, "width");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: Number, attribute: "max-items" })
 ], NLDDMenu.prototype, "maxItems");
-__decorateClass$15([
+__decorateClass$16([
   property({ type: Object })
 ], NLDDMenu.prototype, "translations");
-__decorateClass$15([
+__decorateClass$16([
   property({ attribute: false })
 ], NLDDMenu.prototype, "filterFn");
-__decorateClass$15([
+__decorateClass$16([
   state()
 ], NLDDMenu.prototype, "_isEmpty");
 if (!customElements.get("nldd-menu")) {
   customElements.define("nldd-menu", NLDDMenu);
 }
-var __defProp$12 = Object.defineProperty;
-var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
-var __decorateClass$14 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
+var __defProp$13 = Object.defineProperty;
+var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
+var __decorateClass$15 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$12(target, key, result);
+  if (kind && result) __defProp$13(target, key, result);
   return result;
 };
 let NLDDSplitButton = class extends LitElement {
@@ -3574,37 +3574,37 @@ let NLDDSplitButton = class extends LitElement {
   }
 };
 NLDDSplitButton.styles = splitButtonStyles;
-__decorateClass$14([
+__decorateClass$15([
   property({ type: String, reflect: true })
 ], NLDDSplitButton.prototype, "size", 2);
-__decorateClass$14([
+__decorateClass$15([
   property({ type: String, reflect: true })
 ], NLDDSplitButton.prototype, "variant", 2);
-__decorateClass$14([
+__decorateClass$15([
   property({ type: Boolean, reflect: true })
 ], NLDDSplitButton.prototype, "disabled", 2);
-__decorateClass$14([
+__decorateClass$15([
   property({ type: String })
 ], NLDDSplitButton.prototype, "text", 2);
-__decorateClass$14([
+__decorateClass$15([
   property({ type: String, attribute: "start-icon" })
 ], NLDDSplitButton.prototype, "startIcon", 2);
-__decorateClass$14([
+__decorateClass$15([
   property({ type: Object })
 ], NLDDSplitButton.prototype, "translations", 2);
-__decorateClass$14([
+__decorateClass$15([
   query(".split-button__trigger")
 ], NLDDSplitButton.prototype, "_trigger", 2);
-__decorateClass$14([
+__decorateClass$15([
   query(".split-button__menu")
 ], NLDDSplitButton.prototype, "_menu", 2);
-__decorateClass$14([
+__decorateClass$15([
   state()
 ], NLDDSplitButton.prototype, "_menuIsOpen", 2);
-__decorateClass$14([
+__decorateClass$15([
   state()
 ], NLDDSplitButton.prototype, "_hasMenuItems", 2);
-NLDDSplitButton = __decorateClass$14([
+NLDDSplitButton = __decorateClass$15([
   customElement("nldd-split-button")
 ], NLDDSplitButton);
 const buttonBarStyles = css`
@@ -3733,14 +3733,14 @@ function renderChild(child) {
   }
   return html`<slot name="child-${child.id}"></slot>`;
 }
-var __defProp$11 = Object.defineProperty;
-var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
-var __decorateClass$13 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
+var __defProp$12 = Object.defineProperty;
+var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
+var __decorateClass$14 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$11(target, key, result);
+  if (kind && result) __defProp$12(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-button-bar-divider")) {
@@ -3853,19 +3853,19 @@ let NLDDButtonBar = class extends LitElement {
   }
 };
 NLDDButtonBar.styles = buttonBarStyles;
-__decorateClass$13([
+__decorateClass$14([
   property({ type: String, reflect: true })
 ], NLDDButtonBar.prototype, "size", 2);
-__decorateClass$13([
+__decorateClass$14([
   property({ type: String, reflect: true })
 ], NLDDButtonBar.prototype, "variant", 2);
-__decorateClass$13([
+__decorateClass$14([
   property({ type: Boolean, reflect: true })
 ], NLDDButtonBar.prototype, "disabled", 2);
-__decorateClass$13([
+__decorateClass$14([
   state()
 ], NLDDButtonBar.prototype, "_children", 2);
-NLDDButtonBar = __decorateClass$13([
+NLDDButtonBar = __decorateClass$14([
   customElement("nldd-button-bar")
 ], NLDDButtonBar);
 const toolbarStyles = css`
@@ -4251,14 +4251,14 @@ function template$f(startChildren, centerChildren, endChildren, overflowIds, siz
 const nlddToolbarTranslations = {
   "components.toolbar.overflow-action": "Meer"
 };
-var __defProp$10 = Object.defineProperty;
-var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
-var __decorateClass$12 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
+var __defProp$11 = Object.defineProperty;
+var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
+var __decorateClass$13 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$10(target, key, result);
+  if (kind && result) __defProp$11(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-toolbar-item")) {
@@ -4689,43 +4689,43 @@ let NLDDToolbar = class extends LitElement {
   }
 };
 NLDDToolbar.styles = toolbarStyles;
-__decorateClass$12([
+__decorateClass$13([
   property({ type: String, reflect: true })
 ], NLDDToolbar.prototype, "size", 2);
-__decorateClass$12([
+__decorateClass$13([
   property({ type: Boolean, reflect: true, attribute: "show-item-labels" })
 ], NLDDToolbar.prototype, "showItemLabels", 2);
-__decorateClass$12([
+__decorateClass$13([
   property({ type: String, reflect: true })
 ], NLDDToolbar.prototype, "label", 2);
-__decorateClass$12([
+__decorateClass$13([
   property({ type: Object })
 ], NLDDToolbar.prototype, "translations", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_menuOpen", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_startChildren", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_centerChildren", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_endChildren", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_overflowIds", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_leftSpacerZero", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_rightSpacerZero", 2);
-__decorateClass$12([
+__decorateClass$13([
   state()
 ], NLDDToolbar.prototype, "_pinnedOverflowItems", 2);
-NLDDToolbar = __decorateClass$12([
+NLDDToolbar = __decorateClass$13([
   customElement("nldd-toolbar")
 ], NLDDToolbar);
 const linkStyles = css`
@@ -4866,14 +4866,14 @@ function template$e(helpers) {
 		</a>
 	`;
 }
-var __defProp$$ = Object.defineProperty;
-var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
-var __decorateClass$11 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+var __defProp$10 = Object.defineProperty;
+var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
+var __decorateClass$12 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$$(target, key, result);
+  if (kind && result) __defProp$10(target, key, result);
   return result;
 };
 let NLDDLink = class extends LitElement {
@@ -4911,44 +4911,44 @@ let NLDDLink = class extends LitElement {
   }
 };
 NLDDLink.styles = linkStyles;
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String, reflect: true })
 ], NLDDLink.prototype, "href", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String })
 ], NLDDLink.prototype, "target", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String })
 ], NLDDLink.prototype, "rel", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String, reflect: true })
 ], NLDDLink.prototype, "size", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String })
 ], NLDDLink.prototype, "text", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String, attribute: "start-icon" })
 ], NLDDLink.prototype, "startIcon", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String, attribute: "end-icon" })
 ], NLDDLink.prototype, "endIcon", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDLink.prototype, "accessibleLabel", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ type: Boolean, reflect: true })
 ], NLDDLink.prototype, "disabled", 2);
-NLDDLink = __decorateClass$11([
+NLDDLink = __decorateClass$12([
   customElement("nldd-link")
 ], NLDDLink);
-var __defProp$_ = Object.defineProperty;
-var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
-var __decorateClass$10 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
+var __defProp$$ = Object.defineProperty;
+var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
+var __decorateClass$11 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$_(target, key, result);
+  if (kind && result) __defProp$$(target, key, result);
   return result;
 };
 let NLDDRichText = class extends LitElement {
@@ -4960,10 +4960,10 @@ let NLDDRichText = class extends LitElement {
     return this;
   }
 };
-__decorateClass$10([
+__decorateClass$11([
   property({ type: String, reflect: true })
 ], NLDDRichText.prototype, "spacing", 2);
-NLDDRichText = __decorateClass$10([
+NLDDRichText = __decorateClass$11([
   customElement("nldd-rich-text")
 ], NLDDRichText);
 const breakpoints = {
@@ -5222,14 +5222,14 @@ function titleTemplate() {
 		</div>
 	`;
 }
-var __defProp$Z = Object.defineProperty;
-var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
-var __decorateClass$$ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
+var __defProp$_ = Object.defineProperty;
+var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
+var __decorateClass$10 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$Z(target, key, result);
+  if (kind && result) __defProp$_(target, key, result);
   return result;
 };
 let NLDDTitle = class extends LitElement {
@@ -5242,10 +5242,10 @@ let NLDDTitle = class extends LitElement {
   }
 };
 NLDDTitle.styles = titleStyles;
-__decorateClass$$([
+__decorateClass$10([
   property({ type: Number, reflect: true })
 ], NLDDTitle.prototype, "size", 2);
-NLDDTitle = __decorateClass$$([
+NLDDTitle = __decorateClass$10([
   customElement("nldd-title")
 ], NLDDTitle);
 const smMax$b = unsafeCSS(breakpoints.smMax);
@@ -5344,13 +5344,13 @@ function template$d(component) {
 		</blockquote>
 	`;
 }
-var __defProp$Y = Object.defineProperty;
-var __decorateClass$_ = (decorators, target, key, kind) => {
+var __defProp$Z = Object.defineProperty;
+var __decorateClass$$ = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$Y(target, key, result);
+  if (result) __defProp$Z(target, key, result);
   return result;
 };
 function withTranslations(Base, defaults) {
@@ -5377,7 +5377,7 @@ function withTranslations(Base, defaults) {
       }
     }
   }
-  __decorateClass$_([
+  __decorateClass$$([
     property({ type: Object })
   ], TranslationsMixin.prototype, "translations");
   return TranslationsMixin;
@@ -5385,14 +5385,14 @@ function withTranslations(Base, defaults) {
 const nlddBlockquoteTranslations = {
   "components.blockquote.attribution-prefix": "— "
 };
-var __defProp$X = Object.defineProperty;
-var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
-var __decorateClass$Z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
+var __defProp$Y = Object.defineProperty;
+var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
+var __decorateClass$_ = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$X(target, key, result);
+  if (kind && result) __defProp$Y(target, key, result);
   return result;
 };
 let NLDDBlockquote = class extends withTranslations(LitElement, nlddBlockquoteTranslations) {
@@ -5416,13 +5416,13 @@ let NLDDBlockquote = class extends withTranslations(LitElement, nlddBlockquoteTr
   }
 };
 NLDDBlockquote.styles = blockquoteStyles;
-__decorateClass$Z([
+__decorateClass$_([
   property({ type: String })
 ], NLDDBlockquote.prototype, "cite", 2);
-__decorateClass$Z([
+__decorateClass$_([
   state()
 ], NLDDBlockquote.prototype, "_hasAttribution", 2);
-NLDDBlockquote = __decorateClass$Z([
+NLDDBlockquote = __decorateClass$_([
   customElement("nldd-blockquote")
 ], NLDDBlockquote);
 const tagStyles = css`
@@ -5547,14 +5547,14 @@ function template$c(component) {
 		</span>
 	`;
 }
-var __defProp$W = Object.defineProperty;
-var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
-var __decorateClass$Y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
+var __defProp$X = Object.defineProperty;
+var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
+var __decorateClass$Z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$W(target, key, result);
+  if (kind && result) __defProp$X(target, key, result);
   return result;
 };
 let NLDDTag = class extends LitElement {
@@ -5605,28 +5605,28 @@ let NLDDTag = class extends LitElement {
   }
 };
 NLDDTag.styles = tagStyles;
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: String, reflect: true })
 ], NLDDTag.prototype, "variant", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: String, reflect: true })
 ], NLDDTag.prototype, "size", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: String })
 ], NLDDTag.prototype, "text", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: String })
 ], NLDDTag.prototype, "icon", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDTag.prototype, "accessibleLabel", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   state()
 ], NLDDTag.prototype, "_hasSlotText", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   state()
 ], NLDDTag.prototype, "_hasSlotIcon", 2);
-NLDDTag = __decorateClass$Y([
+NLDDTag = __decorateClass$Z([
   customElement("nldd-tag")
 ], NLDDTag);
 const keyboardShortcutStyles = css`
@@ -5723,14 +5723,14 @@ function template$b(component) {
 		</kbd>
 	`;
 }
-var __defProp$V = Object.defineProperty;
-var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
-var __decorateClass$X = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
+var __defProp$W = Object.defineProperty;
+var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
+var __decorateClass$Y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$V(target, key, result);
+  if (kind && result) __defProp$W(target, key, result);
   return result;
 };
 let NLDDKeyboardShortcut = class extends LitElement {
@@ -5750,16 +5750,16 @@ let NLDDKeyboardShortcut = class extends LitElement {
   }
 };
 NLDDKeyboardShortcut.styles = keyboardShortcutStyles;
-__decorateClass$X([
+__decorateClass$Y([
   property({ type: String })
 ], NLDDKeyboardShortcut.prototype, "keys", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property({ type: String, reflect: true })
 ], NLDDKeyboardShortcut.prototype, "size", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property({ type: Boolean, reflect: true, attribute: "always-visible" })
 ], NLDDKeyboardShortcut.prototype, "alwaysVisible", 2);
-NLDDKeyboardShortcut = __decorateClass$X([
+NLDDKeyboardShortcut = __decorateClass$Y([
   customElement("nldd-keyboard-shortcut")
 ], NLDDKeyboardShortcut);
 const FORWARDED_ATTRIBUTES = [
@@ -5936,14 +5936,14 @@ function formActionsTemplate() {
 		</div>
 	`;
 }
-var __defProp$U = Object.defineProperty;
-var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
-var __decorateClass$W = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
+var __defProp$V = Object.defineProperty;
+var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
+var __decorateClass$X = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$U(target, key, result);
+  if (kind && result) __defProp$V(target, key, result);
   return result;
 };
 let NLDDFormActions = class extends LitElement {
@@ -5956,10 +5956,10 @@ let NLDDFormActions = class extends LitElement {
   }
 };
 NLDDFormActions.styles = formActionsStyles;
-__decorateClass$W([
+__decorateClass$X([
   property({ type: String, reflect: true, attribute: "label-alignment" })
 ], NLDDFormActions.prototype, "labelAlignment", 2);
-NLDDFormActions = __decorateClass$W([
+NLDDFormActions = __decorateClass$X([
   customElement("nldd-form-actions")
 ], NLDDFormActions);
 const formFieldStyles = css`
@@ -6274,14 +6274,14 @@ function formFieldErrorTextTemplate(_component) {
 		</p>
 	`;
 }
-var __defProp$T = Object.defineProperty;
-var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
-var __decorateClass$V = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
+var __defProp$U = Object.defineProperty;
+var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
+var __decorateClass$W = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$T(target, key, result);
+  if (kind && result) __defProp$U(target, key, result);
   return result;
 };
 const HELPER_TAGS = ["nldd-form-field-help-text", "nldd-form-field-error-text"];
@@ -6412,25 +6412,25 @@ let NLDDFormField = class extends LitElement {
   }
 };
 NLDDFormField.styles = formFieldStyles;
-__decorateClass$V([
+__decorateClass$W([
   property({ type: String, attribute: "label-alignment", reflect: true })
 ], NLDDFormField.prototype, "labelAlignment", 2);
-__decorateClass$V([
+__decorateClass$W([
   property({ type: String })
 ], NLDDFormField.prototype, "label", 2);
-__decorateClass$V([
+__decorateClass$W([
   property({ type: String, attribute: "supporting-label" })
 ], NLDDFormField.prototype, "supportingLabel", 2);
-__decorateClass$V([
+__decorateClass$W([
   property({ type: Boolean })
 ], NLDDFormField.prototype, "optional", 2);
-__decorateClass$V([
+__decorateClass$W([
   property({ type: String, attribute: "optional-label" })
 ], NLDDFormField.prototype, "optionalLabel", 2);
-__decorateClass$V([
+__decorateClass$W([
   state()
 ], NLDDFormField.prototype, "_hasErrors", 2);
-NLDDFormField = __decorateClass$V([
+NLDDFormField = __decorateClass$W([
   customElement("nldd-form-field")
 ], NLDDFormField);
 let NLDDFormFieldHelpText = class extends LitElement {
@@ -6443,7 +6443,7 @@ let NLDDFormFieldHelpText = class extends LitElement {
   }
 };
 NLDDFormFieldHelpText.styles = formFieldHelpTextStyles;
-NLDDFormFieldHelpText = __decorateClass$V([
+NLDDFormFieldHelpText = __decorateClass$W([
   customElement("nldd-form-field-help-text")
 ], NLDDFormFieldHelpText);
 let NLDDFormFieldErrorText = class extends LitElement {
@@ -6460,10 +6460,10 @@ let NLDDFormFieldErrorText = class extends LitElement {
   }
 };
 NLDDFormFieldErrorText.styles = formFieldErrorTextStyles;
-__decorateClass$V([
+__decorateClass$W([
   property({ type: Boolean, reflect: true })
 ], NLDDFormFieldErrorText.prototype, "invalid", 2);
-NLDDFormFieldErrorText = __decorateClass$V([
+NLDDFormFieldErrorText = __decorateClass$W([
   customElement("nldd-form-field-error-text")
 ], NLDDFormFieldErrorText);
 const FIELDSET_CLASS = "form-section";
@@ -6590,52 +6590,425 @@ const textFieldStyles = css`
 
 	/* # Block */
 
-	.text-field {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		overflow: hidden;
+	.text-field {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		overflow: hidden;
+		box-sizing: border-box;
+		border: var(--semantics-input-fields-border);
+		background-color: var(--_background-color);
+	}
+
+	:host([size='sm']) .text-field {
+		padding-left: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
+		min-height: var(--semantics-controls-sm-min-size);
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .text-field,
+	:host(:not([size])) .text-field {
+		padding-left: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
+		min-height: var(--semantics-controls-md-min-size);
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+	:host([valid]) .text-field {
+		border-color: var(--semantics-input-fields-is-valid-border-color);
+	}
+
+	:host([invalid]) .text-field {
+		border-color: var(--semantics-input-fields-is-invalid-border-color);
+	}
+
+	:host([readonly]) .text-field {
+		border-color: var(--semantics-input-fields-is-read-only-border-color);
+		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
+	}
+
+	:host([disabled]) .text-field {
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	.text-field:has(input:-webkit-autofill),
+	.text-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
+	}
+
+	.text-field:focus-within {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Input */
+
+	.text-field__input {
+		flex-grow: 1;
+		min-width: 0;
+		overflow: hidden;
+		box-sizing: border-box;
+		padding: 0;
+		margin: 0;
+		color: var(--semantics-content-color);
+		background: transparent;
+		border: none;
+		outline: none;
+		appearance: none;
+	}
+
+	:host([size='sm']) .text-field__input {
+		min-height: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+		font: var(--semantics-input-fields-sm-text-font);
+	}
+
+	:host([size='md']) .text-field__input,
+	:host(:not([size])) .text-field__input {
+		min-height: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+		font: var(--semantics-input-fields-md-text-font);
+	}
+
+	:host([disabled]) .text-field__input {
+		pointer-events: none;
+	}
+
+	.text-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
+	}
+
+	.text-field__input:-webkit-autofill,
+	.text-field__input:autofill {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
+	}
+
+
+	/* # Input fade */
+
+	.text-field__input-fade {
+		position: relative;
+		flex-shrink: 0;
+		align-self: stretch;
+		width: 0;
+	}
+
+	.text-field__input-fade::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		width: var(--primitives-space-8);
+		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+		pointer-events: none;
+	}
+
+	:host([size='sm']) .text-field__input-fade::after {
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .text-field__input-fade::after,
+	:host(:not([size])) .text-field__input-fade::after {
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+
+	/* # Validation icon area */
+
+	.text-field__validation-icon-area {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		height: 100%;
+	}
+
+	:host([size='sm']) .text-field__validation-icon-area {
+		width: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([size='md']) .text-field__validation-icon-area,
+	:host(:not([size])) .text-field__validation-icon-area {
+		width: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([valid]) .text-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-valid-icon-color);
+	}
+
+	:host([invalid]) .text-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-invalid-icon-color);
+	}
+
+
+	/* # Validation icon */
+
+	:host([size='sm']) .text-field__validation-icon {
+		width: var(--semantics-input-fields-sm-validation-icon-size);
+		height: var(--semantics-input-fields-sm-validation-icon-size);
+	}
+
+	:host([size='md']) .text-field__validation-icon,
+	:host(:not([size])) .text-field__validation-icon {
+		width: var(--semantics-input-fields-md-validation-icon-size);
+		height: var(--semantics-input-fields-md-validation-icon-size);
+	}
+`;
+function renderValidationIcon$4(component) {
+  if (component.invalid) {
+    return html`
+			<div class="text-field__validation-icon-area">
+				<nldd-icon class="text-field__validation-icon"
+					name="invalid"
+					aria-hidden="true"
+				></nldd-icon>
+			</div>
+		`;
+  }
+  if (component.valid) {
+    return html`
+			<div class="text-field__validation-icon-area">
+				<nldd-icon class="text-field__validation-icon"
+					name="valid"
+					aria-hidden="true"
+				></nldd-icon>
+			</div>
+		`;
+  }
+  return nothing;
+}
+function textFieldTemplate(component) {
+  return html`
+		<div class="text-field">
+			<input class="text-field__input"
+				id=${component.inputId || nothing}
+				type=${component.type}
+				.value=${component.value}
+				placeholder=${component.placeholder || nothing}
+				?disabled=${component.disabled}
+				?readonly=${component.readonly}
+				?required=${component.required}
+				name=${component.name || nothing}
+				autocomplete=${component.autocomplete || nothing}
+				aria-label=${component.accessibleLabel || nothing}
+				aria-describedby=${component.errorMessageIds || nothing}
+				aria-invalid=${component.invalid ? "true" : nothing}
+				@input=${component._handleInput}
+				@change=${component._handleChange}
+			/>
+			<div class="text-field__input-fade"></div>
+			${renderValidationIcon$4(component)}
+		</div>
+	`;
+}
+var __defProp$T = Object.defineProperty;
+var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
+var __decorateClass$V = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$T(target, key, result);
+  return result;
+};
+let NLDDTextField = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = "";
+    this.size = "md";
+    this.value = "";
+    this.inputId = "";
+    this.placeholder = "";
+    this.invalid = false;
+    this.valid = false;
+    this.disabled = false;
+    this.type = "text";
+    this.name = "";
+    this.readonly = false;
+    this.required = false;
+    this.autocomplete = "";
+    this.accessibleLabel = "";
+    this.errorMessageIds = "";
+    this.width = "";
+  }
+  firstUpdated() {
+    this._initialValue = this.value;
+  }
+  updated(changed) {
+    if (changed.has("width")) {
+      this.style.width = this.width || "";
+    }
+    if (changed.has("value")) {
+      this._internals.setFormValue(this.value);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (typeof state2 === "string") this.value = state2;
+  }
+  _handleInput(e) {
+    e.stopPropagation();
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent("input", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleChange(e) {
+    e.stopPropagation();
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  focus() {
+    this._input?.focus();
+  }
+  blur() {
+    this._input?.blur();
+  }
+  render() {
+    return textFieldTemplate(this);
+  }
+};
+NLDDTextField.formAssociated = true;
+NLDDTextField.shadowRootOptions = {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+};
+NLDDTextField.styles = textFieldStyles;
+__decorateClass$V([
+  property({ type: String, reflect: true })
+], NLDDTextField.prototype, "size", 2);
+__decorateClass$V([
+  property({ type: String })
+], NLDDTextField.prototype, "value", 2);
+__decorateClass$V([
+  property({ type: String, attribute: "input-id" })
+], NLDDTextField.prototype, "inputId", 2);
+__decorateClass$V([
+  property({ type: String })
+], NLDDTextField.prototype, "placeholder", 2);
+__decorateClass$V([
+  property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "invalid", 2);
+__decorateClass$V([
+  property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "valid", 2);
+__decorateClass$V([
+  property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "disabled", 2);
+__decorateClass$V([
+  property({ type: String })
+], NLDDTextField.prototype, "type", 2);
+__decorateClass$V([
+  property({ type: String, reflect: true })
+], NLDDTextField.prototype, "name", 2);
+__decorateClass$V([
+  property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "readonly", 2);
+__decorateClass$V([
+  property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "required", 2);
+__decorateClass$V([
+  property({ type: String })
+], NLDDTextField.prototype, "autocomplete", 2);
+__decorateClass$V([
+  property({ type: String, attribute: "accessible-label" })
+], NLDDTextField.prototype, "accessibleLabel", 2);
+__decorateClass$V([
+  property({ type: String, attribute: "error-message-ids" })
+], NLDDTextField.prototype, "errorMessageIds", 2);
+__decorateClass$V([
+  property({ type: String, reflect: true })
+], NLDDTextField.prototype, "width", 2);
+__decorateClass$V([
+  query(".text-field__input")
+], NLDDTextField.prototype, "_input", 2);
+NLDDTextField = __decorateClass$V([
+  customElement("nldd-text-field")
+], NLDDTextField);
+const multiLineTextFieldStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		--_background-color: var(--semantics-input-fields-background-color);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([size='sm']) {
+		--_inline-padding: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
+		--_icon-area-size: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([size='md']),
+	:host(:not([size])) {
+		--_inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
+		--_icon-area-size: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.multi-line-text-field {
+		position: relative;
+		display: block;
 		box-sizing: border-box;
 		border: var(--semantics-input-fields-border);
 		background-color: var(--_background-color);
+		overflow: hidden;
 	}
 
-	:host([size='sm']) .text-field {
-		padding-left: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
-		min-height: var(--semantics-controls-sm-min-size);
+	:host([size='sm']) .multi-line-text-field {
 		border-radius: var(--semantics-controls-sm-corner-radius);
 	}
 
-	:host([size='md']) .text-field,
-	:host(:not([size])) .text-field {
-		padding-left: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
-		min-height: var(--semantics-controls-md-min-size);
+	:host([size='md']) .multi-line-text-field,
+	:host(:not([size])) .multi-line-text-field {
 		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
-	:host([valid]) .text-field {
+	:host([valid]) .multi-line-text-field {
 		border-color: var(--semantics-input-fields-is-valid-border-color);
 	}
 
-	:host([invalid]) .text-field {
+	:host([invalid]) .multi-line-text-field {
 		border-color: var(--semantics-input-fields-is-invalid-border-color);
 	}
 
-	:host([readonly]) .text-field {
+	:host([readonly]) .multi-line-text-field {
 		border-color: var(--semantics-input-fields-is-read-only-border-color);
 		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
 	}
 
-	:host([disabled]) .text-field {
+	:host([disabled]) .multi-line-text-field {
 		opacity: var(--primitives-opacity-disabled);
 	}
 
-	.text-field:has(input:-webkit-autofill),
-	.text-field:has(input:autofill) {
+	.multi-line-text-field:has(textarea:-webkit-autofill),
+	.multi-line-text-field:has(textarea:autofill) {
 		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
 	}
 
-	.text-field:focus-within {
+	.multi-line-text-field:focus-within {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -6644,112 +7017,96 @@ const textFieldStyles = css`
 
 	/* # Input */
 
-	.text-field__input {
-		flex-grow: 1;
-		min-width: 0;
-		overflow: hidden;
+	.multi-line-text-field__input {
+		display: block;
+		width: 100%;
 		box-sizing: border-box;
-		padding: 0;
 		margin: 0;
 		color: var(--semantics-content-color);
 		background: transparent;
 		border: none;
 		outline: none;
 		appearance: none;
+		padding-inline: var(--_inline-padding);
 	}
 
-	:host([size='sm']) .text-field__input {
-		min-height: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
-		font: var(--semantics-input-fields-sm-text-font);
+	:host([resize='vertical']) .multi-line-text-field__input {
+		resize: vertical;
 	}
 
-	:host([size='md']) .text-field__input,
-	:host(:not([size])) .text-field__input {
-		min-height: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
-		font: var(--semantics-input-fields-md-text-font);
+	:host([resize='none']) .multi-line-text-field__input {
+		resize: none;
 	}
 
-	:host([disabled]) .text-field__input {
-		pointer-events: none;
+	:host([resize='auto']) .multi-line-text-field__input {
+		resize: none;
+		field-sizing: content;
 	}
 
-	.text-field__input::placeholder {
-		color: var(--semantics-input-fields-placeholder-color);
+	:host([size='sm']) .multi-line-text-field__input {
+		font: var(--semantics-input-fields-sm-text-font);
+		padding-block: calc((var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2 - 1lh) / 2);
+		min-height: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
 	}
 
-	.text-field__input:-webkit-autofill,
-	.text-field__input:autofill {
-		box-shadow: 0 0 0 999px var(--_background-color) inset;
+	:host([size='md']) .multi-line-text-field__input,
+	:host(:not([size])) .multi-line-text-field__input {
+		font: var(--semantics-input-fields-md-text-font);
+		padding-block: calc((var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2 - 1lh) / 2);
+		min-height: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
 	}
 
-
-	/* # Input fade */
-
-	.text-field__input-fade {
-		position: relative;
-		flex-shrink: 0;
-		align-self: stretch;
-		width: 0;
+	:host([valid]) .multi-line-text-field__input,
+	:host([invalid]) .multi-line-text-field__input {
+		padding-inline-end: var(--_icon-area-size);
 	}
 
-	.text-field__input-fade::after {
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		width: var(--primitives-space-8);
-		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+	:host([disabled]) .multi-line-text-field__input {
 		pointer-events: none;
 	}
 
-	:host([size='sm']) .text-field__input-fade::after {
-		border-radius: var(--semantics-controls-sm-corner-radius);
+	.multi-line-text-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
 	}
 
-	:host([size='md']) .text-field__input-fade::after,
-	:host(:not([size])) .text-field__input-fade::after {
-		border-radius: var(--semantics-controls-md-corner-radius);
+	.multi-line-text-field__input:-webkit-autofill,
+	.multi-line-text-field__input:autofill {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
 	}
 
 
 	/* # Validation icon area */
 
-	.text-field__validation-icon-area {
+	.multi-line-text-field__validation-icon-area {
+		position: absolute;
+		top: 0;
+		right: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		flex-shrink: 0;
-		height: 100%;
-	}
-
-	:host([size='sm']) .text-field__validation-icon-area {
-		width: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
-	}
-
-	:host([size='md']) .text-field__validation-icon-area,
-	:host(:not([size])) .text-field__validation-icon-area {
-		width: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+		width: var(--_icon-area-size);
+		height: var(--_icon-area-size);
+		pointer-events: none;
 	}
 
-	:host([valid]) .text-field__validation-icon-area {
+	:host([valid]) .multi-line-text-field__validation-icon-area {
 		color: var(--semantics-input-fields-is-valid-icon-color);
 	}
 
-	:host([invalid]) .text-field__validation-icon-area {
+	:host([invalid]) .multi-line-text-field__validation-icon-area {
 		color: var(--semantics-input-fields-is-invalid-icon-color);
 	}
 
 
 	/* # Validation icon */
 
-	:host([size='sm']) .text-field__validation-icon {
+	:host([size='sm']) .multi-line-text-field__validation-icon {
 		width: var(--semantics-input-fields-sm-validation-icon-size);
 		height: var(--semantics-input-fields-sm-validation-icon-size);
 	}
 
-	:host([size='md']) .text-field__validation-icon,
-	:host(:not([size])) .text-field__validation-icon {
+	:host([size='md']) .multi-line-text-field__validation-icon,
+	:host(:not([size])) .multi-line-text-field__validation-icon {
 		width: var(--semantics-input-fields-md-validation-icon-size);
 		height: var(--semantics-input-fields-md-validation-icon-size);
 	}
@@ -6757,8 +7114,8 @@ const textFieldStyles = css`
 function renderValidationIcon$3(component) {
   if (component.invalid) {
     return html`
-			<div class="text-field__validation-icon-area">
-				<nldd-icon class="text-field__validation-icon"
+			<div class="multi-line-text-field__validation-icon-area">
+				<nldd-icon class="multi-line-text-field__validation-icon"
 					name="invalid"
 					aria-hidden="true"
 				></nldd-icon>
@@ -6767,8 +7124,8 @@ function renderValidationIcon$3(component) {
   }
   if (component.valid) {
     return html`
-			<div class="text-field__validation-icon-area">
-				<nldd-icon class="text-field__validation-icon"
+			<div class="multi-line-text-field__validation-icon-area">
+				<nldd-icon class="multi-line-text-field__validation-icon"
 					name="valid"
 					aria-hidden="true"
 				></nldd-icon>
@@ -6777,26 +7134,24 @@ function renderValidationIcon$3(component) {
   }
   return nothing;
 }
-function textFieldTemplate(component) {
+function multiLineTextFieldTemplate(component) {
   return html`
-		<div class="text-field">
-			<input class="text-field__input"
+		<div class="multi-line-text-field">
+			<textarea class="multi-line-text-field__input"
 				id=${component.inputId || nothing}
-				type=${component.type}
+				rows=${component.rows}
 				.value=${component.value}
 				placeholder=${component.placeholder || nothing}
 				?disabled=${component.disabled}
 				?readonly=${component.readonly}
 				?required=${component.required}
-				name=${component.name || nothing}
 				autocomplete=${component.autocomplete || nothing}
 				aria-label=${component.accessibleLabel || nothing}
 				aria-describedby=${component.errorMessageIds || nothing}
 				aria-invalid=${component.invalid ? "true" : nothing}
 				@input=${component._handleInput}
 				@change=${component._handleChange}
-			/>
-			<div class="text-field__input-fade"></div>
+			></textarea>
 			${renderValidationIcon$3(component)}
 		</div>
 	`;
@@ -6811,9 +7166,11 @@ var __decorateClass$U = (decorators, target, key, kind) => {
   if (kind && result) __defProp$S(target, key, result);
   return result;
 };
-let NLDDTextField = class extends LitElement {
+let NLDDMultiLineTextField = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = "";
     this.size = "md";
     this.value = "";
     this.inputId = "";
@@ -6821,24 +7178,44 @@ let NLDDTextField = class extends LitElement {
     this.invalid = false;
     this.valid = false;
     this.disabled = false;
-    this.type = "text";
     this.name = "";
     this.readonly = false;
     this.required = false;
     this.autocomplete = "";
+    this.rows = 3;
+    this.resize = "vertical";
     this.accessibleLabel = "";
     this.errorMessageIds = "";
     this.width = "";
   }
+  firstUpdated() {
+    this._initialValue = this.value;
+  }
   updated(changed) {
     if (changed.has("width")) {
       this.style.width = this.width || "";
     }
+    if (changed.has("resize") && this.resize === "auto" && this._textarea) {
+      this._textarea.style.width = "";
+      this._textarea.style.height = "";
+    }
+    if (changed.has("value")) {
+      this._internals.setFormValue(this.value);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (typeof state2 === "string") this.value = state2;
   }
   _handleInput(e) {
     e.stopPropagation();
-    const input = e.target;
-    this.value = input.value;
+    const textarea = e.target;
+    this.value = textarea.value;
     this.dispatchEvent(new CustomEvent("input", {
       detail: { value: this.value },
       bubbles: true,
@@ -6847,80 +7224,78 @@ let NLDDTextField = class extends LitElement {
   }
   _handleChange(e) {
     e.stopPropagation();
-    const input = e.target;
-    this.value = input.value;
+    const textarea = e.target;
+    this.value = textarea.value;
     this.dispatchEvent(new CustomEvent("change", {
       detail: { value: this.value },
       bubbles: true,
       composed: true
     }));
   }
-  focus() {
-    this._input?.focus();
-  }
-  blur() {
-    this._input?.blur();
-  }
   render() {
-    return textFieldTemplate(this);
+    return multiLineTextFieldTemplate(this);
   }
 };
-NLDDTextField.shadowRootOptions = {
+NLDDMultiLineTextField.formAssociated = true;
+NLDDMultiLineTextField.shadowRootOptions = {
   ...LitElement.shadowRootOptions,
   delegatesFocus: true
 };
-NLDDTextField.styles = textFieldStyles;
+NLDDMultiLineTextField.styles = multiLineTextFieldStyles;
 __decorateClass$U([
   property({ type: String, reflect: true })
-], NLDDTextField.prototype, "size", 2);
+], NLDDMultiLineTextField.prototype, "size", 2);
 __decorateClass$U([
   property({ type: String })
-], NLDDTextField.prototype, "value", 2);
+], NLDDMultiLineTextField.prototype, "value", 2);
 __decorateClass$U([
   property({ type: String, attribute: "input-id" })
-], NLDDTextField.prototype, "inputId", 2);
+], NLDDMultiLineTextField.prototype, "inputId", 2);
 __decorateClass$U([
   property({ type: String })
-], NLDDTextField.prototype, "placeholder", 2);
+], NLDDMultiLineTextField.prototype, "placeholder", 2);
 __decorateClass$U([
   property({ type: Boolean, reflect: true })
-], NLDDTextField.prototype, "invalid", 2);
+], NLDDMultiLineTextField.prototype, "invalid", 2);
 __decorateClass$U([
   property({ type: Boolean, reflect: true })
-], NLDDTextField.prototype, "valid", 2);
+], NLDDMultiLineTextField.prototype, "valid", 2);
 __decorateClass$U([
   property({ type: Boolean, reflect: true })
-], NLDDTextField.prototype, "disabled", 2);
+], NLDDMultiLineTextField.prototype, "disabled", 2);
 __decorateClass$U([
-  property({ type: String })
-], NLDDTextField.prototype, "type", 2);
-__decorateClass$U([
-  property({ type: String })
-], NLDDTextField.prototype, "name", 2);
+  property({ type: String, reflect: true })
+], NLDDMultiLineTextField.prototype, "name", 2);
 __decorateClass$U([
   property({ type: Boolean, reflect: true })
-], NLDDTextField.prototype, "readonly", 2);
+], NLDDMultiLineTextField.prototype, "readonly", 2);
 __decorateClass$U([
   property({ type: Boolean, reflect: true })
-], NLDDTextField.prototype, "required", 2);
+], NLDDMultiLineTextField.prototype, "required", 2);
 __decorateClass$U([
   property({ type: String })
-], NLDDTextField.prototype, "autocomplete", 2);
+], NLDDMultiLineTextField.prototype, "autocomplete", 2);
+__decorateClass$U([
+  property({ type: Number })
+], NLDDMultiLineTextField.prototype, "rows", 2);
+__decorateClass$U([
+  property({ type: String, reflect: true })
+], NLDDMultiLineTextField.prototype, "resize", 2);
 __decorateClass$U([
   property({ type: String, attribute: "accessible-label" })
-], NLDDTextField.prototype, "accessibleLabel", 2);
+], NLDDMultiLineTextField.prototype, "accessibleLabel", 2);
 __decorateClass$U([
   property({ type: String, attribute: "error-message-ids" })
-], NLDDTextField.prototype, "errorMessageIds", 2);
+], NLDDMultiLineTextField.prototype, "errorMessageIds", 2);
 __decorateClass$U([
   property({ type: String, reflect: true })
-], NLDDTextField.prototype, "width", 2);
+], NLDDMultiLineTextField.prototype, "width", 2);
 __decorateClass$U([
-  query(".text-field__input")
-], NLDDTextField.prototype, "_input", 2);
-NLDDTextField = __decorateClass$U([
-  customElement("nldd-text-field")
-], NLDDTextField);
+  query(".multi-line-text-field__input")
+], NLDDMultiLineTextField.prototype, "_textarea", 2);
+NLDDMultiLineTextField = __decorateClass$U([
+  customElement("nldd-multi-line-text-field")
+], NLDDMultiLineTextField);
 const passwordFieldStyles = css`
 
 
@@ -7221,6 +7596,8 @@ var __decorateClass$T = (decorators, target, key, kind) => {
 let NLDDPasswordField = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = "";
     this.size = "md";
     this.value = "";
     this.inputId = "";
@@ -7241,10 +7618,25 @@ let NLDDPasswordField = class extends LitElement {
     this.errorMessageIds = "";
     this.width = "";
   }
+  firstUpdated() {
+    this._initialValue = this.value;
+  }
   updated(changed) {
     if (changed.has("width")) {
       this.style.width = this.width || "";
     }
+    if (changed.has("value")) {
+      this._internals.setFormValue(this.value);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (typeof state2 === "string") this.value = state2;
   }
   _handleInput(e) {
     e.stopPropagation();
@@ -7279,6 +7671,7 @@ let NLDDPasswordField = class extends LitElement {
     return passwordFieldTemplate(this);
   }
 };
+NLDDPasswordField.formAssociated = true;
 NLDDPasswordField.shadowRootOptions = {
   ...LitElement.shadowRootOptions,
   delegatesFocus: true
@@ -7327,7 +7720,7 @@ __decorateClass$T([
   property({ type: Boolean, reflect: true })
 ], NLDDPasswordField.prototype, "required", 2);
 __decorateClass$T([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDPasswordField.prototype, "name", 2);
 __decorateClass$T([
   property({ type: String })
@@ -7587,6 +7980,8 @@ var __decorateClass$S = (decorators, target, key, kind) => {
 let NLDDSearchField = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = "";
     this.value = "";
     this.placeholder = "Zoeken";
     this.accessibleLabel = "";
@@ -7597,10 +7992,25 @@ let NLDDSearchField = class extends LitElement {
     this.translations = {};
     this.width = "";
   }
+  firstUpdated() {
+    this._initialValue = this.value;
+  }
   updated(changed) {
     if (changed.has("width")) {
       this.style.width = this.width || "";
     }
+    if (changed.has("value")) {
+      this._internals.setFormValue(this.value);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (typeof state2 === "string") this.value = state2;
   }
   // — i18n ——————————————————————————————————————————————————————————————————
   _t(key) {
@@ -7658,6 +8068,7 @@ let NLDDSearchField = class extends LitElement {
     return searchFieldTemplate(this);
   }
 };
+NLDDSearchField.formAssociated = true;
 NLDDSearchField.styles = searchFieldStyles;
 __decorateClass$S([
   property({ type: String })
@@ -7675,7 +8086,7 @@ __decorateClass$S([
   property({ type: Boolean, reflect: true })
 ], NLDDSearchField.prototype, "disabled", 2);
 __decorateClass$S([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDSearchField.prototype, "name", 2);
 __decorateClass$S([
   property({ type: Boolean, reflect: true, attribute: "show-search-button" })
@@ -7910,6 +8321,8 @@ var __decorateClass$R = (decorators, target, key, kind) => {
 let NLDDNumberField = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = 0;
     this.value = 0;
     this.min = -Infinity;
     this.max = Infinity;
@@ -7926,6 +8339,7 @@ let NLDDNumberField = class extends LitElement {
   }
   firstUpdated() {
     this._lastValidValue = this._clamp(this.value);
+    this._initialValue = this._lastValidValue;
   }
   updated(changedProperties) {
     if (changedProperties.has("width")) {
@@ -7937,6 +8351,20 @@ let NLDDNumberField = class extends LitElement {
         this.removeAttribute("width");
       }
     }
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(String(this.value));
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (typeof state2 !== "string") return;
+    const parsed = parseFloat(state2);
+    if (!isNaN(parsed)) this.value = this._clamp(parsed);
   }
   // — i18n —————————————————————————————————————————————————————————————————
   _t(key) {
@@ -7997,6 +8425,7 @@ let NLDDNumberField = class extends LitElement {
     return numberFieldTemplate(this);
   }
 };
+NLDDNumberField.formAssociated = true;
 NLDDNumberField.styles = numberFieldStyles;
 __decorateClass$R([
   property({ type: Number })
@@ -8017,7 +8446,7 @@ __decorateClass$R([
   property({ type: Boolean, reflect: true })
 ], NLDDNumberField.prototype, "disabled", 2);
 __decorateClass$R([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDNumberField.prototype, "name", 2);
 __decorateClass$R([
   property({ type: Boolean, reflect: true, attribute: "full-width" })
@@ -8639,6 +9068,9 @@ var __decorateClass$P = (decorators, target, key, kind) => {
 let NLDDComboBox = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = "";
+    this._initialDisplayValue = "";
     this.value = "";
     this.placeholder = "";
     this.size = "md";
@@ -8700,6 +9132,8 @@ let NLDDComboBox = class extends LitElement {
   }
   // — Lifecycle ————————————————————————————————————————————————————————————
   firstUpdated() {
+    this._initialValue = this.value;
+    this._initialDisplayValue = this._displayValue;
   }
   updated(changedProperties) {
     if (changedProperties.has("maxItems") && this._menu) {
@@ -8708,6 +9142,28 @@ let NLDDComboBox = class extends LitElement {
     if (changedProperties.has("width")) {
       this.style.width = this.width || "";
     }
+    if (changedProperties.has("value") || changedProperties.has("_displayValue")) {
+      const state2 = new FormData();
+      state2.append("value", this.value);
+      state2.append("display", this._displayValue);
+      this._internals.setFormValue(this.value, state2);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+    this._displayValue = this._initialDisplayValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (state2 instanceof FormData) {
+      this.value = String(state2.get("value") ?? "");
+      this._displayValue = String(state2.get("display") ?? "");
+    } else if (typeof state2 === "string") {
+      this.value = state2;
+      this._displayValue = state2;
+    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -8878,6 +9334,7 @@ let NLDDComboBox = class extends LitElement {
     return comboBoxTemplate(this);
   }
 };
+NLDDComboBox.formAssociated = true;
 NLDDComboBox.styles = comboBoxStyles;
 NLDDComboBox._idCounter = 0;
 __decorateClass$P([
@@ -8899,7 +9356,7 @@ __decorateClass$P([
   property({ type: Boolean, reflect: true })
 ], NLDDComboBox.prototype, "disabled", 2);
 __decorateClass$P([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDComboBox.prototype, "name", 2);
 __decorateClass$P([
   property({ type: String })
@@ -9072,14 +9529,36 @@ var __decorateClass$O = (decorators, target, key, kind) => {
 let NLDDStepper = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = 0;
     this.value = 0;
     this.min = 0;
     this.max = Infinity;
     this.step = 1;
     this.disabled = false;
     this.size = "md";
+    this.name = "";
     this.translations = {};
   }
+  firstUpdated() {
+    this._initialValue = this.value;
+  }
+  updated(changed) {
+    if (changed.has("value")) {
+      this._internals.setFormValue(String(this.value));
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (typeof state2 !== "string") return;
+    const parsed = parseFloat(state2);
+    if (!isNaN(parsed)) this.value = Math.max(this.min, Math.min(this.max, parsed));
+  }
   // — i18n —————————————————————————————————————————————————————————————————
   _t(key) {
     return this.translations[key] ?? nlddStepperTranslations[key];
@@ -9140,6 +9619,7 @@ let NLDDStepper = class extends LitElement {
     return stepperTemplate(this);
   }
 };
+NLDDStepper.formAssociated = true;
 NLDDStepper.styles = stepperStyles;
 __decorateClass$O([
   property({ type: Number })
@@ -9159,6 +9639,9 @@ __decorateClass$O([
 __decorateClass$O([
   property({ type: String, reflect: true })
 ], NLDDStepper.prototype, "size", 2);
+__decorateClass$O([
+  property({ type: String, reflect: true })
+], NLDDStepper.prototype, "name", 2);
 __decorateClass$O([
   property({ type: Object })
 ], NLDDStepper.prototype, "translations", 2);
@@ -9322,6 +9805,8 @@ var __decorateClass$N = (decorators, target, key, kind) => {
 let NLDDCheckbox = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialChecked = false;
     this.checked = false;
     this.disabled = false;
     this.indeterminate = false;
@@ -9329,6 +9814,24 @@ let NLDDCheckbox = class extends LitElement {
     this.name = "";
     this.accessibleLabel = "";
   }
+  firstUpdated() {
+    this._initialChecked = this.checked;
+  }
+  updated(changed) {
+    if (changed.has("checked") || changed.has("value")) {
+      this._internals.setFormValue(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this.indeterminate = false;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    this.checked = state2 !== null;
+  }
   toggle() {
     if (this.disabled) return;
     this.checked = !this.checked;
@@ -9353,6 +9856,7 @@ let NLDDCheckbox = class extends LitElement {
     return checkboxTemplate(this);
   }
 };
+NLDDCheckbox.formAssociated = true;
 NLDDCheckbox.styles = checkboxStyles;
 __decorateClass$N([
   property({ type: Boolean, reflect: true })
@@ -9367,7 +9871,7 @@ __decorateClass$N([
   property({ type: String })
 ], NLDDCheckbox.prototype, "value", 2);
 __decorateClass$N([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDCheckbox.prototype, "name", 2);
 __decorateClass$N([
   property({ type: String, attribute: "accessible-label" })
@@ -9657,6 +10161,8 @@ var __decorateClass$L = (decorators, target, key, kind) => {
 let NLDDRadioButton = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialChecked = false;
     this.checked = false;
     this.disabled = false;
     this.required = false;
@@ -9664,6 +10170,23 @@ let NLDDRadioButton = class extends LitElement {
     this.value = "";
     this.accessibleLabel = "";
   }
+  firstUpdated() {
+    this._initialChecked = this.checked;
+  }
+  updated(changed) {
+    if (changed.has("checked") || changed.has("value")) {
+      this._internals.setFormValue(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = this._initialChecked;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    this.checked = state2 !== null;
+  }
   select() {
     if (this.disabled || this.checked) return;
     const input = this.shadowRoot?.querySelector("input");
@@ -9684,6 +10207,7 @@ let NLDDRadioButton = class extends LitElement {
     return radioButtonTemplate(this);
   }
 };
+NLDDRadioButton.formAssociated = true;
 NLDDRadioButton.styles = radioButtonStyles;
 __decorateClass$L([
   property({ type: Boolean, reflect: true })
@@ -9695,7 +10219,7 @@ __decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], NLDDRadioButton.prototype, "required", 2);
 __decorateClass$L([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDRadioButton.prototype, "name", 2);
 __decorateClass$L([
   property({ type: String })
@@ -10179,15 +10703,33 @@ var __decorateClass$I = (decorators, target, key, kind) => {
 let NLDDSwitch = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this.name = "";
     this.checked = false;
     this.disabled = false;
     this.size = "sm";
     this.accessibleLabel = "";
     this.value = "on";
+    this._initialChecked = false;
     this._pointerStartX = null;
     this._swiped = false;
   }
   firstUpdated() {
+    this._initialChecked = this.checked;
+  }
+  updated(changed) {
+    if (changed.has("checked") || changed.has("value")) {
+      this._internals.setFormValue(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = this._initialChecked;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    this.checked = state2 !== null;
   }
   _handlePointerDown(e) {
     this._pointerStartX = e.clientX;
@@ -10250,8 +10792,12 @@ let NLDDSwitch = class extends LitElement {
     return switchTemplate(this);
   }
 };
+NLDDSwitch.formAssociated = true;
 NLDDSwitch.styles = switchStyles;
 NLDDSwitch.SWIPE_THRESHOLD = 10;
+__decorateClass$I([
+  property({ type: String, reflect: true })
+], NLDDSwitch.prototype, "name", 2);
 __decorateClass$I([
   property({ type: Boolean, reflect: true })
 ], NLDDSwitch.prototype, "checked", 2);
@@ -10716,6 +11262,9 @@ NLDDSegmentedControlItem = __decorateClass$G([
 let NLDDSegmentedControl = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialValue = "";
+    this._initialValues = [];
     this.value = "";
     this.values = [];
     this.size = "md";
@@ -10807,11 +11356,44 @@ let NLDDSegmentedControl = class extends LitElement {
   }
   firstUpdated() {
     this._syncItems();
+    this._initialValue = this.value;
+    this._initialValues = [...this.values];
+  }
+  _syncFormValue() {
+    if (this.type === "checkbox") {
+      if (this.values.length === 0 || !this.name) {
+        this._internals.setFormValue(null);
+        return;
+      }
+      const data = new FormData();
+      for (const v of this.values) data.append(this.name, v);
+      this._internals.setFormValue(data);
+    } else {
+      this._internals.setFormValue(this.value || null);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+    this.values = [...this._initialValues];
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    if (state2 === null) return;
+    if (this.type === "checkbox" && state2 instanceof FormData && this.name) {
+      this.values = state2.getAll(this.name).map(String);
+    } else if (typeof state2 === "string") {
+      this.value = state2;
+    }
   }
   updated(changedProperties) {
     if (changedProperties.has("value") || changedProperties.has("values") || changedProperties.has("size") || changedProperties.has("disabled") || changedProperties.has("type") || changedProperties.has("variant") || changedProperties.has("name")) {
       this._syncItems();
     }
+    if (changedProperties.has("value") || changedProperties.has("values") || changedProperties.has("type") || changedProperties.has("name")) {
+      this._syncFormValue();
+    }
     if (changedProperties.has("type")) {
       this.setAttribute("role", this.type === "checkbox" ? "group" : "radiogroup");
     }
@@ -10880,6 +11462,7 @@ let NLDDSegmentedControl = class extends LitElement {
     return segmentedControlTemplate(this);
   }
 };
+NLDDSegmentedControl.formAssociated = true;
 NLDDSegmentedControl.styles = segmentedControlStyles;
 NLDDSegmentedControl._idCounter = 0;
 __decorateClass$G([
@@ -10904,7 +11487,7 @@ __decorateClass$G([
   property({ type: Boolean, reflect: true, attribute: "full-width" })
 ], NLDDSegmentedControl.prototype, "fullWidth", 2);
 __decorateClass$G([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDSegmentedControl.prototype, "name", 2);
 __decorateClass$G([
   property({ type: String, attribute: "accessible-label" })
@@ -11138,6 +11721,8 @@ var __decorateClass$F = (decorators, target, key, kind) => {
 let NLDDToggleButton = class extends LitElement {
   constructor() {
     super(...arguments);
+    this._internals = this.attachInternals();
+    this._initialSelected = false;
     this.type = "button";
     this.size = "md";
     this.selected = false;
@@ -11155,13 +11740,29 @@ let NLDDToggleButton = class extends LitElement {
     const slot = this.shadowRoot?.querySelector('slot[name="icon"]');
     return (slot?.assignedElements().length ?? 0) > 0;
   }
-  updated() {
+  firstUpdated() {
+    this._initialSelected = this.selected;
+  }
+  updated(changed) {
     const iconOnly = this._hasIcon && !this.text;
     this.toggleAttribute("icon-only", iconOnly);
     const inaccessible = iconOnly && !this.accessibleLabel;
     if (!inaccessible) {
       this._warnedA11y = false;
     }
+    if (changed.has("selected") || changed.has("value") || changed.has("type")) {
+      const submits = this.type === "checkbox" || this.type === "radio";
+      this._internals.setFormValue(submits && this.selected ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.selected = this._initialSelected;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  formStateRestoreCallback(state2) {
+    this.selected = state2 !== null;
   }
   _handleButtonClick() {
     if (this.disabled) return;
@@ -11196,6 +11797,7 @@ let NLDDToggleButton = class extends LitElement {
     return toggleButtonTemplate(this);
   }
 };
+NLDDToggleButton.formAssociated = true;
 NLDDToggleButton.styles = toggleButtonStyles;
 __decorateClass$F([
   property({ type: String, reflect: true })
@@ -11213,7 +11815,7 @@ __decorateClass$F([
   property({ type: String })
 ], NLDDToggleButton.prototype, "value", 2);
 __decorateClass$F([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDToggleButton.prototype, "name", 2);
 __decorateClass$F([
   property({ type: String })
@@ -23853,7 +24455,10 @@ let NLDDModalDialog = class extends LitElement {
     });
   }
   _handleBackdropClick(e) {
-    if (e.target === this._dialog) this.hide();
+    if (e.target !== this._dialog) return;
+    const rect = this._dialog.getBoundingClientRect();
+    const insideDialog = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+    if (!insideDialog) this.hide();
   }
   _handleCancel(e) {
     e.preventDefault();
@@ -24146,6 +24751,7 @@ export {
   NLDDMenuBar,
   NLDDMenuBarItem,
   NLDDModalDialog,
+  NLDDMultiLineTextField,
   NLDDNavigationSplitView,
   NLDDNumberField,
   NLDDOneHalfOneHalfSection,