@meistrari/tela-build 1.20.0 → 1.22.0

package/components/tela/card/card.mdx

@@ -0,0 +1,62 @@
+# TelaCard
+
+A surface container component used to group related content with consistent visual boundaries.
+
+## Size Prop
+
+Always use the `size` prop to control card padding — it maps directly to the standardized values. Never apply padding manually to `<TelaCard>` or its inner elements.
+
+| `size` | Applied classes | Use for |
+|--------|------------------|---------|
+| `md` *(default)* | `p-32px sm:p-48px rounded-24px` | Standard and large cards |
+| `sm` | `p-24px rounded-12px` | Small cards, inner containers |
+
+```vue
+<!-- Correct — use size prop -->
+<TelaCard size="md">...</TelaCard>
+<TelaCard size="sm">...</TelaCard>
+<TelaCard>...</TelaCard> <!-- md is the default -->
+
+<!-- Incorrect — never apply padding manually -->
+<TelaCard class="p-20px">...</TelaCard>
+<TelaCard>
+  <div class="p-20px">...</div>
+</TelaCard>
+```
+
+## Examples
+
+### Standard Card (default)
+
+```vue
+<TelaCard>
+  <h2 class="heading-h4-semibold text-contrast">Title</h2>
+  <p class="body-14-regular text-secondary">Supporting description text.</p>
+</TelaCard>
+```
+
+### Minor / Inner Card
+
+```vue
+<TelaCard size="sm">
+  <span class="body-12-medium text-secondary">Compact content</span>
+</TelaCard>
+```
+
+### Card Grid
+
+```vue
+<div class="grid grid-cols-3 gap-4">
+  <TelaCard v-for="item in items" :key="item.id">...</TelaCard>
+</div>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'sm' \| 'md'` | `'md'` | `md` = `p-32px sm:p-48px rounded-24px`, `sm` = `p-24px rounded-12px` |
+
+## Slots
+
+- `default` — Card body content

package/components/tela/card/card.stories.ts

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Card from './card.vue'
+
+const meta: Meta<typeof Card> = {
+    title: 'Core/Card',
+    component: Card,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `md` for standard cards, `sm` for minor or inner containers.',
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['md', 'sm'],
+            description: '`md` applies standard card padding. `sm` applies minor/inner container padding.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Card },
+        setup() {
+            return { args }
+        },
+        template: `
+            <Card :size="args.size">
+                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 280px;">
+                    <p class="heading-h4-semibold text-contrast">Card Title</p>
+                    <p class="body-14-regular text-secondary">This is supporting content inside the card. It adapts to the selected size.</p>
+                </div>
+            </Card>
+        `,
+    }),
+    args: {
+        size: 'md',
+    },
+}
+
+export const Standard: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <Card size="md">
+                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 280px;">
+                    <p class="heading-h4-semibold text-contrast">Standard Card</p>
+                    <p class="body-14-regular text-secondary">Used for large, standard, and medium cards.</p>
+                </div>
+            </Card>
+        `,
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Default size (`md`). Use for primary content surfaces.',
+            },
+        },
+    },
+}
+
+export const Minor: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <Card size="sm">
+                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 240px;">
+                    <p class="heading-h5-semibold text-contrast">Minor Card</p>
+                    <p class="body-12-regular text-secondary">Used for small cards and inner containers.</p>
+                </div>
+            </Card>
+        `,
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Small size (`sm`). Use for compact cards or nested inner containers.',
+            },
+        },
+    },
+}
+
+export const SizeComparison: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <div style="display: flex; gap: 16px; align-items: flex-start;">
+                <Card size="md">
+                    <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
+                        <p class="body-12-medium text-secondary">size="md"</p>
+                        <p class="heading-h4-semibold text-contrast">Standard</p>
+                        <p class="body-14-regular text-tertiary">p-32px sm:p-48px padding</p>
+                    </div>
+                </Card>
+                <Card size="sm">
+                    <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
+                        <p class="body-12-medium text-secondary">size="sm"</p>
+                        <p class="heading-h4-semibold text-contrast">Minor</p>
+                        <p class="body-14-regular text-tertiary">p-24px padding</p>
+                    </div>
+                </Card>
+            </div>
+        `,
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Side-by-side comparison of both size variants.',
+            },
+        },
+    },
+}
+
+export const Grid: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 640px;">
+                <Card v-for="n in 3" :key="n">
+                    <div style="display: flex; flex-direction: column; gap: 4px;">
+                        <p class="heading-h5-semibold text-contrast">Card {{ n }}</p>
+                        <p class="body-12-regular text-secondary">Grid item</p>
+                    </div>
+                </Card>
+            </div>
+        `,
+    }),
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                story: 'Cards used in a grid layout. No padding override needed — `size="md"` is the default.',
+            },
+        },
+    },
+}

