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

package/DS1/0-face/app-banner.ts

@@ -0,0 +1,148 @@
+// app-banner.ts
+// Where a banner leading to a site's iPhone app shows, and what its Open does.
+// `<ds-message form="app">` uses it, and a page without Lit calls
+// `startAppBanners()` for every `.ds-notice--app` block it wrote.
+//
+// On a phone or tablet running iOS, Safari draws Apple's own Smart App Banner
+// from `<meta name="apple-itunes-app">`, so the page draws nothing there; in
+// another iOS browser (Chrome, Firefox, Edge…) the page draws Design system
+// 1's banner. Never on a computer, an Android phone, a page opened from the
+// home screen or an app's own web view, and never again once closed in this
+// browser.
+
+import { detectMobileDevice } from "./scaling";
+
+export interface AppBannerOptions {
+  /** The app's App Store id, the digits after `id` in its store address. */
+  appId?: string;
+  /** The app's store address; `https://apps.apple.com/app/id<appId>` by default. */
+  appUrl?: string;
+  /** The address that opens the app at this page: a universal link or the app's own scheme. */
+  open?: string;
+  /** What remembers the close in this browser; one key per app by default. */
+  key?: string;
+}
+
+/** `safari`: Apple's banner from the meta tag; `drawn`: the page's own; `none`: nothing. */
+export type AppBannerPlacement = "safari" | "drawn" | "none";
+
+export interface AppBannerDevice {
+  userAgent: string;
+  touchPoints: number;
+  /** A phone or tablet, as the scale reads it. */
+  mobile: boolean;
+  /** Opened from the home screen. */
+  standalone: boolean;
+}
+
+/** iOS's other browsers, each with Safari's engine and its own token. */
+const OTHER_BROWSERS = /CriOS|FxiOS|EdgiOS|OPiOS|OPT\/|GSA\/|DuckDuckGo|Ddg\/|YaBrowser|Focus\/|Brave\//;
+
+export function appBannerDevice(): AppBannerDevice {
+  if (typeof navigator === "undefined" || typeof window === "undefined") return { userAgent: "", touchPoints: 0, mobile: false, standalone: false };
+  const standalone = Boolean((navigator as Navigator & { standalone?: boolean }).standalone)
+    || Boolean(window.matchMedia?.("(display-mode: standalone)").matches);
+  return { userAgent: navigator.userAgent || "", touchPoints: navigator.maxTouchPoints || 0, mobile: detectMobileDevice(), standalone };
+}
+
+/** An iPhone, iPod or iPad, including an iPad that asks for the desktop site. */
+export function isAppleMobile({ userAgent, touchPoints }: Pick<AppBannerDevice, "userAgent" | "touchPoints">): boolean {
+  return /iPhone|iPad|iPod/.test(userAgent) || (/Macintosh/.test(userAgent) && touchPoints > 1);
+}
+
+/**
+ * Safari, another browser, or an app's web view. A web view's agent has no
+ * `Safari/` token (Safari's view controller and sign-in sheet keep it).
+ */
+export function appleBrowser(userAgent: string): "safari" | "other" | "webview" {
+  if (OTHER_BROWSERS.test(userAgent)) return "other";
+  return /Safari\//.test(userAgent) ? "safari" : "webview";
+}
+
+export function appBannerKey(options: AppBannerOptions): string {
+  return options.key || `ds-app-banner:${options.appId || options.appUrl || options.open || ""}`;
+}
+
+export function appStoreUrl(options: AppBannerOptions): string {
+  return options.appUrl || (options.appId ? `https://apps.apple.com/app/id${options.appId}` : "");
+}
+
+export function isAppBannerClosed(options: AppBannerOptions): boolean {
+  try { return localStorage.getItem(appBannerKey(options)) === "closed"; } catch { return false; }
+}
+
+/** Remembers the close in this browser, so the banner never comes back here. */
+export function closeAppBanner(options: AppBannerOptions): void {
+  try { localStorage.setItem(appBannerKey(options), "closed"); } catch { /* private mode keeps it for the page */ }
+}
+
+/**
+ * Where the banner shows on this device. Safari takes Apple's banner only
+ * when there is an App Store id for its meta tag; without one it draws the
+ * page's own, like the other browsers.
+ */
+export function appBannerPlacement(options: AppBannerOptions, device: AppBannerDevice = appBannerDevice()): AppBannerPlacement {
+  if (!appStoreUrl(options) && !options.open) return "none";
+  if (!device.mobile || device.standalone || !isAppleMobile(device)) return "none";
+  const browser = appleBrowser(device.userAgent);
+  if (browser === "webview") return "none";
+  if (browser === "safari" && options.appId) return "safari";
+  return isAppBannerClosed(options) ? "none" : "drawn";
+}
+
+/**
+ * Writes Apple's `<meta name="apple-itunes-app">` when the page has none.
+ * Safari reads it as the page loads, so a page that knows its app writes the
+ * tag in its own head; this is the fallback for one that did not.
+ */
+export function ensureSmartAppBanner(options: AppBannerOptions): void {
+  if (typeof document === "undefined" || !options.appId) return;
+  if (document.head.querySelector('meta[name="apple-itunes-app"]')) return;
+  const meta = document.createElement("meta");
+  meta.name = "apple-itunes-app";
+  meta.content = [`app-id=${options.appId}`, options.open ? `app-argument=${options.open}` : ""].filter(Boolean).join(", ");
+  document.head.appendChild(meta);
+}
+
+/**
+ * Opens the app: the deep link first, then the App Store when the page is
+ * still in view a moment later (the app was not there to take it). Without a
+ * deep link, the store, which offers Open when the app is installed.
+ */
+export function openApp(options: AppBannerOptions, wait = 1500): void {
+  const store = appStoreUrl(options);
+  if (!options.open) { if (store) location.href = store; return; }
+  location.href = options.open;
+  if (!store) return;
+  const timer = window.setTimeout(() => { if (document.visibilityState === "visible") location.href = store; }, wait);
+  const left = () => { window.clearTimeout(timer); document.removeEventListener("visibilitychange", left); window.removeEventListener("pagehide", left); };
+  document.addEventListener("visibilitychange", left);
+  window.addEventListener("pagehide", left);
+}
+
+/**
+ * Puts every `.ds-notice--app` block on the page in place: hides it unless
+ * this device draws it, writes the meta tag for Safari, and wires its Open
+ * link (`.ds-notice__open`) and close button (`.ds-notice__dismiss`). The
+ * block names its app in `data-app-id`, `data-app-url`, `data-open` and
+ * optionally `data-remember`. Returns a function that unwires them.
+ */
+export function startAppBanners(root: ParentNode = document): () => void {
+  const undo: (() => void)[] = [];
+  for (const block of root.querySelectorAll<HTMLElement>(".ds-notice--app")) {
+    const options: AppBannerOptions = { appId: block.dataset.appId, appUrl: block.dataset.appUrl, open: block.dataset.open, key: block.dataset.remember };
+    const placement = appBannerPlacement(options);
+    if (placement === "safari") ensureSmartAppBanner(options);
+    block.hidden = placement !== "drawn";
+    if (block.hidden) continue;
+    const link = block.querySelector<HTMLAnchorElement>(".ds-notice__open");
+    const close = block.querySelector<HTMLButtonElement>(".ds-notice__dismiss");
+    if (link && !link.getAttribute("href")) link.href = appStoreUrl(options);
+    const onOpen = (event: MouseEvent) => { if (!options.open) return; event.preventDefault(); openApp(options); };
+    const onClose = () => { closeAppBanner(options); block.hidden = true; };
+    link?.addEventListener("click", onOpen);
+    close?.addEventListener("click", onClose);
+    undo.push(() => { link?.removeEventListener("click", onOpen); close?.removeEventListener("click", onClose); });
+  }
+  return () => undo.forEach(fn => fn());
+}

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.18 */
+/* version 0.3.0-alpha.20 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/context.css

@@ -4,9 +4,9 @@
  * `.ds-context` is the `ds-context` element's look on a native menu, for a page
  * without Lit or a menu a library draws: Ezo's gap face. The rows carry the
  * colour and the menu only cuts the outer silhouette, so the page shows
- * through a pixel between rows and two between groups. The ink is the rows'
- * fill and the paper their words, turned over with the theme as the tooltip
- * is. Every row is 19px with the pixel under it, a square's pitch, its words
+ * through a pixel between rows and two between groups. The rows are black
+ * with white words in both themes, as Ezo's menus always were (the slate in
+ * dark, darker than the page). Every row is 19px with the pixel under it, a square's pitch, its words
  * on the sixteen and an icon at its end. A Select's menu is the light face,
  * `.ds-menu`; a Context's is this dark one.
  *
@@ -28,10 +28,11 @@
 
 .ds-context {
   --ds-context-row: calc(var(--ds-row-height) - 1px);
-  --ds-context-fill: light-dark(var(--ds-black, #1e1e1e), var(--ds-white, #ffffff));
-  --ds-context-ink: light-dark(var(--ds-white, #ffffff), var(--ds-black, #1e1e1e));
+  /* Black in both themes, as Ezo's menus always were: in dark the slate, darker than the page. */
+  --ds-context-fill: light-dark(var(--ds-black, #2a2a2a), var(--ds-slate, #1e1e1e));
+  --ds-context-ink: var(--ds-white, #ffffff);
   --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));
-  --ds-context-danger: light-dark(var(--ds-tuned-red), var(--ds-red-for-blood));
+  --ds-context-danger: var(--ds-tuned-red);
   --ds-context-refused: var(--ds-tuned-red);
   box-sizing: border-box;
   display: flex;

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.18 */
+/* version 0.3.0-alpha.20 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/notice.css

@@ -21,6 +21,14 @@
  *   ds-notice--banner               a strip across the top of its positioning
  *                                   context instead: one square high, filled in
  *                                   the tone's colour, everything on one line
+ *   ds-notice--app                  a row at the top of the page leading to the
+ *                                   site's iPhone app: its picture
+ *                                   (ds-notice__picture, two squares), its name
+ *                                   and one line about it, Open
+ *                                   (a.ds-notice__open) and the close; three
+ *                                   squares high with a hairline at its foot.
+ *                                   startAppBanners() from 0-face/app-banner.ts
+ *                                   shows it only where it belongs
  *
  * Give the block role="status", or role="alert" for danger, so assistive
  * technology reads it when it appears.
@@ -163,3 +171,76 @@
   margin-block: 0;
   margin-inline-start: 0;
 }
+
+/* The app banner: a row at the top of the page, in the flow, three squares
+   high: half a square above and below two squares of content, a hairline at
+   its foot. The app's picture fills two squares with a picture's corners; the
+   name and the line about it take a square each, on the sixteen; Open and the
+   close stand on the sixteen of the square in the middle of the two. */
+.ds-notice--app {
+  grid-template-columns: calc(2 * var(--ds-unit)) minmax(0, 1fr) auto var(--ds-unit);
+  grid-template-rows: var(--ds-unit) var(--ds-unit);
+  column-gap: calc(var(--ds-unit) / 2);
+  align-items: end;
+  padding: calc(var(--ds-unit) / 2) var(--ds-unit);
+  background: var(--ds-paper);
+  box-shadow: inset 0 -1px 0 var(--ds-border-color);
+  line-height: var(--ds-type-lineheight-default);
+}
+
+.ds-notice--app[hidden] {
+  display: none;
+}
+
+.ds-notice__picture {
+  box-sizing: border-box;
+  grid-column: 1;
+  grid-row: 1 / 3;
+  align-self: stretch;
+  overflow: hidden;
+  border-radius: var(--ds-radius);
+  background: var(--ds-fill);
+  outline: 1px solid var(--ds-border-color);
+  outline-offset: -1px;
+}
+
+.ds-notice__picture img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ds-notice--app .ds-notice__title,
+.ds-notice--app .ds-notice__text {
+  grid-column: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-notice--app .ds-notice__title { grid-row: 1; }
+
+.ds-notice--app .ds-notice__text {
+  grid-row: 2;
+  color: var(--ds-text-color-muted);
+}
+
+/* Open and the close: their square starts half a square into the two, its
+   control on the lower sixteen of it. */
+.ds-notice--app .ds-notice__open,
+.ds-notice--app .ds-notice__dismiss {
+  grid-row: 1 / 3;
+  align-self: start;
+  margin: calc(1.5 * var(--ds-unit) - var(--ds-control-height)) 0 0;
+}
+
+.ds-notice--app .ds-notice__open {
+  grid-column: 3;
+  text-decoration: none;
+}
+
+.ds-notice--app .ds-notice__dismiss {
+  grid-column: 4;
+  justify-self: end;
+}

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.18 */
+/* version 0.3.0-alpha.20 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.18 */
+/* DS1 — version 0.3.0-alpha.20 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

package/DS1/1-root/row.css

@@ -137,7 +137,9 @@ button.ds-row {
  * row's content (Joachim, 19 October 2026). On a one-square row it is a square high and sits two
  * pixels around what the row holds: from two above the lower sixteen to two below the row's foot,
  * and two past the content at each side, its corners the icon tiles' 4px and those two more, so a
- * 16px icon stands in it with two all round. A taller row (a stacked tile, `auto`) is filled whole.
+ * 16px icon stands in it with two all round. It is drawn over the row, never moving its words or
+ * icons off the grid. An open row (`data-open`) wears the same layer. A taller row (a stacked
+ * tile, `auto`) is filled whole.
  * Tokens: `--ds-row-fill-radius` (6px), `--ds-row-fill-overhang` (2px).
  */
 a.ds-row,
@@ -349,6 +351,13 @@ button.ds-row[aria-disabled="true"]:hover::after {
   border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));
   background: var(--ds-row-fill-current, var(--ds-fill-hover));
 }
