@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.750

package/dist/components/loading/margin-report-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"margin-report-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/margin-report-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,yBAAyB;IACjC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yEAAyE;IACzE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,EAAE,OAAc,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,yBAAyB,qBAkI9G"}
+{"version":3,"file":"margin-report-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/margin-report-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,yBAAyB;IACjC,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yEAAyE;IACzE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAa,EACb,OAAc,EACd,WAAW,EACX,cAAc,GACf,EAAE,yBAAyB,qBAoI3B"}

package/dist/components/loading/margin-report-skeleton.js

@@ -1,45 +1,55 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-function MarginReportSkeleton({ animate = true, description, overlayContent }) {
-  return /* @__PURE__ */ jsxs("main", { className: `bg-ods-bg ${animate ? "animate-pulse" : ""} relative min-h-screen`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-[1920px] space-y-10 px-6 py-6 content-md:px-20 content-md:py-10", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-10 w-72 rounded bg-ods-skeleton" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-80 rounded bg-ods-skeleton" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-32 rounded border border-ods-border bg-ods-card" }, i)) }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex animate-pulse items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-14 w-14 rounded-lg bg-ods-skeleton" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 rounded bg-ods-skeleton" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex animate-pulse flex-col gap-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-lg bg-ods-skeleton" }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-32 rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded bg-ods-skeleton" })
+import { LoadingRegion } from "./loading-region.js";
+import { UnifiedSkeleton } from "./unified-skeleton.js";
+function MarginReportSkeleton({
+  region = true,
+  animate = true,
+  description,
+  overlayContent
+}) {
+  return /* @__PURE__ */ jsxs(
+    LoadingRegion,
+    {
+      label: "Loading the report",
+      as: "main",
+      announce: region && !overlayContent,
+      className: "relative min-h-screen bg-ods-bg",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-[1920px] space-y-10 px-6 py-6 content-md:px-20 content-md:py-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-72 rounded", animate }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-80 rounded", animate })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-32 rounded border border-ods-border", animate }, i)) }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-14 w-14 rounded-lg", animate }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded", animate }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded", animate })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "h-6 w-36 rounded bg-ods-skeleton" })
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-10 rounded-lg", animate }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-32 rounded", animate }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-20 rounded", animate })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-36 rounded", animate })
+              ] }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mt-4 h-4 w-40 rounded", animate })
+            ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-4 h-4 w-40 rounded bg-ods-skeleton" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2", children: ["Commercial Stack", "Open-Source Stack"].map((label, idx) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex animate-pulse flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card",
-          children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2", children: ["Commercial Stack", "Open-Source Stack"].map((label, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-6 w-40 rounded bg-ods-skeleton" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-40 rounded", animate }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-5 w-20 rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-10 rounded bg-ods-skeleton" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-20 rounded", animate }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-10 rounded", animate })
               ] })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3 p-3", children: Array.from({ length: 5 }).map((_, j) => /* @__PURE__ */ jsxs(
@@ -48,42 +58,41 @@ function MarginReportSkeleton({ animate = true, description, overlayContent }) {
                 className: "flex items-center justify-between rounded-lg border border-ods-border bg-ods-bg px-4 py-3",
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-                    /* @__PURE__ */ jsx("div", { className: "h-12 w-12 flex-shrink-0 rounded-lg bg-ods-skeleton" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 flex-shrink-0 rounded-lg", animate }),
                     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                      /* @__PURE__ */ jsx("div", { className: "h-4 w-32 rounded bg-ods-skeleton" }),
-                      /* @__PURE__ */ jsx("div", { className: "mt-1 hidden h-3 w-24 rounded bg-ods-skeleton content-md:block" })
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-32 rounded", animate }),
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mt-1 hidden h-3 w-24 rounded content-md:block", animate })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
-                    /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-skeleton" }),
-                    /* @__PURE__ */ jsx("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded", animate }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded", animate })
                   ] })
                 ]
               },
               j
             )) })
