@allxsmith/bestax-bulma 5.64.0 → 5.65.1

package/package.json

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

@@ -13,6 +13,7 @@
 @use 'toast';
 @use 'dialog';
 @use 'carousel';
+@use 'lightbox';
 @use 'tabs';
 @use 'menu';
 @use 'tableofcontents';

package/src/scss/components/_lightbox.scss

@@ -0,0 +1,392 @@
+// Bestax Extras - Lightbox Styles
+// Bulma's image modal, finished: `.modal` with its near-black background and
+// `.modal-close.is-large`, the image centred as large as the viewer allows,
+// a bar along the top with the counter and the zoom buttons, round previous
+// and next buttons at the inline edges, and the caption under the image.
+//
+// The root carries both `modal` and `lightbox`, so these rules outrank
+// Bulma's `.modal` ones in either stylesheet order. The space around the
+// image takes no pointer events, so a click there lands on
+// `.modal-background`, which closes the viewer.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// Carousel's overlay arrows, light controls on a dark tint in either scheme.
+// The same values rather than an `@use` of `_carousel.scss`, which would put
+// the carousel's whole stylesheet into a modular build that asks only for
+// this one.
+$lightbox-arrow-background: hsla(
+  #{cv.getVar('scheme-h')},
+  #{cv.getVar('scheme-s')},
+  #{cv.getVar('scheme-invert-l')},
+  0.3
+) !default;
+$lightbox-arrow-background-hover: hsla(
+  #{cv.getVar('scheme-h')},
+  #{cv.getVar('scheme-s')},
+  #{cv.getVar('scheme-invert-l')},
+  0.5
+) !default;
+$lightbox-arrow-color: cv.getVar('white') !default;
+$lightbox-arrow-size: 3rem !default;
+$lightbox-arrow-offset: 1rem !default;
+$lightbox-arrow-icon-size: 1.5rem !default;
+// The zoom buttons in the toolbar start from the arrows' look.
+$lightbox-toolbar-button-background: cv.getVar(
+  'lightbox-arrow-background'
+) !default;
+$lightbox-toolbar-button-background-hover: cv.getVar(
+  'lightbox-arrow-background-hover'
+) !default;
+$lightbox-toolbar-icon-size: 1.25rem !default;
+// The round buttons' border, transparent until forced colors draws it.
+$lightbox-button-border-width: 1px !default;
+// A button that does nothing at an end, or at a zoom limit.
+$lightbox-disabled-opacity: 0.4 !default;
+// The close button, the toolbar and the arrows sit over the image.
+$lightbox-controls-z-index: $extras-z-index-base !default;
+// The modal's background stays near-black in Bulma's dark theme too, so the
+// text on it is white in both.
+$lightbox-toolbar-color: cv.getVar('white') !default;
+$lightbox-toolbar-gap: 0.75rem !default;
+$lightbox-caption-color: cv.getVar('white') !default;
+$lightbox-caption-max-width: 40em !default;
+$lightbox-caption-padding: 0.75rem 1rem 0 !default;
+// A failed image's message and Retry, where the image would be.
+$lightbox-error-color: cv.getVar('lightbox-caption-color') !default;
+$lightbox-error-gap: 0.75rem !default;
+$lightbox-error-padding: 1rem !default;
+$lightbox-loader-size: 2.5rem !default;
+// The band kept free above the image for the toolbar and the close button,
+// and below it, so the image stays centred.
+$lightbox-spacing: 4.5rem !default;
+// The image and its caption share the viewer's height less the two bands.
+$lightbox-image-max-height: calc(
+  100% - 2 * #{cv.getVar('lightbox-spacing')}
+) !default;
+// The fades and the zoom, timed and eased as Bulma's own transitions are.
+$lightbox-animation-duration: cv.getVar('duration') !default;
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox {
+  @include cv.register-vars(
+    (
+      'lightbox-arrow-background': #{$lightbox-arrow-background},
+      'lightbox-arrow-background-hover': #{$lightbox-arrow-background-hover},
+      'lightbox-arrow-color': #{$lightbox-arrow-color},
+      'lightbox-arrow-size': #{$lightbox-arrow-size},
+      'lightbox-arrow-offset': #{$lightbox-arrow-offset},
+      'lightbox-arrow-icon-size': #{$lightbox-arrow-icon-size},
+      'lightbox-toolbar-button-background':
+        #{$lightbox-toolbar-button-background},
+      'lightbox-toolbar-button-background-hover':
+        #{$lightbox-toolbar-button-background-hover},
+      'lightbox-toolbar-icon-size': #{$lightbox-toolbar-icon-size},
+      'lightbox-button-border-width': #{$lightbox-button-border-width},
+      'lightbox-disabled-opacity': #{$lightbox-disabled-opacity},
+      'lightbox-controls-z-index': #{$lightbox-controls-z-index},
+      'lightbox-toolbar-color': #{$lightbox-toolbar-color},
+      'lightbox-toolbar-gap': #{$lightbox-toolbar-gap},
+      'lightbox-caption-color': #{$lightbox-caption-color},
+      'lightbox-caption-max-width': #{$lightbox-caption-max-width},
+      'lightbox-caption-padding': #{$lightbox-caption-padding},
+      'lightbox-error-color': #{$lightbox-error-color},
+      'lightbox-error-gap': #{$lightbox-error-gap},
+      'lightbox-error-padding': #{$lightbox-error-padding},
+      'lightbox-loader-size': #{$lightbox-loader-size},
+      'lightbox-spacing': #{$lightbox-spacing},
+      'lightbox-image-max-height': #{$lightbox-image-max-height},
+      'lightbox-animation-duration': #{$lightbox-animation-duration},
+      // Bulma's own, wide enough for the image with room for the arrows at
+      // either side, in place of its 40rem.
+      'modal-content-width': calc(
+          100% - 2 *
+            (
+              #{cv.getVar('lightbox-arrow-size')} + 2 *
+                #{cv.getVar('lightbox-arrow-offset')}
+            )
+        ),
+    )
+  );
+}
+
+// ---- The viewer ---------------------------------------------------------------
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox.#{iv.$class-prefix}is-active {
+  animation: extras-fade-in cv.getVar('lightbox-animation-duration')
+    $extras-easing;
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox:focus {
+  outline: none;
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  > .#{iv.$class-prefix}modal-close {
+  z-index: cv.getVar('lightbox-controls-z-index');
+}
+
+// The image's area: the viewer's width less the arrows' room from a tablet
+// up, and its whole width below, where the arrows sit over the image.
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  > .#{iv.$class-prefix}modal-content {
+  height: cv.getVar('lightbox-image-max-height');
+  max-height: none;
+  margin: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+// ---- The toolbar ----------------------------------------------------------------
+
+.#{iv.$class-prefix}lightbox-toolbar {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: cv.getVar('lightbox-controls-z-index');
+  display: flex;
+  align-items: center;
+  gap: cv.getVar('lightbox-toolbar-gap');
+  min-height: cv.getVar('lightbox-spacing');
+  // Level with the close button, and clear of it.
+  padding-block: cv.getVar('modal-close-top');
+  padding-inline: cv.getVar('modal-close-right')
+    calc(
+      #{cv.getVar('modal-close-right')} * 2 +
+        #{cv.getVar('modal-close-dimensions')}
+    );
+  color: cv.getVar('lightbox-toolbar-color');
+  pointer-events: none;
+
+  > .#{iv.$class-prefix}buttons {
+    flex-wrap: nowrap;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+  }
+}
+
+.#{iv.$class-prefix}lightbox-progress {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+// ---- The buttons over the dark background ------------------------------------------
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-toolbar
+  .#{iv.$class-prefix}button,
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-arrow {
+  align-items: center;
+  justify-content: center;
+  width: cv.getVar('modal-close-dimensions');
+  height: cv.getVar('modal-close-dimensions');
+  padding: 0;
+  // Transparent until forced colors draws it.
+  border: cv.getVar('lightbox-button-border-width') solid transparent;
+  border-radius: cv.getVar('radius-rounded');
+  pointer-events: auto;
+
+  // Bulma's ring is a link-colored shadow, under 3:1 on the near-black
+  // background and gone in forced colors, so an outline in the buttons' own
+  // color takes its place.
+  &:focus-visible {
+    @include extras-focus-outline;
+    outline-color: currentColor;
+    box-shadow: none;
+  }
+
+  &[aria-disabled='true'] {
+    opacity: cv.getVar('lightbox-disabled-opacity');
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-toolbar
+  .#{iv.$class-prefix}button {
+  background-color: cv.getVar('lightbox-toolbar-button-background');
+  color: cv.getVar('lightbox-toolbar-color');
+
+  &:hover:not([aria-disabled='true']) {
+    background-color: cv.getVar('lightbox-toolbar-button-background-hover');
+  }
+
+  svg {
+    width: cv.getVar('lightbox-toolbar-icon-size');
+    height: cv.getVar('lightbox-toolbar-icon-size');
+  }
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-arrow {
+  position: absolute;
+  inset-block-start: 50%;
+  z-index: cv.getVar('lightbox-controls-z-index');
+  width: cv.getVar('lightbox-arrow-size');
+  height: cv.getVar('lightbox-arrow-size');
+  transform: translateY(-50%);
+  background-color: cv.getVar('lightbox-arrow-background');
+  color: cv.getVar('lightbox-arrow-color');
+
+  &:hover:not([aria-disabled='true']) {
+    background-color: cv.getVar('lightbox-arrow-background-hover');
+  }
+
+  &.#{iv.$class-prefix}is-prev {
+    inset-inline-start: cv.getVar('lightbox-arrow-offset');
+  }
+
+  &.#{iv.$class-prefix}is-next {
+    inset-inline-end: cv.getVar('lightbox-arrow-offset');
+  }
+
+  svg {
+    width: cv.getVar('lightbox-arrow-icon-size');
+    height: cv.getVar('lightbox-arrow-icon-size');
+  }
+
+  // Right to left, the previous button is on the right, so its chevron
+  // points that way.
+  svg:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}
+
+// ---- The image and its caption -----------------------------------------------------
+
+// One cell the image fills, with the caption under it. The image, the one
+// fading out over it, the Loader and the error share the cell.
+.#{iv.$class-prefix}lightbox-figure {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  height: 100%;
+  margin: 0;
+  position: relative;
+  transition: transform cv.getVar('lightbox-animation-duration') $extras-easing;
+
+  > :not(.#{iv.$class-prefix}lightbox-caption) {
+    grid-area: 1 / 1;
+    place-self: center;
+  }
+}
+
+.#{iv.$class-prefix}lightbox-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  pointer-events: auto;
+  // Pinch zooms the image rather than the page, and a drag pans it.
+  touch-action: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform cv.getVar('lightbox-animation-duration') $extras-easing;
+
+  // Hidden until it loads, then faded in.
+  &.#{iv.$class-prefix}is-loading {
+    opacity: 0;
+  }
+
+  &:not(.#{iv.$class-prefix}is-loading):not(.#{iv.$class-prefix}is-leaving) {
+    animation: extras-fade-in cv.getVar('lightbox-animation-duration')
+      $extras-easing;
+  }
+
+  // The image before it, on top, shown until the new one has loaded and then
+  // faded out as that one fades in. Animations rather than transitions, so
+  // the fades run for an image that was already loaded too.
+  &.#{iv.$class-prefix}is-leaving {
+    pointer-events: none;
+  }
+
+  &:not(.#{iv.$class-prefix}is-loading)
+    + .#{iv.$class-prefix}lightbox-image.#{iv.$class-prefix}is-leaving {
+    animation: extras-fade-out cv.getVar('lightbox-animation-duration')
+      $extras-easing forwards;
+  }
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox.#{iv.$class-prefix}is-zoomed
+  .#{iv.$class-prefix}lightbox-image {
+  cursor: grab;
+}
+
+.#{iv.$class-prefix}lightbox-caption {
+  justify-self: center;
+  max-width: cv.getVar('lightbox-caption-max-width');
+  padding: cv.getVar('lightbox-caption-padding');
+  color: cv.getVar('lightbox-caption-color');
+  text-align: center;
+  pointer-events: auto;
+}
+
+.#{iv.$class-prefix}lightbox-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: cv.getVar('lightbox-error-gap');
+  padding: cv.getVar('lightbox-error-padding');
+  color: cv.getVar('lightbox-error-color');
+  text-align: center;
+  pointer-events: auto;
+}
+
+.#{iv.$class-prefix}lightbox-figure > .#{iv.$class-prefix}loader {
+  font-size: cv.getVar('lightbox-loader-size');
+}
+
+// ---- The trigger ----------------------------------------------------------------------
+
+// A button around a thumbnail, drawn as the thumbnail: no button chrome, as
+// wide as the column or cell it's in, since a ratio `Image` has no width of
+// its own, and an outline around what it holds. `:where()` keeps all of it
+// at no specificity, so a trigger given Bulma's `button` class looks and
+// sizes like a Bulma button instead.
+:where(.#{iv.$class-prefix}lightbox-trigger) {
+  @include extras-button-reset;
+  text-align: inherit;
+}
+
+:where(.#{iv.$class-prefix}lightbox-trigger:not(.#{iv.$class-prefix}button)) {
+  display: block;
+  width: 100%;
+
+  &:focus-visible {
+    @include extras-focus-outline;
+  }
+}
+
+// ---- Motion and forced colors ------------------------------------------------------------
+
+// The fades are on selectors more specific than these, hence `!important`.
+// Script keeps no outgoing image under reduced motion either.
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox.#{iv.$class-prefix}is-active,
+  .#{iv.$class-prefix}lightbox-image {
+    animation: none !important;
+  }
+
+  .#{iv.$class-prefix}lightbox-figure,
+  .#{iv.$class-prefix}lightbox-image {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+    .#{iv.$class-prefix}lightbox-toolbar
+    .#{iv.$class-prefix}button,
+  .#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+    .#{iv.$class-prefix}lightbox-arrow {
+    border-color: ButtonText;
+
+    &[aria-disabled='true'] {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+}

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;
     }
   }