Switch

<%# Markup for the switch (APG Switch) demo.
    The controller element itself is a role="switch" button, with state expressed only via
    aria-checked. Space/Enter and click toggle it. The look switches on aria-checked in
    the Playground's CSS. %>
<button
  type="button"
  class="switch"
  role="switch"
  aria-checked="false"
  data-controller="stimeo--switch"
  data-action="click->stimeo--switch#toggle keydown->stimeo--switch#onKeydown">
  <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
  <span class="switch__label"><%= t("components.switch.demo.label") %></span>
</button>

/*
 * Presentation-only styles for the switch demo.
 * On/off is expressed via aria-checked (set by the library).
 */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}

.switch__track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.15s ease;
}

.switch[aria-checked="true"] .switch__track {
  background: var(--accent);
}

.switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--surface-card);
  transition: transform 0.15s ease;
}

.switch[aria-checked="true"] .switch__thumb {
  transform: translateX(1.25rem);
}

.switch__label {
  color: var(--fg);
}