@meistrari/tela-build 1.70.1 → 1.70.3

package/components/tela/chat/prompt-input/prompt-input-action-menu-content.vue

@@ -9,7 +9,7 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-    <TelaMenubarContent :side="side" :side-offset="sideOffset" class="!min-w-244px">
+    <TelaMenubarContent :side="side" :side-offset="sideOffset" class="!min-w-244px z-700!">
         <slot />
     </TelaMenubarContent>
 </template>

package/components/tela/chat/prompt-input/prompt-input-action-menu-sub-content.vue

@@ -1,5 +1,5 @@
 <template>
-    <TelaMenubarSubContent class="!min-w-180px">
+    <TelaMenubarSubContent class="!min-w-180px z-700!">
         <slot />
     </TelaMenubarSubContent>
 </template>

package/components/tela/chat/text-message/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { TreeItem } from 'radix-vue'
 import { isToday } from 'date-fns'
-import { useI18n } from 'vue-i18n'
 import type { User } from '../types'
 
 interface ChatMessageProps {
@@ -22,9 +21,16 @@ interface ChatMessageProps {
     currentUser?: User
     otherUsers?: User[]
     isExpanded?: boolean
+    locale?: string
+    todayAtLabel?: (time: string) => string
+    onDateLabel?: (date: string) => string
 }
 
-const props = defineProps<ChatMessageProps>()
+const props = withDefaults(defineProps<ChatMessageProps>(), {
+    locale: 'en-US',
+    todayAtLabel: (time: string) => `Today at ${time}`,
+    onDateLabel: (date: string) => `On ${date}`,
+})
 const emit = defineEmits<{
     reply: []
     delete: [id: string]
@@ -90,7 +96,6 @@ async function calculateTotalHeight(message: ChatMessageProps): Promise<number>
 }
 
 const hasReplies = computed(() => props.replies && props.replies.length > 0)
-const { t, locale } = useI18n()
 
 const timestampString = computed(() => {
     if (!props.timestamp)
@@ -98,9 +103,9 @@ const timestampString = computed(() => {
 
     const date = new Date(props.timestamp)
     if (isToday(date))
-        return t('chat.todayAt', { time: date.toLocaleTimeString(locale.value ?? 'en-US', { hour: '2-digit', minute: '2-digit', hour12: false }) })
+        return props.todayAtLabel(date.toLocaleTimeString(props.locale, { hour: '2-digit', minute: '2-digit', hour12: false }))
 
-    return t('chat.onDate', { date: date.toLocaleDateString(locale.value ?? 'en-US', { day: '2-digit', month: 'short', year: 'numeric' }) })
+    return props.onDateLabel(date.toLocaleDateString(props.locale, { day: '2-digit', month: 'short', year: 'numeric' }))
 })
 
 const beforeWidth = computed(() => {

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
 
 import { ComboboxRoot as Combobox, ComboboxTrigger } from 'reka-ui'
 import type { AllActionsInfo } from 'tela-workflow/src/compat-v1-schemas'
@@ -40,6 +39,19 @@ const props = withDefaults(defineProps<{
     inline?: boolean
     to?: string | HTMLElement
     hideTrigger?: boolean
+    labelEverything?: string
+    labelModules?: string
+    labelResources?: string
+    labelActions?: string
+    labelTemplates?: string
+    labelSearchPlaceholder?: string
+    labelNoResults?: string
+    labelNoResultsWithSearch?: (search: string) => string
+    labelPress?: string
+    labelToClear?: string
+    labelClear?: string
+    labelComingSoon?: string
+    getTabLabel?: (tab: string) => string
 }>(), {
     closeOnOutsideClick: true,
     closeOnEscape: true,
@@ -47,6 +59,18 @@ const props = withDefaults(defineProps<{
     priority: 'normal',
     inline: false,
     hideTrigger: false,
+    labelEverything: 'Everything',
+    labelModules: 'Modules',
+    labelResources: 'Resources',
+    labelActions: 'Actions',
+    labelTemplates: 'Templates',
+    labelSearchPlaceholder: 'Search',
+    labelNoResults: 'No items found',
+    labelNoResultsWithSearch: (search: string) => `No items found with '${search}'`,
+    labelPress: 'Press',
+    labelToClear: 'to clear',
+    labelClear: 'Clear',
+    labelComingSoon: 'Coming soon',
 })
 
 const emit = defineEmits<{
@@ -55,8 +79,6 @@ const emit = defineEmits<{
     'selectWorkflowModule': [value: string]
 }>()
 
-const { t } = useI18n()
-
 const open = defineModel<boolean>('open')
 
 const selectedTab = ref('everything')
@@ -86,12 +108,27 @@ const effectiveOptions = computed((): CombinedOption[] => {
     }))
 })
 
+function getLabelForTab(tab: string): string {
+    if (props.getTabLabel)
+        return props.getTabLabel(tab)
+
+    const knownLabels: Record<string, string> = {
+        everything: props.labelEverything,
+        modules: props.labelModules,
+        resources: props.labelResources,
+        actions: props.labelActions,
+        templates: props.labelTemplates,
+    }
+
+    return knownLabels[tab] ?? tab.charAt(0).toUpperCase() + tab.slice(1)
+}
+
 const tabs = computed(() => {
     const allTabs = effectiveOptions.value.reduce((acc, option) => {
         if (option.tabs) {
             option.tabs.forEach((tab) => {
                 if (!acc.find(t => t.tab === tab)) {
-                    acc.push({ tab, label: tab.charAt(0).toUpperCase() + tab.slice(1) })
+                    acc.push({ tab, label: getLabelForTab(tab) })
                 }
             })
         }
@@ -101,7 +138,7 @@ const tabs = computed(() => {
     const hasAll = allTabs.find(t => t.tab === 'everything')
 
     if (!hasAll) {
-        allTabs.unshift({ tab: 'everything', label: t('workflow.modules.everything') })
+        allTabs.unshift({ tab: 'everything', label: props.labelEverything })
     }
 
     return allTabs
@@ -136,28 +173,28 @@ const groupedOptions = computed(() => {
 
         filteredOptions.forEach((option) => {
             if (option.tabs?.includes('modules')) {
-                const modulesLabel = t('workflow.modules.modules')
+                const modulesLabel = props.labelModules
                 if (!categoryGroups.modules) {
                     categoryGroups.modules = { label: modulesLabel, category: 'Modules', children: [] }
                 }
                 categoryGroups.modules.children.push(option)
             }
             if (option.tabs?.includes('resources')) {
-                const resourcesLabel = t('workflow.modules.resources')
+                const resourcesLabel = props.labelResources
                 if (!categoryGroups.resources) {
                     categoryGroups.resources = { label: resourcesLabel, category: 'Resources', children: [] }
                 }
                 categoryGroups.resources.children.push(option)
             }
             if (option.tabs?.includes('actions')) {
-                const actionsLabel = t('workflow.modules.actions')
+                const actionsLabel = props.labelActions
                 if (!categoryGroups.actions) {
                     categoryGroups.actions = { label: actionsLabel, category: 'Actions', children: [] }
                 }
                 categoryGroups.actions.children.push(option)
             }
             if (option.tabs?.includes('templates')) {
-                const templatesLabel = t('workflow.modules.templates')
+                const templatesLabel = props.labelTemplates
                 if (!categoryGroups.templates) {
                     categoryGroups.templates = { label: templatesLabel, category: 'Templates', children: [] }
                 }
@@ -175,7 +212,7 @@ const groupedOptions = computed(() => {
     }
 
     return [{
-        heading: selectedTab.value.charAt(0).toUpperCase() + selectedTab.value.slice(1),
+        heading: getLabelForTab(selectedTab.value),
         category: selectedTab.value.charAt(0).toUpperCase() + selectedTab.value.slice(1),
         children: filteredOptions,
     }].filter(group => group.children.length > 0)
@@ -265,7 +302,7 @@ watch(innerValue, (value) => {
         >
             <ComboboxInput
                 v-model="search"
-                :placeholder="t('models.labels.search')"
+                :placeholder="labelSearchPlaceholder"
             />
             <Tabs v-model="selectedTab" :default-value="selectedTab">
                 <TabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
@@ -282,10 +319,10 @@ watch(innerValue, (value) => {
                         <div class="flex flex-col items-center justify-center gap-3">
                             <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
                             <span class="text-xl font-medium leading-none">
-                                {{ t('common.noItemsFound') }}{{ search.trim() ? ` with '${search}'` : '' }}
+                                {{ search.trim() ? labelNoResultsWithSearch(search.trim()) : labelNoResults }}
                             </span>
                             <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-gray-500">
-                                {{ t('common.press') }}
+                                {{ labelPress }}
                                 <div class="flex items-center gap-1">
                                     <div class="p-2px bg-gray-200 rounded">
                                         <TelaIcon name="i-ph-command" size="16px" />
@@ -294,14 +331,14 @@ watch(innerValue, (value) => {
                                         <TelaIcon name="i-ph-backspace" size="16px" />
                                     </div>
                                 </div>
-                                {{ t('common.toClear') }}
+                                {{ labelToClear }}
                             </span>
                         </div>
                         <TelaButton
                             v-if="search.trim()" variant="secondary" size="sm" class="rounded-lg"
                             @click="handleDeleteSearchValue"
                         >
-                            {{ t('common.clear') }}
+                            {{ labelClear }}
                         </TelaButton>
                     </ComboboxEmpty>
                     <template v-for="group in groupedOptions" :key="group.heading">
@@ -330,7 +367,7 @@ watch(innerValue, (value) => {
                                                     <span class="font-medium truncate w-full">{{ item.label }}</span>
                                                     <span
                                                         class="font-semibold uppercase text-9px tracking-wider text-gray-700 bg-gray-100 rounded leading-none py-2px px-1"
-                                                    >{{ t('common.comingSoon') }}</span>
+                                                    >{{ labelComingSoon }}</span>
                                                 </div>
                                                 <span v-else class="font-medium truncate w-full">{{ item.label }}</span>
                                                 <span v-if="item.description" class="font-normal text-sm leading-none text-gray-500">

package/components/tela/combobox/combobox.mdx

@@ -298,6 +298,10 @@ Example with explicit labels:
 />
 ```
 
+### Module Selector Labels
+
+`TelaComboboxModuleSelector` follows the same host-owned translation boundary. Its visible copy is configurable through `labelEverything`, `labelModules`, `labelResources`, `labelActions`, `labelTemplates`, `labelSearchPlaceholder`, `labelNoResults`, `labelNoResultsWithSearch`, `labelPress`, `labelToClear`, `labelClear`, `labelComingSoon`, and `getTabLabel`. Omitted values use English defaults.
+
 ## Slots
 
 - `tags` - Custom tags/badges for each option (receives `option` as slot prop)

package/components/tela/complex-table/complex-table-row.vue

@@ -5,7 +5,7 @@ import TelaTableCell from './complex-table-cell.vue'
 import { isHorizontalSpacerColumn } from './composables/horizontal-virtual-columns'
 import { isLoading, hasContent, hasError, getRowTitle, readRowPath } from './utils'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     row: Row
     rowIndex: number
     columns: Column[]
@@ -25,10 +25,13 @@ const props = defineProps<{
     isLastRow?: boolean
     totalRows?: number
     hideError?: boolean
+    errorLabel?: string
     selectClass?: string
     showBorder?: boolean
     borderMode?: 'default' | 'visible'
-}>()
+}>(), {
+    errorLabel: 'Error',
+})
 
 const emit = defineEmits<{
     select: [id: string, shiftKey: boolean]
@@ -153,7 +156,7 @@ function handleCheckboxChange() {
         <td v-if="hasError(row)" :colspan="columns.length">
             <div v-if="!hideError" flex="~ row" items-center py-12px pl-12px h-64px b="gray-200" :class="rowClass">
                 <span z-1 body-14-medium class="text-[#BE2741]">
-                    {{ $t('common.error') }}
+                    {{ errorLabel }}
                 </span>
                 <span v-if="row.errorMessage" line-clamp-2 body-14-medium class="text-[#BE2741]">
                     : {{ row.errorMessage }}

package/components/tela/complex-table/complex-table-virtualized.vue

@@ -360,6 +360,7 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
                         :is-first-row="idx === 0"
                         :is-last-row="idx === rows.length - 1"
                         :hide-error="props.hideError"
+                        :error-label="props.errorLabel"
                         :total-rows="rows.length"
                         :show-border="isVisible"
                         :border-mode="virtualScroll ? 'visible' : 'default'"

package/components/tela/complex-table/complex-table.mdx

@@ -412,6 +412,7 @@ type ComplexTableProps = {
   headerClass?: string
   hideScrollbar?: boolean
   hideError?: boolean
+  errorLabel?: string // default: 'Error'; pass a translated label from the host app
   useVirtualization?: boolean
   virtualizedOverscan?: number
   virtualizedRowHeight?: number

package/components/tela/complex-table/complex-table.vue

@@ -259,6 +259,7 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
                         :is-first-row="idx === 0"
                         :is-last-row="idx === rows.length - 1"
                         :hide-error="props.hideError"
+                        :error-label="props.errorLabel"
                         :total-rows="rows.length"
                         @select="handleRowSelect"
                         @open="(id: string) => emit('open', id)"

package/components/tela/complex-table/types.ts

@@ -60,6 +60,7 @@ export type ComplexTableType = {
     hideScrollbar?: boolean
     showVerticalScrollbar?: boolean
     hideError?: boolean
+    errorLabel?: string
     useVirtualization?: boolean
     virtualizedOverscan?: number
     virtualizedRowHeight?: number

package/components/tela/file-upload/file-upload.mdx

@@ -127,14 +127,32 @@ const removeFile = (index) => {
 <ArgTypes />
 
 ```typescript
+type FileUploadLabels = {
+  dragAndDrop?: string
+  orBrowse?: string
+  supportedFormats?: string
+  and?: string
+  more?: string
+  maxSize?: (maxSize: number) => string
+  filesCount?: (current: number, max: number) => string
+  invalidFormat?: (formats: string) => string
+  fileTooLarge?: (maxSize: number) => string
+  tooManyFiles?: (maxFiles: number) => string
+}
+
 type FileUploadProps = {
-  accept?: string
+  class?: string
   multiple?: boolean
-  disabled?: boolean
-  maxSize?: number
+  maxFiles?: number
+  maxFileSize?: number
+  acceptedFormats?: string[]
+  acceptedExtensions?: string[]
+  labels?: FileUploadLabels
 }
 ```
 
+Pass translated copy and validation messages through `labels`. English defaults are used when labels are omitted; no i18n plugin is required.
+
 ## Events
 
 - `change` - Emitted when files are selected with FileList

package/components/tela/file-upload/file-upload.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+
+interface FileUploadLabels {
+    dragAndDrop?: string
+    orBrowse?: string
+    supportedFormats?: string
+    and?: string
+    more?: string
+    maxSize?: (maxSize: number) => string
+    filesCount?: (current: number, max: number) => string
+    invalidFormat?: (formats: string) => string
+    fileTooLarge?: (maxSize: number) => string
+    tooManyFiles?: (maxFiles: number) => string
+}
 
 const props = withDefaults(defineProps<{
     class?: string
@@ -9,19 +21,32 @@ const props = withDefaults(defineProps<{
     maxFileSize?: number // in MB
     acceptedFormats?: string[] // e.g., ['image/png', 'image/jpeg', 'application/pdf']
     acceptedExtensions?: string[] // e.g., ['.png', '.jpg', '.pdf'] - for display
+    labels?: FileUploadLabels
 }>(), {
     multiple: true,
     maxFiles: 5,
     maxFileSize: 10, // 10MB default
     acceptedFormats: () => [],
     acceptedExtensions: () => [],
+    labels: () => ({}),
 })
 
 const emit = defineEmits<{
     error: [message: string]
 }>()
 
-const { t } = useI18n()
+const labels = computed(() => ({
+    dragAndDrop: props.labels.dragAndDrop ?? 'Drag and drop files here',
+    orBrowse: props.labels.orBrowse ?? 'or browse',
+    supportedFormats: props.labels.supportedFormats ?? 'Supported formats',
+    and: props.labels.and ?? 'and',
+    more: props.labels.more ?? 'more',
+    maxSize: props.labels.maxSize ?? ((maxSize: number) => `Max ${maxSize}MB`),
+    filesCount: props.labels.filesCount ?? ((current: number, max: number) => `${current}/${max} files`),
+    invalidFormat: props.labels.invalidFormat ?? ((formats: string) => `Invalid file format. Accepted formats: ${formats}`),
+    fileTooLarge: props.labels.fileTooLarge ?? ((maxSize: number) => `Some files exceed the ${maxSize}MB size limit`),
+    tooManyFiles: props.labels.tooManyFiles ?? ((maxFiles: number) => `Maximum ${maxFiles} files allowed`),
+}))
 const files = defineModel<File[]>({ required: true })
 const isDragging = ref(false)
 
@@ -48,7 +73,7 @@ function validateFiles(newFiles: FileList | File[]): File[] {
             const formatsDisplay = props.acceptedExtensions.length > 0
                 ? props.acceptedExtensions.join(', ').toUpperCase()
                 : props.acceptedFormats.join(', ')
-            emit('error', t('common.fileUpload.errors.invalidFormat', { formats: formatsDisplay }))
+            emit('error', labels.value.invalidFormat(formatsDisplay))
             return []
         }
     }
@@ -56,14 +81,14 @@ function validateFiles(newFiles: FileList | File[]): File[] {
     // Check file sizes
     const oversizedFiles = fileArray.filter(file => file.size > maxSizeBytes)
     if (oversizedFiles.length > 0) {
-        emit('error', t('common.fileUpload.errors.fileTooLarge', { maxSize: props.maxFileSize }))
+        emit('error', labels.value.fileTooLarge(props.maxFileSize))
         return []
     }
 
     // Check total file count
     const totalFiles = files.value.length + fileArray.length
     if (totalFiles > props.maxFiles) {
-        emit('error', t('common.fileUpload.errors.tooManyFiles', { maxFiles: props.maxFiles }))
+        emit('error', labels.value.tooManyFiles(props.maxFiles))
         return []
     }
 
@@ -169,15 +194,15 @@ const fileTypesDisplay = computed(() => {
             <TelaIcon name="i-ph-upload-simple-bold" size="16px" color="gray-400" />
             <div class="flex flex-col items-center justify-center gap-1">
                 <h5 heading-h5-semibold text-primary>
-                    {{ $t('common.fileUpload.dragAndDrop') }} <TelaLinkDecoration class="body-14-regular ml-1px text-gray-700">{{ $t('common.fileUpload.orBrowse') }}</TelaLinkDecoration>
+                    {{ labels.dragAndDrop }} <TelaLinkDecoration class="body-14-regular ml-1px text-gray-700">{{ labels.orBrowse }}</TelaLinkDecoration>
                 </h5>
                 <div flex="~ col" gap-1px items-center>
                     <p flex items-center gap-4px body-12-regular text-tertiary>
-                        {{ $t('common.fileUpload.supportedFormats') }}: {{ fileTypesDisplay.text }}
+                        {{ labels.supportedFormats }}: {{ fileTypesDisplay.text }}
                         <template v-if="fileTypesDisplay.hasMore">
-                            {{ t('common.and') }}
+                            {{ labels.and }}
                             <TelaLinkDecoration class="text-inherit underline-offset-2px">
-                                {{ fileTypesDisplay.moreCount }} {{ t('common.more') }}
+                                {{ fileTypesDisplay.moreCount }} {{ labels.more }}
                             </TelaLinkDecoration>
                             <TelaTooltip variant="multiline" content-class="w-fit min-w-100px max-w-100px" :description="fileTypesDisplay.moreTooltip" side="right">
                                 <TelaIcon name="i-ph-info-bold" size="14px" color="gray-400" />
@@ -185,7 +210,7 @@ const fileTypesDisplay = computed(() => {
                         </template>
                     </p>
                     <p body-12-regular text-tertiary>
-                        {{ t('common.fileUpload.maxSize', { maxSize: maxFileSize }) }} · {{ t('common.fileUpload.filesCount', { current: files.length, max: maxFiles }) }}
+                        {{ labels.maxSize(maxFileSize) }} · {{ labels.filesCount(files.length, maxFiles) }}
                     </p>
                 </div>
             </div>

package/components/tela/i18n-boundary.test.ts

@@ -0,0 +1,48 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { dirname, extname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const componentsRoot = dirname(fileURLToPath(import.meta.url))
+const buildRoot = resolve(componentsRoot, '../..')
+const excludedDirectories = new Set(['.nuxt', '.output', '__tests__', 'coverage', 'node_modules'])
+
+function runtimeSourceFiles(directory: string): string[] {
+    return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+        const path = join(directory, entry.name)
+
+        if (entry.isDirectory())
+            return excludedDirectories.has(entry.name) ? [] : runtimeSourceFiles(path)
+
+        if (entry.name.endsWith('.test.ts') || entry.name.endsWith('.spec.ts'))
+            return []
+
+        return ['.ts', '.vue'].includes(extname(entry.name)) ? [path] : []
+    })
+}
+
+describe('tela Build translation boundary', () => {
+    it('keeps components independent from a host i18n plugin', () => {
+        const violations = runtimeSourceFiles(buildRoot).flatMap((path) => {
+            const source = readFileSync(path, 'utf8')
+            const matches = [
+                /from\s+['"]vue-i18n['"]/.test(source) && 'imports vue-i18n',
+                source.includes('useI18n(') && 'calls useI18n',
+                source.includes('$t(') && 'calls global $t',
+            ].filter(Boolean)
+
+            return matches.map(message => `${relative(buildRoot, path)}: ${message}`)
+        })
+
+        expect(violations).toEqual([])
+    })
+
+    it('does not ask Vite to resolve vue-i18n for consumers', () => {
+        const nuxtConfig = readFileSync(resolve(buildRoot, 'nuxt.config.ts'), 'utf8')
+        const packageJson = JSON.parse(readFileSync(resolve(buildRoot, 'package.json'), 'utf8'))
+
+        expect(nuxtConfig).not.toContain('vue-i18n')
+        expect(packageJson.dependencies ?? {}).not.toHaveProperty('vue-i18n')
+        expect(packageJson.peerDependencies ?? {}).not.toHaveProperty('vue-i18n')
+    })
+})

package/components/tela/input/input.mdx

@@ -71,6 +71,7 @@ const value = ref('')
   v-model="value"
   placeholder="you@example.com"
   show-clear-button
+  clear-label="Clear"
 />
 ```
 
@@ -147,6 +148,7 @@ type InputProps = {
   disabled?: boolean
   error?: string | false
   showClearButton?: boolean
+  clearLabel?: string // default: 'Clear'; pass a translated label from the host app
   tabindex?: number
   autofocus?: boolean
   autocomplete?: 'on' | 'off'
@@ -166,7 +168,7 @@ type InputProps = {
 - **Label Support**: Built-in label with hide option for accessibility
 - **Error Handling**: Display validation errors with styling
 - **Icon Integration**: Add icons inside the input field
-- **Clear Button**: Quick clear functionality with show/hide control
+- **Clear Button**: Quick clear functionality with a host-provided accessible tooltip label
 - **Auto-focus**: Automatically focus on mount
 - **Disabled State**: Proper disabled styling and behavior
 - **Character Limit**: Maxlength support with counter

package/components/tela/input/input.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<{
     disabled?: boolean
     error?: string | false
     showClearButton?: boolean
+    clearLabel?: string
     tabindex?: number
     autofocus?: boolean
     autocomplete?: 'off' | 'on'
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<{
     size?: 'sm' | 'md'
 }>(), {
     variant: 'default',
+    clearLabel: 'Clear',
 })
 
 const emit = defineEmits<{
@@ -201,7 +203,7 @@ defineExpose({
 
             <div v-if="showClearButton && modelValue" class="top-60% -translate-y-60%" right-1 absolute>
                 <TelaTooltip
-                    :content="$t('common.clear')"
+                    :content="clearLabel"
                 >
                     <button
                         hover:bg="#EBEFF199"

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

@@ -206,6 +206,26 @@ type SelectMenuOption = {
   to?: string
 }
 
+type MultipleSelectLabels = {
+  selectOptions?: string
+  andMore?: (count: number) => string
+  add?: string
+  addAnother?: string
+  more?: string
+  and?: string
+  assignedItems?: string
+  otherCount?: (count: number) => string
+  itemCount?: (count: number) => string
+  selectAll?: string
+  clearAll?: string
+  noOptionsFound?: (search: string) => string
+  noRemainingValues?: string
+  press?: string
+  toClear?: string
+  clear?: string
+  selectMultipleOptions?: string
+}
+
 type MultipleSelectProps = {
   modelValue?: string[]
   readOnly?: boolean
@@ -222,9 +242,12 @@ type MultipleSelectProps = {
   variant?: 'list' | 'preview' | 'compact'
   previewMaxItems?: number
   description?: string
+  labels?: MultipleSelectLabels
 }
 ```
 
+Pass translated copy through `labels` when the host supports localization. English defaults are used for omitted labels, and the component does not require an i18n plugin.
+
 ## Slots
 
 - `trigger` - Custom trigger button (receives selectedOptions, selectedValues, displayText, readOnly, buttonIcon, buttonLabel, and toggleSelection)

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

@@ -13,7 +13,26 @@ import {
 } from 'radix-vue'
 import { nextTick } from 'vue'
 import PopoverList from '../popover-list/popover-list.vue'
-import { useI18n } from 'vue-i18n'
+
+interface MultipleSelectLabels {
+    selectOptions?: string
+    andMore?: (count: number) => string
+    add?: string
+    addAnother?: string
+    more?: string
+    and?: string
+    assignedItems?: string
+    otherCount?: (count: number) => string
+    itemCount?: (count: number) => string
+    selectAll?: string
+    clearAll?: string
+    noOptionsFound?: (search: string) => string
+    noRemainingValues?: string
+    press?: string
+    toClear?: string
+    clear?: string
+    selectMultipleOptions?: string
+}
 
 const props = withDefaults(defineProps<{
     modelValue?: string[]
@@ -32,6 +51,7 @@ const props = withDefaults(defineProps<{
     previewMaxItems?: number
     description?: string
     avatarOptions?: boolean
+    labels?: MultipleSelectLabels
 }>(), {
     maxSelectedDisplay: 10,
     searchPlaceholder: 'Search options...',
@@ -40,6 +60,7 @@ const props = withDefaults(defineProps<{
     buttonIcon: 'i-ph-plus',
     variant: 'list',
     previewMaxItems: 3,
+    labels: () => ({}),
 })
 
 const emit = defineEmits<{
@@ -51,7 +72,25 @@ const emit = defineEmits<{
     'blur': []
 }>()
 
-const { t } = useI18n()
+const labels = computed(() => ({
+    selectOptions: props.labels.selectOptions ?? 'Select options...',
+    andMore: props.labels.andMore ?? ((count: number) => `+${count} more`),
+    add: props.labels.add ?? 'Add',
+    addAnother: props.labels.addAnother ?? 'Add another',
+    more: props.labels.more ?? 'more',
+    and: props.labels.and ?? 'and',
+    assignedItems: props.labels.assignedItems ?? 'Assigned items',
+    otherCount: props.labels.otherCount ?? ((count: number) => `${count} ${count === 1 ? 'other' : 'others'}`),
+    itemCount: props.labels.itemCount ?? ((count: number) => `${count} ${count === 1 ? 'item' : 'items'}`),
+    selectAll: props.labels.selectAll ?? 'Select all',
+    clearAll: props.labels.clearAll ?? 'Clear all',
+    noOptionsFound: props.labels.noOptionsFound ?? ((search: string) => `No options found with '${search}'`),
+    noRemainingValues: props.labels.noRemainingValues ?? 'No remaining values',
+    press: props.labels.press ?? 'Press',
+    toClear: props.labels.toClear ?? 'to clear',
+    clear: props.labels.clear ?? 'Clear',
+    selectMultipleOptions: props.labels.selectMultipleOptions ?? 'Select multiple options',
+}))
 
 type SelectMenuOption = {
     value: string
@@ -185,7 +224,7 @@ const hasAvailableOptions = computed(() => {
 
 const displayText = computed(() => {
     if (selectedOptions.value.length === 0) {
-        return props.placeholder || t('common.selectOptions')
+        return props.placeholder || labels.value.selectOptions
     }
 
     const maxDisplay = props.maxSelectedDisplay
@@ -193,7 +232,7 @@ const displayText = computed(() => {
         return selectedOptions.value.map(option => option.label).join(', ')
     }
 
-    return `${selectedOptions.value.slice(0, maxDisplay).map(option => option.label).join(', ')} ${t('common.andMore', { count: selectedOptions.value.length - maxDisplay })}`
+    return `${selectedOptions.value.slice(0, maxDisplay).map(option => option.label).join(', ')} ${labels.value.andMore(selectedOptions.value.length - maxDisplay)}`
 })
 
 const previewDisplayText = computed(() => {
@@ -222,7 +261,7 @@ const remainingItems = computed(() => {
 
 const isSelected = (value: string) => selectedValues.value.includes(value)
 
-const buttonLabel = computed(() => props.buttonLabel ?? (selectedOptions.value.length === 0 ? t('common.add') : t('common.addAnother')))
+const buttonLabel = computed(() => props.buttonLabel ?? (selectedOptions.value.length === 0 ? labels.value.add : labels.value.addAnother))
 
 function toggleSelection(value: string) {
     if (!value)
@@ -365,7 +404,7 @@ function handleSearchKeydown(e: KeyboardEvent) {
                             border-t="0.5px gray-300"
                             pt-4px
                         >
-                            +{{ selectedOptions.length - (props.maxSelectedDisplay) }} {{ t('common.more') }}
+                            +{{ selectedOptions.length - (props.maxSelectedDisplay) }} {{ labels.more }}
                         </span>
                     </div>
                 </div>
@@ -385,7 +424,7 @@ function handleSearchKeydown(e: KeyboardEvent) {
                         rounded-8px
                         transition
                         outline-none
-                        aria-label="Select multiple options"
+                        :aria-label="labels.selectMultipleOptions"
                         w-full
                         v-bind="$attrs"
                         :class="[
@@ -423,17 +462,17 @@ function handleSearchKeydown(e: KeyboardEvent) {
                                     v-if="previewDisplayText.remainingCount > 0"
                                     class="body-12-regular flex-shrink-0 ml-4px"
                                 >
-                                    {{ t('common.and') }}
+                                    {{ labels.and }}
                                 </span>
                                 <PopoverList
                                     v-if="previewDisplayText.remainingCount > 0"
                                     :items="remainingItems.map(item => item.label)"
                                     position="center"
-                                    :title="t('workstationComponents.assignedColumns')"
+                                    :title="labels.assignedItems"
                                 >
                                     <template #trigger>
                                         <span class="body-12-regular underline flex-shrink-0 ml-4px cursor-pointer hover:text-blue-600 transition-colors">
-                                            {{ t('common.otherCount', { count: previewDisplayText.remainingCount }) }}
+                                            {{ labels.otherCount(previewDisplayText.remainingCount) }}
                                         </span>
                                     </template>
                                 </PopoverList>
@@ -478,11 +517,11 @@ function handleSearchKeydown(e: KeyboardEvent) {
                     </div>
 
                     <div v-if="filteredOptions.length > 0" flex items-center justify-between pl-10px pr-10px py-4px border-b="0.5px border">
-                        <span body-12-semibold text-gray-700>{{ t('common.itemCount', { count: filteredOptions.length }) }}</span>
+                        <span body-12-semibold text-gray-700>{{ labels.itemCount(filteredOptions.length) }}</span>
 
                         <TelaButton variant="ghost" size="sm" class="rounded-lg" @click="selectAll">
                             <span body-12-regular text-gray-900 underline>
-                                {{ selectedValues.length !== filteredOptions.length ? t('common.selectAll') : t('common.clearAll') }}
+                                {{ selectedValues.length !== filteredOptions.length ? labels.selectAll : labels.clearAll }}
                             </span>
                         </TelaButton>
                     </div>
@@ -495,10 +534,10 @@ function handleSearchKeydown(e: KeyboardEvent) {
                             <div class="flex flex-col items-center justify-center gap-3">
                                 <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
                                 <span class="text-xl font-medium leading-none text-center">
-                                    {{ search.trim() ? t('common.noOptionsFound', { search: search.trim() }) : t('common.noRemainingValues') }}
+                                    {{ search.trim() ? labels.noOptionsFound(search.trim()) : labels.noRemainingValues }}
                                 </span>
                                 <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-gray-500 items-center">
-                                    {{ t('common.press') }}
+                                    {{ labels.press }}
                                     <div class="flex items-center gap-1">
                                         <div class="p-2px bg-gray-200 rounded">
                                             <TelaIcon name="i-ph-command" size="16px" />
@@ -507,7 +546,7 @@ function handleSearchKeydown(e: KeyboardEvent) {
                                             <TelaIcon name="i-ph-backspace" size="16px" />
                                         </div>
                                     </div>
-                                    {{ t('common.toClear') }}
+                                    {{ labels.toClear }}
                                 </span>
                             </div>
                             <TelaButton
@@ -517,7 +556,7 @@ function handleSearchKeydown(e: KeyboardEvent) {
                                 class="rounded-lg"
                                 @click="handleDeleteSearchValue"
                             >
-                                {{ t('common.clear') }}
+                                {{ labels.clear }}
                             </TelaButton>
                         </div>
 

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

@@ -6,6 +6,7 @@ interface PopoverListProps<T> {
     items: T[]
     title?: string
     subtitle?: string
+    emptyLabel?: string
     position?: 'left' | 'center' | 'right'
     placement?: 'top' | 'bottom'
     nested?: boolean
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<PopoverListProps<T>>(), {
     placement: 'bottom',
     nested: false,
     nestedVariant: 'attributes',
+    emptyLabel: 'No items available',
 })
 
 const popoverOpen = defineModel('open', {
@@ -180,7 +182,7 @@ function getChildren(item: T): T[] {
                     <slot name="empty">
                         <div class="flex flex-col items-start gap-2 w-full">
                             <p class="text-[#D4D9DE] text-left font-inter text-[12px] font-normal leading-[16px] w-full">
-                                {{ $t('common.noItemsAvailable') }}
+                                {{ emptyLabel }}
                             </p>
                         </div>
                     </slot>

package/components/tela/reasoning/todo-list/todo-list.vue

@@ -90,11 +90,11 @@ const showMoreTextWithCount = computed(() => {
                 <div flex="~ col" gap-10px :class="props.contentClass">
                     <div flex items-center justify-between pl-4px pb-10px border-b-0.5px border>
                         <h5 heading-h5-semibold text-primary class="@2xl:heading-h4-semibold">
-                            {{ $t('workflow.agent.tools.todoList') }}
+                            {{ props.title }}
                         </h5>
-                        <TelaStatus v-if="completedPercent === 100" variant="completed" :label="$t('workflow.agent.tools.completed')" />
+                        <TelaStatus v-if="completedPercent === 100" variant="completed" :label="props.completedText" />
                         <p v-else body-14-medium text-secondary class="@2xl:body-16-medium">
-                            <TelaAnimatedNumber :value="completedPercent" />% {{ $t('workflow.agent.tools.completed') }}
+                            <TelaAnimatedNumber :value="completedPercent" />% {{ props.completedText }}
                         </p>
                     </div>
                     <div flex="~ col" gap-7px class="@2xl:gap-10px" px-1px>

package/components/tela/reasoning/tool-use-display/tool-use-display.vue

@@ -22,6 +22,11 @@ const props = withDefaults(defineProps<{
     errorLabel?: string
     itemsLabel?: string
     propertiesLabel?: string
+    itemsCountLabel?: (count: number) => string
+    propertiesCountLabel?: (count: number) => string
+    showMoreLabel?: string
+    showLessLabel?: string
+    resultLabel?: string
     iconWrapperClass?: any
     iconClass?: any
     iconColor?: string
@@ -33,6 +38,11 @@ const props = withDefaults(defineProps<{
     errorLabel: 'Error',
     itemsLabel: 'items',
     propertiesLabel: 'properties',
+    itemsCountLabel: (count: number) => `${count} items`,
+    propertiesCountLabel: (count: number) => `${count} properties`,
+    showMoreLabel: 'Show more',
+    showLessLabel: 'Show less',
+    resultLabel: 'Result',
     iconColor: 'icon-secondary',
 })
 
@@ -236,7 +246,7 @@ function getIconName() {
 
                                     <div v-else-if="Array.isArray(value)" flex="~ col" gap-4px>
                                         <span text-xs text-gray-500>
-                                            {{ $t('reasoningSteps.itemsCount', { count: value.length }) }}
+                                            {{ props.itemsCountLabel(value.length) }}
                                         </span>
                                         <div bg-gray-50 rounded-10px bg border-0.5px border-gray-200 p-3>
                                             <div v-for="(item, idx) in value" :key="idx" text-sm py-0.5>
@@ -248,7 +258,7 @@ function getIconName() {
 
                                     <div v-else-if="typeof value === 'object' && value !== null" flex="~ col" gap-4px>
                                         <span text-xs text-gray-500>
-                                            {{ $t('reasoningSteps.propertiesCount', { count: Object.keys(value).length }) }}
+                                            {{ props.propertiesCountLabel(Object.keys(value).length) }}
                                         </span>
                                         <div bg-gray-50 rounded-10px bg border-0.5px border-gray-200 p-3>
                                             <div
@@ -259,7 +269,7 @@ function getIconName() {
                                             </div>
                                             <div v-if="needsToggle(value)" mt-2 flex justify-center>
                                                 <button type="button" text-sm text-primary-600 hover:opacity-80 flex items-center gap-2 @click.prevent="toggle(String(key))">
-                                                    {{ expanded[String(key)] ? $t('reasoningSteps.showLess') : $t('reasoningSteps.showMore') }}
+                                                    {{ expanded[String(key)] ? props.showLessLabel : props.showMoreLabel }}
                                                     <i class="i-ph-caret-down" :style="{ transform: expanded[String(key)] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" />
                                                 </button>
                                             </div>
@@ -276,7 +286,7 @@ function getIconName() {
                                         </div>
                                         <div v-if="needsToggle(value)" mt-2 flex justify-center>
                                             <button type="button" text-sm text-primary-600 hover:opacity-80 flex items-center gap-2 @click.prevent="toggle(String(key))">
-                                                {{ expanded[String(key)] ? $t('reasoningSteps.showLess') : $t('reasoningSteps.showMore') }}
+                                                {{ expanded[String(key)] ? props.showLessLabel : props.showMoreLabel }}
                                                 <i class="i-ph-caret-down" :style="{ transform: expanded[String(key)] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" />
                                             </button>
                                         </div>
@@ -284,7 +294,7 @@ function getIconName() {
                                 </div>
                             </div>
                             <div v-if="toolResult?.output || isRunning" flex="~ col" gap-6px>
-                                <span body-12-regular text-gray-700 class="@2xl:body-14-regular">{{ $t('workflow.result') }}</span>
+                                <span body-12-regular text-gray-700 class="@2xl:body-14-regular">{{ props.resultLabel }}</span>
                                 <div v-if="toolResult?.output" bg border-0.5px border-gray-200 rounded-10px pl-10px py-2>
                                     <TelaScrollArea class="flex flex-col max-h-300px">
                                         <div max-h-300px pr-4>

package/components/tela/variable-input.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
 interface Variable {
     name: string
     type: 'file' | 'text' | 'mixed'
@@ -8,15 +6,38 @@ interface Variable {
     processingOptions?: { allowMultimodal: boolean }
 }
 
-defineProps<{
+interface VariableInputLabels {
+    file?: string
+    text?: string
+    mixed?: string
+    multimodal?: string
+    required?: string
+    placeholder?: string
+}
+
+const props = withDefaults(defineProps<{
     variable: Variable
     tabindex?: number
     error?: boolean
-}>()
+    labels?: VariableInputLabels
+}>(), {
+    labels: () => ({}),
+})
 const content = defineModel<string>()
 const markdownContent = defineModel<string>('markdownContent')
 
-const { t } = useI18n()
+const labels = computed(() => ({
+    file: props.labels.file ?? 'file',
+    text: props.labels.text ?? 'text',
+    mixed: props.labels.mixed ?? 'mixed',
+    multimodal: props.labels.multimodal ?? 'multimodal',
+    required: props.labels.required ?? 'Required',
+    placeholder: props.labels.placeholder ?? 'Write, paste, or drop a file',
+}))
+
+const variableTypeLabel = computed(() => props.variable.processingOptions?.allowMultimodal
+    ? labels.value.multimodal
+    : labels.value[props.variable.type])
 </script>
 
 <template>
@@ -28,11 +49,11 @@ const { t } = useI18n()
                     {{ variable.name }}{{ variable.required ? "*" : "" }}
                 </p>
                 <p body-12-regular text-gray-400>
-                    ({{ variable.processingOptions?.allowMultimodal ? t('canvas.variableTypes.multimodal') : t(`canvas.variableTypes.${variable.type}`) }})
+                    ({{ variableTypeLabel }})
                 </p>
             </div>
             <p v-if="variable.required" body-12-regular text-gray-400>
-                * {{ t('canvas.required') }}
+                * {{ labels.required }}
             </p>
             <slot name="actions" />
         </div>
@@ -47,7 +68,7 @@ const { t } = useI18n()
                 v-model:markdown-content="markdownContent"
                 v-model="content"
                 basic
-                :placeholder="t('canvas.variablePlaceholder')"
+                :placeholder="labels.placeholder"
                 text="12px textcolor/90"
                 leading-1.4em tracking--0.01em
                 :multimodal="variable.processingOptions?.allowMultimodal"

package/nuxt.config.ts

@@ -7,7 +7,7 @@ import { fileURLToPath } from 'node:url'
 import { createResolver } from 'nuxt/kit'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
-const { resolve } = createResolver(import.meta.url)
+const resolver = createResolver(import.meta.url)
 const componentsDir = join(currentDir, './components')
 const composablesDir = join(currentDir, './composables')
 const utilsDir = join(currentDir, './utils')
@@ -25,7 +25,7 @@ export default defineNuxtConfig({
         '@vueuse/nuxt',
         'motion-v/nuxt',
         'nuxt-svgo',
-        resolve('./modules/tela-build-docs'),
+        resolver.resolve('./modules/tela-build-docs'),
     ],
 
     svgo: {
@@ -116,7 +116,6 @@ export default defineNuxtConfig({
                 'shiki/core',
                 'shiki/engine/javascript',
                 'tailwind-merge',
-                'vue-i18n',
                 'vue-input-otp',
             ],
             exclude: [

package/package.json

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