@urbicon-ui/blocks 6.40.3 → 6.43.0

package/dist/components/Chat/A2UIView/urbicon/a2ui-urbicon.variants.d.ts

@@ -0,0 +1,43 @@
+import { type SlotNames, type VariantProps } from '../../../../utils/variants.js';
+/**
+ * Extra slot styles the Urbicon A2UI dispatcher needs BEYOND the base
+ * `a2uiViewVariants` slots it inherits through the render context (column, row,
+ * list, icon, image, errorChip, pending, …). These are for the raw-HTML bits the
+ * Urbicon catalog renders itself — the `Section` archetype, plain body text, the
+ * field-error line — everything else renders through a real Urbicon component
+ * that carries its own tokens.
+ *
+ * Loaded LOCALLY by `UrbiconA2UINode.svelte` (never by the base `A2UIView` /
+ * `A2UINode`), so `urbicon/` value code stays out of the Basic bundle. Pure
+ * semantic tokens — no `dark:`, no hardcoded colours.
+ */
+export declare const a2uiUrbiconVariants: ((props?: {} | undefined) => {
+    section: (props?: ({} & {
+        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;
+    sectionHeader: (props?: ({} & {
+        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;
+    sectionTitle: (props?: ({} & {
+        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;
+    sectionDescription: (props?: ({} & {
+        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;
+    body: (props?: ({} & {
+        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;
+    fieldError: (props?: ({} & {
+        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;
+    field: (props?: ({} & {
+        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;
+    emptyStateCta: (props?: ({} & {
+        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;
+}) & {
+    readonly config: import("../../../../utils/variants.js").TVConfig;
+};
+export type A2UIViewUrbiconVariants = VariantProps<typeof a2uiUrbiconVariants>;
+export type A2UIViewUrbiconSlots = SlotNames<typeof a2uiUrbiconVariants>;

package/dist/components/Chat/A2UIView/urbicon/a2ui-urbicon.variants.js

@@ -0,0 +1,33 @@
+import { tv } from '../../../../utils/variants.js';
+/**
+ * Extra slot styles the Urbicon A2UI dispatcher needs BEYOND the base
+ * `a2uiViewVariants` slots it inherits through the render context (column, row,
+ * list, icon, image, errorChip, pending, …). These are for the raw-HTML bits the
+ * Urbicon catalog renders itself — the `Section` archetype, plain body text, the
+ * field-error line — everything else renders through a real Urbicon component
+ * that carries its own tokens.
+ *
+ * Loaded LOCALLY by `UrbiconA2UINode.svelte` (never by the base `A2UIView` /
+ * `A2UINode`), so `urbicon/` value code stays out of the Basic bundle. Pure
+ * semantic tokens — no `dark:`, no hardcoded colours.
+ */
+export const a2uiUrbiconVariants = tv({
+    slots: {
+        /** Section wrapper (title/description block + body). */
+        section: 'flex min-w-0 flex-col gap-3',
+        /** Section header (title + optional description). */
+        sectionHeader: 'flex min-w-0 flex-col gap-1',
+        /** Section title heading. */
+        sectionTitle: 'min-w-0 text-lg font-semibold leading-tight text-text-primary',
+        /** Section description (secondary text under the title). */
+        sectionDescription: 'min-w-0 text-sm text-text-secondary',
+        /** Plain body text (Text variant=body — PLAIN, no Markdown). */
+        body: 'min-w-0 break-words text-sm text-text-primary',
+        /** A form field's error message line (shown under a field when `error` is non-empty). */
+        fieldError: 'mt-1 text-xs text-danger',
+        /** Wrapper around a form field + its error line. */
+        field: 'flex min-w-0 flex-col',
+        /** Wrapper for the EmptyState call-to-action. */
+        emptyStateCta: 'mt-2 flex justify-center'
+    }
+});

package/dist/components/Chat/A2UIView/urbicon/urbicon-axes.gen.d.ts

@@ -0,0 +1,7 @@
+/** One variant axis: its allowed values (sorted) and documented default. */
+export interface UrbiconAxis {
+    readonly values: readonly string[];
+    readonly default?: string;
+}
+/** Urbicon component name → axis name → axis. The Urbicon A2UI registry references these. */
+export declare const URBICON_AXES: Readonly<Record<string, Readonly<Record<string, UrbiconAxis>>>>;

package/dist/components/Chat/A2UIView/urbicon/urbicon-axes.gen.js

@@ -0,0 +1,86 @@
+// DO NOT EDIT — generated by scripts/a2ui-axes-gen.ts (`bun run a2ui:axes`).
+// Source: packages/design-content/content/component-catalog.json (docs-gen artifact).
+//
+// The variant-axis truth of the Urbicon components the A2UI catalog maps. The
+// hand-curated registry couples to this (values ⊆ axis; default ===; every
+// `urbicon` reference exists) so the catalog can never advertise a value the real
+// component does not support. Regenerate after docs:gen with `bun run a2ui:axes`.
+/** Urbicon component name → axis name → axis. The Urbicon A2UI registry references these. */
+export const URBICON_AXES = {
+    Accordion: {
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["card", "default", "ghost"], default: "default" },
+    },
+    Alert: {
+        intent: { values: ["danger", "info", "neutral", "primary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["filled", "inline", "soft"], default: "soft" },
+    },
+    Avatar: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "neutral" },
+        size: { values: ["2xl", "lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["circle", "rounded", "square"], default: "circle" },
+    },
+    Badge: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+        variant: { values: ["dot", "filled", "outlined", "soft"], default: "filled" },
+    },
+    Button: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "neutral" },
+        size: { values: ["2xs", "lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined", "text"], default: "filled" },
+    },
+    Card: {
+        variant: { values: ["elevated", "floating", "outlined", "quiet"], default: "quiet" },
+    },
+    Checkbox: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined"], default: "outlined" },
+    },
+    Input: {
+        intent: { values: ["danger", "default", "success", "warning"], default: "default" },
+        size: { values: ["lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined", "underline"], default: "outlined" },
+    },
+    Progress: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+    },
+    RadioGroup: {
+        orientation: { values: ["horizontal", "vertical"], default: "vertical" },
+    },
+    Select: {
+        size: { values: ["lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined", "underline"], default: "outlined" },
+    },
+    Separator: {
+        orientation: { values: ["horizontal", "vertical"], default: "horizontal" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+    },
+    Slider: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["default", "rail"], default: "default" },
+    },
+    Stepper: {
+        orientation: { values: ["horizontal", "vertical"], default: "horizontal" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["default", "minimal", "outlined"], default: "default" },
+    },
+    Textarea: {
+        intent: { values: ["danger", "default", "success", "warning"], default: "default" },
+        size: { values: ["lg", "md", "sm", "xl", "xs"], default: "md" },
+    },
+    TimeInput: {
+        intent: { values: ["danger", "default", "success", "warning"], default: "default" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined"], default: "outlined" },
+    },
+    Toggle: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+        variant: { values: ["default", "dot"], default: "default" },
+    },
+};

package/dist/components/Chat/ChatMessage/chat-message.variants.d.ts

@@ -2,131 +2,131 @@ import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
 export declare const chatMessageVariants: ((props?: {
     layout?: "bubble" | "plain" | undefined;
     role?: "user" | "system" | "assistant" | undefined;
-    density?: "comfortable" | "compact" | undefined;
+    density?: "compact" | "comfortable" | undefined;
 } | undefined) => {
     root: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     container: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     header: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     roleName: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     avatar: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     bubble: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     partsFlow: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     attachment: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     attachmentIcon: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     attachmentName: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     attachmentSize: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     sourcesFooter: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     placeholder: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     statusAlert: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     footer: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     actionButton: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
     metadata: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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/components/CopyButton/copy-button.variants.d.ts

@@ -1,23 +1,23 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const copyButtonVariants: ((props?: {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-    state?: "copied" | "error" | "idle" | undefined;
+    state?: "error" | "idle" | "copied" | undefined;
 } | undefined) => {
     base: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "copied" | "error" | "idle" | undefined;
+        state?: "error" | "idle" | "copied" | 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?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "copied" | "error" | "idle" | undefined;
+        state?: "error" | "idle" | "copied" | 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;
     label: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "copied" | "error" | "idle" | undefined;
+        state?: "error" | "idle" | "copied" | 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/components/FileUpload/FileUpload.svelte

@@ -441,11 +441,14 @@
                   Deliberate a11y delta: the old Spinner emitted role="status" +
                   aria-live + an sr-only "Loading..." inside the file list's own
                   aria-live="polite" region (nested live regions); the core emits
-                  no semantics — the list region owns announcements. `text-primary`
-                  pins the old default color (the public Spinner's intent default),
-                  matching the explicit text-success/text-danger on the sibling
-                  status icons; it wins the duel against the core's `text-current`
-                  by stylesheet order (theme colors sort after keyword colors).
+                  no semantics — the list region owns announcements. The spinner
+                  stays `text-primary` deliberately: uploading is the IN-PROGRESS
+                  state, so it matches the always-primary progress bar above
+                  (Progress resolves fileUpload's primary|neutral intent to primary
+                  either way); the sibling text-success/text-danger icons mark the
+                  TERMINAL states. It wins the duel against the core's
+                  `text-current` by stylesheet order (theme colors sort after
+                  keyword colors).
                 -->
                 <CoreSpinner size="xs" class="text-primary" />
               {:else if entry.status === 'complete'}

package/dist/components/FileUpload/fileUpload.variants.js

@@ -8,14 +8,19 @@ export const fileUploadVariants = tv({
             'rounded-contain border-2 border-dashed',
             'border-border-default bg-surface-base',
             'cursor-pointer select-none',
-            'transition-[color,background-color,border-color,box-shadow,transform]',
+            // `scale`, NOT `transform`: Tailwind 4 emits `scale-*` as the discrete
+            // `scale:` property — the `dragging` compounds below lift the zone with
+            // `scale-[1.01]`, which a `transform` entry never animated.
+            'transition-[color,background-color,border-color,box-shadow,scale]',
             'duration-[var(--blocks-duration-fast)]',
             'ease-[var(--blocks-ease-gentle)]',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2'
         ],
         dropzoneIcon: [
             'text-text-quaternary',
-            'transition-[color,transform] duration-[var(--blocks-duration-fast)]'
+            // `scale`, NOT `transform` — the `dragging` compounds pop the icon with
+            // `scale-110` (discrete `scale:` property in Tailwind 4).
+            'transition-[color,scale] duration-[var(--blocks-duration-fast)]'
         ],
         dropzoneTitle: ['font-medium text-text-primary'],
         dropzoneDescription: ['text-text-tertiary text-center max-w-xs'],
@@ -24,7 +29,10 @@ export const fileUploadVariants = tv({
         fileItem: [
             'group relative flex items-center gap-3',
             'rounded-contain border border-border-hairline bg-surface-quiet',
-            'transition-[background-color,border-color,box-shadow,opacity,transform]',
+            // No transform entry: nothing on this slot sets a scale/translate/rotate
+            // utility, and Tailwind 4 would emit those as discrete properties anyway —
+            // `transform` was dead weight.
+            'transition-[background-color,border-color,box-shadow,opacity]',
             'duration-[var(--blocks-duration-fast)]',
             'hover:border-border-default hover:shadow-[var(--blocks-shadow-sm)]'
         ],
@@ -49,7 +57,10 @@ export const fileUploadVariants = tv({
         fileItemError: ['text-danger'],
         fileItemStatusIcon: [
             'flex-shrink-0',
-            'transition-[color,transform] duration-[var(--blocks-duration-fast)]'
+            // Colour only: the icon is swapped per status, never scaled/rotated, so a
+            // `transform` entry animated nothing (Tailwind 4 emits transforms as the
+            // discrete scale/translate/rotate properties).
+            'transition-[color] duration-[var(--blocks-duration-fast)]'
         ]
     },
     variants: {

package/dist/components/PinInput/PinInput.svelte

@@ -261,6 +261,7 @@
     role="group"
     aria-labelledby={label ? labelId : undefined}
     aria-label={label ? undefined : ariaLabel}
+    aria-disabled={disabled ? 'true' : undefined}
     class={unstyled ? (slotClasses?.group ?? '') : styles.group({ class: slotClasses?.group })}
   >
     {#each cellKeys as key, i (key)}

package/dist/components/PinInput/pin-input.variants.js

@@ -74,9 +74,11 @@ export const pinInputVariants = 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: {
-                cell: fieldErrorFrame(focus),
                 message: FIELD_MESSAGE_TONES.error
             }
         },
@@ -85,6 +87,17 @@ export const pinInputVariants = tv({
         }
     },
     compoundVariants: [
+        // ── Validation precedence: `error` beats `intent`, explicitly ────────────
+        // Both axes paint the SAME three buckets (border-color plus the focused
+        // border/ring tint), so exactly one of them can win. Emitting the error
+        // frame here rather than on the `error` axis makes that rule structural:
+        // compounds always fold after every axis, so `error: true` overrides
+        // whatever `intent` painted regardless of how the axes are ordered above
+        // (it used to hinge purely on `error` being DECLARED after `intent`).
+        {
+            error: true,
+            class: { cell: fieldErrorFrame(focus) }
+        },
         // Ghost keeps a transparent border at rest — even under an intent. The error
         // state drops this so validation feedback (border-danger) stays visible.
         {

package/dist/components/TimeInput/time-input.variants.js

@@ -89,9 +89,11 @@ export const timeInputVariants = 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: {
-                field: fieldErrorFrame(focus),
                 message: FIELD_MESSAGE_TONES.error
             }
         },
@@ -103,6 +105,19 @@ export const timeInputVariants = tv({
         }
     },
     compoundVariants: [
+        // ── Validation precedence: `error` beats `intent`, explicitly ────────────
+        // Both axes paint the SAME three buckets (border-color plus the focused
+        // border/ring tint), so exactly one of them can win. Emitting the error
+        // frame here rather than on the `error` axis makes that rule structural:
+        // compounds always fold after every axis, so `error: true` overrides
+        // whatever `intent` painted regardless of how the axes are ordered above
+        // (it used to hinge purely on `error` being DECLARED after `intent`).
+        // Folding after `fullWidth` too is harmless: that axis only paints layout
+        // buckets (`w`, `justify-content`), which never collide with the frame.
+        {
+            error: true,
+            class: { field: fieldErrorFrame(focus) }
+        },
         {
             variant: 'ghost',
             error: false,