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

package/dist/components/index.d.ts

@@ -13,7 +13,6 @@ export * from './comment-card';
 export * from './comment-composer';
 export * from './comment-thread';
 export * from './content-loading-container';
-export * from './dynamic-skeleton';
 export * from './empty-state';
 export * from './list-empty-state';
 export * from './faq-accordion';
@@ -41,7 +40,6 @@ export * from './social-icon-row';
 export * from './user-display';
 export * from './vendor-display-button';
 export * from './vendor-icon';
-export * from './vendor-page-skeleton';
 export * from './vendor-tag';
 export * from './why-it-matters';
 export * from './yes-no-display';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAGA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,MAAM,CAAC;AAGrB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAQhC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AAKjC,YAAY,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AACpE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,WAAW,CAAC;AAG1B,cAAc,aAAa,CAAC;AAG5B,cAAc,oBAAoB,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,cAAc,qBAAqB,CAAC;AAKpC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,yBAAyB,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAKjG,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAKpG,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,8BAA8B,CAAC;AAKtC,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAK5F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAGA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,MAAM,CAAC;AAGrB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAQhC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AAKjC,YAAY,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AACpE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,WAAW,CAAC;AAG1B,cAAc,aAAa,CAAC;AAG5B,cAAc,oBAAoB,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,cAAc,qBAAqB,CAAC;AAKpC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,yBAAyB,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAKjG,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAKpG,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,8BAA8B,CAAC;AAKtC,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAK5F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/index.js

@@ -13,7 +13,6 @@ export * from "./comment-card.js";
 export * from "./comment-composer.js";
 export * from "./comment-thread.js";
 export * from "./content-loading-container.js";
-export * from "./dynamic-skeleton.js";
 export * from "./empty-state.js";
 export * from "./list-empty-state.js";
 export * from "./faq-accordion.js";
@@ -40,7 +39,6 @@ export * from "./social-icon-row.js";
 export * from "./user-display.js";
 export * from "./vendor-display-button.js";
 export * from "./vendor-icon.js";
-export * from "./vendor-page-skeleton.js";
 export * from "./vendor-tag.js";
 export * from "./why-it-matters.js";
 export * from "./yes-no-display.js";

package/dist/components/layout/title-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-block.d.ts","sourceRoot":"","sources":["../../../src/components/layout/title-block.tsx"],"names":[],"mappings":"AAmFA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAIxE;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACrD,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAC;IACrE,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;gCAE4B;IAC5B,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB;8FAC0F;IAC1F,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;8FAE0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC;IACtD;;8FAE0F;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmCD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,cAA+B,EAC/B,WAAW,EACX,QAAQ,EACR,OAAiB,EACjB,SAAS,EACT,SAAgB,EAChB,cAAc,EACd,OAAO,EACP,cAAc,EACd,WAAwB,EACxB,SAAiB,GAClB,EAAE,eAAe,qBAuJjB;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"title-block.d.ts","sourceRoot":"","sources":["../../../src/components/layout/title-block.tsx"],"names":[],"mappings":"AAmFA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAIxE;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACrD,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAC;IACrE,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;gCAE4B;IAC5B,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB;8FAC0F;IAC1F,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;8FAE0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC;IACtD;;8FAE0F;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA4BD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,cAA+B,EAC/B,WAAW,EACX,QAAQ,EACR,OAAiB,EACjB,SAAS,EACT,SAAgB,EAChB,cAAc,EACd,OAAO,EACP,cAAc,EACd,WAAwB,EACxB,SAAiB,GAClB,EAAE,eAAe,qBA+JjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/layout/title-block.js

@@ -2,21 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIsTruncated } from "../../hooks/ui/use-is-truncated.js";
 import { cn } from "../../utils/cn.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { EntityImage } from "../ui/entity-image.js";
 import { FloatingTooltip } from "../ui/floating-tooltip.js";
 import { PageActions } from "../ui/page-actions.js";
 import { BackButton } from "./back-button.js";
 import { PageTitle } from "./page-picture.js";
 const TITLE_BLOCK_MIN_HEIGHT = "min-h-11 content-md:min-h-12";
