seblify 0.3.0 → 0.4.0

package/dist/components/action/input/select/checkbox/Checkbox.svelte

@@ -1,46 +1,146 @@
 <script lang="ts">
-  import type { SeblifyProps } from 'seblify';
+  import { untrack } from 'svelte';
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
 
+  type CheckboxAnimation =
+    | 'none'
+    | 'fade'
+    | 'scale'
+    | 'bump'
+    | 'pop'
+    | 'draw'
+    | 'rise'
+    | 'bounce';
+  type CheckboxVariant =
+    | 'solid'
+    | 'outline'
+    | 'soft'
+    | 'tint'
+    | 'plain'
+    | 'blank'
+    | 'inset'
+    | 'overflow';
+  type CheckboxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+  type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+  type CheckboxIntermediateMark = 'dash' | 'tilde' | 'dot' | 'square';
   type CheckboxTone =
     | 'neutral'
+    | 'strong'
     | 'primary'
     | 'secondary'
     | 'success'
     | 'danger'
     | 'warning'
-    | 'info'
-    | 'inverse';
+    | 'info';
   type CheckboxVisualState =
     | 'default'
     | 'derived'
     | 'indirect'
     | 'direct-and-derived'
     | 'direct-and-indirect';
+  type CheckboxSelectedState = 'checked' | 'indeterminate' | 'unchecked';
+  type CheckboxVisualLayer = 'direct' | 'derived' | 'empty';
+  type CheckboxStackLayer =
+    | 'empty'
+    | 'indirect-indeterminate'
+    | 'indirect-checked'
+    | 'direct-indeterminate'
+    | 'direct-checked';
+  type CheckboxStackTransition = 'none' | 'enter' | 'exit';
+  type CheckboxLayerState = 'hidden' | 'visible' | 'enter' | 'exit';
+  type CheckboxManagedState = {
+    checked: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    toggle?: () => void;
+    trigger?: () => void;
+    visualState?: CheckboxVisualState;
+  };
 
   type Props = SeblifyProps<{
+    animation?: CheckboxAnimation;
     ariaLabel?: string;
     checked?: boolean;
     disabled?: boolean;
+    duration?: number;
     label?: string;
     description?: string;
     indeterminate?: boolean;
+    intermediateMark?: CheckboxIntermediateMark;
+    managed?: CheckboxManagedState;
     name?: string;
     onclick?: (event: MouseEvent) => void;
+    radius?: CheckboxRadius;
+    size?: CheckboxSize;
     tone?: CheckboxTone;
+    variant?: CheckboxVariant;
     visualState?: CheckboxVisualState;
     value?: string;
   }>;
 
+  const CHECKBOX_RADIUS_MAP: Record<
+    Exclude<CheckboxRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.25rem',
+    lg: '0.375rem',
+    full: '999px',
+  };
+  const CHECKBOX_SIZE_MAP: Record<
+    Exclude<CheckboxSize, CustomCssSize>,
+    string
+  > = {
+    sm: '1rem',
+    md: '1.125rem',
+    lg: '1.25rem',
+    xl: '1.5rem',
+  };
+  const CHECKBOX_SIZE_PIXEL_MAP: Record<
+    Exclude<CheckboxSize, CustomCssSize>,
+    number
+  > = {
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 24,
+  };
+  const CHECKBOX_SIZE_BASE_PIXELS = 24;
+  const CHECKBOX_STACK_LAYERS: CheckboxStackLayer[] = [
+    'empty',
+    'indirect-indeterminate',
+    'indirect-checked',
+    'direct-indeterminate',
+    'direct-checked',
+  ];
+  const CHECKBOX_LAYER_PRIORITY: Record<CheckboxStackLayer, number> = {
+    empty: 0,
+    'indirect-indeterminate': 1,
+    'indirect-checked': 2,
+    'direct-indeterminate': 3,
+    'direct-checked': 4,
+  };
+  const CHECKBOX_CHECK_PATH = 'M3.75 12.75L8.75 17.75L20.5 5.75';
+  const CHECKBOX_OVERFLOW_CHECK_PATH = 'M6.25 9.875L11.75 15.375L24.75 2.375';
+
   let {
+    animation = 'scale',
     ariaLabel,
     checked = $bindable(false),
     disabled = false,
+    duration,
     label,
     description,
     indeterminate = false,
+    intermediateMark = 'dash',
+    managed,
     name,
     onclick,
+    radius = 'md',
+    size = 'md',
     tone,
+    variant = 'solid',
     visualState = 'default',
     value,
   }: Props = $props();
@@ -51,73 +151,608 @@
   const descriptionId = $derived(
     description ? `${checkboxId}-description` : undefined,
   );
+  const radiusValue = $derived(resolveRadiusValue(radius));
+  const sizeValue = $derived(resolveSizeValue(size));
+  const durationValue = $derived(resolveDurationValue(duration));
+  const resolvedChecked = $derived(managed?.checked ?? checked);
+  const resolvedDisabled = $derived(managed?.disabled ?? disabled);
+  const resolvedIndeterminate = $derived(
+    managed?.indeterminate ?? indeterminate,
+  );
+  const resolvedVisualState = $derived(managed?.visualState ?? visualState);
+  const checkPath = $derived(
+    variant === 'overflow' ? CHECKBOX_OVERFLOW_CHECK_PATH : CHECKBOX_CHECK_PATH,
+  );
+  const intermediatePath = $derived(
+    intermediateMark === 'tilde'
+      ? 'M4 13C6 9 8.5 9 11 13C13.5 17 16 17 20 11'
+      : 'M4 12H20',
+  );
+  let activeAnimation = $state<CheckboxAnimation>('scale');
+  let animateFromClick = false;
+  let clearAnimateFromClickTimeout: ReturnType<typeof setTimeout> | undefined;
+  let animating = $state(false);
+  let observedVisualLayer: CheckboxVisualLayer | undefined;
+  let observedSelectedState: CheckboxSelectedState | undefined;
+  let observedHasDerivedLayer: boolean | undefined;
+  let observedTopLayer: CheckboxStackLayer | undefined;
+  let transitionFromLayer = $state<CheckboxStackLayer>('empty');
+  let transitionToLayer = $state<CheckboxStackLayer>('empty');
+  let stackTransition = $state<CheckboxStackTransition>('none');
+  let derivedLayerState = $state<
+    Exclude<CheckboxSelectedState, 'unchecked'> | 'none'
+  >('none');
+  let layerTransition = $state<
+    | 'none'
+    | 'empty-to-derived'
+    | 'derived-to-empty'
+    | 'direct-to-derived'
+    | 'derived-to-direct'
+  >('none');
+  const renderedAnimation = $derived(animating ? activeAnimation : animation);
+  const defaultDurationValue = $derived(
+    `${resolveDefaultAnimationDuration(renderedAnimation, size)}ms`,
+  );
 
   const dataState = $derived(
-    disabled && indeterminate
+    resolvedDisabled && resolvedIndeterminate
       ? 'disabled-indeterminate'
-      : disabled && checked
-      ? 'disabled-checked'
-      : disabled
-        ? 'disabled-unchecked'
-        : indeterminate
-          ? 'indeterminate'
-          : checked
-            ? 'checked'
-            : 'unchecked',
+      : resolvedDisabled && resolvedChecked
+        ? 'disabled-checked'
+        : resolvedDisabled
+          ? 'disabled-unchecked'
+          : resolvedIndeterminate
+            ? 'indeterminate'
+            : resolvedChecked
+              ? 'checked'
+              : 'unchecked',
   );
