@expressivecss/expressive 0.13.1 → 0.15.0

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

@@ -0,0 +1,72 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface ParticlesOptions extends BaseOptions {
+    /**
+     * Number of particles.
+     * @default 100
+     */
+    quantity: number;
+    /**
+     * How firmly particles hold their place against the pointer. Lower
+     * follows the pointer further.
+     * @default 50
+     */
+    staticity: number;
+    /**
+     * Frames a particle takes to catch up with the pointer. Higher is slower.
+     * @default 50
+     */
+    ease: number;
+    /**
+     * Base radius in pixels. Each particle adds 0 or 1 to it.
+     * @default 0.4
+     */
+    size: number;
+    /**
+     * A CSS color. Empty uses the canvas's CSS `color`, which defaults to the
+     * theme's on-surface color.
+     * @default ''
+     */
+    color: string;
+    /**
+     * Horizontal drift in pixels per frame. Negative drifts left.
+     * @default 0
+     */
+    vx: number;
+    /**
+     * Vertical drift in pixels per frame. Negative drifts up.
+     * @default 0
+     */
+    vy: number;
+}
+/**
+ * Particles. A `<canvas class="particles">` covers its nearest positioned
+ * ancestor with slowly drifting dots that lean toward the pointer. Under
+ * reduced motion the dots are drawn once and stay still.
+ */
+export declare class Particles extends Component<ParticlesOptions> {
+    el: HTMLCanvasElement;
+    private _ctx;
+    private _style;
+    private _particles;
+    private _width;
+    private _height;
+    private _frame;
+    private _last;
+    private _mouse;
+    private _still;
+    private _resizeObserver;
+    private _visibility;
+    constructor(el: HTMLElement, options: Partial<ParticlesOptions>);
+    static get defaults(): ParticlesOptions;
+    static init(el: HTMLElement, options?: Partial<ParticlesOptions>): Particles;
+    static init(els: InitElements<InitElement>, options?: Partial<ParticlesOptions>): Particles[];
+    static getInstance(el: HTMLElement): Particles;
+    destroy(): void;
+    private _start;
+    private _stop;
+    private _onPointerMove;
+    private _reset;
+    private _particle;
+    private _draw;
+    private _paint;
+}

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

