@meistrari/tela-build 1.27.1 → 1.28.0

package/components/tela/header/center/center-steps-item.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps<{
+    index: number
+    label: string
+    disabled?: boolean
+}>()
+
+const stepColor = computed(() => {
+    if (props.disabled) {
+        return {
+            ring: 'ring-neutral-400',
+            text: 'text-tertiary',
+        }
+    }
+
+    return {
+        ring: 'ring-neutral-700',
+        text: 'text-primary',
+    }
+})
+
+const textColor = computed(() => {
+    if (props.disabled) {
+        return 'text-tertiary select-none'
+    }
+
+    return 'text-primary'
+})
+</script>
+
+<template>
+    <div flex items-center gap-6px>
+        <div size-16px flex items-center justify-center shrink-0>
+            <div
+                size-12px flex items-center justify-center shrink-0 rounded-full ring-1.5px text-8px leading-none font-800
+                :class="[stepColor.ring, stepColor.text, textColor]"
+            >
+                <span translate-y="-0.2px">{{ index }}</span>
+            </div>
+        </div>
+        <p body-14-medium :class="textColor">
+            {{ label }}
+        </p>
+    </div>
+</template>

package/components/tela/header/center/center-steps-separator.vue

@@ -0,0 +1,3 @@
+<template>
+    <div aria-hidden="true" w-16px h-1px bg-border-strong />
+</template>

package/components/tela/header/center/center-steps.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-12px py-5px px-8px rounded-8px bg-muted>
+        <slot />
+    </div>
+</template>

package/components/tela/header/center/center.vue

@@ -0,0 +1,5 @@
+<template>
+    <div absolute left="50%" translate-x="-50%">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+    <p body-12-regular text-secondary>
+        <slot />
+    </p>
+</template>

package/components/tela/header/header.mdx

