@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/theme/styles/ui.css

@@ -43,6 +43,14 @@
     --button-toggle-selected-surface, -text, -hover, -shadow, -hover-shadow   a filled toggle that is on
     --button-tonal-selected-surface, -text, -hover; --button-elevated-selected-…; --button-outlined-selected-…   the
       other kinds on
+  A busy button or icon button (busy: disabled, aria-busy, .button-busy or .icon-button-busy; M3 loading indicator): for
+  the first delay it looks unchanged (full colours, though it is disabled); then its label and icons go, a button
+  shrinks to a circle (its width becomes its height; with reduced motion at once) and a loading indicator in the
+  label's colour, without a container, stands in the middle (an icon button keeps its size and the indicator takes
+  its icon's).
+    --button-busy-delay   the wait before it shows (200ms; a shorter wait shows nothing)
+    --button-busy-indicator-size   a button's indicator (1.5rem, or its icon's size where that is larger)
+    --icon-button-busy-indicator-size   an icon button's indicator (its icon's size)
   Icon buttons (IconButton.tsx, iconButtonClass): .icon-button with its kind, .icon-button-standard, -filled, -tonal or
   -outlined, its size, .icon-button-xsmall, none (small), -medium, -large or -xlarge, its width, .icon-button-narrow,
   none or -wide, and its shape, none (round) or .icon-button-square. A toggle as a button's (aria-pressed; the filled
@@ -57,8 +65,8 @@
     --icon-button-tonal-selected-surface, -text; --icon-button-outlined-selected-surface, -text   the toggles' that are
       not the filled one's
   Set here by the sizes, the widths and the shapes, not by a theme: --button-box, --button-inline, --button-glyph,
-  --button-round, --button-square, --button-pressed, --button-corners, and --icon-button-box, -ratio, -width, -glyph,
-  -square, -pressed and -corners.
+  --button-round, --button-square, --button-pressed, --button-corners, --button-busy-after, --button-busy-size,
+  --button-busy-from, and --icon-button-box, -ratio, -width, -glyph, -square, -pressed and -corners.
 */
 /* The classes in the CMS's own code (this package, also from node_modules/, where Tailwind does not look by itself);
    the names in the icon packs' maps (MATERIAL_SYMBOLS, LUCIDE, site/icons.mjs) and the tests' examples are not classes. */
@@ -207,6 +215,12 @@
   --type-label-small-line-height: 1rem;
   --type-label-small-weight: 500;
   --type-label-small-tracking: 0.03125rem;
+  /* The lead (an intro paragraph: type-lead, a blog post's first paragraph, a single page's first paragraph). Each is the
+     title large's; a theme sets these four to change every lead. */
+  --type-lead-size: var(--type-title-large-size);
+  --type-lead-line-height: var(--type-title-large-line-height);
+  --type-lead-weight: var(--type-title-large-weight);
+  --type-lead-tracking: var(--type-title-large-tracking);
 }
 /* A role as a utility, for a theme's own components and layouts: type-title-large, medium:type-headline-small … */
 @utility type-display-large {
@@ -251,6 +265,12 @@
   font-weight: var(--type-title-large-weight);
   letter-spacing: var(--type-title-large-tracking);
 }
+@utility type-lead {
+  font-size: var(--type-lead-size);
+  line-height: var(--type-lead-line-height);
+  font-weight: var(--type-lead-weight);
+  letter-spacing: var(--type-lead-tracking);
+}
 @utility type-title-medium {
   font-size: var(--type-title-medium-size);
   line-height: var(--type-title-medium-line-height);
@@ -352,6 +372,45 @@
     opacity: 0.6;
     cursor: default;
   }
