src/shared/ui/MicroLabel/MicroLabel.stories.svelte

@@ -0,0 +1,67 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import MicroLabel from './MicroLabel.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/MicroLabel',
+    component: MicroLabel,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Tiny uppercase label for annotations and metadata. Ideal for field labels, status indicators, and category markers.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['muted', 'accent', 'subtle'],
+            description: 'Color variant of the label',
+        },
+    },
+});
+</script>
+
+<Story name="Default">
+    {#snippet template(args)}
+        <MicroLabel {...args}>Label</MicroLabel>
+    {/snippet}
+</Story>
+
+<Story name="Variants">
+    {#snippet template(args)}
+        <div class="space-y-2">
+            <div>
+                <MicroLabel variant="muted" {...args}>Muted Label</MicroLabel>
+                <p class="text-gray-600 dark:text-gray-400 mt-1">Supporting text goes here</p>
+            </div>
+            <div>
+                <MicroLabel variant="accent" {...args}>Accent Label</MicroLabel>
+                <p class="text-gray-600 dark:text-gray-400 mt-1">Supporting text goes here</p>
+            </div>
+            <div>
+                <MicroLabel variant="subtle" {...args}>Subtle Label</MicroLabel>
+                <p class="text-gray-600 dark:text-gray-400 mt-1">Supporting text goes here</p>
+            </div>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Inline Usage">
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <div class="flex items-center gap-2">
+                <MicroLabel variant="accent" {...args}>Status</MicroLabel>
+                <span class="text-sm">Active</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <MicroLabel {...args}>Category</MicroLabel>
+                <span class="text-sm">Typography</span>
+            </div>
+        </div>
+    {/snippet}
+</Story>

src/shared/ui/MicroLabel/MicroLabel.svelte

@@ -0,0 +1,29 @@
+<!--
+    Component: MicroLabel
+    Tiny uppercase label for annotations and metadata
+-->
+<script lang="ts">
+interface Props {
+    /**
+     * Color variant of the label
+     * @default muted
+     */
+    variant?: 'muted' | 'accent' | 'subtle';
+}
+
+const { variant = 'muted' }: Props = $props();
+
+const baseClasses = 'text-[10px] uppercase tracking-wider font-semibold';
+
+const variantClasses = $derived(
+    variant === 'accent'
+        ? 'text-indigo-600 dark:text-indigo-400'
+        : variant === 'subtle'
+        ? 'text-gray-500 dark:text-gray-500'
+        : 'text-gray-400 dark:text-gray-500',
+);
+</script>
+
+<span class="{baseClasses} {variantClasses}">
+    <slot />
+</span>