@allxsmith/bestax-bulma 5.50.0 → 5.52.0

package/src/scss/components/_command.scss

@@ -0,0 +1,259 @@
+// Bestax Extras - Command Styles
+// A search field over a list of things to do. The field is Bulma's `Input`,
+// in its Control, and the box, the list, its groups and its items are
+// written here: the highlight that follows the keyboard is the pair Bulma's
+// dropdown gives an `is-active` item, as Combobox's is. In a dialog the box
+// sits in Bulma's `.modal`, near the top rather than in the middle, so it
+// doesn't jump as the list grows and shrinks.
+//
+// Colors come from Bulma's tokens, so dark mode needs no rules of its own.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$command-background: cv.getVar('scheme-main') !default;
+// The edge keeps the box apart from the page, and from the background in a
+// dialog, where the shadow all but vanishes on a dark page and is dropped in
+// forced colors.
+$command-border-color: cv.getVar('border-weak') !default;
+$command-radius: cv.getVar('radius-large') !default;
+$command-padding: 0.5rem !default;
+// Between the field and the list.
+$command-gap: 0.5rem !default;
+// The list scrolls past this.
+$command-list-max-height: 20rem !default;
+$command-item-color: cv.getVar('text-strong') !default;
+$command-item-size: 0.875rem !default;
+$command-item-padding-y: 0.5rem !default;
+$command-item-padding-x: 0.75rem !default;
+$command-item-radius: cv.getVar('radius') !default;
+// Between the icon, the label and the hint.
+$command-item-gap: 0.75rem !default;
+$command-item-hover-background: hsl(
+  #{cv.getVar('scheme-h')},
+  #{cv.getVar('scheme-s')},
+  calc(#{cv.getVar('scheme-main-l')} + #{cv.getVar('hover-background-l-delta')})
+) !default;
+$command-highlight-background: cv.getVar('link') !default;
+$command-highlight-color: cv.getVar('link-invert') !default;
+$command-disabled-color: cv.getVar('text-weak') !default;
+$command-icon-color: cv.getVar('text-weak') !default;
+$command-description-color: cv.getVar('text-weak') !default;
+$command-description-size: 0.875em !default;
+$command-hint-color: cv.getVar('text-weak') !default;
+$command-group-label-size: 0.85em !default;
+$command-group-label-weight: cv.getVar('weight-semibold') !default;
+$command-group-label-color: cv.getVar('text-weak') !default;
+$command-divider-color: cv.getVar('border-weak') !default;
+$command-empty-color: cv.getVar('text-weak') !default;
+$command-empty-padding: 1.5rem !default;
+// The dialog: how wide it gets, how far down it sits, and its shadow.
+$command-dialog-width: 40rem !default;
+$command-dialog-offset: 12vh !default;
+$command-dialog-shadow: cv.getVar('shadow') !default;
+
+.#{iv.$class-prefix}command {
+  @include cv.register-vars(
+    (
+      'command-background': #{$command-background},
+      'command-border-color': #{$command-border-color},
+      'command-radius': #{$command-radius},
+      'command-padding': #{$command-padding},
+      'command-gap': #{$command-gap},
+      'command-list-max-height': #{$command-list-max-height},
+      'command-item-color': #{$command-item-color},
+      'command-item-size': #{$command-item-size},
+      'command-item-padding-y': #{$command-item-padding-y},
+      'command-item-padding-x': #{$command-item-padding-x},
+      'command-item-radius': #{$command-item-radius},
+      'command-item-gap': #{$command-item-gap},
+      'command-item-hover-background': #{$command-item-hover-background},
+      'command-highlight-background': #{$command-highlight-background},
+      'command-highlight-color': #{$command-highlight-color},
+      'command-disabled-color': #{$command-disabled-color},
+      'command-icon-color': #{$command-icon-color},
+      'command-description-color': #{$command-description-color},
+      'command-description-size': #{$command-description-size},
+      'command-hint-color': #{$command-hint-color},
+      'command-group-label-size': #{$command-group-label-size},
+      'command-group-label-weight': #{$command-group-label-weight},
+      'command-group-label-color': #{$command-group-label-color},
+      'command-divider-color': #{$command-divider-color},
+      'command-empty-color': #{$command-empty-color},
+      'command-empty-padding': #{$command-empty-padding},
+      'command-dialog-width': #{$command-dialog-width},
+      'command-dialog-offset': #{$command-dialog-offset},
+      'command-dialog-shadow': #{$command-dialog-shadow},
+    )
+  );
+}
+
+.#{iv.$class-prefix}command {
+  display: flex;
+  flex-direction: column;
+  gap: cv.getVar('command-gap');
+  padding: cv.getVar('command-padding');
+  background-color: cv.getVar('command-background');
+  border: 1px solid cv.getVar('command-border-color');
+  border-radius: cv.getVar('command-radius');
+}
+
+// The list's size, which its items, group headings and the empty message
+// beside it take.
+.#{iv.$class-prefix}command-list,
+.#{iv.$class-prefix}command-empty {
+  font-size: cv.getVar('command-item-size');
+}
+
+.#{iv.$class-prefix}command-list {
+  max-height: cv.getVar('command-list-max-height');
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.#{iv.$class-prefix}command-item {
+  display: flex;
+  align-items: center;
+  gap: cv.getVar('command-item-gap');
+  padding: cv.getVar('command-item-padding-y')
+    cv.getVar('command-item-padding-x');
+  border-radius: cv.getVar('command-item-radius');
+  color: cv.getVar('command-item-color');
+  cursor: pointer;
+
+  // Where the pointer is while the highlight is somewhere else, as when the
+  // list scrolls under a pointer that hasn't moved.
+  &:hover:not(.#{iv.$class-prefix}is-active):not(
+      .#{iv.$class-prefix}is-disabled
+    ) {
+    background-color: cv.getVar('command-item-hover-background');
+  }
+
+  &.#{iv.$class-prefix}is-active {
+    background-color: cv.getVar('command-highlight-background');
+    color: cv.getVar('command-highlight-color');
+  }
+
+  &.#{iv.$class-prefix}is-disabled {
+    color: cv.getVar('command-disabled-color');
+    cursor: not-allowed;
+  }
+
+  // The arrows reach a disabled item, so it shows where they are, without
+  // the look of something Enter would run.
+  &.#{iv.$class-prefix}is-active.#{iv.$class-prefix}is-disabled {
+    background-color: cv.getVar('command-item-hover-background');
+    color: cv.getVar('command-disabled-color');
+  }
+}
+
+.#{iv.$class-prefix}command-item-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: cv.getVar('command-icon-color');
+}
+
+// The label over its description, taking the room the icon and hint leave.
+.#{iv.$class-prefix}command-item-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.#{iv.$class-prefix}command-item-description {
+  color: cv.getVar('command-description-color');
+  font-size: cv.getVar('command-description-size');
+}
+
+.#{iv.$class-prefix}command-item-hint {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  margin-inline-start: auto;
+  color: cv.getVar('command-hint-color');
+}
+
+// On the highlight, and on a disabled item, the quieter parts take the item's
+// own color, which is the one that reads against its background.
+.#{iv.$class-prefix}command-item.#{iv.$class-prefix}is-active,
+.#{iv.$class-prefix}command-item.#{iv.$class-prefix}is-disabled {
+  .#{iv.$class-prefix}command-item-icon,
+  .#{iv.$class-prefix}command-item-description,
+  .#{iv.$class-prefix}command-item-hint {
+    color: inherit;
+  }
+}
+
+// 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. The line is the group's own edge rather than the item's, so it
+// stays straight beside a rounded, highlighted item, and it's a border, which
+// forced colors keeps.
+.#{iv.$class-prefix}command-group:not(:first-child) {
+  border-top: 1px solid cv.getVar('command-divider-color');
+  margin-top: cv.getVar('command-item-padding-y');
+  padding-top: cv.getVar('command-item-padding-y');
+}
+
+.#{iv.$class-prefix}command-group:has(
+    + :not(.#{iv.$class-prefix}command-group)
+  ) {
+  border-bottom: 1px solid cv.getVar('command-divider-color');
+  margin-bottom: cv.getVar('command-item-padding-y');
+  padding-bottom: cv.getVar('command-item-padding-y');
+}
+
+.#{iv.$class-prefix}command-group-label {
+  padding: 0.25em cv.getVar('command-item-padding-x');
+  // In em of the list's size, so it follows the Command's.
+  font-size: cv.getVar('command-group-label-size');
+  color: cv.getVar('command-group-label-color');
+  font-weight: cv.getVar('command-group-label-weight');
+}
+
+.#{iv.$class-prefix}command-empty {
+  padding: cv.getVar('command-empty-padding')
+    cv.getVar('command-item-padding-x');
+  color: cv.getVar('command-empty-color');
+  text-align: center;
+}
+
+// In Bulma's `.modal`, a column that centers its content: the box keeps to
+// the top, with the room under it left over, and above the background, which
+// is positioned. Its list takes what height is left, so a short window
+// scrolls the list rather than the page.
+.#{iv.$class-prefix}command.#{iv.$class-prefix}command-dialog {
+  position: relative;
+  width: calc(100% - 2rem);
+  max-width: cv.getVar('command-dialog-width');
+  max-height: calc(100% - 2 * #{cv.getVar('command-dialog-offset')});
+  margin-top: cv.getVar('command-dialog-offset');
+  margin-bottom: auto;
+  box-shadow: cv.getVar('command-dialog-shadow');
+
+  > .#{iv.$class-prefix}command-list {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+}
+
+// Windows high contrast replaces the highlight's fill with the page's, so
+// the highlight is drawn as an outline in the system's highlight color, and
+// a disabled item takes the system's color for disabled text.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}command-item {
+    &.#{iv.$class-prefix}is-active {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+
+    // The highlighted one too, which the rule for it would otherwise outrank.
+    &.#{iv.$class-prefix}is-disabled,
+    &.#{iv.$class-prefix}is-active.#{iv.$class-prefix}is-disabled {
+      color: GrayText;
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -23,3 +23,4 @@
 @use 'timeline';
 @use 'treeview';
 @use 'scrollarea';
+@use 'command';

package/src/scss/elements/_descriptionlist.scss

@@ -0,0 +1,153 @@
+// Bestax Extras - DescriptionList Styles
+// Facts about one thing, each a label and its value: a `<dl>` with a `<div>`
+// per item, a `<dt>` per label and a `<dd>` per value. Bulma styles a `<dl>`
+// only inside `.content`, where it indents the values, so this lays one out.
+//
+// The list is a grid, and each item spans it on `subgrid`, so every label
+// sits in the first column and every value in the last. Stacked, the grid
+// has one column; beside, it has two, the labels' as wide as the longest
+// label. The columns are all an orientation changes. The grid follows the
+// writing direction, so a right-to-left page needs no rules of its own, and
+// the gaps are in em, so `textSize` on the list scales them with the text.
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
+
+// Between items.
+$description-list-gap: 0.75em !default;
+// Between the labels' column and the values', side by side.
+$description-list-column-gap: 1.5em !default;
+// Between a label and its value stacked, and between several labels or
+// several values in one item.
+$description-list-row-gap: 0.25em !default;
+// The most the labels' column takes side by side. Longer labels wrap.
+$description-list-label-max-width: 40% !default;
+$description-list-label-color: cv.getVar("text-weak") !default;
+$description-list-label-weight: cv.getVar("weight-normal") !default;
+$description-list-value-color: cv.getVar("text") !default;
+$description-list-divider-color: cv.getVar("border-weak") !default;
+$description-list-divider-width: 1px !default;
+
+.#{iv.$class-prefix}description-list {
+  @include cv.register-vars(
+    (
+      "description-list-gap": #{$description-list-gap},
+      "description-list-column-gap": #{$description-list-column-gap},
+      "description-list-row-gap": #{$description-list-row-gap},
+      "description-list-label-max-width": #{$description-list-label-max-width},
+      "description-list-label-color": #{$description-list-label-color},
+      "description-list-label-weight": #{$description-list-label-weight},
+      "description-list-value-color": #{$description-list-value-color},
+      "description-list-divider-color": #{$description-list-divider-color},
+      "description-list-divider-width": #{$description-list-divider-width},
+    )
+  );
+}
+
+// ---- The two orientations, as the list's columns ----------------------------
+
+@mixin -vertical {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@mixin -horizontal {
+  grid-template-columns: fit-content(#{cv.getVar("description-list-label-max-width")}) minmax(0, 1fr);
+}
+
+// ---- Structure ----------------------------------------------------------------
+
+.#{iv.$class-prefix}description-list {
+  display: grid;
+  @include -vertical;
+  column-gap: cv.getVar("description-list-column-gap");
+  row-gap: cv.getVar("description-list-gap");
+  margin: 0;
+  padding: 0;
+  // On the root, so a `textColor` helper's class outranks it and the values
+  // inherit either.
+  color: cv.getVar("description-list-value-color");
+
+  &:not(:last-child) {
+    margin-bottom: cv.getVar("block-spacing");
+  }
+}
+
+.#{iv.$class-prefix}description-list-item {
+  display: grid;
+  grid-column: 1 / -1;
+  // A browser without `subgrid` keeps this one column, so its items stay
+  // stacked at every width rather than misplace a value.
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: subgrid;
+  // Each label from the top of the first column and each value from the top
+  // of the last, so several of either line up from the item's first line.
+  grid-auto-flow: row dense;
+  align-items: baseline;
+  row-gap: cv.getVar("description-list-row-gap");
+}
+
+// Through the root, so it outranks Bulma's `.content dd` indent.
+.#{iv.$class-prefix}description-list .#{iv.$class-prefix}description-list-label {
+  grid-column: 1 / 2;
+  margin: 0;
+  color: cv.getVar("description-list-label-color");
+  font-weight: cv.getVar("description-list-label-weight");
+}
+
+.#{iv.$class-prefix}description-list .#{iv.$class-prefix}description-list-value {
+  grid-column: -2 / -1;
+  margin: 0;
+  // An order number, an email or a URL wraps rather than widen the list.
+  overflow-wrap: anywhere;
+}
+
+.#{iv.$class-prefix}description-list.#{iv.$class-prefix}has-dividers
+  > .#{iv.$class-prefix}description-list-item
+  + .#{iv.$class-prefix}description-list-item {
+  border-block-start: cv.getVar("description-list-divider-width") solid cv.getVar("description-list-divider-color");
+  padding-block-start: cv.getVar("description-list-gap");
+}
+
+// ---- Orientation ----------------------------------------------------------------
+
+// With no orientation given: stacked on a phone, beside from tablet up.
+@include mx.tablet {
+  .#{iv.$class-prefix}description-list {
+    @include -horizontal;
+  }
+}
+
+@mixin -orientations($suffix) {
+  .#{iv.$class-prefix}description-list.#{iv.$class-prefix}is-vertical#{$suffix} {
+    @include -vertical;
+  }
+
+  .#{iv.$class-prefix}description-list.#{iv.$class-prefix}is-horizontal#{$suffix} {
+    @include -horizontal;
+  }
+}
+
+// `orientation` at every width, then each viewport's prop from its own
+// breakpoint, narrowest first, so where several apply the widest one wins.
+@include -orientations("");
+
+@include mx.mobile {
+  @include -orientations("-mobile");
+}
+
+@include mx.tablet {
+  @include -orientations("-tablet");
+}
+
+@include mx.desktop {
+  @include -orientations("-desktop");
+}
+
+@include mx.widescreen {
+  @include -orientations("-widescreen");
+}
+
+@include mx.fullhd {
+  @include -orientations("-fullhd");
+}

