@meistrari/tela-build 1.67.1 → 1.69.0

package/components/tela/combobox/combobox-input.vue

@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         >
             <slot />
         </ComboboxInput>
-        <div v-if="$slots.deleteSearchValue" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
+        <div v-if="$slots.deleteSearchValue" class="absolute inset-y-0 end-0 flex items-center justify-center px-1">
             <slot name="deleteSearchValue" />
         </div>
     </div>

package/components/tela/combobox/combobox.mdx

@@ -173,6 +173,23 @@ const options = [
 />
 ```
 
+### Allow Create
+
+Pins a "create new" action at the top of the list. It is never filtered out by the search — reka-ui registers an item's filter text once on mount, so the row is keyed by the search term to re-register as `textValue` and always match. When the user has typed something, `labelCreateWithSearch` renders the label with that term.
+
+Picking it turns the row into a text input seeded with the current search term instead of closing the list. `create` is emitted with the confirmed name once the user presses Enter or clicks the check, so it never carries an empty name. Escape returns the row to the action.
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="projects"
+  allow-create
+  label-create="Create a new project"
+  :label-create-with-search="(search) => `Create \"${search}\"`"
+  @create="(search) => startCreating(search)"
+/>
+```
+
 ### Disable Portal
 
 ```vue
@@ -318,6 +335,7 @@ The Combobox system consists of these sub-components:
 
 - `update:modelValue` - Emitted when selection changes with new value
 - `select` - Emitted when an option is selected with the value
+- `create` - Emitted with the name typed into the `allow-create` row, once the user confirms it
 
 ## Keyboard Shortcuts
 

package/components/tela/combobox/combobox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component, ComponentPublicInstance, Ref } from 'vue'
-import { useMagicKeys } from '@vueuse/core'
+import { useEventListener, useMagicKeys } from '@vueuse/core'
 
 interface ComboboxOption {
     value: string
@@ -63,6 +63,11 @@ const props = withDefaults(defineProps<{
     labelMultimodal?: string
     labelInputMax?: string
     labelOutputMax?: string
+    allowCreate?: boolean
+    labelCreate?: string
+    labelCreateDescription?: string
+    labelCreateWithSearch?: (search: string) => string
+    labelCreatePlaceholder?: string
 }>(), {
     compact: true,
     align: 'start',
@@ -87,17 +92,27 @@ const props = withDefaults(defineProps<{
     labelMultimodal: 'Multimodal',
     labelInputMax: 'Input max',
     labelOutputMax: 'Output max',
+    allowCreate: false,
+    labelCreate: 'Create new',
+    labelCreatePlaceholder: 'Name',
 })
 
 const emit = defineEmits<{
     'update:modelValue': [value: string]
     'select': [value: string]
+    'create': [search: string]
 }>()
 
+// Per-instance so a consumer-supplied option value can never be mistaken for the synthetic create row.
+const createOptionValue = `__tela-combobox-create__${useId()}`
+
 const selectedTab = ref('all')
 const search = ref('')
 const innerValue = ref<string>('')
 const isOpen = ref(false)
+const isCreating = ref(false)
+const createName = ref('')
+const createInputEl = ref<HTMLInputElement>()
 
 const currentOption = computed(() => {
     if (!innerValue.value && !props.modelValue && props.placeholder) {
@@ -170,7 +185,7 @@ const groupedOptions = computed(() => {
     }
 
     if (!hasGroups.value) {
-        return [{ heading: props.labelOptionsGroup, children: filteredOptions }]
+        return filteredOptions.length ? [{ heading: props.labelOptionsGroup, children: filteredOptions }] : []
     }
 
     const groups: Record<string, typeof filteredOptions> = {}
@@ -193,6 +208,88 @@ const groupedOptions = computed(() => {
 
 const isEmpty = computed(() => groupedOptions.value.every(group => group.children.length === 0))
 
+const showCreateOption = computed(() => props.allowCreate && !isCreating.value && search.value.trim().length > 0 && isEmpty.value)
+
+const createOption = computed(() => {
+    const term = search.value.trim()
+    return {
+        value: createOptionValue,
+        label: term && props.labelCreateWithSearch ? props.labelCreateWithSearch(term) : props.labelCreate,
+    }
+})
+
+let clearSearchOnOpen = false
+
+function startCreating() {
+    createName.value = search.value.trim()
+    isCreating.value = true
+    nextTick(() => createInputEl.value?.focus())
+}
+
+function resetCreating() {
+    isCreating.value = false
+    createName.value = ''
+}
+
+function cancelCreating() {
+    if (createInputEl.value && document.activeElement === createInputEl.value) {
+        const searchInput = createInputEl.value.closest('.ComboboxContent')?.querySelector('input')
+        searchInput?.focus()
+    }
+
+    resetCreating()
+}
+
+function confirmCreating() {
+    const name = createName.value.trim()
+    if (!name)
+        return
+
+    clearSearchOnOpen = true
+    isOpen.value = false
+    emit('create', name)
+
+    // Reka refocuses the trigger when the list unmounts; after a keyboard confirm that paints
+    // a focus-visible ring on it, which reads as if the field were still active.
+    nextTick(() => {
+        const active = document.activeElement
+        if (active instanceof HTMLElement && active.getAttribute('aria-haspopup') === 'listbox')
+            active.blur()
+    })
+}
+
+function onCreateKeydown(event: KeyboardEvent) {
+    // The list owns arrow/enter navigation, so the input has to keep its keys to itself.
+    event.stopPropagation()
+
+    if (event.key === 'Enter') {
+        event.preventDefault()
+        confirmCreating()
+    }
+}
+
+// Escape is handled here, at window capture, instead of being left to Reka: TelaModal is a
+// radix-vue Dialog with its own dismissable-layer stack, so both libraries believe they own the
+// top layer and a single Esc would close the list and the modal together. Owning the key while
+// the list is open gives the expected sequence: leave create mode, close the list, close the modal.
+useEventListener(window, 'keydown', (event) => {
+    if (event.key !== 'Escape' || !isOpen.value)
+        return
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+
+    if (isCreating.value)
+        cancelCreating()
+    else
+        onOpenChange(false)
+}, { capture: true })
+
+watch(search, () => {
+    if (isCreating.value)
+        cancelCreating()
+})
+
 const handleDeleteSearchValue = () => search.value = ''
 
 const keys = useMagicKeys()
@@ -261,7 +358,15 @@ function updateSubmenuPosition(itemValue: string) {
 
 function onOpenChange(open: boolean) {
     isOpen.value = open
-    if (!open) {
+
+    if (open) {
+        resetCreating()
+        if (clearSearchOnOpen) {
+            search.value = ''
+            clearSearchOnOpen = false
+        }
+    }
+    else {
         expandedItem.value = null
     }
 }
@@ -287,6 +392,11 @@ function handleChildSelect(child: ComboboxOption, event: Event) {
 
 function handleSelect(option: any) {
     const value = typeof option === 'string' ? option : option?.value
+    if (value === createOptionValue) {
+        innerValue.value = ''
+        startCreating()
+        return
+    }
     const found = props.options.find(o => o.value === value)
     if (found?.children?.length)
         return
@@ -299,7 +409,7 @@ watch(innerValue, (raw) => {
         return
 
     const value = typeof raw === 'string' ? raw : (raw as any)?.value
-    if (!value)
+    if (!value || value === createOptionValue)
         return
 
     const option = props.options.find(o => o.value === value)
@@ -355,7 +465,16 @@ watch(innerValue, (raw) => {
                 v-if="hasSearchbar"
                 v-model="search"
                 :placeholder="inputPlaceholder || labelSearchPlaceholder"
-            />
+            >
+                <template v-if="allowCreate && !isCreating" #deleteSearchValue>
+                    <TelaIconButton
+                        icon="i-ph-plus"
+                        size="sm"
+                        color="secondary"
+                        @click="startCreating"
+                    />
+                </template>
+            </TelaComboboxInput>
             <TelaTabsRoot v-if="hasTabs" v-model="selectedTab">
                 <TelaTabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
                     <TelaTabsIndicator />
@@ -365,8 +484,58 @@ watch(innerValue, (raw) => {
                 </TelaTabsList>
             </TelaTabsRoot>
             <div :class="cn('max-h-262px overflow-y-auto no-scrollbar', hasTabs && 'pt-2')">
+                <div v-if="isCreating || showCreateOption" :class="cn('px-4px pt-4px', isEmpty && 'pb-4px')">
+                    <div
+                        v-if="isCreating"
+                        flex items-center h-36px rounded-12px
+                        :class="cn(
+                            'outline-solid outline-[1px] outline-offset-[-1px] outline-border',
+                            !compact && 'px-6px',
+                            compact ? 'gap-2' : 'gap-1.5',
+                        )"
+                    >
+                        <div w-5 h-5 shrink-0 flex items-center justify-center>
+                            <TelaIcon name="i-ph-plus" color="icon-tertiary" />
+                        </div>
+                        <input
+                            ref="createInputEl"
+                            v-model="createName"
+                            :placeholder="labelCreatePlaceholder"
+                            min-w-0 flex-1 bg-transparent text-primary outline-none
+                            placeholder:text-tertiary
+                            :class="compact ? 'body-12-regular font-540' : 'body-14-regular'"
+                            @keydown="onCreateKeydown"
+                        >
+                        <TelaIconButton
+                            icon="i-ph-check"
+                            size="xs"
+                            :disabled="!createName.trim()"
+                            @click="confirmCreating"
+                        />
+                    </div>
+                    <TelaComboboxItem
+                        v-else-if="showCreateOption"
+                        :key="search"
+                        :value="createOption"
+                        :text-value="search"
+                        :class="cn('py-2', !compact && '!px-1.5')"
+                        @select="(e) => { e.preventDefault(); startCreating() }"
+                    >
+                        <div flex items-center min-w-0 :class="compact ? 'gap-2' : 'gap-1.5'">
+                            <div w-5 h-5 shrink-0 flex items-center justify-center>
+                                <TelaIcon name="i-ph-plus" color="icon-tertiary" />
+                            </div>
+                            <div flex flex-col min-w-0>
+                                <span font-medium truncate text-tertiary :class="cn(compact ? 'text-sm font-540' : 'text-body-14-regular', labelItemClass)">{{ createOption.label }}</span>
+                                <span v-if="labelCreateDescription" font-normal text-sm leading-none text-tertiary truncate :class="descriptionClass">
+                                    {{ labelCreateDescription }}
+                                </span>
+                            </div>
+                        </div>
+                    </TelaComboboxItem>
+                </div>
                 <TelaComboboxEmpty
-                    v-if="isEmpty"
+                    v-if="isEmpty && !showCreateOption && !isCreating"
                     class="flex flex-col items-center justify-center gap-5 px-7"
                 >
                     <div class="flex flex-col items-center justify-center gap-3">
@@ -425,11 +594,11 @@ watch(innerValue, (raw) => {
                                         </div>
                                         <div class="flex flex-col">
                                             <div class="flex items-center gap-1">
-                                                <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
+                                                <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-540' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
                                                 <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
                                                     {{ labelMultimodal }}
                                                 </TelaBadge>
-                                                <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
+                                                <span v-if="item.cost !== undefined" class="text-10px font-540 ml-1px">
                                                     <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
                                                     <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
                                                 </span>
@@ -494,7 +663,7 @@ watch(innerValue, (raw) => {
                                                     <Component :is="child.icon" v-else />
                                                 </div>
                                                 <div class="flex flex-col">
-                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
+                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-540' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
                                                     <span v-if="child.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
                                                         {{ child.description }}
                                                     </span>

package/components/tela/icon-button/icon-button.vue

@@ -33,7 +33,7 @@ const style = computed(() => {
     const size = ({
         '3xs': 'text-6px p-1 rounded-8px',
         '2xs': 'text-8px p-4px rounded-4px', // 16px
-        'xs': 'text-12px p-6px rounded-6px', // 26px
+        'xs': 'text-12px p-6px rounded-8px', // 26px
         'sm': 'text-16px p-6px rounded-10px', // 32px
         'md': 'text-20px p-6.4px rounded-10px', // 44px
     } as Record<typeof props.size, string>)[props.size]

package/components/tela/presence/presence-avatars.mdx

@@ -0,0 +1,123 @@
+# TelaPresenceAvatars
+
+Shows who else is currently viewing the same page. Two variants:
+
+- **`pill`** (default): a "N Viewing" count followed by up to `max` overlapping round avatars on a `bg-muted` pill (8px radius, 4px vertical / 10px left / 8px right padding). Hovering the count lists viewer names (up to `tooltipMax`, then a "x more" line).
+- **`avatars`**: just the overlapping avatar stack — no count label, no pill surface — at a larger default size (`xs`, 24px). Meant for page headers (canvas, workflow, agent) where the count pill is too heavy. When more than `max` viewers are present, the last visible avatar gets an 80% `neutral-950` mask with a white "+N" count on top (no extra bubble); hovering it shows the same tooltip as the pill count (up to `tooltipMax` names, then the "x more" line).
+
+Hovering an avatar shows the viewer's name and live status on separate lines: `Viewing now`, or for away viewers a relative time like "3 min ago" when `awaySinceLabel` is provided (falling back to the plain `awayLabel`). All tooltips share one `TelaTooltipGroup`, so moving between triggers skips the open delay instead of re-animating each tooltip. Viewers with `active: false` (page open, tab hidden) render dimmed instead of disappearing. Renders nothing when the viewers list is empty, so mount points need no guards.
+
+Overlapping avatars are separated with a `mask-image` radial-gradient (the tags-select dot technique): each avatar except the last carves a transparent 2px crescent where the next avatar overlaps, so the gap shows whatever is behind the stack instead of a hardcoded ring color. Overlap scales with avatar size (16px→4px, 24px→6px, 32px→8px, 40px→10px).
+
+Pair it with the `usePresence` composable, which joins a Yjs awareness room over websockets (channel switching, hard stop on repeated connection failures) and exposes the other viewers as `PresenceViewer[]` — deduped per user across tabs, sorted with active viewers first, then by join time, so people who tab away drop to the back of the stack and active viewers hold the visible slots. The connection stays open while the tab is hidden; the composable publishes `active: false` so peers dim and demote the avatar rather than dropping it. The consuming app provides the websocket `url`, the auth `getToken`, and the local `self` identity.
+
+The component is i18n-free: pass pre-translated `countLabel`, `viewingLabel`, `awayLabel`, and `moreLabel` strings, and the `awaySinceLabel` formatter, from the app layer.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaPresenceAvatars
+  :viewers="[
+    { name: 'Ada Lovelace', email: 'ada@example.com', image: 'https://example.com/ada.jpg' },
+    { name: 'Grace Hopper', email: 'grace@example.com' },
+  ]"
+  count-label="2 Viewing"
+/>
+```
+
+### Avatars-only variant
+
+No count label, no pill chrome, larger avatars (defaults to `xs` / 24px). Used inside canvas, workflow, and agent headers. Overflow beyond `max` darkens the last visible avatar with an 80% mask and a "+N" count, with the name-list tooltip on hover.
+
+```vue
+<TelaPresenceAvatars
+  variant="avatars"
+  :viewers="others"
+  label="Viewing this canvas"
+/>
+```
+
+### Away viewers
+
+A viewer with `active: false` renders at reduced opacity, moves behind the active viewers (`usePresence` sorts active-first), and their tooltip status switches to `awaySinceLabel(viewer.awaySince)` (e.g. "3 min ago") or the `awayLabel` when no timestamp/formatter is available. `usePresence` publishes `awaySince` when the tab goes hidden and clears it on return; pass a formatter that reads a reactive clock (e.g. `useNow`) so the label stays fresh while the tooltip is open.
+
+```vue
+<TelaPresenceAvatars
+  :viewers="[
+    { name: 'Ada Lovelace', email: 'ada@example.com' },
+    { name: 'Grace Hopper', email: 'grace@example.com', active: false },
+  ]"
+  count-label="2 Viewing"
+  viewing-label="Viewing now"
+  away-label="Away"
+/>
+```
+
+### Overflow
+
+Only the first `max` viewers render as avatars (priority to active viewers, then the earliest joiners — the input order). The count tooltip lists up to `tooltipMax` emails, then a final "x more" line built with `moreLabel`.
+
+```vue
+<TelaPresenceAvatars
+  :viewers="manyViewers"
+  :max="3"
+  :tooltip-max="7"
+  count-label="9 Viewing"
+  :more-label="count => `${count} more`"
+/>
+```
+
+### With usePresence
+
+The composable joins the live-collaboration room for the channel; `others` is already sorted (active first, then join time) and feeds straight into the component.
+
+```ts
+const { others } = usePresence({
+  channel: computed(() => `prompt:${route.params.promptId}`),
+  url: 'wss://collab.example.com',
+  self: computed(() => ({ id: user.id, email: user.email, name: user.name, image: user.image })),
+  getToken: async () => await auth.getToken(),
+})
+```
+
+```vue
+<TelaPresenceAvatars
+  :viewers="others"
+  :count-label="`${others.length} Viewing`"
+  label="Viewing this canvas"
+/>
+```
+
+## Props
+
+| Prop           | Type                                                                                        | Default               | Description                                                              |
+| -------------- | ------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------ |
+| `viewers`      | `{ name?: string, email?: string, image?: string, active?: boolean, joinedAt?: number \| null }[]` | required      | The other people in the room, pre-sorted (`usePresence` output)          |
+| `max`          | `number`                                                                                    | `3`                   | Visible avatar slots                                                     |
+| `tooltipMax`   | `number`                                                                                    | `7`                   | Names listed in the count tooltip before the "x more" line               |
+| `variant`      | `'pill' \| 'avatars'`                                                                       | `'pill'`              | `pill` shows the count on a muted surface; `avatars` is just the stack   |
+| `size`         | `'2xs' \| 'xs' \| 'sm' \| 'md'`                                                             | `'2xs'` pill / `'xs'` avatars | Avatar size                                                      |
+| `label`        | `string`                                                                                    | `'Viewing this page'` | aria-label suffix; pass a translated string                              |
+| `countLabel`   | `string`                                                                                    | viewer count          | Pre-translated count text, e.g. "3 Viewing" (pill variant only)          |
+| `viewingLabel` | `string`                                                                                    | `'Viewing now'`       | Status word in the avatar tooltip for active viewers                     |
+| `awayLabel`    | `string`                                                                                    | `'Away'`              | Status word in the avatar tooltip for hidden-tab viewers                 |
+| `awaySinceLabel` | `(awaySince: number) => string`                                                           | —                     | Formats the away timestamp (e.g. "3 min ago"); falls back to `awayLabel` |
+| `moreLabel`    | `(count: number) => string`                                                                 | `` count => `${count} more` `` | Builds the overflow line in the count tooltip                    |
+
+## Features
+
+- Pill variant surface: `bg-muted`, 8px radius, 4px vertical / 10px left / 8px right padding, `body-12-medium` count text
+- Overlapping avatars separated by a mask-carved 2px transparent crescent (no hardcoded ring color), overlap proportional to avatar size
+- Falls back to initials when a viewer has no image (via `TelaAvatar`)
+- Count tooltip lists viewer names (capped at `tooltipMax` + "x more"); avatar tooltip stacks the name and Viewing/Away status on separate lines
+- Shared `TelaTooltipGroup`: hovering across triggers skips the tooltip delay/animation
+- Away viewers (`active: false`) dim the avatar to 50% with a 160ms transition and reorder to the back of the stack instead of leaving
+- Subtle 160ms enter/leave/move transitions when viewers join, drop off, or reorder
+- Empty viewers list renders nothing
+
+## Accessibility
+
+- Container exposes `role="group"` with an `aria-label` of `"{count} {label}"`
+- Each avatar's accessible name comes from its `alt` (viewer name or email)

package/components/tela/presence/presence-avatars.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+export type PresenceAvatarSize = '2xs' | 'xs' | 'sm' | 'md'
+export type PresenceAvatarsVariant = 'pill' | 'avatars'
+
+export interface PresenceAvatarViewer {
+    name?: string
+    email?: string
+    image?: string
+    active?: boolean
+    joinedAt?: number | null
+    awaySince?: number | null
+}
+
+const props = withDefaults(defineProps<{
+    viewers: PresenceAvatarViewer[]
+    max?: number
+    tooltipMax?: number
+    size?: PresenceAvatarSize
+    variant?: PresenceAvatarsVariant
+    label?: string
+    countLabel?: string
+    viewingLabel?: string
+    awayLabel?: string
+    awaySinceLabel?: (awaySince: number) => string
+    moreLabel?: (count: number) => string
+}>(), {
+    max: 3,
+    tooltipMax: 7,
+    variant: 'pill',
+    label: 'Viewing this page',
+    viewingLabel: 'Viewing now',
+    awayLabel: 'Away',
+    moreLabel: (count: number) => `${count} more`,
+})
+
+const STACK_METRICS: Record<PresenceAvatarSize, { size: number, overlap: number, fontSize: number }> = {
+    '2xs': { size: 16, overlap: 4, fontSize: 8 },
+    'xs': { size: 24, overlap: 6, fontSize: 10 },
+    'sm': { size: 32, overlap: 8, fontSize: 12 },
+    'md': { size: 40, overlap: 10, fontSize: 14 },
+}
+
+const resolvedSize = computed<PresenceAvatarSize>(() => props.size ?? (props.variant === 'avatars' ? 'xs' : '2xs'))
+
+// Overlapped avatars get a crescent carved out with a mask (same technique as
+// tags-select dots): the mask circle is centered on the next avatar's center,
+// with a 2px ring of transparency around it.
+const stackStyle = computed(() => {
+    const { size, overlap } = STACK_METRICS[resolvedSize.value]
+    return {
+        '--presence-overlap': `${overlap}px`,
+        '--presence-mask-radius': `${size / 2 + 2}px`,
+        '--presence-mask-x': `calc(100% + ${size / 2 - overlap}px)`,
+    }
+})
+
+const visibleViewers = computed(() => props.viewers.slice(0, props.max))
+const tooltipViewers = computed(() => props.viewers.slice(0, props.tooltipMax))
+const hiddenTooltipCount = computed(() => Math.max(props.viewers.length - props.tooltipMax, 0))
+const resolvedCountLabel = computed(() => props.countLabel ?? `${props.viewers.length}`)
+
+const overflowCount = computed(() => props.variant === 'avatars' ? Math.max(props.viewers.length - props.max, 0) : 0)
+
+const overflowTextStyle = computed(() => ({ fontSize: `${STACK_METRICS[resolvedSize.value].fontSize}px` }))
+
+function isOverflowSlot(index: number) {
+    return overflowCount.value > 0 && index === visibleViewers.value.length - 1
+}
+
+function isActive(viewer: PresenceAvatarViewer) {
+    return viewer.active !== false
+}
+
+function displayName(viewer: PresenceAvatarViewer) {
+    return viewer.name || viewer.email || 'Unknown'
+}
+
+function viewerKey(viewer: PresenceAvatarViewer, index: number) {
+    return viewer.email || viewer.name || `viewer-${index}`
+}
+
+function statusLabel(viewer: PresenceAvatarViewer) {
+    if (isActive(viewer))
+        return props.viewingLabel
+    if (viewer.awaySince != null && props.awaySinceLabel)
+        return props.awaySinceLabel(viewer.awaySince)
+    return props.awayLabel
+}
+</script>
+
+<template>
+    <TelaTooltipGroup v-if="viewers.length > 0">
+        <div
+            role="group"
+            :aria-label="`${viewers.length} ${label}`"
+            flex items-center
+            :class="variant === 'pill' ? 'gap-6px rounded-8px bg-muted py-4px pl-10px pr-8px' : ''"
+        >
+            <TelaTooltipGroupTrigger v-if="variant === 'pill'" side="bottom" trigger-class="flex">
+                <span body-12-medium text-primary leading-16px>{{ resolvedCountLabel }}</span>
+                <template #content>
+                    <div flex="~ col" gap-4px text-left>
+                        <p
+                            v-for="(viewer, index) in tooltipViewers"
+                            :key="viewerKey(viewer, index)"
+                            body-12-regular text-white leading-16px
+                        >
+                            {{ displayName(viewer) }}
+                        </p>
+                        <p v-if="hiddenTooltipCount > 0" body-12-regular text-white leading-16px>
+                            {{ moreLabel(hiddenTooltipCount) }}
+                        </p>
+                    </div>
+                </template>
+            </TelaTooltipGroupTrigger>
+
+            <TransitionGroup name="tela-presence" tag="div" flex items-center :style="stackStyle">
+                <div
+                    v-for="(viewer, index) in visibleViewers"
+                    :key="viewerKey(viewer, index)"
+                    class="tela-presence-avatar"
+                    flex
+                >
+                    <TelaTooltipGroupTrigger side="bottom" trigger-class="flex">
+                        <div relative flex>
+                            <TelaAvatar
+                                :image="viewer.image"
+                                :alt="displayName(viewer)"
+                                :size="resolvedSize"
+                                rounded-full transition-opacity duration-160 ease-out
+                                :class="isActive(viewer) || isOverflowSlot(index) ? '' : 'op-50'"
+                            />
+                            <div
+                                v-if="isOverflowSlot(index)"
+                                absolute inset-0 rounded-full
+                                class="bg-neutral-950/80"
+                                flex items-center justify-center
+                                text-white font-500 leading-none select-none
+                                :style="overflowTextStyle"
+                            >
+                                +{{ overflowCount }}
+                            </div>
+                        </div>
+                        <template #content>
+                            <div v-if="isOverflowSlot(index)" flex="~ col" gap-4px text-left>
+                                <p
+                                    v-for="(tooltipViewer, tooltipIndex) in tooltipViewers"
+                                    :key="viewerKey(tooltipViewer, tooltipIndex)"
+                                    body-12-regular text-white leading-16px
+                                >
+                                    {{ displayName(tooltipViewer) }}
+                                </p>
+                                <p v-if="hiddenTooltipCount > 0" body-12-regular text-white leading-16px>
+                                    {{ moreLabel(hiddenTooltipCount) }}
+                                </p>
+                            </div>
+                            <div v-else flex="~ col" gap-2px text-left>
+                                <span body-12-medium text-white>{{ displayName(viewer) }}</span>
+                                <span body-12-regular text-neutral-200>{{ statusLabel(viewer) }}</span>
+                            </div>
+                        </template>
+                    </TelaTooltipGroupTrigger>
+                </div>
+            </TransitionGroup>
+        </div>
+    </TelaTooltipGroup>
+</template>
+
+<style scoped>
+.tela-presence-avatar:not(:first-child) {
+    margin-left: calc(var(--presence-overlap) * -1);
+}
+
+.tela-presence-avatar:not(:last-child) {
+    mask-image: radial-gradient(circle var(--presence-mask-radius) at var(--presence-mask-x) center, transparent var(--presence-mask-radius), #fff var(--presence-mask-radius));
+}
+
+.tela-presence-enter-active,
+.tela-presence-leave-active {
+    transition: opacity 160ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 160ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.tela-presence-enter-from,
+.tela-presence-leave-to {
+    opacity: 0;
+    transform: scale(0.8);
+}
+
+.tela-presence-move {
+    transition: transform 160ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+</style>

package/components/tela/tooltip-group/tooltip-group-trigger.vue

@@ -19,6 +19,7 @@ export type TooltipProps = {
     title?: string
     description?: string
     disableClosingTrigger?: boolean
+    triggerClass?: string
 }
 
 const props = withDefaults(defineProps<TooltipProps>(), {
@@ -54,7 +55,7 @@ const variantClasses = computed(() => {
 
 <template>
     <TelaTooltipRoot v-bind="tooltipRootProps">
-        <TelaTooltipTrigger>
+        <TelaTooltipTrigger :class="triggerClass">
             <slot />
         </TelaTooltipTrigger>
         <TelaTooltipContent