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

package/dist/components/ui/checkbox.d.ts

@@ -9,6 +9,16 @@ type CheckboxPrimitiveProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.
 export declare function booleanCheckedChange(handler: ((checked: boolean) => void) | undefined): CheckboxPrimitiveProps['onCheckedChange'];
 export interface CheckboxProps extends Omit<CheckboxPrimitiveProps, 'onCheckedChange'> {
     onCheckedChange?: (checked: boolean) => void;
+    /** The box's size, corners and placement over `CHECKBOX_BOX_CLASS`: read by the box and by its skeleton, so a host
+     *  that sizes the box (`CheckboxBlock`, `CheckboxWithDescription`) gets its skeleton at the same size. */
+    boxClassName?: string;
+    /** The checkmark's classes (its size when the box is sized). */
+    indicatorClassName?: string;
+    /**
+     * Whether the box is checked is still being read: the box is a skeleton of its own size (`boxClassName`). A loading
+     * scope does the same.
+     */
+    loading?: boolean;
 }
 /** The checkbox's box (its size and corners): read by the checkbox and by every skeleton that stands for one. */
 export declare const CHECKBOX_BOX_CLASS: string;

package/dist/components/ui/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,wBAAwB,EAA+B,MAAM,OAAO,CAAC;AAMnF,KAAK,sBAAsB,GAAG,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAEtF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,GAChD,sBAAsB,CAAC,iBAAiB,CAAC,CAE3C;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;IACpF,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,iHAAiH;AACjH,eAAO,MAAM,kBAAkB,QAAiD,CAAC;AAEjF,QAAA,MAAM,QAAQ,6GAiBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,wBAAwB,EAA+B,MAAM,OAAO,CAAC;AAQnF,KAAK,sBAAsB,GAAG,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAEtF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,GAChD,sBAAsB,CAAC,iBAAiB,CAAC,CAE3C;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;IACpF,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;8GAC0G;IAC1G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iHAAiH;AACjH,eAAO,MAAM,kBAAkB,QAAiD,CAAC;AAEjF,QAAA,MAAM,QAAQ,6GAuBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/checkbox.js

@@ -5,25 +5,32 @@ import { forwardRef } from "react";
 import { CONTROL_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { CheckboxCheckmarkIcon } from "../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 function booleanCheckedChange(handler) {
   return handler ? (checked) => handler(checked === true) : void 0;
 }
 const CHECKBOX_BOX_CLASS = `${CONTROL_SIZE.checkbox} shrink-0 rounded-sm`;
 const Checkbox = forwardRef(
-  ({ className, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
-    {
-      ref,
-      onCheckedChange: booleanCheckedChange(onCheckedChange),
-      className: cn(
-        CHECKBOX_BOX_CLASS,
-        "peer border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-ods-text-on-accent"), children: /* @__PURE__ */ jsx(CheckboxCheckmarkIcon, { size: 10 }) })
-    }
-  )
+  ({ className, boxClassName, indicatorClassName, onCheckedChange, loading: loadingProp, ...props }, ref) => {
+    const loading = useLoadingScope() || !!loadingProp;
+    if (loading) return /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(CHECKBOX_BOX_CLASS, boxClassName) });
+    return /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        ref,
+        onCheckedChange: booleanCheckedChange(onCheckedChange),
+        className: cn(
+          CHECKBOX_BOX_CLASS,
+          boxClassName,
+          "peer border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-ods-text-on-accent"), children: /* @__PURE__ */ jsx(CheckboxCheckmarkIcon, { size: 10, className: indicatorClassName }) })
+      }
+    );
+  }
 );
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export {

package/dist/components/ui/chevron-button.d.ts

@@ -1,11 +1,11 @@
 import { type ButtonHTMLAttributes } from 'react';
 interface ChevronButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     direction?: 'up' | 'down';
+    /** `sm` and `md` are the 32px icon button, `lg` the 44/48px one. */
     size?: 'sm' | 'md' | 'lg';
     isExpanded?: boolean;
-    backgroundColor?: string;
-    borderColor?: string;
 }
