@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/search.script.ts

@@ -0,0 +1,92 @@
+// What a search (Search.tsx) does on the site: its bar opens the search view (a modal <dialog>: over the whole screen
+// on a phone, docked where the bar is from 48rem, .search-view-docked with --search-view-top, -left and -width), with the
+// focus in its field; the back button, Escape and a tap outside close it, and the focus goes back to the bar. What is
+// written narrows the results to those whose text has it (the message .search-view-empty when none has), the arrow keys
+// move through them (aria-activedescendant on the field, aria-selected on the option), and Enter follows the one they
+// are on. The page under it does not scroll while it is open. Run on every page by the theme's Base.astro
+// (blockScripts, packages/editor/site/blockScripts.ts); without a search it does nothing.
+const fold = (text: string) => text.toLocaleLowerCase().normalize('NFKD').replace(/\p{M}/gu, '').trim();
+
+export default function search() {
+  const wide = matchMedia('(width >= 48rem)');
+
+  document.querySelectorAll<HTMLElement>('[data-search]').forEach((search) => {
+    const bar = search.querySelector<HTMLElement>('.search-bar');
+    const opener = search.querySelector<HTMLButtonElement>('[data-search-open]');
+    const view = search.querySelector<HTMLDialogElement>('[data-search-view]');
+    const input = view?.querySelector<HTMLInputElement>('[data-search-input]');
+    const empty = view?.querySelector<HTMLElement>('[data-search-empty]');
+    if (!bar || !opener || !view || !input) return;
+    const options = [...view.querySelectorAll<HTMLElement>('[data-search-option]')];
+    const shown = () => options.filter((o) => !o.closest('li')!.hidden);
+    let active: HTMLElement | undefined;
+
+    const place = () => {
+      view.classList.toggle('search-view-docked', wide.matches);
+      if (!wide.matches) return;
+      const at = bar.getBoundingClientRect();
+      view.style.setProperty('--search-view-top', `${at.top}px`);
+      view.style.setProperty('--search-view-left', `${at.left}px`);
+      view.style.setProperty('--search-view-width', `${at.width}px`);
+    };
+    const choose = (option?: HTMLElement) => {
+      active?.setAttribute('aria-selected', 'false');
+      active = option;
+      if (option) {
+        option.setAttribute('aria-selected', 'true');
+        input.setAttribute('aria-activedescendant', option.id);
+        option.scrollIntoView({ block: 'nearest' });
+      } else input.removeAttribute('aria-activedescendant');
+    };
+    const narrow = () => {
+      const q = fold(input.value);
+      for (const o of options) o.closest('li')!.hidden = !!q && !fold(o.textContent ?? '').includes(q);
+      if (empty) empty.hidden = shown().length > 0;
+      choose(undefined);
+    };
+
+    const open = () => {
+      if (view.open) return;
+      place();
+      view.showModal();
+      opener.setAttribute('aria-expanded', 'true');
+      document.documentElement.style.overflow = 'hidden';
+      input.focus();
+    };
+    const close = () => {
+      if (!view.open) return;
+      view.close();
+    };
+    view.addEventListener('close', () => {
+      opener.setAttribute('aria-expanded', 'false');
+      document.documentElement.style.overflow = '';
+      choose(undefined);
+      opener.focus();
+    });
+
+    opener.addEventListener('click', open);
+    view.querySelector('[data-search-close]')?.addEventListener('click', close);
+    view.querySelector('[data-search-clear]')?.addEventListener('click', () => {
+      input.value = '';
+      narrow();
+      input.focus();
+    });
+    // A tap outside it (on the backdrop) closes it.
+    view.addEventListener('click', (e) => {
+      if (e.target === view) close();
+    });
+    addEventListener('resize', () => view.open && place(), { passive: true });
+    input.addEventListener('input', narrow);
+    input.addEventListener('keydown', (e) => {
+      const list = shown();
+      if (!list.length) return;
+      const at = active ? list.indexOf(active) : -1;
+      if (e.key === 'ArrowDown') choose(list[(at + 1) % list.length]);
+      else if (e.key === 'ArrowUp') choose(list[at <= 0 ? list.length - 1 : at - 1]);
+      else if (e.key === 'Enter' && active) active.click();
+      else return;
+      e.preventDefault();
+    });
+    narrow();
+  });
+}

