@allxsmith/bestax-bulma 5.66.0 → 5.66.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.66.0",
+  "version": "5.66.2",
   "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/_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/components/_pagination.scss

@@ -4,15 +4,23 @@
 // replaces all three with the system's, so the current page looks like every
 // other page there. This draws it in Highlight and HighlightText, the pair the
 // system keeps for a selection, the way the themed Checkbox marks a checked
-// box. `forced-color-adjust: none` keeps them. Outside forced colors it
-// changes nothing.
+// box. `forced-color-adjust: none` keeps them. Outside forced colors those
+// colors change nothing.
 //
 // It reads the classes Bulma highlights, `is-current` and its other name
 // `is-selected`, so a hand-written current link gets it too, and so does
 // `DataTable`'s pager, which is a `Pagination`. Two classes outrank Bulma's
 // colors for a link, wherever the two stylesheets load.
+//
+// Bulma's control mixin also sets `outline: none` on `:focus-visible`, which
+// outranks Bulma's own link ring, so a keyboard user sees only the hover
+// shade. The rules below bring that outline back. The `.pagination` ancestor
+// outranks the mixin's `outline: none` whichever stylesheet loads first.
+// `:focus-visible` keeps the ring off a mouse click, and an item without
+// keyboard focus looks as it does now.
 
 @use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
 
 @media (forced-colors: active) {
   .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-current,
@@ -23,3 +31,24 @@
     color: HighlightText;
   }
 }
+
+.#{iv.$class-prefix}pagination .#{iv.$class-prefix}pagination-previous:focus-visible,
+.#{iv.$class-prefix}pagination .#{iv.$class-prefix}pagination-next:focus-visible,
+.#{iv.$class-prefix}pagination .#{iv.$class-prefix}pagination-link:focus-visible {
+  outline-color: hsl(
+    cv.getVar('focus-h'),
+    cv.getVar('focus-s'),
+    cv.getVar('focus-l')
+  );
+  outline-style: cv.getVar('focus-style');
+  outline-width: cv.getVar('focus-width');
+  outline-offset: cv.getVar('focus-offset');
+}
+
+// The current page is filled with the link color, which the focus color
+// matches by default, so its ring takes the page's text color, inside the fill.
+.#{iv.$class-prefix}pagination .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-current:focus-visible,
+.#{iv.$class-prefix}pagination .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-selected:focus-visible {
+  outline-color: currentColor;
+  outline-offset: calc(-2 * #{cv.getVar('focus-width')});
+}

package/src/scss/components/_tooltip.scss

@@ -323,3 +323,22 @@ $tooltip-large-arrow-size: 7px !default;
     )
   );
 }
+
+// Forced colors turns the box's background into the page's and paints every
+// side of the arrow. An outline, not a border, so the tooltip doesn't grow.
+// Only the arrow opts out, so its transparent sides stay transparent and the
+// side that points takes the system's text color.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}tooltip-content {
+    outline: 1px solid CanvasText;
+  }
+
+  .#{iv.$class-prefix}tooltip-content::before {
+    forced-color-adjust: none;
+    @include cv.register-vars(
+      (
+        "tooltip-background": CanvasText,
+      )
+    );
+  }
+}

package/src/scss/elements/_button.scss

@@ -17,13 +17,29 @@
 // The ghost rule doesn't ask for LinkButton's class, since a ghost Button has
 // none.
 //
+// Forced colors also replaces a colored button's fill, and Bulma sets its
+// border width to 0, so in Chromium the button has no edge and an icon-only
+// one shows only its glyph. The last rule gives those buttons back a 1px
+// border there. An outlined button keeps the width it sets, and Bulma
+// subtracts the width from the padding, so the size stays the same. Bulma
+// gives a colored button that same border only while it's focused, so with
+// one at rest the outline above is what shows focus.
+//
+// Bulma's colors include `text`, but `.button.is-text` is a text button, as
+// `Button color="text"` and LinkButton's text and underline variants render
+// it. It has no fill to lose, and a border at rest would draw a box around a
+// link, so the loop leaves it out.
+//
 // Bulma's CSS can land on either side of this partial, as `_loader.scss`
-// says, so each selector outranks the mixin's rules by its classes: the
-// ghost rule has three to Bulma's two, and the forced colors rule names
-// `.button` twice, as `_delete.scss` does.
+// says, so each selector outranks Bulma's rule by its classes: the ghost rule
+// has three to the mixin's two, the forced colors outline names `.button`
+// twice, as `_delete.scss` does, and the border names the color class twice
+// to outrank Bulma's `.button.is-<color>`.
 
+@use 'sass:map';
 @use 'bulma/sass/utilities/initial-variables' as iv;
 @use 'bulma/sass/utilities/css-variables' as cv;
+@use 'bulma/sass/utilities/derived-variables' as dv;
 
 @mixin -focus-outline {
   outline-color: hsl(
@@ -46,4 +62,12 @@
   .#{iv.$class-prefix}button.#{iv.$class-prefix}button:not(.#{iv.$class-prefix}is-loading).#{iv.$class-prefix}is-focused {
     @include -focus-outline;
   }
+
+  @each $name in map.keys(map.remove(dv.$colors, 'text')) {
+    .#{iv.$class-prefix}button.#{iv.$class-prefix}is-#{$name}.#{iv.$class-prefix}is-#{$name}:not(
+        .#{iv.$class-prefix}is-outlined
+      ) {
+      @include cv.register-var('button-border-width', 1px);
+    }
+  }
 }