@allxsmith/bestax-bulma 2.6.2 → 3.0.2

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

@@ -0,0 +1,185 @@
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$picker-popover-z-index: 30 !default;
+$picker-popover-background: cv.getVar('scheme-main') !default;
+$picker-popover-radius: cv.getVar('radius-large') !default;
+$picker-popover-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.18) !default;
+$picker-popover-border-color: cv.getVar('border') !default;
+$picker-popover-padding: 0.75rem !default;
+$picker-popover-offset: 4px !default;
+$picker-popover-animation-duration: 0.15s !default;
+$picker-trigger-width: 2.5em !default;
+$picker-trigger-color: cv.getVar('text') !default;
+$picker-trigger-hover-color: cv.getVar('text-strong') !default;
+
+.#{iv.$class-prefix}picker-popover {
+  @include cv.register-vars(
+    (
+      'picker-popover-z-index': #{$picker-popover-z-index},
+      'picker-popover-background': #{$picker-popover-background},
+      'picker-popover-radius': #{$picker-popover-radius},
+      'picker-popover-shadow': #{$picker-popover-shadow},
+      'picker-popover-border-color': #{$picker-popover-border-color},
+      'picker-popover-padding': #{$picker-popover-padding},
+      'picker-popover-offset': #{$picker-popover-offset},
+      'picker-popover-animation-duration': #{$picker-popover-animation-duration},
+    )
+  );
+}
+
+.#{iv.$class-prefix}picker-popover {
+  position: absolute;
+  z-index: cv.getVar('picker-popover-z-index');
+  background-color: cv.getVar('picker-popover-background');
+  border: 1px solid cv.getVar('picker-popover-border-color');
+  border-radius: cv.getVar('picker-popover-radius');
+  box-shadow: cv.getVar('picker-popover-shadow');
+  padding: cv.getVar('picker-popover-padding');
+  outline: none;
+  animation: picker-popover-fade-in
+    cv.getVar('picker-popover-animation-duration') ease;
+
+  &.#{iv.$class-prefix}is-bottom-left {
+    top: calc(100% + cv.getVar('picker-popover-offset'));
+    left: 0;
+  }
+  &.#{iv.$class-prefix}is-bottom-right {
+    top: calc(100% + cv.getVar('picker-popover-offset'));
+    right: 0;
+  }
+  &.#{iv.$class-prefix}is-top-left {
+    bottom: calc(100% + cv.getVar('picker-popover-offset'));
+    left: 0;
+  }
+  &.#{iv.$class-prefix}is-top-right {
+    bottom: calc(100% + cv.getVar('picker-popover-offset'));
+    right: 0;
+  }
+  &.#{iv.$class-prefix}is-portal {
+    position: fixed;
+  }
+}
+
+@keyframes picker-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}picker-popover {
+    animation: none;
+  }
+}
+
+// Bulma sizes the Control's icon via `.input.is-small ~ .icon { font-size }`
+// — a sibling selector. The picker bases wrap their input in a *-container
+// div, so the input is no longer a direct sibling of the icon and that
+// cascade is broken: the icon stays at the default font-size, leaving it
+// vertically off-center inside a sized control. Restore the cascade by
+// matching the icon as a sibling of the picker container instead.
+$picker-containers: (
+  '#{iv.$class-prefix}dateinput-container',
+  '#{iv.$class-prefix}timeinput-container',
+  '#{iv.$class-prefix}datetimeinput-container'
+);
+@each $container in $picker-containers {
+  .#{iv.$class-prefix}control.#{iv.$class-prefix}is-small
+    .#{$container}
+    ~ .#{iv.$class-prefix}icon {
+    font-size: cv.getVar('size-small');
+  }
+  .#{iv.$class-prefix}control.#{iv.$class-prefix}is-medium
+    .#{$container}
+    ~ .#{iv.$class-prefix}icon {
+    font-size: cv.getVar('size-medium');
+  }
+  .#{iv.$class-prefix}control.#{iv.$class-prefix}is-large
+    .#{$container}
+    ~ .#{iv.$class-prefix}icon {
+    font-size: cv.getVar('size-large');
+  }
+}
+
+// Right-side launcher button. The picker bases render this real <button>
+// inside their *-container (Bulma's Control icons are decorative —
+// `pointer-events: none` — so they can't open the popover). It toggles the
+// popover and is keyboard-focusable. Sizing mirrors Bulma's 2.5em icon slot
+// and tracks the input's size modifier via the sibling selector.
+$picker-trigger-pairs: (
+  ('#{iv.$class-prefix}dateinput-container' '#{iv.$class-prefix}dateinput-trigger'),
+  ('#{iv.$class-prefix}timeinput-container' '#{iv.$class-prefix}timeinput-trigger'),
+  (
+    '#{iv.$class-prefix}datetimeinput-container'
+      '#{iv.$class-prefix}datetimeinput-trigger'
+  )
+);
+
+@each $pair in $picker-trigger-pairs {
+  $container: nth($pair, 1);
+  $trigger: nth($pair, 2);
+
+  .#{$container} {
+    position: relative;
+    @include cv.register-vars(
+      (
+        'picker-trigger-width': #{$picker-trigger-width},
+        'picker-trigger-color': #{$picker-trigger-color},
+        'picker-trigger-hover-color': #{$picker-trigger-hover-color},
+      )
+    );
+
+    // Reserve room so typed text doesn't slide under the launcher.
+    > .#{iv.$class-prefix}input {
+      padding-right: cv.getVar('picker-trigger-width');
+    }
+
+    > .#{$trigger} {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 4;
+      height: 100%;
+      width: cv.getVar('picker-trigger-width');
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: cv.getVar('picker-trigger-color');
+      cursor: pointer;
+      transition: color 0.15s ease;
+
+      .#{iv.$class-prefix}icon {
+        pointer-events: none;
+      }
+
+      &:hover:not(:disabled) {
+        color: cv.getVar('picker-trigger-hover-color');
+      }
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+
+    // Match the launcher's font-size to the input's size modifier so its
+    // em-based width tracks the control.
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-small ~ .#{$trigger} {
+      font-size: cv.getVar('size-small');
+    }
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-medium ~ .#{$trigger} {
+      font-size: cv.getVar('size-medium');
+    }
+    > .#{iv.$class-prefix}input.#{iv.$class-prefix}is-large ~ .#{$trigger} {
+      font-size: cv.getVar('size-large');
+    }
+  }
+}

