@nldd/design-system 0.8.93 → 0.8.94

package/dist/components/components.js

@@ -1,14 +1,14 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
 import { n as slottedReset, t as inheritedTextReset } from "./shadow-resets-aG-rgyNQ.js";
-import { n as linkRel, t as withTranslations } from "./with-translations-BAKFoEKy.js";
+import { i as linkRel, n as setTranslations, r as translate, t as withTranslations } from "./with-translations-Dt2DTXJF.js";
 import { t as __decorate } from "./decorate-lwt_OrAG.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-hO6k8W63.js";
+import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-DHzLMmj0.js";
 import { t as NLDDIcon } from "./icon-DWNVcttg.js";
 import { n as isPointerMode, r as isTouchMode, t as isKeyboardMode } from "./input-modality-DhTeUxKi.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { t as VisibilityMixin } from "./visibility-mixin-BU1vIMW7.js";
-import { $ as layer, A as syntaxTree, B as Tree, C as indentNodeProp, Ct as countColumn, D as matchBrackets, E as languageDataProp, F as NodeProp, G as RectangleMarker, H as Decoration, I as NodeSet, J as drawSelection, K as ViewPlugin, L as NodeType, M as styleTags, N as tags, Q as keymap, S as getIndentation, St as combineConfig, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as getDrawSelectionConfig, Y as dropCursor, _t as StateField, a as HighlightStyle, at as Annotation, b as foldService, c as Language, ct as Compartment, d as ParseContext, dt as Facet, et as lineNumbers, f as StreamLanguage, gt as StateEffect, h as defineLanguageFacet, it as tooltips, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as EditorSelection, mt as RangeSetBuilder, nt as placeholder, o as IndentContext, ot as ChangeDesc, pt as Prec, q as WidgetType, st as ChangeSet, u as LanguageSupport, ut as EditorState, vt as Text, w as indentString, wt as findClusterBreak, x as getIndentUnit, y as foldNodeProp, yt as Transaction, z as Parser } from "./dist-Dn3c5gfb.js";
+import { $ as layer, A as syntaxTree, B as Tree, C as indentNodeProp, Ct as countColumn, D as matchBrackets, E as languageDataProp, F as NodeProp, G as RectangleMarker, H as Decoration, I as NodeSet, J as drawSelection, K as ViewPlugin, L as NodeType, M as styleTags, N as tags, Q as keymap, S as getIndentation, St as combineConfig, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as getDrawSelectionConfig, Y as dropCursor, _t as StateField, a as HighlightStyle, at as Annotation, b as foldService, c as Language, ct as Compartment, d as ParseContext, dt as Facet, et as lineNumbers, f as StreamLanguage, gt as StateEffect, h as defineLanguageFacet, it as tooltips, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as EditorSelection, mt as RangeSetBuilder, nt as placeholder, o as IndentContext, ot as ChangeDesc, pt as Prec, q as WidgetType, rt as showTooltip, st as ChangeSet, u as LanguageSupport, ut as EditorState, vt as Text, w as indentString, wt as findClusterBreak, x as getIndentUnit, y as foldNodeProp, yt as Transaction, z as Parser } from "./dist-Dn3c5gfb.js";
 import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-BUu-NW5O.js";
 import { n as html$2, r as htmlCompletionSource } from "./dist-Dxn9Up8K.js";
 import { LitElement, css, html, nothing, svg, unsafeCSS } from "lit";
@@ -109,7 +109,7 @@ var buttonStyles = css`
 		--_supporting-font: var(--semantics-buttons-lg-supporting-text-font);
 	}
 
-	:host([variant="neutral-base"]) {
+	:host([appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-background-color);
 		--_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
 		--_secondary-content-color: var(--semantics-buttons-neutral-base-content-secondary-color);
@@ -124,7 +124,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
 	}
 
-	:host([variant="neutral-transparent"]) {
+	:host([appearance="neutral-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
 		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
@@ -139,8 +139,8 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([variant="accent-filled"]),
-	:host([variant="primary"]) {
+	:host([appearance="accent-filled"]),
+	:host([appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-background-color);
 		--_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
 		--_secondary-content-color: var(--semantics-buttons-accent-filled-content-secondary-color);
@@ -155,7 +155,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
 	}
 
-	:host([variant="accent-transparent"]) {
+	:host([appearance="accent-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
 		--_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
@@ -170,8 +170,8 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([variant="critical-tinted"]),
-	:host([variant="destructive"]) {
+	:host([appearance="critical-tinted"]),
+	:host([appearance="destructive"]) {
 		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
 		--_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
 		--_secondary-content-color: var(--semantics-buttons-critical-tinted-content-secondary-color);
@@ -186,7 +186,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
 	}
 
-	:host([variant="critical-transparent"]) {
+	:host([appearance="critical-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
 		--_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
@@ -207,34 +207,36 @@ var buttonStyles = css`
 	   here on the host — inside a :root token it would freeze — with the
 	   tokens' white/black contrast flip as fallback. */
 
-	:host([variant="inherit-tinted"]) {
-		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
+	:host([appearance="inherit-tinted"]),
+	:host([expanded][appearance="inherit-tinted"]) {
+		--_background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
 		--_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
 		--_secondary-content-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-secondary-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-secondary-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-active-highlight-border-color);
-	}
-
-	:host([variant="inherit-filled"]) {
+		--_is-hovered-background-color: var(--_background-color);
+		--_is-hovered-primary-content-color: var(--_primary-content-color);
+		--_is-hovered-secondary-content-color: var(--_secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--_highlight-border-color);
+		--_is-active-background-color: var(--_background-color);
+		--_is-active-primary-content-color: var(--_primary-content-color);
+		--_is-active-secondary-content-color: var(--_secondary-content-color);
+		--_is-active-highlight-border-color: var(--_highlight-border-color);
+	}
+
+	:host([appearance="inherit-filled"]),
+	:host([expanded][appearance="inherit-filled"]) {
 		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
 		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
 		--_secondary-content-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-secondary-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-secondary-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-active-highlight-border-color);
+		--_is-hovered-background-color: var(--_background-color);
+		--_is-hovered-primary-content-color: var(--_primary-content-color);
+		--_is-hovered-secondary-content-color: var(--_secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--_highlight-border-color);
+		--_is-active-background-color: var(--_background-color);
+		--_is-active-primary-content-color: var(--_primary-content-color);
+		--_is-active-secondary-content-color: var(--_secondary-content-color);
+		--_is-active-highlight-border-color: var(--_highlight-border-color);
 	}
 
 	/* For inherit-filled the inner button keeps the inherited on-color:
@@ -242,11 +244,11 @@ var buttonStyles = css`
 	   against it, and would otherwise self-reference the label. The label
 	   color moves to the content layer instead. The higher specificity of
 	   these rules deliberately pins the color through hover/active/expanded. */