-function TitleTextSkeleton({ widthClass, heightClass }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: cn("inline-block max-w-full animate-pulse rounded-md bg-ods-border", widthClass, heightClass)
-    }
-  );
-}
+const TITLE_TEXT_SKELETON_CLASS = "inline-block max-w-full rounded-md";
 const TITLE_SKELETON_SIZE = {
   h1: { width: "w-56 content-md:w-80 content-lg:w-96", height: "h-7 content-md:h-8 content-lg:h-9" },
   h2: { width: "w-48 content-md:w-72", height: "h-4 content-md:h-6" }
@@ -49,7 +42,14 @@ function TitleBlock({
   const { ref: subtitleRef, isTruncated: subtitleTruncated } = useIsTruncated(
     loading ? null : subtitle
   );
-  const titleNode = loading ? /* @__PURE__ */ jsx(TitleTextSkeleton, { widthClass: skeletonSize.width, heightClass: skeletonSize.height }) : title;
+  const titleNode = loading ? /* @__PURE__ */ jsx(
+    UnifiedSkeleton,
+    {
+      as: "span",
+      "aria-hidden": true,
+      className: cn(TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)
+    }
+  ) : title;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -111,7 +111,14 @@ function TitleBlock({
                       ref: subtitleRef,
                       className: "truncate text-ods-text-secondary text-h6",
                       "aria-hidden": !loading && !subtitle ? true : void 0,
-                      children: loading ? /* @__PURE__ */ jsx(TitleTextSkeleton, { widthClass: "w-28 content-md:w-36", heightClass: "h-2.5 content-md:h-3" }) : subtitle || "\xA0"
+                      children: loading ? /* @__PURE__ */ jsx(
+                        UnifiedSkeleton,
+                        {
+                          as: "span",
+                          "aria-hidden": true,
+                          className: cn(TITLE_TEXT_SKELETON_CLASS, "h-2.5 w-28 content-md:h-3 content-md:w-36")
+                        }
+                      ) : subtitle || "\xA0"
                     }
                   ) })
                 ] })

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

@@ -3,7 +3,7 @@ interface CardSkeletonProps {
     /**
      * Card layout variant
      */
-    variant?: 'vendor' | 'blog' | 'category' | 'alternative';
+    variant?: 'vendor' | 'blog' | 'alternative';
     /**
      * Show action buttons area
      */
@@ -21,14 +21,17 @@ interface CardSkeletonProps {
  * Supports different card types used across the application:
  * - vendor: Vendor cards with logo, title, description, and actions
  * - blog: Blog post cards with image, title, summary, and metadata
- * - category: Category cards with icon, title, and description
  * - alternative: Alternative vendor cards in comparison lists
+ *
+ * A category card's loading box is `CategoryCardSkeleton`.
  */
 export declare function CardSkeleton({ className, containerClassName, variant, showActions, showMetadata, ...props }: CardSkeletonProps): import("react").JSX.Element;
 /**
  * Grid of card skeletons for loading lists
  */
-export declare function CardSkeletonGrid({ count, variant, className, containerClassName, ...props }: {
+export declare function CardSkeletonGrid({ region, count, variant, className, containerClassName, ...props }: {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     count?: number;
     variant?: CardSkeletonProps['variant'];
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/card-skeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;IACzD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,kBAAkB,EAClB,OAAkB,EAClB,WAAkB,EAClB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAyBnB;AAkMD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,OAAkB,EAClB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,+BAoBrC"}
+{"version":3,"file":"card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/card-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;IAC5C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,kBAAkB,EAClB,OAAkB,EAClB,WAAkB,EAClB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAsBnB;AAiKD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAa,EACb,KAAS,EACT,OAAkB,EAClB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,+BAmBrC"}

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

@@ -1,7 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-import { TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton.js";
+import { LoadingRegion } from "./loading-region.js";
+import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton.js";
 function CardSkeleton({
   className,
   containerClassName,
@@ -13,7 +14,6 @@ function CardSkeleton({
   const cardContent = {
     vendor: /* @__PURE__ */ jsx(VendorCardContent, { showMetadata }),
     blog: /* @__PURE__ */ jsx(BlogCardContent, { showActions, showMetadata }),
-    category: /* @__PURE__ */ jsx(CategoryCardContent, {}),
     alternative: /* @__PURE__ */ jsx(AlternativeCardContent, { showActions })
   };
   return /* @__PURE__ */ jsx(
@@ -27,8 +27,6 @@ function CardSkeleton({
         variant === "vendor" && "flex h-full flex-col",
         className
       ),
-      role: "status",
-      "aria-label": `Loading ${variant} card`,
       ...props,
       children: cardContent[variant]
     }
@@ -89,31 +87,13 @@ function BlogCardContent({ showActions, showMetadata }) {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 text-ods-text-muted", children: [
           /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-12" }),
-          /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-ods-skeleton" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "circular", className: "h-1 w-1" }),
           /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-16" })
         ] })
       ] }) })
     ] })
   ] });
 }
