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

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

@@ -1,13 +1,64 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import styles from "./styles/ds-list.css?inline";
 import { define } from "../0-face/define";
+/** Children that are never items of the list. */
+const NOT_ITEMS = new Set(["template", "script", "style", "slot"]);
+/** Controls keep their own role: a link or a button that became a list item would no longer be announced as one. */
+const CONTROLS = new Set(["a", "button", "input", "select", "textarea", "summary", "details"]);
 /**
  * A vertical stack of rows.
  *
+ * The element is a list (`role="list"`) and each element directly inside it an
+ * item (`role="listitem"`), unless the page gives either a role of its own.
+ * A link, button or other control directly inside keeps its own role: wrap it
+ * in a row (or another element) to make it an item.
+ *
  * @element ds-list
  * @attr columns - Lay the items out in this many equal columns.
  */
 export class List extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The items this element gave a role, so roles the page wrote are left alone. */
+        this.ownItems = new Set();
+        this.ownRole = false;
+        this.syncItems = () => {
+            const slot = this.shadowRoot?.querySelector("slot");
+            // Items only where the element is a list: a listbox or a page's own role
+            // decides its children's roles itself.
+            const list = this.getAttribute("role") === "list";
+            const items = new Set(list && slot ? slot.assignedElements().filter(item => !NOT_ITEMS.has(item.localName)) : []);
+            for (const item of this.ownItems) {
+                if (items.has(item))
+                    continue;
+                if (item.getAttribute("role") === "listitem")
+                    item.removeAttribute("role");
+                this.ownItems.delete(item);
+            }
+            for (const item of items) {
+                if (item.hasAttribute("role") || CONTROLS.has(item.localName))
+                    continue;
+                item.setAttribute("role", "listitem");
+                this.ownItems.add(item);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "list");
+            this.ownRole = true;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.ownRole && this.getAttribute("role") === "list")
+            this.removeAttribute("role");
+        this.ownRole = false;
+    }
+    firstUpdated() {
+        this.syncItems();
+    }
     updated() {
         if (typeof this.columns === "number" && Number.isInteger(this.columns) && this.columns > 0)
             this.style.setProperty("--ds-list-columns", String(this.columns));
@@ -15,7 +66,7 @@ export class List extends LitElement {
             this.style.removeProperty("--ds-list-columns");
     }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot @slotchange=${this.syncItems}></slot>`;
     }
 }
 List.properties = {

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

@@ -0,0 +1,146 @@
+import { LitElement, type PropertyValues } from "lit";
+/** How a square is drawn. */
+export type MatrixMarkKind = "fill" | "outline" | "stripes" | "dot" | "triangle" | "dash";
+/** A row or a column. A column may stand in a group. */
+export interface MatrixAxis {
+    id: string;
+    label: string;
+    /** The group a column stands in. */
+    group?: string;
+}
+/** A group of columns: a bar in its colour over them, its colour tinting their squares. */
+export interface MatrixGroup {
+    id: string;
+    label: string;
+    /** A colour token or value, from the palette. */
+    color: string;
+}
+/** What is in the square where a row meets a column. */
+export interface MatrixCell {
+    row: string;
+    column: string;
+    mark: MatrixMarkKind;
+    /** More about this square, added to its name. */
+    note?: string;
+}
+/** A mark and what it means, for the legend and the squares' names. */
+export interface MatrixMark {
+    mark: MatrixMarkKind;
+    label: string;
+}
+/** Detail of `cell-press`: the row, the column and what is there, if anything. */
+export interface MatrixPressDetail {
+    row: MatrixAxis;
+    column: MatrixAxis;
+    cell?: MatrixCell;
+}
+/** The columns in their groups' order, each with its group. */
+export declare function orderColumns(columns: readonly MatrixAxis[], groups: readonly MatrixGroup[]): {
+    column: MatrixAxis;
+    group?: MatrixGroup;
+}[];
+/**
+ * @element ds-matrix
+ * @prop {MatrixAxis[]} rows - The rows, top to bottom (property only).
+ * @prop {MatrixAxis[]} columns - The columns; a column's `group` names its group (property only).
+ * @prop {MatrixGroup[]} groups - The column groups, in order, with their colours (property only).
+ * @prop {MatrixCell[]} cells - The marks (property only).
+ * @prop {MatrixMark[]} marks - What each mark means, drawn as the legend (property only).
+ * @prop {boolean} totals - A last row counting the marked squares in each column.
+ * @prop {string} totalsLabel - That row's name (`totals-label`); the shared word "Total".
+ * @prop {number} names - Squares for the row names: 8 by default.
+ * @prop {string} label - The matrix's name: a translation key, or literal words.
+ * @prop {boolean} literal - Show `label` and `totals-label` as written.
+ *
+ * @fires cell-press - A square was pressed, or Enter pressed on it; `{ row, column, cell }`.
+ * @fires row-press - A row's name was pressed; `{ row }`.
+ * @fires column-press - A column's name was pressed; `{ column }`.
+ *
+ * @example
+ * <ds-matrix label="Products and parts" literal totals></ds-matrix>
+ */
+export declare class Matrix extends LitElement {
+    static properties: {
+        rows: {
+            attribute: boolean;
+        };
+        columns: {
+            attribute: boolean;
+        };
+        groups: {
+            attribute: boolean;
+        };
+        cells: {
+            attribute: boolean;
+        };
+        marks: {
+            attribute: boolean;
+        };
+        totals: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        totalsLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        names: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        lit: {
+            state: boolean;
+        };
+        focusAt: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    rows: MatrixAxis[];
+    columns: MatrixAxis[];
+    groups: MatrixGroup[];
+    cells: MatrixCell[];
+    marks: MatrixMark[];
+    totals: boolean;
+    totalsLabel: string | undefined;
+    names: number | undefined;
+    label: string | undefined;
+    literal: boolean;
+    /** The row and column under the pointer or focus, lit as a crosshair; -1 for neither. */
+    lit: {
+        row: number;
+        column: number;
+    } | undefined;
+    /** The square holding the one Tab stop. */
+    focusAt: {
+        row: number;
+        column: number;
+    };
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private words;
+    private get ordered();
+    private markLabel;
+    private move;
+    private onKeyDown;
+    private pressCell;
+    private onClick;
+    private onPointerOver;
+    private mark;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-matrix": Matrix;
+    }
+}
+//# sourceMappingURL=ds-matrix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-matrix.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-matrix.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhF,6BAA6B;AAC7B,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;AAE1F,wDAAwD;AACxD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,2FAA2F;AAC3F,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,CAAC;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,uEAAuE;AACvE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,kFAAkF;AAClF,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAOD,+DAA+D;AAC/D,wBAAgB,YAAY,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,EAAE,MAAM,EAAE,SAAS,WAAW,EAAE;YAGhE,UAAU;YAAU,WAAW;IAOzD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAaf;IAEF,MAAM,CAAC,MAAM,4BAA2C;IAEhD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACzB,yFAAyF;IACjF,GAAG,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACzD,2CAA2C;IACnC,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAEjD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IActD,iBAAiB;IAMjB,oBAAoB;IAMpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKlD,OAAO,CAAC,KAAK;IAKb,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,CAAC,SAAS;YAIH,IAAI;IASlB,OAAO,CAAC,SAAS,CAqBf;IAEF,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,OAAO,CAOb;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,IAAI;IAIZ,MAAM;CAgFP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,248 @@
+// ds-matrix.ts
+// Rows against columns, one 20px square where each pair meets: read across a
+// row for what it has, down a column for who has it. Columns stand in
+// coloured groups whose colour tints the squares below; their names rise at
+// 45° from the middle of their column. A mark in a square says how the row
+// and column meet, and the legend below names the marks.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { getText } from "../0-face/i18n";
+import metrics from "../1-root/component-metrics.css?inline";
+import styles from "./styles/ds-matrix.css?inline";
+const MARKS = ["fill", "outline", "stripes", "dot", "triangle", "dash"];
+const whole = (value, least, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.max(least, Math.floor(value)) : fallback;
+/** The columns in their groups' order, each with its group. */
+export function orderColumns(columns, groups) {
+    const byId = new Map(groups.map(group => [group.id, group]));
+    const seen = new Set();
+    const ordered = [];
+    for (const id of [...groups.map(group => group.id), ...columns.map(column => column.group ?? "")]) {
+        if (seen.has(id))
+            continue;
+        seen.add(id);
+        for (const column of columns)
+            if ((column.group ?? "") === id)
+                ordered.push({ column, group: byId.get(id) });
+    }
+    return ordered;
+}
+/**
+ * @element ds-matrix
+ * @prop {MatrixAxis[]} rows - The rows, top to bottom (property only).
+ * @prop {MatrixAxis[]} columns - The columns; a column's `group` names its group (property only).
+ * @prop {MatrixGroup[]} groups - The column groups, in order, with their colours (property only).
+ * @prop {MatrixCell[]} cells - The marks (property only).
+ * @prop {MatrixMark[]} marks - What each mark means, drawn as the legend (property only).
+ * @prop {boolean} totals - A last row counting the marked squares in each column.
+ * @prop {string} totalsLabel - That row's name (`totals-label`); the shared word "Total".
+ * @prop {number} names - Squares for the row names: 8 by default.
+ * @prop {string} label - The matrix's name: a translation key, or literal words.
+ * @prop {boolean} literal - Show `label` and `totals-label` as written.
+ *
+ * @fires cell-press - A square was pressed, or Enter pressed on it; `{ row, column, cell }`.
+ * @fires row-press - A row's name was pressed; `{ row }`.
+ * @fires column-press - A column's name was pressed; `{ column }`.
+ *
+ * @example
+ * <ds-matrix label="Products and parts" literal totals></ds-matrix>
+ */
+export class Matrix extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.onKeyDown = (event) => {
+            const cell = event.composedPath()[0].closest?.(".cell[data-row]");
+            if (!cell)
+                return;
+            const row = Number(cell.dataset.row), column = Number(cell.dataset.column);
+            const across = getComputedStyle(this).direction === "rtl" ? -1 : 1;
+            const mod = event.ctrlKey || event.metaKey;
+            const moves = {
+                ArrowUp: [row - 1, column],
+                ArrowDown: [row + 1, column],
+                ArrowLeft: [row, column - across],
+                ArrowRight: [row, column + across],
+                Home: mod ? [0, 0] : [row, 0],
+                End: mod ? [this.rows.length - 1, this.columns.length - 1] : [row, this.columns.length - 1],
+            };
+            if (moves[event.key]) {
+                event.preventDefault();
+                void this.move(...moves[event.key]);
+            }
+            else if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.pressCell(row, column);
+            }
+        };
+        this.onClick = (event) => {
+            const target = event.composedPath()[0].closest?.("[data-row], [data-column]");
+            if (!target || target.classList.contains("count"))
+                return;
+            const { row, column } = target.dataset;
+            if (row !== undefined && column !== undefined)
+                this.pressCell(Number(row), Number(column));
+            else if (row !== undefined)
+                this.dispatchEvent(new CustomEvent("row-press", { bubbles: true, composed: true, detail: { row: this.rows[Number(row)] } }));
+            else if (column !== undefined)
+                this.dispatchEvent(new CustomEvent("column-press", { bubbles: true, composed: true, detail: { column: this.ordered[Number(column)].column } }));
+        };
+        this.onPointerOver = (event) => {
+            const target = event.composedPath()[0].closest?.("[data-row], [data-column]");
+            const next = target ? { row: Number(target.dataset.row ?? -1), column: Number(target.dataset.column ?? -1) } : undefined;
+            if (next?.row !== this.lit?.row || next?.column !== this.lit?.column)
+                this.lit = next;
+        };
+        this.rows = [];
+        this.columns = [];
+        this.groups = [];
+        this.cells = [];
+        this.marks = [];
+        this.totals = false;
+        this.literal = false;
+        this.focusAt = { row: 0, column: 0 };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        super.disconnectedCallback();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.style.setProperty("--ds-matrix-names", String(whole(this.names, 2, 8)));
+    }
+    words(value, fallback) {
+        if (value && this.literal)
+            return value;
+        return getText(value || fallback) || value || fallback;
+    }
+    get ordered() {
+        return orderColumns(this.columns ?? [], this.groups ?? []);
+    }
+    markLabel(mark) {
+        return this.marks.find(entry => entry.mark === mark)?.label ?? mark;
+    }
+    async move(row, column) {
+        const rows = this.rows.length, columns = this.columns.length;
+        if (!rows || !columns)
+            return;
+        this.focusAt = { row: Math.max(0, Math.min(rows - 1, row)), column: Math.max(0, Math.min(columns - 1, column)) };
+        this.lit = this.focusAt;
+        await this.updateComplete;
+        this.renderRoot.querySelector(`.cell[data-row="${this.focusAt.row}"][data-column="${this.focusAt.column}"]`)?.focus();
+    }
+    pressCell(row, column) {
+        const entry = this.ordered[column];
+        const axis = this.rows[row];
+        if (!entry || !axis)
+            return;
+        const cell = this.cells.find(item => item.row === axis.id && item.column === entry.column.id);
+        this.focusAt = { row, column };
+        this.dispatchEvent(new CustomEvent("cell-press", { bubbles: true, composed: true, detail: { row: axis, column: entry.column, cell } }));
+    }
+    mark(mark) {
+        return MARKS.includes(mark) ? html `<i class="mark" data-mark=${mark} aria-hidden="true"></i>` : nothing;
+    }
+    render() {
+        const ordered = this.ordered;
+        const rows = this.rows ?? [];
+        const byPair = new Map((this.cells ?? []).map(cell => [`${cell.row}>${cell.column}`, cell]));
+        const lit = this.lit;
+        const focus = this.focusAt;
+        // One bar over each run of columns in the same group.
+        const bars = [];
+        ordered.forEach(({ group }, index) => {
+            const last = bars.at(-1);
+            if (last && last.group === group)
+                last.span++;
+            else
+                bars.push({ group, start: index, span: 1 });
+        });
+        const tint = (group) => (group ? `--ds-matrix-colour: ${group.color};` : "");
+        const counts = ordered.map(({ column }) => (this.cells ?? []).filter(cell => cell.column === column.id && cell.mark !== "dash" && rows.some(row => row.id === cell.row)).length);
+        const body = rows.length + (this.totals ? 1 : 0);
+        const name = this.label ? this.words(this.label, this.label) : undefined;
+        return html `<div class="matrix" part="matrix" @pointerover=${this.onPointerOver} @pointerleave=${() => (this.lit = undefined)}>
+      <div
+        class="grid"
+        part="grid"
+        role="grid"
+        aria-label=${name ?? nothing}
+        style=${`--ds-matrix-columns: ${ordered.length}; --ds-matrix-body: ${body};`}
+        @keydown=${this.onKeyDown}
+        @click=${this.onClick}
+      >
+        ${bars.map(bar => bar.group
+            ? html `<span class="group" part="group" aria-hidden="true" style=${`grid-column: ${bar.start + 2} / span ${bar.span}; ${tint(bar.group)}`}><span>${bar.group.label}</span></span>`
+            : nothing)}
+        <div role="row" class="row">
+          <span role="columnheader" class="corner"></span>
+          ${ordered.map(({ column, group }, index) => html `<span
+            role="columnheader"
+            class="column"
+            part="column"
+            data-column=${index}
+            ?data-lit=${lit?.column === index}
+            style=${`grid-column: ${index + 2}; ${tint(group)}`}
+          ><span>${column.label}</span></span>`)}
+        </div>
+        ${rows.map((row, r) => html `<div role="row" class="row">
+          <span role="rowheader" class="name" part="name" data-row=${r} ?data-lit=${lit?.row === r} style=${`grid-row: ${r + 3}`}>${row.label}</span>
+          ${ordered.map(({ column, group }, c) => {
+            const cell = byPair.get(`${row.id}>${column.id}`);
+            const words = `${row.label}, ${column.label}: ${cell ? this.markLabel(cell.mark) : "–"}${cell?.note ? `. ${cell.note}` : ""}`;
+            return html `<span
+              role="gridcell"
+              class="cell"
+              part="cell"
+              data-row=${r}
+              data-column=${c}
+              tabindex=${focus.row === r && focus.column === c ? 0 : -1}
+              aria-label=${words}
+              data-tooltip=${words}
+              ?data-lit=${lit !== undefined && (lit.row === r || lit.column === c)}
+              style=${`grid-row: ${r + 3}; grid-column: ${c + 2}; ${tint(group)}`}
+            >${cell ? this.mark(cell.mark) : nothing}</span>`;
+        })}
+        </div>`)}
+        ${this.totals
+            ? html `<div role="row" class="row">
+              <span role="rowheader" class="name totals" style=${`grid-row: ${rows.length + 3}`}>${this.words(this.totalsLabel, "Total")}</span>
+              ${counts.map((count, c) => html `<span
+                role="gridcell"
+                class="cell count"
+                part="count"
+                data-column=${c}
+                ?data-lit=${lit?.column === c}
+                style=${`grid-row: ${rows.length + 3}; grid-column: ${c + 2}; ${tint(ordered[c].group)}`}
+              >${count || ""}</span>`)}
+            </div>`
+            : nothing}
+        ${body && ordered.length ? html `<span class="frame" aria-hidden="true"></span>` : nothing}
+      </div>
+      ${this.marks.length
+            ? html `<div class="legend" part="legend">${this.marks.map(entry => html `<span class="key"><span class="key-mark">${this.mark(entry.mark)}</span>${entry.label}</span>`)}</div>`
+            : nothing}
+    </div>`;
+    }
+}
+Matrix.properties = {
+    rows: { attribute: false },
+    columns: { attribute: false },
+    groups: { attribute: false },
+    cells: { attribute: false },
+    marks: { attribute: false },
+    totals: { type: Boolean, reflect: true },
+    totalsLabel: { type: String, attribute: "totals-label" },
+    names: { type: Number },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+    lit: { state: true },
+    focusAt: { state: true },
+};
+Matrix.styles = [unsafeCSS(metrics), unsafeCSS(styles)];
+define("ds-matrix", Matrix);

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

@@ -119,7 +119,7 @@ export declare class Menu extends LitElement {
     openAt(point: {
         x: number;
         y: number;
-    }, invokingControl?: HTMLElement): void;
+    }, invokingControl?: HTMLElement | null): void;
     /** A selected action dismisses its whole branch. Products can decline it. */
     select(): void;
     private contextControl;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-menu.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-menu.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ds-menu.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-menu.ts"],"names":[],"mappings":"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"}

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

@@ -136,11 +136,14 @@ export class Menu extends LitElement {
             const left = viewport?.offsetLeft ?? 0, top = viewport?.offsetTop ?? 0;
             const width = viewport?.width ?? view.innerWidth, height = viewport?.height ?? view.innerHeight;
             const gap = parseFloat(view.getComputedStyle(this).scrollPaddingTop) || 10, unit = gap * 2;
-            const room = Math.max(0, width - 2 * gap);
+            // Whole squares: the room and the height a menu may take round down to
+            // them, and a menu as wide as its anchor rounds that width up.
+            const squares = (length, round) => round(Math.max(0, length) / unit + (round === Math.floor ? 0.001 : -0.001)) * unit;
+            const room = squares(width - 2 * gap, Math.floor);
             this.style.maxWidth = `${room}px`;
-            this.style.setProperty("--ds-menu-anchor-width", `${Math.min(room, Math.max(4 * unit, rect.width))}px`);
+            this.style.setProperty("--ds-menu-anchor-width", `${Math.min(room, Math.max(4 * unit, squares(rect.width, Math.ceil)))}px`);
             if (this.placement === "right" || this.placement === "left" || this.triggerMode === "submenu") {
-                this.style.setProperty("--ds-menu-available-height", `${Math.max(0, height - 2 * gap)}px`);
+                this.style.setProperty("--ds-menu-available-height", `${squares(height - 2 * gap, Math.floor)}px`);
                 const box = this.getBoundingClientRect();
                 const preferLeft = this.placement === "left" || view.getComputedStyle(this).direction === "rtl";
                 const toRight = left + width - rect.right, toLeft = rect.left - left;
@@ -153,7 +156,7 @@ export class Menu extends LitElement {
             const frame = this.shadowRoot?.querySelector(".frame");
             const needed = Math.min(frame?.scrollHeight ?? this.scrollHeight, 8 * unit);
             const up = this.placement === "top" ? above >= needed || above >= below : below < needed && above > below;
-            this.style.setProperty("--ds-menu-available-height", `${Math.max(0, Math.min(height - 2 * gap, up ? above : below))}px`);
+            this.style.setProperty("--ds-menu-available-height", `${squares(Math.min(height - 2 * gap, up ? above : below), Math.floor)}px`);
             const box = this.getBoundingClientRect();
             this.style.left = `${Math.max(left + gap, Math.min(rect.left, left + width - gap - box.width))}px`;
             this.style.top = `${Math.max(top + gap, up ? rect.top - gap - box.height : rect.bottom + gap)}px`;

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

@@ -2,11 +2,30 @@ import { LitElement } from "lit";
 /**
  * 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 declare class Row extends LitElement {
     static properties: {
@@ -26,13 +45,60 @@ export declare class Row extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        stacked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        href: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        current: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        nav: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        target: {
+            type: StringConstructor;
+        };
+        rel: {
+            type: StringConstructor;
+        };
     };
     fill: boolean;
     centered: boolean;
     end: boolean;
     auto: boolean;
+    stacked: boolean;
+    href: string | undefined;
+    interactive: boolean;
+    disabled: boolean;
+    current: string | null | undefined;
+    nav: boolean;
+    label: string | undefined;
+    target: string | undefined;
+    rel: string | undefined;
     constructor();
     static styles: import("lit").CSSResult;
+    /** The `aria-current` value, or none. */
+    private get currentValue();
+    /** Focuses the press target, so `row.focus()` lands on the link or button. */
+    focus(options?: FocusOptions): void;
+    private press;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-row.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;;;;GAQG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;MAKf;IAEM,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;;IAUtB,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}
+{"version":3,"file":"ds-row.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAQlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcf;IAEM,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;;IAmBhC,MAAM,CAAC,MAAM,0BAAqB;IAElC,yCAAyC;IACzC,OAAO,KAAK,YAAY,GAIvB;IAED,8EAA8E;IAC9E,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,OAAO,CAAC,KAAK;IAQb,MAAM;CAcP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}