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

package/dist/{chunk-3FC6AKEJ.cjs → chunk-HNQRY6RU.cjs}

@@ -1,21 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkXCH7SPGIcjs = require('./chunk-XCH7SPGI.cjs');
+var _chunkXVFM6SJAcjs = require('./chunk-XVFM6SJA.cjs');
 
 
 
-var _chunkT5FRANE6cjs = require('./chunk-T5FRANE6.cjs');
+var _chunk7VI7TOGIcjs = require('./chunk-7VI7TOGI.cjs');
 
 
 
 
-var _chunk74ALTXXCcjs = require('./chunk-74ALTXXC.cjs');
+var _chunkYL6ZB2SRcjs = require('./chunk-YL6ZB2SR.cjs');
 
 
 
 
-var _chunk3RYIF4OWcjs = require('./chunk-3RYIF4OW.cjs');
+var _chunkXXJL5GY3cjs = require('./chunk-XXJL5GY3.cjs');
 
 
 var _chunkSKI6NKOEcjs = require('./chunk-SKI6NKOE.cjs');
@@ -25,31 +25,40 @@ var _chunkEWPR7662cjs = require('./chunk-EWPR7662.cjs');
 
 
 
-var _chunkNS64LMVEcjs = require('./chunk-NS64LMVE.cjs');
+var _chunkFZB4RMRKcjs = require('./chunk-FZB4RMRK.cjs');
 
 
-var _chunk22XAPV6Ncjs = require('./chunk-22XAPV6N.cjs');
+var _chunkDGNBXZXTcjs = require('./chunk-DGNBXZXT.cjs');
 
 
 var _chunkASMNNSUQcjs = require('./chunk-ASMNNSUQ.cjs');
 
 
-var _chunkNO5UJLLQcjs = require('./chunk-NO5UJLLQ.cjs');
+var _chunkWEANWBJHcjs = require('./chunk-WEANWBJH.cjs');
 
 
-var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
+
+var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
 
 
-var _chunkH3RYUTNDcjs = require('./chunk-H3RYUTND.cjs');
+var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
 
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
 
 // src/components/faq-accordion.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
+var ACCORDION_FRAME_CLASS = "divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent";
+var ROW_HEADER_CLASS = "flex w-full items-center gap-6 px-6 py-4 text-left content-md:gap-10";
+var QUESTION_CLASS = "min-w-0 flex-1 break-words";
+var CHEVRON_CLASS = "shrink-0 text-ods-text-primary";
+var FAQ_ACCORDION_SKELETON_ROWS = 12;
+var wrapsOnPhone = (index) => index % 2 === 0;
 function FaqAccordion({ items, defaultOpenIds = [] }) {
   const [openSet, setOpenSet] = _react.useState.call(void 0, new Set(defaultOpenIds));
+  const loading = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  if (loading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FaqAccordionSkeleton, { count: items.length || void 0 });
   const toggle = (id) => {
     setOpenSet((prev) => {
       const next = new Set(prev);
@@ -58,13 +67,14 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
       return next;
     });
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent", children: items.map((item) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACCORDION_FRAME_CLASS, children: items.map((item) => {
     const isOpen = openSet.has(item.id);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        id: _chunk74ALTXXCcjs.faqItemAnchor.call(void 0, item.id),
+        id: _chunkYL6ZB2SRcjs.faqItemAnchor.call(void 0, item.id),
         className: "scroll-mt-24 transition-colors hover:bg-ods-bg-hover",
+        "data-loading-item": true,
         children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "div",
@@ -79,18 +89,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: _chunk65VVJSQZcjs.cn.call(void 0, 
+                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__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "min-w-0 flex-1 break-words", children: item.question }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: QUESTION_CLASS, children: item.question }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _chunkSKI6NKOEcjs.Chevron02DownIcon,
                   {
                     "aria-hidden": "true",
                     size: 24,
-                    className: _chunk3ATAYP36cjs.cn.call(void 0, 
-                      "shrink-0 text-ods-text-primary transition-transform duration-300",
-                      isOpen && "rotate-180"
-                    )
+                    className: _chunk65VVJSQZcjs.cn.call(void 0, CHEVRON_CLASS, "transition-transform duration-300", isOpen && "rotate-180")
                   }
                 )
               ]