package/theme/ui/sideSheet.ts

@@ -0,0 +1,48 @@
+// What a modal side sheet (SideSheet.tsx with kind 'modal', in its <dialog> with sideSheetClass) does in a browser,
+// for the script that shows it: sideSheet(dialog) 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 slides in from the side of the screen it
+// stands at and out again (a state transition), the scrim fading in with it (ui.css); with reduced motion it appears
+// and disappears at once. Its close button, Escape and a tap on the scrim (outside it) 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 SideSheetControls = { open: () => void; close: () => Promise<void> };
+
+export function sideSheet(sheet: HTMLDialogElement): SideSheetControls {
+  const panel = sheet.querySelector<HTMLElement>('[data-side-sheet-container]')!;
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  // Out past its own edge: to the right, or to the left in a language written from the right.
+  const out = () => (getComputedStyle(sheet).direction === 'rtl' ? '-100%' : '100%');
+  let closing = false;
+
+  function open() {
+    if (sheet.open) return;
+    sheet.showModal();
+    document.documentElement.style.overflow = 'hidden';
+    if (!reduce) animate(panel, { x: [out(), '0%'] }, motionSpring('spatial'));
+  }
+
+  async function close() {
+    if (!sheet.open || closing) return;
+    closing = true;
+    if (!reduce) await animate(panel, { x: out() }, motionSpring('spatial', 'fast'));
+    sheet.close();
+    panel.style.transform = '';
+    document.documentElement.style.overflow = '';
+    closing = false;
+  }
+
+  sheet.querySelector('[data-side-sheet-close]')?.addEventListener('click', close);
+  // Escape: slide out instead of the dialog's instant close.
+  sheet.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    close();
+  });
+  // A tap on the scrim (outside the sheet) closes it.
+  sheet.addEventListener('click', (e) => {
+    if (e.target === sheet) close();
+  });
+
+  return { open, close };
+}

package/theme/ui/slider.script.ts

@@ -0,0 +1,12 @@
+// What a slider (Slider.tsx) does on the site: its tracks, stops and value labels follow its handles (updateSlider in
+// sliderUpdate.ts). Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a slider on the
+// page it does nothing.
+import { updateSlider } from './sliderUpdate';
+
+export default function slider() {
+  document.querySelectorAll<HTMLElement>('[data-slider]').forEach((root) => {
+    root.addEventListener('input', (e) => updateSlider(root, e.target));
+    // The values the browser may have put back (going back to the page).
+    updateSlider(root);
+  });
+}

package/theme/ui/sliderUpdate.ts

