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

package/dist/components/ui/markdown/rich/rich-markdown-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-markdown-renderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/markdown/rich/rich-markdown-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAA2D,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAiC9G;;;;;GAKG;AACH,KAAK,oBAAoB,GACrB,sBAAsB,GACtB,mBAAmB,GACnB,oBAAoB,GACpB,UAAU,GACV,eAAe,GACf,yBAAyB,GACzB,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,MAAM,WAAW,yBACf,SAAQ,OAAO,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,oBAAoB,CAAC;IACrF,qGAAqG;IACrG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AA6HD,kDAAkD;AAClD,eAAO,MAAM,oBAAoB,uDAAiC,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAEA"}
+{"version":3,"file":"rich-markdown-renderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/markdown/rich/rich-markdown-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAmC,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAiCtF;;;;;GAKG;AACH,KAAK,oBAAoB,GACrB,sBAAsB,GACtB,mBAAmB,GACnB,oBAAoB,GACpB,UAAU,GACV,eAAe,GACf,yBAAyB,GACzB,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,MAAM,WAAW,yBACf,SAAQ,OAAO,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,oBAAoB,CAAC;IACrF,qGAAqG;IACrG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AA6HD,kDAAkD;AAClD,eAAO,MAAM,oBAAoB,uDAAiC,CAAC"}

package/dist/components/ui/markdown/rich/rich-markdown-renderer.js

@@ -5,7 +5,7 @@ import {
   RichMarkdownRuntimeProvider,
   useRichMarkdownRuntime
 } from "../../../embeds/rich-markdown-runtime.js";
-import { MarkdownEngine, MarkdownEngineSkeleton, NO_BROKEN_LINKS } from "../engine.js";
+import { MarkdownEngine, NO_BROKEN_LINKS } from "../engine.js";
 import { resolveTextSizeConfig } from "../text-size.js";
 import { buildRichEmbedOverrides } from "./embed-overrides.js";
 import { processShortcodes } from "./shortcodes.js";
@@ -131,14 +131,6 @@ const RichMarkdownRendererImpl = ({
   );
 };
 const RichMarkdownRenderer = memo(RichMarkdownRendererImpl);
-function RichMarkdownRendererSkeleton({
-  sections,
-  title,
-  className
-}) {
-  return /* @__PURE__ */ jsx(MarkdownEngineSkeleton, { sections, title, textSize: "article", className });
-}
 export {
-  RichMarkdownRenderer,
-  RichMarkdownRendererSkeleton
+  RichMarkdownRenderer
 };

package/dist/components/ui/modal-v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.d.ts","sourceRoot":"","sources":["../../../src/components/ui/modal-v2.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAsE,MAAM,OAAO,CAAC;AAa3G;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAQxD,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,QAAA,MAAM,KAAK,uGAwPV,CAAC;AAGF,QAAA,MAAM,YAAY,8GAIhB,CAAC;AAGH;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc,gHAiBlB,CAAC;AAGH,QAAA,MAAM,WAAW,6GAgBf,CAAC;AAGH,QAAA,MAAM,UAAU,gHAId,CAAC;AAGH,QAAA,MAAM,WAAW,6GAIf,CAAC;AAGH,OAAO,EACL,KAAK,IAAI,OAAO,EAChB,YAAY,IAAI,cAAc,EAC9B,WAAW,IAAI,aAAa,EAC5B,WAAW,IAAI,aAAa,EAC5B,UAAU,IAAI,YAAY,EAC1B,cAAc,IAAI,gBAAgB,GACnC,CAAC"}
+{"version":3,"file":"modal-v2.d.ts","sourceRoot":"","sources":["../../../src/components/ui/modal-v2.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAsE,MAAM,OAAO,CAAC;AAc3G;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAQxD,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,QAAA,MAAM,KAAK,uGAwPV,CAAC;AAGF,QAAA,MAAM,YAAY,8GAIhB,CAAC;AAGH;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc,gHAiBlB,CAAC;AAGH,QAAA,MAAM,WAAW,6GAmBf,CAAC;AAGH,QAAA,MAAM,UAAU,gHAId,CAAC;AAGH,QAAA,MAAM,WAAW,6GAIf,CAAC;AAGH,OAAO,EACL,KAAK,IAAI,OAAO,EAChB,YAAY,IAAI,cAAc,EAC9B,WAAW,IAAI,aAAa,EAC5B,WAAW,IAAI,aAAa,EAC5B,UAAU,IAAI,YAAY,EAC1B,cAAc,IAAI,gBAAgB,GACnC,CAAC"}

package/dist/components/ui/modal-v2.js

@@ -5,6 +5,7 @@ import { RemoveScroll } from "react-remove-scroll";
 import { ViewportBreakpoints } from "../../hooks/ui/use-content-breakpoint.js";
 import { cn } from "../../utils/cn.js";
 import { XmarkIcon } from "../icons-v2-generated/index.js";
+import { Button } from "./button/index.js";
 import { CollisionBoundaryContext, PortalContainerContext } from "./portal-container.js";
 const ANIMATION_DURATION = 200;
 const ModalContext = createContext({});
@@ -214,12 +215,15 @@ const ModalHeader = forwardRef(({ children, className }, ref) => {
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-[var(--spacing-system-sf)]", className), children: [
     /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children }),
     onClose && /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "transparent",
+        size: "icon-sm",
+        type: "button",
         onClick: onClose,
-        className: "hidden shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary md:flex",
+        className: "hidden shrink-0 md:inline-flex",
         "aria-label": "Close",
-        children: /* @__PURE__ */ jsx(XmarkIcon, { className: "size-6" })
+        children: /* @__PURE__ */ jsx(XmarkIcon, { className: "text-ods-text-secondary" })
       }
     )
   ] });

