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

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

@@ -0,0 +1,280 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { define } from "../0-face/define";
+import { treeStep } from "../0-face/sidebar";
+import "../0-face/tooltips";
+import "../2-core/ds-button";
+import "../2-core/ds-icon";
+import "./ds-row";
+import styles from "./styles/ds-sidebar.css?inline";
+
+/** Visible rows. The application owns hierarchy, expansion, selection and routing. */
+export interface SidebarItem {
+  id: string;
+  /** Words a person reads; shown as written, never translated. */
+  label: string;
+  /** Decorative leading icon; the label remains the accessible name. */
+  icon?: string;
+  /** 0 for a row at the root; each level stands further in. */
+  depth?: number;
+  href?: string;
+  /** `true` open, `false` closed; leave it out for a leaf. */
+  expanded?: boolean;
+  /** The destination being shown (navigation). */
+  current?: boolean;
+  /** The row chosen (a tree). */
+  selected?: boolean;
+  disabled?: boolean;
+  /** Small muted words at the row's end: a count, a size. */
+  meta?: string;
+  action?: { id: string; label: string };
+}
+
+/**
+ * Compact navigation composed from Row, Button and Icon: the application's
+ * places, each row a link or a button and its own Tab stop. A label cut
+ * short by the column's width shows in full in the shared tooltip
+ * (`data-tooltip`, drawn by `0-face/tooltips.ts`); a label that fits carries
+ * none, and no row carries the browser's `title`.
+ *
+ * With `tree`, it is a tree of the things inside one place (files, groups, a
+ * page's parts): rows one square high, each level one square further in, a
+ * disclosure arrow on its own square before each label. `role="tree"` with
+ * one `role="treeitem"` per row, `aria-level`, `aria-expanded` and
+ * `aria-selected`; one Tab stop, the keyboard of the tree pattern (see
+ * `0-face/sidebar.ts`). The application keeps the rows: it passes the
+ * visible ones in `items`, in order, and answers the events.
+ *
+ * @element ds-sidebar
+ * @attr label - The navigation's or the tree's accessible name.
+ * @attr tree - A tree of nested things instead of navigation.
+ * @fires sidebar-toggle - `{ id, expanded }`: a row asks to open or close.
+ * @fires sidebar-activate - `{ id }`: a row was pressed (navigation), or Enter or a double click opened one (a tree).
+ * @fires sidebar-select - `{ id }`: a click, Space or Enter chose a tree row.
+ * @fires sidebar-action - `{ id, action }`: a row's own action was pressed.
+ */
+export class Sidebar extends LitElement {
+  static properties = {
+    items: { attribute: false },
+    label: { type: String },
+    empty: { type: String },
+    tree: { type: Boolean, reflect: true },
+  };
+  declare items: SidebarItem[];
+  declare label: string;
+  declare empty: string;
+  declare tree: boolean;
+  static styles = unsafeCSS(styles);
+
+  /** In a tree, the row that holds the Tab stop. */
+  private focusId?: string;
+
+  constructor() {
+    super();
+    this.items = [];
+    this.label = "Navigation";
+    this.empty = "No items";
+    this.tree = false;
+  }
+
+  private resizeObserver?: ResizeObserver;
+  private fontsReady = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver ??= new ResizeObserver(() => this.markCutLabels());
+      this.resizeObserver.observe(this);
+    }
+    // Labels measured before the typeface arrives are measured again once it has.
+    const fonts = this.fontsReady ? undefined : document.fonts?.ready;
+    if (fonts) void fonts.then(() => { this.fontsReady = true; this.markCutLabels(); });
+  }
+
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  updated() {
+    this.markCutLabels();
+  }
+
+  /** Only a label that does not fit its row gets a tooltip, holding the whole label. */
+  private markCutLabels() {
+    const labels = new Map(this.items.map(item => [item.id, item.label]));
+    this.renderRoot.querySelectorAll<HTMLElement>("[data-item]").forEach(control => {
+      const name = control.querySelector<HTMLElement>(".name");
+      const label = labels.get(control.dataset.item ?? "");
+      if (label && name && name.scrollWidth > name.clientWidth) control.dataset.tooltip = label;
+      else delete control.dataset.tooltip;
+    });
+  }
+
+  private request(name: string, detail: object): boolean {
+    return this.dispatchEvent(new CustomEvent(`sidebar-${name}`, { detail, bubbles: true, composed: true, cancelable: true }));
+  }
+
+  private toggle(item: SidebarItem) {
+    this.request("toggle", { id: item.id, expanded: !item.expanded });
+  }
+
+  private activate(event: MouseEvent, item: SidebarItem) {
+    if (item.disabled) { event.preventDefault(); return; }
+    // Let native links retain new-tab, download and context-menu behaviour.
+    if (item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)) return;
+    if (!item.href && item.expanded !== undefined) { this.toggle(item); return; }
+    if (!this.request("activate", { id: item.id })) event.preventDefault();
+  }
+
+  /** Moves the focus to a row after `updateComplete`. */
+  focusItem(id: string) {
+    const row = this.row(id);
+    if (!row) return;
+    if (this.tree) { this.focusId = id; this.requestUpdate(); row.tabIndex = 0; }
+    row.focus();
+  }
+
+  /** Scrolls the current destination, or the selected tree row, into view. */
+  scrollToCurrent() {
+    this.renderRoot.querySelector('[aria-current="page"], [aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+  }
+
+  /** The row a pointer or keyboard event happened on, for a context menu or a drag of the application's own. */
+  itemFromEvent(event: Event): SidebarItem | undefined {
+    const row = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement && node.dataset.item !== undefined && this.renderRoot.contains(node));
+    return row ? this.items.find(item => item.id === row.dataset.item) : undefined;
+  }
+
+  private row(id: string) {
+    return [...this.renderRoot.querySelectorAll<HTMLElement>("[data-item]")].find(row => row.dataset.item === id);
+  }
+
+  /** A tree's Tab stop: the row last focused while it is still shown, else the selected row, else the first available. */
+  private stop() {
+    const usable = this.items.filter(item => !item.disabled);
+    return usable.find(item => item.id === this.focusId)?.id ?? usable.find(item => item.selected)?.id ?? usable[0]?.id;
+  }
+
+  private press(event: MouseEvent, item: SidebarItem) {
+    if (item.disabled) return;
+    this.focusItem(item.id);
+    const disclosure = event.composedPath().some(node => node instanceof HTMLElement && node.classList.contains("disclosure"));
+    if (disclosure && item.expanded !== undefined) this.request("toggle", { id: item.id, expanded: !item.expanded });
+    else this.request("select", { id: item.id });
+  }
+
+  private open(event: MouseEvent, item: SidebarItem) {
+    if (item.disabled || event.composedPath().some(node => node instanceof HTMLElement && node.classList.contains("disclosure"))) return;
+    this.request("activate", { id: item.id });
+  }
+
+  private treeKeydown(event: KeyboardEvent, item: SidebarItem) {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    const index = this.items.indexOf(item);
+    const step = treeStep(this.items.map(row => ({ level: Math.max(0, row.depth ?? 0) + 1, expanded: row.expanded, disabled: row.disabled, label: row.label })), index, event.key);
+    if (!step) return;
+    event.preventDefault();
+    if (step.toggle !== undefined) this.request("toggle", { id: item.id, expanded: step.toggle });
+    if (step.select) this.request("select", { id: item.id });
+    if (step.activate) this.request("activate", { id: item.id });
+    const target = step.focus === undefined ? undefined : this.items[step.focus];
+    if (target) this.focusItem(target.id);
+  }
+
+  private renderTree() {
+    const stop = this.stop();
+    // Each row's place among its siblings, for aria-setsize and aria-posinset.
+    const places = new Map<string, [number, number]>();
+    const open: SidebarItem[][] = [];
+    for (const item of this.items) {
+      const depth = Math.max(0, item.depth ?? 0);
+      open.length = depth + 1;
+      const siblings = (open[depth] ??= []);
+      siblings.push(item);
+      for (const [index, sibling] of siblings.entries()) places.set(sibling.id, [index + 1, siblings.length]);
+    }
+    return html`<slot name="header"></slot><div class="tree" role="tree" aria-label=${ifDefined(this.label || undefined)} part="tree">
+      ${repeat(this.items, item => item.id, item => {
+        const depth = Math.max(0, item.depth ?? 0);
+        const [position, size] = places.get(item.id) ?? [1, 1];
+        return html`<div class="item" role="treeitem" data-item=${item.id}
+          aria-level=${depth + 1} aria-setsize=${size} aria-posinset=${position}
+          aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
+          aria-selected=${String(Boolean(item.selected))}
+          aria-disabled=${ifDefined(item.disabled ? "true" : undefined)}
+          tabindex=${item.id === stop ? 0 : -1}
+          style=${`--depth:${depth}`}
+          @click=${(event: MouseEvent) => this.press(event, item)}
+          @dblclick=${(event: MouseEvent) => this.open(event, item)}
+          @keydown=${(event: KeyboardEvent) => this.treeKeydown(event, item)}
+          @focus=${() => { this.focusId = item.id; }}>
+          <span class="disclosure" aria-hidden="true">${item.expanded === undefined ? nothing : html`<ds-icon type="right" ?data-open=${item.expanded}></ds-icon>`}</span>
+          ${item.icon ? html`<span class="icon" aria-hidden="true"><ds-icon type=${item.icon}></ds-icon></span>` : nothing}
+          <span class="label">${item.label}</span>
+          ${item.meta ? html`<span class="meta">${item.meta}</span>` : nothing}
+        </div>`;
+      })}
+      ${this.items.length ? nothing : html`<p class="empty" role="status">${this.empty}</p>`}
+    </div><slot name="footer"></slot>`;
+  }
+
+  private navigate(event: KeyboardEvent, item: SidebarItem) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const index = this.items.indexOf(item);
+    let target: SidebarItem | undefined;
+    const available = this.items.filter(row => !row.disabled);
+    const position = available.indexOf(item);
+    if (event.key === "ArrowDown") target = available[Math.min(position + 1, available.length - 1)];
+    else if (event.key === "ArrowUp") target = available[Math.max(position - 1, 0)];
+    else if (event.key === "Home") target = available[0];
+    else if (event.key === "End") target = available[available.length - 1];
+    else if (event.key === "ArrowRight") {
+      if (item.expanded === false) this.toggle(item);
+      else if (item.expanded && (this.items[index + 1]?.depth ?? 0) > (item.depth ?? 0)) target = this.items[index + 1];
+    } else if (event.key === "ArrowLeft") {
+      if (item.expanded) this.toggle(item);
+      else target = this.items.slice(0, index).reverse().find(row => (row.depth ?? 0) < (item.depth ?? 0) && !row.disabled);
+    } else return;
+    event.preventDefault();
+    if (target && !target.disabled) this.focusItem(target.id);
+  }
+
+  render() {
+    if (this.tree) return this.renderTree();
+    return html`<slot name="header"></slot><nav aria-label=${this.label}>
+      ${repeat(this.items, item => item.id, item => html`
+        <ds-row class="row" ?data-current=${item.current} ?data-disabled=${item.disabled}
+          style=${`--depth:${Math.max(0, item.depth ?? 0)}`}>
+          <ds-button control="slotted" class="choice" ?disabled=${item.disabled}>
+            ${item.href && !item.disabled ? html`
+              <a href=${item.href} data-item=${item.id} aria-current=${ifDefined(item.current ? "page" : undefined)}
+                @click=${(event: MouseEvent) => this.activate(event, item)}
+                @keydown=${(event: KeyboardEvent) => this.navigate(event, item)}><span class="name">${item.icon ? html`<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></a>` : html`
+              <button type="button" data-item=${item.id} ?disabled=${item.disabled}
+                aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
+                aria-current=${ifDefined(item.current ? "page" : undefined)}
+                @click=${(event: MouseEvent) => this.activate(event, item)}
+                @keydown=${(event: KeyboardEvent) => this.navigate(event, item)}><span class="name">${item.icon ? html`<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></button>`}
+          </ds-button>
+          ${item.expanded !== undefined ? html`
+            <ds-button control="slotted" icon class="disclosure">
+              <button type="button" aria-label=${`${item.expanded ? "Collapse" : "Expand"} ${item.label}`}
+                aria-expanded=${item.expanded} @click=${() => this.toggle(item)}>
+                <ds-icon type="right" aria-hidden="true" ?data-open=${item.expanded}></ds-icon>
+              </button>
+            </ds-button>` : nothing}
+          <span class="spacer" aria-hidden="true"></span>
+          ${item.meta ? html`<span class="meta">${item.meta}</span>` : nothing}
+          ${item.action ? html`<ds-button control="slotted" fit class="action"><button type="button"
+            aria-label=${`${item.action.label}: ${item.label}`}
+            @click=${() => this.request("action", { id: item.id, action: item.action!.id })}>${item.action.label}</button></ds-button>` : nothing}
+        </ds-row>`)}
+      ${this.items.length ? nothing : html`<p class="empty" role="status">${this.empty}</p>`}
+    </nav><slot name="footer"></slot>`;
+  }
+}
+
+define("ds-sidebar", Sidebar);
+declare global { interface HTMLElementTagNameMap { "ds-sidebar": Sidebar } }

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

