@urbicon-ui/blocks 6.19.2 → 6.21.0

package/dist/i18n/index.d.ts

@@ -373,7 +373,192 @@ declare const blocksTranslations: {
         };
     };
 };
-export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<import("@urbicon-ui/i18n").Translations>;
+export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
+    readonly accessibility: {
+        readonly avatar: "Avatar";
+        readonly clearInput: "Clear input";
+        readonly clearSearch: "Clear search";
+        readonly clearSelection: "Clear selection";
+        readonly closeDialog: "Close dialog";
+        readonly closeDrawer: "Close drawer";
+        readonly dismiss: "Dismiss";
+        readonly fileUpload: "File upload";
+        readonly loading: "Loading";
+        readonly maximum: "Maximum";
+        readonly minimum: "Minimum";
+        readonly pagination: "Page navigation";
+        readonly progress: "Progress";
+        readonly slider: "Slider";
+        readonly toggle: "Toggle";
+        readonly toggleOptions: "Toggle options";
+        readonly removableBadge: "Removable badge";
+        readonly removeBadge: "Remove badge";
+        readonly removeFile: "Remove {{name}}";
+    };
+    readonly button: {
+        readonly close: "Close";
+        readonly apply: "Apply";
+        readonly cancel: "Cancel";
+        readonly confirm: "Confirm";
+    };
+    readonly menu: {
+        readonly placeholder: "Select an option...";
+    };
+    readonly common: {
+        readonly loading: "Loading...";
+    };
+    readonly languages: {
+        readonly de: "Deutsch";
+        readonly en: "English";
+        readonly es: "Español";
+        readonly fr: "Français";
+        readonly it: "Italiano";
+        readonly nl: "Nederlands";
+    };
+    readonly localeSwitcher: {
+        readonly ariaLabel: "Language selection";
+        readonly placeholder: "Select language...";
+    };
+    readonly pagination: {
+        readonly next: "Next";
+        readonly first: "First";
+        readonly last: "Last";
+        readonly page: "Page";
+        readonly previous: "Previous";
+        readonly pageInfo: "{{label}} {{current}} of {{total}}";
+        readonly rangeInfo: "{{start}}–{{end}} of {{total}}";
+    };
+    readonly calendar: {
+        readonly recurring: "Recurring event";
+        readonly previousMonth: "Previous month";
+        readonly nextMonth: "Next month";
+        readonly previousWeek: "Previous week";
+        readonly nextWeek: "Next week";
+        readonly previousDay: "Previous day";
+        readonly nextDay: "Next day";
+        readonly previousYear: "Previous year";
+        readonly nextYear: "Next year";
+        readonly today: "Today";
+        readonly calendarGrid: "Calendar";
+        readonly weekdays: "Weekdays";
+        readonly weekNumber: "Week number";
+        readonly events: "Events";
+        readonly noEvents: "No events";
+        readonly showMore: "{{count}} more";
+        readonly legend: "Legend";
+        readonly yearView: "Year overview";
+        readonly weekView: "Week view";
+        readonly viewMonth: "Month";
+        readonly viewYear: "Year";
+        readonly viewWeek: "Week";
+        readonly viewDay: "Day";
+        readonly multiDayLabel: "Day {{current}} of {{total}}";
+        readonly agendaView: "Agenda view";
+        readonly viewAgenda: "Agenda";
+        readonly viewSwitcher: "View mode";
+    };
+    readonly planner: {
+        readonly previousWeek: "Previous week";
+        readonly nextWeek: "Next week";
+        readonly previousMonth: "Previous month";
+        readonly nextMonth: "Next month";
+        readonly previousRange: "Previous range";
+        readonly nextRange: "Next range";
+        readonly today: "Today";
+        readonly grid: "Planner";
+        readonly itemCount: "{{count}} items";
+    };
+    readonly commandPalette: {
+        readonly noResults: "No results found.";
+        readonly search: "Search...";
+        readonly hints: {
+            readonly navigate: "Navigate";
+            readonly select: "Select";
+            readonly close: "Close";
+        };
+    };
+    readonly compositionBar: {
+        readonly total: "Total";
+        readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
+        readonly share: "Share";
+        readonly value: "Value";
+        readonly percent: "Percent";
+        readonly remaining: "remaining";
+    };
+    readonly guide: {
+        readonly next: "Next";
+        readonly previous: "Back";
+        readonly skip: "Skip tour";
+        readonly done: "Done";
+        readonly step: "Step {{current}} of {{total}}";
+        readonly tour: "Guided tour";
+        readonly close: "Close";
+        readonly openHelp: "Help";
+        readonly backToList: "All topics";
+        readonly info: "More information";
+        readonly infoAbout: "More information about {{label}}";
+        readonly dismiss: "Dismiss hint";
+        readonly startTour: "Start the guided tour";
+        readonly actionRequired: "Complete the highlighted action to continue";
+        readonly filterPlaceholder: "Filter topics…";
+        readonly noResults: "No matching topics";
+    };
+    readonly journeyTimeline: {
+        readonly label: "Journey";
+        readonly status: {
+            readonly complete: "Completed";
+            readonly active: "In progress";
+            readonly pending: "Pending";
+            readonly attention: "Needs attention";
+            readonly blocked: "Blocked";
+            readonly skipped: "Skipped";
+        };
+    };
+    readonly datepicker: {
+        readonly placeholder: "Select a date...";
+        readonly rangePlaceholder: "Select a date range...";
+        readonly openCalendar: "Open calendar";
+        readonly invalidDate: "Invalid date";
+        readonly outOfRange: "Date is outside the allowed range";
+        readonly invalidRange: "Invalid date range";
+    };
+    readonly fileUpload: {
+        readonly exists: "File already added";
+        readonly invalidType: "File type {{type}} is not allowed";
+        readonly tooLarge: "File exceeds {{size}} limit";
+        readonly tooMany: "Maximum {{count}} files allowed";
+        readonly tooSmall: "File must be at least {{size}}";
+    };
+    readonly sankey: {
+        readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
+        readonly source: "Source";
+        readonly target: "Target";
+        readonly value: "Value";
+    };
+    readonly slider: {
+        readonly rangeStatus: {
+            readonly insideRecommended: "In recommended range";
+            readonly insideValid: "In valid range";
+            readonly insideValidOnly: "Outside recommended range, but valid";
+            readonly outsideValid: "Outside valid range";
+        };
+    };
+    readonly themeSwitcher: {
+        readonly lightMode: "Light mode";
+        readonly darkMode: "Dark mode";
+        readonly systemTheme: "System theme";
+    };
+    readonly chart: {
+        readonly category: "Category";
+        readonly series: "Series {{index}}";
+        readonly segment: "Segment";
+        readonly value: "Value";
+        readonly share: "Share";
+    };
+    readonly stepper: {
+        readonly optional: "Optional";
+    };
+}>;
 /**
  * Context-scoped translation hook for the blocks package. Call during component
  * initialisation, then use the returned `t` (conventionally aliased `bt`):
@@ -386,7 +571,192 @@ export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<import("
  * Resolves against the nearest `<I18nProvider>`'s locale (or the base locale
  * when none is mounted) and re-renders reactively on locale change.
  */
