@urbicon-ui/blocks 6.40.4 → 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/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,

package/dist/internal/field-chrome.d.ts

@@ -21,6 +21,12 @@
  * whole field via `focus-within:`. That is why the ring / variant / intent /
  * error fragments are parameterised by {@link FieldFocus} rather than fixed.
  *
+ * Select and Combobox draw only on the validation subset ({@link fieldErrorFrame}
+ * and {@link FIELD_MESSAGE_TONES}) — their frames are otherwise their own (a
+ * trigger button, a tokenizer box). That subset is what kept drifting: Select
+ * hand-copied the error frame and Combobox had none at all, so an invalid
+ * Combobox announced itself through `aria-invalid` and looked untouched.
+ *
  * NOT covered here (deliberately component-local): the per-component frame
  * prefix (Input's `w-full`, PinInput's cell content styles, TimeInput's
  * `inline-flex` container), Input's `underline` variant and `placeholder`
@@ -70,7 +76,18 @@ export declare const fieldIntentFrames: (f: FieldFocus) => {
     warning: string;
     danger: string;
 };
-/** The error frame value (danger border + ring), parameterised by focus mode. */
+/**
+ * The error frame value (danger border + ring), parameterised by focus mode.
+ *
+ * PRECEDENCE: this paints the same three buckets as {@link fieldIntentFrames}
+ * (border-color plus the focused border/ring tint), so in a config that has
+ * BOTH a tonal `intent` axis and a boolean `error` axis only one of them can
+ * win. Apply it from a `compoundVariants` entry (`{ error: true, … }`), never
+ * from the `error` axis: compounds fold after every axis, which makes "error
+ * beats intent" a rule instead of a side effect of the axis declaration order.
+ * Configs without an `intent` axis (Select, Combobox) can keep it on the axis —
+ * but must move it the day one is added. Reference: input.variants.ts.
+ */
 export declare const fieldErrorFrame: (f: FieldFocus) => string;
 /** Frame classes when the whole control is disabled (the `disabled` variant). */
 export declare const FIELD_DISABLED_FRAME = "opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none";

package/dist/internal/field-chrome.js

@@ -21,6 +21,12 @@
  * whole field via `focus-within:`. That is why the ring / variant / intent /
  * error fragments are parameterised by {@link FieldFocus} rather than fixed.
  *
+ * Select and Combobox draw only on the validation subset ({@link fieldErrorFrame}
+ * and {@link FIELD_MESSAGE_TONES}) — their frames are otherwise their own (a
+ * trigger button, a tokenizer box). That subset is what kept drifting: Select
+ * hand-copied the error frame and Combobox had none at all, so an invalid
+ * Combobox announced itself through `aria-invalid` and looked untouched.
+ *
  * NOT covered here (deliberately component-local): the per-component frame
  * prefix (Input's `w-full`, PinInput's cell content styles, TimeInput's
  * `inline-flex` container), Input's `underline` variant and `placeholder`
@@ -64,7 +70,18 @@ export const fieldIntentFrames = (f) => ({
     warning: `border-warning ${f}:border-warning ${f}:ring-warning/20`,
     danger: `border-danger ${f}:border-danger ${f}:ring-danger/20`
 });
-/** The error frame value (danger border + ring), parameterised by focus mode. */
+/**
+ * The error frame value (danger border + ring), parameterised by focus mode.
+ *
+ * PRECEDENCE: this paints the same three buckets as {@link fieldIntentFrames}
+ * (border-color plus the focused border/ring tint), so in a config that has
+ * BOTH a tonal `intent` axis and a boolean `error` axis only one of them can
+ * win. Apply it from a `compoundVariants` entry (`{ error: true, … }`), never
+ * from the `error` axis: compounds fold after every axis, which makes "error
+ * beats intent" a rule instead of a side effect of the axis declaration order.
+ * Configs without an `intent` axis (Select, Combobox) can keep it on the axis —
+ * but must move it the day one is added. Reference: input.variants.ts.
+ */
 export const fieldErrorFrame = (f) => `border-danger ${f}:border-danger ${f}:ring-danger/20`;
 /** Frame classes when the whole control is disabled (the `disabled` variant). */
 export const FIELD_DISABLED_FRAME = 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none';

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']