package/dist/components/ui/numbered-step.d.ts

@@ -17,6 +17,14 @@ export interface NumberedStepProps extends StepNumberProps {
     description?: string;
     /** The title's element. Default `h3`. */
     titleAs?: 'h3' | 'h4' | 'p';
+    /**
+     * The step's words are still being read: its number drawn for real, its title a bar and (when the loaded step has
+     * one, `{ description: true }`) its description a bar. The step renders on the server and cannot read a loading
+     * scope: a host passes its own switch (`useLoadingScope() || loading`).
+     */
+    loading?: boolean | {
+        description?: boolean;
+    };
 }
 /**
  * THE head of a numbered step: its number (`StepNumber`), its title and one
@@ -25,15 +33,5 @@ export interface NumberedStepProps extends StepNumberProps {
  * strength and the description steps back; the current one's number and title
  * take the accent and its description reads at full strength.
  */
-export declare function NumberedStep({ number, title, description, current, accent, titleAs: Title, className, }: NumberedStepProps): import("react").JSX.Element;
-/**
- * A numbered step while its words are read: its number drawn for real (it is the step's place), its title a
- * `text-h3` bar and its description, when it carries one, a `text-h4` bar.
- */
-export declare function NumberedStepSkeleton({ number, description, className, }: {
-    number: number;
-    /** The loaded step carries a description. Default `true`. */
-    description?: boolean;
-    className?: string;
-}): import("react").JSX.Element;
+export declare function NumberedStep({ number, title, description, current, accent, titleAs: Title, className, loading, }: NumberedStepProps): import("react").JSX.Element;
 //# sourceMappingURL=numbered-step.d.ts.map

