@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/dist/components/ui/checkbox-block.js

@@ -1,11 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
-import { CheckboxCheckmarkIcon } from "../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon.js";
-import { booleanCheckedChange } from "./checkbox.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { Checkbox } from "./checkbox.js";
+import { Label } from "./label.js";
+import { loadingItemProps, useLoadingScope } from "./loading-scope.js";
 import { RequiredMark } from "./required-mark.js";
+const CHECKBOX_BLOCK_LABEL_BAR_CLASS = "w-40 max-w-full";
+const CHECKBOX_BLOCK_BOX_CLASS = "rounded-[6px] content-md:size-6";
 const CheckboxBlock = forwardRef(
   ({
     id,
@@ -19,98 +22,112 @@ const CheckboxBlock = forwardRef(
     disabled,
     required,
     error,
-    className
-  }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full flex-col", className), children: [
-    /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: id,
-        "data-invalid": error ? true : void 0,
-        className: cn(
-          "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset",
-          // Trailing content stacks full-width below the text on mobile.
-          trailing && "flex-wrap content-md:flex-nowrap",
-          "p-[var(--spacing-system-sf)]",
-          !description && "min-h-[44px] content-md:min-h-[48px]",
-          description && "min-h-[60px] content-md:min-h-[64px]",
-          "bg-ods-card ring-ods-border",
-          "cursor-pointer transition-colors duration-200",
-          // States mirror Input: hover / active move the BACKGROUND, the ring
-          // stays put. Disabled swaps to the flat `ods-bg` fill and greys the
-          // text + the box instead of fading the whole block, so a disabled block
-          // reads the same as a disabled field. The greying itself lives on the
-          // TEXT COLUMN below, not here: as a descendant rule on the label it also
-          // repainted the checked INDICATOR (Radix renders it as a `span`, and the
-          // checkmark svg inherits `currentColor`) and whatever `trailing` renders
-          // — a `Tag`'s label is a span too, and it went invisible against its own
-          // fill in the light theme.
-          !disabled && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
-          disabled && "cursor-not-allowed bg-ods-bg",
-          error && "ring-ods-error"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            CheckboxPrimitive.Root,
-            {
-              ref,
-              id,
-              checked,
-              defaultChecked,
-              onCheckedChange: booleanCheckedChange(onCheckedChange),
-              disabled,
-              "aria-required": required || void 0,
-              "aria-invalid": error ? true : void 0,
-              className: cn(
-                "h-4 w-4 shrink-0 content-md:h-6 content-md:w-6",
-                "rounded-[6px] border-2",
-                error ? "border-ods-error" : "border-[var(--color-border-strong)]",
-                "bg-ods-card",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card",
-                // Disabled: the EMPTY box dims with the text instead of the whole
-                // block fading. A checked box keeps its accent fill — greying it too
-                // would bury the checkmark, and "on but locked" has to stay readable.
-                "disabled:cursor-not-allowed",
-                "disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg",
-                "data-[state=checked]:border-[var(--color-accent-primary)] data-[state=checked]:bg-[var(--color-accent-primary)]"
-              ),
-              children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-ods-text-on-accent", children: /* @__PURE__ */ jsx(CheckboxCheckmarkIcon, { className: "h-2 w-2 content-md:h-2.5 content-md:w-2.5" }) })
-            }
+    loading: loadingProp,
+    className,
+    ...props
+  }, ref) => {
+    const loading = useLoadingScope() || !!loadingProp;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full flex-col", className), ...loadingItemProps(props), children: [
+      /* @__PURE__ */ jsxs(
+        Label,
+        {
+          variant: "surface",
+          htmlFor: id,
+          "data-invalid": error ? true : void 0,
+          className: cn(
+            "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset",
+            // Trailing content stacks full-width below the text on mobile.
+            trailing && "flex-wrap content-md:flex-nowrap",
+            "p-[var(--spacing-system-sf)]",
+            !description && "min-h-[44px] content-md:min-h-[48px]",
+            description && "min-h-[60px] content-md:min-h-[64px]",
+            "bg-ods-card ring-ods-border",
+            "cursor-pointer transition-colors duration-200",
+            // States mirror Input: hover / active move the BACKGROUND, the ring
+            // stays put. Disabled swaps to the flat `ods-bg` fill and greys the
+            // text + the box instead of fading the whole block, so a disabled block
+            // reads the same as a disabled field. The greying itself lives on the
+            // TEXT COLUMN below, not here: as a descendant rule on the label it also
+            // repainted the checked INDICATOR (Radix renders it as a `span`, and the
+            // checkmark svg inherits `currentColor`) and whatever `trailing` renders
+            // — a `Tag`'s label is a span too, and it went invisible against its own
+            // fill in the light theme.
+            !disabled && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
+            disabled && "cursor-not-allowed bg-ods-bg",
+            error && "ring-ods-error"
           ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex min-w-0 flex-1 flex-col justify-center",
-                // Direct children only — these are the two component-owned wrappers.
-                // `label` and `description` are ReactNode (rich text, inline links),
-                // so a descendant rule would repaint content the caller styled itself.
-                disabled && "[&>span]:text-ods-text-disabled"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: cn(
-                      "!leading-5 text-h4 content-md:!leading-6",
-                      "select-none text-ods-text-primary",
-                      truncateLabel ? "block truncate" : "break-words"
-                    ),
-                    children: [
-                      label,
-                      required && /* @__PURE__ */ jsx(RequiredMark, {})
-                    ]
-                  }
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                ref,
+                id,
+                checked,
+                defaultChecked,
+                onCheckedChange,
+                disabled,
+                loading: loadingProp,
+                "aria-required": required || void 0,
+                "aria-invalid": error ? true : void 0,
+                boxClassName: CHECKBOX_BLOCK_BOX_CLASS,
+                indicatorClassName: "h-2 w-2 content-md:h-2.5 content-md:w-2.5",
+                className: cn(
+                  "border-2",
+                  error ? "border-ods-error" : "border-[var(--color-border-strong)]",
+                  "bg-ods-card",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card",
+                  // Disabled: the EMPTY box dims with the text instead of the whole
+                  // block fading. A checked box keeps its accent fill — greying it too
+                  // would bury the checkmark, and "on but locked" has to stay readable.
+                  "disabled:cursor-not-allowed disabled:opacity-100",
+                  "disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg",
+                  "data-[state=checked]:border-[var(--color-accent-primary)] data-[state=checked]:bg-[var(--color-accent-primary)]"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex min-w-0 flex-1 flex-col justify-center",
+                  // Direct children only — these are the two component-owned wrappers.
+                  // `label` and `description` are ReactNode (rich text, inline links),
+                  // so a descendant rule would repaint content the caller styled itself.
+                  disabled && "[&>span]:text-ods-text-disabled"
                 ),
-                description && /* @__PURE__ */ jsx("span", { className: cn("!leading-4 text-h6", "select-none break-words text-ods-text-secondary"), children: description })
-              ]
-            }
-          ),
-          trailing && /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 items-center content-md:ml-auto content-md:w-auto", children: trailing })
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx("p", { className: "absolute bottom-0 left-0 right-0 translate-y-full truncate text-ods-error text-h6", title: error, children: error })
-  ] })
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "!leading-5 text-h4 content-md:!leading-6",
+                        "select-none text-ods-text-primary",
+                        truncateLabel ? "block truncate" : "break-words"
+                      ),
+                      children: [
+                        loading && label === null ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: CHECKBOX_BLOCK_LABEL_BAR_CLASS }) : label,
+                        required && /* @__PURE__ */ jsx(RequiredMark, {})
+                      ]
+                    }
+                  ),
+                  description && /* @__PURE__ */ jsx("span", { className: cn("!leading-4 text-h6", "select-none break-words text-ods-text-secondary"), children: description })
+                ]
+              }
+            ),
+            trailing && /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 items-center content-md:ml-auto content-md:w-auto", children: trailing })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "absolute bottom-0 left-0 right-0 translate-y-full truncate text-ods-error text-h6",
+          title: error,
+          children: error
+        }
+      )
+    ] });
+  }
 );
 CheckboxBlock.displayName = "CheckboxBlock";
 export {

package/dist/components/ui/checkbox-with-description.d.ts

@@ -5,6 +5,11 @@ interface CheckboxWithDescriptionProps {
     title: string;
     description: string;
     disabled?: boolean;
+    /**
+     * Whether the box is checked is still being read: the title and description are drawn for real and the box is a
+     * skeleton of the box's own size. A loading scope does the same.
+     */
+    loading?: boolean;
     className?: string;
 }
 declare const CheckboxWithDescription: import("react").ForwardRefExoticComponent<CheckboxWithDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/checkbox-with-description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-with-description.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox-with-description.tsx"],"names":[],"mappings":"AASA,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,uBAAuB,yHAmC5B,CAAC;AAGF,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACnC,YAAY,EAAE,4BAA4B,EAAE,CAAC"}
+{"version":3,"file":"checkbox-with-description.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox-with-description.tsx"],"names":[],"mappings":"AAOA,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,QAAA,MAAM,uBAAuB,yHAkC5B,CAAC;AAGF,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACnC,YAAY,EAAE,4BAA4B,EAAE,CAAC"}

