@flytedan/flytebot-design-system 0.12.5 → 0.12.7

package/package.json

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

package/styles/components.css

@@ -2192,6 +2192,44 @@
   gap: 2px;
   min-width: 160px;
 }
+/* MP-117 — every direct child of the overflow list (Ask, a version badge, Appearance,
+   Dev tools, Undo — whatever a screen collapses) is one full-width row, so a compact
+   control that packed tightly against its neighbours in the dense bar (a pill badge, a
+   fixed-size icon square) can't sit at a different width/height than the rest and read
+   as overlapping or uneven once stacked. */
+.fd-topbar-overflow-list > * {
+  width: 100%;
+  flex: none;
+}
+.fd-topbar-overflow-list > .fd-badge {
+  height: var(--control-h-md);
+  border-radius: var(--r-md);
+  justify-content: flex-start;
+}
+/* An IconButton rendered here (see OverflowRowContext/IconButton.tsx) trades its
+   dense-bar square for a full labelled row: same icon, same accessible name, now with
+   that name shown as text instead of only living in `aria-label`/`title`. */
+.fd-btn-icon-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+  height: var(--control-h-md);
+  padding: 0 10px;
+}
+.fd-btn-icon-row .ph {
+  font-size: 18px;
+  flex: none;
+}
+.fd-btn-icon-row-label {
+  font-size: var(--body-sm-size);
+  font-weight: var(--w-semibold);
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* Narrow Topbar (`is-narrow`, set by Topbar from its own `overflowBreakpoint`, so the
    crumb rules and the overflow menu always switch together): earlier crumbs hide (the
    nav drawer `onMenu` opens still reaches them), and the current crumb truncates with
@@ -4229,6 +4267,23 @@ button.fd-erow-metric:focus-visible {
     flex-direction: column;
     align-items: stretch;
   }
+  /* MP-114: below the same width EntityRow's metric strip stops having room to keep
+     every column at the desktop's fixed --erow-metric-w (set so rows line up with a
+     multi-digit totals footer, see EntityRowMetrics/.fd-erow-cell above) — even each
+     cell's own un-wrapped figure (`.fd-erow-metric`'s `white-space: nowrap` makes its
+     min-content equal its full width) no longer fits together in the strip, and
+     `.fd-erow-metrics`'s `overflow: hidden` was clipping the ones that didn't. A
+     stacked phone pane never regains that room, so the fixed-column alignment this
+     component is built for is traded, at this width only, for every metric staying a
+     whole, readable button: cells size to their own content instead of the desktop
+     column width, and the strip wraps instead of clipping. */
+  .fd-erow-cell {
+    width: auto;
+  }
+  .fd-erow-metrics {
+    flex-wrap: wrap;
+    overflow: visible;
+  }
 }
 .fd-tlist-side {
   flex: 1;