package/dist/components/ui/numbered-step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numbered-step.d.ts","sourceRoot":"","sources":["../../../src/components/ui/numbered-step.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uHAAuH;IACvH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAe,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,+BAazF;AAMD,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAe,EACf,MAAM,EACN,OAAO,EAAE,KAAY,EACrB,SAAS,GACV,EAAE,iBAAiB,+BA2BnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,WAAkB,EAClB,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAUA"}
+{"version":3,"file":"numbered-step.d.ts","sourceRoot":"","sources":["../../../src/components/ui/numbered-step.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uHAAuH;IACvH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAe,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,+BAazF;AAMD,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAe,EACf,MAAM,EACN,OAAO,EAAE,KAAY,EACrB,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAqCnB"}

package/dist/components/ui/numbered-step.js

@@ -25,8 +25,19 @@ function NumberedStep({
   current = false,
   accent,
   titleAs: Title = "h3",
-  className
+  className,
+  loading
 }) {
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      NumberedStepSkeleton,
+      {
+        number,
+        description: loading === true ? true : loading.description,
+        className
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs("div", { className: cn(STEP_CLASS, className), children: [
     /* @__PURE__ */ jsx(StepNumber, { number, current, accent }),
     /* @__PURE__ */ jsxs("div", { className: STEP_TEXT_CLASS, children: [
@@ -69,6 +80,5 @@ function NumberedStepSkeleton({
 }
 export {
   NumberedStep,
-  NumberedStepSkeleton,
   StepNumber
 };

package/dist/components/ui/organization-card.d.ts

@@ -1,4 +1,15 @@
 import type React from 'react';
+/** The card's corner radius, read by `OrganizationCard` and by its skeleton here. */
+export declare const ORGANIZATION_CARD_RADIUS_CLASS = "rounded-[6px]";
+/** The card's layout, read by `OrganizationCard` and by its skeleton here, so the skeleton is the card's size. */
+export declare const ORGANIZATION_CARD_LAYOUT_CLASS = "relative flex w-full flex-col gap-3 overflow-clip p-4";
+export declare const ORGANIZATION_CARD_SURFACE_CLASS = "border border-ods-border bg-ods-card";
+export declare const ORGANIZATION_CARD_HEADER_CLASS = "flex w-full items-start gap-3";
+export declare const ORGANIZATION_CARD_TEXT_CLASS = "flex min-w-0 flex-1 flex-col justify-center py-2";
+export declare const ORGANIZATION_CARD_DESCRIPTION_CLASS = "h-12 w-full overflow-hidden";
+export declare const ORGANIZATION_CARD_FOOTER_CLASS = "flex w-full min-w-0 items-center justify-between gap-2";
+export declare const ORGANIZATION_CARD_STATS_CLASS = "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4";
+export declare const ORGANIZATION_CARD_STAT_CLASS = "flex flex-shrink-0 items-center gap-1";
 export interface Organization {
     id: string;
     organizationId?: string;
@@ -35,6 +46,8 @@ export interface OrganizationCardProps {
     }>;
     customFooter?: React.ReactNode;
     deviceCount?: number;
+    /** `data-*` markers (`data-loading-item` on a grid's cards), on the card's outermost element in both forms. */
+    [key: `data-${string}`]: unknown;
 }
-export declare function OrganizationCard({ organization, fetchedImageUrl, className, href, showActionButton, actionButton, footerStats, customFooter, deviceCount, }: OrganizationCardProps): React.JSX.Element;
+export declare function OrganizationCard({ organization, fetchedImageUrl, className, href, showActionButton, actionButton, footerStats, customFooter, deviceCount, ...props }: OrganizationCardProps): React.JSX.Element;
 //# sourceMappingURL=organization-card.d.ts.map

package/dist/components/ui/organization-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/organization-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;iCAC6B;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,eAAe,EACf,SAAS,EACT,IAAI,EACJ,gBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,EAAE,qBAAqB,qBA6GvB"}
+{"version":3,"file":"organization-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/organization-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,qFAAqF;AACrF,eAAO,MAAM,8BAA8B,kBAAkB,CAAC;AAC9D,kHAAkH;AAClH,eAAO,MAAM,8BAA8B,0DAA0D,CAAC;AACtG,eAAO,MAAM,+BAA+B,yCAAyC,CAAC;AACtF,eAAO,MAAM,8BAA8B,kCAAkC,CAAC;AAC9E,eAAO,MAAM,4BAA4B,qDAAqD,CAAC;AAC/F,eAAO,MAAM,mCAAmC,gCAAgC,CAAC;AACjF,eAAO,MAAM,8BAA8B,2DAA2D,CAAC;AACvG,eAAO,MAAM,6BAA6B,iEAAiE,CAAC;AAC5G,eAAO,MAAM,4BAA4B,0CAA0C,CAAC;AAiFpF,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;iCAC6B;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,eAAe,EACf,SAAS,EACT,IAAI,EACJ,gBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA4GvB"}

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

@@ -3,20 +3,56 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Monitor } from "lucide-react";
 import Link from "../../embed-shims/next-link.js";
 import { cn } from "../../utils/cn.js";
-import {
-  OrganizationCardSkeleton,
-  ORGANIZATION_CARD_RADIUS_CLASS,
-  ORGANIZATION_CARD_LAYOUT_CLASS,
-  ORGANIZATION_CARD_SURFACE_CLASS,
-  ORGANIZATION_CARD_HEADER_CLASS,
-  ORGANIZATION_CARD_TEXT_CLASS,
-  ORGANIZATION_CARD_DESCRIPTION_CLASS,
-  ORGANIZATION_CARD_FOOTER_CLASS,
-  ORGANIZATION_CARD_STATS_CLASS,
-  ORGANIZATION_CARD_STAT_CLASS
-} from "../loading/organization-card-skeleton.js";
+import { MediaSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { EntityImage } from "./entity-image.js";
-import { useLoadingScope } from "./loading-scope.js";
+import { loadingItemProps, useLoadingScope } from "./loading-scope.js";
+const ORGANIZATION_CARD_RADIUS_CLASS = "rounded-[6px]";
+const ORGANIZATION_CARD_LAYOUT_CLASS = "relative flex w-full flex-col gap-3 overflow-clip p-4";
+const ORGANIZATION_CARD_SURFACE_CLASS = "border border-ods-border bg-ods-card";
+const ORGANIZATION_CARD_HEADER_CLASS = "flex w-full items-start gap-3";
+const ORGANIZATION_CARD_TEXT_CLASS = "flex min-w-0 flex-1 flex-col justify-center py-2";
+const ORGANIZATION_CARD_DESCRIPTION_CLASS = "h-12 w-full overflow-hidden";
+const ORGANIZATION_CARD_FOOTER_CLASS = "flex w-full min-w-0 items-center justify-between gap-2";
+const ORGANIZATION_CARD_STATS_CLASS = "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4";
+const ORGANIZATION_CARD_STAT_CLASS = "flex flex-shrink-0 items-center gap-1";
+const ORGANIZATION_CARD_SKELETON_STAT_WIDTHS = ["w-16", "w-20"];
+function OrganizationCardSkeleton({
+  className,
+  containerClassName,
+  showFooter = true,
+  showDescription = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        ORGANIZATION_CARD_LAYOUT_CLASS,
+        containerClassName || ORGANIZATION_CARD_SURFACE_CLASS,
+        ORGANIZATION_CARD_RADIUS_CLASS,
+        className
+      ),
+      "aria-hidden": true,
+      ...loadingItemProps(props),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_HEADER_CLASS, children: [
+          /* @__PURE__ */ jsx(EntityImage, { src: null }),
+          /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_TEXT_CLASS, children: [
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-3/4" }),
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
+          ] })
+        ] }),
+        showDescription && /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "w-full" }) }),
+        showFooter && /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_FOOTER_CLASS, children: /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_STATS_CLASS, children: ORGANIZATION_CARD_SKELETON_STAT_WIDTHS.map((width) => /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_STAT_CLASS, children: [
+          /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: width })
+        ] }, width)) }) })
+      ]
+    }
+  );
+}
+const ORGANIZATION_CARD_EMPTY_MARK = "\u2014";
 function OrganizationCard({
   organization,
   fetchedImageUrl,
@@ -26,17 +62,12 @@ function OrganizationCard({
   actionButton,
   footerStats,
   customFooter,
-  deviceCount
+  deviceCount,
+  ...props
 }) {
+  const markers = loadingItemProps(props);
   if (useLoadingScope()) {
-    return /* @__PURE__ */ jsx(
-      OrganizationCardSkeleton,
-      {
-        className,
-        showDescription: Boolean(organization.description),
-        showFooter: Boolean(customFooter || footerStats)
-      }
-    );
+    return /* @__PURE__ */ jsx(OrganizationCardSkeleton, { className, showFooter: Boolean(customFooter || footerStats), ...markers });
   }
   const handleActionClick = (e) => {
     e.preventDefault();
@@ -54,6 +85,7 @@ function OrganizationCard({
         href && "cursor-pointer hover:border-ods-border-hover hover:bg-ods-card-hover",
         className
       ),
+      ...href ? {} : markers,
       children: [
         deviceCount !== void 0 && /* @__PURE__ */ jsxs("div", { className: "absolute right-4 top-4 flex shrink-0 items-center gap-2", children: [
           /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4 text-ods-text-secondary" }),
@@ -63,12 +95,12 @@ function OrganizationCard({
           ] })
         ] }),
         !deviceCount && showActionButton && actionButton && /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
-            className: cn(
-              "absolute right-2 top-2 z-10 flex h-8 w-8 items-center justify-center rounded transition-colors",
-              actionButton.variant === "primary" ? "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover" : "text-ods-text-secondary hover:bg-ods-error-secondary hover:text-ods-error"
-            ),
+            variant: actionButton.variant === "primary" ? "accent" : "transparent",
+            size: "icon-sm",
+            type: "button",
+            className: "absolute right-2 top-2 z-10",
             onClick: handleActionClick,
             disabled: actionButton.disabled,
             "aria-label": actionButton.label,
@@ -89,7 +121,7 @@ function OrganizationCard({
             )
           ] })
         ] }),
