@flytedan/flytebot-design-system 0.50.0 → 0.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "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,24 @@
   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. Each is one unbreakable unit
+ * (`nowrap` on `.fd-stat-figure` and `.fd-stat-delta`), so neither is shrunk or split:
+ * 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
@@ -2703,6 +2714,24 @@
   color: var(--text);
   font-size: var(--body-size);
 }
+/* ToastProvider's stack: pinned to the bottom-right of the viewport (z-index is set inline
+   from OVERLAY_CEILING, above every layer). The region itself takes no clicks: it has a real
+   box wherever a toast is, including the gap between two stacked toasts and the shadow around
+   each, and without this a click aimed at the control underneath would land on it. Each toast
+   takes its clicks back, so its close button works. */
+.fd-toast-region {
+  position: fixed;
+  bottom: var(--s-lg);
+  right: var(--s-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-sm);
+  max-width: calc(100vw - 2 * var(--s-lg));
+  pointer-events: none;
+}
+.fd-toast-region > * {
+  pointer-events: auto;
+}
 
 /* ============ Flag / empty ============ */
 .fd-flag {
@@ -3015,6 +3044,14 @@
 .fd-filterbar-trigger {
   flex: none;
 }
+/* The count of applied filters, inside the Filter button: the kit's blue count pill, shrunk to
+   sit beside the button's text without making the button taller. */
+.fd-filterbar-count {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  margin-inline-start: var(--s-sm);
+}
 .fd-filterbar-chips {
   flex: 1 1 0;
   min-width: 0;
@@ -4036,28 +4073,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 +4149,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;