@nldd/design-system 0.8.92 → 0.8.94

package/dist/components/status-and-feedback/step-indicator/step-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"step-indicator.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"step-indicator.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js

@@ -39,9 +39,9 @@ export function stepIndicatorItemTemplate(component) {
     // A past step shows a check mark instead of its number; the number stays in
     // the status text for anyone who can't see it.
     const marker = component.icon
-        ? html `<nldd-icon class="step-indicator__item-icon" name=${component.icon}></nldd-icon>`
+        ? html `<nldd-icon class="step-indicator__item-icon" icon=${component.icon}></nldd-icon>`
         : status === 'past'
-            ? html `<nldd-icon class="step-indicator__item-icon" name="check-mark"></nldd-icon>`
+            ? html `<nldd-icon class="step-indicator__item-icon" icon="check-mark"></nldd-icon>`
             : html `<span class="step-indicator__item-number">${component._index}</span>`;
     const content = html `
 		<span class="step-indicator__item-marker"

package/dist/components/{with-translations-BAKFoEKy.js → with-translations-Dt2DTXJF.js}

@@ -21,6 +21,44 @@ function linkRel(rel, target) {
 	return [...parts].join(" ");
 }
 //#endregion
+//#region src/utilities/translations.ts
+var _globalThis;
+var STORE_KEY = Symbol.for("nldd.translations");
+var store = (_globalThis = globalThis)[STORE_KEY] ?? (_globalThis[STORE_KEY] = { translations: {} });
+/**
+* Sets the texts for the whole package, replacing what was set before. Keys you
+* leave out fall back to Dutch. To start from the shipped English and change a
+* few texts, spread them: `setTranslations({ ...enUS, 'key': 'Mine' })`.
+*
+* Call it before the components render. Calling it again re-renders the
+* components on the page, so a language switch at runtime works too. Call it
+* when the language changes, not on every render: each call walks the page.
+* A component inside a closed shadow root is out of its reach and keeps its old
+* texts until it renders again; ask it to with `requestUpdate()`.
+*/
+function setTranslations(translations) {
+	store.translations = { ...translations };
+	if (typeof document !== "undefined") rerender(document);
+}
+/**
+* Looks a key up through the three layers and fills in `{placeholders}`. Every
+* component's `_t()` goes through here, so none of them skips the package-wide
+* layer.
+*/
+function translate(own, defaults, key, vars) {
+	const name = key;
+	let text = own?.[key] ?? store.translations[name] ?? defaults[key] ?? name;
+	if (vars) for (const [k, v] of Object.entries(vars)) text = text.split(`{${k}}`).join(String(v));
+	return text;
+}
+/** Asks every nldd component on the page, also inside shadow roots, to render again. */
+function rerender(root) {
+	for (const el of Array.from(root.querySelectorAll("*"))) {
+		if (el.tagName.startsWith("NLDD-")) el.requestUpdate?.();
+		if (el.shadowRoot) rerender(el.shadowRoot);
+	}
+}
+//#endregion
 //#region src/utilities/with-translations.ts
 /**
 * Mixin that adds i18n support to a LitElement component.
@@ -46,24 +84,14 @@ function withTranslations(Base, defaults) {
 		constructor(..._args) {
 			super(..._args);
 			this.translations = {};
-			this._mergedTranslations = { ...defaults };
 		}
 		/** @internal */
 		_t(key, vars) {
-			let str = this._mergedTranslations[key] ?? String(key);
-			if (vars) for (const [k, v] of Object.entries(vars)) str = str.split(`{${k}}`).join(String(v));
-			return str;
-		}
-		willUpdate(changed) {
-			super.willUpdate(changed);
-			if (changed.has("translations")) this._mergedTranslations = {
-				...defaults,
-				...this.translations
-			};
+			return translate(this.translations, defaults, key, vars);
 		}
 	}
 	__decorate([property({ type: Object })], TranslationsMixin.prototype, "translations", void 0);
 	return TranslationsMixin;
 }
 //#endregion
-export { linkRel as n, withTranslations as t };
+export { linkRel as i, setTranslations as n, translate as r, withTranslations as t };

package/dist/css/form-section.css

@@ -40,7 +40,7 @@ nldd-form-section > fieldset.form-section {
 
 
 /* # Header (rendered as <legend>, must be direct child of <fieldset>).
-   Title and subtitle are spans inside the legend so screen readers read
+   Title and supporting text are spans inside the legend so screen readers read
    them together as the group label. */
 
 nldd-form-section .form-section__header {
@@ -64,12 +64,12 @@ nldd-form-section .form-section__title {
 }
 
 
-/* # Subtitle */
+/* # Supporting text */
 
-nldd-form-section .form-section__subtitle {
+nldd-form-section .form-section__supporting-text {
 	display: block;
 	color: var(--semantics-content-secondary-color);
-	font: var(--semantics-forms-section-subtitle-font);
+	font: var(--semantics-forms-section-supporting-text-font);
 }
 
 

package/dist/css/form.css

@@ -5,6 +5,10 @@ nldd-form {
 	display: block;
 }
 
+nldd-form[hidden] {
+	display: none;
+}
+
 nldd-form > form {
 	display: block;
 }

package/dist/css/rich-text.css

@@ -94,16 +94,23 @@ nldd-rich-text[color="inherit"] figcaption {
    main-start, so `full` and `wide` read as rightward bleed there and as
    symmetric spans in [centered]. */
 
-nldd-rich-text > * {
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) {
+	display: contents;
+}
+
+nldd-rich-text > *,
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > * {
 	grid-column: full;
 	justify-self: start;
 }
 
-nldd-rich-text[centered] > * {
+nldd-rich-text[centered] > *,
+nldd-rich-text[centered] > div:only-child:not([class], [style], [role], [data-width]) > * {
 	justify-self: center;
 }
 
-nldd-rich-text > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote) {
+nldd-rich-text > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote),
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote) {
 	grid-column: main;
 	/* Fill the main column so short text blocks keep a shared left edge —
 	   justify-self: center would otherwise float a shrinkwrapped heading
@@ -115,33 +122,40 @@ nldd-rich-text > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockq
 
 /* nldd-table stays on the generic full default; use data-width to
    override per table. */
-nldd-rich-text > :is(img, figure, video, iframe, table) {
+nldd-rich-text > :is(img, figure, video, iframe, table),
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(img, figure, video, iframe, table) {
 	grid-column: wide;
 }
 
-nldd-rich-text > :is(pre, nldd-code-viewer) {
+nldd-rich-text > :is(pre, nldd-code-viewer),
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(pre, nldd-code-viewer) {
 	width: 100%;
 }
 
 /* Per-item override for editors; wins on specificity from every default
    above. */
-nldd-rich-text > [data-width="main"] {
+nldd-rich-text > [data-width="main"],
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > [data-width="main"] {
 	grid-column: main;
 }
 
-nldd-rich-text > [data-width="wide"] {
+nldd-rich-text > [data-width="wide"],
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > [data-width="wide"] {
 	grid-column: wide;
 }
 
-nldd-rich-text > [data-width="full"] {
+nldd-rich-text > [data-width="full"],
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > [data-width="full"] {
 	grid-column: full;
 }
 
-nldd-rich-text > :first-child {
+nldd-rich-text > :first-child,
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :first-child {
 	margin-top: 0;
 }
 
-nldd-rich-text > :last-child {
+nldd-rich-text > :last-child,
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :last-child {
 	margin-bottom: 0;
 }
 
@@ -161,7 +175,7 @@ nldd-rich-text *:focus:not(:focus-visible) {
 nldd-rich-text :is(h1, h2, h3, h4, h5, h6) {
 	margin-top: var(--_spacing);
 	margin-bottom: 0;
-	text-wrap: pretty;
+	text-wrap: balance;
 }
 
 
@@ -276,6 +290,7 @@ nldd-rich-text p {
 	   at narrow (mobile) widths. break-word (not anywhere) leaves the grid
 	   min-content size alone, so the main column stays intact. */
 	overflow-wrap: break-word;
+	text-wrap: pretty;
 }
 
 
@@ -305,7 +320,8 @@ nldd-rich-text ol {
 	list-style-type: decimal;
 }
 
-nldd-rich-text > :is(ul, ol) {
+nldd-rich-text > :is(ul, ol),
+nldd-rich-text > div:only-child:not([class], [style], [role], [data-width]) > :is(ul, ol) {
 	margin-block: calc(var(--_spacing) / -2);
 }
 
@@ -321,6 +337,7 @@ nldd-rich-text li {
 	padding: 0;
 	/* Zelfde vangnet als p: lange strings breken i.p.v. overlopen. */
 	overflow-wrap: break-word;
+	text-wrap: pretty;
 }
 
 nldd-rich-text li > * + * {
@@ -354,6 +371,7 @@ nldd-rich-text dt {
 
 nldd-rich-text dd {
 	margin-inline: 0;
+	text-wrap: pretty;
 
 	@container (min-width: 641px) {
 		grid-column: 2;
@@ -510,6 +528,7 @@ nldd-rich-text blockquote {
 	padding-inline: var(--semantics-blockquotes-md-spacing);
 	border-left: var(--semantics-blockquotes-border);
 	font: var(--semantics-blockquotes-md-quote-font);
+	text-wrap: pretty;
 
 	@container (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);

package/dist/css/variables.css

@@ -951,9 +951,9 @@
 	--semantics-surfaces-corner-radius: var(--primitives-corner-radius-lg);
 	--semantics-surfaces-ring-thickness: var(--primitives-border-width-regular);
 	--semantics-surfaces-base-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-100));
-	--semantics-surfaces-base-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+	--semantics-surfaces-base-border-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
 	--semantics-surfaces-tinted-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-75));
-	--semantics-surfaces-tinted-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+	--semantics-surfaces-tinted-border-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
 
 	/* ## Text */
 
@@ -1509,6 +1509,15 @@
 	--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
 	--semantics-buttons-neutral-transparent-is-active-content-color: var(--primitives-color-neutral-1000);
 	--semantics-buttons-neutral-transparent-is-active-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
+	--semantics-buttons-neutral-transparent-is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+	--semantics-buttons-neutral-transparent-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+	--semantics-buttons-neutral-transparent-is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+	--semantics-buttons-neutral-transparent-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+	--semantics-buttons-neutral-transparent-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+	--semantics-buttons-neutral-transparent-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+	--semantics-buttons-neutral-transparent-is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+	--semantics-buttons-neutral-transparent-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+	--semantics-buttons-neutral-transparent-is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
 
 	--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-buttons-accent-filled-content-color: var(--primitives-color-accent-0);
@@ -1542,6 +1551,15 @@
 	--semantics-buttons-accent-transparent-is-hovered-content-secondary-color: light-dark(var(--primitives-color-accent-550), var(--primitives-color-accent-650));
 	--semantics-buttons-accent-transparent-is-active-content-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--semantics-buttons-accent-transparent-is-active-content-secondary-color: light-dark(var(--primitives-color-accent-550), var(--primitives-color-accent-650));
+	--semantics-buttons-accent-transparent-is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+	--semantics-buttons-accent-transparent-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+	--semantics-buttons-accent-transparent-is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+	--semantics-buttons-accent-transparent-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+	--semantics-buttons-accent-transparent-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+	--semantics-buttons-accent-transparent-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+	--semantics-buttons-accent-transparent-is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+	--semantics-buttons-accent-transparent-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+	--semantics-buttons-accent-transparent-is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
 
 	--semantics-buttons-critical-tinted-background-color: light-dark(var(--primitives-color-critical-75), var(--primitives-color-critical-150));
 	--semantics-buttons-critical-tinted-content-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-700));
@@ -1587,51 +1605,13 @@
 	--semantics-buttons-inherit-tinted-content-color: currentColor;
 	--semantics-buttons-inherit-tinted-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-color);
 	--semantics-buttons-inherit-tinted-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
-	--semantics-buttons-inherit-tinted-is-hovered-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 25%, transparent);
-	--semantics-buttons-inherit-tinted-is-hovered-content-color: var(--semantics-buttons-inherit-tinted-content-color);
-	--semantics-buttons-inherit-tinted-is-hovered-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
-	--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
-	--semantics-buttons-inherit-tinted-is-active-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 30%, transparent);
-	--semantics-buttons-inherit-tinted-is-active-content-color: var(--semantics-buttons-inherit-tinted-content-color);
-	--semantics-buttons-inherit-tinted-is-active-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
-	--semantics-buttons-inherit-tinted-is-active-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
-	--semantics-buttons-inherit-tinted-is-expanded-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 30%, transparent);
-	--semantics-buttons-inherit-tinted-is-expanded-content-color: var(--semantics-buttons-inherit-tinted-content-color);
-	--semantics-buttons-inherit-tinted-is-expanded-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
-	--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
-	--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 35%, transparent);
-	--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color: var(--semantics-buttons-inherit-tinted-content-color);
-	--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
-	--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
-	--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 40%, transparent);
-	--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color: var(--semantics-buttons-inherit-tinted-content-color);
-	--semantics-buttons-inherit-tinted-is-expanded-is-active-content-secondary-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
-	--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
+	--semantics-buttons-inherit-tinted-divider-color: color-mix(in oklab, currentColor 35%, transparent);
 
 	--semantics-buttons-inherit-filled-background-color: currentColor;
 	--semantics-buttons-inherit-filled-content-color: var(--semantics-content-contrast-color);
 	--semantics-buttons-inherit-filled-content-secondary-color: currentColor;
 	--semantics-buttons-inherit-filled-highlight-border-color: currentColor;
-	--semantics-buttons-inherit-filled-is-hovered-background-color: color-mix(in oklab, currentColor 92%, transparent);
-	--semantics-buttons-inherit-filled-is-hovered-highlight-border-color: currentColor;
-	--semantics-buttons-inherit-filled-is-hovered-content-color: var(--semantics-buttons-inherit-filled-content-color);
-	--semantics-buttons-inherit-filled-is-hovered-content-secondary-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
-	--semantics-buttons-inherit-filled-is-active-background-color: color-mix(in oklab, currentColor 85%, transparent);
-	--semantics-buttons-inherit-filled-is-active-highlight-border-color: currentColor;
-	--semantics-buttons-inherit-filled-is-active-content-color: var(--semantics-buttons-inherit-filled-content-color);
-	--semantics-buttons-inherit-filled-is-active-content-secondary-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
-	--semantics-buttons-inherit-filled-is-expanded-background-color: color-mix(in oklab, currentColor 85%, transparent);
-	--semantics-buttons-inherit-filled-is-expanded-highlight-border-color: currentColor;
-	--semantics-buttons-inherit-filled-is-expanded-content-color: var(--semantics-buttons-inherit-filled-content-color);
-	--semantics-buttons-inherit-filled-is-expanded-content-secondary-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
-	--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color: color-mix(in oklab, currentColor 80%, transparent);
-	--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color: currentColor;
-	--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color: var(--semantics-buttons-inherit-filled-content-color);
-	--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-secondary-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
-	--semantics-buttons-inherit-filled-is-expanded-is-active-background-color: color-mix(in oklab, currentColor 75%, transparent);
-	--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color: currentColor;
-	--semantics-buttons-inherit-filled-is-expanded-is-active-content-color: var(--semantics-buttons-inherit-filled-content-color);
-	--semantics-buttons-inherit-filled-is-expanded-is-active-content-secondary-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
+	--semantics-buttons-inherit-filled-divider-color: color-mix(in oklab, var(--semantics-content-contrast-color) 25%, transparent);
 
 	/* ## Input fields */
 
@@ -1650,8 +1630,8 @@
 	--semantics-input-fields-is-autofill-content-color: light-dark(var(--primitives-color-mark-800), var(--primitives-color-mark-200));
 
 	--semantics-input-fields-xs-text-font: var(--primitives-font-body-xs-regular-flat);
-	/* Font for the invisible native <select>: Safari derives the option popup size from this,
-	   and iOS Safari auto-zooms inputs below 16px — so this must stay >= 16px. */
+	/* Font for an xs <select> on touch: iOS Safari auto-zooms inputs below 16px,
+	   so this must stay >= 16px. */
 	--semantics-input-fields-native-select-font: var(--primitives-font-body-sm-regular-snug);
 	--semantics-input-fields-sm-text-font: var(--primitives-font-body-sm-regular-flat);
 	--semantics-input-fields-sm-mask-font: 400 var(--primitives-font-size-90)/var(--primitives-line-height-flat) Verdana, system-ui;
@@ -1669,7 +1649,7 @@
 	--semantics-forms-label-column-width: var(--primitives-area-240);
 	--semantics-forms-columns-gap: var(--primitives-space-8);
 	--semantics-forms-section-title-font: var(--primitives-font-body-lg-bold-tight);
-	--semantics-forms-section-subtitle-font: var(--primitives-font-body-md-regular-tight);
+	--semantics-forms-section-supporting-text-font: var(--primitives-font-body-md-regular-tight);
 
 	/* ## Grab handles */
 
@@ -1773,6 +1753,14 @@
 	--components-card-highlight-border-width: var(--semantics-surfaces-border-width);
 	--components-card-highlight-border-color: var(--semantics-surfaces-base-border-color);
 	--components-card-tinted-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
+	--components-card-is-hovered-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-150));
+	--components-card-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-card-is-active-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
+	--components-card-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--components-card-tinted-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-100));
+	--components-card-tinted-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-card-tinted-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-150));
+	--components-card-tinted-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
 
 	/* ## Checkbox */
 
@@ -2096,17 +2084,6 @@
 	--components-timeline-track-cell-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--components-timeline-track-cell-future-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
 
-	/* ## Title */
-
-	--components-title-sm-overline-font: var(--primitives-font-body-sm-regular-tight);
-	--components-title-sm-subtitle-font: var(--primitives-font-body-md-regular-tight);
-
-	--components-title-md-overline-font: var(--primitives-font-body-sm-regular-tight);
-	--components-title-md-subtitle-font: var(--primitives-font-body-md-regular-tight);
-
-	--components-title-lg-overline-font: var(--primitives-font-body-md-regular-tight);
-	--components-title-lg-subtitle-font: var(--primitives-font-body-md-regular-tight);
-
 	/* ## Toggle button */
 
 	--components-toggle-button-group-xs-gap: var(--primitives-space-4);