@tabler/core 1.5.0 → 1.6.0

package/scss/bootstrap/forms/_form-select.scss

@@ -26,16 +26,13 @@
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
+  // Start the focus ring's `outline-color` transition from transparent, not `currentcolor`.
+  outline-color: transparent;
 
   &:focus {
     border-color: $form-select-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $form-select-focus-box-shadow;
-    }
+    --focus-ring-offset: -1px;
+    @include focus-ring(true);
   }
 
   &[multiple],

package/scss/helpers/_index.scss

@@ -41,6 +41,11 @@
     z-index: 1;
     content: '';
   }
+
+  // .btn is positioned, which would make the button itself the containing block
+  &.btn {
+    position: static;
+  }
 }
 
 //
@@ -139,8 +144,10 @@
 //
 // Focus ring
 //
-.focus-ring:focus {
-  outline: 0;
-  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
-  box-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color);
+.focus-ring {
+  @include focus-ring-transition();
+}
+
+.focus-ring:focus-visible {
+  @include focus-ring($color: var(--focus-ring-color));
 }

package/scss/layout/_accessibility.scss

@@ -28,7 +28,8 @@
   .btn-animate-icon-tada .icon,
   .wave-1,
   .wave-2,
-  .wave-3 {
+  .wave-3,
+  .otp-slot-active:not(.otp-slot-filled)::after {
     animation: none !important;
   }
 

package/scss/layout/_core.scss

@@ -2,14 +2,6 @@
 
 @use '../config' as *;
 
-html {
-  scrollbar-gutter: stable;
-
-  @supports not (scrollbar-gutter: stable) {
-    overflow-y: scroll;
-  }
-}
-
 // stylelint-disable property-no-vendor-prefix
 body {
   position: relative;

package/scss/layout/_navbar.scss

@@ -29,6 +29,11 @@
     .nav-link {
       justify-content: start;
       padding: var(--sidebar-nav-padding-y) var(--sidebar-nav-padding-x);
+
+      // In a vertical list the badge sits at the end of the row.
+      .badge:not(:empty) {
+        margin-inline-start: auto;
+      }
     }
 
     // One line, ellipsized — a title never wraps, so rows keep their height
@@ -344,53 +349,75 @@ Navbar
       min-height: 2.5rem;
       @include border-radius(var(--border-radius));
 
+      // A badge with text is part of the link's row, after the title. Only an
+      // empty badge is a notification dot pinned to the link's corner, so the
+      // absolute positioning is limited to `:empty` — a text badge positioned
+      // that way overlapped the title and, in a stacked list, hung past the
+      // link's edge and made the page scroll sideways.
       .badge {
-        position: absolute;
-        inset-inline-end: 0.5rem;
-        top: 0.5rem;
+        margin-inline-start: $spacer-2;
 
-        /* rtl:ignore */
-        transform: translate(calc(var(--dir) * 50%), -50%);
+        &:empty {
+          position: absolute;
+          inset-inline-end: 0.5rem;
+          top: 0.5rem;
+          margin-inline-start: 0;
+
+          /* rtl:ignore */
+          transform: translate(calc(var(--dir) * 50%), -50%);
+        }
       }
     }
   }
 }
 
