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

package/dist/components/faq/faq-document-page.js

@@ -16,6 +16,8 @@ function FaqDocumentPage({
   minResults,
   topic,
   ask,
+  skeletonShape,
+  skeletonNav,
   shell = true
 }) {
   const router = useRouter();
@@ -35,7 +37,9 @@ function FaqDocumentPage({
       entityId,
       minResults,
       topic,
-      ask
+      ask,
+      skeletonShape,
+      skeletonNav
     }
   ) });
   return shell ? /* @__PURE__ */ jsx(PageShell, { children: inner }) : /* @__PURE__ */ jsx("div", { className: "page-shell-content", children: inner });

package/dist/components/faq/faq-section.d.ts

@@ -70,7 +70,33 @@ export interface FaqSectionProps {
      * (`onOpen`). An `aside` takes the card's place.
      */
     ask?: false | FaqAskOptions;
+    /**
+     * The loading state's groups of questions, in order: THE one way to say what the skeleton draws (see
+     * `FaqSkeletonShape`). Absent: one group with no category heading, of `minResults` rows (else one screen of rows).
+     */
+    skeletonShape?: FaqSkeletonShape;
+    /**
+     * The host's FAQs fall into named categories, so the loaded block draws its category nav (the platform's full,
+     * categorised list): the loading state draws the nav's row too, so what follows it (the ask card) does not move.
+     * Default false (a nav only when `skeletonShape` names two or more categories).
+     */
+    skeletonNav?: boolean;
 }
+/** Questions the block's skeleton draws when the host states no count (`minResults`): one screen of the accordion's rows. */
+export declare const FAQ_SECTION_SKELETON_QUESTIONS = 12;
+/** One group of questions the FAQ's loading state draws. */
+export interface FaqSkeletonGroup {
+    /** The group is a named category: drawn with its heading bar (and counted for the category nav). Default false. */
+    heading?: boolean;
+    /** Question rows the group draws. Default `FAQ_SECTION_SKELETON_QUESTIONS`, one screen of rows. */
+    rows?: number;
+}
+/**
+ * What the FAQ's loading state draws, group by group in order: the one shape `FaqSection`, `FaqSectionSkeleton`,
+ * `FaqDocumentPage` and `TrustCenterPage` take. Stated by the host from what it knows before the read (its FAQs are
+ * filed in categories, the server's page size), never copied from today's FAQs.
+ */
+export type FaqSkeletonShape = readonly FaqSkeletonGroup[];
 /** The id of a page's own FAQ block: what a page's "FAQ" link or section nav points at. */
 export declare const PAGE_FAQ_SECTION_ID = "faq";
 /**
@@ -103,5 +129,12 @@ export declare function pageFaqProps(faq: PageFaqSlot): FaqSectionProps;
  * disfigured. The host always supplies the page shell — this renders a bare
  * <section>.
  */
-export declare function FaqSection({ initialFaqs, entityType, entityId, topic, heading, emitJsonLd, jsonLd, className, id, showTopic, minResults, apiBaseUrl, aside: asideProp, ask, }: FaqSectionProps): React.JSX.Element | null;
+export declare function FaqSection({ initialFaqs, entityType, entityId, topic, heading, emitJsonLd, jsonLd, className, id, showTopic, minResults, apiBaseUrl, aside: asideProp, ask, skeletonShape, skeletonNav, }: FaqSectionProps): React.JSX.Element | null;
+export interface FaqSectionSkeletonProps extends Pick<FaqSectionProps, 'heading' | 'topic' | 'showTopic' | 'aside' | 'className' | 'id'> {
+    /** The groups drawn, in order. Default one group with no heading, of one screen of rows. */
+    shape?: FaqSkeletonShape;
+    /** Draw the category nav's row (one line of pills) whatever `sections` is: the host's FAQs are categorised. */
+    navRow?: boolean;
+}
+export declare function FaqSectionSkeleton({ heading, topic, showTopic, aside, shape, navRow, className, id, }: FaqSectionSkeletonProps): React.JSX.Element;
 //# sourceMappingURL=faq-section.d.ts.map

