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

package/DS1/0-face/app-banner.ts

@@ -0,0 +1,148 @@
+// app-banner.ts
+// Where a banner leading to a site's iPhone app shows, and what its Open does.
+// `<ds-message form="app">` uses it, and a page without Lit calls
+// `startAppBanners()` for every `.ds-notice--app` block it wrote.
+//
+// On a phone or tablet running iOS, Safari draws Apple's own Smart App Banner
+// from `<meta name="apple-itunes-app">`, so the page draws nothing there; in
+// another iOS browser (Chrome, Firefox, Edge…) the page draws Design system
+// 1's banner. Never on a computer, an Android phone, a page opened from the
+// home screen or an app's own web view, and never again once closed in this
+// browser.
+
+import { detectMobileDevice } from "./scaling";
+
+export interface AppBannerOptions {
+  /** The app's App Store id, the digits after `id` in its store address. */
+  appId?: string;
+  /** The app's store address; `https://apps.apple.com/app/id<appId>` by default. */
+  appUrl?: string;
+  /** The address that opens the app at this page: a universal link or the app's own scheme. */
+  open?: string;
+  /** What remembers the close in this browser; one key per app by default. */
+  key?: string;
+}
+
+/** `safari`: Apple's banner from the meta tag; `drawn`: the page's own; `none`: nothing. */
+export type AppBannerPlacement = "safari" | "drawn" | "none";
+
+export interface AppBannerDevice {
+  userAgent: string;
+  touchPoints: number;
+  /** A phone or tablet, as the scale reads it. */
+  mobile: boolean;
+  /** Opened from the home screen. */
+  standalone: boolean;
+}
+
+/** iOS's other browsers, each with Safari's engine and its own token. */
+const OTHER_BROWSERS = /CriOS|FxiOS|EdgiOS|OPiOS|OPT\/|GSA\/|DuckDuckGo|Ddg\/|YaBrowser|Focus\/|Brave\//;
+
+export function appBannerDevice(): AppBannerDevice {
+  if (typeof navigator === "undefined" || typeof window === "undefined") return { userAgent: "", touchPoints: 0, mobile: false, standalone: false };
+  const standalone = Boolean((navigator as Navigator & { standalone?: boolean }).standalone)
+    || Boolean(window.matchMedia?.("(display-mode: standalone)").matches);
+  return { userAgent: navigator.userAgent || "", touchPoints: navigator.maxTouchPoints || 0, mobile: detectMobileDevice(), standalone };
+}
+
+/** An iPhone, iPod or iPad, including an iPad that asks for the desktop site. */
+export function isAppleMobile({ userAgent, touchPoints }: Pick<AppBannerDevice, "userAgent" | "touchPoints">): boolean {
+  return /iPhone|iPad|iPod/.test(userAgent) || (/Macintosh/.test(userAgent) && touchPoints > 1);
+}
+
+/**
+ * Safari, another browser, or an app's web view. A web view's agent has no
+ * `Safari/` token (Safari's view controller and sign-in sheet keep it).
+ */
+export function appleBrowser(userAgent: string): "safari" | "other" | "webview" {
+  if (OTHER_BROWSERS.test(userAgent)) return "other";
+  return /Safari\//.test(userAgent) ? "safari" : "webview";
+}
+
+export function appBannerKey(options: AppBannerOptions): string {
+  return options.key || `ds-app-banner:${options.appId || options.appUrl || options.open || ""}`;
+}
+
+export function appStoreUrl(options: AppBannerOptions): string {
+  return options.appUrl || (options.appId ? `https://apps.apple.com/app/id${options.appId}` : "");
+}
+
+export function isAppBannerClosed(options: AppBannerOptions): boolean {
+  try { return localStorage.getItem(appBannerKey(options)) === "closed"; } catch { return false; }
+}
+
+/** Remembers the close in this browser, so the banner never comes back here. */
+export function closeAppBanner(options: AppBannerOptions): void {
+  try { localStorage.setItem(appBannerKey(options), "closed"); } catch { /* private mode keeps it for the page */ }
+}
+
+/**
+ * Where the banner shows on this device. Safari takes Apple's banner only
+ * when there is an App Store id for its meta tag; without one it draws the
+ * page's own, like the other browsers.
+ */
+export function appBannerPlacement(options: AppBannerOptions, device: AppBannerDevice = appBannerDevice()): AppBannerPlacement {
+  if (!appStoreUrl(options) && !options.open) return "none";
+  if (!device.mobile || device.standalone || !isAppleMobile(device)) return "none";
+  const browser = appleBrowser(device.userAgent);
+  if (browser === "webview") return "none";
+  if (browser === "safari" && options.appId) return "safari";
+  return isAppBannerClosed(options) ? "none" : "drawn";
+}
+
+/**
+ * Writes Apple's `<meta name="apple-itunes-app">` when the page has none.
+ * Safari reads it as the page loads, so a page that knows its app writes the
+ * tag in its own head; this is the fallback for one that did not.
+ */
+export function ensureSmartAppBanner(options: AppBannerOptions): void {
+  if (typeof document === "undefined" || !options.appId) return;
+  if (document.head.querySelector('meta[name="apple-itunes-app"]')) return;
+  const meta = document.createElement("meta");
+  meta.name = "apple-itunes-app";
+  meta.content = [`app-id=${options.appId}`, options.open ? `app-argument=${options.open}` : ""].filter(Boolean).join(", ");
+  document.head.append(meta);
+}
+
+/**
+ * Opens the app: the deep link first, then the App Store when the page is
+ * still in view a moment later (the app was not there to take it). Without a
+ * deep link, the store, which offers Open when the app is installed.
+ */
+export function openApp(options: AppBannerOptions, wait = 1500): void {
+  const store = appStoreUrl(options);
+  if (!options.open) { if (store) location.href = store; return; }
+  location.href = options.open;
+  if (!store) return;
+  const timer = window.setTimeout(() => { if (document.visibilityState === "visible") location.href = store; }, wait);
+  const left = () => { window.clearTimeout(timer); document.removeEventListener("visibilitychange", left); window.removeEventListener("pagehide", left); };
+  document.addEventListener("visibilitychange", left);
+  window.addEventListener("pagehide", left);
+}
+
+/**
+ * Puts every `.ds-notice--app` block on the page in place: hides it unless
+ * this device draws it, writes the meta tag for Safari, and wires its Open
+ * link (`.ds-notice__open`) and close button (`.ds-notice__dismiss`). The
+ * block names its app in `data-app-id`, `data-app-url`, `data-open` and
+ * optionally `data-remember`. Returns a function that unwires them.
+ */
+export function startAppBanners(root: ParentNode = document): () => void {
+  const undo: (() => void)[] = [];
+  for (const block of root.querySelectorAll<HTMLElement>(".ds-notice--app")) {
+    const options: AppBannerOptions = { appId: block.dataset.appId, appUrl: block.dataset.appUrl, open: block.dataset.open, key: block.dataset.remember };
+    const placement = appBannerPlacement(options);
+    if (placement === "safari") ensureSmartAppBanner(options);
+    block.hidden = placement !== "drawn";
+    if (block.hidden) continue;
+    const link = block.querySelector<HTMLAnchorElement>(".ds-notice__open");
+    const close = block.querySelector<HTMLButtonElement>(".ds-notice__dismiss");
+    if (link && !link.getAttribute("href")) link.href = appStoreUrl(options);
+    const onOpen = (event: MouseEvent) => { if (!options.open) return; event.preventDefault(); openApp(options); };
+    const onClose = () => { closeAppBanner(options); block.hidden = true; };
+    link?.addEventListener("click", onOpen);
+    close?.addEventListener("click", onClose);
+    undo.push(() => { link?.removeEventListener("click", onOpen); close?.removeEventListener("click", onClose); });
+  }
+  return () => undo.forEach(fn => fn());
+}

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.17 */
+/* version 0.3.0-alpha.19 */
 
 /* 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,152 @@
+@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 rows are black
+ * with white words in both themes, as Ezo's menus always were (the slate in
+ * dark, darker than the page). 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);
+  /* Black in both themes, as Ezo's menus always were: in dark the slate, darker than the page. */
+  --ds-context-fill: light-dark(var(--ds-black, #2a2a2a), var(--ds-slate, #1e1e1e));
+  --ds-context-ink: var(--ds-white, #ffffff);
+  --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));
+  --ds-context-danger: var(--ds-tuned-red);
+  --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));
+}