+// The vertical navbar is a vertical list at every width: the stacked mobile
+// menu below its breakpoint, the sidebar from it up. Emitted once instead of
+// inside every breakpoint of both loops; it stays ahead of them in source
+// order, so the per-breakpoint rules below still override it.
+@if $enable-navbar-vertical {
+  .navbar-vertical[class*='navbar-expand'] {
+    @include navbar-vertical-nav();
+  }
+}
+
 .navbar-expand {
   @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
-        @include navbar-vertical-nav();
-
-        // Below the breakpoint the vertical navbar is a top bar row: toggler,
-        // brand, and whatever trails them (a user block, or nothing). Auto
-        // margins keep the brand centered either way — space-between alone
-        // would push it to the far edge when nothing follows it.
-        &.navbar-vertical .navbar-brand {
-          margin-inline: auto;
-        }
-
-        // In the stacked mobile menu nothing pins the trailing group to the
-        // bottom, so a small gap marks it as a separate part of the menu.
-        &.navbar-vertical .navbar-side {
-          margin-top: $sidebar-inset;
-        }
+      @if $next {
+        @include media-breakpoint-down($next) {
+          @include navbar-vertical-nav();
+
+          // Below the breakpoint the vertical navbar is a top bar row: toggler,
+          // brand, and whatever trails them (a user block, or nothing). Auto
+          // margins keep the brand centered either way — space-between alone
+          // would push it to the far edge when nothing follows it.
+          &.navbar-vertical .navbar-brand {
+            margin-inline: auto;
+          }
 
-        // Below the breakpoint the navbar-footer sits in the top bar row:
-        // the avatar alone, with its menu dropping down instead of up.
-        .navbar-footer {
-          .nav-link-title {
-            display: none;
+          // In the stacked mobile menu nothing pins the trailing group to the
+          // bottom, so a small gap marks it as a separate part of the menu.
+          &.navbar-vertical .navbar-side {
+            margin-top: $sidebar-inset;
           }
 
-          .dropup .dropdown-menu {
-            inset-inline-start: auto;
-            inset-inline-end: 0;
-            top: 100%;
-            bottom: auto;
+          // Below the breakpoint the navbar-footer sits in the top bar row:
+          // the avatar alone, with its menu dropping down instead of up.
+          .navbar-footer {
+            .nav-link-title {
+              display: none;
+            }
+
+            .dropup .dropdown-menu {
+              inset-inline-start: auto;
+              inset-inline-end: 0;
+              top: 100%;
+              bottom: auto;
+            }
           }
         }
       }
@@ -431,7 +458,7 @@ Navbar
         &.navbar-vertical {
           ~ .navbar,
           ~ .page-wrapper {
-            margin-inline-start: var(--sidebar-width);
+            margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-gap, 0px));
           }
         }
 
@@ -440,7 +467,7 @@ Navbar
           ~ .navbar,
           ~ .page-wrapper {
             margin-inline-start: 0;
-            margin-inline-end: var(--sidebar-width);
+            margin-inline-end: calc(var(--sidebar-width) + var(--sidebar-gap, 0px));
           }
         }
       }
@@ -504,6 +531,7 @@ Navbar toggler
   width: 1.25em;
   height: 2px;
   background: currentColor;
+  mask-image: none; // the bars below replace the masked hamburger from bootstrap/_navbar
   @include border-radius(var(--border-radius-pill));
   @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
 
@@ -608,6 +636,12 @@ html[data-bs-navbar-theme='primary'] .page > .navbar {
   --navbar-border-color: transparent;
 }
 
+// The menu row of the two-row navbar, which is not a direct child of .page.
+html[data-bs-navbar-theme='primary'] .page > [class*='navbar-expand'] .navbar {
+  --navbar-bg: var(--primary);
+  --navbar-border-color: transparent;
+}
+
 /**
 Navbar vertical
  */
@@ -622,6 +656,16 @@ Navbar vertical
   // a bare :where()/[…] selector would lose to it and never take effect.
   html[data-bs-sidebar^='folded'] {
     --sidebar-width: var(--sidebar-folded-width);
+
+    // The sidebar is rendered for the expanded state, so the active submenu can
+    // arrive open (.show). Folded, it would paint as a flyout until sidebar.ts
+    // closes it on DOMContentLoaded — a flicker on every reload. Menus opened by
+    // the Dropdown plugin carry a popper data attribute (data-tblr-popper from
+    // tabler.js, data-bs-popper from Bootstrap's own js), so only the
+    // server-rendered ones hide.
+    .navbar-vertical .dropdown-menu.show:not([data-bs-popper]):not([data-tblr-popper]) {
+      display: none;
+    }
   }
 
   .navbar-vertical:is(.navbar-folded, .navbar-folded-hover) {
@@ -651,9 +695,12 @@ Navbar vertical
     // The hidden aside must leave no gap: its siblings offset themselves by
     // --sidebar-width, and this declaration sits on the same elements as the
     // folded copy above, so it wins by coming later.
+    // A length, not a bare 0: the offset is added up in calc(). A floating
+    // navbar keeps its own gap from the viewport edge.
     > .navbar,
     > .page-wrapper {
-      --sidebar-width: 0;
+      --sidebar-width: 0px;
+      --sidebar-gap: var(--navbar-margin, 0px);
     }
   }
 
@@ -723,11 +770,6 @@ Navbar vertical
               flex-grow: 1;
               flex-direction: column;
               min-height: auto;
-
-              .nav-link {
-                padding-top: 0.5rem;
-                padding-bottom: 0.5rem;
-              }
             }
 
             // Bottom-pinned footer area, e.g. a user block. Sits after the
@@ -781,15 +823,13 @@ Navbar vertical
               padding-inline-end: var(--sidebar-width);
             }
 
-            @include navbar-vertical-nav();
-
             // Folded state, both routes; the hover variant folds only while
             // not hovered and not holding visible keyboard focus. Plain
             // :focus-within would keep the sidebar stuck open after a mouse
             // click, because the clicked link keeps focus.
