@0001-labs/design-system-1 0.3.0-alpha.15 → 0.3.0-alpha.17

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/generated/toast-assets.ts

@@ -5,7 +5,7 @@
  */
 
 /** The toast's stylesheet, the same one `<ds-toast>` imports. */
-export const toastStyles: string = "[data-ds-shape=\"square\"], :host([data-ds-shape=\"square\"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: 0.5px}[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=\"circular\"], :host([data-ds-shape=\"circular\"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root, :host, :where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:host{--ds-toast-width: calc(16 * var(--ds-unit));--ds-toast-offset: var(--ds-unit);--ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));--ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));--ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));display: contents}section{display: contents}ol{--lift: -1;position: fixed;z-index: 2147483000;box-sizing: border-box;width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));margin: 0;padding: 0;list-style: none;outline: none;pointer-events: none}ol[data-y=\"top\"]{--lift: 1;top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px))}ol[data-y=\"bottom\"]{bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px))}ol[data-x=\"left\"]{left: var(--ds-toast-offset)}ol[data-x=\"right\"]{right: var(--ds-toast-offset)}ol[data-x=\"center\"]{left: 50%;transform: translateX(-50%)}:host([contained]) ol{position: absolute;z-index: var(--ds-toast-z-index, 60)}:host([contained]) ol[data-y=\"top\"]{top: var(--ds-toast-offset)}:host([contained]) ol[data-y=\"bottom\"]{bottom: var(--ds-toast-offset)}.toast{--swipe: 0px;position: absolute;left: 0;right: 0;box-sizing: border-box;width: max-content;max-width: 100%;overflow: hidden;border-radius: var(--ds-radius);background: var(--ds-toast-background);color: var(--ds-toast-color);font-family: var(--ds-typeface-regular);font-feature-settings: var(--ds-font-features);font-size: var(--ds-type-size-default);line-height: var(--ds-control-height);letter-spacing: var(--ds-type-letterspacing-default);outline: none;touch-action: none;user-select: none;pointer-events: auto;opacity: 0;transition: transform 400ms ease, opacity 400ms ease}ol[data-y=\"bottom\"] .toast{bottom: 0}ol[data-y=\"top\"] .toast{top: 0}ol[data-x=\"center\"] .toast{margin-inline: auto}ol[data-x=\"left\"] .toast{margin-right: auto}ol[data-x=\"right\"] .toast{margin-left: auto}.toast:focus-visible{outline: 2px solid var(--ds-focus-ring);outline-offset: 1px}.toast[data-mounted=\"false\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-mounted=\"true\"]{opacity: 1}ol[data-expanded=\"false\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05))}ol[data-expanded=\"false\"] .toast[data-front=\"false\"]{height: var(--front-height)}ol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body{opacity: 0}ol[data-expanded=\"true\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)))}.toast[data-visible=\"false\"]{opacity: 0;pointer-events: none}.toast[data-swiping=\"true\"]{transition: none}.toast[data-removed=\"true\"]{opacity: 0;pointer-events: none}.toast[data-removed=\"true\"][data-front=\"true\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-swipe-out=\"true\"]{transform: translateY(calc(var(--swipe) + var(--lift) * -100%))}.body{display: flex;align-items: flex-start;gap: calc(4px * var(--ds-sf));box-sizing: border-box;min-height: var(--ds-control-height);padding-inline: calc(4px * var(--ds-sf));transition: opacity 400ms ease}.icon{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);--ds-icon-color: currentColor}.icon:first-child{margin-left: calc(-4px * var(--ds-sf))}.icon > svg, .close > svg{width: calc(14px * var(--ds-sf));height: calc(14px * var(--ds-sf))}.content{flex: 1 1 auto;min-width: 0}.title, .description{white-space: normal;overflow-wrap: anywhere}.description{opacity: 0.7}.button{flex: 0 0 auto;margin: 0 0 0 calc(4px * var(--ds-sf));padding: 0;border: 0;background: none;color: inherit;font: inherit;letter-spacing: inherit;text-decoration: underline;text-underline-offset: 2px;cursor: pointer}a.button{display: inline-block}.button.cancel{opacity: 0.7}.button:focus-visible, .close:focus-visible{outline: 1px solid currentColor;outline-offset: 1px;border-radius: 1px}.close{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);margin: 0 calc(-4px * var(--ds-sf)) 0 0;padding: 0;border: 0;background: none;color: inherit;cursor: pointer;--ds-icon-color: currentColor}.spinner{width: calc(10px * var(--ds-sf));height: calc(10px * var(--ds-sf));box-sizing: border-box;border: 1px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color: currentColor;border-radius: 50%;animation: ds-toast-spin 720ms linear infinite}@keyframes ds-toast-spin{to{transform: rotate(360deg)}}:host([rich-colors]) .toast[data-type=\"success\"]{--ds-toast-background: var(--ds-apple-green)}:host([rich-colors]) .toast[data-type=\"info\"]{--ds-toast-background: var(--ds-zenith-blue)}:host([rich-colors]) .toast[data-type=\"warning\"]{--ds-toast-background: var(--ds-orange)}:host([rich-colors]) .toast[data-type=\"error\"]{--ds-toast-background: var(--ds-tuned-red)}:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]){--ds-toast-color: var(--ds-black)}@media (prefers-reduced-motion: reduce){.toast, .body{transition: none}.spinner{animation: none}}";
+export const toastStyles: string = "[data-ds-shape=\"square\"], :host([data-ds-shape=\"square\"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: 0.5px}[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=\"circular\"], :host([data-ds-shape=\"circular\"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root, :host, :where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:host{--ds-toast-width: calc(16 * var(--ds-unit));--ds-toast-offset: var(--ds-unit);--ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));--ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));--ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));display: contents}section{display: contents}ol{--lift: -1;position: fixed;z-index: 2147483000;inset: auto;overflow: visible;border: 0;background: transparent;color: inherit;box-sizing: border-box;width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));margin: 0;padding: 0;list-style: none;outline: none;pointer-events: none}ol[data-y=\"top\"]{--lift: 1;top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px))}ol[data-y=\"bottom\"]{bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px))}ol[data-x=\"left\"]{left: var(--ds-toast-offset)}ol[data-x=\"right\"]{right: var(--ds-toast-offset)}ol[data-x=\"center\"]{left: 50%;transform: translateX(-50%)}:host([contained]) ol{position: absolute;z-index: var(--ds-toast-z-index, 60)}:host([contained]) ol[data-y=\"top\"]{top: var(--ds-toast-offset)}:host([contained]) ol[data-y=\"bottom\"]{bottom: var(--ds-toast-offset)}.toast{--swipe: 0px;position: absolute;left: 0;right: 0;box-sizing: border-box;width: max-content;max-width: 100%;overflow: hidden;border-radius: var(--ds-radius);background: var(--ds-toast-background);color: var(--ds-toast-color);font-family: var(--ds-typeface-regular);font-feature-settings: var(--ds-font-features);font-size: var(--ds-type-size-default);line-height: var(--ds-control-height);letter-spacing: var(--ds-type-letterspacing-default);outline: none;touch-action: none;user-select: none;pointer-events: auto;opacity: 0;transition: transform 400ms ease, opacity 400ms ease}ol[data-y=\"bottom\"] .toast{bottom: 0}ol[data-y=\"top\"] .toast{top: 0}ol[data-x=\"center\"] .toast{margin-inline: auto}ol[data-x=\"left\"] .toast{margin-right: auto}ol[data-x=\"right\"] .toast{margin-left: auto}.toast:focus-visible{outline: 2px solid var(--ds-focus-ring);outline-offset: 1px}.toast[data-mounted=\"false\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-mounted=\"true\"]{opacity: 1}ol[data-expanded=\"false\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05))}ol[data-expanded=\"false\"] .toast[data-front=\"false\"]{height: var(--front-height)}ol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body{opacity: 0}ol[data-expanded=\"true\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)))}.toast[data-visible=\"false\"]{opacity: 0;pointer-events: none}.toast[data-swiping=\"true\"]{transition: none}.toast[data-removed=\"true\"]{opacity: 0;pointer-events: none}.toast[data-removed=\"true\"][data-front=\"true\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-swipe-out=\"true\"]{transform: translateY(calc(var(--swipe) + var(--lift) * -100%))}.body{display: flex;align-items: flex-start;gap: calc(4px * var(--ds-sf));box-sizing: border-box;min-height: var(--ds-control-height);padding-inline: calc(4px * var(--ds-sf));transition: opacity 400ms ease}.icon{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);--ds-icon-color: currentColor}.icon:first-child{margin-left: calc(-4px * var(--ds-sf))}.icon > svg, .close > svg{width: calc(14px * var(--ds-sf));height: calc(14px * var(--ds-sf))}.content{flex: 1 1 auto;min-width: 0}.title, .description{white-space: normal;overflow-wrap: anywhere}.description{opacity: 0.7}.button{flex: 0 0 auto;margin: 0 0 0 calc(4px * var(--ds-sf));padding: 0;border: 0;background: none;color: inherit;font: inherit;letter-spacing: inherit;text-decoration: underline;text-underline-offset: 2px;cursor: pointer}a.button{display: inline-block}.button.cancel{opacity: 0.7}.button:focus-visible, .close:focus-visible{outline: 1px solid currentColor;outline-offset: 1px;border-radius: 1px}.close{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);margin: 0 calc(-4px * var(--ds-sf)) 0 0;padding: 0;border: 0;background: none;color: inherit;cursor: pointer;--ds-icon-color: currentColor}.spinner{width: calc(10px * var(--ds-sf));height: calc(10px * var(--ds-sf));box-sizing: border-box;border: 1px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color: currentColor;border-radius: 50%;animation: ds-toast-spin 720ms linear infinite}@keyframes ds-toast-spin{to{transform: rotate(360deg)}}:host([rich-colors]) .toast[data-type=\"success\"]{--ds-toast-background: var(--ds-apple-green)}:host([rich-colors]) .toast[data-type=\"info\"]{--ds-toast-background: var(--ds-zenith-blue)}:host([rich-colors]) .toast[data-type=\"warning\"]{--ds-toast-background: var(--ds-orange)}:host([rich-colors]) .toast[data-type=\"error\"]{--ds-toast-background: var(--ds-tuned-red)}:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]){--ds-toast-color: var(--ds-black)}@media (prefers-reduced-motion: reduce){.toast, .body{transition: none}.spinner{animation: none}}";
 
 export type ToastIconName = "check" | "close" | "notifications" | "warning";
 

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/0-face/toaster.ts

