@allxsmith/bestax-bulma 5.62.0 → 5.64.0

package/src/scss/CLAUDE.md

@@ -16,6 +16,9 @@ of their own — Bulma provides it. A partial exists only for components that ex
   It loads no Bulma module, since tests compile it with only this folder on the load path
 - `_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`
+- `_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
 - `versions/` — the flavor builds: `bestax-prefixed`, `bestax-no-helpers`, `bestax-no-dark-mode`,
   `bestax-no-helpers-prefixed`. A new partial is included by all of them automatically (they reuse
   the same `_index` imports), but must **work** under each — especially the prefixed build.

package/src/scss/_input-trigger.scss

@@ -0,0 +1,76 @@
+// Bestax Extras - a button inside an input
+// The rule the date and time pickers' launcher and PasswordInput's toggle
+// share, so the two can't drift apart. It reads Bulma's class prefix and
+// variables, so it lives here rather than in `_mixins.scss`, which compiles
+// with no Bulma to load, and it emits nothing until it's included.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@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
+// 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
+// element's own rule, after its `position`: the pickers register the
+// variables they pass in there.
+//
+// `$trigger` is the button's class, without the prefix. `$width` is the slot,
+// which the input keeps as padding so typed text never slides under the
+// button; `$color` and `$hover-color` are the button's, and
+// `$disabled-opacity` a disabled one's. Each is usually a `cv.getVar()`, so
+// 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.
+@mixin extras-input-trigger(
+  $trigger,
+  $width,
+  $color,
+  $hover-color,
+  $disabled-opacity
+) {
+  position: relative;
+  @content;
+
+  > .#{iv.$class-prefix}input {
+    padding-right: $width;
+  }
+
+  > .#{iv.$class-prefix}#{$trigger} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    height: 100%;
+    width: $width;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: $color;
+    cursor: pointer;
+    @include extras-transition(color);
+
+    .#{iv.$class-prefix}icon {
+      pointer-events: none;
+    }
+
+    &:hover:not(:disabled) {
+      color: $hover-color;
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: $disabled-opacity;
+    }
+  }
+
+  @each $size in 'small', 'medium', 'large' {
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-#{$size}
+      ~ .#{iv.$class-prefix}#{$trigger} {
+      font-size: cv.getVar('size-#{$size}');
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -15,6 +15,7 @@
 @use 'carousel';
 @use 'tabs';
 @use 'menu';
+@use 'tableofcontents';
 @use 'reveal';
 @use 'avatar';
 @use 'avatars';

package/src/scss/components/_tableofcontents.scss

@@ -0,0 +1,42 @@
+// Bestax Extras - TableOfContents Styles
+// A table of contents is Bulma's menu as it is: `.menu` on its `<nav>`, a
+// `.menu-label` title, `.menu-list` links and `is-active` on the current one,
+// so every `--bulma-menu-*` variable themes it. This adds only the opt-in
+// sticky position, for a column that doesn't stick by itself.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// How far below the viewport's top a sticky list stops. Under a fixed
+// navbar, make it the navbar's height plus this.
+$table-of-contents-sticky-top: cv.getVar('block-spacing') !default;
+
+.#{iv.$class-prefix}table-of-contents {
+  @include cv.register-vars(
+    (
+      'table-of-contents-sticky-top': #{$table-of-contents-sticky-top},
+    )
+  );
+}
+
+// Bulma's focus ring, which sits this far outside a link.
+$-focus-ring: calc(#{cv.getVar('focus-width')} + #{cv.getVar('focus-offset')});
+
+// It stays in view as the page scrolls, and a list taller than the room left
+// below its top scrolls itself, so its end can still be reached. The room is
+// measured in `dvh`, the viewport as it is now, so a phone's toolbar doesn't
+// cover the list's end, and in `vh` where `dvh` isn't known. Scrolling clips
+// what's outside it, so it keeps room around it for a link's focus ring, at
+// the sides and above the first link and below the last, and gives that room
+// back with a margin, so the links stay where they are.
+.#{iv.$class-prefix}table-of-contents.#{iv.$class-prefix}is-sticky {
+  margin-block: calc(-1 * #{$-focus-ring});
+  margin-inline: calc(-1 * #{$-focus-ring});
+  max-height: calc(100vh - #{cv.getVar('table-of-contents-sticky-top')});
+  max-height: calc(100dvh - #{cv.getVar('table-of-contents-sticky-top')});
+  overflow-y: auto;
+  padding-block: $-focus-ring;
+  padding-inline: $-focus-ring;
+  position: sticky;
+  top: cv.getVar('table-of-contents-sticky-top');
+}

package/src/scss/elements/_index.scss

@@ -13,3 +13,4 @@
 @use 'progress';
 @use 'ringprogress';
 @use 'skeleton';
+@use 'stat';

package/src/scss/elements/_stat.scss

@@ -0,0 +1,153 @@
+// Bestax Extras - Stat Styles
+// A figure with its name, and often a change and a note, as a description
+// list: a `<dt>` for the label and a `<dd>` each for the figure, the change
+// and the note. A Stat is a `<div>` in a `Stats` row's `<dl>`, or a `<dl>` of
+// its own. `Stats` is Bulma's `.grid`, which lays the row out, so all it
+// needs here is the list's margins reset; this sets the type.
+//
+// Each part stacks under the one before, in the order it's written. The
+// figure takes the Stat's color, so a `textColor` on the Stat colors it,
+// while the label, the change and the note set their own. A `color` on the
+// change sets its color to that color's `-on-scheme` variant, which Bulma
+// darkens or lightens until it reads as text on the scheme's background. Forced colors replaces every color with the system's, which
+// drops the tone, and the sign in the text and the arrow, drawn in
+// `currentColor`, remain.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$stat-label-color: cv.getVar('text-weak') !default;
+$stat-label-size: cv.getVar('size-7') !default;
+$stat-value-color: cv.getVar('text-strong') !default;
+$stat-value-size: cv.getVar('size-3') !default;
+$stat-value-size-small: cv.getVar('size-4') !default;
+$stat-value-size-medium: cv.getVar('size-2') !default;
+$stat-value-size-large: cv.getVar('size-1') !default;
+$stat-value-weight: cv.getVar('weight-semibold') !default;
+// Bulma's title line height, tight for large figures.
+$stat-value-line-height: 1.125 !default;
+$stat-change-color: cv.getVar('text') !default;
+$stat-change-size: cv.getVar('size-7') !default;
+// Between the arrow and the number.
+$stat-change-gap: 0.25em !default;
+$stat-description-color: cv.getVar('text-weak') !default;
+$stat-description-size: cv.getVar('size-7') !default;
+
+.#{iv.$class-prefix}stat {
+  @include cv.register-vars(
+    (
+      'stat-label-color': #{$stat-label-color},
+      'stat-label-size': #{$stat-label-size},
+      'stat-value-color': #{$stat-value-color},
+      'stat-value-size': #{$stat-value-size},
+      'stat-value-weight': #{$stat-value-weight},
+      'stat-value-line-height': #{$stat-value-line-height},
+      'stat-change-color': #{$stat-change-color},
+      'stat-change-size': #{$stat-change-size},
+      'stat-change-gap': #{$stat-change-gap},
+      'stat-description-color': #{$stat-description-color},
+      'stat-description-size': #{$stat-description-size},
+    )
+  );
+}
+
+@each $size,
+  $value
+    in (
+      'small': $stat-value-size-small,
+      'medium': $stat-value-size-medium,
+      'large': $stat-value-size-large
+    )
+{
+  .#{iv.$class-prefix}stat.#{iv.$class-prefix}is-#{$size} {
+    @include cv.register-vars(
+      (
+        'stat-value-size': #{$value},
+      )
+    );
+  }
+}
+
+// ---- The row and the Stat ----------------------------------------------------
+
+.#{iv.$class-prefix}stats {
+  margin-inline: 0;
+  margin-block-start: 0;
+}
+
+.#{iv.$class-prefix}stat {
+  margin: 0;
+  // On the root, so a `textColor` helper's class outranks it and the figure
+  // inherits either.
+  color: cv.getVar('stat-value-color');
+
+  // A Stat on its own is a block, as Bulma spaces its blocks.
+  &:not(:last-child) {
+    margin-bottom: cv.getVar('block-spacing');
+  }
+}
+
+// In a row the grid's gap spaces the tiles.
+.#{iv.$class-prefix}stats > .#{iv.$class-prefix}stat {
+  margin-bottom: 0;
+}
+
+// ---- The parts -------------------------------------------------------------------
+
+// Each through the root, so it outranks Bulma's `.content dd` indent.
+.#{iv.$class-prefix}stat .#{iv.$class-prefix}stat-label {
+  margin: 0;
+  color: cv.getVar('stat-label-color');
+  font-size: cv.getVar('stat-label-size');
+}
+
+.#{iv.$class-prefix}stat .#{iv.$class-prefix}stat-value {
+  margin: 0;
+  font-size: cv.getVar('stat-value-size');
+  font-weight: cv.getVar('stat-value-weight');
+  line-height: cv.getVar('stat-value-line-height');
+  // Digits of one width, so a figure that updates doesn't shift.
+  font-variant-numeric: tabular-nums;
+  // A long figure wraps rather than widen its tile.
+  overflow-wrap: anywhere;
+}
+
+// `loading`'s Skeleton, and a figure's `<dd>` still waiting for its value,
+// are one line of the figure tall, so the tile is as tall as its neighbours
+// and keeps its height when the figure arrives.
+.#{iv.$class-prefix}stat .#{iv.$class-prefix}stat-value:empty,
+.#{iv.$class-prefix}stat
+  .#{iv.$class-prefix}stat-value
+  > .#{iv.$class-prefix}skeleton-block {
+  min-height: 1lh;
+}
+
+.#{iv.$class-prefix}stat .#{iv.$class-prefix}stat-change {
+  display: flex;
+  align-items: center;
+  gap: cv.getVar('stat-change-gap');
+  margin: 0;
+  color: cv.getVar('stat-change-color');
+  font-size: cv.getVar('stat-change-size');
+  font-variant-numeric: tabular-nums;
+
+  > svg {
+    flex: none;
+  }
+}
+
+// The change's colors, set on the change itself, so `--bulma-stat-change-color`
+// stays the uncolored change's. A theme moves these tones through Bulma's own
+// `-on-scheme` colors.
+@each $name in 'primary', 'link', 'info', 'success', 'warning', 'danger' {
+  .#{iv.$class-prefix}stat
+    .#{iv.$class-prefix}stat-change.#{iv.$class-prefix}is-#{$name} {
+    color: cv.getVar('#{$name}-on-scheme');
+  }
+}
+
+.#{iv.$class-prefix}stat .#{iv.$class-prefix}stat-description {
+  margin: 0;
+  color: cv.getVar('stat-description-color');
+  font-size: cv.getVar('stat-description-size');
+}

package/src/scss/form/_index.scss

@@ -24,5 +24,6 @@
 @use 'dropzone';
 @use 'colorpicker';
 @use 'colorinput';
+@use 'passwordinput';
 @use 'fieldset';
 @use 'field';

package/src/scss/form/_passwordinput.scss

@@ -0,0 +1,112 @@
+// Bestax Extras - PasswordInput Styles
+// A password field with a button inside it that shows what was typed. Bulma's
+// Control icons take no clicks, so the toggle is a real button laid over the
+// 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.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../mixins' as *;
+@use '../input-trigger' as *;
+
+// The toggle's room, in em so it tracks the input's size, as Bulma's icon
+// slot does. The words need more room than the eye; a longer translation
+// sets its own.
+$password-input-toggle-width: 2.5em !default;
+$password-input-toggle-text-width: 4.5em !default;
+$password-input-toggle-color: cv.getVar('text') !default;
+$password-input-toggle-hover-color: cv.getVar('text-strong') !default;
+$password-input-toggle-disabled-opacity: 0.5 !default;
+
+.#{iv.$class-prefix}password-input-container {
+  @include cv.register-vars(
+    (
+      'password-input-toggle-width': #{$password-input-toggle-width},
+      '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},
+    )
+  );
+}
+
+.#{iv.$class-prefix}password-input-container {
+  @include extras-input-trigger(
+    $trigger: 'password-input-toggle',
+    $width: cv.getVar('password-input-toggle-width'),
+    $color: cv.getVar('password-input-toggle-color'),
+    $hover-color: cv.getVar('password-input-toggle-hover-color'),
+    $disabled-opacity: cv.getVar('password-input-toggle-disabled-opacity')
+  );
+
+  // Bulma gives a rounded input its own side padding at two classes, which
+  // ties the rule above; at three this wins whichever sheet loads first.
+  > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-rounded {
+    padding-right: cv.getVar('password-input-toggle-width');
+  }
+
+  &.#{iv.$class-prefix}is-text {
+    > .#{iv.$class-prefix}input,
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-rounded {
+      padding-right: cv.getVar('password-input-toggle-text-width');
+    }
+
+    > .#{iv.$class-prefix}password-input-toggle {
+      width: cv.getVar('password-input-toggle-text-width');
+    }
+  }
+
+  > .#{iv.$class-prefix}password-input-toggle {
+    // The input's own size, which the size modifiers above change, wherever
+    // the field sits; a button otherwise takes the text's around it.
+    font-family: inherit;
+    font-size: cv.getVar('size-normal');
+    line-height: 1;
+
+    &:focus-visible {
+      @include extras-focus-outline;
+    }
+  }
+
+  // Edge draws its own reveal button in a password field, which would make
+  // two.
+  > .#{iv.$class-prefix}input::-ms-reveal {
+    display: none;
+  }
+}
+
+// Bulma sizes and colors a left icon from the input beside it
+// (`.input.is-small ~ .icon`). Here the input sits one level down, in the
+// container, so these say the same from the container.
+.#{iv.$class-prefix}control.#{iv.$class-prefix}has-icons-left
+  > .#{iv.$class-prefix}password-input-container {
+  @each $size in 'small', 'medium', 'large' {
+    &:has(> .#{iv.$class-prefix}input.#{iv.$class-prefix}is-#{$size})
+      ~ .#{iv.$class-prefix}icon {
+      font-size: cv.getVar('size-#{$size}');
+    }
+  }
+
+  &:has(> .#{iv.$class-prefix}input:hover) ~ .#{iv.$class-prefix}icon {
+    color: cv.getVar('input-icon-hover-color');
+  }
+
+  &:has(> .#{iv.$class-prefix}input:focus) ~ .#{iv.$class-prefix}icon {
+    color: cv.getVar('input-icon-focus-color');
+  }
+}
+
+// In forced colors the toggle's glyph and words take the system's button
+// text, and a disabled one the system's gray, as a native button's do.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}password-input-container
+    > .#{iv.$class-prefix}password-input-toggle:disabled {
+    color: GrayText;
+    opacity: 1;
+  }
+}

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

@@ -1,5 +1,6 @@
 @use 'bulma/sass/utilities/initial-variables' as iv;
 @use 'bulma/sass/utilities/css-variables' as cv;
+@use '../input-trigger' as *;
 
 $picker-popover-z-index: 30 !default;
 $picker-popover-background: cv.getVar('scheme-main') !default;
@@ -12,6 +13,7 @@ $picker-popover-animation-duration: 0.15s !default;
 $picker-trigger-width: 2.5em !default;
 $picker-trigger-color: cv.getVar('text') !default;
 $picker-trigger-hover-color: cv.getVar('text-strong') !default;
+$picker-trigger-disabled-opacity: 0.5 !default;
 
 .#{iv.$class-prefix}picker-popover {
   @include cv.register-vars(
@@ -135,73 +137,32 @@ $picker-containers: (
 // Right-side launcher button. 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. Sizing mirrors Bulma's 2.5em icon slot
-// and tracks the input's size modifier via the sibling selector.
+// 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.
 $picker-trigger-pairs: (
-  ('#{iv.$class-prefix}dateinput-container' '#{iv.$class-prefix}dateinput-trigger'),
-  ('#{iv.$class-prefix}timeinput-container' '#{iv.$class-prefix}timeinput-trigger'),
-  (
-    '#{iv.$class-prefix}datetimeinput-container'
-      '#{iv.$class-prefix}datetimeinput-trigger'
-  )
+  ('dateinput-container' 'dateinput-trigger'),
+  ('timeinput-container' 'timeinput-trigger'),
+  ('datetimeinput-container' 'datetimeinput-trigger')
 );
 
 @each $container, $trigger in $picker-trigger-pairs {
-  .#{$container} {
-    position: relative;
-    @include cv.register-vars(
-      (
-        'picker-trigger-width': #{$picker-trigger-width},
-        'picker-trigger-color': #{$picker-trigger-color},
-        'picker-trigger-hover-color': #{$picker-trigger-hover-color},
-      )
-    );
-
-    // Reserve room so typed text doesn't slide under the launcher.
-    > .#{iv.$class-prefix}input {
-      padding-right: cv.getVar('picker-trigger-width');
-    }
-
-    > .#{$trigger} {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 4;
-      height: 100%;
-      width: cv.getVar('picker-trigger-width');
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: cv.getVar('picker-trigger-color');
-      cursor: pointer;
-      transition: color 0.15s ease;
-
-      .#{iv.$class-prefix}icon {
-        pointer-events: none;
-      }
-
-      &:hover:not(:disabled) {
-        color: cv.getVar('picker-trigger-hover-color');
-      }
-      &:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-      }
-    }
-
-    // Match the launcher's font-size to the input's size modifier so its
-    // em-based width tracks the control.
-    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-small ~ .#{$trigger} {
-      font-size: cv.getVar('size-small');
-    }
-    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-medium ~ .#{$trigger} {
-      font-size: cv.getVar('size-medium');
-    }
-    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-large ~ .#{$trigger} {
-      font-size: cv.getVar('size-large');
+  .#{iv.$class-prefix}#{$container} {
+    @include extras-input-trigger(
+      $trigger: $trigger,
+      $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')
+    ) {
+      @include cv.register-vars(
+        (
+          'picker-trigger-width': #{$picker-trigger-width},
+          'picker-trigger-color': #{$picker-trigger-color},
+          'picker-trigger-hover-color': #{$picker-trigger-hover-color},
+          'picker-trigger-disabled-opacity': #{$picker-trigger-disabled-opacity},
+        )
+      );
     }
   }
 }