package/DS1/1-root/controls.css

@@ -12,6 +12,7 @@
 @import "./figures.css";
 @import "./progress.css";
 @import "./row.css";
+@import "./context.css";
 
 /*
  * Native controls in shared dress.
@@ -454,7 +455,7 @@ textarea.ds-input {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--ds-tabs-gap, calc(10px * var(--ds-sf)));
+  gap: calc(4px * var(--ds-sf));
   min-width: 0;
   height: var(--ds-row-height);
 }

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.17 */
+/* version 0.3.0-alpha.19 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/notice.css

@@ -21,6 +21,14 @@
  *   ds-notice--banner               a strip across the top of its positioning
  *                                   context instead: one square high, filled in
  *                                   the tone's colour, everything on one line
+ *   ds-notice--app                  a row at the top of the page leading to the
+ *                                   site's iPhone app: its picture
+ *                                   (ds-notice__picture, two squares), its name
+ *                                   and one line about it, Open
+ *                                   (a.ds-notice__open) and the close; three
+ *                                   squares high with a hairline at its foot.
+ *                                   startAppBanners() from 0-face/app-banner.ts
+ *                                   shows it only where it belongs
  *
  * Give the block role="status", or role="alert" for danger, so assistive
  * technology reads it when it appears.
@@ -163,3 +171,76 @@
   margin-block: 0;
   margin-inline-start: 0;
 }
+
+/* The app banner: a row at the top of the page, in the flow, three squares
+   high: half a square above and below two squares of content, a hairline at
+   its foot. The app's picture fills two squares with a picture's corners; the
+   name and the line about it take a square each, on the sixteen; Open and the
+   close stand on the sixteen of the square in the middle of the two. */
+.ds-notice--app {
+  grid-template-columns: calc(2 * var(--ds-unit)) minmax(0, 1fr) auto var(--ds-unit);
+  grid-template-rows: var(--ds-unit) var(--ds-unit);
+  column-gap: calc(var(--ds-unit) / 2);
+  align-items: end;
+  padding: calc(var(--ds-unit) / 2) var(--ds-unit);
+  background: var(--ds-paper);
+  box-shadow: inset 0 -1px 0 var(--ds-border-color);
+  line-height: var(--ds-type-lineheight-default);
+}
+
+.ds-notice--app[hidden] {
+  display: none;
+}
+
+.ds-notice__picture {
+  box-sizing: border-box;
+  grid-column: 1;
+  grid-row: 1 / 3;
+  align-self: stretch;
+  overflow: hidden;
+  border-radius: var(--ds-radius);
+  background: var(--ds-fill);
+  outline: 1px solid var(--ds-border-color);
+  outline-offset: -1px;
+}
+
+.ds-notice__picture img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ds-notice--app .ds-notice__title,
+.ds-notice--app .ds-notice__text {
+  grid-column: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-notice--app .ds-notice__title { grid-row: 1; }
+
+.ds-notice--app .ds-notice__text {
+  grid-row: 2;
+  color: var(--ds-text-color-muted);
+}
+
+/* Open and the close: their square starts half a square into the two, its
+   control on the lower sixteen of it. */
+.ds-notice--app .ds-notice__open,
+.ds-notice--app .ds-notice__dismiss {
+  grid-row: 1 / 3;
+  align-self: start;
+  margin: calc(1.5 * var(--ds-unit) - var(--ds-control-height)) 0 0;
+}
+
+.ds-notice--app .ds-notice__open {
+  grid-column: 3;
+  text-decoration: none;
+}
+
+.ds-notice--app .ds-notice__dismiss {
+  grid-column: 4;
+  justify-self: end;
+}

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.17 */
+/* version 0.3.0-alpha.19 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.17 */
+/* DS1 — version 0.3.0-alpha.19 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

package/DS1/1-root/row.css

@@ -132,18 +132,52 @@ button.ds-row {
   z-index: 2;
 }
 
-/* The pointer, the press, the current destination and the focus ring. */
-a.ds-row[href]:hover,
-button.ds-row:hover:not(:disabled),
+/*
+ * The pointer, the press, the current destination and the focus ring are one layer under the
+ * row's content (Joachim, 19 October 2026). On a one-square row it is a square high and sits two
+ * pixels around what the row holds: from two above the lower sixteen to two below the row's foot,
+ * and two past the content at each side, its corners the icon tiles' 4px and those two more, so a
+ * 16px icon stands in it with two all round. It is drawn over the row, never moving its words or
+ * icons off the grid. An open row (`data-open`) wears the same layer. A taller row (a stacked
+ * tile, `auto`) is filled whole.
+ * Tokens: `--ds-row-fill-radius` (6px), `--ds-row-fill-overhang` (2px).
+ */
+a.ds-row,
+button.ds-row {
+  isolation: isolate;
+}
+a.ds-row::after,
+button.ds-row::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+a.ds-row::after,
+button.ds-row::after,
+.ds-row__target::after {
+  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));
+  inset:
+    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));
+}
+:is(a, button).ds-row:is(.ds-row--stacked, .ds-row--auto)::after,
+:is(.ds-row--stacked, .ds-row--auto) .ds-row__target::after {
+  inset: 0;
+}
+a.ds-row[href]:hover::after,
+button.ds-row:hover:not(:disabled)::after,
 .ds-row__target:is(a[href], button:not(:disabled)):hover::after {
   background: var(--ds-row-fill-hover, var(--ds-fill));
 }