@@ -1,64 +1,105 @@
 // ds-table.ts
-// Data table component
+// A data table: rows one square high on hairlines, drawn from data with the
+// same rules as a native `<table class="ds-table">` (1-root/table.css).
 
-import { LitElement, html, unsafeCSS } from "lit";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import metrics from "../1-root/component-metrics.css?inline";
+import table from "../1-root/table.css?inline";
 import styles from "./styles/ds-table.css?inline";
 
-export interface TableRow {
-  product: string;
-  users: string;
-  retention: string;
-  status?: string;
+/** A column: the key it reads from each row, its header, and whether it holds numbers. */
+export interface TableColumn {
+  key: string;
+  label: string;
+  /** Sets the column to its end in tabular figures. Unset, a column of numbers is numeric. */
+  numeric?: boolean;
 }
 
+/** A row: values by column key, or by column position. */
+export type TableRow = Record<string, unknown> | readonly unknown[];
+
+const capitalised = (key: string) => key.charAt(0).toUpperCase() + key.slice(1);
+const blank = (value: unknown) => value === undefined || value === null || value === "";
+
 export class DsTable extends LitElement {
   static properties = {
     data: { type: Array },
     columns: { type: Array },
-    showStatus: { type: Boolean, attribute: "show-status" },
+    footer: { type: Object },
+    sticky: { type: Boolean, reflect: true },
+    label: { type: String },
   };
 
+  /** The body rows. */
   declare data: TableRow[];
-  declare columns: string[];
-  declare showStatus: boolean;
+  /** Headers as labels (`"Users"` reads `users`) or columns; unset, the first row's keys. */
+  declare columns: (string | TableColumn)[];
+  /** A totals row under the body. */
+  declare footer: TableRow | undefined;
+  /** Keeps the first column in place while the table scrolls sideways. */
+  declare sticky: boolean;
+  /** The table's accessible name. */
+  declare label: string | undefined;
 
   constructor() {
     super();
     this.data = [];
-    this.columns = ["Product", "Users", "Retention"];
-    this.showStatus = true;
+    this.columns = [];
+    this.sticky = false;
+  }
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(table), unsafeCSS(styles)];
+
+  private resolvedColumns(): TableColumn[] {
+    const named = this.columns.length > 0;
+    const given = named
+      ? this.columns
+      : Object.keys((this.data.find(row => !Array.isArray(row)) as Record<string, unknown> | undefined) ?? {});
+    const rows = this.footer ? [...this.data, this.footer] : this.data;
+    return given.map((column, index) => {
+      const resolved = typeof column !== "string" ? column
+        : named ? { key: column.toLowerCase(), label: column }
+        : { key: column, label: capitalised(column) };
+      const values = rows.map(row => cell(row, resolved.key, index)).filter(value => !blank(value));
+      const numeric = resolved.numeric ?? (values.length > 0 && values.every(value => typeof value === "number"));
+      return { ...resolved, numeric };
+    });
   }
 
-  static styles = unsafeCSS(styles);
+  private row(row: TableRow, columns: TableColumn[]) {
+    return html`<tr>${columns.map((column, index) => {
+      const value = text(cell(row, column.key, index));
+      return index === 0
+        ? html`<th scope="row" ?data-numeric=${column.numeric}>${value}</th>`
+        : html`<td ?data-numeric=${column.numeric}>${value}</td>`;
+    })}</tr>`;
+  }
 
   render() {
+    const columns = this.resolvedColumns();
     return html`
-      <div class="table-container">
-        <div class="table-header">
-          <div class="header-cell product-cell">Product</div>
-          <div class="header-cell users-cell">Users</div>
-          <div class="header-cell retention-cell">Retention</div>
-          ${this.showStatus ? html`<div class="header-cell">Status</div>` : ""}
-        </div>
-        <div class="table-body">
-          ${this.data.map(
-            (row, rowIndex) => html`
-              <div class="data-cell product-cell">${row.product}</div>
-              <div class="data-cell users-cell">${row.users}</div>
-              <div class="data-cell retention-cell">${row.retention}</div>
-              ${this.showStatus
-                ? html`<div class="data-cell status-cell">
-                    ${row.status || "Pending"}
-                  </div>`
-                : ""}
-            `
-          )}
-        </div>
+      <div class="ds-table-scroll" part="scroll">
+        <table class="ds-table" part="table" ?data-sticky=${this.sticky} aria-label=${this.label ?? nothing}>
+          <thead>
+            <tr>${columns.map(column => html`<th scope="col" ?data-numeric=${column.numeric}>${column.label}</th>`)}</tr>
+          </thead>
+          <tbody>${this.data.map(row => this.row(row, columns))}</tbody>
+          ${this.footer ? html`<tfoot>${this.row(this.footer, columns)}</tfoot>` : nothing}
+        </table>
       </div>
     `;
   }
 }
 