@@ -110,20 +120,35 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
     );
   }) });
 }
+function FaqAccordionSkeleton({
+  count = FAQ_ACCORDION_SKELETON_ROWS,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, ACCORDION_FRAME_CLASS, className), "aria-hidden": true, children: Array.from({ length: count }, (_, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ROW_HEADER_CLASS, "data-loading-item": true, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: QUESTION_CLASS, children: wrapsOnPhone(i) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", lines: 2, className: "w-5/6 content-md:hidden" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "hidden w-5/6 content-md:block" })
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-5/6" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSKI6NKOEcjs.Chevron02DownIcon, { "aria-hidden": "true", size: 24, className: CHEVRON_CLASS })
+    ] }, i)
+  )) });
+}
 
 // src/components/faq/faq-ask-card.tsx
 
 
 var PICK_ROOT_MARGIN = "600px";
 function faqAskCardShown(assistant) {
-  return _chunkT5FRANE6cjs.assistantAvailable.call(void 0, assistant) && !!assistant.name;
+  return _chunk7VI7TOGIcjs.assistantAvailable.call(void 0, assistant) && !!assistant.name;
 }
 function FaqAskCard({ topic, exclude, count, title, description, onOpen }) {
-  const { ref, inView } = _chunk3RYIF4OWcjs.useInView.call(void 0, { rootMargin: PICK_ROOT_MARGIN });
+  const { ref, inView } = _chunkXXJL5GY3cjs.useInView.call(void 0, { rootMargin: PICK_ROOT_MARGIN });
   const [reached, setReached] = _react.useState.call(void 0, false);
   if (inView && !reached) setReached(true);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkT5FRANE6cjs.AssistantAskPrompts,
+    _chunk7VI7TOGIcjs.AssistantAskPrompts,
     {
       variant: "card",
       topic,
@@ -169,6 +194,53 @@ function buildFaqJsonLdFromFaqs(faqs, opts = {}) {
 // src/components/faq/faq-section.tsx
 
 var DEFAULT_HEADING_TEXT = "Frequently Asked Questions";
+var SECTION_DEFAULT_CLASS = "space-y-10";
+var NAV_ABOVE_QUESTIONS_CLASS = "pb-8";
+var NAV_BELOW_HEADING_CLASS = "pt-8";
+var QUESTIONS_STACK_CLASS = "space-y-10";
+var 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";
+var ASIDE_QUESTIONS_CELL_CLASS = "content-lg:col-start-2 content-lg:row-span-2 content-lg:row-start-1";
+var ASIDE_CELL_CLASS = "content-lg:col-start-1 content-lg:row-start-2";
+var TOPIC_STACK_CLASS = "space-y-1";
+var TOPIC_CLASS = "text-ods-text-muted text-h6";
+var CATEGORY_NAV_CLASS = "flex flex-wrap gap-2";
+var CATEGORY_NAV_SKELETON_LINE_CLASS = "flex min-w-0 flex-nowrap gap-2 overflow-hidden";
+var FAQ_NAV_SKELETON_PILLS = 8;
+var CATEGORY_PILL_CLASS = "rounded-full border px-4 py-2 transition-colors text-h6";
+var CATEGORY_SECTION_CLASS = "scroll-mt-24";
+var CATEGORY_HEADING_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, _chunkDGNBXZXTcjs.SECTION_HEADING_CLASS, "pb-4");
+var 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__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      nav && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAV_ABOVE_QUESTIONS_CLASS, "data-loading-optional": optional, children: nav }),
+      questions
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ASIDE_GRID_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      heading,
+      nav && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAV_BELOW_HEADING_CLASS, "data-loading-optional": optional, children: nav })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ASIDE_QUESTIONS_CELL_CLASS, children: questions }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ASIDE_CELL_CLASS, children: aside })
+  ] });
+}
+function faqHeadingNode(heading, showTopic, topic) {
+  const titleNode = heading === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkDGNBXZXTcjs.SECTION_HEADING_CLASS, children: DEFAULT_HEADING_TEXT }) : heading;
+  if (!(showTopic && topic)) return titleNode;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TOPIC_STACK_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: titleNode }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: TOPIC_CLASS, children: topic })
+  ] });
+}
 var PAGE_FAQ_SECTION_ID = "faq";
 var PAGE_FAQ_IN_PAGE_CLASS = "space-y-10 pt-12 md:pt-20";
 function pageFaqProps(faq) {
@@ -176,7 +248,7 @@ function pageFaqProps(faq) {
 }
 function buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl = "", topic) {
   const entityScoped = !!entityType && entityId !== void 0 && entityId !== null && entityId !== "";
-  return _chunkNS64LMVEcjs.buildSuggestionUrl.call(void 0, "/api/faqs", {
+  return _chunkFZB4RMRKcjs.buildSuggestionUrl.call(void 0, "/api/faqs", {
     apiBaseUrl,
     entityType,
     entityId,
@@ -197,7 +269,7 @@ function groupFaqsBySection(faqs) {
     }
     let group = byName.get(name);
     if (!group) {
-      group = { section: name, slug: _chunk74ALTXXCcjs.faqSectionSlug.call(void 0, name), items: [] };
+      group = { section: name, slug: _chunkYL6ZB2SRcjs.faqSectionSlug.call(void 0, name), items: [] };
       byName.set(name, group);
     }
     group.items.push(item);
@@ -212,7 +284,8 @@ function GroupedFaqList({
   groups,
   categoryHeadingAs,
   heading,
-  aside
+  aside,
+  navDeclared
 }) {
   const CategoryHeading = categoryHeadingAs;
   const navGroups = _react.useMemo.call(void 0, () => groups.filter((g) => g.slug), [groups]);
@@ -242,7 +315,7 @@ function GroupedFaqList({
         }
         if (bestId) setActiveSlug(bestId);
       },
-      { rootMargin: `-${_chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX}px 0px -55% 0px`, threshold: 0 }
+      { rootMargin: `-${_chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX}px 0px -55% 0px`, threshold: 0 }
     );
     for (const group of navGroupsRef.current) {
       const el = group.slug ? document.getElementById(group.slug) : null;
@@ -252,7 +325,7 @@ function GroupedFaqList({
   }, [slugKey]);
   const [hashTarget, setHashTarget] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    const refresh = () => setHashTarget(_chunk74ALTXXCcjs.parseFaqHash.call(void 0, window.location.hash));
+    const refresh = () => setHashTarget(_chunkYL6ZB2SRcjs.parseFaqHash.call(void 0, window.location.hash));
     refresh();
     window.addEventListener("hashchange", refresh);
     return () => window.removeEventListener("hashchange", refresh);
@@ -269,7 +342,7 @@ function GroupedFaqList({
   }, [groups, hashTarget]);
   const accordionKeySuffix = _optionalChain([hashTarget, 'optionalAccess', _8 => _8.kind]) === "item" ? `item:${hashTarget.rawId}` : "default";
   const scrollDep = `${groups.length}|` + (_optionalChain([hashTarget, 'optionalAccess', _9 => _9.kind]) === "item" ? `item:${hashTarget.rawId}` : _optionalChain([hashTarget, 'optionalAccess', _10 => _10.kind]) === "section" ? `section:${hashTarget.slug}` : "none");
-  _chunkXCH7SPGIcjs.useScrollToHash.call(void 0, scrollDep, { headerOffset: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX });
+  _chunkXVFM6SJAcjs.useScrollToHash.call(void 0, scrollDep, { headerOffset: _chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX });
   const [pillSyncedHash, setPillSyncedHash] = _react.useState.call(void 0, hashTarget);
   if (pillSyncedHash !== hashTarget) {
     setPillSyncedHash(hashTarget);
@@ -277,12 +350,12 @@ function GroupedFaqList({
   }
   const handleJump = _react.useCallback.call(void 0, (e, slug) => {
     e.preventDefault();
-    _chunk3RYIF4OWcjs.navigateSamePageHash.call(void 0, "#" + slug, {
-      headerOffset: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX,
+    _chunkXXJL5GY3cjs.navigateSamePageHash.call(void 0, "#" + slug, {
+      headerOffset: _chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX,
       history: "replace"
     });
   }, []);
-  const categoryNav = navGroups.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { "aria-label": "FAQ categories", className: "flex flex-wrap gap-2", children: navGroups.map((group) => {
+  const categoryNav = navGroups.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { "aria-label": "FAQ categories", className: CATEGORY_NAV_CLASS, children: navGroups.map((group) => {
     const isActive = group.slug === activeSlug;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _chunkV45KLJQPcjs.next_link_default,
@@ -290,8 +363,8 @@ function GroupedFaqList({
         href: `#${group.slug}`,
         "aria-current": isActive ? "true" : void 0,
         onClick: (e) => handleJump(e, group.slug),
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
-          "rounded-full border px-4 py-2 transition-colors text-h6",
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
+          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
@@ -299,45 +372,31 @@ function GroupedFaqList({
       group.slug
     );
   }) });
-  const questions = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-10", children: groups.map((group) => {
+  const questions = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: QUESTIONS_STACK_CLASS, children: groups.map((group) => {
     const key = groupKey(group);
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { id: _nullishCoalesce(group.slug, () => ( void 0)), className: "scroll-mt-24 space-y-4", children: [
-      group.section && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CategoryHeading, { className: _chunk22XAPV6Ncjs.SECTION_HEADING_CLASS, children: group.section }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        FaqAccordion,
-        {
-          items: group.items,
-          defaultOpenIds: _optionalChain([defaultOpenByGroupKey, 'optionalAccess', _12 => _12.get, 'call', _13 => _13(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__ */ _jsxruntime.jsxs.call(void 0, "section", { id: _nullishCoalesce(group.slug, () => ( void 0)), className: CATEGORY_SECTION_CLASS, "data-loading-item": true, children: [
+        group.section && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          CategoryHeading,
+          {
+            className: CATEGORY_HEADING_CLASS,
+            "data-loading-optional": navDeclared ? void 0 : true,
+            children: group.section
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          FaqAccordion,
+          {
+            items: group.items,
+            defaultOpenIds: _optionalChain([defaultOpenByGroupKey, 'optionalAccess', _12 => _12.get, 'call', _13 => _13(key)])
+          },
+          `${key}:${accordionKeySuffix}`
+        )
+      ] }, key)
+    );
   }) });
-  if (!aside) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-8", children: [
-      categoryNav,
-      questions
-    ] });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-8", children: [
-      heading,
-      categoryNav
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "content-lg:col-start-2 content-lg:row-span-2 content-lg:row-start-1", children: questions }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "content-lg:col-start-1 content-lg:row-start-2", children: aside })
-  ] });
-}
-function FaqSkeleton({
-  region = true
-} = {}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading questions", announce: region, className: "space-y-8", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-2/3 rounded content-md:h-14" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-6 px-6 py-4 content-md:gap-10", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-6 w-5/6 rounded" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "size-6 rounded" })
-    ] }, idx)) })
-  ] });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FaqLayout, { heading, nav: categoryNav, navDeclared, questions, aside });
 }
 function FaqSection({
   initialFaqs,
@@ -353,9 +412,12 @@ function FaqSection({
   minResults,
   apiBaseUrl = "",
   aside: asideProp,
-  ask
+  ask,
+  skeletonShape,
+  skeletonNav = false
 }) {
   const assistant = _chunkEWPR7662cjs.useAssistantRuntime.call(void 0, );
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
   const askTopic = ask === false ? void 0 : _optionalChain([ask, 'optionalAccess', _14 => _14.topic]) || topic || entityType;
   const aside = _nullishCoalesce(asideProp, () => ( (ask !== false && askTopic && faqAskCardShown(assistant) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FaqAskCard, { ...ask, topic: askTopic }) : void 0)));
   const url = buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl, topic);
@@ -363,28 +425,31 @@ function FaqSection({
     () => initialFaqs ? { faqs: initialFaqs } : void 0,
     [initialFaqs]
   );
-  const { data, dataUrl, isLoading, error } = _chunkNS64LMVEcjs.useSelfFetch.call(void 0, url, { initialData });
+  const { data, dataUrl, isLoading, error } = _chunkFZB4RMRKcjs.useSelfFetch.call(void 0, inScope ? null : url, { initialData });
   const held = dataUrl === url ? _optionalChain([data, 'optionalAccess', _15 => _15.faqs]) : void 0;
   const faqs = _react.useMemo.call(void 0, () => _nullishCoalesce(held, () => ( [])), [held]);
   const groups = _react.useMemo.call(void 0, () => faqs.length > 0 ? groupFaqsBySection(faqs) : [], [faqs]);
-  const titleNode = heading === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunk22XAPV6Ncjs.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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: titleNode }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FaqSkeleton, {}) });
+  if (inScope || isLoading && faqs.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      FaqSectionSkeleton,
+      {
+        heading,
+        topic,
+        showTopic,
+        aside,
+        shape: _nullishCoalesce(skeletonShape, () => ( [{ rows: minResults }])),
+        navRow: skeletonNav,
+        className,
+        id
+      }
+    );
   }
