@nldd/design-system 0.8.42 → 0.8.43

package/dist/components/{index-CJ3mdHHo.js → index-By2jYHEw.js}

@@ -14,11 +14,23 @@ const buttonStyles = css`
 	/* # Host */
 
 	:host {
+		--_width: auto;
+		--_disclosure-icon-size: var(--primitives-space-20);
+
 		display: inline-block;
+		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([full-width]) {
+	:host([size="sm"]) {
+		--_disclosure-icon-size: var(--primitives-space-18);
+	}
+
+	:host([size="xs"]) {
+		--_disclosure-icon-size: var(--primitives-space-16);
+	}
+
+	:host([width="full"]) {
 		display: block;
 		width: 100%;
 		flex-grow: 1;
@@ -48,7 +60,8 @@ const buttonStyles = css`
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
+		width: var(--_width);
+		max-width: 100%;
 		text-wrap: pretty;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
@@ -119,7 +132,9 @@ const buttonStyles = css`
 
 	/* # Variants */
 
-	/* ## Variant: Neutral Tintend (Secondary, Default) */
+	/* ## Neutral Tintend (Secondary, Default) */
+
+	/* ### Default neutral tinted button */
 
 	:host([variant="neutral-tinted"]) .button,
 	:host([variant="secondary"]) .button,
@@ -128,6 +143,8 @@ const buttonStyles = css`
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 	}
 
+	/* ### Hovered neutral tinted button */
+
 	@media (hover: hover) {
 		:host([variant="neutral-tinted"]) .button:hover,
 		:host([variant="secondary"]) .button:hover,
@@ -137,6 +154,8 @@ const buttonStyles = css`
 		}
 	}
 
+	/* ### Active neutral tinted button */
+
 	:host([variant="neutral-tinted"]) .button:active,
 	:host([variant="secondary"]) .button:active,
 	:host(:not([variant])) .button:active {
@@ -144,24 +163,61 @@ const buttonStyles = css`
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
-	/* ## Variant: Neutral Transparent */
+	/* ### Open neutral tinted button */
+
+	:host([expanded][variant="neutral-tinted"]) .button,
+	:host([expanded][variant="secondary"]) .button,
+	:host([expanded]:not([variant])) .button {
+		background-color: var(--semantics-buttons-neutral-tinted-is-open-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-content-color);
+	}
+
+	/* ### Open hovered neutral tinted button */
+
+	@media (hover: hover) {
+		:host([expanded][variant="neutral-tinted"]) .button:hover,
+		:host([expanded][variant="secondary"]) .button:hover,
+		:host([expanded]:not([variant])) .button:hover {
+			background-color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color);
+			color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color);
+		}
+	}
+
+	/* ### Open active neutral tinted button */
+
+	:host([expanded][variant="neutral-tinted"]) .button:active,
+	:host([expanded][variant="secondary"]) .button:active,
+	:host([expanded]:not([variant])) .button:active {
+		background-color: var(--semantics-buttons-neutral-tinted-is-open-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-is-active-content-color);
+	}
+
+	/* ## Neutral Transparent */
+
+	/* ### Default neutral transparent button */
 
 	:host([variant="neutral-transparent"]) .button {
 		background-color: transparent;
 		color: var(--semantics-buttons-neutral-transparent-content-color);
 	}
 
+	/* ### Hovered neutral transparent button */
+
 	@media (hover: hover) {
 		:host([variant="neutral-transparent"]) .button:hover {
 			color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
 		}
 	}
 
+	/* ### Active neutral transparent button */
+
 	:host([variant="neutral-transparent"]) .button:active {
 		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: Accent Filled (Primary) */
+	/* ## Accent Filled (Primary) */
+
+	/* ### Default accent filled button */
 
 	:host([variant="accent-filled"]) .button,
 	:host([variant="primary"]) .button {
@@ -169,6 +225,8 @@ const buttonStyles = css`
 		color: var(--semantics-buttons-accent-filled-content-color);
 	}
 
+	/* ### Hovered accent filled button */
+
 	@media (hover: hover) {
 		:host([variant="accent-filled"]) .button:hover,
 		:host([variant="primary"]) .button:hover {
@@ -177,71 +235,66 @@ const buttonStyles = css`
 		}
 	}
 
+	/* ### Active accent filled button */
+
 	:host([variant="accent-filled"]) .button:active,
 	:host([variant="primary"]) .button:active {
 		background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
 		color: var(--semantics-buttons-accent-filled-is-active-content-color);
 	}
 
-	/* ## Variant: Accent Outlined */
+	/* ### Open accent filled button */
 
-	:host([variant="accent-outlined"]) .button {
-		background-color: transparent;
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-		color: var(--semantics-buttons-accent-outlined-content-color);
-		border-width: var(--semantics-buttons-accent-outlined-border-thickness);
-		border-style: solid;
-		border-color: var(--semantics-buttons-accent-outlined-border-color);
-	}
-
-	:host([variant="accent-outlined"][size="md"]) .button {
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant="accent-outlined"][size="sm"]) .button {
-		padding:
-			calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness))
-			calc(var(--primitives-space-10) - var(--semantics-buttons-accent-outlined-border-thickness))
-		;
+	:host([expanded][variant="accent-filled"]) .button,
+	:host([expanded][variant="primary"]) .button {
+		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-content-color);
 	}
 
-	:host([variant="accent-outlined"][size="xs"]) .button {
-		padding:
-			calc(var(--primitives-space-4) - var(--semantics-buttons-accent-outlined-border-thickness))
-			calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness))
-		;
-	}
+	/* ### Open hovered accent filled button */
 
 	@media (hover: hover) {
-		:host([variant="accent-outlined"]) .button:hover {
-			color: var(--semantics-buttons-accent-outlined-is-hovered-content-color);
-			border-color: var(--semantics-buttons-accent-outlined-is-hovered-border-color);
+		:host([expanded][variant="accent-filled"]) .button:hover,
+		:host([expanded][variant="primary"]) .button:hover {
+			background-color: var(--semantics-buttons-accent-filled-is-open-is-hovered-background-color);
+			color: var(--semantics-buttons-accent-filled-is-open-is-hovered-content-color);
 		}
 	}
 
-	:host([variant="accent-outlined"]) .button:active {
-		color: var(--semantics-buttons-accent-outlined-is-active-content-color);
-		border-color: var(--semantics-buttons-accent-outlined-is-active-border-color);
+	/* ### Open active accent filled button */
+
+	:host([expanded][variant="accent-filled"]) .button:active,
+	:host([expanded][variant="primary"]) .button:active {
+		background-color: var(--semantics-buttons-accent-filled-is-open-is-active-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-is-active-content-color);
 	}
 
-	/* ## Variant: Accent Transparent */
+	/* ## Accent Transparent */
+
+	/* ### Default accent transparent button */
 
 	:host([variant="accent-transparent"]) .button {
 		background-color: transparent;
 		color: var(--semantics-buttons-accent-transparent-content-color);
 	}
 
+	/* ### Hovered accent transparent button */
+
 	@media (hover: hover) {
 		:host([variant="accent-transparent"]) .button:hover {
 			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
 		}
 	}
 
+	/* ### Active accent transparent button */
+
 	:host([variant="accent-transparent"]) .button:active {
 		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: Critical Tinted */
+	/* ## Critical Tinted */
+
+	/* ### Default critical tinted button */
 
 	:host([variant="critical-tinted"]) .button,
 	:host([variant="destructive"]) .button {
@@ -249,6 +302,8 @@ const buttonStyles = css`
 		color: var(--semantics-buttons-critical-tinted-content-color);
 	}
 
+	/* ### Hovered critical tinted button */
+
 	@media (hover: hover) {
 		:host([variant="critical-tinted"]) .button:hover,
 		:host([variant="destructive"]) .button:hover {
@@ -257,12 +312,37 @@ const buttonStyles = css`
 		}
 	}
 
+	/* ### Active critical tinted button */
+
 	:host([variant="critical-tinted"]) .button:active,
 	:host([variant="destructive"]) .button:active {
 		background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
 		color: var(--semantics-buttons-critical-tinted-is-active-content-color);
 	}
 
+	/* ## Critical Transparent */
+
+	/* ### Default critical transparent button */
+
+	:host([variant="critical-transparent"]) .button {
+		background-color: transparent;
+		color: var(--semantics-buttons-critical-transparent-content-color);
+	}
+
+	/* ### Hovered critical transparent button */
+
+	@media (hover: hover) {
+		:host([variant="critical-transparent"]) .button:hover {
+			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		}
+	}
+
+	/* ### Active critical transparent button */
+
+	:host([variant="critical-transparent"]) .button:active {
+		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
 	/* ## Elements */
 
 	.button__content {
@@ -273,6 +353,16 @@ const buttonStyles = css`
 		display: none;
 	}
 
+	.button__text {
+		min-width: 0;
+	}
+
+	:host([single-line]) .button__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	.button__start-icon,
 	.button__end-icon {
 		display: block;
@@ -283,45 +373,41 @@ const buttonStyles = css`
 	:host(:not([size])) .button__start-icon,
 	:host([size="md"]) .button__end-icon,
 	:host(:not([size])) .button__end-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+		width: var(--semantics-buttons-md-icon-size);
+		height: var(--semantics-buttons-md-icon-size);
 	}
 
 	:host([size="sm"]) .button__start-icon,
 	:host([size="sm"]) .button__end-icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
+		width: var(--semantics-buttons-sm-icon-size);
+		height: var(--semantics-buttons-sm-icon-size);
 	}
 
 	:host([size="xs"]) .button__start-icon,
 	:host([size="xs"]) .button__end-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+		width: var(--semantics-buttons-xs-icon-size);
+		height: var(--semantics-buttons-xs-icon-size);
 	}
 
 	.button__disclosure-icon {
 		display: block;
 		flex-shrink: 0;
+		width: var(--_disclosure-icon-size);
+		height: var(--_disclosure-icon-size);
 	}
 
 	:host([size="md"]) .button__disclosure-icon,
 	:host(:not([size])) .button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
 		margin-left: -2px;
 		margin-right: -2px;
 	}
 
 	:host([size="sm"]) .button__disclosure-icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
 		margin-left: -1px;
 		margin-right: -2px;
 	}
 
 	:host([size="xs"]) .button__disclosure-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
 		margin-left: -1px;
 		margin-right: -2px;
 	}
@@ -334,7 +420,7 @@ function renderContent$1(component) {
 					name=${component.startIcon}
 				></nldd-icon>
 			` : html`<slot name="start-icon"></slot>`}
-			${component.text}
+			<span class="button__text">${component.text}</span>
 			${component.endIcon ? html`
 				<nldd-icon class="button__end-icon"
 					name=${component.endIcon}
@@ -350,6 +436,8 @@ function renderContent$1(component) {
 }
 function template$n(helpers) {
   const content = renderContent$1(this);
+  const isDisclosure = this.expandable || !!this.popupType;
+  const ariaExpanded = isDisclosure ? String(this.expanded) : this.expanded ? "true" : nothing;
   if (this.href) {
     const resolvedRel = this._resolvedRel();
     return html`
@@ -359,6 +447,8 @@ function template$n(helpers) {
 				rel=${resolvedRel || nothing}
 				aria-disabled=${this.disabled ? "true" : nothing}
 				aria-label=${this.accessibleLabel || nothing}
+				aria-haspopup=${this.popupType || nothing}
+				aria-expanded=${ariaExpanded}
 				@click=${helpers.handleClick}
 			>
 				${content}
@@ -371,6 +461,8 @@ function template$n(helpers) {
 			?disabled=${this.disabled}
 			aria-disabled=${this.disabled ? "true" : nothing}
 			aria-label=${this.accessibleLabel || nothing}
+			aria-haspopup=${this.popupType || nothing}
+			aria-expanded=${ariaExpanded}
 			popovertarget=${this.popovertarget || nothing}
 			@click=${helpers.handleClick}
 		>
@@ -830,12 +922,14 @@ let NLDDButton = class extends LitElement {
     super(...arguments);
     this.variant = "neutral-tinted";
     this.size = "md";
-    this.fullWidth = false;
+    this.width = "";
     this.expandable = false;
+    this.expanded = false;
     this.type = "button";
     this.popovertarget = void 0;
     this.disabled = false;
     this.text = "";
+    this.singleLine = false;
     this.startIcon = "";
     this.endIcon = "";
     this.accessibleLabel = "";
@@ -844,7 +938,18 @@ let NLDDButton = class extends LitElement {
     this.rel = void 0;
     this._warnedA11y = false;
   }
-  updated() {
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      const isFull = w === "full";
+      const isValidLength = !!w && !isFull && CSS.supports("width", w);
+      this.style.width = isValidLength ? w : "";
+      if (isFull || isValidLength) {
+        this.style.setProperty("--_width", "100%");
+      } else {
+        this.style.removeProperty("--_width");
+      }
+    }
     const isEmpty = !this.text && !this.accessibleLabel;
     if (!isEmpty) {
       this._warnedA11y = false;
@@ -884,11 +989,17 @@ __decorateClass$1h([
   property({ type: String, reflect: true })
 ], NLDDButton.prototype, "size", 2);
 __decorateClass$1h([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDButton.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDButton.prototype, "width", 2);
 __decorateClass$1h([
   property({ type: Boolean, reflect: true, attribute: "expandable" })
 ], NLDDButton.prototype, "expandable", 2);
+__decorateClass$1h([
+  property({ type: Boolean, reflect: true })
+], NLDDButton.prototype, "expanded", 2);
+__decorateClass$1h([
+  property({ type: String, reflect: true, attribute: "popup-type" })
+], NLDDButton.prototype, "popupType", 2);
 __decorateClass$1h([
   property({ type: String, reflect: true })
 ], NLDDButton.prototype, "type", 2);
@@ -901,6 +1012,9 @@ __decorateClass$1h([
 __decorateClass$1h([
   property({ type: String })
 ], NLDDButton.prototype, "text", 2);
+__decorateClass$1h([
+  property({ type: Boolean, reflect: true, attribute: "single-line" })
+], NLDDButton.prototype, "singleLine", 2);
 __decorateClass$1h([
   property({ type: String, attribute: "start-icon" })
 ], NLDDButton.prototype, "startIcon", 2);
@@ -928,11 +1042,19 @@ const iconButtonStyles = css`
 	/* # Host */
 
 	:host {
+		--_width: auto;
+		--_disclosure-icon-size: var(--primitives-space-20);
+
 		display: inline-block;
+		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([full-width]) {
+	:host([size='xs']) {
+		--_disclosure-icon-size: var(--primitives-space-16);
+	}
+
+	:host([width="full"]) {
 		display: block;
 		width: 100%;
 		flex-grow: 1;
@@ -958,13 +1080,20 @@ const iconButtonStyles = css`
 		background: none;
 		font: inherit;
 		box-sizing: border-box;
+		text-decoration: none;
 		display: inline-flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		width: var(--_width);
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
-			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
+		;
+	}
+
+	a.icon-button {
+		cursor: var(--semantics-controls-link-cursor);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -973,10 +1102,6 @@ const iconButtonStyles = css`
 		}
 	}
 
-	a.icon-button {
-		cursor: var(--semantics-controls-link-cursor);
-	}
-
 
 	/* # Focus */
 
@@ -996,75 +1121,37 @@ const iconButtonStyles = css`
 	/* ## Size: XS */
 
 	:host([size='xs']) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-xs-min-size);
 		min-width: var(--semantics-controls-xs-min-size);
 		min-height: var(--semantics-controls-xs-min-size);
-		padding: var(--primitives-space-4);
+		padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-icon-only-icon-size)) / 2);
 		border-radius: var(--semantics-controls-xs-corner-radius);
 	}
 
-	:host([size='xs']) .icon-button__icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
-
-	:host([size='xs']) .icon-button__disclosure-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
-
 	/* ## Size: SM */
 
 	:host([size='sm']) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-sm-min-size);
 		min-width: var(--semantics-controls-sm-min-size);
 		min-height: var(--semantics-controls-sm-min-size);
-		padding: var(--primitives-space-6);
+		padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-icon-only-icon-size)) / 2);
 		border-radius: var(--semantics-controls-sm-corner-radius);
 	}
 
-	:host([size='sm']) .icon-button__icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-	}
-
-	:host([size='sm']) .icon-button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		margin-right: calc(var(--primitives-space-2) * -1);
-	}
-
 	/* ## Size: MD (Default) */
 
 	:host([size='md']) .icon-button,
 	:host(:not([size])) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-md-min-size);
 		min-width: var(--semantics-controls-md-min-size);
 		min-height: var(--semantics-controls-md-min-size);
-		padding: var(--primitives-space-8);
+		padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-icon-only-icon-size)) / 2);
 		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
-	:host([size='md']) .icon-button__icon,
-	:host(:not([size])) .icon-button__icon {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
-
-	:host([size='md']) .icon-button__disclosure-icon,
-	:host(:not([size])) .icon-button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		margin-right: calc(var(--primitives-space-2) * -1);
-	}
-
 	/* ## Size: LG */
 
 	:host([size='lg']) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-lg-min-size);
 		min-width: var(--semantics-controls-lg-min-size);
 		min-height: var(--semantics-controls-lg-min-size);
@@ -1072,25 +1159,11 @@ const iconButtonStyles = css`
 		border-radius: var(--semantics-controls-lg-corner-radius);
 	}
 
-	:host([size='lg']) .icon-button__icon {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
-
-	:host([size='lg']) .icon-button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		margin-right: calc(var(--primitives-space-2) * -1);
-	}
-
-	:host([full-width]) .icon-button {
-		width: 100%;
-	}
-
-
 	/* # Variants */
 
-	/* ## Variant: neutral-tinted (secondary, default) */
+	/* ## Neutral Tinted (Secondary, Default) */
+
+	/* ### Default neutral tinted icon button */
 
 	:host([variant='neutral-tinted']) .icon-button,
 	:host([variant='secondary']) .icon-button,
@@ -1099,6 +1172,8 @@ const iconButtonStyles = css`
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 	}
 
+	/* ### Hovered neutral tinted icon button */
+
 	@media (hover: hover) {
 		:host([variant='neutral-tinted']) .icon-button:hover,
 		:host([variant='secondary']) .icon-button:hover,
@@ -1108,6 +1183,8 @@ const iconButtonStyles = css`
 		}
 	}
 
+	/* ### Active neutral tinted icon button */
+
 	:host([variant='neutral-tinted']) .icon-button:active,
 	:host([variant='secondary']) .icon-button:active,
 	:host(:not([variant])) .icon-button:active {
@@ -1115,13 +1192,46 @@ const iconButtonStyles = css`
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
-	/* ## Variant: neutral-transparent */
+	/* ### Open neutral tinted icon button */
+
+	:host([expanded][variant='neutral-tinted']) .icon-button,
+	:host([expanded][variant='secondary']) .icon-button,
+	:host([expanded]:not([variant])) .icon-button {
+		background-color: var(--semantics-buttons-neutral-tinted-is-open-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-content-color);
+	}
+
+	/* ### Open hovered neutral tinted icon button */
+
+	@media (hover: hover) {
+		:host([expanded][variant='neutral-tinted']) .icon-button:hover,
+		:host([expanded][variant='secondary']) .icon-button:hover,
+		:host([expanded]:not([variant])) .icon-button:hover {
+			background-color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color);
+			color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color);
+		}
+	}
+
+	/* ### Open active neutral tinted icon button */
+
+	:host([expanded][variant='neutral-tinted']) .icon-button:active,
+	:host([expanded][variant='secondary']) .icon-button:active,
+	:host([expanded]:not([variant])) .icon-button:active {
+		background-color: var(--semantics-buttons-neutral-tinted-is-open-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-is-active-content-color);
+	}
+
+	/* ## Neutral Transparent */
+
+	/* ### Default neutral transparent icon button */
 
 	:host([variant='neutral-transparent']) .icon-button {
 		background-color: transparent;
 		color: var(--semantics-buttons-neutral-transparent-content-color);
 	}
 
+	/* ### Hovered neutral transparent icon button */
+
 	@media (hover: hover) {
 		:host([variant='neutral-transparent']) .icon-button:hover {
 			background-color: transparent;
@@ -1129,11 +1239,15 @@ const iconButtonStyles = css`
 		}
 	}
 
