@karbonjs/ui-svelte 0.2.5 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karbonjs/ui-svelte",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "description": "Karbon UI components for Svelte 5",
   "type": "module",
   "svelte": "src/index.ts",
@@ -15,7 +15,8 @@
     "src"
   ],
   "dependencies": {
-    "@karbonjs/ui-core": "0.2.5"
+    "simple-icons": "^16.12.0",
+    "@karbonjs/ui-core": "0.3.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/accordion/Accordion.svelte

@@ -1,63 +1,238 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { AccordionItem } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
+
+  interface AccordionItem {
+    id: string
+    title: string
+    content?: string
+    description?: string
+    icon?: string
+    disabled?: boolean
+    defaultOpen?: boolean
+  }
 
   interface Props {
     items: AccordionItem[]
     multiple?: boolean
+    variant?: 'default' | 'bordered' | 'separated' | 'ghost' | 'filled' | 'colored'
+    color?: ButtonColor
+    size?: 'sm' | 'md' | 'lg'
+    bg?: boolean | string
+    border?: boolean | string
+    highlightActive?: boolean
+    arrow?: 'chevron' | 'plus' | 'arrow' | 'dot' | 'none'
+    arrowPosition?: 'left' | 'right'
     class?: string
-    children?: Snippet<[{ item: AccordionItem; index: number }]>
+    classes?: { root?: string, item?: string, trigger?: string, content?: string, arrow?: string }
+    onchange?: (openIds: string[]) => void
+    children?: Snippet<[{ item: AccordionItem, index: number }]>
   }
 
   let {
     items,
     multiple = false,
+    variant = 'default',
+    bg = false,
+    border = false,
+    highlightActive = true,
+    color,
+    size = 'md',
+    arrow = 'chevron',
+    arrowPosition = 'right',
     class: className = '',
+    classes = {},
+    onchange,
     children
   }: Props = $props()
 
-  let openIds = $state<Set<string>>(new Set())
+  function sanitizeSvg(html: string): string {
+    return html.replace(/on\w+\s*=/gi, '').replace(/<script/gi, '&lt;script')
+  }
+
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const accentBg = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+
+  let openIds = $state<Set<string>>(new Set(items.filter(i => i.defaultOpen).map(i => i.id)))
 
   function toggle(id: string) {
     const next = new Set(openIds)
-    if (next.has(id)) {
-      next.delete(id)
-    } else {
-      if (!multiple) next.clear()
-      next.add(id)
-    }
+    if (next.has(id)) next.delete(id)
+    else { if (!multiple) next.clear(); next.add(id) }
     openIds = next
+    onchange?.([...next])
+  }
+
+  const sizeMap = {
+    sm: { px: 'px-3', py: 'py-2.5', text: 'text-xs', content: 'text-xs', icon: 14, arrowBox: 20 },
+    md: { px: 'px-4', py: 'py-3.5', text: 'text-sm', content: 'text-sm', icon: 16, arrowBox: 24 },
+    lg: { px: 'px-5', py: 'py-4', text: 'text-base', content: 'text-base', icon: 18, arrowBox: 28 },
+  }
+  const s = $derived(sizeMap[size])
+
+  // Arrow SVGs
+  const arrows: Record<string, { open: string, closed: string }> = {
+    chevron: {
+      closed: '<path d="m6 9 6 6 6-6"/>',
+      open: '<path d="m6 9 6 6 6-6"/>',
+    },
+    plus: {
+      closed: '<path d="M12 5v14"/><path d="M5 12h14"/>',
+      open: '<path d="M5 12h14"/>',
+    },
+    arrow: {
+      closed: '<path d="m9 18 6-6-6-6"/>',
+      open: '<path d="m9 18 6-6-6-6"/>',
+    },
+    dot: {
+      closed: '<circle cx="12" cy="12" r="4"/>',
+      open: '<circle cx="12" cy="12" r="4"/>',
+    },
+  }
+
+  function arrowRotation(isOpen: boolean): string {
+    if (arrow === 'plus' || arrow === 'dot') return '' // plus uses different SVG, no rotation
+    if (arrow === 'arrow') return isOpen ? 'rotate(90deg)' : 'rotate(0deg)'
+    return isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+  }
+
+  function rootStyle(): string {
+    switch (variant) {
+      case 'default': {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : 'var(--karbon-border)'
+        return `border-radius:0.75rem;border:1px solid ${bc};overflow:hidden;`
+      }
+      case 'bordered': {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : 'var(--karbon-border)'
+        return `border-radius:0.75rem;border:1px solid ${bc};overflow:hidden;`
+      }
+      case 'separated': return ''
+      case 'ghost': return ''
+      case 'filled': return `border-radius:0.75rem;overflow:hidden;`
+      case 'colored': return `border-radius:0.75rem;overflow:hidden;`
+      default: return ''
+    }
+  }
+
+  function itemStyle(isOpen: boolean, isLast: boolean): string {
+    switch (variant) {
+      case 'separated': {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : (isOpen ? accent : 'var(--karbon-border)')
+        return `border-radius:0.75rem;border:1px solid ${bc};overflow:hidden;margin-bottom:0.5rem;${isOpen ? `box-shadow:0 0 0 1px color-mix(in srgb,${accent} 15%,transparent),0 2px 8px color-mix(in srgb,${accent} 8%,transparent);` : ''}`
+      }
+      case 'filled': {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : (isOpen ? `color-mix(in srgb,${accent} 15%,transparent)` : 'var(--karbon-border)')
+        return `background:${isOpen ? `color-mix(in srgb,${accentBg} 6%,transparent)` : 'transparent'};${!isLast ? `border-bottom:1px solid ${bc};` : ''}`
+      }
+      case 'colored': {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : (isOpen ? `color-mix(in srgb,${accent} 20%,transparent)` : 'var(--karbon-border)')
+        return `background:${isOpen ? `color-mix(in srgb,${accentBg} 12%,transparent)` : 'var(--karbon-bg-2)'};${!isLast ? `border-bottom:1px solid ${bc};` : ''}${isOpen ? `box-shadow:inset 3px 0 0 ${accent};` : ''}transition:all 0.2s ease;`
+      }
+      case 'ghost': {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : 'var(--karbon-border)'
+        return `${!isLast ? `border-bottom:1px solid ${bc};` : ''}`
+      }
+      default: {
+        const bc = border ? (typeof border === 'string' ? border : 'var(--karbon-border)') : 'var(--karbon-border)'
+        return `${!isLast ? `border-bottom:1px solid ${bc};` : ''}`
+      }
+    }
+  }
+
+  function triggerStyle(isOpen: boolean): string {
+    if (!highlightActive) return 'color:var(--karbon-text);'
+    if (variant === 'bordered' && isOpen) {
+      return `background:color-mix(in srgb,${accent} 6%,transparent);color:${accent};`
+    }
+    if (variant === 'colored' && isOpen) {
+      return `color:${accent};`
+    }
+    return `color:${isOpen ? accent : 'var(--karbon-text)'};`
+  }
+
+  function arrowStyle(isOpen: boolean): string {
+    const base = `width:${s.arrowBox}px;height:${s.arrowBox}px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);flex-shrink:0;`
+    if (isOpen) {
+      return `${base}background:color-mix(in srgb,${accent} 15%,transparent);color:${accent};transform:${arrowRotation(true)};`
+    }
+    return `${base}background:transparent;color:var(--karbon-text-4);transform:${arrowRotation(false)};`
   }
 </script>
 
-<div class="rounded-xl border border-[var(--karbon-border,rgba(0,0,0,0.07))] overflow-hidden divide-y divide-[var(--karbon-border,rgba(0,0,0,0.07))] {className}">
+<div class="{classes?.root ?? className}" style="{rootStyle()}{bg === true ? 'background:var(--karbon-bg-card);' : typeof bg === 'string' ? `background:${bg};` : ''}">
   {#each items as item, index}
-    <div>
+    {@const isOpen = openIds.has(item.id)}
+    {@const isLast = index === items.length - 1}
+    <div class="{classes?.item ?? ''}" style={itemStyle(isOpen, isLast)}>
+      <!-- Trigger -->
       <button
         type="button"
         onclick={() => { if (!item.disabled) toggle(item.id) }}
         disabled={item.disabled}
-        class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-left transition-colors
-          text-[var(--karbon-text,#1a1635)] hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))]
-          disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+        class="w-full flex items-center gap-3 {s.px} {s.py} {s.text} font-medium text-left transition-all
+          disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer
+          {classes?.trigger ?? ''}"
+        style={triggerStyle(isOpen)}
+        onmouseenter={(e) => { if (!item.disabled && !isOpen) (e.currentTarget as HTMLElement).style.background = 'var(--karbon-nav-hover-bg)' }}
+        onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.cssText = triggerStyle(isOpen) }}
       >
-        <span>{item.title}</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-          class="shrink-0 text-[var(--karbon-text-4,#b5b2cc)] transition-transform duration-200 {openIds.has(item.id) ? 'rotate-180' : ''}"
-        ><path d="m6 9 6 6 6-6"/></svg>
+        <!-- Left arrow -->
+        {#if arrowPosition === 'left' && arrow !== 'none'}
+          <span style={arrowStyle(isOpen)} class="{classes?.arrow ?? ''}">
+            <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill={arrow === 'dot' ? 'currentColor' : 'none'} stroke={arrow === 'dot' ? 'none' : 'currentColor'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              {@html isOpen ? arrows[arrow].open : arrows[arrow].closed}
+            </svg>
+          </span>
+        {/if}
+
+        <!-- Item icon -->
+        {#if item.icon}
+          <span class="shrink-0 opacity-60">{@html sanitizeSvg(item.icon)}</span>
+        {/if}
+
+        <!-- Title + description -->
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2">
+            <span>{item.title}</span>
+            {#if item.description && !isOpen}
+              <span class="font-normal truncate hidden sm:inline" style="color:var(--karbon-text-4);font-size:0.85em;">— {item.description}</span>
+            {/if}
+          </div>
+          {#if item.description && isOpen}
+            <p class="font-normal mt-0.5" style="color:var(--karbon-text-3);font-size:0.85em;">{item.description}</p>
+          {/if}
+        </div>
+
+        <!-- Right arrow -->
+        {#if arrowPosition === 'right' && arrow !== 'none'}
+          <span style={arrowStyle(isOpen)} class="{classes?.arrow ?? ''}">
+            <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill={arrow === 'dot' ? 'currentColor' : 'none'} stroke={arrow === 'dot' ? 'none' : 'currentColor'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              {@html isOpen ? arrows[arrow].open : arrows[arrow].closed}
+            </svg>
+          </span>
+        {/if}
       </button>
 
-      {#if openIds.has(item.id)}
-        <div class="px-4 pb-3 text-sm text-[var(--karbon-text-2,#5a567e)]">
+      <!-- Content -->
+      {#if isOpen}
+        <div
+          class="{s.px} pb-4 {s.content} {classes?.content ?? ''}"
+          style="color:var(--karbon-text-2);animation:karbon-accordion-slide 0.25s cubic-bezier(0.16,1,0.3,1);"
+        >
           {#if children}
             {@render children({ item, index })}
           {:else if item.content}
-            <p>{item.content}</p>
+            <p class="leading-relaxed">{item.content}</p>
           {/if}
         </div>
       {/if}
     </div>
   {/each}
 </div>
+
+<style>
+  @keyframes karbon-accordion-slide {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+</style>

package/src/alert/AlertMessage.svelte

@@ -1,44 +1,138 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
   import type { AlertType } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     type?: AlertType
+    variant?: 'soft' | 'filled' | 'outline' | 'bordered'
+    color?: ButtonColor
+    title?: string
     message?: string
+    dismissible?: boolean
+    icon?: Snippet | false
+    actions?: Snippet
     class?: string
+    classes?: { root?: string, icon?: string, title?: string, text?: string, close?: string }
+    ondismiss?: () => void
     children?: Snippet
   }
 
   let {
-    type = 'error',
+    type = 'info',
+    variant = 'soft',
+    color,
+    title = '',
     message = '',
+    dismissible = false,
+    icon,
+    actions,
     class: className = '',
+    classes = {},
+    ondismiss,
     children
   }: Props = $props()
 
-  const variants: Record<string, string> = {
-    error: 'bg-red-500/8 border border-red-500/20 text-red-400',
-    success: 'bg-green-500/8 border border-green-500/20 text-green-400',
-    warning: 'bg-amber-500/8 border border-amber-500/20 text-amber-300',
-    info: 'bg-blue-500/8 border border-blue-500/20 text-blue-400'
+  let visible = $state(true)
+
+  // Type → color mapping when no color prop
+  const typeColors: Record<string, string> = {
+    error: 'var(--karbon-red-500, #ef4444)',
+    success: 'var(--karbon-emerald-500, #10b981)',
+    warning: 'var(--karbon-amber-500, #f59e0b)',
+    info: 'var(--karbon-blue-500, #3b82f6)',
+  }
+
+  const typeColorsLight: Record<string, string> = {
+    error: 'var(--karbon-red-400, #f87171)',
+    success: 'var(--karbon-emerald-400, #34d399)',
+    warning: 'var(--karbon-amber-400, #fbbf24)',
+    info: 'var(--karbon-blue-400, #60a5fa)',
+  }
+
+  const baseColor = $derived(color ? `var(--karbon-${color}-500)` : typeColors[type])
+  const lightColor = $derived(color ? `var(--karbon-${color}-400)` : typeColorsLight[type])
+
+  const style = $derived.by(() => {
+    switch (variant) {
+      case 'soft':
+        return `background:color-mix(in srgb,${baseColor} 10%,transparent);color:${lightColor};border:1px solid color-mix(in srgb,${baseColor} 15%,transparent);`
+      case 'filled':
+        return `background:${baseColor};color:white;border:none;`
+      case 'outline':
+        return `background:transparent;color:${lightColor};border:1px solid color-mix(in srgb,${baseColor} 30%,transparent);`
+      case 'bordered':
+        return `background:color-mix(in srgb,${baseColor} 6%,transparent);color:${lightColor};border:none;border-left:3px solid ${baseColor};`
+      default: return ''
+    }
+  })
+
+  // SVG icons per type
+  const typeIcons: Record<string, string> = {
+    error: '<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>',
+    success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',
+    warning: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  }
+
+  function dismiss() {
+    visible = false
+    ondismiss?.()
   }
 </script>
 
-{#if message || children}
-  <div class="flex items-center gap-2.5 px-4 py-3 rounded-[0.625rem] text-[0.825rem] font-medium {variants[type]} {className}">
-    {#if type === 'error'}
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
-    {:else if type === 'success'}
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
-    {:else if type === 'warning'}
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
-    {:else}
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+{#if visible && (message || children || title)}
+  <div
+    class="flex gap-3 rounded-xl px-4 py-3 text-sm {classes?.root ?? className}"
+    style="{style}animation:karbon-alert-in 0.25s ease;"
+    role="alert"
+  >
+    <!-- Icon -->
+    {#if icon !== false}
+      <div class="shrink-0 mt-0.5 {classes?.icon ?? ''}">
+        {#if icon}
+          {@render icon()}
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+            stroke={variant === 'filled' ? 'white' : 'currentColor'}
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          >{@html typeIcons[type] || typeIcons.info}</svg>
+        {/if}
+      </div>
     {/if}
-    {#if children}
-      {@render children()}
-    {:else}
-      <span>{message}</span>
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      {#if title}
+        <p class="font-semibold {message || children ? 'mb-1' : ''} {classes?.title ?? ''}"
+          style={variant === 'filled' ? 'color:white;' : ''}
+        >{title}</p>
+      {/if}
+      {#if children}
+        <div class="opacity-90 {classes?.text ?? ''}">{@render children()}</div>
+      {:else if message}
+        <p class="opacity-90 {classes?.text ?? ''}">{message}</p>
+      {/if}
+      {#if actions}
+        <div class="mt-2.5 flex items-center gap-2">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+
+    <!-- Dismiss -->
+    {#if dismissible}
+      <button
+        type="button"
+        onclick={dismiss}
+        class="shrink-0 mt-0.5 rounded-lg p-1 transition-opacity opacity-50 hover:opacity-100 cursor-pointer {classes?.close ?? ''}"
+        aria-label="Fermer"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+          stroke={variant === 'filled' ? 'white' : 'currentColor'}
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        ><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
     {/if}
   </div>
 {/if}

package/src/avatar/Avatar.svelte

@@ -6,7 +6,9 @@
     alt?: string
     name?: string
     size?: AvatarSize
+    color?: string
     class?: string
+    classes?: { root?: string }
   }
 
   let {
@@ -14,7 +16,9 @@
     alt = '',
     name = '',
     size = 'md',
-    class: className = ''
+    color,
+    class: className = '',
+    classes = {}
   }: Props = $props()
 
   let errored = $state(false)
@@ -32,9 +36,19 @@
   )
 
   const showImage = $derived(src && !errored)
+
+  const colorStyle = $derived.by(() => {
+    if (!color) return ''
+    return `background:color-mix(in srgb,var(--karbon-${color}-500) 15%,transparent);color:var(--karbon-${color}-400)`
+  })
+
+  const defaultBgClass = $derived(color ? '' : 'bg-[var(--karbon-bg-2,#e8e6f0)] text-[var(--karbon-text-2,#5a567e)]')
 </script>
 
-<div class="relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--karbon-bg-2,#e8e6f0)] text-[var(--karbon-text-2,#5a567e)] font-semibold {sizeClasses[size]} {className}">
+<div
+  class="relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden font-semibold {defaultBgClass} {sizeClasses[size]} {classes?.root ?? className}"
+  style={colorStyle}
+>
   {#if showImage}
     <img
       {src}

package/src/badge/Badge.svelte

@@ -1,24 +1,113 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { BadgeVariant } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
-    variant?: BadgeVariant
+    variant?: 'soft' | 'solid' | 'outline' | 'dot' | 'flat'
+    color?: ButtonColor
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+    shape?: 'pill' | 'rounded' | 'square'
+    closable?: boolean
+    dot?: boolean
+    icon?: Snippet
     class?: string
+    classes?: { root?: string, dot?: string, icon?: string, close?: string }
+    onclose?: () => void
     children: Snippet
   }
 
-  let { variant = 'default', class: className = '', children }: Props = $props()
+  let {
+    variant = 'soft',
+    color,
+    size = 'sm',
+    shape = 'pill',
+    closable = false,
+    dot = false,
+    icon,
+    class: className = '',
+    classes = {},
+    onclose,
+    children
+  }: Props = $props()
 
-  const variants: Record<string, string> = {
-    default: 'bg-[var(--karbon-bg-2,rgba(255,255,255,0.08))] text-[var(--karbon-text-2,#a1a1aa)]',
-    success: 'bg-emerald-500/15 text-emerald-500',
-    warning: 'bg-amber-500/15 text-amber-500',
-    danger: 'bg-red-500/15 text-red-500',
-    info: 'bg-blue-500/15 text-blue-500'
+  function c(shade: number): string {
+    return color ? `var(--karbon-${color}-${shade})` : ''
+  }
+
+  const accent = $derived(color ? c(500) : 'var(--karbon-primary)')
+  const accentLight = $derived(color ? c(400) : 'var(--karbon-primary)')
+
+  // Preset color variants (when no color prop)
+  const presetStyles: Record<string, string> = {
+    soft: 'background:var(--karbon-bg-2);color:var(--karbon-text-2);',
+    solid: 'background:var(--karbon-primary);color:white;',
+    outline: 'background:transparent;color:var(--karbon-text-2);border:1px solid var(--karbon-border);',
+    dot: 'background:var(--karbon-bg-2);color:var(--karbon-text-2);',
+    flat: 'background:transparent;color:var(--karbon-text-2);',
+  }
+
+  const colorStyle = $derived.by(() => {
+    if (!color) return presetStyles[variant] || presetStyles.soft
+    switch (variant) {
+      case 'soft': return `background:color-mix(in srgb,${accent} 15%,transparent);color:${accentLight};`
+      case 'solid': return `background:${accent};color:white;`
+      case 'outline': return `background:transparent;color:${accentLight};border:1px solid color-mix(in srgb,${accentLight} 40%,transparent);`
+      case 'dot': return `background:color-mix(in srgb,${accent} 10%,transparent);color:${accentLight};`
+      case 'flat': return `background:transparent;color:${accentLight};`
+      default: return `background:color-mix(in srgb,${accent} 15%,transparent);color:${accentLight};`
+    }
+  })
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'px-1.5 py-px text-[10px] gap-1',
+    sm: 'px-2 py-0.5 text-[11px] gap-1',
+    md: 'px-2.5 py-0.5 text-xs gap-1.5',
+    lg: 'px-3 py-1 text-sm gap-1.5',
+  }
+
+  const dotSizes: Record<string, string> = {
+    xs: 'w-1 h-1',
+    sm: 'w-1.5 h-1.5',
+    md: 'w-2 h-2',
+    lg: 'w-2 h-2',
+  }
+
+  const iconSizes: Record<string, number> = { xs: 8, sm: 10, md: 12, lg: 14 }
+
+  const shapeClasses: Record<string, string> = {
+    pill: 'rounded-full',
+    rounded: 'rounded-md',
+    square: 'rounded-none',
   }
 </script>
 
-<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {variants[variant]} {className}">
+<span
+  class="inline-flex items-center font-medium {sizeClasses[size]} {shapeClasses[shape]} {classes?.root ?? className}"
+  style={colorStyle}
+>
+  {#if (variant === 'dot' || dot) && !icon}
+    <span
+      class="rounded-full shrink-0 {dotSizes[size]} {classes?.dot ?? ''}"
+      style="background: {color ? accentLight : 'currentColor'};"
+    ></span>
+  {/if}
+
+  {#if icon}
+    <span class="shrink-0 {classes?.icon ?? ''}">
+      {@render icon()}
+    </span>
+  {/if}
+
   {@render children()}
+
+  {#if closable}
+    <button
+      type="button"
+      onclick={(e) => { e.stopPropagation(); onclose?.() }}
+      class="shrink-0 ml-0.5 rounded-full transition-opacity opacity-60 hover:opacity-100 cursor-pointer {classes?.close ?? ''}"
+      aria-label="Fermer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width={iconSizes[size]} height={iconSizes[size]} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+  {/if}
 </span>