@@ -0,0 +1,294 @@
+import { Meta } from '@storybook/blocks';
+import * as HeaderStories from './header.stories.ts';
+
+<Meta of={HeaderStories} />
+
+# TelaHeader
+
+A composable header component for fullscreen views. Provides a sticky top bar with three layout zones: leading (left), center, and trailing (right). Built with slot-based sub-components for maximum flexibility.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaHeader>
+    <TelaHeaderLeading>
+        <TelaHeaderLeadingTrigger @click="handleClose" />
+        <TelaHeaderLeadingContent>
+            <TelaHeaderLeadingTitle>Page Title</TelaHeaderLeadingTitle>
+        </TelaHeaderLeadingContent>
+    </TelaHeaderLeading>
+
+    <TelaHeaderTrailing>
+        <TelaHeaderTrailingContent>
+            <TelaButton variant="primary" size="sm">Save</TelaButton>
+        </TelaHeaderTrailingContent>
+    </TelaHeaderTrailing>
+</TelaHeader>
+```
+
+### With Summary and Status
+
+```vue
+<TelaHeader>
+    <TelaHeaderLeading>
+        <TelaHeaderLeadingTrigger @click="handleClose" />
+        <TelaHeaderLeadingContent>
+            <TelaHeaderLeadingTitle>Document Name</TelaHeaderLeadingTitle>
+            <TelaHeaderLeadingSummary>
+                <TelaHeaderLeadingSummaryStatus variant="completed" label="Completed" />
+                <TelaHeaderLeadingSummaryContent>
+                    <TelaHeaderLabel>4 modules, 33 parsed files</TelaHeaderLabel>
+                    <TelaHeaderLeadingSummarySeparator />
+                    <TelaHeaderLabel>3m ago</TelaHeaderLabel>
+                </TelaHeaderLeadingSummaryContent>
+            </TelaHeaderLeadingSummary>
+        </TelaHeaderLeadingContent>
+    </TelaHeaderLeading>
+</TelaHeader>
+```
+
+### With Center Steps
+
+```vue
+<TelaHeader>
+    <TelaHeaderLeading>
+        <TelaHeaderLeadingTrigger @click="handleClose" />
+    </TelaHeaderLeading>
+
+    <TelaHeaderCenter>
+        <TelaHeaderCenterSteps>
+            <TelaHeaderCenterStepsItem :index="1" label="Setup" />
+            <TelaHeaderCenterStepsSeparator />
+            <TelaHeaderCenterStepsItem :index="2" label="Review" disabled />
+            <TelaHeaderCenterStepsSeparator />
+            <TelaHeaderCenterStepsItem :index="3" label="Publish" disabled />
+        </TelaHeaderCenterSteps>
+    </TelaHeaderCenter>
+</TelaHeader>
+```
+
+### With Pagination and Actions
+
+```vue
+<TelaHeader>
+    <TelaHeaderLeading>
+        <TelaHeaderLeadingTrigger @click="handleClose" />
+        <TelaHeaderLeadingContent>
+            <TelaHeaderLeadingTitle>Test Case Details</TelaHeaderLeadingTitle>
+        </TelaHeaderLeadingContent>
+    </TelaHeaderLeading>
+
+    <TelaHeaderTrailing>
+        <TelaHeaderTrailingContent>
+            <TelaHeaderLabel>1 of 1,820</TelaHeaderLabel>
+            <TelaHeaderTrailingPagination>
+                <TelaHeaderTrailingPaginationPrevButton
+                    :disabled="isFirst"
+                    @click="goToPrevious"
+                />
+                <TelaHeaderTrailingPaginationNextButton
+                    :disabled="isLast"
+                    @click="goToNext"
+                />
+            </TelaHeaderTrailingPagination>
+        </TelaHeaderTrailingContent>
+
+        <TelaHeaderTrailingActions
+            :items="[
+                { label: 'Edit inputs', icon: 'i-ph-gear-bold', click: handleEdit },
+                { label: 'Show code', icon: 'i-ph-code-bold', click: handleShowCode },
+                { label: 'Delete', icon: 'i-ph-trash-bold', color: 'negative', click: handleDelete },
+            ]"
+        />
+    </TelaHeaderTrailing>
+</TelaHeader>
+```
+
+### Horizontal Leading Content
+
+```vue
+<TelaHeaderLeading>
+    <TelaHeaderLeadingTrigger @click="handleClose" />
+    <TelaHeaderLeadingContent direction="horizontal">
+        <TelaHeaderLeadingTitle>Title</TelaHeaderLeadingTitle>
+        <TelaHeaderLabel>Subtitle</TelaHeaderLabel>
+    </TelaHeaderLeadingContent>
+</TelaHeaderLeading>
+```
+
+## Components
+
+### `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`
+
+Left-side container with 12px gap between children.
+
+- **Slots:** `default` - accepts `TelaHeaderLeadingTrigger`, `TelaHeaderLeadingContent`
+
+### `TelaHeaderLeadingTrigger`
+
+Close button (X icon) for the leading section.
+
+- **Events:** `click` - emitted when the button is clicked
+
+### `TelaHeaderLeadingContent`
+
+Layout wrapper for leading content (title + summary).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction for child elements |
+
+### `TelaHeaderLeadingTitle`
+
+H5 heading element with semibold weight and primary text color.
+
+- **Slots:** `default` - heading text
+
+### `TelaHeaderLeadingSummary`
+
+Horizontal container (8px gap) for status and metadata items.
+
+- **Slots:** `default` - accepts status, content, and separators
+
+### `TelaHeaderLeadingSummaryStatus`
+
+Status indicator using `TelaStatus` with 12px medium body text.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `TelaStatusVariant` | - | Status variant (e.g. `completed`, `running`, `error`) |
+| `label` | `string` | - | Status label text |
+| `labelClass` | `HTMLAttributes['class']` | - | Additional CSS class for the label |
+
+### `TelaHeaderLeadingSummaryContent`
+
+Inner wrapper for summary items with 6px gap.
+
+- **Slots:** `default` - accepts `TelaHeaderLabel` and `TelaHeaderLeadingSummarySeparator`
+
+### `TelaHeaderLeadingSummarySeparator`
+
+Small circular dot separator (3px) for summary content. Has `aria-hidden="true"`.
+
+### `TelaHeaderLabel`
+
+12px regular body text with secondary color. Use for metadata labels (counts, timestamps, pagination indicators).
+
+- **Slots:** `default` - label text
+
+### `TelaHeaderCenter`
+
+Absolutely positioned center section (horizontally centered via `left: 50%; transform: translateX(-50%)`).
+
+- **Slots:** `default` - accepts `TelaHeaderCenterSteps`
+
+### `TelaHeaderCenterSteps`
+
+Container for step indicators with muted background and 12px gap.
+
+- **Slots:** `default` - accepts `TelaHeaderCenterStepsItem` and `TelaHeaderCenterStepsSeparator`
+
+### `TelaHeaderCenterStepsItem`
+
+Individual step with a numbered circle indicator and label.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `index` | `number` | - | Step number displayed in the circle |
+| `label` | `string` | - | Step label text |
+| `disabled` | `boolean` | `false` | Dims the step with tertiary colors |
+
+### `TelaHeaderCenterStepsSeparator`
+
+Horizontal line separator (16px wide, 1px height) between steps. Has `aria-hidden="true"`.
+
+### `TelaHeaderTrailing`
+
+Right-side container with 16px gap between children.
+
+- **Slots:** `default` - accepts `TelaHeaderTrailingContent` and `TelaHeaderTrailingActions`
+
+### `TelaHeaderTrailingContent`
+
+Wrapper for trailing items with 12px gap.
+
+- **Slots:** `default` - accepts labels, pagination, buttons
+
+### `TelaHeaderTrailingPagination`
+
+Tight container (2px gap) for prev/next navigation buttons.
+
+- **Slots:** `default` - accepts `TelaHeaderTrailingPaginationPrevButton` and `TelaHeaderTrailingPaginationNextButton`
+
+### `TelaHeaderTrailingPaginationPrevButton`
+
+Previous navigation button with left caret icon.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Disables the button and dims the icon |
+
+- **Events:** `click` - emitted when the button is clicked
+
+### `TelaHeaderTrailingPaginationNextButton`
+
+Next navigation button with right caret icon.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Disables the button and dims the icon |
+
+- **Events:** `click` - emitted when the button is clicked
+
+### `TelaHeaderTrailingActions`
+
+Three-dot dropdown menu for contextual actions.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `Item[]` | - | Array of action items |
+
+```typescript
+interface Item {
+    label: string
+    icon: string
+    color?: 'positive' | 'caution' | 'negative'
+    click: () => void
+    disabled?: boolean
+}
+```
+
+## Component Tree
+
+```
+TelaHeader
+├── TelaHeaderLeading
+│   ├── TelaHeaderLeadingTrigger
+│   └── TelaHeaderLeadingContent
+│       ├── TelaHeaderLeadingTitle
+│       └── TelaHeaderLeadingSummary
+│           ├── TelaHeaderLeadingSummaryStatus
+│           ├── TelaHeaderLeadingSummaryContent
+│           │   ├── TelaHeaderLabel
+│           │   └── TelaHeaderLeadingSummarySeparator
+│           └── ...
+├── TelaHeaderCenter
+│   └── TelaHeaderCenterSteps
+│       ├── TelaHeaderCenterStepsItem
+│       └── TelaHeaderCenterStepsSeparator
+└── TelaHeaderTrailing
+    ├── TelaHeaderTrailingContent
+    │   ├── TelaHeaderLabel
+    │   └── TelaHeaderTrailingPagination
+    │       ├── TelaHeaderTrailingPaginationPrevButton
+    │       └── TelaHeaderTrailingPaginationNextButton
+    └── TelaHeaderTrailingActions
+```

package/components/tela/header/header.stories.ts

@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import Header from './header.vue'
+import HeaderLabel from './header-label.vue'
+import LeadingVue from './leading/leading.vue'
+import LeadingTrigger from './leading/leading-trigger.vue'
+import LeadingContent from './leading/leading-content.vue'
+import LeadingTitle from './leading/leading-title.vue'
+import Summary from './leading/summary/summary.vue'
+import SummaryStatus from './leading/summary/summary-status.vue'
+import SummaryContent from './leading/summary/summary-content.vue'
+import SummarySeparator from './leading/summary/summary-separator.vue'
+import Center from './center/center.vue'
+import CenterSteps from './center/center-steps.vue'
+import CenterStepsItem from './center/center-steps-item.vue'
+import CenterStepsSeparator from './center/center-steps-separator.vue'
+import Trailing from './trailing/trailing.vue'
+import TrailingContent from './trailing/trailing-content.vue'
+import TrailingActions from './trailing/trailing-actions.vue'
+import Pagination from './trailing/pagination/pagination.vue'
+import PaginationPrevButton from './trailing/pagination/pagination-prev-button.vue'
+import PaginationNextButton from './trailing/pagination/pagination-next-button.vue'
+
+const meta: Meta<typeof Header> = {
+    title: 'Patterns/Header',
+    component: Header,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'A composable header component for fullscreen views. Provides a sticky top bar with three layout zones: leading (left), center, and trailing (right). Built with slot-based sub-components for maximum flexibility.',
+            },
+        },
+    },
+}
+
+export default meta
+
+const headerComponents = {
+    Header,
+    HeaderLabel,
+    Leading: LeadingVue,
+    LeadingTrigger,
+    LeadingContent,
+    LeadingTitle,
+    Summary,
+    SummaryStatus,
+    SummaryContent,
+    SummarySeparator,
+    Center,
+    CenterSteps,
+    CenterStepsItem,
+    CenterStepsSeparator,
+    Trailing,
+    TrailingContent,
+    TrailingActions,
+    Pagination,
+    PaginationPrevButton,
+    PaginationNextButton,
+}
+
+export const Default: StoryObj<typeof Header> = {
+    render: () => ({
+        components: headerComponents,
+        template: `
+            <Header>
+                <Leading>
+                    <LeadingTrigger @click="() => {}" />
+                    <LeadingContent>
+                        <LeadingTitle>Page Title</LeadingTitle>
+                    </LeadingContent>
+                </Leading>
+
+                <Trailing>
+                    <TrailingContent>
+                        <HeaderLabel>1 of 100</HeaderLabel>
+                    </TrailingContent>
+                </Trailing>
+            </Header>
+        `,
+    }),
+}
+
+export const WithSummary: StoryObj<typeof Header> = {
+    render: () => ({
+        components: headerComponents,
+        template: `
+            <Header>
+                <Leading>
+                    <LeadingTrigger @click="() => {}" />
+                    <LeadingContent>
+                        <LeadingTitle>AMAZONAS ENERGIA - 0068669-56.2025.8.04.1000</LeadingTitle>
+                        <Summary>
+                            <SummaryStatus variant="completed" label="Completed" />
+                            <SummaryContent>
+                                <HeaderLabel>4 modules, 33 parsed files</HeaderLabel>
+                                <SummarySeparator />
+                                <HeaderLabel>3m ago</HeaderLabel>
+                            </SummaryContent>
+                        </Summary>
+                    </LeadingContent>
+                </Leading>
+            </Header>
+        `,
+    }),
+}
+
+export const WithCenterSteps: StoryObj<typeof Header> = {
+    render: () => ({
+        components: headerComponents,
+        template: `
+            <Header>
+                <Leading>
+                    <LeadingTrigger @click="() => {}" />
+                </Leading>
+
+                <Center>
+                    <CenterSteps>
+                        <CenterStepsItem :index="1" label="Cadastro" />
+                        <CenterStepsSeparator />
+                        <CenterStepsItem :index="2" label="Antifraude" disabled />
+                        <CenterStepsSeparator />
+                        <CenterStepsItem :index="3" label="Subsidios" disabled />
+                        <CenterStepsSeparator />
+                        <CenterStepsItem :index="4" label="Laudo para Defesa" disabled />
+                    </CenterSteps>
+                </Center>
+            </Header>
+        `,
+    }),
+}
+
+export const WithPaginationAndActions: StoryObj<typeof Header> = {
+    render: () => ({
+        components: headerComponents,
+        template: `
+            <Header>
+                <Leading>
+                    <LeadingTrigger @click="() => {}" />
+                    <LeadingContent>
+                        <LeadingTitle>Test Case Details</LeadingTitle>
+                        <Summary>
+                            <SummaryStatus variant="running" label="Running" />
+                        </Summary>
+                    </LeadingContent>
+                </Leading>
+
+                <Trailing>
+                    <TrailingContent>
+                        <HeaderLabel>1 of 1,820</HeaderLabel>
+                        <Pagination>
+                            <PaginationPrevButton disabled @click="() => {}" />
+                            <PaginationNextButton @click="() => {}" />
+                        </Pagination>
+                    </TrailingContent>
+
+                    <TrailingActions
+                        :items="[
+                            { label: 'Edit inputs', icon: 'i-ph-gear-bold', click: () => {} },
+                            { label: 'Show code', icon: 'i-ph-code-bold', click: () => {} },
+                            { label: 'Delete', icon: 'i-ph-trash-bold', color: 'negative', click: () => {} },
+                        ]"
+                    />
+                </Trailing>
+            </Header>
+        `,
+    }),
+}
+
+export const FullExample: StoryObj<typeof Header> = {
+    render: () => ({
+        components: headerComponents,
+        template: `
+            <Header>
+                <Leading>
+                    <LeadingTrigger @click="() => {}" />
+                    <LeadingContent>
+                        <LeadingTitle>AMAZONAS ENERGIA - 0068669-56.2025.8.04.1000</LeadingTitle>
+                        <Summary>
+                            <SummaryStatus variant="completed" label="Completed" />
+                            <SummaryContent>
+                                <HeaderLabel>4 modules, 33 parsed files</HeaderLabel>
+                                <SummarySeparator />
+                                <HeaderLabel>3m ago</HeaderLabel>
+                            </SummaryContent>
+                        </Summary>
+                    </LeadingContent>
+                </Leading>
+
+                <Center>
+                    <CenterSteps>
+                        <CenterStepsItem :index="1" label="Cadastro" />
+                        <CenterStepsSeparator />
+                        <CenterStepsItem :index="2" label="Antifraude" disabled />
+                        <CenterStepsSeparator />
+                        <CenterStepsItem :index="3" label="Subsidios" disabled />
+                        <CenterStepsSeparator />
+                        <CenterStepsItem :index="4" label="Laudo para Defesa" disabled />
+                    </CenterSteps>
+                </Center>
+
+                <Trailing>
+                    <TrailingContent>
+                        <HeaderLabel>1 of 1,820</HeaderLabel>
+                        <Pagination>
+                            <PaginationPrevButton disabled @click="() => {}" />
+                            <PaginationNextButton @click="() => {}" />
+                        </Pagination>
+                    </TrailingContent>
+
+                    <TrailingActions
+                        :items="[
+                            { label: 'Edit inputs', icon: 'i-ph-gear-bold', click: () => {} },
+                            { label: 'Show code', icon: 'i-ph-code-bold', click: () => {} },
+                            { label: 'Delete', icon: 'i-ph-trash-bold', color: 'negative', click: () => {} },
+                        ]"
+                    />
+                </Trailing>
+            </Header>
+        `,
+    }),
+}

package/components/tela/header/header.vue

@@ -0,0 +1,5 @@
+<template>
+    <header sticky top-0 z-30 flex items-center justify-between w-full h-64px px-12px bg border-b-0.5px border>
+        <slot />
+    </header>
+</template>

package/components/tela/header/leading/leading-content.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    direction?: 'vertical' | 'horizontal'
+}>(), {
+    direction: 'vertical',
+})
+
+const directionClass = computed(() => {
+    return props.direction === 'vertical' && 'flex-col'
+})
+</script>
+
+<template>
+    <div flex gap-6px :class="directionClass">
+        <slot />
+    </div>
+</template>

package/components/tela/header/leading/leading-title.vue

@@ -0,0 +1,5 @@
+<template>
+    <h5 heading-h5-semibold text-primary>
+        <slot />
+    </h5>
+</template>

package/components/tela/header/leading/leading-trigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+    (e: 'click'): void
+}>()
+</script>
+
+<template>
+    <TelaIconButton
+        icon="i-ph-x"
+        size="md"
+        color="secondary"
+        icon-class="text-neutral-950"
+        @click="emit('click')"
+    />
+</template>

package/components/tela/header/leading/leading.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-12px>
+        <slot />
+    </div>
+</template>

package/components/tela/header/leading/summary/summary-content.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-6px>
+        <slot />
+    </div>
+</template>

package/components/tela/header/leading/summary/summary-separator.vue

@@ -0,0 +1,3 @@
+<template>
+    <div aria-hidden="true" size-3px bg-icon-subtle rounded-full />
+</template>

package/components/tela/header/leading/summary/summary-status.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { TelaStatusVariant } from '@meistrari/tela-build/types'
+
+defineProps<{
+    variant: TelaStatusVariant
+    label?: string
+    labelClass?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <TelaStatus
+        :variant="variant"
+        :label="label"
+        :label-class="cn('body-12-medium!', labelClass)"
+    />
+</template>

package/components/tela/header/leading/summary/summary.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-8px>
+        <slot />
+    </div>
+</template>

package/components/tela/header/trailing/pagination/pagination-next-button.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'click'): void
+}>()
+</script>
+
+<template>
+    <TelaIconButton
+        icon="i-ph-caret-right-bold"
+        size="md"
+        color="secondary"
+        :icon-class="disabled ? 'text-icon-subtle' : 'text-icon'"
+        button-class="!disabled:bg-transparent"
+        :disabled="disabled"
+        @click="emit('click')"
+    />
+</template>

package/components/tela/header/trailing/pagination/pagination-prev-button.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'click'): void
+}>()
+</script>
+
+<template>
+    <TelaIconButton
+        icon="i-ph-caret-left-bold"
+        size="md"
+        color="secondary"
+        :icon-class="disabled ? 'text-icon-subtle' : 'text-icon'"
+        button-class="!disabled:bg-transparent"
+        :disabled="disabled"
+        @click="emit('click')"
+    />
+</template>

package/components/tela/header/trailing/pagination/pagination.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-2px>
+        <slot />
+    </div>
+</template>

package/components/tela/header/trailing/trailing-actions.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Item {
+    label: string
+    icon: string
+    color?: 'positive' | 'caution' | 'negative'
+    click: () => void
+    disabled?: boolean
+}
+
+defineProps<{
+    items: Item[]
+}>()
+</script>
+
+<template>
+    <TelaDropdownMenu :items="items" align="end">
+        <TelaIconButton
+            size="md"
+            color="secondary"
+            icon="i-ph-dots-three-bold"
+            icon-class="text-neutral-950"
+        />
+    </TelaDropdownMenu>
+</template>

package/components/tela/header/trailing/trailing-content.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-12px>
+        <slot />
+    </div>
+</template>

package/components/tela/header/trailing/trailing.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-16px>
+        <slot />
+    </div>
+</template>

package/components/tela/scroll-area/scroll-area.stories.ts

@@ -4,7 +4,6 @@ import ScrollArea from './scroll-area.vue'
 const meta: Meta<typeof ScrollArea> = {
     title: 'Utility/ScrollArea',
     component: ScrollArea,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

package/components/tela/segment-toggle/segment-toggle.stories.ts

@@ -6,7 +6,6 @@ import SegmentToggle from './segment-toggle.vue'
 const meta: Meta<typeof SegmentToggle> = {
     title: 'Core/SegmentToggle',
     component: SegmentToggle,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

package/components/tela/status/status.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
 import type { TelaCustomIconName, TelaStatusVariant } from '@meistrari/tela-build/types'
 
 type StatusConfig = {
@@ -14,6 +16,7 @@ const props = withDefaults(defineProps<{
     label?: string
     isIconAnimated?: boolean
     isIconHidden?: boolean
+    labelClass?: HTMLAttributes['class']
 }>(), {
     variant: 'running',
     isIconAnimated: true,
@@ -337,9 +340,7 @@ watch(
 )
 
 onMounted(() => {
-    requestAnimationFrame(() => {
-        requestAnimationFrame(measureContentWidth)
-    })
+    document.fonts.ready.then(measureContentWidth)
 })
 
 const shineClass = computed(() => {
@@ -423,7 +424,11 @@ const SPRING_CONFIG = {
                                 :key="`text-${statusLabel}`"
                                 as="span"
                                 v-bind="textVariants()"
-                                :class="cn('body-14-medium whitespace-nowrap', isShineVisible ? shineClass : textColor)"
+                                :class="cn(
+                                    'body-14-medium whitespace-nowrap',
+                                    isShineVisible ? shineClass : textColor,
+                                    labelClass,
+                                )"
                             >
                                 {{ statusLabel }}
                             </Motion>

package/package.json

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