@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/ui/entity-image.js

@@ -3,13 +3,20 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import Image from "../../embed-shims/next-image.js";
 import { useAuthedImageSrc } from "../../hooks/use-authed-image-src.js";
+import { TILE_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { personInitials } from "../../utils/format.js";
-const ENTITY_IMAGE_SIZE = "size-[52px] content-md:size-[60px]";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
+const ENTITY_IMAGE_SIZE = TILE_SIZE.entity;
+const ENTITY_IMAGE_RADIUS_CLASS = "rounded-md";
 function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
-  const resolvedSrc = useAuthedImageSrc(src);
+  const held = useLoadingScope();
+  const authedSrc = useAuthedImageSrc(held ? void 0 : src);
+  const resolvedSrc = authedSrc;
   const [failedSrc, setFailedSrc] = React.useState(null);
   const imageFailed = resolvedSrc !== void 0 && failedSrc === resolvedSrc;
+  if (held) return /* @__PURE__ */ jsx(EntityImageSkeleton, { sizeClassName, className });
   const showFallback = imageFailed || !resolvedSrc;
   const initials = personInitials(fallbackText ?? alt);
   if (showFallback) {
@@ -18,7 +25,8 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
       {
         "aria-label": alt,
         className: cn(
-          "flex shrink-0 select-none items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-secondary text-h4",
+          "flex shrink-0 select-none items-center justify-center border border-ods-border bg-ods-bg text-ods-text-secondary text-h4",
+          ENTITY_IMAGE_RADIUS_CLASS,
           sizeClassName ?? ENTITY_IMAGE_SIZE,
           className
         ),
@@ -33,7 +41,8 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
       alt: alt ?? "",
       onError: () => setFailedSrc(resolvedSrc),
       className: cn(
-        "shrink-0 rounded-md border border-ods-border object-contain",
+        "shrink-0 border border-ods-border object-contain",
+        ENTITY_IMAGE_RADIUS_CLASS,
         sizeClassName ?? ENTITY_IMAGE_SIZE,
         className
       ),
@@ -43,6 +52,19 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
     }
   );
 }
+function EntityImageSkeleton({
+  sizeClassName,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    UnifiedSkeleton,
+    {
+      className: cn("shrink-0", ENTITY_IMAGE_RADIUS_CLASS, sizeClassName ?? ENTITY_IMAGE_SIZE, className)
+    }
+  );
+}
 export {
-  EntityImage
+  ENTITY_IMAGE_SIZE,
+  EntityImage,
+  EntityImageSkeleton
 };

package/dist/components/ui/error-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../../src/components/ui/error-state.tsx"],"names":[],"mappings":"AAMA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAe,EACf,OAAO,EACP,OAAiB,EACjB,QAAe,EACf,SAAiB,EACjB,QAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,kBAAkB,GACnB,EAAE,eAAe,+BA4EjB;AAGD,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,+BAYA;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAExF;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAA4C,EAC5C,MAAM,GACP,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,+BAEA"}
+{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../../src/components/ui/error-state.tsx"],"names":[],"mappings":"AAQA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAe,EACf,OAAO,EACP,OAAiB,EACjB,QAAe,EACf,SAAiB,EACjB,QAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,kBAAkB,GACnB,EAAE,eAAe,+BAiFjB;AAGD,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,+BAYA;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAExF;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAA4C,EAC5C,MAAM,GACP,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,+BAEA"}

package/dist/components/ui/error-state.js

@@ -2,7 +2,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, RefreshCw, Home } from "lucide-react";
 import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "./button/index.js";
