@urbicon-ui/blocks 6.40.3 → 6.43.0

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']
@@ -139,41 +158,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'],
@@ -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'
         ],

package/dist/primitives/Spinner/spinner.variants.d.ts

@@ -2,13 +2,13 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const spinnerVariants: ((props?: {
     variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
     speed?: "fast" | "slow" | "normal" | undefined;
 } | undefined) => {
     base: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -16,7 +16,7 @@ export declare const spinnerVariants: ((props?: {
     svg: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -24,7 +24,7 @@ export declare const spinnerVariants: ((props?: {
     svgCircle: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -32,7 +32,7 @@ export declare const spinnerVariants: ((props?: {
     svgPath: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -40,7 +40,7 @@ export declare const spinnerVariants: ((props?: {
     dots: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -48,7 +48,7 @@ export declare const spinnerVariants: ((props?: {
     dot: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -56,7 +56,7 @@ export declare const spinnerVariants: ((props?: {
     pulse: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -64,7 +64,7 @@ export declare const spinnerVariants: ((props?: {
     pulseCenter: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -72,7 +72,7 @@ export declare const spinnerVariants: ((props?: {
     pulseRing: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -80,7 +80,7 @@ export declare const spinnerVariants: ((props?: {
     ring: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -88,7 +88,7 @@ export declare const spinnerVariants: ((props?: {
     ringElement: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -96,7 +96,7 @@ export declare const spinnerVariants: ((props?: {
     bars: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -104,7 +104,7 @@ export declare const spinnerVariants: ((props?: {
     bar: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -112,7 +112,7 @@ export declare const spinnerVariants: ((props?: {
     content: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -120,7 +120,7 @@ export declare const spinnerVariants: ((props?: {
     srOnly: (props?: ({
         variant?: "pulse" | "ring" | "default" | "bars" | "dots" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Stepper/stepper.variants.d.ts

@@ -4,7 +4,7 @@ export declare const stepperVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "default" | "outlined" | "minimal" | undefined;
-    stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+    stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
     clickable?: boolean | undefined;
     stepDisabled?: boolean | undefined;
     separatorComplete?: boolean | undefined;
@@ -14,7 +14,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -38,7 +38,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -50,7 +50,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -62,7 +62,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -74,7 +74,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -86,7 +86,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -98,7 +98,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -110,7 +110,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -122,7 +122,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "complete" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;

package/dist/primitives/Textarea/textarea.variants.js

@@ -1,3 +1,4 @@
+import { fieldErrorFrame } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
 export const textareaVariants = tv({
     slots: {
@@ -83,9 +84,11 @@ export const textareaVariants = tv({
             error: { message: 'text-danger' },
             helper: { message: 'text-text-tertiary' }
         },
+        // The error FRAME is not declared here — it lives in the compound stage
+        // below, where it beats `intent` by construction. See the precedence note
+        // on the first compound entry.
         error: {
             true: {
-                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
                 message: 'text-danger'
             }
         },
@@ -101,6 +104,17 @@ export const textareaVariants = tv({
         }
     },
     compoundVariants: [
+        // ── Validation precedence: `error` beats `intent`, explicitly ────────────
+        // Both axes paint the SAME three buckets (border-color plus the focused
+        // border/ring tint), so exactly one of them can win. Emitting the error
+        // frame here rather than on the `error` axis makes that rule structural:
+        // compounds always fold after every axis, so `error: true` overrides
+        // whatever `intent` painted regardless of how the axes are ordered above
+        // (it used to hinge purely on `error` being DECLARED after `intent`).
+        {
+            error: true,
+            class: { base: fieldErrorFrame('focus-visible') }
+        },
         {
             variant: 'ghost',
             intent: ['success', 'warning', 'danger'],

package/dist/primitives/Toast/Toaster.svelte

@@ -226,16 +226,13 @@
           Deliberate a11y delta: the old embedded Spinner emitted role="status" +
           aria-live + an sr-only "Loading..." label — a live region NESTED inside
           the toast's own role="alert" region. The core emits no semantics; the
-          toast region owns the announcement. `text-primary` pins the old look:
-          the public Spinner's intent DEFAULTED to primary, so the loading glyph
-          always rendered primary regardless of the toast intent (whether it
-          should follow the intent instead is logged in technical-debt.md). It
-          wins the color duel against the core's `text-current` by stylesheet
-          order (theme color utilities sort after keyword colors).
+          toast region owns the announcement. The spinner follows the toast intent
+          like every other status glyph: with no explicit colour it inherits
+          `text-current` from the intent-coloured `slot('icon', intent)` span
+          (success → text-success, neutral → text-text-secondary, …), so a
+          success/danger loading toast no longer shows a brand-primary spinner.
         -->
-        <span class={slot('icon', toast.intent)}
-          ><CoreSpinner size="sm" class="text-primary" /></span
-        >
+        <span class={slot('icon', toast.intent)}><CoreSpinner size="sm" /></span>
       {:else}
         <IntentIcon class={slot('icon', toast.intent)} />
       {/if}