@flytedan/flytebot-design-system 0.47.0 → 0.48.1

package/package.json

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

package/styles/components.css

@@ -791,6 +791,13 @@
   border-radius: var(--r-lg);
   box-shadow: var(--e-1);
   overflow: hidden;
+  /* MP-271: column flex so a card stretched taller than its own content (CardGrid's
+     equal-height rows — a row's shorter cards stretch to match the tallest) still keeps its
+     footer pinned to the bottom rather than leaving a gap above it. flex-direction: column on
+     a `<div>`/`<a>`/`<button>` all behave identically, so this holds regardless of which
+     element Card renders as (see `interactive` in Card.tsx). */
+  display: flex;
+  flex-direction: column;
 }
 .fd-card-flat {
   box-shadow: none;
@@ -809,6 +816,75 @@
   border-color: var(--border-strong);
   transform: translateY(-1px);
 }
+/* MP-271: a real interactive card (Card rendered as <a> or <button> — `href`/`onClick`).
+   Reset the native element's own look (button chrome, link underline/colour) so it reads as
+   the same card either way, then add hover/press states that only ever touch box-shadow and
+   border-color — never `transform` or a size-affecting property — so nothing jumps or
+   reflows on press (MP-271 AC). A `:focus-visible` rule of its own IS needed, restated after
+   `:hover`/`:active` below: without it, the global `button:focus-visible`/`a:focus-visible`
+   rule (styles/foundations.css, specificity 0,1,1) loses to `.fd-card-interactive:hover`
+   (0,2,0) whenever a card is both keyboard-focused and still under the pointer — a real,
+   reachable state (tab to a card, and the mouse that was already resting on it never moved)
+   — which would hide the focus ring entirely. Same fix Button.tsx's own `:focus-visible`
+   rule already uses for the identical reason (see components.css's own comment on
+   `.fd-btn-icon-solid:focus-visible`). */
+.fd-card-interactive {
+  display: block;
+  width: 100%;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  font: inherit;
+  cursor: pointer;
+  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
+}
+.fd-card-interactive:hover {
+  box-shadow: var(--e-2);
+  border-color: var(--border-strong);
+}
+.fd-card-interactive:active {
+  box-shadow: var(--e-1);
+  border-color: var(--border-strong);
+}
+.fd-card-interactive:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* MP-271: the draft/placeholder variant — dashed instead of solid, using the same
+   `--border-strong` token an emphatic-but-still-neutral border already uses elsewhere
+   (Card's own `:hover` above), so light, dark and `[data-contrast="high"]` (tokens/
+   appearance.css: high contrast promotes `--border` to `--border-strong` itself) all
+   resolve a correct, themed dash with no new colour token. */
+.fd-card-draft {
+  border-style: dashed;
+  border-color: var(--border-strong);
+  box-shadow: none;
+}
+/* MP-271 review (comment 2920, finding 3): an interactive Card (href/onClick) can no longer
+   render `action`/`footer` INSIDE the `<a>`/`<button>` — that was the only way this component
+   could ever produce a real `<button>` (or a link) nested inside a real `<a>`, which is invalid
+   HTML5 and double-fires clicks. `.fd-card-shell` is the plain, non-interactive wrapper Card
+   renders around the `<a>`/`<button>` only when it's interactive; `action` and `footer` become
+   its ordinary siblings, never its descendants, so nesting is impossible regardless of what a
+   caller puts in either slot. `footer` needs nothing extra (it was already the last thing
+   painted, so a sibling after the `<a>` lands in the exact same visual spot); `action` sits
+   inside the header row visually, so it's positioned back into that corner over the `<a>`,
+   given a higher stacking order so it stays independently clickable/focusable (the "stretched
+   link" technique's own z-index rule, applied to a real sibling instead of a pseudo-element). */
+.fd-card-shell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.fd-card-shell > .fd-card-interactive {
+  flex: 1 1 auto;
+}
+.fd-card-shell-action {
+  position: absolute;
+  top: 16px;
+  right: 18px;
+  z-index: 1;
+}
 /* The header degrades in two steps as the action slot needs more room than is left:
    first the title gives up ITS OWN spare width (ordinary flex-shrink) down to
    fd-card-head-title's min-width; once even that doesn't leave enough room for the
@@ -839,6 +915,9 @@
 }
 .fd-card-body {
   padding: 18px;
+  /* MP-271: lets the body absorb any extra height CardGrid's equal-height stretch adds,
+     keeping `fd-card-foot` pinned to the bottom instead of leaving a gap above it. */
+  flex: 1 1 auto;
 }
 .fd-card-foot {
   display: flex;
@@ -3360,6 +3439,38 @@
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
   gap: 16px;
 }
+/* MP-271 — CardGrid (src/components/layout/CardGrid.tsx). `auto-fill` rather than
+   `fd-grid-stats`'s own `auto-fit` above on purpose: a dashboard of Cards should keep a
+   consistent card width as the count changes, not stretch a lone card to fill the whole row
+   the way a handful of stat tiles usefully do. `--card-grid-min` is set inline per instance
+   (CardGrid's `minCardWidth` prop, default 280px); `1fr` is what lets the last, partial row's
+   cards still share the leftover width evenly rather than sitting at a fixed size with a gap
+   down one side. Gap is deliberately NOT set here — CardGrid applies one of the existing
+   `fd-gap-*` utility classes above alongside this one, so a "medium gap" stays one token
+   shared with every other flex/grid consumer of the spacing scale, not a second grid-only
+   value. Equal-height rows need no explicit rule: `align-items: stretch` is Grid's own
+   default, restated below only so it can't silently regress if that default is ever
+   overridden elsewhere for `.fd-card-grid`'s selector specifically. */
+.fd-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min, 280px), 1fr));
+  align-items: stretch;
+}
+/* MP-271 review (comment 2920, finding 2): CardGrid wraps every item in its own
+   `<div role="listitem">` rather than cloning `role` onto the child (a clone silently drops
+   an added prop on a Fragment child, and can't fix that). The wrapper is now the real grid
+   item that `align-items: stretch` above stretches to the row's height, so it has to pass
+   that height on to its own one real child the same way `.fd-card-body`'s `flex: 1 1 auto`
+   passes extra height down to `.fd-card-foot` — otherwise a stretched wrapper with an
+   un-stretched child inside it would look identical to no equal-height rows at all. */
+.fd-card-grid > [role="listitem"] {
+  display: flex;
+  min-width: 0;
+}
+.fd-card-grid > [role="listitem"] > * {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 @media (max-width: 640px) {
   .fd-grid-stats {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));