+import { useLoadingScope } from "./loading-scope.js";
 function ErrorState({
   title = "Error",
   message,
@@ -15,6 +17,7 @@ function ErrorState({
   className,
   containerClassName
 }) {
+  const loading = useLoadingScope();
   const getVariantStyles = () => {
     switch (variant) {
       case "error":
@@ -53,7 +56,7 @@ function ErrorState({
     showIcon && /* @__PURE__ */ jsx(AlertTriangle, { className: cn("mt-0.5 h-5 w-5 flex-shrink-0", styles.icon) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
       /* @__PURE__ */ jsx("h3", { className: cn("mb-1 font-semibold", styles.text), children: title }),
-      /* @__PURE__ */ jsx("p", { className: cn("text-h6", styles.text), children: message }),
+      /* @__PURE__ */ jsx("p", { className: cn("text-h6", styles.text), children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-2/3" }) : message }),
       (showRetry || showHome) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-2", children: [
         showRetry && onRetry && /* @__PURE__ */ jsx(
           Button,

package/dist/components/ui/feature-card.d.ts

@@ -53,6 +53,36 @@ export interface FeatureCardGridProps {
     subtitleClassName?: string;
     /** The subtitle's colour. Defaults to the platform accent. */
     accentClassName?: string;
+    /**
+     * The shape of the grid while its items are read (a page's loading state, where `items` is empty): how many
+     * items, and which of their parts they carry. Defaults to one row of title-only items.
+     */
+    skeleton?: FeatureCardGridSkeletonShape;
+}
+/** The parts each item of a loading grid carries; every read word is a bar of its own line height. */
+export interface FeatureCardGridSkeletonShape {
+    /** Items drawn. Defaults to one row (`columns`). */
+    count?: number;
+    /** An eyebrow above the title: a bar, or `'index'` for the item's own number ("01", "02"), drawn for real. */
+    eyebrow?: boolean | 'index';
+    /** A subtitle under the title. */
+    subtitle?: boolean;
+    /** A picture beside the title block: the classes of its box (its size and radius), drawn as a box. */
+    media?: string;
+    /** Lines of body copy under the title. */
+    contentLines?: 1 | 2 | 3;
+    /** The type step of that copy. Defaults to `h4`. */
+    contentType?: 'h4' | 'h6';
 }
-export declare function FeatureCardGrid({ items, columns, className, cardClassName, itemClassName, showBorders, roundedCorners, cardGap, loading, titleClassName, subtitleClassName, accentClassName, }: FeatureCardGridProps): React.JSX.Element;
+/**
+ * FeatureCardGrid: a grid of items split by hairlines. In a page's loading state with no items yet (they are
+ * read) it draws its skeleton, `FeatureCardGridSkeleton` of `skeleton`'s shape; items it is given there are the
+ * page's own copy and draw as they are.
+ */
+export declare function FeatureCardGrid({ skeleton, ...props }: FeatureCardGridProps): React.JSX.Element;
+/**
+ * A FeatureCardGrid while its items are read: the same grid (its columns, hairlines and item padding), each
+ * item's eyebrow, title, subtitle and copy a bar of its own line height, its picture a box.
+ */
+export declare function FeatureCardGridSkeleton({ count, eyebrow, subtitle, media, contentLines, contentType, ...grid }: Omit<FeatureCardGridProps, 'items' | 'loading' | 'skeleton'> & FeatureCardGridSkeletonShape): React.JSX.Element;
 //# sourceMappingURL=feature-card.d.ts.map

package/dist/components/ui/feature-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/feature-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;KAC3E,CAAC;IACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA0BD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAW,EACX,SAAc,EAGd,aAAsE,EACtE,aAAqC,EACrC,WAAkB,EAClB,cAAsB,EACtB,OAAY,EACZ,OAAe,EACf,cAAmB,EACnB,iBAAsB,EACtB,eAAmC,GACpC,EAAE,oBAAoB,qBAkMtB"}
+{"version":3,"file":"feature-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/feature-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;KAC3E,CAAC;IACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,4BAA4B,CAAC;CACzC;AAED,sGAAsG;AACtG,MAAM,WAAW,4BAA4B;IAC3C,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8GAA8G;IAC9G,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CAC3B;AAmPD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,qBAO3E;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,WAAkB,EAClB,GAAG,IAAI,EACR,EAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG,4BAA4B,qBAS7F"}

package/dist/components/ui/feature-card.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Card } from "./card.js";
+import { useLoadingScope } from "./loading-scope.js";
 import { StatusBadge } from "./status-badge.js";
 const GRID_COLUMNS = {
   2: "grid-cols-1 content-md:grid-cols-2",
@@ -19,7 +20,7 @@ function fourColumnBorders(index, count) {
   classes.push(Math.floor(index / 4) < lgRows - 1 ? "content-lg:border-b" : "content-lg:border-b-0");
   return ` ${classes.join(" ")}`;
 }
-function FeatureCardGrid({
+function FeatureCardGridView({
   items,
   columns = 3,
   className = "",
@@ -33,7 +34,8 @@ function FeatureCardGrid({
   loading = false,
   titleClassName = "",
   subtitleClassName = "",
-  accentClassName = "text-ods-accent"
+  accentClassName = "text-ods-accent",
+  loadingKeepsEyebrow = false
 }) {
   const gridCols = GRID_COLUMNS[columns];
   const itemsPerRow = columns;
@@ -118,16 +120,16 @@ function FeatureCardGrid({
                 item.media ? /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-system-lf)]", children: [
                   /* @__PURE__ */ jsx("div", { className: "shrink-0", children: item.media }),
                   /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xsf)]", children: [
-                    item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-6 rounded" }) : item.eyebrow }),
-                    /* @__PURE__ */ jsx("h3", { className: `text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-1/2 rounded" }) : item.title }),
-                    item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-3/4 rounded" }) : item.subtitle }),
+                    item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading && !loadingKeepsEyebrow ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-6" }) : item.eyebrow }),
+                    /* @__PURE__ */ jsx("h3", { className: `text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) : item.title }),
+                    item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-3/4" }) : item.subtitle }),
                     item.content
                   ] })
                 ] }) : item.eyebrow || item.subtitle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)]", children: [
-                  item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-6 rounded" }) : item.eyebrow }),
-                  /* @__PURE__ */ jsx("h3", { className: `whitespace-pre-line text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-1/2 rounded" }) : item.title }),
-                  item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-3/4 rounded" }) : item.subtitle })
-                ] }) : /* @__PURE__ */ jsx("h3", { className: "whitespace-pre-line text-ods-text-primary text-h2", children: item.title }),
+                  item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading && !loadingKeepsEyebrow ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-6" }) : item.eyebrow }),
+                  /* @__PURE__ */ jsx("h3", { className: `whitespace-pre-line text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) : item.title }),
+                  item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-3/4" }) : item.subtitle })
+                ] }) : /* @__PURE__ */ jsx("h3", { className: "whitespace-pre-line text-ods-text-primary text-h2", children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) : item.title }),
                 !item.media && item.content,
                 item.footer && /* @__PURE__ */ jsx("div", { className: "mt-auto", children: item.footer })
               ]