+/** An expand / collapse toggle: a quiet icon button whose chevron points the way the section will move. */
 declare const ChevronButton: import("react").ForwardRefExoticComponent<ChevronButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { ChevronButton };
 //# sourceMappingURL=chevron-button.d.ts.map

package/dist/components/ui/chevron-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chevron-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chevron-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAG9D,UAAU,kBAAmB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,kHA2BlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"chevron-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chevron-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAG9D,UAAU,kBAAmB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,oEAAoE;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,2GAA2G;AAC3G,QAAA,MAAM,aAAa,kHAoBlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/chevron-button.js

@@ -1,31 +1,24 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { ChevronUp, ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import { forwardRef } from "react";
-import { cn } from "../../utils/cn.js";
+import { Button } from "./button/index.js";
 const ChevronButton = forwardRef(
-  ({ className, direction = "down", size = "md", isExpanded, backgroundColor, borderColor, ...props }, ref) => {
-    const Icon = (isExpanded ? ChevronUp : ChevronDown) || (direction === "up" ? ChevronUp : ChevronDown);
-    const sizeClasses = {
-      sm: "h-4 w-4",
-      md: "h-5 w-5",
-      lg: "h-6 w-6"
-    };
+  ({ className, direction = "down", size = "md", isExpanded, ...props }, ref) => {
+    const pointsUp = isExpanded ?? direction === "up";
+    const Icon = pointsUp ? ChevronUp : ChevronDown;
     return /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
-        className: cn(
-          "inline-flex items-center justify-center rounded-md ring-offset-background transition-colors text-h6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          "h-10 px-4 py-2",
-          className
-        ),
-        style: {
-          backgroundColor,
-          borderColor
-        },
         ref,
+        type: "button",
+        variant: "transparent",
+        size: size === "lg" ? "icon" : "icon-sm",
+        "aria-expanded": isExpanded,
+        "aria-label": isExpanded ? "Collapse" : "Expand",
+        className,
         ...props,
-        children: /* @__PURE__ */ jsx(Icon, { className: sizeClasses[size] })
+        children: /* @__PURE__ */ jsx(Icon, {})
       }
     );
   }

package/dist/components/ui/color-preset-select.d.ts

@@ -23,6 +23,9 @@ export interface ColorPickerInputProps {
     onChange: (color: string) => void;
     disabled?: boolean;
     className?: string;
+    /** The color is still being read: the field draws its box with a bar for the value and cannot open. A loading
+     *  scope does the same. */
+    loading?: boolean;
 }
-export declare function ColorPickerInput({ value, onChange, disabled, className }: ColorPickerInputProps): import("react").JSX.Element;
+export declare function ColorPickerInput({ value, onChange, disabled, className, loading: loadingProp, }: ColorPickerInputProps): import("react").JSX.Element;
 //# sourceMappingURL=color-preset-select.d.ts.map

package/dist/components/ui/color-preset-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-preset-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-preset-select.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,2BAA2B,EAAE,SAAS,WAAW,EAa7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,2BAA2B,YAAY,CAAC;AAQrD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAqC,EACrC,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,+BA0CxB;AA6ID,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BA0D/F"}
+{"version":3,"file":"color-preset-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-preset-select.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,2BAA2B,EAAE,SAAS,WAAW,EAa7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,2BAA2B,YAAY,CAAC;AAQrD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAqC,EACrC,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,+BA0CxB;AA6ID,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;+BAC2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EAAE,WAAW,GACrB,EAAE,qBAAqB,+BAuEvB"}

package/dist/components/ui/color-preset-select.js

@@ -10,6 +10,7 @@ import { ActionsMenuDropdown } from "./actions-menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { Input } from "./input.js";
 import { InputTrigger } from "./input-trigger.js";
+import { LoadingWhen, useLoadingScope } from "./loading-scope.js";
 const TICKET_STATUS_COLOR_PRESETS = [
   { key: "green", label: "Green", color: "#5ea62e" },
   { key: "lime", label: "Lime", color: "#8bc34a" },
@@ -184,7 +185,14 @@ function HslInputs({ value, onChange }) {
     /* @__PURE__ */ jsx(ChannelInput, { value: hsl.l, min: 0, max: 100, ariaLabel: "Lightness", onCommit: (l) => update({ l }) })
   ] });
 }