+/* A plain row (no press target inside) has no padding of its own: its words and icons stand on
+   the row's edges, so the layer reaches two past them, as a flush row's does. */
+.ds-row[data-open]:not([data-open="false"]):not(a, button, .ds-row--stacked, .ds-row--auto, :has(.ds-row__target))::after {
+  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+}
 .ds-row[data-open]:is(.ds-row--stacked, .ds-row--auto)::after { inset: 0; }
 @media (forced-colors: active) {
   .ds-row[data-open]:not([data-open="false"])::after { outline: 1px solid Highlight; outline-offset: -1px; }

package/DS1/1-root/table.css

@@ -16,6 +16,14 @@
  *   <th colspan="2">                       a column group, in a header row
  *   <th scope="rowgroup">                  a row group, a heading row in grey
  *   <td aria-selected="true">              a selected cell
+ *
+ * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by
+ * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px
+ * in on the sixteen, as an Ezo item's are. Column letters and the row numbers
+ * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place
+ * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table
+ * `--ds-table-columns` (the number of data columns) and the scroll a height
+ * with `--ds-table-height`.
  */
 
 .ds-table {
@@ -121,3 +129,72 @@
     color: HighlightText;
   }
 }
+
+/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */
+.ds-table[data-sheet] {
+  --ds-table-cell: calc(4 * var(--ds-table-row));
+  --ds-table-index: calc(2 * var(--ds-table-row));
+  --ds-table-text: calc(4px * var(--ds-sf, 1));
+  table-layout: fixed;
+  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));
+  min-width: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.ds-table-scroll > .ds-table[data-sheet] {
+  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));
+  min-width: 0;
+}
+.ds-table[data-sheet] :is(th, td) {
+  width: var(--ds-table-cell);
+  max-width: var(--ds-table-cell);
+  height: var(--ds-table-row);
+  padding: 0 var(--ds-table-text);
+  border-bottom: 1px solid var(--ds-table-rule);
+  border-inline-end: 1px solid var(--ds-table-rule);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-table[data-sheet] :is(th, td):last-child {
+  padding-inline-end: var(--ds-table-text);
+}
+.ds-table[data-sheet] .ds-table__number {
+  width: var(--ds-table-index);
+  max-width: var(--ds-table-index);
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  background: var(--ds-table-paper);
+  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.ds-table[data-sheet] thead :is(th, td) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--ds-table-paper);
+}
+.ds-table[data-sheet] thead tr + tr :is(th, td) {
+  top: var(--ds-table-row);
+}
+.ds-table[data-sheet] thead .ds-table__number {
+  z-index: 3;
+}
+.ds-table[data-sheet] .ds-table__letters td {
+  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  text-align: center;
+}
+.ds-table[data-sheet] tbody td:not([data-numeric]) {
+  color: inherit;
+}
+.ds-table[data-sheet] [aria-selected="true"] {
+  background: transparent;
+  color: inherit;
+  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);
+}
+.ds-table-scroll:has(> .ds-table[data-sheet]) {
+  max-height: var(--ds-table-height, none);
+  overflow: auto;
+  overscroll-behavior: contain;
+}

