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

package/dist/components/ui/assignee-dropdown.js

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { PenEditIcon, UserIcon, UserPlusIcon } from "../icons-v2-generated/index.js";
 import { Autocomplete } from "./autocomplete.js";
+import { Button } from "./button/index.js";
 import { DeletedUserAvatar } from "./deleted-user-avatar.js";
 import { SearchableSelect } from "./searchable-select.js";
 import { SquareAvatar } from "./square-avatar.js";
@@ -52,15 +53,13 @@ function CompactAssigneeDropdown({
     onTriggerClick();
   } : void 0;
   const trigger = hasAssignee ? /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
+      variant: "card",
       type: "button",
       onClick: handleTriggerClick,
       "aria-label": "Change assignee",
-      className: cn(
-        "shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-        className
-      ),
+      className: cn("w-auto shrink-0", className),
       children: currentAssignee.deleted ? /* @__PURE__ */ jsx(DeletedUserAvatar, { size: "sm", accessibleLabel: `Deleted user: ${currentAssignee.name || currentAssignee.id}` }) : /* @__PURE__ */ jsx(
         SquareAvatar,
         {
@@ -73,18 +72,15 @@ function CompactAssigneeDropdown({
       )
     }
   ) : /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
+      variant: "transparent",
+      size: "icon-sm",
       type: "button",
       onClick: handleTriggerClick,
       "aria-label": "Assign user",
-      className: cn(
-        "flex size-8 shrink-0 items-center justify-center rounded-full border border-ods-border",
-        "text-ods-text-secondary transition-colors hover:border-ods-accent hover:text-ods-accent",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(UserPlusIcon, { className: "size-4" })
+      className: cn("shrink-0", className),
+      children: /* @__PURE__ */ jsx(UserPlusIcon, {})
     }
   );
   if (onTriggerClick) return trigger;
@@ -182,13 +178,16 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
       ),
       /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
         /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-xxs)]", children: /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
+            variant: "link",
+            size: "compact",
+            noPaddingX: true,
             type: "button",
             onClick: () => setIsEditing(true),
-            className: "group flex cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-left",
+            className: "min-w-0",
             children: [
-              /* @__PURE__ */ jsx(PenEditIcon, { className: "size-4 shrink-0 text-ods-text-secondary transition-colors group-hover:text-ods-accent" }),
+              /* @__PURE__ */ jsx(PenEditIcon, {}),
               /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -208,16 +207,17 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      Button,
       {
+        variant: "link",
+        size: "compact",
+        noPaddingX: true,
         type: "button",
         onClick: () => setIsEditing(true),
-        className: "flex cursor-pointer items-center gap-[var(--spacing-system-xxs)] truncate text-left text-ods-accent underline transition-opacity text-h4 hover:opacity-80",
-        children: [
-          /* @__PURE__ */ jsx(UserIcon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { children: "Assign User" })
-        ]
+        className: "max-w-full",
+        leftIcon: /* @__PURE__ */ jsx(UserIcon, {}),
+        children: "Assign User"
       }
     ),
     /* @__PURE__ */ jsx("span", { className: "block truncate text-ods-text-secondary text-h6", children: "Assigned" })

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

@@ -124,14 +124,6 @@ export interface AutocompleteMultipleProps<T = string> extends AutocompleteBaseP
     wrapTags?: boolean;
 }
 export type AutocompleteProps<T = string> = AutocompleteSingleProps<T> | AutocompleteMultipleProps<T>;