package/dist/components/faq/faq-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"faq-section.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAU3C,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAA0B,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE1E,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC;uCACmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kIAAkI;IAClI,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;6CACyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;uCACmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;;;;OAUG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CAC7B;AAID,2FAA2F;AAC3F,eAAO,MAAM,mBAAmB,QAAQ,CAAC;AAKzC;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,eAAe,EACf,YAAY,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,GAAG,WAAW,CACzF,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtB,8GAA8G;AAC9G,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,GAAG,eAAe,CAE9D;AAwUD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,EAAE,EACF,SAAiB,EACjB,UAAU,EACV,UAAe,EACf,KAAK,EAAE,SAAS,EAChB,GAAG,GACJ,EAAE,eAAe,4BA8EjB"}
+{"version":3,"file":"faq-section.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-section.tsx"],"names":[],"mappings":"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"}

package/dist/components/faq/faq-section.js

@@ -10,13 +10,61 @@ import { serializeJsonLd } from "../../utils/common.js";
 import { faqSectionSlug, parseFaqHash } from "../../utils/faq-anchor.js";
 import { navigateSamePageHash, STICKY_HEADER_OFFSET_PX } from "../../utils/same-page-hash-nav.js";
 import { buildSuggestionUrl } from "../../utils/suggestion-url.js";
-import { FaqAccordion } from "../faq-accordion.js";
+import { FAQ_ACCORDION_SKELETON_ROWS, FaqAccordion, FaqAccordionSkeleton } from "../faq-accordion.js";
 import { SECTION_HEADING_CLASS } from "../layout/page-heading.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { FaqAskCard, faqAskCardShown } from "./faq-ask-card.js";
 import { buildFaqJsonLdFromFaqs } from "./json-ld.js";
 const DEFAULT_HEADING_TEXT = "Frequently Asked Questions";
+const SECTION_DEFAULT_CLASS = "space-y-10";
+const NAV_ABOVE_QUESTIONS_CLASS = "pb-8";
+const NAV_BELOW_HEADING_CLASS = "pt-8";
+const QUESTIONS_STACK_CLASS = "space-y-10";
+const ASIDE_GRID_CLASS = "grid grid-cols-1 gap-10 content-lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] content-lg:grid-rows-[auto_1fr] content-lg:gap-x-16";
+const ASIDE_QUESTIONS_CELL_CLASS = "content-lg:col-start-2 content-lg:row-span-2 content-lg:row-start-1";
+const ASIDE_CELL_CLASS = "content-lg:col-start-1 content-lg:row-start-2";
+const TOPIC_STACK_CLASS = "space-y-1";
+const TOPIC_CLASS = "text-ods-text-muted text-h6";
+const CATEGORY_NAV_CLASS = "flex flex-wrap gap-2";
+const CATEGORY_NAV_SKELETON_LINE_CLASS = "flex min-w-0 flex-nowrap gap-2 overflow-hidden";
+const FAQ_NAV_SKELETON_PILLS = 8;
+const CATEGORY_PILL_CLASS = "rounded-full border px-4 py-2 transition-colors text-h6";
+const CATEGORY_SECTION_CLASS = "scroll-mt-24";
+const CATEGORY_HEADING_CLASS = cn(SECTION_HEADING_CLASS, "pb-4");
+const FAQ_SECTION_SKELETON_QUESTIONS = FAQ_ACCORDION_SKELETON_ROWS;
+function FaqLayout({
+  heading,
+  nav,
+  navDeclared = false,
+  questions,
+  aside
+}) {
+  const optional = navDeclared ? void 0 : true;
+  if (!aside) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      nav && /* @__PURE__ */ jsx("div", { className: NAV_ABOVE_QUESTIONS_CLASS, "data-loading-optional": optional, children: nav }),
+      questions
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: ASIDE_GRID_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      heading,
+      nav && /* @__PURE__ */ jsx("div", { className: NAV_BELOW_HEADING_CLASS, "data-loading-optional": optional, children: nav })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: ASIDE_QUESTIONS_CELL_CLASS, children: questions }),
+    /* @__PURE__ */ jsx("div", { className: ASIDE_CELL_CLASS, children: aside })
+  ] });
+}
+function faqHeadingNode(heading, showTopic, topic) {
+  const titleNode = heading === void 0 ? /* @__PURE__ */ jsx("h2", { className: SECTION_HEADING_CLASS, children: DEFAULT_HEADING_TEXT }) : heading;
+  if (!(showTopic && topic)) return titleNode;
+  return /* @__PURE__ */ jsxs("div", { className: TOPIC_STACK_CLASS, children: [
+    /* @__PURE__ */ jsx("div", { children: titleNode }),
+    /* @__PURE__ */ jsx("p", { className: TOPIC_CLASS, children: topic })
+  ] });
+}
 const PAGE_FAQ_SECTION_ID = "faq";
 const PAGE_FAQ_IN_PAGE_CLASS = "space-y-10 pt-12 md:pt-20";
 function pageFaqProps(faq) {
@@ -60,7 +108,8 @@ function GroupedFaqList({
   groups,
   categoryHeadingAs,
   heading,
-  aside
+  aside,
+  navDeclared
 }) {
   const CategoryHeading = categoryHeadingAs;
   const navGroups = useMemo(() => groups.filter((g) => g.slug), [groups]);
@@ -130,7 +179,7 @@ function GroupedFaqList({
       history: "replace"
     });
   }, []);
