@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Badge.tsx

@@ -1,45 +1,45 @@
-// A badge (m3.material.io/components/badges, .badge in ../styles/ui.css): a small dot (without `count`: something new)
-// or a number (`count`, more than `max` shown as "999+"), on what it is about (`children`: an icon or an icon button,
-// at its top end corner, .badge-anchor) or by itself after a label (a navigation drawer's item). The badge is only seen:
-// what it says is read by screen readers from `label` (e.g. "3 nye beskeder"), or, on an icon button, from the button's
-// own name, which should say it. How it looks is the theme's (--badge-*). An Astro component gives an element the same
-// classes with badgeClass.
-import type { ReactNode } from 'react';
-
-/** A badge's classes: the small dot, or the large one with a number. */
-export const badgeClass = (large: boolean) => `badge ${large ? 'badge-large' : 'badge-small'}`;
-
-export default function Badge({
-  count,
-  max = 999,
-  label,
-  className,
-  children,
-  ...rest
-}: {
-  count?: number;
-  max?: number;
-  label?: string;
-  className?: string;
-  children?: ReactNode;
-} & Record<string, unknown>) {
-  const large = count !== undefined;
-  const badge = (
-    <span className={[badgeClass(large), className].filter(Boolean).join(' ')} aria-hidden="true" {...rest}>
-      {large && (count > max ? `${max}+` : count)}
-    </span>
-  );
-  const read = label && <span className="badge-label">{label}</span>;
-  return children === undefined ? (
-    <>
-      {badge}
-      {read}
-    </>
-  ) : (
-    <span className="badge-anchor">
-      {children}
-      {badge}
-      {read}
-    </span>
-  );
-}
+// A badge (m3.material.io/components/badges, .badge in ../styles/ui.css): a small dot (without `count`: something new)
+// or a number (`count`, more than `max` shown as "999+"), on what it is about (`children`: an icon or an icon button,
+// at its top end corner, .badge-anchor) or by itself after a label (a navigation drawer's item). The badge is only seen:
+// what it says is read by screen readers from `label` (e.g. "3 nye beskeder"), or, on an icon button, from the button's
+// own name, which should say it. How it looks is the theme's (--badge-*). An Astro component gives an element the same
+// classes with badgeClass.
+import type { ReactNode } from 'react';
+
+/** A badge's classes: the small dot, or the large one with a number. */
+export const badgeClass = (large: boolean) => `badge ${large ? 'badge-large' : 'badge-small'}`;
+
+export default function Badge({
+  count,
+  max = 999,
+  label,
+  className,
+  children,
+  ...rest
+}: {
+  count?: number;
+  max?: number;
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+} & Record<string, unknown>) {
+  const large = count !== undefined;
+  const badge = (
+    <span className={[badgeClass(large), className].filter(Boolean).join(' ')} aria-hidden="true" {...rest}>
+      {large && (count > max ? `${max}+` : count)}
+    </span>
+  );
+  const read = label && <span className="badge-label">{label}</span>;
+  return children === undefined ? (
+    <>
+      {badge}
+      {read}
+    </>
+  ) : (
+    <span className="badge-anchor">
+      {children}
+      {badge}
+      {read}
+    </span>
+  );
+}

package/theme/ui/BottomSheet.tsx