-function ColorPickerInput({ value, onChange, disabled, className }) {
+function ColorPickerInput({
+  value,
+  onChange,
+  disabled,
+  className,
+  loading: loadingProp
+}) {
+  const loading = useLoadingScope() || !!loadingProp;
   const [open, setOpen] = useState(false);
   const [format, setFormat] = useState("HEX");
   const formatGroups = [
@@ -196,18 +204,22 @@ function ColorPickerInput({ value, onChange, disabled, className }) {
       }))
     }
   ];
+  const trigger = /* @__PURE__ */ jsx(
+    InputTrigger,
+    {
+      disabled,
+      "aria-label": "Pick custom color",
+      startIcon: /* @__PURE__ */ jsx(ColorSwatch, { color: value }),
+      selectedLabel: /* @__PURE__ */ jsx("span", { className: "uppercase", children: value }),
+      endIcon: /* @__PURE__ */ jsx(TriggerChevron, {}),
+      className: cn("group", className)
+    }
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx("span", { inert: true, "aria-hidden": true, className: "contents", children: /* @__PURE__ */ jsx(LoadingWhen, { loading: true, children: trigger }) });
+  }
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      InputTrigger,
-      {
-        disabled,
-        "aria-label": "Pick custom color",
-        startIcon: /* @__PURE__ */ jsx(ColorSwatch, { color: value }),
-        selectedLabel: /* @__PURE__ */ jsx("span", { className: "uppercase", children: value }),
-        endIcon: /* @__PURE__ */ jsx(TriggerChevron, {}),
-        className: cn("group", className)
-      }
-    ) }),
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {

package/dist/components/ui/color-swatch.d.ts

@@ -2,6 +2,7 @@ export interface ColorSwatchProps {
     color: string;
     className?: string;
 }
-/** Square color preview shared across color and status selectors. */
+/** Square color preview shared across color and status selectors. In a loading scope the color is read data not here
+ *  yet: the swatch draws its box as a skeleton. */
 export declare function ColorSwatch({ color, className }: ColorSwatchProps): import("react").JSX.Element;
 //# sourceMappingURL=color-swatch.d.ts.map

package/dist/components/ui/color-swatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-swatch.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAQjE"}
+{"version":3,"file":"color-swatch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-swatch.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;mDACmD;AACnD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAGjE"}

package/dist/components/ui/color-swatch.js

@@ -1,15 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
+const SWATCH_CLASS = "inline-block size-4 shrink-0 rounded-sm";
 function ColorSwatch({ color, className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: cn("inline-block size-4 shrink-0 rounded-sm", className),
-      style: { backgroundColor: color }
-    }
-  );
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(UnifiedSkeleton, { "aria-hidden": true, className: cn(SWATCH_CLASS, className) });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(SWATCH_CLASS, className), style: { backgroundColor: color } });
 }
 export {
   ColorSwatch

package/dist/components/ui/content-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/content-loader.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAgB,EAChB,KAAS,EACT,SAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,KAAiB,EACjB,MAAa,GACd,EAAE,kBAAkB,+BAmGpB;AAGD,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAEtE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC"}
+{"version":3,"file":"content-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/content-loader.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAKD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAgB,EAChB,KAAqC,EACrC,SAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,KAAiB,EACjB,MAAa,GACd,EAAE,kBAAkB,+BAyGpB;AAGD,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC;AAEtH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAEtE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gCAAgD,CAAC"}

package/dist/components/ui/content-loader.js

@@ -3,9 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { LoadingItems } from "./loading-scope.js";
+const CONTENT_LOADER_SKELETON_LINES = 3;
+const CONTENT_LOADER_SKELETON_ITEMS = 4;
 function ContentLoader({
   variant = "card",
-  items = 4,
+  items = CONTENT_LOADER_SKELETON_ITEMS,
   showTitle = true,
   className,
   containerClassName,
@@ -15,43 +18,43 @@ function ContentLoader({
   const renderCardSkeleton = () => /* @__PURE__ */ jsxs("div", { children: [
     showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
     /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-6 grid grid-cols-1 gap-6 content-md:grid-cols-4", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-6 grid grid-cols-1 gap-6 content-md:grid-cols-4", children: /* @__PURE__ */ jsx(LoadingItems, { count: items, children: () => /* @__PURE__ */ jsxs("div", { "data-loading-item": true, children: [
         /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-20 rounded" }),
         /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-32 rounded" })
-      ] }, i)) }),
+      ] }) }) }),
       /* @__PURE__ */ jsx("div", { className: "border-t border-ods-border pt-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-64 rounded" }) })
     ] })
   ] });
   const renderFormSkeleton = () => /* @__PURE__ */ jsxs("div", { children: [
     showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ods-card p-6", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ods-card p-6", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(LoadingItems, { count: items, children: () => /* @__PURE__ */ jsxs("div", { "data-loading-item": true, children: [
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-32 rounded" }),
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 rounded" })
-    ] }, i)) }) })
+    ] }) }) }) })
   ] });
   const renderDetailSkeleton = () => /* @__PURE__ */ jsxs("div", { children: [
     showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
     /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 content-lg:grid-cols-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "content-lg:col-span-2", children: [
         /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-4 h-64 rounded" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" }, i)) })
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(LoadingItems, { count: CONTENT_LOADER_SKELETON_LINES, children: () => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" }) }) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-4 h-32 rounded" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 rounded" }, i)) })
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(LoadingItems, { count: items, children: () => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 rounded", "data-loading-item": true }) }) })
       ] })
     ] }) })
   ] });
   const renderListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     showTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-6 h-8 w-64 rounded" }),
