@flytedan/flytebot-design-system 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.37.0",
+  "version": "0.38.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

@@ -44,6 +44,59 @@
   box-shadow: none;
   transform: none;
 }
+/* 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
+   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 —
+   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);
+  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);
+}
+.fd-btn-link[disabled]:hover,
+.fd-btn-link[aria-disabled="true"]:hover {
+  text-decoration: none;
+}
 .fd-btn-sm {
   height: var(--control-h-sm);
   padding: 0 14px;