@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/Toast/toastDSV2.ts

@@ -1,12 +1,20 @@
-import { ref } from 'vue'
-import type { Component } from 'vue'
+import { markRaw, ref } from 'vue'
+import type { Component, Ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { createEventHook, type EventHook } from '@vueuse/core'
 
 import type { ThemeColorType } from '../../theme'
+import type { Size } from '../../constants'
 
 let uid = 1
 
+/**
+ * How many toasts render at once. It lives here rather than in `LayoutToasts`
+ * because the store schedules the close timers, and only the toasts actually
+ * on screen may run one.
+ */
+export const MAX_ITEMS_DISPLAYED = 3
+
 export type ToastType = 'alert'|'warning'|'info'|'success'
 
 const DEFAULT_TIMER_DURATION_PER_TYPE: Record<Extract<ToastType, 'success'|'info'>, number> = {
@@ -14,14 +22,39 @@ const DEFAULT_TIMER_DURATION_PER_TYPE: Record<Extract<ToastType, 'success'|'info
   info: 7 * 1000,
 }
 
-export interface ToastOptions {
-  message: string
+/**
+ * Identity shown in place of the status icon. Size and variant are fixed by
+ * the design, so only the identity-bearing `UiAvatar` props are exposed.
+ */
+export interface ToastAvatar {
+  src?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  customText?: string | null
+  color?: string | null
+  alt?: string
+}
+
+/**
+ * Every field a toast understands, all optional. `openToast` narrows this to
+ * `ToastOptions`, which additionally demands something to display.
+ */
+export interface ToastBaseOptions {
+  message?: string
+  /**
+   * Rendered in place of `message`, inside the default layout — `component`
+   * replaces the whole body instead. Markup, and sanitizing it, stays with
+   * the caller.
+   */
+  messageComponent?: Component
+  messageComponentProps?: Record<string, unknown>
   id?: PropertyKey
   title?: string
   info?: string
   type?: ThemeColorType
+  avatar?: ToastAvatar
   time?: number | boolean // if time is explicitly false, the toast will not auto-close
-  progessIndeterminate?: boolean
+  progressIndeterminate?: boolean
   customIcon?: string
   confirmLabel?: string
   confirmHref?: string
@@ -29,6 +62,7 @@ export interface ToastOptions {
   confirmTo?: RouteLocationRaw
   confirmIcon?: string
   confirmColor?: ThemeColorType
+  actionsSize?: Size
   cancelLabel?: string
   locked?: boolean
   closable?: boolean
@@ -36,116 +70,253 @@ export interface ToastOptions {
   componentProps?: Record<string, unknown>
 }
 
+/**
+ * A toast has to show something. Requiring one of the three content fields
+ * here means an empty toast is a type error rather than an empty white box.
+ */
+export type ToastContent =
+  | { message: string }
+  | { messageComponent: Component }
+  | { title: string }
+  | { component: Component }
+
+export type ToastOptions = ToastBaseOptions & ToastContent
+
+/**
+ * The caller's options as the store keeps them: `time` has been resolved to
+ * milliseconds, so nothing downstream has to handle the `true` shorthand.
+ */
+type StoredToastOptions = Omit<ToastBaseOptions, 'time'> & { time?: number }
+
+/**
+ * A toast on screen: what the caller asked for, kept in `options`, plus the
+ * bookkeeping the store needs alongside it. They stay apart so `LayoutToasts`
+ * can hand the component the options without the timer handle and the event
+ * hooks falling through onto the DOM.
+ */
 interface ToastItem {
   id: PropertyKey
-  message: string
-  title?: string
-  info?: string
-  type?: ThemeColorType
-  icon?: string
-  time?: number
-  locked?: boolean
-  progessIndeterminate?: boolean
+  options: StoredToastOptions
   closeTimer: any
+  // The pointer is resting on this toast, so it must not be given a timer
+  // back when the visible window is recomputed.
+  paused: boolean
+  // When the current run of the close timer started. The progress bar animation
+  // is component state, so without this it has no way to observe a restart.
+  timerStartedAt: number
   confirmEventHook: EventHook
   cancelEventHook: EventHook
 }
 
-const toasts = ref<ToastItem[]>([])
+/**
+ * `true` picks the per-type default; a number is used as-is; `false` (or
+ * unset) means no auto-close — normalized to undefined so the timer is never
+ * started, and so nothing downstream has to divide a boolean by 1000.
+ */
+function resolveTime(time: ToastBaseOptions['time'], type: ThemeColorType): number | undefined {
+  const typeWithTimer = type === 'success' || type === 'info'
+
+  return time === true
+    ? (typeWithTimer ? DEFAULT_TIMER_DURATION_PER_TYPE[type] : undefined)
+    : (typeof time === 'number' ? time : undefined)
+}
+
+// Cast past `UnwrapRef`, which mangles the `Component` in `options` into a
+// shape that no longer matches ToastItem. Nothing here holds a nested ref, so
+// the unwrapped type and the declared one are the same at runtime.
+const toasts = ref<ToastItem[]>([]) as Ref<ToastItem[]>
 
-export function useToasts () {
+export function useToasts() {
   return {
     toasts,
-    closeToast,
     openToast,
+    updateToast,
+    restartToast,
+    closeToast,
     cancelCloseTimer,
   }
 }
 
-export function openToast (options: ToastOptions) {
-  let id: PropertyKey
-  let item = toasts.value.find(item => item.id === options.id)
-  const confirmEventHook = createEventHook<void>()
-  const cancelEventHook = createEventHook<void>()
-
-  if (item) {
-    id = item.id
-    Object.assign(item, {
-      ...options,
-    })
-
-    const restartTimer = options.id && Object.keys(options).length === 1
-    if (restartTimer) {
-      startTimer(item)
-    }
-  } else {
-    id = options.id ?? uid++
-
-    const type = options.type || 'info'
-    const typeWithTimer = type === 'success' || type === 'info'
-    // `true` picks the per-type default; a number is used as-is; `false`
-    // (or unset) means no auto-close — normalized to undefined so the timer
-    // is never started.
-    const time = options.time === true
-      ? (typeWithTimer ? DEFAULT_TIMER_DURATION_PER_TYPE[type] : undefined)
-      : (typeof options.time === 'number' ? options.time : undefined)
-    item = {
-      ...options,
-      id,
-      closeTimer: null,
-      confirmEventHook,
-      cancelEventHook,
-      time,
-      type,
-    }
-
-    toasts.value.push(item)
+/** What a caller gets back for the toast it just opened or patched. */
+interface ToastHandle {
+  id: PropertyKey
+  close: () => void
+  onConfirm: EventHook['on']
+  onCancel: EventHook['on']
+}
 
-    startTimer(item)
-  }
+function toastHandle(item: ToastItem): ToastHandle {
+  const { id } = item
 
   return {
     id,
     close: () => {
       closeToast(id)
     },
-    onConfirm: confirmEventHook.on,
-    onCancel: cancelEventHook.on,
+    // Read off the item, so a patched toast hands back the hooks it was
+    // opened with rather than a fresh pair nothing would ever trigger.
+    onConfirm: item.confirmEventHook.on,
+    onCancel: item.cancelEventHook.on,
+  }
+}
+
+/**
+ * The store is a deep ref, so a component definition kept in it would be
+ * proxied on every render — Vue warns about exactly that.
+ */
+function withRawComponents<T extends ToastBaseOptions>(options: T): T {
+  const { component, messageComponent } = options
+
+  return {
+    ...options,
+    ...(component && { component: markRaw(component) }),
+    ...(messageComponent && { messageComponent: markRaw(messageComponent) }),
   }
 }
 
-export function closeToast (id: PropertyKey) {
+function applyPatch(item: ToastItem, patch: Omit<ToastBaseOptions, 'id'>) {
+  const { time, ...rest } = patch
+  Object.assign(item.options, withRawComponents(rest))
+
+  // Patching goes through the same normalization as opening, so the store only
+  // ever holds milliseconds and the progress bar never divides a boolean.
+  if (time !== undefined) {
+    item.options.time = resolveTime(time, item.options.type ?? 'info')
+  }
+}
+
+/**
+ * Opens a toast. An `id` is an identity, so opening one that is already on
+ * screen patches it in place instead of stacking a second copy — that is what
+ * the room's per-user and per-link toasts rely on. It does not restart the
+ * close timer; call `restartToast` for that.
+ */
+export function openToast(options: ToastOptions): ToastHandle {
+  const open = toasts.value.find(item => item.id === options.id)
+  if (open) {
+    // Re-opening is a fresh occurrence of the same identity, and the caller is
+    // about to bind the handlers for it. Without dropping the previous ones,
+    // every re-open leaves another subscriber on hooks nothing ever clears.
+    open.confirmEventHook.clear()
+    open.cancelEventHook.clear()
+    applyPatch(open, options)
+
+    return toastHandle(open)
+  }
+
+  const type = options.type || 'info'
+  const id = options.id ?? uid++
+  const item: ToastItem = {
+    id,
+    options: {
+      ...withRawComponents(options),
+      id,
+      type,
+      time: resolveTime(options.time, type),
+    },
+    closeTimer: null,
+    paused: false,
+    timerStartedAt: 0,
+    // Created with the toast, not on every call, so the hooks outlive a patch.
+    confirmEventHook: createEventHook<void>(),
+    cancelEventHook: createEventHook<void>(),
+  }
+
+  toasts.value.push(item)
+  syncTimers()
+
+  return toastHandle(item)
+}
+
+/**
+ * Patches an open toast. Unlike `openToast` it needs no content, so a caller
+ * can change one field. Returns undefined if the toast has already closed.
+ */
+export function updateToast(id: PropertyKey, patch: Omit<ToastBaseOptions, 'id'>): ToastHandle | undefined {
+  const item = toasts.value.find(item => item.id === id)
+  if (!item) return
+
+  applyPatch(item, patch)
+
+  return toastHandle(item)
+}
+
+/** Runs the close timer again from zero, e.g. when the pointer leaves. */
+export function restartToast(id: PropertyKey) {
+  const item = toasts.value.find(item => item.id === id)
+  if (!item) return
+
+  item.paused = false
+  startTimer(item)
+}
+
+export function closeToast(id: PropertyKey) {
   const item = toasts.value.find(item => item.id === id)
   if (item) {
-    clearTimeout(item.closeTimer)
+    stopTimer(item)
     removeToast(id)
+    // Closing one frees a slot, so whatever was queued behind it can start
+    // counting down now that it is on screen.
+    syncTimers()
   }
 }
 
-export function cancelCloseTimer (id: PropertyKey) {
+export function cancelCloseTimer(id: PropertyKey) {
   const item = toasts.value.find(item => item.id === id)
   if (item) {
-    clearTimeout(item.closeTimer)
+    item.paused = true
+    stopTimer(item)
   }
 }
 
-export function resetToasts () {
+export function resetToasts() {
+  toasts.value.forEach(stopTimer)
   toasts.value = []
 }
 
-function removeToast (id: PropertyKey) {
+function removeToast(id: PropertyKey) {
   const index = toasts.value.findIndex(item => item.id === id)
   if (index !== -1) {
     toasts.value.splice(index, 1)
   }
 }
 
-function startTimer (item: ToastItem): void {
-  if (item.time) {
+/**
+ * Gives a close timer to every toast on screen and takes it away from the ones
+ * queued behind them. Without this a queued toast counts down while nothing is
+ * rendered and can be removed before it is ever seen.
+ */
+function syncTimers(): void {
+  toasts.value.forEach((item, index) => {
+    const onScreen = index < MAX_ITEMS_DISPLAYED
+
+    if (!onScreen || item.paused) {
+      stopTimer(item)
+      return
+    }
+
+    // Guarded so resettling the window never restarts a countdown that is
+    // already running, which would also replay the progress bar.
+    if (!item.closeTimer) startTimer(item)
+  })
+}
+
+function stopTimer(item: ToastItem): void {
+  clearTimeout(item.closeTimer)
+  item.closeTimer = null
+}
+
+function startTimer(item: ToastItem): void {
+  // Idempotent: without this a restart would orphan the previous timeout,
+  // which would go on to close the toast early.
+  stopTimer(item)
+
+  if (item.options.time) {
+    item.timerStartedAt = performance.now()
     item.closeTimer = setTimeout(
       () => {
         closeToast(item.id)
-      }, item.time
+      }, item.options.time
     )
   }
 }

package/src/components/UiActionBar/UiActionBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 import type { ActionBarOrientation, ActionBarPosition, ActionBarSize, ActionBarTooltipSide } from './types'
-import { ACTION_BAR_CONTEXT_KEY } from './types'
+import { ACTION_BAR_CONTEXT_KEY, ACTION_BAR_RAIL_RADIUS } from './types'
 
 interface UiActionBarProps {
   /**
@@ -54,6 +54,7 @@ const SIZE_CLASSES: Record<ActionBarSize, string> = {
 }
 
 const sizeClasses = computed(() => SIZE_CLASSES[props.size])
+const railRadiusClass = computed(() => ACTION_BAR_RAIL_RADIUS[props.size])
 
 // When `position` is set, anchor the bar to an edge of its positioned
 // ancestor. Offsets are inline styles (rem) so any `offset` value works
@@ -86,8 +87,8 @@ const positionStyle = computed<Record<string, string>>(() => {
     :aria-label="ariaLabel"
     :aria-orientation="orientation"
     data-testid="ui-action-bar"
-    class="inline-flex items-center bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg"
-    :class="[sizeClasses, { 'flex-col': isVertical, 'absolute z-10': position }]"
+    class="inline-flex items-center bg-surface-neutral-bg-main border border-container-border shadow-lg"
+    :class="[sizeClasses, railRadiusClass, { 'flex-col': isVertical, 'absolute z-10': position }]"
     :style="positionStyle"
   >
     <slot />

package/src/components/UiActionBar/UiActionBarItem.vue

@@ -11,7 +11,7 @@ import {
 import type { RouteLocationRaw } from 'vue-router'
 import { useIconSize } from '../../composables/useIconSize'
 import type { ActionBarSize } from './types'
-import { ACTION_BAR_CONTEXT_KEY } from './types'
+import { ACTION_BAR_CONTEXT_KEY, ACTION_BAR_ITEM_RADIUS } from './types'
 
 interface UiActionBarItemProps {
   /**
@@ -101,6 +101,9 @@ const iconSizeClass = useIconSize(size)
 const itemClasses = computed(() => [
   props.showLabel ? sizeConfig.value.padded : sizeConfig.value.square,
   sizeConfig.value.text,
+  ACTION_BAR_ITEM_RADIUS[size.value],
+  // Labeled items in a vertical rail stretch so their icons align.
+  props.showLabel && orientation.value === 'vertical' ? 'w-full justify-start' : 'justify-center',
   {
     'bg-actions-neutral-active-overlay': props.active === true,
     'cursor-pointer': !props.disabled,
@@ -134,10 +137,10 @@ function onClick (event: MouseEvent) {
           :aria-label="label"
           :aria-pressed="active"
           :data-testid="testId"
-          class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
+          class="group inline-flex items-center shrink-0 outline-none transition-colors
                text-actions-neutral-idle
                hover:bg-actions-neutral-hover-overlay
-               focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+               focus-visible:focus-ring
                disabled:opacity-50 disabled:cursor-not-allowed"
           :class="itemClasses"
           @click="onClick"
@@ -156,7 +159,7 @@ function onClick (event: MouseEvent) {
           :side="tooltipSide"
           :side-offset="8"
           data-colors-semantic="light"
-          class="inline-flex items-center justify-center gap-1.5 py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg
+          class="inline-flex items-center justify-center gap-1.5 py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-row text-center z-overlay shadow-shadows-drop-shadow-lg
                  data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95"
         >
           {{ label }}
@@ -183,10 +186,10 @@ function onClick (event: MouseEvent) {
     :aria-label="label"
     :aria-pressed="active"
     :data-testid="testId"
-    class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
+    class="group inline-flex items-center shrink-0 outline-none transition-colors
            text-actions-neutral-idle
            hover:bg-actions-neutral-hover-overlay
-           focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+           focus-visible:focus-ring
            disabled:opacity-50 disabled:cursor-not-allowed"
     :class="itemClasses"
     @click="onClick"

package/src/components/UiActionBar/types.ts

@@ -24,3 +24,16 @@ export interface ActionBarContext {
  */
 export const ACTION_BAR_CONTEXT_KEY: InjectionKey<ActionBarContext> =
   Symbol('ui-action-bar-context')
+
+export const ACTION_BAR_RAIL_RADIUS: Record<ActionBarSize, string> = {
+  xs: 'rounded-button-sm',
+  sm: 'rounded-button-sm',
+  md: 'rounded-field-lg',
+}
+
+// Item radius stays concentric with the rail: rail radius minus rail padding and border.
+export const ACTION_BAR_ITEM_RADIUS: Record<ActionBarSize, string> = {
+  xs: 'rounded-[calc(var(--radius-button-sm)_-_3px)]',
+  sm: 'rounded-[calc(var(--radius-button-sm)_-_3px)]',
+  md: 'rounded-[calc(var(--radius-field-lg)_-_5px)]',
+}

package/src/components/UiAvatar/UiAvatar.vue

@@ -4,6 +4,7 @@
     :style="hasBadge ? undefined : customStyle"
     :data-size="size"
     :data-variant="variant"
+    data-testid="ui-avatar"
   >
     <span
       :class="surfaceClasses"
@@ -38,6 +39,9 @@
 <script setup lang="ts">
 import { computed, ref, useSlots, watch } from 'vue'
 
+/** `xs` 24 · `sm` 32 · `md` 40 · `lg` 48 · `xl` 64 · `10xl` 128 */
+export type UiAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '10xl'
+
 interface Props {
   /** Image URL. Initials are shown when missing or when the image fails to load. */
   src?: string | null
@@ -49,7 +53,7 @@ interface Props {
    * Avatar size. Maps to the `--spacing-component-*` tokens:
    * `xs` 24, `sm` 32, `md` 40, `lg` 48, `xl` 64, `10xl` 128.
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '10xl'
+  size?: UiAvatarSize
   /**
    * `default` is light-on-dark (used standalone or inside an avatar list);
    * `more` is the light-grey `+N` chip used by `UiAvatarList` overflow.
@@ -90,7 +94,9 @@ const customStyle = computed(() => {
   if (props.variant === 'more') return undefined
   if (props.src && !imageFailed.value) return undefined
   if (!props.color) return undefined
-  return { backgroundColor: props.color }
+  // A fixed custom color doesn't follow the semantic scope, so the ink must
+  // not either: the invert token would go dark-on-dark in the dark scope.
+  return { backgroundColor: props.color, color: 'white' }
 })
 
 const imageFailed = ref(false)

package/src/components/UiAvatarList/UiAvatarList.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    :class="['ui-avatar-list inline-flex items-center', containerPaddingClass]"
+    :class="['ui-avatar-list inline-flex items-center', cutoutClasses]"
     :data-size="size"
   >
     <div
       v-for="(item, idx) in visibleItems"
       :key="item.id ?? idx"
-      :class="['flex border border-actions-neutral-invert-idle-alpha-strong rounded-full overflow-hidden', overlapClass]"
+      :class="[...ITEM_CLASSES, idx > 0 && overlapClass]"
     >
       <UiAvatar
         :src="item.src"
@@ -18,7 +18,8 @@
     </div>
     <div
       v-if="overflowCount > 0"
-      :class="['flex border border-actions-neutral-invert-idle-alpha-strong rounded-full overflow-hidden', overlapClass]"
+      data-testid="ui-avatar-list-overflow"
+      :class="[...ITEM_CLASSES, visibleItems.length > 0 && overlapClass]"
     >
       <UiAvatar
         :custom-text="`+${overflowCount}`"
@@ -32,6 +33,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import UiAvatar from '../UiAvatar/UiAvatar.vue'
+import type { UiAvatarSize } from '../UiAvatar/UiAvatar.vue'
 
 export interface AvatarListItem {
   id?: string | number
@@ -53,7 +55,7 @@ interface Props {
   /** Maximum visible avatars before showing the `+N` overflow chip. */
   max?: number
   /** Mirrors `UiAvatar`'s size scale. The overlap scales with the size. */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '10xl'
+  size?: UiAvatarSize
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -68,42 +70,71 @@ const visibleItems = computed(() => props.items.slice(0, props.max))
 
 const overflowCount = computed(() => Math.max(0, effectiveTotal.value - props.max))
 
-// Overlap scales with the avatar diameter so larger sizes don't look
-// disproportionately stacked. The container reserves matching right padding so
-// the rightmost avatar is fully visible.
+const ITEM_CLASSES = ['ui-avatar-list__item', 'flex']
+
+// Each avatar after the first is pulled back over its predecessor with a
+// negative inline-start margin. The overlap scales with the diameter so larger
+// sizes don't look disproportionately stacked.
+//
+// The margin deliberately sits on the items after the first, never on the last
+// one. A trailing negative margin would make the root's content box narrower
+// than what it paints, and any host rule that sizes the wrappers against it
+// (DataView tables apply `max-width: 100%` to every `div` in a cell) would then
+// shrink the wrapper and clip the avatar. With the overlap on the leading edge
+// the root is exactly as wide as its content, so such rules are a no-op.
 const overlapClass = computed(() => {
   switch (props.size) {
     case 'sm':
-      return '-mr-2'
+      return '-ms-2'
     case 'md':
-      return '-mr-2.5'
+      return '-ms-2.5'
     case 'lg':
-      return '-mr-3'
+      return '-ms-3'
     case 'xl':
-      return '-mr-4'
+      return '-ms-4'
     case '10xl':
-      return '-mr-8'
+      return '-ms-8'
     case 'xs':
     default:
-      return '-mr-1.5'
+      return '-ms-1.5'
   }
 })
 
-const containerPaddingClass = computed(() => {
+// Every avatar but the last is cut by the next one: a transparent hole the size
+// of the next avatar plus a gap, so the stack reads on any background.
+// `--avatar-step` is the distance between two avatar centres (diameter minus
+// overlap), `--avatar-cutout` the hole radius (half diameter plus a gap of
+// 0.5 spacing unit), both in `--spacing` units like the classes above.
+const cutoutClasses = computed(() => {
   switch (props.size) {
     case 'sm':
-      return 'pr-2'
+      return '[--avatar-step:calc(var(--spacing)*6)] [--avatar-cutout:calc(var(--spacing)*4.5)]'
     case 'md':
-      return 'pr-2.5'
+      return '[--avatar-step:calc(var(--spacing)*7.5)] [--avatar-cutout:calc(var(--spacing)*5.5)]'
     case 'lg':
-      return 'pr-3'
+      return '[--avatar-step:calc(var(--spacing)*9)] [--avatar-cutout:calc(var(--spacing)*6.5)]'
     case 'xl':
-      return 'pr-4'
+      return '[--avatar-step:calc(var(--spacing)*12)] [--avatar-cutout:calc(var(--spacing)*8.5)]'
     case '10xl':
-      return 'pr-8'
+      return '[--avatar-step:calc(var(--spacing)*24)] [--avatar-cutout:calc(var(--spacing)*16.5)]'
     case 'xs':
     default:
-      return 'pr-1.5'
+      return '[--avatar-step:calc(var(--spacing)*4.5)] [--avatar-cutout:calc(var(--spacing)*3.5)]'
   }
 })
 </script>
+
+<style scoped>
+.ui-avatar-list__item:not(:last-child) {
+  --avatar-next: 1;
+  mask-image: radial-gradient(
+    circle at calc(50% + var(--avatar-next) * var(--avatar-step)) 50%,
+    transparent var(--avatar-cutout),
+    var(--color-surface-neutral-bg-main) calc(var(--avatar-cutout) + 0.5px)
+  );
+}
+
+.ui-avatar-list__item:dir(rtl) {
+  --avatar-next: -1;
+}
+</style>

package/src/components/UiBadge/UiBadge.vue

@@ -80,7 +80,7 @@ const badgeClasses = computed(() => {
     'inline-flex',
     'items-center',
     'justify-center',
-    'rounded-2xl',
+    'rounded-full',
     'shrink-0',
     // Only hint interactivity when a tooltip is attached by the consumer.
     props.hasTooltip ? 'cursor-help' : 'cursor-default',