@meistrari/tela-build 1.72.0 → 1.74.0

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 Latest updates and announcements.
 
+## September 18, 2026
+
+- [Floating chat](/templates/chat) adds `closeOnOutsideClick` (default `true`); set it to `false` to keep the window open while using the surrounding page.
+
+## September 17, 2026
+
+- [Chat Answer](/templates/chat#answer) option descriptions now use the single-line tooltip. It wraps the option label and opens to the label's right on hover (0.5s) or keyboard focus, instead of above it.
+
+- [Tooltip](/components/tooltip): new `asChild` prop merges the trigger into the slotted element instead of wrapping it in a button, and `reference` anchors the tooltip to another element. An `open` value set after mount now takes effect; leaving it `undefined` keeps hover and focus in charge.
+- [Kbd](/components/kbd) is now a fixed 16×16px key with 10px text, a 5px radius and `bg-muted` / `text-secondary` colors. The glyph is nudged half a pixel so it sits vertically centered, and the key resets inherited letter-spacing so it is horizontally centered too.
+- [Chat Answer](/templates/chat#answer) shows single-choice shortcuts (A/B/C) with `TelaKbd` instead of a `TelaBadge`, so the key stays visible on hovered and selected rows.
+- [Chat Answer](/templates/chat#answer) single-choice rows now match multiple-choice rows: 34px tall, 8px radius, 10px inset, muted background on hover and selection, and no selection outline.
+- [Chat Answer](/templates/chat#answer) single and multiple-choice options share one tooltip spec: the whole row (including the checkbox) triggers the description after 0.5s, anchored to the option label. From a checkbox only keyboard focus opens it, so clicking an option no longer pins the tooltip open.
+
+- [Chat Answer](/templates/chat#answer) exposes multiple-choice descriptions on checkbox focus and associates them with checkboxes for screen readers.
+
+- [Chat Answer](/templates/chat#answer) shows option descriptions in left-aligned tooltips after a 0.5-second hover, with arrows centered on the option text, keeping option rows compact.
+- [Chat history](/templates/chat) shows an empty state when there are no conversations.
+
+- [Chat Answer](/templates/chat#answer) limits single-choice shortcuts to A/B/C and leaves repeated key events untouched.
+
+- [Chat Answer](/templates/chat#answer) displays single-choice shortcuts as 16×16px filled `TelaBadge` indicators with 9px letters, a muted background and neutral-500 text.
+
+- [Chat Answer](/templates/chat#answer) uses 16px secondary-colored header icons and lets users click anywhere on the collapsed header to expand it; dismiss remains independent. Expanding restores keyboard focus so option shortcuts work immediately.
+
+- [Chat Answer](/templates/chat#answer) now uses standard Tela Build typography, compact controls, keyboard badges, and utility-based spacing instead of custom scoped CSS.
+
+- **Dropdown menu spacing.** Items with tooltips now use the same icon-to-label gap as other items. See [Dropdown menu](/components/dropdown-menu).
+
 ## September 16, 2026
 
 ### Square Loader
@@ -22,6 +51,11 @@ Latest updates and announcements.
 - **New `TelaChatAnimateEnter`.** Enter/exit preset (fade, slide, slight scale) for the prompt input and stop button; `TelaChatBody` docks the wrapper when it holds a docked surface. Props: `offset`, `scale`, `duration`. It reuses the prompt input's dock, so the conversation padding and scrollbar inset stay correct. See [Chat → Stop Run](/templates/chat#stop-run).
 - **`TelaChatMessage` stacks its children with an 8px gap.** A running turn can hold the indicator plus a `TelaChatTextShimmer` or reasoning trace in one message; single-child messages are unaffected.
 
+### Chat: Answer widget
+
+- [Chat Answer](/templates/chat#answer): choice-only questions; typed answers belong in normal chat. Multiselect uses checkboxes without letter badges or shortcuts.
+- [Chat bodies](/templates/chat) can pin and measure a widget/composer stack together, leaving space between the card and input.
+
 ## September 15, 2026
 
 ### Chat: Floating window

package/components/tela/avatar/label/avatar-label.mdx

@@ -7,6 +7,8 @@ import * as AvatarLabelStories from './avatar-label.stories.ts';
 
 An inline avatar + text chip. Pairs a `TelaAvatar` with a text label so any "entity reference" (created-by, assigned-to, owner, reviewer, member, etc.) renders consistently across summary rows, list cells, and metadata strips. The component is named after its **shape**, not a role — pick the role at the call site via the `label`.
 
+The avatar retains its configured size in narrow containers. The label stays on one line and truncates with an ellipsis when space is limited; hover the component to read the full label.
+
 ## Examples
 
 ### Basic Usage

package/components/tela/avatar/label/avatar-label.vue

@@ -14,15 +14,37 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <div flex items-center gap-4px>
+    <div class="avatar-label" :title="label">
         <TelaAvatar
+            class="avatar-label-image"
             :size="avatarSize"
-            :src="avatarSrc"
+            :image="avatarSrc"
             :alt="avatarAlt ?? label"
             rounded-full
         />
-        <p body-12-regular text-secondary>
+        <p class="avatar-label-text" body-12-regular text-secondary>
             {{ label }}
         </p>
     </div>
 </template>
+
+<style scoped>
+.avatar-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.avatar-label-image {
+    flex: none;
+}
+
+.avatar-label-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

package/components/tela/chat/answer/answer.test.ts

@@ -0,0 +1,251 @@
+import { compileFunction } from 'node:vm'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { compileScript, parse } from '@vue/compiler-sfc'
+import { transpileModule, ModuleKind, ScriptTarget } from 'typescript'
+import * as Vue from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import { cn } from '../../../../utils/component-utils'
+
+// Compile the real SFCs with Nuxt's Vue auto-imports, using a DOM-free renderer.
+function loadComponent(name: string, imports: Record<string, unknown> = {}) {
+    const filename = resolve(__dirname, name)
+    const source = readFileSync(filename, 'utf8').replace('<script setup lang="ts">', '<script setup lang="ts">\nimport { inject, provide, ref, shallowRef, computed, reactive, watch, watchEffect, useId, unref, nextTick } from "vue"\nimport { cn } from "cn"')
+    const { descriptor } = parse(source, { filename })
+    const compiled = compileScript(descriptor, { id: name, inlineTemplate: true })
+    const code = transpileModule(compiled.content, { compilerOptions: { module: ModuleKind.CommonJS, target: ScriptTarget.ES2022 } }).outputText
+    const dependencies: Record<string, unknown> = { vue: Vue, cn: { cn }, ...imports }
+    const module = { exports: {} as { default?: Vue.Component } }
+    const execute = compileFunction(code, ['require', 'module', 'exports'], { filename }) as (require: (id: string) => unknown, module: unknown, exports: unknown) => void
+    execute((id: string) => {
+        if (!(id in dependencies))
+            throw new Error(`Unexpected import: ${id}`)
+        return dependencies[id]
+    }, module, module.exports)
+    return module.exports.default!
+}
+
+const Widget = loadComponent('answer.vue')
+type Node = { contains: (target: unknown) => boolean, tag: string, props: Record<string, unknown>, children: Node[], style: { display: string }, parent?: Node, text?: string, focus: () => void, closest: (selector: string) => Node | null, addEventListener: (name: string, handler: unknown) => void, removeEventListener: (name: string, handler: unknown) => void }
+function node(tag: string): Node {
+    return {
+        tag,
+        props: {},
+        children: [],
+        style: { display: '' },
+        focus: () => {},
+        contains(target) {
+            return target === this || this.children.some(child => child.contains(target))
+        },
+        closest(selector) {
+            if ('data-chat-message-list' in this.props)
+                return this
+            return this.parent?.closest(selector) ?? null
+        },
+        addEventListener(name, handler) { this.props[`listener:${name}`] = handler },
+        removeEventListener(name, handler) {
+            if (this.props[`listener:${name}`] === handler)
+                delete this.props[`listener:${name}`]
+        },
+    }
+}
+const renderer = Vue.createRenderer<Node, Node>({
+    createElement: node,
+    createText: text => ({ ...node('#text'), text }),
+    createComment: text => ({ ...node('#comment'), text }),
+    setText: (el, text) => { el.text = text },
+    setElementText: (el, text) => { el.text = text },
+    patchProp: (el, key, _old, value) => { el.props[key] = value },
+    parentNode: el => el.parent ?? null,
+    nextSibling: el => el.parent?.children[el.parent.children.indexOf(el) + 1] ?? null,
+    insert(el, parent, anchor) {
+        el.parent = parent
+        const index = anchor ? parent.children.indexOf(anchor) : -1
+        if (index < 0)
+            parent.children.push(el)
+        else parent.children.splice(index, 0, el)
+    },
+    remove(el) {
+        if (el.parent)
+            el.parent.children.splice(el.parent.children.indexOf(el), 1)
+    },
+})
+function all(root: Node, tag: string): Node[] {
+    return [...(root.tag === tag ? [root] : []), ...root.children.flatMap(child => all(child, tag))]
+}
+function fire(el: Node | undefined, event: string, ...args: unknown[]) {
+    if (!el)
+        throw new Error(`Missing target for ${event}`)
+    const handler = el.props[event]
+    if (typeof handler !== 'function')
+        throw new Error(`Missing handler: ${event}`)
+    return (handler as (...args: unknown[]) => unknown)(...args)
+}
+
+const question = { id: 'q1', title: 'Pick one', type: 'single', options: [{ id: 'a', label: 'First' }, { id: 'b', label: 'Second' }] }
+function mount(overrides: Record<string, unknown> = {}) {
+    const events = { select: vi.fn(), toggle: vi.fn(), continue: vi.fn(), dismiss: vi.fn(), expanded: vi.fn() }
+    const props = Vue.reactive({ question, selected: [], ...overrides })
+    const root = node('host')
+    const app = renderer.createApp({ setup: () => () => Vue.h(Widget, {
+        ...props,
+        'onSelect': events.select,
+        'onToggle': events.toggle,
+        'onContinue': events.continue,
+        'onDismiss': events.dismiss,
+        'onUpdate:expanded': events.expanded,
+    }) })
+    for (const name of ['TelaCard', 'TelaLabel', 'TelaCheckbox', 'TelaTextarea', 'TelaButton', 'TelaIconButton', 'TelaCollapsible', 'TelaCollapsibleContent', 'TelaCollapsibleTrigger', 'TelaKbd', 'TelaBadge', 'TelaTooltip']) {
+        app.component(name, Vue.defineComponent({ props: ['modelValue'], setup: (props, { attrs, slots }) => () => Vue.h(name, { ...attrs, ...props }, slots.default?.()) }))
+    }
+    app.mount(root)
+    return { root, props, events, unmount: () => app.unmount() }
+}
+
+describe('controlled answer UI', () => {
+    it('emits selection intent without changing the supplied answer', () => {
+        const view = mount()
+        const options = all(view.root, 'TelaButton').filter(button => 'aria-pressed' in button.props)
+        fire(options[1], 'onClick')
+        expect(view.events.select).toHaveBeenCalledTimes(1)
+        expect(view.events.select).toHaveBeenCalledWith('b')
+        expect(options.every(button => button.props['aria-pressed'] === false)).toBe(true)
+        expect(view.events.continue).not.toHaveBeenCalled()
+        view.unmount()
+    })
+    it('preserves selected state when disabled and emits no answer action', () => {
+        const view = mount({ disabled: true, selected: ['b'] })
+        const options = all(view.root, 'TelaButton').filter(button => 'aria-pressed' in button.props)
+        fire(options[0], 'onClick')
+        expect(view.events.select).not.toHaveBeenCalled()
+        expect(options.map(button => button.props['data-selected'])).toEqual([false, true])
+        view.unmount()
+    })
+    it('emits explicit checkbox state and leaves state management to the host', () => {
+        const view = mount({ question: { ...question, type: 'multiple' }, selected: ['a'] })
+        fire(all(view.root, 'TelaCheckbox')[1], 'onUpdate:modelValue', true)
+        expect(view.events.toggle).toHaveBeenCalledTimes(1)
+        expect(view.events.toggle).toHaveBeenCalledWith('b', true)
+        expect(all(view.root, 'TelaCheckbox')[0]?.props.modelValue).toBe(true)
+        view.unmount()
+    })
+    it('exposes checkbox descriptions and opens them on focus without selecting', async () => {
+        const view = mount({ question: { ...question, type: 'multiple', options: [
+            { ...question.options[0], description: 'Details needed to choose the first option.' },
+            question.options[1],
+        ] } })
+        const [described, plain] = all(view.root, 'TelaCheckbox')
+        const descriptionId = described!.props['aria-describedby']
+        expect(descriptionId).toBeTypeOf('string')
+        expect(all(view.root, 'span').find(el => el.props.id === descriptionId)?.text)
+            .toBe('Details needed to choose the first option.')
+        expect(plain!.props['aria-describedby']).toBeUndefined()
+
+        const keyboardFocus = { target: { matches: (selector: string) => selector === ':focus-visible' } }
+        const pointerFocus = { target: { matches: () => false } }
+
+        fire(described, 'onFocus', pointerFocus)
+        await Vue.nextTick()
+        expect(all(view.root, 'TelaTooltip')[0]!.props.open).toBeUndefined()
+
+        fire(described, 'onFocus', keyboardFocus)
+        await Vue.nextTick()
+        expect(all(view.root, 'TelaTooltip')[0]!.props.open).toBe(true)
+        expect(view.events.toggle).not.toHaveBeenCalled()
+
+        fire(described, 'onBlur')
+        await Vue.nextTick()
+        expect(all(view.root, 'TelaTooltip')[0]!.props.open).toBeUndefined()
+        fire(plain, 'onFocus', keyboardFocus)
+        await Vue.nextTick()
+        expect(all(view.root, 'TelaTooltip')[1]!.props.open).toBeUndefined()
+        view.unmount()
+    })
+    it('only exposes A/B/C shortcuts even when a host supplies more options', async () => {
+        vi.stubGlobal('Element', class {})
+        const view = mount({ question: { ...question, options: [
+            ...question.options,
+            { id: 'c', label: 'Third' },
+            { id: 'd', label: 'Fourth' },
+        ] } })
+        try {
+            await Vue.nextTick()
+            const options = all(view.root, 'TelaButton').filter(button => 'aria-pressed' in button.props)
+            expect(options.map(button => button.props['aria-keyshortcuts'])).toEqual(['A', 'B', 'C', undefined])
+            expect(all(view.root, 'TelaKbd')).toHaveLength(3)
+            const widget = all(view.root, 'div')[0]!
+            const event = { key: 'd', preventDefault: vi.fn(), stopPropagation: vi.fn() }
+            fire(widget, 'listener:keydown', event)
+            expect(view.events.select).not.toHaveBeenCalled()
+            expect(event.preventDefault).not.toHaveBeenCalled()
+            expect(event.stopPropagation).not.toHaveBeenCalled()
+            fire(widget, 'listener:keydown', { ...event, key: 'c' })
+            expect(view.events.select).toHaveBeenCalledWith('c')
+        }
+        finally {
+            view.unmount()
+            vi.unstubAllGlobals()
+        }
+    })
+    it.each(['Enter', 'ArrowLeft', 'ArrowRight', 'a'])('does not consume repeated %s events', (key) => {
+        const host = node('scope')
+        const view = mount({ keyboardTarget: host, canPrevious: true, canNext: true })
+        const event = { key, repeat: true, preventDefault: vi.fn(), stopPropagation: vi.fn() }
+        fire(host, 'listener:keydown', event)
+        expect(event.preventDefault).not.toHaveBeenCalled()
+        expect(event.stopPropagation).not.toHaveBeenCalled()
+        expect(view.events.select).not.toHaveBeenCalled()
+        expect(view.events.continue).not.toHaveBeenCalled()
+        view.unmount()
+    })
+    it('focuses the widget when reopened so shortcuts work immediately', async () => {
+        const view = mount({ expanded: false })
+        const panel = all(view.root, 'div').find(el => el.props.tabindex === '-1')!
+        const focus = vi.spyOn(panel, 'focus')
+        expect(focus).not.toHaveBeenCalled()
+        Object.assign(view.props, { expanded: true })
+        await Vue.nextTick()
+        await Vue.nextTick()
+        expect(focus).toHaveBeenCalledWith({ preventScroll: true })
+        view.unmount()
+    })
+    it('scopes shortcuts, ignores external inputs, and cleans up on collapse and unmount', async () => {
+        class Target {
+            constructor(private editing = false) {}
+            closest(selector: string) { return this.editing && selector.startsWith('input,') ? this : null }
+        }
+        vi.stubGlobal('Element', Target)
+        const host = node('scope')
+        const view = mount({ keyboardTarget: host })
+        const key = (key: string, editing = false, extra = {}) => ({ key, target: new Target(editing), preventDefault: vi.fn(), stopPropagation: vi.fn(), ...extra })
+        try {
+            await Vue.nextTick()
+            fire(host, 'listener:keydown', key('b'))
+            expect(view.events.select).toHaveBeenCalledTimes(1)
+            expect(view.events.select).toHaveBeenCalledWith('b')
+            const input = key('a', true)
+            fire(host, 'listener:keydown', input)
+            fire(host, 'listener:keydown', key('a', false, { isComposing: true }))
+            fire(host, 'listener:keydown', key('a', false, { repeat: true }))
+            expect(input.preventDefault).not.toHaveBeenCalled()
+            expect(view.events.select).toHaveBeenCalledTimes(1)
+            // A docked widget may sit outside the host's keyboard scope.
+            const widget = all(view.root, 'div')[0]!
+            fire(widget, 'listener:keydown', key('a'))
+            expect(view.events.select).toHaveBeenCalledTimes(2)
+            expect(view.events.select).toHaveBeenLastCalledWith('a')
+            fire(widget, 'listener:keydown', key('a', false, { defaultPrevented: true }))
+            expect(view.events.select).toHaveBeenCalledTimes(2)
+            Object.assign(view.props, { expanded: false })
+            await Vue.nextTick()
+            expect(host.props['listener:keydown']).toBeUndefined()
+            expect(widget.props['listener:keydown']).toBeUndefined()
+            Object.assign(view.props, { expanded: true })
+            await Vue.nextTick()
+            expect(host.props['listener:keydown']).toBeTypeOf('function')
+            view.unmount()
+            expect(host.props['listener:keydown']).toBeUndefined()
+        }
+        finally { vi.unstubAllGlobals() }
+    })
+})

package/components/tela/chat/answer/answer.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import type { TelaChatAnswerQuestion, TelaChatAnswerLabels } from '../../../../types/chat-answer'
+
+const props = withDefaults(defineProps<{
+    question: TelaChatAnswerQuestion
+    selected?: readonly string[]
+    current?: number
+    total?: number
+    expanded?: boolean
+    disabled?: boolean
+    submitting?: boolean
+    error?: string
+    showNavigation?: boolean
+    canPrevious?: boolean
+    canNext?: boolean
+    showContinue?: boolean
+    canContinue?: boolean
+    /** Optional host-owned keyboard scope. Defaults to this component only. */
+    keyboardTarget?: HTMLElement | null
+    labels?: Partial<TelaChatAnswerLabels>
+}>(), {
+    selected: () => [],
+    current: 1,
+    total: 1,
+    expanded: true,
+    showContinue: true,
+    canContinue: true,
+    error: '',
+    keyboardTarget: null,
+    labels: () => ({}),
+})
+const emit = defineEmits<{
+    'select': [id: string]
+    'toggle': [id: string, checked: boolean]
+    'update:expanded': [value: boolean]
+    'previous': []
+    'next': []
+    'skip': []
+    'continue': []
+    'dismiss': []
+}>()
+const copy = computed<TelaChatAnswerLabels>(() => ({
+    minimize: 'Minimize answers',
+    expand: 'Expand answers',
+    dismiss: 'Dismiss questions',
+    previous: 'Previous question',
+    next: 'Next question',
+    skip: 'Skip',
+    continue: 'Continue',
+    recommended: '(recommended)',
+    selected: count => `${count} selected`,
+    progress: (current, total) => `${current} of ${total}`,
+    submitting: 'Sending answers…',
+    ...props.labels,
+}))
+const uid = useId()
+const root = ref<HTMLElement | null>(null)
+const questionPanel = ref<HTMLElement | null>(null)
+const keyboardFocusedOption = ref<string | null>(null)
+
+// Shared by single and multiple choice: the option label triggers the
+// description, shown to its right. Hover is left to the tooltip itself.
+function optionTooltip(option: TelaChatAnswerQuestion['options'][number]) {
+    return {
+        asChild: true,
+        side: 'right' as const,
+        delayDuration: 500,
+        disabled: !option.description,
+        content: option.description,
+        open: (Boolean(option.description) && keyboardFocusedOption.value === option.id) || undefined,
+    }
+}
+
+// The focusable control (button or checkbox) is not the tooltip trigger, so
+// keyboard focus forces the description open. A mouse click also focuses it
+// and would pin the tooltip, hence the :focus-visible check.
+function trackKeyboardFocus(optionId: string, event: FocusEvent) {
+    const target = event.target
+    const keyboardFocus = target !== null && 'matches' in target && typeof target.matches === 'function' && Boolean(target.matches(':focus-visible'))
+
+    keyboardFocusedOption.value = keyboardFocus ? optionId : null
+}
+const interactive = computed(() => !props.disabled && !props.submitting)
+watch(() => props.question.id, async () => {
+    keyboardFocusedOption.value = null
+    await nextTick()
+    if (props.expanded)
+        questionPanel.value?.focus()
+})
+watch(() => props.expanded, async (expanded) => {
+    keyboardFocusedOption.value = null
+    if (expanded) {
+        await nextTick()
+        root.value?.focus({ preventScroll: true })
+    }
+    else if (!expanded && typeof document !== 'undefined' && root.value?.contains(document.activeElement)) {
+        await nextTick()
+        root.value?.querySelector<HTMLButtonElement>('[data-answer-collapse]')?.focus()
+    }
+})
+watchEffect((onCleanup) => {
+    if (!interactive.value || !props.expanded)
+        return
+    const targets = new Set([root.value, props.keyboardTarget])
+    for (const target of targets)
+        target?.addEventListener('keydown', onKeydown, true)
+    onCleanup(() => {
+        for (const target of targets)
+            target?.removeEventListener('keydown', onKeydown, true)
+    })
+})
+
+function shortcut(index: number) {
+    return 'ABC'[index] ?? ''
+}
+function select(id: string) {
+    if (interactive.value)
+        emit('select', id)
+}
+function toggle(id: string, checked: boolean | 'indeterminate') {
+    if (interactive.value)
+        emit('toggle', id, checked === true)
+}
+function previous() {
+    if (interactive.value && props.canPrevious)
+        emit('previous')
+}
+function next() {
+    if (interactive.value && props.canNext)
+        emit('next')
+}
+function advance() {
+    if (interactive.value && props.canContinue)
+        emit('continue')
+}
+function onKeydown(event: KeyboardEvent) {
+    if (!interactive.value || !props.expanded || event.defaultPrevented || event.repeat || event.isComposing || event.keyCode === 229 || event.shiftKey || event.ctrlKey || event.altKey || event.metaKey)
+        return
+    const target = event.target instanceof Element ? event.target : null
+    const editing = Boolean(target?.closest('input, textarea, [contenteditable="true"]'))
+    if (editing && (!target || !root.value?.contains(target)))
+        return
+    if (/^[a-c]$/i.test(event.key)) {
+        if (editing || props.question.type !== 'single')
+            return
+        const option = props.question.options[event.key.toLowerCase().charCodeAt(0) - 97]
+        if (!option)
+            return
+        event.preventDefault()
+        event.stopPropagation()
+        select(option.id)
+        return
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        if (editing)
+            return
+    }
+    else if (event.key === 'Enter') {
+        if (target?.closest('button, a[href]') && !target.closest('[role="checkbox"]'))
+            return
+    }
+    else {
+        return
+    }
+    event.preventDefault()
+    event.stopPropagation()
+    if (event.key === 'Enter')
+        advance()
+    else if (event.key === 'ArrowLeft')
+        previous()
+    else next()
+}
+</script>
+
+<template>
+    <div ref="root" tabindex="-1" outline-none>
+        <TelaCard size="sm" class="!p-0 w-400px" overflow-hidden>
+            <TelaCollapsible :open="expanded" @update:open="emit('update:expanded', $event)">
+                <div
+                    flex items-center justify-between gap-8px min-h-56px py-8px pl-16px pr-12px
+                    :class="{ 'cursor-pointer': !expanded }"
+                    @click="!expanded && emit('update:expanded', true)"
+                >
+                    <div flex="~ col" gap-6px min-w-0>
+                        <span role="status" aria-live="polite" body-10-regular text-tertiary>{{ copy.progress(current, total) }}</span>
+                        <h5 :id="`${uid}-${question.id}-title`" heading-h5-semibold text-primary text-balance>
+                            {{ question.title }}
+                        </h5>
+                    </div>
+                    <div flex items-center shrink-0 mr--3px>
+                        <TelaCollapsibleTrigger as-child>
+                            <TelaIconButton
+                                data-answer-collapse
+                                size="sm"
+                                icon="i-ph-caret-down"
+                                color="secondary"
+                                :icon-class="cn('transition-all ease-in-out', { 'rotate-180': expanded })"
+                                :aria-label="expanded ? copy.minimize : copy.expand"
+                                @click.stop
+                            />
+                        </TelaCollapsibleTrigger>
+                        <TelaIconButton
+                            size="sm"
+                            icon="i-ph-x"
+                            color="secondary"
+                            :aria-label="copy.dismiss"
+                            :disabled="submitting"
+                            @click.stop="emit('dismiss')"
+                        />
+                    </div>
+                </div>
+                <!-- The pull-up sits on the clipping element itself; on a child it would cut the first row. -->
+                <TelaCollapsibleContent class="mt--4px">
+                    <div :key="question.id" ref="questionPanel" tabindex="-1" outline-none flex="~ col">
+                        <ul v-if="question.type === 'single'" :aria-labelledby="`${uid}-${question.id}-title`" flex="~ col" gap-4px list-none m-0 py-0 px-6px>
+                            <li v-for="(option, optionIndex) in question.options" :key="option.id" relative block list-none m-0 p-0>
+                                <span v-if="optionIndex > 0" aria-hidden="true" absolute top="-2px" inset-x-8px border-t-0.5px border-solid border />
+                                <TelaButton
+                                    variant="ghost"
+                                    w-full justify-between gap-8px text-left whitespace-normal
+                                    class="!py-8px !rounded-8px ![--padding-x:10px] duration-0!"
+                                    :class="selected.includes(option.id) ? '!bg-muted' : '!bg-transparent enabled:hover:!bg-muted'"
+                                    :aria-pressed="selected.includes(option.id)"
+                                    :aria-keyshortcuts="shortcut(optionIndex) || undefined"
+                                    :data-selected="selected.includes(option.id)"
+                                    :disabled="!interactive"
+                                    @focus="trackKeyboardFocus(option.id, $event)"
+                                    @blur="keyboardFocusedOption = null"
+                                    @click="select(option.id)"
+                                >
+                                    <span flex="~ col" min-w-0>
+                                        <TelaTooltip v-bind="optionTooltip(option)">
+                                            <span body-14-regular text-primary self-start>
+                                                {{ option.label }}<span v-if="question.recommendFirst && optionIndex === 0" text-secondary ml-4px>{{ copy.recommended }}</span>
+                                            </span>
+                                        </TelaTooltip>
+                                    </span>
+                                    <TelaKbd v-if="shortcut(optionIndex)" class="shrink-0">
+                                        {{ shortcut(optionIndex) }}
+                                    </TelaKbd>
+                                </TelaButton>
+                            </li>
+                        </ul>
+                        <div v-else-if="question.type === 'multiple'" role="group" :aria-labelledby="`${uid}-${question.id}-title`" flex="~ col" px-6px gap-4px>
+                            <template v-for="(option, optionIndex) in question.options" :key="option.id">
+                                <div
+                                    relative px-10px rounded-8px flex items-center justify-between gap-8px
+                                    :class="selected.includes(option.id) ? 'bg-muted' : { 'hover:bg-muted': interactive }"
+                                    :data-selected="selected.includes(option.id)" :data-interactive="interactive"
+                                >
+                                    <span v-if="optionIndex > 0" aria-hidden="true" absolute top="-2px" inset-x-8px border-t-0.5px border-solid border />
+                                    <TelaLabel :for="`${uid}-${question.id}-${option.id}`" flex="~ col" flex-1 min-w-0 cursor-pointer py-8px>
+                                        <TelaTooltip v-bind="optionTooltip(option)">
+                                            <span body-14-regular text-primary self-start>
+                                                {{ option.label }}<span v-if="question.recommendFirst && optionIndex === 0" text-secondary ml-4px>{{ copy.recommended }}</span>
+                                            </span>
+                                        </TelaTooltip>
+                                    </TelaLabel>
+                                    <div flex items-center gap-8px shrink-0>
+                                        <TelaCheckbox
+                                            :id="`${uid}-${question.id}-${option.id}`"
+                                            :aria-describedby="option.description ? `${uid}-${question.id}-${option.id}-description` : undefined"
+                                            :model-value="selected.includes(option.id)"
+                                            :disabled="!interactive"
+                                            @focus="trackKeyboardFocus(option.id, $event)"
+                                            @blur="keyboardFocusedOption = null"
+                                            @update:model-value="toggle(option.id, $event)"
+                                        />
+                                    </div>
+                                </div>
+                                <span v-if="option.description" :id="`${uid}-${question.id}-${option.id}-description`" sr-only>{{ option.description }}</span>
+                            </template>
+                        </div>
+
+                        <div flex items-center justify-between gap-8px px-16px py-8px>
+                            <div v-if="showNavigation" ml--6px flex items-center>
+                                <TelaIconButton size="3xs" icon="i-ph-caret-left-bold" color="secondary" :aria-label="copy.previous" :disabled="!interactive || !canPrevious" class="disabled:bg-transparent!" @click="previous" />
+                                <TelaIconButton size="3xs" icon="i-ph-caret-right-bold" color="secondary" :aria-label="copy.next" :disabled="!interactive || !canNext" class="disabled:bg-transparent!" @click="next" />
+                            </div>
+
+                            <span v-if="question.type === 'multiple'" body-12-regular text-tertiary>{{ copy.selected(selected.length) }}</span>
+
+                            <div flex items-center gap-2px ml-auto mr--4px>
+                                <TelaButton size="sm" variant="ghost" class="rounded-[6px]!" :disabled="!interactive" @click="interactive && emit('skip')">
+                                    {{ copy.skip }}
+                                </TelaButton>
+                                <TelaIconButton v-if="showContinue" size="3xs" :aria-label="copy.continue" :disabled="!interactive || !canContinue" :loading="submitting" icon="i-ph-arrow-right-bold" @click="advance" />
+                            </div>
+                        </div>
+                        <span v-if="submitting" role="status" body-12-regular text-secondary px-16px pt-4px pb-12px>{{ copy.submitting }}</span>
+                        <span v-if="error" role="alert" body-12-regular text-primary px-16px pt-4px pb-12px>{{ error }}</span>
+                    </div>
+                </TelaCollapsibleContent>
+            </TelaCollapsible>
+        </TelaCard>
+    </div>
+</template>