@tabler/core 1.5.1 → 1.6.0

package/scss/ui/_legend.scss

@@ -1,14 +1,157 @@
 /**
 Legend
  */
+@use 'sass:map';
+
 @use '../config' as *;
 
-.legend {
+//
+// Legend dot
+//
+.legend-dot {
   --legend-size: #{$legend-size};
+  --legend-color: #{$legend-bg};
   display: inline-block;
+  flex-shrink: 0;
   width: var(--legend-size);
   height: var(--legend-size);
-  background: $legend-bg;
+  background: var(--legend-color);
   border: 1px solid var(--border-color-translucent);
   @include border-radius($legend-border-radius);
 }
+
+//
+// Legend
+//
+.legend {
+  --legend-color: #{$legend-bg};
+  --legend-gap: #{$legend-gap};
+  --legend-padding-y: #{$legend-padding-y};
+  --legend-padding-x: #{$legend-padding-x};
+  --legend-hover-bg: #{color-transparent(var(--legend-color), 0.1)};
+  display: inline-flex;
+  gap: var(--legend-gap);
+  align-items: center;
+  padding: var(--legend-padding-y) 0;
+  margin: 0;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  color: var(--body-color);
+  text-decoration: none;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  @include focus-ring-transition(background-color $transition-time, opacity $transition-time);
+  @include border-radius(var(--border-radius-pill));
+
+  .legend-dot {
+    --legend-color: inherit;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    @include focus-ring();
+    outline-offset: calc(var(--focus-ring-width) * -1);
+  }
+}
+
+a.legend,
+button.legend {
+  padding-inline: var(--legend-padding-x);
+  cursor: pointer;
+
+  &:hover,
+  &.active {
+    color: var(--body-color);
+    text-decoration: none;
+    background: var(--legend-hover-bg);
+  }
+}
+
+.legend-off {
+  opacity: 0.5;
+
+  .legend-dot {
+    --legend-color: #{$legend-bg};
+  }
+}
+
+.legend-value {
+  font-variant-numeric: tabular-nums;
+  color: var(--secondary);
+}
+
+.legend-unit {
+  font-size: $h5-font-size;
+  font-weight: var(--font-weight-normal);
+  color: var(--secondary);
+}
+
+// Large legend: the label on the first line, a big value (with an optional unit) below
+.legend-lg {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  row-gap: 0.5rem;
+  min-width: $legend-lg-min-width;
+  @include border-radius(var(--border-radius));
+  font-weight: var(--font-weight-normal);
+  text-align: start;
+
+  .legend-value {
+    grid-column: 1 / -1;
+    font-size: $legend-lg-value-font-size;
+    font-weight: var(--font-weight-medium);
+    color: var(--body-color);
+  }
+}
+
+@each $name, $color in map.merge($theme-colors, $social-colors) {
+  .legend-#{$name} {
+    --legend-color: var(--#{$name});
+  }
+}
+
+//
+// Legend list
+//
+.legend-list {
+  --legend-list-gap: #{$legend-list-gap};
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--legend-list-gap);
+  align-items: center;
+
+  // Links and buttons carry their own horizontal padding, so the list can be tighter
+  &:has(> a.legend, > button.legend) {
+    --legend-list-gap: #{$legend-list-gap-interactive};
+  }
+}
+
+.legend-list-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+// A line between the items, for a row of large legends
+.legend-list-divided {
+  &,
+  &:has(> a.legend, > button.legend) {
+    --legend-list-gap: 0.5rem 1.5rem;
+  }
+
+  > .legend {
+    position: relative;
+  }
+
+  > .legend + .legend::before {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: -0.75rem;
+    content: '';
+    border-inline-start: var(--border-width) var(--border-style) var(--border-color);
+  }
+}

package/scss/ui/_lists.scss

@@ -31,12 +31,12 @@
   &.disabled,
   &:disabled {
     color: $gray-500;
-    background-color: $dropdown-link-hover-bg;
+    background-color: var(--hover-bg);
   }
 }
 
 .list-group-item.active {
-  background-color: $dropdown-link-hover-bg;
+  background-color: var(--active-bg);
   border-inline-start-color: $component-active-bg;
   border-inline-start-width: $border-width-wide;
 }
@@ -57,7 +57,7 @@
     &:active,
     &:focus,
     &:hover {
-      background-color: $dropdown-link-hover-bg;
+      background-color: var(--hover-bg);
     }
   }
 

