@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/dates.ts

@@ -0,0 +1,185 @@
+// Days and times as the date and time pickers (DatePicker.tsx, TimePicker.tsx and their scripts) hold them: a day as a
+// form saves it (ISO, 2026-11-02), a month as its first day's year and month (2026-11), and a time of day as hh:mm
+// (24-hour). Written out and read back in a language (`locale`, BCP 47: the site's on the site), with Intl, so the
+// names of the months and the weekdays, the order of day, month and year and the week's first day are the language's
+// (in Danish: 02.11.2026, november, man., the week from Monday). No React and no texts here: the scripts load it at once.
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+/** A day (2026-11-02) as a date at noon, so no change of time moves it a day; null when it is not one. */
+export function dateOf(day: string): Date | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(day);
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12);
+  return d.getMonth() === Number(m[2]) - 1 ? d : null;
+}
+
+/** A date's day, as a form saves it (2026-11-02). */
+export const dayOf = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+/** Today, as a day. */
+export const today = () => dayOf(new Date());
+
+/** The month a day is in (2026-11). */
+export const monthOfDay = (day: string) => day.slice(0, 7);
+
+/** A month (2026-11) moved by a number of months. */
+export function addMonths(month: string, months: number): string {
+  const [y, m] = month.split('-').map(Number);
+  return dayOf(new Date(y, m - 1 + months, 1, 12)).slice(0, 7);
+}
+
+/** A day moved by a number of days. */
+export function addDays(day: string, days: number): string {
+  const d = dateOf(day)!;
+  d.setDate(d.getDate() + days);
+  return dayOf(d);
+}
+
+/** A day moved by a number of months, on the same day of the month or, in a shorter month, its last. */
+export function addMonthsToDay(day: string, months: number): string {
+  const d = dateOf(day)!;
+  const month = addMonths(monthOfDay(day), months);
+  const [y, m] = month.split('-').map(Number);
+  const last = new Date(y, m, 0).getDate();
+  return `${month}-${pad(Math.min(d.getDate(), last))}`;
+}
+
+/** A day within the days that can be picked (`min` and `max`, either of them '' for none). */
+export const clampDay = (day: string, min = '', max = '') => (min && day < min ? min : max && day > max ? max : day);
+
+/** The day a week starts with in a language (1 Monday … 7 Sunday), where Intl knows it; else Monday. */
+export function weekStart(locale: string): number {
+  try {
+    const l = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };
+    return (l.getWeekInfo?.() ?? l.weekInfo)?.firstDay ?? 1;
+  } catch {
+    return 1;
+  }
+}
+
+/** A month's weeks, each seven days from the week's first day: a day, or '' for the days of the months before and
+ * after. */
+export function weeksOf(month: string, locale: string): string[][] {
+  const [y, m] = month.split('-').map(Number);
+  const first = new Date(y, m - 1, 1, 12);
+  const lead = (first.getDay() - (weekStart(locale) % 7) + 7) % 7;
+  const length = new Date(y, m, 0).getDate();
+  const cells = [...Array.from({ length: lead }, () => ''), ...Array.from({ length }, (_, i) => `${month}-${pad(i + 1)}`)];
+  while (cells.length % 7) cells.push('');
+  return Array.from({ length: cells.length / 7 }, (_, i) => cells.slice(i * 7, i * 7 + 7));
+}
+
+/** The weekdays from the one the week starts with, each its short and its full name (M and mandag). */
+export function weekdaysOf(locale: string): { short: string; long: string }[] {
+  const start = weekStart(locale);
+  // 2024-01-01 was a Monday.
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(2024, 0, ((start - 1 + i) % 7) + 1, 12);
+    return { short: d.toLocaleDateString(locale, { weekday: 'narrow' }), long: d.toLocaleDateString(locale, { weekday: 'long' }) };
+  });
+}
+
+const firstUp = (text: string, locale: string) => text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+
+/** A month's name and year (November 2026), its name alone (November), or its short name (nov.). */
+export function monthName(month: string, locale: string, style: 'year' | 'long' | 'short' = 'year'): string {
+  const d = dateOf(`${month}-01`)!;
+  return firstUp(
+    style === 'year' ? d.toLocaleDateString(locale, { month: 'long', year: 'numeric' }) : d.toLocaleDateString(locale, { month: style }),
+    locale,
+  );
+}
+
+/** A day written out in full (mandag 2. november 2026), for screen readers. */
+export const dayName = (day: string, locale: string) =>
+  dateOf(day)!.toLocaleDateString(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
+
+/** A day written short (Man. 2. nov.), as a date picker's headline. */
+export const dayHeadline = (day: string, locale: string) =>
+  firstUp(dateOf(day)!.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' }), locale);
+
+/** A day as it is typed in a field, in the language's order (02.11.2026). */
+export const dayTyped = (day: string, locale: string) =>
+  dateOf(day)!.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' });
+
+/** A day typed in a field, in the language's order of day, month and year (2.11.2026, 02-11-2026), as a day; null
+ * when it is not one. */
+export function dayFromTyped(text: string, locale: string): string | null {
+  const numbers = text.match(/\d+/g);
+  if (!numbers || numbers.length !== 3 || text.replace(/[\d\s./-]/g, '')) return null;
+  const order = new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' })
+    .formatToParts(new Date(2024, 0, 1, 12))
+    .map((p) => p.type)
+    .filter((t) => t === 'day' || t === 'month' || t === 'year');
+  const value = Object.fromEntries(order.map((t, i) => [t, numbers[i]]));
+  if (value.year?.length !== 4) return null;
+  const day = `${value.year}-${pad(Number(value.month))}-${pad(Number(value.day))}`;
+  return dateOf(day) ? day : null;
+}
+
+/** Days typed in a field, one or two (02.11.2026 – 08.11.2026), each a day or null. */
+export function daysFromTyped(text: string, locale: string): (string | null)[] {
+  return text
+    .split(/\s[–-]\s|\s*–\s*/)
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map((part) => dayFromTyped(part, locale));
+}
+
+/** A time of day (14:05) as hours and minutes; null when it is not one. */
+export function timeOf(time: string): { hour: number; minute: number } | null {
+  const m = /^(\d{2}):(\d{2})$/.exec(time);
+  if (!m) return null;
+  const hour = Number(m[1]);
+  const minute = Number(m[2]);
+  return hour <= 23 && minute <= 59 ? { hour, minute } : null;
+}
+
+/** Hours and minutes as a form saves them (14:05). */
+export const timeString = (hour: number, minute: number) => `${pad(hour)}:${pad(minute)}`;
+
+/** Two digits (05). */
+export const twoDigits = pad;
+
+/** A time of day as the language writes it, 24-hour (14.05 in Danish), or on a 12-hour clock (`twelve`: 2.05 PM). */
+export const timeTyped = (time: string, locale: string, twelve = false) => {
+  const t = timeOf(time)!;
+  return new Date(2024, 0, 1, t.hour, t.minute).toLocaleTimeString(
+    locale,
+    twelve ? { hour: 'numeric', minute: '2-digit', hourCycle: 'h12' } : { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' },
+  );
+};
+
+/** What the language calls the morning and the afternoon on a 12-hour clock (AM and PM). */
+export const dayPeriods = (locale: string): [string, string] =>
+  [9, 21].map(
+    (hour) =>
+      new Intl.DateTimeFormat(locale, { hour: 'numeric', hourCycle: 'h12' })
+        .formatToParts(new Date(2024, 0, 1, hour))
+        .find((p) => p.type === 'dayPeriod')?.value ?? (hour < 12 ? 'AM' : 'PM'),
+  ) as [string, string];
+
+/** What the language writes between the hours and the minutes (. in Danish). */
+export const timeSeparator = (locale: string) =>
+  new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' })
+    .formatToParts(new Date(2024, 0, 1, 14, 5))
+    .find((p) => p.type === 'literal')
+    ?.value.trim() || ':';
+
+/** A time typed in a field (14.05, 14:05, 1405, 9.30; with `periods`, the language's AM and PM, also 2.05 PM or
+ * 2:05 pm, the hour 1–12), as a time; null when it is not one. */
+export function timeFromTyped(text: string, periods?: [string, string]): string | null {
+  const m = /^\s*(\d{1,2})\s*[.:\s]?\s*(\d{2})\s*(\S*)\s*$/.exec(text);
+  if (!m) return null;
+  let hour = Number(m[1]);
+  const said = m[3].toLowerCase().replace(/\./g, '');
+  if (said) {
+    const at = (periods ?? ['AM', 'PM']).findIndex((p) => p.toLowerCase().replace(/\./g, '') === said);
+    const pm = at >= 0 ? at === 1 : said === 'pm' || said === 'p' ? true : said === 'am' || said === 'a' ? false : null;
+    if (pm === null || !periods || hour < 1 || hour > 12) return null;
+    hour = (hour % 12) + (pm ? 12 : 0);
+  }
+  const time = timeString(hour, Number(m[2]));
+  return timeOf(time) ? time : null;
+}

package/theme/ui/dialog.ts

@@ -0,0 +1,48 @@
+// What a modal dialog (Dialog.tsx in its <dialog> with dialogModalClass, or a full-screen one's with
+// dialogFullScreenModalClass) does in a browser, for the script that shows it (a block's or an app's): dialog(el)
+// gives it its open() and close(). Native <dialog>: focus moves into it and back, Escape closes it, and screen readers
+// know it is modal. Motion: it comes up a little as it opens (ui.css) and goes down and fades as it closes; with reduced
+// motion it appears and disappears at once. Its close button (data-dialog-close: a full-screen one's cross, or a
+// button among a basic one's actions) and Escape close it, and a tap on the scrim (outside it) closes a basic one (a
+// full-screen one holds a task that is not done, so only its buttons close it); the page under it does not scroll
+// while it is open. It moves with the site's motion scheme (motionSpring, @morphemecms/cms/lib/motion.ts).
+import { animate } from 'motion';
+import { motionSpring } from '@morphemecms/cms/lib/motion';
+
+export type DialogControls = { open: () => void; close: () => Promise<void> };
+
+export function dialog(el: HTMLDialogElement): DialogControls {
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const fullScreen = el.classList.contains('dialog-modal-full-screen');
+  let closing = false;
+
+  function open() {
+    if (el.open) return;
+    el.showModal();
+    document.documentElement.style.overflow = 'hidden';
+  }
+
+  async function close() {
+    if (!el.open || closing) return;
+    closing = true;
+    if (!reduce) await animate(el, { opacity: 0, y: 16 }, motionSpring('spatial', 'fast'));
+    el.close();
+    el.style.transform = '';
+    el.style.opacity = '';
+    document.documentElement.style.overflow = '';
+    closing = false;
+  }
+
+  el.querySelectorAll('[data-dialog-close]').forEach((b) => b.addEventListener('click', close));
+  // Escape: animate out instead of the dialog's instant close.
+  el.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    close();
+  });
+  // A tap on the scrim (outside the box) closes a basic dialog.
+  el.addEventListener('click', (e) => {
+    if (e.target === el && !fullScreen) close();
+  });
+
+  return { open, close };
+}

package/theme/ui/dropdownMenu.script.ts

@@ -0,0 +1,166 @@
+// What a dropdown menu (DropdownMenu in Menu.tsx) does on the site, on top of what its popover does by itself (a tap on
+// the button opens and closes it, Escape and a tap outside close it): WAI-ARIA's menu button (aria-expanded on the
+// button; Enter, Space and the down arrow open it on its first item, the up arrow on its last). In the menu the arrow
+// keys go between its items (round), Home and End to the first and the last, and a letter to the next item starting
+// with it; the right arrow, Enter and Space open a submenu on its first item and the left arrow closes it again; Escape
+// closes the menu it is in and goes back to what opened it, and Tab closes them all. The items are one stop for Tab
+// (tabindex -1, so the focus moves with the keys). A submenu also opens when the mouse rests on its item. Choosing an
+// item closes the menu and goes back to the button, ticking a menuitemcheckbox on or off and making a menuitemradio
+// the chosen one of its group first. Where the browser has no CSS anchor positioning, it places each menu at what
+// opened it. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a dropdown menu
+// on the page it does nothing.
+const gap = 4;
+const edge = 8;
+
+// A menu's own items, not its submenus', that can be chosen.
+const itemsOf = (menu: HTMLElement) =>
+  [...menu.querySelectorAll<HTMLElement>('.menu-item')].filter(
+    (i) => i.parentElement?.closest('.menu') === menu && !i.matches(':disabled, [aria-disabled="true"]'),
+  );
+
+// The menu an item opens.
+const submenuOf = (item: Element) =>
+  item.getAttribute('popovertarget') ? document.getElementById(item.getAttribute('popovertarget')!) : null;
+
+/** Where a menu goes without anchor positioning (a fixed one, by its left and top): under the button (above it when
+ * there is no room below), or beside its item (on the other side when there is no room); inside the screen. The
+ * editor's menus (Menu in packages/editor/src/ui.tsx) are placed by it too. */
+export function placeMenu(menu: HTMLElement, opener: HTMLElement, beside = false) {
+  const at = opener.getBoundingClientRect();
+  const { offsetWidth: w, offsetHeight: h } = menu;
+  let left = beside ? at.right : at.left;
+  let top = beside ? at.top : at.bottom + gap;
+  if (left + w > innerWidth - edge) left = beside ? at.left - w : at.right - w;
+  if (top + h > innerHeight - edge) top = beside ? at.bottom - h : at.top - gap - h;
+  menu.style.left = `${Math.max(edge, left)}px`;
+  menu.style.top = `${Math.max(edge, top)}px`;
+}
+
+export default function dropdownMenu() {
+  const anchored = CSS.supports('position-area', 'block-end');
+  document.querySelectorAll<HTMLElement>('[data-dropdown-menu]').forEach((root) => {
+    const button = root.querySelector<HTMLElement>('[data-dropdown-menu-button]');
+    const menu = root.querySelector<HTMLElement>('[data-dropdown-menu-menu]');
+    if (!button || !menu?.popover) return;
+    const menus = [menu, ...menu.querySelectorAll<HTMLElement>('.menu-submenu[popover]')];
+    // Whether a menu that opens takes the focus to its first item (not a submenu the mouse opened, nor one a key
+    // opened, which openOn gives the focus itself).
+    let focusOnOpen: 'first' | null = 'first';
+    let resting: number | undefined;
+    const openers = new Map<HTMLElement, HTMLElement>();
+    // Opens a menu (with a key) and puts the focus on its first or last item at once.
+    const openOn = (m: HTMLElement, which: 'first' | 'last') => {
+      focusOnOpen = null;
+      if (!m.matches(':popover-open')) m.showPopover();
+      focusOnOpen = 'first';
+      const items = itemsOf(m);
+      items[which === 'first' ? 0 : items.length - 1]?.focus();
+    };
+
+    for (const m of menus) {
+      const opener = m === menu ? button : root.querySelector<HTMLElement>(`[popovertarget="${CSS.escape(m.id)}"]`);
+      if (!opener) continue;
+      openers.set(m, opener);
+      opener.setAttribute('aria-expanded', 'false');
+      itemsOf(m).forEach((i) => (i.tabIndex = -1));
+      m.addEventListener('toggle', (e) => {
+        const open = (e as ToggleEvent).newState === 'open';
+        opener.setAttribute('aria-expanded', String(open));
+        if (open) {
+          if (!anchored) placeMenu(m, opener, m !== menu);
+          const items = itemsOf(m);
+          if (focusOnOpen && !m.contains(document.activeElement)) items[0]?.focus();
+          focusOnOpen = 'first';
+        } else if (m.contains(document.activeElement)) opener.focus();
+      });
+    }
+    if (!anchored) {
+      const replace = () => openers.forEach((opener, m) => m.matches(':popover-open') && placeMenu(m, opener, m !== menu));
+      addEventListener('scroll', replace, { capture: true, passive: true });
+      addEventListener('resize', replace, { passive: true });
+    }
+
+    button.addEventListener('keydown', (e) => {
+      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+      e.preventDefault();
+      openOn(menu, e.key === 'ArrowDown' ? 'first' : 'last');
+    });
+
+    menu.addEventListener('keydown', (e) => {
+      const item = (e.target as HTMLElement).closest<HTMLElement>('.menu-item');
+      const m = item?.parentElement?.closest<HTMLElement>('.menu');
+      if (!item || !m) return;
+      const items = itemsOf(m);
+      const at = items.indexOf(item);
+      const sub = submenuOf(item);
+      if (e.key === 'Tab') {
+        menu.hidePopover();
+        return;
+      }
+      if (e.key === 'ArrowRight' && sub) {
+        e.preventDefault();
+        openOn(sub, 'first');
+        return;
+      }
+      if (e.key === 'ArrowLeft' && m !== menu) {
+        e.preventDefault();
+        m.hidePopover();
+        return;
+      }
+      let to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: items.length - 1 }[e.key];
+      // A letter: the next item whose label starts with it.
+      if (to === undefined && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.key.trim()) {
+        const key = e.key.toLocaleLowerCase();
+        const starts = (i: HTMLElement) => i.querySelector('.menu-item-label')?.textContent?.trim().toLocaleLowerCase().startsWith(key);
+        const next = [...items.slice(at + 1), ...items.slice(0, at + 1)].find(starts);
+        if (next) to = items.indexOf(next);
+      }
+      if (to === undefined) return;
+      e.preventDefault();
+      items[(to + items.length) % items.length]?.focus();
+    });
+
+    // A choice: tick it, or make it the chosen one of its group, then close the menu (a link is followed).
+    menu.addEventListener('click', (e) => {
+      const item = (e.target as HTMLElement).closest<HTMLElement>('.menu-item');
+      if (!item || submenuOf(item) || item.matches(':disabled, [aria-disabled="true"]')) return;
+      const role = item.getAttribute('role');
+      if (role === 'menuitemcheckbox') item.setAttribute('aria-checked', String(item.getAttribute('aria-checked') !== 'true'));
+      if (role === 'menuitemradio') {
+        const group = item.closest('[role="group"], [role="menu"]');
+        group?.querySelectorAll('[role="menuitemradio"]').forEach((r) => {
+          if (r.closest('[role="group"], [role="menu"]') === group) r.setAttribute('aria-checked', String(r === item));
+        });
+      }
+      menu.hidePopover();
+      button.focus();
+    });
+
+    // The mouse resting on an item with a submenu opens it (without taking the focus); on another item of the same
+    // menu, an open submenu there closes.
+    menu.addEventListener('pointerover', (e) => {
+      if (e.pointerType !== 'mouse') return;
+      const item = (e.target as HTMLElement).closest<HTMLElement>('.menu-item');
+      const m = item?.parentElement?.closest<HTMLElement>('.menu');
+      if (!item || !m) return;
+      clearTimeout(resting);
+      const sub = submenuOf(item);
+      resting = window.setTimeout(() => {
+        m.querySelectorAll<HTMLElement>('.menu-submenu:popover-open').forEach((s) => {
+          if (s !== sub && s.parentElement?.closest('.menu') === m) s.hidePopover();
+        });
+        if (sub && !sub.matches(':popover-open') && !item.matches(':disabled')) {
+          focusOnOpen = null;
+          sub.showPopover();
+        }
+      }, 150);
+    });
+    menu.addEventListener('pointerleave', () => clearTimeout(resting));
+
+    // The focus moving out of the button and its menus (a tap on something else that takes it) closes them.
+    root.addEventListener('focusout', (e) => {
+      const to = e.relatedTarget as Node | null;
+      if (to && !root.contains(to) && menu.matches(':popover-open')) menu.hidePopover();
+    });
+  });
+}

