@allxsmith/bestax-bulma 5.65.0 → 5.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.65.0",
+  "version": "5.66.0",
   "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/_input-trigger.scss

@@ -8,7 +8,7 @@
 @use 'bulma/sass/utilities/css-variables' as cv;
 @use 'mixins' as *;
 
-// A button over the input's right edge, in Bulma's 2.5em icon slot. Bulma's
+// A button over one edge of the input, in Bulma's 2.5em icon slot. Bulma's
 // Control icons are decorative (`pointer-events: none`), so a button there
 // needs rules of its own. Include it on the element that holds the input and
 // the button, which it positions. A content block, when given, lands in that
@@ -22,25 +22,44 @@
 // every value a theme can change is a registered variable. The color change
 // on hover takes Bulma's duration and easing through `extras-transition`. The
 // button takes the input's `is-small`, `is-medium` or `is-large` font size,
-// so its em-based width tracks the input's.
+// so its em-based width tracks the input's. `$logical` puts the slot on the
+// inline end (the pickers). Left out, it stays on the physical right
+// (PasswordInput).
 @mixin extras-input-trigger(
   $trigger,
   $width,
   $color,
   $hover-color,
-  $disabled-opacity
+  $disabled-opacity,
+  $logical: false
 ) {
   position: relative;
   @content;
 
   > .#{iv.$class-prefix}input {
-    padding-right: $width;
+    @if $logical {
+      padding-inline-end: $width;
+    } @else {
+      padding-right: $width;
+    }
+  }
+
+  // Bulma's `.input.is-rounded` sets its own side padding at two classes,
+  // which ties the rule above. At three this wins whichever sheet loads first.
+  @if $logical {
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-rounded {
+      padding-inline-end: $width;
+    }
   }
 
   > .#{iv.$class-prefix}#{$trigger} {
     position: absolute;
     top: 0;
-    right: 0;
+    @if $logical {
+      inset-inline-end: 0;
+    } @else {
+      right: 0;
+    }
     z-index: 4;
     height: 100%;
     width: $width;

package/src/scss/components/_carousel.scss

@@ -220,6 +220,16 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
     gap: cv.getVar("carousel-item-gap");
     width: 100%;
     will-change: transform;
+    // The flex row reverses right to left, so the inline transform's
+    // negative shift would park every slide off the inline start. The
+    // transform multiplies by this: -1 left to right, +1 right to left. Set
+    // on every track, since a custom property inherits and a left-to-right
+    // carousel inside a right-to-left one would otherwise take its `1`.
+    --carousel-shift-sign: -1;
+
+    &:dir(rtl) {
+      --carousel-shift-sign: 1;
+    }
   }
 
   // Individual slide: an equal share of the track, less the gaps between
@@ -327,11 +337,19 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
     }
 
     &.#{iv.$class-prefix}is-prev {
-      left: cv.getVar("carousel-arrow-offset");
+      inset-inline-start: cv.getVar("carousel-arrow-offset");
     }
 
     &.#{iv.$class-prefix}is-next {
-      right: cv.getVar("carousel-arrow-offset");
+      inset-inline-end: cv.getVar("carousel-arrow-offset");
+    }
+
+    // Previous sits on the inline start, so its chevron points that way.
+    // Only the built-in chevron, the button's own svg: an `iconPrev` or
+    // `iconNext` is the caller's to point, and an svg inside its `.icon`, as
+    // Font Awesome's SVG mode renders, would flip twice under a broader rule.
+    > svg:dir(rtl) {
+      transform: scaleX(-1);
     }
 
     // Transparent variant (no background)
@@ -626,11 +644,11 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
       }
 
       &.#{iv.$class-prefix}is-prev {
-        left: cv.getVar("carousel-arrow-offset-mobile");
+        inset-inline-start: cv.getVar("carousel-arrow-offset-mobile");
       }
 
       &.#{iv.$class-prefix}is-next {
-        right: cv.getVar("carousel-arrow-offset-mobile");
+        inset-inline-end: cv.getVar("carousel-arrow-offset-mobile");
       }
     }
 

package/src/scss/components/_popover.scss

@@ -91,6 +91,17 @@ $popover-animation-duration: 0.15s !default;
   &.#{iv.$class-prefix}is-top-right {
     right: 0;
   }
