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

package/dist/3-unit/ds-tree.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from "lit";
+import "../2-core/ds-icon";
+/** A visible row of the tree. The application owns the hierarchy, expansion and selection. */
+export interface TreeItem {
+    id: string;
+    /** Words a person reads; shown as written, never translated. */
+    label: string;
+    /** 0 for a row at the root; each level stands one square further in. */
+    depth?: number;
+    /** `true` open, `false` closed; leave it out for a leaf. */
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    /** An icon from the library on its own square before the label. */
+    icon?: string;
+    /** Small muted words at the row's end: a count, a size. */
+    meta?: string;
+}
+/**
+ * A tree: rows one square high, each level one square further in, a
+ * disclosure arrow on its own square before each label. `role="tree"` with
+ * one `role="treeitem"` per row, `aria-level`, `aria-expanded` and
+ * `aria-selected`; one Tab stop, the keyboard of the tree pattern (see
+ * `0-face/tree.ts`). The application keeps the rows: it passes the visible
+ * ones in `items`, in order, and answers the events.
+ *
+ * @element ds-tree
+ * @attr label - The tree's accessible name.
+ * @fires ds-tree-toggle - `{ id, expanded }`: a row asks to open or close.
+ * @fires ds-tree-select - `{ id }`: a click, Space or Enter chose a row.
+ * @fires ds-tree-activate - `{ id }`: Enter or a double click opens a row.
+ */
+export declare class Tree extends LitElement {
+    static properties: {
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    items: TreeItem[];
+    label: string;
+    static styles: import("lit").CSSResult;
+    /** The row that holds the Tab stop. */
+    private focusId?;
+    constructor();
+    private request;
+    /** The row a pointer or keyboard event happened on, for a context menu or a drag of the application's own. */
+    itemFromEvent(event: Event): TreeItem | undefined;
+    /** Moves the focus to a row after `updateComplete`. */
+    focusItem(id: string): void;
+    /** Scrolls the selected row into view. */
+    scrollToSelected(): void;
+    private row;
+    /** The Tab stop: the row last focused while it is still shown, else the selected row, else the first available. */
+    private stop;
+    private toggle;
+    private press;
+    private open;
+    private keydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-tree": Tree;
+    }
+}
+//# sourceMappingURL=ds-tree.d.ts.map

package/dist/3-unit/ds-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tree.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAK3D,OAAO,mBAAmB,CAAC;AAG3B,8FAA8F;AAC9F,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;MAGf;IAEM,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,MAAM,0BAAqB;IAElC,uCAAuC;IACvC,OAAO,CAAC,OAAO,CAAC,CAAS;;IAQzB,OAAO,CAAC,OAAO;IAIf,8GAA8G;IAC9G,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS;IAKjD,uDAAuD;IACvD,SAAS,CAAC,EAAE,EAAE,MAAM;IASpB,0CAA0C;IAC1C,gBAAgB;IAIhB,OAAO,CAAC,GAAG;IAIX,mHAAmH;IACnH,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,OAAO;IAaf,MAAM;CAmCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-tree.js

