@allxsmith/bestax-bulma 5.67.3 → 5.67.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.67.3",
+  "version": "5.67.5",
   "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

@@ -15,8 +15,11 @@ colors). The `_index.scss` files are the authoritative inventory.
 - `_variables.scss` — `$extras-*` tokens derived from Bulma's HSL channel vars (`--bulma-primary-h/s/l`)
 - `_mixins.scss` — shared mixins: `extras-transition`, `extras-focus-outline` (a11y), `extras-sr-only`.
   It loads no Bulma module, since tests compile it with only this folder on the load path
+- `_color-classes.scss` — `extras-color-classes`, the modifier class of each color in Bulma's
+  `$colors`, as a list for a `:not()` that skips an element carrying another color; it reads
+  Bulma's `$colors`, which is why it isn't in `_mixins.scss`
 - `_selected-row.scss` — `extras-selected-table-cell`, the cells Checkbox's and Radio's
-  selected-row rules share; it reads Bulma's `$colors`, which is why it isn't in `_mixins.scss`
+  selected-row rules share, built on `extras-color-classes`
 - `_input-trigger.scss` — `extras-input-trigger`, a button laid over an input's right edge, which
   the date and time pickers' launcher and PasswordInput's toggle share; it reads Bulma's class
   prefix and variables, so it isn't in `_mixins.scss` either

package/src/scss/_color-classes.scss

@@ -0,0 +1,27 @@
+// Bestax Extras - Bulma's color classes
+// A function for the partials that name Bulma's color modifiers, so each one
+// reads the same list. It reads Bulma's `$colors`, so it lives here rather
+// than in `_mixins.scss`, which compiles with no Bulma to load.
+
+@use 'sass:list';
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/derived-variables' as dv;
+
+// The modifier class of each color in Bulma's `$colors` map, custom colors
+// included, as a comma-separated list to put in a selector, usually a
+// `:not()`. Bulma's colored elements loop over that map, so a rule can skip
+// an element that carries any of their colors. A name passed in `$except` is
+// left out of the list.
+@function extras-color-classes($except...) {
+  $classes: ();
+  @each $name, $color in dv.$colors {
+    @if not list.index($except, $name) {
+      $classes: list.append(
+        $classes,
+        '.#{iv.$class-prefix}is-#{$name}',
+        $separator: comma
+      );
+    }
+  }
+  @return $classes;
+}

package/src/scss/_selected-row.scss

@@ -3,9 +3,8 @@
 // name can't drift apart. It reads Bulma's `$colors`, so it lives here rather
 // than in `_mixins.scss`, which compiles with no Bulma to load.
 
-@use 'sass:list';
 @use 'bulma/sass/utilities/initial-variables' as iv;
-@use 'bulma/sass/utilities/derived-variables' as dv;
+@use 'color-classes' as *;
 
 // The cells of a table that sit on Bulma's selected-row fill (`Tr
 // isSelected`, or a cell with `is-selected`), for a control drawn in the
@@ -23,14 +22,7 @@
 // is built from, custom colors included. A selected cell is the row's fill
 // whatever its color, as Bulma paints it.
 @mixin extras-selected-table-cell {
-  $colored: ();
-  @each $name, $color in dv.$colors {
-    $colored: list.append(
-      $colored,
-      '.#{iv.$class-prefix}is-#{$name}',
-      $separator: comma
-    );
-  }
+  $colored: extras-color-classes();
 
   .#{iv.$class-prefix}table {
     tr.#{iv.$class-prefix}is-selected:not(#{$colored}) > td:not(#{$colored}),

package/src/scss/components/_hovercard.scss

@@ -84,6 +84,17 @@ $hover-card-animation-duration: 0.15s !default;
   &.#{iv.$class-prefix}is-top-right {
     right: 0;
   }
+  // With no `position`, the card lines up with the trigger's inline start,
+  // so a trigger at the start of a right-to-left line doesn't push it off the
+  // screen. A corner the caller names stays physical. Portaled, the
+  // component sets the edge inline instead. `:where()` keeps this at the
+  // corner rules' weight, so a theme's own placement still wins.
+  &.#{iv.$class-prefix}is-start-aligned:where(
+      :not(.#{iv.$class-prefix}is-portal):dir(rtl)
+    ) {
+    left: auto;
+    right: 0;
+  }
 
   // Portaled: fixed to the viewport at the trigger's edge, which the
   // component sets inline, so only the gap comes from here.

package/src/scss/components/_sidebar.scss