-    Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx(LoadingItems, { count: items, children: () => /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-4", "data-loading-item": true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded" }),
       /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
         /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-3/4 rounded" }),
         /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded" })
       ] }),
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20 rounded" })
-    ] }) }, i))
+    ] }) }) })
   ] });
   const renderSkeleton = () => {
     switch (variant) {

package/dist/components/ui/cursor-pagination.d.ts

@@ -7,6 +7,10 @@ export interface CursorPaginationProps {
     currentCount?: number;
     totalCount?: number | null;
     itemName?: string;
+    /**
+     * The pager's page is being read: every button is disabled. Before the first count is known (no `currentCount`), and
+     * inside a loading scope, the pager draws its skeleton: the count line a bar, its own buttons real and inert.
+     */
     loading?: boolean;
     onNext?: (cursor: string) => void;
     onPrevious?: (cursor: string) => void;
@@ -16,14 +20,7 @@ export interface CursorPaginationProps {
     compact?: boolean;
     resetButtonLabel?: string;
     resetButtonIcon?: 'home' | 'rotate';
-    /** @internal The skeleton's state: the count line a bar, the buttons drawn but inert. */
-    skeleton?: boolean;
 }
-export declare function CursorPagination({ hasNextPage, hasPreviousPage, isFirstPage, startCursor, endCursor, currentCount, totalCount, itemName, loading, onNext, onPrevious, onReset, className, showInfo, compact, resetButtonLabel, resetButtonIcon, skeleton, }: CursorPaginationProps): import("react").JSX.Element;
-/**
- * The pager while its page is read: the same row, the count line as a bar, and the pager's own buttons (their labels
- * are the pager's words) drawn inert. Takes the pager's configuration; its cursors and counts are not known yet.
- */
-export declare function CursorPaginationSkeleton(props: Pick<CursorPaginationProps, 'hasPreviousPage' | 'onPrevious' | 'onReset' | 'className' | 'showInfo' | 'compact' | 'resetButtonLabel' | 'resetButtonIcon'>): import("react").JSX.Element;
+export declare function CursorPagination({ hasNextPage, hasPreviousPage, isFirstPage, startCursor, endCursor, currentCount, totalCount, itemName, loading: loadingProp, onNext, onPrevious, onReset, className, showInfo, compact, resetButtonLabel, resetButtonIcon, }: CursorPaginationProps): import("react").JSX.Element;
 export declare function CursorPaginationSimple({ hasNextPage, hasPreviousPage, isFirstPage, onNext, onPrevious, onReset, loading, className, }: Pick<CursorPaginationProps, 'hasNextPage' | 'hasPreviousPage' | 'isFirstPage' | 'onNext' | 'onPrevious' | 'onReset' | 'loading' | 'className'>): import("react").JSX.Element;
 //# sourceMappingURL=cursor-pagination.d.ts.map

package/dist/components/ui/cursor-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cursor-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/cursor-pagination.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACpC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,eAAe,EACf,WAAkB,EAClB,WAAW,EACX,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAkB,EAClB,OAAe,EACf,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAe,EACf,OAAe,EACf,gBAA0B,EAC1B,eAAwB,EACxB,QAAgB,GACjB,EAAE,qBAAqB,+BA6FvB;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,IAAI,CACT,qBAAqB,EACnB,iBAAiB,GACjB,YAAY,GACZ,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,kBAAkB,GAClB,iBAAiB,CACpB,+BAGF;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,eAAe,EACf,WAAkB,EAClB,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAe,EACf,SAAS,GACV,EAAE,IAAI,CACL,qBAAqB,EACrB,aAAa,GAAG,iBAAiB,GAAG,aAAa,GAAG,QAAQ,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAClH,+BAuCA"}
+{"version":3,"file":"cursor-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/cursor-pagination.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACrC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,eAAe,EACf,WAAkB,EAClB,WAAW,EACX,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAkB,EAClB,OAAO,EAAE,WAAmB,EAC5B,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAe,EACf,OAAe,EACf,gBAA0B,EAC1B,eAAwB,GACzB,EAAE,qBAAqB,+BAiGvB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,eAAe,EACf,WAAkB,EAClB,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAe,EACf,SAAS,GACV,EAAE,IAAI,CACL,qBAAqB,EACrB,aAAa,GAAG,iBAAiB,GAAG,aAAa,GAAG,QAAQ,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAClH,+BAuCA"}

package/dist/components/ui/cursor-pagination.js

@@ -4,6 +4,7 @@ import { ChevronLeft, ChevronRight, RotateCcw, Home } from "lucide-react";
 import { cn } from "../../utils/cn.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "./button/index.js";
+import { useLoadingScope } from "./loading-scope.js";
 function CursorPagination({
   hasNextPage,
   hasPreviousPage,
@@ -13,7 +14,7 @@ function CursorPagination({
   currentCount,
   totalCount,
   itemName = "items",
-  loading = false,
+  loading: loadingProp = false,
   onNext,
   onPrevious,
   onReset,
@@ -21,9 +22,10 @@ function CursorPagination({
   showInfo = true,
   compact = false,
   resetButtonLabel = "First",
-  resetButtonIcon = "home",
-  skeleton = false
+  resetButtonIcon = "home"
 }) {
+  const loading = useLoadingScope() || loadingProp;
+  const skeleton = loading && !currentCount;
   const handleNext = () => {
     if (hasNextPage && endCursor && onNext) {
       onNext(endCursor);
@@ -95,9 +97,6 @@ function CursorPagination({
     ] })
   ] });
 }
-function CursorPaginationSkeleton(props) {
-  return /* @__PURE__ */ jsx(CursorPagination, { ...props, hasNextPage: false, skeleton: true });
-}
 function CursorPaginationSimple({
   hasNextPage,
   hasPreviousPage,
@@ -148,6 +147,5 @@ function CursorPaginationSimple({
 }
 export {
   CursorPagination,
-  CursorPaginationSimple,
-  CursorPaginationSkeleton
+  CursorPaginationSimple
 };

package/dist/components/ui/dashboard-info-card.d.ts

@@ -90,7 +90,8 @@ export interface DashboardInfoCardProps {
     /**
      * While `loading`: hold the percentage's box (plain "(NN%)" text, or a `Tag` when
      * `percentageDisplay` / `progressVariant` would draw one), because the loaded card will show
-     * a percentage. Default `false`.
+     * a percentage. Default: `showProgress` or a percentage drawn as a tag (`percentageDisplay="tag"`, or a
+     * `warning`/`error` `progressVariant`), the cards that show one.
      */
     loadingShowsPercentage?: boolean;
     /**
@@ -98,11 +99,16 @@ export interface DashboardInfoCardProps {
      * whose loaded state will carry one. Default `false`.
      */
     loadingShowsSubValue?: boolean;
+    /**
+     * While `loading`: the title is read too, so its line is a bar even when a `title` is passed (an empty `title`
+     * already draws the bar). `titleSlot` and `titleTag` are left as given. Default `false`.
+     */
+    titleLoading?: boolean;
+    /**
+     * While `loading`: the icon is read too (it depends on the figure), so the icon slot is a skeleton of the slot's
+     * own box, whether or not an `icon` is passed. Default `false`.
+     */
+    iconLoading?: boolean;
 }
-export declare function DashboardInfoCard({ title, titleSlot, titleTag, icon, value, percentage, showProgress, progressVariant, percentageDisplay, progressOverflow, progressSize, className, href, tooltip, valueClassName, subValue, caption, loading: loadingProp, loadingShowsPercentage, loadingShowsSubValue, }: DashboardInfoCardProps): import("react").JSX.Element;
-/**
- * A DashboardInfoCard while its figure is read: the same card with `loading` set, so it is the loaded card's box.
- * The title, title slot, tag and icon it is given are the page's own and draw as they are.
- */
-export declare function DashboardInfoCardSkeleton(props: Omit<DashboardInfoCardProps, 'value' | 'loading'>): import("react").JSX.Element;
+export declare function DashboardInfoCard({ title, titleSlot, titleTag, icon, value, percentage, showProgress, progressVariant, percentageDisplay, progressOverflow, progressSize, className, href, tooltip, valueClassName, subValue, caption, loading: loadingProp, loadingShowsPercentage: loadingShowsPercentageProp, loadingShowsSubValue, titleLoading, iconLoading, }: DashboardInfoCardProps): import("react").JSX.Element;
 //# sourceMappingURL=dashboard-info-card.d.ts.map

package/dist/components/ui/dashboard-info-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-info-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dashboard-info-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAoB,KAAK,wBAAwB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAKpH;;;;;;;GAOG;AACH,MAAM,MAAM,kCAAkC,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhG,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,6BAA6B,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,YAAoB,EACpB,eAAe,EACf,iBAA0B,EAC1B,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,EAAE,WAAmB,EAC5B,sBAA8B,EAC9B,oBAA4B,GAC7B,EAAE,sBAAsB,+BAoNxB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,SAAS,CAAC,+BAEjG"}
+{"version":3,"file":"dashboard-info-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dashboard-info-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAoB,KAAK,wBAAwB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAKpH;;;;;;;GAOG;AACH,MAAM,MAAM,kCAAkC,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhG,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,6BAA6B,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAKD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,YAAoB,EACpB,eAAe,EACf,iBAA0B,EAC1B,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,EAAE,WAAmB,EAC5B,sBAAsB,EAAE,0BAA0B,EAClD,oBAA4B,EAC5B,YAAoB,EACpB,WAAmB,GACpB,EAAE,sBAAsB,+BA+NxB"}

package/dist/components/ui/dashboard-info-card.js

@@ -8,6 +8,7 @@ import { CircularProgress } from "./circular-progress.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
 import { useLoadingScope } from "./loading-scope.js";
 import { Tag } from "./tag.js";
+const DASHBOARD_INFO_CARD_ICON_BOX_CLASS = "size-8 shrink-0 rounded-sm content-md:size-14";
 function DashboardInfoCard({
   title,
   titleSlot,
@@ -27,18 +28,21 @@ function DashboardInfoCard({
   subValue,
   caption,
   loading: loadingProp = false,
-  loadingShowsPercentage = false,
-  loadingShowsSubValue = false
+  loadingShowsPercentage: loadingShowsPercentageProp,
+  loadingShowsSubValue = false,
+  titleLoading = false,
+  iconLoading = false
 }) {
   const inScope = useLoadingScope();
   const loading = loadingProp || inScope;
   const hasCaption = loading ? caption != null : Boolean(caption);
   const formattedValue = typeof value === "number" ? value.toLocaleString() : value;
   const percentageAsTag = percentageDisplay === "tag" || percentageDisplay === "auto" && (progressVariant === "warning" || progressVariant === "error");
+  const loadingShowsPercentage = loadingShowsPercentageProp ?? (showProgress || percentageAsTag);
   const renderPercentage = () => {
     if (loading) {
       if (!loadingShowsPercentage) return null;
-      return percentageAsTag ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-12 shrink-0 rounded-md" }) : /* @__PURE__ */ jsx("p", { className: "text-h4", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-12" }) });
+      return percentageAsTag ? /* @__PURE__ */ jsx(Tag, { loading: true, label: "", className: "w-12" }) : /* @__PURE__ */ jsx("p", { className: "text-h4", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-12" }) });
     }
     if (percentage === void 0) return null;
     if (percentageAsTag) {
@@ -103,11 +107,20 @@ function DashboardInfoCard({
     )) });
   };
   const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-sm border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary content-md:size-14", children: /* @__PURE__ */ jsx("span", { className: "flex size-4 items-center justify-center content-md:size-6 [&>*]:size-full", children: icon }) }),
+    loading && iconLoading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: DASHBOARD_INFO_CARD_ICON_BOX_CLASS }) : icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          DASHBOARD_INFO_CARD_ICON_BOX_CLASS,
+          "flex items-center justify-center border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary"
+        ),
+        children: /* @__PURE__ */ jsx("span", { className: "flex size-4 items-center justify-center content-md:size-6 [&>*]:size-full", children: icon })
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
         titleSlot ?? // A title still being read (empty while loading) is a bar of its line, like no title.
-        (title !== void 0 && !(loading && !title) ? /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h5", children: title }) : loading && /* @__PURE__ */ jsx("p", { className: "text-h5", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-20" }) })),
+        (title !== void 0 && !(loading && (!title || titleLoading)) ? /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h5", children: title }) : loading && /* @__PURE__ */ jsx("p", { className: "text-h5", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-20" }) })),
         titleTag
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
@@ -141,10 +154,6 @@ function DashboardInfoCard({
   }
   return /* @__PURE__ */ jsx("div", { "aria-busy": loading || void 0, className: cn(baseClassName, captionClassName, className), children: cardContent });
 }
