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

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

@@ -1,23 +1,51 @@
 import { LitElement } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 import "../2-core/ds-cycle";
-/** A link in a footer column. */
+/**
+ * A line in a footer column: a link, or, without `href`, words alone (an
+ * address, a registration number). In a column with words alone its links
+ * are underlined, so they can be told from the words around them.
+ */
 export interface FooterLink {
     /** The words: a translation key, or as written with the footer's `literal`. */
     label: string;
-    href: string;
+    /** Where it leads. Without it the line is words alone. */
+    href?: string;
     /** Opens elsewhere: in a new tab, with no referrer. */
     external?: boolean;
     /** The page being read: `aria-current="page"`. */
     current?: boolean;
+    /**
+     * The link drawn as a mark, its label its accessible name: the icon file's
+     * address (`icons/instagram.svg`, as Sync 1's `icons` export copies it). A
+     * column's icon links stand first, in a row of their own, or stacked as
+     * round marks with the column's `icons: "stack"`.
+     */
+    icon?: string;
 }
-/** A footer column: a heading and its links. */
+/** How a column's icon links stand: in a row first (`row`), or stacked as round marks (`stack`). */
+export type FooterIcons = "row" | "stack";
+/** A footer column: a heading and its lines. */
 export interface FooterColumn {
     heading?: string;
+    /** The heading as a link: where it leads. */
+    href?: string;
     links: FooterLink[];
+    /** The column's width in whole squares: eight by default. */
+    width?: number;
+    /**
+     * `stack` draws its icon links as round marks one control high, one a line,
+     * the column one square wide at the end of the row; the heading then names
+     * the marks for assistive technology. `row` (the default) stands them first,
+     * in a row of their own.
+     */
+    icons?: FooterIcons;
 }
 /** 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 type FooterPreference = "language" | "theme" | "shape";
+/** A column's width in whole squares, from its `width`: eight when it is missing or not a positive number. */
+export declare function footerColumnWidth(width: unknown): number;
+/** The preferences named by an attribute: language and theme when it is present but empty. */
 export declare function footerPreferences(value: string | null | undefined): FooterPreference[];
 /**
  * @element ds-footer
@@ -25,11 +53,14 @@ export declare function footerPreferences(value: string | null | undefined): Foo
  *   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 {FooterColumn[]} columns - The columns of links or lines, eight squares each
+ *   unless a column names its `width`.
  * @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`
+ * @prop {FooterLink[]} policies - Links under the copyright (privacy, terms), each
+ *   drawn as a secondary button.
+ * @prop {string} preferences - `language`, `theme`, `shape` or several, 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.
  *
@@ -65,6 +96,9 @@ export declare class Footer extends LitElement {
         year: {
             type: NumberConstructor;
         };
+        policies: {
+            type: ArrayConstructor;
+        };
         preferences: {
             type: StringConstructor;
         };
@@ -74,6 +108,8 @@ export declare class Footer extends LitElement {
         };
     };
     static styles: import("lit").CSSResult[];
+    /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+    protected readonly cuts: CutFades;
     brand: string | undefined;
     href: string;
     tagline: string | undefined;
@@ -81,6 +117,7 @@ export declare class Footer extends LitElement {
     label: string | undefined;
     owner: string | undefined;
     year: number | undefined;
+    policies: FooterLink[];
     preferences: string | null | undefined;
     literal: boolean;
     private readonly relabel;
@@ -89,7 +126,10 @@ export declare class Footer extends LitElement {
     disconnectedCallback(): void;
     private words;
     private slotted;
+    private iconLink;
+    private anchor;
     private link;
+    private column;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +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"}
+{"version":3,"file":"ds-footer.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-footer.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAK5B;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oGAAoG;AACpG,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,CAAC;AAE1C,gDAAgD;AAChD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAK9D,8GAA8G;AAC9G,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAGxD;AAED,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,gBAAgB,EAAE,CAKtF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAC7E,yHAAyH;IACzH,SAAS,CAAC,QAAQ,CAAC,IAAI,WAA2F;IAE1G,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,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAUtD,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,MAAM;IAqBd,MAAM;CAgCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -1,22 +1,31 @@
 // 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
+// A site footer: the brand, columns of links or contact lines, round marks
+// stacked at the row's end, the language and theme, the copyright and the
+// policies under it. 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 { CutFades } from "../0-face/cut-fade";
 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. */
