@allxsmith/bestax-bulma 5.57.1 → 5.57.3

package/src/scss/_selected-row.scss

@@ -0,0 +1,43 @@
+// Bestax Extras - the cells of a selected table row
+// A mixin Checkbox and Radio share, so the cells their selected-row rules
+// name can't drift apart. It reads Bulma's `$colors`, so it lives here rather
+// than in `_mixins.scss`, which compiles with no Bulma to load.
+
+@use 'sass:list';
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/derived-variables' as dv;
+
+// The cells of a table that sit on Bulma's selected-row fill (`Tr
+// isSelected`, or a cell with `is-selected`), for a control drawn in the
+// primary color, which the fill is too. Name the step from the cell down to
+// the control in the content with a child combinator (`> .styled-checkbox`):
+// one inside a menu, a card or a table nested in the cell sits on that
+// surface's own background instead.
+//
+// A cell with a color of its own (`Td color="white"`) paints its own
+// background over the row's, and so does every cell of a row with a color
+// (`Tr color="white" isSelected`), which hands its color to its cells. Both
+// are left out. Bulma colors those cells with custom properties alone, which
+// a selector can't read, so the cells are named by class, one for each color
+// Bulma makes them from: its `$colors` map, which its table's `$table-colors`
+// is built from, custom colors included. A selected cell is the row's fill
+// whatever its color, as Bulma paints it.
+@mixin extras-selected-table-cell {
+  $colored: ();
+  @each $name, $color in dv.$colors {
+    $colored: list.append(
+      $colored,
+      '.#{iv.$class-prefix}is-#{$name}',
+      $separator: comma
+    );
+  }
+
+  .#{iv.$class-prefix}table {
+    tr.#{iv.$class-prefix}is-selected:not(#{$colored}) > td:not(#{$colored}),
+    tr.#{iv.$class-prefix}is-selected:not(#{$colored}) > th:not(#{$colored}),
+    td.#{iv.$class-prefix}is-selected,
+    th.#{iv.$class-prefix}is-selected {
+      @content;
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -25,3 +25,4 @@
 @use 'scrollarea';
 @use 'command';
 @use 'datatable';
+@use 'pagination';

package/src/scss/components/_pagination.scss

@@ -0,0 +1,25 @@
+// Bestax Extras - Pagination Styles
+// Bulma marks the current page link with a fill, a border color and a text
+// color, and nothing else, and forced colors (Windows' contrast themes)
+// replaces all three with the system's, so the current page looks like every
+// other page there. This draws it in Highlight and HighlightText, the pair the
+// system keeps for a selection, the way the themed Checkbox marks a checked
+// box. `forced-color-adjust: none` keeps them. Outside forced colors it
+// changes nothing.
+//
+// It reads the classes Bulma highlights, `is-current` and its other name
+// `is-selected`, so a hand-written current link gets it too, and so does
+// `DataTable`'s pager, which is a `Pagination`. Two classes outrank Bulma's
+// colors for a link, wherever the two stylesheets load.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-current,
+  .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-selected {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+}

package/src/scss/components/_toast.scss

@@ -76,7 +76,8 @@ $toast-action-hover-opacity: 0.1 !default;
     align-items: center;
   }
 
-  // Bottom positions — column-reverse so newer toasts appear nearest the edge
+  // Bottom positions: column-reverse, so a stack grows up from the bottom
+  // edge as a top one grows down from the top, the first toast nearest it
   &.#{iv.$class-prefix}is-bottom-right {
     bottom: 0;
     right: 0;

package/src/scss/elements/_delete.scss

