@tabler/core 1.5.1 → 1.6.0

package/scss/ui/_sparkline.scss

@@ -0,0 +1,73 @@
+/**
+Sparkline (inline SVG, rendered by js/src/sparkline.ts)
+ */
+@use 'sass:map';
+@use '../config' as *;
+
+.sparkline {
+  // scss-docs-start sparkline-css-vars
+  --sparkline-width: #{$sparkline-width};
+  --sparkline-height: #{$sparkline-height};
+  --sparkline-stroke: #{$sparkline-stroke};
+  --sparkline-negative: #{$sparkline-negative};
+  --sparkline-zero: #{$sparkline-zero};
+  --sparkline-threshold: #{$sparkline-threshold};
+  --sparkline-stroke-width: #{$sparkline-stroke-width};
+  --sparkline-fill: #{$sparkline-fill};
+  --sparkline-track: #{$sparkline-track};
+  --sparkline-spot: #{$sparkline-spot};
+  --sparkline-spot-size: #{$sparkline-spot-size};
+  --sparkline-label-font-size: #{$sparkline-label-font-size};
+  --sparkline-label-color: #{$sparkline-label-color};
+  // scss-docs-end sparkline-css-vars
+
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0; // a fixed-size graphic: never squeezed by a flex row
+  width: var(--sparkline-width);
+  height: var(--sparkline-height);
+  line-height: 0;
+  vertical-align: middle;
+
+  .sparkline-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  .sparkline-label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--sparkline-label-font-size);
+    font-weight: $font-weight-medium;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    color: var(--sparkline-label-color);
+  }
+}
+
+@each $sparkline-size, $size in $sparkline-sizes {
+  .sparkline-#{$sparkline-size} {
+    --sparkline-width: #{map.get($size, width)};
+    --sparkline-height: #{map.get($size, height)};
+  }
+}
+
+// Same width as height, for the circle type
+.sparkline-square {
+  --sparkline-width: var(--sparkline-height);
+}
+
+// Greyed out, for a series that is off or data that is stale
+.sparkline-disabled {
+  --sparkline-stroke: #{$sparkline-disabled-color};
+  --sparkline-negative: #{$sparkline-disabled-color};
+  --sparkline-spot: #{$sparkline-disabled-color};
+  --sparkline-fill: color-mix(in oklab, #{$sparkline-disabled-color} 30%, transparent);
+  --sparkline-track: color-mix(in oklab, #{$sparkline-disabled-color} 40%, transparent);
+  --sparkline-label-color: #{$sparkline-disabled-color};
+}

package/scss/ui/_stars.scss

@@ -1,7 +1,9 @@
 @use '../config' as *;
 
 .stars {
+  // scss-docs-start stars-css-vars
   --stars-gap: #{$stars-gap};
+  // scss-docs-end stars-css-vars
 
   display: inline-flex;
   font-size: $h5-font-size;

package/scss/ui/_status.scss

@@ -44,12 +44,13 @@
 // Status
 //
 .status {
+  // scss-docs-start status-css-vars
   --status-height: #{$status-height};
   --status-color: #{$text-secondary};
-  --status-color-rgb: #{to-rgb($text-secondary)};
   --status-padding-y: #{$status-padding-y};
   --status-padding-x: #{$status-padding-x};
   --status-gap: #{$status-gap};
+  // scss-docs-end status-css-vars
 
   display: inline-flex;
   gap: var(--status-gap);
@@ -84,7 +85,6 @@
 @each $name, $color in map.merge($theme-colors, $social-colors) {
   .status-#{$name} {
     --status-color: var(--#{$name});
-    --status-color-rgb: var(--#{$name}-rgb);
   }
 }
 

package/scss/ui/_steps.scss

@@ -4,10 +4,12 @@
 @use '../config' as *;
 
 .steps {
+  // scss-docs-start steps-css-vars
   --steps-color: #{$steps-color};
   --steps-inactive-color: #{$steps-inactive-color};
   --steps-dot-size: #{$steps-dot-size};
   --steps-border-width: #{$steps-border-width};
+  // scss-docs-end steps-css-vars
   display: flex;
   flex-wrap: nowrap;
   width: 100%;

package/scss/ui/_switch-icon.scss

@@ -1,10 +1,21 @@
 @use '../config' as *;
 
 .switch-icon {
+  @include focus-ring-transition();
+  // scss-docs-start switch-icon-css-vars
+  --switch-icon-size: #{$switch-icon-size};
+  --switch-icon-min-size: #{$switch-icon-min-size};
+  --switch-icon-disabled-opacity: #{$switch-icon-disabled-opacity};
+  --switch-icon-loading-size: #{$switch-icon-loading-size};
+  --switch-icon-loading-border-width: #{$switch-icon-loading-border-width};
+  --switch-icon-loading-animation-speed: #{$switch-icon-loading-animation-speed};
+  // scss-docs-end switch-icon-css-vars
   position: relative;
   display: inline-block;
-  width: $icon-size;
-  height: $icon-size;
+  width: var(--switch-icon-size);
+  min-width: var(--switch-icon-min-size);
+  height: var(--switch-icon-size);
+  min-height: var(--switch-icon-min-size);
   padding: 0;
   line-height: 1;
   vertical-align: bottom;
@@ -12,9 +23,15 @@
   background: transparent;
   border: 0;
 
-  &.disabled {
+  &.disabled,
+  &:disabled,
+  &[aria-disabled='true'] {
     pointer-events: none;
-    opacity: $btn-disabled-opacity;
+    opacity: var(--switch-icon-disabled-opacity);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    --switch-icon-loading-animation-speed: #{$switch-icon-loading-animation-speed * 2};
   }
 
   &:focus:not(:focus-visible) {
@@ -22,8 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
+    @include focus-ring(true);
   }
 
   svg {
@@ -32,11 +48,15 @@
     height: 100%;
   }
 
+  // Both icons sit centered in the (possibly larger) button box
   .switch-icon-a,
   .switch-icon-b {
+    position: absolute;
+    inset: 0;
     display: block;
-    width: 100%;
-    height: 100%;
+    width: var(--switch-icon-size);
+    height: var(--switch-icon-size);
+    margin: auto;
   }
 
   .switch-icon-a {
@@ -44,9 +64,6 @@
   }
 
   .switch-icon-b {
-    position: absolute;
-    inset-inline-start: 0;
-    top: 0;
     opacity: 0;
   }
 
@@ -59,6 +76,45 @@
       opacity: 1;
     }
   }
+
+  // Loading state: both icons hidden, a spinner drawn in their place
+  &.switch-icon-loading {
+    pointer-events: none;
+
+    .switch-icon-a,
+    .switch-icon-b {
+      opacity: 0;
+      transition: none;
+    }
+
+    &::after {
+      position: absolute;
+      inset-inline-start: calc(50% - var(--switch-icon-loading-size) / 2);
+      top: calc(50% - var(--switch-icon-loading-size) / 2);
+      width: var(--switch-icon-loading-size);
+      height: var(--switch-icon-loading-size);
+      content: '';
+      border: var(--switch-icon-loading-border-width) var(--border-style) currentColor;
+      border-inline-end-color: transparent;
+      animation: spinner-border var(--switch-icon-loading-animation-speed) linear infinite;
+      @include border-radius(var(--border-radius-pill));
+    }
+  }
+}
+
+// Inside a button (e.g. .btn-action) the button is the target and carries hover and focus
+.btn .switch-icon {
+  --switch-icon-min-size: var(--switch-icon-size);
+  vertical-align: middle;
+  pointer-events: none;
+
+  // the button's own icon sizing and margins would misplace the two stacked icons
+  .icon {
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    margin: 0;
+  }
 }
 
 // Fade variant

package/scss/ui/_tables.scss

@@ -87,7 +87,7 @@
 
         td {
           display: block;
-          padding: $table-cell-padding-x $table-cell-padding-y !important;
+          padding: $table-cell-padding-y $table-cell-padding-x !important;
           color: var(--body-color) !important;
           border: none;
 
@@ -150,11 +150,11 @@ Table sort
   }
 
   &.asc::after {
-    mask-image: $table-sort-desc-bg-image;
+    mask-image: $table-sort-asc-bg-image;
   }
 
   &.desc::after {
-    mask-image: $table-sort-asc-bg-image;
+    mask-image: $table-sort-desc-bg-image;
   }
 }
 

package/scss/ui/_tags.scss

@@ -1,6 +1,7 @@
 @use '../config' as *;
 
 .tag {
+  // scss-docs-start tag-css-vars
   --tag-height: #{$tag-height};
   --tag-padding-x: #{$tag-padding-x};
   --tag-gap: #{$tag-gap};
@@ -12,6 +13,7 @@
   --tag-icon-margin-end: #{$tag-icon-margin-end};
   --tag-icon-size: #{$tag-icon-size};
   --tag-check-size: #{$tag-check-size};
+  // scss-docs-end tag-css-vars
   display: inline-flex;
   gap: var(--tag-gap);
   align-items: center;

package/scss/ui/_timeline.scss

@@ -4,7 +4,9 @@
 @use '../config' as *;
 
 .timeline {
+  // scss-docs-start timeline-css-vars
   --timeline-icon-size: #{$avatar-size};
+  // scss-docs-end timeline-css-vars
   position: relative;
   padding: 0;
   list-style: none;

package/scss/ui/_tracking.scss

@@ -1,10 +1,12 @@
 @use '../config' as *;
 
 .tracking {
+  // scss-docs-start tracking-css-vars
   --tracking-height: #{$tracking-height};
   --tracking-gap-width: #{$tracking-gap-width};
   --tracking-block-border-radius: #{$tracking-border-radius};
   --tracking-block-min-width: #{$tracking-block-min-width};
+  // scss-docs-end tracking-css-vars
   display: flex;
   gap: var(--tracking-gap-width);
 }

package/scss/ui/_type.scss

@@ -9,10 +9,10 @@
 
 a {
   text-decoration-skip-ink: auto;
-  color: color-mix(in sRGB, transparent, var(--link-color) calc(var(--link-opacity, 1) * 100%));
+  color: color-transparent(var(--link-color), calc(var(--link-opacity, 1) * 100%));
 
   &:hover {
-    color: color-mix(in sRGB, transparent, var(--link-hover-color) calc(var(--link-opacity, 1) * 100%));
+    color: color-transparent(var(--link-hover-color), calc(var(--link-opacity, 1) * 100%));
   }
 }
 
@@ -129,6 +129,7 @@ dl {
 pre {
   --scrollbar-color: #{$pre-color};
   padding: $pre-padding;
+  font-size: $pre-font-size;
   line-height: $line-height-base;
   color: $pre-color;
   background: $pre-bg;
@@ -136,6 +137,13 @@ pre {
 
   @include scrollbar();
 
+  // pre keeps its dark surface in both color schemes, so the light-mode
+  // selection tint (10% primary) is invisible here - use the dark-mode value
+  &::selection,
+  ::selection {
+    background-color: $pre-selection-bg;
+  }
+
   code {
     padding: 0;
     background: transparent;
@@ -210,7 +218,7 @@ a:hover:has(.icon) {
   &:hover {
     color: var(--primary);
     text-decoration: none;
-    background: color-transparent(var(--secondary), 0.04);
+    background: var(--hover-bg);
   }
 }
 
@@ -241,7 +249,7 @@ Mentions
     &:hover,
     &.hover {
       text-decoration: underline;
-      background: var(--bg-surface-secondary);
+      background: var(--hover-bg);
     }
   }
 }

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

@@ -69,7 +69,14 @@ Form switch
   .form-check-input {
     height: $form-switch-height;
     margin-top: ($form-check-min-height - $form-switch-height) * 0.5;
-    @include transition(background-color $transition-time, background-position $transition-time);
+    @include transition(background-color $transition-time, background-position $transition-time, $focus-ring-transition);
+
+    // An off switch that is disabled fills its track like a disabled input,
+    // so it no longer looks like an off switch that can still be toggled.
+    &:disabled:not(:checked) {
+      --form-switch-color: #{$form-switch-disabled-color};
+      background-color: $form-switch-disabled-bg;
+    }
   }
 }
 
@@ -86,10 +93,11 @@ Form switch
   padding-inline-start: var(--form-switch-lg-padding-start);
 
   .form-check-input {
+    --form-switch-knob-size: calc(var(--form-switch-lg-height) * 0.75);
+    --form-switch-knob-offset: calc(var(--form-switch-lg-height) * 0.125);
     width: var(--form-switch-lg-width);
     height: var(--form-switch-lg-height);
     margin-inline-start: var(--form-switch-lg-input-offset);
-    background-size: var(--form-switch-lg-bg-size);
   }
 
   .form-check-label {

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

@@ -19,6 +19,7 @@ Color Input
 }
 
 .form-colorinput-color {
+  @include focus-ring-transition();
   display: block;
   width: var(--form-colorinput-size);
   height: var(--form-colorinput-size);
@@ -35,7 +36,7 @@ Color Input
     height: 100%;
     content: '';
     background: no-repeat center center/$form-check-input-checked-bg-size;
-    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));
     opacity: 0;
     @include transition(opacity $transition-time);
 
@@ -46,12 +47,12 @@ Color Input
 
   .form-colorinput-input:focus ~ & {
     border-color: var(--primary);
-    box-shadow: $input-btn-focus-box-shadow;
+    @include focus-ring(true);
   }
 
   @at-root .form-colorinput-light & {
     &::before {
-      background-image: escape-svg($form-check-input-checked-bg-image-dark);
+      background-image: escape-svg(svg-icon-color($form-check-input-checked-bg-image, $body-color));
     }
   }
 }

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

@@ -15,16 +15,3 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 [type='search']::-webkit-search-cancel-button {
   appearance: none;
 }
-
-/**
-Form control dark theme fix
- */
-.form-control {
-  &::file-selector-button {
-    background-color: var(--btn-color, #{$form-file-button-bg});
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--btn-color, #{$form-file-button-hover-bg});
-  }
-}

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

@@ -19,6 +19,7 @@ Image check
 }
 
 .form-imagecheck-figure {
+  @include focus-ring-transition();
   position: relative;
   display: block;
   margin: 0;
@@ -28,7 +29,7 @@ Image check
 
   .form-imagecheck-input:focus ~ & {
     border-color: var(--primary);
-    box-shadow: $input-btn-focus-box-shadow;
+    @include focus-ring(true);
   }
 
   .form-imagecheck-input:checked ~ & {
@@ -54,7 +55,7 @@ Image check
 
     .form-imagecheck-input:checked ~ & {
       background-color: $form-check-input-checked-bg-color;
-      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));
       background-repeat: $form-check-input-checked-bg-repeat;
       background-position: center;
       background-size: $form-check-input-checked-bg-size;
@@ -66,7 +67,7 @@ Image check
     }
 
     .form-imagecheck-input[type='radio']:checked ~ & {
-      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));
     }
   }
 }

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

@@ -0,0 +1,171 @@
+@use '../../config' as *;
+
+.otp {
+  // scss-docs-start otp-css-vars
+  --otp-size: #{$otp-size};
+  --otp-font-size: #{$otp-font-size};
+  --otp-gap: #{$otp-gap};
+  --otp-slot-color: #{$otp-slot-color};
+  --otp-slot-bg: #{$otp-slot-bg};
+  --otp-slot-border-width: #{$otp-slot-border-width};
+  --otp-slot-border-color: #{$otp-slot-border-color};
+  --otp-slot-border-radius: #{$otp-slot-border-radius};
+  --otp-slot-box-shadow: #{$otp-slot-box-shadow};
+  --otp-separator-color: #{$otp-separator-color};
+  // scss-docs-end otp-css-vars
+  position: relative;
+  display: inline-flex;
+  gap: var(--otp-gap);
+  align-items: center;
+  min-height: var(--otp-size);
+  // `.otp` is the only content on its line, so its own baseline (derived from
+  // whichever slot the flex baseline algorithm picks) never has to matter -
+  // otherwise an empty vs. active slot resolve to different baselines and the
+  // line box around `.otp` grows or shrinks by a few pixels between them.
+  vertical-align: bottom;
+}
+
+// Before the script renders the slots, the input keeps a `.form-control`-like
+// look and the `.otp` wrapper's `min-height` already matches it - no layout
+// shift once `.otp-rendered .otp-input` below takes over.
+.otp > input {
+  width: 100%;
+  height: var(--otp-size);
+  padding-inline: 0.75rem;
+  font-size: var(--otp-font-size);
+  color: var(--otp-slot-color);
+  background-color: var(--otp-slot-bg);
+  border: var(--otp-slot-border-width) solid var(--otp-slot-border-color);
+  box-shadow: var(--otp-slot-box-shadow);
+  @include border-radius(var(--otp-slot-border-radius));
+}
+
+// The real input is a transparent overlay on top of the rendered slots, so
+// screen readers, password managers and SMS autofill see one ordinary field.
+.otp-rendered .otp-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: transparent;
+  cursor: text;
+  caret-color: transparent;
+  background-color: transparent;
+  border: 0;
+  // The base `.otp > input` rule sets this for the pre-render fallback look;
+  // the overlay itself must stay invisible, or its shadow spans every slot.
+  box-shadow: none;
+
+  // The active slot draws its own focus ring; the native outline would
+  // otherwise wrap the whole overlay input, spanning every slot at once.
+  &:focus {
+    outline: 0;
+  }
+
+  &::selection {
+    background-color: transparent;
+  }
+}
+
+.otp-slots {
+  display: inline-flex;
+  gap: var(--otp-gap);
+  align-items: center;
+  pointer-events: none;
+}
+
+.otp-slot {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--otp-size);
+  height: var(--otp-size);
+  font-size: var(--otp-font-size);
+  color: var(--otp-slot-color);
+  background-color: var(--otp-slot-bg);
+  border: var(--otp-slot-border-width) solid var(--otp-slot-border-color);
+  box-shadow: var(--otp-slot-box-shadow);
+  @include border-radius(var(--otp-slot-border-radius));
+  @include focus-ring-transition(border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
+}
+
+.otp-slot-active {
+  // Bring the focused slot to the front so its ring isn't clipped by the
+  // next slot in `.otp-connected`, where slots overlap by their border width.
+  z-index: 1;
+
+  --focus-ring-offset: -1px;
+  border-color: $input-focus-border-color;
+  @include focus-ring(true);
+
+  &:not(.otp-slot-filled)::after {
+    display: block;
+    width: 1px;
+    height: 1.2em;
+    content: '';
+    background-color: var(--otp-slot-color);
+    animation: otp-caret-blink 1s step-end infinite;
+  }
+}
+
+.otp-input:disabled ~ .otp-slots .otp-slot {
+  color: var(--disabled-color);
+  background-color: $input-disabled-bg;
+}
+
+// Zero gap with shared, merged borders; only the first and last slot keep a
+// rounded corner. Not meant to be combined with `groups`/`separator`.
+.otp-connected {
+  --otp-gap: 0;
+
+  .otp-slot {
+    margin-inline-start: calc(var(--otp-slot-border-width) * -1);
+    border-radius: 0;
+
+    &:first-child {
+      margin-inline-start: 0;
+      border-start-start-radius: var(--otp-slot-border-radius);
+      border-end-start-radius: var(--otp-slot-border-radius);
+    }
+
+    &:last-child {
+      border-start-end-radius: var(--otp-slot-border-radius);
+      border-end-end-radius: var(--otp-slot-border-radius);
+    }
+  }
+}
+
+.otp-separator {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding-inline: calc(var(--otp-gap) / 2);
+  color: var(--otp-separator-color);
+}
+
+.otp-sm {
+  --otp-size: #{$input-height-sm};
+  --otp-font-size: #{$input-font-size-sm};
+}
+
+.otp-lg {
+  --otp-size: #{$input-height-lg};
+  --otp-font-size: #{$input-font-size-lg};
+}
+
+@keyframes otp-caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}