@flytedan/flytebot-design-system 0.67.4 → 0.68.0

package/package.json

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

package/styles/components.css

@@ -2230,28 +2230,51 @@
   color: var(--brand);
   font-size: 9px;
 }
-.fd-dt-card {
+/* A card and, when the row has an action of its own, that action beside it: siblings, so the action is
+   never inside the card's button. The item carries the hairline between rows. */
+.fd-dt-item {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
+  align-items: center;
   min-width: 0;
-  padding: 12px 14px;
   border-bottom: 1px solid var(--border);
   transition:
     background var(--dur-fast) var(--ease),
     box-shadow var(--dur-fast) var(--ease);
 }
-.fd-dt-card:last-child {
+.fd-dt-item:last-child {
   border-bottom: 0;
 }
+.fd-dt-item > .fd-dt-card {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+.fd-dt-action {
+  flex: none;
+  padding-right: 8px;
+}
+/* The table's form of a row action: the row's last cell, as narrow as its button. */
+.fd-table td.fd-table-action,
+.fd-table th.fd-table-action-head {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+}
+.fd-dt-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  padding: 12px 14px;
+}
 .fd-dt-card[data-clickable] {
   cursor: pointer;
 }
-.fd-dt-card[data-clickable]:hover,
-.fd-dt-card[data-selected="true"] {
+/* The item is tinted, not the card, so the strip under a row's action is tinted with it. */
+.fd-dt-item:has(> .fd-dt-card[data-clickable]):hover,
+.fd-dt-item:has(> .fd-dt-card[data-selected="true"]) {
   background: var(--surface-brand);
 }
-.fd-dt-card[data-selected="true"] {
+.fd-dt-item:has(> .fd-dt-card[data-selected="true"]) {
   box-shadow: inset 2px 0 0 var(--brand);
 }
 .fd-dt-card-title {