@tabler/core 1.5.1 → 1.6.0

package/scss/ui/forms/_form-selectgroup.scss

@@ -49,9 +49,9 @@ Select group
   border: var(--border-width) var(--border-style) $input-border-color;
   box-shadow: $input-box-shadow;
   @include border-radius(var(--border-radius));
-  @include transition(border-color $transition-time, background $transition-time, color $transition-time);
+  @include focus-ring-transition(border-color $transition-time, background $transition-time, color $transition-time);
 
-  .icon:only-child {
+  > .icon:only-child {
     margin: 0 var(--form-selectgroup-icon-margin-x);
   }
 
@@ -85,11 +85,11 @@ Select group
   }
 
   .form-selectgroup-input[type='checkbox']:checked + .form-selectgroup-label & {
-    background-image: escape-svg($form-check-input-checked-bg-image);
+    background-image: escape-svg(svg-icon-color($form-check-input-checked-bg-image, $form-check-input-checked-color));
   }
 
   .form-selectgroup-input[type='radio']:checked + .form-selectgroup-label & {
-    background-image: escape-svg($form-check-radio-checked-bg-image);
+    background-image: escape-svg(svg-icon-color($form-check-radio-checked-bg-image, $form-check-input-checked-color));
   }
 }
 
@@ -102,7 +102,7 @@ Select group
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: #{$active-color};
-  background: #{$active-bg};
+  background: var(--active-bg);
   border-color: #{$active-border-color};
 }
 
@@ -110,7 +110,7 @@ Select group
   z-index: 2;
   color: var(--primary);
   border-color: var(--primary);
