@urbicon-ui/blocks 6.19.3 → 6.21.1

package/dist/primitives/Accordion/Accordion.svelte

@@ -8,6 +8,8 @@
     type = 'single',
     variant = 'default',
     size = 'md',
+    transitionDuration,
+    transitionEasing,
     value = $bindable(),
     defaultValue,
     onValueChange,
@@ -24,6 +26,13 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
+  // ACC-3: per-instance collapse motion. Set on the root; every item's content + chevron inherit
+  // the vars (AccordionItem renders an unstyled Collapsible that leaves them unset). Inline only
+  // when a prop is given, so the default keeps the reduced-motion-aware token.
+  const collapseDuration = $derived(
+    transitionDuration != null ? `${transitionDuration}ms` : undefined
+  );
+
   const variantProps: AccordionVariants = $derived({ variant, size });
   const styles = $derived(accordionVariants(variantProps));
 
@@ -36,6 +45,9 @@
     return Array.isArray(v) ? v : [v];
   }
 
+  // Uncontrolled seed: capture only the initial `defaultValue`; later changes
+  // must not clobber user interaction.
+  // svelte-ignore state_referenced_locally
   let internalValue = $state<string[]>(normalise(defaultValue));
 
   const openItems = $derived(value !== undefined ? normalise(value) : internalValue);
@@ -85,6 +97,8 @@
   class={unstyled
     ? [slotClasses?.base, className].filter(Boolean).join(' ')
     : styles.base({ class: [slotClasses?.base, className] })}
+  style:--blocks-collapse-duration={collapseDuration}
+  style:--blocks-collapse-easing={transitionEasing}
   data-orientation="vertical"
   {...restProps}
 >

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -43,9 +43,15 @@
   }
 </script>
 
+<!--
+  Collapsible is driven purely by the `open` prop (= ctx.isOpen(value)); the
+  trigger calls ctx.toggle(value) directly rather than Collapsible's own toggle.
+  Routing through Collapsible.toggle would optimistically mutate its local open
+  state *before* ctx decides — so a rejected toggle (collapsible=false on the
+  last open item) left Collapsible visually closed while ctx kept it open.
+-->
 <Collapsible
   {open}
-  onOpenChange={() => ctx.toggle(value)}
   disabled={isDisabled}
   name={`accordion-${value}`}
   unstyled
@@ -56,7 +62,7 @@
   }}
   {...restProps}
 >
