@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/WpNumber.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * The one number field, on the canvas and in the manager: a number input
+ * with our stacked ▲/▼ arrows instead of the browser's spinner (hidden).
+ * It replaced the canvas steppers every widget used to hand-roll (seed rows,
+ * sweep limit, Image Filter timeout) and Input's `type="number"` mode.
+ *
+ * Emits a finite number only: typing commits on `change` (or every
+ * keystroke with `commit="input"`); the arrows, ArrowUp/ArrowDown and the
+ * wheel step by `step` and clamp to `min` / `max`. Typed values snap to 3
+ * decimals and stepped values to the step's own precision, so float fuzz
+ * (1.2999999999999998) never reaches a store. With `nullable`, clearing the
+ * box emits `null` (a "use the default" field with a placeholder).
+ *
+ * `size` follows the control scale (sm 24 / md 32 / lg 40); the canvas uses
+ * `sm`, manager forms `md`. `class` and `style` land on the box (set a width
+ * there); other attributes and listeners (`@blur`, `@keydown.enter`, `id`)
+ * land on the input. `dataTest` lands on the input, with `-up` / `-down` on
+ * the arrows. `suffix` shows a unit after the number ("px", "s"). Reads
+ * only SHARED_TOKENS, so it wears whichever side it is on.
+ */
+import { computed, ref, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number | null;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    upLabel?: string | undefined;
+    downLabel?: string | undefined;
+    dataTest?: string | undefined;
+    commit?: "change" | "input" | undefined;
+    /** Clearing the box emits null instead of being ignored. */
+    nullable?: boolean | undefined;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    /** Unit shown after the number ("px", "s"). */
+    suffix?: string | undefined;
+  }>(),
+  { step: 1, size: "sm", commit: "change", upLabel: "Increase", downLabel: "Decrease" },
+);
+
+const emit = defineEmits<{ "update:modelValue": [value: number | null] }>();
+
+const attrs = useAttrs();
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs;
+  return rest;
+});
+
+function clamp(n: number): number {
+  let v = n;
+  if (props.min !== undefined) v = Math.max(props.min, v);
+  if (props.max !== undefined) v = Math.min(props.max, v);
+  return v;
+}
+
+function onType(ev: Event, kind: "change" | "input"): void {
+  if (kind !== props.commit) return;
+  const raw = (ev.target as HTMLInputElement).value;
+  if (raw === "") {
+    if (props.nullable) emit("update:modelValue", null);
+    return;
+  }
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return;
+  emit("update:modelValue", Math.round(n * 1000) / 1000);
+}
+
+/** ArrowUp / ArrowDown and the wheel (while focused) step like the arrows.
+ *  Every key stops here so the canvas doesn't read it as a shortcut. */
+function onKey(ev: KeyboardEvent): void {
+  ev.stopPropagation();
+  if (ev.key !== "ArrowUp" && ev.key !== "ArrowDown") return;
+  ev.preventDefault();
+  bump(ev.key === "ArrowUp" ? 1 : -1);
+}
+function onWheel(ev: WheelEvent): void {
+  if (document.activeElement !== ev.target) return;
+  ev.preventDefault();
+  bump(ev.deltaY < 0 ? 1 : -1);
+}
+
+const field = ref<HTMLInputElement | null>(null);
+defineExpose({ focus: () => field.value?.focus(), select: () => field.value?.select(), el: field });
+
+/** Step with the step's decimal precision, so 1 + 0.1 shows 1.1. */
+function bump(dir: 1 | -1): void {
+  if (props.disabled) return;
+  const dot = String(props.step).indexOf(".");
+  const f = dot < 0 ? 1 : 10 ** (String(props.step).length - dot - 1);
+  emit("update:modelValue", clamp(Math.round(((props.modelValue ?? 0) + dir * props.step) * f) / f));
+}
+</script>
+
+<template>
+  <span
+    class="wp-cnum wp-field-box"
+    :class="[`wp-cnum--${size}`, `wp-field-box--${size}`, { 'is-disabled': disabled, 'is-invalid': invalid }]"
+    v-bind="rootAttrs"
+  >
+    <input
+      ref="field"
+      class="wp-cnum__field"
+      type="number"
+      :value="modelValue ?? ''"
+      :min="min"
+      :max="max"
+      step="any"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+      :aria-invalid="invalid || undefined"
+      :data-test="dataTest"
+      v-bind="inputAttrs"
+      @input="onType($event, 'input')"
+      @change="onType($event, 'change')"
+      @keydown="onKey"
+      @wheel="onWheel"
+    />
+    <span v-if="suffix" class="wp-cnum__suffix" aria-hidden="true">{{ suffix }}</span>
+    <span class="wp-cnum__spin">
+      <button
+        type="button" class="wp-cnum__btn" tabindex="-1" :disabled="disabled"
+        :aria-label="upLabel" :data-test="dataTest && `${dataTest}-up`" @click="bump(1)"
+      ><i class="pi pi-chevron-up" aria-hidden="true" /></button>
+      <button
+        type="button" class="wp-cnum__btn" tabindex="-1" :disabled="disabled"
+        :aria-label="downLabel" :data-test="dataTest && `${dataTest}-down`" @click="bump(-1)"
+      ><i class="pi pi-chevron-down" aria-hidden="true" /></button>
+    </span>
+  </span>
+</template>
+
+<style scoped src="./field.css"></style>
+
+<style scoped>
+.wp-cnum {
+  --cnum-spin: 16px;
+  display: inline-flex; align-items: stretch; height: var(--wp-field-h); min-width: 0; overflow: hidden;
+  font-family: var(--wp-font-mono);
+}
+.wp-cnum--md { --cnum-spin: 20px; }
+.wp-cnum--lg { --cnum-spin: 22px; }
+.wp-cnum__field {
+  flex: 1; min-width: 0; padding: 0 6px 0 8px; background: transparent; border: 0;
+  color: var(--wp-text); font: inherit; text-align: right;
+  -moz-appearance: textfield; appearance: textfield;
+}
+.wp-cnum__field::-webkit-outer-spin-button, .wp-cnum__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.wp-cnum__field::placeholder { color: var(--wp-text-dim); }
+.wp-cnum__field:focus { outline: none; }
+.wp-cnum__field:disabled { cursor: not-allowed; }
+.wp-cnum__suffix {
+  display: inline-flex; align-items: center; flex-shrink: 0; padding-right: 6px;
+  color: var(--wp-text-dim); user-select: none;
+}
+.wp-cnum__spin {
+  display: flex; flex-direction: column; width: var(--cnum-spin); flex-shrink: 0;
+  border-left: 1px solid var(--wp-border); background: color-mix(in oklab, var(--wp-accent) 4%, transparent);
+}
+.wp-cnum__btn {
+  flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
+  background: transparent; color: var(--wp-text-dim); cursor: pointer; line-height: 0;
+}
+.wp-cnum__btn .pi { font-size: 7px; }
+.wp-cnum--md .wp-cnum__btn .pi, .wp-cnum--lg .wp-cnum__btn .pi { font-size: 8px; }
+.wp-cnum__btn + .wp-cnum__btn { border-top: 1px solid var(--wp-border); }
+.wp-cnum__btn:hover:not(:disabled) { color: var(--wp-accent-text); background: color-mix(in oklab, var(--wp-accent) 12%, transparent); }
+.wp-cnum__btn:disabled { cursor: not-allowed; }
+</style>