@@ -306,17 +306,19 @@ $sidebar-static-border-color: cv.getVar("border") !default;
   }
 }
 
-// Static variant (inline sidebar, not overlay)
+// Static variant (inline sidebar, not overlay). The border sits between the
+// sidebar and the content: on its end, or its start with `is-right`, so it
+// faces the content on a right-to-left page too.
 .#{iv.$class-prefix}sidebar.#{iv.$class-prefix}is-static {
   position: relative;
   transform: none;
   box-shadow: none;
   z-index: auto;
-  border-right: 1px solid cv.getVar("sidebar-static-border-color");
+  border-inline-end: 1px solid cv.getVar("sidebar-static-border-color");
 
   &.#{iv.$class-prefix}is-right {
-    border-right: none;
-    border-left: 1px solid cv.getVar("sidebar-static-border-color");
+    border-inline-end: none;
+    border-inline-start: 1px solid cv.getVar("sidebar-static-border-color");
   }
 }
 
@@ -340,8 +342,9 @@ $sidebar-static-border-color: cv.getVar("border") !default;
       margin: 0;
     }
 
+    // Out of sight but still in the link, so the link keeps its name.
     span:not(.#{iv.$class-prefix}icon) {
-      display: none;
+      @include extras-sr-only;
     }
   }
 }

package/src/scss/components/_tabs.scss

@@ -101,8 +101,9 @@ $tabs-content-padding: 1rem !default;
       align-items: stretch;
       border-bottom: none;
 
-      // Right border for left-side tabs
-      border-right: cv.getVar("tabs-vertical-border-width") solid cv.getVar("tabs-vertical-border-color");
+      // The edge between the tabs and the panel: their end, which is the
+      // left on a right-to-left page, where the panel sits.
+      border-inline-end: cv.getVar("tabs-vertical-border-width") solid cv.getVar("tabs-vertical-border-color");
 
       > li {
         width: 100%;
@@ -110,12 +111,12 @@ $tabs-content-padding: 1rem !default;
         a {
           justify-content: flex-start;
           border-bottom: none;
-          border-right: 2px solid transparent;
+          border-inline-end: 2px solid transparent;
           padding: 0.5em 1em;
         }
 
         &.#{iv.$class-prefix}is-active a {
-          border-right-color: cv.getVar("link");
+          border-inline-end-color: cv.getVar("link");
           border-bottom-color: transparent;
         }
       }
@@ -128,23 +129,24 @@ $tabs-content-padding: 1rem !default;
     min-width: 0;
   }
 
-  // Right side variant — reverse the flex direction
+  // Right side variant — reverse the flex direction, so the tabs sit at the
+  // end of the row and the edge moves to their start
   &.#{iv.$class-prefix}is-right {
     flex-direction: row-reverse;
 
     > .#{iv.$class-prefix}tabs > ul {
-      border-right: none;
-      border-left: cv.getVar("tabs-vertical-border-width") solid cv.getVar("tabs-vertical-border-color");
+      border-inline-end: none;
+      border-inline-start: cv.getVar("tabs-vertical-border-width") solid cv.getVar("tabs-vertical-border-color");
 
       > li {
         a {
-          border-right: none;
-          border-left: 2px solid transparent;
+          border-inline-end: none;
+          border-inline-start: 2px solid transparent;
         }
 
         &.#{iv.$class-prefix}is-active a {
-          border-left-color: cv.getVar("link");
-          border-right-color: transparent;
+          border-inline-start-color: cv.getVar("link");
+          border-inline-end-color: transparent;
         }
       }
     }
@@ -168,21 +170,18 @@ $tabs-content-padding: 1rem !default;
 
       > ul {
         flex-direction: row;
-        border-right: none;
-        border-left: none;
+        border-inline: none;
         border-bottom: 1px solid cv.getVar("tabs-vertical-border-color");
 
         > li {
           a {
-            border-right: none;
-            border-left: none;
+            border-inline: none;
             border-bottom: 2px solid transparent;
           }
 
           &.#{iv.$class-prefix}is-active a {
             border-bottom-color: cv.getVar("link");
-            border-right-color: transparent;
-            border-left-color: transparent;
+            border-inline-color: transparent;
           }
         }
       }

package/src/scss/elements/_notification.scss

@@ -1,9 +1,10 @@
 // Notification Styles
 // Bulma already styles the notification; this keeps its text clear of the
-// close button
+// close button, and gives the dark color back its own look
 
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "../color-classes" as *;
 
 // Bulma pads a notification 1.5em at each end and puts its close button 1rem
 // in from the end, 1.25rem square, so the button reaches further in than the
