@luscii-healthtech/web-ui 52.4.1 → 52.5.0

package/dist/index.development.js

@@ -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) => {