-  {#snippet trigger({ open: isOpen, toggle, triggerId, contentId })}
+  {#snippet trigger({ open: isOpen, triggerId, contentId })}
     <button
       id={triggerId}
       type="button"
@@ -64,7 +70,7 @@
       aria-expanded={isOpen}
       aria-controls={contentId}
       disabled={isDisabled}
-      onclick={toggle}
+      onclick={() => ctx.toggle(value)}
     >
       {#if customTrigger}
         {@render customTrigger({ open: isOpen })}

package/dist/primitives/Accordion/accordion.variants.d.ts

@@ -1,77 +1,46 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const accordionVariants: (props?: import("../../utils/variants.js").TVProps<{
-    variant: {
-        default: {};
-        separated: {
-            base: string;
-            item: string;
-        };
-        ghost: {
-            base: string;
-            item: string;
-            trigger: string;
-        };
-    };
-    size: {
-        sm: {
-            trigger: string;
-            contentInner: string;
-            chevron: string;
-        };
-        md: {
-            trigger: string;
-            contentInner: string;
-            chevron: string;
-        };
-        lg: {
-            trigger: string;
-            contentInner: string;
-            chevron: string;
-        };
-    };
-}> | undefined) => {
+export declare const accordionVariants: ((props?: {
+    variant?: "default" | "ghost" | "separated" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} | undefined) => {
     base: (props?: ({
         variant?: "default" | "ghost" | "separated" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     item: (props?: ({
         variant?: "default" | "ghost" | "separated" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     trigger: (props?: ({
         variant?: "default" | "ghost" | "separated" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     chevron: (props?: ({
         variant?: "default" | "ghost" | "separated" | undefined;
         size?: "sm" | "md" | "lg" | 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?: ({
         variant?: "default" | "ghost" | "separated" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     contentInner: (props?: ({
         variant?: "default" | "ghost" | "separated" | undefined;
         size?: "sm" | "md" | "lg" | 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 AccordionVariants = VariantProps<typeof accordionVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

package/dist/primitives/Accordion/accordion.variants.js

@@ -14,11 +14,15 @@ export const accordionVariants = tv({
         ],
         chevron: [
             'shrink-0 text-text-tertiary',
-            'transition-transform duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+            // Collapse tokens (ACC-3) — retuned by Accordion's `transitionDuration`/`transitionEasing`
+            // via CSS-variable inheritance; `motion-reduce` guards the inline-override path.
+            'transition-transform duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
+            'motion-reduce:duration-[1ms]'
         ],
         content: [
             'overflow-hidden',
-            'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+            'transition-[grid-template-rows] duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
+            'motion-reduce:duration-[1ms]'
         ],
         contentInner: 'pb-4 text-text-secondary'
     },

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

@@ -56,6 +56,18 @@ export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<H
     disabled?: boolean;
     /** Whether items can be fully collapsed @default true */
     collapsible?: boolean;
+    /**
+     * Override every item's expand/collapse animation duration in milliseconds. Defaults to the
+     * `--blocks-collapse-duration` token (the `normal` 250ms). Respects `prefers-reduced-motion`.
+     */
+    transitionDuration?: number;
+    /**
+     * Override every item's expand/collapse easing as a CSS `<easing-function>` — e.g.
+     * `'ease-in-out'`, `'cubic-bezier(0.4,0,0.2,1)'`, or a token like `'var(--blocks-ease-springy)'`.
+     * Defaults to the `--blocks-collapse-easing` token. (A CSS string, not the `(t) => number`
+     * easing function the overlay components take — Accordion animates via CSS.)
+     */
+    transitionEasing?: string;
     /** Accordion items */
     children: Snippet;
     /** Custom CSS class */

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

@@ -1,101 +1,60 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const alertVariants: (props?: import("../../utils/variants.js").TVProps<{
-    intent: {
-        primary: {};
-        info: {};
-        success: {};
-        warning: {};
-        danger: {};
-        neutral: {};
-    };
-    variant: {
-        soft: {
-            base: string;
-        };
-        inline: {
-            base: string;
-        };
-        filled: {
-            base: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            icon: string;
-            title: string;
-            description: string;
-        };
-        md: {
-            base: string;
-            icon: string;
-            title: string;
-            description: string;
-        };
-        lg: {
-            base: string;
-            icon: string;
-            title: string;
-            description: string;
-        };
-    };
-}> | undefined) => {
+export declare const alertVariants: ((props?: {
+    intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+    variant?: "inline" | "filled" | "soft" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} | undefined) => {
     base: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     icon: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     title: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     description: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     actions: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     dismissButton: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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 AlertVariants = VariantProps<typeof alertVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

package/dist/primitives/Avatar/Avatar.svelte

@@ -17,6 +17,7 @@
     intent = 'neutral',
     status,
     statusPosition = 'bottom-right',
+    pulse = false,
     ring = false,
     ringIntent = 'primary',
     ringColor,
@@ -38,7 +39,6 @@
 
   let avatarElement = $state<HTMLElement>();
   let imageError = $state(false);
-  let isHovered = $state(false);
 
   const isInteractive = $derived(clickable || interactive || !!onclick);
 
@@ -91,6 +91,7 @@
     intent: randomColor ? undefined : intent,
     status,
     statusPosition,
+    pulse,
     ring,
     ringIntent: ringColor ? undefined : ringIntent,
     interactive: isInteractive
@@ -102,31 +103,20 @@
     resolveSlotClasses(blocksConfig, 'Avatar', preset, variantProps, slotClassesProp)
   );
 
-  const dynamicStyles = $derived.by(() => {
-    const styles: Record<string, string> = {};
-
-    if (randomColor && randomBg) {
-      // Inline style property names must be kebab-case, not JS camelCase.
-      // Previously `styles.backgroundColor` serialised as-is, so browsers
-      // ignored it and the avatar fell back to surface-interactive + white
-      // text (1.15:1 contrast).
-      styles['background-color'] = randomBg;
-      styles.color = 'white';
-    }
-
-    if (ringColor) {
-      styles['border-color'] = ringColor;
-    }
-
-    return styles;
-  });
-
-  const styleString = $derived(
-    Object.entries(dynamicStyles)
-      .map(([key, value]) => `${key}: ${value}`)
-      .join('; ')
+  // `randomColor` paints the visible fill, so it targets the `frame` slot.
+  // Inline property names stay kebab-case — a previous camelCase
+  // `backgroundColor` was silently ignored by browsers, dropping the avatar back
+  // to surface-interactive + white text.
+  const frameStyle = $derived(
+    randomColor && randomBg ? `background-color: ${randomBg}; color: white` : undefined
   );
 
+  // `ringColor` recolours the ring on the outer `base`. The ring is a
+  // Tailwind `ring-2` box-shadow, so it reads `--tw-ring-color` — setting
+  // `border-color` (the previous approach) was a no-op, as the avatar has no
+  // border. Only meaningful together with `ring`.
+  const baseStyle = $derived(ringColor ? `--tw-ring-color: ${ringColor}` : undefined);
+
   $effect(() => {
     if (avatarElement && mint && mint !== 'none' && isInteractive) {
       return mintRegistry.apply(avatarElement, mint);
@@ -134,12 +124,10 @@
   });
 
   function handleMouseEnter() {
-    isHovered = true;
     onHover?.(true);
   }
 
   function handleMouseLeave() {
-    isHovered = false;
     onHover?.(false);
   }
 
@@ -165,12 +153,13 @@
 <div
   bind:this={avatarElement}
   class={[
+    'blocks-avatar',
     `blocks-intent-${intent}`,
     unstyled
       ? [slotClasses?.base, className].filter(Boolean).join(' ')
       : styles.base({ class: [slotClasses?.base, className] })
   ]}
-  style={styleString}
+  style={baseStyle}
   role={isInteractive ? 'button' : undefined}
   tabindex={isInteractive ? 0 : undefined}
   aria-label={isInteractive ? alt || name || bt('accessibility.avatar') : undefined}
@@ -180,24 +169,31 @@
   onkeydown={handleKeydown}
   {...restProps}
 >
-  {#if src && !imageError}
-    <img
-      {src}
-      alt={alt || name || bt('accessibility.avatar')}
-      class={unstyled ? (slotClasses?.image ?? '') : styles.image({ class: slotClasses?.image })}
-      onerror={handleImageError}
-    />
-  {:else if children}
-    {@render children()}
-  {:else}
-    <span
-      class={unstyled
-        ? (slotClasses?.fallback ?? '')
-        : styles.fallback({ class: slotClasses?.fallback })}
-    >
-      {getInitials(name)}
-    </span>
-  {/if}
+  <!-- `frame` clips the image/initials to the avatar shape; the status dot
+       below is a sibling so it renders outside the clip and stays whole. -->
+  <div
+    class={unstyled ? (slotClasses?.frame ?? '') : styles.frame({ class: slotClasses?.frame })}
+    style={frameStyle}
+  >
+    {#if src && !imageError}
+      <img
+        {src}
+        alt={alt || name || bt('accessibility.avatar')}
+        class={unstyled ? (slotClasses?.image ?? '') : styles.image({ class: slotClasses?.image })}
+        onerror={handleImageError}
+      />
+    {:else if children}
+      {@render children()}
+    {:else}
+      <span
+        class={unstyled
+          ? (slotClasses?.fallback ?? '')
+          : styles.fallback({ class: slotClasses?.fallback })}
+      >
+        {getInitials(name)}
+      </span>
+    {/if}
+  </div>
 
   {#if status}
     <span
@@ -229,14 +225,44 @@
     }
   }
 
+  /* AVT-3: opt-in "live" pulse on the status dot. A radar ring radiates via an
+     animated box-shadow — no extra DOM — coloured to match the status through
+     the per-status `--blocks-avatar-pulse-color` set in avatar.variants.ts.
+     The dot now sits outside the frame's overflow-hidden clip, so the ring is
+     never cut off. */
+  :global(.blocks-avatar-status-pulse) {
+    animation: avatar-status-pulse 1.6s var(--blocks-ease-confident) infinite;
+  }
+
+  /* The ring must reach its brightest while it is already clear of the dot —
+     a shadow at spread 0 hides behind the opaque dot, so a plain from/to fade
+     only ever shows the faint, expanded tail. The mid stop lights it up at a
+     visible radius; it then keeps growing and fades to nothing. */
+  @keyframes avatar-status-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklab, var(--blocks-avatar-pulse-color) 0%, transparent);
+    }
+    35% {
+      box-shadow: 0 0 0 0.22rem
+        color-mix(in oklab, var(--blocks-avatar-pulse-color) 60%, transparent);
+    }
+    100% {
+      box-shadow: 0 0 0 0.6rem color-mix(in oklab, var(--blocks-avatar-pulse-color) 0%, transparent);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    :global(.blocks-mint-pulse) {
+    :global(.blocks-mint-pulse),
+    :global(.blocks-avatar-status-pulse) {
       animation: none;
     }
   }
 
-  @media (prefers-contrast: high) {
-    :global([class*='blocks-avatar']) {
+  /* High-contrast delineation for the avatar disc. Targets the stable
+     `blocks-avatar` root marker exactly — not `[class*='blocks-avatar']`, which
+     would also catch the `blocks-avatar-status-pulse` dot and ring it. */
+  @media (prefers-contrast: more) {
+    :global(.blocks-avatar) {
       outline: 2px solid currentColor;
       outline-offset: -2px;
     }