package/src/WpSegmented.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts" generic="T extends string">
+/**
+ * Segmented control: two to five short choices shown as joined buttons, one
+ * of them on. For this few, showing them all is faster to read and change
+ * than a select. Works on the canvas (`size="sm"`) and in the manager (`md`).
+ *
+ * It is a radio group (APG): only the chosen option is in the Tab order, the
+ * arrow keys move to the next enabled option and choose it, Home/End jump to
+ * the ends. With `icon-only` the labels become the buttons' names and
+ * tooltips.
+ *
+ *   <WpSegmented v-model="theme" :options="[{ value: 'dark', label: 'Dark', icon: 'pi-moon' }]" aria-label="Theme" />
+ */
+import { nextTick, ref } from "vue";
+import { vTooltip } from "./tooltip";
+
+export interface SegmentedOption<V extends string = string> {
+  value: V;
+  label: string;
+  /** A PrimeIcons class, e.g. `pi-moon`. */
+  icon?: string | undefined;
+  disabled?: boolean | undefined;
+  /** A tooltip saying what the option does. */
+  hint?: string | undefined;
+  /** A shortcut shown in the tooltip's key chip, e.g. "G". */
+  kbd?: string | undefined;
+  /** This option's `data-test`, when `testPrefix` doesn't fit. */
+  testId?: string | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: T;
+  options: SegmentedOption<T>[];
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Show only the icons; each label names its button and is its tooltip. */
+  iconOnly?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Fill the row: options share the width and long labels end in "…". */
+  block?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  /** `data-test` of each option is `<testPrefix>-<value>`. */
+  testPrefix?: string | undefined;
+}>(), { size: "md" });
+
+const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
+const rootEl = ref<HTMLElement | null>(null);
+
+function pick(v: T): void {
+  if (props.disabled) return;
+  if (v !== props.modelValue) emit("update:modelValue", v);
+}
+
+/** The option that takes Tab focus: the chosen one, else the first enabled. */
+function tabStop(): T | undefined {
+  const live = props.options.filter((o) => !o.disabled);
+  return (live.find((o) => o.value === props.modelValue) ?? live[0])?.value;
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (props.disabled) return;
+  const live = props.options.filter((o) => !o.disabled);
+  if (!live.length) return;
+  const at = live.findIndex((o) => o.value === props.modelValue);
+  let next: number;
+  switch (ev.key) {
+    case "ArrowRight": case "ArrowDown": next = (at + 1) % live.length; break;
+    case "ArrowLeft": case "ArrowUp": next = at < 0 ? live.length - 1 : (at - 1 + live.length) % live.length; break;
+    case "Home": next = 0; break;
+    case "End": next = live.length - 1; break;
+    default: return;
+  }
+  ev.preventDefault();
+  const v = live[next].value;
+  pick(v);
+  void nextTick(() => {
+    const i = props.options.findIndex((o) => o.value === v);
+    rootEl.value?.querySelectorAll<HTMLElement>("[role=radio]")[i]?.focus();
+  });
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="wp-segmented"
+    role="radiogroup"
+    :aria-label="ariaLabel"
+    :aria-disabled="disabled || undefined"
+    :data-size="size"
+    :data-icon-only="iconOnly || undefined"
+    :data-block="block || undefined"
+  >
+    <button
+      v-for="o in options"
+      :key="o.value"
+      v-tooltip="{ text: o.hint ?? (iconOnly || o.kbd ? o.label : null), kbd: o.kbd }"
+      type="button"
+      role="radio"
+      class="wp-segmented__opt"
+      :aria-checked="modelValue === o.value"
+      :aria-label="iconOnly ? o.label : undefined"
+      :data-active="modelValue === o.value ? 'true' : 'false'"
+      :data-test="o.testId ?? (testPrefix ? `${testPrefix}-${o.value}` : undefined)"
+      :tabindex="o.value === tabStop() && !disabled ? 0 : -1"
+      :disabled="disabled || o.disabled"
+      @click="pick(o.value)"
+      @keydown="onKeydown"
+    >
+      <i v-if="o.icon" class="pi" :class="o.icon" aria-hidden="true" />
+      <span v-if="!iconOnly" class="wp-segmented__label">{{ o.label }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.wp-segmented {
+  display: inline-flex;
+  flex: none;
+  /* Keep its own width inside a column flex parent; block fills the row. */
+  align-self: flex-start;
+  max-width: 100%;
+  padding: 2px;
+  gap: 2px;
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius);
+  background: var(--wp-bg-2);
+  height: var(--wp-control-h-md);
+  box-sizing: border-box;
+}
+.wp-segmented[data-size="sm"] { height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); }
+.wp-segmented[data-size="lg"] { height: var(--wp-control-h-lg); }
+.wp-segmented__opt {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0 var(--wp-space-5);
+  border: 0;
+  border-radius: calc(var(--wp-radius) - 2px);
+  background: transparent;
+  color: var(--wp-text-muted);
+  font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover);
+}
+.wp-segmented[data-size="sm"] .wp-segmented__opt {
+  padding: 0 var(--wp-space-4);
+  border-radius: calc(var(--wp-radius-sm) - 1px);
+  font-size: var(--wp-text-xs);
+  gap: 4px;
+}
+.wp-segmented[data-size="lg"] .wp-segmented__opt { padding: 0 var(--wp-space-6); font-size: var(--wp-text-base); }
+.wp-segmented[data-block] { display: flex; width: 100%; align-self: stretch; }
+.wp-segmented[data-block] .wp-segmented__opt { flex: 1 1 0; }
+.wp-segmented__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.wp-segmented[data-icon-only] .wp-segmented__opt { aspect-ratio: 1; padding: 0; }
+.wp-segmented__opt:hover:not(:disabled) { color: var(--wp-text); background: var(--wp-bg-3); }
+.wp-segmented__opt[data-active="true"] {
+  background: var(--wp-bg-4);
+  color: var(--wp-text);
+  box-shadow: var(--wp-shadow-sm), inset 0 0 0 1px var(--wp-border-strong);
+  font-weight: 600;
+}
+.wp-segmented__opt[data-active="true"] .pi { color: var(--wp-accent-text); }
+.wp-segmented__opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-segmented__opt:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-segmented__opt .pi { font-size: 0.95em; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-segmented__opt { transition: none; }
+}
+</style>

