@meistrari/tela-build 1.71.0 → 1.73.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 Latest updates and announcements.
 
+## September 17, 2026
+
+- **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
+
+- **New `TelaLoadersSquare`.** The animated square from the splash screen is now its own component, with `size="md"` (32×32) and `size="sm"` (12×12). `TelaLoadersSplashScreen` and `TelaChatWorkingIndicator` render it. See [Square Loader](/components/square).
+
+### Button
+
+- **`size="sm"` icons are now 10px.** The icon size lookup compared against the size's class string instead of the size name, so every size rendered the 13px default. `md` and `lg` are unchanged. See [Button](/components/button).
+- **`size="lg"` is slightly tighter.** Vertical padding goes from 10px to 8px and the radius from 13px to 12px.
+- **Icon gap is now 4px.** Icons get a 2px padded wrapper, so the gap between icon and label drops from 6px to 4px.
+- **Icons sit on the cap line.** Leading and trailing icons (and the loading spinner) are lifted half a pixel so they center on the capital letters instead of rendering a device pixel low on 2x screens.
+
+### Chat: Working indicator
+
+- **New `TelaChatWorkingIndicator`.** Running-turn row for the conversation: `TelaLoadersSquare` (`sm`), a `label` (`Working` by default), and an elapsed counter driven by `startedAt` or `elapsed`. Render it whenever a turn is running; the host composes anything else (such as `TelaChatTextShimmer`) around it. See [Chat → Working Indicator](/templates/chat#working-indicator).
+- **New `TelaChatStopRunButton`.** While a turn runs, render it in place of `TelaChatPromptInput`: a centered secondary pill with a stop icon that emits `stop`. Wrap it and `TelaChatPromptInput` in the new `TelaChatAnimateEnter` inside an `<AnimatePresence mode="popLayout">` to cross-fade them.
+- **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.
+
 ## 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/button/button.mdx

@@ -67,6 +67,24 @@ A versatile button component with multiple variants, sizes, and states. Supports
 </TelaButton>
 ```
 
+### Sizes
+
+Three sizes, `md` by default. Each one sets its own text, padding, radius and icon size, so a leading or trailing icon scales with the button.
+
+```vue
+<div class="flex items-center gap-12px">
+  <TelaButton size="sm" icon="i-ph-plus" leading>Small</TelaButton>
+  <TelaButton size="md" icon="i-ph-plus" leading>Medium</TelaButton>
+  <TelaButton size="lg" icon="i-ph-plus" leading>Large</TelaButton>
+</div>
+```
+
+| size | text | padding | radius | icon |
+|---|---|---|---|---|
+| `sm` | 12px / 16px | 4px × 10px | 9px | 10px |
+| `md` | 14px / 18px | 7px × 12px | 11px | 13px |
+| `lg` | 16px / 20px | 8px × 16px | 12px | 13px |
+
 ### With Icon Code
 
 ```vue

package/components/tela/button/button.vue

@@ -37,7 +37,7 @@ const hasTrailingIcon = computed(() => !!((props.loading && !props.leading) || s
 const sizeStyle = computed(() => (({
     sm: '[--padding-x:10px] text-[12px] leading-[16px] tracking-normal py-[4px] rounded-[9px]',
     md: '[--padding-x:12px] text-[14px] leading-[18px] -tracking-[0.15px] py-[7px] rounded-[11px]',
-    lg: '[--padding-x:16px] text-[16px] leading-[20px] -tracking-[0.15px] py-[10px] rounded-[13px]',
+    lg: '[--padding-x:16px] text-[16px] leading-[20px] -tracking-[0.15px] py-[8px] rounded-[12px]',
 }) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
 
 const paddingStyle = computed(() => [
@@ -64,20 +64,11 @@ const resolvedStyle = computed(() => [
 
 const tag = computed(() => props.to ? NuxtLink : 'button')
 
-const iconSize = computed(() => {
-    switch (sizeStyle.value) {
-        case 'xs':
-            return '11px'
-        case 'sm':
-            return '11px'
-        case 'md':
-            return '13px'
-        case 'lg':
-            return '13px'
-        default:
-            return '13px'
-    }
-})
+const iconSize = computed(() => (({
+    sm: '10px',
+    md: '13px',
+    lg: '13px',
+}) as Record<ButtonSize, string>)[resolvedSize.value] ?? '13px')
 </script>
 
 <template>
@@ -85,19 +76,42 @@ const iconSize = computed(() => {
         :is="tag"
         :to="to"
         :class="cn(
-            'box-border font-540 select-none flex items-center justify-center gap-6px ease-out duration-40',
+            'box-border font-540 select-none flex items-center justify-center gap-4px ease-out duration-40',
             disabled ? 'cursor-not-allowed' : 'cursor-pointer',
             resolvedStyle,
         )"
         :disabled="disabled"
         :target="target"
     >
-        <TelaIconSpinner v-if="loading && leading" class="animate-spin" />
+        <div v-if="loading && leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIconSpinner class="animate-spin" />
+        </div>
+
         <slot v-else-if="$slots.leading" name="leading" />
-        <TelaIcon v-else-if="icon && leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
+
+        <div v-else-if="icon && leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIcon :name="icon" :size="iconSize" :color="iconColorStyle" />
+        </div>
+
         <slot />
-        <TelaIconSpinner v-if="loading && !leading" class="animate-spin min-h-14px min-w-14px" />
+
+        <div v-if="loading && !leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIconSpinner class="animate-spin" />
+        </div>
+
         <slot v-else-if="$slots.trailing" name="trailing" />
-        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
+
+        <div v-else-if="icon && !leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIcon :name="icon" :size="iconSize" :color="iconColorStyle" />
+        </div>
     </component>
 </template>
+
+<style scoped>
+/* Optical alignment */
+@media (min-resolution: 1.5dppx) {
+    [data-button-icon] {
+        transform: translateY(-0.5px);
+    }
+}
+</style>

package/components/tela/chat/chat-animate-enter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+    /** Slide distance on enter/exit, as a CSS length or percentage of the element. */
+    offset?: string | number
+    scale?: number
+    duration?: number
+}>(), {
+    offset: '100%',
+    scale: 0.97,
+    duration: 0.16,
+})
+</script>
+
+<template>
+    <Motion
+        data-chat-animate-enter
+        :initial="{ opacity: 0, y: offset, scale }"
+        :animate="{ opacity: 1, y: 0, scale: 1 }"
+        :exit="{ opacity: 0, y: offset, scale }"
+        :transition="{ duration, ease: 'easeOut' }"
+    >
+        <slot />
+    </Motion>
+</template>

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

@@ -7,12 +7,16 @@ 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]'
 let inputObserver: ResizeObserver | null = null
 let slotObserver: MutationObserver | null = null
 let observedInput: HTMLElement | null = null
 
 function bindInputObserver() {
-    const input = rootRef.value?.querySelector<HTMLElement>('[data-chat-prompt-input]') ?? null
+    const input = rootRef.value?.querySelector<HTMLElement>(DOCK_SELECTOR) ?? null
 
     if (input === observedInput)
         return
@@ -68,10 +72,24 @@ onBeforeUnmount(() => {
     padding-bottom: calc(var(--chat-input-height, 64px) + 24px);
 }
 
-[data-chat-body] [data-chat-prompt-input] {
+/*
+ * 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.
+ */
+[data-chat-body] :is([data-chat-prompt-input]:not([data-chat-animate-enter] *), [data-chat-animate-enter]:has([data-chat-prompt-input])) {
     --at-apply: 'absolute bottom-0 left-0 right-0 z-2 mx-12px mb-12px';
 }
 
+/*
+ * While AnimatePresence (popLayout) holds an exiting dock element it pins it
+ * with `left`/`top` measured from the offsets, which already include the side
+ * margin; keeping the margin on top of that shifts it sideways mid-fade.
+ */
+[data-chat-body] :is([data-chat-prompt-input], [data-chat-animate-enter])[data-motion-pop-id] {
+    margin: 0 !important;
+}
+
 [data-chat-body]:has([data-chat-prompt-input]) .chat-conversation-scrollbar {
     top: 8px !important;
     bottom: calc(var(--chat-input-height, 64px) + 16px) !important;
@@ -86,7 +104,7 @@ onBeforeUnmount(() => {
     padding-bottom: calc(var(--chat-input-height, 64px) + 32px);
 }
 
-[data-chat-body][data-variant='page'] [data-chat-prompt-input] {
+[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])) {
     --at-apply: 'mx-24px mb-16px';
 }
 </style>

package/components/tela/chat/chat-stop-run-button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    label?: string
+    disabled?: boolean
+}>(), {
+    label: 'Stop Run',
+})
+
+const emit = defineEmits<{
+    (e: 'stop'): void
+}>()
+</script>
+
+<template>
+    <div data-chat-prompt-input :class="cn('flex justify-center', props.class)">
+        <TelaButton
+            type="button"
+            variant="secondary"
+            size="sm"
+            leading
+            icon="i-ph-square-bold"
+            :disabled="props.disabled"
+            @click="emit('stop')"
+        >
+            {{ props.label }}
+        </TelaButton>
+    </div>
+</template>

package/components/tela/chat/chat-working-indicator.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    /** Row label next to the loader. */
+    label?: string
+    /** Epoch ms of when work started; the elapsed counter ticks from it every second. */
+    startedAt?: number
+    /** Elapsed seconds controlled by the host. Takes precedence over `startedAt`. */
+    elapsed?: number
+}>(), {
+    label: 'Working',
+})
+
+const now = ref(Date.now())
+let timer: ReturnType<typeof setInterval> | null = null
+
+function stopTicking() {
+    if (timer)
+        clearInterval(timer)
+    timer = null
+}
+
+function syncTicking() {
+    stopTicking()
+
+    if (props.elapsed !== undefined || props.startedAt === undefined)
+        return
+
+    now.value = Date.now()
+
+    timer = setInterval(() => {
+        now.value = Date.now()
+    }, 1000)
+}
+
+onMounted(() => {
+    syncTicking()
+    watch(() => [props.startedAt, props.elapsed], syncTicking)
+})
+
+onUnmounted(stopTicking)
+
+const elapsedSeconds = computed(() => {
+    if (props.elapsed !== undefined)
+        return Math.max(0, Math.floor(props.elapsed))
+
+    if (props.startedAt === undefined)
+        return undefined
+
+    return Math.max(0, Math.floor((now.value - props.startedAt) / 1000))
+})
+
+const elapsedLabel = computed(() => {
+    const seconds = elapsedSeconds.value
+
+    if (seconds === undefined)
+        return undefined
+
+    if (seconds < 60)
+        return `${seconds}s`
+
+    const minutes = Math.floor(seconds / 60)
+
+    return `${minutes}m ${seconds % 60}s`
+})
+</script>
+
+<template>
+    <div
+        :class="cn('flex items-center gap-10px text-start', props.class)"
+        role="status"
+        aria-live="polite"
+    >
+        <TelaLoadersSquare size="sm" class="shrink-0" />
+        <div class="flex items-center gap-6px">
+            <h5 class="heading-h5-semibold text-primary">
+                {{ props.label }}
+            </h5>
+            <span v-if="elapsedLabel" aria-hidden="true" class="body-14-regular text-tertiary tabular-nums">{{ elapsedLabel }}</span>
+        </div>
+    </div>
+</template>