-function CategoryCardContent() {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4 content-md:p-6", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex gap-2 content-md:gap-3", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "lg", className: "flex-shrink-0" }, index)) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx(TextSkeleton.Subheading, { className: "w-3/4" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-1/2" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 content-md:items-end content-md:gap-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-2/3" })
-        ] }),
-        /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { className: "h-10 w-10 flex-shrink-0 content-md:h-12 content-md:w-12" })
-      ] })
-    ] })
-  ] });
-}
 function AlternativeCardContent({ showActions }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-4", children: [
     /* @__PURE__ */ jsx(MediaSkeleton.Avatar, { size: "md", className: "flex-shrink-0" }),
@@ -131,6 +111,7 @@ function AlternativeCardContent({ showActions }) {
   ] });
 }
 function CardSkeletonGrid({
+  region = true,
   count = 6,
   variant = "vendor",
   className,
@@ -138,19 +119,18 @@ function CardSkeletonGrid({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    "div",
+    LoadingRegion,
     {
+      label: `Loading ${variant} cards`,
+      announce: region,
       className: cn(
         "grid gap-4 content-md:gap-6",
         // Responsive grid based on card type
         variant === "vendor" && "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3",
         variant === "blog" && "grid-cols-1 content-md:grid-cols-2",
-        variant === "category" && "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4",
         variant === "alternative" && "grid-cols-1",
         className
       ),
-      role: "status",
-      "aria-label": `Loading ${count} ${variant} cards`,
       children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(CardSkeleton, { variant, containerClassName, ...props }, index))
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"category-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/category-card-skeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,+BA8B5E"}
+{"version":3,"file":"category-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/category-card-skeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,+BA4B5E"}

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

@@ -10,16 +10,14 @@ function CategoryCardSkeleton({ className }) {
         "box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8",
         className
       ),
-      role: "status",
-      "aria-label": "Loading category card",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-center justify-center gap-6", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "circular", className: "h-10 w-10 flex-shrink-0", "aria-label": "Loading icon" }, i)) }),
+        /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-center justify-center gap-6", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "circular", className: "h-10 w-10 flex-shrink-0" }, i)) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col space-y-3", children: [
           /* @__PURE__ */ jsx(TextSkeleton.Heading, { className: "w-3/4" }),
           /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-1/2" }),
           /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded-[6px]", "aria-label": "Loading button" }) })
+        /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded-[6px]" }) })
       ]
     }
   );

package/dist/components/loading/category-vendor-selector-skeleton.d.ts

@@ -1,8 +1,10 @@
 interface CategoryVendorSelectorSkeletonProps {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     /** number of subcategory blocks to render */
     subcategories?: number;
     className?: string;
 }
-export declare function CategoryVendorSelectorSkeleton({ subcategories, className }: CategoryVendorSelectorSkeletonProps): import("react").JSX.Element;
+export declare function CategoryVendorSelectorSkeleton({ region, subcategories, className, }: CategoryVendorSelectorSkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=category-vendor-selector-skeleton.d.ts.map

package/dist/components/loading/category-vendor-selector-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-vendor-selector-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/category-vendor-selector-skeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,mCAAmC;IAC3C,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,8BAA8B,CAAC,EAAE,aAAiB,EAAE,SAAS,EAAE,EAAE,mCAAmC,+BA8BnH"}
+{"version":3,"file":"category-vendor-selector-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/category-vendor-selector-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,mCAAmC;IAC3C,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,MAAa,EACb,aAAiB,EACjB,SAAS,GACV,EAAE,mCAAmC,+BA8BrC"}

package/dist/components/loading/category-vendor-selector-skeleton.js

@@ -1,14 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { LoadingRegion } from "./loading-region.js";
 import { TextSkeleton, UnifiedSkeleton } from "./unified-skeleton.js";
-function CategoryVendorSelectorSkeleton({ subcategories = 3, className }) {
+function CategoryVendorSelectorSkeleton({
+  region = true,
+  subcategories = 3,
+  className
+}) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    LoadingRegion,
     {
+      label: "Loading categories",
+      announce: region,
       className: cn("rounded-lg border border-ods-border bg-ods-card p-6", className),
-      role: "status",
-      "aria-label": "Loading category section",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-6 max-w-xl space-y-2", children: [
           /* @__PURE__ */ jsx(TextSkeleton.Heading, { className: "w-1/2" }),

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

@@ -3,18 +3,25 @@ export interface DeviceCardSkeletonProps {
      * Additional CSS classes
      */
     className?: string;
+    /** Hold `DeviceCard`'s "more" button (its `actions.moreButton`). Default `true`. */
+    moreButton?: boolean;
+    /**
+     * Hold the box of `DeviceCard`'s `actions.detailsButton.component` with these size classes
+     * (e.g. `'h-12 w-[88px]'`). Omit when the card has no details button.
+     */
+    detailsButtonClassName?: string;
 }
 /**
- * DeviceCardSkeleton - Loading skeleton matching DeviceCard exact layout
- *
- * Matches the structure of DeviceCard:
- * - Row 1: Device icon + Device name + More button
- * - Row 2: OS badge + Organization icon + Organization name
- * - Row 3: Status badge + Last seen
+ * DeviceCardSkeleton: the loading box of `DeviceCard` (`ui/device-card.tsx`), box for box:
+ * the same container classes, then
+ * - Row 1: the bordered device-icon box, the OS icon and name line (`text-h4`) over the
+ *   organization line (`text-h6`), the bordered "more" button (`moreButton`) and/or the details
+ *   button's box (`detailsButtonClassName`);
+ * - Row 2: the status tag (`Tag`'s `h-8`) and the "Last seen" line (`text-h6`).
  *
- * Prevents layout jumps by matching exact dimensions.
+ * The loaded card replaces it with no movement.
  */
-export declare function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps): import("react").JSX.Element;
+export declare function DeviceCardSkeleton({ className, moreButton, detailsButtonClassName }: DeviceCardSkeletonProps): import("react").JSX.Element;
 /**
  * DeviceCardSkeletonGrid - Grid of device card skeletons
  *
@@ -24,7 +31,9 @@ export declare function DeviceCardSkeleton({ className }: DeviceCardSkeletonProp
  * - Desktop (lg): 3 columns
  * - Large (xl): 4 columns
  */
-export declare function DeviceCardSkeletonGrid({ count, className }: {
+export declare function DeviceCardSkeletonGrid({ region, count, className, }: {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     count?: number;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"device-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/device-card-skeleton.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAiDxE;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,KAAU,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAYvG"}
+{"version":3,"file":"device-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/device-card-skeleton.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,UAAiB,EAAE,sBAAsB,EAAE,EAAE,uBAAuB,+BAuCnH;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAa,EACb,KAAU,EACV,SAAS,GACV,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAYA"}

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

@@ -1,40 +1,49 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-import { OrganizationIconSkeleton } from "./organization-icon-skeleton.js";
-function DeviceCardSkeleton({ className }) {
+import { LoadingRegion } from "./loading-region.js";
+import { UnifiedSkeleton } from "./unified-skeleton.js";
+function DeviceCardSkeleton({ className, moreButton = true, detailsButtonClassName }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("h-full rounded-[6px] border border-ods-border bg-ods-card", className),
-      role: "status",
-      "aria-label": "Loading device card",
+      className: cn(
+        "overflow-clip rounded-[6px] border border-ods-border bg-ods-card",
+        "flex flex-col gap-4 p-4",
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-4 py-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded bg-ods-border" }) }),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-3/4 animate-pulse rounded bg-ods-border" }) }),
-          /* @__PURE__ */ jsx("div", { className: "h-12 w-12 flex-shrink-0 animate-pulse rounded-[6px] bg-ods-border" })
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 rounded" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-h4", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 shrink-0 rounded" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-3/4 rounded" })
+            ] }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-1/2 rounded text-h6" })
+          ] }),
+          moreButton && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-6 rounded" }) }),
+          detailsButtonClassName && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("shrink-0 rounded-[6px]", detailsButtonClassName) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-4 py-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-6 w-24 flex-shrink-0 animate-pulse rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx(OrganizationIconSkeleton, { size: "sm" }),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-1/2 animate-pulse rounded bg-ods-border" }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-4 py-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-6 w-20 flex-shrink-0 animate-pulse rounded-full bg-ods-border" }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-40 animate-pulse rounded bg-ods-border" }) })
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20 shrink-0 rounded-md" }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-40 max-w-full rounded" }) })
         ] })
       ]
     }
   );
 }