package/src/scss/form/_radio.scss

@@ -0,0 +1,196 @@
+// Themed Radio styles
+// Custom-styled radio button with colors, sizes, and visual states
+// Follows Bulma v1 CSS variable convention (see _dialog.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Radio-specific SCSS variables
+$radio-size: 1.25em !default;
+$radio-border-width: 2px !default;
+$radio-border-color: cv.getVar("border") !default;
+$radio-background: transparent !default;
+$radio-dot-color: cv.getVar("scheme-main") !default;
+$radio-active-color: cv.getVar("primary") !default;
+$radio-label-gap: 0.5em !default;
+$radio-focus-shadow-size: 0 0 0 0.125em !default;
+$radio-transition-duration: cv.getVar("duration") !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}styled-radio {
+  @include cv.register-vars(
+    (
+      "radio-size": #{$radio-size},
+      "radio-border-width": #{$radio-border-width},
+      "radio-border-color": #{$radio-border-color},
+      "radio-background": #{$radio-background},
+      "radio-dot-color": #{$radio-dot-color},
+      "radio-active-color": #{$radio-active-color},
+      "radio-label-gap": #{$radio-label-gap},
+      "radio-focus-shadow-size": #{$radio-focus-shadow-size},
+      "radio-transition-duration": #{$radio-transition-duration},
+    )
+  );
+}
+
+// Main radio label
+.#{iv.$class-prefix}styled-radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  line-height: 1.5;
+
+  // Hidden native input
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    // Checked state
+    &:checked + .check {
+      border-color: cv.getVar("radio-active-color");
+
+      // Inner dot
+      &::before {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+
+    // Focus-visible state (keyboard only)
+    &:focus-visible + .check {
+      outline: 2px solid cv.getVar("radio-active-color");
+      outline-offset: 2px;
+    }
+
+    // Disabled state
+    &:disabled + .check {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .control-label {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  // Custom radio indicator
+  .check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    width: cv.getVar("radio-size");
+    height: cv.getVar("radio-size");
+    min-width: 24px;
+    min-height: 24px;
+    background-color: cv.getVar("radio-background");
+    border: cv.getVar("radio-border-width") solid cv.getVar("radio-border-color");
+    border-radius: 50%;
+    transition-property: border-color;
+    transition-duration: cv.getVar("radio-transition-duration");
+    transition-timing-function: ease;
+
+    // Inner dot
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      background-color: cv.getVar("radio-active-color");
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.5);
+      transition-property: opacity, transform;
+      transition-duration: cv.getVar("radio-transition-duration");
+      transition-timing-function: ease;
+    }
+  }
+
+  // Label text
+  .control-label {
+    margin-left: cv.getVar("radio-label-gap");
+    line-height: 1.5;
+  }
+}
+
+// Color variants
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}styled-radio.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        "radio-active-color": #{cv.getVar($name)},
+      )
+    );
+  }
+}
+
+// Size variants
+.#{iv.$class-prefix}styled-radio.#{iv.$class-prefix}is-small {
+  font-size: cv.getVar("size-small");
+}
+
+.#{iv.$class-prefix}styled-radio.#{iv.$class-prefix}is-medium {
+  font-size: cv.getVar("size-medium");
+}
+
+.#{iv.$class-prefix}styled-radio.#{iv.$class-prefix}is-large {
+  font-size: cv.getVar("size-large");
+}
+
+// High Contrast Mode support
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}styled-radio {
+    .check {
+      border-color: ButtonText;
+    }
+
+    input[type="radio"]:checked + .check {
+      border-color: Highlight;
+
+      &::before {
+        background-color: Highlight;
+      }
+    }
+
+    input[type="radio"]:focus-visible + .check {
+      outline-color: Highlight;
+    }
+
+    input[type="radio"]:disabled + .check {
+      border-color: GrayText;
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}styled-radio {
+    .check,
+    .check::before {
+      transition: none;
+    }
+  }
+}
+
+// Vertical alignment for horizontal-field layouts.
+// Bulma applies `padding-top: 0.375em` to `.field-label.is-normal` so its
+// baseline aligns with the text inside `.input`. Our themed radios have no
+// internal padding, so without this match they sit ~6px higher than the
+// field-label and look misaligned. Apply the same padding on the radios
+// wrapper, but only inside a horizontal field-body so vertical/standalone
+// usage is unaffected.
+.#{iv.$class-prefix}field.#{iv.$class-prefix}is-horizontal {
+  .#{iv.$class-prefix}field-body {
+    .#{iv.$class-prefix}radios {
+      padding-top: 0.375em;
+    }
+  }
+}