@@ -0,0 +1,52 @@
+// What a slider (Slider.tsx) does as its handles are moved, on the site (slider.script.ts) and in the editor (the
+// part's own input event): its tracks, its stops and the labels with its values follow the handles (the variables
+// --slider-start and --slider-end, 0–1, on .slider, and on a centered one data-below-center while its handle is on
+// the start's side of the middle), and a range's two handles cannot pass each other. The handles themselves are native
+// range inputs, so the arrow keys, Home, End, Page Up and Page Down move them.
+
+/** Where a value is between `min` and `max`, from 0 to 1. */
+const fractionOf = (value: number, min: number, max: number) => (max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0);
+
+/** Where a slider's active track starts and ends (0–1): a range's between its two handles, a centered one's between
+ * the middle and its handle, else from the start. */
+export function sliderPlace(values: number[], min: number, max: number, centered = false) {
+  const end = fractionOf(values[values.length - 1], min, max);
+  if (centered) return { start: Math.min(0.5, end), end: Math.max(0.5, end) };
+  return { start: values.length > 1 ? fractionOf(values[0], min, max) : 0, end };
+}
+
+/** Whether a stop at `value` is on the active track, and whether a handle stands on it (it is hidden under it). */
+export function stopState(value: number, values: number[], min: number, max: number, centered = false) {
+  const last = values[values.length - 1];
+  const middle = (min + max) / 2;
+  const [from, to] = centered ? [Math.min(middle, last), Math.max(middle, last)] : [values.length > 1 ? values[0] : min, last];
+  return { active: value >= from && value <= to, under: values.includes(value) };
+}
+
+/** Puts a slider (its .slider element) where its handles are, after `moved` was moved. */
+export function updateSlider(root: HTMLElement, moved?: EventTarget | null) {
+  const inputs = [...root.querySelectorAll<HTMLInputElement>('[data-slider-input]')];
+  if (!inputs.length) return;
+  const first = inputs[0];
+  const last = inputs[inputs.length - 1];
+  if (first !== last && Number(first.value) > Number(last.value)) {
+    if (moved === first) first.value = last.value;
+    else last.value = first.value;
+  }
+  const values = inputs.map((i) => Number(i.value));
+  const min = Number(first.min);
+  const max = Number(first.max);
+  const centered = root.classList.contains('slider-centered');
+  const { start, end } = sliderPlace(values, min, max, centered);
+  root.style.setProperty('--slider-start', String(start));
+  root.style.setProperty('--slider-end', String(end));
+  // Two handles in the same place: the one that can still move is on top (the start's at the end of the track).
+  root.toggleAttribute('data-start-on-top', first !== last && start > 0.5);
+  root.toggleAttribute('data-below-center', centered && values[0] < (min + max) / 2);
+  root.querySelectorAll<HTMLElement>('[data-slider-value]').forEach((label, i) => (label.textContent = String(values[i])));
+  root.querySelectorAll<HTMLElement>('[data-slider-stop]').forEach((stop) => {
+    const { active, under } = stopState(Number(stop.dataset.sliderStop), values, min, max, centered);
+    stop.toggleAttribute('data-active', active);
+    stop.toggleAttribute('data-under', under);
+  });
+}

package/theme/ui/snackbar.script.ts

@@ -0,0 +1,16 @@
+// What a snackbar (Snackbar.tsx) does on the site: one drawn in a <template data-snackbar> on the page (a new version
+// of a page, layouts/PageLayout.astro) is shown at the bottom when the page opens, with the editor's snackbar()
+// (@morphemecms/cms/lib/snackbar.ts: where it stands, how long it stays, `data-ms` on the template when longer, and how it
+// is swiped or tapped away). Its close button and Escape close it. Run on every page by the theme's Base.astro
+// (blockScripts, packages/editor/site/blockScripts.ts); without one on the page it does nothing.
+import { snackbar } from '@morphemecms/cms/lib/snackbar';
+
+export default function snackbars() {
+  document.querySelectorAll<HTMLTemplateElement>('template[data-snackbar]').forEach((template) => {
+    const element = template.content.firstElementChild?.cloneNode(true);
+    if (!(element instanceof HTMLElement)) return;
+    const text = element.querySelector('.snackbar-supporting-text')?.textContent?.trim() ?? '';
+    const ms = Number(template.dataset.ms) || undefined;
+    snackbar({ text, element, ms, error: element.getAttribute('role') === 'alert' });
+  });
+}

package/theme/ui/splitButton.script.ts

