@nldd/design-system 0.8.93 → 0.8.95

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

@@ -11,9 +11,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * number (or a check mark on what is done), a label under each and a line
  * connecting them.
  *
- * The parent holds the truth: `current` (1-based) derives the status of every
- * child — `past` before it, `future` after. A child can override that with a
- * `status` of its own, for flows that jump back or skip a step.
+ * Mark the step you are on with `status="current"`. The parent derives the
+ * rest from its position: `past` before it, `future` after. With none marked,
+ * step 1 is current. With more than one, the last one wins and a warning goes
+ * to the console in a dev build: a flow that forgets to clear the previous
+ * step still points at the furthest one. A `status="past"` or
+ * `status="future"` on another step overrides what is derived for that step,
+ * for flows that jump back or skip a step. One attribute, the same three
+ * values as `nldd-timeline-track-cell`, so a flow reads in one vocabulary
+ * whether it runs across or down.
  *
  * Horizontal only. For steps under each other, build an `nldd-list` with an
  * `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps
@@ -33,18 +39,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * @attr {string} accessible-label - Name of the nav; defaults to the i18n value ("Voortgang")
  * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
- * @attr {number} current - 1-based number of the current step (default 1)
  *
  * @slot - `nldd-step-indicator-item` children
  *
  * @example
  * ```html
- * <nldd-step-indicator
- * 	current="2"
- * 	accessible-label="Voortgang aanvraag"
- * >
+ * <nldd-step-indicator accessible-label="Voortgang aanvraag">
  *   <nldd-step-indicator-item text="Gegevens"></nldd-step-indicator-item>
