@allxsmith/bestax-bulma 5.61.0 → 5.63.0

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

@@ -13,6 +13,7 @@
 @use 'rate';
 @use 'autocomplete';
 @use 'combobox';
+@use 'treeselect';
 @use 'taginput';
 @use 'picker-popover';
 @use 'dateinput';

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

@@ -62,6 +62,12 @@ $picker-trigger-hover-color: cv.getVar('text-strong') !default;
     right: 0;
     margin-bottom: cv.getVar('picker-popover-offset');
   }
+  // 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.
+  &.#{iv.$class-prefix}has-anchor-width:not(.#{iv.$class-prefix}is-portal) {
+    min-width: 100%;
+  }
   // Portaled: fixed to the viewport at the top and left the positioning hook
   // sets inline, so the corner's own right and bottom must not apply. Left
   // in, `right: 0` stretches the panel to the viewport's right edge and the

package/src/scss/form/_treeselect.scss

@@ -0,0 +1,146 @@
+// Bestax Extras - TreeSelect Styles
+// A form field whose options are a tree. The field is Bulma's input, the
+// panel the pickers' popover (`--bulma-picker-popover-*`) and the tree
+// TreeView's (`--bulma-tree-view-*`), so this draws what sits between them:
+// the chevron and the clear button on the field, the panel's height, the
+// search box over the tree and the message when a search finds nothing. The
+// panel is at least as wide as the field through the picker popover's own
+// `has-anchor-width` rule.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// The tree scrolls past this, as Combobox's list does.
+$tree-select-panel-max-height: 15rem !default;
+$tree-select-search-gap: 0.5rem !default;
+// The chevron's box at the field's inline end, drawn as a Control's icon is.
+// Bulma registers its input variables on the field and its Control, which the
+// root is outside, so these start from the tokens those start from.
+$tree-select-chevron-width: cv.getVar('control-height') !default;
+$tree-select-chevron-color: cv.getVar('text-light') !default;
+$tree-select-chevron-hover-color: cv.getVar('text-weak') !default;
+$tree-select-chevron-focus-color: cv.getVar('link') !default;
+// Over the field, as Bulma stacks a Control's icon, and the clear button
+// over the chevron.
+$tree-select-chevron-z-index: 4 !default;
+$tree-select-clear-z-index: 5 !default;
+$tree-select-empty-color: cv.getVar('text-weak') !default;
+$tree-select-empty-padding: 0.5em 0.75em !default;
+// Room around the tree for the focus ring of a row at its edge, which the
+// scrolling would cut off: the ring's width and its offset.
+$tree-select-tree-inset: 4px !default;
+
+// Registered on the root, which a panel in place sits inside and inherits
+// from, so a value set on the root or through `className` reaches it, and on
+// a portaled panel, which a portal puts outside the root, so it carries its
+// own copy, as Combobox's menu does.
+.#{iv.$class-prefix}tree-select,
+.#{iv.$class-prefix}tree-select-panel.#{iv.$class-prefix}is-portal {
+  @include cv.register-vars(
+    (
+      'tree-select-panel-max-height': #{$tree-select-panel-max-height},
+      'tree-select-search-gap': #{$tree-select-search-gap},
+      'tree-select-chevron-width': #{$tree-select-chevron-width},
+      'tree-select-chevron-color': #{$tree-select-chevron-color},
+      'tree-select-chevron-hover-color': #{$tree-select-chevron-hover-color},
+      'tree-select-chevron-focus-color': #{$tree-select-chevron-focus-color},
+      'tree-select-chevron-z-index': #{$tree-select-chevron-z-index},
+      'tree-select-clear-z-index': #{$tree-select-clear-z-index},
+      'tree-select-empty-color': #{$tree-select-empty-color},
+      'tree-select-empty-padding': #{$tree-select-empty-padding},
+      'tree-select-tree-inset': #{$tree-select-tree-inset},
+    )
+  );
+}
+
+// What the panel in place, the chevron and the clear button are placed
+// against, when a Control around it holds no other field.
+.#{iv.$class-prefix}tree-select {
+  position: relative;
+
+  .#{iv.$class-prefix}input {
+    cursor: pointer;
+    padding-inline-end: cv.getVar('tree-select-chevron-width');
+  }
+
+  &.#{iv.$class-prefix}has-clear .#{iv.$class-prefix}input {
+    padding-inline-end: calc(2 * #{cv.getVar('tree-select-chevron-width')});
+  }
+
+  .#{iv.$class-prefix}input[disabled] {
+    cursor: not-allowed;
+  }
+}
+
+// Bulma's Control icon, at the inline end, where a press goes to the field.
+.#{iv.$class-prefix}tree-select-chevron {
+  align-items: center;
+  color: cv.getVar('tree-select-chevron-color');
+  display: flex;
+  height: 100%;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  width: cv.getVar('tree-select-chevron-width');
+  z-index: cv.getVar('tree-select-chevron-z-index');
+}
+
+.#{iv.$class-prefix}tree-select .#{iv.$class-prefix}input {
+  &:hover ~ .#{iv.$class-prefix}tree-select-chevron {
+    color: cv.getVar('tree-select-chevron-hover-color');
+  }
+
+  &:focus ~ .#{iv.$class-prefix}tree-select-chevron,
+  &.#{iv.$class-prefix}is-focused ~ .#{iv.$class-prefix}tree-select-chevron,
+  &[aria-expanded='true'] ~ .#{iv.$class-prefix}tree-select-chevron {
+    color: cv.getVar('tree-select-chevron-focus-color');
+  }
+
+  &[disabled] ~ .#{iv.$class-prefix}tree-select-chevron {
+    color: cv.getVar('input-disabled-color');
+  }
+
+  // The chevron's box is in em, so it follows the field's size.
+  &.#{iv.$class-prefix}is-small ~ * {
+    font-size: cv.getVar('size-small');
+  }
+
+  &.#{iv.$class-prefix}is-medium ~ * {
+    font-size: cv.getVar('size-medium');
+  }
+
+  &.#{iv.$class-prefix}is-large ~ * {
+    font-size: cv.getVar('size-large');
+  }
+}
+
+// Beside the chevron, centred on the field's height.
+.#{iv.$class-prefix}tree-select-clear {
+  inset-block-start: 50%;
+  inset-inline-end: cv.getVar('tree-select-chevron-width');
+  position: absolute;
+  transform: translateY(-50%);
+  z-index: cv.getVar('tree-select-clear-z-index');
+}
+
+.#{iv.$class-prefix}tree-select-panel {
+  display: flex;
+  flex-direction: column;
+  gap: cv.getVar('tree-select-search-gap');
+
+  // The tree scrolls, with room for the focus ring of the row at its edge,
+  // and still lines up with the search box over it.
+  > .#{iv.$class-prefix}tree-view {
+    margin-inline: calc(-1 * #{cv.getVar('tree-select-tree-inset')});
+    max-height: cv.getVar('tree-select-panel-max-height');
+    overflow-y: auto;
+    padding: cv.getVar('tree-select-tree-inset');
+  }
+}
+
+.#{iv.$class-prefix}tree-select-empty {
+  color: cv.getVar('tree-select-empty-color');
+  padding: cv.getVar('tree-select-empty-padding');
+}