@flytedan/flytebot-design-system 0.11.3 → 0.11.4

package/package.json

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

package/styles/components.css

@@ -217,7 +217,12 @@
   background: var(--btn-solid-bg-hover);
   color: var(--btn-solid-ink);
 }
-.fd-btn-icon-solid:active {
+/* Pressed restates every selector hover uses: a toned `:hover` is three classes deep, so a
+   bare `.fd-btn-icon-solid:active` loses to it and a pressed add/remove button would keep
+   its hover fill. */
+.fd-btn-icon-solid:active,
+.fd-btn-icon-solid.is-ok:active,
+.fd-btn-icon-solid.is-danger:active {
   background: var(--btn-solid-bg-active);
   box-shadow: none;
 }
@@ -4057,6 +4062,7 @@
   align-items: center;
   gap: 4px;
   flex: none;
+  width: var(--erow-metric-w);
   font-size: var(--overline-size);
   color: var(--text-2);
   white-space: nowrap;
@@ -4111,6 +4117,21 @@ button.fd-erow-metric:focus-visible {
     font-size: 18px;
   }
 }
+/* On a narrow screen the fixed column widths give way to the figures themselves. A phone
+   row has roughly 170px beside its name's grip and its 44px action, and a strip of three
+   columns sized for desktop totals is 270px, so fixed widths there do not clip "the tail":
+   they hide a whole figure, on every row, with nothing to say it exists. Content-sized
+   cells with a gap keep every figure visible; the cost is that columns can drift a few px
+   row to row, which on a phone is the smaller loss. Wider than this, cells keep their
+   fixed widths and the aligned-column contract above holds exactly. */
+@media (max-width: 768px) {
+  .fd-erow-metrics {
+    gap: 10px;
+  }
+  .fd-erow-metric {
+    width: auto;
+  }
+}
 .fd-erow-accessory {
   margin-left: auto;
   flex: none;
@@ -4137,6 +4158,36 @@ button.fd-erow-metric:focus-visible {
   opacity: 0.6;
 }
 
+/* TransferList: two panels side by side, each its own bordered surface. On a narrow screen
+   the panels stack instead: two lists sharing a phone's width get ~140px each, which is
+   too narrow for a search field beside its sort button or for a row's name beside its
+   figures and action, so a list you cannot read is traded for one you scroll past. */
+.fd-tlist {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.fd-tlist-side {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  position: relative;
+}
+.fd-tlist-side.is-drop-target {
+  border-color: var(--brand);
+}
+@media (max-width: 768px) {
+  .fd-tlist {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
 /* TransferList's full-panel drop overlay — extends the existing subtle
    dragOverSide border-color change into real visual weight: a dashed blue
    border and a translucent brand scrim across the WHOLE target side, with