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

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

@@ -0,0 +1,213 @@
+// 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";
+/**
+ * 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, taken, index) {
+    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) {
+    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();
+function styleRoot(root) {
+    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 {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.observer = null;
+        this.frame = 0;
+        /**
+         * 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.
+         */
+        this.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 = 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;
+            });
+        };
+        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();
+    }
+    willUpdate(changed) {
+        if (changed.has("levels") && this.hasUpdated)
+            this.collect();
+    }
+    /** The headings the contents list, in the order they stand. */
+    get headings() {
+        const levels = documentLevels(this.levels);
+        return [...this.querySelectorAll(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() {
+        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();
+    }
+    heading(id) {
+        return this.headings.find(heading => heading.id === id);
+    }
+    follow(event, id) {
+        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) => this.follow(event, entry.id)}>${entry.text}</a>
+              </li>`)}
+            </ol>
+          </slot>
+        </div>
+      </nav>
+      <div class="ds-document__body" part="body"><slot></slot></div>
+    </div>`;
+    }
+}
+DocumentPage.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 },
+};
+DocumentPage.styles = [unsafeCSS(metrics), unsafeCSS(documentSheet), unsafeCSS(styles)];
+define("ds-document", DocumentPage);

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

@@ -0,0 +1,100 @@
+import { LitElement } from "lit";
+import "../2-core/ds-cycle";
+/** A link in a footer column. */
+export interface FooterLink {
+    /** The words: a translation key, or as written with the footer's `literal`. */
+    label: string;
+    href: string;
+    /** Opens elsewhere: in a new tab, with no referrer. */
+    external?: boolean;
+    /** The page being read: `aria-current="page"`. */
+    current?: boolean;
+}
+/** A footer column: a heading and its links. */
+export interface FooterColumn {
+    heading?: string;
+    links: FooterLink[];
+}
+/** The settings a footer offers, each a `ds-cycle` of that type. */
+export type FooterPreference = "language" | "theme";
+/** The preferences named by an attribute: every one when it is present but empty. */
+export declare function footerPreferences(value: string | null | undefined): FooterPreference[];
+/**
+ * @element ds-footer
+ * @prop {string} brand - The site's name, a link home: a translation key, or
+ *   the words as they stand with `literal`. The `brand` slot takes its place.
+ * @prop {string} href - Where the brand links. `/` by default.
+ * @prop {string} tagline - A line about the site under the brand.
+ * @prop {FooterColumn[]} columns - The columns of links, eight squares each.
+ * @prop {string} label - The columns' accessible name, as a navigation; without it they are plain lists.
+ * @prop {string} owner - Who holds the copyright: the brand by default.
+ * @prop {number} year - The copyright's year: this year by default.
+ * @prop {string} preferences - `language`, `theme` or both, as `ds-cycle`
+ *   buttons at the end of the last row; present but empty, both.
+ * @prop {boolean} literal - Show the words as written, never looked up.
+ *
+ * @slot brand - The brand, when it is more than words: a logo, a link of the page's own.
+ * @slot preferences - Controls of the page's own beside or in place of the cycles.
+ * @slot legal - The last line, in place of the copyright.
+ *
+ * @example
+ * <ds-footer brand="Name" tagline="What it does" preferences literal
+ *   columns='[{"heading":"Product","links":[{"label":"Download","href":"/download"}]}]'>
+ * </ds-footer>
+ */
+export declare class Footer extends LitElement {
+    static properties: {
+        brand: {
+            type: StringConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        tagline: {
+            type: StringConstructor;
+        };
+        columns: {
+            type: ArrayConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        owner: {
+            type: StringConstructor;
+        };
+        year: {
+            type: NumberConstructor;
+        };
+        preferences: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    brand: string | undefined;
+    href: string;
+    tagline: string | undefined;
+    columns: FooterColumn[];
+    label: string | undefined;
+    owner: string | undefined;
+    year: number | undefined;
+    preferences: string | null | undefined;
+    literal: boolean;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    private slotted;
+    private link;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-footer": Footer;
+    }
+}
+//# sourceMappingURL=ds-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-footer.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-footer.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAG3D,OAAO,oBAAoB,CAAC;AAK5B,iCAAiC;AACjC,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,gDAAgD;AAChD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAC;AAGpD,qFAAqF;AACrF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,gBAAgB,EAAE,CAKtF;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAStD,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,IAAI;IAKZ,MAAM;CA+BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,119 @@
+// ds-footer.ts
+// A site footer: the brand, columns of links, the language and theme, and the
+// copyright. Drawn by 1-root/footer.css, the same classes a page without
+// scripts writes.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import "../2-core/ds-cycle";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-footer.css?inline";
+const PREFERENCES = ["language", "theme"];
+/** The preferences named by an attribute: every one when it is present but empty. */
+export function footerPreferences(value) {
+    if (value == null || value === "false")
+        return [];
+    const named = value.split(/[\s,]+/).filter(Boolean);
+    if (!named.length || named.includes("true"))
+        return [...PREFERENCES];
+    return PREFERENCES.filter(name => named.includes(name));
+}
+/**
+ * @element ds-footer
+ * @prop {string} brand - The site's name, a link home: a translation key, or
+ *   the words as they stand with `literal`. The `brand` slot takes its place.
+ * @prop {string} href - Where the brand links. `/` by default.
+ * @prop {string} tagline - A line about the site under the brand.
+ * @prop {FooterColumn[]} columns - The columns of links, eight squares each.
+ * @prop {string} label - The columns' accessible name, as a navigation; without it they are plain lists.
+ * @prop {string} owner - Who holds the copyright: the brand by default.
+ * @prop {number} year - The copyright's year: this year by default.
+ * @prop {string} preferences - `language`, `theme` or both, as `ds-cycle`
+ *   buttons at the end of the last row; present but empty, both.
+ * @prop {boolean} literal - Show the words as written, never looked up.
+ *
+ * @slot brand - The brand, when it is more than words: a logo, a link of the page's own.
+ * @slot preferences - Controls of the page's own beside or in place of the cycles.
+ * @slot legal - The last line, in place of the copyright.
+ *
+ * @example
+ * <ds-footer brand="Name" tagline="What it does" preferences literal
+ *   columns='[{"heading":"Product","links":[{"label":"Download","href":"/download"}]}]'>
+ * </ds-footer>
+ */
+export class Footer extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.href = "/";
+        this.columns = [];
+        this.literal = false;
+    }
+    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();
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    slotted(name) {
+        return [...this.children].some(node => node.getAttribute("slot") === name);
+    }
+    link(link) {
+        return html `<li><a href=${link.href} aria-current=${link.current ? "page" : nothing}
+      target=${link.external ? "_blank" : nothing} rel=${link.external ? "noopener noreferrer" : nothing}>${this.words(link.label)}</a></li>`;
+    }
+    render() {
+        const columns = (Array.isArray(this.columns) ? this.columns : []).filter(column => column && Array.isArray(column.links));
+        const preferences = footerPreferences(this.preferences);
+        const hasPreferences = preferences.length > 0 || this.slotted("preferences");
+        const owner = this.owner ? this.words(this.owner) : this.words(this.brand);
+        const year = Number.isFinite(this.year) ? this.year : new Date().getFullYear();
+        const brandSlotted = this.slotted("brand");
+        const hasBrand = brandSlotted || Boolean(this.brand) || Boolean(this.tagline);
+        const list = columns.map(column => html `<div class="ds-footer__column" part="column">
+      ${column.heading ? html `<h2 class="ds-footer__heading" part="heading">${this.words(column.heading)}</h2>` : nothing}
+      <ul class="ds-footer__links">${column.links.map(link => this.link(link))}</ul>
+    </div>`);
+        return html `<footer class="ds-footer" part="footer">
+      <div class="ds-footer__brand" part="brand" ?hidden=${!hasBrand}>
+        <slot name="brand" @slotchange=${this.relabel}>${this.brand ? html `<a class="ds-footer__mark" href=${this.href || "/"}>${this.words(this.brand)}</a>` : nothing}</slot>
+        ${this.tagline ? html `<p class="ds-footer__tagline" part="tagline">${this.words(this.tagline)}</p>` : nothing}
+      </div>
+      ${columns.length
+            ? this.label
+                ? html `<nav class="ds-footer__columns" part="columns" aria-label=${this.words(this.label)}>${list}</nav>`
+                : html `<div class="ds-footer__columns" part="columns">${list}</div>`
+            : nothing}
+      <div class="ds-footer__base" part="base">
+        <p class="ds-footer__legal" part="legal"><slot name="legal" @slotchange=${this.relabel}>${owner ? `© ${year} ${owner}` : `© ${year}`}</slot></p>
+        <div class="ds-footer__preferences" part="preferences" ?hidden=${!hasPreferences}>
+          ${preferences.map(type => html `<ds-cycle type=${type}></ds-cycle>`)}
+          <slot name="preferences" @slotchange=${this.relabel}></slot>
+        </div>
+      </div>
+    </footer>`;
+    }
+}
+Footer.properties = {
+    brand: { type: String },
+    href: { type: String },
+    tagline: { type: String },
+    columns: { type: Array },
+    label: { type: String },
+    owner: { type: String },
+    year: { type: Number },
+    preferences: { type: String },
+    literal: { type: Boolean, reflect: true },
+};
+Footer.styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+define("ds-footer", Footer);

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

