@threadlabs/looma 0.4.0 → 0.5.1

package/components/ui-select/ui-select.html

@@ -0,0 +1,87 @@
+<template component="ui-select" controller="./ui-select.js">
+  <defs>
+    <prop name="value" type="string">Currently selected option value.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
+    <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
+    <prop name="required" type="boolean" default="false">Requires a non-empty option for form validation.</prop>
+    <prop name="multiple" type="boolean" default="false">Allows more than one option to be selected.</prop>
+  </defs>
+  <select :disabled="disabled" :required="required" :multiple="multiple" :aria-invalid="invalid"><slot></slot></select>
+  <style>
+    :host {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md, 2.5rem);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-select-radius, var(--ui-radius-2));
+      background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+      color: var(--ui-text-primary);
+      color-scheme: light dark;
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+     * The root stays a native <select>, so the icon is a background image rather than an element. */
+    :host:not([multiple]) {
+      appearance: none;
+      padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
+      background-image: var(
+        --ui-select-chevron,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+      );
+      background-repeat: no-repeat;
+      background-position: right var(--ui-space-3) center;
+      background-size: 1.125rem 1.125rem;
+    }
+
+    :host:hover:not(:focus):not(:disabled) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    :host:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :host[aria-invalid="true"],
+    :host:user-invalid {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :host:is([aria-invalid="true"], :user-invalid):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    :host:disabled {
+      background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    :host[multiple],
+    :host[size]:not([size="1"]) {
+      min-block-size: 7rem;
+      padding: var(--ui-space-2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-select/ui-select.js

@@ -0,0 +1,16 @@
+// A controlled value can arrive before its projected <option> elements, so it is applied again
+// whenever the options change.
+export default function controller(host) {
+  const select = host.element;
+  const apply = () => {
+    const value = host.state.value;
+    if (value !== undefined && value !== null && select.value !== String(value)) select.value = String(value);
+  };
+  const observer = new MutationObserver(apply);
+  observer.observe(select, { childList: true, subtree: true });
+  const stop = host.effect(apply);
+  return () => {
+    stop();
+    observer.disconnect();
+  };
+}

package/components/ui-separator/ui-separator.html

@@ -0,0 +1,22 @@
+<template component="ui-separator">
+  <defs>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal"
+    >Whether the separator divides stacked content (horizontal) or inline content (vertical).</prop>
+  </defs>
+  <hr :aria-orientation="orientation">
+  <style>
+    hr {
+      box-sizing: border-box;
+      align-self: stretch;
+      margin: 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+    }
+
+    hr[aria-orientation="vertical"] {
+      block-size: auto;
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+    }
+  </style>
+</template>

package/components/ui-sidebar/ui-sidebar.html

@@ -0,0 +1,183 @@
+<template component="ui-sidebar" controller="./ui-sidebar.js">
+  <defs>
+    <prop name="side" type="start | end" default="start">The edge the sidebar sits on. The page places it beside its main content.</prop>
+    <prop name="width" type="number" default="0">Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.</prop>
+    <prop name="minWidth" type="number" default="200">The narrowest width the resize handle allows, in pixels.</prop>
+    <prop name="maxWidth" type="number" default="480">The widest width the resize handle allows, in pixels.</prop>
+    <prop name="resizable" type="boolean" default="false">Adds a resize handle on the inner edge (drag, or arrow keys, Home, and End).</prop>
+    <prop name="resizeStep" type="number" default="16">Arrow-key resize step in pixels.</prop>
+    <prop name="resizeLabel" type="string" default="Resize sidebar">Accessible name of the resize handle.</prop>
+    <prop name="collapsed" type="boolean" default="false">Whether the docked sidebar is collapsed.</prop>
+    <prop name="breakpoint" type="sm | md | lg" default="md"
+    >Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.</prop>
+    <state name="internalCollapsed" :value="false"></state>
+    <state name="drawer" :value="false"></state>
+    <event name="resize" type="object({ width: number, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="toggle" type="object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <aside>
+    <div class="content"><slot></slot></div>
+    <div
+      class="resizer"
+      $ref="resizer"
+      role="separator"
+      aria-orientation="vertical"
+      tabindex="0"
+      data-ui-affordance="resize"
+      :aria-label="resizeLabel"
+      :hidden="not resizable or drawer or internalCollapsed"
+    >
+      <span class="guide" aria-hidden="true"></span>
+    </div>
+  </aside>
+  <style>
+    :host {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      flex: none;
+      inline-size: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
+      max-inline-size: 100%;
+      min-block-size: 0;
+      background: var(--ui-sidebar-surface, var(--ui-surface-default));
+      border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+    }
+
+    :host-state([side="end"]) {
+      border-inline-end: 0;
+      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+    }
+
+    .content {
+      flex: 1;
+      min-block-size: 0;
+      overflow: auto;
+    }
+
+    /* Collapsed while docked. */
+    :host-state([internalCollapsed]):not([popover]) {
+      display: none;
+    }
+
+    .resizer {
+      position: absolute;
+      z-index: 1;
+      inset-block: 0;
+      /* On the panel's inner edge: the end edge of a start sidebar. */
+      inset-inline-end: 0;
+      inline-size: 8px;
+      min-inline-size: 8px;
+      transform: translateX(50%);
+      cursor: col-resize;
+      touch-action: none;
+      outline: none;
+    }
+
+    .resizer[hidden] {
+      display: none;
+    }
+
+    :host-state([side="end"]) .resizer {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      transform: translateX(-50%);
+    }
+
+    .resizer::after {
+      content: "";
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 3px;
+      inline-size: 2px;
+      background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transition:
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .guide {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: 6px;
+      block-size: 22px;
+      border: 1px solid var(--ui-border-strong, #c8c8c4);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-surface-elevated, #fff);
+      opacity: 0;
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: none;
+    }
+
+    .resizer:is(:hover, :focus-visible)::after {
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
+      opacity: 1;
+    }
+
+    .resizer:is(:hover, :focus-visible) > .guide {
+      opacity: 1;
+    }
+
+    /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
+    :host[popover] {
+      position: fixed;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      margin: 0;
+      padding: 0;
+      inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, 280px)), 85vw);
+      max-block-size: none;
+      block-size: 100dvh;
+      border-block: 0;
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      transform: translateX(0);
+      transition:
+        transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
+        display var(--ui-motion-base, 0.2s) allow-discrete,
+        overlay var(--ui-motion-base, 0.2s) allow-discrete;
+    }
+
+    /* The author display above would otherwise override the UA rule that hides a closed popover. */
+    :host[popover]:not(:popover-open) {
+      display: none;
+      transform: translateX(-100%);
+    }
+
+    :host-state([side="end"])[popover] {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host-state([side="end"])[popover]:not(:popover-open) {
+      transform: translateX(100%);
+    }
+
+    @starting-style {
+      :host[popover]:popover-open {
+        transform: translateX(-100%);
+      }
+      :host-state([side="end"])[popover]:popover-open {
+        transform: translateX(100%);
+      }
+    }
+
+    :host[popover]::backdrop {
+      background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host[popover] {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-sidebar/ui-sidebar.js

@@ -0,0 +1,178 @@
+const BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem" };
+
+function positive(value, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : fallback;
+}
+
+/**
+ * An application sidebar panel. Docked, it can be resized and collapsed; below its breakpoint it is an
+ * off-canvas drawer (a popover). A button toggles it with the platform's invoker commands:
+ * `<button commandfor="nav" command="--toggle">`.
+ */
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const view = document.defaultView;
+  let pointerAbort;
+  let media;
+  let lastCollapsed = Boolean(host.state.collapsed);
+  let lastWidth = Number(host.state.width) || 0;
+  host.state.internalCollapsed = lastCollapsed;
+  host.state.drawer = false;
+
+  const bounds = () => {
+    const min = positive(host.state.minWidth, 200);
+    return { min, max: Math.max(min, positive(host.state.maxWidth, 480)), step: positive(host.state.resizeStep, 16) };
+  };
+  const currentWidth = () => element.getBoundingClientRect().width || 280;
+  const setWidth = (value, trigger = "programmatic") => {
+    const { min, max } = bounds();
+    const width = Math.round(Math.max(min, Math.min(max, value)));
+    const previous = Number.parseFloat(element.style.getPropertyValue("--_sidebar-width"));
+    element.style.setProperty("--_sidebar-width", `${width}px`);
+    host.refs.resizer.setAttribute("aria-valuemin", String(min));
+    host.refs.resizer.setAttribute("aria-valuemax", String(max));
+    host.refs.resizer.setAttribute("aria-valuenow", String(width));
+    if (previous !== width) host.dispatch("resize", { width, trigger });
+  };
+
+  const onKeydown = (event) => {
+    const { min, max, step } = bounds();
+    let next = null;
+    if (event.key === "Home") next = min;
+    if (event.key === "End") next = max;
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      const delta = event.key === "ArrowRight" ? step : -step;
+      next = currentWidth() + (host.state.side === "end" ? -delta : delta);
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setWidth(next, "keyboard");
+  };
+  const onPointerdown = (event) => {
+    if (event.button !== 0 || pointerAbort) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = currentWidth();
+    const multiplier = host.state.side === "end" ? -1 : 1;
+    pointerAbort = new AbortController();
+    const signal = pointerAbort.signal;
+    const finish = () => {
+      pointerAbort?.abort();
+      pointerAbort = undefined;
+    };
+    view.addEventListener("pointermove", (move) => {
+      setWidth(startWidth + ((move.clientX - startX) * multiplier), "pointer");
+    }, { signal });
+    view.addEventListener("pointerup", finish, { once: true, signal });
+    view.addEventListener("pointercancel", finish, { once: true, signal });
+  };
+  // The handle is in the template, shown only while the panel is docked, open, and resizable.
+  const handle = host.refs.resizer;
+  const endPointer = () => {
+    pointerAbort?.abort();
+    pointerAbort = undefined;
+  };
+  const syncHandle = () => {
+    if (!host.state.resizable || host.state.drawer || host.state.internalCollapsed) { endPointer(); return; }
+    const { min, max } = bounds();
+    handle.setAttribute("aria-valuemin", String(min));
+    handle.setAttribute("aria-valuemax", String(max));
+    handle.setAttribute("aria-valuenow", String(Math.round(currentWidth())));
+  };
+  const onDoubleClick = () => {
+    element.style.removeProperty("--_sidebar-width");
+    setWidth(currentWidth(), "pointer");
+  };
+
+  // Below the breakpoint the panel is a popover drawer: top layer, backdrop, Escape and light dismiss.
+  const applyMode = () => {
+    const drawer = media?.matches ?? false;
+    if (drawer === host.state.drawer) return;
+    host.state.drawer = drawer;
+    if (drawer) {
+      element.setAttribute("popover", "auto");
+    } else {
+      if (element.matches(":popover-open")) element.hidePopover();
+      element.removeAttribute("popover");
+    }
+    syncHandle();
+  };
+  const watchBreakpoint = () => {
+    media?.removeEventListener("change", applyMode);
+    // Without media queries (a non-browser DOM) the sidebar simply stays docked.
+    if (typeof view.matchMedia !== "function") return;
+    const width = BREAKPOINTS[host.state.breakpoint] ?? BREAKPOINTS.md;
+    media = view.matchMedia(`(width < ${width})`);
+    media.addEventListener("change", applyMode);
+    applyMode();
+  };
+
+  const toggle = (trigger) => {
+    if (host.state.drawer) {
+      element.togglePopover();   // reported by the popover's own toggle event
+      return;
+    }
+    host.state.internalCollapsed = !host.state.internalCollapsed;
+    syncHandle();
+    host.dispatch("toggle", { open: !host.state.internalCollapsed, mode: "docked", trigger });
+  };
+  const triggerOf = (source) => source?.matches?.(":focus-visible") ? "keyboard" : "pointer";
+  const onCommand = (event) => {
+    if (event.command !== "--toggle") return;
+    toggle(triggerOf(event.source));
+  };
+  // Where the platform does not yet dispatch invoker commands, a click on the invoker does the same.
+  const invokerCommands = typeof view.HTMLButtonElement?.prototype === "object" && "commandForElement" in view.HTMLButtonElement.prototype;
+  const onDocumentClick = (event) => {
+    const invoker = event.target.closest?.("[commandfor][command='--toggle']");
+    if (!invoker || !element.id || invoker.getAttribute("commandfor") !== element.id) return;
+    toggle(triggerOf(invoker));
+  };
+  const onPopoverToggle = (event) => {
+    if (!host.state.drawer) return;
+    host.dispatch("toggle", { open: event.newState === "open", mode: "drawer", trigger: "programmatic" });
+  };
+
+  const apply = () => {
+    const collapsed = Boolean(host.state.collapsed);
+    if (collapsed !== lastCollapsed) {
+      lastCollapsed = collapsed;
+      host.state.internalCollapsed = collapsed;
+    }
+    const width = Number(host.state.width) || 0;
+    if (width !== lastWidth) {
+      lastWidth = width;
+      if (width > 0) setWidth(width);
+      else element.style.removeProperty("--_sidebar-width");
+    }
+    syncHandle();
+  };
+
+  handle.addEventListener("keydown", onKeydown);
+  handle.addEventListener("pointerdown", onPointerdown);
+  handle.addEventListener("dblclick", onDoubleClick);
+  element.addEventListener("command", onCommand);
+  element.addEventListener("toggle", onPopoverToggle);
+  if (!invokerCommands) document.addEventListener("click", onDocumentClick);
+  if (lastWidth > 0) setWidth(lastWidth);
+  watchBreakpoint();
+  let lastBreakpoint = host.state.breakpoint;
+  const stop = host.effect(() => {
+    if (host.state.breakpoint !== lastBreakpoint) { lastBreakpoint = host.state.breakpoint; watchBreakpoint(); }
+    apply();
+  });
+  apply();
+  return () => {
+    stop();
+    endPointer();
+    handle.removeEventListener("keydown", onKeydown);
+    handle.removeEventListener("pointerdown", onPointerdown);
+    handle.removeEventListener("dblclick", onDoubleClick);
+    media?.removeEventListener("change", applyMode);
+    element.removeEventListener("command", onCommand);
+    element.removeEventListener("toggle", onPopoverToggle);
+    document.removeEventListener("click", onDocumentClick);
+  };
+}

package/components/ui-stack/ui-stack.html

@@ -0,0 +1,59 @@
+<template component="ui-stack">
+  <defs>
+    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
+    <prop name="align" type="start | center | end | stretch">align token.</prop>
+    <prop name="justify" type="start | center | end | between">justify token.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    :host {
+      --_layout-gap: var(--ui-space-4, 1rem);
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ui-layout-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :host-state([gap="xs"]) {
+      --_layout-gap: var(--ui-space-2, 0.5rem);
+    }
+    :host-state([gap="s"]) {
+      --_layout-gap: var(--ui-space-3, 0.75rem);
+    }
+    :host-state([gap="m"]) {
+      --_layout-gap: var(--ui-space-4, 1rem);
+    }
+    :host-state([gap="l"]) {
+      --_layout-gap: var(--ui-space-5, 1.5rem);
+    }
+    :host-state([gap="xl"]) {
+      --_layout-gap: var(--ui-space-6, 2rem);
+    }
+    :host-state([align="start"]) {
+      align-items: flex-start;
+    }
+    :host-state([align="center"]) {
+      align-items: center;
+    }
+    :host-state([align="end"]) {
+      align-items: flex-end;
+    }
+    :host-state([justify="center"]) {
+      justify-content: center;
+    }
+    :host-state([justify="end"]) {
+      justify-content: flex-end;
+    }
+    :host-state([justify="between"]) {
+      justify-content: space-between;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-switch/ui-switch.html

@@ -0,0 +1,95 @@
+<template component="ui-switch" controller="./ui-switch.js">
+  <defs>
+    <prop name="checked" type="boolean" default="false">Whether the switch is checked initially or when set externally.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="value" type="string" default="on">value token.</prop>
+    <state name="internalChecked" :value="false"></state>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <label>
+    <input type="checkbox" role="switch" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :value="value">
+    <span class="label"><slot></slot></span>
+  </label>
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-switch-gap, var(--ui-space-2));
+      max-inline-size: 100%;
+      color: var(--ui-text-primary);
+      cursor: pointer;
+    }
+
+    .label {
+      min-inline-size: 0;
+      line-height: var(--ui-line-height-md);
+    }
+
+    input {
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+      flex: 0 0 auto;
+      width: var(--ui-switch-track-width, 2.5rem);
+      height: var(--ui-switch-track-height, 1.5rem);
+      padding: 0;
+      border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+      border-radius: 999px;
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+      margin: 0;
+    }
+
+    input::after {
+      content: "";
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 999px;
+      background: var(--ui-text-secondary);
+      box-shadow: var(--ui-shadow-xs);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    input:checked {
+      background: var(--ui-accent-solid);
+      border-color: var(--ui-accent-solid);
+    }
+
+    input:checked::after {
+      transform: translateX(1rem);
+      background: var(--ui-text-on-accent);
+    }
+
+    input:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: 2px;
+    }
+
+    :host-state([disabled]) {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    :host-state([disabled]) input {
+      border-color: var(--ui-border-default);
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      cursor: not-allowed;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      input, input::after {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-switch/ui-switch.js

@@ -0,0 +1,24 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+// `checked` sets the control initially and whenever it changes; the user's changes update the state.
+export default function controller(host) {
+  const input = host.refs.input;
+  const [trigger, stopTracking] = trackTrigger(host);
+  let external = host.state.checked;
+  host.state.internalChecked = Boolean(external);
+  const stop = host.effect(() => {
+    if (host.state.checked === external) return;
+    external = host.state.checked;
+    host.state.internalChecked = Boolean(external);
+  });
+  const onChange = () => {
+    host.state.internalChecked = input.checked;
+    host.dispatch("change", { checked: input.checked, value: String(host.state.value ?? "on"), trigger: trigger() });
+  };
+  input.addEventListener("change", onChange);
+  return () => {
+    stop();
+    stopTracking();
+    input.removeEventListener("change", onChange);
+  };
+}