@flytedan/flytebot-design-system 0.12.13 → 0.12.15

package/package.json

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

package/styles/components.css

@@ -1470,11 +1470,9 @@
 .fd-soon-cone-mark i {
   font-size: 11px;
 }
-/* The z-index below is a resting default only — ComingSoon.tsx always sets it inline via
-   useOverlayLayer(SOON_HOVERCARD_BASE), which wins over this rule (see Popover.tsx). */
+/* z-index is set inline by ComingSoon.tsx via useOverlayLayer (see Popover.tsx). */
 .fd-soon-hovercard {
   transform: none;
-  z-index: 220;
   box-shadow: 0 18px 48px rgba(11, 13, 17, 0.26);
   animation: fd-fade var(--dur-fast) var(--ease) both;
 }
@@ -2254,7 +2252,16 @@
   padding: 0 var(--gutter-lg);
   position: relative;
 }
+/* MP-141: the breadcrumb is the Topbar's only elastic item. Every other direct child
+   (overflowActions, actions — the version badge, the account trigger, any icon button)
+   keeps its content width at any viewport: it never shrinks below what its own content
+   needs. The crumb absorbs whatever space that leaves, growing to fill the row (so no
+   separate spacer element is needed) and shrinking first when the row is tight. */
+.fd-topbar > *:not(.fd-crumb) {
+  flex-shrink: 0;
+}
 .fd-crumb {
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -2268,7 +2275,15 @@
 .fd-crumb a:hover {
   color: var(--text);
 }
+/* The current crumb already exposes its full text via `truncationTitle` (Topbar.tsx),
+   so it may ellipsize at any width, not only `.is-narrow` — the same rule that used to
+   apply only in the collapsed layout now applies everywhere the row runs out of room. */
 .fd-crumb-current {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--text);
   font-weight: var(--w-semibold);
 }
@@ -2316,31 +2331,20 @@
 }
 /* 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
-   an ellipsis instead of spilling its text outside a zero-width box.
-   The crumb also grows (`flex: 1 1 auto`) so it, not the row spacer, takes the width
-   the collapsed controls free. */
-.fd-topbar.is-narrow .fd-crumb {
-  flex: 1 1 auto;
-}
+   nav drawer `onMenu` opens still reaches them). The crumb's grow/shrink and the current
+   crumb's ellipsis are the base `.fd-crumb`/`.fd-crumb-current` rules above — they apply
+   at every width, not only here. */
 .fd-topbar.is-narrow .fd-crumb > *:not(:last-child) {
   display: none;
 }
-.fd-topbar.is-narrow .fd-crumb-current {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 /* ============ Overlays ============ */
+/* z-index is set inline by Modal.tsx/Drawer.tsx via useOverlayLayer (see Popover.tsx). */
 .fd-scrim {
   position: fixed;
   inset: 0;
   background: var(--scrim);
   backdrop-filter: blur(3px);
-  z-index: 80;
   animation: fd-fade var(--dur-base) var(--ease) both;
   display: grid;
   place-items: center;
@@ -2470,8 +2474,7 @@
   border-top: 1px solid var(--border);
   background: var(--surface-2);
 }
-/* z-index below is a resting default only — Drawer.tsx sets it (and its scrim's) inline
-   via useOverlayLayer(DRAWER_BASE), which wins over this rule (see Popover.tsx). */
+/* z-index is set inline by Drawer.tsx (and its scrim's) via useOverlayLayer (see Popover.tsx). */
 .fd-drawer {
   position: fixed;
   top: 0;
@@ -2483,7 +2486,6 @@
   width: min(520px, 100%);
   background: var(--surface);
   box-shadow: var(--e-4);
-  z-index: 90;
   display: flex;
   flex-direction: column;
   animation: fd-drawer-in var(--dur-panel) var(--ease-out) both;
@@ -2497,12 +2499,9 @@
 /* Portaled to document.body and placed by Tooltip.tsx (fixed, anchored geometry), so no
    overflow: hidden ancestor of the trigger can clip it. Short labels stay on one line
    (max-content); a sentence wraps at a readable measure instead of running off-screen.
-   The z-index below is a resting default only — Tooltip.tsx always sets it inline via
-   useOverlayLayer(TOOLTIP_BASE), which wins over this rule and is what actually keeps a
-   tip above whatever popover its trigger happens to be nested inside (see Popover.tsx). */
+   z-index is set inline by Tooltip.tsx via useOverlayLayer (see Popover.tsx). */
 .fd-tooltip {
   position: fixed;
-  z-index: 150;
   width: max-content;
   max-width: min(280px, calc(100vw - 16px));
   background: var(--n-900);
@@ -2640,11 +2639,11 @@
   position: relative;
 }
 .fd-pop {
+  /* z-index is set inline by Popover.tsx via useOverlayLayer (see Popover.tsx). */
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   min-width: 100%;
-  z-index: 110;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
@@ -6440,45 +6439,6 @@ button.fd-erow-metric:focus-visible {
   }
 }
 
-/* attachment lightbox (demo harness) */
-.fdc-lightbox {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  display: grid;
-  place-items: center;
-  padding: 36px;
-  background: var(--scrim);
-  backdrop-filter: blur(3px);
-  animation: fd-pop var(--dur-fast) var(--ease-out) both;
-}
-.fdc-lightbox figure {
-  margin: 0;
-  max-width: min(1100px, 92vw);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.fdc-lightbox img {
-  max-width: 100%;
-  max-height: 76vh;
-  border-radius: var(--r-lg);
-  box-shadow: var(--e-4);
-  background: var(--surface);
-}
-.fdc-lightbox figcaption {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  color: #fff;
-  font-size: var(--body-sm-size);
-  font-weight: var(--w-medium);
-}
-.fdc-lightbox figcaption span {
-  opacity: 0.62;
-  font-weight: var(--w-regular);
-}
-
 /* ============ Build mode (live / test) ============ */
 .fd-mode-btn {
   position: relative;
@@ -6533,13 +6493,11 @@ button.fd-erow-metric:focus-visible {
   border: 1.5px solid var(--surface);
   animation: fd-badge-pop 260ms var(--ease) both;
 }
-/* The z-index below is a resting default only — ModeSwitch.tsx always sets it inline via
-   useOverlayLayer(MODE_SWITCH_BASE), which wins over this rule (see Popover.tsx). */
+/* z-index is set inline by ModeSwitch.tsx via useOverlayLayer (see Popover.tsx). */
 .fd-mode-pop {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
-  z-index: 140;
   width: 400px;
   max-width: calc(100vw - 32px);
   display: block;