@morphemecms/cms 0.5.0 → 0.7.0

package/theme/templates/Home.astro

@@ -26,7 +26,7 @@ const { page, heading, headingHtml, sections } = Astro.props;
   shareTitle={page.data.shareTitle}
   shareDescription={page.data.shareDescription}
 >
-  <Container class="pt-8 md:pt-16">
+  <Container class="pt-8 medium:pt-16">
     <h1 class="theme-title max-w-[22ch]">{headingHtml ? <Fragment set:html={headingHtml} /> : heading}</h1>
   </Container>
   {sections.map((s, i) => {

package/theme/templates/New.astro

@@ -25,8 +25,8 @@ const posts = (await getPosts({ unlisted: true })).filter((p) => stateOf(p.data)
   <PageHeader title={siteT.theme.newPages} intro={siteT.theme.newPagesIntro} />
 
   {rows.length > 0 && (
-    <Container as="section" class="mt-12 md:mt-16">
-      <ul class="rounded-panel border border-line px-5 md:px-7">
+    <Container as="section" class="mt-12 medium:mt-16">
+      <ul class="rounded-panel border border-line px-5 medium:px-7">
         {rows.map(({ page, current }, i) => (
           <li id={previewId(page.data.path)} class:list={['scroll-mt-24 py-5', i > 0 && 'border-t border-line']}>
             <p class="type-title-medium">{pageHeading(page)}</p>
@@ -50,10 +50,10 @@ const posts = (await getPosts({ unlisted: true })).filter((p) => stateOf(p.data)
   )}
 
   {posts.length > 0 && (
-    <Container as="section" class="mt-12 mb-20 md:mt-16 md:mb-28">
-      <h2 class="type-headline-small md:type-headline-medium">{siteT.theme.newPosts}</h2>
+    <Container as="section" class="mt-12 mb-20 medium:mt-16 medium:mb-28">
+      <h2 class="type-headline-small medium:type-headline-medium">{siteT.theme.newPosts}</h2>
       <p class="mt-2 max-w-[60ch] text-muted">{siteT.theme.newPostsIntro}</p>
-      <ul class="mt-5 rounded-panel border border-line px-5 md:px-7">
+      <ul class="mt-5 rounded-panel border border-line px-5 medium:px-7">
         {posts.map((p, i) => (
           <li class:list={['py-4', i > 0 && 'border-t border-line']}>
             <a href={postPath(p)} class="inline-flex items-center gap-1.5 font-medium hover:text-accent">

package/theme/templates/NotFound.astro

@@ -29,13 +29,13 @@ const index: [string, string][] = [
 ];
 
 // Less space above the first section than on the other pages: the suggestion sits between.
-const spaceOf = (i: number) => (i === 0 ? 'mt-6 md:mt-8' : space(i));
+const spaceOf = (i: number) => (i === 0 ? 'mt-6 medium:mt-8' : space(i));
 ---
 
 <Base title={siteT.theme.notFound} noindex>
   <PageHeader title={heading} intro={intro} />
 
-  <Container as="div" class="mt-8 md:mt-12">
+  <Container as="div" class="mt-8 medium:mt-12">
     <Card href="" id="suggestion" hidden className="group flex max-w-2xl items-center justify-between gap-6">
       <span>
         <span class="type-body-medium block text-muted">{siteT.theme.didYouMean}</span>

package/theme/ui/BottomSheet.tsx

@@ -9,23 +9,57 @@
 //   headline. It rests in one of its states (`state`, where it starts: 'collapsed', only the handle and the header;
 //   'half-expanded', at most half the screen's height; 'expanded', as high as what it shows, nearly to the top; or
 //   'hidden'), and its handle is a button (`dragHandleLabel`, what it says to a screen reader) that is dragged between
-//   them or tapped to expand and collapse it; with a close button it can be hidden. On the site bottomSheet.script.ts
+//   them or tapped to step through them (up one at a time, from the highest back to the lowest); with a close button
+//   it can be hidden. `states` (data-states, space-separated) lists the states it may rest in; without it Material 3's
+//   (defaultStates in lib/sheet-stops.mjs, 'hidden' first when it has a close button). On the site bottomSheet.script.ts
 //   lets it be dragged (standardBottomSheet() in bottomSheetControl.ts, which a block's or an app's script can also use); in
 //   the editor it is drawn in its state and dragged here, at the bottom of its frame (which holds it with
 //   contain: layout, and is a size container).
+// `wide` is what it becomes from the medium breakpoint (data-wide): a standard sheet's 'side-sheet' (the default: drawn as a
+// standard side sheet at the end of the screen, full height, without handle and buttons, every part shown, and
+// standardBottomSheet() does nothing while the window is that wide) or 'sheet' (stays a bottom sheet, with margins,
+// --bottom-sheet-margin-wide); a modal one's 'dialog' (the default), 'side-sheet' or 'sheet' (TypeScript rejects
+// 'dialog' on a standard sheet). For a modal one 'side-sheet' is a modal side sheet at the end of the screen (full height,
+// its scrim and tokens, without the handle) that bottomSheet() slides in from the end, and 'sheet' stays a bottom sheet
+// with the margins and slides up; a container without the attribute (hand-written) is a 'dialog'.
+// `startAt` (a modal sheet only, data-start; 'half' without it, also for a hand-written container without the attribute,
+// Calendly's) is how high it opens on a phone: 'half', half the screen's height or as high as what is in it if that is
+// less, or 'full', as high as the screen allows below --bottom-sheet-top-gap. It is pulled up to full height and down to
+// close (modalSheetSize.ts); the content scrolls only at full height. The editor's sheets are not touched.
+// `peek` (a standard sheet only) is what it shows even while collapsed (Material 3's preview), between the header and
+// what it shows (.bottom-sheet-peek). A standard sheet is named by its headline or, without one, by `label` (the props are a
+// union: TypeScript rejects a sheet with neither `headline` nor `label`; a modal one's <dialog> is named by the
+// developer who writes it). The drag handle can be left out (`dragHandle={false}`: no handle, so no tap to step
+// through the states; the header, if there is one, still drags it). The header is drawn only when there is a
+// headline or a close button, or a resize or collapse button. `resizeLabel` adds the resize button (Material 3's
+// alternative to dragging the handle for those who use a single pointer: it does what a tap on the handle does, its
+// icon an up caret at the lowest stop and a down caret otherwise, `aria-expanded` saying which); a sheet without a
+// handle that can be resized must have it (the props are a union again). `collapseLabel` adds the collapse button, which
+// shows only while the sheet is as high as the screen allows (data-full, set by the control) and returns it to its
+// lowest stop. `state` defaults to the lowest of `states` that is not 'hidden' ('collapsed' without
+// `states`), so a fixed sheet (`states={['expanded']}`) starts in its only state.
 // The editor's own sheets (choices, fields) are modal ones in a <dialog> with bottomSheetFitClass, as high as what is in
 // them (bottomSheetFullClass: as high as the screen, a whole page in it), with the container and its header
 // (BottomSheetHeader, whose handle is a button there, `onHandle`, named `handleLabel`, and whose close button does
 // `onClose`).
 // How it looks is the theme's (--bottom-sheet-*).
-import { useEffect, useRef, type ReactNode } from 'react';
+import { useEffect, useId, useRef, type ReactNode } from 'react';
 import { useOnSite } from '@morphemecms/cms/src/standard/view';
 import IconButton from '@theme/ui/IconButton';
+import BottomSheetResizeIcon from '@theme/ui/BottomSheetResizeIcon';
 import { standardBottomSheet } from '@theme/ui/bottomSheetControl';
 
 /** The kinds of a bottom sheet, and the states a standard one rests in, as Material 3 names them. */
 export type BottomSheetKind = 'modal' | 'standard';
 export type BottomSheetState = 'collapsed' | 'half-expanded' | 'expanded' | 'hidden';
+/** What a sheet becomes from the medium breakpoint; a standard one cannot be a dialog (the props are typed per kind). */
+export type BottomSheetWide = 'side-sheet' | 'dialog' | 'sheet';
+/** Where a modal sheet opens on a phone: at half the screen's height (or as high as what is in it, if that is less), or as
+ * high as the screen allows; a standard sheet has its `state` instead (the props are typed per kind). */
+export type BottomSheetStart = 'half' | 'full';
+export type BottomSheetKindWide =
+  | { kind?: 'modal'; wide?: BottomSheetWide; startAt?: BottomSheetStart }
+  | { kind: 'standard'; wide?: Exclude<BottomSheetWide, 'dialog'>; startAt?: never };
 
 /** The class of the <dialog> a modal bottom sheet is in, of what stands in place of what it shows (over a frame while
  * it loads, or instead of it), and a bottom sheet's container's classes. */
@@ -38,6 +72,26 @@ export const bottomSheetContainerClass = (kind: BottomSheetKind = 'modal') =>
 export const bottomSheetFitClass = 'bottom-sheet bottom-sheet-fit';
 export const bottomSheetFullClass = 'bottom-sheet bottom-sheet-full';
 
+/** Whether a sheet's header is drawn: it has a headline or a button. */
+const hasHeader = (headline: ReactNode, ...labels: (string | undefined)[]) => headline !== undefined || labels.some(Boolean);
+
+/** What names a bottom sheet: a headline, or (without one) a `label`. */
+export type BottomSheetName =
+  | { headline: Exclude<ReactNode, undefined | null>; headlineId?: string; label?: never }
+  | { label: string; headline?: never; headlineId?: never };
+
+/** What a sheet without a drag handle needs to be resizable: a resize button, or states that leave nothing to resize
+ * (one other than 'hidden', evt. with 'hidden'). Material 3's states, which omitted `states` means, are resizable. */
+type FixedStates = [Exclude<BottomSheetState, 'hidden'>] | ['hidden', Exclude<BottomSheetState, 'hidden'>];
+export type BottomSheetResize =
+  | { dragHandle?: true; resizeLabel?: string }
+  | { dragHandle: false; resizeLabel: string }
+  | { dragHandle: false; resizeLabel?: undefined; states: FixedStates };
+
+/** The state a standard sheet starts in when `state` is not given: the lowest of `states` that is not 'hidden'. */
+const startState = (states?: BottomSheetState[]): BottomSheetState =>
+  (['collapsed', 'half-expanded', 'expanded'] as const).find((s) => !states || states.includes(s)) ?? 'collapsed';
+
 /** A bottom sheet's drag handle and header: its headline, the supporting text under it and evt. the close button. The
  * handle is a button with `handleLabel` (a standard sheet's, `expanded` saying whether it is up; the editor's, which
  * does `onHandle`); the close button does `onClose` in the editor. */
@@ -46,25 +100,33 @@ export function BottomSheetHeader({
   headlineId,
   supportingText,
   closeLabel,
+  resizeLabel,
+  collapseLabel,
   handleLabel,
   expanded,
+  raised,
   standard,
+  dragHandle = true,
   onHandle,
   onClose,
 }: {
-  headline: ReactNode;
+  headline?: ReactNode;
   headlineId?: string;
   supportingText?: ReactNode;
   closeLabel?: string;
+  resizeLabel?: string;
+  collapseLabel?: string;
   handleLabel?: string;
   expanded?: boolean;
+  raised?: boolean;
   standard?: boolean;
+  dragHandle?: boolean;
   onHandle?: () => void;
   onClose?: () => void;
 }) {
   return (
     <>
-      {handleLabel !== undefined ? (
+      {!dragHandle ? null : handleLabel !== undefined ? (
         <button
           type="button"
           className="bottom-sheet-drag-handle"
@@ -76,44 +138,67 @@ export function BottomSheetHeader({
       ) : (
         <div className="bottom-sheet-drag-handle" data-bottom-sheet-handle=""></div>
       )}
-      <div className="bottom-sheet-header" data-bottom-sheet-header={standard ? '' : undefined}>
-        <div className="bottom-sheet-heading">
-          <h2 id={headlineId} className="bottom-sheet-headline">
-            {headline}
-          </h2>
-          {supportingText && <p className="bottom-sheet-supporting-text">{supportingText}</p>}
+      {hasHeader(headline, closeLabel, resizeLabel, collapseLabel) && (
+        <div className="bottom-sheet-header" data-bottom-sheet-header={standard ? '' : undefined}>
+          <div className="bottom-sheet-heading">
+            {headline !== undefined && (
+              <h2 id={headlineId} className="bottom-sheet-headline">
+                {headline}
+              </h2>
+            )}
+            {supportingText && <p className="bottom-sheet-supporting-text">{supportingText}</p>}
+          </div>
+          {(resizeLabel || collapseLabel || closeLabel) && (
+            <div className="bottom-sheet-actions">
+              {resizeLabel && (
+                <IconButton icon={<BottomSheetResizeIcon />} label={resizeLabel} aria-expanded={!!raised} data-bottom-sheet-resize="" />
+              )}
+              {collapseLabel && <IconButton icon="caret-down" label={collapseLabel} data-bottom-sheet-collapse="" />}
+              {closeLabel && <IconButton icon="x" label={closeLabel} data-bottom-sheet-close="" onClick={onClose} />}
+            </div>
+          )}
         </div>
-        {closeLabel && <IconButton icon="x" label={closeLabel} data-bottom-sheet-close="" onClick={onClose} />}
-      </div>
+      )}
     </>
   );
 }
 
 export default function BottomSheet({
   kind = 'modal',
-  state = 'collapsed',
+  wide,
+  startAt,
+  state,
+  states,
   headline,
   headlineId,
+  label,
   supportingText,
   closeLabel,
+  resizeLabel,
+  collapseLabel,
+  dragHandle = true,
   dragHandleLabel,
+  peek,
   footer,
   height,
   className,
   children,
 }: {
-  kind?: BottomSheetKind;
   state?: BottomSheetState;
-  headline: ReactNode;
-  headlineId?: string;
+  states?: [BottomSheetState, ...BottomSheetState[]];
   supportingText?: ReactNode;
   closeLabel?: string;
+  collapseLabel?: string;
   dragHandleLabel?: string;
+  peek?: ReactNode;
   footer?: ReactNode;
   height?: string;
   className?: string;
   children: ReactNode;
-}) {
+} & BottomSheetKindWide &
+  BottomSheetName &
+  BottomSheetResize) {
+  const shownState = state ?? startState(states);
   const standard = kind === 'standard';
   const onSite = useOnSite();
   const sheet = useRef<HTMLDivElement>(null);
@@ -121,26 +206,38 @@ export default function BottomSheet({
   useEffect(() => {
     if (standard && !onSite && sheet.current) standardBottomSheet(sheet.current);
   }, [standard, onSite]);
+  // A standard sheet is named by its headline even when the caller gives it no id.
+  const generatedId = useId();
+  const titleId = headlineId ?? generatedId;
   const Container = standard ? 'section' : 'div';
   return (
     <Container
       ref={sheet}
       className={[bottomSheetContainerClass(kind), className].filter(Boolean).join(' ')}
-      aria-labelledby={standard ? headlineId : undefined}
+      aria-labelledby={standard && headline !== undefined ? titleId : undefined}
+      aria-label={standard && headline === undefined ? label : undefined}
       data-bottom-sheet-container=""
       data-bottom-sheet-standard={standard ? '' : undefined}
-      data-state={standard ? state : undefined}
+      data-wide={wide ?? (standard ? 'side-sheet' : 'dialog')}
+      data-start={standard ? undefined : (startAt ?? 'half')}
+      data-state={standard ? shownState : undefined}
+      data-states={standard && states ? states.join(' ') : undefined}
       style={height ? { height } : undefined}
     >
       <BottomSheetHeader
         headline={headline}
-        headlineId={headlineId}
+        headlineId={standard && headline !== undefined ? titleId : headlineId}
         supportingText={supportingText}
         closeLabel={closeLabel}
+        resizeLabel={standard ? resizeLabel : undefined}
+        collapseLabel={standard ? collapseLabel : undefined}
+        dragHandle={dragHandle}
         handleLabel={standard ? (dragHandleLabel ?? '') : undefined}
-        expanded={state === 'half-expanded' || state === 'expanded'}
+        expanded={shownState === 'half-expanded' || shownState === 'expanded'}
+        raised={shownState !== 'hidden' && shownState !== startState(states)}
         standard={standard}
       />
+      {standard && peek && <div className="bottom-sheet-peek">{peek}</div>}
       <div className="bottom-sheet-content">{children}</div>
       {footer && <p className="bottom-sheet-footer">{footer}</p>}
     </Container>

package/theme/ui/BottomSheetResizeIcon.tsx

@@ -0,0 +1,13 @@
+// The icon of a bottom sheet's resize button (BottomSheet.tsx): the up caret while the sheet is at its lowest stop, the
+// down caret otherwise; both are drawn and ui.css shows the one the button's aria-expanded says, so the control
+// (bottomSheetControl.ts) only changes that attribute. Exposes BottomSheetResizeIcon, an IconRef element for IconButton.
+import { Svg } from '@morphemecms/cms/src/icon';
+
+export default function BottomSheetResizeIcon({ size = 22 }: { size?: number; className?: string }) {
+  return (
+    <>
+      <Svg name="caret-up" size={size} className="bottom-sheet-resize-up" />
+      <Svg name="caret-down" size={size} className="bottom-sheet-resize-down" />
+    </>
+  );
+}

package/theme/ui/Button.tsx

@@ -22,9 +22,10 @@ export type ButtonShape = (typeof buttonShapes)[number];
 export const buttonClass = (kind: ButtonKind = 'filled', size: ButtonSize = 'medium', shape: ButtonShape = 'round') =>
   ['button', `button-${kind}`, size !== 'medium' && `button-${size}`, shape !== 'round' && `button-${shape}`].filter(Boolean).join(' ');
 
-/** A toggle's icon (a Button's, an IconButton's): the icon, and the same icon filled while it is on, where the site
- * draws it filled (the theme shows the one of the state it is in: .<part>-unselected-icon, .<part>-selected-icon). */
-export function ToggleIcon({ part, name, size }: { part: 'button' | 'icon-button'; name: string; size: number }) {
+/** A toggle's icon (a Button's, an IconButton's, a navigation drawer item's): the icon, and the same icon filled while
+ * it is on, where the site draws it filled (the theme shows the one of the state it is in: .<part>-unselected-icon,
+ * .<part>-selected-icon). */
+export function ToggleIcon({ part, name, size }: { part: 'button' | 'icon-button' | 'navigation-drawer'; name: string; size: number }) {
   if (!iconFile(name, 'fill')) return <Svg name={name} size={size} />;
   return (
     <>

package/theme/ui/Dialog.tsx

@@ -7,7 +7,7 @@
 //   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
+//   (`divider`), and under them what it shows (`supportingText` and `children`, scrolling). From the medium breakpoint, 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 dialogControl.ts (or the script that shows it: Popup.astro) opens and closes. How it looks is the theme's

package/theme/ui/FabMenu.tsx

@@ -1,17 +1,18 @@
 // 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.
+// fabClass: `icon`, a name or an 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). ui/fabMenu.script.ts
+// opens and closes it (on the site, and in the editor through setUpFabMenu). Other attributes (data-…) go on the
+// whole.
 import { useId } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
+import { Glyph, Svg, type IconRef } 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 type FabMenuItem = { icon: IconRef; label: string; href?: string } & Record<string, unknown>;
 export const fabMenuKinds = ['primary', 'secondary', 'tertiary'] as const;
 export type FabMenuKind = (typeof fabMenuKinds)[number];
 
@@ -30,7 +31,7 @@ export default function FabMenu({
   className,
   ...rest
 }: {
-  icon: string;
+  icon: IconRef;
   label: string;
   closeLabel: string;
   items: FabMenuItem[];
@@ -52,7 +53,7 @@ export default function FabMenu({
         data-label={label}
         data-close-label={closeLabel}
       >
-        <Svg name={icon} size={24} className="fab-menu-icon" />
+        <Glyph icon={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}>

package/theme/ui/LoadingIndicator.tsx

@@ -2,7 +2,7 @@
 // ../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
+// 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.
 

package/theme/ui/NavigationDrawer.tsx

@@ -1,48 +1,149 @@
-// A modal navigation drawer (m3.material.io/components/navigation-drawer, .navigation-drawer in ../styles/ui.css): the
-// site's pages in a panel over the page (components/MobileMenu.tsx, and a theme's own menu), over its scrim
-// (navigationDrawerScrimClass). Its pages are items (NavigationDrawerItem, `active`: the open page or the one holding
-// it), an item with sub-pages is a row (NavigationDrawerRow) with the button that unfolds them after it
+// A navigation drawer (m3.material.io/components/navigation-drawer, .navigation-drawer in ../styles/ui.css), at the
+// start edge: the site's pages in a panel over the page (components/MobileMenu.tsx, and a theme's own menu), over its
+// scrim (navigationDrawerScrimClass). Its pages are items (NavigationDrawerItem, `active`: the open page or the one
+// holding it), an item with sub-pages is a row (NavigationDrawerRow) with the button that unfolds them after it
 // (NavigationDrawerToggle, `expanded`), and a sub-page a subitem (NavigationDrawerSubitem). Where it comes from, how it
 // moves and what else is in it (the logo, the buttons) is the menu's own: it gives its own element (a motion.div) the
 // class with navigationDrawerClass; in a <dialog> (the editor's), the dialog has navigationDrawerDialogClass and its
-// scrim is the dialog's. Links are Link (on the site; in the editor's previews only drawn), an item without `href` a
-// button (the editor's: a part of a form); other attributes (onClick, aria-…) go on them.
-import type { ReactNode } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
+// scrim is the dialog's. Its variant (variant): modal, the default, over its scrim, or standard, beside the content at
+// full height without a scrim and without a shadow (navigationDrawerClasses gives the classes to an element of its own);
+// where it stands is the component's own. Links are Link (on the site; in the editor's previews only drawn), an item
+// without `href` a button (the editor's: a part of a form); other attributes (onClick, aria-…) go on them. An item has
+// an icon before its label (icon: a Phosphor name, filled while it is active, or an icon made) and evt. a badge after
+// the label (badge: how many there are, label large). The pages can stand in sections (NavigationDrawerSection, label:
+// its name, title small), a full-width line (the theme's Divider) between them. The arrow keys, Home and End move
+// between the items (NavigationDrawer does it itself; a drawer drawn as a class on an element of its own calls
+// navigationDrawerKeys(root)), and a modal one gives its first item the focus when it opens
+// (focusNavigationDrawerItem(root); navigationDrawerControl.ts). An item can end in an icon (trailing: an arrow to a list
+// it opens), and a drawer in two levels has a back row (NavigationDrawerBack, an arrow and a label) at the top of the
+// second level; it is a button, so the arrow keys reach it like an item.
+import type { KeyboardEvent, ReactNode } from 'react';
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+import { ToggleIcon } from '@theme/ui/Button';
 import { Link } from '@morphemecms/cms/src/standard/view';
+import Divider from '@theme/ui/Divider';
+import { handleDrawerKey } from './navigationDrawerControl';
+export { focusNavigationDrawerItem, navigationDrawerKeys } from './navigationDrawerControl';
+
+export type NavigationDrawerVariant = 'modal' | 'standard';
 
 /** The drawer's class, and its scrim's. */
 export const navigationDrawerClass = 'navigation-drawer';
 export const navigationDrawerScrimClass = 'navigation-drawer-scrim';
-/** The class of a <dialog> the drawer is in: at the end of the screen, as high as it, over its scrim. */
+/** The class of a <dialog> the drawer is in: at the start of the screen, as high as it, over its scrim. */
 export const navigationDrawerDialogClass = 'navigation-drawer-dialog';
 
-export function NavigationDrawer({ className, children, ...rest }: { className?: string; children: ReactNode } & Record<string, unknown>) {
+/** The drawer's classes with its variant: `modal` (the default) over a scrim, `standard` beside the content, full height. */
+export const navigationDrawerClasses = (variant: NavigationDrawerVariant = 'modal') =>
+  [navigationDrawerClass, variant === 'standard' && 'navigation-drawer-standard'].filter(Boolean).join(' ');
+
+export function NavigationDrawer({
+  variant = 'modal',
+  className,
+  children,
+  onKeyDown,
+  ...rest
+}: {
+  variant?: NavigationDrawerVariant;
+  className?: string;
+  children: ReactNode;
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+} & Record<string, unknown>) {
+  return (
+    <div
+      className={[navigationDrawerClasses(variant), className].filter(Boolean).join(' ')}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) handleDrawerKey(event.nativeEvent, event.currentTarget);
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Items under each other in a section, with its name (`label`) over them. Between two sections stands a full-width
+ * divider (drawn by the section that has one before it, shown by the theme), never between single items. */
+export function NavigationDrawerSection({ label, children }: { label?: string; children: ReactNode }) {
   return (
-    <div className={[navigationDrawerClass, className].filter(Boolean).join(' ')} {...rest}>
+    <div className="navigation-drawer-section" role={label ? 'group' : undefined} aria-label={label}>
+      <Divider className="navigation-drawer-section-divider" />
+      {label && (
+        <span className="navigation-drawer-section-label" aria-hidden="true">
+          {label}
+        </span>
+      )}
       {children}
     </div>
   );
 }
 
-/** A page in the drawer, `active` when it is the open page or holds it; without `href` a button. */
+/** The icon before an item's label: a Phosphor name is drawn outlined, and filled on the active item where the site draws
+ * a filled one (ToggleIcon); an icon made is drawn as it is. */
+function ItemIcon({ icon }: { icon: IconRef }) {
+  return (
+    <span className="navigation-drawer-icon">
+      {typeof icon === 'string' ? <ToggleIcon part="navigation-drawer" name={icon} size={24} /> : <Glyph icon={icon} size={24} />}
+    </span>
+  );
+}
+
+/** A page in the drawer, `active` when it is the open page or holds it; without `href` a button. With an `icon` (24dp,
+ * filled when it is active; Material: all items have one or none), evt. a badge (the text at its end: how many there
+ * are) and evt. a `trailing` icon at the very end (24dp, outlined; an arrow to the list the item opens). */
 export function NavigationDrawerItem({
   href,
   active,
+  icon,
+  badge,
+  trailing,
   children,
   ...rest
-}: { href?: string; active?: boolean; children: ReactNode } & Record<string, unknown>) {
+}: {
+  href?: string;
+  active?: boolean;
+  icon?: IconRef;
+  badge?: ReactNode;
+  trailing?: IconRef;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const content = (
+    <>
+      {icon !== undefined && <ItemIcon icon={icon} />}
+      <span className="navigation-drawer-label">{children}</span>
+      {badge != null && badge !== '' && <span className="navigation-drawer-badge">{badge}</span>}
+      {trailing !== undefined && (
+        <span className="navigation-drawer-trailing">
+          {typeof trailing === 'string' ? <Svg name={trailing} size={24} /> : <Glyph icon={trailing} size={24} />}
+        </span>
+      )}
+    </>
+  );
   return href === undefined ? (
     <button type="button" className="navigation-drawer-item" data-active={active || undefined} {...rest}>
-      {children}
+      {content}
     </button>
   ) : (
     <Link href={href} className="navigation-drawer-item" data-active={active || undefined} {...rest}>
-      {children}
+      {content}
     </Link>
   );
 }
 
+/** The back row at the top of a drawer's second level: an `arrow-left` and the `label` (the first level's name). A
+ * button; `onClick` shows the first level. */
+export function NavigationDrawerBack({ label, ...rest }: { label: string } & Record<string, unknown>) {
+  return (
+    <button type="button" className="navigation-drawer-item navigation-drawer-back" {...rest}>
+      <span className="navigation-drawer-icon">
+        <Svg name="arrow-left" size={24} />
+      </span>
+      <span className="navigation-drawer-label">{label}</span>
+    </button>
+  );
+}
+
 /** An item and what stands after it (the toggle of its sub-pages). */
 export function NavigationDrawerRow({
   className,

package/theme/ui/NavigationRail.tsx

@@ -15,6 +15,7 @@
 // editor's logo and the site's name). With `onExpandedChange` the rail is expanded and collapsed by whoever draws it (the
 // editor) instead of by its script; a modal one without `scrim` has none (one that expands while the mouse is over it:
 // the editor's).
+// A destination without `href` is a button (the editor's sections, which open their list).
 // Where it stands (beside the content, in a row) is the component's own; how it looks is the theme's. Links are Link (on
 // the site; in the editor only drawn). An Astro component gives its elements the classes with navigationRailClass,
 // navigationRailClasses and navigationRailItemClass.
@@ -119,7 +120,7 @@ export function NavigationRailSection({ label, children }: { label: string; chil
   );
 }
 
-/** A destination: its icon (a Phosphor name, the theme's icon, or an icon made: IconRef) and its label, `selected` when
+/** A destination, a link (or, without `href`, a button): its icon (a Phosphor name, the theme's icon, or an icon made: IconRef) and its label, `selected` when
  * it is the open page, evt. a badge on the icon, and a text at its end while the rail is expanded. */
 export function NavigationRailItem({
   href,
@@ -130,25 +131,33 @@ export function NavigationRailItem({
   trailingSupporting,
   ...rest
 }: {
-  href: string;
+  href?: string;
   icon: IconRef;
   label: ReactNode;
   selected?: boolean;
   badge?: true | number;
   trailingSupporting?: ReactNode;
 } & Record<string, unknown>) {
-  return (
-    <Link href={href} className={navigationRailItemClass} aria-current={selected ? 'page' : undefined} {...rest}>
-      <span className="navigation-rail-indicator">
-        <span className="navigation-rail-icon">
-          <Glyph icon={icon} size={24} />
-          {badge !== undefined && <Badge count={badge === true ? undefined : badge} className="navigation-rail-badge" />}
-        </span>
-        <span className="navigation-rail-label">{label}</span>
-        {trailingSupporting != null && trailingSupporting !== '' && (
-          <span className="navigation-rail-trailing-supporting">{trailingSupporting}</span>
-        )}
+  const content = (
+    <span className="navigation-rail-indicator">
+      <span className="navigation-rail-icon">
+        <Glyph icon={icon} size={24} />
+        {badge !== undefined && <Badge count={badge === true ? undefined : badge} className="navigation-rail-badge" />}
       </span>
+      <span className="navigation-rail-label">{label}</span>
+      {trailingSupporting != null && trailingSupporting !== '' && (
+        <span className="navigation-rail-trailing-supporting">{trailingSupporting}</span>
+      )}
+    </span>
+  );
+  // Without `href` a button (the editor's: a section that opens its list in the expanded rail); `selected` is aria-current.
+  return href === undefined ? (
+    <button type="button" className={navigationRailItemClass} aria-current={selected ? 'true' : undefined} {...rest}>
+      {content}
+    </button>
+  ) : (
+    <Link href={href} className={navigationRailItemClass} aria-current={selected ? 'page' : undefined} {...rest}>
+      {content}
     </Link>
   );
 }