@@ -139,6 +141,33 @@ function FeatureCardGrid({
     }) }, rowIndex);
   }) });
 }
+function FeatureCardGrid({ skeleton, ...props }) {
+  const inScope = useLoadingScope();
+  if (inScope && props.items.length === 0) {
+    const { items: _items, loading: _loading, ...grid } = props;
+    return /* @__PURE__ */ jsx(FeatureCardGridSkeleton, { ...grid, ...skeleton });
+  }
+  return /* @__PURE__ */ jsx(FeatureCardGridView, { ...props });
+}
+function FeatureCardGridSkeleton({
+  count,
+  eyebrow,
+  subtitle,
+  media,
+  contentLines,
+  contentType = "h4",
+  ...grid
+}) {
+  const items = Array.from({ length: count ?? grid.columns ?? 3 }, (_, index) => ({
+    title: "",
+    eyebrow: eyebrow ? String(index + 1).padStart(2, "0") : void 0,
+    subtitle: subtitle ? "-" : void 0,
+    media: media ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: media }) : void 0,
+    content: contentLines ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: contentType, lines: contentLines, className: "w-full" }) : null
+  }));
+  return /* @__PURE__ */ jsx(FeatureCardGridView, { ...grid, items, loading: true, loadingKeepsEyebrow: eyebrow === "index" });
+}
 export {
-  FeatureCardGrid
+  FeatureCardGrid,
+  FeatureCardGridSkeleton
 };

package/dist/components/ui/feature-list.d.ts