@@ -0,0 +1,63 @@
+// What a split button (SplitButton.tsx) does on the site: its arrow opens and closes its menu (aria-expanded, the menu's
+// hidden). The arrow keys open it from the arrow (down on the first item, up on the last) and go between its items, Home
+// and End to the first and the last; Escape closes it and goes back to the arrow, and so does a choice; a tap outside it
+// or the focus moving out closes it. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts);
+// without a split button on the page it does nothing.
+export default function splitButton() {
+  document.querySelectorAll<HTMLElement>('[data-split-button]').forEach((root) => {
+    const toggle = root.querySelector<HTMLButtonElement>('[data-split-button-toggle]');
+    const menu = root.querySelector<HTMLElement>('[data-split-button-menu]');
+    if (!toggle || !menu) return;
+    const items = () => [...menu.querySelectorAll<HTMLElement>('a[href], button:not(:disabled)')];
+    const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
+
+    const outside = (e: PointerEvent) => {
+      if (!root.contains(e.target as Node)) set(false);
+    };
+    function set(open: boolean, focus?: 'first' | 'last' | 'toggle') {
+      toggle!.setAttribute('aria-expanded', String(open));
+      menu!.hidden = !open;
+      if (open) document.addEventListener('pointerdown', outside, true);
+      else document.removeEventListener('pointerdown', outside, true);
+      if (focus === 'toggle') toggle!.focus();
+      else if (focus) {
+        const list = items();
+        list[focus === 'first' ? 0 : list.length - 1]?.focus();
+      }
+    }
+
+    // Opened with a key (a click without a pointer: Enter, Space), the focus goes to the first item.
+    toggle.addEventListener('click', (e) => {
+      const open = !isOpen();
+      set(open, open && e.detail === 0 ? 'first' : undefined);
+    });
+    root.addEventListener('keydown', (e) => {
+      if (e.target === toggle && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        e.preventDefault();
+        set(true, e.key === 'ArrowDown' ? 'first' : 'last');
+        return;
+      }
+      if (!isOpen()) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        set(false, 'toggle');
+        return;
+      }
+      const list = items();
+      const at = list.indexOf(document.activeElement as HTMLElement);
+      if (at < 0) return;
+      const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: list.length - 1 }[e.key];
+      if (to === undefined) return;
+      e.preventDefault();
+      list[(to + list.length) % list.length].focus();
+    });
+    menu.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('a[href], button')) set(false, 'toggle');
+    });
+    // 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/tabs.script.ts