package/src/scss/form/_rate.scss

@@ -0,0 +1,307 @@
+// Rate Component Styles
+// A star/icon-based rating component
+// Follows Bulma v1 CSS variable convention (see _dialog.scss, _checkbox.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Rate-specific SCSS variables
+$rate-color-inactive: cv.getVar("grey-light") !default;
+$rate-color-active: hsl(48, 100%, 50%) !default;
+$rate-color-hover: hsl(48, 100%, 67%) !default;
+$rate-icon-size: 1.5em !default;
+$rate-icon-size-small: 1em !default;
+$rate-icon-size-medium: 2em !default;
+$rate-icon-size-large: 2.5em !default;
+$rate-font-icon-size: 1.35em !default;
+$rate-font-icon-size-small: 0.9em !default;
+$rate-font-icon-size-medium: 1.8em !default;
+$rate-font-icon-size-large: 2.25em !default;
+$rate-gap: 0.5rem !default;
+$rate-spaced-gap: 0.25rem !default;
+$rate-score-weight: 600 !default;
+$rate-score-color: cv.getVar("text-strong") !default;
+$rate-text-color: cv.getVar("text") !default;
+$rate-text-size: 0.875em !default;
+$rate-transition-duration: cv.getVar("duration") !default;
+$rate-disabled-opacity: 0.5 !default;
+$rate-pop-scale: 1.2 !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}rate {
+  @include cv.register-vars(
+    (
+      "rate-color-inactive": #{$rate-color-inactive},
+      "rate-color-active": #{$rate-color-active},
+      "rate-color-hover": #{$rate-color-hover},
+      "rate-icon-size": #{$rate-icon-size},
+      "rate-icon-size-small": #{$rate-icon-size-small},
+      "rate-icon-size-medium": #{$rate-icon-size-medium},
+      "rate-icon-size-large": #{$rate-icon-size-large},
+      "rate-font-icon-size": #{$rate-font-icon-size},
+      "rate-font-icon-size-small": #{$rate-font-icon-size-small},
+      "rate-font-icon-size-medium": #{$rate-font-icon-size-medium},
+      "rate-font-icon-size-large": #{$rate-font-icon-size-large},
+      "rate-gap": #{$rate-gap},
+      "rate-spaced-gap": #{$rate-spaced-gap},
+      "rate-score-weight": #{$rate-score-weight},
+      "rate-score-color": #{$rate-score-color},
+      "rate-text-color": #{$rate-text-color},
+      "rate-text-size": #{$rate-text-size},
+      "rate-transition-duration": #{$rate-transition-duration},
+      "rate-disabled-opacity": #{$rate-disabled-opacity},
+      "rate-pop-scale": #{$rate-pop-scale},
+    )
+  );
+}
+
+// Main container
+.#{iv.$class-prefix}rate {
+  display: inline-flex;
+  align-items: center;
+  gap: cv.getVar("rate-gap");
+  min-height: cv.getVar("control-height");
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid cv.getVar("link");
+    outline-offset: 2px;
+    border-radius: cv.getVar("radius");
+  }
+}
+
+// Icons container
+.#{iv.$class-prefix}rate-items {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+// Individual icon
+.#{iv.$class-prefix}rate-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: cv.getVar("rate-color-inactive");
+  transition: color cv.getVar("rate-transition-duration") ease,
+    transform 0.1s ease;
+
+  svg {
+    width: cv.getVar("rate-icon-size");
+    height: cv.getVar("rate-icon-size");
+  }
+
+  // Font icon sizing — tuned for MDI/Material which are designed for 24px grid.
+  // FA has a wider star glyph (~12.5% beyond em-box) so it gets scaled down.
+  .#{iv.$class-prefix}icon {
+    font-size: cv.getVar("rate-font-icon-size");
+    overflow: hidden;
+
+    .fas, .far, .fab, .fal, .fad, .fat,
+    .fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone, .fa-thin {
+      font-size: 0.88em;
+    }
+  }
+
+
+  &:hover:not(.#{iv.$class-prefix}is-active) {
+    color: cv.getVar("rate-color-hover");
+    transform: scale(1.1);
+  }
+
+  &.#{iv.$class-prefix}is-active {
+    color: cv.getVar("rate-color-active");
+  }
+
+  &.#{iv.$class-prefix}is-hovered {
+    color: cv.getVar("rate-color-hover");
+    transform: scale(1.1);
+  }
+}
+
+// Partial fill (precision < 1)
+.#{iv.$class-prefix}rate-icon-partial {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{iv.$class-prefix}rate-icon-bg {
+  color: cv.getVar("rate-color-inactive");
+}
+
+.#{iv.$class-prefix}rate-icon-fg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: var(--rate-fill-percent, 100%);
+  color: cv.getVar("rate-color-active");
+}
+
+// Score display
+.#{iv.$class-prefix}rate-score {
+  font-weight: cv.getVar("rate-score-weight");
+  color: cv.getVar("rate-score-color");
+  min-width: 2em;
+  text-align: center;
+}
+
+// Text display
+.#{iv.$class-prefix}rate-text {
+  color: cv.getVar("rate-text-color");
+  font-size: cv.getVar("rate-text-size");
+}
+
+// Custom text display
+.#{iv.$class-prefix}rate-custom-text {
+  color: cv.getVar("rate-text-color");
+  font-size: cv.getVar("rate-text-size");
+}
+
+// Disabled state
+.#{iv.$class-prefix}rate.#{iv.$class-prefix}is-disabled {
+  opacity: cv.getVar("rate-disabled-opacity");
+  pointer-events: none;
+
+  .#{iv.$class-prefix}rate-item {
+    cursor: not-allowed;
+  }
+}
+
+// Spaced variant
+.#{iv.$class-prefix}rate.#{iv.$class-prefix}is-spaced {
+  .#{iv.$class-prefix}rate-items {
+    gap: cv.getVar("rate-spaced-gap");
+  }
+}
+
+// RTL support
+.#{iv.$class-prefix}rate.#{iv.$class-prefix}is-rtl {
+  .#{iv.$class-prefix}rate-items {
+    flex-direction: row-reverse;
+  }
+}
+
+// Size variants
+.#{iv.$class-prefix}rate.#{iv.$class-prefix}is-small {
+  .#{iv.$class-prefix}rate-item {
+    svg {
+      width: cv.getVar("rate-icon-size-small");
+      height: cv.getVar("rate-icon-size-small");
+    }
+
+    .#{iv.$class-prefix}icon {
+      font-size: cv.getVar("rate-font-icon-size-small");
+    }
+  }
+
+  .#{iv.$class-prefix}rate-score {
+    font-size: cv.getVar("size-small");
+  }
+
+  .#{iv.$class-prefix}rate-text,
+  .#{iv.$class-prefix}rate-custom-text {
+    font-size: 0.75rem;
+  }
+}
+
+.#{iv.$class-prefix}rate.#{iv.$class-prefix}is-medium {
+  .#{iv.$class-prefix}rate-item {
+    svg {
+      width: cv.getVar("rate-icon-size-medium");
+      height: cv.getVar("rate-icon-size-medium");
+    }
+
+    .#{iv.$class-prefix}icon {
+      font-size: cv.getVar("rate-font-icon-size-medium");
+    }
+  }
+
+  .#{iv.$class-prefix}rate-score {
+    font-size: cv.getVar("size-medium");
+  }
+
+  .#{iv.$class-prefix}rate-text,
+  .#{iv.$class-prefix}rate-custom-text {
+    font-size: 1rem;
+  }
+}
+
+.#{iv.$class-prefix}rate.#{iv.$class-prefix}is-large {
+  .#{iv.$class-prefix}rate-item {
+    svg {
+      width: cv.getVar("rate-icon-size-large");
+      height: cv.getVar("rate-icon-size-large");
+    }
+
+    .#{iv.$class-prefix}icon {
+      font-size: cv.getVar("rate-font-icon-size-large");
+    }
+  }
+
+  .#{iv.$class-prefix}rate-score {
+    font-size: cv.getVar("size-large");
+  }
+
+  .#{iv.$class-prefix}rate-text,
+  .#{iv.$class-prefix}rate-custom-text {
+    font-size: 1.125rem;
+  }
+}
+
+// Animation on selection
+.#{iv.$class-prefix}rate-item.#{iv.$class-prefix}is-active {
+  animation: rate-pop 0.2s ease;
+}
+
+@keyframes rate-pop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(cv.getVar("rate-pop-scale"));
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// Color variants
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}rate.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        "rate-color-active": #{cv.getVar($name)},
+        "rate-color-hover": #{cv.getVar("#{$name}-light")},
+      )
+    );
+  }
+}
+
+// High Contrast Mode support
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}rate {
+    .#{iv.$class-prefix}rate-item {
+      color: ButtonText;
+
+      &.#{iv.$class-prefix}is-active {
+        color: Highlight;
+      }
+    }
+
+    &:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}rate-item {
+    transition: none;
+    animation: none;
+  }
+}