-        organization.description && /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-ods-text-primary text-h4", title: organization.description, children: organization.description }) }),
+        /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_DESCRIPTION_CLASS, children: organization.description ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-ods-text-primary text-h4", title: organization.description, children: organization.description }) : /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h4", children: ORGANIZATION_CARD_EMPTY_MARK }) }),
         customFooter ? customFooter : footerStats && footerStats.length > 0 ? /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_FOOTER_CLASS, children: /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_STATS_CLASS, children: footerStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_STAT_CLASS, children: [
           stat.icon,
           /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h6", children: typeof stat.value === "number" ? stat.value.toLocaleString() : stat.value }),
@@ -99,10 +131,19 @@ function OrganizationCard({
     }
   );
   if (href) {
-    return /* @__PURE__ */ jsx(Link, { href, className: "block text-inherit no-underline", children: card });
+    return /* @__PURE__ */ jsx(Link, { href, className: "block text-inherit no-underline", ...markers, children: card });
   }
   return card;
 }
 export {
+  ORGANIZATION_CARD_DESCRIPTION_CLASS,
+  ORGANIZATION_CARD_FOOTER_CLASS,
+  ORGANIZATION_CARD_HEADER_CLASS,
+  ORGANIZATION_CARD_LAYOUT_CLASS,
+  ORGANIZATION_CARD_RADIUS_CLASS,
+  ORGANIZATION_CARD_STATS_CLASS,
+  ORGANIZATION_CARD_STAT_CLASS,
+  ORGANIZATION_CARD_SURFACE_CLASS,
+  ORGANIZATION_CARD_TEXT_CLASS,
   OrganizationCard
 };