+  if (faqs.length === 0) return null;
   const schema = emitJsonLd ? buildFaqJsonLdFromFaqs(faqs, jsonLd) : null;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { id, "data-faq-topic": topic, className: _nullishCoalesce(className, () => ( "space-y-10")), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { id, "data-faq-topic": topic, className: _nullishCoalesce(className, () => ( SECTION_DEFAULT_CLASS)), children: [
       !aside && headingNode,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         GroupedFaqList,
@@ -392,7 +457,8 @@ function FaqSection({
           groups,
           categoryHeadingAs: heading === null ? "h2" : "h3",
           heading: aside ? headingNode : void 0,
-          aside
+          aside,
+          navDeclared: skeletonNav
         }
       )
     ] }),
@@ -405,6 +471,53 @@ function FaqSection({
     )
   ] });
 }
+var 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__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunk65VVJSQZcjs.cn.call(void 0, CATEGORY_PILL_CLASS, "shrink-0 border-ods-border bg-ods-card"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }, i)
+  );
+  const nav = navRow ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CATEGORY_NAV_SKELETON_LINE_CLASS, "aria-hidden": true, children: Array.from({ length: FAQ_NAV_SKELETON_PILLS }, (_, i) => pill(i)) }) : named > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CATEGORY_NAV_CLASS, "aria-hidden": true, children: Array.from({ length: named }, (_, i) => pill(i)) }) : void 0;
+  const questions = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: QUESTIONS_STACK_CLASS, children: groups.map((group, index) => {
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton groups never reorder
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: CATEGORY_SECTION_CLASS, "data-loading-item": true, children: [
+        group.heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CategoryHeading, { className: CATEGORY_HEADING_CLASS, "data-loading-optional": navRow ? void 0 : true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/3" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FaqAccordionSkeleton, { count: Math.max(1, _nullishCoalesce(group.rows, () => ( FAQ_SECTION_SKELETON_QUESTIONS))) })
+      ] }, index)
+    );
+  }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading questions", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { id, "data-faq-topic": topic, className: _nullishCoalesce(className, () => ( SECTION_DEFAULT_CLASS)), children: [
+    !aside && headingNode,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      FaqLayout,
+      {
+        heading: aside ? headingNode : void 0,
+        nav,
+        navDeclared: navRow,
+        questions,
+        aside
+      }
+    )
+  ] }) });
+}
+
+
+
+
 
 
 
@@ -412,4 +525,4 @@ function FaqSection({
 
 
 
-exports.FaqAccordion = FaqAccordion; exports.FaqAskCard = FaqAskCard; exports.PAGE_FAQ_SECTION_ID = PAGE_FAQ_SECTION_ID; exports.pageFaqProps = pageFaqProps; exports.FaqSection = FaqSection;
+exports.FAQ_ACCORDION_SKELETON_ROWS = FAQ_ACCORDION_SKELETON_ROWS; exports.FaqAccordion = FaqAccordion; exports.FaqAccordionSkeleton = FaqAccordionSkeleton; exports.FaqAskCard = FaqAskCard; exports.FAQ_SECTION_SKELETON_QUESTIONS = FAQ_SECTION_SKELETON_QUESTIONS; exports.PAGE_FAQ_SECTION_ID = PAGE_FAQ_SECTION_ID; exports.pageFaqProps = pageFaqProps; exports.FaqSection = FaqSection; exports.FaqSectionSkeleton = FaqSectionSkeleton;