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

package/dist/components/ui/tab-selector.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useIsInActionsMenuHeader } from "./actions-menu-header-context.js";
+import { Button } from "./button/index.js";
 import { Label } from "./label.js";
 function TabSelector({
   value,
@@ -35,22 +36,17 @@ function TabSelector({
               const isActive = value === item.id;
               const isDisabled = disabled || item.disabled;
               return /* @__PURE__ */ jsxs(
-                "button",
+                Button,
                 {
+                  variant: "segment",
                   type: "button",
                   disabled: isDisabled,
                   onClick: () => onValueChange(item.id),
                   "aria-label": !item.label ? item.ariaLabel : void 0,
-                  className: cn(
-                    // Bold on BOTH states (text-h3 = DM Sans bold) — a medium↔bold
-                    // flip between the active and inactive tabs read as inconsistent
-                    // weight (and nudged label widths on every switch).
-                    "flex items-center justify-center gap-[var(--spacing-system-xs)] whitespace-nowrap rounded-xs p-[var(--spacing-system-xsf)] transition-colors duration-200 text-h4",
-                    // scrollable: intrinsic widths must sum past the container or
-                    // nothing ever overflows (flex-1's basis-0 defeats the scroll).
-                    scrollable ? "flex-none shrink-0 basis-auto" : "flex-1",
-                    isDisabled ? isActive ? "cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary" : "cursor-not-allowed bg-transparent text-ods-text-secondary" : isActive ? variant === "primary" ? "cursor-default bg-ods-accent text-ods-text-on-accent" : "cursor-default bg-ods-bg-surface text-ods-text-primary" : "cursor-pointer bg-transparent text-ods-text-primary hover:bg-ods-bg-hover"
-                  ),
+                  "aria-pressed": isActive,
+                  "data-state": isActive ? "active" : void 0,
+                  "data-tone": variant === "primary" ? "accent" : void 0,
+                  className: cn("h-full", scrollable ? "flex-none shrink-0 basis-auto" : "flex-1"),
                   children: [
                     item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center content-md:size-6", children: item.icon }),
                     item.label,

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

@@ -27,28 +27,7 @@ interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof TabsPrimitive
 }
 /** @deprecated for `variant="default"` — use `TabNavigation`. `variant="admin-rail"` is the sanctioned admin tabs styling. See {@link Tabs}. */
 declare const TabsTrigger: import("react").ForwardRefExoticComponent<TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-/**
- * A tab while it is read: the trigger's own box (padding, border, type step). `label` is a tab name the page states,
- * drawn as it is; without one the label is a bar.
- */
-declare function TabsTriggerSkeleton({ variant, label, className, }: {
-    variant?: TabsVariant;
-    label?: string;
-    className?: string;
-}): import("react").JSX.Element;
-/**
- * A tab list whose tabs are not known until a read: the list's own frame (the bordered rail for `admin-rail`) and
- * `count` trigger skeletons.
- */
-declare function TabsListSkeleton({ variant, count, labels, className, }: {
-    variant?: TabsVariant;
-    /** How many tabs, when their names are read. */
-    count?: number;
-    /** The tabs' names, when the page states them (drawn as they are). */
-    labels?: string[];
-    className?: string;
-}): import("react").JSX.Element;
 /** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsTriggerSkeleton, TabsListSkeleton };
+export { Tabs, TabsList, TabsTrigger, TabsContent };
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,KAAK,wBAAwB,EAA+B,MAAM,OAAO,CAAC;AAMnF;;;;;;;;GAQG;AACH,QAAA,MAAM,IAAI,oHAAqB,CAAC;AAEhC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,CAAC;AAqCnD,UAAU,aAAc,SAAQ,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;IACjF;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,gJAAgJ;AAChJ,QAAA,MAAM,QAAQ,0GAQb,CAAC;AAGF,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACvF,6DAA6D;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,gJAAgJ;AAChJ,QAAA,MAAM,WAAW,gHAUhB,CAAC;AAMF;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,OAAmB,EACnB,KAAK,EACL,SAAS,GACV,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAMA;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,SAAS,GACV,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAWA;AAED,6FAA6F;AAC7F,QAAA,MAAM,WAAW,wLAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,KAAK,wBAAwB,EAA+B,MAAM,OAAO,CAAC;AAMnF;;;;;;;;GAQG;AACH,QAAA,MAAM,IAAI,oHAAqB,CAAC;AAEhC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,CAAC;AAqCnD,UAAU,aAAc,SAAQ,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;IACjF;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,gJAAgJ;AAChJ,QAAA,MAAM,QAAQ,0GAQb,CAAC;AAGF,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACvF,6DAA6D;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,gJAAgJ;AAChJ,QAAA,MAAM,WAAW,gHAUhB,CAAC;AA0BF,6FAA6F;AAC7F,QAAA,MAAM,WAAW,wLAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/tabs.js

@@ -56,19 +56,6 @@ function TabsTriggerSkeleton({
 }) {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn(tabsTriggerVariantClasses[variant], className), children: label ?? /* @__PURE__ */ jsx(TextLineSkeleton, { type: TRIGGER_LABEL_TYPE[variant], className: "w-20" }) });
 }
-function TabsListSkeleton({
-  variant = "default",
-  count,
-  labels,
-  className
-}) {
-  const tabs = labels ?? Array.from({ length: count ?? 0 }, () => void 0);
-  const list = /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn(tabsListVariantClasses[variant], className), children: tabs.map((label, i) => (
-    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton tabs never reorder
-    /* @__PURE__ */ jsx(TabsTriggerSkeleton, { variant, label }, i)
-  )) });
-  return variant === "admin-rail" ? /* @__PURE__ */ jsx("div", { className: ADMIN_RAIL_WRAPPER_CLASS, children: list }) : list;
-}
 const TabsContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
@@ -85,7 +72,5 @@ export {
   Tabs,
   TabsContent,
   TabsList,
-  TabsListSkeleton,
-  TabsTrigger,
-  TabsTriggerSkeleton
+  TabsTrigger
 };

package/dist/components/ui/tag-search-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-search-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tag-search-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAcf,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,MAAM;IAC7C,mCAAmC;IACnC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0CAA0C;IAC1C,WAAW,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mCAAmC;IACnC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,kCAAkC;IAClC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC/C,uHAAuH;IACvH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAMD,wBAAgB,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,EACzC,IAAI,EACJ,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,WAAyB,EACzB,kBAAkC,EAClC,QAAgB,EAChB,SAAS,EACT,YAAmB,EACnB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAA+C,EAC/C,SAAkB,GACnB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAuMxB"}
+{"version":3,"file":"tag-search-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tag-search-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAef,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,MAAM;IAC7C,mCAAmC;IACnC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0CAA0C;IAC1C,WAAW,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mCAAmC;IACnC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,kCAAkC;IAClC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC/C,uHAAuH;IACvH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAMD,wBAAgB,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,EACzC,IAAI,EACJ,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,WAAyB,EACzB,kBAAkC,EAClC,QAAgB,EAChB,SAAS,EACT,YAAmB,EACnB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAA+C,EAC/C,SAAkB,GACnB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAqMxB"}

package/dist/components/ui/tag-search-input.js

@@ -10,6 +10,7 @@ import { useIsomorphicLayoutEffect } from "../../hooks/ui/use-isomorphic-layout-
 import { cn } from "../../utils/cn.js";
 import { SearchIcon } from "../icons-v2-generated/interface/search-icon.js";
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
+import { Button } from "./button/index.js";
 import { HiddenTagsPopup } from "./hidden-tags-popup.js";
 import { Tag } from "./tag.js";
 function TagSearchInput({
@@ -111,20 +112,16 @@ function TagSearchInput({
               String(tag.value)
             )),
             hiddenCount > 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) => !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(hiddenCount)
               }
             ) }),
