@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/input.tsx

@@ -3,8 +3,11 @@
 import { Loader2 } from 'lucide-react';
 import { type InputHTMLAttributes, type ReactNode, forwardRef } from 'react';
 import { cn } from '../../utils/cn';
+import { FieldValueSkeleton } from './field-value-skeleton';
 import { FieldWrapper } from './field-wrapper';
 import { INPUT_HEIGHT_CLASS, INPUT_RADIUS_CLASS } from './input-styles';
+import { Label } from './label';
+import { useLoadingScope } from './loading-scope';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** When true, renders error border & ring */
@@ -22,8 +25,14 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey).
       Only "error" and "warning" mark the field invalid (colored border). */
   errorVariant?: 'error' | 'warning' | 'success' | 'muted';
-  /** When true, shows a loading spinner as end adornment */
+  /** An action on the field is in progress (e.g. a check of what was typed): a spinner as the end adornment. Not a
+   *  loading state: the field's own loading state is a loading scope's (the label and adornments drawn for real, the
+   *  value a bar in the field's box). */
+  pending?: boolean;
+  /** @deprecated Use `pending`: this is an action's spinner, not the field's loading state (a loading scope). */
   loading?: boolean;
+  /** The value is typed by the person (a search or filter box), never read: drawn as is in a loading scope. */
+  userValue?: boolean;
 }
 
 const invalidBorderClasses = {
@@ -42,14 +51,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>((allProps, ref) => {
     labelVariant,
     error,
     errorVariant = 'error',
-    loading = false,
+    pending: pendingProp = false,
+    loading: deprecatedLoading = false,
+    userValue = false,
     ...props
   } = allProps;
+  const pending = pendingProp || deprecatedLoading;
   // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
   const errorSlot = 'error' in allProps;
   // success/muted are informational — they never paint the invalid border
   const variantIsInvalid = errorVariant === 'error' || errorVariant === 'warning';
   const isInvalid = invalid || (!!error && variantIsInvalid);
+  // ONE switch: in a page's loading state the field draws its box, its label and adornments for real, and its value
+  // as a bar (the placeholder hidden). The input stays mounted, hidden, so nothing re-registers when the scope ends.
+  const inScope = useLoadingScope() && !userValue;
 
   // Range inputs get a clean slider rendering — no label wrapper, borders, or adornments
   if (type === 'range') {
@@ -93,7 +108,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>((allProps, ref) => {
   }
 
   const content = (
-    <label
+    <Label
+      variant="surface"
       data-invalid={isInvalid || undefined}
       className={cn(
         // Layout & spacing
@@ -129,8 +145,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>((allProps, ref) => {
           {startAdornment}
         </span>
       )}
+      {inScope && <FieldValueSkeleton />}
       <input
         type={type}
+        hidden={inScope || props.hidden}
         className={cn(
           // Layout
           'min-w-0 flex-1 border-none bg-transparent outline-none',
@@ -150,13 +168,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>((allProps, ref) => {
         ref={ref}
         {...props}
       />
-      {loading && <Loader2 className="size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" />}
-      {!loading && endAdornment && (
+      {pending && <Loader2 className="size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" />}
+      {!pending && endAdornment && (
         <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6">
           {endAdornment}
         </span>
       )}
-    </label>
+    </Label>
   );
 
   return (

package/src/components/ui/label.tsx

@@ -20,19 +20,24 @@ import { cn } from '../../utils/cn';
  *    in `items-center` rows. Opt into `spacing` ONLY when the label truly has
  *    no spacing container.
  *
- * Raw `<label>` elements remain correct for CLICK-SURFACES (a field's adorned
- * chrome, checkbox/radio rows, upload dropzones) — those are interaction
- * wrappers, not text labels, and must not inherit this typography.
+ * A CLICK-SURFACE (a field's adorned chrome, a checkbox/radio row, a slider's
+ * caption row) is a `Label` too, with `variant="surface"`: the label element and
+ * its control association, with NO typography of its own; the call site's
+ * `className` draws the surface. Never a raw `<label>`.
  */
-const labelVariants = cva('block text-ods-text-primary text-h6', {
+const LABEL_TEXT_CLASS = 'block text-ods-text-primary text-h6';
+
+const labelVariants = cva('', {
   variants: {
     variant: {
-      default: '',
+      default: LABEL_TEXT_CLASS,
       /** @deprecated alias of `default` — the three small scales converged on text-h6. */
-      small: '',
+      small: LABEL_TEXT_CLASS,
       /** @deprecated alias of `default`. */
-      medium: '',
-      large: 'text-h4',
+      medium: LABEL_TEXT_CLASS,
+      large: cn(LABEL_TEXT_CLASS, 'text-h4'),
+      /** A click surface that labels its control: no typography, the site's `className` is its look. */
+      surface: '',
     },
     spacing: {
       none: '',

package/src/components/ui/leader-row.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from './loading-scope';
+import { loadingItemProps, useLoadingScope } from './loading-scope';
 
 export interface LeaderRowProps {
   label: ReactNode;
@@ -10,12 +10,42 @@ export interface LeaderRowProps {
   status?: ReactNode;
   /** The row's element. Default `div`; `li` inside a list. */
   as?: 'div' | 'li';
+  /** The label's tone: `secondary` (default, the quiet label) or `primary` (a label that reads as body copy, as a
+   *  billing summary's rows). */
+  labelTone?: LeaderRowLabelTone;
+  /** The label may shrink to at most half the row and clips with an ellipsis (a long read key, such as a script
+   *  parameter's name). Default: the label keeps its whole width and the value clips. Same in both forms. */
+  labelShrink?: boolean;
+  /** The value's tone: `primary` (default), `secondary` (a value that is not in effect), `warning`, `success` (a check
+   *  that passed: "Enabled") or `error` (one that failed: "Disabled"). */
+  valueTone?: LeaderRowValueTone;
+  /** The value is still being read: the row keeps its structure, the label real (a bar when empty), the value and the
+   *  status bars. A loading scope does the same for a row whose value is empty. */
+  loading?: boolean;
   className?: string;
+  /** Markers for the page's height gate (`data-loading-item` on a row of a read list): forwarded in both forms. */
+  [marker: `data-${string}`]: unknown;
 }
 
-/** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
+export type LeaderRowLabelTone = 'secondary' | 'primary';
+export type LeaderRowValueTone = 'primary' | 'secondary' | 'warning' | 'success' | 'error';
+
+/** The row's layout, loaded and loading. */
 const LEADER_ROW_CLASS = 'flex min-w-0 items-center gap-[var(--spacing-system-xsf)] text-h4';
-const LEADER_LABEL_CLASS = 'shrink-0 whitespace-nowrap text-ods-text-secondary';
+const LEADER_LABEL_CLASS = 'shrink-0 whitespace-nowrap';
+/** A label that may shrink (`labelShrink`): at most half the row, clipped. */
+const LEADER_LABEL_SHRINK_CLASS = 'min-w-0 max-w-[50%] truncate whitespace-nowrap';
+const LABEL_TONE_CLASS: Record<LeaderRowLabelTone, string> = {
+  secondary: 'text-ods-text-secondary',
+  primary: 'text-ods-text-primary',
+};
+const VALUE_TONE_CLASS: Record<LeaderRowValueTone, string> = {
+  primary: 'text-ods-text-primary',
+  secondary: 'text-ods-text-secondary',
+  warning: 'text-ods-warning',
+  success: 'text-ods-success',
+  error: 'text-ods-error',
+};
 const LEADER_LINE_CLASS = 'h-px min-w-4 flex-1 bg-ods-border';
 const STATUS_BOX_CLASS = 'flex shrink-0 items-center';
 
@@ -27,54 +57,39 @@ const STATUS_BOX_CLASS = 'flex shrink-0 items-center';
 /** Whether a slot holds something to draw: a read value that is not here yet is empty. */
 const isGiven = (node: ReactNode) => node !== null && node !== undefined && node !== false && node !== '';
 
-export function LeaderRow({ label, value, status, as: Row = 'div', className }: LeaderRowProps) {
-  // In a loading scope a row whose value is not here yet (empty) is its skeleton; a row the page states in full
-  // (config copy, values already known) is drawn as it is.
-  if (useLoadingScope() && !isGiven(value)) {
-    return (
-      <LeaderRowSkeleton status={!!status} label={isGiven(label) ? label : undefined} as={Row} className={className} />
-    );
-  }
+export function LeaderRow(props: LeaderRowProps) {
+  const {
+    label,
+    value,
+    status,
+    as: Row = 'div',
+    labelTone = 'secondary',
+    labelShrink = false,
+    valueTone = 'primary',
+    loading = false,
+    className,
+  } = props;
+  const labelClass = labelShrink ? LEADER_LABEL_SHRINK_CLASS : LEADER_LABEL_CLASS;
+  // ONE switch: while the host reads the value, or in a loading scope when the value is not here yet (empty), the row
+  // draws its read parts as bars in the same boxes; a row the page states in full (config copy, values already known)
+  // is drawn as it is.
+  const inScope = useLoadingScope();
+  const isLoading = loading || (inScope && !isGiven(value));
   return (
-    <Row className={cn(LEADER_ROW_CLASS, className)}>
-      <span className={LEADER_LABEL_CLASS}>{label}</span>
+    <Row className={cn(LEADER_ROW_CLASS, className)} aria-hidden={isLoading || undefined} {...loadingItemProps(props)}>
+      {isLoading && !isGiven(label) ? (
+        <TextLineSkeleton as="span" type="inherit" className={cn('inline-block w-24', labelClass)} />
+      ) : (
+        <span className={cn(labelClass, LABEL_TONE_CLASS[labelTone])}>{label}</span>
+      )}
       <span className={LEADER_LINE_CLASS} aria-hidden />
-      <span className="min-w-0 truncate text-ods-text-primary">{value}</span>
-      {status && <span className={STATUS_BOX_CLASS}>{status}</span>}
-    </Row>
-  );
-}
-
-/**
- * A row while it is read: the label (drawn as it is when the page states it, else a bar), the hairline drawn for
- * real, a bar for the value, a status box. Every bar is one line of the ROW's type step, so a row sized with
- * `className="text-h6"` keeps its height.
- */
-export function LeaderRowSkeleton({
-  status = false,
-  label,
-  as: Row = 'div',
-  className,
-}: {
-  status?: boolean;
-  /** The row's label, when the page states it. */
-  label?: ReactNode;
-  as?: 'div' | 'li';
-  className?: string;
-}) {
-  return (
-    <Row className={cn(LEADER_ROW_CLASS, className)} aria-hidden>
-      {label !== undefined ? (
-        <span className={LEADER_LABEL_CLASS}>{label}</span>
+      {isLoading ? (
+        <TextLineSkeleton as="span" type="inherit" className="inline-block w-16 shrink-0" />
       ) : (
-        <TextLineSkeleton as="span" type="inherit" className="inline-block w-24 shrink-0" />
+        <span className={cn('min-w-0 truncate', VALUE_TONE_CLASS[valueTone])}>{value}</span>
       )}
-      <span className={LEADER_LINE_CLASS} />
-      <TextLineSkeleton as="span" type="inherit" className="inline-block w-16 shrink-0" />
       {status && (
-        <span className={STATUS_BOX_CLASS}>
-          <UnifiedSkeleton className="size-4" />
-        </span>
+        <span className={STATUS_BOX_CLASS}>{isLoading ? <UnifiedSkeleton className="size-4" /> : status}</span>
       )}
     </Row>
   );

package/src/components/ui/loading-scope.tsx

@@ -11,7 +11,7 @@
  * and the same skeleton shows while it fetches on the client. Nothing in a scope fetches, writes, or draws invented
  * words.
  */
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, type ElementType, Fragment, useContext, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 
 const LoadingScopeContext = createContext(false);
@@ -20,30 +20,34 @@ const LoadingScopeContext = createContext(false);
  *  region announces it once. `bare` draws no element of its own (the scope only): for a component's own `loading`
  *  mode, whose markup must not change and whose container already says it is loading. `active` (default true) turns
  *  the scope on and off without changing the tree, so a component that finishes loading is not remounted; a false
- *  never cancels an outer scope. */
+ *  never cancels an outer scope. `as` is the element (default `div`; a `contents` box keeps a flex parent's
+ *  layout). The scope that starts a loading state (no outer one) is also busy (`aria-busy`). */
 export function LoadingScope({
   children,
   className,
   bare = false,
   active,
+  as: Tag = 'div',
 }: {
   children: ReactNode;
   className?: string;
   bare?: boolean;
   active?: boolean;
+  as?: ElementType;
 }) {
   const outer = useContext(LoadingScopeContext);
   const on = outer || (active ?? true);
   if (bare) return <LoadingScopeContext.Provider value={on}>{children}</LoadingScopeContext.Provider>;
   return (
     <LoadingScopeContext.Provider value={on}>
-      <div
+      <Tag
+        aria-busy={on && !outer ? 'true' : undefined}
         aria-hidden={on || undefined}
         inert={on || undefined}
         className={cn(on && 'pointer-events-none select-none', className)}
       >
         {children}
-      </div>
+      </Tag>
     </LoadingScopeContext.Provider>
   );
 }
@@ -52,3 +56,142 @@ export function LoadingScope({
 export function useLoadingScope(): boolean {
   return useContext(LoadingScopeContext);
 }
+
+/**
+ * A component whose data a client read has not answered yet, drawn by the component itself: its children in a bare
+ * loading scope (no element of its own, so the markup does not change), where each draws its own skeleton, else as
+ * they are. The scope is always rendered and only switched (`active`), so the children are never remounted when the
+ * read answers, and an outer loading scope still holds. The parent renders the component either way and never picks
+ * its `<Name>Skeleton` (one switch per component):
+ *
+ *   <LoadingWhen loading={!health}><StatusBadge text={label} variant="button" /></LoadingWhen>
+ */
+export function LoadingWhen({
+  loading,
+  label,
+  as,
+  className,
+  children,
+}: {
+  loading: boolean;
+  /**
+   * The read is announced: with a label the component draws ONE region element (`as`, `className`), always mounted,
+   * and a polite status reads the label while `loading` (silent inside an outer scope, which has said it), the same
+   * region `LoadingFallback` draws. Without one it stays bare: no element of its own.
+   */
+  label?: string;
+  /** The region's element when `label` is given (a `contents` box keeps a flex parent's layout). */
+  as?: ElementType;
+  className?: string;
+  children: ReactNode;
+}) {
+  if (label === undefined) {
+    return (
+      <LoadingScope bare active={loading}>
+        {children}
+      </LoadingScope>
+    );
+  }
+  return (
+    <AnnouncedLoadingScope label={label} active={loading} as={as} className={className}>
+      {children}
+    </AnnouncedLoadingScope>
+  );
+}
+
+/**
+ * THE announced loading region: a `LoadingScope` element (busy, inert, hidden from assistive technology while on)
+ * with the one polite status beside it, outside the hidden region so it is still read, left out inside an outer scope
+ * and while the scope is off. `LoadingFallback` (always on) and a labelled `LoadingWhen` (switched by its read) draw
+ * it. `status={false}`: no announcement (an inline part).
+ */
+export function AnnouncedLoadingScope({
+  label,
+  status = true,
+  active = true,
+  as,
+  className,
+  children,
+}: {
+  label: string;
+  status?: boolean;
+  active?: boolean;
+  as?: ElementType;
+  className?: string;
+  children: ReactNode;
+}) {
+  const outer = useLoadingScope();
+  return (
+    <>
+      {status && active && !outer && <LoadingStatus label={label} />}
+      <LoadingScope active={active} as={as} className={className}>
+        {children}
+      </LoadingScope>
+    </>
+  );
+}
+
+/**
+ * A static control (a button, a menu trigger, a toggle: copy the component owns, never read data) drawn for real while
+ * its subject is read: wrapped inert and hidden from assistive technology, so it cannot act on data that is not there
+ * yet. THE one wrapper for it. The wrapper is always rendered and only switched (`loading`), so the control is never
+ * remounted when the read answers. `className` is the wrapper's box (default `inline-flex shrink-0`, the size of the
+ * control; `contents` keeps a flex parent's layout).
+ *
+ *   <InertWhileLoading loading={loading}><Button onClick={onOpen}>Open</Button></InertWhileLoading>
+ */
+export function InertWhileLoading({
+  loading = true,
+  className = 'inline-flex shrink-0',
+  children,
+}: {
+  loading?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <span inert={loading || undefined} aria-hidden={loading || undefined} className={className}>
+      {children}
+    </span>
+  );
+}
+
+/** The handler a control drawn inert while its subject is read is given: it is never called (the control is inert).
+ *  THE one such handler, so a loading form never declares its own no-op. */
+export const LOADING_NOOP = (): void => undefined;
+
+/** The one polite status a loading state is read as (visually hidden): the region's, and a fallback's beside its hidden content. */
+export function LoadingStatus({ label }: { label: string }) {
+  return (
+    <span role="status" aria-live="polite" className="sr-only">
+      {label}
+    </span>
+  );
+}
+
+/**
+ * The `data-*` attributes among a component's props, for its skeleton: a list item's skeleton carries the same
+ * markers the loaded item carries (`data-loading-item` first), so the page's height gate counts both forms alike.
+ * THE one way a component hands its markers to its own skeleton (`<RowSkeleton {...loadingItemProps(props)} />`).
+ */
+export function loadingItemProps(props: object): { [key: `data-${string}`]: unknown } {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith('data-')));
+}
+
+/**
+ * A list's items while the list is read: `count` of them, each drawn by `children(index)` (keyed here, so the caller
+ * writes no key). THE one way a skeleton draws N items: the count is the list's own page size, limit or declared
+ * typical constant, never a literal typed here, and each item carries the list's markers (`data-loading-item`, through
+ * `loadingItemProps`), like the loaded item.
+ *
+ *   <LoadingItems count={pageSize}>{() => <RowSkeleton data-loading-item />}</LoadingItems>
+ */
+export function LoadingItems({ count, children }: { count: number; children: (index: number) => ReactNode }) {
+  return (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <Fragment key={index}>{children(index)}</Fragment>
+      ))}
+    </>
+  );
+}

package/src/components/ui/markdown/engine.tsx

@@ -35,7 +35,7 @@ import type { PluggableList } from 'unified';
 import type { ResolveLinkResult } from '../../../types/doc-source';
 import { cn } from '../../../utils/cn';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
-import { useLoadingScope } from '../loading-scope';
+import { LoadingItems, useLoadingScope } from '../loading-scope';
 import { buildBaseComponents, MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from './base-components';
 import { HeadingIdMapContext, HeadingLineOffsetContext, useHeadingIdMap, type HeadingSection } from './heading-ids';
 import {
@@ -186,6 +186,11 @@ export interface MarkdownEngineProps {
   skeletonSections?: number;
   /** Lines of the one paragraph a loading body draws when it names no sections. Default 3. */
   skeletonLines?: number;
+  /** A loading body opens with its own `# ` title (a legal document's): its title row is drawn first. */
+  skeletonTitle?: boolean;
+  /** The content is still being read: the body draws its skeleton (the `skeleton*` shape). A loading scope does the
+   *  same while `content` is empty. */
+  loading?: boolean;
 }
 
 /** Lines a loading body draws when its caller names no shape. */
@@ -424,11 +429,12 @@ export const MarkdownEngine = memo(function MarkdownEngineGate(props: MarkdownEn
   // In a page's loading state with no content yet (it is read) the body is its skeleton; content it is given
   // there is the page's own and renders as it is.
   const inScope = useLoadingScope();
-  if (inScope && !props.content) {
+  if ((inScope && !props.content) || props.loading) {
     return (
       <MarkdownEngineSkeleton
         sections={props.skeletonSections}
         lines={props.skeletonLines}
+        title={props.skeletonTitle}
         textSize={props.textSize}
         className={props.className}
       />
@@ -501,16 +507,19 @@ export function MarkdownEngineSkeleton({
             </div>
           ) : null}
           {sections ? (
-            Array.from({ length: sections }, (_, section) => (
-              <div key={section}>
-                <h2 className={cn(MARKDOWN_H2_CLASS, textSizes.h2)}>
-                  <TextLineSkeleton type="inherit" as="span" className="w-1/2" />
-                </h2>
-                {SKELETON_SECTION_PARAGRAPHS.map((paragraphLines, index) => (
-                  <ParagraphBar key={index} lines={paragraphLines} className={paragraphClass} />
-                ))}
-              </div>
-            ))
+            // loading-standard-ok(ITEM_MARK): a document's sections are its markdown text; the loaded body has no items to mark
+            <LoadingItems count={sections}>
+              {() => (
+                <div>
+                  <h2 className={cn(MARKDOWN_H2_CLASS, textSizes.h2)}>
+                    <TextLineSkeleton type="inherit" as="span" className="w-1/2" />
+                  </h2>
+                  {SKELETON_SECTION_PARAGRAPHS.map((paragraphLines, index) => (
+                    <ParagraphBar key={index} lines={paragraphLines} className={paragraphClass} />
+                  ))}
+                </div>
+              )}
+            </LoadingItems>
           ) : (
             <ParagraphBar lines={lines} className={paragraphClass} />
           )}

package/src/components/ui/markdown/index.ts

@@ -10,11 +10,7 @@ export { MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from '
 export { MarkdownEngine, MarkdownEngineSkeleton, MARKDOWN_SKELETON_LINES, type MarkdownEngineProps } from './engine';
 export { SimpleMarkdownRenderer, type SimpleMarkdownRendererProps } from './simple-markdown-renderer';
 export { type ResolveLinkResult } from '../../../types/doc-source';
-export {
-  RichMarkdownRenderer,
-  RichMarkdownRendererSkeleton,
-  type RichMarkdownRendererProps,
-} from './rich/rich-markdown-renderer';
+export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich/rich-markdown-renderer';
 export { processShortcodes } from './rich/shortcodes';
 export {
   SAFE_HTML_TAGS,

package/src/components/ui/markdown/rich/rich-markdown-renderer.tsx

@@ -22,7 +22,7 @@ import {
   useRichMarkdownRuntime,
   type RichMarkdownRuntime,
 } from '../../../embeds/rich-markdown-runtime';
-import { MarkdownEngine, MarkdownEngineSkeleton, NO_BROKEN_LINKS, type MarkdownEngineProps } from '../engine';
+import { MarkdownEngine, NO_BROKEN_LINKS, type MarkdownEngineProps } from '../engine';
 import { resolveTextSizeConfig } from '../text-size';
 import { buildRichEmbedOverrides } from './embed-overrides';
 import { processShortcodes } from './shortcodes';
@@ -209,20 +209,3 @@ type InnerProps = Omit<RichMarkdownRendererProps, keyof RichMarkdownRuntime> &
 
 /** Memoized — see the engine's memo rationale. */
 export const RichMarkdownRenderer = memo(RichMarkdownRendererImpl);
-
-/**
- * A RichMarkdownRenderer while its content is read: the engine's skeleton at the `article` type, `sections`
- * sections of a real `<h2>` holding a bar and its paragraphs (the renderer's own heading and paragraph classes).
- */
-export function RichMarkdownRendererSkeleton({
-  sections,
-  title,
-  className,
-}: {
-  sections?: number;
-  /** The body opens with its own `# ` title (`MarkdownEngineSkeleton`'s `title`). */
-  title?: boolean;
-  className?: string;
-}) {
-  return <MarkdownEngineSkeleton sections={sections} title={title} textSize="article" className={className} />;
-}

package/src/components/ui/modal-v2.tsx

@@ -5,6 +5,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../utils/cn';
 import { XmarkIcon } from '../icons-v2-generated';
+import { Button } from './button';
 import { CollisionBoundaryContext, PortalContainerContext } from './portal-container';
 
 // Duration of the open/close animation in ms — keep in sync with the
@@ -374,13 +375,16 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(({ children, cl
     <div ref={ref} className={cn('flex items-center gap-[var(--spacing-system-sf)]', className)}>
       <div className="flex min-w-0 flex-1 flex-col">{children}</div>
       {onClose && (
-        <button
+        <Button
+          variant="transparent"
+          size="icon-sm"
+          type="button"
           onClick={onClose}
-          className="hidden shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary md:flex"
+          className="hidden shrink-0 md:inline-flex"
           aria-label="Close"
         >
-          <XmarkIcon className="size-6" />
-        </button>
+          <XmarkIcon className="text-ods-text-secondary" />
+        </Button>
       )}
     </div>
   );

package/src/components/ui/numbered-step.tsx

@@ -39,6 +39,12 @@ export interface NumberedStepProps extends StepNumberProps {
   description?: string;
   /** The title's element. Default `h3`. */
   titleAs?: 'h3' | 'h4' | 'p';
+  /**
+   * The step's words are still being read: its number drawn for real, its title a bar and (when the loaded step has
+   * one, `{ description: true }`) its description a bar. The step renders on the server and cannot read a loading
+   * scope: a host passes its own switch (`useLoadingScope() || loading`).
+   */
+  loading?: boolean | { description?: boolean };
 }
 
 /**
@@ -56,7 +62,18 @@ export function NumberedStep({
   accent,
   titleAs: Title = 'h3',
   className,
+  loading,
 }: NumberedStepProps) {
+  // loading-standard-ok(PROP_ONLY_SWITCH): a server component cannot read the scope; the host passes its own switch
+  if (loading) {
+    return (
+      <NumberedStepSkeleton
+        number={number}
+        description={loading === true ? true : loading.description}
+        className={className}
+      />
+    );
+  }
   return (
     <div className={cn(STEP_CLASS, className)}>
       <StepNumber number={number} current={current} accent={accent} />
@@ -89,7 +106,7 @@ export function NumberedStep({
  * A numbered step while its words are read: its number drawn for real (it is the step's place), its title a
  * `text-h3` bar and its description, when it carries one, a `text-h4` bar.
  */
-export function NumberedStepSkeleton({
+function NumberedStepSkeleton({
   number,
   description = true,
   className,