@@ -31,6 +31,20 @@ export interface FeatureListProps {
      * (a demo jumps to that step). Omit for a list that is only read.
      */
     onSelect?: (index: number) => void;
+    /** Rows drawn while the items are read (a page's loading state, where `items` is empty). */
+    skeletonCount?: number;
 }
-export declare function FeatureList({ items, className, iconBoxSize, variant, activeIndex, accent, onSelect, }: FeatureListProps): React.JSX.Element;
+/** Rows a loading list draws when its caller names no count. */
+export declare const FEATURE_LIST_SKELETON_COUNT = 3;
+export declare function FeatureList({ items, className, iconBoxSize, variant, activeIndex, accent, onSelect, skeletonCount, }: FeatureListProps): React.JSX.Element;
+/**
+ * A FeatureList while its items are read: the same list, `count` rows. A numbered row keeps its number; a boxed
+ * row's icon is a box of the icon's frame; every title and description is a bar of its own line height.
+ */
+export declare function FeatureListSkeleton({ count, variant, iconBoxSize, className, }: {
+    count?: number;
+    variant?: FeatureListProps['variant'];
+    iconBoxSize?: number;
+    className?: string;
+}): React.JSX.Element;
 //# sourceMappingURL=feature-list.d.ts.map

package/dist/components/ui/feature-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/feature-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAc,EACd,WAAgB,EAChB,OAAiB,EACjB,WAAW,EACX,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,qBAiElB"}
+{"version":3,"file":"feature-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/feature-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,gEAAgE;AAChE,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAU7C,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAc,EACd,WAAgB,EAChB,OAAiB,EACjB,WAAW,EACX,MAAM,EACN,QAAQ,EACR,aAA2C,GAC5C,EAAE,gBAAgB,qBAsElB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAmC,EACnC,OAAiB,EACjB,WAAgB,EAChB,SAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBA0BA"}

package/dist/components/ui/feature-list.js