+const PREFERENCES = ["language", "theme", "shape"];
+/** What an empty `preferences` offers: the shape only when it is named. */
+const DEFAULT_PREFERENCES = ["language", "theme"];
+/** A column's width in whole squares, from its `width`: eight when it is missing or not a positive number. */
+export function footerColumnWidth(width) {
+    const squares = Math.round(Number(width));
+    return Number.isFinite(squares) && squares >= 1 ? squares : 8;
+}
+/** The preferences named by an attribute: language and theme 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 [...DEFAULT_PREFERENCES];
     return PREFERENCES.filter(name => named.includes(name));
 }
 /**
@@ -25,11 +34,14 @@ export function footerPreferences(value) {
  *   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 {FooterColumn[]} columns - The columns of links or lines, eight squares each
+ *   unless a column names its `width`.
  * @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`
+ * @prop {FooterLink[]} policies - Links under the copyright (privacy, terms), each
+ *   drawn as a secondary button.
+ * @prop {string} preferences - `language`, `theme`, `shape` or several, 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.
  *
@@ -45,9 +57,12 @@ export function footerPreferences(value) {
 export class Footer extends LitElement {
     constructor() {
         super();
+        /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".ds-footer__links > li > *, .ds-footer__heading > a" });
         this.relabel = () => this.requestUpdate();
         this.href = "/";
         this.columns = [];
+        this.policies = [];
         this.literal = false;
     }
     connectedCallback() {
@@ -68,9 +83,36 @@ export class Footer extends LitElement {
     slotted(name) {
         return [...this.children].some(node => node.getAttribute("slot") === name);
     }
+    iconLink(link) {
+        return html `<li><a href=${link.href} aria-label=${this.words(link.label)} aria-current=${link.current ? "page" : nothing}
+      target=${link.external ? "_blank" : nothing} rel=${link.external ? "noopener noreferrer" : nothing}><span class="ds-icon" aria-hidden="true" style=${`--ds-icon: url("${link.icon}")`}></span></a></li>`;
+    }
+    anchor(link, className) {
+        return html `<a class=${className ?? nothing} 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>`;
+    }
     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>`;
+        return html `<li>${link.href ? this.anchor(link) : html `<span>${this.words(link.label)}</span>`}</li>`;
+    }
+    column(column) {
+        const stack = column.icons === "stack";
+        const icons = column.links.filter(link => link.icon && link.href);
+        const lines = column.links.filter(link => !(link.icon && link.href));
+        const width = footerColumnWidth(column.width);
+        const heading = column.heading ? this.words(column.heading) : "";
+        if (stack) {
+            return html `<div class="ds-footer__column ds-footer__column--stack" part="column">
+        <ul class="ds-footer__icons" part="icons" aria-label=${heading || nothing}>${icons.map(link => this.iconLink(link))}</ul>
+        ${lines.length ? html `<ul class="ds-footer__links">${lines.map(link => this.link(link))}</ul>` : nothing}
+      </div>`;
+        }
+        return html `<div class="ds-footer__column" part="column" style=${width === 8 ? nothing : `--ds-footer-column-width: ${width}`}>
+      ${heading
+            ? html `<h2 class="ds-footer__heading" part="heading">${column.href ? html `<a href=${column.href}>${heading}</a>` : heading}</h2>`
+            : nothing}
+      ${icons.length ? html `<ul class="ds-footer__icons" part="icons">${icons.map(link => this.iconLink(link))}</ul>` : nothing}
+      <ul class="ds-footer__links">${lines.map(link => this.link(link))}</ul>
+    </div>`;
     }
     render() {
         const columns = (Array.isArray(this.columns) ? this.columns : []).filter(column => column && Array.isArray(column.links));
@@ -80,10 +122,8 @@ export class Footer extends LitElement {
         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>`);
+        const policies = (Array.isArray(this.policies) ? this.policies : []).filter(link => link && link.href);
+        const list = columns.map(column => this.column(column));
         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>
@@ -96,8 +136,11 @@ export class Footer extends LitElement {
             : 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>
+        ${policies.length
+            ? html `<ul class="ds-footer__policies" part="policies">${policies.map(link => html `<li>${this.anchor(link, "ds-button ds-button--secondary")}</li>`)}</ul>`
+            : nothing}
         <div class="ds-footer__preferences" part="preferences" ?hidden=${!hasPreferences}>
-          ${preferences.map(type => html `<ds-cycle type=${type}></ds-cycle>`)}
+          ${preferences.map(type => html `<ds-cycle type=${type} label=${type === "shape" ? "Shape" : nothing}></ds-cycle>`)}
           <slot name="preferences" @slotchange=${this.relabel}></slot>
         </div>
       </div>
@@ -112,6 +155,7 @@ Footer.properties = {
     label: { type: String },
     owner: { type: String },
     year: { type: Number },
+    policies: { type: Array },
     preferences: { type: String },
     literal: { type: Boolean, reflect: true },
 };

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

@@ -9,6 +9,7 @@ export declare const MENU_LABEL = "Menu";
  * @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 {"site" | "app"} variant - Site navigation or a compact app title bar.
  * @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
@@ -32,6 +33,10 @@ export declare const MENU_LABEL = "Menu";
  */
 export declare class Header extends LitElement {
     static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         brand: {
             type: StringConstructor;
         };
@@ -51,6 +56,7 @@ export declare class Header extends LitElement {
         };
     };
     static styles: import("lit").CSSResult[];
