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

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

@@ -5,7 +5,9 @@ import { cva } from "class-variance-authority";
 import React from "react";
 import Link from "../../../embed-shims/next-link.js";
 import { cn } from "../../../utils/cn.js";
+import { loadingItemProps } from "../loading-scope.js";
 import {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS,
   buttonSurfaceClasses,
   outlineBorderClasses,
@@ -33,7 +35,15 @@ const buttonVariants = cva(
         inverted: buttonSurfaceClasses.inverted,
         glyph: buttonSurfaceClasses.glyph,
         overlay: buttonSurfaceClasses.overlay,
-        link: buttonSurfaceClasses.link
+        link: buttonSurfaceClasses.link,
+        // The kinds that are not a plain push button own their whole box (`BUTTON_KIND_CLASS`); resolved
+        // before this map is read, so `size` never reaches them. The entries only type the prop.
+        field: "",
+        row: "",
+        tab: "",
+        chip: "",
+        card: "",
+        cell: ""
       },
       size: BUTTON_SIZE_CLASS,
       // Label typography axis (Figma 133-740). `bold` is the classic h3-bold
@@ -65,6 +75,23 @@ const buttonVariants = cva(
     compoundVariants: [
       // The trailing half as an icon button is the design's 40px chevron cell, at every breakpoint.
       { attach: "end", size: "icon", class: "w-10 px-0 md:w-10" },
+      { attach: "end", size: "small", class: "w-6 px-0 md:w-8" },
+      // The seam between two attached halves of a filled button: a 1px darker edge on the trailing half.
+      {
+        attach: "end",
+        variant: "accent",
+        class: cn("border-l", splitDividerColorClasses.accent, "disabled:border-ods-disabled")
+      },
+      {
+        attach: "end",
+        variant: "destructive",
+        class: cn("border-l", splitDividerColorClasses.destructive, "disabled:border-ods-disabled")
+      },
+      {
+        attach: "end",
+        variant: "warning",
+        class: cn("border-l", splitDividerColorClasses.warning, "disabled:border-ods-disabled")
+      },
       { size: "small", class: "[&_svg]:h-4 [&_svg]:w-4" },
       // Comes after the size classes, so cn()'s tailwind-merge resolves the
       // ods-typography group in favour of text-h4.
@@ -205,7 +232,8 @@ const Button = React.forwardRef(function ButtonImpl({
   ...props
 }, ref) {
   const isDisabled = disabled || loading;
-  const useSplitLayout = !!splitIcon && (size === "default" || size === "small" || size === void 0);
+  const kind = variant && variant in BUTTON_KIND_CLASS ? variant : null;
+  const useSplitLayout = !kind && !!splitIcon && (size === "default" || size === "small" || size === void 0);
   if (useSplitLayout) {
     const safeSize = size ?? "default";
     const safeVariant = variant ?? "accent";
@@ -247,6 +275,7 @@ const Button = React.forwardRef(function ButtonImpl({
           className: cn(shellClasses, isDisabled && "pointer-events-none"),
           onClick,
           "aria-label": props["aria-label"],
+          ...loadingItemProps(props),
           children: splitContent
         }
       );
@@ -270,13 +299,14 @@ const Button = React.forwardRef(function ButtonImpl({
           tabIndex: isDisabled ? -1 : void 0,
           className: cn(shellClasses, isDisabled && "pointer-events-none"),
           onClick: splitAnchor.onClick,
+          ...loadingItemProps(props),
           children: splitContent
         }
       );
     }
     return /* @__PURE__ */ jsx("button", { ref, className: shellClasses, disabled: isDisabled, onClick, ...props, children: splitContent });
   }
-  const classes = cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
+  const classes = kind ? cn(BUTTON_KIND_CLASS[kind], loading && "relative", fullWidth && "w-full", className) : cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
   if (asChild) {
     return /* @__PURE__ */ jsx(Slot, { ref, className: classes, ...props, children });
   }

package/dist/components/ui/button/index.d.ts

@@ -1,4 +1,4 @@
 export * from './button';
 export * from './split-button';
-export { BUTTON_SIZE_CLASS, type ButtonSizeKey } from './button-styles';
+export { BUTTON_KIND_CLASS, BUTTON_SIZE_CLASS, type ButtonKind, type ButtonSizeKey } from './button-styles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/ui/button/index.js

@@ -1,6 +1,7 @@
 export * from "./button.js";
 export * from "./split-button.js";
-import { BUTTON_SIZE_CLASS } from "./button-styles.js";
+import { BUTTON_KIND_CLASS, BUTTON_SIZE_CLASS } from "./button-styles.js";
 export {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS
 };

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

@@ -1,13 +1,6 @@
-import { type VariantProps } from 'class-variance-authority';
 import React from 'react';
-declare const splitHalfVariants: (props?: ({
-    variant?: "accent" | "outline" | "transparent" | "destructive" | "warning" | null | undefined;
-    size?: "small" | "default" | null | undefined;
-    side?: "main" | "icon" | null | undefined;
-    soloOnMobile?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type SplitButtonVariant = NonNullable<VariantProps<typeof splitHalfVariants>['variant']>;
-type SplitButtonSize = NonNullable<VariantProps<typeof splitHalfVariants>['size']>;
+type SplitButtonVariant = 'accent' | 'outline' | 'transparent' | 'destructive' | 'warning';
+type SplitButtonSize = 'default' | 'small';
 interface SplitButtonIconAction {
     icon: React.ReactNode;
     /** The icon half is interactive but has no visible text — needs an accessible name. */

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,QAAA,MAAM,iBAAiB;;;;;8EA8DrB,CAAC;AAEH,KAAK,kBAAkB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AACzF,KAAK,eAAe,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEnF,UAAU,qBAAqB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,EAAE,qBAAqB,CAAC;CACnC;AA6DD,QAAA,MAAM,WAAW,yFAiEf,CAAC;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,kBAAkB,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,SAAS,CAAC;AAC3F,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3C,UAAU,qBAAqB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAsDD,QAAA,MAAM,WAAW,yFAiEf,CAAC;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}

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

@@ -1,79 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 import React from "react";
-import Link from "../../../embed-shims/next-link.js";
 import { cn } from "../../../utils/cn.js";
-import { buttonSurfaceClasses, splitDividerColorClasses, splitGlyphSizeClasses } from "./button-styles.js";
-const splitHalfBase = [
-  "relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]",
-  "whitespace-nowrap transition-colors duration-200",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10",
-  "disabled:pointer-events-none",
-  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
-];
-const splitHalfVariants = cva(splitHalfBase, {
-  variants: {
-    variant: {
-      accent: buttonSurfaceClasses.accent,
-      outline: buttonSurfaceClasses.outline,
-      // Outline border lives in compoundVariants so we can omit the seam edge.
-      transparent: buttonSurfaceClasses.transparent,
-      destructive: buttonSurfaceClasses.destructive,
-      warning: buttonSurfaceClasses.warning
-    },
-    size: {
-      default: `h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12 ${splitGlyphSizeClasses}`,
-      small: "h-6 px-[var(--spacing-system-xs)] text-h5 md:h-8 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4"
-    },
-    side: { main: "", icon: "" },
-    soloOnMobile: { true: "", false: "" }
-  },
-  compoundVariants: [
-    // Rounded corners + per-variant seam. The icon-side's left border is the divider.
-    { variant: "accent", side: "main", class: "rounded-l-md" },
-    {
-      variant: "accent",
-      side: "icon",
-      class: cn(
-        "rounded-r-md border-l",
-        splitDividerColorClasses.accent,
-        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
-      )
-    },
-    { variant: "destructive", side: "main", class: "rounded-l-md" },
-    {
-      variant: "destructive",
-      side: "icon",
-      class: cn(
-        "rounded-r-md border-l",
-        splitDividerColorClasses.destructive,
-        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
-      )
-    },
-    { variant: "warning", side: "main", class: "rounded-l-md" },
-    {
-      variant: "warning",
-      side: "icon",
-      class: cn(
-        "rounded-r-md border-l",
-        splitDividerColorClasses.warning,
-        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
-      )
-    },
-    { variant: "outline", side: "main", class: "rounded-l-md border-y border-l border-ods-border" },
-    { variant: "outline", side: "icon", class: "rounded-r-md border border-ods-border" },
-    { variant: "transparent", side: "main", class: "rounded-md" },
-    { variant: "transparent", side: "icon", class: cn("rounded-md", splitDividerColorClasses.transparent) },
-    // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
-    { side: "icon", size: "default", class: "w-10 px-0" },
-    { side: "icon", size: "small", class: "w-6 px-0 md:w-8" },
-    { side: "icon", soloOnMobile: true, class: "max-md:hidden" },
-    { side: "main", soloOnMobile: true, class: "max-md:rounded-r-md" },
-    { variant: "outline", side: "main", soloOnMobile: true, class: "max-md:border-r" }
-  ],
-  defaultVariants: { variant: "accent", size: "default", side: "main", soloOnMobile: false }
-});
+import { Button } from "./button.js";
 function Half({
   variant,
   size,
@@ -89,25 +18,23 @@ function Half({
   ariaLabel,
   children
 }) {
-  const classes = cn(splitHalfVariants({ variant, size, side, soloOnMobile }), grow && "flex-1");
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        href,
-        prefetch,
-        target: openInNewTab ? "_blank" : void 0,
-        rel: openInNewTab ? "noopener noreferrer" : void 0,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : void 0,
-        "aria-label": ariaLabel,
-        className: cn(classes, disabled && "pointer-events-none"),
-        onClick,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("button", { type, className: classes, disabled, "aria-label": ariaLabel, onClick, children });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      variant,
+      size: side === "main" ? size : size === "small" ? "small" : "icon",
+      attach: side === "main" ? "start" : "end",
+      href,
+      openInNewTab,
+      prefetch,
+      disabled,
+      "aria-label": ariaLabel,
+      onClick,
+      className: cn(grow && "flex-1", side === "icon" && soloOnMobile && "max-md:hidden"),
+      children
+    }
+  );
 }
 const SplitButton = React.forwardRef(function SplitButtonImpl({
   variant = "accent",

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

@@ -4,7 +4,8 @@ interface CheckboxBlockProps {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    /** Primary label (supports rich text / ReactNode for inline links) */
+    /** Primary label (supports rich text / ReactNode for inline links). `null` is a label still being read: while the
+     *  block loads it draws an `h4` bar in the label's own line. */
     label: ReactNode;
     /** Optional secondary description below the label (supports rich text / ReactNode) */
     description?: ReactNode;
@@ -22,7 +23,14 @@ interface CheckboxBlockProps {
     required?: boolean;
     /** Error message displayed below the block (also triggers red border) */
     error?: string;
+    /**
+     * Whether the box is checked is still being read: the label 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;
+    /** `data-*` markers (`data-loading-item` on a read list's block), on the block's root in both forms. */
+    [key: `data-${string}`]: unknown;
 }
 declare const CheckboxBlock: import("react").ForwardRefExoticComponent<CheckboxBlockProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { CheckboxBlock };

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-block.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox-block.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAMtE,UAAU,kBAAkB;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qFACiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,kHA8GlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"checkbox-block.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox-block.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAQtE,UAAU,kBAAkB;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;oEACgE;IAChE,KAAK,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qFACiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AASD,QAAA,MAAM,aAAa,kHA2HlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

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 {