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

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

@@ -1,7 +1,17 @@
 // ds-calendar.ts
-// A month on whole squares: seven days across, a week to a row. By default a
+// A month on whole squares: seven days across, a week to a row. `view` shows
+// one week instead (every event of each day, nothing folded behind "+N") or one
+// day (its events without a time across the top, then its hours, one square
+// each, with the timed events at their hour) or a swimlane (weeks across, a
+// row to an event, each event one bar from its first week to its last);
+// `views` puts Day, Week, Month and Swimlane in the header to change between
+// them. An event over several days is one bar
+// with its name written once, and words that do not fit fade out at the end.
+// By default a
 // day is four squares wide and four high (its date on the first square, two
-// lines of events, one square to spare), drawn in hairline boxes. `compact`
+// lines of events, one square to spare), drawn in hairline boxes with a frame
+// rounded more than a card's; the first week names its days inside its boxes,
+// and a step back, Today and a step on are one plain split. `compact`
 // makes a day one square: the small month a year is drawn from. `picker`
 // makes the calendar a field that opens that small month below it, with the
 // first and last day written out where they can be typed, a switch for a
@@ -14,11 +24,15 @@
 
 import { html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import { getText } from "../0-face/i18n";
 import { dateFormatter, type DateLength } from "../0-face/format";
 import {
+  addDays,
   addMonths,
+  compareDays,
   dateNumber,
+  dayLabel,
   dayOf,
   eventsByDay,
   heatLevels,
@@ -30,21 +44,148 @@ import {
   sameMonth,
   startOfMonth,
   weekdayNames,
+  weekdayOf,
   type CalendarEvent,
   type Day,
   type HeatLevel,
 } from "../0-face/calendar";
 import { CalendarBase, readMonth, readRange, type CalendarChangeDetail } from "./calendar-base";
 import "../2-core/ds-icon";
+import "../2-core/ds-button";
 import metrics from "../1-root/component-metrics.css?inline";
 import controls from "../1-root/controls.css?inline";
 import styles from "./styles/ds-calendar.css?inline";
 
 export * from "./calendar-base";
 
+/** An activity day's fill: one colour, or bands side by side when several share it. */
+function activityFill(events: readonly CalendarEvent[]): string | undefined {
+  if (!events.length) return undefined;
+  const colours = [...new Set(events.map(event => event.color || "var(--ds-calendar-event-fill, var(--ds-apple-green))"))];
+  if (colours.length === 1) return colours[0];
+  const share = 100 / colours.length;
+  return `linear-gradient(90deg, ${colours.map((colour, index) => `${colour} ${index * share}% ${(index + 1) * share}%`).join(", ")})`;
+}
+
 const whole = (value: number | undefined, least: number, most: number, fallback: number) =>
   typeof value === "number" && Number.isFinite(value) ? Math.max(least, Math.min(most, Math.floor(value))) : fallback;
 
+/**
+ * A day's lines of events in a full month: the event that starts a bar on a
+ * line (and how many days the bar runs), `"on"` where a bar from an earlier
+ * day passes over the line, or null where the line is empty.
+ */
+/** What a full calendar shows: a month, a week, a day, or the events as a swimlane over weeks. */
+export type CalendarView = "month" | "week" | "day" | "swimlane";
+
+/** The views in the header, the shortest first, with their shared words. */
+const VIEWS: readonly (readonly [CalendarView, string])[] = [["day", "Day"], ["week", "Week"], ["month", "Month"], ["swimlane", "Swimlane"]];
+
+const isView = (value: unknown): value is CalendarView => VIEWS.some(([view]) => view === value);
+
+/** `views` as an attribute: present and empty for every view the calendar draws, or the views to offer, in order. */
+const viewsConverter = {
+  fromAttribute: (value: string | null): boolean | string[] => {
+    if (value === null || value === "false") return false;
+    const list = value.split(/[\s,]+/).filter(Boolean);
+    return list.length === 0 || value === "true" ? true : list;
+  },
+  toAttribute: (value: boolean | string[]) => (Array.isArray(value) ? value.join(" ") : value ? "" : null),
+};
+
+/** One event's bar in a swimlane: its row, and the first and last week (counted from 0) it covers in view. */
+export interface SwimlaneBar {
+  event: CalendarEvent;
+  row: number;
+  from: number;
+  to: number;
+}
+
+/**
+ * Lays events out as a swimlane over `weeks` (each the first day of a week
+ * of seven): one row each, in the order `eventsByDay` lists them (by first
+ * day, the longer first), each a bar from the week holding its first day to
+ * the week holding its last, held inside the weeks drawn. Events wholly
+ * outside them are left out.
+ */
+export function swimlaneBars(events: readonly CalendarEvent[], weeks: readonly Day[]): SwimlaneBar[] {
+  if (!weeks.length) return [];
+  const first = weeks[0], last = addDays(weeks.at(-1)!, 6);
+  const seen = new Set<CalendarEvent>();
+  const ordered: CalendarEvent[] = [];
+  for (const list of eventsByDay(events, first, last).values()) for (const event of list) if (!seen.has(event)) { seen.add(event); ordered.push(event); }
+  ordered.sort((a, b) => compareDays(a.start, b.start) || compareDays(endOf(b), endOf(a)));
+  const weekOf = (day: Day) => Math.max(0, Math.min(weeks.length - 1, Math.floor(daysBetween(first, day) / 7)));
+  return ordered.map((event, row) => ({ event, row, from: weekOf(event.start < first ? first : event.start), to: weekOf(endOf(event) > last ? last : endOf(event)) }));
+}
+
+/** An event's last day: its end, or its start for one day. */
+const endOf = (event: CalendarEvent): Day => (event.end && isDay(event.end) && event.end > event.start ? event.end : event.start);
+
+/** Whole days from `from` to `to`. */
+const daysBetween = (from: Day, to: Day) => Math.round((Date.UTC(+to.slice(0, 4), +to.slice(5, 7) - 1, +to.slice(8, 10)) - Date.UTC(+from.slice(0, 4), +from.slice(5, 7) - 1, +from.slice(8, 10))) / 864e5);
+
+/** Detail of `view-change`. */
+export interface CalendarViewDetail { view: CalendarView }
+
+/** What a full month's day writes before its date: its weekday's name (the first week), and its week's number. */
+type DayLabel = { weekday?: string; today?: boolean; week?: number };
+
+export type CalendarLine = { event: CalendarEvent; span: number } | "on" | null;
+
+/**
+ * Lays one week's events on lines, so an event over several days keeps its
+ * line and is one bar with its name written once: each event takes the
+ * lowest line free on all its days in the week, longest first as `byDay`
+ * lists them. A day whose events need more lines than `lines` keeps the last
+ * one for "+N", and a bar breaks there and goes on after it; `shown` says
+ * which days are drawn at all (a bar stops at a day that is not).
+ */
+export function weekLines(
+  week: readonly Day[],
+  byDay: ReadonlyMap<Day, readonly CalendarEvent[]>,
+  lines: number,
+  shown: (day: Day) => boolean = () => true,
+): { lines: CalendarLine[]; hidden: number }[] {
+  const lineOf = new Map<CalendarEvent, number>();
+  const taken = week.map(() => new Set<number>());
+  week.forEach((day, column) => {
+    for (const event of byDay.get(day) ?? []) {
+      if (lineOf.has(event)) continue;
+      const columns: number[] = [];
+      for (let next = column; next < week.length && (byDay.get(week[next]) ?? []).includes(event); next++) columns.push(next);
+      let line = 0;
+      while (columns.some(next => taken[next].has(line))) line++;
+      lineOf.set(event, line);
+      for (const next of columns) taken[next].add(line);
+    }
+  });
+  // How many lines each day draws: all of them, or one fewer for "+N".
+  const room = week.map(day => {
+    if (!shown(day)) return 0;
+    const events = byDay.get(day) ?? [];
+    const deepest = Math.max(-1, ...events.map(event => lineOf.get(event)!));
+    return deepest < lines ? lines : Math.max(0, lines - 1);
+  });
+  return week.map((day, column) => {
+    const events = byDay.get(day) ?? [];
+    const drawn: CalendarLine[] = [];
+    for (let line = 0; line < room[column]; line++) {
+      const event = events.find(candidate => lineOf.get(candidate) === line);
+      if (!event) { drawn.push(null); continue; }
+      const before = column > 0 && line < room[column - 1] && (byDay.get(week[column - 1]) ?? []).includes(event);
+      if (before) { drawn.push("on"); continue; }
+      let span = 1;
+      while (column + span < week.length && line < room[column + span] && (byDay.get(week[column + span]) ?? []).includes(event)) span++;
+      drawn.push({ event, span });
+    }
+    // Drop the empty lines at the foot, so a quiet day draws nothing under its date.
+    while (drawn.length && drawn.at(-1) === null) drawn.pop();
+    const hidden = room[column] < lines ? events.filter(event => lineOf.get(event)! >= room[column]).length : 0;
+    return { lines: drawn, hidden };
+  });
+}
+
 /** One end of a picker's value: its day and, when it has one, its time (`14:30`). */
 export interface CalendarEnd {
   day: Day;
@@ -102,12 +243,38 @@ const openPickers = new Set<Calendar>();
  *   small month.
  * @prop {number} dayWidth - Squares per day (`day-width`): 4 by default, 1
  *   when compact.
+ * @prop {string} view - `month` (the default), `week`, `day` or `swimlane`:
+ *   the weeks from the month shown across (a week half a day wide, so it is
+ *   as wide as the month), each event one row with one bar from its first
+ *   week to its last. A compact calendar and a picker are always a month.
+ * @prop {boolean | string[]} views - Day, Week, Month and Swimlane in the
+ *   header, to change `view`; or the views to offer, in order
+ *   (`views="month swimlane"`). A name the calendar does not draw is the
+ *   page's own view: chosen, the calendar keeps its header (the month's title,
+ *   the arrows moving a month) and shows what the page puts in its slot of
+ *   that name (`<div slot="earnings">`) in place of the days.
+ * @prop {Record<string, string>} viewNames - The words for each view in the
+ *   switch (property only), over the shared Day, Week, Month and Swimlane;
+ *   a page's own view is named by its name when left out.
+ * @prop {string} date - The day the week or day view shows, `YYYY-MM-DD`;
+ *   today, or the first of the month shown, by default.
  * @prop {number} lines - Lines of events under a day's date: 2 by default.
  * @prop {boolean} weekNumbers - Write the week's number (`week-numbers`) on
  *   its first day.
- * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
+ * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height,
+ *   and every other view stands in that same height (the weekdays and six
+ *   weeks): the week's days grow to it, the day's hours fill it, the
+ *   swimlane's rows fill it and scroll beyond it, and a page's own view gets
+ *   it, so nothing under the calendar moves when the view changes.
  * @prop {boolean} outsideDays - Draw the days of the months before and after
  *   in the title grey (`outside-days`); pressing one moves there.
+ * @prop {boolean} activity - The days as quiet squares, a contribution grid:
+ *   weeks across a square each, as the swimlane runs, and the days down them,
+ *   every other weekday named before them and the month over its weeks; a
+ *   day on which something happens is filled with its events' colours, split
+ *   into bands when several share it. Dates stay in each day's name and
+ *   tooltip. Takes the place of the large calendar's months in squares.
+ * @prop {number} months - How many months activity draws from `month`: 1 by default.
  * @prop {boolean} heat - Light each day by how much happens on it, as a
  *   contribution graph does: the events' `count`s added up (one each by
  *   default), in four steps of the busiest day shown.
@@ -116,7 +283,12 @@ const openPickers = new Set<Calendar>();
  *   by default.
  * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
  *   With a header, pressing the title travels by months and years: the
- *   twelve months of the year, then twelve years, and back down.
+ *   twelve months of the year, then twelve years, and back down. With a
+ *   header, a swipe sideways across the days (a finger or a pen), or a
+ *   trackpad's sideways scroll, does what the arrows do, the next month
+ *   towards the start and the one before towards the end, and stops where
+ *   they stop; the days take sideways touches for it, so a carousel or a
+ *   page around the calendar does not move with them.
  * @prop {boolean} noToday - Leave out the Today button (`no-today`).
  * @prop {string} min - The first day a person may choose.
  * @prop {string} max - The last day a person may choose.
@@ -135,6 +307,11 @@ const openPickers = new Set<Calendar>();
  * @prop {boolean} disabled - A picker cannot be opened.
  * @prop {boolean} open - A picker's month is open.
  * @prop {CalendarEvent[]} events - What happens on the days (property only).
+ * @prop {(month: Date, view: string) => string} monthHeading - Names the month view's title, and a page's own view's,
+ *   (property only): given the first of the month shown, it returns the words,
+ *   so a product can write "Events in October" instead of "October 2026". The
+ *   week and day views, the twelve months and the twelve years keep their own
+ *   titles, and the title button's label still says what it opens.
  *
  * @fires day-press - A day was pressed or chosen with Enter or Space;
  *   `{ day, events }`. Cancelable: cancelled, a selectable calendar keeps its value.
@@ -142,7 +319,8 @@ const openPickers = new Set<Calendar>();
  *   `{ value, previous, start, end }`, `end` empty while it is still to come.
  * @fires input - A picker's value changed, the same moment as `change`.
  * @fires event-press - An event was pressed; `{ event, day }`.
- * @fires navigate - A person moved to another month; `{ month }`.
+ * @fires navigate - A person moved to another month, week or day; `{ month }`.
+ * @fires view-change - A person chose another view; `{ view }`.
  * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
  *
  * A selectable calendar shows Clear right under its dates while something is chosen, and `clear()`
@@ -163,11 +341,17 @@ export class Calendar extends CalendarBase {
     dayWidth: { type: Number, attribute: "day-width" },
     lines: { type: Number },
     weekNumbers: { type: Boolean, attribute: "week-numbers", reflect: true },
+    view: { type: String, reflect: true },
+    views: { reflect: true, converter: viewsConverter },
+    viewNames: { attribute: false },
+    date: { type: String, reflect: true },
     fixed: { type: Boolean, reflect: true },
     outsideDays: { type: Boolean, attribute: "outside-days", reflect: true },
     noHeader: { type: Boolean, attribute: "no-header", reflect: true },
     noToday: { type: Boolean, attribute: "no-today", reflect: true },
     heat: { type: Boolean, reflect: true },
+    activity: { type: Boolean, reflect: true },
+    months: { type: Number },
     heatMax: { type: Number, attribute: "heat-max" },
     picker: { type: Boolean, reflect: true },
     name: { type: String, reflect: true },
@@ -179,23 +363,34 @@ export class Calendar extends CalendarBase {
     open: { type: Boolean, reflect: true },
     unfolded: { state: true },
     embedded: { attribute: false },
+    monthHeading: { attribute: false },
     level: { state: true },
     browseYear: { state: true },
     pickFocus: { state: true },
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+  /** Words cut short (the title, a weekday, the picker's value, an event's name on its bar) fade over their last square, never "…": marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".title:not(.title-button), .title-text, .weekday, .trigger .text, .event .name, .swimlane-month" });
 
   declare month: string | undefined;
+  /** Names the month view's title from the first of the month shown; the month and year when unset. */
+  declare monthHeading: ((month: Date, view: string) => string) | undefined;
   declare compact: boolean;
   declare dayWidth: number | undefined;
   declare lines: number | undefined;
   declare weekNumbers: boolean;
+  declare view: CalendarView | (string & {});
+  declare views: boolean | string[];
+  declare viewNames: Record<string, string> | undefined;
+  declare date: string | undefined;
   declare fixed: boolean;
   declare outsideDays: boolean;
   declare noHeader: boolean;
   declare noToday: boolean;
   declare heat: boolean;
+  declare activity: boolean;
+  declare months: number | undefined;
   declare heatMax: number | undefined;
   declare picker: boolean;
   declare name: string | undefined;
@@ -231,11 +426,14 @@ export class Calendar extends CalendarBase {
     super();
     this.compact = false;
     this.weekNumbers = false;
+    this.view = "month";
+    this.views = false;
     this.fixed = false;
     this.outsideDays = false;
     this.noHeader = false;
     this.noToday = false;
     this.heat = false;
+    this.activity = false;
     this.picker = false;
     this.time = false;
     this.required = false;
@@ -281,6 +479,88 @@ export class Calendar extends CalendarBase {
     return this.byDay.get(day) ?? [];
   }
 
+  /** The view drawn: a compact calendar and a picker are always a month. */
+  get shownView(): CalendarView {
+    if (this.picker || this.compact) return "month";
+    if (isView(this.view)) return this.view;
+    return this.viewChoices.includes(this.view) ? (this.view as CalendarView) : "month";
+  }
+
+  /** The views offered in the header, in order: every one the calendar draws, or the page's list. */
+  get viewChoices(): string[] {
+    const views = this.views;
+    if (Array.isArray(views)) return [...new Set(views.map(view => String(view).trim()).filter(Boolean))];
+    return views ? VIEWS.map(([view]) => view) : [];
+  }
+
+  /** Whether the view shown is the page's own, drawn in its slot. */
+  private get ownView() {
+    return !isView(this.shownView);
+  }
+
+  /** A view's words in the switch: the page's, else the shared ones, else its name. */
+  private viewName(view: string): string {
+    const shared = VIEWS.find(([choice]) => choice === view)?.[1];
+    const word = this.viewNames?.[view] ?? (shared ? this.words(shared) : view);
+    // The switch's options are written `value:words,value:words`.
+    return word.replace(/,/g, " ");
+  }
+
+  /** Whether the view moves by days (a week or a day) rather than by months (a month or a swimlane). */
+  private get byDays() {
+    const view = this.shownView;
+    return view === "week" || view === "day";
+  }
+
+  /** The day the week or day view shows: `date`, else today in the month shown, else its first. */
+  get shownDay(): Day {
+    if (isDay(this.date)) return this.date;
+    const month = this.shownMonth;
+    return sameMonth(this.todayDay, month) ? this.todayDay : month;
+  }
+
+  /** The seven days of the week `day` falls in. */
+  private weekOf(day: Day): Day[] {
+    const start = addDays(day, -((weekdayOf(day) - this.firstDay + 7) % 7));
+    return Array.from({ length: 7 }, (_, index) => addDays(start, index));
+  }
+
+  /** Shows another week or day around `day`, and says so with `navigate`. */
+  showDay(day: Day, announce = false) {
+    if (!isDay(day) || day === this.date) return;
+    this.date = day;
+    this.month = day.slice(0, 7);
+    this.unfolded = undefined;
+    if (announce) this.announceMonth(day);
+  }
+
+  /** Changes the view, as Day, Week and Month do, and says so with `view-change`. */
+  showView(view: CalendarView) {
+    if (view === this.shownView) return;
+    if (!isDay(this.date)) this.date = this.shownDay;
+    this.view = view;
+    this.unfolded = undefined;
+    this.dispatchEvent(new CustomEvent<CalendarViewDetail>("view-change", { bubbles: true, composed: true, detail: { view } }));
+  }
+
+  /** The split button's choice; its own change event stays inside, since a calendar's change is a chosen day. */
+  private onViewChange = (event: Event) => {
+    event.stopPropagation();
+    const view = (event as CustomEvent<{ value: string }>).detail?.value;
+    if (view && (isView(view) || this.viewChoices.includes(view))) this.showView(view as CalendarView);
+  };
+
+  /** Brings a day into view: its month, its week or the day itself. */
+  private bringIntoView(day: Day) {
+    const view = this.shownView;
+    if (!this.byDays) {
+      if (!sameMonth(day, this.shownMonth)) this.showMonth(day, true);
+    } else if (view === "day" || !this.weekOf(this.shownDay).includes(day)) this.showDay(day, true);
+  }
+
+  /** Each shown day's lines of events, laid out a week at a time in render(). */
+  private laidOut = new Map<Day, { lines: CalendarLine[]; hidden: number }>();
+
   protected willUpdate(changed: PropertyValues<this>) {
     super.willUpdate(changed);
     this.style.setProperty("--ds-calendar-day-squares", String(this.squaresPerDay));
@@ -299,6 +579,13 @@ export class Calendar extends CalendarBase {
 
   protected updated(changed: PropertyValues<this>) {
     super.updated(changed);
+    // A day opens its hours an hour before its first timed event, or at seven.
+    if (this.shownView === "day" && (changed.has("view") || changed.has("date") || changed.has("events"))) {
+      const hours = this.renderRoot.querySelector<HTMLElement>(".hours");
+      const first = hours?.querySelector<HTMLElement>(".hour[data-busy]")?.dataset.hour;
+      const open = hours?.querySelector<HTMLElement>(`.hour[data-hour="${Math.max(0, (first ? Number(first) : 8) - 1)}"]`);
+      if (hours && open) hours.scrollTop = open.offsetTop;
+    }
     if (changed.has("value") || changed.has("required")) {
       this.internals?.setFormValue(this.value || null);
       if (this.required && !this.value) this.internals?.setValidity({ valueMissing: true }, this.pickerWords(undefined, "Choose a date"), this.trigger ?? undefined);
@@ -333,6 +620,7 @@ export class Calendar extends CalendarBase {
   showToday() {
     this.level = "days";
     this.showMonth(this.todayDay, true);
+    if (this.shownView !== "month") this.showDay(this.todayDay, true);
     this.focusDay = this.todayDay;
   }
 
@@ -394,7 +682,11 @@ export class Calendar extends CalendarBase {
 
   /** The arrows: a month among the days, a year among the months, twelve years among the years. */
   private step(direction: -1 | 1) {
-    if (this.level === "days") return direction < 0 ? this.previousMonth() : this.nextMonth();
+    if (this.level === "days") {
+      const view = this.shownView;
+      if (this.byDays) return this.showDay(addDays(this.shownDay, direction * (view === "week" ? 7 : 1)), true);
+      return direction < 0 ? this.previousMonth() : this.nextMonth();
+    }
     this.browseYear += direction * (this.level === "months" ? 1 : 12);
     if (this.level === "years") this.pickFocus = (this.pickFocus ?? this.browseYear) + direction * 12;
   }
@@ -412,6 +704,7 @@ export class Calendar extends CalendarBase {
     const month = `${String(this.browseYear).padStart(4, "0")}-${String(value + 1).padStart(2, "0")}-01`;
     this.level = "days";
     this.showMonth(month, true);
+    if (this.shownView !== "month") this.showDay(month as Day, false);
     const day = [this.focusDay, this.chosen.start, this.todayDay].find(day => day && sameMonth(day, month)) ?? month;
     void this.focusCell(day);
   }
@@ -533,10 +826,62 @@ export class Calendar extends CalendarBase {
     const target = this.keyTarget(event, day);
     if (!target) return;
     event.preventDefault();
-    if (!sameMonth(target, this.shownMonth)) this.showMonth(target, true);
+    this.bringIntoView(target);
     void this.focusCell(target);
   };
 
+  // A swipe sideways across the days or the months, as the arrows: by finger or pen, or a trackpad's
+  // sideways scroll. Read from the arrows themselves, so a swipe goes nowhere an arrow cannot.
+  private swipe?: { id: number; x: number; y: number; at: number };
+  private swipedAt = 0;
+  private wheel = { dx: 0, at: 0, locked: 0 };
+
+  private swipeTo(direction: -1 | 1) {
+    const arrow = this.renderRoot.querySelector<HTMLButtonElement>(`.header [part~="${direction < 0 ? "previous" : "next"}"]`);
+    if (!arrow || arrow.disabled) return false;
+    this.step(direction);
+    return true;
+  }
+
+  private get rtl() {
+    return getComputedStyle(this).direction === "rtl";
+  }
+
+  private onSwipeStart = (event: PointerEvent) => {
+    this.swipe = event.pointerType === "mouse" || !event.isPrimary ? undefined : { id: event.pointerId, x: event.clientX, y: event.clientY, at: event.timeStamp };
+  };
+
+  private onSwipeEnd = (event: PointerEvent) => {
+    const swipe = this.swipe;
+    this.swipe = undefined;
+    if (!swipe || event.pointerId !== swipe.id) return;
+    const dx = (event.clientX - swipe.x) * (this.rtl ? -1 : 1);
+    const dy = event.clientY - swipe.y;
+    if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy) * 2 || event.timeStamp - swipe.at > 800) return;
+    // A day the swipe started on is not pressed by it.
+    if (this.swipeTo(dx < 0 ? 1 : -1)) this.swipedAt = Date.now();
+  };
+
+  private onSwipeWheel = (event: WheelEvent) => {
+    if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
+    event.preventDefault();
+    const now = Date.now();
+    if (now < this.wheel.locked) return;
+    if (now - this.wheel.at > 200) this.wheel.dx = 0;
+    this.wheel.at = now;
+    this.wheel.dx += event.deltaX * (this.rtl ? -1 : 1);
+    if (Math.abs(this.wheel.dx) < 60) return;
+    const direction = this.wheel.dx > 0 ? 1 : -1;
+    this.wheel = { dx: 0, at: 0, locked: now + 500 };
+    this.swipeTo(direction);
+  };
+
+  private onSwipeClick = (event: MouseEvent) => {
+    if (Date.now() - this.swipedAt > 400) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+
   private onClick = (event: MouseEvent) => {
     const path = event.composedPath() as HTMLElement[];
     const find = (selector: string) => path.find(node => node instanceof HTMLElement && node.matches(selector));
@@ -557,7 +902,7 @@ export class Calendar extends CalendarBase {
     this.focusDay = day;
     this.press(day);
     // A day of the month before or after takes the calendar there.
-    if (!sameMonth(day, this.shownMonth)) this.showMonth(day, true);
+    this.bringIntoView(day);
   };
 
   /** While a range waits for its end, the day under the pointer previews it. */
@@ -581,26 +926,41 @@ export class Calendar extends CalendarBase {
     const level = this.level;
     const year = this.browseYear;
     const span = this.yearSpan;
-    const labels = { days: ["Previous month", "Next month"], months: ["Previous year", "Next year"], years: ["Earlier years", "Later years"] }[level];
-    const blocked = level === "days"
+    const view = this.shownView;
+    const labels = level === "days" && this.byDays
+      ? view === "week" ? ["Previous week", "Next week"] : ["Previous day", "Next day"]
+      : { days: ["Previous month", "Next month"], months: ["Previous year", "Next year"], years: ["Earlier years", "Later years"] }[level];
+    const shownDays = view === "week" ? this.weekOf(this.shownDay) : [this.shownDay];
+    const blocked = level === "days" && this.byDays
+      ? [Boolean(min && addDays(shownDays[0], -1) < min), Boolean(max && addDays(shownDays.at(-1)!, 1) > max)]
+      : level === "days"
       ? [before, after]
       : level === "months"
         ? [Boolean(min && year - 1 < Number(min.slice(0, 4))), Boolean(max && year + 1 > Number(max.slice(0, 4)))]
         : [Boolean(min && span[0] - 1 < Number(min.slice(0, 4))), Boolean(max && span[0] + 12 > Number(max.slice(0, 4)))];
     const arrow = (which: "previous" | "next") => html`<button
-      class="ds-button ds-button--icon nav"
+      class="nav"
       part=${which}
       type="button"
       aria-label=${this.words(labels[which === "previous" ? 0 : 1])}
       ?disabled=${blocked[which === "previous" ? 0 : 1]}
       @click=${() => this.step(which === "previous" ? -1 : 1)}
-    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
+    ><ds-icon type=${(this.compact ? "chevron-" : "") + (which === "previous" ? "left" : "right")} size=${this.compact ? "large" : nothing} aria-hidden="true"></ds-icon></button>`;
     const title = level === "days"
-      ? monthTitle(month, this.compact ? "short" : "long")
+      ? view === "week"
+        ? this.rangeTitle(shownDays[0], shownDays[6])
+        : view === "day"
+          ? dayLabel(this.shownDay)
+          : view === "swimlane"
+            ? this.monthRangeTitle(this.swimlaneWeeks)
+            : this.monthHeading
+            ? this.monthHeading(new Date(Number(month.slice(0, 4)), Number(month.slice(5, 7)) - 1, 1), view)
+            : monthTitle(month, this.compact ? "short" : "long")
       : level === "months"
         ? this.yearName(year)
         : `${this.yearName(span[0])} – ${this.yearName(span[0] + 11)}`;
-    return html`<div class="header" part="header">
+    const switchable = this.viewChoices.length > 1 && !this.compact && !this.picker;
+    return html`<div class="header" part="header" ?data-views=${switchable}>
       ${level === "years"
         ? html`<span class="title" id="title" aria-live="polite">${title}</span>`
         : html`<button
@@ -610,26 +970,38 @@ export class Calendar extends CalendarBase {
             aria-label=${`${title}, ${this.words("Choose a month and year")}`}
             @click=${this.levelUp}
           ><span class="title-text" id="title" aria-live="polite">${title}</span></button>`}
-      <span class="controls">
-        ${this.noToday || this.squaresPerDay < 2 ? nothing : html`<button class="ds-button today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
+      ${switchable ? html`<ds-button
+        class="views"
+        part="views"
+        split
+        literal
+        aria-label=${this.words("View")}
+        .options=${this.viewChoices.map(choice => `${choice}:${this.viewName(choice)}`).join(",")}
+        .value=${view}
+        @change=${this.onViewChange}
+      ></ds-button>` : nothing}
+      <span class="controls" role="group" aria-label=${this.words("Date")}>
         ${arrow("previous")}
+        ${this.noToday || this.squaresPerDay < 2 ? nothing : html`<button class="today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
         ${arrow("next")}
       </span>
     </div>`;
   }
 
-  private renderDay(day: Day, column: number) {
-    const month = this.shownMonth;
-    const outside = !sameMonth(day, month);
-    if (outside && !this.outsideDays) return html`<div role="gridcell" class="day outside" part="day outside"></div>`;
+  private renderDay(day: Day, inView = sameMonth(day, this.shownMonth), tabDay = this.tabDay, label?: DayLabel) {
+    const outside = !inView;
+    if (outside && !this.outsideDays) {
+      return html`<div role="gridcell" class="day outside" part="day outside">${label?.weekday || label?.week
+        ? html`<span class="date-line" aria-hidden="true">${this.renderLabel(label)}</span>`
+        : nothing}</div>`;
+    }
     const events = this.eventsOn(day);
     const lines = this.eventLines;
     const isToday = day === this.todayDay;
     const { selected, inside, first, last } = this.selection(day);
     const allowed = this.allowed(day);
     const unfolded = this.unfolded === day;
-    const shown = unfolded || events.length <= lines ? events : events.slice(0, Math.max(0, lines - 1));
-    const hidden = events.length - shown.length;
+    const laid = this.laidOut.get(day) ?? { lines: [], hidden: 0 };
     const heat = this.heatByDay.get(day);
     const parts = ["day", isToday ? "today" : "", selected ? "selected" : "", heat ? "heat" : ""].filter(Boolean).join(" ");
     return html`<div
@@ -637,7 +1009,7 @@ export class Calendar extends CalendarBase {
       class="day"
       part=${parts}
       data-day=${day}
-      tabindex=${!outside && day === this.tabDay ? 0 : -1}
+      tabindex=${!outside && day === tabDay ? 0 : -1}
       aria-label=${this.cellLabel(day, events)}
       aria-selected=${this.selectable ? String(selected || inside) : nothing}
       aria-current=${isToday ? "date" : nothing}
@@ -653,29 +1025,306 @@ export class Calendar extends CalendarBase {
       ?data-open=${unfolded}
     >
       <span class="date-line" aria-hidden="true">
-        ${this.weekNumbers && column === 0 && !this.compact ? html`<span class="week-number">${this.words("W{week}", { week: isoWeek(day) })}</span>` : nothing}
+        ${label ? this.renderLabel(label) : nothing}
         <span class="date">${dateNumber(day)}</span>
       </span>
       ${lines > 0 && events.length
         ? html`<span class="events" aria-hidden="true">
-            ${shown.map(event => html`<span
-              class="event"
-              part="event"
-              data-event=${events.indexOf(event)}
-              style=${event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate)` : nothing}
-            >${event.time ? html`<span class="time">${event.time}</span>` : nothing}<span class="name">${event.title}</span></span>`)}
-            ${hidden > 0 && !unfolded ? html`<span class="more" part="more" data-more>+${hidden}</span>` : nothing}
+            ${unfolded
+              ? events.map(event => this.renderEvent(event, events, 1))
+              : laid.lines.map(line => line === null || line === "on"
+                ? html`<span class="line" data-line=${line ?? "empty"}></span>`
+                : this.renderEvent(line.event, events, line.span))}
+            ${laid.hidden > 0 && !unfolded ? html`<span class="more" part="more" data-more>+${laid.hidden}</span>` : nothing}
           </span>`
         : nothing}
     </div>`;
   }
 
+  /** What a day writes before its date: its weekday's name in the first week, and the week's number on its first day. */
+  private renderLabel(label: DayLabel) {
+    return html`${label.weekday ? html`<span class="weekday-name" ?data-today=${label.today}>${label.weekday}</span>` : nothing}${label.week
+      ? html`<span class="week-number">${this.words("W{week}", { week: label.week })}</span>`
+      : nothing}`;
+  }
+
+  /** A week's days as one title: "Oct 18 – 24, 2026", in the language's own way. */
+  private rangeTitle(from: Day, to: Day): string {
+    const format = dateFormatter({ month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
+    const at = (day: Day) => Date.UTC(Number(day.slice(0, 4)), Number(day.slice(5, 7)) - 1, Number(day.slice(8, 10)), 12);
+    return typeof format.formatRange === "function" ? format.formatRange(at(from), at(to)) : `${format.format(at(from))} – ${format.format(at(to))}`;
+  }
+
+  /** The first day of each week a swimlane draws: from the week holding the month's first, a week to each square the month has across. */
+  private get swimlaneWeeks(): Day[] {
+    const first = this.shownMonth;
+    const start = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
+    const count = Math.max(4, 7 * this.squaresPerDay);
+    return Array.from({ length: count }, (_, index) => addDays(start, index * 7));
+  }
+
+  /** The month owning most of a week: its Thursday's, counted from the week's first day. */
+  private ownerOf(weekStart: Day): Day {
+    return startOfMonth(addDays(weekStart, 3));
+  }
+
+  /** The months a swimlane covers as one title: "Oct 2026 – Jan 2027". */
+  private monthRangeTitle(weeks: readonly Day[]): string {
+    const from = this.ownerOf(weeks[0]), to = this.ownerOf(weeks.at(-1)!);
+    const format = dateFormatter({ month: "short", year: "numeric", timeZone: "UTC" });
+    const at = (day: Day) => Date.UTC(Number(day.slice(0, 4)), Number(day.slice(5, 7)) - 1, 15);
+    if (from === to) return monthTitle(from);
+    return typeof format.formatRange === "function" ? format.formatRange(at(from), at(to)) : `${format.format(at(from))} – ${format.format(at(to))}`;
+  }
+
+  /**
+   * The events as a swimlane: weeks across, a square each; over them the
+   * months, named where the month owning the week changes, and each week's
+   * first date (today's date in its disc on today's week); then a row to an
+   * event, a square high, each one bar from its first week to its last.
+   */
+  private renderSwimlane() {
+    const weeks = this.swimlaneWeeks;
+    const bars = swimlaneBars(this.events ?? [], weeks);
+    // Fixed, the rows (a square each) fill the month's height under the months and dates, and scroll past it.
+    const fit = this.fixed ? Math.max(1, 6 * (this.eventLines + 2) - 1) : 6;
+    const rows = Math.max(fit, bars.length + 1);
+    const today = this.todayDay;
+    const todayWeek = weeks.findIndex(start => today >= start && today <= addDays(start, 6));
+    const months: { column: number; span: number; month: Day }[] = [];
+    weeks.forEach((start, column) => {
+      const month = this.ownerOf(start);
+      const last = months.at(-1);
+      if (last && last.month === month) last.span++;
+      else months.push({ column, span: 1, month });
+    });
+    const range = (event: CalendarEvent) => {
+      const end = event.end && isDay(event.end) && event.end > event.start ? event.end : event.start;
+      return end === event.start ? dayLabel(event.start) : this.rangeTitle(event.start, end);
+    };
+    return this.swipeFrame(html`<div
+        class="swimlane"
+        part="swimlane"
+        role="group"
+        ?data-travel=${this.travelled}
+        aria-label=${this.nameOr(this.monthRangeTitle(weeks))}
+        style=${`--ds-calendar-weeks: ${weeks.length}; --ds-calendar-rows: ${rows}; --ds-calendar-fit: ${fit}`}
+      >
+        <div class="swimlane-months" part="months" aria-hidden="true">
+          ${months.map(({ column, span, month }, index) => html`<span class="swimlane-month" style=${`grid-column: ${column + 1} / span ${span}`}>${
+            index === 0 || month.slice(5, 7) === "01" ? monthTitle(month, "short") : monthName(month, "short")
+          }</span>`)}
+        </div>
+        <div class="swimlane-dates" part="dates" aria-hidden="true">
+          ${weeks.map((start, column) => column === todayWeek
+            ? html`<span class="swimlane-date" data-today><span class="date">${dateNumber(today)}</span></span>`
+            : html`<span class="swimlane-date"><span class="date">${dateNumber(start)}</span></span>`)}
+        </div>
+        <div class="swimlane-scroll" part="scroll"><div class="swimlane-grid" part="grid">
+          ${Array.from({ length: rows }, (_, row) => weeks.map((_, column) => html`<span
+            class="cell"
+            aria-hidden="true"
+            style=${`grid-row: ${row + 1}; grid-column: ${column + 1}`}
+            ?data-first-row=${row === 0}
+            ?data-last-row=${row === rows - 1}
+            ?data-first-column=${column === 0}
+            ?data-last-column=${column === weeks.length - 1}
+          ></span>`))}
+          ${bars.map(({ event, row, from, to }, index) => {
+            const fill = event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate); ` : "";
+            return html`<button
+              type="button"
+              class="event"
+              part="event"
+              data-event=${index}
+              aria-label=${`${event.title}, ${range(event)}`}
+              style=${`${fill}grid-row: ${row + 1}; grid-column: ${from + 1} / ${to + 2}`}
+              @click=${() => this.pressEvent(event, event.start)}
+            ><span class="name">${event.title}</span></button>`;
+          })}
+        </div></div>
+      </div>`);
+  }
+
+  /** The first day of each week activity draws: from the week holding the month's first to the one holding its last month's last day. */
+  private get activityWeeks(): Day[] {
+    const first = this.shownMonth;
+    const end = addDays(addMonths(first, whole(this.months, 1, 36, 1)), -1);
+    const weeks: Day[] = [];
+    for (let day = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7)); day <= end; day = addDays(day, 7)) weeks.push(day);
+    return weeks;
+  }
+
+  /**
+   * The days as quiet squares: every other weekday named down the start, the
+   * months over their weeks, and a week to a column a square wide, its days
+   * down it, each a square drawn two pixels in with a picture's corners,
+   * filled with its events' colours. Days outside the months stay empty.
+   */
+  private renderActivity() {
+    const weeks = this.activityWeeks;
+    const first = this.shownMonth;
+    const end = addMonths(first, whole(this.months, 1, 36, 1));
+    this.byDay = eventsByDay(this.events ?? [], weeks[0], addDays(weeks.at(-1)!, 6));
+    const short = weekdayNames(this.firstDay, "short");
+    const narrow = weekdayNames(this.firstDay, "narrow");
+    const long = weekdayNames(this.firstDay, "long");
+    const today = this.todayDay;
+    const months: { column: number; span: number; month: Day }[] = [];
+    // A week is named by the month owning most of it, held to the months drawn.
+    const lastMonth = addMonths(end, -1);
+    weeks.forEach((start, column) => {
+      const owner = this.ownerOf(start);
+      const month = owner < first ? first : owner > lastMonth ? lastMonth : owner;
+      const last = months.at(-1);
+      if (last && last.month === month) last.span++;
+      else months.push({ column, span: 1, month });
+    });
+    return html`<div class="calendar" part="calendar">
+      ${this.renderHeader()}
+      <div class="activity" part="activity" style=${`--ds-calendar-weeks: ${weeks.length}`}>
+        <div class="activity-rail" part="weekdays" aria-hidden="true">
+          ${short.map((name, row) => html`<span class="activity-weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
+        </div>
+        <div class="activity-weeks">
+          <div class="activity-months" part="months" aria-hidden="true">
+            ${months.map(({ column, span, month }, index) => html`<span class="activity-month" style=${`grid-column: ${column + 1} / span ${span}`}>${
+              index === 0 || month.slice(5, 7) === "01" ? monthTitle(month, "short") : monthName(month, "short")
+            }</span>`)}
+          </div>
+          <div
+            class="activity-grid"
+            part="grid"
+            role="grid"
+            aria-label=${this.nameOr(months.length > 1 ? this.monthRangeTitle(weeks) : monthTitle(first))}
+            @click=${this.onClick}
+          >
+            ${short.map((_, row) => html`<div role="row" class="activity-row">
+              <span role="rowheader" class="activity-hidden">${long[row]}</span>
+              ${weeks.map((start, column) => {
+                const day = addDays(start, row);
+                const style = `grid-row: ${row + 1}; grid-column: ${column + 1}`;
+                if (day < first || day >= end) return html`<span role="gridcell" class="activity-day" aria-hidden="true" style=${style}></span>`;
+                const events = this.eventsOn(day);
+                const fill = activityFill(events);
+                const label = this.cellLabel(day, events);
+                const { selected } = this.selection(day);
+                return html`<span
+                  role="gridcell"
+                  class="activity-day"
+                  part=${["day", day === today ? "today" : "", events.length ? "filled" : ""].filter(Boolean).join(" ")}
+                  data-day=${day}
+                  aria-label=${label}
+                  title=${label}
+                  aria-current=${day === today ? "date" : nothing}
+                  aria-selected=${this.selectable ? String(selected) : nothing}
+                  ?data-filled=${events.length > 0}
+                  ?data-selected=${selected}
+                  style=${`${style};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
+                ></span>`;
+              })}
+            </div>`)}
+          </div>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  /** A view drawn under the header that swipes as the arrows move: the swimlane and a page's own view. */
+  private swipeFrame(content: unknown) {
+    const swipes = !this.noHeader;
+    return html`<div
+      class="calendar"
+      part="calendar"
+      ?data-swipe=${swipes}
+      @pointerdown=${swipes ? this.onSwipeStart : nothing}
+      @pointerup=${swipes ? this.onSwipeEnd : nothing}
+      @pointercancel=${() => (this.swipe = undefined)}
+      @wheel=${swipes ? this.onSwipeWheel : nothing}
+      @click=${{ handleEvent: this.onSwipeClick, capture: true }}
+    >
+      ${this.renderHeader()}
+      ${content}
+    </div>`;
+  }
+
+  /** A page's own view: what it puts in the slot named after the view, as wide as the month. */
+  private renderOwnView() {
+    const view = this.shownView;
+    return this.swipeFrame(html`<div class="own-view" part="own-view" data-view=${view} ?data-travel=${this.travelled}><slot name=${view}></slot></div>`);
+  }
+
+  /**
+   * One day: its events without a time across the top, a day's width each,
+   * then its hours, a square each, in an area that scrolls, with each timed
+   * event at its hour beside the others of that hour.
+   */
+  private renderDayView() {
+    const day = this.shownDay;
+    this.byDay = eventsByDay(this.events ?? [], day, day);
+    const events = this.eventsOn(day);
+    const allDay = events.filter(event => !event.time);
+    const hourName = dateFormatter({ hour: "numeric", timeZone: "UTC" });
+    const hours = Array.from({ length: 24 }, (_, hour) => ({
+      hour,
+      name: hourName.format(Date.UTC(2000, 0, 1, hour)),
+      events: events.filter(event => event.time && Number(event.time.slice(0, 2)) === hour),
+    }));
+    return html`<div class="calendar" part="calendar">
+      ${this.renderHeader()}
+      ${this.level !== "days" ? this.renderPicks(6) : html`<div
+        class="day-view"
+        part="day-view"
+        data-day=${day}
+        aria-label=${this.cellLabel(day, events)}
+        @click=${this.onClick}
+      >
+        ${allDay.length ? html`<div class="all-day" part="all-day">${allDay.map(event => this.renderEvent(event, events, 1))}</div>` : nothing}
+        <div class="hours" part="hours">
+          ${hours.map(({ hour, name, events: atHour }) => html`<div class="hour" part="hour" data-hour=${hour} ?data-busy=${atHour.length > 0}>
+            <span class="hour-name">${name}</span>
+            <span class="hour-events">${atHour.map(event => this.renderEvent(event, events, 1))}</span>
+          </div>`)}
+        </div>
+      </div>`}
+    </div>`;
+  }
+
+  /** An event on its line: one bar over `span` days, its name written once. */
+  private renderEvent(event: CalendarEvent, events: readonly CalendarEvent[], span: number) {
+    const fill = event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate);` : "";
+    return html`<span
+      class="event"
+      part="event"
+      data-event=${events.indexOf(event)}
+      data-span=${span > 1 ? span : nothing}
+      style=${fill || span > 1 ? `${fill}${span > 1 ? ` --ds-calendar-event-span: ${span}` : ""}` : nothing}
+    >${event.time ? html`<span class="time">${event.time}</span>` : nothing}<span class="name">${event.title}</span></span>`;
+  }
+
   render() {
     if (this.picker) return this.renderPicker();
+    if (this.activity && this.level === "days") return this.renderActivity();
     const month = this.shownMonth;
     const first = this.firstDay;
-    const weeks = monthWeeks(month, first, this.fixed);
+    const view = this.shownView;
+    if (view === "day" && this.level === "days") return this.renderDayView();
+    if (view === "swimlane" && this.level === "days") return this.renderSwimlane();
+    if (this.ownView && this.level === "days") return this.renderOwnView();
+    const weeks = view === "week" ? [this.weekOf(this.shownDay)] : monthWeeks(month, first, this.fixed);
     this.byDay = eventsByDay(this.events ?? [], weeks[0][0], weeks.at(-1)![6]);
+    this.laidOut = new Map();
+    // In view: the week's days, or the month's (the days around it are drawn only with outside-days).
+    const inView = (day: Day) => view === "week" || sameMonth(day, month);
+    const drawn = (day: Day) => inView(day) || this.outsideDays;
+    // A week shows every event of each day: as many lines as its fullest day needs.
+    const depth = view === "week"
+      ? Math.max(this.eventLines, ...weekLines(weeks[0], this.byDay, 99).map(day => day.lines.length))
+      : this.eventLines;
+    for (const week of weeks) weekLines(week, this.byDay, depth, drawn).forEach((laid, column) => this.laidOut.set(week[column], laid));
+    const tabDay = view === "week"
+      ? [this.focusDay, this.chosen.start, this.todayDay].find(day => day && weeks[0].includes(day)) ?? weeks[0][0]
+      : this.tabDay;
     // Heat is measured over the days of the month shown, so the neighbours' days never set its scale.
     this.heatByDay = this.heat ? heatLevels(new Map([...this.byDay].filter(([day]) => sameMonth(day, month))), this.heatMax) : new Map();
     // A compact month names its days in a letter (one square) or two (wider); a full month in short.
@@ -685,14 +1334,33 @@ export class Calendar extends CalendarBase {
         : weekdayNames(first, "short").map(name => (/^\p{Script=Latin}/u.test(name) ? name.replace(/\.$/, "").slice(0, 2) : name))
       : weekdayNames(first, "short");
     const long = weekdayNames(first, "long");
-    return html`<div class="calendar" part="calendar" @focusout=${this.onFocusOut} @pointerover=${this.onPointerOver} @pointerleave=${() => (this.hoverDay = undefined)}>
+    // Inside a day's box the name is short where the day is three squares or more, and a letter where it is narrower.
+    const inside = this.squaresPerDay >= 3 ? short : weekdayNames(first, "narrow");
+    const today = this.todayDay;
+    const todayColumn = drawn(today) && weeks.some(week => week.includes(today)) ? (weekdayOf(today) - first + 7) % 7 : -1;
+    const swipes = !this.noHeader;
+    return html`<div
+      class="calendar"
+      part="calendar"
+      ?data-swipe=${swipes}
+      @focusout=${this.onFocusOut}
+      @pointerover=${this.onPointerOver}
+      @pointerleave=${() => (this.hoverDay = undefined)}
+      @pointerdown=${swipes ? this.onSwipeStart : nothing}
+      @pointerup=${swipes ? this.onSwipeEnd : nothing}
+      @pointercancel=${() => (this.swipe = undefined)}
+      @wheel=${swipes ? this.onSwipeWheel : nothing}
+      @click=${{ handleEvent: this.onSwipeClick, capture: true }}
+    >
       ${this.renderHeader()}
       ${this.level !== "days" && !this.noHeader ? this.renderPicks(weeks.length) : html`<div
         class="grid"
         part="grid"
         role="grid"
+        data-view=${view}
         ?data-travel=${this.travelled}
-        aria-label=${this.nameOr(monthTitle(month))}
+        aria-label=${this.nameOr(view === "week" ? this.rangeTitle(weeks[0][0], weeks[0][6]) : monthTitle(month))}
+        style=${view === "week" ? `--ds-calendar-lines: ${depth}` : nothing}
         aria-multiselectable=${this.selectable ? "true" : nothing}
         @keydown=${this.onKeyDown}
         @click=${this.onClick}
@@ -700,7 +1368,13 @@ export class Calendar extends CalendarBase {
         <div role="row" class="weekdays" part="weekdays">
           ${short.map((name, index) => html`<span role="columnheader" class="weekday" aria-label=${long[index]}>${name}</span>`)}
         </div>
-        ${weeks.map(week => html`<div role="row" class="week" part="week">${week.map((day, column) => this.renderDay(day, column))}</div>`)}
+        ${weeks.map((week, row) => html`<div role="row" class="week" part="week">${week.map((day, column) => this.renderDay(day, inView(day), tabDay, this.compact ? undefined : {
+          // A full month names its days inside the first week's boxes, at their start, today's weekday in today's red.
+          weekday: row === 0 ? inside[column] : undefined,
+          today: row === 0 && todayColumn === column,
+          // The week's number on its first day, counted from the week's middle so a week from Sunday takes its Monday's.
+          week: this.weekNumbers && column === 0 && this.squaresPerDay >= 3 && week.some(drawn) ? isoWeek(addDays(day, 3)) : undefined,
+        }))}</div>`)}
       </div>`}
       ${this.renderClear()}
     </div>`;
@@ -779,7 +1453,7 @@ export class Calendar extends CalendarBase {
     month.renderRoot.querySelector<HTMLElement>('[data-day][tabindex="0"]')?.focus({ preventScroll: true });
   }
 
-  /** Below the field, half a square from it, or above when there is more room there; held inside the screen. */
+  /** Directly against the field, or above when there is more room there; held inside the screen. */
   private place = () => {
     const panel = this.panel, trigger = this.trigger;
     if (!this.shown || !panel || !trigger) return;
@@ -789,7 +1463,7 @@ export class Calendar extends CalendarBase {
     const left = viewport?.offsetLeft ?? 0, top = viewport?.offsetTop ?? 0;
     const width = viewport?.width ?? view.innerWidth, height = viewport?.height ?? view.innerHeight;
     const box = panel.getBoundingClientRect();
-    const gap = (parseFloat(getComputedStyle(panel).paddingTop) || 9) + 1;
+    const gap = 0;
     // The face is one control high at the foot of its square: measure from that square.
     const square = Math.max(rect.height, gap * 2);
     const foot = rect.bottom, head = rect.bottom - square;