-  box-shadow: $input-btn-focus-box-shadow;
+  @include focus-ring(true);
 }
 
 /**
@@ -118,7 +118,7 @@ Alternate version of form select group
  */
 .form-selectgroup-boxes {
   .form-selectgroup-label {
-    padding: $card-spacer-x $card-spacer-y;
+    padding: $card-spacer-y $card-spacer-x;
     color: inherit;
     text-align: start;
   }

package/scss/ui/forms/_strength.scss

@@ -0,0 +1,63 @@
+/*
+Password strength meter
+ */
+@use '../../config' as *;
+
+.strength {
+  --strength-height: #{$strength-height};
+  --strength-gap: #{$strength-gap};
+  --strength-bg: #{$strength-bg};
+  --strength-border-radius: #{$strength-border-radius};
+  --strength-color: #{$strength-bg};
+  --strength-margin-top: #{$strength-margin-top};
+
+  display: flex;
+  gap: var(--strength-gap);
+  width: 100%;
+
+  // Spaced like a form hint, so the meter sits under the control it rates
+  // without a utility class at every call site.
+  .form-control + &,
+  .form-select + &,
+  .input-group + &,
+  .form-hint + & {
+    margin-top: var(--strength-margin-top);
+  }
+}
+
+.strength-segment {
+  flex: 1;
+  height: var(--strength-height);
+  background: var(--strength-bg);
+  border-radius: var(--strength-border-radius);
+  transition: background-color 0.2s ease-in-out;
+
+  &.active {
+    background: var(--strength-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.strength + .strength-text {
+  margin-top: #{$strength-text-margin-top};
+}
+
+.strength-text {
+  font-size: $strength-text-font-size;
+  color: var(--strength-color, var(--secondary));
+
+  // An empty label must not reserve a line before the user types.
+  &:empty {
+    display: none;
+  }
+}
+
+@each $level, $color in $strength-levels {
+  .strength[data-bs-strength='#{$level}'],
+  .strength-text[data-bs-strength='#{$level}'] {
+    --strength-color: #{$color};
+  }
+}

package/scss/ui/forms/_validation.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../config' as *;
 
 %validation-lite {
@@ -70,4 +71,8 @@
   textarea.form-control.is-#{$state} {
     @extend %validation-icon-size-textarea;
   }
+
+  .otp.is-#{$state} .otp-slot {
+    --otp-slot-border-color: #{map.get($data, 'border-color')};
+  }
 }

package/scss/utils/_background.scss

@@ -2,12 +2,12 @@
 
 .bg-white-overlay {
   color: $white;
-  background-color: rgba($light, 0.24);
+  background-color: color-transparent(var(--light), 0.24);
 }
 
 .bg-dark-overlay {
   color: $white;
-  background-color: rgba($dark, 0.24);
+  background-color: color-transparent(var(--dark), 0.24);
 }
 
 .bg-cover {

package/scss/utils/_colors.scss

@@ -13,16 +13,16 @@
     )
 {
   .bg-#{'' + $color} {
-    background-color: color-mix(in srgb, var(--#{$color}) calc(var(--bg-opacity, 1) * 100%), transparent) !important;
+    background-color: color-transparent(var(--#{$color}), calc(var(--bg-opacity, 1) * 100%)) !important;
   }
 
   .bg-#{'' + $color}-lt {
-    color: color-mix(in srgb, var(--#{$color}) calc(var(--text-opacity, 1) * 100%), transparent) !important;
-    background-color: color-mix(in srgb, var(--#{$color}-lt) calc(var(--bg-opacity, 1) * 100%), transparent) !important;
+    color: color-transparent(var(--#{$color}), calc(var(--text-opacity, 1) * 100%)) !important;
+    background-color: color-transparent(var(--#{$color}-lt), calc(var(--bg-opacity, 1) * 100%)) !important;
   }
 
   .border-#{'' + $color} {
-    border-color: color-mix(in srgb, var(--#{$color}) calc(var(--border-opacity, 1) * 100%), transparent) !important;
+    border-color: color-transparent(var(--#{$color}), calc(var(--border-opacity, 1) * 100%)) !important;
   }
 
   .bg-gradient-from-#{'' + $color} {
@@ -40,19 +40,22 @@
 
   .text-bg-#{'' + $color} {
     color: color-contrast($value) if(sass($enable-important-utilities): !important; else: null);
-    background-color: RGBA(var(--#{$color}-rgb), var(--bg-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
+    background-color: color-transparent(var(--#{$color}), calc(var(--bg-opacity, 1) * 100%)) if(sass($enable-important-utilities): !important; else: null);
   }
 
   .link-#{'' + $color} {
-    color: color-mix(in srgb, var(--#{$color}) calc(var(--link-opacity, 1) * 100%), transparent) !important;
-    text-decoration-color: color-mix(in srgb, var(--#{$color}) calc(var(--link-underline-opacity, 1) * 100%), transparent) !important;
+    color: color-transparent(var(--#{$color}), calc(var(--link-opacity, 1) * 100%)) !important;
+    text-decoration-color: color-transparent(var(--#{$color}), calc(var(--link-underline-opacity, 1) * 100%)) !important;
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        $hover-color: if(sass(color-contrast($value) == $color-contrast-light): shade-color($value, $link-shade-percentage); else: tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--link-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
-        text-decoration-color: rgba(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
+        // Shade light-on-dark colours, tint the rest: decided at compile time from
+        // the palette, mixed at runtime so the hover follows a `--tblr-*` override.
+        $hover-mix: if(sass(color-contrast($value) == $color-contrast-light): var(--black); else: var(--white));
+        $hover-color: mix-color-css($hover-mix, var(--#{$color}), $link-shade-percentage);
+        color: color-transparent($hover-color, calc(var(--link-opacity, 1) * 100%)) if(sass($enable-important-utilities): !important; else: null);
+        text-decoration-color: color-transparent($hover-color, calc(var(--link-underline-opacity, 1) * 100%)) if(sass($enable-important-utilities): !important; else: null);
       }
     }
   }
@@ -61,7 +64,7 @@
 @each $color, $value in $theme-colors {
   .text-#{'' + $color} {
     --text-opacity: 1;
-    color: color-mix(in srgb, var(--#{$color}) calc(var(--text-opacity) * 100%), transparent) !important;
+    color: color-transparent(var(--#{$color}), calc(var(--text-opacity) * 100%)) !important;
   }
 
   .text-#{'' + $color}-fg {
@@ -72,7 +75,7 @@
 @each $color, $value in $gray-colors {
   .bg-#{'' + $color} {
     --bg-opacity: 1;
-    background-color: color-mix(in srgb, var(--#{$color}) calc(var(--bg-opacity) * 100%), transparent) !important;
+    background-color: color-transparent(var(--#{$color}), calc(var(--bg-opacity) * 100%)) !important;
   }
 
   .text-#{'' + $color}-fg {
@@ -87,7 +90,7 @@
 @each $color, $value in $social-colors {
   .bg-#{'' + $color} {
     --bg-opacity: 1;
-    background-color: color-mix(in srgb, var(--#{$color}) calc(var(--bg-opacity) * 100%), transparent) !important;
+    background-color: color-transparent(var(--#{$color}), calc(var(--bg-opacity) * 100%)) !important;
   }
 
   .text-#{'' + $color}-fg {
@@ -97,7 +100,7 @@
 
 .bg-inverted {
   --bg-opacity: 1;
-  background-color: color-mix(in sRGB, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important;
+  background-color: color-transparent(var(--bg-surface-inverted), calc(var(--bg-opacity) * 100%)) !important;
 }
 .bg-surface {
   background-color: var(--bg-surface) !important;

package/scss/vendor/_apexcharts.scss

@@ -45,6 +45,15 @@
   box-shadow: none !important;
 }
 
+// Paint the arrow directly as well: it reads its colour through two levels of
+// custom properties (--apx-tt-arrow-bg → --apx-tt-bg), and some browsers drop a
+// light-dark() value on the way, leaving a transparent arrow with a border in
+// the text colour — a white arrow on the dark tooltip.
+.apexcharts-tooltip-arrow {
+  background: $tooltip-bg !important;
+  border-color: $tooltip-bg !important;
+}
+
 .apexcharts-tooltip-title {
   padding: 0.25rem 0.5rem !important;
   margin: 0 !important;
@@ -69,7 +78,7 @@
 .apexcharts-gridline,
 .apexcharts-grid-borders line,
 .apexcharts-xaxis-tick,
-.apexcharts-yaxis-tick {
+.apexcharts-yaxis line {
   stroke: var(--border-color) !important;
 }
 

package/scss/vendor/_coloris.scss

@@ -11,12 +11,15 @@
 }
 
 input.clr-color {
+  @include focus-ring-transition();
   @include border-radius(var(--border-radius));
   color: var(--body-color);
   background: transparent;
   border-color: var(--border-color);
 
   &:focus {
+    --focus-ring-offset: -1px;
+    border-color: $input-focus-border-color;
     @include focus-ring(true);
   }
 }
@@ -25,9 +28,10 @@ input.clr-color {
   button {
     @include border-radius(var(--border-radius));
     padding: 0 2px 4px;
+    @include focus-ring-transition();
 
     &:focus {
-      @include focus-ring();
+      @include focus-ring(true);
     }
   }
 }
@@ -43,8 +47,10 @@ input.clr-color {
   }
 
   button {
+    @include focus-ring-transition();
+
     &:focus {
-      @include focus-ring();
+      @include focus-ring(true);
     }
   }
 }
@@ -58,13 +64,14 @@ input.clr-color {
     width: 1.5rem;
     height: 1.5rem;
     @include border-radius(var(--border-radius));
+    @include focus-ring-transition();
 
     &::after {
       box-shadow: inset 0 0 0 1px var(--border-color-translucent);
     }
 
     &:focus {
-      @include focus-ring();
+      @include focus-ring(true);
     }
   }
 

package/scss/vendor/_fslightbox.scss

@@ -6,10 +6,10 @@
   backdrop-filter: blur($modal-backdrop-blur) !important;
 }
 
-.fslightbox-slide-number-container {
+.fslightboxsn {
   color: inherit !important;
 }
 
-.fslightbox-slash {
+.fslightboxsl {
   background: currentColor !important;
 }

package/scss/vendor/_jsvectormap.scss

@@ -18,7 +18,7 @@
   background-color: var(--card-bg, var(--bg-surface));
   border: var(--border-width) var(--border-style) var(--border-color);
 
-  .jvm-legend-inner .jvm-legend-tick {
+  .jvm-legend-tick {
     display: flex;
     align-items: center;
 

package/scss/vendor/_nouislider.scss

@@ -19,6 +19,7 @@
 }
 
 .noUi-handle {
+  @include focus-ring-transition();
   width: $form-range-thumb-width;
   height: $form-range-thumb-height;
   background: currentColor;
@@ -43,7 +44,7 @@
 
   &.noUi-active,
   &:focus {
-    box-shadow: $form-range-thumb-focus-box-shadow;
+    @include focus-ring(true);
   }
 }
 

package/scss/vendor/_tom-select.scss

@@ -1,18 +1,17 @@
+@use 'sass:map';
 @use '../config' as *;
 
-$input-border-width: 1px;
-
 :root {
   --ts-pr-clear-button: 0rem;
   --ts-pr-caret: 0rem;
 }
 
-.ts-input {
-  color: inherit;
-}
-
 .focus .ts-control {
+  @include focus-ring-transition(border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
+  --focus-ring-offset: -1px;
+  box-shadow: $input-box-shadow;
   @include border-radius(var(--border-radius));
+  @include focus-ring(true);
 }
 
 .ts-control {
@@ -52,6 +51,71 @@ $input-border-width: 1px;
       background-image: var(--form-select-bg-img), var(--form-select-bg-icon, none);
     }
   }
+
+  // The same preset also colours the wrapper border and the focused
+  // `.ts-control` with `var(--bs-form-valid-color)` / `--bs-form-invalid-color`.
+  // Those variables do not exist in Tabler, so the border falls back to
+  // `currentColor` and the focus ring disappears. Repeat Tabler's own
+  // validation colours; `!important` for the same reason as `.ts-dropdown`
+  // below.
+  @each $state, $data in $form-validation-states {
+    &.is-#{$state} {
+      border-color: map.get($data, 'border-color') !important;
+
+      &.focus .ts-control {
+        border-color: map.get($data, 'border-color') !important;
+        outline-color: map.get($data, 'focus-ring-color');
+      }
+    }
+  }
+}
+
+// The bootstrap5 preset hardcodes Bootstrap's own input metrics on
+// `.ts-control` (0.375rem 0.75rem padding, 1.5 line-height), so a Tom Select
+// came out 5px shorter than a `.form-control` next to it (#2567). Use Tabler's
+// input tokens instead, in every size. The multi-value control follows the
+// preset's formula: take the item's 1px padding, 1px border and 3px bottom
+// margin out of the control's padding so the chips fill the same height.
+.ts-wrapper.form-control,
+.ts-wrapper.form-select {
+  .ts-control {
+    padding: $input-padding-y $input-padding-x;
+    font-size: $input-font-size;
+    line-height: $input-line-height;
+  }
+
+  &.multi.has-items .ts-control {
+    padding-top: calc(#{$input-padding-y} - 2px) !important;
+    padding-bottom: calc(#{$input-padding-y} - 5px);
+  }
+
+  &.form-control-sm,
+  &.form-select-sm {
+    .ts-control {
+      padding: $input-padding-y-sm $input-padding-x-sm;
+      font-size: $input-font-size-sm;
+      line-height: $input-line-height-sm;
+    }
+
+    &.multi.has-items .ts-control {
+      padding-top: calc(#{$input-padding-y-sm} - 2px) !important;
+      padding-bottom: calc(#{$input-padding-y-sm} - 5px);
+    }
+  }
+
+  &.form-control-lg,
+  &.form-select-lg {
+    .ts-control {
+      padding: $input-padding-y-lg $input-padding-x-lg;
+      font-size: $input-font-size-lg;
+      line-height: $input-line-height-lg;
+    }
+
+    &.multi.has-items .ts-control {
+      padding-top: calc(#{$input-padding-y-lg} - 2px) !important;
+      padding-bottom: calc(#{$input-padding-y-lg} - 5px);
+    }
+  }
 }
 
 // Every declaration below is `!important`: the bootstrap5 preset CSS targets
@@ -73,11 +137,18 @@ $input-border-width: 1px;
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
 
-  .active {
+  // Tom Select marks the highlighted row with .active; match the row only, so an
+  // .active element inside an option (a lit .signal-bar) keeps its own background
+  [data-selectable].active {
     color: var(--body-color) !important;
     background-color: var(--active-bg) !important;
   }
 
+  // The library's own `.ts-dropdown .active` also hits a lit bar and clears its background
+  .signal-bar.active {
+    background-color: var(--signal-color);
+  }
+
   .active.create {
     color: var(--body-color) !important;
   }
@@ -93,6 +164,12 @@ $input-border-width: 1px;
   color: var(--body-color);
 }
 
+// An item rendered with an indicator reuses `.dropdown-item`, whose `width: 100%` fills the
+// control and pushes the search input to a second line on focus
+.ts-control > .dropdown-item {
+  width: auto;
+}
+
 .ts-control input {
   &::placeholder {
     color: $input-placeholder-color;

package/dist/types/src/tabler.d.ts

@@ -1,3 +0,0 @@
-export declare const prefix: string;
-export declare const hexToRgba: (hex: string, opacity: number) => string | null;
-export declare const getColor: (color: string, opacity?: number) => string | null;

package/js/src/tabler.ts

@@ -1,17 +0,0 @@
-export const prefix: string = 'tblr-'
-
-export const hexToRgba = (hex: string, opacity: number): string | null => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-
-  return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : null
-}
-
-export const getColor = (color: string, opacity: number = 1): string | null => {
-  const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
-
-  if (opacity !== 1) {
-    return hexToRgba(c, opacity)
-  }
-
-  return c
-}

package/js/tests/helpers/fixture.ts

@@ -1,33 +0,0 @@
-const FIXTURE_ID = 'fixture'
-
-export const getFixture = (): HTMLElement => {
-  let el = document.getElementById(FIXTURE_ID)
-
-  if (!el) {
-    el = document.createElement('div')
-    el.id = FIXTURE_ID
-    el.style.position = 'absolute'
-    el.style.top = '-10000px'
-    el.style.left = '-10000px'
-    el.style.width = '10000px'
-    el.style.height = '10000px'
-    document.body.append(el)
-  }
-
-  return el
-}
-
-export const clearFixture = (): void => {
-  getFixture().innerHTML = ''
-}
-
-export const createEvent = (eventName: string, parameters: EventInit = {}): Event => {
-  return new Event(eventName, parameters)
-}
-
-export const clearBodyAndDocument = (): void => {
-  for (const attribute of ['data-bs-padding-right', 'data-tblr-padding-right', 'style']) {
-    document.documentElement.removeAttribute(attribute)
-    document.body.removeAttribute(attribute)
-  }
-}