-function DashboardInfoCardSkeleton(props) {
-  return /* @__PURE__ */ jsx(DashboardInfoCard, { ...props, value: "", loading: true });
-}
 export {
-  DashboardInfoCard,
-  DashboardInfoCardSkeleton
+  DashboardInfoCard
 };

package/dist/components/ui/data-attribution.d.ts

@@ -17,12 +17,6 @@ export interface DataAttributionProps {
  * same text.
  */
 export declare function DataAttribution({ icon, source, lastUpdated, action }: DataAttributionProps): import("react").JSX.Element;
-/**
- * `DataAttribution` while it is read: the same line (two lines below `content-sm`, one row above it), its own
- * words drawn for real, the source and the date bars of the line's height, so the line does not move when it
- * fills in. The source's mark is the one given (a brand glyph is static), else a box of its size.
- */
-export declare function DataAttributionSkeleton({ icon, action }?: Pick<DataAttributionProps, 'icon' | 'action'>): import("react").JSX.Element;
 /**
  * THE sync line of a shared page whose records an API reads from a mirror (the roadmap and the delivery board:
  * ClickUp; the ticket center: HubSpot; the docs and the legal documents: GitHub). The page draws whatever `sync`

package/dist/components/ui/data-attribution.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-attribution.d.ts","sourceRoot":"","sources":["../../../src/components/ui/data-attribution.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAqB,KAAK,QAAQ,EAAuB,MAAM,uBAAuB,CAAC;AAU9F,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,8GAA8G;IAC9G,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BAa1F;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,QAAQ,CAAM,+BAqB3G;AASD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EAAE,WAAmB,EAC5B,MAAa,EACb,MAAc,EACd,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,sCAkBA"}
+{"version":3,"file":"data-attribution.d.ts","sourceRoot":"","sources":["../../../src/components/ui/data-attribution.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAqB,KAAK,QAAQ,EAAuB,MAAM,uBAAuB,CAAC;AAU9F,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,8GAA8G;IAC9G,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BAa1F;AAqCD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EAAE,WAAmB,EAC5B,MAAa,EACb,MAAc,EACd,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,sCAkBA"}

package/dist/components/ui/data-attribution.js

@@ -81,6 +81,5 @@ function DataSyncLine({
 }
 export {
   DataAttribution,
-  DataAttributionSkeleton,
   DataSyncLine
 };

package/dist/components/ui/data-table/data-table-body.d.ts

@@ -3,6 +3,12 @@ import type { NoDataProps } from '../no-data';
 export interface DataTableBodyProps<T = unknown> {
     /** Show skeleton rows while `loading` is true and data is empty. */
     loading?: boolean;
+    /**
+     * While loading, the table holds placeholder rows (the host gives `useDataTable` one full page of them) and the body
+     * draws them with their REAL cells in a loading scope: every part of a cell draws its own loading form, so the
+     * loading row is the loaded row's own layout. Without it a loading row is one bar per column.
+     */
+    loadingCells?: boolean;
     /** @deprecated Use `emptyState` instead. Legacy single-line message; mapped to the empty state's title. */
     emptyMessage?: string;
     /** Props for the empty state (NoData) shown when there are no rows. Overrides `emptyMessage`. */
@@ -84,5 +90,5 @@ export interface DataTableBodyProps<T = unknown> {
  * `onRowClick` / `rowHref` / `rowClassName` (if function) with `useCallback`
  * in the consumer to get the full benefit.
  */
-export declare function DataTableBody<T = unknown>({ loading: loadingProp, emptyMessage, emptyState, skeletonRows: skeletonRowsProp, loadingRegion, className, rowClassName, compact, rowHeightClassName, onRowClick, rowHref, minRows, renderSubRow, }: DataTableBodyProps<T>): import("react").JSX.Element;
+export declare function DataTableBody<T = unknown>({ loading: loadingProp, loadingCells, emptyMessage, emptyState, skeletonRows: skeletonRowsProp, loadingRegion, className, rowClassName, compact, rowHeightClassName, onRowClick, rowHref, minRows, renderSubRow, }: DataTableBodyProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=data-table-body.d.ts.map

package/dist/components/ui/data-table/data-table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAQ9C,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO;IAC7C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACvC;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,EACzC,OAAO,EAAE,WAAW,EACpB,YAAY,EACZ,UAAU,EACV,YAAY,EAAE,gBAAgB,EAC9B,aAAoB,EACpB,SAAS,EACT,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAkGvB"}
+{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAS9C,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO;IAC7C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACvC;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,EACzC,OAAO,EAAE,WAAW,EACpB,YAAoB,EACpB,YAAY,EACZ,UAAU,EACV,YAAY,EAAE,gBAAgB,EAC9B,aAAoB,EACpB,SAAS,EACT,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAwIvB"}