@@ -1,23 +1,43 @@
 import { LitElement } from "lit";
-declare global {
-    interface CustomElementRegistry {
-        define(name: string, constructor: typeof LitElement): void;
-    }
-    var customElements: CustomElementRegistry;
-}
+export type GridPattern = "grid" | "lines" | "columns" | "dots" | "none";
+/** Decorative paper or an alignment overlay; never arranges or captures content. */
 export declare class Grid extends LitElement {
     static properties: {
         align: {
             type: StringConstructor;
+            reflect: boolean;
+        };
+        pattern: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+        rowSize: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        color: {
+            type: StringConstructor;
+        };
+        paper: {
+            type: StringConstructor;
+        };
+        contained: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
     };
-    align?: string;
-    private resizeObserver?;
-    private resizeTimeout?;
+    align: "left" | "center" | "right";
+    pattern: GridPattern;
+    size: number;
+    rowSize: number | undefined;
+    color: string;
+    paper: string;
+    contained: boolean;
     static styles: import("lit").CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private updateMobileClass;
+    constructor();
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,cAAc,CAAC,CAAa;IACpC,OAAO,CAAC,aAAa,CAAC,CAAM;IAE5B,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IAgBjB,oBAAoB;IAUpB,OAAO,CAAC,iBAAiB;IAWzB,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAGzE,oFAAoF;AACpF,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;IACM,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,MAAM,0BAAqB;;IAalC,MAAM;CAWP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,SAAS,EAAE,IAAI,CAAA;KAAE;CAAE"}

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

@@ -1,49 +1,40 @@
-// ds-grid.ts
-// Simple grid layout component
 import { LitElement, html, unsafeCSS } from "lit";
-import { detectMobileDevice } from "../0-face/device";
+import { styleMap } from "lit/directives/style-map.js";
+import { define } from "../0-face/define";
 import styles from "./styles/ds-grid.css?inline";
+const patterns = new Set(["grid", "lines", "columns", "dots", "none"]);
+/** Decorative paper or an alignment overlay; never arranges or captures content. */
 export class Grid extends LitElement {
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateMobileClass();
-        // Listen for resize events to update mobile class
-        this.resizeObserver = () => {
-            if (this.resizeTimeout) {
-                clearTimeout(this.resizeTimeout);
-            }
-            this.resizeTimeout = setTimeout(() => {
-                this.updateMobileClass();
-            }, 100);
-        };
-        window.addEventListener("resize", this.resizeObserver);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.resizeObserver) {
-            window.removeEventListener("resize", this.resizeObserver);
-        }
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-        }
-    }
-    updateMobileClass() {
-        const isMobile = detectMobileDevice();
-        if (isMobile) {
-            this.classList.add("mobile");
-            this.classList.remove("desktop");
-        }
-        else {
-            this.classList.add("desktop");
-            this.classList.remove("mobile");
-        }
+    constructor() {
+        super();
+        this.align = "center";
+        this.pattern = "grid";
+        this.size = 20;
+        this.rowSize = undefined;
+        this.color = "";
+        this.paper = "";
+        this.contained = false;
     }
     render() {
-        return html ``;
+        const size = Number.isFinite(this.size) && this.size > 0 ? this.size : 20;
+        const row = Number.isFinite(this.rowSize) && this.rowSize > 0 ? this.rowSize : size;
+        return html `<div aria-hidden="true" class="paper" data-pattern=${patterns.has(this.pattern) ? this.pattern : "grid"}
+      style=${styleMap({
+            "--pitch-x": `${size}px`,
+            "--pitch-y": `${row}px`,
+            "--ink": this.color || "var(--ds-grid-color, color-mix(in srgb, var(--ds-text-color, var(--text-color, currentColor)) 12%, transparent))",
+            "--paper": this.paper || "var(--ds-grid-paper, transparent)",
+        })}></div>`;
     }
 }
 Grid.properties = {
-    align: { type: String },
+    align: { type: String, reflect: true },
+    pattern: { type: String, reflect: true },
+    size: { type: Number },
+    rowSize: { type: Number, attribute: "row-size" },
+    color: { type: String },
+    paper: { type: String },
+    contained: { type: Boolean, reflect: true },
 };
 Grid.styles = unsafeCSS(styles);
