@nldd/design-system 0.8.41 → 0.8.42

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

@@ -1,4 +1,4 @@
-var _a;
+var _a, _b, _c;
 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";
@@ -433,7 +433,6 @@ const aliases = {
   // arrow-u-turn-forward
   "redo": "arrow-u-turn-forward",
   // brackets-ellipsis
-  "code": "brackets-ellipsis",
   "embed": "brackets-ellipsis",
   // business-suitcase
   "work": "business-suitcase",
@@ -462,6 +461,8 @@ const aliases = {
   "checked-small": "check-mark-small",
   // chevron-left
   "back": "chevron-left",
+  // chevron-left-forward-slash-chevron-right
+  "code": "chevron-left-forward-slash-chevron-right",
   // chevron-right
   "forward": "chevron-right",
   // circle-dashed
@@ -562,6 +563,8 @@ const aliases = {
   "attach": "paperclip",
   // pencil
   "write": "pencil",
+  // photo
+  "image": "photo",
   // pencil-on-square
   "edit": "pencil-on-square",
   // person
@@ -615,6 +618,8 @@ const aliases = {
   // terminal
   "cli": "terminal",
   "console": "terminal",
+  // text-quote
+  "blockquote": "text-quote",
   // timer
   "countdown": "timer",
   // trash
@@ -631,7 +636,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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", '<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>'],
+  ["bold", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a6 6 0 0 1 4.9 9.45A5.98 5.98 0 0 1 13 22H5V2zM9 18h4a2 2 0 1 0 0-4H9zm0-8h3a2 2 0 1 0 0-4H9z"/>\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>'],
@@ -665,13 +670,15 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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-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-chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18.17 12 13.6 7.4 15 6l6 6-6 6-1.4-1.4zM5.83 12l4.57-4.6L9 6l-6 6 6 6 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-forward-slash-chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.04 4.53 10.9 20l-1.94-.52L13.1 4zM8.4 7.4 3.83 12l4.57 4.6L7 18l-6-6 6-6zM23 12l-6 6-1.4-1.4 4.57-4.6-4.57-4.6L17 6z"/>\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-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-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-chevron-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>'],
   ["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>'],
@@ -691,7 +698,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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>'],
   ["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>'],
+  ["euro-sign", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M10.25 2.76a7.3 7.3 0 0 1 4.9-.57 8.2 8.2 0 0 1 4.36 2.74L18.1 6.59a6.3 6.3 0 0 0-3.32-2.09 5.6 5.6 0 0 0-3.76.44l-.22.11a7 7 0 0 0-2.7 2.7L7.98 8A8 8 0 0 0 7.52 9H14v2H7.06a9 9 0 0 0 0 2H14v2H7.52q.24.65.58 1.25A7 7 0 0 0 11 19.06a5.6 5.6 0 0 0 3.52.49l.24-.05a6.3 6.3 0 0 0 3.32-2.1l1.42 1.67-.23.26a8 8 0 0 1-4.12 2.48 7.3 7.3 0 0 1-4.62-.44l-.3-.13a9 9 0 0 1-3.63-3.38l-.18-.3Q5.75 16.36 5.4 15H3v-2h2.04a12 12 0 0 1 0-2H3V9h2.4q.31-1.18.86-2.24l.17-.32a9 9 0 0 1 3.82-3.68"/>\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", '<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>'],
   ["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>'],
@@ -722,8 +729,8 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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>'],
   ["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>'],
-  ["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>'],
+  ["numbered-list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5.43 14a2 2 0 0 1 1.3 3.4l-1.1 1.1H7.5V20h-4v-1.5l2.16-2.16a.5.5 0 0 0 .14-.4.5.5 0 0 0-.47-.44.5.5 0 0 0-.51.37l-1.45-.39A2 2 0 0 1 5.43 14M22 19H10v-2h12zM22 13H10v-2h12zM6.5 10H5V5.5H3.5V4h3zM22 7H10V5h12z"/>\n</svg>'],
+  ["paper-plane", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19.7 2.74c.96-.31 1.87.6 1.56 1.57l-5.73 17.94c-.4.98-1.8 1.03-2.27.07L10.2 14.5a1.3 1.3 0 0 0-.7-.7l-7.72-3.03c-1.1-.42-1.04-2 .08-2.35zm-7.77 10.75q.08.15.13.29l2.25 5.74 3.94-12.36zm-7.45-3.8 5.74 2.25.3.13 6.32-6.32z"/>\n</svg>'],
   ["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>'],
@@ -731,11 +738,12 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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 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>'],
+  ["photo", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M9 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4"/>\n	<path fill="currentColor" d="M19 4a3 3 0 0 1 3 3v10c0 1.666-1.33 3-3 3H5c-1.66 0-3-1.334-3-3V7a3 3 0 0 1 3-3zM5 6a1 1 0 0 0-1 1v9l1.94-1.94a1.5 1.5 0 0 1 2.12 0l1.956 1.956 4.617-4.472a1.5 1.5 0 0 1 2.122.034L20 14.932V7a1 1 0 0 0-1-1z"/>\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>'],
   ["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>'],
+  ["question-mark-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 15.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5m-.34-9.48a3.5 3.5 0 0 1 2.82 5.95l-1.19 1.2a1 1 0 0 0-.3.7v.65H11v-.64a3 3 0 0 1 .88-2.13l1.19-1.18a1.5 1.5 0 1 0-2.58-1.07H8.5a3.5 3.5 0 0 1 3.16-3.48"/>\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>'],
   ["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>'],
@@ -748,9 +756,10 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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="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>'],
+  ["text-quote", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M17 20H3v-2h14zM21 15.5H3v-2h18zM7.22 6.1a3 3 0 0 0-1.55 1.02A2 2 0 1 1 3 9a5 5 0 0 1 3.7-4.83zM12.22 6.1a3 3 0 0 0-1.55 1.02A2 2 0 1 1 8 9a5 5 0 0 1 3.7-4.83zM21 11h-6.5V9H21zM21 6.5h-6.5v-2H21z"/>\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>']
+  ["underlined", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M20 22H4v-2h16zM8 13c0 1.33 1.43 3 4 3s4-1.67 4-3V2h2v11c0 2.76-2.69 5-6 5s-6-2.24-6-5V2h2z"/>\n</svg>']
 ]);
 var __defProp$1g = Object.defineProperty;
 var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
@@ -854,6 +863,13 @@ let NLDDButton = class extends LitElement {
     if (this.target === "_blank") return "noopener noreferrer";
     return "";
   }
+  /**
+   * Delegates focus to the inner `<button>` (or `<a>` when `href` is set), so
+   * consumers can call `buttonEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this.shadowRoot?.querySelector(".button")?.focus(options);
+  }
   render() {
     return template$n.call(this, {
       handleClick: this._handleClick.bind(this)
@@ -1722,6 +1738,13 @@ let NLDDIconButton = class extends LitElement {
       return;
     }
   }
+  /**
+   * Delegates focus to the inner `<button>` (or `<a>` when `href` is set), so
+   * consumers can call `iconButtonEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this.shadowRoot?.querySelector(".icon-button")?.focus(options);
+  }
   render() {
     return template$l.call(this);
   }
@@ -1976,6 +1999,50 @@ const menuStyles = css`
 	.menu__empty {
 		padding: var(--primitives-space-8);
 	}
+
+
+	/* # Back button — drill-in mode header */
+
+	.menu__back-button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		width: 100%;
+		min-height: var(--_menu-item-size);
+		padding: var(--primitives-space-8);
+		box-sizing: border-box;
+		border: none;
+		border-radius: var(--semantics-controls-md-corner-radius);
+		background: transparent;
+		text-align: start;
+		appearance: none;
+		--context-cell-content-color: var(--semantics-content-secondary-color);
+
+		@media (pointer: fine) {
+			padding: var(--primitives-space-4) var(--primitives-space-8);
+			border-radius: var(--semantics-controls-sm-corner-radius);
+		}
+	}
+
+	.menu__back-button:hover,
+	.menu__back-button:active {
+		background-color: var(--components-menu-item-is-highlighted-background-color);
+		--context-cell-content-color: var(--components-menu-item-is-highlighted-content-color);
+	}
+
+	.menu__back-button:focus-visible {
+		position: relative;
+		z-index: 1;
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	.menu__back-button-divider {
+		height: var(--semantics-dividers-thickness);
+		background-color: var(--semantics-dividers-color);
+		margin: var(--primitives-space-4) 0;
+	}
 `;
 const menuItemStyles = css`
 
@@ -2014,9 +2081,36 @@ const menuItemStyles = css`
 	}
 
 
-	/* # Highlighted or pressed */
+	/* # Open submenu opener
+	 *
+	 * Lighter, neutral background while the opener's submenu is open and the
+	 * cursor has moved into the submenu. The currently-active item is the
+	 * one in the submenu; the opener just shows "this branch is active".
+	 * macOS-style: subtle, not competing with the highlight.
+	 *
+	 * When the cursor moves back over the opener (or it's keyboard-focused),
+	 * the highlighted/hover rule below upgrades it to the bold accent. */
+
+	.menu__item[aria-expanded="true"] {
+		background-color: var(--components-menu-item-is-open-background-color);
+		--context-cell-content-color: var(--components-menu-item-is-open-content-color);
+		--context-cell-content-secondary-color: var(--components-menu-item-is-open-content-color);
+	}
+
+
+	/* # Highlighted or pressed
+	 *
+	 * [highlighted] always upgrades to the bold accent — including on openers
+	 * with an open submenu. The menu component keeps [highlighted] in sync
+	 * with where the user is logically navigating (set by mouseenter,
+	 * keyboard nav, or the safe-triangle while in transit; cleared on
+	 * peer-hover, submenu-entry, mouseleave, submenu-close), so a stale
+	 * highlighted attr on an opener shouldn't occur. The :hover branch
+	 * additionally covers the case where the cursor sits directly on an
+	 * open opener (since [highlighted] gets cleared at submenu-open time). */
 
 	:host([highlighted]) .menu__item,
+	.menu__item[aria-expanded="true"]:hover,
 	.menu__item:active {
 		background-color: var(--components-menu-item-is-highlighted-background-color);
 		--context-cell-content-color: var(--components-menu-item-is-highlighted-content-color);
@@ -2055,9 +2149,21 @@ const menuItemStyles = css`
 	/* # Forced colors */
 
 	@media (forced-colors: active) {
-		:host([highlighted]) .menu__item {
+		/* In forced-colors there's no neutral lighter palette, so mark the
+		 * open opener with a 1px outline instead of a fill — visibly "active"
+		 * without competing with the actual Highlight that lives in the
+		 * submenu. The hovered/highlighted branch promotes it back to the
+		 * full Highlight fill. */
+		.menu__item[aria-expanded="true"] {
+			outline: 1px solid CanvasText;
+			outline-offset: -1px;
+		}
+
+		:host([highlighted]) .menu__item,
+		.menu__item[aria-expanded="true"]:hover {
 			background-color: Highlight;
 			color: HighlightText;
+			outline: none;
 		}
 
 		.menu__item:focus-visible {
@@ -2087,6 +2193,62 @@ const menuDividerStyles = css`
 		background-color: var(--semantics-dividers-color);
 	}
 `;
+const menuGroupStyles = css`
+
+
+	/* # Host
+	 *
+	 * Renders an automatic divider above the group via border-top, except when
+	 * the group is the first child of the menu (then no divider is needed).
+	 * The padding-top below the divider provides generous breathing room above
+	 * the title — paired with the tighter margin-bottom on the title itself
+	 * this gives the "more space above than below" rhythm that visually binds
+	 * the title to the items it labels rather than to whatever sits above.
+	 */
+
+	:host {
+		display: block;
+		border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
+		padding-top: var(--primitives-space-6);
+		margin-top: var(--primitives-space-4);
+	}
+
+	:host(:first-child) {
+		border-top: none;
+		padding-top: var(--primitives-space-2);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Title */
+
+	.menu-group__title {
+		margin: 0;
+		padding-top: 0;
+		padding-right: var(--primitives-space-8);
+		padding-bottom: var(--primitives-space-1);
+		padding-left: var(--primitives-space-4);
+		font: var(--primitives-font-body-sm-regular-tight);
+		color: var(--semantics-content-secondary-color);
+	}
+
+
+	/* # Items wrapper
+	 *
+	 * display: block keeps the role="group" wrapper as a real box so the
+	 * accessibility tree reliably exposes role + aria-labelledby across all
+	 * supported engines (display: contents has historical a11y-tree bugs in
+	 * older WebKit/Chromium that drop these). The extra container has no
+	 * visual impact: .menu is a flex column, and a block child stacks the
+	 * group's items the same as if they were direct children.
+	 */
+	.menu-group__items {
+		display: block;
+	}
+`;
 const menuRoleMap = {
   menu: "menu",
   listbox: "listbox"
@@ -2098,11 +2260,28 @@ const itemRoleMap = {
 };
 function menuTemplate(isEmpty, variant) {
   const menuRole = isEmpty ? nothing : menuRoleMap[variant];
+  const showBack = this._isSubmenu && this._drillInMode && this._parentItem !== null;
   return html`
 		<div class="menu"
 			role=${menuRole}
 			tabindex="-1"
 		>
+			${showBack ? html`
+				<button class="menu__back-button"
+					type="button"
+					aria-label=${this._resolvedBackLabel}
+					@click=${this._handleBack}
+					@mouseenter=${this._handleBackMouseenter}
+				>
+					<nldd-icon-cell class="menu__back-icon" size="20" icon="chevron-left"></nldd-icon-cell>
+					<nldd-spacer-cell size="6"></nldd-spacer-cell>
+					<nldd-text-cell text=${this._parentItem.text}></nldd-text-cell>
+				</button>
+				<!-- Pure visual divider; role="none" keeps strict ARIA validators
+				     quiet (a focusable role="separator" inside a menu would need
+				     aria-valuenow et al.; this one is decorative). -->
+				<div class="menu__back-button-divider" role="none"></div>
+			` : nothing}
 			<slot></slot>
 			${isEmpty ? html`
 				<div class="menu__empty">
@@ -2120,6 +2299,7 @@ function menuTemplate(isEmpty, variant) {
 function menuItemTemplate(variant = "menu") {
   const hasCheckState = this.type !== "button" && variant === "menu";
   const role = itemRoleMap[this.type][variant];
+  const hasSubmenu = this._hasSubmenu;
   return html`
 		<button class="menu__item"
 			type="button"
@@ -2127,6 +2307,9 @@ function menuItemTemplate(variant = "menu") {
 			?disabled=${this.disabled}
 			aria-checked=${hasCheckState ? String(this.selected) : nothing}
 			aria-selected=${variant === "listbox" ? String(this.selected) : nothing}
+			aria-haspopup=${hasSubmenu ? "menu" : nothing}
+			aria-expanded=${hasSubmenu ? String(this._submenuOpen) : nothing}
+			aria-controls=${hasSubmenu && this._submenuEl?.id ? this._submenuEl.id : nothing}
 			@click=${this._handleClick}
 		>
 			${hasCheckState ? html`
@@ -2151,14 +2334,47 @@ function menuItemTemplate(variant = "menu") {
 					text=${this.details}
 				></nldd-text-cell>
 			` : nothing}
+			${hasSubmenu ? html`
+				<nldd-spacer-cell size="6"></nldd-spacer-cell>
+				<nldd-icon-cell class="menu__item-submenu-indicator"
+					size="20"
+					icon="chevron-right"
+				></nldd-icon-cell>
+			` : nothing}
 		</button>
+		<!--
+			Project the slotted nldd-menu (the submenu, if any) into the flat
+			tree. Without this slot, a light-DOM child nldd-menu sits outside
+			any flat tree — and the Popover API uses the flat tree to locate
+			a popover's ancestor popover. Without an ancestor, calling
+			showPopover() on the submenu would dismiss the parent menu (its
+			DOM ancestor) instead of stacking on top of it. The slot itself
+			has no visible effect because the submenu is display:none until
+			it opens its own popover.
+		-->
+		<slot></slot>
 	`;
 }
 function menuDividerTemplate() {
   return html`<div class="menu__divider" role="separator"></div>`;
 }
+function menuGroupTemplate(component) {
+  return html`
+		<div class="menu-group__title"
+			id=${component._titleId}
+			aria-hidden="true"
+		>${component.text}</div>
+		<div class="menu-group__items"
+			role="group"
+			aria-labelledby=${component._titleId}
+		>
+			<slot></slot>
+		</div>
+	`;
+}
 const nlddMenuTranslations = {
-  "components.menu.empty-text": "Geen opties beschikbaar"
+  "components.menu.empty-text": "Geen opties beschikbaar",
+  "components.menu.back": "Terug"
 };
 const iconCellStyles = css`
 
@@ -2169,7 +2385,6 @@ const iconCellStyles = css`
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		color: var(--context-cell-content-color, var(--semantics-content-color));
 	}
 
 	:host([hidden]) {
@@ -2177,9 +2392,9 @@ const iconCellStyles = css`
 	}
 
 
-	/* # vertical-alignment */
+	/* # Vertical alignment */
 
-	/* ## vertical-alignment: center (default) */
+	/* ## Vertical alignment: center (default) */
 
 	:host([vertical-alignment="center"]),
 	:host(:not([vertical-alignment])) {
@@ -2187,14 +2402,14 @@ const iconCellStyles = css`
 		justify-content: center;
 	}
 
-	/* ## vertical-alignment: top */
+	/* ## Vertical alignment: top */
 
 	:host([vertical-alignment="top"]) {
 		align-self: flex-start;
 		justify-content: flex-start;
 	}
 
-	/* ## vertical-alignment: bottom */
+	/* ## Vertical alignment: bottom */
 
 	:host([vertical-alignment="bottom"]) {
 		align-self: flex-end;
@@ -2202,14 +2417,17 @@ const iconCellStyles = css`
 	}
 
 
-	/* # size */
+	/* # Slotted icon */
 
 	::slotted(*) {
 		display: block;
 		flex-shrink: 0;
 	}
 
-	/* ## size: 16 */
+
+	/* # Size */
+
+	/* ## Size: 16 */
 
 	:host([size="16"]) {
 		width: var(--primitives-space-16);
@@ -2220,7 +2438,7 @@ const iconCellStyles = css`
 		height: var(--primitives-space-16);
 	}
 
-	/* ## size: 20 */
+	/* ## Size: 20 */
 
 	:host([size="20"]) {
 		width: var(--primitives-space-20);
@@ -2231,9 +2449,10 @@ const iconCellStyles = css`
 		height: var(--primitives-space-20);
 	}
 
-	/* ## size: 24 (default) */
+	/* ## Size: 24 (default) */
 
-	:host([size="24"]) {
+	:host([size="24"]),
+	:host(:not([size])) {
 		width: var(--primitives-space-24);
 	}
 
@@ -2243,7 +2462,7 @@ const iconCellStyles = css`
 		height: var(--primitives-space-24);
 	}
 
-	/* ## size: 32 */
+	/* ## Size: 32 */
 
 	:host([size="32"]) {
 		width: var(--primitives-space-32);
@@ -2255,10 +2474,43 @@ const iconCellStyles = css`
 	}
 
 
-	/* # color: inherit */
+	/* # Color */
 
-	:host([color="inherit"]) {
-		color: inherit;
+	/* ## Color: default */
+
+	:host([color="default"]),
+	:host(:not([color])) {
+		color: var(--context-cell-content-color, var(--semantics-content-color));
+	}
+
+	/* ## Color: secondary */
+
+	:host([color="secondary"]) {
+		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
+	}
+
+	/* ## Color: accent */
+
+	:host([color="accent"]) {
+		color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+	}
+
+	/* ## Color: success */
+
+	:host([color="success"]) {
+		color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
+	}
+
+	/* ## Color: warning */
+
+	:host([color="warning"]) {
+		color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+	}
+
+	/* ## Color: critical */
+
+	:host([color="critical"]) {
+		color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
 	}
 `;
 function template$j() {
@@ -2571,12 +2823,36 @@ const textCellStyles = css`
 		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
 	}
 
-	/* ## Color: inherit */
+	/* ## Color: accent */
 
-	:host([color='inherit']) .text-cell__text,
-	:host([color='inherit']) .text-cell__overline,
-	:host([color='inherit']) .text-cell__supporting-text {
-		color: inherit;
+	:host([color='accent']) .text-cell__text,
+	:host([color='accent']) .text-cell__overline,
+	:host([color='accent']) .text-cell__supporting-text {
+		color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+	}
+
+	/* ## Color: success */
+
+	:host([color='success']) .text-cell__text,
+	:host([color='success']) .text-cell__overline,
+	:host([color='success']) .text-cell__supporting-text {
+		color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
+	}
+
+	/* ## Color: warning */
+
+	:host([color='warning']) .text-cell__text,
+	:host([color='warning']) .text-cell__overline,
+	:host([color='warning']) .text-cell__supporting-text {
+		color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+	}
+
+	/* ## Color: critical */
+
+	:host([color='critical']) .text-cell__text,
+	:host([color='critical']) .text-cell__overline,
+	:host([color='critical']) .text-cell__supporting-text {
+		color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
 	}
 
 
@@ -2642,9 +2918,27 @@ function renderQueryMark(text, query2, mode = "predictive") {
 }
 function template$i() {
   return html`
-		${this.overline ? html`<p class="text-cell__overline">${renderQueryMark(this.overline, this.query, this.queryMarkMode)}</p>` : nothing}
-		${this.text ? html`<p class="text-cell__text">${renderQueryMark(this.text, this.query, this.queryMarkMode)}</p>` : nothing}
-		${this.supportingText ? html`<p class="text-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
+		<p
+			class="text-cell__overline"
+			?hidden=${!this.overline && !this._hasOverlineSlotted}
+		>
+			${this.overline && !this._hasOverlineSlotted ? renderQueryMark(this.overline, this.query, this.queryMarkMode) : nothing}
+			<slot name="overline" @slotchange=${this._onSlotChange}></slot>
+		</p>
+		<p
+			class="text-cell__text"
+			?hidden=${!this.text && !this._hasDefaultSlotted}
+		>
+			${this.text && !this._hasDefaultSlotted ? renderQueryMark(this.text, this.query, this.queryMarkMode) : nothing}
+			<slot @slotchange=${this._onSlotChange}></slot>
+		</p>
+		<p
+			class="text-cell__supporting-text"
+			?hidden=${!this.supportingText && !this._hasSupportingTextSlotted}
+		>
+			${this.supportingText && !this._hasSupportingTextSlotted ? renderQueryMark(this.supportingText, this.query, this.queryMarkMode) : nothing}
+			<slot name="supporting-text" @slotchange=${this._onSlotChange}></slot>
+		</p>
 	`;
 }
 var __defProp$19 = Object.defineProperty;
@@ -2670,6 +2964,29 @@ let NLDDTextCell = class extends VisibilityMixin(LitElement) {
     this.supportingText = "";
     this.query = "";
     this.queryMarkMode = "predictive";
+    this._hasOverlineSlotted = false;
+    this._hasDefaultSlotted = false;
+    this._hasSupportingTextSlotted = false;
+    this._onSlotChange = (e) => {
+      const slot = e.target;
+      const hasContent = slot.assignedNodes().some((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return (node.textContent ?? "").trim().length > 0;
+        }
+        return node.nodeType === Node.ELEMENT_NODE;
+      });
+      switch (slot.name) {
+        case "overline":
+          this._hasOverlineSlotted = hasContent;
+          break;
+        case "supporting-text":
+          this._hasSupportingTextSlotted = hasContent;
+          break;
+        default:
+          this._hasDefaultSlotted = hasContent;
+          break;
+      }
+    };
   }
   updated(changed) {
     super.updated(changed);
@@ -2744,6 +3061,15 @@ __decorateClass$1b([
 __decorateClass$1b([
   property({ type: String, attribute: "query-mark-mode" })
 ], NLDDTextCell.prototype, "queryMarkMode", 2);
+__decorateClass$1b([
+  state()
+], NLDDTextCell.prototype, "_hasOverlineSlotted", 2);
+__decorateClass$1b([
+  state()
+], NLDDTextCell.prototype, "_hasDefaultSlotted", 2);
+__decorateClass$1b([
+  state()
+], NLDDTextCell.prototype, "_hasSupportingTextSlotted", 2);
 NLDDTextCell = __decorateClass$1b([
   customElement("nldd-text-cell")
 ], NLDDTextCell);
@@ -2760,7 +3086,7 @@ const inlineDialogStyles = css`
 
 	:host {
 		--_icon-size: var(--primitives-space-48);
-		--_icon-color: var(--semantics-content-color);
+		--_icon-color: var(--components-inline-dialog-icon-color);
 
 		display: flex;
 		justify-content: center;
@@ -2773,9 +3099,19 @@ const inlineDialogStyles = css`
 	}
 
 	:host([variant='alert']) {
-		--_icon-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-650));
+		--_icon-color: var(--components-inline-dialog-icon-warning-color);
+	}
+
+	:host([variant='success']) {
+		--_icon-color: var(--components-inline-dialog-icon-success-color);
 	}
 
+	:host([icon-color='secondary']) { --_icon-color: var(--components-inline-dialog-icon-secondary-color); }
+	:host([icon-color='accent'])    { --_icon-color: var(--components-inline-dialog-icon-accent-color); }
+	:host([icon-color='critical'])  { --_icon-color: var(--components-inline-dialog-icon-critical-color); }
+	:host([icon-color='warning'])   { --_icon-color: var(--components-inline-dialog-icon-warning-color); }
+	:host([icon-color='success'])   { --_icon-color: var(--components-inline-dialog-icon-success-color); }
+
 
 	/* # Body */
 
@@ -3010,6 +3346,7 @@ let NLDDInlineDialog = class extends LitElement {
     super(...arguments);
     this.variant = "";
     this.icon = "";
+    this.iconColor = "";
     this.text = "";
     this.supportingText = "";
     this.headingLevel = null;
@@ -3018,6 +3355,7 @@ let NLDDInlineDialog = class extends LitElement {
   }
   get _resolvedIconName() {
     if (this.variant === "alert") return "alert";
+    if (this.variant === "success") return "success";
     if (this.icon) return this.icon;
     return "";
   }
@@ -3052,6 +3390,9 @@ __decorateClass$19([
 __decorateClass$19([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "icon", 2);
+__decorateClass$19([
+  property({ type: String, reflect: true, attribute: "icon-color" })
+], NLDDInlineDialog.prototype, "iconColor", 2);
 __decorateClass$19([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "text", 2);
@@ -3071,6 +3412,12 @@ NLDDInlineDialog = __decorateClass$19([
   customElement("nldd-inline-dialog")
 ], NLDDInlineDialog);
 const POPOVER_REOPEN_GUARD_MS = 100;
+const breakpoints = {
+  smMax: "640px",
+  mdMin: "641px",
+  mdMax: "1007px",
+  lgMin: "1008px"
+};
 var __defProp$16 = Object.defineProperty;
 var __decorateClass$18 = (decorators, target, key, kind) => {
   var result = void 0;
@@ -3090,7 +3437,24 @@ let NLDDMenuDivider = _NLDDMenuDivider;
 if (!customElements.get("nldd-menu-divider")) {
   customElements.define("nldd-menu-divider", NLDDMenuDivider);
 }
-const _NLDDMenuItem = (_a = class extends LitElement {
+const _NLDDMenuGroup = (_a = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this._titleId = `nldd-menu-group-title-${_a._idCounter++}`;
+  }
+  render() {
+    return menuGroupTemplate(this);
+  }
+}, _a.styles = menuGroupStyles, _a._idCounter = 0, _a);
+__decorateClass$18([
+  property({ type: String, reflect: true })
+], _NLDDMenuGroup.prototype, "text");
+let NLDDMenuGroup = _NLDDMenuGroup;
+if (!customElements.get("nldd-menu-group")) {
+  customElements.define("nldd-menu-group", NLDDMenuGroup);
+}
+const _NLDDMenuItem = (_b = class extends LitElement {
   constructor() {
     super(...arguments);
     this.text = "";
@@ -3104,27 +3468,70 @@ const _NLDDMenuItem = (_a = class extends LitElement {
     this.query = "";
     this.queryMarkMode = "predictive";
     this.menuVariant = "menu";
+    this._submenuOpen = false;
+    this._cachedSubmenuEl = null;
+    this._submenuMutationObserver = null;
   }
   connectedCallback() {
     super.connectedCallback();
     if (!this.id) {
-      this.id = `nldd-menu-item-${_a._idCounter++}`;
+      this.id = `nldd-menu-item-${_b._idCounter++}`;
     }
-    this.addEventListener("focusin", () => {
+    this.addEventListener("focusin", (e) => {
+      const realTarget = e.composedPath()[0];
+      if (!realTarget || !this.shadowRoot?.contains(realTarget)) return;
       this.setAttribute("data-focused", "");
       this.dispatchEvent(new CustomEvent("menu-item-focused", {
         bubbles: true,
         composed: true
       }));
     });
-    this.addEventListener("focusout", () => this.removeAttribute("data-focused"));
+    this.addEventListener("focusout", (e) => {
+      const realTarget = e.composedPath()[0];
+      if (!realTarget || !this.shadowRoot?.contains(realTarget)) return;
+      this.removeAttribute("data-focused");
+    });
   }
   focus(options) {
     const focusable = this.shadowRoot?.querySelector("button, a");
     focusable?.focus(options);
   }
+  get _submenuEl() {
+    return this._cachedSubmenuEl;
+  }
+  get _hasSubmenu() {
+    return this._cachedSubmenuEl !== null;
+  }
+  firstUpdated() {
+    this._cachedSubmenuEl = this.querySelector(":scope > nldd-menu");
+    if (this._cachedSubmenuEl !== null) {
+      this.requestUpdate();
+    }
+    this._submenuMutationObserver = new MutationObserver(() => {
+      const current = this.querySelector(":scope > nldd-menu");
+      if (current && current !== this._cachedSubmenuEl) {
+        console.warn(
+          "[nldd-menu-item] A nldd-menu child was added after mount. Submenu attachment is resolved once at firstUpdated in v1, so this menu will not be treated as a submenu. Define the nldd-menu child before the item is connected to the DOM."
+        );
+      }
+    });
+    this._submenuMutationObserver.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._submenuMutationObserver?.disconnect();
+    this._submenuMutationObserver = null;
+  }
   _handleClick() {
     if (this.disabled) return;
+    if (this._hasSubmenu) {
+      this.dispatchEvent(new CustomEvent("submenu-open", {
+        detail: { submenu: this._submenuEl, item: this },
+        bubbles: true,
+        composed: false
+      }));
+      return;
+    }
     this.dispatchEvent(new CustomEvent("select", {
       bubbles: true,
       composed: true
@@ -3138,7 +3545,7 @@ const _NLDDMenuItem = (_a = class extends LitElement {
   render() {
     return menuItemTemplate.call(this, this.menuVariant);
   }
-}, _a.styles = menuItemStyles, _a._idCounter = 0, _a);
+}, _b.styles = menuItemStyles, _b._idCounter = 0, _b);
 __decorateClass$18([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "text");
@@ -3172,6 +3579,9 @@ __decorateClass$18([
 __decorateClass$18([
   state()
 ], _NLDDMenuItem.prototype, "menuVariant");
+__decorateClass$18([
+  state()
+], _NLDDMenuItem.prototype, "_submenuOpen");
 let NLDDMenuItem = _NLDDMenuItem;
 if (!customElements.get("nldd-menu-item")) {
   customElements.define("nldd-menu-item", NLDDMenuItem);
@@ -3183,7 +3593,7 @@ const defaultFilterFn = (query2, item) => {
   const aliasesMatch = item.aliases !== "" && item.aliases.split(" ").some((s) => s.toLowerCase().includes(q));
   return textMatch || valueMatch || aliasesMatch;
 };
-const _NLDDMenu = class _NLDDMenu extends LitElement {
+const _NLDDMenu = (_c = class extends LitElement {
   constructor() {
     super(...arguments);
     this.anchor = "";
@@ -3195,8 +3605,13 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     this.width = "";
     this.maxItems = 0;
     this.translations = {};
+    this.debugSafeTriangle = false;
     this.filterFn = defaultFilterFn;
     this._isEmpty = false;
+    this._activeSubmenu = null;
+    this._activeSubmenuOpener = null;
+    this._parentMenu = null;
+    this._parentItem = null;
     this._isOpen = false;
     this._closedAt = 0;
     this._cleanupAutoUpdate = null;
@@ -3212,55 +3627,178 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
         this.showPopover();
       }
     };
+    this._hoverOpenTimer = null;
+    this._hoverCloseTimer = null;
+    this._safeTriangleListener = null;
+    this._safeTriangleStallTimer = null;
+    this._lastCursorPos = null;
+    this._safeTriangleApex = null;
+    this._safeTriangleSubmenu = null;
+    this._movingTowardSubmenu = false;
     this._handleMenuItemMouseenter = (event) => {
       const item = event.target.closest("nldd-menu-item");
-      if (!item || item.disabled || item.hasAttribute("hidden")) return;
-      this._setHighlight(item);
+      if (!item) return;
+      this._activateItem(item);
     };
     this._handleMouseleave = () => {
       if (this.variant !== "listbox") this._clearHighlight();
+      this._cancelHoverOpen();
     };
+    this._safeTriangleOverlay = null;
     this._handleMenuItemFocused = (event) => {
       const item = event.target.closest("nldd-menu-item");
       if (!item || item.disabled || item.hasAttribute("hidden")) return;
+      if (item.closest("nldd-menu") !== this) return;
       this._setHighlight(item);
     };
+    this._handleSubmenuOpen = (event) => {
+      const { item, submenu } = event.detail;
+      if (item.closest("nldd-menu") !== this) return;
+      event.stopPropagation();
+      if (this._activeSubmenu === submenu) return;
+      if (this._activeSubmenu && this._activeSubmenu !== submenu) {
+        this._activeSubmenu.hidePopover?.();
+      }
+      submenu._parentMenu = this;
+      submenu._parentItem = item;
+      if (this._drillInMode) {
+        const root = this._rootMenu;
+        submenu.anchorElement = root._getAnchorEl();
+        submenu.placement = root.placement;
+      } else {
+        submenu.anchorElement = item;
+        submenu.placement = "right-start";
+      }
+      this._activeSubmenu = submenu;
+      this._activeSubmenuOpener = item;
+      item._submenuOpen = true;
+      item.removeAttribute("highlighted");
+      const onToggle = (e) => {
+        const tg = e;
+        if (tg.newState !== "closed") return;
+        submenu.removeEventListener("toggle", onToggle);
+        if (this._activeSubmenu === submenu) {
+          this._activeSubmenu = null;
+          this._activeSubmenuOpener = null;
+        }
+        submenu._parentMenu = null;
+        submenu._parentItem = null;
+        item._submenuOpen = false;
+        if (!item.hasAttribute("data-focused")) {
+          item.removeAttribute("highlighted");
+        }
+        this._cancelHoverClose();
+        this._stopSafeTriangle();
+        this.dispatchEvent(new CustomEvent("submenu-close", {
+          detail: { submenu, item },
+          bubbles: true,
+          composed: false
+        }));
+      };
+      submenu.addEventListener("toggle", onToggle);
+      submenu.showPopover?.();
+      if (!this._drillInMode) {
+        requestAnimationFrame(() => {
+          if (this._activeSubmenu === submenu) {
+            this._startSafeTriangle(submenu);
+          }
+        });
+      }
+    };
+    this._handleBack = () => {
+      this.hidePopover?.();
+    };
+    this._handleBackMouseenter = () => {
+      this._clearHighlight();
+    };
+    this._lastDrillInMode = null;
+    this._handleViewportResize = () => {
+      const current = this._drillInMode;
+      if (this._lastDrillInMode === null) {
+        this._lastDrillInMode = current;
+        return;
+      }
+      if (this._lastDrillInMode === current) return;
+      this._lastDrillInMode = current;
+      if (this._activeSubmenu) {
+        this._activeSubmenu.hidePopover?.();
+      }
+    };
+    this._handleSelectChainClose = () => {
+      this.hidePopover?.();
+    };
     this._handleKeydown = (event) => {
       const items = this._getVisibleItems();
       if (items.length === 0) return;
+      const focusedDescendant = this.querySelector("nldd-menu-item[data-focused]");
+      if (focusedDescendant && focusedDescendant.closest("nldd-menu") !== this) return;
       const index = this._getFocusedIndex(items);
       switch (event.key) {
         case "ArrowDown": {
           event.preventDefault();
+          event.stopPropagation();
           const next = index === -1 ? 0 : index < items.length - 1 ? index + 1 : 0;
           items[next].focus();
           break;
         }
         case "ArrowUp": {
           event.preventDefault();
+          event.stopPropagation();
           const prev = index === -1 ? items.length - 1 : index > 0 ? index - 1 : items.length - 1;
           items[prev].focus();
           break;
         }
         case "Home": {
           event.preventDefault();
+          event.stopPropagation();
           items[0].focus();
           break;
         }
         case "End": {
           event.preventDefault();
+          event.stopPropagation();
           items[items.length - 1].focus();
           break;
         }
+        case "ArrowRight": {
+          const focused = items[index];
+          if (focused?._hasSubmenu) {
+            event.preventDefault();
+            event.stopPropagation();
+            focused._handleClick();
+            requestAnimationFrame(() => {
+              this._activeSubmenu?._getVisibleItems()[0]?.focus();
+            });
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          if (this._isSubmenu) {
+            event.preventDefault();
+            event.stopPropagation();
+            const parentItem = this._parentItem;
+            this.hidePopover();
+            parentItem?.focus();
+          }
+          break;
+        }
         case "Escape": {
           event.preventDefault();
+          event.stopPropagation();
           this.hidePopover();
-          const anchorEl = this._getAnchorEl();
-          anchorEl?.focus();
+          const focusTarget = this._isSubmenu ? this._parentItem : this._getAnchorEl();
+          focusTarget?.focus();
           break;
         }
+        default: {
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            this._handleTypeahead(event, items, index);
+          }
+        }
       }
     };
+    this._typeaheadBuffer = "";
+    this._typeaheadTimer = null;
     this._handleToggle = async (event) => {
       const toggleEvent = event;
       this._isOpen = toggleEvent.newState === "open";
@@ -3304,6 +3842,15 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
   get _resolvedEmptyText() {
     return this.emptyText || this._t("components.menu.empty-text");
   }
+  /** Accessible name for the drill-in back button. Prefixes the parent
+   * item's label with the localised "back" word so AT announces "Back:
+   * Bestand" instead of an ambiguous "Bestand, button". Only used when
+   * this menu is itself a submenu in drill-in mode. */
+  get _resolvedBackLabel() {
+    const back = this._t("components.menu.back");
+    const parent = this._parentItem?.text ?? "";
+    return parent ? `${back}: ${parent}` : back;
+  }
   // — Lifecycle ——————————————————————————————————————————————————————————————
   updated(changedProperties) {
     if (changedProperties.has("width")) {
@@ -3332,9 +3879,322 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     if (this.anchor) return document.getElementById(this.anchor);
     return null;
   }
-  // — Lifecycle callbacks ————————————————————————————————————————————————————
+  /**
+   * Item-activation logic shared between the native `mouseenter` capture
+   * handler and the safe-triangle recovery paths (sideways exit, direction
+   * reversal, stall dismissal). Those paths know which item is under the
+   * cursor — they don't need to synthesize a MouseEvent just to re-enter
+   * the handler. Factoring out the body keeps the entry contracts honest:
+   * the recovery sites pass an already-resolved item rather than relying
+   * on `event.target` semantics they'd have to fake.
+   */
+  _activateItem(item) {
+    if (item.disabled || item.hasAttribute("hidden")) return;
+    if (item.closest("nldd-menu") !== this) return;
+    if (this._movingTowardSubmenu && item !== this._activeSubmenuOpener) return;
+    this._setHighlight(item);
+    this._cancelHoverClose();
+    if (this._drillInMode) return;
+    if (this._activeSubmenu && item !== this._activeSubmenuOpener) {
+      this._activeSubmenu.hidePopover?.();
+    }
+    this._cancelHoverOpen();
+    if (item._hasSubmenu && this._activeSubmenuOpener !== item) {
+      this._hoverOpenTimer = window.setTimeout(() => {
+        this._hoverOpenTimer = null;
+        item._handleClick();
+      }, 150);
+    }
+  }
+  /** Resolve the menu-item under a viewport point and activate it via
+   * `_activateItem`. Used by safe-triangle recovery paths whose natural
+   * mouseenter has already fired (and bailed) — they need to re-trigger
+   * activation without synthesizing a MouseEvent. */
+  _activateItemAt(p) {
+    const el = document.elementFromPoint(p.x, p.y);
+    const item = el?.closest("nldd-menu-item");
+    if (item) this._activateItem(item);
+  }
+  /** Start the global mouse tracker that powers the safe triangle. Called
+   * by _handleSubmenuOpen when a submenu opens in cascade mode. The
+   * listener is a thin orchestrator over the named phase methods below. */
+  _startSafeTriangle(submenu) {
+    this._stopSafeTriangle();
+    this._lastCursorPos = null;
+    this._safeTriangleApex = null;
+    this._safeTriangleSubmenu = submenu;
+    this._movingTowardSubmenu = false;
+    this._safeTriangleListener = (e) => {
+      const p = { x: e.clientX, y: e.clientY };
+      const r = submenu.getBoundingClientRect();
+      if (_c._isPointInMenuTree(p, submenu)) {
+        this._safeTriangleArrived(p);
+        return;
+      }
+      const openerRect = this._activeSubmenuOpener?.getBoundingClientRect();
+      const cursorOnOpener = _c._rectContainsPoint(openerRect, p);
+      const lastOnOpener = _c._rectContainsPoint(openerRect, this._lastCursorPos);
+      if (this._safeTriangleApex !== null && cursorOnOpener) {
+        this._safeTriangleApex = null;
+      }
+      const wasMoving = this._movingTowardSubmenu;
+      if (this._safeTriangleApex === null) {
+        if (cursorOnOpener) {
+          this._safeTriangleWaitOnOpener(p, r, openerRect);
+          return;
+        }
+        if (openerRect && lastOnOpener && (p.y > openerRect.bottom || p.y < openerRect.top)) {
+          this._safeTrianglePinApex(p, openerRect);
+        } else {
+          this._safeTriangleSidewaysExit(p, wasMoving);
+        }
+      } else {
+        this._safeTrianglePolygonTest(p, r);
+      }
+      this._lastCursorPos = p;
+      this._safeTriangleSyncOpenerHighlight();
+      this._safeTriangleDirectionReversalRecovery(p, wasMoving);
+      this._safeTriangleScheduleStall();
+      if (this._movingTowardSubmenu) {
+        this._cancelHoverClose();
+        return;
+      }
+      this._safeTriangleMaybeScheduleLingerClose(p);
+    };
+    window.addEventListener("mousemove", this._safeTriangleListener);
+  }
+  // — Safe-triangle phase methods ————————————————————————————————————————
+  /** Cursor entered the submenu (or any nested submenu) — clean up triangle
+   * state but leave the window mousemove listener alive. The listener still
+   * needs to fire while the cursor is inside the submenu so we can detect a
+   * return trip to the opener and re-pin a fresh apex for another exit. */
+  _safeTriangleArrived(p) {
+    this._movingTowardSubmenu = false;
+    this._cancelHoverClose();
+    this._lastCursorPos = p;
+    this._safeTriangleApex = null;
+    this._activeSubmenuOpener?.removeAttribute("highlighted");
+    this._removeSafeTriangleOverlay();
+  }
+  /** Cursor still on the opener — wait for an exit direction. Sets the
+   * "in transit" flag (so brief peer pass-throughs don't activate) and
+   * renders a live debug preview that follows the cursor. */
+  _safeTriangleWaitOnOpener(p, r, openerRect) {
+    this._movingTowardSubmenu = true;
+    this._lastCursorPos = p;
+    if (this._activeSubmenuOpener && !this._activeSubmenuOpener.hasAttribute("highlighted")) {
+      this._setHighlight(this._activeSubmenuOpener);
+    }
+    if (this.debugSafeTriangle && openerRect) {
+      const nearX = p.x < r.left ? r.left : r.right;
+      this._renderSafeTriangleOverlay([
+        { x: p.x - _c._SAFE_TRIANGLE_APEX_X_OFFSET, y: p.y },
+        { x: nearX, y: r.top },
+        { x: nearX, y: r.bottom }
+      ]);
+    }
+  }
+  /** Cursor crossed the opener's top or bottom edge — pin apex there.
+   * x is clamped to the opener's range so the wedge starts at the visual
+   * edge regardless of how far past the edge this mousemove sample is, then
+   * shifted by _SAFE_TRIANGLE_APEX_X_OFFSET to widen the wedge at the
+   * cursor side (the 4px headroom that makes brief diagonal wobble forgive). */
+  _safeTrianglePinApex(p, openerRect) {
+    const apexX = Math.max(openerRect.left, Math.min(openerRect.right, p.x)) - _c._SAFE_TRIANGLE_APEX_X_OFFSET;
+    const apexY = p.y > openerRect.bottom ? openerRect.bottom : openerRect.top;
+    this._safeTriangleApex = { x: apexX, y: apexY };
+    this._movingTowardSubmenu = true;
+  }
+  /** Cursor exited the opener sideways (left/right) or with no opener
+   * history — no triangle protection. Drop the flag and the overlay,
+   * and synthesize mouseenter on the element under the cursor so peers
+   * activate immediately (the natural mouseenter fired with flag=true
+   * during the on-opener phase and got bailed). */
+  _safeTriangleSidewaysExit(p, wasMoving) {
+    this._movingTowardSubmenu = false;
+    this._lastCursorPos = p;
+    this._removeSafeTriangleOverlay();
+    if (wasMoving) this._activateItemAt(p);
+  }
+  /** Apex pinned — test whether the current cursor position is inside the
+   * wedge. Picks the submenu edge facing the cursor (left for right-start,
+   * right when floating-ui flipped it). */
+  _safeTrianglePolygonTest(p, r) {
+    const nearX = p.x < r.left ? r.left : r.right;
+    const apex = this._safeTriangleApex;
+    const wedge = [
+      apex,
+      { x: nearX, y: r.top },
+      { x: nearX, y: r.bottom }
+    ];
+    this._movingTowardSubmenu = _c._pointInPolygon(p, wedge);
+    if (this.debugSafeTriangle) {
+      this._renderSafeTriangleOverlay(wedge);
+    }
+  }
+  /** Sync opener highlight with the in-transit flag. Uses _setHighlight so
+   * any peer that briefly got highlighted (e.g. via the synthetic
+   * mouseenter on a wedge-edge wobble) is cleared. Skip when the opener
+   * already has the attribute to avoid DOM churn each frame. */
+  _safeTriangleSyncOpenerHighlight() {
+    if (this._activeSubmenuOpener && this._movingTowardSubmenu && !this._activeSubmenuOpener.hasAttribute("highlighted")) {
+      this._setHighlight(this._activeSubmenuOpener);
+    }
+  }
+  /** When the in-transit flag flips true → false, the cursor may already
+   * be sitting on a peer item whose natural mouseenter fired (and bailed)
+   * earlier. mouseenter won't re-fire until the cursor leaves and re-
+   * enters, so synthesize one here to activate the peer immediately. */
+  _safeTriangleDirectionReversalRecovery(p, wasMoving) {
+    if (!wasMoving || this._movingTowardSubmenu) return;
+    this._activateItemAt(p);
+  }
+  /** Re-arm the stall-dismissal timer. If the cursor sits motionless
+   * inside the safe triangle long enough, drop the protection so the
+   * element under the cursor can become interactive without nudging. */
+  _safeTriangleScheduleStall() {
+    if (this._safeTriangleStallTimer !== null) {
+      clearTimeout(this._safeTriangleStallTimer);
+      this._safeTriangleStallTimer = null;
+    }
+    if (!this._movingTowardSubmenu) return;
+    this._safeTriangleStallTimer = window.setTimeout(() => {
+      this._safeTriangleStallTimer = null;
+      this._movingTowardSubmenu = false;
+      this._safeTriangleApex = null;
+      if (this._lastCursorPos) this._activateItemAt(this._lastCursorPos);
+    }, _c._SAFE_TRIANGLE_STALL_DISMISS_MS);
+  }
+  /** Schedule submenu close when cursor sits outside the parent menu rect.
+   * No-op if cursor is inside the menu (peer-hover logic handles it) or
+   * if a close is already scheduled. */
+  _safeTriangleMaybeScheduleLingerClose(p) {
+    const submenu = this._safeTriangleSubmenu;
+    if (!submenu) return;
+    const rootRect = this.getBoundingClientRect();
+    const inRoot = _c._rectContainsPoint(rootRect, p);
+    if (!inRoot && this._hoverCloseTimer === null) {
+      this._hoverCloseTimer = window.setTimeout(() => {
+        this._hoverCloseTimer = null;
+        if (this._activeSubmenu === submenu) {
+          submenu.hidePopover?.();
+        }
+      }, _c._SUBMENU_LINGER_CLOSE_MS);
+    }
+  }
+  /** True when the rect contains the point (inclusive). Returns false for
+   * a missing rect or point — convenient for the optional-chained call
+   * sites in the safe-triangle logic. */
+  static _rectContainsPoint(rect, point) {
+    return !!rect && !!point && point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+  }
+  _stopSafeTriangle() {
+    if (this._safeTriangleListener !== null) {
+      window.removeEventListener("mousemove", this._safeTriangleListener);
+      this._safeTriangleListener = null;
+    }
+    if (this._safeTriangleStallTimer !== null) {
+      clearTimeout(this._safeTriangleStallTimer);
+      this._safeTriangleStallTimer = null;
+    }
+    this._lastCursorPos = null;
+    this._safeTriangleApex = null;
+    this._safeTriangleSubmenu = null;
+    this._movingTowardSubmenu = false;
+    this._removeSafeTriangleOverlay();
+  }
+  _renderSafeTriangleOverlay(vertices) {
+    const NS = "http://www.w3.org/2000/svg";
+    if (this._safeTriangleOverlay === null) {
+      const wrapper = document.createElement("div");
+      wrapper.setAttribute("popover", "manual");
+      wrapper.setAttribute("aria-hidden", "true");
+      wrapper.style.cssText = "position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;border:0;padding:0;margin:0;background:transparent;overflow:visible;";
+      const svg2 = document.createElementNS(NS, "svg");
+      svg2.setAttribute("width", "100%");
+      svg2.setAttribute("height", "100%");
+      const polygon2 = document.createElementNS(NS, "polygon");
+      polygon2.setAttribute("fill", "rgba(255, 0, 128, 0.15)");
+      polygon2.setAttribute("stroke", "rgba(255, 0, 128, 0.85)");
+      polygon2.setAttribute("stroke-width", "1");
+      svg2.appendChild(polygon2);
+      wrapper.appendChild(svg2);
+      document.body.appendChild(wrapper);
+      wrapper.showPopover();
+      this._safeTriangleOverlay = wrapper;
+    }
+    const polygon = this._safeTriangleOverlay.querySelector("polygon");
+    polygon.setAttribute("points", vertices.map((v) => `${v.x},${v.y}`).join(" "));
+  }
+  _removeSafeTriangleOverlay() {
+    this._safeTriangleOverlay?.hidePopover?.();
+    this._safeTriangleOverlay?.remove();
+    this._safeTriangleOverlay = null;
+  }
+  _cancelHoverOpen() {
+    if (this._hoverOpenTimer !== null) {
+      clearTimeout(this._hoverOpenTimer);
+      this._hoverOpenTimer = null;
+    }
+  }
+  _cancelHoverClose() {
+    if (this._hoverCloseTimer !== null) {
+      clearTimeout(this._hoverCloseTimer);
+      this._hoverCloseTimer = null;
+    }
+  }
+  /** Recursively checks whether a point sits inside the given menu OR any of
+   * its descendant submenus. Used by the hover guard so a cursor deep inside
+   * a nested submenu still reads as "in the safe area" for ancestor menus —
+   * without this, an ancestor's linger-close fires and cascades the whole
+   * chain shut. */
+  static _isPointInMenuTree(p, menu) {
+    const r = menu.getBoundingClientRect();
+    if (p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom) return true;
+    if (menu._activeSubmenu) return _c._isPointInMenuTree(p, menu._activeSubmenu);
+    return false;
+  }
+  /** Convex point-in-polygon test via consistent edge-cross-product sign.
+   * Vertices must be ordered (clockwise or counter-clockwise). */
+  static _pointInPolygon(p, vertices) {
+    let hasNeg = false;
+    let hasPos = false;
+    for (let i = 0; i < vertices.length; i++) {
+      const a = vertices[i];
+      const b = vertices[(i + 1) % vertices.length];
+      const cross = (p.x - b.x) * (a.y - b.y) - (a.x - b.x) * (p.y - b.y);
+      if (cross < 0) hasNeg = true;
+      if (cross > 0) hasPos = true;
+      if (hasNeg && hasPos) return false;
+    }
+    return true;
+  }
+  static _getDrillInModeQuery() {
+    if (_c._drillInModeQuery === null) {
+      _c._drillInModeQuery = matchMedia(`(pointer: coarse), (max-width: ${breakpoints.smMax})`);
+    }
+    return _c._drillInModeQuery;
+  }
+  get _drillInMode() {
+    return _c._getDrillInModeQuery().matches;
+  }
+  /** Walks the parent-menu chain up to the root (the menu that wasn't
+   * opened by another menu — has no _parentMenu). */
+  get _rootMenu() {
+    let m = this;
+    while (m._parentMenu) m = m._parentMenu;
+    return m;
+  }
+  /** True when this menu is itself a submenu (was opened by another menu's
+   * item). The root menu returns false. */
+  get _isSubmenu() {
+    return this._parentMenu !== null;
+  }
   connectedCallback() {
     super.connectedCallback();
+    if (!this.id) {
+      this.id = `nldd-menu-${_c._menuIdCounter++}`;
+    }
     if (!this.hasAttribute("popover")) {
       this.setAttribute("popover", "");
     }
@@ -3343,19 +4203,35 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     this.addEventListener("mouseenter", this._handleMenuItemMouseenter, true);
     this.addEventListener("mouseleave", this._handleMouseleave);
     this.addEventListener("menu-item-focused", this._handleMenuItemFocused);
+    this.addEventListener("submenu-open", this._handleSubmenuOpen);
+    this.addEventListener("select", this._handleSelectChainClose);
     document.addEventListener("click", this._handleDocumentClick);
+    _c._getDrillInModeQuery().addEventListener("change", this._handleViewportResize);
   }
   firstUpdated() {
     this._updateEmptyState();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    if (this._activeSubmenu) {
+      this._activeSubmenu.hidePopover?.();
+    }
     this.removeEventListener("toggle", this._handleToggle);
     this.removeEventListener("keydown", this._handleKeydown);
     this.removeEventListener("mouseenter", this._handleMenuItemMouseenter, true);
     this.removeEventListener("mouseleave", this._handleMouseleave);
     this.removeEventListener("menu-item-focused", this._handleMenuItemFocused);
+    this.removeEventListener("submenu-open", this._handleSubmenuOpen);
+    this.removeEventListener("select", this._handleSelectChainClose);
     document.removeEventListener("click", this._handleDocumentClick);
+    _c._getDrillInModeQuery().removeEventListener("change", this._handleViewportResize);
+    this._cancelHoverOpen();
+    this._cancelHoverClose();
+    this._stopSafeTriangle();
+    if (this._typeaheadTimer !== null) {
+      clearTimeout(this._typeaheadTimer);
+      this._typeaheadTimer = null;
+    }
     this._cleanupAutoUpdate?.();
     this._cleanupAutoUpdate = null;
   }
@@ -3363,15 +4239,13 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
   _getVisibleItems() {
     return Array.from(
       this.querySelectorAll("nldd-menu-item:not([hidden]):not([disabled])")
-    );
+    ).filter((item) => item.closest("nldd-menu") === this);
   }
   _getFocusedIndex(items) {
     return items.findIndex((item) => item.hasAttribute("data-focused"));
   }
   _clearHighlight() {
-    Array.from(this.querySelectorAll("nldd-menu-item")).forEach((item) => {
-      item.removeAttribute("highlighted");
-    });
+    Array.from(this.querySelectorAll("nldd-menu-item")).filter((item) => item.closest("nldd-menu") === this).forEach((item) => item.removeAttribute("highlighted"));
   }
   _setHighlight(target) {
     this._clearHighlight();
@@ -3394,7 +4268,8 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
       const isFirst = index === 0;
       const isLast = index === visible.length - 1;
       const prevIsDivider = index > 0 && visible[index - 1].tagName.toLowerCase() === "nldd-menu-divider";
-      if (isFirst || isLast || prevIsDivider) {
+      const nextIsGroup = index < visible.length - 1 && visible[index + 1].tagName.toLowerCase() === "nldd-menu-group";
+      if (isFirst || isLast || prevIsDivider || nextIsGroup) {
         el.setAttribute("hidden", "");
       }
     });
@@ -3416,11 +4291,24 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
       item.toggleAttribute("hidden", !matches);
       item.query = matches && query2 ? query2 : "";
     });
+    this._updateGroupVisibility();
     this._setHighlight(null);
     this._updateEmptyState();
     this._updateDividerVisibility();
     if (this._isOpen) this.reposition();
   }
+  /**
+   * Hide each nldd-menu-group whose items are all filtered out — a labelled
+   * heading above an empty section reads as broken. Runs after filter() has
+   * updated individual item visibility.
+   */
+  _updateGroupVisibility() {
+    const groups = this.querySelectorAll("nldd-menu-group");
+    groups.forEach((group) => {
+      const visibleItems = group.querySelectorAll("nldd-menu-item:not([hidden])");
+      group.toggleAttribute("hidden", visibleItems.length === 0);
+    });
+  }
   /**
    * Move both focus and highlight to the next, previous, or first visible item.
    */
@@ -3476,10 +4364,11 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
     const viewportMargin = parseInt(
       getComputedStyle(this).getPropertyValue("--_viewport-margin")
     );
+    const submenuPadding = this._isSubmenu && !this._drillInMode ? parseInt(getComputedStyle(this).getPropertyValue("--_menu-padding")) || 0 : 0;
     const { x, y } = await computePosition(anchorEl, this, {
       placement: this.placement,
       middleware: [
-        offset(0),
+        offset({ mainAxis: 0, alignmentAxis: -submenuPadding }),
         flip({ padding: viewportMargin }),
         shift({ padding: viewportMargin }),
         size({
@@ -3495,45 +4384,81 @@ const _NLDDMenu = class _NLDDMenu extends LitElement {
       top: `${y}px`
     });
   }
+  /**
+   * ARIA APG typeahead: characters typed within 500ms accumulate into a
+   * buffer; the menu jumps to the first item whose text starts with the
+   * buffer (case-insensitive).
+   *
+   * Single-char buffer (first press or after reset) cycles through matches
+   * — repeated presses of the same letter step through every item starting
+   * with it. Multi-char buffer matches from the currently-focused item, so
+   * extending the prefix while the current item still matches keeps focus
+   * stable instead of jumping forward.
+   */
+  _handleTypeahead(event, items, currentIndex) {
+    if (this._typeaheadTimer !== null) {
+      clearTimeout(this._typeaheadTimer);
+    }
+    this._typeaheadBuffer += event.key.toLowerCase();
+    this._typeaheadTimer = window.setTimeout(() => {
+      this._typeaheadBuffer = "";
+      this._typeaheadTimer = null;
+    }, _c._TYPEAHEAD_RESET_MS);
+    const start = this._typeaheadBuffer.length === 1 && currentIndex >= 0 ? currentIndex + 1 : Math.max(0, currentIndex);
+    for (let i = 0; i < items.length; i++) {
+      const idx = (start + i) % items.length;
+      if (items[idx].text.toLowerCase().startsWith(this._typeaheadBuffer)) {
+        event.preventDefault();
+        event.stopPropagation();
+        items[idx].focus();
+        return;
+      }
+    }
+  }
   render() {
     return menuTemplate.call(this, this._isEmpty, this.variant);
   }
-};
-_NLDDMenu.styles = menuStyles;
-let NLDDMenu = _NLDDMenu;
+}, _c.styles = menuStyles, _c._SUBMENU_LINGER_CLOSE_MS = 300, _c._SAFE_TRIANGLE_STALL_DISMISS_MS = 750, _c._SAFE_TRIANGLE_APEX_X_OFFSET = 4, _c._drillInModeQuery = null, _c._menuIdCounter = 0, _c._TYPEAHEAD_RESET_MS = 500, _c);
 __decorateClass$18([
   property({ type: String, reflect: true })
-], NLDDMenu.prototype, "anchor");
+], _NLDDMenu.prototype, "anchor");
 __decorateClass$18([
   property({ attribute: false })
-], NLDDMenu.prototype, "anchorElement");
+], _NLDDMenu.prototype, "anchorElement");
 __decorateClass$18([
   property({ type: String, reflect: true })
-], NLDDMenu.prototype, "placement");
+], _NLDDMenu.prototype, "placement");
 __decorateClass$18([
   property({ type: String, reflect: true })
-], NLDDMenu.prototype, "variant");
+], _NLDDMenu.prototype, "variant");
 __decorateClass$18([
   property({ type: String, attribute: "empty-text" })
-], NLDDMenu.prototype, "emptyText");
+], _NLDDMenu.prototype, "emptyText");
 __decorateClass$18([
   property({ type: String, attribute: "empty-supporting-text" })
-], NLDDMenu.prototype, "emptySupportingText");
+], _NLDDMenu.prototype, "emptySupportingText");
 __decorateClass$18([
   property({ type: String, reflect: true })
-], NLDDMenu.prototype, "width");
+], _NLDDMenu.prototype, "width");
 __decorateClass$18([
   property({ type: Number, attribute: "max-items" })
-], NLDDMenu.prototype, "maxItems");
+], _NLDDMenu.prototype, "maxItems");
 __decorateClass$18([
   property({ type: Object })
-], NLDDMenu.prototype, "translations");
+], _NLDDMenu.prototype, "translations");
+__decorateClass$18([
+  property({ type: Boolean, reflect: true, attribute: "debug-safe-triangle" })
+], _NLDDMenu.prototype, "debugSafeTriangle");
 __decorateClass$18([
   property({ attribute: false })
-], NLDDMenu.prototype, "filterFn");
+], _NLDDMenu.prototype, "filterFn");
+__decorateClass$18([
+  state()
+], _NLDDMenu.prototype, "_isEmpty");
 __decorateClass$18([
   state()
-], NLDDMenu.prototype, "_isEmpty");
+], _NLDDMenu.prototype, "_parentItem");
+let NLDDMenu = _NLDDMenu;
 if (!customElements.get("nldd-menu")) {
   customElements.define("nldd-menu", NLDDMenu);
 }
@@ -4804,13 +5729,34 @@ NLDDToolbar = __decorateClass$15([
 const linkStyles = css`
 
 
-	/* # Host */
+	/* # Host
+	 *
+	 * Inherit mode (no [size] attribute, or [size="inherit"]): display is
+	 * inline so the link wraps naturally inside running text and inherits
+	 * font-size / line-height / font-family from its surroundings. Icons are
+	 * supported via the inline whitespace between icon span and label span,
+	 * which provides natural single-space separation.
+	 *
+	 * Sized mode (xs/sm/md/lg): display becomes inline-flex so start/end
+	 * icons can be aligned to the text baseline with explicit gap spacing.
+	 */
 
 	:host {
-		display: inline-flex;
 		-webkit-tap-highlight-color: transparent;
 	}
 
+	:host(:not([size])),
+	:host([size="inherit"]) {
+		display: inline;
+	}
+
+	:host([size="xs"]),
+	:host([size="sm"]),
+	:host([size="md"]),
+	:host([size="lg"]) {
+		display: inline-flex;
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -4827,30 +5773,40 @@ const linkStyles = css`
 		appearance: none;
 		background: none;
 		color: var(--semantics-links-color);
-		display: inline-flex;
-		align-items: center;
 		text-decoration: none;
 		border-radius: var(--primitives-corner-radius-xs);
 		transition: color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
 	}
 
+	:host(:not([size])) .link,
+	:host([size="inherit"]) .link {
+		display: inline;
+	}
+
 	:host([size="xs"]) .link {
+		display: inline-flex;
+		align-items: center;
 		gap: var(--primitives-space-4);
 		font: var(--primitives-font-body-xs-regular-flat);
 	}
 
 	:host([size="sm"]) .link {
+		display: inline-flex;
+		align-items: center;
 		gap: var(--primitives-space-4);
 		font: var(--primitives-font-body-sm-regular-flat);
 	}
 
-	:host([size="md"]) .link,
-	:host(:not([size])) .link {
+	:host([size="md"]) .link {
+		display: inline-flex;
+		align-items: center;
 		gap: var(--primitives-space-6);
 		font: var(--primitives-font-body-md-regular-flat);
 	}
 
 	:host([size="lg"]) .link {
+		display: inline-flex;
+		align-items: center;
 		gap: var(--primitives-space-6);
 		font: var(--primitives-font-body-lg-regular-flat);
 	}
@@ -4903,6 +5859,13 @@ const linkStyles = css`
 		height: 1em;
 	}
 
+	:host(:not([size])) .link__start-icon,
+	:host([size="inherit"]) .link__start-icon,
+	:host(:not([size])) .link__end-icon,
+	:host([size="inherit"]) .link__end-icon {
+		top: 0.2em;
+	}
+
 
 	/* # Toegankelijkheid */
 
@@ -4926,17 +5889,11 @@ function template$e(helpers) {
 			@click=${helpers.handleClick}
 		>
 			${this.startIcon ? html`
-				<span class="link__start-icon">
-					<nldd-icon name=${this.startIcon}></nldd-icon>
-				</span>
+				<span class="link__start-icon"><nldd-icon name=${this.startIcon}></nldd-icon></span>
 			` : html`<slot name="start-icon"></slot>`}
-			<span class="link__label">
-				${this.text ? this.text : html`<slot></slot>`}
-			</span>
+			<span class="link__label">${this.text ? this.text : html`<slot></slot>`}</span>
 			${this.endIcon ? html`
-				<span class="link__end-icon">
-					<nldd-icon name=${this.endIcon}></nldd-icon>
-				</span>
+				<span class="link__end-icon"><nldd-icon name=${this.endIcon}></nldd-icon></span>
 			` : html`<slot name="end-icon"></slot>`}
 		</a>
 	`;
@@ -4957,7 +5914,6 @@ let NLDDLink = class extends LitElement {
     this.href = void 0;
     this.target = void 0;
     this.rel = void 0;
-    this.size = "md";
     this.text = "";
     this.startIcon = "";
     this.endIcon = "";
@@ -5041,16 +5997,10 @@ __decorateClass$13([
 NLDDRichText = __decorateClass$13([
   customElement("nldd-rich-text")
 ], NLDDRichText);
-const breakpoints = {
-  smMax: "640px",
-  mdMin: "641px",
-  mdMax: "1007px",
-  lgMin: "1008px"
-};
-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 smMax$d = unsafeCSS(breakpoints.smMax);
+const mdMin$e = unsafeCSS(breakpoints.mdMin);
+const mdMax$9 = unsafeCSS(breakpoints.mdMax);
+const lgMin$b = unsafeCSS(breakpoints.lgMin);
 const titleStyles = css`
 
 
@@ -5106,158 +6056,158 @@ const titleStyles = css`
 	}
 
 	:host([size='1']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$c}) {
+		@media (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@media (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
-		@media (min-width: ${lgMin$a}) {
+		@media (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-1-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$c}) {
+		@container layout-area (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-1-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-1-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$a}) {
+		@container layout-area (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-1-lg);
 		}
 	}
 
 	:host([size='2']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$c}) {
+		@media (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@media (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
-		@media (min-width: ${lgMin$a}) {
+		@media (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-2-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$c}) {
+		@container layout-area (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-2-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-2-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$a}) {
+		@container layout-area (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-2-lg);
 		}
 	}
 
 	:host([size='3']) ::slotted(:not([slot])),
 	:host(:not([size])) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$c}) {
+		@media (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@media (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
-		@media (min-width: ${lgMin$a}) {
+		@media (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-3-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$c}) {
+		@container layout-area (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-3-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-3-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$a}) {
+		@container layout-area (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-3-lg);
 		}
 	}
 
 	:host([size='4']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$c}) {
+		@media (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@media (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
-		@media (min-width: ${lgMin$a}) {
+		@media (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-4-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$c}) {
+		@container layout-area (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-4-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-4-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$a}) {
+		@container layout-area (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-4-lg);
 		}
 	}
 
 	:host([size='5']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$c}) {
+		@media (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@media (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
-		@media (min-width: ${lgMin$a}) {
+		@media (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-5-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$c}) {
+		@container layout-area (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-5-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-5-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$a}) {
+		@container layout-area (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-5-lg);
 		}
 	}
 
 	:host([size='6']) ::slotted(:not([slot])) {
-		@media (max-width: ${smMax$c}) {
+		@media (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@media (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
-		@media (min-width: ${lgMin$a}) {
+		@media (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-6-lg);
 		}
 
-		@container layout-area (max-width: ${smMax$c}) {
+		@container layout-area (max-width: ${smMax$d}) {
 			font: var(--primitives-font-display-6-sm);
 		}
 
-		@container layout-area (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
+		@container layout-area (min-width: ${mdMin$e}) and (max-width: ${mdMax$9}) {
 			font: var(--primitives-font-display-6-md);
 		}
 
-		@container layout-area (min-width: ${lgMin$a}) {
+		@container layout-area (min-width: ${lgMin$b}) {
 			font: var(--primitives-font-display-6-lg);
 		}
 	}
@@ -5323,7 +6273,7 @@ __decorateClass$12([
 NLDDTitle = __decorateClass$12([
   customElement("nldd-title")
 ], NLDDTitle);
-const smMax$b = unsafeCSS(breakpoints.smMax);
+const smMax$c = unsafeCSS(breakpoints.smMax);
 const blockquoteStyles = css`
 
 
@@ -5338,7 +6288,7 @@ const blockquoteStyles = css`
 		max-width: var(--semantics-blockquotes-max-width);
 	}
 
-	@media (max-width: ${smMax$b}) {
+	@media (max-width: ${smMax$c}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -5346,7 +6296,7 @@ const blockquoteStyles = css`
 		}
 	}
 
-	@container layout-area (max-width: ${smMax$b}) {
+	@container layout-area (max-width: ${smMax$c}) {
 		:host {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
@@ -7418,7 +8368,7 @@ const GRAMMAR_LOADERS = {
   yaml: () => import("./prism-yaml-DO0f9pf6.js"),
   json: () => import("./prism-json-DIMpow89.js"),
   javascript: () => import("./prism-javascript-DeC_17Pw.js"),
-  typescript: () => import("./prism-typescript-9LDqHHRS.js").then((n) => n.p),
+  typescript: () => import("./prism-typescript-Cdpexfvg.js").then((n) => n.p),
   css: () => import("./prism-css-B93tXdOU.js"),
   html: () => import("./prism-markup-DfJYPYHA.js"),
   bash: () => import("./prism-bash-vbqaw3JR.js"),
@@ -7936,7 +8886,7 @@ const formFieldErrorTextStyles = css`
 
 	.form-field__error-text {
 		margin: 0;
-		color: var(--semantics-content-error-color);
+		color: var(--semantics-content-critical-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
 
@@ -8620,12 +9570,16 @@ let NLDDTextField = class extends LitElement {
       composed: true
     }));
   }
-  focus() {
-    this._input?.focus();
-  }
   blur() {
     this._input?.blur();
   }
+  /**
+   * Delegates focus to the inner native `<input>`, so consumers can call
+   * `textFieldEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this._input?.focus(options);
+  }
   render() {
     return textFieldTemplate(this);
   }
@@ -10069,6 +11023,13 @@ let NLDDSearchField = class extends LitElement {
       composed: true
     }));
   }
+  /**
+   * Delegates focus to the inner native `<input>`, so consumers can call
+   * `searchFieldEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this._input?.focus(options);
+  }
   render() {
     return searchFieldTemplate(this);
   }
@@ -10429,6 +11390,13 @@ let NLDDNumberField = class extends LitElement {
   _clamp(value) {
     return Math.max(this.min, Math.min(this.max, value));
   }
+  /**
+   * Delegates focus to the inner native `<input>`, so consumers can call
+   * `numberFieldEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this.shadowRoot?.querySelector(".number-field__input")?.focus(options);
+  }
   render() {
     return numberFieldTemplate(this);
   }
@@ -10688,7 +11656,7 @@ function dropdownTemplate(component) {
 			<span class="dropdown__value">${component._displayValue}</span>
 			${renderValidationIcon$1(component)}
 			<div class="dropdown__picker-icon">
-				<nldd-icon name="chevron-up-down"></nldd-icon>
+				<nldd-icon name="chevron-up-chevron-down"></nldd-icon>
 			</div>
 		</div>
 	`;
@@ -11021,7 +11989,7 @@ function comboBoxTemplate(component) {
 				aria-haspopup="listbox"
 				aria-activedescendant=${component._highlightedId || nothing}
 				aria-invalid=${component.invalid ? "true" : nothing}
-				.value=${component._displayValue}
+				.value=${component.text}
 				placeholder=${component.placeholder || nothing}
 				?disabled=${component.disabled}
 				name=${component.name || nothing}
@@ -11032,7 +12000,7 @@ function comboBoxTemplate(component) {
 			>
 			<div class="combo-box__input-fade"></div>
 			<div class="combo-box__end">
-				${component._displayValue ? html`
+				${component.text ? html`
 					<div class="combo-box__clear-button">
 						<nldd-icon-button
 							variant="neutral-transparent"
@@ -11082,8 +12050,9 @@ let NLDDComboBox = class extends LitElement {
     super(...arguments);
     this._internals = this.attachInternals();
     this._initialValue = "";
-    this._initialDisplayValue = "";
+    this._initialText = "";
     this.value = "";
+    this.text = "";
     this.placeholder = "";
     this.size = "md";
     this.valid = false;
@@ -11096,7 +12065,6 @@ let NLDDComboBox = class extends LitElement {
     this.translations = {};
     this.width = "";
     this._isOpen = false;
-    this._displayValue = "";
     this._highlightedId = "";
     this._menuId = `nldd-combo-box-menu-${NLDDComboBox._idCounter++}`;
     this._menu = null;
@@ -11118,7 +12086,7 @@ let NLDDComboBox = class extends LitElement {
     };
     this._handleMenuSelect = (e) => {
       const item = e.target;
-      this._displayValue = item.text;
+      this.text = item.text;
       this.value = item.value || item.text;
       this._highlightedId = "";
       this._closeMenu();
@@ -11145,7 +12113,12 @@ let NLDDComboBox = class extends LitElement {
   // — Lifecycle ————————————————————————————————————————————————————————————
   firstUpdated() {
     this._initialValue = this.value;
-    this._initialDisplayValue = this._displayValue;
+    this._initialText = this.text;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value") && !changedProperties.has("text")) {
+      this._deriveTextFromMenu();
+    }
   }
   updated(changedProperties) {
     if (changedProperties.has("maxItems") && this._menu) {
@@ -11154,16 +12127,16 @@ let NLDDComboBox = class extends LitElement {
     if (changedProperties.has("width")) {
       this.style.width = this.width || "";
     }
-    if (changedProperties.has("value") || changedProperties.has("_displayValue")) {
+    if (changedProperties.has("value") || changedProperties.has("text")) {
       const state2 = new FormData();
       state2.append("value", this.value);
-      state2.append("display", this._displayValue);
+      state2.append("display", this.text);
       this._internals.setFormValue(this.value, state2);
     }
   }
   formResetCallback() {
     this.value = this._initialValue;
-    this._displayValue = this._initialDisplayValue;
+    this.text = this._initialText;
   }
   formDisabledCallback(disabled) {
     this.disabled = disabled;
@@ -11171,10 +12144,10 @@ let NLDDComboBox = class extends LitElement {
   formStateRestoreCallback(state2) {
     if (state2 instanceof FormData) {
       this.value = String(state2.get("value") ?? "");
-      this._displayValue = String(state2.get("display") ?? "");
+      this.text = String(state2.get("display") ?? "");
     } else if (typeof state2 === "string") {
       this.value = state2;
-      this._displayValue = state2;
+      this.text = state2;
     }
   }
   connectedCallback() {
@@ -11212,6 +12185,24 @@ let NLDDComboBox = class extends LitElement {
     menu.addEventListener("select", this._handleMenuSelect);
     menu.addEventListener("keydown", this._handleMenuKeydown);
     this._updateMenuWidth();
+    if (this.value && !this.text) {
+      this._deriveTextFromMenu();
+    }
+  }
+  /**
+   * Walk slotted menu items and set `text` from the first item whose `value`
+   * (or `text`, when value is unset) matches the current `value`. No-op when
+   * the menu isn't wired yet or no item matches.
+   */
+  _deriveTextFromMenu() {
+    if (!this._menu || !this.value) return;
+    const items = Array.from(this._menu.querySelectorAll("nldd-menu-item")).filter((item) => item.closest("nldd-menu") === this._menu);
+    for (const item of items) {
+      if ((item.value || item.text) === this.value) {
+        this.text = item.text;
+        return;
+      }
+    }
   }
   // — Menu width & position ————————————————————————————————————————————————
   _updateMenuWidth() {
@@ -11259,18 +12250,18 @@ let NLDDComboBox = class extends LitElement {
   }
   _handleInput(e) {
     const input = e.target;
-    this._displayValue = input.value;
-    this._menu?.filter(this._displayValue);
+    this.text = input.value;
+    this._menu?.filter(this.text);
     this._updateActiveDescendant();
     if (!this._isOpen) this._openMenu();
     this.dispatchEvent(new CustomEvent("input", {
-      detail: { value: this._displayValue },
+      detail: { value: this.text },
       bubbles: true,
       composed: true
     }));
   }
   _handleClear() {
-    this._displayValue = "";
+    this.text = "";
     this.value = "";
     this._menu?.filter("");
     this._closeMenu();
@@ -11292,8 +12283,8 @@ let NLDDComboBox = class extends LitElement {
     if (!relatedTarget || !this._menu?.contains(relatedTarget)) {
       this._closeMenu();
     }
-    if (this._displayValue !== "" && this._displayValue !== this.value) {
-      this.value = this._displayValue;
+    if (this.text !== "" && this.text !== this.value) {
+      this.value = this.text;
       this.dispatchEvent(new CustomEvent("change", {
         detail: { value: this.value },
         bubbles: true,
@@ -11326,7 +12317,7 @@ let NLDDComboBox = class extends LitElement {
         if (highlighted) {
           highlighted.select();
         } else {
-          this.value = this._displayValue;
+          this.value = this.text;
           this._closeMenu();
           this.dispatchEvent(new CustomEvent("change", {
             detail: { value: this.value },
@@ -11342,6 +12333,13 @@ let NLDDComboBox = class extends LitElement {
         break;
     }
   }
+  /**
+   * Delegates focus to the inner native `<input>`, so consumers can call
+   * `comboBoxEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this._input?.focus(options);
+  }
   render() {
     return comboBoxTemplate(this);
   }
@@ -11352,6 +12350,9 @@ NLDDComboBox._idCounter = 0;
 __decorateClass$P([
   property({ type: String })
 ], NLDDComboBox.prototype, "value", 2);
+__decorateClass$P([
+  property({ type: String })
+], NLDDComboBox.prototype, "text", 2);
 __decorateClass$P([
   property({ type: String })
 ], NLDDComboBox.prototype, "placeholder", 2);
@@ -11388,9 +12389,6 @@ __decorateClass$P([
 __decorateClass$P([
   state()
 ], NLDDComboBox.prototype, "_isOpen", 2);
-__decorateClass$P([
-  state()
-], NLDDComboBox.prototype, "_displayValue", 2);
 __decorateClass$P([
   state()
 ], NLDDComboBox.prototype, "_highlightedId", 2);
@@ -12807,6 +13805,13 @@ let NLDDSwitch = class extends LitElement {
       composed: true
     }));
   }
+  /**
+   * Delegates focus to the inner native checkbox `<input>`, so consumers can
+   * call `switchEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this.shadowRoot?.querySelector(".switch__input")?.focus(options);
+  }
   render() {
     return switchTemplate(this);
   }
@@ -12938,6 +13943,14 @@ let NLDDSwitchField = class extends LitElement {
       composed: true
     }));
   }
+  /**
+   * Delegates focus to the inner `<nldd-switch>`, which in turn focuses its
+   * native checkbox input. Lets consumers call `switchFieldEl.focus()` without
+   * reaching into shadow DOM.
+   */
+  focus(options) {
+    this.shadowRoot?.querySelector("nldd-switch")?.focus(options);
+  }
   render() {
     return switchFieldTemplate(this);
   }
@@ -14690,10 +15703,10 @@ __decorateClass$A([
 NLDDBarSplitView = __decorateClass$A([
   customElement("nldd-bar-split-view")
 ], NLDDBarSplitView);
-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 smMax$b = unsafeCSS(breakpoints.smMax);
+const mdMin$d = unsafeCSS(breakpoints.mdMin);
+const mdMax$8 = unsafeCSS(breakpoints.mdMax);
+const lgMin$a = unsafeCSS(breakpoints.lgMin);
 const navigationSplitViewStyles = css`
 
 
@@ -14825,7 +15838,7 @@ const navigationSplitViewStyles = css`
 		position: fixed;
 		outline: none;
 
-		@media (max-width: ${smMax$a}) {
+		@media (max-width: ${smMax$b}) {
 			inset: auto 0 0 0;
 			width: 100%;
 			max-width: 100%;
@@ -14834,14 +15847,14 @@ const navigationSplitViewStyles = css`
 			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
 		}
 
-		@media (min-width: ${mdMin$c}) and (max-width: ${mdMax$7}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			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}) {
+		@media (min-width: ${lgMin$a}) {
 			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);
@@ -14863,21 +15876,21 @@ const navigationSplitViewStyles = css`
 		}
 
 		&[open] {
-			@media (max-width: ${smMax$a}) {
+			@media (max-width: ${smMax$b}) {
 				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 
-			@media (min-width: ${mdMin$c}) {
+			@media (min-width: ${mdMin$d}) {
 				animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 		}
 
 		&.is-closing {
-			@media (max-width: ${smMax$a}) {
+			@media (max-width: ${smMax$b}) {
 				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 
-			@media (min-width: ${mdMin$c}) {
+			@media (min-width: ${mdMin$d}) {
 				animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 		}
@@ -14916,7 +15929,7 @@ const navigationSplitViewStyles = css`
 		position: fixed;
 		outline: none;
 
-		@media (max-width: ${smMax$a}) {
+		@media (max-width: ${smMax$b}) {
 			inset: auto 0 0 0;
 			width: 100%;
 			max-width: 100%;
@@ -14925,14 +15938,14 @@ const navigationSplitViewStyles = css`
 			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
 		}
 
-		@media (min-width: ${mdMin$c}) and (max-width: ${mdMax$7}) {
+		@media (min-width: ${mdMin$d}) and (max-width: ${mdMax$8}) {
 			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}) {
+		@media (min-width: ${lgMin$a}) {
 			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);
@@ -14954,21 +15967,21 @@ const navigationSplitViewStyles = css`
 		}
 
 		&[open] {
-			@media (max-width: ${smMax$a}) {
+			@media (max-width: ${smMax$b}) {
 				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 
-			@media (min-width: ${mdMin$c}) {
+			@media (min-width: ${mdMin$d}) {
 				animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 		}
 
 		&.is-closing {
-			@media (max-width: ${smMax$a}) {
+			@media (max-width: ${smMax$b}) {
 				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 
-			@media (min-width: ${mdMin$c}) {
+			@media (min-width: ${mdMin$d}) {
 				animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 		}
@@ -15660,7 +16673,7 @@ __decorateClass$x([
 NLDDStackedSplitView = __decorateClass$x([
   customElement("nldd-stacked-split-view")
 ], NLDDStackedSplitView);
-const mdMin$b = unsafeCSS(breakpoints.mdMin);
+const mdMin$c = unsafeCSS(breakpoints.mdMin);
 const splitViewPaneStyles = css`
 
 
@@ -15673,7 +16686,7 @@ const splitViewPaneStyles = css`
 		width: 100%;
 		height: 100%;
 
-		@media (min-width: ${mdMin$b}) {
+		@media (min-width: ${mdMin$c}) {
 			background-color: var(--_background-color);
 		}
 	}
@@ -16059,10 +17072,10 @@ const page = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
     return NLDDPage;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-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 smMax$a = unsafeCSS(breakpoints.smMax);
+const mdMin$b = unsafeCSS(breakpoints.mdMin);
+const mdMax$7 = unsafeCSS(breakpoints.mdMax);
+const lgMin$9 = unsafeCSS(breakpoints.lgMin);
 const simpleSectionStyles = css`
 
 
@@ -16104,32 +17117,32 @@ const simpleSectionStyles = css`
 		width: 100%;
 		box-sizing: border-box;
 
-		@media (max-width: ${smMax$9}) {
+		@media (max-width: ${smMax$a}) {
 			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}) {
+		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@media (min-width: ${lgMin$8}) {
+		@media (min-width: ${lgMin$9}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$9}) {
+		@container layout-area (max-width: ${smMax$a}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
+		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@container layout-area (min-width: ${lgMin$8}) {
+		@container layout-area (min-width: ${lgMin$9}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -16152,27 +17165,27 @@ const simpleSectionStyles = css`
 		width: 100%;
 		max-width: var(--_max-width);
 
-		@media (max-width: ${smMax$9}) {
+		@media (max-width: ${smMax$a}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
+		@media (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$8}) {
+		@media (min-width: ${lgMin$9}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$9}) {
+		@container layout-area (max-width: ${smMax$a}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
+		@container layout-area (min-width: ${mdMin$b}) and (max-width: ${mdMax$7}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$8}) {
+		@container layout-area (min-width: ${lgMin$9}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16247,10 +17260,10 @@ const simpleSection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
     return NLDDSimpleSection;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-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 smMax$9 = unsafeCSS(breakpoints.smMax);
+const mdMin$a = unsafeCSS(breakpoints.mdMin);
+const mdMax$6 = unsafeCSS(breakpoints.mdMax);
+const lgMin$8 = unsafeCSS(breakpoints.lgMin);
 const fullBleedSectionStyles = css`
 
 
@@ -16286,27 +17299,27 @@ const fullBleedSectionStyles = css`
 		width: 100%;
 		box-sizing: border-box;
 
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$9}) {
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@media (min-width: ${lgMin$7}) {
+		@media (min-width: ${lgMin$8}) {
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$9}) {
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@container layout-area (min-width: ${lgMin$7}) {
+		@container layout-area (min-width: ${lgMin$8}) {
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 	}
@@ -16328,27 +17341,27 @@ const fullBleedSectionStyles = css`
 		width: 100%;
 		max-width: var(--_max-width);
 
-		@media (max-width: ${smMax$8}) {
+		@media (max-width: ${smMax$9}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@media (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$7}) {
+		@media (min-width: ${lgMin$8}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$8}) {
+		@container layout-area (max-width: ${smMax$9}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
+		@container layout-area (min-width: ${mdMin$a}) and (max-width: ${mdMax$6}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$7}) {
+		@container layout-area (min-width: ${lgMin$8}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16417,10 +17430,10 @@ __decorateClass$t([
 NLDDFullBleedSection = __decorateClass$t([
   customElement("nldd-full-bleed-section")
 ], NLDDFullBleedSection);
-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 smMax$8 = unsafeCSS(breakpoints.smMax);
+const mdMin$9 = unsafeCSS(breakpoints.mdMin);
+const mdMax$5 = unsafeCSS(breakpoints.mdMax);
+const lgMin$7 = unsafeCSS(breakpoints.lgMin);
 const oneThirdTwoThirdsSectionStyles = css`
 
 
@@ -16456,32 +17469,32 @@ const oneThirdTwoThirdsSectionStyles = css`
 		width: 100%;
 		box-sizing: border-box;
 
-		@media (max-width: ${smMax$7}) {
+		@media (max-width: ${smMax$8}) {
 			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}) {
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@media (min-width: ${lgMin$6}) {
+		@media (min-width: ${lgMin$7}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$7}) {
+		@container layout-area (max-width: ${smMax$8}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
 			padding-block: var(--semantics-page-sections-sm-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
-		@container layout-area (min-width: ${lgMin$6}) {
+		@container layout-area (min-width: ${lgMin$7}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -16496,27 +17509,27 @@ const oneThirdTwoThirdsSectionStyles = css`
 		width: 100%;
 		max-width: var(--_max-width);
 
-		@media (max-width: ${smMax$7}) {
+		@media (max-width: ${smMax$8}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$6}) {
+		@media (min-width: ${lgMin$7}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$7}) {
+		@container layout-area (max-width: ${smMax$8}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$6}) {
+		@container layout-area (min-width: ${lgMin$7}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16528,27 +17541,27 @@ const oneThirdTwoThirdsSectionStyles = css`
 		display: flex;
 		flex-wrap: wrap;
 
-		@media (max-width: ${smMax$7}) {
+		@media (max-width: ${smMax$8}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@media (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$6}) {
+		@media (min-width: ${lgMin$7}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$7}) {
+		@container layout-area (max-width: ${smMax$8}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
+		@container layout-area (min-width: ${mdMin$9}) and (max-width: ${mdMax$5}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$6}) {
+		@container layout-area (min-width: ${lgMin$7}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16608,10 +17621,10 @@ __decorateClass$s([
 NLDDOneThirdTwoThirdsSection = __decorateClass$s([
   customElement("nldd-one-third-two-thirds-section")
 ], NLDDOneThirdTwoThirdsSection);
-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 smMax$7 = unsafeCSS(breakpoints.smMax);
+const mdMin$8 = unsafeCSS(breakpoints.mdMin);
+const mdMax$4 = unsafeCSS(breakpoints.mdMax);
+const lgMin$6 = unsafeCSS(breakpoints.lgMin);
 const twoThirdsOneThirdSectionStyles = css`
 
 
@@ -16647,32 +17660,32 @@ const twoThirdsOneThirdSectionStyles = css`
 		width: 100%;
 		box-sizing: border-box;
 
-		@media (max-width: ${smMax$6}) {
+		@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$7}) and (max-width: ${mdMax$3}) {
+		@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);
 		}
 
-		@media (min-width: ${lgMin$5}) {
+		@media (min-width: ${lgMin$6}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$6}) {
+		@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$7}) and (max-width: ${mdMax$3}) {
+		@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);
 		}
 
-		@container layout-area (min-width: ${lgMin$5}) {
+		@container layout-area (min-width: ${lgMin$6}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -16687,27 +17700,27 @@ const twoThirdsOneThirdSectionStyles = css`
 		width: 100%;
 		max-width: var(--_max-width);
 
-		@media (max-width: ${smMax$6}) {
+		@media (max-width: ${smMax$7}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$5}) {
+		@media (min-width: ${lgMin$6}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$6}) {
+		@container layout-area (max-width: ${smMax$7}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$5}) {
+		@container layout-area (min-width: ${lgMin$6}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16719,27 +17732,27 @@ const twoThirdsOneThirdSectionStyles = css`
 		display: flex;
 		flex-wrap: wrap;
 
-		@media (max-width: ${smMax$6}) {
+		@media (max-width: ${smMax$7}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
+		@media (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$5}) {
+		@media (min-width: ${lgMin$6}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$6}) {
+		@container layout-area (max-width: ${smMax$7}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
+		@container layout-area (min-width: ${mdMin$8}) and (max-width: ${mdMax$4}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$5}) {
+		@container layout-area (min-width: ${lgMin$6}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16799,10 +17812,10 @@ __decorateClass$r([
 NLDDTwoThirdsOneThirdSection = __decorateClass$r([
   customElement("nldd-two-thirds-one-third-section")
 ], NLDDTwoThirdsOneThirdSection);
-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 smMax$6 = unsafeCSS(breakpoints.smMax);
+const mdMin$7 = unsafeCSS(breakpoints.mdMin);
+const mdMax$3 = unsafeCSS(breakpoints.mdMax);
+const lgMin$5 = unsafeCSS(breakpoints.lgMin);
 const oneHalfOneHalfSectionStyles = css`
 
 
@@ -16838,32 +17851,32 @@ const oneHalfOneHalfSectionStyles = css`
 		width: 100%;
 		box-sizing: border-box;
 
-		@media (max-width: ${smMax$5}) {
+		@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$6}) and (max-width: ${mdMax$2}) {
+		@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);
 		}
 
-		@media (min-width: ${lgMin$4}) {
+		@media (min-width: ${lgMin$5}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax$5}) {
+		@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$6}) and (max-width: ${mdMax$2}) {
+		@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);
 		}
 
-		@container layout-area (min-width: ${lgMin$4}) {
+		@container layout-area (min-width: ${lgMin$5}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -16878,27 +17891,27 @@ const oneHalfOneHalfSectionStyles = css`
 		width: 100%;
 		max-width: var(--_max-width);
 
-		@media (max-width: ${smMax$5}) {
+		@media (max-width: ${smMax$6}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$4}) {
+		@media (min-width: ${lgMin$5}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$5}) {
+		@container layout-area (max-width: ${smMax$6}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$4}) {
+		@container layout-area (min-width: ${lgMin$5}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -16910,27 +17923,27 @@ const oneHalfOneHalfSectionStyles = css`
 		display: flex;
 		flex-wrap: wrap;
 
-		@media (max-width: ${smMax$5}) {
+		@media (max-width: ${smMax$6}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@media (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
+		@media (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@media (min-width: ${lgMin$4}) {
+		@media (min-width: ${lgMin$5}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax$5}) {
+		@container layout-area (max-width: ${smMax$6}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin$6}) and (max-width: ${mdMax$2}) {
+		@container layout-area (min-width: ${mdMin$7}) and (max-width: ${mdMax$3}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin$4}) {
+		@container layout-area (min-width: ${lgMin$5}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -17156,8 +18169,8 @@ __decorateClass$o([
 NLDDCard = __decorateClass$o([
   customElement("nldd-card")
 ], NLDDCard);
-const mdMin$5 = unsafeCSS(breakpoints.mdMin);
-const lgMin$3 = unsafeCSS(breakpoints.lgMin);
+const mdMin$6 = unsafeCSS(breakpoints.mdMin);
+const lgMin$4 = unsafeCSS(breakpoints.lgMin);
 const collectionStyles = css`
 
 
@@ -17171,11 +18184,11 @@ const collectionStyles = css`
 		gap: var(--components-collection-sm-gap);
 		--_item-width: var(--primitives-area-280);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (min-width: ${mdMin$6}) {
 			gap: var(--components-collection-md-gap);
 		}
 
-		@media (min-width: ${lgMin$3}) {
+		@media (min-width: ${lgMin$4}) {
 			gap: var(--components-collection-lg-gap);
 		}
 	}
@@ -17192,11 +18205,11 @@ const collectionStyles = css`
 		width: 100%;
 		gap: var(--components-collection-sm-gap);
 
-		@media (min-width: ${mdMin$5}) {
+		@media (min-width: ${mdMin$6}) {
 			gap: var(--components-collection-md-gap);
 		}
 
-		@media (min-width: ${lgMin$3}) {
+		@media (min-width: ${lgMin$4}) {
 			gap: var(--components-collection-lg-gap);
 		}
 	}
@@ -17494,14 +18507,22 @@ __decorateClass$n([
 NLDDCollection = __decorateClass$n([
   customElement("nldd-collection")
 ], NLDDCollection);
+const smMax$5 = unsafeCSS(breakpoints.smMax);
+const mdMin$5 = unsafeCSS(breakpoints.mdMin);
+const mdMax$2 = unsafeCSS(breakpoints.mdMax);
+const lgMin$3 = unsafeCSS(breakpoints.lgMin);
 const spacerStyles = css`
 
 
 	/* # Host */
 
 	:host {
+		--_size: var(--primitives-space-16);
+
 		display: block;
 		flex-shrink: 0;
+		width: var(--_size);
+		height: var(--_size);
 	}
 
 	:host([hidden]) {
@@ -17509,142 +18530,181 @@ const spacerStyles = css`
 	}
 
 
-	/* # Flexible and responsive */
-
-	:host([size='flexible']) {
-		flex: 1;
-		min-width: 0;
-		min-height: 0;
-	}
-
-	:host([size='md']) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-
-		@media (min-width: ${unsafeCSS(breakpoints.smMax)}) {
-			width: var(--primitives-space-24);
-			height: var(--primitives-space-24);
-		}
-	}
-
-
-	/* # Fixed sizes */
+	/* # Direction */
 
-	:host([size='2']) {
-		width: var(--primitives-space-2);
-		height: var(--primitives-space-2);
+	:host([direction="horizontal"]) {
+		height: auto;
 	}
 
-	:host([size='4']) {
-		width: var(--primitives-space-4);
-		height: var(--primitives-space-4);
+	:host([direction="vertical"]) {
+		width: auto;
 	}
 
-	:host([size='6']) {
-		width: var(--primitives-space-6);
-		height: var(--primitives-space-6);
-	}
 
-	:host([size='16']),
-	:host(:not([size])) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
+	/* # Size — applies at every breakpoint */
 
-	:host([size='8']) {
-		width: var(--primitives-space-8);
-		height: var(--primitives-space-8);
-	}
+	:host([size="2"]) { --_size: var(--primitives-space-2); }
+	:host([size="4"]) { --_size: var(--primitives-space-4); }
+	:host([size="6"]) { --_size: var(--primitives-space-6); }
+	:host([size="8"]) { --_size: var(--primitives-space-8); }
+	:host([size="10"]) { --_size: var(--primitives-space-10); }
+	:host([size="12"]) { --_size: var(--primitives-space-12); }
+	:host([size="16"]) { --_size: var(--primitives-space-16); }
+	:host([size="20"]) { --_size: var(--primitives-space-20); }
+	:host([size="24"]) { --_size: var(--primitives-space-24); }
+	:host([size="28"]) { --_size: var(--primitives-space-28); }
+	:host([size="32"]) { --_size: var(--primitives-space-32); }
+	:host([size="40"]) { --_size: var(--primitives-space-40); }
+	:host([size="44"]) { --_size: var(--primitives-space-44); }
+	:host([size="48"]) { --_size: var(--primitives-space-48); }
+	:host([size="56"]) { --_size: var(--primitives-space-56); }
+	:host([size="64"]) { --_size: var(--primitives-space-64); }
+	:host([size="80"]) { --_size: var(--primitives-space-80); }
+	:host([size="96"]) { --_size: var(--primitives-space-96); }
 
-	:host([size='10']) {
-		width: var(--primitives-space-10);
-		height: var(--primitives-space-10);
-	}
+	/* ## Size: flexible — takes all remaining space in the flex parent */
 
-	:host([size='12']) {
-		width: var(--primitives-space-12);
-		height: var(--primitives-space-12);
+	:host([size="flexible"]) {
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		width: auto;
+		height: auto;
 	}
 
-	:host([size='16']) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+	:host([size="flexible"][direction="horizontal"]) {
+		min-height: auto;
 	}
 
-	:host([size='20']) {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+	:host([size="flexible"][direction="vertical"]) {
+		min-width: auto;
 	}
 
-	:host([size='24']) {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
 
-	:host([size='28']) {
-		width: var(--primitives-space-28);
-		height: var(--primitives-space-28);
-	}
+	/* # Per-viewport size overrides
+	 *
+	 * Each per-breakpoint attribute (sm-size / md-size / lg-size) sets the
+	 * same --_size local var inside its respective @media query, so it wins
+	 * over the base [size] selector at that breakpoint via cascade source
+	 * order. If only [size] is set, --_size keeps the base value across all
+	 * breakpoints.
+	 */
 
-	:host([size='32']) {
-		width: var(--primitives-space-32);
-		height: var(--primitives-space-32);
-	}
+	/* ## sm: max-width 640px */
+
+	@media (max-width: ${smMax$5}) {
+		:host([sm-size="2"]) { --_size: var(--primitives-space-2); }
+		:host([sm-size="4"]) { --_size: var(--primitives-space-4); }
+		:host([sm-size="6"]) { --_size: var(--primitives-space-6); }
+		:host([sm-size="8"]) { --_size: var(--primitives-space-8); }
+		:host([sm-size="10"]) { --_size: var(--primitives-space-10); }
+		:host([sm-size="12"]) { --_size: var(--primitives-space-12); }
+		:host([sm-size="16"]) { --_size: var(--primitives-space-16); }
+		:host([sm-size="20"]) { --_size: var(--primitives-space-20); }
+		:host([sm-size="24"]) { --_size: var(--primitives-space-24); }
+		:host([sm-size="28"]) { --_size: var(--primitives-space-28); }
+		:host([sm-size="32"]) { --_size: var(--primitives-space-32); }
+		:host([sm-size="40"]) { --_size: var(--primitives-space-40); }
+		:host([sm-size="44"]) { --_size: var(--primitives-space-44); }
+		:host([sm-size="48"]) { --_size: var(--primitives-space-48); }
+		:host([sm-size="56"]) { --_size: var(--primitives-space-56); }
+		:host([sm-size="64"]) { --_size: var(--primitives-space-64); }
+		:host([sm-size="80"]) { --_size: var(--primitives-space-80); }
+		:host([sm-size="96"]) { --_size: var(--primitives-space-96); }
+
+		:host([sm-size="flexible"]) {
+			flex: 1;
+			min-width: 0;
+			min-height: 0;
+			width: auto;
+			height: auto;
+		}
 
-	:host([size='40']) {
-		width: var(--primitives-space-40);
-		height: var(--primitives-space-40);
-	}
+		:host([sm-size="flexible"][direction="horizontal"]) {
+			min-height: auto;
+		}
 
-	:host([size='44']) {
-		width: var(--primitives-space-44);
-		height: var(--primitives-space-44);
+		:host([sm-size="flexible"][direction="vertical"]) {
+			min-width: auto;
+		}
 	}
 
-	:host([size='48']) {
-		width: var(--primitives-space-48);
-		height: var(--primitives-space-48);
-	}
+	/* ## md: 641px–1007px */
 
-	:host([size='56']) {
-		width: var(--primitives-space-56);
-		height: var(--primitives-space-56);
-	}
+	@media (min-width: ${mdMin$5}) and (max-width: ${mdMax$2}) {
+		:host([md-size="2"]) { --_size: var(--primitives-space-2); }
+		:host([md-size="4"]) { --_size: var(--primitives-space-4); }
+		:host([md-size="6"]) { --_size: var(--primitives-space-6); }
+		:host([md-size="8"]) { --_size: var(--primitives-space-8); }
+		:host([md-size="10"]) { --_size: var(--primitives-space-10); }
+		:host([md-size="12"]) { --_size: var(--primitives-space-12); }
+		:host([md-size="16"]) { --_size: var(--primitives-space-16); }
+		:host([md-size="20"]) { --_size: var(--primitives-space-20); }
+		:host([md-size="24"]) { --_size: var(--primitives-space-24); }
+		:host([md-size="28"]) { --_size: var(--primitives-space-28); }
+		:host([md-size="32"]) { --_size: var(--primitives-space-32); }
+		:host([md-size="40"]) { --_size: var(--primitives-space-40); }
+		:host([md-size="44"]) { --_size: var(--primitives-space-44); }
+		:host([md-size="48"]) { --_size: var(--primitives-space-48); }
+		:host([md-size="56"]) { --_size: var(--primitives-space-56); }
+		:host([md-size="64"]) { --_size: var(--primitives-space-64); }
+		:host([md-size="80"]) { --_size: var(--primitives-space-80); }
+		:host([md-size="96"]) { --_size: var(--primitives-space-96); }
 
-	:host([size='64']) {
-		width: var(--primitives-space-64);
-		height: var(--primitives-space-64);
-	}
+		:host([md-size="flexible"]) {
+			flex: 1;
+			min-width: 0;
+			min-height: 0;
+			width: auto;
+			height: auto;
+		}
 
-	:host([size='80']) {
-		width: var(--primitives-space-80);
-		height: var(--primitives-space-80);
-	}
+		:host([md-size="flexible"][direction="horizontal"]) {
+			min-height: auto;
+		}
 
-	:host([size='96']) {
-		width: var(--primitives-space-96);
-		height: var(--primitives-space-96);
+		:host([md-size="flexible"][direction="vertical"]) {
+			min-width: auto;
+		}
 	}
 
+	/* ## lg: min-width 1008px */
 
-	/* # Direction modifiers */
-
-	:host([direction='horizontal']) {
-		height: auto;
-	}
+	@media (min-width: ${lgMin$3}) {
+		:host([lg-size="2"]) { --_size: var(--primitives-space-2); }
+		:host([lg-size="4"]) { --_size: var(--primitives-space-4); }
+		:host([lg-size="6"]) { --_size: var(--primitives-space-6); }
+		:host([lg-size="8"]) { --_size: var(--primitives-space-8); }
+		:host([lg-size="10"]) { --_size: var(--primitives-space-10); }
+		:host([lg-size="12"]) { --_size: var(--primitives-space-12); }
+		:host([lg-size="16"]) { --_size: var(--primitives-space-16); }
+		:host([lg-size="20"]) { --_size: var(--primitives-space-20); }
+		:host([lg-size="24"]) { --_size: var(--primitives-space-24); }
+		:host([lg-size="28"]) { --_size: var(--primitives-space-28); }
+		:host([lg-size="32"]) { --_size: var(--primitives-space-32); }
+		:host([lg-size="40"]) { --_size: var(--primitives-space-40); }
+		:host([lg-size="44"]) { --_size: var(--primitives-space-44); }
+		:host([lg-size="48"]) { --_size: var(--primitives-space-48); }
+		:host([lg-size="56"]) { --_size: var(--primitives-space-56); }
+		:host([lg-size="64"]) { --_size: var(--primitives-space-64); }
+		:host([lg-size="80"]) { --_size: var(--primitives-space-80); }
+		:host([lg-size="96"]) { --_size: var(--primitives-space-96); }
 
-	:host([direction='vertical']) {
-		width: auto;
-	}
+		:host([lg-size="flexible"]) {
+			flex: 1;
+			min-width: 0;
+			min-height: 0;
+			width: auto;
+			height: auto;
+		}
 
-	:host([size='flexible'][direction='horizontal']) {
-		height: auto;
-		min-height: auto;
-	}
+		:host([lg-size="flexible"][direction="horizontal"]) {
+			min-height: auto;
+		}
 
-	:host([size='flexible'][direction='vertical']) {
-		width: auto;
-		min-width: auto;
+		:host([lg-size="flexible"][direction="vertical"]) {
+			min-width: auto;
+		}
 	}
 `;
 var __defProp$l = Object.defineProperty;
@@ -17668,6 +18728,15 @@ NLDDSpacer.styles = spacerStyles;
 __decorateClass$m([
   property({ type: String, reflect: true })
 ], NLDDSpacer.prototype, "size", 2);
+__decorateClass$m([
+  property({ type: String, reflect: true, attribute: "sm-size" })
+], NLDDSpacer.prototype, "smSize", 2);
+__decorateClass$m([
+  property({ type: String, reflect: true, attribute: "md-size" })
+], NLDDSpacer.prototype, "mdSize", 2);
+__decorateClass$m([
+  property({ type: String, reflect: true, attribute: "lg-size" })
+], NLDDSpacer.prototype, "lgSize", 2);
 __decorateClass$m([
   property({ type: String, reflect: true })
 ], NLDDSpacer.prototype, "direction", 2);
@@ -20961,7 +22030,7 @@ const listItemStyles = css`
 	}
 
 	:host(.is-dragging) {
-		opacity: var(--components-list-item-is-dragging-opacity);
+		opacity: var(--semantics-controls-is-dragging-opacity);
 	}
 
 	:host(.is-dragging-pointer) {
@@ -21334,6 +22403,13 @@ let NLDDListItem = class extends LitElement {
     const slot = this.shadowRoot?.querySelector('slot[name="end"]');
     slot?.addEventListener("slotchange", () => this._updateVisibility());
   }
+  /**
+   * Delegates focus to the inner `.list-item__action` (the button or anchor),
+   * so consumers can call `listItemEl.focus()` without reaching into shadow DOM.
+   */
+  focus(options) {
+    this._action?.focus(options);
+  }
   render() {
     return template$9(
       this.type,
@@ -21616,6 +22692,7 @@ const titleCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
 		font: var(--primitives-font-body-xs-regular-tight);
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
@@ -21631,6 +22708,7 @@ const titleCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: break-word;
 		color: var(--context-cell-content-color, var(--semantics-content-color));
 		text-wrap: pretty;
 	}
@@ -21683,6 +22761,7 @@ const titleCellStyles = css`
 		margin: 0;
 		align-self: stretch;
 		min-width: 0;
+		overflow-wrap: anywhere;
 		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
@@ -21692,12 +22771,52 @@ const titleCellStyles = css`
 	}
 
 
-	/* # Color: inherit */
+	/* # Color */
+
+	/* ## Color: secondary
+	 *
+	 * Overline and supporting-text are already muted by default, so we only
+	 * demote the title to make the whole cell read as secondary.
+	 */
 
-	:host([color='inherit']) .title-cell__title,
-	:host([color='inherit']) .title-cell__overline,
-	:host([color='inherit']) .title-cell__supporting-text {
-		color: inherit;
+	:host([color='secondary']) .title-cell__title {
+		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
+	}
+
+	/* ## Color: accent
+	 *
+	 * Applies to all three text regions so the cell reads as a coherent
+	 * highlight, not a mix of accent + muted overline / supporting-text.
+	 */
+
+	:host([color='accent']) .title-cell__title,
+	:host([color='accent']) .title-cell__overline,
+	:host([color='accent']) .title-cell__supporting-text {
+		color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+	}
+
+	/* ## Color: success */
+
+	:host([color='success']) .title-cell__title,
+	:host([color='success']) .title-cell__overline,
+	:host([color='success']) .title-cell__supporting-text {
+		color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
+	}
+
+	/* ## Color: warning */
+
+	:host([color='warning']) .title-cell__title,
+	:host([color='warning']) .title-cell__overline,
+	:host([color='warning']) .title-cell__supporting-text {
+		color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+	}
+
+	/* ## Color: critical */
+
+	:host([color='critical']) .title-cell__title,
+	:host([color='critical']) .title-cell__overline,
+	:host([color='critical']) .title-cell__supporting-text {
+		color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
 	}
 
 
@@ -21718,19 +22837,37 @@ const HEADING_TAGS = {
   6: unsafeStatic("h6")
 };
 function renderTitle(component) {
-  if (!component.text) return nothing;
-  const rendered = renderQueryMark(component.text, component.query, component.queryMarkMode);
+  const fallback = component.text && !component._hasDefaultSlotted ? renderQueryMark(component.text, component.query, component.queryMarkMode) : nothing;
+  const isHidden = !component.text && !component._hasDefaultSlotted;
   const tag = HEADING_TAGS[component.headingLevel];
   if (tag) {
-    return html$1`<${tag} class="title-cell__title">${rendered}</${tag}>`;
-  }
-  return html`<p class="title-cell__title">${rendered}</p>`;
+    return html$1`<${tag}
+			class="title-cell__title"
+			?hidden=${isHidden}
+		>${fallback}<slot @slotchange=${component._onSlotChange}></slot></${tag}>`;
+  }
+  return html`<p
+		class="title-cell__title"
+		?hidden=${isHidden}
+	>${fallback}<slot @slotchange=${component._onSlotChange}></slot></p>`;
 }
 const template$7 = function() {
   return html`
-		${this.overline ? html`<p class="title-cell__overline">${renderQueryMark(this.overline, this.query, this.queryMarkMode)}</p>` : nothing}
+		<p
+			class="title-cell__overline"
+			?hidden=${!this.overline && !this._hasOverlineSlotted}
+		>
+			${this.overline && !this._hasOverlineSlotted ? renderQueryMark(this.overline, this.query, this.queryMarkMode) : nothing}
+			<slot name="overline" @slotchange=${this._onSlotChange}></slot>
+		</p>
 		${renderTitle(this)}
-		${this.supportingText ? html`<p class="title-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
+		<p
+			class="title-cell__supporting-text"
+			?hidden=${!this.supportingText && !this._hasSupportingTextSlotted}
+		>
+			${this.supportingText && !this._hasSupportingTextSlotted ? renderQueryMark(this.supportingText, this.query, this.queryMarkMode) : nothing}
+			<slot name="supporting-text" @slotchange=${this._onSlotChange}></slot>
+		</p>
 	`;
 };
 var __defProp$d = Object.defineProperty;
@@ -21757,6 +22894,29 @@ let NLDDTitleCell = class extends VisibilityMixin(LitElement) {
     this.headingLevel = void 0;
     this.query = "";
     this.queryMarkMode = "predictive";
+    this._hasOverlineSlotted = false;
+    this._hasDefaultSlotted = false;
+    this._hasSupportingTextSlotted = false;
+    this._onSlotChange = (e) => {
+      const slot = e.target;
+      const hasContent = slot.assignedNodes().some((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return (node.textContent ?? "").trim().length > 0;
+        }
+        return node.nodeType === Node.ELEMENT_NODE;
+      });
+      switch (slot.name) {
+        case "overline":
+          this._hasOverlineSlotted = hasContent;
+          break;
+        case "supporting-text":
+          this._hasSupportingTextSlotted = hasContent;
+          break;
+        default:
+          this._hasDefaultSlotted = hasContent;
+          break;
+      }
+    };
   }
   updated(changed) {
     super.updated(changed);
@@ -21834,6 +22994,15 @@ __decorateClass$d([
 __decorateClass$d([
   property({ type: String, attribute: "query-mark-mode" })
 ], NLDDTitleCell.prototype, "queryMarkMode", 2);
+__decorateClass$d([
+  state()
+], NLDDTitleCell.prototype, "_hasOverlineSlotted", 2);
+__decorateClass$d([
+  state()
+], NLDDTitleCell.prototype, "_hasDefaultSlotted", 2);
+__decorateClass$d([
+  state()
+], NLDDTitleCell.prototype, "_hasSupportingTextSlotted", 2);
 NLDDTitleCell = __decorateClass$d([
   customElement("nldd-title-cell")
 ], NLDDTitleCell);
@@ -24870,7 +26039,7 @@ const documentTabBarStyles = css`
 		flex-shrink: 1;
 		flex-basis: 0;
 		min-width: var(--_item-min-width);
-		opacity: var(--primitives-opacity-dragging);
+		opacity: var(--semantics-controls-is-dragging-opacity);
 	}
 
 
@@ -26266,7 +27435,7 @@ function paginationTemplate(component) {
 						`)}
 					</select>
 					<div class="pagination__select-picker-icon">
-						<nldd-icon name="chevron-up-down"></nldd-icon>
+						<nldd-icon name="chevron-up-chevron-down"></nldd-icon>
 					</div>
 				</div>
 			</div>
@@ -26682,6 +27851,7 @@ const badgeStyles = css`
 		background-color: var(--_background-color);
 		color: var(--_content-color);
 		border-radius: var(--components-badge-corner-radius);
+		box-shadow: 0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-background-color));
 		white-space: nowrap;
 		font: var(--_font);
 	}