@@ -0,0 +1,63 @@
+// Bestax Extras - Delete Styles
+// Bulma draws a delete button's circle and its cross as background colors,
+// on the button and on its `::before` and `::after`, and draws the Modal's
+// floating close and a delete tag's cross the same way. Forced colors
+// (Windows' contrast themes) replaces background colors with the system's, so
+// the buttons vanish, or their cross does, while they still work and still
+// take focus. This keeps them drawn there, in the system's button colors: the
+// circle in ButtonFace with a ButtonText edge, and the cross in ButtonText.
+// The floating close has no circle, so it gets only the cross. Outside forced
+// colors it changes nothing.
+//
+// `.delete` is `Delete`, which every other close button bestax renders is
+// too, apart from the Modal's floating close (`.modal-close`) and `Tag
+// isDelete` (`.tag.is-delete`).
+//
+// `forced-color-adjust: none` keeps these colors, and the focus ring's too,
+// which would then be Bulma's focus color rather than the user's, so the ring
+// takes the system's Highlight. It would also keep a disabled one looking
+// like the rest, so that one's edge and cross take GrayText, the system's
+// color for a disabled control: a `Delete` with `disabled`, which writes
+// Bulma's `is-disabled` too, and any of them inside a disabled `<fieldset>`.
+//
+// Bulma's CSS can land on either side of this partial, as it can for
+// `_loader.scss`, which says why, so each selector names its last class twice
+// to outrank Bulma's rule for the same element, wherever the two load.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}delete.#{iv.$class-prefix}delete,
+  .#{iv.$class-prefix}tag.#{iv.$class-prefix}is-delete.#{iv.$class-prefix}is-delete {
+    background-color: ButtonFace;
+    border: 1px solid ButtonText;
+
+    &:disabled,
+    &.#{iv.$class-prefix}is-disabled {
+      border-color: GrayText;
+    }
+  }
+
+  .#{iv.$class-prefix}delete.#{iv.$class-prefix}delete,
+  .#{iv.$class-prefix}modal-close.#{iv.$class-prefix}modal-close,
+  .#{iv.$class-prefix}tag.#{iv.$class-prefix}is-delete.#{iv.$class-prefix}is-delete {
+    forced-color-adjust: none;
+
+    &::before,
+    &::after {
+      background-color: ButtonText;
+    }
+
+    &:disabled,
+    &.#{iv.$class-prefix}is-disabled {
+      &::before,
+      &::after {
+        background-color: GrayText;
+      }
+    }
+
+    &:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/src/scss/elements/_index.scss

@@ -3,6 +3,7 @@
 
 // Element Components
 @use 'colorswatch';
+@use 'delete';
 @use 'descriptionlist';
 @use 'kbd';
 @use 'linkbutton';

package/src/scss/form/_checkbox.scss

@@ -2,11 +2,10 @@
 // Custom-styled checkbox with colors, sizes, and visual states
 // Follows Bulma v1 CSS variable convention (see _dialog.scss)
 
-@use "sass:list";
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
-@use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/mixins" as mx;
+@use "../selected-row" as *;
 
 // Bulma's horizontal field: `.field-label` takes one part of the row and
 // `.field-body` five, after the label's `margin-inline-end`. Private, since
@@ -165,9 +164,11 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     }
   }
 
-  // Label text
+  // Label text. The gap is on the text's inline start, the side the box is
+  // on: the row mirrors on a right-to-left page, and a physical
+  // `margin-left` would stay on the far side and leave the text on the box.
   .#{iv.$class-prefix}control-label {
-    margin-left: cv.getVar("checkbox-label-gap");
+    margin-inline-start: cv.getVar("checkbox-label-gap");
     line-height: 1.5;
   }
 }
@@ -194,44 +195,19 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
 // read.
 //
 // Only a Checkbox placed straight in one of those cells sits on the row's
