@meistrari/tela-build 1.56.1 → 1.57.0

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<{
+    to?: string
+    current?: boolean
+}>()
+
+const isLink = computed(() => props.to !== undefined)
+
+const style = computed(() => {
+    if (isLink.value)
+        return 'body-12-regular text-tertiary hover:text-secondary transition-colors duration-150'
+
+    if (props.current)
+        return 'body-12-medium text-primary'
+
+    return 'body-12-regular text-tertiary'
+})
+</script>
+
+<template>
+    <li class="flex items-center select-none">
+        <Primitive
+            :as="isLink ? NuxtLink : 'span'"
+            :to="to"
+            :aria-current="current ? 'page' : undefined"
+            :class="style"
+        >
+            <slot />
+        </Primitive>
+    </li>
+</template>

package/components/tela/breadcrumbs/breadcrumbs-separator.vue

@@ -0,0 +1,5 @@
+<template>
+    <li aria-hidden="true" class="flex items-center">
+        <TelaIcon name="i-ph-caret-right-bold" size="10px" color="icon-tertiary" />
+    </li>
+</template>

package/components/tela/breadcrumbs/breadcrumbs.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as BreadcrumbsStories from './breadcrumbs.stories';
+
+<Meta of={BreadcrumbsStories} />
+
+# TelaBreadcrumbs
+
+A navigation trail showing where the current page sits in the hierarchy — e.g. **Components › Button** or **Layouts › Home**. Built on Reka UI's `Primitive`, so items render as `NuxtLink`s when given a `to` and as the plain current-page label when not.
+
+## Example
+
+```vue
+<TelaBreadcrumbs>
+    <TelaBreadcrumbsItem to="/components">Components</TelaBreadcrumbsItem>
+    <TelaBreadcrumbsSeparator />
+    <TelaBreadcrumbsItem current>Button</TelaBreadcrumbsItem>
+</TelaBreadcrumbs>
+```
+
+<Canvas of={BreadcrumbsStories.Default} />
+
+## Rules
+
+- The last item is the current page: set `current` (and no `to`) so it renders emphasized (`text-primary`) with `aria-current="page"`, never as a link.
+- An item with neither `to` nor `current` is a plain, non-interactive step (`text-tertiary`) — use it for sections that have no landing page of their own.
+- Put a `TelaBreadcrumbsSeparator` between every pair of items — never at the ends.
+- Ancestor items get a `to` and render as links in `text-tertiary`, brightening on hover.
+- Keep labels short — section and page names, not full titles.
+
+## Components
+
+### TelaBreadcrumbs
+
+Root wrapper. Renders a `<nav aria-label="Breadcrumb">` with a horizontal `<ol>` — place items and separators as direct children.
+
+### TelaBreadcrumbsItem
+
+One step in the trail, rendered as an `<li>`. With `to` it renders a `NuxtLink`; without it, the current page label.
+
+```typescript
+interface BreadcrumbsItemProps {
+    to?: string        // route path — renders as a NuxtLink when provided
+    current?: boolean  // marks the current page (aria-current="page", emphasized)
+}
+```
+
+### TelaBreadcrumbsSeparator
+
+A small caret between items, hidden from assistive tech (`aria-hidden`).

package/components/tela/breadcrumbs/breadcrumbs.vue

@@ -0,0 +1,7 @@
+<template>
+    <nav aria-label="Breadcrumb">
+        <ol class="flex items-center gap-4px">
+            <slot />
+        </ol>
+    </nav>
+</template>

package/components/tela/button/button.mdx

@@ -16,16 +16,16 @@ A versatile button component with multiple variants, sizes, and states. Supports
 - **Icon API — two separate props, never one.** The icon **name** goes on `icon`; its **position** is toggled with the boolean `leading`. Default position is trailing. `leading` never takes a value.
 
 ```vue
-<!-- ✅ Correct — icon on the leading side -->
+<!-- Correct — icon on the leading side -->
 <TelaButton icon="i-ph-export" leading>Export</TelaButton>
 
-<!-- ✅ Correct — icon on the trailing side (default) -->
+<!-- Correct — icon on the trailing side (default) -->
 <TelaButton icon="i-ph-arrow-right">Next</TelaButton>
 
-<!-- ❌ Wrong — `leading` is a boolean, not a slot for the icon name -->
+<!-- Wrong — `leading` is a boolean, not a slot for the icon name -->
 <TelaButton leading="i-ph-export">Export</TelaButton>
 
-<!-- ❌ Wrong — no `icon` prop means no icon renders -->
+<!-- Wrong — no `icon` prop means no icon renders -->
 <TelaButton leading>Export</TelaButton>
 ```
 

