@allxsmith/bestax-bulma 5.67.6 → 5.67.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.67.6",
+  "version": "5.67.8",
   "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/_field.scss

@@ -1,8 +1,10 @@
 // Field styles
 // Extends Bulma's own field (`bulma/sass/form/tools`): a horizontal field's
-// message goes under its control.
+// message goes under its control, and its label's text sits against the
+// control on a right-to-left page.
 
 @use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/mixins" as mx;
 
 // A horizontal `Field` wraps its children in `.field-body`, which Bulma makes
 // a flex row from tablet up. A form component that renders a Field of its own
@@ -38,3 +40,16 @@
   > .#{iv.$class-prefix}field:has(+ .#{iv.$class-prefix}help) {
   margin-inline-end: 0;
 }
+
+// From tablet up, Bulma sets a horizontal field's label beside its control
+// and aligns its text `right`, against the control. On a right-to-left page
+// the label sits to the control's right, so `right` pushed its text to the
+// far edge. `end` is `right` left to right, so nothing moves there. The
+// doubled class outranks Bulma's rule whichever stylesheet loads first, and
+// the breakpoint is Bulma's, so a phone's label above its control keeps its
+// start alignment.
+@include mx.tablet {
+  .#{iv.$class-prefix}field-label.#{iv.$class-prefix}field-label {
+    text-align: end;
+  }
+}

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.