@urbicon-ui/blocks 6.40.4 → 6.43.0

package/dist/primitives/Button/button.variants.js

@@ -4,7 +4,10 @@ export const buttonVariants = tv({
         base: [
             'relative inline-flex items-center justify-center gap-2',
             'font-medium text-center whitespace-nowrap border cursor-pointer select-none',
-            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out overflow-hidden',
+            // `scale`, NOT `transform`: Tailwind 4 emits `scale-*` as the discrete
+            // CSS `scale:` property, so a list naming only `transform` never animates
+            // the press cue (`active:scale-[0.98]` / `pressed`) — it would jump.
+            'transition-[color,background-color,border-color,box-shadow,opacity,scale] duration-[var(--blocks-duration-fast)] ease-out overflow-hidden',
             // Radius is driven by the `tier` variant axis below — see `tier`.
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
             'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'

package/dist/primitives/Card/card.variants.js

@@ -2,7 +2,10 @@ import { tv } from '../../utils/variants.js';
 export const cardVariants = tv({
     slots: {
         base: [
-            'relative block w-full transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out box-border',
+            // `translate`, NOT `transform`: Tailwind 4 emits `-translate-y-*` as the
+            // discrete CSS `translate:` property, so a list naming only `transform`
+            // never animates the `interactive` hover lift — it would jump.
+            'relative block w-full transition-[color,background-color,border-color,box-shadow,opacity,translate] duration-[var(--blocks-duration-fast)] ease-out box-border',
             // Structure radius — cards are architectural surfaces, not human/CTA.
             'rounded-contain'
         ],

package/dist/primitives/Checkbox/checkbox.variants.js

@@ -207,11 +207,17 @@ export const checkboxVariants = tv({
             }
         },
         // ── Error overrides unchecked border ──
+        // `group-hover:border-danger` is not redundant: modifier prefixes are part of
+        // the conflict bucket, so the plain `border-danger` never folds the unchecked
+        // variants' `group-hover:border-border-emphasis` above — without the pin, an
+        // errored checkbox loses its danger boundary the moment it is hovered.
         {
             error: true,
             checked: false,
             indeterminate: false,
-            class: { box: 'border-danger peer-focus-visible:ring-danger/40' }
+            class: {
+                box: 'border-danger group-hover:border-danger peer-focus-visible:ring-danger/40'
+            }
         }
     ],
     defaultVariants: {

package/dist/primitives/Combobox/Combobox.svelte

@@ -307,12 +307,20 @@
     };
   });
 
+  // `error` is the same signal that drives `aria-invalid` (`ff.invalid`), so
+  // the visible frame and the announced state can never disagree. It also
+  // reaches `resolveSlotClasses`, so a consumer `overrides` entry can target
+  // the invalid state.
   const variantProps: ComboboxVariants = $derived({
     variant,
     tier: effectiveTier,
     size,
     open,
-    disabled
+    disabled,
+    // `|| undefined` rather than a plain `false`, matching Input: these props
+    // are also matched against `BlocksProvider` `overrides`, where an entry
+    // keyed `{ error: false }` must not fire on a valid field.
+    error: ff.invalid || undefined
   });
   const styles = $derived(comboboxVariants(variantProps));
 

package/dist/primitives/Combobox/combobox.variants.d.ts

@@ -5,6 +5,7 @@ export declare const comboboxVariants: ((props?: {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     open?: boolean | undefined;
     disabled?: boolean | undefined;
+    error?: boolean | undefined;
 } | undefined) => {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -12,6 +13,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -21,6 +23,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -30,6 +33,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -39,6 +43,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -48,6 +53,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -57,6 +63,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -66,6 +73,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -75,6 +83,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -84,6 +93,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -93,6 +103,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -102,6 +113,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -111,6 +123,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -120,6 +133,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -129,6 +143,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -138,6 +153,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -147,6 +163,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -156,6 +173,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -165,6 +183,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -174,6 +193,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -183,6 +203,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -192,6 +213,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -201,6 +223,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -210,6 +233,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;
@@ -219,6 +243,7 @@ export declare const comboboxVariants: ((props?: {
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | 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;
     }) | undefined) => string;

package/dist/primitives/Combobox/combobox.variants.js

@@ -1,3 +1,4 @@
+import { FIELD_MESSAGE_TONES, fieldErrorFrame } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
 export const comboboxVariants = tv({
     slots: {
@@ -14,8 +15,15 @@ export const comboboxVariants = tv({
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary',
             'disabled:opacity-50 disabled:cursor-not-allowed'
         ],
-        message: 'text-xs text-danger',
-        helper: 'text-xs text-text-tertiary',
+        // Message tone follows the ROLE of the text, not the field state: the
+        // `message` slot only ever renders the `error` string (the markup picks it
+        // over `helper`, they are mutually exclusive), so the two slots carry the
+        // two shared field-message tones — a helper never reads red. Sibling
+        // fields express the same thing through a `messageType` axis because they
+        // render both roles through ONE `message` slot; here the slot split
+        // already encodes it.
+        message: ['text-xs', FIELD_MESSAGE_TONES.error],
+        helper: ['text-xs', FIELD_MESSAGE_TONES.helper],
         // `position`, `width`, `overflow-y` are set inline in Combobox.svelte
         // so the native `popover="manual"` top-layer rendering works
         // correctly and the UA's `overflow: auto` doesn't render a duplicate
@@ -204,6 +212,26 @@ export const comboboxVariants = tv({
         },
         disabled: {
             true: { base: 'opacity-50 pointer-events-none' }
+        },
+        // Validation frame, at parity with every other field — the SHARED fragment
+        // (`fieldErrorFrame`), not a hand-copied one, so the next token fix cannot
+        // miss Combobox the way it missed it before this axis existed (until then
+        // an invalid Combobox only announced itself via `aria-invalid`, with no
+        // visible frame at all).
+        //
+        // Both frames are painted because the visible frame moves between modes:
+        // single mode wears it on the `input`, multi mode on the tokenizer
+        // `control` — which lights via `focus-within`, since focus lives on the
+        // borderless search input inside it. Declared LAST so it wins the
+        // border/ring buckets against `variant`; Combobox has no `intent` axis (a
+        // deliberate non-goal for now), so nothing else competes. If one is ever
+        // added, move this frame to the compound stage — see the precedence note
+        // in input.variants.ts.
+        error: {
+            true: {
+                input: fieldErrorFrame('focus-visible'),
+                control: fieldErrorFrame('focus-within')
+            }
         }
     },
     defaultVariants: {
@@ -211,6 +239,7 @@ export const comboboxVariants = tv({
         variant: 'outlined',
         size: 'md',
         open: false,
-        disabled: false
+        disabled: false,
+        error: false
     }
 });

package/dist/primitives/Combobox/index.d.ts

@@ -20,7 +20,7 @@ export interface ComboboxGroup<T extends SelectValue = string> {
  * live on {@link ComboboxSingleProps} / {@link ComboboxMultipleProps} and narrow
  * against `multiple`.
  */
-interface ComboboxBaseProps<T extends SelectValue = string> extends ComboboxVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+interface ComboboxBaseProps<T extends SelectValue = string> extends Omit<ComboboxVariants, 'error'>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Array of selectable options. Each needs a unique `value`. */
     options?: ComboboxOption<T>[];
     /**
@@ -38,7 +38,13 @@ interface ComboboxBaseProps<T extends SelectValue = string> extends ComboboxVari
     label?: string;
     /** Helper text shown below the field. Hidden when an error is set. */
     helper?: string;
-    /** Error message — replaces helper text and flags the field as invalid. */
+    /**
+     * Error message — replaces helper text, flags the field as invalid
+     * (`aria-invalid`) and paints the shared danger frame on the input (single
+     * mode) or the tokenizer control (multi). The string prop shadows the boolean
+     * `error` variant axis, which the component derives from it (mirrors Input /
+     * Select) — that is what the `Omit` above is for.
+     */
     error?: string;
     /**
      * Marks the field as required. Adds the asterisk on the label. @default false

package/dist/primitives/Dialog/dialog.variants.js

@@ -37,7 +37,10 @@ export const dialogVariants = tv({
         // internal/core/.
         closeButton: [
             'relative font-medium text-center whitespace-nowrap border overflow-hidden',
-            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out',
+            // `scale`, NOT `transform` — mirrors buttonVariants.base: Tailwind 4 emits
+            // `scale-*` as the discrete `scale:` property, so `active:scale-[0.98]`
+            // below only animates if the list names `scale`.
+            'transition-[color,background-color,border-color,box-shadow,opacity,scale] duration-[var(--blocks-duration-fast)] ease-out',
             'rounded-commit bg-transparent border-transparent shadow-none',
             'hover:shadow-[var(--blocks-shadow-md)] active:scale-[0.98] active:shadow-[var(--blocks-shadow-sm)]',
             'h-8 px-3 text-sm gap-1.5 text-neutral-emphasis hover:bg-neutral-subtle',

package/dist/primitives/Drawer/drawer.variants.js

@@ -29,7 +29,10 @@ export const drawerVariants = tv({
         // See internal/core/.
         closeButton: [
             'relative font-medium text-center whitespace-nowrap border overflow-hidden',
-            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out',
+            // `scale`, NOT `transform` — mirrors buttonVariants.base: Tailwind 4 emits
+            // `scale-*` as the discrete `scale:` property, so `active:scale-[0.98]`
+            // below only animates if the list names `scale`.
+            'transition-[color,background-color,border-color,box-shadow,opacity,scale] duration-[var(--blocks-duration-fast)] ease-out',
             'rounded-commit bg-transparent border-transparent shadow-none',
             'hover:shadow-[var(--blocks-shadow-md)] active:scale-[0.98] active:shadow-[var(--blocks-shadow-sm)]',
             'h-8 px-3 text-sm gap-1.5 text-neutral-emphasis hover:bg-neutral-subtle',

package/dist/primitives/Input/input.variants.js

@@ -125,9 +125,11 @@ export const inputVariants = tv({
             error: { message: FIELD_MESSAGE_TONES.error },
             helper: { message: FIELD_MESSAGE_TONES.helper }
         },
+        // 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: fieldErrorFrame(focus),
                 message: FIELD_MESSAGE_TONES.error
             }
         },
@@ -144,6 +146,20 @@ export const inputVariants = 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.
+        // Previously the winner was decided purely by `error` happening to be
+        // DECLARED after `intent` — reordering the axes (or slipping a new one
+        // between them) would have silently turned validation feedback back into a
+        // green/amber frame. `intent` keeps its tonal job for the non-error states.
+        {
+            error: true,
+            class: { base: fieldErrorFrame(focus) }
+        },
         // Ghost keeps a transparent border in its resting state — even when an
         // intent would otherwise colour it. The error state intentionally drops
         // this override so validation feedback (`border-danger`) stays visible.

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']
@@ -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: {