@@ -149,13 +146,15 @@ function TagSearchInput({
             )
           ] }),
           showClearAll && hasValue && !disabled && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "transparent",
+              size: "icon-sm",
               type: "button",
               onClick: handleClearAll,
-              className: "flex shrink-0 cursor-pointer items-center justify-center pr-3 transition-opacity hover:opacity-70",
+              className: "mr-[var(--spacing-system-xxs)] shrink-0",
               "aria-label": "Clear all",
-              children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "size-4 text-ods-text-secondary content-md:size-6" })
+              children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "text-ods-text-secondary" })
             }
           )
         ]

package/dist/components/ui/tag-select-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-select-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tag-select-dropdown.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,0CAA0C;IAC1C,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,UAAkB,EAClB,UAAkB,EAClB,YAAyB,EACzB,iBAA8C,EAC9C,QAAgB,EAChB,KAAe,EACf,SAAS,GACV,EAAE,sBAAsB,+BAyKxB"}
+{"version":3,"file":"tag-select-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tag-select-dropdown.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,0CAA0C;IAC1C,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,UAAkB,EAClB,UAAkB,EAClB,YAAyB,EACzB,iBAA8C,EAC9C,QAAgB,EAChB,KAAe,EACf,SAAS,GACV,EAAE,sBAAsB,+BAiKxB"}