package/components/tela/card/card.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    size?: 'sm' | 'md'
+    class?: HTMLAttributes['class']
+    /** @deprecated Use `class` instead */
+    contentPadding?: HTMLAttributes['class']
+    /** @deprecated Use `class` instead */
+    borderRadius?: HTMLAttributes['class']
+}>(), {
+    size: 'md',
+})
+
+const sizeStyles = computed(() => (({
+    sm: { padding: 'p-24px', rounded: 'rounded-12px' },
+    md: { padding: 'p-32px sm:p-48px', rounded: 'rounded-24px' },
+}) as Record<string, { padding: string, rounded: string }>)[props.size ?? 'md'] ?? { padding: '', rounded: '' })
+
+const paddingClass = computed(() => props.contentPadding ?? sizeStyles.value.padding)
+const borderRadiusClass = computed(() => props.borderRadius ?? sizeStyles.value.rounded)
+const rootEl = ref<HTMLElement | null>(null)
+
+defineExpose({
+    el: rootEl,
+})
+</script>
+
+<template>
+    <div ref="rootEl" :class="cn('bg border-0.5px border', paddingClass, borderRadiusClass, props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ScrollArea from './scroll-area.vue'
+
+const meta: Meta<typeof ScrollArea> = {
+    title: 'Utility/ScrollArea',
+    component: ScrollArea,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A scroll area component that provides custom-styled scrollbars. Built on reka-ui for consistent scrollbar appearance across browsers. Useful for creating scrollable containers with better visual consistency than native scrollbars.',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['auto', 'always', 'scroll', 'hover'],
+            description: 'Scrollbar visibility behavior.',
+        },
+        orientation: {
+            control: 'select',
+            options: ['vertical', 'horizontal', 'both'],
+            description: 'Direction(s) of scrolling.',
+        },
+        scrollHideDelay: {
+            control: 'number',
+            description: 'Delay in ms before scrollbars are hidden (when type is hover or scroll).',
+        },
+    },
+    args: {
+        type: 'hover',
+        orientation: 'vertical',
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
+            return { args, items }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="h-200px w-300px border border-gray-200 rounded-md">
+                <div class="p-4 flex flex-col gap-2">
+                    <div v-for="item in items" :key="item" class="text-sm py-1 border-b border-gray-100 last:border-0">
+                        {{ item }}
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}
+
+export const AlwaysVisible: Story = {
+    args: {
+        type: 'always',
+    },
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
+            return { args, items }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="h-200px w-300px border border-gray-200 rounded-md">
+                <div class="p-4 flex flex-col gap-2">
+                    <div v-for="item in items" :key="item" class="text-sm py-1 border-b border-gray-100 last:border-0">
+                        {{ item }}
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}
+
+export const Horizontal: Story = {
+    args: {
+        orientation: 'horizontal',
+        type: 'always',
+    },
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const items = Array.from({ length: 20 }, (_, i) => `Card ${i + 1}`)
+            return { args, items }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="w-400px border border-gray-200 rounded-md">
+                <div class="flex gap-3 p-4" style="width: 1200px">
+                    <div v-for="item in items" :key="item" class="flex-shrink-0 w-120px h-80px bg-gray-100 rounded flex items-center justify-center text-sm text-gray-600">
+                        {{ item }}
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}
+
+export const Both: Story = {
+    args: {
+        orientation: 'both',
+        type: 'always',
+    },
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const rows = Array.from({ length: 20 }, (_, i) => `Row ${i + 1}`)
+            return { args, rows }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="h-250px w-400px border border-gray-200 rounded-md">
+                <div style="width: 900px">
+                    <div v-for="row in rows" :key="row" class="flex items-center px-4 py-2 border-b border-gray-100 text-sm gap-4">
+                        <span class="w-100px flex-shrink-0 font-medium">{{ row }}</span>
+                        <span class="w-200px flex-shrink-0 text-gray-500">Column B content here</span>
+                        <span class="w-200px flex-shrink-0 text-gray-500">Column C content here</span>
+                        <span class="w-200px flex-shrink-0 text-gray-500">Column D content here</span>
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}