+  const selectedState = $derived<CheckboxSelectedState>(
+    resolvedIndeterminate
+      ? 'indeterminate'
+      : resolvedChecked
+        ? 'checked'
+        : 'unchecked',
+  );
+  const derivedVisual = $derived(
+    resolvedVisualState === 'derived' || resolvedVisualState === 'indirect',
+  );
+  const hasDerivedLayer = $derived(
+    resolvedVisualState === 'derived' ||
+      resolvedVisualState === 'indirect' ||
+      resolvedVisualState === 'direct-and-derived' ||
+      resolvedVisualState === 'direct-and-indirect',
+  );
+  const visualLayer = $derived<CheckboxVisualLayer>(
+    selectedState === 'unchecked'
+      ? 'empty'
+      : derivedVisual
+        ? 'derived'
+        : 'direct',
+  );
+  const topLayer = $derived(
+    resolveTopLayer(selectedState, resolvedVisualState, derivedVisual),
+  );
+  const animationStateSignature = $derived(
+    `${selectedState}:${resolvedVisualState}`,
+  );
+  let hasObservedAnimationState = false;
 
   $effect(() => {
     if (inputElement) {
-      inputElement.checked = checked;
-      inputElement.indeterminate = indeterminate;
+      inputElement.checked = resolvedChecked;
+      inputElement.indeterminate = resolvedIndeterminate;
+    }
+  });
+
+  $effect(() => {
+    const signature = animationStateSignature;
+    const currentVisualLayer = visualLayer;
+    const currentSelectedState = selectedState;
+    const currentHasDerivedLayer = hasDerivedLayer;
+    const currentTopLayer = topLayer;
+
+    if (!hasObservedAnimationState) {
+      hasObservedAnimationState = true;
+      observedVisualLayer = currentVisualLayer;
+      observedSelectedState = currentSelectedState;
+      observedHasDerivedLayer = currentHasDerivedLayer;
+      observedTopLayer = currentTopLayer;
+      transitionFromLayer = currentTopLayer;
+      transitionToLayer = currentTopLayer;
+      derivedLayerState = resolveSettledDerivedLayerState(
+        currentHasDerivedLayer,
+        currentSelectedState,
+      );
+      return;
+    }
+
+    const previousVisualLayer = observedVisualLayer;
+    const previousSelectedState = observedSelectedState;
+    const previousHasDerivedLayer = observedHasDerivedLayer;
+    const previousTopLayer = observedTopLayer ?? 'empty';
+    const animationForChange = consumeAnimationForChange();
+    layerTransition = resolveLayerTransition(
+      previousVisualLayer,
+      currentVisualLayer,
+    );
+    transitionFromLayer = previousTopLayer;
+    transitionToLayer = currentTopLayer;
+    stackTransition = resolveStackTransition(previousTopLayer, currentTopLayer);
+    derivedLayerState = resolveTransitionDerivedLayerState(
+      previousVisualLayer,
+      previousSelectedState,
+      previousHasDerivedLayer,
+      currentSelectedState,
+      currentHasDerivedLayer,
+    );
+    observedVisualLayer = currentVisualLayer;
+    observedSelectedState = currentSelectedState;
+    observedHasDerivedLayer = currentHasDerivedLayer;
+    observedTopLayer = currentTopLayer;
+
+    if (animationForChange === 'none') {
+      activeAnimation = animationForChange;
+      animating = false;
+      layerTransition = 'none';
+      stackTransition = 'none';
+      transitionFromLayer = currentTopLayer;
+      transitionToLayer = currentTopLayer;
+      derivedLayerState = resolveSettledDerivedLayerState(
+        currentHasDerivedLayer,
+        currentSelectedState,
+      );
+      return;
     }
+
+    activeAnimation = animationForChange;
+    animating = true;
+
+    const animationDuration = untrack(() =>
+      resolveAnimationDuration(
+        animationForChange,
+        duration,
+        stackTransition === 'exit' ? 'unchecked' : dataState,
+        size,
+      ),
+    );
+    const timeout = setTimeout(() => {
+      if (signature === animationStateSignature) {
+        animating = false;
+        layerTransition = 'none';
+        stackTransition = 'none';
+        transitionFromLayer = topLayer;
+        transitionToLayer = topLayer;
+        derivedLayerState = resolveSettledDerivedLayerState(
+          hasDerivedLayer,
+          selectedState,
+        );
+      }
+    }, animationDuration + 40);
+
+    return () => {
+      clearTimeout(timeout);
+    };
   });
 
   function handleInputChange(event: Event) {
-    if (disabled) {
+    if (managed || resolvedDisabled) {
       const input = event.currentTarget as HTMLInputElement;
 
-      input.checked = checked;
-      input.indeterminate = indeterminate;
+      input.checked = resolvedChecked;
+      input.indeterminate = resolvedIndeterminate;
       return;
     }
 
+    startAnimation();
     checked = (event.currentTarget as HTMLInputElement).checked;
   }
 
   function handleInputClick(event: MouseEvent) {
-    if (disabled) {
+    if (resolvedDisabled) {
       event.preventDefault();
       event.stopPropagation();
 
       if (inputElement) {
-        inputElement.checked = checked;
-        inputElement.indeterminate = indeterminate;
+        inputElement.checked = resolvedChecked;
+        inputElement.indeterminate = resolvedIndeterminate;
       }
 
       return;
     }
 
+    requestClickAnimation();
+
+    if (managed) {
+      event.preventDefault();
+      managed.trigger?.();
+      if (!managed.trigger) {
+        managed.toggle?.();
+      }
+    }
+
     onclick?.(event);
   }
+
+  function requestClickAnimation() {
+    animateFromClick = true;
+    activeAnimation = animation;
+
+    if (clearAnimateFromClickTimeout) {
+      clearTimeout(clearAnimateFromClickTimeout);
+    }
+
+    clearAnimateFromClickTimeout = setTimeout(() => {
+      animateFromClick = false;
+      clearAnimateFromClickTimeout = undefined;
+    }, 0);
+  }
+
+  function consumeAnimationForChange(): CheckboxAnimation {
+    const animationForChange = animateFromClick
+      ? animation
+      : animation === 'none'
+        ? 'none'
+        : 'fade';
+
+    animateFromClick = false;
+
+    if (clearAnimateFromClickTimeout) {
+      clearTimeout(clearAnimateFromClickTimeout);
+      clearAnimateFromClickTimeout = undefined;
+    }
+
+    return animationForChange;
+  }
+
+  function cssSize(value: CustomCssSize): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function resolveRadiusValue(value: CheckboxRadius): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return (
+      CHECKBOX_RADIUS_MAP[value as keyof typeof CHECKBOX_RADIUS_MAP] ?? value
+    );
+  }
+
+  function resolveSizeValue(value: CheckboxSize): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return CHECKBOX_SIZE_MAP[value as keyof typeof CHECKBOX_SIZE_MAP] ?? value;
+  }
+
+  function resolveDurationNumber(value: number): number {
+    if (!Number.isFinite(value)) {
+      return 0;
+    }
+
+    return Math.max(0, value);
+  }
+
+  function resolveDurationValue(value: number | undefined): string | undefined {
+    return value === undefined
+      ? undefined
+      : `${resolveDurationNumber(value)}ms`;
+  }
+
+  function resolveSettledDerivedLayerState(
+    hasLayer: boolean,
+    state: CheckboxSelectedState,
+  ): Exclude<CheckboxSelectedState, 'unchecked'> | 'none' {
+    return hasLayer && state !== 'unchecked' ? state : 'none';
+  }
+
+  function resolveTransitionDerivedLayerState(
+    previousLayer: CheckboxVisualLayer | undefined,
+    previousState: CheckboxSelectedState | undefined,
+    previousHasLayer: boolean | undefined,
+    currentState: CheckboxSelectedState,
+    currentHasLayer: boolean,
+  ): Exclude<CheckboxSelectedState, 'unchecked'> | 'none' {
+    if (currentHasLayer && currentState !== 'unchecked') {
+      return currentState;
+    }
+
+    if (
+      previousLayer !== 'empty' &&
+      previousHasLayer &&
+      previousState &&
+      previousState !== 'unchecked'
+    ) {
+      return previousState;
+    }
+
+    return 'none';
+  }
+
+  function resolveLayerTransition(
+    previousLayer: CheckboxVisualLayer | undefined,
+    currentLayer: CheckboxVisualLayer,
+  ):
+    | 'none'
+    | 'empty-to-derived'
+    | 'derived-to-empty'
+    | 'direct-to-derived'
+    | 'derived-to-direct' {
+    if (previousLayer === 'empty' && currentLayer === 'derived') {
+      return 'empty-to-derived';
+    }
+
+    if (previousLayer === 'derived' && currentLayer === 'empty') {
+      return 'derived-to-empty';
+    }
+
+    if (previousLayer === 'direct' && currentLayer === 'derived') {
+      return 'direct-to-derived';
+    }
+
+    if (previousLayer === 'derived' && currentLayer === 'direct') {
+      return 'derived-to-direct';
+    }
+
+    return 'none';
+  }
+
+  function resolveTopLayer(
+    state: CheckboxSelectedState,
+    visualStateValue: CheckboxVisualState,
+    derivedVisualValue: boolean,
+  ): CheckboxStackLayer {
+    if (state === 'unchecked') {
+      return 'empty';
+    }
+
+    if (derivedVisualValue) {
+      return state === 'checked'
+        ? 'indirect-checked'
+        : 'indirect-indeterminate';
+    }
+
+    if (
+      visualStateValue === 'direct-and-derived' ||
+      visualStateValue === 'direct-and-indirect' ||
+      visualStateValue === 'default'
+    ) {
+      return state === 'checked' ? 'direct-checked' : 'direct-indeterminate';
+    }
+
+    return 'empty';
+  }
+
+  function resolveStackTransition(
+    previousLayer: CheckboxStackLayer,
+    currentLayer: CheckboxStackLayer,
+  ): CheckboxStackTransition {
+    if (previousLayer === currentLayer) {
+      return 'none';
+    }
+
+    return CHECKBOX_LAYER_PRIORITY[currentLayer] >
+      CHECKBOX_LAYER_PRIORITY[previousLayer]
+      ? 'enter'
+      : 'exit';
+  }
+
+  function resolveLayerState(layer: CheckboxStackLayer): CheckboxLayerState {
+    if (stackTransition === 'enter') {
+      if (layer === transitionToLayer) {
+        return 'enter';
+      }
+
+      if (layer === transitionFromLayer) {
+        return layer === 'empty' ||
+          (renderedAnimation === 'bounce' &&
+            layer.startsWith('indirect') &&
+            transitionToLayer.startsWith('direct'))
+          ? 'exit'
+          : 'visible';
+      }
+    }
+
+    if (stackTransition === 'exit') {
+      if (layer === transitionFromLayer) {
+        return 'exit';
+      }
+
+      if (layer === transitionToLayer) {
+        return layer === 'empty' ||
+          (renderedAnimation === 'bounce' && layer.startsWith('indirect'))
+          ? 'enter'
+          : 'visible';
+      }
+    }
+
+    if (layer === topLayer) {
+      return 'visible';
+    }
+
+    return 'hidden';
+  }
+
+  function layerKind(layer: CheckboxStackLayer): 'direct' | 'indirect' {
+    return layer.startsWith('direct') ? 'direct' : 'indirect';
+  }
+
+  function layerSelection(
+    layer: CheckboxStackLayer,
+  ): Exclude<CheckboxSelectedState, 'unchecked'> {
+    return layer.endsWith('checked') ? 'checked' : 'indeterminate';
+  }
+
+  function startAnimation() {
+    if (activeAnimation === 'none' || !hasObservedAnimationState) {
+      return;
+    }
+
+    animating = true;
+  }
+
+  function resolveAnimationDuration(
+    animationValue: CheckboxAnimation,
+    durationValue: number | undefined,
+    stateValue = dataState,
+    sizeValue = size,
+  ): number {
+    const baseDuration =
+      durationValue !== undefined
+        ? resolveDurationNumber(durationValue)
+        : resolveDefaultAnimationDuration(animationValue, sizeValue);
+
+    if (
+      animationValue === 'bounce' &&
+      (stateValue === 'unchecked' || stateValue === 'disabled-unchecked')
+    ) {
+      return (baseDuration * 9) / 16;
+    }
+
+    if (
+      animationValue === 'rise' &&
+      (stateValue === 'unchecked' || stateValue === 'disabled-unchecked')
+    ) {
+      return (baseDuration * 9) / 16;
+    }
+
+    if (
+      (animationValue === 'bump' || animationValue === 'pop') &&
+      (stateValue === 'unchecked' || stateValue === 'disabled-unchecked')
+    ) {
+      return (baseDuration * 3) / 5;
+    }
+
+    if (
+      animationValue === 'draw' &&
+      (stateValue === 'unchecked' || stateValue === 'disabled-unchecked')
+    ) {
+      return (baseDuration * 3) / 5;
+    }
+
+    if (
+      animationValue === 'draw' &&
+      (stateValue === 'checked' || stateValue === 'disabled-checked')
+    ) {
+      return (baseDuration * 5) / 4;
+    }
+
+    return baseDuration;
+  }
+
+  function resolveDefaultAnimationDuration(
+    animationValue: CheckboxAnimation,
+    sizeValue: CheckboxSize,
+  ): number {
+    if (animationValue === 'none') {
+      return 0;
+    }
+
+    return Math.max(
+      0,
+      resolveBaseAnimationDuration(animationValue) +
+        resolveSizeDurationOffset(sizeValue),
+    );
+  }
+
+  function resolveBaseAnimationDuration(
+    animationValue: CheckboxAnimation,
+  ): number {
+    switch (animationValue) {
+      case 'bump':
+        return 220;
+      case 'pop':
+        return 300;
+      case 'draw':
+        return 340;
+      case 'fade':
+        return 300;
+      case 'scale':
+        return 240;
+      case 'rise':
+      case 'bounce':
+      default:
+        return 400;
+    }
+  }
+
+  function resolveSizeDurationOffset(sizeValue: CheckboxSize): number {
+    const pixels = resolveSizePixels(sizeValue);
+
+    if (pixels === undefined) {
+      return 0;
+    }
+
+    if (pixels <= CHECKBOX_SIZE_BASE_PIXELS) {
+      return ((pixels - CHECKBOX_SIZE_BASE_PIXELS) / 8) * 20;
+    }
+
+    return ((pixels - CHECKBOX_SIZE_BASE_PIXELS) / 16) * 20;
+  }
+
+  function resolveSizePixels(sizeValue: CheckboxSize): number | undefined {
+    if (typeof sizeValue === 'number') {
+      return sizeValue;
+    }
+
+    if (sizeValue in CHECKBOX_SIZE_PIXEL_MAP) {
+      return CHECKBOX_SIZE_PIXEL_MAP[
+        sizeValue as keyof typeof CHECKBOX_SIZE_PIXEL_MAP
+      ];
+    }
+
+    const pxMatch = sizeValue.match(/^(-?\d+(?:\.\d+)?)px$/);
+
+    if (pxMatch) {
+      return Number(pxMatch[1]);
+    }
+
+    const remMatch = sizeValue.match(/^(-?\d+(?:\.\d+)?)rem$/);
+
+    if (remMatch) {
+      return Number(remMatch[1]) * 16;
+    }
+
+    return undefined;
+  }
 </script>
 
 <label
-  class:disabled
+  class:disabled={resolvedDisabled}
   class="seblify-checkbox seblify-tone-context"
-  data-indeterminate={indeterminate}
+  data-animation={renderedAnimation}
+  data-animating={animating}
+  data-has-description={description ? true : undefined}
+  data-has-label={label ? true : undefined}
+  data-indeterminate={resolvedIndeterminate}
+  data-radius={radius}
   data-seblify-tone={tone ?? 'inherit'}