package/dist/components/ui/tag-select-dropdown.js

@@ -81,6 +81,7 @@ function TagSelectDropdown({
           /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-ods-border", children: /* @__PURE__ */ jsx(
             Input,
             {
+              userValue: true,
               autoFocus: true,
               value: search,
               onChange: (e) => setSearch(e.target.value),
@@ -128,8 +129,10 @@ function TagSelectDropdown({
                     ),
                     isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-ods-accent" }),
                     onDelete && !isSelected && /* @__PURE__ */ jsx(
-                      "button",
+                      Button,
                       {
+                        variant: "transparent",
+                        size: "icon-sm",
                         type: "button",
                         "aria-label": `Delete tag ${opt.label}`,
                         onClick: (e) => {
@@ -137,11 +140,8 @@ function TagSelectDropdown({
                           onDelete(opt.id);
                         },
                         disabled: isDeleting,
-                        className: cn(
-                          "shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/item:opacity-100",
-                          "disabled:pointer-events-none disabled:opacity-50"
-                        ),
-                        children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4 text-ods-error" })
+                        className: "shrink-0",
+                        children: /* @__PURE__ */ jsx(TrashIcon, { className: "text-ods-error" })
                       }
                     )
                   ]
@@ -153,26 +153,14 @@ function TagSelectDropdown({
               "Maximum ",
               maxCreateLength,
               " characters"
-            ] }) : /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: handleCreate,
-                disabled: isCreating,
-                className: cn(
-                  "flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left",
-                  "transition-colors hover:bg-ods-bg-hover disabled:pointer-events-none disabled:opacity-50"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0 text-ods-accent" }),
-                  /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-ods-accent text-h4", title: `Create "${query}"`, children: [
-                    "Create \u201C",
-                    query,
-                    "\u201D"
-                  ] })
-                ]
-              }
-            )),
+            ] }) : /* @__PURE__ */ jsxs(Button, { variant: "row", type: "button", onClick: handleCreate, disabled: isCreating, children: [
+              /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0 text-ods-accent" }),
+              /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-ods-accent text-h4", title: `Create "${query}"`, children: [
+                "Create \u201C",
+                query,
+                "\u201D"
+              ] })
+            ] })),
             filtered.length === 0 && !showCreate && /* @__PURE__ */ jsx("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5", children: "No tags found" })
           ] })
         ]

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