@@ -0,0 +1,136 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { define } from "../0-face/define";
+import { treeStep } from "../0-face/tree";
+import "../2-core/ds-icon";
+import styles from "./styles/ds-tree.css?inline";
+/**
+ * A tree: rows one square high, each level one square further in, a
+ * disclosure arrow on its own square before each label. `role="tree"` with
+ * one `role="treeitem"` per row, `aria-level`, `aria-expanded` and
+ * `aria-selected`; one Tab stop, the keyboard of the tree pattern (see
+ * `0-face/tree.ts`). The application keeps the rows: it passes the visible
+ * ones in `items`, in order, and answers the events.
+ *
+ * @element ds-tree
+ * @attr label - The tree's accessible name.
+ * @fires ds-tree-toggle - `{ id, expanded }`: a row asks to open or close.
+ * @fires ds-tree-select - `{ id }`: a click, Space or Enter chose a row.
+ * @fires ds-tree-activate - `{ id }`: Enter or a double click opens a row.
+ */
+export class Tree extends LitElement {
+    constructor() {
+        super();
+        this.items = [];
+        this.label = "";
+    }
+    request(name, detail) {
+        return this.dispatchEvent(new CustomEvent(`ds-tree-${name}`, { detail, bubbles: true, composed: true, cancelable: true }));
+    }
+    /** The row a pointer or keyboard event happened on, for a context menu or a drag of the application's own. */
+    itemFromEvent(event) {
+        const row = event.composedPath().find((node) => node instanceof HTMLElement && node.dataset.item !== undefined && this.renderRoot.contains(node));
+        return row ? this.items.find(item => item.id === row.dataset.item) : undefined;
+    }
+    /** Moves the focus to a row after `updateComplete`. */
+    focusItem(id) {
+        const row = this.row(id);
+        if (!row)
+            return;
+        this.focusId = id;
+        this.requestUpdate();
+        row.tabIndex = 0;
+        row.focus();
+    }
+    /** Scrolls the selected row into view. */
+    scrollToSelected() {
+        this.renderRoot.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+    }
+    row(id) {
+        return [...this.renderRoot.querySelectorAll("[data-item]")].find(row => row.dataset.item === id);
+    }
+    /** The Tab stop: the row last focused while it is still shown, else the selected row, else the first available. */
+    stop() {
+        const usable = this.items.filter(item => !item.disabled);
+        return usable.find(item => item.id === this.focusId)?.id ?? usable.find(item => item.selected)?.id ?? usable[0]?.id;
+    }
+    toggle(item, expanded) {
+        this.request("toggle", { id: item.id, expanded });
+    }
+    press(event, item) {
+        if (item.disabled)
+            return;
+        this.focusItem(item.id);
+        const disclosure = event.composedPath().some(node => node instanceof HTMLElement && node.classList.contains("disclosure"));
+        if (disclosure && item.expanded !== undefined)
+            this.toggle(item, !item.expanded);
+        else
+            this.request("select", { id: item.id });
+    }
+    open(event, item) {
+        if (item.disabled || event.composedPath().some(node => node instanceof HTMLElement && node.classList.contains("disclosure")))
+            return;
+        this.request("activate", { id: item.id });
+    }
+    keydown(event, item) {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const index = this.items.indexOf(item);
+        const step = treeStep(this.items.map(row => ({ level: Math.max(0, row.depth ?? 0) + 1, expanded: row.expanded, disabled: row.disabled, label: row.label })), index, event.key);
+        if (!step)
+            return;
+        event.preventDefault();
+        if (step.toggle !== undefined)
+            this.toggle(item, step.toggle);
+        if (step.select)
+            this.request("select", { id: item.id });
+        if (step.activate)
+            this.request("activate", { id: item.id });
+        const target = step.focus === undefined ? undefined : this.items[step.focus];
+        if (target)
+            this.focusItem(target.id);
+    }
+    render() {
+        const stop = this.stop();
+        // Each row's place among its siblings, for aria-setsize and aria-posinset.
+        const places = new Map();
+        const open = [];
+        for (const item of this.items) {
+            const depth = Math.max(0, item.depth ?? 0);
+            open.length = depth + 1;
+            const siblings = (open[depth] ?? (open[depth] = []));
+            siblings.push(item);
+            for (const [index, sibling] of siblings.entries())
+                places.set(sibling.id, [index + 1, siblings.length]);
+        }
+        return html `<div class="tree" role="tree" aria-label=${ifDefined(this.label || undefined)} part="tree">
+      ${repeat(this.items, item => item.id, item => {
+            const depth = Math.max(0, item.depth ?? 0);
+            const [position, size] = places.get(item.id) ?? [1, 1];
+            return html `<div class="item" role="treeitem" data-item=${item.id}
+          aria-level=${depth + 1} aria-setsize=${size} aria-posinset=${position}
+          aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
+          aria-selected=${String(Boolean(item.selected))}
+          aria-disabled=${ifDefined(item.disabled ? "true" : undefined)}
+          tabindex=${item.id === stop ? 0 : -1}
+          style=${`--depth:${depth}`}
+          @click=${(event) => this.press(event, item)}
+          @dblclick=${(event) => this.open(event, item)}
+          @keydown=${(event) => this.keydown(event, item)}
+          @focus=${() => { this.focusId = item.id; }}>
+          <span class="disclosure" aria-hidden="true">${item.expanded === undefined ? nothing : html `<ds-icon type="right" ?data-open=${item.expanded}></ds-icon>`}</span>
+          ${item.icon ? html `<span class="icon" aria-hidden="true"><ds-icon type=${item.icon}></ds-icon></span>` : nothing}
+          <span class="label">${item.label}</span>
+          ${item.meta ? html `<span class="meta">${item.meta}</span>` : nothing}
+        </div>`;
+        })}
+    </div>`;
+    }
+}
+Tree.properties = {
+    items: { attribute: false },
+    label: { type: String },
+};
+Tree.styles = unsafeCSS(styles);
+define("ds-tree", Tree);

