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

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

@@ -10,13 +10,34 @@ import { EyeClassicIcon } from "../icons-v2-generated/interface/eye-classic-icon
 import { EyeOffClassicIcon } from "../icons-v2-generated/interface/eye-off-classic-icon.js";
 import { OpenframeLogoIcon } from "../icons-v2-generated/logos/openframe-logo-icon.js";
 import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/index.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
+import { loadingItemProps, useLoadingScope } from "./loading-scope.js";
+import { Tag } from "./tag.js";
 import { TruncateText } from "./truncate-text.js";
+const SERVICE_CARD_ROW_CLASS = "flex min-w-0 items-center gap-3";
+const SERVICE_CARD_ROW_LABEL_CLASS = "w-20 shrink-0 text-ods-text-primary text-h6 content-md:w-24";
+const SERVICE_CARD_VALUE_BOX_CLASS = "flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 content-md:px-4";
+const SERVICE_CARD_ACTIONS_CLASS = "flex flex-shrink-0 items-center gap-2 pl-3";
+function rowActions(row) {
+  return { copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions };
+}
 function MaskedValue({ value, isRevealed }) {
   if (isRevealed) return /* @__PURE__ */ jsx("span", { children: value });
   return /* @__PURE__ */ jsx("span", { children: "\u2022".repeat(Math.min(value.length, 12)) });
 }
-function ServiceCard({ title, subtitle, icon, tag, rows, className }) {
+function ServiceCard({
+  title,
+  subtitle,
+  icon,
+  tag,
+  rows,
+  loading: loadingProp,
+  className,
+  ...props
+}) {
+  const loading = useLoadingScope() || !!loadingProp;
   const resolvedIcon = icon ?? /* @__PURE__ */ jsx(
     OpenframeLogoIcon,
     {
@@ -25,90 +46,92 @@ function ServiceCard({ title, subtitle, icon, tag, rows, className }) {
       color: "var(--color-text-primary)"
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-ods-border bg-ods-card p-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-ods-border bg-ods-card p-6", className), ...loadingItemProps(props), children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [
         /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg", children: resolvedIcon }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx(TruncateText, { variant: "h3", children: title }),
-          subtitle && /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: subtitle })
+          loading && !title ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-40 max-w-full" }) : /* @__PURE__ */ jsx(TruncateText, { variant: "h3", children: title }),
+          loading && subtitle === "" ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-56 max-w-full" }) : subtitle && /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: subtitle })
         ] })
       ] }),
-      tag && /* @__PURE__ */ jsx("div", { className: "self-start whitespace-nowrap rounded-full border border-ods-border bg-ods-bg px-3 py-1 font-semibold text-ods-text-primary text-h6", children: tag.label })
+      tag && /* @__PURE__ */ jsx(Tag, { label: tag.label, variant: "outline", className: "shrink-0 self-start", loading })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((row, idx) => /* @__PURE__ */ jsx(ServiceCardRowItem, { row }, idx)) })
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((row, idx) => /* @__PURE__ */ jsx(ServiceCardRowItem, { row, loading }, idx)) })
   ] });
 }
