@flytedan/flytebot-design-system 0.50.0 → 0.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.50.0",
+  "version": "0.50.1",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -1882,13 +1882,23 @@
   min-width: 0;
   overflow: hidden;
 }
+/* The figure and its delta share a line while both fit; when the tile is too narrow for
+ * both, the delta wraps onto its own line under the figure. Neither is ever clipped or
+ * shrunk: each is one unbreakable unit (nowrap) and only the gap between them yields. */
 .fd-stat-top {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
-  gap: 8px;
-  white-space: nowrap;
+  column-gap: 8px;
+  row-gap: 2px;
   min-width: 0;
 }
+.fd-stat-delta {
+  flex: none;
+  font-weight: 600;
+  font-size: var(--body-sm-size);
+  white-space: nowrap;
+}
 .fd-stat-sub {
   /* MP-141: this is explanatory copy ("on every funded campus, at minimum"),
    * never a user-data identifier — per the kit's truncation rule (see this
@@ -4036,28 +4046,31 @@
 }
 
 /* BarList */
+/* One shared column set for the whole list, so every row's label, bar, value and percent
+   line up. The label column is as wide as the widest label (capped at 40% of the list, past
+   which a long label ellipsizes and exposes its full text via `title`), so a short label such
+   as a date is always shown whole instead of being cut to a fixed share of the row. Each level
+   between the list and the cells (item, Tooltip anchor, button) is a subgrid over those same
+   columns. */
 .fd-barlist-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-/* Tooltip's own trigger wrapper is an inline-flex span sized to its content (so an icon
-   trigger elsewhere in the kit hugs the icon) — here the trigger IS the whole row, so it
-   has to fill the row's width instead of shrink-wrapping it, or every column past the
-   label collapses to min-content. */
-.fd-barlist-row .fd-tooltip-anchor {
-  display: block;
-  width: 100%;
+  display: grid;
+  grid-template-columns: fit-content(40%) minmax(48px, 1fr) max-content max-content;
+  column-gap: 10px;
+  row-gap: 2px;
 }
+.fd-barlist-row,
+.fd-barlist-row .fd-tooltip-anchor,
 .fd-barlist-btn {
   display: grid;
-  grid-template-columns: minmax(64px, 0.9fr) 3fr auto auto;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  min-width: 0;
+}
+.fd-barlist-btn {
   align-items: center;
-  gap: 10px;
-  width: 100%;
   border: none;
   background: none;
   padding: 6px 4px;
@@ -4109,9 +4122,9 @@
   text-align: right;
 }
 @media (max-width: 480px) {
-  .fd-barlist-btn {
-    grid-template-columns: minmax(52px, 0.8fr) 2fr auto auto;
-    gap: 6px;
+  .fd-barlist-list {
+    grid-template-columns: fit-content(40%) minmax(40px, 1fr) max-content;
+    column-gap: 6px;
   }
   .fd-barlist-pct {
     display: none;