@expressivecss/expressive 0.11.0 → 0.12.0

package/dist/js/modular.mjs

@@ -1,86 +1,86 @@
 import {
   version
-} from "./chunks/chunk-PMBPAFAS.mjs";
+} from "./chunks/chunk-G3I5H2U3.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-7GKXUG4B.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-IMUPRRI6.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-FRB7TOCS.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-I5KR22BY.mjs";
+} from "./chunks/chunk-LWBQIX5J.mjs";
 import {
   CharacterCounter
-} from "./chunks/chunk-PIIAEYAJ.mjs";
+} from "./chunks/chunk-QDAL4IYN.mjs";
 import {
   Chips
-} from "./chunks/chunk-CDW6WIRT.mjs";
+} from "./chunks/chunk-RFZZCYVU.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-AYYYWUJ4.mjs";
+} from "./chunks/chunk-HLDXZ7XB.mjs";
 import {
   Datepicker
-} from "./chunks/chunk-74N6U5JJ.mjs";
-import "./chunks/chunk-SLFNPY5M.mjs";
+} from "./chunks/chunk-H2WA4XHH.mjs";
+import "./chunks/chunk-EC63CHXU.mjs";
 import {
   FormSelect
-} from "./chunks/chunk-XFJ452AZ.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/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.
      */
@@ -244,6 +246,7 @@ 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/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.11.0";
+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.11.0",
+  "version": "0.12.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",

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/_navbar.scss

@@ -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);
@@ -494,14 +494,19 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
 // 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: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;

package/src/sass/components/_timepicker.scss

@@ -101,7 +101,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
 :is(.timepicker-container, .time-picker-container) .pm-btn {
   width: 3.6rem;
   height: 50%;
-  // --btn-padding is a Materialize variable that no longer exists, so this
+  // --btn-padding is a retired variable that no longer exists, so this
   // was invalid at computed-value time and the padding resolved to 0 - not
   // to the base button's inline space, which the invalid declaration still
   // beat in the cascade. Written as the 0 it has always rendered as.
@@ -278,7 +278,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   :is(.timepicker-container, .time-picker-container) .pm-btn {
     flex-grow: 1;
     /*width: auto;*/
-    // Same two dead Materialize variables as above; both declarations
+    // Same two retired variables as above; both declarations
     // rendered as 0. The corner rules that follow square off the inner
     // edges, so the outer ones are the only radius in play.
     padding-inline: 0;

package/src/sass/components/_toolbar.scss

@@ -57,7 +57,7 @@
 // already, in $_bar.
 $_toolbar: ".toolbar";
 
-// The two axes. `.max` is BeerCSS's name for docked; `.filled` is the older
+// The two axes. `.max` is an alias for docked; `.filled` is the older
 // name for vibrant. Both stay in the :is() lists.
 $_floating: "#{$_toolbar}:is(.floating, :not(.docked, .max))";
 $_docked: "#{$_toolbar}:is(.docked, .max)";

package/src/sass/components/forms/_checkboxes.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A <label> wrapping <input type="checkbox"> is
 // the control. The label text is a sibling of the input — no extra class,
-// no required <span>. input + span still works (legacy / BeerCSS / Select).
+// no required <span>. input + span still works (legacy / Select).
 // label.switch is a switch, not a checkbox — leave it alone.
 //
 // Tokens follow https://m3.material.io/components/checkbox/specs
@@ -206,7 +206,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
   cursor: default;
 }
 
-// Legacy / BeerCSS / Select / Autocomplete: input + span draws the same
+// Legacy / Select / Autocomplete: input + span draws the same
 // 18dp anatomy. Exclude .switch — that file paints the track on a span.
 $_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-text, .character-counter, .file-path)";
 

package/src/sass/components/forms/_input-fields.scss

@@ -310,24 +310,44 @@ textarea {
   }
 }
 
-:is(.datepicker-date-input, .date-picker-date-input) {
-  position: relative;
-  text-indent: -9999px;
-
-  &::after {
-    display: block;
-    position: absolute;
-    top: 1.1rem;
-    content: attr(data-date);
-    color: var(--input-color);
-    text-indent: 0;
-  }
+// Datepicker paints its formatted date over the native value with ::after.
+// Firefox renders no generated content on an <input>, so hiding the native
+// value there left the field blank. The engines that do render it are the ones
+// that expose ::-webkit-datetime-edit.
+@supports selector(::-webkit-datetime-edit) {
+  // The positioned input would paint its filled container over the field's
+  // icons, which come before it. Raise them inside the field's own stacking
+  // context, so they do not also rise over the docked search view or a
+  // sticky header. A docked calendar in the field has to escape it.
+  .field:has(> :is(.datepicker-date-input, .date-picker-date-input)) {
+    &:not(:has(> .display-docked)) {
+      isolation: isolate;
+    }
 
-  &:focus-visible {
-    text-indent: 0;
+    > :is(i, .prefix, .suffix) {
+      z-index: 1;
+    }
   }
 
-  &:focus-visible:after {
+  :is(.datepicker-date-input, .date-picker-date-input) {
+    position: relative;
     text-indent: -9999px;
+
+    &::after {
+      display: block;
+      position: absolute;
+      top: 1.1rem;
+      content: attr(data-date);
+      color: var(--input-color);
+      text-indent: 0;
+    }
+
+    &:focus-visible {
+      text-indent: 0;
+    }
+
+    &:focus-visible:after {
+      text-indent: -9999px;
+    }
   }
 }

package/src/sass/components/forms/_radio-buttons.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A <label> wrapping <input type="radio"> is the
 // control. The label text is a sibling of the input — no extra class, no
-// required <span>. input + span still works (legacy / BeerCSS).
+// required <span>. input + span still works (legacy).
 //
 // Tokens follow https://m3.material.io/components/radio-button/specs
 //   icon           20dp ring, 2dp stroke, on-surface-variant
@@ -136,7 +136,7 @@ label:has(> [type="radio"]:disabled),
   cursor: default;
 }
 
-// Legacy / BeerCSS: input + span draws the same 20/10 anatomy.
+// Legacy: input + span draws the same 20/10 anatomy.
 [type="radio"] + span {
   position: relative;
   display: inline-flex;