@expressivecss/expressive 0.16.0 → 0.17.0

package/dist/js/modular.mjs

@@ -1,212 +1,213 @@
 import {
   version
-} from "./chunks/chunk-4IKVPCSU.mjs";
+} from "./chunks/chunk-JOLJAYIJ.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-UGJHCHXG.mjs";
+} from "./chunks/chunk-O2WJB6TH.mjs";
 import "./chunks/chunk-GNRSYMVH.mjs";
 import {
   SwipeActions
-} from "./chunks/chunk-Y6H2X7ZC.mjs";
+} from "./chunks/chunk-3KF65KGL.mjs";
 import {
   Tabs
-} from "./chunks/chunk-LDXCC2L3.mjs";
+} from "./chunks/chunk-QND56EW2.mjs";
 import {
   Timepicker
-} from "./chunks/chunk-KYIEG4U3.mjs";
+} from "./chunks/chunk-VZMROW5A.mjs";
 import {
   Tooltip
-} from "./chunks/chunk-FCNF4GRJ.mjs";
+} from "./chunks/chunk-R7A7JRC5.mjs";
 import {
   TreeSelect
-} from "./chunks/chunk-GCWWEZKO.mjs";
+} from "./chunks/chunk-TM7HPGTV.mjs";
 import {
   TreemapChart
-} from "./chunks/chunk-VH4BMAZS.mjs";
+} from "./chunks/chunk-UKQK5GWR.mjs";
 import {
   RichTextEditor
-} from "./chunks/chunk-SPPHF7YZ.mjs";
+} from "./chunks/chunk-QHZZT7YO.mjs";
 import {
   SankeyChart
-} from "./chunks/chunk-CZSQHXEV.mjs";
+} from "./chunks/chunk-XDAMOMVD.mjs";
 import {
   ScatterChart
-} from "./chunks/chunk-752ADW4M.mjs";
+} from "./chunks/chunk-SUSD4UTN.mjs";
 import {
   ScrollSpy
-} from "./chunks/chunk-ZJNLAGY5.mjs";
+} from "./chunks/chunk-5F4URJHL.mjs";
 import {
   ShowMore
-} from "./chunks/chunk-X7SDA2J5.mjs";
+} from "./chunks/chunk-PWKYVMND.mjs";
 import {
   Slider
-} from "./chunks/chunk-B7DQFHA5.mjs";
+} from "./chunks/chunk-SYBOA5HC.mjs";
 import {
   NavigationRail
-} from "./chunks/chunk-Z4GICXR2.mjs";
+} from "./chunks/chunk-EWO662ZC.mjs";
 import {
   Particles
-} from "./chunks/chunk-5KIHWJI2.mjs";
+} from "./chunks/chunk-TMQDZSDC.mjs";
 import {
   PieChart
-} from "./chunks/chunk-NBJAUGPP.mjs";
+} from "./chunks/chunk-2LFCOGC3.mjs";
 import {
   PullToRefresh
-} from "./chunks/chunk-T3BNSRP3.mjs";
+} from "./chunks/chunk-HQRLBTNM.mjs";
 import {
   Questionnaire
-} from "./chunks/chunk-GWZ76SR4.mjs";
+} from "./chunks/chunk-7ZAMOMGY.mjs";
 import {
   RadarChart
-} from "./chunks/chunk-6FSEUFVW.mjs";
+} from "./chunks/chunk-RSNS5OYS.mjs";
 import {
   RadialChart
-} from "./chunks/chunk-7YQBHTK3.mjs";
+} from "./chunks/chunk-UKCNELUN.mjs";
 import {
   Lightbox
-} from "./chunks/chunk-VMY55K2X.mjs";
+} from "./chunks/chunk-MA2SZZFB.mjs";
 import {
   LoadingOverlay
-} from "./chunks/chunk-4EWGD4V2.mjs";
+} from "./chunks/chunk-NODZ5VAD.mjs";
 import {
   MapView
-} from "./chunks/chunk-7NLUI3RR.mjs";
+} from "./chunks/chunk-QRO5FV3I.mjs";
 import {
   Menubar
-} from "./chunks/chunk-2RLBDFH4.mjs";
+} from "./chunks/chunk-BDATLH3H.mjs";
 import {
   MessageScroller
-} from "./chunks/chunk-ANKFWNWT.mjs";
+} from "./chunks/chunk-LC4O5LFS.mjs";
 import {
   MixedChart
-} from "./chunks/chunk-VFV75DHF.mjs";
+} from "./chunks/chunk-XB6Y7P5W.mjs";
 import {
   Datepicker
-} from "./chunks/chunk-QXKWVHBD.mjs";
-import "./chunks/chunk-OUCHKSAW.mjs";
-import "./chunks/chunk-ZKWUWBUB.mjs";
+} from "./chunks/chunk-H6YIKFAQ.mjs";
+import "./chunks/chunk-B55LWKBM.mjs";
+import "./chunks/chunk-CY2CTOVM.mjs";
 import {
   FormSelect
-} from "./chunks/chunk-EVCVFEV3.mjs";
+} from "./chunks/chunk-XJPMW5SP.mjs";
 import {
   ExpandingCard
-} from "./chunks/chunk-OP43LLIC.mjs";
+} from "./chunks/chunk-36GELQGX.mjs";
 import {
   FunnelChart
-} from "./chunks/chunk-S23RJ3XY.mjs";
+} from "./chunks/chunk-RKG2CBFE.mjs";
 import {
   HeatmapChart
-} from "./chunks/chunk-BPF3I2MN.mjs";
+} from "./chunks/chunk-KOTGMCMI.mjs";
 import {
   HoverCard
-} from "./chunks/chunk-BIGU5RCJ.mjs";
+} from "./chunks/chunk-STJR62SU.mjs";
 import {
   InputMask
-} from "./chunks/chunk-VJVQIXHC.mjs";
+} from "./chunks/chunk-MDBZAMIV.mjs";
 import {
   Keypad
-} from "./chunks/chunk-QACZ6TUP.mjs";
+} from "./chunks/chunk-JH3YWKA6.mjs";
 import {
   Cascader
-} from "./chunks/chunk-NVQ5EHCU.mjs";
+} from "./chunks/chunk-QNODAANY.mjs";
 import {
   CharacterCounter
-} from "./chunks/chunk-EC26RU2D.mjs";
+} from "./chunks/chunk-3FKWIRHW.mjs";
 import {
   Chips
-} from "./chunks/chunk-WU7XJ4RR.mjs";
-import "./chunks/chunk-INLZWHLY.mjs";
+} from "./chunks/chunk-LXRHUQAX.mjs";
+import "./chunks/chunk-UHO5CV6K.mjs";
 import {
   ColorPicker
-} from "./chunks/chunk-2CS6TITK.mjs";
+} from "./chunks/chunk-CWMQOT4O.mjs";
 import {
   CommandPalette
-} from "./chunks/chunk-4TRZ2AER.mjs";
+} from "./chunks/chunk-7X44MKEQ.mjs";
 import {
   Confetti
-} from "./chunks/chunk-VR3L2WN5.mjs";
+} from "./chunks/chunk-YKANQILZ.mjs";
 import {
   CurrencyInput
-} from "./chunks/chunk-Y6TLRA3U.mjs";
+} from "./chunks/chunk-AQNFCJJ5.mjs";
 import {
   AppBar
-} from "./chunks/chunk-P6DRQ6KS.mjs";
+} from "./chunks/chunk-7CXNATJS.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-VGY4M57S.mjs";
+} from "./chunks/chunk-F7LAKFMX.mjs";
+import "./chunks/chunk-GE3YMFS6.mjs";
 import {
   Menu
-} from "./chunks/chunk-CSYWKEK3.mjs";
+} from "./chunks/chunk-DWA5UYLJ.mjs";
 import {
   BackToTop
-} from "./chunks/chunk-NNHVANQA.mjs";
+} from "./chunks/chunk-4WBGAQN3.mjs";
 import {
   BarChart
-} from "./chunks/chunk-75E5EDJF.mjs";
+} from "./chunks/chunk-3XORNED5.mjs";
 import {
   ColumnChart
-} from "./chunks/chunk-PA7NU5AK.mjs";
+} from "./chunks/chunk-26VUH75M.mjs";
+import {
+  LineChart
+} from "./chunks/chunk-IQOTGGHX.mjs";
 import {
   ButtonGroup
-} from "./chunks/chunk-67ZPPKXS.mjs";
+} from "./chunks/chunk-FNIIH2LU.mjs";
 import {
   FloatingActionButton
-} from "./chunks/chunk-ILDRRG7T.mjs";
+} from "./chunks/chunk-LFORZRPH.mjs";
 import {
   Cards
-} from "./chunks/chunk-OYNUDOHR.mjs";
+} from "./chunks/chunk-UTSLYQ65.mjs";
 import {
   Carousel
-} from "./chunks/chunk-4QUCNFSD.mjs";
+} from "./chunks/chunk-3KLZRQZI.mjs";
+import "./chunks/chunk-EB2V4OKL.mjs";
 import {
   Lists
-} from "./chunks/chunk-AI73GJKG.mjs";
+} from "./chunks/chunk-BB5VXYXT.mjs";
 import {
   PaneResize
-} from "./chunks/chunk-7W7TV6NY.mjs";
+} from "./chunks/chunk-VS5OJBOD.mjs";
 import {
   SideSheets
-} from "./chunks/chunk-ROH2HDB4.mjs";
+} from "./chunks/chunk-RUDYMEJ3.mjs";
 import {
   Sortable
-} from "./chunks/chunk-TFABTUAZ.mjs";
+} from "./chunks/chunk-T4MOBP3J.mjs";
 import {
   Theme
-} from "./chunks/chunk-GVZQH2H5.mjs";
+} from "./chunks/chunk-AEG6LOAJ.mjs";
 import {
   Tour
-} from "./chunks/chunk-NAC72P7R.mjs";
+} from "./chunks/chunk-I2F7MLUU.mjs";
 import {
   TransferList
-} from "./chunks/chunk-DZYVU75J.mjs";
+} from "./chunks/chunk-GFWYMWYN.mjs";
 import {
   BottomSheets
-} from "./chunks/chunk-3L3QIYLC.mjs";
-import "./chunks/chunk-JUKBBN6P.mjs";
+} from "./chunks/chunk-H5ISU45X.mjs";
+import "./chunks/chunk-YLZOJLDI.mjs";
 import "./chunks/chunk-W6FAL3TI.mjs";
 import {
   Copy
-} from "./chunks/chunk-ZO6ZLHFF.mjs";
+} from "./chunks/chunk-TVSX5YA2.mjs";
 import {
   Snackbar
-} from "./chunks/chunk-KZPSAXIU.mjs";
+} from "./chunks/chunk-HEH7E3KO.mjs";
 import {
   DataTables
-} from "./chunks/chunk-U4B3VHFS.mjs";
-import {
-  LineChart
-} from "./chunks/chunk-ZM3XBHWV.mjs";
-import "./chunks/chunk-CMGXGYUC.mjs";
+} from "./chunks/chunk-ZK7YY322.mjs";
 import {
   Dialogs
-} from "./chunks/chunk-4PIXLDNJ.mjs";
+} from "./chunks/chunk-LEF33SCP.mjs";
 import {
   Forms
-} from "./chunks/chunk-Z4OARDZ7.mjs";
+} from "./chunks/chunk-LWLNV5EC.mjs";
 import {
   ImageCompare
-} from "./chunks/chunk-7YZ5CN3V.mjs";
-import "./chunks/chunk-ZVLOUDIJ.mjs";
+} from "./chunks/chunk-PCABY5BN.mjs";
+import "./chunks/chunk-67UNY7RH.mjs";
 export {
   AppBar,
   AutoInit,

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

@@ -2,9 +2,11 @@
  * Drag-to-dismiss for `dialog.bottom-sheet`, and two heights for
  * `.expandable` sheets.
  *
- * The handle is the top 48dp of the sheet, or an explicit `.drag-handle`. A downward drag past 96dp, or a
- * flick, closes. Anything else snaps back. Content below the handle scrolls
- * normally. Light-dismiss on the scrim stays with {@link Dialogs}.
+ * The handle is the top 48dp of the sheet, or a `.drag-handle` directly in the
+ * sheet. One deeper in belongs to its own control, such as a table column or a
+ * sortable row. A downward drag past 96dp, or a flick, closes. Anything else
+ * snaps back. Content below the handle scrolls normally. Light-dismiss on the
+ * scrim stays with {@link Dialogs}.
  *
  * The drag itself is {@link installSheetDrag}, shared with the side sheet. What
  * is here is what is not shared: a handle written as a `<button>` also closes

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

@@ -113,14 +113,10 @@ export declare class DataTables {
     private static _resized;
     /**
      * Reorders each body's rows by one column. A detail row moves with the
-     * row before it.
+     * row before it. Numeric columns put nonnumbers first; text uses the page's language.
      */
     private static _sort;
-    /**
-     * How a column compares: a `.numeric` header's as numbers, as a chart
-     * reads them, with text that is not a number first; any other as text in
-     * the page's language, with digit runs as numbers.
-     */
+    /** Compares prepared numeric keys or text in the page's language. */
     private static _compare;
     private static _records;
     /** A body's rows in groups: each record row with the detail rows after it. */

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

@@ -30,7 +30,6 @@ export declare class Forms {
     private static _initialized;
     private static _fileErrors;
     private static _fileSelections;
-    private static _fileResetForms;
     private static _validatedFile;
     private static _rejectedTypes;
     private static _validateFiles;
@@ -51,11 +50,11 @@ export declare class Forms {
     private static _validateDropZone;
     private static _reportFileRejection;
     private static _newFileSelection;
-    private static _bindFileReset;
+    private static _bindShadowForm;
     private static _resetFileInput;
     private static _resetFileList;
     private static _resetFileValidity;
-    private static _resetDropZones;
+    private static _afterReset;
     /**
      * 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.
@@ -70,16 +69,17 @@ export declare class Forms {
     /**
      * A [data-step="up"] or [data-step="down"] button in a .field steps the
      * field's number input as the arrow keys would, within min, max and step,
-     * and fires input and change. A disabled, read-only or step="any" input
+     * and fires input and change if the value moved. A disabled, read-only or step="any" input
      * is left alone; stepUp() would throw on step="any".
      */
     static stepNumber(e: MouseEvent): void;
     /**
      * A revealed password goes back to type="password" when its form is
      * submitted or reset, so it is never sent or autofilled as plain text and
-     * a reset field does not stay revealed. A reset form also drops the file
-     * lists it would otherwise leave showing: reset fires no change event.
-     * File cleanup waits for native reset and respects later cancellation.
+     * a reset field does not stay revealed. Reset fires no input or change
+     * event, so a reset form also drops its file lists, `.validate` errors and
+     * error summary, and fits each auto-resizing textarea to its restored text.
+     * That cleanup waits for the native reset and respects later cancellation.
      */
     static resetFormExtras(e: Event): void;
     /**

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

@@ -2,7 +2,8 @@
  * Image compare. Keeps `--md-comp-image-compare-position` on each
  * `.image-compare` in step with its range input, so the divider and the
  * revealed image follow the value. Listens on the document, so compares added
- * later follow too once moved; `ImageCompare.sync(el)` sets one at once.
+ * later follow too once moved, and a form reset moves them back.
+ * `ImageCompare.sync(el)` sets one at once.
  */
 export declare class ImageCompare {
     private static _initialized;

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

@@ -35,6 +35,8 @@ export declare class TransferList {
      * page added since, none, so it goes last.
      */
     private static _slot;
+    /** The first row of `list` that started after position `index`. Walks siblings, so a move-all stays cheap. */
+    private static _firstAfter;
     private static _announce;
     /** A list's `aria-label`, or the text of the elements its `aria-labelledby` names. */
     private static _name;

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

@@ -64,6 +64,8 @@ export interface AutocompleteOptions extends BaseOptions {
      * @default '300px'
      */
     maxMenuHeight: string;
+    /** Maximum rendered suggestions. Infinity preserves the complete list. @default Infinity */
+    maxResults: number;
     /**
      * Function is called when the input text is altered and data can also be loaded asynchronously.
      * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems).
@@ -132,6 +134,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     /** The search waiting for typing to pause. */
     private _searchTimer;
     private _selection;
+    /** The selection the field started with, which a form reset restores. */
+    private _startingSelection;
     private _statusInfo;
     private _announcer;
     /** The last search returned no suggestions. A text change clears it until the next one returns. */
@@ -151,7 +155,6 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     container: HTMLElement;
     /** Instance of the menu plugin for this autocomplete. */
     menu: Menu;
-    static _keydown: boolean;
     selectedValues: AutocompleteData[];
     menuItems: AutocompleteData[];
     constructor(el: HTMLInputElement, options: Partial<AutocompleteOptions>);
@@ -168,13 +171,20 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     private static _loadingIndicator;
     destroy(): void;
     _setupEventHandlers(): void;
+    /** The form restored the input's text. The selection follows it, with no change event, as a native reset fires none. */
+    private _handleReset;
     _setupMenu(): void;
     _removeMenu(): void;
     _handleInputBlur: () => void;
-    _handleInputKeyup: () => void;
     _handleInput: () => void;
     _handleInputFocus: () => void;
     _inputChangeDetection: (value: string, typed?: boolean) => void;
+    /**
+     * Searches for text of at least `minLength` characters. Shorter text drops
+     * the pending and running searches and the old results: it used to reach
+     * onSearch too, so a remote search fetched on every first keystroke.
+     */
+    private _startSearch;
     /** Searches now, or once typing pauses for `searchDelay`. Focus never waits. */
     private _queueSearch;
     private _cancelPendingSearch;
@@ -191,12 +201,13 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     _resetCurrentElementPosition(): void;
     _resetAutocomplete(): void;
     _highlightPartialText(input: string, label: string): string[];
-    _createMenuItem(entry: AutocompleteData): HTMLLIElement;
+    _createMenuItem(entry: AutocompleteData, selectedIds?: Set<string | number>): HTMLLIElement;
     /** Menu already ignores a click on an aria-disabled row. */
     private static _markDisabled;
     _createLabel(entry: AutocompleteData): HTMLDivElement;
     _highlightHTML(div: HTMLElement, label: string, inputText: string): void;
     _highlightText(div: HTMLElement, parts: string[]): void;
+    private _visibleEntries;
     _renderMenu(): void;
     /** The list a row goes in: the listbox, or its group's list, made where the group first appears. */
     private _groupList;

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

@@ -110,8 +110,15 @@ export declare class Carousel extends Component<CarouselOptions> {
     private _setupIndicators;
     _setupEventHandlers(): void;
     private _teardown;
+    /**
+     * Puts back an item's accessibility attributes, its authored `active`
+     * class and, for an item found without it, the `carousel-item` class. A
+     * carousel started again used to begin at the last shown item.
+     */
+    private _restoreItemState;
     _handleThrottledResize: () => void;
     _handleAutoAdvanceState: (e: Event) => void;
+    private _handleAutoAdvanceKey;
     private _handleMotionChange;
     /** Start or stop the timer to match the current pause state. */
     private _syncAutoAdvance;

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

@@ -99,6 +99,8 @@ export declare class Chips extends Component<ChipsOptions> {
     private _name;
     /** The chips the field started with, which a form reset puts back. */
     private _initialData;
+    /** Undoes each change setup made to the markup, newest last. */
+    private _undo;
     /** The input's own aria-required, or null, put back on destroy. */
     private _ariaRequired;
     /** The form control wrapping a named input, which the form reads instead of it. */
@@ -173,13 +175,26 @@ export declare class Chips extends Component<ChipsOptions> {
     _handleInputFocus: () => void;
     _handleInputBlur: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
+    /** Whether a key moves from the empty input back to the last chip. */
+    private _leavesInput;
     _renderChip(chip: ChipData): HTMLElement;
+    /**
+     * Copies the starting chips, so adding or deleting one does not edit the
+     * caller's array and a batch init does not share one list. Blank ids,
+     * duplicates and chips past the limit are dropped, as addChip drops them: a
+     * blank id used to render nothing and throw from the constructor.
+     */
+    private _takeInitialData;
     _renderChips(): void;
     _setupAutocomplete(): void;
     /** The "Add" row is a deliberate choice, so it adds a chip even in an autocompleteOnly field. */
     private _addTyped;
     _setupInput(): void;
     _setupLabel(): void;
+    /** Adds a class the markup did not have, for destroy() to take off. */
+    private _addClass;
+    /** Keeps an attribute's value for destroy() to put back. */
+    private _keepAttribute;
     _setPlaceholder(): void;
     _isValidAndNotExist(chip: ChipData): boolean;
     /**

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

@@ -1,4 +1,14 @@
 import { Component, BaseOptions } from '../core/component';
+export interface ColorPickerI18n {
+    /** The name of the saturation and brightness area. */
+    area: string;
+    /** What the area reports as its value, from two whole percentages. */
+    value: (saturation: number, brightness: number) => string;
+    /** The name of the hue slider. */
+    hue: string;
+    /** The name of the hex field. */
+    hex: string;
+}
 export interface ColorPickerOptions extends BaseOptions {
     /**
      * Called with the new `#rrggbb` value when a change is committed: the end
@@ -6,6 +16,8 @@ export interface ColorPickerOptions extends BaseOptions {
      * @default null
      */
     onChange: ((value: string) => void) | null;
+    /** The accessible names, for a page in another language. */
+    i18n: Partial<ColorPickerI18n>;
 }
 /**
  * Color picker. Enhances a `.color-picker` holding an `<input type="color">`
@@ -39,4 +51,6 @@ export declare class ColorPicker extends Component<ColorPickerOptions> {
     private _fromPoint;
     private _onPointerDown;
     private _onKeyDown;
+    /** How a key moves the point. Shift is the larger step; Alt, Ctrl and Meta stay the browser's. */
+    private _keySteps;
 }

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

@@ -20,9 +20,12 @@ export declare class CurrencyInput extends Component<CurrencyInputOptions> {
     /** Writes an amount as the form submits it: Latin digits, a `.` mark, no grouping. */
     private _plain;
     private _digits;
-    /** The locale's digits for 9876543210, and its decimal mark. */
+    /** The locale's digits for 9876543210. */
     private _native;
-    private _decimal;
+    /** Rewrites a decimal mark that is neither `.` nor `,`, such as Arabic's, to `.`. */
+    private _marks;
+    /** The locale's decimal marks, after `_marks`. */
+    private _decimals;
     constructor(el: HTMLInputElement, options: Partial<CurrencyInputOptions>);
     static get defaults(): CurrencyInputOptions;
     /** The amount the field holds, rounded as it shows, or null when it is empty or holds no digit. */
@@ -48,8 +51,6 @@ export declare class CurrencyInput extends Component<CurrencyInputOptions> {
     private _onFocus;
     /** Marks text that holds no amount invalid, and clears the mark once it holds one or is empty. */
     private _validate;
-    private _onReset;
-    private _afterReset;
     /** Puts the plain number in the form data in place of the formatted text. */
     private _onFormData;
     /** Whether the field has an entry in `form`'s data. */