@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/IconButton.tsx

@@ -0,0 +1,78 @@
+// An icon button (m3.material.io/components/icon-buttons, .icon-button in ../styles/ui.css): only an icon (`icon`, its
+// name in the theme's icons, or in the editor an icon already made), its name (`label`) read by screen readers. Its kind (`kind`: standard, the default, filled,
+// tonal or outlined), its size (`size`: xsmall, small, the default, medium, large or xlarge), its width (`width`:
+// narrow, default or wide) and its shape (`shape`: round, the default, or square) are Material's names; how each looks
+// is the theme's. With `selected` (true or false) it is a toggle icon button, aria-pressed: the theme gives each kind its
+// look off and on, and its corners turn square when it is on (round when it is square); what turns it on and off is the
+// script of the block that shows it (or the editor), and its icon is drawn filled while it is on, where the site draws
+// it filled. `badge`: the theme's Badge at its icon's corner, a number or a dot (true), which `label` should say too. With
+// `href` it is a link (Link: on the site; in the editor only drawn; never a toggle), else a <button type="button">.
+// Other attributes (data-…, disabled) go on it, and `className` after its own classes (its place). An Astro component
+// without React gives an element the same classes with iconButtonClass, and a toggle aria-pressed itself.
+import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
+import Badge from '@theme/ui/Badge';
+import { Link, type IconButtonKind } from '@morphemecms/cms/src/standard/view';
+import { ToggleIcon, type ButtonShape, type ButtonSize } from '@theme/ui/Button';
+
+export const iconButtonWidths = ['narrow', 'default', 'wide'] as const;
+export type IconButtonWidth = (typeof iconButtonWidths)[number];
+
+/** An icon button's classes: its kind's and, unless it is small, its size's, unless it is the default width, its
+ * width's and, unless it is round, its shape's. */
+export const iconButtonClass = (
+  kind: IconButtonKind = 'standard',
+  size: ButtonSize = 'small',
+  width: IconButtonWidth = 'default',
+  shape: ButtonShape = 'round',
+) =>
+  [
+    'icon-button',
+    `icon-button-${kind}`,
+    size !== 'small' && `icon-button-${size}`,
+    width !== 'default' && `icon-button-${width}`,
+    shape !== 'round' && `icon-button-${shape}`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+export default function IconButton({
+  icon,
+  label,
+  kind,
+  size,
+  width,
+  shape,
+  selected,
+  badge,
+  href,
+  className,
+  ...rest
+}: {
+  icon: IconRef;
+  label: string;
+  kind?: IconButtonKind;
+  size?: ButtonSize;
+  width?: IconButtonWidth;
+  shape?: ButtonShape;
+  selected?: boolean;
+  badge?: number | boolean;
+  href?: string;
+  className?: string;
+} & Record<string, unknown>) {
+  const classes = [iconButtonClass(kind, size, width, shape), className].filter(Boolean).join(' ');
+  const toggle = selected !== undefined && href === undefined;
+  const glyph =
+    toggle && typeof icon === 'string' ? <ToggleIcon part="icon-button" name={icon} size={22} /> : <Glyph icon={icon} size={22} />;
+  const button =
+    href === undefined ? (
+      <button type="button" aria-label={label} className={classes} aria-pressed={toggle ? selected : undefined} {...rest}>
+        {glyph}
+      </button>
+    ) : (
+      <Link href={href} aria-label={label} className={classes} {...rest}>
+        {glyph}
+      </Link>
+    );
+  if (!badge) return button;
+  return <Badge count={badge === true ? undefined : badge}>{button}</Badge>;
+}

package/theme/ui/List.tsx

@@ -0,0 +1,287 @@
+// A list (m3.material.io/components/lists, .list in ../styles/ui.css): items under each other (List, a <ul>), each
+// (ListItem, an <li>) with what leads it, its headline, evt. an overline over it (`overline`) and a supporting text
+// under it (`supporting`), and what trails it. Its kind (`kind`: standard, the default, the items on what the list
+// stands on, or segmented, M3 Expressive's, each item on its own surface with a small gap between them) and its dividers
+// (`dividers`: full-width, the default for a standard list, inset, from where the items' text starts, middle-inset or
+// none) are Material's. An item has one, two or three lines (`lines`): with a supporting text two (also when the text
+// is empty, so the items of a list are alike), with an overline too three; a supporting text of two lines needs
+// `lines={3}`. What leads it: `leading` (anything: an icon, a picture, a block's own), or Material's leading
+// kinds, an icon (`leadingIcon`), an avatar (`leadingAvatar`: a letter or a picture), an image (`leadingImage`) or a
+// video's thumbnail (`leadingVideo`). What trails it: a trailing supporting text (`trailingSupporting`: a number, a
+// date), anything (`trailing`: swatches, what is chosen) and an icon (`trailingIcon`: an arrow). With `control` the item is a choice, the theme's
+// Checkbox, RadioButton or Switch before or after its text (`at`; a switch after it, the others before it by default),
+// and a tap anywhere on the item changes it; its name is the headline. `selected`: the chosen one; `disabled`: it
+// cannot be followed or changed. With `href` the item is a link (Link: on the site; in the editor only drawn), with
+// `onClick` a button (what a tap does: the editor's rows), else a <div>; the rest (data-…, aria-…) on it, and
+// `presentation` takes the <li>'s own role away (an item that is an option of a listbox: Search.tsx). `leadingIconSelected`:
+// its icon in the selected colour (the open one, where the item itself is not drawn selected). `truncate`: its texts each
+// on one line, cut off (a name, an address); else they wrap. `columns`: on a wide screen its headline and supporting text
+// side by side, as columns of the list (an address and where it sends to), under each other on a phone. `actions`: secondary actions beside it (icon buttons, a
+// switch), a multi-action item (Material's) with the item its primary action; `children`: what is in its <li> after it
+// (a sheet it opens, a text it folds out). How it looks is the theme's. `className` after the list's own classes (its
+// place in a block), and after an item's own on the item (its place on a screen). An Astro component without React gives its elements the same classes with listClasses and listItemClass.
+// What leads an item, its leading icon, trailing supporting text and trailing icon are parts of their own (ListItemLeading,
+// ListItemLeadingIcon, ListItemTrailingSupporting, ListItemTrailingIcon), so the editor's rows have the same; an icon is its name, as the site
+// gives it, or an icon made, as the editor gives it (IconRef).
+import { useId, type HTMLAttributes, type ReactNode } from 'react';
+import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Checkbox from '@theme/ui/Checkbox';
+import RadioButton from '@theme/ui/RadioButton';
+import Switch, { type SwitchIcons } from '@theme/ui/Switch';
+
+/** A list's kinds and dividers, and its items' lines, as Material 3 names them. */
+export type ListKind = 'standard' | 'segmented';
+export type ListDividers = 'full-width' | 'inset' | 'middle-inset' | 'none';
+export type ListItemLines = 1 | 2 | 3;
+
+/** A list's class. */
+export const listClass = 'list';
+
+/** A list's classes: its kind's (none for standard) and its dividers' (none for full-width; a segmented list has none). */
+export const listClasses = (kind: ListKind = 'standard', dividers: ListDividers = kind === 'segmented' ? 'none' : 'full-width') =>
+  [listClass, kind === 'segmented' && 'list-segmented', dividers !== 'full-width' && `list-dividers-${dividers}`].filter(Boolean).join(' ');
+
+/** A multi-action item's class (Material's): on what holds an item's container, its primary action (a link or a button
+ * with listItemClass), and its secondary actions (icon buttons, a switch) beside it, on one row, which has the primary
+ * action's state (pointed at, pressed). Never an <li> of its own: the <li> holds it. */
+export const listItemMultiActionClass = 'list-item-multi-action';
+
+/** A list item's classes: its lines' (true is two lines), and selected or disabled. */
+export const listItemClass = (lines: boolean | ListItemLines = 1, state: { selected?: boolean; disabled?: boolean } = {}) => {
+  const n = lines === true ? 2 : lines === false ? 1 : lines;
+  return [
+    'list-item-container',
+    n === 2 && 'list-item-two-line',
+    n === 3 && 'list-item-three-line',
+    state.selected && 'list-item-selected',
+    state.disabled && 'list-item-disabled',
+  ]
+    .filter(Boolean)
+    .join(' ');
+};
+
+export default function List({
+  kind,
+  dividers,
+  className,
+  children,
+  ...rest
+}: { kind?: ListKind; dividers?: ListDividers } & HTMLAttributes<HTMLUListElement>) {
+  return (
+    <ul className={[listClasses(kind, dividers), className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </ul>
+  );
+}
+
+/** A picture before an item: its address and what it shows (empty: the headline says it). */
+export type ListItemPicture = { src: string; alt?: string };
+
+/** A choice in an item: the theme's checkbox, radio button or switch, before or after the text (`at`). */
+export type ListItemControl = {
+  type: 'checkbox' | 'radio-button' | 'switch';
+  at?: 'leading' | 'trailing';
+  checked?: boolean;
+  name?: string;
+  value?: string;
+  icons?: SwitchIcons;
+};
+
+/** What leads an item: anything (a picture, a block's own). */
+export function ListItemLeading({ children }: { children: ReactNode }) {
+  return <span className="list-item-leading">{children}</span>;
+}
+
+/** What leads an item, an icon (`icon`, or something drawn as one: `children`), in the muted colour; in the selected
+ * colour in a selected item, or with `selected` (the open one, where the item itself is not drawn selected). */
+export function ListItemLeadingIcon({ icon, selected, children }: { icon?: IconRef; selected?: boolean; children?: ReactNode }) {
+  return (
+    <span className={['list-item-leading list-item-leading-icon', selected && 'list-item-leading-icon-selected'].filter(Boolean).join(' ')}>
+      {icon ? <Glyph icon={icon} size={24} /> : children}
+    </span>
+  );
+}
+
+/** What trails an item as text: a number, a date. */
+export function ListItemTrailingSupporting({ children }: { children: ReactNode }) {
+  return <span className="list-item-trailing-supporting">{children}</span>;
+}
+
+/** What trails an item as an icon (an arrow), or anything (`children`). */
+export function ListItemTrailingIcon({ icon, children }: { icon?: IconRef; children?: ReactNode }) {
+  return <span className="list-item-trailing">{icon ? <Glyph icon={icon} size={24} /> : children}</span>;
+}
+
+export function ListItem({
+  href,
+  onClick,
+  leading,
+  leadingIcon,
+  leadingIconSelected,
+  leadingAvatar,
+  leadingImage,
+  leadingVideo,
+  overline,
+  headline,
+  supporting,
+  trailingSupporting,
+  trailingIcon,
+  trailing,
+  control,
+  lines,
+  selected,
+  disabled,
+  presentation,
+  truncate,
+  columns,
+  actions,
+  className,
+  children,
+  ...rest
+}: {
+  href?: string;
+  onClick?: () => void;
+  leading?: ReactNode;
+  leadingIcon?: IconRef;
+  leadingIconSelected?: boolean;
+  leadingAvatar?: string | ListItemPicture;
+  leadingImage?: ListItemPicture;
+  leadingVideo?: ListItemPicture;
+  overline?: ReactNode;
+  headline: ReactNode;
+  supporting?: ReactNode;
+  trailingSupporting?: ReactNode;
+  trailingIcon?: IconRef;
+  trailing?: ReactNode;
+  control?: ListItemControl;
+  lines?: ListItemLines;
+  selected?: boolean;
+  disabled?: boolean;
+  presentation?: boolean;
+  truncate?: boolean;
+  columns?: boolean;
+  actions?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+} & Record<string, unknown>) {
+  const id = useId();
+  const shown = (v: ReactNode) => v != null && v !== '';
+  const n: ListItemLines =
+    lines ?? (overline != null && supporting !== undefined ? 3 : supporting !== undefined || overline != null ? 2 : 1);
+  const at = control?.at ?? (control?.type === 'switch' ? 'trailing' : 'leading');
+
+  // The choice: the theme's part, named by the headline and described by the supporting text, without a name of its own.
+  const choice = control && (
+    <span className="list-item-control">
+      {(() => {
+        const { type, at: _, icons, ...input } = control;
+        const own = {
+          ...input,
+          label: '',
+          id: `${id}-control`,
+          disabled,
+          'aria-labelledby': `${id}-headline`,
+          'aria-describedby': shown(supporting) ? `${id}-supporting` : undefined,
+        };
+        return type === 'checkbox' ? (
+          <Checkbox {...own} />
+        ) : type === 'radio-button' ? (
+          <RadioButton {...own} />
+        ) : (
+          <Switch icons={icons} {...own} />
+        );
+      })()}
+    </span>
+  );
+
+  const picture = (p: ListItemPicture, kind: string) => (
+    <img src={p.src} alt={p.alt ?? ''} className={`list-item-${kind}`} loading="lazy" />
+  );
+  const lead =
+    control && at === 'leading' ? (
+      choice
+    ) : leading != null ? (
+      <ListItemLeading>{leading}</ListItemLeading>
+    ) : leadingIcon ? (
+      <ListItemLeadingIcon icon={leadingIcon} selected={leadingIconSelected} />
+    ) : typeof leadingAvatar === 'string' ? (
+      <span className="list-item-leading list-item-leading-avatar" aria-hidden="true">
+        <span className="list-item-avatar">{leadingAvatar}</span>
+      </span>
+    ) : leadingAvatar ? (
+      <span className="list-item-leading list-item-leading-avatar">{picture(leadingAvatar, 'avatar')}</span>
+    ) : leadingImage ? (
+      <span className="list-item-leading list-item-leading-image">{picture(leadingImage, 'image')}</span>
+    ) : leadingVideo ? (
+      <span className="list-item-leading list-item-leading-video">{picture(leadingVideo, 'video')}</span>
+    ) : null;
+
+  const cut = truncate ? ' truncate' : '';
+  const text = (
+    <>
+      {shown(overline) && <span className="list-item-overline">{overline}</span>}
+      {/* Ids only for a choice, which they name and describe. */}
+      <span id={control && `${id}-headline`} className={`list-item-headline${cut}`}>
+        {headline}
+      </span>
+      {shown(supporting) && (
+        <span id={control && `${id}-supporting`} className={`list-item-supporting${cut}`}>
+          {supporting}
+        </span>
+      )}
+    </>
+  );
+  const tail = (shown(trailingSupporting) || trailingIcon || trailing != null || (control && at === 'trailing')) && (
+    <>
+      {shown(trailingSupporting) && <ListItemTrailingSupporting>{trailingSupporting}</ListItemTrailingSupporting>}
+      {trailing != null && <ListItemTrailingIcon>{trailing}</ListItemTrailingIcon>}
+      {trailingIcon && <ListItemTrailingIcon icon={trailingIcon} />}
+      {control && at === 'trailing' && choice}
+    </>
+  );
+  const content = (
+    <>
+      {lead}
+      {control ? (
+        // A second name for the choice's <input>, so a tap on the text (and, stretched, on the whole item) changes it.
+        <label htmlFor={`${id}-control`} className="list-item-content">
+          {text}
+        </label>
+      ) : (
+        <span className="list-item-content">{text}</span>
+      )}
+      {tail}
+    </>
+  );
+  const classes = [listItemClass(n, { selected, disabled }), control && 'list-item-with-control', columns && 'list-item-columns', className]
+    .filter(Boolean)
+    .join(' ');
+  const item =
+    href !== undefined && !control && !disabled ? (
+      <Link href={href} className={classes} aria-current={selected ? 'true' : undefined} {...rest}>
+        {content}
+      </Link>
+    ) : onClick && !control ? (
+      <button type="button" className={classes} disabled={disabled} onClick={onClick} {...rest}>
+        {content}
+      </button>
+    ) : (
+      <div className={classes} aria-disabled={disabled && href !== undefined ? true : undefined} {...rest}>
+        {content}
+      </div>
+    );
+  return (
+    <li role={presentation ? 'presentation' : undefined}>
+      {actions != null && actions !== false ? (
+        <div className={listItemMultiActionClass}>
+          {item}
+          {actions}
+        </div>
+      ) : (
+        item
+      )}
+      {children}
+    </li>
+  );
+}

package/theme/ui/LoadingIndicator.tsx

@@ -0,0 +1,29 @@
+// A loading indicator (M3 Expressive, m3.material.io/components/loading-indicator, .loading-indicator in
+// ../styles/ui.css): a shape that turns and changes from one of Material's shapes into the next, while something that
+// takes only a moment is on its way (where how far it has come is known, a progress indicator says it instead). By
+// itself, or in its round container (`contained`, where it stands on something else). Screen readers read it as a
+// progress bar without a value, named by `label` (e.g. "Henter …"). With reduced motion it only turns, slowly. How it
+// looks is the theme's (--loading-indicator-*). An Astro component gives an element the same classes with
+// loadingIndicatorClass, with a .loading-indicator-shape in it.
+
+/** A loading indicator's classes, with its container or without. */
+export const loadingIndicatorClass = (contained?: boolean) =>
+  ['loading-indicator', contained && 'loading-indicator-contained'].filter(Boolean).join(' ');
+
+export default function LoadingIndicator({
+  label,
+  contained,
+  className,
+  ...rest
+}: { label: string; contained?: boolean; className?: string } & Record<string, unknown>) {
+  return (
+    <span
+      role="progressbar"
+      aria-label={label}
+      className={[loadingIndicatorClass(contained), className].filter(Boolean).join(' ')}
+      {...rest}
+    >
+      <span className="loading-indicator-shape"></span>
+    </span>
+  );
+}

package/theme/ui/Menu.tsx

@@ -0,0 +1,278 @@
+// A menu (m3.material.io/components/menus, .menu in ../styles/ui.css): choices on a surface (Menu, a <ul>), each a menu
+// item (MenuItem, .menu-item). The header's pages under an item (components/Header.astro, and a theme's own header)
+// and a split button's other ways (SplitButton.tsx) are menus of links; an Astro header gives its elements the classes
+// with menuClass and menuItemClass. A menu's colour (`color`: standard, the default, on the surface; vibrant, in the
+// accent) and its groups (MenuGroup, evt. with a name over them; `groups`: each group on its own surface with a gap
+// between them, the default, or one surface with a divider between them) are Material's (M3 Expressive); a divider
+// between items is MenuDivider (the theme's Divider). An item is a link (`href`; Link: on the site, in the editor only
+// drawn) or an action (a <button>; the rest, data-… and `onClick`, on it), with its icon (`icon`), a line under its
+// label (`supporting`), a shortcut or a value at its end (`trailingSupporting`) and an icon there (`trailingIcon`); an
+// icon is its name, or an icon made (IconRef: the editor's).
+// `selected`: the open page (a link) or the chosen one of a few (an action); `checked`: an action that is on or off,
+// with the theme's tick (`check`) before it when it is on; `disabled`: it cannot be chosen. With `submenu` (its items)
+// the item opens another menu beside it, with an arrow (`open`: drawn open, the editor).
+//
+// A dropdown menu (DropdownMenu) is a menu a button opens on the site: the theme's Button (`label`, `icon`, `kind`,
+// `size`, with an arrow) or IconButton (`iconButton`: only the icon, `label` its name), and the menu, a WAI-ARIA
+// menu (role="menu", its items menuitem, menuitemcheckbox or menuitemradio). It opens as a popover (popovertarget), so
+// it opens, closes with Escape and a tap outside, and stands over everything also without JavaScript; it is placed at
+// the button with CSS anchor positioning. On the site ui/dropdownMenu.script.ts gives it the keyboard of WAI-ARIA's
+// menu button (the arrow keys, Home, End, a letter, Escape, Tab, and the arrow keys into and out of a submenu), places
+// it where anchor positioning is missing, opens a submenu when the mouse rests on its item, and ticks and chooses
+// items. `open` draws it open (the editor). How all of it looks is the theme's.
+import { createContext, useContext, useId, type CSSProperties, type ReactNode } from 'react';
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link, type ButtonKind } from '@morphemecms/cms/src/standard/view';
+import Button, { type ButtonSize } from '@theme/ui/Button';
+import IconButton from '@theme/ui/IconButton';
+import Divider from '@theme/ui/Divider';
+
+/** A menu's colours, and how its groups stand apart, as Material 3 names them. */
+export type MenuColor = 'standard' | 'vibrant';
+export type MenuGroups = 'gap' | 'divider';
+
+/** A menu's class, and its items'. */
+export const menuClass = 'menu';
+export const menuItemClass = 'menu-item';
+
+/** A menu's classes: its colour's (none for standard) and, with groups divided by a line, `menu-groups-divider`. */
+export const menuClasses = (color: MenuColor = 'standard', groups: MenuGroups = 'gap') =>
+  [menuClass, color === 'vibrant' && 'menu-vibrant', groups === 'divider' && 'menu-groups-divider'].filter(Boolean).join(' ');
+
+// Inside a WAI-ARIA menu (a dropdown menu and its submenus) the items are menu items; elsewhere (the header's pages, a
+// split button's ways) links and buttons in a list.
+const InMenu = createContext(false);
+
+// A CSS anchor's name from an id React made (only letters, digits, - and _).
+const anchorOf = (id: string) => `--menu-${id.replace(/[^\w-]/g, '')}`;
+
+export function Menu({
+  color,
+  groups,
+  className,
+  children,
+  ...rest
+}: { color?: MenuColor; groups?: MenuGroups; className?: string; children: ReactNode } & Record<string, unknown>) {
+  const inMenu = useContext(InMenu) || rest.role === 'menu';
+  return (
+    <InMenu.Provider value={inMenu}>
+      <ul className={[menuClasses(color, groups), className].filter(Boolean).join(' ')} {...rest}>
+        {children}
+      </ul>
+    </InMenu.Provider>
+  );
+}
+
+/** A group of a menu's items, evt. under its name (`label`): its own surface, or after a divider (Menu's `groups`). */
+export function MenuGroup({ label, children }: { label?: string; children: ReactNode }) {
+  const inMenu = useContext(InMenu);
+  const id = useId();
+  return (
+    <li className="menu-group" role={inMenu ? 'none' : undefined}>
+      {label && (
+        // In a menu the group is named by it, and only the group is read.
+        <span id={id} className="menu-group-label" aria-hidden={inMenu || undefined}>
+          {label}
+        </span>
+      )}
+      <ul className="menu-group-items" role={inMenu ? 'group' : undefined} aria-labelledby={label ? id : undefined}>
+        {children}
+      </ul>
+    </li>
+  );
+}
+
+/** A line between a menu's items (the theme's Divider). */
+export function MenuDivider() {
+  return (
+    <li className="menu-divider" role="none">
+      <Divider />
+    </li>
+  );
+}
+
+export function MenuItem({
+  href,
+  selected,
+  checked,
+  disabled,
+  icon,
+  trailingIcon,
+  supporting,
+  trailingSupporting,
+  submenu,
+  open,
+  children,
+  ...rest
+}: {
+  href?: string;
+  selected?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  icon?: IconRef;
+  trailingIcon?: IconRef;
+  supporting?: ReactNode;
+  trailingSupporting?: ReactNode;
+  submenu?: ReactNode;
+  open?: boolean;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const inMenu = useContext(InMenu);
+  const id = useId();
+  const action = href === undefined || submenu !== undefined;
+  // Its role in a menu, and what it says of its state: a link the open page, an action ticked or chosen.
+  const role = !inMenu
+    ? undefined
+    : submenu === undefined && checked !== undefined
+      ? 'menuitemcheckbox'
+      : submenu === undefined && action && selected !== undefined
+        ? 'menuitemradio'
+        : 'menuitem';
+  const state =
+    role === 'menuitemcheckbox'
+      ? { 'aria-checked': checked }
+      : role === 'menuitemradio'
+        ? { 'aria-checked': Boolean(selected) }
+        : !inMenu && action && checked !== undefined
+          ? { 'aria-pressed': checked }
+          : selected
+            ? { 'aria-current': action ? ('true' as const) : ('page' as const) }
+            : {};
+  const content = (
+    <>
+      {(icon || checked !== undefined) && (
+        <span className="menu-item-leading">
+          {icon && <Glyph icon={icon} size={20} className="menu-item-icon" />}
+          {checked !== undefined && <Svg name="check" size={20} className="menu-item-check" />}
+        </span>
+      )}
+      <span className="menu-item-text">
+        <span className="menu-item-label">{children}</span>
+        {supporting != null && supporting !== '' && <span className="menu-item-supporting">{supporting}</span>}
+      </span>
+      {trailingSupporting != null && trailingSupporting !== '' && (
+        <span className="menu-item-trailing-supporting">{trailingSupporting}</span>
+      )}
+      {trailingIcon && <Glyph icon={trailingIcon} size={20} className="menu-item-trailing-icon" />}
+      {submenu !== undefined && <Svg name="caret-right" size={20} className="menu-item-trailing-icon menu-item-submenu-icon" />}
+    </>
+  );
+
+  if (submenu !== undefined) {
+    const menu = `${id}-menu`;
+    const anchor = anchorOf(id);
+    return (
+      <li className="menu-item-submenu" role={inMenu ? 'none' : undefined}>
+        <button
+          type="button"
+          id={id}
+          className={menuItemClass}
+          role={role}
+          aria-haspopup={inMenu ? 'menu' : undefined}
+          aria-expanded={open ? true : undefined}
+          aria-controls={menu}
+          popoverTarget={open ? undefined : menu}
+          disabled={disabled}
+          style={{ anchorName: anchor } as CSSProperties}
+          {...rest}
+        >
+          {content}
+        </button>
+        <ul
+          id={menu}
+          className={`${menuClass} menu-submenu`}
+          role={inMenu ? 'menu' : undefined}
+          aria-labelledby={id}
+          popover={open ? undefined : 'auto'}
+          style={{ positionAnchor: anchor } as CSSProperties}
+        >
+          {submenu}
+        </ul>
+      </li>
+    );
+  }
+  return (
+    <li role={inMenu ? 'none' : undefined}>
+      {!action && !disabled ? (
+        <Link href={href!} className={menuItemClass} role={role} {...state} {...rest}>
+          {content}
+        </Link>
+      ) : !action ? (
+        // A link that cannot be followed: no address, so it is no link.
+        <a className={menuItemClass} role={role} aria-disabled="true" {...state}>
+          {content}
+        </a>
+      ) : (
+        <button type="button" className={menuItemClass} role={role} disabled={disabled} {...state} {...rest}>
+          {content}
+        </button>
+      )}
+    </li>
+  );
+}
+
+/** A menu a button opens (see the top of the file): the button (`label`, evt. `icon`, `kind` outlined by default,
+ * `size`; `iconButton`: only the icon) and its items (`children`: MenuItem, MenuGroup, MenuDivider). `className` on
+ * the whole, the rest on the button. */
+export function DropdownMenu({
+  label,
+  icon,
+  iconButton,
+  kind = 'outlined',
+  size,
+  color,
+  groups,
+  open,
+  className,
+  children,
+  ...rest
+}: {
+  label: string;
+  icon?: string;
+  iconButton?: boolean;
+  kind?: ButtonKind;
+  size?: ButtonSize;
+  color?: MenuColor;
+  groups?: MenuGroups;
+  open?: boolean;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const id = useId();
+  const menu = `${id}-menu`;
+  const anchor = anchorOf(id);
+  const button = {
+    id,
+    'aria-haspopup': 'menu',
+    'aria-expanded': open ? true : undefined,
+    'aria-controls': menu,
+    popoverTarget: open ? undefined : menu,
+    style: { anchorName: anchor } as CSSProperties,
+    'data-dropdown-menu-button': '',
+    ...rest,
+  };
+  return (
+    <div className={['dropdown-menu', className].filter(Boolean).join(' ')} data-dropdown-menu="">
+      {iconButton ? (
+        <IconButton icon={icon ?? 'list'} label={label} {...button} />
+      ) : (
+        <Button kind={kind} size={size} icon={icon} trailingIcon="caret-down" {...button}>
+          {label}
+        </Button>
+      )}
+      <Menu
+        id={menu}
+        role="menu"
+        aria-labelledby={id}
+        color={color}
+        groups={groups}
+        className="dropdown-menu-menu"
+        popover={open ? undefined : 'auto'}
+        style={{ positionAnchor: anchor } as CSSProperties}
+        data-dropdown-menu-menu=""
+      >
+        {children}
+      </Menu>
+    </div>
+  );
+}