@flytedan/flytebot-design-system 0.11.3 → 0.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "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;
 }
@@ -4045,18 +4050,33 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  /* Cells are fixed-width, so a strip wider than the row it's in has to lose the
-     tail rather than push it: without this the overflowing cells paint straight
-     through whatever is pinned to the end of the strip. Clipping the last column
-     is the right failure here — the alternative is columns that shift row to row,
-     which is the one thing an aligned strip must never do. */
+  /* When even the figures themselves don't fit (see .fd-erow-cell), the strip loses
+     the tail rather than pushing it: without this the overflowing cells paint straight
+     through whatever is pinned to the end of the strip. */
   overflow: hidden;
 }
+/* One column slot. It takes its column's width (--erow-metric-w, set per cell by
+   EntityRowMetrics) whenever the strip has room for every column at its width, which keeps
+   rows and totals aligned. In a strip too narrow for that — a phone, or a list pane squeezed
+   beside another — the slots shrink toward their own figure instead of clipping whole
+   columns off the end: a narrow row gives up alignment before it gives up a figure. The
+   right padding (inside the width) keeps shrunk figures from running into each other. */
+.fd-erow-cell {
+  display: flex;
+  flex: 0 1 auto;
+  width: var(--erow-metric-w);
+  min-width: min-content;
+  padding-right: 6px;
+}
+.fd-erow-cell > .fd-tooltip-anchor,
+.fd-erow-cell .fd-erow-metric {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 .fd-erow-metric {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  flex: none;
   font-size: var(--overline-size);
   color: var(--text-2);
   white-space: nowrap;
@@ -4137,6 +4157,42 @@ button.fd-erow-metric:focus-visible {
   opacity: 0.6;
 }
 
+/* TransferList: two panels side by side, each its own bordered surface — while the
+   component itself is wide enough for that. Below 600px of its OWN width (a phone, or a
+   half-width card on a desktop page) the panels stack: two panes under ~290px each are 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. A container
+   query, not a media query, because the width that matters is the list's, not the
+   screen's. */
+.fd-tlist {
+  container-type: inline-size;
+}
+.fd-tlist-panes {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+@container (max-width: 600px) {
+  .fd-tlist-panes {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+.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);
+}
 /* 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