@allxsmith/bestax-bulma 5.67.5 → 5.67.7

package/package.json

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

package/src/scss/components/_carousel.scss

@@ -619,8 +619,9 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
   }
 }
 
-// Responsive adjustments
-@media screen and (max-width: 768px) {
+// Responsive adjustments, below Bulma's tablet breakpoint, so a build that
+// moves `$tablet` moves them too
+@include mx.mobile {
   .#{iv.$class-prefix}carousel {
     .#{iv.$class-prefix}carousel-arrow {
       width: cv.getVar("carousel-arrow-size-mobile");

package/src/scss/components/_sidebar.scss

@@ -3,6 +3,7 @@
 
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
 @use '../variables' as *;
 @use '../mixins' as *;
 
@@ -283,8 +284,10 @@ $sidebar-static-border-color: cv.getVar("border") !default;
   }
 }
 
-// Responsive breakpoints
-@include extras-tablet {
+// Responsive breakpoints, from Bulma's tablet breakpoint, so a build that
+// moves `$tablet` moves them too. Screens only, as before: Bulma's own tablet
+// mixin also reaches print.
+@include mx.from(iv.$tablet) {
   .#{iv.$class-prefix}sidebar {
     @include cv.register-vars(("sidebar-width": #{$sidebar-width-tablet}));
   }

package/src/scss/components/_steps.scss

@@ -3,6 +3,7 @@
 
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
 @use '../variables' as *;
 @use '../mixins' as *;
 
@@ -451,8 +452,9 @@ button.#{iv.$class-prefix}steps-link {
   margin-top: cv.getVar("steps-navigation-margin-top");
 }
 
-// Mobile modes
-@include extras-mobile {
+// Mobile modes, below Bulma's tablet breakpoint, so a build that moves
+// `$tablet` moves them too
+@include mx.mobile {
   .#{iv.$class-prefix}steps.#{iv.$class-prefix}is-minimal {
     .#{iv.$class-prefix}steps-content {
       display: none;

package/src/scss/components/_tabs.scss

@@ -4,6 +4,7 @@
 
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
 @use '../variables' as *;
 @use '../mixins' as *;
 
@@ -130,23 +131,28 @@ $tabs-content-padding: 1rem !default;
   }
 
   // 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;
+  // end of the row and the edge moves to their start. From tablet up only,
+  // where the tabs sit beside the panel: these rules name one class more than
+  // the phone fallback below, so on a phone they would keep the row and the
+  // side edge.
+  @include mx.tablet {
+    &.#{iv.$class-prefix}is-right {
+      flex-direction: row-reverse;
+
+      > .#{iv.$class-prefix}tabs > ul {
+        border-inline-end: none;
+        border-inline-start: cv.getVar("tabs-vertical-border-width") solid cv.getVar("tabs-vertical-border-color");
 
-    > .#{iv.$class-prefix}tabs > ul {
-      border-inline-end: none;
-      border-inline-start: cv.getVar("tabs-vertical-border-width") solid cv.getVar("tabs-vertical-border-color");
-
-      > li {
-        a {
-          border-inline-end: none;
-          border-inline-start: 2px solid transparent;
-        }
+        > li {
+          a {
+            border-inline-end: none;
+            border-inline-start: 2px solid transparent;
+          }
 
-        &.#{iv.$class-prefix}is-active a {
-          border-inline-start-color: cv.getVar("link");
-          border-inline-end-color: transparent;
+          &.#{iv.$class-prefix}is-active a {
+            border-inline-start-color: cv.getVar("link");
+            border-inline-end-color: transparent;
+          }
         }
       }
     }
@@ -160,8 +166,10 @@ $tabs-content-padding: 1rem !default;
   }
 }
 
-// Mobile fallback — vertical tabs stack to horizontal
-@include extras-mobile {
+// Mobile fallback — vertical tabs stack to horizontal. Bulma's mobile query,
+// which ends where its tablet query above starts, whatever `$tablet` a build
+// configures, so a width gets one layout or the other.
+@include mx.mobile {
   .#{iv.$class-prefix}tabs-root.#{iv.$class-prefix}is-vertical {
     flex-direction: column;
 

package/src/scss/form/_slider.scss

@@ -600,7 +600,46 @@ $slider-vertical-height: 200px !default;
 
 // High Contrast Mode support
 @media (forced-colors: active) {
+  // The track and the fill are a gradient, which forced colors drops, so a
+  // single-thumb slider showed only its thumb. The element that paints them
+  // opts out and paints them in the system's colors: the fill in Highlight,
+  // the rest of the track in CanvasText, and both in GrayText while
+  // disabled. The range slider's track paints the same gradient and had
+  // opted out with its own colors, so it takes these too.
+  .#{iv.$class-prefix}slider-input,
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-range .#{iv.$class-prefix}slider-track {
+    forced-color-adjust: none;
+    @include cv.register-vars(
+      (
+        "slider-fill-color": Highlight,
+        "slider-track-color": CanvasText,
+      )
+    );
+  }
+
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-disabled .#{iv.$class-prefix}slider-input,
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-disabled.#{iv.$class-prefix}is-range .#{iv.$class-prefix}slider-track {
+    @include cv.register-vars(
+      (
+        "slider-fill-color": GrayText,
+        "slider-track-color": GrayText,
+      )
+    );
+  }
+
   .#{iv.$class-prefix}slider-input {
+    // The opt-out reaches the thumb too, and forced colors would have
+    // dropped its shadows, the focus ring's included. Its border shows focus.
+    &::-webkit-slider-thumb,
+    &:focus::-webkit-slider-thumb {
+      box-shadow: none;
+    }
+
+    &::-moz-range-thumb,
+    &:focus::-moz-range-thumb {
+      box-shadow: none;
+    }
+
     &::-webkit-slider-thumb {
       background: ButtonText;
       border-color: ButtonText;
@@ -611,6 +650,17 @@ $slider-vertical-height: 200px !default;
       border-color: ButtonText;
     }
 
+    // Hover would paint the border from the fill color, Highlight here, the
+    // same as focus. It keeps the rest color, and focus, later, still wins. A
+    // disabled thumb's rule below outranks both.
+    &::-webkit-slider-thumb:hover {
+      border-color: ButtonText;
+    }
+
+    &::-moz-range-thumb:hover {
+      border-color: ButtonText;
+    }
+
     &:focus::-webkit-slider-thumb {
       border-color: Highlight;
     }

package/src/scss/form/_timeinput.scss

@@ -285,6 +285,8 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
 // feel. Item *height* is set inline by JS, and made taller on small viewports by
 // the component; the rules below adjust everything that's CSS-only (font size,
 // wheel width, gap, separator, mask intensity).
+// Fixed at 768px rather than Bulma's `$tablet`: it must match
+// `smallViewportMaxPx` in `useNativeMobilePicker`, which sets the item height.
 @media (max-width: 768px) {
   // Registered through `cv.register-vars` like the defaults above, so the
   // overrides land on the names the rules read.