package/theme/ui/fabMenu.script.ts

@@ -0,0 +1,57 @@
+// What a FAB menu (FabMenu.tsx) does on the site: its FAB opens and closes its actions (aria-expanded, the list's
+// hidden), and while they are open its name is the cross's (data-close-label), else its own (data-label). Opened with a
+// key, the focus goes to the first action; the arrow keys go between them, Home and End to the first and the last;
+// Escape closes it and goes back to the FAB, and a choice, a tap outside it or the focus moving out close it. Run on
+// every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a FAB menu on the page it does
+// nothing.
+export default function fabMenu() {
+  document.querySelectorAll<HTMLElement>('[data-fab-menu]').forEach((root) => {
+    const button = root.querySelector<HTMLButtonElement>('.fab-menu-button');
+    const list = root.querySelector<HTMLElement>('.fab-menu-list');
+    if (!button || !list) return;
+    const items = () => [...list.querySelectorAll<HTMLElement>('a[href], button:not(:disabled)')];
+    const isOpen = () => button.getAttribute('aria-expanded') === 'true';
+
+    const outside = (e: PointerEvent) => {
+      if (!root.contains(e.target as Node)) set(false);
+    };
+    function set(open: boolean, focus?: 'first' | 'button') {
+      button!.setAttribute('aria-expanded', String(open));
+      const name = open ? button!.dataset.closeLabel : button!.dataset.label;
+      if (name) button!.setAttribute('aria-label', name);
+      list!.hidden = !open;
+      if (open) document.addEventListener('pointerdown', outside, true);
+      else document.removeEventListener('pointerdown', outside, true);
+      if (focus === 'button') button!.focus();
+      else if (focus) items()[0]?.focus();
+    }
+
+    button.addEventListener('click', (e) => {
+      const open = !isOpen();
+      set(open, open && e.detail === 0 ? 'first' : undefined);
+    });
+    root.addEventListener('keydown', (e) => {
+      if (!isOpen()) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        set(false, 'button');
+        return;
+      }
+      const all = items();
+      const at = all.indexOf(document.activeElement as HTMLElement);
+      if (at < 0) return;
+      const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: all.length - 1 }[e.key];
+      if (to === undefined) return;
+      e.preventDefault();
+      all[(to + all.length) % all.length].focus();
+    });
+    list.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('a[href], button')) set(false);
+    });
+    // The focus moving to something outside it (Tab); a tap outside is `outside`.
+    root.addEventListener('focusout', (e) => {
+      const to = e.relatedTarget as Node | null;
+      if (isOpen() && to && !root.contains(to)) set(false);
+    });
+  });
+}

