@flytedan/flytebot-design-system 0.10.0 → 0.11.0

package/package.json

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

package/styles/components.css

@@ -176,6 +176,56 @@
   background: var(--surface);
   box-shadow: var(--e-1);
 }
+/* Tone on a quiet (ghost/outline) icon button: the glyph carries it, on hover too. */
+.fd-btn-icon.is-ok:not(.fd-btn-icon-solid),
+.fd-btn-icon.is-ok:not(.fd-btn-icon-solid):hover {
+  color: var(--ok-text);
+}
+.fd-btn-icon.is-danger:not(.fd-btn-icon-solid),
+.fd-btn-icon.is-danger:not(.fd-btn-icon-solid):hover {
+  color: var(--danger-text);
+}
+/* Solid: a real fill in the tone's colour. The fills and inks are the --btn-solid-*
+   tokens (tokens.css), struck per theme so the glyph clears 4.5:1 on the fill and the
+   fill clears 3:1 against both a default and a danger-toned EntityRow card, at rest,
+   hovered and pressed. The tone classes only swap which token set is in play. */
+.fd-btn-icon-solid {
+  --btn-solid-bg: var(--btn-solid-neutral-bg);
+  --btn-solid-bg-hover: var(--btn-solid-neutral-bg-hover);
+  --btn-solid-bg-active: var(--btn-solid-neutral-bg-active);
+  --btn-solid-ink: var(--btn-solid-neutral-ink);
+  background: var(--btn-solid-bg);
+  color: var(--btn-solid-ink);
+  border-color: transparent;
+  box-shadow: var(--e-1);
+}
+.fd-btn-icon-solid.is-ok {
+  --btn-solid-bg: var(--btn-solid-ok-bg);
+  --btn-solid-bg-hover: var(--btn-solid-ok-bg-hover);
+  --btn-solid-bg-active: var(--btn-solid-ok-bg-active);
+  --btn-solid-ink: var(--btn-solid-ok-ink);
+}
+.fd-btn-icon-solid.is-danger {
+  --btn-solid-bg: var(--btn-solid-danger-bg);
+  --btn-solid-bg-hover: var(--btn-solid-danger-bg-hover);
+  --btn-solid-bg-active: var(--btn-solid-danger-bg-active);
+  --btn-solid-ink: var(--btn-solid-danger-ink);
+}
+.fd-btn-icon-solid:hover,
+.fd-btn-icon-solid.is-ok:hover,
+.fd-btn-icon-solid.is-danger:hover {
+  background: var(--btn-solid-bg-hover);
+  color: var(--btn-solid-ink);
+}
+.fd-btn-icon-solid:active {
+  background: var(--btn-solid-bg-active);
+  box-shadow: none;
+}
+/* foundations.css gives every button:focus-visible the focus ring; restated after
+   :active so pressing a focused solid button cannot reset the ring away. */
+.fd-btn-icon-solid:focus-visible {
+  box-shadow: var(--focus-ring);
+}
 .fd-btn-icon-sm {
   width: var(--control-h-sm);
   height: var(--control-h-sm);
@@ -2261,19 +2311,32 @@
   flex-direction: column;
   animation: fd-drawer-in var(--dur-panel) var(--ease-out) both;
 }