-  const categoryNav = navGroups.length > 1 && /* @__PURE__ */ jsx("nav", { "aria-label": "FAQ categories", className: "flex flex-wrap gap-2", children: navGroups.map((group) => {
+  const categoryNav = navGroups.length > 1 && /* @__PURE__ */ jsx("nav", { "aria-label": "FAQ categories", className: CATEGORY_NAV_CLASS, children: navGroups.map((group) => {
     const isActive = group.slug === activeSlug;
     return /* @__PURE__ */ jsx(
       Link,
@@ -139,7 +188,7 @@ function GroupedFaqList({
         "aria-current": isActive ? "true" : void 0,
         onClick: (e) => handleJump(e, group.slug),
         className: cn(
-          "rounded-full border px-4 py-2 transition-colors text-h6",
+          CATEGORY_PILL_CLASS,
           isActive ? "border-ods-text-primary bg-ods-card text-ods-text-primary" : "border-ods-border bg-ods-card text-ods-text-secondary hover:border-ods-text-secondary hover:text-ods-text-primary"
         ),
         children: group.section
@@ -147,45 +196,31 @@ function GroupedFaqList({
       group.slug
     );
   }) });
-  const questions = /* @__PURE__ */ jsx("div", { className: "space-y-10", children: groups.map((group) => {
+  const questions = /* @__PURE__ */ jsx("div", { className: QUESTIONS_STACK_CLASS, children: groups.map((group) => {
     const key = groupKey(group);
-    return /* @__PURE__ */ jsxs("section", { id: group.slug ?? void 0, className: "scroll-mt-24 space-y-4", children: [
-      group.section && /* @__PURE__ */ jsx(CategoryHeading, { className: SECTION_HEADING_CLASS, children: group.section }),
-      /* @__PURE__ */ jsx(
-        FaqAccordion,
-        {
-          items: group.items,
-          defaultOpenIds: defaultOpenByGroupKey?.get(key)
-        },
-        `${key}:${accordionKeySuffix}`
-      )
-    ] }, key);
+    return (
+      // A category is a record's group: how many there are is the data's (`data-loading-item`, like a list row).
+      /* @__PURE__ */ jsxs("section", { id: group.slug ?? void 0, className: CATEGORY_SECTION_CLASS, "data-loading-item": true, children: [
+        group.section && /* @__PURE__ */ jsx(
+          CategoryHeading,
+          {
+            className: CATEGORY_HEADING_CLASS,
+            "data-loading-optional": navDeclared ? void 0 : true,
+            children: group.section
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FaqAccordion,
+          {
+            items: group.items,
+            defaultOpenIds: defaultOpenByGroupKey?.get(key)
+          },
+          `${key}:${accordionKeySuffix}`
+        )
+      ] }, key)
+    );
   }) });
-  if (!aside) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
-      categoryNav,
-      questions
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-10 content-lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] content-lg:grid-rows-[auto_1fr] content-lg:gap-x-16", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
-      heading,
-      categoryNav
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "content-lg:col-start-2 content-lg:row-span-2 content-lg:row-start-1", children: questions }),
-    /* @__PURE__ */ jsx("div", { className: "content-lg:col-start-1 content-lg:row-start-2", children: aside })
-  ] });
-}
-function FaqSkeleton({
-  region = true
-} = {}) {
-  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading questions", announce: region, className: "space-y-8", children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-2/3 rounded content-md:h-14" }),
-    /* @__PURE__ */ jsx("div", { className: "w-full divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent", children: Array.from({ length: 8 }).map((_, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-6 px-6 py-4 content-md:gap-10", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-5/6 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-6 rounded" })
-    ] }, idx)) })
-  ] });
+  return /* @__PURE__ */ jsx(FaqLayout, { heading, nav: categoryNav, navDeclared, questions, aside });
 }
 function FaqSection({
   initialFaqs,
@@ -201,9 +236,12 @@ function FaqSection({
   minResults,
   apiBaseUrl = "",
   aside: asideProp,
-  ask
+  ask,
+  skeletonShape,
+  skeletonNav = false
 }) {
   const assistant = useAssistantRuntime();
+  const inScope = useLoadingScope();
   const askTopic = ask === false ? void 0 : ask?.topic || topic || entityType;
   const aside = asideProp ?? (ask !== false && askTopic && faqAskCardShown(assistant) ? /* @__PURE__ */ jsx(FaqAskCard, { ...ask, topic: askTopic }) : void 0);
   const url = buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl, topic);
@@ -211,28 +249,31 @@ function FaqSection({
     () => initialFaqs ? { faqs: initialFaqs } : void 0,
     [initialFaqs]
   );
-  const { data, dataUrl, isLoading, error } = useSelfFetch(url, { initialData });
+  const { data, dataUrl, isLoading, error } = useSelfFetch(inScope ? null : url, { initialData });
   const held = dataUrl === url ? data?.faqs : void 0;
   const faqs = useMemo(() => held ?? [], [held]);
   const groups = useMemo(() => faqs.length > 0 ? groupFaqsBySection(faqs) : [], [faqs]);
-  const titleNode = heading === void 0 ? /* @__PURE__ */ jsx("h2", { className: SECTION_HEADING_CLASS, children: DEFAULT_HEADING_TEXT }) : heading;
-  const headingNode = showTopic && topic ? (
-    // The host's heading may arrive from a server component, still streaming: React cannot check such a
-    // node when it sits in a list of siblings and warns about a missing key. So it is the ONLY child of its
-    // own wrapper, and the two siblings here are this component's own elements.
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("div", { children: titleNode }),
-      /* @__PURE__ */ jsx("p", { className: "text-ods-text-muted text-h6", children: topic })
-    ] })
-  ) : titleNode;
+  const headingNode = faqHeadingNode(heading, showTopic, topic);
   if (error) return null;