package/DS1/2-core/ds-message.ts

@@ -1,8 +1,9 @@
 // ds-message.ts
 // An inline notice in the flow of the page: a tone, a title and/or text,
 // actions and an optional dismiss; with `banner`, a strip across the top of
-// its positioning context instead. Drawn by 1-root/notice.css, the same
-// classes a page without scripts writes.
+// its positioning context instead; with `form="app"`, a row at the top of the
+// page leading to the site's iPhone app (0-face/app-banner.ts decides where).
+// Drawn by 1-root/notice.css, the same classes a page without scripts writes.
 
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { getText } from "../0-face/i18n";
@@ -10,9 +11,10 @@ import { define } from "../0-face/define";
 import "./ds-icon";
 import "./ds-toast";
 import type { ToastPosition } from "../0-face/toast-queue";
+import { appBannerPlacement, appStoreUrl, closeAppBanner, ensureSmartAppBanner, openApp, type AppBannerOptions, type AppBannerPlacement } from "../0-face/app-banner";
 export { toast as message } from "../0-face/toast-queue";
 export type { ToastOptions as MessageOptions, ToastId as MessageId } from "../0-face/toast-queue";
-export type MessageForm = "inline" | "banner" | "toast" | "assistant";
+export type MessageForm = "inline" | "banner" | "toast" | "assistant" | "app";
 import metrics from "../1-root/component-metrics.css?inline";
 import controls from "../1-root/controls.css?inline";
 import styles from "./styles/ds-notice.css?inline";
