@urbicon-ui/blocks 6.19.3 → 6.21.1

package/dist/primitives/Avatar/avatar.variants.d.ts

@@ -1,136 +1,40 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const avatarVariants: (props?: import("../../utils/variants.js").TVProps<{
-    size: {
-        xs: {
-            base: string;
-            status: string;
-        };
-        sm: {
-            base: string;
-            status: string;
-        };
-        md: {
-            base: string;
-            status: string;
-        };
-        lg: {
-            base: string;
-            status: string;
-        };
-        xl: {
-            base: string;
-            status: string;
-        };
-        '2xl': {
-            base: string;
-            status: string;
-        };
-    };
-    variant: {
-        circle: {
-            base: string;
-            image: string;
-        };
-        rounded: {
-            base: string;
-            image: string;
-        };
-        square: {
-            base: string;
-            image: string;
-        };
-    };
-    intent: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-    };
-    status: {
-        online: {
-            status: string;
-        };
-        offline: {
-            status: string;
-        };
-        away: {
-            status: string;
-        };
-        busy: {
-            status: string;
-        };
-    };
-    statusPosition: {
-        'bottom-right': {
-            status: string;
-        };
-        'top-right': {
-            status: string;
-        };
-        'bottom-left': {
-            status: string;
-        };
-        'top-left': {
-            status: string;
-        };
-    };
-    ring: {
-        true: {
-            base: string;
-        };
-    };
-    ringIntent: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-    };
-    interactive: {
-        true: {
-            base: string[];
-        };
-    };
-}> | undefined) => {
+export declare const avatarVariants: ((props?: {
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | undefined;
+    variant?: "rounded" | "circle" | "square" | undefined;
+    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    status?: "offline" | "online" | "away" | "busy" | undefined;
+    statusPosition?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | undefined;
+    pulse?: boolean | undefined;
+    ring?: boolean | undefined;
+    ringIntent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    interactive?: boolean | undefined;
+} | undefined) => {
     base: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | undefined;
         variant?: "rounded" | "circle" | "square" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         status?: "offline" | "online" | "away" | "busy" | undefined;
         statusPosition?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | undefined;
+        pulse?: boolean | undefined;
         ring?: boolean | undefined;
         ringIntent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         interactive?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+    frame: (props?: ({
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | undefined;
+        variant?: "rounded" | "circle" | "square" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        status?: "offline" | "online" | "away" | "busy" | undefined;
+        statusPosition?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | undefined;
+        pulse?: boolean | undefined;
+        ring?: boolean | undefined;
+        ringIntent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        interactive?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     image: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | undefined;
@@ -138,12 +42,12 @@ export declare const avatarVariants: (props?: import("../../utils/variants.js").
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         status?: "offline" | "online" | "away" | "busy" | undefined;
         statusPosition?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | undefined;
+        pulse?: boolean | undefined;
         ring?: boolean | undefined;
         ringIntent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         interactive?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     fallback: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | undefined;
@@ -151,12 +55,12 @@ export declare const avatarVariants: (props?: import("../../utils/variants.js").
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         status?: "offline" | "online" | "away" | "busy" | undefined;
         statusPosition?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | undefined;
+        pulse?: boolean | undefined;
         ring?: boolean | undefined;
         ringIntent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         interactive?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     status: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | undefined;
@@ -164,13 +68,15 @@ export declare const avatarVariants: (props?: import("../../utils/variants.js").
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         status?: "offline" | "online" | "away" | "busy" | undefined;
         statusPosition?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | undefined;
+        pulse?: boolean | undefined;
         ring?: boolean | undefined;
         ringIntent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         interactive?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type AvatarVariants = VariantProps<typeof avatarVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

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

@@ -1,10 +1,19 @@
 import { tv } from '../../utils/variants.js';
 export const avatarVariants = tv({
     slots: {
+        // Outer positioning context. Carries sizing, the ring, interactive/mint
+        // effects — but NOT `overflow-hidden`, so the status dot (a sibling of
+        // `frame`) is never clipped (AVT-1). The radius is mirrored here purely so
+        // the ring follows the avatar's shape.
         base: [
-            'relative inline-flex items-center justify-center',
-            'overflow-hidden font-semibold text-center select-none shrink-0',
-            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)] ease-out',
+            'relative inline-flex shrink-0',
+            'transition-[color,background-color,border-color,box-shadow,opacity] 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.
+        frame: [
+            'flex items-center justify-center w-full h-full overflow-hidden',
+            'font-semibold text-center select-none',
             'bg-surface-interactive text-text-secondary'
         ],
         image: ['w-full h-full object-cover'],
@@ -42,61 +51,68 @@ export const avatarVariants = tv({
         // people and stand apart from the commit/modify/contain semantic system —
         // a brand that flattens commit-tier surfaces (e.g. squared pill-buttons)
         // should not also lose circular avatars. The radii below are physical
-        // shape tokens, not tier tokens.
+        // shape tokens, not tier tokens. `frame` clips the content to the shape;
+        // `base` mirrors it so the ring tracks the same silhouette.
         variant: {
             circle: {
                 base: 'rounded-full',
+                frame: 'rounded-full',
                 image: 'rounded-full'
             },
             rounded: {
                 // Avatar-specific soft-square. Maps to --radius-xl (foundation scale);
                 // brands tune via the foundation token, not via a tier override.
                 base: 'rounded-xl',
+                frame: 'rounded-xl',
                 image: 'rounded-xl'
             },
             square: {
                 base: 'rounded-none',
+                frame: 'rounded-none',
                 image: 'rounded-none'
             }
         },
         intent: {
             primary: {
-                base: 'bg-primary-subtle text-primary-emphasis'
+                frame: 'bg-primary-subtle text-primary-emphasis'
             },
             secondary: {
-                base: 'bg-secondary-subtle text-secondary-emphasis'
+                frame: 'bg-secondary-subtle text-secondary-emphasis'
             },
             success: {
-                base: 'bg-success-subtle text-success-emphasis'
+                frame: 'bg-success-subtle text-success-emphasis'
             },
             warning: {
-                base: 'bg-warning-subtle text-warning-emphasis'
+                frame: 'bg-warning-subtle text-warning-emphasis'
             },
             danger: {
-                base: 'bg-danger-subtle text-danger-emphasis'
+                frame: 'bg-danger-subtle text-danger-emphasis'
             },
             neutral: {
-                base: 'bg-surface-interactive text-text-secondary'
+                frame: 'bg-surface-interactive text-text-secondary'
             }
         },
+        // Each status also publishes its colour as `--blocks-avatar-pulse-color`
+        // so the opt-in `pulse` ring (see Avatar.svelte) radiates in the matching
+        // hue without a second colour source.
         status: {
             online: {
-                status: 'bg-success'
+                status: 'bg-success [--blocks-avatar-pulse-color:var(--color-success)]'
             },
             offline: {
-                status: 'bg-text-quaternary'
+                status: 'bg-text-quaternary [--blocks-avatar-pulse-color:var(--color-text-quaternary)]'
             },
             away: {
-                status: 'bg-warning'
+                status: 'bg-warning [--blocks-avatar-pulse-color:var(--color-warning)]'
             },
             busy: {
-                status: 'bg-danger'
+                status: 'bg-danger [--blocks-avatar-pulse-color:var(--color-danger)]'
             }
         },
-        // Status dot is translated out of the avatar's overflow-hidden edge so it
-        // remains fully visible on circular avatars (AVT-1). Translation magnitude
-        // is intentionally fractional — the dot sits half-overlapping the edge,
-        // which matches the conventional badge look (Slack, Discord, Linear).
+        // Status dot is translated out of the avatar's edge so it half-overlaps the
+        // corner (AVT-1). Translation magnitude is intentionally fractional — the
+        // dot sits half-overlapping the edge, which matches the conventional badge
+        // look (Slack, Discord, Linear).
         statusPosition: {
             'bottom-right': {
                 status: 'bottom-0 right-0 translate-x-1/4 translate-y-1/4'
@@ -111,6 +127,14 @@ export const avatarVariants = tv({
                 status: 'top-0 left-0 -translate-x-1/4 -translate-y-1/4'
             }
         },
+        // Opt-in "live" pulse on the status dot — a radar ring that draws the eye to
+        // presence changes. Only has a visible effect together with `status`; the
+        // animation itself + reduced-motion handling live in Avatar.svelte.
+        pulse: {
+            true: {
+                status: 'blocks-avatar-status-pulse'
+            }
+        },
         ring: {
             true: {
                 base: 'ring-2 ring-offset-2 ring-offset-surface-base'
@@ -184,6 +208,7 @@ export const avatarVariants = tv({
         variant: 'circle',
         intent: 'neutral',
         statusPosition: 'bottom-right',
+        pulse: false,
         ring: false,
         ringIntent: 'primary',
         interactive: false

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

@@ -17,6 +17,11 @@ import type { AvatarSlots, AvatarVariants } from './avatar.variants.js';
  * ```svelte
  * <Avatar name="Jane Smith" randomColor clickable onclick={() => showProfile()} />
  * ```
+ *
+ * @example
+ * ```svelte
+ * <Avatar name="Ada Lovelace" status="online" pulse />
+ * ```
  */
 export interface AvatarProps extends AvatarVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Image URL. Falls back to initials or `children` when empty or on load error. */
@@ -43,7 +48,7 @@ export interface AvatarProps extends AvatarVariants, Omit<HTMLAttributes<HTMLDiv
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv styles. Slots: base | image | fallback | status */
+    /** Per-slot class overrides merged with tv styles. Slots: base | frame | image | fallback | status */
     slotClasses?: Partial<Record<AvatarSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Avatar: {...} }}>`.

package/dist/primitives/Badge/badge.variants.d.ts

@@ -1,89 +1,18 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const PLACEMENT_VALUES: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"];
-export declare const badgeVariants: (props?: import("../../utils/variants.js").TVProps<{
-    tier: {
-        commit: {
-            base: string;
-        };
-        modify: {
-            base: string;
-        };
-    };
-    intent: {
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-        neutral: {};
-    };
-    variant: {
-        filled: {};
-        outlined: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-        dot: {
-            base: string;
-        };
-    };
-    size: {
-        xs: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-    };
-    placement: {
-        top: string;
-        'top-start': string;
-        'top-end': string;
-        bottom: string;
-        'bottom-start': string;
-        'bottom-end': string;
-        left: string;
-        right: string;
-    };
-    counter: {
-        true: {
-            base: string;
-        };
-    };
-    pulse: {
-        true: {
-            base: string;
-        };
-    };
-    removable: {
-        true: {
-            base: string;
-        };
-    };
-    interactive: {
-        true: {
-            base: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    border: {
-        true: {
-            base: string;
-        };
-    };
-}> | undefined) => {
+export declare const badgeVariants: ((props?: {
+    tier?: "commit" | "modify" | undefined;
+    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    variant?: "dot" | "filled" | "outlined" | "soft" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+    counter?: boolean | undefined;
+    pulse?: boolean | undefined;
+    removable?: boolean | undefined;
+    interactive?: boolean | undefined;
+    disabled?: boolean | undefined;
+    border?: boolean | undefined;
+} | undefined) => {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
@@ -97,8 +26,7 @@ export declare const badgeVariants: (props?: import("../../utils/variants.js").T
         disabled?: boolean | undefined;
         border?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     content: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -113,8 +41,7 @@ export declare const badgeVariants: (props?: import("../../utils/variants.js").T
         disabled?: boolean | undefined;
         border?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     removeButton: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -129,8 +56,7 @@ export declare const badgeVariants: (props?: import("../../utils/variants.js").T
         disabled?: boolean | undefined;
         border?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     removeIcon: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -145,9 +71,10 @@ export declare const badgeVariants: (props?: import("../../utils/variants.js").T
         disabled?: boolean | undefined;
         border?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type BadgeVariants = VariantProps<typeof badgeVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

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

@@ -53,7 +53,9 @@ export const badgeVariants = tv({
                 base: 'bg-transparent border-2'
             },
             soft: {
-                base: 'bg-transparent border-transparent'
+                // No bg here: every intent×soft compound supplies its bg-*-subtle,
+                // so an axis-level bg-transparent could never win the fold.
+                base: 'border-transparent'
             },
             dot: {
                 base: '!p-0 rounded-commit border-none'
@@ -98,10 +100,11 @@ export const badgeVariants = tv({
                 base: 'animate-[badge-pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite]'
             }
         },
+        // The removable right-padding lives in compoundVariants (after the
+        // counter px-* compounds) — a later px-* shorthand would dominate an
+        // axis-level pr-2, and the ✕ button needs its room in counter badges.
         removable: {
-            true: {
-                base: 'pr-2'
-            }
+            true: {}
         },
         interactive: {
             true: {
@@ -131,6 +134,10 @@ export const badgeVariants = tv({
         { counter: true, size: 'sm', class: { base: 'min-w-5 px-1.5' } },
         { counter: true, size: 'md', class: { base: 'min-w-6 px-1.5' } },
         { counter: true, size: 'lg', class: { base: 'min-w-7 px-2' } },
+        // Removable ✕ needs right-hand room. Placed after the counter compounds
+        // so the pr-2 longhand refines their px-* (longhands never get
+        // dominance-stripped by an EARLIER shorthand — later sources win).
+        { removable: true, class: { base: 'pr-2' } },
         // Dot size overrides
         {
             variant: 'dot',