- *   <nldd-step-indicator-item text="Controle"></nldd-step-indicator-item>
+ *   <nldd-step-indicator-item text="Controle" status="current"></nldd-step-indicator-item>
  *   <nldd-step-indicator-item text="Bevestigen"></nldd-step-indicator-item>
  * </nldd-step-indicator>
  * ```
@@ -59,16 +61,17 @@ import { stepIndicatorTemplate, stepIndicatorItemTemplate } from './step-indicat
 import '../../content/icon/icon.js';
 // # nldd-step-indicator-item
 /**
- * One step in an `nldd-step-indicator`. The parent decides the status and the
- * number; those live here as internal state rather than as public API, except
- * for `status`, which overrides what `current` derives.
+ * One step in an `nldd-step-indicator`. `status="current"` marks the step you
+ * are on; the parent derives the status of the others and the number of each,
+ * which live here as internal state rather than as public API. `past` and
+ * `future` override what is derived for this step.
  *
  * @element nldd-step-indicator-item
  *
- * @attr {string} status - `past` | `current` | `future`; overrides what the parent derives
- * @attr {string} text   - Label under the disc
- * @attr {string} icon   - Icon in the disc instead of the number or the check mark
- * @attr {string} href   - Makes the step a link (back to a completed step, for instance)
+ * @attr {'past' | 'current' | 'future'} status - How far along this step is. `current` marks the step you are on (`aria-current="step"`) and the parent derives the others from it: with none marked step 1 is current, with more than one the last wins. `past` and `future` override what is derived for this step only
+ * @attr {string} text - Label under the disc
+ * @attr {string} icon - Icon in the disc instead of the number or the check mark
+ * @attr {string} href - Makes the step a link (back to a completed step, for instance)
  * @attr {boolean} button - Makes the step a button, for flows without a URL per step; ignored when `href` is set
  *
  * @slot - Label (an alternative to `text`)
@@ -89,9 +92,12 @@ export class NLDDStepIndicatorItem extends LitElement {
         this._index = 1;
         this._statusText = '';
     }
-    /** The status that counts: the item's own wins over the derived one. */
+    /** The status that counts. An own `past` or `future` wins over the derived
+     *  one. An own `current` is what the parent derives from, so the derived
+     *  status already says it, and on a step that lost to a later one it does not
+     *  hold. */
     get resolvedStatus() {
-        return this.status ?? this._derivedStatus;
+        return this.status && this.status !== 'current' ? this.status : this._derivedStatus;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -149,10 +155,13 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
     constructor() {
         super(...arguments);
         this.accessibleLabel = '';
-        this.current = 1;
         /** The steps, tracked so the compact view (text + bar) is driven by the same
          *  source as the row of markers. */
         this._items = [];
+        /** `status` lives on the children, so a change there has to reach this
+         *  element: the derived statuses and the compact view follow it. */
+        this._observer = new MutationObserver(() => this.requestUpdate());
+        this._warnedMultipleCurrent = false;
         this._onSlotChange = (e) => {
             const slot = e.target;
             this._items = slot.assignedElements({ flatten: true })
@@ -162,17 +171,35 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
     get total() {
         return this._items.length;
     }
-    /** The current step, clamped to the number of steps: an out-of-range
-     *  `current` would otherwise mark every step past (or none at all). */
+    /** 1-based position of the last item with `status="current"`, or 1 when none has it. */
     get resolvedCurrent() {
-        if (this.total === 0)
-            return this.current;
-        return Math.min(Math.max(this.current, 1), this.total);
+        const index = this._items.map(item => item.status).lastIndexOf('current');
+        return index === -1 ? 1 : index + 1;
     }
     get currentItem() {
         return this._items.find(item => item.resolvedStatus === 'current')
             ?? this._items[this.resolvedCurrent - 1];
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._observer.observe(this, { subtree: true, attributes: true, attributeFilter: ['status'] });
+    }
+    /** `current` is no longer an attribute of this element. Watched anyway, so a
+     *  leftover one gets a hint, also when a framework sets it after the first
+     *  render: Vue and React fall back to the attribute for an unknown property. */
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'current'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (import.meta.env?.DEV && name === 'current' && value !== null) {
+            console.warn('<nldd-step-indicator>: `current` moved to the step. Set `status="current"` on the current `nldd-step-indicator-item` instead.');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._observer.disconnect();
+    }
     /** Before render, not after: the compact view reads the current item back out
      *  of the children, so their statuses have to be fresh by the time this
      *  element renders. */
@@ -180,12 +207,20 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
         // withTranslations merges a consumer's `translations` override in its own
         // willUpdate; without this call the override is silently ignored.
         super.willUpdate(changed);
-        if (changed.has('current') || changed.has('_items'))
-            this._syncItems();
+        this._syncItems();
+        this._warnOnMultipleCurrent();
+    }
+    _warnOnMultipleCurrent() {
+        if (!import.meta.env?.DEV)
+            return;
+        const multiple = this._items.filter(item => item.status === 'current').length > 1;
+        if (multiple && !this._warnedMultipleCurrent) {
+            console.warn('<nldd-step-indicator>: more than one step has `status="current"`; the last one wins. Mark only the step you are on.');
+        }
+        this._warnedMultipleCurrent = multiple;
     }
     /** Push position, derived status and status text down to the children. Push
-     *  rather than pull: a child reading its own parent has no way of knowing
-     *  when `current` changes. */
+     *  rather than pull: a child cannot see where the current step sits. */
     _syncItems() {
         const current = this.resolvedCurrent;
         this._items.forEach((item, index) => {
@@ -203,9 +238,6 @@ NLDDStepIndicator.styles = stepIndicatorStyles;
 __decorate([
     property({ type: String, attribute: 'accessible-label' })
 ], NLDDStepIndicator.prototype, "accessibleLabel", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], NLDDStepIndicator.prototype, "current", void 0);
 __decorate([
     state()
 ], NLDDStepIndicator.prototype, "_items", void 0);

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/{visibility-mixin-BU1vIMW7.js → visibility-mixin-Crbt8PFP.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
+import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { css, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";

package/dist/components/with-translations-C8_0-9y8.js

@@ -0,0 +1,97 @@
+import { t as __decorate } from "./decorate-CO88j7Lc.js";
+import { property } from "lit/decorators.js";
+//#region src/utilities/link-rel.ts
+/**
+* The `rel` of a link that may open in a new tab.
+*
+* A link with `target="_blank"` gets `noopener noreferrer`: the page it opens
+* gets no handle on this one through `window.opener`, and no referrer. A `rel`
+* the consumer sets is added to, never replaced. `rel="external"` on a `_blank`
+* link describes the link, and it is no reason to leave that door open.
+*
+* Returns an empty string when there is nothing to write, so a template can
+* leave the attribute off with `|| nothing`.
+*/
+function linkRel(rel, target) {
+	const base = rel ?? "";
+	if (target !== "_blank") return base.trim();
+	const parts = new Set(base.split(/\s+/).filter(Boolean));
+	parts.add("noopener");
+	parts.add("noreferrer");
+	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.
+*
+* Provides a `translations` property for overriding defaults,
+* a merged translations object, and a `_t()` method for lookups.
+*
+* @example
+* ```ts
+* import { withTranslations } from '../../../utilities/with-translations.js';
+* import { myDefaults } from './my-component.i18n.js';
+* import type { MyTranslations } from './my-component.i18n.js';
+*
+* class MyComponent extends withTranslations<MyTranslations>(LitElement, myDefaults) {
+*   render() {
+*     return html`${this._t('my-key')}`;
+*   }
+* }
+* ```
+*/
+function withTranslations(Base, defaults) {
+	class TranslationsMixin extends Base {
+		constructor(..._args) {
+			super(..._args);
+			this.translations = {};
+		}
+		/** @internal */
+		_t(key, vars) {
+			return translate(this.translations, defaults, key, vars);
+		}
+	}
+	__decorate([property({ type: Object })], TranslationsMixin.prototype, "translations", void 0);
+	return TranslationsMixin;
+}
+//#endregion
+export { linkRel as i, setTranslations as n, translate as r, withTranslations as t };

package/dist/css/document-reset.css

@@ -1,4 +1,11 @@
 @layer reset {
+	/* iOS Safari inflates small text in landscape while this is auto. On the
+	   root it covers the whole page, light DOM and shadow roots alike. */
+	html {
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
+	}
+
 	html:has(nldd-app-view),
 	html:has(nldd-app-view) body {
 		margin: 0;

package/dist/css/rich-text.css

@@ -28,8 +28,6 @@ nldd-rich-text {
 	row-gap: var(--_spacing);
 	color: var(--semantics-content-color);
 	font: var(--primitives-font-body-md-regular-snug);
-	-webkit-text-size-adjust: 100%;
-	text-size-adjust: 100%;
 }
 
 nldd-rich-text[centered] {
@@ -175,7 +173,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;
 }
 
 
@@ -290,6 +288,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;
 }
 
 
@@ -336,6 +335,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 > * + * {
@@ -369,6 +369,7 @@ nldd-rich-text dt {
 
 nldd-rich-text dd {
 	margin-inline: 0;
+	text-wrap: pretty;
 
 	@container (min-width: 641px) {
 		grid-column: 2;
@@ -525,6 +526,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

@@ -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;
@@ -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 */