+  data-size={size}
   data-state={dataState}
-  data-visual-state={visualState}
+  data-derived-layer-state={derivedLayerState}
+  data-intermediate-mark={intermediateMark}
+  data-layer-transition={layerTransition}
+  data-stack-transition={stackTransition}
+  data-transition-from-layer={transitionFromLayer}
+  data-transition-to-layer={transitionToLayer}
+  data-variant={variant}
+  data-visual-layer={visualLayer}
+  data-visual-state={resolvedVisualState}
+  style:--checkbox-radius={radiusValue}
+  style:--checkbox-size={sizeValue}
+  style:--checkbox-default-duration={defaultDurationValue}
+  style:--checkbox-duration={durationValue}
 >
   <input
-    aria-checked={indeterminate ? 'mixed' : undefined}
+    aria-checked={resolvedIndeterminate ? 'mixed' : undefined}
     aria-describedby={descriptionId}
     aria-label={labelId ? undefined : ariaLabel}
     aria-labelledby={labelId}
     bind:this={inputElement}
-    checked={checked}
-    {disabled}
+    checked={resolvedChecked}
+    disabled={resolvedDisabled}
     {name}
     data-state={dataState}
     onchange={handleInputChange}
@@ -126,7 +761,174 @@
     {value}
   />
   <span class="seblify-checkbox__control" aria-hidden="true">