-// fill, so the rule names each step down to it rather than any checkbox
-// below the row. One inside a menu, a card or a table nested in the cell sits
-// on that surface's own background, and keeps its own colors there.
-//
-// A cell with a color of its own (`Td color="white"`) paints its own
-// background over the row's, and so does every cell of a row with a color
-// (`Tr color="white" isSelected`), which hands its color to its cells. Both
-// are left out, and a box there keeps its usual look. Bulma colors those cells with custom properties alone, which a
-// selector can't read, so the cells are named by class, one for each color
-// Bulma makes them from: its `$colors` map, which its table's
-// `$table-colors` is built from, custom colors included. A selected cell is
-// the row's fill whatever its color, as Bulma paints it.
-$-colored-cells: ();
-@each $name, $color in dv.$colors {
-  $-colored-cells: list.append(
-    $-colored-cells,
-    ".#{iv.$class-prefix}is-#{$name}",
-    $separator: comma
-  );
-}
-
-.#{iv.$class-prefix}table {
-  tr.#{iv.$class-prefix}is-selected:not(#{$-colored-cells})
-    > td:not(#{$-colored-cells}),
-  tr.#{iv.$class-prefix}is-selected:not(#{$-colored-cells})
-    > th:not(#{$-colored-cells}),
-  td.#{iv.$class-prefix}is-selected,
-  th.#{iv.$class-prefix}is-selected {
-    > .#{iv.$class-prefix}styled-checkbox {
-      @include cv.register-vars(
-        (
-          "checkbox-border-color": #{cv.getVar("table-row-active-color")},
-          "checkbox-active-color": #{cv.getVar("table-row-active-color")},
-          "checkbox-indeterminate-color": #{cv.getVar("table-row-active-color")},
-          "checkbox-check-color": #{cv.getVar("table-row-active-background-color")},
-        )
-      );
-    }
+// fill, and cells with a color of their own are left out, so a box in a
+// menu, a nested table or a colored cell keeps its usual look. The mixin
+// names the cells, and Radio's rule reads the same list.
+@include extras-selected-table-cell {
+  > .#{iv.$class-prefix}styled-checkbox {
+    @include cv.register-vars(
+      (
+        "checkbox-border-color": #{cv.getVar("table-row-active-color")},
+        "checkbox-active-color": #{cv.getVar("table-row-active-color")},
+        "checkbox-indeterminate-color": #{cv.getVar("table-row-active-color")},
+        "checkbox-check-color": #{cv.getVar("table-row-active-background-color")},
+      )
+    );
   }
 }
 

package/src/scss/form/_combobox.scss

@@ -284,11 +284,22 @@ $combobox-sizes: (
   }
 }
 
+// A line between a group and whatever comes before it, and between a group
+// and items with no group after it, which would otherwise read as the group's
+// last items. It's a border, which forced colors keeps.
 .#{iv.$class-prefix}combobox-group:not(:first-child) {
   border-top: 1px solid cv.getVar('combobox-divider-color');
   margin-top: cv.getVar('combobox-item-padding-y');
 }
 
+.#{iv.$class-prefix}combobox-group:has(
+    + :not(.#{iv.$class-prefix}combobox-group)
+  ) {
+  border-bottom: 1px solid cv.getVar('combobox-divider-color');
+  margin-bottom: cv.getVar('combobox-item-padding-y');
+  padding-bottom: cv.getVar('combobox-item-padding-y');
+}
+
 .#{iv.$class-prefix}combobox-group-label {
   padding: cv.getVar('combobox-item-padding-y')
     cv.getVar('combobox-item-padding-x') 0.125rem;

package/src/scss/form/_dropzone.scss

@@ -197,37 +197,3 @@ $dropzone-size-font-size: cv.getVar('size-small') !default;
   flex: none;
   font-size: cv.getVar('dropzone-size-font-size');
 }
-
-// Bulma shows a delete button's focus only as a slightly darker circle, so a
-// row's remove button takes a ring from the keyboard, in Bulma's focus
-// colour, style and width.
-.#{iv.$class-prefix}dropzone-item .#{iv.$class-prefix}delete:focus-visible {
-  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');
-}
-
-// Bulma draws a delete button's circle and cross as backgrounds, which forced
-// colours paints over, so the remove buttons would vanish. They keep their
-// own colours there, in the system's button colours.
-@media (forced-colors: active) {
-  .#{iv.$class-prefix}dropzone-item .#{iv.$class-prefix}delete {
-    background-color: ButtonFace;
-    border: 1px solid ButtonText;
-    forced-color-adjust: none;
-
-    &::before,
-    &::after {
-      background-color: ButtonText;
-    }
-
-    &:focus-visible {
-      outline-color: Highlight;
-    }
-  }
-}