-customElements.define("ds-grid", Grid);
+define("ds-grid", Grid);

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

@@ -0,0 +1,84 @@
+import { LitElement, type PropertyValues } from "lit";
+import "../2-core/ds-icon";
+/** The shared word that names the menu button and its drawer. */
+export declare const MENU_LABEL = "Menu";
+/**
+ * @element ds-header
+ * @prop {string} brand - The site's name, a link home: a translation key, or
+ *   the words as they stand with `literal`. The `brand` slot takes its place.
+ * @prop {string} href - Where the brand links. `/` by default.
+ * @prop {string} label - The navigation's accessible name, when a page has more than one.
+ * @prop {boolean} literal - Show `brand` as written, never looked up.
+ * @prop {boolean} sticky - Stay at the top of the page as it scrolls, on the paper.
+ *
+ * @slot - The navigation: `<a href>` links, one square high. The link to the
+ *   address being read gets `aria-current="page"` unless one is marked.
+ * @slot brand - The brand, when it is more than words: a logo, a link of the page's own.
+ * @slot actions - Buttons or links at the end of the row.
+ *
+ * @fires ds-header-menu - The drawer opened or closed; `detail.open` says which.
+ *
+ * Below thirty squares of width the navigation and actions fold away and a
+ * menu button (the shared word "Menu") opens them in a drawer over the page:
+ * focus stays inside it, Escape, its close button, a link or the screen
+ * widening close it, and the page holds its scroll meanwhile.
+ *
+ * @example
+ * <ds-header brand="Name" literal>
+ *   <a href="/">Home</a>
+ *   <a href="/help">Help</a>
+ *   <ds-button slot="actions" primary href="/download">Download</ds-button>
+ * </ds-header>
+ */
+export declare class Header extends LitElement {
+    static properties: {
+        brand: {
+            type: StringConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        sticky: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    brand: string | undefined;
+    href: string;
+    label: string | undefined;
+    literal: boolean;
+    sticky: boolean;
+    private drawer;
+    private readonly relabel;
+    constructor();
+    /** Whether the drawer is open. */
+    get menuOpen(): boolean;
+    /** Open the drawer (on a narrow screen, where the menu button shows). */
+    openMenu(): void;
+    /** Close the drawer. */
+    closeMenu(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private words;
+    /** Light-DOM children that fill a slot: elements, or text that is not blank. */
+    private slotted;
+    private links;
+    private onNavChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-header": Header;
+    }
+}
+//# sourceMappingURL=ds-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-header.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-header.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhF,OAAO,mBAAmB,CAAC;AAK3B,iEAAiE;AACjE,eAAO,MAAM,UAAU,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;MAMf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAExB,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAStD,kCAAkC;IAClC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,yEAAyE;IACzE,QAAQ,IAAI,IAAI;IAEhB,wBAAwB;IACxB,SAAS,IAAI,IAAI;IAEjB,iBAAiB;IAMjB,oBAAoB;IAQpB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAe/C,OAAO,CAAC,KAAK;IAKb,gFAAgF;IAChF,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,WAAW,CAGjB;IAEF,MAAM;CAwBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}