@urbicon-ui/blocks 6.40.4 → 6.43.2

package/dist/primitives/Alert/alert.variants.d.ts

@@ -1,53 +1,53 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const alertVariants: ((props?: {
-    intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+    intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
     variant?: "inline" | "filled" | "soft" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     icon: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     content: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     title: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     description: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     actions: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     dismissButton: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {

package/dist/primitives/Avatar/avatar.variants.js

@@ -7,7 +7,10 @@ export const avatarVariants = tv({
         // the ring follows the avatar's shape.
         base: [
             'relative inline-flex shrink-0',
-            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)] ease-out'
+            // `scale` is listed because the `interactive` axis adds
+            // `hover:scale-105 active:scale-95` — Tailwind 4 emits those as the
+            // discrete `scale:` property, which nothing else in this list covers.
+            'transition-[color,background-color,border-color,box-shadow,opacity,scale] duration-[var(--blocks-duration-fast)] ease-out'
         ],
         // The visible disc. This is the element that clips the image/initials to
         // the avatar shape; the status dot lives outside it so it stays whole.

package/dist/primitives/Badge/badge.variants.js

@@ -15,7 +15,13 @@ export const badgeVariants = tv({
         base: [
             'relative inline-flex items-center justify-center',
             'font-medium text-center whitespace-nowrap border select-none',
-            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)] ease-out'
+            // `scale` is listed because the `interactive` axis adds
+            // `hover:scale-105 active:scale-95` — Tailwind 4 emits those as the
+            // discrete `scale:` property, which nothing else in this list covers.
+            // `translate` is deliberately NOT listed: the `placement` axis uses
+            // translate as layout, not motion (see the exemption in
+            // scripts/variants-lint.ts).
+            'transition-[color,background-color,border-color,box-shadow,opacity,scale] duration-[var(--blocks-duration-fast)] ease-out'
             // Radius driven by `tier` axis below.
         ],
         // `[gap:inherit]` (arbitrary property), NOT `gap-inherit` — Tailwind v4 emits
@@ -40,7 +46,10 @@ export const badgeVariants = tv({
             'hover:shadow-[var(--blocks-shadow-md)] active:scale-[0.98] active:shadow-[var(--blocks-shadow-sm)]',
             'h-6 px-2 text-xs gap-1 focus-visible:ring-offset-2',
             // remove-control overrides (won the fold over the ghost base)
-            'ml-1 shrink-0 rounded-modify transition-colors text-current',
+            // `scale` is named because the interactive compound adds `active:scale-[0.98]`:
+            // Tailwind emits that as the discrete `scale` property, which `transition-colors`
+            // does not cover — the press cue would snap. Same fold as Dialog/Drawer's closeButton.
+            'ml-1 shrink-0 rounded-modify transition-[color,background-color,scale] text-current',
             'hover:bg-neutral-950/10 focus-visible:ring-1 focus-visible:ring-current'
         ],
         removeIcon: ['w-3 h-3']

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: {
@@ -11,11 +12,24 @@ export const comboboxVariants = tv({
             // `variant` axis (default `outlined` keeps the historical look).
             'w-full border bg-surface-base text-text-primary placeholder:text-text-tertiary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary',
+            // `/20` matches `fieldFocusRing` in internal/field-chrome.ts, which Input,
+            // Textarea, Select, PinInput and TimeInput all use. At `/50` this field was
+            // the odd one out in both directions: a stronger valid ring than every
+            // sibling, and — once it gained the shared error frame (ring-danger/20) —
+            // an invalid state weaker than its own valid one. The icon-button slots
+            // below keep `/50`: they are small targets, not field frames.
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 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
@@ -84,7 +98,8 @@ export const comboboxVariants = tv({
         control: [
             'flex w-full flex-wrap items-center border bg-surface-base cursor-text',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/50 focus-within:border-primary'
+            // `/20` — same reason as the `input` slot above.
+            'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary'
         ],
         // Borderless search input inside `control`; the frame owns the border/ring.
         search: [
@@ -127,8 +142,8 @@ export const comboboxVariants = tv({
                 control: 'border-border-subtle hover:border-border-default'
             },
             filled: {
-                input: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base',
-                control: 'bg-surface-interactive border-transparent focus-within:bg-surface-base'
+                input: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-visible:bg-surface-base',
+                control: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-within:bg-surface-base'
             },
             ghost: {
                 input: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle',
@@ -204,6 +219,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 +246,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.