-            &:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible))),
-            :where([data-bs-sidebar='folded']) &,
-            :where([data-bs-sidebar='folded-hover']) &:not(:hover):not(:has(:focus-visible)) {
+            // One :is() instead of a selector list — the mixin's rules are long
+            // and a list would repeat each of them three times.
+            &:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible)), [data-bs-sidebar='folded'] *, [data-bs-sidebar='folded-hover'] :not(:hover):not(:has(:focus-visible))) {
               @include navbar-vertical-folded();
             }
 
@@ -838,3 +878,58 @@ Navbar vertical
     box-shadow: inherit;
   }
 }
+
+/**
+Navbar floating
+ */
+// The navbar keeps a gap from the edges around it, like .offcanvas-floating,
+// with an outline on every side instead of the single border line.
+//
+// Two routes to the same state: the .navbar-floating class on the navbar
+// (static markup), or data-bs-navbar-style="floating" on <html> (the theme
+// settings), which covers whichever navigation the page shows — the menu row
+// of the two-row navbar included, which inherits the variables from its
+// navbar-expand-* wrapper.
+//
+// The variables exist only from the navbar-expand-* breakpoint up, so below it
+// every fallback applies and the navbar stays attached.
+$navbar-floating-attr: "html[data-bs-navbar-style='floating'] .page >";
+
+.navbar-floating,
+#{$navbar-floating-attr} .navbar,
+#{$navbar-floating-attr} [class*='navbar-expand'] .navbar {
+  margin: var(--navbar-margin, 0);
+  outline: var(--navbar-outline-width, 0) solid var(--navbar-border-color);
+  outline-offset: calc(-1 * var(--navbar-outline-width, 0px));
+  @include border-radius(var(--navbar-border-radius, 0));
+}
+
+#{$navbar-floating-attr} [class*='navbar-expand'] .navbar {
+  margin-top: 0;
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint, $grid-breakpoints);
+  $infix: breakpoint-infix($next, $grid-breakpoints);
+
+  @include media-breakpoint-up($next) {
+    .navbar-floating.navbar-expand#{$infix},
+    #{$navbar-floating-attr} .navbar-expand#{$infix} {
+      --navbar-margin: #{$navbar-floating-margin};
+      --navbar-border-radius: #{$navbar-floating-border-radius};
+      --navbar-outline-width: var(--navbar-border-width);
+    }
+  }
+}
+
+// The page next to a floating sidebar moves over by the sidebar's two margins,
+// and a floating navbar next to any sidebar keeps its own gap from it. The
+// sibling offsets read --sidebar-gap only from the sidebar's breakpoint up.
+.navbar-vertical ~ .navbar-floating {
+  --sidebar-gap: var(--navbar-margin, 0px);
+}
+
+.navbar-floating.navbar-vertical ~ :is(.navbar, .page-wrapper),
+#{$navbar-floating-attr} .navbar-vertical ~ :is(.navbar, .page-wrapper) {
+  --sidebar-gap: calc(2 * #{$navbar-floating-margin});
+}

package/scss/layout/_page.scss

@@ -2,6 +2,7 @@
 
 // Skip-to-content link: hidden via .visually-hidden-focusable until keyboard focus reveals it
 .skip-link {
+  @include focus-ring-transition();
   position: fixed;
   inset-inline-start: 0;
   top: 0;
@@ -12,8 +13,7 @@
   background: var(--primary);
 
   &:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
+    @include focus-ring(true);
   }
 }
 
@@ -130,6 +130,19 @@
   color: var(--secondary);
 }
 
+// Heading of a section inside the page body, e.g. between groups of cards in a `.row-cards`
+.page-section-title {
+  margin: 1rem 0 0;
+  font-size: $h2-font-size;
+  font-weight: $page-title-font-weight;
+  line-height: $h2-line-height;
+}
+
+.page-section-description {
+  margin: 0.25rem 0 0;
+  color: var(--secondary);
+}
+
 //
 // Page cover
 //

package/scss/layout/_root.scss

@@ -29,8 +29,8 @@
 
   // Dark mode tints the primary towards white, so links keep a 4.5:1 contrast
   // on the dark surfaces. Hover shades the link in light mode and tints it in dark.