-export declare const useBlocksI18n: any;
+export declare const useBlocksI18n: () => import("@urbicon-ui/i18n").TypedTranslationFunction<{
+    readonly accessibility: {
+        readonly avatar: "Avatar";
+        readonly clearInput: "Clear input";
+        readonly clearSearch: "Clear search";
+        readonly clearSelection: "Clear selection";
+        readonly closeDialog: "Close dialog";
+        readonly closeDrawer: "Close drawer";
+        readonly dismiss: "Dismiss";
+        readonly fileUpload: "File upload";
+        readonly loading: "Loading";
+        readonly maximum: "Maximum";
+        readonly minimum: "Minimum";
+        readonly pagination: "Page navigation";
+        readonly progress: "Progress";
+        readonly slider: "Slider";
+        readonly toggle: "Toggle";
+        readonly toggleOptions: "Toggle options";
+        readonly removableBadge: "Removable badge";
+        readonly removeBadge: "Remove badge";
+        readonly removeFile: "Remove {{name}}";
+    };
+    readonly button: {
+        readonly close: "Close";
+        readonly apply: "Apply";
+        readonly cancel: "Cancel";
+        readonly confirm: "Confirm";
+    };
+    readonly menu: {
+        readonly placeholder: "Select an option...";
+    };
+    readonly common: {
+        readonly loading: "Loading...";
+    };
+    readonly languages: {
+        readonly de: "Deutsch";
+        readonly en: "English";
+        readonly es: "Español";
+        readonly fr: "Français";
+        readonly it: "Italiano";
+        readonly nl: "Nederlands";
+    };
+    readonly localeSwitcher: {
+        readonly ariaLabel: "Language selection";
+        readonly placeholder: "Select language...";
+    };
+    readonly pagination: {
+        readonly next: "Next";
+        readonly first: "First";
+        readonly last: "Last";
+        readonly page: "Page";
+        readonly previous: "Previous";
+        readonly pageInfo: "{{label}} {{current}} of {{total}}";
+        readonly rangeInfo: "{{start}}–{{end}} of {{total}}";
+    };
+    readonly calendar: {
+        readonly recurring: "Recurring event";
+        readonly previousMonth: "Previous month";
+        readonly nextMonth: "Next month";
+        readonly previousWeek: "Previous week";
+        readonly nextWeek: "Next week";
+        readonly previousDay: "Previous day";
+        readonly nextDay: "Next day";
+        readonly previousYear: "Previous year";
+        readonly nextYear: "Next year";
+        readonly today: "Today";
+        readonly calendarGrid: "Calendar";
+        readonly weekdays: "Weekdays";
+        readonly weekNumber: "Week number";
+        readonly events: "Events";
+        readonly noEvents: "No events";
+        readonly showMore: "{{count}} more";
+        readonly legend: "Legend";
+        readonly yearView: "Year overview";
+        readonly weekView: "Week view";
+        readonly viewMonth: "Month";
+        readonly viewYear: "Year";
+        readonly viewWeek: "Week";
+        readonly viewDay: "Day";
+        readonly multiDayLabel: "Day {{current}} of {{total}}";
+        readonly agendaView: "Agenda view";
+        readonly viewAgenda: "Agenda";
+        readonly viewSwitcher: "View mode";
+    };
+    readonly planner: {
+        readonly previousWeek: "Previous week";
+        readonly nextWeek: "Next week";
+        readonly previousMonth: "Previous month";
+        readonly nextMonth: "Next month";
+        readonly previousRange: "Previous range";
+        readonly nextRange: "Next range";
+        readonly today: "Today";
+        readonly grid: "Planner";
+        readonly itemCount: "{{count}} items";
+    };
+    readonly commandPalette: {
+        readonly noResults: "No results found.";
+        readonly search: "Search...";
+        readonly hints: {
+            readonly navigate: "Navigate";
+            readonly select: "Select";
+            readonly close: "Close";
+        };
+    };
+    readonly compositionBar: {
+        readonly total: "Total";
+        readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
+        readonly share: "Share";
+        readonly value: "Value";
+        readonly percent: "Percent";
+        readonly remaining: "remaining";
+    };
+    readonly guide: {
+        readonly next: "Next";
+        readonly previous: "Back";
+        readonly skip: "Skip tour";
+        readonly done: "Done";
+        readonly step: "Step {{current}} of {{total}}";
+        readonly tour: "Guided tour";
+        readonly close: "Close";
+        readonly openHelp: "Help";
+        readonly backToList: "All topics";
+        readonly info: "More information";
+        readonly infoAbout: "More information about {{label}}";
+        readonly dismiss: "Dismiss hint";
+        readonly startTour: "Start the guided tour";
+        readonly actionRequired: "Complete the highlighted action to continue";
+        readonly filterPlaceholder: "Filter topics…";
+        readonly noResults: "No matching topics";
+    };
+    readonly journeyTimeline: {
+        readonly label: "Journey";
+        readonly status: {
+            readonly complete: "Completed";
+            readonly active: "In progress";
+            readonly pending: "Pending";
+            readonly attention: "Needs attention";
+            readonly blocked: "Blocked";
+            readonly skipped: "Skipped";
+        };
+    };
+    readonly datepicker: {
+        readonly placeholder: "Select a date...";
+        readonly rangePlaceholder: "Select a date range...";
+        readonly openCalendar: "Open calendar";
+        readonly invalidDate: "Invalid date";
+        readonly outOfRange: "Date is outside the allowed range";
+        readonly invalidRange: "Invalid date range";
+    };
+    readonly fileUpload: {
+        readonly exists: "File already added";
+        readonly invalidType: "File type {{type}} is not allowed";
+        readonly tooLarge: "File exceeds {{size}} limit";
+        readonly tooMany: "Maximum {{count}} files allowed";
+        readonly tooSmall: "File must be at least {{size}}";
+    };
+    readonly sankey: {
+        readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
+        readonly source: "Source";
+        readonly target: "Target";
+        readonly value: "Value";
+    };
+    readonly slider: {
+        readonly rangeStatus: {
+            readonly insideRecommended: "In recommended range";
+            readonly insideValid: "In valid range";
+            readonly insideValidOnly: "Outside recommended range, but valid";
+            readonly outsideValid: "Outside valid range";
+        };
+    };
+    readonly themeSwitcher: {
+        readonly lightMode: "Light mode";
+        readonly darkMode: "Dark mode";
+        readonly systemTheme: "System theme";
+    };
+    readonly chart: {
+        readonly category: "Category";
+        readonly series: "Series {{index}}";
+        readonly segment: "Segment";
+        readonly value: "Value";
+        readonly share: "Share";
+    };
+    readonly stepper: {
+        readonly optional: "Optional";
+    };
+}>;
 export declare const hasBlocksTranslation: (key: string) => boolean, getBlocksLocales: () => import("@urbicon-ui/i18n").Locale[];
 export type BlocksTranslationKey = keyof typeof enTranslations;
 export { blocksTranslations };