@@ -67,3 +68,31 @@ $-delete-sizes: (
     );
   }
 }
+
+// Bulma nests a light and a dark variant, `&.is-light` and `&.is-dark`, in
+// each color of its notification. For the dark color the dark variant is
+// `.notification.is-dark.is-dark`, and a class repeated in a selector matches
+// an element that has it once, so every dark notification gets it
+// (jgthms/bulma#3911). It sets a 20% background and reads the text's
+// lightness from `--bulma-dark-dark-invert-l`, which Bulma doesn't define, so
+// the text inherits the color around it and can land one shade off the
+// background. Bulma's buttons skip those variants for white, black, light and
+// dark, and its notification doesn't.
+//
+// This puts back the lightness `.notification.is-dark` sets, the dark
+// color's own. The `:not()` skips a notification that carries another color,
+// so Bulma's dark variant of that color (`is-primary is-dark`) keeps its look,
+// and adds a class's weight, so the rule outranks Bulma's whichever
+// stylesheet loads first. `light` isn't in that list, so `color="dark"
+// isLight` gets the dark look too, the way Bulma gives a dark button no light
+// variant. Once Bulma fixes its loop, this restates Bulma's values and can go.
+.#{iv.$class-prefix}notification.#{iv.$class-prefix}is-dark.#{iv.$class-prefix}is-dark:not(
+    #{extras-color-classes("dark", "light")}
+  ) {
+  @include cv.register-vars(
+    (
+      "notification-background-l": #{cv.getVar("dark-l")},
+      "notification-color-l": #{cv.getVar("dark-invert-l")},
+    )
+  );
+}

package/src/scss/form/_combobox.scss

@@ -166,6 +166,18 @@ $combobox-sizes: (
     right: 0;
   }
 
+  // With no `position`, the menu lines up with the field's inline start, so
+  // a menu wider than a field at the start of a right-to-left line doesn't
+  // hang off the screen. A corner the caller names stays physical.
+  // Portaled, the component sets the edge inline instead. `:where()` keeps
+  // this at the corner rules' weight, so a theme's own placement still wins.
+  &.#{iv.$class-prefix}is-start-aligned:where(
+      :not(.#{iv.$class-prefix}is-portal):dir(rtl)
+    ) {
+    left: auto;
+    right: 0;
+  }
+
   // Portaled: fixed to the viewport at the field's edge, which the component
   // sets inline with the field's width, so only the gap comes from here.
   &.#{iv.$class-prefix}is-portal {

package/src/scss/form/_dateinput.scss

@@ -167,7 +167,7 @@ $dateinput-cell-range-preview-bg: color-mix(
 }
 
 // The day names and each week of the grid lay out in seven columns. The
-// grid stacks its weeks, which are rows so it can own them as a grid must.
+// grid stacks them, the day names first, as rows it owns as a grid must.
 .#{iv.$class-prefix}dateinput-day-names,
 .#{iv.$class-prefix}dateinput-week {
   display: grid;

package/src/scss/form/_slider.scss

@@ -643,6 +643,24 @@ $slider-vertical-height: 200px !default;
   .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-range .#{iv.$class-prefix}slider-track {
     forced-color-adjust: none;
   }
+
+  // Forced colors turns the value bubble's fill into the page's and paints
+  // every side of its arrow, which then draws as a square. An outline, not a
+  // border, so the bubble doesn't grow. Only the arrow opts out, so its
+  // transparent sides stay transparent and the side that points, whichever
+  // way the bubble faces, takes the system's text color.
+  .#{iv.$class-prefix}slider-output {
+    outline: 1px solid CanvasText;
+  }
+
+  .#{iv.$class-prefix}slider-output::after {
+    forced-color-adjust: none;
+    @include cv.register-vars(
+      (
+        "slider-output-background": CanvasText,
+      )
+    );
+  }
 }
 
 // Reduced motion

package/src/scss/form/_timeinput.scss

@@ -142,6 +142,13 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
     opacity: 0.55;
     cursor: not-allowed;
   }
+
+  // A read-only wheel turns for nothing, so its items take no pointer: no
+  // hover fill and no hand, and a press lands on the wheel, which takes
+  // focus as a read-only input does.
+  &[aria-readonly='true'] .#{iv.$class-prefix}timeinput-wheel-item {
+    pointer-events: none;
+  }
 }
 
 .#{iv.$class-prefix}timeinput-wheel-item {