@luscii-healthtech/web-ui 52.4.0 → 52.5.0

package/dist/index.development.js

@@ -3035,8 +3035,8 @@ function Card(props) {
     modifier: "hover",
     transition: true
   });
-  const outerClasses = classNames__default.default("ui:bg-white", "ui:transition-colors ui:duration-300", className, hoverShadowClassName, "ui:transition-shadow ui:duration-300");
-  const innerClasses = classNames__default.default("ui:bg-white ui:rounded-inherit ui:border ui:border-transparent ui:transition[border-color] ui:duration-300 ui:motion-reduce:duration-[0ms]! ui:overflow-hidden", "ui:relative", "ui:before:contain-strict ui:before:transition[transform, opacity] ui:before:delay-50 ui:before:duration-150 ui:before:motion-reduce:duration-[0ms]!", "ui:before:origin-left ui:before:absolute ui:before:left-0 ui:before:content-[''] ui:before:inset-y-0 ui:before:ease-in-out", {
+  const outerClasses = classNames__default.default("ui:transition-colors ui:duration-300", className, hoverShadowClassName, "ui:transition-shadow ui:duration-300");
+  const innerClasses = classNames__default.default("ui:rounded-inherit ui:border ui:border-transparent ui:transition[border-color] ui:duration-300 ui:motion-reduce:duration-[0ms]! ui:overflow-hidden", "ui:relative", "ui:before:contain-strict ui:before:transition[transform, opacity] ui:before:delay-50 ui:before:duration-150 ui:before:motion-reduce:duration-[0ms]!", "ui:before:origin-left ui:before:absolute ui:before:left-0 ui:before:content-[''] ui:before:inset-y-0 ui:before:ease-in-out", {
     "ui:border-slate-300": border || highlighted,
     "ui:hover:border-slate-400": hasHoverEffect,
     "ui:before:opacity-0 ui:before:scale-x-0": !highlighted,
@@ -3050,7 +3050,7 @@ function Card(props) {
     "ui:before:w-m": ["m", "l", "xl", "xxl"].includes(borderRadius)
     // We cap at `ui:before:w-m` otherwise the bar overlaps the contents of the Card.
   });
-  return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation: highlighted && !elevation ? "large" : elevation, borderRadius }, rest, { className: outerClasses, children: jsxRuntime.jsxs(Box, { className: innerClasses, children: [jsxRuntime.jsx(RenderTopBar, Object.assign({}, props)), padding ? jsxRuntime.jsx(Padding$1, { children }) : children] }) }));
+  return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation: highlighted && !elevation ? "large" : elevation, borderRadius, className: outerClasses, backgroundColor: "surface" }, rest, { children: jsxRuntime.jsxs(Box, { className: innerClasses, children: [jsxRuntime.jsx(RenderTopBar, Object.assign({}, props)), padding ? jsxRuntime.jsx(Padding$1, { children }) : children] }) }));
 }
 Card.Title = (props) => jsxRuntime.jsx(Title, Object.assign({ variant: "sm" }, props));
 Card.TopBar = TopBar;
@@ -3095,12 +3095,37 @@ const TabsRoot = React__namespace.forwardRef((props, ref) => jsxRuntime.jsx(Tabs
 TabsRoot.displayName = "Tabs.Root";
 const TabsList = React__namespace.forwardRef((_a, ref) => {
   var { className } = _a, props = __rest(_a, ["className"]);
-  return jsxRuntime.jsx(TabsPrimitive__namespace.List, Object.assign({ ref, className: cn("ui:inline-flex ui:items-center ui:justify-center ui:gap-(--ui-spacing-xl)", className) }, props));
+  return jsxRuntime.jsx(TabsPrimitive__namespace.List, Object.assign({ ref, className: cn(
+    // `items-stretch` lets the tallest trigger drive the row height
+    // so every trigger — with or without an adornment (Badge,
+    // spinner, …) — shares the same content-box. This keeps the
+    // underline flush across the row and any sibling `<hr>` aligned
+    // with every trigger's bottom edge.
+    "ui:inline-flex ui:items-stretch ui:justify-center ui:gap-(--ui-spacing-xl)",
+    className
+  ) }, props));
 });
 TabsList.displayName = "Tabs.List";
 const TabsTrigger = React__namespace.forwardRef((_a, ref) => {
   var { className } = _a, props = __rest(_a, ["className"]);
-  return jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, Object.assign({ ref, className: cn("ui:transition-all", "ui:hover:text-primary", "ui:disabled:pointer-events-none ui:disabled:opacity-50", "ui:border-b-2 ui:border-transparent", "ui:data-[state=active]:text-primary ui:data-[state=active]:border-primary", "ui:py-(--ui-spacing-m)", className) }, props));
+  return jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, Object.assign({ ref, className: cn(
+    // Use an inline-flex context so the label and any adornments
+    // (Badge, LoadingIndicator, etc.) align by flex cross-axis
+    // centering rather than by text baseline. Without this the
+    // trigger falls back to inline layout, where atomic inline
+    // adornments with `vertical-align: baseline` grow the line-box
+    // and make triggers with adornments taller than plain-text ones.
+    // Row-wide height equalization is handled by `Tabs.List` via
+    // `items-stretch` — this trigger only centers its own children.
+    "ui:inline-flex ui:items-center",
+    "ui:transition-all",
+    "ui:hover:text-primary",
+    "ui:disabled:pointer-events-none ui:disabled:opacity-50",
+    "ui:border-b-2 ui:border-transparent",
+    "ui:data-[state=active]:text-primary ui:data-[state=active]:border-primary",
+    "ui:py-(--ui-spacing-m)",
+    className
+  ) }, props));
 });
 TabsTrigger.displayName = "Tabs.Trigger";
 const TabsContent = React__namespace.forwardRef((_a, ref) => {