package/components/tela/segment-toggle/segment-toggle.mdx

@@ -0,0 +1,89 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SegmentToggleStories from './segment-toggle.stories.ts';
+
+<Meta of={SegmentToggleStories} />
+
+# TelaSegmentToggle
+
+A segment toggle component that displays multiple options as connected segments. Only one option can be selected at a time. Supports v-model binding, different sizes, and disabled states. Useful for mutually exclusive option selection with a modern segmented control interface.
+
+## Examples
+
+### Default
+
+<Canvas of={SegmentToggleStories.Default} />
+
+### Small Size
+
+<Canvas of={SegmentToggleStories.Small} />
+
+### Disabled
+
+<Canvas of={SegmentToggleStories.Disabled} />
+
+### Two Options
+
+<Canvas of={SegmentToggleStories.TwoOptions} />
+
+### Preselected Middle
+
+<Canvas of={SegmentToggleStories.PreselectedMiddle} />
+
+## Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const alignment = ref('left')
+const options = [
+  { label: 'Left', value: 'left' },
+  { label: 'Center', value: 'center' },
+  { label: 'Right', value: 'right' },
+]
+</script>
+
+<template>
+  <TelaSegmentToggle v-model="alignment" :options="options" />
+</template>
+```
+
+### Small Size
+
+```vue
+<TelaSegmentToggle v-model="value" :options="options" size="small" />
+```
+
+### Disabled State
+
+```vue
+<TelaSegmentToggle v-model="value" :options="options" disabled />
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+interface Option {
+  label: string
+  value: string
+}
+
+type SegmentToggleProps = {
+  modelValue: string
+  options: Option[]
+  size?: 'small' | 'medium'
+  disabled?: boolean
+  class?: string
+  buttonsClass?: string
+}
+```
+
+## Features
+
+- **Two-way Binding**: Full v-model support for reactive state
+- **Multiple Sizes**: Small and medium size options
+- **Animated Selection**: Spring-animated indicator for smooth transitions
+- **Disabled State**: Proper disabled styling and interaction prevention
+- **Accessible**: Keyboard navigation support via native button elements

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

@@ -110,7 +110,7 @@ function handleOpenChange(open: boolean) {
                             v-if="currentOption?.icon && !(currentOption.value === '')"
                             shrink-0 rounded-4px flex items-center justify-center
                         >
-                            <Icon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" />
+                            <TelaIcon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" />
                             <Component :is="currentOption.icon" v-else />
                         </div>
                         <div v-if="!currentOption?.icon && currentOption?.externalIconSrc" mr-4px flex h-20px w-16px shrink-0 items-center justify-center rounded-4px>

package/components/tela/status/status.vue

@@ -336,7 +336,11 @@ watch(
     { immediate: true },
 )
 
-onMounted(measureContentWidth)
+onMounted(() => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(measureContentWidth)
+    })
+})
 
 const shineClass = computed(() => {
     const baseColor = currentStatus.value.textColor.replace('text-', '')

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

@@ -5,9 +5,9 @@ import { TabsTrigger, useForwardProps } from 'reka-ui'
 import type { TabsTriggerProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'], textClass?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class', 'textClass')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
             props.class,
         )"
     >
-        <span class="truncate">
+        <span :class="cn('truncate', props.textClass)">
             <slot />
         </span>
     </TabsTrigger>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import type { HTMLAttributes } from 'vue'
 
 defineOptions({
@@ -16,11 +16,7 @@ const emits = defineEmits<TooltipContentEmits & {
     click: [event: Event]
 }>()
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props
-
-    return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

package/lib/doc-generator.ts

@@ -1,10 +1,12 @@
 /* eslint-disable no-console */
 import { join, resolve, relative, dirname, basename } from 'pathe'
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs'
+import { existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync } from 'node:fs'
 import { parse as parseVue } from 'vue-docgen-api'
 // Load glob dynamically for compatibility across versions (v8 vs v11)
-import { getTypeResolver, type TypeResolver } from './type-resolver'
-import { createVolarExtractor, type VolarExtractor } from './extractors/volar-extract'
+import { getTypeResolver } from './type-resolver'
+import type { TypeResolver } from './type-resolver'
+import { createVolarExtractor } from './extractors/volar-extract'
+import type { VolarExtractor } from './extractors/volar-extract'
 
 const colors = {
     gray: '\x1B[90m',
@@ -544,20 +546,23 @@ export function generateDocsToDirectory(componentDocs: ComponentDoc[], typeResol
         componentLinks.push(`- [${title}](components/${groupSlug}.md)`)
     }
 
-    // Read design-tokens.md content if it exists
-    let designTokensContent = ''
+    // Read all .md files from docs/ and append them to SKILL.md
+    let docsSection = ''
     if (layerPath) {
-        const designTokensSourcePath = join(layerPath, 'docs', 'design-tokens.md')
-        if (existsSync(designTokensSourcePath)) {
-            designTokensContent = readFileSync(designTokensSourcePath, 'utf-8')
+        const docsDir = join(layerPath, 'docs')
+        if (existsSync(docsDir)) {
+            const docFiles = readdirSync(docsDir)
+                .filter(f => f.endsWith('.md'))
+                .sort()
+            for (const file of docFiles) {
+                const content = readFileSync(join(docsDir, file), 'utf-8')
+                docsSection += `\n\n---\n\n${content}`
+            }
         }
     }
 
     // Create SKILL.md describing Tela Build with links to supporting md
     const skillDescription = buildTelaBuildSkillDescription()
-    const designTokensSection = designTokensContent
-        ? `\n\n---\n\n${designTokensContent}`
-        : ''
     const body = dedent`
 # Tela Build
 
