@expressivecss/expressive 0.10.1 → 0.12.0

package/dist/js/modular.mjs

@@ -1,86 +1,86 @@
 import {
   version
-} from "./chunks/chunk-ZAOYQ6SY.mjs";
+} from "./chunks/chunk-G3I5H2U3.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-ZIZVUWRL.mjs";
+} from "./chunks/chunk-HNFSMIBY.mjs";
 import "./chunks/chunk-WWPAPHMA.mjs";
 import {
   Slider
-} from "./chunks/chunk-JKNPQQWY.mjs";
+} from "./chunks/chunk-WJXDBPXQ.mjs";
 import {
   Snackbar
-} from "./chunks/chunk-GY2Z5CJ2.mjs";
+} from "./chunks/chunk-NNYP33NB.mjs";
 import {
   Tabs
-} from "./chunks/chunk-YFXEJ7GR.mjs";
+} from "./chunks/chunk-3VOK6J7U.mjs";
 import {
   Timepicker
-} from "./chunks/chunk-D4UZ4HFN.mjs";
+} from "./chunks/chunk-IFXVDDDH.mjs";
 import {
   Tooltip
-} from "./chunks/chunk-JODJAGFS.mjs";
+} from "./chunks/chunk-CKQP6P76.mjs";
 import {
   ExpandingCard
-} from "./chunks/chunk-N3UHGN3N.mjs";
+} from "./chunks/chunk-QVVEWBOF.mjs";
 import {
   Lightbox
-} from "./chunks/chunk-JNPIWFJT.mjs";
+} from "./chunks/chunk-UNEMYWEW.mjs";
 import {
   NavigationRail
-} from "./chunks/chunk-XDB3G6RL.mjs";
+} from "./chunks/chunk-6N2XAEFK.mjs";
 import {
   ScrollSpy
-} from "./chunks/chunk-TZZ24ZQS.mjs";
+} from "./chunks/chunk-QV2JAWIZ.mjs";
 import {
   ButtonGroup
-} from "./chunks/chunk-XO5WX3TK.mjs";
+} from "./chunks/chunk-YDCS5S3J.mjs";
 import {
   FloatingActionButton
-} from "./chunks/chunk-VAS6JQ6P.mjs";
+} from "./chunks/chunk-PIJ2TAR3.mjs";
 import {
   Cards
-} from "./chunks/chunk-7UXHSYIA.mjs";
+} from "./chunks/chunk-UBLRRJ7N.mjs";
 import {
   Carousel
-} from "./chunks/chunk-AOGFNMXS.mjs";
+} from "./chunks/chunk-LWBQIX5J.mjs";
 import {
   CharacterCounter
-} from "./chunks/chunk-PIIAEYAJ.mjs";
+} from "./chunks/chunk-QDAL4IYN.mjs";
 import {
   Chips
-} from "./chunks/chunk-ZZBZI2XN.mjs";
+} from "./chunks/chunk-RFZZCYVU.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-7MM4VJJO.mjs";
+} from "./chunks/chunk-HLDXZ7XB.mjs";
 import {
   Datepicker
-} from "./chunks/chunk-QYCYP443.mjs";
-import "./chunks/chunk-SLFNPY5M.mjs";
+} from "./chunks/chunk-H2WA4XHH.mjs";
+import "./chunks/chunk-EC63CHXU.mjs";
 import {
   FormSelect
-} from "./chunks/chunk-G576EP5O.mjs";
+} from "./chunks/chunk-HB6IW7QQ.mjs";
 import {
   Menu
-} from "./chunks/chunk-TK6PX2GC.mjs";
+} from "./chunks/chunk-YSBCHYXP.mjs";
 import {
   BottomSheets
-} from "./chunks/chunk-KR44BSYQ.mjs";
+} from "./chunks/chunk-DLWYKFEI.mjs";
 import {
   Dialogs
-} from "./chunks/chunk-TYM6U5DY.mjs";
+} from "./chunks/chunk-UAEAQBRC.mjs";
 import {
   Forms
-} from "./chunks/chunk-JR24UB4X.mjs";
+} from "./chunks/chunk-PSSHQWCX.mjs";
 import {
   SideSheets
-} from "./chunks/chunk-A3BJA7V4.mjs";
-import "./chunks/chunk-LZVBJ33S.mjs";
-import "./chunks/chunk-MISGHDUU.mjs";
+} from "./chunks/chunk-6WLSDZ4O.mjs";
+import "./chunks/chunk-GZWPXXY6.mjs";
+import "./chunks/chunk-6OMRGML6.mjs";
 import {
   AppBar
-} from "./chunks/chunk-EP3CVKB5.mjs";
-import "./chunks/chunk-QSQ24FYT.mjs";
+} from "./chunks/chunk-UEZUJQ66.mjs";
+import "./chunks/chunk-LTWPGFBR.mjs";
 export {
   AppBar,
   AutoInit,

package/dist/types/components/appBar.d.ts

@@ -3,7 +3,7 @@ import { Component, BaseOptions, InitElements, InitElement } from '../core/compo
  * Collapse medium/large flexible app bars on scroll, and open the related
  * search view when the search field in a search app bar is selected.
  *
- * Observation is IntersectionObserver on a 1px sentinel ahead of the header.
+ * Observation is IntersectionObserver on a sentinel after the header.
  * A scroll listener would re-enter layout on every tick; this does not.
  */
 export declare class AppBar extends Component<BaseOptions> {

package/dist/types/components/autocomplete.d.ts

@@ -135,7 +135,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     _setupMenu(): void;
     _removeMenu(): void;
     _handleInputBlur: () => void;
-    _handleInputKeyup: (e: KeyboardEvent) => void;
+    _handleInputKeyup: () => void;
+    _handleInput: () => void;
     _handleInputFocus: () => void;
     _inputChangeDetection: (value: string) => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;

package/dist/types/components/datepicker.d.ts

@@ -18,6 +18,8 @@ export interface DatepickerOptions extends BaseOptions {
     format: string | ((d: Date) => string);
     /**
      * Used to create date object from current input string.
+     * Receives the format string, or an empty string when format is a function.
+     * Not called for blank input.
      * @default null
      */
     parse: ((value: string, format: string) => Date) | null;
@@ -123,9 +125,9 @@ export interface DatepickerOptions extends BaseOptions {
     showClearBtn: boolean;
     /**
      *  Autosubmit calendar day select to input field
-     *  @default false
+     *  @default true
      */
-    autoSubmit: true;
+    autoSubmit: boolean;
     /**
      * Internationalization options.
      */
@@ -243,6 +245,8 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      */
     static _escape(value: unknown): string;
     static _isDate(obj: any): boolean;
+    private static _parseDate;
+    private _parseInput;
     static _isWeekend(date: any): boolean;
     /**
      * @deprecated as this function has no effect without any return statement or global parameter setter.

package/dist/types/components/menu.d.ts

@@ -94,6 +94,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _pendingTimers;
     private _transition;
     private _originalInert;
+    private _menuClickTargets;
     constructor(el: HTMLElement, options: Partial<MenuOptions>);
     static get defaults(): MenuOptions;
     /**

package/dist/types/components/scrollspy.d.ts

@@ -31,17 +31,18 @@ export interface ScrollSpyOptions extends BaseOptions {
  */
 export declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _elements: ScrollSpy[];
-    private static _observer;
-    private static _ratios;
     private static _active;
+    private _observer;
+    private _ratio;
+    private _link;
+    private _offset;
+    private _offsetPriority;
     constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
     static get defaults(): ScrollSpyOptions;
     static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
     static init(els: InitElements<InitElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
     static getInstance(el: HTMLElement): ScrollSpy;
     destroy(): void;
-    private static _ensureObserver;
-    private static _onIntersect;
     private static _syncActive;
     private static _nearestAbove;
     private static _clearActive;

package/dist/types/components/select.d.ts

@@ -36,9 +36,11 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
     private _values;
     private _createdWrapper;
-    private _originalLabelFor;
+    private _originalLabels;
+    private _labelPlaceholder;
     private _form;
     private _resetTimer;
+    private _validationMessage;
     nativeTabIndex: number;
     constructor(el: HTMLSelectElement, options: FormSelectOptions);
     static get defaults(): FormSelectOptions;
@@ -71,6 +73,10 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     private _setupOptionHandlers;
     private _removeOptionHandlers;
     _handleSelectChange: () => void;
+    private _handleInvalid;
+    private _handleNativeFocus;
+    private _syncValidationError;
+    private _clearValidationError;
     private _handleReset;
     _handleOptionKeydown: (e: KeyboardEvent) => void;
     _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;

package/dist/types/components/slider.d.ts

@@ -23,6 +23,7 @@ export declare class Slider extends Component<SliderOptions> {
     static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<SliderOptions>): Slider[];
     static getInstance(el: HTMLInputElement): Slider;
     destroy(): void;
+    _set(el: HTMLElement, name: string, value: string): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
     _handleRangeChange: () => void;

package/dist/types/components/snackbar.d.ts

@@ -92,6 +92,11 @@ export declare class Snackbar {
     velocityX: number;
     private _dismissed;
     private _returnFocus;
+    private _events;
+    private _restoreElement;
+    private _transitionTimer;
+    private _dismissTimer;
+    private _focusTimer;
     static _snackbars: Snackbar[];
     static _container: HTMLElement;
     static _draggedSnackbar: Snackbar;
@@ -116,6 +121,7 @@ export declare class Snackbar {
      */
     static dismissAll(): void;
     _createSnackbar(): HTMLElement;
+    private _remove;
     _animateIn(): void;
     /**
      * Arm the dismissal timer.

package/dist/types/components/timepicker.d.ts

@@ -41,7 +41,7 @@ export interface TimepickerOptions extends BaseOptions {
      *  Autosubmit timepicker selection to input field
      *  @default true
      */
-    autoSubmit: true;
+    autoSubmit: boolean;
     /**
      * Default time to set on the timepicker 'now' or '13:14'.
      * @default 'now';
@@ -143,6 +143,8 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     g: Element;
     toggleViewTimer: ReturnType<typeof setTimeout>;
     vibrateTimer: ReturnType<typeof setTimeout>;
+    private _autoSubmitTimer;
+    private _clockResetTimer;
     private displayPlugin;
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
     private _clockBuilt;
@@ -202,6 +204,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
      * @param delay
      */
     showView: (view: Views, delay?: number) => void;
+    private _cancelClockReset;
     resetClock(delay: any): void;
     _inputFromTextField: (event: Event) => void;
     drawClockFromTimeInput(value: any, isHours: any): void;

package/dist/types/components/tooltip.d.ts

@@ -70,6 +70,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
     private _exitDelayTimeout;
     private _enterDelayTimeout;
     private _animationTimeout;
+    private _originalContent;
     xMovement: number;
     yMovement: number;
     constructor(el: HTMLElement, options: Partial<TooltipOptions>);
@@ -96,7 +97,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
     /**
      * Show tooltip.
      */
-    open: (isManual: boolean) => void;
+    open: (isManual?: boolean) => void;
     /**
      * Hide tooltip.
      */

package/dist/types/modular.d.ts

@@ -5,7 +5,7 @@ export { SideSheets } from './behaviors/sideSheets';
 export { Forms } from './behaviors/forms';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.10.1";
+export declare const version = "0.12.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",

package/src/sass/abstracts/_mixins.scss

@@ -183,17 +183,25 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
 // label is drawn elsewhere - a hidden radio that cannot be focused has no
 // arrow-key model left.
 //
-// _chips.scss and _navigation-rail.scss each carry their own copy of this and
-// predate the mixin; fold them in when either is next touched.
-@mixin visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+// `$important` is for the `.visually-hidden` utility, which has to beat a
+// consumer's own `position` or `padding` the way `.hide` beats their
+// `display`. Component rules leave it off.
+//
+// _navigation-rail.scss carries its own copy, which predates the mixin and
+// omits the margin and white-space; fold it in when it is next touched.
+@mixin visually-hidden($important: false) {
+  $flag: null;
+  @if $important { $flag: !important; }
+
+  position: absolute $flag;
+  width: 1px $flag;
+  height: 1px $flag;
+  margin: -1px $flag;
+  padding: 0 $flag;
+  border: 0 $flag;
+  overflow: hidden $flag;
+  clip-path: inset(50%) $flag;
+  white-space: nowrap $flag;
 }
 
 // Focus with Keyboard

package/src/sass/components/_buttons.scss

@@ -346,3 +346,48 @@ $_extend-sizes: (
 :where(#{$_btn}).disabled {
   @include btn-disabled;
 }
+
+// Reflow. A label that does not fit (enlarged text, 200% zoom, a narrow
+// column) wraps between words and the container grows, instead of running
+// out of the button or out of its parent. The size's container height becomes
+// a minimum, so a label that fits renders exactly as before. The 4dp block
+// padding only shows once the label wraps: it keeps the lines off the edges
+// and fits inside every size's height with an outline and a line to spare.
+//
+// A minimum rather than a padding-derived height, because hosts restate
+// `padding` far more often than `height`: a clear action or a list's trailing
+// button that sets `padding: 0 12px` would otherwise collapse to one line of
+// text. The cost is the other way round - a rule that sets a smaller `height`
+// has to set `min-height` too, or name the size with the container-height
+// token instead.
+//
+// `break-word`, not `anywhere`: `anywhere` also lowers the min-content width
+// to a single character, so two buttons in a row a few pixels too narrow both
+// shrink and split mid-word ("Cance|l") where they used to sit at full width.
+// With `min-width: 0` on the label <span>, `break-word` still splits a single
+// word longer than the parent. A bare text label has no element to take that
+// minimum, so such a word overflows as it always did.
+//
+// Fixed geometry keeps `nowrap` and the fixed height: `.circle` and the FABs,
+// the extended FAB, the chip's delete button, the carousel's dots, Timepicker's
+// AM/PM controls, and hosts whose layout assumes one line. Button groups set item widths in
+// script and would rewrap mid-press; a split button's two halves share one
+// height; toolbars, the top app bar, dialog and sheet headers, navigation
+// bars and rails, tabs, pagination and snackbar actions are fixed-height
+// slots. `:where()` keeps the whole rule at zero specificity; it only has to
+// come after the base rule above, whose `height` and `nowrap` it replaces.
+$_fixed: ".circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *";
+
+:where(#{$_btn}):where(:not(#{$_fixed})) {
+  height: auto;
+  min-height: var(--md-comp-filled-button-container-height);
+  max-width: 100%;
+  padding-block: 4px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
+
+  > * {
+    min-width: 0;
+  }
+}

package/src/sass/components/_carousel.scss

@@ -76,7 +76,6 @@
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     overscroll-behavior-inline: contain;
-    touch-action: pan-x;
     scrollbar-width: none;
 
     &::-webkit-scrollbar {
@@ -485,7 +484,6 @@
     scroll-snap-type: y mandatory;
     overscroll-behavior-inline: auto;
     overscroll-behavior-block: contain;
-    touch-action: pan-y;
   }
 
   .carousel-track > .carousel-item {
@@ -527,7 +525,6 @@
     scroll-snap-type: x mandatory;
     overscroll-behavior-inline: contain;
     overscroll-behavior-block: auto;
-    touch-action: pan-x;
   }
 
   .carousel-track > .carousel-item {
@@ -565,17 +562,22 @@
     cursor: grab;
   }
 
-  .carousel.dragging {
+  // A drag writes the scroll position directly, and snapping would pull each
+  // write back to a snap point. Each layout that sets scroll-snap-type with
+  // more classes than `.carousel.dragging` needs its own arm here.
+  .carousel.dragging,
+  .carousel.uncontained.snap.dragging,
+  .carousel.full-screen.full-screen-horizontal.dragging {
     > .carousel-track {
       cursor: grabbing;
       scroll-behavior: auto;
       scroll-snap-type: none;
       user-select: none;
     }
+  }
 
-    .carousel-item {
-      pointer-events: none;
-    }
+  .carousel.dragging .carousel-item {
+    pointer-events: none;
   }
 }
 

package/src/sass/components/_chips.scss

@@ -21,6 +21,10 @@
   margin: 0;
   min-height: 32px;
   height: auto;
+  // 4dp keeps wrapped lines off the edges. It is also exactly what a 24dp
+  // avatar or delete target leaves in the 32dp container, so a chip that fits
+  // on one line keeps its height.
+  padding-block: 4px;
   padding-left: var(--padding);
   padding-right: var(--padding);
   font-size: var(--font-size);
@@ -65,15 +69,7 @@
 // Filter chip. The checkbox carries the state and the form value; the label is
 // the chip. Kept focusable rather than `display: none` so it stays reachable.
 .chip-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+  @include visually-hidden;
 }
 
 .chip-input:checked + .chip {

package/src/sass/components/_dialog.scss

@@ -141,13 +141,6 @@ dialog > :is(form, nav):last-child {
   padding: 0 24px 24px;
   border: 0;
   background: none;
-
-  > :is(button, a.button):not(.icon-button, .circle, .extend) {
-    max-width: 100%;
-    height: auto;
-    min-height: var(--md-comp-filled-button-container-height, 40px);
-    white-space: normal;
-  }
 }
 
 dialog:not(

package/src/sass/components/_navbar.scss

@@ -5,7 +5,7 @@
 // Anatomy is the HTML. A header whose child is a nav is a top app bar.
 // Headings are the headline, icon-only links/buttons are the leading and
 // trailing actions, <menu> / <ul> hold text destinations. Helpers are only
-// for variants the markup cannot express: .center, .medium, .large, .fixed.
+// for variants the markup cannot express: .center, .medium, .large.
 // `.medium` and `.large` are the Expressive flexible bars.
 // Destinations at the bottom of the screen are nav.navigation-bar, not this.
 //
@@ -53,7 +53,7 @@ $_heading: ":is(h1, h2, h3, h4, h5, h6)";
 $_title: ":is(#{$_heading}, hgroup)";
 $_search: ":is(.search-bar, .searchbar)";
 
-header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+header:has(> #{$_bar}) {
   --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
   --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
   --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
@@ -490,18 +490,23 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
   }
 }
 
-// Pin the bar. On scroll, fill with surface-container so it separates
+// Pin every top app bar. On scroll, fill with surface-container so it separates
 // from the body (M3 Expressive). The animation only drives the mix
 // progress; a utility class on the header sets background-color itself
 // and is not overwritten. Without animation-timeline the bar stays at
-// rest (surface), the spec default.
-header.fixed:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+// rest (surface), the spec default. The @supports guard is load-bearing: an
+// engine that drops animation-timeline runs a 0s animation instead, and
+// fill-mode both holds the scrolled keyframe from the first frame.
+header:has(> #{$_bar}) {
   position: sticky;
   top: 0;
   z-index: 997;
-  animation: top-app-bar-scroll linear both;
-  animation-timeline: scroll(root);
-  animation-range: 0 8px;
+
+  @supports (animation-timeline: scroll()) {
+    animation: top-app-bar-scroll linear both;
+    animation-timeline: scroll(root);
+    animation-range: 0 8px;
+  }
 }
 
 @keyframes top-app-bar-scroll {

package/src/sass/components/_page-footer.scss

@@ -140,14 +140,3 @@ footer:not(:has(> nav:only-child)) > .container > small:last-child {
   }
 }
 
-// Sticky: pin the footer to the bottom of a short page. Only when the
-// landmark is a direct child of body — not a footer nested in a demo.
-body:has(> footer:not(:has(> nav:only-child))) {
-  min-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-}
-
-body:has(> footer:not(:has(> nav:only-child))) > main {
-  flex: 1 0 auto;
-}

package/src/sass/components/_progress.scss

@@ -18,7 +18,7 @@
 //   --md-comp-progress-circular-thickness  4px
 
 // M3 names this component "Progress indicators", linear and circular. The
-// class is `.progress`; `.preloader` is the Materialize name for the circular
+// class is `.progress`; `.preloader` is the older name for the circular
 // one and stays as an alias, as does `.progress.circular`.
 .progress,
 .preloader {
@@ -71,12 +71,24 @@ progress.progress {
     border-radius: var(--md-comp-progress-shape);
   }
 
-  &:indeterminate::-webkit-progress-value,
+  // Firefox draws no ::before/::after on <progress> and paints the track as the
+  // element's own background, so its indeterminate bar is the native one. It
+  // places that bar from the physical left and reads only margin-left, which is
+  // margin-inline-end in RTL, so both inline margins move. Keep this out of any
+  // -webkit- selector list: Chromium drops a list naming a pseudo-element it
+  // does not know.
   &:indeterminate::-moz-progress-bar {
-    background-color: transparent;
+    width: 40%;
+    margin-inline-end: 60%;
+    animation: progress-indeterminate-moz 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
 
+@keyframes progress-indeterminate-moz {
+  from { margin-inline-start: -40%; margin-inline-end: 100%; }
+  to   { margin-inline-start: 100%; margin-inline-end: -40%; }
+}
+
 .progress > .determinate {
   position: absolute;
   inset-block: 0;
@@ -107,10 +119,12 @@ progress.progress {
   }
 }
 
-.progress > .indeterminate,
-progress.progress:indeterminate {
+.progress > .indeterminate {
   background-color: transparent;
+}
 
+.progress > .indeterminate,
+progress.progress:indeterminate {
   &::before,
   &::after {
     content: "";
@@ -147,7 +161,7 @@ progress.progress:indeterminate {
 // ---------------------------------------------------------------------------
 
 // The circular indicator. `.progress.circular` is the M3-aligned name;
-// `.preloader` is the Materialize one and still works.
+// `.preloader` remains a compatibility alias.
 :is(.preloader, .progress.circular) {
   box-sizing: border-box;
   display: inline-block;
@@ -218,6 +232,7 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::-moz-progress-bar {
     background-color: CanvasText;
     width: 40%;
+    animation: none;
   }
 
   :is(.preloader, .progress.circular) {
@@ -254,4 +269,8 @@ progress.progress:indeterminate {
   .preloader {
     transform: none;
   }
+
+  progress.progress:indeterminate::-moz-progress-bar {
+    animation: none;
+  }
 }

package/src/sass/components/_snackbar.scss

@@ -120,7 +120,7 @@ $_bar: ".snackbar";
     overflow: hidden;
   }
 
-  // Optional leading icon (BeerCSS). M3 snackbars have no leading icon.
+  // Optional leading icon. M3 snackbars have no leading icon.
   > #{$icon}:first-child {
     flex: 0 0 auto;
     font-size: 24px;