feat(Label): component redesign with complete storybook coverage

src/shared/ui/Label/Label.svelte

@@ -1,45 +1,60 @@
+<!--
+    Component: Label
+    Inline monospace label. The base primitive for all micrographic text.
+-->
 <script lang="ts">
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+import {
+    type LabelSize,
+    type LabelVariant,
+    labelSizeConfig,
+    labelVariantConfig,
+} from './config';
 
 interface Props {
-    text?: string;
-    align?: 'left' | 'right' | 'center';
-    size?: 'sm' | 'md' | 'lg';
-    onlyText?: boolean;
+    variant?: LabelVariant;
+    size?: LabelSize;
+    uppercase?: boolean;
+    bold?: boolean;
+    icon?: Snippet;
+    iconPosition?: 'left' | 'right';
+    children?: Snippet;
     class?: string;
 }
-const {
-    text,
-    align = 'left',
-    size = 'md',
-    onlyText = false,
+
+let {
+    variant = 'default',
+    size = 'sm',
+    uppercase = true,
+    bold = false,
+    icon,
+    iconPosition = 'left',
+    children,
     class: className,
 }: Props = $props();
 </script>
 
-<div
+<span
     class={cn(
-        'grid grid-rows-1 gap-2 items-center w-auto',
-        align === 'left' && 'grid-cols-[max-content_1fr]',
-        align === 'center' && 'grid-cols-[1fr_max-content_1fr]',
-        align === 'right' && 'grig-cols-[1fr_max-content]',
+        "font-['Space_Mono'] tracking-widest leading-none",
+        'inline-flex items-center gap-1.5',
+        labelSizeConfig[size],
+        labelVariantConfig[variant],
+        uppercase && 'uppercase',
+        bold && 'font-bold',
         className,
     )}
 >
-    {#if align !== 'left'}
-        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
+    {#if icon && iconPosition === 'left'}
+        <span class="inline-flex">{@render icon()}</span>
     {/if}
-    <div
-        class={cn(
-            'text-gray-400 uppercase',
-            size === 'sm' && 'text-[0.5rem]',
-            size === 'md' && 'text-[0.625rem]',
-            size === 'lg' && 'text-[0.75rem]',
-        )}
-    >
-        {text}
-    </div>
-    {#if align !== 'right'}
-        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
+
+    {#if children}
+        <span>{@render children()}</span>
     {/if}
-</div>
+
+    {#if icon && iconPosition === 'right'}
+        <span class="inline-flex">{@render icon()}</span>
+    {/if}
+</span>