@@ -98,7 +98,9 @@ function icon(name: string, className: string): HTMLSpanElement | undefined {
 class PageToaster {
   readonly host = element("div", { "data-ds-toaster": "" });
   private readonly section = element("section", { "aria-live": "polite", "aria-relevant": "additions text", "aria-atomic": "false" });
-  private readonly list = element("ol", { tabindex: "-1" });
+  private readonly list = element("ol", { tabindex: "-1", popover: "manual" });
+  /** The front toast the stack was last raised for. */
+  private raisedFor: ToastId | undefined;
   private items: Item[] = [];
   private heights = new Map<ToastId, number>();
   private timers = new Map<ToastId, Timer>();
@@ -267,7 +269,9 @@ class PageToaster {
     toast.addEventListener("pointerdown", event => {
       const now = this.live.find(entry => entry.data.id === id);
       if (!now || now.data.dismissible === false || now.data.type === "loading") return;
-      if ((event.composedPath()[0] as Element | undefined)?.closest?.("button, a")) return;
+      // Controls can contain icons with their own shadow root. Inspect the whole
+      // event path so swipe capture never steals their click.
+      if (event.composedPath().some(node => node instanceof Element && node.matches("button, a"))) return;
       toast.setPointerCapture?.(event.pointerId);
       this.swipe = { id, start: event.clientY, time: Date.now(), amount: 0 };
       this.interacting = true;
@@ -298,7 +302,21 @@ class PageToaster {
   }
 
   /** Draw the stack: every toast's place, and each toast's words where they changed. */
+  /** In the top layer, above an open sheet or modal, as `<ds-toast>`: shown again for each new front toast. */
+  private raise() {
+    const front = this.live[0]?.data.id;
+    if (front === this.raisedFor || typeof this.list.showPopover !== "function" || !this.list.isConnected) return;
+    this.raisedFor = front;
+    try {
+      if (this.list.matches(":popover-open")) this.list.hidePopover();
+      if (front !== undefined) this.list.showPopover();
+    } catch {
+      // A browser without popovers: it stays as it is drawn.
+    }
+  }
+
   render() {
+    this.raise();
     if (!this.live.length) { this.hovered = false; this.focused = false; }
     this.section.setAttribute("aria-label", `${settings.label ?? feedbackWord("Notifications")} alt+T`);
     this.host.toggleAttribute("rich-colors", !!settings.richColors);

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.15 */
+/* version 0.3.0-alpha.17 */
 
 /* 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/component-tokens.css

@@ -88,6 +88,10 @@
      takes Orange's dim (#4c3f1a, its pastel in dark mode); dark paper takes
      Orange itself. Both read above 4.5:1 as 14px text. */
   --ds-warning-color: light-dark(#4c3f1a, var(--ds-orange));
+  /* What went well or is done. Apple green is too light for text and marks on
+     light paper, so light paper takes it deepened with the ink (Money's green
+     for money in); dark paper takes Apple green itself. */
+  --ds-success-color: light-dark(color-mix(in oklab, var(--ds-apple-green) 30%, var(--ds-black)), var(--ds-apple-green));
   --ds-border-color: light-dark(#d8d8d8, #3d3d3d);
   --ds-fill: light-dark(var(--ds-slate-light), var(--ds-slate-dark));
   --ds-fill-hover: light-dark(#e2e2e2, #404040);

package/DS1/1-root/controls.css

@@ -3,7 +3,7 @@
 @import "./text.css";
 @import "./empty.css";
 @import "./notice.css";
-@import "./dialog-placement.css";
+@import "./overlay.css";
 @import "./header.css";
 @import "./footer.css";
 @import "./document.css";
@@ -481,25 +481,27 @@ textarea.ds-input {
 }
 
 /*
- * `.ds-dialog` is the `ds-dialog` element's frame on a native `<dialog>`:
- * twenty squares wide, a square of padding, square corners, a hairline and the
- * paper. Its header, title, description, footer and close button are marked
- * with data-ds-dialog, as inside the element.
+ * `.ds-overlay` is the `ds-overlay` element's frame on a native `<dialog>`, a
+ * modal by default: twenty squares wide, a square of padding, square corners,
+ * a hairline and the paper. `ds-overlay--sheet`, `ds-overlay--drawer` (with
+ * `ds-overlay--start` for the start side) and `ds-overlay--screen` are its
+ * other types (overlay.css). Its header, title, description, footer and close button are marked
+ * with data-ds-overlay, as inside the element.
  */
 
-dialog.ds-dialog {
+dialog.ds-overlay {
   box-sizing: border-box;
   position: fixed;
   inset: 0;
-  width: var(--ds-dialog-width, calc(20 * var(--ds-unit)));
-  max-width: var(--ds-dialog-max-width, calc(100vw - 2 * var(--ds-unit)));
-  max-height: var(--ds-dialog-max-height, calc(100dvh - 2 * var(--ds-unit)));
-  height: var(--ds-dialog-height, fit-content);
+  width: var(--ds-overlay-width, calc(20 * var(--ds-unit)));
+  max-width: var(--ds-overlay-max-width, calc(100vw - 2 * var(--ds-unit)));
+  max-height: var(--ds-overlay-max-height, calc(100dvh - 2 * var(--ds-unit)));
+  height: var(--ds-overlay-height, fit-content);
   margin: auto;
-  padding: var(--ds-dialog-padding, var(--ds-unit));
-  border: var(--ds-dialog-border, 1px solid var(--ds-border-color));
+  padding: var(--ds-overlay-padding, var(--ds-unit));
+  border: var(--ds-overlay-border, 1px solid var(--ds-border-color));
   border-radius: 0;
-  background: var(--ds-dialog-paper, var(--ds-paper));
+  background: var(--ds-overlay-paper, var(--ds-paper));
   color: var(--ds-text-color);
   box-shadow: none;
   overflow: auto;
@@ -512,40 +514,45 @@ dialog.ds-dialog {
   letter-spacing: var(--ds-type-letterspacing-default);
 }
 
-dialog.ds-dialog[open] {
+dialog.ds-overlay[open] {
   display: flex;
   flex-direction: column;
   gap: var(--ds-unit);
 }
 
-dialog.ds-dialog::backdrop {
+dialog.ds-overlay::backdrop {
   background: color-mix(in srgb, var(--ds-black) 40%, transparent);
 }
 
-.ds-dialog [data-ds-dialog="header"] {
+.ds-overlay [data-ds-overlay="header"] {
   display: flex;
   flex-direction: column;
-  padding-right: var(--ds-unit);
 }
 
-.ds-dialog [data-ds-dialog="title"] {
+/* The header keeps the last square of its row for the close button, only when it has one. */
+dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
+  padding-inline-end: var(--ds-unit);
+}
+
+/* The title on its square's lower sixteen, as every row's words. */
+.ds-overlay [data-ds-overlay="title"] {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   min-height: var(--ds-row-height);
   margin: 0;
   color: var(--ds-text-color);
   font: inherit;
   font-weight: var(--ds-type-weight-bold);
-  line-height: var(--ds-row-height);
+  line-height: var(--ds-type-lineheight-default);
 }
 
-.ds-dialog [data-ds-dialog="description"] {
+.ds-overlay [data-ds-overlay="description"] {
   margin: 0;
   color: var(--ds-text-color-muted);
   font: inherit;
 }
 
-.ds-dialog [data-ds-dialog="footer"] {
+.ds-overlay [data-ds-overlay="footer"] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -554,7 +561,7 @@ dialog.ds-dialog::backdrop {
   min-height: var(--ds-row-height);
 }
 
-.ds-dialog [data-ds-dialog="close"] {
+.ds-overlay [data-ds-overlay="close"] {
   position: absolute;
   top: var(--ds-unit);
   right: var(--ds-unit);
@@ -562,17 +569,17 @@ dialog.ds-dialog::backdrop {
 
 /* A field in the frame, as a prompt has: its label one row high, the field
  * one row high beneath it and as wide as the frame, two squares in all. */
-.ds-dialog [data-ds-dialog="field"] {
+.ds-overlay [data-ds-overlay="field"] {
   display: flex;
   flex-direction: column;
 }
 
-.ds-dialog [data-ds-dialog="label"] {
+.ds-overlay [data-ds-overlay="label"] {
   min-height: var(--ds-row-height);
   line-height: var(--ds-row-height);
 }
 
-.ds-dialog [data-ds-dialog="field"] > .ds-input {
+.ds-overlay [data-ds-overlay="field"] > .ds-input {
   --ds-input-height: var(--ds-row-height);
   width: 100%;
 }