package/dist/components/ui/checkbox-with-description.js

@@ -1,50 +1,50 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
-import { CheckboxCheckmarkIcon } from "../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon.js";
-import { booleanCheckedChange } from "./checkbox.js";
+import { Checkbox } from "./checkbox.js";
 import { Label } from "./label.js";
+const CHECKBOX_WITH_DESCRIPTION_BOX_CLASS = "mt-0.5 size-5";
 const CheckboxWithDescription = forwardRef(
-  ({ id, checked, onCheckedChange, title, description, disabled, className }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-4",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          CheckboxPrimitive.Root,
-          {
-            id,
-            checked,
-            onCheckedChange: booleanCheckedChange(onCheckedChange),
-            disabled,
-            className: cn(
-              "peer mt-0.5 h-5 w-5 shrink-0 rounded-sm border border-ods-border bg-ods-bg 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"
-            ),
-            children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-ods-text-on-accent"), children: /* @__PURE__ */ jsx(CheckboxCheckmarkIcon, { size: 10 }) })
-          }
+  ({ id, checked, onCheckedChange, title, description, disabled, loading: loadingProp, className }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-4",
+          disabled && "cursor-not-allowed opacity-50",
+          className
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        children: [
           /* @__PURE__ */ jsx(
-            Label,
+            Checkbox,
             {
-              htmlFor: id,
-              spacing: "tight",
-              className: cn("cursor-pointer leading-none", disabled && "cursor-not-allowed"),
-              children: title
+              id,
+              checked,
+              onCheckedChange,
+              disabled,
+              loading: loadingProp,
+              boxClassName: CHECKBOX_WITH_DESCRIPTION_BOX_CLASS,
+              className: "bg-ods-bg"
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h6", children: description })
-        ] })
-      ]
-    }
-  )
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: id,
+                spacing: "tight",
+                className: cn("cursor-pointer leading-none", disabled && "cursor-not-allowed"),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h6", children: description })
+          ] })
+        ]
+      }
+    );
+  }
 );
 CheckboxWithDescription.displayName = "CheckboxWithDescription";
 export {

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"}