-  if (!isLoading && faqs.length === 0) return null;
-  if (isLoading && faqs.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(FaqSkeleton, {}) });
+  if (inScope || isLoading && faqs.length === 0) {
+    return /* @__PURE__ */ jsx(
+      FaqSectionSkeleton,
+      {
+        heading,
+        topic,
+        showTopic,
+        aside,
+        shape: skeletonShape ?? [{ rows: minResults }],
+        navRow: skeletonNav,
+        className,
+        id
+      }
+    );
   }
+  if (faqs.length === 0) return null;
   const schema = emitJsonLd ? buildFaqJsonLdFromFaqs(faqs, jsonLd) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("section", { id, "data-faq-topic": topic, className: className ?? "space-y-10", children: [
+    /* @__PURE__ */ jsxs("section", { id, "data-faq-topic": topic, className: className ?? SECTION_DEFAULT_CLASS, children: [
       !aside && headingNode,
       /* @__PURE__ */ jsx(
         GroupedFaqList,
@@ -240,7 +281,8 @@ function FaqSection({
           groups,
           categoryHeadingAs: heading === null ? "h2" : "h3",
           heading: aside ? headingNode : void 0,
-          aside
+          aside,
+          navDeclared: skeletonNav
         }
       )
     ] }),
@@ -253,8 +295,53 @@ function FaqSection({
     )
   ] });
 }
+const DEFAULT_SKELETON_SHAPE = [{}];
+function FaqSectionSkeleton({
+  heading,
+  topic,
+  showTopic = false,
+  aside,
+  shape = DEFAULT_SKELETON_SHAPE,
+  navRow = false,
+  className,
+  id
+}) {
+  const headingNode = faqHeadingNode(heading, showTopic, topic);
+  const CategoryHeading = heading === null ? "h2" : "h3";
+  const groups = shape.length > 0 ? shape : DEFAULT_SKELETON_SHAPE;
+  const named = groups.filter((group) => group.heading).length;
+  const pill = (i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton pills never reorder
+    /* @__PURE__ */ jsx("span", { className: cn(CATEGORY_PILL_CLASS, "shrink-0 border-ods-border bg-ods-card"), children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }, i)
+  );
+  const nav = navRow ? /* @__PURE__ */ jsx("div", { className: CATEGORY_NAV_SKELETON_LINE_CLASS, "aria-hidden": true, children: Array.from({ length: FAQ_NAV_SKELETON_PILLS }, (_, i) => pill(i)) }) : named > 1 ? /* @__PURE__ */ jsx("div", { className: CATEGORY_NAV_CLASS, "aria-hidden": true, children: Array.from({ length: named }, (_, i) => pill(i)) }) : void 0;
+  const questions = /* @__PURE__ */ jsx("div", { className: QUESTIONS_STACK_CLASS, children: groups.map((group, index) => {
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton groups never reorder
+      /* @__PURE__ */ jsxs("section", { className: CATEGORY_SECTION_CLASS, "data-loading-item": true, children: [
+        group.heading && /* @__PURE__ */ jsx(CategoryHeading, { className: CATEGORY_HEADING_CLASS, "data-loading-optional": navRow ? void 0 : true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/3" }) }),
+        /* @__PURE__ */ jsx(FaqAccordionSkeleton, { count: Math.max(1, group.rows ?? FAQ_SECTION_SKELETON_QUESTIONS) })
+      ] }, index)
+    );
+  }) });
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading questions", children: /* @__PURE__ */ jsxs("section", { id, "data-faq-topic": topic, className: className ?? SECTION_DEFAULT_CLASS, children: [
+    !aside && headingNode,
+    /* @__PURE__ */ jsx(
+      FaqLayout,
+      {
+        heading: aside ? headingNode : void 0,
+        nav,
+        navDeclared: navRow,
+        questions,
+        aside
+      }
+    )
+  ] }) });
+}
 export {
+  FAQ_SECTION_SKELETON_QUESTIONS,
   FaqSection,
+  FaqSectionSkeleton,
   PAGE_FAQ_SECTION_ID,
   pageFaqProps
 };