+    variant: "site" | "app";
     brand: string | undefined;
     href: string;
     label: string | undefined;

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;MAOf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;IACxB,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;;IAUtD,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

@@ -20,6 +20,7 @@ export const MENU_LABEL = "Menu";
  * @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 {"site" | "app"} variant - Site navigation or a compact app title bar.
  * @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
@@ -50,6 +51,7 @@ export class Header extends LitElement {
             markCurrentLink(this.links());
             this.requestUpdate();
         };
+        this.variant = "site";
         this.href = "/";
         this.literal = false;
         this.sticky = false;
@@ -117,7 +119,7 @@ export class Header extends LitElement {
             : 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">
+        return html `<header class="ds-header${this.variant === "app" ? " ds-header--app" : ""}${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>
@@ -133,6 +135,7 @@ export class Header extends LitElement {
     }
 }
 Header.properties = {
+    variant: { type: String, reflect: true },
     brand: { type: String },
     href: { type: String },
     label: { type: String },

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

@@ -17,7 +17,7 @@ export type OverlayCloseReason = "escape" | "backdrop" | "outside" | "button" |
  * `<dialog>` that keeps forms and accessible ID references together. The
  * browser owns the top layer, inert background and modal focus navigation.
  * Listen to ds-close-request and preventDefault to control whether it closes.
- * `type` says what it is: a `modal` in the centre (the default), a `sheet`
+ * `type` says what it is: a `modal` in the centre (the default; a sheet on a phone), a `sheet`
  * from the foot of the screen, a `drawer` at the `side` `"end"` (the default)
  * or `"start"`, a `popover` at the `anchor` point, or the whole `screen`. A
  * sheet and a drawer slide in and out and a finger swipes them away (reason
@@ -100,7 +100,7 @@ export declare class Overlay extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
-    /** Its type as it is drawn: an unknown one is a modal. */
+    /** Its type as it is drawn: an unknown one is a modal, and a modal on a phone is a sheet (Joachim, 20 October 2026: no modals on a phone at all). */
     get kind(): OverlayType;
     /** A modeless overlay leaves the page live: a popover always, any other with `non-modal`. */
     get modeless(): boolean;

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

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

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

@@ -10,6 +10,8 @@ import placementStyles from "../1-root/overlay.css?inline";
 import metrics from "../1-root/component-metrics.css?inline";
 const dialogStyles = `${frameStyles}\n${placementStyles}`;
 const TYPES = new Set(["modal", "sheet", "drawer", "popover", "screen"]);
+/** A phone's width, as `0-face/grid.ts` reads it. */
+const onPhone = () => typeof matchMedia === "function" && matchMedia("(max-width: 768px)").matches;
 const openDialogs = new WeakMap();
 const scrollStyles = new WeakMap();
 /** One owner per declaration, including mixed modal and stationary panels. */
@@ -68,7 +70,7 @@ function styleRoot(root) {
  * `<dialog>` that keeps forms and accessible ID references together. The
  * browser owns the top layer, inert background and modal focus navigation.
  * Listen to ds-close-request and preventDefault to control whether it closes.
- * `type` says what it is: a `modal` in the centre (the default), a `sheet`
+ * `type` says what it is: a `modal` in the centre (the default; a sheet on a phone), a `sheet`
  * from the foot of the screen, a `drawer` at the `side` `"end"` (the default)
  * or `"start"`, a `popover` at the `anchor` point, or the whole `screen`. A
  * sheet and a drawer slide in and out and a finger swipes them away (reason
@@ -202,8 +204,11 @@ export class Overlay extends LitElement {
         super.disconnectedCallback();
     }
     updated() { this.syncType(); this.syncOpen(); this.place(); }
-    /** Its type as it is drawn: an unknown one is a modal. */
-    get kind() { return TYPES.has(this.type) ? this.type : "modal"; }
+    /** Its type as it is drawn: an unknown one is a modal, and a modal on a phone is a sheet (Joachim, 20 October 2026: no modals on a phone at all). */
+    get kind() {
+        const type = TYPES.has(this.type) ? this.type : "modal";
+        return type === "modal" && onPhone() ? "sheet" : type;
+    }
     /** A modeless overlay leaves the page live: a popover always, any other with `non-modal`. */
     get modeless() { return this.nonModal || this.kind === "popover"; }
     /** The edge it comes from and a finger swipes it back to. */

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

@@ -12,6 +12,9 @@ export declare const PAGE_LAYOUTS: readonly PageLayout[];
  * - `slot="aside"` is the trailing column, shown by `inspector`
  * - `slot="footer"` runs along the bottom of the main area
  *
+ * The main area is the document's main landmark (`role="main"`), unless the
+ * page stands inside a `<main>` or another page, or is given a `<main>` itself.
+ *
  * Columns are whole squares: `sidebar` and `inspector` lead with 12, `split`
  * with 16; `column` is 32 wide and `centered` 16, and `measure` sets either in
  * whole squares. A centred column stands on a whole square: the room beside it
@@ -72,6 +75,9 @@ export declare class Page extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        landmark: {
+            state: boolean;
+        };
     };
     layout: PageLayout;
     divided: boolean;
@@ -80,10 +86,16 @@ export declare class Page extends LitElement {
     view: boolean;
     drawer: boolean;
     drawerLabel: string | undefined;
+    private landmark;
     static styles: import("lit").CSSResult[];
     private navigationDrawer;
     private readonly relabel;
     constructor();
+    /**
+     * The main area is the page's main landmark, unless the page stands inside
+     * one (or inside another page) or is given its own `<main>`.
+     */
+    private readonly syncLandmark;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Whether the navigation drawer is open. */

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

@@ -1 +1 @@
-{"version":3,"file":"ds-page.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvE,OAAO,mBAAmB,CAAC;AAI3B,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC7F,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAAqE,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;IAEM,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAExC,MAAM,CAAC,MAAM,4BAA4C;IAEzD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAWtD,iBAAiB;IAMjB,oBAAoB;IAQpB,6CAA6C;IAC7C,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,mEAAmE;IACnE,UAAU,IAAI,IAAI;IAElB,mCAAmC;IACnC,WAAW,IAAI,IAAI;IAEnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAmB/C,MAAM;IAwBN,YAAY;CAQb;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGnF;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-page.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvE,OAAO,mBAAmB,CAAC;AAM3B,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC7F,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAAqE,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MASf;IAEM,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAgB,QAAQ,CAAU;IAElC,MAAM,CAAC,MAAM,4BAA4C;IAEzD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAYtD;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,iBAAiB;IAOjB,oBAAoB;IAQpB,6CAA6C;IAC7C,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,mEAAmE;IACnE,UAAU,IAAI,IAAI;IAElB,mCAAmC;IACnC,WAAW,IAAI,IAAI;IAEnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAmB/C,MAAM;IAwBN,YAAY;CASb;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGnF;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -6,6 +6,7 @@ import { getText } from "../0-face/i18n";
 import "../2-core/ds-icon";
 import controls from "../1-root/controls.css?inline";
 import styles from "./styles/ds-page.css?inline";
+const MAIN = "main, [role='main']";
 export const PAGE_LAYOUTS = ["sidebar", "split", "inspector", "column", "centered", "tiles"];
 /**
  * A standard page: where units stand on the grid. Every layout uses the same
@@ -17,6 +18,9 @@ export const PAGE_LAYOUTS = ["sidebar", "split", "inspector", "column", "centere
  * - `slot="aside"` is the trailing column, shown by `inspector`
  * - `slot="footer"` runs along the bottom of the main area
  *
+ * The main area is the document's main landmark (`role="main"`), unless the
+ * page stands inside a `<main>` or another page, or is given a `<main>` itself.
+ *
  * Columns are whole squares: `sidebar` and `inspector` lead with 12, `split`
  * with 16; `column` is 32 wide and `centered` 16, and `measure` sets either in
  * whole squares. A centred column stands on a whole square: the room beside it
@@ -52,14 +56,26 @@ export class Page extends LitElement {
         super();
         this.navigationDrawer = null;
         this.relabel = () => this.requestUpdate();
+        /**
+         * The main area is the page's main landmark, unless the page stands inside
+         * one (or inside another page) or is given its own `<main>`.
+         */
+        this.syncLandmark = () => {
+            const slot = this.renderRoot?.querySelector?.("slot:not([name])");
+            const given = slot?.assignedElements({ flatten: true }).some(element => element.matches(MAIN) || !!element.querySelector(MAIN));
+            const inside = !!this.parentElement?.closest(`${MAIN}, ds-page`);
+            this.landmark = !given && !inside;
+        };
         this.layout = "sidebar";
         this.divided = false;
         this.fill = false;
         this.view = false;
         this.drawer = false;
+        this.landmark = true;
     }
     connectedCallback() {
         super.connectedCallback();
+        this.syncLandmark();
         window.addEventListener("language-changed", this.relabel);
         window.addEventListener("translations-loaded", this.relabel);
     }
@@ -115,7 +131,7 @@ export class Page extends LitElement {
         </dialog>
         <div class="area nav" part="nav" data-area="nav"><slot name="nav"></slot></div>
         <div class="area header" part="header" data-area="header"><slot name="header"></slot></div>
-        <div class="area main" part="main" data-area="main"><slot></slot></div>
+        <div class="area main" part="main" data-area="main" role=${ifDefined(this.landmark ? "main" : undefined)}><slot @slotchange=${this.syncLandmark}></slot></div>
         <div class="area aside" part="aside" data-area="aside"><slot name="aside"></slot></div>
         <div class="area footer" part="footer" data-area="footer"><slot name="footer"></slot></div>
       </div>
@@ -128,6 +144,7 @@ export class Page extends LitElement {
             slot.addEventListener("slotchange", sync);
             sync();
         });
+        this.syncLandmark();
     }
 }
 Page.properties = {
@@ -138,6 +155,7 @@ Page.properties = {
     view: { type: Boolean, reflect: true },
     drawer: { type: Boolean, reflect: true },
     drawerLabel: { type: String, attribute: "drawer-label" },
+    landmark: { state: true },
 };
 Page.styles = [unsafeCSS(controls), unsafeCSS(styles)];
 /**

package/dist/4-page/email.d.ts

@@ -22,6 +22,8 @@ export interface EmailFrameOptions {
     language?: string;
     fontUrl?: string;
     wideLabel?: boolean;
+    /** Plain paper with a wider reading column, without visible grid ruling. */
+    plain?: boolean;
     /** Trusted HTML from a template renderer, never raw user input. */
     headerHtml?: string;
     beforeHeaderHtml?: string;

package/dist/4-page/email.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../DS1/4-page/email.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,GAAG,YAAY,CAAA;AAE5B,eAAO,MAAM,IAAI,6DAA6D,CAAA;AAC9E,eAAO,MAAM,SAAS,0LAAwI,CAAA;AAe9J,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAYhD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,MAAM,CAER;AA2DD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAqB3E;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAE,CAAC,GAAG,EAAE,GAAG,EAAO,GAAG,MAAM,CAGpE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,iBAAiB,GAAG;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE;;;;EAS5I"}
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../DS1/4-page/email.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,GAAG,YAAY,CAAA;AAE5B,eAAO,MAAM,IAAI,6DAA6D,CAAA;AAC9E,eAAO,MAAM,SAAS,0LAAwI,CAAA;AAe9J,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAYhD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,MAAM,CAER;AA2DD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAsB3E;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAE,CAAC,GAAG,EAAE,GAAG,EAAO,GAAG,MAAM,CAGpE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,iBAAiB,GAAG;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE;;;;EAS5I"}

package/dist/4-page/email.js

@@ -94,11 +94,12 @@ const darkStyles = `
 /** Rows are trusted template HTML. Escape every interpolated user value. */
 export function emailFrame(options, body) {
     const { product, homeUrl, title, preheader = '', language = 'en', fontUrl, wideLabel = false, headerHtml, beforeHeaderHtml = '', brandStyles = '' } = options;
+    const plain = options.plain === true;
     return `<!doctype html>
 <html lang="${escapeHtml(language)}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="light dark"><meta name="supported-color-schemes" content="light dark"><title>${escapeHtml(title)}</title>
 <style>
-${responsiveStyles}
-${darkStyles}
+${plain ? `@media screen and (max-width:700px) {.ds-email-page {width:100% !important;max-width:480px !important;}.ds-email-outer {padding:40px 20px !important;}}` : responsiveStyles}
+${plain ? `@media (prefers-color-scheme:dark) {.ds-email-paper {background-color:#171717 !important;}.ds-email-type {color:#eeeeee !important;}}` : darkStyles}
 ${fontUrl ? `@font-face { font-family:'GT-America-Standard-Regular'; src:url('${escapeHtml(fontUrl)}') format('woff2'); font-weight:400; font-style:normal; mso-font-alt:Arial; }` : ''}
 ${brandStyles}
 </style>
@@ -106,8 +107,8 @@ ${brandStyles}
 </head>
 <body class="ds-email-type" style="margin:0;padding:0;background-color:#ffffff;${emailType};-webkit-text-size-adjust:100%">
 ${preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;mso-hide:all">${escapeHtml(preheader)}</div>` : ''}
-<table class="ds-email-paper ds-email-type" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="min-height:640px;background-color:#ffffff;background-image:${grid};background-size:20px 100%,100% calc(100% - 28px);background-position:${gridPosition};background-repeat:repeat-x,no-repeat;${emailType}"><tr><td class="ds-email-outer" align="center" valign="top" style="padding:28px 20px 20px">
-<table class="ds-email-page ds-email-type" role="presentation" width="240" cellpadding="0" cellspacing="0" style="width:240px;table-layout:fixed;border-collapse:collapse;${emailType}">
+<table class="ds-email-paper ds-email-type" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${plain ? 'background-color:#ffffff;' : `min-height:640px;background-color:#ffffff;background-image:${grid};background-size:20px 100%,100% calc(100% - 28px);background-position:${gridPosition};background-repeat:repeat-x,no-repeat;`}${emailType}"><tr><td class="ds-email-outer" align="center" valign="top" style="padding:${plain ? '40px 20px' : '28px 20px 20px'}">
+<table class="ds-email-page ds-email-type" role="presentation" width="${plain ? 480 : 240}" cellpadding="0" cellspacing="0" style="width:${plain ? 480 : 240}px;max-width:100%;table-layout:fixed;border-collapse:collapse;${emailType}">
 ${beforeHeaderHtml}
 ${headerHtml ?? `<tr><td class="ds-email-cell-row" align="right" height="20" style="height:20px;padding:0;font-size:0;line-height:0"><a href="${escapeHtml(homeUrl)}" class="ds-email-cell ds-email-cell-label${wideLabel ? ' ds-email-cell-wide' : ''}" style="text-decoration:none;position:relative;display:block;margin-left:auto;box-sizing:border-box;width:${wideLabel ? 160 : 80}px;height:20px;border:0;background:#e6e6e6;font-family:${font};font-size:14px;line-height:20px;mso-line-height-rule:exactly;font-weight:400;letter-spacing:normal;color:#797979;text-align:left"><span class="ds-email-cell-ink" style="display:block;box-sizing:border-box;padding:0 4px;white-space:nowrap;overflow:hidden">${escapeHtml(product)}</span></a></td></tr>`}
 ${body}