seblify 0.2.0 → 0.3.0

package/dist/components/action/input/select/switch/Switch.svelte

@@ -1,51 +1,634 @@
 <script lang="ts">
-  import type { SeblifyProps } from 'seblify';
+  import type { SeblifyProps, CustomCssSize } from 'seblify';
+  import { CircleOutlineIcon, HandleGripIcon, MinusIcon } from 'seblify/icons';
+
+  type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+  type SwitchAnimation = 'smooth' | 'bouncy';
+  type SwitchOrientation = 'horizontal' | 'vertical';
+  type SwitchShape = 'pill' | 'floating' | 'line' | 'flat' | 'long';
+  type SwitchSize =
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+  type SwitchTone =
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+  type SwitchVariant = 'solid' | 'soft' | 'tint' | 'outline';
 
   type Props = SeblifyProps<{
+    animation?: SwitchAnimation;
+    ariaLabel?: string;
     checked?: boolean;
+    description?: string;
     disabled?: boolean;
+    duration?: number;
+    focusTone?: SwitchTone;
     label?: string;
-    description?: string;
     name?: string;
+    orientation?: SwitchOrientation;
+    radius?: SwitchRadius;
+    shape?: SwitchShape;
+    showGripIcon?: boolean;
+    showTrackIcon?: boolean;
+    size?: SwitchSize;
+    tone?: SwitchTone;
     value?: string;
+    variant?: SwitchVariant;
   }>;
 
+  const SWITCH_SIZE_MAP: Record<Exclude<SwitchSize, CustomCssSize>, string> = {
+    xxs: '1rem',
+    xs: '1.125rem',
+    sm: '1.25rem',
+    md: '1.5rem',
+    lg: '1.75rem',
+    xl: '2rem',
+    xxl: '2.25rem',
+  };
+
+  const SWITCH_RADIUS_MAP: Record<
+    Exclude<SwitchRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: 'calc(var(--switch-size) * 0.1666667)',
+    md: 'calc(var(--switch-size) * 0.25)',
+    lg: 'calc(var(--switch-size) * 0.3333333)',
+    full: '999px',
+  };
+
+  function resolveSizeValue(size: SwitchSize): string {
+    if (typeof size === 'number') {
+      return `${size}px`;
+    }
+
+    return SWITCH_SIZE_MAP[size as keyof typeof SWITCH_SIZE_MAP] ?? size;
+  }
+
+  function resolveRadiusValue(radius: SwitchRadius): string {
+    if (typeof radius === 'number') {
+      return `${radius}px`;
+    }
+
+    return (
+      SWITCH_RADIUS_MAP[radius as keyof typeof SWITCH_RADIUS_MAP] ?? radius
+    );
+  }
+
+  function resolveDurationNumber(duration: number): number {
+    if (!Number.isFinite(duration)) {
+      return 0;
+    }
+
+    return Math.max(0, duration);
+  }
+
+  function resolveDurationValue(duration: number): string {
+    return `${resolveDurationNumber(duration)}ms`;
+  }
+
+  function supportsThumbGrip(shape: SwitchShape): boolean {
+    return shape === 'pill' || shape === 'floating' || shape === 'line';
+  }
+
+  function supportsTrackIcons(shape: SwitchShape): boolean {
+    return shape !== 'line';
+  }
+
+  function resolveGripIconSize(shape: SwitchShape): string {
+    return shape === 'floating' || shape === 'line' ? '1em' : '0.75em';
+  }
+
+  const BOUNCY_MOTION_CLEAR_BUFFER = 80;
+  const switchId = $props.id();
+
   let {
     checked = $bindable(false),
+    animation = 'smooth',
+    ariaLabel,
+    description,
     disabled = false,
+    duration = 190,
+    focusTone,
     label,
-    description,
     name,
+    orientation = 'horizontal',
+    radius = 'full',
+    shape = 'pill',
+    showGripIcon = false,
+    showTrackIcon = false,
+    size = 'md',
+    tone,
     value,
+    variant = 'solid',
   }: Props = $props();
