@allxsmith/bestax-bulma 5.51.0 → 5.53.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/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;
+    }
+  }
+}

package/src/scss/form/_checkboxcard.scss

@@ -0,0 +1,355 @@
+// CheckboxCard styles
+// A checkbox drawn as a card: a <label class="checkbox-card card"> holding the
+// native input, then a .card-content span with the indicator and the text.
+// Bulma's .card draws the surface. This partial adds the card's edge, which
+// carries the checked state, the focus outline and the indicator.
+//
+// The edge is a pseudo-element of the content span, laid over the whole card,
+// rather than a border on the label. The input comes before the content span,
+// so `input:checked + …` reaches it without :has(), and a thicker edge when
+// checked moves nothing inside the card. It's a real border, since Bulma's
+// card draws its own edge with a box-shadow, which forced colors drops.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$checkbox-card-border-width: 1px !default;
+$checkbox-card-border-color: cv.getVar('border') !default;
+$checkbox-card-hover-border-color: cv.getVar('border-hover') !default;
+// Twice the edge, so a checked card differs from an unchecked one by more
+// than its color (WCAG 1.4.1), with or without the indicator.
+$checkbox-card-checked-border-width: 2px !default;
+$checkbox-card-active-color: cv.getVar('primary') !default;
+// Bulma's focus color and width, which every color of card shares, since
+// some of the six fall short of 3:1 on a light page.
+$checkbox-card-focus-color: hsl(
+  cv.getVar('focus-h'),
+  cv.getVar('focus-s'),
+  cv.getVar('focus-l')
+) !default;
+$checkbox-card-focus-width: cv.getVar('focus-width') !default;
+$checkbox-card-focus-offset: 2px !default;
+$checkbox-card-gap: 0.75em !default;
+$checkbox-card-min-width: 12rem !default;
+$checkbox-card-title-weight: cv.getVar('weight-semibold') !default;
+$checkbox-card-description-color: cv.getVar('text-weak') !default;
+$checkbox-card-indicator-size: 1.25em !default;
+$checkbox-card-indicator-border-width: 2px !default;
+// The indicator's border is all that shows of an unchecked box, so it takes
+// `text-weak`, as Checkbox's does, which holds 3:1 on the card's surface.
+$checkbox-card-indicator-border-color: cv.getVar('text-weak') !default;
+$checkbox-card-indicator-radius: cv.getVar('radius-small') !default;
+$checkbox-card-check-color: cv.getVar('scheme-invert') !default;
+$checkbox-card-disabled-opacity: 0.5 !default;
+$checkbox-card-transition-duration: cv.getVar('duration') !default;
+
+// The text's line height, which also places the indicator: it's centred on
+// the title's first line while it's shorter than that line.
+$-line-height: 1.5;
+
+// The check mark's shape, used as a mask so it's painted with a background
+// color: `checkbox-card-check-color`, or a system color in forced colors.
+$-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+
+.#{iv.$class-prefix}checkbox-card {
+  @include cv.register-vars(
+    (
+      'checkbox-card-border-width': #{$checkbox-card-border-width},
+      'checkbox-card-border-color': #{$checkbox-card-border-color},
+      'checkbox-card-hover-border-color': #{$checkbox-card-hover-border-color},
+      'checkbox-card-checked-border-width':
+        #{$checkbox-card-checked-border-width},
+      'checkbox-card-active-color': #{$checkbox-card-active-color},
+      'checkbox-card-focus-color': #{$checkbox-card-focus-color},
+      'checkbox-card-focus-width': #{$checkbox-card-focus-width},
+      'checkbox-card-focus-offset': #{$checkbox-card-focus-offset},
+      'checkbox-card-gap': #{$checkbox-card-gap},
+      'checkbox-card-min-width': #{$checkbox-card-min-width},
+      'checkbox-card-title-weight': #{$checkbox-card-title-weight},
+      'checkbox-card-description-color': #{$checkbox-card-description-color},
+      'checkbox-card-indicator-size': #{$checkbox-card-indicator-size},
+      'checkbox-card-indicator-border-width':
+        #{$checkbox-card-indicator-border-width},
+      'checkbox-card-indicator-border-color':
+        #{$checkbox-card-indicator-border-color},
+      'checkbox-card-indicator-radius': #{$checkbox-card-indicator-radius},
+      'checkbox-card-check-color': #{$checkbox-card-check-color},
+      'checkbox-card-disabled-opacity': #{$checkbox-card-disabled-opacity},
+      'checkbox-card-transition-duration': #{$checkbox-card-transition-duration},
+    )
+  );
+}
+
+.#{iv.$class-prefix}checkbox-card {
+  display: block;
+  position: relative;
+  cursor: pointer;
+
+  // The native input, hidden the way Checkbox hides it. It still takes focus
+  // and clicks through the label.
+  > input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+  }
+
+  // The edge, laid over the whole card.
+  > .#{iv.$class-prefix}checkbox-card-content::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: cv.getVar('checkbox-card-border-width') solid
+      cv.getVar('checkbox-card-border-color');
+    border-radius: cv.getVar('card-radius');
+    pointer-events: none;
+    transition-property: border-color, border-width;
+    transition-duration: cv.getVar('checkbox-card-transition-duration');
+    transition-timing-function: ease;
+  }
+
+  &:hover
+    > input[type='checkbox']:enabled:not(:checked, :indeterminate)
+    + .#{iv.$class-prefix}checkbox-card-content::before {
+    border-color: cv.getVar('checkbox-card-hover-border-color');
+  }
+
+  > input[type='checkbox']:checked
+    + .#{iv.$class-prefix}checkbox-card-content::before,
+  > input[type='checkbox']:indeterminate
+    + .#{iv.$class-prefix}checkbox-card-content::before {
+    border-color: cv.getVar('checkbox-card-active-color');
+    border-width: cv.getVar('checkbox-card-checked-border-width');
+  }
+
+  // Keyboard focus: an outline around the whole card.
+  > input[type='checkbox']:focus-visible
+    + .#{iv.$class-prefix}checkbox-card-content::before {
+    outline: cv.getVar('checkbox-card-focus-width') solid
+      cv.getVar('checkbox-card-focus-color');
+    outline-offset: cv.getVar('checkbox-card-focus-offset');
+  }
+
+  > input[type='checkbox']:disabled
+    + .#{iv.$class-prefix}checkbox-card-content {
+    opacity: cv.getVar('checkbox-card-disabled-opacity');
+    cursor: not-allowed;
+  }
+
+  // The indicator follows the input's state, as Checkbox's box does.
+  > input[type='checkbox']:checked
+    + .#{iv.$class-prefix}checkbox-card-content
+    > .#{iv.$class-prefix}checkbox-card-check {
+    background-color: cv.getVar('checkbox-card-active-color');
+    border-color: cv.getVar('checkbox-card-active-color');
+
+    &::after {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  > input[type='checkbox']:indeterminate
+    + .#{iv.$class-prefix}checkbox-card-content
+    > .#{iv.$class-prefix}checkbox-card-check {
+    background-color: cv.getVar('checkbox-card-active-color');
+    border-color: cv.getVar('checkbox-card-active-color');
+
+    &::after {
+      opacity: 0;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60%;
+      height: cv.getVar('checkbox-card-indicator-border-width');
+      background-color: cv.getVar('checkbox-card-check-color');
+      border-radius: 1px;
+    }
+  }
+}
+
+// The content fills the card, the indicator beside the text. Bulma rounds a
+// `.card-content` only as the card's first or last child, and the input comes
+// first here, so the content takes the card's corners itself, or a themed
+// `--bulma-card-content-background-color` would show square ones.
+.#{iv.$class-prefix}checkbox-card-content {
+  display: flex;
+  align-items: flex-start;
+  gap: cv.getVar('checkbox-card-gap');
+  border-radius: inherit;
+}
+
+.#{iv.$class-prefix}checkbox-card-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  // Checkbox and Radio hold their box to 24px, the minimum target size. Here
+  // the whole card is the target, so the indicator has no floor and follows
+  // its size variable and the card's text size.
+  width: cv.getVar('checkbox-card-indicator-size');
+  height: cv.getVar('checkbox-card-indicator-size');
+  margin-top: max(
+    0px,
+    calc(
+      (#{$-line-height}em - #{cv.getVar('checkbox-card-indicator-size')}) / 2
+    )
+  );
+  border: cv.getVar('checkbox-card-indicator-border-width') solid
+    cv.getVar('checkbox-card-indicator-border-color');
+  border-radius: cv.getVar('checkbox-card-indicator-radius');
+  transition-property: background-color, border-color;
+  transition-duration: cv.getVar('checkbox-card-transition-duration');
+  transition-timing-function: ease;
+
+  // The check mark: the mask cuts the shape, the background color paints it.
+  &::after {
+    content: '';
+    position: absolute;
+    width: 85%;
+    height: 85%;
+    opacity: 0;
+    transform: scale(0.5);
+    transition-property: opacity, transform;
+    transition-duration: cv.getVar('checkbox-card-transition-duration');
+    transition-timing-function: ease;
+    background-color: cv.getVar('checkbox-card-check-color');
+    -webkit-mask-image: $-check-mark;
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: $-check-mark;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+}
+
+// Block spans, since a label holds phrasing content only.
+.#{iv.$class-prefix}checkbox-card-body {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: $-line-height;
+}
+
+// The title takes the card's own text color, so `textColor` reaches it too.
+.#{iv.$class-prefix}checkbox-card-title {
+  display: block;
+  font-weight: cv.getVar('checkbox-card-title-weight');
+}
+
+.#{iv.$class-prefix}checkbox-card-description {
+  display: block;
+  color: cv.getVar('checkbox-card-description-color');
+}
+
+// Color variants
+@each $name in 'primary', 'link', 'info', 'success', 'warning', 'danger' {
+  .#{iv.$class-prefix}checkbox-card.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        'checkbox-card-active-color': #{cv.getVar($name)},
+      )
+    );
+  }
+}
+
+// In a Checkboxes group, a wrapping row: the cards share it equally and wrap
+// before they get narrower than the minimum width.
+.#{iv.$class-prefix}checkboxes
+  > .#{iv.$class-prefix}checkbox-card.#{iv.$class-prefix}card {
+  flex: 1 1 0;
+  min-width: min(100%, #{cv.getVar('checkbox-card-min-width')});
+}
+
+// The group's gap, or a Bulma grid's, spaces the cards, so Bulma's margin
+// under a card goes, or the last card would stand taller than the rest.
+.#{iv.$class-prefix}checkboxes,
+.#{iv.$class-prefix}grid {
+  > .#{iv.$class-prefix}checkbox-card.#{iv.$class-prefix}card {
+    margin-bottom: 0;
+  }
+}
+
+// Forced colors repaints the edge in the text color and drops Bulma's
+// shadow, so a checked card names Highlight on an edge that stays thicker.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}checkbox-card {
+    > .#{iv.$class-prefix}checkbox-card-content::before {
+      border-color: CanvasText;
+    }
+
+    > input[type='checkbox']:checked
+      + .#{iv.$class-prefix}checkbox-card-content::before,
+    > input[type='checkbox']:indeterminate
+      + .#{iv.$class-prefix}checkbox-card-content::before {
+      border-color: Highlight;
+    }
+
+    > input[type='checkbox']:focus-visible
+      + .#{iv.$class-prefix}checkbox-card-content::before {
+      outline-color: Highlight;
+    }
+
+    > input[type='checkbox']:disabled
+      + .#{iv.$class-prefix}checkbox-card-content {
+      color: GrayText;
+
+      &::before {
+        border-color: GrayText;
+      }
+    }
+
+    .#{iv.$class-prefix}checkbox-card-check {
+      border-color: ButtonText;
+    }
+
+    > input[type='checkbox']:checked
+      + .#{iv.$class-prefix}checkbox-card-content
+      > .#{iv.$class-prefix}checkbox-card-check {
+      background-color: Highlight;
+      border-color: Highlight;
+
+      &::after {
+        background-color: HighlightText;
+      }
+    }
+
+    // A mixed fill and its dash would be repainted in one color, leaving an
+    // empty box, so the dash takes a color of its own.
+    > input[type='checkbox']:indeterminate
+      + .#{iv.$class-prefix}checkbox-card-content
+      > .#{iv.$class-prefix}checkbox-card-check {
+      background-color: Canvas;
+      border-color: Highlight;
+
+      &::before {
+        background-color: CanvasText;
+      }
+    }
+
+    > input[type='checkbox']:disabled
+      + .#{iv.$class-prefix}checkbox-card-content
+      > .#{iv.$class-prefix}checkbox-card-check {
+      border-color: GrayText;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}checkbox-card {
+    > .#{iv.$class-prefix}checkbox-card-content::before,
+    .#{iv.$class-prefix}checkbox-card-check,
+    .#{iv.$class-prefix}checkbox-card-check::after {
+      transition: none;
+    }
+  }
+}