@flytedan/flytebot-design-system 0.38.0 → 0.40.0

package/package.json

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

package/styles/components.css

@@ -34,23 +34,42 @@
 .fd-btn:hover {
   text-decoration: none;
 }
+/* While a real mouse holds a button down, the pointer is over it, so :hover's own rule is
+   also matching — but :hover and :active are equal specificity, and each variant's own
+   :active rule below is declared after that variant's :hover rule, so the cascade resolves
+   to :active's background/box-shadow, not :hover's. That is what gives an enabled button a
+   pressed colour genuinely distinct from its hovered one, on top of the translateY here
+   shared by every variant. */
 .fd-btn:active {
   transform: translateY(1px);
 }
+/* The disabled look lives on the content and fill alone, both via tokens — never `opacity`
+   on the whole element, which would also fade the :focus-visible ring drawn as this same
+   element's box-shadow (see the ring rule just below). One flat, variant-independent fill
+   (--surface-3/--border) and text/icon color (--text-disabled, inherited by the icon font
+   and by .fd-spinner's `currentColor` border) replace every variant's own resting look while
+   disabled — a disabled button never needs to keep reading as "primary" or "danger". */
 .fd-btn[disabled],
 .fd-btn[aria-disabled="true"] {
-  opacity: 0.4;
   cursor: not-allowed;
+  background: var(--surface-3);
+  border-color: var(--border);
+  color: var(--text-disabled);
   box-shadow: none;
   transform: none;
 }
+.fd-btn-link[disabled],
+.fd-btn-link[aria-disabled="true"] {
+  background: none;
+  border-color: transparent;
+}
 /* A focusableWhenDisabled button (aria-disabled, never native disabled) keeps the same
-   :focus-visible ring an enabled button gets — that is the whole point of keeping it in
-   the tab order. Restated here because the box-shadow:none above is a compound selector
-   (0,2,0: one class + one attribute) that beats plain button:focus-visible from
-   foundations.css (0,1,1: one element + one pseudo-class), so without this the ring never
-   shows on a control Tab can still land on. Native [disabled] is included for symmetry —
-   a real browser never actually gives a natively disabled control focus at all, so it
+   :focus-visible ring an enabled button gets, drawn at full strength — that is the whole
+   point of keeping it in the tab order. Restated here because the box-shadow:none above is a
+   compound selector (0,2,0: one class + one attribute) that beats plain button:focus-visible
+   from foundations.css (0,1,1: one element + one pseudo-class), so without this the ring
+   never shows on a control Tab can still land on. Native [disabled] is included for symmetry
+   — a real browser never actually gives a natively disabled control focus at all, so it
    never matches there, but nothing here should depend on that platform behaviour to stay
    correct. */
 .fd-btn[disabled]:focus-visible,
@@ -58,43 +77,28 @@
   box-shadow: var(--focus-ring);
 }
 /* A disabled or aria-disabled button never shows a hover or pressed look, in any variant —
-   each compound selector below (variant class + [disabled]/[aria-disabled] + :hover/
-   :active) is specificity 0,3,0, which beats that variant's own :hover/:active (0,2,0)
-   regardless of source order, so a real mouse hovering or pressing a disabled button sees
-   only its resting look. Every value restated here is the same token the variant's own
-   resting rule already uses above — nothing new, just re-declared at higher specificity. */
-.fd-btn-primary[disabled]:hover,
-.fd-btn-primary[aria-disabled="true"]:hover,
-.fd-btn-primary[disabled]:active,
-.fd-btn-primary[aria-disabled="true"]:active {
-  background: var(--grad-primary);
-}
-.fd-btn-brandsoft[disabled]:hover,
-.fd-btn-brandsoft[aria-disabled="true"]:hover {
-  background: var(--grad-brand-soft);
-}
-.fd-btn-secondary[disabled]:hover,
-.fd-btn-secondary[aria-disabled="true"]:hover,
-.fd-btn-secondary[disabled]:active,
-.fd-btn-secondary[aria-disabled="true"]:active {
-  background: var(--surface);
+   this compound selector (class + attribute + pseudo-class = 0,3,0) beats every variant's
+   own :hover/:active (class + pseudo-class = 0,2,0) regardless of source order, so a real
+   mouse hovering or pressing a disabled button sees only its resting disabled look. One rule
+   suffices for every variant now that the disabled fill/text no longer vary by variant.
+   box-shadow and transform are deliberately NOT restated here: the base [disabled]/
+   [aria-disabled] rule above already sets both, and restating box-shadow here would tie this
+   rule's specificity with the :focus-visible rule above it, letting a still-:hover'd (mouse
+   left in place) focused button lose its ring to source order. */
+.fd-btn[disabled]:hover,
+.fd-btn[aria-disabled="true"]:hover,
+.fd-btn[disabled]:active,
+.fd-btn[aria-disabled="true"]:active {
+  background: var(--surface-3);
   border-color: var(--border);
-}
-.fd-btn-ghost[disabled]:hover,
-.fd-btn-ghost[aria-disabled="true"]:hover,
-.fd-btn-ghost[disabled]:active,
-.fd-btn-ghost[aria-disabled="true"]:active {
-  background: transparent;
-  color: var(--text-2);
-}
-.fd-btn-danger[disabled]:hover,
-.fd-btn-danger[aria-disabled="true"]:hover,
-.fd-btn-danger[disabled]:active,
-.fd-btn-danger[aria-disabled="true"]:active {
-  background: var(--danger-solid);
+  color: var(--text-disabled);
 }
 .fd-btn-link[disabled]:hover,
-.fd-btn-link[aria-disabled="true"]:hover {
+.fd-btn-link[aria-disabled="true"]:hover,
+.fd-btn-link[disabled]:active,
+.fd-btn-link[aria-disabled="true"]:active {
+  background: none;
+  border-color: transparent;
   text-decoration: none;
 }
 .fd-btn-sm {
@@ -168,7 +172,7 @@
   background: #b93a31;
 }
 .fd-btn-danger:active {
-  background: #9e2f27;
+  background: var(--btn-solid-danger-bg-active);
   box-shadow: none;
 }
 .fd-btn-link {
@@ -193,7 +197,11 @@
   font-size: 12px;
   transition: transform var(--dur-base) var(--ease-out);
 }
-.fd-btn:hover .fd-btn-arrow {
+/* Excludes [disabled]/[aria-disabled="true"] so a disabled arrow button never nudges on
+   hover — the disabled selector's own :hover rule above sets no transform, but this rule
+   targets a *descendant* (.fd-btn-arrow), which that selector's specificity can't reach, so
+   it needs its own explicit exclusion. */
+.fd-btn:hover:not([disabled]):not([aria-disabled="true"]) .fd-btn-arrow {
   transform: translateX(2px);
 }
 .fd-btn-loading {