@eifi1/ui-kit 0.15.1 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/alert-banner.tsx

@@ -267,8 +267,17 @@ export function AlertBanner({
   // phone a long message plus an action would otherwise squeeze the text into a narrow
   // column, so the action drops under it instead. A box may wrap its text, so it
   // top-aligns and nudges the glyph onto the first line.
+  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box
+  // squeezed "Please confirm your email address…" into a ~100px column beside a
+  // "Resend verification email" button. There the action takes a line of its own under
+  // the message, and the × stays at the top end; from sm up the box is one row as before.
+  const boxWraps = !inline && !strip && action !== undefined && action !== null;
   const row = cn(
-    inlineRow ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
+    inlineRow
+      ? "inline-flex items-center"
+      : strip
+        ? "flex flex-wrap items-center gap-y-1"
+        : cn("flex items-start", boxWraps && "max-sm:flex-wrap max-sm:gap-y-2"),
     sm ? "gap-1.5 text-xs" : inline ? "gap-1.5 text-sm" : "gap-2 text-sm",
   );
   // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,
@@ -324,7 +333,15 @@ export function AlertBanner({
   // `relative z-10` so it stays clickable over a whole-row banner's stretched target.
   const trailing =
     action !== undefined && action !== null ? (
-      <div className={cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inlineRow && "self-center", strip && "ms-auto")}>
+      <div
+        className={cn(
+          "relative z-10 flex shrink-0 items-center gap-2",
+          !strip && !inlineRow && "self-center",
+          strip && "ms-auto",
+          // Last, on a line of its own, lined up with the message (past the glyph).
+          boxWraps && cn("max-sm:order-last max-sm:basis-full", glyph && (sm ? "max-sm:ps-5" : "max-sm:ps-6")),
+        )}
+      >
         {action}
       </div>
     ) : null;

package/src/components/chart.tsx

@@ -297,7 +297,11 @@ export function ChartTooltipContent({
     <div
       ref={tipRef}
       style={boundaryRef ? { transform: flip ? "translateX(calc(-100% - 12px))" : "translateX(12px)" } : undefined}
-      className="min-w-[9rem] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl"
+      // Capped at the viewport: six long series names (lenkbank's German motion
+      // labels) made the box wider than a 390px chart, and recharts, which keeps a box
+      // inside the plot only when it fits, let it run off the edge with the values cut.
+      // Names wrap inside the cap; the values never do.
+      className="min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl"
     >
       {!hideLabel && label != null && (
         <div className="mb-1.5 font-medium text-[var(--text-primary)]">
@@ -333,8 +337,11 @@ export function ChartTooltipContent({
                 )}
                 style={{ backgroundColor: color }}
               />
-              <span className="text-[var(--text-muted)]">{name}</span>
-              <span data-private className="ms-auto font-mono font-medium tabular-nums text-[var(--text-primary)]">
+              <span className="min-w-0 break-words text-[var(--text-muted)]">{name}</span>
+              <span
+                data-private
+                className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
+              >
                 {shown}
               </span>
             </div>

package/src/components/series-chart.tsx

@@ -744,10 +744,16 @@ export function visibleSeries(
     .filter((entry) => !hidden.has(entry.key));
 }
 
-/** A series' name with its unit after it: "Velocity (mm/s)". */
+/** A series' name with its unit after it: "Velocity (mm/s)" — unless the name already
+ *  ends with it. lenkbank's motion series carry "(mm/s)" in their label for the desktop
+ *  tooltip, where every axis is drawn; the budget then read "… (mm/s) (mm/s)" (0.15.1).
+ *  A label that says its unit keeps saying it once, whichever of the two an app chose. */
 function withUnit(label: ReactNode, unit: string | undefined): ReactNode {
   if (!unit) return label;
-  if (typeof label === "string" || typeof label === "number") return `${label} (${unit})`;
+  if (typeof label === "string" || typeof label === "number") {
+    const text = String(label);
+    return text.trimEnd().endsWith(`(${unit})`) ? label : `${text} (${unit})`;
+  }
   return (
     <>
       {label} ({unit})

package/src/components/table.tsx

@@ -161,8 +161,33 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
    * row can still say otherwise with {@link TableRowProps.bordered}.
    */
   rowDividers?: boolean;
+  /**
+   * `"phone"`: below `sm` each body row becomes a block — its first cell the row's
+   * title, every further cell under its column's header as a small label — and the
+   * head row is visually hidden (still read by screen readers). For tables of PROSE,
+   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into
+   * two-word slivers at 390px and ran its third column off the screen). A table of
+   * numbers should keep scrolling sideways, which is why this is opt-in. The labels
+   * are the head row's cell texts, read from the DOM; a body cell spanning several
+   * columns gets none.
+   */
+  stack?: "phone";
 }
 
+/**
+ * Below `sm` on a `stack="phone"` table: rows as blocks, the head visually hidden,
+ * the first cell as a title, the others labelled by `data-label` (set by the table).
+ */
+const STACK_PHONE_CLASSES = cn(
+  "max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block",
+  "max-sm:[&_thead]:sr-only",
+  "max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2",
+  "max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start",
+  "max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5",
+  "max-sm:[&_tbody_td:first-child]:font-medium",
+  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-[11px] max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]",
+);
+
 /**
  * A plain, static HTML table in the kit's tokens — for the detail views that need
  * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.
@@ -188,6 +213,7 @@ export function Table({
   layout,
   framed = false,
   rowDividers = true,
+  stack,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -196,6 +222,37 @@ export function Table({
   const [captions, setCaptions] = useState(0);
   const wrapper = useRef<HTMLDivElement | null>(null);
   const overflowing = useScrollOverflow(wrapper);
+  const tableRef = useRef<HTMLTableElement | null>(null);
+
+  // `stack="phone"`: label every body cell with its column's header text, and keep the
+  // table's roles explicit — `display: block` on table parts drops their table
+  // semantics in some engines. Re-run on any change to the rows, which the caller
+  // renders and this component never sees.
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!stack || !table) return;
+    const label = () => {
+      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? "");
+      table.setAttribute("role", "table");
+      for (const row of Array.from(table.rows)) {
+        row.setAttribute("role", "row");
+        let column = 0;
+        for (const cell of Array.from(row.cells)) {
+          const span = cell.colSpan || 1;
+          if (cell.tagName === "TH") cell.setAttribute("role", cell.closest("thead") ? "columnheader" : "rowheader");
+          else cell.setAttribute("role", "cell");
+          const text = span === 1 && column > 0 ? heads[column] : undefined;
+          if (cell.tagName === "TD" && text) cell.setAttribute("data-label", text);
+          else cell.removeAttribute("data-label");
+          column += span;
+        }
+      }
+    };
+    label();
+    const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(label);
+    observer?.observe(table, { childList: true, subtree: true, characterData: true });
+    return () => observer?.disconnect();
+  }, [stack]);
 
   const ctx = useMemo<TableContextValue>(
     () => ({
@@ -239,12 +296,14 @@ export function Table({
       >
         <table
           {...rest}
+          ref={tableRef}
           aria-label={ariaLabel}
           className={cn(
             "w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]",
             density === "compact" && "text-xs",
             layout === "fixed" && "table-fixed",
             layout === "auto" && "table-auto",
+            stack === "phone" && STACK_PHONE_CLASSES,
             className,
           )}
         />

package/src/components/toggle-group.tsx

@@ -26,6 +26,15 @@ export interface ToggleGroupBaseProps<T extends string>
   /** Applied to every option button (e.g. to tune height/rounding to match
    *  adjacent fields). Per-option `className` still wins over this. */
   optionClassName?: string;
+  /**
+   * What happens when the options do not fit the group's width. `"truncate"`
+   * (default): one row, and the labels that do not fit end in an ellipsis — the height
+   * never changes. `"wrap"`: the segments flow onto a second row and every label stays
+   * whole ("Bewegung", not "Beweg…"), at the price of a taller group on a narrow
+   * screen (lenkbank L4: five signal types on a 390px control page). From the width
+   * where they fit, both look the same.
+   */
+  overflow?: "truncate" | "wrap";
   /**
    * @deprecated Pass `aria-label` instead — the DOM spelling, which every other
    * control in this kit now answers to. Kept working because three applications ship
@@ -174,6 +183,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     options,
     className,
     optionClassName,
+    overflow = "truncate",
     ariaLabel,
     disabled = false,
     size = "md",
@@ -270,6 +280,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
         // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a
         // phone does see is the focus ring — see the segment's own note below.)
         "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
+        overflow === "wrap" && "flex-wrap",
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
@@ -318,7 +329,8 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
               // overlaying the selected segment's boundary. Inset keeps the ring
               // inside the segment it belongs to; focus-visible keeps it for the
               // keyboard, which is the only input that needs it.
-              "min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+              overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
+              "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
               size === "sm" && "px-2 py-1 text-xs",
               // In a field: no vertical padding and a 20px line — a `text-sm` line, the
               // same line a labelled Select holds under its label strip — so the field's

package/src/components/ui.tsx

@@ -2712,8 +2712,12 @@ const TAB_VERTICAL_INACTIVE_CLASSES =
 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)]";
 
+// `max-w-full`: no tab outgrows its strip. A sheet's `detail` line ("Spurstangenkraft
+// links · … · 31 Punkte") made one tab 448px wide in a 390px strip, and a tab wider
+// than the strip cannot be scrolled into view — its end was simply off screen
+// (lenkbank L3). The label and detail truncate inside it instead; see `inner`.
 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)]";
+  "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)]";
@@ -2727,7 +2731,7 @@ const TAB_INACTIVE_CLASSES =
 // all ten have to stay readable; it is the FILL, not the text weight, that says
 // which one is open.
 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";
+  "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 =
@@ -2944,7 +2948,7 @@ export function Tabs<T extends string>({
             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,
             )}
           >
@@ -2954,14 +2958,16 @@ export function Tabs<T extends string>({
               </span>
             )}
             {tab.detail != null ? (
-              <span className="flex flex-col items-start text-start">
-                <span>{tab.label}</span>
+              // `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.
+              <span className="flex min-w-0 flex-col items-start text-start">
+                <span className="max-w-full truncate">{tab.label}</span>
                 {/* A separator for the NAME only — whitespace between flex items is
                     not drawn, and without it the two lines ran together into one
                     word for a screen reader ("80 km/hloop 2"). */}{" "}
                 <span
                   className={cn(
-                    "text-[11px] font-normal leading-tight text-[var(--text-muted)]",
+                    "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
@@ -3025,7 +3031,7 @@ export function Tabs<T extends string>({
           // 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.
-          <div key={tab.id} className={cn("relative flex", !vertical && "shrink-0")}>
+          <div key={tab.id} className={cn("relative flex max-w-full", !vertical && "shrink-0")}>
             {element}
             {isActive && (
               <IconButton