@flytedan/flytebot-design-system 0.12.12 → 0.12.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.12.12",
+  "version": "0.12.14",
   "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;
 }
@@ -1724,6 +1722,14 @@
 }
 
 /* ============ Stat tile ============ */
+/* MP-141: kit-wide truncation rule for Stat (and every future text class here) —
+ * explanatory/label copy (.fd-stat-sub, .fd-stat-label) always WRAPS, never
+ * ellipsizes: a client reading a narrow tile must never lose part of a sentence
+ * behind a "…" with no way to read the rest, and a tooltip is not a substitute
+ * for readable client-facing copy. Only a user-data identifier displayed in a
+ * dense row (a table cell, a chip) may ellipsize — and only when it also exposes
+ * its full text via `title`/tooltip. Decide this once, here, for every Stat
+ * consumer, not per screen. */
 .fd-stat {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -1740,16 +1746,23 @@
   min-width: 0;
 }
 .fd-stat-sub {
+  /* MP-141: this is explanatory copy ("on every funded campus, at minimum"),
+   * never a user-data identifier — per the kit's truncation rule (see this
+   * file's own header note above .fd-stat), explanatory/label copy always
+   * wraps instead of ellipsizing, so a client reading a narrow tile never
+   * loses part of the sentence behind a "…" with no way to read the rest. */
   display: block;
   margin-top: 4px;
   font-size: var(--body-sm-size);
   color: var(--text-2);
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 .fd-stat-label {
+  /* MP-141: same rule as .fd-stat-sub above — this is the tile's fixed
+   * caption, not a user-entered identifier, so it wraps rather than losing
+   * words to an ellipsis. */
   display: block;
   margin-top: 6px;
   font-size: var(--overline-size);
@@ -1757,9 +1770,8 @@
   text-transform: uppercase;
   font-weight: var(--w-bold);
   color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 .fd-stat-figure {
   flex: none;
@@ -2321,12 +2333,12 @@
 }
 
 /* ============ 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;
@@ -2456,8 +2468,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;
@@ -2469,7 +2480,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;
@@ -2483,12 +2493,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);
@@ -2626,11 +2633,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);
@@ -6426,45 +6433,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;
@@ -6519,13 +6487,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;