@rackbops/styles 0.1.5 → 0.1.7

package/contract.json

@@ -27,7 +27,7 @@
     "link": {
       "react": "NavLink",
       "classes": ["rb-link", "rb-link--active"],
-      "notes": "active prop; SHOULD also match [aria-current=\"page\"] (pending CSS sweep, #65)"
+      "notes": "active prop; also matches [aria-current=\"page\"] in every theme"
     },
     "nav-rail": {
       "react": "NavRail",
@@ -57,7 +57,7 @@
     "tabs": {
       "react": "Tabs",
       "classes": ["rb-tabs", "rb-tab", "rb-tab--active", "rb-tabpanel"],
-      "notes": "items: {id, label, content}[]; --active SHOULD also match [aria-selected=\"true\"] (pending CSS sweep, #65)"
+      "notes": "items: {id, label, content}[]; --active also matches [aria-selected=\"true\"] in every theme"
     },
     "table": {
       "react": null,
@@ -87,7 +87,7 @@
     "stepper": {
       "react": "Stepper",
       "classes": ["rb-stepper", "rb-stepper__step", "rb-stepper__node", "rb-stepper__label", "rb-stepper--complete", "rb-stepper--current", "rb-stepper--upcoming"],
-      "notes": "--upcoming is the resting state (allowlisted, no rule needed); --current SHOULD also match [aria-current=\"step\"] (pending CSS sweep, #65)"
+      "notes": "--upcoming is the resting state (allowlisted, no rule needed); --current also matches [aria-current=\"step\"] in every theme"
     }
   },
   "allowlist": [
@@ -131,62 +131,28 @@
       "class": "rb-tab--active",
       "attribute": "[aria-selected=\"true\"]",
       "baseSelector": "rb-tab",
-      "exempt": [
-        { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
-      ]
+      "exempt": []
     },
     {
       "component": "link",
       "class": "rb-link--active",
       "attribute": "[aria-current=\"page\"]",
       "baseSelector": "rb-link",
-      "exempt": [
-        { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "concrete-signal", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "concrete-signal-light", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "luminous-precision", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "mono-field", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "neon-butterfly", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
-      ]
+      "exempt": []
     },
     {
       "component": "stepper",
       "class": "rb-stepper--current",
       "attribute": "[aria-current=\"step\"]",
       "baseSelector": "rb-stepper__step",
-      "exempt": [
-        { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "concrete-signal", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "concrete-signal-light", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "luminous-precision", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "mono-field", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "neon-butterfly", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
-        { "theme": "summer-cloud", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
-      ]
+      "exempt": []
     }
   ],
   "dialogBackdropBlur": {
     "token": "--rb-blur",
     "exempt": [
       { "theme": "concrete-signal", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
-      { "theme": "concrete-signal-light", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
-      { "theme": "neon-butterfly", "reason": "hard-codes blur(4px), pending CSS fix, tracked in #65" },
-      { "theme": "summer-cloud", "reason": "hard-codes blur(4px), pending CSS fix, tracked in #65" }
+      { "theme": "concrete-signal-light", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true }
     ]
   }
 }

package/luminous-precision/components/button.css

@@ -34,7 +34,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
   border-color: var(--rb-accent-border);
   color: var(--rb-accent);
@@ -48,7 +48,7 @@
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:focus-visible {
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -59,7 +59,7 @@
   border-color: var(--rb-accent-2);
   color: var(--rb-accent-2);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:focus-visible {
   border-color: var(--rb-accent-2);
   color: var(--rb-accent-2);
@@ -70,7 +70,7 @@
   border-color: var(--rb-danger);
   color: var(--rb-danger);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
   color: var(--rb-danger);
@@ -81,7 +81,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
 }
@@ -106,7 +106,7 @@
   :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn {
     transition: none;
   }
-  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:not(:disabled):hover,
   :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
     animation: none;
   }

package/luminous-precision/components/link.css

@@ -29,7 +29,8 @@
     0 0 12px var(--rb-accent-2-glow);
 }
 /* --active: the current route, styled as the resting version of :hover */
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link--active {
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link--active,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link[aria-current="page"] {
   background: var(--rb-surface);
   color: var(--rb-accent-2);
   box-shadow:

package/luminous-precision/components/stepper.css

@@ -43,7 +43,8 @@
   transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
 }
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step[aria-current="step"]::before {
   background: var(--rb-accent);
   box-shadow: 0 0 8px var(--rb-accent-glow);
 }
@@ -71,13 +72,15 @@
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--complete .rb-stepper__label {
   color: var(--rb-text);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__node {
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__node,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
   background: var(--rb-surface);
   border-color: var(--rb-accent);
   color: var(--rb-accent);
   box-shadow: 0 0 8px var(--rb-accent-glow);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__label {
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__label,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
   color: var(--rb-accent);
   font-weight: var(--rb-font-weight-medium);
 }

package/mono-field/components/button.css

@@ -39,7 +39,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:not(:disabled):hover {
   border-color: var(--rb-border-strong);
 }
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:focus-visible {
@@ -54,7 +54,7 @@
   color: var(--rb-accent-fg);
   box-shadow: var(--rb-shadow-sm);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--primary:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--primary:not(:disabled):hover {
   box-shadow: var(--rb-shadow-lg);
 }
 
@@ -64,7 +64,7 @@
   border-color: transparent;
   color: var(--rb-accent);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--accent:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--accent:not(:disabled):hover {
   border-color: var(--rb-accent);
 }
 
@@ -74,7 +74,7 @@
   border-color: var(--rb-border);
   color: var(--rb-danger);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--danger:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--danger:not(:disabled):hover {
   border-color: var(--rb-danger);
 }
 
@@ -84,7 +84,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--ghost:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--ghost:not(:disabled):hover {
   border-color: transparent;
   color: var(--rb-text);
 }

package/mono-field/components/link.css

@@ -32,10 +32,12 @@
   transition: background var(--rb-transition);
 }
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link:hover::before,
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active::before {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active::before,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link[aria-current="page"]::before {
   background: var(--rb-accent);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link[aria-current="page"] {
   background: var(--rb-surface-2);
   color: var(--rb-accent);
 }

package/mono-field/components/stepper.css

@@ -42,7 +42,8 @@
   transition: background-color var(--rb-transition);
 }
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step[aria-current="step"]::before {
   background: var(--rb-accent);
 }
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__node {
@@ -69,12 +70,14 @@
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--complete .rb-stepper__label {
   color: var(--rb-text);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__node {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__node,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
   background: var(--rb-surface);
   border-color: var(--rb-accent);
   color: var(--rb-accent);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__label {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__label,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
   color: var(--rb-accent);
   font-weight: var(--rb-font-weight-medium);
 }

package/neon-butterfly/components/button.css

@@ -33,7 +33,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
   border-color: var(--rb-accent-border);
   color: var(--rb-accent);
@@ -58,7 +58,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:hover,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-glass);
 }
@@ -73,7 +73,7 @@
   :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn {
     transition: none;
   }
-  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:not(:disabled):hover,
   :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
     animation: none;
   }

package/neon-butterfly/components/dialog.css

@@ -12,7 +12,7 @@
 }
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog::backdrop {
   background: rgba(11, 19, 38, 0.7);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--rb-blur));
 }
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog__title {
   margin: 0 0 var(--rb-space-3);

package/neon-butterfly/components/link.css

@@ -36,11 +36,13 @@
 }
 /* --active: the current route — the hover color/glow, resting, without the
  * hover-only slide (that's a click-me cue; an active item is already "here"). */
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active {
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link[aria-current="page"] {
   border-color: var(--rb-accent-border);
   color: var(--rb-accent);
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active::before {
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active::before,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link[aria-current="page"]::before {
   color: var(--rb-accent-2);
   text-shadow: 0 0 5px var(--rb-accent-2-glow);
 }

package/neon-butterfly/components/stepper.css

@@ -43,7 +43,8 @@
   transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
 }
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step[aria-current="step"]::before {
   background: var(--rb-accent);
   box-shadow: 0 0 8px var(--rb-accent-glow);
 }
@@ -71,13 +72,15 @@
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--complete .rb-stepper__label {
   color: var(--rb-text);
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__node {
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__node,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
   background: var(--rb-surface);
   border-color: var(--rb-accent);
   color: var(--rb-accent);
   box-shadow: 0 0 8px var(--rb-accent-glow);
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__label {
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__label,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
   color: var(--rb-accent);
   font-weight: var(--rb-font-weight-medium);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/styles",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
   "license": "MIT",
   "repository": {

package/rackbops-noir/components/button.css

@@ -43,7 +43,7 @@
   background: var(--rb-text); /* light in this theme — a bright neutral fill */
   color: var(--rb-bg); /* dark ink on the light fill */
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:focus-visible {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -52,7 +52,7 @@
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:focus-visible {
   /* mix toward the text colour: lightens in a dark theme, darkens in a light one */
   background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%);
@@ -62,7 +62,7 @@
   color: var(--rb-text);
   border-color: var(--rb-border-strong);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:focus-visible {
   border-color: var(--rb-text);
   background: var(--rb-surface-2);
@@ -72,7 +72,7 @@
   color: var(--rb-danger);
   border-color: color-mix(in srgb, var(--rb-danger) 45%, var(--rb-border));
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -83,7 +83,7 @@
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn__arrow {
   transition: transform var(--rb-transition) ease;
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:hover .rb-btn__arrow {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:not(:disabled):hover .rb-btn__arrow {
   transform: translateX(3px);
 }
 

package/rackbops-noir/components/link.css

@@ -20,7 +20,8 @@
   color: var(--rb-text);
   background: var(--rb-surface-2);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link.rb-link--active {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link.rb-link--active,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link[aria-current="page"] {
   color: var(--rb-accent);
 }
 

package/rackbops-noir/components/stepper.css

@@ -42,7 +42,8 @@
   transition: background-color var(--rb-transition);
 }
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step[aria-current="step"]::before {
   background: var(--rb-accent);
 }
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--complete .rb-stepper__label {
   color: var(--rb-text);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__node {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__node,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
   background: var(--rb-surface);
   border-color: var(--rb-accent);
   color: var(--rb-accent);
   box-shadow: var(--rb-shadow-lg);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__label {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__label,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
   color: var(--rb-accent);
   font-weight: var(--rb-font-weight-medium);
 }

package/rackbops-noir/components/tabs.css

@@ -21,10 +21,12 @@
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab:hover {
   color: var(--rb-text);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-text);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active::after {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active::after,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab[aria-selected="true"]::after {
   content: "";
   position: absolute;
   left: 0;

package/rackbops-studio/components/button.css

@@ -43,7 +43,7 @@
   background: var(--rb-text);
   color: var(--rb-bg);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:focus-visible {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -52,7 +52,7 @@
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:focus-visible {
   background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%);
 }
@@ -61,7 +61,7 @@
   color: var(--rb-text);
   border-color: var(--rb-border-strong);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost:focus-visible {
   border-color: var(--rb-text);
   background: var(--rb-surface-2);
@@ -71,7 +71,7 @@
   color: var(--rb-danger);
   border-color: color-mix(in srgb, var(--rb-danger) 45%, var(--rb-border));
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--danger:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -82,7 +82,7 @@
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn__arrow {
   transition: transform var(--rb-transition) ease;
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn:hover .rb-btn__arrow {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn:not(:disabled):hover .rb-btn__arrow {
   transform: translateX(3px);
 }
 

package/rackbops-studio/components/link.css

@@ -20,7 +20,8 @@
   color: var(--rb-text);
   background: var(--rb-surface-2);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-link.rb-link--active {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-link.rb-link--active,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-link[aria-current="page"] {
   color: var(--rb-accent);
 }
 

package/rackbops-studio/components/stepper.css

@@ -42,7 +42,8 @@
   transition: background-color var(--rb-transition);
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step[aria-current="step"]::before {
   background: var(--rb-accent);
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--complete .rb-stepper__label {
   color: var(--rb-text);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__node {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__node,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
   background: var(--rb-surface);
   border-color: var(--rb-accent);
   color: var(--rb-accent);
   box-shadow: var(--rb-shadow-lg);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__label {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__label,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
   color: var(--rb-accent);
   font-weight: var(--rb-font-weight-medium);
 }

package/rackbops-studio/components/tabs.css

@@ -21,10 +21,12 @@
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab:hover {
   color: var(--rb-text);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-text);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active::after {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active::after,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab[aria-selected="true"]::after {
   content: "";
   position: absolute;
   left: 0;

package/summer-cloud/components/button.css

@@ -37,7 +37,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible {
   background: rgba(255, 255, 255, 0.6);
   border-color: var(--rb-accent-border);
@@ -60,7 +60,7 @@
   font-weight: var(--rb-font-weight-bold);
   box-shadow: var(--rb-shadow-raised);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:hover {
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:not(:disabled):hover {
   background: var(--rb-accent-bright);
   color: #fff;
   box-shadow: var(--rb-shadow-raised-hover);
@@ -76,7 +76,7 @@
   border-color: var(--rb-accent-2);
   color: var(--rb-accent-2-deep);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:focus-visible {
   color: var(--rb-accent-2-deep);
   box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
@@ -88,7 +88,7 @@
   border-color: transparent;
   box-shadow: none;
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-sky-tint);
 }
@@ -100,7 +100,7 @@
   font-weight: var(--rb-font-weight-bold);
   box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:focus-visible {
   background: var(--rb-danger);
   color: #4a0000;
@@ -118,7 +118,7 @@
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn {
     transition: background var(--rb-transition), color var(--rb-transition);
   }
-  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:not(:disabled):hover,
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible,
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:active {
     transform: none;