@urbicon-ui/blocks 6.40.4 → 6.43.2

package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const journeyTimelineVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+    status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
     focused?: boolean | undefined;
     interactive?: boolean | undefined;
     travelled?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const journeyTimelineVariants: ((props?: {
     base: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const journeyTimelineVariants: ((props?: {
     rail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const journeyTimelineVariants: ((props?: {
     node: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -52,7 +52,7 @@ export declare const journeyTimelineVariants: ((props?: {
     metaColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -65,7 +65,7 @@ export declare const journeyTimelineVariants: ((props?: {
     meta: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -78,7 +78,7 @@ export declare const journeyTimelineVariants: ((props?: {
     markerColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -91,7 +91,7 @@ export declare const journeyTimelineVariants: ((props?: {
     marker: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -104,7 +104,7 @@ export declare const journeyTimelineVariants: ((props?: {
     connector: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -117,7 +117,7 @@ export declare const journeyTimelineVariants: ((props?: {
     content: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -130,7 +130,7 @@ export declare const journeyTimelineVariants: ((props?: {
     card: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -143,7 +143,7 @@ export declare const journeyTimelineVariants: ((props?: {
     header: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -156,7 +156,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trigger: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -169,7 +169,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trailing: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -182,7 +182,7 @@ export declare const journeyTimelineVariants: ((props?: {
     labelGroup: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -195,7 +195,7 @@ export declare const journeyTimelineVariants: ((props?: {
     title: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -208,7 +208,7 @@ export declare const journeyTimelineVariants: ((props?: {
     subtitle: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -221,7 +221,7 @@ export declare const journeyTimelineVariants: ((props?: {
     segment: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -234,7 +234,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -247,7 +247,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailInner: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -260,7 +260,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailContent: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -273,7 +273,7 @@ export declare const journeyTimelineVariants: ((props?: {
     panel: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;

package/dist/primitives/Menu/menu.variants.js

@@ -5,7 +5,11 @@ export const menuVariants = tv({
         trigger: ['w-full justify-between gap-3 min-w-36'],
         triggerText: ['flex flex-1 items-center text-left truncate'],
         chevron: [
-            'w-4 h-4 shrink-0 opacity-70 transition-[opacity,transform] duration-[var(--blocks-duration-fast)] ease-out'
+            // `rotate,translate`, NOT `transform`: Tailwind 4 emits `rotate-*` /
+            // `translate-*` as the discrete `rotate:` / `translate:` properties. The
+            // `chevronAnimation` axis drives exactly those two (rotate-0 ↔ rotate-180,
+            // translate-y-0 ↔ translate-y-1), so a `transform` entry animated neither.
+            'w-4 h-4 shrink-0 opacity-70 transition-[opacity,rotate,translate] duration-[var(--blocks-duration-fast)] ease-out'
         ],
         // Floating panel surface. Position is owned by the wrapping Popover
         // (Floating UI sets `top` / `left` on its container); this slot just

package/dist/primitives/Progress/progress.variants.js

@@ -6,8 +6,11 @@ export const progressVariants = tv({
         label: ['text-sm font-medium text-text-secondary'],
         valueText: ['text-sm tabular-nums text-text-tertiary'],
         // tier: commit — progress bar reads as a continuous status pill.
+        // Track fill is `surface-interactive` for the same reason as Slider's:
+        // `surface-subtle` equals `surface-elevated` in both modes, which made the
+        // track disappear on elevated surfaces (cards, popovers, dialogs).
         track: [
-            'relative w-full overflow-hidden rounded-commit bg-surface-subtle',
+            'relative w-full overflow-hidden rounded-commit bg-surface-interactive',
             'transition-[background-color] duration-[var(--blocks-duration-fast)] ease-out'
         ],
         fill: [
@@ -16,7 +19,7 @@ export const progressVariants = tv({
             'transition-[width,background-color] duration-[var(--blocks-duration-normal)] ease-out'
         ],
         circularWrapper: ['relative inline-flex items-center justify-center'],
-        circularTrack: ['stroke-current text-surface-subtle'],
+        circularTrack: ['stroke-current text-surface-interactive'],
         circularFill: [
             'stroke-current transition-[stroke-dashoffset] duration-[var(--blocks-duration-normal)] ease-out'
         ],

package/dist/primitives/RadioGroup/radioGroup.variants.js

@@ -39,13 +39,32 @@ export const radioItemVariants = tv({
         // a radio indicator declares status, conventionally circular.
         indicator: [
             'relative flex items-center justify-center shrink-0 border',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--blocks-duration-fast)] ease-out',
+            // Press feedback on the control surface — the same small-element press
+            // cue Checkbox took from Badge/Avatar (`scale-95`); `group-active` so
+            // pressing the label squeezes the indicator too. It sits on the
+            // indicator rather than the dot: the dot already owns the `scale`
+            // bucket for its own check-in animation (`scale-0` → `scale-100`), and
+            // scaling the parent carries the dot along multiplicatively instead of
+            // fighting that bucket — the whole control squeezes as one, exactly as
+            // Checkbox's box does with its check glyph. `scale` is in the
+            // transition list above, and reduced motion collapses
+            // `--blocks-duration-fast` to 1ms.
+            'group-active:scale-95',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50',
             'peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-base'
         ],
         dot: [
             'opacity-0 scale-0',
-            'transition-[opacity,transform] duration-[var(--blocks-duration-fast)] ease-out'
+            // `scale`, not `transform`: Tailwind 4 compiles `scale-*` to the
+            // discrete `scale` property (`scale: var(--tw-scale-x) …`), which a
+            // `transition-property: transform` does NOT cover — so the check-in
+            // used to pop to full size instantly while only the opacity faded.
+            // (The shorthand `transition-transform` would work, since v4 expands it
+            // to `transform, translate, scale, rotate`; the explicit list has to
+            // name the property it actually animates.) Both durations are tokens,
+            // so reduced motion collapses the whole check-in to 1ms.
+            'transition-[opacity,scale] duration-[var(--blocks-duration-fast)] ease-out'
         ],
         label: ['text-text-primary select-none leading-snug'],
         description: ['text-text-tertiary leading-snug']
@@ -66,7 +85,12 @@ export const radioItemVariants = tv({
                 indicator: 'w-3.5 h-3.5 mt-px',
                 dot: 'w-1.5 h-1.5',
                 label: 'text-xs',
-                description: 'text-3xs'
+                // `description` carries full sentences, so it stops at the body-copy
+                // floor (`text-xs`) instead of continuing the ladder down to `text-3xs`
+                // (10px) — 2xs/3xs are for marks, hints and dense grids, never for prose
+                // (see the tokens page). At this size the label/description hierarchy is
+                // carried by colour (text-primary vs text-tertiary) rather than size.
+                description: 'text-xs'
             },
             sm: {
                 item: 'gap-2',
@@ -139,41 +163,81 @@ export const radioItemVariants = tv({
             class: { indicator: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
         },
         // Checked intent colors
+        // Hover/active darken through the intent interaction-layer tokens — the
+        // same `bg-<intent>-hover` / `bg-<intent>-active` ladder Button and
+        // Checkbox use — via `group-*` so hovering/pressing the label counts too.
+        // The border stays on the base intent stop (as in Checkbox).
+        //
+        // The dot keeps ONE colour across all three stops: it is the intent's
+        // paired on-colour, and `style/contrast.test.ts` measures exactly that
+        // pairing (`--color-<intent>` / `-hover` / `-active` against
+        // `--color-text-on-primary` / `-on-warning`) across every theme × mode ×
+        // state — 126 combinations, all ≥ AA 4.5:1, and all ≥ the 3:1
+        // UI-component floor that actually binds a non-text mark. That includes
+        // the one adverse direction, `warning/light/active`, where the fill
+        // darkens *toward* the dark `text-on-warning`; warning-700 is pinned as
+        // the lowest press stop that still clears AA. So a state-dependent dot
+        // colour would buy nothing the token graph does not already guarantee.
         {
             checked: true,
             intent: 'primary',
-            class: { indicator: 'bg-primary border-primary', dot: 'bg-text-on-primary' }
+            class: {
+                indicator: 'bg-primary border-primary group-hover:bg-primary-hover group-active:bg-primary-active',
+                dot: 'bg-text-on-primary'
+            }
         },
         {
             checked: true,
             intent: 'secondary',
-            class: { indicator: 'bg-secondary border-secondary', dot: 'bg-text-on-primary' }
+            class: {
+                indicator: 'bg-secondary border-secondary group-hover:bg-secondary-hover group-active:bg-secondary-active',
+                dot: 'bg-text-on-primary'
+            }
         },
         {
             checked: true,
             intent: 'success',
-            class: { indicator: 'bg-success border-success', dot: 'bg-text-on-primary' }
+            class: {
+                indicator: 'bg-success border-success group-hover:bg-success-hover group-active:bg-success-active',
+                dot: 'bg-text-on-primary'
+            }
         },
         {
             checked: true,
             intent: 'warning',
-            class: { indicator: 'bg-warning border-warning', dot: 'bg-text-on-warning' }
+            class: {
+                indicator: 'bg-warning border-warning group-hover:bg-warning-hover group-active:bg-warning-active',
+                dot: 'bg-text-on-warning'
+            }
         },
         {
             checked: true,
             intent: 'danger',
-            class: { indicator: 'bg-danger border-danger', dot: 'bg-text-on-primary' }
+            class: {
+                indicator: 'bg-danger border-danger group-hover:bg-danger-hover group-active:bg-danger-active',
+                dot: 'bg-text-on-primary'
+            }
         },
         {
             checked: true,
             intent: 'neutral',
-            class: { indicator: 'bg-neutral border-neutral', dot: 'bg-text-on-primary' }
+            class: {
+                indicator: 'bg-neutral border-neutral group-hover:bg-neutral-hover group-active:bg-neutral-active',
+                dot: 'bg-text-on-primary'
+            }
         },
         // Error overrides unchecked border
+        // `group-hover:border-danger` pins the hover bucket too: the unchecked
+        // compounds above carry a `group-hover:border-*` step, and a plain
+        // `border-danger` does not fold it (modifier prefixes are part of the
+        // conflict bucket), so without this the error boundary went neutral the
+        // moment the pointer arrived — exactly when the mark matters.
         {
             error: true,
             checked: false,
-            class: { indicator: 'border-danger peer-focus-visible:ring-danger/40' }
+            class: {
+                indicator: 'border-danger group-hover:border-danger peer-focus-visible:ring-danger/40'
+            }
         }
     ],
     defaultVariants: {

package/dist/primitives/Select/select.variants.js

@@ -1,4 +1,7 @@
+import { FIELD_MESSAGE_TONES, fieldErrorFrame } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
+// The trigger is the focusable element, so the error ring lives on it directly.
+const focus = 'focus-visible';
 export const selectVariants = tv({
     slots: {
         wrapper: ['flex flex-col w-full gap-1.5'],
@@ -75,7 +78,7 @@ export const selectVariants = tv({
         variant: {
             outlined: { trigger: 'border-border-subtle' },
             filled: {
-                trigger: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
+                trigger: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-visible:bg-surface-base'
             },
             ghost: {
                 trigger: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
@@ -146,13 +149,19 @@ export const selectVariants = tv({
         // Declared BEFORE `error` so the error tone wins the message-color
         // bucket in every call shape — `{ error: true }` alone must read red.
         messageType: {
-            error: { message: 'text-danger' },
-            helper: { message: 'text-text-tertiary' }
+            error: { message: FIELD_MESSAGE_TONES.error },
+            helper: { message: FIELD_MESSAGE_TONES.helper }
         },
+        // Same error frame as every other field (shared fragment, so a token fix
+        // can't miss Select again). Unlike Input/Textarea/PinInput/TimeInput,
+        // Select has no `intent` axis, so nothing competes for the border/ring
+        // buckets and the frame can stay on the axis. If an `intent` axis is ever
+        // added here, move this to the compound stage — see the precedence note in
+        // input.variants.ts.
         error: {
             true: {
-                trigger: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
-                message: 'text-danger'
+                trigger: fieldErrorFrame(focus),
+                message: FIELD_MESSAGE_TONES.error
             }
         },
         required: {

package/dist/primitives/Slider/Slider.svelte

@@ -160,7 +160,7 @@
       if (status === 'insideValidOnly') return 'var(--color-warning-subtle)';
       if (status === 'outsideValidDanger') return 'var(--color-danger-subtle)';
       if (status === 'outsideValidWarning') return 'var(--color-warning-subtle)';
-      return 'var(--color-surface-subtle)';
+      return 'var(--color-surface-interactive)';
     };
 
     const points = [min, ...zoneBoundaries, max];
@@ -460,6 +460,7 @@
             ? `${label} minimum`
             : bt('accessibility.minimum') || 'Minimum'}
         aria-describedby={describedBy}
+        aria-invalid={error ? 'true' : undefined}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
         style="left: {thumbStartPosition}%"
@@ -479,6 +480,7 @@
             ? `${label} maximum`
             : bt('accessibility.maximum') || 'Maximum'}
         aria-describedby={describedBy}
+        aria-invalid={error ? 'true' : undefined}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
         style="left: {thumbEndPosition}%"
@@ -495,6 +497,7 @@
         aria-labelledby={ariaLabelledby}
         aria-label={ariaLabelledby ? undefined : label || bt('accessibility.slider') || 'Slider'}
         aria-describedby={describedBy}
+        aria-invalid={error ? 'true' : undefined}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
         style="left: {thumbPosition}%"

package/dist/primitives/Slider/slider.variants.js

@@ -7,8 +7,11 @@ export const sliderVariants = tv({
         valueText: ['text-sm tabular-nums text-text-tertiary'],
         base: ['relative flex items-center w-full touch-none select-none cursor-pointer'],
         // tier: commit — slider is a continuous-value pill (track + range + thumb).
+        // Track fill is `surface-interactive`, matching Toggle's unchecked track:
+        // `surface-subtle` resolves to the SAME neutral step as `surface-elevated`
+        // in both modes, so the groove vanished on any elevated card/popover.
         track: [
-            'relative w-full overflow-hidden rounded-commit bg-surface-subtle',
+            'relative w-full overflow-hidden rounded-commit bg-surface-interactive',
             'transition-[background-color] duration-[var(--blocks-duration-fast)]'
         ],
         range: [
@@ -20,7 +23,11 @@ export const sliderVariants = tv({
             'absolute rounded-commit bg-surface-base border-2',
             'shadow-[var(--blocks-shadow-sm)]',
             '-translate-x-1/2 -translate-y-1/2 top-1/2',
-            'transition-[box-shadow,transform] duration-[var(--blocks-duration-fast)]',
+            // `scale`, NOT `transform`: Tailwind 4 emits `scale-*` as the discrete
+            // `scale:` property — `hover:scale-110` is the only animated transform
+            // here, so it is the only one listed. The centring `-translate-*` above
+            // is static (the thumb travels via `left`), so `translate` stays out.
+            'transition-[box-shadow,scale] duration-[var(--blocks-duration-fast)]',
             'hover:scale-110 hover:shadow-[var(--blocks-shadow-md)]',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
         ],