@karbonjs/ui-svelte 0.2.4 → 0.3.0

package/src/form/Select.svelte

@@ -1,73 +1,286 @@
 <script lang="ts">
-  import type { FormVariant, SelectOption } from '@karbonjs/ui-core'
+  import type { Snippet } from 'svelte'
+  import type { FormVariant, FormInputVariant, SelectOption, SelectClasses, ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     name: string
     options: SelectOption[]
     value?: string
+    values?: string[]
     placeholder?: string
     label?: string
     error?: string
+    errorIcon?: boolean
     required?: boolean
     disabled?: boolean
+    multiple?: boolean
+    searchable?: boolean
+    clearable?: boolean
     variant?: FormVariant
+    inputVariant?: FormInputVariant
+    color?: ButtonColor
+    classes?: SelectClasses
     class?: string
-    onchange?: (e: Event) => void
+    onchange?: (value: string | string[]) => void
   }
 
   let {
     name,
     options,
     value = $bindable(''),
-    placeholder = '',
+    values = $bindable([]),
+    placeholder = 'Selectionner...',
     label = '',
     error = '',
+    errorIcon = true,
     required = false,
     disabled = false,
+    multiple = false,
+    searchable = false,
+    clearable = false,
     variant = 'dark',
+    inputVariant = 'outlined',
+    color,
+    classes,
     class: className = '',
     onchange
   }: Props = $props()
 
-  const themes = {
-    dark: {
-      label: 'text-[11px] font-medium text-gray-500 uppercase tracking-wider',
-      select: 'border-white/8 bg-white/3 text-white focus:border-[var(--karbon-primary)]/50 focus:bg-white/5 focus:ring-[3px] focus:ring-[var(--karbon-primary)]/8',
-      error: 'text-red-400'
-    },
-    light: {
-      label: 'text-sm font-medium text-gray-700',
-      select: 'border-gray-300 bg-white text-gray-900 focus:border-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20',
-      error: 'text-[var(--karbon-danger)]'
+  let open = $state(false)
+  let focused = $state(false)
+  let search = $state('')
+  let triggerEl: HTMLDivElement | undefined = $state()
+  let dropdownEl: HTMLDivElement | undefined = $state()
+
+  const focusColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const isDark = $derived(variant === 'dark')
+
+  const filteredOptions = $derived(
+    searchable && search
+      ? options.filter(o => !o.disabled && o.label.toLowerCase().includes(search.toLowerCase()))
+      : options
+  )
+
+  const selectedLabel = $derived(() => {
+    if (multiple) {
+      return values.length ? `${values.length} selectionne${values.length > 1 ? 's' : ''}` : ''
+    }
+    const opt = options.find(o => o.value === value)
+    return opt?.label || ''
+  })
+
+  const selectedOptions = $derived(
+    multiple ? options.filter(o => values.includes(o.value)) : []
+  )
+
+  function toggle() {
+    if (disabled) return
+    open = !open
+    if (open) {
+      search = ''
+      focused = true
+    }
+  }
+
+  function selectOption(opt: SelectOption) {
+    if (opt.disabled) return
+    if (multiple) {
+      if (values.includes(opt.value)) {
+        values = values.filter(v => v !== opt.value)
+      } else {
+        values = [...values, opt.value]
+      }
+      onchange?.(values)
+    } else {
+      value = opt.value
+      open = false
+      onchange?.(value)
+    }
+  }
+
+  function removeChip(val: string) {
+    values = values.filter(v => v !== val)
+    onchange?.(values)
+  }
+
+  function clearAll() {
+    if (multiple) {
+      values = []
+      onchange?.(values)
+    } else {
+      value = ''
+      onchange?.('')
     }
-  } as const
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    if (triggerEl && !triggerEl.contains(e.target as Node) && dropdownEl && !dropdownEl.contains(e.target as Node)) {
+      open = false
+      focused = false
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      open = false
+      focused = false
+    }
+  }
 
-  const theme = $derived(themes[variant])
+  const variantClasses = $derived.by(() => {
+    if (inputVariant === 'underline') return 'rounded-none bg-transparent'
+    if (inputVariant === 'filled') return isDark ? 'rounded-lg bg-white/8' : 'rounded-lg bg-gray-100'
+    return isDark ? 'rounded-lg border border-white/8 bg-white/3' : 'rounded-lg border border-gray-300 bg-white'
+  })
+
+  const inlineStyle = $derived.by(() => {
+    let s = ''
+    if (inputVariant === 'underline') {
+      const bc = focused ? focusColor : error ? 'var(--karbon-danger)' : isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.12)'
+      s = `border:none;border-bottom:1px solid ${bc};border-radius:0;`
+    } else if (focused) {
+      s = `border-color:${focusColor};box-shadow:0 0 0 3px color-mix(in srgb,${focusColor} 12%,transparent);`
+    }
+    return s
+  })
 </script>
 