+  let bouncyMotion: 'none' | 'to-on' | 'to-off' = $state('none');
+  let previousChecked = checked;
+  let hasMounted = false;
+
+  const sizeValue = $derived(resolveSizeValue(size));
+  const radiusValue = $derived(resolveRadiusValue(radius));
+  const resolvedDuration = $derived(resolveDurationNumber(duration));
+  const durationValue = $derived(resolveDurationValue(duration));
+  const labelId = $derived(label ? `${switchId}-label` : undefined);
+  const descriptionId = $derived(
+    description ? `${switchId}-description` : undefined,
+  );
+  const showContent = $derived(Boolean(label || description));
+  const showThumbGrip = $derived(showGripIcon && supportsThumbGrip(shape));
+  const showTrackIcons = $derived(showTrackIcon && supportsTrackIcons(shape));
+  const gripIconSize = $derived(resolveGripIconSize(shape));
+  const onTrackIconSize = $derived(shape === 'pill' ? '0.95em' : '0.75em');
+  const offTrackIconSize = $derived(shape === 'pill' ? '0.9em' : '0.7em');
+
+  $effect(() => {
+    const currentChecked = checked;
+    const canBounce = animation === 'bouncy' && resolvedDuration > 0;
+
+    if (!hasMounted) {
+      hasMounted = true;
+      previousChecked = currentChecked;
+      bouncyMotion = 'none';
+      return;
+    }
+
+    if (!canBounce) {
+      previousChecked = currentChecked;
+      bouncyMotion = 'none';
+      return;
+    }
+
+    if (currentChecked !== previousChecked) {
+      bouncyMotion = currentChecked ? 'to-on' : 'to-off';
+      previousChecked = currentChecked;
+    }
+
+    const activeMotion = bouncyMotion;
+
+    if (activeMotion === 'none') {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      if (bouncyMotion === activeMotion) {
+        bouncyMotion = 'none';
+      }
+    }, resolvedDuration + BOUNCY_MOTION_CLEAR_BUFFER);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  });
+
+  function handleThumbAnimationEnd() {
+    if (animation === 'bouncy') {
+      bouncyMotion = 'none';
+    }
+  }
 </script>
 
-<label class:disabled class="switch">
-  <input bind:checked {disabled} {name} role="switch" type="checkbox" {value} />
+<label
+  class:disabled
+  class="switch seblify-tone-context"
+  data-animation={animation}
+  data-bouncy-motion={bouncyMotion}
+  data-focus-tone={focusTone ?? tone ?? 'inherit'}
+  data-orientation={orientation}
+  data-seblify-tone={tone ?? 'inherit'}
+  data-shape={shape}
+  data-variant={variant}
+  style:--switch-size={sizeValue}
+  style:--switch-radius={radiusValue}
+  style:--switch-duration={durationValue}
+>
+  <input
+    aria-describedby={descriptionId}
+    aria-label={labelId ? undefined : ariaLabel}
+    aria-labelledby={labelId}
+    bind:checked
+    {disabled}
+    {name}
+    role="switch"
+    type="checkbox"
+    {value}
+  />
   <span class="control" aria-hidden="true">
