@meistrari/tela-build 1.58.0 → 1.59.1

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

@@ -72,21 +72,6 @@ onBeforeUnmount(() => {
     --at-apply: 'absolute bottom-0 left-0 right-0 z-2 mx-12px mb-12px';
 }
 
-[data-chat-body]:has([data-chat-prompt-input]) [data-reka-scroll-area-viewport]:has([data-chat-conversation]),
-[data-chat-body]:has([data-chat-prompt-input]) > [data-chat-conversation] {
-    animation: none;
-    mask: linear-gradient(
-        to bottom,
-        #000 calc(100% - var(--chat-input-height, 64px) - 40px),
-        transparent calc(100% - var(--chat-input-height, 64px))
-    );
-    -webkit-mask: linear-gradient(
-        to bottom,
-        #000 calc(100% - var(--chat-input-height, 64px) - 40px),
-        transparent calc(100% - var(--chat-input-height, 64px))
-    );
-}
-
 [data-chat-body]:has([data-chat-prompt-input]) .chat-conversation-scrollbar {
     top: 8px !important;
     bottom: calc(var(--chat-input-height, 64px) + 16px) !important;

package/components/tela/chat/chat-widget-header.vue

@@ -3,25 +3,19 @@ withDefaults(defineProps<{
     title?: string
     newConversationLabel?: string
     historyLabel?: string
-    closeLabel?: string
 }>(), {
     newConversationLabel: 'New conversation',
     historyLabel: 'Conversation history',
-    closeLabel: 'Close',
 })
 
 const emit = defineEmits<{
     (e: 'newConversation'): void
     (e: 'selectConversation', id: string): void
-    (e: 'close'): void
 }>()
 
 const historyOpen = ref(false)
 const historySelection = ref('')
 
-const instance = getCurrentInstance()
-const hasCloseListener = computed(() => Boolean(instance?.vnode.props?.onClose))
-
 function selectConversation(id: unknown) {
     if (typeof id !== 'string' || !id)
         return
@@ -52,7 +46,7 @@ function selectConversation(id: unknown) {
                 size="sm"
                 color="secondary"
                 :aria-label="newConversationLabel"
-                @click="emit('newConversation')"
+                @click.stop.prevent="emit('newConversation')"
             />
             <TelaComboboxRoot
                 v-if="$slots.history"
@@ -83,14 +77,6 @@ function selectConversation(id: unknown) {
                     <slot v-if="historyOpen" name="history" />
                 </TelaComboboxList>
             </TelaComboboxRoot>
-            <TelaIconButton
-                v-if="hasCloseListener"
-                icon="i-ph-x"
-                size="sm"
-                color="secondary"
-                :aria-label="closeLabel"
-                @click="emit('close')"
-            />
         </div>
     </div>
 </template>

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

@@ -35,7 +35,7 @@ const resolvedEmptyMessage = computed(() =>
         :placeholder="searchPlaceholder"
     />
 
-    <div flex flex-col gap-2px p-4px max-h-280px overflow-y-auto>
+    <div flex flex-col gap-2px p-4px max-h-280px overflow-y-auto no-scrollbar>
         <template v-if="showSkeleton">
             <div
                 v-for="row in skeletonRows"

package/components/tela/chat/chat.mdx

@@ -163,10 +163,7 @@ const conversations = [
     <div class="relative w-full h-560px">
     <TelaChatFloatingWindow contained :open="isOpen" @update:open="isOpen = $event">
         <!-- The default launcher is TelaChatFloatingWindowTrigger; override it via the #launcher slot. -->
-        <TelaChatWidgetHeader
-            title="Release notes review"
-            @close="isOpen = false"
-        >
+        <TelaChatWidgetHeader title="Release notes review">
             <template #history>
                 <TelaChatWidgetHistoryList :items="conversations" />
             </template>
@@ -1310,7 +1307,6 @@ type TextShimmerProps = {
 - **`TelaChatSidepanelWindow` goes last in a flex row.** It is in-flow (`position: sticky`), so the row reserves its width; never absolutely position it over the page.
 - **Never add extra scroll wrappers around `TelaChatConversation`.** Attrs land on the element that actually scrolls; wrapping it breaks the fog and `scrollToBottom()`.
 - **Only pass `title` to `TelaChatWidgetHeader` once the conversation has one.** The header hides its title when none is provided.
-- **The header's close button renders only when a `close` listener is bound.** Bind `@close` in dismissible shells (floating window); omit it in the always-open sidepanel and no close button appears.
 - **Never change the model selector's `side`/`align` in a real chat UI.** The defaults (`top`/`end`) are correct wherever the prompt input sits at the bottom; `bottom`/`start` exists for constrained previews like the docs demos.
 - **Model images belong in the model selector's options list, never in its trigger.** Pass provider icons through `options` and they render in the dropdown; the closed trigger shows only the selected model's label (the component enforces this with `label-icon-visible: false`).
 

package/components/tela/chat/conversation/conversation.vue

@@ -42,8 +42,10 @@ defineExpose({ scrollToBottom })
 
 const contentRef = ref<HTMLElement | null>(null)
 
-const { fogClass } = useScrollFog(contentRef, () => {
-    const root = scrollAreaRef.value?.$el as HTMLElement | null | undefined
+const fogTarget = computed(() => contentRef.value ?? containerRef.value)
+
+const { fogClass } = useScrollFog(fogTarget, () => {
+    const root = (scrollAreaRef.value?.$el as HTMLElement | null | undefined) ?? containerRef.value
 
     return root?.clientHeight ?? Number.POSITIVE_INFINITY
 })
@@ -62,7 +64,42 @@ const { fogClass } = useScrollFog(contentRef, () => {
             <slot />
         </div>
     </TelaScrollArea>
-    <div v-else ref="containerRef" data-chat-conversation v-bind="$attrs" flex-1 overflow-y-auto>
+    <div v-else ref="containerRef" data-chat-conversation v-bind="$attrs" flex-1 overflow-y-auto :class="[fogClass]">
         <slot />
     </div>
 </template>
+
+<style>
+/* Bottom-only fog: content fades out over the last `--chat-fog-size` pixels of the visible area. */
+@property --chat-fog-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 28px;
+}
+
+.scroll-fog[data-chat-conversation],
+.scroll-fog:has([data-chat-conversation]) [data-reka-scroll-area-viewport] {
+    --chat-fog-size: 28px;
+    mask: linear-gradient(
+        to bottom,
+        #000 calc(100% - var(--chat-fog-size)),
+        transparent
+    );
+}
+
+/* Where scroll-driven animations exist, the fog retracts over the last 28px of scroll. */
+@supports (animation-timeline: scroll()) {
+    .scroll-fog[data-chat-conversation],
+    .scroll-fog:has([data-chat-conversation]) [data-reka-scroll-area-viewport] {
+        animation: fog-retract both linear;
+        animation-timeline: scroll(self);
+        animation-range: calc(100% - 28px) 100%;
+    }
+
+    @keyframes fog-retract {
+        to {
+            --chat-fog-size: 0px;
+        }
+    }
+}
+</style>

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

@@ -56,6 +56,11 @@ onBeforeUnmount(() => {
     unlockScroll()
 })
 
+function handleInteractOutside(event: CustomEvent) {
+    if (event.target instanceof Element && event.target.closest('[data-reka-popper-content-wrapper]'))
+        event.preventDefault()
+}
+
 function focusEditor(event: Event) {
     event.preventDefault()
 
@@ -104,6 +109,7 @@ function focusEditor(event: Event) {
                 'overflow-hidden rounded-12px! border-black/12! flex flex-col [box-shadow:-24px_-24px_249px_0_rgba(0,0,0,0.08),-12px_-8px_48px_0_rgba(0,0,0,0.03)]!',
             )"
             @open-auto-focus="focusEditor"
+            @interact-outside="handleInteractOutside"
         >
             <slot />
         </TelaPopoverContent>
@@ -111,38 +117,7 @@ function focusEditor(event: Event) {
 </template>
 
 <style>
-.popover-enter-exit {
+.widget-popover {
   transform-origin: var(--reka-popover-content-transform-origin);
-
-  &[data-state="open"] {
-    animation: slideDownAndFade 0.12s ease-out forwards;
-  }
-
-  &[data-state="closed"] {
-      animation: slideUpAndFade 0.12s ease-out forwards;
-      animation-delay: 0s;
-  }
-}
-
-@keyframes slideDownAndFade {
-  from {
-    opacity: 0;
-    transform: scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes slideUpAndFade {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.97);
-  }
 }
 </style>

package/components/tela/chat/message/message-content.vue

@@ -1,19 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
     /** `contained` renders the bubble surface; `flat` renders bare content. */
     variant?: 'contained' | 'flat'
-    /** Which side the bubble tail (tight corner) sits on. `contained` only. */
-    align?: 'start' | 'end'
 }>(), {
     variant: 'contained',
-    align: 'end',
 })
-
-const tailClass = computed(() => props.align === 'end'
-    ? 'rounded-tl-12px rounded-tr-12px rounded-br-12px rounded-bl-12px'
-    : 'rounded-tl-4px rounded-tr-16px rounded-br-16px rounded-bl-16px')
 </script>
 
 <template>
@@ -24,7 +15,7 @@ const tailClass = computed(() => props.align === 'end'
         gap-8px
         px-12px py-10px
         bg-muted text-primary
-        :class="tailClass"
+        rounded-12px
     >
         <slot />
     </div>

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

@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ComboboxPortal :disabled="props.disablePortal">
         <ComboboxContent
             v-bind="forwarded"
-            :class="cn('ComboboxContent z-[9999] [box-shadow:0_4px_16px_0_rgba(85,91,98,0.14)] overflow-hidden outline-none rounded-[16px] bg border-0.5px border pointer-events-auto', props.class)"
+            :class="cn('ComboboxContent popover-enter-exit z-[9999] [box-shadow:0_4px_16px_0_rgba(85,91,98,0.14)] overflow-hidden outline-none rounded-[16px] bg border-0.5px border pointer-events-auto', props.class)"
         >
             <ComboboxViewport>
                 <slot />
@@ -44,37 +44,5 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 .ComboboxContent {
   min-width: var(--reka-combobox-trigger-width);
   transform-origin: var(--reka-combobox-content-transform-origin);
-
-  &[data-state="open"] {
-     animation: slideDownAndFade 0.12s ease-out forwards;
-  }
-
-  &[data-state="closed"] {
-     animation: slideUpAndFade 0.12s ease-out forwards;
-     animation-delay: 0s;
-  }
-
-}
-
-@keyframes slideDownAndFade {
-    from {
-        opacity: 0;
-        transform: scale(0.97);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes slideUpAndFade {
-    from {
-        opacity: 1;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.97);
-    }
 }
 </style>

package/components/tela/date-range-picker.vue

@@ -113,7 +113,8 @@ const defaultLabel = computed(() => {
                 rounded-xl
                 bg-white
                 shadow-lg
-                class="will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+                class="popover-enter-exit will-change-[transform,opacity]"
+                style="transform-origin: var(--reka-date-range-picker-content-transform-origin)"
             >
                 <DateRangePickerArrow fill-white />
                 <DateRangePickerCalendar

package/components/tela/dropdown-menu/DropdownMenuContent.vue

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuPortal>
         <DropdownMenuContent
             v-bind="forwarded"
-            :class="cn('DropdownMenuContent z-50 min-w-60 overflow-hidden rounded-2xl border-[0.5px] border-gray-300 bg-white-1000 p-1 shadow-sm', props.class)"
+            :class="cn('DropdownMenuContent popover-enter-exit z-50 min-w-60 overflow-hidden rounded-2xl border-[0.5px] border-gray-300 bg-white-1000 p-1 shadow-sm', props.class)"
         >
             <slot />
         </DropdownMenuContent>
@@ -39,36 +39,5 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <style>
 .DropdownMenuContent {
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-
-  &[data-state="open"] {
-     animation: slideDownAndFade 0.12s ease-out forwards;
-  }
-
-  &[data-state="closed"] {
-     animation: slideUpAndFade 0.12s ease-out forwards;
-     animation-delay: 0s;
-  }
-}
-
-@keyframes slideDownAndFade {
-    from {
-        opacity: 0;
-        transform: scale(0.97);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes slideUpAndFade {
-    from {
-        opacity: 1;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.97);
-    }
 }
 </style>

package/components/tela/menubar/menubar-content.vue

@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps)
             v-bind="forwardedProps"
             :class="
                 cn(
-                    'MenubarContent z-50 min-w-60 overflow-hidden rounded-2xl border-[0.5px] border-strong bg p-4px',
+                    'MenubarContent popover-enter-exit z-50 min-w-60 overflow-hidden rounded-2xl border-[0.5px] border-strong bg p-4px',
                     '[box-shadow:0_4px_16px_0_rgba(85,91,98,0.14)]',
                     props.class,
                 )
@@ -43,36 +43,5 @@ const forwardedProps = useForwardProps(delegatedProps)
 <style>
 .MenubarContent {
   transform-origin: var(--reka-menubar-content-transform-origin);
-
-  &[data-state="open"] {
-     animation: slideDownAndFade 0.12s ease-out forwards;
-  }
-
-  &[data-state="closed"] {
-     animation: slideUpAndFade 0.12s ease-out forwards;
-     animation-delay: 0s;
-  }
-}
-
-@keyframes slideDownAndFade {
-    from {
-        opacity: 0;
-        transform: scale(0.97);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes slideUpAndFade {
-    from {
-        opacity: 1;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.97);
-    }
 }
 </style>

package/components/tela/menubar/menubar.vue

@@ -220,7 +220,7 @@ function handleItemSelect(option: any) {
                         'flying-shadow',
                         'b-0.5px b-gray-300',
                         'overflow-hidden',
-                        'will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+                        'will-change-[opacity,transform]',
                     )"
                     :style="{
                         width: compact ? 'fit-content' : 'auto',

package/components/tela/multiple-select/multiple-select.vue

@@ -222,10 +222,6 @@ const remainingItems = computed(() => {
 
 const isSelected = (value: string) => selectedValues.value.includes(value)
 
-const animationClass = `
-    will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade
-`
-
 const buttonLabel = computed(() => props.buttonLabel ?? (selectedOptions.value.length === 0 ? t('common.add') : t('common.addAnother')))
 
 function toggleSelection(value: string) {
@@ -449,10 +445,9 @@ function handleSearchKeydown(e: KeyboardEvent) {
 
             <SelectPortal>
                 <SelectContent
-                    class="SelectContent bg-white rounded-10px"
+                    class="SelectContent popover-enter-exit bg-white rounded-10px"
                     flying-shadow
                     b="0.5px border" overflow-hidden
-                    :class="[animationClass]"
                     :side-offset="4"
                     relative
                     position="popper"
@@ -617,35 +612,5 @@ function handleSearchKeydown(e: KeyboardEvent) {
 <style>
 .SelectContent {
   transform-origin: var(--reka-select-content-transform-origin);
-
-  &[data-state="open"] {
-     animation: slideDownAndFade 0.12s ease-out;
-  }
-
-  &[data-state="closed"] {
-     animation: slideUpAndFade 0.12s ease-out;
-  }
-}
-
-@keyframes slideDownAndFade {
-    from {
-        opacity: 0;
-        transform: scale(0.97);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes slideUpAndFade {
-    from {
-        opacity: 1;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.97);
-    }
 }
 </style>

package/components/tela/select-menu/select-menu-content.vue

@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <SelectContent
             v-bind="{ ...forwarded, ...$attrs }"
             :class="cn(
-                'SelectContent relative z-999 max-h-80 overflow-hidden rounded-[10px] border-[0.5px] border-gray-300 bg-white-1000',
+                'SelectContent popover-enter-exit relative z-999 max-h-80 overflow-hidden rounded-[10px] border-[0.5px] border-gray-300 bg-white-1000',
                 props.class,
             )"
             :side-offset="4"
@@ -52,7 +52,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         v-else
         v-bind="{ ...forwarded, ...$attrs }"
         :class="cn(
-            'SelectContent relative z-999 max-h-80 overflow-hidden rounded-[16px] border-[0.5px] border-gray-200 bg-white-1000',
+            'SelectContent popover-enter-exit relative z-999 max-h-80 overflow-hidden rounded-[16px] border-[0.5px] border-gray-200 bg-white-1000',
             props.class,
         )"
         :side-offset="4"
@@ -69,35 +69,5 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 .SelectContent {
   min-width: var(--reka-select-trigger-width);
   transform-origin: var(--reka-select-content-transform-origin);
-
-  &[data-state="open"] {
-     animation: slideDownAndFade 0.12s ease-out;
-  }
-
-  &[data-state="closed"] {
-     animation: slideUpAndFade 0.12s ease-out;
-  }
-}
-
-@keyframes slideDownAndFade {
-    from {
-        opacity: 0;
-        transform: scale(0.97);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes slideUpAndFade {
-    from {
-        opacity: 1;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.97);
-    }
 }
 </style>

package/components/tela/tags/tags-select.mdx

@@ -265,9 +265,8 @@ The overlapping dot effect is achieved using CSS mask:
 }
 ```
 
-### Animation Keyframes
-- **slideDownAndFade**: Entry animation with scale and translate
-- **slideUpAndFade**: Exit animation with scale and translate
+### Animation
+- Uses the global `popover-enter-exit` class (`css/animations.css`) for enter/exit scale + fade
 - Transform origin set to popover content origin
 
 ## Integration with Form Systems

package/components/tela/tags/tags-select.vue

@@ -489,9 +489,9 @@ updateAllCreatedTags()
                 as="button"
                 :disabled="props.disabled"
                 :class="cn(
-                    'group w-fit flex items-center gap-[6px] px-[12px] py-[7px] rounded-[10px] bg-background border-0.5px border',
+                    'group w-fit select-none flex items-center gap-[6px] px-[12px] py-[7px] rounded-[10px] bg-background border-0.5px border',
                     'transition ease-in-out duration-80 hover:border-strong hover:bg-subtle data-[state=open]:border-strong data-[state=open]:bg-subtle',
-                    'active:bg-gray-100 active:border-gray-400/60 [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+                    'active:bg-muted active:border-gray-400/60 [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
                     props.disabled && 'opacity-50 cursor-not-allowed hover:bg-background',
                     props.class,
                 )"
@@ -513,7 +513,7 @@ updateAllCreatedTags()
                 </span>
             </PopoverTrigger>
             <PopoverPortal>
-                <PopoverContent class="TagsSelectContent z-[99999]" :side-offset="8" w-220px pt-12px px-16px bg-background border-0.5px border-border shadow-lg rounded-12px overflow-hidden>
+                <PopoverContent class="TagsSelectContent popover-enter-exit z-[99999]" :side-offset="8" w-220px pt-12px px-16px bg-background border-0.5px border-border shadow-lg rounded-12px overflow-hidden>
                     <div
                         class="[transition:height_0.25s_ease-out]"
                         :style="computedHeightContent ? { height: computedHeightContent } : {}"
@@ -665,36 +665,5 @@ updateAllCreatedTags()
 
   .TagsSelectContent {
     transform-origin: var(--reka-popover-content-transform-origin);
-
-    &[data-state="open"] {
-      animation: slideDownAndFade 0.12s ease-out forwards;
-    }
-
-    &[data-state="closed"] {
-       animation: slideUpAndFade 0.12s ease-out forwards;
-       animation-delay: 0s;
-    }
-  }
-
-  @keyframes slideDownAndFade {
-    from {
-      opacity: 0;
-      transform: scale(0.97);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes slideUpAndFade {
-    from {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.97);
-    }
   }
 </style>

package/css/animations.css

@@ -0,0 +1,36 @@
+/*
+ * Shared enter/exit animation for anchored overlay content (popover, combobox,
+ * select menu, dropdown, menubar). Add `popover-enter-exit` to the content
+ * element and set its `transform-origin` from the component's
+ * `--reka-*-content-transform-origin` variable so the scale animates from the
+ * anchor side.
+ */
+.popover-enter-exit[data-state='open'] {
+  animation: slideDownAndFade 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.popover-enter-exit[data-state='closed'] {
+  animation: slideUpAndFade 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}

package/nuxt.config.ts

@@ -90,6 +90,7 @@ export default defineNuxtConfig({
         '@fontsource-variable/geist-mono',
         join(currentDir, './css/reset.css'),
         join(currentDir, './css/text.css'),
+        join(currentDir, './css/animations.css'),
     ],
 
     vite: {

package/package.json

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