+  // With no `position`, the panel 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/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;
     }
   }

package/src/scss/form/_dateinput.scss

@@ -154,6 +154,12 @@ $dateinput-cell-range-preview-bg: color-mix(
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  // The row reverses right to left, so the glyph has to as well: previous
+  // month points at the inline start.
+  svg:dir(rtl) {
+    transform: scaleX(-1);
+  }
 }
 
 // The day names and each week of the grid lay out in seven columns. The

package/src/scss/form/_passwordinput.scss

@@ -4,10 +4,10 @@
 // input's right edge, with the date pickers' launcher rule, which the two
 // share through the `extras-input-trigger` mixin.
 //
-// The toggle sits on the physical right, as the pickers' launcher and Bulma's
-// right icon do, so in a right-to-left page it's at the start of the field
-// rather than its end. Moving them to the inline end is one change, for all
-// of them together.
+// The toggle sits on the physical right, as Bulma's right icon does, so in a
+// right-to-left page it's at the start of the field rather than its end. The
+// date pickers' launcher used to share that side and now sits on the inline
+// end; this one stays physical.
 
 @use 'bulma/sass/utilities/initial-variables' as iv;
 @use 'bulma/sass/utilities/css-variables' as cv;
@@ -30,7 +30,8 @@ $password-input-toggle-disabled-opacity: 0.5 !default;
       'password-input-toggle-text-width': #{$password-input-toggle-text-width},
       'password-input-toggle-color': #{$password-input-toggle-color},
       'password-input-toggle-hover-color': #{$password-input-toggle-hover-color},
-      'password-input-toggle-disabled-opacity': #{$password-input-toggle-disabled-opacity},
+      'password-input-toggle-disabled-opacity':
+        #{$password-input-toggle-disabled-opacity},
     )
   );
 }

package/src/scss/form/_picker-popover.scss

@@ -64,6 +64,18 @@ $picker-trigger-disabled-opacity: 0.5 !default;
     right: 0;
     margin-bottom: cv.getVar('picker-popover-offset');
   }
+  // With no `position`, the panel lines up with the field's inline start, so
+  // a field 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 picker
+  // sets the edge inline instead. `:where()` keeps this at the corner rules'
+  // weight, so a rule that moves the panel elsewhere, as TimeInput's
+  // narrow-screen sheet does, still wins.
+  &.#{iv.$class-prefix}is-start-aligned:where(
+      :not(.#{iv.$class-prefix}is-portal):dir(rtl)
+    ) {
+    left: auto;
+    right: 0;
+  }
   // At least as wide as the anchor it's placed against, as a list under a
   // field is. Portaled, the anchor's width comes inline instead, since 100%
   // there would be the viewport's.
@@ -134,12 +146,14 @@ $picker-containers: (
   }
 }
 
-// Right-side launcher button. The picker bases render this real <button>
-// inside their *-container (Bulma's Control icons are decorative —
+// Launcher button on the inline end. The picker bases render this real
+// <button> inside their *-container (Bulma's Control icons are decorative —
 // `pointer-events: none` — so they can't open the popover). It toggles the
 // popover and is keyboard-focusable. Its rules are the `extras-input-trigger`