@@ -14,7 +14,7 @@ export declare const TAG_SIZE_CLASS: {
 };
 declare const tagVariants: (props?: ({
     size?: "default" | "large" | "sentence" | null | undefined;
-    variant?: "outline" | "warning" | "error" | "success" | "selected" | "grey" | "primary" | "critical" | "selectedCyan" | "badge" | null | undefined;
+    variant?: "selected" | "error" | "outline" | "warning" | "grey" | "success" | "primary" | "critical" | "selectedCyan" | "badge" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof tagVariants> {
     label: React.ReactNode;
@@ -31,15 +31,11 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ch
      * `<a>` — don't combine `as="span"` + `onClose` inside an anchor.
      */
     as?: 'div' | 'span';
+    /** The label is still being read: the tag draws its `TagSkeleton` (the tag's own frame and size). In a loading
+     *  scope a tag with an EMPTY label does the same (its label is read data not here yet); a tag whose label is
+     *  written ("Beta", "Coming Soon") is static copy and stays real. */
+    loading?: boolean;
 }
-declare function Tag({ label, variant, size, icon, onClose, className, labelClassName, disabled, as: Comp, ...props }: TagProps): React.JSX.Element;
+declare function Tag({ label, variant, size, icon, onClose, className, labelClassName, disabled, as: Comp, loading, ...props }: TagProps): React.JSX.Element;
 export { Tag, tagVariants };
-/**
- * A tag while its label is read: one skeleton box of the tag's own frame and size (its height and padding), a fixed
- * width standing for the label.
- */
-export declare function TagSkeleton({ size, className, }: {
-    size?: keyof typeof TAG_SIZE_CLASS;
-    className?: string;
-}): React.JSX.Element;
 //# sourceMappingURL=tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX,QAAA,MAAM,WAAW;;;8EAwDf,CAAC;AASH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC;IAChG,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAmCD,iBAAS,GAAG,CAAC,EACX,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,cAAc,EACd,QAAQ,EACR,EAAE,EAAE,IAAY,EAChB,GAAG,KAAK,EACT,EAAE,QAAQ,qBAgCV;AAED,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;AAE5B;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAgB,EAChB,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAIA"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX,QAAA,MAAM,WAAW;;;8EAwDf,CAAC;AASH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC;IAChG,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB;;yEAEqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAmCD,iBAAS,GAAG,CAAC,EACX,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,cAAc,EACd,QAAQ,EACR,EAAE,EAAE,IAAY,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,QAAQ,qBAoCV;AAOD,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/tag.js

@@ -5,7 +5,9 @@ import { useIsTruncated } from "../../hooks/ui/use-is-truncated.js";
 import { cn } from "../../utils/cn.js";
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
+import { loadingItemProps, useLoadingScope } from "./loading-scope.js";
 const TAG_FRAME_CLASS = "inline-flex items-center justify-center rounded-md";
 const TAG_SIZE_CLASS = {
   default: "h-8 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-xsf)] text-h5",
@@ -104,8 +106,12 @@ function Tag({
   labelClassName,
   disabled,
   as: Comp = "div",
+  loading,
   ...props
 }) {
+  const inScope = useLoadingScope();
+  if (!!loading || inScope && isEmptyTagLabel(label))
+    return /* @__PURE__ */ jsx(TagSkeleton, { size: size ?? "default", className, ...loadingItemProps(props) });
   return /* @__PURE__ */ jsxs(
     Comp,
     {
@@ -116,35 +122,43 @@ function Tag({
         icon && /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 items-center justify-center", size === "large" ? "size-6" : "size-5"), children: icon }),
         /* @__PURE__ */ jsx(TagLabel, { label, labelClassName }),
         onClose && /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "transparent",
+            size: "icon-inline",
             type: "button",
             disabled,
             onClick: (e) => {
               e.stopPropagation();
               onClose();
             },
-            className: cn(
-              "flex size-5 shrink-0 items-center justify-center rounded-full opacity-70 transition-opacity",
-              disabled ? "cursor-not-allowed" : "hover:opacity-100"
-            ),
             "aria-label": "Remove",
-            children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(XmarkCircleIcon, {})
           }
         )
       ]
     }
   );
 }
+function isEmptyTagLabel(label) {
+  return label == null || label === false || typeof label === "string" && label.trim() === "";
+}
 function TagSkeleton({
   size = "default",
-  className
+  className,
+  ...props
 }) {
-  return /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], "w-16 shrink-0", className) });
+  return /* @__PURE__ */ jsx(
+    UnifiedSkeleton,
+    {
+      as: "span",
+      className: cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], "w-16 shrink-0", className),
+      ...loadingItemProps(props)
+    }
+  );
 }
 export {
   TAG_SIZE_CLASS,
   Tag,
-  TagSkeleton,
   tagVariants
 };

package/dist/components/ui/tags-input.d.ts

@@ -1,4 +1,4 @@
-/** The field's layout (label, the input with its Add button, the tags, the count), shared with `TagsInputSkeleton`. */
+/** The field's layout (label, the input with its Add button, the tags, the count), shared with its loading form. */
 export declare const TAGS_INPUT_CLASS = "space-y-2";
 /** The input and its Add button on one line. */
 export declare const TAGS_INPUT_ROW_CLASS = "flex items-center gap-2";