package/dist/4-page/ds-dialog.d.ts

@@ -1,11 +1,17 @@
 import { LitElement } from "lit";
 import "../2-core/ds-button";
 import "../2-core/ds-icon";
+import { type DialogPlacement } from "../0-face/dialog-swipe";
 import "./styles/ds-dialog.css";
-export type DialogCloseReason = "escape" | "backdrop" | "outside" | "button" | "native";
+import "../1-root/dialog-placement.css";
+export type { DialogPlacement } from "../0-face/dialog-swipe";
+export type DialogCloseReason = "escape" | "backdrop" | "outside" | "button" | "native" | "swipe";
 /** 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 declare class Dialog extends LitElement {
     static properties: {
@@ -38,6 +44,10 @@ export declare class Dialog extends LitElement {
             type: BooleanConstructor;
             attribute: string;
         };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         anchor: {
             attribute: boolean;
         };
@@ -53,6 +63,8 @@ export declare class Dialog extends LitElement {
     holdScroll: boolean;
     closeOnEscape: boolean;
     closeOnBackdrop: boolean;
+    /** Where it stands: `"center"`, a `"sheet"` from the bottom, or a drawer at the `"end"` or `"start"`. An anchored panel ignores it. */
+    placement: DialogPlacement;
     /** A viewport point for a floating panel; null uses ordinary dialog layout. */
     anchor: {
         x: number;
@@ -67,10 +79,13 @@ export declare class Dialog extends LitElement {
     private outsidePress;
     private observer;
     private sizeObserver;
+    private unbindSwipe;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
+    /** 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;
     /** Keep an anchored panel inside the visible viewport as its content or keyboard changes. */
     place: () => void;
     private bindDialog;

package/dist/4-page/ds-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-dialog.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAIhC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAmDxF;;;GAGG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUf;IACF,MAAM,CAAC,MAAM,4BAA2D;IAChE,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACjC,+EAA+E;IACvE,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChD,oFAAoF;IAC5E,WAAW,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IACvD,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,qBAAqB,CAAS;IACtC,OAAO,CAAC,WAAW,CAA8B;IACjD,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,YAAY,CAA+B;;IAenD,iBAAiB;IAOjB,oBAAoB;IAMpB,SAAS,CAAC,OAAO;IAEjB,6FAA6F;IAC7F,KAAK,aAcH;IAEF,OAAO,CAAC,UAAU,CAUhB;IAEF,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,QAAQ;IAmBhB;6EACyE;IACnE,IAAI,CAAC,EAAE,SAAiB,EAAE,GAAE;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAO;IAiB9D,KAAK;IAEL,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,OAAO;IAoCf,YAAY,CAAC,MAAM,GAAE,iBAA4B;IAMjD,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa,CAKnB;IACF,OAAO,CAAC,eAAe,CAErB;IACF,OAAO,CAAC,cAAc,CAIpB;IACF,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,QAAQ,CAGd;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa,CAEnB;IACF,OAAO,CAAC,OAAO,CAMb;IAEF,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}
+{"version":3,"file":"ds-dialog.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,wBAAwB,CAAC;AAChC,OAAO,gCAAgC,CAAC;AAKxC,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAqDlG;;;;;;GAMG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IACF,MAAM,CAAC,MAAM,4BAAyG;IAC9G,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACjC,uIAAuI;IAC/H,SAAS,EAAE,eAAe,CAAC;IACnC,+EAA+E;IACvE,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChD,oFAAoF;IAC5E,WAAW,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IACvD,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,qBAAqB,CAAS;IACtC,OAAO,CAAC,WAAW,CAA8B;IACjD,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,WAAW,CAA6B;;IAgBhD,iBAAiB;IAOjB,oBAAoB;IAMpB,SAAS,CAAC,OAAO;IAEjB,+HAA+H;IAC/H,OAAO,CAAC,aAAa;IAiBrB,6FAA6F;IAC7F,KAAK,aAcH;IAEF,OAAO,CAAC,UAAU,CAWhB;IAEF,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,QAAQ;IAmBhB;6EACyE;IACnE,IAAI,CAAC,EAAE,SAAiB,EAAE,GAAE;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAO;IAiB9D,KAAK;IAEL,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,OAAO;IAoCf,YAAY,CAAC,MAAM,GAAE,iBAA4B;IAMjD,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa,CAKnB;IACF,OAAO,CAAC,eAAe,CAErB;IACF,OAAO,CAAC,cAAc,CAIpB;IACF,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,QAAQ,CAGd;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa,CAEnB;IACF,OAAO,CAAC,OAAO,CAMb;IAEF,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

package/dist/4-page/ds-dialog.js

@@ -2,9 +2,14 @@ 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 } 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";
+const dialogStyles = `${frameStyles}\n${placementStyles}`;
+const PLACEMENTS = new Set(["sheet", "end", "start"]);
 const openDialogs = new WeakMap();
 const scrollStyles = new WeakMap();
 /** One owner per declaration, including mixed modal and stationary panels. */
@@ -62,6 +67,9 @@ function styleRoot(root) {
 /** 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 {
     constructor() {
@@ -73,6 +81,7 @@ export class Dialog extends LitElement {
         this.outsidePress = null;
         this.observer = new MutationObserver(() => this.bindDialog());
         this.sizeObserver = null;
+        this.unbindSwipe = null;
         /** Keep an anchored panel inside the visible viewport as its content or keyboard changes. */
         this.place = () => {
             const dialog = this.dialog, view = this.ownerDocument.defaultView;
@@ -103,6 +112,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();
         };
         this.onDocumentKey = (event) => {
@@ -173,6 +183,7 @@ export class Dialog extends LitElement {
         this.holdScroll = false;
         this.closeOnEscape = true;
         this.closeOnBackdrop = true;
+        this.placement = "center";
         this.anchor = null;
         this.returnFocus = null;
     }
@@ -187,13 +198,37 @@ export class Dialog extends LitElement {
         this.detachDialog();
         super.disconnectedCallback();
     }
-    updated() { this.syncOpen(); this.place(); }
+    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. */
+    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;
+        }
+    }
     detachDialog() {
         const dialog = this.dialog;
         dialog?.removeEventListener("cancel", this.onCancel);
         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();
@@ -351,8 +386,9 @@ Dialog.properties = {
     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 },
 };
-Dialog.styles = [unsafeCSS(metrics), css `:host { display: contents; }`];
+Dialog.styles = [unsafeCSS(metrics), css `:host { display: contents; } :host([hidden]) { display: none !important; }`];
 define("ds-dialog", Dialog);

package/dist/4-page/ds-document.d.ts

@@ -0,0 +1,98 @@
+import { LitElement } from "lit";
+/** The shared word over the contents. */
+export declare 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 declare function headingId(text: string, taken: Set<string>, index: number): string;
+/** The heading levels an attribute names, between 2 and 6: `2` by default, `2 3` for two levels. */
+export declare function documentLevels(value: string | null | undefined): number[];
+/**
+ * @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 declare class DocumentPage extends LitElement {
+    static properties: {
+        levels: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        hideContents: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        entries: {
+            state: boolean;
+        };
+        current: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    levels: string;
+    label: string | undefined;
+    literal: boolean;
+    hideContents: boolean;
+    entries: DocumentEntry[];
+    current: string | null;
+    private readonly relabel;
+    private observer;
+    private frame;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** The headings the contents list, in the order they stand. */
+    get headings(): HTMLElement[];
+    /** Reads the headings again: their words, levels and ids. */
+    collect(): void;
+    /**
+     * 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;
+    private heading;
+    private follow;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-document": DocumentPage;
+    }
+}
+//# sourceMappingURL=ds-document.d.ts.map

package/dist/4-page/ds-document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-document.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-document.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAS3D,yCAAyC;AACzC,eAAO,MAAM,cAAc,aAAa,CAAC;AAEzC,2DAA2D;AAC3D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjF;AAED,oGAAoG;AACpG,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,EAAE,CAGzE;AAsBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;MAOf;IAEF,MAAM,CAAC,MAAM,4BAAqE;IAE1E,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;IACtD,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,KAAK,CAAK;;IAWlB,iBAAiB;IAajB,oBAAoB;IAWpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAIvD,+DAA+D;IAC/D,IAAI,QAAQ,IAAI,WAAW,EAAE,CAI5B;IAED,6DAA6D;IAC7D,OAAO,IAAI,IAAI;IAef;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAgBd;IAEF,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,MAAM;IAad,MAAM;CAqBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF"}