@nldd/design-system 0.8.74 → 0.8.75

package/dist/components/{index-CI0H6jWT.js → index-Da0Q2Sno.js}

@@ -1168,6 +1168,8 @@ const aliases = {
   // moon
   "dark-mode": "moon",
   "night": "moon",
+  // paintbrush
+  "appearance": "paintbrush",
   // paper-plane
   "send": "paper-plane",
   // paperclip
@@ -1238,6 +1240,8 @@ const aliases = {
   "medium-volume": "speaker-volume-medium",
   // viewfinder
   "fit-to-view": "viewfinder",
+  // viewfinder-line
+  "scan": "viewfinder-line",
   // star
   "rating": "star",
   // star-filled
@@ -1472,6 +1476,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["dismiss-circle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 8.59-3.3-3.3-1.4 1.42L10.58 12l-3.3 3.3 1.42 1.4L12 13.42l3.3 3.3 1.4-1.42L13.42 12l3.3-3.3-1.42-1.4z"/>\n</svg>'],
   ["dismiss-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m15.3 7.3 1.4 1.4-3.29 3.3 3.3 3.3-1.42 1.4L12 13.42l-3.3 3.3-1.4-1.42L10.58 12l-3.3-3.3 1.42-1.4L12 10.58z"/>\n</svg>'],
   ["dismiss-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m17.3 5.3 1.4 1.4-5.29 5.3 5.3 5.3-1.42 1.4L12 13.42l-5.3 5.3-1.4-1.42L10.58 12l-5.3-5.3 1.42-1.4L12 10.58z"/>\n</svg>'],
+  ["display", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19 3a3 3 0 0 1 3 3v9a3 3 0 0 1-2.85 3H15v2h2v2H7v-2h2v-2H4.85A3 3 0 0 1 2 15.15V6a3 3 0 0 1 3-3zM5 5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/>\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-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>'],
@@ -1573,6 +1578,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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>'],
   ["network-structure", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 1a3 3 0 0 1 2.89 3.8l1.95 1.13A2.99 2.99 0 0 1 22 8a3 3 0 0 1-2.32 2.92v2.16a3 3 0 1 1-2.84 5l-1.95 1.12a3 3 0 1 1-5.78 0l-1.95-1.13A2.99 2.99 0 0 1 2 16a3 3 0 0 1 2.32-2.92v-2.16a3 3 0 1 1 2.84-5L9.11 4.8A3 3 0 0 1 12 1m0 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-4.1-3.79c.13.5.13 1.06 0 1.55l1.96 1.14a3 3 0 0 1 1.39-.8v-2.2a3 3 0 0 1-1.4-.81zm6.25-1.12a3 3 0 0 1-1.4.81v2.2a3 3 0 0 1 1.39.8l1.96-1.14a3 3 0 0 1 0-1.55zM5 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2m14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-4.1-3.79c.13.5.13 1.07 0 1.58l1.95 1.12a3 3 0 0 1 1.33-.8v-2.23a3 3 0 0 1-1.33-.79zm-7.75-1.12a3 3 0 0 1-1.33.8v2.23a3 3 0 0 1 1.33.79l1.96-1.12a3 3 0 0 1 0-1.58zM12 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2M7.9 7.23c.13.5.13 1.06 0 1.56L9.84 9.9a3 3 0 0 1 1.4-.81V6.9a3 3 0 0 1-1.4-.8zm6.24-1.13a3 3 0 0 1-1.39.8v2.2a3 3 0 0 1 1.4.8l1.95-1.1a3 3 0 0 1 0-1.56zM5 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-7-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>\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>'],
+  ["paintbrush", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18.13 2.51a2.39 2.39 0 0 1 3.35 3.35l-7.31 9.26A3.7 3.7 0 0 1 12 16.46c-.28 2.52-2.62 4.49-5.47 4.49a5.5 5.5 0 0 1-5.04-3h.04c1.38 0 2.5-.9 2.5-2a4 4 0 0 1 3.48-3.97 4 4 0 0 1 1.35-2.16zM8.04 13.95a2 2 0 0 0-2 2c0 1.1-.45 2-1.12 2.66q.72.33 1.62.34c1.66 0 3.5-1.2 3.5-3a2 2 0 0 0-2-2m2.07-2.56q-.43.35-.59.84a4 4 0 0 1 2.24 2.23q.49-.15.84-.58l1.08-1.37-2.2-2.2zm9.25-7.3-6.3 4.97 1.87 1.86 4.98-6.3c.27-.34-.2-.81-.55-.54"/>\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>'],
   ["paragraph-sign", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M19 4h-2v18h-2V4h-2v18h-2V12h-1a5 5 0 0 1 0-10h9z"/>\n</svg>'],
@@ -1665,6 +1671,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["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>'],
   ["video-camera", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M20.283 5.264C20.91 4.62 22 5.064 22 5.96l-.013 12.24c.013.739-1.077 1.179-1.707.539L17 15.362V16.5c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3v-9a3 3 0 0 1 3-3h9c1.657 0 3 1.34 3 3v1.137zM5 6.5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1zm12 5.005v.99l3 3.081V8.423z"/>\n</svg>'],
   ["viewfinder", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 18a1 1 0 0 0 1 1h4v2H6a3 3 0 0 1-3-3v-4h2zm16 0a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 1-1v-4h2zM10 5H6a1 1 0 0 0-1 1v4H3V6a3 3 0 0 1 3-3h4zm11 1v4h-2V6a1 1 0 0 0-1-1h-4V3h4a3 3 0 0 1 3 3"/>\n</svg>'],
+  ["viewfinder-line", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 18a1 1 0 0 0 1 1h3v2H6a3 3 0 0 1-3-3v-3h2zm16 0a3 3 0 0 1-3 3h-3v-2h3a1 1 0 0 0 1-1v-3h2zm1-5H2v-2h20zM9 5H6a1 1 0 0 0-1 1v3H3V6a3 3 0 0 1 3-3h3zm9-2a3 3 0 0 1 3 3v3h-2V6a1 1 0 0 0-1-1h-3V3z"/>\n</svg>'],
   ["wheat", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M8 22H6v-3h2zm10 0h-2v-3h2zM3 14a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M3 10a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M3 6a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M7 2a4 4 0 0 1 0 5.29A4 4 0 0 1 7 2m10 0a4 4 0 0 1 0 5.29A4 4 0 0 1 17 2"/>\n</svg>']
 ]);
 var __defProp$1B = Object.defineProperty;
@@ -2868,6 +2875,7 @@ function tooltipTemplate(component) {
 			@mouseleave=${component._handleTriggerLeave}
 			@focusin=${component._handleFocusIn}
 			@focusout=${component._handleFocusOut}
+			@click=${component._handleTriggerActivate}
 		></slot>
 		<div class="tooltip"
 			popover="manual"
@@ -3108,6 +3116,25 @@ let NLDDTooltip = class extends LitElement {
     );
     if (!stillInside) this._handleTriggerLeave();
   }
+  /* A tooltip is transient help for a control; once you activate that control
+   * it has done its job. Without this it lingers on top of whatever the click
+   * opened: a tooltip is popover="manual" and an nldd-popover is
+   * popover="auto", so both sit in the top layer, where z-index does not
+   * apply between them and the last one shown simply paints over the other.
+   * `open` is the consumer's programmatic feedback state (e.g. "Gekopieerd"),
+   * which activation must not cancel. */
+  _handleTriggerActivate() {
+    if (this.open) return;
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+      this._hideTimeout = null;
+    }
+    this._visible = false;
+  }
   _handleTooltipEnter() {
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout);
@@ -3902,8 +3929,7 @@ const menuDividerStyles = css$1`
 	/* # Host */
 
 	:host {
-		display: block;
-		padding: var(--primitives-space-4) 0;
+		display: flow-root;
 	}
 
 	:host([hidden]) {
@@ -3914,6 +3940,7 @@ const menuDividerStyles = css$1`
 	/* # Divider */
 
 	.menu__divider {
+		margin: var(--primitives-space-4) 0;
 		background-color: var(--semantics-dividers-color);
 		height: var(--semantics-dividers-thickness);
 	}
@@ -3928,14 +3955,21 @@ const menuGroupStyles = css$1`
 	 * (bottom). Both flags are set by the parent menu (data-no-top-divider /
 	 * data-no-bottom-divider): CSS :first-child / :last-child can't see hidden
 	 * siblings, nor the header slot's div that becomes the first light-DOM
-	 * child (which would leave a first group no longer :first-child).
-	 *
-	 * padding-top > padding-bottom binds the title visually to its items
-	 * rather than to whatever sits above. */
+	 * child (which would leave a first group no longer :first-child). */
 
 	:host {
 		${inheritedTextReset}
-		display: block;
+		display: flow-root;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.menu__group {
 		margin-top: var(--primitives-space-4);
 		margin-bottom: var(--primitives-space-4);
 		border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
@@ -3944,22 +3978,18 @@ const menuGroupStyles = css$1`
 		padding-bottom: var(--primitives-space-4);
 	}
 
-	:host(:first-child),
-	:host([data-no-top-divider]) {
+	:host(:first-child) .menu__group,
+	:host([data-no-top-divider]) .menu__group {
 		border-top: none;
 		padding-top: var(--primitives-space-2);
 	}
 
-	:host([data-no-bottom-divider]) {
+	:host([data-no-bottom-divider]) .menu__group {
 		margin-bottom: 0;
 		border-bottom: none;
 		padding-bottom: var(--primitives-space-2);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
 
 	/* # Title */
 
@@ -4191,15 +4221,17 @@ function menuDividerTemplate() {
 }
 function menuGroupTemplate(component) {
   return html$1`
-		<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 class="menu__group">
+			<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>
 		</div>
 	`;
 }
@@ -4222,7 +4254,8 @@ const iconCellStyles = css$1`
 		--_content-color: var(--context-content-color, var(--semantics-content-color));
 
 		display: flex;
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		width: var(--_size);
 		flex-direction: column;
 		align-items: center;
@@ -4513,7 +4546,8 @@ const textCellStyles = css$1`
 		--_text-font: var(--primitives-font-body-md-regular-tight);
 
 		${inheritedTextReset}
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		display: flex;
 		width: var(--_width);
 		min-width: var(--_min-width);
@@ -26851,16 +26885,16 @@ const highlightStyle = HighlightStyle.define([
 ]);
 const nlddCodeMirrorTheme = [baseTheme$1, syntaxHighlighting(highlightStyle)];
 const loaders = {
-  json: async () => (await import("./index-CChmEZdd.js")).json(),
-  yaml: async () => (await import("./index-CAIa-ZY1.js")).yaml(),
+  json: async () => (await import("./index-VYDp-qXc.js")).json(),
+  yaml: async () => (await import("./index-1g5lY4s4.js")).yaml(),
   javascript: async () => (await Promise.resolve().then(() => index$2)).javascript(),
   typescript: async () => (await Promise.resolve().then(() => index$2)).javascript({ typescript: true }),
   css: async () => (await Promise.resolve().then(() => index$3)).css(),
   html: async () => (await Promise.resolve().then(() => index$1)).html(),
-  xml: async () => (await import("./index-JawcAuAj.js")).xml(),
-  python: async () => (await import("./index-73GOYriu.js")).python(),
-  rust: async () => (await import("./index-BBerWrN2.js")).rust(),
-  sql: async () => (await import("./index-fjTBz8ya.js")).sql(),
+  xml: async () => (await import("./index-loncueHu.js")).xml(),
+  python: async () => (await import("./index-jJIyF1NB.js")).python(),
+  rust: async () => (await import("./index-B9-cDD9g.js")).rust(),
+  sql: async () => (await import("./index-D4R5KlwE.js")).sql(),
   markdown: async () => (await Promise.resolve().then(() => index)).markdown(),
   // No official lang-* package — wrap the legacy StreamLanguage modes.
   bash: async () => new LanguageSupport(StreamLanguage.define((await import("./shell-BlsXDxCn.js")).shell)),
@@ -28682,14 +28716,22 @@ const titleStyles = css$1`
 		overflow-wrap: anywhere !important;
 	}
 
+	/* balance, not pretty: a heading is a handful of words, so evening out the
+	   line lengths reads better than only protecting the last line.
+	 *
+	 * The measure is in ch, so one value covers every size: ch scales with the
+	 * font, and 40 characters stays 40 characters whether the title is 18px or
+	 * 52px. It only bites in a wide container — inside a card or a column the
+	 * box is already narrower than the cap. */
 	::slotted(:not([slot])) {
 		${slottedReset}
 		${inheritedTextReset}
 		margin: 0 !important;
+		max-width: 40ch !important;
 		color: var(--semantics-content-color) !important;
 		font: var(--_font) !important;
 		overflow-wrap: anywhere !important;
-		text-wrap: pretty !important;
+		text-wrap: balance !important;
 	}
 
 	::slotted([slot="subtitle"]) {
@@ -32608,7 +32650,6 @@ const dateFieldStyles = css$1`
 		border-radius: var(--_corner-radius);
 		background-color: var(--_background-color);
 		min-height: var(--_min-size);
-		overflow: hidden;
 		padding-left: calc(var(--_inline-padding) - var(--semantics-input-fields-border-width));
 		flex-direction: row;
 		align-items: center;
@@ -32991,8 +33032,11 @@ let NLDDPopover = class extends LitElement {
         this.hide();
         return;
       }
-      event.preventDefault();
-      focusables[event.shiftKey ? idx - 1 : idx + 1]?.focus();
+      if (idx === -1) {
+        event.preventDefault();
+        focusables[0]?.focus({ focusVisible: true });
+        return;
+      }
     };
   }
   get open() {
@@ -33302,7 +33346,8 @@ const containerStyles = css$1`
 	}
 
 
-	/* # Host — outer chrome (padding + scheme + query container) */
+	/* # Host — external contract; padding and the query container live on
+	   .container in the shadow root, out of reach of consumer resets */
 
 	:host {
 		--_min-column-width: var(--primitives-area-280);
@@ -33333,12 +33378,37 @@ const containerStyles = css$1`
 		--_slot-sm-order: var(--_slot-order);
 		--_slot-md-order: var(--_slot-order);
 		--_slot-lg-order: var(--_slot-order);
+		/* One resolved gap for every layout to read. Multicol splits the gap
+		   over two properties (column-gap plus a margin on the items), so a
+		   per-breakpoint declaration would have to be repeated in three
+		   rules; swapping the var keeps that in one place. */
+		--_resolved-gap: var(--_gap);
+
+		@media (max-width: ${smMax$e}) { --_resolved-gap: var(--_sm-gap); }
+		@media (min-width: ${mdMin$f}) and (max-width: ${mdMax$c}) { --_resolved-gap: var(--_md-gap); }
+		@media (min-width: ${lgMin$d}) { --_resolved-gap: var(--_lg-gap); }
+
+		@container layout-container (max-width: ${smMax$e}) { --_resolved-gap: var(--_sm-gap); }
+		@container layout-container (min-width: ${mdMin$f}) and (max-width: ${mdMax$c}) { --_resolved-gap: var(--_md-gap); }
+		@container layout-container (min-width: ${lgMin$d}) { --_resolved-gap: var(--_lg-gap); }
 
-		container-type: inline-size;
 		display: block;
-		box-sizing: border-box;
 		width: 100%;
 		height: auto;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Outer chrome — padding + query container. Size queries measure the
+	   content box, so .container reports the same padded interior width the
+	   host reported when it carried the padding itself. */
+
+	.container {
+		container-type: inline-size;
+		box-sizing: border-box;
 		padding-top: var(--_padding-top);
 		padding-right: var(--_padding-right);
 		padding-bottom: var(--_padding-bottom);
@@ -33387,41 +33457,29 @@ const containerStyles = css$1`
 		}
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
 
 	/* # Inner — actual layout */
 
-	.container {
+	.container__inner {
 		display: flex;
 		flex-direction: column;
 		flex-wrap: nowrap;
 		justify-content: var(--_justify-content);
 		justify-items: var(--_justify-items);
 		align-items: var(--_align-items);
-		gap: var(--_gap);
-
-		@media (max-width: ${smMax$e}) { gap: var(--_sm-gap); }
-		@media (min-width: ${mdMin$f}) and (max-width: ${mdMax$c}) { gap: var(--_md-gap); }
-		@media (min-width: ${lgMin$d}) { gap: var(--_lg-gap); }
-
-		@container layout-container (max-width: ${smMax$e}) { gap: var(--_sm-gap); }
-		@container layout-container (min-width: ${mdMin$f}) and (max-width: ${mdMax$c}) { gap: var(--_md-gap); }
-		@container layout-container (min-width: ${lgMin$d}) { gap: var(--_lg-gap); }
+		gap: var(--_resolved-gap);
 	}
 
-	:host([layout="row"]) .container {
+	:host([layout="row"]) .container__inner {
 		flex-direction: row;
 	}
 
-	:host([layout="wrap"]) .container {
+	:host([layout="wrap"]) .container__inner {
 		flex-direction: row;
 		flex-wrap: wrap;
 	}
 
-	:host([layout="grid"]) .container {
+	:host([layout="grid"]) .container__inner {
 		display: grid;
 		grid-template-columns: repeat(
 			var(--_column-count, auto-fit),
@@ -33429,10 +33487,10 @@ const containerStyles = css$1`
 		);
 	}
 
-	:host([layout="columns"]) .container {
+	:host([layout="columns"]) .container__inner {
 		display: block;
 		columns: var(--_min-column-width);
-		column-gap: var(--_gap);
+		column-gap: var(--_resolved-gap);
 	}
 
 	:host([layout="columns"]) ::slotted(*) {
@@ -33442,21 +33500,21 @@ const containerStyles = css$1`
 	/* Lanes — native CSS grid-lanes where supported, CSS multicol fallback
 	   otherwise. CSS-only (no JS). Fallback flows column-order; native lanes
 	   packs shortest-column (row-order). */
-	:host([layout="lanes"]) .container {
+	:host([layout="lanes"]) .container__inner {
 		display: block;
 		columns: var(--_min-column-width);
-		column-gap: var(--_gap);
+		column-gap: var(--_resolved-gap);
 	}
 
 	:host([layout="lanes"]) ::slotted(*) {
 		break-inside: avoid;
 		/* multicol has no row-gap; item margin supplies the vertical gap. The
 		   native branch resets this (grid-lanes gap covers both axes). */
-		margin-bottom: var(--_gap);
+		margin-bottom: var(--_resolved-gap);
 	}
 
 	@supports (display: grid-lanes) {
-		:host([layout="lanes"]) .container {
+		:host([layout="lanes"]) .container__inner {
 			display: grid-lanes;
 			grid-template-columns: repeat(
 				var(--_column-count, auto-fill),
@@ -33469,14 +33527,14 @@ const containerStyles = css$1`
 		}
 	}
 
-	:host([layout="columns"][column-count]) .container,
-	:host([layout="columns"][sm-column-count]) .container,
-	:host([layout="columns"][md-column-count]) .container,
-	:host([layout="columns"][lg-column-count]) .container,
-	:host([layout="lanes"][column-count]) .container,
-	:host([layout="lanes"][sm-column-count]) .container,
-	:host([layout="lanes"][md-column-count]) .container,
-	:host([layout="lanes"][lg-column-count]) .container {
+	:host([layout="columns"][column-count]) .container__inner,
+	:host([layout="columns"][sm-column-count]) .container__inner,
+	:host([layout="columns"][md-column-count]) .container__inner,
+	:host([layout="columns"][lg-column-count]) .container__inner,
+	:host([layout="lanes"][column-count]) .container__inner,
+	:host([layout="lanes"][sm-column-count]) .container__inner,
+	:host([layout="lanes"][md-column-count]) .container__inner,
+	:host([layout="lanes"][lg-column-count]) .container__inner {
 		column-count: var(--_column-count);
 		column-width: auto;
 	}
@@ -33484,59 +33542,59 @@ const containerStyles = css$1`
 
 	/* # Column count — base scope */
 
-	:host([column-count="1"]) .container { --_column-count: 1; }
-	:host([column-count="2"]) .container { --_column-count: 2; }
-	:host([column-count="3"]) .container { --_column-count: 3; }
-	:host([column-count="4"]) .container { --_column-count: 4; }
-	:host([column-count="5"]) .container { --_column-count: 5; }
-	:host([column-count="6"]) .container { --_column-count: 6; }
-	:host([column-count="7"]) .container { --_column-count: 7; }
-	:host([column-count="8"]) .container { --_column-count: 8; }
-	:host([column-count]) .container { --_track-min: 0; }
+	:host([column-count="1"]) .container__inner { --_column-count: 1; }
+	:host([column-count="2"]) .container__inner { --_column-count: 2; }
+	:host([column-count="3"]) .container__inner { --_column-count: 3; }
+	:host([column-count="4"]) .container__inner { --_column-count: 4; }
+	:host([column-count="5"]) .container__inner { --_column-count: 5; }
+	:host([column-count="6"]) .container__inner { --_column-count: 6; }
+	:host([column-count="7"]) .container__inner { --_column-count: 7; }
+	:host([column-count="8"]) .container__inner { --_column-count: 8; }
+	:host([column-count]) .container__inner { --_track-min: 0; }
 
 
 	/* # Column count — sm scope (queries :host own width) */
 
 	@container (max-width: ${smMax$e}) {
-		:host([sm-column-count="1"]) .container { --_column-count: 1; }
-		:host([sm-column-count="2"]) .container { --_column-count: 2; }
-		:host([sm-column-count="3"]) .container { --_column-count: 3; }
-		:host([sm-column-count="4"]) .container { --_column-count: 4; }
-		:host([sm-column-count="5"]) .container { --_column-count: 5; }
-		:host([sm-column-count="6"]) .container { --_column-count: 6; }
-		:host([sm-column-count="7"]) .container { --_column-count: 7; }
-		:host([sm-column-count="8"]) .container { --_column-count: 8; }
-		:host([sm-column-count]) .container { --_track-min: 0; }
+		:host([sm-column-count="1"]) .container__inner { --_column-count: 1; }
+		:host([sm-column-count="2"]) .container__inner { --_column-count: 2; }
+		:host([sm-column-count="3"]) .container__inner { --_column-count: 3; }
+		:host([sm-column-count="4"]) .container__inner { --_column-count: 4; }
+		:host([sm-column-count="5"]) .container__inner { --_column-count: 5; }
+		:host([sm-column-count="6"]) .container__inner { --_column-count: 6; }
+		:host([sm-column-count="7"]) .container__inner { --_column-count: 7; }
+		:host([sm-column-count="8"]) .container__inner { --_column-count: 8; }
+		:host([sm-column-count]) .container__inner { --_track-min: 0; }
 	}
 
 
 	/* # Column count — md scope */
 
 	@container (min-width: ${mdMin$f}) and (max-width: ${mdMax$c}) {
-		:host([md-column-count="1"]) .container { --_column-count: 1; }
-		:host([md-column-count="2"]) .container { --_column-count: 2; }
-		:host([md-column-count="3"]) .container { --_column-count: 3; }
-		:host([md-column-count="4"]) .container { --_column-count: 4; }
-		:host([md-column-count="5"]) .container { --_column-count: 5; }
-		:host([md-column-count="6"]) .container { --_column-count: 6; }
-		:host([md-column-count="7"]) .container { --_column-count: 7; }
-		:host([md-column-count="8"]) .container { --_column-count: 8; }
-		:host([md-column-count]) .container { --_track-min: 0; }
+		:host([md-column-count="1"]) .container__inner { --_column-count: 1; }
+		:host([md-column-count="2"]) .container__inner { --_column-count: 2; }
+		:host([md-column-count="3"]) .container__inner { --_column-count: 3; }
+		:host([md-column-count="4"]) .container__inner { --_column-count: 4; }
+		:host([md-column-count="5"]) .container__inner { --_column-count: 5; }
+		:host([md-column-count="6"]) .container__inner { --_column-count: 6; }
+		:host([md-column-count="7"]) .container__inner { --_column-count: 7; }
+		:host([md-column-count="8"]) .container__inner { --_column-count: 8; }
+		:host([md-column-count]) .container__inner { --_track-min: 0; }
 	}
 
 
 	/* # Column count — lg scope */
 
 	@container (min-width: ${lgMin$d}) {
-		:host([lg-column-count="1"]) .container { --_column-count: 1; }
-		:host([lg-column-count="2"]) .container { --_column-count: 2; }
-		:host([lg-column-count="3"]) .container { --_column-count: 3; }
-		:host([lg-column-count="4"]) .container { --_column-count: 4; }
-		:host([lg-column-count="5"]) .container { --_column-count: 5; }
-		:host([lg-column-count="6"]) .container { --_column-count: 6; }
-		:host([lg-column-count="7"]) .container { --_column-count: 7; }
-		:host([lg-column-count="8"]) .container { --_column-count: 8; }
-		:host([lg-column-count]) .container { --_track-min: 0; }
+		:host([lg-column-count="1"]) .container__inner { --_column-count: 1; }
+		:host([lg-column-count="2"]) .container__inner { --_column-count: 2; }
+		:host([lg-column-count="3"]) .container__inner { --_column-count: 3; }
+		:host([lg-column-count="4"]) .container__inner { --_column-count: 4; }
+		:host([lg-column-count="5"]) .container__inner { --_column-count: 5; }
+		:host([lg-column-count="6"]) .container__inner { --_column-count: 6; }
+		:host([lg-column-count="7"]) .container__inner { --_column-count: 7; }
+		:host([lg-column-count="8"]) .container__inner { --_column-count: 8; }
+		:host([lg-column-count]) .container__inner { --_track-min: 0; }
 	}
 
 
@@ -33565,7 +33623,13 @@ const containerStyles = css$1`
 	}
 `;
 function containerTemplate(component) {
-  return html$1`<div class="container"><slot @slotchange=${component._onSlotChange}></slot></div>`;
+  return html$1`
+		<div class="container">
+			<div class="container__inner">
+				<slot @slotchange=${component._onSlotChange}></slot>
+			</div>
+		</div>
+	`;
 }
 var __defProp$15 = Object.defineProperty;
 var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
@@ -34217,6 +34281,7 @@ const datePickerStyles = css$1`
 		--_footer-margin-top: var(--primitives-space-8);
 		--_title-font: var(--primitives-font-display-5-sm);
 		--_title-button-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_title-button-min-size: var(--semantics-controls-sm-min-size);
 		--_title-picker-icon-size: var(--primitives-space-20);
 		--_weekday-header-font: var(--primitives-font-body-xs-regular-flat);
 		--_weekday-header-content-color: var(--semantics-content-secondary-color);
@@ -34230,7 +34295,7 @@ const datePickerStyles = css$1`
 		--_width: initial;
 		--_day-size: var(--semantics-controls-md-min-size);
 		--_day-corner-radius: var(--semantics-controls-md-corner-radius);
-		--_day-font: var(--primitives-font-body-sm-regular-flat);
+		--_day-font: var(--primitives-font-body-sm-medium-flat);
 		--_day-indicator-inset: var(--primitives-space-2);
 		--_day-indicator-size: calc(var(--_day-size) - var(--_day-indicator-inset) * 2);
 		--_day-indicator-corner-radius: var(--_day-corner-radius);
@@ -34263,6 +34328,7 @@ const datePickerStyles = css$1`
 	   asked for. */
 	:host([stacked]) {
 		--_title-font: var(--primitives-font-display-4-sm);
+		--_title-button-min-size: var(--semantics-controls-md-min-size);
 
 		width: var(--_width, 100%);
 	}
@@ -34295,11 +34361,18 @@ const datePickerStyles = css$1`
 	}
 
 	.date-picker__title {
+		display: flex;
 		margin: 0;
+		align-items: center;
+		gap: var(--primitives-space-4);
 		font: var(--_title-font);
+		/* A heading that breaks between month and year stops answering the one
+		   question it is there for. */
+		white-space: nowrap;
 	}
 
-	.date-picker__title-button {
+	.date-picker__title-month-button,
+	.date-picker__title-year-button {
 		box-sizing: border-box;
 		display: flex;
 		margin: 0;
@@ -34307,6 +34380,7 @@ const datePickerStyles = css$1`
 		border: none;
 		border-radius: var(--_title-button-corner-radius);
 		background: none;
+		min-height: var(--_title-button-min-size);
 		padding: 0;
 		align-items: center;
 		color: inherit;
@@ -34322,7 +34396,8 @@ const datePickerStyles = css$1`
 		align-items: center;
 	}
 
-	.date-picker__title-button:focus-visible {
+	.date-picker__title-month-button:focus-visible,
+	.date-picker__title-year-button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -34553,6 +34628,7 @@ const nlddDatePickerTranslations = {
   "components.date-picker.view-previous-month-action": "Vorige maand",
   "components.date-picker.view-next-month-action": "Volgende maand",
   "components.date-picker.view-today-action": "Vandaag",
+  "components.date-picker.choose-month-action": "Kies een maand",
   "components.date-picker.choose-year-action": "Kies een jaar",
   // Twee vormen, want de maandnaam staat zowel midden in een datumlabel
   // ("maandag 29 juni 2026") als los in de kop erboven. Welke vorm waar hoort is
@@ -34625,51 +34701,78 @@ const nlddDatePickerTranslations = {
   "components.date-picker.range-blocked-text": "Die periode bevat een datum die niet beschikbaar is. Kies een andere."
 };
 const TITLE_ID = "date-picker-title";
+function renderTitlePart(component, part, label, choices, expanded) {
+  if (choices < 2) return html$1`<span class="date-picker__title-label">${label}</span>`;
+  return html$1`
+		<button class="date-picker__title-${part}-button"
+			type="button"
+			aria-haspopup="menu"
+			aria-expanded=${expanded ? "true" : "false"}
+		>
+			${label}
+			<span class="date-picker__title-picker-icon">
+				<nldd-icon
+					name="chevron-down-small"
+					aria-hidden="true"
+				></nldd-icon>
+			</span>
+		</button>
+	`;
+}
 function renderHeader(component) {
+  const months = component._months;
+  const years = component._years;
   return html$1`
 		<div class="date-picker__header">
 			<h2 class="date-picker__title"
 				id=${TITLE_ID}
 				aria-live="polite"
 			>
-				<button class="date-picker__title-button"
-					type="button"
-					aria-haspopup="menu"
-					aria-expanded=${component._yearMenuOpen ? "true" : "false"}
-				>
-					${component._title}
-					<span class="date-picker__title-picker-icon">
-						<nldd-icon
-							name="chevron-down-small"
-							aria-hidden="true"
-						></nldd-icon>
-					</span>
-				</button>
+				${renderTitlePart(component, "month", component._monthLabel, months.length, component._monthMenuOpen)}
+				${renderTitlePart(component, "year", String(component._viewYear), years.length, component._yearMenuOpen)}
 			</h2>
-			<nldd-menu
-				accessible-label=${component._t("components.date-picker.choose-year-action")}
-				max-items="8"
-				width="136px"
-				@toggle=${component._handleYearMenuToggle}
-			>
-				${component._years.map((year) => html$1`
-					<nldd-menu-item
-						type="radio"
-						text=${String(year)}
-						?selected=${year === component._viewYear}
-						@click=${() => component._handleYearSelect(year)}
-					></nldd-menu-item>
-				`)}
-			</nldd-menu>
+			${months.length < 2 ? nothing : html$1`
+				<nldd-menu class="date-picker__month-menu"
+					accessible-label=${component._t("components.date-picker.choose-month-action")}
+					width="176px"
+					@toggle=${component._handleMonthMenuToggle}
+				>
+					${months.map((month) => html$1`
+						<nldd-menu-item
+							type="radio"
+							text=${component._t(`components.date-picker.${MONTH_KEYS[month - 1]}-capitalize`)}
+							?selected=${month === component._viewMonth}
+							@click=${() => component._handleMonthSelect(month)}
+						></nldd-menu-item>
+					`)}
+				</nldd-menu>
+			`}
+			${years.length < 2 ? nothing : html$1`
+				<nldd-menu class="date-picker__year-menu"
+					accessible-label=${component._t("components.date-picker.choose-year-action")}
+					max-items="8"
+					width="136px"
+					@toggle=${component._handleYearMenuToggle}
+				>
+					${years.map((year) => html$1`
+						<nldd-menu-item
+							type="radio"
+							text=${String(year)}
+							?selected=${year === component._viewYear}
+							@click=${() => component._handleYearSelect(year)}
+						></nldd-menu-item>
+					`)}
+				</nldd-menu>
+			`}
 			${component._stacked ? nothing : html$1`
 				<div class="date-picker__pagination">
-					${renderPagination(component, "sm", "neutral-base", true)}
+					${renderPagination(component, "sm", "neutral-base")}
 				</div>
 			`}
 		</div>
 	`;
 }
-function renderPagination(component, size2, variant, withToday) {
+function renderPagination(component, size2, variant) {
   return html$1`
 		<nldd-button-bar
 			size=${size2}
@@ -34681,13 +34784,6 @@ function renderPagination(component, size2, variant, withToday) {
 				tooltip-timing="never"
 				@click=${() => component._shiftView(-1)}
 			></nldd-icon-button>
-			${withToday && component._todayReachable ? html$1`
-				<nldd-button-bar-divider></nldd-button-bar-divider>
-				<nldd-button
-					text=${component._t("components.date-picker.view-today-action")}
-					@click=${component._handleToday}
-				></nldd-button>
-			` : nothing}
 			<nldd-button-bar-divider></nldd-button-bar-divider>
 			<nldd-icon-button
 				icon="chevron-right"
@@ -34698,13 +34794,13 @@ function renderPagination(component, size2, variant, withToday) {
 		</nldd-button-bar>
 	`;
 }
-function renderFooter(component) {
+function renderFooter(component, withPagination) {
   return html$1`
 		<div class="date-picker__footer">
 			<div class="date-picker__footer-start">
 				${component._todayReachable ? html$1`
 					<nldd-button
-						size="md"
+						size=${withPagination ? "md" : "sm"}
 						variant="neutral-tinted"
 						text=${component._t("components.date-picker.view-today-action")}
 						@click=${component._handleToday}
@@ -34712,7 +34808,7 @@ function renderFooter(component) {
 				` : nothing}
 			</div>
 			<div class="date-picker__footer-end">
-				${renderPagination(component, "md", "neutral-tinted", false)}
+				${withPagination ? renderPagination(component, "md", "neutral-tinted") : nothing}
 			</div>
 		</div>
 	`;
@@ -34813,7 +34909,7 @@ function datePickerTemplate(component) {
 					`)}
 				</tbody>
 			</table>
-			${component._stacked ? renderFooter(component) : nothing}
+			${component._stacked || component._todayReachable ? renderFooter(component, component._stacked) : nothing}
 			<div class="date-picker__announcer"
 				role="status"
 				aria-live="polite"
@@ -34883,6 +34979,12 @@ function withYear(iso, year) {
   const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
   return toIso(year, month, Math.min(day, lastDay)) ?? iso;
 }
+function withMonth(iso, month) {
+  const year = Number(iso.slice(0, 4));
+  const day = Number(iso.slice(8, 10));
+  const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  return toIso(year, month, Math.min(day, lastDay)) ?? iso;
+}
 function clampIso(iso, min, max) {
   if (min && iso < min) return min;
   if (max && iso > max) return max;
@@ -34909,6 +35011,7 @@ let NLDDDatePicker = class extends withTranslations(
     this._anchor = "";
     this._hover = "";
     this._announcement = "";
+    this._monthMenuOpen = false;
     this._yearMenuOpen = false;
     this._stacked = false;
     this._handleStackedChange = () => {
@@ -34931,13 +35034,19 @@ let NLDDDatePicker = class extends withTranslations(
       this._commitRange(origin, iso);
     };
   }
+  async _handleMonthMenuToggle(e) {
+    this._monthMenuOpen = e.newState === "open";
+    if (this._monthMenuOpen) await this._openMenuOnSelection(".date-picker__month-menu");
+  }
   async _handleYearMenuToggle(e) {
     this._yearMenuOpen = e.newState === "open";
-    if (!this._yearMenuOpen) return;
-    const menu = this.shadowRoot?.querySelector("nldd-menu");
+    if (this._yearMenuOpen) await this._openMenuOnSelection(".date-picker__year-menu");
+  }
+  async _openMenuOnSelection(selector) {
+    const menu = this.shadowRoot?.querySelector(selector);
     await menu?.updateComplete;
     const focusSelected = () => {
-      const selected = this.shadowRoot?.querySelector("nldd-menu-item[selected]");
+      const selected = menu?.querySelector("nldd-menu-item[selected]");
       if (!selected || this.shadowRoot?.activeElement === selected) return;
       selected.scrollIntoView({ block: "nearest" });
       selected.focus({ preventScroll: true });
@@ -34982,9 +35091,10 @@ let NLDDDatePicker = class extends withTranslations(
         this.style.removeProperty("--_width");
       }
     }
-    const menu = this.shadowRoot?.querySelector("nldd-menu");
-    const title = this.shadowRoot?.querySelector(".date-picker__title-button");
-    if (menu && title) {
+    for (const part of ["month", "year"]) {
+      const menu = this.shadowRoot?.querySelector(`.date-picker__${part}-menu`);
+      const title = this.shadowRoot?.querySelector(`.date-picker__title-${part}-button`);
+      if (!menu || !title) continue;
       if (menu.anchorElement !== title) menu.anchorElement = title;
       if (title.popoverTargetElement !== menu) title.popoverTargetElement = menu;
     }
@@ -35069,6 +35179,26 @@ let NLDDDatePicker = class extends withTranslations(
   get _viewMonth() {
     return Number(this._view.slice(5, 7));
   }
+  /**
+   * Months offered in the title menu, bounded by min and max the way the year
+   * list is. Without this the menu lists twelve months while a bound quietly
+   * clamps eleven of them back to the one you were already on.
+   *
+   * The arrows page the view past a bound (only the focused day is clamped), so
+   * the month on screen is not necessarily one you can choose. It is left out
+   * when it falls outside, and the menu then shows no selection - which is the
+   * truth: you are looking at a month this calendar will not accept.
+   */
+  get _months() {
+    const minYear = this._min ? Number(this._min.slice(0, 4)) : null;
+    const maxYear = this._max ? Number(this._max.slice(0, 4)) : null;
+    if (minYear !== null && this._viewYear < minYear) return [];
+    if (maxYear !== null && this._viewYear > maxYear) return [];
+    const first = minYear === this._viewYear ? Number(this._min.slice(5, 7)) : 1;
+    const last = maxYear === this._viewYear ? Number(this._max.slice(5, 7)) : 12;
+    if (last < first) return [];
+    return Array.from({ length: last - first + 1 }, (_, i) => first + i);
+  }
   /**
    * Years offered in the title menu. Bounded by min and max where they are set,
    * because those already say which years can be reached; without them a window
@@ -35076,17 +35206,29 @@ let NLDDDatePicker = class extends withTranslations(
    */
   get _years() {
     const current = Number(todayIso().slice(0, 4));
-    let first = this._min ? Number(this._min.slice(0, 4)) : current - 120;
-    let last = this._max ? Number(this._max.slice(0, 4)) : current + 20;
-    first = Math.min(first, this._viewYear);
-    last = Math.max(last, this._viewYear);
+    const first = this._min ? Number(this._min.slice(0, 4)) : Math.min(current - 120, this._viewYear);
+    const last = this._max ? Number(this._max.slice(0, 4)) : Math.max(current + 20, this._viewYear);
+    if (last < first) return [];
     return Array.from({ length: last - first + 1 }, (_, i) => first + i);
   }
+  _handleMonthSelect(month) {
+    this._view = firstOfMonth(clampIso(withMonth(this._view, month), this._min, this._max));
+    this._focused = clampIso(withMonth(this._focused, month), this._min, this._max);
+    this._restoreFocus = Boolean(this._focusedCell());
+    this._closeMenu(".date-picker__month-menu");
+  }
   _handleYearSelect(year) {
     this._view = firstOfMonth(clampIso(withYear(this._view, year), this._min, this._max));
     this._focused = clampIso(withYear(this._focused, year), this._min, this._max);
     this._restoreFocus = Boolean(this._focusedCell());
-    const menu = this.shadowRoot?.querySelector("nldd-menu");
+    this._closeMenu(".date-picker__year-menu");
+  }
+  /**
+   * Radio items keep their menu open, which is right when you are ticking
+   * several - but here one month or one year is the whole answer.
+   */
+  _closeMenu(selector) {
+    const menu = this.shadowRoot?.querySelector(selector);
     if (menu?.matches(":popover-open")) menu.hidePopover?.();
   }
   /**
@@ -35094,9 +35236,8 @@ let NLDDDatePicker = class extends withTranslations(
    * sentence-initial one of a heading, not a proper noun. The translation itself
    * stays lower case because it is reused mid-sentence in the day labels.
    */
-  get _title() {
-    const month = this._t(`components.date-picker.${MONTH_KEYS[this._viewMonth - 1]}-capitalize`);
-    return `${month} ${this._viewYear}`;
+  get _monthLabel() {
+    return this._t(`components.date-picker.${MONTH_KEYS[this._viewMonth - 1]}-capitalize`);
   }
   // — Cell state ———————————————————————————————————————————————————————————
   _isSelected(iso) {
@@ -35174,7 +35315,6 @@ let NLDDDatePicker = class extends withTranslations(
     this._view = next;
     const day = Math.min(Number(this._focused.slice(8, 10)), Number(lastOfMonth(next).slice(8, 10)));
     this._focused = clampIso(`${next.slice(0, 7)}-${String(day).padStart(2, "0")}`, this._min, this._max);
-    this._restoreFocus = Boolean(this._focusedCell());
   }
   _moveFocus(iso) {
     const target = clampIso(iso, this._min, this._max);
@@ -35344,7 +35484,6 @@ let NLDDDatePicker = class extends withTranslations(
     const today = todayIso();
     this._view = firstOfMonth(today);
     this._focused = today;
-    this._restoreFocus = Boolean(this._focusedCell());
   }
   render() {
     return datePickerTemplate(this);
@@ -35399,6 +35538,9 @@ __decorateClass$14([
 __decorateClass$14([
   state()
 ], NLDDDatePicker.prototype, "_announcement", 2);
+__decorateClass$14([
+  state()
+], NLDDDatePicker.prototype, "_monthMenuOpen", 2);
 __decorateClass$14([
   state()
 ], NLDDDatePicker.prototype, "_yearMenuOpen", 2);
@@ -35439,6 +35581,7 @@ function renderPicker$1(component) {
 			></nldd-icon-button>
 			<nldd-popover
 				accessible-label=${component._pickerLabel}
+				placement="bottom-end"
 				width=${component._pickerPopoverWidth}
 				@toggle=${component._handlePopoverToggle}
 			>
@@ -37082,7 +37225,6 @@ const passwordFieldStyles = css$1`
 		border-radius: var(--_corner-radius);
 		background-color: var(--_background-color);
 		min-height: var(--_min-size);
-		overflow: hidden;
 		padding-left: calc(var(--_inline-padding) - var(--semantics-input-fields-border-width));
 		flex-direction: row;
 		align-items: center;
@@ -37116,10 +37258,6 @@ const passwordFieldStyles = css$1`
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
-	.password-field:has(.password-field__visibility-toggle-button:focus-within) {
-		overflow: visible;
-	}
-
 
 	/* # Elements */
 
@@ -57503,7 +57641,9 @@ const cardStyles = css$1`
 	/* # Host */
 
 	:host {
-		--_highlight-border: inset 0 0 0 var(--components-card-highlight-border-width) var(--components-card-highlight-border-color);
+		--_background-color: var(--components-card-background-color);
+		--_border-color: var(--components-card-highlight-border-color);
+		--_highlight-border: inset 0 0 0 var(--components-card-highlight-border-width) var(--_border-color);
 
 		display: flex;
 		/* Anchor for the focus ring, which hangs outside the card box. */
@@ -57516,6 +57656,14 @@ const cardStyles = css$1`
 	}
 
 
+	/* ## Background variants */
+
+	:host([background="tinted"]) {
+		--_background-color: var(--components-card-tinted-background-color);
+		--_border-color: var(--components-card-tinted-highlight-border-color);
+	}
+
+
 	/* # Block */
 
 	.card {
@@ -57523,7 +57671,7 @@ const cardStyles = css$1`
 		position: relative;
 		border-radius: var(--components-card-corner-radius);
 		box-shadow: var(--components-card-box-shadow);
-		background-color: var(--components-card-background-color);
+		background-color: var(--_background-color);
 		overflow: hidden;
 		flex-direction: column;
 		flex-grow: 1;
@@ -57674,6 +57822,7 @@ var __decorateClass$v = (decorators, target, key, kind) => {
 let NLDDCard = class extends withTranslations(LitElement, nlddCardTranslations) {
   constructor() {
     super(...arguments);
+    this.background = "base";
     this.href = "";
     this.button = false;
     this.target = "";
@@ -57723,6 +57872,9 @@ let NLDDCard = class extends withTranslations(LitElement, nlddCardTranslations)
   }
 };
 NLDDCard.styles = cardStyles;
+__decorateClass$v([
+  property({ reflect: true, converter: reflectNonDefault("base") })
+], NLDDCard.prototype, "background", 2);
 __decorateClass$v([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDCard.prototype, "accessibleLabel", 2);
@@ -58000,9 +58152,13 @@ let NLDDCollection = class extends LitElement {
     this._scrollListener = () => {
       const el = this._itemsEl;
       if (!el) return;
+      const wasAtStart = this._atStart;
+      const wasAtEnd = this._atEnd;
       this._atStart = el.scrollLeft < 1;
       this._atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
       this._isScrollable = el.scrollWidth > el.clientWidth;
+      if (!wasAtStart && this._atStart) this._handOffControlFocus("previous");
+      if (!wasAtEnd && this._atEnd) this._handOffControlFocus("next");
     };
     this._scrollListenerAttached = false;
   }
@@ -58010,6 +58166,22 @@ let NLDDCollection = class extends LitElement {
   _t(key) {
     return this.translations[key] ?? nlddCollectionTranslations[key];
   }
+  /* A keyboard user who scrolls to an end disables the control they are
+   * standing on, and a disabled control cannot hold focus: the browser drops
+   * focus to the body and the next Tab restarts at the top of the page. Hand
+   * focus to the sibling control instead — it sits right next to the one
+   * being disabled and is by definition usable at that end. */
+  _handOffControlFocus(disabling) {
+    const controls = this.shadowRoot?.querySelectorAll("nldd-icon-button");
+    if (!controls || controls.length < 2) return;
+    const [previous, next] = controls;
+    const losing = disabling === "previous" ? previous : next;
+    if (this.shadowRoot?.activeElement !== losing) return;
+    const target = disabling === "previous" ? next : previous;
+    void this.updateComplete.then(() => {
+      if (!target.disabled) target.focus();
+    });
+  }
   connectedCallback() {
     super.connectedCallback();
     this._visibleCount = this.maxItems;
@@ -58093,11 +58265,27 @@ let NLDDCollection = class extends LitElement {
   get _hasMore() {
     return this._visibleCount < this._totalCount;
   }
+  /* Scroll to an item edge, not by a fixed distance. The last scroll position
+   * is wherever the content ends, which is rarely a whole number of items, so
+   * stepping by item + gap from there keeps that remainder forever and every
+   * item lands clipped. Snapping to the next edge in the given direction puts
+   * an item flush against the padded start again. */
   _scrollBy(direction) {
-    const slot = this._itemsEl?.querySelector("slot");
-    const firstItem = slot?.assignedElements()[0];
-    const itemWidth = firstItem?.offsetWidth ?? 280;
-    this._itemsEl?.scrollBy({ left: direction * (itemWidth + 16), behavior: "smooth" });
+    const el = this._itemsEl;
+    if (!el) return;
+    const slot = el.querySelector("slot");
+    const items = slot?.assignedElements() ?? [];
+    if (items.length === 0) return;
+    const scrollerLeft = el.getBoundingClientRect().left;
+    const inset = parseFloat(getComputedStyle(el).scrollPaddingInlineStart) || 0;
+    const starts = items.map(
+      (item) => Math.round(item.getBoundingClientRect().left - scrollerLeft + el.scrollLeft - inset)
+    );
+    const epsilon = 2;
+    const current = el.scrollLeft;
+    const target = direction === 1 ? starts.find((start) => start > current + epsilon) : starts.filter((start) => start < current - epsilon).pop();
+    if (target === void 0) return;
+    el.scrollTo({ left: target, behavior: "smooth" });
   }
   render() {
     return collectionTemplate(this);
@@ -60422,7 +60610,10 @@ const listItemStyles = css$1`
 		/* Not the host's 100%: a width plus negative margins is over-constrained
 		   in block layout, so the row would shift instead of widen. */
 		width: auto;
-		margin-inline: calc(-1 * var(--components-list-item-indicator-inline-inset));
+		/* !important: shields the widening from consumer universal resets, which
+		   beat normal :host declarations per CSS Scoping. A negative margin
+		   cannot move inward — an inner element cannot reach outside the host. */
+		margin-inline: calc(-1 * var(--components-list-item-indicator-inline-inset)) !important;
 	}
 
 	:host(.is-interactive) .list-item {
@@ -61042,9 +61233,25 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
    * keeps its default. Insets are measured against the row block (the widened
    * box on interactive rows), so the values compose with the edge geometry.
    */
+  /**
+   * The cell the divider starts at when nobody said otherwise: a row that
+   * opens with an icon reads better with the line aligned to its text, the
+   * way a leading avatar or icon insets the divider in every list of this
+   * kind. Only leading spacers may sit in front of the icon; anything else
+   * means the row does not open with an icon after all. Put `divider-start`
+   * on the icon cell itself to get the full-width line back.
+   */
+  _implicitDividerStart() {
+    const cells = Array.from(this.children).filter((el) => el.tagName.startsWith("NLDD-") && el.tagName.endsWith("-CELL"));
+    const meaningful = cells.filter((el) => el.tagName !== "NLDD-SPACER-CELL");
+    const [first, second] = meaningful;
+    if (first?.tagName !== "NLDD-ICON-CELL" || !second) return [];
+    return second.tagName === "NLDD-TEXT-CELL" || second.tagName === "NLDD-TITLE-CELL" ? [second] : [];
+  }
   _measureDividerMarkers() {
     if (this.hasAttribute("data-nldd-clone")) return;
-    const starts = this._ownDescendants("[divider-start]");
+    const explicitStarts = this._ownDescendants("[divider-start]");
+    const starts = explicitStarts.length ? explicitStarts : this._implicitDividerStart();
     const ends = this._ownDescendants("[divider-end]");
     const targets = starts.length || ends.length ? [this, ...starts, ...ends] : [];
     const sameTargets = targets.length === this._observedMarkerTargets.length && targets.every((target, i) => target === this._observedMarkerTargets[i]);
@@ -61702,8 +61909,12 @@ const tableRowStyles = css$1`
 		grid-column: 1 / -1;
 		grid-template-columns: subgrid;
 		min-height: var(--_min-height);
-		border-bottom: var(--_divider-thickness) solid var(--_divider-color);
-		padding-inline: var(--_padding-inline);
+		/* !important: shields divider and inset from consumer universal resets,
+		   which beat normal :host declarations per CSS Scoping. They cannot move
+		   inward: the row is a subgrid participant, and a wrapper would break
+		   the parent-child column relation. */
+		border-bottom: var(--_divider-thickness) solid var(--_divider-color) !important;
+		padding-inline: var(--_padding-inline) !important;
 		align-items: center;
 	}
 
@@ -61723,7 +61934,9 @@ const tableRowStyles = css$1`
 	   divider (no doubling on the ring). Inner dividers run full-bleed to the
 	   sides — the padding only insets the cell content, not the row's border. */
 	:host(:last-child) {
-		border-bottom: none;
+		/* !important: the base border-bottom above is important, so this
+		   suppression has to be too. */
+		border-bottom: none !important;
 	}
 
 	/* display:contents so the cells become grid items of this subgrid. */
@@ -62014,7 +62227,8 @@ const cellStyles = css$1`
 		--_min-height: 0;
 
 		${inheritedTextReset}
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		display: flex;
 		width: var(--_width);
 		min-width: var(--_min-width);
@@ -62191,7 +62405,8 @@ const titleCellStyles = css$1`
 		--_title-font: var(--primitives-font-display-5-sm);
 
 		${inheritedTextReset}
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		display: flex;
 		width: var(--_width);
 		min-width: var(--_min-width);
@@ -62556,7 +62771,8 @@ const descriptionCellStyles = css$1`
 		--_min-height: 0;
 
 		${inheritedTextReset}
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		display: flex;
 		width: var(--_width);
 		min-width: var(--_min-width);
@@ -62741,7 +62957,8 @@ const dragHandleCellStyles = css$1`
 		--_height: var(--semantics-controls-md-min-size);
 
 		display: inline-flex;
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		cursor: grab;
 		width: fit-content;
 		align-items: center;
@@ -62897,7 +63114,8 @@ const timelineTrackCellStyles = css$1`
 
 		isolation: isolate;
 		display: flex;
-		padding-block: var(--context-cell-padding-block, 0px);
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
 		width: var(--_lane-size);
 		flex-direction: column;
 		align-self: stretch;
@@ -63057,7 +63275,7 @@ var __decorateClass$h = (decorators, target, key, kind) => {
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-let NLDDTimelineTrackCell = class extends LitElement {
+let NLDDTimelineTrackCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.status = "past";
@@ -63074,7 +63292,8 @@ let NLDDTimelineTrackCell = class extends LitElement {
   get showsContent() {
     return !this.minor && this.variant === "step";
   }
-  updated() {
+  updated(changed) {
+    super.updated(changed);
     return;
   }
   render() {
@@ -67937,7 +68156,11 @@ const bannerStyles = css$1`
 	}
 
 
-	/* # Host */
+	/* # Host
+	 *
+	 * The visual framework lives on .banner, not :host: outer-document rules
+	 * (a consumer's universal reset) beat normal :host declarations per CSS
+	 * Scoping. The host only keeps the external contract. */
 
 	:host {
 		--_corner-radius: var(--components-banner-corner-radius);
@@ -67955,23 +68178,11 @@ const bannerStyles = css$1`
 		--_actions-gap: var(--primitives-space-4);
 
 		${inheritedTextReset}
-		box-sizing: border-box;
-		display: grid;
-		position: relative;
-		border-radius: var(--_corner-radius);
-		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
-		background-color: var(--_background-color);
+		display: block;
 		width: 100%;
-		padding: var(--_padding);
-		grid-template-columns: auto 1fr;
-		gap: var(--_column-gap);
 		color: var(--_content-color);
 	}
 
-	:host([dismissible]) {
-		padding-right: var(--_dismissible-padding-right);
-	}
-
 	:host([hidden]) {
 		display: none;
 	}
@@ -68000,8 +68211,26 @@ const bannerStyles = css$1`
 		--_icon-color: var(--semantics-categories-critical-reference-background-color);
 	}
 
+	/* # Block */
+
+	.banner {
+		box-sizing: border-box;
+		display: grid;
+		position: relative;
+		border-radius: var(--_corner-radius);
+		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
+		background-color: var(--_background-color);
+		padding: var(--_padding);
+		grid-template-columns: auto 1fr;
+		gap: var(--_column-gap);
+	}
+
+	:host([dismissible]) .banner {
+		padding-right: var(--_dismissible-padding-right);
+	}
+
 	@media (forced-colors: active) {
-		:host {
+		.banner {
 			border: var(--_border-width) solid CanvasText;
 		}
 	}
@@ -68099,44 +68328,46 @@ function bannerTemplate(component) {
     }
   };
   return html$1`
-		<div class="banner__icon"
-			aria-hidden="true"
-		>
-			<nldd-icon name=${component._resolvedIcon}></nldd-icon>
-		</div>
-		<div class="banner__main">
-			${component.text || component.supportingText ? html$1`
-				<div class="banner__heading">
-					${component.text ? heading2(component.text) : nothing}
-					${component.supportingText ? html$1`
-						<p class="banner__supporting-text">${component.supportingText}</p>
-					` : nothing}
-				</div>
-			` : nothing}
-			<div class="banner__content"
-				?hidden=${!component._hasContent}
+		<div class="banner">
+			<div class="banner__icon"
+				aria-hidden="true"
 			>
-				<slot></slot>
+				<nldd-icon name=${component._resolvedIcon}></nldd-icon>
 			</div>
-			<div class="banner__actions"
-				?hidden=${!component._hasActions}
-			>
-				<nldd-button-group orientation="horizontal">
-					<slot name="actions"></slot>
-				</nldd-button-group>
+			<div class="banner__main">
+				${component.text || component.supportingText ? html$1`
+					<div class="banner__heading">
+						${component.text ? heading2(component.text) : nothing}
+						${component.supportingText ? html$1`
+							<p class="banner__supporting-text">${component.supportingText}</p>
+						` : nothing}
+					</div>
+				` : nothing}
+				<div class="banner__content"
+					?hidden=${!component._hasContent}
+				>
+					<slot></slot>
+				</div>
+				<div class="banner__actions"
+					?hidden=${!component._hasActions}
+				>
+					<nldd-button-group orientation="horizontal">
+						<slot name="actions"></slot>
+					</nldd-button-group>
+				</div>
 			</div>
+			${component.dismissible ? html$1`
+				<div class="banner__dismiss-button">
+					<nldd-icon-button
+						icon="dismiss-small"
+						variant="neutral-transparent"
+						size="md"
+						accessible-label=${component._t("components.banner.dismiss-action")}
+						@click=${component._onDismissClick}
+					></nldd-icon-button>
+				</div>
+			` : nothing}
 		</div>
-		${component.dismissible ? html$1`
-			<div class="banner__dismiss-button">
-				<nldd-icon-button
-					icon="dismiss-small"
-					variant="neutral-transparent"
-					size="md"
-					accessible-label=${component._t("components.banner.dismiss-action")}
-					@click=${component._onDismissClick}
-				></nldd-icon-button>
-			</div>
-		` : nothing}
 	`;
 }
 const nlddBannerTranslations = {
@@ -68989,10 +69220,21 @@ const progressBarSegmentIndicatorStyles = css$1`
 	}
 
 
+	/* # Block
+	   Full-bleed inner box; carries what must not sit on :host, like the
+	   forced-colors outline below. */
+
+	.progress-bar__segment-indicator {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+	}
+
+
 	/* # Hover area (tooltip trigger)
 	   Fills the segment; captures hover/focus for the wrapping nldd-tooltip. */
 
-	.progress-bar-segment-indicator__tooltip-area {
+	.progress-bar__segment-indicator-tooltip-area {
 		display: block;
 		position: absolute;
 		inset: 0;
@@ -69010,10 +69252,39 @@ const progressBarSegmentIndicatorStyles = css$1`
 	@media (forced-colors: active) {
 		:host {
 			background-color: CanvasText;
+		}
+
+		/* box-shadow is stripped in forced-colors, so a real border draws the
+		   segment outline. It sits on the block element instead of :host, out
+		   of reach of consumer universal resets. */
+		.progress-bar__segment-indicator {
 			border: 1px solid CanvasText;
 		}
 	}
 `;
+function segmentIndicatorTemplate(component) {
+  const text = component._effectiveTooltip;
+  if (!text) {
+    return html$1`
+			<div class="progress-bar__segment-indicator">
+				<span class="progress-bar__segment-indicator-tooltip-area"></span>
+			</div>
+		`;
+  }
+  return html$1`
+		<div class="progress-bar__segment-indicator">
+			<nldd-tooltip text=${text}
+				timing="instant"
+			>
+				<span class="progress-bar__segment-indicator-tooltip-area"
+					tabindex="0"
+					role="img"
+					aria-label=${text}
+				></span>
+			</nldd-tooltip>
+		</div>
+	`;
+}
 function progressBarTemplate(component, onSlotChange) {
   const hasCaption = component._hasCaption;
   const isExiting = component._indeterminateExiting;
@@ -69038,7 +69309,7 @@ function progressBarTemplate(component, onSlotChange) {
 			aria-valuetext=${component._ariaValueText}
 		>
 			${showInternalSegmentIndicator ? html$1`
-				<nldd-progress-bar-segment-indicator class="progress-bar__segment-indicator"
+				<nldd-progress-bar-segment-indicator
 					.value=${component.value}
 					color=${component.color}
 				></nldd-progress-bar-segment-indicator>
@@ -69084,19 +69355,7 @@ let NLDDProgressBarSegmentIndicator = class extends LitElement {
     return this.tooltipText || this._autoTooltipText || "";
   }
   render() {
-    const text = this._effectiveTooltip;
-    if (!text) {
-      return html$1`<span class="progress-bar-segment-indicator__tooltip-area"></span>`;
-    }
-    return html$1`
-			<nldd-tooltip text=${text} timing="instant">
-				<span class="progress-bar-segment-indicator__tooltip-area"
-					tabindex="0"
-					role="img"
-					aria-label=${text}
-				></span>
-			</nldd-tooltip>
-		`;
+    return segmentIndicatorTemplate(this);
   }
 };
 NLDDProgressBarSegmentIndicator.styles = progressBarSegmentIndicatorStyles;
@@ -69297,7 +69556,7 @@ let NLDDProgressBar = class extends LitElement {
     const total = this._totalValue;
     const denominator = total > this.max ? total : this.max;
     const internalSegmentIndicator = this.shadowRoot?.querySelector(
-      ".progress-bar__segment-indicator"
+      "nldd-progress-bar-segment-indicator"
     ) ?? null;
     const allSegmentIndicators = internalSegmentIndicator ? [internalSegmentIndicator, ...this._segmentIndicators] : [...this._segmentIndicators];
     const visibleCount = allSegmentIndicators.filter((s) => Math.max(0, s.value) > 0).length;