package/dist/components/faq/index.cjs

@@ -1,32 +1,34 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkJD7CL2I6cjs = require('../../chunk-JD7CL2I6.cjs');
+var _chunkJGWN6GH5cjs = require('../../chunk-JGWN6GH5.cjs');
 
 
 
 
 
-var _chunk3FC6AKEJcjs = require('../../chunk-3FC6AKEJ.cjs');
-require('../../chunk-VL6IXTAI.cjs');
-require('../../chunk-ZCU2PYCW.cjs');
-require('../../chunk-GY2JESOC.cjs');
-require('../../chunk-2IFCRPNP.cjs');
+
+
+var _chunkHNQRY6RUcjs = require('../../chunk-HNQRY6RU.cjs');
+require('../../chunk-VRDHAR3X.cjs');
+require('../../chunk-MPTMT773.cjs');
+require('../../chunk-RB7VLVMD.cjs');
+require('../../chunk-ZV45VS6K.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-XCH7SPGI.cjs');
-require('../../chunk-FQSXZC2K.cjs');
+require('../../chunk-XVFM6SJA.cjs');
+require('../../chunk-2JRSYWFP.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-RO72PRQI.cjs');
-require('../../chunk-YUMFVQIN.cjs');
-require('../../chunk-T5FRANE6.cjs');
-require('../../chunk-74ALTXXC.cjs');
-require('../../chunk-BIA77I6B.cjs');
-require('../../chunk-3RFQPQ7Z.cjs');
-require('../../chunk-GZKWF6NH.cjs');
-require('../../chunk-EFTUFJS2.cjs');
+require('../../chunk-ZRDMGMY7.cjs');
+require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-7VI7TOGI.cjs');
+require('../../chunk-YL6ZB2SR.cjs');
+require('../../chunk-GTONIRJU.cjs');
+require('../../chunk-RNLRS4ID.cjs');
+require('../../chunk-XZ6DKGT4.cjs');
+require('../../chunk-LELS4XMX.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1815,20 +1817,20 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-NET74KSQ.cjs');
-require('../../chunk-3RYIF4OW.cjs');
-require('../../chunk-SVP6DJFL.cjs');
+require('../../chunk-TZ4GKUO2.cjs');
+require('../../chunk-XXJL5GY3.cjs');
+require('../../chunk-57B5RUYD.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-NS64LMVE.cjs');
-require('../../chunk-22XAPV6N.cjs');
-require('../../chunk-OJJ4RL2T.cjs');
-require('../../chunk-63N4FN5V.cjs');
-require('../../chunk-M7YZGRAV.cjs');
-require('../../chunk-EQZXJUYV.cjs');
+require('../../chunk-FZB4RMRK.cjs');
+require('../../chunk-DGNBXZXT.cjs');
+require('../../chunk-R3JX4MXD.cjs');
+require('../../chunk-SETFUCZA.cjs');
+require('../../chunk-AAECWUNV.cjs');
+require('../../chunk-JTSUAHDL.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1837,33 +1839,31 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-I5MSCD57.cjs');
+require('../../chunk-3LW5TD54.cjs');
 require('../../chunk-ASMNNSUQ.cjs');
 require('../../chunk-CW3ML76U.cjs');
