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

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

@@ -1,62 +1,2 @@
-@import "../../1-root/component-metrics.css";
-
-:host {
-  display: inline-flex;
-  flex: none;
-  align-items: stretch;
-  height: var(--ds-control-height);
-  gap: 1px;
-  vertical-align: bottom;
-}
-:host([hidden]) { display: none; }
-
-button {
-  appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--ds-control-height);
-  margin: 0;
-  padding: 0 calc(5px * var(--ds-sf));
-  border: 0;
-  border-radius: 0;
-  corner-shape: var(--ds-corner-shape, round);
-  background: var(--ds-button-background-color-secondary);
-  color: var(--ds-text-color-muted);
-  font-family: var(--ds-typeface-regular);
-  font-feature-settings: var(--ds-font-features);
-  font-size: var(--ds-type-size-default);
-  font-weight: var(--ds-type-weight-default);
-  line-height: var(--ds-control-height);
-  letter-spacing: var(--ds-type-letterspacing-default);
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-button:first-child {
-  border-start-start-radius: var(--ds-radius);
-  border-end-start-radius: var(--ds-radius);
-}
-button:last-child {
-  border-start-end-radius: var(--ds-radius);
-  border-end-end-radius: var(--ds-radius);
-}
-button[data-icon] { width: var(--ds-control-height); padding: 0; }
-ds-icon { --ds-icon-size: 16px; color: inherit; }
-ds-text { color: inherit; }
-/* Compact numeric views: a single digit is a square; longer values use the
-   shared compressed face and smaller inset. Products supply only the labels. */
-:host([compact]) button:not([data-icon], [data-short]) {
-  --ds-typeface-regular: var(--ds-typeface-compressed);
-  padding-inline: calc(3px * var(--ds-sf));
-}
-:host([compact]) button[data-short] { width: var(--ds-control-height); padding: 0; }
-button:hover:not(:disabled, [aria-pressed="true"]) { color: var(--ds-text-color); }
-button[aria-pressed="true"] {
-  background: var(--ds-accent-color);
-  color: var(--ds-button-text-color-on-accent);
-  cursor: default;
-}
-button:disabled { cursor: default; opacity: 0.5; }
-button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
+/* Compatibility face. Split is a mode of Button. */
+@import "./ds-button-split.css";

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

@@ -0,0 +1,34 @@
+/* ds-stat.css */
+/* The element only places the block; 1-root/figures.css draws it. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* Slotted words take the stat's lines rather than their own margins. */
+::slotted([slot]) {
+  margin: 0;
+}
+
+/* What stands between the figure and the caption, a meter say, takes the
+   stat's width. */
+::slotted(:not([slot])) {
+  align-self: stretch;
+  margin: 0;
+}
+
+/* The figure read whole when its digits are drawn in cells. */
+.hidden-words {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

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

@@ -1,7 +1,7 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --ds-choice-unit: calc(var(--ds-1) * var(--ds-sf));
+  --ds-choice-unit: var(--ds-control-height);
   display: inline-flex;
   flex: 0 0 auto;
   vertical-align: middle;
@@ -48,3 +48,18 @@
 ::slotted(button:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }
 ::slotted(button:disabled) { cursor: default !important; opacity: .5 !important; }
 @media (prefers-reduced-motion: reduce) { ::slotted(button)::after { transition: none; } }
+
+/* Rounded switches keep their shape and white thumb independently of page accents. */
+:host([rounded]) ::slotted(button) {
+  border-radius: var(--ds-choice-unit) !important;
+  corner-shape: round !important;
+  color: var(--ds-white) !important;
+}
+:host([rounded]) ::slotted(button)::after {
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--ds-white);
+}
+:host([rounded]) ::slotted(button[aria-checked="true"]) {
+  background: var(--ds-switch-track-on) !important;
+}

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

@@ -1,7 +1,9 @@
 @import "../../1-root/component-metrics.css";
 
 /* ds-text.css */
-/* Text component styles for displaying translations */
+/* Text component styles for displaying translations. Without attributes the
+   element is one control high, for a row; text.css draws the same words as
+   classes on native text. */
 
 :host {
   display: inline-flex;
@@ -18,8 +20,9 @@
   text-decoration: var(--text-decoration-default);
   vertical-align: middle;
   white-space: nowrap;
-  color: inherit;
+  color: var(--ds-text-tone, inherit);
 }
+:host([hidden]) { display: none !important; }
 
 :host([data-language="ja"]) {
   font-family: var(--ds-typeface-regular-jp, var(--typeface-regular-jp));
@@ -40,8 +43,7 @@
   color: inherit;
 }
 