+  /* Busy (M3 loading indicator): under the delay it looks unchanged. After it the label and icons go and a button
+     shrinks to a circle (--button-busy-from is its width, set by Button.tsx); the indicator, in the label's colour,
+     stands in the middle. */
+  :is(.button-busy, .icon-button-busy) {
+    --button-busy-after: var(--button-busy-delay, 200ms);
+    position: relative;
+  }
+  /* Busy is disabled but not dimmed: full colours, the indicator too. */
+  :is(.button.button-busy, .icon-button.icon-button-busy):disabled {
+    opacity: 1;
+    cursor: progress;
+  }
+  .button-busy {
+    --button-busy-size: var(--button-busy-indicator-size, max(1.5rem, var(--button-glyph)));
+    overflow: hidden;
+    animation: button-busy-shrink var(--motion-spatial) var(--button-busy-after) both;
+  }
+  .icon-button-busy {
+    --button-busy-size: var(--icon-button-busy-indicator-size, var(--icon-button-glyph));
+  }
+  :is(.button-busy, .icon-button-busy) > .button-busy-content {
+    display: contents;
+    animation: button-busy-hide 0s var(--button-busy-after) forwards;
+  }
+  :is(.button-busy, .icon-button-busy) > .button-busy-indicator {
+    --loading-indicator-size: var(--button-busy-size);
+    --loading-indicator-shape-size: calc(var(--button-busy-size) * 2.375 / 3);
+    --loading-indicator-colour: currentColor;
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    visibility: hidden;
+    animation: button-busy-show 0s var(--button-busy-after) forwards;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .button-busy {
+      animation-duration: 0s;
+    }
+  }
   /* The sizes: Material's five, the medium one the default. */
   .button-xsmall {
     --button-box: var(--button-xsmall-height, 2.25rem);
@@ -2045,10 +2104,13 @@
 /*
   Cards (Card.tsx, cardClass; m3.material.io/components/cards): the surface a block or an app's block is, .card with its
   kind, .card-elevated (on the surface with its shadow), .card-filled (on the tint) or .card-outlined (on the surface
-  with a thin edge); a card that is a link is an <a class="card …">, the whole card the link, lifted when pointed at;
+  with a thin edge); a card that is a link is an <a class="card …">, the whole card the link, lifted and tinted when pointed at or focused;
   .card-dragged while it is dragged to another place. What is on it (its icon, heading, text, picture) is the block's
   own (block-…).
-    --card-radius, --card-padding   its corners and the room inside it
+    --card-radius, --card-padding   its corners and the room inside it (16px, as Material 3's)
+    --card-gap                      the room between cards (8px; the grid or list of cards sets it as its gap)
+    --card-hover-layer, --card-focus-layer   the state layer of a card that links, in its text's colour: pointed at 8%,
+                                    focused 10% (opacity)
     --card-<kind>-surface, --card-<kind>-line, --card-<kind>-shadow   each kind's surface, its edge (a 1px line inside
                                     it, transparent for none) and its shadow (0 0 #0000 for none): elevated level 1,
                                     filled and outlined level 0
@@ -2101,7 +2163,7 @@
   .card {
     display: block;
     border-radius: var(--card-radius, var(--block-radius));
-    padding: var(--card-padding, 1.5rem);
+    padding: var(--card-padding, 1rem);
   }
   a.card {
     color: inherit;
@@ -2112,6 +2174,27 @@
   :where(a.card) {
     transition: box-shadow 0.3s var(--block-ease-quick);
   }
+  /* The state layer (M3's): a card that is a link or a button, tinted in its text's colour over the whole card in its
+     shape, 8% when pointed at and 10% with focus from the keyboard. It is under the ripple (the ripple is the last in the
+     card) and does not take a click. */
+  :is(a, button).card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--motion-effects);
+  }
+  @media (hover: hover) {
+    :is(a, button:enabled).card:hover::before {
+      opacity: var(--card-hover-layer, 0.08);
+    }
+  }
+  :is(a, button:enabled).card:focus-visible::before {
+    opacity: var(--card-focus-layer, 0.1);
+  }
   .card-elevated {
     --card-shadow: var(--card-elevated-shadow, var(--elevation-1-rest-shadow));
   }