+function cell(row: TableRow, key: string, index: number): unknown {
+  return Array.isArray(row) ? row[index] : (row as Record<string, unknown>)[key];
+}
+
+function text(value: unknown): string {
+  if (blank(value)) return "";
+  return typeof value === "number" ? value.toLocaleString() : String(value);
+}
+
 customElements.define("ds-table", DsTable);
 
 declare global {

package/DS1/3-unit/styles/ds-accordion.css

@@ -8,6 +8,7 @@
   max-width: 100%;
   color: var(--ds-text-color);
 }
+:host([hidden]) { display: none !important; }
 
 details {
   width: 100%;

package/DS1/3-unit/styles/ds-avatar-group.css

@@ -1,16 +1,14 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --group-overlap: calc(4px * var(--ds-sf));
+  /* The overlap for avatars one control high. */
+  --group-overlap: calc(3px * var(--ds-sf));
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   isolation: isolate;
   vertical-align: middle;
 }
-:host([size="compact"]) {
-  --group-overlap: calc(3px * var(--ds-sf));
-}
 :host([hidden]) {
   display: none !important;
 }

package/DS1/3-unit/styles/ds-calendar-large.css

@@ -0,0 +1,165 @@
+/* ds-calendar-large.css
+ * The grid drawn --ds-calendar-scale times (one and a half by default): a
+ * cell is a square of 30px, its lines 1.5px, its words the heading size
+ * times the scale (19.5px). Weeks run in columns and the days down them; the
+ * frame's corners are four tenths of a cell. Today is a red disc nine tenths
+ * of a cell across, the selected day an ink square of the same size. */
+
+:host {
+  --ds-calendar-cell: calc(var(--ds-unit) * var(--ds-calendar-scale, 1.5));
+  --ds-calendar-stroke: calc(1px * var(--ds-calendar-scale, 1.5));
+  --ds-calendar-ink: var(--ds-text-color);
+  --ds-calendar-event-fill: var(--ds-apple-green);
+  --ds-calendar-today: var(--ds-red-for-blood);
+  --ds-calendar-today-ink: var(--ds-white, #fff);
+  --ds-calendar-mark: calc(var(--ds-calendar-cell) * 0.9);
+  --ds-calendar-corner: calc(var(--ds-calendar-cell) * 0.4);
+  --ds-calendar-rail: calc(var(--ds-calendar-cell) * 2);
+  box-sizing: border-box;
+  display: block;
+  min-width: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));
+  font-weight: var(--ds-type-weight-default);
+  line-height: 1;
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+:host([hidden]) { display: none !important; }
+
+.calendar { min-width: 0; }
+
+/* The title and the arrows: one cell high, over the months. */
+.header {
+  display: flex;
+  align-items: flex-end;
+  gap: calc(4px * var(--ds-sf, 1));
+  height: var(--ds-calendar-cell);
+  margin-inline-start: calc(var(--ds-calendar-rail) + var(--ds-unit) / 2);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+}
+.title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));
+  line-height: var(--ds-calendar-cell);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.controls { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 0; }
+/* Each arrow is a chevron on its own square, as in a month. */
+.nav { flex: 0 0 auto; width: var(--ds-unit); height: var(--ds-control-height); border-radius: var(--ds-radius); color: var(--ds-title-color); }
+.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }
+:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }
+
+.body {
+  display: grid;
+  grid-template-columns: var(--ds-calendar-rail) minmax(0, 1fr);
+  column-gap: calc(var(--ds-unit) / 2);
+}
+
+/* The weekdays down the start, outside the scroll: every other one named. */
+.rail {
+  display: grid;
+  grid-template-rows: repeat(7, var(--ds-calendar-cell));
+  padding-block-start: var(--ds-calendar-cell);
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+}
+.weekday {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+
+.scroller {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+.scroller::-webkit-scrollbar { display: none; }
+
+/* The months over their weeks, one cell high, their names on its foot. */
+.months {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));
+  height: var(--ds-calendar-cell);
+}
+.month {
+  display: flex;
+  align-items: flex-end;
+  min-width: 0;
+  padding: 0 var(--ds-calendar-stroke) calc(3px * var(--ds-calendar-scale, 1.5));
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* The frame: a line all round with rounded corners; the cells draw the lines inside. */
+.frame {
+  box-sizing: border-box;
+  width: max-content;
+  border: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
+  border-radius: var(--ds-calendar-corner);
+  overflow: hidden;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));
+  grid-template-rows: repeat(7, var(--ds-calendar-cell));
+}
+.row { display: contents; }
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-calendar-cell);
+  height: var(--ds-calendar-cell);
+  border-block-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
+  border-inline-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
+  background: var(--ds-calendar-cell-fill, transparent);
+  font-variant-numeric: tabular-nums;
+  outline: none;
+}
+.cell[data-first-row] { border-block-start-width: 0; }
+.cell[data-first-column] { border-inline-start-width: 0; }
+.cell[data-filled] { color: var(--ds-slate); }
+:host([selectable]) .cell:not([aria-disabled="true"]) { cursor: pointer; }
+:host([selectable]) .cell:not([aria-disabled="true"], [data-filled]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.cell:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -3px; }
+.cell[aria-disabled="true"] { color: var(--ds-title-color); }
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ds-calendar-mark);
+  height: var(--ds-calendar-mark);
+  letter-spacing: 0;
+}
+.cell[data-today] .date { border-radius: 999px; background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }
+.cell[data-selected] .date { background: var(--ds-calendar-ink); color: var(--ds-paper); }
+.cell[data-inside]:not([data-filled]) { background: color-mix(in srgb, var(--ds-calendar-ink) 12%, var(--ds-paper)); }
+.cell[data-today][data-selected] .date { border-radius: 999px; box-shadow: inset 0 0 0 var(--ds-calendar-stroke) var(--ds-calendar-today); }
+
+/* On a narrow screen the weekdays take one letter and one square. */
+@media (max-width: 720px) {
+  :host { --ds-calendar-rail: var(--ds-unit); }
+  .rail .weekday:not(:empty) { font-size: 0; }
+  .rail .weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }
+}