-/* ds-text.css */
-
+/* Text someone wrote: shown as it stands, cut with an ellipsis at its width. */
 :host([literal]) {
   height: auto;
   min-height: var(--ds-control-height);
@@ -49,7 +51,6 @@
   min-width: 0;
   max-width: 100%;
   overflow: var(--ds-text-overflow, hidden);
-  color: var(--ds-text-tone, inherit);
   font-family: var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
@@ -60,28 +61,58 @@
   white-space: nowrap;
 }
 
-:host([literal][strong]) {
+/*
+ * Tone, size, strength and wrapping work alike for a translation key and for
+ * literal text. They follow the rules above, at the same specificity.
+ */
+
+:host([strong]) {
   font-weight: var(--ds-type-weight-bold);
 }
 
-:host([literal][wrap]) {
+/* Several lines, each one square. */
+:host([wrap]) {
+  display: inline-block;
+  height: auto;
+  min-height: var(--ds-control-height);
+  max-width: 100%;
   overflow: visible;
+  line-height: var(--ds-unit);
   white-space: normal;
 }
 
-:host([literal][tone="muted"]) {
+:host([tone="muted"]) {
   --ds-text-tone: var(--ds-text-color-muted);
 }
 
-:host([literal][tone="title"]) {
+:host([tone="title"]) {
   --ds-text-tone: var(--ds-title-color);
 }
 
-:host([literal][size="small"]) {
+:host([tone="danger"]) {
+  --ds-text-tone: var(--ds-danger-color);
+}
+
+:host([tone="warning"]) {
+  --ds-text-tone: var(--ds-warning-color);
+}
+
+:host([size="small"]) {
   font-size: var(--ds-type-size-small);
 }
 
-:host([literal][size="heading"]) {
+:host([size="heading"]) {
+  height: auto;
   font-size: var(--ds-type-size-heading);
-  line-height: var(--ds-row-height);
+  line-height: var(--ds-type-lineheight-default);
+}
+
+/* A title on two squares. */
+:host([size="display"]) {
+  display: inline-block;
+  height: auto;
+  min-height: calc(2 * var(--ds-unit));
+  font-size: var(--ds-type-size-display);
+  line-height: calc(2 * var(--ds-unit));
+  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));
 }

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

@@ -0,0 +1,182 @@
+@import "../../1-root/component-metrics.css";
+
+/* Toast, based on Sonner (https://sonner.emilkowal.ski, MIT licence).
+ * Sonner's stack, drawn as Design system 1's label: an ink chip one control
+ * high per line of words, the tooltip's colours, no line and no shadow. The
+ * pile advances one square per toast (a control and the rest of the square),
+ * one square clear of the edge. Sonner's 400ms transitions on transform and
+ * opacity only. */
+:host {
+  --ds-toast-width: calc(16 * var(--ds-unit));
+  --ds-toast-offset: var(--ds-unit);
+  --ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));
+  --ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));
+  --ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));
+  display: contents;
+}
+
+section { display: contents; }
+
+ol {
+  --lift: -1;
+  position: fixed;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));
+  height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  pointer-events: none;
+}
+/* In the window, the offset clears the phone's safe area too. */
+ol[data-y="top"] { --lift: 1; top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px)); }
+ol[data-y="bottom"] { bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px)); }
+ol[data-x="left"] { left: var(--ds-toast-offset); }
+ol[data-x="right"] { right: var(--ds-toast-offset); }
+ol[data-x="center"] { left: 50%; transform: translateX(-50%); }
+/* Contained: within the nearest positioned ancestor instead of the window. */
+:host([contained]) ol { position: absolute; z-index: var(--ds-toast-z-index, 60); }
+:host([contained]) ol[data-y="top"] { top: var(--ds-toast-offset); }
+:host([contained]) ol[data-y="bottom"] { bottom: var(--ds-toast-offset); }
+
+.toast {
+  --swipe: 0px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  overflow: hidden;
+  border-radius: var(--ds-radius);
+  background: var(--ds-toast-background);
+  color: var(--ds-toast-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-control-height);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  pointer-events: auto;
+  opacity: 0;
+  transition: transform 400ms ease, opacity 400ms ease;
+}
+ol[data-y="bottom"] .toast { bottom: 0; }
+ol[data-y="top"] .toast { top: 0; }
+ol[data-x="center"] .toast { margin-inline: auto; }
+ol[data-x="left"] .toast { margin-right: auto; }
+ol[data-x="right"] .toast { margin-left: auto; }
+.toast:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 1px; }
+
+/* Entering: from beyond the edge, then into the stack. */
+.toast[data-mounted="false"] { transform: translateY(calc(var(--lift) * -100%)); }
+.toast[data-mounted="true"] { opacity: 1; }
+
+/* Collapsed: the front toast, and the next ones peeking out a little smaller. */
+ol[data-expanded="false"] .toast[data-mounted="true"] {
+  transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05));
+}
+ol[data-expanded="false"] .toast[data-front="false"] { height: var(--front-height); }
+ol[data-expanded="false"] .toast[data-front="false"] .body { opacity: 0; }
+
+/* Expanded: each toast after the ones in front of it. */
+ol[data-expanded="true"] .toast[data-mounted="true"] {
+  transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)));
+}
+
+.toast[data-visible="false"] { opacity: 0; pointer-events: none; }
+.toast[data-swiping="true"] { transition: none; }
+
+/* Leaving: the front one back over its edge, the others fade where they are. */
+.toast[data-removed="true"] { opacity: 0; pointer-events: none; }
+.toast[data-removed="true"][data-front="true"] { transform: translateY(calc(var(--lift) * -100%)); }
+.toast[data-swipe-out="true"] { transform: translateY(calc(var(--swipe) + var(--lift) * -100%)); }
+
+/* Words padded 4px from the chip's edge; each line one control high. */
+.body {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(4px * var(--ds-sf));
+  box-sizing: border-box;
+  min-height: var(--ds-control-height);
+  padding-inline: calc(4px * var(--ds-sf));
+  transition: opacity 400ms ease;
+}
+.icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  --ds-icon-color: currentColor;
+}
+.icon:first-child { margin-left: calc(-4px * var(--ds-sf)); }
+/* The page toaster (0-face/toaster.ts) draws its icons as inline SVG, at ds-icon's size. */
+.icon > svg, .close > svg { width: calc(14px * var(--ds-sf)); height: calc(14px * var(--ds-sf)); }
+.content { flex: 1 1 auto; min-width: 0; }
+.title, .description { white-space: normal; overflow-wrap: anywhere; }
+.description { opacity: 0.7; }
+
+/* Actions are words of the same size, underlined as text buttons are. */
+.button {
+  flex: 0 0 auto;
+  margin: 0 0 0 calc(4px * var(--ds-sf));
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+a.button { display: inline-block; }
+.button.cancel { opacity: 0.7; }
+.button:focus-visible, .close:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; border-radius: 1px; }
+
+.close {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  margin: 0 calc(-4px * var(--ds-sf)) 0 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  --ds-icon-color: currentColor;
+}
+
+.spinner {
+  width: calc(10px * var(--ds-sf));
+  height: calc(10px * var(--ds-sf));
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: ds-toast-spin 720ms linear infinite;
+}
+@keyframes ds-toast-spin { to { transform: rotate(360deg); } }
+
+/* Sonner's rich colours: a meaningful fill for each type, lettered in the ink. */
+:host([rich-colors]) .toast[data-type="success"] { --ds-toast-background: var(--ds-apple-green); }
+:host([rich-colors]) .toast[data-type="info"] { --ds-toast-background: var(--ds-zenith-blue); }
+:host([rich-colors]) .toast[data-type="warning"] { --ds-toast-background: var(--ds-orange); }
+:host([rich-colors]) .toast[data-type="error"] { --ds-toast-background: var(--ds-tuned-red); }
+:host([rich-colors]) .toast:is([data-type="success"], [data-type="info"], [data-type="warning"], [data-type="error"]) {
+  --ds-toast-color: var(--ds-black);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast, .body { transition: none; }
+  .spinner { animation: none; }
+}

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

