@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/DatePickerContainer.tsx

@@ -0,0 +1,316 @@
+// What a date picker shows when it is open (m3.material.io/components/date-pickers, .date-picker in ../styles/ui.css),
+// drawn for what is picked and shown (`view`, `month`, `start`, `end`, `focus`): one drawing for the site, where
+// datePicker.script.ts draws it in the date picker's <dialog> (DatePicker.tsx) each time something changes and does
+// what it is told by the data-date-picker-… attributes, and for the editor, which only draws it. Built on the theme's
+// Dialog (the surface), IconButton, Button and TextField; how it looks is the theme's (--date-picker-*).
+//   `kind`: docked (under its field, with a month and a year to step through or pick from a list) or modal (a dialog
+//   in the middle of the screen, with a headline, the month and year as a menu button and the years in a grid, and a
+//   keyboard input mode with the theme's TextField). `range`: two days, a start and an end (only modal).
+//   `view`: the days of `month` (a grid under the weekdays, today circled, the picked day filled, a range's days
+//   between in a band), the months (docked) or the years, or the input mode (modal). `focus`: the day that has the
+//   focus in the grid (the only one Tab reaches; the arrow keys move it). `min`, `max`: the first and last day that can
+//   be picked. `typed`, `error`: what is written in the input mode's fields, and what is wrong with it (on which one).
+// No texts of its own (`texts`, DatePicker.tsx's datePickerTexts) and no state (only a list scrolled to the shown
+// year), so the site's script can draw it without the editor's dictionaries.
+import { useLayoutEffect, useRef } from 'react';
+import Dialog from '@theme/ui/Dialog';
+import IconButton from '@theme/ui/IconButton';
+import Button from '@theme/ui/Button';
+import TextField from '@theme/ui/TextField';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { dayHeadline, dayName, monthName, monthOfDay, weekdaysOf, weeksOf } from '@theme/ui/dates';
+
+export type DatePickerKind = 'docked' | 'modal';
+export type DatePickerView = 'days' | 'months' | 'years' | 'input';
+
+/** A date picker's fixed texts, in the language its dates are written in (`locale`). */
+export type DatePickerTexts = {
+  locale: string;
+  select: string;
+  selectRange: string;
+  enter: string;
+  enterRange: string;
+  date: string;
+  start: string;
+  end: string;
+  format: string;
+  wrongFormat: string;
+  notAllowed: string;
+  endBeforeStart: string;
+  previousMonth: string;
+  nextMonth: string;
+  previousYear: string;
+  nextYear: string;
+  chooseMonth: string;
+  chooseYear: string;
+  toInput: string;
+  toCalendar: string;
+  cancel: string;
+  ok: string;
+};
+
+/** What a date picker shows: what changes while it is open. */
+export type DatePickerState = {
+  view: DatePickerView;
+  month: string;
+  start: string;
+  end: string;
+  focus: string;
+  typed?: string[];
+  error?: { field: number; message: string };
+};
+
+export type DatePickerContainerProps = DatePickerState & {
+  kind?: DatePickerKind;
+  range?: boolean;
+  today: string;
+  min?: string;
+  max?: string;
+  texts: DatePickerTexts;
+  headlineId?: string;
+  className?: string;
+};
+
+/** The years a date picker offers: from `min`'s (else a hundred years ago) to `max`'s (else fifty years on). */
+export function yearsOf(today: string, min = '', max = ''): number[] {
+  const now = Number(today.slice(0, 4));
+  const from = min ? Number(min.slice(0, 4)) : now - 100;
+  const to = max ? Number(max.slice(0, 4)) : now + 50;
+  return Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+}
+
+/** A day's place in a range: its start, its end, a day between them, or none. */
+function rangeOf(day: string, start: string, end: string): 'start' | 'end' | 'middle' | undefined {
+  if (!start || !end || start === end) return undefined;
+  if (day === start) return 'start';
+  if (day === end) return 'end';
+  return day > start && day < end ? 'middle' : undefined;
+}
+
+export default function DatePickerContainer({
+  kind = 'docked',
+  range = false,
+  view,
+  month,
+  start,
+  end,
+  focus,
+  typed = [],
+  error,
+  today,
+  min = '',
+  max = '',
+  texts,
+  headlineId,
+  className,
+}: DatePickerContainerProps) {
+  const modal = kind === 'modal' || range;
+  const { locale } = texts;
+  const [year, monthNumber] = month.split('-');
+  const shownYear = Number(year);
+  const out = (day: string) => (!!min && day < min) || (!!max && day > max);
+  const headline = range
+    ? `${start ? dayHeadline(start, locale) : texts.start} – ${end ? dayHeadline(end, locale) : texts.end}`
+    : start
+      ? dayHeadline(start, locale)
+      : texts.date;
+  const years = yearsOf(today, min, max);
+  const thisYear = Number(today.slice(0, 4));
+  const pickedMonth = start ? monthOfDay(start) : '';
+
+  // A list of years or months starts with the shown one in its middle (on the site and in the editor alike).
+  const list = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const shown = list.current?.querySelector<HTMLElement>('[aria-selected="true"]');
+    if (list.current && shown) list.current.scrollTop = shown.offsetTop - (list.current.clientHeight - shown.offsetHeight) / 2;
+  }, [view, month]);
+
+  // The days of the month, under the weekdays.
+  const days = (
+    <table className="date-picker-grid" role="grid" aria-label={monthName(month, locale)} data-date-picker-grid="">
+      <thead>
+        <tr>
+          {weekdaysOf(locale).map((d) => (
+            <th key={d.long} scope="col" abbr={d.long} className="date-picker-weekday">
+              {d.short}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {weeksOf(month, locale).map((week, w) => (
+          <tr key={w}>
+            {week.map((day, i) => {
+              if (!day) return <td key={i} />;
+              const picked = day === start || day === end;
+              return (
+                <td key={day} aria-selected={picked} data-range={rangeOf(day, start, end)} className="date-picker-cell">
+                  <button
+                    type="button"
+                    className="date-picker-day"
+                    data-day={day}
+                    tabIndex={day === focus ? 0 : -1}
+                    aria-label={dayName(day, locale)}
+                    aria-current={day === today ? 'date' : undefined}
+                    disabled={out(day)}
+                  >
+                    {Number(day.slice(8))}
+                  </button>
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+
+  // The years, a grid in a modal picker and a list in a docked one; the shown one picked, this year marked.
+  const yearList = (
+    <div
+      className={modal ? 'date-picker-years' : 'date-picker-menu'}
+      role="listbox"
+      aria-label={texts.chooseYear}
+      ref={list}
+      data-date-picker-list="years"
+    >
+      {years.map((y) => (
+        <button
+          key={y}
+          type="button"
+          role="option"
+          className={modal ? 'date-picker-year' : 'date-picker-menu-item'}
+          data-year={y}
+          tabIndex={y === shownYear ? 0 : -1}
+          aria-selected={y === shownYear}
+          aria-current={y === thisYear ? 'date' : undefined}
+        >
+          {!modal && <Svg name="check" size={20} className="date-picker-menu-check" />}
+          {y}
+        </button>
+      ))}
+    </div>
+  );
+
+  // A docked picker's months, a list.
+  const monthList = (
+    <div ref={list} className="date-picker-menu" role="listbox" aria-label={texts.chooseMonth} data-date-picker-list="months">
+      {Array.from({ length: 12 }, (_, i) => `${year}-${String(i + 1).padStart(2, '0')}`).map((m) => (
+        <button
+          key={m}
+          type="button"
+          role="option"
+          className="date-picker-menu-item"
+          data-month={m}
+          tabIndex={m === month ? 0 : -1}
+          aria-selected={m === month}
+          aria-current={m === pickedMonth ? 'date' : undefined}
+        >
+          <Svg name="check" size={20} className="date-picker-menu-check" />
+          {monthName(m, locale, 'long')}
+        </button>
+      ))}
+    </div>
+  );
+
+  // A button that opens a list (the month, the year), with its arrow.
+  const menuButton = (label: string, list: 'months' | 'years', name: string) => (
+    <button
+      type="button"
+      className="date-picker-menu-button"
+      aria-label={`${name}: ${label}`}
+      aria-expanded={view === list}
+      data-date-picker-action={list}
+      disabled={view !== 'days' && view !== list}
+    >
+      {label}
+      <Svg name="caret-down" size={18} className="date-picker-menu-button-icon" />
+    </button>
+  );
+
+  const step = (action: string, icon: string, label: string) => (
+    <IconButton icon={icon} label={label} data-date-picker-action={action} disabled={view !== 'days'} />
+  );
+
+  return (
+    <Dialog
+      className={['date-picker', `date-picker-${modal ? 'modal' : 'docked'}`, className].filter(Boolean).join(' ')}
+      data-view={view}
+      data-range={range || undefined}
+    >
+      {modal && (
+        <div className="date-picker-header">
+          <p className="date-picker-supporting-text">
+            {view === 'input' ? (range ? texts.enterRange : texts.enter) : range ? texts.selectRange : texts.select}
+          </p>
+          <div className="date-picker-headline-row">
+            <h2 id={headlineId} className="date-picker-headline" aria-live="polite">
+              {headline}
+            </h2>
+            <IconButton
+              icon={view === 'input' ? 'calendar-blank' : 'pencil-simple'}
+              label={view === 'input' ? texts.toCalendar : texts.toInput}
+              data-date-picker-action="mode"
+            />
+          </div>
+        </div>
+      )}
+
+      {view !== 'input' &&
+        (modal ? (
+          <div className="date-picker-controls">
+            {menuButton(monthName(month, locale), 'years', texts.chooseYear)}
+            <span className="date-picker-steps">
+              {step('previous-month', 'caret-left', texts.previousMonth)}
+              {step('next-month', 'caret-right', texts.nextMonth)}
+            </span>
+          </div>
+        ) : (
+          <div className="date-picker-controls">
+            <span className="date-picker-steps">
+              {step('previous-month', 'caret-left', texts.previousMonth)}
+              {menuButton(monthName(`${year}-${monthNumber}`, locale, 'short'), 'months', texts.chooseMonth)}
+              {step('next-month', 'caret-right', texts.nextMonth)}
+            </span>
+            <span className="date-picker-steps">
+              {step('previous-year', 'caret-left', texts.previousYear)}
+              {menuButton(year, 'years', texts.chooseYear)}
+              {step('next-year', 'caret-right', texts.nextYear)}
+            </span>
+          </div>
+        ))}
+
+      <div className="date-picker-content">
+        {view === 'days' && days}
+        {view === 'years' && yearList}
+        {view === 'months' && monthList}
+        {view === 'input' && (
+          <div className="date-picker-input">
+            {(range ? [texts.start, texts.end] : [texts.date]).map((label, i) => (
+              <TextField
+                key={label}
+                label={label}
+                placeholder={texts.format}
+                supporting={error?.field === i ? undefined : texts.format}
+                error={error?.field === i ? error.message : undefined}
+                defaultValue={typed[i] ?? ''}
+                inputMode="numeric"
+                autoComplete="off"
+                data-date-picker-input={i}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="date-picker-actions">
+        <Button kind="text" size="small" data-date-picker-action="cancel">
+          {texts.cancel}
+        </Button>
+        <Button kind="text" size="small" data-date-picker-action="ok">
+          {texts.ok}
+        </Button>
+      </div>
+    </Dialog>
+  );
+}

package/theme/ui/Dialog.tsx

@@ -0,0 +1,100 @@
+// A dialog (m3.material.io/components/dialogs, .dialog in ../styles/ui.css), in Material's two kinds (`kind`):
+// - 'basic' (the default): its container. With only `children` it is the container alone, with what is in it (a
+//   pop-up's box, PopupView.tsx; the date and time pickers); the cookie question is such a dialog that is not modal
+//   (CookieConsent.astro). With its parts it is Material's basic dialog: evt. an icon (`icon`, the theme's, centred over
+//   the headline), the headline (`headline`, with its id `headlineId` for the <dialog>'s aria-labelledby), the
+//   supporting text (`supportingText`), what else it shows (`children`: a list of choices, scrolling when it is long),
+//   evt. a divider over the actions (`divider`) and the actions at its end (`actions`: buttons, the main one last).
+// - 'full-screen': over the whole screen on a phone, for a task with several steps; in its header the close button
+//   (`closeLabel`, data-dialog-close), the headline and the action (`actions`: a text button), evt. a divider under it
+//   (`divider`), and under them what it shows (`supportingText` and `children`, scrolling). From 48rem, where Material
+//   shows it as a dialog, it is in the middle of the screen over the scrim, with the same header.
+// Shown modally it is in a <dialog> with dialogModalClass (a full-screen one with dialogFullScreenModalClass), which
+// dialog() in dialog.ts (or the script that shows it: Popup.astro) opens and closes. How it looks is the theme's
+// (--dialog-*). Other attributes go on it, and `className` after its own classes (its place). An Astro component
+// without React gives an element the same classes with dialogClass.
+import type { ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import Divider from '@theme/ui/Divider';
+import IconButton from '@theme/ui/IconButton';
+
+/** The kinds of a dialog, as Material 3 names them. */
+export type DialogKind = 'basic' | 'full-screen';
+
+/** A dialog's container's class (`kind` 'full-screen' for that kind's; `parts` when a basic one has its headline,
+ * supporting text and actions), and the classes of the <dialog> a modal one is shown in (a full-screen one's, over the
+ * whole screen on a phone). */
+export const dialogClass = 'dialog';
+export const dialogClassOf = (kind: DialogKind = 'basic', parts = false) =>
+  kind === 'full-screen' ? 'dialog dialog-full-screen' : parts ? 'dialog dialog-basic' : dialogClass;
+export const dialogModalClass = 'dialog-modal';
+export const dialogFullScreenModalClass = 'dialog-modal dialog-modal-full-screen';
+
+export default function Dialog({
+  kind = 'basic',
+  icon,
+  headline,
+  headlineId,
+  supportingText,
+  divider,
+  actions,
+  closeLabel,
+  className,
+  children,
+  ...rest
+}: {
+  kind?: DialogKind;
+  icon?: string;
+  headline?: ReactNode;
+  headlineId?: string;
+  supportingText?: ReactNode;
+  divider?: boolean;
+  actions?: ReactNode;
+  closeLabel?: string;
+  className?: string;
+  children?: ReactNode;
+} & Record<string, unknown>) {
+  const parts = Boolean(icon || headline || supportingText || actions);
+  const classes = [dialogClassOf(kind, parts), icon && kind === 'basic' && 'dialog-with-icon', className].filter(Boolean).join(' ');
+  const title = headline && (
+    <h2 id={headlineId} className="dialog-headline">
+      {headline}
+    </h2>
+  );
+  const supporting = supportingText && <div className="dialog-supporting-text">{supportingText}</div>;
+
+  if (kind === 'full-screen')
+    return (
+      <div className={classes} {...rest}>
+        <div className="dialog-header">
+          {closeLabel && <IconButton icon="x" label={closeLabel} data-dialog-close="" />}
+          {title}
+          {actions && <div className="dialog-header-actions">{actions}</div>}
+        </div>
+        {divider && <Divider className="dialog-divider" />}
+        <div className="dialog-content">
+          {supporting}
+          {children}
+        </div>
+      </div>
+    );
+
+  // The container alone, as before the parts were there (a pop-up's box, the pickers).
+  if (!parts)
+    return (
+      <div className={classes} {...rest}>
+        {children}
+      </div>
+    );
+
+  return (
+    <div className={classes} {...rest}>
+      {icon && <Svg name={icon} size={24} className="dialog-icon" />}
+      {title}
+      {supporting}
+      {children && <div className="dialog-content">{children}</div>}
+      {divider && <Divider className="dialog-divider" />}
+      {actions && <div className="dialog-actions">{actions}</div>}
+    </div>
+  );
+}

package/theme/ui/Divider.tsx

@@ -0,0 +1,27 @@
+// A divider (m3.material.io/components/divider, .divider in ../styles/ui.css): a thin line between groups of
+// content, an <hr> (a separator to screen readers). Its kind (`kind`): 'full-width' (from edge to edge, the
+// default), 'inset' (in from the start, as far as the text of a list's items with something before them) or
+// 'middle-inset' (in from both sides); `vertical`: a line from top to bottom between things side by side
+// (aria-orientation). Other attributes go on it, and `className` after its own classes. An Astro component gives an
+// <hr> the same classes with dividerClass.
+
+export type DividerKind = 'full-width' | 'inset' | 'middle-inset';
+
+/** A divider's classes. */
+export const dividerClass = (kind: DividerKind = 'full-width', vertical?: boolean) =>
+  ['divider', kind !== 'full-width' && `divider-${kind}`, vertical && 'divider-vertical'].filter(Boolean).join(' ');
+
+export default function Divider({
+  kind,
+  vertical,
+  className,
+  ...rest
+}: { kind?: DividerKind; vertical?: boolean; className?: string } & Record<string, unknown>) {
+  return (
+    <hr
+      className={[dividerClass(kind, vertical), className].filter(Boolean).join(' ')}
+      aria-orientation={vertical ? 'vertical' : undefined}
+      {...rest}
+    />
+  );
+}

package/theme/ui/ExposedDropdownMenu.tsx

@@ -0,0 +1,77 @@
+// An exposed dropdown menu (m3.material.io/components/menus, .exposed-dropdown-menu in ../styles/ui.css): a field that
+// shows the chosen one of a few choices (`options`, each its `value` and `label`, evt. `disabled`) and opens a menu of
+// them, with its name (`label`), a line under it (`supporting`) or what is wrong with it (`error`). As Material's, it
+// is the theme's text field (TextField.tsx: its kind, `kind`, outlined by default or filled, its classes and its look)
+// with an arrow at its end. The field is the browser's own <select>, so it works without JavaScript, sends its value
+// with a form (`name`) and is a combobox to screen readers, with the keyboard they know; where the browser can style
+// its menu (appearance: base-select), the menu is drawn as the theme's menu (its --menu-* variables), else it is the
+// browser's own. Without `value` nothing is chosen from the start, and the name stands in the field like an empty text
+// field's. Other attributes (`name`, `required`, `disabled`, `onChange`, data-…) go on the <select>, and `className` on
+// the field around it.
+import { useId } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { textFieldClass, type TextFieldKind } from '@theme/ui/TextField';
+
+export type ExposedDropdownMenuOption = { value: string; label: string; disabled?: boolean };
+
+/** An exposed dropdown menu's classes: the text field's of its kind (and its error's), and its own. */
+export const exposedDropdownMenuClass = (kind: TextFieldKind = 'outlined', error = false) =>
+  `${textFieldClass(kind, error)} exposed-dropdown-menu`;
+
+export default function ExposedDropdownMenu({
+  label,
+  options,
+  value,
+  supporting,
+  error,
+  kind,
+  id,
+  className,
+  ...rest
+}: {
+  label: string;
+  options: ExposedDropdownMenuOption[];
+  value?: string;
+  supporting?: string;
+  error?: string;
+  kind?: TextFieldKind;
+  id?: string;
+  className?: string;
+} & Record<string, unknown>) {
+  const own = useId();
+  const field = id ?? own;
+  const line = error || supporting;
+  return (
+    <div className={[exposedDropdownMenuClass(kind, !!error), className].filter(Boolean).join(' ')}>
+      <div className="text-field-container">
+        <select
+          id={field}
+          className="text-field-input exposed-dropdown-menu-select"
+          defaultValue={value ?? ''}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={line ? `${field}-supporting` : undefined}
+          {...rest}
+        >
+          {/* Nothing chosen yet: an empty choice that is not in the menu. */}
+          {value === undefined && <option value="" hidden className="exposed-dropdown-menu-empty" />}
+          {options.map((o) => (
+            <option key={o.value} value={o.value} disabled={o.disabled} className="exposed-dropdown-menu-option">
+              {o.label}
+            </option>
+          ))}
+        </select>
+        <label htmlFor={field} className="text-field-label">
+          {label}
+        </label>
+        <Svg name="caret-down" size={20} className="exposed-dropdown-menu-icon" />
+      </div>
+      {line && (
+        <div className="text-field-supporting-row">
+          <p id={`${field}-supporting`} className="text-field-supporting">
+            {line}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/theme/ui/Fab.tsx

@@ -0,0 +1,88 @@
+// FABs (m3.material.io/components/floating-action-button and …/extended-fab, .fab and .extended-fab in
+// ../styles/ui.css): the screen's main action, an icon (Fab, its name read by screen readers) or an icon and its label
+// (ExtendedFab, only the icon while `collapsed`, data-collapsed: while the page scrolls down). Its size (`size`) and its
+// colour (`kind`) are Material 3 Expressive's: a FAB is `fab` (the default), `medium` or `large` (the small FAB is
+// deprecated), an extended FAB `small` (the default), `medium` or `large`, each with its own type style; the colours are
+// the filled `primary` (the accent, the default), `secondary` and `tertiary`, and the tonal `primary-container`,
+// `secondary-container` and `tertiary-container`, from the site's colours of those names (surface FABs are
+// deprecated). How it looks is the theme's. Where it stands (fixed at the bottom of the screen, or in a menu) is the
+// component's own. With `href` it is a link (Link), else a <button type="button">; other attributes (data-…) go on it,
+// and `className` after its own classes. An Astro component gives an element the same classes with fabClass and
+// extendedFabClass.
+import type { ReactNode } from 'react';
+import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export const fabKinds = ['primary', 'secondary', 'tertiary', 'primary-container', 'secondary-container', 'tertiary-container'] as const;
+export type FabKind = (typeof fabKinds)[number];
+export const fabSizes = ['fab', 'medium', 'large'] as const;
+export type FabSize = (typeof fabSizes)[number];
+export const extendedFabSizes = ['small', 'medium', 'large'] as const;
+export type ExtendedFabSize = (typeof extendedFabSizes)[number];
+
+/** A FAB's classes, and an extended FAB's: its kind, and its size when it is not the default. */
+export const fabClass = (kind: FabKind = 'primary', size: FabSize = 'fab') => `fab fab-${kind}${size === 'fab' ? '' : ` fab-${size}`}`;
+export const extendedFabClass = (kind: FabKind = 'primary', size: ExtendedFabSize = 'small') =>
+  `extended-fab fab-${kind}${size === 'small' ? '' : ` extended-fab-${size}`}`;
+
+// A link or a button with these classes.
+function Action({
+  href,
+  className,
+  children,
+  ...rest
+}: { href?: string; className: string; children: ReactNode } & Record<string, unknown>) {
+  return href === undefined ? (
+    <button type="button" className={className} {...rest}>
+      {children}
+    </button>
+  ) : (
+    <Link href={href} className={className} {...rest}>
+      {children}
+    </Link>
+  );
+}
+
+export function Fab({
+  icon,
+  label,
+  kind,
+  size,
+  className,
+  ...rest
+}: { icon: IconRef; label: string; kind?: FabKind; size?: FabSize; href?: string; className?: string } & Record<string, unknown>) {
+  return (
+    <Action className={[fabClass(kind, size), className].filter(Boolean).join(' ')} aria-label={label} {...rest}>
+      <Glyph icon={icon} size={24} />
+    </Action>
+  );
+}
+
+export function ExtendedFab({
+  icon,
+  label,
+  kind,
+  size,
+  collapsed,
+  className,
+  ...rest
+}: {
+  icon: IconRef;
+  label: string;
+  kind?: FabKind;
+  size?: ExtendedFabSize;
+  collapsed?: boolean;
+  href?: string;
+  className?: string;
+} & Record<string, unknown>) {
+  return (
+    <Action
+      className={[extendedFabClass(kind, size), className].filter(Boolean).join(' ')}
+      data-collapsed={collapsed || undefined}
+      {...rest}
+    >
+      <Glyph icon={icon} size={24} />
+      <span className="extended-fab-label">{label}</span>
+    </Action>
+  );
+}

package/theme/ui/FabMenu.tsx

@@ -0,0 +1,67 @@
+// A FAB menu (m3.material.io/components/fab-menu, .fab-menu in ../styles/ui.css): the theme's FAB (its classes,
+// fabClass: `icon`, its name `label`, its size `size`, any of the FAB sizes, and its colour `fabKind`, any of the FAB
+// colours, the menu's `kind` filled if it has none) that opens two to six related actions above it (`items`, each the
+// theme's ExtendedFab: its icon and label, with `href` a link), the last nearest the FAB. The menu comes in Material's
+// three colour sets (`kind`: primary, the default, secondary or tertiary): while it is open (aria-expanded) the FAB is a
+// round close button with a cross (its name `closeLabel`) in the set's filled colour, and the actions are in its
+// container colour, so they stand apart from it. Where it stands (fixed at the bottom of the screen) is the component's
+// (`className`). `open` draws it open (the editor). On the site ui/fabMenu.script.ts opens and closes it. Other
+// attributes (data-…) go on the whole.
+import { useId } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { ExtendedFab, fabClass, type FabKind, type FabSize } from '@theme/ui/Fab';
+
+export type FabMenuItem = { icon: string; label: string; href?: string } & Record<string, unknown>;
+export const fabMenuKinds = ['primary', 'secondary', 'tertiary'] as const;
+export type FabMenuKind = (typeof fabMenuKinds)[number];
+
+/** A FAB menu's classes (the whole, with its colour set: its FAB and its actions have the FABs' classes). */
+export const fabMenuClass = (kind: FabMenuKind = 'primary') => `fab-menu fab-menu-${kind}`;
+
+export default function FabMenu({
+  icon,
+  label,
+  closeLabel,
+  items,
+  kind = 'primary',
+  fabKind,
+  size,
+  open,
+  className,
+  ...rest
+}: {
+  icon: string;
+  label: string;
+  closeLabel: string;
+  items: FabMenuItem[];
+  kind?: FabMenuKind;
+  fabKind?: FabKind;
+  size?: FabSize;
+  open?: boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const list = useId();
+  return (
+    <div className={[fabMenuClass(kind), className].filter(Boolean).join(' ')} data-fab-menu="" {...rest}>
+      <button
+        type="button"
+        className={`${fabClass(fabKind ?? kind, size)} fab-menu-button`}
+        aria-label={open ? closeLabel : label}
+        aria-expanded={Boolean(open)}
+        aria-controls={list}
+        data-label={label}
+        data-close-label={closeLabel}
+      >
+        <Svg name={icon} size={24} className="fab-menu-icon" />
+        <Svg name="x" size={24} className="fab-menu-close-icon" />
+      </button>
+      <ul id={list} className="fab-menu-list" aria-label={label} hidden={!open}>
+        {items.map(({ icon: glyph, label: name, ...item }) => (
+          <li key={name}>
+            <ExtendedFab icon={glyph} label={name} kind={`${kind}-container`} className="fab-menu-item" {...item} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}