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

package/DS1/4-page/ds-overlay.ts

@@ -20,6 +20,8 @@ export type OverlaySide = "end" | "start";
 export type OverlayCloseReason = "escape" | "backdrop" | "outside" | "button" | "native" | "swipe";
 const dialogStyles = `${frameStyles}\n${placementStyles}`;
 const TYPES = new Set<string>(["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<Document, Set<Overlay>>();
 type SavedStyle = { style: CSSStyleDeclaration; name: string; value: string; priority: string; locked: string };
 const scrollStyles = new WeakMap<Document, { declarations: SavedStyle[]; x: number; y: number }>();
@@ -74,7 +76,7 @@ function styleRoot(root: Node) {
  * `<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
@@ -149,8 +151,11 @@ export class Overlay extends LitElement {
 
   protected updated() { this.syncType(); this.syncOpen(); this.place(); }
 
-  /** Its type as it is drawn: an unknown one is a modal. */
-  get kind(): OverlayType { 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(): OverlayType {
+    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/DS1/4-page/ds-page.ts

@@ -7,6 +7,8 @@ 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 type PageLayout = "sidebar" | "split" | "inspector" | "column" | "centered" | "tiles";
 export const PAGE_LAYOUTS: readonly PageLayout[] = ["sidebar", "split", "inspector", "column", "centered", "tiles"];
 
@@ -20,6 +22,9 @@ export const PAGE_LAYOUTS: readonly PageLayout[] = ["sidebar", "split", "inspect
  * - `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
@@ -59,6 +64,7 @@ export class Page extends LitElement {
     view: { type: Boolean, reflect: true },
     drawer: { type: Boolean, reflect: true },
     drawerLabel: { type: String, attribute: "drawer-label" },
+    landmark: { state: true },
   };
 
   declare layout: PageLayout;
@@ -68,6 +74,7 @@ export class Page extends LitElement {
   declare view: boolean;
   declare drawer: boolean;
   declare drawerLabel: string | undefined;
+  private declare landmark: boolean;
 
   static styles = [unsafeCSS(controls), unsafeCSS(styles)];
 
@@ -81,10 +88,23 @@ export class Page extends LitElement {
     this.fill = false;
     this.view = false;
     this.drawer = false;
+    this.landmark = true;
   }
 
+  /**
+   * 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 = () => {
+    const slot = this.renderRoot?.querySelector?.<HTMLSlotElement>("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;
+  };
+
   connectedCallback() {
     super.connectedCallback();
+    this.syncLandmark();
     window.addEventListener("language-changed", this.relabel);
     window.addEventListener("translations-loaded", this.relabel);
   }
@@ -144,7 +164,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>
@@ -158,6 +178,7 @@ export class Page extends LitElement {
       slot.addEventListener("slotchange", sync);
       sync();
     });
+    this.syncLandmark();
   }
 }
 

package/DS1/4-page/email.ts

@@ -116,6 +116,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
@@ -126,11 +128,12 @@ export interface EmailFrameOptions {
 /** Rows are trusted template HTML. Escape every interpolated user value. */
 export function emailFrame(options: EmailFrameOptions, body: string): string {
   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>
@@ -138,8 +141,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}

package/DS1/4-page/styles/ds-container.css

@@ -6,7 +6,6 @@
   width: 100%;
   max-width: 100%;
   flex-direction: column;
-  background-color: var(--background-color);
   box-sizing: border-box;
 }
 :host([hidden]) { display: none !important; }

package/DS1/4-page/styles/ds-overlay.css

@@ -35,6 +35,13 @@ ds-overlay > dialog[data-ds-type="popover"] {
   max-width: var(--ds-overlay-available-width, calc(100vw - var(--ds-unit)));
   max-height: var(--ds-overlay-available-height, calc(100dvh - var(--ds-unit)));
 }
+/* A compact calendar is its own menu surface: no extra frame or spacing. */
+ds-overlay > dialog[data-ds-type="popover"]:has(> ds-calendar[compact]) {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  gap: 0;
+}
 ds-overlay > dialog[data-ds-overlay-flush] { padding: 0; gap: 0; }
 ds-overlay > dialog[data-ds-overlay-rotated] {
   inset: auto;

package/DS1/4-page/styles/ds-page.css

@@ -96,6 +96,16 @@
 }
 :host(:is([layout="column"], [layout="centered"], [layout="tiles"])) .nav { margin-block-end: var(--ds-unit); }
 
+/* A column or centred page stands what it holds one square apart, as blocks of writing are,
+   so a page needs no spacing of its own; `--ds-page-flow` sets another distance. A button or a tag
+   keeps its own width. */
+:host(:is([layout="column"], [layout="centered"])) .main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: var(--ds-page-flow, var(--ds-unit));
+}
+:host(:is([layout="column"], [layout="centered"])) .main ::slotted(:is(ds-button, ds-tag, ds-badge, ds-avatar, ds-cycle, a, button)) { justify-self: start; }
 :host([layout="centered"]) { --ds-page-measure: calc(16 * var(--ds-unit)); }
 :host([layout="centered"]) .page { grid-template-rows: auto; align-content: center; }
 

package/DS1/5-visual-kit/app-chrome.ts

@@ -0,0 +1,129 @@
+import { LitElement, adoptStyles, css, html, nothing, type PropertyValues } from 'lit';
+import { instagramFrame, instagramFrameStyles } from './instagram-frame';
+import { define } from '../0-face/define';
+import '../2-core/ds-icon';
+import { browserStyles } from './browser-styles';
+import { mobileChromeStyles, cellularSignal } from './mobile-chrome';
+
+export type AppChromeKind = 'macos' | 'macos-compact' | 'ios' | 'ipados' | 'safari' | 'chrome' | 'edge' | 'safari-ios' | 'instagram';
+/** Platform presentation chrome. Controls emit requests; they never navigate or close the host app. */
+export class DsAppChrome extends LitElement {
+  static properties = {
+    username: {}, caption: {}, avatar: {}, verified: {type:Boolean}, likes: {}, comments: {}, reposts: {}, shares: {}, progress: {type:Number},
+    kind: { reflect: true }, appearance: { reflect: true }, time: {}, address: {}, label: {}, href: {},
+    network: {}, battery: {type:Number}, dualSim: {type:Boolean,attribute:'dual-sim'},
+    favicon: {}, backAvailable: {type:Boolean, attribute:'back-available'}, forwardAvailable: {type:Boolean, attribute:'forward-available'},
+    assetBase: { attribute: 'asset-base' }, interactive: { type: Boolean, reflect: true },
+  };
+  declare username:string; declare caption:string; declare avatar:string; declare verified:boolean; declare likes:string; declare comments:string; declare reposts:string; declare shares:string; declare progress:number;
+  declare kind: AppChromeKind;
+  declare appearance: string;
+  declare time: string;
+  declare address: string;
+  declare label: string;
+  declare href: string;
+  declare assetBase: string;
+  declare interactive: boolean;
+  declare favicon: string;
+  declare network: string;
+  declare battery: number;
+  declare dualSim: boolean;
+  declare backAvailable: boolean;
+  declare forwardAvailable: boolean;
+  constructor(){super();this.username='account';this.caption='';this.avatar='';this.verified=false;this.likes='';this.comments='';this.reposts='';this.shares='';this.progress=0;this.kind='macos';this.appearance='light';this.time='00:01';this.address='';this.label='Application';this.href='';this.assetBase='';this.interactive=false;this.favicon='';this.network='4G';this.battery=80;this.dualSim=false;this.backAvailable=true;this.forwardAvailable=false;}
+  static styles = [css`
+    :host { display:block; color:#202124; background:#f4f4f4; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; --chrome-line:#d6d6d6; --chrome-field:#fff; --chrome-selected:#fff; }
+    :host([appearance=dark]) { color:#efefef; background:#292a2d; --chrome-line:#444; --chrome-field:#202124; --chrome-selected:#35363a; }
+    * { box-sizing:border-box; } button { font:inherit; color:inherit; border:0; background:none; padding:0; display:grid; place-items:center; width:28px; height:28px; border-radius:5px; }
+    button:focus-visible { outline:2px solid #1677ff; outline-offset:1px; } button:enabled:hover { background:color-mix(in srgb,currentColor 10%,transparent); }
+    button:disabled { opacity:1; } svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+    .lights { display:flex; align-items:center; gap:8px; width:72px; flex:none; padding-left:12px; }
+    .lights button { width:12px; height:12px; border:1px solid #0002; border-radius:50%; background:#ff5f57; }
+    .lights button:nth-child(2) { background:#febc2e; } .lights button:nth-child(3) { background:#28c840; }
+    .lights svg { --chrome-icon-size:8px; opacity:0; width:8px; height:8px; stroke:#333; } :host([interactive]) .lights:hover svg { opacity:1; }
+    .compact { --compact-scale:var(--sf,1); height:calc(30px * var(--compact-scale)); position:relative; display:flex; justify-content:center; align-items:center; border-bottom:1px solid var(--chrome-line); background:var(--ds-window-chrome-background,#f4f4f4); color:var(--ds-window-chrome-color,#26251e); font:calc(14px * var(--compact-scale))/calc(20px * var(--compact-scale)) var(--ds-typeface-regular,system-ui,sans-serif); }
+    .compact .lights { position:absolute; left:calc(8px * var(--compact-scale)); top:0; width:auto; height:100%; padding:0; gap:calc(6px * var(--compact-scale)); }
+    .compact .lights button { flex:none; width:calc(10px * var(--compact-scale)); height:calc(10px * var(--compact-scale)); border:0; background:color-mix(in srgb,currentColor 18%,transparent); }
+    .compact .title { flex:initial; max-width:calc(100% - 120px * var(--compact-scale)); padding:0 calc(4px * var(--compact-scale)); font-weight:400; color:inherit; text-decoration:none; border-radius:calc(4px * var(--compact-scale)); }
+    .compact a.title:hover { background:color-mix(in srgb,currentColor 8%,transparent); }
+    .compact a.title:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
+    :host([appearance=dark]) .compact { --ds-window-chrome-background:#292a2d; --ds-window-chrome-color:#efefef; }
+    .native { height:38px; display:flex; align-items:center; border-bottom:1px solid var(--chrome-line); }
+    .title { text-align:center; flex:1; padding-right:72px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; }
+    .tabs { display:flex; align-items:center; height:38px; gap:8px; padding-right:8px; }
+    .tab { align-self:end; height:30px; min-width:100px; width:220px; background:var(--chrome-selected); border-radius:10px 10px 0 0; display:flex; align-items:center; padding:0 12px; gap:8px; }
+    .tab span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .toolbar { min-height:42px; display:flex; align-items:center; gap:6px; padding:6px 10px; background:var(--chrome-selected); border-bottom:1px solid var(--chrome-line); }
+    .address { min-width:0; flex:1; height:28px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--chrome-field); border:1px solid var(--chrome-line); border-radius:7px; }
+    .address span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .status { height:62px; padding-top:3px; display:flex; align-items:center; justify-content:center; font-size:17.67px; font-weight:590; line-height:22px; background:var(--chrome-screen,#fff); color:var(--chrome-ink,#000); }
+    :host([appearance=dark]) .status { background:var(--chrome-screen,#111); color:var(--chrome-ink,#fff); }
+    .clock { flex:1; text-align:center; padding-left:10px; font-variant-numeric:tabular-nums; }
+    .island-space { width:125px; flex:none; }
+    .levels { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; padding-right:10px; }
+    .battery-art { position:relative; display:block; width:29.333px; height:13.667px; } .battery-art img { display:block; opacity:.3; } .battery-art .charge-art { position:absolute; inset:0; opacity:1; }
+    .cellular { display:flex; align-items:end; gap:2.333px; height:15px; } .cellular i { display:block; width:3.333px; border-radius:4px; background:currentColor; }
+    .cellular i:nth-child(1){height:6.333px}.cellular i:nth-child(2){height:8.67px}.cellular i:nth-child(3){height:11px}.cellular i:nth-child(4){height:13.667px}
+    .battery-fallback { width:27px;height:13px;border:1px solid currentColor;border-radius:3px;padding:2px;position:relative; }.battery-fallback::before {content:"";display:block;height:100%;background:currentColor;border-radius:1px}.battery-fallback::after {content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:currentColor;border-radius:0 1px 1px 0}.wifi { width:19.333px; height:14.333px; }.battery { width:29.333px; height:13.667px; }
+    :host([appearance=dark]) .levels img { filter:invert(1); }
+    :host([kind=ipados]) .status { height:32px; font-size:13px; justify-content:space-between; padding:0 26px; }
+    :host([kind=ipados]) .clock { flex:none; padding:0; } :host([kind=ipados]) .island-space { display:none; } :host([kind=ipados]) .levels { flex:none; padding:0; }
+    .mobile { padding:8px 16px; background:var(--chrome-selected); }
+    .mobile .address { height:44px; border-radius:22px; }
+    .mobile-actions { display:flex; justify-content:space-between; margin-top:8px; }
+  `, browserStyles, mobileChromeStyles, instagramFrameStyles];
+  private drawIcon?: typeof import('./browser-icons').browserIcon;
+  /** The Reels overlay, loaded only when this chrome is Instagram: no other presentation carries it. */
+  private reels?: typeof import('./instagram');
+  private reelsLoading?: Promise<void>;
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (!changed.has('kind') || this.kind !== 'instagram' || this.reelsLoading) return;
+    this.reelsLoading = import('./instagram').then((reels) => {
+      adoptStyles(this.renderRoot as ShadowRoot, [...DsAppChrome.elementStyles, reels.instagramStyles]);
+      this.reels = reels;
+      this.requestUpdate();
+    }).catch(() => {
+      this.reelsLoading = undefined;
+      this.dispatchEvent(new CustomEvent('chrome-error', { detail: { kind: this.kind }, bubbles: true, composed: true }));
+    });
+  }
+  /** Settles once Instagram's overlay is drawn too, so a capture never takes the frame without it. */
+  protected async getUpdateComplete(): Promise<boolean> {
+    const settled = await super.getUpdateComplete();
+    if (this.kind !== 'instagram' || this.reels || !this.reelsLoading) return settled;
+    await this.reelsLoading;
+    return super.getUpdateComplete();
+  }
+  protected updated(changed: Map<string, unknown>) {
+    if (!changed.has('kind') && !changed.has('interactive')) return;
+    if (this.kind === 'instagram') return;
+    if (this.kind === 'ios' || this.kind === 'ipados') return;
+    if ((this.kind === 'macos' || this.kind === 'macos-compact') && !this.interactive) return;
+    void import('./browser-icons').then(async (icons) => {
+      await icons.loadBrowserIcons(this.kind);
+      this.drawIcon = icons.browserIcon;
+      this.requestUpdate();
+    }).catch(() => {
+      this.dispatchEvent(new CustomEvent('chrome-error', { detail: { kind: this.kind }, bubbles: true, composed: true }));
+    });
+  }
+  private icon(name: string) {
+    return this.drawIcon?.(name, this.kind) ?? nothing;
+  }
+  private control(action: string, label: string, available = true) {
+    return html`<button type="button" aria-label=${label} class=${available?'':'unavailable'} ?disabled=${!this.interactive || !available} tabindex=${this.interactive&&available?0:-1} @click=${()=>this.dispatchEvent(new CustomEvent('chrome-action',{detail:{action},bubbles:true,composed:true}))}>${this.icon(action)}</button>`;
+  }
+  private lights() { return html`<div class="lights">${this.control('close','Close window')}${this.control('minimize','Minimize window')}${this.control('zoom','Zoom window')}</div>`; }
+  render() {
+    if(this.kind==='instagram') return !this.reels ? instagramFrame() : this.reels.instagram({...this, interactive:this.interactive, username:this.username, caption:this.caption, avatar:this.avatar, verified:this.verified, likes:this.likes, comments:this.comments, reposts:this.reposts, shares:this.shares, progress:this.progress, action:(action:string)=>this.dispatchEvent(new CustomEvent('chrome-action',{detail:{action},bubbles:true,composed:true}))});
+    if(this.kind==='ios'||this.kind==='ipados') return html`<div class="status"><span class="clock">${this.time}</span><span class="island-space"></span><span class="levels">${this.dualSim ? cellularSignal(true) : html`<span class="cellular" role="img" aria-label="Full signal"><i></i><i></i><i></i><i></i></span>`}${this.network==='wifi' ? (this.assetBase ? html`<img class="wifi" alt="Wi-Fi" src=${this.assetBase+'status-wifi.svg'}>` : html`<ds-icon type="wifi" class="wifi" aria-label="Wi-Fi" style="--ds-icon-size:19px"></ds-icon>`) : html`<span class="network">${this.network}</span>`}${this.assetBase ? html`<span class="battery-art" role="img" aria-label=${`Battery ${Math.min(100,Math.max(0,this.battery))}%`}><img class="battery" alt="" src=${this.assetBase+'status-battery.svg'}><img class="battery charge-art" alt="" src=${this.assetBase+'status-battery.svg'} style=${`clip-path:inset(0 ${100-Math.min(100,Math.max(0,this.battery))}% 0 0)`}></span>` : html`<span class="battery-meter" role="img" aria-label=${`Battery ${Math.min(100,Math.max(0,this.battery))}%`} style=${`--battery-charge:${Math.min(100,Math.max(0,this.battery))}%`}><span class="charge"></span></span>`}</span></div>`;
+    if(this.kind==='macos-compact') return html`<div class="compact">${this.lights()}${this.href?html`<a class="title" href=${this.href} target="_blank" rel="noopener noreferrer" title=${this.href}>${this.address || this.label}</a>`:html`<span class="title">${this.address || this.label}</span>`}</div>`;
+    if(this.kind==='macos') return html`<div class="native">${this.lights()}<span class="title">${this.label}</span><slot name="controls"></slot></div>`;
+    if(this.kind==='safari-ios') return html`<div class="mobile">${this.control('back','Back',this.backAvailable)}<div class="address">${this.control('page-menu','Page menu')}<span>${this.address}</span>${this.control('reload','Reload')}</div>${this.control('tabs','Tabs')}</div>`;
+    if(this.kind==='safari') return html`<div class="toolbar safari-toolbar">${this.lights()}<div class="safari-group sidebar-group">${this.control('sidebar','Sidebar')}${this.control('chevron-down','Tab groups')}</div><div class="safari-group history">${this.control('back','Back',this.backAvailable)}${this.control('forward','Forward',this.forwardAvailable)}</div><div class="address safari-address">${this.favicon?html`<img class="favicon" src=${this.favicon} alt="">`:nothing}<span>${this.address}</span>${this.control('page-menu','Page menu')}</div><div class="safari-group safari-actions">${this.control('share','Share')}${this.control('plus','New tab')}${this.control('tabs','Tab overview')}</div></div>`;
+    const edge=this.kind==='edge';
+    return html`<div class="tabs">${this.lights()}${this.control('chevron-down','Search tabs')}<div class="tab">${this.favicon?html`<img class="favicon" src=${this.favicon} alt="">`:this.icon('globe')}<span>${this.label}</span>${this.control('close-tab','Close tab')}</div>${this.control('plus','New tab')}</div><div class="toolbar browser-toolbar">${this.control('back','Back',this.backAvailable)}${!edge||this.forwardAvailable?this.control('forward','Forward',this.forwardAvailable):nothing}${this.control('reload','Reload')}<div class="address">${this.control(edge?'lock':'tune','Site information')}<span>${this.address}</span>${edge?this.control('reading','Reading mode'):nothing}${this.control('star',edge?'Add to favorites':'Bookmark this tab')}</div>${this.control(edge?'favorites':'extensions',edge?'Favorites':'Extensions')}${this.control('profile','Profile')}${this.control(edge?'more-horizontal':'more','Settings and more')}</div>`;
+  }
+}
+define('ds-app-chrome', DsAppChrome);
+declare global { interface HTMLElementTagNameMap { 'ds-app-chrome': DsAppChrome; } }