@@ -12,12 +12,10 @@ interface TagsInputProps {
     inputClassName?: string;
     badgeClassName?: string;
     label?: string;
+    /** The tags are still being read: the field draws its own loading form (also inside a loading scope). */
+    loading?: boolean;
 }
-export declare function TagsInput({ value, onChange, placeholder, className, disabled, maxTags, inputClassName, badgeClassName, label, }: TagsInputProps): import("react").JSX.Element;
-/**
- * A `TagsInput` while its tags are read, in the field's own layout: the label and the Add button for real (the button
- * inert), the input's box and the tag count as skeletons. The tags themselves depend on the record and are not drawn.
- */
-export declare function TagsInputSkeleton({ label, maxTags, className, }: Pick<TagsInputProps, 'label' | 'maxTags' | 'className'>): import("react").JSX.Element;
+/** A field of tags. ONE switch: while its tags are read (`loading`, or a loading scope) its own loading form. */
+export declare function TagsInput(props: TagsInputProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=tags-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tags-input.tsx"],"names":[],"mappings":"AAWA,uHAAuH;AACvH,eAAO,MAAM,gBAAgB,cAAc,CAAC;AAC5C,gDAAgD;AAChD,eAAO,MAAM,oBAAoB,4BAA4B,CAAC;AAkB9D,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAU,EACV,QAAQ,EACR,WAA4B,EAC5B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,GACN,EAAE,cAAc,+BAgFhB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC,+BAWzD"}
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tags-input.tsx"],"names":[],"mappings":"AAYA,oHAAoH;AACpH,eAAO,MAAM,gBAAgB,cAAc,CAAC;AAC5C,gDAAgD;AAChD,eAAO,MAAM,oBAAoB,4BAA4B,CAAC;AAkB9D,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iHAAiH;AACjH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAK9C"}

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

@@ -8,6 +8,7 @@ import { Badge } from "./badge.js";
 import { Button } from "./button/index.js";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
+import { useLoadingScope } from "./loading-scope.js";
 const TAGS_INPUT_CLASS = "space-y-2";
 const TAGS_INPUT_ROW_CLASS = "flex items-center gap-2";
 const TAGS_INPUT_FIELD_CLASS = "flex-1";
@@ -25,7 +26,13 @@ function AddButton({ onClick, disabled }) {
     }
   );
 }
-function TagsInput({
+function TagsInput(props) {
+  if (useLoadingScope() || props.loading) {
+    return /* @__PURE__ */ jsx(TagsInputSkeleton, { label: props.label, maxTags: props.maxTags, className: props.className });
+  }
+  return /* @__PURE__ */ jsx(LoadedTagsInput, { ...props });
+}
+function LoadedTagsInput({
   value = [],
   onChange,
   placeholder = "Add a tag...",
@@ -84,13 +91,14 @@ function TagsInput({
     value.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: value.map((tag) => /* @__PURE__ */ jsxs(Badge, { className: cn("flex items-center gap-1 py-1 pl-2 pr-1", badgeClassName), children: [
       tag,
       !disabled && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-inline",
           type: "button",
           onClick: () => handleRemoveTag(tag),
-          className: "rounded p-0.5 transition-colors hover:bg-white/20",
           "aria-label": `Remove ${tag} tag`,
-          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx(X, {})
         }
       )
     ] }, tag)) }),
@@ -102,11 +110,7 @@ function TagsInput({
     ] })
   ] });
 }