package/components/tela/checkbox/checkbox-card.vue

@@ -12,17 +12,17 @@ const forwarded = useForwardPropsEmits(props, emits)
 <template>
     <Label
         :class="cn(
-            'w-[380px] p-[12px] flex items-center gap-[12px] rounded-[8px] bg-white-1000 cursor-pointer border-[0.5px] border-gray-200 transition-colors disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200',
-            'has-[[aria-checked=false]]:hover:bg-gray-50 has-[[aria-checked=false]]:hover:border-gray-300 has-[[aria-checked=true]]:bg-blue-100/60 has-[[aria-checked=true]]:border-blue-700',
+            'w-[380px] p-[12px] flex items-center gap-[12px] rounded-[8px] bg cursor-pointer border-0.5px border transition-colors disabled:cursor-not-allowed disabled:bg-muted disabled:border',
+            'has-[[aria-checked=false]]:hover:bg-subtle has-[[aria-checked=false]]:hover:border-strong has-[[aria-checked=true]]:bg-blue-100/60 has-[[aria-checked=true]]:border-blue-700',
             props.class,
         )"
     >
         <TelaCheckbox v-bind="forwarded" />
         <div>
-            <h4 class="body-12-medium text-gray-900">
+            <h4 class="body-12-medium text-primary">
                 {{ label }}
             </h4>
-            <p class="body-12-regular text-gray-500">
+            <p class="body-12-regular text-secondary">
                 {{ description }}
             </p>
         </div>

package/components/tela/checkbox/checkbox.mdx

@@ -51,9 +51,9 @@ const accepted = ref(false)
 <template>
   <div class="flex items-center gap-2">
     <TelaCheckbox id="terms" v-model="accepted" />
-    <label for="terms" class="cursor-pointer">
+    <TelaLabel for="terms" class="cursor-pointer">
       I accept the terms and conditions
