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

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" });
+  }
+}

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

@@ -12,6 +12,9 @@ import styles from "./styles/ds-accordion.css?inline";
  * Usage (with translation text):
  * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
  *
+ * Usage (with text someone wrote, shown as it stands and never translated):
+ * <ds-accordion literal summary="Ideas for spring" details="Plant the bulbs"></ds-accordion>
+ *
  * Usage (with slotted details content):
  * <ds-accordion summary="How it began">
  *   <div slot="details">Rich HTML content here</div>
@@ -21,6 +24,7 @@ export class Accordion extends LitElement {
   static properties = {
     summary: { type: String },
     details: { type: String },
+    literal: { type: Boolean, reflect: true },
     open: { type: Boolean, reflect: true },
     control: { type: String, reflect: true },
     _hasSlottedContent: { type: Boolean, state: true },
@@ -28,6 +32,8 @@ export class Accordion extends LitElement {
 
   declare summary: string;
   declare details: string;
+  /** The summary and details are what someone wrote, not translation keys. */
+  declare literal: boolean;
   declare open: boolean;
   declare control: string;
   declare _hasSlottedContent: boolean;
@@ -36,6 +42,7 @@ export class Accordion extends LitElement {
     super();
     this.summary = "";
     this.details = "";
+    this.literal = false;
     this.open = false;
     this.control = "native";
     this._hasSlottedContent = false;
@@ -80,7 +87,7 @@ export class Accordion extends LitElement {
       <details ?open=${this.open}>
         <summary>
           <ds-row class="summaryRow" centered>
-            <ds-text .text=${this.summary}></ds-text>
+            <ds-text .text=${this.summary} ?literal=${this.literal}></ds-text>
             <ds-icon class="chevron" aria-hidden="true">
               <svg
                 viewBox="0 0 10.157 8.219"
@@ -103,6 +110,7 @@ export class Accordion extends LitElement {
             ? html`<ds-text
                 class="detailsText"
                 .text=${this.details}
+                ?literal=${this.literal}
               ></ds-text>`
             : ""}
         </div>

package/DS1/3-unit/ds-avatar-group.ts

@@ -10,6 +10,7 @@ export class AvatarGroup extends LitElement {
     hasLead: { state: true },
     hasMembers: { state: true },
   };
+  /** Avatars have one size; `compact` is kept for products that still name it. */
   declare size: "default" | "compact";
   declare vertical: boolean;
   declare private hasLead: boolean;

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

@@ -0,0 +1,349 @@
+// ds-calendar-large.ts
+// Months side by side as squares: a week to a column, the seven days down it,
+// drawn one and a half times the grid (a square of 30px, lines of 1.5px)
+// inside a rounded frame that scrolls sideways. A day on which something
+// happens is filled with its colour, split into bands when several share it;
+// a date is written only on today and where an event starts or ends.
+
+import { html, nothing, unsafeCSS, type PropertyValues } from "lit";
+import { define } from "../0-face/define";
+import {
+  addDays,
+  addMonths,
+  dateNumber,
+  eventsByDay,
+  monthName,
+  monthTitle,
+  startOfMonth,
+  weekdayNames,
+  weekdayOf,
+  type CalendarEvent,
+  type Day,
+} from "../0-face/calendar";
+import { CalendarBase, readMonth } from "./calendar-base";
+import "../2-core/ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-calendar-large.css?inline";
+
+export * from "./calendar-base";
+
+/** The fill for a day: one colour, or bands side by side. */
+function fillOf(events: readonly CalendarEvent[]): string | undefined {
+  if (!events.length) return undefined;
+  const colours = [...new Set(events.map(event => event.color || "var(--ds-calendar-event-fill)"))];
+  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(", ")})`;
+}
+
+/**
+ * @element ds-calendar-large
+ * @prop {string} start - The first month drawn, `YYYY-MM`; the month before
+ *   today's by default.
+ * @prop {number} months - How many months are drawn: 6 by default.
+ * @prop {number} scale - How many times the grid it is drawn: 1.5 by default.
+ * @prop {string} value - The selected day, `YYYY-MM-DD`.
+ * @prop {boolean} selectable - Pressing a day selects it and fires `change`.
+ * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
+ * @prop {string} min - The first day a person may choose.
+ * @prop {string} max - The last day a person may choose.
+ * @prop {string} weekStart - The week's first day (`week-start`); the
+ *   language's own by default.
+ * @prop {string} today - The day drawn as today; the reader's own by default.
+ * @prop {CalendarEvent[]} events - What happens on the days (property only).
+ *
+ * @fires day-press - A day was pressed or chosen with Enter or Space; `{ day, events }`.
+ * @fires change - A person selected a day; `{ value, previous }`.
+ * @fires navigate - The months drawn moved on or back; `{ month }`, the first one.
+ *
+ * @example
+ * <ds-calendar-large start="2026-09" months="6"></ds-calendar-large>
+ */
+export class CalendarLarge extends CalendarBase {
+  static properties = {
+    ...CalendarBase.properties,
+    start: { type: String, reflect: true },
+    months: { type: Number },
+    scale: { type: Number },
+    noHeader: { type: Boolean, attribute: "no-header", reflect: true },
+    visible: { state: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+
+  declare start: string | undefined;
+  declare months: number | undefined;
+  declare scale: number | undefined;
+  declare noHeader: boolean;
+  /** The month at the start of the view, named in the title. */
+  declare visible: Day | undefined;
+
+  protected readonly weeksRun = "columns" as const;
+
+  private byDay = new Map<Day, CalendarEvent[]>();
+  private placed = false;
+  private frame = 0;
+
+  constructor() {
+    super();
+    this.noHeader = false;
+  }
+
+  /** The first of the first month drawn. */
+  get firstMonth(): Day {
+    return readMonth(this.start) ?? addMonths(startOfMonth(this.todayDay), -1);
+  }
+
+  private get monthCount() {
+    const count = this.months;
+    return typeof count === "number" && Number.isFinite(count) ? Math.max(1, Math.min(36, Math.floor(count))) : 6;
+  }
+
+  /** The first day of each week drawn, from the week holding the first month's first day. */
+  private get weekStarts(): Day[] {
+    const first = this.firstMonth;
+    const from = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
+    const last = addDays(addMonths(first, this.monthCount), -1);
+    const weeks: Day[] = [];
+    for (let day = from; day <= last; day = addDays(day, 7)) weeks.push(day);
+    return weeks;
+  }
+
+  private get lastDay(): Day {
+    return addDays(this.weekStarts.at(-1)!, 6);
+  }
+
+  protected eventsOn(day: Day): CalendarEvent[] {
+    return this.byDay.get(day) ?? [];
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+    const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : 1.5;
+    this.style.setProperty("--ds-calendar-scale", String(scale));
+  }
+
+  protected firstUpdated() {
+    // Open on today's month when it is drawn, else on the first.
+    const today = this.todayDay;
+    this.scrollToDay(today >= this.weekStarts[0] && today <= this.lastDay ? startOfMonth(today) : this.firstMonth, false);
+    this.placed = true;
+  }
+
+  disconnectedCallback() {
+    cancelAnimationFrame(this.frame);
+    super.disconnectedCallback();
+  }
+
+  private get scroller() {
+    return this.renderRoot.querySelector<HTMLElement>(".scroller");
+  }
+
+  private columnOf(day: Day): number {
+    return this.weekStarts.findIndex(start => day >= start && day <= addDays(start, 6));
+  }
+
+  /** Scrolls the week holding `day` to the start of the view. */
+  scrollToDay(day: Day, smooth = true) {
+    const scroller = this.scroller;
+    const column = this.columnOf(day);
+    if (!scroller || column < 0) return;
+    const cell = scroller.querySelector<HTMLElement>(".cell")?.getBoundingClientRect().width ?? 30;
+    const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const rtl = getComputedStyle(this).direction === "rtl";
+    scroller.scrollTo({ left: (rtl ? -1 : 1) * column * cell, behavior: smooth && !reduce ? "smooth" : "auto" });
+    this.visible = startOfMonth(day);
+  }
+
+  /** Moves the view a month back or on; past the months drawn, the months move with it. */
+  private step(by: -1 | 1) {
+    const target = addMonths(this.visible ?? this.firstMonth, by);
+    const first = this.firstMonth;
+    const end = addMonths(first, this.monthCount);
+    if (target < first || target >= end) {
+      this.start = addMonths(first, by).slice(0, 7);
+      this.announceMonth(addMonths(first, by));
+      void this.updateComplete.then(() => this.scrollToDay(target, false));
+      return;
+    }
+    this.scrollToDay(target);
+  }
+
+  /** The month before, as the previous arrow does. */
+  previousMonth() { this.step(-1); }
+
+  /** The month after, as the next arrow does. */
+  nextMonth() { this.step(1); }
+
+  /** Brings today into view, moving the months drawn when it is outside them. */
+  showToday() {
+    const today = this.todayDay;
+    if (today < this.weekStarts[0] || today > this.lastDay) {
+      const first = addMonths(startOfMonth(today), -1);
+      this.start = first.slice(0, 7);
+      this.announceMonth(first);
+      void this.updateComplete.then(() => this.scrollToDay(startOfMonth(today), false));
+    } else {
+      this.scrollToDay(startOfMonth(today));
+    }
+    this.focusDay = today;
+  }
+
+  private onScroll = () => {
+    cancelAnimationFrame(this.frame);
+    this.frame = requestAnimationFrame(() => {
+      const scroller = this.scroller;
+      const cell = scroller?.querySelector<HTMLElement>(".cell")?.getBoundingClientRect().width;
+      if (!scroller || !cell) return;
+      const column = Math.min(this.weekStarts.length - 1, Math.max(0, Math.round(Math.abs(scroller.scrollLeft) / cell)));
+      // The month that owns most of the first week in view.
+      this.visible = startOfMonth(addDays(this.weekStarts[column], 3));
+    });
+  };
+
+  private get tabDay(): Day {
+    const first = this.weekStarts[0], last = this.lastDay;
+    for (const day of [this.focusDay, this.chosen.start, this.todayDay]) if (day && day >= first && day <= last) return day;
+    return this.firstMonth;
+  }
+
+  private onKeyDown = (event: KeyboardEvent) => {
+    const cell = (event.target as HTMLElement).closest<HTMLElement>("[data-day]");
+    if (!cell) return;
+    const day = cell.dataset.day as Day;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.press(day);
+      return;
+    }
+    const target = this.keyTarget(event, day);
+    if (!target) return;
+    event.preventDefault();
+    if (target < this.weekStarts[0] || target > this.lastDay) {
+      const by = target < this.weekStarts[0] ? -1 : 1;
+      const first = addMonths(this.firstMonth, by);
+      this.start = first.slice(0, 7);
+      this.announceMonth(first);
+    }
+    void this.focusCell(target);
+  };
+
+  private onClick = (event: MouseEvent) => {
+    const cell = (event.composedPath() as HTMLElement[]).find(node => node instanceof HTMLElement && node.dataset?.day);
+    if (!cell) return;
+    const day = cell.dataset.day as Day;
+    this.focusDay = day;
+    this.press(day);
+  };
+
+  private renderHeader() {
+    if (this.noHeader) return nothing;
+    const arrow = (which: "previous" | "next") => html`<button
+      class="ds-button ds-button--icon nav"
+      part=${which}
+      type="button"
+      aria-label=${this.words(which === "previous" ? "Previous month" : "Next month")}
+      @click=${() => (which === "previous" ? this.previousMonth() : this.nextMonth())}
+    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
+    return html`<div class="header" part="header">
+      <span class="title" aria-live="polite">${monthTitle(this.visible ?? this.firstMonth)}</span>
+      <span class="controls">
+        ${arrow("previous")}
+        <button class="ds-button ds-button--secondary" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>
+        ${arrow("next")}
+      </span>
+    </div>`;
+  }
+
+  render() {
+    const weeks = this.weekStarts;
+    const first = weeks[0], last = this.lastDay;
+    this.byDay = eventsByDay(this.events ?? [], first, last);
+    const short = weekdayNames(this.firstDay, "short");
+    const narrow = weekdayNames(this.firstDay, "narrow");
+    const long = weekdayNames(this.firstDay, "long");
+    const today = this.todayDay;
+    const tab = this.tabDay;
+    // Each month's name stands over the week holding its first day.
+    const labels: { column: number; span: number; day: Day }[] = [];
+    for (let month = this.firstMonth, index = 0; index < this.monthCount; index++, month = addMonths(month, 1)) {
+      const column = this.columnOf(month);
+      const next = this.columnOf(addMonths(month, 1));
+      labels.push({ column, span: Math.max(1, (next < 0 ? weeks.length : next) - column), day: month });
+    }
+    const ends = new Set<Day>();
+    for (const event of this.events ?? []) {
+      ends.add(event.start);
+      if (event.end) ends.add(event.end);
+    }
+    return html`<div class="calendar" part="calendar" style=${`--ds-calendar-weeks: ${weeks.length}`}>
+      ${this.renderHeader()}
+      <div class="body">
+        <div class="rail" part="weekdays" aria-hidden="true">
+          ${short.map((name, row) => html`<span class="weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
+        </div>
+        <div class="scroller" part="scroller" @scroll=${this.onScroll}>
+          <div class="months" aria-hidden="true">
+            ${labels.map(({ column, span, day }) => html`<span class="month" style=${`grid-column: ${column + 1} / span ${span}`}>${
+              day.slice(5, 7) === "01" || day === this.firstMonth ? monthTitle(day, "short") : monthName(day, "short")
+            }</span>`)}
+          </div>
+          <div class="frame" part="frame">
+            <div
+              class="grid"
+              part="grid"
+              role="grid"
+              aria-label=${this.nameOr(`${monthTitle(this.firstMonth)} – ${monthTitle(addMonths(this.firstMonth, this.monthCount - 1))}`)}
+              @keydown=${this.onKeyDown}
+              @click=${this.onClick}
+            >
+              ${short.map((_, row) => html`<div role="row" class="row">
+                <span role="rowheader" class="hidden">${long[row]}</span>
+                ${weeks.map((start, column) => {
+                  const day = addDays(start, row);
+                  const events = this.eventsOn(day);
+                  const isToday = day === today;
+                  const { selected, inside } = this.selection(day);
+                  const written = isToday || selected || (events.length > 0 && ends.has(day));
+                  const fill = fillOf(events);
+                  return html`<div
+                    role="gridcell"
+                    class="cell"
+                    part=${["cell", isToday ? "today" : "", selected ? "selected" : "", events.length ? "filled" : ""].filter(Boolean).join(" ")}
+                    data-day=${day}
+                    tabindex=${day === tab ? 0 : -1}
+                    aria-label=${this.cellLabel(day, events)}
+                    aria-selected=${this.selectable ? String(selected || inside) : nothing}
+                    aria-current=${isToday ? "date" : nothing}
+                    aria-disabled=${this.allowed(day) ? nothing : "true"}
+                    ?data-today=${isToday}
+                    ?data-selected=${selected}
+                    ?data-inside=${inside}
+                    ?data-filled=${events.length > 0}
+                    ?data-first-row=${row === 0}
+                    ?data-first-column=${column === 0}
+                    style=${`grid-row: ${row + 1}; grid-column: ${column + 1};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
+                  >${written ? html`<span class="date" aria-hidden="true">${dateNumber(day)}</span>` : nothing}</div>`;
+                })}
+              </div>`)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (this.placed && changed.has("start") && this.visible && !this.focusDay) this.scrollToDay(this.visible, false);
+  }
+}
+
+define("ds-calendar-large", CalendarLarge);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-calendar-large": CalendarLarge;
+  }
+}