@nldd/design-system 0.8.37 → 0.8.38

package/dist/components/components.js

@@ -2,10 +2,10 @@ var _a;
 import { css, nothing, html, LitElement, unsafeCSS, svg } from "lit";
 import { property, state, customElement, query } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { computePosition, offset, flip, shift, size, autoUpdate } from "@floating-ui/dom";
-import { classMap } from "lit/directives/class-map.js";
+import { computePosition, offset, flip, shift, autoUpdate, size } from "@floating-ui/dom";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeStatic, html as html$1 } from "lit/static-html.js";
 const buttonStyles = css`
@@ -49,6 +49,7 @@ const buttonStyles = css`
 		align-items: center;
 		justify-content: center;
 		width: 100%;
+		text-wrap: pretty;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
 			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
@@ -701,14 +702,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$1a = Object.defineProperty;
+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$1a(target, key, result);
+  if (kind && result) __defProp$1d(target, key, result);
   return result;
 };
 [
@@ -755,14 +756,14 @@ __decorateClass$1f([
 NLDDIcon = __decorateClass$1f([
   customElement("nldd-icon")
 ], NLDDIcon);
-var __defProp$19 = Object.defineProperty;
+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$19(target, key, result);
+  if (kind && result) __defProp$1c(target, key, result);
   return result;
 };
 let NLDDButton = class extends LitElement {
@@ -1213,35 +1214,29 @@ const tooltipStyles = css`
 
 	.tooltip {
 		position: fixed;
-		z-index: var(--_z-index);
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: none;
 		opacity: 0;
-		pointer-events: none;
-		visibility: hidden;
 		transition:
 			opacity var(--_hide-duration) ease,
-			visibility 0ms linear var(--_hide-duration),
-			pointer-events 0ms linear var(--_hide-duration);
+			display var(--_hide-duration) allow-discrete,
+			overlay var(--_hide-duration) allow-discrete;
 	}
 
-	.tooltip.is-visible {
+	.tooltip:popover-open {
 		opacity: 1;
-		visibility: visible;
-		pointer-events: auto;
 		transition:
-			opacity var(--_show-duration) ease var(--_show-delay),
-			visibility 0ms linear,
-			pointer-events 0ms linear var(--_show-delay);
+			opacity var(--_show-duration) ease,
+			display var(--_show-duration) allow-discrete,
+			overlay var(--_show-duration) allow-discrete;
 	}
 
-	/* Focus triggers: geen show delay */
-	.tooltip.is-focus-visible {
-		opacity: 1;
-		visibility: visible;
-		pointer-events: auto;
-		transition:
-			opacity var(--_show-duration) ease,
-			visibility 0ms linear,
-			pointer-events 0ms linear;
+	@starting-style {
+		.tooltip:popover-open {
+			opacity: 0;
+		}
 	}
 
 
@@ -1285,7 +1280,8 @@ function tooltipTemplate(component) {
 			@focusin=${component._handleFocusIn}
 			@focusout=${component._handleFocusOut}
 		></slot>
-		<div class=${classMap({ tooltip: true, "is-visible": component._visible && !component._focusVisible, "is-focus-visible": component._visible && component._focusVisible })}
+		<div class="tooltip"
+			popover="manual"
 			aria-hidden="true"
 			@mouseenter=${component._handleTooltipEnter}
 			@mouseleave=${component._handleTooltipLeave}
@@ -1325,35 +1321,35 @@ function isPointerMode() {
 function isTouchMode() {
   return getInputModality() === "touch";
 }
-var __defProp$18 = Object.defineProperty;
+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$18(target, key, result);
+  if (kind && result) __defProp$1b(target, key, result);
   return result;
 };
 let tooltipCounter = 0;
 const coarsePointerQuery = matchMedia("(pointer: coarse)");
+const DEFAULT_SHOW_DELAY_MS = 700;
+const DEFAULT_HIDE_DELAY_MS = 50;
 let NLDDTooltip = class extends LitElement {
   constructor() {
     super(...arguments);
     this.text = "";
     this.placement = "bottom";
+    this.disabled = false;
     this._visible = false;
-    this._focusVisible = false;
     this._tooltipId = `nldd-tooltip-${++tooltipCounter}`;
     this._hideTimeout = null;
+    this._showTimeout = null;
     this._descriptionEl = null;
     this._currentTrigger = null;
     this._boundSlotChange = () => this._syncAriaDescribedBy();
     this._handleKeyDown = (e) => {
-      if (e.key === "Escape" && this._visible) {
-        this._visible = false;
-        this._focusVisible = false;
-      }
+      if (e.key === "Escape" && this._visible) this._visible = false;
     };
   }
   get _effectivePlacement() {
@@ -1370,12 +1366,27 @@ let NLDDTooltip = class extends LitElement {
     this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", this._boundSlotChange);
   }
   updated(changed) {
-    if (changed.has("_visible") && this._visible) {
-      this._updatePosition();
+    if (changed.has("_visible")) {
+      const tooltip = this._getTooltipElement();
+      if (tooltip) {
+        if (this._visible) {
+          if (!tooltip.matches(":popover-open")) tooltip.showPopover();
+          this._updatePosition();
+        } else if (tooltip.matches(":popover-open")) {
+          tooltip.hidePopover();
+        }
+      }
     }
-    if (changed.has("text")) {
+    if (changed.has("text") || changed.has("disabled")) {
       this._syncAriaDescribedBy();
     }
+    if (changed.has("disabled") && this.disabled) {
+      if (this._showTimeout) {
+        clearTimeout(this._showTimeout);
+        this._showTimeout = null;
+      }
+      if (this._visible) this._visible = false;
+    }
   }
   _syncAriaDescribedBy() {
     const trigger = this._getTriggerElement();
@@ -1387,7 +1398,7 @@ let NLDDTooltip = class extends LitElement {
     if (trigger.getRootNode() !== document) {
       return;
     }
-    if (this.text) {
+    if (this.text && !this.disabled) {
       if (!this._descriptionEl) {
         this._descriptionEl = document.createElement("span");
         this._descriptionEl.id = this._tooltipId;
@@ -1418,30 +1429,45 @@ let NLDDTooltip = class extends LitElement {
     return this.shadowRoot?.querySelector(".tooltip") ?? null;
   }
   _handleTriggerEnter() {
+    if (this.disabled) return;
     if (!this.text) return;
     if (coarsePointerQuery.matches) return;
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
       this._hideTimeout = null;
     }
-    this._focusVisible = false;
-    this._visible = true;
+    if (this._showTimeout) clearTimeout(this._showTimeout);
+    const parsedShow = parseInt(getComputedStyle(this).getPropertyValue("--_show-delay"), 10);
+    const showDelay = Number.isFinite(parsedShow) ? parsedShow : DEFAULT_SHOW_DELAY_MS;
+    this._showTimeout = setTimeout(() => {
+      this._showTimeout = null;
+      this._visible = true;
+    }, showDelay);
   }
   _handleFocusIn() {
+    if (this.disabled) return;
     if (!this.text) return;
     if (isTouchMode()) return;
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
       this._hideTimeout = null;
     }
-    this._focusVisible = true;
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     this._visible = true;
   }
   _handleTriggerLeave() {
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
     }
-    const hideDelay = parseInt(getComputedStyle(this).getPropertyValue("--_hide-delay"), 10);
+    const parsedHide = parseInt(getComputedStyle(this).getPropertyValue("--_hide-delay"), 10);
+    const hideDelay = Number.isFinite(parsedHide) ? parsedHide : DEFAULT_HIDE_DELAY_MS;
     this._hideTimeout = setTimeout(() => {
       this._visible = false;
       this._hideTimeout = null;
@@ -1491,6 +1517,10 @@ let NLDDTooltip = class extends LitElement {
       clearTimeout(this._hideTimeout);
       this._hideTimeout = null;
     }
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     this._currentTrigger?.removeAttribute("aria-describedby");
     this._currentTrigger = null;
     this._descriptionEl?.remove();
@@ -1508,11 +1538,11 @@ __decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDTooltip.prototype, "placement", 2);
 __decorateClass$1d([
-  state()
-], NLDDTooltip.prototype, "_visible", 2);
+  property({ type: Boolean, reflect: true })
+], NLDDTooltip.prototype, "disabled", 2);
 __decorateClass$1d([
   state()
-], NLDDTooltip.prototype, "_focusVisible", 2);
+], NLDDTooltip.prototype, "_visible", 2);
 NLDDTooltip = __decorateClass$1d([
   customElement("nldd-tooltip")
 ], NLDDTooltip);
@@ -1575,14 +1605,14 @@ function template$l() {
   }
   return renderButton();
 }
-var __defProp$17 = Object.defineProperty;
+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;
   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$1a(target, key, result);
   return result;
 };
 let NLDDIconButton = class extends LitElement {
@@ -2153,13 +2183,13 @@ function template$j() {
 		${this.icon ? html`<nldd-icon name=${this.icon}></nldd-icon>` : html`<slot></slot>`}
 	`;
 }
-var __defProp$16 = Object.defineProperty;
+var __defProp$19 = Object.defineProperty;
 var __decorateClass$1b = (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$16(target, key, result);
+  if (result) __defProp$19(target, key, result);
   return result;
 };
 function VisibilityMixin(Base) {
@@ -2203,14 +2233,14 @@ function VisibilityMixin(Base) {
   ], WithVisibility.prototype, "hideAbove");
   return WithVisibility;
 }
-var __defProp$15 = Object.defineProperty;
+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$15(target, key, result);
+  if (kind && result) __defProp$18(target, key, result);
   return result;
 };
 let NLDDIconCell = class extends VisibilityMixin(LitElement) {
@@ -2286,14 +2316,14 @@ const spacerCellStyles = css`
 		width: auto;
 	}
 `;
-var __defProp$14 = Object.defineProperty;
+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$14(target, key, result);
+  if (kind && result) __defProp$17(target, key, result);
   return result;
 };
 let NLDDSpacerCell = class extends VisibilityMixin(LitElement) {
@@ -2396,6 +2426,7 @@ const textCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
@@ -2419,6 +2450,8 @@ const textCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 
 	:host([size='md']) .text-cell__text,
@@ -2465,6 +2498,7 @@ const textCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
@@ -2525,14 +2559,14 @@ function template$i() {
 		${this.supportingText ? html`<p class="text-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
 	`;
 }
-var __defProp$13 = Object.defineProperty;
+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$13(target, key, result);
+  if (kind && result) __defProp$16(target, key, result);
   return result;
 };
 let NLDDTextCell = class extends VisibilityMixin(LitElement) {
@@ -2639,6 +2673,8 @@ const inlineDialogStyles = css`
 	:host {
 		display: flex;
 		justify-content: center;
+		align-items: center;
+		flex-grow: 1;
 
 		--_icon-color: var(--semantics-content-color);
 	}
@@ -2684,6 +2720,7 @@ const inlineDialogStyles = css`
 		font: var(--primitives-font-body-md-bold-tight);
 		color: var(--semantics-content-color);
 		text-align: center;
+		text-wrap: pretty;
 	}
 
 	.inline-dialog__text:focus-visible {
@@ -2699,6 +2736,7 @@ const inlineDialogStyles = css`
 		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--semantics-content-color);
 		text-align: center;
+		text-wrap: pretty;
 	}
 
 
@@ -2817,14 +2855,14 @@ function template$h() {
 	</div>
 	`;
 }
-var __defProp$12 = Object.defineProperty;
+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$12(target, key, result);
+  if (kind && result) __defProp$15(target, key, result);
   return result;
 };
 let NLDDButtonGroup = class extends LitElement {
@@ -2869,14 +2907,14 @@ __decorateClass$17([
 NLDDButtonGroup = __decorateClass$17([
   customElement("nldd-button-group")
 ], NLDDButtonGroup);
-var __defProp$11 = Object.defineProperty;
+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;
   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$14(target, key, result);
   return result;
 };
 let NLDDInlineDialog = class extends LitElement {
@@ -2945,13 +2983,13 @@ NLDDInlineDialog = __decorateClass$16([
   customElement("nldd-inline-dialog")
 ], NLDDInlineDialog);
 const POPOVER_REOPEN_GUARD_MS = 100;
-var __defProp$10 = Object.defineProperty;
+var __defProp$13 = Object.defineProperty;
 var __decorateClass$15 = (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$10(target, key, result);
+  if (result) __defProp$13(target, key, result);
   return result;
 };
 const _NLDDMenuDivider = class _NLDDMenuDivider extends LitElement {
@@ -3073,6 +3111,7 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     this._isEmpty = false;
     this._isOpen = false;
     this._closedAt = 0;
+    this._cleanupAutoUpdate = null;
     this._handleDocumentClick = (event) => {
       if (this.anchorElement) return;
       const anchorEl = this._getAnchorEl();
@@ -3139,6 +3178,8 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
       this._isOpen = toggleEvent.newState === "open";
       if (toggleEvent.newState !== "open") {
         this._closedAt = Date.now();
+        this._cleanupAutoUpdate?.();
+        this._cleanupAutoUpdate = null;
         return;
       }
       this._updateDividerVisibility();
@@ -3148,6 +3189,10 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
         item.menuVariant = this.variant;
       });
       await this.reposition();
+      const anchorEl = this._getAnchorEl();
+      if (anchorEl) {
+        this._cleanupAutoUpdate = autoUpdate(anchorEl, this, () => this.reposition());
+      }
       await this.updateComplete;
       if (this.variant !== "listbox") {
         const keyboard = isKeyboardMode();
@@ -3223,6 +3268,8 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     this.removeEventListener("mouseleave", this._handleMouseleave);
     this.removeEventListener("menu-item-focused", this._handleMenuItemFocused);
     document.removeEventListener("click", this._handleDocumentClick);
+    this._cleanupAutoUpdate?.();
+    this._cleanupAutoUpdate = null;
   }
   // — Internal helpers ——————————————————————————————————————————————————————
   _getVisibleItems() {
@@ -3402,14 +3449,14 @@ __decorateClass$15([
 if (!customElements.get("nldd-menu")) {
   customElements.define("nldd-menu", NLDDMenu);
 }
-var __defProp$$ = Object.defineProperty;
+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$$(target, key, result);
+  if (kind && result) __defProp$12(target, key, result);
   return result;
 };
 let NLDDSplitButton = class extends LitElement {
@@ -3648,14 +3695,14 @@ function renderChild(child) {
   }
   return html`<slot name="child-${child.id}"></slot>`;
 }
-var __defProp$_ = Object.defineProperty;
+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$_(target, key, result);
+  if (kind && result) __defProp$11(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-button-bar-divider")) {
@@ -4166,14 +4213,14 @@ function template$f(startChildren, centerChildren, endChildren, overflowIds, siz
 const nlddToolbarTranslations = {
   "components.toolbar.overflow-action": "Meer"
 };
-var __defProp$Z = Object.defineProperty;
+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$Z(target, key, result);
+  if (kind && result) __defProp$10(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-toolbar-item")) {
@@ -4781,14 +4828,14 @@ function template$e(helpers) {
 		</a>
 	`;
 }
-var __defProp$Y = Object.defineProperty;
+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$Y(target, key, result);
+  if (kind && result) __defProp$$(target, key, result);
   return result;
 };
 let NLDDLink = class extends LitElement {
@@ -4856,14 +4903,14 @@ __decorateClass$11([
 NLDDLink = __decorateClass$11([
   customElement("nldd-link")
 ], NLDDLink);
-var __defProp$X = Object.defineProperty;
+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$X(target, key, result);
+  if (kind && result) __defProp$_(target, key, result);
   return result;
 };
 let NLDDRichText = class extends LitElement {
@@ -4887,9 +4934,9 @@ const breakpoints = {
   mdMax: "1007px",
   lgMin: "1008px"
 };
-const smMax$8 = unsafeCSS(breakpoints.smMax);
-const mdMin$b = unsafeCSS(breakpoints.mdMin);
-const mdMax$2 = unsafeCSS(breakpoints.mdMax);
+const smMax$c = unsafeCSS(breakpoints.smMax);
+const mdMin$d = unsafeCSS(breakpoints.mdMin);
+const mdMax$8 = unsafeCSS(breakpoints.mdMax);
 const lgMin$a = unsafeCSS(breakpoints.lgMin);
 const titleStyles = css`
 
@@ -4930,6 +4977,7 @@ const titleStyles = css`
 
 	::slotted([slot='overline']) {
 		margin: 0;
+		overflow-wrap: anywhere;
 		color: var(--semantics-content-secondary-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
@@ -4939,15 +4987,17 @@ const titleStyles = css`
 
 	::slotted(:not([slot])) {
 		margin: 0;
+		overflow-wrap: anywhere;
 		color: var(--semantics-content-color);
+		text-wrap: pretty;
 	}
 
 	:host([size='1']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
@@ -4955,11 +5005,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-1-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
@@ -4969,11 +5019,11 @@ const titleStyles = css`
 	}
 
 	:host([size='2']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
@@ -4981,11 +5031,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-2-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
@@ -4996,11 +5046,11 @@ const titleStyles = css`
 
 	:host([size='3']) ::slotted(:not([slot])),
 	:host(:not([size])) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
@@ -5008,11 +5058,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-3-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
@@ -5022,11 +5072,11 @@ const titleStyles = css`
 	}
 
 	:host([size='4']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
@@ -5034,11 +5084,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-4-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
@@ -5048,11 +5098,11 @@ const titleStyles = css`
 	}
 
 	:host([size='5']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
@@ -5060,11 +5110,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-5-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
@@ -5074,11 +5124,11 @@ const titleStyles = css`
 	}
 
 	:host([size='6']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
@@ -5086,11 +5136,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-6-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
@@ -5104,6 +5154,7 @@ const titleStyles = css`
 
 	::slotted([slot='subtitle']) {
 		margin: 0;
+		overflow-wrap: anywhere;
 		color: var(--semantics-content-secondary-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
@@ -5133,14 +5184,14 @@ function titleTemplate() {
 		</div>
 	`;
 }
-var __defProp$W = Object.defineProperty;
+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;
   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$Z(target, key, result);
   return result;
 };
 let NLDDTitle = class extends LitElement {
@@ -5159,7 +5210,7 @@ __decorateClass$$([
 NLDDTitle = __decorateClass$$([
   customElement("nldd-title")
 ], NLDDTitle);
-const smMax$7 = unsafeCSS(breakpoints.smMax);
+const smMax$b = unsafeCSS(breakpoints.smMax);
 const blockquoteStyles = css`
 
 
@@ -5173,7 +5224,7 @@ const blockquoteStyles = css`
 		max-width: var(--semantics-blockquotes-max-width);
 	}
 
-	@media (max-width: ${smMax$7}) {
+	@media (max-width: ${smMax$b}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -5181,7 +5232,7 @@ const blockquoteStyles = css`
 		}
 	}
 
-	@container layout-area (max-width: ${smMax$7}) {
+	@container layout-area (max-width: ${smMax$b}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -5255,13 +5306,13 @@ function template$d(component) {
 		</blockquote>
 	`;
 }
-var __defProp$V = Object.defineProperty;
+var __defProp$Y = 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$V(target, key, result);
+  if (result) __defProp$Y(target, key, result);
   return result;
 };
 function withTranslations(Base, defaults) {
@@ -5296,14 +5347,14 @@ function withTranslations(Base, defaults) {
 const nlddBlockquoteTranslations = {
   "components.blockquote.attribution-prefix": "— "
 };
-var __defProp$U = Object.defineProperty;
+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$U(target, key, result);
+  if (kind && result) __defProp$X(target, key, result);
   return result;
 };
 let NLDDBlockquote = class extends withTranslations(LitElement, nlddBlockquoteTranslations) {
@@ -5458,14 +5509,14 @@ function template$c(component) {
 		</span>
 	`;
 }
-var __defProp$T = Object.defineProperty;
+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$T(target, key, result);
+  if (kind && result) __defProp$W(target, key, result);
   return result;
 };
 let NLDDTag = class extends LitElement {
@@ -5634,14 +5685,14 @@ function template$b(component) {
 		</kbd>
 	`;
 }
-var __defProp$S = Object.defineProperty;
+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$S(target, key, result);
+  if (kind && result) __defProp$V(target, key, result);
   return result;
 };
 let NLDDKeyboardShortcut = class extends LitElement {
@@ -5683,7 +5734,6 @@ const FORWARDED_ATTRIBUTES = [
   "autocomplete"
 ];
 const DESCENDANT_SELECTOR = "nldd-form-field, nldd-form-actions";
-const INHERITED_MARKER = "formAlignmentInherited";
 class NLDDForm extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -5745,45 +5795,26 @@ class NLDDForm extends HTMLElement {
   }
   /**
    * Push `label-alignment` to descendant nldd-form-field and nldd-form-actions
-   * elements that don't have an explicit own value. We track inherited
-   * assignments via a data-attribute so subsequent updates only touch the
-   * elements we previously inherited to — explicit per-element overrides
-   * are preserved.
-   *
-   * **Timing-subtleties (Lit reflect-default + MutationObserver race):**
+   * elements as a separate `form-label-alignment` attribute, defaulting to
+   * `'top'` when the form itself has no `label-alignment`. Descendant CSS
+   * uses `[label-alignment="X"]` first and falls back to
+   * `[form-label-alignment="X"]` when no own value is set, so a consumer's
+   * explicit `label-alignment` always wins automatically — without us having
+   * to track which elements we previously inherited to.
    *
-   * Lit-based descendants (nldd-form-field, nldd-form-actions) reflecten hun
-   * default `label-alignment="top"` op het attribuut wanneer hun eerste
-   * update fired. Een naïeve `hasOwn`-check zou dan elke vers gemaakte
-   * descendant als "explicit own value" zien en propagation skippen.
+   * Always-setting (rather than only when the form has its own value) lets
+   * downstream selectors assume the attribute is present on every descendant
+   * inside an `nldd-form`, which keeps form.css's adjacent-sibling tight-gap
+   * rule simple.
    *
-   * In praktijk werkt 't omdat:
-   * 1. Bij parsed HTML fires de form's connectedCallback VOORDAT children
-   *    upgraden — propagation set 'right' op het attribuut, child upgrade
-   *    leest dat als initial value (geen reflect-default-conflict).
-   * 2. Bij dynamic appendChild fires de MutationObserver na DOM-mutation
-   *    maar microtask-volgorde laat de propagation z'n attribuut zetten
-   *    voordat Lit's reflection 't kan overschrijven (Lit reflect = ook
-   *    microtask, maar de MO callback runt eerder in deze flow).
-   *
-   * Regression test: form.test.ts "propageert ook naar later toegevoegde
-   * form-actions children" verifieert deze flow. Verander deze guard
-   * niet zonder die test te draaien.
+   * The two-attribute split also avoids the historical Lit reflect-default
+   * vs MutationObserver timing race: we never touch `label-alignment` on
+   * the descendant, so a freshly upgraded Lit element reflecting its default
+   * doesn't conflict with the form's intent.
    */
   _propagateLabelAlignment(value) {
     const fields = this.querySelectorAll(DESCENDANT_SELECTOR);
-    fields.forEach((f) => {
-      const isInherited = f.dataset[INHERITED_MARKER] === "true";
-      const hasOwn = f.hasAttribute("label-alignment");
-      if (hasOwn && !isInherited) return;
-      if (value) {
-        f.setAttribute("label-alignment", value);
-        f.dataset[INHERITED_MARKER] = "true";
-      } else if (isInherited) {
-        f.removeAttribute("label-alignment");
-        delete f.dataset[INHERITED_MARKER];
-      }
-    });
+    fields.forEach((f) => f.setAttribute("form-label-alignment", value ?? "top"));
   }
   _mirrorAttributes() {
     if (!this._form) return;
@@ -5825,7 +5856,9 @@ const formActionsStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-actions,
-	:host([label-alignment='right']) .form-actions {
+	:host([label-alignment='right']) .form-actions,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-actions,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-actions {
 		@container (min-width: 641px) {
 			flex-direction: row;
 			align-items: start;
@@ -5834,7 +5867,9 @@ const formActionsStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-actions::before,
-	:host([label-alignment='right']) .form-actions::before {
+	:host([label-alignment='right']) .form-actions::before,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-actions::before,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-actions::before {
 		@container (min-width: 641px) {
 			content: '';
 			flex-grow: 0;
@@ -5863,20 +5898,20 @@ function formActionsTemplate() {
 		</div>
 	`;
 }
-var __defProp$R = Object.defineProperty;
+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$R(target, key, result);
+  if (kind && result) __defProp$U(target, key, result);
   return result;
 };
 let NLDDFormActions = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.labelAlignment = "top";
+    this.labelAlignment = void 0;
   }
   render() {
     return formActionsTemplate();
@@ -5915,7 +5950,9 @@ const formFieldStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-field,
-	:host([label-alignment='right']) .form-field {
+	:host([label-alignment='right']) .form-field,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field {
 		@container (min-width: 641px) {
 			flex-direction: row;
 			align-items: start;
@@ -5933,7 +5970,9 @@ const formFieldStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-field__header,
-	:host([label-alignment='right']) .form-field__header {
+	:host([label-alignment='right']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header {
 		@container (min-width: 641px) {
 			flex-grow: 0;
 			flex-shrink: 0;
@@ -5943,14 +5982,16 @@ const formFieldStyles = css`
 		}
 	}
 
-	:host([label-alignment='right']) .form-field__header {
+	:host([label-alignment='right']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header {
 		@container (min-width: 641px) {
 			align-items: end;
 			text-align: right;
 		}
 	}
 
-	:host([label-alignment='left']) .form-field__header {
+	:host([label-alignment='left']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header {
 		@container (min-width: 641px) {
 			align-items: start;
 			text-align: left;
@@ -5962,7 +6003,9 @@ const formFieldStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-field__header.is-empty,
-	:host([label-alignment='right']) .form-field__header.is-empty {
+	:host([label-alignment='right']) .form-field__header.is-empty,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header.is-empty,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header.is-empty {
 		@container (min-width: 641px) {
 			display: flex;
 		}
@@ -5977,10 +6020,13 @@ const formFieldStyles = css`
 		gap: var(--primitives-space-4);
 		color: var(--semantics-content-color);
 		font: var(--primitives-font-body-md-regular-tight);
+		text-wrap: pretty;
 	}
 
 	:host([label-alignment='left']) .form-field__label,
-	:host([label-alignment='right']) .form-field__label {
+	:host([label-alignment='right']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__label {
 		@container (min-width: 641px) {
 			display: flex;
 			flex-direction: column;
@@ -5988,13 +6034,15 @@ const formFieldStyles = css`
 		}
 	}
 
-	:host([label-alignment='right']) .form-field__label {
+	:host([label-alignment='right']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__label {
 		@container (min-width: 641px) {
 			align-items: end;
 		}
 	}
 
-	:host([label-alignment='left']) .form-field__label {
+	:host([label-alignment='left']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__label {
 		@container (min-width: 641px) {
 			align-items: start;
 		}
@@ -6014,6 +6062,7 @@ const formFieldStyles = css`
 	.form-field__supporting-label {
 		color: var(--semantics-content-secondary-color);
 		font: var(--primitives-font-body-xs-regular-tight);
+		text-wrap: pretty;
 	}
 
 
@@ -6187,14 +6236,14 @@ function formFieldErrorTextTemplate(_component) {
 		</p>
 	`;
 }
-var __defProp$Q = Object.defineProperty;
+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$Q(target, key, result);
+  if (kind && result) __defProp$T(target, key, result);
   return result;
 };
 const HELPER_TAGS = ["nldd-form-field-help-text", "nldd-form-field-error-text"];
@@ -6205,7 +6254,7 @@ function generateId() {
 let NLDDFormField = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.labelAlignment = "top";
+    this.labelAlignment = void 0;
     this.label = "";
     this.supportingLabel = "";
     this.optional = false;
@@ -6714,14 +6763,14 @@ function textFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$P = Object.defineProperty;
+var __defProp$S = Object.defineProperty;
 var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
 var __decorateClass$U = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(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$P(target, key, result);
+  if (kind && result) __defProp$S(target, key, result);
   return result;
 };
 let NLDDTextField = class extends LitElement {
@@ -7121,14 +7170,14 @@ function passwordFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$O = Object.defineProperty;
+var __defProp$R = Object.defineProperty;
 var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
 var __decorateClass$T = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(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$O(target, key, result);
+  if (kind && result) __defProp$R(target, key, result);
   return result;
 };
 let NLDDPasswordField = class extends LitElement {
@@ -7266,9 +7315,11 @@ const searchFieldStyles = css`
 	/* # Host */
 
 	:host {
-		display: block;
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+
+		display: block;
+		min-width: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -7485,14 +7536,14 @@ const nlddSearchFieldTranslations = {
   "components.search-field.clear-action": "Wis zoekopdracht",
   "components.search-field.search-action": "Zoek"
 };
-var __defProp$N = Object.defineProperty;
+var __defProp$Q = Object.defineProperty;
 var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
 var __decorateClass$S = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(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$N(target, key, result);
+  if (kind && result) __defProp$Q(target, key, result);
   return result;
 };
 let NLDDSearchField = class extends LitElement {
@@ -7808,14 +7859,14 @@ const nlddNumberFieldTranslations = {
   "components.number-field.increment-action": "Verhoog",
   "components.number-field.to-adjust-value-action": "Waarde aanpassen"
 };
-var __defProp$M = Object.defineProperty;
+var __defProp$P = Object.defineProperty;
 var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(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$M(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 let NLDDNumberField = class extends LitElement {
@@ -8166,14 +8217,14 @@ function dropdownTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$L = Object.defineProperty;
+var __defProp$O = Object.defineProperty;
 var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(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$L(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 let NLDDDropdown = class extends LitElement {
@@ -8537,14 +8588,14 @@ const nlddComboBoxTranslations = {
   "components.combo-box.open-menu-action": "Toon opties",
   "components.combo-box.clear-action": "Wis invoer"
 };
-var __defProp$K = Object.defineProperty;
+var __defProp$N = Object.defineProperty;
 var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
 var __decorateClass$P = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(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$K(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 let NLDDComboBox = class extends LitElement {
@@ -8970,14 +9021,14 @@ const nlddStepperTranslations = {
   "components.stepper.increment-action": "Verhoog",
   "components.stepper.to-adjust-value-action": "Aantal aanpassen"
 };
-var __defProp$J = Object.defineProperty;
+var __defProp$M = Object.defineProperty;
 var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(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$J(target, key, result);
+  if (kind && result) __defProp$M(target, key, result);
   return result;
 };
 let NLDDStepper = class extends LitElement {
@@ -9220,14 +9271,14 @@ function checkboxTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$I = Object.defineProperty;
+var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
 var __decorateClass$N = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(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$I(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 let NLDDCheckbox = class extends LitElement {
@@ -9356,14 +9407,14 @@ function checkboxFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$H = Object.defineProperty;
+var __defProp$K = Object.defineProperty;
 var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
 var __decorateClass$M = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(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$H(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 let NLDDCheckboxField = class extends LitElement {
@@ -9555,14 +9606,14 @@ function radioButtonTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$G = Object.defineProperty;
+var __defProp$J = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
 var __decorateClass$L = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(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$G(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 let NLDDRadioButton = class extends LitElement {
@@ -9687,14 +9738,14 @@ function radioButtonFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$F = Object.defineProperty;
+var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
 var __decorateClass$K = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(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$F(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 let NLDDRadioButtonField = class extends LitElement {
@@ -9775,14 +9826,14 @@ function radioButtonGroupTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$E = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
 var __decorateClass$J = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(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$E(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let NLDDRadioButtonGroup = class extends LitElement {
@@ -10077,14 +10128,14 @@ function switchTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$D = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
 var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(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$D(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let NLDDSwitch = class extends LitElement {
@@ -10251,14 +10302,14 @@ function switchFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$C = Object.defineProperty;
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
 var __decorateClass$H = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(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$C(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 let NLDDSwitchField = class extends LitElement {
@@ -10558,14 +10609,14 @@ function segmentedControlItemTemplate(component) {
   }
   return label;
 }
-var __defProp$B = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
 var __decorateClass$G = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(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$B(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let NLDDSegmentedControlItem = class extends LitElement {
@@ -11036,14 +11087,14 @@ function toggleButtonTemplate(component) {
   }
   return result;
 }
-var __defProp$A = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$F = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(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$A(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let NLDDToggleButton = class extends LitElement {
@@ -11176,14 +11227,14 @@ function toggleButtonGroupTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$z = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __decorateClass$E = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(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$C(target, key, result);
   return result;
 };
 let NLDDToggleButtonGroup = class extends LitElement {
@@ -11481,14 +11532,14 @@ function tokenTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$y = Object.defineProperty;
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
 var __decorateClass$D = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(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$y(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 let NLDDToken = class extends LitElement {
@@ -11589,21 +11640,53 @@ function appViewTemplate(_component) {
 		</div>
 	`;
 }
-var __defProp$x = Object.defineProperty;
+var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
 var __decorateClass$C = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(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$A(target, key, result);
   return result;
 };
+const _connectedStack = [];
+function _currentOwner() {
+  for (let i = _connectedStack.length - 1; i >= 0; i--) {
+    if (_connectedStack[i].isConnected) return _connectedStack[i];
+  }
+  return null;
+}
 let NLDDAppView = class extends LitElement {
   constructor() {
     super(...arguments);
     this.background = "default";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    _connectedStack.push(this);
+    this._writeBodyBackground();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const idx = _connectedStack.indexOf(this);
+    if (idx >= 0) _connectedStack.splice(idx, 1);
+    const owner = _currentOwner();
+    if (owner) {
+      owner._writeBodyBackground();
+    } else {
+      document.body.style.removeProperty("background-color");
+    }
+  }
+  updated(changed) {
+    if (changed.has("background") && _currentOwner() === this) {
+      this._writeBodyBackground();
+    }
+  }
+  _writeBodyBackground() {
+    const token = this.background === "tinted" ? "--semantics-surfaces-tinted-background-color" : "--semantics-surfaces-background-color";
+    document.body.style.backgroundColor = `var(${token})`;
+  }
   render() {
     return appViewTemplate();
   }
@@ -11615,22 +11698,19 @@ __decorateClass$C([
 NLDDAppView = __decorateClass$C([
   customElement("nldd-app-view")
 ], NLDDAppView);
-const smMax$6 = unsafeCSS(breakpoints.smMax);
 const barSplitViewStyles = css`
 
 
 	/* # Host */
 
 	:host {
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
 		background-color: var(--_background-color);
-
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
-		--context-bar-split-view-top-bars-height: 0px;
-		--context-bar-split-view-bottom-bars-height: 0px;
 	}
 
 	:host([background="default"]) {
@@ -11656,7 +11736,6 @@ const barSplitViewStyles = css`
 		flex: 1;
 		min-height: 0;
 		min-width: 0;
-		position: relative;
 	}
 
 
@@ -11668,15 +11747,6 @@ const barSplitViewStyles = css`
 		flex-shrink: 0;
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		@media (max-width: ${smMax$6}) {
-			position: absolute;
-			left: 0;
-			right: 0;
-			z-index: 2;
-		}
 	}
 
 
@@ -11696,40 +11766,6 @@ const barSplitViewStyles = css`
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		@media (max-width: ${smMax$6}) {
-			&::before {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				z-index: 1;
-				height: calc(var(--context-bar-split-view-top-bars-height) + var(--primitives-space-32));
-				background: linear-gradient(
-					to bottom,
-					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-top-bars-height),
-					transparent);
-				pointer-events: none;
-			}
-
-			&::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				z-index: 1;
-				height: calc(var(--context-bar-split-view-bottom-bars-height) + var(--primitives-space-32));
-				background: linear-gradient(
-					to top,
-					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-bottom-bars-height),
-					transparent);
-				pointer-events: none;
-			}
-		}
 	}
 
 
@@ -11832,14 +11868,14 @@ function splitViewDividerTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$w = Object.defineProperty;
+var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __decorateClass$B = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(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$z(target, key, result);
   return result;
 };
 let NLDDSplitViewDivider = class extends LitElement {
@@ -11870,13 +11906,13 @@ function barSplitViewTemplate(component) {
 			${sorted.map((el, index) => {
     const isMain = el.slot === "main";
     const isLast = index === sorted.length - 1;
-    const barStyles = !isMain && isSm ? component._smTopBars.has(el) ? { top: `${component._smOffsets.get(el) ?? 0}px` } : { bottom: `${component._smOffsets.get(el) ?? 0}px` } : {};
+    const next = sorted[index + 1];
+    const showDivider = !isSm && !isLast && !el.hasAttribute("no-divider") && !next?.hasAttribute("no-divider");
     return html`
-					<div class=${classMap({ "bar-split-view__main": isMain, "bar-split-view__bar": !isMain })}
-						style=${styleMap(barStyles)}>
+					<div class=${classMap({ "bar-split-view__main": isMain, "bar-split-view__bar": !isMain })}>
 						<slot name=${el.slot}></slot>
 					</div>
-					${!isSm && !isLast ? html`
+					${showDivider ? html`
 						<div class="bar-split-view__divider">
 							<nldd-split-view-divider orientation="horizontal"></nldd-split-view-divider>
 						</div>
@@ -11891,14 +11927,14 @@ function barSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$v = Object.defineProperty;
+var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
 var __decorateClass$A = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(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$y(target, key, result);
   return result;
 };
 const smMaxPx = parseInt(breakpoints.smMax);
@@ -11908,32 +11944,22 @@ let NLDDBarSplitView = class extends LitElement {
     super(...arguments);
     this.background = "inherit";
     this._currentBreakpoint = null;
-    this._smTopBars = /* @__PURE__ */ new Set();
-    this._smOffsets = /* @__PURE__ */ new Map();
     this._observer = null;
     this._resizeObserver = null;
-    this._childResizeObserver = null;
   }
   connectedCallback() {
     super.connectedCallback();
     this._currentBreakpoint = this._getBreakpoint(this.getBoundingClientRect().width);
-    this._observer = new MutationObserver(() => {
-      this._observeChildren();
-      this._updateLayout();
-      this.requestUpdate();
-    });
-    this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ["above", "below", "only", "sm-order", "md-order", "lg-order"], subtree: false });
+    this._observer = new MutationObserver(() => this.requestUpdate());
+    this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ["above", "below", "only", "sm-order", "md-order", "lg-order", "no-divider"], subtree: false });
     this._resizeObserver = new ResizeObserver(() => {
       const bp = this._getBreakpoint(this.getBoundingClientRect().width);
       if (bp !== this._currentBreakpoint) {
         this._currentBreakpoint = bp;
         this.requestUpdate();
       }
-      this._updateLayout();
     });
     this._resizeObserver.observe(this);
-    this._childResizeObserver = new ResizeObserver(() => this._updateLayout());
-    this._observeChildren();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -11941,8 +11967,6 @@ let NLDDBarSplitView = class extends LitElement {
     this._observer = null;
     this._resizeObserver?.disconnect();
     this._resizeObserver = null;
-    this._childResizeObserver?.disconnect();
-    this._childResizeObserver = null;
   }
   _getBreakpoint(width) {
     if (width <= smMaxPx) return "sm";
@@ -11977,48 +12001,6 @@ let NLDDBarSplitView = class extends LitElement {
       return aVal - bVal;
     });
   }
-  _observeChildren() {
-    this._childResizeObserver?.disconnect();
-    for (const child of Array.from(this.children)) {
-      this._childResizeObserver?.observe(child);
-    }
-  }
-  _updateLayout() {
-    const width = this.getBoundingClientRect().width;
-    if (width > smMaxPx) {
-      this.style.removeProperty("--context-bar-split-view-top-bars-height");
-      this.style.removeProperty("--context-bar-split-view-bottom-bars-height");
-      this._smTopBars = /* @__PURE__ */ new Set();
-      this._smOffsets = /* @__PURE__ */ new Map();
-      return;
-    }
-    const sorted = this._getSortedChildren();
-    const mainIndex = sorted.findIndex((el) => el.slot === "main");
-    const topBars = mainIndex > 0 ? sorted.slice(0, mainIndex) : [];
-    const bottomBars = mainIndex >= 0 ? sorted.slice(mainIndex + 1) : sorted;
-    this._smTopBars = new Set(topBars);
-    const newOffsets = /* @__PURE__ */ new Map();
-    let topOffset = 0;
-    for (const el of topBars) {
-      newOffsets.set(el, topOffset);
-      topOffset += el.getBoundingClientRect().height;
-    }
-    let bottomOffset = 0;
-    for (const el of [...bottomBars].reverse()) {
-      newOffsets.set(el, bottomOffset);
-      bottomOffset += el.getBoundingClientRect().height;
-    }
-    this._smOffsets = newOffsets;
-    const prevTop = this.style.getPropertyValue("--context-bar-split-view-top-bars-height");
-    const prevBottom = this.style.getPropertyValue("--context-bar-split-view-bottom-bars-height");
-    const nextTop = `${topOffset}px`;
-    const nextBottom = `${bottomOffset}px`;
-    if (prevTop !== nextTop || prevBottom !== nextBottom) {
-      this.style.setProperty("--context-bar-split-view-top-bars-height", nextTop);
-      this.style.setProperty("--context-bar-split-view-bottom-bars-height", nextBottom);
-      this.requestUpdate();
-    }
-  }
   render() {
     return barSplitViewTemplate(this);
   }
@@ -12033,7 +12015,9 @@ __decorateClass$A([
 NLDDBarSplitView = __decorateClass$A([
   customElement("nldd-bar-split-view")
 ], NLDDBarSplitView);
-const smMax$5 = unsafeCSS(breakpoints.smMax);
+const smMax$a = unsafeCSS(breakpoints.smMax);
+const mdMin$c = unsafeCSS(breakpoints.mdMin);
+const mdMax$7 = unsafeCSS(breakpoints.mdMax);
 const lgMin$9 = unsafeCSS(breakpoints.lgMin);
 const navigationSplitViewStyles = css`
 
@@ -12041,16 +12025,16 @@ const navigationSplitViewStyles = css`
 	/* # Host */
 
 	:host {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		background-color: var(--_background-color);
-
 		--_sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_secondary-sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_main-min-width: var(--primitives-area-480); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_inspector-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
+		display: flex;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
 	}
 
 	:host([background="default"]) {
@@ -12085,8 +12069,6 @@ const navigationSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_sidebar-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -12099,8 +12081,6 @@ const navigationSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_secondary-sidebar-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -12113,8 +12093,6 @@ const navigationSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_main-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -12124,6 +12102,7 @@ const navigationSplitViewStyles = css`
 	:host(.full-stack) .navigation-split-view__secondary-sidebar-pane,
 	:host(.full-stack) .navigation-split-view__main-pane {
 		min-width: 0;
+		flex: 1;
 	}
 
 
@@ -12135,17 +12114,15 @@ const navigationSplitViewStyles = css`
 	}
 
 	.navigation-split-view__inspector-pane {
+		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
+		--context-dismiss-button-display: none;
+
 		display: flex;
 		flex-direction: column;
 		flex-shrink: 0;
 		min-height: 0;
 		min-width: var(--_inspector-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
-		--context-dismiss-button-display: none;
 	}
 
 
@@ -12172,13 +12149,28 @@ const navigationSplitViewStyles = css`
 		overflow: hidden;
 		position: fixed;
 		outline: none;
-		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
-		width: var(--semantics-sheets-side-md-width);
-		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (max-width: ${smMax$a}) {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		}
+
+		@media (min-width: ${mdMin$c}) and (max-width: ${mdMax$7}) {
+			inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
+			width: var(--semantics-sheets-side-md-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
+		}
 
 		@media (min-width: ${lgMin$9}) {
+			inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
 			width: var(--semantics-sheets-side-lg-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
 		}
 
 		&:focus-visible:not(.is-pointer-focus) {
@@ -12196,11 +12188,23 @@ const navigationSplitViewStyles = css`
 		}
 
 		&[open] {
-			animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 
 		&.is-closing {
-			animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 	}
 
@@ -12236,13 +12240,28 @@ const navigationSplitViewStyles = css`
 		overflow: hidden;
 		position: fixed;
 		outline: none;
-		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
-		width: var(--semantics-sheets-side-md-width);
-		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (max-width: ${smMax$a}) {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		}
+
+		@media (min-width: ${mdMin$c}) and (max-width: ${mdMax$7}) {
+			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
+			width: var(--semantics-sheets-side-md-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
+		}
 
 		@media (min-width: ${lgMin$9}) {
+			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
 			width: var(--semantics-sheets-side-lg-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
 		}
 
 		&:focus-visible:not(.is-pointer-focus) {
@@ -12260,23 +12279,35 @@ const navigationSplitViewStyles = css`
 		}
 
 		&[open] {
-			animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 
 		&.is-closing {
-			animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 	}
 
 	.navigation-split-view__sidebar-sheet-body {
+		/* Show dismiss button inside sidebar sheet */
+		--context-dismiss-button-display: block;
+
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
-
-		/* Show dismiss button inside sidebar sheet */
-		--context-dismiss-button-display: block;
 	}
 
 
@@ -12292,42 +12323,6 @@ const navigationSplitViewStyles = css`
 		to { transform: translateY(100%); }
 	}
 
-	@media (max-width: ${smMax$5}) {
-		.navigation-split-view__inspector-sheet {
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-
-			&[open] {
-				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-
-			&.is-closing {
-				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-		}
-
-		.navigation-split-view__sidebar-sheet {
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-
-			&[open] {
-				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-
-			&.is-closing {
-				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-		}
-	}
-
 
 	/* # Reduced motion */
 
@@ -12404,14 +12399,14 @@ function navigationSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$u = Object.defineProperty;
+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$u(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 let NLDDNavigationSplitView = class extends LitElement {
@@ -12758,8 +12753,6 @@ const sideBySideSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_pane-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	.side-by-side-split-view__pane[hidden] {
@@ -12789,14 +12782,14 @@ function sideBySideSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$t = Object.defineProperty;
+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$t(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 let NLDDSideBySideSplitView = class extends LitElement {
@@ -12902,8 +12895,6 @@ const stackedSplitViewStyles = css`
 		min-height: var(--_pane-min-height);
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	.stacked-split-view__pane[hidden] {
@@ -12933,14 +12924,14 @@ function stackedSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$s = Object.defineProperty;
+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$s(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 let NLDDStackedSplitView = class extends LitElement {
@@ -12994,7 +12985,7 @@ __decorateClass$x([
 NLDDStackedSplitView = __decorateClass$x([
   customElement("nldd-stacked-split-view")
 ], NLDDStackedSplitView);
-const mdMin$a = unsafeCSS(breakpoints.mdMin);
+const mdMin$b = unsafeCSS(breakpoints.mdMin);
 const splitViewPaneStyles = css`
 
 
@@ -13007,7 +12998,7 @@ const splitViewPaneStyles = css`
 		width: 100%;
 		height: 100%;
 
-		@media (min-width: ${mdMin$a}) {
+		@media (min-width: ${mdMin$b}) {
 			background-color: var(--_background-color);
 		}
 	}
@@ -13054,14 +13045,14 @@ function splitViewPaneTemplate(_component) {
 		</div>
 	`;
 }
-var __defProp$r = Object.defineProperty;
+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$r(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 let NLDDSplitViewPane = class extends LitElement {
@@ -13071,6 +13062,11 @@ let NLDDSplitViewPane = class extends LitElement {
     this.hideBack = false;
     this.background = "inherit";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
+  }
   render() {
     return splitViewPaneTemplate();
   }
@@ -13103,8 +13099,6 @@ const pageStyles = css`
 		overflow-y: auto;
 		overflow-x: hidden;
 		background-color: var(--_background-color);
-		padding-top: var(--context-bar-split-view-top-bars-height, 0px);
-		padding-bottom: var(--context-bar-split-view-bottom-bars-height, 0px);
 	}
 
 	/* Overflow hidden prevents content from escaping the scroll wrapper.
@@ -13130,13 +13124,21 @@ const pageStyles = css`
 	}
 
 
+	/* # Block */
+
+	.page {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+	}
+
+
 	/* # Header */
 
 	.page__header {
 		flex-shrink: 0;
 		position: relative;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	:host([sticky-header]) .page__header {
@@ -13187,8 +13189,6 @@ const pageStyles = css`
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -13197,8 +13197,6 @@ const pageStyles = css`
 	.page__footer {
 		flex-shrink: 0;
 		position: relative;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	:host([sticky-footer]) .page__footer {
@@ -13221,27 +13219,29 @@ const pageStyles = css`
 `;
 function pageTemplate(component) {
   return html`
-		<header class="page__header ${component._scrolled ? "is-scrolled" : ""}">
-			<slot name="header"></slot>
-		</header>
-		<div class="page__scroll">
-			<main class="page__main">
-				<slot></slot>
-			</main>
-			<footer class="page__footer">
-				<slot name="footer"></slot>
-			</footer>
+		<div class="page">
+			<header class="page__header ${component._scrolled ? "is-scrolled" : ""}">
+				<slot name="header"></slot>
+			</header>
+			<div class="page__scroll">
+				<main class="page__main">
+					<slot></slot>
+				</main>
+				<footer class="page__footer">
+					<slot name="footer"></slot>
+				</footer>
+			</div>
 		</div>
 	`;
 }
-var __defProp$q = Object.defineProperty;
+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$q(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 let NLDDPage = class extends LitElement {
@@ -13253,10 +13253,19 @@ let NLDDPage = class extends LitElement {
     this._scrolled = false;
     this._scrollTarget = null;
     this._headerObserver = null;
+    this._mainSlot = null;
     this._onScroll = () => {
       const target = this.stickyHeader ? this._scrollEl : this;
       this._scrolled = target.scrollTop > 0;
     };
+    this._updateMainItems = () => {
+      const slot = this._mainSlot;
+      if (!slot) return;
+      const items = slot.assignedElements();
+      const visible = items.filter((el) => !el.hasAttribute("hidden"));
+      const last = visible[visible.length - 1];
+      items.forEach((el) => el.classList.toggle("is-last", el === last));
+    };
   }
   get scrollTarget() {
     return this.stickyHeader ? this._scrollEl ?? this : this;
@@ -13269,6 +13278,8 @@ let NLDDPage = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     if (this.hasUpdated) {
       this._setupScrollListener();
       if (this.stickyHeader) this._setupHeaderObserver();
@@ -13278,10 +13289,12 @@ let NLDDPage = class extends LitElement {
     super.disconnectedCallback();
     this._teardownScrollListener();
     this._teardownHeaderObserver();
+    this._teardownMainSlotListener();
   }
   firstUpdated() {
     this._setupScrollListener();
     if (this.stickyHeader) this._setupHeaderObserver();
+    this._setupMainSlotListener();
   }
   updated(changed) {
     if (changed.has("stickyHeader")) {
@@ -13324,6 +13337,25 @@ let NLDDPage = class extends LitElement {
       this._headerObserver = null;
     }
   }
+  // Mark the last visible main-slot child with `is-last`, so section-style
+  // components can grow to fill remaining vertical space without coupling
+  // to specific tag types or relying on light-DOM `:last-child` (which
+  // breaks when slot="footer" siblings are present). Same shape as
+  // nldd-list's _updateItems().
+  _setupMainSlotListener() {
+    this._teardownMainSlotListener();
+    const slot = this.shadowRoot?.querySelector("slot:not([name])") ?? null;
+    this._mainSlot = slot;
+    if (!slot) return;
+    slot.addEventListener("slotchange", this._updateMainItems);
+    this._updateMainItems();
+  }
+  _teardownMainSlotListener() {
+    if (this._mainSlot) {
+      this._mainSlot.removeEventListener("slotchange", this._updateMainItems);
+      this._mainSlot = null;
+    }
+  }
   render() {
     return pageTemplate(this);
   }
@@ -13350,7 +13382,9 @@ const page = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
     return NLDDPage;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const mdMin$9 = unsafeCSS(breakpoints.mdMin);
+const smMax$9 = unsafeCSS(breakpoints.smMax);
+const mdMin$a = unsafeCSS(breakpoints.mdMin);
+const mdMax$6 = unsafeCSS(breakpoints.mdMax);
 const lgMin$8 = unsafeCSS(breakpoints.lgMin);
 const simpleSectionStyles = css`
 
@@ -13361,6 +13395,8 @@ const simpleSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13371,13 +13407,17 @@ const simpleSectionStyles = css`
 		display: none;
 	}
 
-	:host([align="center"]) {
+	:host(:last-child),
+	:host(.is-last) {
 		flex-grow: 1;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
+
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.simple-section {
 		display: flex;
@@ -13386,10 +13426,13 @@ const simpleSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$9}) {
+		@media (max-width: ${smMax$9}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13399,7 +13442,12 @@ const simpleSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) {
+		@container layout-area (max-width: ${smMax$9}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13425,10 +13473,13 @@ const simpleSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
+
+		@media (max-width: ${smMax$9}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
 
-		@media (min-width: ${mdMin$9}) {
+		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13436,7 +13487,11 @@ const simpleSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) {
+		@container layout-area (max-width: ${smMax$9}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13460,10 +13515,6 @@ const simpleSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 	}
-
-	:host([align="center"]) .simple-section__main {
-		justify-content: center;
-	}
 `;
 function simpleSectionTemplate(component) {
   return html`
@@ -13482,17 +13533,21 @@ function simpleSectionTemplate(component) {
 		</section>
 	`;
 }
-var __defProp$p = Object.defineProperty;
+var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
 var __decorateClass$u = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(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$p(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 let NLDDSimpleSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   _onSlotChange(e) {
     const slot = e.target;
     const wrapper = slot.parentElement;
@@ -13504,8 +13559,8 @@ let NLDDSimpleSection = class extends LitElement {
 };
 NLDDSimpleSection.styles = simpleSectionStyles;
 __decorateClass$u([
-  property({ type: String, reflect: true })
-], NLDDSimpleSection.prototype, "align", 2);
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDSimpleSection.prototype, "fullWidth", 2);
 NLDDSimpleSection = __decorateClass$u([
   customElement("nldd-simple-section")
 ], NLDDSimpleSection);
@@ -13515,7 +13570,9 @@ const simpleSection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
     return NLDDSimpleSection;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const mdMin$8 = unsafeCSS(breakpoints.mdMin);
+const smMax$8 = unsafeCSS(breakpoints.smMax);
+const mdMin$9 = unsafeCSS(breakpoints.mdMin);
+const mdMax$5 = unsafeCSS(breakpoints.mdMax);
 const lgMin$7 = unsafeCSS(breakpoints.lgMin);
 const fullBleedSectionStyles = css`
 
@@ -13526,6 +13583,8 @@ const fullBleedSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13536,13 +13595,12 @@ const fullBleedSectionStyles = css`
 		display: none;
 	}
 
-	:host([align="center"]) {
-		flex-grow: 1;
+	:host([full-width]) {
+		--_max-width: none;
 	}
 
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.full-bleed-section {
 		display: flex;
@@ -13550,9 +13608,12 @@ const fullBleedSectionStyles = css`
 		flex-grow: 1;
 		width: 100%;
 		box-sizing: border-box;
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$8}) {
+		@media (max-width: ${smMax$8}) {
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
@@ -13560,7 +13621,11 @@ const fullBleedSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) {
+		@container layout-area (max-width: ${smMax$8}) {
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
@@ -13584,9 +13649,13 @@ const fullBleedSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 		width: 100%;
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin$8}) {
+		@media (max-width: ${smMax$8}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13594,7 +13663,11 @@ const fullBleedSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) {
+		@container layout-area (max-width: ${smMax$8}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13618,11 +13691,6 @@ const fullBleedSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 	}
-
-	:host([align="center"]) .full-bleed-section__main {
-		justify-content: center;
-	}
-
 `;
 function fullBleedSectionTemplate(component) {
   return html`
@@ -13641,17 +13709,21 @@ function fullBleedSectionTemplate(component) {
 		</section>
 	`;
 }
-var __defProp$o = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
 var __decorateClass$t = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(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$o(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 let NLDDFullBleedSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   _onSlotChange(e) {
     const slot = e.target;
     const wrapper = slot.parentElement;
@@ -13663,12 +13735,14 @@ let NLDDFullBleedSection = class extends LitElement {
 };
 NLDDFullBleedSection.styles = fullBleedSectionStyles;
 __decorateClass$t([
-  property({ type: String, reflect: true })
-], NLDDFullBleedSection.prototype, "align", 2);
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDFullBleedSection.prototype, "fullWidth", 2);
 NLDDFullBleedSection = __decorateClass$t([
   customElement("nldd-full-bleed-section")
 ], NLDDFullBleedSection);
-const mdMin$7 = unsafeCSS(breakpoints.mdMin);
+const smMax$7 = unsafeCSS(breakpoints.smMax);
+const mdMin$8 = unsafeCSS(breakpoints.mdMin);
+const mdMax$4 = unsafeCSS(breakpoints.mdMax);
 const lgMin$6 = unsafeCSS(breakpoints.lgMin);
 const oneThirdTwoThirdsSectionStyles = css`
 
@@ -13679,6 +13753,8 @@ const oneThirdTwoThirdsSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13689,9 +13765,12 @@ const oneThirdTwoThirdsSectionStyles = css`
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
+
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.one-third-two-thirds-section {
 		display: flex;
@@ -13699,10 +13778,13 @@ const oneThirdTwoThirdsSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$7}) {
+		@media (max-width: ${smMax$7}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13712,7 +13794,12 @@ const oneThirdTwoThirdsSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) {
+		@container layout-area (max-width: ${smMax$7}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13730,10 +13817,13 @@ const oneThirdTwoThirdsSectionStyles = css`
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin$7}) {
+		@media (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13741,7 +13831,11 @@ const oneThirdTwoThirdsSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) {
+		@container layout-area (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13756,9 +13850,12 @@ const oneThirdTwoThirdsSectionStyles = css`
 	.one-third-two-thirds-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin$7}) {
+		@media (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13766,7 +13863,11 @@ const oneThirdTwoThirdsSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) {
+		@container layout-area (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13804,24 +13905,35 @@ function oneThirdTwoThirdsSectionTemplate(_component) {
 		</section>
 	`;
 }
+var __defProp$q = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
 var __decorateClass$s = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 let NLDDOneThirdTwoThirdsSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   render() {
     return oneThirdTwoThirdsSectionTemplate();
   }
 };
 NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles;
+__decorateClass$s([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDOneThirdTwoThirdsSection.prototype, "fullWidth", 2);
 NLDDOneThirdTwoThirdsSection = __decorateClass$s([
   customElement("nldd-one-third-two-thirds-section")
 ], NLDDOneThirdTwoThirdsSection);
-const mdMin$6 = unsafeCSS(breakpoints.mdMin);
+const smMax$6 = unsafeCSS(breakpoints.smMax);
+const mdMin$7 = unsafeCSS(breakpoints.mdMin);
+const mdMax$3 = unsafeCSS(breakpoints.mdMax);
 const lgMin$5 = unsafeCSS(breakpoints.lgMin);
 const twoThirdsOneThirdSectionStyles = css`
 
@@ -13832,6 +13944,8 @@ const twoThirdsOneThirdSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13842,9 +13956,12 @@ const twoThirdsOneThirdSectionStyles = css`
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+
+	/* # Block */
 
 	.two-thirds-one-third-section {
 		display: flex;
@@ -13852,10 +13969,13 @@ const twoThirdsOneThirdSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$6}) {
+		@media (max-width: ${smMax$6}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13865,7 +13985,12 @@ const twoThirdsOneThirdSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) {
+		@container layout-area (max-width: ${smMax$6}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13883,10 +14008,13 @@ const twoThirdsOneThirdSectionStyles = css`
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
+
+		@media (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
 
-		@media (min-width: ${mdMin$6}) {
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13894,7 +14022,11 @@ const twoThirdsOneThirdSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) {
+		@container layout-area (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13909,9 +14041,12 @@ const twoThirdsOneThirdSectionStyles = css`
 	.two-thirds-one-third-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin$6}) {
+		@media (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13919,7 +14054,11 @@ const twoThirdsOneThirdSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) {
+		@container layout-area (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13937,7 +14076,6 @@ const twoThirdsOneThirdSectionStyles = css`
 		flex: 1;
 		min-width: var(--primitives-area-280);
 	}
-
 `;
 function twoThirdsOneThirdSectionTemplate(_component) {
   return html`
@@ -13958,24 +14096,35 @@ function twoThirdsOneThirdSectionTemplate(_component) {
 		</section>
 	`;
 }
+var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
 var __decorateClass$r = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 let NLDDTwoThirdsOneThirdSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   render() {
     return twoThirdsOneThirdSectionTemplate();
   }
 };
 NLDDTwoThirdsOneThirdSection.styles = twoThirdsOneThirdSectionStyles;
+__decorateClass$r([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDTwoThirdsOneThirdSection.prototype, "fullWidth", 2);
 NLDDTwoThirdsOneThirdSection = __decorateClass$r([
   customElement("nldd-two-thirds-one-third-section")
 ], NLDDTwoThirdsOneThirdSection);
-const mdMin$5 = unsafeCSS(breakpoints.mdMin);
+const smMax$5 = unsafeCSS(breakpoints.smMax);
+const mdMin$6 = unsafeCSS(breakpoints.mdMin);
+const mdMax$2 = unsafeCSS(breakpoints.mdMax);
 const lgMin$4 = unsafeCSS(breakpoints.lgMin);
 const oneHalfOneHalfSectionStyles = css`
 
@@ -13986,6 +14135,8 @@ const oneHalfOneHalfSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13996,9 +14147,12 @@ const oneHalfOneHalfSectionStyles = css`
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
+
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.one-half-one-half-section {
 		display: flex;
@@ -14006,10 +14160,13 @@ const oneHalfOneHalfSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (max-width: ${smMax$5}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -14019,7 +14176,12 @@ const oneHalfOneHalfSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$5}) {
+		@container layout-area (max-width: ${smMax$5}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -14037,10 +14199,13 @@ const oneHalfOneHalfSectionStyles = css`
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14048,7 +14213,11 @@ const oneHalfOneHalfSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$5}) {
+		@container layout-area (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14063,9 +14232,12 @@ const oneHalfOneHalfSectionStyles = css`
 	.one-half-one-half-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14073,7 +14245,11 @@ const oneHalfOneHalfSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$5}) {
+		@container layout-area (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14111,20 +14287,29 @@ function oneHalfOneHalfSectionTemplate(_component) {
 		</section>
 	`;
 }
+var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
 var __decorateClass$q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 let NLDDOneHalfOneHalfSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   render() {
     return oneHalfOneHalfSectionTemplate();
   }
 };
 NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
+__decorateClass$q([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDOneHalfOneHalfSection.prototype, "fullWidth", 2);
 NLDDOneHalfOneHalfSection = __decorateClass$q([
   customElement("nldd-one-half-one-half-section")
 ], NLDDOneHalfOneHalfSection);
@@ -14200,8 +14385,6 @@ const cardStyles = css`
 		border-radius: var(--components-card-corner-radius);
 		box-shadow: var(--components-card-box-shadow);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -14280,6 +14463,11 @@ let NLDDCard = class extends LitElement {
       wrapper.hidden = slot.assignedElements().length === 0;
     };
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
+  }
   render() {
     return cardTemplate(this);
   }
@@ -14291,7 +14479,7 @@ __decorateClass$o([
 NLDDCard = __decorateClass$o([
   customElement("nldd-card")
 ], NLDDCard);
-const mdMin$4 = unsafeCSS(breakpoints.mdMin);
+const mdMin$5 = unsafeCSS(breakpoints.mdMin);
 const lgMin$3 = unsafeCSS(breakpoints.lgMin);
 const collectionStyles = css`
 
@@ -14306,7 +14494,7 @@ const collectionStyles = css`
 		gap: var(--components-collection-sm-gap);
 		--_item-width: var(--primitives-area-280);
 
-		@media (min-width: ${mdMin$4}) {
+		@media (min-width: ${mdMin$5}) {
 			gap: var(--components-collection-md-gap);
 		}
 
@@ -14327,7 +14515,7 @@ const collectionStyles = css`
 		width: 100%;
 		gap: var(--components-collection-sm-gap);
 
-		@media (min-width: ${mdMin$4}) {
+		@media (min-width: ${mdMin$5}) {
 			gap: var(--components-collection-md-gap);
 		}
 
@@ -14810,7 +14998,7 @@ NLDDSpacer = __decorateClass$m([
   customElement("nldd-spacer")
 ], NLDDSpacer);
 const smMax$4 = unsafeCSS(breakpoints.smMax);
-const mdMin$3 = unsafeCSS(breakpoints.mdMin);
+const mdMin$4 = unsafeCSS(breakpoints.mdMin);
 const mdMax$1 = unsafeCSS(breakpoints.mdMax);
 const lgMin$2 = unsafeCSS(breakpoints.lgMin);
 const containerStyles = css`
@@ -14882,25 +15070,25 @@ const containerStyles = css`
 
 	/* # Padding — md viewport */
 
-	:host([md-padding="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: 0; } }
-	:host([md-padding="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
-	:host([md-padding="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
-	:host([md-padding="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
-	:host([md-padding="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
-	:host([md-padding="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
-	:host([md-padding="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
-	:host([md-padding="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
-	:host([md-padding="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
-	:host([md-padding="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
-	:host([md-padding="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
-	:host([md-padding="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
-	:host([md-padding="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
-	:host([md-padding="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
-	:host([md-padding="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
-	:host([md-padding="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
-	:host([md-padding="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
-	:host([md-padding="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
-	:host([md-padding="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
+	:host([md-padding="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: 0; } }
+	:host([md-padding="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
+	:host([md-padding="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
+	:host([md-padding="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
+	:host([md-padding="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
+	:host([md-padding="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
+	:host([md-padding="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
+	:host([md-padding="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
+	:host([md-padding="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
+	:host([md-padding="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
+	:host([md-padding="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
+	:host([md-padding="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
+	:host([md-padding="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
+	:host([md-padding="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
+	:host([md-padding="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
+	:host([md-padding="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
+	:host([md-padding="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
+	:host([md-padding="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
+	:host([md-padding="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding — lg viewport */
@@ -14951,25 +15139,25 @@ const containerStyles = css`
 
 	/* # Padding — md container */
 
-	:host([layout-area-md-padding="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: 0; } }
-	:host([layout-area-md-padding="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
-	:host([layout-area-md-padding="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
-	:host([layout-area-md-padding="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
-	:host([layout-area-md-padding="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
-	:host([layout-area-md-padding="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
-	:host([layout-area-md-padding="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
-	:host([layout-area-md-padding="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
-	:host([layout-area-md-padding="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
-	:host([layout-area-md-padding="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
-	:host([layout-area-md-padding="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
-	:host([layout-area-md-padding="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
-	:host([layout-area-md-padding="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
-	:host([layout-area-md-padding="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
-	:host([layout-area-md-padding="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
-	:host([layout-area-md-padding="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
-	:host([layout-area-md-padding="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
-	:host([layout-area-md-padding="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
-	:host([layout-area-md-padding="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
+	:host([layout-area-md-padding="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: 0; } }
+	:host([layout-area-md-padding="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
+	:host([layout-area-md-padding="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
+	:host([layout-area-md-padding="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
+	:host([layout-area-md-padding="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
+	:host([layout-area-md-padding="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
+	:host([layout-area-md-padding="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
+	:host([layout-area-md-padding="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
+	:host([layout-area-md-padding="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
+	:host([layout-area-md-padding="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
+	:host([layout-area-md-padding="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
+	:host([layout-area-md-padding="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
+	:host([layout-area-md-padding="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
+	:host([layout-area-md-padding="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
+	:host([layout-area-md-padding="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
+	:host([layout-area-md-padding="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
+	:host([layout-area-md-padding="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
+	:host([layout-area-md-padding="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
+	:host([layout-area-md-padding="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding — lg container */
@@ -15043,25 +15231,25 @@ const containerStyles = css`
 
 	/* # Padding Inline — md viewport */
 
-	:host([md-padding-inline="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
-	:host([md-padding-inline="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
-	:host([md-padding-inline="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
-	:host([md-padding-inline="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
-	:host([md-padding-inline="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
-	:host([md-padding-inline="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
-	:host([md-padding-inline="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
-	:host([md-padding-inline="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
-	:host([md-padding-inline="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
-	:host([md-padding-inline="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
-	:host([md-padding-inline="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
-	:host([md-padding-inline="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
-	:host([md-padding-inline="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
-	:host([md-padding-inline="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
-	:host([md-padding-inline="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
-	:host([md-padding-inline="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
-	:host([md-padding-inline="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
-	:host([md-padding-inline="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
-	:host([md-padding-inline="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
+	:host([md-padding-inline="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
+	:host([md-padding-inline="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
+	:host([md-padding-inline="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
+	:host([md-padding-inline="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
+	:host([md-padding-inline="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
+	:host([md-padding-inline="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
+	:host([md-padding-inline="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
+	:host([md-padding-inline="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
+	:host([md-padding-inline="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
+	:host([md-padding-inline="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
+	:host([md-padding-inline="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
+	:host([md-padding-inline="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
+	:host([md-padding-inline="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
+	:host([md-padding-inline="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
+	:host([md-padding-inline="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
+	:host([md-padding-inline="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
+	:host([md-padding-inline="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
+	:host([md-padding-inline="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
+	:host([md-padding-inline="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — lg viewport */
@@ -15112,25 +15300,25 @@ const containerStyles = css`
 
 	/* # Padding Inline — md container */
 
-	:host([layout-area-md-padding-inline="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
-	:host([layout-area-md-padding-inline="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-inline="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-inline="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-inline="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-inline="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-inline="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-inline="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-inline="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-inline="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-inline="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-inline="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-inline="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-inline="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-inline="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-inline="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-inline="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-inline="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-inline="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-inline="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
+	:host([layout-area-md-padding-inline="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-inline="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-inline="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-inline="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-inline="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-inline="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-inline="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-inline="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-inline="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-inline="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-inline="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-inline="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-inline="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-inline="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-inline="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-inline="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-inline="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-inline="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — lg container */
@@ -15204,25 +15392,25 @@ const containerStyles = css`
 
 	/* # Padding Block — md viewport */
 
-	:host([md-padding-block="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
-	:host([md-padding-block="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
-	:host([md-padding-block="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
-	:host([md-padding-block="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
-	:host([md-padding-block="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
-	:host([md-padding-block="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
-	:host([md-padding-block="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
-	:host([md-padding-block="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
-	:host([md-padding-block="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
-	:host([md-padding-block="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
-	:host([md-padding-block="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
-	:host([md-padding-block="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
-	:host([md-padding-block="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
-	:host([md-padding-block="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
-	:host([md-padding-block="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
-	:host([md-padding-block="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
-	:host([md-padding-block="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
-	:host([md-padding-block="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
-	:host([md-padding-block="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
+	:host([md-padding-block="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
+	:host([md-padding-block="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
+	:host([md-padding-block="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
+	:host([md-padding-block="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
+	:host([md-padding-block="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
+	:host([md-padding-block="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
+	:host([md-padding-block="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
+	:host([md-padding-block="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
+	:host([md-padding-block="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
+	:host([md-padding-block="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
+	:host([md-padding-block="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
+	:host([md-padding-block="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
+	:host([md-padding-block="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
+	:host([md-padding-block="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
+	:host([md-padding-block="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
+	:host([md-padding-block="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
+	:host([md-padding-block="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
+	:host([md-padding-block="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
+	:host([md-padding-block="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — lg viewport */
@@ -15273,25 +15461,25 @@ const containerStyles = css`
 
 	/* # Padding Block — md container */
 
-	:host([layout-area-md-padding-block="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
-	:host([layout-area-md-padding-block="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-block="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-block="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-block="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-block="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-block="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-block="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-block="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-block="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-block="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-block="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-block="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-block="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-block="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-block="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-block="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-block="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-block="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-block="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
+	:host([layout-area-md-padding-block="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-block="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-block="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-block="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-block="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-block="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-block="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-block="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-block="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-block="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-block="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-block="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-block="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-block="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-block="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-block="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-block="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-block="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — lg container */
@@ -15365,25 +15553,25 @@ const containerStyles = css`
 
 	/* # Padding Top — md viewport */
 
-	:host([md-padding-top="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
-	:host([md-padding-top="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
-	:host([md-padding-top="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
-	:host([md-padding-top="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
-	:host([md-padding-top="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
-	:host([md-padding-top="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
-	:host([md-padding-top="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
-	:host([md-padding-top="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
-	:host([md-padding-top="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
-	:host([md-padding-top="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
-	:host([md-padding-top="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
-	:host([md-padding-top="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
-	:host([md-padding-top="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
-	:host([md-padding-top="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
-	:host([md-padding-top="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
-	:host([md-padding-top="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
-	:host([md-padding-top="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
-	:host([md-padding-top="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
-	:host([md-padding-top="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
+	:host([md-padding-top="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
+	:host([md-padding-top="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
+	:host([md-padding-top="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
+	:host([md-padding-top="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
+	:host([md-padding-top="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
+	:host([md-padding-top="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
+	:host([md-padding-top="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
+	:host([md-padding-top="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
+	:host([md-padding-top="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
+	:host([md-padding-top="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
+	:host([md-padding-top="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
+	:host([md-padding-top="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
+	:host([md-padding-top="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
+	:host([md-padding-top="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
+	:host([md-padding-top="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
+	:host([md-padding-top="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
+	:host([md-padding-top="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
+	:host([md-padding-top="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
+	:host([md-padding-top="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — lg viewport */
@@ -15434,25 +15622,25 @@ const containerStyles = css`
 
 	/* # Padding Top — md container */
 
-	:host([layout-area-md-padding-top="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
-	:host([layout-area-md-padding-top="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-top="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-top="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-top="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-top="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-top="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-top="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-top="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-top="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-top="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-top="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-top="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-top="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-top="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-top="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-top="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-top="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-top="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-top="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
+	:host([layout-area-md-padding-top="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-top="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-top="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-top="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-top="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-top="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-top="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-top="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-top="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-top="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-top="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-top="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-top="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-top="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-top="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-top="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-top="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-top="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — lg container */
@@ -15526,25 +15714,25 @@ const containerStyles = css`
 
 	/* # Padding Right — md viewport */
 
-	:host([md-padding-right="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
-	:host([md-padding-right="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
-	:host([md-padding-right="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
-	:host([md-padding-right="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
-	:host([md-padding-right="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
-	:host([md-padding-right="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
-	:host([md-padding-right="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
-	:host([md-padding-right="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
-	:host([md-padding-right="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
-	:host([md-padding-right="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
-	:host([md-padding-right="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
-	:host([md-padding-right="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
-	:host([md-padding-right="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
-	:host([md-padding-right="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
-	:host([md-padding-right="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
-	:host([md-padding-right="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
-	:host([md-padding-right="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
-	:host([md-padding-right="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
-	:host([md-padding-right="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
+	:host([md-padding-right="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
+	:host([md-padding-right="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
+	:host([md-padding-right="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
+	:host([md-padding-right="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
+	:host([md-padding-right="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
+	:host([md-padding-right="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
+	:host([md-padding-right="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
+	:host([md-padding-right="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
+	:host([md-padding-right="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
+	:host([md-padding-right="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
+	:host([md-padding-right="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
+	:host([md-padding-right="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
+	:host([md-padding-right="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
+	:host([md-padding-right="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
+	:host([md-padding-right="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
+	:host([md-padding-right="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
+	:host([md-padding-right="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
+	:host([md-padding-right="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
+	:host([md-padding-right="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — lg viewport */
@@ -15595,25 +15783,25 @@ const containerStyles = css`
 
 	/* # Padding Right — md container */
 
-	:host([layout-area-md-padding-right="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
-	:host([layout-area-md-padding-right="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-right="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-right="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-right="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-right="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-right="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-right="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-right="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-right="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-right="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-right="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-right="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-right="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-right="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-right="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-right="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-right="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-right="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-right="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
+	:host([layout-area-md-padding-right="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-right="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-right="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-right="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-right="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-right="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-right="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-right="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-right="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-right="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-right="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-right="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-right="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-right="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-right="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-right="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-right="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-right="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — lg container */
@@ -15687,25 +15875,25 @@ const containerStyles = css`
 
 	/* # Padding Bottom — md viewport */
 
-	:host([md-padding-bottom="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
-	:host([md-padding-bottom="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
-	:host([md-padding-bottom="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
-	:host([md-padding-bottom="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
-	:host([md-padding-bottom="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
-	:host([md-padding-bottom="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
-	:host([md-padding-bottom="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
-	:host([md-padding-bottom="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
-	:host([md-padding-bottom="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
-	:host([md-padding-bottom="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
-	:host([md-padding-bottom="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
-	:host([md-padding-bottom="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
-	:host([md-padding-bottom="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
-	:host([md-padding-bottom="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
-	:host([md-padding-bottom="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
-	:host([md-padding-bottom="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
-	:host([md-padding-bottom="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
-	:host([md-padding-bottom="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
-	:host([md-padding-bottom="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
+	:host([md-padding-bottom="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
+	:host([md-padding-bottom="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
+	:host([md-padding-bottom="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
+	:host([md-padding-bottom="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
+	:host([md-padding-bottom="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
+	:host([md-padding-bottom="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
+	:host([md-padding-bottom="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
+	:host([md-padding-bottom="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
+	:host([md-padding-bottom="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
+	:host([md-padding-bottom="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
+	:host([md-padding-bottom="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
+	:host([md-padding-bottom="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
+	:host([md-padding-bottom="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
+	:host([md-padding-bottom="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
+	:host([md-padding-bottom="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
+	:host([md-padding-bottom="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
+	:host([md-padding-bottom="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
+	:host([md-padding-bottom="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
+	:host([md-padding-bottom="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — lg viewport */
@@ -15756,25 +15944,25 @@ const containerStyles = css`
 
 	/* # Padding Bottom — md container */
 
-	:host([layout-area-md-padding-bottom="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
-	:host([layout-area-md-padding-bottom="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-bottom="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-bottom="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-bottom="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-bottom="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-bottom="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-bottom="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-bottom="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-bottom="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-bottom="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-bottom="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-bottom="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-bottom="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-bottom="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-bottom="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-bottom="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-bottom="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-bottom="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-bottom="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
+	:host([layout-area-md-padding-bottom="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-bottom="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-bottom="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-bottom="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-bottom="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-bottom="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-bottom="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-bottom="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-bottom="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-bottom="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-bottom="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-bottom="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-bottom="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-bottom="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-bottom="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-bottom="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-bottom="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-bottom="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — lg container */
@@ -15848,25 +16036,25 @@ const containerStyles = css`
 
 	/* # Padding Left — md viewport */
 
-	:host([md-padding-left="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
-	:host([md-padding-left="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
-	:host([md-padding-left="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
-	:host([md-padding-left="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
-	:host([md-padding-left="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
-	:host([md-padding-left="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
-	:host([md-padding-left="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
-	:host([md-padding-left="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
-	:host([md-padding-left="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
-	:host([md-padding-left="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
-	:host([md-padding-left="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
-	:host([md-padding-left="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
-	:host([md-padding-left="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
-	:host([md-padding-left="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
-	:host([md-padding-left="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
-	:host([md-padding-left="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
-	:host([md-padding-left="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
-	:host([md-padding-left="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
-	:host([md-padding-left="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
+	:host([md-padding-left="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
+	:host([md-padding-left="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
+	:host([md-padding-left="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
+	:host([md-padding-left="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
+	:host([md-padding-left="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
+	:host([md-padding-left="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
+	:host([md-padding-left="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
+	:host([md-padding-left="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
+	:host([md-padding-left="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
+	:host([md-padding-left="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
+	:host([md-padding-left="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
+	:host([md-padding-left="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
+	:host([md-padding-left="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
+	:host([md-padding-left="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
+	:host([md-padding-left="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
+	:host([md-padding-left="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
+	:host([md-padding-left="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
+	:host([md-padding-left="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
+	:host([md-padding-left="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — lg viewport */
@@ -15917,25 +16105,25 @@ const containerStyles = css`
 
 	/* # Padding Left — md container */
 
-	:host([layout-area-md-padding-left="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
-	:host([layout-area-md-padding-left="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-left="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-left="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-left="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-left="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-left="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-left="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-left="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-left="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-left="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-left="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-left="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-left="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-left="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-left="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-left="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-left="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-left="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-left="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
+	:host([layout-area-md-padding-left="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-left="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-left="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-left="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-left="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-left="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-left="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-left="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-left="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-left="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-left="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-left="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-left="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-left="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-left="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-left="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-left="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-left="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — lg container */
@@ -16239,6 +16427,7 @@ NLDDDivider = __decorateClass$k([
   customElement("nldd-divider")
 ], NLDDDivider);
 const smMax$3 = unsafeCSS(breakpoints.smMax);
+const mdMin$3 = unsafeCSS(breakpoints.mdMin);
 const popoverStyles = css`
 
 
@@ -16246,20 +16435,38 @@ const popoverStyles = css`
 
 	:host {
 		--_max-height: calc(100vh - var(--semantics-overlays-inset) * 2);
-		position: absolute;
-		inset: unset;
+
 		margin: 0;
 		padding: 0;
 		border: none;
 		background-color: var(--semantics-surfaces-background-color);
-		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		width: var(--components-popover-default-width);
-		max-width: calc(100vw - var(--semantics-overlays-inset) * 2);
-		max-height: var(--_max-height);
 		overflow: auto;
 		outline: none;
 		isolation: isolate;
+
+		@media (max-width: ${smMax$3}) {
+			position: fixed;
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+			transform: translateY(100%);
+			transition:
+				transform var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default),
+				display var(--semantics-sheets-bottom-animation-duration) allow-discrete,
+				overlay var(--semantics-sheets-bottom-animation-duration) allow-discrete;
+		}
+
+		@media (min-width: ${mdMin$3}) {
+			position: absolute;
+			inset: unset;
+			border-radius: var(--semantics-overlays-corner-radius);
+			width: var(--components-popover-default-width);
+			max-width: calc(100vw - var(--semantics-overlays-inset) * 2);
+			max-height: var(--_max-height);
+		}
 	}
 
 	:host([hidden]) {
@@ -16277,33 +16484,26 @@ const popoverStyles = css`
 	}
 
 
-	/* # Responsive: sm viewport — bottom sheet */
-
-	@media (max-width: ${smMax$3}) {
-		:host {
-			position: fixed;
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-			transform: translateY(100%);
-			transition:
-				transform var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default),
-				display var(--semantics-sheets-bottom-animation-duration) allow-discrete,
-				overlay var(--semantics-sheets-bottom-animation-duration) allow-discrete;
-		}
-
-		:host(:popover-open) {
+	:host(:popover-open) {
+		@media (max-width: ${smMax$3}) {
 			transform: translateY(0);
-		}
 
-		@starting-style {
-			:host(:popover-open) {
+			@starting-style {
 				transform: translateY(100%);
 			}
 		}
+	}
 
+	:host::backdrop {
+		@media (max-width: ${smMax$3}) {
+			background-color: var(--semantics-overlays-backdrop-color);
+		}
+	}
+
+	:host([sm-full-height]) {
+		@media (max-width: ${smMax$3}) {
+			height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+		}
 	}
 
 
@@ -16313,8 +16513,8 @@ const popoverStyles = css`
 	   toekomstige desktop-viewport animaties automatisch worden
 	   gedeactiveerd voor users met prefers-reduced-motion. */
 
-	@media (prefers-reduced-motion: reduce) {
-		:host {
+	:host {
+		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
 	}
@@ -16341,6 +16541,12 @@ let NLDDPopover = class extends LitElement {
     this.anchor = "";
     this.anchorElement = null;
     this.placement = "bottom-start";
+    this.top = void 0;
+    this.left = void 0;
+    this.right = void 0;
+    this.bottom = void 0;
+    this.centered = false;
+    this.smFullHeight = false;
     this.accessibleLabel = "";
     this.translations = {};
     this._isOpen = false;
@@ -16349,9 +16555,14 @@ let NLDDPopover = class extends LitElement {
     this._closedAt = 0;
     this._cleanupAutoUpdate = null;
     this._smQuery = null;
+    this._wasOnSm = false;
     this._previousAnchorEl = null;
     this._handleViewportChange = () => {
-      if (this._isOpen) this.reposition();
+      if (this._isOpen) {
+        this.reposition();
+      } else {
+        this._wasOnSm = this._smQuery?.matches ?? false;
+      }
     };
     this._handleDocumentClick = (event) => {
       const anchorEl = this._getAnchorEl();
@@ -16405,6 +16616,8 @@ let NLDDPopover = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     if (!this.hasAttribute("popover")) this.setAttribute("popover", "");
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
     if (!this.hasAttribute("role")) this.setAttribute("role", "dialog");
@@ -16412,6 +16625,7 @@ let NLDDPopover = class extends LitElement {
     this.addEventListener("keydown", this._handleKeydown);
     document.addEventListener("click", this._handleDocumentClick);
     this._smQuery = window.matchMedia(`(max-width: ${breakpoints.smMax})`);
+    this._wasOnSm = this._smQuery.matches;
     this._smQuery.addEventListener("change", this._handleViewportChange);
     Promise.resolve().then(() => {
       this._updateAnchorAria(false);
@@ -16451,6 +16665,13 @@ let NLDDPopover = class extends LitElement {
     if (changed.has("anchor") || changed.has("anchorElement")) {
       this._updateAnchorAria(this._isOpen);
     }
+    if (changed.has("top") || changed.has("left") || changed.has("right") || changed.has("bottom") || changed.has("centered")) {
+      if (!this.top && !this.centered) this.style.removeProperty("top");
+      if (!this.left && !this.centered) this.style.removeProperty("left");
+      if (!this.right) this.style.removeProperty("right");
+      if (!this.bottom) this.style.removeProperty("bottom");
+      if (this._isOpen) this.reposition();
+    }
   }
   // — i18n ——————————————————————————————————————————————————————————————————
   _t(key) {
@@ -16479,13 +16700,53 @@ let NLDDPopover = class extends LitElement {
     if (this._isOpen) this.hide();
     else this.show();
   }
+  /**
+   * Restore the inline transition after a breakpoint-suppressed tick. Force
+   * a layout flush first (`void offsetHeight`) so the just-applied position
+   * styles commit before transitions resume — otherwise the cleared
+   * `transition: ''` would re-enable animations on those exact properties
+   * and you'd still see the slide we were trying to suppress.
+   */
+  _restoreTransition() {
+    void this.offsetHeight;
+    this.style.transition = "";
+  }
   /** Herberekent positie t.o.v. anchor. Wordt automatisch aangeroepen bij openen. */
   async reposition() {
     if (!this._isOpen) return;
-    if (this._smQuery?.matches) {
-      this.style.removeProperty("left");
+    const isSm = this._smQuery?.matches ?? false;
+    const crossedBreakpoint = isSm !== this._wasOnSm;
+    this._wasOnSm = isSm;
+    if (crossedBreakpoint) this.style.transition = "none";
+    if (isSm) {
       this.style.removeProperty("top");
+      this.style.removeProperty("left");
+      this.style.removeProperty("right");
+      this.style.removeProperty("bottom");
+      this.style.removeProperty("transform");
       this.style.removeProperty("--_max-height");
+      if (crossedBreakpoint) this._restoreTransition();
+      return;
+    }
+    const hasOverride = this.top || this.left || this.right || this.bottom || this.centered;
+    if (hasOverride) {
+      const yCenter = this.centered && !this.top && !this.bottom;
+      const xCenter = this.centered && !this.left && !this.right;
+      if (this.top) this.style.setProperty("top", this.top);
+      else if (yCenter) this.style.setProperty("top", "50%");
+      if (this.bottom) this.style.setProperty("bottom", this.bottom);
+      if (this.left) this.style.setProperty("left", this.left);
+      else if (xCenter) this.style.setProperty("left", "50%");
+      if (this.right) this.style.setProperty("right", this.right);
+      if (xCenter || yCenter) {
+        this.style.setProperty(
+          "transform",
+          `translate(${xCenter ? "-50%" : "0"}, ${yCenter ? "-50%" : "0"})`
+        );
+      } else {
+        this.style.removeProperty("transform");
+      }
+      if (crossedBreakpoint) this._restoreTransition();
       return;
     }
     const anchorEl = this._getAnchorEl();
@@ -16508,6 +16769,7 @@ let NLDDPopover = class extends LitElement {
       left: `${x}px`,
       top: `${y}px`
     });
+    if (crossedBreakpoint) this._restoreTransition();
   }
   // — Anchor ————————————————————————————————————————————————————————————————
   _getAnchorEl() {
@@ -16594,6 +16856,24 @@ __decorateClass$j([
 __decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDPopover.prototype, "width", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "top", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "left", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "right", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "bottom", 2);
+__decorateClass$j([
+  property({ type: Boolean, reflect: true })
+], NLDDPopover.prototype, "centered", 2);
+__decorateClass$j([
+  property({ type: Boolean, reflect: true, attribute: "sm-full-height" })
+], NLDDPopover.prototype, "smFullHeight", 2);
 __decorateClass$j([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDPopover.prototype, "accessibleLabel", 2);
@@ -16868,6 +17148,8 @@ let NLDDSheet = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     this.addEventListener("dismiss", this._handleDismiss);
   }
   disconnectedCallback() {
@@ -17084,6 +17366,7 @@ let NLDDWindow = class extends LitElement {
     this.movable = false;
     this.accessibleLabel = "";
     this.translations = {};
+    this.centered = false;
     this._closing = false;
     this._dragging = false;
     this._dragOffsetX = 0;
@@ -17198,6 +17481,8 @@ let NLDDWindow = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     this.addEventListener("dismiss", this._handleDismiss);
     this._detectDragHandle();
     window.addEventListener("resize", this._handleResize);
@@ -17265,14 +17550,18 @@ let NLDDWindow = class extends LitElement {
       dialog.style.height = this.height ?? "";
       return;
     }
-    const hasPosition = this.top !== void 0 || this.left !== void 0 || this.right !== void 0 || this.bottom !== void 0;
-    dialog.style.top = this.top ?? (this.bottom !== void 0 ? "auto" : "");
+    const hasEdge = this.top !== void 0 || this.left !== void 0 || this.right !== void 0 || this.bottom !== void 0;
+    const hasOverride = hasEdge || this.centered;
+    const yCenter = this.centered && this.top === void 0 && this.bottom === void 0;
+    const xCenter = this.centered && this.left === void 0 && this.right === void 0;
+    dialog.style.top = this.top ?? (yCenter ? "50%" : this.bottom !== void 0 ? "auto" : "");
     dialog.style.bottom = this.bottom ?? (this.top !== void 0 ? "auto" : "");
-    dialog.style.left = this.left ?? (this.right !== void 0 ? "auto" : "");
+    dialog.style.left = this.left ?? (xCenter ? "50%" : this.right !== void 0 ? "auto" : "");
     dialog.style.right = this.right ?? (this.left !== void 0 ? "auto" : "");
     dialog.style.width = this.width ?? "";
     dialog.style.height = this.height ?? "";
-    dialog.style.margin = hasPosition ? "0" : "";
+    dialog.style.transform = xCenter || yCenter ? `translate(${xCenter ? "-50%" : "0"}, ${yCenter ? "-50%" : "0"})` : "";
+    dialog.style.margin = hasOverride ? "0" : "";
   }
   _findDragHandle(e) {
     const handle = this.querySelector("[window-drag-handle]");
@@ -17353,6 +17642,9 @@ __decorateClass$h([
 __decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDWindow.prototype, "bottom", 2);
+__decorateClass$h([
+  property({ type: Boolean, reflect: true })
+], NLDDWindow.prototype, "centered", 2);
 __decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDWindow.prototype, "width", 2);
@@ -18624,6 +18916,7 @@ const titleCellStyles = css`
 		align-self: stretch;
 		min-width: 0;
 		color: var(--context-cell-content-color, var(--semantics-content-color));
+		text-wrap: pretty;
 	}
 
 	:host([horizontal-alignment='right']) .title-cell__title {
@@ -21088,6 +21381,7 @@ let NLDDTopTitleBar = class extends LitElement {
     this._pageElement = null;
     this._anchorElement = null;
     this._activeScrollTarget = null;
+    this._scrollTargetStyleObserver = null;
     this._boundOnScroll = this._onScroll.bind(this);
     this._onToolbarSlotChange = (e) => {
       const slot = e.target;
@@ -21134,12 +21428,21 @@ let NLDDTopTitleBar = class extends LitElement {
     const page2 = this._pageElement;
     this._activeScrollTarget = page2 ? page2.scrollTarget : window;
     this._activeScrollTarget.addEventListener("scroll", this._boundOnScroll, { passive: true });
+    if (this._activeScrollTarget instanceof Element) {
+      this._scrollTargetStyleObserver = new MutationObserver(() => this._onScroll());
+      this._scrollTargetStyleObserver.observe(this._activeScrollTarget, {
+        attributes: true,
+        attributeFilter: ["style"]
+      });
+    }
     this.updateComplete.then(() => this._onScroll());
   }
   _teardownAnchor() {
     this._activeScrollTarget?.removeEventListener("scroll", this._boundOnScroll);
     this._activeScrollTarget = null;
     this._anchorElement = null;
+    this._scrollTargetStyleObserver?.disconnect();
+    this._scrollTargetStyleObserver = null;
   }
   _onScroll() {
     if (!this._anchorElement || !this._pageElement) return;
@@ -22182,10 +22485,8 @@ function documentTabBarItemTemplate(component) {
 			${component.supportingText ? html`<span class="document-tab-bar__item-supporting-text">${component.supportingText}</span>` : nothing}
 		</span>
 		<span class="document-tab-bar__item-short">
-			<nldd-tooltip text=${tooltipText}>
-				<span class="document-tab-bar__item-short-text">${shortTextValue}</span>
-				${shortSupportingTextValue ? html`<span class="document-tab-bar__item-short-supporting-text">${shortSupportingTextValue}</span>` : nothing}
-			</nldd-tooltip>
+			<span class="document-tab-bar__item-short-text">${shortTextValue}</span>
+			${shortSupportingTextValue ? html`<span class="document-tab-bar__item-short-supporting-text">${shortSupportingTextValue}</span>` : nothing}
 		</span>
 	`;
   const tab = isLink ? html`<a class="document-tab-bar__item-tab"
@@ -22205,18 +22506,20 @@ function documentTabBarItemTemplate(component) {
 				@click=${component._handleClick}
 			>${tabContent}</button>`;
   return html`
-		<div class="document-tab-bar__item">
-			${tab}
-			<button class="document-tab-bar__item-dismiss-button"
-				aria-label=${component._dismissButtonAccessibilityLabel}
-				tabindex=${component.selected || component._isFallbackFocusable ? "0" : "-1"}
-				@click=${component._handleDismiss}
-			>
-				<span class="document-tab-bar__item-dismiss-icon">
-					<nldd-icon name="dismiss"></nldd-icon>
-				</span>
-			</button>
-		</div>
+		<nldd-tooltip text=${tooltipText} ?disabled=${!component._isShort}>
+			<div class="document-tab-bar__item">
+				${tab}
+				<button class="document-tab-bar__item-dismiss-button"
+					aria-label=${component._dismissButtonAccessibilityLabel}
+					tabindex=${component.selected || component._isFallbackFocusable ? "0" : "-1"}
+					@click=${component._handleDismiss}
+				>
+					<span class="document-tab-bar__item-dismiss-icon">
+						<nldd-icon name="dismiss"></nldd-icon>
+					</span>
+				</button>
+			</div>
+		</nldd-tooltip>
 	`;
 }
 const nlddDocumentTabBarTranslations = {
@@ -22247,6 +22550,8 @@ let NLDDDocumentTabBarItem = class extends LitElement {
     this.shortText = "";
     this.shortSupportingText = "";
     this.href = "";
+    this._isShort = false;
+    this._itemResizeObserver = null;
     this._dismissButtonAccessibilityLabel = "Sluit";
     this._isFallbackFocusable = false;
     this._navigation = false;
@@ -22254,6 +22559,17 @@ let NLDDDocumentTabBarItem = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "none");
+    this._itemResizeObserver = new ResizeObserver(() => this._updateIsShort());
+    this._itemResizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._itemResizeObserver?.disconnect();
+    this._itemResizeObserver = null;
+  }
+  _updateIsShort() {
+    const threshold = parseFloat(getComputedStyle(this).getPropertyValue("--_short-text-threshold"));
+    this._isShort = Number.isFinite(threshold) && this.getBoundingClientRect().width < threshold;
   }
   focus(options) {
     this.shadowRoot?.querySelector(".document-tab-bar__item-tab")?.focus(options);
@@ -22297,6 +22613,9 @@ __decorateClass$3([
 __decorateClass$3([
   property({ type: String })
 ], NLDDDocumentTabBarItem.prototype, "href", 2);
+__decorateClass$3([
+  state()
+], NLDDDocumentTabBarItem.prototype, "_isShort", 2);
 __decorateClass$3([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_dismissButtonAccessibilityLabel", 2);