@flytedan/flytebot-design-system 0.59.0 → 0.60.0

package/package.json

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

package/styles/components.css

@@ -950,6 +950,53 @@
   font-weight: var(--w-medium);
 }
 
+/* ============ FactList ============ */
+/* The columns follow the list's own width (a container query), so a narrow card on a wide screen
+   is one column too: 1 below 480px, then 2, 3 and 4 from 480, 720 and 960. */
+.fd-facts {
+  container-type: inline-size;
+  width: 100%;
+}
+.fd-facts-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 14px 24px;
+  margin: 0;
+}
+@container (min-width: 480px) {
+  .fd-facts-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@container (min-width: 720px) {
+  .fd-facts-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@container (min-width: 960px) {
+  .fd-facts-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+.fd-fact {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.fd-fact-label {
+  font-size: var(--body-sm-size);
+  color: var(--text-2);
+  font-weight: var(--w-medium);
+}
+.fd-fact-value {
+  margin: 0;
+  font-size: var(--body-size);
+  color: var(--text);
+  font-weight: var(--w-medium);
+  overflow-wrap: anywhere;
+}
+
 /* ============ Collapsible ============ */
 .fd-coll {
   border: 1px solid var(--border);
@@ -2084,6 +2131,9 @@
 .fd-table tbody tr:hover {
   background: var(--surface-brand);
 }
+.fd-table tbody tr[data-clickable] {
+  cursor: pointer;
+}
 .fd-table tbody tr[aria-selected="true"] {
   background: var(--surface-brand);
   box-shadow: inset 2px 0 0 var(--brand);
@@ -2094,6 +2144,116 @@
 .fd-table tbody tr:last-child td {
   border-bottom: 0;
 }
+/* Stacked mode (DataTable at 640px wide or less): the rows are compact cards in the same surface as the table.
+   A card is a title line (primary columns; the first one ellipsizes, the rest keep their size, so a
+   status stays beside a long name) and a muted meta line of labelled secondary values, two lines at most. */
+.fd-table-wrap-stacked {
+  overflow: visible;
+}
+.fd-dt-sort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+  border-radius: var(--r-lg) var(--r-lg) 0 0;
+}
+.fd-dt-sort::before {
+  content: "Sort";
+  margin-right: 4px;
+  font-size: var(--overline-size);
+  letter-spacing: var(--overline-track);
+  text-transform: uppercase;
+  font-weight: var(--w-bold);
+  color: var(--text-muted);
+}
+.fd-dt-sort button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-full);
+  background: var(--surface);
+  color: var(--text-2);
+  font: inherit;
+  font-size: var(--label-size);
+  font-weight: var(--w-semibold);
+  cursor: pointer;
+}
+.fd-dt-sort button[aria-pressed="true"] {
+  border-color: var(--brand);
+  color: var(--text);
+}
+.fd-dt-sort .fd-caret {
+  color: var(--brand);
+  font-size: 9px;
+}
+.fd-dt-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  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 {
+  border-bottom: 0;
+}
+.fd-dt-card[data-clickable] {
+  cursor: pointer;
+}
+.fd-dt-card[data-clickable]:hover,
+.fd-dt-card[data-selected="true"] {
+  background: var(--surface-brand);
+}
+.fd-dt-card[data-selected="true"] {
+  box-shadow: inset 2px 0 0 var(--brand);
+}
+.fd-dt-card-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  font-size: var(--body-size);
+  font-weight: var(--w-semibold);
+  color: var(--text);
+}
+.fd-dt-card-title > span {
+  flex: none;
+}
+.fd-dt-card-title > span:first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fd-dt-card-meta {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: var(--body-sm-size);
+  color: var(--text-2);
+}
+.fd-dt-card-meta > span + span::before {
+  content: "·";
+  margin: 0 6px;
+}
+.fd-dt-card-label {
+  color: var(--text-muted);
+}
+.fd-dt-card .is-num {
+  font-variant-numeric: tabular-nums lining-nums;
+}
 .fd-table-trunc {
   display: block;
   max-width: 100%;
@@ -2104,12 +2264,27 @@
 
 /* ============ Tabs ============ */
 .fd-tabs {
+  --fd-tabs-fade-start: 0px;
+  --fd-tabs-fade-end: 0px;
   display: flex;
   gap: 4px;
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
   scrollbar-width: none;
 }
+/* Tabs that do not fit scroll sideways; the edge that has more fades out (Tabs sets the data
+   attributes from the scroll position). The fade is a mask, so it is the same in either theme. */
+.fd-tabs[data-more-start="true"] {
+  --fd-tabs-fade-start: 32px;
+}
+.fd-tabs[data-more-end="true"] {
+  --fd-tabs-fade-end: 32px;
+}
+.fd-tabs[data-more-start="true"],
+.fd-tabs[data-more-end="true"] {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fd-tabs-fade-start), #000 calc(100% - var(--fd-tabs-fade-end)), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 var(--fd-tabs-fade-start), #000 calc(100% - var(--fd-tabs-fade-end)), transparent);
+}
 .fd-tabs::-webkit-scrollbar {
   display: none;
 }