@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/swatch-chip.gts

@@ -0,0 +1,104 @@
+// Pretui — SwatchChip: a small colour chip with its value.
+import Component from '@glimmer/component';
+import { cssDeclaration, cssStyleFrom } from '../pretui-css';
+import { clamp, cssFor, parseColor, round } from '../color-engine';
+import type { ColorValue } from '../color-engine';
+
+// ── SwatchChip ───────────────────────────────────────────────────────────
+
+/**
+ * The chip face alone — a `<span>`, no semantics, no tab stop.
+ *
+ * Extracted because a colour chip appears in two structurally different
+ * places: as the whole of an interactive `Swatch`, and as decoration INSIDE
+ * someone else's button (the `ColorField` trigger, a gradient stop row).
+ * Putting a `<button>` inside a `<button>` is invalid HTML and a real
+ * keyboard trap — realm lint rejects it as `no-nested-interactive`, and
+ * `tabindex='-1'` on the inner one is a workaround, not a fix. One
+ * presentational primitive, used by both, is the fix.
+ */
+export interface SwatchChipSignature {
+  Args: {
+    /** Any CSS colour. Parsed and re-serialized before it reaches the style
+     *  attribute — the caller's characters never survive. */
+    color: string;
+    shape?: 'round' | 'square';
+    /** Chip size in px. Defaults to the `--pretui-swatch-size` token. */
+    size?: number;
+  };
+  Element: HTMLSpanElement;
+}
+
+export class SwatchChip extends Component<SwatchChipSignature> {
+  get parsed(): ColorValue | null {
+    return parseColor(this.args.color);
+  }
+  get chipStyle() {
+    // `@color` is caller text, so it goes through the STRONGER guard first:
+    // `cssFor` parses it with the colour engine and re-serializes a string
+    // built from numbers, so the caller's characters cannot survive. The
+    // shared allowlist is the second line of defence.
+    return cssStyleFrom([
+      cssDeclaration('--pretui-swatch-color', cssFor(this.args.color)),
+      this.args.size
+        ? '--pretui-swatch-size: ' + round(clamp(this.args.size, 1, 512), 0) + 'px'
+        : undefined,
+    ]);
+  }
+  <template>
+    <span
+      class='pretui-swatch-chip'
+      data-shape={{if @shape @shape 'round'}}
+      data-empty={{unless this.parsed 'true'}}
+      style={{this.chipStyle}}
+      ...attributes
+    ></span>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-swatch-chip {
+          display: inline-block;
+          width: var(--pretui-swatch-size, 18px);
+          height: var(--pretui-swatch-size, 18px);
+          border-radius: 50%;
+          /* the checker sits UNDER the colour so alpha is legible; the colour
+             is an image layer because a bare <color> is only valid last */
+          background:
+            linear-gradient(
+              var(--pretui-swatch-color, transparent) 0 0
+            ),
+            var(
+              --pretui-checker,
+              repeating-conic-gradient(
+                color-mix(in oklch, var(--foreground) 11%, transparent) 0 25%,
+                transparent 0 50%
+              )
+            );
+          background-size: auto, 8px 8px;
+          box-shadow: inset 0 0 0 1px
+            color-mix(in oklch, var(--foreground) 14%, transparent);
+          flex: none;
+          transition: transform 120ms ease;
+        }
+        .pretui-swatch-chip[data-shape='square'] {
+          border-radius: calc(var(--radius) / 2.5);
+        }
+        .pretui-swatch-chip[data-empty='true'] {
+          background:
+            linear-gradient(
+                to bottom right,
+                transparent calc(50% - 1px),
+                var(--destructive) calc(50% - 1px),
+                var(--destructive) calc(50% + 1px),
+                transparent calc(50% + 1px)
+              ),
+            var(--field, var(--boxel-light));
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-swatch-chip {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/swatch-chip.md

@@ -0,0 +1,47 @@
+## What it is
+
+The colour face alone: a `<span>` that draws one colour, with no semantics, no accessible name and no tab stop. It is the smallest colour surface in the kit.
+
+It exists because a color chip appears in two structurally different places — as the whole of an interactive **Swatch**, and as decoration _inside_ someone else's control (the **ColorField** trigger, a row in **GradientEditor**). A `<button>` inside a `<button>` is invalid HTML and a real keyboard trap; realm lint rejects it as `no-nested-interactive`, and `tabindex='-1'` on the inner one is a workaround rather than a fix. One presentational primitive used by both is the fix.
+
+So: reach for **Swatch** when the colour is the thing the user acts on, and for this when the colour is decoration on something else.
+
+## The contract
+
+```
+@color (required) — any CSS colour; unparseable renders the empty state
+@shape?           — 'round' (default) | 'square'
+@size?            — chip size in px; defaults to the --pretui-swatch-size token
+```
+
+**The caller's characters never reach the style attribute.** `@color` is the one arg that is pure caller text destined for CSS, so it goes through the stronger of the two guards: the colour engine parses it and re-serialises a string built from numbers, and the kit's declaration allowlist is the second line of defence. Interpolating the string directly would let a `@color` of `red; background: url(…)` carry its own declarations — the parse-and-rebuild is what makes that impossible rather than merely unlikely.
+
+**`@size` is clamped to 1–512px and rounded** before it becomes a declaration; omitting it leaves the token in charge, which is what keeps a grid of chips consistent.
+
+**An unparseable colour is drawn, not hidden.** The chip switches to an empty state — a `--destructive` diagonal over the field ground — so a bad value in a record is visible as a bad value instead of silently rendering as transparent.
+
+**The checkerboard sits _under_ the color, not beside it.** A 40%-opaque color over a checker reads as translucent; the same color composited onto a solid ground reads as a lighter solid color, which is a lie the eye cannot catch. This is the detail that makes alpha legible.
+
+## Prior art
+
+There is no upstream for this one — it is a kit addition, and the comparison is against how a colour dot is usually done: a `<span>` with an inline `background` built by string concatenation at the call site. That approach has three problems this component removes. The caller's string reaches CSS unparsed. Alpha is invisible, because there is no checker under it. And when the colour is decoration inside a button, the call site tends to reach for a nested interactive element instead of a plain span.
+
+Where it is thinner: there is no border or ring control — the inset hairline is fixed at `color-mix(--foreground 14%)` — and no size axis beyond a raw pixel number, where the rest of the kit uses named steps. A chip cannot show a gradient or a pattern either; it is one flat colour, and **GradientEditor** owns the multi-stop case.
+
+## Accessibility
+
+This component is deliberately invisible to assistive technology, and that is the correct answer for it — but it moves the responsibility rather than removing it.
+
+- **No role, no name, not focusable.** The chip contributes nothing to the accessibility tree. Inside a **Swatch** or a **ColorField** trigger, the name lives on that control, which carries the hex and a colour word so the value is legible without seeing it.
+- **Used alone, it is announced as nothing at all.** A grid of bare `SwatchChip`s is a grid of empty spans to a screen reader. If the chip is the only thing conveying a value, the value must also exist as text nearby, or the component is the wrong choice — **Swatch** is.
+- **The empty state is conveyed by colour and shape only.** A caller who needs the "unparseable" condition to be perceivable non-visually has to surface it themselves; the chip has no text to carry it.
+- **Colour alone is never sufficient** (WCAG 1.4.1). That is a constraint on the caller's layout, not something a presentational span can enforce.
+- The chip honours `prefers-reduced-motion` by dropping its transition.
+
+## Theming
+
+`--pretui-swatch-size` (18px default; `@size` overrides per instance), `--pretui-swatch-color` (the parsed colour, written per instance), `--pretui-checker` (the alpha checkerboard, defaulting to a conic gradient mixed from `--foreground` at 11%), `--foreground` (the checker and the inset hairline at 14%), `--radius` (the square shape's corner, at a 2.5 divisor), `--destructive` and `--field` (the empty state).
+
+A theme changes every color chip in the product by retuning `--pretui-swatch-size` and `--pretui-checker`. Because the checker and the hairline are both mixed from `--foreground`, dark mode inverts them automatically — but a theme with a very low-contrast `--foreground` will lose the hairline, and a white swatch on a light `--card` then has no edge at all.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/swatch-chip.usage.gts

@@ -0,0 +1,21 @@
+// Pretui — SwatchChip usage page.
+import Component from '@glimmer/component';
+import { FreestyleUsage } from './freestyle-usage';
+import { Token } from './token';
+import { SwatchChip } from './swatch-chip';
+import { DemoRow } from '../demo-foundations-more';
+
+class SwatchChipUsage extends Component {
+  colors = ['oklch(62% 0.16 155)', 'rgb(76 110 245 / 65%)', '#d97706', 'not-a-color'];
+  <template>
+    <FreestyleUsage @name='SwatchChip' @description='A presentational colour sample safe to place inside another control. Alpha rides over a checker and invalid colour text becomes an honest empty chip.' @source='<SwatchChip @color="oklch(62% 0.16 155)" />'>
+      <:example><DemoRow>{{#each this.colors as |color|}}<span class='swatch-sample'><SwatchChip @color={{color}} @size={{26}} /><Token @value={{color}} /></span>{{/each}}</DemoRow></:example>
+      <:api as |Args|><Args.Object @name='sample colors' @value={{this.colors}} /><Args.String @name='color' @value='oklch(62% 0.16 155)' /><Args.String @name='shape' @value='round' /><Args.Number @name='size' @value={{26}} /></:api>
+    </FreestyleUsage>
+    <style scoped>.swatch-sample { display: inline-flex; align-items: center; gap: 6px; }</style>
+  </template>
+}
+
+export const DEMOS_SWATCH_CHIP: Record<string, unknown> = {
+  SwatchChip: SwatchChipUsage,
+};

package/bundled-realms/pretui/components/swatch.gts

@@ -0,0 +1,141 @@
+// Pretui — Swatch: a selectable colour swatch.
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { describeColor, parseColor, toHex } from '../color-engine';
+import type { ColorValue } from '../color-engine';
+import { SwatchChip } from './swatch-chip';
+
+// ── Swatch ───────────────────────────────────────────────────────────────
+
+/**
+ * A colour chip. Round by default, square when `@shape='square'`.
+ *
+ * Two things it now does that the previous version did not:
+ *
+ *  * **`@color` is parsed and re-serialized before it reaches the style.**
+ *    The old implementation interpolated the caller's string directly, so a
+ *    `@color` of `red; background: url(…)` injected declarations.
+ *  * **Its accessible name carries the hex and a colour word**, not just the
+ *    raw string a caller happened to pass — so a swatch is legible to a
+ *    screen reader without relying on colour.
+ */
+export interface SwatchSignature {
+  Args: {
+    /** Any CSS colour. Anything unparseable renders as the empty state. */
+    color: string;
+    /** Visible label beside the chip. */
+    label?: string;
+    /** Round (default) or square, which reads better in a dense grid. */
+    shape?: 'round' | 'square';
+    /** Chip size in px. Defaults to the `--pretui-swatch-size` token. */
+    size?: number;
+    selected?: boolean;
+    disabled?: boolean;
+    /** Interactive when given; otherwise the swatch renders as a static
+     *  chip with no button semantics. */
+    onSelect?: (color: string) => void;
+  };
+  Element: HTMLElement;
+}
+
+export class Swatch extends Component<SwatchSignature> {
+  get parsed(): ColorValue | null {
+    return parseColor(this.args.color);
+  }
+  get accessibleName(): string {
+    if (this.args.label) {
+      return this.args.label;
+    }
+    let parsed = this.parsed;
+    return parsed ? describeColor(parsed) : 'No colour';
+  }
+  get title(): string {
+    let parsed = this.parsed;
+    return parsed ? toHex(parsed) : 'No colour';
+  }
+  handleClick = () => {
+    this.args.onSelect?.(this.args.color);
+  };
+  <template>
+    {{#if @onSelect}}
+    <button
+      type='button'
+      class='pretui-swatch'
+      data-shape={{if @shape @shape 'round'}}
+      data-state={{if @selected 'selected'}}
+      data-empty={{unless this.parsed 'true'}}
+      disabled={{@disabled}}
+      aria-pressed={{if @selected 'true' 'false'}}
+      aria-label={{this.accessibleName}}
+      title={{this.title}}
+      data-test-pretui-swatch={{@color}}
+      {{on 'click' this.handleClick}}
+      ...attributes
+    >
+      <SwatchChip @color={{@color}} @shape={{@shape}} @size={{@size}} />
+      {{#if @label}}<span class='pretui-swatch-label'>{{@label}}</span>{{/if}}
+    </button>
+    {{else}}
+    <span
+      class='pretui-swatch'
+      data-shape={{if @shape @shape 'round'}}
+      data-state={{if @selected 'selected'}}
+      data-empty={{unless this.parsed 'true'}}
+      title={{this.title}}
+      data-test-pretui-swatch={{@color}}
+      ...attributes
+    >
+      {{#if @label}}
+        <SwatchChip @color={{@color}} @shape={{@shape}} @size={{@size}} aria-hidden='true' />
+        <span class='pretui-swatch-label'>{{@label}}</span>
+      {{else}}
+        <SwatchChip @color={{@color}} @shape={{@shape}} @size={{@size}} role='img' aria-label={{this.accessibleName}} />
+      {{/if}}
+    </span>
+    {{/if}}
+    <style scoped>
+      /* above SwatchChip's layer, so these win by layer order, not file order */
+      @layer PretComponent, PretComposite;
+      @layer PretComposite {
+        .pretui-swatch {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          border: 0;
+          background: none;
+          padding: 2px;
+          border-radius: 999px;
+          font: inherit;
+          font-size: var(--text-ui, 12px);
+          color: var(--muted-foreground);
+          cursor: pointer;
+        }
+        .pretui-swatch[disabled] {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        span.pretui-swatch {
+          cursor: default;
+        }
+        button.pretui-swatch:hover:not([disabled]) .pretui-swatch-chip {
+          transform: scale(1.1);
+        }
+        .pretui-swatch:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        .pretui-swatch[data-state='selected'] .pretui-swatch-chip {
+          box-shadow:
+            inset 0 0 0 1px
+              color-mix(in oklch, var(--foreground) 14%, transparent),
+            0 0 0 2px var(--card),
+            0 0 0 3.5px var(--primary);
+        }
+        .pretui-swatch[data-state='selected'] .pretui-swatch-label {
+          color: var(--foreground);
+          font-weight: 500;
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/swatch.md

@@ -0,0 +1,50 @@
+## What it is
+
+A round colour chip with a hairline, an optional label, and a selected ring. Use it to show or choose a single colour — in a **ColorPalette**, beside a theme token, as a legend key next to a chart series. If the user needs an arbitrary colour, **ColorPicker**. If the value is a category rather than a colour, **Chip** or **StatusChip**.
+
+## The contract
+
+```
+@color, @label?, @selected?, @onSelect?
+Element: HTMLButtonElement
+```
+
+**It is interactive only when `@onSelect` is given.** One component covers both the display case (a legend key) and the choice case (a palette cell), and the presence of a handler is what decides — no interactivity flag, no second component.
+
+Two details that look cosmetic and are not:
+
+**The hairline exists so light colours read against the card.** A white or pale-yellow swatch with no border is invisible on a white surface, and this is the failure every hand-rolled swatch grid ships.
+
+**The selected ring sits *off* the chip, on a card-coloured gap.** A ring drawn directly on the chip's edge is unreadable against a similar-hued colour; inserting a gap of `--card` between the chip and the ring means the selection indicator works for every possible swatch colour, including one that matches the ring. That is the kind of detail that only shows up after you try it with a hundred colours.
+
+## Prior art
+
+**Web Awesome** has no swatch; `wa-color-picker` includes a swatches list as a prop. **React Spectrum `ColorSwatch`** is the closest named component — `color`, `size`, `rounding`, and a checkerboard behind transparent colours. **Radix** has none.
+
+Where Spectrum is ahead: **the checkerboard.** A swatch showing a semi-transparent colour over a solid background lies about the colour; Spectrum renders a checker pattern behind it. This component has no transparency handling at all, so `rgba(255,0,0,0.2)` renders as pale pink over `--card` and is indistinguishable from an opaque pale pink. If your palette can contain alpha, that is a real correctness gap.
+
+Where Pretui is ahead: **the off-chip selection ring** (above). Spectrum's selection indicator is a border, which has the contrast problem described. And the display/choice unification through `@onSelect` is a smaller API than Spectrum's separate `ColorSwatch` and `ColorSwatchPicker.Item`.
+
+Missing versus both: no size axis, no shape option (always round), no drag-and-drop, and no "no colour" / null state.
+
+## Accessibility
+
+No APG pattern; a swatch is a toggle button or a coloured span.
+
+What is right: with `@onSelect` it renders a real `<button>` with `aria-pressed` reflecting `@selected` and an `aria-label`, so a selected swatch announces as "Red, pressed" rather than as an unlabelled square. Without `@onSelect` it is a plain `<span>`: the chip is a `role="img"` named by the colour, or decorative beside a visible `@label`, so a legend of twelve colours is not twelve tab stops that do nothing.
+
+Gaps:
+
+- **The `aria-label` derives from `@label`, which is optional.** A Swatch with no `@label` falls back to something derived from the colour value — verify what it produces, because `#e3474c` announced as a hex string is nearly useless. A colour used as a choice must have a human name; if your palette has none, that is a data problem the component cannot fix.
+- **`aria-pressed` is the wrong vocabulary inside a `ColorPalette`.** A palette is a single-choice group, so `role="radio"` with `aria-checked`, or `role="option"` with `aria-selected`, describes it more accurately — `aria-pressed` says "this button is toggled on", which does not convey that choosing another deselects this one.
+- **Colour is the entire content.** For users who cannot perceive the hue, the `aria-label` is the only information — which is why the label being optional matters. There is no secondary channel (a hex readout, a pattern) at all.
+- **No contrast guarantee on the hairline.** The hairline is a fixed token; a swatch whose colour is close to `--border` has an invisible edge.
+- **Target size**: check the chip's rendered diameter against WCAG **2.5.8**'s 24×24 minimum. Palette swatches are conventionally small.
+
+## Theming
+
+`--card` (the ring gap and the surface the hairline is designed to work against), `--border` (the hairline), `--primary` or `--pretui-selected` (the selection ring), `--muted-foreground` (the label), `--text-ui-sm`.
+
+The chip diameter, hairline width and ring gap are fixed. Because the ring gap is `--card`, a Swatch placed on `--canvas` or `--inset` — inside an **EmptyState**, a table band, a striped row — will show a ring gap in the wrong colour, the same placement trap **AvatarGroup** has. The component assumes it sits on a card surface.
+
+The styles sit in `@layer PretComposite`, above SwatchChip's `PretComponent` layer, so what this component sets on SwatchChip wins by layer order. A caller's unlayered CSS overrides both without a more specific selector.

package/bundled-realms/pretui/components/swatch.usage.gts

@@ -0,0 +1,80 @@
+// Pretui — Swatch usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Swatch } from './swatch';
+
+// ── Swatch ───────────────────────────────────────────────────────────────
+class SwatchUsage extends Component {
+  @tracked color = '#AC00FF';
+  @tracked labelText = 'Amethyst';
+  @tracked shape = 'round';
+  get shapeValue(): 'round' | 'square' {
+    return this.shape === 'square' ? 'square' : 'round';
+  }
+  @tracked selected = false;
+  shapes = ['round', 'square'];
+  setColor = (v: string) => (this.color = v);
+  setLabel = (v: string) => (this.labelText = v);
+  setShape = (v: string) => (this.shape = v);
+  setSelected = (v: boolean) => (this.selected = v);
+  toggleSelected = () => (this.selected = !this.selected);
+  get usage() {
+    return "<Swatch @color='#AC00FF' @label='Amethyst' @onSelect={{this.pick}} />";
+  }
+  <template>
+    <FreestyleUsage
+      @name='Swatch'
+      @description="A colour chip. @color is PARSED and re-serialized before it reaches the style attribute, so a value of `red; background: url(…)` renders as the empty state rather than injecting declarations — try it in the knob. Its accessible name carries the hex and a colour word, so the chip is legible without relying on colour. Alpha shows against a checkerboard."
+      @source={{this.usage}}
+    >
+      <:example>
+        <Swatch
+          @color={{this.color}}
+          @label={{this.labelText}}
+          @shape={{this.shapeValue}}
+          @selected={{this.selected}}
+          @onSelect={{this.toggleSelected}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='color'
+          @required={{true}}
+          @description='Any CSS colour. Unparseable input renders the empty (slashed) chip — it is never interpolated raw.'
+          @value={{this.color}}
+          @onInput={{this.setColor}}
+        />
+        <Args.String
+          @name='label'
+          @description='Visible label beside the chip. Also becomes the accessible name when given.'
+          @value={{this.labelText}}
+          @onInput={{this.setLabel}}
+        />
+        <Args.String
+          @name='shape'
+          @defaultValue='round'
+          @options={{this.shapes}}
+          @description='round (default) or square, which reads better in a dense grid.'
+          @value={{this.shape}}
+          @onInput={{this.setShape}}
+        />
+        <Args.Bool
+          @name='selected'
+          @defaultValue={{false}}
+          @description='Draws the selection ring.'
+          @value={{this.selected}}
+          @onInput={{this.setSelected}}
+        />
+        <Args.Action
+          @name='onSelect'
+          @description='Receives the swatch colour. Omitting it leaves a static chip.'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_SWATCH: Record<string, unknown> = {
+  Swatch: SwatchUsage,
+};

package/bundled-realms/pretui/components/switch.examples.gts

@@ -0,0 +1,53 @@
+// Pretui — Switch example gallery.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import {
+  Lab,
+  Row,
+  Stack,
+  SUPPLIERS,
+  pick,
+  seedFrom,
+} from '../examples-kit';
+import type { ExampleSpec } from '../examples-kit';
+import { Switch } from './switch';
+
+// ── Switch ───────────────────────────────────────────────────────────────
+const SWI = seedFrom('Switch');
+const swiSupplier = pick(SWI, 0, SUPPLIERS);
+const swiPortalLabel = 'Sync with the ' + swiSupplier + ' portal';
+
+const SwitchPrefs: TemplateOnlyComponent = <template>
+  <Stack>
+    <Row>
+      <Switch @defaultChecked={{true}} />
+      <Lab>Alert on price changes</Lab>
+    </Row>
+    <Row>
+      <Switch />
+      <Lab>Auto-publish the seasonal menu</Lab>
+    </Row>
+  </Stack>
+</template>;
+
+const SwitchGuarded: TemplateOnlyComponent = <template>
+  <Row>
+    <Switch @disabled={{true}} />
+    <Lab>{{swiPortalLabel}}</Lab>
+  </Row>
+</template>;
+
+export const EXAMPLES_SWITCH: Record<string, ExampleSpec[]> = {
+  Switch: [
+    {
+      title: 'Notification preferences',
+      note: 'Label text sits beside the control, sentence case.',
+      component: SwitchPrefs,
+    },
+    {
+      title: 'Guarded until ready',
+      note: 'Disabled until portal credentials land.',
+      component: SwitchGuarded,
+    },
+  ],
+};
+

package/bundled-realms/pretui/components/switch.gts

@@ -0,0 +1,118 @@
+// Switch: immediate on/off. A checked setting, not a Toggle press.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { emit, firstDefined } from '../pretui-primitives';
+
+export interface SwitchSignature {
+  Args: {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    controlId?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    /** aliases of @checked */
+    isSelected?: boolean;
+    selected?: boolean;
+    /** alias of @disabled */
+    isDisabled?: boolean;
+    /** alias — the HTML notify name for a checked control */
+    onChange?: (checked: boolean) => void;
+  };
+  Element: HTMLButtonElement;
+}
+
+export class Switch extends Component<SwitchSignature> {
+  @tracked internal = this.args.defaultChecked ?? false;
+  get controlled() {
+    return firstDefined(
+      this.args.checked,
+      this.args.isSelected,
+      this.args.selected,
+    );
+  }
+  get disabled() {
+    return firstDefined(this.args.disabled, this.args.isDisabled) ?? false;
+  }
+  get on() {
+    return this.controlled ?? this.internal;
+  }
+  toggle = () => {
+    if (this.disabled) {
+      return;
+    }
+    let next = !this.on;
+    if (this.controlled === undefined) {
+      this.internal = next;
+    }
+    emit([this.args.onCheckedChange, this.args.onChange], next);
+  };
+  <template>
+    <button
+      type='button'
+      role='switch'
+      id={{@controlId}}
+      aria-checked={{if this.on 'true' 'false'}}
+      class='pretui-switch'
+      data-state={{if this.on 'checked' 'unchecked'}}
+      disabled={{this.disabled}}
+      data-test-pretui-switch
+      {{on 'click' this.toggle}}
+      ...attributes
+    ><span class='pretui-switch-thumb'></span></button>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-switch {
+          position: relative;
+          width: 30px;
+          height: 18px;
+          border-radius: 9px;
+          background: var(
+            --pretui-control-border,
+            var(--line-strong, var(--boxel-400))
+          );
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+          transition: background var(--pretui-dur-snap, 180ms)
+            var(--pretui-ease-snap, ease);
+          flex: none;
+        }
+        .pretui-switch:active:not(:disabled) {
+          box-shadow: var(
+            --pretui-shadow-inset,
+            inset 0 1px 2px rgb(0 0 0 / 0.16)
+          );
+        }
+        .pretui-switch[data-state='checked'] {
+          background: var(--primary);
+        }
+        .pretui-switch:disabled {
+          opacity: 0.45;
+          cursor: default;
+        }
+        .pretui-switch-thumb {
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          background: var(--card);
+          box-shadow: 0 1px 2px var(--shadow-ink-mid, rgb(0 0 0 / 0.08));
+          transition: transform var(--pretui-dur-snap, 180ms)
+            var(--pretui-ease-snap, ease);
+        }
+        .pretui-switch[data-state='checked'] .pretui-switch-thumb {
+          transform: translateX(12px);
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-switch,
+          .pretui-switch-thumb {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}