@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/ripple.script.ts

@@ -1,159 +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))();
-}
+// 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))();
+}

package/theme/ui/search.script.ts

@@ -1,92 +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();
-  });
-}
+// 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 → sideSheetControl.ts}

@@ -1,48 +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 };
-}
+// 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

@@ -1,12 +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);
-  });
-}
+// 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);
+  });
+}