-a.ds-row[href]:active,
-button.ds-row:active:not(:disabled),
+a.ds-row[href]:active::after,
+button.ds-row:active:not(:disabled)::after,
 .ds-row__target:is(a[href], button:not(:disabled)):active::after {
   background: var(--ds-row-fill-press, var(--ds-fill-hover));
 }
-.ds-row:is(a, button)[aria-current]:not([aria-current="false"]),
+.ds-row:is(a, button)[aria-current]:not([aria-current="false"])::after,
 .ds-row__target[aria-current]:not([aria-current="false"])::after {
   background: var(--ds-row-fill-current, var(--ds-fill-hover));
 }
@@ -152,8 +186,8 @@ button.ds-row:active:not(:disabled),
   --ds-type-weight-default: var(--ds-row-current-weight, 500);
   font-weight: var(--ds-row-current-weight, 500);
 }
-a.ds-row:focus-visible,
-button.ds-row:focus-visible,
+a.ds-row:focus-visible::after,
+button.ds-row:focus-visible::after,
 .ds-row__target:focus-visible::after {
   outline: 2px solid var(--ds-focus-ring);
   outline-offset: -2px;
@@ -169,8 +203,8 @@ button.ds-row[aria-disabled="true"],
 .ds-row__target:is(:disabled, [aria-disabled="true"], a:not([href])) {
   cursor: default;
 }
-a.ds-row[aria-disabled="true"]:hover,
-button.ds-row[aria-disabled="true"]:hover {
+a.ds-row[aria-disabled="true"]:hover::after,
+button.ds-row[aria-disabled="true"]:hover::after {
   background: none;
 }
 
@@ -298,3 +332,33 @@ button.ds-row[aria-disabled="true"]:hover {
     background-color: CanvasText;
   }
 }
+
+/* A controlled detail view: the caller marks its open row, and clears it on close.
+   Navigation's current state and the text weight remain independent. */
+.ds-row[data-open]:not([data-open="false"]) {
+  position: relative;
+  isolation: isolate;
+}
+.ds-row[data-open]:not([data-open="false"])::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));
+  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+}
+/* A plain row (no press target inside) has no padding of its own: its words and icons stand on
+   the row's edges, so the layer reaches two past them, as a flush row's does. */
+.ds-row[data-open]:not([data-open="false"]):not(a, button, .ds-row--stacked, .ds-row--auto, :has(.ds-row__target))::after {
+  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+}
+.ds-row[data-open]:is(.ds-row--stacked, .ds-row--auto)::after { inset: 0; }
+@media (forced-colors: active) {
+  .ds-row[data-open]:not([data-open="false"])::after { outline: 1px solid Highlight; outline-offset: -1px; }
+}