-function DeviceCardSkeletonGrid({ count = 12, className }) {
+function DeviceCardSkeletonGrid({
+  region = true,
+  count = 12,
+  className
+}) {
   return /* @__PURE__ */ jsx(
-    "div",
+    LoadingRegion,
     {
+      label: "Loading devices",
+      announce: region,
       className: cn("grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4", className),
-      role: "status",
-      "aria-label": `Loading ${count} device cards`,
       children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(DeviceCardSkeleton, {}, index))
     }
   );

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

@@ -1,16 +1,15 @@
-export { AnnouncementBarSkeleton, HeroSkeleton, SearchContainerSkeleton, CategorySidebarSkeleton, BreadcrumbSkeleton, ResultsHeaderSkeleton, TwoColumnLayoutSkeleton, ArticleLayoutSkeleton, VendorDetailLayoutSkeleton, StatsSectionSkeleton, SlackCommunitySkeleton, BlogCardGridSkeleton, VendorGridSkeleton, } from './page-layout-skeleton';
+export { AnnouncementBarSkeleton, HeroSkeleton, SearchContainerSkeleton, CategorySidebarSkeleton, BreadcrumbSkeleton, BreadcrumbLinkSkeleton, ResultsHeaderSkeleton, TwoColumnLayoutSkeleton, ArticleLayoutSkeleton, VendorDetailLayoutSkeleton, StatsSectionSkeleton, SlackCommunitySkeleton, BlogCardGridSkeleton, VendorGridSkeleton, } from './page-layout-skeleton';
 export { CardSkeleton, CardSkeletonGrid } from './card-skeleton';
 export { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from './unified-skeleton';
 export { ContentLoadingContainer, useContentLoading } from '../content-loading-container';
-export { ParagraphSkeleton, ListSkeleton, TableSkeleton, FormSkeleton, NavigationSkeleton, ProfileSkeleton, CommentSkeleton, FeatureListSkeleton, TimelineSkeleton, PricingSkeleton, } from './content-skeleton';
 export { ProfileLoadingSkeleton } from '../profile/ProfileLoadingSkeleton';
 export { MspProfileFormSkeleton } from './msp-profile-form-skeleton';
+export { SettingsFormSkeleton, type SettingsFormSkeletonProps } from './settings-form-skeleton';
 export { CategoryCardSkeleton } from './category-card-skeleton';
 export { CategoryVendorSelectorSkeleton } from './category-vendor-selector-skeleton';
 export { WizardLayoutSkeleton } from './wizard-layout-skeleton';
+export { LoadingRegion, type LoadingRegionProps } from './loading-region';
 export { MarginReportSkeleton } from './margin-report-skeleton';
-export { UsersGridSkeleton } from './users-grid-skeleton';
-export { DynamicSkeleton, SkeletonPresets, PlatformSkeletonContainer, ProgressiveSkeleton } from '../dynamic-skeleton';
 export { OrganizationIconSkeleton } from './organization-icon-skeleton';
 export { OrganizationCardSkeleton, OrganizationCardSkeletonGrid } from './organization-card-skeleton';
 export { DeviceCardSkeleton, DeviceCardSkeletonGrid } from './device-card-skeleton';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/loading/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGvG,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAOhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGvH,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/loading/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGvG,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAEhG,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAOhE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/loading/index.js

@@ -4,6 +4,7 @@ import {
   SearchContainerSkeleton,
   CategorySidebarSkeleton,
   BreadcrumbSkeleton,
+  BreadcrumbLinkSkeleton,
   ResultsHeaderSkeleton,
   TwoColumnLayoutSkeleton,
   ArticleLayoutSkeleton,
@@ -16,26 +17,14 @@ import {
 import { CardSkeleton, CardSkeletonGrid } from "./card-skeleton.js";
 import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton.js";
 import { ContentLoadingContainer, useContentLoading } from "../content-loading-container.js";
-import {
-  ParagraphSkeleton,
-  ListSkeleton,
-  TableSkeleton,
-  FormSkeleton,
-  NavigationSkeleton,
-  ProfileSkeleton,
-  CommentSkeleton,
-  FeatureListSkeleton,
-  TimelineSkeleton,
-  PricingSkeleton
-} from "./content-skeleton.js";
 import { ProfileLoadingSkeleton } from "../profile/ProfileLoadingSkeleton.js";
 import { MspProfileFormSkeleton } from "./msp-profile-form-skeleton.js";
+import { SettingsFormSkeleton } from "./settings-form-skeleton.js";
 import { CategoryCardSkeleton } from "./category-card-skeleton.js";
 import { CategoryVendorSelectorSkeleton } from "./category-vendor-selector-skeleton.js";
 import { WizardLayoutSkeleton } from "./wizard-layout-skeleton.js";
+import { LoadingRegion } from "./loading-region.js";
 import { MarginReportSkeleton } from "./margin-report-skeleton.js";
-import { UsersGridSkeleton } from "./users-grid-skeleton.js";
-import { DynamicSkeleton, SkeletonPresets, PlatformSkeletonContainer, ProgressiveSkeleton } from "../dynamic-skeleton.js";
 import { OrganizationIconSkeleton } from "./organization-icon-skeleton.js";
 import { OrganizationCardSkeleton, OrganizationCardSkeletonGrid } from "./organization-card-skeleton.js";
 import { DeviceCardSkeleton, DeviceCardSkeletonGrid } from "./device-card-skeleton.js";
@@ -43,46 +32,34 @@ export {
   AnnouncementBarSkeleton,
   ArticleLayoutSkeleton,
   BlogCardGridSkeleton,
+  BreadcrumbLinkSkeleton,
   BreadcrumbSkeleton,
   CardSkeleton,
   CardSkeletonGrid,
   CategoryCardSkeleton,
   CategorySidebarSkeleton,
   CategoryVendorSelectorSkeleton,
-  CommentSkeleton,
   ContentLoadingContainer,
   DeviceCardSkeleton,
   DeviceCardSkeletonGrid,
-  DynamicSkeleton,
-  FeatureListSkeleton,
-  FormSkeleton,
   HeroSkeleton,
   InteractiveSkeleton,
-  ListSkeleton,
+  LoadingRegion,
   MarginReportSkeleton,
   MediaSkeleton,
   MspProfileFormSkeleton,
-  NavigationSkeleton,
   OrganizationCardSkeleton,
   OrganizationCardSkeletonGrid,
   OrganizationIconSkeleton,
-  ParagraphSkeleton,
-  PlatformSkeletonContainer,
-  PricingSkeleton,
   ProfileLoadingSkeleton,
-  ProfileSkeleton,
-  ProgressiveSkeleton,
   ResultsHeaderSkeleton,
   SearchContainerSkeleton,
-  SkeletonPresets,
+  SettingsFormSkeleton,
   SlackCommunitySkeleton,
   StatsSectionSkeleton,
-  TableSkeleton,
   TextSkeleton,
-  TimelineSkeleton,
   TwoColumnLayoutSkeleton,
   UnifiedSkeleton,
-  UsersGridSkeleton,
   VendorDetailLayoutSkeleton,
   VendorGridSkeleton,
   WizardLayoutSkeleton,

package/dist/components/loading/loading-region.d.ts

@@ -0,0 +1,33 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+/**
+ * THE container of a loading state: the one thing a screen reader hears while it loads.
+ *
+ * Skeleton bars (`UnifiedSkeleton`, `TextHold`) are decoration and are hidden from assistive technology;
+ * a page with forty bars must not announce "loading" forty times. The region around them says it ONCE:
+ * `aria-busy` on the container, and one polite status with the label. Few screen readers honour
+ * `aria-busy` alone, so the status is what is actually read. When the content replaces the region, the
+ * status goes with it.
+ *
+ * Put it on the top of a loading state (a page's skeleton, a card grid's, a Suspense fallback), never on
+ * every card inside it: nested regions would announce again.
+ */
+export interface LoadingRegionProps extends HTMLAttributes<HTMLElement> {
+    /** What is loading, read once by a screen reader. */
+    label?: string;
+    /** The container element, so the region keeps the layout element it replaces (a `section`, a `li`, a `span` in text). */
+    as?: ElementType;
+    /**
+     * `false`: only the container is drawn (no `aria-busy`, no status), for a loading state rendered inside
+     * another region, which announces for both. Components expose it as their `region` / `loadingRegion` prop.
+     * Default `true`.
+     */
+    announce?: boolean;
+    /**
+     * `false`: `aria-busy` without a status of its own, for a container whose loading is already announced by a
+     * status elsewhere (a table footer's "Loading more results"). Default `true`.
+     */
+    status?: boolean;
+    children?: ReactNode;
+}
+export declare function LoadingRegion({ label, as: Tag, announce, status, className, children, ...props }: LoadingRegionProps): import("react").JSX.Element;
+//# sourceMappingURL=loading-region.d.ts.map

package/dist/components/loading/loading-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-region.d.ts","sourceRoot":"","sources":["../../../src/components/loading/loading-region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yHAAyH;IACzH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAiB,EACjB,EAAE,EAAE,GAAW,EACf,QAAe,EACf,MAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAkBpB"}

package/dist/components/loading/loading-region.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LoadingRegion({
+  label = "Loading",
+  as: Tag = "div",
+  announce = true,
+  status = true,
+  className,
+  children,
+  ...props
+}) {
+  if (!announce) {
+    return /* @__PURE__ */ jsx(Tag, { className, ...props, children });
+  }
+  return /* @__PURE__ */ jsxs(Tag, { "aria-busy": "true", className, ...props, children: [
+    status && /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: label }),
+    children
+  ] });
+}
+export {
+  LoadingRegion
+};

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

@@ -1,5 +1,7 @@
 import type React from 'react';
 interface MarginReportSkeletonProps {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     /** Enable pulse animation (default: true) */
     animate?: boolean;
     /** Optional explanation text shown above overlay content */
@@ -7,6 +9,6 @@ interface MarginReportSkeletonProps {
     /** Optional React node displayed over skeleton (button, loader, etc.) */
     overlayContent?: React.ReactNode;
 }
-export declare function MarginReportSkeleton({ animate, description, overlayContent }: MarginReportSkeletonProps): React.JSX.Element;
+export declare function MarginReportSkeleton({ region, animate, description, overlayContent, }: MarginReportSkeletonProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=margin-report-skeleton.d.ts.map