@nldd/design-system 0.8.37 → 0.8.39

package/dist/components/components.js

@@ -2,10 +2,10 @@ var _a;
 import { css, nothing, html, LitElement, unsafeCSS, svg } from "lit";
 import { property, state, customElement, query } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { computePosition, offset, flip, shift, size, autoUpdate } from "@floating-ui/dom";
-import { classMap } from "lit/directives/class-map.js";
+import { computePosition, offset, flip, shift, autoUpdate, size } from "@floating-ui/dom";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeStatic, html as html$1 } from "lit/static-html.js";
 const buttonStyles = css`
@@ -49,6 +49,7 @@ const buttonStyles = css`
 		align-items: center;
 		justify-content: center;
 		width: 100%;
+		text-wrap: pretty;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
 			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
@@ -434,6 +435,10 @@ const aliases = {
   "analytics": "chart-x-y-axis-line",
   "chart-line": "chart-x-y-axis-line",
   "graph": "chart-x-y-axis-line",
+  // check-list
+  "tasks": "check-list",
+  "todos": "check-list",
+  "checklist": "check-list",
   // check-mark
   "checked": "check-mark",
   // check-mark-circle
@@ -479,6 +484,14 @@ const aliases = {
   // eye-slash
   "hidden": "eye-slash",
   "hide": "eye-slash",
+  // face-frowning
+  "sad": "face-frowning",
+  "frowning": "face-frowning",
+  // face-smiling
+  "happy": "face-smiling",
+  "smiling": "face-smiling",
+  // face-smiling-badge-plus
+  "add-emoji": "face-smiling-badge-plus",
   // file-text
   "document": "file-text",
   "file": "file-text",
@@ -498,6 +511,9 @@ const aliases = {
   // info-circle
   "info": "info-circle",
   "information": "info-circle",
+  // link
+  "url": "link",
+  "hyperlink": "link",
   // list
   "menu": "list",
   // list-arrow-down
@@ -527,6 +543,11 @@ const aliases = {
   // moon
   "dark-mode": "moon",
   "night": "moon",
+  // paper-plane
+  "send": "paper-plane",
+  // paperclip
+  "attachment": "paperclip",
+  "attach": "paperclip",
   // pencil
   "write": "pencil",
   // pencil-on-square
@@ -560,6 +581,12 @@ const aliases = {
   // slash-circle
   "blocked": "slash-circle",
   "forbidden": "slash-circle",
+  // sparkles
+  "ai": "sparkles",
+  "magic": "sparkles",
+  // square-and-arrow-right
+  "logout": "square-and-arrow-right",
+  "exit": "square-and-arrow-right",
   // square-arrow-up
   "share": "square-arrow-up",
   // square-arrow-right-top
@@ -576,139 +603,151 @@ const aliases = {
   // terminal
   "cli": "terminal",
   "console": "terminal",
+  // timer
+  "countdown": "timer",
   // trash
   "delete": "trash"
 };
 const iconRegistry = /* @__PURE__ */ new Map([
   ["apartment-building", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11 16H9v-2h2zM15 16h-2v-2h2zM11 12H9v-2h2zM15 12h-2v-2h2zM11 8H9V6h2zM15 8h-2V6h2z"/>\n	<path fill="currentColor" d="M16 2a3 3 0 0 1 3 3v17h-6v-2h-2v2H5V5a3 3 0 0 1 3-3zM8 4a1 1 0 0 0-1 1v15h2v-2h6v2h2V5a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["arrow-2-counter-clockwise", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4 12a8 8 0 0 0 14.93 4H16v-2h6v6h-2v-2a9.98 9.98 0 0 1-18-6zM12 2a10 10 0 0 1 10 10h-2A8 8 0 0 0 5.07 8H8v2H2V4h2v2a10 10 0 0 1 8-4"/>\n</svg>'],
-  ["arrow-down-in-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 3v10.586l4.293-4.293 1.414 1.414L12 17.414l-6.707-6.707 1.414-1.414L11 13.586V3zM5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3h2v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3z"/>\n</svg>'],
   ["arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m4 12 8 8 8-8-1.42-1.41L13 16.172V3h-2v13.172L5.42 10.59z"/>\n</svg>'],
+  ["arrow-down-in-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 3v10.586l4.293-4.293 1.414 1.414L12 17.414l-6.707-6.707 1.414-1.414L11 13.586V3zM5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3h2v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3z"/>\n</svg>'],
   ["arrow-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m12 4-8 8 8 8 1.41-1.42L7.828 13H21v-2H7.828l5.582-5.58z"/>\n</svg>'],
   ["arrow-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m12 4 8 8-8 8-1.41-1.42L16.172 13H3v-2h13.172L10.59 5.42z"/>\n</svg>'],
   ["arrow-u-turn-backward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M9.4 5.4 5.82 9H17a5 5 0 0 1 0 10h-2v-2h2a3 3 0 1 0 0-6H5.82l3.58 3.6L8 16l-6-6 6-6z"/>\n</svg>'],
   ["arrow-u-turn-forward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.6 5.4 18.18 9H7a5 5 0 0 0 0 10h2v-2H7a3 3 0 1 1 0-6h11.18l-3.58 3.6L16 16l6-6-6-6z"/>\n</svg>'],
-  ["arrow-up-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m7 3.586 5.707 5.707-1.414 1.414L8 7.414V20H6V7.414l-3.293 3.293-1.414-1.414zM18 4v12.586l3.293-3.293 1.414 1.414L17 20.414l-5.707-5.707 1.414-1.414L16 16.586V4z"/>\n</svg>'],
   ["arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m4 12 8-8 8 8-1.42 1.41L13 7.828V21h-2V7.828L5.42 13.41z"/>\n</svg>'],
+  ["arrow-up-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m7 3.586 5.707 5.707-1.414 1.414L8 7.414V20H6V7.414l-3.293 3.293-1.414-1.414zM18 4v12.586l3.293-3.293 1.414 1.414L17 20.414l-5.707-5.707 1.414-1.414L16 16.586V4z"/>\n</svg>'],
   ["bold", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5.5 22V2h6.067q3.628 0 5.335 1.311 1.708 1.311 1.708 3.506 0 1.86-.854 3.018a4.35 4.35 0 0 1-2.165 1.586v.091q1.86.366 2.836 1.555 1.006 1.159 1.006 2.896 0 2.867-1.92 4.452Q15.59 21.999 11.81 22zm3.902-3.14h2.257q1.829 0 2.743-.732.915-.762.915-2.134 0-1.311-.915-1.982-.884-.7-3.14-.701h-1.86zm0-8.537h1.769q1.677 0 2.5-.64.823-.67.823-2.043 0-1.25-.762-1.86-.732-.64-2.47-.64h-1.86z"/>\n</svg>'],
   ["brackets-ellipsis", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M7 6H4v12h3v2H2V4h5zM22 20h-5v-2h3V6h-3V4h5z"/>\n	<path fill="currentColor" d="M7.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M12 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M16.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"/>\n</svg>'],
   ["bullet-list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4.5 16.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M22 19H9v-2h13zM4.5 10.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M22 13H9v-2h13zM4.5 4.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M22 7H9V5h13z"/>\n</svg>'],
   ["business-suitcase", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14 2c1.66 0 3 1.34 3 3v1h2a3 3 0 0 1 3 3v9c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3V9a3 3 0 0 1 3-3h2V5a3 3 0 0 1 3-3zM5 8a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm5-4a1 1 0 0 0-1 1v1h6V5a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["calendar-event", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M8 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1M7 6H6a1 1 0 0 0-1 1v3h14V7a1 1 0 0 0-1-1h-1v1a1 1 0 1 1-2 0V6H9v1a1 1 0 0 1-2 0zm12 6H5v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM7 14h4v4H7z"/>\n</svg>'],
+  ["caret-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m2 8 10 10L22 8z"/>\n</svg>'],
   ["caret-down-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m6 10 6 6 6-6z"/>\n</svg>'],
   ["caret-down-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m4 9 8 8 8-8z"/>\n</svg>'],
-  ["caret-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m2 8 10 10L22 8z"/>\n</svg>'],
+  ["caret-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m16 21.7-10-10 10-10z"/>\n</svg>'],
   ["caret-left-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m14 18-6-6 6-6z"/>\n</svg>'],
   ["caret-left-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m15 20-8-8 8-8z"/>\n</svg>'],
-  ["caret-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m16 21.7-10-10 10-10z"/>\n</svg>'],
+  ["caret-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m8 1.7 10 10-10 10z"/>\n</svg>'],
   ["caret-right-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m10 6 6 6-6 6z"/>\n</svg>'],
   ["caret-right-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m9 4 8 8-8 8z"/>\n</svg>'],
-  ["caret-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m8 1.7 10 10-10 10z"/>\n</svg>'],
+  ["caret-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 16 12 6l10 10z"/>\n</svg>'],
   ["caret-up-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m6 14 6-6 6 6z"/>\n</svg>'],
   ["caret-up-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m4 15 8-8 8 8z"/>\n</svg>'],
-  ["caret-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 16 12 6l10 10z"/>\n</svg>'],
   ["certificate", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15 11a3 3 0 0 1 2 5.23V21l-2-1-2 1v-4.77A2.99 2.99 0 0 1 15 11m0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>\n	<path fill="currentColor" d="M19 3a3 3 0 0 1 3 3v10c0 1.67-1.33 3-3 3h-1v-2h1a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7v2H5c-1.67 0-3-1.33-3-3V6a3 3 0 0 1 3-3z"/>\n	<path fill="currentColor" d="M10 13H6v-2h4zM18 9H6V7h12z"/>\n</svg>'],
   ["chart-x-y-axis-line", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4 19h18v2H2V3h2z"/>\n	<path fill="currentColor" d="M20.7 7.7 14 14.42l-3-3-3.3 3.3-1.4-1.42L11 8.6l3 3 5.3-5.3z"/>\n</svg>'],
+  ["check-list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 14a3 3 0 1 1 0 6 3 3 0 0 1 0-6m0 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/>\n	<path fill="currentColor" d="M16 20h-6v-2h6zM22 16H10v-2h12zM18 10h-8V8h8zM8.56 5 4.5 9.06 1.94 6.5 3 5.44l1.5 1.5 3-3zM22 6H10V4h12z"/>\n</svg>'],
+  ["check-mark", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M21.707 6.707 10 18.414l-6.707-6.707 1.414-1.414L10 15.586 20.293 5.293z"/>\n</svg>'],
   ["check-mark-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m14.707-2.113L11 15.594l-3.707-3.707 1.414-1.415L11 12.765l4.293-4.293z"/>\n</svg>'],
   ["check-mark-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m17.664 8.707-7.707 7.707-3.707-3.707 1.414-1.414 2.293 2.293 6.293-6.293z"/>\n</svg>'],
   ["check-mark-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m19.204 7.707-9.707 9.707-4.707-4.707 1.414-1.414 3.293 3.293 8.293-8.293z"/>\n</svg>'],
-  ["check-mark", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M21.707 6.707 10 18.414l-6.707-6.707 1.414-1.414L10 15.586 20.293 5.293z"/>\n</svg>'],
+  ["chevron-double-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14 3.4 5.429 12 14 20.6 12.6 22l-10-10.001L12.6 2z"/>\n	<path fill="currentColor" d="M22 3.4 13.429 12 22 20.6 20.6 22l-10-10.001L20.6 2z"/>\n</svg>'],
   ["chevron-double-left-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 7.4 7.429 12 12 16.6 10.6 18l-6-6.001L10.6 6z"/>\n	<path fill="currentColor" d="M18 7.4 13.429 12 18 16.6 16.6 18l-6-6.001L16.6 6z"/>\n</svg>'],
   ["chevron-double-left-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14 5.4 7.429 12 14 18.6 12.6 20l-8-8.001L12.6 4z"/>\n	<path fill="currentColor" d="M21 5.4 14.429 12 21 18.6 19.6 20l-8-8.001L19.6 4z"/>\n</svg>'],
-  ["chevron-double-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14 3.4 5.429 12 14 20.6 12.6 22l-10-10.001L12.6 2z"/>\n	<path fill="currentColor" d="M22 3.4 13.429 12 22 20.6 20.6 22l-10-10.001L20.6 2z"/>\n</svg>'],
+  ["chevron-double-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11.172 11.7 2.6 3.1 4 1.7l10 10-10 10-1.4-1.4z"/>\n	<path fill="currentColor" d="M19.172 11.7 10.6 3.1 12 1.7l10 10-10 10-1.4-1.4z"/>\n</svg>'],
   ["chevron-double-right-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M16.172 12 11.6 7.4 13 6l6 6-6 6-1.4-1.4z"/>\n	<path fill="currentColor" d="M10.172 12 5.6 7.4 7 6l6 6-6 6-1.4-1.4z"/>\n</svg>'],
   ["chevron-double-right-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18.172 12 11.6 5.4 13 4l8 8-8 8-1.4-1.4z"/>\n	<path fill="currentColor" d="M11.172 12 4.6 5.4 6 4l8 8-8 8-1.4-1.4z"/>\n</svg>'],
-  ["chevron-double-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11.172 11.7 2.6 3.1 4 1.7l10 10-10 10-1.4-1.4z"/>\n	<path fill="currentColor" d="M19.172 11.7 10.6 3.1 12 1.7l10 10-10 10-1.4-1.4z"/>\n</svg>'],
+  ["chevron-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 15.172 3.4 6.6 2 8l10 10L22 8l-1.4-1.4z"/>\n</svg>'],
   ["chevron-down-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 13.172 7.4 8.6 6 10l6 6 6-6-1.4-1.4z"/>\n</svg>'],
   ["chevron-down-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 14.172 5.4 7.6 4 9l8 8 8-8-1.4-1.4z"/>\n</svg>'],
-  ["chevron-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 15.172 3.4 6.6 2 8l10 10L22 8l-1.4-1.4z"/>\n</svg>'],
+  ["chevron-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m8.828 11.7 8.572 8.6-1.4 1.4-10-10 10-10 1.4 1.4z"/>\n</svg>'],
   ["chevron-left-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m10.828 12 4.572 4.6L14 18l-6-6 6-6 1.4 1.4z"/>\n</svg>'],
   ["chevron-left-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m9.828 12 6.572 6.6L15 20l-8-8 8-8 1.4 1.4z"/>\n</svg>'],
-  ["chevron-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m8.828 11.7 8.572 8.6-1.4 1.4-10-10 10-10 1.4 1.4z"/>\n</svg>'],
+  ["chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.172 11.7 6.6 3.1 8 1.7l10 10-10 10-1.4-1.4z"/>\n</svg>'],
   ["chevron-right-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13.172 12 8.6 7.4 10 6l6 6-6 6-1.4-1.4z"/>\n</svg>'],
   ["chevron-right-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.172 12 7.6 5.4 9 4l8 8-8 8-1.4-1.4z"/>\n</svg>'],
-  ["chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.172 11.7 6.6 3.1 8 1.7l10 10-10 10-1.4-1.4z"/>\n</svg>'],
+  ["chevron-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 8.828 3.4 17.4 2 16 12 6l10 10-1.4 1.4z"/>\n</svg>'],
   ["chevron-up-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 5.828 7.4 10.4 6 9l6-6 6 6-1.4 1.4zm0 12.344L7.4 13.6 6 15l6 6 6-6-1.4-1.4z"/>\n</svg>'],
   ["chevron-up-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 10.828 7.4 15.4 6 14l6-6 6 6-1.4 1.4z"/>\n</svg>'],
   ["chevron-up-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 9.828 5.4 16.4 4 15l8-8 8 8-1.4 1.4z"/>\n</svg>'],
-  ["chevron-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 8.828 3.4 17.4 2 16 12 6l10 10-1.4 1.4z"/>\n</svg>'],
   ["circle-dashed", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path\n		fill="currentColor"\n		d="M14.59 21.66a10.05 10.05 0 0 1-5.18 0l.52-1.93a8.05 8.05 0 0 0 4.14 0zM5.07 16A8.05 8.05 0 0 0 8 18.93l-1 1.73A10.05 10.05 0 0 1 3.34 17zm15.59 1A10.04 10.04 0 0 1 17 20.66l-1-1.73A8.05 8.05 0 0 0 18.93 16zM4.27 9.93A8 8 0 0 0 4 12a8 8 0 0 0 .27 2.07l-1.93.52a10 10 0 0 1 0-5.18zm17.39-.52a10 10 0 0 1 0 5.18l-.96-.26-.97-.26a8.06 8.06 0 0 0 0-4.14zM8 5.07A8.05 8.05 0 0 0 5.07 8L3.34 7A10.05 10.05 0 0 1 7 3.34zm9-1.73A10.05 10.05 0 0 1 20.66 7l-1.73 1A8.05 8.05 0 0 0 16 5.07zM12 2c.9 0 1.76.12 2.59.34l-.26.96-.26.97A8 8 0 0 0 12 4a8 8 0 0 0-2.07.27L9.4 2.34C10.24 2.12 11.11 2 12 2"\n	/>\n</svg>'],
+  ["circle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 12c0 5.51 4.49 10 10 10s10-4.49 10-10S17.51 2 12 2 2 6.49 2 12"/>\n</svg>'],
   ["circle-filled-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M8 12c0 2.204 1.796 4 4 4s4-1.796 4-4-1.796-4-4-4-4 1.796-4 4"/>\n</svg>'],
   ["circle-filled-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M6 12c0 3.306 2.694 6 6 6s6-2.694 6-6-2.694-6-6-6a6.01 6.01 0 0 0-6 6"/>\n</svg>'],
-  ["circle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 12c0 5.51 4.49 10 10 10s10-4.49 10-10S17.51 2 12 2 2 6.49 2 12"/>\n</svg>'],
   ["clock-arrow-counter-clockwise", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 4.861a10 10 0 0 1 9.686-2.494 10 10 0 0 1 7.312 9.836c-.094 2.22-.815 4.344-2.222 6.084-1.432 1.699-3.306 2.934-5.483 3.446-2.178.514-4.403.242-6.445-.635a10 10 0 0 1-4.703-4.453l1.77-.93a8 8 0 1 0 4.06-11.121c-.823.356-1.588.81-2.264 1.406H9v2H3V2h2z"/>\n	<path fill="currentColor" d="m13 11.586 3.242 3.242-1.414 1.415-3.535-3.536A1 1 0 0 1 11 12V7h2z"/>\n</svg>'],
+  ["cloud", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M1 13.5a5.5 5.5 0 0 1 4.64-5.43 7 7 0 0 1 13.29 1.95A4.5 4.5 0 0 1 18.5 19v-2a2.5 2.5 0 0 0 .24-4.99l-1.57-.15-.22-1.56a5 5 0 0 0-9.5-1.4l-.44.98-1.06.16A3.5 3.5 0 0 0 6.5 17v2A5.5 5.5 0 0 1 1 13.5M18.5 17v2h-12v-2z"/>\n</svg>'],
   ["cloud-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m13 19.172 1.58-1.582L16 19l-4 4-4-4 1.42-1.41L11 19.172V10h2z"/>\n	<path fill="currentColor" d="M12 2a7 7 0 0 1 6.93 6.02A4.5 4.5 0 0 1 18.5 17H15v-2h3.5a2.5 2.5 0 0 0 .241-4.988l-1.573-.15-.219-1.564a5 5 0 0 0-9.49-1.393l-.45.972-1.057.165A3.502 3.502 0 0 0 6.5 15H9v2H6.5a5.5 5.5 0 0 1-.856-10.934A7 7 0 0 1 12 2"/>\n</svg>'],
   ["cloud-arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m16 12-1.42 1.41L13 11.828V21h-2v-9.172L9.42 13.41 8 12l4-4z"/>\n	<path fill="currentColor" d="M12 2a7 7 0 0 1 6.93 6.02A4.5 4.5 0 0 1 18.5 17H15v-2h3.5a2.5 2.5 0 0 0 .241-4.988l-1.573-.15-.219-1.564a5 5 0 0 0-9.49-1.393l-.45.972-1.057.165A3.502 3.502 0 0 0 6.5 15H9v2H6.5a5.5 5.5 0 0 1-.856-10.934A7 7 0 0 1 12 2"/>\n</svg>'],
-  ["cloud", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M1 13.5a5.5 5.5 0 0 1 4.64-5.43 7 7 0 0 1 13.29 1.95A4.5 4.5 0 0 1 18.5 19v-2a2.5 2.5 0 0 0 .24-4.99l-1.57-.15-.22-1.56a5 5 0 0 0-9.5-1.4l-.44.98-1.06.16A3.5 3.5 0 0 0 6.5 17v2A5.5 5.5 0 0 1 1 13.5M18.5 17v2h-12v-2z"/>\n</svg>'],
-  ["cylinder-split-slash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M22 20.59 20.6 22 2 3.41 3.41 2zM6 8.83V12c0 .1.1.2.16.27.18.21.52.5 1.08.77.95.48 2.3.84 3.9.93l1.99 1.99Q12.57 16 12 16c-2.39 0-4.53-.53-6-1.36V18c0 .1.1.2.16.27.18.21.52.5 1.08.77A11 11 0 0 0 12 20c1.76 0 3.28-.32 4.38-.79l1.5 1.5A13 13 0 0 1 12 22c-4.42 0-8-1.8-8-4V6.83zM12 2c4.42 0 8 1.8 8 4v11.17l-2-2v-.53l-.35.19-1.51-1.52q.33-.12.62-.27.82-.44 1.08-.77c.06-.07.16-.18.16-.27V8.64c-1.3.74-3.13 1.23-5.2 1.34l-2.03-2.03Q11.37 8 12 8a11 11 0 0 0 4.76-.96q.82-.44 1.08-.77c.06-.07.16-.18.16-.27s-.1-.2-.16-.27c-.18-.21-.52-.5-1.08-.77A11 11 0 0 0 12 4c-1.76 0-3.28.32-4.38.79l-1.5-1.5A13 13 0 0 1 12 2"/>\n</svg>'],
   ["cylinder-split", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M20 18c0 2.2-3.58 4-8 4s-8-1.8-8-4V6c0-2.2 3.58-4 8-4s8 1.8 8 4zm-13.84.27c.18.21.52.5 1.08.77A11 11 0 0 0 12 20a11 11 0 0 0 4.76-.96q.82-.44 1.08-.77c.06-.07.16-.18.16-.27v-3.36A12.5 12.5 0 0 1 12 16c-2.39 0-4.53-.53-6-1.36V18c0 .1.1.2.16.27M18 8.64A12.5 12.5 0 0 1 12 10c-2.39 0-4.53-.53-6-1.36V12c0 .1.1.2.16.27.18.21.52.5 1.08.77A11 11 0 0 0 12 14a11 11 0 0 0 4.76-.96q.82-.44 1.08-.77c.06-.07.16-.18.16-.27zM12 4a11 11 0 0 0-4.76.96q-.83.44-1.08.77C6.1 5.8 6 5.91 6 6s.1.2.16.27c.18.21.52.5 1.08.77A11 11 0 0 0 12 8a11 11 0 0 0 4.76-.96q.82-.44 1.08-.77c.06-.07.16-.18.16-.27s-.1-.2-.16-.27c-.18-.21-.52-.5-1.08-.77A11 11 0 0 0 12 4"/>\n</svg>'],
-  ["dismiss-circle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 8.59-3.3-3.3-1.4 1.42L10.58 12l-3.3 3.3 1.42 1.4L12 13.42l3.3 3.3 1.4-1.42L13.42 12l3.3-3.3-1.42-1.4z"/>\n</svg>'],
+  ["cylinder-split-slash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M22 20.59 20.6 22 2 3.41 3.41 2zM6 8.83V12c0 .1.1.2.16.27.18.21.52.5 1.08.77.95.48 2.3.84 3.9.93l1.99 1.99Q12.57 16 12 16c-2.39 0-4.53-.53-6-1.36V18c0 .1.1.2.16.27.18.21.52.5 1.08.77A11 11 0 0 0 12 20c1.76 0 3.28-.32 4.38-.79l1.5 1.5A13 13 0 0 1 12 22c-4.42 0-8-1.8-8-4V6.83zM12 2c4.42 0 8 1.8 8 4v11.17l-2-2v-.53l-.35.19-1.51-1.52q.33-.12.62-.27.82-.44 1.08-.77c.06-.07.16-.18.16-.27V8.64c-1.3.74-3.13 1.23-5.2 1.34l-2.03-2.03Q11.37 8 12 8a11 11 0 0 0 4.76-.96q.82-.44 1.08-.77c.06-.07.16-.18.16-.27s-.1-.2-.16-.27c-.18-.21-.52-.5-1.08-.77A11 11 0 0 0 12 4c-1.76 0-3.28.32-4.38.79l-1.5-1.5A13 13 0 0 1 12 2"/>\n</svg>'],
+  ["dismiss", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m19.3 3.3 1.4 1.4-7.29 7.3 7.3 7.3-1.42 1.4L12 13.42l-7.3 7.3-1.4-1.42L10.58 12l-7.3-7.3 1.42-1.4L12 10.58z"/>\n</svg>'],
   ["dismiss-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m12 10.59 2.8-2.8 1.4 1.42L13.42 12l2.8 2.8-1.42 1.4L12 13.42l-2.8 2.8-1.4-1.42L10.58 12l-2.8-2.79 1.42-1.42z"/>\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/>\n</svg>'],
+  ["dismiss-circle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 8.59-3.3-3.3-1.4 1.42L10.58 12l-3.3 3.3 1.42 1.4L12 13.42l3.3 3.3 1.4-1.42L13.42 12l3.3-3.3-1.42-1.4z"/>\n</svg>'],
   ["dismiss-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m15.3 7.3 1.4 1.4-3.29 3.3 3.3 3.3-1.42 1.4L12 13.42l-3.3 3.3-1.4-1.42L10.58 12l-3.3-3.3 1.42-1.4L12 10.58z"/>\n</svg>'],
   ["dismiss-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m17.3 5.3 1.4 1.4-5.29 5.3 5.3 5.3-1.42 1.4L12 13.42l-5.3 5.3-1.4-1.42L10.58 12l-5.3-5.3 1.42-1.4L12 10.58z"/>\n</svg>'],
-  ["dismiss", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m19.3 3.3 1.4 1.4-7.29 7.3 7.3 7.3-1.42 1.4L12 13.42l-7.3 7.3-1.4-1.42L10.58 12l-7.3-7.3 1.42-1.4L12 10.58z"/>\n</svg>'],
   ["ellipsis", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4m7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4"/>\n</svg>'],
   ["envelope", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19 4a3 3 0 0 1 3 3v10c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3V7a3 3 0 0 1 3-3zm-5.5 9.562a3 3 0 0 1-3 0L4 9.81V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9.81zM5 6a1 1 0 0 0-1 1v.5l7.5 4.33a1 1 0 0 0 1 0L20 7.5V7a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["euro", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4.5 10.939V9.055h11.39v1.884zm11.39 2.51v1.884H4.5V13.45zM15.053 22q-2.392 0-4.215-1.076-1.824-1.077-2.87-3.199-1.017-2.122-1.017-5.292 0-2.72.688-4.693.717-1.973 1.913-3.229 1.197-1.286 2.72-1.883A8.5 8.5 0 0 1 15.503 2q.956 0 1.704.09.747.09 1.435.299V4.48q-1.017-.24-1.645-.299-.627-.09-1.614-.09-1.196 0-2.272.479-1.047.478-1.883 1.465-.838.987-1.316 2.511-.478 1.495-.478 3.528 0 2.66.747 4.394.777 1.734 2.123 2.601 1.345.837 3.079.837.867 0 1.674-.09t1.794-.328v2.033q-1.017.24-1.884.358-.837.12-1.913.12"/>\n</svg>'],
   ["exclamation-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 15a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5m1-1.5h-2v-7h2z"/>\n	<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/>\n</svg>'],
-  ["exclamation-triangle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11.99 1.968a3 3 0 0 1 2.62 1.538l7.095 12.242q.035.06.062.126a3 3 0 0 1-2.76 4.125H5a3.02 3.02 0 0 1-2.538-1.387 3 3 0 0 1-.248-2.739 1 1 0 0 1 .06-.125L9.37 3.506a3 3 0 0 1 2.62-1.538M12 14a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m-1-7v5h2V7z"/>\n</svg>'],
   ["exclamation-triangle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 14a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5m1-1.5h-2v-5h2z"/>\n	<path fill="currentColor" d="M11.99 1.968a3 3 0 0 1 2.62 1.538l7.095 12.242q.035.06.062.126a3 3 0 0 1-2.76 4.125H5a3.02 3.02 0 0 1-2.538-1.387 3 3 0 0 1-.248-2.739 1 1 0 0 1 .06-.125L9.37 3.506a3 3 0 0 1 2.62-1.538m0 2c-.373 0-.705.21-.884.533L4.046 16.68c-.097.286-.06.602.104.86a.99.99 0 0 0 .85.459h13.996a1 1 0 0 0 .938-1.32L12.875 4.502a1.02 1.02 0 0 0-.885-.533"/>\n</svg>'],
-  ["eye-slash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m21.004 19.59-1.414 1.414L3 4.414 4.414 3zM5.837 8.665C4.717 9.563 3.843 10.7 3.2 12c1.612 3.261 4.923 5.5 8.801 5.5.82 0 1.617-.102 2.38-.291l1.603 1.604a11.8 11.8 0 0 1-3.983.687C6.989 19.5 2.739 16.392 1 12a11.8 11.8 0 0 1 3.416-4.756zM12 4.5c5.012 0 9.26 3.108 11 7.5a11.8 11.8 0 0 1-3.416 4.756l-1.422-1.422c1.12-.898 1.995-2.034 2.638-3.334-1.613-3.261-4.923-5.5-8.8-5.5-.821 0-1.619.1-2.382.29L8.015 5.187A11.8 11.8 0 0 1 12 4.5"/>\n	<path fill="currentColor" d="M9.527 12.356a2.5 2.5 0 0 0 2.117 2.116l1.791 1.792a4.5 4.5 0 0 1-5.7-5.7zM12 7.5a4.5 4.5 0 0 1 4.264 5.935l-1.792-1.791a2.5 2.5 0 0 0-2.117-2.117l-1.792-1.792A4.5 4.5 0 0 1 12 7.5"/>\n</svg>'],
+  ["exclamation-triangle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11.99 1.968a3 3 0 0 1 2.62 1.538l7.095 12.242q.035.06.062.126a3 3 0 0 1-2.76 4.125H5a3.02 3.02 0 0 1-2.538-1.387 3 3 0 0 1-.248-2.739 1 1 0 0 1 .06-.125L9.37 3.506a3 3 0 0 1 2.62-1.538M12 14a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m-1-7v5h2V7z"/>\n</svg>'],
   ["eye", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 4.5c5.012 0 9.26 3.108 11 7.5-1.74 4.392-5.988 7.5-10.999 7.5S2.739 16.392 1 12c1.74-4.392 5.988-7.5 11-7.5m0 2c-3.878 0-7.188 2.239-8.8 5.5 1.612 3.261 4.923 5.5 8.801 5.5 3.877 0 7.187-2.239 8.799-5.5-1.613-3.261-4.923-5.5-8.8-5.5m0 1a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5"/>\n</svg>'],
+  ["eye-slash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m21.004 19.59-1.414 1.414L3 4.414 4.414 3zM5.837 8.665C4.717 9.563 3.843 10.7 3.2 12c1.612 3.261 4.923 5.5 8.801 5.5.82 0 1.617-.102 2.38-.291l1.603 1.604a11.8 11.8 0 0 1-3.983.687C6.989 19.5 2.739 16.392 1 12a11.8 11.8 0 0 1 3.416-4.756zM12 4.5c5.012 0 9.26 3.108 11 7.5a11.8 11.8 0 0 1-3.416 4.756l-1.422-1.422c1.12-.898 1.995-2.034 2.638-3.334-1.613-3.261-4.923-5.5-8.8-5.5-.821 0-1.619.1-2.382.29L8.015 5.187A11.8 11.8 0 0 1 12 4.5"/>\n	<path fill="currentColor" d="M9.527 12.356a2.5 2.5 0 0 0 2.117 2.116l1.791 1.792a4.5 4.5 0 0 1-5.7-5.7zM12 7.5a4.5 4.5 0 0 1 4.264 5.935l-1.792-1.791a2.5 2.5 0 0 0-2.117-2.117l-1.792-1.792A4.5 4.5 0 0 1 12 7.5"/>\n</svg>'],
+  ["face-frowning", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m0 8.87c1.78 0 3.5.81 4.63 2.18.35.43.18 1.04-.3 1.32s-1.08.1-1.47-.3a4 4 0 0 0-2.86-1.2c-1.07 0-2.12.45-2.86 1.2-.39.4-1 .58-1.47.3-.48-.28-.65-.9-.3-1.32A6 6 0 0 1 12 12.87M9.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m5 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"/>\n</svg>'],
+  ["face-smiling", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.86 13.8c.39-.4 1-.58 1.47-.3.48.28.65.9.3 1.32A6 6 0 0 1 12 17c-1.77 0-3.5-.82-4.63-2.18-.35-.43-.18-1.04.3-1.32s1.08-.1 1.47.3c.74.75 1.8 1.2 2.86 1.2 1.07 0 2.12-.45 2.86-1.2M9.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"/>\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/>\n</svg>'],
+  ["face-smiling-badge-plus", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18 13a5 5 0 1 1 0 10 5 5 0 0 1 0-10M12 2a10 10 0 0 1 9.9 11.44 6 6 0 0 0-1.91-1.1L20 12a8 8 0 1 0-8 8l.34-.01q.38 1.06 1.1 1.9-.7.1-1.44.11a10 10 0 0 1 0-20m5.25 15.25H15v1.5h2.25V21h1.5v-2.25H21v-1.5h-2.25V15h-1.5zM7.67 13.5c.48-.28 1.08-.1 1.47.3a4 4 0 0 0 3.72 1.1 6 6 0 0 0-.77 2.1H12c-1.77 0-3.5-.82-4.63-2.18-.35-.43-.18-1.04.3-1.32M9.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m5 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"/>\n</svg>'],
   ["file-text", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M7 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9h-3a2 2 0 0 1-2-2V4zm8 1.414L16.586 7H15zM4 5a3 3 0 0 1 3-3h7a1 1 0 0 1 .707.293l5 5A1 1 0 0 1 20 8v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zm4 3h3v2H8zm0 4h8v2H8zm0 4h8v2H8z"/>\n</svg>'],
-  ["folder-stack", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4 18a1 1 0 0 0 1 1h13a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V9c0-1.11.9-2 2-2z"/>\n	<path fill="currentColor" d="M10.76 3a3 3 0 0 1 2.12.88L15 6h4a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zM8 5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9a1 1 0 0 0-.9-1h-4.93l-2.7-2.7a1 1 0 0 0-.71-.3z"/>\n</svg>'],
   ["folder", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 17V6a3 3 0 0 1 3-3h3.76a3 3 0 0 1 2.12.88L13 6h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1V9a1 1 0 0 0-.9-1h-6.93l-2.7-2.7a1 1 0 0 0-.71-.3H5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1v2a3 3 0 0 1-3-3m17 1v2H5v-2z"/>\n</svg>'],
+  ["folder-stack", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4 18a1 1 0 0 0 1 1h13a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V9c0-1.11.9-2 2-2z"/>\n	<path fill="currentColor" d="M10.76 3a3 3 0 0 1 2.12.88L15 6h4a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zM8 5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9a1 1 0 0 0-.9-1h-4.93l-2.7-2.7a1 1 0 0 0-.71-.3z"/>\n</svg>'],
   ["gear", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>\n	<path fill="currentColor" d="M13.19 2a2 2 0 0 1 1.991 1.8l.09.9a9 9 0 0 1 1.416.818l.824-.372a2 2 0 0 1 2.555.824l1.19 2.06a2 2 0 0 1-.564 2.624l-.734.527c.055.536.056 1.09 0 1.637l.734.528c.833.6 1.078 1.734.564 2.624l-1.294 2.22a2 2 0 0 1-2.274.734l-1.001-.443a8 8 0 0 1-1.416.819l-.118 1.088a2 2 0 0 1-1.772 1.603H10.62a2 2 0 0 1-1.8-1.792l-.09-.9a8 8 0 0 1-1.416-.818l-1.001.443a2 2 0 0 1-2.275-.734l-1.293-2.22a2 2 0 0 1 .415-2.506l.882-.646a8 8 0 0 1 0-1.637l-.732-.527A2 2 0 0 1 2.658 8.2l1.278-2.23a2 2 0 0 1 2.555-.824l.823.372a8 8 0 0 1 1.416-.819l.09-.898a2 2 0 0 1 1.8-1.792zm-2.38 2.002-.207 2.049-1.055.472q-.566.256-1.061.615l-.939.68-1.88-.848-1.191 2.06 1.672 1.201C6.089 10.818 6 11.41 6 12s.088 1.18.148 1.766l-1.671 1.203h-.001l1.19 2.061 1.88-.85.94.681q.37.27.783.48l1.333.607.207 2.05V20h2.38l.206-2.05 1.055-.475a6 6 0 0 0 1.062-.614l.94-.68 1.88.85 1.19-2.061-1.672-1.203c.06-.586.15-1.177.15-1.767s-.09-1.182-.15-1.769l1.673-1.2-1.19-2.061h-.003l-1.88.846-.938-.678a6 6 0 0 0-1.062-.614l-1.055-.474L13.19 4h-2.38z"/>\n</svg>'],
-  ["heart-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M3.716 5.218a5.86 5.86 0 0 1 8.283 0L12 5.215a5.858 5.858 0 0 1 8.284 8.284l-.001.001.001.002L12 21.787l-8.284-8.284a5.86 5.86 0 0 1 0-8.285"/>\n</svg>'],
   ["heart", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 5.216a5.858 5.858 0 1 1 8.284 8.284v.003L12 21.787l-8.284-8.284c-2.297-2.297-2.216-5.979 0-8.284C6 2.916 9.684 3.026 11.999 5.217zm6.87 1.414a3.86 3.86 0 0 0-5.456 0L12 8.045l-1.414-1.413a3.858 3.858 0 0 0-5.455 5.457l6.87 6.87 6.87-6.873a3.86 3.86 0 0 0 0-5.456"/>\n</svg>'],
+  ["heart-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M3.716 5.218a5.86 5.86 0 0 1 8.283 0L12 5.215a5.858 5.858 0 0 1 8.284 8.284l-.001.001.001.002L12 21.787l-8.284-8.284a5.86 5.86 0 0 1 0-8.285"/>\n</svg>'],
   ["house", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m12 2 10.707 10.707-1.414 1.414L20 12.828V21h-7v-6h-2v6H4v-8.172l-1.293 1.293-1.414-1.414zm-6 8.828V19h3v-6h6v6h3v-8.172l-6-6z"/>\n</svg>'],
   ["inbox", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M21 6v12c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V6a3 3 0 0 1 3-3h12c1.66 0 3 1.34 3 3M5 18a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4h-3.126a4.002 4.002 0 0 1-7.748 0H5zM6 5a1 1 0 0 0-1 1v6h5v1c0 1.083.92 2 2 2s2-.918 2-2v-1h5V6a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["info-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 17.5h-2v-7h2zm-1-11A1.25 1.25 0 1 1 12 9a1.25 1.25 0 0 1 0-2.5"/>\n	<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/>\n</svg>'],
   ["italic", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18 4h-2.821l-4.287 16H14v2H6v-2h2.821l4.287-16H10V2h8z"/>\n</svg>'],
+  ["link", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.47 9.53a5 5 0 0 1 0 7.07l-3.36 3.35a5 5 0 0 1-7.06-7.06l3.13-3.14c-.18.9-.15 1.85.09 2.74l-1.63 1.63a3 3 0 0 0 4.24 4.24l3.18-3.18a3 3 0 0 0-1.8-5.1 2 2 0 0 1 .39-.55l1.12-1.12q.94.36 1.7 1.12"/>\n	<path fill="currentColor" d="M19.78 4.22a5 5 0 0 1 0 7.07l-2.96 2.96c.18-.9.15-1.85-.09-2.74l1.63-1.63a3 3 0 1 0-4.24-4.24l-3.18 3.18a3 3 0 0 0 1.8 5.1 2 2 0 0 1-.39.56l-1.12 1.11a4.98 4.98 0 0 1-1.88-8l3.36-3.37a5 5 0 0 1 7.07 0"/>\n</svg>'],
+  ["list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 5h20v2H2zm0 6h20v2H2zm0 6h20v2H2z"/>\n</svg>'],
   ["list-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M3 5h11v2H3zm16 0v10.586l2.293-2.293 1.414 1.414L18 19.414l-4.707-4.707 1.414-1.414L17 15.586V5zM3 11h9v2H3zm0 6h9v2H3z"/>\n</svg>'],
   ["list-arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M3 5h9v2H3zm15-.414 4.707 4.707-1.414 1.414L19 8.414V19h-2V8.414l-2.293 2.293-1.414-1.414zM3 11h9v2H3zm0 6h11v2H3z"/>\n</svg>'],
   ["list-decreasing-lines", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 5h20v2H2zm6 12h8v2H8zm-3-6h14v2H5z"/>\n</svg>'],
-  ["list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 5h20v2H2zm0 6h20v2H2zm0 6h20v2H2z"/>\n</svg>'],
   ["lock-closed", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 17.5h-2v-5h2z"/>\n	<path fill="currentColor" d="M17 9a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6.85A3 3 0 0 1 4 18v-6a3 3 0 0 1 3-3V7a5 5 0 0 1 10 0zM9 9h6V7a3 3 0 1 0-6 0zm-2 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["lock-open", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.5 17h-5v-2h5z"/>\n	<path fill="currentColor" d="M17 7h-2V6a3 3 0 1 0-6 0v4h8a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6.85A3 3 0 0 1 4 19v-6a3 3 0 0 1 3-3V6a5 5 0 0 1 10 0zM7 12a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["magnifier", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 10c0 4.4 3.6 8 8 8a7.95 7.95 0 0 0 4.9-1.7l5.7 5.7 1.4-1.4-5.7-5.7A7.97 7.97 0 0 0 18 10c0-4.4-3.6-8-8-8s-8 3.6-8 8m2 0c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6"/>\n</svg>'],
+  ["minus", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 11h20v2H2z"/>\n</svg>'],
   ["minus-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M6 11h12v2H6z"/>\n</svg>'],
   ["minus-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M4 11h16v2H4z"/>\n</svg>'],
-  ["minus", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 11h20v2H2z"/>\n</svg>'],
   ["moon", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M10.47 2.12a8.99 8.99 0 0 0 11.41 11.4 10 10 0 1 1-11.4-11.4M8 5.07A8 8 0 1 0 18.93 16 11 11 0 0 1 8 5.07"/>\n</svg>'],
   ["numbered-list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5.223 14.015c1.003 0 1.634.316 1.944.864.284.491.308 1.154.117 1.684-.153.412-.473.764-1.071 1.142-.481.305-.98.584-1.34 1.035h2.672V20H3.513l-.135-1.053a3.2 3.2 0 0 1 .441-.882q.298-.405.873-.81c.287-.2.614-.382.846-.648.239-.29.371-.824.036-1.098q-.198-.171-.657-.171c-.524 0-.874.034-1.332.162v-1.287a6.8 6.8 0 0 1 1.638-.198M22 19H10v-2h12zm0-6H10v-2h12zM6.483 10H4.935V5.323c-.474 0-.96.041-1.386.126V4.28C4.514 4.021 5.493 4 6.483 4zM22 7H10V5h12z"/>\n</svg>'],
-  ["pencil-on-square", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M10.932 6H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5.927l2-2V19c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3V7a3 3 0 0 1 3-3h7.93z"/>\n	<path fill="currentColor" d="M17.175 2.586a2 2 0 0 1 2.829 0L21.418 4a2 2 0 0 1 0 2.828L11.246 17H7.003v-4.242zm-8.172 11V15h1.414l6.758-6.758-1.414-1.414zm8.172-8.172 1.414 1.414 1.415-1.414L18.589 4z"/>\n</svg>'],
+  ["paper-plane", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19.44 2.57c.98-.34 1.92.6 1.59 1.59l-5.66 16.59a1.25 1.25 0 0 1-2.28.2l-3.05-6.77a1.3 1.3 0 0 0-.63-.63l-6.67-3a1.25 1.25 0 0 1 .1-2.32zm-7.65 10.65 2.3 5.08 3.82-11.2zM5.3 9.5c1.69.75 3.48 1.48 5.09 2.3L16.5 5.7z"/>\n</svg>'],
+  ["paperclip", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M8.04 15.21a.75.75 0 1 0 1.06 1.06l8-8a2.5 2.5 0 0 0-3.53-3.54l-8 8a4.25 4.25 0 1 0 6 6.02l8.01-8 1.42 1.4-8 8.01a6.2 6.2 0 0 1-8.85 0 6.2 6.2 0 0 1 0-8.84l8-8a4.5 4.5 0 1 1 6.37 6.36l-8 8a2.75 2.75 0 1 1-3.9-3.88l8.01-8 1.42 1.4z"/>\n</svg>'],
   ["pencil", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M21.418 4a2 2 0 0 1 0 2.828L7.246 21H3.003v-4.243L17.175 2.586a2 2 0 0 1 2.828 0zM15.76 6.828 5.003 17.586V19h1.414L17.175 8.243zm1.414-1.414 1.414 1.414 1.414-1.414L18.59 4z"/>\n</svg>'],
+  ["pencil-on-square", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M10.932 6H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5.927l2-2V19c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3V7a3 3 0 0 1 3-3h7.93z"/>\n	<path fill="currentColor" d="M17.175 2.586a2 2 0 0 1 2.829 0L21.418 4a2 2 0 0 1 0 2.828L11.246 17H7.003v-4.242zm-8.172 11V15h1.414l6.758-6.758-1.414-1.414zm8.172-8.172 1.414 1.414 1.415-1.414L18.589 4z"/>\n</svg>'],
+  ["person", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6M7 7a5 5 0 1 1 10 0A5 5 0 0 1 7 7m2 9a3 3 0 0 0-3 3v3H4v-3a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5l-.032 3h-2L18 19a3 3 0 0 0-3-3z"/>\n</svg>'],
   ["person-2", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M10 14c2.2 0 4 1.8 4 4v3h-2v-3a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3H2v-3c0-2.2 1.8-4 4-4zM22 17v3h-2v-3a2 2 0 0 0-2-2h-3.93a5 5 0 0 0-1.92-1.55A4 4 0 0 1 14 13h4c2.2 0 4 1.8 4 4"/>\n	<path fill="currentColor" d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4M16 3a4 4 0 1 1-3.2 6.4 5 5 0 0 0-.5-3.94A4 4 0 0 1 16 3m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>\n</svg>'],
-  ["person-badge-gear", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18.75 13q.23.02.25.25v.68q.01.19.19.25.35.11.67.28c.1.05.23.04.3-.04l.5-.49c.09-.1.25-.1.34 0L22.07 15c.1.1.1.25 0 .35l-.49.48q-.12.14-.04.3.16.33.28.68.06.18.25.19h.68q.23.02.25.25v1.5q-.02.23-.25.25h-.68a.3.3 0 0 0-.25.19q-.11.35-.28.67c-.05.1-.04.23.04.3l.49.5c.1.09.1.25 0 .34L21 22.07c-.1.1-.25.1-.35 0l-.48-.49a.3.3 0 0 0-.3-.04q-.33.16-.68.28a.3.3 0 0 0-.19.25v.68q-.02.23-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.68a.3.3 0 0 0-.19-.25 4 4 0 0 1-.67-.28.3.3 0 0 0-.3.04l-.5.49c-.09.1-.25.1-.34 0L13.93 21a.25.25 0 0 1 0-.35l.49-.48q.13-.13.04-.3-.16-.33-.28-.68a.3.3 0 0 0-.25-.19h-.68a.25.25 0 0 1-.25-.25v-1.5q.02-.23.25-.25h.68q.2-.01.25-.19.11-.35.28-.67a.3.3 0 0 0-.04-.3l-.49-.5a.25.25 0 0 1 0-.34L15 13.93c.1-.1.25-.1.35 0l.48.49q.14.13.3.04.33-.16.68-.28.18-.06.19-.25v-.68q.02-.23.25-.25zM18 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>\n	<path fill="currentColor" d="M13.53 14a6 6 0 0 0-1.19 2H9a3 3 0 0 0-3 3v3H4v-3a5 5 0 0 1 5-5z"/>\n	<path fill="currentColor" d="M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6"/>\n</svg>'],
+  ["person-badge-gear", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18.75 13q.23.02.25.25v.68q.01.19.19.25.35.11.67.28c.1.05.23.04.3-.04l.5-.49c.09-.1.25-.1.34 0L22.07 15c.1.1.1.25 0 .35l-.49.48q-.12.14-.04.3.16.33.28.68.06.18.25.19h.68q.23.02.25.25v1.5q-.02.23-.25.25h-.68a.3.3 0 0 0-.25.19q-.11.35-.28.67c-.05.1-.04.23.04.3l.49.5c.1.09.1.25 0 .34L21 22.07c-.1.1-.25.1-.35 0l-.48-.49a.3.3 0 0 0-.3-.04q-.33.16-.68.28a.3.3 0 0 0-.19.25v.68q-.02.23-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.68a.3.3 0 0 0-.19-.25 4 4 0 0 1-.67-.28.3.3 0 0 0-.3.04l-.5.49c-.09.1-.25.1-.34 0L13.93 21a.25.25 0 0 1 0-.35l.49-.48q.13-.13.04-.3-.16-.33-.28-.68a.3.3 0 0 0-.25-.19h-.68a.25.25 0 0 1-.25-.25v-1.5q.02-.23.25-.25h.68q.2-.01.25-.19.11-.35.28-.67a.3.3 0 0 0-.04-.3l-.49-.5a.25.25 0 0 1 0-.34L15 13.93c.1-.1.25-.1.35 0l.48.49q.14.13.3.04.33-.16.68-.28.18-.06.19-.25v-.68q.02-.23.25-.25zM18 16.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/>\n	<path fill="currentColor" d="M13.53 14a6 6 0 0 0-1.19 2H9a3 3 0 0 0-3 3v3H4v-3a5 5 0 0 1 5-5z"/>\n	<path fill="currentColor" d="M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6"/>\n</svg>'],
   ["person-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 6a3.25 3.25 0 1 1 0 6.5A3.25 3.25 0 0 1 12 6"/>\n	<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 0 0-5.5 13.807V17a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v.807A8 8 0 0 0 12 4"/>\n</svg>'],
-  ["person", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6M7 7a5 5 0 1 1 10 0A5 5 0 0 1 7 7m2 9a3 3 0 0 0-3 3v3H4v-3a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5l-.032 3h-2L18 19a3 3 0 0 0-3-3z"/>\n</svg>'],
-  ["plus-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2z"/>\n</svg>'],
   ["plus", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 11h9v2h-9v9h-2v-9H2v-2h9V2h2z"/>\n</svg>'],
-  ["puzzle-piece-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11 2a2.5 2.5 0 0 1 2.5 2.5v.75c0 .14.11.25.25.25H18a1 1 0 0 1 1 1v3.75q.02.23.25.25H20a2.5 2.5 0 0 1 0 5h-.75a.25.25 0 0 0-.25.25v4.75a1 1 0 0 1-1 1h-4.25a.25.25 0 0 1-.25-.25V20a2.5 2.5 0 0 0-5 0v1.25q-.02.23-.25.25H4a1 1 0 0 1-1-1v-4.25c0-.14.11-.25.25-.25H4.5a2.5 2.5 0 0 0 0-5H3.25a.25.25 0 0 1-.25-.25V6.5a1 1 0 0 1 1-1h4.25c.14 0 .25-.11.25-.25V4.5A2.5 2.5 0 0 1 11 2"/>\n</svg>'],
+  ["plus-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2z"/>\n</svg>'],
   ["puzzle-piece", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M10.5 1.5A3.5 3.5 0 0 1 14 5v.75c0 .14.11.25.25.25h3.25a1 1 0 0 1 1 1v2.75q.02.23.25.25H19a3.5 3.5 0 1 1 0 7h-.25a.25.25 0 0 0-.25.25V21a1 1 0 0 1-1 1h-4.75a.25.25 0 0 1-.25-.25V20.5a1.5 1.5 0 0 0-3 0v1.25q-.02.23-.25.25H3.5a1 1 0 0 1-1-1v-5.75c0-.14.11-.25.25-.25H4a1.5 1.5 0 0 0 0-3H2.75a.25.25 0 0 1-.25-.25V7a1 1 0 0 1 1-1h3.25c.14 0 .25-.11.25-.25V5a3.5 3.5 0 0 1 3.5-3.5m0 2C9.67 3.5 9 4.17 9 5v.75C9 6.99 8 8 6.75 8H4.5v2.04a3.5 3.5 0 0 1 0 6.92V20h3.04a3.5 3.5 0 0 1 6.92 0h2.04v-2.75c0-1.24 1-2.25 2.25-2.25H19a1.5 1.5 0 0 0 0-3h-.25c-1.24 0-2.25-1-2.25-2.25V8h-2.25C13.01 8 12 7 12 5.75V5c0-.83-.67-1.5-1.5-1.5"/>\n</svg>'],
+  ["puzzle-piece-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11 2a2.5 2.5 0 0 1 2.5 2.5v.75c0 .14.11.25.25.25H18a1 1 0 0 1 1 1v3.75q.02.23.25.25H20a2.5 2.5 0 0 1 0 5h-.75a.25.25 0 0 0-.25.25v4.75a1 1 0 0 1-1 1h-4.25a.25.25 0 0 1-.25-.25V20a2.5 2.5 0 0 0-5 0v1.25q-.02.23-.25.25H4a1 1 0 0 1-1-1v-4.25c0-.14.11-.25.25-.25H4.5a2.5 2.5 0 0 0 0-5H3.25a.25.25 0 0 1-.25-.25V6.5a1 1 0 0 1 1-1h4.25c.14 0 .25-.11.25-.25V4.5A2.5 2.5 0 0 1 11 2"/>\n</svg>'],
   ["question-mark-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11.695 14.47q.564 0 .862.327.311.312.312.906 0 .55-.312.876-.297.327-.862.327-.58 0-.89-.311-.297-.328-.297-.892t.297-.89q.311-.342.89-.342M12.245 7q1.337 0 2.094.624.758.608.758 1.634 0 .907-.402 1.485-.386.564-1.202.95l-.728.372q-.327.162-.475.37a.74.74 0 0 0-.134.431q0 .208.06.43.06.21.163.402l-1.485.075a1.5 1.5 0 0 1-.342-.49 1.6 1.6 0 0 1-.134-.64q0-.519.253-.906.252-.4.876-.742l.787-.445q.46-.252.639-.49a.9.9 0 0 0 .178-.565.66.66 0 0 0-.327-.594q-.313-.222-1.054-.222-.52 0-1.04.118-.52.104-1.04.297V7.476a6 6 0 0 1 1.218-.357Q11.518 7 12.245 7"/>\n	<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/>\n</svg>'],
   ["rectangle-stack", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19 8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3zM5 10a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1z"/>\n	<path fill="currentColor" d="M18 5a2 2 0 0 1 2 2H4c0-1.1.9-2 2-2zM16 2a2 2 0 0 1 2 2H6c0-1.1.9-2 2-2z"/>\n</svg>'],
   ["shield-check-mark", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m16.41 9.41-5.2 5.21L8 11.42 9.41 10l1.8 1.8L15 8z"/>\n	<path fill="currentColor" d="M20.39 4.83A14 14 0 0 1 12 22 14 14 0 0 1 3.62 4.8L12 2zM5.28 6.35A12 12 0 0 0 12 19.83a12 12 0 0 0 6.73-13.45L12 4.1z"/>\n</svg>'],
   ["ship-wheel", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a1 1 0 0 1 1 1v1.063a7.96 7.96 0 0 1 3.903 1.619l.754-.753a1 1 0 0 1 1.414 1.414l-.754.753A7.96 7.96 0 0 1 19.936 11H21a1 1 0 1 1 0 2h-1.064a7.95 7.95 0 0 1-1.619 3.903l.754.754a1 1 0 0 1-1.414 1.414l-.754-.754A7.95 7.95 0 0 1 13 19.936V21a1 1 0 1 1-2 0v-1.064a7.96 7.96 0 0 1-3.904-1.619l-.753.754a1 1 0 0 1-1.414-1.414l.753-.754A7.96 7.96 0 0 1 4.064 13H3a1 1 0 1 1 0-2h1.064a7.96 7.96 0 0 1 1.618-3.904l-.753-.753a1 1 0 0 1 1.414-1.414l.753.753A7.96 7.96 0 0 1 11 4.063V3a1 1 0 0 1 1-1M8.524 16.889A6 6 0 0 0 11 17.915v-3.09a3 3 0 0 1-.291-.12zm4.766-2.185q-.14.068-.29.121v3.09a6 6 0 0 0 2.475-1.026zM6.085 13c.153.911.51 1.752 1.025 2.475l2.185-2.185a3 3 0 0 1-.121-.29zm8.741 0q-.054.15-.122.29l2.185 2.185A6 6 0 0 0 17.915 13zM12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M7.11 8.524A6 6 0 0 0 6.085 11h3.089q.053-.15.12-.291zm7.594 2.185q.069.142.122.291h3.089a6 6 0 0 0-1.026-2.476zM11 6.084A6 6 0 0 0 8.524 7.11l2.185 2.185A3 3 0 0 1 11 9.174zm2 3.09q.15.053.29.12l2.185-2.184A6 6 0 0 0 13 6.084z"/>\n</svg>'],
   ["slash-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20M5.68 7.1A8 8 0 0 0 16.9 18.32zM12 4c-1.85 0-3.55.63-4.9 1.68L18.32 16.9A8 8 0 0 0 12 4"/>\n</svg>'],
+  ["sparkles", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.4 10.16c.1-.53.86-.53.97 0l.8 3.67a1 1 0 0 0 .76.77l3.68.8c.52.1.52.86 0 .97l-3.68.79a1 1 0 0 0-.77.77l-.79 3.67c-.11.53-.86.53-.97 0l-.8-3.67a1 1 0 0 0-.76-.77l-3.68-.8c-.64-.22-.64-.98 0-.97l3.68-.79a1 1 0 0 0 .77-.77zM6.1 4.82c.1-.42.7-.42.79 0l.56 2.61c.06.31.3.55.61.62l2.61.56c.42.09.42.69 0 .78l-2.61.56a.8.8 0 0 0-.61.62l-.56 2.6c-.1.43-.7.43-.79 0l-.56-2.6a.8.8 0 0 0-.61-.62L2.32 9.4c-.43-.09-.43-.7 0-.78l2.6-.56a.8.8 0 0 0 .62-.62zM14.2 2.24c.07-.32.52-.32.59 0l.33 1.54a.6.6 0 0 0 .46.46l1.55.34c.31.06.31.52 0 .58l-1.55.34a.6.6 0 0 0-.46.46l-.33 1.54c-.07.32-.52.32-.59 0l-.33-1.54a.6.6 0 0 0-.46-.46l-1.55-.34c-.32-.06-.32-.52 0-.58l1.55-.34a.6.6 0 0 0 .46-.46z"/>\n</svg>'],
+  ["square-and-arrow-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 9V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-2h2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h7a3 3 0 0 1 3 3v2z"/>\n	<path fill="currentColor" d="M18.41 16.59 17 15.17 19.17 13H8v-2h11.17L17 8.83l1.41-1.42L23 12z"/>\n</svg>'],
   ["square-arrow-right-top", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M11.772 8H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6.765l2-2V19c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3V9a3 3 0 0 1 3-3h8.772z"/>\n	<path fill="currentColor" d="M22 11h-2V5.407l-9.296 9.296L9.3 13.3 18.6 4H13V2h9z"/>\n</svg>'],
   ["square-arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M9 11H7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-2V9h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7c-1.66 0-3-1.34-3-3v-7a3 3 0 0 1 3-3h2z"/>\n	<path fill="currentColor" d="M16.59 5.59 15.17 7 13 4.828V16h-2V4.828L8.83 7 7.41 5.59 12 1z"/>\n</svg>'],
   ["square-plus-on-square", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15 13h3v2h-3v3h-2v-3h-3v-2h3v-3h2z"/>\n	<path fill="currentColor" d="M18 5v1h1c1.66 0 3 1.34 3 3v10c0 1.658-1.308 3-3 3H9c-1.66 0-3-1.34-3-3v-1H5c-1.66 0-3-1.34-3-3V5a3 3 0 0 1 3-3h10c1.66 0 3 1.34 3 3M9 8a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zM5 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1V9a3 3 0 0 1 3-3h7V5a1 1 0 0 0-1-1z"/>\n</svg>'],
   ["sun", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 22h-2v-3.07c.65.09 1.35.09 2 0zM6.4 16.2q.6.8 1.4 1.4l-2.16 2.18-1.42-1.42zM19.78 18.36l-1.42 1.42-2.17-2.17q.8-.6 1.42-1.42z"/>\n	<path fill="currentColor" d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6"/>\n	<path fill="currentColor" d="M5.07 11c-.1.65-.1 1.35 0 2H2v-2zM22 13h-3.07c.1-.65.1-1.35 0-2H22zM7.8 6.4Q7 7 6.4 7.8L4.21 5.65l1.42-1.42zM19.78 5.64 17.6 7.8a7 7 0 0 0-1.42-1.42l2.17-2.17zM13 5.07c-.65-.1-1.35-.1-2 0V2h2z"/>\n</svg>'],
-  ["table-badge-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19 14v4.17l1.58-1.58L22 18l-4 4-4-4 1.42-1.41L17 18.17V14z"/>\n	<path fill="currentColor" d="M18 4c1.57 0 3 1.34 3 3v5.8q-.91-.53-2-.72v-1.33h-6v2.5h1.34a6 6 0 0 0-2 6.75H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM5 17a1 1 0 0 0 1 1h5v-2.75H5zm0-3.75h6v-2.5H5zM6 6a1 1 0 0 0-1 1v1.75h6V6zm7 2.75h6V7a1 1 0 0 0-1-1h-5z"/>\n</svg>'],
+  ["table-badge-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18 13a5 5 0 1 1 0 10 5 5 0 0 1 0-10m-.75 5.38-1.49-1.49-1.06 1.06 3.3 3.3 3.3-3.3-1.06-1.06-1.49 1.49V15h-1.5z"/>\n	<path fill="currentColor" d="M18 4c1.57 0 3 1.34 3 3v5.8q-.94-.53-2-.72v-1.33h-6v2.5h1.34a6.05 6.05 0 0 0-2 6.75H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM5 17a1 1 0 0 0 1 1h5v-2.75H5zm0-3.75h6v-2.5H5zM6 6a1 1 0 0 0-1 1v1.75h6V6zm7 2.75h6V7a1 1 0 0 0-1-1h-5z"/>\n</svg>'],
   ["terminal", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m11.4 12-4 4L6 14.6 8.57 12 6 9.4 7.4 8zM18 16h-6v-2h6z"/>\n	<path fill="currentColor" d="M19 4a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM5 6a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>\n</svg>'],
+  ["timer", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1-8.66 5l1.73 1A8 8 0 1 0 13 4.06V7h-2V2z"/>\n	<path fill="currentColor" d="M12.5 11.13a1 1 0 0 1-1 1.74l-5.2-3 1-1.74z"/>\n</svg>'],
   ["trash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" fill-rule="evenodd" d="M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2h5v2h-1.08L19 19.046A3 3 0 0 1 16 22H8a3 3 0 0 1-3-2.954L4.08 8H3V6h5zM6.087 8l.91 10.917L7 19a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l.003-.083L17.914 8zM14 6h-4V4h4zm-3 4v8H9v-8zm4 0v8h-2v-8z"/>\n</svg>'],
   ["underlined", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M20 22H4v-2h16zM8.7 12.07q0 1.92.81 2.8.84.87 2.55.87 1.61 0 2.47-.91.89-.94.89-2.67V2h2.37v10.16q0 1.78-.72 3.1a4.7 4.7 0 0 1-2.04 2.02q-1.32.81-3.14.72-2.83.09-4.27-1.44c-.95-.9-1.42-2.36-1.42-4.2V2h2.5z"/>\n</svg>']
 ]);
-var __defProp$1a = Object.defineProperty;
+var __defProp$1d = Object.defineProperty;
 var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
 var __decorateClass$1f = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1a(target, key, result);
+  if (kind && result) __defProp$1d(target, key, result);
   return result;
 };
 [
@@ -755,14 +794,14 @@ __decorateClass$1f([
 NLDDIcon = __decorateClass$1f([
   customElement("nldd-icon")
 ], NLDDIcon);
-var __defProp$19 = Object.defineProperty;
+var __defProp$1c = Object.defineProperty;
 var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
 var __decorateClass$1e = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$19(target, key, result);
+  if (kind && result) __defProp$1c(target, key, result);
   return result;
 };
 let NLDDButton = class extends LitElement {
@@ -1213,35 +1252,29 @@ const tooltipStyles = css`
 
 	.tooltip {
 		position: fixed;
-		z-index: var(--_z-index);
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: none;
 		opacity: 0;
-		pointer-events: none;
-		visibility: hidden;
 		transition:
 			opacity var(--_hide-duration) ease,
-			visibility 0ms linear var(--_hide-duration),
-			pointer-events 0ms linear var(--_hide-duration);
+			display var(--_hide-duration) allow-discrete,
+			overlay var(--_hide-duration) allow-discrete;
 	}
 
-	.tooltip.is-visible {
+	.tooltip:popover-open {
 		opacity: 1;
-		visibility: visible;
-		pointer-events: auto;
 		transition:
-			opacity var(--_show-duration) ease var(--_show-delay),
-			visibility 0ms linear,
-			pointer-events 0ms linear var(--_show-delay);
+			opacity var(--_show-duration) ease,
+			display var(--_show-duration) allow-discrete,
+			overlay var(--_show-duration) allow-discrete;
 	}
 
-	/* Focus triggers: geen show delay */
-	.tooltip.is-focus-visible {
-		opacity: 1;
-		visibility: visible;
-		pointer-events: auto;
-		transition:
-			opacity var(--_show-duration) ease,
-			visibility 0ms linear,
-			pointer-events 0ms linear;
+	@starting-style {
+		.tooltip:popover-open {
+			opacity: 0;
+		}
 	}
 
 
@@ -1285,7 +1318,8 @@ function tooltipTemplate(component) {
 			@focusin=${component._handleFocusIn}
 			@focusout=${component._handleFocusOut}
 		></slot>
-		<div class=${classMap({ tooltip: true, "is-visible": component._visible && !component._focusVisible, "is-focus-visible": component._visible && component._focusVisible })}
+		<div class="tooltip"
+			popover="manual"
 			aria-hidden="true"
 			@mouseenter=${component._handleTooltipEnter}
 			@mouseleave=${component._handleTooltipLeave}
@@ -1325,35 +1359,35 @@ function isPointerMode() {
 function isTouchMode() {
   return getInputModality() === "touch";
 }
-var __defProp$18 = Object.defineProperty;
+var __defProp$1b = Object.defineProperty;
 var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
 var __decorateClass$1d = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$18(target, key, result);
+  if (kind && result) __defProp$1b(target, key, result);
   return result;
 };
 let tooltipCounter = 0;
 const coarsePointerQuery = matchMedia("(pointer: coarse)");
+const DEFAULT_SHOW_DELAY_MS = 700;
+const DEFAULT_HIDE_DELAY_MS = 50;
 let NLDDTooltip = class extends LitElement {
   constructor() {
     super(...arguments);
     this.text = "";
     this.placement = "bottom";
+    this.disabled = false;
     this._visible = false;
-    this._focusVisible = false;
     this._tooltipId = `nldd-tooltip-${++tooltipCounter}`;
     this._hideTimeout = null;
+    this._showTimeout = null;
     this._descriptionEl = null;
     this._currentTrigger = null;
     this._boundSlotChange = () => this._syncAriaDescribedBy();
     this._handleKeyDown = (e) => {
-      if (e.key === "Escape" && this._visible) {
-        this._visible = false;
-        this._focusVisible = false;
-      }
+      if (e.key === "Escape" && this._visible) this._visible = false;
     };
   }
   get _effectivePlacement() {
@@ -1370,12 +1404,27 @@ let NLDDTooltip = class extends LitElement {
     this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", this._boundSlotChange);
   }
   updated(changed) {
-    if (changed.has("_visible") && this._visible) {
-      this._updatePosition();
+    if (changed.has("_visible")) {
+      const tooltip = this._getTooltipElement();
+      if (tooltip) {
+        if (this._visible) {
+          if (!tooltip.matches(":popover-open")) tooltip.showPopover();
+          this._updatePosition();
+        } else if (tooltip.matches(":popover-open")) {
+          tooltip.hidePopover();
+        }
+      }
     }
-    if (changed.has("text")) {
+    if (changed.has("text") || changed.has("disabled")) {
       this._syncAriaDescribedBy();
     }
+    if (changed.has("disabled") && this.disabled) {
+      if (this._showTimeout) {
+        clearTimeout(this._showTimeout);
+        this._showTimeout = null;
+      }
+      if (this._visible) this._visible = false;
+    }
   }
   _syncAriaDescribedBy() {
     const trigger = this._getTriggerElement();
@@ -1387,7 +1436,7 @@ let NLDDTooltip = class extends LitElement {
     if (trigger.getRootNode() !== document) {
       return;
     }
-    if (this.text) {
+    if (this.text && !this.disabled) {
       if (!this._descriptionEl) {
         this._descriptionEl = document.createElement("span");
         this._descriptionEl.id = this._tooltipId;
@@ -1418,30 +1467,45 @@ let NLDDTooltip = class extends LitElement {
     return this.shadowRoot?.querySelector(".tooltip") ?? null;
   }
   _handleTriggerEnter() {
+    if (this.disabled) return;
     if (!this.text) return;
     if (coarsePointerQuery.matches) return;
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
       this._hideTimeout = null;
     }
-    this._focusVisible = false;
-    this._visible = true;
+    if (this._showTimeout) clearTimeout(this._showTimeout);
+    const parsedShow = parseInt(getComputedStyle(this).getPropertyValue("--_show-delay"), 10);
+    const showDelay = Number.isFinite(parsedShow) ? parsedShow : DEFAULT_SHOW_DELAY_MS;
+    this._showTimeout = setTimeout(() => {
+      this._showTimeout = null;
+      this._visible = true;
+    }, showDelay);
   }
   _handleFocusIn() {
+    if (this.disabled) return;
     if (!this.text) return;
     if (isTouchMode()) return;
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
       this._hideTimeout = null;
     }
-    this._focusVisible = true;
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     this._visible = true;
   }
   _handleTriggerLeave() {
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
     }
-    const hideDelay = parseInt(getComputedStyle(this).getPropertyValue("--_hide-delay"), 10);
+    const parsedHide = parseInt(getComputedStyle(this).getPropertyValue("--_hide-delay"), 10);
+    const hideDelay = Number.isFinite(parsedHide) ? parsedHide : DEFAULT_HIDE_DELAY_MS;
     this._hideTimeout = setTimeout(() => {
       this._visible = false;
       this._hideTimeout = null;
@@ -1491,6 +1555,10 @@ let NLDDTooltip = class extends LitElement {
       clearTimeout(this._hideTimeout);
       this._hideTimeout = null;
     }
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     this._currentTrigger?.removeAttribute("aria-describedby");
     this._currentTrigger = null;
     this._descriptionEl?.remove();
@@ -1508,11 +1576,11 @@ __decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDTooltip.prototype, "placement", 2);
 __decorateClass$1d([
-  state()
-], NLDDTooltip.prototype, "_visible", 2);
+  property({ type: Boolean, reflect: true })
+], NLDDTooltip.prototype, "disabled", 2);
 __decorateClass$1d([
   state()
-], NLDDTooltip.prototype, "_focusVisible", 2);
+], NLDDTooltip.prototype, "_visible", 2);
 NLDDTooltip = __decorateClass$1d([
   customElement("nldd-tooltip")
 ], NLDDTooltip);
@@ -1575,14 +1643,14 @@ function template$l() {
   }
   return renderButton();
 }
-var __defProp$17 = Object.defineProperty;
+var __defProp$1a = Object.defineProperty;
 var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1c = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$17(target, key, result);
+  if (kind && result) __defProp$1a(target, key, result);
   return result;
 };
 let NLDDIconButton = class extends LitElement {
@@ -2153,13 +2221,13 @@ function template$j() {
 		${this.icon ? html`<nldd-icon name=${this.icon}></nldd-icon>` : html`<slot></slot>`}
 	`;
 }
-var __defProp$16 = Object.defineProperty;
+var __defProp$19 = Object.defineProperty;
 var __decorateClass$1b = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$16(target, key, result);
+  if (result) __defProp$19(target, key, result);
   return result;
 };
 function VisibilityMixin(Base) {
@@ -2203,14 +2271,14 @@ function VisibilityMixin(Base) {
   ], WithVisibility.prototype, "hideAbove");
   return WithVisibility;
 }
-var __defProp$15 = Object.defineProperty;
+var __defProp$18 = Object.defineProperty;
 var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1a = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$15(target, key, result);
+  if (kind && result) __defProp$18(target, key, result);
   return result;
 };
 let NLDDIconCell = class extends VisibilityMixin(LitElement) {
@@ -2286,14 +2354,14 @@ const spacerCellStyles = css`
 		width: auto;
 	}
 `;
-var __defProp$14 = Object.defineProperty;
+var __defProp$17 = Object.defineProperty;
 var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
 var __decorateClass$19 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$14(target, key, result);
+  if (kind && result) __defProp$17(target, key, result);
   return result;
 };
 let NLDDSpacerCell = class extends VisibilityMixin(LitElement) {
@@ -2396,6 +2464,7 @@ const textCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
@@ -2419,6 +2488,8 @@ const textCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 
 	:host([size='md']) .text-cell__text,
@@ -2465,6 +2536,7 @@ const textCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
@@ -2525,14 +2597,14 @@ function template$i() {
 		${this.supportingText ? html`<p class="text-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
 	`;
 }
-var __defProp$13 = Object.defineProperty;
+var __defProp$16 = Object.defineProperty;
 var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
 var __decorateClass$18 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$13(target, key, result);
+  if (kind && result) __defProp$16(target, key, result);
   return result;
 };
 let NLDDTextCell = class extends VisibilityMixin(LitElement) {
@@ -2639,6 +2711,8 @@ const inlineDialogStyles = css`
 	:host {
 		display: flex;
 		justify-content: center;
+		align-items: center;
+		flex-grow: 1;
 
 		--_icon-color: var(--semantics-content-color);
 	}
@@ -2684,6 +2758,7 @@ const inlineDialogStyles = css`
 		font: var(--primitives-font-body-md-bold-tight);
 		color: var(--semantics-content-color);
 		text-align: center;
+		text-wrap: pretty;
 	}
 
 	.inline-dialog__text:focus-visible {
@@ -2699,6 +2774,7 @@ const inlineDialogStyles = css`
 		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--semantics-content-color);
 		text-align: center;
+		text-wrap: pretty;
 	}
 
 
@@ -2817,14 +2893,14 @@ function template$h() {
 	</div>
 	`;
 }
-var __defProp$12 = Object.defineProperty;
+var __defProp$15 = Object.defineProperty;
 var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
 var __decorateClass$17 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$12(target, key, result);
+  if (kind && result) __defProp$15(target, key, result);
   return result;
 };
 let NLDDButtonGroup = class extends LitElement {
@@ -2869,14 +2945,14 @@ __decorateClass$17([
 NLDDButtonGroup = __decorateClass$17([
   customElement("nldd-button-group")
 ], NLDDButtonGroup);
-var __defProp$11 = Object.defineProperty;
+var __defProp$14 = Object.defineProperty;
 var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
 var __decorateClass$16 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$11(target, key, result);
+  if (kind && result) __defProp$14(target, key, result);
   return result;
 };
 let NLDDInlineDialog = class extends LitElement {
@@ -2945,13 +3021,13 @@ NLDDInlineDialog = __decorateClass$16([
   customElement("nldd-inline-dialog")
 ], NLDDInlineDialog);
 const POPOVER_REOPEN_GUARD_MS = 100;
-var __defProp$10 = Object.defineProperty;
+var __defProp$13 = Object.defineProperty;
 var __decorateClass$15 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$10(target, key, result);
+  if (result) __defProp$13(target, key, result);
   return result;
 };
 const _NLDDMenuDivider = class _NLDDMenuDivider extends LitElement {
@@ -3073,6 +3149,7 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     this._isEmpty = false;
     this._isOpen = false;
     this._closedAt = 0;
+    this._cleanupAutoUpdate = null;
     this._handleDocumentClick = (event) => {
       if (this.anchorElement) return;
       const anchorEl = this._getAnchorEl();
@@ -3139,6 +3216,8 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
       this._isOpen = toggleEvent.newState === "open";
       if (toggleEvent.newState !== "open") {
         this._closedAt = Date.now();
+        this._cleanupAutoUpdate?.();
+        this._cleanupAutoUpdate = null;
         return;
       }
       this._updateDividerVisibility();
@@ -3148,6 +3227,10 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
         item.menuVariant = this.variant;
       });
       await this.reposition();
+      const anchorEl = this._getAnchorEl();
+      if (anchorEl) {
+        this._cleanupAutoUpdate = autoUpdate(anchorEl, this, () => this.reposition());
+      }
       await this.updateComplete;
       if (this.variant !== "listbox") {
         const keyboard = isKeyboardMode();
@@ -3223,6 +3306,8 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     this.removeEventListener("mouseleave", this._handleMouseleave);
     this.removeEventListener("menu-item-focused", this._handleMenuItemFocused);
     document.removeEventListener("click", this._handleDocumentClick);
+    this._cleanupAutoUpdate?.();
+    this._cleanupAutoUpdate = null;
   }
   // — Internal helpers ——————————————————————————————————————————————————————
   _getVisibleItems() {
@@ -3402,14 +3487,14 @@ __decorateClass$15([
 if (!customElements.get("nldd-menu")) {
   customElements.define("nldd-menu", NLDDMenu);
 }
-var __defProp$$ = Object.defineProperty;
+var __defProp$12 = Object.defineProperty;
 var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
 var __decorateClass$14 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$$(target, key, result);
+  if (kind && result) __defProp$12(target, key, result);
   return result;
 };
 let NLDDSplitButton = class extends LitElement {
@@ -3648,14 +3733,14 @@ function renderChild(child) {
   }
   return html`<slot name="child-${child.id}"></slot>`;
 }
-var __defProp$_ = Object.defineProperty;
+var __defProp$11 = Object.defineProperty;
 var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
 var __decorateClass$13 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$_(target, key, result);
+  if (kind && result) __defProp$11(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-button-bar-divider")) {
@@ -4166,14 +4251,14 @@ function template$f(startChildren, centerChildren, endChildren, overflowIds, siz
 const nlddToolbarTranslations = {
   "components.toolbar.overflow-action": "Meer"
 };
-var __defProp$Z = Object.defineProperty;
+var __defProp$10 = Object.defineProperty;
 var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
 var __decorateClass$12 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$Z(target, key, result);
+  if (kind && result) __defProp$10(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-toolbar-item")) {
@@ -4781,14 +4866,14 @@ function template$e(helpers) {
 		</a>
 	`;
 }
-var __defProp$Y = Object.defineProperty;
+var __defProp$$ = Object.defineProperty;
 var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
 var __decorateClass$11 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$Y(target, key, result);
+  if (kind && result) __defProp$$(target, key, result);
   return result;
 };
 let NLDDLink = class extends LitElement {
@@ -4856,14 +4941,14 @@ __decorateClass$11([
 NLDDLink = __decorateClass$11([
   customElement("nldd-link")
 ], NLDDLink);
-var __defProp$X = Object.defineProperty;
+var __defProp$_ = Object.defineProperty;
 var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
 var __decorateClass$10 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$X(target, key, result);
+  if (kind && result) __defProp$_(target, key, result);
   return result;
 };
 let NLDDRichText = class extends LitElement {
@@ -4887,9 +4972,9 @@ const breakpoints = {
   mdMax: "1007px",
   lgMin: "1008px"
 };
-const smMax$8 = unsafeCSS(breakpoints.smMax);
-const mdMin$b = unsafeCSS(breakpoints.mdMin);
-const mdMax$2 = unsafeCSS(breakpoints.mdMax);
+const smMax$c = unsafeCSS(breakpoints.smMax);
+const mdMin$d = unsafeCSS(breakpoints.mdMin);
+const mdMax$8 = unsafeCSS(breakpoints.mdMax);
 const lgMin$a = unsafeCSS(breakpoints.lgMin);
 const titleStyles = css`
 
@@ -4930,6 +5015,7 @@ const titleStyles = css`
 
 	::slotted([slot='overline']) {
 		margin: 0;
+		overflow-wrap: anywhere;
 		color: var(--semantics-content-secondary-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
@@ -4939,15 +5025,17 @@ const titleStyles = css`
 
 	::slotted(:not([slot])) {
 		margin: 0;
+		overflow-wrap: anywhere;
 		color: var(--semantics-content-color);
+		text-wrap: pretty;
 	}
 
 	:host([size='1']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
@@ -4955,11 +5043,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-1-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
@@ -4969,11 +5057,11 @@ const titleStyles = css`
 	}
 
 	:host([size='2']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
@@ -4981,11 +5069,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-2-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
@@ -4996,11 +5084,11 @@ const titleStyles = css`
 
 	:host([size='3']) ::slotted(:not([slot])),
 	:host(:not([size])) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
@@ -5008,11 +5096,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-3-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
@@ -5022,11 +5110,11 @@ const titleStyles = css`
 	}
 
 	:host([size='4']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
@@ -5034,11 +5122,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-4-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
@@ -5048,11 +5136,11 @@ const titleStyles = css`
 	}
 
 	:host([size='5']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
@@ -5060,11 +5148,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-5-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
@@ -5074,11 +5162,11 @@ const titleStyles = css`
 	}
 
 	:host([size='6']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
@@ -5086,11 +5174,11 @@ const titleStyles = css`
 			font: var(--primitives-font-display-6-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$c}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
@@ -5104,6 +5192,7 @@ const titleStyles = css`
 
 	::slotted([slot='subtitle']) {
 		margin: 0;
+		overflow-wrap: anywhere;
 		color: var(--semantics-content-secondary-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
@@ -5133,14 +5222,14 @@ function titleTemplate() {
 		</div>
 	`;
 }
-var __defProp$W = Object.defineProperty;
+var __defProp$Z = Object.defineProperty;
 var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
 var __decorateClass$$ = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$W(target, key, result);
+  if (kind && result) __defProp$Z(target, key, result);
   return result;
 };
 let NLDDTitle = class extends LitElement {
@@ -5159,7 +5248,7 @@ __decorateClass$$([
 NLDDTitle = __decorateClass$$([
   customElement("nldd-title")
 ], NLDDTitle);
-const smMax$7 = unsafeCSS(breakpoints.smMax);
+const smMax$b = unsafeCSS(breakpoints.smMax);
 const blockquoteStyles = css`
 
 
@@ -5173,7 +5262,7 @@ const blockquoteStyles = css`
 		max-width: var(--semantics-blockquotes-max-width);
 	}
 
-	@media (max-width: ${smMax$7}) {
+	@media (max-width: ${smMax$b}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -5181,7 +5270,7 @@ const blockquoteStyles = css`
 		}
 	}
 
-	@container layout-area (max-width: ${smMax$7}) {
+	@container layout-area (max-width: ${smMax$b}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -5255,13 +5344,13 @@ function template$d(component) {
 		</blockquote>
 	`;
 }
-var __defProp$V = Object.defineProperty;
+var __defProp$Y = Object.defineProperty;
 var __decorateClass$_ = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$V(target, key, result);
+  if (result) __defProp$Y(target, key, result);
   return result;
 };
 function withTranslations(Base, defaults) {
@@ -5296,14 +5385,14 @@ function withTranslations(Base, defaults) {
 const nlddBlockquoteTranslations = {
   "components.blockquote.attribution-prefix": "— "
 };
-var __defProp$U = Object.defineProperty;
+var __defProp$X = Object.defineProperty;
 var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
 var __decorateClass$Z = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$U(target, key, result);
+  if (kind && result) __defProp$X(target, key, result);
   return result;
 };
 let NLDDBlockquote = class extends withTranslations(LitElement, nlddBlockquoteTranslations) {
@@ -5458,14 +5547,14 @@ function template$c(component) {
 		</span>
 	`;
 }
-var __defProp$T = Object.defineProperty;
+var __defProp$W = Object.defineProperty;
 var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
 var __decorateClass$Y = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$T(target, key, result);
+  if (kind && result) __defProp$W(target, key, result);
   return result;
 };
 let NLDDTag = class extends LitElement {
@@ -5634,14 +5723,14 @@ function template$b(component) {
 		</kbd>
 	`;
 }
-var __defProp$S = Object.defineProperty;
+var __defProp$V = Object.defineProperty;
 var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
 var __decorateClass$X = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$S(target, key, result);
+  if (kind && result) __defProp$V(target, key, result);
   return result;
 };
 let NLDDKeyboardShortcut = class extends LitElement {
@@ -5683,7 +5772,6 @@ const FORWARDED_ATTRIBUTES = [
   "autocomplete"
 ];
 const DESCENDANT_SELECTOR = "nldd-form-field, nldd-form-actions";
-const INHERITED_MARKER = "formAlignmentInherited";
 class NLDDForm extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -5745,45 +5833,26 @@ class NLDDForm extends HTMLElement {
   }
   /**
    * Push `label-alignment` to descendant nldd-form-field and nldd-form-actions
-   * elements that don't have an explicit own value. We track inherited
-   * assignments via a data-attribute so subsequent updates only touch the
-   * elements we previously inherited to — explicit per-element overrides
-   * are preserved.
-   *
-   * **Timing-subtleties (Lit reflect-default + MutationObserver race):**
+   * elements as a separate `form-label-alignment` attribute, defaulting to
+   * `'top'` when the form itself has no `label-alignment`. Descendant CSS
+   * uses `[label-alignment="X"]` first and falls back to
+   * `[form-label-alignment="X"]` when no own value is set, so a consumer's
+   * explicit `label-alignment` always wins automatically — without us having
+   * to track which elements we previously inherited to.
    *
-   * Lit-based descendants (nldd-form-field, nldd-form-actions) reflecten hun
-   * default `label-alignment="top"` op het attribuut wanneer hun eerste
-   * update fired. Een naïeve `hasOwn`-check zou dan elke vers gemaakte
-   * descendant als "explicit own value" zien en propagation skippen.
+   * Always-setting (rather than only when the form has its own value) lets
+   * downstream selectors assume the attribute is present on every descendant
+   * inside an `nldd-form`, which keeps form.css's adjacent-sibling tight-gap
+   * rule simple.
    *
-   * In praktijk werkt 't omdat:
-   * 1. Bij parsed HTML fires de form's connectedCallback VOORDAT children
-   *    upgraden — propagation set 'right' op het attribuut, child upgrade
-   *    leest dat als initial value (geen reflect-default-conflict).
-   * 2. Bij dynamic appendChild fires de MutationObserver na DOM-mutation
-   *    maar microtask-volgorde laat de propagation z'n attribuut zetten
-   *    voordat Lit's reflection 't kan overschrijven (Lit reflect = ook
-   *    microtask, maar de MO callback runt eerder in deze flow).
-   *
-   * Regression test: form.test.ts "propageert ook naar later toegevoegde
-   * form-actions children" verifieert deze flow. Verander deze guard
-   * niet zonder die test te draaien.
+   * The two-attribute split also avoids the historical Lit reflect-default
+   * vs MutationObserver timing race: we never touch `label-alignment` on
+   * the descendant, so a freshly upgraded Lit element reflecting its default
+   * doesn't conflict with the form's intent.
    */
   _propagateLabelAlignment(value) {
     const fields = this.querySelectorAll(DESCENDANT_SELECTOR);
-    fields.forEach((f) => {
-      const isInherited = f.dataset[INHERITED_MARKER] === "true";
-      const hasOwn = f.hasAttribute("label-alignment");
-      if (hasOwn && !isInherited) return;
-      if (value) {
-        f.setAttribute("label-alignment", value);
-        f.dataset[INHERITED_MARKER] = "true";
-      } else if (isInherited) {
-        f.removeAttribute("label-alignment");
-        delete f.dataset[INHERITED_MARKER];
-      }
-    });
+    fields.forEach((f) => f.setAttribute("form-label-alignment", value ?? "top"));
   }
   _mirrorAttributes() {
     if (!this._form) return;
@@ -5825,7 +5894,9 @@ const formActionsStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-actions,
-	:host([label-alignment='right']) .form-actions {
+	:host([label-alignment='right']) .form-actions,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-actions,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-actions {
 		@container (min-width: 641px) {
 			flex-direction: row;
 			align-items: start;
@@ -5834,7 +5905,9 @@ const formActionsStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-actions::before,
-	:host([label-alignment='right']) .form-actions::before {
+	:host([label-alignment='right']) .form-actions::before,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-actions::before,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-actions::before {
 		@container (min-width: 641px) {
 			content: '';
 			flex-grow: 0;
@@ -5863,20 +5936,20 @@ function formActionsTemplate() {
 		</div>
 	`;
 }
-var __defProp$R = Object.defineProperty;
+var __defProp$U = Object.defineProperty;
 var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
 var __decorateClass$W = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$R(target, key, result);
+  if (kind && result) __defProp$U(target, key, result);
   return result;
 };
 let NLDDFormActions = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.labelAlignment = "top";
+    this.labelAlignment = void 0;
   }
   render() {
     return formActionsTemplate();
@@ -5915,7 +5988,9 @@ const formFieldStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-field,
-	:host([label-alignment='right']) .form-field {
+	:host([label-alignment='right']) .form-field,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field {
 		@container (min-width: 641px) {
 			flex-direction: row;
 			align-items: start;
@@ -5933,7 +6008,9 @@ const formFieldStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-field__header,
-	:host([label-alignment='right']) .form-field__header {
+	:host([label-alignment='right']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header {
 		@container (min-width: 641px) {
 			flex-grow: 0;
 			flex-shrink: 0;
@@ -5943,14 +6020,16 @@ const formFieldStyles = css`
 		}
 	}
 
-	:host([label-alignment='right']) .form-field__header {
+	:host([label-alignment='right']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header {
 		@container (min-width: 641px) {
 			align-items: end;
 			text-align: right;
 		}
 	}
 
-	:host([label-alignment='left']) .form-field__header {
+	:host([label-alignment='left']) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header {
 		@container (min-width: 641px) {
 			align-items: start;
 			text-align: left;
@@ -5962,7 +6041,9 @@ const formFieldStyles = css`
 	}
 
 	:host([label-alignment='left']) .form-field__header.is-empty,
-	:host([label-alignment='right']) .form-field__header.is-empty {
+	:host([label-alignment='right']) .form-field__header.is-empty,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header.is-empty,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header.is-empty {
 		@container (min-width: 641px) {
 			display: flex;
 		}
@@ -5977,10 +6058,13 @@ const formFieldStyles = css`
 		gap: var(--primitives-space-4);
 		color: var(--semantics-content-color);
 		font: var(--primitives-font-body-md-regular-tight);
+		text-wrap: pretty;
 	}
 
 	:host([label-alignment='left']) .form-field__label,
-	:host([label-alignment='right']) .form-field__label {
+	:host([label-alignment='right']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__label {
 		@container (min-width: 641px) {
 			display: flex;
 			flex-direction: column;
@@ -5988,13 +6072,15 @@ const formFieldStyles = css`
 		}
 	}
 
-	:host([label-alignment='right']) .form-field__label {
+	:host([label-alignment='right']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__label {
 		@container (min-width: 641px) {
 			align-items: end;
 		}
 	}
 
-	:host([label-alignment='left']) .form-field__label {
+	:host([label-alignment='left']) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__label {
 		@container (min-width: 641px) {
 			align-items: start;
 		}
@@ -6014,6 +6100,7 @@ const formFieldStyles = css`
 	.form-field__supporting-label {
 		color: var(--semantics-content-secondary-color);
 		font: var(--primitives-font-body-xs-regular-tight);
+		text-wrap: pretty;
 	}
 
 
@@ -6187,14 +6274,14 @@ function formFieldErrorTextTemplate(_component) {
 		</p>
 	`;
 }
-var __defProp$Q = Object.defineProperty;
+var __defProp$T = Object.defineProperty;
 var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
 var __decorateClass$V = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$Q(target, key, result);
+  if (kind && result) __defProp$T(target, key, result);
   return result;
 };
 const HELPER_TAGS = ["nldd-form-field-help-text", "nldd-form-field-error-text"];
@@ -6205,7 +6292,7 @@ function generateId() {
 let NLDDFormField = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.labelAlignment = "top";
+    this.labelAlignment = void 0;
     this.label = "";
     this.supportingLabel = "";
     this.optional = false;
@@ -6714,14 +6801,14 @@ function textFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$P = Object.defineProperty;
+var __defProp$S = Object.defineProperty;
 var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
 var __decorateClass$U = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$P(target, key, result);
+  if (kind && result) __defProp$S(target, key, result);
   return result;
 };
 let NLDDTextField = class extends LitElement {
@@ -7121,14 +7208,14 @@ function passwordFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$O = Object.defineProperty;
+var __defProp$R = Object.defineProperty;
 var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
 var __decorateClass$T = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$O(target, key, result);
+  if (kind && result) __defProp$R(target, key, result);
   return result;
 };
 let NLDDPasswordField = class extends LitElement {
@@ -7266,9 +7353,11 @@ const searchFieldStyles = css`
 	/* # Host */
 
 	:host {
-		display: block;
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+
+		display: block;
+		min-width: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -7485,14 +7574,14 @@ const nlddSearchFieldTranslations = {
   "components.search-field.clear-action": "Wis zoekopdracht",
   "components.search-field.search-action": "Zoek"
 };
-var __defProp$N = Object.defineProperty;
+var __defProp$Q = Object.defineProperty;
 var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
 var __decorateClass$S = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$N(target, key, result);
+  if (kind && result) __defProp$Q(target, key, result);
   return result;
 };
 let NLDDSearchField = class extends LitElement {
@@ -7808,14 +7897,14 @@ const nlddNumberFieldTranslations = {
   "components.number-field.increment-action": "Verhoog",
   "components.number-field.to-adjust-value-action": "Waarde aanpassen"
 };
-var __defProp$M = Object.defineProperty;
+var __defProp$P = Object.defineProperty;
 var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$M(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 let NLDDNumberField = class extends LitElement {
@@ -8166,14 +8255,14 @@ function dropdownTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$L = Object.defineProperty;
+var __defProp$O = Object.defineProperty;
 var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$L(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 let NLDDDropdown = class extends LitElement {
@@ -8537,14 +8626,14 @@ const nlddComboBoxTranslations = {
   "components.combo-box.open-menu-action": "Toon opties",
   "components.combo-box.clear-action": "Wis invoer"
 };
-var __defProp$K = Object.defineProperty;
+var __defProp$N = Object.defineProperty;
 var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
 var __decorateClass$P = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$K(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 let NLDDComboBox = class extends LitElement {
@@ -8970,14 +9059,14 @@ const nlddStepperTranslations = {
   "components.stepper.increment-action": "Verhoog",
   "components.stepper.to-adjust-value-action": "Aantal aanpassen"
 };
-var __defProp$J = Object.defineProperty;
+var __defProp$M = Object.defineProperty;
 var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$J(target, key, result);
+  if (kind && result) __defProp$M(target, key, result);
   return result;
 };
 let NLDDStepper = class extends LitElement {
@@ -9220,14 +9309,14 @@ function checkboxTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$I = Object.defineProperty;
+var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
 var __decorateClass$N = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$I(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 let NLDDCheckbox = class extends LitElement {
@@ -9356,14 +9445,14 @@ function checkboxFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$H = Object.defineProperty;
+var __defProp$K = Object.defineProperty;
 var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
 var __decorateClass$M = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 let NLDDCheckboxField = class extends LitElement {
@@ -9555,14 +9644,14 @@ function radioButtonTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$G = Object.defineProperty;
+var __defProp$J = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
 var __decorateClass$L = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 let NLDDRadioButton = class extends LitElement {
@@ -9687,14 +9776,14 @@ function radioButtonFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$F = Object.defineProperty;
+var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
 var __decorateClass$K = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 let NLDDRadioButtonField = class extends LitElement {
@@ -9775,14 +9864,14 @@ function radioButtonGroupTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$E = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
 var __decorateClass$J = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let NLDDRadioButtonGroup = class extends LitElement {
@@ -10077,14 +10166,14 @@ function switchTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$D = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
 var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let NLDDSwitch = class extends LitElement {
@@ -10251,14 +10340,14 @@ function switchFieldTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$C = Object.defineProperty;
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
 var __decorateClass$H = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 let NLDDSwitchField = class extends LitElement {
@@ -10558,14 +10647,14 @@ function segmentedControlItemTemplate(component) {
   }
   return label;
 }
-var __defProp$B = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
 var __decorateClass$G = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let NLDDSegmentedControlItem = class extends LitElement {
@@ -11036,14 +11125,14 @@ function toggleButtonTemplate(component) {
   }
   return result;
 }
-var __defProp$A = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$F = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let NLDDToggleButton = class extends LitElement {
@@ -11176,14 +11265,14 @@ function toggleButtonGroupTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$z = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __decorateClass$E = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 let NLDDToggleButtonGroup = class extends LitElement {
@@ -11481,14 +11570,14 @@ function tokenTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$y = Object.defineProperty;
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
 var __decorateClass$D = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 let NLDDToken = class extends LitElement {
@@ -11589,21 +11678,53 @@ function appViewTemplate(_component) {
 		</div>
 	`;
 }
-var __defProp$x = Object.defineProperty;
+var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
 var __decorateClass$C = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
+const _connectedStack = [];
+function _currentOwner() {
+  for (let i = _connectedStack.length - 1; i >= 0; i--) {
+    if (_connectedStack[i].isConnected) return _connectedStack[i];
+  }
+  return null;
+}
 let NLDDAppView = class extends LitElement {
   constructor() {
     super(...arguments);
     this.background = "default";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    _connectedStack.push(this);
+    this._writeBodyBackground();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const idx = _connectedStack.indexOf(this);
+    if (idx >= 0) _connectedStack.splice(idx, 1);
+    const owner = _currentOwner();
+    if (owner) {
+      owner._writeBodyBackground();
+    } else {
+      document.body.style.removeProperty("background-color");
+    }
+  }
+  updated(changed) {
+    if (changed.has("background") && _currentOwner() === this) {
+      this._writeBodyBackground();
+    }
+  }
+  _writeBodyBackground() {
+    const token = this.background === "tinted" ? "--semantics-surfaces-tinted-background-color" : "--semantics-surfaces-background-color";
+    document.body.style.backgroundColor = `var(${token})`;
+  }
   render() {
     return appViewTemplate();
   }
@@ -11615,22 +11736,19 @@ __decorateClass$C([
 NLDDAppView = __decorateClass$C([
   customElement("nldd-app-view")
 ], NLDDAppView);
-const smMax$6 = unsafeCSS(breakpoints.smMax);
 const barSplitViewStyles = css`
 
 
 	/* # Host */
 
 	:host {
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
 		background-color: var(--_background-color);
-
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
-		--context-bar-split-view-top-bars-height: 0px;
-		--context-bar-split-view-bottom-bars-height: 0px;
 	}
 
 	:host([background="default"]) {
@@ -11656,7 +11774,6 @@ const barSplitViewStyles = css`
 		flex: 1;
 		min-height: 0;
 		min-width: 0;
-		position: relative;
 	}
 
 
@@ -11668,15 +11785,6 @@ const barSplitViewStyles = css`
 		flex-shrink: 0;
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		@media (max-width: ${smMax$6}) {
-			position: absolute;
-			left: 0;
-			right: 0;
-			z-index: 2;
-		}
 	}
 
 
@@ -11696,40 +11804,6 @@ const barSplitViewStyles = css`
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		@media (max-width: ${smMax$6}) {
-			&::before {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				z-index: 1;
-				height: calc(var(--context-bar-split-view-top-bars-height) + var(--primitives-space-32));
-				background: linear-gradient(
-					to bottom,
-					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-top-bars-height),
-					transparent);
-				pointer-events: none;
-			}
-
-			&::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				z-index: 1;
-				height: calc(var(--context-bar-split-view-bottom-bars-height) + var(--primitives-space-32));
-				background: linear-gradient(
-					to top,
-					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-bottom-bars-height),
-					transparent);
-				pointer-events: none;
-			}
-		}
 	}
 
 
@@ -11832,14 +11906,14 @@ function splitViewDividerTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$w = Object.defineProperty;
+var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __decorateClass$B = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 let NLDDSplitViewDivider = class extends LitElement {
@@ -11870,13 +11944,13 @@ function barSplitViewTemplate(component) {
 			${sorted.map((el, index) => {
     const isMain = el.slot === "main";
     const isLast = index === sorted.length - 1;
-    const barStyles = !isMain && isSm ? component._smTopBars.has(el) ? { top: `${component._smOffsets.get(el) ?? 0}px` } : { bottom: `${component._smOffsets.get(el) ?? 0}px` } : {};
+    const next = sorted[index + 1];
+    const showDivider = !isSm && !isLast && !el.hasAttribute("no-divider") && !next?.hasAttribute("no-divider");
     return html`
-					<div class=${classMap({ "bar-split-view__main": isMain, "bar-split-view__bar": !isMain })}
-						style=${styleMap(barStyles)}>
+					<div class=${classMap({ "bar-split-view__main": isMain, "bar-split-view__bar": !isMain })}>
 						<slot name=${el.slot}></slot>
 					</div>
-					${!isSm && !isLast ? html`
+					${showDivider ? html`
 						<div class="bar-split-view__divider">
 							<nldd-split-view-divider orientation="horizontal"></nldd-split-view-divider>
 						</div>
@@ -11891,14 +11965,14 @@ function barSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$v = Object.defineProperty;
+var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
 var __decorateClass$A = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
 const smMaxPx = parseInt(breakpoints.smMax);
@@ -11908,32 +11982,22 @@ let NLDDBarSplitView = class extends LitElement {
     super(...arguments);
     this.background = "inherit";
     this._currentBreakpoint = null;
-    this._smTopBars = /* @__PURE__ */ new Set();
-    this._smOffsets = /* @__PURE__ */ new Map();
     this._observer = null;
     this._resizeObserver = null;
-    this._childResizeObserver = null;
   }
   connectedCallback() {
     super.connectedCallback();
     this._currentBreakpoint = this._getBreakpoint(this.getBoundingClientRect().width);
-    this._observer = new MutationObserver(() => {
-      this._observeChildren();
-      this._updateLayout();
-      this.requestUpdate();
-    });
-    this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ["above", "below", "only", "sm-order", "md-order", "lg-order"], subtree: false });
+    this._observer = new MutationObserver(() => this.requestUpdate());
+    this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ["above", "below", "only", "sm-order", "md-order", "lg-order", "no-divider"], subtree: false });
     this._resizeObserver = new ResizeObserver(() => {
       const bp = this._getBreakpoint(this.getBoundingClientRect().width);
       if (bp !== this._currentBreakpoint) {
         this._currentBreakpoint = bp;
         this.requestUpdate();
       }
-      this._updateLayout();
     });
     this._resizeObserver.observe(this);
-    this._childResizeObserver = new ResizeObserver(() => this._updateLayout());
-    this._observeChildren();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -11941,8 +12005,6 @@ let NLDDBarSplitView = class extends LitElement {
     this._observer = null;
     this._resizeObserver?.disconnect();
     this._resizeObserver = null;
-    this._childResizeObserver?.disconnect();
-    this._childResizeObserver = null;
   }
   _getBreakpoint(width) {
     if (width <= smMaxPx) return "sm";
@@ -11977,48 +12039,6 @@ let NLDDBarSplitView = class extends LitElement {
       return aVal - bVal;
     });
   }
-  _observeChildren() {
-    this._childResizeObserver?.disconnect();
-    for (const child of Array.from(this.children)) {
-      this._childResizeObserver?.observe(child);
-    }
-  }
-  _updateLayout() {
-    const width = this.getBoundingClientRect().width;
-    if (width > smMaxPx) {
-      this.style.removeProperty("--context-bar-split-view-top-bars-height");
-      this.style.removeProperty("--context-bar-split-view-bottom-bars-height");
-      this._smTopBars = /* @__PURE__ */ new Set();
-      this._smOffsets = /* @__PURE__ */ new Map();
-      return;
-    }
-    const sorted = this._getSortedChildren();
-    const mainIndex = sorted.findIndex((el) => el.slot === "main");
-    const topBars = mainIndex > 0 ? sorted.slice(0, mainIndex) : [];
-    const bottomBars = mainIndex >= 0 ? sorted.slice(mainIndex + 1) : sorted;
-    this._smTopBars = new Set(topBars);
-    const newOffsets = /* @__PURE__ */ new Map();
-    let topOffset = 0;
-    for (const el of topBars) {
-      newOffsets.set(el, topOffset);
-      topOffset += el.getBoundingClientRect().height;
-    }
-    let bottomOffset = 0;
-    for (const el of [...bottomBars].reverse()) {
-      newOffsets.set(el, bottomOffset);
-      bottomOffset += el.getBoundingClientRect().height;
-    }
-    this._smOffsets = newOffsets;
-    const prevTop = this.style.getPropertyValue("--context-bar-split-view-top-bars-height");
-    const prevBottom = this.style.getPropertyValue("--context-bar-split-view-bottom-bars-height");
-    const nextTop = `${topOffset}px`;
-    const nextBottom = `${bottomOffset}px`;
-    if (prevTop !== nextTop || prevBottom !== nextBottom) {
-      this.style.setProperty("--context-bar-split-view-top-bars-height", nextTop);
-      this.style.setProperty("--context-bar-split-view-bottom-bars-height", nextBottom);
-      this.requestUpdate();
-    }
-  }
   render() {
     return barSplitViewTemplate(this);
   }
@@ -12033,7 +12053,9 @@ __decorateClass$A([
 NLDDBarSplitView = __decorateClass$A([
   customElement("nldd-bar-split-view")
 ], NLDDBarSplitView);
-const smMax$5 = unsafeCSS(breakpoints.smMax);
+const smMax$a = unsafeCSS(breakpoints.smMax);
+const mdMin$c = unsafeCSS(breakpoints.mdMin);
+const mdMax$7 = unsafeCSS(breakpoints.mdMax);
 const lgMin$9 = unsafeCSS(breakpoints.lgMin);
 const navigationSplitViewStyles = css`
 
@@ -12041,16 +12063,16 @@ const navigationSplitViewStyles = css`
 	/* # Host */
 
 	:host {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		background-color: var(--_background-color);
-
 		--_sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_secondary-sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_main-min-width: var(--primitives-area-480); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_inspector-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
+		display: flex;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
 	}
 
 	:host([background="default"]) {
@@ -12085,8 +12107,6 @@ const navigationSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_sidebar-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -12099,8 +12119,6 @@ const navigationSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_secondary-sidebar-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -12113,8 +12131,6 @@ const navigationSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_main-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -12124,6 +12140,7 @@ const navigationSplitViewStyles = css`
 	:host(.full-stack) .navigation-split-view__secondary-sidebar-pane,
 	:host(.full-stack) .navigation-split-view__main-pane {
 		min-width: 0;
+		flex: 1;
 	}
 
 
@@ -12135,17 +12152,15 @@ const navigationSplitViewStyles = css`
 	}
 
 	.navigation-split-view__inspector-pane {
+		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
+		--context-dismiss-button-display: none;
+
 		display: flex;
 		flex-direction: column;
 		flex-shrink: 0;
 		min-height: 0;
 		min-width: var(--_inspector-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
-		--context-dismiss-button-display: none;
 	}
 
 
@@ -12172,13 +12187,28 @@ const navigationSplitViewStyles = css`
 		overflow: hidden;
 		position: fixed;
 		outline: none;
-		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
-		width: var(--semantics-sheets-side-md-width);
-		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (max-width: ${smMax$a}) {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		}
+
+		@media (min-width: ${mdMin$c}) and (max-width: ${mdMax$7}) {
+			inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
+			width: var(--semantics-sheets-side-md-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
+		}
 
 		@media (min-width: ${lgMin$9}) {
+			inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
 			width: var(--semantics-sheets-side-lg-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
 		}
 
 		&:focus-visible:not(.is-pointer-focus) {
@@ -12196,11 +12226,23 @@ const navigationSplitViewStyles = css`
 		}
 
 		&[open] {
-			animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 
 		&.is-closing {
-			animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 	}
 
@@ -12236,13 +12278,28 @@ const navigationSplitViewStyles = css`
 		overflow: hidden;
 		position: fixed;
 		outline: none;
-		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
-		width: var(--semantics-sheets-side-md-width);
-		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (max-width: ${smMax$a}) {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		}
+
+		@media (min-width: ${mdMin$c}) and (max-width: ${mdMax$7}) {
+			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
+			width: var(--semantics-sheets-side-md-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
+		}
 
 		@media (min-width: ${lgMin$9}) {
+			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
 			width: var(--semantics-sheets-side-lg-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
 		}
 
 		&:focus-visible:not(.is-pointer-focus) {
@@ -12260,23 +12317,35 @@ const navigationSplitViewStyles = css`
 		}
 
 		&[open] {
-			animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 
 		&.is-closing {
-			animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax$a}) {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin$c}) {
+				animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 	}
 
 	.navigation-split-view__sidebar-sheet-body {
+		/* Show dismiss button inside sidebar sheet */
+		--context-dismiss-button-display: block;
+
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
-
-		/* Show dismiss button inside sidebar sheet */
-		--context-dismiss-button-display: block;
 	}
 
 
@@ -12292,42 +12361,6 @@ const navigationSplitViewStyles = css`
 		to { transform: translateY(100%); }
 	}
 
-	@media (max-width: ${smMax$5}) {
-		.navigation-split-view__inspector-sheet {
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-
-			&[open] {
-				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-
-			&.is-closing {
-				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-		}
-
-		.navigation-split-view__sidebar-sheet {
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-
-			&[open] {
-				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-
-			&.is-closing {
-				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-		}
-	}
-
 
 	/* # Reduced motion */
 
@@ -12404,14 +12437,14 @@ function navigationSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$u = Object.defineProperty;
+var __defProp$x = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
 var __decorateClass$z = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 let NLDDNavigationSplitView = class extends LitElement {
@@ -12758,8 +12791,6 @@ const sideBySideSplitViewStyles = css`
 		min-height: 0;
 		min-width: var(--_pane-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	.side-by-side-split-view__pane[hidden] {
@@ -12789,14 +12820,14 @@ function sideBySideSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$t = Object.defineProperty;
+var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
 var __decorateClass$y = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 let NLDDSideBySideSplitView = class extends LitElement {
@@ -12902,8 +12933,6 @@ const stackedSplitViewStyles = css`
 		min-height: var(--_pane-min-height);
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	.stacked-split-view__pane[hidden] {
@@ -12933,14 +12962,14 @@ function stackedSplitViewTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$s = Object.defineProperty;
+var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
 var __decorateClass$x = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 let NLDDStackedSplitView = class extends LitElement {
@@ -12994,7 +13023,7 @@ __decorateClass$x([
 NLDDStackedSplitView = __decorateClass$x([
   customElement("nldd-stacked-split-view")
 ], NLDDStackedSplitView);
-const mdMin$a = unsafeCSS(breakpoints.mdMin);
+const mdMin$b = unsafeCSS(breakpoints.mdMin);
 const splitViewPaneStyles = css`
 
 
@@ -13007,7 +13036,7 @@ const splitViewPaneStyles = css`
 		width: 100%;
 		height: 100%;
 
-		@media (min-width: ${mdMin$a}) {
+		@media (min-width: ${mdMin$b}) {
 			background-color: var(--_background-color);
 		}
 	}
@@ -13054,14 +13083,14 @@ function splitViewPaneTemplate(_component) {
 		</div>
 	`;
 }
-var __defProp$r = Object.defineProperty;
+var __defProp$u = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
 var __decorateClass$w = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 let NLDDSplitViewPane = class extends LitElement {
@@ -13071,6 +13100,11 @@ let NLDDSplitViewPane = class extends LitElement {
     this.hideBack = false;
     this.background = "inherit";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
+  }
   render() {
     return splitViewPaneTemplate();
   }
@@ -13103,8 +13137,6 @@ const pageStyles = css`
 		overflow-y: auto;
 		overflow-x: hidden;
 		background-color: var(--_background-color);
-		padding-top: var(--context-bar-split-view-top-bars-height, 0px);
-		padding-bottom: var(--context-bar-split-view-bottom-bars-height, 0px);
 	}
 
 	/* Overflow hidden prevents content from escaping the scroll wrapper.
@@ -13130,13 +13162,21 @@ const pageStyles = css`
 	}
 
 
+	/* # Block */
+
+	.page {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+	}
+
+
 	/* # Header */
 
 	.page__header {
 		flex-shrink: 0;
 		position: relative;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	:host([sticky-header]) .page__header {
@@ -13187,8 +13227,6 @@ const pageStyles = css`
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -13197,8 +13235,6 @@ const pageStyles = css`
 	.page__footer {
 		flex-shrink: 0;
 		position: relative;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	:host([sticky-footer]) .page__footer {
@@ -13221,27 +13257,29 @@ const pageStyles = css`
 `;
 function pageTemplate(component) {
   return html`
-		<header class="page__header ${component._scrolled ? "is-scrolled" : ""}">
-			<slot name="header"></slot>
-		</header>
-		<div class="page__scroll">
-			<main class="page__main">
-				<slot></slot>
-			</main>
-			<footer class="page__footer">
-				<slot name="footer"></slot>
-			</footer>
+		<div class="page">
+			<header class="page__header ${component._scrolled ? "is-scrolled" : ""}">
+				<slot name="header"></slot>
+			</header>
+			<div class="page__scroll">
+				<main class="page__main">
+					<slot></slot>
+				</main>
+				<footer class="page__footer">
+					<slot name="footer"></slot>
+				</footer>
+			</div>
 		</div>
 	`;
 }
-var __defProp$q = Object.defineProperty;
+var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
 var __decorateClass$v = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 let NLDDPage = class extends LitElement {
@@ -13253,10 +13291,19 @@ let NLDDPage = class extends LitElement {
     this._scrolled = false;
     this._scrollTarget = null;
     this._headerObserver = null;
+    this._mainSlot = null;
     this._onScroll = () => {
       const target = this.stickyHeader ? this._scrollEl : this;
       this._scrolled = target.scrollTop > 0;
     };
+    this._updateMainItems = () => {
+      const slot = this._mainSlot;
+      if (!slot) return;
+      const items = slot.assignedElements();
+      const visible = items.filter((el) => !el.hasAttribute("hidden"));
+      const last = visible[visible.length - 1];
+      items.forEach((el) => el.classList.toggle("is-last", el === last));
+    };
   }
   get scrollTarget() {
     return this.stickyHeader ? this._scrollEl ?? this : this;
@@ -13269,6 +13316,8 @@ let NLDDPage = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     if (this.hasUpdated) {
       this._setupScrollListener();
       if (this.stickyHeader) this._setupHeaderObserver();
@@ -13278,10 +13327,12 @@ let NLDDPage = class extends LitElement {
     super.disconnectedCallback();
     this._teardownScrollListener();
     this._teardownHeaderObserver();
+    this._teardownMainSlotListener();
   }
   firstUpdated() {
     this._setupScrollListener();
     if (this.stickyHeader) this._setupHeaderObserver();
+    this._setupMainSlotListener();
   }
   updated(changed) {
     if (changed.has("stickyHeader")) {
@@ -13324,6 +13375,25 @@ let NLDDPage = class extends LitElement {
       this._headerObserver = null;
     }
   }
+  // Mark the last visible main-slot child with `is-last`, so section-style
+  // components can grow to fill remaining vertical space without coupling
+  // to specific tag types or relying on light-DOM `:last-child` (which
+  // breaks when slot="footer" siblings are present). Same shape as
+  // nldd-list's _updateItems().
+  _setupMainSlotListener() {
+    this._teardownMainSlotListener();
+    const slot = this.shadowRoot?.querySelector("slot:not([name])") ?? null;
+    this._mainSlot = slot;
+    if (!slot) return;
+    slot.addEventListener("slotchange", this._updateMainItems);
+    this._updateMainItems();
+  }
+  _teardownMainSlotListener() {
+    if (this._mainSlot) {
+      this._mainSlot.removeEventListener("slotchange", this._updateMainItems);
+      this._mainSlot = null;
+    }
+  }
   render() {
     return pageTemplate(this);
   }
@@ -13350,7 +13420,9 @@ const page = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
     return NLDDPage;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const mdMin$9 = unsafeCSS(breakpoints.mdMin);
+const smMax$9 = unsafeCSS(breakpoints.smMax);
+const mdMin$a = unsafeCSS(breakpoints.mdMin);
+const mdMax$6 = unsafeCSS(breakpoints.mdMax);
 const lgMin$8 = unsafeCSS(breakpoints.lgMin);
 const simpleSectionStyles = css`
 
@@ -13361,6 +13433,8 @@ const simpleSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13371,13 +13445,17 @@ const simpleSectionStyles = css`
 		display: none;
 	}
 
-	:host([align="center"]) {
+	:host(:last-child),
+	:host(.is-last) {
 		flex-grow: 1;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
+
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.simple-section {
 		display: flex;
@@ -13386,10 +13464,13 @@ const simpleSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$9}) {
+		@media (max-width: ${smMax$9}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13399,7 +13480,12 @@ const simpleSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) {
+		@container layout-area (max-width: ${smMax$9}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13425,10 +13511,13 @@ const simpleSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
+
+		@media (max-width: ${smMax$9}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
 
-		@media (min-width: ${mdMin$9}) {
+		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13436,7 +13525,11 @@ const simpleSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) {
+		@container layout-area (max-width: ${smMax$9}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13460,10 +13553,6 @@ const simpleSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 	}
-
-	:host([align="center"]) .simple-section__main {
-		justify-content: center;
-	}
 `;
 function simpleSectionTemplate(component) {
   return html`
@@ -13482,17 +13571,21 @@ function simpleSectionTemplate(component) {
 		</section>
 	`;
 }
-var __defProp$p = Object.defineProperty;
+var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
 var __decorateClass$u = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 let NLDDSimpleSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   _onSlotChange(e) {
     const slot = e.target;
     const wrapper = slot.parentElement;
@@ -13504,8 +13597,8 @@ let NLDDSimpleSection = class extends LitElement {
 };
 NLDDSimpleSection.styles = simpleSectionStyles;
 __decorateClass$u([
-  property({ type: String, reflect: true })
-], NLDDSimpleSection.prototype, "align", 2);
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDSimpleSection.prototype, "fullWidth", 2);
 NLDDSimpleSection = __decorateClass$u([
   customElement("nldd-simple-section")
 ], NLDDSimpleSection);
@@ -13515,7 +13608,9 @@ const simpleSection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
     return NLDDSimpleSection;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const mdMin$8 = unsafeCSS(breakpoints.mdMin);
+const smMax$8 = unsafeCSS(breakpoints.smMax);
+const mdMin$9 = unsafeCSS(breakpoints.mdMin);
+const mdMax$5 = unsafeCSS(breakpoints.mdMax);
 const lgMin$7 = unsafeCSS(breakpoints.lgMin);
 const fullBleedSectionStyles = css`
 
@@ -13526,6 +13621,8 @@ const fullBleedSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13536,13 +13633,12 @@ const fullBleedSectionStyles = css`
 		display: none;
 	}
 
-	:host([align="center"]) {
-		flex-grow: 1;
+	:host([full-width]) {
+		--_max-width: none;
 	}
 
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.full-bleed-section {
 		display: flex;
@@ -13550,9 +13646,12 @@ const fullBleedSectionStyles = css`
 		flex-grow: 1;
 		width: 100%;
 		box-sizing: border-box;
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$8}) {
+		@media (max-width: ${smMax$8}) {
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
@@ -13560,7 +13659,11 @@ const fullBleedSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) {
+		@container layout-area (max-width: ${smMax$8}) {
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
@@ -13584,9 +13687,13 @@ const fullBleedSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 		width: 100%;
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin$8}) {
+		@media (max-width: ${smMax$8}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13594,7 +13701,11 @@ const fullBleedSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) {
+		@container layout-area (max-width: ${smMax$8}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13618,11 +13729,6 @@ const fullBleedSectionStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 	}
-
-	:host([align="center"]) .full-bleed-section__main {
-		justify-content: center;
-	}
-
 `;
 function fullBleedSectionTemplate(component) {
   return html`
@@ -13641,17 +13747,21 @@ function fullBleedSectionTemplate(component) {
 		</section>
 	`;
 }
-var __defProp$o = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
 var __decorateClass$t = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 let NLDDFullBleedSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   _onSlotChange(e) {
     const slot = e.target;
     const wrapper = slot.parentElement;
@@ -13663,12 +13773,14 @@ let NLDDFullBleedSection = class extends LitElement {
 };
 NLDDFullBleedSection.styles = fullBleedSectionStyles;
 __decorateClass$t([
-  property({ type: String, reflect: true })
-], NLDDFullBleedSection.prototype, "align", 2);
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDFullBleedSection.prototype, "fullWidth", 2);
 NLDDFullBleedSection = __decorateClass$t([
   customElement("nldd-full-bleed-section")
 ], NLDDFullBleedSection);
-const mdMin$7 = unsafeCSS(breakpoints.mdMin);
+const smMax$7 = unsafeCSS(breakpoints.smMax);
+const mdMin$8 = unsafeCSS(breakpoints.mdMin);
+const mdMax$4 = unsafeCSS(breakpoints.mdMax);
 const lgMin$6 = unsafeCSS(breakpoints.lgMin);
 const oneThirdTwoThirdsSectionStyles = css`
 
@@ -13679,6 +13791,8 @@ const oneThirdTwoThirdsSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13689,9 +13803,12 @@ const oneThirdTwoThirdsSectionStyles = css`
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+
+	/* # Block */
 
 	.one-third-two-thirds-section {
 		display: flex;
@@ -13699,10 +13816,13 @@ const oneThirdTwoThirdsSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$7}) {
+		@media (max-width: ${smMax$7}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13712,7 +13832,12 @@ const oneThirdTwoThirdsSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) {
+		@container layout-area (max-width: ${smMax$7}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13730,10 +13855,13 @@ const oneThirdTwoThirdsSectionStyles = css`
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin$7}) {
+		@media (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13741,7 +13869,11 @@ const oneThirdTwoThirdsSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) {
+		@container layout-area (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13756,9 +13888,12 @@ const oneThirdTwoThirdsSectionStyles = css`
 	.one-third-two-thirds-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin$7}) {
+		@media (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13766,7 +13901,11 @@ const oneThirdTwoThirdsSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) {
+		@container layout-area (max-width: ${smMax$7}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13804,24 +13943,35 @@ function oneThirdTwoThirdsSectionTemplate(_component) {
 		</section>
 	`;
 }
+var __defProp$q = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
 var __decorateClass$s = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 let NLDDOneThirdTwoThirdsSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   render() {
     return oneThirdTwoThirdsSectionTemplate();
   }
 };
 NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles;
+__decorateClass$s([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDOneThirdTwoThirdsSection.prototype, "fullWidth", 2);
 NLDDOneThirdTwoThirdsSection = __decorateClass$s([
   customElement("nldd-one-third-two-thirds-section")
 ], NLDDOneThirdTwoThirdsSection);
-const mdMin$6 = unsafeCSS(breakpoints.mdMin);
+const smMax$6 = unsafeCSS(breakpoints.smMax);
+const mdMin$7 = unsafeCSS(breakpoints.mdMin);
+const mdMax$3 = unsafeCSS(breakpoints.mdMax);
 const lgMin$5 = unsafeCSS(breakpoints.lgMin);
 const twoThirdsOneThirdSectionStyles = css`
 
@@ -13832,6 +13982,8 @@ const twoThirdsOneThirdSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13842,9 +13994,12 @@ const twoThirdsOneThirdSectionStyles = css`
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
+
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.two-thirds-one-third-section {
 		display: flex;
@@ -13852,10 +14007,13 @@ const twoThirdsOneThirdSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$6}) {
+		@media (max-width: ${smMax$6}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13865,7 +14023,12 @@ const twoThirdsOneThirdSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) {
+		@container layout-area (max-width: ${smMax$6}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -13883,10 +14046,13 @@ const twoThirdsOneThirdSectionStyles = css`
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
+
+		@media (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
 
-		@media (min-width: ${mdMin$6}) {
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13894,7 +14060,11 @@ const twoThirdsOneThirdSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) {
+		@container layout-area (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13909,9 +14079,12 @@ const twoThirdsOneThirdSectionStyles = css`
 	.two-thirds-one-third-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin$6}) {
+		@media (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13919,7 +14092,11 @@ const twoThirdsOneThirdSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) {
+		@container layout-area (max-width: ${smMax$6}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -13937,7 +14114,6 @@ const twoThirdsOneThirdSectionStyles = css`
 		flex: 1;
 		min-width: var(--primitives-area-280);
 	}
-
 `;
 function twoThirdsOneThirdSectionTemplate(_component) {
   return html`
@@ -13958,24 +14134,35 @@ function twoThirdsOneThirdSectionTemplate(_component) {
 		</section>
 	`;
 }
+var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
 var __decorateClass$r = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 let NLDDTwoThirdsOneThirdSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   render() {
     return twoThirdsOneThirdSectionTemplate();
   }
 };
 NLDDTwoThirdsOneThirdSection.styles = twoThirdsOneThirdSectionStyles;
+__decorateClass$r([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDTwoThirdsOneThirdSection.prototype, "fullWidth", 2);
 NLDDTwoThirdsOneThirdSection = __decorateClass$r([
   customElement("nldd-two-thirds-one-third-section")
 ], NLDDTwoThirdsOneThirdSection);
-const mdMin$5 = unsafeCSS(breakpoints.mdMin);
+const smMax$5 = unsafeCSS(breakpoints.smMax);
+const mdMin$6 = unsafeCSS(breakpoints.mdMin);
+const mdMax$2 = unsafeCSS(breakpoints.mdMax);
 const lgMin$4 = unsafeCSS(breakpoints.lgMin);
 const oneHalfOneHalfSectionStyles = css`
 
@@ -13986,6 +14173,8 @@ const oneHalfOneHalfSectionStyles = css`
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -13996,9 +14185,12 @@ const oneHalfOneHalfSectionStyles = css`
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+
+	/* # Block */
 
 	.one-half-one-half-section {
 		display: flex;
@@ -14006,10 +14198,13 @@ const oneHalfOneHalfSectionStyles = css`
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (max-width: ${smMax$5}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -14019,7 +14214,12 @@ const oneHalfOneHalfSectionStyles = css`
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$5}) {
+		@container layout-area (max-width: ${smMax$5}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -14037,10 +14237,13 @@ const oneHalfOneHalfSectionStyles = css`
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14048,7 +14251,11 @@ const oneHalfOneHalfSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$5}) {
+		@container layout-area (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14063,9 +14270,12 @@ const oneHalfOneHalfSectionStyles = css`
 	.one-half-one-half-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14073,7 +14283,11 @@ const oneHalfOneHalfSectionStyles = css`
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$5}) {
+		@container layout-area (max-width: ${smMax$5}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -14111,20 +14325,29 @@ function oneHalfOneHalfSectionTemplate(_component) {
 		</section>
 	`;
 }
+var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
 var __decorateClass$q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 let NLDDOneHalfOneHalfSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
   render() {
     return oneHalfOneHalfSectionTemplate();
   }
 };
 NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
+__decorateClass$q([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], NLDDOneHalfOneHalfSection.prototype, "fullWidth", 2);
 NLDDOneHalfOneHalfSection = __decorateClass$q([
   customElement("nldd-one-half-one-half-section")
 ], NLDDOneHalfOneHalfSection);
@@ -14200,8 +14423,6 @@ const cardStyles = css`
 		border-radius: var(--components-card-corner-radius);
 		box-shadow: var(--components-card-box-shadow);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -14280,6 +14501,11 @@ let NLDDCard = class extends LitElement {
       wrapper.hidden = slot.assignedElements().length === 0;
     };
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
+  }
   render() {
     return cardTemplate(this);
   }
@@ -14291,7 +14517,7 @@ __decorateClass$o([
 NLDDCard = __decorateClass$o([
   customElement("nldd-card")
 ], NLDDCard);
-const mdMin$4 = unsafeCSS(breakpoints.mdMin);
+const mdMin$5 = unsafeCSS(breakpoints.mdMin);
 const lgMin$3 = unsafeCSS(breakpoints.lgMin);
 const collectionStyles = css`
 
@@ -14306,7 +14532,7 @@ const collectionStyles = css`
 		gap: var(--components-collection-sm-gap);
 		--_item-width: var(--primitives-area-280);
 
-		@media (min-width: ${mdMin$4}) {
+		@media (min-width: ${mdMin$5}) {
 			gap: var(--components-collection-md-gap);
 		}
 
@@ -14327,7 +14553,7 @@ const collectionStyles = css`
 		width: 100%;
 		gap: var(--components-collection-sm-gap);
 
-		@media (min-width: ${mdMin$4}) {
+		@media (min-width: ${mdMin$5}) {
 			gap: var(--components-collection-md-gap);
 		}
 
@@ -14810,7 +15036,7 @@ NLDDSpacer = __decorateClass$m([
   customElement("nldd-spacer")
 ], NLDDSpacer);
 const smMax$4 = unsafeCSS(breakpoints.smMax);
-const mdMin$3 = unsafeCSS(breakpoints.mdMin);
+const mdMin$4 = unsafeCSS(breakpoints.mdMin);
 const mdMax$1 = unsafeCSS(breakpoints.mdMax);
 const lgMin$2 = unsafeCSS(breakpoints.lgMin);
 const containerStyles = css`
@@ -14882,25 +15108,25 @@ const containerStyles = css`
 
 	/* # Padding — md viewport */
 
-	:host([md-padding="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: 0; } }
-	:host([md-padding="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
-	:host([md-padding="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
-	:host([md-padding="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
-	:host([md-padding="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
-	:host([md-padding="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
-	:host([md-padding="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
-	:host([md-padding="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
-	:host([md-padding="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
-	:host([md-padding="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
-	:host([md-padding="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
-	:host([md-padding="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
-	:host([md-padding="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
-	:host([md-padding="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
-	:host([md-padding="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
-	:host([md-padding="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
-	:host([md-padding="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
-	:host([md-padding="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
-	:host([md-padding="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
+	:host([md-padding="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: 0; } }
+	:host([md-padding="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
+	:host([md-padding="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
+	:host([md-padding="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
+	:host([md-padding="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
+	:host([md-padding="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
+	:host([md-padding="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
+	:host([md-padding="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
+	:host([md-padding="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
+	:host([md-padding="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
+	:host([md-padding="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
+	:host([md-padding="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
+	:host([md-padding="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
+	:host([md-padding="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
+	:host([md-padding="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
+	:host([md-padding="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
+	:host([md-padding="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
+	:host([md-padding="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
+	:host([md-padding="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding — lg viewport */
@@ -14951,25 +15177,25 @@ const containerStyles = css`
 
 	/* # Padding — md container */
 
-	:host([layout-area-md-padding="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: 0; } }
-	:host([layout-area-md-padding="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
-	:host([layout-area-md-padding="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
-	:host([layout-area-md-padding="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
-	:host([layout-area-md-padding="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
-	:host([layout-area-md-padding="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
-	:host([layout-area-md-padding="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
-	:host([layout-area-md-padding="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
-	:host([layout-area-md-padding="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
-	:host([layout-area-md-padding="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
-	:host([layout-area-md-padding="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
-	:host([layout-area-md-padding="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
-	:host([layout-area-md-padding="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
-	:host([layout-area-md-padding="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
-	:host([layout-area-md-padding="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
-	:host([layout-area-md-padding="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
-	:host([layout-area-md-padding="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
-	:host([layout-area-md-padding="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
-	:host([layout-area-md-padding="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
+	:host([layout-area-md-padding="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: 0; } }
+	:host([layout-area-md-padding="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-2); } }
+	:host([layout-area-md-padding="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-4); } }
+	:host([layout-area-md-padding="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-6); } }
+	:host([layout-area-md-padding="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-8); } }
+	:host([layout-area-md-padding="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-10); } }
+	:host([layout-area-md-padding="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-12); } }
+	:host([layout-area-md-padding="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-16); } }
+	:host([layout-area-md-padding="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-20); } }
+	:host([layout-area-md-padding="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-24); } }
+	:host([layout-area-md-padding="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-28); } }
+	:host([layout-area-md-padding="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-32); } }
+	:host([layout-area-md-padding="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-40); } }
+	:host([layout-area-md-padding="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-44); } }
+	:host([layout-area-md-padding="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-48); } }
+	:host([layout-area-md-padding="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-56); } }
+	:host([layout-area-md-padding="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-64); } }
+	:host([layout-area-md-padding="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-80); } }
+	:host([layout-area-md-padding="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding: var(--primitives-space-96); } }
 
 
 	/* # Padding — lg container */
@@ -15043,25 +15269,25 @@ const containerStyles = css`
 
 	/* # Padding Inline — md viewport */
 
-	:host([md-padding-inline="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
-	:host([md-padding-inline="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
-	:host([md-padding-inline="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
-	:host([md-padding-inline="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
-	:host([md-padding-inline="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
-	:host([md-padding-inline="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
-	:host([md-padding-inline="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
-	:host([md-padding-inline="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
-	:host([md-padding-inline="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
-	:host([md-padding-inline="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
-	:host([md-padding-inline="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
-	:host([md-padding-inline="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
-	:host([md-padding-inline="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
-	:host([md-padding-inline="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
-	:host([md-padding-inline="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
-	:host([md-padding-inline="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
-	:host([md-padding-inline="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
-	:host([md-padding-inline="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
-	:host([md-padding-inline="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
+	:host([md-padding-inline="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
+	:host([md-padding-inline="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
+	:host([md-padding-inline="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
+	:host([md-padding-inline="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
+	:host([md-padding-inline="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
+	:host([md-padding-inline="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
+	:host([md-padding-inline="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
+	:host([md-padding-inline="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
+	:host([md-padding-inline="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
+	:host([md-padding-inline="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
+	:host([md-padding-inline="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
+	:host([md-padding-inline="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
+	:host([md-padding-inline="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
+	:host([md-padding-inline="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
+	:host([md-padding-inline="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
+	:host([md-padding-inline="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
+	:host([md-padding-inline="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
+	:host([md-padding-inline="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
+	:host([md-padding-inline="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — lg viewport */
@@ -15112,25 +15338,25 @@ const containerStyles = css`
 
 	/* # Padding Inline — md container */
 
-	:host([layout-area-md-padding-inline="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
-	:host([layout-area-md-padding-inline="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-inline="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-inline="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-inline="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-inline="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-inline="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-inline="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-inline="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-inline="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-inline="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-inline="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-inline="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-inline="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-inline="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-inline="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-inline="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-inline="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-inline="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-inline="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: 0; } }
+	:host([layout-area-md-padding-inline="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-inline="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-inline="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-inline="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-inline="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-inline="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-inline="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-inline="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-inline="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-inline="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-inline="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-inline="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-inline="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-inline="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-inline="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-inline="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-inline="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-inline="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-inline: var(--primitives-space-96); } }
 
 
 	/* # Padding Inline — lg container */
@@ -15204,25 +15430,25 @@ const containerStyles = css`
 
 	/* # Padding Block — md viewport */
 
-	:host([md-padding-block="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
-	:host([md-padding-block="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
-	:host([md-padding-block="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
-	:host([md-padding-block="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
-	:host([md-padding-block="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
-	:host([md-padding-block="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
-	:host([md-padding-block="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
-	:host([md-padding-block="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
-	:host([md-padding-block="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
-	:host([md-padding-block="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
-	:host([md-padding-block="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
-	:host([md-padding-block="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
-	:host([md-padding-block="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
-	:host([md-padding-block="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
-	:host([md-padding-block="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
-	:host([md-padding-block="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
-	:host([md-padding-block="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
-	:host([md-padding-block="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
-	:host([md-padding-block="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
+	:host([md-padding-block="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
+	:host([md-padding-block="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
+	:host([md-padding-block="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
+	:host([md-padding-block="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
+	:host([md-padding-block="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
+	:host([md-padding-block="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
+	:host([md-padding-block="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
+	:host([md-padding-block="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
+	:host([md-padding-block="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
+	:host([md-padding-block="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
+	:host([md-padding-block="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
+	:host([md-padding-block="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
+	:host([md-padding-block="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
+	:host([md-padding-block="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
+	:host([md-padding-block="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
+	:host([md-padding-block="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
+	:host([md-padding-block="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
+	:host([md-padding-block="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
+	:host([md-padding-block="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — lg viewport */
@@ -15273,25 +15499,25 @@ const containerStyles = css`
 
 	/* # Padding Block — md container */
 
-	:host([layout-area-md-padding-block="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
-	:host([layout-area-md-padding-block="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-block="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-block="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-block="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-block="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-block="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-block="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-block="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-block="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-block="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-block="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-block="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-block="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-block="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-block="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-block="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-block="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-block="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-block="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: 0; } }
+	:host([layout-area-md-padding-block="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-block="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-block="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-block="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-block="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-block="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-block="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-block="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-block="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-block="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-block="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-block="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-block="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-block="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-block="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-block="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-block="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-block="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-block: var(--primitives-space-96); } }
 
 
 	/* # Padding Block — lg container */
@@ -15365,25 +15591,25 @@ const containerStyles = css`
 
 	/* # Padding Top — md viewport */
 
-	:host([md-padding-top="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
-	:host([md-padding-top="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
-	:host([md-padding-top="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
-	:host([md-padding-top="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
-	:host([md-padding-top="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
-	:host([md-padding-top="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
-	:host([md-padding-top="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
-	:host([md-padding-top="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
-	:host([md-padding-top="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
-	:host([md-padding-top="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
-	:host([md-padding-top="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
-	:host([md-padding-top="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
-	:host([md-padding-top="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
-	:host([md-padding-top="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
-	:host([md-padding-top="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
-	:host([md-padding-top="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
-	:host([md-padding-top="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
-	:host([md-padding-top="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
-	:host([md-padding-top="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
+	:host([md-padding-top="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
+	:host([md-padding-top="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
+	:host([md-padding-top="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
+	:host([md-padding-top="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
+	:host([md-padding-top="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
+	:host([md-padding-top="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
+	:host([md-padding-top="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
+	:host([md-padding-top="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
+	:host([md-padding-top="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
+	:host([md-padding-top="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
+	:host([md-padding-top="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
+	:host([md-padding-top="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
+	:host([md-padding-top="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
+	:host([md-padding-top="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
+	:host([md-padding-top="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
+	:host([md-padding-top="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
+	:host([md-padding-top="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
+	:host([md-padding-top="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
+	:host([md-padding-top="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — lg viewport */
@@ -15434,25 +15660,25 @@ const containerStyles = css`
 
 	/* # Padding Top — md container */
 
-	:host([layout-area-md-padding-top="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
-	:host([layout-area-md-padding-top="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-top="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-top="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-top="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-top="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-top="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-top="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-top="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-top="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-top="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-top="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-top="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-top="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-top="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-top="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-top="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-top="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-top="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-top="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: 0; } }
+	:host([layout-area-md-padding-top="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-top="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-top="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-top="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-top="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-top="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-top="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-top="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-top="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-top="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-top="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-top="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-top="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-top="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-top="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-top="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-top="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-top="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-top: var(--primitives-space-96); } }
 
 
 	/* # Padding Top — lg container */
@@ -15526,25 +15752,25 @@ const containerStyles = css`
 
 	/* # Padding Right — md viewport */
 
-	:host([md-padding-right="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
-	:host([md-padding-right="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
-	:host([md-padding-right="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
-	:host([md-padding-right="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
-	:host([md-padding-right="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
-	:host([md-padding-right="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
-	:host([md-padding-right="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
-	:host([md-padding-right="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
-	:host([md-padding-right="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
-	:host([md-padding-right="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
-	:host([md-padding-right="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
-	:host([md-padding-right="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
-	:host([md-padding-right="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
-	:host([md-padding-right="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
-	:host([md-padding-right="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
-	:host([md-padding-right="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
-	:host([md-padding-right="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
-	:host([md-padding-right="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
-	:host([md-padding-right="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
+	:host([md-padding-right="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
+	:host([md-padding-right="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
+	:host([md-padding-right="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
+	:host([md-padding-right="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
+	:host([md-padding-right="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
+	:host([md-padding-right="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
+	:host([md-padding-right="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
+	:host([md-padding-right="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
+	:host([md-padding-right="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
+	:host([md-padding-right="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
+	:host([md-padding-right="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
+	:host([md-padding-right="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
+	:host([md-padding-right="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
+	:host([md-padding-right="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
+	:host([md-padding-right="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
+	:host([md-padding-right="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
+	:host([md-padding-right="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
+	:host([md-padding-right="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
+	:host([md-padding-right="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — lg viewport */
@@ -15595,25 +15821,25 @@ const containerStyles = css`
 
 	/* # Padding Right — md container */
 
-	:host([layout-area-md-padding-right="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
-	:host([layout-area-md-padding-right="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-right="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-right="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-right="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-right="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-right="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-right="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-right="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-right="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-right="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-right="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-right="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-right="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-right="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-right="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-right="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-right="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-right="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-right="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: 0; } }
+	:host([layout-area-md-padding-right="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-right="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-right="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-right="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-right="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-right="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-right="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-right="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-right="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-right="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-right="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-right="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-right="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-right="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-right="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-right="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-right="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-right="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-right: var(--primitives-space-96); } }
 
 
 	/* # Padding Right — lg container */
@@ -15687,25 +15913,25 @@ const containerStyles = css`
 
 	/* # Padding Bottom — md viewport */
 
-	:host([md-padding-bottom="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
-	:host([md-padding-bottom="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
-	:host([md-padding-bottom="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
-	:host([md-padding-bottom="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
-	:host([md-padding-bottom="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
-	:host([md-padding-bottom="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
-	:host([md-padding-bottom="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
-	:host([md-padding-bottom="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
-	:host([md-padding-bottom="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
-	:host([md-padding-bottom="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
-	:host([md-padding-bottom="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
-	:host([md-padding-bottom="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
-	:host([md-padding-bottom="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
-	:host([md-padding-bottom="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
-	:host([md-padding-bottom="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
-	:host([md-padding-bottom="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
-	:host([md-padding-bottom="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
-	:host([md-padding-bottom="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
-	:host([md-padding-bottom="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
+	:host([md-padding-bottom="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
+	:host([md-padding-bottom="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
+	:host([md-padding-bottom="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
+	:host([md-padding-bottom="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
+	:host([md-padding-bottom="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
+	:host([md-padding-bottom="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
+	:host([md-padding-bottom="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
+	:host([md-padding-bottom="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
+	:host([md-padding-bottom="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
+	:host([md-padding-bottom="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
+	:host([md-padding-bottom="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
+	:host([md-padding-bottom="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
+	:host([md-padding-bottom="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
+	:host([md-padding-bottom="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
+	:host([md-padding-bottom="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
+	:host([md-padding-bottom="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
+	:host([md-padding-bottom="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
+	:host([md-padding-bottom="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
+	:host([md-padding-bottom="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — lg viewport */
@@ -15756,25 +15982,25 @@ const containerStyles = css`
 
 	/* # Padding Bottom — md container */
 
-	:host([layout-area-md-padding-bottom="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
-	:host([layout-area-md-padding-bottom="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-bottom="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-bottom="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-bottom="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-bottom="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-bottom="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-bottom="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-bottom="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-bottom="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-bottom="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-bottom="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-bottom="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-bottom="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-bottom="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-bottom="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-bottom="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-bottom="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-bottom="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-bottom="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: 0; } }
+	:host([layout-area-md-padding-bottom="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-bottom="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-bottom="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-bottom="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-bottom="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-bottom="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-bottom="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-bottom="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-bottom="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-bottom="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-bottom="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-bottom="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-bottom="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-bottom="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-bottom="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-bottom="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-bottom="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-bottom="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-bottom: var(--primitives-space-96); } }
 
 
 	/* # Padding Bottom — lg container */
@@ -15848,25 +16074,25 @@ const containerStyles = css`
 
 	/* # Padding Left — md viewport */
 
-	:host([md-padding-left="0"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
-	:host([md-padding-left="2"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
-	:host([md-padding-left="4"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
-	:host([md-padding-left="6"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
-	:host([md-padding-left="8"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
-	:host([md-padding-left="10"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
-	:host([md-padding-left="12"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
-	:host([md-padding-left="16"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
-	:host([md-padding-left="20"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
-	:host([md-padding-left="24"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
-	:host([md-padding-left="28"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
-	:host([md-padding-left="32"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
-	:host([md-padding-left="40"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
-	:host([md-padding-left="44"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
-	:host([md-padding-left="48"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
-	:host([md-padding-left="56"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
-	:host([md-padding-left="64"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
-	:host([md-padding-left="80"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
-	:host([md-padding-left="96"]) .container { @media (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
+	:host([md-padding-left="0"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
+	:host([md-padding-left="2"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
+	:host([md-padding-left="4"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
+	:host([md-padding-left="6"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
+	:host([md-padding-left="8"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
+	:host([md-padding-left="10"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
+	:host([md-padding-left="12"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
+	:host([md-padding-left="16"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
+	:host([md-padding-left="20"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
+	:host([md-padding-left="24"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
+	:host([md-padding-left="28"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
+	:host([md-padding-left="32"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
+	:host([md-padding-left="40"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
+	:host([md-padding-left="44"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
+	:host([md-padding-left="48"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
+	:host([md-padding-left="56"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
+	:host([md-padding-left="64"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
+	:host([md-padding-left="80"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
+	:host([md-padding-left="96"]) .container { @media (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — lg viewport */
@@ -15917,25 +16143,25 @@ const containerStyles = css`
 
 	/* # Padding Left — md container */
 
-	:host([layout-area-md-padding-left="0"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
-	:host([layout-area-md-padding-left="2"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
-	:host([layout-area-md-padding-left="4"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
-	:host([layout-area-md-padding-left="6"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
-	:host([layout-area-md-padding-left="8"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
-	:host([layout-area-md-padding-left="10"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
-	:host([layout-area-md-padding-left="12"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
-	:host([layout-area-md-padding-left="16"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
-	:host([layout-area-md-padding-left="20"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
-	:host([layout-area-md-padding-left="24"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
-	:host([layout-area-md-padding-left="28"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
-	:host([layout-area-md-padding-left="32"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
-	:host([layout-area-md-padding-left="40"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
-	:host([layout-area-md-padding-left="44"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
-	:host([layout-area-md-padding-left="48"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
-	:host([layout-area-md-padding-left="56"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
-	:host([layout-area-md-padding-left="64"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
-	:host([layout-area-md-padding-left="80"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
-	:host([layout-area-md-padding-left="96"]) .container { @container layout-area (min-width: ${mdMin$3}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
+	:host([layout-area-md-padding-left="0"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: 0; } }
+	:host([layout-area-md-padding-left="2"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-2); } }
+	:host([layout-area-md-padding-left="4"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-4); } }
+	:host([layout-area-md-padding-left="6"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-6); } }
+	:host([layout-area-md-padding-left="8"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-8); } }
+	:host([layout-area-md-padding-left="10"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-10); } }
+	:host([layout-area-md-padding-left="12"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-12); } }
+	:host([layout-area-md-padding-left="16"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-16); } }
+	:host([layout-area-md-padding-left="20"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-20); } }
+	:host([layout-area-md-padding-left="24"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-24); } }
+	:host([layout-area-md-padding-left="28"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-28); } }
+	:host([layout-area-md-padding-left="32"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-32); } }
+	:host([layout-area-md-padding-left="40"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-40); } }
+	:host([layout-area-md-padding-left="44"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-44); } }
+	:host([layout-area-md-padding-left="48"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-48); } }
+	:host([layout-area-md-padding-left="56"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-56); } }
+	:host([layout-area-md-padding-left="64"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-64); } }
+	:host([layout-area-md-padding-left="80"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-80); } }
+	:host([layout-area-md-padding-left="96"]) .container { @container layout-area (min-width: ${mdMin$4}) and (max-width: ${mdMax$1}) { padding-left: var(--primitives-space-96); } }
 
 
 	/* # Padding Left — lg container */
@@ -16239,6 +16465,7 @@ NLDDDivider = __decorateClass$k([
   customElement("nldd-divider")
 ], NLDDDivider);
 const smMax$3 = unsafeCSS(breakpoints.smMax);
+const mdMin$3 = unsafeCSS(breakpoints.mdMin);
 const popoverStyles = css`
 
 
@@ -16246,20 +16473,38 @@ const popoverStyles = css`
 
 	:host {
 		--_max-height: calc(100vh - var(--semantics-overlays-inset) * 2);
-		position: absolute;
-		inset: unset;
+
 		margin: 0;
 		padding: 0;
 		border: none;
 		background-color: var(--semantics-surfaces-background-color);
-		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		width: var(--components-popover-default-width);
-		max-width: calc(100vw - var(--semantics-overlays-inset) * 2);
-		max-height: var(--_max-height);
 		overflow: auto;
 		outline: none;
 		isolation: isolate;
+
+		@media (max-width: ${smMax$3}) {
+			position: fixed;
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+			transform: translateY(100%);
+			transition:
+				transform var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default),
+				display var(--semantics-sheets-bottom-animation-duration) allow-discrete,
+				overlay var(--semantics-sheets-bottom-animation-duration) allow-discrete;
+		}
+
+		@media (min-width: ${mdMin$3}) {
+			position: absolute;
+			inset: unset;
+			border-radius: var(--semantics-overlays-corner-radius);
+			width: var(--components-popover-default-width);
+			max-width: calc(100vw - var(--semantics-overlays-inset) * 2);
+			max-height: var(--_max-height);
+		}
 	}
 
 	:host([hidden]) {
@@ -16277,33 +16522,26 @@ const popoverStyles = css`
 	}
 
 
-	/* # Responsive: sm viewport — bottom sheet */
-
-	@media (max-width: ${smMax$3}) {
-		:host {
-			position: fixed;
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-			transform: translateY(100%);
-			transition:
-				transform var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default),
-				display var(--semantics-sheets-bottom-animation-duration) allow-discrete,
-				overlay var(--semantics-sheets-bottom-animation-duration) allow-discrete;
-		}
-
-		:host(:popover-open) {
+	:host(:popover-open) {
+		@media (max-width: ${smMax$3}) {
 			transform: translateY(0);
-		}
 
-		@starting-style {
-			:host(:popover-open) {
+			@starting-style {
 				transform: translateY(100%);
 			}
 		}
+	}
+
+	:host::backdrop {
+		@media (max-width: ${smMax$3}) {
+			background-color: var(--semantics-overlays-backdrop-color);
+		}
+	}
 
+	:host([sm-full-height]) {
+		@media (max-width: ${smMax$3}) {
+			height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+		}
 	}
 
 
@@ -16313,8 +16551,8 @@ const popoverStyles = css`
 	   toekomstige desktop-viewport animaties automatisch worden
 	   gedeactiveerd voor users met prefers-reduced-motion. */
 
-	@media (prefers-reduced-motion: reduce) {
-		:host {
+	:host {
+		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
 	}
@@ -16341,6 +16579,12 @@ let NLDDPopover = class extends LitElement {
     this.anchor = "";
     this.anchorElement = null;
     this.placement = "bottom-start";
+    this.top = void 0;
+    this.left = void 0;
+    this.right = void 0;
+    this.bottom = void 0;
+    this.centered = false;
+    this.smFullHeight = false;
     this.accessibleLabel = "";
     this.translations = {};
     this._isOpen = false;
@@ -16349,9 +16593,14 @@ let NLDDPopover = class extends LitElement {
     this._closedAt = 0;
     this._cleanupAutoUpdate = null;
     this._smQuery = null;
+    this._wasOnSm = false;
     this._previousAnchorEl = null;
     this._handleViewportChange = () => {
-      if (this._isOpen) this.reposition();
+      if (this._isOpen) {
+        this.reposition();
+      } else {
+        this._wasOnSm = this._smQuery?.matches ?? false;
+      }
     };
     this._handleDocumentClick = (event) => {
       const anchorEl = this._getAnchorEl();
@@ -16405,6 +16654,8 @@ let NLDDPopover = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     if (!this.hasAttribute("popover")) this.setAttribute("popover", "");
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
     if (!this.hasAttribute("role")) this.setAttribute("role", "dialog");
@@ -16412,6 +16663,7 @@ let NLDDPopover = class extends LitElement {
     this.addEventListener("keydown", this._handleKeydown);
     document.addEventListener("click", this._handleDocumentClick);
     this._smQuery = window.matchMedia(`(max-width: ${breakpoints.smMax})`);
+    this._wasOnSm = this._smQuery.matches;
     this._smQuery.addEventListener("change", this._handleViewportChange);
     Promise.resolve().then(() => {
       this._updateAnchorAria(false);
@@ -16451,6 +16703,13 @@ let NLDDPopover = class extends LitElement {
     if (changed.has("anchor") || changed.has("anchorElement")) {
       this._updateAnchorAria(this._isOpen);
     }
+    if (changed.has("top") || changed.has("left") || changed.has("right") || changed.has("bottom") || changed.has("centered")) {
+      if (!this.top && !this.centered) this.style.removeProperty("top");
+      if (!this.left && !this.centered) this.style.removeProperty("left");
+      if (!this.right) this.style.removeProperty("right");
+      if (!this.bottom) this.style.removeProperty("bottom");
+      if (this._isOpen) this.reposition();
+    }
   }
   // — i18n ——————————————————————————————————————————————————————————————————
   _t(key) {
@@ -16479,13 +16738,53 @@ let NLDDPopover = class extends LitElement {
     if (this._isOpen) this.hide();
     else this.show();
   }
+  /**
+   * Restore the inline transition after a breakpoint-suppressed tick. Force
+   * a layout flush first (`void offsetHeight`) so the just-applied position
+   * styles commit before transitions resume — otherwise the cleared
+   * `transition: ''` would re-enable animations on those exact properties
+   * and you'd still see the slide we were trying to suppress.
+   */
+  _restoreTransition() {
+    void this.offsetHeight;
+    this.style.transition = "";
+  }
   /** Herberekent positie t.o.v. anchor. Wordt automatisch aangeroepen bij openen. */
   async reposition() {
     if (!this._isOpen) return;
-    if (this._smQuery?.matches) {
-      this.style.removeProperty("left");
+    const isSm = this._smQuery?.matches ?? false;
+    const crossedBreakpoint = isSm !== this._wasOnSm;
+    this._wasOnSm = isSm;
+    if (crossedBreakpoint) this.style.transition = "none";
+    if (isSm) {
       this.style.removeProperty("top");
+      this.style.removeProperty("left");
+      this.style.removeProperty("right");
+      this.style.removeProperty("bottom");
+      this.style.removeProperty("transform");
       this.style.removeProperty("--_max-height");
+      if (crossedBreakpoint) this._restoreTransition();
+      return;
+    }
+    const hasOverride = this.top || this.left || this.right || this.bottom || this.centered;
+    if (hasOverride) {
+      const yCenter = this.centered && !this.top && !this.bottom;
+      const xCenter = this.centered && !this.left && !this.right;
+      if (this.top) this.style.setProperty("top", this.top);
+      else if (yCenter) this.style.setProperty("top", "50%");
+      if (this.bottom) this.style.setProperty("bottom", this.bottom);
+      if (this.left) this.style.setProperty("left", this.left);
+      else if (xCenter) this.style.setProperty("left", "50%");
+      if (this.right) this.style.setProperty("right", this.right);
+      if (xCenter || yCenter) {
+        this.style.setProperty(
+          "transform",
+          `translate(${xCenter ? "-50%" : "0"}, ${yCenter ? "-50%" : "0"})`
+        );
+      } else {
+        this.style.removeProperty("transform");
+      }
+      if (crossedBreakpoint) this._restoreTransition();
       return;
     }
     const anchorEl = this._getAnchorEl();
@@ -16508,6 +16807,7 @@ let NLDDPopover = class extends LitElement {
       left: `${x}px`,
       top: `${y}px`
     });
+    if (crossedBreakpoint) this._restoreTransition();
   }
   // — Anchor ————————————————————————————————————————————————————————————————
   _getAnchorEl() {
@@ -16594,6 +16894,24 @@ __decorateClass$j([
 __decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDPopover.prototype, "width", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "top", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "left", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "right", 2);
+__decorateClass$j([
+  property({ type: String, reflect: true })
+], NLDDPopover.prototype, "bottom", 2);
+__decorateClass$j([
+  property({ type: Boolean, reflect: true })
+], NLDDPopover.prototype, "centered", 2);
+__decorateClass$j([
+  property({ type: Boolean, reflect: true, attribute: "sm-full-height" })
+], NLDDPopover.prototype, "smFullHeight", 2);
 __decorateClass$j([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDPopover.prototype, "accessibleLabel", 2);
@@ -16868,6 +17186,8 @@ let NLDDSheet = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     this.addEventListener("dismiss", this._handleDismiss);
   }
   disconnectedCallback() {
@@ -17084,6 +17404,7 @@ let NLDDWindow = class extends LitElement {
     this.movable = false;
     this.accessibleLabel = "";
     this.translations = {};
+    this.centered = false;
     this._closing = false;
     this._dragging = false;
     this._dragOffsetX = 0;
@@ -17198,6 +17519,8 @@ let NLDDWindow = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.style.containerType = "inline-size";
+    this.style.containerName = "layout-area";
     this.addEventListener("dismiss", this._handleDismiss);
     this._detectDragHandle();
     window.addEventListener("resize", this._handleResize);
@@ -17265,14 +17588,18 @@ let NLDDWindow = class extends LitElement {
       dialog.style.height = this.height ?? "";
       return;
     }
-    const hasPosition = this.top !== void 0 || this.left !== void 0 || this.right !== void 0 || this.bottom !== void 0;
-    dialog.style.top = this.top ?? (this.bottom !== void 0 ? "auto" : "");
+    const hasEdge = this.top !== void 0 || this.left !== void 0 || this.right !== void 0 || this.bottom !== void 0;
+    const hasOverride = hasEdge || this.centered;
+    const yCenter = this.centered && this.top === void 0 && this.bottom === void 0;
+    const xCenter = this.centered && this.left === void 0 && this.right === void 0;
+    dialog.style.top = this.top ?? (yCenter ? "50%" : this.bottom !== void 0 ? "auto" : "");
     dialog.style.bottom = this.bottom ?? (this.top !== void 0 ? "auto" : "");
-    dialog.style.left = this.left ?? (this.right !== void 0 ? "auto" : "");
+    dialog.style.left = this.left ?? (xCenter ? "50%" : this.right !== void 0 ? "auto" : "");
     dialog.style.right = this.right ?? (this.left !== void 0 ? "auto" : "");
     dialog.style.width = this.width ?? "";
     dialog.style.height = this.height ?? "";
-    dialog.style.margin = hasPosition ? "0" : "";
+    dialog.style.transform = xCenter || yCenter ? `translate(${xCenter ? "-50%" : "0"}, ${yCenter ? "-50%" : "0"})` : "";
+    dialog.style.margin = hasOverride ? "0" : "";
   }
   _findDragHandle(e) {
     const handle = this.querySelector("[window-drag-handle]");
@@ -17353,6 +17680,9 @@ __decorateClass$h([
 __decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDWindow.prototype, "bottom", 2);
+__decorateClass$h([
+  property({ type: Boolean, reflect: true })
+], NLDDWindow.prototype, "centered", 2);
 __decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDWindow.prototype, "width", 2);
@@ -18624,6 +18954,7 @@ const titleCellStyles = css`
 		align-self: stretch;
 		min-width: 0;
 		color: var(--context-cell-content-color, var(--semantics-content-color));
+		text-wrap: pretty;
 	}
 
 	:host([horizontal-alignment='right']) .title-cell__title {
@@ -21088,6 +21419,7 @@ let NLDDTopTitleBar = class extends LitElement {
     this._pageElement = null;
     this._anchorElement = null;
     this._activeScrollTarget = null;
+    this._scrollTargetStyleObserver = null;
     this._boundOnScroll = this._onScroll.bind(this);
     this._onToolbarSlotChange = (e) => {
       const slot = e.target;
@@ -21134,12 +21466,21 @@ let NLDDTopTitleBar = class extends LitElement {
     const page2 = this._pageElement;
     this._activeScrollTarget = page2 ? page2.scrollTarget : window;
     this._activeScrollTarget.addEventListener("scroll", this._boundOnScroll, { passive: true });
+    if (this._activeScrollTarget instanceof Element) {
+      this._scrollTargetStyleObserver = new MutationObserver(() => this._onScroll());
+      this._scrollTargetStyleObserver.observe(this._activeScrollTarget, {
+        attributes: true,
+        attributeFilter: ["style"]
+      });
+    }
     this.updateComplete.then(() => this._onScroll());
   }
   _teardownAnchor() {
     this._activeScrollTarget?.removeEventListener("scroll", this._boundOnScroll);
     this._activeScrollTarget = null;
     this._anchorElement = null;
+    this._scrollTargetStyleObserver?.disconnect();
+    this._scrollTargetStyleObserver = null;
   }
   _onScroll() {
     if (!this._anchorElement || !this._pageElement) return;
@@ -22182,10 +22523,8 @@ function documentTabBarItemTemplate(component) {
 			${component.supportingText ? html`<span class="document-tab-bar__item-supporting-text">${component.supportingText}</span>` : nothing}
 		</span>
 		<span class="document-tab-bar__item-short">
-			<nldd-tooltip text=${tooltipText}>
-				<span class="document-tab-bar__item-short-text">${shortTextValue}</span>
-				${shortSupportingTextValue ? html`<span class="document-tab-bar__item-short-supporting-text">${shortSupportingTextValue}</span>` : nothing}
-			</nldd-tooltip>
+			<span class="document-tab-bar__item-short-text">${shortTextValue}</span>
+			${shortSupportingTextValue ? html`<span class="document-tab-bar__item-short-supporting-text">${shortSupportingTextValue}</span>` : nothing}
 		</span>
 	`;
   const tab = isLink ? html`<a class="document-tab-bar__item-tab"
@@ -22205,18 +22544,20 @@ function documentTabBarItemTemplate(component) {
 				@click=${component._handleClick}
 			>${tabContent}</button>`;
   return html`
-		<div class="document-tab-bar__item">
-			${tab}
-			<button class="document-tab-bar__item-dismiss-button"
-				aria-label=${component._dismissButtonAccessibilityLabel}
-				tabindex=${component.selected || component._isFallbackFocusable ? "0" : "-1"}
-				@click=${component._handleDismiss}
-			>
-				<span class="document-tab-bar__item-dismiss-icon">
-					<nldd-icon name="dismiss"></nldd-icon>
-				</span>
-			</button>
-		</div>
+		<nldd-tooltip text=${tooltipText} ?disabled=${!component._isShort}>
+			<div class="document-tab-bar__item">
+				${tab}
+				<button class="document-tab-bar__item-dismiss-button"
+					aria-label=${component._dismissButtonAccessibilityLabel}
+					tabindex=${component.selected || component._isFallbackFocusable ? "0" : "-1"}
+					@click=${component._handleDismiss}
+				>
+					<span class="document-tab-bar__item-dismiss-icon">
+						<nldd-icon name="dismiss"></nldd-icon>
+					</span>
+				</button>
+			</div>
+		</nldd-tooltip>
 	`;
 }
 const nlddDocumentTabBarTranslations = {
@@ -22247,6 +22588,8 @@ let NLDDDocumentTabBarItem = class extends LitElement {
     this.shortText = "";
     this.shortSupportingText = "";
     this.href = "";
+    this._isShort = false;
+    this._itemResizeObserver = null;
     this._dismissButtonAccessibilityLabel = "Sluit";
     this._isFallbackFocusable = false;
     this._navigation = false;
@@ -22254,6 +22597,17 @@ let NLDDDocumentTabBarItem = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "none");
+    this._itemResizeObserver = new ResizeObserver(() => this._updateIsShort());
+    this._itemResizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._itemResizeObserver?.disconnect();
+    this._itemResizeObserver = null;
+  }
+  _updateIsShort() {
+    const threshold = parseFloat(getComputedStyle(this).getPropertyValue("--_short-text-threshold"));
+    this._isShort = Number.isFinite(threshold) && this.getBoundingClientRect().width < threshold;
   }
   focus(options) {
     this.shadowRoot?.querySelector(".document-tab-bar__item-tab")?.focus(options);
@@ -22297,6 +22651,9 @@ __decorateClass$3([
 __decorateClass$3([
   property({ type: String })
 ], NLDDDocumentTabBarItem.prototype, "href", 2);
+__decorateClass$3([
+  state()
+], NLDDDocumentTabBarItem.prototype, "_isShort", 2);
 __decorateClass$3([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_dismissButtonAccessibilityLabel", 2);