-require('../../chunk-MWLD6NXV.cjs');
-require('../../chunk-R3TWQ3ZJ.cjs');
+require('../../chunk-VFZFCRAL.cjs');
+require('../../chunk-5P4TDV7V.cjs');
 require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-HOTM4UM6.cjs');
+require('../../chunk-E76ONBKF.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-HTRILBJD.cjs');
-require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-AKK3EO37.cjs');
+require('../../chunk-YXDHVHB2.cjs');
+require('../../chunk-FL2RMEDX.cjs');
+require('../../chunk-XIFEZ2JT.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-NO5UJLLQ.cjs');
-require('../../chunk-2QMBXGMQ.cjs');
+require('../../chunk-WEANWBJH.cjs');
+require('../../chunk-XFRBEXQN.cjs');
+require('../../chunk-TF5D5MNO.cjs');
 require('../../chunk-V45KLJQP.cjs');
+require('../../chunk-65VVJSQZ.cjs');
 require('../../chunk-KHKPLOU4.cjs');
-require('../../chunk-L4UI63K6.cjs');
-require('../../chunk-OF336YWG.cjs');
-require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-RB6BSE3O.cjs');
-require('../../chunk-H3RYUTND.cjs');
-require('../../chunk-3ATAYP36.cjs');
 
 
 
 
 
 
-exports.FaqAskCard = _chunk3FC6AKEJcjs.FaqAskCard; exports.FaqDocumentPage = _chunkJD7CL2I6cjs.FaqDocumentPage; exports.FaqSection = _chunk3FC6AKEJcjs.FaqSection; exports.PAGE_FAQ_SECTION_ID = _chunk3FC6AKEJcjs.PAGE_FAQ_SECTION_ID; exports.pageFaqProps = _chunk3FC6AKEJcjs.pageFaqProps;
+
+
+exports.FAQ_SECTION_SKELETON_QUESTIONS = _chunkHNQRY6RUcjs.FAQ_SECTION_SKELETON_QUESTIONS; exports.FaqAskCard = _chunkHNQRY6RUcjs.FaqAskCard; exports.FaqDocumentPage = _chunkJGWN6GH5cjs.FaqDocumentPage; exports.FaqSection = _chunkHNQRY6RUcjs.FaqSection; exports.FaqSectionSkeleton = _chunkHNQRY6RUcjs.FaqSectionSkeleton; exports.PAGE_FAQ_SECTION_ID = _chunkHNQRY6RUcjs.PAGE_FAQ_SECTION_ID; exports.pageFaqProps = _chunkHNQRY6RUcjs.pageFaqProps;