@@ -15,6 +15,8 @@ export declare class PieChart extends LineChart {
     /** Each row's color, or undefined for a row with no slice. */
     private _colors;
     private _slices;
+    /** Percent formatters by fraction digits, rebuilt once per legend. */
+    private _percents;
     protected get _type(): string;
     protected get _key(): string;
     protected get _points(): boolean;
@@ -27,6 +29,7 @@ export declare class PieChart extends LineChart {
     protected _place(index: number): void;
     /** The row's share of the whole as a percentage, or '' for none. */
     private _share;
+    private _percent;
     /** The legend: every row with its color, its cell and its share. */
     protected _guides(): Element[];
     /** The row under the pointer by its angle from the middle, or -1 off the slices. */

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

@@ -29,7 +29,6 @@ export declare class RadialChart extends LineChart {
     show(index: number): void;
     /** The tooltip sits where the ring's fill ends. */
     protected _place(index: number): void;
-    private _color;
     /** A fraction of the ring as a turn clockwise from the top. */
     private _turn;
     /** For more than one row, a legend of every row with its color and cell. */

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

@@ -43,6 +43,18 @@ export declare const AUTO_INIT_COMPONENTS: {
         component: typeof Components.Chips;
         selector: string;
     };
+    Confetti: {
+        component: typeof Components.Confetti;
+        selector: string;
+    };
+    Particles: {
+        component: typeof Components.Particles;
+        selector: string;
+    };
+    Keypad: {
+        component: typeof Components.Keypad;
+        selector: string;
+    };
     ColumnChart: {
         component: typeof Components.ColumnChart;
         selector: string;

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

@@ -28,7 +28,7 @@ export declare class Slider extends Component<SliderOptions> {
     _removeEventHandlers(): void;
     _handleRangeChange: () => void;
     _handleRangePointerDown: (e: PointerEvent) => void;
-    _handleRangeInputOrMove: (e: Event) => void;
+    _handleRangeInput: () => void;
     _handleRangePointerUp: (e: PointerEvent) => void;
     _handleRangeRelease: () => void;
     _setupThumb(): void;
@@ -36,6 +36,8 @@ export declare class Slider extends Component<SliderOptions> {
     _isVertical(): boolean;
     _host(): HTMLElement | null;
     _clampDual(): void;
+    /** The input's range, defaulting like the browser does: 0 to 100. */
+    private _bounds;
     _fraction(el: HTMLInputElement): number;
     _sync(): void;
     /**

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

@@ -90,6 +90,8 @@ export declare class Snackbar {
     time: number;
     deltaX: number;
     velocityX: number;
+    /** Swipe distance that dismisses, measured once when the drag starts. */
+    private _activationDistance;
     private _dismissed;
     private _returnFocus;
     private _events;
@@ -116,6 +118,7 @@ export declare class Snackbar {
      * over, so the movement so far says nothing about what the user wanted.
      */
     static _onDragCancel(e: PointerEvent): void;
+    private _snapBack;
     /**
      * dismiss all snackbars.
      */

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

@@ -57,10 +57,14 @@ export declare class Tabs extends Component<TabsOptions> {
     get index(): number;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
-    _handleWindowResize: () => void;
+    _handleWindowResize: (...args: unknown[]) => void;
     _queryTabLinks(): NodeListOf<HTMLAnchorElement>;
     _handleTabClick: (e: MouseEvent) => void;
     _createIndicator(): void;
+    /** Reads both positions before writing either. */
+    private _positionIndicator;
+    /** The panel a link shows, or null for a `target` link or one without a hash. */
+    private _panelFor;
     /**
      * Which tab is current, for the eye and for assistive technology.
      *

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

@@ -168,6 +168,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     destroy(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
+    private _removeDragListeners;
     _handleInputClick: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
     _handleClockClickStart: (e: PointerEvent) => void;
@@ -194,6 +195,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     _buildHoursView(): void;
     _buildHoursTick(i: number, radian: number, radius: number): void;
     _buildMinutesView(): void;
+    private _placeTick;
     _handleAmPmClick: (e: MouseEvent) => void;
     _handleAmPmInteraction: (e: HTMLElement) => void;
     _updateAmPmView(): void;

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.13.1";
+export declare const version = "0.15.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';

package/dist/types/plugins/dockedDisplayPlugin.d.ts

@@ -23,10 +23,11 @@ export declare class DockedDisplayPlugin {
     private visible;
     constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>);
     private _handleDocumentClick;
+    private get _transition();
     /**
-     * Tears the plugin down. The document listener holds a reference to this
-     * instance - and through it the whole picker subtree - so the owning
-     * component must call this from its own destroy().
+     * Tears the plugin down. While shown, the document listener holds a
+     * reference to this instance - and through it the whole picker subtree - so
+     * the owning component must call this from its own destroy().
      */
     destroy: () => void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -137,6 +137,7 @@
     "esbuild": "^0.28.2",
     "fallow": "^3.23.0",
     "jsdom": "^30.0.1",
+    "maplibre-gl": "^6.13.0",
     "npm-run-all2": "^9.0.3",
     "sass": "^1.102.0",
     "smol-toml": "^1.8.0",

package/src/sass/abstracts/_breakpoints.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-@use "sass:list";
 
 // Material 3 window size classes, expressed as media-query boundaries.
 //

package/src/sass/abstracts/_elevation.scss

@@ -6,7 +6,7 @@
 // only resolves if the extending partial loads the module that defines the
 // class, which forced every component to `@use` a CSS-emitting file and let
 // the dependency graph - not expressive.scss - decide the output order.
-// The `.z-depth-N` classes in base/_global.scss are generated from this map,
+// The `.z-depth-N` classes in utilities/_z-depth.scss are generated from this map,
 // so the class list and the mixin can never drift apart.
 
 $elevations: (

package/src/sass/abstracts/_mixins.scss

@@ -62,52 +62,32 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
 // State layers mix the on-color into the container in oklab; the opacities come
 // from md.sys.state via `state-opacity()`. Filled and tonal have no elevation.
 
-@mixin btn-filled {
-  color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
-  background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
-
+// Shared by filled, tonal, outlined and flat. Elevated also moves z-depth.
+@mixin _btn-states($on, $base) {
   &:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary) state-opacity("hover"),
-      var(--md-sys-color-primary)
-    );
+    background-color: color-mix(in oklab, #{$on} state-opacity("hover"), #{$base});
   }
 
   &:active,
   &:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary) state-opacity("focus"),
-      var(--md-sys-color-primary)
-    );
+    background-color: color-mix(in oklab, #{$on} state-opacity("focus"), #{$base});
   }
 
   @include focus-visible();
 }
 
+@mixin btn-filled {
+  color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
+  background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
+
+  @include _btn-states(var(--md-sys-color-on-primary), var(--md-sys-color-primary));
+}
+
 @mixin btn-tonal {
   color: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
 
-  &:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-secondary-container) state-opacity("hover"),
-      var(--md-sys-color-secondary-container)
-    );
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-secondary-container) state-opacity("focus"),
-      var(--md-sys-color-secondary-container)
-    );
-  }
-
-  @include focus-visible();
+  @include _btn-states(var(--md-sys-color-on-secondary-container), var(--md-sys-color-secondary-container));
 }
 
 @mixin btn-elevated {
@@ -138,16 +118,7 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   // height right.
   border: var(--md-comp-filled-button-outline-width, 1px) solid var(--md-sys-color-outline);
 
-  &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
-  }
-
-  @include focus-visible();
+  @include _btn-states(var(--md-sys-color-primary), transparent);
 }
 
 @mixin btn-flat {
@@ -156,16 +127,7 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   background-color: transparent;
   border-color: transparent;
 
-  &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
-  }
-
-  @include focus-visible();
+  @include _btn-states(var(--md-sys-color-primary), transparent);
 }
 
 @mixin btn-disabled {
@@ -174,7 +136,6 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
   border-color: transparent;
   pointer-events: none;
-  box-shadow: none;
   cursor: default;
 }
 