-function ServiceCardRowItem({ row }) {
+function ServiceCardRowItem({ row, loading: loadingProp }) {
+  const loading = useLoadingScope() || loadingProp;
   const [revealed, setRevealed] = useState(false);
   const { copy, copied } = useCopyToClipboard();
   const { ref: valueRef, isTruncated: valueTruncated } = useIsTruncated(row.value);
-  const actions = useMemo(
-    () => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }),
-    [row]
-  );
+  const actions = useMemo(() => rowActions(row), [row]);
   const displayValue = row.isSecret ? /* @__PURE__ */ jsx(MaskedValue, { value: row.value, isRevealed: revealed }) : /* @__PURE__ */ jsx("span", { children: row.value });
   const handleCopy = () => copy(row.copyValue ?? row.value);
   const openInNewTab = () => {
     if (!row.href) return;
     window.open(row.href, "_blank", "noopener,noreferrer");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-    row.label && /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 text-ods-text-primary text-h6 content-md:w-24", children: row.label }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 content-md:px-4",
-          row.monospace ? "font-mono" : ""
+  const labelColumn = loading ? row.label !== void 0 : !!row.label;
+  return /* @__PURE__ */ jsxs("div", { className: SERVICE_CARD_ROW_CLASS, children: [
+    labelColumn && /* @__PURE__ */ jsx("div", { className: SERVICE_CARD_ROW_LABEL_CLASS, children: row.label || /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-full" }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn(SERVICE_CARD_VALUE_BOX_CLASS, row.monospace ? "font-mono" : ""), children: [
+      loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-40 max-w-full" }) : (
+        // No tooltip while a secret is masked — the old native `title` leaked the raw value on hover.
+        /* @__PURE__ */ jsx(
+          FloatingTooltip,
+          {
+            content: row.value,
+            side: "top",
+            disabled: !valueTruncated || row.isSecret && !revealed,
+            triggerClassName: "min-w-0",
+            className: "max-w-xs [overflow-wrap:anywhere]",
+            children: /* @__PURE__ */ jsx("div", { ref: valueRef, className: "truncate text-ods-text-primary", children: displayValue })
+          }
+        )
+      ),
+      /* @__PURE__ */ jsxs("div", { className: SERVICE_CARD_ACTIONS_CLASS, children: [
+        actions.reveal && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "transparent",
+            size: "icon-sm",
+            type: "button",
+            disabled: loading,
+            tabIndex: loading ? -1 : void 0,
+            onClick: () => setRevealed((v) => !v),
+            "aria-label": revealed ? "Hide" : "Reveal",
+            children: revealed ? /* @__PURE__ */ jsx(EyeOffClassicIcon, { className: "text-ods-text-secondary" }) : /* @__PURE__ */ jsx(EyeClassicIcon, { className: "text-ods-text-secondary" })
+          }
+        ),
+        actions.copy && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "transparent",
+            size: "icon-sm",
+            type: "button",
+            disabled: loading,
+            tabIndex: loading ? -1 : void 0,
+            onClick: handleCopy,
+            "aria-label": `Copy ${row.label || "value"}`,
+            children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-ods-success" }) : /* @__PURE__ */ jsx(Copy01Icon, { className: "text-ods-text-secondary" })
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsx(
-            FloatingTooltip,
-            {
-              content: row.value,
-              side: "top",
-              disabled: !valueTruncated || row.isSecret && !revealed,
-              triggerClassName: "min-w-0",
-              className: "max-w-xs [overflow-wrap:anywhere]",
-              children: /* @__PURE__ */ jsx("div", { ref: valueRef, className: "truncate text-ods-text-primary", children: displayValue })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-2 pl-3", children: [
-            actions.reveal && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setRevealed((v) => !v),
-                className: "rounded p-2 text-ods-text-secondary hover:bg-ods-card",
-                "aria-label": revealed ? "Hide" : "Reveal",
-                children: revealed ? /* @__PURE__ */ jsx(EyeOffClassicIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(EyeClassicIcon, { className: "h-5 w-5" })
-              }
-            ),
-            actions.copy && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: handleCopy,
-                className: cn(
-                  "rounded p-2 transition-colors hover:bg-ods-card",
-                  copied ? "text-ods-success" : "text-ods-text-secondary"
-                ),
-                "aria-label": `Copy ${row.label ?? "value"}`,
-                children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 20 }) : /* @__PURE__ */ jsx(Copy01Icon, { size: 20 })
-              }
-            ),
-            actions.open && row.href && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: openInNewTab,
-                className: "rounded p-2 text-ods-text-secondary hover:bg-ods-card",
-                "aria-label": `Open ${row.label ?? "link"}`,
-                children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-5 w-5" })
-              }
-            )
-          ] })
-        ]
-      }
-    )
+        actions.open && row.href && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "transparent",
+            size: "icon-sm",
+            type: "button",
+            disabled: loading,
+            tabIndex: loading ? -1 : void 0,
+            onClick: openInNewTab,
+            "aria-label": `Open ${row.label || "link"}`,
+            children: /* @__PURE__ */ jsx(ExternalLink, { className: "text-ods-text-secondary" })
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 export {

package/dist/components/ui/slack-channel-chip.d.ts

@@ -12,8 +12,4 @@ export interface SlackChannelChipProps {
  * Degrades gracefully: no name renders plain "Slack", no href renders unlinked.
  */
 export declare function SlackChannelChip({ name, href, className }: SlackChannelChipProps): import("react").JSX.Element;
-/** A SlackChannelChip while its channel is read: Slack's mark (static), the channel's name a bar of its line. */
-export declare function SlackChannelChipSkeleton({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
 //# sourceMappingURL=slack-channel-chip.d.ts.map

package/dist/components/ui/slack-channel-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slack-channel-chip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slack-channel-chip.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAchF;AAED,iHAAiH;AACjH,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO7E"}
+{"version":3,"file":"slack-channel-chip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slack-channel-chip.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAchF"}

package/dist/components/ui/slack-channel-chip.js

@@ -24,6 +24,5 @@ function SlackChannelChipSkeleton({ className }) {
   ] });
 }
 export {
-  SlackChannelChip,
-  SlackChannelChipSkeleton
+  SlackChannelChip
 };

package/dist/components/ui/snap-carousel.d.ts

@@ -1,12 +1,44 @@
 import { type ReactNode } from 'react';
-/**
- * The carousel's controls row while its slides load: the same box (margin and
- * height), empty. A skeleton of a carousel is its slides' skeleton over this,
- * so the block keeps its height when the slides land.
- */
-export declare function SnapCarouselControlsSkeleton({ className }: {
+/** The gap between two slides, in px (the track's and the step's). */
+export declare const SNAP_CAROUSEL_GAP_PX = 12;
+/** The track: one row of slides that snaps and scrolls sideways (read by the carousel and by a host's loading form). */
+export declare const SNAP_CAROUSEL_TRACK_CLASS = "scrollbar-hide flex snap-x snap-mandatory overflow-x-auto";
+/** One slide of the track, in the carousel's own box. A host drawing its slides' loading form uses it too. */
+export declare function SnapCarouselSlide({ className, readItem, children, ...aria }: {
     className?: string;
+    /** The slide is an item of ONE read list (`data-loading-item`). */
+    readItem?: boolean;
+    children: ReactNode;
+    'aria-label'?: string;
+    'aria-current'?: 'true';
 }): import("react").JSX.Element;
+export interface SnapCarouselControlsProps {
+    /** How many slides the track holds (one dot each). */
+    count: number;
+    /** The slide in view. Default 0. */
+    index?: number;
+    prevLabel?: string;
+    nextLabel?: string;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    /** The carousel advances by itself: the active dot fills over the wait. */
+    wait?: {
+        durationMs: number;
+        ranMs: number;
+        running: boolean;
+    } | null;
+    /** The counter is announced (`aria-live`); off while the carousel plays by itself. Default true. */
+    announce?: boolean;
+    /** The slides are read: the row draws its loading form (the dots and arrows real and inert, the counter a bar). In a
+     *  loading scope it does the same. */
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * The row under a carousel's track: a dot per slide, the counter ("2 / 5") and the two arrows. Loading, it is the
+ * same row, inert: the dots and arrows as they are (static controls), the counter (read data) a bar.
+ */
+export declare function SnapCarouselControls({ count, index, prevLabel, nextLabel, onPrevious, onNext, wait, announce, loading: loadingProp, className, }: SnapCarouselControlsProps): import("react").JSX.Element;
 export interface SnapCarouselProps<T> {
     items: readonly T[];
     renderItem: (item: T, index: number) => ReactNode;

package/dist/components/ui/snap-carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snap-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/snap-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAWjF;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEjF;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2HAA2H;IAC3H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;2HACuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,aAAoB,EACpB,cAAgC,EAChC,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,SAAiB,EACjB,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,sCAuItB"}
+{"version":3,"file":"snap-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/snap-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAajF,sEAAsE;AACtE,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,wHAAwH;AACxH,eAAO,MAAM,yBAAyB,8DAA8D,CAAC;AACrG,8GAA8G;AAC9G,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,+BAYA;AAED,MAAM,WAAW,yBAAyB;IACxC,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2EAA2E;IAC3E,IAAI,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACtE,oGAAoG;IACpG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;0CACsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,KAAS,EACT,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,MAAM,EACN,IAAW,EACX,QAAe,EACf,OAAO,EAAE,WAAmB,EAC5B,SAAS,GACV,EAAE,yBAAyB,+BA+D3B;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2HAA2H;IAC3H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;2HACuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgCD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,aAAoB,EACpB,cAAgC,EAChC,SAAsB,EACtB,SAAkB,EAClB,UAAU,EACV,SAAiB,EACjB,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,sCAmGtB"}

package/dist/components/ui/snap-carousel.js

@@ -7,11 +7,106 @@ import { useResumableTimeout } from "../../hooks/ui/use-resumable-timeout.js";
 import { cn } from "../../utils/cn.js";
 import { Chevron02LeftIcon } from "../icons-v2-generated/arrows/chevron-02-left-icon.js";
 import { Chevron02RightIcon } from "../icons-v2-generated/arrows/chevron-02-right-icon.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
+import { useLoadingScope } from "./loading-scope.js";
 const SNAP_CAROUSEL_CONTROLS_CLASS = "mt-3 flex items-center gap-2";
-function SnapCarouselControlsSkeleton({ className }) {
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn(SNAP_CAROUSEL_CONTROLS_CLASS, "h-11", className) });
+const SNAP_CAROUSEL_GAP_PX = 12;
+const SNAP_CAROUSEL_TRACK_CLASS = "scrollbar-hide flex snap-x snap-mandatory overflow-x-auto";
+function SnapCarouselSlide({
+  className,
+  readItem = false,
+  children,
+  ...aria
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      ...aria,
+      className: cn("flex shrink-0 grow-0 snap-start", className),
+      "data-loading-item": readItem || void 0,
+      children: /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
+    }
+  );
+}
+function SnapCarouselControls({
+  count,
+  index = 0,
+  prevLabel = "Previous",
+  nextLabel = "Next",
+  onPrevious,
+  onNext,
+  wait = null,
+  announce = true,
+  loading: loadingProp = false,
+  className
+}) {
+  const loading = useLoadingScope() || loadingProp;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(SNAP_CAROUSEL_CONTROLS_CLASS, className),
+      "aria-hidden": loading || void 0,
+      inert: loading || void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex gap-1.5", "aria-hidden": true, children: Array.from({ length: count }, (_, dotIndex) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative h-1.5 overflow-hidden rounded-full transition-[width] duration-200 motion-reduce:transition-none",
+              dotIndex === index ? "w-6" : "w-1.5",
+              // A carousel that never advances by itself marks its slide with a whole dot.
+              dotIndex === index && !wait ? "bg-ods-text-primary" : "bg-ods-border"
+            ),
+            children: dotIndex === index && wait && // Re-keyed per slide so a NEW slide starts from empty; a pause keeps its place.
+            /* @__PURE__ */ jsx(DotFill, { durationMs: wait.durationMs, ranMs: wait.ranMs, running: wait.running }, index)
+          },
+          dotIndex
+        )) }),
+        loading ? /* @__PURE__ */ jsx("span", { className: "ml-auto mr-1", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-10" }) }) : /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "ml-auto mr-1 whitespace-nowrap text-ods-text-secondary text-h5",
+            "aria-live": announce ? "polite" : "off",
+            children: [
+              index + 1,
+              " / ",
+              count
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            type: "button",
+            "aria-label": prevLabel,
+            disabled: loading || index === 0,
+            onClick: onPrevious,
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            type: "button",
+            "aria-label": nextLabel,
+            disabled: loading || index === count - 1,
+            onClick: onNext,
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Chevron02RightIcon, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
 }
-const GAP_PX = 12;
 function DotFill({ durationMs, ranMs, running }) {
   const [going, setGoing] = useState(false);
   useEffect(() => {
@@ -55,7 +150,7 @@ function SnapCarousel({
   const count = items.length;
   const slideStep = useCallback(() => {
     const first = trackRef.current?.firstElementChild;
-    return first ? first.offsetWidth + GAP_PX : 0;
+    return first ? first.offsetWidth + SNAP_CAROUSEL_GAP_PX : 0;
   }, []);
   const goTo = useCallback(
     (next) => {
@@ -106,76 +201,40 @@ function SnapCarousel({
         role: "group",
         "aria-roledescription": "carousel",
         "aria-label": label,
-        className: "scrollbar-hide flex snap-x snap-mandatory overflow-x-auto",
-        style: { gap: GAP_PX },
+        className: SNAP_CAROUSEL_TRACK_CLASS,
+        style: { gap: SNAP_CAROUSEL_GAP_PX },
         children: items.map((item, itemIndex) => /* @__PURE__ */ jsx(
-          "div",
+          SnapCarouselSlide,
           {
-            role: "group",
-            "aria-roledescription": "slide",
             "aria-label": `${itemIndex + 1} / ${count}`,
             "aria-current": itemIndex === index ? "true" : void 0,
-            className: cn("flex shrink-0 grow-0 snap-start", slideClassName),
-            "data-loading-item": readItems || void 0,
-            children: /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderItem(item, itemIndex) })
+            className: slideClassName,
+            readItem: readItems,
+            children: renderItem(item, itemIndex)
           },
           getKey ? getKey(item, itemIndex) : itemIndex
         ))
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: SNAP_CAROUSEL_CONTROLS_CLASS, children: [
-      /* @__PURE__ */ jsx("span", { className: "flex gap-1.5", "aria-hidden": true, children: items.map((_, dotIndex) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "relative h-1.5 overflow-hidden rounded-full transition-[width] duration-200 motion-reduce:transition-none",
-            dotIndex === index ? "w-6" : "w-1.5",
-            // A carousel that never advances by itself marks its slide with a whole dot.
-            dotIndex === index && !showsWait ? "bg-ods-text-primary" : "bg-ods-border"
-          ),
-          children: dotIndex === index && showsWait && // Re-keyed per slide so a NEW slide starts from empty; a pause keeps its place.
-          /* @__PURE__ */ jsx(DotFill, { durationMs: autoAdvanceMs, ranMs, running: playing }, index)
-        },
-        dotIndex
-      )) }),
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "ml-auto mr-1 whitespace-nowrap text-ods-text-secondary text-h5",
-          "aria-live": playing ? "off" : "polite",
-          children: [
-            index + 1,
-            " / ",
-            count
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": prevLabel,
-          disabled: index === 0,
-          onClick: () => goTo(index - 1),
-          className: "grid h-11 w-11 shrink-0 place-items-center rounded-full border border-ods-border text-ods-text-primary outline-none transition-colors hover:bg-ods-card focus-visible:ring-2 focus-visible:ring-ods-focus disabled:cursor-default disabled:text-ods-text-secondary disabled:opacity-50 disabled:hover:bg-transparent",
-          children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 20 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": nextLabel,
-          disabled: index === count - 1,
-          onClick: () => goTo(index + 1),
-          className: "grid h-11 w-11 shrink-0 place-items-center rounded-full border border-ods-border text-ods-text-primary outline-none transition-colors hover:bg-ods-card focus-visible:ring-2 focus-visible:ring-ods-focus disabled:cursor-default disabled:text-ods-text-secondary disabled:opacity-50 disabled:hover:bg-transparent",
-          children: /* @__PURE__ */ jsx(Chevron02RightIcon, { size: 20 })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(
+      SnapCarouselControls,
+      {
+        count,
+        index,
+        prevLabel,
+        nextLabel,
+        onPrevious: () => goTo(index - 1),
+        onNext: () => goTo(index + 1),
+        wait: showsWait ? { durationMs: autoAdvanceMs, ranMs, running: playing } : null,
+        announce: !playing
+      }
+    )
   ] });
 }
 export {
+  SNAP_CAROUSEL_GAP_PX,
+  SNAP_CAROUSEL_TRACK_CLASS,
   SnapCarousel,
-  SnapCarouselControlsSkeleton
+  SnapCarouselControls,
+  SnapCarouselSlide
 };

package/dist/components/ui/square-avatar.d.ts

@@ -19,9 +19,10 @@ interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
      *  defaults (`text-xs font-medium text-ods-text-primary`) via tailwind-merge,
      *  so callers can shrink/recolor the initials for compact avatars. */
     initialsClassName?: string;
+    /** The person is still being read: the avatar draws its skeleton (its own size and corner) and fetches no image.
+     *  A loading scope does the same. */
+    loading?: boolean;
 }
 declare const SquareAvatar: import("react").NamedExoticComponent<SquareAvatarProps & import("react").RefAttributes<HTMLDivElement>>;
 export { SquareAvatar };
-/** A SquareAvatar while its person is read: a box of the avatar's own size and corner. */
-export declare function SquareAvatarSkeleton({ size, sizePx, variant, className, }: Pick<SquareAvatarProps, 'size' | 'sizePx' | 'variant' | 'className'>): import("react").JSX.Element;
 //# sourceMappingURL=square-avatar.d.ts.map

package/dist/components/ui/square-avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"square-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/square-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAoB,MAAM,OAAO,CAAC;AAS9D,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;2EACuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;0EAEsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD,QAAA,MAAM,YAAY,yGA4FjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,0FAA0F;AAC1F,wBAAgB,oBAAoB,CAAC,EACnC,IAAW,EACX,MAAM,EACN,OAAkB,EAClB,SAAS,GACV,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC,+BAatE"}
+{"version":3,"file":"square-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/square-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAoB,MAAM,OAAO,CAAC;AAS9D,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;2EACuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;0EAEsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;yCACqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAQD,QAAA,MAAM,YAAY,yGAuGjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/ui/square-avatar.js

@@ -7,7 +7,7 @@ import { AVATAR_SIZE, AVATAR_SIZE_PX } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { personInitials } from "../../utils/format.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
-import { useLoadingScope } from "./loading-scope.js";
+import { loadingItemProps, useLoadingScope } from "./loading-scope.js";
 const SQUARE_AVATAR_VARIANT_CLASS = {
   square: "rounded-md",
   round: "rounded-full"
@@ -24,13 +24,24 @@ const SquareAvatar = memo(
       fallback,
       variant = "square",
       initialsClassName,
+      loading,
       style,
       ...props
     }, ref) => {
-      const held = useLoadingScope();
+      const inScope = useLoadingScope();
+      const held = inScope || !!loading;
       const authedSrc = useAuthedImageSrc(held ? void 0 : src);
       if (held) {
-        return /* @__PURE__ */ jsx(SquareAvatarSkeleton, { size, sizePx, variant, className });
+        return /* @__PURE__ */ jsx(
+          SquareAvatarSkeleton,
+          {
+            size,
+            sizePx,
+            variant,
+            className,
+            ...loadingItemProps(props)
+          }
+        );
       }
       const resolvedSrc = authedSrc;
       const sizeClasses = AVATAR_SIZE;
@@ -107,11 +118,13 @@ function SquareAvatarSkeleton({
   size = "md",
   sizePx,
   variant = "square",
-  className
+  className,
+  ...props
 }) {
   return /* @__PURE__ */ jsx(
     UnifiedSkeleton,
     {
+      ...loadingItemProps(props),
       className: cn(
         "shrink-0",
         sizePx === void 0 && AVATAR_SIZE[size],
@@ -124,6 +137,5 @@ function SquareAvatarSkeleton({
   );
 }
 export {
-  SquareAvatar,
-  SquareAvatarSkeleton
+  SquareAvatar
 };

package/dist/components/ui/stacked-rows-panel.d.ts

@@ -23,9 +23,11 @@ export interface PanelColumn {
     key: string;
     /** Custom cell content (tag, avatar + text, button…). Takes precedence over `value`/`label`. */
     content?: ReactNode;
-    /** Primary value rendered in the ODS h4 style when `content` is not set. */
+    /** Primary value rendered in the ODS h4 style when `content` is not set. `null` is a value still being read: in a
+     *  loading scope the cell draws it as an `h4` bar (outside one, nothing). */
     value?: ReactNode;
-    /** Secondary label rendered under the value (ODS h6, secondary colour); a node for inline emphasis. */
+    /** Secondary label rendered under the value (ODS h6, secondary colour); a node for inline emphasis. `null` is a label
+     *  still being read: in a loading scope the cell draws it as an `h6` bar (outside one, nothing). */
     label?: ReactNode;
     /** Let the value AND label WRAP instead of truncating to one line (full names, full sentences). */
     wrap?: boolean;
@@ -58,29 +60,25 @@ export interface StackedRowsPanelProps {
     /** Optional uppercase caption rendered above the card. */
     title?: string;
     className?: string;
-    /** The shape drawn while the rows are read (a page's loading state, where `rows` is empty). */
-    skeleton?: StackedRowsPanelSkeletonShape;
+    /** The shape drawn while the rows are read (a page's loading state, where `rows` is empty): how many rows (default
+     *  3), how many value/label columns each carries (default 1, a full-width title/caption row), and whether each cell
+     *  carries a label under its value (default `true`). */
+    skeleton?: {
+        rows?: number;
+        columns?: number;
+        labels?: boolean;
+    };
     /**
-     * The rows are a read list (how many there are is the data's, and a loading state draws a fold of them): every
-     * row carries `data-loading-item`. Default false (a panel of fixed fields).
+     * The rows are a read list (how many there are is the data's; the loading state draws `loadingRows` of them):
+     * every row carries `data-loading-item`, in both forms. Default false (a panel of fixed fields).
      */
     listItems?: boolean;
+    /** The rows are still being read (a client read): the panel draws its rows' loading form, `rows` is ignored. A
+     *  loading scope does the same while `rows` is empty. */
+    loading?: boolean;
+    /** How many rows the loading form draws: the list's page size, limit or declared typical constant. Default
+     *  `skeleton.rows`, else 3. */
+    loadingRows?: number;
 }
-/** How many rows a loading panel draws, and how many value/label columns each carries. */
-export interface StackedRowsPanelSkeletonShape {
-    /** Rows drawn. Default {@link STACKED_ROWS_SKELETON_COUNT}. */
-    rows?: number;
-    /** Columns per row; one is a full-width title/caption row. Default 1. */
-    columns?: number;
-    /** Each cell carries a label under its value. Default `true`. */
-    labels?: boolean;
-}
-/** Rows a loading panel draws when its caller names no count. */
-export declare const STACKED_ROWS_SKELETON_COUNT = 3;
-export declare function StackedRowsPanel({ rows, title, className, skeleton, listItems }: StackedRowsPanelProps): import("react").JSX.Element;
-/**
- * A StackedRowsPanel while its rows are read: the same card and row heights, each cell's value a `text-h4` bar
- * over its label's `text-h6` bar. The title above the card is the page's own and draws as it is.
- */
-export declare function StackedRowsPanelSkeleton({ rows, columns, labels, title, className, listItems, }: StackedRowsPanelSkeletonShape & Pick<StackedRowsPanelProps, 'title' | 'className' | 'listItems'>): import("react").JSX.Element;
+export declare function StackedRowsPanel({ rows, title, className, skeleton, listItems, loading: loadingProp, loadingRows, }: StackedRowsPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=stacked-rows-panel.d.ts.map