package/src/scss/form/_radio.scss

@@ -5,6 +5,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 "../selected-row" as *;
 
 // Bulma's horizontal field: `.field-label` takes one part of the row and
 // `.field-body` five, after the label's `margin-inline-end`. Private, since
@@ -124,9 +125,12 @@ $radio-transition-duration: cv.getVar("duration") !default;
     }
   }
 
-  // Label text
+  // Label text. The gap is on the text's inline start, the side the circle
+  // is on: the row mirrors on a right-to-left page, and a physical
+  // `margin-left` would stay on the far side and leave the text on the
+  // circle.
   .#{iv.$class-prefix}control-label {
-    margin-left: cv.getVar("radio-label-gap");
+    margin-inline-start: cv.getVar("radio-label-gap");
     line-height: 1.5;
   }
 }
@@ -142,6 +146,28 @@ $radio-transition-duration: cv.getVar("duration") !default;
   }
 }
 
+// On Bulma's selected table row (`Tr isSelected`, or a cell with
+// `is-selected`), the row's fill is the same color a checked radio draws its
+// ring and its dot in, so the radio would vanish into it. There the ring and
+// the dot take the row's text color, as Checkbox's box does, and so does an
+// unchecked ring. This outranks the color variants on purpose: the row's own
+// pair is the one Bulma made to read on that fill.
+//
+// Only a Radio placed straight in one of those cells sits on the row's fill,
+// and cells with a color of their own are left out, so a radio in a menu, a
+// nested table or a colored cell keeps its usual look. The mixin names the
+// cells, and Checkbox's rule reads the same list.
+@include extras-selected-table-cell {
+  > .#{iv.$class-prefix}styled-radio {
+    @include cv.register-vars(
+      (
+        "radio-border-color": #{cv.getVar("table-row-active-color")},
+        "radio-active-color": #{cv.getVar("table-row-active-color")},
+      )
+    );
+  }
+}
+
 // Size variants
 .#{iv.$class-prefix}styled-radio.#{iv.$class-prefix}is-small {
   font-size: cv.getVar("size-small");

package/src/scss/form/_switch.scss

@@ -131,19 +131,23 @@ $switch-thin-circle-size: 1.25em !default;
     }
   }
 
-  // Label text
+  // Label text. The gap is on the text's inline start, the side the track
+  // is on: the row mirrors on a right-to-left page, and a physical
+  // `margin-left` would stay on the far side and leave the text on the
+  // track.
   .#{iv.$class-prefix}control-label {
-    margin-left: cv.getVar("switch-label-gap");
+    margin-inline-start: cv.getVar("switch-label-gap");
     line-height: cv.getVar("switch-height");
   }
 
-  // RTL support
+  // Label first: the reversed row puts the track on the text's inline end,
+  // in either page direction, so the gap moves there.
   &.#{iv.$class-prefix}is-rtl {
     flex-direction: row-reverse;
 
     .#{iv.$class-prefix}control-label {
-      margin-left: 0;
-      margin-right: cv.getVar("switch-label-gap");
+      margin-inline-start: 0;
+      margin-inline-end: cv.getVar("switch-label-gap");
     }
   }
 }

package/src/scss/form/_taginput.scss

@@ -128,9 +128,13 @@ $taginput-transition-duration: cv.getVar("duration") !default;
       align-items: center;
       gap: cv.getVar("taginput-tag-gap");
 
+      // The remove button comes after the text, so its gap is on its inline
+      // start and it reaches into the tag's padding on its inline end, as
+      // Bulma's own tag does it. Physical margins put the gap on the far
+      // side on a right-to-left page, and the button on the text.
       .#{iv.$class-prefix}delete {
-        margin-left: 0.25rem;
-        margin-right: -0.25rem;
+        margin-inline-start: 0.25rem;
+        margin-inline-end: -0.25rem;
       }
     }
   }