@@ -234,8 +195,7 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
 ///
 /// Checkboxes and radio buttons have no room for an overlay pseudo-element, so
 /// they grow a `box-shadow` from the control's edge out to the state layer
-/// size. `color-mix()` wants a percentage where the token is a number, hence
-/// the `* 100%`.
+/// size.
 @mixin state-layer-ring($outer, $inner, $color, $state) {
   box-shadow: 0 0 0 calc((#{$outer} - #{$inner}) / 2)
     color-mix(
@@ -367,17 +327,17 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
     margin: $element-top-margin 0 $element-bottom-margin;
     color: var(--md-sys-color-on-surface);
 
-    > figcaption {
-      color: var(--md-sys-color-on-surface-variant);
-      @include typescale("title-small");
-    }
-
     // A table keeps its content size under visually-hidden, so anchor it
     // here rather than at some distant positioned ancestor. A fixed layout
     // holds it to the 1px wide it is given. Its rows still set its height, so
     // it hangs up from the bottom edge, where the overflow cannot scroll.
     position: relative;
 
+    > figcaption {
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("title-small");
+    }
+
     &:has(> .#{$name}-plot) > table {
       @include visually-hidden;
       inset: auto auto 0 0;

package/src/sass/abstracts/_variables.scss

@@ -137,3 +137,13 @@ $icon-button-sizes: (
   "large": (height: 96px, icon: 32px, space: 32px, narrow: 16px, wide: 48px, square: 28px, pressed: 16px, outline: 2px),
   "xlarge": (height: 136px, icon: 40px, space: 48px, narrow: 32px, wide: 72px, square: 28px, pressed: 16px, outline: 3px),
 );
+
+// Material's fast-spatial spring (damping .9, stiffness 1400), sampled into a
+// CSS linear easing. Button groups and keypads both press with it, so the
+// curve lives here once.
+$motion-fast-spatial: linear(
+  0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
+  .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
+  .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
+  .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
+);

package/src/sass/base/_global.scss

@@ -99,9 +99,6 @@ td, th {
 @include bp-down("expanded") {
 
   table.responsive-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
     display: block;
     position: relative;
 
@@ -113,12 +110,12 @@ td, th {
       margin: 0;
       vertical-align: top;
     }
-    th {
-      text-align: left;
-    }
     thead {
       display: block;
       float: left;
+      /* sort out borders */
+      border: 0;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
 
       tr {
         display: block;
@@ -148,16 +145,10 @@ td, th {
     td {
       display: block;
       min-height: 1.25em;
-      text-align: left;
     }
     tr {
       border-bottom: none;
       padding: 0 10px;
     }
-    /* sort out borders */
-    thead {
-      border: 0;
-      border-right: 1px solid var(--md-sys-color-outline-variant);
-    }
   }
 }

package/src/sass/base/_index.scss

@@ -1,6 +1,6 @@
 // Element-level styling: no component classes live here.
 
 @forward "normalize";
-@forward "global";      // z-depth, spacing helpers, positioning, element defaults
+@forward "global";      // element defaults: links, blockquotes, tables
 @forward "typography";
 @forward "grid";        // .container, .row, .s1–.s12 … .xxl1–.xxl12

package/src/sass/components/_badges.scss

@@ -55,14 +55,7 @@
 
 // Child of an icon: sit on the upper trailing corner of the 24dp
 // glyph, even when the <i> is a larger indicator pill.
-:is(
-  i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons
-) {
+#{$icon} {
   position: relative;
   overflow: visible;
 

package/src/sass/components/_bar-chart.scss

@@ -250,7 +250,7 @@
   inset-inline: 0;
   height: calc(100% / var(--rows, 1));
   border-radius: var(--md-comp-bar-chart-shape);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   translate: 0 -50%;
 }