+	/* ### Active neutral transparent icon button */
+
 	:host([variant='neutral-transparent']) .icon-button:active {
 		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: accent-filled (primary) */
+	/* ## Accent Filled (Primary) */
+
+	/* ### Default accent filled icon button */
 
 	:host([variant='accent-filled']) .icon-button,
 	:host([variant='primary']) .icon-button {
@@ -1141,6 +1255,8 @@ const iconButtonStyles = css`
 		color: var(--semantics-buttons-accent-filled-content-color);
 	}
 
+	/* ### Hovered accent filled icon button */
+
 	@media (hover: hover) {
 		:host([variant='accent-filled']) .icon-button:hover,
 		:host([variant='primary']) .icon-button:hover {
@@ -1149,68 +1265,66 @@ const iconButtonStyles = css`
 		}
 	}
 
+	/* ### Active accent filled icon button */
+
 	:host([variant='accent-filled']) .icon-button:active,
 	:host([variant='primary']) .icon-button:active {
 		background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
 		color: var(--semantics-buttons-accent-filled-is-active-content-color);
 	}
 
-	/* ## Variant: accent-outlined */
+	/* ### Open accent filled icon button */
 
-	:host([variant='accent-outlined']) .icon-button {
-		background-color: transparent;
-		border-width: var(--semantics-buttons-accent-outlined-border-thickness);
-		border-style: solid;
-		border-color: var(--semantics-buttons-accent-outlined-border-color);
-		color: var(--semantics-buttons-accent-outlined-content-color);
+	:host([expanded][variant='accent-filled']) .icon-button,
+	:host([expanded][variant='primary']) .icon-button {
+		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-content-color);
 	}
 