package/theme/ui/navigationRail.script.ts

@@ -0,0 +1,47 @@
+// What a navigation rail (NavigationRail.tsx) does on the site: its menu button, and any other button that opens it
+// (data-navigation-rail-menu with aria-controls, the rail's id: for a rail that hides while it is collapsed), expands
+// and collapses it (data-expanded on the rail, aria-expanded on the buttons), and its FAB shows its label only while it
+// is expanded (data-collapsed). A modal one (.navigation-rail-modal) shows its scrim while it is expanded, and the scrim,
+// Escape and following one of its links collapse it again. When it collapses with the focus in it and it hides
+// (.navigation-rail-hide), the focus goes back to the button that opened it. Run on every page by the theme's Base.astro
+// (blockScripts, packages/editor/site/blockScripts.ts); without a rail it does nothing.
+export default function navigationRail() {
+  document.querySelectorAll<HTMLElement>('[data-navigation-rail]').forEach((rail) => {
+    const scrim = rail.previousElementSibling?.matches('[data-navigation-rail-scrim]')
+      ? (rail.previousElementSibling as HTMLElement)
+      : null;
+    const modal = rail.classList.contains('navigation-rail-modal');
+    const hides = rail.classList.contains('navigation-rail-hide');
+    const inside = rail.querySelector<HTMLButtonElement>('[data-navigation-rail-menu]');
+    const outside = rail.id
+      ? [...document.querySelectorAll<HTMLButtonElement>(`[data-navigation-rail-menu][aria-controls="${CSS.escape(rail.id)}"]`)]
+      : [];
+    const menus = [inside, ...outside].filter((menu): menu is HTMLButtonElement => !!menu);
+    let opener: HTMLButtonElement | null = null;
+
+    const set = (expanded: boolean) => {
+      rail.toggleAttribute('data-expanded', expanded);
+      for (const menu of menus) menu.setAttribute('aria-expanded', String(expanded));
+      rail.querySelectorAll('.navigation-rail-header > .extended-fab').forEach((fab) => fab.toggleAttribute('data-collapsed', !expanded));
+      if (scrim) scrim.hidden = !expanded;
+      if (!expanded && hides && rail.contains(document.activeElement)) (opener ?? outside[0])?.focus();
+    };
+
+    for (const menu of menus)
+      menu.addEventListener('click', () => {
+        const expanded = !rail.hasAttribute('data-expanded');
+        opener = expanded && menu !== inside ? menu : opener;
+        set(expanded);
+        // Opened from outside, the focus moves into it, to its own menu button.
+        if (expanded && menu !== inside) inside?.focus();
+      });
+    if (!modal) return;
+    scrim?.addEventListener('click', () => set(false));
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && rail.hasAttribute('data-expanded')) set(false);
+    });
+    rail.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('.navigation-rail-item')) set(false);
+    });
+  });
+}