@@ -1,148 +1,148 @@
-// A bottom sheet (m3.material.io/components/bottom-sheets, .bottom-sheet in ../styles/ui.css): its container, with the
-// drag handle, the header (the headline, `headline` with its id `headlineId`, the supporting text under it and evt. the
-// close button, `closeLabel`), what it shows (`children`, filling the rest; what stands in place of a frame while it
-// loads has bottomSheetCoverClass) and evt. a footer (`footer`). Its kind (`kind`) is Material's:
-// - 'modal' (the default): over the page and its scrim, in a <dialog> with bottomSheetClass (an app's: Calendly's
-//   Sheet.astro), which bottomSheet() in bottomSheet.ts opens, closes and lets be dragged down; in the editor only
-//   drawn, as high as `height` says.
-// - 'standard': at the bottom of the screen with the page usable behind it, without a scrim, a <section> named by its
-//   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
-//   lets it be dragged (standardBottomSheet() in bottomSheet.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).
-// 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 { useOnSite } from '@morphemecms/cms/src/standard/view';
-import IconButton from '@theme/ui/IconButton';
-import { standardBottomSheet } from '@theme/ui/bottomSheet';
-
-/** 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';
-
-/** 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. */
-export const bottomSheetClass = 'bottom-sheet';
-export const bottomSheetCoverClass = 'bottom-sheet-cover';
-export const bottomSheetContainerClass = (kind: BottomSheetKind = 'modal') =>
-  kind === 'standard' ? 'bottom-sheet-container bottom-sheet-standard' : 'bottom-sheet-container';
-/** The classes of the <dialog> of a modal sheet as high as what is in it (at most most of the screen), and of one as high
- * as the screen and on a computer wider than a sheet (a whole page in it: the editor's preview). */
-export const bottomSheetFitClass = 'bottom-sheet bottom-sheet-fit';
-export const bottomSheetFullClass = 'bottom-sheet bottom-sheet-full';
-
-/** 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. */
-export function BottomSheetHeader({
-  headline,
-  headlineId,
-  supportingText,
-  closeLabel,
-  handleLabel,
-  expanded,
-  standard,
-  onHandle,
-  onClose,
-}: {
-  headline: ReactNode;
-  headlineId?: string;
-  supportingText?: ReactNode;
-  closeLabel?: string;
-  handleLabel?: string;
-  expanded?: boolean;
-  standard?: boolean;
-  onHandle?: () => void;
-  onClose?: () => void;
-}) {
-  return (
-    <>
-      {handleLabel !== undefined ? (
-        <button
-          type="button"
-          className="bottom-sheet-drag-handle"
-          aria-label={handleLabel}
-          aria-expanded={standard ? expanded : undefined}
-          data-bottom-sheet-handle=""
-          onClick={onHandle}
-        ></button>
-      ) : (
-        <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>}
-        </div>
-        {closeLabel && <IconButton icon="x" label={closeLabel} data-bottom-sheet-close="" onClick={onClose} />}
-      </div>
-    </>
-  );
-}
-
-export default function BottomSheet({
-  kind = 'modal',
-  state = 'collapsed',
-  headline,
-  headlineId,
-  supportingText,
-  closeLabel,
-  dragHandleLabel,
-  footer,
-  height,
-  className,
-  children,
-}: {
-  kind?: BottomSheetKind;
-  state?: BottomSheetState;
-  headline: ReactNode;
-  headlineId?: string;
-  supportingText?: ReactNode;
-  closeLabel?: string;
-  dragHandleLabel?: string;
-  footer?: ReactNode;
-  height?: string;
-  className?: string;
-  children: ReactNode;
-}) {
-  const standard = kind === 'standard';
-  const onSite = useOnSite();
-  const sheet = useRef<HTMLDivElement>(null);
-  // In the editor a standard one is dragged here, as bottomSheet.script.ts lets it be on the site.
-  useEffect(() => {
-    if (standard && !onSite && sheet.current) standardBottomSheet(sheet.current);
-  }, [standard, onSite]);
-  const Container = standard ? 'section' : 'div';
-  return (
-    <Container
-      ref={sheet}
-      className={[bottomSheetContainerClass(kind), className].filter(Boolean).join(' ')}
-      aria-labelledby={standard ? headlineId : undefined}
-      data-bottom-sheet-container=""
-      data-bottom-sheet-standard={standard ? '' : undefined}
-      data-state={standard ? state : undefined}
-      style={height ? { height } : undefined}
-    >
-      <BottomSheetHeader
-        headline={headline}
-        headlineId={headlineId}
-        supportingText={supportingText}
-        closeLabel={closeLabel}
-        handleLabel={standard ? (dragHandleLabel ?? '') : undefined}
-        expanded={state === 'half-expanded' || state === 'expanded'}
-        standard={standard}
-      />
-      <div className="bottom-sheet-content">{children}</div>
-      {footer && <p className="bottom-sheet-footer">{footer}</p>}
-    </Container>
-  );
-}
+// A bottom sheet (m3.material.io/components/bottom-sheets, .bottom-sheet in ../styles/ui.css): its container, with the
+// drag handle, the header (the headline, `headline` with its id `headlineId`, the supporting text under it and evt. the
+// close button, `closeLabel`), what it shows (`children`, filling the rest; what stands in place of a frame while it
+// loads has bottomSheetCoverClass) and evt. a footer (`footer`). Its kind (`kind`) is Material's:
+// - 'modal' (the default): over the page and its scrim, in a <dialog> with bottomSheetClass (an app's: Calendly's
+//   Sheet.astro), which bottomSheet() in bottomSheetControl.ts opens, closes and lets be dragged down; in the editor only
+//   drawn, as high as `height` says.
+// - 'standard': at the bottom of the screen with the page usable behind it, without a scrim, a <section> named by its
+//   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
+//   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).
+// 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 { useOnSite } from '@morphemecms/cms/src/standard/view';
+import IconButton from '@theme/ui/IconButton';
+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';
+
+/** 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. */
+export const bottomSheetClass = 'bottom-sheet';
+export const bottomSheetCoverClass = 'bottom-sheet-cover';
+export const bottomSheetContainerClass = (kind: BottomSheetKind = 'modal') =>
+  kind === 'standard' ? 'bottom-sheet-container bottom-sheet-standard' : 'bottom-sheet-container';
+/** The classes of the <dialog> of a modal sheet as high as what is in it (at most most of the screen), and of one as high
+ * as the screen and on a computer wider than a sheet (a whole page in it: the editor's preview). */
+export const bottomSheetFitClass = 'bottom-sheet bottom-sheet-fit';
+export const bottomSheetFullClass = 'bottom-sheet bottom-sheet-full';
+
+/** 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. */
+export function BottomSheetHeader({
+  headline,
+  headlineId,
+  supportingText,
+  closeLabel,
+  handleLabel,
+  expanded,
+  standard,
+  onHandle,
+  onClose,
+}: {
+  headline: ReactNode;
+  headlineId?: string;
+  supportingText?: ReactNode;
+  closeLabel?: string;
+  handleLabel?: string;
+  expanded?: boolean;
+  standard?: boolean;
+  onHandle?: () => void;
+  onClose?: () => void;
+}) {
+  return (
+    <>
+      {handleLabel !== undefined ? (
+        <button
+          type="button"
+          className="bottom-sheet-drag-handle"
+          aria-label={handleLabel}
+          aria-expanded={standard ? expanded : undefined}
+          data-bottom-sheet-handle=""
+          onClick={onHandle}
+        ></button>
+      ) : (
+        <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>}
+        </div>
+        {closeLabel && <IconButton icon="x" label={closeLabel} data-bottom-sheet-close="" onClick={onClose} />}
+      </div>
+    </>
+  );
+}
+
+export default function BottomSheet({
+  kind = 'modal',
+  state = 'collapsed',
+  headline,
+  headlineId,
+  supportingText,
+  closeLabel,
+  dragHandleLabel,
+  footer,
+  height,
+  className,
+  children,
+}: {
+  kind?: BottomSheetKind;
+  state?: BottomSheetState;
+  headline: ReactNode;
+  headlineId?: string;
+  supportingText?: ReactNode;
+  closeLabel?: string;
+  dragHandleLabel?: string;
+  footer?: ReactNode;
+  height?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  const standard = kind === 'standard';
+  const onSite = useOnSite();
+  const sheet = useRef<HTMLDivElement>(null);
+  // In the editor a standard one is dragged here, as bottomSheet.script.ts lets it be on the site.
+  useEffect(() => {
+    if (standard && !onSite && sheet.current) standardBottomSheet(sheet.current);
+  }, [standard, onSite]);
+  const Container = standard ? 'section' : 'div';
+  return (
+    <Container
+      ref={sheet}
+      className={[bottomSheetContainerClass(kind), className].filter(Boolean).join(' ')}
+      aria-labelledby={standard ? headlineId : undefined}
+      data-bottom-sheet-container=""
+      data-bottom-sheet-standard={standard ? '' : undefined}
+      data-state={standard ? state : undefined}
+      style={height ? { height } : undefined}
+    >
+      <BottomSheetHeader
+        headline={headline}
+        headlineId={headlineId}
+        supportingText={supportingText}
+        closeLabel={closeLabel}
+        handleLabel={standard ? (dragHandleLabel ?? '') : undefined}
+        expanded={state === 'half-expanded' || state === 'expanded'}
+        standard={standard}
+      />
+      <div className="bottom-sheet-content">{children}</div>
+      {footer && <p className="bottom-sheet-footer">{footer}</p>}
+    </Container>
+  );
+}

package/theme/ui/Button.tsx

@@ -1,79 +1,79 @@
-// A button (m3.material.io/components/buttons, .button in ../styles/ui.css): a label, an icon before it (`icon`) and
-// evt. one after it (`trailingIcon`, the arrow; each its name, or in the editor an icon already made; its class button-trailing-icon, so a theme can hide or move it). Its
-// kind (`kind`: filled, the default, tonal, elevated, outlined or text), its size (`size`: xsmall, small, medium, the
-// default, large or xlarge) 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 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). A text button is never a toggle
-// (Material). What turns it on and off is the script of the block that shows it. Its icon is then drawn filled while it
-// is on, where the site draws the icon filled. With `href` it is a link (Link: on the site; in the editor only drawn;
-// never a toggle), else a <button> (`type`, button by default). Other attributes (data-…, aria-…, disabled) go on it, and `className`
-// after its own classes (its width). An Astro component without React gives an element the same classes with
-// buttonClass, and a toggle aria-pressed itself.
-import type { ReactNode } from 'react';
-import { Glyph, Svg, iconFile, type IconRef } from '@morphemecms/cms/src/icon';
-import { Link, type ButtonKind } from '@morphemecms/cms/src/standard/view';
-
-export const buttonSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
-export type ButtonSize = (typeof buttonSizes)[number];
-export const buttonShapes = ['round', 'square'] as const;
-export type ButtonShape = (typeof buttonShapes)[number];
-
-/** A button's classes: its kind's and, unless it is medium, its size's and, unless it is round, its shape's. */
-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 }) {
-  if (!iconFile(name, 'fill')) return <Svg name={name} size={size} />;
-  return (
-    <>
-      <Svg name={name} size={size} className={`${part}-unselected-icon`} />
-      <Svg name={name} weight="fill" size={size} className={`${part}-selected-icon`} />
-    </>
-  );
-}
-
-export default function Button({
-  kind,
-  size,
-  shape,
-  selected,
-  icon,
-  trailingIcon,
-  href,
-  type = 'button',
-  className,
-  children,
-  ...rest
-}: {
-  kind?: ButtonKind;
-  size?: ButtonSize;
-  shape?: ButtonShape;
-  selected?: boolean;
-  icon?: IconRef;
-  trailingIcon?: IconRef;
-  href?: string;
-  type?: 'button' | 'submit';
-  className?: string;
-  children: ReactNode;
-} & Record<string, unknown>) {
-  const classes = [buttonClass(kind, size, shape), className].filter(Boolean).join(' ');
-  const toggle = selected !== undefined && href === undefined;
-  const content = (
-    <>
-      {icon && (toggle && typeof icon === 'string' ? <ToggleIcon part="button" name={icon} size={20} /> : <Glyph icon={icon} size={20} />)}
-      {children}
-      {trailingIcon && <Glyph icon={trailingIcon} size={18} className="button-trailing-icon" />}
-    </>
-  );
-  return href === undefined ? (
-    <button type={type} className={classes} aria-pressed={toggle ? selected : undefined} {...rest}>
-      {content}
-    </button>
-  ) : (
-    <Link href={href} className={classes} {...rest}>
-      {content}
-    </Link>
-  );
-}
+// A button (m3.material.io/components/buttons, .button in ../styles/ui.css): a label, an icon before it (`icon`) and
+// evt. one after it (`trailingIcon`, the arrow; each its name, or in the editor an icon already made; its class button-trailing-icon, so a theme can hide or move it). Its
+// kind (`kind`: filled, the default, tonal, elevated, outlined or text), its size (`size`: xsmall, small, medium, the
+// default, large or xlarge) 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 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). A text button is never a toggle
+// (Material). What turns it on and off is the script of the block that shows it. Its icon is then drawn filled while it
+// is on, where the site draws the icon filled. With `href` it is a link (Link: on the site; in the editor only drawn;
+// never a toggle), else a <button> (`type`, button by default). Other attributes (data-…, aria-…, disabled) go on it, and `className`
+// after its own classes (its width). An Astro component without React gives an element the same classes with
+// buttonClass, and a toggle aria-pressed itself.
+import type { ReactNode } from 'react';
+import { Glyph, Svg, iconFile, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link, type ButtonKind } from '@morphemecms/cms/src/standard/view';
+
+export const buttonSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
+export type ButtonSize = (typeof buttonSizes)[number];
+export const buttonShapes = ['round', 'square'] as const;
+export type ButtonShape = (typeof buttonShapes)[number];
+
+/** A button's classes: its kind's and, unless it is medium, its size's and, unless it is round, its shape's. */
+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 }) {
+  if (!iconFile(name, 'fill')) return <Svg name={name} size={size} />;
+  return (
+    <>
+      <Svg name={name} size={size} className={`${part}-unselected-icon`} />
+      <Svg name={name} weight="fill" size={size} className={`${part}-selected-icon`} />
+    </>
+  );
+}
+
+export default function Button({
+  kind,
+  size,
+  shape,
+  selected,
+  icon,
+  trailingIcon,
+  href,
+  type = 'button',
+  className,
+  children,
+  ...rest
+}: {
+  kind?: ButtonKind;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  selected?: boolean;
+  icon?: IconRef;
+  trailingIcon?: IconRef;
+  href?: string;
+  type?: 'button' | 'submit';
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const classes = [buttonClass(kind, size, shape), className].filter(Boolean).join(' ');
+  const toggle = selected !== undefined && href === undefined;
+  const content = (
+    <>
+      {icon && (toggle && typeof icon === 'string' ? <ToggleIcon part="button" name={icon} size={20} /> : <Glyph icon={icon} size={20} />)}
+      {children}
+      {trailingIcon && <Glyph icon={trailingIcon} size={18} className="button-trailing-icon" />}
+    </>
+  );
+  return href === undefined ? (
+    <button type={type} className={classes} aria-pressed={toggle ? selected : undefined} {...rest}>
+      {content}
+    </button>
+  ) : (
+    <Link href={href} className={classes} {...rest}>
+      {content}
+    </Link>
+  );
+}

package/theme/ui/ButtonGroup.tsx

@@ -1,31 +1,31 @@
-// A button group (m3.material.io/components/button-groups, .button-group in ../styles/ui.css): buttons or icon buttons
-// that belong together side by side (`children`: the theme's Button and IconButton), in a group with its name (`label`,
-// read by screen readers). Its kind (`kind`) is Material's name; how it looks is the theme's: standard (the default,
-// with a gap between them; the one pressed a little wider and its neighbours a little narrower) or connected (joined,
-// the corners between them small, larger with the size, the outer ones the buttons'). The buttons in it have one size
-// and one shape (`size`, `shape` on each: Button's and IconButton's), and the group follows them. A toggle button in it
-// is a Button or an IconButton with `selected` (aria-pressed): the theme gives it its look on and off (the Button's and
-// the IconButton's), in a standard group with the group's corners while it is on, in a connected one fully round. What
-// turns it on and off is the script of the block that shows it. Other attributes (data-…) go on the group, and `className` after its own classes. An Astro component gives
-// an element the same classes with buttonGroupClass.
-import type { ReactNode } from 'react';
-
-export const buttonGroupKinds = ['standard', 'connected'] as const;
-export type ButtonGroupKind = (typeof buttonGroupKinds)[number];
-
-/** A button group's classes: its kind's. */
-export const buttonGroupClass = (kind: ButtonGroupKind = 'standard') => `button-group button-group-${kind}`;
-
-export default function ButtonGroup({
-  kind,
-  label,
-  className,
-  children,
-  ...rest
-}: { kind?: ButtonGroupKind; label: string; className?: string; children: ReactNode } & Record<string, unknown>) {
-  return (
-    <div role="group" aria-label={label} className={[buttonGroupClass(kind), className].filter(Boolean).join(' ')} {...rest}>
-      {children}
-    </div>
-  );
-}
+// A button group (m3.material.io/components/button-groups, .button-group in ../styles/ui.css): buttons or icon buttons
+// that belong together side by side (`children`: the theme's Button and IconButton), in a group with its name (`label`,
+// read by screen readers). Its kind (`kind`) is Material's name; how it looks is the theme's: standard (the default,
+// with a gap between them; the one pressed a little wider and its neighbours a little narrower) or connected (joined,
+// the corners between them small, larger with the size, the outer ones the buttons'). The buttons in it have one size
+// and one shape (`size`, `shape` on each: Button's and IconButton's), and the group follows them. A toggle button in it
+// is a Button or an IconButton with `selected` (aria-pressed): the theme gives it its look on and off (the Button's and
+// the IconButton's), in a standard group with the group's corners while it is on, in a connected one fully round. What
+// turns it on and off is the script of the block that shows it. Other attributes (data-…) go on the group, and `className` after its own classes. An Astro component gives
+// an element the same classes with buttonGroupClass.
+import type { ReactNode } from 'react';
+
+export const buttonGroupKinds = ['standard', 'connected'] as const;
+export type ButtonGroupKind = (typeof buttonGroupKinds)[number];
+
+/** A button group's classes: its kind's. */
+export const buttonGroupClass = (kind: ButtonGroupKind = 'standard') => `button-group button-group-${kind}`;
+
+export default function ButtonGroup({
+  kind,
+  label,
+  className,
+  children,
+  ...rest
+}: { kind?: ButtonGroupKind; label: string; className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <div role="group" aria-label={label} className={[buttonGroupClass(kind), className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+}