@flytedan/flytebot-design-system 0.12.12 → 0.12.13

package/package.json

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

package/styles/components.css

@@ -1724,6 +1724,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 +1748,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 +1772,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;