@@ -0,0 +1,48 @@
+// What a tab list (Tabs.tsx with `label`, a role="tablist" of <button role="tab">) does on the site: a tab shows its
+// panel (aria-controls, the panel's id) and hides the others' (hidden), and is the open one (aria-selected); the row is
+// one stop for Tab, and the arrow keys, Home and End move to another tab and open it (WAI-ARIA's tabs pattern), which
+// is scrolled into view when the row is scrollable. Tabs that are links (the bar of "Mobilmenu") lead to their pages and
+// are left alone. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a tab list it
+// does nothing.
+export default function tabs() {
+  document.querySelectorAll<HTMLElement>('.tabs[role="tablist"]').forEach((list) => {
+    const all = () =>
+      [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')].filter((tab) => tab.closest('[role="tablist"]') === list);
+    const open = (to: HTMLButtonElement, scroll = true) => {
+      for (const tab of all()) {
+        const on = tab === to;
+        tab.setAttribute('aria-selected', String(on));
+        tab.tabIndex = on ? 0 : -1;
+        const panel = tab.getAttribute('aria-controls');
+        if (panel) document.getElementById(panel)?.toggleAttribute('hidden', !on);
+      }
+      // Only the row scrolls, never the page.
+      if (!scroll) return;
+      const tab = to.getBoundingClientRect();
+      const row = list.getBoundingClientRect();
+      if (tab.left < row.left) list.scrollLeft -= row.left - tab.left;
+      else if (tab.right > row.right) list.scrollLeft += tab.right - row.right;
+    };
+    // As drawn: the panels of the tabs that are not open hidden.
+    const first = all().find((tab) => tab.getAttribute('aria-selected') === 'true') ?? all()[0];
+    if (first) open(first, false);
+
+    list.addEventListener('click', (e) => {
+      const tab = (e.target as HTMLElement).closest<HTMLButtonElement>('[role="tab"]');
+      if (tab && all().includes(tab)) open(tab);
+    });
+    list.addEventListener('keydown', (e) => {
+      const tabs = all();
+      const at = tabs.indexOf(document.activeElement as HTMLButtonElement);
+      if (at < 0) return;
+      const rtl = getComputedStyle(list).direction === 'rtl';
+      const step = { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 }[e.key];
+      const to =
+        step !== undefined ? (at + step + tabs.length) % tabs.length : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : -1;
+      if (to < 0) return;
+      e.preventDefault();
+      open(tabs[to]);
+      tabs[to].focus();
+    });
+  });
+}

package/theme/ui/textField.script.ts

@@ -0,0 +1,17 @@
+// What a text field (TextField.tsx) does on the site: its counter follows what is written, a multi-line field that
+// grows is as tall as its text, the clear button empties it and the password button shows or hides the password
+// (updateTextField and pressTextField in textFieldUpdate.ts). Run on every page by the theme's Base.astro
+// (blockScripts, packages/editor/site/blockScripts.ts); without such a field on the page it does nothing.
+import { pressTextField, updateTextField } from './textFieldUpdate';
+
+export default function textField() {
+  document.querySelectorAll<HTMLElement>('[data-text-field]').forEach((root) => {
+    root.addEventListener('input', () => updateTextField(root));
+    root.addEventListener('click', (e) => {
+      const button = (e.target as HTMLElement).closest<HTMLElement>('[data-text-field-clear], [data-text-field-visibility]');
+      if (button && root.contains(button)) pressTextField(root, button);
+    });
+    // What the browser may have put back (going back to the page).
+    updateTextField(root);
+  });
+}

package/theme/ui/textFieldUpdate.ts

@@ -0,0 +1,44 @@
+// What a text field (TextField.tsx) does as it is written in and its buttons are pressed, on the site
+// (textField.script.ts) and in the editor (the part's own events): its character counter follows what is written, a
+// multi-line field that grows is as tall as its text (where the browser cannot do it itself, field-sizing), the clear
+// button empties it, and the password button shows or hides the password.
+
+/** The field's input or textarea. */
+const inputOf = (root: HTMLElement) => root.querySelector<HTMLInputElement | HTMLTextAreaElement>('.text-field-input');
+
+/** A field's counter: what is written, and how much may be (12/50). */
+export const counterText = (length: number, max?: number) => (max ? `${length}/${max}` : String(length));
+
+/** Puts a text field (its .text-field element) right for what is written in it: its counter and its height. */
+export function updateTextField(root: HTMLElement) {
+  const input = inputOf(root);
+  if (!input) return;
+  const counter = root.querySelector<HTMLElement>('[data-text-field-counter]');
+  if (counter) {
+    const limit = Number(counter.dataset.limit) || undefined;
+    counter.textContent = counterText(input.value.length, input.maxLength > 0 ? input.maxLength : limit);
+    counter.classList.toggle('text-field-counter-over', !!limit && input.value.length > limit);
+  }
+  if (input instanceof HTMLTextAreaElement && input.hasAttribute('data-text-field-grow') && !CSS.supports('field-sizing', 'content')) {
+    input.style.height = 'auto';
+    input.style.height = `${input.scrollHeight}px`;
+  }
+}
+
+/** Does what a button in a text field does (`button`, its clear or password button): empties the field, or shows or
+ * hides the password, and gives the field the focus. */
+export function pressTextField(root: HTMLElement, button: HTMLElement) {
+  const input = inputOf(root);
+  if (!input) return;
+  if (button.hasAttribute('data-text-field-clear')) {
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    updateTextField(root);
+  } else if (button.hasAttribute('data-text-field-visibility') && input instanceof HTMLInputElement) {
+    const shown = input.type === 'password';
+    input.type = shown ? 'text' : 'password';
+    button.setAttribute('aria-pressed', String(shown));
+  }
+  input.focus();
+}

package/theme/ui/timePicker.script.ts

@@ -0,0 +1,248 @@
+// What a time picker (TimePicker.tsx) does on the site: its clock button opens the picker in its <dialog>, in the
+// middle of the screen over the scrim, drawn by TimePickerContainer.tsx with React each time something changes, so the
+// site and the editor have one drawing. On the dial a tap or a drag picks the hour (the inner ring 12–23), and then the
+// minutes; the dial is a slider, so the arrow keys move it one, Page Up and Page Down five minutes or six hours, Home
+// and End to its ends, and Enter goes on from the hours to the minutes; the boxes over it switch between them. The
+// keyboard button switches to the input mode, with a field for the hours and one for the minutes. OK writes the time
+// into the hidden input a form sends (14:30) and into the field (14.30), and fires its input and change events;
+// Annuller, Escape and a tap outside close it without. On a 12-hour clock the dial has the hours 1–12 on one ring and
+// AM and PM beside the boxes switch between the two halves of the day. The dial stands beside the boxes (horizontal)
+// as the picker's `orientation` says, else on a screen wider than it is high and low (a phone turned on its side), as
+// Material's. A time typed in the field is read when the field is left, and
+// the field is marked when it is not a time. React and the drawing are loaded the first time a picker is about to
+// open (pointed at, focused). Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without
+// a time picker it does nothing.
+import type { TimePickerFormat, TimePickerOrientation, TimePickerState, TimePickerTexts } from '@theme/ui/TimePickerContainer';
+import { timeFromTyped, timeOf, timeString, timeTyped, twoDigits } from '@theme/ui/dates';
+
+const load = () => Promise.all([import('react'), import('react-dom'), import('react-dom/client'), import('@theme/ui/TimePickerContainer')]);
+let loading: ReturnType<typeof load> | undefined;
+const drawing = () => (loading ??= load());
+
+let opened = 0;
+
+export default function timePicker() {
+  document.querySelectorAll<HTMLElement>('[data-time-picker]').forEach(timePickerField);
+}
+
+/** One time picker (its [data-time-picker] element) made to work: on the site by timePicker(), in the editor by the
+ * TimePicker itself (with `onChange`). */
+export function timePickerField(field: HTMLElement) {
+  // Once for each picker, however often it is asked (React's effects may run twice).
+  if (field.dataset.timePickerReady !== undefined) return;
+  field.dataset.timePickerReady = '';
+  const { texts, timeFormat, orientation } = JSON.parse(field.dataset.timePicker!) as {
+    texts: TimePickerTexts;
+    timeFormat?: TimePickerFormat;
+    orientation?: TimePickerOrientation;
+  };
+  const { locale } = texts;
+  const twelve = timeFormat === '12h';
+  // Beside the boxes on a screen wider than it is high and low, unless the picker says.
+  const turned = matchMedia('(orientation: landscape) and (max-height: 30rem)');
+  const shape = () => ({ timeFormat, orientation: orientation ?? (turned.matches ? 'horizontal' : 'vertical') }) as const;
+  const text = field.querySelector<HTMLInputElement>('[data-time-picker-text]')!;
+  const textField = text.closest<HTMLElement>('.text-field');
+  const opener = field.querySelector<HTMLButtonElement>('[data-time-picker-open]')!;
+  const input = field.querySelector<HTMLInputElement>('[data-time-picker-value]')!;
+  const dialog = field.querySelector<HTMLDialogElement>('[data-time-picker-dialog]')!;
+  const headlineId = `time-picker-headline-${++opened}`;
+  dialog.setAttribute('aria-labelledby', headlineId);
+
+  let state: TimePickerState;
+  let root: import('react-dom/client').Root | undefined;
+
+  field.addEventListener('pointerover', () => drawing(), { once: true });
+  field.addEventListener('focusin', () => drawing(), { once: true });
+
+  async function render(focus?: 'dial' | 'input') {
+    const [react, reactDom, client, container] = await drawing();
+    root ??= client.createRoot(dialog);
+    reactDom.flushSync(() => root!.render(react.createElement(container.default, { ...state, ...shape(), texts, headlineId })));
+    if (focus === 'dial') dialog.querySelector<HTMLElement>('[data-time-picker-dial]')?.focus();
+    if (focus === 'input') dialog.querySelector<HTMLInputElement>('[data-time-picker-input]')?.select();
+  }
+
+  async function open() {
+    if (dialog.open) return;
+    const now = new Date();
+    const { hour, minute } = timeOf(input.value) ?? { hour: now.getHours(), minute: 0 };
+    state = { view: 'dial', selecting: 'hour', hour, minute };
+    await render();
+    dialog.showModal();
+    document.documentElement.style.overflow = 'hidden';
+    opener.setAttribute('aria-expanded', 'true');
+    dialog.querySelector<HTMLElement>('[data-time-picker-dial]')?.focus();
+  }
+
+  function close() {
+    if (!dialog.open) return;
+    dialog.close();
+    document.documentElement.style.overflow = '';
+    opener.setAttribute('aria-expanded', 'false');
+    opener.focus();
+  }
+
+  function write(time: string) {
+    if (input.value !== time) {
+      input.value = time;
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    text.value = time ? timeTyped(time, locale, twelve) : '';
+    mark(false);
+  }
+
+  function mark(wrong: boolean) {
+    textField?.classList.toggle('text-field-error', wrong);
+    if (wrong) text.setAttribute('aria-invalid', 'true');
+    else text.removeAttribute('aria-invalid');
+  }
+
+  // The hour or the minute the dial is set to (on a 12-hour clock the hour in the half of the day shown).
+  function set(value: number, focus?: 'dial') {
+    const half = state.hour >= 12 ? 12 : 0;
+    const hour = twelve ? half + (((value % 12) + 12) % 12) : (value + 24) % 24;
+    state = state.selecting === 'hour' ? { ...state, hour } : { ...state, minute: (value + 60) % 60 };
+    void render(focus);
+  }
+
+  // OK: the time (or what is typed, in the input mode) written, and closed; else what is wrong said.
+  function done() {
+    if (state.view === 'input') {
+      const typed = [...dialog.querySelectorAll<HTMLInputElement>('[data-time-picker-input]')].map((i) => i.value.trim());
+      const [h, m] = typed.map((t) => (/^\d{1,2}$/.test(t) ? Number(t) : NaN));
+      const wrong = !(twelve ? h >= 1 && h <= 12 : h <= 23) ? 0 : !(m <= 59) ? 1 : -1;
+      if (wrong >= 0) {
+        state = { ...state, typed, error: { field: wrong, message: twelve ? texts.wrong12 : texts.wrong } };
+        return void render();
+      }
+      write(timeString(twelve ? (h % 12) + (state.hour >= 12 ? 12 : 0) : h, m));
+      return close();
+    }
+    write(timeString(state.hour, state.minute));
+    close();
+  }
+
+  opener.addEventListener('click', () => void open());
+
+  // A time typed in the field, read when it is left.
+  text.addEventListener('change', () => {
+    const typed = text.value.trim();
+    if (!typed) return write('');
+    const time = timeFromTyped(typed, twelve ? [texts.am, texts.pm] : undefined);
+    if (time) write(time);
+    else mark(true);
+  });
+
+  dialog.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    if (target === dialog) return close();
+    const action = target.closest<HTMLElement>('[data-time-picker-action]')?.dataset.timePickerAction;
+    if (action === 'hour' || action === 'minute') {
+      state = { ...state, selecting: action };
+      return void render();
+    }
+    // AM or PM: the same hour in the other half of the day (what is typed in the input mode kept).
+    if (action === 'am' || action === 'pm') {
+      const typed =
+        state.view === 'input' ? [...dialog.querySelectorAll<HTMLInputElement>('[data-time-picker-input]')].map((i) => i.value) : undefined;
+      state = { ...state, hour: (state.hour % 12) + (action === 'pm' ? 12 : 0), typed: typed ?? state.typed };
+      return void render();
+    }
+    if (action === 'mode') {
+      state =
+        state.view === 'dial'
+          ? {
+              ...state,
+              view: 'input',
+              error: undefined,
+              typed: [twoDigits(twelve ? state.hour % 12 || 12 : state.hour), twoDigits(state.minute)],
+            }
+          : { ...state, view: 'dial', selecting: 'hour', error: undefined };
+      return void render(state.view === 'dial' ? 'dial' : 'input');
+    }
+    if (action === 'cancel') return close();
+    if (action === 'ok') return done();
+  });
+
+  // The dial: the number under the pointer, by its angle from the top and, for the hours, its ring.
+  function valueAt(dial: HTMLElement, e: PointerEvent): number {
+    const box = dial.getBoundingClientRect();
+    const x = e.clientX - box.left - box.width / 2;
+    const y = e.clientY - box.top - box.height / 2;
+    const angle = (Math.atan2(x, -y) * 180) / Math.PI + 360;
+    if (state.selecting === 'minute') return Math.round(angle / 6) % 60;
+    const number = dial.querySelector<HTMLElement>('.time-picker-dial-number');
+    const knob = number?.offsetWidth ?? 48;
+    const inner = !twelve && Math.hypot(x, y) < box.width / 2 - knob * 0.875;
+    return (Math.round(angle / 30) % 12) + (inner ? 12 : 0);
+  }
+
+  let dragging = false;
+  dialog.addEventListener('pointerdown', (e) => {
+    const dial = (e.target as HTMLElement).closest<HTMLElement>('[data-time-picker-dial]');
+    if (!dial) return;
+    e.preventDefault();
+    dragging = true;
+    dial.setPointerCapture(e.pointerId);
+    set(valueAt(dial, e), 'dial');
+  });
+  dialog.addEventListener('pointermove', (e) => {
+    const dial = (e.target as HTMLElement).closest<HTMLElement>('[data-time-picker-dial]');
+    if (dragging && dial) set(valueAt(dial, e));
+  });
+  const endDrag = () => {
+    if (!dragging) return;
+    dragging = false;
+    // From the hours on to the minutes, as M3's dial.
+    if (state.selecting === 'hour') {
+      state = { ...state, selecting: 'minute' };
+      void render('dial');
+    }
+  };
+  dialog.addEventListener('pointerup', endDrag);
+  dialog.addEventListener('pointercancel', () => (dragging = false));
+
+  dialog.addEventListener('keydown', (e) => {
+    const target = e.target as HTMLElement;
+    if (target.matches('[data-time-picker-dial]')) {
+      const value = state.selecting === 'hour' ? state.hour : state.minute;
+      const big = state.selecting === 'hour' ? 6 : 5;
+      const top = state.selecting === 'hour' ? 23 : 59;
+      const to: Record<string, number> = {
+        ArrowUp: value + 1,
+        ArrowRight: value + 1,
+        ArrowDown: value - 1,
+        ArrowLeft: value - 1,
+        PageUp: value + big,
+        PageDown: value - big,
+        Home: 0,
+        End: top,
+      };
+      if (e.key in to) {
+        e.preventDefault();
+        set(to[e.key], 'dial');
+      } else if (e.key === 'Enter' && state.selecting === 'hour') {
+        e.preventDefault();
+        state = { ...state, selecting: 'minute' };
+        void render('dial');
+      }
+    }
+  });
+
+  // The input mode: only digits, and on to the minutes when the hours have two.
+  dialog.addEventListener('input', (e) => {
+    const field = e.target as HTMLInputElement;
+    if (!field.matches('[data-time-picker-input]')) return;
+    field.value = field.value.replace(/\D/g, '').slice(0, 2);
+    if (field.dataset.timePickerInput === '0' && field.value.length === 2)
+      dialog.querySelector<HTMLInputElement>('[data-time-picker-input="1"]')?.select();
+  });
+
+  // Escape.
+  dialog.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    close();
+  });
+}