seblify 0.2.1 → 0.4.0

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

@@ -3,7 +3,8 @@
   import { CircleOutlineIcon, HandleGripIcon, MinusIcon } from 'seblify/icons';
 
   type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
-  type SwitchAnimation = 'smooth' | 'snappy' | 'bouncy';
+  type SwitchAnimation = 'smooth' | 'bouncy';
+  type SwitchOrientation = 'horizontal' | 'vertical';
   type SwitchShape = 'pill' | 'floating' | 'line' | 'flat' | 'long';
   type SwitchSize =
     | 'xxs'
@@ -17,20 +18,24 @@
   type SwitchTone =
     | 'neutral'
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'danger'
     | 'warning'
-    | 'info'
-    | 'inverse';
-  type SwitchVariant = 'solid' | 'soft' | 'tint';
+    | 'info';
+  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;
     name?: string;
+    orientation?: SwitchOrientation;
     radius?: SwitchRadius;
     shape?: SwitchShape;
     showGripIcon?: boolean;
@@ -80,13 +85,44 @@
     );
   }
 
+  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,
     name,
+    orientation = 'horizontal',
     radius = 'full',
     shape = 'pill',
     showGripIcon = false,
@@ -102,31 +138,56 @@
 
   const sizeValue = $derived(resolveSizeValue(size));
   const radiusValue = $derived(resolveRadiusValue(radius));