package/dist/components/faq/index.d.ts

@@ -1,4 +1,4 @@
-export { FaqSection, PAGE_FAQ_SECTION_ID, pageFaqProps, type FaqSectionProps, type PageFaqSlot } from './faq-section';
+export { FaqSection, FaqSectionSkeleton, FAQ_SECTION_SKELETON_QUESTIONS, PAGE_FAQ_SECTION_ID, pageFaqProps, type FaqSectionProps, type FaqSectionSkeletonProps, type FaqSkeletonGroup, type FaqSkeletonShape, type PageFaqSlot, } from './faq-section';
 export { FaqDocumentPage, type FaqDocumentPageProps } from './faq-document-page';
 export { FaqAskCard, type FaqAskOptions } from './faq-ask-card';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/faq/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/faq/index.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,YAAY,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/faq/index.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,8BAA8B,EAC9B,mBAAmB,EACnB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,WAAW,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/faq/index.js

@@ -1,10 +1,18 @@
-import { FaqSection, PAGE_FAQ_SECTION_ID, pageFaqProps } from "./faq-section.js";
+import {
+  FaqSection,
+  FaqSectionSkeleton,
+  FAQ_SECTION_SKELETON_QUESTIONS,
+  PAGE_FAQ_SECTION_ID,
+  pageFaqProps
+} from "./faq-section.js";
 import { FaqDocumentPage } from "./faq-document-page.js";
 import { FaqAskCard } from "./faq-ask-card.js";
 export {
+  FAQ_SECTION_SKELETON_QUESTIONS,
   FaqAskCard,
   FaqDocumentPage,
   FaqSection,
+  FaqSectionSkeleton,
   PAGE_FAQ_SECTION_ID,
   pageFaqProps
 };

package/dist/components/faq-accordion.d.ts

@@ -7,6 +7,21 @@ interface FaqAccordionProps {
     items: FaqItem[];
     defaultOpenIds?: (number | string)[];
 }
+/**
+ * Rows the accordion's skeleton draws when not told how many: one screen of closed rows, from the row's layout. A
+ * closed row is `py-4` around one `text-h3` line from `content-md` (57px with its divider: 13 under a 900px desktop
+ * viewport once the block's heading sits above them) and about one and a half lines on a phone (about 62px: 12 under
+ * an 844px one). 12 fills the first screen at both widths without drawing a second.
+ */
+export declare const FAQ_ACCORDION_SKELETON_ROWS = 12;
 export declare function FaqAccordion({ items, defaultOpenIds }: FaqAccordionProps): import("react").JSX.Element;
+/**
+ * The accordion while its questions are read: the bordered list of `count` closed rows, each question a bar (two
+ * lines on a phone, one from `content-md`) inside the row's own `h3`, the chevron real.
+ */
+export declare function FaqAccordionSkeleton({ count, className, }: {
+    count?: number;
+    className?: string;
+}): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=faq-accordion.d.ts.map

