@flytedan/flytebot-design-system 0.26.0 → 0.27.0

package/package.json

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

package/styles/components.css

@@ -3167,21 +3167,25 @@
 /* Layout utility modifiers for .fd-stack/.fd-row (SMS-7 Q1): the gap/wrap/
  * align/min-width/flex values every consumer app was reaching for inline —
  * pulled out here once so no app hand-rolls `style={{ gap, flexWrap,
- * alignItems, ... }}` again. Gap sizes match the kit's existing spacing
- * scale's smaller steps (8/12/16/20px); min-width sizes are named, not
+ * alignItems, ... }}` again. Gap sizes are the spacing scale's own sm/md/lg/xl
+ * steps (tokens/space.css) — each class name is that token's tier, so
+ * `fd-gap-md` is always `var(--s-md)`, never a value only that class knows
+ * about. There is no bare `fd-gap-xs`: the scale's xs step (4px) hasn't had a
+ * consumer yet, so it isn't exposed as an unused utility (add it, at
+ * `var(--s-xs)`, the day something needs it). min-width sizes are named, not
  * arbitrary, so a consumer picks "sm"/"md" rather than inventing a pixel
  * value. */
-.fd-gap-xs {
-  gap: 8px;
-}
 .fd-gap-sm {
-  gap: 12px;
+  gap: var(--s-sm);
 }
 .fd-gap-md {
-  gap: 16px;
+  gap: var(--s-md);
 }
 .fd-gap-lg {
-  gap: 20px;
+  gap: var(--s-lg);
+}
+.fd-gap-xl {
+  gap: var(--s-xl);
 }
 .fd-wrap {
   flex-wrap: wrap;
@@ -3212,11 +3216,14 @@
   height: 100vh;
 }
 /* An actions row above a page's main content, right-aligned — e.g. a single
- * secondary action sitting above an EmptyState. */
+ * secondary action sitting above an EmptyState. Pure alignment only: a screen
+ * that also needs padding around the row applies it itself (a spacing token
+ * inline, e.g. `padding: var(--s-lg) var(--s-lg) 0`), since that padding is
+ * that screen's own layout choice, not something every consumer of this
+ * class wants baked in. */
 .fd-toolbar-end {
   display: flex;
   justify-content: flex-end;
-  padding: 16px 16px 0;
 }
 .fd-grid-stats {
   display: grid;