package/scss/ui/_markdown.scss

@@ -72,5 +72,6 @@ Prose (formerly markdown)
 
   pre {
     max-height: var(--markdown-pre-max-height);
+    font-size: $markdown-pre-font-size;
   }
 }

package/scss/ui/_modals.scss

@@ -16,6 +16,7 @@
 
 .modal-body {
   @include scrollbar();
+  overscroll-behavior: contain;
 
   .modal-title {
     margin-bottom: var(--modal-body-title-margin-bottom);
@@ -48,7 +49,7 @@
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
   line-height: $line-height-base;
-  color: $headings-color;
+  color: var(--heading-color, var(--emphasis-color));
 }
 
 .modal-footer {
@@ -74,7 +75,25 @@
   --modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
   --modal-footer-padding-y: #{$modal-footer-padding-y};
 
+  overscroll-behavior: contain;
+
   @include media-print() {
     display: none !important;
   }
 }
+
+//
+// Native dialog
+//
+// Make the backdrop of a native `<dialog>` opened with `showModal()` match the
+// backdrop used by modals and offcanvases.
+//
+// The alpha is part of the color instead of `opacity`, so that `backdrop-filter`
+// blurs the page instead of blending a blurred copy over the sharp one.
+dialog::backdrop {
+  background: color-transparent(var(--backdrop-bg), calc(var(--backdrop-opacity) * 100%));
+}
+
+dialog.modal-blur::backdrop {
+  backdrop-filter: var(--backdrop-filter);
+}

package/scss/ui/_nav.scss

@@ -1,7 +1,7 @@
 @use '../config' as *;
 
 .nav {
-  --nav-link-hover-bg: #{color-transparent(var(--nav-link-color), 0.04)};
+  --nav-link-hover-bg: var(--hover-bg);
   // Read by `.nav-vertical .nav-link.active` below; without it that rule's
   // color declaration was invalid and the active link fell back to the
   // inherited color.
@@ -77,7 +77,7 @@
 .nav-link {
   display: flex;
   align-items: center;
-  @include transition(color $transition-time, background-color $transition-time);
+  @include transition(color $transition-time, background-color $transition-time, $focus-ring-transition);
 
   &:hover,
   &:focus {
@@ -113,7 +113,7 @@
   }
 
   .nav-link:hover & {
-    color: var(--nav-link-hover-icon-color);
+    color: var(--nav-link-hover-icon-color, #{$nav-link-hover-icon-color});
   }
 }
 

package/scss/ui/_offcanvas.scss

@@ -6,6 +6,10 @@
   }
 }
 
+.offcanvas-body {
+  overscroll-behavior: contain;
+}
+
 .offcanvas-header {
   border-bottom: var(--border-width) var(--border-style) var(--border-color);
 }
@@ -26,3 +30,46 @@
   --offcanvas-narrow-width: #{$offcanvas-narrow-width};
   --offcanvas-width: var(--offcanvas-narrow-width);
 }
+
+// Floating variant: the panel keeps a gap from the viewport edges. Two routes
+// to the same state: the .offcanvas-floating class on the panel, or
+// data-bs-offcanvas-style="floating" on <html> (the theme settings), which
+// covers every panel on the page — found by its direction class.
+//
+// --offcanvas-margin is 0px above the breakpoint of a responsive variant, so
+// the inline content there is left alone.
+$offcanvas-floating-attr: "html[data-bs-offcanvas-style='floating']";
+
+.offcanvas-floating,
+#{$offcanvas-floating-attr} :is(.offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom) {
+  --offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out, translate $offcanvas-transition-duration ease-in-out};
+  max-width: calc(100% - 2 * var(--offcanvas-margin));
+  max-height: calc(100% - 2 * var(--offcanvas-margin));
+  margin: var(--offcanvas-margin);
+  border: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+  border-radius: $offcanvas-border-radius;
+
+  // The closed panel has to travel past its own margin to leave the viewport.
+  &.offcanvas-start {
+    /* rtl:ignore */
+    translate: calc(var(--dir) * -1 * var(--offcanvas-margin));
+  }
+
+  &.offcanvas-end {
+    /* rtl:ignore */
+    translate: calc(var(--dir) * var(--offcanvas-margin));
+  }
+
+  &.offcanvas-top {
+    translate: 0 calc(-1 * var(--offcanvas-margin));
+  }
+
+  &.offcanvas-bottom {
+    translate: 0 var(--offcanvas-margin);
+  }
+
+  &.showing,
+  &.show:not(.hiding) {
+    translate: none;
+  }
+}