@@ -574,7 +579,7 @@ Use it when building, refactoring, or using Tela components — props, events, s
 
 ## Components Index
 
-${componentLinks.join('\n')}${designTokensSection}
+${componentLinks.join('\n')}${docsSection}
   `
 
     const skillMd = wrapWithSkillFrontmatter({ name: 'tela-build', description: skillDescription }, body)
@@ -675,13 +680,13 @@ function toKebabFromTag(tagName: string): string {
     return tagName
         .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
         .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
-        .replace(/[^a-zA-Z0-9-]/g, '-')
+        .replace(/[^a-z0-9-]/gi, '-')
         .toLowerCase()
-        .replace(/--+/g, '-')
+        .replace(/-{2,}/g, '-')
         .replace(/^-+|-+$/g, '')
 }
 
-function wrapWithSkillFrontmatter(meta: { name: string; description: string; allowedTools?: string[] }, body: string): string {
+function wrapWithSkillFrontmatter(meta: { name: string, description: string, allowedTools?: string[] }, body: string): string {
     const { name, description, allowedTools } = meta
     const lines: string[] = []
     lines.push('---')
@@ -700,7 +705,7 @@ function wrapWithSkillFrontmatter(meta: { name: string; description: string; all
 
 function sanitizeSkillName(name: string): string {
     // Lowercase + hyphens + digits only, max 64 chars
-    return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').slice(0, 64).replace(/--+/g, '-')
+    return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').slice(0, 64).replace(/-{2,}/g, '-')
 }
 
 function sanitizeDescription(desc: string): string {
@@ -804,7 +809,7 @@ function sanitizeInlineComment(value?: string): string {
     if (!value)
         return ''
 
-    const withoutMarkdown = value.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    const withoutMarkdown = value.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
     const singleLine = withoutMarkdown.replace(/\s+/g, ' ').trim()
     if (!singleLine)
         return ''

package/package.json

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

package/components/tela/card.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-    contentPadding?: string
-    borderRadius?: string
-}>()
-
-const rootEl = ref<HTMLElement | null>(null)
-
-defineExpose({
-    el: rootEl,
-})
-</script>
-
-<template>
-    <div
-        ref="rootEl"
-        bg-white
-        :class="borderRadius ? `rounded-${borderRadius}` : 'rounded-16px'"
-        b=".5 gray-200"
-    >
-        <div :class="contentPadding ?? 'p-32px'">
-            <slot />
-        </div>
-        <div v-if="$slots.footer" p-19px b="t-1 #EBEBEB">
-            <slot name="footer" />
-        </div>
-    </div>
-</template>