kmaterialize 2.3.3-1.0.12 → 2.3.3-1.0.13

package/components/button/_buttons.scss

@@ -128,7 +128,13 @@
   }
 
   &:focus {
-    background-color: $button-floating-background-focus;
+    // Was $button-floating-background-focus (--md-ref-palette-secondary80,
+    // a raw MD3 secondary tone) - it doesn't track a custom theme's
+    // primary/container colors the way :hover's color-mix above does, so
+    // it could show as a clashing color (e.g. blue) on a themed palette.
+    // Same formula as :hover, just mixed a bit stronger for the stronger
+    // state.
+    background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 24%);
     @extend .z-depth-1-half;
   }
 

package/components/slider/_range.scss

@@ -114,7 +114,11 @@ input[type=range]::-moz-focus-inner {
 
 input[type=range]::-moz-range-thumb {
   @include range-thumb;
-  margin-top: -5px;
+  // No margin-top here, unlike the -webkit-slider-thumb rule above:
+  // Firefox already vertically centers ::-moz-range-thumb on the track
+  // by default. Copying webkit's -5px correction (needed there because
+  // Chrome/Safari top-align the thumb by default) over-corrects in
+  // Firefox, pushing an already-centered thumb noticeably too high.
 }
 
 // hide the outline behind the border

package/components/toolbar/_toolbar.scss

@@ -109,6 +109,49 @@
   }
 }
 
+/// Slider
+///////////////////////////////////////////////////////
+///
+
+// A pill container for a range-field, matching .toolbar-track's look -
+// also fixes two things a bare range-field has inside a .toolbar: the
+// native track line is var(--md-sys-color-surface-variant), the exact
+// same color as .toolbar's own background, so it's invisible without a
+// container giving it something else to contrast against; and this also
+// vertically centers any label text/icons placed next to it.
+.toolbar-slider {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 13px;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  .range-field {
+    width: 120px;
+    margin-top: 18px;
+  }
+
+  // Material icons default to 24px, which crowds a 34px-tall pill and
+  // reads a lot heavier than adjacent 13-14px text labels - match the
+  // track item's scale instead.
+  i.material-icons {
+    font-size: 18px;
+  }
+
+  span {
+    line-height: 1;
+    // Measured against the actual track/thumb center: a "-"/"+" glyph's
+    // ink sits a few px below the middle of its own line box in this
+    // font, even though the box itself is perfectly flex-centered - nudge
+    // the glyph up to compensate.
+    position: relative;
+    top: -3px;
+  }
+}
+
 /// Expandable search
 ///////////////////////////////////////////////////////
 ///

package/components/toolbar/toolbar.ts

@@ -23,6 +23,16 @@ export class Toolbar extends Component<ToolbarOptions> {
     this._tracks = Array.from(this.el.querySelectorAll<HTMLElement>('.toolbar-track'));
     this._setupEventHandlers();
     this._tracks.forEach((track) => this._moveIndicator(track, false));
+
+    // A custom/web font can still be loading at construction time; its
+    // metrics landing after this first measurement would leave the
+    // indicator very slightly offset from the (now differently-sized)
+    // text it's supposed to sit behind. Re-measure once fonts are ready.
+    if (typeof document !== 'undefined' && document.fonts) {
+      document.fonts.ready.then(() => {
+        this._tracks.forEach((track) => this._moveIndicator(track, false));
+      });
+    }
   }
 
   static get defaults(): ToolbarOptions {
@@ -122,7 +132,12 @@ export class Toolbar extends Component<ToolbarOptions> {
     if (!indicator || !active) return;
 
     if (!animate) indicator.style.transition = 'none';
-    indicator.style.transform = `translateX(${active.offsetLeft - track.clientLeft}px)`;
+    // No "- track.clientLeft" here: offsetLeft is already relative to the
+    // offsetParent's padding edge, same origin as the indicator's own
+    // `left: 0` (an absolutely positioned element's containing block is
+    // its ancestor's padding box) - subtracting the border width again
+    // was double-counting it, nudging the indicator a px too far left.
+    indicator.style.transform = `translateX(${active.offsetLeft}px)`;
     indicator.style.width = `${active.offsetWidth}px`;
     track.classList.add('is-armed');
     if (!animate) {

package/dist/css/materialize.colors.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.12 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.13 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */

package/dist/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.12 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.13 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -13504,7 +13504,7 @@ body {
   background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
 }
 .btn-floating:focus {
-  background-color: var(--md-ref-palette-secondary80);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 24%);
 }
 .btn-floating:before {
   border-radius: 0;
@@ -14984,6 +14984,35 @@ body.keyboard-focused .dropdown-content li:focus {
   outline-offset: 2px;
 }
 
+.toolbar-slider {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 13px;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+.toolbar-slider .range-field {
+  width: 120px;
+  margin-top: 18px;
+}
+.toolbar-slider i.material-icons {
+  font-size: 18px;
+}
+.toolbar-slider span {
+  line-height: 1;
+  position: relative;
+  top: -3px;
+}
+
 .toolbar-search {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -17735,7 +17764,6 @@ input[type=range]::-moz-range-thumb {
   background: var(--md-sys-color-primary);
   -moz-transition: box-shadow 0.3s;
   transition: box-shadow 0.3s;
-  margin-top: -5px;
 }
 
 input[type=range]:-moz-focusring {