@meistrari/tela-build 1.47.2 → 1.48.0

package/components/tela/button/button.vue

@@ -33,16 +33,16 @@ const sizeStyle = computed(() => (({
 
 const variantStyle = computed(() => (({
     'primary': fold`
-        bg-gray-900 text-white
-        hover:bg-gray-800
-        active:bg-gray-700
+        bg-neutral-900 text-white
+        hover:bg-neutral-800
+        active:bg-neutral-700
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'secondary': fold`
-        bg-white text-gray-900 border border-0.5px
+        bg-white text-neutral-900 border border-0.5px
       [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
-        hover:bg-subtle hover:border-gray-300
-        active:bg-muted active:border-gray-400/60
+        hover:bg-subtle hover:border-strong
+        active:bg-muted active:border-neutral-400/60
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'ghost': fold`

package/components/tela/card/card.mdx

@@ -14,16 +14,18 @@ A surface container component used to group related content with consistent visu
 
 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.
 
+Only `xs` and `sm` are available. Both share `rounded-12px`.
+
 | `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 |
+| `xs` | `p-20px` | Compact cards, dense inner containers |
+| `sm` *(default)* | `p-24px` | Standard cards |
 
 ```vue
-<!-- Correct — use size prop -->
-<TelaCard size="md">...</TelaCard>
+<!-- Correct — use xs or sm -->
+<TelaCard size="xs">...</TelaCard>
 <TelaCard size="sm">...</TelaCard>
-<TelaCard>...</TelaCard> <!-- md is the default -->
+<TelaCard>...</TelaCard> <!-- sm is the default -->
 
 <!-- Incorrect — never apply padding manually -->
 <TelaCard class="p-20px">...</TelaCard>
@@ -43,10 +45,10 @@ Always use the `size` prop to control card padding — it maps directly to the s
 </TelaCard>
 ```
 
-### Minor / Inner Card
+### Compact / Inner Card
 
 ```vue
-<TelaCard size="sm">
+<TelaCard size="xs">
   <span class="body-12-medium text-secondary">Compact content</span>
 </TelaCard>
 ```
@@ -85,7 +87,7 @@ Cards in grids must use `h-full` for consistent heights.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `size` | `'sm' \| 'md'` | `'md'` | `md` = `p-32px sm:p-48px rounded-24px`, `sm` = `p-24px rounded-12px` |
+| `size` | `'xs' \| 'sm'` | `'sm'` | `xs` = `p-20px`, `sm` = `p-24px`. Both use `rounded-12px` |
 
 ## Slots
 

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

@@ -8,15 +8,15 @@ const meta: Meta<typeof Card> = {
         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.',
+                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `sm` for standard cards, `xs` for compact or inner containers.',
             },
         },
     },
     argTypes: {
         size: {
             control: 'select',
-            options: ['md', 'sm'],
-            description: '`md` applies standard card padding. `sm` applies minor/inner container padding.',
+            options: ['xs', 'sm'],
+            description: '`sm` applies standard card padding. `xs` applies compact/inner container padding.',
         },
     },
 }
@@ -41,7 +41,7 @@ export const Default: Story = {
         `,
     }),
     args: {
-        size: 'md',
+        size: 'sm',
     },
 }
 
@@ -49,10 +49,10 @@ export const Standard: Story = {
     render: () => ({
         components: { Card },
         template: `
-            <Card size="md">
+            <Card size="sm">
                 <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>
+                    <p class="body-14-regular text-secondary">Used for standard content surfaces.</p>
                 </div>
             </Card>
         `,
@@ -60,7 +60,7 @@ export const Standard: Story = {
     parameters: {
         docs: {
             description: {
-                story: 'Default size (`md`). Use for primary content surfaces.',
+                story: 'Default size (`sm`). Use for primary content surfaces.',
             },
         },
     },
@@ -70,10 +70,10 @@ export const Minor: Story = {
     render: () => ({
         components: { Card },
         template: `
-            <Card size="sm">
+            <Card size="xs">
                 <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>
+                    <p class="heading-h5-semibold text-contrast">Compact Card</p>
+                    <p class="body-12-regular text-secondary">Used for compact cards and inner containers.</p>
                 </div>
             </Card>
         `,
@@ -81,7 +81,7 @@ export const Minor: Story = {
     parameters: {
         docs: {
             description: {
-                story: 'Small size (`sm`). Use for compact cards or nested inner containers.',
+                story: 'Compact size (`xs`). Use for compact cards or nested inner containers.',
             },
         },
     },
@@ -92,18 +92,18 @@ export const SizeComparison: Story = {
         components: { Card },
         template: `
             <div style="display: flex; gap: 16px; align-items: flex-start;">
-                <Card size="md">
+                <Card size="sm">
                     <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
-                        <p class="body-12-medium text-secondary">size="md"</p>
+                        <p class="body-12-medium text-secondary">size="sm"</p>
                         <p class="heading-h4-semibold text-contrast">Standard</p>
-                        <p class="body-14-regular text-tertiary">p-32px sm:p-48px padding</p>
+                        <p class="body-14-regular text-tertiary">p-24px padding</p>
                     </div>
                 </Card>
-                <Card size="sm">
+                <Card size="xs">
                     <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>
+                        <p class="body-12-medium text-secondary">size="xs"</p>
+                        <p class="heading-h4-semibold text-contrast">Compact</p>
+                        <p class="body-14-regular text-tertiary">p-20px padding</p>
                     </div>
                 </Card>
             </div>
@@ -136,7 +136,7 @@ export const Grid: Story = {
         layout: 'padded',
         docs: {
             description: {
-                story: 'Cards used in a grid layout. No padding override needed — `size="md"` is the default.',
+                story: 'Cards used in a grid layout. No padding override needed — `size="sm"` is the default.',
             },
         },
     },

package/components/tela/card/card.vue

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

package/components/tela/chart/chart-bar.vue

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{
 }>(), {
     height: '12px',
     gap: '2px',
-    duration: 1000,
+    duration: 400,
 })
 
 const animatedFilled = ref(0)
@@ -52,7 +52,7 @@ watch(() => props.filled, (newValue) => {
             :style="{ height }"
             w-1px
             rounded-1px
-            :bg="bar.isFilled ? '#5DC16B' : '#DFE3E7'"
+            :bg="bar.isFilled ? 'green-500' : 'neutral-200'"
         />
     </div>
 </template>

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

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
     <ComboboxInput
         v-bind="forwarded"
-        :class="cn('flex h-10 w-full bg-white-1000 border-b-[0.5px] border-gray-200 rounded-xl px-3 py-1 body-14-regular shadow-sm text-gray-900 transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:bg-white-1000 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+        :class="cn('flex h-10 w-full bg border-b-[0.5px] border-border rounded-xl px-3 py-1 body-14-regular text-primary transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-tertiary focus-visible:bg focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     >
         <slot />
     </ComboboxInput>

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

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

package/components/tela/combobox/combobox.vue

@@ -366,7 +366,7 @@ watch(innerValue, (raw) => {
         <ComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" align="start">
             <div v-if="hasSearchbar" class="relative">
                 <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
-                    <TelaIcon name="i-ph-magnifying-glass" :size="compact ? '12px' : '14px'" class="text-gray-400" />
+                    <TelaIcon name="i-ph-magnifying-glass" :size="compact ? '12px' : '14px'" class="text-tertiary" />
                 </span>
                 <ComboboxInput
                     v-model="search" :class="cn('rounded-b-none', compact ? 'pl-7' : 'pl-8')"
@@ -374,7 +374,7 @@ watch(innerValue, (raw) => {
                 />
                 <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
                     <button class="flex items-center justify-center" @click="handleDeleteSearchValue">
-                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-gray-400" />
+                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-tertiary" />
                     </button>
                 </div>
             </div>
@@ -392,17 +392,17 @@ watch(innerValue, (raw) => {
                             class="flex flex-col items-center justify-center gap-5 px-7"
                         >
                             <div class="flex flex-col items-center justify-center gap-3">
-                                <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                                <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-tertiary" />
                                 <span class="text-xl font-medium leading-none">
                                     {{ search.trim() && labelNoResultsWithSearch ? labelNoResultsWithSearch(search) : labelNoResults }}
                                 </span>
-                                <span v-if="search.trim()" class="inline-flex items-center gap-1.5 text-md text-gray-500">
+                                <span v-if="search.trim()" class="inline-flex items-center gap-1.5 text-md text-secondary">
                                     {{ labelPress }}
                                     <div class="flex items-center gap-1">
-                                        <div class="p-2px bg-gray-200 rounded">
+                                        <div class="p-2px bg-lowered rounded">
                                             <TelaIcon name="i-ph-command" size="16px" />
                                         </div>
-                                        <div class="p-2px bg-gray-200 rounded">
+                                        <div class="p-2px bg-lowered rounded">
                                             <TelaIcon name="i-ph-backspace" size="16px" />
                                         </div>
                                     </div>
@@ -441,15 +441,15 @@ watch(innerValue, (raw) => {
                                             <div class="flex flex-col">
                                                 <div class="flex items-center gap-1">
                                                     <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
-                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-gray-100" text-class="leading-none">
+                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
                                                         {{ labelMultimodal }}
                                                     </TelaBadge>
                                                     <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
-                                                        <span class="text-black-900">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
-                                                        <span class="text-gray-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
+                                                        <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
+                                                        <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
                                                     </span>
                                                 </div>
-                                                <span v-if="item.description" :class="cn('font-normal text-sm text-balance leading-none text-gray-500', descriptionClass)">
+                                                <span v-if="item.description" :class="cn('font-normal text-sm text-balance leading-none text-secondary', descriptionClass)">
                                                     {{ item.description }}
                                                 </span>
                                                 <slot name="tags" :option="item" />
@@ -457,18 +457,18 @@ watch(innerValue, (raw) => {
                                         </div>
                                         <div class="flex gap-3">
                                             <div v-if="item.maxInputTokens" class="flex flex-col gap-1.5">
-                                                <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
                                                     {{ labelInputMax }}
                                                 </span>
-                                                <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
                                                     {{ handleFormatNumber(item.maxInputTokens) }}
                                                 </span>
                                             </div>
                                             <div v-if="item.maxOutputTokens" class="flex flex-col gap-1.5">
-                                                <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
                                                     {{ labelOutputMax }}
                                                 </span>
-                                                <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
                                                     {{ handleFormatNumber(item.maxOutputTokens) }}
                                                 </span>
                                             </div>
@@ -492,17 +492,17 @@ watch(innerValue, (raw) => {
                         class="flex flex-col items-center justify-center gap-5 px-7"
                     >
                         <div class="flex flex-col items-center justify-center gap-3">
-                            <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                            <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-tertiary" />
                             <span class="text-xl font-medium leading-none">
                                 {{ search.trim() && labelNoResultsWithSearch ? labelNoResultsWithSearch(search) : labelNoResults }}
                             </span>
-                            <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-gray-500">
+                            <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-secondary">
                                 {{ labelPress }}
                                 <div class="flex items-center gap-1">
-                                    <div class="p-2px bg-gray-200 rounded">
+                                    <div class="p-2px bg-lowered rounded">
                                         <TelaIcon name="i-ph-command" size="16px" />
                                     </div>
-                                    <div class="p-2px bg-gray-200 rounded">
+                                    <div class="p-2px bg-lowered rounded">
                                         <TelaIcon name="i-ph-backspace" size="16px" />
                                     </div>
                                 </div>
@@ -548,15 +548,15 @@ watch(innerValue, (raw) => {
                                             <div class="flex flex-col">
                                                 <div class="flex items-center gap-1">
                                                     <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
-                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-gray-100" text-class="leading-none">
+                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
                                                         {{ labelMultimodal }}
                                                     </TelaBadge>
                                                     <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
-                                                        <span class="text-black-900">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
-                                                        <span class="text-gray-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
+                                                        <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
+                                                        <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
                                                     </span>
                                                 </div>
-                                                <span v-if="item.description" :class="cn('font-normal text-sm leading-none text-gray-500', descriptionClass)">
+                                                <span v-if="item.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
                                                     {{ item.description }}
                                                 </span>
                                                 <slot name="tags" :option="item" />
@@ -564,25 +564,25 @@ watch(innerValue, (raw) => {
                                         </div>
                                         <div v-if="item.maxInputTokens || item.maxOutputTokens" class="flex gap-3">
                                             <div class="flex flex-col gap-1.5">
-                                                <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
                                                     {{ labelInputMax }}
                                                 </span>
-                                                <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
                                                     {{ handleFormatNumber(item.maxInputTokens) }}
                                                 </span>
                                             </div>
                                             <div class="flex flex-col gap-1.5">
-                                                <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                <span class="text-tertiary leading-none text-9px uppercase tracking-wider font-semibold">
                                                     {{ labelOutputMax }}
                                                 </span>
-                                                <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                <span class="text-tertiary leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-neutral-700">
                                                     {{ handleFormatNumber(item.maxOutputTokens) }}
                                                 </span>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="flex gap-2 items-center">
-                                        <TelaIcon v-if="item.children?.length" name="i-ph-caret-right" size="14px" class="text-gray-400" />
+                                        <TelaIcon v-if="item.children?.length" name="i-ph-caret-right" size="14px" color="icon-tertiary" />
                                         <ComboboxItemIndicator v-else>
                                             <TelaIcon name="i-ph-check" size="14px" />
                                         </ComboboxItemIndicator>
@@ -602,7 +602,7 @@ watch(innerValue, (raw) => {
                                                 v-for="child in item.children"
                                                 :key="child.value"
                                                 :class="cn(
-                                                    'relative flex cursor-pointer select-none justify-between items-center rounded-lg px-2 py-2 text-sm font-medium text-gray-900 outline-none hover:bg-gray-100',
+                                                    'relative flex cursor-pointer select-none justify-between items-center rounded-lg px-2 py-2 text-sm font-medium text-primary outline-none hover:bg-muted',
                                                     !compact && '!px-1.5',
                                                 )"
                                                 @click.stop="handleChildSelect(child, $event)"
@@ -617,7 +617,7 @@ watch(innerValue, (raw) => {
                                                     </div>
                                                     <div class="flex flex-col">
                                                         <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
-                                                        <span v-if="child.description" :class="cn('font-normal text-sm leading-none text-gray-500', descriptionClass)">
+                                                        <span v-if="child.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
                                                             {{ child.description }}
                                                         </span>
                                                     </div>

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

@@ -0,0 +1,84 @@
+# TelaCreateCard
+
+A fixed-size entry point card for creating something new from files. Click it to open the native file picker, or drag files directly onto it. It emits a `change` event with the native input event so the parent owns the upload logic.
+
+## Rules
+
+- **Always** handle the `change` event — the component only surfaces files, it does not upload them.
+- The card has a **fixed footprint** (`w-221px h-128px`). Lay it out in a grid or flex row alongside other cards; do not stretch it.
+- Use it as the **first cell** in a list of existing items (the "add new" affordance), not as a standalone hero.
+- Set `multiple={false}` when the flow only accepts a single file.
+- Pass `name` when the input participates in a native `<form>` submission.
+- Use `disabled` while an upload is in flight — it blocks both click and drag-and-drop.
+
+## Examples
+
+### Default
+
+```vue
+<TelaCreateCard @change="handleChange" />
+```
+
+```ts
+function handleChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = input.files
+  // upload files...
+}
+```
+
+### Custom Labels
+
+```vue
+<TelaCreateCard
+  title="Upload dataset"
+  description="Drop a CSV or"
+  browse-label="choose a file"
+  :multiple="false"
+  @change="handleChange"
+/>
+```
+
+### Without Browse Label
+
+```vue
+<!-- Empty browse-label hides the underlined call-to-action -->
+<TelaCreateCard
+  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>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `'New analysis'` | Heading shown inside the card |
+| `description` | `string` | `'Drag files or'` | Leading helper text before the browse label |
+| `browseLabel` | `string` | `'browse your computer'` | Underlined call-to-action appended after the description. Empty string hides it |
+| `multiple` | `boolean` | `true` | Whether the file input accepts multiple files |
+| `name` | `string` | — | `name` attribute forwarded to the underlying file input |
+| `disabled` | `boolean` | `false` | Disables clicking and drag-and-drop, and dims the card |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `change` | `Event` | Native input change event, fired on file selection and on drop. Read files from `(event.target as HTMLInputElement).files` |

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CreateCard from './create-card.vue'
+
+const meta: Meta<typeof CreateCard> = {
+    title: 'Core/CreateCard',
+    component: CreateCard,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A fixed-size entry point card for creating something new from files. Click to open the file picker, or drag files onto it. Emits `change` with the native input event.',
+            },
+        },
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Heading shown inside the card.',
+        },
+        description: {
+            control: 'text',
+            description: 'Leading helper text before the browse label.',
+        },
+        browseLabel: {
+            control: 'text',
+            description: 'Underlined call-to-action appended after the description.',
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'Whether the file input accepts multiple files.',
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute forwarded to the underlying file input.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables clicking and drag-and-drop.',
+        },
+    },
+    args: {
+        onChange: (event: Event) => {
+            const input = event.target as HTMLInputElement
+            // eslint-disable-next-line no-console
+            console.log('change', input.files)
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        title: 'New analysis',
+        description: 'Drag files or',
+        browseLabel: 'browse your computer',
+        multiple: true,
+    },
+}
+
+export const Disabled: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        disabled: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled state — clicking and drag-and-drop are inert and the card is dimmed.',
+            },
+        },
+    },
+}
+
+export const CustomLabels: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        title: 'Upload dataset',
+        description: 'Drop a CSV or',
+        browseLabel: 'choose a file',
+        multiple: false,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Custom title, description, and browse label. Set `multiple: false` to accept a single file.',
+            },
+        },
+    },
+}
+
+export const NoBrowseLabel: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        title: 'New canvas',
+        description: 'Drag files here',
+        browseLabel: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Omitting `browseLabel` (empty string) hides the underlined call-to-action.',
+            },
+        },
+    },
+}