Switch

---
/**
 * Switch — a toggle that springs, zero JS. It *is* a checkbox: `<input
 * type="checkbox" role="switch">` with `appearance: none`, the input itself
 * drawn as the track and its ::before as the thumb, so the value submits,
 * `required` and `disabled` work, Space flips it and a form library sees a
 * plain checkbox. The thumb travels on `translate` with the preset curve
 * (snap and lively are sampled springs, so it lands with a bounce); the
 * track colour crosses on the fast token. WebKit's native `switch`
 * attribute is set too, but nothing here depends on it. Wrapped in a
 * <label> when `label` is given; otherwise pass `aria-label`. Classes are
 * `.ma-toggle` — `.ma-switch` was already taken.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size'> {
  /** Form field name. */
  name?: string;
  /** Submitted value when on. */
  value?: string;
  checked?: boolean;
  /** Visible label; without it, pass aria-label. */
  label?: string;
  /** Track height: 1.25rem or 1.5rem. */
  size?: 'sm' | 'md';
  /** Track colour when on; default the ink token. */
  color?: string;
}

const { name, value = 'on', checked = false, label, size = 'md', color, class: className, style, ...rest } = Astro.props;
const vars = [color && `--ma-toggle-on:${color}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
// the WebKit native switch attribute: harmless elsewhere, and appearance: none overrides its look everywhere
const native = { switch: '' };
---

<label class:list={['ma-toggle', className]} data-size={size} style={vars || undefined}>
  <input type="checkbox" role="switch" class="ma-toggle__input" name={name} value={value} checked={checked} {...native} {...rest} />
  {label && <span class="ma-toggle__label">{label}</span>}
</label>

<style is:global>
  @layer components {
    :where(.ma-toggle) {
      --ma-toggle-h: 1.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    :where(.ma-toggle[data-size='sm']) {
      --ma-toggle-h: 1.25rem;
    }
    :where(.ma-toggle__input) {
      /* the track: the input itself, so the value, the focus and the keyboard are the browser's */
      appearance: none;
      -webkit-appearance: none;
      position: relative;
      flex: none;
      inline-size: calc(var(--ma-toggle-h) * 1.75);
      block-size: var(--ma-toggle-h);
      margin: 0;
      border: 1px solid var(--ma-edge);
      border-radius: 999px;
      background: color-mix(in srgb, var(--ma-ink) 14%, transparent);
      cursor: pointer;
      font: inherit;
      transition:
        background-color var(--ma-duration-fast) var(--ma-ease-out),
        border-color var(--ma-duration-fast) var(--ma-ease-out);
    }
    :where(.ma-toggle__input)::before {
      /* the thumb: a pseudo-element, travelling the track width minus itself on the preset spring */
      content: '';
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 0;
      inline-size: calc(var(--ma-toggle-h) - 6px);
      block-size: calc(var(--ma-toggle-h) - 6px);
      margin-block-start: calc((var(--ma-toggle-h) - 6px) / -2);
      margin-inline-start: 2px;
      border-radius: 50%;
      background: var(--ma-panel);
      box-shadow: 0 1px 2px var(--ma-glow);
      translate: 0 0;
      transition: translate var(--ma-duration) var(--ma-ease);
    }
    /* the target: whatever the track's size, the input answers a press within 24 × 24 px (WCAG 2.2) — a pseudo-element of the input is part of it for hit testing */
    :where(.ma-toggle__input)::after {
      content: '';
      position: absolute;
      inset: min(0px, calc((var(--ma-toggle-h) - 26px) / 2)) min(0px, calc((var(--ma-toggle-h) * 1.75 - 26px) / 2));
    }
    :where(.ma-toggle__input:checked) {
      background: var(--ma-toggle-on, var(--ma-ink));
      border-color: var(--ma-toggle-on, var(--ma-ink));
    }
    :where(.ma-toggle__input:checked)::before {
      translate: calc(var(--ma-toggle-h) * 0.75 * var(--ma-toggle-dir, 1)) 0;
    }
    /* right to left: the thumb starts at the right end (inset-inline-start), so on is a move to the left, and translate
       has no logical form. [dir] and not :dir(): Chrome has :dir() only from 120, and a build that targets an older
       Chrome rewrites it into a guess from lang, which a page that sets only dir never matches. An ltr island one level
       inside an rtl page is set back */
    :where([dir='rtl'] .ma-toggle, .ma-toggle__input[dir='rtl']) {
      --ma-toggle-dir: -1;
    }
    :where([dir='rtl'] [dir='ltr'] .ma-toggle, [dir='rtl'] .ma-toggle__input[dir='ltr']) {
      --ma-toggle-dir: 1;
    }
    :where(.ma-toggle__input:focus-visible) {
      outline: 2px solid var(--ma-toggle-on, var(--ma-ink));
      outline-offset: 3px;
    }
    :where(.ma-toggle__input:disabled) {
      cursor: not-allowed;
      opacity: 0.45;
      transition: none;
    }
    :where(.ma-toggle__input:disabled)::before {
      transition: none;
    }
    :where(.ma-toggle:has(.ma-toggle__input:disabled)) {
      cursor: not-allowed;
    }
    :where(.ma-toggle:has(.ma-toggle__input:disabled) .ma-toggle__label) {
      opacity: 0.6;
    }
    :where(.ma-toggle__label) {
      line-height: 1.2;
      user-select: none;
    }
    /* Windows high contrast: the track is a stroke, the thumb a filled dot, on = Highlight */
    @media (forced-colors: active) {
      :where(.ma-toggle__input) {
        border-color: ButtonText;
        background: Canvas;
      }
      :where(.ma-toggle__input)::before {
        background: ButtonText;
        box-shadow: none;
      }
      :where(.ma-toggle__input:checked) {
        background: Highlight;
        border-color: Highlight;
      }
      :where(.ma-toggle__input:checked)::before {
        background: HighlightText;
      }
      :where(.ma-toggle__input:disabled) {
        border-color: GrayText;
        opacity: 1;
      }
      :where(.ma-toggle__input:disabled)::before {
        background: GrayText;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-toggle__input),
      :where(.ma-toggle__input)::before {
        transition: none;
      }
    }
  }
</style>