-<div class="space-y-1.5 {className}">
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="space-y-1.5 {classes?.root ?? ''} {className}">
   {#if label}
-    <label for={name} class="{theme.label} block mb-1.5">{label}</label>
+    <span class="{isDark ? 'text-[11px] font-medium text-gray-500 uppercase tracking-wider' : 'text-sm font-medium text-gray-700'} block mb-1.5 {classes?.label ?? ''}">{label}</span>
   {/if}
 
-  <select
-    id={name}
-    {name}
-    bind:value
-    {required}
-    {disabled}
-    {onchange}
-    class="w-full rounded-lg border px-3 py-2.5 md:py-3 text-[13px] md:text-sm focus:outline-none transition-all appearance-none bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239ca3af%22 stroke-width=%222%22><path d=%22m6 9 6 6 6-6%22/></svg>')] {theme.select} {error ? 'border-red-500/50' : ''}"
-  >
-    {#if placeholder}
-      <option value="" disabled selected class="text-gray-500">{placeholder}</option>
+  <!-- Hidden input for form submission -->
+  <input type="hidden" {name} value={multiple ? values.join(',') : value} />
+
+  <div class="relative">
+    <!-- Trigger -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      bind:this={triggerEl}
+      onclick={toggle}
+      class="relative w-full min-h-[42px] md:min-h-[46px] flex items-center gap-2 px-3 py-2 text-[13px] md:text-sm cursor-pointer transition-all
+        {variantClasses}
+        {error ? 'border-red-500/50' : ''}
+        {disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : ''}
+        {classes?.select ?? ''}"
+      style={inlineStyle}
+    >
+      <!-- Content -->
+      <div class="flex-1 flex flex-wrap items-center gap-1.5 min-w-0">
+        {#if multiple && selectedOptions.length > 0}
+          {#each selectedOptions as opt}
+            <span
+              class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium transition-colors"
+              style="background: color-mix(in srgb, {focusColor} 15%, transparent); color: {focusColor};"
+            >
+              {opt.label}
+              <button
+                type="button"
+                onclick={(e) => { e.stopPropagation(); removeChip(opt.value) }}
+                class="hover:opacity-70 cursor-pointer"
+                aria-label="Retirer {opt.label}"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
+            </span>
+          {/each}
+        {:else if !multiple && selectedLabel()}
+          <span class="{isDark ? 'text-white' : 'text-gray-900'}">{selectedLabel()}</span>
+        {:else}
+          <span class="{isDark ? 'text-gray-600' : 'text-gray-400'}">{placeholder}</span>
+        {/if}
+      </div>
+
+      <!-- Actions -->
+      <div class="flex items-center gap-1 shrink-0">
+        {#if clearable && (value || values.length > 0)}
+          <button
+            type="button"
+            onclick={(e) => { e.stopPropagation(); clearAll() }}
+            class="{isDark ? 'text-gray-600 hover:text-gray-400' : 'text-gray-400 hover:text-gray-600'} transition-colors cursor-pointer"
+            aria-label="Tout effacer"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="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}
+        <svg
+          xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="{isDark ? 'text-gray-600' : 'text-gray-400'} transition-transform duration-200 {open ? 'rotate-180' : ''}"
+        ><path d="m6 9 6 6 6-6"/></svg>
+      </div>
+    </div>
+
+    <!-- Dropdown -->
+    {#if open}
+      <div
+        bind:this={dropdownEl}
+        class="absolute z-50 mt-1 w-full rounded-lg shadow-xl overflow-hidden"
+        style="background: {isDark ? 'var(--karbon-bg-card, #1a1a2e)' : '#fff'}; border: 1px solid {isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};"
+      >
+        {#if searchable}
+          <div class="p-2" style="border-bottom: 1px solid {isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'};">
+            <input
+              type="text"
+              bind:value={search}
+              placeholder="Rechercher..."
+              class="w-full px-2.5 py-1.5 text-xs rounded-md outline-none"
+              style="background: {isDark ? 'rgba(255,255,255,0.05)' : '#f3f4f6'}; color: {isDark ? 'white' : '#111'};"
+            />
+          </div>
+        {/if}
+
+        <div class="max-h-60 overflow-y-auto py-1">
+          {#if filteredOptions.length === 0}
+            <div class="px-3 py-4 text-center text-xs {isDark ? 'text-gray-600' : 'text-gray-400'}">
+              Aucun resultat
+            </div>
+          {:else}
+            {#each filteredOptions as opt}
+              {@const isSelected = multiple ? values.includes(opt.value) : value === opt.value}
+              <button
+                type="button"
+                onclick={() => selectOption(opt)}
+                disabled={opt.disabled}
+                class="w-full flex items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors cursor-pointer
+                  {opt.disabled ? 'opacity-30 cursor-not-allowed' : ''}
+                  {isSelected && !isDark ? 'bg-gray-50 font-medium' : ''}
+                  {isSelected && isDark ? 'font-medium' : ''}"
+                style="color: {isDark ? (isSelected ? focusColor : 'rgba(255,255,255,0.8)') : (isSelected ? focusColor : '#374151')}; background: {isSelected ? `color-mix(in srgb, ${focusColor} 8%, transparent)` : 'transparent'};"
+                onmouseenter={(e) => { if (!opt.disabled) (e.currentTarget as HTMLElement).style.background = isDark ? 'rgba(255,255,255,0.05)' : '#f9fafb' }}
+                onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = isSelected ? `color-mix(in srgb, ${focusColor} 8%, transparent)` : 'transparent' }}
+              >
+                {#if multiple}
+                  <div
+                    class="w-4 h-4 shrink-0 rounded border flex items-center justify-center transition-colors"
+                    style="border-color: {isSelected ? focusColor : isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)'}; background: {isSelected ? focusColor : 'transparent'};"
+                  >
+                    {#if isSelected}
+                      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                    {/if}
+                  </div>
+                {/if}
+                <span class="flex-1 truncate">{opt.label}</span>
+                {#if !multiple && isSelected}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                {/if}
+              </button>
+            {/each}
+          {/if}
+        </div>
+      </div>
     {/if}
-    {#each options as opt}
-      <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
-    {/each}
-  </select>
+  </div>
 
   {#if error}
-    <p class="text-xs {theme.error}">{error}</p>
+    <p class="flex items-center gap-1.5 text-xs {isDark ? 'text-red-400' : 'text-[var(--karbon-danger)]'} {classes?.error ?? ''}">
+      {#if errorIcon}
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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>
+      {/if}
+      <span>{error}</span>
+    </p>
   {/if}
 </div>

package/src/form/Slider.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { SliderClasses, ButtonColor } from '@karbonjs/ui-core'
+
   interface Props {
     name: string
     value?: number
@@ -8,6 +10,8 @@
     label?: string
     showValue?: boolean
     disabled?: boolean
+    color?: ButtonColor
+    classes?: SliderClasses
     class?: string
     oninput?: (e: Event) => void
   }
@@ -21,21 +25,24 @@
     label = '',
     showValue = true,
     disabled = false,
+    color,
+    classes,
     class: className = '',
     oninput
   }: Props = $props()
 
   const percent = $derived(((value - min) / (max - min)) * 100)
+  const trackColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
 </script>
 
-<div class="space-y-2 {className}">
+<div class="space-y-2 {classes?.root ?? ''} {className}">
   {#if label || showValue}
     <div class="flex items-center justify-between">
       {#if label}
-        <label for={name} class="text-sm font-medium text-[var(--karbon-text,#1a1635)]">{label}</label>
+        <label for={name} class="text-sm font-medium text-[var(--karbon-text,#1a1635)] {classes?.label ?? ''}">{label}</label>
       {/if}
       {#if showValue}
-        <span class="text-sm font-semibold text-[var(--karbon-primary)] tabular-nums">{value}</span>
+        <span class="text-sm font-semibold tabular-nums {classes?.value ?? ''}" style="color: {trackColor}">{value}</span>
       {/if}
     </div>
   {/if}
@@ -51,12 +58,10 @@
     {disabled}
     {oninput}
     class="w-full h-2 rounded-full appearance-none cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed
-      bg-[linear-gradient(to_right,var(--karbon-primary)_{percent}%,var(--karbon-border,rgba(0,0,0,0.07))_{percent}%)]
       [&::-webkit-slider-thumb]:appearance-none
       [&::-webkit-slider-thumb]:w-4.5
       [&::-webkit-slider-thumb]:h-4.5
       [&::-webkit-slider-thumb]:rounded-full
-      [&::-webkit-slider-thumb]:bg-[var(--karbon-primary)]
       [&::-webkit-slider-thumb]:border-2
       [&::-webkit-slider-thumb]:border-white
       [&::-webkit-slider-thumb]:shadow-md
@@ -66,9 +71,19 @@
       [&::-moz-range-thumb]:w-4
       [&::-moz-range-thumb]:h-4
       [&::-moz-range-thumb]:rounded-full
-      [&::-moz-range-thumb]:bg-[var(--karbon-primary)]
       [&::-moz-range-thumb]:border-2
       [&::-moz-range-thumb]:border-white
-      [&::-moz-range-thumb]:shadow-md"
+      [&::-moz-range-thumb]:shadow-md
+      {classes?.input ?? ''}"
+    style="background: linear-gradient(to right, {trackColor} {percent}%, var(--karbon-border, rgba(0,0,0,0.07)) {percent}%); --thumb-color: {trackColor};"
   />
 </div>
+
+<style>
+  input[type="range"]::-webkit-slider-thumb {
+    background-color: var(--thumb-color, var(--karbon-primary));
+  }
+  input[type="range"]::-moz-range-thumb {
+    background-color: var(--thumb-color, var(--karbon-primary));
+  }
+</style>

package/src/form/Textarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FormVariant } from '@karbonjs/ui-core'
+  import type { FormVariant, FormInputVariant, TextareaClasses, ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     name: string
@@ -7,6 +7,7 @@
     placeholder?: string
     label?: string
     error?: string
+    errorIcon?: boolean
     rows?: number
     maxlength?: number
     showCount?: boolean
@@ -14,6 +15,9 @@
     disabled?: boolean
     readonly?: boolean
     variant?: FormVariant
+    inputVariant?: FormInputVariant
+    color?: ButtonColor
+    classes?: TextareaClasses
     class?: string
     oninput?: (e: Event) => void
   }
@@ -24,6 +28,7 @@
     placeholder = '',
     label = '',
     error = '',
+    errorIcon = true,
     rows = 4,
     maxlength,
     showCount = false,
@@ -31,32 +36,62 @@
     disabled = false,
     readonly = false,
     variant = 'dark',
+    inputVariant = 'outlined',
+    color,
+    classes,
     class: className = '',
     oninput
   }: Props = $props()
 
+  let focused = $state(false)
+
+  const focusColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+
   const themes = {
     dark: {
       label: 'text-[11px] font-medium text-gray-500 uppercase tracking-wider',
-      input: 'border-white/8 bg-white/3 text-white placeholder-gray-700 focus:border-[var(--karbon-primary)]/50 focus:bg-white/5 focus:ring-[3px] focus:ring-[var(--karbon-primary)]/8',
+      base: 'text-white placeholder-gray-700',
       error: 'text-red-400',
-      count: 'text-gray-600'
+      count: 'text-gray-600',
+      variants: {
+        outlined: 'border border-white/8 bg-white/3',
+        filled: 'border-0 bg-white/8',
+        underline: 'rounded-none bg-transparent'
+      }
     },
     light: {
       label: 'text-sm font-medium text-gray-700',
-      input: 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20',
+      base: 'text-gray-900 placeholder-gray-400',
       error: 'text-[var(--karbon-danger)]',
-      count: 'text-gray-400'
+      count: 'text-gray-400',
+      variants: {
+        outlined: 'border border-gray-300 bg-white',
+        filled: 'border-0 bg-gray-100',
+        underline: 'rounded-none bg-transparent'
+      }
     }
   } as const
 
   const theme = $derived(themes[variant])
+  const variantClass = $derived(theme.variants[inputVariant])
   const charCount = $derived(value.length)
+
+  const inlineStyle = $derived.by(() => {
+    let s = ''
+    if (inputVariant === 'underline') {
+      const bc = focused ? focusColor : error ? 'var(--karbon-danger)' : 'var(--karbon-border-input)'
+      s += `border:none;border-bottom:1px solid ${bc};border-radius:0;`
+      if (focused) s += 'box-shadow:none;'
+    } else if (focused) {
+      s += `border-color:${focusColor};box-shadow:0 0 0 3px color-mix(in srgb,${focusColor} 12%,transparent);`
+    }
+    return s
+  })
 </script>
 
-<div class="space-y-1.5 {className}">
+<div class="space-y-1.5 {classes?.root ?? ''} {className}">
   {#if label}
-    <label for={name} class="{theme.label} block mb-1.5">{label}</label>
+    <label for={name} class="{theme.label} block mb-1.5 {classes?.label ?? ''}">{label}</label>
   {/if}
 
   <textarea
@@ -70,17 +105,25 @@
     {disabled}
     {readonly}
     {oninput}
-    class="w-full rounded-lg border px-3 py-2.5 text-[13px] md:text-sm focus:outline-none transition-all resize-y {theme.input} {error ? 'border-red-500/50' : ''}"
+    onfocus={() => focused = true}
+    onblur={() => focused = false}
+    class="w-full {inputVariant !== 'underline' ? 'rounded-lg' : ''} px-3 py-2.5 text-[13px] md:text-sm focus:outline-none transition-all resize-y {theme.base} {variantClass} {error ? 'border-red-500/50' : ''} {disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : ''} {classes?.textarea ?? ''}"
+    style={inlineStyle}
   ></textarea>
 
   <div class="flex items-center justify-between">
     {#if error}
-      <p class="text-xs {theme.error}">{error}</p>
+      <p class="flex items-center gap-1.5 text-xs {theme.error} {classes?.error ?? ''}">
+        {#if errorIcon}
+          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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>
+        {/if}
+        <span>{error}</span>
+      </p>
     {:else}
       <span></span>
     {/if}
     {#if showCount && maxlength}
-      <span class="text-xs {theme.count}">{charCount}/{maxlength}</span>
+      <span class="text-xs {theme.count} {classes?.count ?? ''}">{charCount}/{maxlength}</span>
     {/if}
   </div>
 </div>

package/src/form/Toggle.svelte

@@ -1,48 +1,102 @@
 <script lang="ts">
-  import type { ToggleSize } from '@karbonjs/ui-core'
+  import type { ToggleClasses, ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     name: string
     checked?: boolean
     label?: string
-    size?: ToggleSize
+    description?: string
+    size?: 'sm' | 'md' | 'lg'
     disabled?: boolean
+    color?: ButtonColor
+    showIcons?: boolean
+    classes?: ToggleClasses
     class?: string
-    onchange?: (e: Event) => void
+    onchange?: (checked: boolean) => void
   }
 
   let {
     name,
     checked = $bindable(false),
     label = '',
+    description = '',
     size = 'md',
     disabled = false,
+    color,
+    showIcons = false,
+    classes,
     class: className = '',
     onchange
   }: Props = $props()
 
-  const sizes = {
-    sm: { track: 'w-8 h-[18px]', dot: 'h-3.5 w-3.5', translate: 'translate-x-3.5' },
-    md: { track: 'w-10 h-[22px]', dot: 'h-4.5 w-4.5', translate: 'translate-x-4.5' }
-  } as const
+  const trackColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
 
+  // pad = space between dot edge and track edge (both sides)
+  // translate = trackWidth - dotSize - (2 * pad)
+  const sizes = {
+    sm: { track: 'w-7 h-4', dot: 12, pad: 2, translate: 14, text: 'text-xs', desc: 'text-[11px]', iconSize: 7 },
+    md: { track: 'w-10 h-[22px]', dot: 16, pad: 3, translate: 19, text: 'text-sm', desc: 'text-xs', iconSize: 9 },
+    lg: { track: 'w-14 h-7', dot: 20, pad: 4, translate: 30, text: 'text-base', desc: 'text-sm', iconSize: 11 },
+  }
   const s = $derived(sizes[size])
+
+  function toggle() {
+    if (disabled) return
+    checked = !checked
+    onchange?.(checked)
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      toggle()
+    }
+  }
 </script>
 
-<label class="inline-flex items-center gap-2.5 {disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} {className}">
-  <input type="checkbox" {name} bind:checked {disabled} {onchange} class="sr-only peer" />
+<input type="hidden" {name} value={checked ? 'on' : ''} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="inline-flex items-center gap-2.5 {disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} {classes?.root ?? ''} {className}"
+  onclick={toggle}
+  onkeydown={handleKeydown}
+  role="switch"
+  aria-checked={checked}
+  aria-disabled={disabled}
+  tabindex={disabled ? -1 : 0}
+>
+  <!-- Track -->
   <span
-    class="relative inline-flex shrink-0 items-center rounded-full transition-colors duration-200
-      {s.track}
-      {checked ? 'bg-[var(--karbon-primary)]' : 'bg-[var(--karbon-border,rgba(0,0,0,0.07))]'}
-      peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--karbon-primary)]/20"
-    aria-hidden="true"
+    class="relative inline-flex shrink-0 items-center rounded-full transition-all duration-200 {s.track} {classes?.track ?? ''}"
+    style="background: {checked ? trackColor : 'var(--karbon-border, rgba(255,255,255,0.12))'};{checked ? `box-shadow: 0 0 8px color-mix(in srgb, ${trackColor} 30%, transparent);` : ''}"
   >
+    <!-- Icons inside track -->
+    {#if showIcons}
+      <span class="absolute left-1.5 top-1/2 -translate-y-1/2 transition-opacity duration-150 {checked ? 'opacity-100' : 'opacity-0'}">
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.iconSize} height={s.iconSize} viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+      </span>
+      <span class="absolute right-1.5 top-1/2 -translate-y-1/2 transition-opacity duration-150 {checked ? 'opacity-0' : 'opacity-50'}">
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.iconSize} height={s.iconSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </span>
+    {/if}
+
+    <!-- Dot -->
     <span
-      class="inline-block rounded-full bg-white shadow-sm transition-transform duration-200 {s.dot} {checked ? s.translate : 'translate-x-0.5'}"
+      class="inline-block rounded-full bg-white shadow-sm transition-transform duration-200 {classes?.dot ?? ''}"
+      style="width: {s.dot}px; height: {s.dot}px; transform: translateX({checked ? s.translate : s.pad}px);"
     ></span>
   </span>
-  {#if label}
-    <span class="text-sm font-medium text-[var(--karbon-text,#1a1635)] select-none">{label}</span>
+
+  <!-- Label + description -->
+  {#if label || description}
+    <div class="select-none min-w-0">
+      {#if label}
+        <span class="{s.text} font-medium text-[var(--karbon-text)] {classes?.label ?? ''}">{label}</span>
+      {/if}
+      {#if description}
+        <p class="{s.desc} text-[var(--karbon-text-3)] mt-0.5 leading-relaxed">{description}</p>
+      {/if}
+    </div>
   {/if}
-</label>
+</div>