@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/NavigationBar.tsx

@@ -1,62 +1,62 @@
-// A navigation bar (m3.material.io/components/navigation-bar, .navigation-bar in ../styles/ui.css): the few main
-// destinations side by side at the bottom of a phone's screen (NavigationBar, a <nav> with its name, `label`), each
-// (NavigationBarItem) with its icon and its label, the open one (`selected`, aria-current) with the indicator behind its
-// icon, and evt. a badge on the icon (`badge`: true for a dot, else the number it shows; the theme's Badge). Where the
-// icon stands (`iconPosition`) is M3 Expressive's item configuration: `top`, the default, over the label (vertical
-// items, each as wide as the others), `start` beside it (horizontal items, as wide as their content, together in the
-// middle of the bar, the indicator behind both), or `auto`: over it while the bar is narrower than 600px (a phone) and
-// beside it from there (a tablet and wider), as Material recommends. Where it stands (fixed at the bottom of the screen)
-// is the component's own; how it looks is the theme's. Links are Link (on the site; in the editor only drawn); other
-// attributes go on them. An Astro component gives its elements the classes with navigationBarClass,
-// navigationBarClasses and navigationBarItemClass.
-import type { ReactNode } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-import { Link } from '@morphemecms/cms/src/standard/view';
-import Badge from '@theme/ui/Badge';
-
-export type NavigationBarIconPosition = 'top' | 'start' | 'auto';
-
-/** The bar's class, and a destination's. */
-export const navigationBarClass = 'navigation-bar';
-export const navigationBarItemClass = 'navigation-bar-item';
-
-/** The bar's classes with where its items' icons stand. */
-export const navigationBarClasses = (iconPosition: NavigationBarIconPosition = 'top') =>
-  iconPosition === 'top' ? navigationBarClass : `${navigationBarClass} navigation-bar-${iconPosition}`;
-
-export default function NavigationBar({
-  label,
-  iconPosition,
-  className,
-  children,
-  ...rest
-}: { label: string; iconPosition?: NavigationBarIconPosition; className?: string; children: ReactNode } & Record<string, unknown>) {
-  return (
-    <nav aria-label={label} className={[navigationBarClasses(iconPosition), className].filter(Boolean).join(' ')} {...rest}>
-      {children}
-    </nav>
-  );
-}
-
-/** A destination: its icon (a Phosphor name, the theme's icon) and its label, `selected` when it is the open page,
- * and evt. a badge on the icon. */
-export function NavigationBarItem({
-  href,
-  icon,
-  label,
-  selected,
-  badge,
-  ...rest
-}: { href: string; icon: string; label: ReactNode; selected?: boolean; badge?: true | number } & Record<string, unknown>) {
-  return (
-    <Link href={href} className={navigationBarItemClass} aria-current={selected ? 'page' : undefined} {...rest}>
-      <span className="navigation-bar-indicator">
-        <span className="navigation-bar-icon">
-          <Svg name={icon} size={24} />
-          {badge !== undefined && <Badge count={badge === true ? undefined : badge} className="navigation-bar-badge" />}
-        </span>
-        <span className="navigation-bar-label">{label}</span>
-      </span>
-    </Link>
-  );
-}
+// A navigation bar (m3.material.io/components/navigation-bar, .navigation-bar in ../styles/ui.css): the few main
+// destinations side by side at the bottom of a phone's screen (NavigationBar, a <nav> with its name, `label`), each
+// (NavigationBarItem) with its icon and its label, the open one (`selected`, aria-current) with the indicator behind its
+// icon, and evt. a badge on the icon (`badge`: true for a dot, else the number it shows; the theme's Badge). Where the
+// icon stands (`iconPosition`) is M3 Expressive's item configuration: `top`, the default, over the label (vertical
+// items, each as wide as the others), `start` beside it (horizontal items, as wide as their content, together in the
+// middle of the bar, the indicator behind both), or `auto`: over it while the bar is narrower than 600px (a phone) and
+// beside it from there (a tablet and wider), as Material recommends. Where it stands (fixed at the bottom of the screen)
+// is the component's own; how it looks is the theme's. Links are Link (on the site; in the editor only drawn); other
+// attributes go on them. An Astro component gives its elements the classes with navigationBarClass,
+// navigationBarClasses and navigationBarItemClass.
+import type { ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Badge from '@theme/ui/Badge';
+
+export type NavigationBarIconPosition = 'top' | 'start' | 'auto';
+
+/** The bar's class, and a destination's. */
+export const navigationBarClass = 'navigation-bar';
+export const navigationBarItemClass = 'navigation-bar-item';
+
+/** The bar's classes with where its items' icons stand. */
+export const navigationBarClasses = (iconPosition: NavigationBarIconPosition = 'top') =>
+  iconPosition === 'top' ? navigationBarClass : `${navigationBarClass} navigation-bar-${iconPosition}`;
+
+export default function NavigationBar({
+  label,
+  iconPosition,
+  className,
+  children,
+  ...rest
+}: { label: string; iconPosition?: NavigationBarIconPosition; className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <nav aria-label={label} className={[navigationBarClasses(iconPosition), className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </nav>
+  );
+}
+
+/** A destination: its icon (a Phosphor name, the theme's icon) and its label, `selected` when it is the open page,
+ * and evt. a badge on the icon. */
+export function NavigationBarItem({
+  href,
+  icon,
+  label,
+  selected,
+  badge,
+  ...rest
+}: { href: string; icon: string; label: ReactNode; selected?: boolean; badge?: true | number } & Record<string, unknown>) {
+  return (
+    <Link href={href} className={navigationBarItemClass} aria-current={selected ? 'page' : undefined} {...rest}>
+      <span className="navigation-bar-indicator">
+        <span className="navigation-bar-icon">
+          <Svg name={icon} size={24} />
+          {badge !== undefined && <Badge count={badge === true ? undefined : badge} className="navigation-bar-badge" />}
+        </span>
+        <span className="navigation-bar-label">{label}</span>
+      </span>
+    </Link>
+  );
+}

package/theme/ui/NavigationDrawer.tsx

@@ -1,80 +1,80 @@
-// 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
-// (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';
-import { Link } from '@morphemecms/cms/src/standard/view';
-
-/** 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. */
-export const navigationDrawerDialogClass = 'navigation-drawer-dialog';
-
-export function NavigationDrawer({ className, children, ...rest }: { className?: string; children: ReactNode } & Record<string, unknown>) {
-  return (
-    <div className={[navigationDrawerClass, className].filter(Boolean).join(' ')} {...rest}>
-      {children}
-    </div>
-  );
-}
-
-/** A page in the drawer, `active` when it is the open page or holds it; without `href` a button. */
-export function NavigationDrawerItem({
-  href,
-  active,
-  children,
-  ...rest
-}: { href?: string; active?: boolean; children: ReactNode } & Record<string, unknown>) {
-  return href === undefined ? (
-    <button type="button" className="navigation-drawer-item" data-active={active || undefined} {...rest}>
-      {children}
-    </button>
-  ) : (
-    <Link href={href} className="navigation-drawer-item" data-active={active || undefined} {...rest}>
-      {children}
-    </Link>
-  );
-}
-
-/** An item and what stands after it (the toggle of its sub-pages). */
-export function NavigationDrawerRow({
-  className,
-  children,
-  ...rest
-}: { className?: string; children: ReactNode } & Record<string, unknown>) {
-  return (
-    <div className={['navigation-drawer-row', className].filter(Boolean).join(' ')} {...rest}>
-      {children}
-    </div>
-  );
-}
-
-/** The button that unfolds an item's sub-pages: a caret, turned while they are open (`expanded`). */
-export function NavigationDrawerToggle({ label, expanded, ...rest }: { label: string; expanded: boolean } & Record<string, unknown>) {
-  return (
-    <button type="button" className="navigation-drawer-toggle" aria-expanded={expanded} aria-label={label} {...rest}>
-      <Svg name="caret-down" size={20} />
-    </button>
-  );
-}
-
-/** A sub-page, `active` when it is the open page. */
-export function NavigationDrawerSubitem({
-  href,
-  active,
-  children,
-  ...rest
-}: { href: string; active?: boolean; children: ReactNode } & Record<string, unknown>) {
-  return (
-    <Link href={href} className="navigation-drawer-subitem" data-active={active || undefined} {...rest}>
-      {children}
-    </Link>
-  );
-}
+// 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
+// (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';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+/** 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. */
+export const navigationDrawerDialogClass = 'navigation-drawer-dialog';
+
+export function NavigationDrawer({ className, children, ...rest }: { className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <div className={[navigationDrawerClass, className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/** A page in the drawer, `active` when it is the open page or holds it; without `href` a button. */
+export function NavigationDrawerItem({
+  href,
+  active,
+  children,
+  ...rest
+}: { href?: string; active?: boolean; children: ReactNode } & Record<string, unknown>) {
+  return href === undefined ? (
+    <button type="button" className="navigation-drawer-item" data-active={active || undefined} {...rest}>
+      {children}
+    </button>
+  ) : (
+    <Link href={href} className="navigation-drawer-item" data-active={active || undefined} {...rest}>
+      {children}
+    </Link>
+  );
+}
+
+/** An item and what stands after it (the toggle of its sub-pages). */
+export function NavigationDrawerRow({
+  className,
+  children,
+  ...rest
+}: { className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <div className={['navigation-drawer-row', className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/** The button that unfolds an item's sub-pages: a caret, turned while they are open (`expanded`). */
+export function NavigationDrawerToggle({ label, expanded, ...rest }: { label: string; expanded: boolean } & Record<string, unknown>) {
+  return (
+    <button type="button" className="navigation-drawer-toggle" aria-expanded={expanded} aria-label={label} {...rest}>
+      <Svg name="caret-down" size={20} />
+    </button>
+  );
+}
+
+/** A sub-page, `active` when it is the open page. */
+export function NavigationDrawerSubitem({
+  href,
+  active,
+  children,
+  ...rest
+}: { href: string; active?: boolean; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <Link href={href} className="navigation-drawer-subitem" data-active={active || undefined} {...rest}>
+      {children}
+    </Link>
+  );
+}

package/theme/ui/NavigationRail.tsx

@@ -1,154 +1,154 @@
-// A navigation rail (m3.material.io/components/navigation-rail, M3 Expressive; .navigation-rail in ../styles/ui.css):
-// the main destinations down the side of a larger screen (NavigationRail, a <nav> with its name, `label`), collapsed
-// (each destination's icon over its label) or expanded (`expanded`: the icon and the label side by side), with its menu
-// button at the top (`menuLabel`, which expands and collapses it: on the site navigationRail.script.ts) and evt. the
-// screen's main action under it (`fab`: an extended FAB, ExtendedFab, with only its icon while the rail is collapsed).
-// Material's two configurations of the expanded rail: its modality (`modality`: `standard`, the default, beside the
-// content, which makes room for it, or `modal`, over the page with a scrim behind it, which closes it, as Escape does)
-// and its behaviour (`expandedBehavior`: `collapse`, the default, back into the collapsed rail, or `hide`, nothing while
-// it is collapsed; then a button elsewhere opens it: an icon button with data-navigation-rail-menu and aria-controls,
-// the rail's id). Each destination (NavigationRailItem) has its icon, its label, `selected` (aria-current) when it is
-// the open page, and evt. a badge on the icon (`badge`: true for a dot, else the number it shows; the theme's Badge) and,
-// while the rail is expanded, a text at its end (`trailingSupporting`: how many there are). The destinations can stand in
-// sections (NavigationRailSection, M3 Expressive's), each with its name over it while the rail is expanded and a line
-// between them while it is collapsed. Evt. something under the menu button while the rail is expanded (`header`: the
-// 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).
-// 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.
-import type { ReactNode } from 'react';
-import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
-import { Link } from '@morphemecms/cms/src/standard/view';
-import { ExtendedFab } from '@theme/ui/Fab';
-import { iconButtonClass } from '@theme/ui/IconButton';
-import Badge from '@theme/ui/Badge';
-
-export type NavigationRailModality = 'standard' | 'modal';
-export type NavigationRailExpandedBehavior = 'collapse' | 'hide';
-
-/** The rail's class, and a destination's. */
-export const navigationRailClass = 'navigation-rail';
-export const navigationRailItemClass = 'navigation-rail-item';
-
-/** The rail's classes with its expanded modality and behaviour. */
-export const navigationRailClasses = (
-  modality: NavigationRailModality = 'standard',
-  expandedBehavior: NavigationRailExpandedBehavior = 'collapse',
-) =>
-  [navigationRailClass, modality === 'modal' && 'navigation-rail-modal', expandedBehavior === 'hide' && 'navigation-rail-hide']
-    .filter(Boolean)
-    .join(' ');
-
-/** The scrim's class, behind a modal rail while it is expanded. */
-export const navigationRailScrimClass = 'navigation-rail-scrim';
-
-export default function NavigationRail({
-  label,
-  menuLabel,
-  expanded,
-  modality = 'standard',
-  expandedBehavior = 'collapse',
-  fab,
-  header,
-  scrim = true,
-  onExpandedChange,
-  className,
-  children,
-  ...rest
-}: {
-  label: string;
-  menuLabel: string;
-  expanded?: boolean;
-  modality?: NavigationRailModality;
-  expandedBehavior?: NavigationRailExpandedBehavior;
-  fab?: { icon: string; label: string; href?: string } & Record<string, unknown>;
-  header?: ReactNode;
-  scrim?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-  className?: string;
-  children: ReactNode;
-} & Record<string, unknown>) {
-  const rail = (
-    <nav
-      aria-label={label}
-      className={[navigationRailClasses(modality, expandedBehavior), className].filter(Boolean).join(' ')}
-      data-navigation-rail=""
-      data-expanded={expanded || undefined}
-      {...rest}
-    >
-      <div className="navigation-rail-header">
-        <button
-          type="button"
-          className={`${iconButtonClass('standard')} navigation-rail-menu`}
-          aria-label={menuLabel}
-          aria-expanded={!!expanded}
-          data-navigation-rail-menu={onExpandedChange ? undefined : ''}
-          onClick={onExpandedChange && (() => onExpandedChange(!expanded))}
-        >
-          <Svg name="list" size={24} />
-          <Svg name="caret-left" size={24} />
-        </button>
-        {fab && <ExtendedFab {...fab} collapsed={!expanded} />}
-        {header != null && <div className="navigation-rail-header-content">{header}</div>}
-      </div>
-      <div className="navigation-rail-items">{children}</div>
-    </nav>
-  );
-  // A modal one's scrim just before it, over the page and under the rail (navigationRail.script.ts shows it).
-  return modality === 'modal' && scrim ? (
-    <>
-      <div className={navigationRailScrimClass} data-navigation-rail-scrim="" hidden={!expanded} />
-      {rail}
-    </>
-  ) : (
-    rail
-  );
-}
-
-/** Destinations under each other in a section, with its name (`label`) over them while the rail is expanded. */
-export function NavigationRailSection({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <div className="navigation-rail-section" role="group" aria-label={label}>
-      <span className="navigation-rail-section-label" aria-hidden="true">
-        {label}
-      </span>
-      {children}
-    </div>
-  );
-}
-
-/** A destination: 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,
-  icon,
-  label,
-  selected,
-  badge,
-  trailingSupporting,
-  ...rest
-}: {
-  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>
-        )}
-      </span>
-    </Link>
-  );
-}
+// A navigation rail (m3.material.io/components/navigation-rail, M3 Expressive; .navigation-rail in ../styles/ui.css):
+// the main destinations down the side of a larger screen (NavigationRail, a <nav> with its name, `label`), collapsed
+// (each destination's icon over its label) or expanded (`expanded`: the icon and the label side by side), with its menu
+// button at the top (`menuLabel`, which expands and collapses it: on the site navigationRail.script.ts) and evt. the
+// screen's main action under it (`fab`: an extended FAB, ExtendedFab, with only its icon while the rail is collapsed).
+// Material's two configurations of the expanded rail: its modality (`modality`: `standard`, the default, beside the
+// content, which makes room for it, or `modal`, over the page with a scrim behind it, which closes it, as Escape does)
+// and its behaviour (`expandedBehavior`: `collapse`, the default, back into the collapsed rail, or `hide`, nothing while
+// it is collapsed; then a button elsewhere opens it: an icon button with data-navigation-rail-menu and aria-controls,
+// the rail's id). Each destination (NavigationRailItem) has its icon, its label, `selected` (aria-current) when it is
+// the open page, and evt. a badge on the icon (`badge`: true for a dot, else the number it shows; the theme's Badge) and,
+// while the rail is expanded, a text at its end (`trailingSupporting`: how many there are). The destinations can stand in
+// sections (NavigationRailSection, M3 Expressive's), each with its name over it while the rail is expanded and a line
+// between them while it is collapsed. Evt. something under the menu button while the rail is expanded (`header`: the
+// 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).
+// 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.
+import type { ReactNode } from 'react';
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import { ExtendedFab } from '@theme/ui/Fab';
+import { iconButtonClass } from '@theme/ui/IconButton';
+import Badge from '@theme/ui/Badge';
+
+export type NavigationRailModality = 'standard' | 'modal';
+export type NavigationRailExpandedBehavior = 'collapse' | 'hide';
+
+/** The rail's class, and a destination's. */
+export const navigationRailClass = 'navigation-rail';
+export const navigationRailItemClass = 'navigation-rail-item';
+
+/** The rail's classes with its expanded modality and behaviour. */
+export const navigationRailClasses = (
+  modality: NavigationRailModality = 'standard',
+  expandedBehavior: NavigationRailExpandedBehavior = 'collapse',
+) =>
+  [navigationRailClass, modality === 'modal' && 'navigation-rail-modal', expandedBehavior === 'hide' && 'navigation-rail-hide']
+    .filter(Boolean)
+    .join(' ');
+
+/** The scrim's class, behind a modal rail while it is expanded. */
+export const navigationRailScrimClass = 'navigation-rail-scrim';
+
+export default function NavigationRail({
+  label,
+  menuLabel,
+  expanded,
+  modality = 'standard',
+  expandedBehavior = 'collapse',
+  fab,
+  header,
+  scrim = true,
+  onExpandedChange,
+  className,
+  children,
+  ...rest
+}: {
+  label: string;
+  menuLabel: string;
+  expanded?: boolean;
+  modality?: NavigationRailModality;
+  expandedBehavior?: NavigationRailExpandedBehavior;
+  fab?: { icon: string; label: string; href?: string } & Record<string, unknown>;
+  header?: ReactNode;
+  scrim?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const rail = (
+    <nav
+      aria-label={label}
+      className={[navigationRailClasses(modality, expandedBehavior), className].filter(Boolean).join(' ')}
+      data-navigation-rail=""
+      data-expanded={expanded || undefined}
+      {...rest}
+    >
+      <div className="navigation-rail-header">
+        <button
+          type="button"
+          className={`${iconButtonClass('standard')} navigation-rail-menu`}
+          aria-label={menuLabel}
+          aria-expanded={!!expanded}
+          data-navigation-rail-menu={onExpandedChange ? undefined : ''}
+          onClick={onExpandedChange && (() => onExpandedChange(!expanded))}
+        >
+          <Svg name="list" size={24} />
+          <Svg name="caret-left" size={24} />
+        </button>
+        {fab && <ExtendedFab {...fab} collapsed={!expanded} />}
+        {header != null && <div className="navigation-rail-header-content">{header}</div>}
+      </div>
+      <div className="navigation-rail-items">{children}</div>
+    </nav>
+  );
+  // A modal one's scrim just before it, over the page and under the rail (navigationRail.script.ts shows it).
+  return modality === 'modal' && scrim ? (
+    <>
+      <div className={navigationRailScrimClass} data-navigation-rail-scrim="" hidden={!expanded} />
+      {rail}
+    </>
+  ) : (
+    rail
+  );
+}
+
+/** Destinations under each other in a section, with its name (`label`) over them while the rail is expanded. */
+export function NavigationRailSection({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="navigation-rail-section" role="group" aria-label={label}>
+      <span className="navigation-rail-section-label" aria-hidden="true">
+        {label}
+      </span>
+      {children}
+    </div>
+  );
+}
+
+/** A destination: 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,
+  icon,
+  label,
+  selected,
+  badge,
+  trailingSupporting,
+  ...rest
+}: {
+  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>
+        )}
+      </span>
+    </Link>
+  );
+}