-export interface AutocompleteSkeletonProps {
-    /** The field's label: the page's own words, drawn as they are. */
-    label?: string;
-    labelVariant?: 'default' | 'large';
-    className?: string;
-}
-/** A field while its options are read: its label for real, its control a box of the control's height. */
-export declare function AutocompleteSkeleton({ label, labelVariant, className }: AutocompleteSkeletonProps): import("react").JSX.Element;
 type AutocompleteComponent = {
     <T = string>(props: AutocompleteMultipleProps<T> & {
         ref?: ForwardedRef<HTMLDivElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/ui/autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/ui/autocomplete.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/autocomplete.js

@@ -20,9 +20,10 @@ import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { FieldWrapper } from "./field-wrapper.js";
 import { HiddenTagsPopup } from "./hidden-tags-popup.js";
-import { useLoadingScope } from "./loading-scope.js";
+import { LoadingItems, useLoadingScope } from "./loading-scope.js";
 import { Tag } from "./tag.js";
 import { TruncateText } from "./truncate-text.js";
 const innerInputStyles = cn(
@@ -338,10 +339,12 @@ function AutocompleteInner(props, ref) {
                   String(option.value)
                 )),
                 multiple && hiddenTagsCount > 0 && /* @__PURE__ */ jsx("div", { ref: hiddenTagsRef, className: "shrink-0", children: /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
+                    variant: "chip",
                     ref: badgeRef,
                     type: "button",
+                    "aria-expanded": showHiddenTags,
                     onClick: (e) => {
                       e.stopPropagation();
                       setShowHiddenTags((prev) => {
@@ -349,12 +352,6 @@ function AutocompleteInner(props, ref) {
                         return !prev;
                       });
                     },
-                    className: cn(
-                      "flex h-8 items-center px-2",
-                      "rounded-[6px] border border-ods-border bg-ods-card",
-                      "text-ods-text-secondary text-h5",
-                      "cursor-pointer transition-colors hover:bg-ods-bg-hover"
-                    ),
                     children: getLimitTagsText(hiddenTagsCount)
                   }
                 ) }),
@@ -377,13 +374,14 @@ function AutocompleteInner(props, ref) {
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 pr-3", children: [
             showClearAll && (hasValue || inputValue.length > 0) && !disabled && isOpen && /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "transparent",
+                size: "icon-sm",
                 type: "button",
                 onClick: handleClearAll,
-                className: "flex items-center justify-center transition-opacity hover:opacity-70",
                 "aria-label": "Clear all",
-                children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "size-4 text-ods-text-secondary md:size-6" })
+                children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "text-ods-text-secondary" })
               }
             ),
             loading ? /* @__PURE__ */ jsx(
@@ -437,10 +435,7 @@ function AutocompleteInner(props, ref) {
           /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "max-h-[240px] min-h-0 w-full [&>div]:!block", children: /* @__PURE__ */ jsx("div", { role: loading ? void 0 : "listbox", children: loading ? (
             // The options while they are read: the list's own rows, a label bar each (`loadingText` is what a
             // screen reader hears).
-            /* @__PURE__ */ jsx(LoadingRegion, { label: loadingText, children: Array.from({ length: loadingRows }, (_, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-              /* @__PURE__ */ jsx("div", { className: AUTOCOMPLETE_OPTION_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-2/3" }) }, i)
-            )) })
+            /* @__PURE__ */ jsx(LoadingRegion, { label: loadingText, children: /* @__PURE__ */ jsx(LoadingItems, { count: loadingRows, children: () => /* @__PURE__ */ jsx("div", { className: AUTOCOMPLETE_OPTION_ROW_CLASS, "aria-hidden": true, "data-loading-item": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-2/3" }) }) }) })
           ) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ jsxs("div", { className: "flex h-11 min-w-0 items-center px-[var(--spacing-system-mf)] text-ods-error text-h5 md:h-12", children: [
             "Maximum ",
             maxCreateLength,
@@ -468,6 +463,7 @@ function AutocompleteInner(props, ref) {
             return /* @__PURE__ */ jsx(
               "div",
               {
+                "data-loading-item": true,
                 role: "option",
                 "aria-selected": isSelected,
                 className: cn(
@@ -492,8 +488,10 @@ function AutocompleteInner(props, ref) {
                   /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
                     isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "text-ods-accent", size: 20 }),
                     onDeleteOption && !isSelected && /* @__PURE__ */ jsx(
-                      "button",
+                      Button,
                       {
+                        variant: "transparent",
+                        size: "icon-sm",
                         type: "button",
                         "aria-label": `Delete ${option.label}`,
                         onClick: (e) => {
@@ -501,8 +499,7 @@ function AutocompleteInner(props, ref) {
                           onDeleteOption(option.value);
                         },
                         disabled: isDeletingOption,
-                        className: "opacity-0 transition-opacity focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-50 group-hover/item:opacity-100",
-                        children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4 text-ods-error" })
+                        children: /* @__PURE__ */ jsx(TrashIcon, { className: "text-ods-error" })
                       }
                     )
                   ] })
@@ -578,6 +575,5 @@ function AutocompleteInner(props, ref) {
 }
 const Autocomplete = forwardRef(AutocompleteInner);
 export {
-  Autocomplete,
-  AutocompleteSkeleton
+  Autocomplete
 };

package/dist/components/ui/avatar-stack.d.ts

@@ -41,14 +41,10 @@ export interface AvatarStackProps {
      *  Default "Assignees". */
     label?: string;
     className?: string;
+    /** The people are still being read: the stack draws its skeleton, `slots ?? max` faces of its size. A loading scope
+     *  does the same. */
+    loading?: boolean;
 }
-/** A stack while its people are read: `count` overlapped circles of the faces' size. */
-export declare function AvatarStackSkeleton({ count, size, slots, className, }: {
-    count?: number;
-    size?: AvatarStackSize;
-    slots?: number;
-    className?: string;
-}): import("react").JSX.Element;
-export declare function AvatarStack({ people, max, slots, total, size, ringClassName, label, className, }: AvatarStackProps): import("react").JSX.Element | null;
+export declare function AvatarStack({ people, max, slots, total, size, ringClassName, label, className, loading: loadingProp, }: AvatarStackProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=avatar-stack.d.ts.map

package/dist/components/ui/avatar-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-stack.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar-stack.tsx"],"names":[],"mappings":"AAOA;;;;;;GAMG;AAEH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;8DAC0D;IAC1D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;uEAEmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;oEACgE;IAChE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;yEAGqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;+BAC2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,wFAAwF;AACxF,wBAAgB,mBAAmB,CAAC,EAClC,KAAS,EACT,IAAW,EACX,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAmBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,GAAO,EACP,KAAK,EACL,KAAK,EACL,IAAW,EACX,aAA+B,EAC/B,KAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,sCAsDlB"}
+{"version":3,"file":"avatar-stack.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar-stack.tsx"],"names":[],"mappings":"AAOA;;;;;;GAMG;AAEH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;8DAC0D;IAC1D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;uEAEmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;oEACgE;IAChE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;yEAGqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;+BAC2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;yBACqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAyDD,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,GAA4B,EAC5B,KAAK,EACL,KAAK,EACL,IAAW,EACX,aAA+B,EAC/B,KAAmB,EACnB,SAAS,EACT,OAAO,EAAE,WAAW,GACrB,EAAE,gBAAgB,sCAuDlB"}

package/dist/components/ui/avatar-stack.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
-import { useLoadingScope } from "./loading-scope.js";
+import { LoadingItems, useLoadingScope } from "./loading-scope.js";
 import { SquareAvatar } from "./square-avatar.js";
 const SIZE_PX = { xs: 24, sm: 32, md: 40, lg: 48 };
 const OVERLAP_PX = { xs: 8, sm: 12, md: 12, lg: 12 };
@@ -15,8 +15,9 @@ const OVERFLOW_CIRCLE_SIZE = {
 const STACK_ROW_CLASS = "flex items-center";
 const overlapClass = (size) => size === "xs" ? "-ml-2" : "-ml-3";
 const slotsWidthStyle = (size, slots) => slots ? { width: SIZE_PX[size] + (slots - 1) * (SIZE_PX[size] - OVERLAP_PX[size]) } : void 0;
+const AVATAR_STACK_MAX_FACES = 3;
 function AvatarStackSkeleton({
-  count = 3,
+  count = AVATAR_STACK_MAX_FACES,
   size = "md",
   slots,
   className
@@ -27,30 +28,31 @@ function AvatarStackSkeleton({
       "aria-hidden": true,
       className: cn(STACK_ROW_CLASS, slots && "shrink-0", className),
       style: slotsWidthStyle(size, slots),
-      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(LoadingItems, { count, children: (i) => /* @__PURE__ */ jsx(
         UnifiedSkeleton,
         {
+          "data-loading-item": true,
           variant: "circular",
           className: cn("relative shrink-0 ring-2 ring-ods-card", i > 0 && overlapClass(size)),
           width: SIZE_PX[size],
           height: SIZE_PX[size]
-        },
-        i
-      ))
+        }
+      ) })
     }
   );
 }
 function AvatarStack({
   people,
-  max = 3,
+  max = AVATAR_STACK_MAX_FACES,
   slots,
   total,
   size = "md",
   ringClassName = "ring-ods-card",
   label = "Assignees",
-  className
+  className,
+  loading: loadingProp
 }) {
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
   if (loading) return /* @__PURE__ */ jsx(AvatarStackSkeleton, { count: slots ?? max, size, slots, className });
   if (people.length === 0) return null;
   const groupSize = Math.max(total ?? people.length, people.length);
@@ -72,6 +74,7 @@ function AvatarStack({
         visible.map((person, i) => /* @__PURE__ */ jsx(
           SquareAvatar,
           {
+            "data-loading-item": true,
             variant: "round",
             size,
             src: person.avatarUrl ?? void 0,
@@ -108,6 +111,5 @@ function AvatarStack({
   );
 }
 export {
-  AvatarStack,
-  AvatarStackSkeleton
+  AvatarStack
 };

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

@@ -4,15 +4,10 @@ declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "destructive" | "success" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /** The badge's text is still being read: it draws its loading form (also inside a loading scope). */
+    loading?: boolean;
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): import("react").JSX.Element;
-/**
- * A badge while its text is read: one skeleton box with the badge's own frame, padding and type step, its content
- * one line of that step (`box-content`: the padding adds to the line, as it does around the badge's text). The
- * width stands for the text (`className` overrides it).
- */
-declare function BadgeSkeleton({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
-export { Badge, BadgeSkeleton, badgeVariants };
+/** A badge; while its text is read (`loading`, or a loading scope) its own loading form, the badge's box. */
+declare function Badge({ className, variant, loading, ...props }: BadgeProps): import("react").JSX.Element;
+export { Badge, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,aAAa;;8EAmBlB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzG,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAE1D;AAED;;;;GAIG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO3D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,QAAA,MAAM,aAAa;;8EAmBlB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpG,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,6GAA6G;AAC7G,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAGnE;AAgBD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/badge.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 const badgeVariants = cva(
   // Weight from the ODS token. Scale stays at 12px rather than the `text-h6`
   // composite: a badge is a stamp, and that composite is 14/20 on desktop —
@@ -23,7 +24,8 @@ const badgeVariants = cva(
     }
   }
 );
-function Badge({ className, variant, ...props }) {
+function Badge({ className, variant, loading, ...props }) {
+  if (useLoadingScope() || loading) return /* @__PURE__ */ jsx(BadgeSkeleton, { className });
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 function BadgeSkeleton({ className }) {
@@ -37,6 +39,5 @@ function BadgeSkeleton({ className }) {
 }
 export {
   Badge,
-  BadgeSkeleton,
   badgeVariants
 };

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

@@ -6,6 +6,8 @@ declare const BreadcrumbList: import("react").ForwardRefExoticComponent<Omit<imp
 declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
 declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     asChild?: boolean;
+    /** The link's label is still being read: a bar the height of its line (also inside a loading scope). */
+    loading?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;
 declare const BreadcrumbPage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const BreadcrumbSeparator: {

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAiC,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAIvG,QAAA,MAAM,UAAU;gBAGA,SAAS;+CAEqD,CAAC;AAG/E,QAAA,MAAM,cAAc,mNASlB,CAAC;AAGH,QAAA,MAAM,cAAc,0MAElB,CAAC;AAGH,QAAA,MAAM,cAAc;cAGN,OAAO;qDAMnB,CAAC;AAGH,QAAA,MAAM,cAAc,8MASlB,CAAC;AAGH,QAAA,MAAM,mBAAmB;wCAAuC,cAAc,CAAC,IAAI,CAAC;;CAInF,CAAC;AAGF,QAAA,MAAM,kBAAkB;8BAA6B,cAAc,CAAC,MAAM,CAAC;;CAU1E,CAAC;AAGF,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAiC,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAMvG,QAAA,MAAM,UAAU;gBAGA,SAAS;+CAEqD,CAAC;AAG/E,QAAA,MAAM,cAAc,mNASlB,CAAC;AAGH,QAAA,MAAM,cAAc,0MAElB,CAAC;AAGH,QAAA,MAAM,cAAc;cAGN,OAAO;IACjB,wGAAwG;cAC9F,OAAO;qDASnB,CAAC;AAGH,QAAA,MAAM,cAAc,8MASlB,CAAC;AAGH,QAAA,MAAM,mBAAmB;wCAAuC,cAAc,CAAC,IAAI,CAAC;;CAInF,CAAC;AAGF,QAAA,MAAM,kBAAkB;8BAA6B,cAAc,CAAC,MAAM,CAAC;;CAU1E,CAAC;AAGF,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}

package/dist/components/ui/breadcrumb.js

@@ -4,6 +4,8 @@ import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 const Breadcrumb = forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
 const BreadcrumbList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -20,7 +22,9 @@ const BreadcrumbList = forwardRef(({ className, ...props }, ref) => /* @__PURE__
 BreadcrumbList.displayName = "BreadcrumbList";
 const BreadcrumbItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props }));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = forwardRef(({ asChild, className, ...props }, ref) => {
+const BreadcrumbLink = forwardRef(({ asChild, className, loading, ...props }, ref) => {
+  const inScope = useLoadingScope();
+  if (inScope || loading) return /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn("inline-block h-5 w-16", className) });
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(Comp, { ref, className: cn("transition-colors hover:text-ods-text-primary", className), ...props });
 });

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

@@ -39,4 +39,25 @@ export declare const BUTTON_SIZE_CLASS: {
     readonly 'icon-glyph': "h-14 w-14 p-0 [&_svg]:h-14 [&_svg]:w-14";
 };
 export type ButtonSizeKey = keyof typeof BUTTON_SIZE_CLASS;
+/**
+ * The button KINDS that are not a plain push button: each owns its whole box and look, which no `size` changes, and
+ * is reused by every control of its kind. A kind's selected / open / invalid state is read from the element's own
+ * attributes, never from a class at the call site:
+ *
+ *  - `data-state="active"` (Radix's convention): the selected row, tab or chip;
+ *  - `data-state="open"` / `aria-expanded="true"`: the field whose popup is open;
+ *  - `data-invalid`: the field that failed validation (the marker every field exposes);
+ *  - `aria-pressed="true"`: the pressed chip.
+ *
+ * A call site's `className` on a kind is layout only (width, flex, position, margin).
+ */
+export declare const BUTTON_KIND_CLASS: {
+    readonly field: string;
+    readonly row: string;
+    readonly tab: string;
+    readonly chip: string;
+    readonly card: string;
+    readonly cell: string;
+};
+export type ButtonKind = keyof typeof BUTTON_KIND_CLASS;
 //# sourceMappingURL=button-styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button-styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;CAmCvB,CAAC;AAEX,eAAO,MAAM,oBAAoB,sJACoH,CAAC;AAWtJ,eAAO,MAAM,qBAAqB,0DAA0D,CAAC;AAW7F,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAGX,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;CAuCpB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button-styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;CAmCvB,CAAC;AAEX,eAAO,MAAM,oBAAoB,sJACoH,CAAC;AAWtJ,eAAO,MAAM,qBAAqB,0DAA0D,CAAC;AAW7F,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAGX,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;CAuCpB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAM3D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;CA2DpB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

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

@@ -81,7 +81,70 @@ const BUTTON_SIZE_CLASS = {
   // hosts stop re-implementing a <button> to escape the 20px svg cap.
   "icon-glyph": "h-14 w-14 p-0 [&_svg]:h-14 [&_svg]:w-14"
 };
+const KIND_FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
+const KIND_FOCUS_INSET = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus";
+const BUTTON_KIND_CLASS = {
+  // A control drawn as a form field (a date picker's, a searchable select's, a popup's trigger): Input's box, border
+  // and states, the value on the left.
+  field: [
+    "flex w-full items-center gap-[var(--spacing-system-xsf)] border px-[var(--spacing-system-sf)] text-left",
+    "h-11 rounded-[6px] md:h-12",
+    "border-ods-border bg-ods-card text-ods-text-primary text-h4 transition-colors duration-200",
+    "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
+    "data-[state=open]:border-ods-accent aria-expanded:border-ods-accent",
+    "data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error",
+    "disabled:cursor-not-allowed disabled:bg-ods-bg disabled:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
+    "outline-none focus-visible:border-ods-accent",
+    "[&_svg]:shrink-0"
+  ].join(" "),
+  // A clickable row of a list, a menu or a navigation: full width, its content on the left, the hover and the
+  // selected surface of the list.
+  row: [
+    "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left",
+    "bg-transparent text-ods-text-primary text-h4 transition-colors duration-150",
+    "hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-active",
+    "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-transparent",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
+  // A tab of a tab strip or a tab list: secondary until it is the open one. A strip that marks its open and hovered
+  // tab with the accent fade (the admin strip) says so on each tab with `data-emphasis="fade"`. ODS colour vars hold
+  // hex values, so a Tailwind alpha modifier would produce no CSS; color-mix() derives the 10% stop from the token.
+  tab: [
+    "group relative flex shrink-0 items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
+    "bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200",
+    "hover:text-ods-text-primary data-[state=active]:text-ods-text-primary",
+    "data-[emphasis=fade]:data-[state=active]:bg-gradient-to-b data-[emphasis=fade]:data-[state=active]:from-transparent data-[emphasis=fade]:data-[state=active]:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]",
+    "data-[emphasis=fade]:hover:bg-gradient-to-b data-[emphasis=fade]:hover:from-transparent data-[emphasis=fade]:hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]",
+    "disabled:cursor-not-allowed disabled:text-ods-text-disabled",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
+  // A choice drawn as a pill (a filter, a quick question, an answer option): bordered, the accent when picked.
+  chip: [
+    "inline-flex h-8 items-center gap-[var(--spacing-system-xxs)] rounded-full border px-[var(--spacing-system-sf)]",
+    "border-ods-border bg-ods-card text-ods-text-primary text-h6 transition-colors duration-200",
+    "hover:border-ods-border-hover hover:bg-ods-bg-hover",
+    "aria-pressed:border-ods-accent data-[state=active]:border-ods-accent",
+    "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-ods-card",
+    KIND_FOCUS,
+    "[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0"
+  ].join(" "),
+  // A whole card or tile that is one click target (a card's hit area, a media tile, a summary that expands): the
+  // content is the look; the button gives it the click, the keyboard and the focus ring.
+  card: ["relative block w-full rounded-md text-left text-ods-text-primary", KIND_FOCUS].join(" "),
+  // A cell of a bar (a header's or a chat's top bar): the bar's full height, an icon or a short label, secondary
+  // until hovered or pressed.
+  cell: [
+    "flex h-full shrink-0 items-center justify-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-m)]",
+    "bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200",
+    "hover:bg-ods-bg-hover hover:text-ods-text-primary aria-pressed:text-ods-accent aria-expanded:text-ods-text-primary data-[state=active]:text-ods-accent",
+    KIND_FOCUS_INSET,
+    "[&_svg]:h-6 [&_svg]:w-6 [&_svg]:shrink-0"
+  ].join(" ")
+};
 export {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS,
   buttonSurfaceClasses,
   outlineBorderClasses,

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

@@ -3,7 +3,7 @@ import React from 'react';
 /** The `icon-sm` button's size (its `h-8 w-8`), for a layout that must leave room for one. */
 export declare const BUTTON_ICON_SM_SIZE = "2rem";
 declare const buttonVariants: (props?: ({
-    variant?: "accent" | "link" | "outline" | "transparent" | "destructive" | "warning" | "inverted" | "glyph" | "overlay" | null | undefined;
+    variant?: "accent" | "link" | "cell" | "row" | "tab" | "outline" | "transparent" | "destructive" | "warning" | "inverted" | "glyph" | "overlay" | "field" | "chip" | "card" | null | undefined;
     size?: "wrap" | "small" | "default" | "icon" | "small-legacy" | "compact" | "icon-sm" | "icon-inline" | "icon-glyph" | null | undefined;
     font?: "bold" | "regular" | null | undefined;
     fullWidth?: boolean | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc;;;;;;;8EAkEnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAmNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc;;;;;;;8EA2FnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAyNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}