-          ]
-        },
-        idx
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: "h-6 w-60 rounded bg-ods-skeleton" }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-48 rounded border border-ods-border bg-ods-card" }, i)) }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-6 rounded-3xl border border-ods-border p-8", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-8 w-72 rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-ods-skeleton" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 rounded-md bg-ods-skeleton" })
+          ] }, idx)) }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-60 rounded", animate }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-48 rounded border border-ods-border", animate }, i)) }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-6 rounded-3xl border border-ods-border p-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-72 rounded", animate }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded", animate })
+              ] }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 shrink-0 rounded-md", animate })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-32 rounded border border-ods-border", animate }, i)) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-32 rounded border border-ods-border bg-ods-card" }, i)) })
-      ] })
-    ] }),
-    overlayContent && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 rounded-lg bg-ods-card/80", children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-4 px-4 text-center", children: [
-      description && /* @__PURE__ */ jsx("h3", { children: description }),
-      overlayContent
-    ] }) })
-  ] });
+        overlayContent && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 rounded-lg bg-ods-card/80", children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-4 px-4 text-center", children: [
+          description && /* @__PURE__ */ jsx("h3", { children: description }),
+          overlayContent
+        ] }) })
+      ]
+    }
+  );
 }
 export {
   MarginReportSkeleton

package/dist/components/loading/msp-profile-form-skeleton.d.ts

@@ -1,4 +1,6 @@
 interface SkeletonProps {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     className?: string;
     /**
      * Number of input fields to render on the right column (defaults to 4).
@@ -19,6 +21,6 @@ interface SkeletonProps {
  * – Mobile (<768px) collapses to one column via grid existing classes.
  * – Uses UnifiedSkeleton system to stay consistent with global loading design.
  */
-export declare function MspProfileFormSkeleton({ className, fields }: SkeletonProps): import("react").JSX.Element;
+export declare function MspProfileFormSkeleton({ region, className, fields }: SkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=msp-profile-form-skeleton.d.ts.map

package/dist/components/loading/msp-profile-form-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"msp-profile-form-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/msp-profile-form-skeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,MAAU,EAAE,EAAE,aAAa,+BA2B9E"}
+{"version":3,"file":"msp-profile-form-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/msp-profile-form-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,aAAa;IACrB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,MAAa,EAAE,SAAS,EAAE,MAAU,EAAE,EAAE,aAAa,+BA2B7F"}

package/dist/components/loading/msp-profile-form-skeleton.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { LoadingRegion } from "./loading-region.js";
 import { UnifiedSkeleton, TextSkeleton, InteractiveSkeleton } from "./unified-skeleton.js";
-function MspProfileFormSkeleton({ className, fields = 4 }) {
+function MspProfileFormSkeleton({ region = true, className, fields = 4 }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    LoadingRegion,
     {
+      label: "Loading the MSP profile",
+      announce: region,
       className: cn("grid grid-cols-1 items-stretch gap-6 content-md:grid-cols-2", className),
-      role: "status",
-      "aria-label": "Loading MSP profile form",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col space-y-2", children: [
           /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-28" }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-[180px] flex-1 content-md:min-h-full", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-full w-full rounded-lg", "aria-label": "Loading company logo" }) })
+          /* @__PURE__ */ jsx("div", { className: "min-h-[180px] flex-1 content-md:min-h-full", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-full w-full rounded-lg" }) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 content-md:grid-cols-2", children: Array.from({ length: fields }).map((_, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
           /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-40" }),

package/dist/components/loading/organization-card-skeleton.d.ts

@@ -35,7 +35,9 @@ export declare function OrganizationCardSkeleton({ className, containerClassName
  * - Tablet (md): 2 columns
  * - Desktop (xl): 3 columns
  */
-export declare function OrganizationCardSkeletonGrid({ count, className, containerClassName, showFooter, showDescription, }: {
+export declare function OrganizationCardSkeletonGrid({ region, count, className, containerClassName, showFooter, showDescription, }: {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     count?: number;
     className?: string;
     containerClassName?: string;

package/dist/components/loading/organization-card-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/organization-card-skeleton.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE,6BAA6B,+BAyE/B;AAED;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,KAAU,EACV,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,+BAiBA"}
+{"version":3,"file":"organization-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/organization-card-skeleton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE,6BAA6B,+BAuE/B;AAED;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAa,EACb,KAAU,EACV,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,+BAiBA"}

package/dist/components/loading/organization-card-skeleton.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { LoadingRegion } from "./loading-region.js";
 import { OrganizationIconSkeleton } from "./organization-icon-skeleton.js";
 import { TextSkeleton, MediaSkeleton } from "./unified-skeleton.js";
 function OrganizationCardSkeleton({
@@ -17,8 +18,6 @@ function OrganizationCardSkeleton({
         "flex h-full flex-col overflow-hidden rounded-lg",
         className
       ),
-      role: "status",
-      "aria-label": "Loading organization card",
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
           /* @__PURE__ */ jsx(
@@ -60,6 +59,7 @@ function OrganizationCardSkeleton({
   );
 }
 function OrganizationCardSkeletonGrid({
+  region = true,
   count = 12,
   className,
   containerClassName,
@@ -67,11 +67,11 @@ function OrganizationCardSkeletonGrid({
   showDescription = true
 }) {
   return /* @__PURE__ */ jsx(
-    "div",
+    LoadingRegion,
     {
+      label: "Loading organizations",
+      announce: region,
       className: cn("grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6 content-lg:grid-cols-3", className),
-      role: "status",
-      "aria-label": `Loading ${count} organization cards`,
       children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
         OrganizationCardSkeleton,
         {

package/dist/components/loading/organization-icon-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-icon-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/organization-icon-skeleton.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,6BAA6B;IAC5C;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;IAE9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;CAC9C;AAuBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,IAAW,EACX,SAAc,EACd,cAAqB,EACrB,eAAwB,GACzB,EAAE,6BAA6B,+BAc/B"}
+{"version":3,"file":"organization-icon-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/organization-icon-skeleton.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,6BAA6B;IAC5C;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;IAE9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;CAC9C;AAuBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,IAAW,EACX,SAAc,EACd,cAAqB,EACrB,eAAwB,GACzB,EAAE,6BAA6B,+BAc/B"}

package/dist/components/loading/organization-icon-skeleton.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { UnifiedSkeleton } from "./unified-skeleton.js";
 const sizeClasses = {
   xs: "w-6 h-6",
   sm: "w-8 h-8",
@@ -27,7 +28,7 @@ function OrganizationIconSkeleton({
     !showBackground && "overflow-hidden",
     className
   );
-  return /* @__PURE__ */ jsx("div", { className: containerClasses, role: "status", "aria-label": "Loading organization icon", children: /* @__PURE__ */ jsx("div", { className: "h-1/2 w-1/2 animate-pulse rounded-sm bg-ods-border" }) });
+  return /* @__PURE__ */ jsx("div", { className: containerClasses, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-1/2 w-1/2 rounded-sm" }) });
 }
 export {
   OrganizationIconSkeleton

package/dist/components/loading/page-layout-skeleton.d.ts

@@ -2,6 +2,14 @@ import type React from 'react';
 interface PageLayoutSkeletonProps {
     className?: string;
 }
+/**
+ * A whole loading state (a layout or a grid, not a piece of chrome): it announces itself once
+ * (`LoadingRegion`). `region={false}` inside another loading region.
+ */
+interface LoadingLayoutProps extends PageLayoutSkeletonProps {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
+}
 /**
  * Announcement bar skeleton that matches the AnnouncementBar component
  */
@@ -28,6 +36,11 @@ export declare function CategorySidebarSkeleton({ className }: PageLayoutSkeleto
  * Breadcrumb navigation skeleton
  */
 export declare function BreadcrumbSkeleton({ className }: PageLayoutSkeletonProps): React.JSX.Element;
+/**
+ * ONE breadcrumb link while it loads: a bar the height of the link's line
+ * (`text-h6`), for a trail whose links stream in one by one.
+ */
+export declare function BreadcrumbLinkSkeleton({ className }: PageLayoutSkeletonProps): React.JSX.Element;
 /**
  * Results header skeleton with count and sorting
  */
@@ -35,7 +48,7 @@ export declare function ResultsHeaderSkeleton({ className }: PageLayoutSkeletonP
 /**
  * Two-column layout skeleton (sidebar + main content)
  */
-export declare function TwoColumnLayoutSkeleton({ className, sidebarContent, mainContent, sidebarPosition, }: PageLayoutSkeletonProps & {
+export declare function TwoColumnLayoutSkeleton({ className, sidebarContent, mainContent, sidebarPosition, region, }: LoadingLayoutProps & {
     sidebarContent?: React.ReactNode;
     mainContent?: React.ReactNode;
     sidebarPosition?: 'left' | 'right';
@@ -43,12 +56,12 @@ export declare function TwoColumnLayoutSkeleton({ className, sidebarContent, mai
 /**
  * Article/blog post layout skeleton
  */
-export declare function ArticleLayoutSkeleton({ className }: PageLayoutSkeletonProps): React.JSX.Element;
+export declare function ArticleLayoutSkeleton({ className, region }: LoadingLayoutProps): React.JSX.Element;
 /**
  * Vendor Detail Layout Skeleton - Complete vendor detail page structure
  * Matches the refactored vendor detail page with proper platform colors and responsive layout
  */
-export declare function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProps): React.JSX.Element;
+export declare function VendorDetailLayoutSkeleton({ className, region }: LoadingLayoutProps): React.JSX.Element;
 /**
  * Stats/features section skeleton for homepage
  */
@@ -59,16 +72,18 @@ export declare function StatsSectionSkeleton({ className, columns }: PageLayoutS
  * Blog Card Grid Skeleton - Always displays exactly 4 blog card skeletons
  * Used for consistent blog page layout with predictable height
  */
-export declare function BlogCardGridSkeleton({ className }: PageLayoutSkeletonProps): React.JSX.Element;
+export declare function BlogCardGridSkeleton({ className, region }: LoadingLayoutProps): React.JSX.Element;
 /**
  * Vendor Grid Skeleton - Always displays exactly 12 vendor card skeletons
  * Used for consistent vendor page layout with predictable height
  */
-export declare function VendorGridSkeleton({ className }: PageLayoutSkeletonProps): React.JSX.Element;
+export declare function VendorGridSkeleton({ className, region }: LoadingLayoutProps): React.JSX.Element;
 /**
  * Slack Community Section Skeleton
  * Matches SlackCommunity component structure with title, channel list, and chat interface
  */
-export declare function SlackCommunitySkeleton(): React.JSX.Element;
+export declare function SlackCommunitySkeleton({ region }?: {
+    region?: boolean;
+}): React.JSX.Element;
 export {};
 //# sourceMappingURL=page-layout-skeleton.d.ts.map

package/dist/components/loading/page-layout-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/page-layout-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,sBAoBtC;AAED;;GAEG;AACH,wBAAgB,cAAc,sBAiC7B;AAED;;GAEG;AACH,wBAAgB,YAAY,sBAqB3B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,WAAkB,GACnB,EAAE,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAoBrD;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBA4C7E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAYxE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAc3E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,cAAc,EACd,WAAW,EACX,eAAwB,GACzB,EAAE,uBAAuB,GAAG;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACpC,qBAyBA;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAwD3E;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAyUhF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,OAAW,EAAE,EAAE,uBAAuB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,qBAwB9G;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAM1E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAUxE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,sBA+FrC"}
+{"version":3,"file":"page-layout-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/page-layout-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,UAAU,kBAAmB,SAAQ,uBAAuB;IAC1D,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,sBAoBtC;AAED;;GAEG;AACH,wBAAgB,cAAc,sBAiC7B;AAED;;GAEG;AACH,wBAAgB,YAAY,sBAqB3B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,WAAkB,GACnB,EAAE,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAoBrD;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBA4C7E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAYxE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAE5E;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,qBAc3E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,cAAc,EACd,WAAW,EACX,eAAwB,EACxB,MAAa,GACd,EAAE,kBAAkB,GAAG;IACtB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACpC,qBA4BA;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,MAAa,EAAE,EAAE,kBAAkB,qBA6DrF;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,MAAa,EAAE,EAAE,kBAAkB,qBAwU1F;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,OAAW,EAAE,EAAE,uBAAuB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,qBAwB9G;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAa,EAAE,EAAE,kBAAkB,qBAMpF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAa,EAAE,EAAE,kBAAkB,qBAWlF;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,MAAa,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,qBAiGlF"}