@flytedan/flytebot-design-system 0.37.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
@@ -43,8 +43,9 @@
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "test": "vitest run",
+    "test": "vitest run --project unit && vitest run --project browser",
     "test:dist": "tsup && vitest run --config scripts/vitest.dist.config.ts",
+    "test:unit": "vitest run --project unit",
     "test:browser": "vitest run --project browser",
     "sync-icons": "node scripts/sync-icons.mjs",
     "docs": "vite --config vite.docs.config.ts",

package/styles/components.css

@@ -34,16 +34,74 @@
 .fd-btn:hover {
   text-decoration: none;
 }
+/* This translateY is the only press feedback any variant gets: while a real mouse holds a
+   button down, the pointer is over it, so :hover's own background is already showing —
+   restating a different :active-only background/box-shadow per variant is unreachable
+   without also losing :hover the moment the button is pressed, and a real browser clears
+   :active the instant the pointer leaves the element during a held press (there is no
+   sticky/dragged-off :active to distinguish from :hover here), so no per-variant :active
+   rule was ever independently observable. */
 .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, 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,
+.fd-btn[aria-disabled="true"]:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* A disabled or aria-disabled button never shows a hover or pressed look, in any variant —
+   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);
+  color: var(--text-disabled);
+}
+.fd-btn-link[disabled]: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 {
   height: var(--control-h-sm);
   padding: 0 14px;
@@ -67,10 +125,6 @@
 .fd-btn-primary:hover {
   background: var(--grad-primary-hover);
 }
-.fd-btn-primary:active {
-  background: var(--blue-800);
-  box-shadow: none;
-}
 .fd-btn-brandsoft {
   background: var(--grad-brand-soft);
   color: #fff;
@@ -91,10 +145,6 @@
   background: var(--surface-2);
   border-color: var(--border-strong);
 }
-.fd-btn-secondary:active {
-  background: var(--surface-3);
-  box-shadow: none;
-}
 .fd-btn-ghost {
   background: transparent;
   color: var(--text-2);
@@ -103,9 +153,6 @@
   background: var(--surface-3);
   color: var(--text);
 }
-.fd-btn-ghost:active {
-  background: var(--border);
-}
 .fd-btn-danger {
   background: var(--danger-solid);
   color: #fff;
@@ -114,10 +161,6 @@
 .fd-btn-danger:hover {
   background: #b93a31;
 }
-.fd-btn-danger:active {
-  background: #9e2f27;
-  box-shadow: none;
-}
 .fd-btn-link {
   background: none;
   color: var(--link);
@@ -140,7 +183,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 {