@@ -5276,6 +5359,26 @@
   }
 }
 
+@keyframes button-busy-shrink {
+  from {
+    width: var(--button-busy-from, auto);
+  }
+  to {
+    width: var(--button-box);
+    padding-inline: 0;
+  }
+}
+@keyframes button-busy-hide {
+  to {
+    visibility: hidden;
+  }
+}
+@keyframes button-busy-show {
+  to {
+    visibility: visible;
+  }
+}
+
 /* Material's shapes, each a polygon of the same 60 points, turning three times in all. */
 /* prettier-ignore */
 @keyframes loading-indicator-morph {
@@ -6872,6 +6975,9 @@
 }
 @layer fallback {
   @media (prefers-reduced-motion: reduce) {
+    :is(a, button).card::before {
+      transition: none;
+    }
     .ripple-wave {
       animation: ripple-in 105ms linear;
     }

package/theme/theme.json

@@ -7,6 +7,7 @@
   "thirdParty": [],
   "icons": "material-symbols",
   "motion": "expressive",
+  "templates": ["single", "sidebar-right", "sidebar-left"],
   "description": {
     "da-DK": "Hjemmesiden i Googles Material Design 3, som mange kender fra Android: klar, enkel og velkendt.",
     "en-US": "The website in Google's Material Design 3, which many know from Android: clear, simple and familiar."

package/theme/ui/BusyContent.tsx

@@ -0,0 +1,16 @@
+// The inside of a busy Button or IconButton (.button-busy-content, .button-busy-indicator in ../styles/ui.css): the
+// usual content, hidden after the delay, and a loading indicator (aria-hidden) in the middle. Exposes BusyContent.
+// Reuses loadingIndicatorClass from ./LoadingIndicator.
+import type { ReactNode } from 'react';
+import { loadingIndicatorClass } from './LoadingIndicator';
+
+export default function BusyContent({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <span className="button-busy-content">{children}</span>
+      <span className={`${loadingIndicatorClass()} button-busy-indicator`} aria-hidden="true">
+        <span className="loading-indicator-shape"></span>
+      </span>
+    </>
+  );
+}

package/theme/ui/Button.tsx

@@ -8,10 +8,15 @@
 // 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';
+// buttonClass, and a toggle aria-pressed itself. With `busy` (a <button> only; a link ignores it) the button is
+// disabled, aria-busy and .button-busy while its action runs. Nothing else changes for the first --button-busy-delay
+// (200 ms; M3 loading indicator); then the label and icons go, the button shrinks to a circle (its width becomes its
+// height) and a loading indicator in the label's colour, without a container, stands in the middle (aria-hidden: the
+// button keeps its name). When busy ends, it is the button again.
+import { useEffect, useRef, 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';
+import BusyContent from './BusyContent';
 
 export const buttonSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 export type ButtonSize = (typeof buttonSizes)[number];
@@ -40,6 +45,7 @@ export default function Button({
   size,
   shape,
   selected,
+  busy,
   icon,
   trailingIcon,
   href,
@@ -52,6 +58,7 @@ export default function Button({
   size?: ButtonSize;
   shape?: ButtonShape;
   selected?: boolean;
+  busy?: boolean;
   icon?: IconRef;
   trailingIcon?: IconRef;
   href?: string;
@@ -59,7 +66,13 @@ export default function Button({
   className?: string;
   children: ReactNode;
 } & Record<string, unknown>) {
-  const classes = [buttonClass(kind, size, shape), className].filter(Boolean).join(' ');
+  const isBusy = busy === true && href === undefined;
+  const ref = useRef<HTMLButtonElement>(null);
+  // The width it shrinks from (a width cannot move from auto), read while the label is still there.
+  useEffect(() => {
+    if (isBusy && ref.current) ref.current.style.setProperty('--button-busy-from', `${ref.current.offsetWidth}px`);
+  }, [isBusy]);
+  const classes = [buttonClass(kind, size, shape), isBusy && 'button-busy', className].filter(Boolean).join(' ');
   const toggle = selected !== undefined && href === undefined;
   const content = (
     <>
@@ -69,8 +82,15 @@ export default function Button({
     </>
   );
   return href === undefined ? (
-    <button type={type} className={classes} aria-pressed={toggle ? selected : undefined} {...rest}>
-      {content}
+    <button
+      ref={ref}
+      type={type}
+      className={classes}
+      aria-pressed={toggle ? selected : undefined}
+      {...rest}
+      {...(isBusy ? { disabled: true, 'aria-busy': true } : {})}
+    >
+      {isBusy ? <BusyContent>{content}</BusyContent> : content}
     </button>
   ) : (
     <Link href={href} className={classes} {...rest}>

package/theme/ui/IconButton.tsx

@@ -8,9 +8,12 @@
 // it filled. `badge`: the theme's Badge at its icon's corner, a number or a dot (true), which `label` should say too. With
 // `href` it is a link (Link: on the site; in the editor only drawn; never a toggle), else a <button type="button">.
 // Other attributes (data-…, disabled) go on it, and `className` after its own classes (its place). An Astro component
-// without React gives an element the same classes with iconButtonClass, and a toggle aria-pressed itself.
+// without React gives an element the same classes with iconButtonClass, and a toggle aria-pressed itself. With `busy`
+// (a <button> only) it is disabled, aria-busy and .icon-button-busy: after --button-busy-delay (200 ms) the icon is
+// replaced by a loading indicator of its size (BusyContent); the button keeps its size.
 import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
 import Badge from '@theme/ui/Badge';
+import BusyContent from '@theme/ui/BusyContent';
 import { Link, type IconButtonKind } from '@morphemecms/cms/src/standard/view';
 import { ToggleIcon, type ButtonShape, type ButtonSize } from '@theme/ui/Button';
 
@@ -44,6 +47,7 @@ export default function IconButton({
   shape,
   selected,
   badge,
+  busy,
   href,
   className,
   ...rest
@@ -56,17 +60,26 @@ export default function IconButton({
   shape?: ButtonShape;
   selected?: boolean;
   badge?: number | boolean;
+  busy?: boolean;
   href?: string;
   className?: string;
 } & Record<string, unknown>) {
-  const classes = [iconButtonClass(kind, size, width, shape), className].filter(Boolean).join(' ');
+  const isBusy = busy === true && href === undefined;
+  const classes = [iconButtonClass(kind, size, width, shape), isBusy && 'icon-button-busy', className].filter(Boolean).join(' ');
   const toggle = selected !== undefined && href === undefined;
   const glyph =
     toggle && typeof icon === 'string' ? <ToggleIcon part="icon-button" name={icon} size={22} /> : <Glyph icon={icon} size={22} />;
   const button =
     href === undefined ? (
-      <button type="button" aria-label={label} className={classes} aria-pressed={toggle ? selected : undefined} {...rest}>
-        {glyph}
+      <button
+        type="button"
+        aria-label={label}
+        className={classes}
+        aria-pressed={toggle ? selected : undefined}
+        {...rest}
+        {...(isBusy ? { disabled: true, 'aria-busy': true } : {})}
+      >
+        {isBusy ? <BusyContent>{glyph}</BusyContent> : glyph}
       </button>
     ) : (
       <Link href={href} aria-label={label} className={classes} {...rest}>

package/scripts/fixtures/side/side-off.md

@@ -1,8 +0,0 @@
----
-title: "Side off"
-side: false
----
-
-# Side off
-
-A page with side false: no column.

package/scripts/fixtures/side/side-plain.md

@@ -1,7 +0,0 @@
----
-title: "Side plain"
----
-
-# Side plain
-
-A plain page: the column is beside this text.

package/scripts/fixtures/side/side-wide.md

@@ -1,8 +0,0 @@
----
-title: "Side wide"
-wide: true
----
-
-# Side wide
-
-A wide page: no column.