@@ -42,6 +44,19 @@ export interface MessageDismissDetail { tone: MessageTone }
  * @prop {boolean} banner - A strip one square high across the top of its
  *   positioning context, filled in the tone's colour, its words, actions and
  *   close button on one line; it reserves no room in the flow.
+ * @prop {string} form - `inline` (the default), `banner`, `toast`,
+ *   `assistant`, or `app`: a row at the top of the page leading to the site's
+ *   iPhone app, with its picture, `heading` (the app's name), `text` (one
+ *   line about it), Open and a close. On iOS Safari it draws nothing and puts
+ *   Apple's Smart App Banner on instead; in iOS's other browsers it draws
+ *   itself; never on a computer, Android, from the home screen or in a web
+ *   view; once closed, never again in this browser.
+ * @prop {string} src - (app) The app's icon.
+ * @prop {string} app-id - (app) The App Store id, for Apple's banner and the store address.
+ * @prop {string} app-url - (app) The store address, when it is not the App Store's own.
+ * @prop {string} open - (app) The address that opens the app at this page.
+ * @prop {string} remember - (app) The name the close is remembered by; one per app by default.
+ * @prop {boolean} preview - (app) Draw it on any device, for documentation.
  *
  * @slot - The text, when it needs more than words: a link, a strong word.
  * @slot heading - The title, as inline content.
