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

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"}

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

@@ -0,0 +1,143 @@
+// ds-header.ts
+// A site header: the brand, the navigation with the page you are on, and the
+// actions, folding into a drawer on a narrow screen. Drawn by 1-root/header.css,
+// the same classes a page without scripts writes, and opened by 0-face/drawer.ts.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { attachDrawer } from "../0-face/drawer";
+import { markCurrentLink } from "../0-face/header";
+import "../2-core/ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-header.css?inline";
+/** The shared word that names the menu button and its drawer. */
+export 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 class Header extends LitElement {
+    constructor() {
+        super();
+        this.drawer = null;
+        this.relabel = () => this.requestUpdate();
+        this.onNavChange = () => {
+            markCurrentLink(this.links());
+            this.requestUpdate();
+        };
+        this.href = "/";
+        this.literal = false;
+        this.sticky = false;
+    }
+    /** Whether the drawer is open. */
+    get menuOpen() {
+        return this.drawer?.isOpen ?? false;
+    }
+    /** Open the drawer (on a narrow screen, where the menu button shows). */
+    openMenu() { this.drawer?.open(); }
+    /** Close the drawer. */
+    closeMenu() { this.drawer?.close(); }
+    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);
+        this.drawer?.destroy();
+        this.drawer = null;
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        markCurrentLink(this.links());
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.drawer)
+            return;
+        const root = this.renderRoot;
+        const toggle = root.querySelector('[part="toggle"]');
+        const panel = root.querySelector('[part="drawer"]');
+        if (!toggle || !panel)
+            return;
+        this.drawer = attachDrawer({
+            toggle,
+            panel,
+            content: () => [...root.querySelectorAll(':is([part="nav"], [part="actions"]):not([hidden])')],
+            onToggle: open => this.dispatchEvent(new CustomEvent("ds-header-menu", { bubbles: true, composed: true, detail: { open } })),
+        });
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    /** Light-DOM children that fill a slot: elements, or text that is not blank. */
+    slotted(name) {
+        return [...this.childNodes].some(node => name
+            ? node instanceof Element && node.getAttribute("slot") === name
+            : node instanceof Element ? !node.hasAttribute("slot") : node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
+    }
+    links() {
+        return [...this.children].filter((child) => child instanceof HTMLAnchorElement && !child.hasAttribute("slot"));
+    }
+    render() {
+        const menu = getText(MENU_LABEL) || MENU_LABEL;
+        const close = getText("Close") || "Close";
+        const hasNav = this.slotted("");
+        const hasActions = this.slotted("actions");
+        const brand = this.slotted("brand")
+            ? html `<span class="ds-header__brand" part="brand"><slot name="brand" @slotchange=${this.relabel}></slot></span>`
+            : this.brand
+                ? html `<a class="ds-header__brand" part="brand" href=${this.href || "/"}>${this.words(this.brand)}</a>`
+                : html `<slot name="brand" @slotchange=${this.relabel}></slot>`;
+        return html `<header class="ds-header${this.sticky ? " ds-header--sticky" : ""}" part="header">
+      ${brand}
+      <nav class="ds-header__nav" part="nav" id="nav" aria-label=${this.label ? this.words(this.label) : nothing} ?hidden=${!hasNav}><slot @slotchange=${this.onNavChange}></slot></nav>
+      <div class="ds-header__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${this.relabel}></slot></div>
+      <button class="ds-button ds-button--icon ds-header__toggle" part="toggle" type="button" aria-label=${menu} aria-controls="drawer" ?hidden=${!hasNav && !hasActions}>
+        <ds-icon type="menu" size="large" aria-hidden="true"></ds-icon><ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+      </button>
+      <dialog class="ds-dialog ds-drawer" part="drawer" id="drawer" aria-label=${menu}>
+        <div class="ds-drawer__bar"><button class="ds-button ds-button--icon ds-drawer__close" part="close" type="button" aria-label=${close}>
+          <ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+        </button></div>
+      </dialog>
+    </header>`;
+    }
+}
+Header.properties = {
+    brand: { type: String },
+    href: { type: String },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+    sticky: { type: Boolean, reflect: true },
+};
+Header.styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+define("ds-header", Header);