@flytedan/flytebot-design-system 0.65.0 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.65.0",
+  "version": "0.67.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 {
@@ -3383,6 +3421,22 @@
   border-color: var(--border-brand);
   cursor: text;
 }
+/* MP-312: a chip whose filter the host set (a "fixed" field): the selected chip's look, but not a
+   control. Only its x is one, so no hover change and no pointer on the label. */
+.fd-filterbar-fixed {
+  background: var(--surface-brand);
+  border-color: var(--border-brand);
+  color: var(--text-on-surface-brand);
+  cursor: default;
+}
+.fd-filterbar-fixed:hover {
+  background: var(--surface-brand);
+  color: var(--text-on-surface-brand);
+}
+.fd-filterbar-fixed .fd-tag-remove:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 .fd-filterbar-text-input {
   all: unset;
   min-width: 90px;