-  --link-color: light-dark(var(--primary), color-mix(in srgb, var(--primary), #fff 40%));
-  --link-hover-color: light-dark(color-mix(in srgb, var(--link-color), #000 20%), color-mix(in srgb, var(--link-color), #fff 20%));
+  --link-color: light-dark(var(--primary), #{mix-color-css(var(--white), var(--primary), 40%)});
+  --link-hover-color: light-dark(#{mix-color-css(var(--black), var(--link-color), 20%)}, #{mix-color-css(var(--white), var(--link-color), 20%)});
 
   --secondary: light-dark(var(--gray-500), var(--gray-400));
   --tertiary: var(--gray-400);
@@ -46,7 +46,8 @@
 
   --icon-color: #{$icon-color};
 
-  --active-bg: light-dark(#{$active-bg}, #{$lighten-dark});
+  --active-bg: #{$active-bg};
+  --hover-bg: #{$hover-bg};
 
   --disabled-bg: #{$disabled-bg};
   // $disabled-color already derives from var(--body-color) at compute time, so it

package/scss/marketing/_hero.scss

@@ -49,8 +49,6 @@
   max-width: 65rem;
   margin: 4rem auto;
   @include border-radius($border-radius-lg);
-  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
-  //  0 4px 6px -2px rgba($color-text, 0.05);
 
   img,
   svg {
@@ -60,12 +58,3 @@
     height: auto;
   }
 }
-//
-//.hero-img-side {
-//  img,
-//  svg {
-//    max-width: 100%;
-//    height: auto;
-//    display: block;
-//  }
-//}

package/scss/mixins/_deprecated.scss

@@ -0,0 +1,110 @@
+// Functions and mixins kept only so that projects written for an older 1.x
+// release still compile. Nothing in Tabler calls them. Each one warns once when
+// it is used; set `$enable-deprecation-messages: false` to silence that.
+//
+// Removed in 2.0, together with this file.
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
+@use '../settings' as *;
+@use '../variables' as *;
+@use 'functions' as *;
+@use 'bootstrap/breakpoints' as *;
+@use 'bootstrap/deprecate' as *;
+
+@function -deprecated($name, $instead) {
+  @if $enable-deprecation-messages != false {
+    @warn '#{$name} has been deprecated as of 1.6. It will be removed entirely in 2.0. #{$instead}';
+  }
+  @return null;
+}
+
+// deprecated(2.0): use `mix-color($color, $background, 10%)`
+@function theme-color-lighter($color, $background: #fff) {
+  $warned: -deprecated('theme-color-lighter()', 'Use mix-color() instead.');
+  @return color.to-gamut(color.mix($color, $background, 10%, $method: rgb), $space: rgb, $method: clip);
+}
+
+// deprecated(2.0): use `shade-color($color, 10%)`
+@function theme-color-darker($color) {
+  $warned: -deprecated('theme-color-darker()', 'Use shade-color() instead.');
+  @return shade-color($color, 10%);
+}
+
+// deprecated(2.0): use `escape-svg(url("data:image/svg+xml,…"))`
+@function url-svg($svg) {
+  $warned: -deprecated('url-svg()', 'Use escape-svg() instead.');
+  $svg: str-replace($svg, '#', '%23');
+  $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+
+  @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+}
+
+// deprecated(2.0): write the `var()` list by hand
+@function varify($list) {
+  $warned: -deprecated('varify()', 'Write the var() values by hand.');
+  $result: null;
+  @each $entry in $list {
+    $result: list.append($result, var(--#{$entry}), space);
+  }
+  @return $result;
+}
+
+// deprecated(2.0): filter the map with `map.get()` in a loop
+@function map-get-multiple($map, $values) {
+  $warned: -deprecated('map-get-multiple()', 'Use map.get() from sass:map.');
+  $result: ();
+  @each $key, $value in $map {
+    @if (list.index($values, $key) != null) {
+      $result: map.merge(
+        $result,
+        (
+          $key: $value,
+        )
+      );
+    }
+  }
+  @return $result;
+}
+
+// deprecated(2.0): use `map.merge()` from `sass:map`, it takes any number of maps
+@function map-merge-multiple($maps...) {
+  $warned: -deprecated('map-merge-multiple()', 'Use map.merge() from sass:map.');
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map.merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
+// deprecated(2.0): only `media-breakpoint-down-than()` needed it
+@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $warned: -deprecated('breakpoint-prev()', '');
+  $n: list.index($breakpoint-names, $name);
+  @if not $n {
+    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+  }
+  @return if(sass($n > 1): list.nth($breakpoint-names, $n - 1); else: null);
+}
+
+// deprecated(2.0): use `media-breakpoint-down()` with the breakpoint one step down
+@mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
+  @include deprecate('media-breakpoint-down-than()', '1.6', '2.0');
+  $n: list.index(map.keys($breakpoints), $name);
+  $prev: if(sass($n and $n > 1): list.nth(map.keys($breakpoints), $n - 1); else: null);
+
+  @if $prev == null {
+    @content;
+  } @else {
+    $max: breakpoint-max($prev, $breakpoints);
+
+    @if $max {
+      @media (max-width: $max) {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}