-  const showThumbGrip = $derived(
-    showGripIcon &&
-      (shape === 'pill' || shape === 'floating' || shape === 'line'),
-  );
-  const showTrackIcons = $derived(showTrackIcon && shape !== 'line');
-  const gripIconSize = $derived(
-    shape === 'floating' || shape === 'line' ? '1em' : '0.75em',
+  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 =
-        animation === 'bouncy' ? (currentChecked ? 'to-on' : 'to-off') : 'none';
+      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() {
@@ -141,13 +202,26 @@
   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 bind:checked {disabled} {name} role="switch" type="checkbox" {value} />
+  <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">
     {#if showTrackIcons}
       <span class="track-icons">
@@ -167,111 +241,725 @@
       {/if}
     </span>
   </span>
-  <span class="content">
-    {#if label}
-      <span class="label">{label}</span>
-    {/if}
-    {#if description}
-      <span class="description">{description}</span>
-    {/if}
-  </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>: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);
+  --seblify-tone-fill: var(--seblify-color-neutral-fill, #6f5f55);
+  --seblify-tone-fill-hover: var(--seblify-color-neutral-fill-hover, #5b4d45);
+  --seblify-tone-fill-text: var(--seblify-color-neutral-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-neutral-surface, #f2ebe4);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-neutral-surface-hover,
+    #ebe1d8
+  );
+  --seblify-tone-text: var(--seblify-color-neutral-text, #6f5f55);
+  --seblify-tone-border: var(--seblify-color-neutral-border, #ded0c4);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-neutral-derived-surface,
+    var(--seblify-color-surface-muted, #f2ebe4)
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-neutral-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-neutral-fill, #6f5f55) 22%,
+      var(--seblify-color-border-strong, #c5afa0) 78%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-neutral-derived-text,
+    var(--seblify-color-text-subtle, #8b7a70)
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-neutral-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 10%,
+      var(--seblify-color-surface-inverse, #15110f) 90%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-neutral-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 16%,
+      var(--seblify-color-surface-inverse, #15110f) 84%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-neutral-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-neutral-on-inverse-border,
+    var(--seblify-color-border-inverse, #4a3b32)
+  );
+  --seblify-tone-control-fill: var(--seblify-tone-fill);
+  --seblify-tone-control-fill-hover: var(--seblify-tone-fill-hover);
+  --seblify-tone-control-fill-text: var(--seblify-tone-fill-text);
+  --seblify-tone-control-surface: var(--seblify-tone-surface);
+  --seblify-tone-control-surface-hover: var(--seblify-tone-surface-hover);
+  --seblify-tone-control-default-text: var(--seblify-color-text, #211916);
+  --seblify-tone-control-text: var(--seblify-tone-text);
+  --seblify-tone-control-border: var(--seblify-tone-border);
+  --seblify-tone-control-derived-surface: var(--seblify-tone-derived-surface);
+  --seblify-tone-control-derived-border: var(--seblify-tone-derived-border);
+  --seblify-tone-control-derived-text: var(--seblify-tone-derived-text);
 }
 
 :where(.seblify-tone-context[data-seblify-tone='inherit']) {
   --seblify-tone-fill: var(
     --seblify-current-tone-fill,
-    var(--seblify-color-fill-neutral, #516176)
+    var(--seblify-color-neutral-fill, #6f5f55)
+  );
+  --seblify-tone-fill-hover: var(
+    --seblify-current-tone-fill-hover,
+    var(--seblify-color-neutral-fill-hover, #5b4d45)
   );
   --seblify-tone-fill-text: var(
     --seblify-current-tone-fill-text,
-    var(--seblify-color-fill-neutral-text, #ffffff)
+    var(--seblify-color-neutral-fill-text, #fff4e7)
   );
   --seblify-tone-surface: var(
     --seblify-current-tone-surface,
-    var(--seblify-color-surface-muted, #d9e0e8)
+    var(--seblify-color-neutral-surface, #f2ebe4)
+  );
+  --seblify-tone-surface-hover: var(
+    --seblify-current-tone-surface-hover,
+    var(--seblify-color-neutral-surface-hover, #ebe1d8)
   );
   --seblify-tone-text: var(
     --seblify-current-tone-text,
-    var(--seblify-color-text-muted, #516176)
+    var(--seblify-color-neutral-text, #6f5f55)
   );
   --seblify-tone-border: var(
     --seblify-current-tone-border,
-    var(--seblify-color-border, #c8d2df)
+    var(--seblify-color-neutral-border, #ded0c4)
+  );
+  --seblify-tone-derived-surface: var(
+    --seblify-current-tone-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-current-tone-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-current-tone-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-current-tone-on-inverse-surface,
+    var(
+      --seblify-color-neutral-on-inverse-surface,
+      color-mix(
+        in srgb,
+        var(--seblify-color-text-inverse, #fff4e7) 10%,
+        var(--seblify-color-surface-inverse, #15110f) 90%
+      )
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-current-tone-on-inverse-surface-hover,
+    var(
+      --seblify-color-neutral-on-inverse-surface-hover,
+      color-mix(
+        in srgb,
+        var(--seblify-color-text-inverse, #fff4e7) 16%,
+        var(--seblify-color-surface-inverse, #15110f) 84%
+      )
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-current-tone-on-inverse-text,
+    var(
+      --seblify-color-neutral-on-inverse-text,
+      var(--seblify-color-text-inverse, #fff4e7)
+    )
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-current-tone-on-inverse-border,
+    var(
+      --seblify-color-neutral-on-inverse-border,
+      var(--seblify-color-border-inverse, #4a3b32)
+    )
   );
 }
 
 :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);
+  --seblify-tone-fill: var(--seblify-color-neutral-fill, #6f5f55);
+  --seblify-tone-fill-hover: var(--seblify-color-neutral-fill-hover, #5b4d45);
+  --seblify-tone-fill-text: var(--seblify-color-neutral-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-neutral-surface, #f2ebe4);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-neutral-surface-hover,
+    #ebe1d8
+  );
+  --seblify-tone-text: var(--seblify-color-neutral-text, #6f5f55);
+  --seblify-tone-border: var(--seblify-color-neutral-border, #ded0c4);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-neutral-derived-surface,
+    var(--seblify-color-surface-muted, #f2ebe4)
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-neutral-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-neutral-fill, #6f5f55) 22%,
+      var(--seblify-color-border-strong, #c5afa0) 78%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-neutral-derived-text,
+    var(--seblify-color-text-subtle, #8b7a70)
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-neutral-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 10%,
+      var(--seblify-color-surface-inverse, #15110f) 90%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-neutral-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 16%,
+      var(--seblify-color-surface-inverse, #15110f) 84%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-neutral-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-neutral-on-inverse-border,
+    var(--seblify-color-border-inverse, #4a3b32)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-strong-fill, #211916);
+  --seblify-tone-fill-hover: var(--seblify-color-strong-fill-hover, #080706);
+  --seblify-tone-fill-text: var(--seblify-color-strong-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-strong-surface, #ffffff);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-strong-surface-hover,
+    #f2ebe4
+  );
+  --seblify-tone-text: var(--seblify-color-strong-text, #211916);
+  --seblify-tone-border: var(--seblify-color-strong-border, #c5afa0);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-strong-derived-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 10%,
+      var(--seblify-color-surface, #fffdf9) 90%
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-strong-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 26%,
+      var(--seblify-color-border-strong, #c5afa0) 74%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-strong-derived-text,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 66%,
+      var(--seblify-color-text-muted, #6f5f55) 34%
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-strong-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 14%,
+      var(--seblify-color-surface-inverse, #15110f) 86%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-strong-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-strong-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-strong-on-inverse-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 42%,
+      var(--seblify-color-border-inverse, #4a3b32) 58%
+    )
+  );
 }
 
 :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);
+  --seblify-tone-fill: var(--seblify-color-primary-fill, #b43f5a);
+  --seblify-tone-fill-hover: var(--seblify-color-primary-fill-hover, #9f334d);
+  --seblify-tone-fill-text: var(--seblify-color-primary-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-primary-surface, #fae8ed);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-primary-surface-hover,
+    #f5d5dd
+  );
+  --seblify-tone-text: var(--seblify-color-primary-text, #8f2b43);
+  --seblify-tone-border: var(--seblify-color-primary-border, #e6a6b5);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-primary-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-primary-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-primary-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-primary-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-primary-fill, #b43f5a) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-primary-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-primary-fill, #b43f5a) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-primary-on-inverse-text,
+    var(--seblify-color-primary-fill, #b43f5a)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-primary-on-inverse-border,
+    var(--seblify-color-primary-border, #e6a6b5)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-secondary-fill, #6f3a55);
+  --seblify-tone-fill-hover: var(--seblify-color-secondary-fill-hover, #5e2f47);
+  --seblify-tone-fill-text: var(--seblify-color-secondary-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f4e5ee);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-secondary-surface-hover,
+    #ecd3e0
+  );
+  --seblify-tone-text: var(--seblify-color-secondary-text, #6f3a55);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #d7a6bf);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-secondary-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-secondary-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-secondary-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-secondary-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-secondary-fill, #6f3a55) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-secondary-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-secondary-fill, #6f3a55) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-secondary-on-inverse-text,
+    var(--seblify-color-secondary-fill, #6f3a55)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-secondary-on-inverse-border,
+    var(--seblify-color-secondary-border, #d7a6bf)
+  );
 }
 
 :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);
+  --seblify-tone-fill: var(--seblify-color-success-fill, #777447);
+  --seblify-tone-fill-hover: var(--seblify-color-success-fill-hover, #66633c);
+  --seblify-tone-fill-text: var(--seblify-color-success-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #eeeddf);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-success-surface-hover,
+    #e1dfc4
+  );
+  --seblify-tone-text: var(--seblify-color-success-text, #5d5b34);
+  --seblify-tone-border: var(--seblify-color-success-border, #cbc790);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-success-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-success-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-success-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-success-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-success-fill, #777447) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-success-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-success-fill, #777447) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-success-on-inverse-text,
+    var(--seblify-color-success-fill, #777447)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-success-on-inverse-border,
+    var(--seblify-color-success-border, #cbc790)
+  );
 }
 
 :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);
+  --seblify-tone-fill: var(--seblify-color-danger-fill, #b83d45);
+  --seblify-tone-fill-hover: var(--seblify-color-danger-fill-hover, #9f3239);
+  --seblify-tone-fill-text: var(--seblify-color-danger-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-danger-surface, #fae7e8);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-danger-surface-hover,
+    #f3d2d4
+  );
+  --seblify-tone-text: var(--seblify-color-danger-text, #923038);
+  --seblify-tone-border: var(--seblify-color-danger-border, #e2a2a7);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-danger-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-danger-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-danger-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-danger-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-danger-fill, #b83d45) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-danger-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-danger-fill, #b83d45) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-danger-on-inverse-text,
+    var(--seblify-color-danger-fill, #b83d45)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-danger-on-inverse-border,
+    var(--seblify-color-danger-border, #e2a2a7)
+  );
 }
 
 :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);
+  --seblify-tone-fill: var(--seblify-color-warning-fill, #9a6d24);
+  --seblify-tone-fill-hover: var(--seblify-color-warning-fill-hover, #805918);
+  --seblify-tone-fill-text: var(--seblify-color-warning-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #f8edd8);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-warning-surface-hover,
+    #efddbd
+  );
+  --seblify-tone-text: var(--seblify-color-warning-text, #7a5418);
+  --seblify-tone-border: var(--seblify-color-warning-border, #d8b46c);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-warning-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-warning-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-warning-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-warning-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-warning-fill, #9a6d24) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-warning-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-warning-fill, #9a6d24) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-warning-on-inverse-text,
+    var(--seblify-color-warning-fill, #9a6d24)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-warning-on-inverse-border,
+    var(--seblify-color-warning-border, #d8b46c)
+  );
 }
 
 :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);
+  --seblify-tone-fill: var(--seblify-color-info-fill, #a5664a);
+  --seblify-tone-fill-hover: var(--seblify-color-info-fill-hover, #8f543b);
+  --seblify-tone-fill-text: var(--seblify-color-info-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #f6e6de);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-info-surface-hover,
+    #edd3c6
+  );
+  --seblify-tone-text: var(--seblify-color-info-text, #844932);
+  --seblify-tone-border: var(--seblify-color-info-border, #d49d85);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-info-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-info-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-info-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-info-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-info-fill, #a5664a) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-info-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-info-fill, #a5664a) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-info-on-inverse-text,
+    var(--seblify-color-info-fill, #a5664a)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-info-on-inverse-border,
+    var(--seblify-color-info-border, #d49d85)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-surface='inverse']) {
+  --seblify-tone-control-surface: var(--seblify-tone-on-inverse-surface);
+  --seblify-tone-control-surface-hover: var(
+    --seblify-tone-on-inverse-surface-hover
+  );
+  --seblify-tone-control-default-text: var(
+    --seblify-color-text-inverse,
+    #fff4e7
+  );
+  --seblify-tone-control-text: var(--seblify-tone-on-inverse-text);
+  --seblify-tone-control-border: var(--seblify-tone-on-inverse-border);
+  --seblify-tone-control-derived-surface: color-mix(
+    in srgb,
+    var(--seblify-tone-on-inverse-surface) 70%,
+    var(--seblify-color-surface-inverse, #15110f) 30%
+  );
+  --seblify-tone-control-derived-border: color-mix(
+    in srgb,
+    var(--seblify-tone-on-inverse-border) 72%,
+    var(--seblify-color-border-inverse, #4a3b32) 28%
+  );
+  --seblify-tone-control-derived-text: var(--seblify-tone-on-inverse-text);
 }
 
-: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-context[data-seblify-surface='inverse'][data-seblify-tone='strong']
+) {
+  --seblify-tone-control-fill: var(--seblify-color-text-inverse, #fff4e7);
+  --seblify-tone-control-fill-hover: color-mix(
+    in srgb,
+    var(--seblify-color-text-inverse, #fff4e7) 88%,
+    var(--seblify-color-surface-inverse, #15110f) 12%
+  );
+  --seblify-tone-control-fill-text: var(--seblify-color-text, #211916);
 }
 
 :where(.seblify-tone-publisher) {
   --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-hover: var(--seblify-tone-fill-hover);
   --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
   --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-surface-hover: var(--seblify-tone-surface-hover);
   --seblify-current-tone-text: var(--seblify-tone-text);
   --seblify-current-tone-border: var(--seblify-tone-border);
+  --seblify-current-tone-derived-surface: var(--seblify-tone-derived-surface);
+  --seblify-current-tone-derived-border: var(--seblify-tone-derived-border);
+  --seblify-current-tone-derived-text: var(--seblify-tone-derived-text);
+  --seblify-current-tone-on-inverse-surface: var(
+    --seblify-tone-on-inverse-surface
+  );
+  --seblify-current-tone-on-inverse-surface-hover: var(
+    --seblify-tone-on-inverse-surface-hover
+  );
+  --seblify-current-tone-on-inverse-text: var(--seblify-tone-on-inverse-text);
+  --seblify-current-tone-on-inverse-border: var(
+    --seblify-tone-on-inverse-border
+  );
 }
 
+/* Base */
+
 .switch {
     --switch-track-width: calc(var(--switch-size) * 1.75);
     --switch-track-height: var(--switch-size);
@@ -284,12 +972,15 @@
       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(
@@ -299,6 +990,7 @@
     );
     --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%,
@@ -319,6 +1011,13 @@
       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);
@@ -335,9 +1034,9 @@
     );
     --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: 160ms;
+    --switch-thumb-motion-duration: var(--switch-duration);
     --switch-thumb-motion-timing: cubic-bezier(0.32, 0.72, 0, 1);
-    --switch-state-duration: 160ms;
+    --switch-state-duration: var(--switch-duration);
     --switch-state-timing: ease;
     --switch-track-icon-on-color: color-mix(
       in srgb,
@@ -351,7 +1050,7 @@
     );
     --switch-focus-ring-color: color-mix(
       in srgb,
-      var(--seblify-tone-fill) 56%,
+      var(--switch-focus-tone-fill) 56%,
       transparent
     );
 
@@ -363,47 +1062,75 @@
     cursor: pointer;
   }
 
+/* Tone */
+
 .switch[data-seblify-tone='inherit'] {
     --seblify-tone-fill: var(
       --seblify-current-tone-fill,
-      var(--seblify-color-fill-neutral, #5b6675)
+      var(--seblify-color-neutral-fill, #6f5f55)
+    );
+    --seblify-tone-fill-hover: var(
+      --seblify-current-tone-fill-hover,
+      var(--seblify-color-neutral-fill-hover, #5b4d45)
     );
     --seblify-tone-fill-text: var(
       --seblify-current-tone-fill-text,
-      var(--seblify-color-fill-neutral-text, #ffffff)
+      var(--seblify-color-neutral-fill-text, #fff4e7)
     );
     --seblify-tone-surface: var(
       --seblify-current-tone-surface,
-      var(--seblify-color-surface-neutral, #f4f6f8)
+      var(--seblify-color-neutral-surface, #f2ebe4)
+    );
+    --seblify-tone-surface-hover: var(
+      --seblify-current-tone-surface-hover,
+      var(--seblify-color-neutral-surface-hover, #ebe1d8)
     );
     --seblify-tone-text: var(
       --seblify-current-tone-text,
-      var(--seblify-color-fill-neutral, #5b6675)
+      var(--seblify-color-neutral-text, #6f5f55)
     );
     --seblify-tone-border: var(
       --seblify-current-tone-border,
-      var(--seblify-color-border-neutral, #c5ccd6)
+      var(--seblify-color-neutral-border, #ded0c4)
     );
   }
 
-.switch[data-animation='smooth'] {
-    --switch-thumb-motion-duration: 190ms;
-    --switch-thumb-motion-timing: cubic-bezier(0.32, 0.72, 0, 1);
-    --switch-state-duration: 190ms;
-    --switch-state-timing: ease;
+.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-neutral-fill, #6f5f55);
   }
 
-.switch[data-animation='snappy'] {
-    --switch-thumb-motion-duration: 90ms;
-    --switch-thumb-motion-timing: cubic-bezier(0.12, 0.92, 0.18, 1);
-    --switch-state-duration: 90ms;
-    --switch-state-timing: linear;
+.switch[data-focus-tone='primary'] {
+    --switch-focus-tone-fill: var(--seblify-color-primary-fill, #b43f5a);
   }
 
+.switch[data-focus-tone='secondary'] {
+    --switch-focus-tone-fill: var(--seblify-color-secondary-fill, #6f3a55);
+  }
+
+.switch[data-focus-tone='success'] {
+    --switch-focus-tone-fill: var(--seblify-color-success-fill, #777447);
+  }
+
+.switch[data-focus-tone='danger'] {
+    --switch-focus-tone-fill: var(--seblify-color-danger-fill, #b83d45);
+  }
+
+.switch[data-focus-tone='warning'] {
+    --switch-focus-tone-fill: var(--seblify-color-warning-fill, #9a6d24);
+  }
+
+.switch[data-focus-tone='info'] {
+    --switch-focus-tone-fill: var(--seblify-color-info-fill, #a5664a);
+  }
+
+/* Motion */
+
 .switch[data-animation='bouncy'] {
-    --switch-thumb-motion-duration: 380ms;
     --switch-thumb-motion-timing: cubic-bezier(0.24, 1.18, 0.4, 1);
-    --switch-state-duration: 220ms;
     --switch-state-timing: ease;
   }
 
@@ -451,6 +1178,50 @@
     }
   }
 
+@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;
@@ -462,6 +1233,8 @@ input {
     white-space: nowrap;
   }
 
+/* Structure */
+
 .control {
     position: relative;
     display: inline-flex;
@@ -512,7 +1285,7 @@ input {
 .thumb {
     display: inline-flex;
     width: var(--switch-thumb-width);
-    height: var(--switch-thumb-size);
+    height: var(--switch-thumb-height);
     align-items: center;
     justify-content: center;
     border-radius: var(--switch-thumb-radius);
@@ -524,7 +1297,7 @@ input {
       var(--seblify-color-text-muted, #516176) 36%,
       transparent
     );
-    transform: translateX(var(--switch-thumb-position-off));
+    transform: var(--switch-thumb-transform-off);
     transition:
       transform var(--switch-thumb-motion-duration)
         var(--switch-thumb-motion-timing),
@@ -533,6 +1306,8 @@ input {
       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);
@@ -596,6 +1371,86 @@ input {
     --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));
+  }
+
+.switch[data-orientation='vertical'][data-shape='line'] {
+    --switch-track-width: calc(var(--switch-size) * 0.3333333);
+  }
+
+.switch[data-orientation='vertical'] .track-icon {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+.switch[data-orientation='vertical'] .track-icon--on {
+    top: var(--switch-track-icon-offset);
+    transform: translateX(-50%) rotate(90deg);
+  }
+
+.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);
@@ -622,7 +1477,7 @@ input:checked + .control .thumb {
   }
 
 input:checked + .control .thumb {
-    transform: translateX(var(--switch-thumb-position-on));
+    transform: var(--switch-thumb-transform-on);
   }
 
 .thumb-grip {
@@ -639,16 +1494,34 @@ input:checked + .control .thumb {
     overflow: visible;
   }
 
-.switch[data-animation='bouncy'][data-bouncy-motion='to-on'] .thumb {
+/* 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-animation='bouncy'][data-bouncy-motion='to-off'] .thumb {
+.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);
@@ -662,7 +1535,25 @@ input:checked + .control .thumb {
     --switch-off-thumb: var(--switch-soft-thumb);
   }
 
-:global([data-theme='dark']) .switch {
+.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-color-mode='dark']) .switch {
+    --switch-off-surface: #2c231e;
     --switch-solid-thumb: color-mix(
       in srgb,
       var(--seblify-tone-fill) 18%,
@@ -671,15 +1562,16 @@ input:checked + .control .thumb {
     --switch-soft-thumb: var(--seblify-tone-fill);
   }
 
-:global([data-theme='dark']) .switch[data-shape='floating'],
-  :global([data-theme='dark']) .switch[data-shape='line'] {
+:global([data-color-mode='dark']) .switch[data-shape='floating'],
+  :global([data-color-mode='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 {
+    :global(:root:not([data-color-mode])) .switch {
+      --switch-off-surface: #2c231e;
       --switch-solid-thumb: color-mix(
         in srgb,
         var(--seblify-tone-fill) 18%,
@@ -688,14 +1580,27 @@ input:checked + .control .thumb {
       --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'] {
+    :global(:root:not([data-color-mode])) .switch[data-shape='floating'],
+    :global(:root:not([data-color-mode])) .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(--switch-focus-ring-color);
     outline-offset: 2px;