package/dist/icons/IconProvider.svelte

@@ -4,6 +4,9 @@
 
   let { icons, children }: { icons: Partial<IconSet>; children: Snippet } = $props();
 
+  // Provider config is applied once at init — icon overrides are not meant to
+  // swap reactively after mount.
+  // svelte-ignore state_referenced_locally
   setIcons(icons);
 </script>
 

package/dist/mint/styles.css

@@ -177,7 +177,7 @@
 
 /* === HIGH CONTRAST MODE === */
 
-@media (prefers-contrast: high) {
+@media (prefers-contrast: more) {
   .blocks-mint-glow {
     box-shadow: 0 0 0 2px currentColor;
   }

package/dist/primitives/Accordion/Accordion.svelte

@@ -36,6 +36,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);

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

@@ -41,7 +41,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
     };
 }> | undefined) => {
     base: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -49,7 +49,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
         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;
     }) | undefined) => string;
     icon: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -57,7 +57,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
         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;
     }) | undefined) => string;
     content: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -65,7 +65,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
         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;
     }) | undefined) => string;
     title: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -73,7 +73,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
         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;
     }) | undefined) => string;
     description: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -81,7 +81,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
         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;
     }) | undefined) => string;
     actions: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -89,7 +89,7 @@ export declare const alertVariants: (props?: import("../../utils/variants.js").T
         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;
     }) | undefined) => string;
     dismissButton: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {

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;
     }