@meistrari/tela-build 1.73.0 → 1.74.0

package/CHANGELOG.md

@@ -2,8 +2,33 @@
 
 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
@@ -26,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/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>

package/components/tela/chat/chat-body.vue

@@ -8,9 +8,9 @@ withDefaults(defineProps<{
 
 const rootRef = ref<HTMLElement | null>(null)
 
-// The docked element is the prompt-input surface, or the TelaChatAnimateEnter
-// wrapping it (document order puts the wrapper first).
-const DOCK_SELECTOR = '[data-chat-animate-enter]:has([data-chat-prompt-input]), [data-chat-prompt-input]'
+// The docked element is the composer stack, the prompt-input surface, or the
+// TelaChatAnimateEnter wrapping it (document order puts the outermost first).
+const DOCK_SELECTOR = '[data-chat-composer], [data-chat-animate-enter]:has([data-chat-prompt-input]), [data-chat-prompt-input]'
 let inputObserver: ResizeObserver | null = null
 let slotObserver: MutationObserver | null = null
 let observedInput: HTMLElement | null = null
@@ -73,11 +73,11 @@ onBeforeUnmount(() => {
 }
 
 /*
- * The dock: the prompt-input surface itself, or the TelaChatAnimateEnter that
- * wraps it. A surface inside the wrapper stays in flow so only one box is
- * positioned, faded and (with popLayout) pinned.
+ * The dock: the composer stack, the prompt-input surface itself, or the
+ * TelaChatAnimateEnter that wraps it. A surface inside the wrapper or composer
+ * stays in flow so only one box is positioned, faded and (with popLayout) pinned.
  */
-[data-chat-body] :is([data-chat-prompt-input]:not([data-chat-animate-enter] *), [data-chat-animate-enter]:has([data-chat-prompt-input])) {
+[data-chat-body] :is([data-chat-composer], [data-chat-prompt-input]:not(:is([data-chat-animate-enter], [data-chat-composer]) *), [data-chat-animate-enter]:has([data-chat-prompt-input]):not([data-chat-composer] *)) {
     --at-apply: 'absolute bottom-0 left-0 right-0 z-2 mx-12px mb-12px';
 }
 
@@ -104,7 +104,12 @@ onBeforeUnmount(() => {
     padding-bottom: calc(var(--chat-input-height, 64px) + 32px);
 }
 
-[data-chat-body][data-variant='page'] :is([data-chat-prompt-input]:not([data-chat-animate-enter] *), [data-chat-animate-enter]:has([data-chat-prompt-input])) {
+[data-chat-body][data-variant='page'] :is([data-chat-composer], [data-chat-prompt-input]:not(:is([data-chat-animate-enter], [data-chat-composer]) *), [data-chat-animate-enter]:has([data-chat-prompt-input]):not([data-chat-composer] *)) {
     --at-apply: 'mx-24px mb-16px';
 }
+/* The entire dock/composer stack is pinned and measured together. */
+[data-chat-body] [data-chat-composer] [data-chat-prompt-input] {
+    position: static;
+    margin: 0;
+}
 </style>

package/components/tela/chat/chat-widget-history-list.vue

@@ -47,7 +47,10 @@ const resolvedEmptyMessage = computed(() =>
         </template>
 
         <template v-else>
-            <TelaComboboxEmpty class="body-14-regular! text-center text-tertiary py-8px">
+            <div v-if="items.length === 0" role="status" body-14-regular text-center text-tertiary py-8px>
+                {{ resolvedEmptyMessage }}
+            </div>
+            <TelaComboboxEmpty v-else class="body-14-regular! text-center text-tertiary py-8px">
                 {{ resolvedEmptyMessage }}
             </TelaComboboxEmpty>
             <TelaComboboxItem

package/components/tela/chat/chat.mdx

@@ -981,6 +981,112 @@ const suggestions = [
 </template>
 ```
 
+### Answer
+
+A question card for when the assistant needs a decision before it can continue: single choice (pick one, `A`/`B`/`C` shortcuts) or multiple choice (checkboxes). It is fully controlled. The host owns the question sequence, the selected ids, submission and dismissal; the card only emits intent and never sends a message. Hover an option's label, or focus the option with the keyboard, to read its description. Typed answers belong in the normal prompt input, not here.
+
+```vue
+<script setup lang="ts">
+import type { TelaChatAnswerQuestion } from '@meistrari/tela-build/types'
+
+const questions: TelaChatAnswerQuestion[] = [
+    {
+        id: 'source',
+        title: 'What should the agent work on?',
+        type: 'single',
+        recommendFirst: true,
+        options: [
+            { id: 'upload', label: 'Upload files', description: 'Use the documents you provide.' },
+            { id: 'search', label: 'Search the workspace', description: 'Find existing information.' },
+            { id: 'scratch', label: 'Start from scratch', description: 'Create a new draft.' },
+        ],
+    },
+    {
+        id: 'sections',
+        title: 'Which sections should the draft include?',
+        type: 'multiple',
+        options: [
+            { id: 'summary', label: 'Executive summary', description: 'One paragraph a reader can stop at.' },
+            { id: 'risks', label: 'Risks', description: 'What could go wrong and how likely it is.' },
+            { id: 'next', label: 'Next steps' },
+        ],
+    },
+]
+
+const index = ref(0)
+const expanded = ref(true)
+const done = ref(false)
+const answers = ref<Record<string, string[]>>({})
+
+const question = computed(() => questions[index.value]!)
+const selected = computed(() => answers.value[question.value.id] ?? [])
+
+function select(id: string) {
+    answers.value[question.value.id] = [id]
+}
+
+function toggle(id: string, checked: boolean) {
+    answers.value[question.value.id] = checked
+        ? [...selected.value, id]
+        : selected.value.filter(value => value !== id)
+}
+
+function advance() {
+    if (index.value < questions.length - 1) {
+        index.value++
+        return
+    }
+
+    done.value = true
+    expanded.value = false
+}
+
+function restart() {
+    index.value = 0
+    answers.value = {}
+    done.value = false
+    expanded.value = true
+}
+</script>
+
+<template>
+    <div class="flex flex-col items-start gap-12px w-full max-w-400px">
+        <TelaChatAnswer
+            v-model:expanded="expanded"
+            class="w-full"
+            :question="question"
+            :selected="selected"
+            :current="index + 1"
+            :total="questions.length"
+            :disabled="done"
+            :can-continue="selected.length > 0"
+            show-navigation
+            :can-previous="index > 0"
+            :can-next="index < questions.length - 1"
+            @select="select"
+            @toggle="toggle"
+            @previous="index--"
+            @next="index++"
+            @skip="advance"
+            @continue="advance"
+            @dismiss="expanded = false"
+        />
+        <TelaButton v-if="done" variant="secondary" size="sm" @click="restart">
+            Ask again
+        </TelaButton>
+    </div>
+</template>
+```
+
+Keyboard, while the card is expanded and enabled:
+
+- **`A` / `B` / `C`** select a single-choice option. Multiple-choice rows have no letter shortcuts.
+- **`Enter`** emits `continue` (when `canContinue`); on a focused button it keeps its native behavior.
+- **`←` / `→`** emit `previous` / `next` when `canPrevious` / `canNext` allow it.
+- **`Tab`** to a checkbox opens its description, which is also linked through `aria-describedby`.
+
+Shortcuts are scoped to the card. Pass `keyboard-target` to listen on a host container instead (for example the chat body, so the keys work while focus is elsewhere in the conversation); keystrokes typed into inputs, with modifiers, held down, or during IME composition are always ignored. Changing `question.id` moves focus to the new question, and collapsing returns focus to the collapse button.
+
 ### Working Indicator
 
 The running state of an assistant turn: a small `TelaLoadersSquare`, a label (`Working` by default) and an elapsed counter. Show it whenever something is running. A running turn is one `TelaChatMessage`: put the indicator and anything else the wait needs (a shimmering activity line, a reasoning trace) inside it, and the message stacks them 8px apart while the conversation keeps its 16px between turns. Pass `started-at` (epoch ms) and it ticks by itself; pass `elapsed` (seconds) to drive it from the host, for example from a server-reported duration.
@@ -1134,6 +1240,7 @@ import { TelaChatIconsAnthropic, TelaChatIconsGemini, TelaChatIconsOpenai } from
 | `TelaChatFloatingWindowTrigger` | Pill button that opens the floating widget. |
 | `TelaChatFloatingWindow` | Anchored popover shell for the floating variant (`open` / `@update:open`). |
 | `TelaChatSidepanelWindow` | Always-open, in-flow docked column for the sidepanel variant. |
+| `TelaChatAnswer` | Controlled single/multiple-choice question card; emits intent only, the host owns state and submission. |
 | `TelaChatWorkingIndicator` | Running-turn row: square loader, label, elapsed time. |
 | `TelaChatStopRunButton` | Replaces the prompt input while a turn runs; centered pill that emits `stop`. |
 | `TelaChatAnimateEnter` | Enter/exit preset (fade, slide, slight scale) for a surface that comes and goes; when it wraps the prompt input or stop button the body docks the wrapper. Pair with `AnimatePresence`. |
@@ -1397,6 +1504,7 @@ type FloatingWindowTriggerProps = {
 }
 
 type FloatingWindowProps = {
+  closeOnOutsideClick?: boolean // defaults to true; false keeps the window open on outside clicks
   open: boolean
   contained?: boolean   // anchor the launcher to the nearest positioned ancestor instead of the viewport
   triggerLabel?: string // label of the default trigger; ignored when #launcher is provided
@@ -1406,6 +1514,68 @@ type FloatingWindowProps = {
 // TelaChatSidepanelWindow takes no props.
 ```
 
+### Answer
+
+```typescript
+type AnswerProps = {
+  question: TelaChatAnswerQuestion
+  selected?: readonly string[]  // default: []; option ids, owned by the host
+  expanded?: boolean            // default: true; v-model:expanded
+  disabled?: boolean            // keeps the selection visible, blocks every answer action
+  submitting?: boolean          // same as disabled, plus a spinner on continue and a status line
+  error?: string                // default: ''; rendered as an alert under the footer
+  current?: number              // default: 1; display only ("1 of 3")
+  total?: number                // default: 1; display only, no limit is enforced
+  showNavigation?: boolean      // previous / next arrows in the footer
+  canPrevious?: boolean
+  canNext?: boolean
+  showContinue?: boolean        // default: true; set false when a single choice advances by itself
+  canContinue?: boolean         // default: true
+  labels?: Partial<TelaChatAnswerLabels> // copy overrides; no i18n plugin required
+  keyboardTarget?: HTMLElement | null    // default: null; extra element to listen for shortcuts on
+}
+
+type AnswerEmits = {
+  'select': [id: string]                    // single choice
+  'toggle': [id: string, checked: boolean]  // multiple choice
+  'update:expanded': [value: boolean]
+  'previous': []
+  'next': []
+  'skip': []
+  'continue': []
+  'dismiss': []                             // the host decides whether to remove the card
+}
+
+// import type { ... } from '@meistrari/tela-build/types'
+type TelaChatAnswerQuestion = {
+  id: string                 // changing it resets focus to the new question
+  title: string
+  type: 'single' | 'multiple'
+  options: TelaChatAnswerOption[]
+  recommendFirst?: boolean   // appends "(recommended)" to the first option
+}
+
+type TelaChatAnswerOption = {
+  id: string
+  label: string
+  description?: string       // shown in a tooltip to the right of the label on hover (0.5s) and keyboard focus
+}
+
+type TelaChatAnswerLabels = {
+  minimize: string
+  expand: string
+  dismiss: string
+  previous: string
+  next: string
+  skip: string
+  continue: string
+  recommended: string
+  submitting: string
+  selected: (count: number) => string
+  progress: (current: number, total: number) => string
+}
+```
+
 ### Working Indicator
 
 ```typescript
@@ -1464,6 +1634,8 @@ type TextShimmerProps = {
 - **Keep the primitives logic-free.** Fetch, stream, and persist in the host; pass results down as props and slots. No primitive owns message state.
 - **`contained` for user messages, `flat` for assistant messages.** Assistant output reads as page text; user input reads as a sent bubble.
 - **Never hand-roll the toolbar layout.** `TelaChatPromptInputTools` (attachment actions) on the left, `TelaChatPromptInputActions` with `TelaChatModelSelector` + `TelaChatPromptSubmitButton` on the right. Always the same order; never substitute a raw `<div class="flex items-center gap-4px">`.
+- **`TelaChatAnswer` never talks to the server.** Parsing the model's questions, limits on how many questions or options to ask, saved answers, retries and what happens after the last question all live in the host (or its adapter). Every event is intent only; `dismiss` does not remove the card.
+- **Dock the active answer card above the prompt input.** Put both inside one `[data-chat-composer]` wrapper with a 12px gap so `TelaChatBody` pins and measures them together. Only one card should be interactive at a time, especially when sharing a `keyboardTarget`.
 - **One shell per page.** Never mount `TelaChatFloatingWindow` and `TelaChatSidepanelWindow` at the same time.
 - **Always wrap the conversation and prompt input in `TelaChatBody`.** It owns the spacing and pins the prompt input to the bottom, and messages scroll under it through a progressive blur. `variant="widget"` (default) inside the floating/sidepanel shells, `variant="page"` on full pages. Never re-add spacing or positioning classes to `TelaChatConversation` or `TelaChatPromptInput`.
 - **The `#launcher` slot is optional; when provided it must be exactly one element.** It is an anchor, not a container; omit it to get the default `TelaChatFloatingWindowTrigger`.

package/components/tela/chat/floating/escape-layer.test.ts

@@ -0,0 +1,26 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it } from 'vitest'
+import { hasOpenEscapeLayer } from './escape-layer'
+
+describe('floating chat escape layers', () => {
+    beforeEach(() => {
+        document.body.innerHTML = ''
+    })
+
+    it('defers dismissal while a higher-priority layer is open', () => {
+        document.body.innerHTML = '<div data-tela-escape-layer data-state="open"></div>'
+
+        expect(hasOpenEscapeLayer()).toBe(true)
+    })
+
+    it('does not defer dismissal for a layer that has closed', () => {
+        document.body.innerHTML = '<div data-tela-escape-layer data-state="closed"></div>'
+
+        expect(hasOpenEscapeLayer()).toBe(false)
+    })
+
+    it('does not defer dismissal when no higher-priority layer exists', () => {
+        expect(hasOpenEscapeLayer()).toBe(false)
+    })
+})

package/components/tela/chat/floating/escape-layer.ts

@@ -0,0 +1,3 @@
+export function hasOpenEscapeLayer(root: ParentNode = document) {
+    return Boolean(root.querySelector('[data-tela-escape-layer][data-state="open"]'))
+}

package/components/tela/chat/floating/floating-window.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
+import { hasOpenEscapeLayer } from './escape-layer'
 import { floatingWindowContextKey } from './floating-window-context'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     open: boolean
+    /** Close on outside clicks. Disable to keep the chat open while interacting with the page. */
+    closeOnOutsideClick?: boolean
     /** Anchors the launcher to the nearest positioned ancestor instead of the viewport (docs/embedded previews). */
     contained?: boolean
     /** Label of the default trigger, ignored when the `launcher` slot is provided. */
     triggerLabel?: string
-}>()
+}>(), {
+    closeOnOutsideClick: true,
+})
 
 const emit = defineEmits<{
     (e: 'update:open', value: boolean): void
@@ -19,7 +24,7 @@ const launcherWidth = ref(0)
 const launcherHeight = ref(0)
 const sideOffset = computed(() => -launcherHeight.value)
 
-const morphTransition = { type: 'spring', stiffness: 420, damping: 42, mass: 1 } as const
+const morphTransition = { type: 'spring', stiffness: 900, damping: 58, mass: 1 } as const
 
 const exitTransition = { type: 'spring', stiffness: 360, damping: 36, mass: 1 } as const
 
@@ -67,7 +72,7 @@ const contentAnimate = computed(() => props.open
     ? { scale: 1, opacity: 1 }
     : { scale: contentExitScale, opacity: 0 })
 const contentTransition = computed(() => props.open
-    ? { ...morphTransition, opacity: { duration: 0.16 } }
+    ? { ...morphTransition, opacity: { duration: 0.12 } }
     : { ...exitTransition, opacity: { duration: 0.14, delay: 0.08 } })
 
 function measureLauncher() {
@@ -98,6 +103,49 @@ provide(floatingWindowContextKey, {
 let previousOverflow = ''
 let previousPaddingRight = ''
 let hasScrollLock = false
+let deferNextDismissal = false
+
+function handleEscapeKeyDown() {
+    deferNextDismissal = hasOpenEscapeLayer()
+
+    if (deferNextDismissal) {
+        queueMicrotask(() => {
+            deferNextDismissal = false
+        })
+    }
+}
+
+function handleOpenUpdate(value: boolean) {
+    if (!value && deferNextDismissal) {
+        deferNextDismissal = false
+        return
+    }
+
+    emit('update:open', value)
+}
+
+function handleInteractOutside(event: CustomEvent) {
+    if (!props.closeOnOutsideClick) {
+        event.preventDefault()
+        return
+    }
+
+    const originalEvent = (event.detail as { originalEvent?: Event } | undefined)?.originalEvent
+
+    if (originalEvent?.type !== 'pointerdown') {
+        event.preventDefault()
+
+        return
+    }
+
+    const target = event.target
+
+    if (!(target instanceof Element))
+        return
+
+    if (!target.isConnected || target.closest('[data-reka-popper-content-wrapper], [data-dismissable-layer], [data-tela-escape-layer]'))
+        event.preventDefault()
+}
 
 function lockScroll() {
     if (hasScrollLock)
@@ -150,24 +198,6 @@ onBeforeUnmount(() => {
     unlockScroll()
 })
 
-function handleInteractOutside(event: CustomEvent) {
-    const originalEvent = (event.detail as { originalEvent?: Event } | undefined)?.originalEvent
-
-    if (originalEvent?.type !== 'pointerdown') {
-        event.preventDefault()
-
-        return
-    }
-
-    const target = event.target
-
-    if (!(target instanceof Element))
-        return
-
-    if (!target.isConnected || target.closest('[data-reka-popper-content-wrapper], [data-dismissable-layer]'))
-        event.preventDefault()
-}
-
 function focusEditor(event: Event) {
     event.preventDefault()
 
@@ -175,13 +205,18 @@ function focusEditor(event: Event) {
         const content = event.target instanceof HTMLElement
             ? event.target
             : document.querySelector('.widget-popover')
-        const editor = content?.querySelector<HTMLElement>('[data-prompt-editor] [contenteditable="true"]')
+        const editor = Array.from(content?.querySelectorAll<HTMLElement>(
+            '[data-prompt-editor] [contenteditable="true"], [data-chat-prompt-input] input:not(:disabled), [data-chat-prompt-input] textarea:not(:disabled), [data-chat-answer] input:not(:disabled), [data-chat-answer] textarea:not(:disabled)',
+        ) ?? []).find(element => element.getClientRects().length > 0)
 
         if (!editor)
             return
 
         editor.focus()
 
+        if (!editor.isContentEditable)
+            return
+
         const selection = window.getSelection()
 
         if (!selection)
@@ -199,8 +234,8 @@ function focusEditor(event: Event) {
 </script>
 
 <template>
-    <TelaPopover :open="open" @update:open="emit('update:open', $event)">
-        <div ref="launcher" :class="cn('bottom-16px', contained ? 'absolute right-16px' : 'fixed right-[calc(16px+var(--scrollbar-width,0px))]')">
+    <TelaPopover :open="open" @update:open="handleOpenUpdate">
+        <div ref="launcher" :class="cn('bottom-16px z-599', contained ? 'absolute right-16px' : 'fixed right-[calc(16px+var(--scrollbar-width,0px))]')">
             <div :class="cn('transition-opacity', open ? 'opacity-0 duration-100' : 'duration-160 delay-160')">
                 <TelaPopoverTrigger as-child>
                     <slot name="launcher">
@@ -214,13 +249,14 @@ function focusEditor(event: Event) {
             align="end"
             :side-offset="sideOffset"
             :class="cn(
-                'widget-popover relative w-[min(480px,calc(100vw-32px))] p-0 z-40! transition-[height] duration-200 ease-out',
+                'widget-popover relative w-[min(480px,calc(100vw-32px))] p-0 z-599! transition-[height] duration-200 ease-out',
                 expanded
                     ? 'h-[calc(var(--reka-popover-content-available-height)-16px)]'
                     : 'h-[min(512px,calc(100dvh-120px))]',
                 'bg-transparent! border-0! shadow-none! rounded-none! overflow-visible!',
             )"
             @open-auto-focus="focusEditor"
+            @escape-key-down="handleEscapeKeyDown"
             @interact-outside="handleInteractOutside"
             @focus-outside.prevent
         >

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

@@ -31,7 +31,7 @@ const emit = defineEmits<{
 const style = computed(() => {
     const base = 'cursor-pointer flex items-center justify-center p-0.5em ease-out duration-40'
     const size = ({
-        '3xs': 'text-6px p-1 rounded-8px',
+        '3xs': 'text-6px p-1 rounded-6px',
         '2xs': 'text-8px p-4px rounded-4px', // 16px
         'xs': 'text-12px p-6px rounded-8px', // 26px
         'sm': 'text-16px p-6px rounded-10px', // 32px

package/components/tela/kbd/kbd.vue

@@ -7,17 +7,17 @@ const props = withDefaults(defineProps<{
 })
 
 const variantClasses = computed(() => (({
-    default: 'bg-gray-200 text-gray-500',
+    default: 'bg-muted text-secondary',
     dark: 'bg-neutral-700/60 text-neutral-300',
 }) as Record<'default' | 'dark', string>)[props.variant])
 </script>
 
 <template>
     <code
-        flex items-center justify-center h-16px text-12px rounded-6px
-        :class="cn(variantClasses, icon ? 'w-20px h-20px' : 'px-4px')"
+        flex items-center justify-center w-16px h-16px text-10px leading-none tracking-normal rounded-5px
+        :class="cn(variantClasses)"
     >
         <TelaIcon v-if="icon" :name="icon" class="h-14px! w-14px!" />
-        <slot v-else />
+        <span v-else class="translate-0.25px"><slot /></span>
     </code>
 </template>

package/components/tela/tooltip/tooltip.mdx

@@ -145,6 +145,8 @@ type TooltipProps = {
     collisionPadding?: number | TooltipCollisionPadding
     delayDuration?: number
     disabled?: boolean
+    asChild?: boolean // merge the trigger into the slotted element (no wrapper button)
+    reference?: ReferenceElement // anchor to another element; the slot stays the trigger
 }
 ```
 

package/components/tela/tooltip/tooltip.test.ts

@@ -1,10 +1,11 @@
 // @vitest-environment happy-dom
-import { computed, defineComponent, h } from 'vue'
+import { computed, defineComponent, h, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import Tooltip from './tooltip.vue'
 
 vi.stubGlobal('computed', computed)
+vi.stubGlobal('ref', ref)
 
 const slotStub = defineComponent({
     setup(_, { slots }) {

package/components/tela/tooltip/tooltip.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
 import type { TooltipBodyProps } from './tooltip-body.vue'
 
 export type TooltipProps = TooltipBodyProps & {
@@ -6,9 +7,13 @@ export type TooltipProps = TooltipBodyProps & {
     delayDuration?: number
     open?: boolean
     triggerClass?: string
+    /** Merge the trigger into the slotted element instead of wrapping it in a button. */
+    asChild?: boolean
+    /** Anchor the tooltip to another element while the slot stays the trigger. */
+    reference?: TooltipTriggerProps['reference']
 }
 
-const props = withDefaults(defineProps<TooltipProps>(), {
+withDefaults(defineProps<TooltipProps>(), {
     open: undefined,
     variant: 'single',
 })
@@ -17,21 +22,15 @@ defineEmits<{
     (e: 'clickContent', event: Event): void
 }>()
 
-const tooltipRootProps = computed(() => {
-    const rootProps: any = {}
-
-    if (props.open !== undefined) {
-        rootProps.open = props.open
-    }
-
-    return rootProps
-})
+// `open` forces the state when set; otherwise hover/focus drive it. The root is
+// always controlled so an `open` that arrives after mount is still forwarded.
+const interactionOpen = ref(false)
 </script>
 
 <template>
     <TelaTooltipProvider :disabled="disabled" :delay-duration="delayDuration">
-        <TelaTooltipRoot v-bind="tooltipRootProps">
-            <TelaTooltipTrigger :class="triggerClass" :tabindex="-1">
+        <TelaTooltipRoot :open="open ?? interactionOpen" @update:open="interactionOpen = $event">
+            <TelaTooltipTrigger :class="triggerClass" :as-child="asChild" :reference="reference" :tabindex="asChild ? undefined : -1">
                 <slot />
             </TelaTooltipTrigger>
             <TelaTooltipBody

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.73.0",
+    "version": "1.74.0",
     "type": "module",
     "files": [
         "app.config.ts",

package/types/chat-answer.ts

@@ -0,0 +1,27 @@
+export interface TelaChatAnswerOption {
+    id: string
+    label: string
+    description?: string
+}
+
+export interface TelaChatAnswerQuestion {
+    id: string
+    title: string
+    type: 'single' | 'multiple'
+    options: TelaChatAnswerOption[]
+    recommendFirst?: boolean
+}
+
+export interface TelaChatAnswerLabels {
+    minimize: string
+    expand: string
+    dismiss: string
+    previous: string
+    next: string
+    skip: string
+    continue: string
+    recommended: string
+    selected: (count: number) => string
+    progress: (current: number, total: number) => string
+    submitting: string
+}

package/types/index.ts

@@ -1,2 +1,3 @@
+export * from './chat-answer'
 export * from './custom-icon'
 export * from './status'