@meistrari/tela-build 1.52.1 → 1.53.0

package/components/tela/button/button.vue

@@ -25,40 +25,50 @@ const resolvedVariant = computed(() =>
     || 'primary',
 )
 
+const slots = useSlots()
+
+const hasLeadingIcon = computed(() => !!((props.loading && props.leading) || slots.leading || (props.icon && props.leading)))
+const hasTrailingIcon = computed(() => !!((props.loading && !props.leading) || slots.trailing || (props.icon && !props.leading)))
+
 const sizeStyle = computed(() => (({
-    sm: 'text-12px leading-16px font-580 tracking-normal px-10px py-4px rounded-9px',
-    md: 'text-14px leading-18px font-580 -tracking-0.15px px-12px py-7px rounded-11px [&>svg]:text-10px',
-    lg: 'text-16px leading-20px font-580 -tracking-0.15px px-16px py-10px rounded-13px [&>svg]:text-12px',
+    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]',
 }) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
 
+const paddingStyle = computed(() => [
+    hasLeadingIcon.value ? 'pl-[calc(var(--padding-x)_-_2px)]' : 'pl-[var(--padding-x)]',
+    hasTrailingIcon.value ? 'pr-[calc(var(--padding-x)_-_2px)]' : 'pr-[var(--padding-x)]',
+].join(' '))
+
 const variantStyle = computed(() => (({
     'primary': fold`
-        bg-neutral-900 text-white
-        hover:bg-neutral-800
-        active:bg-neutral-700
+        bg-btn-primary text-inverse
+        hover:bg-btn-primary-hover
+        active:bg-btn-primary-active
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'secondary': fold`
-        bg-white text-neutral-900 border border-0.5px
+        bg-btn-secondary text-contrast border border-0.5px
       [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
-        hover:bg-subtle hover:border-strong
-        active:bg-muted active:border-neutral-400/60
+        hover:bg-btn-secondary-hover hover:border-strong
+        active:bg-btn-secondary-active active:border-neutral-400/60
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'ghost': fold`
-        bg-transparent text-gray-900
-        hover:bg-gray-100
+        bg-btn-ghost text-contrast
+        hover:bg-btn-ghost-hover
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'disabled': fold`
-        bg-gray-100 text-gray-400 !cursor-not-allowed
+        bg-btn-disabled text-tertiary !cursor-not-allowed
     `,
     'loading': fold`
-        bg-gray-200 text-gray-600
+        bg-btn-loading text-neutral-600
     `,
     'danger': fold`
-        bg-red-100 text-red-500
-        hover:bg-red-100/80
+        bg-btn-danger text-red-500
+        hover:bg-btn-danger-hover
         focus:outline-red-600
     `,
     'ghost-danger': fold`
@@ -67,14 +77,26 @@ const variantStyle = computed(() => (({
         focus:outline-red-600
     `,
     'dark': fold`
-        bg-white/4 text-white border-0.5px border-white/16
-        hover:bg-white/8 active:bg-white/10
+        bg-btn-dark text-white border-0.5px border-white/16
+        hover:bg-btn-dark-hover active:bg-btn-dark-active
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
 }) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
 
+const iconColorStyle = computed(() => (({
+    'primary': 'icon-inverse',
+    'secondary': 'icon-secondary',
+    'ghost': 'icon-secondary',
+    'disabled': 'icon-subtle',
+    'loading': 'icon-tertiary',
+    'danger': 'red-500',
+    'ghost-danger': 'red-700',
+    'dark': 'icon-subtle',
+}) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
+
 const resolvedStyle = computed(() => [
     sizeStyle.value,
+    paddingStyle.value,
     variantStyle.value,
 ].join(' '))
 
@@ -100,19 +122,20 @@ const iconSize = computed(() => {
     <component
         :is="tag"
         :to="to"
-        :class="resolvedStyle" ease-out duration-40 flex items-center justify-center gap-6px
+        :class="cn(
+            'box-border font-540 select-none flex items-center justify-center gap-6px ease-out duration-40',
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+            resolvedStyle,
+        )"
         :disabled="disabled"
-        :cursor="disabled ? 'not-allowed' : 'pointer'"
         :target="target"
-        border-box
-        select-none
     >
-        <TelaIconSpinner v-if="loading && leading" animate-spin />
+        <TelaIconSpinner v-if="loading && leading" class="animate-spin" />
         <slot v-else-if="$slots.leading" name="leading" />
-        <TelaIcon v-else-if="icon && leading" :name="icon" :size="iconSize" min-h-14px min-w-14px />
+        <TelaIcon v-else-if="icon && leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
         <slot />
-        <TelaIconSpinner v-if="loading && !leading" animate-spin ml-0.5 />
+        <TelaIconSpinner v-if="loading && !leading" class="animate-spin min-h-14px min-w-14px" />
         <slot v-else-if="$slots.trailing" name="trailing" />
-        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" />
+        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
     </component>
 </template>

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

@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 <template>
     <ComboboxGroup
         v-bind="delegatedProps"
-        :class="cn('overflow-hidden py-4px px-4px', props.class)"
+        :class="cn('overflow-hidden p-[4px]', props.class)"
     >
         <slot />
     </ComboboxGroup>

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

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 <template>
     <ComboboxItemIndicator
         v-bind="delegatedProps"
-        :class="cn('text-gray-500', props.class)"
+        :class="cn('text-icon-secondary', props.class)"
     >
         <slot />
     </ComboboxItemIndicator>

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

@@ -8,6 +8,8 @@ import {
 } from 'reka-ui'
 import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<ComboboxInputProps & {
     class?: HTMLAttributes['class']
 }>()
@@ -20,10 +22,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <ComboboxInput
-        v-bind="forwarded"
-        :class="cn('flex h-10 w-full bg border-b-[0.5px] border-border rounded-xl px-3 py-1 body-14-regular text-primary transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-tertiary focus-visible:bg focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', props.class)"
-    >
-        <slot />
-    </ComboboxInput>
+    <div class="relative">
+        <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center pl-[13px]">
+            <TelaIcon name="i-ph-magnifying-glass-bold" size="12px" class="text-tertiary" />
+        </span>
+        <ComboboxInput
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="cn('flex h-[36px] w-full bg border-b-[0.5px] border-border pl-32px pr-3  body-14-regular text-primary transition-colors placeholder:text-tertiary focus-visible:bg focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', $slots.deleteSearchValue && 'pr-30px', props.class)"
+        >
+            <slot />
+        </ComboboxInput>
+        <div v-if="$slots.deleteSearchValue" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
+            <slot name="deleteSearchValue" />
+        </div>
+    </div>
 </template>

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

@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
     <ComboboxItem
         v-bind="forwarded"
-        :class="cn('relative flex cursor-pointer gap-2 select-none justify-between items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+        :class="cn('relative flex cursor-pointer gap-2 select-none justify-between items-center rounded-[12px] pl-[10px] pr-[8px] py-[7px] body-14-medium outline-none data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
     >
         <slot />
     </ComboboxItem>

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

@@ -15,7 +15,7 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
     <ComboboxLabel
         v-bind="forwarded"
-        :class="cn('px-2 py-1 body-12-semibold text-secondary', props.class)"
+        :class="cn('py-[4px] pl-[10px] body-12-semibold text-secondary', props.class)"
     >
         <slot />
     </ComboboxLabel>

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

@@ -28,20 +28,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <template v-if="props.disablePortal">
+    <ComboboxPortal :disabled="props.disablePortal">
         <ComboboxContent
             v-bind="forwarded"
-            :class="cn('ComboboxContent z-[9999] shadow-lg outline-none rounded-xl bg-white-1000 border-[0.5px] border-gray-200 pointer-events-auto', props.class)"
-        >
-            <ComboboxViewport>
-                <slot />
-            </ComboboxViewport>
-        </ComboboxContent>
-    </template>
-    <ComboboxPortal v-else>
-        <ComboboxContent
-            v-bind="forwarded"
-            :class="cn('ComboboxContent z-[9999] shadow-lg outline-none rounded-xl bg-white-1000 border-[0.5px] border-gray-200 pointer-events-auto', props.class)"
+            :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)"
         >
             <ComboboxViewport>
                 <slot />

package/components/tela/combobox/combobox-module-selector.vue

@@ -263,24 +263,14 @@ watch(innerValue, (value) => {
             @pointer-down-outside="closeOnOutsideClick ? undefined : $event.preventDefault()"
             @escape-key-down="closeOnEscape ? undefined : $event.preventDefault()"
         >
-            <div class="relative">
-                <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
-                    <TelaIcon name="i-ph-magnifying-glass" size="12px" class="text-gray-400" />
-                </span>
-                <ComboboxInput
-                    v-model="search" class="pl-7 rounded-b-none"
-                    :placeholder="t('models.labels.search')"
-                />
-                <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
-                    <button class="flex items-center justify-center" @click="handleDeleteSearchValue">
-                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-gray-400" />
-                    </button>
-                </div>
-            </div>
+            <ComboboxInput
+                v-model="search"
+                :placeholder="t('models.labels.search')"
+            />
             <Tabs v-model="selectedTab" :default-value="selectedTab">
                 <TabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
                     <TabsIndicator />
-                    <TabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab">
+                    <TabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab" size="sm">
                         {{ tab.label }}
                     </TabsTrigger>
                 </TabsList>
@@ -315,7 +305,7 @@ watch(innerValue, (value) => {
                         </TelaButton>
                     </ComboboxEmpty>
                     <template v-for="group in groupedOptions" :key="group.heading">
-                        <ComboboxGroup :heading="group.heading" class="py-2">
+                        <ComboboxGroup :heading="group.heading">
                             <ComboboxLabel v-if="!search.trim()" class="py-0 tracking-normal">
                                 {{ group.heading }}
                             </ComboboxLabel>

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

@@ -1,12 +1,30 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ComboboxTrigger } from 'reka-ui'
 import type { ComboboxTriggerProps } from 'reka-ui'
 
-const props = defineProps<ComboboxTriggerProps>()
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-    <ComboboxTrigger v-bind="props">
+    <ComboboxTrigger
+        v-bind="delegatedProps"
+        :class="cn(
+            'group select-none flex items-center justify-between body-14-semibold gap-3 rounded-10px pl-11px pr-10px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle',
+            'data-[state=open]:text-secondary data-[state=open]:border-strong data-[state=open]:bg-subtle',
+            '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+            props.class,
+        )"
+    >
         <slot />
+        <TelaIcon
+            name="i-ph-caret-down-bold"
+            size="15px"
+            color="icon-secondary"
+            class="shrink-0 transition-transform ease-out duration-150 group-data-[state=open]:rotate-180"
+        />
     </ComboboxTrigger>
 </template>

package/components/tela/combobox/combobox.stories.ts

@@ -93,7 +93,7 @@ const meta: Meta<typeof Combobox> = {
 
 export default meta
 
-export const Default: StoryObj<{ options: Array<{ value: string; label: string }> }> = {
+export const Default: StoryObj<{ options: Array<{ value: string, label: string }> }> = {
     render: args => ({
         components: { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, TelaIcon, TelaButton, ComboboxInput, ComboboxList, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel },
         setup() {
@@ -105,14 +105,14 @@ export const Default: StoryObj<{ options: Array<{ value: string; label: string }
                     return selectedValue.value
                 }
 
-                return args.options.find((option: any) => option.value === selectedValue.value)
+                return args.options.find(option => option.value === selectedValue.value)
             })
 
             const filteredOptions = computed(() => {
                 if (!search.value.trim()) {
                     return args.options
                 }
-                return args.options.filter((option: any) =>
+                return args.options.filter(option =>
                     option.label.toLowerCase().includes(search.value.toLowerCase()),
                 )
             })

package/components/tela/combobox/combobox.vue

@@ -1,19 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import type { Component, ComponentPublicInstance, Ref } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
 
-import ComboboxRoot from './combobox-root.vue'
-import ComboboxAnchor from './combobox-anchor.vue'
-import ComboboxEmpty from './combobox-empty.vue'
-import ComboboxGroup from './combobox-group.vue'
-import ComboboxInput from './combobox-input.vue'
-import ComboboxItem from './combobox-item.vue'
-import ComboboxItemIndicator from './combobox-indicator.vue'
-import ComboboxList from './combobox-list.vue'
-import ComboboxLabel from './combobox-label.vue'
-import ComboboxTrigger from './combobox-trigger.vue'
-
 interface ComboboxOption {
     value: string
     label: string
@@ -200,6 +188,8 @@ const groupedOptions = computed(() => {
     })).filter(group => group.children.length > 0)
 })
 
+const isEmpty = computed(() => groupedOptions.value.every(group => group.children.length === 0))
+
 const handleDeleteSearchValue = () => search.value = ''
 
 const keys = useMagicKeys()
@@ -324,17 +314,15 @@ watch(innerValue, (raw) => {
 </script>
 
 <template>
-    <ComboboxRoot
+    <TelaComboboxRoot
         v-model="innerValue" by="value" :open="isOpen" :disabled="readOnly" @update:open="onOpenChange"
         @update:model-value="handleSelect"
     >
-        <ComboboxAnchor>
-            <ComboboxTrigger
+        <TelaComboboxAnchor>
+            <TelaComboboxTrigger
                 as="button"
                 tabindex="0"
                 :class="cn(
-                    'group select-none flex items-center justify-between gap-3 rounded-10px px-8px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle data-[state=open]:border-strong data-[state=open]:bg-subtle',
-                    '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
                     !compact && 'w-full !py-2.5 pl-3 pr-3',
                     props.triggerClass,
                 )"
@@ -342,324 +330,188 @@ watch(innerValue, (raw) => {
                 <div :class="cn('flex items-center', !compact ? 'gap-2' : 'gap-1')">
                     <div v-if="currentOption?.icon && labelIconVisible" :class="cn('group-data-[state=open]:opacity-70', props.iconClass)">
                         <div v-if="currentOption?.icon && !(currentOption?.value === '')">
-                            <TelaIcon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" :color="colorIcon" />
+                            <TelaIcon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" :color="colorIcon" class="shrink-0" />
                             <Component
                                 :is="currentOption.icon"
                                 v-else
-                                :class="cn((currentOption?.label.startsWith('DeepSeek') || currentOption?.label.startsWith('Gemini')) && 'scale-75')"
+                                :class="cn('shrink-0', (currentOption?.label.startsWith('DeepSeek') || currentOption?.label.startsWith('Gemini')) && 'scale-75')"
                             />
                         </div>
                         <div v-if="!currentOption?.icon && currentOption?.externalIconSrc">
-                            <img :src="currentOption.externalIconSrc" :alt="labelModelIconAlt || currentOption?.label" w-16px h-16px>
+                            <img :src="currentOption.externalIconSrc" :alt="labelModelIconAlt || currentOption?.label" class="w-16px h-16px">
                         </div>
                     </div>
-                    <span
-                        :class="cn('truncate text-primary group-data-[state=open]:text-secondary',
-                                   compact ? 'text-sm font-580' : 'text-body-14-regular', props.labelClass)"
-                    >
+                    <span :class="cn('truncate text-primary group-data-[state=open]:text-secondary', props.labelClass)">
                         {{ currentOption?.triggerLabel || currentOption?.label }}
                     </span>
                 </div>
-                <TelaIcon name="i-ph-caret-down-bold" color="icon-secondary" :class="cn('transition-all ease-out duration-150', isOpen && 'rotate-180')" size="15px" />
-            </ComboboxTrigger>
-        </ComboboxAnchor>
-        <ComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" align="start">
-            <div v-if="hasSearchbar" class="relative">
-                <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
-                    <TelaIcon name="i-ph-magnifying-glass" :size="compact ? '12px' : '14px'" class="text-tertiary" />
-                </span>
-                <ComboboxInput
-                    v-model="search" :class="cn('rounded-b-none', compact ? 'pl-7' : 'pl-8')"
-                    :placeholder="inputPlaceholder || labelSearchPlaceholder"
-                />
-                <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
-                    <button class="flex items-center justify-center" @click="handleDeleteSearchValue">
-                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-tertiary" />
-                    </button>
-                </div>
-            </div>
-            <template v-if="hasTabs">
-                <TelaTabsRoot v-model="selectedTab" :default-value="selectedTab">
-                    <TelaTabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
-                        <TelaTabsIndicator />
-                        <TelaTabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab">
-                            {{ tab.label }}
-                        </TelaTabsTrigger>
-                    </TelaTabsList>
-                    <TelaTabsContent :value="selectedTab" class="max-h-262px overflow-y-auto no-scrollbar">
-                        <ComboboxEmpty
-                            v-if="groupedOptions.length === 0 || groupedOptions.every(g => g.children.length === 0)"
-                            class="flex flex-col items-center justify-center gap-5 px-7"
-                        >
-                            <div class="flex flex-col items-center justify-center gap-3">
-                                <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-tertiary" />
-                                <span class="text-xl font-medium leading-none">
-                                    {{ search.trim() && labelNoResultsWithSearch ? labelNoResultsWithSearch(search) : labelNoResults }}
-                                </span>
-                                <span v-if="search.trim()" class="inline-flex items-center gap-1.5 text-md text-secondary">
-                                    {{ labelPress }}
-                                    <div class="flex items-center gap-1">
-                                        <div class="p-2px bg-lowered rounded">
-                                            <TelaIcon name="i-ph-command" size="16px" />
-                                        </div>
-                                        <div class="p-2px bg-lowered rounded">
-                                            <TelaIcon name="i-ph-backspace" size="16px" />
-                                        </div>
-                                    </div>
-                                    {{ labelToClear }}
-                                </span>
+            </TelaComboboxTrigger>
+        </TelaComboboxAnchor>
+        <TelaComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" align="start">
+            <TelaComboboxInput
+                v-if="hasSearchbar"
+                v-model="search"
+                :placeholder="inputPlaceholder || labelSearchPlaceholder"
+            />
+            <TelaTabsRoot v-if="hasTabs" v-model="selectedTab">
+                <TelaTabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
+                    <TelaTabsIndicator />
+                    <TelaTabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab" size="sm">
+                        {{ tab.label }}
+                    </TelaTabsTrigger>
+                </TelaTabsList>
+            </TelaTabsRoot>
+            <div :class="cn('max-h-262px overflow-y-auto no-scrollbar', hasTabs && 'pt-2')">
+                <TelaComboboxEmpty
+                    v-if="isEmpty"
+                    class="flex flex-col items-center justify-center gap-5 px-7"
+                >
+                    <div class="flex flex-col items-center justify-center gap-3">
+                        <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-tertiary" />
+                        <span class="text-xl font-medium leading-none">
+                            {{ search.trim() && labelNoResultsWithSearch ? labelNoResultsWithSearch(search) : labelNoResults }}
+                        </span>
+                        <span v-if="search.trim()" class="inline-flex items-center gap-1.5 text-md text-secondary">
+                            {{ labelPress }}
+                            <div class="flex items-center gap-1">
+                                <div class="p-2px bg-lowered rounded">
+                                    <TelaIcon name="i-ph-command" size="16px" />
+                                </div>
+                                <div class="p-2px bg-lowered rounded">
+                                    <TelaIcon name="i-ph-backspace" size="16px" />
+                                </div>
                             </div>
-                            <TelaButton
-                                v-if="search.trim()" variant="secondary" size="sm"
-                                @click="handleDeleteSearchValue"
+                            {{ labelToClear }}
+                        </span>
+                    </div>
+                    <TelaButton
+                        v-if="search.trim()" variant="secondary" size="sm"
+                        @click="handleDeleteSearchValue"
+                    >
+                        {{ labelClear }}
+                    </TelaButton>
+                </TelaComboboxEmpty>
+                <template v-for="group in groupedOptions" :key="group.heading">
+                    <TelaComboboxGroup :heading="group.heading">
+                        <TelaComboboxLabel v-if="!search.trim() && hasGroupingLabels">
+                            {{ group.heading }}
+                        </TelaComboboxLabel>
+                        <template v-for="item in group.children" :key="item.value">
+                            <TelaComboboxItem
+                                :ref="(el) => item.children?.length && setNestedItemRef(item.value, el)"
+                                :value="item"
+                                :class="cn('group py-2', !compact && '!px-1.5')"
+                                @mouseenter="handleItemMouseEnter(item)"
+                                @select="(e) => item.children?.length && e.preventDefault()"
                             >
-                                {{ labelClear }}
-                            </TelaButton>
-                        </ComboboxEmpty>
-                        <template v-for="group in groupedOptions" :key="group.heading">
-                            <ComboboxGroup :heading="group.heading">
-                                <ComboboxLabel v-if="!search.trim() && hasGroupingLabels">
-                                    {{ group.heading }}
-                                </ComboboxLabel>
-                                <ComboboxItem v-for="item in group.children" :key="item.value" :value="item" :class="cn('group py-2', !compact && '!px-1.5')">
-                                    <div class="flex items-center">
-                                        <div :class="cn('flex items-center w-270px', compact ? 'gap-2' : 'gap-1.5')">
-                                            <div v-if="item.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
-                                                <TelaIcon
-                                                    v-if="typeof item.icon === 'string'" :name="item.icon" :color="colorIcon" :size="iconWithBackground?.size"
-                                                    :background-class="iconWithBackground?.backgroundClass"
-                                                />
-                                                <Component
-                                                    :is="item.icon"
-                                                    v-else
-                                                    :class="cn((item?.label.startsWith('DeepSeek') || item?.label.startsWith('Gemini')) && 'scale-75')"
-                                                />
-                                            </div>
-                                            <div v-if="!item.icon && item?.externalIconSrc">
-                                                <img :src="item.externalIconSrc" :alt="item.label" class="w-5 h-5">
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div class="flex items-center gap-1">
-                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
-                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
-                                                        {{ labelMultimodal }}
-                                                    </TelaBadge>
-                                                    <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
-                                                        <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
-                                                        <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
-                                                    </span>
-                                                </div>
-                                                <span v-if="item.description" :class="cn('font-normal text-sm text-balance leading-none text-secondary', descriptionClass)">
-                                                    {{ item.description }}
-                                                </span>
-                                                <slot name="tags" :option="item" />
-                                            </div>
+                                <div class="flex items-center">
+                                    <div :class="cn('flex items-center w-270px', compact ? 'gap-2' : 'gap-1.5')">
+                                        <div v-if="item.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
+                                            <TelaIcon
+                                                v-if="typeof item.icon === 'string'" :name="item.icon" :color="colorIcon" :size="iconWithBackground?.size"
+                                                :background-class="iconWithBackground?.backgroundClass"
+                                            />
+                                            <Component
+                                                :is="item.icon"
+                                                v-else
+                                                :class="cn((item?.label.startsWith('DeepSeek') || item?.label.startsWith('Gemini')) && 'scale-75')"
+                                            />
                                         </div>
-                                        <div class="flex gap-3">
-                                            <div v-if="item.maxInputTokens" class="flex flex-col gap-1.5">
-                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
-                                                    {{ labelInputMax }}
-                                                </span>
-                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
-                                                    {{ handleFormatNumber(item.maxInputTokens) }}
-                                                </span>
-                                            </div>
-                                            <div v-if="item.maxOutputTokens" class="flex flex-col gap-1.5">
-                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
-                                                    {{ labelOutputMax }}
-                                                </span>
-                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
-                                                    {{ handleFormatNumber(item.maxOutputTokens) }}
+                                        <div v-if="!item.icon && item?.externalIconSrc">
+                                            <img :src="item.externalIconSrc" :alt="item.label" class="w-5 h-5">
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div class="flex items-center gap-1">
+                                                <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
+                                                <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
+                                                    {{ labelMultimodal }}
+                                                </TelaBadge>
+                                                <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
+                                                    <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
+                                                    <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
                                                 </span>
                                             </div>
+                                            <span v-if="item.description" :class="cn('font-normal text-sm text-balance leading-none text-secondary', descriptionClass)">
+                                                {{ item.description }}
+                                            </span>
+                                            <slot name="tags" :option="item" />
                                         </div>
                                     </div>
-                                    <div class="flex gap-2 items-center">
-                                        <ComboboxItemIndicator>
-                                            <TelaIcon name="i-ph-check" size="14px" />
-                                        </ComboboxItemIndicator>
-                                    </div>
-                                </ComboboxItem>
-                            </ComboboxGroup>
-                        </template>
-                    </TelaTabsContent>
-                </TelaTabsRoot>
-            </template>
-            <template v-else>
-                <div class="max-h-262px overflow-y-auto no-scrollbar">
-                    <ComboboxEmpty
-                        v-if="groupedOptions.length === 0 || groupedOptions.every(g => g.children.length === 0)"
-                        class="flex flex-col items-center justify-center gap-5 px-7"
-                    >
-                        <div class="flex flex-col items-center justify-center gap-3">
-                            <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-tertiary" />
-                            <span class="text-xl font-medium leading-none">
-                                {{ search.trim() && labelNoResultsWithSearch ? labelNoResultsWithSearch(search) : labelNoResults }}
-                            </span>
-                            <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-secondary">
-                                {{ labelPress }}
-                                <div class="flex items-center gap-1">
-                                    <div class="p-2px bg-lowered rounded">
-                                        <TelaIcon name="i-ph-command" size="16px" />
-                                    </div>
-                                    <div class="p-2px bg-lowered rounded">
-                                        <TelaIcon name="i-ph-backspace" size="16px" />
+                                    <div v-if="item.maxInputTokens || item.maxOutputTokens" class="flex gap-3">
+                                        <div v-if="item.maxInputTokens" class="flex flex-col gap-1.5">
+                                            <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
+                                                {{ labelInputMax }}
+                                            </span>
+                                            <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
+                                                {{ handleFormatNumber(item.maxInputTokens) }}
+                                            </span>
+                                        </div>
+                                        <div v-if="item.maxOutputTokens" class="flex flex-col gap-1.5">
+                                            <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
+                                                {{ labelOutputMax }}
+                                            </span>
+                                            <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
+                                                {{ handleFormatNumber(item.maxOutputTokens) }}
+                                            </span>
+                                        </div>
                                     </div>
                                 </div>
-                                {{ labelToClear }}
-                            </span>
-                        </div>
-                        <TelaButton
-                            v-if="search.trim()" variant="secondary" size="sm" class="rounded-lg"
-                            @click="handleDeleteSearchValue"
-                        >
-                            {{ labelClear }}
-                        </TelaButton>
-                    </ComboboxEmpty>
-                    <template v-for="group in groupedOptions" :key="group.heading">
-                        <ComboboxGroup :heading="group.heading">
-                            <ComboboxLabel v-if="!search.trim() && hasGroupingLabels">
-                                {{ group.heading }}
-                            </ComboboxLabel>
-                            <template v-for="item in group.children" :key="item.value">
-                                <ComboboxItem
-                                    :ref="(el) => item.children?.length && setNestedItemRef(item.value, el)"
-                                    :value="item"
-                                    :class="cn('group/item py-2', !compact && '!px-1.5')"
-                                    @mouseenter="handleItemMouseEnter(item)"
-                                    @select="(e) => item.children?.length && e.preventDefault()"
+                                <div class="flex gap-2 items-center">
+                                    <TelaIcon v-if="item.children?.length" name="i-ph-caret-right" size="14px" color="icon-tertiary" />
+                                    <TelaComboboxIndicator v-else>
+                                        <TelaIcon name="i-ph-check" size="14px" />
+                                    </TelaComboboxIndicator>
+                                </div>
+                            </TelaComboboxItem>
+                            <!-- Nested submenu -->
+                            <Teleport v-if="item.children?.length" to="body">
+                                <div
+                                    v-if="expandedItem === item.value"
+                                    :style="submenuStyle"
+                                    class="min-w-200px bg border-0.5px border rounded-12px shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)] pointer-events-auto"
+                                    @mouseenter="expandedItem = item.value"
+                                    @pointerdown.stop
                                 >
-                                    <div class="flex items-center">
-                                        <div :class="cn('flex items-center w-250px', compact ? 'gap-2' : 'gap-1.5')">
-                                            <div v-if="item.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
-                                                <TelaIcon
-                                                    v-if="typeof item.icon === 'string'" :name="item.icon" :color="colorIcon" :size="iconWithBackground?.size"
-                                                    :background-class="iconWithBackground?.backgroundClass"
-                                                />
-                                                <Component
-                                                    :is="item.icon"
-                                                    v-else
-                                                    :class="cn((item?.label.startsWith('DeepSeek') || item?.label.startsWith('Gemini')) && 'scale-75')"
-                                                />
-                                            </div>
-                                            <div v-if="!item.icon && item?.externalIconSrc">
-                                                <img :src="item.externalIconSrc" :alt="item.label" class="w-5 h-5">
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div class="flex items-center gap-1">
-                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
-                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
-                                                        {{ labelMultimodal }}
-                                                    </TelaBadge>
-                                                    <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
-                                                        <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
-                                                        <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
-                                                    </span>
+                                    <div class="p-4px">
+                                        <div
+                                            v-for="child in item.children"
+                                            :key="child.value"
+                                            :class="cn(
+                                                'relative flex cursor-pointer select-none justify-between items-center rounded-lg px-2 py-2 text-sm font-medium text-primary outline-none hover:bg-muted',
+                                                !compact && '!px-1.5',
+                                            )"
+                                            @click.stop="handleChildSelect(child, $event)"
+                                        >
+                                            <div :class="cn('flex items-center', compact ? 'gap-2' : 'gap-1.5')">
+                                                <div v-if="child.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
+                                                    <TelaIcon
+                                                        v-if="typeof child.icon === 'string'" :name="child.icon" :color="colorIcon" :size="iconWithBackground?.size"
+                                                        :background-class="iconWithBackground?.backgroundClass"
+                                                    />
+                                                    <Component :is="child.icon" v-else />
                                                 </div>
-                                                <span v-if="item.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
-                                                    {{ item.description }}
-                                                </span>
-                                                <slot name="tags" :option="item" />
-                                            </div>
-                                        </div>
-                                        <div v-if="item.maxInputTokens || item.maxOutputTokens" class="flex gap-3">
-                                            <div class="flex flex-col gap-1.5">
-                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
-                                                    {{ labelInputMax }}
-                                                </span>
-                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
-                                                    {{ handleFormatNumber(item.maxInputTokens) }}
-                                                </span>
-                                            </div>
-                                            <div class="flex flex-col gap-1.5">
-                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
-                                                    {{ labelOutputMax }}
-                                                </span>
-                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
-                                                    {{ handleFormatNumber(item.maxOutputTokens) }}
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="flex gap-2 items-center">
-                                        <TelaIcon v-if="item.children?.length" name="i-ph-caret-right" size="14px" color="icon-tertiary" />
-                                        <ComboboxItemIndicator v-else>
-                                            <TelaIcon name="i-ph-check" size="14px" />
-                                        </ComboboxItemIndicator>
-                                    </div>
-                                </ComboboxItem>
-                                <!-- Nested submenu -->
-                                <Teleport v-if="item.children?.length" to="body">
-                                    <div
-                                        v-if="expandedItem === item.value"
-                                        :style="submenuStyle"
-                                        class="min-w-200px bg-white border border-strong rounded-12px shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)] pointer-events-auto"
-                                        @mouseenter="expandedItem = item.value"
-                                        @pointerdown.stop
-                                    >
-                                        <div p-4px>
-                                            <div
-                                                v-for="child in item.children"
-                                                :key="child.value"
-                                                :class="cn(
-                                                    'relative flex cursor-pointer select-none justify-between items-center rounded-lg px-2 py-2 text-sm font-medium text-primary outline-none hover:bg-muted',
-                                                    !compact && '!px-1.5',
-                                                )"
-                                                @click.stop="handleChildSelect(child, $event)"
-                                            >
-                                                <div :class="cn('flex items-center', compact ? 'gap-2' : 'gap-1.5')">
-                                                    <div v-if="child.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
-                                                        <TelaIcon
-                                                            v-if="typeof child.icon === 'string'" :name="child.icon" :color="colorIcon" :size="iconWithBackground?.size"
-                                                            :background-class="iconWithBackground?.backgroundClass"
-                                                        />
-                                                        <Component :is="child.icon" v-else />
-                                                    </div>
-                                                    <div class="flex flex-col">
-                                                        <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
-                                                        <span v-if="child.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
-                                                            {{ child.description }}
-                                                        </span>
-                                                    </div>
+                                                <div class="flex flex-col">
+                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
+                                                    <span v-if="child.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
+                                                        {{ child.description }}
+                                                    </span>
                                                 </div>
-                                                <TelaIcon v-if="child.value === (modelValue || innerValue)" name="i-ph-check" size="14px" />
                                             </div>
+                                            <TelaIcon v-if="child.value === (modelValue || innerValue)" name="i-ph-check" size="14px" />
                                         </div>
                                     </div>
-                                </Teleport>
-                            </template>
-                        </ComboboxGroup>
-                    </template>
-                </div>
-            </template>
-        </ComboboxList>
-    </ComboboxRoot>
+                                </div>
+                            </Teleport>
+                        </template>
+                    </TelaComboboxGroup>
+                </template>
+            </div>
+        </TelaComboboxList>
+    </TelaComboboxRoot>
 </template>
 
 <style scoped>
 .nuxt-icon {
   margin-bottom: 0;
 }
-
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-  display: none;
-  }
-}
-</style>
-
-<style>
-@keyframes combobox-submenuFadeIn {
-  from {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 </style>

package/components/tela/confirmation-modal/confirmation-modal.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
     cancelButtonText?: string
     loading?: boolean
     confirmButtonTestId?: string
+    overlayClass?: string
 }>()
 
 const emit = defineEmits<{
@@ -29,6 +30,7 @@ const confirmButtonVariant = computed(() => {
         v-model:model-value="open"
         :compact="props.compact ?? true"
         hide-dividers
+        :overlay-class="props.overlayClass"
         :is-close-icon="false"
         :style="{ paddingBlock: '20px' }"
         @close="emit('cancel')"

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

@@ -29,28 +29,28 @@ const emit = defineEmits<{
 }>()
 
 const style = computed(() => {
-    const base = 'cursor-pointer flex items-center justify-center rounded-lg p-0.5em ease-out duration-40'
+    const base = 'cursor-pointer flex items-center justify-center p-0.5em ease-out duration-40'
     const size = ({
-        '3xs': 'text-6px p-1',
-        '2xs': 'text-8px p-4px', // 16px
-        'xs': 'text-12px p-6px', // 24px
-        'sm': 'text-16px p-0.4em', // 32px
-        'md': 'text-20px p-0.4em', // 44px
+        '3xs': 'text-6px p-1 rounded-8px',
+        '2xs': 'text-8px p-4px rounded-4px', // 16px
+        'xs': 'text-12px p-6px rounded-6px', // 24px
+        'sm': 'text-16px p-0.4em rounded-8px', // 32px
+        'md': 'text-20px p-0.4em rounded-10px', // 44px
     } as Record<typeof props.size, string>)[props.size]
 
     const color = ({
-        primary: 'bg-neutral-900 !text-white hover:bg-neutral-800',
+        primary: 'bg-btn-primary !text-inverse hover:bg-btn-primary-hover active:bg-btn-primary-active',
         secondary: 'bg-transparent text-icon-tertiary hover:bg-muted hover:text-primary active:text-primary disabled:bg-muted disabled:!text-subtle',
     } as Record<typeof props.color, string>)[props.color]
 
     const disabled = props.disabled && 'cursor-not-allowed !bg-muted !text-subtle !b-0'
 
     const outline = props.outline && ({
-        primary: 'b-0.7px !b-#011D21',
-        secondary: 'b-0.7px !b-gray-200',
+        primary: 'border-0.5px !border-neutral-800',
+        secondary: 'border-0.5px !border',
     } as Record<typeof props.color, string>)[props.color]
 
-    const active = props.active && '!bg-gray-100'
+    const active = props.active && '!bg-muted'
 
     return [
         base,

package/components/tela/preview/preview-select-variable.vue

@@ -164,32 +164,20 @@ function iconSrc(option: PreviewVariableOption): string {
                         </p>
                     </div>
                 </div>
-                <div flex-shrink-0>
-                    <TelaIcon
-                        name="i-ph-caret-down-bold"
-                        size="16px"
-                        color="icon-secondary"
-                        :class="cn('ease transition-transform duration-200', isOpen && 'rotate-180')"
-                    />
-                </div>
             </TelaComboboxTrigger>
         </TelaComboboxAnchor>
         <TelaComboboxList :class="cn('z-999 w-full max-w-[var(--reka-combobox-trigger-width)]', popoverClass)" :disable-portal="true" align="center">
-            <div class="relative">
-                <div class="absolute inset-y-0 flex items-center justify-center px-2.5">
-                    <TelaIcon name="i-ph-magnifying-glass-bold" size="13px" color="neutral-300" />
-                </div>
-                <TelaComboboxInput
-                    v-model="search"
-                    :class="cn('rounded-b-none pl-30px')"
-                    :placeholder="labels.searchPlaceholder"
-                />
-                <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-3">
+            <TelaComboboxInput
+                v-model="search"
+                class="rounded-b-none"
+                :placeholder="labels.searchPlaceholder"
+            >
+                <template v-if="search.length > 0" #deleteSearchValue>
                     <button class="flex items-center justify-center" @mousedown.prevent @click.stop="handleDeleteSearchValue">
                         <TelaIcon name="i-ph-x-circle" size="16px" class="text-gray-400" />
                     </button>
-                </div>
-            </div>
+                </template>
+            </TelaComboboxInput>
             <div class="max-h-262px overflow-y-auto no-scrollbar">
                 <TelaComboboxEmpty
                     v-if="groupedOptions.length === 0 || groupedOptions.every(g => g.children.length === 0)"
@@ -248,9 +236,9 @@ function iconSrc(option: PreviewVariableOption): string {
                                         </p>
                                     </div>
                                     <div v-if="props.modelValue === item.value" class="flex gap-2 items-center">
-                                        <TelaComboboxItemIndicator>
+                                        <TelaComboboxIndicator>
                                             <TelaIcon name="i-ph-check-bold" size="14px" color="icon-secondary" />
-                                        </TelaComboboxItemIndicator>
+                                        </TelaComboboxIndicator>
                                     </div>
                                 </div>
                             </TelaComboboxItem>

package/components/tela/tabs/tabs-trigger.vue

@@ -4,18 +4,28 @@ import { reactiveOmit } from '@vueuse/core'
 import { TabsTrigger, useForwardProps } from 'reka-ui'
 import type { TabsTriggerProps } from 'reka-ui'
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'], textClass?: HTMLAttributes['class'] }>()
+const props = withDefaults(defineProps<TabsTriggerProps & {
+    class?: HTMLAttributes['class']
+    textClass?: HTMLAttributes['class']
+    size?: 'sm' | 'md'
+}>(), { size: 'md' })
 
-const delegatedProps = reactiveOmit(props, 'class', 'textClass')
+const delegatedProps = reactiveOmit(props, 'class', 'textClass', 'size')
 
 const forwardedProps = useForwardProps(delegatedProps)
+
+const sizeStyle = computed(() => (({
+    sm: 'px-[6px] py-1.5 body-12-semibold',
+    md: 'px-[6px] py-2 body-14-semibold',
+}) as Record<'sm' | 'md', string>)[props.size])
 </script>
 
 <template>
     <TabsTrigger
         v-bind="forwardedProps"
         :class="cn(
-            'inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-[6px] py-2 body-14-semibold transition-all focus-visible:outline-none disabled:pointer-events-none text-gray-400 hover:text-black disabled:opacity-50 data-[state=active]:text-black data-[state=active]:shadow-sm',
+            'inline-flex cursor-pointer items-center justify-center whitespace-nowrap transition-all focus-visible:outline-none disabled:pointer-events-none text-tertiary hover:text-primary disabled:opacity-50 data-[state=active]:text-primary',
+            sizeStyle,
             props.class,
         )"
     >

package/components/tela/tabs/tabs.mdx

@@ -111,6 +111,19 @@ type TabsProps = {
 
 - `content` - Tab panel content area
 
+## Sizes
+
+`TelaTabsTrigger` supports two sizes via the `size` prop:
+
+- `sm` — use in small components, e.g. inside a card or a table
+- `md` (default) — use in bigger layouts, e.g. `TelaDetails`
+
+```vue
+<TelaTabsTrigger value="overview" size="sm">
+    Overview
+</TelaTabsTrigger>
+```
+
 ## Components
 
 The Tabs system consists of these reka-ui components:

package/docs/tokens.md

@@ -52,6 +52,12 @@ Surfaces stack. Use the right background token for each layer — not by feel, b
 - **`bg-subtle`** — One level up. Secondary panels, sidebars. (`DT.colors.background.subtle`)
 - **`bg-muted`** — Inputs, cards, contained areas. (`DT.colors.background.muted`)
 - **`bg-lowered`** — Below the base. Subtle separators, recessed areas. (`DT.colors.background.lowered`)
+- **`bg-btn-primary`** / **`-hover`** / **`-active`** — Primary button background at rest, hover, pressed. (`DT.colors.background['btn-primary*']`)
+- **`bg-btn-secondary`** / **`-hover`** / **`-active`** — Secondary button background states. (`DT.colors.background['btn-secondary*']`)
+- **`bg-btn-ghost`** / **`-hover`** — Ghost button background states. (`DT.colors.background['btn-ghost*']`)
+- **`bg-btn-danger`** / **`-hover`** — Danger button background states. (`DT.colors.background['btn-danger*']`)
+- **`bg-btn-dark`** / **`-hover`** / **`-active`** — Dark (inverse surface) button background states. (`DT.colors.background['btn-dark*']`)
+- **`bg-btn-disabled`**, **`bg-btn-loading`** — Button backgrounds for disabled and loading states. (`DT.colors.background['btn-disabled']`, `['btn-loading']`)
 - **`bg-success`** — Success state backgrounds in badges and alerts. (`DT.colors.background.success`)
 - **`bg-error`** — Error state backgrounds in badges and alerts. (`DT.colors.background.error`)
 - **`bg-warning`** — Warning state backgrounds in badges and alerts. (`DT.colors.background.warning`)
@@ -64,7 +70,8 @@ For typography, default to `text-primary` (content) and `text-secondary` (suppor
 - **`text-secondary`** — Supporting text, metadata, labels. (`DT.colors.text.secondary`)
 - **`text-tertiary`** — Placeholders, disabled states — not "quieter body text". (`DT.colors.text.tertiary`)
 - **`text-subtle`** — Very low emphasis, over muted surfaces only. (`DT.colors.text.subtle`)
-- **`text-contrast`** — Reserved; primary is already the default heading color. (`DT.colors.text.contrast`)
+- **`text-contrast`** — Darkest text on light surfaces — e.g. labels on secondary/ghost buttons. Not for copy; primary is already the default heading color. (`DT.colors.text.contrast`)
+- **`text-inverse`** — Text on dark/inverted surfaces — e.g. labels on primary/dark buttons. (`DT.colors.text.inverse`)
 - **`text-icon`** — Icon color applied via text utility. (`DT.colors.text.icon`)
 - **`text-success`** — Success messaging and status indicators. (`DT.colors.text.success`)
 - **`text-error`** — Error messaging, destructive action labels. (`DT.colors.text.error`)

package/package.json

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

package/unocss.config.ts

@@ -77,11 +77,11 @@ export default defineConfig({
 
             return `${sizeStyle} font-${weight} ${isCaption ? 'uppercase tracking-0.05em!' : ''}`
         }],
-        // Catch for `text-(primary|secondary|tertiary|subtle|contrast|success|error|warning|pending)`
-        [/text-(primary|secondary|tertiary|subtle|contrast|success|error|warning|pending)/, ([_, v]) => `text-text-${v}`],
-        // Catch for `bg-(subtle|muted|lowered|success|error|warning)`
+        // Catch for `text-(primary|secondary|tertiary|subtle|contrast|inverse|success|error|warning|pending)`
+        [/text-(primary|secondary|tertiary|subtle|contrast|inverse|success|error|warning|pending)/, ([_, v]) => `text-text-${v}`],
+        // Catch for `bg-(subtle|muted|lowered|btn-*|success|error|warning)`
         // Handle bg, bg-subtle, etc. Use bg-background if just 'bg'
-        [/^bg(?:-(subtle|muted|lowered|success|error|warning))?$/, ([_, v]) => v ? `bg-background-${v}` : 'bg-background'],
+        [/^bg(?:-(subtle|muted|lowered|btn(?:-[a-z]+)*|success|error|warning))?$/, ([_, v]) => v ? `bg-background-${v}` : 'bg-background'],
         // Catch for `border-(subtle|strong)`
         [/^border(?:-(subtle|strong))?$/, ([_, v]) => v ? `border-border-${v.toLowerCase()}` : 'border-border'],
     ],

package/utils/design-tokens.ts

@@ -290,44 +290,76 @@ const LEGACY_COLORS = {
     },
 }
 
+const BTN_COLORS = {
+    'btn-primary': BASE_COLORS.neutral[900],
+    'btn-primary-hover': BASE_COLORS.neutral[800],
+    'btn-primary-active': BASE_COLORS.neutral[700],
+    'btn-secondary': BASE_COLORS.white.DEFAULT,
+    'btn-secondary-hover': BASE_COLORS.neutral[50],
+    'btn-secondary-active': BASE_COLORS.neutral[100],
+    'btn-ghost': BASE_COLORS.transparent,
+    'btn-ghost-hover': BASE_COLORS.neutral[100],
+    'btn-danger': BASE_COLORS.red[100],
+    'btn-danger-hover': BASE_COLORS.red[50],
+    'btn-disabled': BASE_COLORS.neutral[100],
+    'btn-loading': BASE_COLORS.neutral[200],
+    'btn-dark': 'rgba(255, 255, 255, 0.04)',
+    'btn-dark-hover': 'rgba(255, 255, 255, 0.08)',
+    'btn-dark-active': 'rgba(255, 255, 255, 0.1)',
+} as const
+
+const BACKGROUND_COLORS = {
+    DEFAULT: BASE_COLORS.white.DEFAULT,
+    subtle: BASE_COLORS.neutral[50],
+    muted: BASE_COLORS.neutral[100],
+    lowered: BASE_COLORS.neutral[200],
+    success: BASE_COLORS.green[200],
+    error: BASE_COLORS.red[200],
+    warning: BASE_COLORS.amber[200],
+    ...BTN_COLORS,
+} as const
+
+const TEXT_COLORS = {
+    primary: BASE_COLORS.neutral[800],
+    secondary: BASE_COLORS.neutral[500],
+    tertiary: BASE_COLORS.neutral[400],
+    subtle: BASE_COLORS.neutral[300],
+    contrast: BASE_COLORS.neutral[900],
+    inverse: BASE_COLORS.white.DEFAULT,
+    success: BASE_COLORS.green[600],
+    error: BASE_COLORS.red[600],
+    warning: BASE_COLORS.amber[600],
+    pending: BASE_COLORS.blue[600],
+} as const
+
+const BORDER_COLORS = {
+    DEFAULT: BASE_COLORS.neutral[200],
+    subtle: BASE_COLORS.neutral[100],
+    strong: BASE_COLORS.neutral[300],
+    accent: BASE_COLORS.neutral[400],
+    inverse: BASE_COLORS.white.DEFAULT,
+} as const
+
+const ICON_COLORS = {
+    DEFAULT: BASE_COLORS.neutral[700],
+    secondary: BASE_COLORS.neutral[500],
+    tertiary: BASE_COLORS.neutral[400],
+    subtle: BASE_COLORS.neutral[300],
+    inverse: BASE_COLORS.white.DEFAULT,
+} as const
+
+const COLORS = {
+    ...BASE_COLORS,
+    ...LEGACY_COLORS,
+    background: BACKGROUND_COLORS,
+    text: TEXT_COLORS,
+    border: BORDER_COLORS,
+    icon: ICON_COLORS,
+} as const
+
 export const DT = {
     colors: {
-        ...BASE_COLORS,
-        ...LEGACY_COLORS,
-        background: {
-            DEFAULT: BASE_COLORS.white.DEFAULT,
-            subtle: BASE_COLORS.neutral[50],
-            muted: BASE_COLORS.neutral[100],
-            lowered: BASE_COLORS.neutral[200],
-            success: BASE_COLORS.green[200],
-            error: BASE_COLORS.red[200],
-            warning: BASE_COLORS.amber[200],
-        },
-        text: {
-            primary: BASE_COLORS.neutral[800],
-            secondary: BASE_COLORS.neutral[500],
-            tertiary: BASE_COLORS.neutral[400],
-            subtle: BASE_COLORS.neutral[300],
-            contrast: BASE_COLORS.neutral[900],
-            success: BASE_COLORS.green[600],
-            error: BASE_COLORS.red[600],
-            warning: BASE_COLORS.amber[600],
-            pending: BASE_COLORS.blue[600],
-        },
-        border: {
-            DEFAULT: BASE_COLORS.neutral[200],
-            subtle: BASE_COLORS.neutral[100],
-            strong: BASE_COLORS.neutral[300],
-            accent: BASE_COLORS.neutral[400],
-            inverse: BASE_COLORS.white.DEFAULT,
-        },
-        icon: {
-            DEFAULT: BASE_COLORS.neutral[700],
-            secondary: BASE_COLORS.neutral[500],
-            tertiary: BASE_COLORS.neutral[400],
-            subtle: BASE_COLORS.neutral[300],
-            inverse: BASE_COLORS.white.DEFAULT,
-        },
+        ...COLORS,
     },
     fontSize: {
         // headers (you should use <h.> tags for these sizes)