@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Dialog.tsx

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

package/theme/ui/Divider.tsx

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

package/theme/ui/ExposedDropdownMenu.tsx

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

package/theme/ui/Fab.tsx

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