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

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

@@ -1,14 +1,36 @@
 import { LitElement, html, unsafeCSS } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import styles from "./styles/ds-row.css?inline";
 import { define } from "../0-face/define";
+/** The values `aria-current` takes besides `page`. */
+const CURRENT = new Set(["page", "step", "location", "date", "time", "true"]);
 /**
  * A horizontal run of elements one row (`--ds-row-height`) tall.
  *
+ * With `href` the whole row is one link, with `interactive` one button: it
+ * shows the pointer over it, the press and the focus ring across the row,
+ * and its content keeps the row's layout. Controls in the `end` slot stay
+ * separately pressable. `current` marks the destination being shown
+ * (`aria-current="page"`); `nav` draws the row as a navigation row.
+ *
  * @element ds-row
  * @attr fill - Spread the children from edge to edge.
  * @attr centered - Centre the children.
  * @attr end - Push the children to the end.
  * @attr auto - Size to the content instead of one row.
+ * @attr stacked - Stack the children, each on its own line, sized to them (a tile or a card).
+ * @attr href - Make the row a link to this address.
+ * @attr interactive - Make the row a button.
+ * @attr disabled - Keep the row from being pressed.
+ * @attr current - The destination being shown: `aria-current="page"`, or the value given (`step`, `location`, …).
+ * @attr nav - Draw a navigation row: corners of two pixels, as the sidebar's rows.
+ * @attr label - The accessible name, when the row's words do not say it.
+ * @attr target - Where a link opens (`_blank`, …).
+ * @attr rel - The link's relationship (`noopener`, …).
+ * @slot - The row's content, inside its press target.
+ * @slot end - Controls of their own after the content, outside the press target.
+ * @fires ds-row-press - `{ href }`: the row was pressed. Cancel it to route a link yourself; a modified click on a link is left to the browser.
+ * @csspart target - The link or button that is the row's press target.
  */
 export class Row extends LitElement {
     constructor() {
@@ -17,9 +39,57 @@ export class Row extends LitElement {
         this.centered = false;
         this.end = false;
         this.auto = false;
+        this.stacked = false;
+        this.href = undefined;
+        this.interactive = false;
+        this.disabled = false;
+        this.current = undefined;
+        this.nav = false;
+        this.label = undefined;
+        this.target = undefined;
+        this.rel = undefined;
+    }
+    /** The `aria-current` value, or none. */
+    get currentValue() {
+        const value = this.current;
+        if (value === null || value === undefined || value === "false")
+            return undefined;
+        return CURRENT.has(value) ? value : "page";
+    }
+    /** Focuses the press target, so `row.focus()` lands on the link or button. */
+    focus(options) {
+        const target = this.renderRoot?.querySelector(".target");
+        if (target)
+            target.focus(options);
+        else
+            super.focus(options);
+    }
+    press(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // A link keeps the browser's new tab, download and context menu.
+        if (this.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0))
+            return;
+        const go = this.dispatchEvent(new CustomEvent("ds-row-press", { detail: { href: this.href || undefined }, bubbles: true, composed: true, cancelable: true }));
+        if (!go)
+            event.preventDefault();
     }
     render() {
-        return html `<slot></slot>`;
+        if (!this.href && !this.interactive)
+            return html `<slot></slot>`;
+        const current = this.currentValue;
+        const label = this.label || undefined;
+        const content = html `<slot></slot>`;
+        const target = this.href
+            ? this.disabled
+                ? html `<a class="target" part="target" role="link" aria-disabled="true" aria-label=${ifDefined(label)}>${content}</a>`
+                : html `<a class="target" part="target" href=${this.href} target=${ifDefined(this.target || undefined)} rel=${ifDefined(this.rel || undefined)}
+            aria-current=${ifDefined(current)} aria-label=${ifDefined(label)} @click=${this.press}>${content}</a>`
+            : html `<button class="target" part="target" type="button" ?disabled=${this.disabled}
+          aria-current=${ifDefined(current)} aria-label=${ifDefined(label)} @click=${this.press}>${content}</button>`;
+        return html `${target}<slot name="end"></slot>`;
     }
 }
 Row.properties = {
@@ -27,6 +97,15 @@ Row.properties = {
     centered: { type: Boolean, reflect: true },
     end: { type: Boolean, reflect: true },
     auto: { type: Boolean, reflect: true },
+    stacked: { type: Boolean, reflect: true },
+    href: { type: String, reflect: true },
+    interactive: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    current: { type: String, reflect: true },
+    nav: { type: Boolean, reflect: true },
+    label: { type: String },
+    target: { type: String },
+    rel: { type: String },
 };
 Row.styles = unsafeCSS(styles);
 define("ds-row", Row);

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

@@ -0,0 +1,108 @@
+import { LitElement } from "lit";
+import "../0-face/tooltips";
+import "../2-core/ds-button";
+import "../2-core/ds-icon";
+import "./ds-row";
+/** Visible rows. The application owns hierarchy, expansion, selection and routing. */
+export interface SidebarItem {
+    id: string;
+    /** Words a person reads; shown as written, never translated. */
+    label: string;
+    /** Decorative leading icon; the label remains the accessible name. */
+    icon?: string;
+    /** 0 for a row at the root; each level stands further in. */
+    depth?: number;
+    href?: string;
+    /** `true` open, `false` closed; leave it out for a leaf. */
+    expanded?: boolean;
+    /** The destination being shown (navigation). */
+    current?: boolean;
+    /** The row chosen (a tree). */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Small muted words at the row's end: a count, a size. */
+    meta?: string;
+    action?: {
+        id: string;
+        label: string;
+    };
+}
+/**
+ * Compact navigation composed from Row, Button and Icon: the application's
+ * places, each row a link or a button and its own Tab stop. A label cut
+ * short by the column's width shows in full in the shared tooltip
+ * (`data-tooltip`, drawn by `0-face/tooltips.ts`); a label that fits carries
+ * none, and no row carries the browser's `title`.
+ *
+ * With `tree`, it is a tree of the things inside one place (files, groups, a
+ * page's parts): 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/sidebar.ts`). The application keeps the rows: it passes the
+ * visible ones in `items`, in order, and answers the events.
+ *
+ * @element ds-sidebar
+ * @attr label - The navigation's or the tree's accessible name.
+ * @attr tree - A tree of nested things instead of navigation.
+ * @fires sidebar-toggle - `{ id, expanded }`: a row asks to open or close.
+ * @fires sidebar-activate - `{ id }`: a row was pressed (navigation), or Enter or a double click opened one (a tree).
+ * @fires sidebar-select - `{ id }`: a click, Space or Enter chose a tree row.
+ * @fires sidebar-action - `{ id, action }`: a row's own action was pressed.
+ */
+export declare class Sidebar extends LitElement {
+    static properties: {
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        empty: {
+            type: StringConstructor;
+        };
+        tree: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    items: SidebarItem[];
+    label: string;
+    empty: string;
+    tree: boolean;
+    static styles: import("lit").CSSResult;
+    /** In a tree, the row that holds the Tab stop. */
+    private focusId?;
+    constructor();
+    private resizeObserver?;
+    private fontsReady;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    /** Only a label that does not fit its row gets a tooltip, holding the whole label. */
+    private markCutLabels;
+    private request;
+    private toggle;
+    private activate;
+    /** Moves the focus to a row after `updateComplete`. */
+    focusItem(id: string): void;
+    /** Scrolls the current destination, or the selected tree row, into view. */
+    scrollToCurrent(): void;
+    /** The row a pointer or keyboard event happened on, for a context menu or a drag of the application's own. */
+    itemFromEvent(event: Event): SidebarItem | undefined;
+    private row;
+    /** A tree's Tab stop: the row last focused while it is still shown, else the selected row, else the first available. */
+    private stop;
+    private press;
+    private open;
+    private treeKeydown;
+    private renderTree;
+    private navigate;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-sidebar": Sidebar;
+    }
+}
+//# sourceMappingURL=ds-sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-sidebar.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAK3D,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAGlB,sFAAsF;AACtF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;MAKf;IACM,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,MAAM,0BAAqB;IAElC,kDAAkD;IAClD,OAAO,CAAC,OAAO,CAAC,CAAS;;IAUzB,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,UAAU,CAAS;IAE3B,iBAAiB;IAWjB,oBAAoB;IAKpB,OAAO;IAIP,sFAAsF;IACtF,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,QAAQ;IAQhB,uDAAuD;IACvD,SAAS,CAAC,EAAE,EAAE,MAAM;IAOpB,4EAA4E;IAC5E,eAAe;IAIf,8GAA8G;IAC9G,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,GAAG,SAAS;IAKpD,OAAO,CAAC,GAAG;IAIX,wHAAwH;IACxH,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,UAAU;IAqClB,OAAO,CAAC,QAAQ;IAqBhB,MAAM;CAiCP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,YAAY,EAAE,OAAO,CAAA;KAAE;CAAE"}

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

@@ -0,0 +1,268 @@
+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/sidebar";
+import "../0-face/tooltips";
+import "../2-core/ds-button";
+import "../2-core/ds-icon";
+import "./ds-row";
+import styles from "./styles/ds-sidebar.css?inline";
+/**
+ * Compact navigation composed from Row, Button and Icon: the application's
+ * places, each row a link or a button and its own Tab stop. A label cut
+ * short by the column's width shows in full in the shared tooltip
+ * (`data-tooltip`, drawn by `0-face/tooltips.ts`); a label that fits carries
+ * none, and no row carries the browser's `title`.
+ *
+ * With `tree`, it is a tree of the things inside one place (files, groups, a
+ * page's parts): 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/sidebar.ts`). The application keeps the rows: it passes the
+ * visible ones in `items`, in order, and answers the events.
+ *
+ * @element ds-sidebar
+ * @attr label - The navigation's or the tree's accessible name.
+ * @attr tree - A tree of nested things instead of navigation.
+ * @fires sidebar-toggle - `{ id, expanded }`: a row asks to open or close.
+ * @fires sidebar-activate - `{ id }`: a row was pressed (navigation), or Enter or a double click opened one (a tree).
+ * @fires sidebar-select - `{ id }`: a click, Space or Enter chose a tree row.
+ * @fires sidebar-action - `{ id, action }`: a row's own action was pressed.
+ */
+export class Sidebar extends LitElement {
+    constructor() {
+        super();
+        this.fontsReady = false;
+        this.items = [];
+        this.label = "Navigation";
+        this.empty = "No items";
+        this.tree = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver ?? (this.resizeObserver = new ResizeObserver(() => this.markCutLabels()));
+            this.resizeObserver.observe(this);
+        }
+        // Labels measured before the typeface arrives are measured again once it has.
+        const fonts = this.fontsReady ? undefined : document.fonts?.ready;
+        if (fonts)
+            void fonts.then(() => { this.fontsReady = true; this.markCutLabels(); });
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.markCutLabels();
+    }
+    /** Only a label that does not fit its row gets a tooltip, holding the whole label. */
+    markCutLabels() {
+        const labels = new Map(this.items.map(item => [item.id, item.label]));
+        this.renderRoot.querySelectorAll("[data-item]").forEach(control => {
+            const name = control.querySelector(".name");
+            const label = labels.get(control.dataset.item ?? "");
+            if (label && name && name.scrollWidth > name.clientWidth)
+                control.dataset.tooltip = label;
+            else
+                delete control.dataset.tooltip;
+        });
+    }
+    request(name, detail) {
+        return this.dispatchEvent(new CustomEvent(`sidebar-${name}`, { detail, bubbles: true, composed: true, cancelable: true }));
+    }
+    toggle(item) {
+        this.request("toggle", { id: item.id, expanded: !item.expanded });
+    }
+    activate(event, item) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // Let native links retain new-tab, download and context-menu behaviour.
+        if (item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0))
+            return;
+        if (!item.href && item.expanded !== undefined) {
+            this.toggle(item);
+            return;
+        }
+        if (!this.request("activate", { id: item.id }))
+            event.preventDefault();
+    }
+    /** Moves the focus to a row after `updateComplete`. */
+    focusItem(id) {
+        const row = this.row(id);
+        if (!row)
+            return;
+        if (this.tree) {
+            this.focusId = id;
+            this.requestUpdate();
+            row.tabIndex = 0;
+        }
+        row.focus();
+    }
+    /** Scrolls the current destination, or the selected tree row, into view. */
+    scrollToCurrent() {
+        this.renderRoot.querySelector('[aria-current="page"], [aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+    }
+    /** 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;
+    }
+    row(id) {
+        return [...this.renderRoot.querySelectorAll("[data-item]")].find(row => row.dataset.item === id);
+    }
+    /** A tree's 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;
+    }
+    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.request("toggle", { id: item.id, expanded: !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 });
+    }
+    treeKeydown(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.request("toggle", { id: item.id, expanded: 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);
+    }
+    renderTree() {
+        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 `<slot name="header"></slot><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.treeKeydown(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>`;
+        })}
+      ${this.items.length ? nothing : html `<p class="empty" role="status">${this.empty}</p>`}
+    </div><slot name="footer"></slot>`;
+    }
+    navigate(event, item) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+        const index = this.items.indexOf(item);
+        let target;
+        const available = this.items.filter(row => !row.disabled);
+        const position = available.indexOf(item);
+        if (event.key === "ArrowDown")
+            target = available[Math.min(position + 1, available.length - 1)];
+        else if (event.key === "ArrowUp")
+            target = available[Math.max(position - 1, 0)];
+        else if (event.key === "Home")
+            target = available[0];
+        else if (event.key === "End")
+            target = available[available.length - 1];
+        else if (event.key === "ArrowRight") {
+            if (item.expanded === false)
+                this.toggle(item);
+            else if (item.expanded && (this.items[index + 1]?.depth ?? 0) > (item.depth ?? 0))
+                target = this.items[index + 1];
+        }
+        else if (event.key === "ArrowLeft") {
+            if (item.expanded)
+                this.toggle(item);
+            else
+                target = this.items.slice(0, index).reverse().find(row => (row.depth ?? 0) < (item.depth ?? 0) && !row.disabled);
+        }
+        else
+            return;
+        event.preventDefault();
+        if (target && !target.disabled)
+            this.focusItem(target.id);
+    }
+    render() {
+        if (this.tree)
+            return this.renderTree();
+        return html `<slot name="header"></slot><nav aria-label=${this.label}>
+      ${repeat(this.items, item => item.id, item => html `
+        <ds-row class="row" ?data-current=${item.current} ?data-disabled=${item.disabled}
+          style=${`--depth:${Math.max(0, item.depth ?? 0)}`}>
+          <ds-button control="slotted" class="choice" ?disabled=${item.disabled}>
+            ${item.href && !item.disabled ? html `
+              <a href=${item.href} data-item=${item.id} aria-current=${ifDefined(item.current ? "page" : undefined)}
+                @click=${(event) => this.activate(event, item)}
+                @keydown=${(event) => this.navigate(event, item)}><span class="name">${item.icon ? html `<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></a>` : html `
+              <button type="button" data-item=${item.id} ?disabled=${item.disabled}
+                aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
+                aria-current=${ifDefined(item.current ? "page" : undefined)}
+                @click=${(event) => this.activate(event, item)}
+                @keydown=${(event) => this.navigate(event, item)}><span class="name">${item.icon ? html `<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></button>`}
+          </ds-button>
+          ${item.expanded !== undefined ? html `
+            <ds-button control="slotted" icon class="disclosure">
+              <button type="button" aria-label=${`${item.expanded ? "Collapse" : "Expand"} ${item.label}`}
+                aria-expanded=${item.expanded} @click=${() => this.toggle(item)}>
+                <ds-icon type="right" aria-hidden="true" ?data-open=${item.expanded}></ds-icon>
+              </button>
+            </ds-button>` : nothing}
+          <span class="spacer" aria-hidden="true"></span>
+          ${item.meta ? html `<span class="meta">${item.meta}</span>` : nothing}
+          ${item.action ? html `<ds-button control="slotted" fit class="action"><button type="button"
+            aria-label=${`${item.action.label}: ${item.label}`}
+            @click=${() => this.request("action", { id: item.id, action: item.action.id })}>${item.action.label}</button></ds-button>` : nothing}
+        </ds-row>`)}
+      ${this.items.length ? nothing : html `<p class="empty" role="status">${this.empty}</p>`}
+    </nav><slot name="footer"></slot>`;
+    }
+}
+Sidebar.properties = {
+    items: { attribute: false },
+    label: { type: String },
+    empty: { type: String },
+    tree: { type: Boolean, reflect: true },
+};
+Sidebar.styles = unsafeCSS(styles);
+define("ds-sidebar", Sidebar);

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

@@ -1,10 +1,13 @@
 import { LitElement } from "lit";
-export interface TableRow {
-    product: string;
-    users: string;
-    retention: string;
-    status?: string;
+/** A column: the key it reads from each row, its header, and whether it holds numbers. */
+export interface TableColumn {
+    key: string;
+    label: string;
+    /** Sets the column to its end in tabular figures. Unset, a column of numbers is numeric. */
+    numeric?: boolean;
 }
+/** A row: values by column key, or by column position. */
+export type TableRow = Record<string, unknown> | readonly unknown[];
 export declare class DsTable extends LitElement {
     static properties: {
         data: {
@@ -13,16 +16,31 @@ export declare class DsTable extends LitElement {
         columns: {
             type: ArrayConstructor;
         };
-        showStatus: {
+        footer: {
+            type: ObjectConstructor;
+        };
+        sticky: {
             type: BooleanConstructor;
-            attribute: string;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
         };
     };
+    /** The body rows. */
     data: TableRow[];
-    columns: string[];
-    showStatus: boolean;
+    /** Headers as labels (`"Users"` reads `users`) or columns; unset, the first row's keys. */
+    columns: (string | TableColumn)[];
+    /** A totals row under the body. */
+    footer: TableRow | undefined;
+    /** Keeps the first column in place while the table scrolls sideways. */
+    sticky: boolean;
+    /** The table's accessible name. */
+    label: string | undefined;
     constructor();
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+    private resolvedColumns;
+    private row;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-table.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;MAIf;IAEM,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;;IAS5B,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CA0BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-table.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAK3D,0FAA0F;AAC1F,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,0DAA0D;AAC1D,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,OAAO,EAAE,CAAC;AAKpE,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;MAMf;IAEF,qBAAqB;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACzB,2FAA2F;IACnF,OAAO,EAAE,CAAC,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC;IAC1C,mCAAmC;IAC3B,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,wEAAwE;IAChE,MAAM,EAAE,OAAO,CAAC;IACxB,mCAAmC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;;IASlC,MAAM,CAAC,MAAM,4BAA6D;IAE1E,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,GAAG;IASX,MAAM;CAcP;AAaD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -1,35 +1,53 @@
 // ds-table.ts
-// Data table component
-import { LitElement, html, unsafeCSS } from "lit";
+// A data table: rows one square high on hairlines, drawn from data with the
+// same rules as a native `<table class="ds-table">` (1-root/table.css).
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import metrics from "../1-root/component-metrics.css?inline";
+import table from "../1-root/table.css?inline";
 import styles from "./styles/ds-table.css?inline";
+const capitalised = (key) => key.charAt(0).toUpperCase() + key.slice(1);
+const blank = (value) => value === undefined || value === null || value === "";
 export class DsTable extends LitElement {
     constructor() {
         super();
         this.data = [];
-        this.columns = ["Product", "Users", "Retention"];
-        this.showStatus = true;
+        this.columns = [];
+        this.sticky = false;
+    }
+    resolvedColumns() {
+        const named = this.columns.length > 0;
+        const given = named
+            ? this.columns
+            : Object.keys(this.data.find(row => !Array.isArray(row)) ?? {});
+        const rows = this.footer ? [...this.data, this.footer] : this.data;
+        return given.map((column, index) => {
+            const resolved = typeof column !== "string" ? column
+                : named ? { key: column.toLowerCase(), label: column }
+                    : { key: column, label: capitalised(column) };
+            const values = rows.map(row => cell(row, resolved.key, index)).filter(value => !blank(value));
+            const numeric = resolved.numeric ?? (values.length > 0 && values.every(value => typeof value === "number"));
+            return { ...resolved, numeric };
+        });
+    }
+    row(row, columns) {
+        return html `<tr>${columns.map((column, index) => {
+            const value = text(cell(row, column.key, index));
+            return index === 0
+                ? html `<th scope="row" ?data-numeric=${column.numeric}>${value}</th>`
+                : html `<td ?data-numeric=${column.numeric}>${value}</td>`;
+        })}</tr>`;
     }
     render() {
+        const columns = this.resolvedColumns();
         return html `
-      <div class="table-container">
-        <div class="table-header">
-          <div class="header-cell product-cell">Product</div>
-          <div class="header-cell users-cell">Users</div>
-          <div class="header-cell retention-cell">Retention</div>
-          ${this.showStatus ? html `<div class="header-cell">Status</div>` : ""}
-        </div>
-        <div class="table-body">
-          ${this.data.map((row, rowIndex) => html `
-              <div class="data-cell product-cell">${row.product}</div>
-              <div class="data-cell users-cell">${row.users}</div>
-              <div class="data-cell retention-cell">${row.retention}</div>
-              ${this.showStatus
-            ? html `<div class="data-cell status-cell">
-                    ${row.status || "Pending"}
-                  </div>`
-            : ""}
-            `)}
-        </div>
+      <div class="ds-table-scroll" part="scroll">
+        <table class="ds-table" part="table" ?data-sticky=${this.sticky} aria-label=${this.label ?? nothing}>
+          <thead>
+            <tr>${columns.map(column => html `<th scope="col" ?data-numeric=${column.numeric}>${column.label}</th>`)}</tr>
+          </thead>
+          <tbody>${this.data.map(row => this.row(row, columns))}</tbody>
+          ${this.footer ? html `<tfoot>${this.row(this.footer, columns)}</tfoot>` : nothing}
+        </table>
       </div>
     `;
     }
@@ -37,7 +55,17 @@ export class DsTable extends LitElement {
 DsTable.properties = {
     data: { type: Array },
     columns: { type: Array },
-    showStatus: { type: Boolean, attribute: "show-status" },
+    footer: { type: Object },
+    sticky: { type: Boolean, reflect: true },
+    label: { type: String },
 };
-DsTable.styles = unsafeCSS(styles);
+DsTable.styles = [unsafeCSS(metrics), unsafeCSS(table), unsafeCSS(styles)];
+function cell(row, key, index) {
+    return Array.isArray(row) ? row[index] : row[key];
+}
+function text(value) {
+    if (blank(value))
+        return "";
+    return typeof value === "number" ? value.toLocaleString() : String(value);
+}
 customElements.define("ds-table", DsTable);