package/dist/components/ui/page-actions.d.ts

@@ -10,7 +10,7 @@ export type PageActionButton = {
     onClick?: () => void;
     icon?: React.ReactNode;
     /** `overlay` and `glyph` are media chrome and `link` an inline text action; none is a page action, and SplitButton has no divider colour for them. */
-    variant?: Exclude<ButtonProps['variant'], 'overlay' | 'glyph' | 'link' | 'inverted'>;
+    variant?: Exclude<ButtonProps['variant'], 'overlay' | 'glyph' | 'link' | 'inverted' | 'field' | 'row' | 'tab' | 'chip' | 'card' | 'cell'>;
     disabled?: boolean;
     /**
      * For SplitButton actions (when `iconAction` is set): disables only the main
@@ -63,13 +63,13 @@ export interface PageActionsProps {
     selector?: React.ReactNode;
     className?: string;
     /**
-     * Render placeholders instead of the actions — for pages whose action SET
-     * depends on data still in flight. Opt-in: a page whose actions are already
-     * final while its title loads keeps rendering them.
+     * The action SET depends on data still in flight: the actions are drawn for real and inert (an empty list is one
+     * placeholder: the set is unknown). Opt-in: a page whose actions are already final while its title loads keeps
+     * rendering them live.
      */
     loading?: boolean;
 }
-export declare function PageActions({ variant, actions, menuActions, selector, className, loading, }: PageActionsProps): React.JSX.Element;
+export declare function PageActions({ variant, actions, menuActions, selector, className, loading: loadingProp, }: PageActionsProps): React.JSX.Element;
 export declare function usePageActionsBottomPadding(variant: PageActionsProps['variant']): "" | "pb-40 md:pb-0";
 export default PageActions;
 //# sourceMappingURL=page-actions.d.ts.map