-    <span class="seblify-checkbox__mark"></span>
+    <span
+      class="seblify-checkbox__derived-layer"
+      data-state={derivedLayerState}
+    >
+      <span class="seblify-checkbox__derived-mark">
+        <svg
+          class="seblify-checkbox__derived-check"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            class="seblify-checkbox__derived-check-path"
+            d={checkPath}
+            pathLength="1"
+          />
+        </svg>
+        <svg
+          class="seblify-checkbox__derived-indeterminate"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          {#if intermediateMark === 'dot'}
+            <circle
+              class="seblify-checkbox__derived-indeterminate-path"
+              cx="12"
+              cy="12"
+              data-intermediate-mark={intermediateMark}
+              r="3.25"
+            />
+          {:else if intermediateMark === 'square'}
+            <rect
+              class="seblify-checkbox__derived-indeterminate-path"
+              data-intermediate-mark={intermediateMark}
+              height="7.5"
+              rx="0.35"
+              width="7.5"
+              x="8.25"
+              y="8.25"
+            />
+          {:else}
+            <path
+              class="seblify-checkbox__derived-indeterminate-path"
+              d={intermediatePath}
+              data-intermediate-mark={intermediateMark}
+              pathLength="1"
+            />
+          {/if}
+        </svg>
+      </span>
+    </span>
+    <span class="seblify-checkbox__mark">
+      <svg
+        class="seblify-checkbox__check"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          class="seblify-checkbox__check-cutout"
+          d={checkPath}
+          pathLength="1"
+        />
+        <path
+          class="seblify-checkbox__check-path"
+          d={checkPath}
+          pathLength="1"
+        />
+      </svg>
+      <svg
+        class="seblify-checkbox__indeterminate"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {#if intermediateMark === 'dot'}
+          <circle
+            class="seblify-checkbox__indeterminate-path"
+            cx="12"
+            cy="12"
+            data-intermediate-mark={intermediateMark}
+            r="3.25"
+          />
+        {:else if intermediateMark === 'square'}
+          <rect
+            class="seblify-checkbox__indeterminate-path"
+            data-intermediate-mark={intermediateMark}
+            height="7.5"
+            rx="0.35"
+            width="7.5"
+            x="8.25"
+            y="8.25"
+          />
+        {:else}
+          <path
+            class="seblify-checkbox__indeterminate-path"
+            d={intermediatePath}
+            data-intermediate-mark={intermediateMark}
+            pathLength="1"
+          />
+        {/if}
+      </svg>
+    </span>
+    <span class="seblify-checkbox__visual-stack">
+      {#each CHECKBOX_STACK_LAYERS as layer}
+        <span
+          class="seblify-checkbox__visual-layer"
+          data-checkbox-layer={layer}
+          data-layer-kind={layer === 'empty' ? undefined : layerKind(layer)}
+          data-layer-state={resolveLayerState(layer)}
+          data-selection={layer === 'empty' ? undefined : layerSelection(layer)}
+        >
+          <span class="seblify-checkbox__visual-surface"></span>
+          {#if layer !== 'empty'}
+            <span class="seblify-checkbox__visual-mark">
+              {#if layerSelection(layer) === 'checked'}
+                <svg
+                  class="seblify-checkbox__visual-check"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    class="seblify-checkbox__visual-check-cutout"
+                    d={checkPath}
+                    pathLength="1"
+                  />
+                  <path
+                    class="seblify-checkbox__visual-check-path"
+                    d={checkPath}
+                    pathLength="1"
+                  />
+                </svg>
+              {:else}
+                <svg
+                  class="seblify-checkbox__visual-indeterminate"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  {#if intermediateMark === 'dot'}
+                    <circle
+                      class="seblify-checkbox__visual-indeterminate-path"
+                      cx="12"
+                      cy="12"
+                      data-intermediate-mark={intermediateMark}
+                      r="3.25"
+                    />
+                  {:else if intermediateMark === 'square'}
+                    <rect
+                      class="seblify-checkbox__visual-indeterminate-path"
+                      data-intermediate-mark={intermediateMark}
+                      height="7.5"
+                      rx="0.35"
+                      width="7.5"
+                      x="8.25"
+                      y="8.25"
+                    />
+                  {:else}
+                    <path
+                      class="seblify-checkbox__visual-indeterminate-path"
+                      d={intermediatePath}
+                      data-intermediate-mark={intermediateMark}
+                      pathLength="1"
+                    />
+                  {/if}
+                </svg>
+              {/if}
+            </span>
+          {/if}
+        </span>
+      {/each}
+    </span>
   </span>
   <span class="seblify-checkbox__content">
     {#if label}
@@ -141,136 +943,795 @@
 </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-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);
+  --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-fill-secondary, #5b5fc7);
-  --seblify-tone-fill-text: var(
-    --seblify-color-fill-secondary-text,
-    #ffffff
+  --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)
   );
-  --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);
+  --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);
-}
-
-: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);
+  --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-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
+  );
 }
 
 .seblify-checkbox {
-    --checkbox-size: 1.125rem;
-    --checkbox-radius: 0.25rem;
     --checkbox-border: var(--seblify-color-border-strong, #aab7c5);
     --checkbox-surface: var(--seblify-color-surface, #ffffff);
     --checkbox-active-border: var(--seblify-tone-fill);
     --checkbox-active-surface: var(--seblify-tone-fill);
+    --checkbox-active-soft-surface: var(--seblify-tone-surface);
+    --checkbox-active-soft-mark: var(--seblify-tone-control-default-text);
     --checkbox-active-mark: var(--seblify-tone-fill-text);
     --checkbox-focus-ring: color-mix(
       in srgb,
       var(--seblify-tone-fill) 54%,
       transparent
     );
-    --checkbox-derived-border: var(--seblify-color-border-strong, #aab7c5);
-    --checkbox-derived-surface: var(--seblify-color-surface-muted, #d9e0e8);
-    --checkbox-derived-mark: var(--seblify-color-text-muted, #516176);
-
+    --checkbox-derived-border: var(
+      --seblify-tone-control-derived-border,
+      var(--seblify-color-border-strong, #aab7c5)
+    );
+    --checkbox-derived-control-border: var(--checkbox-derived-border);
+    --checkbox-derived-surface: var(
+      --seblify-tone-control-derived-surface,
+      var(--seblify-color-surface-muted, #d9e0e8)
+    );
+    --checkbox-derived-mark: var(
+      --seblify-tone-control-derived-text,
+      var(--seblify-color-text-muted, #516176)
+    );
+    --checkbox-inner-radius: max(0px, calc(var(--checkbox-radius) - 1px));
+    --checkbox-bounce-fill-inset: 0;
+    --checkbox-bounce-fill-radius: var(--checkbox-inner-radius);
+    --checkbox-default-duration: 400ms;
+    --checkbox-control-duration: var(--checkbox-duration, 140ms);
+    --checkbox-mark-duration: var(--checkbox-duration, 120ms);
+    --checkbox-fade-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-scale-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-bump-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-pop-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-rise-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-rise-exit-phase-duration: calc(
+      var(--checkbox-rise-duration) * 9 / 32
+    );
+    --checkbox-bounce-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-bounce-enter-collapse-duration: calc(
+      var(--checkbox-bounce-duration) / 3
+    );
+    --checkbox-bounce-exit-phase-duration: calc(
+      var(--checkbox-bounce-duration) * 9 / 32
+    );
+    --checkbox-draw-check-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-draw-indeterminate-duration: var(
+      --checkbox-duration,
+      var(--checkbox-default-duration)
+    );
+    --checkbox-label-line-size: 0px;
+    --checkbox-description-line-size: 0px;
+    --checkbox-content-gap: 0px;
+    --checkbox-content-size: var(--checkbox-label-line-size);
+    --checkbox-control-offset: max(
+      0px,
+      calc((var(--checkbox-label-line-size) - var(--checkbox-size)) / 2)
+    );
+    --checkbox-content-offset: max(
+      0px,
+      calc((var(--checkbox-size) - var(--checkbox-content-size)) / 2)
+    );
     position: relative;
     display: inline-flex;
     gap: 10px;
@@ -279,14 +1740,39 @@
     cursor: pointer;
   }
 
+.seblify-checkbox[data-has-label='true'] {
+    --checkbox-label-line-size: 1.35em;
+  }
+
+.seblify-checkbox[data-has-description='true'] {
+    --checkbox-description-line-size: calc(0.875em * 1.45);
+    --checkbox-content-gap: 2px;
+    --checkbox-content-size: calc(
+      var(--checkbox-label-line-size) + var(--checkbox-content-gap) +
+        var(--checkbox-description-line-size)
+    );
+  }
+
 .seblify-checkbox[data-seblify-tone='inherit'] {
     --seblify-tone-fill: var(
       --seblify-current-tone-fill,
-      var(--seblify-color-fill-primary, #146a6f)
+      var(--seblify-color-primary-fill, #b43f5a)
+    );
+    --seblify-tone-fill-hover: var(
+      --seblify-current-tone-fill-hover,
+      var(--seblify-color-primary-fill-hover, #9f334d)
     );
     --seblify-tone-fill-text: var(
       --seblify-current-tone-fill-text,
-      var(--seblify-color-fill-primary-text, #ffffff)
+      var(--seblify-color-primary-fill-text, #fff4e7)
+    );
+    --seblify-tone-surface: var(
+      --seblify-current-tone-surface,
+      var(--seblify-color-primary-surface, #fae8ed)
+    );
+    --seblify-tone-surface-hover: var(
+      --seblify-current-tone-surface-hover,
+      var(--seblify-color-primary-surface-hover, #f5d5dd)
     );
   }
 
@@ -314,26 +1800,310 @@
     justify-content: center;
     border: 1px solid var(--checkbox-border);
     border-radius: var(--checkbox-radius);
-    margin-top: 0.125rem;
+    margin-top: var(--checkbox-control-offset);
     background: var(--checkbox-surface);
     box-sizing: border-box;
     color: var(--checkbox-active-mark);
+    isolation: isolate;
+    transform-origin: center;
     transition:
-      border-color 140ms ease,
-      background 140ms ease,
-      box-shadow 140ms ease;
+      border-color var(--checkbox-control-duration) ease,
+      background var(--checkbox-control-duration) ease,
+      transform var(--checkbox-control-duration) ease,
+      box-shadow var(--checkbox-control-duration) ease;
   }
 
-.seblify-checkbox__mark {
+.seblify-checkbox__control::before {
+    position: absolute;
+    inset: var(--checkbox-bounce-fill-inset);
+    z-index: 3;
+    border-radius: var(--checkbox-bounce-fill-radius);
+    background: var(--checkbox-bounce-fill, var(--checkbox-active-surface));
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0);
+    transform-origin: center;
+  }
+
+.seblify-checkbox__control::after {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    border: 1px solid var(--checkbox-border);
+    border-radius: inherit;
+    box-sizing: border-box;
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0);
+    transform-origin: center;
+  }
+
+.seblify-checkbox__derived-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--checkbox-derived-control-border);
+    border-radius: inherit;
+    background: var(--checkbox-derived-surface);
+    box-sizing: border-box;
+    color: var(--checkbox-derived-mark);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+.seblify-checkbox__derived-mark {
     position: relative;
+    display: grid;
+    width: calc(var(--checkbox-size) * 0.8333333);
+    height: calc(var(--checkbox-size) * 0.8333333);
+    place-items: center;
+    transform: scale(1);
+    transform-origin: center;
+  }
+
+.seblify-checkbox__derived-check,
+  .seblify-checkbox__derived-indeterminate {
+    position: absolute;
+    inset: 0;
     display: block;
-    width: 0.625rem;
-    height: 0.625rem;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    opacity: 0;
+    transform: scale(1);
+    transform-origin: center;
+  }
+
+.seblify-checkbox__derived-check-path,
+  .seblify-checkbox__derived-indeterminate-path {
+    fill: none;
+    stroke: currentColor;
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+    stroke-width: 3.2;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+.seblify-checkbox__derived-indeterminate-path:is(
+    [data-intermediate-mark='dot'],
+    [data-intermediate-mark='square']
+  ) {
+    fill: currentColor;
+    stroke: none;
+    stroke-dasharray: none;
+  }
+
+.seblify-checkbox[data-derived-layer-state='checked']
+    .seblify-checkbox__derived-layer,
+  .seblify-checkbox[data-derived-layer-state='indeterminate']
+    .seblify-checkbox__derived-layer {
+    opacity: 1;
+  }
+
+.seblify-checkbox[data-derived-layer-state='checked']
+    .seblify-checkbox__derived-check,
+  .seblify-checkbox[data-derived-layer-state='indeterminate']
+    .seblify-checkbox__derived-indeterminate {
+    opacity: 1;
+  }
+
+.seblify-checkbox[data-visual-layer='derived']:not(
+      [data-layer-transition='direct-to-derived']
+    )
+    .seblify-checkbox__derived-layer {
+    z-index: 4;
+  }
+
+.seblify-checkbox[data-visual-layer='derived']:not(
+      [data-layer-transition='direct-to-derived']
+    )
+    .seblify-checkbox__mark {
+    animation: none;
+    opacity: 0;
+  }
+
+.seblify-checkbox__mark {
+    position: relative;
+    display: grid;
+    width: calc(var(--checkbox-size) * 0.8333333);
+    height: calc(var(--checkbox-size) * 0.8333333);
+    place-items: center;
     opacity: 0;
     transform: scale(0.86);
+    transform-origin: center;
+    z-index: 5;
+    transition:
+      opacity var(--checkbox-mark-duration) ease,
+      transform var(--checkbox-mark-duration) ease;
+  }
+
+.seblify-checkbox__check,
+  .seblify-checkbox__indeterminate {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    opacity: 0;
+    transform: scale(1);
+    transform-origin: center;
+  }
+
+.seblify-checkbox__check-path,
+  .seblify-checkbox__check-cutout,
+  .seblify-checkbox__indeterminate-path {
+    fill: none;
+    stroke: currentColor;
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+    stroke-width: 3.2;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+.seblify-checkbox__indeterminate-path:is(
+    [data-intermediate-mark='dot'],
+    [data-intermediate-mark='square']
+  ) {
+    fill: currentColor;
+    stroke: none;
+    stroke-dasharray: none;
+  }
+
+.seblify-checkbox__check-cutout {
+    display: none;
+    stroke: var(--checkbox-surface);
+    stroke-width: 7.9;
+  }
+
+.seblify-checkbox[data-state='checked'] .seblify-checkbox__check,
+  .seblify-checkbox[data-state='disabled-checked'] .seblify-checkbox__check,
+  .seblify-checkbox[data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__check {
+    opacity: 1;
+  }
+
+.seblify-checkbox[data-state='indeterminate']
+    .seblify-checkbox__indeterminate,
+  .seblify-checkbox[data-state='disabled-indeterminate']
+    .seblify-checkbox__indeterminate {
+    opacity: 1;
+  }
+
+.seblify-checkbox[data-animation='none'] .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='none'] .seblify-checkbox__mark {
+    transition-duration: 0ms;
+  }
+
+.seblify-checkbox[data-animation='fade'] .seblify-checkbox__mark {
+    transform: scale(1);
+    transition:
+      opacity 0ms linear,
+      transform 0ms linear;
+  }
+
+.seblify-checkbox[data-animation='fade'] .seblify-checkbox__control {
+    transition:
+      border-color var(--checkbox-fade-duration) ease,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-fade-duration) ease;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control {
+    transition:
+      border-color calc(var(--checkbox-fade-duration) * 7 / 10) ease,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-fade-duration) ease;
+  }
+
+.seblify-checkbox[data-animation='bump'] .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='pop'] .seblify-checkbox__control {
+    transition:
+      border-color 0ms linear,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-duration, var(--checkbox-default-duration)) ease;
+  }
+
+.seblify-checkbox[data-animation='scale'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='bump'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='pop'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='rise'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='bounce'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='draw'] .seblify-checkbox__mark {
+    transition:
+      opacity 100ms ease,
+      transform 0ms linear;
+  }
+
+.seblify-checkbox[data-animation='scale'] .seblify-checkbox__control {
+    transition:
+      border-color var(--checkbox-scale-duration) ease,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-scale-duration) ease;
+  }
+
+.seblify-checkbox[data-animation='draw'] .seblify-checkbox__control {
+    overflow: hidden;
+  }
+
+.seblify-checkbox[data-animation='draw'] .seblify-checkbox__control::before {
+    inset: -1px auto auto -1px;
+    width: calc(var(--checkbox-size) * 3.4);
+    height: calc(var(--checkbox-size) * 3.4);
+    border-radius: 999px;
+    transform: translate(-50%, -50%) scale(0);
+    z-index: 3;
+  }
+
+.seblify-checkbox[data-animation='draw'] .seblify-checkbox__control::after {
+    inset: 1px;
+    border: 0;
+    border-radius: max(0px, calc(var(--checkbox-radius) - 1px));
+    background: var(--checkbox-surface);
+    opacity: 1;
+    transform: none;
+    z-index: 0;
+  }
+
+.seblify-checkbox[data-animation='draw'] .seblify-checkbox__mark {
+    z-index: 5;
+  }
+
+.seblify-checkbox[data-animation='bounce'] .seblify-checkbox__control {
+    transition:
+      border-color 0ms linear,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-bounce-duration) ease;
+  }
+
+.seblify-checkbox[data-animation='rise'] .seblify-checkbox__control {
+    overflow: hidden;
     transition:
-      opacity 120ms ease,
-      transform 120ms ease;
+      border-color 0ms linear,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-rise-duration) ease;
   }
 
 .seblify-checkbox[data-state='checked'] .seblify-checkbox__control,
@@ -345,89 +2115,2636 @@
     background: var(--checkbox-active-surface);
   }
 
-.seblify-checkbox[data-state='checked'] .seblify-checkbox__mark,
-  .seblify-checkbox[data-state='indeterminate'] .seblify-checkbox__mark,
-  .seblify-checkbox[data-state='disabled-checked'] .seblify-checkbox__mark,
-  .seblify-checkbox[data-state='disabled-indeterminate']
-    .seblify-checkbox__mark {
-    opacity: 1;
-    transform: scale(1);
+.seblify-checkbox[data-variant='solid'] {
+    --checkbox-bounce-fill: var(--checkbox-active-surface);
+    --checkbox-bounce-fill-inset: -1px;
+    --checkbox-bounce-fill-radius: var(--checkbox-radius);
+    --checkbox-derived-control-border: transparent;
   }
 
-.seblify-checkbox[data-state='checked'] .seblify-checkbox__mark::before,
-  .seblify-checkbox[data-state='disabled-checked']
-    .seblify-checkbox__mark::before {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 0.25rem;
-    height: 0.55rem;
-    border: solid currentColor;
-    border-width: 0 0.125rem 0.125rem 0;
-    content: '';
-    transform: translate(-50%, -58%) rotate(45deg);
+.seblify-checkbox[data-animation='rise'] {
+    --checkbox-bounce-fill-inset: -2px;
+    --checkbox-bounce-fill-radius: calc(var(--checkbox-radius) + 1px);
   }
 
-.seblify-checkbox[data-state='indeterminate']
-    .seblify-checkbox__mark::before,
-  .seblify-checkbox[data-state='disabled-indeterminate']
-    .seblify-checkbox__mark::before {
-    position: absolute;
-    left: 0.0625rem;
-    right: 0.0625rem;
-    top: 50%;
-    height: 0.125rem;
-    border-radius: 999px;
-    background: currentColor;
-    content: '';
-    transform: translateY(-50%);
+.seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: transparent;
   }
 
-.seblify-checkbox > input:focus-visible + .seblify-checkbox__control {
-    outline: 3px solid var(--checkbox-focus-ring);
-    outline-offset: 2px;
+.seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    background: var(--checkbox-surface);
   }
 
-.seblify-checkbox[data-visual-state='derived']
+.seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='disabled-checked']
     .seblify-checkbox__control,
-  .seblify-checkbox[data-visual-state='indirect']
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='disabled-indeterminate']
     .seblify-checkbox__control {
-    --checkbox-active-border: var(--checkbox-derived-border);
-    --checkbox-active-surface: var(--checkbox-derived-surface);
-    --checkbox-active-mark: var(--checkbox-derived-mark);
+    background: var(--checkbox-active-surface);
+  }
 
-    border-color: var(--checkbox-derived-border);
-    background: var(--checkbox-derived-surface);
-    color: var(--checkbox-derived-mark);
+.seblify-checkbox[data-animation='rise'][data-animating='false']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control {
+    background: var(--checkbox-active-surface);
   }
 
-.seblify-checkbox[data-visual-state='direct-and-derived']
-    .seblify-checkbox__control,
-  .seblify-checkbox[data-visual-state='direct-and-indirect']
+.seblify-checkbox[data-animation='rise'][data-animating='true']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is([data-state='checked'], [data-state='indeterminate'])
+    .seblify-checkbox__control::before {
+    background: var(--checkbox-surface);
+  }
+
+.seblify-checkbox:is(
+      [data-animation='fade'],
+      [data-animation='bump'],
+      [data-animation='pop'],
+      [data-animation='scale'],
+      [data-animation='draw']
+    ):is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
     .seblify-checkbox__control {
-    box-shadow: 0 0 0 2px
-      color-mix(in srgb, var(--seblify-tone-fill) 22%, transparent);
+    background: var(--checkbox-surface);
   }
 
-.seblify-checkbox__content {
-    display: grid;
-    gap: 2px;
-    min-width: 0;
+.seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='solid'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='soft'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='tint'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-variant='blank'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before {
+    opacity: 1;
+    transform: scale(1);
   }
 
-.seblify-checkbox__label {
-    font-weight: 700;
-    line-height: 1.35;
+.seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='solid'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='soft'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='tint'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='indeterminate']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='disabled-checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-variant='blank'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::before {
+    opacity: 1;
+    transform: translateY(0);
   }
 
-.seblify-checkbox__description {
-    color: var(--seblify-color-text-muted, #516176);
-    font-size: 0.875rem;
-    line-height: 1.45;
+.seblify-checkbox:is(
+      [data-animation='fade'],
+      [data-animation='bump'],
+      [data-animation='pop'],
+      [data-animation='scale'],
+      [data-animation='draw']
+    ):is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control::before {
+    opacity: 1;
+    transform: scale(1);
   }
 
-.seblify-checkbox.disabled {
-    cursor: not-allowed;
-    opacity: var(--seblify-opacity-disabled, 0.56);
+.seblify-checkbox[data-animation='draw']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control::before {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+.seblify-checkbox[data-variant='outline'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='outline'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='outline'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='outline'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='overflow'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='overflow'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='overflow'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='overflow'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: var(--checkbox-active-border);
+    background: var(--checkbox-surface);
+    color: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='plain'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='plain'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='plain'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='plain'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: transparent;
+    background: transparent;
+    color: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='outline'] .seblify-checkbox__control::before,
+  .seblify-checkbox[data-variant='overflow'] .seblify-checkbox__control::before,
+  .seblify-checkbox[data-variant='plain'] .seblify-checkbox__control::before,
+  .seblify-checkbox[data-variant='inset'] .seblify-checkbox__control::before {
+    content: none;
+  }
+
+.seblify-checkbox[data-variant='soft'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='soft'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='soft'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='soft'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: transparent;
+    background: var(--checkbox-active-soft-surface);
+    color: var(--checkbox-active-soft-mark);
+  }
+
+.seblify-checkbox[data-variant='soft'] {
+    --checkbox-bounce-fill: var(--checkbox-active-soft-surface);
+    --checkbox-derived-control-border: transparent;
+  }
+
+.seblify-checkbox[data-variant='tint'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='tint'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='tint'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='tint'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: transparent;
+    background: var(--checkbox-active-soft-surface);
+    color: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='tint'] {
+    --checkbox-bounce-fill: var(--checkbox-active-soft-surface);
+    --checkbox-derived-control-border: transparent;
+  }
+
+.seblify-checkbox[data-variant='plain'],
+  .seblify-checkbox[data-variant='blank'] {
+    --checkbox-derived-control-border: transparent;
+  }
+
+.seblify-checkbox[data-variant='inset'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='inset'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='inset'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-variant='inset'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: var(--checkbox-active-border);
+    background: var(--checkbox-surface);
+    color: var(--checkbox-active-mark);
+  }
+
+.seblify-checkbox[data-animation='draw']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='draw'][data-animating='true']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is([data-state='unchecked'], [data-state='disabled-unchecked'])
+    .seblify-checkbox__control {
+    background: var(--checkbox-bounce-fill, var(--checkbox-active-surface));
+  }
+
+.seblify-checkbox[data-state='checked'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-state='indeterminate'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-state='disabled-checked'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-state='disabled-indeterminate']
+    .seblify-checkbox__mark {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::before {
+    animation: checkbox-fade-fill-in
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__mark {
+    animation: checkbox-fade-mark-in var(--checkbox-fade-duration) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__mark {
+    animation: checkbox-fade-mark-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before {
+    animation: checkbox-fade-fill-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::before {
+    animation: checkbox-bump-fill-in var(--checkbox-bump-duration)
+      cubic-bezier(0.2, 0.86, 0.2, 1) both;
+  }
+
+.seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__mark {
+    animation: checkbox-bump-in calc(var(--checkbox-bump-duration) * 7 / 10)
+      ease calc(var(--checkbox-bump-duration) * 3 / 20) both;
+  }
+
+.seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__mark {
+    animation: checkbox-bump-out calc(var(--checkbox-bump-duration) * 2 / 5)
+      ease both;
+  }
+
+.seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bump'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before {
+    animation: checkbox-bump-fill-out calc(var(--checkbox-bump-duration) / 2)
+      ease calc(var(--checkbox-bump-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::before {
+    animation: checkbox-pop-fill-in calc(var(--checkbox-pop-duration) * 3 / 5)
+      ease-out both;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__indeterminate {
+    animation: checkbox-pop-mark-in calc(var(--checkbox-pop-duration) * 4 / 5)
+      cubic-bezier(0.16, 0.82, 0.24, 1) calc(var(--checkbox-pop-duration) / 5)
+      both;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__check {
+    animation: checkbox-pop-mark-out calc(var(--checkbox-pop-duration) * 2 / 5)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='pop'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before {
+    animation: checkbox-pop-fill-out calc(var(--checkbox-pop-duration) / 2) ease
+      calc(var(--checkbox-pop-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::before {
+    animation: checkbox-scale-fill-in
+      calc(var(--checkbox-scale-duration) * 9 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__mark {
+    animation: checkbox-scale-mark-in
+      calc(var(--checkbox-scale-duration) * 7 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1)
+      calc(var(--checkbox-scale-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__mark {
+    animation: checkbox-scale-mark-out
+      calc(var(--checkbox-scale-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='checked']:not(
+      [data-variant='blank']
+    ):not([data-variant='inset']):not([data-variant='overflow'])
+    .seblify-checkbox__check {
+    animation: checkbox-scale-check-in
+      calc(var(--checkbox-scale-duration) * 7 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1)
+      calc(var(--checkbox-scale-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='unchecked']:not(
+      [data-variant='blank']
+    ):not([data-variant='inset']):not([data-variant='overflow'])
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='disabled-unchecked']:not(
+      [data-variant='blank']
+    ):not([data-variant='inset']):not([data-variant='overflow'])
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-layer-transition='direct-to-derived']:not(
+      [data-variant='blank']
+    ):not([data-variant='inset']):not([data-variant='overflow'])
+    .seblify-checkbox__check {
+    animation: checkbox-scale-check-out
+      calc(var(--checkbox-scale-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='scale'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::before {
+    animation: checkbox-scale-fill-out
+      calc(var(--checkbox-scale-duration) * 9 / 10) ease
+      calc(var(--checkbox-scale-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::before {
+    animation: checkbox-rise-fill-in calc(var(--checkbox-rise-duration) * 5 / 8)
+      cubic-bezier(0.18, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__mark {
+    animation: checkbox-rise-mark-in calc(var(--checkbox-rise-duration) * 3 / 4)
+      cubic-bezier(0.18, 0.78, 0.24, 1) calc(var(--checkbox-rise-duration) / 4)
+      both;
+  }
+
+.seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='rise'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__mark {
+    animation: checkbox-rise-mark-out var(--checkbox-rise-exit-phase-duration)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='rise'][data-animating='true'][data-layer-transition='direct-to-derived']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control::before {
+    animation: checkbox-rise-fill-out var(--checkbox-rise-exit-phase-duration)
+      ease-in var(--checkbox-rise-exit-phase-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-checked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control {
+    border-color: transparent;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::after,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::after,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-checked']
+    .seblify-checkbox__control::after,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-indeterminate']
+    .seblify-checkbox__control::after {
+    animation: checkbox-bounce-border-collapse
+      var(--checkbox-bounce-enter-collapse-duration) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::after,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::after {
+    animation: checkbox-bounce-border-grow
+      var(--checkbox-bounce-exit-phase-duration) ease-out
+      var(--checkbox-bounce-exit-phase-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::after,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-layer-transition='empty-to-derived']
+    .seblify-checkbox__control::after {
+    animation: none;
+    opacity: 0;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__control::before {
+    animation: checkbox-bounce-fill-in
+      calc(
+        var(--checkbox-bounce-duration) -
+          var(--checkbox-bounce-enter-collapse-duration)
+      )
+      cubic-bezier(0.18, 0.88, 0.28, 1)
+      var(--checkbox-bounce-enter-collapse-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before {
+    animation: checkbox-bounce-fill-out
+      var(--checkbox-bounce-exit-phase-duration) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='indeterminate']
+    .seblify-checkbox__mark {
+    animation: checkbox-bounce-in
+      calc(
+        var(--checkbox-bounce-duration) -
+          var(--checkbox-bounce-enter-collapse-duration)
+      )
+      cubic-bezier(0.18, 0.88, 0.28, 1)
+      var(--checkbox-bounce-enter-collapse-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='checked']:not(
+      [data-variant='overflow']
+    )
+    .seblify-checkbox__check {
+    animation: checkbox-bounce-check-in
+      calc(
+        var(--checkbox-bounce-duration) -
+          var(--checkbox-bounce-enter-collapse-duration)
+      )
+      cubic-bezier(0.18, 0.88, 0.28, 1)
+      var(--checkbox-bounce-enter-collapse-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='checked'][data-variant='overflow']
+    .seblify-checkbox__mark {
+    animation: checkbox-bounce-in
+      calc(
+        var(--checkbox-bounce-duration) -
+          var(--checkbox-bounce-enter-collapse-duration)
+      )
+      cubic-bezier(0.18, 0.88, 0.28, 1)
+      var(--checkbox-bounce-enter-collapse-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='bounce'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__mark {
+    animation: checkbox-bounce-out var(--checkbox-bounce-exit-phase-duration)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-variant='blank'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-variant='blank'][data-state='disabled-checked']
+    .seblify-checkbox__mark {
+    opacity: 0;
+  }
+
+.seblify-checkbox[data-variant='inset'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-variant='inset'][data-state='disabled-checked']
+    .seblify-checkbox__mark {
+    width: calc(var(--checkbox-size) * 0.5555556);
+    height: calc(var(--checkbox-size) * 0.5555556);
+    border-radius: max(0px, calc(var(--checkbox-radius) - 0.125rem));
+    background: var(--checkbox-active-surface);
+    transform: scale(1);
+  }
+
+.seblify-checkbox[data-variant='inset'][data-state='checked']
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-variant='inset'][data-state='disabled-checked']
+    .seblify-checkbox__check {
+    opacity: 0;
+  }
+
+.seblify-checkbox[data-variant='overflow'][data-state='checked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-variant='overflow'][data-state='disabled-checked']
+    .seblify-checkbox__mark {
+    flex: 0 0 auto;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    transform: scale(1);
+  }
+
+.seblify-checkbox[data-variant='overflow'][data-state='checked']
+    .seblify-checkbox__check-cutout,
+  .seblify-checkbox[data-variant='overflow'][data-state='disabled-checked']
+    .seblify-checkbox__check-cutout {
+    display: block;
+  }
+
+.seblify-checkbox[data-variant='overflow']
+    :is(
+      .seblify-checkbox__derived-check-path,
+      .seblify-checkbox__check-path,
+      .seblify-checkbox__visual-check-path
+    ) {
+    stroke-width: clamp(1.6px, calc(var(--checkbox-size) * 0.1333333), 3.2px);
+  }
+
+.seblify-checkbox[data-variant='overflow']
+    :is(
+      .seblify-checkbox__check-cutout,
+      .seblify-checkbox__visual-check-cutout
+    ) {
+    stroke-width: clamp(4px, calc(var(--checkbox-size) * 0.3291667), 7.9px);
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__control::before {
+    animation: checkbox-draw-fill
+      calc(var(--checkbox-draw-check-duration) * 7 / 10) ease-out both;
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='checked']
+    .seblify-checkbox__check-path {
+    animation: checkbox-draw-check
+      calc(var(--checkbox-draw-check-duration) * 5 / 4) ease-out both;
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__mark {
+    animation: checkbox-draw-mark-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 5) linear both;
+    transform: scale(1);
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__check-path,
+  .seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__check-path {
+    animation: checkbox-draw-check-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='unchecked']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='disabled-unchecked']
+    .seblify-checkbox__control::before {
+    animation: checkbox-draw-fill-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-state='indeterminate']:is(
+      [data-intermediate-mark='dash'],
+      [data-intermediate-mark='tilde']
+    )
+    .seblify-checkbox__indeterminate {
+    animation: checkbox-draw-indeterminate
+      var(--checkbox-draw-indeterminate-duration) ease-out;
+    transform-origin: right;
+  }
+
+.seblify-checkbox > input:focus-visible + .seblify-checkbox__control {
+    outline: 3px solid var(--checkbox-focus-ring);
+    outline-offset: 2px;
+  }
+
+.seblify-checkbox[data-visual-state='derived'],
+  .seblify-checkbox[data-visual-state='indirect'] {
+    --checkbox-active-border: var(--checkbox-derived-border);
+    --checkbox-active-surface: var(--checkbox-derived-surface);
+    --checkbox-active-mark: var(--checkbox-derived-mark);
+  }
+
+.seblify-checkbox[data-visual-state='derived'] .seblify-checkbox__control,
+  .seblify-checkbox[data-visual-state='indirect'] .seblify-checkbox__control {
+    border-color: var(--checkbox-derived-control-border);
+    background: var(--checkbox-derived-surface);
+    color: var(--checkbox-derived-mark);
+  }
+
+.seblify-checkbox[data-layer-transition='empty-to-derived']
+    .seblify-checkbox__control {
+    border-color: var(--checkbox-derived-control-border);
+    background: var(--checkbox-surface);
+  }
+
+.seblify-checkbox[data-animating='true'][data-layer-transition='empty-to-derived']
+    .seblify-checkbox__control {
+    transition:
+      border-color var(--checkbox-fade-duration) ease,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow 0ms linear;
+  }
+
+.seblify-checkbox[data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control {
+    transition:
+      border-color 0ms linear,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow 0ms linear;
+  }
+
+.seblify-checkbox[data-layer-transition='direct-to-derived'] {
+    --checkbox-active-border: var(--seblify-tone-fill);
+    --checkbox-active-surface: var(--seblify-tone-fill);
+    --checkbox-active-mark: var(--seblify-tone-fill-text);
+    --checkbox-bounce-fill-inset: 0;
+    --checkbox-bounce-fill-radius: var(--checkbox-inner-radius);
+  }
+
+.seblify-checkbox[data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control {
+    border-width: 0;
+    border-color: transparent;
+    color: var(--checkbox-active-mark);
+  }
+
+.seblify-checkbox[data-animating='true']:is(
+      [data-layer-transition='empty-to-derived']
+    )
+    .seblify-checkbox__derived-layer {
+    border-color: transparent;
+  }
+
+.seblify-checkbox:is(
+      [data-animation='draw'],
+      [data-animation='rise']
+    )[data-animating='true']:is(
+      [data-layer-transition='direct-to-derived'],
+      [data-layer-transition='derived-to-direct']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control {
+    background: transparent !important;
+    transition:
+      border-color 0ms linear,
+      background 0ms linear,
+      transform 0ms linear,
+      box-shadow var(--checkbox-control-duration) ease;
+  }
+
+.seblify-checkbox[data-animation='rise'][data-animating='true'][data-layer-transition='derived-to-direct']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control::before {
+    background: var(--checkbox-active-surface);
+    animation: checkbox-rise-direct-fill-in
+      calc(var(--checkbox-rise-duration) * 5 / 8)
+      cubic-bezier(0.18, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox__content {
+    display: grid;
+    gap: 2px;
+    margin-top: var(--checkbox-content-offset);
+    min-width: 0;
+  }
+
+.seblify-checkbox__label {
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+.seblify-checkbox__description {
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+.seblify-checkbox.disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__mark {
+    animation: checkbox-fade-mark-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::before {
+    animation: checkbox-fade-fill-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='empty-to-derived']
+    .seblify-checkbox__derived-layer {
+    animation: checkbox-fade-mark-in var(--checkbox-fade-duration) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='derived-to-empty']
+    .seblify-checkbox__derived-layer {
+    animation: checkbox-fade-mark-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='empty-to-derived']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='derived-to-empty']
+    .seblify-checkbox__mark,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='empty-to-derived']
+    .seblify-checkbox__control::before,
+  .seblify-checkbox[data-animation='fade'][data-animating='true'][data-layer-transition='derived-to-empty']
+    .seblify-checkbox__control::before {
+    animation: none;
+    opacity: 0;
+  }
+
+.seblify-checkbox[data-animation='bump'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__mark {
+    animation: checkbox-bump-out calc(var(--checkbox-bump-duration) * 2 / 5)
+      ease both;
+  }
+
+.seblify-checkbox[data-animation='bump'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::before {
+    animation: checkbox-bump-fill-out calc(var(--checkbox-bump-duration) / 2)
+      ease calc(var(--checkbox-bump-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-animating='true'][data-layer-transition='direct-to-derived'][data-state='checked']
+    .seblify-checkbox__check,
+  .seblify-checkbox[data-animation='pop'][data-animating='true'][data-layer-transition='direct-to-derived'][data-state='indeterminate']
+    .seblify-checkbox__indeterminate {
+    animation: checkbox-pop-mark-out calc(var(--checkbox-pop-duration) * 2 / 5)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::before {
+    animation: checkbox-pop-fill-out calc(var(--checkbox-pop-duration) / 2) ease
+      calc(var(--checkbox-pop-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='rise'][data-animating='true'][data-layer-transition='direct-to-derived']:is(
+      [data-variant='solid'],
+      [data-variant='soft'],
+      [data-variant='tint'],
+      [data-variant='blank']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control::before {
+    background: var(--checkbox-active-surface);
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__mark {
+    animation: checkbox-bounce-out var(--checkbox-bounce-exit-phase-duration)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::before {
+    animation: checkbox-bounce-fill-out
+      var(--checkbox-bounce-exit-phase-duration) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__derived-layer {
+    animation: checkbox-bounce-border-grow
+      var(--checkbox-bounce-exit-phase-duration) ease-out
+      var(--checkbox-bounce-exit-phase-duration) both;
+    transform-origin: center;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-animating='true'][data-layer-transition='derived-to-direct']
+    .seblify-checkbox__derived-layer {
+    animation: checkbox-bounce-border-collapse
+      var(--checkbox-bounce-enter-collapse-duration) ease-in both;
+    transform-origin: center;
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__mark {
+    animation: checkbox-draw-mark-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 5) linear both;
+    transform: scale(1);
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__check-path {
+    animation: checkbox-draw-check-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='draw'][data-animating='true'][data-layer-transition='direct-to-derived']
+    .seblify-checkbox__control::before {
+    animation: checkbox-draw-fill-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-visual-layer='derived']:not(
+      [data-layer-transition='direct-to-derived']
+    ):is(
+      [data-state='checked'],
+      [data-state='indeterminate'],
+      [data-state='disabled-checked'],
+      [data-state='disabled-indeterminate']
+    )
+    .seblify-checkbox__control::before {
+    animation: none;
+    opacity: 0;
+  }
+
+.seblify-checkbox .seblify-checkbox__control {
+    overflow: hidden;
+    border: 0 !important;
+    background: transparent !important;
+    color: var(--checkbox-active-mark);
+  }
+
+.seblify-checkbox[data-variant='overflow'] .seblify-checkbox__control {
+    overflow: visible;
+  }
+
+.seblify-checkbox .seblify-checkbox__control::before,
+  .seblify-checkbox .seblify-checkbox__control::after,
+  .seblify-checkbox .seblify-checkbox__derived-layer,
+  .seblify-checkbox .seblify-checkbox__mark {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+
+.seblify-checkbox .seblify-checkbox__derived-layer,
+  .seblify-checkbox .seblify-checkbox__mark {
+    display: none !important;
+  }
+
+.seblify-checkbox__visual-stack {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+.seblify-checkbox__visual-layer {
+    --checkbox-layer-border: var(--checkbox-active-border);
+    --checkbox-layer-surface: var(--checkbox-active-surface);
+    --checkbox-layer-mark: var(--checkbox-active-mark);
+
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: inherit;
+    box-sizing: border-box;
+    color: var(--checkbox-layer-mark);
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    transform-origin: center;
+  }
+
+.seblify-checkbox__visual-layer::before {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    border: 1px solid var(--checkbox-layer-border);
+    border-radius: inherit;
+    box-sizing: border-box;
+    content: '';
+    pointer-events: none;
+    transform-origin: center;
+  }
+
+.seblify-checkbox__visual-layer[data-checkbox-layer='empty'] {
+    --checkbox-layer-border: var(--checkbox-border);
+    --checkbox-layer-surface: var(--checkbox-surface);
+    --checkbox-layer-mark: transparent;
+
+    z-index: 0;
+  }
+
+.seblify-checkbox__visual-layer[data-checkbox-layer='indirect-indeterminate'] {
+    z-index: 1;
+  }
+
+.seblify-checkbox__visual-layer[data-checkbox-layer='indirect-checked'] {
+    z-index: 2;
+  }
+
+.seblify-checkbox__visual-layer[data-checkbox-layer='direct-indeterminate'] {
+    z-index: 3;
+  }
+
+.seblify-checkbox__visual-layer[data-checkbox-layer='direct-checked'] {
+    z-index: 4;
+  }
+
+.seblify-checkbox__visual-layer[data-layer-kind='indirect'] {
+    --checkbox-layer-border: var(--checkbox-derived-control-border);
+    --checkbox-layer-surface: var(--checkbox-derived-surface);
+    --checkbox-layer-mark: var(--checkbox-derived-mark);
+  }
+
+.seblify-checkbox__visual-layer[data-layer-state='visible'],
+  .seblify-checkbox__visual-layer[data-layer-state='enter'],
+  .seblify-checkbox__visual-layer[data-layer-state='exit'] {
+    opacity: 1;
+  }
+
+.seblify-checkbox__visual-layer[data-layer-state='visible'] {
+    background: var(--checkbox-layer-surface);
+  }
+
+.seblify-checkbox[data-variant='solid']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'][data-layer-state='visible'] {
+    background: transparent;
+  }
+
+.seblify-checkbox[data-variant='solid']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    overflow: visible;
+  }
+
+.seblify-checkbox[data-variant='solid']:is(
+      [data-animation='rise'],
+      [data-animation='draw']
+    )
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    overflow: hidden;
+  }
+
+.seblify-checkbox__visual-surface {
+    position: absolute;
+    inset: -1px;
+    z-index: 1;
+    border-radius: inherit;
+    background: var(--checkbox-layer-surface);
+    opacity: 1;
+    transform-origin: center;
+  }
+
+.seblify-checkbox[data-variant='solid']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct']
+    .seblify-checkbox__visual-surface {
+    inset: 0;
+  }
+
+.seblify-checkbox__visual-mark {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    width: calc(var(--checkbox-size) * 0.8333333);
+    height: calc(var(--checkbox-size) * 0.8333333);
+    place-items: center;
+    opacity: 1;
+    transform-origin: center;
+  }
+
+.seblify-checkbox__visual-check,
+  .seblify-checkbox__visual-indeterminate {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+.seblify-checkbox__visual-check-path,
+  .seblify-checkbox__visual-check-cutout,
+  .seblify-checkbox__visual-indeterminate-path {
+    fill: none;
+    stroke: currentColor;
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+    stroke-width: 3.2;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+.seblify-checkbox__visual-indeterminate-path:is(
+    [data-intermediate-mark='dot'],
+    [data-intermediate-mark='square']
+  ) {
+    fill: currentColor;
+    stroke: none;
+    stroke-dasharray: none;
+  }
+
+.seblify-checkbox__visual-check-cutout {
+    display: none;
+    stroke: var(--checkbox-layer-surface);
+    stroke-width: 7.9;
+  }
+
+.seblify-checkbox[data-variant='solid']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-border: transparent;
+
+    border-width: 0;
+  }
+
+.seblify-checkbox[data-variant='soft']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-border: transparent;
+    --checkbox-layer-surface: var(--checkbox-active-soft-surface);
+    --checkbox-layer-mark: var(--checkbox-active-soft-mark);
+  }
+
+.seblify-checkbox[data-variant='tint']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-border: transparent;
+    --checkbox-layer-surface: var(--checkbox-active-soft-surface);
+    --checkbox-layer-mark: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='outline']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'],
+  .seblify-checkbox[data-variant='overflow']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-surface: var(--checkbox-surface);
+    --checkbox-layer-mark: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='outline']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'] {
+    --checkbox-layer-surface: transparent;
+  }
+
+.seblify-checkbox[data-variant='overflow']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'] {
+    --checkbox-layer-surface: var(--checkbox-surface);
+  }
+
+.seblify-checkbox[data-variant='plain']
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty']) {
+    --checkbox-layer-border: transparent;
+    --checkbox-layer-surface: transparent;
+
+    overflow: visible;
+  }
+
+.seblify-checkbox[data-variant='plain']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-mark: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='plain']
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty'])
+    .seblify-checkbox__visual-mark {
+    flex: 0 0 auto;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-border: transparent;
+    --checkbox-layer-mark-surface: var(--checkbox-active-surface);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'] {
+    --checkbox-layer-border: transparent;
+    --checkbox-layer-mark-surface: var(--checkbox-derived-mark);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'][data-selection='indeterminate'] {
+    --checkbox-layer-border: var(--checkbox-active-border);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'][data-selection='indeterminate'] {
+    --checkbox-layer-border: var(--checkbox-derived-border);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty']) {
+    --checkbox-layer-surface: transparent;
+
+    background: transparent;
+  }
+
+.seblify-checkbox[data-variant='inset']
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'] {
+    --checkbox-layer-surface: var(--checkbox-surface);
+    --checkbox-layer-mark-surface: var(--checkbox-active-surface);
+  }
+
+.seblify-checkbox[data-variant='inset']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'] {
+    --checkbox-layer-surface: var(--checkbox-surface);
+    --checkbox-layer-mark-surface: var(--checkbox-derived-mark);
+  }
+
+.seblify-checkbox:is([data-variant='blank'], [data-variant='inset'])
+    .seblify-checkbox__visual-layer[data-layer-kind='direct'][data-selection='indeterminate'] {
+    --checkbox-layer-mark: var(--checkbox-layer-mark-surface);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-selection='checked']
+    .seblify-checkbox__visual-surface {
+    background: transparent;
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-selection='checked']
+    .seblify-checkbox__visual-mark {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    border-radius: inherit;
+    background: var(--checkbox-layer-mark-surface);
+  }
+
+.seblify-checkbox[data-variant='inset']
+    .seblify-checkbox__visual-layer[data-selection='checked']
+    .seblify-checkbox__visual-mark {
+    width: calc(var(--checkbox-size) * 0.5555556);
+    height: calc(var(--checkbox-size) * 0.5555556);
+    border-radius: max(0px, calc(var(--checkbox-radius) - 0.125rem));
+    background: var(--checkbox-layer-mark-surface);
+  }
+
+.seblify-checkbox[data-variant='blank']
+    .seblify-checkbox__visual-layer[data-selection='checked']
+    .seblify-checkbox__visual-check,
+  .seblify-checkbox[data-variant='inset']
+    .seblify-checkbox__visual-layer[data-selection='checked']
+    .seblify-checkbox__visual-check {
+    opacity: 0;
+  }
+
+.seblify-checkbox[data-variant='overflow']
+    .seblify-checkbox__visual-layer[data-selection='checked']
+    .seblify-checkbox__visual-mark {
+    flex: 0 0 auto;
+    z-index: 4;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+  }
+
+.seblify-checkbox[data-variant='overflow']
+    .seblify-checkbox__visual-layer[data-selection='checked'] {
+    overflow: visible;
+  }
+
+.seblify-checkbox[data-variant='overflow']
+    .seblify-checkbox__visual-check-cutout {
+    display: block;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before,
+  .seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before,
+  .seblify-checkbox[data-animation='pop']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before,
+  .seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before,
+  .seblify-checkbox[data-animation='rise']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before,
+  .seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before {
+    animation: checkbox-layer-border-in var(--checkbox-default-duration) ease
+      both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before,
+  .seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before,
+  .seblify-checkbox[data-animation='pop']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before,
+  .seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before,
+  .seblify-checkbox[data-animation='rise']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before,
+  .seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before {
+    animation: checkbox-layer-border-out var(--checkbox-default-duration) ease
+      both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']::before {
+    animation: checkbox-layer-border-in var(--checkbox-fade-duration) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']::before {
+    animation: checkbox-layer-border-out var(--checkbox-fade-duration) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true']:not(
+      [data-variant='blank']
+    ):is(
+      [data-transition-from-layer='direct-checked'][data-transition-to-layer='direct-indeterminate'],
+      [data-transition-from-layer='direct-indeterminate'][data-transition-to-layer='direct-checked'],
+      [data-transition-from-layer='indirect-checked'][data-transition-to-layer='indirect-indeterminate'],
+      [data-transition-from-layer='indirect-indeterminate'][data-transition-to-layer='indirect-checked']
+    )
+    .seblify-checkbox__visual-layer:is(
+      [data-layer-state='enter'],
+      [data-layer-state='exit']
+    )::before {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-fade-fill-in
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-fade-mark-in var(--checkbox-fade-duration) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-fade-fill-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-fade-mark-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true']:is(
+      [data-transition-from-layer='direct-checked'][data-transition-to-layer='direct-indeterminate'],
+      [data-transition-from-layer='direct-indeterminate'][data-transition-to-layer='direct-checked'],
+      [data-transition-from-layer='indirect-checked'][data-transition-to-layer='indirect-indeterminate'],
+      [data-transition-from-layer='indirect-indeterminate'][data-transition-to-layer='indirect-checked']
+    )
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-shape-swap-mark-out var(--checkbox-fade-duration) ease
+      both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true']:is(
+      [data-transition-from-layer='direct-checked'][data-transition-to-layer='direct-indeterminate'],
+      [data-transition-from-layer='direct-indeterminate'][data-transition-to-layer='direct-checked'],
+      [data-transition-from-layer='indirect-checked'][data-transition-to-layer='indirect-indeterminate'],
+      [data-transition-from-layer='indirect-indeterminate'][data-transition-to-layer='indirect-checked']
+    )
+    .seblify-checkbox__visual-layer:is(
+      [data-layer-state='enter'],
+      [data-layer-state='visible']
+    )
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-shape-swap-mark-in var(--checkbox-fade-duration)
+      cubic-bezier(0.2, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox[data-animation='fade'][data-animating='true']:is(
+      [data-transition-from-layer='direct-indeterminate'][data-transition-to-layer='direct-checked'],
+      [data-transition-from-layer='indirect-indeterminate'][data-transition-to-layer='indirect-checked']
+    )
+    .seblify-checkbox__visual-layer[data-layer-state='visible'][data-selection='indeterminate']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-shape-swap-mark-out var(--checkbox-fade-duration) ease
+      both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer[data-checkbox-layer='empty'][data-layer-state='enter'] {
+    animation: checkbox-fade-mark-in
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='fade']
+    .seblify-checkbox__visual-layer[data-checkbox-layer='empty'][data-layer-state='exit'] {
+    animation: checkbox-fade-mark-out
+      calc(var(--checkbox-fade-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-scale-fill-in
+      calc(var(--checkbox-scale-duration) * 9 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-scale-mark-in
+      calc(var(--checkbox-scale-duration) * 7 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1)
+      calc(var(--checkbox-scale-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-check {
+    animation: checkbox-scale-check-in
+      calc(var(--checkbox-scale-duration) * 7 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1)
+      calc(var(--checkbox-scale-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-scale-fill-out
+      calc(var(--checkbox-scale-duration) * 9 / 10) ease
+      calc(var(--checkbox-scale-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-scale-mark-out
+      calc(var(--checkbox-scale-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='scale']
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-check {
+    animation: checkbox-scale-check-out
+      calc(var(--checkbox-scale-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='scale']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-surface,
+  .seblify-checkbox[data-animation='scale']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='scale']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-scale-check-in
+      calc(var(--checkbox-scale-duration) * 7 / 10)
+      cubic-bezier(0.2, 0.78, 0.24, 1)
+      calc(var(--checkbox-scale-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='scale']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-scale-check-out
+      calc(var(--checkbox-scale-duration) * 7 / 10) ease both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-variant='blank']
+    .seblify-checkbox__visual-layer[data-checkbox-layer='empty'][data-layer-state='exit']::before,
+  .seblify-checkbox[data-animation='scale'][data-variant='inset']
+    .seblify-checkbox__visual-layer[data-checkbox-layer='empty'][data-layer-state='enter']::before {
+    animation: none;
+    opacity: 1;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-variant='inset']
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']::before {
+    animation: checkbox-inset-scale-border-in var(--checkbox-scale-duration)
+      ease both;
+  }
+
+.seblify-checkbox[data-animation='scale'][data-variant='inset']
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']::before {
+    animation: checkbox-inset-scale-border-out var(--checkbox-scale-duration)
+      ease both;
+  }
+
+.seblify-checkbox:is([data-animation='bump'], [data-animation='bounce']),
+  .seblify-checkbox[data-animation='pop'][data-variant='blank'] {
+    --checkbox-motion-overshoot-space: calc(var(--checkbox-size) * 0.24);
+  }
+
+.seblify-checkbox:is([data-animation='bump'], [data-animation='bounce'])
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-animation='pop'][data-variant='blank']
+    .seblify-checkbox__control {
+    overflow: visible;
+  }
+
+.seblify-checkbox:is([data-animation='bump'], [data-animation='bounce'])
+    .seblify-checkbox__visual-stack,
+  .seblify-checkbox[data-animation='pop'][data-variant='blank']
+    .seblify-checkbox__visual-stack {
+    inset: calc(var(--checkbox-motion-overshoot-space) * -1);
+    overflow: hidden;
+  }
+
+.seblify-checkbox:is([data-animation='bump'], [data-animation='bounce'])
+    .seblify-checkbox__visual-layer,
+  .seblify-checkbox[data-animation='pop'][data-variant='blank']
+    .seblify-checkbox__visual-layer {
+    inset: var(--checkbox-motion-overshoot-space);
+  }
+
+.seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty']) {
+    overflow: visible;
+  }
+
+.seblify-checkbox[data-animation='pop'][data-variant='blank']
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty']) {
+    overflow: visible;
+  }
+
+.seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-bump-fill-in var(--checkbox-bump-duration)
+      cubic-bezier(0.2, 0.86, 0.2, 1) both;
+  }
+
+.seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-bump-in calc(var(--checkbox-bump-duration) * 7 / 10)
+      ease calc(var(--checkbox-bump-duration) * 3 / 20) both;
+  }
+
+.seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-bump-fill-out calc(var(--checkbox-bump-duration) / 2)
+      ease calc(var(--checkbox-bump-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='bump']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-bump-out calc(var(--checkbox-bump-duration) * 2 / 5)
+      ease both;
+  }
+
+.seblify-checkbox[data-animation='bump']:is(
+      [data-variant='blank'],
+      [data-variant='plain']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-surface,
+  .seblify-checkbox[data-animation='bump']:is(
+      [data-variant='blank'],
+      [data-variant='plain']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='bump']:is(
+      [data-variant='blank'],
+      [data-variant='plain']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-pop-mark-in calc(var(--checkbox-bump-duration) * 4 / 5)
+      cubic-bezier(0.16, 0.82, 0.24, 1) calc(var(--checkbox-bump-duration) / 5)
+      both;
+  }
+
+.seblify-checkbox[data-animation='bump']:is(
+      [data-variant='blank'],
+      [data-variant='plain']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-pop-mark-out calc(var(--checkbox-bump-duration) * 2 / 5)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bump']:is(
+      [data-variant='outline'],
+      [data-variant='inset'],
+      [data-variant='overflow']
+    )
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty'])
+    .seblify-checkbox__visual-surface {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='bump']:is(
+      [data-variant='outline'],
+      [data-variant='inset'],
+      [data-variant='overflow']
+    )
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']::before {
+    animation: checkbox-bump-fill-in var(--checkbox-bump-duration)
+      cubic-bezier(0.2, 0.86, 0.2, 1) both;
+  }
+
+.seblify-checkbox[data-animation='bump']:is(
+      [data-variant='outline'],
+      [data-variant='inset'],
+      [data-variant='overflow']
+    )
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit']::before {
+    animation: checkbox-bump-fill-out calc(var(--checkbox-bump-duration) / 2)
+      ease calc(var(--checkbox-bump-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='pop']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-pop-fill-in calc(var(--checkbox-pop-duration) * 3 / 5)
+      ease-out both;
+  }
+
+.seblify-checkbox[data-animation='pop']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-pop-mark-in calc(var(--checkbox-pop-duration) * 4 / 5)
+      cubic-bezier(0.16, 0.82, 0.24, 1) calc(var(--checkbox-pop-duration) / 5)
+      both;
+  }
+
+.seblify-checkbox[data-animation='pop']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-pop-fill-out calc(var(--checkbox-pop-duration) / 2) ease
+      calc(var(--checkbox-pop-duration) / 10) both;
+  }
+
+.seblify-checkbox[data-animation='pop']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-pop-mark-out calc(var(--checkbox-pop-duration) * 2 / 5)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='rise']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-rise-direct-fill-in
+      calc(var(--checkbox-rise-duration) * 5 / 8)
+      cubic-bezier(0.18, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox[data-animation='rise']
+    .seblify-checkbox__visual-layer[data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-rise-mark-in calc(var(--checkbox-rise-duration) * 3 / 4)
+      cubic-bezier(0.18, 0.78, 0.24, 1) calc(var(--checkbox-rise-duration) / 4)
+      both;
+  }
+
+.seblify-checkbox[data-animation='rise']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-rise-fill-out var(--checkbox-rise-exit-phase-duration)
+      ease-in var(--checkbox-rise-exit-phase-duration) both;
+  }
+
+.seblify-checkbox[data-animation='rise']
+    .seblify-checkbox__visual-layer[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-rise-mark-out var(--checkbox-rise-exit-phase-duration)
+      ease-in both;
+  }
+
+.seblify-checkbox[data-animation='rise']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-surface,
+  .seblify-checkbox[data-animation='rise']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='rise']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-rise-direct-fill-in
+      calc(var(--checkbox-rise-duration) * 5 / 8)
+      cubic-bezier(0.18, 0.78, 0.24, 1) both;
+  }
+
+.seblify-checkbox[data-animation='rise']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-rise-fill-out var(--checkbox-rise-exit-phase-duration)
+      ease-in var(--checkbox-rise-exit-phase-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer:not([data-checkbox-layer='empty']) {
+    overflow: visible;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter'] {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-bounce-fill-in
+      calc(
+        var(--checkbox-bounce-duration) -
+          var(--checkbox-bounce-enter-collapse-duration)
+      )
+      cubic-bezier(0.18, 0.88, 0.28, 1)
+      var(--checkbox-bounce-enter-collapse-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-bounce-check-in
+      calc(
+        var(--checkbox-bounce-duration) -
+          var(--checkbox-bounce-enter-collapse-duration)
+      )
+      cubic-bezier(0.18, 0.88, 0.28, 1)
+      var(--checkbox-bounce-enter-collapse-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit'] {
+    animation: checkbox-bounce-fill-out
+      var(--checkbox-bounce-exit-phase-duration) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-stack-transition='enter']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'][data-layer-state='exit'] {
+    animation: checkbox-bounce-border-collapse
+      var(--checkbox-bounce-enter-collapse-duration) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer[data-checkbox-layer='empty'][data-layer-state='exit'] {
+    animation: checkbox-bounce-border-collapse
+      var(--checkbox-bounce-enter-collapse-duration) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='bounce']
+    .seblify-checkbox__visual-layer[data-checkbox-layer='empty'][data-layer-state='enter'] {
+    animation: checkbox-bounce-border-grow
+      var(--checkbox-bounce-exit-phase-duration) ease-out
+      var(--checkbox-bounce-exit-phase-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-stack-transition='exit']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'][data-layer-state='enter'] {
+    animation: checkbox-bounce-border-grow
+      var(--checkbox-bounce-exit-phase-duration) ease-out
+      var(--checkbox-bounce-exit-phase-duration) both;
+  }
+
+.seblify-checkbox[data-animation='bounce'][data-stack-transition='exit']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'][data-layer-state='enter']
+    .seblify-checkbox__visual-surface,
+  .seblify-checkbox[data-animation='bounce'][data-stack-transition='exit']
+    .seblify-checkbox__visual-layer[data-layer-kind='indirect'][data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-draw-fill
+      calc(var(--checkbox-draw-check-duration) * 7 / 10) ease-out both;
+  }
+
+.seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-check-path {
+    animation: checkbox-draw-check
+      calc(var(--checkbox-draw-check-duration) * 5 / 4) ease-out both;
+  }
+
+.seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='enter']
+    .seblify-checkbox__visual-indeterminate-path:is(
+      [data-intermediate-mark='dash'],
+      [data-intermediate-mark='tilde']
+    ) {
+    animation: checkbox-draw-indeterminate
+      var(--checkbox-draw-indeterminate-duration) ease-out;
+    transform-origin: right;
+  }
+
+.seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: checkbox-draw-fill-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) both;
+  }
+
+.seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit']
+    .seblify-checkbox__visual-check-path {
+    animation: checkbox-draw-check-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in both;
+  }
+
+.seblify-checkbox[data-animation='draw']
+    .seblify-checkbox__visual-layer:not(
+      [data-checkbox-layer='empty']
+    )[data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-draw-mark-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 5) linear both;
+  }
+
+.seblify-checkbox[data-animation='draw']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-surface,
+  .seblify-checkbox[data-animation='draw']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-surface {
+    animation: none;
+  }
+
+.seblify-checkbox[data-animation='draw']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='enter']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-draw-fill
+      calc(var(--checkbox-draw-check-duration) * 7 / 10) ease-out both;
+  }
+
+.seblify-checkbox[data-animation='draw']:is(
+      [data-variant='blank'],
+      [data-variant='inset']
+    )
+    .seblify-checkbox__visual-layer[data-selection='checked'][data-layer-state='exit']
+    .seblify-checkbox__visual-mark {
+    animation: checkbox-draw-fill-out
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) ease-in
+      calc(var(--checkbox-draw-check-duration) * 3 / 10) both;
+  }
+
+@keyframes checkbox-bump-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bump-fill-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+
+    18% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    52% {
+      opacity: 1;
+      transform: scale(1.16);
+    }
+
+    76% {
+      opacity: 1;
+      transform: scale(0.98);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bump-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bump-fill-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-pop-fill-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-pop-mark-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.35);
+    }
+
+    45% {
+      opacity: 1;
+      transform: scale(1.24);
+    }
+
+    72% {
+      opacity: 1;
+      transform: scale(0.94);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-pop-mark-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(0.62);
+    }
+  }
+
+@keyframes checkbox-pop-fill-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-scale-fill-in {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-fade-fill-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-fade-fill-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-fade-mark-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-fade-mark-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-layer-border-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+@keyframes checkbox-layer-border-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+@keyframes checkbox-inset-scale-border-in {
+    0% {
+      border-color: var(--checkbox-border);
+      opacity: 1;
+    }
+
+    100% {
+      border-color: var(--checkbox-layer-border);
+      opacity: 1;
+    }
+  }
+
+@keyframes checkbox-inset-scale-border-out {
+    0% {
+      border-color: var(--checkbox-layer-border);
+      opacity: 1;
+    }
+
+    100% {
+      border-color: var(--checkbox-border);
+      opacity: 1;
+    }
+  }
+
+@keyframes checkbox-shape-swap-mark-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    36% {
+      opacity: 0;
+      transform: scale(0.82);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(0.82);
+    }
+  }
+
+@keyframes checkbox-shape-swap-mark-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.82);
+    }
+
+    28% {
+      opacity: 0;
+      transform: scale(0.82);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-scale-fill-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
+@keyframes checkbox-scale-mark-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-scale-mark-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-scale-check-in {
+    0% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-scale-check-out {
+    0% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0);
+    }
+  }
+
+@keyframes checkbox-rise-fill-in {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(-100%);
+    }
+  }
+
+@keyframes checkbox-rise-direct-fill-in {
+    0% {
+      opacity: 1;
+      transform: translateY(100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+@keyframes checkbox-rise-fill-out {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 0.24;
+      transform: translateY(100%);
+    }
+  }
+
+@keyframes checkbox-rise-mark-in {
+    0% {
+      opacity: 0;
+      transform: translateY(65%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+@keyframes checkbox-rise-mark-out {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateY(65%);
+    }
+  }
+
+@keyframes checkbox-bounce-in {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    62% {
+      opacity: 1;
+      transform: scale(1.28);
+    }
+
+    84% {
+      transform: scale(0.94);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bounce-check-in {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    62% {
+      opacity: 1;
+      transform: scale(1.28);
+    }
+
+    84% {
+      transform: scale(0.94);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bounce-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
+@keyframes checkbox-bounce-border-collapse {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    99% {
+      opacity: 1;
+      transform: scale(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
+@keyframes checkbox-bounce-border-grow {
+    0% {
+      opacity: 1;
+      transform: scale(0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bounce-fill-in {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    58% {
+      opacity: 1;
+      transform: scale(1.34);
+    }
+
+    82% {
+      opacity: 1;
+      transform: scale(0.92);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+@keyframes checkbox-bounce-fill-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
+@keyframes checkbox-draw-check {
+    0%,
+    45% {
+      stroke-dashoffset: 1;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+@keyframes checkbox-draw-check-out {
+    0% {
+      stroke-dashoffset: 0;
+    }
+
+    100% {
+      stroke-dashoffset: 1;
+    }
+  }
+
+@keyframes checkbox-draw-mark-out {
+    0%,
+    99% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+@keyframes checkbox-draw-fill {
+    0% {
+      clip-path: circle(0% at 0 0);
+      opacity: 1;
+    }
+
+    100% {
+      clip-path: circle(150% at 0 0);
+      opacity: 1;
+    }
+  }
+
+@keyframes checkbox-draw-fill-out {
+    0% {
+      clip-path: circle(150% at 0 0);
+      opacity: 1;
+    }
+
+    100% {
+      clip-path: circle(0% at 0 0);
+      opacity: 1;
+    }
+  }
+
+@keyframes checkbox-draw-indeterminate {
+    0% {
+      transform: scaleX(0);
+    }
+
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+@media (prefers-reduced-motion: reduce) {
+    .seblify-checkbox__control,
+    .seblify-checkbox__control::before,
+    .seblify-checkbox__control::after,
+    .seblify-checkbox__mark,
+    .seblify-checkbox__check,
+    .seblify-checkbox__check-path,
+    .seblify-checkbox__indeterminate {
+      animation: none !important;
+      transition-duration: 0ms !important;
+    }
   }
 </style>