package/src/WpSelect.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts" generic="T extends string | number">
+/**
+ * Shared dropdown for the canvas tree. A real <select> (keyboard, screen
+ * readers and the option list come from the browser) drawn with our field
+ * look and chevron instead of the browser's control, so every canvas
+ * dropdown matches. The SPA's `ui/Select.vue` is a full custom listbox;
+ * the canvas bundle has no room for one, and nodes sit on a zoomable
+ * canvas where a native list positions itself correctly.
+ *
+ * `options` values may be strings or numbers; the chosen option's own
+ * value is emitted (not the DOM's string). `placeholder` adds a disabled
+ * first entry shown while nothing is chosen (`modelValue` null or ""), for
+ * "pick to add" menus. `size` (sm 24px default, md 32px) sets its height
+ * and font on the control scale; the box is the kit's field box
+ * (`field.css`), the same as every other field. A parent can still size it
+ * with a class on the root (height, width, font-size).
+ * `dataTest` lands on the <select>.
+ */
+import { nextTick } from "vue";
+
+const props = defineProps<{
+  modelValue: T | null;
+  options: readonly { value: T; label: string; disabled?: boolean }[];
+  placeholder?: string | undefined;
+  ariaLabel?: string | undefined;
+  dataTest?: string | undefined;
+  disabled?: boolean | undefined;
+  /** Lands on the <select>, for a `<label for>`. */
+  id?: string | undefined;
+  size?: "sm" | "md" | undefined;
+}>();
+
+const emit = defineEmits<{ "update:modelValue": [value: T] }>();
+
+function onChange(ev: Event): void {
+  const el = ev.target as HTMLSelectElement;
+  const i = el.selectedIndex - (props.placeholder === undefined ? 0 : 1);
+  const opt = props.options[i];
+  if (opt) emit("update:modelValue", opt.value);
+  // Stay controlled: when the parent keeps its value (a "pick to add" menu
+  // stays on its placeholder), put the shown entry back.
+  void nextTick(() => {
+    const at = props.options.findIndex((o) => o.value === props.modelValue);
+    el.selectedIndex = at < 0 ? 0 : at + (props.placeholder === undefined ? 0 : 1);
+  });
+}
+
+function selected(o: { value: T }): boolean {
+  return o.value === props.modelValue;
+}
+</script>
+
+<template>
+  <span class="wp-cselect" :class="[`wp-cselect--${size ?? 'sm'}`, { 'is-disabled': disabled }]">
+    <select
+      :id="id"
+      class="wp-cselect__field wp-field-box"
+      :class="`wp-field-box--${size ?? 'sm'}`"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+      :data-test="dataTest"
+      @change="onChange"
+      @keydown.stop
+    >
+      <option
+        v-if="placeholder !== undefined" value="" disabled
+        :selected="modelValue === null || modelValue === ''"
+      >{{ placeholder }}</option>
+      <option
+        v-for="o in options" :key="String(o.value)" :value="o.value"
+        :disabled="o.disabled" :selected="selected(o)"
+      >{{ o.label }}</option>
+    </select>
+    <svg class="wp-cselect__chev" width="8" height="5" viewBox="0 0 8 5" aria-hidden="true"><path d="M0 0 L4 5 L8 0 Z" fill="currentColor" /></svg>
+  </span>
+</template>
+
+<style scoped src="./field.css"></style>
+
+<style scoped>
+.wp-cselect { position: relative; display: inline-flex; align-items: stretch; height: var(--wp-control-h-sm); min-width: 0; font-size: 12px; }
+.wp-cselect--md { height: var(--wp-control-h-md); font-size: 12.5px; }
+/* After field.css: the root's height and font (or a parent's class on the
+   root) size the box. */
+.wp-cselect__field {
+  flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0 20px 0 8px; margin: 0;
+  font: inherit; cursor: pointer;
+  appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
+}
+.wp-cselect__field option { background: var(--wp-bg2, var(--wp-bg)); color: var(--wp-text); }
+.wp-cselect__chev { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--wp-text-dim, #7a7d88); pointer-events: none; }
+.wp-cselect.is-disabled .wp-cselect__field { cursor: not-allowed; }
+</style>

package/src/WpSwitch.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+/**
+ * The on/off switch for canvas widgets and the manager (Toggle.vue wraps it).
+ *
+ *   <WpSwitch v-model="held" label="Hold across run" />                  track
+ *   <WpSwitch v-model="held" variant="chip" icon="pi-link" label="Hold across run" />
+ *
+ * `variant="track"` is a sliding knob; `variant="chip"` is a labelled chip
+ * that lights up when on (the editors' Runtime row). `mixed` draws the
+ * "some children on" state of a bulk switch; it still reads as off to a
+ * screen reader (a switch has no mixed state).
+ *
+ * The root is a focusable span, not a button, so the switch can sit inside a
+ * clickable header row (derivation rules) without nesting buttons. Space and
+ * Enter flip it. A disabled switch stays in the tab order (aria-disabled, as
+ * the ARIA guide allows) so its tooltip still says why it is off.
+ *
+ * One component on both sides means one stylesheet: the scoped block below
+ * reads only SHARED_TOKENS, so it wears each side's colours. (Scoped and unlayered on purpose: the manager's Tailwind preflight
+ * is unlayered and would beat a layered border.)
+ */
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean | undefined;
+    variant?: "track" | "chip" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    label?: string | undefined;
+    /** PrimeIcons class (e.g. `pi-lock`), drawn before the label. */
+    icon?: string | undefined;
+    mixed?: boolean | undefined;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+  }>(),
+  { modelValue: false, variant: "track", size: "sm", label: undefined, icon: undefined },
+);
+
+const emit = defineEmits<{ "update:modelValue": [next: boolean] }>();
+
+function flip(): void {
+  if (props.disabled) return;
+  emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<template>
+  <span
+    class="wp-switch"
+    :class="[`wp-switch--${size}`, { 'wp-switch--chip': variant === 'chip', 'wp-switch--mixed': mixed && !modelValue }]"
+    role="switch"
+    :aria-checked="modelValue === true"
+    :aria-disabled="disabled || undefined"
+    :aria-invalid="invalid || undefined"
+    tabindex="0"
+    @click="flip"
+    @keydown.space.stop.prevent="flip"
+    @keydown.enter.prevent.stop="flip"
+  >
+    <span v-if="variant === 'track'" class="wp-switch__track" aria-hidden="true"><span class="wp-switch__knob" /></span>
+    <i v-else-if="icon" class="pi wp-switch__icon" :class="icon" aria-hidden="true" />
+    <slot><span v-if="label" class="wp-switch__label">{{ label }}</span></slot>
+  </span>
+</template>
+
+<style scoped>
+/* Two looks. track: a sliding knob, for a setting that takes effect at once.
+ * chip: a labelled chip that lights up when on (Hide from prompt, Lock...).
+ * Heights follow the control scale (sm 24 / md 32 / lg 40). */
+.wp-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  min-height: 20px;
+  flex-shrink: 0;
+  color: var(--wp-text-muted);
+  font: var(--wp-text-xs) / 1 var(--wp-font-sans);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.wp-switch[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+.wp-switch__label { color: var(--wp-text-muted); }
+.wp-switch--md, .wp-switch--lg { min-height: 24px; font-size: var(--wp-text-sm); }
+
+/* Track look */
+.wp-switch__track {
+  --switch-w: 26px;
+  --switch-h: 14px;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  box-sizing: border-box;
+  border: 1px solid var(--wp-border-strong);
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
+}
+.wp-switch--md .wp-switch__track { --switch-w: 32px; --switch-h: 18px; }
+.wp-switch--lg .wp-switch__track { --switch-w: 40px; --switch-h: 22px; }
+.wp-switch__knob {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: calc(var(--switch-h) - 4px);
+  height: calc(var(--switch-h) - 4px);
+  border-radius: min(50%, var(--wp-radius-cap, 999px));
+  background: var(--wp-text-dim);
+  transition: transform var(--wp-motion-quick), background var(--wp-motion-quick);
+}
+.wp-switch:not([aria-disabled="true"]):hover .wp-switch__track { border-color: var(--wp-text-dim); }
+.wp-switch[aria-checked="true"] .wp-switch__track { background: var(--wp-accent); border-color: var(--wp-accent); }
+.wp-switch[aria-checked="true"] .wp-switch__knob {
+  background: white; /* the knob on the accent track, both themes */
+  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
+}
+.wp-switch--mixed .wp-switch__track { border-style: dashed; border-color: var(--wp-accent); }
+.wp-switch--mixed .wp-switch__knob {
+  background: var(--wp-accent);
+  transform: translateX(calc((var(--switch-w) - var(--switch-h)) / 2));
+}
+.wp-switch:focus-visible .wp-switch__track,
+.wp-switch--chip:focus-visible { box-shadow: var(--wp-focus-ring); }
+.wp-switch[aria-invalid="true"] .wp-switch__track,
+.wp-switch--chip[aria-invalid="true"] { border-color: var(--wp-error-border); }
+
+/* Chip look */
+.wp-switch--chip {
+  height: var(--wp-control-h-sm);
+  min-height: 0;
+  gap: var(--wp-space-3);
+  padding: 0 var(--wp-space-4);
+  box-sizing: border-box;
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  background: var(--wp-bg);
+  transition: border-color var(--wp-motion-quick), background var(--wp-motion-quick);
+}
+.wp-switch--chip.wp-switch--md { height: var(--wp-control-h-md); padding: 0 var(--wp-space-5); }
+.wp-switch--chip.wp-switch--lg { height: var(--wp-control-h-lg); padding: 0 var(--wp-space-6); }
+.wp-switch--chip .wp-switch__icon { font-size: var(--wp-text-xs); color: var(--wp-text-dim); }
+.wp-switch--chip:not([aria-disabled="true"]):hover { border-color: var(--wp-border-strong); }
+.wp-switch--chip[aria-checked="true"] {
+  border-color: var(--wp-accent);
+  color: var(--wp-accent-text);
+  background: color-mix(in srgb, var(--wp-accent) 10%, transparent);
+}
+.wp-switch--chip[aria-checked="true"] .wp-switch__label,
+.wp-switch--chip[aria-checked="true"] .wp-switch__icon { color: var(--wp-accent-text); }
+.wp-switch--chip.wp-switch--mixed {
+  border-style: dashed;
+  border-color: var(--wp-accent);
+  background: color-mix(in srgb, var(--wp-accent) 6%, transparent);
+}
+/* accent-text, not the raw accent: the raw ramp sits near 3:1 on light
+   Tide / Ember pages. */
+.wp-switch--chip.wp-switch--mixed .wp-switch__label,
+.wp-switch--chip.wp-switch--mixed .wp-switch__icon { color: var(--wp-accent-text); }
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-switch__track, .wp-switch__knob, .wp-switch--chip { transition: none; }
+}
+</style>