@0001-labs/design-system-1 0.3.0-alpha.16 → 0.3.0-alpha.18

package/DS1/0-face/{drawer.ts → attach-overlay.ts}

@@ -3,10 +3,10 @@
  * from a menu button. Plain TypeScript with no Lit and no framework, so a page
  * of native HTML uses it as the elements do.
  *
- * `attachDrawer()` ties a toggle button to the parts it folds away (a
+ * `attachOverlay()` ties a toggle button to the parts it folds away (a
  * header's navigation and actions, a page's navigation). Opening moves them
- * into a native `<dialog class="ds-dialog ds-drawer">` laid over the screen
- * (1-root/drawer.css draws it), shown modally so the rest of the page is
+ * into a native `<dialog class="ds-overlay ds-overlay--screen">` laid over the screen
+ * (1-root/overlay.css draws it), shown modally so the rest of the page is
  * inert, with a close button where the toggle stood. While it is open:
  *
  * - Tab and Shift+Tab go round the panel's controls and never leave it;
@@ -19,7 +19,7 @@
  * stays the same (Menu) open or closed.
  *
  * @example
- * const drawer = attachDrawer({ toggle, content: [nav, actions], closeLabel: "Close" });
+ * const drawer = attachOverlay({ toggle, content: [nav, actions], closeLabel: "Close" });
  * drawer.open();
  */
 
@@ -29,8 +29,8 @@ export interface DrawerOptions {
   /** What the drawer holds while it is open: moved into the panel in this order and back on closing. */
   content: readonly Element[] | (() => readonly Element[]);
   /**
-   * The panel to open, with its close button marked `.ds-drawer__close`. A
-   * `<dialog class="ds-dialog ds-drawer">` is made beside the toggle when none
+   * The panel to open, with its close button marked `.ds-overlay__close`. A
+   * `<dialog class="ds-overlay ds-overlay--screen">` is made beside the toggle when none
    * is given, its close button a copy of the toggle.
    */
   panel?: HTMLDialogElement;
@@ -116,20 +116,20 @@ export function tabbables(root: Element): HTMLElement[] {
   return found;
 }
 
-export function attachDrawer(options: DrawerOptions): Drawer {
+export function attachOverlay(options: DrawerOptions): Drawer {
   const { toggle } = options;
   const document = toggle.ownerDocument;
   const made = !options.panel;
   const panel = options.panel ?? document.createElement("dialog");
   let placeholders: [Element, Comment][] = [];
   let open = false;
-  /** The button in the panel that closes it: made here, or the panel's own `.ds-drawer__close`. */
-  let closeButton: HTMLElement | null = options.panel?.querySelector<HTMLElement>(".ds-drawer__close") ?? null;
+  /** The button in the panel that closes it: made here, or the panel's own `.ds-overlay__close`. */
+  let closeButton: HTMLElement | null = options.panel?.querySelector<HTMLElement>(".ds-overlay__close") ?? null;
 
   if (made) {
-    panel.className = "ds-dialog ds-drawer";
+    panel.className = "ds-overlay ds-overlay--screen";
     const bar = document.createElement("div");
-    bar.className = "ds-drawer__bar";
+    bar.className = "ds-overlay__bar";
     // The close button is a copy of the toggle, so it shows the same icons
     // (the second one, close) in the same place.
     closeButton = toggle.cloneNode(true) as HTMLElement;
@@ -137,8 +137,8 @@ export function attachDrawer(options: DrawerOptions): Drawer {
     closeButton.removeAttribute("aria-controls");
     closeButton.removeAttribute("aria-expanded");
     closeButton.removeAttribute("aria-haspopup");
-    closeButton.classList.remove("ds-drawer__toggle", "ds-header__toggle");
-    closeButton.classList.add("ds-drawer__close");
+    closeButton.classList.remove("ds-overlay__toggle", "ds-header__toggle");
+    closeButton.classList.add("ds-overlay__close");
     closeButton.setAttribute("aria-label", options.closeLabel || "Close");
     if (closeButton instanceof HTMLButtonElement) closeButton.type = "button";
     bar.append(closeButton);
@@ -146,14 +146,14 @@ export function attachDrawer(options: DrawerOptions): Drawer {
     if (options.container) options.container.append(panel);
     else toggle.after(panel);
   }
-  panel.classList.add("ds-drawer");
+  panel.classList.add("ds-overlay--screen");
   const label = () => options.label || toggle.getAttribute("aria-label") || toggle.textContent?.trim() || "";
   if (!panel.hasAttribute("aria-label") && !panel.hasAttribute("aria-labelledby") && label()) panel.setAttribute("aria-label", label());
-  if (!panel.id) panel.id = `ds-drawer-${Math.random().toString(36).slice(2, 10)}`;
+  if (!panel.id) panel.id = `ds-overlay-${Math.random().toString(36).slice(2, 10)}`;
   if (!toggle.hasAttribute("aria-controls")) toggle.setAttribute("aria-controls", panel.id);
   toggle.setAttribute("aria-expanded", "false");
   toggle.setAttribute("aria-haspopup", "dialog");
-  toggle.classList.add("ds-drawer__toggle");
+  toggle.classList.add("ds-overlay__toggle");
 
   const parts = () => (typeof options.content === "function" ? options.content() : options.content).filter(Boolean);
 
@@ -162,7 +162,7 @@ export function attachDrawer(options: DrawerOptions): Drawer {
     open = true;
     const content = parts();
     placeholders = content.map(element => {
-      const mark = document.createComment("ds-drawer");
+      const mark = document.createComment("ds-overlay");
       element.before(mark);
       return [element, mark];
     });

package/DS1/0-face/{dialogs.ts → feedback-overlays.ts}

@@ -2,7 +2,7 @@
  * Dialogs that answer with a promise, in place of the browser's `alert()`,
  * `confirm()` and `prompt()`, for pages without Lit or any other framework.
  *
- * Each is drawn on the native `dialog.ds-dialog` frame from `1-root/controls.css`
+ * Each is drawn on the native `dialog.ds-overlay` frame from `1-root/controls.css`
  * (which the page loads) with its native buttons, `.ds-button--primary`,
  * `--secondary` and `--danger`, and opened with `showModal()`, so the browser
  * keeps the rest of the page inert behind it. Their words default to the
@@ -100,32 +100,32 @@ function show(spec: Spec): Promise<boolean | string | null> {
     const id = `ds-feedback-${++count}`;
     const opener = focused();
     const dialog = element("dialog", {
-      class: "ds-dialog",
+      class: "ds-overlay",
       role: spec.kind === "prompt" ? "dialog" : "alertdialog",
       "aria-labelledby": `${id}-title`,
       "data-ds-feedback": spec.kind,
     });
-    const header = element("div", { "data-ds-dialog": "header" });
-    header.appendChild(element("h2", { id: `${id}-title`, "data-ds-dialog": "title" }, spec.title));
+    const header = element("div", { "data-ds-overlay": "header" });
+    header.appendChild(element("h2", { id: `${id}-title`, "data-ds-overlay": "title" }, spec.title));
     if (spec.text) {
-      header.appendChild(element("p", { id: `${id}-text`, "data-ds-dialog": "description" }, spec.text));
+      header.appendChild(element("p", { id: `${id}-text`, "data-ds-overlay": "description" }, spec.text));
       dialog.setAttribute("aria-describedby", `${id}-text`);
     }
     dialog.appendChild(header);
 
     let input: HTMLInputElement | undefined;
     if (spec.field) {
-      const field = element("div", { "data-ds-dialog": "field" });
+      const field = element("div", { "data-ds-overlay": "field" });
       input = element("input", { id: `${id}-field`, class: "ds-input", type: "text", autocomplete: "off" });
       input.value = spec.field.value;
       if (spec.field.placeholder) input.placeholder = spec.field.placeholder;
-      if (spec.field.label) field.appendChild(element("label", { for: input.id, "data-ds-dialog": "label" }, spec.field.label));
+      if (spec.field.label) field.appendChild(element("label", { for: input.id, "data-ds-overlay": "label" }, spec.field.label));
       else input.setAttribute("aria-labelledby", `${id}-title`);
       field.appendChild(input);
       dialog.appendChild(field);
     }
 
-    const footer = element("div", { "data-ds-dialog": "footer" });
+    const footer = element("div", { "data-ds-overlay": "footer" });
     const cancel = spec.cancel === undefined ? undefined : element("button", { type: "button", class: "ds-button ds-button--secondary", value: "cancel" }, spec.cancel);
     const confirm = element("button", { type: "button", class: spec.danger ? "ds-button ds-button--secondary ds-button--danger" : "ds-button ds-button--primary", value: "confirm" }, spec.confirm);
     if (cancel) footer.appendChild(cancel);

package/DS1/0-face/feedback.ts

@@ -16,7 +16,7 @@
  *   (`./toaster.ts`) on a page without Lit and by `<ds-toast>` where the page
  *   has one. `configureToaster()` takes Sonner's `<Toaster />` props.
  * - `alert()`, `confirm()` and `prompt()` are drawn on the native
- *   `dialog.ds-dialog` frame from `1-root/controls.css`, which the page loads.
+ *   `dialog.ds-overlay` frame from `1-root/controls.css`, which the page loads.
  * - Default words (`./feedback-words.ts`) are English, with no language
  *   runtime. Where the page loads the language module (`./i18n.ts`, Sync 1's
  *   `languages` export), they are the shared words in the page's language
@@ -32,8 +32,8 @@
 export { configureToaster, pageToaster, toast } from "./toaster";
 export type { ToasterOptions } from "./toaster";
 export type { ToastButton, ToastData, ToastId, ToastOptions, ToastPosition, ToastPromiseMessages, ToastType } from "./toast-queue";
-export { alert, confirm, prompt } from "./dialogs";
-export type { AlertOptions, ConfirmOptions, PromptOptions } from "./dialogs";
+export { alert, confirm, prompt } from "./feedback-overlays";
+export type { AlertOptions, ConfirmOptions, PromptOptions } from "./feedback-overlays";
 export { copyText } from "./copy-text";
 export type { CopyTextOptions } from "./copy-text";
 export { setFeedbackWords } from "./feedback-words";

package/DS1/0-face/header.ts

@@ -4,7 +4,7 @@
  * draws them); call `startHeaders()` again for one added later.
  *
  * Each header's menu button (`.ds-header__toggle`) opens its navigation and
- * actions in a drawer (`0-face/drawer.ts`): a panel over the screen with focus
+ * actions in a drawer (`0-face/attach-overlay.ts`): a panel over the screen with focus
  * kept inside, closed by Escape, its close button, a link or the screen
  * widening, the page's scroll held behind it. The close button is named by the
  * toggle's `data-close-label`, "Close" without one; the page writes both names
@@ -25,7 +25,7 @@
  * </header>
  * <script type="module">import "/ds1/0-face/header.ts";</script>
  */
-import { attachDrawer, type Drawer } from "./drawer";
+import { attachOverlay, type Drawer } from "./attach-overlay";
 
 const started = new WeakMap<Element, Drawer>();
 
@@ -61,7 +61,7 @@ export function startHeaders(root: ParentNode = document): Drawer[] {
     if (started.has(header)) continue;
     const toggle = header.querySelector<HTMLElement>(":scope > .ds-header__toggle");
     if (!toggle) continue;
-    const drawer = attachDrawer({
+    const drawer = attachOverlay({
       toggle,
       content: () => [...header.querySelectorAll(":scope > :is(.ds-header__nav, .ds-header__actions)")],
       closeLabel: toggle.dataset.closeLabel,

package/DS1/0-face/{dialog-swipe.ts → overlay-swipe.ts}

@@ -1,9 +1,10 @@
 /**
  * Swipe a sheet or a drawer away: a finger that drags a dialog towards the
  * edge it came from moves it, and letting go far or fast enough dismisses it.
- * `ds-dialog` binds it for `placement="sheet"`, `"end"` and `"start"`; a page
- * without Lit binds its own `dialog.ds-dialog--sheet` (or `--end`, `--start`)
- * with `bindDialogSwipe(dialog)`. Plain TypeScript with no framework.
+ * `ds-overlay` binds it for `type="sheet"` and `type="drawer"`; a page
+ * without Lit binds its own `dialog.ds-overlay--sheet` (or `--drawer`, with
+ * `--start` for the start side) with `bindOverlaySwipe(dialog)`. Plain
+ * TypeScript with no framework.
  *
  * It follows the finger as touch does on Apple's platforms:
  *
@@ -13,26 +14,27 @@
  *   from the dialog's place on screen, not from where it was going).
  * - A drag along the content's own scroll is the content's: a sheet scrolled
  *   down scrolls back up first, a horizontal strip in a drawer scrolls, and a
- *   slider, a range input or anything marked `data-ds-dialog-no-swipe` keeps
+ *   slider, a range input or anything marked `data-ds-overlay-no-swipe` keeps
  *   its touches.
  * - Dragged the other way, it gives a little and pulls back (rubber-banding).
  * - On release it projects where the throw would come to rest (the
  *   deceleration of a scroll, rate 0.998) and dismisses when that is past half
  *   its size and the finger is not moving back; otherwise it settles home.
- * - The backdrop fades as the dialog goes (`--ds-dialog-progress`).
+ * - The backdrop fades as the dialog goes (`--ds-overlay-progress`).
  *
  * Dismissing asks first, as a close button does: the element sends
  * `ds-close-request` with the reason `"swipe"`, the native frame a cancelable
  * `ds-close-request` on the dialog, and closes it when no listener prevents
  * that. Declined (a form with unsaved changes asking first), it settles home.
- * The motion itself is dialog-placement.css's, in transform alone.
+ * The motion itself is overlay.css's, in transform alone.
  */
 
-export type DialogPlacement = "center" | "sheet" | "end" | "start";
+/** The edge an overlay comes from and a finger swipes it back to: a sheet's foot, a drawer's side, or none. */
+export type OverlayEdge = "none" | "bottom" | "end" | "start";
 
-export interface DialogSwipeOptions {
-  /** Where the dialog stands, read at each touch; from its class or `data-ds-placement` by default. */
-  placement?: DialogPlacement | (() => DialogPlacement);
+export interface OverlaySwipeOptions {
+  /** Its edge, read at each touch; from `data-ds-edge` or its class by default. */
+  edge?: OverlayEdge | (() => OverlayEdge);
   /**
    * Called when a swipe would dismiss it. By default a cancelable
    * `ds-close-request` (`detail.reason` `"swipe"`) on the dialog, then
@@ -51,14 +53,15 @@ const project = (velocity: number) => ((velocity / 1000) * DECELERATION) / (1 -
 const rubberband = (overshoot: number, dimension: number, constant = 0.55) =>
   (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
 
-const PLACEMENTS = new Set<DialogPlacement>(["center", "sheet", "end", "start"]);
+const EDGES = new Set<OverlayEdge>(["none", "bottom", "end", "start"]);
 
-/** A dialog's placement, from `data-ds-placement` or its `ds-dialog--` class. */
-export function dialogPlacement(dialog: HTMLDialogElement): DialogPlacement {
-  const marked = dialog.getAttribute("data-ds-placement") as DialogPlacement | null;
-  if (marked && PLACEMENTS.has(marked)) return marked;
-  for (const placement of ["sheet", "end", "start"] as const) if (dialog.classList.contains(`ds-dialog--${placement}`)) return placement;
-  return "center";
+/** An overlay's edge, from `data-ds-edge` (the element marks it) or its native classes. */
+export function overlayEdge(dialog: HTMLDialogElement): OverlayEdge {
+  const marked = dialog.getAttribute("data-ds-edge") as OverlayEdge | null;
+  if (marked && EDGES.has(marked)) return marked;
+  if (dialog.classList.contains("ds-overlay--sheet")) return "bottom";
+  if (dialog.classList.contains("ds-overlay--drawer")) return dialog.classList.contains("ds-overlay--start") ? "start" : "end";
+  return "none";
 }
 
 type Gesture = {
@@ -77,10 +80,10 @@ type Gesture = {
 };
 
 /** The axis the dialog leaves along, and the sign of the way out on it. */
-function direction(dialog: HTMLDialogElement, placement: DialogPlacement): { axis: "x" | "y"; sign: 1 | -1 } {
-  if (placement === "sheet") return { axis: "y", sign: 1 };
+function direction(dialog: HTMLDialogElement, edge: OverlayEdge): { axis: "x" | "y"; sign: 1 | -1 } {
+  if (edge === "bottom" || edge === "none") return { axis: "y", sign: 1 };
   const rtl = dialog.ownerDocument.defaultView?.getComputedStyle(dialog).direction === "rtl";
-  const right = (placement === "end") !== rtl;
+  const right = (edge === "end") !== rtl;
   return { axis: "x", sign: right ? 1 : -1 };
 }
 
@@ -123,10 +126,10 @@ function presented(dialog: HTMLDialogElement, axis: "x" | "y", sign: 1 | -1): nu
  * Let a finger swipe a sheet or drawer away. Returns the function that
  * unbinds it and clears what it set on the dialog.
  */
-export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeOptions = {}): () => void {
-  const placementNow = (): DialogPlacement => {
-    const given = typeof options.placement === "function" ? options.placement() : options.placement;
-    return given ?? dialogPlacement(dialog);
+export function bindOverlaySwipe(dialog: HTMLDialogElement, options: OverlaySwipeOptions = {}): () => void {
+  const edgeNow = (): OverlayEdge => {
+    const given = typeof options.edge === "function" ? options.edge() : options.edge;
+    return given ?? overlayEdge(dialog);
   };
   let gesture: Gesture | null = null;
   let settleTimer = 0;
@@ -134,23 +137,23 @@ export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeO
   const frame = (callback: () => void) => (view?.requestAnimationFrame ? view.requestAnimationFrame(callback) : view?.setTimeout(callback, 16) ?? 0);
 
   const write = (offset: number, size: number, sign: 1 | -1) => {
-    dialog.style.setProperty("--ds-dialog-drag", `${sign * offset}px`);
-    dialog.style.setProperty("--ds-dialog-progress", String(size > 0 ? Math.min(1, Math.max(0, offset / size)) : 0));
+    dialog.style.setProperty("--ds-overlay-drag", `${sign * offset}px`);
+    dialog.style.setProperty("--ds-overlay-progress", String(size > 0 ? Math.min(1, Math.max(0, offset / size)) : 0));
   };
   const clear = () => {
-    dialog.style.removeProperty("--ds-dialog-drag");
-    dialog.style.removeProperty("--ds-dialog-progress");
-    dialog.removeAttribute("data-ds-dialog-dragging");
+    dialog.style.removeProperty("--ds-overlay-drag");
+    dialog.style.removeProperty("--ds-overlay-progress");
+    dialog.removeAttribute("data-ds-overlay-dragging");
   };
   /** Home: the stylesheet's transition takes it back from where it is. */
   const settle = () => {
-    dialog.removeAttribute("data-ds-dialog-dragging");
-    dialog.style.setProperty("--ds-dialog-drag", "0px");
-    dialog.style.setProperty("--ds-dialog-progress", "0");
+    dialog.removeAttribute("data-ds-overlay-dragging");
+    dialog.style.setProperty("--ds-overlay-drag", "0px");
+    dialog.style.setProperty("--ds-overlay-progress", "0");
   };
 
   const dismiss = () => {
-    dialog.removeAttribute("data-ds-dialog-dragging");
+    dialog.removeAttribute("data-ds-overlay-dragging");
     if (options.onDismiss) options.onDismiss(dialog);
     else {
       const request = new CustomEvent("ds-close-request", { detail: { reason: "swipe" }, bubbles: true, composed: true, cancelable: true });
@@ -162,17 +165,17 @@ export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeO
   };
 
   const onStart = (event: TouchEvent) => {
-    const placement = placementNow();
-    if (!dialog.open || placement === "center") return;
+    const edge = edgeNow();
+    if (!dialog.open || edge === "none") return;
     if (event.touches.length !== 1) {
       if (gesture?.mode === "drag") settle();
       gesture = null;
       return;
     }
     const path = event.composedPath();
-    if (path.some(node => node instanceof Element && node.matches('[data-ds-dialog-no-swipe], input[type="range"], [role="slider"]'))) return;
+    if (path.some(node => node instanceof Element && node.matches('[data-ds-overlay-no-swipe], input[type="range"], [role="slider"]'))) return;
     const touch = event.touches[0]!;
-    const { axis, sign } = direction(dialog, placement);
+    const { axis, sign } = direction(dialog, edge);
     gesture = { id: touch.identifier, x: touch.clientX, y: touch.clientY, base: Math.max(0, presented(dialog, axis, sign)), start: 0, mode: "pending", offset: 0, samples: [], target: event.target, path };
   };
 
@@ -180,9 +183,9 @@ export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeO
     if (!gesture || gesture.mode === "ignore") return;
     const touch = [...event.touches].find(each => each.identifier === gesture!.id);
     if (!touch) return;
-    const placement = placementNow();
-    if (placement === "center") { gesture = null; return; }
-    const { axis, sign } = direction(dialog, placement);
+    const edge = edgeNow();
+    if (edge === "none") { gesture = null; return; }
+    const { axis, sign } = direction(dialog, edge);
     const dx = touch.clientX - gesture.x, dy = touch.clientY - gesture.y;
     const along = axis === "y" ? dy * sign : dx * sign;
     const across = axis === "y" ? dx : dy;
@@ -195,7 +198,7 @@ export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeO
       gesture.mode = "drag";
       gesture.start = along;
       settleTimer++;
-      dialog.setAttribute("data-ds-dialog-dragging", "");
+      dialog.setAttribute("data-ds-overlay-dragging", "");
     }
     event.preventDefault();
     const rect = dialog.getBoundingClientRect();
@@ -214,8 +217,8 @@ export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeO
     const ended = gesture;
     gesture = null;
     if (ended.mode !== "drag") return;
-    const placement = placementNow();
-    const { axis } = direction(dialog, placement === "center" ? "sheet" : placement);
+    const edge = edgeNow();
+    const { axis } = direction(dialog, edge);
     const rect = dialog.getBoundingClientRect();
     const size = axis === "y" ? rect.height : rect.width;
     // The speed of the last tenth of a second: a finger held still before letting go throws nothing.
@@ -225,7 +228,7 @@ export function bindDialogSwipe(dialog: HTMLDialogElement, options: DialogSwipeO
     const elapsed = first && last ? last.time - first.time : 0;
     const velocity = first && last && elapsed > 0 ? ((last.offset - first.offset) / elapsed) * 1000 : 0;
     const resting = ended.offset + project(velocity);
-    if (event.type !== "touchcancel" && placement !== "center" && ended.offset > 0 && resting > size / 2 && velocity > -100) dismiss();
+    if (event.type !== "touchcancel" && edge !== "none" && ended.offset > 0 && resting > size / 2 && velocity > -100) dismiss();
     else settle();
   };
 

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.16 */
+/* version 0.3.0-alpha.18 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/context.css

@@ -0,0 +1,151 @@
+@import "./component-metrics.css";
+
+/*
+ * `.ds-context` is the `ds-context` element's look on a native menu, for a page
+ * without Lit or a menu a library draws: Ezo's gap face. The rows carry the
+ * colour and the menu only cuts the outer silhouette, so the page shows
+ * through a pixel between rows and two between groups. The ink is the rows'
+ * fill and the paper their words, turned over with the theme as the tooltip
+ * is. Every row is 19px with the pixel under it, a square's pitch, its words
+ * on the sixteen and an icon at its end. A Select's menu is the light face,
+ * `.ds-menu`; a Context's is this dark one.
+ *
+ *   ds-context                 the menu (`role="menu"`); its rows are its buttons,
+ *                              links and menu items, or `ds-context__item`
+ *   ds-context__item           a row; `--danger` (or `data-danger`) in red
+ *   ds-context__label          a heading row, muted
+ *   ds-context__shortcut       a shortcut at the row's end, muted
+ *   ds-context__separator      a group gap (or an `hr`, or `role="separator"`):
+ *                              never a line; first, last or doubled it is quiet
+ *   [data-ds-refused]          a refused change: the row turns red
+ *
+ * The page places and opens it (a popover at the pointer, say) and owns its
+ * keys; the faces of hover, focus, disabled and the wait of a pending menu
+ * (`aria-busy="true"`) are here. Tokens as the element's: --ds-context-fill,
+ * --ds-context-ink, --ds-context-hover, --ds-context-danger,
+ * --ds-context-refused, --ds-context-radius.
+ */
+
+.ds-context {
+  --ds-context-row: calc(var(--ds-row-height) - 1px);
+  --ds-context-fill: light-dark(var(--ds-black, #1e1e1e), var(--ds-white, #ffffff));
+  --ds-context-ink: light-dark(var(--ds-white, #ffffff), var(--ds-black, #1e1e1e));
+  --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));
+  --ds-context-danger: light-dark(var(--ds-tuned-red), var(--ds-red-for-blood));
+  --ds-context-refused: var(--ds-tuned-red);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  width: var(--ds-menu-width, max-content);
+  min-width: calc(4 * var(--ds-unit));
+  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  clip-path: inset(0 round var(--ds-context-radius, var(--ds-radius, 4px)));
+  color: var(--ds-context-ink);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  list-style: none;
+}
+
+.ds-context > [role="group"] {
+  display: contents;
+}
+
+/* A row: whatever the page or library styles its buttons with, one row on the sixteen. */
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"]):not(.ds-context__label, .ds-context__separator, [role="separator"])) {
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+  align-items: flex-end !important;
+  justify-content: space-between !important;
+  gap: calc(4px * var(--ds-sf));
+  width: 100%;
+  height: var(--ds-context-row) !important;
+  min-height: var(--ds-context-row) !important;
+  max-height: var(--ds-context-row) !important;
+  margin: 0 !important;
+  padding: 0 calc(4px * var(--ds-sf)) !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: var(--ds-context-fill) !important;
+  color: var(--ds-context-ink) !important;
+  font: inherit;
+  line-height: var(--ds-type-lineheight-default) !important;
+  letter-spacing: inherit;
+  text-align: start;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(:hover, :focus-visible, [data-highlighted]):not(:disabled, [aria-disabled="true"], [data-disabled]) {
+  background: var(--ds-context-hover) !important;
+}
+
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ds-focus-ring);
+}
+
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(:disabled, [aria-disabled="true"], [data-disabled]) {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ds-context[aria-busy="true"] > * {
+  cursor: wait !important;
+}
+
+/* Danger is red, on either fill. */
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(.ds-context__item--danger, [data-danger], [data-variant="destructive"]) {
+  color: var(--ds-context-danger) !important;
+}
+
+/* A refused change: its row turns red a moment. */
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"]))[data-ds-refused] {
+  background: var(--ds-context-refused) !important;
+}
+
+/* Groups are a gap, never a line: the separator takes nothing but the gap after it. */
+.ds-context > :is(hr, .ds-context__separator, [role="separator"]) {
+  flex: 0 0 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: none !important;
+}
+
+/* A group left empty leaves no gap. */
+.ds-context > :is(hr, .ds-context__separator, [role="separator"]):is(:first-child, :last-child),
+.ds-context > :is(hr, .ds-context__separator, [role="separator"]) + :is(hr, .ds-context__separator, [role="separator"]) {
+  display: none !important;
+}
+
+.ds-context :is(.ds-context__label, [data-ds-menu-label]) {
+  box-sizing: border-box;
+  height: var(--ds-context-row);
+  /* The spare three above the sixteen. */
+  padding: calc(var(--ds-context-row) - var(--ds-type-lineheight-default)) calc(4px * var(--ds-sf)) 0;
+  background: var(--ds-context-fill);
+  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));
+  line-height: var(--ds-type-lineheight-default);
+  white-space: nowrap;
+}
+
+.ds-context__shortcut {
+  margin-left: auto;
+  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));
+}