package/scss/ui/_patterns.scss

@@ -4,30 +4,41 @@
   --pattern-color: var(--body-color);
   --pattern-size: #{$pattern-size};
   --pattern-opacity: calc(var(--pattern-opacity-factor, #{$pattern-opacity-factor}) * #{$opacity});
-  --pattern-fill: color-mix(in oklch, var(--pattern-color) var(--pattern-opacity), transparent);
+  --pattern-fill: #{color-transparent(var(--pattern-color), var(--pattern-opacity))};
   background-clip: padding-box;
 }
 
-.bg-pattern-transparent {
+// The shared tokens are written once for every pattern through @extend; a
+// pattern with a different opacity only overrides --pattern-opacity.
+%pattern-base {
   @include pattern-base();
+}
+
+@mixin pattern-opacity($opacity) {
+  --pattern-opacity: calc(var(--pattern-opacity-factor, #{$pattern-opacity-factor}) * #{$opacity});
+}
+
+.bg-pattern-transparent {
+  @extend %pattern-base;
   background-image: repeating-conic-gradient(var(--pattern-fill) 0% 25%, transparent 0% 50%);
   background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
 }
 
 .bg-pattern-diagonal {
-  @include pattern-base();
+  @extend %pattern-base;
   background-image: repeating-linear-gradient(-45deg, var(--pattern-fill) 0 1px, transparent 0 50%);
   background-size: var(--pattern-size) var(--pattern-size);
 }
 
 .bg-pattern-diagonal-2 {
-  @include pattern-base();
+  @extend %pattern-base;
   background-image: repeating-linear-gradient(45deg, var(--pattern-fill) 0 1px, transparent 0 50%);
   background-size: var(--pattern-size) var(--pattern-size);
 }
 
 .bg-pattern-dots {
-  @include pattern-base(20%);
+  @extend %pattern-base;
+  @include pattern-opacity(20%);
   --pattern-dot: max(1px, calc(var(--pattern-size) * 0.1));
   background-image: radial-gradient(circle, var(--pattern-fill) var(--pattern-dot), transparent calc(var(--pattern-dot) + 0.5px)), radial-gradient(circle, var(--pattern-fill) var(--pattern-dot), transparent calc(var(--pattern-dot) + 0.5px));
   background-position:
@@ -37,7 +48,8 @@
 }
 
 .bg-pattern-rectangles {
-  @include pattern-base(3%);
+  @extend %pattern-base;
+  @include pattern-opacity(3%);
   background-image: repeating-linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%, transparent 75%, var(--pattern-fill) 75%, var(--pattern-fill)), repeating-linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%, transparent 75%, var(--pattern-fill) 75%, var(--pattern-fill));
   background-position:
     -1px -1px,
@@ -46,21 +58,24 @@
 }
 
 .bg-pattern-lines {
-  @include pattern-base(6%);
+  @extend %pattern-base;
+  @include pattern-opacity(6%);
   background-image: repeating-linear-gradient(0deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
   background-size: var(--pattern-size) var(--pattern-size);
 }
 
 .bg-pattern-lines-vertical {
-  @include pattern-base(6%);
+  @extend %pattern-base;
+  @include pattern-opacity(6%);
   background-image: repeating-linear-gradient(90deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
   background-size: var(--pattern-size) var(--pattern-size);
 }
 
 .bg-pattern-grid {
-  @include pattern-base(6%);
+  @extend %pattern-base;
+  @include pattern-opacity(6%);
   background-image: linear-gradient(to right, var(--pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-fill) 1px, transparent 1px);
   background-position:
     -1px -1px,
@@ -69,14 +84,15 @@
 }
 
 .bg-pattern-grid-diagonal {
-  @include pattern-base();
+  @extend %pattern-base;
   background-image: linear-gradient(45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%);
   background-position: center center;
   background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
 }
 
 .bg-pattern-blueprint {
-  @include pattern-base(6%);
+  @extend %pattern-base;
+  @include pattern-opacity(6%);
   --pattern-line: var(--pattern-fill);
   background-image: linear-gradient(var(--pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--pattern-line) 2px, transparent 2px), linear-gradient(var(--pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px);
   background-position:
@@ -92,7 +108,7 @@
 }
 
 .bg-pattern-cross-dots {
-  @include pattern-base();
+  @extend %pattern-base;
   background-image: radial-gradient(var(--pattern-fill) 1px, transparent 1px), radial-gradient(var(--pattern-fill) 1px, transparent 1px);
   background-position:
     0 0,
@@ -101,7 +117,7 @@
 }
 
 .bg-pattern-circles {
-  @include pattern-base();
+  @extend %pattern-base;
   background-image:
     radial-gradient(circle at center top, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%), radial-gradient(circle at center bottom, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%),
     radial-gradient(circle at right center, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%), radial-gradient(circle at left center, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%);
@@ -110,19 +126,22 @@
 }
 
 .bg-pattern-diagonal-stripes {
-  @include pattern-base(5%);
+  @extend %pattern-base;
+  @include pattern-opacity(5%);
   background-image: repeating-linear-gradient(45deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
   background-repeat: no-repeat;
 }
 
 .bg-pattern-diagonal-stripes-2 {
-  @include pattern-base(5%);
+  @extend %pattern-base;
+  @include pattern-opacity(5%);
   background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
   background-repeat: no-repeat;
 }
 
 .bg-pattern-zigzag {
-  @include pattern-base(5%);
+  @extend %pattern-base;
+  @include pattern-opacity(5%);
   background:
     linear-gradient(135deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
     linear-gradient(225deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
@@ -133,12 +152,14 @@
 }
 
 .bg-pattern-vertical-stripes {
-  @include pattern-base(5%);
+  @extend %pattern-base;
+  @include pattern-opacity(5%);
   background-image: repeating-linear-gradient(90deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
 }
 
 .bg-pattern-horizontal-stripes {
-  @include pattern-base(5%);
+  @extend %pattern-base;
+  @include pattern-opacity(5%);
   background-image: repeating-linear-gradient(0deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
   background-position: -1px -1px;
 }

package/scss/ui/_progress.scss

@@ -69,11 +69,12 @@ Progress bar
     bottom: 0;
     content: '';
     background-color: inherit;
+    animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
     will-change: inset-inline-start, inset-inline-end;
   }
 
-  &::before {
-    animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  &::after {
+    animation-delay: 0.75s;
   }
 }
 
@@ -127,7 +128,9 @@ Progressbg
 Progress steps
  */
 .progress-steps {
+  // scss-docs-start progress-steps-css-vars
   --progress-steps-gap: #{$progress-steps-gap};
+  // scss-docs-end progress-steps-css-vars
   display: flex;
   flex-wrap: nowrap;
   gap: var(--progress-steps-gap);

package/scss/ui/_ribbons.scss

@@ -1,8 +1,11 @@
 // stylelint-disable declaration-no-important
 
+@use 'sass:map';
+
 @use '../config' as *;
 
 .ribbon {
+  // scss-docs-start ribbon-css-vars
   --ribbon-margin: #{$card-ribbon-margin};
   --ribbon-border-radius: #{$card-ribbon-border-radius};
   --ribbon-font-size: #{$card-ribbon-font-size};
@@ -15,6 +18,7 @@
   --ribbon-top-padding-y: #{$ribbon-top-padding-y};
   --ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
   --ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
+  // scss-docs-end ribbon-css-vars
 
   position: absolute;
   inset-inline-end: calc(-1 * var(--ribbon-margin));
@@ -50,8 +54,8 @@
     border-top-color: transparent;
   }
 
-  @if $enable-extra-colors {
-    @each $color, $value in $extra-colors {
+  @each $color, $value in $theme-colors {
+    @if $enable-extra-colors or not map.has-key($extra-colors, $color) {
       &.bg-#{$color} {
         border-color: var(--#{$color});
       }

package/scss/ui/_segmented.scss

@@ -49,7 +49,7 @@
     &:hover,
     &.hover {
       color: var(--body-color);
-      background: rgba(0, 0, 0, 0.04);
+      background: var(--hover-bg);
     }
 
     &.disabled,

package/scss/ui/_signal.scss

@@ -0,0 +1,57 @@
+@use '../config' as *;
+
+.signal {
+  // scss-docs-start signal-css-vars
+  --signal-size: #{$signal-size};
+  --signal-color: #{$text-secondary};
+  --signal-bars: 3;
+  --signal-bar-border-radius: #{$signal-bar-border-radius};
+  --signal-bar-inactive-opacity: #{$signal-bar-inactive-opacity};
+  --signal-gap: calc(var(--signal-size) * #{$signal-gap-ratio});
+  --signal-padding-y: calc(var(--signal-size) * #{$signal-padding-y-ratio});
+  --signal-padding-x: calc(var(--signal-size) * #{$signal-padding-x-ratio});
+  // scss-docs-end signal-css-vars
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: var(--signal-gap);
+  align-items: flex-end;
+  width: var(--signal-size);
+  height: var(--signal-size);
+  padding: var(--signal-padding-y) var(--signal-padding-x);
+  vertical-align: middle;
+}
+
+// Each bar takes its share of the full height: the first of three is a third, the last is full
+.signal-bar {
+  --signal-bar-index: 1;
+  flex: 1;
+  height: calc(100% * var(--signal-bar-index) / var(--signal-bars));
+  background: var(--signal-color);
+  opacity: var(--signal-bar-inactive-opacity);
+  @include border-radius(var(--signal-bar-border-radius));
+
+  &.active {
+    opacity: 1;
+  }
+
+  @for $index from 2 through $signal-max-bars {
+    &:nth-child(#{$index}) {
+      --signal-bar-index: #{$index};
+    }
+  }
+}
+
+// The number of bars is read from the markup, so the steps stay even for any count
+@for $count from 2 through $signal-max-bars {
+  @if $count != 3 {
+    .signal:has(> .signal-bar:last-child:nth-child(#{$count})) {
+      --signal-bars: #{$count};
+    }
+  }
+}
+
+@each $name, $color in $theme-colors {
+  .signal-#{$name} {
+    --signal-color: var(--#{$name});
+  }
+}

package/scss/ui/_sortable.scss

@@ -0,0 +1,73 @@
+//
+// Sortable
+//
+@use '../config' as *;
+
+.sortable-ghost,
+.sortable-swap-highlight,
+.sortable-selected,
+.sortable-drag {
+  --sortable-ghost-bg: #{$sortable-ghost-bg};
+  --sortable-ghost-border-color: #{$sortable-ghost-border-color};
+  --sortable-ghost-opacity: #{$sortable-ghost-opacity};
+  --sortable-outline-width: #{$sortable-outline-width};
+  --sortable-selected-bg: #{$sortable-selected-bg};
+  --sortable-drag-bg: #{$sortable-drag-bg};
+  --sortable-drag-rotate: #{$sortable-drag-rotate};
+  --sortable-drag-box-shadow: #{$sortable-drag-box-shadow};
+}
+
+.sortable-ghost,
+.sortable-swap-highlight {
+  background-color: var(--sortable-ghost-bg);
+  outline: var(--sortable-outline-width) dashed var(--sortable-ghost-border-color);
+  outline-offset: calc(var(--sortable-outline-width) * -1);
+}
+
+.sortable-ghost {
+  opacity: var(--sortable-ghost-opacity);
+}
+
+tr.sortable-ghost,
+tr.sortable-swap-highlight,
+tr.sortable-selected {
+  > * {
+    --table-bg-state: var(--sortable-ghost-bg);
+  }
+}
+
+.sortable-selected {
+  background-color: var(--sortable-selected-bg);
+  outline: var(--sortable-outline-width) solid var(--sortable-ghost-border-color);
+  outline-offset: calc(var(--sortable-outline-width) * -1);
+}
+
+.list-group-item {
+  &.sortable-ghost,
+  &.sortable-swap-highlight,
+  &.sortable-selected,
+  &.sortable-drag {
+    @include border-radius(var(--list-group-border-radius));
+  }
+}
+
+.sortable-chosen {
+  cursor: grabbing;
+}
+
+.sortable-drag {
+  cursor: grabbing;
+  background-color: var(--sortable-drag-bg);
+  outline: var(--sortable-outline-width) solid var(--sortable-ghost-border-color);
+  outline-offset: calc(var(--sortable-outline-width) * -1);
+  box-shadow: var(--sortable-drag-box-shadow);
+  opacity: 1 !important; // stylelint-disable-line declaration-no-important
+  transition: none;
+
+  /* rtl:ignore */
+  rotate: calc(var(--sortable-drag-rotate) * var(--dir));
+}
+
+.card.sortable-drag {
+  box-shadow: var(--sortable-drag-box-shadow);
+}