-	:host([variant="inherit-filled"]) .button {
+	:host([appearance="inherit-filled"]) .button {
 		color: inherit;
 	}
 
-	:host([variant="inherit-filled"]) .button > * {
+	:host([appearance="inherit-filled"]) .button > * {
 		color: var(--_primary-content-color);
 	}
 
@@ -267,7 +269,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="neutral-base"]) {
+	:host([expanded][appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
 		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
 		--_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-secondary-color);
@@ -282,7 +284,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="neutral-transparent"]) {
+	:host([expanded][appearance="neutral-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
 		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
@@ -297,8 +299,8 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([expanded][variant="accent-filled"]),
-	:host([expanded][variant="primary"]) {
+	:host([expanded][appearance="accent-filled"]),
+	:host([expanded][appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
 		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
 		--_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-secondary-color);
@@ -313,7 +315,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="accent-transparent"]) {
+	:host([expanded][appearance="accent-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
 		--_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
@@ -328,8 +330,8 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([expanded][variant="critical-tinted"]),
-	:host([expanded][variant="destructive"]) {
+	:host([expanded][appearance="critical-tinted"]),
+	:host([expanded][appearance="destructive"]) {
 		--_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
 		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
 		--_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-secondary-color);
@@ -344,7 +346,7 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="critical-transparent"]) {
+	:host([expanded][appearance="critical-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
 		--_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
@@ -359,40 +361,6 @@ var buttonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	/* The on-color variants keep their currentColor-derived content; expanded
-	   only deepens the background. Content is restated (not inherited from the
-	   resting block) because the default [expanded] block has equal
-	   specificity and later source order, so it would otherwise win. */
-	:host([expanded][variant="inherit-tinted"]) {
-		--_background-color: var(--semantics-buttons-inherit-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-color);
-		--_secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-secondary-color);
-		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-secondary-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-secondary-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color);
-	}
-
-	:host([expanded][variant="inherit-filled"]) {
-		--_background-color: var(--semantics-buttons-inherit-filled-is-expanded-background-color);
-		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-content-color));
-		--_secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-content-secondary-color);
-		--_highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-secondary-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-secondary-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color);
-	}
-
 	:host([width="full"]) {
 		display: block;
 		width: 100%;
@@ -691,6 +659,7 @@ function template$23(helpers) {
 				<nldd-activity-indicator
 					timing="instant"
 					size=${this.size === "xs" ? "16" : this.size === "sm" ? "20" : this.size === "lg" ? "28" : "24"}
+					text=${this.loadingText || nothing}
 				></nldd-activity-indicator>
 			</div>
 		` : nothing;
@@ -833,10 +802,11 @@ function DescribedBy(Base) {
 * Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
 *
 * @element nldd-button
-* @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback.
+* @attr {string} appearance - Visual style, color included: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit appearances derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback.
 * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons.
 * @attr {string} horizontal-alignment - Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width.
 * @attr {boolean} loading - Loading state (default: false). Shows an activity indicator over the visually hidden content, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled). The content stays laid out, so the button keeps its width.
+* @attr {string} loading-text - What the screen reader announces while `loading` is on, for a button that does more than load: "Aan het bewaren". Leave it out and the activity indicator says its translated "Laden".
 * @attr {boolean} disabled - Disabled state
 * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
 * @attr {string} popovertarget - ID of a popover element this button invokes; forwarded to the inner button. Use the popoverTargetElement property instead when the popover lives in another tree.
@@ -849,7 +819,7 @@ function DescribedBy(Base) {
 * @attr {string} text - Button text
 * @attr {string} supporting-text - Supporting text shown below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name).
 * @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
-* @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).
+* @attr {boolean} no-highlight-border - Removes the per-appearance highlight border (e.g. when nldd-button-bar draws a single group border instead).
 * @attr {boolean} no-tab - Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. a button in a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable.
 * @attr {string} start-icon - Icon name for the start icon (before text)
 * @attr {string} end-icon - Icon name for the end icon (after text)
@@ -871,7 +841,7 @@ var NLDDButton = (_NLDDButton = class NLDDButton extends DescribedBy(withTransla
 	constructor(..._args) {
 		super(..._args);
 		this._internals = this.attachInternals();
-		this.variant = "neutral-tinted";
+		this.appearance = "neutral-tinted";
 		this.size = "md";
 		this.horizontalAlignment = "";
 		this.width = "";
@@ -884,6 +854,7 @@ var NLDDButton = (_NLDDButton = class NLDDButton extends DescribedBy(withTransla
 		this.popoverTargetElement = null;
 		this.popoverTargetAction = "toggle";
 		this.loading = false;
+		this.loadingText = "";
 		this.disabled = false;
 		this.text = "";
 		this.supportingText = "";
@@ -973,7 +944,7 @@ var NLDDButton = (_NLDDButton = class NLDDButton extends DescribedBy(withTransla
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("neutral-tinted")
-})], NLDDButton.prototype, "variant", void 0);
+})], NLDDButton.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("md")
@@ -1022,6 +993,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDButton.prototype, "loading", void 0);
+__decorate([property({ attribute: "loading-text" })], NLDDButton.prototype, "loadingText", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -1105,19 +1077,34 @@ var splitButtonStyles = css`
 
 	/* ## Accent Filled (Primary) */
 
-	:host([variant="accent-filled"]),
-	:host([variant="primary"]) {
+	:host([appearance="accent-filled"]),
+	:host([appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-background-color);
 		--_divider-color: var(--semantics-buttons-accent-filled-divider-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
 	}
 
-	:host([variant="neutral-base"]) {
+	:host([appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-background-color);
 		--_divider-color: var(--semantics-buttons-neutral-base-divider-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
 	}
 
+	/* ## On-color */
+
+	:host([appearance="inherit-tinted"]) {
+		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
+		--_divider-color: var(--semantics-buttons-inherit-tinted-divider-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
+		--context-button-background-color: transparent;
+	}
+
+	:host([appearance="inherit-filled"]) {
+		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
+		--_divider-color: var(--semantics-buttons-inherit-filled-divider-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
+	}
+
 	:host([width="full"]) {
 		display: block;
 		width: 100%;
@@ -1187,7 +1174,7 @@ function template$22() {
 	return html`
 		<div class="split-button">
 			<nldd-button
-				variant=${this.variant}
+				appearance=${this.appearance}
 				size=${this.size}
 				text=${this.text}
 				start-icon=${this.icon || nothing}
@@ -1200,7 +1187,7 @@ function template$22() {
 			<div class="split-button__divider"></div>
 			<div class="split-button__popup-button">
 				<nldd-icon-button
-					variant=${this.variant}
+					appearance=${this.appearance}
 					size=${this.size}
 					icon="chevron-down-small"
 					text=${this._t("components.split-button.menu-action")}
@@ -1747,16 +1734,17 @@ function menuTemplate(isEmpty, variant) {
 }
 function menuItemTemplate(variant = null) {
 	const hasCheckState = this.type !== "button" && variant === "menu";
+	const hasCheckColumn = hasCheckState || this.checkColumn && variant === "menu";
 	const role = variant ? itemRoleMap[this.type][variant] : nothing;
 	const hasSubmenu = this._hasSubmenu;
 	const safeHref = sanitizeUrl(this.href) ?? "";
 	const asLink = !!safeHref && this.type === "button" && !hasSubmenu && !this.disabled;
 	const content = html`
-		${hasCheckState ? html`
+		${hasCheckColumn ? html`
 			<nldd-icon-cell
 				size="24"
 				horizontal-alignment="center"
-				icon=${this.selected ? "check-mark" : nothing}
+				icon=${hasCheckState && this.selected ? "check-mark" : nothing}
 			></nldd-icon-cell>
 			<nldd-spacer-cell size="4"></nldd-spacer-cell>
 		` : nothing}
@@ -1800,7 +1788,7 @@ function menuItemTemplate(variant = null) {
 			>
 				<nldd-keyboard-shortcut
 					size="inherit"
-					variant="simple"
+					appearance="simple"
 					color="inherit"
 					keys=${this.shortcut || nothing}
 					mac-keys=${this.shortcutMac || nothing}
@@ -2631,16 +2619,16 @@ var keyboardShortcutStyles = css`
 		--_font-size: 0.75em;
 	}
 
-	:host([variant="simple"]) {
+	:host([appearance="simple"]) {
 		--_font-family: var(--primitives-font-family-body);
 		--_font-size: var(--primitives-font-size-100);
 	}
 
-	:host([variant="simple"][size="sm"]) {
+	:host([appearance="simple"][size="sm"]) {
 		--_font-size: var(--primitives-font-size-90);
 	}
 
-	:host([variant="simple"][size="inherit"]) {
+	:host([appearance="simple"][size="inherit"]) {
 		--_font-size: inherit;
 	}
 
@@ -2668,7 +2656,7 @@ var keyboardShortcutStyles = css`
 		top: -0.05em;
 	}
 
-	:host([size="inherit"][variant="simple"]) .keyboard-shortcut {
+	:host([size="inherit"][appearance="simple"]) .keyboard-shortcut {
 		position: static;
 	}
 
@@ -2694,11 +2682,11 @@ var keyboardShortcutStyles = css`
 		white-space: nowrap;
 	}
 
-	:host([variant="simple"]) .keyboard-shortcut {
+	:host([appearance="simple"]) .keyboard-shortcut {
 		gap: 0;
 	}
 
-	:host([variant="simple"]) .keyboard-shortcut__key {
+	:host([appearance="simple"]) .keyboard-shortcut__key {
 		box-shadow: none;
 		background-color: transparent;
 		border-radius: 0;
@@ -2712,7 +2700,7 @@ var keyboardShortcutStyles = css`
 			color: CanvasText;
 		}
 
-		:host(:not([variant="simple"])) .keyboard-shortcut__key {
+		:host(:not([appearance="simple"])) .keyboard-shortcut__key {
 			border: var(--components-keyboard-shortcut-border-width) solid CanvasText;
 			background-color: Canvas;
 		}
@@ -2795,7 +2783,7 @@ function detectOS() {
 * @attr {string} linux-keys - Optional override for Linux/ChromeOS.
 * @attr {string} size - Size: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' takes the
 *   font-size from the container; in the box variant the keycaps then scale along in em.
-* @attr {string} variant - 'box' (default) shows each key as a keycap with a fill and a
+* @attr {string} appearance - 'box' (default) shows each key as a keycap with a fill and a
 *   highlight edge. 'simple' shows the keys as plain text with separators: lighter, for
 *   inline use such as in a menu item.
 * @attr {boolean} always-visible - Show on touch-only devices too, where shortcuts cannot be invoked.
@@ -2819,7 +2807,7 @@ var NLDDKeyboardShortcut = (_NLDDKeyboardShortcut = class NLDDKeyboardShortcut e
 		this.windowsKeys = "";
 		this.linuxKeys = "";
 		this.size = "md";
-		this.variant = "box";
+		this.appearance = "box";
 		this.color = "neutral";
 		this.alwaysVisible = false;
 		this.debugOS = "";
@@ -2871,7 +2859,7 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("box")
-})], NLDDKeyboardShortcut.prototype, "variant", void 0);
+})], NLDDKeyboardShortcut.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("neutral")
@@ -3484,7 +3472,7 @@ if (!customElements.get("nldd-menu-group")) customElements.define("nldd-menu-gro
 * @attr {string} shortcut - Keyboard shortcut hint shown on the right, e.g. 'Cmd+E'. Display only (rendered via nldd-keyboard-shortcut) — it does not bind the key; wire up the handling in your app. Hidden on touch-only devices, where it isn't invokable.
 * @attr {string} shortcut-mac / shortcut-windows / shortcut-linux - Per-OS overrides for `shortcut`, picked by detected OS (falls back to `shortcut`).
 * @attr {string} href - Optional link target. A plain button item with an href renders as an `<a>` so it is a real link (middle-click, open in new tab, copy link). Ignored for submenu openers, checkbox/radio items, and while disabled.
-* @attr {string} type - Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'.
+* @attr {string} type - Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'. One checkbox or radio item gives every item in its menu the check-mark column, so the text of the whole menu starts at one line, as in a native menu. Submenus decide for themselves.
 * @attr {boolean} selected - Selected state for checkbox and radio types.
 * @attr {boolean} disabled - Disabled state.
 * @attr {string} value - A value of the item's own, read off the item in a `select` handler. The default filter matches on it as well as on `text` and `aliases`. Not a form value: this component is not form-associated.
@@ -3514,6 +3502,7 @@ var NLDDMenuItem = class NLDDMenuItem extends LitElement {
 		this.query = "";
 		this.queryMarkMode = "predictive";
 		this.menuVariant = null;
+		this.checkColumn = false;
 		this._submenuOpen = false;
 		this._cachedSubmenuEl = null;
 		this._submenuMutationObserver = null;
@@ -3549,6 +3538,9 @@ var NLDDMenuItem = class NLDDMenuItem extends LitElement {
 		if (this.hasUpdated) return;
 		this._cachedSubmenuEl = this.querySelector(":scope > nldd-menu");
 	}
+	updated(changedProperties) {
+		if (changedProperties.has("type") && changedProperties.get("type") !== void 0 && this.menuVariant) this.closest("nldd-menu")?._claimItems();
+	}
 	firstUpdated() {
 		this._submenuMutationObserver = new MutationObserver(() => {
 			const current = this.querySelector(":scope > nldd-menu");
@@ -3662,6 +3654,7 @@ __decorate([property({
 	converter: reflectNonDefault("predictive")
 })], NLDDMenuItem.prototype, "queryMarkMode", void 0);
 __decorate([state()], NLDDMenuItem.prototype, "menuVariant", void 0);
+__decorate([state()], NLDDMenuItem.prototype, "checkColumn", void 0);
 __decorate([state()], NLDDMenuItem.prototype, "_submenuOpen", void 0);
 if (!customElements.get("nldd-menu-item")) customElements.define("nldd-menu-item", NLDDMenuItem);
 var defaultFilterFn = (query, item) => {
@@ -4029,9 +4022,15 @@ var NLDDMenu = class NLDDMenu extends LitElement {
 		this._typeaheadBuffer = "";
 		this._typeaheadTimer = null;
 		this._claimItems = () => {
-			Array.from(this.querySelectorAll("nldd-menu-item")).forEach((item) => {
+			const items = Array.from(this.querySelectorAll("nldd-menu-item"));
+			items.forEach((item) => {
 				item.menuVariant = this.variant;
 			});
+			const own = items.filter((item) => item.closest("nldd-menu") === this);
+			const checkColumn = this.variant === "menu" && own.some((item) => item.type !== "button");
+			own.forEach((item) => {
+				item.checkColumn = checkColumn;
+			});
 		};
 		this._handleBeforeToggle = (event) => {
 			if (event.newState === "open") this.removeAttribute("positioned");
@@ -4075,9 +4074,7 @@ var NLDDMenu = class NLDDMenu extends LitElement {
 		};
 	}
 	_t(key, vars) {
-		let str = this.translations[key] ?? nlddMenuTranslations[key];
-		if (vars) for (const [k, v] of Object.entries(vars)) str = str.replace(`{${k}}`, String(v));
-		return str;
+		return translate(this.translations, nlddMenuTranslations, key, vars);
 	}
 	/** Resolved empty text: emptyText attribute takes precedence, then i18n fallback. */
 	get _resolvedEmptyText() {
@@ -4596,10 +4593,14 @@ var NLDDMenu = class NLDDMenu extends LitElement {
 	* remainder (predictive completion — the ARIA APG pattern for combobox).
 	*
 	* When the query is empty, all items are shown and `query` is cleared.
+	*
+	* With `hide: false` nothing is hidden and every item gets the `query`, for
+	* a list someone else already filtered, such as a server answering per
+	* keystroke. Text without the query in it is shown as it is.
 	*/
-	filter(query) {
+	filter(query, { hide = true } = {}) {
 		Array.from(this.querySelectorAll("nldd-menu-item")).forEach((item) => {
-			const matches = !query || this.filterFn(query, item);
+			const matches = !hide || !query || this.filterFn(query, item);
 			item.toggleAttribute("hidden", !matches);
 			item.query = matches && query ? query : "";
 		});
@@ -4810,7 +4811,7 @@ if (!customElements.get("nldd-menu")) customElements.define("nldd-menu", NLDDMen
 *
 * @element nldd-split-button
 * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
-* @attr {string} variant - Button variant (default: 'neutral-tinted')
+* @attr {string} appearance - Visual style (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface)
 * @attr {boolean} disabled - Disabled state
 * @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length; the main action button fills the available space
 * @attr {string} text - Button text for the primary action
@@ -4827,7 +4828,7 @@ var NLDDSplitButton = (_NLDDSplitButton = class NLDDSplitButton extends LitEleme
 	constructor(..._args) {
 		super(..._args);
 		this.size = "md";
-		this.variant = "neutral-tinted";
+		this.appearance = "neutral-tinted";
 		this.disabled = false;
 		this.width = "";
 		this.text = "";
@@ -4847,7 +4848,7 @@ var NLDDSplitButton = (_NLDDSplitButton = class NLDDSplitButton extends LitEleme
 		};
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddSplitButtonTranslations[key];
+		return translate(this.translations, nlddSplitButtonTranslations, key);
 	}
 	firstUpdated() {
 		this._popupButtonWrapper?.addEventListener("pointerdown", this._popup.handlePointerdown);
@@ -4895,7 +4896,7 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("neutral-tinted")
-})], NLDDSplitButton.prototype, "variant", void 0);
+})], NLDDSplitButton.prototype, "appearance", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -4955,19 +4956,34 @@ var buttonBarStyles = css`
 
 	/* ## Accent Filled (Primary) */
 
-	:host([variant="accent-filled"]),
-	:host([variant="primary"]) {
+	:host([appearance="accent-filled"]),
+	:host([appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-background-color);
 		--_divider-color: var(--semantics-buttons-accent-filled-divider-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
 	}
 
-	:host([variant="neutral-base"]) {
+	:host([appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-background-color);
 		--_divider-color: var(--semantics-buttons-neutral-base-divider-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
 	}
 
+	/* ## On-color */
+
+	:host([appearance="inherit-tinted"]) {
+		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
+		--_divider-color: var(--semantics-buttons-inherit-tinted-divider-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
+		--context-button-background-color: transparent;
+	}
+
+	:host([appearance="inherit-filled"]) {
+		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
+		--_divider-color: var(--semantics-buttons-inherit-filled-divider-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -5053,12 +5069,17 @@ function renderChild(child) {
 * Nederlandse Digitale Dienst Button Bar Component (Lit + TypeScript)
 *
 * A horizontal container for grouping buttons with a neutral background.
-* Automatically propagates its size and variant to all child nldd-button and nldd-icon-button elements.
+* Automatically propagates its size and appearance to all child nldd-button and nldd-icon-button elements.
 * Renders nldd-button-bar-divider elements as internal dividers — no separate component needed.
 *
+* The bar is one surface for actions; on/off buttons do not go in it. For a row
+* of toggles use nldd-toggle-button-group, and for one choice out of a few
+* options on one surface nldd-segmented-control. An nldd-toggle-button placed
+* here is shown as it is, and a warning says so in development.
+*
 * @element nldd-button-bar
 * @attr {string} size - Bar size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). At 'lg', icon-button children stack their label below the icon (mobile action-bar style).
-* @attr {string} variant - Button variant (default: 'neutral-tinted')
+* @attr {string} appearance - Visual style of the buttons (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface)
 * @attr {boolean} disabled - Disabled state
 *
 * @slot - Default slot for nldd-button, nldd-icon-button and nldd-button-bar-divider elements
@@ -5078,13 +5099,14 @@ var NLDDButtonBar = (_NLDDButtonBar = class NLDDButtonBar extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.size = "md";
-		this.variant = "neutral-tinted";
+		this.appearance = "neutral-tinted";
 		this.disabled = false;
 		this._children = [];
 		this._idCounter = 0;
 		this._observer = null;
 		this._building = false;
 		this._individuallyDisabled = /* @__PURE__ */ new WeakSet();
+		this._warnedToggleButton = false;
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -5103,7 +5125,7 @@ var NLDDButtonBar = (_NLDDButtonBar = class NLDDButtonBar extends LitElement {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has("size") || changedProperties.has("_children")) this._propagateSize();
-		if (changedProperties.has("variant") || changedProperties.has("_children")) this._propagateVariant();
+		if (changedProperties.has("appearance") || changedProperties.has("_children")) this._propagateAppearance();
 		if (changedProperties.has("disabled")) this._propagateDisabled();
 		else if (changedProperties.has("_children") && this.disabled) Array.from(this.children).filter((el) => BUTTON_TAGS.includes(el.tagName.toLowerCase())).forEach((el) => el.setAttribute("disabled", ""));
 	}
@@ -5118,8 +5140,8 @@ var NLDDButtonBar = (_NLDDButtonBar = class NLDDButtonBar extends LitElement {
 	_propagateSize() {
 		Array.from(this.children).filter((el) => BUTTON_TAGS.includes(el.tagName.toLowerCase())).forEach((el) => el.setAttribute("size", this.size));
 	}
-	_propagateVariant() {
-		Array.from(this.children).filter((el) => BUTTON_TAGS.includes(el.tagName.toLowerCase())).forEach((el) => el.setAttribute("variant", this.variant));
+	_propagateAppearance() {
+		Array.from(this.children).filter((el) => BUTTON_TAGS.includes(el.tagName.toLowerCase())).forEach((el) => el.setAttribute("appearance", this.appearance));
 	}
 	_propagateDisabled() {
 		const buttons = Array.from(this.children).filter((el) => BUTTON_TAGS.includes(el.tagName.toLowerCase()));
@@ -5145,9 +5167,10 @@ var NLDDButtonBar = (_NLDDButtonBar = class NLDDButtonBar extends LitElement {
 				type: "divider",
 				id: this._idCounter++
 			};
+			if (tag === "nldd-toggle-button") this._warnToggleButton();
 			if (BUTTON_TAGS.includes(tag)) {
 				el.setAttribute("size", this.size);
-				el.setAttribute("variant", this.variant);
+				el.setAttribute("appearance", this.appearance);
 				el.setAttribute("no-highlight-border", "");
 			}
 			const id = this._idCounter++;
@@ -5161,6 +5184,7 @@ var NLDDButtonBar = (_NLDDButtonBar = class NLDDButtonBar extends LitElement {
 		});
 		this._building = false;
 	}
+	_warnToggleButton() {}
 	render() {
 		return template$17.call(this);
 	}
@@ -5172,7 +5196,7 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("neutral-tinted")
-})], NLDDButtonBar.prototype, "variant", void 0);
+})], NLDDButtonBar.prototype, "appearance", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -5759,7 +5783,7 @@ var NLDDToolbarTitle = (_NLDDToolbarTitle = class NLDDToolbarTitle extends LitEl
 		this.size = "md";
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddToolbarTranslations[key];
+		return translate(this.translations, nlddToolbarTranslations, key);
 	}
 	willUpdate(changedProperties) {
 		if (changedProperties.has("minWidth")) this._reflectSizeVar("--_title-group-min-width", this.minWidth);
@@ -5862,7 +5886,7 @@ var NLDDToolbar = (_NLDDToolbar = class NLDDToolbar extends LitElement {
 		};
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddToolbarTranslations[key];
+		return translate(this.translations, nlddToolbarTranslations, key);
 	}
 	_getId(el) {
 		if (!this._childIds.has(el)) this._childIds.set(el, this._idCounter++);
@@ -7504,7 +7528,7 @@ var NLDDPopover = (_NLDDPopover2 = class NLDDPopover extends LitElement {
 		}
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddPopoverTranslations[key];
+		return translate(this.translations, nlddPopoverTranslations, key);
 	}
 	get _resolvedAccessibleLabel() {
 		return this.accessibleLabel || this._t("components.popover.accessible-label");
@@ -8637,12 +8661,12 @@ var listStyles = css`
 		}
 	}
 
-	:host([variant^="box"]) {
+	:host([appearance^="box"]) {
 		--_background-color: var(--semantics-surfaces-tinted-background-color);
 		--_highlight-border-color: var(--semantics-surfaces-tinted-border-color);
 	}
 
-	:host([variant="box-base"]) {
+	:host([appearance="box-base"]) {
 		--_background-color: var(--semantics-surfaces-base-background-color);
 		--_highlight-border-color: var(--semantics-surfaces-base-border-color);
 	}
@@ -8688,7 +8712,7 @@ var listStyles = css`
 	   reach its corners and have nothing to be clipped against. Without it a
 	   focus ring inside the box paints outward, like every other control in the
 	   system, instead of being cut off by the frame. */
-	:host([variant^="box"]) .list__main {
+	:host([appearance^="box"]) .list__main {
 		position: relative;
 		border-radius: var(--semantics-surfaces-corner-radius);
 		background-color: var(--_background-color);
@@ -8716,7 +8740,7 @@ var listStyles = css`
 		display: none;
 	}
 
-	:host([variant^="box"]) .list__items {
+	:host([appearance^="box"]) .list__items {
 		padding-inline: calc(var(--components-list-item-indicator-inline-inset) + var(--_box-padding));
 		padding-block: var(--_box-padding);
 	}
@@ -8870,7 +8894,7 @@ var listStyles = css`
 	/* # High Contrast */
 
 	@media (forced-colors: active) {
-		:host([variant^="box"]) .list__main {
+		:host([appearance^="box"]) .list__main {
 			border: 1px solid CanvasText;
 		}
 	}
@@ -8923,7 +8947,7 @@ var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, hasItems, hasEmptySt
 								<div class="list__search-field-end">
 									<div class="list__search-field-clear">
 										<nldd-icon-button
-											variant="neutral-transparent"
+											appearance="neutral-transparent"
 											size="sm"
 											icon="dismiss"
 											text=${listbox.searchClearLabel}
@@ -9008,14 +9032,13 @@ var _NLDDList;
 var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.variant = "simple";
+		this.appearance = "simple";
 		this.type = "list";
 		this.dividers = "always";
 		this.height = "";
 		this.accessibleLabel = "";
 		this.translations = {};
 		this.reorderable = false;
-		this._mergedTranslations = { ...nlddListTranslations };
 		this._hasToolbar = false;
 		this._hasSearchBarEnd = false;
 		this._hasEmptyState = false;
@@ -9035,6 +9058,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._cloneOffsetY = 0;
 		this._listRect = null;
 		this._itemsObserver = null;
+		this._autoLabel = null;
 		this._contextScheduled = false;
 		this._warnedSilentEmpty = false;
 		this._listboxScheduled = false;
@@ -9215,11 +9239,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 	* from the children instead. The slotchange listeners below keep them true
 	* afterwards, and by then a second render is what you actually want.
 	*/
-	willUpdate(changed) {
-		if (changed.has("translations") || !this.hasUpdated) this._mergedTranslations = {
-			...nlddListTranslations,
-			...this.translations
-		};
+	willUpdate(_changed) {
 		if (this.hasUpdated) return;
 		this._updateEmpty();
 		this._hasToolbar = this.querySelector(":scope > [slot=\"toolbar\"]") !== null;
@@ -9286,12 +9306,13 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._cancelDrag();
 	}
 	updated(changed) {
+		this._syncTranslatedTexts();
 		if (changed.has("reorderable") || changed.has("type")) {
 			if (this.reorderable && this.type !== "list" && false);
 			this._updateItems();
 			this._warnArrowNav();
 		}
-		if (changed.has("variant")) this._updateItemContext();
+		if (changed.has("appearance")) this._updateItemContext();
 		if (changed.has("type")) {
 			this._applyHostType();
 			if (changed.get("type") === "listbox" && this.type !== "listbox") {
@@ -9307,19 +9328,28 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			else this.style.removeProperty("--_max-height");
 		}
 	}
+	/** On every render, so the texts this list sets itself follow a language switch. */
+	_syncTranslatedTexts() {
+		if (this.hasAttribute("data-nldd-auto-label") && this.getAttribute("aria-label") === this._autoLabel) {
+			this._autoLabel = this._t("components.list.navigation-accessible-label");
+			this.setAttribute("aria-label", this._autoLabel);
+		}
+		if (this.hasAttribute("aria-keyshortcuts")) this.setAttribute("aria-description", this._t("components.list.arrow-navigation-description-text"));
+	}
 	_applyHostType() {
 		if (this.type === "navigation") {
 			this.setAttribute("role", "navigation");
 			if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
-				this.setAttribute("aria-label", this._t("components.list.navigation-accessible-label"));
+				this._autoLabel = this._t("components.list.navigation-accessible-label");
+				this.setAttribute("aria-label", this._autoLabel);
 				this.setAttribute("data-nldd-auto-label", "");
 			}
 		} else {
 			if (this.getAttribute("role") === "navigation") this.removeAttribute("role");
 			if (this.hasAttribute("data-nldd-auto-label")) {
-				const autoLabel = this._t("components.list.navigation-accessible-label");
-				if (this.getAttribute("aria-label") === autoLabel) this.removeAttribute("aria-label");
+				if (this.getAttribute("aria-label") === this._autoLabel) this.removeAttribute("aria-label");
 				this.removeAttribute("data-nldd-auto-label");
+				this._autoLabel = null;
 			}
 		}
 	}
@@ -9360,7 +9390,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._updateRoving();
 		if (this.type === "listbox") this._updateListboxOptions();
 	}
-	/** Push the list's variant + type onto every item, deferred to a microtask:
+	/** Push the list's appearance + type onto every item, deferred to a microtask:
 	*  _updateItems runs inside the update lifecycle (firstUpdated/updated), and
 	*  setting the items' reactive state there would trip Lit's change-in-update
 	*  warning. Coalesced so repeated item updates schedule it only once. */
@@ -9372,13 +9402,13 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			this._applyItemContext();
 		});
 	}
-	/** The list owns variant + type; every item mirrors them (is-boxed styling and
+	/** The list owns appearance + type; every item mirrors them (is-boxed styling and
 	*  the option/listitem role). Pushing from the list, not a per-item observer,
-	*  means a runtime variant/type switch, or a freshly added item, always tracks
+	*  means a runtime appearance/type switch, or a freshly added item, always tracks
 	*  the list. */
 	_applyItemContext() {
 		this._getItems().forEach((item) => {
-			item._applyVariant(this.variant);
+			item._applyAppearance(this.appearance);
 			item._applyParentType(this.type);
 		});
 	}
@@ -9794,9 +9824,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._currentDropIndex = -1;
 	}
 	_t(key, vars) {
-		let str = this._mergedTranslations[key];
-		if (vars) for (const [k, v] of Object.entries(vars)) str = str.replace(`{${k}}`, String(v));
-		return str;
+		return translate(this.translations, nlddListTranslations, key, vars);
 	}
 	_announce(message, assertive = false) {
 		const selector = assertive ? ".list__assertive-announcer" : ".list__polite-announcer";
@@ -9837,7 +9865,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("simple")
-})], NLDDList.prototype, "variant", void 0);
+})], NLDDList.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("list")
@@ -9859,8 +9887,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDList.prototype, "reorderable", void 0);
-__decorate([state()], NLDDList.prototype, "_mergedTranslations", void 0);
-__decorate([state()], NLDDList.prototype, "_hasToolbar", void 0);
+__decorate([state(), state()], NLDDList.prototype, "_hasToolbar", void 0);
 __decorate([state()], NLDDList.prototype, "_hasSearchBarEnd", void 0);
 __decorate([state()], NLDDList.prototype, "_hasEmptyState", void 0);
 __decorate([state()], NLDDList.prototype, "_hasNoResultsState", void 0);
@@ -10724,22 +10751,22 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		return this._parentType === "listbox";
 	}
 	/**
-	* Reads the initial variant + type from the closest parent nldd-list, before
+	* Reads the initial appearance + type from the closest parent nldd-list, before
 	* the first render, so the item is styled correctly on first paint. Later changes
-	* are PUSHED by the list: its `updated` / `_updateItems` calls `_applyVariant`
+	* are PUSHED by the list: its `updated` / `_updateItems` calls `_applyAppearance`
 	* and `_applyParentType` on every item, so the list is the single source of
-	* truth and a runtime variant/type switch (or an item moved to another list)
+	* truth and a runtime appearance/type switch (or an item moved to another list)
 	* always tracks its current parent.
 	*/
 	_syncWithList() {
 		const list = this.closest("nldd-list");
 		if (!list) return;
-		this._applyVariant(list.variant);
+		this._applyAppearance(list.appearance);
 		this._applyParentType(list.type);
 	}
-	_applyVariant(variant) {
-		this._isBoxed = variant.startsWith("box");
-		this._relayToChildren((item) => item._applyVariant(variant));
+	_applyAppearance(appearance) {
+		this._isBoxed = appearance.startsWith("box");
+		this._relayToChildren((item) => item._applyAppearance(appearance));
 		this.classList.toggle("is-boxed", this._isBoxed);
 	}
 	_applyParentType(type) {
@@ -10850,7 +10877,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		if (this._showChildren !== had) this._relayExpanded();
 		if (this._showChildren) rows.forEach((row) => {
 			const item = row;
-			item._applyVariant?.(this._isBoxed ? "box-tinted" : "simple");
+			item._applyAppearance?.(this._isBoxed ? "box-tinted" : "simple");
 			item._applyParentType?.(this._parentType);
 		});
 	}
@@ -11931,12 +11958,12 @@ var codeViewerStyles = css`
 		display: none;
 	}
 
-	:host([variant="box-base"]) {
+	:host([appearance="box-base"]) {
 		--_background-color: var(--semantics-surfaces-base-background-color);
 		--_border-color: var(--semantics-surfaces-base-border-color);
 	}
 
-	:host([variant="simple"]) {
+	:host([appearance="simple"]) {
 		--_corner-radius: 0;
 		--_background-color: transparent;
 		--_border-color: transparent;
@@ -11953,7 +11980,7 @@ var codeViewerStyles = css`
 		border-radius: var(--_corner-radius);
 		/* Inner box-shadow paints the border ring inside the radius
 		   without taking layout space — matches nldd-box / nldd-banner.
-		   variant="simple" suppresses the ring via --_border-color. The
+		   appearance="simple" suppresses the ring via --_border-color. The
 		   forced-colors fallback at the bottom restores a real border. */
 		box-shadow: var(--_border-shadow);
 		background-color: var(--_background-color);
@@ -11975,11 +12002,11 @@ var codeViewerStyles = css`
 		padding-right: var(--_actions-area-size);
 	}
 
-	:host([variant="simple"]:not([no-copy]):not([copy-unavailable])) {
+	:host([appearance="simple"]:not([no-copy]):not([copy-unavailable])) {
 		--_actions-area-padding: 0;
 	}
 
-	:host([variant="simple"]:not([no-copy]):not([copy-unavailable])) .code-viewer {
+	:host([appearance="simple"]:not([no-copy]):not([copy-unavailable])) .code-viewer {
 		min-height: var(--_actions-area-size);
 		padding-right: 0;
 	}
@@ -12033,7 +12060,7 @@ var codeViewerStyles = css`
 			border: var(--_border-width) solid CanvasText;
 		}
 
-		:host([variant="simple"]) .code-viewer {
+		:host([appearance="simple"]) .code-viewer {
 			border: none;
 		}
 	}
@@ -12164,7 +12191,7 @@ function forceScrollLayerRepaint(el) {
 *
 * @element nldd-code-viewer
 *
-* @attr {'box-tinted'|'box-base'|'simple'} variant - Visual style. The two `box` values are a framed card with rounded corners, padding, fill, and a 1px border ring, and differ in which surface they fill with; `box-tinted` is the default. `simple` drops the entire frame — use when embedding inside a parent surface.
+* @attr {'box-tinted'|'box-base'|'simple'} appearance - Visual style. The two `box` values are a framed card with rounded corners, padding, fill, and a 1px border ring, and differ in which surface they fill with; `box-tinted` is the default. `simple` drops the entire frame — use when embedding inside a parent surface.
 * @attr {string} language - Grammar to highlight with. Empty disables highlighting.
 * @attr {boolean} no-copy - Hide the copy-to-clipboard button (shown by default).
 * @attr {boolean} wrap - Wrap long lines instead of horizontal scroll
@@ -12181,7 +12208,7 @@ function isClipboardAvailable() {
 var NLDDCodeViewer = (_NLDDCodeViewer = class NLDDCodeViewer extends NLDDCodeMirrorElement {
 	constructor(..._args) {
 		super(..._args);
-		this.variant = "box-tinted";
+		this.appearance = "box-tinted";
 		this.language = "";
 		this.noCopy = false;
 		this.wrap = false;
@@ -12273,19 +12300,20 @@ var NLDDCodeViewer = (_NLDDCodeViewer = class NLDDCodeViewer extends NLDDCodeMir
 	updated(changed) {
 		if (changed.has("noCopy")) this._copyUnavailable = !this.noCopy && !isClipboardAvailable();
 		if (!this.view) return;
+		if (this._isScrollable) this.view.scrollDOM.setAttribute("aria-label", this._t("components.code-viewer.region-label"));
 		if (changed.has("language")) this._applyLanguage();
 		if (changed.has("wrap")) {
 			this.reconfigure(this._wrapCompartment, this.wrap ? EditorView.lineWrapping : []);
 			this._updateScrollable();
 		}
-		if (changed.has("variant") || changed.has("noCopy") || changed.has("_copyUnavailable")) this._updateScrollable();
+		if (changed.has("appearance") || changed.has("noCopy") || changed.has("_copyUnavailable")) this._updateScrollable();
 	}
 	_onSlotChange() {
 		this.setDoc(this._getRawText());
 		this._updateScrollable();
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddCodeViewerTranslations[key];
+		return translate(this.translations, nlddCodeViewerTranslations, key);
 	}
 	async getUpdateComplete() {
 		const result = await super.getUpdateComplete();
@@ -12370,7 +12398,7 @@ var NLDDCodeViewer = (_NLDDCodeViewer = class NLDDCodeViewer extends NLDDCodeMir
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("box-tinted")
-})], NLDDCodeViewer.prototype, "variant", void 0);
+})], NLDDCodeViewer.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("")
@@ -12992,7 +13020,7 @@ var NLDDImage = (_NLDDImage = class NLDDImage extends LitElement {
 		};
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddImageTranslations[key];
+		return translate(this.translations, nlddImageTranslations, key);
 	}
 	/** Parsed LQIP: 7 numbers in [0, 255] — base + 6 cells — or null when the
 	*  attribute is empty or malformed. Memoised against the raw lqip string,
@@ -13217,7 +13245,7 @@ var NLDDRichText = class NLDDRichText extends LitElement {
 		this.hyphens = false;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddRichTextTranslations[key];
+		return translate(this.translations, nlddRichTextTranslations, key);
 	}
 	createRenderRoot() {
 		return this;
@@ -13240,6 +13268,10 @@ var NLDDRichText = class NLDDRichText extends LitElement {
 		this._resizeObserver?.disconnect();
 		this._resizeObserver = void 0;
 	}
+	/** The labels this component set itself follow a language switch. */
+	updated() {
+		for (const table of this.querySelectorAll(`table[${MANAGED_LABEL_ATTR}]`)) table.setAttribute("aria-label", this._t("components.rich-text.table-scroll-label"));
+	}
 	_syncTables() {
 		for (const table of this.querySelectorAll("table")) if (table.scrollWidth > table.clientWidth) {
 			if (table.getAttribute("tabindex") !== "0") {
@@ -13649,6 +13681,7 @@ var textStyles = css`
 		color: var(--_color);
 		text-align: var(--_text-align);
 		font: var(--_font-weight) var(--_font-size) / var(--_line-height) var(--primitives-font-family-body);
+		text-wrap: pretty;
 	}
 
 	:host([hidden]) {
@@ -14377,7 +14410,7 @@ function tokenTemplate(component) {
 				<div class="token__dismiss-action">
 					<nldd-icon-button
 						size="sm"
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						icon="dismiss-small"
 						text=${component._dismissLabel}
 						accessible-label=${component._dismissLabel}
@@ -14392,7 +14425,7 @@ function tokenTemplate(component) {
 				<div class="token__menu-action">
 					<nldd-icon-button
 						size="sm"
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						icon="chevron-down-small"
 						text=${component._menuLabel}
 						accessible-label=${component._menuLabel}
@@ -14482,7 +14515,7 @@ var NLDDToken = (_NLDDToken = class NLDDToken extends LitElement {
 		this._slotText = [...this.childNodes].filter((node) => !(node instanceof Element && node.hasAttribute("slot"))).map((node) => node.textContent).join("").replace(/\s+/g, " ").trim();
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddTokenTranslations[key];
+		return translate(this.translations, nlddTokenTranslations, key);
 	}
 	get _dismissLabel() {
 		const label = this.text || this._slotText;
@@ -14924,7 +14957,7 @@ function formActionsTemplate() {
 *         <nldd-form-field>...</nldd-form-field>
 *         <nldd-form-actions>
 *             <nldd-button-group>
-*                 <nldd-button variant="primary" type="submit" text="Bewaar"></nldd-button>
+*                 <nldd-button appearance="primary" type="submit" text="Bewaar"></nldd-button>
 *             </nldd-button-group>
 *         </nldd-form-actions>
 *     </nldd-form>
@@ -18420,9 +18453,9 @@ var codeEditorStyles = css`
 	}
 
 
-	/* ## Variant — input-field adds the framed surface + a default content padding */
+	/* ## Appearance — input-field adds the framed surface + a default content padding */
 
-	:host([variant="input-field"]) {
+	:host([appearance="input-field"]) {
 		--_corner-radius: var(--primitives-corner-radius-lg);
 		/* Match the other input fields (text-field, textarea): the input-field
 		   surface + border + control padding, not the tinted surface. */
@@ -18459,7 +18492,7 @@ var codeEditorStyles = css`
 
 	/* Focus ring only on the input-field variant. The simple variant relies on a
 	   prominent caret and lets a wrapping composition own its focus treatment. */
-	:host([variant="input-field"]) .code-editor:focus-within {
+	:host([appearance="input-field"]) .code-editor:focus-within {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow), var(--_border-shadow);
@@ -18521,10 +18554,10 @@ function codeEditorTemplate(_component) {
 * on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with
 * nldd-code-viewer for a matching read-only surface.
 *
-* Default `variant="simple"` is a bare, flush editor (no frame, no focus ring)
+* Default `appearance="simple"` is a bare, flush editor (no frame, no focus ring)
 * for use inside an nldd-form-field or a consumer composition that owns its own
 * chrome and focus treatment; the caret is rendered as a prominent accent as
-* the focus cue. `variant="input-field"` adds the framed surface (border ring, tinted
+* the focus cue. `appearance="input-field"` adds the framed surface (border ring, tinted
 * fill, inner padding, radius) and a focus ring for standalone use.
 *
 * The simple variant has no surrounding space of its own: let a layout
@@ -18546,7 +18579,7 @@ function codeEditorTemplate(_component) {
 * @attr {boolean} wrap - Wrap long lines instead of horizontal scroll
 * @attr {number} rows - Minimum visible rows (the floor in every resize mode). Default: 6.
 * @attr {string} resize - 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default)
-* @attr {string} variant - 'simple' (default, bare) | 'input-field' (framed surface)
+* @attr {string} appearance - 'simple' (default, bare) | 'input-field' (framed surface)
 * @attr {string} language - Highlight grammar (yaml, json, javascript, typescript, css, html, xml, bash, markdown, rust, gherkin, toml, sql, python). Empty disables highlighting.
 * @attr {boolean} line-numbers - Show a line-number gutter
 * @attr {string} accessible-label - Accessible label forwarded to the editor. Set automatically by nldd-form-field.
@@ -18572,7 +18605,7 @@ var NLDDCodeEditor = (_NLDDCodeEditor = class NLDDCodeEditor extends DescribedBy
 		this.wrap = false;
 		this.rows = 6;
 		this.resize = "auto";
-		this.variant = "simple";
+		this.appearance = "simple";
 		this.language = "";
 		this.lineNumbers = false;
 		this.accessibleLabel = "";
@@ -18775,7 +18808,7 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("simple")
-})], NLDDCodeEditor.prototype, "variant", void 0);
+})], NLDDCodeEditor.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("")
@@ -19037,7 +19070,7 @@ function comboBoxTemplate(component) {
 				${component.text && !component.readonly ? html`
 					<div class="combo-box__clear-button">
 						<nldd-icon-button
-							variant="neutral-transparent"
+							appearance="neutral-transparent"
 							size=${iconButtonSize}
 							icon="dismiss"
 							text=${component._t("components.combo-box.clear-action")}
@@ -19051,7 +19084,7 @@ function comboBoxTemplate(component) {
 				${component.readonly ? nothing : html`
 					<div class="combo-box__picker-button">
 						<nldd-icon-button
-							variant="neutral-tinted"
+							appearance="neutral-tinted"
 							size=${iconButtonSize}
 							icon="chevron-down"
 							text=${component._t("components.combo-box.open-menu-action")}
@@ -19170,7 +19203,8 @@ function submitOnEnter(host, event) {
 * @attr {boolean} invalid - Marks the field as invalid
 * @attr {boolean} disabled - Disabled state
 * @attr {boolean} readonly - Read-only state: the value stays readable, selectable and in the tab order, but the menu does not open and there is nothing to clear. The input drops its combobox role and the aria that goes with it, so assistive technology is not told about a list it cannot open. Use this where the value belongs to the record rather than to the form, e.g. the product an asset is an instance of.
-* @attr {boolean} allow-custom - Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted.
+* @attr {boolean} allow-custom - Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. Typing an option's label in full picks that option, ignoring case and the spaces around it; with two such labels, the first one.
+* @attr {boolean} no-filter - Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address.
 * @attr {string} name - Input name for form submission
 * @attr {string} autocomplete - Browser autofill hint. Default 'off' to prevent the native autofill panel from competing with the menu dropdown. Set to a valid token (e.g. 'country', 'organization') when browser autofill is desired.
 * @attr {string} accessible-label - Accessible label forwarded as aria-label to the input. Required for screen reader accessibility.
@@ -19186,7 +19220,14 @@ function submitOnEnter(host, event) {
 * @note Free-text values: only when `allow-custom` is set. Then a typed value that
 *       matches no menu option is emitted as-is via the `change` event on Enter or blur
 *       (consumers validate emitted values). Without it, such a value is discarded and
-*       the input reverts to the current value.
+*       the input reverts to the current value. Only text the user typed is committed:
+*       the label of a chosen option stays a label, and typing an option's label in full
+*       picks that option and its value.
+*
+* Options can arrive after the keystroke, from a server you query per
+* keystroke. Slot them into the menu when they come in: if the user is still
+* in the field and the keystroke found nothing to show, the menu opens then.
+* After Escape, or once the user left the field, it stays shut.
 *
 * @slot - An nldd-menu element with nldd-menu-item and nldd-menu-divider children
 *
@@ -19222,6 +19263,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		this.disabled = false;
 		this.readonly = false;
 		this.allowCustom = false;
+		this.noFilter = false;
 		this.name = "";
 		this.autocomplete = "off";
 		this.maxItems = 8;
@@ -19234,6 +19276,9 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		this._menuId = `nldd-combo-box-menu-${_NLDDComboBox._idCounter++}`;
 		this._menu = null;
 		this._resizeObserver = null;
+		this._menuObserver = null;
+		this._openPending = false;
+		this._typedText = null;
 		this.required = false;
 		this.pattern = "";
 		this._handleScrollOrResize = () => {
@@ -19244,13 +19289,17 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		this._handleMenuToggle = (e) => {
 			this._isOpen = e.newState === "open";
 			if (!this._isOpen) this._highlightedId = "";
-			else requestAnimationFrame(() => {
-				if (this._menu && !this._menu.getHighlighted()) this._menu.moveHighlight("next");
-				this._highlightedId = this._menu?.getHighlightedId() ?? "";
-			});
+			else {
+				this._openPending = false;
+				requestAnimationFrame(() => {
+					if (this._menu && !this._menu.getHighlighted()) this._menu.moveHighlight("next");
+					this._highlightedId = this._menu?.getHighlightedId() ?? "";
+				});
+			}
 		};
 		this._handleMenuSelect = (e) => {
 			const item = e.target;
+			this._typedText = null;
 			this.text = item.text;
 			this.value = item.value || item.text;
 			this._highlightedId = "";
@@ -19264,6 +19313,17 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 			}));
 			this._input?.focus();
 		};
+		this._handleMenuItemsChange = () => {
+			if (!this._menu || this.shadowRoot?.activeElement !== this._input) return;
+			if (this._menu.matches(":popover-open")) {
+				if (this.allowCustom && !this._hasVisibleMenuItems()) this._closeMenu();
+				return;
+			}
+			if (this._openPending && this._hasVisibleMenuItems()) {
+				this._openPending = false;
+				this._openMenu();
+			}
+		};
 		this._pickerPointerdownWhileOpen = false;
 		this._handleMenuKeydown = (e) => {
 			if (e.key !== "Tab") return;
@@ -19273,7 +19333,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		};
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddComboBoxTranslations[key];
+		return translate(this.translations, nlddComboBoxTranslations, key);
 	}
 	firstUpdated() {
 		this._initialValue = this.value;
@@ -19281,6 +19341,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 	}
 	willUpdate(changedProperties) {
 		if (changedProperties.has("value") && !changedProperties.has("text")) this._deriveTextFromMenu();
+		if (changedProperties.has("value")) this._typedText = null;
 	}
 	updated(changedProperties) {
 		if (changedProperties.has("maxItems") && this._menu) this._menu.maxItems = this.maxItems;
@@ -19328,6 +19389,8 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		this._resizeObserver = null;
 		window.removeEventListener("scroll", this._handleScrollOrResize, true);
 		window.removeEventListener("resize", this._handleScrollOrResize);
+		this._menuObserver?.disconnect();
+		this._menuObserver = null;
 		if (this._menu) {
 			this._menu.removeEventListener("toggle", this._handleMenuToggle);
 			this._menu.removeEventListener("select", this._handleMenuSelect);
@@ -19347,6 +19410,14 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		menu.addEventListener("toggle", this._handleMenuToggle);
 		menu.addEventListener("select", this._handleMenuSelect);
 		menu.addEventListener("keydown", this._handleMenuKeydown);
+		this._menuObserver?.disconnect();
+		this._menuObserver = new MutationObserver(this._handleMenuItemsChange);
+		this._menuObserver.observe(menu, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["hidden"]
+		});
 		this._updateMenuWidth();
 		if (this.value && !this.text) this._deriveTextFromMenu();
 	}
@@ -19361,8 +19432,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 			this.text = "";
 			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) {
+		for (const item of this._ownMenuItems()) if ((item.value || item.text) === this.value) {
 			this.text = item.text;
 			return;
 		}
@@ -19390,10 +19460,18 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		this._updateMenuWidth();
 		this._menu.showPopover();
 	}
+	/**
+	* The items that belong to the wired menu itself. A nested nldd-menu
+	* submenu's items are left out, so they cannot match before the intended
+	* top-level item when values or labels overlap.
+	*/
+	_ownMenuItems() {
+		if (!this._menu) return [];
+		return Array.from(this._menu.querySelectorAll("nldd-menu-item")).filter((item) => item.closest("nldd-menu") === this._menu);
+	}
 	/** Top-level menu items that survived the current filter. */
 	_hasVisibleMenuItems() {
-		if (!this._menu) return false;
-		return Array.from(this._menu.querySelectorAll("nldd-menu-item:not([hidden])")).some((item) => item.closest("nldd-menu") === this._menu);
+		return this._ownMenuItems().some((item) => !item.hidden);
 	}
 	_closeMenu() {
 		if (!this._menu || !this._isOpen) return;
@@ -19418,10 +19496,12 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 	_handleInput(e) {
 		const input = e.target;
 		this.text = input.value;
-		this._menu?.filter(this.text);
+		this._typedText = input.value;
+		this._menu?.filter(this.text, { hide: !this.noFilter });
 		this._updateActiveDescendant();
 		if (this.allowCustom && this._isOpen && !this._hasVisibleMenuItems()) this._closeMenu();
 		if (!this._isOpen) this._openMenu();
+		this._openPending = this.text !== "" && !this._menu?.matches(":popover-open");
 		this.commitFormValue();
 		this.dispatchEvent(new CustomEvent("input", {
 			detail: { value: this.text },
@@ -19451,6 +19531,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 	/** On blur: with allow-custom, accept a custom typed value; otherwise discard a
 	*  non-matching typed value by reverting the input to the current value. */
 	_handleBlur(e) {
+		this._openPending = false;
 		if (this.readonly) return;
 		const relatedTarget = e.relatedTarget;
 		const focusMovedIntoMenu = !!relatedTarget && !!this._menu?.contains(relatedTarget);
@@ -19459,15 +19540,31 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 			if (!focusMovedIntoMenu) this._revertTextToValue();
 			return;
 		}
-		if (this.text !== "" && this.text !== this.value) {
-			this.value = this.text;
-			this.commitFormValue();
-			this.dispatchEvent(new CustomEvent("change", {
-				detail: { value: this.value },
-				bubbles: true,
-				composed: true
-			}));
-		}
+		if (this._hasTypedCustomText()) this._commitTypedText();
+	}
+	/**
+	* With allow-custom, only text the user typed becomes the value. `text`
+	* differing from `value` is not the sign of that: it is the normal state after
+	* every choice from the menu ("Nederland" for "nl"), and committing it would
+	* send the label to the server instead of the value.
+	*/
+	_hasTypedCustomText() {
+		return this._typedText !== null && this.text === this._typedText && this.text !== "" && this.text !== this.value;
+	}
+	_commitTypedText() {
+		const typed = this.text.trim().toLowerCase();
+		const option = this._ownMenuItems().find((item) => item.text.trim().toLowerCase() === typed);
+		if (option) this.text = option.text;
+		const value = option ? option.value || option.text : this.text;
+		this._typedText = null;
+		if (value === this.value) return;
+		this.value = value;
+		this.commitFormValue();
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
 	}
 	/** Restore the input text to the current value's display label, discarding any
 	*  free text the user typed (used when allow-custom is off). */
@@ -19477,6 +19574,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 		this._menu?.filter("");
 	}
 	_handleKeydown(e) {
+		if (e.key === "Escape") this._openPending = false;
 		if (this.readonly) {
 			if (e.key === "Enter") submitOnEnter(this, e);
 			return;
@@ -19485,16 +19583,10 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 			if (e.key === "ArrowDown") {
 				e.preventDefault();
 				this._openMenu();
-			} else if (e.key === "Enter" && this.allowCustom && this.text !== "" && this.text !== this.value) {
+			} else if (e.key === "Enter" && this.allowCustom && this._hasTypedCustomText()) {
 				e.preventDefault();
 				e.stopPropagation();
-				this.value = this.text;
-				this.commitFormValue();
-				this.dispatchEvent(new CustomEvent("change", {
-					detail: { value: this.value },
-					bubbles: true,
-					composed: true
-				}));
+				this._commitTypedText();
 			} else if (e.key === "Enter") submitOnEnter(this, e);
 			return;
 		}
@@ -19515,14 +19607,8 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends DescribedBy(Form
 				const highlighted = this._menu?.getHighlighted();
 				if (highlighted) highlighted.select();
 				else if (this.allowCustom) {
-					this.value = this.text;
 					this._closeMenu();
-					this.commitFormValue();
-					this.dispatchEvent(new CustomEvent("change", {
-						detail: { value: this.value },
-						bubbles: true,
-						composed: true
-					}));
+					if (this._hasTypedCustomText()) this._commitTypedText();
 				} else {
 					this._closeMenu();
 					this._revertTextToValue();
@@ -19578,6 +19664,11 @@ __decorate([property({
 	reflect: true,
 	attribute: "allow-custom"
 })], NLDDComboBox.prototype, "allowCustom", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-filter"
+})], NLDDComboBox.prototype, "noFilter", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("")
@@ -20103,7 +20194,7 @@ function topTitleBarTemplate(component) {
 					<div class="top-title-bar__back-button">
 						<div class="top-title-bar__text-back-button">
 							<nldd-button
-								variant="accent-transparent"
+								appearance="accent-transparent"
 								start-icon="chevron-left"
 								text=${component.backText}
 								href=${component.backHref || nothing}
@@ -20113,7 +20204,7 @@ function topTitleBarTemplate(component) {
 						</div>
 						<div class="top-title-bar__icon-back-button">
 							<nldd-icon-button
-								variant="accent-transparent"
+								appearance="accent-transparent"
 								icon="chevron-left"
 								text=${component.backText}
 								accessible-label=${component.backText || nothing}
@@ -20143,7 +20234,7 @@ function topTitleBarTemplate(component) {
 				${component.dismissText ? html`
 					<div class="top-title-bar__dismiss-button">
 						<nldd-button
-							variant="accent-transparent"
+							appearance="accent-transparent"
 							text=${component.dismissText}
 							@click=${component._handleDismiss}
 						></nldd-button>
@@ -20913,7 +21004,7 @@ function renderPagination(component, size, variant) {
 	return html`
 		<nldd-button-bar
 			size=${size}
-			variant=${variant}
+			appearance=${variant}
 		>
 			<nldd-icon-button
 				icon="chevron-left"
@@ -20943,7 +21034,7 @@ function renderFooter(component, withPagination) {
 				${component._todayReachable ? html`
 					<nldd-button
 						size=${withPagination ? "md" : "sm"}
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						text=${component._t("components.date-picker.view-today-action")}
 						@click=${component._handleToday}
 					></nldd-button>
@@ -21740,7 +21831,7 @@ function renderPicker$2(component) {
 	return html`
 		<div class="date-field__picker-button">
 			<nldd-icon-button
-				variant="neutral-tinted"
+				appearance="neutral-tinted"
 				size=${buttonSize}
 				icon="calendar"
 				text=${component._t("components.date-field.to-pick-date-action")}
@@ -22055,7 +22146,7 @@ var NLDDDateField = (_NLDDDateField = class NLDDDateField extends DescribedBy(Fo
 		if (typeof state === "string") this.value = state;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddDateFieldTranslations[key];
+		return translate(this.translations, nlddDateFieldTranslations, key);
 	}
 	/**
 	* The field's accessible name, with a fallback so the input is never nameless.
@@ -22302,6 +22393,9 @@ var dropdownStyles = css`
 		--_validation-icon-area-padding-right: var(--primitives-space-4);
 		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
 		--_picker-icon-size: var(--primitives-space-24);
+		--_picker-area: calc((var(--_min-size) + var(--_picker-icon-size)) / 2);
+		--_end-inset: var(--_picker-area);
+		--_fade-size: var(--primitives-space-24);
 		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
@@ -22326,6 +22420,11 @@ var dropdownStyles = css`
 		display: none;
 	}
 
+	:host([valid]),
+	:host([invalid]) {
+		--_end-inset: calc(var(--_picker-area) + var(--_validation-icon-size) + var(--_validation-icon-area-padding-right));
+	}
+
 	:host([size="xs"]) {
 		--_corner-radius: var(--semantics-controls-xs-corner-radius);
 		--_min-size: var(--semantics-controls-xs-min-size);
@@ -22375,6 +22474,7 @@ var dropdownStyles = css`
 		min-height: var(--_min-size);
 		flex-direction: row;
 		align-items: center;
+		justify-content: flex-end;
 		color: var(--_content-color);
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
@@ -22423,30 +22523,33 @@ var dropdownStyles = css`
 
 	::slotted(select) {
 		${slottedReset}
+		${inheritedTextReset}
 		box-sizing: border-box !important;
 		position: absolute !important;
 		inset: 0 !important;
-		opacity: 0 !important;
+		overflow: hidden !important;
 		margin: 0 !important;
 		outline: none !important;
 		border: none !important;
 		background: transparent !important;
 		width: 100% !important;
 		height: 100% !important;
-		padding: 0 !important;
-		font: var(--semantics-input-fields-native-select-font) !important;
+		padding-block: 0 !important;
+		padding-inline: var(--_inline-padding) var(--_end-inset) !important;
+		color: inherit !important;
+		font: var(--_text-font) !important;
+		white-space: nowrap !important;
 		appearance: none !important;
+		/* WebKit lets select text run through its end padding and has no ellipsis
+		   there, so every browser fades the text out before the icons instead. */
+		mask-image: linear-gradient(to left, transparent var(--_end-inset), black calc(var(--_end-inset) + var(--_fade-size))) !important;
 	}
 
-	.dropdown__value {
-		min-width: 0;
-		overflow: hidden;
-		padding: 0 var(--_inline-padding);
-		flex-grow: 1;
-		color: inherit;
-		font: var(--_text-font);
-		white-space: nowrap;
-		text-overflow: ellipsis;
+	:host([size="xs"]) ::slotted(select) {
+		/* iOS Safari zooms in on a select below 16px when it gets focus. */
+		@media (pointer: coarse) {
+			font: var(--semantics-input-fields-native-select-font) !important;
+		}
 	}
 
 	.dropdown__validation-icon-area {
@@ -22507,7 +22610,6 @@ function dropdownTemplate(component) {
 	return html`
 		<div class="dropdown">
 			<slot @slotchange=${component._onSlotChange}></slot>
-			<span class="dropdown__value">${component._displayValue}</span>
 			${renderValidationIcon$6(component)}
 			<div class="dropdown__picker-icon">
 				<nldd-icon icon="chevron-up-chevron-down"></nldd-icon>
@@ -22562,14 +22664,12 @@ var NLDDDropdown = (_NLDDDropdown = class NLDDDropdown extends DescribedBy(LitEl
 		this.expanded = false;
 		this.width = "";
 		this.accessibleLabel = "";
-		this._displayValue = "";
 		this._select = null;
 		this.required = false;
 		this._appliedLabel = null;
 		this._appliedRequired = null;
 		this._handleSelectChange = (e) => {
 			e.stopPropagation();
-			this._syncDisplayValue();
 			this.dispatchEvent(new CustomEvent("change", {
 				detail: { value: this._select?.value ?? "" },
 				bubbles: true,
@@ -22612,7 +22712,6 @@ var NLDDDropdown = (_NLDDDropdown = class NLDDDropdown extends DescribedBy(LitEl
 		}
 		this._select = select;
 		if (!select) {
-			this._displayValue = "";
 			this.expanded = false;
 			return;
 		}
@@ -22625,7 +22724,6 @@ var NLDDDropdown = (_NLDDDropdown = class NLDDDropdown extends DescribedBy(LitEl
 		this._syncAriaInvalid();
 		this._syncAccessibleLabel();
 		this._syncRequired();
-		this._syncDisplayValue();
 	}
 	_syncDisabled() {
 		if (!this._select) return;
@@ -22666,10 +22764,6 @@ var NLDDDropdown = (_NLDDDropdown = class NLDDDropdown extends DescribedBy(LitEl
 		if (this.invalid) this._select.setAttribute("aria-invalid", "true");
 		else this._select.removeAttribute("aria-invalid");
 	}
-	_syncDisplayValue() {
-		if (!this._select) return;
-		this._displayValue = this._select.selectedOptions[0]?.text ?? "";
-	}
 	/**
 	* Delegates focus to the slotted `<select>`. The wrapper itself is not
 	* focusable, so without this a label pointing at the dropdown has nowhere
@@ -22714,7 +22808,6 @@ __decorate([property({
 	type: String,
 	attribute: "accessible-label"
 })], NLDDDropdown.prototype, "accessibleLabel", void 0);
-__decorate([state()], NLDDDropdown.prototype, "_displayValue", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -22883,7 +22976,7 @@ function fileFieldTemplate(component) {
 			>
 			<div class="file-field__choose-button">
 				<nldd-button
-					variant="neutral-tinted"
+					appearance="neutral-tinted"
 					size=${component.size}
 					text=${component._chooseLabel()}
 					accessible-label=${component._chooseAccessibleLabel() || nothing}
@@ -22900,7 +22993,7 @@ function fileFieldTemplate(component) {
 			${hasFiles ? html`
 				<div class="file-field__clear-button">
 					<nldd-icon-button
-						variant="neutral-transparent"
+						appearance="neutral-transparent"
 						size=${buttonSize}
 						icon="dismiss"
 						text=${component._t("components.file-field.clear-action")}
@@ -22989,9 +23082,7 @@ var NLDDFileField = (_NLDDFileField = class NLDDFileField extends DescribedBy(Fo
 	}
 	/** @internal */
 	_t(key, vars) {
-		let text = this.translations[key] ?? nlddFileFieldTranslations[key];
-		if (vars) for (const [name, value] of Object.entries(vars)) text = text.split(`{${name}}`).join(String(value));
-		return text;
+		return translate(this.translations, nlddFileFieldTranslations, key, vars);
 	}
 	/** @internal */
 	_chooseLabel() {
@@ -23658,7 +23749,7 @@ function numberFieldTemplate(component) {
 			${!component.hideSpinButtons ? html`
 				<div class="number-field__decrement-button">
 					<nldd-icon-button
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						size=${iconButtonSize}
 						icon="minus"
 						text=${component._t("components.number-field.decrement-action")}
@@ -23685,7 +23776,7 @@ function numberFieldTemplate(component) {
 			${!component.hideSpinButtons ? html`
 				<div class="number-field__increment-button">
 					<nldd-icon-button
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						size=${iconButtonSize}
 						icon="plus"
 						text=${component._t("components.number-field.increment-action")}
@@ -23772,7 +23863,7 @@ var NLDDNumberField = (_NLDDNumberField = class NLDDNumberField extends Describe
 		if (!isNaN(parsed)) this.value = this._clamp(parsed);
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddNumberFieldTranslations[key];
+		return translate(this.translations, nlddNumberFieldTranslations, key);
 	}
 	_handleDecrease() {
 		if (this.disabled) return;
@@ -25489,7 +25580,7 @@ function searchFieldTemplate(component) {
 					${component.value ? html`
 						<div class="search-field__clear-button">
 							<nldd-icon-button
-								variant="neutral-transparent"
+								appearance="neutral-transparent"
 								size=${buttonSize}
 								icon="dismiss"
 								text=${component._t("components.search-field.clear-action")}
@@ -25500,7 +25591,7 @@ function searchFieldTemplate(component) {
 					${component.showSearchButton ? html`
 						<div class="search-field__search-button">
 							<nldd-button
-								variant="neutral-tinted"
+								appearance="neutral-tinted"
 								size=${buttonSize}
 								text=${component._t("components.search-field.search-action")}
 								@click=${component._handleSearch}
@@ -25586,7 +25677,7 @@ var NLDDSearchField = (_NLDDSearchField = class NLDDSearchField extends Describe
 		if (typeof state === "string") this.value = state;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddSearchFieldTranslations[key];
+		return translate(this.translations, nlddSearchFieldTranslations, key);
 	}
 	_handleInput(e) {
 		e.stopPropagation();
@@ -25717,6 +25808,8 @@ var segmentedControlStyles = css`
 
 	:host {
 		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
 		--_width: auto;
 		--_gap: var(--primitives-space-1);
 		--_selected-z-index: 1;
@@ -25726,7 +25819,7 @@ var segmentedControlStyles = css`
 		display: inline-grid;
 		position: relative;
 		border-radius: var(--_corner-radius);
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		background-color: var(--_background-color);
 		width: var(--_width);
 		max-width: 100%;
 		grid-auto-columns: 1fr;
@@ -25743,10 +25836,15 @@ var segmentedControlStyles = css`
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 		pointer-events: none;
 	}
 
+	:host([appearance="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+	}
+
 	:host([size="sm"]) {
 		--_corner-radius: var(--semantics-controls-sm-corner-radius);
 	}
@@ -25801,6 +25899,20 @@ var segmentedControlItemStyles = css`
 		--_font: var(--semantics-buttons-md-primary-text-font);
 		--_icon-size: var(--semantics-buttons-md-icon-size);
 		--_highlight-border-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
 		${inheritedTextReset}
 		display: flex;
@@ -25809,6 +25921,23 @@ var segmentedControlItemStyles = css`
 		-webkit-tap-highlight-color: transparent;
 	}
 
+	:host([appearance="neutral-base"]) {
+		--_content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -25878,7 +26007,7 @@ var segmentedControlItemStyles = css`
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--_content-color);
 		font: var(--_font);
 	}
 
@@ -25888,37 +26017,37 @@ var segmentedControlItemStyles = css`
 
 	@media (hover: hover) {
 		:host(:not([selected])) .segmented-control__item:hover {
-			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-content-color);
 		}
 	}
 
 	:host(:not([selected])) .segmented-control__item:active {
-		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-content-color);
 	}
 
 	:host([selected]) .segmented-control__item {
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_highlight-border-color: var(--_is-selected-highlight-border-color);
 
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		background-color: var(--_is-selected-background-color);
+		color: var(--_is-selected-content-color);
 	}
 
 	@media (hover: hover) {
 		:host([selected]) .segmented-control__item:hover {
-			--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
 
-			background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+			background-color: var(--_is-selected-is-hovered-background-color);
+			color: var(--_is-selected-is-hovered-content-color);
 		}
 	}
 
 	:host([selected]) .segmented-control__item:active {
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
 
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		background-color: var(--_is-selected-is-active-background-color);
+		color: var(--_is-selected-is-active-content-color);
 	}
 
 	@media (forced-colors: active) {
@@ -26053,6 +26182,7 @@ function segmentedControlItemTemplate(component) {
 * @element nldd-segmented-control
 * @attr {string} value - Selected value for radio type
 * @prop {string[]} values - Selected values for checkbox type (property binding only, not an attribute)
+* @attr {string} appearance - Visual style, color included: 'neutral-tinted' | 'neutral-base' (default: 'neutral-tinted'). neutral-base is for a tinted surface. For a quiet row without a track, use nldd-toggle-button-group with type="radio" and a transparent appearance.
 * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md')
 * @attr {string} type - Selection mode: 'radio' | 'checkbox' (default: 'radio').
 * @attr {string} variant - Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text')
@@ -26076,6 +26206,7 @@ function segmentedControlItemTemplate(component) {
 * @attr {boolean} disabled - Disabled state
 * @attr {string} text - Text label (shown for variant "text" and "icon-and-text"; used as aria-label and tooltip for variant "icon")
 * @attr {string} icon - Icon name for nldd-icon
+* @attr {string} appearance - Visual style: 'neutral-tinted' | 'neutral-base' (default: 'neutral-tinted'). Set by nldd-segmented-control.
 * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md'). Set by nldd-segmented-control.
 * @attr {string} variant - Content type: 'text' | 'icon' | 'icon-and-text' (default: 'text'). Set by nldd-segmented-control.
 * @attr {string} input-type - Selection mode: 'radio' | 'checkbox' (default: 'radio'). In radio mode the item is the radio itself, in checkbox mode it renders a native checkbox. Set by nldd-segmented-control.
@@ -26096,6 +26227,7 @@ var NLDDSegmentedControlItem = (_NLDDSegmentedControlItem = class NLDDSegmentedC
 		this.value = "";
 		this.selected = false;
 		this.disabled = false;
+		this.appearance = "neutral-tinted";
 		this.size = "md";
 		this.variant = "text";
 		this.inputType = "radio";
@@ -26239,6 +26371,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDSegmentedControlItem.prototype, "disabled", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("neutral-tinted")
+})], NLDDSegmentedControlItem.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("md")
@@ -26274,6 +26410,7 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 		this._initialValues = [];
 		this.value = "";
 		this.values = [];
+		this.appearance = "neutral-tinted";
 		this.size = "md";
 		this.type = "radio";
 		this.variant = "text";
@@ -26400,7 +26537,7 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 			if (w && !(w === "full" || w === "fit-content") && CSS.supports("width", w)) this.style.setProperty("--_width", w);
 			else this.style.removeProperty("--_width");
 		}
-		if (changedProperties.has("value") || changedProperties.has("values") || changedProperties.has("size") || changedProperties.has("disabled") || changedProperties.has("type") || changedProperties.has("variant") || changedProperties.has("name")) this._syncItems();
+		if (changedProperties.has("value") || changedProperties.has("values") || changedProperties.has("appearance") || changedProperties.has("size") || changedProperties.has("disabled") || changedProperties.has("type") || changedProperties.has("variant") || changedProperties.has("name")) this._syncItems();
 		if (changedProperties.has("value") || changedProperties.has("values") || changedProperties.has("type") || changedProperties.has("name")) this.commitFormValue();
 		if (changedProperties.has("type")) this.setAttribute("role", this.type === "checkbox" ? "group" : "radiogroup");
 		if (changedProperties.has("accessibleLabel")) this._appliedLabel = setOwnedAttribute(this, "aria-label", this.accessibleLabel, this._appliedLabel);
@@ -26436,6 +26573,7 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 			}
 		});
 		items.forEach((item) => {
+			item.appearance = this.appearance;
 			item.size = this.size;
 			item.inputType = this.type;
 			item.variant = this.variant;
@@ -26483,6 +26621,10 @@ __decorate([property({
 	type: Array,
 	attribute: false
 })], NLDDSegmentedControl.prototype, "values", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("neutral-tinted")
+})], NLDDSegmentedControl.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("md")
@@ -26621,7 +26763,7 @@ function stepperTemplate(component) {
 			@keydown=${component._handleKeydown}
 		>
 			<nldd-icon-button
-				variant="neutral-tinted"
+				appearance="neutral-tinted"
 				size=${component.size}
 				icon="minus"
 				text=${component._t("components.stepper.decrement-action")}
@@ -26636,7 +26778,7 @@ function stepperTemplate(component) {
 				aria-hidden="true"
 			></div>
 			<nldd-icon-button
-				variant="neutral-tinted"
+				appearance="neutral-tinted"
 				size=${component.size}
 				icon="plus"
 				text=${component._t("components.stepper.increment-action")}
@@ -26709,7 +26851,7 @@ var NLDDStepper = (_NLDDStepper = class NLDDStepper extends DescribedBy(FormAsso
 		if (!isNaN(parsed)) this.value = Math.max(this.min, Math.min(this.max, parsed));
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddStepperTranslations[key];
+		return translate(this.translations, nlddStepperTranslations, key);
 	}
 	_decrement() {
 		if (this.disabled) return;
@@ -27271,6 +27413,11 @@ __decorate([property({
 })], NLDDSwitchField.prototype, "invalid", void 0);
 NLDDSwitchField = __decorate([customElement("nldd-switch-field")], NLDDSwitchField);
 //#endregion
+//#region src/components/inputs/text-editor/text-editor.labels.ts
+/** Says the editor's labels changed, such as after a language switch: the
+*  widgets that draw a translated label rebuild with the new text. */
+var relabel = StateEffect.define();
+//#endregion
 //#region node_modules/@lezer/markdown/dist/index.js
 var CompositeBlock = class CompositeBlock {
 	static create(type, value, from, parentHash, end) {
@@ -29708,22 +29855,42 @@ function enclosingNamed(state, pos, side, names) {
 }
 //#endregion
 //#region src/components/inputs/text-editor/text-editor.mentions.ts
+/** What may follow a trigger when a list says nothing else: letters in any
+*  script and with any accent, digits, `_`, `.`, `+` and `-`. A name like
+*  `józef` reaches the source whole, and so does the `+1` of `:+1:`. A space
+*  ends the query, as it ends a mention in most systems. */
+var DEFAULT_TYPEAHEAD_QUERY = "[\\p{L}\\p{M}\\p{N}_.+-]*";
 /** The query being typed: a trigger at the start of the line or after
-*  whitespace, followed by name characters, up to the caret. Anchored that way
-*  so a trigger inside a word (an e-mail address, `piet@sam`) stays a plain
-*  character. The name class is ASCII for now; widening it changes what a
-*  source receives and is its own change. */
+*  whitespace, followed by what the list allows, up to the caret. Anchored that
+*  way so a trigger inside a word (an e-mail address, `piet@sam`) stays a plain
+*  character. */
 var queryPatterns = /* @__PURE__ */ new Map();
-function queryPattern(triggers) {
-	const chars = Array.from(new Set(triggers.filter((t) => t.length === 1 && !/[\s\w]/.test(t)))).sort().join("");
-	if (!chars) return null;
-	let pattern = queryPatterns.get(chars);
-	if (!pattern) {
-		pattern = new RegExp(`(^|\\s)([${chars.replace(/[\\\]^-]/g, "\\$&")}])([\\w.-]*)$`);
-		queryPatterns.set(chars, pattern);
+function queryPattern(trigger, query) {
+	if (trigger.length !== 1 || /[\s\p{L}\p{N}_]/u.test(trigger)) return null;
+	const key = `${trigger}\u0000${query}`;
+	if (queryPatterns.has(key)) return queryPatterns.get(key);
+	let pattern;
+	try {
+		pattern = new RegExp(`(^|\\s)(${trigger.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&")})(${query})$`, "u");
+	} catch {
+		pattern = query === "[\\p{L}\\p{M}\\p{N}_.+-]*" ? null : queryPattern(trigger, DEFAULT_TYPEAHEAD_QUERY);
 	}
+	queryPatterns.set(key, pattern);
 	return pattern;
 }
+/** One pattern per trigger. Lists on one trigger share it: the first list that
+*  sets a `query` decides, since they all answer the same typed text. */
+function patternsFor(triggers) {
+	const queries = /* @__PURE__ */ new Map();
+	for (const entry of triggers) {
+		const { trigger, query } = typeof entry === "string" ? {
+			trigger: entry,
+			query: void 0
+		} : entry;
+		if (!queries.has(trigger) || queries.get(trigger) === void 0 && query !== void 0) queries.set(trigger, query);
+	}
+	return Array.from(queries, ([trigger, query]) => queryPattern(trigger, query ?? "[\\p{L}\\p{M}\\p{N}_.+-]*")).filter((pattern) => pattern !== null);
+}
 /** Code is quoted verbatim, so a trigger in a fenced block, an indented block
 *  or a backtick span is not a typeahead and must not open the list. */
 var CODE_NODES = /* @__PURE__ */ new Set([
@@ -29739,18 +29906,21 @@ function inCode(state, pos) {
 *  without it. Both the completion source and the reopen-on-delete path go
 *  through this, so they cannot disagree about what counts as a query. */
 function typeaheadQueryAt(state, pos, triggers) {
-	const pattern = queryPattern(triggers);
-	if (!pattern) return null;
 	const line = state.doc.lineAt(pos);
-	const match = pattern.exec(state.sliceDoc(line.from, pos));
-	if (!match) return null;
-	const from = line.from + match.index + match[1].length;
+	const text = state.sliceDoc(line.from, pos);
+	let best = null;
+	for (const pattern of patternsFor(triggers)) {
+		const match = pattern.exec(text);
+		if (match && (!best || match.index + match[1].length > best.index + best[1].length)) best = match;
+	}
+	if (!best) return null;
+	const from = line.from + best.index + best[1].length;
 	if (inCode(state, from)) return null;
 	return {
 		from,
 		to: pos,
-		query: match[3],
-		trigger: match[2]
+		query: best[3],
+		trigger: best[2]
 	};
 }
 /** Href prefix that marks a markdown link as a mention. */
@@ -29820,10 +29990,11 @@ function renderLead(completion) {
 function rowClass(completion) {
 	return completion.candidate.avatar ? "cm-nldd-row-avatar" : "";
 }
-function completionSource(getTypeaheads, onChoose) {
+var setEmptyMessage = StateEffect.define();
+function completionSource(getTypeaheads, onChoose, defaultEmptyText) {
 	return async (context) => {
 		const lists = getTypeaheads();
-		const match = typeaheadQueryAt(context.state, context.pos, lists.map((t) => t.trigger));
+		const match = typeaheadQueryAt(context.state, context.pos, lists);
 		if (!match) return null;
 		const onTrigger = lists.filter((t) => t.trigger === match.trigger);
 		const results = await Promise.all(onTrigger.map((t) => t.source(match.query)));
@@ -29856,6 +30027,16 @@ function completionSource(getTypeaheads, onChoose) {
 				}
 			});
 		});
+		const message = options.length ? null : emptyMessageFor(onTrigger, match.query, defaultEmptyText);
+		const view = context.view;
+		if (view && !context.aborted && view.state.doc === context.state.doc) {
+			const current = view.state.field(emptyMessageField, false);
+			const next = message === null ? null : {
+				from: match.from,
+				text: message
+			};
+			if (current?.text !== next?.text || current?.from !== next?.from) view.dispatch({ effects: setEmptyMessage.of(next) });
+		}
 		if (!options.length) return null;
 		return {
 			from: match.from,
@@ -29864,6 +30045,62 @@ function completionSource(getTypeaheads, onChoose) {
 		};
 	};
 }
+function emptyMessageFor(lists, query, defaultEmptyText) {
+	for (const list of lists) {
+		const text = list.emptyText?.(query);
+		if (text !== void 0) return text || null;
+	}
+	return defaultEmptyText(query);
+}
+/**
+* The message in place of an empty list. It sits where the list would, in the
+* same top-layer frame and with the same surface, but it is not an option:
+* nothing to select or apply, so it is a status that a screen reader announces
+* rather than a row in the listbox. It goes when there are candidates again,
+* when the caret leaves the query, on Escape and when the editor loses focus.
+*/
+var emptyMessageField = StateField.define({
+	create: () => null,
+	update(value, tr) {
+		for (const effect of tr.effects) if (effect.is(setEmptyMessage)) return effect.value;
+		if (!value) return null;
+		if (tr.docChanged) value = {
+			...value,
+			from: tr.changes.mapPos(value.from)
+		};
+		if (tr.docChanged || tr.selection) {
+			const head = tr.state.selection.main.head;
+			const line = tr.state.doc.lineAt(head);
+			if (value.from < line.from || value.from >= head) return null;
+		}
+		return value;
+	},
+	provide: (field) => showTooltip.from(field, (value) => value && {
+		pos: value.from,
+		above: false,
+		create: () => {
+			const dom = document.createElement("div");
+			dom.className = "cm-nldd-typeahead-empty";
+			dom.setAttribute("role", "status");
+			dom.textContent = value.text;
+			return { dom };
+		}
+	})
+});
+var emptyMessageClose = [
+	Prec.high(keymap.of([{
+		key: "Escape",
+		run: (view) => {
+			if (!view.state.field(emptyMessageField, false)) return false;
+			view.dispatch({ effects: setEmptyMessage.of(null) });
+			return true;
+		}
+	}])),
+	EditorView.focusChangeEffect.of((state, focusing) => !focusing && state.field(emptyMessageField, false) ? setEmptyMessage.of(null) : null),
+	EditorView.updateListener.of((update) => {
+		if (completionStatus(update.state) === "active" && update.state.field(emptyMessageField, false)) queueMicrotask(() => update.view.dispatch({ effects: setEmptyMessage.of(null) }));
+	})
+];
 /**
 * A frame for the list in the top layer, the way an nldd-menu opens.
 *
@@ -29997,6 +30234,19 @@ var popupTheme = EditorView.theme({
 		fontStyle: "normal"
 	},
 	".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail": { color: "inherit" },
+	".cm-tooltip.cm-nldd-typeahead-empty": {
+		border: "none",
+		borderRadius: "var(--semantics-overlays-corner-radius)",
+		backgroundColor: "var(--semantics-surfaces-base-background-color)",
+		boxShadow: "var(--components-menu-box-shadow)",
+		minWidth: "var(--primitives-area-280)",
+		maxWidth: "var(--primitives-area-400)",
+		boxSizing: "border-box",
+		padding: "var(--primitives-space-12) var(--primitives-space-16)",
+		color: "var(--semantics-content-secondary-color)",
+		fontFamily: "var(--primitives-font-family-body)",
+		fontSize: "var(--primitives-font-size-100)"
+	},
 	"@media (pointer: coarse)": { ".cm-tooltip.cm-tooltip-autocomplete > ul > li": { minHeight: "var(--semantics-controls-md-min-size)" } }
 });
 /**
@@ -30004,17 +30254,16 @@ var popupTheme = EditorView.theme({
 * hand over its current lists; choosing a candidate writes what the list's
 * `insert` says and calls `onChoose`. Without lists it is inert.
 */
-function typeaheads(getTypeaheads, onChoose) {
+function typeaheads(getTypeaheads, onChoose, defaultEmptyText = () => null) {
 	const reopenOnDelete = EditorView.updateListener.of((update) => {
 		if (!update.docChanged || completionStatus(update.state) !== null) return;
 		if (!update.transactions.some((tr) => tr.isUserEvent("delete"))) return;
-		const triggers = getTypeaheads().map((t) => t.trigger);
-		if (typeaheadQueryAt(update.state, update.state.selection.main.head, triggers)) startCompletion(update.view);
+		if (typeaheadQueryAt(update.state, update.state.selection.main.head, getTypeaheads())) startCompletion(update.view);
 	});
 	return [
 		topLayerPopups(),
 		autocompletion({
-			override: [completionSource(getTypeaheads, onChoose)],
+			override: [completionSource(getTypeaheads, onChoose, defaultEmptyText)],
 			icons: false,
 			addToOptions: [{
 				position: 20,
@@ -30023,6 +30272,8 @@ function typeaheads(getTypeaheads, onChoose) {
 			optionClass: rowClass
 		}),
 		reopenOnDelete,
+		emptyMessageField,
+		emptyMessageClose,
 		popupTheme
 	];
 }
@@ -30057,10 +30308,10 @@ var LinkOpenWidget = class extends WidgetType {
 	constructor(href, label) {
 		super();
 		this.href = href;
-		this.label = label;
+		this.ariaLabel = label(href);
 	}
 	eq(other) {
-		return other.href === this.href;
+		return other.href === this.href && other.ariaLabel === this.ariaLabel;
 	}
 	toDOM() {
 		const anchor = document.createElement("a");
@@ -30068,7 +30319,7 @@ var LinkOpenWidget = class extends WidgetType {
 		anchor.href = this.href;
 		anchor.target = "_blank";
 		anchor.rel = "noopener noreferrer";
-		anchor.setAttribute("aria-label", this.label(this.href));
+		anchor.setAttribute("aria-label", this.ariaLabel);
 		const icon = document.createElement("nldd-icon");
 		icon.setAttribute("icon", "external-link");
 		icon.setAttribute("aria-hidden", "true");
@@ -30210,7 +30461,7 @@ function linkOpenBadge(label) {
 			this.decorations = buildBadges(view, label);
 		}
 		update(update) {
-			if (update.docChanged || update.viewportChanged) this.decorations = buildBadges(update.view, label);
+			if (update.docChanged || update.viewportChanged || update.transactions.some((tr) => tr.effects.some((e) => e.is(relabel)))) this.decorations = buildBadges(update.view, label);
 		}
 	}, { decorations: (plugin) => plugin.decorations });
 }
@@ -30645,13 +30896,15 @@ var MentionWidget = class extends WidgetType {
 		const token = document.createElement("span");
 		token.className = "cm-md-mention-token";
 		token.setAttribute("data-user", this.id);
+		token.setAttribute("spellcheck", "false");
 		if (this.selected) token.setAttribute("data-selected", "");
 		const at = document.createElement("nldd-icon");
 		at.className = "cm-md-mention-token-icon";
 		at.setAttribute("icon", "at");
 		at.setAttribute("aria-hidden", "true");
 		const name = document.createElement("span");
-		name.textContent = this.label;
+		name.className = "cm-md-mention-token-name";
+		name.dataset.label = this.label;
 		token.append(at, name);
 		return token;
 	}
@@ -30746,6 +30999,120 @@ function mentionRangeStartingAt(state, pos) {
 		to: link.to
 	} : null;
 }
+//#endregion
+//#region src/components/inputs/text-editor/text-editor.spellcheck.ts
+/** Says whether a syntax node is left out of spellchecking, and with it all it
+*  contains. A plugin that renders something of its own adds a test here, so
+*  its syntax does not get a red underline in every consumer's editor. */
+var spellcheckExclusions = Facet.define();
+/** Code is quoted as it is, an address is not a word, and a mention is a name
+*  someone chose; none of it is the writer's spelling to correct. The text of
+*  a link is, so a link is checked except for its URL. */
+var NOT_PROSE = /* @__PURE__ */ new Set([
+	"InlineCode",
+	"FencedCode",
+	"CodeBlock",
+	"URL",
+	"Autolink"
+]);
+function isMention(node, state) {
+	if (node.name !== "Link") return false;
+	const url = node.node.getChild("URL");
+	return url !== null && state.sliceDoc(url.from, url.to).startsWith("user:");
+}
+var builtIn = spellcheckExclusions.of((node, state) => NOT_PROSE.has(node.name) || isMention(node, state));
+var noSpellcheck = Decoration.mark({ attributes: { spellcheck: "false" } });
+function exclusions(view) {
+	const tests = view.state.facet(spellcheckExclusions);
+	const builder = new RangeSetBuilder();
+	const tree = syntaxTree(view.state);
+	let markedTo = -1;
+	for (const { from, to } of view.visibleRanges) tree.iterate({
+		from,
+		to,
+		enter: (node) => {
+			if (!tests.some((test) => test(node, view.state))) return;
+			if (node.to > node.from && node.from >= markedTo) {
+				builder.add(node.from, node.to, noSpellcheck);
+				markedTo = node.to;
+			}
+			return false;
+		}
+	});
+	return builder.finish();
+}
+var exclusionMarks = ViewPlugin.fromClass(class {
+	constructor(view) {
+		this.decorations = exclusions(view);
+	}
+	update(update) {
+		if (update.docChanged || update.viewportChanged || syntaxTree(update.state) !== syntaxTree(update.startState)) this.decorations = exclusions(update.view);
+	}
+}, { decorations: (plugin) => plugin.decorations });
+/**
+* Deleting left to the browser wherever the editor has nothing to add.
+*
+* Every Backspace or Delete CodeMirror handles itself costs the spelling marks
+* on the line: it writes the line anew and the browser drops them until the
+* next word is typed, in every browser. Typing does not have this, because
+* CodeMirror lets the browser insert a letter and reads it back, and a deletion
+* the browser does keeps them too. It has to be every plain deletion: a single
+* space or a selection removed by CodeMirror is enough to lose them.
+*
+* CodeMirror keeps the key where it does more than delete text inside one text
+* node: a made-up event (which has no default action) or a modifier, more than
+* one cursor, a deletion that reaches past the text node the caret is in (a
+* line join, a widget or a mark boundary next to it, or a selection across
+* them), and the indentation at the start of a line, where it removes a whole
+* indent step. List and heading markup have their own bindings, which run first
+* and only take the key when they have something to do.
+*
+* A binding that claims the key makes CodeMirror prevent the default, so the
+* editor's Backspace and Delete bindings ask this and return false when it says
+* yes: with no binding taking the key, the browser deletes and CodeMirror reads
+* the change from the DOM.
+*/
+var nativeDeletion = Facet.define({ combine: (values) => values.some(Boolean) });
+/** The plain, real Backspace or Delete being handled, if it is one. An observer
+*  runs before the bindings and sees the event, which a binding does not. */
+var plainDeletion = /* @__PURE__ */ new WeakMap();
+var watchDeletion = EditorView.domEventObservers({ keydown(event, view) {
+	const plain = event.isTrusted && !event.isComposing && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+	plainDeletion.set(view, plain && (event.key === "Backspace" || event.key === "Delete") ? event.key : null);
+} });
+/** The text node and offset at `pos`, or null when the DOM there is not text. */
+function textAt(view, pos) {
+	const { node, offset } = view.domAtPos(pos);
+	return node.nodeType === Node.TEXT_NODE ? {
+		node,
+		offset
+	} : null;
+}
+function leaveDeletionToBrowser(view, key) {
+	if (!view.state.facet(nativeDeletion) || plainDeletion.get(view) !== key) return false;
+	const { selection, doc } = view.state;
+	if (selection.ranges.length > 1) return false;
+	const { from, to, empty } = selection.main;
+	const line = doc.lineAt(from);
+	if (!/\S/.test(view.state.sliceDoc(line.from, from)) && !(key === "Delete" && empty)) return false;
+	const start = textAt(view, from);
+	if (!start) return false;
+	if (!empty) {
+		const end = textAt(view, to);
+		return end !== null && end.node === start.node && start.offset >= 1;
+	}
+	return key === "Backspace" ? start.offset >= 2 : start.offset >= 1 && start.offset <= start.node.length - 2;
+}
+/** Spellchecking on the content, without the parts that are not running text. */
+function spellcheck() {
+	return [
+		EditorView.contentAttributes.of({ spellcheck: "true" }),
+		builtIn,
+		Prec.highest(exclusionMarks),
+		nativeDeletion.of(true),
+		watchDeletion
+	];
+}
 /** Remove every sentinel from a string (doc text -> clean value). */
 function stripSentinels(text) {
 	return text.split("⁠").join("");
@@ -30910,10 +31277,10 @@ var AnnotationBadge = class extends WidgetType {
 		super();
 		this.ids = ids;
 		this.quote = quote;
-		this.label = label;
+		this.ariaLabel = label(ids.length, truncateQuote(quote));
 	}
 	eq(other) {
-		return other.quote === this.quote && other.ids.length === this.ids.length && other.ids.every((id, i) => id === this.ids[i]);
+		return other.quote === this.quote && other.ids.length === this.ids.length && other.ids.every((id, i) => id === this.ids[i]) && other.ariaLabel === this.ariaLabel;
 	}
 	toDOM() {
 		const badge = document.createElement("button");
@@ -30921,7 +31288,7 @@ var AnnotationBadge = class extends WidgetType {
 		badge.type = "button";
 		badge.dataset.annotations = this.ids.join(" ");
 		badge.textContent = String(this.ids.length);
-		badge.setAttribute("aria-label", this.label(this.ids.length, truncateQuote(this.quote)));
+		badge.setAttribute("aria-label", this.ariaLabel);
 		return badge;
 	}
 	/** Give the caret at either edge of the badge a stable, text-height rectangle.
@@ -31060,7 +31427,7 @@ function makeAnnotationRender(label) {
 		create: (state) => buildAll(state, label),
 		update: (value, tr) => {
 			if (value === NOTHING && !tr.state.field(annotationField).length) return value;
-			if (tr.docChanged || !tr.startState.selection.eq(tr.state.selection) || tr.effects.some((e) => e.is(setAnnotations))) return buildAll(tr.state, label);
+			if (tr.docChanged || !tr.startState.selection.eq(tr.state.selection) || tr.effects.some((e) => e.is(setAnnotations) || e.is(relabel))) return buildAll(tr.state, label);
 			return value;
 		},
 		provide: (f) => EditorView.decorations.from(f, (v) => v.deco)
@@ -32181,9 +32548,9 @@ var textEditorStyles = css`
 	}
 
 
-	/* ## Variant — input-field adds the framed surface + a default content padding */
+	/* ## Appearance — input-field adds the framed surface + a default content padding */
 
-	:host([variant="input-field"]) {
+	:host([appearance="input-field"]) {
 		--_corner-radius: var(--primitives-corner-radius-lg);
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_highlight-border-color: var(--semantics-input-fields-border-color);
@@ -32218,7 +32585,7 @@ var textEditorStyles = css`
 
 	/* Focus ring only on the input-field variant; simple relies on the accent caret and
 	   lets a wrapping composition own its focus treatment. */
-	:host([variant="input-field"]) .text-editor:focus-within {
+	:host([appearance="input-field"]) .text-editor:focus-within {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow), var(--_highlight-border-shadow);
@@ -32405,6 +32772,12 @@ var textEditorStyles = css`
 		vertical-align: -0.16em;
 	}
 
+	/* Generated content, not a text node: Safari spellchecks a name in the
+	   editor despite spellcheck="false", and it cannot see this. */
+	.cm-md-mention-token-name::after {
+		content: attr(data-label);
+	}
+
 	.cm-md-mention-token[data-selected] {
 		color: var(--_mention-token-is-selected-content-color);
 		background-color: var(--_mention-token-is-selected-background-color);
@@ -32700,7 +33073,9 @@ var nlddTextEditorTranslations = {
 	"components.text-editor.open-in-new-tab-label": "Open link in nieuw tabblad: {url}",
 	"components.text-editor.annotation-count-label": "{count} {noun} op '{quote}'",
 	"components.text-editor.annotation-singular-lowercase": "annotatie",
-	"components.text-editor.annotation-plural-lowercase": "annotaties"
+	"components.text-editor.annotation-plural-lowercase": "annotaties",
+	"components.text-editor.typeahead-start-typing-text": "Typ om te zoeken",
+	"components.text-editor.typeahead-no-results-text": "Niets gevonden"
 };
 //#endregion
 //#region src/components/inputs/text-editor/text-editor.ts
@@ -32713,9 +33088,9 @@ var nlddTextEditorTranslations = {
 * stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree,
 * so the data stays portable.
 *
-* Default `variant="simple"` is bare (no frame, no focus ring) for use inside
+* Default `appearance="simple"` is bare (no frame, no focus ring) for use inside
 * a composition (e.g. a message field) that owns its chrome and focus; the
-* caret is a prominent accent. `variant="input-field"` adds a framed surface + focus
+* caret is a prominent accent. `appearance="input-field"` adds a framed surface + focus
 *
 * Headless: there is no built-in toolbar. A consumer drives formatting via the
 * command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/
@@ -32745,14 +33120,17 @@ var nlddTextEditorTranslations = {
 * @attr {string} name - Field name for form submission
 * @attr {boolean} readonly - Readonly state (focusable and selectable, not editable)
 * @attr {boolean} required - Required state
+* @attr {boolean} no-spellcheck - Turns spellchecking off. It is on by default, like the other text fields, and leaves out what is not running text: inline code and code blocks, the address of a link and a bare URL (the link text is checked), and mentions. Autocorrect and autocapitalize follow the user's own settings, as in the other fields, also with `no-spellcheck`. Two limits come from the browser: text that was already there is checked once you edit near it, not when the editor opens (the editor lives in a shadow root; Firefox only checks around the caret), and markup that changes how a line is built, such as starting a list item, hides the underlines on that line until you type on.
 * @attr {boolean} wrap - Wrap long lines (default true; prose wraps)
 * @attr {number} rows - Minimum visible rows (the floor in every resize mode). Default: 6.
 * @attr {string} resize - 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default)
-* @attr {string} variant - 'simple' (default, bare) | 'input-field' (framed surface)
+* @attr {string} appearance - 'simple' (default, bare) | 'input-field' (framed surface)
 * @attr {string} accessible-label - Accessible label forwarded to the editor. Set automatically by nldd-form-field.
 *
 * @prop {MentionSource} mentionSource - Consumer-supplied @-mention candidate source (property only). Without it, @-typeahead is inert.
-* @prop {Typeahead[]} typeaheads - Your own typeahead lists next to the @-mention (property only): each a trigger character (`#`, `:`, `/`), a `source` that returns candidates for the text typed after it, and an optional `insert` that decides what a choice writes (by default the trigger, the text and a space). Lists on one trigger are merged in order. A candidate is `{ id, text, supportingText? }` and can carry an `avatar` (its row then takes two lines, the supporting text under the text), an `icon` or a `symbol` for its row.
+* @prop {string} mentionQuery - What may follow the `@` of a mention, as a regular expression source (property only). Default: letters with any accent, digits, `_`, `.`, `+` and `-`. Allow one space to search on a full name, as in `@sam jansen`.
+* @prop {Function} mentionEmptyText - What to say when the @-list has no candidates, called with the typed query (property only). Without it the list says "Typ om te zoeken" or "Niets gevonden", both translatable. Return null to close the list without a word.
+* @prop {Typeahead[]} typeaheads - Your own typeahead lists next to the @-mention (property only): each a trigger character (`#`, `:`, `/`), a `source` that returns candidates for the text typed after it, an optional `query` (a regular expression for what may follow the trigger, such as a space in a full name), an optional `emptyText` (what to say when there are no candidates, instead of the translated default) and an optional `insert` that decides what a choice writes (by default the trigger, the text and a space). Lists on one trigger are merged in order. A candidate is `{ id, text, supportingText? }` and can carry an `avatar` (its row then takes two lines, the supporting text under the text), an `icon` or a `symbol` for its row.
 * @attr {boolean} annotatable - Enable the annotation overlay (off by default). Annotations only render when this is set.
 * @prop {Annotation[]} annotations - Consumer-supplied annotation overlay (property only). Anchored by offset and mapped through edits; the text stays clean. Requires `annotatable`. Assign a NEW array to apply changes (Lit dirty-checks by identity, so in-place mutation like `.push()` won't re-render): `editor.annotations = [...editor.annotations, next]`.
 * @attr {object} translations - Override the editor's assistive-tech strings (the open-in-new-tab link badge and the annotation count badge). Unset keys fall back to Dutch.
@@ -32779,17 +33157,24 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		this.name = "";
 		this.readonly = false;
 		this.required = false;
+		this.noSpellcheck = false;
 		this.wrap = true;
 		this.rows = 6;
 		this.resize = "auto";
-		this.variant = "simple";
+		this.appearance = "simple";
 		this.accessibleLabel = "";
 		this.typeaheads = [];
-		this._mentionTypeahead = {
+		this._mentionTypeahead = ((host) => ({
 			trigger: "@",
-			source: (query) => this.mentionSource?.(query) ?? [],
-			insert: mentionInsert
-		};
+			source: (query) => host.mentionSource?.(query) ?? [],
+			insert: mentionInsert,
+			get query() {
+				return host.mentionQuery;
+			},
+			get emptyText() {
+				return host.mentionEmptyText;
+			}
+		}))(this);
 		this.annotatable = false;
 		this.annotations = [];
 		this.translations = {};
@@ -32797,8 +33182,10 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		this._wrapCompartment = new Compartment();
 		this._placeholderCompartment = new Compartment();
 		this._attrsCompartment = new Compartment();
+		this._spellcheckCompartment = new Compartment();
 		this._historyCompartment = new Compartment();
 		this.invalid = false;
+		this._labels = null;
 		this._cutBuffer = null;
 		this._lastState = null;
 		this._onScrollerPointerDown = (event) => {
@@ -32845,15 +33232,22 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 	*  `vars`. Consumer overrides via `translations` win; unset keys fall back to the
 	*  Dutch defaults. */
 	_t(key, vars) {
-		let str = this.translations[key] ?? nlddTextEditorTranslations[key];
-		if (vars) for (const [k, v] of Object.entries(vars)) str = str.split(`{${k}}`).join(String(v));
-		return str;
+		return translate(this.translations, nlddTextEditorTranslations, key, vars);
+	}
+	/** The translated texts the document's widgets draw, as one string. */
+	_labelSignature() {
+		return [
+			"components.text-editor.open-in-new-tab-label",
+			"components.text-editor.annotation-count-label",
+			"components.text-editor.annotation-singular-lowercase",
+			"components.text-editor.annotation-plural-lowercase"
+		].map((key) => this._t(key)).join("\n");
 	}
 	buildExtensions() {
 		return [
 			nlddCodeMirrorTheme,
 			markdownEditing,
-			typeaheads(() => this._typeaheadLists(), (choice) => this._onTypeaheadChosen(choice)),
+			typeaheads(() => this._typeaheadLists(), (choice) => this._onTypeaheadChosen(choice), (query) => this._t(query ? "components.text-editor.typeahead-no-results-text" : "components.text-editor.typeahead-start-typing-text")),
 			Prec.low(orderedListRenumber),
 			annotations((count, quote) => this._t("components.text-editor.annotation-count-label", {
 				count,
@@ -32921,13 +33315,23 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 						return true;
 					}
 				},
-				...defaultKeymap,
+				{
+					key: "Backspace",
+					run: (view) => !leaveDeletionToBrowser(view, "Backspace") && deleteCharBackward(view),
+					shift: deleteCharBackward
+				},
+				{
+					key: "Delete",
+					run: (view) => !leaveDeletionToBrowser(view, "Delete") && deleteCharForward(view)
+				},
+				...defaultKeymap.filter((binding) => binding.key !== "Backspace" && binding.key !== "Delete"),
 				...historyKeymap
 			]),
 			this._placeholderCompartment.of(this._placeholderExtension()),
 			this._wrapCompartment.of(this.wrap ? EditorView.lineWrapping : []),
 			this._editableCompartment.of(this._editableExtension()),
 			this._attrsCompartment.of(this._attrsExtension()),
+			this._spellcheckCompartment.of(this.noSpellcheck ? [] : spellcheck()),
 			EditorView.updateListener.of((u) => {
 				if (u.docChanged) this._onDocChanged();
 				if (u.docChanged || u.selectionSet) this._emitState();
@@ -32985,8 +33389,25 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 	_placeholderExtension() {
 		return this.placeholder ? placeholder(this.placeholder) : [];
 	}
+	/**
+	* A browser checks text when it changes, not when `spellcheck` does: turned
+	* off, the red underlines stayed until the text under them was edited, and
+	* turned on, they only came with new words. Drawing the content anew makes
+	* the browser look again. The state stays as it is, history and selection
+	* included, so this is only the picture.
+	*/
+	_redrawForSpellcheck() {
+		const view = this.view;
+		if (!view) return;
+		const focused = view.hasFocus;
+		view.setState(view.state);
+		if (focused) view.focus();
+	}
 	_attrsExtension() {
-		const attrs = {};
+		const attrs = {
+			autocorrect: "on",
+			autocapitalize: "sentences"
+		};
 		if (this.accessibleLabel) attrs["aria-label"] = this.accessibleLabel;
 		if (this.inputId) attrs["id"] = this.inputId;
 		return EditorView.contentAttributes.of(attrs);
@@ -33009,6 +33430,11 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 	updated(changed) {
 		if (changed.has("rows")) this.style.setProperty("--_rows", String(this.rows));
 		if (this.view) {
+			const labels = this._labelSignature();
+			if (labels !== this._labels) {
+				if (this._labels !== null) this.view.dispatch({ effects: relabel.of(null) });
+				this._labels = labels;
+			}
 			if (changed.has("value")) {
 				if (stripSentinels(this.doc) !== this.value) this.setDoc(stripSentinels(this.value));
 				this.commitFormValue();
@@ -33017,6 +33443,10 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 			if (changed.has("wrap")) this.reconfigure(this._wrapCompartment, this.wrap ? EditorView.lineWrapping : []);
 			if (changed.has("placeholder")) this.reconfigure(this._placeholderCompartment, this._placeholderExtension());
 			if (changed.has("accessibleLabel") || changed.has("inputId")) this.reconfigure(this._attrsCompartment, this._attrsExtension());
+			if (changed.has("noSpellcheck")) {
+				this.reconfigure(this._spellcheckCompartment, this.noSpellcheck ? [] : spellcheck());
+				this._redrawForSpellcheck();
+			}
 			if (changed.has("annotations") || changed.has("annotatable")) this._syncAnnotations();
 		}
 		this._checkAccessibleLabel();
@@ -33494,6 +33924,11 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDTextEditor.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-spellcheck"
+})], NLDDTextEditor.prototype, "noSpellcheck", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -33506,12 +33941,14 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("simple")
-})], NLDDTextEditor.prototype, "variant", void 0);
+})], NLDDTextEditor.prototype, "appearance", void 0);
 __decorate([property({
 	type: String,
 	attribute: "accessible-label"
 })], NLDDTextEditor.prototype, "accessibleLabel", void 0);
 __decorate([property({ attribute: false })], NLDDTextEditor.prototype, "mentionSource", void 0);
+__decorate([property({ attribute: false })], NLDDTextEditor.prototype, "mentionQuery", void 0);
+__decorate([property({ attribute: false })], NLDDTextEditor.prototype, "mentionEmptyText", void 0);
 __decorate([property({ attribute: false })], NLDDTextEditor.prototype, "typeaheads", void 0);
 __decorate([property({
 	type: Boolean,
@@ -34801,7 +35238,7 @@ var NLDDTimePicker = (_NLDDTimePicker = class NLDDTimePicker extends DescribedBy
 		this._selfScrollTimer = 0;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddTimePickerTranslations[key];
+		return translate(this.translations, nlddTimePickerTranslations, key);
 	}
 	get _label() {
 		return this.accessibleLabel || this._t("components.time-picker.default-label");
@@ -35092,7 +35529,7 @@ function renderPicker$1(component) {
 	return html`
 		<div class="time-field__picker-button">
 			<nldd-icon-button
-				variant="neutral-tinted"
+				appearance="neutral-tinted"
 				size=${buttonSize}
 				icon="clock"
 				text=${component._t("components.time-field.to-pick-time-action")}
@@ -35133,7 +35570,7 @@ function renderPicker$1(component) {
 					`}
 					<nldd-spacer size="16"></nldd-spacer>
 					<nldd-button
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						size=${component._pickerButtonSize}
 						width="full"
 						text=${component._t("components.time-field.confirm-action")}
@@ -35341,7 +35778,7 @@ var NLDDTimeField = (_NLDDTimeField3 = class NLDDTimeField extends DescribedBy(F
 		super.disconnectedCallback();
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddTimeFieldTranslations[key];
+		return translate(this.translations, nlddTimeFieldTranslations, key);
 	}
 	get _fieldLabel() {
 		return this.accessibleLabel || this._t("components.time-field.default-label");
@@ -35690,11 +36127,23 @@ var toggleButtonStyles = css`
 		--_font: var(--semantics-buttons-md-primary-text-font);
 		--_icon-size: var(--semantics-buttons-md-icon-size);
 		--_icon-only-icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
 		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
 		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
 		${inheritedTextReset}
@@ -35747,6 +36196,81 @@ var toggleButtonStyles = css`
 		--_stacked-text-font: var(--primitives-font-body-xxs-medium-flat);
 	}
 
+	:host([appearance="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
+		--_is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
+	}
+
+	:host([appearance="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+		--_is-selected-background-color: var(--semantics-buttons-neutral-transparent-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-transparent-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-highlight-border-color);
+	}
+
+	:host([appearance="accent-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+		--_is-selected-background-color: var(--semantics-buttons-accent-transparent-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-accent-transparent-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-highlight-border-color);
+	}
+
+	:host([selected-icon]:is([appearance="neutral-transparent"], [appearance="accent-transparent"])) {
+		--_is-selected-background-color: var(--_background-color);
+		--_is-selected-content-color: var(--_content-color);
+		--_is-selected-highlight-border-color: var(--_highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--_is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--_is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--_is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--_is-active-background-color);
+		--_is-selected-is-active-content-color: var(--_is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--_is-active-highlight-border-color);
+	}
+
 	:host([disabled]) {
 		opacity: var(--primitives-opacity-disabled);
 		pointer-events: none;
@@ -35763,7 +36287,7 @@ var toggleButtonStyles = css`
 		border: none;
 		border-radius: var(--_corner-radius);
 		background: none;
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		background-color: var(--_background-color);
 		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 		width: var(--_min-size);
 		min-height: var(--_min-size);
@@ -35771,7 +36295,7 @@ var toggleButtonStyles = css`
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--_content-color);
 		font: var(--_font);
 		white-space: nowrap;
 		text-decoration: none;
@@ -35787,38 +36311,38 @@ var toggleButtonStyles = css`
 		.toggle-button:hover,
 		.toggle-button:has(.toggle-button__input:hover) {
 			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
-			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-content-color);
 		}
 	}
 
 	.toggle-button:active,
 	.toggle-button:has(.toggle-button__input:active) {
 		--_highlight-border-color: var(--_is-active-highlight-border-color);
-		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-content-color);
 	}
 
 	:host([selected]) .toggle-button {
 		--_highlight-border-color: var(--_is-selected-highlight-border-color);
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		background-color: var(--_is-selected-background-color);
+		color: var(--_is-selected-content-color);
 	}
 
 	@media (hover: hover) {
 		:host([selected]) .toggle-button:hover,
 		:host([selected]) .toggle-button:has(.toggle-button__input:hover) {
 			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
-			background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+			background-color: var(--_is-selected-is-hovered-background-color);
+			color: var(--_is-selected-is-hovered-content-color);
 		}
 	}
 
 	:host([selected]) .toggle-button:active,
 	:host([selected]) .toggle-button:has(.toggle-button__input:active) {
 		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		background-color: var(--_is-selected-is-active-background-color);
+		color: var(--_is-selected-is-active-content-color);
 	}
 
 	.toggle-button:focus-visible,
@@ -35893,8 +36417,9 @@ function toggleButtonTemplate(component) {
 	const showPlaceholder = component.variant === "icon" || component.variant === "icon-and-text";
 	const ariaLabel = component.accessibleLabel || (component.variant === "icon" && component.text ? component.text : "") || nothing;
 	const tooltipText = showIcon && !showText ? component.accessibleLabel || component.text || "" : "";
-	const icon = component.icon ? html`<nldd-icon class="toggle-button__icon"
-				icon=${component.icon}
+	const iconName = component.selected && component.selectedIcon ? component.selectedIcon : component.icon;
+	const icon = iconName ? html`<nldd-icon class="toggle-button__icon"
+				icon=${iconName}
 			></nldd-icon>` : html`<slot
 				name="icon"
 				@slotchange=${component.requestUpdate}
@@ -35958,6 +36483,11 @@ function toggleButtonTemplate(component) {
 * A selectable button that toggles between selected and unselected.
 * Available as a button (aria-pressed), a checkbox, or a radio.
 *
+* The label stays the same in both states: the state is in aria-pressed (or
+* checked) and in the fill, so a screen reader says "Favoriet, pressed". A label
+* that changes with the state ("Volgen", then "Ontvolgen") says what the
+* button does next; that is an nldd-button whose text you change, not a toggle.
+*
 * In radio mode the button itself is the radio: it carries the role, the state
 * and its place in the group. A native radio in a shadow root of its own would
 * be a group of one, counted as "1 of 1" and stopped at by Tab.
@@ -35965,6 +36495,7 @@ function toggleButtonTemplate(component) {
 * @element nldd-toggle-button
 *
 * @attr {'button' | 'checkbox' | 'radio'} type - What the button is: a button with aria-pressed, a native checkbox, or a radio (default: 'button')
+* @attr {'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'accent-transparent'} appearance - Visual style, color included (default: 'neutral-tinted'). Selected is filled in each of them; the transparent ones are for a toggle among transparent buttons, and with a selected-icon they stay quiet when on.
 * @attr {'xs' | 'sm' | 'md' | 'lg'} size - Button size (default: 'md')
 * @attr {boolean} selected - Selected state
 * @attr {boolean} disabled - Disabled state
@@ -35973,6 +36504,7 @@ function toggleButtonTemplate(component) {
 * @attr {string} name - Name for form submission (checkbox/radio)
 * @attr {string} text - Button text
 * @attr {string} icon - Icon name for nldd-icon
+* @attr {string} selected-icon - Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one they fill, so the state always shows.
 * @attr {'text' | 'icon' | 'icon-and-text'} variant - What renders: text, icon, or both. Unset → auto-detect from text/icon attributes.
 * @attr {string} accessible-label - Accessible label; required for icon-only usage
 * @attr {boolean} required - Required state. Set by nldd-toggle-button-group.
@@ -35989,6 +36521,7 @@ var NLDDToggleButton = (_NLDDToggleButton = class NLDDToggleButton extends Descr
 		this.required = false;
 		this._initialSelected = false;
 		this.type = "button";
+		this.appearance = "neutral-tinted";
 		this.size = "md";
 		this.selected = false;
 		this.disabled = false;
@@ -35997,6 +36530,7 @@ var NLDDToggleButton = (_NLDDToggleButton = class NLDDToggleButton extends Descr
 		this.name = "";
 		this.text = "";
 		this.icon = "";
+		this.selectedIcon = "";
 		this.variant = "";
 		this.accessibleLabel = "";
 		this._warnedA11y = false;
@@ -36175,6 +36709,10 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], NLDDToggleButton.prototype, "type", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("neutral-tinted")
+})], NLDDToggleButton.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("md")
@@ -36202,6 +36740,11 @@ __decorate([property({
 	converter: reflectNonDefault("")
 })], NLDDToggleButton.prototype, "text", void 0);
 __decorate([property({ type: String })], NLDDToggleButton.prototype, "icon", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "selected-icon",
+	converter: reflectNonDefault("")
+})], NLDDToggleButton.prototype, "selectedIcon", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("")
@@ -36268,7 +36811,7 @@ function toggleButtonGroupTemplate(component) {
 * Nederlandse Digitale Dienst Toggle Button Group Component (Lit + TypeScript)
 *
 * Groups nldd-toggle-button elements and manages selection, keyboard navigation,
-* and forwarding of type, name, size, and disabled state to all buttons.
+* and forwarding of type, name, appearance, size, and disabled state to all buttons.
 *
 * For type="radio" (single-select), arrow keys navigate between buttons and
 * automatically select the focused one.
@@ -36278,6 +36821,7 @@ function toggleButtonGroupTemplate(component) {
 *
 * @attr {'button' | 'checkbox' | 'radio'} type - Selection mode (default: 'checkbox')
 * @attr {string} name - Forwarded to all buttons
+* @attr {'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'accent-transparent'} appearance - Forwarded to all buttons (default: 'neutral-tinted')
 * @attr {'xs' | 'sm' | 'md'} size - Forwarded to all buttons (default: 'md')
 * @attr {boolean} disabled - Disables all buttons
 * @attr {string} accessible-label - Accessible name for the group (aria-label)
@@ -36297,6 +36841,7 @@ var NLDDToggleButtonGroup = (_NLDDToggleButtonGroup = class NLDDToggleButtonGrou
 		this._warnedRequired = false;
 		this.type = "checkbox";
 		this.name = "";
+		this.appearance = "neutral-tinted";
 		this.size = "md";
 		this.disabled = false;
 		this.accessibleLabel = "";
@@ -36366,7 +36911,7 @@ var NLDDToggleButtonGroup = (_NLDDToggleButtonGroup = class NLDDToggleButtonGrou
 	}
 	firstUpdated() {}
 	updated(changed) {
-		if (changed.has("type") || changed.has("name") || changed.has("size") || changed.has("disabled")) this._syncButtons();
+		if (changed.has("type") || changed.has("name") || changed.has("appearance") || changed.has("size") || changed.has("disabled")) this._syncButtons();
 		if (changed.has("type")) this._syncRole();
 		if (changed.has("accessibleLabel")) this._appliedLabel = setOwnedAttribute(this, "aria-label", this.accessibleLabel, this._appliedLabel);
 		if (changed.has("accessibleLabeledBy")) {
@@ -36386,6 +36931,7 @@ var NLDDToggleButtonGroup = (_NLDDToggleButtonGroup = class NLDDToggleButtonGrou
 		else this.removeAttribute("aria-invalid");
 		this._getButtons().forEach((button) => {
 			button.type = this.type;
+			button.appearance = this.appearance;
 			button.size = this.size;
 			button.required = this.required && this.type === "radio";
 			if (this.type !== "button") button.name = this.name;
@@ -36440,6 +36986,10 @@ __decorate([property({
 	reflect: true
 })], NLDDToggleButtonGroup.prototype, "type", void 0);
 __decorate([property({ type: String })], NLDDToggleButtonGroup.prototype, "name", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("neutral-tinted")
+})], NLDDToggleButtonGroup.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("md")
@@ -36696,7 +37246,7 @@ function renderPicker(component) {
 	return html`
 		<div class="token-field__picker">
 			<nldd-icon-button
-				variant="neutral-tinted"
+				appearance="neutral-tinted"
 				size="sm"
 				icon="chevron-down"
 				text=${component._t("components.token-field.open-menu-action")}
@@ -36795,13 +37345,19 @@ var nlddTokenFieldTranslations = {
 * exactly like nldd-combo-box; the menu filters as you type, with a chevron picker
 * button, arrow-key roving across the tokens and ElementInternals form participation.
 *
+* Options can arrive after the keystroke, from a server you query per
+* keystroke. Slot them into the menu when they come in: if the user is still
+* in the field and the keystroke found nothing to show, the menu opens then.
+* After Escape, or once the user left the field, it stays shut.
+*
 * @element nldd-token-field
 * @attr {string} values - Initial token values as a comma-separated string (e.g. "nl, be, de"). Not reflected; the live value is the `.values` array property. Values can't contain commas.
 * @attr {string} placeholder - Placeholder shown in the input
 * @attr {string} type - Input type forwarded to the inner input (e.g. 'email')
 * @attr {string} autocomplete - Autocomplete hint forwarded to the inner input
 * @attr {string} accessible-label - Accessible label forwarded as aria-label to the input
-* @attr {boolean} allow-custom - Allow free-typed values (not just menu options)
+* @attr {boolean} allow-custom - Allow free-typed values (not just menu options). Typing an option's label in full adds that option, with its value, ignoring case and the spaces around it; with two such labels, the first one.
+* @attr {boolean} no-filter - Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address.
 * @attr {boolean} valid - Marks the field valid (shows the valid icon)
 * @attr {boolean} invalid - Marks the field invalid (shows the invalid icon)
 * @attr {boolean} no-spellcheck - Disables browser spellchecking on the inner input
@@ -36831,6 +37387,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this.autocomplete = "";
 		this.accessibleLabel = "";
 		this.allowCustom = false;
+		this.noFilter = false;
 		this.valid = false;
 		this.invalid = false;
 		this.noSpellcheck = false;
@@ -36848,6 +37405,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this._menu = null;
 		this._resizeObserver = null;
 		this._menuObserver = null;
+		this._openPending = false;
 		this._templateObserver = null;
 		this._pickerPointerdownWhileOpen = false;
 		this._removalFocusIndex = null;
@@ -36865,10 +37423,13 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this._handleMenuToggle = (e) => {
 			this._isOpen = e.newState === "open";
 			if (!this._isOpen) this._highlightedId = "";
-			else requestAnimationFrame(() => {
-				if (this._menu && !this._menu.getHighlighted()) this._menu.moveHighlight("next");
-				this._updateActiveDescendant();
-			});
+			else {
+				this._openPending = false;
+				requestAnimationFrame(() => {
+					if (this._menu && !this._menu.getHighlighted()) this._menu.moveHighlight("next");
+					this._updateActiveDescendant();
+				});
+			}
 		};
 		this._handleMenuSelect = (e) => {
 			const item = e.target;
@@ -36895,7 +37456,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this.requestUpdate("values", old);
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddTokenFieldTranslations[key];
+		return translate(this.translations, nlddTokenFieldTranslations, key);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -37090,6 +37651,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		}
 		this._syncMenuItems();
 		if (!this._isOpen) this._openMenu();
+		this._openPending = this._text !== "" && !this._menu?.matches(":popover-open");
 		this.dispatchEvent(new CustomEvent("input", {
 			detail: { value: this._text },
 			bubbles: true,
@@ -37104,7 +37666,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		const remainder = parts.pop() ?? "";
 		const next = [...this.values];
 		for (const part of parts) {
-			const value = part.trim();
+			const value = part.trim() ? this._valueForTypedText(part) : "";
 			if (value && !next.includes(value)) next.push(value);
 		}
 		if (next.length !== this.values.length) {
@@ -37122,9 +37684,10 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 	}
 	/** Close the menu when focus leaves the field for anything but the menu. */
 	_handleBlur(e) {
+		this._openPending = false;
 		const related = e.relatedTarget;
 		if (related && this._menu?.contains(related)) return;
-		if (this.allowCustom && this._text.trim()) this._commitValue(this._text.trim(), false);
+		if (this.allowCustom && this._text.trim()) this._commitValue(this._valueForTypedText(this._text), false);
 		else this._closeMenu();
 	}
 	_handleKeydown(e) {
@@ -37152,11 +37715,12 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 					highlighted.select();
 				} else if (this.allowCustom && this._text.trim()) {
 					e.preventDefault();
-					this._commitValue(this._text.trim());
+					this._commitValue(this._valueForTypedText(this._text));
 				} else submitOnEnter(this, e);
 				break;
 			}
 			case "Escape":
+				this._openPending = false;
 				if (!this._isOpen) return;
 				e.preventDefault();
 				e.stopPropagation();
@@ -37311,6 +37875,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this._menuObserver?.disconnect();
 		this._menuObserver = new MutationObserver(() => {
 			this._hideSelectedMenuItems();
+			this._handleMenuItemsChange();
 			this.requestUpdate();
 		});
 		this._menuObserver.observe(menu, {
@@ -37326,6 +37891,16 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this._menu.width = `${rect.width}px`;
 	}
 	/**
+	* Typing an option's label in full means that option: its value becomes the
+	* token, not the label, so the form sends what a choice from the menu would.
+	* Anything else typed is a custom value as it stands.
+	*/
+	_valueForTypedText(text) {
+		const typed = text.trim();
+		const option = Array.from(this._menu?.querySelectorAll("nldd-menu-item") ?? []).find((item) => item.closest("nldd-menu") === this._menu && item.text.trim().toLowerCase() === typed.toLowerCase());
+		return option ? option.value || option.text : typed;
+	}
+	/**
 	* Add a value, clear the input, and close the menu — focus returns to the empty
 	* input. The menu only reopens on a deliberate action (typing, ArrowDown, or the
 	* picker), so a focused empty field behaves the same whether it was just focused
@@ -37350,6 +37925,23 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 		this._updateMenuWidth();
 		this._menu.showPopover();
 	}
+	/**
+	* The menu decides whether to open on a keystroke. Options that arrive later
+	* get the same decision: they open a menu the keystroke could not open, and a
+	* menu whose options all went away closes again, as it would on typing. Only
+	* while the user is still in the field.
+	*/
+	_handleMenuItemsChange() {
+		if (!this._menu || this.shadowRoot?.activeElement !== this._input) return;
+		if (this._menu.matches(":popover-open")) {
+			if (this._visibleOptionCount === 0) this._closeMenu();
+			return;
+		}
+		if (this._openPending && this._visibleOptionCount > 0) {
+			this._openPending = false;
+			this._openMenu();
+		}
+	}
 	_closeMenu() {
 		if (!this._menu) return;
 		if (!this._menu.matches(":popover-open")) return;
@@ -37372,7 +37964,7 @@ var NLDDTokenField = (_NLDDTokenField2 = class NLDDTokenField extends DescribedB
 	*  typing, selecting, and whenever `values` changes. */
 	_syncMenuItems() {
 		if (!this._menu) return;
-		this._menu.filter(this._text);
+		this._menu.filter(this._text, { hide: !this.noFilter });
 		this._hideSelectedMenuItems();
 		this._updateActiveDescendant();
 		if (this._isOpen && this._visibleOptionCount === 0) this._closeMenu();
@@ -37421,6 +38013,11 @@ __decorate([property({
 	reflect: true,
 	attribute: "allow-custom"
 })], NLDDTokenField.prototype, "allowCustom", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-filter"
+})], NLDDTokenField.prototype, "noFilter", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -42907,7 +43504,7 @@ var NLDDSidebarSection = (_NLDDSidebarSection = class NLDDSidebarSection extends
 		return this._t("components.sidebar-section.sheet-dismiss-action");
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddSidebarSectionTranslations[key];
+		return translate(this.translations, nlddSidebarSectionTranslations, key);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -43118,7 +43715,10 @@ var cardStyles = css`
 	:host {
 		--_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);
+		--_is-hovered-background-color: var(--components-card-is-hovered-background-color);
+		--_is-hovered-border-color: var(--components-card-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--components-card-is-active-background-color);
+		--_is-active-border-color: var(--components-card-is-active-highlight-border-color);
 
 		display: flex;
 		/* Anchor for the focus ring, which hangs outside the card box. */
@@ -43137,6 +43737,10 @@ var cardStyles = css`
 	:host([background="tinted"]) {
 		--_background-color: var(--components-card-tinted-background-color);
 		--_border-color: var(--components-card-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--components-card-tinted-is-hovered-background-color);
+		--_is-hovered-border-color: var(--components-card-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--components-card-tinted-is-active-background-color);
+		--_is-active-border-color: var(--components-card-tinted-is-active-highlight-border-color);
 	}
 
 
@@ -43152,6 +43756,19 @@ var cardStyles = css`
 		flex-direction: column;
 		flex-grow: 1;
 		isolation: isolate;
+		transition: background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+	}
+
+	@media (hover: hover) {
+		.card:has(> .card__action:hover) {
+			--_border-color: var(--_is-hovered-border-color);
+			background-color: var(--_is-hovered-background-color);
+		}
+	}
+
+	.card:has(> .card__action:active) {
+		--_border-color: var(--_is-active-border-color);
+		background-color: var(--_is-active-background-color);
 	}
 
 	.card::after {
@@ -43159,7 +43776,7 @@ var cardStyles = css`
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		box-shadow: var(--_highlight-border);
+		box-shadow: inset 0 0 0 var(--components-card-highlight-border-width) var(--_border-color);
 		pointer-events: none;
 	}
 
@@ -43303,6 +43920,9 @@ var nlddCardTranslations = { "components.card.opens-in-new-tab-label": "Opent in
 * directly, and Enter/Space work natively). `href` wins when both are set.
 * Nested interactive content, footer buttons for instance, has to be lifted
 * above it with `position: relative; z-index: 1` to stay clickable.
+* A card that is a link or button steps its surface and border one shade up
+* on hover and one more while pressed, as a neutral-base button does; content
+* lifted above the overlay does not set it off.
 *
 * @element nldd-card
 *
@@ -43610,7 +44230,7 @@ function collectionTemplate(component) {
 				` : nothing}
 				${showLoadMore ? html`
 					<nldd-button
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						text=${component._t("components.collection.load-more-action")}
 						width="full"
 						@click=${() => component._loadMore()}
@@ -43702,7 +44322,7 @@ var NLDDCollection = (_NLDDCollection = class NLDDCollection extends LitElement
 		this._scrollListenerAttached = false;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddCollectionTranslations[key];
+		return translate(this.translations, nlddCollectionTranslations, key);
 	}
 	_handOffControlFocus(disabling) {
 		const controls = this.shadowRoot?.querySelectorAll("nldd-icon-button");
@@ -44139,7 +44759,7 @@ var NLDDWindow = (_NLDDWindow = class NLDDWindow extends LitElement {
 		}
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddWindowTranslations[key];
+		return translate(this.translations, nlddWindowTranslations, key);
 	}
 	get _resolvedAccessibleLabel() {
 		return this.accessibleLabel || this._titleBar.text || this._t("components.window.accessible-label");
@@ -44654,7 +45274,6 @@ var NLDDPageFooterLegalBar = class extends LitElement {
 		this.translations = {};
 		this._hasStart = false;
 		this._hasEnd = false;
-		this._mergedTranslations = { ...nlddPageFooterTranslations };
 		this._onSlotChange = (e) => {
 			const slot = e.target;
 			const hasContent = slot.assignedElements().length > 0;
@@ -44663,17 +45282,9 @@ var NLDDPageFooterLegalBar = class extends LitElement {
 			else if (name === "end") this._hasEnd = hasContent;
 		};
 	}
-	willUpdate(changed) {
-		if (changed.has("translations") || changed.has("accessibleLabel")) {
-			this._mergedTranslations = {
-				...nlddPageFooterTranslations,
-				...this.translations
-			};
-			if (this.accessibleLabel) this._mergedTranslations["components.page-footer.legal-bar-accessible-label"] = this.accessibleLabel;
-		}
-	}
 	_t(key) {
-		return this._mergedTranslations[key] ?? "";
+		if (key === "components.page-footer.legal-bar-accessible-label" && this.accessibleLabel) return this.accessibleLabel;
+		return translate(this.translations, nlddPageFooterTranslations, key);
 	}
 	render() {
 		return pageFooterLegalBarTemplate(this);
@@ -45332,7 +45943,7 @@ var NLDDTable = (_NLDDTable = class NLDDTable extends LitElement {
 		this._warnedSilentEmpty = false;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddTableTranslations[key];
+		return translate(this.translations, nlddTableTranslations, key);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -45416,12 +46027,16 @@ var NLDDTable = (_NLDDTable = class NLDDTable extends LitElement {
 		const overflowX = getComputedStyle(this).overflowX;
 		if ((overflowX === "auto" || overflowX === "scroll") && this.scrollWidth > this.clientWidth) this.setAttribute("tabindex", "0");
 		else this.removeAttribute("tabindex");
-		if (this.accessibleLabel) this.setAttribute("aria-label", this.accessibleLabel);
-		else this.setAttribute("aria-label", this._t("components.table.accessible-label"));
+		this._syncLabel();
+	}
+	/** Also on every render, so the fallback follows a language switch. */
+	_syncLabel() {
+		this.setAttribute("aria-label", this.accessibleLabel || this._t("components.table.accessible-label"));
 	}
 	updated(changed) {
 		if (changed.has("columns") || changed.has("smColumns") || changed.has("mdColumns") || changed.has("lgColumns")) this._applyColumns();
 		if (changed.has("accessibleLabel")) this._syncHostA11y();
+		else this._syncLabel();
 		if (changed.has("selectable")) for (const row of this.querySelectorAll("nldd-table-row")) row._syncAriaSelected();
 		if (this.columns) this._warnedColumns = false;
 		if (this.accessibleLabel) this._warnedLabel = false;
@@ -46366,7 +46981,7 @@ var NLDDDragHandleCell = (_NLDDDragHandleCell = class NLDDDragHandleCell extends
 		this.translations = {};
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddDragHandleCellTranslations[key];
+		return translate(this.translations, nlddDragHandleCellTranslations, key);
 	}
 	render() {
 		const label = this._t("components.drag-handle-cell.accessible-label");
@@ -46421,11 +47036,11 @@ var timelineTrackCellStyles = css`
 		--_marker-size: var(--primitives-space-24);
 	}
 
-	:host([variant="minor"]) {
+	:host([level="minor"]) {
 		--_marker-size: var(--primitives-space-10);
 	}
 
-	:host([size="md"][variant="minor"]) {
+	:host([size="md"][level="minor"]) {
 		--_marker-size: var(--primitives-space-12);
 	}
 
@@ -46500,9 +47115,9 @@ var timelineTrackCellStyles = css`
 		background-color: var(--_track-color);
 	}
 
-	:host([variant="none"][status="future"]) .timeline-track-cell__full-line,
-	:host([variant="none"][status="current"]:not([direction="up"])) .timeline-track-cell__full-line,
-	:host([variant="none"][line="none"]) .timeline-track-cell__full-line {
+	:host([level="none"][status="future"]) .timeline-track-cell__full-line,
+	:host([level="none"][status="current"]:not([direction="up"])) .timeline-track-cell__full-line,
+	:host([level="none"][line="none"]) .timeline-track-cell__full-line {
 		background-color: var(--_future-fill-color);
 	}
 
@@ -46566,7 +47181,7 @@ var timelineTrackCellStyles = css`
 //#endregion
 //#region src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.ts
 function timelineTrackCellTemplate(component) {
-	if (component.variant === "none") return html`
+	if (component.level === "none") return html`
 			<div class="timeline-track-cell">
 				${component.position === "only" ? nothing : html`<div class="timeline-track-cell__full-line"></div>`}
 			</div>
@@ -46597,18 +47212,18 @@ function timelineTrackCellTemplate(component) {
 * edge and consecutive steps connect without gaps.
 *
 * By default the cell is a bare track: a line with a dot per row, for a timeline
-* of events. With `variant="step"` the dot grows big enough for a number or an
+* of events. With `size="md"` the dot grows big enough for a number or an
 * icon and you have a list of steps under each other, the vertical counterpart
-* of `nldd-step-indicator`. The size belongs to the variant rather than to the
+* of `nldd-step-indicator`. The size belongs to the lane rather than to the
 * content: every dot in a list is the same size, or the track would jump.
 *
 * @element nldd-timeline-track-cell
-* @attr {'major' | 'minor' | 'none'} variant - What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color
+* @attr {'major' | 'minor' | 'none'} level - What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color
 * @attr {'past' | 'current' | 'future'} status - How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below
 * @attr {'sm' | 'md'} size - How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps
 * @attr {'down' | 'up'} direction - The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there
-* @attr {'first' | 'between' | 'last' | 'only'} position - Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `variant="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it
-* @attr {'auto' | 'top' | 'bottom' | 'both' | 'none'} line - Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `variant="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you
+* @attr {'first' | 'between' | 'last' | 'only'} position - Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it
+* @attr {'auto' | 'top' | 'bottom' | 'both' | 'none'} line - Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you
 * @attr {string} text - Number or short text in the dot
 * @attr {string} icon - Icon name in the dot; wins over `text`
 *
@@ -46618,7 +47233,7 @@ var _NLDDTimelineTrackCell;
 var NLDDTimelineTrackCell = (_NLDDTimelineTrackCell = class NLDDTimelineTrackCell extends VisibilityMixin(LitElement, "cells-container") {
 	constructor(..._args) {
 		super(..._args);
-		this.variant = "major";
+		this.level = "major";
 		this.status = "past";
 		this.size = "sm";
 		this.direction = "down";
@@ -46631,7 +47246,7 @@ var NLDDTimelineTrackCell = (_NLDDTimelineTrackCell = class NLDDTimelineTrackCel
 	/** Only a whole dot in a wide lane has room to read a number in: a minor one is
 	*  smaller still, and would claim to be a step of its own. */
 	get showsContent() {
-		return this.variant === "major" && this.size === "md";
+		return this.level === "major" && this.size === "md";
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -46643,7 +47258,7 @@ var NLDDTimelineTrackCell = (_NLDDTimelineTrackCell = class NLDDTimelineTrackCel
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("major")
-})], NLDDTimelineTrackCell.prototype, "variant", void 0);
+})], NLDDTimelineTrackCell.prototype, "level", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("past")
@@ -46863,19 +47478,10 @@ var NLDDBreadcrumbs = (_NLDDBreadcrumbs = class NLDDBreadcrumbs extends LitEleme
 		super(..._args2);
 		this.accessibleLabel = "";
 		this.translations = {};
-		this._mergedTranslations = { ...nlddBreadcrumbsTranslations };
-	}
-	willUpdate(changed) {
-		if (changed.has("translations") || changed.has("accessibleLabel")) {
-			this._mergedTranslations = {
-				...nlddBreadcrumbsTranslations,
-				...this.translations
-			};
-			if (this.accessibleLabel) this._mergedTranslations["components.breadcrumbs.accessible-label"] = this.accessibleLabel;
-		}
 	}
 	_t(key) {
-		return this._mergedTranslations[key] ?? "";
+		if (key === "components.breadcrumbs.accessible-label" && this.accessibleLabel) return this.accessibleLabel;
+		return translate(this.translations, nlddBreadcrumbsTranslations, key);
 	}
 	render() {
 		return breadcrumbsTemplate(this);
@@ -48100,6 +48706,8 @@ var topNavigationBarStyles = css`
 
 	:host {
 		--_logo-width: var(--semantics-brand-ribbon-sm-width);
+		--_logo-offset: 0px;
+		--_logo-background-color: #154273;
 		--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
 		--_wordmark-max-width: 280px;
 		--_max-width: var(--semantics-page-sections-body-max-width);
@@ -48121,6 +48729,8 @@ var topNavigationBarStyles = css`
 		/* The ribbon's width, and with it everything measured against the ribbon:
 		   its own height and the wordmark beside it. Here rather than on :host,
 		   because a container query cannot measure the container it sits on. */
+		--_logo-height: calc(var(--_logo-width) * 2);
+
 		@container (max-width: ${smMax$2}) {
 			--_logo-width: var(--semantics-brand-ribbon-sm-width);
 		}
@@ -48176,13 +48786,54 @@ var topNavigationBarStyles = css`
 	.top-navigation-bar__logo {
 		display: flex;
 		width: var(--_logo-width);
-		height: calc(var(--_logo-width) * 2);
+		height: var(--_logo-height);
 		grid-column: 2;
 		align-self: start;
 		align-items: center;
 		justify-content: center;
 	}
 
+	@supports (animation-timeline: scroll()) {
+		.top-navigation-bar__logo {
+			position: relative;
+		}
+
+		/* The ribbon carries on above the page, seen when it is pulled down.
+		   No z-index: Safari does not paint it above the page with one. */
+		.top-navigation-bar__logo::before {
+			content: '';
+			position: absolute;
+			bottom: calc(100% + var(--_logo-offset));
+			left: 0;
+			width: 100%;
+			height: 100lvh;
+			background-color: var(--_logo-background-color);
+			pointer-events: none;
+		}
+
+		/* Safari only paints above the page while something fixed touches the
+		   top edge. This sits behind the logo, gone as soon as the page scrolls. */
+		.top-navigation-bar__logo::after {
+			content: '';
+			position: fixed;
+			top: 0;
+			z-index: -1;
+			width: var(--_logo-width);
+			height: var(--_logo-height);
+			background-color: var(--_logo-background-color);
+			pointer-events: none;
+			animation: top-navigation-bar-ribbon-at-top linear both;
+			animation-timeline: scroll(root);
+			animation-range: 0 1px;
+		}
+	}
+
+	@keyframes top-navigation-bar-ribbon-at-top {
+		to {
+			visibility: hidden;
+		}
+	}
+
 	.top-navigation-bar__logo svg {
 		width: 100%;
 		height: 100%;
@@ -48240,7 +48891,7 @@ var topNavigationBarStyles = css`
 		   ribbon centred. One unbreakable name would push the ribbon off centre
 		   and the page past the screen. */
 		min-width: 0;
-		min-height: calc(var(--_logo-width) * 2);
+		min-height: var(--_logo-height);
 		grid-column: 3;
 		flex-direction: column;
 		color: var(--_wordmark-content-color);
@@ -48251,7 +48902,7 @@ var topNavigationBarStyles = css`
 		   on the middle of the ribbon rather than 6px below it. */
 		@container (max-width: ${smMax$2}) {
 			align-self: start;
-			min-height: calc(var(--_logo-width) * 2 - var(--primitives-space-12));
+			min-height: calc(var(--_logo-height) - var(--primitives-space-12));
 			padding-block-start: var(--primitives-space-12);
 		}
 	}
@@ -48640,6 +49291,9 @@ var nlddTopNavigationBarTranslations = {
 * @attr {string} back-href - URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself.
 * @attr {string} back-text - Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug").
 * @attr {string} width - Limits the bar content to a max-width so it lines up with the page sections. 'full' fills the entire width, or pass your own CSS length.
+*
+* @slot global - The global navigation: an nldd-menu-bar with nldd-menu-bar-item elements. On narrow widths these items move into the menu sheet behind the menu button.
+* @slot utility - The utility navigation, such as search and language: an nldd-menu-bar with nldd-menu-bar-item elements. Stays in the bar on every width.
 */
 var _NLDDTopNavigationBar;
 var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar extends withTranslations(LitElement, nlddTopNavigationBarTranslations) {
@@ -48664,6 +49318,14 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 		this._compactRAF = null;
 		this._setupRAF = null;
 		this._appliedMenuBarLabels = /* @__PURE__ */ new WeakMap();
+		this._appliedTexts = null;
+		this._syncLogoOffset = () => {
+			if (window.scrollY > 0) return;
+			const logo = this.shadowRoot?.querySelector(".top-navigation-bar__logo");
+			if (!logo) return;
+			const offset = Math.max(0, Math.round(logo.getBoundingClientRect().top + window.scrollY));
+			this.style.setProperty("--_logo-offset", `${offset}px`);
+		};
 		this._handleItemSelect = (event) => {
 			const detail = event.detail;
 			if (!detail?.item) return;
@@ -48737,9 +49399,20 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 			}
 		};
 	}
+	/** The texts this bar puts on elements it does not render itself, as one string. */
+	_translatedTexts() {
+		return [
+			this._menuText,
+			this._t("components.top-navigation-bar.menu-sheet-dismiss-action"),
+			this._t("components.top-navigation-bar.global-menu-bar-label"),
+			this._t("components.top-navigation-bar.utility-menu-bar-label")
+		].join("\n");
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
-		if (changed.has("translations")) {
+		const texts = this._translatedTexts();
+		if (texts !== this._appliedTexts) {
+			this._appliedTexts = texts;
 			this._globalMenuSheet?.setAttribute("accessible-label", this._menuText);
 			this._globalMenuSheetTitleBar?.setAttribute("dismiss-text", this._t("components.top-navigation-bar.menu-sheet-dismiss-action"));
 			if (this._sheetStack.length > 0) {
@@ -48794,10 +49467,14 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener("select", this._handleItemSelect);
+		window.addEventListener("scroll", this._syncLogoOffset, { passive: true });
+		window.addEventListener("resize", this._syncLogoOffset, { passive: true });
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener("select", this._handleItemSelect);
+		window.removeEventListener("scroll", this._syncLogoOffset);
+		window.removeEventListener("resize", this._syncLogoOffset);
 		this._cleanupCompactDetection();
 		this._globalMenuSheet?.remove();
 		this._globalMenuSheet = null;
@@ -48808,6 +49485,7 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 	firstUpdated() {
 		this._syncHasGlobalItems();
 		this._setupCompactDetection();
+		this._syncLogoOffset();
 	}
 	_setupCompactDetection() {
 		this._cleanupCompactDetection();
@@ -48884,7 +49562,7 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 		page.appendChild(titleBar);
 		const section = document.createElement("nldd-simple-section");
 		this._globalMenuSheetList = document.createElement("nldd-list");
-		this._globalMenuSheetList.setAttribute("variant", "simple");
+		this._globalMenuSheetList.setAttribute("appearance", "simple");
 		this._globalMenuSheetList.setAttribute("dividers", "never");
 		section.appendChild(this._globalMenuSheetList);
 		page.appendChild(section);
@@ -50102,7 +50780,7 @@ function documentTabBarTemplate(component) {
 	})}>
 			<nldd-icon-button
 				text=${component._t("components.document-tab-bar.overflow-action")}
-				variant="neutral-tinted"
+				appearance="neutral-tinted"
 				icon="ellipsis"
 				tooltip-timing="never"
 				popup-type="menu"
@@ -51191,7 +51869,7 @@ function paginationTemplate(component) {
 				<nldd-icon-button
 					icon="chevron-left-small"
 					text=${t("components.pagination.previous-action")}
-					variant="neutral-tinted"
+					appearance="neutral-tinted"
 					no-highlight-border
 					?disabled=${isDisabled || atFirst}
 					href=${hasHref && !isDisabled && !atFirst ? component._hrefForPage(component.current - 1) : nothing}
@@ -51240,7 +51918,7 @@ function paginationTemplate(component) {
 				<nldd-icon-button
 					icon="chevron-right-small"
 					text=${t("components.pagination.next-action")}
-					variant="neutral-tinted"
+					appearance="neutral-tinted"
 					no-highlight-border
 					?disabled=${isDisabled || atLast}
 					href=${hasHref && !isDisabled && !atLast ? component._hrefForPage(component.current + 1) : nothing}
@@ -51289,7 +51967,6 @@ var NLDDPagination = (_NLDDPagination = class NLDDPagination extends LitElement
 		this.centered = false;
 		this.hrefPattern = "";
 		this.translations = {};
-		this._mergedTranslations = { ...nlddPaginationTranslations };
 		this._handleSelectFocus = () => {
 			this.toggleAttribute("is-pointer-focus", isPointerMode());
 		};
@@ -51304,16 +51981,8 @@ var NLDDPagination = (_NLDDPagination = class NLDDPagination extends LitElement
 			this.toggleAttribute("select-expanded", e.newState === "open");
 		};
 	}
-	willUpdate(changed) {
-		if (changed.has("translations")) this._mergedTranslations = {
-			...nlddPaginationTranslations,
-			...this.translations
-		};
-	}
 	_t(key, params) {
-		let text = this._mergedTranslations[key] ?? key;
-		if (params) for (const [k, v] of Object.entries(params)) text = text.replace(`{${k}}`, String(v));
-		return text;
+		return translate(this.translations, nlddPaginationTranslations, key, params);
 	}
 	_getVisiblePages() {
 		if (this.total <= 7) return Array.from({ length: this.total }, (_, i) => i + 1);
@@ -51944,7 +52613,7 @@ function bannerTemplate(component) {
 				<div class="banner__dismiss-button">
 					<nldd-icon-button
 						icon="dismiss-small"
-						variant="neutral-transparent"
+						appearance="neutral-transparent"
 						size=${component.size}
 						accessible-label=${component._t("components.banner.dismiss-action")}
 						@click=${component._onDismissClick}
@@ -52027,7 +52696,7 @@ var NLDDBanner = (_NLDDBanner = class NLDDBanner extends LitElement {
 		this._hasActions = false;
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddBannerTranslations[key];
+		return translate(this.translations, nlddBannerTranslations, key);
 	}
 	get _resolvedIcon() {
 		return this.icon || DEFAULT_ICONS$1[this.variant];
@@ -52343,7 +53012,7 @@ function notificationTemplate(component) {
 				<nldd-icon-button
 					icon="dismiss-small"
 					size="sm"
-					variant="neutral-transparent"
+					appearance="neutral-transparent"
 					tooltip-timing="never"
 					accessible-label=${component._t("components.notification.dismiss-action")}
 					@click=${component._handleDismiss}
@@ -53413,7 +54082,7 @@ var progressBarStyles = css`
 	:host([size="sm"]) { --_height: var(--components-progress-bar-sm-height); }
 	:host([size="lg"]) { --_height: var(--components-progress-bar-lg-height); }
 
-	:host([mode="distribution"]) {
+	:host([variant="distribution"]) {
 		--_segment-indicator-gap: var(--components-progress-bar-distribution-segment-indicator-gap);
 		--_corner-radius: var(--components-progress-bar-distribution-corner-radius);
 	}
@@ -53638,16 +54307,16 @@ var progressBarSegmentIndicatorStyles = css`
 	}
 
 
-	/* ## Rounding per mode
-	   Progress mode: every segment is its own capsule. Distribution mode:
+	/* ## Rounding per variant
+	   Progress variant: every segment is its own capsule. Distribution variant:
 	   segments use a small radius matching the track's outer corners.
-	   data-mode is set by the parent. */
+	   data-variant is set by the parent. */
 
-	:host([data-mode="progress"]) {
+	:host([data-variant="progress"]) {
 		border-radius: var(--components-progress-bar-corner-radius);
 	}
 
-	:host([data-mode="distribution"]) {
+	:host([data-variant="distribution"]) {
 		border-radius: var(--components-progress-bar-distribution-corner-radius);
 	}
 
@@ -53876,7 +54545,7 @@ var nlddProgressBarTranslations = {
 * storage usage). The consumer provides raw values; the component
 * computes percentages from `max`.
 *
-* Two modes:
+* Two variants:
 * - `progress` (default): segments sum toward `max`; remaining space
 *   is empty track. ARIA reads "X% voltooid".
 * - `distribution`: segments fill the bar; ARIA enumerates segments.
@@ -53886,7 +54555,7 @@ var nlddProgressBarTranslations = {
 *
 * @element nldd-progress-bar
 *
-* @attr {'progress'|'distribution'} mode - Semantics for ARIA and visualization (default: 'progress')
+* @attr {'progress'|'distribution'} variant - Semantics for ARIA and visualization (default: 'progress')
 * @attr {number} max - Total value (default: 100)
 * @attr {number} value - Single-segment shorthand (ignored when segment children are present)
 * @attr {string} color - Color for the single-segment shorthand (default: 'accent')
@@ -53948,7 +54617,7 @@ NLDDProgressBarSegmentIndicator = __decorate([customElement("nldd-progress-bar-s
 var NLDDProgressBar = (_NLDDProgressBar = class NLDDProgressBar extends LitElement {
 	constructor(..._args2) {
 		super(..._args2);
-		this.mode = "progress";
+		this.variant = "progress";
 		this.max = 100;
 		this.value = null;
 		this.color = "accent";
@@ -53966,7 +54635,7 @@ var NLDDProgressBar = (_NLDDProgressBar = class NLDDProgressBar extends LitEleme
 		this._onSlotChangeBound = this._onSlotChange.bind(this);
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddProgressBarTranslations[key];
+		return translate(this.translations, nlddProgressBarTranslations, key);
 	}
 	/** Returns true when the user has provided segment children. */
 	get _hasSegmentIndicators() {
@@ -54005,7 +54674,7 @@ var NLDDProgressBar = (_NLDDProgressBar = class NLDDProgressBar extends LitEleme
 			const pct = this.max > 0 ? Math.round(s.value / this.max * 100) : 0;
 			return s.name ? `${s.name}: ${pct}%` : `${pct}%`;
 		});
-		if (this.mode === "distribution") return segmentIndicatorDescriptions.join(", ");
+		if (this.variant === "distribution") return segmentIndicatorDescriptions.join(", ");
 		const totalPct = Math.round(this._percentage);
 		if (allNamed) return `${segmentIndicatorDescriptions.join(", ")}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
 		return `${totalPct}% ${completedSuffix}`;
@@ -54113,14 +54782,14 @@ var NLDDProgressBar = (_NLDDProgressBar = class NLDDProgressBar extends LitEleme
 			const v = Math.max(0, seg.value);
 			if (v <= 0) {
 				seg.hidden = true;
-				seg.removeAttribute("data-mode");
+				seg.removeAttribute("data-variant");
 				seg._autoTooltipText = "";
 				continue;
 			}
 			seg.hidden = false;
 			const pct = denominator > 0 ? v / denominator * 100 : 0;
 			seg.style.setProperty("--context-progress-bar-segment-indicator-width", `${pct}%`);
-			seg.setAttribute("data-mode", this.mode);
+			seg.setAttribute("data-variant", this.variant);
 			seg._autoTooltipText = suppressAutoTooltip ? "" : this._formatSegmentIndicatorTooltip(seg);
 			seg.toggleAttribute("data-grow", isExiting);
 			seg.toggleAttribute("data-shrink", isEntering);
@@ -54133,7 +54802,7 @@ var NLDDProgressBar = (_NLDDProgressBar = class NLDDProgressBar extends LitEleme
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("progress")
-})], NLDDProgressBar.prototype, "mode", void 0);
+})], NLDDProgressBar.prototype, "variant", void 0);
 __decorate([property({
 	type: Number,
 	reflect: true
@@ -54277,16 +54946,16 @@ var progressCircleStyles = css`
 		opacity: 0;
 	}
 
-	/* Progress mode: rounded caps for friendly segment ends. The JS gap
+	/* Progress variant: rounded caps for friendly segment ends. The JS gap
 	   calculation compensates for the half-stroke-width extension so the
 	   visible gap between segments stays consistent.
-	   Distribution mode: butt caps keep the segment boundaries crisp. */
+	   Distribution variant: butt caps keep the segment boundaries crisp. */
 
 	.progress-circle__segment-indicator {
 		stroke-linecap: round;
 	}
 
-	:host([mode="distribution"]) .progress-circle__segment-indicator {
+	:host([variant="distribution"]) .progress-circle__segment-indicator {
 		stroke-linecap: butt;
 	}
 
@@ -54701,7 +55370,7 @@ var nlddProgressCircleTranslations = {
 * Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator.
 *
 * A circular progress indicator that mirrors the API of nldd-progress-bar:
-* single-value or multi-segment, progress or distribution mode, 24 colors,
+* single-value or multi-segment, progress or distribution variant, 24 colors,
 * fade transitions between determinate/indeterminate, indeterminate indicator.
 *
 * Visual differences vs the bar:
@@ -54715,7 +55384,7 @@ var nlddProgressCircleTranslations = {
 *
 * @element nldd-progress-circle
 *
-* @attr {'progress'|'distribution'} mode - Semantics for ARIA and gap behavior (default: 'progress')
+* @attr {'progress'|'distribution'} variant - Semantics for ARIA and gap behavior (default: 'progress')
 * @attr {number} max - Total value (default: 100)
 * @attr {number} value - Single-segment shorthand (ignored when segment children exist)
 * @attr {string} color - Color. Semantic (neutral, accent, success, warning, critical) or a Rijkskleur. Default 'accent'.
@@ -54728,6 +55397,8 @@ var nlddProgressCircleTranslations = {
 * @attr {boolean} indeterminate - Renders the rotating elastic arc animation
 * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
 *
+* @slot - Place for nldd-progress-circle-segment-indicator elements
+*
 * @element nldd-progress-circle-segment-indicator
 *
 * @attr {number} value - Share of the parent's total (default 0; <=0 hides segment)
@@ -54764,7 +55435,7 @@ NLDDProgressCircleSegmentIndicator = __decorate([customElement("nldd-progress-ci
 var NLDDProgressCircle = (_NLDDProgressCircle2 = class NLDDProgressCircle extends LitElement {
 	constructor(..._args2) {
 		super(..._args2);
-		this.mode = "progress";
+		this.variant = "progress";
 		this.max = 100;
 		this.value = null;
 		this.color = "accent";
@@ -54784,7 +55455,7 @@ var NLDDProgressCircle = (_NLDDProgressCircle2 = class NLDDProgressCircle extend
 		this._onSlotChangeBound = this._onSlotChange.bind(this);
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddProgressCircleTranslations[key];
+		return translate(this.translations, nlddProgressCircleTranslations, key);
 	}
 	get _hasSegmentIndicators() {
 		return this._segmentIndicators.length > 0;
@@ -54825,7 +55496,7 @@ var NLDDProgressCircle = (_NLDDProgressCircle2 = class NLDDProgressCircle extend
 			const valuePart = this._formatValuePart(s.value, pct);
 			return s.name ? `${s.name}: ${valuePart}` : valuePart;
 		});
-		if (this.mode === "distribution") return segmentIndicatorDescriptions.join(", ");
+		if (this.variant === "distribution") return segmentIndicatorDescriptions.join(", ");
 		const totalPct = Math.round(this._percentage);
 		const totalValuePart = this._formatValuePart(this._totalValue, totalPct);
 		if (allNamed) {
@@ -54848,7 +55519,7 @@ var NLDDProgressCircle = (_NLDDProgressCircle2 = class NLDDProgressCircle extend
 			const valuePart = this._formatValuePart(s.value, pct);
 			return s.name ? `${s.name}: ${valuePart}` : valuePart;
 		});
-		if (this.mode === "distribution") return segmentIndicatorDescriptions.join(", ");
+		if (this.variant === "distribution") return segmentIndicatorDescriptions.join(", ");
 		const totalPct = Math.round(this._percentage);
 		if (allNamed) return `${segmentIndicatorDescriptions.join(", ")}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
 		return `${totalPct}% ${completedSuffix}`;
@@ -54947,9 +55618,9 @@ var NLDDProgressCircle = (_NLDDProgressCircle2 = class NLDDProgressCircle extend
 		}] : [];
 		const sizeInPixels = Number(this.size) || 28;
 		const strokeWidthPx = getStrokeWidthPx(sizeInPixels);
-		const isMultiSegmentIndicator = sourceSegmentIndicators.length > 1 || this.mode === "distribution";
-		const isProgressMode = this.mode !== "distribution";
-		const gapLength = ((isMultiSegmentIndicator ? isProgressMode ? 1 : 2 : 0) + (isProgressMode && isMultiSegmentIndicator ? strokeWidthPx : 0)) * (100 / sizeInPixels);
+		const isMultiSegmentIndicator = sourceSegmentIndicators.length > 1 || this.variant === "distribution";
+		const isProgressVariant = this.variant !== "distribution";
+		const gapLength = ((isMultiSegmentIndicator ? isProgressVariant ? 1 : 2 : 0) + (isProgressVariant && isMultiSegmentIndicator ? strokeWidthPx : 0)) * (100 / sizeInPixels);
 		const circumference = getCircumference(sizeInPixels);
 		const total = this._totalValue;
 		const denominator = total > this.max ? total : this.max;
@@ -54993,7 +55664,7 @@ var NLDDProgressCircle = (_NLDDProgressCircle2 = class NLDDProgressCircle extend
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("progress")
-})], NLDDProgressCircle.prototype, "mode", void 0);
+})], NLDDProgressCircle.prototype, "variant", void 0);
 __decorate([property({
 	type: Number,
 	reflect: true
@@ -56212,7 +56883,7 @@ function justInTimeEducationTemplate(component) {
 					<div class="just-in-time-education__dismiss-button">
 						<nldd-icon-button
 							icon="dismiss"
-							variant="neutral-transparent"
+							appearance="neutral-transparent"
 							size="md"
 							accessible-label=${component._t("components.just-in-time-education.dismiss-action")}
 							@click=${component._handleDismiss}
@@ -56705,4 +57376,4 @@ __decorate([property({
 })], NLDDJustInTimeEducation.prototype, "noArrow", void 0);
 NLDDJustInTimeEducation = _NLDDJustInTimeEducation = __decorate([customElement("nldd-just-in-time-education")], NLDDJustInTimeEducation);
 //#endregion
-export { NLDDActivityIndicator, NLDDAppView, NLDDAvatar, NLDDAvatarGroup, NLDDBadge, NLDDBanner, NLDDBarSplitView, NLDDBlockquote, NLDDBox, NLDDBreadcrumbs, NLDDBreadcrumbsItem, NLDDButton, NLDDButtonBar, NLDDButtonGroup, NLDDCard, NLDDCell, NLDDCheckbox, NLDDCheckboxField, NLDDCodeEditor, NLDDCodeViewer, NLDDCollection, NLDDComboBox, NLDDContainer, NLDDDateField, NLDDDatePicker, NLDDDescriptionCell, NLDDDivider, NLDDDocumentTabBar, NLDDDragHandleCell, NLDDDropdown, NLDDFileField, NLDDForm, NLDDFormActions, NLDDFormField, NLDDFormSection, NLDDFullBleedSection, NLDDHero, NLDDIcon, NLDDIconButton, NLDDIconCell, NLDDIdentity, NLDDImage, NLDDInlineDialog, NLDDJustInTimeEducation, NLDDKeyboardShortcut, NLDDLink, NLDDList, NLDDListItem, NLDDListItemSegment, NLDDMenu, NLDDMenuBar, NLDDMenuBarItem, NLDDModalDialog, NLDDMultiLineTextField, NLDDNavigationSplitView, NLDDNotification, NLDDNumberField, NLDDOneHalfOneHalfSection, NLDDOneThirdTwoThirdsSection, NLDDPage, NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem, NLDDPagination, NLDDPasswordField, NLDDPopover, NLDDProgressBar, NLDDProgressBarSegmentIndicator, NLDDProgressCircle, NLDDProgressCircleSegmentIndicator, NLDDRadioButton, NLDDRadioButtonField, NLDDRadioButtonGroup, NLDDRichText, NLDDSearchField, NLDDSegmentedControl, NLDDSheet, NLDDSideBySideSplitView, NLDDSidebarSection, NLDDSimpleSection, NLDDSkipLink, NLDDSpacer, NLDDSpacerCell, NLDDSplitButton, NLDDSplitViewDivider, NLDDSplitViewPane, NLDDStackedSplitView, NLDDStatusBar, NLDDStepIndicator, NLDDStepIndicatorItem, NLDDStepper, NLDDSwitch, NLDDSwitchField, NLDDTabBar, NLDDTable, NLDDTableRow, NLDDTag, NLDDText, NLDDTextCell, NLDDTextEditor, NLDDTextField, NLDDTimeField, NLDDTimePicker, NLDDTimelineTrackCell, NLDDTitle, NLDDTitleCell, NLDDToggleButton, NLDDToggleButtonGroup, NLDDToken, NLDDTokenField, NLDDToolbar, NLDDTooltip, NLDDTopNavigationBar, NLDDTopTitleBar, NLDDTwoThirdsOneThirdSection, NLDDValidationList, NLDDWindow };
+export { NLDDActivityIndicator, NLDDAppView, NLDDAvatar, NLDDAvatarGroup, NLDDBadge, NLDDBanner, NLDDBarSplitView, NLDDBlockquote, NLDDBox, NLDDBreadcrumbs, NLDDBreadcrumbsItem, NLDDButton, NLDDButtonBar, NLDDButtonGroup, NLDDCard, NLDDCell, NLDDCheckbox, NLDDCheckboxField, NLDDCodeEditor, NLDDCodeViewer, NLDDCollection, NLDDComboBox, NLDDContainer, NLDDDateField, NLDDDatePicker, NLDDDescriptionCell, NLDDDivider, NLDDDocumentTabBar, NLDDDragHandleCell, NLDDDropdown, NLDDFileField, NLDDForm, NLDDFormActions, NLDDFormField, NLDDFormSection, NLDDFullBleedSection, NLDDHero, NLDDIcon, NLDDIconButton, NLDDIconCell, NLDDIdentity, NLDDImage, NLDDInlineDialog, NLDDJustInTimeEducation, NLDDKeyboardShortcut, NLDDLink, NLDDList, NLDDListItem, NLDDListItemSegment, NLDDMenu, NLDDMenuBar, NLDDMenuBarItem, NLDDModalDialog, NLDDMultiLineTextField, NLDDNavigationSplitView, NLDDNotification, NLDDNumberField, NLDDOneHalfOneHalfSection, NLDDOneThirdTwoThirdsSection, NLDDPage, NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem, NLDDPagination, NLDDPasswordField, NLDDPopover, NLDDProgressBar, NLDDProgressBarSegmentIndicator, NLDDProgressCircle, NLDDProgressCircleSegmentIndicator, NLDDRadioButton, NLDDRadioButtonField, NLDDRadioButtonGroup, NLDDRichText, NLDDSearchField, NLDDSegmentedControl, NLDDSheet, NLDDSideBySideSplitView, NLDDSidebarSection, NLDDSimpleSection, NLDDSkipLink, NLDDSpacer, NLDDSpacerCell, NLDDSplitButton, NLDDSplitViewDivider, NLDDSplitViewPane, NLDDStackedSplitView, NLDDStatusBar, NLDDStepIndicator, NLDDStepIndicatorItem, NLDDStepper, NLDDSwitch, NLDDSwitchField, NLDDTabBar, NLDDTable, NLDDTableRow, NLDDTag, NLDDText, NLDDTextCell, NLDDTextEditor, NLDDTextField, NLDDTimeField, NLDDTimePicker, NLDDTimelineTrackCell, NLDDTitle, NLDDTitleCell, NLDDToggleButton, NLDDToggleButtonGroup, NLDDToken, NLDDTokenField, NLDDToolbar, NLDDTooltip, NLDDTopNavigationBar, NLDDTopTitleBar, NLDDTwoThirdsOneThirdSection, NLDDValidationList, NLDDWindow, setTranslations };