@flytedan/flytebot-design-system 0.12.8 → 0.12.10

package/package.json

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

package/styles/components.css

@@ -231,6 +231,41 @@
 .fd-btn-icon-solid:focus-visible {
   box-shadow: var(--focus-ring);
 }
+/* Soft: a lighter fill than solid, with a visibly darker border drawn around it (MP-52's
+   "lighter fill, darker border" row action). Same --btn-soft-* tokens (tokens.css), same
+   per-theme measurement discipline as solid, and the same pressed-selector-specificity
+   fix baked in from the start (see the comment on .fd-btn-icon-solid:active above). */
+.fd-btn-icon-soft {
+  background: var(--btn-soft-bg);
+  color: var(--btn-soft-ink);
+  border-color: var(--btn-soft-border);
+  box-shadow: var(--e-1);
+}
+.fd-btn-icon-soft.is-ok {
+  --btn-soft-bg: var(--btn-soft-ok-bg);
+  --btn-soft-border: var(--btn-soft-ok-border);
+  --btn-soft-ink: var(--btn-soft-ok-ink);
+}
+.fd-btn-icon-soft.is-danger {
+  --btn-soft-bg: var(--btn-soft-danger-bg);
+  --btn-soft-border: var(--btn-soft-danger-border);
+  --btn-soft-ink: var(--btn-soft-danger-ink);
+}
+.fd-btn-icon-soft:hover,
+.fd-btn-icon-soft.is-ok:hover,
+.fd-btn-icon-soft.is-danger:hover {
+  filter: brightness(1.08);
+  color: var(--btn-soft-ink);
+}
+.fd-btn-icon-soft:active,
+.fd-btn-icon-soft.is-ok:active,
+.fd-btn-icon-soft.is-danger:active {
+  filter: brightness(0.92);
+  box-shadow: none;
+}
+.fd-btn-icon-soft:focus-visible {
+  box-shadow: var(--focus-ring);
+}
 .fd-btn-icon-sm {
   width: var(--control-h-sm);
   height: var(--control-h-sm);
@@ -4054,6 +4089,13 @@
    itself uses (--r-md here rather than Card's --r-lg — a compact list row reads
    better with the tighter radius; --e-1/--e-2 are the same elevation tokens). */
 .fd-erow {
+  /* display/align-items/gap live here, not on the component's inline style (where
+     they used to be, MP-114 follow-up) — an inline style always wins over a
+     stylesheet rule, which would make it impossible for the narrow-container rule
+     below to ever switch this row from a flex row to a grid. */
+  display: flex;
+  align-items: center;
+  gap: 10px;
   background: var(--surface-2);
   border: 1px solid var(--erow-border);
   border-radius: var(--r-md);
@@ -4126,6 +4168,43 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* The title-icon Tooltip trigger (MP-52): icon and title share one hoverable/focusable
+   region rather than two, so hovering either opens the same explanation. Carries the same
+   flex floor .fd-erow-title has on its own (see the comment above it) so wrapping the
+   title in a button never changes how the titleline shares space with `meta`. Reset to a
+   plain inline button — no border/background/font change — because visually this must
+   read exactly like a title with an icon in front of it, not a control. */
+.fd-erow-title-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1 1 auto;
+  min-width: 45%;
+  border: 0;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.fd-erow-title-icon .fd-erow-title {
+  min-width: 0;
+}
+.fd-erow-title-icon > .ph {
+  flex: none;
+  font-size: 14px;
+  color: var(--text-muted);
+}
+.fd-erow-title-icon.is-danger > .ph {
+  color: var(--danger-solid);
+}
+.fd-erow-title-icon:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--r-sm);
+}
 .fd-erow-strip {
   display: flex;
   align-items: center;
@@ -4267,22 +4346,96 @@ 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. */
+  /* MP-114 (second follow-up). The first follow-up kept every `.fd-erow-cell` at its
+     exact fixed `--erow-metric-w` down here (never `width: auto` — see the alignment
+     argument in EntityRowMetrics/.fd-erow-metrics's own comments above, which this
+     still honours) and let `.fd-erow-metrics` scroll instead of clip when the strip ran
+     out of room. That satisfied the alignment contract, but media-planner's
+     audience-list-affordances.spec.ts (375px, touch) caught what it traded away: a
+     scrollable strip still HIDES figures behind a scroll a touch user has no reason to
+     discover, which the spec's `stripClipsNothing` check treats as no better than
+     clipping — at phone width every figure has to be actually, fully visible.
+
+     The real room was never in the strip itself — it was in the REST of the row.
+     EntityRow is `title (+ titleIcon/meta)` above `metrics (+ accessory)` beside
+     `action`, with a drag grip down the side: at desktop width that two-line-plus-rail
+     shape is what lets metrics and a school's name and its preference-meter accessory
+     and its +/- action all fit on a compact row. At a stacked phone pane that shape is
+     the problem — cramming metrics onto the SAME line as an accessory (media-planner's
+     TransferList rows carry a ScoreMeter accessory) leaves the strip a fraction of the
+     row's own width even though the row has plenty of width overall.
+
+     So below this width the row becomes a two-row GRID instead: name (+ its icon/meta)
+     with the accessory and the +/- action all on row one, and the metric strip ALONE
+     spanning the full row width on row two — the same width `.fd-tlist-footer`'s totals
+     line gets (see below), which is what keeps the two aligned. `.fd-erow-body` and
+     `.fd-erow-strip` contribute no box of their own any more here (`display: contents`
+     unwraps them, MDN's own documented way to let a grid reach through a wrapper
+     without changing the component's DOM/JSX) — every element that actually needs a
+     grid position (title line, grip, accessory, metrics, action) becomes a direct
+     grid child by that unwrapping alone. `grid-template-areas` uses one row with no
+     "strip" cell in it for a plain row that has neither metrics nor an accessory (an
+     unfilled `auto` grid row is 0-height), so a name-only row still stays one line
+     tall exactly as `.fd-erow-body`'s own base-rule comment describes.
+
+     Even spanning the full row, three columns this wide (media-planner: 96/82/92px)
+     can still be tight once the row also loses width to its drag grip and a 44px
+     touch-target action button — so `--erow-metric-w` itself also shrinks by a flat,
+     modest 15% here, identically for a row's own cells and the totals footer's (both
+     read the SAME custom property, so both shrink the same and stay aligned). 15% is a
+     deliberate buffer, not a measured minimum: it keeps real figures (media-planner's
+     own test data reaches "958,000") comfortably clear of `.fd-erow-metric-value`'s
+     own `text-overflow: ellipsis` floor rather than sizing to the exact edge of it. */
+  .fd-erow {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      "grip title accessory action"
+      "strip strip strip strip";
+    gap: 4px 10px;
+  }
+  .fd-erow-body,
+  .fd-erow-strip {
+    display: contents;
+  }
+  .fd-erow-grip {
+    grid-area: grip;
+  }
+  .fd-erow-titleline {
+    grid-area: title;
+  }
+  .fd-erow-accessory {
+    grid-area: accessory;
+  }
+  .fd-erow-action {
+    grid-area: action;
+  }
   .fd-erow-cell {
-    width: auto;
+    flex-shrink: 0;
+    width: calc(var(--erow-metric-w) * 0.85);
   }
   .fd-erow-metrics {
+    /* Row context (.fd-erow is the grid above): claims the whole second grid row.
+       Footer context (.fd-tlist-footer is a plain flex row, see below): `grid-area`
+       is a no-op there since its parent isn't a grid, and `flex: 1 1 100%` is what
+       does the equivalent job — combined with that flex row's own `flex-wrap: wrap`,
+       claiming the full line pushes the "Totals · N schools" caption after it onto
+       a second line, the same shape the row now has. Only one of the two rules ever
+       actually applies in a given parent, so both can live on this one selector. */
+    grid-area: strip;
+    flex: 1 1 100%;
+    /* Belt-and-suspenders, not the primary mechanism any more: if some OTHER
+       consumer's columns still don't fit even the whole row's width after the 15%
+       reduction above, this scrolls that overflow rather than clipping it (the same
+       "wide content gets its own scroll container" rule DataTable's `.fd-table-wrap`
+       follows, and the layout auditor already treats an `overflow: auto` ancestor as
+       fine by design) — never reached by media-planner's own audience columns, which
+       the full-width row and the 15% reduction together already fit. */
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .fd-tlist-footer {
     flex-wrap: wrap;
-    overflow: visible;
   }
 }
 .fd-tlist-side {

package/styles/tokens.css

@@ -100,6 +100,20 @@
   --btn-solid-ok-bg:#1E7A4C;--btn-solid-ok-bg-hover:#18663F;--btn-solid-ok-bg-active:#145A38;--btn-solid-ok-ink:#FFFFFF;
   --btn-solid-danger-bg:#B93A31;--btn-solid-danger-bg-hover:#9E2F27;--btn-solid-danger-bg-active:#862720;--btn-solid-danger-ink:#FFFFFF;
 
+  /* Soft icon button (IconButton variant="soft") — MP-52's "lighter fill, darker border"
+     row action. A lighter, less saturated fill than --btn-solid-* with a visibly darker
+     border drawn around it, so the button still reads as a button rather than a solid
+     colour chip. Measured exactly like --btn-solid-* above, against the same two grounds
+     (--surface-2 #F7F8FA and --erow-danger-fill #FCE9E6): white ink on the fill is 4.53:1
+     or better and the fill itself is 3.87:1 or better against either ground. Going any
+     lighter breaks one of those two floors — a fill light enough to read as "soft" in the
+     usual badge sense (e.g. --ok-fill/--danger-fill) is only ~1.05:1 from --erow-danger-fill
+     and fails outright; this is the lightest fill that still clears the bar next to a red
+     row. The border reuses the darker --btn-solid-*-bg-active token, 1.8-2:1 off the new
+     fill and 7:1+ off both grounds, so it reads even where hue alone would not. */
+  --btn-soft-ok-bg:#557F6A;--btn-soft-ok-border:#145A38;--btn-soft-ok-ink:#FFFFFF;
+  --btn-soft-danger-bg:#C84E43;--btn-soft-danger-border:#862720;--btn-soft-danger-ink:#FFFFFF;
+
   --ok-fill:#DFF3E8;--ok-border:#A8DDC2;--ok-text:#0E5233;--ok-solid:#34A26B;--ok-emph:#57C68C;
   --warn-fill:#FDF1DA;--warn-border:#F0D49A;--warn-text:#6B4A05;--warn-solid:#C8890B;
   --danger-fill:#FCE7E5;--danger-border:#F2BDB8;--danger-text:#7A241D;--danger-solid:#D0473D;
@@ -256,6 +270,19 @@
   --btn-solid-ok-bg:#3FB37A;--btn-solid-ok-bg-hover:#57C68C;--btn-solid-ok-bg-active:#35A26D;--btn-solid-ok-ink:#0B2A1B;
   --btn-solid-danger-bg:#E8776D;--btn-solid-danger-bg-hover:#F08A80;--btn-solid-danger-bg-active:#D9685E;--btn-solid-danger-ink:#2A0B08;
 
+  /* Soft icon button — see the :root block above. On dark ground the direction flips the
+     same way --btn-solid-* already does: a lighter fill cannot separate from a near-black
+     card by luminance, so the soft fill goes DARKER and saturated (not lighter, the way
+     light theme reads "lighter") with a light ink and a lighter border drawn around it —
+     the same "still a button, one step down from --btn-solid-*" relationship, expressed in
+     whichever direction actually clears the floor on this ground. Measured against
+     --surface-2 (#1B1F27) and --erow-danger-fill (#331813): white ink is 5.4:1 or better,
+     the fill is 3.0:1 or better against either ground, and the border (the theme's own
+     --btn-solid-*-bg, already proven legible here) is 1.9:1+ off the fill and 5.7:1+ off
+     both grounds. */
+  --btn-soft-ok-bg:#007A3D;--btn-soft-ok-border:#3FB37A;--btn-soft-ok-ink:#FFFFFF;
+  --btn-soft-danger-bg:#D41200;--btn-soft-danger-border:#E8776D;--btn-soft-danger-ink:#FFFFFF;
+
   /* chat kit — see the :root block above */
   --chat-code-bg:#12151B;
   --code-kw:#B3A6F0;--code-str:#E9C377;--code-num:#EFA8BE;--code-com:#6C7686;