package/DS1/1-root/table.css

@@ -16,6 +16,14 @@
  *   <th colspan="2">                       a column group, in a header row
  *   <th scope="rowgroup">                  a row group, a heading row in grey
  *   <td aria-selected="true">              a selected cell
+ *
+ * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by
+ * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px
+ * in on the sixteen, as an Ezo item's are. Column letters and the row numbers
+ * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place
+ * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table
+ * `--ds-table-columns` (the number of data columns) and the scroll a height
+ * with `--ds-table-height`.
  */
 
 .ds-table {
@@ -109,3 +117,84 @@
 .ds-table[data-sticky] [aria-selected="true"]:first-child {
   background: var(--ds-accent-color, Highlight);
 }
+
+/* Keep the row whose details are open visible, including its sticky first cell.
+   Cell selection remains independent and keeps its accent. */
+.ds-table tbody > tr[data-open]:not([data-open="false"]) > :is(th, td):not([aria-selected="true"]) {
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+}
+@media (forced-colors: active) {
+  .ds-table tbody > tr[data-open]:not([data-open="false"]) > :is(th, td):not([aria-selected="true"]) {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
+/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */
+.ds-table[data-sheet] {
+  --ds-table-cell: calc(4 * var(--ds-table-row));
+  --ds-table-index: calc(2 * var(--ds-table-row));
+  --ds-table-text: calc(4px * var(--ds-sf, 1));
+  table-layout: fixed;
+  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));
+  min-width: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.ds-table-scroll > .ds-table[data-sheet] {
+  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));
+  min-width: 0;
+}
+.ds-table[data-sheet] :is(th, td) {
+  width: var(--ds-table-cell);
+  max-width: var(--ds-table-cell);
+  height: var(--ds-table-row);
+  padding: 0 var(--ds-table-text);
+  border-bottom: 1px solid var(--ds-table-rule);
+  border-inline-end: 1px solid var(--ds-table-rule);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-table[data-sheet] :is(th, td):last-child {
+  padding-inline-end: var(--ds-table-text);
+}
+.ds-table[data-sheet] .ds-table__number {
+  width: var(--ds-table-index);
+  max-width: var(--ds-table-index);
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  background: var(--ds-table-paper);
+  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.ds-table[data-sheet] thead :is(th, td) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--ds-table-paper);
+}
+.ds-table[data-sheet] thead tr + tr :is(th, td) {
+  top: var(--ds-table-row);
+}
+.ds-table[data-sheet] thead .ds-table__number {
+  z-index: 3;
+}
+.ds-table[data-sheet] .ds-table__letters td {
+  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  text-align: center;
+}
+.ds-table[data-sheet] tbody td:not([data-numeric]) {
+  color: inherit;
+}
+.ds-table[data-sheet] [aria-selected="true"] {
+  background: transparent;
+  color: inherit;
+  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);
+}
+.ds-table-scroll:has(> .ds-table[data-sheet]) {
+  max-height: var(--ds-table-height, none);
+  overflow: auto;
+  overscroll-behavior: contain;
+}