package/dist/components/ui/page-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-actions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sJAAsJ;IACtJ,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAwKF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAC;IAC9D,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAyED,wBAAgB,WAAW,CAAC,EAC1B,OAAwB,EACxB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,qBA0BlB;AA+MD,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,wBAE/E;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-actions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKnE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sJAAsJ;IACtJ,OAAO,CAAC,EAAE,OAAO,CACf,WAAW,CAAC,SAAS,CAAC,EACtB,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAC/F,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAiLF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAC;IAC9D,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAmBD,wBAAgB,WAAW,CAAC,EAC1B,OAAwB,EACxB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EAAE,WAAW,GACrB,EAAE,gBAAgB,qBA2BlB;AA0MD,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,wBAE/E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/ui/page-actions.js

@@ -3,9 +3,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { cn } from "../../utils/cn.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/index.js";
-import { InteractiveSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { InteractiveSkeleton } from "../loading/unified-skeleton.js";
 import { ActionsMenuDropdown } from "./actions-menu.js";
 import { Button, SplitButton } from "./button/index.js";
+import { InertWhileLoading, useLoadingScope } from "./loading-scope.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 function actionKey(action, idx) {
   return `${action.label ?? action.ariaLabel ?? "action"}-${idx}`;
@@ -48,6 +49,9 @@ function actionToMenuItems(action, idx) {
   ];
 }
 function renderActionButton(action, opts = {}) {
+  if (opts.inert) {
+    return /* @__PURE__ */ jsx(InertWhileLoading, { className: cn("inline-flex", opts.fullWidth && "flex-1"), children: renderRawActionButton(action, opts) });
+  }
   const button = renderRawActionButton(action, opts);
   if (!action.tooltip) return button;
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -130,27 +134,9 @@ function renderRawActionButton(action, opts = {}) {
   );
 }
 const ACTIONS_GAP = "gap-[var(--spacing-system-xs)]";
-function ActionSkeletons({
-  actions,
-  fullWidth,
-  emptyFallback = "icon"
-}) {
-  const items = actions.length > 0 ? actions : [null];
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((action, idx) => {
-    const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === "icon";
-    const key = `action-skeleton-${idx}`;
-    if (isIconOnly) return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon" }, key);
-    if (action) {
-      return /* @__PURE__ */ jsxs("span", { inert: true, "aria-hidden": true, className: cn("relative inline-flex", fullWidth && "flex-1"), children: [
-        /* @__PURE__ */ jsx("span", { className: cn("invisible inline-flex", fullWidth && "flex-1"), children: renderRawActionButton(action, { fullWidth }) }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "absolute inset-0 h-full" })
-      ] }, key);
-    }
-    return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "default", className: fullWidth ? "flex-1" : void 0 }, key);
-  }) });
-}
-function MobileTriggerSkeleton() {
-  return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon" });
+function UnknownActionSkeleton({ shape, fullWidth }) {
+  if (shape === "icon") return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon" });
+  return /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "default", className: fullWidth ? "flex-1" : void 0 });
 }
 function PageActions({
   variant = "icon-buttons",
@@ -158,8 +144,9 @@ function PageActions({
   menuActions,
   selector,
   className,
-  loading
+  loading: loadingProp
 }) {
+  const loading = useLoadingScope() || loadingProp;
   if (variant === "icon-buttons") {
     return /* @__PURE__ */ jsx(
       IconButtonsVariant,
@@ -191,8 +178,9 @@ function IconButtonsVariant({
   menuActions,
   selector,
   className,
-  loading
+  loading: loadingProp
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const desktopActions = actions.filter((a) => !a.showOnlyMobile);
   const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
   const isSingleAction = actions.length === 1 && !actions[0].submenu?.length;
@@ -203,19 +191,19 @@ function IconButtonsVariant({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
-      loading ? /* @__PURE__ */ jsx(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
-        hasMenuActions && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: menuActions })
-      ] })
+      desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action, { inert: loading }) }, actionKey(action, idx))),
+      loading && desktopActions.length === 0 && !hasMenuActions && /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "icon" }),
+      hasMenuActions && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: menuActions, loading })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx(MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
+    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true, inert: loading }) : hasMobileMenuItems ? /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: mobileMenuGroups, loading }) : loading ? /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "icon" }) : null })
   ] });
 }
 function PrimaryButtonsVariant({
   actions,
   className,
-  loading
+  loading: loadingProp
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const sortedActions = [...actions].sort((a, b) => {
     if (a.variant === "accent" && b.variant !== "accent") return 1;
     if (a.variant !== "accent" && b.variant === "accent") return -1;
@@ -223,12 +211,14 @@ function PrimaryButtonsVariant({
   });
   const desktopActions = sortedActions.filter((a) => !a.showOnlyMobile);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cn("hidden items-center md:content-md:flex", ACTIONS_GAP, className), children: loading ? (
-      // No overflow trigger in this variant — an unknown action set settles
-      // into a labelled button, not a square one.
-      /* @__PURE__ */ jsx(ActionSkeletons, { actions: desktopActions, emptyFallback: "label" })
-    ) : desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
-    /* @__PURE__ */ jsx("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ jsx(MobileTriggerSkeleton, {}) : /* @__PURE__ */ jsx(CompactPrimaryActions, { actions: desktopActions }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("hidden items-center md:content-md:flex", ACTIONS_GAP, className), children: [
+      desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action, { inert: loading }) }, `desktop-${actionKey(action, idx)}`)),
+      loading && desktopActions.length === 0 && /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "label" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: [
+      /* @__PURE__ */ jsx(CompactPrimaryActions, { actions: desktopActions, loading }),
+      loading && desktopActions.length === 0 && /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "icon" })
+    ] }),
     /* @__PURE__ */ jsx(MobileBottomActions, { actions: sortedActions, loading })
   ] });
 }
