@allxsmith/bestax-bulma 5.63.0 → 5.65.0

package/src/scss/CLAUDE.md

@@ -16,6 +16,9 @@ of their own — Bulma provides it. A partial exists only for components that ex
   It loads no Bulma module, since tests compile it with only this folder on the load path
 - `_selected-row.scss` — `extras-selected-table-cell`, the cells Checkbox's and Radio's
   selected-row rules share; it reads Bulma's `$colors`, which is why it isn't in `_mixins.scss`
+- `_input-trigger.scss` — `extras-input-trigger`, a button laid over an input's right edge, which
+  the date and time pickers' launcher and PasswordInput's toggle share; it reads Bulma's class
+  prefix and variables, so it isn't in `_mixins.scss` either
 - `versions/` — the flavor builds: `bestax-prefixed`, `bestax-no-helpers`, `bestax-no-dark-mode`,
   `bestax-no-helpers-prefixed`. A new partial is included by all of them automatically (they reuse
   the same `_index` imports), but must **work** under each — especially the prefixed build.

package/src/scss/_input-trigger.scss

@@ -0,0 +1,76 @@
+// Bestax Extras - a button inside an input
+// The rule the date and time pickers' launcher and PasswordInput's toggle
+// share, so the two can't drift apart. It reads Bulma's class prefix and
+// variables, so it lives here rather than in `_mixins.scss`, which compiles
+// with no Bulma to load, and it emits nothing until it's included.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use 'mixins' as *;
+
+// A button over the input's right edge, in Bulma's 2.5em icon slot. Bulma's
+// Control icons are decorative (`pointer-events: none`), so a button there
+// needs rules of its own. Include it on the element that holds the input and
+// the button, which it positions. A content block, when given, lands in that
+// element's own rule, after its `position`: the pickers register the
+// variables they pass in there.
+//
+// `$trigger` is the button's class, without the prefix. `$width` is the slot,
+// which the input keeps as padding so typed text never slides under the
+// button; `$color` and `$hover-color` are the button's, and
+// `$disabled-opacity` a disabled one's. Each is usually a `cv.getVar()`, so
+// every value a theme can change is a registered variable. The color change
+// on hover takes Bulma's duration and easing through `extras-transition`. The
+// button takes the input's `is-small`, `is-medium` or `is-large` font size,
+// so its em-based width tracks the input's.
+@mixin extras-input-trigger(
+  $trigger,
+  $width,
+  $color,
+  $hover-color,
+  $disabled-opacity
+) {
+  position: relative;
+  @content;
+
+  > .#{iv.$class-prefix}input {
+    padding-right: $width;
+  }
+
+  > .#{iv.$class-prefix}#{$trigger} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    height: 100%;
+    width: $width;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: $color;
+    cursor: pointer;
+    @include extras-transition(color);
+
+    .#{iv.$class-prefix}icon {
+      pointer-events: none;
+    }
+
+    &:hover:not(:disabled) {
+      color: $hover-color;
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: $disabled-opacity;
+    }
+  }
+
+  @each $size in 'small', 'medium', 'large' {
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-#{$size}
+      ~ .#{iv.$class-prefix}#{$trigger} {
+      font-size: cv.getVar('size-#{$size}');
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -13,8 +13,10 @@
 @use 'toast';
 @use 'dialog';
 @use 'carousel';
+@use 'lightbox';
 @use 'tabs';
 @use 'menu';
+@use 'tableofcontents';
 @use 'reveal';
 @use 'avatar';
 @use 'avatars';

package/src/scss/components/_lightbox.scss

@@ -0,0 +1,392 @@
+// Bestax Extras - Lightbox Styles
+// Bulma's image modal, finished: `.modal` with its near-black background and
+// `.modal-close.is-large`, the image centred as large as the viewer allows,
+// a bar along the top with the counter and the zoom buttons, round previous
+// and next buttons at the inline edges, and the caption under the image.
+//
+// The root carries both `modal` and `lightbox`, so these rules outrank
+// Bulma's `.modal` ones in either stylesheet order. The space around the
+// image takes no pointer events, so a click there lands on
+// `.modal-background`, which closes the viewer.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// Carousel's overlay arrows, light controls on a dark tint in either scheme.
+// The same values rather than an `@use` of `_carousel.scss`, which would put
+// the carousel's whole stylesheet into a modular build that asks only for
+// this one.
+$lightbox-arrow-background: hsla(
+  #{cv.getVar('scheme-h')},
+  #{cv.getVar('scheme-s')},
+  #{cv.getVar('scheme-invert-l')},
+  0.3
+) !default;
+$lightbox-arrow-background-hover: hsla(
+  #{cv.getVar('scheme-h')},
+  #{cv.getVar('scheme-s')},
+  #{cv.getVar('scheme-invert-l')},
+  0.5
+) !default;
+$lightbox-arrow-color: cv.getVar('white') !default;
+$lightbox-arrow-size: 3rem !default;
+$lightbox-arrow-offset: 1rem !default;
+$lightbox-arrow-icon-size: 1.5rem !default;
+// The zoom buttons in the toolbar start from the arrows' look.
+$lightbox-toolbar-button-background: cv.getVar(
+  'lightbox-arrow-background'
+) !default;
+$lightbox-toolbar-button-background-hover: cv.getVar(
+  'lightbox-arrow-background-hover'
+) !default;
+$lightbox-toolbar-icon-size: 1.25rem !default;
+// The round buttons' border, transparent until forced colors draws it.
+$lightbox-button-border-width: 1px !default;
+// A button that does nothing at an end, or at a zoom limit.
+$lightbox-disabled-opacity: 0.4 !default;
+// The close button, the toolbar and the arrows sit over the image.
+$lightbox-controls-z-index: $extras-z-index-base !default;
+// The modal's background stays near-black in Bulma's dark theme too, so the
+// text on it is white in both.
+$lightbox-toolbar-color: cv.getVar('white') !default;
+$lightbox-toolbar-gap: 0.75rem !default;
+$lightbox-caption-color: cv.getVar('white') !default;
+$lightbox-caption-max-width: 40em !default;
+$lightbox-caption-padding: 0.75rem 1rem 0 !default;
+// A failed image's message and Retry, where the image would be.
+$lightbox-error-color: cv.getVar('lightbox-caption-color') !default;
+$lightbox-error-gap: 0.75rem !default;
+$lightbox-error-padding: 1rem !default;
+$lightbox-loader-size: 2.5rem !default;
+// The band kept free above the image for the toolbar and the close button,
+// and below it, so the image stays centred.
+$lightbox-spacing: 4.5rem !default;
+// The image and its caption share the viewer's height less the two bands.
+$lightbox-image-max-height: calc(
+  100% - 2 * #{cv.getVar('lightbox-spacing')}
+) !default;
+// The fades and the zoom, timed and eased as Bulma's own transitions are.
+$lightbox-animation-duration: cv.getVar('duration') !default;
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox {
+  @include cv.register-vars(
+    (
+      'lightbox-arrow-background': #{$lightbox-arrow-background},
+      'lightbox-arrow-background-hover': #{$lightbox-arrow-background-hover},
+      'lightbox-arrow-color': #{$lightbox-arrow-color},
+      'lightbox-arrow-size': #{$lightbox-arrow-size},
+      'lightbox-arrow-offset': #{$lightbox-arrow-offset},
+      'lightbox-arrow-icon-size': #{$lightbox-arrow-icon-size},
+      'lightbox-toolbar-button-background':
+        #{$lightbox-toolbar-button-background},
+      'lightbox-toolbar-button-background-hover':
+        #{$lightbox-toolbar-button-background-hover},
+      'lightbox-toolbar-icon-size': #{$lightbox-toolbar-icon-size},
+      'lightbox-button-border-width': #{$lightbox-button-border-width},
+      'lightbox-disabled-opacity': #{$lightbox-disabled-opacity},
+      'lightbox-controls-z-index': #{$lightbox-controls-z-index},
+      'lightbox-toolbar-color': #{$lightbox-toolbar-color},
+      'lightbox-toolbar-gap': #{$lightbox-toolbar-gap},
+      'lightbox-caption-color': #{$lightbox-caption-color},
+      'lightbox-caption-max-width': #{$lightbox-caption-max-width},
+      'lightbox-caption-padding': #{$lightbox-caption-padding},
+      'lightbox-error-color': #{$lightbox-error-color},
+      'lightbox-error-gap': #{$lightbox-error-gap},
+      'lightbox-error-padding': #{$lightbox-error-padding},
+      'lightbox-loader-size': #{$lightbox-loader-size},
+      'lightbox-spacing': #{$lightbox-spacing},
+      'lightbox-image-max-height': #{$lightbox-image-max-height},
+      'lightbox-animation-duration': #{$lightbox-animation-duration},
+      // Bulma's own, wide enough for the image with room for the arrows at
+      // either side, in place of its 40rem.
+      'modal-content-width': calc(
+          100% - 2 *
+            (
+              #{cv.getVar('lightbox-arrow-size')} + 2 *
+                #{cv.getVar('lightbox-arrow-offset')}
+            )
+        ),
+    )
+  );
+}
+
+// ---- The viewer ---------------------------------------------------------------
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox.#{iv.$class-prefix}is-active {
+  animation: extras-fade-in cv.getVar('lightbox-animation-duration')
+    $extras-easing;
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox:focus {
+  outline: none;
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  > .#{iv.$class-prefix}modal-close {
+  z-index: cv.getVar('lightbox-controls-z-index');
+}
+
+// The image's area: the viewer's width less the arrows' room from a tablet
+// up, and its whole width below, where the arrows sit over the image.
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  > .#{iv.$class-prefix}modal-content {
+  height: cv.getVar('lightbox-image-max-height');
+  max-height: none;
+  margin: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+// ---- The toolbar ----------------------------------------------------------------
+
+.#{iv.$class-prefix}lightbox-toolbar {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: cv.getVar('lightbox-controls-z-index');
+  display: flex;
+  align-items: center;
+  gap: cv.getVar('lightbox-toolbar-gap');
+  min-height: cv.getVar('lightbox-spacing');
+  // Level with the close button, and clear of it.
+  padding-block: cv.getVar('modal-close-top');
+  padding-inline: cv.getVar('modal-close-right')
+    calc(
+      #{cv.getVar('modal-close-right')} * 2 +
+        #{cv.getVar('modal-close-dimensions')}
+    );
+  color: cv.getVar('lightbox-toolbar-color');
+  pointer-events: none;
+
+  > .#{iv.$class-prefix}buttons {
+    flex-wrap: nowrap;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+  }
+}
+
+.#{iv.$class-prefix}lightbox-progress {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+// ---- The buttons over the dark background ------------------------------------------
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-toolbar
+  .#{iv.$class-prefix}button,
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-arrow {
+  align-items: center;
+  justify-content: center;
+  width: cv.getVar('modal-close-dimensions');
+  height: cv.getVar('modal-close-dimensions');
+  padding: 0;
+  // Transparent until forced colors draws it.
+  border: cv.getVar('lightbox-button-border-width') solid transparent;
+  border-radius: cv.getVar('radius-rounded');
+  pointer-events: auto;
+
+  // Bulma's ring is a link-colored shadow, under 3:1 on the near-black
+  // background and gone in forced colors, so an outline in the buttons' own
+  // color takes its place.
+  &:focus-visible {
+    @include extras-focus-outline;
+    outline-color: currentColor;
+    box-shadow: none;
+  }
+
+  &[aria-disabled='true'] {
+    opacity: cv.getVar('lightbox-disabled-opacity');
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-toolbar
+  .#{iv.$class-prefix}button {
+  background-color: cv.getVar('lightbox-toolbar-button-background');
+  color: cv.getVar('lightbox-toolbar-color');
+
+  &:hover:not([aria-disabled='true']) {
+    background-color: cv.getVar('lightbox-toolbar-button-background-hover');
+  }
+
+  svg {
+    width: cv.getVar('lightbox-toolbar-icon-size');
+    height: cv.getVar('lightbox-toolbar-icon-size');
+  }
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+  .#{iv.$class-prefix}lightbox-arrow {
+  position: absolute;
+  inset-block-start: 50%;
+  z-index: cv.getVar('lightbox-controls-z-index');
+  width: cv.getVar('lightbox-arrow-size');
+  height: cv.getVar('lightbox-arrow-size');
+  transform: translateY(-50%);
+  background-color: cv.getVar('lightbox-arrow-background');
+  color: cv.getVar('lightbox-arrow-color');
+
+  &:hover:not([aria-disabled='true']) {
+    background-color: cv.getVar('lightbox-arrow-background-hover');
+  }
+
+  &.#{iv.$class-prefix}is-prev {
+    inset-inline-start: cv.getVar('lightbox-arrow-offset');
+  }
+
+  &.#{iv.$class-prefix}is-next {
+    inset-inline-end: cv.getVar('lightbox-arrow-offset');
+  }
+
+  svg {
+    width: cv.getVar('lightbox-arrow-icon-size');
+    height: cv.getVar('lightbox-arrow-icon-size');
+  }
+
+  // Right to left, the previous button is on the right, so its chevron
+  // points that way.
+  svg:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}
+
+// ---- The image and its caption -----------------------------------------------------
+
+// One cell the image fills, with the caption under it. The image, the one
+// fading out over it, the Loader and the error share the cell.
+.#{iv.$class-prefix}lightbox-figure {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  height: 100%;
+  margin: 0;
+  position: relative;
+  transition: transform cv.getVar('lightbox-animation-duration') $extras-easing;
+
+  > :not(.#{iv.$class-prefix}lightbox-caption) {
+    grid-area: 1 / 1;
+    place-self: center;
+  }
+}
+
+.#{iv.$class-prefix}lightbox-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  pointer-events: auto;
+  // Pinch zooms the image rather than the page, and a drag pans it.
+  touch-action: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform cv.getVar('lightbox-animation-duration') $extras-easing;
+
+  // Hidden until it loads, then faded in.
+  &.#{iv.$class-prefix}is-loading {
+    opacity: 0;
+  }
+
+  &:not(.#{iv.$class-prefix}is-loading):not(.#{iv.$class-prefix}is-leaving) {
+    animation: extras-fade-in cv.getVar('lightbox-animation-duration')
+      $extras-easing;
+  }
+
+  // The image before it, on top, shown until the new one has loaded and then
+  // faded out as that one fades in. Animations rather than transitions, so
+  // the fades run for an image that was already loaded too.
+  &.#{iv.$class-prefix}is-leaving {
+    pointer-events: none;
+  }
+
+  &:not(.#{iv.$class-prefix}is-loading)
+    + .#{iv.$class-prefix}lightbox-image.#{iv.$class-prefix}is-leaving {
+    animation: extras-fade-out cv.getVar('lightbox-animation-duration')
+      $extras-easing forwards;
+  }
+}
+
+.#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox.#{iv.$class-prefix}is-zoomed
+  .#{iv.$class-prefix}lightbox-image {
+  cursor: grab;
+}
+
+.#{iv.$class-prefix}lightbox-caption {
+  justify-self: center;
+  max-width: cv.getVar('lightbox-caption-max-width');
+  padding: cv.getVar('lightbox-caption-padding');
+  color: cv.getVar('lightbox-caption-color');
+  text-align: center;
+  pointer-events: auto;
+}
+
+.#{iv.$class-prefix}lightbox-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: cv.getVar('lightbox-error-gap');
+  padding: cv.getVar('lightbox-error-padding');
+  color: cv.getVar('lightbox-error-color');
+  text-align: center;
+  pointer-events: auto;
+}
+
+.#{iv.$class-prefix}lightbox-figure > .#{iv.$class-prefix}loader {
+  font-size: cv.getVar('lightbox-loader-size');
+}
+
+// ---- The trigger ----------------------------------------------------------------------
+
+// A button around a thumbnail, drawn as the thumbnail: no button chrome, as
+// wide as the column or cell it's in, since a ratio `Image` has no width of
+// its own, and an outline around what it holds. `:where()` keeps all of it
+// at no specificity, so a trigger given Bulma's `button` class looks and
+// sizes like a Bulma button instead.
+:where(.#{iv.$class-prefix}lightbox-trigger) {
+  @include extras-button-reset;
+  text-align: inherit;
+}
+
+:where(.#{iv.$class-prefix}lightbox-trigger:not(.#{iv.$class-prefix}button)) {
+  display: block;
+  width: 100%;
+
+  &:focus-visible {
+    @include extras-focus-outline;
+  }
+}
+
+// ---- Motion and forced colors ------------------------------------------------------------
+
+// The fades are on selectors more specific than these, hence `!important`.
+// Script keeps no outgoing image under reduced motion either.
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox.#{iv.$class-prefix}is-active,
+  .#{iv.$class-prefix}lightbox-image {
+    animation: none !important;
+  }
+
+  .#{iv.$class-prefix}lightbox-figure,
+  .#{iv.$class-prefix}lightbox-image {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+    .#{iv.$class-prefix}lightbox-toolbar
+    .#{iv.$class-prefix}button,
+  .#{iv.$class-prefix}modal.#{iv.$class-prefix}lightbox
+    .#{iv.$class-prefix}lightbox-arrow {
+    border-color: ButtonText;
+
+    &[aria-disabled='true'] {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+}