@@ -3,6 +3,7 @@
   display: inline-flex;
   align-items: center;
 }
+:host([hidden]) { display: none !important; }
 
 .bubble {
   box-sizing: border-box;

package/DS1/3-unit/calendar-base.ts

@@ -0,0 +1,263 @@
+// calendar-base.ts
+// What ds-calendar and ds-calendar-large share: the days a person may reach,
+// today, the selected day, the week's start, events, words in the current
+// language and the grid's keys. Each element draws its own grid; the month
+// calendar lays weeks in rows, the large calendar weeks in columns, and the
+// keys follow the drawing.
+
+import { LitElement, type PropertyValues } from "lit";
+import { getText } from "../0-face/i18n";
+import {
+  addDays,
+  addMonths,
+  clampDay,
+  dayLabel,
+  firstWeekday,
+  isDay,
+  readWeekday,
+  today,
+  weekdayOf,
+  type CalendarEvent,
+  type Day,
+  type Weekday,
+} from "../0-face/calendar";
+
+export type { CalendarEvent, Day } from "../0-face/calendar";
+
+/** Detail of `day-press`: the day and the events on it. Cancel it to keep a selectable calendar's value. */
+export interface CalendarDayDetail {
+  day: Day;
+  events: CalendarEvent[];
+}
+
+/** Detail of `event-press`: the event and the day it was pressed on. */
+export interface CalendarEventDetail {
+  event: CalendarEvent;
+  day: Day;
+}
+
+/**
+ * Detail of `change`: the value a person chose and the one before it. In a
+ * range, `value` is `start/end` once both are chosen and the start alone
+ * while the end is still to come.
+ */
+export interface CalendarChangeDetail {
+  value: string;
+  previous: string;
+  start: Day;
+  end: Day;
+}
+
+/** A value read as a range: `2026-10-21/2026-10-24`, or one day as both ends. Times after a `T` are left off. */
+export function readRange(value: string | null | undefined): { start: Day; end: Day } {
+  const [first = "", second = ""] = (value ?? "").split("/").map(part => part.trim().slice(0, 10));
+  const start = isDay(first) ? first : "";
+  const end = isDay(second) ? second : "";
+  if (start && end && end < start) return { start: end, end: start };
+  return { start, end };
+}
+
+/** Detail of `navigate`: the first month now shown, `YYYY-MM`. */
+export interface CalendarNavigateDetail {
+  month: string;
+}
+
+/** A month written `YYYY-MM` or a day in it, as the first of that month; `null` for anything else. */
+export function readMonth(value: string | null | undefined): Day | null {
+  const text = value?.trim() ?? "";
+  const day = /^\d{4}-\d{2}$/.test(text) ? `${text}-01` : text;
+  return isDay(day) ? `${day.slice(0, 8)}01` : null;
+}
+
+export abstract class CalendarBase extends LitElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    min: { type: String },
+    max: { type: String },
+    today: { type: String },
+    weekStart: { type: String, attribute: "week-start" },
+    selectable: { type: Boolean, reflect: true },
+    range: { type: Boolean, reflect: true },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+    events: { attribute: false },
+    focusDay: { state: true },
+    hoverDay: { state: true },
+  };
+
+  /** The selected day, `YYYY-MM-DD`, or with `range` the days `YYYY-MM-DD/YYYY-MM-DD`; empty for none. */
+  declare value: string;
+  /** The first day a person may choose. */
+  declare min: string | undefined;
+  /** The last day a person may choose. */
+  declare max: string | undefined;
+  /** The day drawn as today; the reader's own today when left out. */
+  declare today: string | undefined;
+  /** The first day of the week: `0`–`6` from Sunday, or a day's English name; the language's own when left out. */
+  declare weekStart: string | undefined;
+  /** Pressing a day selects it and fires `change`. */
+  declare selectable: boolean;
+  /** A selectable calendar chooses a first and a last day. */
+  declare range: boolean;
+  /** The grid's name: a translation key, or literal words. The month's name when left out. */
+  declare label: string | undefined;
+  /** Show `label` as written, never looked up. */
+  declare literal: boolean;
+  /** What happens on the days. */
+  declare events: CalendarEvent[];
+  /** The day that holds the grid's one Tab stop. */
+  declare focusDay: Day | undefined;
+  /** The day under the pointer, which previews a range's end. */
+  declare hoverDay: Day | undefined;
+
+  /** Weeks run along rows (a month) or along columns (the large calendar). */
+  protected abstract readonly weeksRun: "rows" | "columns";
+
+  private readonly relabel = () => this.requestUpdate();
+
+  constructor() {
+    super();
+    this.value = "";
+    this.selectable = false;
+    this.range = false;
+    this.literal = false;
+    this.events = [];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    super.disconnectedCallback();
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+    if (changed.has("value") && this.value && !readRange(this.value).start) this.value = "";
+  }
+
+  /** Shared words, filled in: `words("Week {week}", { week: 42 })`. */
+  protected words(key: string, params?: Record<string, string | number>): string {
+    const text = getText(key, params) || key;
+    return params ? text.replace(/\{\{?(\w+)\}?\}/g, (whole, name: string) => (name in params ? String(params[name]) : whole)) : text;
+  }
+
+  /** The page's name for the grid, or `fallback`. */
+  protected nameOr(fallback: string): string {
+    if (!this.label) return fallback;
+    return this.literal ? this.label : getText(this.label) || this.label;
+  }
+
+  protected get firstDay(): Weekday {
+    return readWeekday(this.weekStart) ?? firstWeekday();
+  }
+
+  protected get todayDay(): Day {
+    return isDay(this.today) ? this.today : today();
+  }
+
+  protected get minDay(): Day | undefined {
+    return isDay(this.min) ? this.min : undefined;
+  }
+
+  protected get maxDay(): Day | undefined {
+    return isDay(this.max) ? this.max : undefined;
+  }
+
+  /** Whether a person may choose the day. */
+  protected allowed(day: Day): boolean {
+    return clampDay(day, this.minDay, this.maxDay) === day;
+  }
+
+  /** The chosen days: the first and the last of a range, or the one day twice. */
+  protected get chosen(): { start: Day; end: Day } {
+    const { start, end } = readRange(this.value);
+    return this.range ? { start, end } : { start, end: start };
+  }
+
+  /** How a day stands to the selection: an end of it, inside it, or neither; with the end still to come, the pointer previews it. */
+  protected selection(day: Day): { selected: boolean; inside: boolean; first: boolean; last: boolean } {
+    let { start, end } = this.chosen;
+    if (this.range && start && !end && this.hoverDay) end = this.hoverDay;
+    if (end && end < start) [start, end] = [end, start];
+    const selected = day === start || day === end;
+    const spans = Boolean(this.range && start && end && start !== end);
+    return { selected, inside: spans && day > start && day < end, first: spans && day === start, last: spans && day === end };
+  }
+
+  /** What a day's cell is called: the whole date, then what is on it. */
+  protected cellLabel(day: Day, events: readonly CalendarEvent[]): string {
+    return [dayLabel(day), ...events.map(event => (event.time ? `${event.time} ${event.title}` : event.title))].join(", ");
+  }
+
+  /** The day a key moves to from `from`, or `null` for a key the grid leaves alone. */
+  protected keyTarget(event: KeyboardEvent, from: Day): Day | null {
+    const rtl = getComputedStyle(this).direction === "rtl";
+    const across = this.weeksRun === "rows" ? 1 : 7;
+    const down = this.weeksRun === "rows" ? 7 : 1;
+    const start = (weekdayOf(from) - this.firstDay + 7) % 7;
+    switch (event.key) {
+      case "ArrowRight": return addDays(from, rtl ? -across : across);
+      case "ArrowLeft": return addDays(from, rtl ? across : -across);
+      case "ArrowDown": return addDays(from, down);
+      case "ArrowUp": return addDays(from, -down);
+      case "Home": return addDays(from, -start);
+      case "End": return addDays(from, 6 - start);
+      case "PageUp": return addMonths(from, event.shiftKey ? -12 : -1);
+      case "PageDown": return addMonths(from, event.shiftKey ? 12 : 1);
+      default: return null;
+    }
+  }
+
+  /** The events a day holds, for `day-press`. */
+  protected abstract eventsOn(day: Day): CalendarEvent[];
+
+  /**
+   * A person pressed a day: `day-press` fires, and unless it is cancelled a
+   * selectable calendar takes the day and fires `change`.
+   */
+  protected press(day: Day) {
+    const pressed = new CustomEvent<CalendarDayDetail>("day-press", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: { day, events: this.eventsOn(day) },
+    });
+    if (!this.dispatchEvent(pressed) || !this.selectable || !this.allowed(day)) return;
+    const previous = this.value || "";
+    let value: string = day;
+    if (this.range) {
+      // The first press starts a range, the second ends it (either way round); a third starts again.
+      const { start, end } = readRange(previous);
+      if (start && !end) value = day < start ? `${day}/${start}` : `${start}/${day}`;
+    }
+    this.focusDay = day;
+    if (value === previous) return;
+    this.value = value;
+    this.hoverDay = undefined;
+    const { start, end } = readRange(value);
+    this.dispatchEvent(new CustomEvent<CalendarChangeDetail>("change", { bubbles: true, composed: true, detail: { value, previous, start, end: this.range ? end : start } }));
+  }
+
+  protected pressEvent(event: CalendarEvent, day: Day) {
+    this.dispatchEvent(new CustomEvent<CalendarEventDetail>("event-press", { bubbles: true, composed: true, detail: { event, day } }));
+  }
+
+  protected announceMonth(month: Day) {
+    this.dispatchEvent(new CustomEvent<CalendarNavigateDetail>("navigate", { bubbles: true, composed: true, detail: { month: month.slice(0, 7) } }));
+  }
+
+  /** Puts keyboard focus on a drawn day once the grid has drawn it. */
+  protected async focusCell(day: Day) {
+    this.focusDay = day;
+    await this.updateComplete;
+    const cell = this.renderRoot.querySelector<HTMLElement>(`[data-day="${day}"]`);
+    cell?.focus({ preventScroll: true });
+    cell?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }
+}