@allxsmith/bestax-bulma 5.40.0 → 5.42.0

package/src/scss/components/_carousel.scss

@@ -1,6 +1,12 @@
 // Carousel component styles
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
+
+// The space between two items in view, left out at the track's edges. A
+// length, so `0px` rather than `0`: the track's offset adds it to a
+// percentage inside `calc()`, where a bare `0` is not a length.
+$carousel-item-gap: 0px !default;
 
 // Carousel-specific SCSS sizing variables
 $carousel-arrow-size: 48px !default;
@@ -126,10 +132,70 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
       "carousel-overlay-indicator-background-active": #{$carousel-overlay-indicator-background-active},
       "carousel-transition-duration": #{$carousel-transition-duration},
       "carousel-fade-duration": #{$carousel-fade-duration},
+      "carousel-item-gap": #{$carousel-item-gap},
+      // How many items are in view. `Carousel` writes each `itemsToShow*`
+      // prop it is given as the variable of the same name on its own
+      // element; the rest fall back the way the props do, each viewport to
+      // the next narrower one and all of them to `itemsToShow`. Declared
+      // here, on every carousel, so one nested in another's items starts
+      // from its own props rather than inheriting the outer one's.
+      "carousel-items-to-show": 1,
+      "carousel-items-to-show-mobile": #{cv.getVar("carousel-items-to-show")},
+      "carousel-items-to-show-tablet": #{cv.getVar("carousel-items-to-show")},
+      "carousel-items-to-show-desktop": #{cv.getVar("carousel-items-to-show-tablet")},
+      "carousel-items-to-show-widescreen": #{cv.getVar("carousel-items-to-show-desktop")},
+      "carousel-items-to-show-fullhd": #{cv.getVar("carousel-items-to-show-widescreen")},
+      // The count for the viewport the page is in, which the item widths and
+      // the track's offset both read. Bulma's breakpoint mixins below pick
+      // the tablet count and wider; every width they don't reach is mobile,
+      // as it is to the script. A `mobile` block of its own would leave out
+      // the fractional widths between Bulma's `mobile` query (up to 768px)
+      // and its `tablet` one (from 769px), where the two would disagree.
+      "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-mobile")},
     )
   );
 }
 
+@include mx.tablet {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-tablet")},
+      )
+    );
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-desktop")},
+      )
+    );
+  }
+}
+
+@include mx.widescreen {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-widescreen")},
+      )
+    );
+  }
+}
+
+@include mx.fullhd {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-fullhd")},
+      )
+    );
+  }
+}
+
 .#{iv.$class-prefix}carousel {
   position: relative;
   overflow: hidden;
@@ -147,15 +213,22 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
   // Slides container
   .#{iv.$class-prefix}carousel-slides {
     display: flex;
+    gap: cv.getVar("carousel-item-gap");
     width: 100%;
     will-change: transform;
   }
 
-  // Individual slide
+  // Individual slide: an equal share of the track, less the gaps between
+  // the items in view
   .#{iv.$class-prefix}carousel-item {
