@flytedan/flytebot-design-system 0.65.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.65.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 {