@allxsmith/bestax-bulma 2.6.2 → 3.0.2

package/src/scss/form/_switch.scss

@@ -0,0 +1,314 @@
+// Switch Component Styles
+// A toggle switch control for on/off states
+// Follows Bulma v1 CSS variable convention (see _checkbox.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Switch-specific SCSS variables
+$switch-width: 2.75em !default;
+$switch-height: 1.5em !default;
+$switch-padding: 0.1875em !default;
+$switch-border-width: 1px !default;
+$switch-background: cv.getVar("grey-light") !default;
+$switch-circle-color: cv.getVar("scheme-main") !default;
+$switch-circle-color-light: cv.getVar("white-ter") !default;
+$switch-active-color: cv.getVar("primary") !default;
+$switch-radius: cv.getVar("radius-rounded") !default;
+$switch-label-gap: 0.5em !default;
+$switch-transition-duration: cv.getVar("duration") !default;
+$switch-circle-shadow: 0 2px 3px rgba(10, 10, 10, 0.1) !default;
+$switch-focus-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.1) !default;
+$switch-thin-height: 0.75em !default;
+$switch-thin-circle-size: 1.25em !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}switch {
+  @include cv.register-vars(
+    (
+      "switch-width": #{$switch-width},
+      "switch-height": #{$switch-height},
+      "switch-padding": #{$switch-padding},
+      "switch-border-width": #{$switch-border-width},
+      "switch-background": #{$switch-background},
+      "switch-circle-color": #{$switch-circle-color},
+      "switch-active-color": #{$switch-active-color},
+      "switch-radius": #{$switch-radius},
+      "switch-label-gap": #{$switch-label-gap},
+      "switch-transition-duration": #{$switch-transition-duration},
+      "switch-circle-shadow": #{$switch-circle-shadow},
+      "switch-focus-shadow": #{$switch-focus-shadow},
+      "switch-thin-height": #{$switch-thin-height},
+      "switch-thin-circle-size": #{$switch-thin-circle-size},
+    )
+  );
+}
+
+// Main switch label
+.#{iv.$class-prefix}switch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+
+  // Hidden native input
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    // Checked state
+    &:checked + .check {
+      background-color: cv.getVar("switch-active-color");
+      border-color: cv.getVar("switch-active-color");
+
+      &::before {
+        transform: translateX(
+          calc(cv.getVar("switch-width") - cv.getVar("switch-height"))
+        );
+      }
+    }
+
+    // Focus-visible state (keyboard only)
+    &:focus-visible + .check {
+      outline: 2px solid cv.getVar("switch-active-color");
+      outline-offset: 2px;
+    }
+
+    // Legacy focus state for older browsers
+    &:focus + .check {
+      box-shadow: cv.getVar("switch-focus-shadow");
+    }
+
+    // Disabled state
+    &:disabled + .check {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .control-label {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  // Track (the pill-shaped background)
+  .check {
+    display: inline-block;
+    position: relative;
+    width: cv.getVar("switch-width");
+    height: cv.getVar("switch-height");
+    background-color: cv.getVar("switch-background");
+    border: cv.getVar("switch-border-width") solid transparent;
+    border-radius: cv.getVar("switch-radius");
+    flex-shrink: 0;
+    transition-property: background-color, border-color;
+    transition-duration: cv.getVar("switch-transition-duration");
+    transition-timing-function: ease;
+
+    // Circle knob
+    &::before {
+      content: "";
+      position: absolute;
+      top: cv.getVar("switch-padding");
+      left: cv.getVar("switch-padding");
+      width: calc(
+        cv.getVar("switch-height") - cv.getVar("switch-padding") * 2 -
+          cv.getVar("switch-border-width") * 2
+      );
+      height: calc(
+        cv.getVar("switch-height") - cv.getVar("switch-padding") * 2 -
+          cv.getVar("switch-border-width") * 2
+      );
+      background-color: cv.getVar("switch-circle-color");
+      border-radius: 50%;
+      box-shadow: cv.getVar("switch-circle-shadow");
+      transition-property: transform;
+      transition-duration: cv.getVar("switch-transition-duration");
+      transition-timing-function: ease;
+    }
+  }
+
+  // Label text
+  .control-label {
+    margin-left: cv.getVar("switch-label-gap");
+    line-height: cv.getVar("switch-height");
+  }
+
+  // RTL support
+  &.#{iv.$class-prefix}is-rtl {
+    flex-direction: row-reverse;
+
+    .control-label {
+      margin-left: 0;
+      margin-right: cv.getVar("switch-label-gap");
+    }
+  }
+}
+
+// Size variants
+.#{iv.$class-prefix}switch.#{iv.$class-prefix}is-small {
+  font-size: cv.getVar("size-small");
+}
+
+.#{iv.$class-prefix}switch.#{iv.$class-prefix}is-medium {
+  font-size: cv.getVar("size-medium");
+}
+
+.#{iv.$class-prefix}switch.#{iv.$class-prefix}is-large {
+  font-size: cv.getVar("size-large");
+}
+
+// Rounded variant (already rounded by default, but explicit class for consistency)
+.#{iv.$class-prefix}switch.#{iv.$class-prefix}is-rounded {
+  .check {
+    border-radius: cv.getVar("switch-radius");
+
+    &::before {
+      border-radius: 50%;
+    }
+  }
+}
+
+// Thin variant — MUI-style: colored circle, muted track
+.#{iv.$class-prefix}switch.#{iv.$class-prefix}is-thin {
+  .check {
+    height: cv.getVar("switch-thin-height");
+    background-color: color-mix(
+      in srgb,
+      cv.getVar("switch-background") 50%,
+      transparent
+    );
+    border-color: transparent;
+
+    &::before {
+      top: calc(
+        (cv.getVar("switch-thin-height") - cv.getVar("switch-thin-circle-size")) /
+          2 - cv.getVar("switch-border-width")
+      );
+      width: cv.getVar("switch-thin-circle-size");
+      height: cv.getVar("switch-thin-circle-size");
+      background-color: cv.getVar("switch-background");
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  // Checked: circle becomes active color, track becomes muted active color
+  input[type="checkbox"]:checked + .check {
+    background-color: color-mix(
+      in srgb,
+      cv.getVar("switch-active-color") 50%,
+      transparent
+    );
+    border-color: transparent;
+
+    &::before {
+      background-color: cv.getVar("switch-active-color");
+      transform: translateX(
+        calc(
+          cv.getVar("switch-width") - cv.getVar("switch-thin-circle-size") -
+            cv.getVar("switch-padding") * 2
+        )
+      );
+    }
+  }
+}
+
+// Outlined variant
+.#{iv.$class-prefix}switch.#{iv.$class-prefix}is-outlined {
+  .check {
+    background-color: transparent;
+    border-color: cv.getVar("switch-background");
+
+    &::before {
+      background-color: cv.getVar("switch-background");
+    }
+  }
+
+  input[type="checkbox"]:checked + .check {
+    background-color: transparent;
+    border-color: cv.getVar("switch-active-color");
+
+    &::before {
+      background-color: cv.getVar("switch-active-color");
+    }
+  }
+}
+
+// Color variants
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}switch.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        "switch-active-color": #{cv.getVar($name)},
+      )
+    );
+  }
+}
+
+// Passive type variants (unchecked state color)
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}switch.#{iv.$class-prefix}is-#{$name}-passive {
+    .check {
+      background-color: cv.getVar($name);
+      border-color: cv.getVar($name);
+    }
+
+    // Outlined passive: transparent background, colored border and circle
+    &.#{iv.$class-prefix}is-outlined {
+      .check {
+        background-color: transparent;
+        border-color: cv.getVar($name);
+
+        &::before {
+          background-color: cv.getVar($name);
+        }
+      }
+    }
+  }
+}
+
+// Light mode: use a soft grey circle instead of pure white
+@media (prefers-color-scheme: light) {
+  .#{iv.$class-prefix}switch {
+    @include cv.register-vars(
+      (
+        "switch-circle-color": #{$switch-circle-color-light},
+      )
+    );
+  }
+}
+
+// High Contrast Mode support
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}switch {
+    .check {
+      border-color: ButtonText;
+    }
+
+    input[type="checkbox"]:checked + .check {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    input[type="checkbox"]:focus-visible + .check {
+      outline-color: Highlight;
+    }
+
+    input[type="checkbox"]:disabled + .check {
+      border-color: GrayText;
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}switch {
+    .check,
+    .check::before {
+      transition: none;
+    }
+  }
+}

package/src/scss/form/_taginput.scss

@@ -0,0 +1,356 @@
+// Taginput Component Styles
+// A tag input control for managing multiple tags with autocomplete
+// Follows Bulma v1 CSS variable convention (see _switch.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Taginput-specific SCSS variables
+$taginput-height: auto !default;
+$taginput-min-height: 2.5em !default;
+$taginput-padding: 0.375rem 0.5rem !default;
+$taginput-border-color: cv.getVar("border") !default;
+$taginput-border-radius: cv.getVar("radius") !default;
+$taginput-background: cv.getVar("scheme-main") !default;
+$taginput-tag-gap: 0.25rem !default;
+$taginput-dropdown-max-height: 200px !default;
+$taginput-transition-duration: cv.getVar("duration") !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}taginput {
+  @include cv.register-vars(
+    (
+      "taginput-height": #{$taginput-height},
+      "taginput-min-height": #{$taginput-min-height},
+      "taginput-padding": #{$taginput-padding},
+      "taginput-border-color": #{$taginput-border-color},
+      "taginput-border-radius": #{$taginput-border-radius},
+      "taginput-background": #{$taginput-background},
+      "taginput-tag-gap": #{$taginput-tag-gap},
+      "taginput-dropdown-max-height": #{$taginput-dropdown-max-height},
+      "taginput-transition-duration": #{$taginput-transition-duration},
+    )
+  );
+}
+
+// Main taginput wrapper
+.#{iv.$class-prefix}taginput {
+  position: relative;
+  width: 100%;
+
+  // Container for tags and input
+  .#{iv.$class-prefix}taginput-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    height: cv.getVar("taginput-height");
+    min-height: cv.getVar("taginput-min-height");
+    padding: cv.getVar("taginput-padding");
+    border: 1px solid cv.getVar("taginput-border-color");
+    border-radius: cv.getVar("taginput-border-radius");
+    background-color: cv.getVar("taginput-background");
+    cursor: text;
+    transition-property: border-color, box-shadow;
+    transition-duration: cv.getVar("taginput-transition-duration");
+    transition-timing-function: ease;
+
+    &:hover {
+      border-color: cv.getVar("border-hover");
+    }
+
+    &:focus-within {
+      border-color: hsl(cv.getVar("input-focus-h"), cv.getVar("input-focus-s"), cv.getVar("input-focus-l"));
+      box-shadow: cv.getVar("input-focus-shadow-size") hsla(cv.getVar("input-focus-h"), cv.getVar("input-focus-s"), cv.getVar("input-focus-l"), cv.getVar("input-focus-shadow-alpha"));
+    }
+
+    &.#{iv.$class-prefix}is-attached {
+      .#{iv.$class-prefix}tags {
+        gap: 0;
+
+        .#{iv.$class-prefix}tag {
+          margin-right: 0;
+          border-radius: 0;
+
+          &:first-child {
+            border-top-left-radius: cv.getVar("taginput-border-radius");
+            border-bottom-left-radius: cv.getVar("taginput-border-radius");
+          }
+
+          &:last-of-type {
+            border-top-right-radius: cv.getVar("taginput-border-radius");
+            border-bottom-right-radius: cv.getVar("taginput-border-radius");
+          }
+        }
+      }
+    }
+
+    // Loading spinner icon
+    > .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
+      position: absolute;
+      right: 0.625em;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      z-index: 4;
+    }
+
+    // Left icon support
+    &.#{iv.$class-prefix}has-icons-left {
+      > .#{iv.$class-prefix}tags {
+        padding-left: 2em;
+      }
+
+      > .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
+        position: absolute;
+        left: 0.625em;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        z-index: 4;
+        color: cv.getVar("text-weak");
+      }
+    }
+  }
+
+  // Tags wrapper
+  .#{iv.$class-prefix}tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: cv.getVar("taginput-tag-gap");
+    margin: 0;
+    flex-grow: 1;
+
+    .#{iv.$class-prefix}tag {
+      margin-bottom: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: cv.getVar("taginput-tag-gap");
+
+      .#{iv.$class-prefix}delete {
+        margin-left: 0.25rem;
+        margin-right: -0.25rem;
+      }
+    }
+  }
+
+  // Input field
+  .#{iv.$class-prefix}input {
+    flex: 1 1 auto;
+    min-width: 80px;
+    width: auto;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    height: auto;
+    background: transparent;
+
+    &:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: cv.getVar("text-weak");
+    }
+  }
+
+  // Dropdown menu
+  .#{iv.$class-prefix}dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 20;
+    display: none;
+    padding-top: 4px;
+
+    &.#{iv.$class-prefix}is-active {
+      display: block;
+    }
+  }
+
+  // Dropdown content
+  .#{iv.$class-prefix}dropdown-content {
+    background-color: cv.getVar("taginput-background");
+    border-radius: cv.getVar("taginput-border-radius");
+    box-shadow: cv.getVar("shadow");
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+    max-height: cv.getVar("taginput-dropdown-max-height");
+    overflow-y: auto;
+  }
+
+  // Dropdown items
+  .#{iv.$class-prefix}dropdown-item {
+    display: block;
+    padding: 0.375rem 1rem;
+    color: cv.getVar("text");
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      background-color: cv.getVar("scheme-main-bis");
+      color: cv.getVar("text-strong");
+    }
+
+    &.#{iv.$class-prefix}is-active {
+      background-color: cv.getVar("scheme-main-bis");
+      color: cv.getVar("text-strong");
+    }
+  }
+
+  // Counter display
+  .#{iv.$class-prefix}help.#{iv.$class-prefix}counter {
+    float: right;
+    margin-left: auto;
+  }
+
+  // Rounded modifier — makes tags rounded
+  &.#{iv.$class-prefix}is-rounded {
+    .#{iv.$class-prefix}tag {
+      border-radius: cv.getVar("radius-rounded");
+    }
+  }
+
+  // Ellipsis modifier — truncate long tag text
+  &.#{iv.$class-prefix}is-ellipsis {
+    .#{iv.$class-prefix}tag {
+      max-width: 10em;
+
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+// Size variants
+.#{iv.$class-prefix}taginput.#{iv.$class-prefix}is-small {
+  .#{iv.$class-prefix}taginput-container {
+    min-height: 2em;
+    padding: 0.25rem 0.375rem;
+  }
+
+  .#{iv.$class-prefix}input {
+    font-size: cv.getVar("size-small");
+  }
+
+  .#{iv.$class-prefix}tag {
+    font-size: cv.getVar("size-small");
+  }
+
+  .#{iv.$class-prefix}dropdown-item {
+    font-size: cv.getVar("size-small");
+    padding: 0.25rem 0.75rem;
+  }
+}
+
+.#{iv.$class-prefix}taginput.#{iv.$class-prefix}is-medium {
+  .#{iv.$class-prefix}taginput-container {
+    min-height: 3em;
+    padding: 0.5rem 0.625rem;
+  }
+
+  .#{iv.$class-prefix}input {
+    font-size: cv.getVar("size-medium");
+  }
+
+  .#{iv.$class-prefix}tag {
+    font-size: cv.getVar("size-medium");
+  }
+
+  .#{iv.$class-prefix}dropdown-item {
+    font-size: cv.getVar("size-medium");
+    padding: 0.5rem 1.25rem;
+  }
+}
+
+.#{iv.$class-prefix}taginput.#{iv.$class-prefix}is-large {
+  .#{iv.$class-prefix}taginput-container {
+    min-height: 3.5em;
+    padding: 0.625rem 0.75rem;
+  }
+
+  .#{iv.$class-prefix}input {
+    font-size: cv.getVar("size-large");
+  }
+
+  .#{iv.$class-prefix}tag {
+    font-size: cv.getVar("size-large");
+  }
+
+  .#{iv.$class-prefix}dropdown-item {
+    font-size: cv.getVar("size-large");
+    padding: 0.625rem 1.5rem;
+  }
+}
+
+// Disabled state
+.#{iv.$class-prefix}taginput.#{iv.$class-prefix}is-disabled {
+  .#{iv.$class-prefix}taginput-container {
+    background-color: cv.getVar("scheme-main-bis");
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: cv.getVar("taginput-border-color");
+    }
+  }
+
+  .#{iv.$class-prefix}tag {
+    opacity: 0.7;
+  }
+
+  .#{iv.$class-prefix}input {
+    cursor: not-allowed;
+  }
+}
+
+// Color variants (for input focus state)
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}taginput.#{iv.$class-prefix}is-#{$name} {
+    .#{iv.$class-prefix}taginput-container:focus-within {
+      border-color: cv.getVar($name);
+      box-shadow: cv.getVar("input-focus-shadow-size") hsla(cv.getVar("#{$name}-h"), cv.getVar("#{$name}-s"), cv.getVar("#{$name}-l"), cv.getVar("input-focus-shadow-alpha"));
+    }
+  }
+}
+
+// High Contrast Mode support
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}taginput {
+    .#{iv.$class-prefix}taginput-container {
+      border-color: ButtonText;
+
+      &:focus-within {
+        border-color: Highlight;
+      }
+    }
+
+    .#{iv.$class-prefix}tag {
+      border: 1px solid ButtonText;
+    }
+
+    &.#{iv.$class-prefix}is-disabled {
+      .#{iv.$class-prefix}taginput-container {
+        border-color: GrayText;
+      }
+
+      .#{iv.$class-prefix}tag {
+        border-color: GrayText;
+      }
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}taginput {
+    .#{iv.$class-prefix}taginput-container {
+      transition: none;
+    }
+  }
+}