@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Slider.tsx

@@ -1,155 +1,155 @@
-// A slider (m3.material.io/components/sliders, .slider in ../styles/ui.css): a value chosen between `min` and `max`
-// (`value`; the standard slider, its active track from the start), in steps of `step` with a stop at each (`stops`),
-// from the middle (`centered`: the active track from the middle to the handle, for a value below and above a middle
-// one), or a range (`range`, its start and end, with two handles that cannot pass each other; `handleLabels` says what
-// each is to a screen reader). Its size (`size`: xsmall, the default, small, medium, large or xlarge, as M3 Expressive
-// names them: how thick the track is) and its direction (`orientation`: horizontal, the default, or vertical, from
-// the bottom up) are Material's names; how they look is the theme's. A standard slider of size medium or larger can
-// have an icon in its track (`icon`, the theme's icon by its name: in the active track at its start, after the
-// handle while there is no room for it there). Its name (`label`) stands over it (`hideLabel`: only screen readers say
-// it), and a label with the value over a handle while it is moved or has the focus (`valueLabel`; 'always': all the
-// time). The handles are native range inputs, so the keyboard moves them (the arrow keys, Home, End, Page Up and Page
-// Down) and screen readers say the value; the active track, the stops and the value labels follow them on the site
-// with slider.script.ts and in the editor here (both with updateSlider in sliderUpdate.ts). `onChange` (the editor): the value is the editor's, and a
-// handle moved gives its new value (and which handle, 0 or 1); else the value is the one it starts with. `disabled`: it
-// cannot be moved; `name` is the input's (a range's: one for each); `className` goes after its own classes. An Astro component
-// gives an element the same classes with sliderClass.
-import type { ChangeEvent, CSSProperties, FormEvent } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-import { sliderPlace, stopState, updateSlider } from './sliderUpdate';
-
-/** A slider's sizes, as M3 Expressive names them. */
-export type SliderSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type SliderOrientation = 'horizontal' | 'vertical';
-
-/** A slider's classes: a range, `slider-range`; centered, `slider-centered`; its size but the default; vertical. */
-export const sliderClass = (range = false, size: SliderSize = 'xsmall', centered = false, orientation: SliderOrientation = 'horizontal') =>
-  [
-    'slider',
-    range && 'slider-range',
-    centered && !range && 'slider-centered',
-    size !== 'xsmall' && `slider-${size}`,
-    orientation === 'vertical' && 'slider-vertical',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-export default function Slider({
-  label,
-  hideLabel,
-  min = 0,
-  max = 100,
-  step = 1,
-  value,
-  range,
-  centered,
-  handleLabels,
-  stops,
-  size = 'xsmall',
-  orientation = 'horizontal',
-  icon,
-  valueLabel,
-  disabled,
-  name,
-  onChange,
-  className,
-}: {
-  label: string;
-  hideLabel?: boolean;
-  min?: number;
-  max?: number;
-  step?: number;
-  value?: number;
-  range?: [number, number];
-  centered?: boolean;
-  handleLabels?: [string, string];
-  stops?: boolean;
-  size?: SliderSize;
-  orientation?: SliderOrientation;
-  icon?: string;
-  valueLabel?: boolean | 'always';
-  disabled?: boolean;
-  name?: string | [string, string];
-  onChange?: (value: number, handle: number) => void;
-  className?: string;
-}) {
-  const middle = centered && !range;
-  const values = range ?? [value ?? (middle ? (min + max) / 2 : min)];
-  const { start, end } = sliderPlace(values, min, max, middle);
-  const count = Math.round((max - min) / step);
-  // A stop at each step, when there are not so many that they run together.
-  const stopValues = stops && count > 0 && count <= 50 ? Array.from({ length: count + 1 }, (_, i) => min + i * step) : [];
-  // The icon only in a standard slider's track, and only where the track is thick enough to hold it.
-  const inset = icon && !range && !middle && ['medium', 'large', 'xlarge'].includes(size) ? icon : undefined;
-  const vertical = orientation === 'vertical';
-  const place = { '--slider-start': start, '--slider-end': end } as CSSProperties;
-  return (
-    <div
-      className={[sliderClass(Boolean(range), size, middle, orientation), className].filter(Boolean).join(' ')}
-      style={place}
-      role={range ? 'group' : undefined}
-      aria-label={range ? label : undefined}
-      data-slider=""
-      data-start-on-top={range && start > 0.5 ? '' : undefined}
-      data-below-center={middle && values[0] < (min + max) / 2 ? '' : undefined}
-      onInput={(e: FormEvent<HTMLDivElement>) => updateSlider(e.currentTarget, e.target)}
-    >
-      {!hideLabel && (
-        <span className="slider-label" aria-hidden="true">
-          {label}
-        </span>
-      )}
-      <div className="slider-control">
-        <span className="slider-track" aria-hidden="true">
-          {(range || middle) && <span className="slider-inactive-track slider-inactive-track-start" />}
-          <span className="slider-active-track">
-            {inset && <Svg name={inset} size={24} className="slider-icon" />}
-            {inset && <Svg name={inset} size={24} className="slider-icon slider-icon-inactive" />}
-          </span>
-          <span className="slider-inactive-track slider-inactive-track-end" />
-          {stopValues.map((v) => {
-            const { active, under } = stopState(v, values, min, max, middle);
-            return (
-              <span
-                key={v}
-                className="slider-stop"
-                style={{ '--slider-stop': (v - min) / (max - min) } as CSSProperties}
-                data-slider-stop={v}
-                data-active={active ? '' : undefined}
-                data-under={under ? '' : undefined}
-              />
-            );
-          })}
-        </span>
-        {values.map((v, i) => [
-          <input
-            key={`input-${i}`}
-            type="range"
-            className="slider-input"
-            min={min}
-            max={max}
-            step={step}
-            {...(onChange
-              ? { value: v, onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(Number(e.target.value), i) }
-              : { defaultValue: v })}
-            disabled={disabled}
-            name={Array.isArray(name) ? name[i] : name}
-            aria-label={range ? (handleLabels?.[i] ?? label) : label}
-            aria-orientation={vertical ? 'vertical' : undefined}
-            data-slider-input=""
-          />,
-          valueLabel && (
-            <output
-              key={`value-${i}`}
-              className={valueLabel === 'always' ? 'slider-value slider-value-always' : 'slider-value'}
-              aria-hidden="true"
-              data-slider-value=""
-            >
-              {v}
-            </output>
-          ),
-        ])}
-      </div>
-    </div>
-  );
-}
+// A slider (m3.material.io/components/sliders, .slider in ../styles/ui.css): a value chosen between `min` and `max`
+// (`value`; the standard slider, its active track from the start), in steps of `step` with a stop at each (`stops`),
+// from the middle (`centered`: the active track from the middle to the handle, for a value below and above a middle
+// one), or a range (`range`, its start and end, with two handles that cannot pass each other; `handleLabels` says what
+// each is to a screen reader). Its size (`size`: xsmall, the default, small, medium, large or xlarge, as M3 Expressive
+// names them: how thick the track is) and its direction (`orientation`: horizontal, the default, or vertical, from
+// the bottom up) are Material's names; how they look is the theme's. A standard slider of size medium or larger can
+// have an icon in its track (`icon`, the theme's icon by its name: in the active track at its start, after the
+// handle while there is no room for it there). Its name (`label`) stands over it (`hideLabel`: only screen readers say
+// it), and a label with the value over a handle while it is moved or has the focus (`valueLabel`; 'always': all the
+// time). The handles are native range inputs, so the keyboard moves them (the arrow keys, Home, End, Page Up and Page
+// Down) and screen readers say the value; the active track, the stops and the value labels follow them on the site
+// with slider.script.ts and in the editor here (both with updateSlider in sliderUpdate.ts). `onChange` (the editor): the value is the editor's, and a
+// handle moved gives its new value (and which handle, 0 or 1); else the value is the one it starts with. `disabled`: it
+// cannot be moved; `name` is the input's (a range's: one for each); `className` goes after its own classes. An Astro component
+// gives an element the same classes with sliderClass.
+import type { ChangeEvent, CSSProperties, FormEvent } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { sliderPlace, stopState, updateSlider } from './sliderUpdate';
+
+/** A slider's sizes, as M3 Expressive names them. */
+export type SliderSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type SliderOrientation = 'horizontal' | 'vertical';
+
+/** A slider's classes: a range, `slider-range`; centered, `slider-centered`; its size but the default; vertical. */
+export const sliderClass = (range = false, size: SliderSize = 'xsmall', centered = false, orientation: SliderOrientation = 'horizontal') =>
+  [
+    'slider',
+    range && 'slider-range',
+    centered && !range && 'slider-centered',
+    size !== 'xsmall' && `slider-${size}`,
+    orientation === 'vertical' && 'slider-vertical',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+export default function Slider({
+  label,
+  hideLabel,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  range,
+  centered,
+  handleLabels,
+  stops,
+  size = 'xsmall',
+  orientation = 'horizontal',
+  icon,
+  valueLabel,
+  disabled,
+  name,
+  onChange,
+  className,
+}: {
+  label: string;
+  hideLabel?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  range?: [number, number];
+  centered?: boolean;
+  handleLabels?: [string, string];
+  stops?: boolean;
+  size?: SliderSize;
+  orientation?: SliderOrientation;
+  icon?: string;
+  valueLabel?: boolean | 'always';
+  disabled?: boolean;
+  name?: string | [string, string];
+  onChange?: (value: number, handle: number) => void;
+  className?: string;
+}) {
+  const middle = centered && !range;
+  const values = range ?? [value ?? (middle ? (min + max) / 2 : min)];
+  const { start, end } = sliderPlace(values, min, max, middle);
+  const count = Math.round((max - min) / step);
+  // A stop at each step, when there are not so many that they run together.
+  const stopValues = stops && count > 0 && count <= 50 ? Array.from({ length: count + 1 }, (_, i) => min + i * step) : [];
+  // The icon only in a standard slider's track, and only where the track is thick enough to hold it.
+  const inset = icon && !range && !middle && ['medium', 'large', 'xlarge'].includes(size) ? icon : undefined;
+  const vertical = orientation === 'vertical';
+  const place = { '--slider-start': start, '--slider-end': end } as CSSProperties;
+  return (
+    <div
+      className={[sliderClass(Boolean(range), size, middle, orientation), className].filter(Boolean).join(' ')}
+      style={place}
+      role={range ? 'group' : undefined}
+      aria-label={range ? label : undefined}
+      data-slider=""
+      data-start-on-top={range && start > 0.5 ? '' : undefined}
+      data-below-center={middle && values[0] < (min + max) / 2 ? '' : undefined}
+      onInput={(e: FormEvent<HTMLDivElement>) => updateSlider(e.currentTarget, e.target)}
+    >
+      {!hideLabel && (
+        <span className="slider-label" aria-hidden="true">
+          {label}
+        </span>
+      )}
+      <div className="slider-control">
+        <span className="slider-track" aria-hidden="true">
+          {(range || middle) && <span className="slider-inactive-track slider-inactive-track-start" />}
+          <span className="slider-active-track">
+            {inset && <Svg name={inset} size={24} className="slider-icon" />}
+            {inset && <Svg name={inset} size={24} className="slider-icon slider-icon-inactive" />}
+          </span>
+          <span className="slider-inactive-track slider-inactive-track-end" />
+          {stopValues.map((v) => {
+            const { active, under } = stopState(v, values, min, max, middle);
+            return (
+              <span
+                key={v}
+                className="slider-stop"
+                style={{ '--slider-stop': (v - min) / (max - min) } as CSSProperties}
+                data-slider-stop={v}
+                data-active={active ? '' : undefined}
+                data-under={under ? '' : undefined}
+              />
+            );
+          })}
+        </span>
+        {values.map((v, i) => [
+          <input
+            key={`input-${i}`}
+            type="range"
+            className="slider-input"
+            min={min}
+            max={max}
+            step={step}
+            {...(onChange
+              ? { value: v, onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(Number(e.target.value), i) }
+              : { defaultValue: v })}
+            disabled={disabled}
+            name={Array.isArray(name) ? name[i] : name}
+            aria-label={range ? (handleLabels?.[i] ?? label) : label}
+            aria-orientation={vertical ? 'vertical' : undefined}
+            data-slider-input=""
+          />,
+          valueLabel && (
+            <output
+              key={`value-${i}`}
+              className={valueLabel === 'always' ? 'slider-value slider-value-always' : 'slider-value'}
+              aria-hidden="true"
+              data-slider-value=""
+            >
+              {v}
+            </output>
+          ),
+        ])}
+      </div>
+    </div>
+  );
+}

package/theme/ui/Snackbar.tsx

@@ -1,67 +1,67 @@
-// A snackbar (m3.material.io/components/snackbar, .snackbar in ../styles/ui.css): a short message at the bottom of the
-// screen, what the site says with one (a new version of a page: layouts/PageLayout.astro). Its supporting text (`text`,
-// on one line or two), evt. links in it, each with an arrow (`links`), evt. an action, a text button (`action`, with
-// its `label` and `href` or other attributes on it), under the text when it is long (`longerAction`), and evt. a
-// button that closes it (`closeLabel`, its name). Read by screen readers as a status (`error`: an alert). On the site
-// it is drawn in a <template data-snackbar> (with `data-ms` for how long it stays), and ui/snackbar.script.ts shows it
-// at the bottom with the editor's snackbar() (@morphemecms/cms/lib/snackbar.ts: where messages stand, how long, and how
-// they are swiped away, the same as the editor's messages); in the editor only drawn. How it looks is the theme's
-// (--snackbar-*). An Astro component gives an element the same classes with snackbarClass.
-import { Fragment } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-import { Link } from '@morphemecms/cms/src/standard/view';
-import Button from '@theme/ui/Button';
-import IconButton from '@theme/ui/IconButton';
-
-export type SnackbarLink = { text: string; href: string };
-export type SnackbarAction = { label: string; href?: string } & Record<string, unknown>;
-
-/** A snackbar's classes: with its action under the text, or beside it. */
-export const snackbarClass = (longerAction?: boolean) => ['snackbar', longerAction && 'snackbar-longer-action'].filter(Boolean).join(' ');
-
-export default function Snackbar({
-  text,
-  links = [],
-  action,
-  longerAction,
-  closeLabel,
-  error,
-  className,
-  ...rest
-}: {
-  text: string;
-  links?: SnackbarLink[];
-  action?: SnackbarAction;
-  longerAction?: boolean;
-  closeLabel?: string;
-  error?: boolean;
-  className?: string;
-} & Record<string, unknown>) {
-  const { label, ...actionRest } = action ?? { label: '' };
-  return (
-    <div role={error ? 'alert' : 'status'} className={[snackbarClass(longerAction), className].filter(Boolean).join(' ')} {...rest}>
-      <p className="snackbar-supporting-text">
-        {text}
-        {links.map((link) => (
-          <Fragment key={link.href + link.text}>
-            {' '}
-            <Link href={link.href} className="snackbar-link">
-              {link.text}
-              <Svg name="arrow-right" size={14} />
-            </Link>
-          </Fragment>
-        ))}
-      </p>
-      {(action || closeLabel) && (
-        <div className="snackbar-actions">
-          {action && (
-            <Button kind="text" size="small" className="snackbar-action" {...actionRest}>
-              {label}
-            </Button>
-          )}
-          {closeLabel && <IconButton icon="x" label={closeLabel} className="snackbar-close" data-snackbar-close="" />}
-        </div>
-      )}
-    </div>
-  );
-}
+// A snackbar (m3.material.io/components/snackbar, .snackbar in ../styles/ui.css): a short message at the bottom of the
+// screen, what the site says with one (a new version of a page: layouts/PageLayout.astro). Its supporting text (`text`,
+// on one line or two), evt. links in it, each with an arrow (`links`), evt. an action, a text button (`action`, with
+// its `label` and `href` or other attributes on it), under the text when it is long (`longerAction`), and evt. a
+// button that closes it (`closeLabel`, its name). Read by screen readers as a status (`error`: an alert). On the site
+// it is drawn in a <template data-snackbar> (with `data-ms` for how long it stays), and ui/snackbar.script.ts shows it
+// at the bottom with the editor's snackbar() (@morphemecms/cms/lib/snackbar.ts: where messages stand, how long, and how
+// they are swiped away, the same as the editor's messages); in the editor only drawn. How it looks is the theme's
+// (--snackbar-*). An Astro component gives an element the same classes with snackbarClass.
+import { Fragment } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Button from '@theme/ui/Button';
+import IconButton from '@theme/ui/IconButton';
+
+export type SnackbarLink = { text: string; href: string };
+export type SnackbarAction = { label: string; href?: string } & Record<string, unknown>;
+
+/** A snackbar's classes: with its action under the text, or beside it. */
+export const snackbarClass = (longerAction?: boolean) => ['snackbar', longerAction && 'snackbar-longer-action'].filter(Boolean).join(' ');
+
+export default function Snackbar({
+  text,
+  links = [],
+  action,
+  longerAction,
+  closeLabel,
+  error,
+  className,
+  ...rest
+}: {
+  text: string;
+  links?: SnackbarLink[];
+  action?: SnackbarAction;
+  longerAction?: boolean;
+  closeLabel?: string;
+  error?: boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const { label, ...actionRest } = action ?? { label: '' };
+  return (
+    <div role={error ? 'alert' : 'status'} className={[snackbarClass(longerAction), className].filter(Boolean).join(' ')} {...rest}>
+      <p className="snackbar-supporting-text">
+        {text}
+        {links.map((link) => (
+          <Fragment key={link.href + link.text}>
+            {' '}
+            <Link href={link.href} className="snackbar-link">
+              {link.text}
+              <Svg name="arrow-right" size={14} />
+            </Link>
+          </Fragment>
+        ))}
+      </p>
+      {(action || closeLabel) && (
+        <div className="snackbar-actions">
+          {action && (
+            <Button kind="text" size="small" className="snackbar-action" {...actionRest}>
+              {label}
+            </Button>
+          )}
+          {closeLabel && <IconButton icon="x" label={closeLabel} className="snackbar-close" data-snackbar-close="" />}
+        </div>
+      )}
+    </div>
+  );
+}

package/theme/ui/SplitButton.tsx

@@ -1,67 +1,67 @@
-// A split button (m3.material.io/components/split-button, .split-button in ../styles/ui.css): the main action (the
-// theme's Button: `label`, evt. `icon`, with `href` a link) and joined to it a button with an arrow (its name
-// `menuLabel`, read by screen readers) that opens a menu with the other ways to do it, the theme's Menu with its
-// MenuItems (`children`). Its kind (`kind`: filled, the default, tonal, elevated or outlined) and its size (`size`:
-// xsmall, small, medium, the default, large or xlarge) are the Button's, and so is its look, with the corners between
-// the two small (larger with the size); the arrow's button is as wide as the button is high, and fully round while its
-// menu is open (aria-expanded). `open` draws it open (the editor). On the site ui/splitButton.script.ts opens and closes the
-// menu. Other attributes (data-…) go on the main action, and `className` on the whole.
-import { useId, type ReactNode } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-import type { ButtonKind } from '@morphemecms/cms/src/standard/view';
-import Button, { buttonClass, type ButtonSize } from '@theme/ui/Button';
-import { Menu } from '@theme/ui/Menu';
-
-export type SplitButtonKind = Exclude<ButtonKind, 'text'>;
-export const splitButtonKinds: SplitButtonKind[] = ['filled', 'tonal', 'elevated', 'outlined'];
-
-/** A split button's class (the whole: its main action and its arrow have the Button's classes). */
-export const splitButtonClass = 'split-button';
-
-export default function SplitButton({
-  kind = 'filled',
-  size,
-  icon,
-  label,
-  href,
-  menuLabel,
-  open,
-  disabled,
-  className,
-  children,
-  ...rest
-}: {
-  kind?: SplitButtonKind;
-  size?: ButtonSize;
-  icon?: string;
-  label: string;
-  href?: string;
-  menuLabel: string;
-  open?: boolean;
-  disabled?: boolean;
-  className?: string;
-  children: ReactNode;
-} & Record<string, unknown>) {
-  const menu = useId();
-  return (
-    <div className={[splitButtonClass, className].filter(Boolean).join(' ')} data-split-button="">
-      <Button kind={kind} size={size} icon={icon} href={href} disabled={disabled} className="split-button-leading" {...rest}>
-        {label}
-      </Button>
-      <button
-        type="button"
-        className={`${buttonClass(kind, size)} split-button-trailing`}
-        aria-label={menuLabel}
-        aria-expanded={Boolean(open)}
-        aria-controls={menu}
-        disabled={disabled}
-        data-split-button-toggle=""
-      >
-        <Svg name="caret-down" size={20} className="split-button-arrow" />
-      </button>
-      <Menu id={menu} className="split-button-menu" aria-label={menuLabel} hidden={!open} data-split-button-menu="">
-        {children}
-      </Menu>
-    </div>
-  );
-}
+// A split button (m3.material.io/components/split-button, .split-button in ../styles/ui.css): the main action (the
+// theme's Button: `label`, evt. `icon`, with `href` a link) and joined to it a button with an arrow (its name
+// `menuLabel`, read by screen readers) that opens a menu with the other ways to do it, the theme's Menu with its
+// MenuItems (`children`). Its kind (`kind`: filled, the default, tonal, elevated or outlined) and its size (`size`:
+// xsmall, small, medium, the default, large or xlarge) are the Button's, and so is its look, with the corners between
+// the two small (larger with the size); the arrow's button is as wide as the button is high, and fully round while its
+// menu is open (aria-expanded). `open` draws it open (the editor). On the site ui/splitButton.script.ts opens and closes the
+// menu. Other attributes (data-…) go on the main action, and `className` on the whole.
+import { useId, type ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { ButtonKind } from '@morphemecms/cms/src/standard/view';
+import Button, { buttonClass, type ButtonSize } from '@theme/ui/Button';
+import { Menu } from '@theme/ui/Menu';
+
+export type SplitButtonKind = Exclude<ButtonKind, 'text'>;
+export const splitButtonKinds: SplitButtonKind[] = ['filled', 'tonal', 'elevated', 'outlined'];
+
+/** A split button's class (the whole: its main action and its arrow have the Button's classes). */
+export const splitButtonClass = 'split-button';
+
+export default function SplitButton({
+  kind = 'filled',
+  size,
+  icon,
+  label,
+  href,
+  menuLabel,
+  open,
+  disabled,
+  className,
+  children,
+  ...rest
+}: {
+  kind?: SplitButtonKind;
+  size?: ButtonSize;
+  icon?: string;
+  label: string;
+  href?: string;
+  menuLabel: string;
+  open?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const menu = useId();
+  return (
+    <div className={[splitButtonClass, className].filter(Boolean).join(' ')} data-split-button="">
+      <Button kind={kind} size={size} icon={icon} href={href} disabled={disabled} className="split-button-leading" {...rest}>
+        {label}
+      </Button>
+      <button
+        type="button"
+        className={`${buttonClass(kind, size)} split-button-trailing`}
+        aria-label={menuLabel}
+        aria-expanded={Boolean(open)}
+        aria-controls={menu}
+        disabled={disabled}
+        data-split-button-toggle=""
+      >
+        <Svg name="caret-down" size={20} className="split-button-arrow" />
+      </button>
+      <Menu id={menu} className="split-button-menu" aria-label={menuLabel} hidden={!open} data-split-button-menu="">
+        {children}
+      </Menu>
+    </div>
+  );
+}