package/src/scss/components/_tableofcontents.scss

@@ -0,0 +1,42 @@
+// Bestax Extras - TableOfContents Styles
+// A table of contents is Bulma's menu as it is: `.menu` on its `<nav>`, a
+// `.menu-label` title, `.menu-list` links and `is-active` on the current one,
+// so every `--bulma-menu-*` variable themes it. This adds only the opt-in
+// sticky position, for a column that doesn't stick by itself.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// How far below the viewport's top a sticky list stops. Under a fixed
+// navbar, make it the navbar's height plus this.
+$table-of-contents-sticky-top: cv.getVar('block-spacing') !default;
+
+.#{iv.$class-prefix}table-of-contents {
+  @include cv.register-vars(
+    (
+      'table-of-contents-sticky-top': #{$table-of-contents-sticky-top},
+    )
+  );
+}
+
+// Bulma's focus ring, which sits this far outside a link.
+$-focus-ring: calc(#{cv.getVar('focus-width')} + #{cv.getVar('focus-offset')});
+
+// It stays in view as the page scrolls, and a list taller than the room left
+// below its top scrolls itself, so its end can still be reached. The room is
+// measured in `dvh`, the viewport as it is now, so a phone's toolbar doesn't
+// cover the list's end, and in `vh` where `dvh` isn't known. Scrolling clips
+// what's outside it, so it keeps room around it for a link's focus ring, at
+// the sides and above the first link and below the last, and gives that room
+// back with a margin, so the links stay where they are.
+.#{iv.$class-prefix}table-of-contents.#{iv.$class-prefix}is-sticky {
+  margin-block: calc(-1 * #{$-focus-ring});
+  margin-inline: calc(-1 * #{$-focus-ring});
+  max-height: calc(100vh - #{cv.getVar('table-of-contents-sticky-top')});
+  max-height: calc(100dvh - #{cv.getVar('table-of-contents-sticky-top')});
+  overflow-y: auto;
+  padding-block: $-focus-ring;
+  padding-inline: $-focus-ring;
+  position: sticky;
+  top: cv.getVar('table-of-contents-sticky-top');
+}

package/src/scss/form/_index.scss

@@ -24,5 +24,6 @@
 @use 'dropzone';
 @use 'colorpicker';
 @use 'colorinput';
+@use 'passwordinput';
 @use 'fieldset';
 @use 'field';

package/src/scss/form/_passwordinput.scss

@@ -0,0 +1,112 @@
+// Bestax Extras - PasswordInput Styles
+// A password field with a button inside it that shows what was typed. Bulma's
+// Control icons take no clicks, so the toggle is a real button laid over the
+// input's right edge, with the date pickers' launcher rule, which the two
+// share through the `extras-input-trigger` mixin.
+//
+// The toggle sits on the physical right, as the pickers' launcher and Bulma's
+// right icon do, so in a right-to-left page it's at the start of the field
+// rather than its end. Moving them to the inline end is one change, for all
+// of them together.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../mixins' as *;
+@use '../input-trigger' as *;
+
+// The toggle's room, in em so it tracks the input's size, as Bulma's icon
+// slot does. The words need more room than the eye; a longer translation
+// sets its own.
+$password-input-toggle-width: 2.5em !default;
+$password-input-toggle-text-width: 4.5em !default;
+$password-input-toggle-color: cv.getVar('text') !default;
+$password-input-toggle-hover-color: cv.getVar('text-strong') !default;
+$password-input-toggle-disabled-opacity: 0.5 !default;
+
+.#{iv.$class-prefix}password-input-container {
+  @include cv.register-vars(
+    (
+      'password-input-toggle-width': #{$password-input-toggle-width},
+      'password-input-toggle-text-width': #{$password-input-toggle-text-width},
+      'password-input-toggle-color': #{$password-input-toggle-color},
+      'password-input-toggle-hover-color': #{$password-input-toggle-hover-color},
+      'password-input-toggle-disabled-opacity': #{$password-input-toggle-disabled-opacity},
+    )
+  );
+}
+
+.#{iv.$class-prefix}password-input-container {
+  @include extras-input-trigger(
+    $trigger: 'password-input-toggle',
+    $width: cv.getVar('password-input-toggle-width'),
+    $color: cv.getVar('password-input-toggle-color'),
+    $hover-color: cv.getVar('password-input-toggle-hover-color'),
+    $disabled-opacity: cv.getVar('password-input-toggle-disabled-opacity')
+  );
+
+  // Bulma gives a rounded input its own side padding at two classes, which
+  // ties the rule above; at three this wins whichever sheet loads first.
+  > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-rounded {
+    padding-right: cv.getVar('password-input-toggle-width');
+  }
+
+  &.#{iv.$class-prefix}is-text {
+    > .#{iv.$class-prefix}input,
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-rounded {
+      padding-right: cv.getVar('password-input-toggle-text-width');
+    }
+
+    > .#{iv.$class-prefix}password-input-toggle {
+      width: cv.getVar('password-input-toggle-text-width');
+    }
+  }
+
+  > .#{iv.$class-prefix}password-input-toggle {
+    // The input's own size, which the size modifiers above change, wherever
+    // the field sits; a button otherwise takes the text's around it.
+    font-family: inherit;
+    font-size: cv.getVar('size-normal');
+    line-height: 1;
+
+    &:focus-visible {
+      @include extras-focus-outline;
+    }
+  }
+
+  // Edge draws its own reveal button in a password field, which would make
+  // two.
+  > .#{iv.$class-prefix}input::-ms-reveal {
+    display: none;
+  }
+}
+
+// Bulma sizes and colors a left icon from the input beside it
+// (`.input.is-small ~ .icon`). Here the input sits one level down, in the
+// container, so these say the same from the container.
+.#{iv.$class-prefix}control.#{iv.$class-prefix}has-icons-left
+  > .#{iv.$class-prefix}password-input-container {
+  @each $size in 'small', 'medium', 'large' {
+    &:has(> .#{iv.$class-prefix}input.#{iv.$class-prefix}is-#{$size})
+      ~ .#{iv.$class-prefix}icon {
+      font-size: cv.getVar('size-#{$size}');
+    }
+  }
+
+  &:has(> .#{iv.$class-prefix}input:hover) ~ .#{iv.$class-prefix}icon {
+    color: cv.getVar('input-icon-hover-color');
+  }
+
+  &:has(> .#{iv.$class-prefix}input:focus) ~ .#{iv.$class-prefix}icon {
+    color: cv.getVar('input-icon-focus-color');
+  }
+}
+
+// In forced colors the toggle's glyph and words take the system's button
+// text, and a disabled one the system's gray, as a native button's do.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}password-input-container
+    > .#{iv.$class-prefix}password-input-toggle:disabled {
+    color: GrayText;
+    opacity: 1;
+  }
+}