package/dist/components/faq-accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"faq-accordion.d.ts","sourceRoot":"","sources":["../../src/components/faq-accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CACtC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,cAAmB,EAAE,EAAE,iBAAiB,+BA4E7E"}
+{"version":3,"file":"faq-accordion.d.ts","sourceRoot":"","sources":["../../src/components/faq-accordion.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CACtC;AAQD;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAO9C,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,cAAmB,EAAE,EAAE,iBAAiB,+BAiF7E;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAmC,EACnC,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAsBA"}

package/dist/components/faq-accordion.js

@@ -1,11 +1,21 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../utils/cn.js";
 import { faqItemAnchor } from "../utils/faq-anchor.js";
 import { Chevron02DownIcon } from "./icons-v2-generated/arrows/chevron-02-down-icon.js";
+import { TextLineSkeleton } from "./loading/unified-skeleton.js";
+import { useLoadingScope } from "./ui/loading-scope.js";
+const ACCORDION_FRAME_CLASS = "divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent";
+const ROW_HEADER_CLASS = "flex w-full items-center gap-6 px-6 py-4 text-left content-md:gap-10";
+const QUESTION_CLASS = "min-w-0 flex-1 break-words";
+const CHEVRON_CLASS = "shrink-0 text-ods-text-primary";
+const FAQ_ACCORDION_SKELETON_ROWS = 12;
+const wrapsOnPhone = (index) => index % 2 === 0;
 function FaqAccordion({ items, defaultOpenIds = [] }) {
   const [openSet, setOpenSet] = useState(new Set(defaultOpenIds));
+  const loading = useLoadingScope();
+  if (loading) return /* @__PURE__ */ jsx(FaqAccordionSkeleton, { count: items.length || void 0 });
   const toggle = (id) => {
     setOpenSet((prev) => {
       const next = new Set(prev);
@@ -14,13 +24,14 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
       return next;
     });
   };
-  return /* @__PURE__ */ jsx("div", { className: "divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent", children: items.map((item) => {
+  return /* @__PURE__ */ jsx("div", { className: ACCORDION_FRAME_CLASS, children: items.map((item) => {
     const isOpen = openSet.has(item.id);
     return /* @__PURE__ */ jsxs(
       "div",
       {
         id: faqItemAnchor(item.id),
         className: "scroll-mt-24 transition-colors hover:bg-ods-bg-hover",
+        "data-loading-item": true,
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -35,18 +46,18 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
                 }
               },
               "aria-expanded": isOpen,
-              className: "flex w-full cursor-pointer items-center gap-6 px-6 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus content-md:gap-10",
+              className: cn(
+                ROW_HEADER_CLASS,
+                "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus"
+              ),
               children: [
-                /* @__PURE__ */ jsx("h3", { className: "min-w-0 flex-1 break-words", children: item.question }),
+                /* @__PURE__ */ jsx("h3", { className: QUESTION_CLASS, children: item.question }),
                 /* @__PURE__ */ jsx(
                   Chevron02DownIcon,
                   {
                     "aria-hidden": "true",
                     size: 24,
-                    className: cn(
-                      "shrink-0 text-ods-text-primary transition-transform duration-300",
-                      isOpen && "rotate-180"
-                    )
+                    className: cn(CHEVRON_CLASS, "transition-transform duration-300", isOpen && "rotate-180")
                   }
                 )
               ]
@@ -66,6 +77,23 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
     );
   }) });
 }
+function FaqAccordionSkeleton({
+  count = FAQ_ACCORDION_SKELETON_ROWS,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(ACCORDION_FRAME_CLASS, className), "aria-hidden": true, children: Array.from({ length: count }, (_, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+    /* @__PURE__ */ jsxs("div", { className: ROW_HEADER_CLASS, "data-loading-item": true, children: [
+      /* @__PURE__ */ jsx("h3", { className: QUESTION_CLASS, children: wrapsOnPhone(i) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 2, className: "w-5/6 content-md:hidden" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "hidden w-5/6 content-md:block" })
+      ] }) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-5/6" }) }),
+      /* @__PURE__ */ jsx(Chevron02DownIcon, { "aria-hidden": "true", size: 24, className: CHEVRON_CLASS })
+    ] }, i)
+  )) });
+}
 export {
-  FaqAccordion
+  FAQ_ACCORDION_SKELETON_ROWS,
+  FaqAccordion,
+  FaqAccordionSkeleton
 };