-	:host([variant='accent-outlined'][size='lg']) .icon-button {
-		padding: calc(var(--primitives-space-8) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant='accent-outlined'][size='md']) .icon-button {
-		padding: calc(var(--primitives-space-8) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant='accent-outlined'][size='sm']) .icon-button {
-		padding: calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant='accent-outlined'][size='xs']) .icon-button {
-		padding: calc(var(--primitives-space-4) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
+	/* ### Open hovered accent filled icon button */
 
 	@media (hover: hover) {
-		:host([variant='accent-outlined']) .icon-button:hover {
-			border-color: var(--semantics-buttons-accent-outlined-is-hovered-border-color);
-			color: var(--semantics-buttons-accent-outlined-is-hovered-content-color);
+		:host([expanded][variant='accent-filled']) .icon-button:hover,
+		:host([expanded][variant='primary']) .icon-button:hover {
+			background-color: var(--semantics-buttons-accent-filled-is-open-is-hovered-background-color);
+			color: var(--semantics-buttons-accent-filled-is-open-is-hovered-content-color);
 		}
 	}
 
-	:host([variant='accent-outlined']) .icon-button:active {
-		border-color: var(--semantics-buttons-accent-outlined-is-active-border-color);
-		color: var(--semantics-buttons-accent-outlined-is-active-content-color);
+	/* ### Open active accent filled icon button */
+
+	:host([expanded][variant='accent-filled']) .icon-button:active,
+	:host([expanded][variant='primary']) .icon-button:active {
+		background-color: var(--semantics-buttons-accent-filled-is-open-is-active-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-is-active-content-color);
 	}
 
-	/* ## Variant: accent-transparent */
+	/* ## Accent Transparent */
+
+	/* ### Default accent transparent icon button */
 
 	:host([variant='accent-transparent']) .icon-button {
 		background-color: transparent;
 		color: var(--semantics-buttons-accent-transparent-content-color);
 	}
 
+	/* ### Hovered accent transparent icon button */
+
 	@media (hover: hover) {
 		:host([variant='accent-transparent']) .icon-button:hover {
 			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
 		}
 	}
 
+	/* ### Active accent transparent icon button */
+
 	:host([variant='accent-transparent']) .icon-button:active {
 		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: critical-tinted (destructive) */
+	/* ## Critical Tinted (Destructive) */
+
+	/* ### Default critical tinted icon button */
 
 	:host([variant='critical-tinted']) .icon-button,
 	:host([variant='destructive']) .icon-button {
@@ -1218,6 +1332,8 @@ const iconButtonStyles = css`
 		color: var(--semantics-buttons-critical-tinted-content-color);
 	}
 
+	/* ### Hovered critical tinted icon button */
+
 	@media (hover: hover) {
 		:host([variant='critical-tinted']) .icon-button:hover,
 		:host([variant='destructive']) .icon-button:hover {
@@ -1226,12 +1342,37 @@ const iconButtonStyles = css`
 		}
 	}
 
+	/* ### Active critical tinted icon button */
+
 	:host([variant='critical-tinted']) .icon-button:active,
 	:host([variant='destructive']) .icon-button:active {
 		background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
 		color: var(--semantics-buttons-critical-tinted-is-active-content-color);
 	}
 
+	/* ## Critical Transparent */
+
+	/* ### Default critical transparent icon button */
+
+	:host([variant='critical-transparent']) .icon-button {
+		background-color: transparent;
+		color: var(--semantics-buttons-critical-transparent-content-color);
+	}
+
+	/* ### Hovered critical transparent icon button */
+
+	@media (hover: hover) {
+		:host([variant='critical-transparent']) .icon-button:hover {
+			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		}
+	}
+
+	/* ### Active critical transparent icon button */
+
+	:host([variant='critical-transparent']) .icon-button:active {
+		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
 
 	/* # Elements */
 
@@ -1249,9 +1390,39 @@ const iconButtonStyles = css`
 		justify-content: center;
 	}
 
+	:host([size='xs']) .icon-button__icon {
+		width: var(--semantics-buttons-xs-icon-only-icon-size);
+		height: var(--semantics-buttons-xs-icon-only-icon-size);
+	}
+
+	:host([size='sm']) .icon-button__icon {
+		width: var(--semantics-buttons-sm-icon-only-icon-size);
+		height: var(--semantics-buttons-sm-icon-only-icon-size);
+	}
+
+	:host([size='md']) .icon-button__icon,
+	:host(:not([size])) .icon-button__icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
+	:host([size='lg']) .icon-button__icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
 	.icon-button__disclosure-icon {
 		display: flex;
 		flex-shrink: 0;
+		width: var(--_disclosure-icon-size);
+		height: var(--_disclosure-icon-size);
+	}
+
+	:host([size='sm']) .icon-button__disclosure-icon,
+	:host([size='md']) .icon-button__disclosure-icon,
+	:host(:not([size])) .icon-button__disclosure-icon,
+	:host([size='lg']) .icon-button__disclosure-icon {
+		margin-right: calc(var(--primitives-space-2) * -1);
 	}
 
 	.icon-button__text {
@@ -1419,7 +1590,7 @@ let NLDDTooltip = class extends LitElement {
     super(...arguments);
     this.text = "";
     this.placement = "bottom";
-    this.disabled = false;
+    this.timing = "default";
     this._visible = false;
     this._tooltipId = `nldd-tooltip-${++tooltipCounter}`;
     this._hideTimeout = null;
@@ -1456,10 +1627,10 @@ let NLDDTooltip = class extends LitElement {
         }
       }
     }
-    if (changed.has("text") || changed.has("disabled")) {
+    if (changed.has("text") || changed.has("timing")) {
       this._syncAriaDescribedBy();
     }
-    if (changed.has("disabled") && this.disabled) {
+    if (changed.has("timing") && this.timing === "never") {
       if (this._showTimeout) {
         clearTimeout(this._showTimeout);
         this._showTimeout = null;
@@ -1477,7 +1648,7 @@ let NLDDTooltip = class extends LitElement {
     if (trigger.getRootNode() !== document) {
       return;
     }
-    if (this.text && !this.disabled) {
+    if (this.text && this.timing !== "never") {
       if (!this._descriptionEl) {
         this._descriptionEl = document.createElement("span");
         this._descriptionEl.id = this._tooltipId;
@@ -1508,7 +1679,7 @@ let NLDDTooltip = class extends LitElement {
     return this.shadowRoot?.querySelector(".tooltip") ?? null;
   }
   _handleTriggerEnter() {
-    if (this.disabled) return;
+    if (this.timing === "never") return;
     if (!this.text) return;
     if (coarsePointerQuery.matches) return;
     if (this._hideTimeout) {
@@ -1516,6 +1687,11 @@ let NLDDTooltip = class extends LitElement {
       this._hideTimeout = null;
     }
     if (this._showTimeout) clearTimeout(this._showTimeout);
+    if (this.timing === "instant") {
+      this._showTimeout = null;
+      this._visible = true;
+      return;
+    }
     const parsedShow = parseInt(getComputedStyle(this).getPropertyValue("--_show-delay"), 10);
     const showDelay = Number.isFinite(parsedShow) ? parsedShow : DEFAULT_SHOW_DELAY_MS;
     this._showTimeout = setTimeout(() => {
@@ -1524,7 +1700,7 @@ let NLDDTooltip = class extends LitElement {
     }, showDelay);
   }
   _handleFocusIn() {
-    if (this.disabled) return;
+    if (this.timing === "never") return;
     if (!this.text) return;
     if (isTouchMode()) return;
     if (this._hideTimeout) {
@@ -1617,8 +1793,8 @@ __decorateClass$1g([
   property({ type: String, reflect: true })
 ], NLDDTooltip.prototype, "placement", 2);
 __decorateClass$1g([
-  property({ type: Boolean, reflect: true })
-], NLDDTooltip.prototype, "disabled", 2);
+  property({ type: String, reflect: true })
+], NLDDTooltip.prototype, "timing", 2);
 __decorateClass$1g([
   state()
 ], NLDDTooltip.prototype, "_visible", 2);
@@ -1646,6 +1822,8 @@ function template$l() {
   const label = this.accessibleLabel || this.text || nothing;
   const content = renderContent(this);
   const tooltipText = this.accessibleLabel || (this.size !== "lg" ? this.text : "");
+  const isDisclosure = this.expandable || !!this.popupType;
+  const ariaExpanded = isDisclosure ? String(this.expanded) : this.expanded ? "true" : nothing;
   const renderButton = () => {
     if (this.href) {
       const resolvedRel = this._resolvedRel();
@@ -1656,6 +1834,8 @@ function template$l() {
 					rel=${resolvedRel || nothing}
 					aria-disabled=${this.disabled ? "true" : nothing}
 					aria-label=${label}
+					aria-haspopup=${this.popupType || nothing}
+					aria-expanded=${ariaExpanded}
 					@click=${this._handleClick}
 				>
 					${content}
@@ -1668,6 +1848,8 @@ function template$l() {
 				?disabled=${this.disabled}
 				aria-disabled=${this.disabled ? "true" : nothing}
 				aria-label=${label}
+				aria-haspopup=${this.popupType || nothing}
+				aria-expanded=${ariaExpanded}
 				popovertarget=${this.popovertarget || nothing}
 				@click=${this._handleClick}
 			>
@@ -1702,7 +1884,8 @@ let NLDDIconButton = class extends LitElement {
     this.disabled = false;
     this.type = "button";
     this.expandable = false;
-    this.fullWidth = false;
+    this.expanded = false;
+    this.width = "";
     this.popovertarget = void 0;
     this.text = "";
     this.icon = "";
@@ -1719,7 +1902,18 @@ let NLDDIconButton = class extends LitElement {
     const slot = this.shadowRoot?.querySelector('slot[name="icon"]');
     return (slot?.assignedElements().length ?? 0) > 0;
   }
-  updated() {
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      const isFull = w === "full";
+      const isValidLength = !!w && !isFull && CSS.supports("width", w);
+      this.style.width = isValidLength ? w : "";
+      if (isFull || isValidLength) {
+        this.style.setProperty("--_width", "100%");
+      } else {
+        this.style.removeProperty("--_width");
+      }
+    }
     const inaccessible = this._hasIcon && !this.text && !this.accessibleLabel;
     if (!inaccessible) {
       this._warnedA11y = false;
@@ -1766,8 +1960,14 @@ __decorateClass$1f([
   property({ type: Boolean, reflect: true, attribute: "expandable" })
 ], NLDDIconButton.prototype, "expandable", 2);
 __decorateClass$1f([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDIconButton.prototype, "fullWidth", 2);
+  property({ type: Boolean, reflect: true })
+], NLDDIconButton.prototype, "expanded", 2);
+__decorateClass$1f([
+  property({ type: String, reflect: true, attribute: "popup-type" })
+], NLDDIconButton.prototype, "popupType", 2);
+__decorateClass$1f([
+  property({ type: String, reflect: true })
+], NLDDIconButton.prototype, "width", 2);
 __decorateClass$1f([
   property({ type: String })
 ], NLDDIconButton.prototype, "popovertarget", 2);
@@ -1924,8 +2124,8 @@ function template$k() {
 				text=${this._t("components.split-button.menu-action")}
 				hide-tooltip
 				?disabled=${this.disabled}
-				aria-haspopup="menu"
-				aria-expanded=${this._hasMenuItems ? String(this._menuIsOpen) : nothing}
+				?expanded=${this._menuIsOpen}
+				popup-type="menu"
 				@click=${this._handleMenuClick}
 			></nldd-icon-button>
 		</div>
@@ -2527,7 +2727,7 @@ var __decorateClass$1e = (decorators, target, key, kind) => {
   if (result) __defProp$1c(target, key, result);
   return result;
 };
-function VisibilityMixin(Base) {
+function VisibilityMixin(Base, containerName) {
   class WithVisibility extends Base {
     updated(changed) {
       super.updated(changed);
@@ -2537,15 +2737,16 @@ function VisibilityMixin(Base) {
     }
     _updateVisibilityStyle() {
       if (!this.shadowRoot) return;
+      const containerPrefix = `${containerName} `;
       const rules = [];
       if (this.hideBelow) {
         rules.push(
-          `:host { @container (max-width: ${this.hideBelow}) { display: none !important; } }`
+          `:host { @container ${containerPrefix}(max-width: ${this.hideBelow}) { display: none !important; } }`
         );
       }
       if (this.hideAbove) {
         rules.push(
-          `:host { @container (min-width: ${this.hideAbove}) { display: none !important; } }`
+          `:host { @container ${containerPrefix}(min-width: ${this.hideAbove}) { display: none !important; } }`
         );
       }
       if (rules.length === 0) {
@@ -2578,7 +2779,7 @@ var __decorateClass$1d = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1b(target, key, result);
   return result;
 };
-let NLDDIconCell = class extends VisibilityMixin(LitElement) {
+let NLDDIconCell = class extends VisibilityMixin(LitElement, "list-container") {
   constructor() {
     super(...arguments);
     this.verticalAlignment = "center";
@@ -2661,7 +2862,7 @@ var __decorateClass$1c = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1a(target, key, result);
   return result;
 };
-let NLDDSpacerCell = class extends VisibilityMixin(LitElement) {
+let NLDDSpacerCell = class extends VisibilityMixin(LitElement, "list-container") {
   constructor() {
     super(...arguments);
     this.size = "16";
@@ -2704,8 +2905,9 @@ const textCellStyles = css`
 
 	/* # Width */
 
-	:host([width='stretch']),
-	:host(:not([width])) {
+	:host([width='full']),
+	:host(:not([width])),
+	:host([width='']) {
 		flex-grow: 1;
 		flex-shrink: 1;
 	}
@@ -2717,7 +2919,7 @@ const textCellStyles = css`
 		width: fit-content;
 	}
 
-	:host([width]:not([width='stretch']):not([width='fit-content'])) {
+	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
 		flex-shrink: 0;
 	}
 
@@ -2755,6 +2957,10 @@ const textCellStyles = css`
 		align-items: flex-start;
 	}
 
+	:host([horizontal-alignment='center']) {
+		align-items: center;
+	}
+
 	:host([horizontal-alignment='right']) {
 		align-items: flex-end;
 	}
@@ -2779,6 +2985,10 @@ const textCellStyles = css`
 		font: var(--primitives-font-body-xxs-regular-tight);
 	}
 
+	:host([horizontal-alignment='center']) .text-cell__overline {
+		text-align: center;
+	}
+
 	:host([horizontal-alignment='right']) .text-cell__overline {
 		text-align: right;
 	}
@@ -2803,6 +3013,10 @@ const textCellStyles = css`
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
 
+	:host([horizontal-alignment='center']) .text-cell__text {
+		text-align: center;
+	}
+
 	:host([horizontal-alignment='right']) .text-cell__text {
 		text-align: right;
 	}
@@ -2875,6 +3089,10 @@ const textCellStyles = css`
 		font: var(--primitives-font-body-xxs-regular-tight);
 	}
 
+	:host([horizontal-alignment='center']) .text-cell__supporting-text {
+		text-align: center;
+	}
+
 	:host([horizontal-alignment='right']) .text-cell__supporting-text {
 		text-align: right;
 	}
@@ -2951,12 +3169,12 @@ var __decorateClass$1b = (decorators, target, key, kind) => {
   if (kind && result) __defProp$19(target, key, result);
   return result;
 };
-let NLDDTextCell = class extends VisibilityMixin(LitElement) {
+let NLDDTextCell = class extends VisibilityMixin(LitElement, "list-container") {
   constructor() {
     super(...arguments);
     this.size = "md";
     this.color = "default";
-    this.width = "stretch";
+    this.width = "full";
     this.horizontalAlignment = "left";
     this.verticalAlignment = "center";
     this.text = "";
@@ -2995,12 +3213,17 @@ let NLDDTextCell = class extends VisibilityMixin(LitElement) {
     }
   }
   _applyDimensionStyles() {
-    const widthIsKeyword = this.width === "stretch" || this.width === "fit-content";
-    if (this.width && !widthIsKeyword) {
-      this.style.setProperty("--_width", this.width);
+    const w = this.width;
+    const widthIsKeyword = w === "full" || w === "fit-content";
+    const widthIsValidLength = !!w && !widthIsKeyword && CSS.supports("width", w);
+    if (widthIsValidLength) {
+      this.style.setProperty("--_width", w);
     } else {
       this.style.removeProperty("--_width");
     }
+    if (w && !widthIsKeyword && !widthIsValidLength) {
+      this.width = "";
+    }
     if (this.minWidth) {
       this.style.setProperty("--_min-width", this.minWidth);
     } else {
@@ -3302,9 +3525,9 @@ let NLDDButtonGroup = class extends LitElement {
         el.setAttribute("hidden", "");
       }
       if (this.orientation === "vertical") {
-        el.setAttribute("full-width", "");
+        el.setAttribute("width", "full");
       } else {
-        el.removeAttribute("full-width");
+        el.removeAttribute("width");
       }
       el.setAttribute("size", this.size);
     });
@@ -5158,10 +5381,10 @@ function resolveWidth(width) {
 }
 function renderChildren(children, allChildren, overflowIds, suppressSoloFluid = false) {
   return children.map((child) => {
-    if (child.type === "title-group") {
+    if (child.type === "title") {
       const alignClass = child.align === "center" ? "toolbar__title-group--center-text-align" : "toolbar__title-group--left-text-align";
       const visibleItems = allChildren.filter(
-        (c) => !overflowIds.has(c.id) && (c.type === "item" || c.type === "title-group")
+        (c) => !overflowIds.has(c.id) && (c.type === "item" || c.type === "title")
       );
       const solo = visibleItems.length === 1 && visibleItems[0].id === child.id;
       return html`
@@ -5171,14 +5394,14 @@ function renderChildren(children, allChildren, overflowIds, suppressSoloFluid =
 					style=${styleMap({ "--_title-group-min-width": child.minWidth })}
 				>
 					${child.title ? html`<p class="toolbar__title">${child.title}</p>` : nothing}
-					${child.subtitle ? html`<p class="toolbar__subtitle">${child.subtitle}</p>` : nothing}
+					${child.supportingText ? html`<p class="toolbar__subtitle">${child.supportingText}</p>` : nothing}
 				</div>
 			`;
     }
     if (child.type === "item") {
       const isOverflowed = overflowIds.has(child.id);
       const visibleItems = allChildren.filter(
-        (c) => !overflowIds.has(c.id) && (c.type === "item" || c.type === "title-group")
+        (c) => !overflowIds.has(c.id) && (c.type === "item" || c.type === "title")
       );
       const soloFluid = !suppressSoloFluid && !isOverflowed && child.isFluid && visibleItems.length === 1 && visibleItems[0].id === child.id;
       const cssVars = {};
@@ -5267,8 +5490,8 @@ if (!customElements.get("nldd-toolbar-item")) {
     }
   });
 }
-if (!customElements.get("nldd-toolbar-title-group")) {
-  customElements.define("nldd-toolbar-title-group", class extends HTMLElement {
+if (!customElements.get("nldd-toolbar-title")) {
+  customElements.define("nldd-toolbar-title", class extends HTMLElement {
   });
 }
 let NLDDToolbar = class extends LitElement {
@@ -5315,7 +5538,7 @@ let NLDDToolbar = class extends LitElement {
       const onlyInternalMoves = mutations.every((m) => {
         if (m.type === "attributes") {
           const tag = m.target.tagName.toLowerCase();
-          return tag !== "nldd-toolbar-item" && tag !== "nldd-toolbar-title-group";
+          return tag !== "nldd-toolbar-item" && tag !== "nldd-toolbar-title";
         }
         return false;
       });
@@ -5453,7 +5676,7 @@ let NLDDToolbar = class extends LitElement {
     const visible = children.filter((c) => !this._overflowIds.has(c.id));
     const gaps = Math.max(0, visible.length - 1) * itemGap;
     const itemsWidth = visible.reduce((sum, child) => {
-      if (child.type === "item" || child.type === "title-group") {
+      if (child.type === "item" || child.type === "title") {
         return sum + (this._itemWidths.get(child.id) ?? 0);
       }
       return sum;
@@ -5594,14 +5817,14 @@ let NLDDToolbar = class extends LitElement {
   _buildChildrenForSlot(slotName) {
     return Array.from(this.children).filter((el) => el.getAttribute("slot") === slotName).map((el) => {
       const tag = el.tagName.toLowerCase();
-      if (tag === "nldd-toolbar-title-group") {
+      if (tag === "nldd-toolbar-title") {
         const id2 = this._getId(el);
         el.dataset.toolbarSlot = slotName;
         el.setAttribute("slot", `child-${id2}`);
         return {
-          type: "title-group",
+          type: "title",
           title: el.getAttribute("text") ?? "",
-          subtitle: el.getAttribute("subtext") ?? "",
+          supportingText: el.getAttribute("supporting-text") ?? "",
           align: el.getAttribute("align") ?? "left",
           minWidth: el.getAttribute("min-width") ?? "200px",
           id: id2
@@ -5665,7 +5888,7 @@ let NLDDToolbar = class extends LitElement {
     const visibleNonDivider = allChildren.filter(
       (c) => !this._overflowIds.has(c.id)
     );
-    const isSoloFluid = visibleNonDivider.length === 1 && (visibleNonDivider[0].type === "title-group" || visibleNonDivider[0].type === "item" && visibleNonDivider[0].isFluid);
+    const isSoloFluid = visibleNonDivider.length === 1 && (visibleNonDivider[0].type === "title" || visibleNonDivider[0].type === "item" && visibleNonDivider[0].isFluid);
     return template$f(
       this._startChildren,
       this._centerChildren,
@@ -6068,15 +6291,15 @@ const titleStyles = css`
 			font: var(--primitives-font-display-1-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$d}) {
+		@container layout-container (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
+		@container layout-container (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$b}) {
+		@container layout-container (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-1-lg);
 		}
 	}
@@ -6094,15 +6317,15 @@ const titleStyles = css`
 			font: var(--primitives-font-display-2-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$d}) {
+		@container layout-container (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
+		@container layout-container (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$b}) {
+		@container layout-container (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-2-lg);
 		}
 	}
@@ -6121,15 +6344,15 @@ const titleStyles = css`
 			font: var(--primitives-font-display-3-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$d}) {
+		@container layout-container (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
+		@container layout-container (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$b}) {
+		@container layout-container (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-3-lg);
 		}
 	}
@@ -6147,15 +6370,15 @@ const titleStyles = css`
 			font: var(--primitives-font-display-4-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$d}) {
+		@container layout-container (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
+		@container layout-container (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$b}) {
+		@container layout-container (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-4-lg);
 		}
 	}
@@ -6173,15 +6396,15 @@ const titleStyles = css`
 			font: var(--primitives-font-display-5-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$d}) {
+		@container layout-container (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
+		@container layout-container (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$b}) {
+		@container layout-container (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-5-lg);
 		}
 	}
@@ -6199,15 +6422,15 @@ const titleStyles = css`
 			font: var(--primitives-font-display-6-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$d}) {
+		@container layout-container (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
+		@container layout-container (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$b}) {
+		@container layout-container (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-6-lg);
 		}
 	}
@@ -6296,7 +6519,7 @@ const blockquoteStyles = css`
 		}
 	}
 
-	@container layout-area (max-width: ${smMax$c}) {
+	@container layout-container (max-width: ${smMax$c}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -6460,7 +6683,7 @@ const tagStyles = css`
 		--_background-color: var(--components-tag-neutral-background-color);
 		--_content-color: var(--components-tag-neutral-content-color);
 		--_min-height: var(--primitives-space-24);
-		--_inline-padding: var(--primitives-space-8);
+		--_inline-padding: var(--primitives-space-6);
 		--_gap: var(--primitives-space-3);
 		--_font: var(--primitives-font-body-sm-bold-flat);
 		--_icon-size: var(--primitives-space-16);
@@ -6471,46 +6694,144 @@ const tagStyles = css`
 		vertical-align: middle;
 	}
 
-	:host([size="sm"]) {
-		--_min-height: var(--primitives-space-20);
-		--_inline-padding: var(--primitives-space-6);
-		--_gap: var(--primitives-space-2);
-		--_font: var(--primitives-font-body-xs-bold-flat);
-		--_icon-size: var(--primitives-space-14);
-		--_corner-radius: var(--components-tag-sm-corner-radius);
+	:host([size="sm"]) {
+		--_min-height: var(--primitives-space-20);
+		--_inline-padding: var(--primitives-space-4);
+		--_gap: var(--primitives-space-2);
+		--_font: var(--primitives-font-body-xs-bold-flat);
+		--_icon-size: var(--primitives-space-14);
+		--_corner-radius: var(--components-tag-sm-corner-radius);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* ## Color */
+
+	:host([color="neutral"]),
+	:host(:not([color])) {
+		--_background-color: var(--components-tag-neutral-background-color);
+		--_content-color: var(--components-tag-neutral-content-color);
+	}
+
+	:host([color="accent"]) {
+		--_background-color: var(--components-tag-accent-background-color);
+		--_content-color: var(--components-tag-accent-content-color);
+	}
+
+	:host([color="success"]) {
+		--_background-color: var(--components-tag-success-background-color);
+		--_content-color: var(--components-tag-success-content-color);
+	}
+
+	:host([color="warning"]) {
+		--_background-color: var(--components-tag-warning-background-color);
+		--_content-color: var(--components-tag-warning-content-color);
+	}
+
+	:host([color="critical"]) {
+		--_background-color: var(--components-tag-critical-background-color);
+		--_content-color: var(--components-tag-critical-content-color);
+	}
+
+
+	/* ### Rijkskleuren */
+
+	:host([color="coolgray"]) {
+		--_background-color: var(--components-tag-coolgray-background-color);
+		--_content-color: var(--components-tag-coolgray-content-color);
+	}
+
+	:host([color="lintblauw"]) {
+		--_background-color: var(--components-tag-lintblauw-background-color);
+		--_content-color: var(--components-tag-lintblauw-content-color);
+	}
+
+	:host([color="donkerblauw"]) {
+		--_background-color: var(--components-tag-donkerblauw-background-color);
+		--_content-color: var(--components-tag-donkerblauw-content-color);
+	}
+
+	:host([color="hemelblauw"]) {
+		--_background-color: var(--components-tag-hemelblauw-background-color);
+		--_content-color: var(--components-tag-hemelblauw-content-color);
+	}
+
+	:host([color="lichtblauw"]) {
+		--_background-color: var(--components-tag-lichtblauw-background-color);
+		--_content-color: var(--components-tag-lichtblauw-content-color);
+	}
+
+	:host([color="paars"]) {
+		--_background-color: var(--components-tag-paars-background-color);
+		--_content-color: var(--components-tag-paars-content-color);
+	}
+
+	:host([color="violet"]) {
+		--_background-color: var(--components-tag-violet-background-color);
+		--_content-color: var(--components-tag-violet-content-color);
+	}
+
+	:host([color="robijnrood"]) {
+		--_background-color: var(--components-tag-robijnrood-background-color);
+		--_content-color: var(--components-tag-robijnrood-content-color);
+	}
+
+	:host([color="roze"]) {
+		--_background-color: var(--components-tag-roze-background-color);
+		--_content-color: var(--components-tag-roze-content-color);
+	}
+
+	:host([color="rood"]) {
+		--_background-color: var(--components-tag-rood-background-color);
+		--_content-color: var(--components-tag-rood-content-color);
+	}
+
+	:host([color="oranje"]) {
+		--_background-color: var(--components-tag-oranje-background-color);
+		--_content-color: var(--components-tag-oranje-content-color);
 	}
 
-	:host([hidden]) {
-		display: none;
+	:host([color="donkergeel"]) {
+		--_background-color: var(--components-tag-donkergeel-background-color);
+		--_content-color: var(--components-tag-donkergeel-content-color);
 	}
 
+	:host([color="geel"]) {
+		--_background-color: var(--components-tag-geel-background-color);
+		--_content-color: var(--components-tag-geel-content-color);
+	}
 
-	/* ## Variants */
+	:host([color="donkerbruin"]) {
+		--_background-color: var(--components-tag-donkerbruin-background-color);
+		--_content-color: var(--components-tag-donkerbruin-content-color);
+	}
 
-	:host([variant="neutral"]),
-	:host(:not([variant])) {
-		--_background-color: var(--components-tag-neutral-background-color);
-		--_content-color: var(--components-tag-neutral-content-color);
+	:host([color="bruin"]) {
+		--_background-color: var(--components-tag-bruin-background-color);
+		--_content-color: var(--components-tag-bruin-content-color);
 	}
 
-	:host([variant="accent"]) {
-		--_background-color: var(--components-tag-accent-background-color);
-		--_content-color: var(--components-tag-accent-content-color);
+	:host([color="donkergroen"]) {
+		--_background-color: var(--components-tag-donkergroen-background-color);
+		--_content-color: var(--components-tag-donkergroen-content-color);
 	}
 
-	:host([variant="success"]) {
-		--_background-color: var(--components-tag-success-background-color);
-		--_content-color: var(--components-tag-success-content-color);
+	:host([color="groen"]) {
+		--_background-color: var(--components-tag-groen-background-color);
+		--_content-color: var(--components-tag-groen-content-color);
 	}
 
-	:host([variant="warning"]) {
-		--_background-color: var(--components-tag-warning-background-color);
-		--_content-color: var(--components-tag-warning-content-color);
+	:host([color="mosgroen"]) {
+		--_background-color: var(--components-tag-mosgroen-background-color);
+		--_content-color: var(--components-tag-mosgroen-content-color);
 	}
 
-	:host([variant="critical"]) {
-		--_background-color: var(--components-tag-critical-background-color);
-		--_content-color: var(--components-tag-critical-content-color);
+	:host([color="mintgroen"]) {
+		--_background-color: var(--components-tag-mintgroen-background-color);
+		--_content-color: var(--components-tag-mintgroen-content-color);
 	}
 
 
@@ -6587,7 +6908,7 @@ var __decorateClass$$ = (decorators, target, key, kind) => {
 let NLDDTag = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "neutral";
+    this.color = "neutral";
     this.size = "md";
     this.text = "";
     this.icon = "";
@@ -6634,7 +6955,7 @@ let NLDDTag = class extends LitElement {
 NLDDTag.styles = tagStyles;
 __decorateClass$$([
   property({ type: String, reflect: true })
-], NLDDTag.prototype, "variant", 2);
+], NLDDTag.prototype, "color", 2);
 __decorateClass$$([
   property({ type: String, reflect: true })
 ], NLDDTag.prototype, "size", 2);
@@ -8368,7 +8689,7 @@ const GRAMMAR_LOADERS = {
   yaml: () => import("./prism-yaml-DO0f9pf6.js"),
   json: () => import("./prism-json-DIMpow89.js"),
   javascript: () => import("./prism-javascript-DeC_17Pw.js"),
-  typescript: () => import("./prism-typescript-Cdpexfvg.js").then((n) => n.p),
+  typescript: () => import("./prism-typescript-BlIir5CV.js").then((n) => n.p),
   css: () => import("./prism-css-B93tXdOU.js"),
   html: () => import("./prism-markup-DfJYPYHA.js"),
   bash: () => import("./prism-bash-vbqaw3JR.js"),
@@ -9276,8 +9597,10 @@ const textFieldStyles = css`
 
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -9535,7 +9858,12 @@ let NLDDTextField = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("width")) {
-      this.style.width = this.width || "";
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
     }
     if (changed.has("value")) {
       this._internals.setFormValue(this.value);
@@ -9648,8 +9976,10 @@ const multiLineTextFieldStyles = css`
 
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -9896,7 +10226,12 @@ let NLDDMultiLineTextField = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("width")) {
-      this.style.width = this.width || "";
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
     }
     if (changed.has("resize") && this.resize === "auto" && this._textarea) {
       this._textarea.style.width = "";
@@ -10262,8 +10597,10 @@ const passwordFieldStyles = css`
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -10582,7 +10919,12 @@ let NLDDPasswordField = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("width")) {
-      this.style.width = this.width || "";
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
     }
     if (changed.has("value")) {
       this._internals.setFormValue(this.value);
@@ -10707,8 +11049,10 @@ const searchFieldStyles = css`
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
 		min-width: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -10956,7 +11300,12 @@ let NLDDSearchField = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("width")) {
-      this.style.width = this.width || "";
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
     }
     if (changed.has("value")) {
       this._internals.setFormValue(this.value);
@@ -11094,7 +11443,7 @@ const numberFieldStyles = css`
 		opacity: 1;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		display: block;
 		width: 100%;
 	}
@@ -11126,7 +11475,7 @@ const numberFieldStyles = css`
 		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
-	:host([full-width]) .number-field,
+	:host([width="full"]) .number-field,
 	:host([width]) .number-field {
 		width: 100%;
 	}
@@ -11215,7 +11564,7 @@ const numberFieldStyles = css`
 		padding-inline: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
 	}
 
-	:host([full-width]) .number-field__input,
+	:host([width="full"]) .number-field__input,
 	:host([width]) .number-field__input {
 		flex-grow: 1;
 		min-width: 0;
@@ -11299,7 +11648,6 @@ let NLDDNumberField = class extends LitElement {
     this.size = "md";
     this.disabled = false;
     this.name = "";
-    this.fullWidth = false;
     this.width = "";
     this.hideSpinButtons = false;
     this.accessibleLabel = "";
@@ -11312,12 +11660,11 @@ let NLDDNumberField = class extends LitElement {
   }
   updated(changedProperties) {
     if (changedProperties.has("width")) {
-      if (this.width) {
-        this.style.setProperty("--_width", this.width);
-        this.setAttribute("width", this.width);
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
       } else {
         this.style.removeProperty("--_width");
-        this.removeAttribute("width");
       }
     }
     if (changedProperties.has("value")) {
@@ -11425,10 +11772,7 @@ __decorateClass$R([
   property({ type: String, reflect: true })
 ], NLDDNumberField.prototype, "name", 2);
 __decorateClass$R([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDNumberField.prototype, "fullWidth", 2);
-__decorateClass$R([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], NLDDNumberField.prototype, "width", 2);
 __decorateClass$R([
   property({ type: Boolean, reflect: true, attribute: "hide-spin-buttons" })
@@ -11451,8 +11795,10 @@ const dropdownStyles = css`
 		--_xs-picker-icon-size: var(--primitives-space-16);
 		--_sm-picker-icon-size: var(--primitives-space-20);
 		--_md-picker-icon-size: var(--primitives-space-24);
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -11495,7 +11841,7 @@ const dropdownStyles = css`
 		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
-	.dropdown:focus-within {
+	:host([keyboard-focused]) .dropdown {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -11690,6 +12036,15 @@ let NLDDDropdown = class extends LitElement {
         composed: true
       }));
     };
+    this._handleSelectFocus = () => {
+      this.toggleAttribute("keyboard-focused", isKeyboardMode());
+    };
+    this._handleSelectBlur = () => {
+      this.toggleAttribute("keyboard-focused", false);
+    };
+    this._handleSelectKeydown = () => {
+      this.toggleAttribute("keyboard-focused", true);
+    };
   }
   // — Lifecycle ——————————————————————————————————————————————————————————————
   updated(changedProperties) {
@@ -11700,7 +12055,12 @@ let NLDDDropdown = class extends LitElement {
       this._syncAriaInvalid();
     }
     if (changedProperties.has("width")) {
-      this.style.width = this.width || "";
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
     }
   }
   // — Slot ——————————————————————————————————————————————————————————————————
@@ -11709,6 +12069,9 @@ let NLDDDropdown = class extends LitElement {
     const select = slot?.assignedElements({ flatten: true }).find((el) => el.tagName === "SELECT") ?? null;
     if (this._select && this._select !== select) {
       this._select.removeEventListener("change", this._handleSelectChange);
+      this._select.removeEventListener("focus", this._handleSelectFocus);
+      this._select.removeEventListener("blur", this._handleSelectBlur);
+      this._select.removeEventListener("keydown", this._handleSelectKeydown);
     }
     this._select = select;
     if (!select) {
@@ -11716,6 +12079,9 @@ let NLDDDropdown = class extends LitElement {
       return;
     }
     select.addEventListener("change", this._handleSelectChange);
+    select.addEventListener("focus", this._handleSelectFocus);
+    select.addEventListener("blur", this._handleSelectBlur);
+    select.addEventListener("keydown", this._handleSelectKeydown);
     this._syncDisabled();
     this._syncAriaInvalid();
     this._syncDisplayValue();
@@ -11771,8 +12137,10 @@ const comboBoxStyles = css`
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -12022,6 +12390,8 @@ function comboBoxTemplate(component) {
 						text=${component._t("components.combo-box.open-menu-action")}
 						hide-tooltip
 						?disabled=${component.disabled}
+						?expanded=${component._isOpen}
+						popup-type="listbox"
 						@pointerdown=${component._handlePickerPointerdown}
 						@click=${component._toggleMenu}
 					></nldd-icon-button>
@@ -12125,7 +12495,12 @@ let NLDDComboBox = class extends LitElement {
       this._menu.maxItems = this.maxItems;
     }
     if (changedProperties.has("width")) {
-      this.style.width = this.width || "";
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
     }
     if (changedProperties.has("value") || changedProperties.has("text")) {
       const state2 = new FormData();
@@ -13980,9 +14355,14 @@ const segmentedControlStyles = css`
 	/* # Host */
 
 	:host {
+		--_width: auto;
+		--_segmented-control-md-item-indicator-inset: var(--primitives-space-4);
+		--_segmented-control-sm-item-indicator-inset: var(--primitives-space-3);
+
 		display: inline-grid;
 		grid-auto-columns: 1fr;
 		grid-auto-flow: column;
+		width: var(--_width);
 		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		isolation: isolate;
 		-webkit-tap-highlight-color: transparent;
@@ -13992,9 +14372,13 @@ const segmentedControlStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		display: grid;
-		width: 100%;
+		--_width: 100%;
+	}
+
+	:host([width="fit-content"]) {
+		grid-auto-columns: auto;
 	}
 
 	:host([disabled]) {
@@ -14027,13 +14411,6 @@ const segmentedControlItemStyles = css`
 	/* # Host */
 
 	:host {
-		--_segmented-control-md-inset-size: var(--primitives-space-4);
-		--_segmented-control-md-gap-size: var(--primitives-space-4);
-		--_segmented-control-md-item-icon-size: var(--primitives-space-24);
-		--_segmented-control-sm-inset-size: var(--primitives-space-3);
-		--_segmented-control-sm-gap-size: var(--primitives-space-2);
-		--_segmented-control-sm-item-icon-size: var(--primitives-space-20);
-
 		display: flex;
 		min-width: 0;
 		position: relative;
@@ -14045,22 +14422,9 @@ const segmentedControlItemStyles = css`
 	}
 
 
-	/* # Input */
-
-	.segmented-control__item-input {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		opacity: 0;
-		z-index: 1;
-	}
-
-
-	/* # Label */
+	/* # Item */
 
-	.segmented-control__item-label {
+	.segmented-control__item {
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -14071,37 +14435,52 @@ const segmentedControlItemStyles = css`
 		cursor: default;
 	}
 
-	:host([size='md']) .segmented-control__item-label,
-	:host(:not([size])) .segmented-control__item-label {
+	:host([size='md']) .segmented-control__item,
+	:host(:not([size])) .segmented-control__item {
 		height: var(--semantics-controls-md-min-size);
-		padding-inline: calc(var(--_segmented-control-md-inset-size) / 2 + var(--primitives-space-12));
+		padding-inline: calc(var(--_segmented-control-md-item-indicator-inset) / 2 + var(--primitives-space-12));
 		font: var(--semantics-buttons-md-font);
 	}
 
-	:host([size='sm']) .segmented-control__item-label {
+	:host([size='sm']) .segmented-control__item {
 		height: var(--semantics-controls-sm-min-size);
-		padding-inline: calc(var(--_segmented-control-sm-inset-size) / 2 + var(--primitives-space-8));
+		padding-inline: calc(var(--_segmented-control-sm-item-indicator-inset) / 2 + var(--primitives-space-8));
 		font: var(--semantics-buttons-sm-font);
 	}
 
-	:host([variant='icon'][size='md']) .segmented-control__item-label,
-	:host([variant='icon']:not([size])) .segmented-control__item-label {
-		padding-inline: calc((var(--semantics-controls-md-min-size) - var(--_segmented-control-md-item-icon-size) - var(--_segmented-control-md-inset-size) * 2 + var(--_segmented-control-md-gap-size)) / 2);
+	:host([variant='icon'][size='md']) .segmented-control__item,
+	:host([variant='icon']:not([size])) .segmented-control__item {
+		width: calc(var(--semantics-controls-md-min-size) - var(--_segmented-control-md-item-indicator-inset));
+		padding: 0;
 	}
 
-	:host([variant='icon'][size='sm']) .segmented-control__item-label {
-		padding-inline: calc((var(--semantics-controls-sm-min-size) - var(--_segmented-control-sm-item-icon-size) - var(--_segmented-control-sm-inset-size) * 2 + var(--_segmented-control-sm-gap-size)) / 2);
+	:host([variant='icon'][size='sm']) .segmented-control__item {
+		width: calc(var(--semantics-controls-sm-min-size) - var(--_segmented-control-sm-item-indicator-inset));
+		padding: 0;
 	}
 
-	:host([selected]) .segmented-control__item-label {
+	:host([selected]) .segmented-control__item {
 		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
-	:host([disabled]) .segmented-control__item-label {
+	:host([disabled]) .segmented-control__item {
 		opacity: var(--primitives-opacity-disabled);
 	}
 
 
+	/* # Input */
+
+	.segmented-control__item-input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		z-index: 1;
+	}
+
+
 	/* # Text */
 
 	.segmented-control__item-text {
@@ -14112,6 +14491,10 @@ const segmentedControlItemStyles = css`
 		pointer-events: none;
 	}
 
+	:host([variant='icon']) .segmented-control__item-text {
+		display: none;
+	}
+
 
 	/* # Icon slot */
 
@@ -14126,36 +14509,29 @@ const segmentedControlItemStyles = css`
 
 	:host([size='md']) .segmented-control__item-icon,
 	:host(:not([size])) .segmented-control__item-icon {
-		width: var(--_segmented-control-md-item-icon-size);
-		height: var(--_segmented-control-md-item-icon-size);
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
 	}
 
 	:host([size='sm']) .segmented-control__item-icon {
-		width: var(--_segmented-control-sm-item-icon-size);
-		height: var(--_segmented-control-sm-item-icon-size);
-	}
-
-	::slotted(nldd-icon) {
-		display: block;
-		width: 100%;
-		height: 100%;
+		width: var(--semantics-buttons-sm-icon-only-icon-size);
+		height: var(--semantics-buttons-sm-icon-only-icon-size);
 	}
 
-
-	/* # Slot visibility */
-
 	:host([variant='text']) .segmented-control__item-icon {
 		display: none;
 	}
 
-	:host([variant='icon']) .segmented-control__item-text {
-		display: none;
+	::slotted(nldd-icon) {
+		display: block;
+		width: 100%;
+		height: 100%;
 	}
 
 
 	/* # Indicator */
 
-	.segmented-control__item-label::before {
+	.segmented-control__item::before {
 		content: '';
 		position: absolute;
 		inset: 0;
@@ -14163,25 +14539,25 @@ const segmentedControlItemStyles = css`
 		background-color: transparent;
 	}
 
-	:host([size='md']) .segmented-control__item-label::before,
-	:host(:not([size])) .segmented-control__item-label::before {
-		inset-block: var(--_segmented-control-md-inset-size);
-		inset-inline: calc(var(--_segmented-control-md-gap-size) / 2);
-		border-radius: calc(var(--semantics-controls-md-corner-radius) - (var(--_segmented-control-md-inset-size) / 2));
+	:host([size='md']) .segmented-control__item::before,
+	:host(:not([size])) .segmented-control__item::before {
+		inset-block: var(--_segmented-control-md-item-indicator-inset);
+		inset-inline: calc(var(--_segmented-control-md-item-indicator-inset) / 2);
+		border-radius: calc(var(--semantics-controls-md-corner-radius) - (var(--_segmented-control-md-item-indicator-inset) / 2));
 	}
 
-	:host([size='sm']) .segmented-control__item-label::before {
-		inset-block: var(--_segmented-control-sm-inset-size);
-		inset-inline: calc(var(--_segmented-control-sm-gap-size) / 2);
-		border-radius: calc(var(--semantics-controls-sm-corner-radius) - (var(--_segmented-control-sm-inset-size) / 2));
+	:host([size='sm']) .segmented-control__item::before {
+		inset-block: var(--_segmented-control-sm-item-indicator-inset);
+		inset-inline: calc(var(--_segmented-control-sm-item-indicator-inset) / 2);
+		border-radius: calc(var(--semantics-controls-sm-corner-radius) - (var(--_segmented-control-sm-item-indicator-inset) / 2));
 	}
 
-	:host([selected]) .segmented-control__item-label::before {
+	:host([selected]) .segmented-control__item::before {
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
 	}
 
 	@media (hover: hover) {
-		:host(:not([selected])) .segmented-control__item-label:hover::before {
+		:host(:not([selected])) .segmented-control__item:hover::before {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 		}
 	}
@@ -14189,7 +14565,7 @@ const segmentedControlItemStyles = css`
 
 	/* # Focus */
 
-	.segmented-control__item-label:has(:focus-visible)::before {
+	.segmented-control__item:has(:focus-visible)::before {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -14202,7 +14578,7 @@ function segmentedControlItemTemplate(component) {
   const isIcon = component.variant === "icon";
   const labelText = component.text || nothing;
   const label = html`
-		<label class="segmented-control__item-label">
+		<label class="segmented-control__item">
 			<input class="segmented-control__item-input"
 				type=${component.inputType}
 				name=${component.groupName || nothing}
@@ -14306,7 +14682,7 @@ let NLDDSegmentedControl = class extends LitElement {
     this.type = "radio";
     this.variant = "text";
     this.disabled = false;
-    this.fullWidth = false;
+    this.width = "";
     this.name = "";
     this.accessibleLabel = "";
     this.accessibleLabelledBy = "";
@@ -14423,6 +14799,15 @@ let NLDDSegmentedControl = class extends LitElement {
     }
   }
   updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      const isKeyword = w === "full" || w === "fit-content";
+      if (w && !isKeyword && CSS.supports("width", w)) {
+        this.style.setProperty("--_width", w);
+      } else {
+        this.style.removeProperty("--_width");
+      }
+    }
     if (changedProperties.has("value") || changedProperties.has("values") || changedProperties.has("size") || changedProperties.has("disabled") || changedProperties.has("type") || changedProperties.has("variant") || changedProperties.has("name")) {
       this._syncItems();
     }
@@ -14519,8 +14904,8 @@ __decorateClass$G([
   property({ type: Boolean, reflect: true })
 ], NLDDSegmentedControl.prototype, "disabled", 2);
 __decorateClass$G([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDSegmentedControl.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDSegmentedControl.prototype, "width", 2);
 __decorateClass$G([
   property({ type: String, reflect: true })
 ], NLDDSegmentedControl.prototype, "name", 2);
@@ -14674,20 +15059,40 @@ const toggleButtonStyles = css`
 		flex-shrink: 0;
 	}
 
+	/* ## Icon size — naast tekst (default) */
+
 	:host([size="md"]) .toggle-button__icon,
 	:host(:not([size])) .toggle-button__icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+		width: var(--semantics-buttons-md-icon-size);
+		height: var(--semantics-buttons-md-icon-size);
 	}
 
 	:host([size="sm"]) .toggle-button__icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
+		width: var(--semantics-buttons-sm-icon-size);
+		height: var(--semantics-buttons-sm-icon-size);
 	}
 
 	:host([size="xs"]) .toggle-button__icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+		width: var(--semantics-buttons-xs-icon-size);
+		height: var(--semantics-buttons-xs-icon-size);
+	}
+
+	/* ## Icon size — icon-only mode */
+
+	:host([icon-only][size="md"]) .toggle-button__icon,
+	:host([icon-only]:not([size])) .toggle-button__icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
+	:host([icon-only][size="sm"]) .toggle-button__icon {
+		width: var(--semantics-buttons-sm-icon-only-icon-size);
+		height: var(--semantics-buttons-sm-icon-only-icon-size);
+	}
+
+	:host([icon-only][size="xs"]) .toggle-button__icon {
+		width: var(--semantics-buttons-xs-icon-only-icon-size);
+		height: var(--semantics-buttons-xs-icon-only-icon-size);
 	}
 
 
@@ -15133,13 +15538,13 @@ const tokenStyles = css`
 
 	/* ## Open — menu */
 
-	:host([open]) .token {
+	:host([expanded]) .token {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
 	@media (hover: hover) {
-		:host([open]) .token:hover:not(:disabled) {
+		:host([expanded]) .token:hover:not(:disabled) {
 			background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
 			color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 		}
@@ -15187,7 +15592,7 @@ function tokenTemplate(component) {
 				class="token"
 				type="button"
 				?disabled=${component.disabled}
-				aria-expanded=${component.open}
+				aria-expanded=${component.expanded}
 				aria-controls=${component.controls || nothing}
 				@click=${component._handleMenuClick}
 			>
@@ -15230,7 +15635,7 @@ let NLDDToken = class extends LitElement {
   constructor() {
     super(...arguments);
     this.control = "none";
-    this.open = false;
+    this.expanded = false;
     this.disabled = false;
     this.dismissText = "Verwijder";
     this.controls = "";
@@ -15245,9 +15650,9 @@ let NLDDToken = class extends LitElement {
   }
   _handleMenuClick() {
     if (this.disabled) return;
-    this.open = !this.open;
+    this.expanded = !this.expanded;
     this.dispatchEvent(new CustomEvent("toggle", {
-      detail: { open: this.open },
+      detail: { expanded: this.expanded },
       bubbles: true,
       composed: true
     }));
@@ -15262,7 +15667,7 @@ __decorateClass$D([
 ], NLDDToken.prototype, "control", 2);
 __decorateClass$D([
   property({ type: Boolean, reflect: true })
-], NLDDToken.prototype, "open", 2);
+], NLDDToken.prototype, "expanded", 2);
 __decorateClass$D([
   property({ type: Boolean, reflect: true })
 ], NLDDToken.prototype, "disabled", 2);
@@ -16753,7 +17158,7 @@ let NLDDSplitViewPane = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "layout-area";
+    this.style.containerName = "layout-container";
   }
   render() {
     return splitViewPaneTemplate();
@@ -16969,7 +17374,7 @@ let NLDDPage = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "layout-area";
+    this.style.containerName = "layout-container";
     if (this.hasUpdated) {
       this._setupScrollListener();
       if (this.stickyHeader) this._setupHeaderObserver();
@@ -17081,8 +17486,8 @@ const simpleSectionStyles = css`
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
@@ -17102,7 +17507,7 @@ const simpleSectionStyles = css`
 		flex-grow: 1;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -17132,17 +17537,17 @@ const simpleSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$a}) {
+		@container layout-container (max-width: ${smMax$a}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
+		@container layout-container (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@container layout-area (min-width: ${lgMin$9}) {
+		@container layout-container (min-width: ${lgMin$9}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -17177,15 +17582,15 @@ const simpleSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$a}) {
+		@container layout-container (max-width: ${smMax$a}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
+		@container layout-container (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$9}) {
+		@container layout-container (min-width: ${lgMin$9}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17236,7 +17641,17 @@ var __decorateClass$u = (decorators, target, key, kind) => {
 let NLDDSimpleSection = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.fullWidth = false;
+    this.width = "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("max-width", w)) {
+        this.style.setProperty("--_max-width", w);
+      } else {
+        this.style.removeProperty("--_max-width");
+      }
+    }
   }
   _onSlotChange(e) {
     const slot = e.target;
@@ -17249,8 +17664,8 @@ let NLDDSimpleSection = class extends LitElement {
 };
 NLDDSimpleSection.styles = simpleSectionStyles;
 __decorateClass$u([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDSimpleSection.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDSimpleSection.prototype, "width", 2);
 NLDDSimpleSection = __decorateClass$u([
   customElement("nldd-simple-section")
 ], NLDDSimpleSection);
@@ -17269,8 +17684,8 @@ const fullBleedSectionStyles = css`
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
@@ -17285,7 +17700,7 @@ const fullBleedSectionStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -17311,15 +17726,15 @@ const fullBleedSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$9}) {
+		@container layout-container (max-width: ${smMax$9}) {
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
+		@container layout-container (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@container layout-area (min-width: ${lgMin$8}) {
+		@container layout-container (min-width: ${lgMin$8}) {
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 	}
@@ -17353,15 +17768,15 @@ const fullBleedSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$9}) {
+		@container layout-container (max-width: ${smMax$9}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
+		@container layout-container (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$8}) {
+		@container layout-container (min-width: ${lgMin$8}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17412,7 +17827,17 @@ var __decorateClass$t = (decorators, target, key, kind) => {
 let NLDDFullBleedSection = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.fullWidth = false;
+    this.width = "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("max-width", w)) {
+        this.style.setProperty("--_max-width", w);
+      } else {
+        this.style.removeProperty("--_max-width");
+      }
+    }
   }
   _onSlotChange(e) {
     const slot = e.target;
@@ -17425,8 +17850,8 @@ let NLDDFullBleedSection = class extends LitElement {
 };
 NLDDFullBleedSection.styles = fullBleedSectionStyles;
 __decorateClass$t([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDFullBleedSection.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDFullBleedSection.prototype, "width", 2);
 NLDDFullBleedSection = __decorateClass$t([
   customElement("nldd-full-bleed-section")
 ], NLDDFullBleedSection);
@@ -17439,8 +17864,8 @@ const oneThirdTwoThirdsSectionStyles = css`
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
@@ -17455,7 +17880,7 @@ const oneThirdTwoThirdsSectionStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -17484,17 +17909,17 @@ const oneThirdTwoThirdsSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-container (max-width: ${smMax$8}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@container layout-container (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@container layout-area (min-width: ${lgMin$7}) {
+		@container layout-container (min-width: ${lgMin$7}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -17521,15 +17946,15 @@ const oneThirdTwoThirdsSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-container (max-width: ${smMax$8}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@container layout-container (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$7}) {
+		@container layout-container (min-width: ${lgMin$7}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17553,15 +17978,15 @@ const oneThirdTwoThirdsSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-container (max-width: ${smMax$8}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@container layout-container (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$7}) {
+		@container layout-container (min-width: ${lgMin$7}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17608,7 +18033,17 @@ var __decorateClass$s = (decorators, target, key, kind) => {
 let NLDDOneThirdTwoThirdsSection = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.fullWidth = false;
+    this.width = "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("max-width", w)) {
+        this.style.setProperty("--_max-width", w);
+      } else {
+        this.style.removeProperty("--_max-width");
+      }
+    }
   }
   render() {
     return oneThirdTwoThirdsSectionTemplate();
@@ -17616,8 +18051,8 @@ let NLDDOneThirdTwoThirdsSection = class extends LitElement {
 };
 NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles;
 __decorateClass$s([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDOneThirdTwoThirdsSection.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDOneThirdTwoThirdsSection.prototype, "width", 2);
 NLDDOneThirdTwoThirdsSection = __decorateClass$s([
   customElement("nldd-one-third-two-thirds-section")
 ], NLDDOneThirdTwoThirdsSection);
@@ -17630,8 +18065,8 @@ const twoThirdsOneThirdSectionStyles = css`
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
@@ -17646,7 +18081,7 @@ const twoThirdsOneThirdSectionStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -17675,17 +18110,17 @@ const twoThirdsOneThirdSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$7}) {
+		@container layout-container (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}) {
+		@container layout-container (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);
 		}
 
-		@container layout-area (min-width: ${lgMin$6}) {
+		@container layout-container (min-width: ${lgMin$6}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -17712,15 +18147,15 @@ const twoThirdsOneThirdSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$7}) {
+		@container layout-container (max-width: ${smMax$7}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@container layout-container (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$6}) {
+		@container layout-container (min-width: ${lgMin$6}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17744,15 +18179,15 @@ const twoThirdsOneThirdSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$7}) {
+		@container layout-container (max-width: ${smMax$7}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@container layout-container (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$6}) {
+		@container layout-container (min-width: ${lgMin$6}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17799,7 +18234,17 @@ var __decorateClass$r = (decorators, target, key, kind) => {
 let NLDDTwoThirdsOneThirdSection = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.fullWidth = false;
+    this.width = "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("max-width", w)) {
+        this.style.setProperty("--_max-width", w);
+      } else {
+        this.style.removeProperty("--_max-width");
+      }
+    }
   }
   render() {
     return twoThirdsOneThirdSectionTemplate();
@@ -17807,8 +18252,8 @@ let NLDDTwoThirdsOneThirdSection = class extends LitElement {
 };
 NLDDTwoThirdsOneThirdSection.styles = twoThirdsOneThirdSectionStyles;
 __decorateClass$r([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDTwoThirdsOneThirdSection.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDTwoThirdsOneThirdSection.prototype, "width", 2);
 NLDDTwoThirdsOneThirdSection = __decorateClass$r([
   customElement("nldd-two-thirds-one-third-section")
 ], NLDDTwoThirdsOneThirdSection);
@@ -17821,8 +18266,8 @@ const oneHalfOneHalfSectionStyles = css`
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
@@ -17837,7 +18282,7 @@ const oneHalfOneHalfSectionStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -17866,17 +18311,17 @@ const oneHalfOneHalfSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$6}) {
+		@container layout-container (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}) {
+		@container layout-container (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);
 		}
 
-		@container layout-area (min-width: ${lgMin$5}) {
+		@container layout-container (min-width: ${lgMin$5}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -17903,15 +18348,15 @@ const oneHalfOneHalfSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$6}) {
+		@container layout-container (max-width: ${smMax$6}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
+		@container layout-container (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$5}) {
+		@container layout-container (min-width: ${lgMin$5}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17935,15 +18380,15 @@ const oneHalfOneHalfSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$6}) {
+		@container layout-container (max-width: ${smMax$6}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
+		@container layout-container (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$5}) {
+		@container layout-container (min-width: ${lgMin$5}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17990,7 +18435,17 @@ var __decorateClass$q = (decorators, target, key, kind) => {
 let NLDDOneHalfOneHalfSection = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.fullWidth = false;
+    this.width = "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("width")) {
+      const w = this.width;
+      if (w && w !== "full" && CSS.supports("max-width", w)) {
+        this.style.setProperty("--_max-width", w);
+      } else {
+        this.style.removeProperty("--_max-width");
+      }
+    }
   }
   render() {
     return oneHalfOneHalfSectionTemplate();
@@ -17998,8 +18453,8 @@ let NLDDOneHalfOneHalfSection = class extends LitElement {
 };
 NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
 __decorateClass$q([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDOneHalfOneHalfSection.prototype, "fullWidth", 2);
+  property({ type: String, reflect: true })
+], NLDDOneHalfOneHalfSection.prototype, "width", 2);
 NLDDOneHalfOneHalfSection = __decorateClass$q([
   customElement("nldd-one-half-one-half-section")
 ], NLDDOneHalfOneHalfSection);
@@ -18156,7 +18611,7 @@ let NLDDCard = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "layout-area";
+    this.style.containerName = "layout-container";
   }
   render() {
     return cardTemplate(this);
@@ -18862,71 +19317,71 @@ const containerStyles = css`
 
 	/* # Padding — sm container */
 
-	:host([layout-area-sm-padding="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: 0; } }
-	:host([layout-area-sm-padding="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: 0; } }
+	:host([layout-container-sm-padding="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding — md container */
 
-	: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); } }
+	:host([layout-container-md-padding="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: 0; } }
+	:host([layout-container-md-padding="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
+	:host([layout-container-md-padding="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
+	:host([layout-container-md-padding="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
+	:host([layout-container-md-padding="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
+	:host([layout-container-md-padding="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
+	:host([layout-container-md-padding="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
+	:host([layout-container-md-padding="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
+	:host([layout-container-md-padding="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
+	:host([layout-container-md-padding="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
+	:host([layout-container-md-padding="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
+	:host([layout-container-md-padding="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
+	:host([layout-container-md-padding="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
+	:host([layout-container-md-padding="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
+	:host([layout-container-md-padding="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
+	:host([layout-container-md-padding="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
+	:host([layout-container-md-padding="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
+	:host([layout-container-md-padding="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
+	:host([layout-container-md-padding="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding — lg container */
 
-	:host([layout-area-lg-padding="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: 0; } }
-	:host([layout-area-lg-padding="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: 0; } }
+	:host([layout-container-lg-padding="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — base */
@@ -19023,71 +19478,71 @@ const containerStyles = css`
 
 	/* # Padding Inline — sm container */
 
-	:host([layout-area-sm-padding-inline="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: 0; } }
-	:host([layout-area-sm-padding-inline="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding-inline="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding-inline="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding-inline="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding-inline="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding-inline="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding-inline="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding-inline="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding-inline="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding-inline="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding-inline="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding-inline="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding-inline="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding-inline="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding-inline="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding-inline="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding-inline="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding-inline="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding-inline="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: 0; } }
+	:host([layout-container-sm-padding-inline="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding-inline="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding-inline="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding-inline="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding-inline="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding-inline="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding-inline="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding-inline="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding-inline="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding-inline="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding-inline="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding-inline="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding-inline="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding-inline="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding-inline="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding-inline="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding-inline="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding-inline="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — md container */
 
-	: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); } }
+	:host([layout-container-md-padding-inline="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
+	:host([layout-container-md-padding-inline="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
+	:host([layout-container-md-padding-inline="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
+	:host([layout-container-md-padding-inline="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
+	:host([layout-container-md-padding-inline="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
+	:host([layout-container-md-padding-inline="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
+	:host([layout-container-md-padding-inline="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
+	:host([layout-container-md-padding-inline="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
+	:host([layout-container-md-padding-inline="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
+	:host([layout-container-md-padding-inline="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
+	:host([layout-container-md-padding-inline="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
+	:host([layout-container-md-padding-inline="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
+	:host([layout-container-md-padding-inline="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
+	:host([layout-container-md-padding-inline="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
+	:host([layout-container-md-padding-inline="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
+	:host([layout-container-md-padding-inline="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
+	:host([layout-container-md-padding-inline="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
+	:host([layout-container-md-padding-inline="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
+	:host([layout-container-md-padding-inline="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — lg container */
 
-	:host([layout-area-lg-padding-inline="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: 0; } }
-	:host([layout-area-lg-padding-inline="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding-inline="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding-inline="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding-inline="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding-inline="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding-inline="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding-inline="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding-inline="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding-inline="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding-inline="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding-inline="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding-inline="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding-inline="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding-inline="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding-inline="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding-inline="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding-inline="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding-inline="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding-inline="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: 0; } }
+	:host([layout-container-lg-padding-inline="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding-inline="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding-inline="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding-inline="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding-inline="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding-inline="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding-inline="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding-inline="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding-inline="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding-inline="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding-inline="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding-inline="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding-inline="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding-inline="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding-inline="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding-inline="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding-inline="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding-inline="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — base */
@@ -19184,71 +19639,71 @@ const containerStyles = css`
 
 	/* # Padding Block — sm container */
 
-	:host([layout-area-sm-padding-block="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: 0; } }
-	:host([layout-area-sm-padding-block="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding-block="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding-block="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding-block="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding-block="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding-block="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding-block="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding-block="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding-block="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding-block="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding-block="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding-block="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding-block="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding-block="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding-block="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding-block="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding-block="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding-block="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-block: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding-block="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: 0; } }
+	:host([layout-container-sm-padding-block="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding-block="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding-block="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding-block="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding-block="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding-block="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding-block="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding-block="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding-block="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding-block="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding-block="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding-block="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding-block="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding-block="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding-block="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding-block="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding-block="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding-block="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — md container */
 
-	: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); } }
+	:host([layout-container-md-padding-block="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
+	:host([layout-container-md-padding-block="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
+	:host([layout-container-md-padding-block="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
+	:host([layout-container-md-padding-block="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
+	:host([layout-container-md-padding-block="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
+	:host([layout-container-md-padding-block="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
+	:host([layout-container-md-padding-block="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
+	:host([layout-container-md-padding-block="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
+	:host([layout-container-md-padding-block="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
+	:host([layout-container-md-padding-block="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
+	:host([layout-container-md-padding-block="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
+	:host([layout-container-md-padding-block="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
+	:host([layout-container-md-padding-block="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
+	:host([layout-container-md-padding-block="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
+	:host([layout-container-md-padding-block="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
+	:host([layout-container-md-padding-block="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
+	:host([layout-container-md-padding-block="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
+	:host([layout-container-md-padding-block="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
+	:host([layout-container-md-padding-block="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — lg container */
 
-	:host([layout-area-lg-padding-block="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: 0; } }
-	:host([layout-area-lg-padding-block="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding-block="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding-block="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding-block="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding-block="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding-block="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding-block="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding-block="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding-block="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding-block="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding-block="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding-block="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding-block="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding-block="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding-block="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding-block="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding-block="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding-block="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding-block="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: 0; } }
+	:host([layout-container-lg-padding-block="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding-block="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding-block="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding-block="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding-block="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding-block="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding-block="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding-block="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding-block="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding-block="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding-block="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding-block="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding-block="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding-block="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding-block="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding-block="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding-block="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding-block="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — base */
@@ -19345,71 +19800,71 @@ const containerStyles = css`
 
 	/* # Padding Top — sm container */
 
-	:host([layout-area-sm-padding-top="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: 0; } }
-	:host([layout-area-sm-padding-top="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding-top="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding-top="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding-top="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding-top="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding-top="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding-top="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding-top="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding-top="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding-top="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding-top="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding-top="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding-top="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding-top="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding-top="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding-top="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding-top="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding-top="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-top: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding-top="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: 0; } }
+	:host([layout-container-sm-padding-top="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding-top="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding-top="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding-top="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding-top="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding-top="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding-top="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding-top="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding-top="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding-top="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding-top="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding-top="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding-top="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding-top="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding-top="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding-top="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding-top="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding-top="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — md container */
 
-	: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); } }
+	:host([layout-container-md-padding-top="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
+	:host([layout-container-md-padding-top="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
+	:host([layout-container-md-padding-top="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
+	:host([layout-container-md-padding-top="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
+	:host([layout-container-md-padding-top="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
+	:host([layout-container-md-padding-top="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
+	:host([layout-container-md-padding-top="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
+	:host([layout-container-md-padding-top="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
+	:host([layout-container-md-padding-top="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
+	:host([layout-container-md-padding-top="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
+	:host([layout-container-md-padding-top="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
+	:host([layout-container-md-padding-top="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
+	:host([layout-container-md-padding-top="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
+	:host([layout-container-md-padding-top="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
+	:host([layout-container-md-padding-top="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
+	:host([layout-container-md-padding-top="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
+	:host([layout-container-md-padding-top="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
+	:host([layout-container-md-padding-top="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
+	:host([layout-container-md-padding-top="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — lg container */
 
-	:host([layout-area-lg-padding-top="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: 0; } }
-	:host([layout-area-lg-padding-top="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding-top="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding-top="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding-top="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding-top="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding-top="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding-top="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding-top="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding-top="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding-top="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding-top="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding-top="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding-top="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding-top="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding-top="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding-top="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding-top="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding-top="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding-top="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: 0; } }
+	:host([layout-container-lg-padding-top="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding-top="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding-top="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding-top="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding-top="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding-top="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding-top="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding-top="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding-top="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding-top="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding-top="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding-top="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding-top="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding-top="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding-top="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding-top="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding-top="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding-top="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — base */
@@ -19506,71 +19961,71 @@ const containerStyles = css`
 
 	/* # Padding Right — sm container */
 
-	:host([layout-area-sm-padding-right="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: 0; } }
-	:host([layout-area-sm-padding-right="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding-right="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding-right="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding-right="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding-right="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding-right="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding-right="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding-right="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding-right="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding-right="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding-right="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding-right="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding-right="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding-right="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding-right="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding-right="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding-right="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding-right="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-right: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding-right="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: 0; } }
+	:host([layout-container-sm-padding-right="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding-right="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding-right="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding-right="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding-right="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding-right="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding-right="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding-right="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding-right="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding-right="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding-right="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding-right="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding-right="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding-right="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding-right="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding-right="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding-right="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding-right="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — md container */
 
-	: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); } }
+	:host([layout-container-md-padding-right="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
+	:host([layout-container-md-padding-right="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
+	:host([layout-container-md-padding-right="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
+	:host([layout-container-md-padding-right="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
+	:host([layout-container-md-padding-right="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
+	:host([layout-container-md-padding-right="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
+	:host([layout-container-md-padding-right="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
+	:host([layout-container-md-padding-right="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
+	:host([layout-container-md-padding-right="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
+	:host([layout-container-md-padding-right="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
+	:host([layout-container-md-padding-right="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
+	:host([layout-container-md-padding-right="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
+	:host([layout-container-md-padding-right="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
+	:host([layout-container-md-padding-right="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
+	:host([layout-container-md-padding-right="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
+	:host([layout-container-md-padding-right="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
+	:host([layout-container-md-padding-right="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
+	:host([layout-container-md-padding-right="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
+	:host([layout-container-md-padding-right="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — lg container */
 
-	:host([layout-area-lg-padding-right="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: 0; } }
-	:host([layout-area-lg-padding-right="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding-right="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding-right="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding-right="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding-right="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding-right="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding-right="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding-right="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding-right="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding-right="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding-right="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding-right="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding-right="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding-right="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding-right="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding-right="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding-right="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding-right="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding-right="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: 0; } }
+	:host([layout-container-lg-padding-right="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding-right="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding-right="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding-right="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding-right="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding-right="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding-right="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding-right="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding-right="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding-right="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding-right="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding-right="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding-right="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding-right="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding-right="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding-right="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding-right="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding-right="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — base */
@@ -19667,71 +20122,71 @@ const containerStyles = css`
 
 	/* # Padding Bottom — sm container */
 
-	:host([layout-area-sm-padding-bottom="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: 0; } }
-	:host([layout-area-sm-padding-bottom="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding-bottom="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding-bottom="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding-bottom="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding-bottom="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding-bottom="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding-bottom="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding-bottom="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding-bottom="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding-bottom="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding-bottom="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding-bottom="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding-bottom="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding-bottom="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding-bottom="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding-bottom="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding-bottom="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding-bottom="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding-bottom="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: 0; } }
+	:host([layout-container-sm-padding-bottom="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding-bottom="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding-bottom="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding-bottom="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding-bottom="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding-bottom="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding-bottom="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding-bottom="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding-bottom="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding-bottom="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding-bottom="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding-bottom="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding-bottom="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding-bottom="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding-bottom="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding-bottom="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding-bottom="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding-bottom="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — md container */
 
-	: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); } }
+	:host([layout-container-md-padding-bottom="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
+	:host([layout-container-md-padding-bottom="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
+	:host([layout-container-md-padding-bottom="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
+	:host([layout-container-md-padding-bottom="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
+	:host([layout-container-md-padding-bottom="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
+	:host([layout-container-md-padding-bottom="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
+	:host([layout-container-md-padding-bottom="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
+	:host([layout-container-md-padding-bottom="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
+	:host([layout-container-md-padding-bottom="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
+	:host([layout-container-md-padding-bottom="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
+	:host([layout-container-md-padding-bottom="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
+	:host([layout-container-md-padding-bottom="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
+	:host([layout-container-md-padding-bottom="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
+	:host([layout-container-md-padding-bottom="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
+	:host([layout-container-md-padding-bottom="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
+	:host([layout-container-md-padding-bottom="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
+	:host([layout-container-md-padding-bottom="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
+	:host([layout-container-md-padding-bottom="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
+	:host([layout-container-md-padding-bottom="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — lg container */
 
-	:host([layout-area-lg-padding-bottom="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: 0; } }
-	:host([layout-area-lg-padding-bottom="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding-bottom="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding-bottom="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding-bottom="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding-bottom="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding-bottom="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding-bottom="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding-bottom="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding-bottom="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding-bottom="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding-bottom="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding-bottom="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding-bottom="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding-bottom="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding-bottom="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding-bottom="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding-bottom="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding-bottom="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding-bottom="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: 0; } }
+	:host([layout-container-lg-padding-bottom="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding-bottom="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding-bottom="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding-bottom="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding-bottom="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding-bottom="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding-bottom="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding-bottom="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding-bottom="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding-bottom="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding-bottom="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding-bottom="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding-bottom="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding-bottom="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding-bottom="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding-bottom="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding-bottom="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding-bottom="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — base */
@@ -19828,71 +20283,71 @@ const containerStyles = css`
 
 	/* # Padding Left — sm container */
 
-	:host([layout-area-sm-padding-left="0"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: 0; } }
-	:host([layout-area-sm-padding-left="2"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-2); } }
-	:host([layout-area-sm-padding-left="4"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-4); } }
-	:host([layout-area-sm-padding-left="6"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-6); } }
-	:host([layout-area-sm-padding-left="8"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-8); } }
-	:host([layout-area-sm-padding-left="10"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-10); } }
-	:host([layout-area-sm-padding-left="12"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-12); } }
-	:host([layout-area-sm-padding-left="16"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-16); } }
-	:host([layout-area-sm-padding-left="20"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-20); } }
-	:host([layout-area-sm-padding-left="24"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-24); } }
-	:host([layout-area-sm-padding-left="28"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-28); } }
-	:host([layout-area-sm-padding-left="32"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-32); } }
-	:host([layout-area-sm-padding-left="40"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-40); } }
-	:host([layout-area-sm-padding-left="44"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-44); } }
-	:host([layout-area-sm-padding-left="48"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-48); } }
-	:host([layout-area-sm-padding-left="56"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-56); } }
-	:host([layout-area-sm-padding-left="64"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-64); } }
-	:host([layout-area-sm-padding-left="80"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-80); } }
-	:host([layout-area-sm-padding-left="96"]) .container { @container layout-area (max-width: ${smMax$4}) { padding-left: var(--primitives-space-96); } }
+	:host([layout-container-sm-padding-left="0"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: 0; } }
+	:host([layout-container-sm-padding-left="2"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-2); } }
+	:host([layout-container-sm-padding-left="4"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-4); } }
+	:host([layout-container-sm-padding-left="6"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-6); } }
+	:host([layout-container-sm-padding-left="8"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-8); } }
+	:host([layout-container-sm-padding-left="10"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-10); } }
+	:host([layout-container-sm-padding-left="12"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-12); } }
+	:host([layout-container-sm-padding-left="16"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-16); } }
+	:host([layout-container-sm-padding-left="20"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-20); } }
+	:host([layout-container-sm-padding-left="24"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-24); } }
+	:host([layout-container-sm-padding-left="28"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-28); } }
+	:host([layout-container-sm-padding-left="32"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-32); } }
+	:host([layout-container-sm-padding-left="40"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-40); } }
+	:host([layout-container-sm-padding-left="44"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-44); } }
+	:host([layout-container-sm-padding-left="48"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-48); } }
+	:host([layout-container-sm-padding-left="56"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-56); } }
+	:host([layout-container-sm-padding-left="64"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-64); } }
+	:host([layout-container-sm-padding-left="80"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-80); } }
+	:host([layout-container-sm-padding-left="96"]) .container { @container layout-container (max-width: ${smMax$4}) { padding-left: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — md container */
 
-	: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); } }
+	:host([layout-container-md-padding-left="0"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
+	:host([layout-container-md-padding-left="2"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
+	:host([layout-container-md-padding-left="4"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
+	:host([layout-container-md-padding-left="6"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
+	:host([layout-container-md-padding-left="8"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
+	:host([layout-container-md-padding-left="10"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
+	:host([layout-container-md-padding-left="12"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
+	:host([layout-container-md-padding-left="16"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
+	:host([layout-container-md-padding-left="20"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
+	:host([layout-container-md-padding-left="24"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
+	:host([layout-container-md-padding-left="28"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
+	:host([layout-container-md-padding-left="32"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
+	:host([layout-container-md-padding-left="40"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
+	:host([layout-container-md-padding-left="44"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
+	:host([layout-container-md-padding-left="48"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
+	:host([layout-container-md-padding-left="56"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
+	:host([layout-container-md-padding-left="64"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
+	:host([layout-container-md-padding-left="80"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
+	:host([layout-container-md-padding-left="96"]) .container { @container layout-container (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — lg container */
 
-	:host([layout-area-lg-padding-left="0"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: 0; } }
-	:host([layout-area-lg-padding-left="2"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-2); } }
-	:host([layout-area-lg-padding-left="4"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-4); } }
-	:host([layout-area-lg-padding-left="6"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-6); } }
-	:host([layout-area-lg-padding-left="8"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-8); } }
-	:host([layout-area-lg-padding-left="10"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-10); } }
-	:host([layout-area-lg-padding-left="12"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-12); } }
-	:host([layout-area-lg-padding-left="16"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-16); } }
-	:host([layout-area-lg-padding-left="20"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-20); } }
-	:host([layout-area-lg-padding-left="24"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-24); } }
-	:host([layout-area-lg-padding-left="28"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-28); } }
-	:host([layout-area-lg-padding-left="32"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-32); } }
-	:host([layout-area-lg-padding-left="40"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-40); } }
-	:host([layout-area-lg-padding-left="44"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-44); } }
-	:host([layout-area-lg-padding-left="48"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-48); } }
-	:host([layout-area-lg-padding-left="56"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-56); } }
-	:host([layout-area-lg-padding-left="64"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-64); } }
-	:host([layout-area-lg-padding-left="80"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-80); } }
-	:host([layout-area-lg-padding-left="96"]) .container { @container layout-area (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-96); } }
+	:host([layout-container-lg-padding-left="0"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: 0; } }
+	:host([layout-container-lg-padding-left="2"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-2); } }
+	:host([layout-container-lg-padding-left="4"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-4); } }
+	:host([layout-container-lg-padding-left="6"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-6); } }
+	:host([layout-container-lg-padding-left="8"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-8); } }
+	:host([layout-container-lg-padding-left="10"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-10); } }
+	:host([layout-container-lg-padding-left="12"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-12); } }
+	:host([layout-container-lg-padding-left="16"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-16); } }
+	:host([layout-container-lg-padding-left="20"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-20); } }
+	:host([layout-container-lg-padding-left="24"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-24); } }
+	:host([layout-container-lg-padding-left="28"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-28); } }
+	:host([layout-container-lg-padding-left="32"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-32); } }
+	:host([layout-container-lg-padding-left="40"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-40); } }
+	:host([layout-container-lg-padding-left="44"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-44); } }
+	:host([layout-container-lg-padding-left="48"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-48); } }
+	:host([layout-container-lg-padding-left="56"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-56); } }
+	:host([layout-container-lg-padding-left="64"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-64); } }
+	:host([layout-container-lg-padding-left="80"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-80); } }
+	:host([layout-container-lg-padding-left="96"]) .container { @container layout-container (min-width: ${lgMin$2}) { padding-left: var(--primitives-space-96); } }
 
 `;
 function containerTemplate(_component) {
@@ -20363,7 +20818,7 @@ let NLDDPopover = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "layout-area";
+    this.style.containerName = "layout-container";
     if (!this.hasAttribute("popover")) this.setAttribute("popover", "");
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
     if (!this.hasAttribute("role")) this.setAttribute("role", "dialog");
@@ -20638,7 +21093,7 @@ const sheetStyles = css`
 	/* # Host */
 
 	:host {
-		--_custom-width: initial;
+		--_width: initial;
 
 		display: block;
 	}
@@ -20722,12 +21177,12 @@ const sheetStyles = css`
 	:host([placement='right']) .sheet,
 	:host(:not([placement])) .sheet {
 		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
-		width: min(var(--_custom-width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+		width: min(var(--_width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
 		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
 		border-radius: var(--semantics-overlays-corner-radius);
 
 		@media (min-width: ${lgMin$1}) {
-			width: min(var(--_custom-width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+			width: min(var(--_width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
 		}
 
 		&[open] {
@@ -20744,12 +21199,12 @@ const sheetStyles = css`
 
 	:host([placement='left']) .sheet {
 		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
-		width: min(var(--_custom-width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+		width: min(var(--_width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
 		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
 		border-radius: var(--semantics-overlays-corner-radius);
 
 		@media (min-width: ${lgMin$1}) {
-			width: min(var(--_custom-width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+			width: min(var(--_width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
 		}
 
 		&[open] {
@@ -20903,9 +21358,9 @@ let NLDDSheet = class extends LitElement {
   updated(changed) {
     if (changed.has("width")) {
       if (this.width) {
-        this.style.setProperty("--_custom-width", this.width);
+        this.style.setProperty("--_width", this.width);
       } else {
-        this.style.removeProperty("--_custom-width");
+        this.style.removeProperty("--_width");
       }
     }
   }
@@ -20915,7 +21370,7 @@ let NLDDSheet = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "layout-area";
+    this.style.containerName = "layout-container";
     this.addEventListener("dismiss", this._handleDismiss);
   }
   disconnectedCallback() {
@@ -21251,7 +21706,7 @@ let NLDDWindow = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "layout-area";
+    this.style.containerName = "layout-container";
     this.addEventListener("dismiss", this._handleDismiss);
     this._detectDragHandle();
     window.addEventListener("resize", this._handleResize);
@@ -21590,7 +22045,7 @@ const template$a = (itemsLabel, hasHeader, type, isEmpty, emptyText, emptySuppor
 const nlddListTranslations = {
   "components.list.items-label-text": "Lijst",
   "components.list.navigation-label-text": "Navigatie",
-  "components.list.empty-text": "Geen resultaten",
+  "components.list.empty-text": "Geen items",
   "components.list.reorder-moved-text": "Item verplaatst naar positie {position}.",
   "components.list.reorder-dropped-text": "Item neergezet op positie {position}.",
   "components.list.reorder-no-change-text": "Item neergezet. Positie ongewijzigd.",
@@ -21747,6 +22202,8 @@ let NLDDList = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "list-container";
     this.addEventListener("pointerdown", this._onPointerDown);
     this.addEventListener("keydown", this._onKeyDown);
   }
@@ -22469,7 +22926,7 @@ const cellStyles = css`
 
 		display: flex;
 		flex-direction: column;
-		align-items: stretch;
+		align-items: flex-start;
 		flex-shrink: 0;
 		justify-content: center;
 		width: var(--_width);
@@ -22485,19 +22942,20 @@ const cellStyles = css`
 
 	/* # Width */
 
-	:host([width='stretch']) {
+	:host([width='full']) {
 		flex-grow: 1;
 		flex-shrink: 1;
 	}
 
 	:host([width='fit-content']),
-	:host(:not([width])) {
+	:host(:not([width])),
+	:host([width='']) {
 		flex-grow: 0;
 		flex-basis: auto;
 		width: fit-content;
 	}
 
-	:host([width]:not([width='stretch']):not([width='fit-content'])) {
+	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
 		flex-shrink: 0;
 	}
 
@@ -22506,13 +22964,7 @@ const cellStyles = css`
 	}
 
 
-	/* # Vertical alignment
-	 *
-	 * 'center' (default): the cell stretches to fill the full row height, then
-	 * centers its content within that space. When min-height is set, the cell is
-	 * at least that tall and the content sits centered inside it. For strict top
-	 * alignment without a minimum height, use vertical-alignment="top".
-	 */
+	/* # Vertical alignment */
 
 	:host([vertical-alignment='center']),
 	:host(:not([vertical-alignment])) {
@@ -22528,6 +22980,22 @@ const cellStyles = css`
 	}
 
 
+	/* # Horizontal alignment */
+
+	:host([horizontal-alignment='left']),
+	:host(:not([horizontal-alignment])) {
+		align-items: flex-start;
+	}
+
+	:host([horizontal-alignment='center']) {
+		align-items: center;
+	}
+
+	:host([horizontal-alignment='right']) {
+		align-items: flex-end;
+	}
+
+
 	/* # Slotted content */
 
 	::slotted(*) {
@@ -22545,11 +23013,12 @@ var __decorateClass$e = (decorators, target, key, kind) => {
   if (kind && result) __defProp$e(target, key, result);
   return result;
 };
-let NLDDCell = class extends VisibilityMixin(LitElement) {
+let NLDDCell = class extends VisibilityMixin(LitElement, "list-container") {
   constructor() {
     super(...arguments);
     this.width = "fit-content";
     this.verticalAlignment = "center";
+    this.horizontalAlignment = "left";
   }
   updated(changed) {
     super.updated(changed);
@@ -22558,12 +23027,17 @@ let NLDDCell = class extends VisibilityMixin(LitElement) {
     }
   }
   _applyDimensionStyles() {
-    const widthIsKeyword = this.width === "stretch" || this.width === "fit-content";
-    if (this.width && !widthIsKeyword) {
-      this.style.setProperty("--_width", this.width);
+    const w = this.width;
+    const widthIsKeyword = w === "full" || w === "fit-content";
+    const widthIsValidLength = !!w && !widthIsKeyword && CSS.supports("width", w);
+    if (widthIsValidLength) {
+      this.style.setProperty("--_width", w);
     } else {
       this.style.removeProperty("--_width");
     }
+    if (w && !widthIsKeyword && !widthIsValidLength) {
+      this.width = "";
+    }
     if (this.minWidth) {
       this.style.setProperty("--_min-width", this.minWidth);
     } else {
@@ -22600,6 +23074,9 @@ __decorateClass$e([
 __decorateClass$e([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDCell.prototype, "verticalAlignment", 2);
+__decorateClass$e([
+  property({ reflect: true, attribute: "horizontal-alignment" })
+], NLDDCell.prototype, "horizontalAlignment", 2);
 NLDDCell = __decorateClass$e([
   customElement("nldd-cell")
 ], NLDDCell);
@@ -22630,8 +23107,9 @@ const titleCellStyles = css`
 
 	/* # Width */
 
-	:host([width='stretch']),
-	:host(:not([width])) {
+	:host([width='full']),
+	:host(:not([width])),
+	:host([width='']) {
 		flex-grow: 1;
 		flex-shrink: 1;
 	}
@@ -22643,7 +23121,7 @@ const titleCellStyles = css`
 		width: fit-content;
 	}
 
-	:host([width]:not([width='stretch']):not([width='fit-content'])) {
+	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
 		flex-shrink: 0;
 	}
 
@@ -22681,6 +23159,10 @@ const titleCellStyles = css`
 		align-items: flex-start;
 	}
 
+	:host([horizontal-alignment='center']) {
+		align-items: center;
+	}
+
 	:host([horizontal-alignment='right']) {
 		align-items: flex-end;
 	}
@@ -22697,6 +23179,10 @@ const titleCellStyles = css`
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
+	:host([horizontal-alignment='center']) .title-cell__overline {
+		text-align: center;
+	}
+
 	:host([horizontal-alignment='right']) .title-cell__overline {
 		text-align: right;
 	}
@@ -22713,6 +23199,10 @@ const titleCellStyles = css`
 		text-wrap: pretty;
 	}
 
+	:host([horizontal-alignment='center']) .title-cell__title {
+		text-align: center;
+	}
+
 	:host([horizontal-alignment='right']) .title-cell__title {
 		text-align: right;
 	}
@@ -22766,6 +23256,10 @@ const titleCellStyles = css`
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
+	:host([horizontal-alignment='center']) .title-cell__supporting-text {
+		text-align: center;
+	}
+
 	:host([horizontal-alignment='right']) .title-cell__supporting-text {
 		text-align: right;
 	}
@@ -22880,12 +23374,12 @@ var __decorateClass$d = (decorators, target, key, kind) => {
   if (kind && result) __defProp$d(target, key, result);
   return result;
 };
-let NLDDTitleCell = class extends VisibilityMixin(LitElement) {
+let NLDDTitleCell = class extends VisibilityMixin(LitElement, "list-container") {
   constructor() {
     super(...arguments);
     this.size = 5;
     this.color = "default";
-    this.width = "stretch";
+    this.width = "full";
     this.horizontalAlignment = "left";
     this.verticalAlignment = "center";
     this.text = "";
@@ -22925,12 +23419,17 @@ let NLDDTitleCell = class extends VisibilityMixin(LitElement) {
     }
   }
   _applyDimensionStyles() {
-    const widthIsKeyword = this.width === "stretch" || this.width === "fit-content";
-    if (this.width && !widthIsKeyword) {
-      this.style.setProperty("--_width", this.width);
+    const w = this.width;
+    const widthIsKeyword = w === "full" || w === "fit-content";
+    const widthIsValidLength = !!w && !widthIsKeyword && CSS.supports("width", w);
+    if (widthIsValidLength) {
+      this.style.setProperty("--_width", w);
     } else {
       this.style.removeProperty("--_width");
     }
+    if (w && !widthIsKeyword && !widthIsValidLength) {
+      this.width = "";
+    }
     if (this.minWidth) {
       this.style.setProperty("--_min-width", this.minWidth);
     } else {
@@ -23033,8 +23532,9 @@ const descriptionCellStyles = css`
 
 	/* # Width */
 
-	:host([width='stretch']),
-	:host(:not([width])) {
+	:host([width='full']),
+	:host(:not([width])),
+	:host([width='']) {
 		flex-grow: 1;
 		flex-shrink: 1;
 	}
@@ -23046,7 +23546,7 @@ const descriptionCellStyles = css`
 		width: fit-content;
 	}
 
-	:host([width]:not([width='stretch']):not([width='fit-content'])) {
+	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
 		flex-shrink: 0;
 	}
 
@@ -23122,10 +23622,10 @@ var __decorateClass$c = (decorators, target, key, kind) => {
   if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-let NLDDDescriptionCell = class extends VisibilityMixin(LitElement) {
+let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "list-container") {
   constructor() {
     super(...arguments);
-    this.width = "stretch";
+    this.width = "full";
     this.verticalAlignment = "center";
   }
   updated(changed) {
@@ -23135,12 +23635,17 @@ let NLDDDescriptionCell = class extends VisibilityMixin(LitElement) {
     }
   }
   _applyDimensionStyles() {
-    const widthIsKeyword = this.width === "stretch" || this.width === "fit-content";
-    if (this.width && !widthIsKeyword) {
-      this.style.setProperty("--_width", this.width);
+    const w = this.width;
+    const widthIsKeyword = w === "full" || w === "fit-content";
+    const widthIsValidLength = !!w && !widthIsKeyword && CSS.supports("width", w);
+    if (widthIsValidLength) {
+      this.style.setProperty("--_width", w);
     } else {
       this.style.removeProperty("--_width");
     }
+    if (w && !widthIsKeyword && !widthIsValidLength) {
+      this.width = "";
+    }
     if (this.minWidth) {
       this.style.setProperty("--_min-width", this.minWidth);
     } else {
@@ -23581,12 +24086,12 @@ const menuBarItemStyles = css`
 		}
 	}
 
-	:host([open]) .menu-bar-item::before {
+	:host([expanded]) .menu-bar-item::before {
 		background-color: var(--components-menu-bar-item-is-open-indicator-background-color);
 	}
 
 	@media (hover: hover) {
-		:host([open]) .menu-bar-item:hover::before {
+		:host([expanded]) .menu-bar-item:hover::before {
 			background-color: var(--components-menu-bar-item-is-hovered-indicator-background-color);
 		}
 	}
@@ -23705,7 +24210,7 @@ function template$3(component) {
   const ariaLabel = component.accessibleLabel || (isIconOnly ? component.text : nothing);
   const ariaCurrent = component.current ? component.currentType : nothing;
   const ariaHaspopup = component.expandable ? "menu" : component.haspopup || nothing;
-  const ariaExpanded = component.expandable || component.haspopup ? String(component.open) : nothing;
+  const ariaExpanded = component.expandable || component.haspopup ? String(component.expanded) : nothing;
   if (isLink) {
     return html`
 			<a class="menu-bar-item"
@@ -23785,7 +24290,7 @@ let NLDDMenuBarItem = class extends LitElement {
     this.disabled = false;
     this.accessibleLabel = "";
     this.haspopup = "";
-    this.open = false;
+    this.expanded = false;
     this._menu = null;
     this._menuOpen = false;
     this._menuClosedAt = 0;
@@ -23842,10 +24347,10 @@ let NLDDMenuBarItem = class extends LitElement {
     const menu = document.createElement("nldd-menu");
     menu.setAttribute("placement", "bottom-start");
     menu.addEventListener("toggle", (event) => {
-      const open = event.newState === "open";
-      this._menuOpen = open;
-      this.open = open;
-      if (!open) this._menuClosedAt = Date.now();
+      const isOpen = event.newState === "open";
+      this._menuOpen = isOpen;
+      this.expanded = isOpen;
+      if (!isOpen) this._menuClosedAt = Date.now();
     });
     document.body.appendChild(menu);
     this._menu = menu;
@@ -23919,7 +24424,7 @@ __decorateClass$9([
 ], NLDDMenuBarItem.prototype, "haspopup", 2);
 __decorateClass$9([
   property({ type: Boolean, reflect: true })
-], NLDDMenuBarItem.prototype, "open", 2);
+], NLDDMenuBarItem.prototype, "expanded", 2);
 NLDDMenuBarItem = __decorateClass$9([
   customElement("nldd-menu-bar-item")
 ], NLDDMenuBarItem);
@@ -24093,11 +24598,11 @@ let NLDDMenuBar = class extends withTranslations(LitElement, nlddMenuBarTranslat
     const menu = document.createElement("nldd-menu");
     menu.setAttribute("placement", "bottom-end");
     menu.addEventListener("toggle", (event) => {
-      const open = event.newState === "open";
-      this._overflowMenuOpen = open;
-      if (!open) this._overflowMenuClosedAt = Date.now();
+      const isOpen = event.newState === "open";
+      this._overflowMenuOpen = isOpen;
+      if (!isOpen) this._overflowMenuClosedAt = Date.now();
       const item = this._overflowButton?.querySelector("nldd-menu-bar-item");
-      if (item) item.open = open;
+      if (item) item.expanded = isOpen;
     });
     document.body.appendChild(menu);
     return menu;
@@ -24322,11 +24827,11 @@ const topNavigationBarStyles = css`
 			--_logo-width: var(--primitives-space-48);
 		}
 
-		@container layout-area (min-width: ${mdMin$1}) {
+		@container layout-container (min-width: ${mdMin$1}) {
 			--_logo-width: var(--primitives-space-44);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			--_logo-width: var(--primitives-space-48);
 		}
 	}
@@ -24366,11 +24871,11 @@ const topNavigationBarStyles = css`
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 		}
 
-		@container layout-area (min-width: ${mdMin$1}) {
+		@container layout-container (min-width: ${mdMin$1}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 		}
 	}
@@ -24485,11 +24990,11 @@ const topNavigationBarStyles = css`
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 		}
 
-		@container layout-area (min-width: ${mdMin$1}) {
+		@container layout-container (min-width: ${mdMin$1}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 		}
 
@@ -24820,10 +25325,10 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
         this._globalMenuSheet = this._createGlobalMenuSheet();
         const menuButtonItem = this._menuButton?.querySelector("nldd-menu-bar-item");
         this._globalMenuSheet.addEventListener("open", () => {
-          if (menuButtonItem) menuButtonItem.open = true;
+          if (menuButtonItem) menuButtonItem.expanded = true;
         });
         this._globalMenuSheet.addEventListener("close", () => {
-          if (menuButtonItem) menuButtonItem.open = false;
+          if (menuButtonItem) menuButtonItem.expanded = false;
         });
       }
       this._syncGlobalMenuSheetItems();
@@ -25108,11 +25613,13 @@ const topTitleBarStyles = css`
 		display: var(--context-back-button-display, flex);
 		flex-direction: row;
 		align-items: center;
+		min-width: 0;
 		margin-top: var(--primitives-space-6);
 	}
 
 	.top-title-bar__text-back-button {
 		display: flex;
+		min-width: 0;
 	}
 
 	:host(.is-compact) .top-title-bar__text-back-button {
@@ -25216,6 +25723,7 @@ function topTitleBarTemplate(component) {
 								start-icon="chevron-left"
 								text=${component.backText}
 								href=${component.backHref || nothing}
+								single-line
 								@click=${component._handleBack}
 							></nldd-button>
 						</div>
@@ -25403,6 +25911,8 @@ const tabBarStyles = css`
 	/* # Host */
 
 	:host {
+		--_tab-bar-item-indicator-inset: var(--primitives-space-4);
+
 		display: inline-block;
 		position: relative;
 		isolation: isolate;
@@ -25413,7 +25923,7 @@ const tabBarStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([centered]) {
 		display: block;
 		width: 100%;
 	}
@@ -25428,7 +25938,7 @@ const tabBarStyles = css`
 		align-items: center;
 	}
 
-	:host([full-width]) .tab-bar {
+	:host([centered]) .tab-bar {
 		justify-content: center;
 	}
 
@@ -25490,22 +26000,20 @@ const tabBarItemStyles = css`
 	}
 
 	:host([variant='icon-and-text']) .tab-bar__item {
-		flex-direction: row;
 		gap: var(--semantics-buttons-md-gap);
 		padding: var(--primitives-space-8) var(--primitives-space-12);
 		height: var(--semantics-controls-md-min-size);
 	}
 
 	:host([variant='text']) .tab-bar__item {
-		flex-direction: row;
 		padding: var(--primitives-space-8) var(--primitives-space-12);
 		height: var(--semantics-controls-md-min-size);
 	}
 
 	:host([variant='icon']) .tab-bar__item {
-		flex-direction: row;
-		padding: var(--primitives-space-8);
+		padding: 0;
 		height: var(--semantics-controls-md-min-size);
+		width: calc(var(--semantics-controls-md-min-size) - var(--_tab-bar-item-indicator-inset));
 	}
 
 	:host([variant='compact']) .tab-bar__item {
@@ -25522,7 +26030,7 @@ const tabBarItemStyles = css`
 			height: var(--semantics-controls-lg-min-size);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			flex-direction: column;
 			gap: 0;
 			padding: var(--primitives-space-8);
@@ -25544,8 +26052,9 @@ const tabBarItemStyles = css`
 	.tab-bar__item::before {
 		content: '';
 		position: absolute;
-		inset: var(--primitives-space-4) var(--primitives-space-2);
-		border-radius: var(--primitives-corner-radius-sm);
+		inset-block: var(--_tab-bar-item-indicator-inset);
+		inset-inline: calc(var(--_tab-bar-item-indicator-inset) / 2);
+		border-radius: calc(var(--semantics-controls-md-corner-radius) - (var(--_tab-bar-item-indicator-inset) / 2));
 		background-color: transparent;
 		z-index: 0;
 		pointer-events: none;
@@ -25565,9 +26074,6 @@ const tabBarItemStyles = css`
 		}
 	}
 
-
-	/* # Focus */
-
 	.tab-bar__item:focus-visible::before {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
@@ -25584,8 +26090,30 @@ const tabBarItemStyles = css`
 		position: relative;
 		z-index: 1;
 		flex-shrink: 0;
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
+		width: var(--semantics-buttons-md-icon-size);
+		height: var(--semantics-buttons-md-icon-size);
+	}
+
+	:host([variant='icon']) .tab-bar__item-icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
+	:host([variant='compact']) .tab-bar__item-icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
+	:host([responsive]) .tab-bar__item-icon {
+		@media (max-width: ${smMax}) {
+			width: var(--semantics-buttons-md-icon-only-icon-size);
+			height: var(--semantics-buttons-md-icon-only-icon-size);
+		}
+
+		@container layout-container (max-width: ${smMax}) {
+			width: var(--semantics-buttons-md-icon-only-icon-size);
+			height: var(--semantics-buttons-md-icon-only-icon-size);
+		}
 	}
 
 	:host([variant='text']) .tab-bar__item-icon {
@@ -25619,7 +26147,7 @@ const tabBarItemStyles = css`
 			font: var(--primitives-font-body-xxs-bold-flat);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			font: var(--primitives-font-body-xxs-bold-flat);
 		}
 	}
@@ -25799,7 +26327,7 @@ let NLDDTabBar = class extends LitElement {
     super(...arguments);
     this.compact = false;
     this.responsive = false;
-    this.fullWidth = false;
+    this.centered = false;
     this.variant = "";
     this.navigation = false;
     this.accessibleLabel = "";
@@ -25913,8 +26441,8 @@ __decorateClass$4([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBar.prototype, "responsive", 2);
 __decorateClass$4([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDTabBar.prototype, "fullWidth", 2);
+  property({ type: Boolean, reflect: true })
+], NLDDTabBar.prototype, "centered", 2);
 __decorateClass$4([
   property({ type: String, reflect: true })
 ], NLDDTabBar.prototype, "variant", 2);
@@ -26425,7 +26953,7 @@ function documentTabBarItemTemplate(component) {
 				@click=${component._handleClick}
 			>${tabContent}</button>`;
   return html`
-		<nldd-tooltip text=${tooltipText} ?disabled=${!component._isShort}>
+		<nldd-tooltip text=${tooltipText} timing=${component._isShort ? "default" : "never"}>
 			<div class="document-tab-bar__item">
 				${tab}
 				<button class="document-tab-bar__item-dismiss-button"
@@ -27135,6 +27663,8 @@ const paginationStyles = css`
 	/* # Host */
 
 	:host {
+		--_pagination-page-button-indicator-inset: var(--primitives-space-4);
+
 		display: block;
 		container-type: inline-size;
 		isolation: isolate;
@@ -27145,7 +27675,7 @@ const paginationStyles = css`
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([centered]) {
 		display: flex;
 		justify-content: center;
 	}
@@ -27214,8 +27744,8 @@ const paginationStyles = css`
 	.pagination__page-button::before {
 		content: '';
 		position: absolute;
-		inset: var(--primitives-space-4);
-		border-radius: calc(var(--semantics-controls-md-corner-radius) - var(--primitives-space-4) / 2);
+		inset: var(--_pagination-page-button-indicator-inset);
+		border-radius: calc(var(--semantics-controls-md-corner-radius) - var(--_pagination-page-button-indicator-inset) / 2);
 		background-color: transparent;
 		pointer-events: none;
 	}
@@ -27479,7 +28009,7 @@ let NLDDPagination = class extends LitElement {
     this.current = 1;
     this.total = 1;
     this.disabled = false;
-    this.fullWidth = false;
+    this.centered = false;
     this.hrefPattern = "";
     this.translations = {};
     this._mergedTranslations = { ...nlddPaginationTranslations };
@@ -27554,8 +28084,8 @@ __decorateClass$2([
   property({ type: Boolean, reflect: true })
 ], NLDDPagination.prototype, "disabled", 2);
 __decorateClass$2([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], NLDDPagination.prototype, "fullWidth", 2);
+  property({ type: Boolean, reflect: true })
+], NLDDPagination.prototype, "centered", 2);
 __decorateClass$2([
   property({ type: String, attribute: "href-pattern" })
 ], NLDDPagination.prototype, "hrefPattern", 2);
@@ -27810,28 +28340,28 @@ const badgeStyles = css`
 
 	/* ## Variants */
 
-	:host([variant="critical"]),
-	:host(:not([variant])) {
+	:host([color="critical"]),
+	:host(:not([color])) {
 		--_background-color: var(--components-badge-critical-background-color);
 		--_content-color: var(--components-badge-critical-content-color);
 	}
 
-	:host([variant="accent"]) {
+	:host([color="accent"]) {
 		--_background-color: var(--components-badge-accent-background-color);
 		--_content-color: var(--components-badge-accent-content-color);
 	}
 
-	:host([variant="neutral"]) {
+	:host([color="neutral"]) {
 		--_background-color: var(--components-badge-neutral-background-color);
 		--_content-color: var(--components-badge-neutral-content-color);
 	}
 
-	:host([variant="warning"]) {
+	:host([color="warning"]) {
 		--_background-color: var(--components-badge-warning-background-color);
 		--_content-color: var(--components-badge-warning-content-color);
 	}
 
-	:host([variant="success"]) {
+	:host([color="success"]) {
 		--_background-color: var(--components-badge-success-background-color);
 		--_content-color: var(--components-badge-success-content-color);
 	}
@@ -27944,7 +28474,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 let NLDDBadge = class extends withTranslations(LitElement, nlddBadgeTranslations) {
   constructor() {
     super(...arguments);
-    this.variant = "critical";
+    this.color = "critical";
     this.size = "md";
     this.text = "";
     this.number = void 0;
@@ -27980,7 +28510,7 @@ let NLDDBadge = class extends withTranslations(LitElement, nlddBadgeTranslations
 NLDDBadge.styles = badgeStyles;
 __decorateClass([
   property({ type: String, reflect: true })
-], NLDDBadge.prototype, "variant", 2);
+], NLDDBadge.prototype, "color", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], NLDDBadge.prototype, "size", 2);