-    <span class="thumb"></span>
-  </span>
-  <span class="content">
-    {#if label}
-      <span class="label">{label}</span>
-    {/if}
-    {#if description}
-      <span class="description">{description}</span>
+    {#if showTrackIcons}
+      <span class="track-icons">
+        <span class="track-icon track-icon--on">
+          <MinusIcon size={onTrackIconSize} />
+        </span>
+        <span class="track-icon track-icon--off">
+          <CircleOutlineIcon size={offTrackIconSize} />
+        </span>
+      </span>
     {/if}
+    <span class="thumb" onanimationend={handleThumbAnimationEnd}>
+      {#if showThumbGrip}
+        <span class="thumb-grip">
+          <HandleGripIcon size={gripIconSize} />
+        </span>
+      {/if}
+    </span>
   </span>
+  {#if showContent}
+    <span class="content">
+      {#if label}
+        <span class="label" id={labelId}>{label}</span>
+      {/if}
+      {#if description}
+        <span class="description" id={descriptionId}>{description}</span>
+      {/if}
+    </span>
+  {/if}
 </label>
 
-<style>
-  .switch {
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+/* Base */
+
+.switch {
+    --switch-track-width: calc(var(--switch-size) * 1.75);
+    --switch-track-height: var(--switch-size);
+    --switch-border-width: 1px;
+    --switch-padding: max(1px, calc(var(--switch-size) * 0.0833333));
+    --switch-radius-inset: calc(
+      var(--switch-border-width) + var(--switch-padding)
+    );
+    --switch-thumb-size: calc(
+      var(--switch-track-height) - 2 * var(--switch-radius-inset)
+    );
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: var(--switch-thumb-size);
+    --switch-thumb-travel: calc(
+      var(--switch-track-width) - var(--switch-thumb-width) - 2 *
+        var(--switch-radius-inset)
+    );
+    --switch-thumb-position-off: 0px;
+    --switch-thumb-position-on: var(--switch-thumb-travel);
+    --switch-thumb-transform-off: translateX(var(--switch-thumb-position-off));
+    --switch-thumb-transform-on: translateX(var(--switch-thumb-position-on));
+    --switch-thumb-radius: max(
+      0px,
+      min(
+        max(1px, calc(var(--switch-radius) - var(--switch-radius-inset))),
+        var(--switch-radius)
+      )
+    );
+    --switch-solid-border: var(--seblify-tone-fill);
+    --switch-solid-surface: var(--seblify-tone-fill);
+    --switch-focus-tone-fill: var(--seblify-tone-fill);
+    --switch-solid-thumb: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 8%,
+      var(--seblify-color-surface, #ffffff)
+    );
+    --switch-soft-border: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 22%,
+      var(--seblify-color-border, #c8d2df)
+    );
+    --switch-soft-surface: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 14%,
+      var(--seblify-color-surface, #ffffff)
+    );
+    --switch-soft-thumb: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 78%,
+      var(--seblify-color-surface, #ffffff)
+    );
+    --switch-outline-border: var(--seblify-tone-fill);
+    --switch-outline-surface: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 7%,
+      var(--seblify-color-surface, #ffffff)
+    );
+    --switch-outline-thumb: var(--seblify-tone-fill);
+    --switch-off-border: var(--seblify-color-border-strong, #aab7c5);
+    --switch-off-surface: var(--seblify-color-surface-muted, #d9e0e8);
+    --switch-off-thumb: var(--seblify-color-surface, #ffffff);
+    --switch-thumb-shadow: var(
+      --seblify-shadow-control,
+      0 1px 3px rgb(16 24 40 / 24%)
+    );
+    --switch-on-border: var(--switch-solid-border);
+    --switch-on-surface: var(--switch-solid-surface);
+    --switch-on-thumb-base: var(--switch-solid-thumb);
+    --switch-on-thumb: var(--switch-on-thumb-base);
+    --switch-track-icon-offset: calc(
+      var(--switch-radius-inset) + var(--switch-thumb-size) * 0.18
+    );
+    --switch-bouncy-runup: max(1px, calc(var(--switch-thumb-size) * 0.1));
+    --switch-bouncy-overshoot: max(1px, calc(var(--switch-thumb-size) * 0.07));
+    --switch-thumb-motion-duration: var(--switch-duration);
+    --switch-thumb-motion-timing: cubic-bezier(0.32, 0.72, 0, 1);
+    --switch-state-duration: var(--switch-duration);
+    --switch-state-timing: ease;
+    --switch-track-icon-on-color: color-mix(
+      in srgb,
+      var(--seblify-tone-fill-text, #ffffff) 48%,
+      transparent
+    );
+    --switch-track-icon-off-color: color-mix(
+      in srgb,
+      var(--seblify-color-text-muted, #516176) 42%,
+      transparent
+    );
+    --switch-focus-ring-color: color-mix(
+      in srgb,
+      var(--switch-focus-tone-fill) 56%,
+      transparent
+    );
+
     position: relative;
     display: inline-flex;
-    gap: 12px;
+    gap: max(0.5rem, calc(var(--switch-size) * 0.5));
     align-items: flex-start;
     color: var(--seblify-color-text, #172033);
     cursor: pointer;
   }
 
-  input {
+/* Tone */
+
+.switch[data-seblify-tone='inherit'] {
+    --seblify-tone-fill: var(
+      --seblify-current-tone-fill,
+      var(--seblify-color-fill-neutral, #5b6675)
+    );
+    --seblify-tone-fill-text: var(
+      --seblify-current-tone-fill-text,
+      var(--seblify-color-fill-neutral-text, #ffffff)
+    );
+    --seblify-tone-surface: var(
+      --seblify-current-tone-surface,
+      var(--seblify-color-surface-neutral, #f4f6f8)
+    );
+    --seblify-tone-text: var(
+      --seblify-current-tone-text,
+      var(--seblify-color-fill-neutral, #5b6675)
+    );
+    --seblify-tone-border: var(
+      --seblify-current-tone-border,
+      var(--seblify-color-border-neutral, #c5ccd6)
+    );
+  }
+
+.switch[data-focus-tone='inherit'] {
+    --switch-focus-tone-fill: var(--seblify-tone-fill);
+  }
+
+.switch[data-focus-tone='neutral'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  }
+
+.switch[data-focus-tone='primary'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  }
+
+.switch[data-focus-tone='secondary'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  }
+
+.switch[data-focus-tone='success'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  }
+
+.switch[data-focus-tone='danger'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  }
+
+.switch[data-focus-tone='warning'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  }
+
+.switch[data-focus-tone='info'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  }
+
+.switch[data-focus-tone='inverse'] {
+    --switch-focus-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  }
+
+/* Motion */
+
+.switch[data-animation='bouncy'] {
+    --switch-thumb-motion-timing: cubic-bezier(0.24, 1.18, 0.4, 1);
+    --switch-state-timing: ease;
+  }
+
+@keyframes switch-bouncy-to-on {
+    0% {
+      transform: translateX(var(--switch-thumb-position-off));
+    }
+
+    20% {
+      transform: translateX(
+        calc(var(--switch-thumb-position-off) - var(--switch-bouncy-runup))
+      );
+    }
+
+    76% {
+      transform: translateX(
+        calc(var(--switch-thumb-position-on) + var(--switch-bouncy-overshoot))
+      );
+    }
+
+    100% {
+      transform: translateX(var(--switch-thumb-position-on));
+    }
+  }
+
+@keyframes switch-bouncy-to-off {
+    0% {
+      transform: translateX(var(--switch-thumb-position-on));
+    }
+
+    20% {
+      transform: translateX(
+        calc(var(--switch-thumb-position-on) + var(--switch-bouncy-runup))
+      );
+    }
+
+    76% {
+      transform: translateX(
+        calc(var(--switch-thumb-position-off) - var(--switch-bouncy-overshoot))
+      );
+    }
+
+    100% {
+      transform: translateX(var(--switch-thumb-position-off));
+    }
+  }
+
+@keyframes switch-bouncy-vertical-to-on {
+    0% {
+      transform: translateY(var(--switch-thumb-position-off));
+    }
+
+    20% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-off) - var(--switch-bouncy-runup))
+      );
+    }
+
+    76% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-on) + var(--switch-bouncy-overshoot))
+      );
+    }
+
+    100% {
+      transform: translateY(var(--switch-thumb-position-on));
+    }
+  }
+
+@keyframes switch-bouncy-vertical-to-off {
+    0% {
+      transform: translateY(var(--switch-thumb-position-on));
+    }
+
+    20% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-on) + var(--switch-bouncy-runup))
+      );
+    }
+
+    76% {
+      transform: translateY(
+        calc(var(--switch-thumb-position-off) - var(--switch-bouncy-overshoot))
+      );
+    }
+
+    100% {
+      transform: translateY(var(--switch-thumb-position-off));
+    }
+  }
+
+input {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -56,66 +639,395 @@
     white-space: nowrap;
   }
 
-  .control {
+/* Structure */
+
+.control {
+    position: relative;
     display: inline-flex;
-    width: 42px;
-    height: 24px;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
     flex: 0 0 auto;
     align-items: center;
-    border: 1px solid var(--seblify-color-border-strong, #aab7c5);
-    border-radius: 999px;
-    background: var(--seblify-color-surface-muted, #d9e0e8);
-    padding: 2px;
+    border: var(--switch-border-width) solid var(--switch-off-border);
+    border-radius: var(--switch-radius);
+    background: var(--switch-off-surface);
+    padding: var(--switch-padding);
+    box-sizing: border-box;
     transition:
-      border-color 160ms ease,
-      background 160ms ease;
+      border-color var(--switch-state-duration) var(--switch-state-timing),
+      background var(--switch-state-duration) var(--switch-state-timing);
+  }
+
+.track-icons {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+.track-icon {
+    position: absolute;
+    top: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    transform: translateY(-50%);
+    transition: opacity var(--switch-state-duration) var(--switch-state-timing);
+  }
+
+.track-icon--on {
+    left: var(--switch-track-icon-offset);
+    color: var(--switch-track-icon-on-color);
+    opacity: 0;
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+.track-icon--off {
+    right: var(--switch-track-icon-offset);
+    color: var(--switch-track-icon-off-color);
+    opacity: 1;
+  }
+
+.thumb {
+    display: inline-flex;
+    width: var(--switch-thumb-width);
+    height: var(--switch-thumb-height);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--switch-thumb-radius);
+    background: var(--switch-off-thumb);
+    box-sizing: border-box;
+    box-shadow: var(--switch-thumb-shadow);
+    color: color-mix(
+      in srgb,
+      var(--seblify-color-text-muted, #516176) 36%,
+      transparent
+    );
+    transform: var(--switch-thumb-transform-off);
+    transition:
+      transform var(--switch-thumb-motion-duration)
+        var(--switch-thumb-motion-timing),
+      background var(--switch-state-duration) var(--switch-state-timing),
+      box-shadow var(--switch-state-duration) var(--switch-state-timing),
+      color var(--switch-state-duration) var(--switch-state-timing);
+  }
+
+/* Shapes */
+
+.switch[data-shape='floating'],
+  .switch[data-shape='line'] {
+    --switch-track-height: calc(var(--switch-size) * 0.6666667);
+    --switch-padding: 0px;
+    --switch-radius-inset: var(--switch-border-width);
+    --switch-thumb-size: var(--switch-size);
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-travel: calc(
+      var(--switch-track-width) - var(--switch-thumb-width)
+    );
+    --switch-thumb-position-off: calc(-2 * var(--switch-border-width));
+    --switch-thumb-position-on: var(--switch-thumb-travel);
+    --switch-thumb-radius: max(
+      1px,
+      min(var(--switch-radius), calc(var(--switch-thumb-size) / 2))
+    );
+    --switch-off-thumb: var(--switch-on-thumb-base);
+    --switch-on-thumb: color-mix(
+      in srgb,
+      var(--switch-on-thumb-base) 72%,
+      white
+    );
+    --switch-thumb-shadow:
+      0 4px 10px rgb(16 24 40 / 18%), 0 1px 3px rgb(16 24 40 / 18%);
+  }
+
+.switch[data-shape='pill'] {
+    --switch-track-icon-offset: calc(
+      var(--switch-radius-inset) + var(--switch-thumb-size) * 0.08
+    );
+  }
+
+.switch[data-shape='line'] {
+    --switch-track-height: calc(var(--switch-size) * 0.3333333);
+  }
+
+.switch[data-shape='floating'] .track-icon--on,
+  .switch[data-shape='floating'] .track-icon--off {
+    top: 50%;
+  }
+
+.switch[data-shape='flat'],
+  .switch[data-shape='long'] {
+    --switch-track-height: calc(var(--switch-size) * 0.75);
+    --switch-padding: max(1px, calc(var(--switch-size) * 0.0833333));
+    --switch-radius-inset: calc(
+      var(--switch-border-width) + var(--switch-padding)
+    );
+    --switch-thumb-size: calc(
+      var(--switch-track-height) - 2 * var(--switch-radius-inset)
+    );
+    --switch-thumb-width: calc(var(--switch-thumb-size) * 1.55);
+    --switch-thumb-travel: calc(
+      var(--switch-track-width) - var(--switch-thumb-width) - 2 *
+        var(--switch-radius-inset)
+    );
+    --switch-thumb-radius: 999px;
+  }
+
+.switch[data-shape='long'] {
+    --switch-thumb-width: var(--switch-thumb-size);
+  }
+
+/* Orientation */
+
+.switch[data-orientation='vertical'] {
+    --switch-track-width: var(--switch-size);
+    --switch-track-height: calc(var(--switch-size) * 1.75);
+    --switch-thumb-size: calc(
+      var(--switch-track-width) - 2 * var(--switch-radius-inset)
+    );
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: var(--switch-thumb-size);
+    --switch-thumb-travel: calc(
+      var(--switch-track-height) - var(--switch-thumb-height) - 2 *
+        var(--switch-radius-inset)
+    );
+    --switch-thumb-position-off: var(--switch-thumb-travel);
+    --switch-thumb-position-on: 0px;
+    --switch-thumb-transform-off: translateY(var(--switch-thumb-position-off));
+    --switch-thumb-transform-on: translateY(var(--switch-thumb-position-on));
+    --switch-track-icon-offset: calc(
+      var(--switch-radius-inset) + var(--switch-thumb-size) * 0.08
+    );
+  }
+
+.switch[data-orientation='vertical'] .control {
+    flex-direction: column;
+  }
+
+.switch[data-orientation='vertical'][data-shape='flat'],
+  .switch[data-orientation='vertical'][data-shape='long'] {
+    --switch-track-width: calc(var(--switch-size) * 0.75);
+    --switch-track-height: calc(var(--switch-size) * 1.75);
+    --switch-thumb-size: calc(
+      var(--switch-track-width) - 2 * var(--switch-radius-inset)
+    );
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: calc(var(--switch-thumb-size) * 1.55);
+  }
+
+.switch[data-orientation='vertical'][data-shape='long'] {
+    --switch-thumb-height: var(--switch-thumb-size);
+  }
+
+.switch[data-orientation='vertical'][data-shape='floating'],
+  .switch[data-orientation='vertical'][data-shape='line'] {
+    --switch-track-width: calc(var(--switch-size) * 0.6666667);
+    --switch-track-height: calc(var(--switch-size) * 1.75);
+    --switch-padding: 0px;
+    --switch-radius-inset: var(--switch-border-width);
+    --switch-thumb-size: var(--switch-size);
+    --switch-thumb-width: var(--switch-thumb-size);
+    --switch-thumb-height: var(--switch-thumb-size);
+    --switch-thumb-travel: calc(
+      var(--switch-track-height) - var(--switch-thumb-height)
+    );
+    --switch-thumb-position-off: var(--switch-thumb-travel);
+    --switch-thumb-position-on: calc(-2 * var(--switch-border-width));
   }
 
-  .thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 999px;
-    background: var(--seblify-color-surface, #ffffff);
-    box-shadow: var(--seblify-shadow-control, 0 1px 3px rgb(16 24 40 / 24%));
-    transition: transform 160ms ease;
+.switch[data-orientation='vertical'][data-shape='line'] {
+    --switch-track-width: calc(var(--switch-size) * 0.3333333);
   }
 
-  input:checked + .control {
-    border-color: var(--seblify-color-fill-accent, #146a6f);
-    background: var(--seblify-color-fill-accent, #146a6f);
+.switch[data-orientation='vertical'] .track-icon {
+    left: 50%;
+    transform: translateX(-50%);
   }
 
-  input:checked + .control .thumb {
-    background: var(--seblify-color-fill-accent-text, #ffffff);
+.switch[data-orientation='vertical'] .track-icon--on {
+    top: var(--switch-track-icon-offset);
+    transform: translateX(-50%) rotate(90deg);
   }
 
-  input:checked + .control .thumb {
-    transform: translateX(18px);
+.switch[data-orientation='vertical'] .track-icon--off {
+    top: auto;
+    right: auto;
+    bottom: var(--switch-track-icon-offset);
+  }
+
+/* States */
+
+input:checked + .control {
+    border-color: var(--switch-on-border);
+    background: var(--switch-on-surface);
+  }
+
+input:checked + .control .thumb {
+    background: var(--switch-on-thumb);
+  }
+
+input:checked + .control .track-icon--on {
+    opacity: 1;
+  }
+
+input:checked + .control .track-icon--off {
+    opacity: 0;
+  }
+
+input:checked + .control .thumb {
+    color: color-mix(
+      in srgb,
+      var(--seblify-color-text, #172033) 32%,
+      transparent
+    );
+  }
+
+input:checked + .control .thumb {
+    transform: var(--switch-thumb-transform-on);
+  }
+
+.thumb-grip {
+    display: inline-flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+.switch[data-shape='floating'] .control,
+  .switch[data-shape='line'] .control {
+    overflow: visible;
+  }
+
+/* Animation selectors */
+
+.switch[data-orientation='horizontal'][data-animation='bouncy'][data-bouncy-motion='to-on']
+    .thumb {
+    animation: switch-bouncy-to-on var(--switch-thumb-motion-duration)
+      var(--switch-thumb-motion-timing);
+  }
+
+.switch[data-orientation='horizontal'][data-animation='bouncy'][data-bouncy-motion='to-off']
+    .thumb {
+    animation: switch-bouncy-to-off var(--switch-thumb-motion-duration)
+      var(--switch-thumb-motion-timing);
+  }
+
+.switch[data-orientation='vertical'][data-animation='bouncy'][data-bouncy-motion='to-on']
+    .thumb {
+    animation: switch-bouncy-vertical-to-on var(--switch-thumb-motion-duration)
+      var(--switch-thumb-motion-timing);
+  }
+
+.switch[data-orientation='vertical'][data-animation='bouncy'][data-bouncy-motion='to-off']
+    .thumb {
+    animation: switch-bouncy-vertical-to-off var(--switch-thumb-motion-duration)
+      var(--switch-thumb-motion-timing);
+  }
+
+/* Variants */
+
+.switch[data-variant='soft'] {
+    --switch-on-border: var(--switch-soft-border);
+    --switch-on-surface: var(--switch-soft-surface);
+    --switch-on-thumb-base: var(--switch-soft-thumb);
+    --switch-on-thumb: var(--switch-on-thumb-base);
+  }
+
+.switch[data-variant='tint'] {
+    --switch-off-border: var(--switch-soft-border);
+    --switch-off-surface: var(--switch-soft-surface);
+    --switch-off-thumb: var(--switch-soft-thumb);
+  }
+
+.switch[data-variant='outline'] {
+    --switch-off-border: var(--seblify-color-border-strong, #aab7c5);
+    --switch-off-surface: var(--seblify-color-surface, #ffffff);
+    --switch-off-thumb: var(--switch-off-border);
+    --switch-on-border: var(--switch-outline-border);
+    --switch-on-surface: var(--switch-outline-surface);
+    --switch-on-thumb-base: var(--switch-outline-thumb);
+    --switch-on-thumb: var(--switch-on-thumb-base);
+    --switch-track-icon-on-color: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 48%,
+      transparent
+    );
+  }
+
+/* Color schemes */
+
+:global([data-theme='dark']) .switch {
+    --switch-solid-thumb: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 18%,
+      var(--seblify-color-surface, #ffffff)
+    );
+    --switch-soft-thumb: var(--seblify-tone-fill);
+  }
+
+:global([data-theme='dark']) .switch[data-shape='floating'],
+  :global([data-theme='dark']) .switch[data-shape='line'] {
+    --switch-off-thumb: var(--seblify-color-surface-hover, #253241);
+    --switch-thumb-shadow:
+      0 6px 14px rgb(0 0 0 / 34%), 0 2px 5px rgb(0 0 0 / 28%);
+  }
+
+@media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme])) .switch {
+      --switch-solid-thumb: color-mix(
+        in srgb,
+        var(--seblify-tone-fill) 18%,
+        var(--seblify-color-surface, #ffffff)
+      );
+      --switch-soft-thumb: var(--seblify-tone-fill);
+    }
+
+    :global(:root:not([data-theme])) .switch[data-shape='floating'],
+    :global(:root:not([data-theme])) .switch[data-shape='line'] {
+      --switch-off-thumb: var(--seblify-color-surface-hover, #253241);
+      --switch-thumb-shadow:
+        0 6px 14px rgb(0 0 0 / 34%), 0 2px 5px rgb(0 0 0 / 28%);
+    }
+  }
+
+@media (prefers-reduced-motion: reduce) {
+    .switch {
+      --switch-thumb-motion-duration: 0ms;
+      --switch-thumb-motion-timing: linear;
+      --switch-state-duration: 0ms;
+      --switch-state-timing: linear;
+    }
+
+    .switch[data-animation='bouncy'] .thumb {
+      animation: none;
+    }
   }
 
-  input:focus-visible + .control {
-    outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
+input:focus-visible + .control {
+    outline: 3px solid var(--switch-focus-ring-color);
     outline-offset: 2px;
   }
 
-  .content {
+.content {
     display: grid;
     gap: 2px;
     min-width: 0;
   }
 
-  .label {
+.label {
     font-weight: 700;
     line-height: 1.35;
   }
 
-  .description {
+.description {
     color: var(--seblify-color-text-muted, #516176);
     font-size: 0.875rem;
     line-height: 1.45;
   }
 
-  .disabled {
+.disabled {
     cursor: not-allowed;
     opacity: var(--seblify-opacity-disabled, 0.56);
   }