@eifi1/ui-kit 0.15.0 → 0.15.2

package/dist/components/ui.js

@@ -1133,10 +1133,10 @@ const TAB_VERTICAL_CLASSES = "flex w-full items-center rounded-md px-3 py-2 text
 const TAB_VERTICAL_ACTIVE_CLASSES = "bg-[var(--bg-active)] text-[var(--text-primary)]";
 const TAB_VERTICAL_INACTIVE_CLASSES = "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";
 const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]";
-const TAB_CLASSES = "whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+const TAB_CLASSES = "max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-[var(--text-primary)]";
 const TAB_INACTIVE_CLASSES = "border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-strong)]";
-const TAB_WRAP_CLASSES = "whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
+const TAB_WRAP_CLASSES = "max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
 const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]";
 const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]";
 const TAB_REMOVABLE_CLASSES = "pe-8 md:pe-8";
@@ -1268,29 +1268,33 @@ function Tabs({
             className: cn(
               // In a side nav the row is the full width, so the label takes it and a
               // badge lands at the row's end, where a column of counts lines up.
-              vertical ? "flex min-w-0 flex-1 items-center gap-1.5" : "inline-flex items-center gap-1.5",
+              vertical ? "flex min-w-0 flex-1 items-center gap-1.5" : "inline-flex max-w-full min-w-0 items-center gap-1.5",
               tab.empty && TAB_EMPTY_CLASSES
             ),
             children: [
               tab.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 items-center gap-0.5", children: tab.icon }),
-              tab.detail != null ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start text-start", children: [
-                /* @__PURE__ */ jsx("span", { children: tab.label }),
-                " ",
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "text-[11px] font-normal leading-tight text-[var(--text-muted)]",
-                      // On a wrapped strip's filled chip (below `md`) the muted grey
-                      // was dark text on the brand fill — "loop 2" all but vanished
-                      // under the one label that most needed reading. It takes the
-                      // chip's own ink instead, as the label and the × already do.
-                      wrap && isActive && !vertical && "text-[var(--brand-contrast)] md:text-[var(--text-muted)]"
-                    ),
-                    children: tab.detail
-                  }
-                )
-              ] }) : tab.label,
+              tab.detail != null ? (
+                // `min-w-0` + `truncate` on each line: capped by the tab's `max-w-full`, a
+                // long detail ends in an ellipsis. The whole text stays the tab's name.
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start text-start", children: [
+                  /* @__PURE__ */ jsx("span", { className: "max-w-full truncate", children: tab.label }),
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "max-w-full truncate text-[11px] font-normal leading-tight text-[var(--text-muted)]",
+                        // On a wrapped strip's filled chip (below `md`) the muted grey
+                        // was dark text on the brand fill — "loop 2" all but vanished
+                        // under the one label that most needed reading. It takes the
+                        // chip's own ink instead, as the label and the × already do.
+                        wrap && isActive && !vertical && "text-[var(--brand-contrast)] md:text-[var(--text-muted)]"
+                      ),
+                      children: tab.detail
+                    }
+                  )
+                ] })
+              ) : tab.label,
               tab.badge != null ? vertical ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: tab.badge }) : tab.badge : null
             ]
           }
@@ -1321,7 +1325,7 @@ function Tabs({
           // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and
           // a tab's children are presentational, so a reader would flatten it into the
           // tab's name. It sits beside the tab, over the gutter the tab reserves.
-          /* @__PURE__ */ jsxs("div", { className: cn("relative flex", !vertical && "shrink-0"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("relative flex max-w-full", !vertical && "shrink-0"), children: [
             element,
             isActive && /* @__PURE__ */ jsx(
               IconButton,