@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/3-unit/styles/ds-row.css

@@ -1,16 +1,20 @@
 @import "../../1-root/component-metrics.css";
 
-/* ds-row.css */
+/* ds-row.css: the same rows as the native .ds-row in 1-root/row.css. What a row holds
+   stands on the lower sixteen of its square with the spare four above, as Ezo sets every
+   row: words on a 16px line box, a 16px icon and a 16px control all end on the bottom line. */
 
 :host {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  align-items: var(--ds-row-align, center);
+  align-items: var(--ds-row-align, flex-end);
   gap: var(--ds-row-gap, calc(4px * var(--ds-sf)));
   min-width: 0;
   height: var(--ds-row-default-height, var(--ds-row-height));
+  line-height: var(--ds-type-lineheight-default);
 }
+:host([hidden]) { display: none !important; }
 
 :host([auto]) {
   height: auto;
@@ -35,3 +39,81 @@
 :host([centered]), :host([end]) {
   gap: var(--ds-row-packed-gap, var(--ds-row-gap, calc(4px * var(--ds-sf))));
 }
+
+/* A tile or a card: the children stacked, each line one square, sized to them; its lines
+   wrap, so they stay on whole squares rather than the sixteen. */
+:host([stacked]) {
+  flex-direction: column;
+  line-height: var(--ds-row-height);
+  align-items: var(--ds-row-align, flex-start);
+  justify-content: flex-start;
+  gap: 0;
+  height: auto;
+}
+
+/*
+ * A row a person presses. The target is the row's whole box: a layer above
+ * the content takes the press anywhere on the row, a layer under it shows
+ * the pointer, the press, the current destination and the focus ring.
+ * Controls in the end slot stand above both and keep their own presses.
+ */
+:host([href]), :host([interactive]) {
+  position: relative;
+  isolation: isolate;
+  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));
+  -webkit-tap-highlight-color: transparent;
+}
+
+.target {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  justify-content: inherit;
+  gap: inherit;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+}
+.target::before,
+.target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--ds-row-radius, 0);
+}
+.target::before { z-index: 1; }
+.target::after { z-index: -1; }
+::slotted([slot="end"]) { position: relative; z-index: 2; }
+
+.target:hover::after { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.target:active::after { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }
+.target[aria-current] {
+  --ds-type-weight-default: var(--ds-row-current-weight, 500);
+  font-weight: var(--ds-row-current-weight, 500);
+}
+.target[aria-current]::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }
+.target:focus-visible::after { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+
+:host([disabled]) .target { cursor: default; opacity: 0.5; }
+:host([disabled]) .target::after { background: none; }
+
+/* A navigation row: the sidebar's two-pixel corners. */
+:host([nav]) { --ds-row-radius: calc(2px * var(--ds-sf)); }
+
+@media (forced-colors: active) {
+  .target[aria-current]::after { outline: 1px solid Highlight; outline-offset: -1px; }
+  .target:focus-visible::after { outline-color: Highlight; }
+}

package/DS1/3-unit/styles/ds-sidebar.css

@@ -0,0 +1,117 @@
+@import "../../1-root/component-metrics.css";
+
+:host {
+  display: flex;
+  flex-direction: column;
+  width: calc(12 * var(--ds-unit));
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  color: var(--ds-text-color);
+  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);
+}
+nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding: calc(var(--ds-unit) / 2) 0;
+}
+::slotted([slot="header"]), ::slotted([slot="footer"]) { flex: none; }
+.row {
+  --ds-row-gap: 0px;
+  border-radius: calc(2px * var(--ds-sf));
+  padding-inline: calc(4px * var(--ds-sf));
+  padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit) / 2);
+}
+/* The look of every pressable row (ds-row, .ds-row, the tree's rows): the same tokens, the same fallbacks. */
+.row:hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.row[data-current] { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }
+.row[data-current] .choice { --ds-type-weight-default: var(--ds-row-current-weight, 500); }
+ds-button { --ds-corner-size: 0px; --ds-button-padding: 0; }
+.disclosure { flex: 0 0 var(--ds-unit); width: var(--ds-unit); }
+.spacer { flex: 1; }
+.disclosure { --ds-button-color: var(--ds-text-color-muted); --ds-button-height: var(--ds-row-height); }
+ds-icon { transform: rotate(0deg); }
+ds-icon[data-open] { transform: rotate(90deg); }
+.choice { flex: 0 1 auto; min-width: 0; }
+.name:has(ds-icon) { display: flex; align-items: center; gap: calc(4px * var(--ds-sf)); }
+.name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.meta { flex: none; padding-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.action { margin-inline-start: calc(4px * var(--ds-sf)); --ds-text-size: 10px; --ds-button-color: var(--ds-text-color-muted); }
+.empty { margin: 0; padding: calc(var(--ds-unit) / 2); color: var(--ds-text-color-muted); }
+@media (forced-colors: active) { .row[data-current] { outline: 1px solid Highlight; outline-offset: -1px; } }
+
+/* ---- Tree: the same rows as the native .ds-sidebar tree in 1-root/row.css. ---- */
+.tree {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+/* One square high, its contents on the lower sixteen as every row's; each level one square
+   further in, so a row's arrow stands under its parent's label. */
+.tree .item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  height: var(--ds-row-height);
+  min-width: 0;
+  padding-inline: calc(var(--depth, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));
+  border-radius: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+.tree .item:hover:not([aria-disabled="true"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.tree .item:active:not([aria-disabled="true"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }
+.tree .item[aria-selected="true"] {
+  --ds-type-weight-default: var(--ds-row-current-weight, 500);
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+  font-weight: var(--ds-row-current-weight, 500);
+}
+.tree .item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.tree .item[aria-disabled="true"] { cursor: default; opacity: 0.5; }
+
+/* The arrow and the icon each take a whole square, drawn on the row's sixteen (the square's
+   spare four above); a leaf keeps an empty one so labels line up. */
+.tree .disclosure, .tree .icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 var(--ds-unit);
+  justify-content: center;
+  align-items: center;
+  width: var(--ds-unit);
+  height: var(--ds-unit);
+  padding-top: calc(var(--ds-unit) - var(--ds-control-height));
+}
+.tree .disclosure { color: var(--ds-text-color-muted); }
+.tree .disclosure ds-icon { transition: transform 120ms ease-out; }
+.tree .label {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-start: calc(4px * var(--ds-sf));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tree .disclosure ds-icon { transition: none; }
+}
+@media (forced-colors: active) {
+  .tree .item[aria-selected="true"] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .tree .item:focus-visible { outline-color: Highlight; }
+}

package/DS1/3-unit/styles/ds-table.css

@@ -1,80 +1,9 @@
 /* ds-table.css */
-/* Data table component styles */
+/* The element only places the table; 1-root/table.css draws it. */
 
 :host {
   display: block;
   width: 100%;
+  min-width: 0;
 }
-
-.table-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.table-header {
-  display: grid;
-  grid-template-columns: 160px 80px 80px 80px;
-  height: 20px;
-  width: 400px;
-}
-
-.table-body {
-  display: grid;
-  grid-template-columns: 160px 80px 80px 80px;
-  border: 1px solid var(--black);
-  width: 400px;
-}
-
-.header-cell {
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  padding: 0 2px;
-  font-family: var(--typeface-regular);
-  font-size: var(--type-size-default);
-  font-weight: var(--type-weight-default);
-  line-height: var(--type-lineheight-default);
-  color: var(--black);
-  letter-spacing: -0.26px;
-}
-
-.data-cell {
-  height: 20px;
-  margin-top: -1px;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  outline: 1px solid var(--black);
-  font-family: var(--typeface-regular);
-  font-size: var(--type-size-default);
-  font-weight: var(--type-weight-default);
-  line-height: var(--type-lineheight-default);
-  color: var(--black);
-  letter-spacing: -0.26px;
-}
-
-.status-cell {
-  background-color: transparent;
-  text-align: center;
-}
-
-.product-cell {
-  text-align: left;
-  justify-content: flex-start;
-}
-
-.users-cell,
-.retention-cell {
-  text-align: center;
-}
-
-/* Responsive adjustments */
-@media (max-width: 480px) {
-  .table-header,
-  .table-body {
-    width: 100%;
-    grid-template-columns: 1fr 60px 60px 60px;
-  }
-}
+:host([hidden]) { display: none !important; }

package/DS1/4-page/ds-dialog.ts

@@ -2,11 +2,17 @@ import { LitElement, css, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import "../2-core/ds-button";
 import "../2-core/ds-icon";
+import { bindDialogSwipe, type DialogPlacement } from "../0-face/dialog-swipe";
 import "./styles/ds-dialog.css";
-import dialogStyles from "./styles/ds-dialog.css?inline";
+import "../1-root/dialog-placement.css";
+import frameStyles from "./styles/ds-dialog.css?inline";
+import placementStyles from "../1-root/dialog-placement.css?inline";
 import metrics from "../1-root/component-metrics.css?inline";
 
-export type DialogCloseReason = "escape" | "backdrop" | "outside" | "button" | "native";
+export type { DialogPlacement } from "../0-face/dialog-swipe";
+export type DialogCloseReason = "escape" | "backdrop" | "outside" | "button" | "native" | "swipe";
+const dialogStyles = `${frameStyles}\n${placementStyles}`;
+const PLACEMENTS = new Set<string>(["sheet", "end", "start"]);
 const openDialogs = new WeakMap<Document, Set<Dialog>>();
 type SavedStyle = { style: CSSStyleDeclaration; name: string; value: string; priority: string; locked: string };
 const scrollStyles = new WeakMap<Document, { declarations: SavedStyle[]; x: number; y: number }>();
@@ -60,6 +66,9 @@ function styleRoot(root: Node) {
 /** A native light-DOM dialog keeps forms and accessible ID references together.
  * The browser owns the top layer, inert background and modal focus navigation.
  * Listen to ds-close-request and preventDefault to control whether it closes.
+ * `placement` stands it in the centre (the default), as a sheet from the
+ * bottom (`"sheet"`) or as a drawer at the end or start (`"end"`, `"start"`),
+ * which slide in and out and a finger swipes away (reason `"swipe"`).
  */
 export class Dialog extends LitElement {
   static properties = {
@@ -70,10 +79,11 @@ export class Dialog extends LitElement {
     holdScroll: { type: Boolean, attribute: "hold-scroll" },
     closeOnEscape: { type: Boolean, attribute: "close-on-escape" },
     closeOnBackdrop: { type: Boolean, attribute: "close-on-backdrop" },
+    placement: { type: String, reflect: true },
     anchor: { attribute: false },
     returnFocus: { attribute: false },
   };
-  static styles = [unsafeCSS(metrics), css`:host { display: contents; }`];
+  static styles = [unsafeCSS(metrics), css`:host { display: contents; } :host([hidden]) { display: none !important; }`];
   declare open: boolean;
   declare nonModal: boolean;
   declare closeOnOutside: boolean;
@@ -81,6 +91,8 @@ export class Dialog extends LitElement {
   declare holdScroll: boolean;
   declare closeOnEscape: boolean;
   declare closeOnBackdrop: boolean;
+  /** Where it stands: `"center"`, a `"sheet"` from the bottom, or a drawer at the `"end"` or `"start"`. An anchored panel ignores it. */
+  declare placement: DialogPlacement;
   /** A viewport point for a floating panel; null uses ordinary dialog layout. */
   declare anchor: { x: number; y: number } | null;
   /** Resolve a replacement opener after the product has rendered its closed state. */
@@ -92,6 +104,7 @@ export class Dialog extends LitElement {
   private outsidePress: boolean | null = null;
   private observer = new MutationObserver(() => this.bindDialog());
   private sizeObserver: ResizeObserver | null = null;
+  private unbindSwipe: (() => void) | null = null;
 
   constructor() {
     super();
@@ -102,6 +115,7 @@ export class Dialog extends LitElement {
     this.holdScroll = false;
     this.closeOnEscape = true;
     this.closeOnBackdrop = true;
+    this.placement = "center";
     this.anchor = null;
     this.returnFocus = null;
   }
@@ -119,7 +133,25 @@ export class Dialog extends LitElement {
     super.disconnectedCallback();
   }
 
-  protected updated() { this.syncOpen(); this.place(); }
+  protected updated() { this.syncPlacement(); this.syncOpen(); this.place(); }
+
+  /** Mark the native frame with its placement before it opens, so it slides in from its edge, and let a finger swipe it away. */
+  private syncPlacement() {
+    const dialog = this.dialog;
+    if (!dialog) return;
+    const placement = !this.anchor && PLACEMENTS.has(this.placement) ? this.placement : null;
+    if (placement) dialog.setAttribute("data-ds-placement", placement);
+    else dialog.removeAttribute("data-ds-placement");
+    if (placement && !this.unbindSwipe) {
+      this.unbindSwipe = bindDialogSwipe(dialog, {
+        placement: () => (!this.anchor && PLACEMENTS.has(this.placement) ? this.placement : "center"),
+        onDismiss: () => this.requestClose("swipe"),
+      });
+    } else if (!placement && this.unbindSwipe) {
+      this.unbindSwipe();
+      this.unbindSwipe = null;
+    }
+  }
 
   /** Keep an anchored panel inside the visible viewport as its content or keyboard changes. */
   place = () => {
@@ -147,6 +179,7 @@ export class Dialog extends LitElement {
     dialog?.addEventListener("close", this.onNativeClose);
     dialog?.addEventListener("pointerdown", this.onPointerDown);
     dialog?.addEventListener("click", this.onClick);
+    this.syncPlacement();
     this.syncOpen();
   };
 
@@ -156,6 +189,9 @@ export class Dialog extends LitElement {
     dialog?.removeEventListener("close", this.onNativeClose);
     dialog?.removeEventListener("pointerdown", this.onPointerDown);
     dialog?.removeEventListener("click", this.onClick);
+    this.unbindSwipe?.();
+    this.unbindSwipe = null;
+    dialog?.removeAttribute("data-ds-placement");
     if (dialog?.open) dialog.close();
     this.release();
     this.dialog = null;

package/DS1/4-page/ds-document.ts

@@ -0,0 +1,240 @@
+// ds-document.ts
+// A document page (terms, a privacy policy, a legal notice, a help article):
+// the writing as prose, with contents built from its headings that mark the
+// section in view. Drawn by 1-root/document.css, the same classes a page
+// without scripts writes; the writing stays in the page and prose.css draws it.
+
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import metrics from "../1-root/component-metrics.css?inline";
+import documentSheet from "../1-root/document.css?inline";
+import documentRules from "../1-root/document.css?raw";
+import proseRules from "../1-root/prose.css?raw";
+import styles from "./styles/ds-document.css?inline";
+
+/** The shared word over the contents. */
+export const CONTENTS_LABEL = "Contents";
+
+/** One entry in the contents: a heading in the writing. */
+export interface DocumentEntry {
+  id: string;
+  text: string;
+  level: number;
+}
+
+/**
+ * An id for a heading from its words: letters and digits in any script,
+ * joined by hyphens, unique among `taken`. Words with none of either get
+ * `section-<n>`.
+ */
+export function headingId(text: string, taken: Set<string>, index: number): string {
+  const base = text.normalize("NFKC").toLowerCase().trim().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "") || `section-${index + 1}`;
+  let id = base;
+  for (let n = 2; taken.has(id); n++) id = `${base}-${n}`;
+  taken.add(id);
+  return id;
+}
+
+/** The heading levels an attribute names, between 2 and 6: `2` by default, `2 3` for two levels. */
+export function documentLevels(value: string | null | undefined): number[] {
+  const levels = [...new Set(String(value ?? "2").split(/[\s,]+/).map(Number).filter(level => Number.isInteger(level) && level >= 2 && level <= 6))].sort();
+  return levels.length ? levels : [2];
+}
+
+/**
+ * The rules for the writing, which stands in the page: prose.css and the
+ * definition table, adopted once per root the element stands in. Their
+ * imports (the tokens) are left out: the element's host carries the measures,
+ * and the writing inherits them.
+ */
+const styledRoots = new WeakSet<Document | ShadowRoot>();
+function styleRoot(root: Node) {
+  const target = root instanceof ShadowRoot ? root : root instanceof Document ? root : null;
+  if (!target || styledRoots.has(target) || typeof CSSStyleSheet === "undefined" || !("adoptedStyleSheets" in target)) return;
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync([proseRules, documentRules].map(css => css.replace(/^@import[^;]*;\s*$/gm, "")).join("\n"));
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, sheet];
+    styledRoots.add(target);
+  } catch {
+    // A browser without constructable sheets keeps the page's own copy of prose.css.
+  }
+}
+
+/**
+ * @element ds-document
+ * @prop {string} levels - The heading levels the contents list: `2` by default, `2 3` for two.
+ * @prop {string} label - The contents' title: a translation key, the shared word "Contents" by default.
+ * @prop {boolean} literal - Show `label` as written, never looked up.
+ * @prop {boolean} hideContents - Leave the contents out (`hide-contents`).
+ *
+ * @slot - The writing: native headings, paragraphs, lists, tables and a
+ *   definition table (`<dl class="ds-definitions">`), as prose. The element
+ *   marks itself `data-ds-prose` and brings the prose sheet.
+ * @slot contents - Contents of the page's own, in place of the built ones.
+ *
+ * The contents list the writing's headings at `levels`, giving a heading an
+ * id from its words when it has none. A link scrolls to its heading, and the
+ * section in view is marked `aria-current="location"`. With fewer than two
+ * headings there are no contents.
+ *
+ * @example
+ * <ds-document>
+ *   <h1>Terms</h1>
+ *   <h2>Using the service</h2><p>…</p>
+ *   <h2>Payments</h2><p>…</p>
+ * </ds-document>
+ */
+export class DocumentPage extends LitElement {
+  static properties = {
+    levels: { type: String },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+    hideContents: { type: Boolean, attribute: "hide-contents", reflect: true },
+    entries: { state: true },
+    current: { state: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(documentSheet), unsafeCSS(styles)];
+
+  declare levels: string;
+  declare label: string | undefined;
+  declare literal: boolean;
+  declare hideContents: boolean;
+  declare entries: DocumentEntry[];
+  declare current: string | null;
+
+  private readonly relabel = () => this.requestUpdate();
+  private observer: MutationObserver | null = null;
+  private frame = 0;
+
+  constructor() {
+    super();
+    this.levels = "2";
+    this.literal = false;
+    this.hideContents = false;
+    this.entries = [];
+    this.current = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    styleRoot(this.getRootNode());
+    if (!this.hasAttribute("data-ds-prose")) this.setAttribute("data-ds-prose", "");
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+    document.addEventListener("scroll", this.onScroll, { capture: true, passive: true });
+    window.addEventListener("resize", this.onScroll, { passive: true });
+    this.observer = new MutationObserver(() => this.collect());
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["id"] });
+    this.collect();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    document.removeEventListener("scroll", this.onScroll, { capture: true });
+    window.removeEventListener("resize", this.onScroll);
+    this.observer?.disconnect();
+    this.observer = null;
+    cancelAnimationFrame(this.frame);
+    super.disconnectedCallback();
+  }
+
+  protected willUpdate(changed: Map<PropertyKey, unknown>) {
+    if (changed.has("levels") && this.hasUpdated) this.collect();
+  }
+
+  /** The headings the contents list, in the order they stand. */
+  get headings(): HTMLElement[] {
+    const levels = documentLevels(this.levels);
+    return [...this.querySelectorAll<HTMLElement>(levels.map(level => `h${level}`).join(","))]
+      .filter(heading => !heading.closest("[data-ds-not-prose]") && !heading.closest('[slot="contents"]'));
+  }
+
+  /** Reads the headings again: their words, levels and ids. */
+  collect(): void {
+    const taken = new Set([...this.querySelectorAll("[id]")].map(element => element.id));
+    const entries = this.headings.map((heading, index) => {
+      const text = (heading.textContent ?? "").replace(/\s+/g, " ").trim();
+      if (!heading.id) {
+        // Writing an id is a change the observer would hear; it reads the same.
+        heading.id = headingId(text, taken, index);
+      }
+      return { id: heading.id, text, level: Number(heading.tagName.slice(1)) };
+    });
+    const same = entries.length === this.entries.length && entries.every((entry, i) => entry.id === this.entries[i]!.id && entry.text === this.entries[i]!.text && entry.level === this.entries[i]!.level);
+    if (!same) this.entries = entries;
+    this.onScroll();
+  }
+
+  /**
+   * The section in view: the last heading at or above a fifth of the way down
+   * the view, or, scrolled to the foot of the page, the last heading in view.
+   */
+  private onScroll = () => {
+    cancelAnimationFrame(this.frame);
+    this.frame = requestAnimationFrame(() => {
+      const view = window.innerHeight || 0;
+      // At the foot of the page the last sections cannot reach the line: the last one in view is current.
+      const end = document.documentElement;
+      const line = view && window.scrollY > 0 && window.scrollY + view >= end.scrollHeight - 1 ? view : view / 5;
+      let current: string | null = null;
+      for (const entry of this.entries) {
+        const heading = this.heading(entry.id);
+        if (!heading) continue;
+        if (heading.getBoundingClientRect().top <= line) current = entry.id;
+        else break;
+      }
+      this.current = current ?? this.entries[0]?.id ?? null;
+    });
+  };
+
+  private heading(id: string): HTMLElement | undefined {
+    return this.headings.find(heading => heading.id === id);
+  }
+
+  private follow(event: MouseEvent, id: string) {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const heading = this.heading(id);
+    if (!heading) return;
+    event.preventDefault();
+    const smooth = !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    heading.scrollIntoView({ block: "start", behavior: smooth ? "smooth" : "auto" });
+    if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+    heading.focus({ preventScroll: true });
+    history.replaceState(history.state, "", `#${id}`);
+    this.current = id;
+  }
+
+  render() {
+    const label = this.literal ? this.label || CONTENTS_LABEL : getText(this.label || CONTENTS_LABEL) || this.label || CONTENTS_LABEL;
+    const top = Math.min(...this.entries.map(entry => entry.level));
+    const own = [...this.children].some(child => child.getAttribute("slot") === "contents");
+    const showContents = !this.hideContents && (own || this.entries.length >= 2);
+    return html`<div class="ds-document" part="document">
+      <nav class="ds-document__toc" part="contents" aria-labelledby="contents-title" ?hidden=${!showContents}>
+        <div class="ds-document__contents">
+          <p class="ds-document__toc-title" id="contents-title" part="contents-title">${label}</p>
+          <slot name="contents" @slotchange=${this.relabel}>
+            <ol class="ds-document__toc-list" part="contents-list">
+              ${this.entries.map(entry => html`<li class=${entry.level > top ? "ds-document__toc-sub" : nothing}>
+                <a href="#${entry.id}" aria-current=${this.current === entry.id ? "location" : nothing} @click=${(event: MouseEvent) => this.follow(event, entry.id)}>${entry.text}</a>
+              </li>`)}
+            </ol>
+          </slot>
+        </div>
+      </nav>
+      <div class="ds-document__body" part="body"><slot></slot></div>
+    </div>`;
+  }
+}
+
+define("ds-document", DocumentPage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-document": DocumentPage;
+  }
+}