-function TagsInputSkeleton({
-  label,
-  maxTags,
-  className
-}) {
+function TagsInputSkeleton({ label, maxTags, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn(TAGS_INPUT_CLASS, className), children: [
     label && /* @__PURE__ */ jsx(Label, { children: label }),
     /* @__PURE__ */ jsxs("div", { className: TAGS_INPUT_ROW_CLASS, children: [
@@ -119,6 +123,5 @@ function TagsInputSkeleton({
 export {
   TAGS_INPUT_CLASS,
   TAGS_INPUT_ROW_CLASS,
-  TagsInput,
-  TagsInputSkeleton
+  TagsInput
 };

package/dist/components/ui/tags-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tags-manager.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tags-manager.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,qCAAqC;IACrC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,oCAAoC;IACpC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACpE,kCAAkC;IAClC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,KAAc,EACd,iBAAyC,EACzC,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,+BA4VlB"}
+{"version":3,"file":"tags-manager.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tags-manager.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,qCAAqC;IACrC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,oCAAoC;IACpC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACpE,kCAAkC;IAClC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,KAAc,EACd,iBAAyC,EACzC,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,+BAgWlB"}

package/dist/components/ui/tags-manager.js

@@ -17,6 +17,7 @@ import {
 import { Button } from "./button/index.js";
 import { FieldWrapper } from "./field-wrapper.js";
 import { Input } from "./input.js";
+import { Label } from "./label.js";
 import { Tag } from "./tag.js";
 function TagsManager({
   tags,
@@ -112,8 +113,9 @@ function TagsManager({
   );
   return /* @__PURE__ */ jsx(FieldWrapper, { label, className, children: /* @__PURE__ */ jsx("div", { className: "relative", ref: containerRef, children: /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
+        variant: "surface",
         className: cn(
           "flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 content-md:min-h-12",
           "transition-colors duration-200",
@@ -178,11 +180,13 @@ function TagsManager({
             }
           ),
           selectedTags.length > 0 && !disabled && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "transparent",
+              size: "icon-sm",
               type: "button",
               onClick: handleClearAll,
-              className: "flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 content-md:[&_svg]:size-6",
+              className: "shrink-0",
               "aria-label": "Clear all tags",
               children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "text-ods-text-secondary" })
             }
@@ -228,6 +232,7 @@ function TagsManager({
                       /* @__PURE__ */ jsx(
                         Input,
                         {
+                          userValue: true,
                           ref: editInputRef,
                           value: editingName,
                           onChange: (e) => setEditingName(e.target.value),

package/dist/components/ui/test-run.d.ts

@@ -1,19 +1,12 @@
 import type { QueryResultRow } from './query-report-table';
 export declare function formatTestRunDuration(ms: number): string;
-/** Column-bar skeleton (header cells + one card row): fixed 160px columns on
-    every breakpoint, scrolling horizontally when they do not fit. Bars are
-    `UnifiedSkeleton`s, like the table skeletons. */
-export declare function TestResultsSkeleton({ region, }?: {
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}): import("react").JSX.Element;
 /**
  * Live test results rendered with the core DataTable (identical header,
  * skeleton, and card-row styling to the standard tables). Columns are derived
  * from the keys of the returned rows; wide result sets scroll horizontally.
  * Unlike the default tables, headers stay visible on every breakpoint.
  */
-export declare function TestResultsTable({ rows, loading }: {
+export declare function TestResultsTable({ rows, loading: loadingProp }: {
     rows: QueryResultRow[];
     loading: boolean;
 }): import("react").JSX.Element;

package/dist/components/ui/test-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-run.d.ts","sourceRoot":"","sources":["../../../src/components/ui/test-run.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAa3D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMxD;AAKD;;oDAEoD;AACpD,wBAAgB,mBAAmB,CAAC,EAClC,MAAa,GACd,GAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CACb,+BA6BL;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,+BAkD/F;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAuB7F;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAkBnG;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO3G;AAED,4DAA4D;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAa9F,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAYrG;AAED;;;;GAIG;AACH;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,4DAA4D;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB;;;;;;;;;;iBA4BtB,MAAM,OAAO,CAAC,OAAO,CAAC;;;EAgF7D"}
+{"version":3,"file":"test-run.d.ts","sourceRoot":"","sources":["../../../src/components/ui/test-run.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAa3D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMxD;AAkDD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,+BAmD5G;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BA0B7F;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAkBnG;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO3G;AAED,4DAA4D;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAa9F,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAYrG;AAED;;;;GAIG;AACH;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,4DAA4D;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB;;;;;;;;;;iBA4BtB,MAAM,OAAO,CAAC,OAAO,CAAC;;;EAgF7D"}

package/dist/components/ui/test-run.js

@@ -6,9 +6,12 @@ import { cn } from "../../utils/cn.js";
 import { formatTime } from "../../utils/format-date.js";
 import { Copy02Icon, SearchIcon } from "../icons-v2-generated/index.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { DataTable } from "./data-table/index.js";
+import { DATA_TABLE_ROW_FRAME_CLASS, ROW_HEIGHT_DESKTOP, ROW_SHELL_CLASSES } from "./data-table/data-table-row-classes.js";
 import { useDataTable } from "./data-table/use-data-table.js";
+import { LoadingItems, useLoadingScope } from "./loading-scope.js";
 import { NoData } from "./no-data/index.js";
 import { ScrollShadow } from "./scroll-fade.js";
 import { Tag } from "./tag.js";
@@ -20,16 +23,18 @@ function formatTestRunDuration(ms) {
   return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
 }
 const RESULT_COLUMN_MIN_WIDTH = 176;
-const SKELETON_COLUMNS = 6;
+const RESULT_COLUMN_WIDTH_CLASS = "flex-1 min-w-[176px]";
+const TEST_RESULTS_SKELETON_COLUMNS = 6;
 function TestResultsSkeleton({
   region = true
 } = {}) {
   return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the test results", announce: region, children: /* @__PURE__ */ jsx(ScrollShadow, { axis: "horizontal", children: /* @__PURE__ */ jsxs("div", { className: "flex w-max min-w-full flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex h-12 w-[160px] shrink-0 items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded-sm" }) }, `skeleton-header-${i}`)) }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx("div", { className: "flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-[160px] shrink-0", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded-sm" }) }, `skeleton-cell-${i}`)) }) })
+    /* @__PURE__ */ jsx("div", { className: cn("flex", ROW_SHELL_CLASSES), children: /* @__PURE__ */ jsx(LoadingItems, { count: TEST_RESULTS_SKELETON_COLUMNS, children: () => /* @__PURE__ */ jsx("div", { className: "flex h-12 shrink-0 items-center", style: { width: RESULT_COLUMN_MIN_WIDTH }, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-3/4" }) }) }) }),
+    /* @__PURE__ */ jsx("div", { className: DATA_TABLE_ROW_FRAME_CLASS, children: /* @__PURE__ */ jsx("div", { className: cn("flex", ROW_SHELL_CLASSES, ROW_HEIGHT_DESKTOP), children: /* @__PURE__ */ jsx(LoadingItems, { count: TEST_RESULTS_SKELETON_COLUMNS, children: () => /* @__PURE__ */ jsx("div", { "data-loading-item": true, className: "shrink-0", style: { width: RESULT_COLUMN_MIN_WIDTH }, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-3/4" }) }) }) }) })
   ] }) }) });
 }
-function TestResultsTable({ rows, loading }) {
+function TestResultsTable({ rows, loading: loadingProp }) {
+  const loading = useLoadingScope() || loadingProp;
   const columnKeys = useMemo(() => rows.length > 0 ? Object.keys(rows[0]) : [], [rows]);
   const columns = useMemo(() => {
     return columnKeys.map((key) => ({
@@ -42,11 +47,11 @@ function TestResultsTable({ rows, loading }) {
         return /* @__PURE__ */ jsx("span", { className: "truncate text-ods-text-primary text-h4", children: value === null || value === void 0 ? "-" : String(value) });
       },
       meta: {
-        width: "flex-1 min-w-[176px]",
+        width: RESULT_COLUMN_WIDTH_CLASS,
         // Show headers on every breakpoint; headerClassName sizes the cells
         // below lg where meta.width is not applied.
         alwaysShowHeader: true,
-        headerClassName: "flex-1 min-w-[176px]"
+        headerClassName: RESULT_COLUMN_WIDTH_CLASS
       }
     }));
   }, [columnKeys]);
@@ -79,13 +84,16 @@ function TestRunErrorBanner({ error, className }) {
       children: [
         /* @__PURE__ */ jsx("p", { className: "min-w-0 break-words text-ods-error text-h4", children: error }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "bare",
+            "data-tone": "error",
+            size: "icon-sm",
             type: "button",
             "aria-label": "Copy error message",
             onClick: () => copy(error),
-            className: "shrink-0 rounded-sm text-ods-error transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-            children: /* @__PURE__ */ jsx(Copy02Icon, { className: "size-5" })
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Copy02Icon, { className: "text-ods-error" })
           }
         )
       ]
@@ -189,7 +197,6 @@ function useTestRunState(campaign) {
   };
 }
 export {
-  TestResultsSkeleton,
   TestResultsTable,
   TestRunErrorBanner,
   TestRunResults,