package/theme/ui/ripple.script.ts

@@ -0,0 +1,159 @@
+// The ripple, Material 3's pressed state (m3.material.io/foundations/interaction/states/applying-states, .ripple in
+// ../styles/ui.css): pressed, a part grows a wave of its content's colour from where it was pressed (from its middle with
+// the keyboard) until the wave covers it, and the wave fades when it is let go. On the parts that are pressed (PARTS),
+// in the part's shape or, on a navigation item, its active indicator's; not on one that cannot be used. A touch waits a
+// moment first, so a finger that scrolls the page does not ripple. One listener on the document, so it also works on
+// what is drawn later (the editor's screens). Run on every page by the theme's Base.astro (blockScripts,
+// packages/editor/site/blockScripts.ts) and by the editor (App.tsx). How it looks is the theme's (--ripple-*); with
+// reduced motion the wave does not grow, it only fades in and out.
+
+/** The parts that ripple when pressed: the buttons, icon buttons and FABs, chips, menu items, tabs and segments, the
+ * navigation's items, list items and cards that link or are tapped, and the pickers' days, years and buttons. */
+const PARTS = [
+  '.button',
+  '.icon-button',
+  '.fab',
+  '.extended-fab',
+  'a.chip',
+  'button.chip',
+  '.chip-action',
+  '.chip-remove',
+  '.menu-item',
+  '.tab',
+  '.segmented-button-segment',
+  '.navigation-bar-item',
+  '.navigation-rail-item',
+  '.navigation-drawer-item',
+  '.navigation-drawer-subitem',
+  '.navigation-drawer-toggle',
+  ':is(a, button, label, [role="button"]).list-item-container',
+  '.list-item-with-control',
+  'a.card',
+  'button.card',
+  '.date-picker-day',
+  '.date-picker-year',
+  '.date-picker-menu-item',
+  '.time-picker-period-button',
+].join(', ');
+
+// Material's: the wave starts at a fifth of the part's longer side and grows past its corners with a soft edge, and
+// stays at least this long, so a quick tap is seen.
+const START = 0.2;
+const SOFT_EDGE = 0.35;
+const SOFT_EDGE_MIN = 75;
+const PADDING = 10;
+const MINIMUM_PRESS_MS = 225;
+// How long a touch waits before it ripples: a scroll that starts within it cancels the touch.
+const TOUCH_DELAY_MS = 150;
+// How long a wave stays after it is let go, when it has no transition to wait for.
+const FADE_MS = 1000;
+
+let started = false;
+
+export default function ripples() {
+  if (started) return;
+  started = true;
+  document.addEventListener('pointerdown', pointerDown, { capture: true, passive: true });
+  document.addEventListener('click', keyboardClick, true);
+}
+
+/** The part that is pressed at `target`, the nearest one (an icon button in a list item); none when it cannot be used. */
+function partAt(target: EventTarget | null) {
+  const part = target instanceof Element ? target.closest<HTMLElement>(PARTS) : null;
+  if (!part) return null;
+  if (part.matches(':disabled, .list-item-with-control:has(:disabled)')) return null;
+  if (part.closest('[aria-disabled="true"], .list-item-disabled, fieldset:disabled')) return null;
+  return part;
+}
+
+/** Where a part's ripple is drawn: an input chip's on the whole chip, a navigation item's on its active indicator (the
+ * icon's, where the indicator is only the box of the icon and the label), else on the part. */
+function surfaceOf(part: HTMLElement) {
+  if (part.matches('.chip-action')) return part.parentElement ?? part;
+  const indicator = part.querySelector<HTMLElement>(':scope > :is(.navigation-bar-indicator, .navigation-rail-indicator)');
+  if (!indicator) return part;
+  if (getComputedStyle(indicator).display !== 'contents') return indicator;
+  return indicator.querySelector<HTMLElement>(':scope > :is(.navigation-bar-icon, .navigation-rail-icon)') ?? part;
+}
+
+/** Starts a wave on `surface`, from the point pressed (else its middle), and gives what lets it go. */
+function press(surface: HTMLElement, x?: number, y?: number) {
+  const box = surface.getBoundingClientRect();
+  const longer = Math.max(box.width, box.height);
+  if (!longer) return () => {};
+  const size = Math.max(Math.floor(longer * START), 1);
+  const scale = (Math.hypot(box.width, box.height) + PADDING + Math.max(longer * SOFT_EDGE, SOFT_EDGE_MIN)) / size;
+  const fromX = x === undefined ? box.width / 2 : x - box.left;
+  const fromY = y === undefined ? box.height / 2 : y - box.top;
+
+  let layer = surface.querySelector<HTMLElement>(':scope > .ripple');
+  if (!layer) {
+    layer = document.createElement('span');
+    layer.className = 'ripple';
+    layer.setAttribute('aria-hidden', 'true');
+    surface.append(layer);
+  }
+  const wave = document.createElement('span');
+  wave.className = 'ripple-wave';
+  wave.style.setProperty('--ripple-size', `${size}px`);
+  wave.style.setProperty('--ripple-from', `${fromX - size / 2}px, ${fromY - size / 2}px`);
+  wave.style.setProperty('--ripple-to', `${box.width / 2 - size / 2}px, ${box.height / 2 - size / 2}px`);
+  wave.style.setProperty('--ripple-scale', `${scale}`);
+  layer.append(wave);
+
+  const pressed = performance.now();
+  const shown = layer;
+  return () => {
+    setTimeout(() => letGo(wave, shown), Math.max(0, MINIMUM_PRESS_MS - (performance.now() - pressed)));
+  };
+}
+
+/** Fades a wave out and takes it away, and its layer with the last one, so the part is as it was. */
+function letGo(wave: HTMLElement, layer: HTMLElement) {
+  const gone = () => {
+    wave.remove();
+    if (!layer.childElementCount) layer.remove();
+  };
+  wave.addEventListener('transitionend', gone, { once: true });
+  setTimeout(gone, FADE_MS);
+  wave.dataset.released = '';
+}
+
+function pointerDown(down: PointerEvent) {
+  if (!down.isPrimary || down.button !== 0) return;
+  const part = partAt(down.target);
+  if (!part) return;
+  const surface = surfaceOf(part);
+  let release: (() => void) | undefined;
+  const start = () => {
+    release ??= press(surface, down.clientX, down.clientY);
+  };
+  const touch = down.pointerType === 'touch';
+  const timer = touch ? setTimeout(start, TOUCH_DELAY_MS) : undefined;
+  if (!touch) start();
+
+  const end = (e: Event) => {
+    if (e instanceof PointerEvent && e.pointerId !== down.pointerId) return;
+    clearTimeout(timer);
+    removeEventListener('pointerup', end, true);
+    removeEventListener('pointercancel', end, true);
+    removeEventListener('contextmenu', end, true);
+    part.removeEventListener('pointerleave', end);
+    // A tap let go within the delay still ripples; a scroll (pointercancel) does not.
+    if (e.type === 'pointerup') start();
+    release?.();
+  };
+  addEventListener('pointerup', end, true);
+  addEventListener('pointercancel', end, true);
+  addEventListener('contextmenu', end, true);
+  if (!touch) part.addEventListener('pointerleave', end);
+}
+
+// A part used from the keyboard (Enter, Space) ripples from its middle. A click from a pointer has its detail, and one
+// from a script or a <label> is on a part without the keyboard's focus.
+function keyboardClick(e: MouseEvent) {
+  if (e.detail !== 0) return;
+  const part = partAt(e.target);
+  if (!part?.matches(':focus-visible, :has(:focus-visible)')) return;
+  press(surfaceOf(part))();
+}