@@ -79,6 +94,12 @@ export class Message extends LitElement {
     icon: { type: String },
     dismissible: { type: Boolean, reflect: true },
     banner: { type: Boolean, reflect: true },
+    src: { type: String },
+    appId: { type: String, attribute: "app-id" },
+    appUrl: { type: String, attribute: "app-url" },
+    open: { type: String },
+    remember: { type: String },
+    preview: { type: Boolean },
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
@@ -102,6 +123,14 @@ export class Message extends LitElement {
   declare icon: string | undefined;
   declare dismissible: boolean;
   declare banner: boolean;
+  declare src: string | undefined;
+  declare appId: string | undefined;
+  declare appUrl: string | undefined;
+  declare open: string | undefined;
+  declare remember: string | undefined;
+  declare preview: boolean;
+  /** (app) Where this device shows it, decided before each render. */
+  private placement: AppBannerPlacement = "none";
 
   /** The role this element last set, so a role the page wrote is left alone. */
   private ownRole: string | null = null;
@@ -123,6 +152,7 @@ export class Message extends LitElement {
     this.literal = false;
     this.dismissible = false;
     this.banner = false;
+    this.preview = false;
   }
 
   /** The tone in effect: an unknown value reads as neutral. */
@@ -146,13 +176,28 @@ export class Message extends LitElement {
   protected willUpdate(changed: PropertyValues<this>) {
     super.willUpdate(changed);
     if (changed.has("tone") || changed.has("form")) this.syncRole();
+    if (this.form === "app") this.place();
+    else if (changed.get("form") === "app") this.hidden = false;
+  }
+
+  private get app(): AppBannerOptions {
+    return { appId: this.appId, appUrl: this.appUrl, open: this.open, key: this.remember };
+  }
+
+  /** Decides where the app banner shows, before it draws, so it never pops in after the page. */
+  private place() {
+    this.placement = this.preview ? "drawn" : appBannerPlacement(this.app);
+    if (this.placement === "safari") ensureSmartAppBanner(this.app);
+    this.hidden = this.placement !== "drawn";
+    const name = this.words(this.heading) || this.querySelector('[slot="heading"]')?.textContent?.trim();
+    if (name && this.getAttribute("aria-label") !== name) this.setAttribute("aria-label", name);
   }
 
   private syncRole() {
     if (!this.isConnected) return;
     const current = this.getAttribute("role");
     if (current !== null && current !== this.ownRole) return;
-    this.ownRole = this.form === "toast" ? "presentation" : this.resolvedTone === "danger" ? "alert" : "status";
+    this.ownRole = this.form === "toast" ? "presentation" : this.form === "app" ? "region" : this.resolvedTone === "danger" ? "alert" : "status";
     if (current !== this.ownRole) this.setAttribute("role", this.ownRole);
   }
 
@@ -178,13 +223,39 @@ export class Message extends LitElement {
     const event = new CustomEvent<MessageDismissDetail>(this.dismissEvent, {
       bubbles: true, composed: true, cancelable: true, detail: { tone: this.resolvedTone },
     });
+    // An app banner closed stays closed in this browser, whoever removes it.
+    if (this.form === "app" && !this.preview) closeAppBanner(this.app);
     if (!this.dispatchEvent(event)) return false;
     this.hidden = true;
     return true;
   }
 
+  private openApp(event: MouseEvent) {
+    if (!this.open || this.preview) return;
+    event.preventDefault();
+    openApp(this.app);
+  }
+
+  private renderApp() {
+    const heading = this.words(this.heading);
+    const text = this.words(this.text);
+    const changed = () => this.requestUpdate();
+    return html`<div class="ds-notice ds-notice--app" part="message notice">
+      <span class="ds-notice__picture" part="picture" aria-hidden="true">
+        <slot name="icon" @slotchange=${changed}>${this.src ? html`<img src=${this.src} alt="">` : nothing}</slot>
+      </span>
+      <div class="ds-notice__title" part="title"><slot name="heading" @slotchange=${changed}>${heading}</slot></div>
+      <div class="ds-notice__text" part="text"><slot @slotchange=${changed}></slot>${this.slotted("") ? nothing : text}</div>
+      <a class="ds-button ds-button--primary ds-notice__open" part="open" href=${appStoreUrl(this.app) || this.open || nothing} @click=${(event: MouseEvent) => this.openApp(event)}>${getText("Open") || "Open"}</a>
+      <button class="ds-button ds-button--icon ds-notice__dismiss" part="dismiss" type="button" aria-label=${getText("Close") || "Close"} @click=${() => this.dismiss()}>
+        <ds-icon type="close" aria-hidden="true"></ds-icon>
+      </button>
+    </div>`;
+  }
+
   render() {
     if (this.form === "toast") return html`<ds-toast .expand=${this.expand} .visibleToasts=${this.visibleToasts} .richColors=${this.richColors} .contained=${this.contained} .label=${this.label} .closeLabel=${this.closeLabel} .position=${this.position} .duration=${this.duration} .closeButton=${this.closeButton}></ds-toast>`;
+    if (this.form === "app") return this.placement === "drawn" ? this.renderApp() : nothing;
     const tone = this.resolvedTone;
     const heading = this.words(this.heading);
     const text = this.words(this.text);

package/DS1/2-core/styles/ds-notice.css

@@ -25,8 +25,21 @@
   position: static;
 }
 
+/* The app banner stands in the flow, at the top of the page. */
+:host([form="app"]) {
+  display: block;
+}
+
 /* Slotted words take the notice's lines rather than their own margins. */
 ::slotted([slot="heading"]),
 ::slotted(:not([slot])) {
   margin: 0;
 }
+
+/* The app's own picture in the icon slot fills its two squares. */
+::slotted(img[slot="icon"]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/DS1/3-unit/ds-context.ts

@@ -15,8 +15,8 @@ const REFUSED = 1400;
  * from the keyboard. `context-selector` delegates one menu to many rows of a
  * long list, and focus returns to the row that opened it.
  *
- * It wears Ezo's gap face: each row carries the ink as its fill with the
- * paper's colour for its words, rows a pixel apart and groups two (an
+ * It wears Ezo's gap face: each row is black with white words in both themes
+ * (the slate in dark, darker than the page), rows a pixel apart and groups two (an
  * `hr data-ds-menu-separator` between them, never a line), the page showing
  * through the gaps, the outer corners rounded as one silhouette, and an icon
  * at a row's end. A group left empty leaves no gap. A row hovered or focused