-// mixin's, which PasswordInput's toggle shares: Bulma's 2.5em icon slot,
-// tracking the input's size modifier through the sibling selector.
+// mixin's, which PasswordInput's toggle shares except the side: the toggle
+// stays on the physical right, and this slot follows the writing direction.
+// Bulma's 2.5em width tracks the input's size modifier through the sibling
+// selector. Left to right the end is the right, as before.
 $picker-trigger-pairs: (
   ('dateinput-container' 'dateinput-trigger'),
   ('timeinput-container' 'timeinput-trigger'),
@@ -153,7 +167,8 @@ $picker-trigger-pairs: (
       $width: cv.getVar('picker-trigger-width'),
       $color: cv.getVar('picker-trigger-color'),
       $hover-color: cv.getVar('picker-trigger-hover-color'),
-      $disabled-opacity: cv.getVar('picker-trigger-disabled-opacity')
+      $disabled-opacity: cv.getVar('picker-trigger-disabled-opacity'),
+      $logical: true
     ) {
       @include cv.register-vars(
         (
@@ -166,3 +181,28 @@ $picker-trigger-pairs: (
     }
   }
 }
+
+// The calendar or clock icon is Bulma's `has-icons-left`, pinned to the
+// physical left with `padding-left`. Moving only the launcher onto the inline
+// end would stack it on that icon right to left, so the icon goes to the
+// inline start with it. Only these containers: a plain Control's icons stay
+// physical. The zeros lose to the logical properties after them, which are
+// the sides Bulma's physical padding was setting left to right.
+@each $container in $picker-containers {
+  .#{iv.$class-prefix}control.#{iv.$class-prefix}has-icons-left
+    > .#{$container}
+    > .#{iv.$class-prefix}input {
+    padding-left: 0;
+    padding-right: 0;
+    padding-inline-start: cv.getVar('input-height');
+    padding-inline-end: cv.getVar('picker-trigger-width');
+  }
+
+  .#{iv.$class-prefix}control.#{iv.$class-prefix}has-icons-left
+    > .#{$container}
+    ~ .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
+    left: auto;
+    right: auto;
+    inset-inline-start: 0;
+  }
+}

package/src/scss/form/_slider.scss

@@ -92,6 +92,17 @@ $slider-vertical-height: 200px !default;
     cv.getVar("slider-track-color") var(--slider-progress, 0%),
     cv.getVar("slider-track-color") 100%
   );
+  // The native range mirrors, so 0% of this gradient is the inline start
+  // (the right), where the minimum sits. `to right` would paint the left.
+  &:dir(rtl) {
+    background: linear-gradient(
+      to left,
+      cv.getVar("slider-fill-color") 0%,
+      cv.getVar("slider-fill-color") var(--slider-progress, 0%),
+      cv.getVar("slider-track-color") var(--slider-progress, 0%),
+      cv.getVar("slider-track-color") 100%
+    );
+  }
   border-radius: cv.getVar("slider-radius");
   outline: none;
   cursor: pointer;
@@ -198,6 +209,11 @@ $slider-vertical-height: 200px !default;
   top: -2rem;
   // Default transform; overridden by inline style when nudge is applied
   transform: translateX(-50%);
+  // The inline transform centres a horizontal bubble on the thumb by this.
+  // It's placed from the inline start, which is its right edge right to
+  // left, so there it shifts the other way. Set on every bubble, so none
+  // takes another slider's.
+  --slider-output-shift: -50%;
   padding: 0.25rem 0.5rem;
   font-size: cv.getVar("slider-output-font-size");
   font-weight: cv.getVar("slider-output-font-weight");
@@ -212,6 +228,10 @@ $slider-vertical-height: 200px !default;
   transition-duration: cv.getVar("slider-transition-duration");
   transition-timing-function: ease;
 
+  &:dir(rtl) {
+    --slider-output-shift: 50%;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -268,6 +288,12 @@ $slider-vertical-height: 200px !default;
 .#{iv.$class-prefix}slider-tick {
   position: absolute;
   transform: translateX(-50%);
+
+  // The inline start edge is the right one right to left, so centering
+  // shifts the other way. A vertical tick replaces this transform.
+  &:dir(rtl) {
+    transform: translateX(50%);
+  }
   width: cv.getVar("slider-tick-width");
   height: cv.getVar("slider-tick-height");
   background: cv.getVar("slider-tick-color");
@@ -318,6 +344,19 @@ $slider-vertical-height: 200px !default;
       cv.getVar("slider-track-color") var(--slider-progress-high, 100%),
       cv.getVar("slider-track-color") 100%
     );
+    // Same mirror as the single thumb: the stops are measured from the
+    // inline start, which is the right when the page is.
+    &:dir(rtl) {
+      background: linear-gradient(
+        to left,
+        cv.getVar("slider-track-color") 0%,
+        cv.getVar("slider-track-color") var(--slider-progress-low, 0%),
+        cv.getVar("slider-fill-color") var(--slider-progress-low, 0%),
+        cv.getVar("slider-fill-color") var(--slider-progress-high, 100%),
+        cv.getVar("slider-track-color") var(--slider-progress-high, 100%),
+        cv.getVar("slider-track-color") 100%
+      );
+    }
     pointer-events: none;
   }