@@ -237,8 +227,9 @@ function MenuPrimaryVariant({
   menuActions,
   selector,
   className,
-  loading
+  loading: loadingProp
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const desktopActions = actions.filter((a) => !a.showOnlyMobile);
   const hasMenuActions = menuActions.some((g) => g.items.length > 0);
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ...menuActions];
@@ -246,30 +237,31 @@ function MenuPrimaryVariant({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
-      loading ? /* @__PURE__ */ jsx(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        hasMenuActions && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: menuActions }),
-        desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
-      ] })
+      hasMenuActions && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: menuActions, loading }),
+      desktopActions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }, { inert: loading }) }, `desktop-${actionKey(action, idx)}`)),
+      loading && desktopActions.length === 0 && !hasMenuActions && /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "icon" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx(MobileTriggerSkeleton, {}) : hasMobileMenuItems || selector ? (
+    /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", className), children: hasMobileMenuItems || selector ? (
       // The selector rides into the menu as its header row: on mobile the
       // title row has no room for it, and hiding it entirely (what
       // `icon-buttons` does) would leave no way to switch views at all.
-      /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: mobileMenuGroups, header: selector })
-    ) : null })
+      /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: mobileMenuGroups, header: selector, loading })
+    ) : loading ? /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "icon" }) : null })
   ] });
 }
-function CompactPrimaryActions({ actions }) {
+function CompactPrimaryActions({ actions, loading: loadingProp }) {
+  const loading = useLoadingScope() || loadingProp;
   const foldable = actions.filter((action) => action.variant !== "accent" && !!action.label);
   const fold = foldable.length > 1;
   const inline = fold ? actions.filter((action) => !foldable.includes(action)) : actions;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    fold && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }] }),
-    inline.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action) }, `compact-${actionKey(action, idx)}`))
+    fold && /* @__PURE__ */ jsx(ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }], loading }),
+    inline.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action, { inert: loading }) }, `compact-${actionKey(action, idx)}`))
   ] });
 }