@@ -1,7 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "./button/index.js";
-import { NumberedStep } from "./numbered-step.js";
+import { useLoadingScope } from "./loading-scope.js";
+import { NumberedStep, NumberedStepSkeleton } from "./numbered-step.js";
+const FEATURE_LIST_SKELETON_COUNT = 3;
+const NUMBERED_LIST_CLASS = "flex flex-col gap-[var(--spacing-system-lf)]";
+const BOXED_LIST_CLASS = "flex flex-col overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg";
+const BOXED_ROW_CLASS = "flex w-full items-start gap-4 bg-ods-card p-4";
+const BOXED_ROW_DIVIDER_CLASS = "border-b border-ods-border";
+const ICON_BOX_CLASS = "flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg";
+const BOXED_TEXT_CLASS = "flex min-w-0 flex-1 flex-col gap-1";
 function FeatureList({
   items,
   className = "",
@@ -9,11 +19,16 @@ function FeatureList({
   variant = "boxed",
   activeIndex,
   accent,
-  onSelect
+  onSelect,
+  skeletonCount = FEATURE_LIST_SKELETON_COUNT
 }) {
+  const inScope = useLoadingScope();
+  if (inScope && items.length === 0) {
+    return /* @__PURE__ */ jsx(FeatureListSkeleton, { count: skeletonCount, variant, iconBoxSize, className });
+  }
   if (variant === "numbered") {
     const dims = typeof activeIndex === "number";
-    return /* @__PURE__ */ jsx("ol", { className: `flex flex-col gap-[var(--spacing-system-lf)] ${className}`, children: items.map((item, index) => {
+    return /* @__PURE__ */ jsx("ol", { className: `${NUMBERED_LIST_CLASS} ${className}`, children: items.map((item, index) => {
       const current = dims && index === activeIndex;
       const step = /* @__PURE__ */ jsx(
         NumberedStep,
@@ -43,20 +58,20 @@ function FeatureList({
       ) : step }, index);
     }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: `flex flex-col overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: `${BOXED_LIST_CLASS} ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex w-full items-start gap-4 bg-ods-card p-4 ${index < items.length - 1 ? "border-b border-ods-border" : ""}`,
+      className: `${BOXED_ROW_CLASS} ${index < items.length - 1 ? BOXED_ROW_DIVIDER_CLASS : ""}`,
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg",
+            className: ICON_BOX_CLASS,
             style: { width: iconBoxSize, height: iconBoxSize },
             children: item.icon
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: BOXED_TEXT_CLASS, children: [
           /* @__PURE__ */ jsx("p", { className: "text-ods-text-primary text-h3", children: item.title }),
           /* @__PURE__ */ jsx("p", { className: "normal-case tracking-normal text-ods-text-secondary text-h6", children: item.description })
         ] })
@@ -65,6 +80,26 @@ function FeatureList({
     index
   )) });
 }
+function FeatureListSkeleton({
+  count = FEATURE_LIST_SKELETON_COUNT,
+  variant = "boxed",
+  iconBoxSize = 72,
+  className = ""
+}) {
+  const rows = Array.from({ length: count }, (_, index) => index);
+  if (variant === "numbered") {
+    return /* @__PURE__ */ jsx("ol", { className: `${NUMBERED_LIST_CLASS} ${className}`, "aria-hidden": true, children: rows.map((index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NumberedStepSkeleton, { number: index + 1 }) }, index)) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `${BOXED_LIST_CLASS} ${className}`, "aria-hidden": true, children: rows.map((index) => /* @__PURE__ */ jsxs("div", { className: cn(BOXED_ROW_CLASS, index < count - 1 && BOXED_ROW_DIVIDER_CLASS), children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "shrink-0 rounded-[6px]", width: iconBoxSize, height: iconBoxSize }),
+    /* @__PURE__ */ jsxs("div", { className: BOXED_TEXT_CLASS, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-1/2" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-3/4" })
+    ] })
+  ] }, index)) });
+}
 export {
-  FeatureList
+  FEATURE_LIST_SKELETON_COUNT,
+  FeatureList,
+  FeatureListSkeleton
 };

package/dist/components/ui/field-wrapper.d.ts

@@ -54,6 +54,12 @@ export interface FieldWrapperProps {
     className?: string;
     children: ReactNode;
 }
+/**
+ * The id `FieldWrapper` gives its label when it names a control (`htmlFor`), so
+ * a control that a `<label for>` cannot name (a group of chips) can point at it
+ * with `aria-labelledby`.
+ */
+export declare const fieldLabelId: (htmlFor: string) => string;
 declare const FieldWrapper: import("react").ForwardRefExoticComponent<FieldWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
 export { FieldWrapper };
 //# sourceMappingURL=field-wrapper.d.ts.map

package/dist/components/ui/field-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ui/field-wrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4GAA4G;IAC5G,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD,QAAA,MAAM,YAAY,8GA6CjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"field-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ui/field-wrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4GAA4G;IAC5G,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,MAA4B,CAAC;AAS5E,QAAA,MAAM,YAAY,8GAkDjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/ui/field-wrapper.js

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
 import { Label } from "./label.js";
 import { RequiredMark } from "./required-mark.js";
+const fieldLabelId = (htmlFor) => `${htmlFor}-label`;
 const errorVariantClasses = {
   error: "text-ods-error",
   warning: "text-ods-warning",
@@ -29,10 +30,19 @@ const FieldWrapper = forwardRef(
       // Field-wrapped controls with `label=`-prop controls showed two label
       // sizes side by side — the exact inconsistency the admin editors kept
       // reporting. One label scale, owned here and in Field together.
-      /* @__PURE__ */ jsxs(Label, { className: "mb-1", htmlFor, variant: labelVariant, children: [
-        label,
-        required && /* @__PURE__ */ jsx(RequiredMark, {})
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Label,
+        {
+          id: htmlFor ? fieldLabelId(htmlFor) : void 0,
+          className: "mb-1",
+          htmlFor,
+          variant: labelVariant,
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx(RequiredMark, {})
+          ]
+        }
+      ),
       children,
       error && /* @__PURE__ */ jsx(
         "p",
@@ -50,5 +60,6 @@ const FieldWrapper = forwardRef(
 );
 FieldWrapper.displayName = "FieldWrapper";
 export {
-  FieldWrapper
+  FieldWrapper,
+  fieldLabelId
 };