+/* Tooltip's trigger wrapper. It takes no room of its own: it hugs its one child. */
+.fd-tooltip-anchor {
+  display: inline-flex;
+  flex: none;
+  min-width: 0;
+}
+/* Portaled to document.body and placed by Tooltip.tsx (fixed, anchored geometry), so no
+   overflow: hidden ancestor of the trigger can clip it. It sits above popovers (140) so a
+   tip on something inside a popover is still visible. Short labels stay on one line
+   (max-content); a sentence wraps at a readable measure instead of running off-screen. */
 .fd-tooltip {
-  position: absolute;
-  z-index: 100;
+  position: fixed;
+  z-index: 150;
+  width: max-content;
+  max-width: min(280px, calc(100vw - 16px));
   background: var(--n-900);
   color: #fff;
   font-size: var(--body-sm-size);
   font-weight: var(--w-medium);
+  line-height: 1.4;
   padding: 7px 10px;
   border-radius: var(--r-sm);
   box-shadow: var(--e-2);
-  white-space: nowrap;
+  white-space: normal;
+  text-wrap: pretty;
   animation: fd-pop var(--dur-fast) var(--ease-out) both;
-  pointer-events: none;
 }
 .fd-toast {
   display: flex;
@@ -2409,32 +2472,75 @@
   box-shadow: var(--e-3);
   animation: fd-pop-in 160ms var(--ease-out) both;
   transform-origin: top center;
-  /* max-height (set inline by Popover.tsx) sizes to content by default, capped only
-     at the real available room to the viewport edge — so this is a last-resort
-     scroller for that legitimate viewport-collision case, not a content clipper.
-     overflow-x stays hidden so children never poke past the rounded corners. */
+  /* THE SURFACE NEVER SCROLLS. max-height (set inline by Popover.tsx) caps it at the
+     real room between the anchor and the viewport edge; what does not fit is scrolled
+     inside .fd-pop-body, never by the surface itself — a surface that scrolls as a whole
+     carries its footer action below the fold and stacks a second scrollbar on any list
+     inside it. overflow: hidden also keeps children inside the rounded corners. */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+/* Pinned regions. flex: none so the body is the only thing that gives up height. */
+.fd-pop-header,
+.fd-pop-footer {
+  flex: none;
+  padding: var(--s-12) var(--s-16);
+}
+.fd-pop-header {
+  border-bottom: 1px solid var(--border);
+}
+.fd-pop-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--s-8);
+  border-top: 1px solid var(--border);
+}
+/* The one scroll region. min-height: 0 is what lets it shrink below its content inside
+   the capped surface instead of pushing the footer out. It is itself a flex column so
+   that a child owning a scroll region of its own (a Menu frame, a Select listbox) can
+   take min-height: 0 too and shrink into the body — the child scrolls, the body does
+   not, and there is still exactly one scrollbar. */
+.fd-pop-body {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
 }
+/* Ordinary content never shrinks inside the body — it overflows it, and the body scrolls.
+   (Without this, any child with overflow set would be squeezed and clipped instead.)
+   Only a region that scrolls itself opts back in: .fd-pop-list and .fd-menu-frame, both
+   declared later in this file. */
+.fd-pop-body > * {
+  flex-shrink: 0;
+}
 .fd-pop.is-up {
   top: auto;
   bottom: calc(100% + 6px);
   transform-origin: bottom center;
 }
+/* A list that scrolls inside a popover body. No max-height of its own: the surface is
+   already capped by the viewport (and by Popover's maxHeight when a caller wants it
+   shorter), and a second fixed cap here is exactly what used to put a scrollbar inside
+   a scrollbar. */
 .fd-pop-list {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
-  max-height: 320px;
+  overscroll-behavior: contain;
   padding: 5px;
 }