-function MobileBottomActions({ actions, loading }) {
-  return /* @__PURE__ */ jsx(
+function MobileBottomActions({ actions, loading: loadingProp }) {
+  const loading = useLoadingScope() || loadingProp;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -281,7 +273,10 @@ function MobileBottomActions({ actions, loading }) {
         "flex items-start p-[var(--spacing-system-lf)]",
         ACTIONS_GAP
       ),
-      children: loading ? /* @__PURE__ */ jsx(ActionSkeletons, { actions, fullWidth: true, emptyFallback: "label" }) : actions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action, { fullWidth: !!action.label }) }, `mobile-${actionKey(action, idx)}`))
+      children: [
+        actions.map((action, idx) => /* @__PURE__ */ jsx(React.Fragment, { children: renderActionButton(action, { fullWidth: !!action.label, inert: loading }) }, `mobile-${actionKey(action, idx)}`)),
+        loading && actions.length === 0 && /* @__PURE__ */ jsx(UnknownActionSkeleton, { shape: "label", fullWidth: true })
+      ]
     }
   );
 }

package/dist/components/ui/password-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/password-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC;AAE3E,kFAAkF;AAClF,QAAA,MAAM,aAAa,iHA0BjB,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/password-input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC;AAE3E,kFAAkF;AAClF,QAAA,MAAM,aAAa,iHA2BjB,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/password-input.js

@@ -4,6 +4,7 @@ import { forwardRef, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { EyeIcon } from "../icons-v2-generated/interface/eye-icon.js";
 import { EyeOffIcon } from "../icons-v2-generated/interface/eye-off-icon.js";
+import { Button } from "./button/index.js";
 import { Input } from "./input.js";
 const PasswordInput = forwardRef(({ disabled, className, ...props }, ref) => {
   const [visible, setVisible] = useState(false);
@@ -16,15 +17,16 @@ const PasswordInput = forwardRef(({ disabled, className, ...props }, ref) => {
       disabled,
       className: cn("[&_input]:text-ellipsis", className),
       endAdornment: /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-sm",
           type: "button",
           tabIndex: -1,
           disabled,
           "aria-label": visible ? "Hide password" : "Show password",
           onClick: () => setVisible((value) => !value),
-          className: "flex items-center text-ods-text-secondary transition-colors hover:text-ods-text-primary disabled:cursor-not-allowed",
-          children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6" })
+          children: /* @__PURE__ */ jsx(Icon, { className: "text-ods-text-secondary" })
         }
       ),
       ...props

package/dist/components/ui/people-cell.d.ts

@@ -34,12 +34,10 @@ export interface PersonCellProps {
      * (the landing quote chips).
      */
     size?: 'sm' | 'lg';
+    /** The person is still being read: the cell draws its skeleton at its size. A loading scope does the same. */
+    loading?: boolean;
 }
-export declare function PersonCell({ name, avatarUrl, secondary, fallbackName, onClick, actionTitle, size, }: PersonCellProps): import("react").JSX.Element;
-/** The cell while it loads: the SAME avatar box, gap and two lines (the name's type step, then the caption's). */
-export declare function PersonCellSkeleton({ size }: {
-    size?: PersonCellProps['size'];
-}): import("react").JSX.Element;
+export declare function PersonCell({ name, avatarUrl, secondary, fallbackName, onClick, actionTitle, size, loading, }: PersonCellProps): import("react").JSX.Element;
 export interface PeopleCellPerson {
     /** Stable render key (a profile id) — names can collide or be blank. */
     key?: string | number;

package/dist/components/ui/people-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"people-cell.d.ts","sourceRoot":"","sources":["../../../src/components/ui/people-cell.tsx"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAUD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,YAA2B,EAC3B,OAAO,EACP,WAAW,EACX,IAAW,GACZ,EAAE,eAAe,+BAkCjB;AAED,kHAAkH;AAClH,wBAAgB,kBAAkB,CAAC,EAAE,IAAW,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;CAAE,+BAWrF;AAED,MAAM,WAAW,gBAAgB;IAC/B,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAA2B,EAAE,EAAE,eAAe,+BAmClF"}
+{"version":3,"file":"people-cell.d.ts","sourceRoot":"","sources":["../../../src/components/ui/people-cell.tsx"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8GAA8G;IAC9G,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAUD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,YAA2B,EAC3B,OAAO,EACP,WAAW,EACX,IAAW,EACX,OAAO,GACR,EAAE,eAAe,+BAkCjB;AAgBD,MAAM,WAAW,gBAAgB;IAC/B,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAA2B,EAAE,EAAE,eAAe,+BAmClF"}