@flytedan/flytebot-design-system 0.64.0 → 0.66.0

package/package.json

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

package/styles/components.css

@@ -1994,6 +1994,44 @@
 .fd-stat-delta-neutral {
   color: var(--text-muted);
 }
+/* MP-311: a pressable tile (StatTile with `onPress`) is a real <button> that filters a list.
+ * Reset the button chrome so it reads as the same tile, then give it hover, press, focus,
+ * pressed and disabled states that only touch border, fill and shadow, never size, so nothing
+ * reflows. `:focus-visible` is restated after `:hover`/`:active` for the reason .fd-card-interactive
+ * gives above (a hovered, focused tile must still show its ring). A pressed tile uses the brand
+ * tokens .fd-tag[aria-pressed] uses, so light, dark and high contrast all resolve. */
+.fd-stat-pressable {
+  display: block;
+  width: 100%;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background var(--dur-base) var(--ease),
+    border-color var(--dur-base) var(--ease),
+    box-shadow var(--dur-base) var(--ease);
+}
+.fd-stat-pressable:hover {
+  box-shadow: var(--e-2);
+  border-color: var(--border-strong);
+}
+.fd-stat-pressable:active {
+  box-shadow: var(--e-1);
+  border-color: var(--border-strong);
+}
+.fd-stat-pressable[aria-pressed="true"] {
+  background: var(--surface-brand);
+  border-color: var(--border-brand);
+}
+.fd-stat-pressable:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.fd-stat-pressable:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+}
 
 /* ============ Meter / progress ============ */
 .fd-meterbar {
@@ -3844,6 +3882,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