@flytedan/flytebot-design-system 0.12.10 → 0.12.11

package/package.json

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

package/styles/components.css

@@ -176,13 +176,23 @@
   background: var(--surface);
   box-shadow: var(--e-1);
 }
-/* Tone on a quiet (ghost/outline) icon button: the glyph carries it, on hover too. */
-.fd-btn-icon.is-ok:not(.fd-btn-icon-solid),
-.fd-btn-icon.is-ok:not(.fd-btn-icon-solid):hover {
+/* Tone on a quiet (ghost/outline) icon button: the glyph carries it, on hover too.
+   MP-114 follow-up: also excludes .fd-btn-icon-soft, which was never meant to match
+   here (it isn't ghost or outline — it has its own real fill, see .fd-btn-icon-soft
+   below) but did, at (0,3,0) beating the soft rule's own un-toned (0,1,0)/toned
+   (0,2,0) color rules at rest. That stomped --btn-soft-ok-ink/--btn-soft-danger-ink
+   (chosen to clear 4.5:1 against the soft fill) with --ok-text/--danger-text (chosen
+   to clear 4.5:1 against a plain card instead) — a real fill behind the wrong ink,
+   e2e-measured at 2.04:1. The soft rule's own `:hover`/`:active` restatements already
+   won their own specificity fight against this same rule's `:hover` (both (0,3,0),
+   soft declared later so it wins the tie) — only the REST state, where soft never
+   restated color at all, actually lost. */
+.fd-btn-icon.is-ok:not(.fd-btn-icon-solid):not(.fd-btn-icon-soft),
+.fd-btn-icon.is-ok:not(.fd-btn-icon-solid):not(.fd-btn-icon-soft):hover {
   color: var(--ok-text);
 }
-.fd-btn-icon.is-danger:not(.fd-btn-icon-solid),
-.fd-btn-icon.is-danger:not(.fd-btn-icon-solid):hover {
+.fd-btn-icon.is-danger:not(.fd-btn-icon-solid):not(.fd-btn-icon-soft),
+.fd-btn-icon.is-danger:not(.fd-btn-icon-solid):not(.fd-btn-icon-soft):hover {
   color: var(--danger-text);
 }
 /* Solid: a real fill in the tone's colour. The fills and inks are the --btn-solid-*
@@ -4089,15 +4099,20 @@
    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
+  /* display/align-items/gap/padding live here, not on the component's inline style
+     (where they used to be, MP-114 follow-ups) — 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. */
+     below to ever switch this row from a flex row to a grid. gap/padding/border-width
+     read the shared --erow-* custom properties (declared once on .fd-tlist above)
+     rather than carrying their own literals, which is also what lets
+     .fd-tlist-footer's indent stay correct by construction instead of by two
+     numbers happening to agree. */
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--erow-gap);
+  padding: 0 var(--erow-pad-x);
   background: var(--surface-2);
-  border: 1px solid var(--erow-border);
+  border: var(--erow-border-w) solid var(--erow-border);
   border-radius: var(--r-md);
   box-shadow: var(--e-1);
   transition:
@@ -4306,6 +4321,12 @@ button.fd-erow-metric:focus-visible {
   display: inline-flex;
   align-items: center;
 }
+/* Size lives here, not on the component's inline style (MP-114 third follow-up,
+   same reasoning as .fd-erow's own padding above): .fd-tlist-footer's indent reads
+   it back as --erow-grip-size. */
+.fd-erow-grip {
+  font-size: var(--erow-grip-size);
+}
 .fd-erow[draggable="true"]:active {
   cursor: grabbing;
 }
@@ -4335,12 +4356,68 @@ button.fd-erow-metric:focus-visible {
    screen's. */
 .fd-tlist {
   container-type: inline-size;
+  /* A row's own geometry, declared ONCE here rather than as literals wherever
+     something needs to line up with it (MP-114, third follow-up: the totals
+     footer's indent restated these as bare numbers in two places while the real
+     values lived as inline styles on EntityRow.tsx's row and its drag grip — a
+     change to either drifted the footer's indent silently, which is exactly what
+     the second follow-up's 24px misalignment was). `.fd-erow` and `.fd-erow-grip`
+     read these instead of carrying their own inline padding/font-size, and
+     `.fd-tlist-footer`'s two indents (below) are `calc()` of the same four
+     properties — a row and the totals line can only drift apart now if one of
+     THESE four values changes, and both readers change with it. Declared on
+     `.fd-tlist` (the one ancestor common to both a row and the footer, which are
+     otherwise unrelated siblings under `.fd-tlist-side`) rather than on `.fd-erow`
+     itself, so the footer — which is never a descendant of any `.fd-erow` — can
+     still read them by ordinary custom-property inheritance. */
+  --erow-border-w: 1px;
+  --erow-pad-x: 12px;
+  --erow-grip-size: 14px;
+  --erow-gap: 10px;
 }
 .fd-tlist-panes {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }
+/* TransferList's per-side slots. The footer is where a running totals line goes;
+   it sits on the panel, not on a card, and is separated by a rule rather than a
+   gap so it reads as a summary OF the list rather than another row IN it.
+   Declared here, BEFORE the narrow @container block below, deliberately: CSS
+   cascade order for two rules of equal specificity is source order regardless of
+   which one sits inside an at-rule, so a base rule declared AFTER a narrow
+   override for the same property would silently win at every width, override
+   included — this is what actually happened to this rule's own `padding-left`
+   for two follow-ups running (the override was textually correct and had a
+   passing stylesheet-contract test, but the base rule used to be declared further
+   down the file, after the @container block, and always won the tie). */
+.fd-tlist-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.fd-tlist-footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding-top: 8px;
+  /* Indented to the x a row's own body starts at, so a totals strip in here lands
+     under the columns it totals rather than a card's width to the left of them: the
+     card's border, the row's own padding, the drag grip and its gap — every row in
+     a TransferList is a drag source, so it is the same on all of them. Written as
+     calc() of the shared --erow-* custom properties (.fd-tlist's own comment)
+     rather than as separate literals that merely happened to equal the same
+     numbers EntityRow.tsx's row/grip carried inline — a change to any one of those
+     four properties now moves this indent with it instead of silently drifting out
+     of alignment, which is exactly how this went wrong at the narrow breakpoint
+     (see that rule's own comment). */
+  padding-left: calc(var(--erow-border-w) + var(--erow-pad-x) + var(--erow-grip-size) + var(--erow-gap));
+  border-top: 1px solid var(--border);
+  font-size: var(--overline-size);
+  color: var(--text-2);
+}
 @container (max-width: 600px) {
   .fd-tlist-panes {
     flex-direction: column;
@@ -4392,7 +4469,10 @@ button.fd-erow-metric:focus-visible {
     grid-template-areas:
       "grip title accessory action"
       "strip strip strip strip";
-    gap: 4px 10px;
+    /* Row-gap is a new number (there was no vertical gap to preserve — the old
+       layout never had two grid rows), but the column-gap is the same --erow-gap
+       the wide flex row uses, not a second literal 10px that could drift from it. */
+    gap: 4px var(--erow-gap);
   }
   .fd-erow-body,
   .fd-erow-strip {
@@ -4436,6 +4516,21 @@ button.fd-erow-metric:focus-visible {
   }
   .fd-tlist-footer {
     flex-wrap: wrap;
+    /* The wide-width padding-left (see the base rule's own comment) indents the
+       totals strip to where a row's metric strip used to start: AFTER the card border,
+       the row's own padding, the drag grip and its gap. Down here the row's strip no
+       longer starts there — it's `.fd-erow`'s own full-width second grid row (see
+       `.fd-erow`'s own comment above), which starts at the row's own left padding
+       edge, before the grip rather than after it. audience-builder.spec.ts caught the
+       mismatch this left behind: a row's strip and the totals strip 24px apart at the
+       SAME breakpoint that made the grid switch active in the first place (any
+       TransferList pane under 600px, which an ordinary 1280px desktop window reaches
+       easily — see that rule's own comment). The totals strip needs the SAME new
+       origin: just the card's border and the row's own padding, with the grip/gap
+       terms dropped since they no longer apply to either strip — both terms of the
+       SAME --erow-* properties (.fd-tlist's own comment) the base rule below uses,
+       not separately-guessed numbers, so the two can't drift apart again. */
+    padding-left: calc(var(--erow-border-w) + var(--erow-pad-x));
   }
 }
 .fd-tlist-side {
@@ -4484,32 +4579,6 @@ button.fd-erow-metric:focus-visible {
   box-shadow: var(--e-2);
   color: var(--brand);
 }
-/* TransferList's per-side slots. The footer is where a running totals line goes;
-   it sits on the panel, not on a card, and is separated by a rule rather than a
-   gap so it reads as a summary OF the list rather than another row IN it. */
-.fd-tlist-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.fd-tlist-footer {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  padding-top: 8px;
-  /* Indented to the x a row's own body starts at, so a totals strip in here lands
-     under the columns it totals rather than a card's width to the left of them.
-     The sum is the card's border and padding-left plus the drag grip and its gap
-     — every row in a TransferList is a drag source, so it is the same on all of
-     them. Spelled out rather than collapsed to 37px so it stays checkable against
-     .fd-erow if that padding ever moves. */
-  padding-left: calc(1px + 12px + 14px + 10px);
-  border-top: 1px solid var(--border);
-  font-size: var(--overline-size);
-  color: var(--text-2);
-}
 
 /* --- ScoreMeter — a small categorical 0-100 bar, optionally a trigger ------ */
 .fd-scoremeter {