@flytedan/flytebot-design-system 0.48.0 → 0.48.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.48.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

@@ -859,6 +859,32 @@
   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
@@ -3430,6 +3456,21 @@
   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));