+/* A popover's search row. It sits in the popover header, which owns the padding and the
+   hairline below it. */
 .fd-pop-search {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 9px 12px;
-  border-bottom: 1px solid var(--border);
-  flex: none;
 }
 .fd-pop-search input {
   border: none;
@@ -3969,6 +4075,42 @@
 .fd-erow-metric.is-danger > .ph {
   color: var(--danger-text);
 }
+/* A metric that carries a tooltip is a real button (focusable, tappable, and skipped by
+   TransferList's drag arming) that must still look exactly like its plain neighbours —
+   so the UA button chrome goes, and a dotted underline on the figure is the one hint
+   that there is more to read. */
+button.fd-erow-metric {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: var(--overline-size);
+  line-height: inherit;
+  text-align: left;
+  border-radius: var(--r-xs);
+  cursor: help;
+}
+/* The strip clips its overflow (see .fd-erow-metrics), which would shear off the
+   standard outset focus ring — so this one ring is drawn inside the cell. */
+button.fd-erow-metric:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--blue-500);
+}
+.fd-erow-metric.is-described .fd-erow-metric-value {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--text-muted);
+  text-underline-offset: 2px;
+}
+/* The row's action is a real 44px target wherever a finger is the pointer or the screen
+   is narrow. The default card is 64px tall, so it fits without growing the row. */
+@media (pointer: coarse), (max-width: 768px) {
+  .fd-erow-action.fd-btn-icon-sm {
+    width: var(--control-h-md);
+    height: var(--control-h-md);
+    font-size: 18px;
+  }
+}
 .fd-erow-accessory {
   margin-left: auto;
   flex: none;
@@ -4533,6 +4675,17 @@
 .fd-menu {
   outline: none;
 }
+/* A Menu is one shrinkable frame: header and footer pinned, items scrolling between. */
+.fd-menu-frame {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.fd-menu-header,
+.fd-menu-footer {
+  flex: none;
+}
 .fd-menu-item {
   align-items: center;
 }
@@ -5791,10 +5944,6 @@
   color: var(--chat-text);
   font-weight: var(--w-semibold);
 }
-.fdc-usage-foot {
-  border-top: 1px solid var(--border);
-  padding-top: 10px;
-}
 .fdc-usage-clear {
   display: inline-flex;
   align-items: center;

package/styles/tokens.css

@@ -90,6 +90,16 @@
   --erow-danger-border:#EFB7B1;
   --erow-danger-text:#7A241D;
 
+  /* Solid icon button (IconButton variant="solid") — the filled action, e.g. the add /
+     remove button on every EntityRow. Per tone: rest, hover (darker), pressed (darker
+     still) and the glyph ink. Measured, not eyeballed, in every state: white ink on the
+     fill is 5.02:1 or better (the weakest is neutral at rest), and the fill is 4.29:1 or
+     better against each ground it sits on — --surface-2 (#F7F8FA), --erow-danger-fill
+     (#FCE9E6) and --surface — so the button reads as a button on a red row as well. */
+  --btn-solid-neutral-bg:#2272BA;--btn-solid-neutral-bg-hover:#1A5B96;--btn-solid-neutral-bg-active:#144674;--btn-solid-neutral-ink:#FFFFFF;
+  --btn-solid-ok-bg:#1E7A4C;--btn-solid-ok-bg-hover:#18663F;--btn-solid-ok-bg-active:#145A38;--btn-solid-ok-ink:#FFFFFF;
+  --btn-solid-danger-bg:#B93A31;--btn-solid-danger-bg-hover:#9E2F27;--btn-solid-danger-bg-active:#862720;--btn-solid-danger-ink:#FFFFFF;
+
   --ok-fill:#DFF3E8;--ok-border:#A8DDC2;--ok-text:#0E5233;--ok-solid:#34A26B;--ok-emph:#57C68C;
   --warn-fill:#FDF1DA;--warn-border:#F0D49A;--warn-text:#6B4A05;--warn-solid:#C8890B;
   --danger-fill:#FCE7E5;--danger-border:#F2BDB8;--danger-text:#7A241D;--danger-solid:#D0473D;
@@ -236,6 +246,16 @@
   --erow-danger-border:#7A342C;
   --erow-danger-text:#F0A79F;
 
+  /* Solid icon button — see the :root block above. On dark ground a dark fill cannot
+     separate from a near-black card, so the fills go LIGHT and the ink goes dark, and
+     hover steps lighter rather than darker, pressed a step darker. In every state the dark
+     ink on the fill is 4.80:1 or better (the weakest is ok pressed) and the fill is 4.76:1
+     or better against --surface-2 (#1B1F27), --erow-danger-fill (#331813) and --surface
+     (the weakest is danger pressed on a danger row). */
+  --btn-solid-neutral-bg:#6FA8E8;--btn-solid-neutral-bg-hover:#8FBEF0;--btn-solid-neutral-bg-active:#5A98DE;--btn-solid-neutral-ink:#0B1B2A;
+  --btn-solid-ok-bg:#3FB37A;--btn-solid-ok-bg-hover:#57C68C;--btn-solid-ok-bg-active:#35A26D;--btn-solid-ok-ink:#0B2A1B;
+  --btn-solid-danger-bg:#E8776D;--btn-solid-danger-bg-hover:#F08A80;--btn-solid-danger-bg-active:#D9685E;--btn-solid-danger-ink:#2A0B08;
+
   /* chat kit — see the :root block above */
   --chat-code-bg:#12151B;
   --code-kw:#B3A6F0;--code-str:#E9C377;--code-num:#EFA8BE;--code-com:#6C7686;