@expressivecss/expressive 0.13.1 → 0.15.0

package/dist/js/modular.mjs

@@ -1,122 +1,134 @@
 import {
   version
-} from "./chunks/chunk-4PWAPV6F.mjs";
+} from "./chunks/chunk-KQACNQ22.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-XH6BEEMY.mjs";
-import "./chunks/chunk-NQLC3YMW.mjs";
-import {
-  Tooltip
-} from "./chunks/chunk-CKQP6P76.mjs";
-import {
-  RichTextEditor
-} from "./chunks/chunk-VTLBW7QS.mjs";
-import {
-  ScrollSpy
-} from "./chunks/chunk-QV2JAWIZ.mjs";
+} from "./chunks/chunk-WOCCTVUF.mjs";
+import "./chunks/chunk-VKAUVTQY.mjs";
 import {
   Slider
-} from "./chunks/chunk-WJXDBPXQ.mjs";
+} from "./chunks/chunk-5CEAOLUA.mjs";
 import {
   Snackbar
-} from "./chunks/chunk-NNYP33NB.mjs";
+} from "./chunks/chunk-BGZLF6JZ.mjs";
 import {
   Tabs
-} from "./chunks/chunk-3VOK6J7U.mjs";
+} from "./chunks/chunk-UCOE7ZDL.mjs";
 import {
   Timepicker
-} from "./chunks/chunk-IFXVDDDH.mjs";
-import {
-  MessageScroller
-} from "./chunks/chunk-CCWDV5CR.mjs";
-import {
-  MixedChart
-} from "./chunks/chunk-HKT2S7VM.mjs";
+} from "./chunks/chunk-PO3AXVR3.mjs";
 import {
-  NavigationRail
-} from "./chunks/chunk-6N2XAEFK.mjs";
+  Tooltip
+} from "./chunks/chunk-6VATUZC6.mjs";
 import {
   PieChart
-} from "./chunks/chunk-P3G3QHII.mjs";
+} from "./chunks/chunk-OWG3LMUL.mjs";
 import {
   Questionnaire
-} from "./chunks/chunk-DTKR54I6.mjs";
+} from "./chunks/chunk-33QVDDGR.mjs";
 import {
   RadarChart
-} from "./chunks/chunk-3DHK5CZU.mjs";
+} from "./chunks/chunk-XAEAEHIX.mjs";
 import {
   RadialChart
-} from "./chunks/chunk-RHRQKTTX.mjs";
+} from "./chunks/chunk-UNCRDLP6.mjs";
+import {
+  RichTextEditor
+} from "./chunks/chunk-SMY7GJSS.mjs";
+import {
+  ScrollSpy
+} from "./chunks/chunk-FM5CZOUB.mjs";
+import {
+  Lightbox
+} from "./chunks/chunk-SFI2U4YW.mjs";
+import {
+  MapView
+} from "./chunks/chunk-KHXZ2A4K.mjs";
+import {
+  MessageScroller
+} from "./chunks/chunk-LQWUDNHZ.mjs";
+import {
+  MixedChart
+} from "./chunks/chunk-VM4FTS7L.mjs";
+import {
+  NavigationRail
+} from "./chunks/chunk-UBRZZWRA.mjs";
+import {
+  Particles
+} from "./chunks/chunk-C6CHEWYP.mjs";
 import {
   CommandPalette
-} from "./chunks/chunk-K4CJCRGE.mjs";
+} from "./chunks/chunk-UETTGDLI.mjs";
+import {
+  Confetti
+} from "./chunks/chunk-KUFHW3DS.mjs";
 import {
   Datepicker
-} from "./chunks/chunk-PLYXLSH3.mjs";
+} from "./chunks/chunk-GJL6GCIU.mjs";
+import "./chunks/chunk-M3MURWMB.mjs";
 import {
   FormSelect
-} from "./chunks/chunk-55IA2XUC.mjs";
-import "./chunks/chunk-EC63CHXU.mjs";
+} from "./chunks/chunk-WDK4T63U.mjs";
 import {
   ExpandingCard
-} from "./chunks/chunk-QVVEWBOF.mjs";
+} from "./chunks/chunk-DXGRXYYL.mjs";
 import {
   HeatmapChart
-} from "./chunks/chunk-LNCCYGPC.mjs";
+} from "./chunks/chunk-VGNYF6FB.mjs";
 import {
-  Lightbox
-} from "./chunks/chunk-UNEMYWEW.mjs";
+  Keypad
+} from "./chunks/chunk-K3HZMFMD.mjs";
 import {
   BarChart
-} from "./chunks/chunk-GVGT6MIU.mjs";
+} from "./chunks/chunk-CK2XCICY.mjs";
 import {
   ColumnChart
-} from "./chunks/chunk-SPETGK25.mjs";
+} from "./chunks/chunk-45FER6RI.mjs";
 import {
   LineChart
-} from "./chunks/chunk-O5XPWXIQ.mjs";
+} from "./chunks/chunk-TCCA2HDG.mjs";
 import {
   ButtonGroup
-} from "./chunks/chunk-YDCS5S3J.mjs";
+} from "./chunks/chunk-L27Q6ZMI.mjs";
 import {
   FloatingActionButton
-} from "./chunks/chunk-PIJ2TAR3.mjs";
+} from "./chunks/chunk-PDG64UHF.mjs";
 import {
   Cards
-} from "./chunks/chunk-UBLRRJ7N.mjs";
+} from "./chunks/chunk-TSZYSW7F.mjs";
 import {
   Carousel
-} from "./chunks/chunk-LWBQIX5J.mjs";
+} from "./chunks/chunk-KVJAVDBC.mjs";
 import {
   CharacterCounter
-} from "./chunks/chunk-QDAL4IYN.mjs";
+} from "./chunks/chunk-74MXKKLN.mjs";
 import {
   Chips
-} from "./chunks/chunk-XGHORT7J.mjs";
+} from "./chunks/chunk-CXXM2L4F.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-3CLXLPYS.mjs";
+} from "./chunks/chunk-ZX6M7SWO.mjs";
 import {
   Menu
-} from "./chunks/chunk-U2OTHOTI.mjs";
+} from "./chunks/chunk-NUHMOAOY.mjs";
 import {
   BottomSheets
-} from "./chunks/chunk-DLWYKFEI.mjs";
+} from "./chunks/chunk-AIURVCG6.mjs";
 import {
   Dialogs
-} from "./chunks/chunk-UAEAQBRC.mjs";
+} from "./chunks/chunk-VGPGBNGL.mjs";
 import {
   Forms
-} from "./chunks/chunk-QKWPQK5N.mjs";
+} from "./chunks/chunk-QYGK36OG.mjs";
 import {
   SideSheets
-} from "./chunks/chunk-6WLSDZ4O.mjs";
-import "./chunks/chunk-GZWPXXY6.mjs";
-import "./chunks/chunk-6OMRGML6.mjs";
+} from "./chunks/chunk-X4ISMKE2.mjs";
+import "./chunks/chunk-WQYN5L4E.mjs";
+import "./chunks/chunk-M372EDXD.mjs";
 import {
   AppBar
-} from "./chunks/chunk-UEZUJQ66.mjs";
-import "./chunks/chunk-LTWPGFBR.mjs";
+} from "./chunks/chunk-UAZSDUVP.mjs";
+import "./chunks/chunk-PD6HYHAE.mjs";
 export {
   AppBar,
   AutoInit,
@@ -130,6 +142,7 @@ export {
   Chips,
   ColumnChart,
   CommandPalette,
+  Confetti,
   Datepicker,
   Dialogs,
   ExpandingCard,
@@ -137,12 +150,15 @@ export {
   FormSelect,
   Forms,
   HeatmapChart,
+  Keypad,
   Lightbox,
   LineChart,
+  MapView,
   Menu,
   MessageScroller,
   MixedChart,
   NavigationRail,
+  Particles,
   PieChart,
   Questionnaire,
   RadarChart,

package/dist/types/behaviors/forms.d.ts

@@ -11,6 +11,11 @@ export declare class Forms {
      * @param e EventTarget
      */
     static textareaAutoResize(e: EventTarget): void;
+    private static _initialized;
+    /**
+     * Safe to call more than once: the root entry calls it on import, and a page
+     * that also loads the modular entry may call it again.
+     */
     static Init(): void;
     /**
      * A .password-toggle button shows or hides the password in its field. The

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

@@ -150,6 +150,7 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     _renderMenu(): void;
     _setStatusLoading(): void;
     private _announce;
+    private _resultsMessage;
     _updateSelectedInfo(): void;
     _refreshInputText(): void;
     _triggerChanged(): void;

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

@@ -131,6 +131,8 @@ export declare class Carousel extends Component<CarouselOptions> {
     private _tick;
     private _advance;
     private _handleNativeScroll;
+    /** The document only hears from a carousel while a mouse press is down on its track. */
+    private _setDragListeners;
     _handleTrackPointerDown: (e: PointerEvent) => void;
     _handleTrackPointerMove: (e: PointerEvent) => void;
     _handleTrackPointerUp: (e: PointerEvent) => void;

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

@@ -0,0 +1,103 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export type ConfettiShape = 'square' | 'circle' | 'star';
+export interface ConfettiOptions extends BaseOptions {
+    /**
+     * Pieces per burst.
+     * @default 50
+     */
+    particleCount: number;
+    /**
+     * Launch direction in degrees. 90 is straight up, 0 is right.
+     * @default 90
+     */
+    angle: number;
+    /**
+     * How far the pieces fan out from the angle, in degrees.
+     * @default 45
+     */
+    spread: number;
+    /**
+     * Launch speed in pixels per frame.
+     * @default 45
+     */
+    startVelocity: number;
+    /**
+     * Share of its speed a piece keeps each frame.
+     * @default 0.9
+     */
+    decay: number;
+    /**
+     * Pull toward the bottom. 0 floats, 1 is normal.
+     * @default 1
+     */
+    gravity: number;
+    /**
+     * Sideways push per frame. Negative drifts left.
+     * @default 0
+     */
+    drift: number;
+    /**
+     * Frames a piece lives while it fades out.
+     * @default 200
+     */
+    ticks: number;
+    /**
+     * Launch point as fractions of the canvas, 0 to 1. A missing side is
+     * 0.5. A trigger element ignores it and launches from its own center.
+     * @default { x: 0.5, y: 0.5 }
+     */
+    origin: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * CSS colors. Empty uses the theme's primary, secondary and tertiary
+     * colors and their containers.
+     * @default []
+     */
+    colors: string[];
+    /**
+     * @default ['square', 'circle']
+     */
+    shapes: ConfettiShape[];
+    /**
+     * Piece size multiplier.
+     * @default 1
+     */
+    scalar: number;
+    /**
+     * On a canvas, wait for `fire()` instead of bursting once at init.
+     * @default false
+     */
+    manualStart: boolean;
+}
+/**
+ * Confetti. Bursts of theme-colored pieces drawn on a canvas.
+ *
+ * - `Confetti.fire(options)` bursts over the whole viewport.
+ * - Any other `.confetti` element bursts from its center when clicked.
+ * - A `<canvas class="confetti">` bursts inside its own box, once at init
+ *   unless `manualStart`, and again on each `fire()`.
+ *
+ * The viewport canvas is a manual popover, so it draws above an open modal
+ * dialog, and it ignores the pointer. Nothing is drawn when the reader
+ * prefers reduced motion.
+ */
+export declare class Confetti extends Component<ConfettiOptions> {
+    private _onClick;
+    constructor(el: HTMLElement, options: Partial<ConfettiOptions>);
+    static get defaults(): ConfettiOptions;
+    static init(el: HTMLElement, options?: Partial<ConfettiOptions>): Confetti;
+    static init(els: InitElements<InitElement>, options?: Partial<ConfettiOptions>): Confetti[];
+    static getInstance(el: HTMLElement): Confetti;
+    /**
+     * Bursts over the whole viewport. Resolves when the last piece is gone.
+     */
+    static fire(options?: Partial<ConfettiOptions>): Promise<void>;
+    /**
+     * Bursts on this canvas, or from this element's center over the viewport.
+     * Resolves when the last piece is gone.
+     */
+    fire(options?: Partial<ConfettiOptions>): Promise<void>;
+    destroy(): void;
+}

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

@@ -190,8 +190,6 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     id: string;
     multiple: boolean;
     calendarEl: HTMLElement;
-    /** CLEAR button instance. */
-    /** DONE button instance */
     containerEl: HTMLElement;
     yearTextEl: HTMLElement;
     dateTextEl: HTMLElement;
@@ -206,9 +204,11 @@ export declare class Datepicker extends Component<DatepickerOptions> {
         month: number;
         year: number;
     }];
-    private _y;
-    private _m;
     private displayPlugin;
+    /** What setInputValue last wrote, so reading it back does not depend on the parser. */
+    private _writtenInputs;
+    /** Rows renderRow has already checked, so renderBody does not parse them again. */
+    private _checkedRows;
     private footer;
     /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
     private _drawDepth;
@@ -381,6 +381,7 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     _setupEventHandlers(): void;
     _setupVariables(): void;
     _removeEventHandlers(): void;
+    private _addInputEventHandlers;
     private _removeInputEventHandlers;
     private _removeDateInput;
     _handleInputClick: (e: any) => void;

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

@@ -24,6 +24,8 @@ export declare class ExpandingCard extends Component<ExpandingCardOptions> imple
     private _handleTriggerKeypress;
     private _handleCancel;
     private _handleNativeClose;
+    /** Marks the card closed and invalidates any pending close. */
+    private _collapse;
     private _setTransitionOrigin;
     open: () => void;
     close: () => void;

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

@@ -6,6 +6,9 @@ export { Cards } from "./cards";
 export { ExpandingCard } from "./expandingCard";
 export { Carousel } from "./carousel";
 export { CharacterCounter } from "./characterCounter";
+export { Confetti } from "./confetti";
+export { Particles } from "./particles";
+export { Keypad } from "./keypad";
 export { Chips } from "./chips";
 export { CommandPalette } from "./commandPalette";
 export { Questionnaire } from "./questionnaire";
@@ -21,6 +24,7 @@ export { Datepicker } from "./datepicker";
 export { Menu } from "./menu";
 export { MessageScroller } from "./messageScroller";
 export { RichTextEditor } from "./richTextEditor";
+export { MapView } from "./mapView";
 export { Lightbox } from "./lightbox";
 export { Slider } from "./slider";
 export { ScrollSpy } from "./scrollspy";

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

@@ -0,0 +1,34 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface KeypadOptions extends BaseOptions {
+    /**
+     * Called after every key press with the text typed ('7', 'A', ' ') or the
+     * function key's name ('Backspace', 'Enter', 'Shift').
+     * @default null
+     */
+    onKey: ((key: string) => void) | null;
+}
+type Field = HTMLInputElement | HTMLTextAreaElement;
+type Root = Document | ShadowRoot;
+/**
+ * Keypad and keyboard. A `.keypad` or `.keyboard` whose `aria-controls`
+ * names a text field types into it: a key's `value` is inserted at the caret,
+ * and `data-key="Backspace"`, `"Enter"` and `"Shift"` edit, submit and
+ * capitalize. The field receives the same `input` event typing would fire.
+ */
+export declare class Keypad extends Component<KeypadOptions> {
+    /** @internal */
+    _root: Root | null;
+    constructor(el: HTMLElement, options: Partial<KeypadOptions>);
+    static get defaults(): KeypadOptions;
+    static init(el: HTMLElement, options?: Partial<KeypadOptions>): Keypad;
+    static init(els: InitElements<InitElement>, options?: Partial<KeypadOptions>): Keypad[];
+    static getInstance(el: HTMLElement): Keypad;
+    destroy(): void;
+    /** The text field named by `aria-controls`, if there is one. */
+    get target(): Field | null;
+    private _shared;
+    /** @internal */
+    _press(key: HTMLButtonElement): void;
+    private _edit;
+}
+export {};

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

@@ -84,11 +84,9 @@ export declare class Lightbox extends Component<LightboxOptions> {
     private _handleMotionChange;
     private _setupEventHandlers;
     private _removeEventHandlers;
-    private _handleLightboxClick;
     private _handleLightboxKeypress;
     private _handleLightboxToggle;
-    private _handleWindowScroll;
-    private _handleWindowResize;
+    private _handleWindowChange;
     private _handleWindowEscape;
     private _makeAncestorsOverflowVisible;
     private _offset;
@@ -96,9 +94,9 @@ export declare class Lightbox extends Component<LightboxOptions> {
     private _animateImageIn;
     private _animateImageOut;
     private _addCaption;
-    private _removeCaption;
     private _addOverlay;
-    private _removeOverlay;
+    private _fadeIn;
+    private _fadeOut;
     /**
      * Open lightbox.
      */

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

@@ -15,6 +15,10 @@ export interface LineChartOptions extends BaseOptions {
 export declare const COLORS = 4;
 /** An SVG element with its attributes. */
 export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
+/** A point at a turn clockwise from the top and a distance from the middle, as "x,y". */
+export declare function polarPoint(turn: number, r: number): string;
+/** A series' color number, for its `data-series`. */
+export declare const seriesColor: (i: number) => string;
 export interface Series {
     name: string;
     /** Header cell classes, such as `dashed`. */

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

@@ -0,0 +1,151 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+/** `[longitude, latitude]`, MapLibre's order. */
+export type LngLat = [number, number];
+/**
+ * The parts of the `maplibre-gl` module this component uses. Declared here so
+ * the published types do not depend on MapLibre.
+ */
+export interface MapLibre {
+    Map: new (options: object) => any;
+    Marker: new (options: object) => any;
+    Popup: new (options: object) => any;
+}
+/** A style for each color scheme. The map follows the page's theme. */
+export interface MapThemedStyle {
+    light: string | object;
+    dark: string | object;
+}
+export interface MapViewOptions extends BaseOptions {
+    /**
+     * The `maplibre-gl` module. ExpressiveCSS does not bundle MapLibre, so the
+     * page imports it and passes it in.
+     * @default null
+     */
+    maplibregl: MapLibre | null;
+    /**
+     * A MapLibre style URL or object, or `{ light, dark }` to follow the theme.
+     * @default OpenFreeMap Positron and Dark
+     */
+    style: string | object | MapThemedStyle;
+    /**
+     * Starting `[longitude, latitude]`.
+     * @default [0, 20]
+     */
+    center: LngLat;
+    /**
+     * Starting zoom level.
+     * @default 1
+     */
+    zoom: number;
+    /**
+     * More MapLibre `Map` options, such as `maxZoom` or `bearing`.
+     * @default {}
+     */
+    mapOptions: object;
+}
+export interface MapLineOptions {
+    /** CSS color. Defaults to the route or arc color token. */
+    color?: string;
+    /** Width in pixels. Routes default to 4, arcs to 2. */
+    width?: number;
+    /** 0 to 1. */
+    opacity?: number;
+    /** Dash and gap lengths in line widths, such as `[2, 2]`. */
+    dashArray?: number[];
+}
+export interface MapArc {
+    from: LngLat;
+    to: LngLat;
+}
+export interface MapClusterOptions {
+    /** CSS color. Defaults to the cluster color token. */
+    color?: string;
+    /**
+     * Pixels within which points join a cluster.
+     * @default 50
+     */
+    radius?: number;
+    /**
+     * Last zoom level that clusters points.
+     * @default 14
+     */
+    maxZoom?: number;
+}
+/**
+ * An interactive map built on MapLibre: a `.map` holding `.map-marker`,
+ * `.map-popup` and `.map-controls` children.
+ *
+ * Each marker sits at its `data-lng-lat`. A marker button with
+ * `aria-controls` opens the `.map-popup` it names; a popup with its own
+ * `data-lng-lat` and no marker opens at init. Buttons in `.map-controls`
+ * run their `data-action`: `zoom-in`, `zoom-out`, `compass`, `locate` or
+ * `fullscreen`. Routes, arcs and clusters are data, so they are added from
+ * script. The default style follows the page's light or dark theme, and
+ * line and cluster colors come from the theme.
+ *
+ * The class is `MapView` rather than `Map` so importing it does not shadow
+ * JavaScript's `Map`.
+ */
+export declare class MapView extends Component<MapViewOptions> {
+    /** The MapLibre map. */
+    map: any;
+    /** The MapLibre markers made from `.map-marker` children, in order. */
+    markers: any[];
+    private _children;
+    private _popups;
+    private _markerPopups;
+    private _overlays;
+    private _styleReady;
+    private _dark;
+    private _location;
+    private _media;
+    private _observer;
+    private _zoomIn;
+    private _zoomOut;
+    constructor(el: HTMLElement, options: Partial<MapViewOptions>);
+    static get defaults(): MapViewOptions;
+    /**
+     * Initializes instance of MapView.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<MapViewOptions>): MapView;
+    /**
+     * Initializes instances of MapView.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<MapViewOptions>): MapView[];
+    static getInstance(el: HTMLElement): MapView;
+    destroy(): void;
+    /** Draws a line through `[longitude, latitude]` points. Replaces an overlay with the same id. */
+    addRoute(id: string, coordinates: LngLat[], options?: MapLineOptions): void;
+    /** Draws a curved line for each `{ from, to }`. Replaces an overlay with the same id. */
+    addArcs(id: string, arcs: MapArc[], options?: MapLineOptions): void;
+    /**
+     * Draws GeoJSON points, or the URL of a GeoJSON file, as clusters that
+     * show their count and zoom in when clicked. The layers are
+     * `${id}-clusters`, `${id}-count` and `${id}-points`.
+     */
+    addClusters(id: string, data: object | string, options?: MapClusterOptions): void;
+    /** Removes a route, arcs or clusters added with this id. */
+    removeOverlay(id: string): void;
+    private _line;
+    private _draw;
+    private _addMarker;
+    private _popup;
+    private _toggle;
+    private _buttons;
+    private _locate;
+    private _color;
+    private _isDark;
+    private _themed;
+    private _style;
+    private _handleStyleLoad;
+    private _handleScheme;
+    private _sync;
+    private _handleFullscreen;
+    private _handleClick;
+    private _handleMapClick;
+    private _handleKeydown;
+}

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

@@ -146,6 +146,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _syncSubmenuAria;
     private _handleSubmenuAlign;
     private _alignSubmenu;
+    private _closeSubmenu;
     private _closeSubmenus;
     private _containingSubmenu;
     private _focusedRow;