@flytedan/flytebot-design-system 0.63.0 → 0.65.0

package/package.json

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

package/styles/components.css

@@ -3844,6 +3844,32 @@
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
   gap: 16px;
 }
+/* MP-310 — StatGrid (src/components/data/StatGrid.tsx): a stat tile set that wraps only into even
+   rows. `fd-grid-stats` above is `auto-fit` and stays as it is; this is the opt-in for a set that
+   must never strand one tile on a line (four tiles at a width that fits three). The root is the
+   size container and the tiles sit in a grid inside it (a grid cannot query its own width), so the
+   count follows the box the set is placed in, not the viewport. Each step is the narrowest
+   container that holds that many tiles at the same 175px floor `fd-grid-stats` uses and one 16px
+   gap between: two tiles need 366px, four need 748px. A set of four stops at 2 between those two
+   widths rather than going to 3. */
+.fd-stat-grid {
+  container-type: inline-size;
+}
+.fd-stat-grid-tiles {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+}
+@container (width >= 366px) {
+  .fd-stat-grid-tiles {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@container (width >= 748px) {
+  .fd-stat-grid-tiles[data-columns="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 /* MP-271 — CardGrid (src/components/layout/CardGrid.tsx). `auto-fill` rather than
    `fd-grid-stats`'s own `auto-fit` above on purpose: a dashboard of Cards should keep a
    consistent card width as the count changes, not stretch a lone card to fill the whole row