@allxsmith/bestax-bulma 5.66.1 → 5.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.66.1",
+  "version": "5.67.0",
   "description": "Component library based on React, Bulma, with Agent Skills and MCP",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/scss/CLAUDE.md

@@ -1,9 +1,10 @@
 # scss/ — styles for the bestax "extras"
 
-**Only extras get SCSS.** Components that are stock Bulma (Box, Card, Navbar, …) ship no CSS
+**Only extras get SCSS.** Components that are stock Bulma (Box, Card, Modal, …) ship no CSS
 of their own — Bulma provides it. A partial exists only for components that extend beyond Bulma
 (Carousel, Collapse, Dialog, the extended form inputs, …) — or that extend a stock component
-(e.g. `_tabs.scss` adds vertical Tabs). The `_index.scss` files are the authoritative inventory.
+(e.g. `_tabs.scss` adds vertical Tabs, `_navbar.scss` keeps the burger's bars in forced
+colors). The `_index.scss` files are the authoritative inventory.
 
 ## Structure
 
@@ -76,3 +77,25 @@ Rules the pattern encodes:
   CSS & Sass Variables section, which is how LinkButton shipped its variables invisibly
   (#464). The orphan rule in `check:conformance` now fails on a partial that no component
   claims, so the miss is loud, but the fix is still yours to make.
+
+## A partial that adjusts stock Bulma
+
+Some partials change a stock component rather than add one (`elements/_button.scss`,
+`components/_pagination.scss`, `components/_menu.scss`). They follow the pattern above, plus:
+
+- **Outrank Bulma whichever stylesheet loads first.** An app may load `extras.css` before or
+  after Bulma, so match Bulma's selector and add one class or ancestor (`.button.button`,
+  `.pagination .pagination-link`), and test both load orders.
+- **Check every case the selector reaches.** A loop over Bulma's `$colors` also reaches `text`,
+  which `LinkButton` uses by default. A rule for one state can erase another state's only cue: a
+  border at rest in forced colors is the same border Bulma draws for focus. List the variants,
+  sizes and states the rule touches, and check each.
+- **Forced colors:** scope the rule to `@media (forced-colors: active)`, paint with system colors
+  (`CanvasText`, `ButtonText`), and put `forced-color-adjust: none` only on the smallest element
+  that needs it, so everything else keeps the user's palette.
+- **Name the `@use`.** Docs that show the partial beside the Bulma module it adjusts load it
+  `as bestax-<name>`, since Sass refuses two `@use` lines with the same name.
+- `ORPHAN_EXEMPT` in `scripts/check-conformance.mjs` is for a partial no component can claim. Its
+  reason says why that stays true, not which issue added it.
+- A new partial also means updating every page that lists the partials: see "Finishing a change"
+  in the root `CLAUDE.md`.

package/src/scss/components/_index.scss

@@ -29,3 +29,4 @@
 @use 'datatable';
 @use 'pagination';
 @use 'affix';
+@use 'navbar';

package/src/scss/components/_loading.scss

@@ -144,22 +144,36 @@ $loading-animation-duration: 0.75s !default;
   );
   animation: extras-spin cv.getVar("loading-animation-duration") infinite linear;
 
+  // Each size takes its ring width from its own variable on `.loading`, as it
+  // takes its dimensions.
   &.#{iv.$class-prefix}is-small {
     width: cv.getVar("loading-icon-size-small");
     height: cv.getVar("loading-icon-size-small");
-    @include cv.register-vars(("loading-icon-border-width": #{$loading-icon-border-width-small}));
+    @include cv.register-vars(
+      (
+        "loading-icon-border-width": #{cv.getVar("loading-icon-border-width-small")},
+      )
+    );
   }
 
   &.#{iv.$class-prefix}is-medium {
     width: cv.getVar("loading-icon-size-medium");
     height: cv.getVar("loading-icon-size-medium");
-    @include cv.register-vars(("loading-icon-border-width": #{$loading-icon-border-width-medium}));
+    @include cv.register-vars(
+      (
+        "loading-icon-border-width": #{cv.getVar("loading-icon-border-width-medium")},
+      )
+    );
   }
 
   &.#{iv.$class-prefix}is-large {
     width: cv.getVar("loading-icon-size-large");
     height: cv.getVar("loading-icon-size-large");
-    @include cv.register-vars(("loading-icon-border-width": #{$loading-icon-border-width-large}));
+    @include cv.register-vars(
+      (
+        "loading-icon-border-width": #{cv.getVar("loading-icon-border-width-large")},
+      )
+    );
   }
 }
 

package/src/scss/components/_navbar.scss

@@ -0,0 +1,20 @@
+// Bestax Extras - Navbar Styles
+// Bulma draws `.navbar-burger`'s bars as `background-color: currentColor`
+// on a button with no background. Forced colors (Windows' contrast themes)
+// replaces background colors, and Chromium paints the bars in the page's
+// Canvas color, so the burger vanishes while it still works. This keeps
+// the bars in ButtonText. Outside forced colors it changes nothing.
+//
+// Bulma's CSS can land on either side of this partial, as it can for
+// `_delete.scss`, so the selector names its class twice to outrank Bulma's
+// `.navbar-burger span`, wherever the two load.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}navbar-burger.#{iv.$class-prefix}navbar-burger span {
+    // Opt out so Chromium keeps these bars in ButtonText, not Canvas.
+    forced-color-adjust: none;
+    background-color: ButtonText;
+  }
+}

package/src/scss/form/_radio.scss

@@ -21,7 +21,10 @@ $radio-border-width: 2px !default;
 // scheme's surfaces in light and dark. `border` falls well short of it.
 $radio-border-color: cv.getVar("text-weak") !default;
 $radio-background: transparent !default;
-$radio-dot-color: cv.getVar("scheme-main") !default;
+// The dot takes the ring's color unless a theme sets its own. It's declared
+// on the same element as `radio-active-color`, so the color variants and the
+// selected-row rule below, which set that one, carry through to the dot.
+$radio-dot-color: cv.getVar("radio-active-color") !default;
 $radio-active-color: cv.getVar("primary") !default;
 $radio-label-gap: 0.5em !default;
 $radio-focus-shadow-size: 0 0 0 0.125em !default;
@@ -116,7 +119,7 @@ $radio-transition-duration: cv.getVar("duration") !default;
       width: 50%;
       height: 50%;
       border-radius: 50%;
-      background-color: cv.getVar("radio-active-color");
+      background-color: cv.getVar("radio-dot-color");
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.5);
       transition-property: opacity, transform;