-    </label>
+    </TelaLabel>
   </div>
 </template>
 ```
@@ -71,29 +71,30 @@ const accepted = ref(false)
 <script setup>
 import { ref } from 'vue'
 
-const preferences = ref([])
+const notifications = ref(false)
+const newsletter = ref(false)
 </script>
 
 <template>
-  <form>
+  <form class="flex flex-col gap-2">
     <div class="flex items-center gap-2">
       <TelaCheckbox
         id="notifications"
-        v-model="preferences"
+        v-model="notifications"
         value="notifications"
         name="preferences"
       />
-      <label for="notifications">Enable notifications</label>
+      <TelaLabel for="notifications" class="cursor-pointer">Enable notifications</TelaLabel>
     </div>
 
     <div class="flex items-center gap-2">
       <TelaCheckbox
         id="newsletter"
-        v-model="preferences"
+        v-model="newsletter"
         value="newsletter"
         name="preferences"
       />
-      <label for="newsletter">Subscribe to newsletter</label>
+      <TelaLabel for="newsletter" class="cursor-pointer">Subscribe to newsletter</TelaLabel>
     </div>
   </form>
 </template>

package/components/tela/code-block/code-block.mdx

@@ -42,9 +42,7 @@ const code = `function greet(name: string) {
   language="bash"
   :code="'pnpm install'"
   hide-line-numbers
-  without-border
   copy-button-variant="ghost"
-  class="bg-neutral-50 rounded-12px"
 />
 ```
 

package/components/tela/code-block/code-block.vue

@@ -30,7 +30,8 @@ const props = withDefaults(defineProps<{
 const highlighted = ref('')
 const isLoading = ref(true)
 const theme = computed(() => TelaTheme(props.background ?? 'transparent'))
-const skeletonLineCount = computed(() => props.code?.split('\n').length || 1)
+const lineCount = computed(() => props.code?.split('\n').length || 1)
+const isSingleLine = computed(() => lineCount.value === 1)
 
 watchEffect(() => {
     if (props.code && props.language) {
@@ -54,7 +55,7 @@ watchEffect(() => {
 </script>
 
 <template>
-    <div relative>
+    <div class="relative">
         <TelaScrollArea
             :orientation="props.truncate ? 'vertical' : 'both'"
             :scroll-hide-delay="0"
@@ -63,32 +64,30 @@ watchEffect(() => {
         >
             <div
                 v-if="isLoading"
-                class="block w-full py-9px text-[13px] leading-[1.5] overflow-visible border-0"
-                :class="!props.truncate ? 'pt-0.65rem' : ''"
+                class="block w-full text-[13px] leading-[1.5] overflow-visible border-0"
+                :class="props.hideLineNumbers ? 'py-9px' : [!props.truncate && 'pt-0.65rem', isSingleLine && !props.truncate ? 'pb-0.6rem' : 'pb-0.4rem']"
                 :style="props.hideLineNumbers ? undefined : { backgroundColor: '#fff' }"
             >
                 <div
-                    v-for="i in skeletonLineCount"
+                    v-for="i in lineCount"
                     :key="i"
-                    class="flex items-center gap-4px min-h-1.5em"
-                    :class="props.hideLineNumbers ? 'px-16px' : 'bg-white'"
+                    class="flex items-center"
+                    :class="props.hideLineNumbers ? 'min-h-18px pl-14px pr-48px' : 'min-h-1.5em bg-white'"
                 >
-                    <pre
+                    <span
                         v-if="!props.hideLineNumbers"
-                        class="w-2.75rem text-right pr-1rem text-neutral-400 text-13px"
-                    >
-                        {{ i }}
-                    </pre>
+                        class="w-2.75rem shrink-0 pr-1rem text-right font-mono text-neutral-400 text-13px"
+                    >{{ i }}</span>
                     <TelaSkeleton
-                        class="h-16px rounded-2px bg-neutral-200"
-                        :class="i % 3 === 0 ? 'w-full' : i % 3 === 1 ? 'w-4/5' : 'w-3/5'"
+                        class="h-14px rounded-2px bg-neutral-200"
+                        :class="i % 3 === 0 ? 'w-90%' : i % 3 === 1 ? 'w-4/5' : 'w-3/5'"
                     />
                 </div>
             </div>
             <div
                 v-else
                 class="block w-full text-13px leading-[1.5] overflow-visible border-0"
-                :class="!props.truncate ? 'pt-0.65rem' : ''"
+                :class="[!props.truncate && 'pt-0.65rem', isSingleLine && !props.truncate && 'pb-0.2rem']"
                 v-html="highlighted"
             />
         </TelaScrollArea>
@@ -97,7 +96,7 @@ watchEffect(() => {
             :content="code"
             :variant="copyButtonVariant"
             :size="copyButtonSize"
-            :class="cn('absolute top-10px right-10px z-10', props.copyButtonClass)"
+            :class="cn('absolute right-8px z-10', isSingleLine ? 'top-1/2 -translate-y-1/2' : 'top-8px', props.copyButtonClass)"
         />
     </div>
 </template>
@@ -122,11 +121,18 @@ pre.shiki {
         width: fit-content;
         min-width: 100%;
         counter-reset: line;
+        /* collapse the \n text nodes shiki emits between .line spans — each
+           block .line below already breaks the line, and Nuxt Content's
+           ProsePre leaks a global `pre code .line { display: block }` that
+           would otherwise double every line break */
+        white-space: normal;
     }
 
     code .line {
         --line-background-color: var(--pre-background-color);
         --line-border-color: #404040;
+        display: block;
+        white-space: pre;
         width: 100%;
         counter-increment: line;
         background-color: var(--line-background-color);

package/components/tela/collapsible-group/collapsible-group.mdx

@@ -12,7 +12,7 @@ A grouped collapsible component for stacking multiple expandable items in a sing
 ### Basic Usage
 
 ```vue
-<TelaCollapsibleGroup>
+<TelaCollapsibleGroup class="w-full">
   <TelaCollapsibleGroupItem title="Item 1" :items-length="4">
     <p>Lorem ipsum dolor sit amet.</p>
   </TelaCollapsibleGroupItem>
@@ -30,7 +30,7 @@ A grouped collapsible component for stacking multiple expandable items in a sing
 Omit `itemsLength` to hide the count badge entirely.
 
 ```vue
-<TelaCollapsibleGroup>
+<TelaCollapsibleGroup class="w-full">
   <TelaCollapsibleGroupItem title="Overview">
     <p>Just a title and content.</p>
   </TelaCollapsibleGroupItem>
@@ -45,7 +45,7 @@ Omit `itemsLength` to hide the count badge entirely.
 The count text defaults to `item` / `items`. Pass `singularLabel` and `pluralLabel` to localize or customize.
 
 ```vue
-<TelaCollapsibleGroup>
+<TelaCollapsibleGroup class="w-full">
   <TelaCollapsibleGroupItem
     title="Documents"
     :items-length="1"
@@ -75,7 +75,7 @@ const isOpen = ref(true)
 </script>
 
 <template>
-  <TelaCollapsibleGroup>
+  <TelaCollapsibleGroup class="w-full">
     <TelaCollapsibleGroupItem
       v-model:open="isOpen"
       title="Controlled Item"
@@ -92,7 +92,7 @@ const isOpen = ref(true)
 The `trigger-trailing` slot lets you place arbitrary content (badges, actions) next to the item count.
 
 ```vue
-<TelaCollapsibleGroup>
+<TelaCollapsibleGroup class="w-full">
   <TelaCollapsibleGroupItem title="With Action" :items-length="2">
     <template #trigger-trailing>
       <TelaBadge variant="warning">Pending</TelaBadge>

package/components/tela/copy-button.vue

@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<{
 const showConfirmationIcon = ref(false)
 
 const variantStyles = computed(() => ({
-    default: 'bg-white text-gray-400 border-0.5px border hover:bg-gray-50 hover:border-strong',
-    ghost: 'text-gray-900 hover:bg-gray-100',
+    default: 'bg-white text-icon-tertiary border-0.5px border hover:bg-subtle hover:border-strong',
+    ghost: 'text-contrast hover:bg-muted',
 } as Record<'default' | 'ghost', string>)[props.variant])
 
 const sizeStyles = computed(() => {
@@ -70,7 +70,7 @@ const transition = {
                 <button
                     flex="~ " items-center justify-center
                     ease will-change-transform active:scale-94
-                    class="group transition-[background-color,border-color,color,transform]"
+                    class="group duration-80 transition-[background-color,border-color,color,transform]"
                     :class="cn(isHovered === false && 'opacity-0', sizeStyles, variantStyles, props.class)"
                     @click="onClick(copy)"
                 >
@@ -84,7 +84,7 @@ const transition = {
                             <TelaIcon
                                 :size="size"
                                 name="i-ph-copy"
-                                op-80
+                                op-80 duration-80
                                 group-hover:op-100
                             />
                         </Motion>
@@ -97,7 +97,7 @@ const transition = {
                             <TelaIcon
                                 :size="size"
                                 name="i-ph-check"
-                                op-80
+                                op-80 duration-80
                                 group-hover:op-100
                             />
                         </Motion>

package/components/tela/create-card/create-card.mdx

@@ -16,15 +16,16 @@ A fixed-size entry point card for creating something new from files. Click it to
 ### Default
 
 ```vue
-<TelaCreateCard @change="handleChange" />
-```
-
-```ts
-function handleChange(event: Event) {
-  const input = event.target as HTMLInputElement
-  const files = input.files
+<script setup>
+function handleChange(event) {
+  const files = event.target.files
   // upload files...
 }
+</script>
+
+<template>
+  <TelaCreateCard @change="handleChange" />
+</template>
 ```
 
 ### Custom Labels
@@ -35,7 +36,6 @@ function handleChange(event: Event) {
   description="Drop a CSV or"
   browse-label="choose a file"
   :multiple="false"
-  @change="handleChange"
 />
 ```
 
@@ -47,23 +47,13 @@ function handleChange(event: Event) {
   title="New canvas"
   description="Drag files here"
   browse-label=""
-  @change="handleChange"
 />
 ```
 
 ### Disabled (e.g. while uploading)
 
 ```vue
-<TelaCreateCard :disabled="isUploading" @change="handleChange" />
-```
-
-### In a Grid
-
-```vue
-<div class="grid grid-cols-3 gap-4">
-  <TelaCreateCard @change="handleChange" />
-  <TelaCard v-for="item in items" :key="item.id" h-full>...</TelaCard>
-</div>
+<TelaCreateCard disabled />
 ```
 
 ## Props

package/components/tela/create-card/create-card.vue

@@ -75,7 +75,7 @@ function onDrop(event: DragEvent) {
         relative w-221px h-128px rounded-12px p-20px
         bg border-0.5px border
         flex="~ col" items-start justify-end text-start
-        hover:bg-subtle hover:border-strong active:bg-muted disabled:opacity-50 disabled:cursor-not-allowed
+        not-disabled:hover:bg-subtle not-disabled:hover:border-strong active:bg-muted disabled:opacity-50 disabled:cursor-not-allowed
         :class="isDragging ? 'border-dashed border-neutral-400 bg-subtle' : 'active:border-neutral-400/60'"
         @click="openFilePicker"
         @dragenter.prevent="onDragEnter"

package/components/tela/details/details.mdx

@@ -220,7 +220,7 @@ const handleConfirm = () => {}
 
 ## Props
 
-### `TelaDetailsLeft`
+### TelaDetailsLeft
 
 ```typescript
 type DetailsLeftProps = {
@@ -228,7 +228,7 @@ type DetailsLeftProps = {
 }
 ```
 
-### `TelaDetailsReviewConfirm`
+### TelaDetailsReviewConfirm
 
 ```typescript
 type ReviewConfirmProps = {
@@ -259,7 +259,7 @@ All other shell components are slot-only.
 9. **Left is the detail, right is the context — keep them asymmetric.** `TelaDetailsLeft` carries the dense, primary content (sectioned body, tables, forms, long copy); `TelaDetailsRight` stays lighter and more scannable. `TelaPreview` is the principal right-column content — a file or artifact preview alongside the primary column — but the right side can also hold simpler supporting pieces: cards, an accordion (`TelaCollapsibleGroup`), or a bit of metadata. Don't push primary detail into the right column; if it grows as complex as the left, reconsider the split.
 10. **When the page has a `TelaDetailsFooter`, close off the right column on scroll-bottom.** The sticky right column otherwise butts flush against the footer's top border with a square, open corner. Use `useDetailsScroll` to drive an `isAtBottom` flag and bind `border-b-0.5px rounded-bl-12px` to `TelaDetailsRight` so its bottom edge matches the footer when the user reaches the end. Pages **without** a footer don't need this.
 
-## Scroll state — `useDetailsScroll`
+## Scroll state — useDetailsScroll
 
 > **`useDetailsScroll` gives you two independent signals — use each only when it applies:**
 >

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

@@ -2,8 +2,6 @@
 import type { HTMLAttributes } from 'vue'
 import type { TooltipProps } from '../tooltip/tooltip.vue'
 
-import { VisuallyHidden } from 'radix-vue'
-
 import DropdownMenuRoot from './DropdownMenuRoot.vue'
 import DropdownMenuContent from './DropdownMenuContent.vue'
 import DropdownMenuGroup from './DropdownMenuGroup.vue'
@@ -47,7 +45,6 @@ defineEmits(['click'])
 
 const search = ref('')
 const searchInputEl = ref<HTMLInputElement>()
-const isStorybook = Boolean(import.meta.env.STORYBOOK)
 
 const filteredItems = computed(() => search.value ? props.items.filter(item => item.label.toLowerCase().includes(search.value.toLowerCase())) : props.items)
 const groups = computed(() => filteredItems.value.reduce((acc, item) => {
@@ -77,9 +74,6 @@ function onToggle(open: boolean) {
         <DropdownMenuRoot :modal="shouldBeModal" :default-open="defaultOpen" @update:open="onToggle">
             <DropdownMenuTrigger as-child :class="cn('data-[state=open]:bg-muted', triggerClass)" @click.prevent.stop>
                 <slot />
-                <VisuallyHidden v-if="isStorybook" as-child>
-                    <button />
-                </VisuallyHidden>
             </DropdownMenuTrigger>
 
             <DropdownMenuContent

package/components/tela/header/header.mdx

@@ -130,25 +130,25 @@ A composable header component for fullscreen views. Provides a sticky top bar wi
 
 ## Components
 
-### `TelaHeader`
+### TelaHeader
 
 Root header container. Sticky-positioned at the top with 64px height, bottom border, and full width.
 
 - **Slots:** `default` - accepts `TelaHeaderLeading`, `TelaHeaderCenter`, and `TelaHeaderTrailing`
 
-### `TelaHeaderLeading`
+### TelaHeaderLeading
 
 Left-side container with 12px gap between children.
 
 - **Slots:** `default` - accepts `TelaHeaderLeadingTrigger`, `TelaHeaderLeadingContent`
 
-### `TelaHeaderLeadingTrigger`
+### TelaHeaderLeadingTrigger
 
 Close button (X icon) for the leading section.
 
 - **Events:** `click` - emitted when the button is clicked
 
-### `TelaHeaderLeadingContent`
+### TelaHeaderLeadingContent
 
 Layout wrapper for leading content (title + summary).
 
@@ -156,19 +156,19 @@ Layout wrapper for leading content (title + summary).
 |------|------|---------|-------------|
 | `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction for child elements |
 
-### `TelaHeaderLeadingTitle`
+### TelaHeaderLeadingTitle
 
 H5 heading element with semibold weight and primary text color.
 
 - **Slots:** `default` - heading text
 
-### `TelaHeaderLeadingSummary`
+### TelaHeaderLeadingSummary
 
 Horizontal container (8px gap) for status and metadata items.
 
 - **Slots:** `default` - accepts status, content, and separators
 
-### `TelaHeaderLeadingSummaryStatus`
+### TelaHeaderLeadingSummaryStatus
 
 Status indicator using `TelaStatus` with 12px medium body text.
 
@@ -178,35 +178,35 @@ Status indicator using `TelaStatus` with 12px medium body text.
 | `label` | `string` | - | Status label text |
 | `labelClass` | `HTMLAttributes['class']` | - | Additional CSS class for the label |
 
-### `TelaHeaderLeadingSummaryContent`
+### TelaHeaderLeadingSummaryContent
 
 Inner wrapper for summary items with 6px gap.
 
 - **Slots:** `default` - accepts `TelaHeaderLabel` and `TelaHeaderLeadingSummarySeparator`
 
-### `TelaHeaderLeadingSummarySeparator`
+### TelaHeaderLeadingSummarySeparator
 
 Small circular dot separator (3px) for summary content. Has `aria-hidden="true"`.
 
-### `TelaHeaderLabel`
+### TelaHeaderLabel
 
 12px regular body text with secondary color. Use for metadata labels (counts, timestamps, pagination indicators).
 
 - **Slots:** `default` - label text
 
-### `TelaHeaderCenter`
+### TelaHeaderCenter
 
 Absolutely positioned center section (horizontally centered via `left: 50%; transform: translateX(-50%)`).
 
 - **Slots:** `default` - accepts `TelaHeaderCenterSteps`
 
-### `TelaHeaderCenterSteps`
+### TelaHeaderCenterSteps
 
 Container for step indicators with muted background and 12px gap.
 
 - **Slots:** `default` - accepts `TelaHeaderCenterStepsItem` and `TelaHeaderCenterStepsSeparator`
 
-### `TelaHeaderCenterStepsItem`
+### TelaHeaderCenterStepsItem
 
 Individual step with a numbered circle indicator and label.
 
@@ -216,29 +216,29 @@ Individual step with a numbered circle indicator and label.
 | `label` | `string` | - | Step label text |
 | `disabled` | `boolean` | `false` | Dims the step with tertiary colors |
 
-### `TelaHeaderCenterStepsSeparator`
+### TelaHeaderCenterStepsSeparator
 
 Horizontal line separator (16px wide, 1px height) between steps. Has `aria-hidden="true"`.
 
-### `TelaHeaderTrailing`
+### TelaHeaderTrailing
 
 Right-side container with 16px gap between children.
 
 - **Slots:** `default` - accepts `TelaHeaderTrailingContent` and `TelaHeaderTrailingActions`
 
-### `TelaHeaderTrailingContent`
+### TelaHeaderTrailingContent
 
 Wrapper for trailing items with 12px gap.
 
 - **Slots:** `default` - accepts labels, pagination, buttons
 
-### `TelaHeaderTrailingPagination`
+### TelaHeaderTrailingPagination
 
 Tight container (2px gap) for prev/next navigation buttons.
 
 - **Slots:** `default` - accepts `TelaHeaderTrailingPaginationPrevButton` and `TelaHeaderTrailingPaginationNextButton`
 
-### `TelaHeaderTrailingPaginationPrevButton`
+### TelaHeaderTrailingPaginationPrevButton
 
 Previous navigation button with left caret icon.
 
@@ -248,7 +248,7 @@ Previous navigation button with left caret icon.
 
 - **Events:** `click` - emitted when the button is clicked
 
-### `TelaHeaderTrailingPaginationNextButton`
+### TelaHeaderTrailingPaginationNextButton
 
 Next navigation button with right caret icon.
 
@@ -258,7 +258,7 @@ Next navigation button with right caret icon.
 
 - **Events:** `click` - emitted when the button is clicked
 
-### `TelaHeaderTrailingActions`
+### TelaHeaderTrailingActions
 
 Three-dot dropdown menu for contextual actions.