@allxsmith/bestax-bulma 5.65.0 → 5.65.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.65.0",
+  "version": "5.65.1",
   "description": "Component library based on React, Bulma, with Agent Skills and MCP",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -40,7 +40,7 @@
     "@typescript-eslint/parser": "^8.72.1",
     "@vitest/browser-playwright": "^5.0.5",
     "@vitest/coverage-istanbul": "^5.0.5",
-    "eslint": "^10.13.0",
+    "eslint": "^10.14.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.7",
     "eslint-plugin-react-hooks": "^7.1.1",
@@ -52,13 +52,13 @@
     "playwright": "^1.64.1",
     "prettier": "^3.9.10",
     "rimraf": "^6.0.1",
-    "rollup": "^4.66.0",
+    "rollup": "^4.67.4",
     "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-visualizer": "^7.1.1",
-    "sass": "^1.107.0",
-    "sass-embedded": "^1.107.0",
+    "sass": "^1.107.1",
+    "sass-embedded": "^1.107.1",
     "storybook": "^10.6.5",
-    "tslib": "^2.8.0",
+    "tslib": "^2.9.1",
     "typescript": "^6.0.3",
     "vite": "^8.3.5",
     "vitest": "^5.0.5"

package/src/scss/CLAUDE.md

@@ -1,6 +1,6 @@
 # scss/ — styles for the bestax "extras"
 
-**Only extras get SCSS.** Components that are stock Bulma (Button, Card, Navbar, …) ship no CSS
+**Only extras get SCSS.** Components that are stock Bulma (Box, Card, Navbar, …) 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.

package/src/scss/elements/_button.scss

@@ -0,0 +1,49 @@
+// Bestax Extras - Button Styles
+// Bulma's control mixin sets `outline: none` on a focused button and shows
+// focus through the button's border color and a box-shadow instead. Where
+// those show nothing, these give the button Bulma's focus outline, in its
+// focus color, style, width and offset:
+//
+// - A ghost button, which Bulma draws with no border and no shadow, so it
+//   shows no focus at all. This one applies outside forced colors too.
+// - Every button in forced colors (Windows' contrast themes), which drops the
+//   shadow and forces the border's color, so a focused button can look just
+//   like an unfocused one there. A ghost button matches both rules there,
+//   and they draw the same outline. A loading button is left to
+//   `_loader.scss`, which turns forcing off on it and rings it in the
+//   system's colors.
+//
+// `.is-focused` is the class `isFocused` sets, so it gets the outline too.
+// The ghost rule doesn't ask for LinkButton's class, since a ghost Button has
+// none.
+//
+// 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.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+@mixin -focus-outline {
+  outline-color: hsl(
+    cv.getVar('focus-h'),
+    cv.getVar('focus-s'),
+    cv.getVar('focus-l')
+  );
+  outline-offset: cv.getVar('focus-offset');
+  outline-style: cv.getVar('focus-style');
+  outline-width: cv.getVar('focus-width');
+}
+
+.#{iv.$class-prefix}button.#{iv.$class-prefix}is-ghost:focus-visible,
+.#{iv.$class-prefix}button.#{iv.$class-prefix}is-ghost.#{iv.$class-prefix}is-focused {
+  @include -focus-outline;
+}
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}button.#{iv.$class-prefix}button:not(.#{iv.$class-prefix}is-loading):focus-visible,
+  .#{iv.$class-prefix}button.#{iv.$class-prefix}button:not(.#{iv.$class-prefix}is-loading).#{iv.$class-prefix}is-focused {
+    @include -focus-outline;
+  }
+}

package/src/scss/elements/_index.scss

@@ -2,6 +2,7 @@
 // Import all element partials here
 
 // Element Components
+@use 'button';
 @use 'colorswatch';
 @use 'delete';
 @use 'descriptionlist';

package/src/scss/elements/_loader.scss

@@ -72,14 +72,16 @@
   // `<button>`, a link's for a link, and no surface for a variant that has
   // none, as below. Forcing off reaches everything inside too, which the
   // rule at the top already hides. It also stops the browser recoloring the
-  // border to show focus, so a focused one gets an outline.
+  // border to show focus, so a focused one gets an outline, and so does one
+  // with `is-focused`.
   .#{iv.$class-prefix}button.#{iv.$class-prefix}is-loading {
     forced-color-adjust: none;
     background-color: Canvas !important;
     border-color: CanvasText !important;
     color: transparent !important;
 
-    &:focus-visible {
+    &:focus-visible,
+    &.#{iv.$class-prefix}is-focused {
       outline: 2px solid CanvasText;
       outline-offset: 2px;
     }
@@ -100,7 +102,8 @@
     background-color: ButtonFace !important;
     border-color: ButtonText !important;
 
-    &:focus-visible {
+    &:focus-visible,
+    &.#{iv.$class-prefix}is-focused {
       outline-color: ButtonText;
     }
   }
@@ -108,7 +111,8 @@
   a[href].#{iv.$class-prefix}button.#{iv.$class-prefix}is-loading {
     border-color: LinkText !important;
 
-    &:focus-visible {
+    &:focus-visible,
+    &.#{iv.$class-prefix}is-focused {
       outline-color: LinkText;
     }
   }
@@ -123,7 +127,8 @@
     background-color: transparent !important;
     border-color: CanvasText !important;
 
-    &:focus-visible {
+    &:focus-visible,
+    &.#{iv.$class-prefix}is-focused {
       outline-color: CanvasText;
     }
   }