package/src/scss/elements/_index.scss

@@ -2,6 +2,7 @@
 // Import all element partials here
 
 // Element Components
+@use 'descriptionlist';
 @use 'kbd';
 @use 'linkbutton';
 @use 'loader';

package/src/scss/form/_checkbox.scss

@@ -4,6 +4,13 @@
 
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
+
+// 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
+// they restate Bulma's layout rather than set a look of their own.
+$-field-label-gap: 1.5rem;
+$-field-label-parts: 6;
 
 // Checkbox-specific SCSS variables
 $checkbox-size: 1.25em !default;
@@ -249,3 +256,40 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     }
   }
 }
+
+// `<Checkboxes as="fieldset">` renders a native fieldset: the group's own
+// `.field`, with its label as the legend, or the `.checkboxes` box itself inside
+// an outer `Field`. Bulma resets a fieldset's margin, border and padding but
+// keeps the browser's `min-inline-size: min-content`, which lets a long row
+// of choices push it out of its column.
+fieldset.#{iv.$class-prefix}checkboxes,
+fieldset.#{iv.$class-prefix}field:has(.#{iv.$class-prefix}checkboxes) {
+  min-inline-size: 0;
+}
+
+// Horizontal, the legend is the label column. The browser draws a
+// fieldset's legend above the content rather than beside it. A floated
+// legend escapes that, though not in a flex fieldset in every engine, so the
+// fieldset is a block here and the legend floats, taking the share of the
+// row Bulma's `.field-label` takes beside `.field-body` (one part in six of
+// what's left after its margin), and growing as that does for a word too
+// long to wrap. `.field-body`, a flex box, sits beside it. Below tablet the
+// row stacks, and the legend sits on top as it is. It applies only where the
+// fieldset's own legend is the label column and the body after it holds the
+// group, so a fieldset you lay out with a `div.field-label` keeps Bulma's
+// flex row whatever its body holds.
+@include mx.tablet {
+  fieldset.#{iv.$class-prefix}field.#{iv.$class-prefix}is-horizontal:has(
+      > legend.#{iv.$class-prefix}field-label
+        + .#{iv.$class-prefix}field-body
+        .#{iv.$class-prefix}checkboxes
+    ) {
+    display: flow-root;
+
+    > legend.#{iv.$class-prefix}field-label {
+      float: inline-start;
+      inline-size: calc((100% - #{$-field-label-gap}) / #{$-field-label-parts});
+      min-inline-size: min-content;
+    }
+  }
+}