-    flex: 0 0 100%;
-    width: 100%;
-    min-width: 100%;
+    $carousel-item-width: calc(
+      (100% - (#{cv.getVar("carousel-items-in-view")} - 1) * #{cv.getVar("carousel-item-gap")}) /
+        #{cv.getVar("carousel-items-in-view")}
+    );
+
+    flex: 0 0 $carousel-item-width;
+    width: $carousel-item-width;
+    min-width: $carousel-item-width;
 
     // Allow images to fill the slide
     img {
@@ -505,26 +578,6 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
   }
 }
 
-// Carousel list variant (multiple visible items)
-.#{iv.$class-prefix}carousel-list {
-  .#{iv.$class-prefix}carousel-container {
-    overflow: visible;
-  }
-
-  .#{iv.$class-prefix}carousel-slides {
-    display: flex;
-    gap: 1rem;
-  }
-
-  .#{iv.$class-prefix}carousel-item {
-    flex: 0 0 auto;
-    width: auto;
-    position: relative;
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
 // Responsive adjustments
 @media screen and (max-width: 768px) {
   .#{iv.$class-prefix}carousel {

package/src/scss/components/_menu.scss

@@ -1,4 +1,128 @@
 // Bestax Extras - Menu Styles
+// Two additions to Bulma's menu: `Menu.Section`, a section that opens and
+// closes, and a mark for the active item in forced colors.
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "../mixins" as *;
+
+// Menu.Section's own. Its heading reads the menu label's variables, so a
+// theme that restyles the labels restyles it too, and these cover what a
+// label doesn't have: the room between its words and its chevron, and the
+// chevron.
+$menu-section-gap: 0.375em !default;
+$menu-section-chevron-size: 1em !default;
+$menu-section-chevron-color: currentColor !default;
+$menu-section-chevron-duration: cv.getVar("duration") !default;
+
+.#{iv.$class-prefix}menu {
+  @include cv.register-vars(
+    (
+      "menu-section-gap": #{$menu-section-gap},
+      "menu-section-chevron-size": #{$menu-section-chevron-size},
+      "menu-section-chevron-color": #{$menu-section-chevron-color},
+      "menu-section-chevron-duration": #{$menu-section-chevron-duration},
+    )
+  );
+}
+
+// The space Bulma puts around a label, which turns on where the label sits
+// among the menu's children: above it unless it comes first, and below it
+// unless it comes last. A heading takes the same two from where its section
+// sits, plus the space between an open heading and its own list. Without
+// the one below, a menu list right after a closed section would sit flush
+// under its heading, as if it were the section's. Two sections in a row are
+// still one space apart, since the margins collapse. They're on the heading,
+// so the label's `em` measures them in the label's own small size, as
+// Bulma's do. The heading doesn't carry `.menu-label` itself, because its
+// own place inside its section never changes.
+.#{iv.$class-prefix}menu-section:not(:first-child) > .#{iv.$class-prefix}menu-section-toggle {
+  margin-top: cv.getVar("menu-label-spacing");
+}
+
+.#{iv.$class-prefix}menu-section:not(:last-child) > .#{iv.$class-prefix}menu-section-toggle,
+.#{iv.$class-prefix}menu-section-toggle[aria-expanded="true"] {
+  margin-bottom: cv.getVar("menu-label-spacing");
+}
+
+// The heading is a button drawn like Bulma's `.menu-label`: small, spaced
+// and uppercase, in the label's weak text color.
+.#{iv.$class-prefix}menu-section-toggle {
+  align-items: center;
+  appearance: none;
+  background: none;
+  border: none;
+  color: cv.getVar("menu-label-color");
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: cv.getVar("menu-label-font-size");
+  font-weight: inherit;
+  gap: cv.getVar("menu-section-gap");
+  letter-spacing: cv.getVar("menu-label-letter-spacing");
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+  text-align: start;
+  text-transform: uppercase;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    @include extras-focus-outline;
+  }
+}
+
+.#{iv.$class-prefix}menu-section-label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+// TreeView's chevron, drawn the same way: two sides of a square, turned, in
+// a box of its own, the way Bulma's `%arrow` draws the `.select` arrow. It
+// sits at the end of the heading, points to the end of the line while
+// closed and down while open, and both follow a right-to-left page. It's a
+// border in the heading's text color, so it stays in forced colors.
+.#{iv.$class-prefix}menu-section-chevron {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  height: cv.getVar("menu-section-chevron-size");
+  justify-content: center;
+  width: cv.getVar("menu-section-chevron-size");
+
+  &::after {
+    // The square's bottom and left sides before it's turned, so physical
+    // sides, like the turn.
+    border-color: cv.getVar("menu-section-chevron-color");
+    border-style: solid;
+    border-width: 0 0 0.125em 0.125em;
+    content: "";
+    height: 0.5em;
+    transform: translateX(-15%) rotate(-135deg);
+    transition-duration: cv.getVar("menu-section-chevron-duration");
+    transition-property: transform;
+    width: 0.5em;
+  }
+}
+
+.#{iv.$class-prefix}menu-section-toggle[aria-expanded="false"]:dir(rtl) > .#{iv.$class-prefix}menu-section-chevron::after {
+  transform: translateX(15%) rotate(45deg);
+}
+
+.#{iv.$class-prefix}menu-section-toggle[aria-expanded="true"] > .#{iv.$class-prefix}menu-section-chevron::after {
+  transform: translateY(-15%) rotate(-45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}menu-section-chevron::after {
+    transition: none;
+  }
+}
+
 // Bulma draws a menu's active item with a fill and a text color and nothing
 // else, and forced colors (Windows' contrast themes) replaces both, so the
 // active item looks like every other item there. This marks it with a bar in
@@ -14,9 +138,6 @@
 //
 // It reads the classes Bulma highlights, on the elements Bulma styles as
 // items, so a hand-written `.is-active` link gets it too.
-
-@use "bulma/sass/utilities/initial-variables" as iv;
-
 @media (forced-colors: active) {
   .#{iv.$class-prefix}menu-list {
     a,
@@ -34,4 +155,10 @@
       }
     }
   }
+
+  // A section heading's focus ring in the system's text color, as
+  // TreeView's is.
+  .#{iv.$class-prefix}menu-section-toggle:focus-visible {
+    outline-color: CanvasText;
+  }
 }