@expressivecss/expressive 0.12.0 → 0.13.1

package/dist/js/modular.mjs

@@ -1,10 +1,19 @@
 import {
   version
-} from "./chunks/chunk-G3I5H2U3.mjs";
+} from "./chunks/chunk-4PWAPV6F.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-HNFSMIBY.mjs";
-import "./chunks/chunk-WWPAPHMA.mjs";
+} 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";
 import {
   Slider
 } from "./chunks/chunk-WJXDBPXQ.mjs";
@@ -18,20 +27,54 @@ import {
   Timepicker
 } from "./chunks/chunk-IFXVDDDH.mjs";
 import {
-  Tooltip
-} from "./chunks/chunk-CKQP6P76.mjs";
+  MessageScroller
+} from "./chunks/chunk-CCWDV5CR.mjs";
+import {
+  MixedChart
+} from "./chunks/chunk-HKT2S7VM.mjs";
+import {
+  NavigationRail
+} from "./chunks/chunk-6N2XAEFK.mjs";
+import {
+  PieChart
+} from "./chunks/chunk-P3G3QHII.mjs";
+import {
+  Questionnaire
+} from "./chunks/chunk-DTKR54I6.mjs";
+import {
+  RadarChart
+} from "./chunks/chunk-3DHK5CZU.mjs";
+import {
+  RadialChart
+} from "./chunks/chunk-RHRQKTTX.mjs";
+import {
+  CommandPalette
+} from "./chunks/chunk-K4CJCRGE.mjs";
+import {
+  Datepicker
+} from "./chunks/chunk-PLYXLSH3.mjs";
+import {
+  FormSelect
+} from "./chunks/chunk-55IA2XUC.mjs";
+import "./chunks/chunk-EC63CHXU.mjs";
 import {
   ExpandingCard
 } from "./chunks/chunk-QVVEWBOF.mjs";
+import {
+  HeatmapChart
+} from "./chunks/chunk-LNCCYGPC.mjs";
 import {
   Lightbox
 } from "./chunks/chunk-UNEMYWEW.mjs";
 import {
-  NavigationRail
-} from "./chunks/chunk-6N2XAEFK.mjs";
+  BarChart
+} from "./chunks/chunk-GVGT6MIU.mjs";
 import {
-  ScrollSpy
-} from "./chunks/chunk-QV2JAWIZ.mjs";
+  ColumnChart
+} from "./chunks/chunk-SPETGK25.mjs";
+import {
+  LineChart
+} from "./chunks/chunk-O5XPWXIQ.mjs";
 import {
   ButtonGroup
 } from "./chunks/chunk-YDCS5S3J.mjs";
@@ -49,20 +92,13 @@ import {
 } from "./chunks/chunk-QDAL4IYN.mjs";
 import {
   Chips
-} from "./chunks/chunk-RFZZCYVU.mjs";
+} from "./chunks/chunk-XGHORT7J.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-HLDXZ7XB.mjs";
-import {
-  Datepicker
-} from "./chunks/chunk-H2WA4XHH.mjs";
-import "./chunks/chunk-EC63CHXU.mjs";
-import {
-  FormSelect
-} from "./chunks/chunk-HB6IW7QQ.mjs";
+} from "./chunks/chunk-3CLXLPYS.mjs";
 import {
   Menu
-} from "./chunks/chunk-YSBCHYXP.mjs";
+} from "./chunks/chunk-U2OTHOTI.mjs";
 import {
   BottomSheets
 } from "./chunks/chunk-DLWYKFEI.mjs";
@@ -71,7 +107,7 @@ import {
 } from "./chunks/chunk-UAEAQBRC.mjs";
 import {
   Forms
-} from "./chunks/chunk-PSSHQWCX.mjs";
+} from "./chunks/chunk-QKWPQK5N.mjs";
 import {
   SideSheets
 } from "./chunks/chunk-6WLSDZ4O.mjs";
@@ -85,22 +121,34 @@ export {
   AppBar,
   AutoInit,
   Autocomplete,
+  BarChart,
   BottomSheets,
   ButtonGroup,
   Cards,
   Carousel,
   CharacterCounter,
   Chips,
+  ColumnChart,
+  CommandPalette,
   Datepicker,
   Dialogs,
   ExpandingCard,
   FloatingActionButton,
   FormSelect,
   Forms,
+  HeatmapChart,
   Lightbox,
+  LineChart,
   Menu,
+  MessageScroller,
+  MixedChart,
   NavigationRail,
+  PieChart,
+  Questionnaire,
+  RadarChart,
+  RadialChart,
   Slider as Range,
+  RichTextEditor,
   ScrollSpy,
   SideSheets,
   Slider,

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

@@ -12,6 +12,28 @@ export declare class Forms {
      */
     static textareaAutoResize(e: EventTarget): void;
     static Init(): void;
+    /**
+     * A .password-toggle button shows or hides the password in its field. The
+     * button's own name stays put ("Show password"); aria-pressed carries the
+     * state, so there is no generated text to translate.
+     */
+    static togglePassword(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.
+     */
+    static resetFormExtras(e: Event): void;
+    /**
+     * The native file input covers its .drop-zone, so the browser already takes
+     * a dropped file. This only shows the drag: the input is the topmost
+     * element, so every drag event over the zone targets it and leaving it is
+     * leaving the zone.
+     */
+    static markDropZone(e: DragEvent): void;
+    /** Lists the chosen files, name and size, in the zone's .drop-zone-files. */
+    static listDropZoneFiles(zone: Element, input: HTMLInputElement): void;
     static InitTextarea(textarea: HTMLTextAreaElement): void;
     static InitFileInputPath(fileInput: HTMLInputElement): void;
 }

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

@@ -0,0 +1,24 @@
+import { InitElements, InitElement } from '../core/component';
+import { ColumnChart, ColumnChartOptions } from './columnChart';
+export type BarChartOptions = ColumnChartOptions;
+/**
+ * Bar chart. A column chart turned on its side: each row of the <table> is
+ * a band of bars that grow from zero along the inline axis, with its label
+ * beside it. The up and down arrows move the tooltip between rows.
+ *
+ * Re-run `BarChart.init(el)` after changing the table.
+ */
+export declare class BarChart extends ColumnChart {
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _horizontal(): boolean;
+    static init(el: HTMLElement, options?: Partial<BarChartOptions>): BarChart;
+    static init(els: InitElements<InitElement>, options?: Partial<BarChartOptions>): BarChart[];
+    static getInstance(el: HTMLElement): BarChart;
+    /**
+     * The column chart's spans; CSS reads their --top and --bottom across the
+     * plot. With .values, a copy of the bars without their clipping holds each
+     * cell's text, so text longer than a short bar can run past its end.
+     */
+    protected _draw(): Element;
+}

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

@@ -0,0 +1,21 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type ColumnChartOptions = LineChartOptions;
+/**
+ * Column chart. It reads its <table>, scales, labels and tooltip like
+ * LineChart, but draws each row as a group of columns from zero, or one
+ * column of segments with `stacked`. Columns are HTML clipped to their
+ * value, so their rounded corners keep their shape at any size.
+ *
+ * Re-run `ColumnChart.init(el)` after changing the table.
+ */
+export declare class ColumnChart extends LineChart {
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _fromZero(): boolean;
+    protected get _points(): boolean;
+    static init(el: HTMLElement, options?: Partial<ColumnChartOptions>): ColumnChart;
+    static init(els: InitElements<InitElement>, options?: Partial<ColumnChartOptions>): ColumnChart[];
+    static getInstance(el: HTMLElement): ColumnChart;
+    protected _draw(drawn?: import("./lineChart").Series[]): Element;
+}

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

@@ -0,0 +1,96 @@
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
+export interface CommandPaletteOptions extends BaseOptions {
+    /**
+     * Letter that toggles the palette together with Command on Apple platforms
+     * or Ctrl elsewhere. A key event the page has already handled is left
+     * alone. `null` turns the shortcut off. `data-shortcut` on the dialog sets
+     * it; an empty `data-shortcut` turns it off.
+     * @default 'k'
+     */
+    shortcut: string | null;
+    /**
+     * If true, the palette closes after a command runs.
+     * @default true
+     */
+    closeOnRun: boolean;
+}
+/**
+ * A command palette: a native modal <dialog class="command-palette"> holding
+ * a search input and a list of commands. Typing filters the list; the arrow
+ * keys move through what is left and Enter runs it, while focus stays in the
+ * input. The dialog owns modality, Escape and returning focus.
+ *
+ * The input is a combobox and the list a listbox of options, with the active
+ * option reported through aria-activedescendant. A command is the link or
+ * button inside an option; running it clicks that element, so a page wires
+ * commands with ordinary hrefs and click handlers.
+ */
+export declare class CommandPalette extends Component<CommandPaletteOptions> implements Openable {
+    el: HTMLDialogElement;
+    /** The search input. */
+    input: HTMLInputElement;
+    /** The list of commands. */
+    list: HTMLElement;
+    private _active;
+    private _generatedIds;
+    /** Wires and refilters commands the page adds or removes later. */
+    private _observer;
+    constructor(el: HTMLDialogElement, options: Partial<CommandPaletteOptions>);
+    static get defaults(): CommandPaletteOptions;
+    /**
+     * Initializes instance of CommandPalette.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<CommandPaletteOptions>): CommandPalette;
+    /**
+     * Initializes instances of CommandPalette.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<CommandPaletteOptions>): CommandPalette[];
+    static getInstance(el: HTMLElement): CommandPalette;
+    /** If the palette is open. */
+    get isOpen(): boolean;
+    /** Opens the palette as a modal dialog with the search input focused. */
+    open: () => void;
+    /** Closes the palette. The dialog returns focus to where it was. */
+    close: () => void;
+    destroy(): void;
+    private _items;
+    private _labels;
+    private _empty;
+    private _action;
+    private _ensureId;
+    private _setupAccessibility;
+    /** Every command, including ones added since the last pass, is an option. */
+    private _wireItems;
+    /** Commands on screen: neither hidden by the page nor filtered out. */
+    private _shown;
+    /** Shown commands the arrows and Enter can reach: disabled ones are skipped. */
+    private _visible;
+    /** A disabled link or button cannot run, so its option says so. */
+    private _isDisabled;
+    private _setActive;
+    /**
+     * Shows the commands matching the query. Filtering marks rows with
+     * data-filtered rather than hidden, so a command the page hides stays
+     * hidden. `keepActive` holds the active command while it is still
+     * reachable, for list changes the user did not make.
+     */
+    private _filter;
+    private _move;
+    /** Runs a command by clicking its link or button; the click handler closes. */
+    private _run;
+    _handleInput: () => void;
+    _handleKeydown: (e: KeyboardEvent) => void;
+    _handleListClick: (e: MouseEvent) => void;
+    _handlePointerMove: (e: PointerEvent) => void;
+    /**
+     * Each opening starts from the full list. The close event is queued, so a
+     * palette reopened straight away may already be open again; its new search
+     * is left alone.
+     */
+    _handleClose: () => void;
+    _handleShortcut: (e: KeyboardEvent) => void;
+}

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

@@ -0,0 +1,49 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type HeatmapChartOptions = LineChartOptions;
+/**
+ * Heatmap chart. It reads its <table> like LineChart, but draws every cell
+ * as a square of the grid, shaded from the lowest value to the highest, with
+ * the row headers beside it and the column headers below. A `data-label` on
+ * a header cell replaces its text on the grid; an empty one hides it. The
+ * tooltip shows one cell, and the arrow keys move round the grid.
+ *
+ * Re-run `HeatmapChart.init(el)` after changing the table.
+ */
+export declare class HeatmapChart extends LineChart {
+    /** Every cell, row by row. */
+    private _cells;
+    /** Each cell's shade from 0 to 1, or null for a gap. */
+    private _levels;
+    /** The text of the lowest and highest cells, for the legend. */
+    private _ends;
+    /** The shades of the lowest and highest cells, where the legend's gradient runs. */
+    private _endLevels;
+    protected get _type(): string;
+    protected get _key(): string;
+    static init(el: HTMLElement, options?: Partial<HeatmapChartOptions>): HeatmapChart;
+    static init(els: InitElements<InitElement>, options?: Partial<HeatmapChartOptions>): HeatmapChart[];
+    static getInstance(el: HTMLElement): HeatmapChart;
+    /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
+    show(index: number): void;
+    /** Arrows move the way they point, so left and right swap in RTL. */
+    protected _keyTarget(key: string): number | undefined;
+    /**
+     * The cell under the pointer by its position, or -1 off the grid. A touch
+     * keeps its first target while it drags, so the target cannot be used. The
+     * cells and gaps are even, so each band's edge falls in a gap and a gap
+     * counts as the nearer cell.
+     */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * The legend: a gradient from the lowest cell's shade to the highest's,
+     * labelled with their text. A fixed scale wider than the data shows only
+     * the part the data uses.
+     */
+    protected _guides(): Element[];
+    /**
+     * A grid of the row headers and cells, row by row, with the column headers
+     * below. Each cell's --level shades it in CSS.
+     */
+    protected _draw(): Element;
+}

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

@@ -7,8 +7,20 @@ export { ExpandingCard } from "./expandingCard";
 export { Carousel } from "./carousel";
 export { CharacterCounter } from "./characterCounter";
 export { Chips } from "./chips";
+export { CommandPalette } from "./commandPalette";
+export { Questionnaire } from "./questionnaire";
+export { LineChart } from "./lineChart";
+export { ColumnChart } from "./columnChart";
+export { BarChart } from "./barChart";
+export { PieChart } from "./pieChart";
+export { HeatmapChart } from "./heatmapChart";
+export { RadarChart } from "./radarChart";
+export { RadialChart } from "./radialChart";
+export { MixedChart } from "./mixedChart";
 export { Datepicker } from "./datepicker";
 export { Menu } from "./menu";
+export { MessageScroller } from "./messageScroller";
+export { RichTextEditor } from "./richTextEditor";
 export { Lightbox } from "./lightbox";
 export { Slider } from "./slider";
 export { ScrollSpy } from "./scrollspy";

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

@@ -0,0 +1,134 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface LineChartOptions extends BaseOptions {
+    /**
+     * Lowest value on the y axis. Defaults to the data minimum less 10% of
+     * the range; a stacked chart starts at zero or its lowest total, and a
+     * column chart always includes zero. Overridden by `data-min` on the chart.
+     */
+    min: number | null;
+    /**
+     * Highest value on the y axis. Defaults to the data maximum plus 10% of
+     * the range. Overridden by `data-max` on the chart.
+     */
+    max: number | null;
+}
+export declare const COLORS = 4;
+/** An SVG element with its attributes. */
+export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
+export interface Series {
+    name: string;
+    /** Header cell classes, such as `dashed`. */
+    className: string;
+    /** Cell text, shown in the tooltip as the author formatted it. */
+    text: string[];
+    values: (number | null)[];
+    /**
+     * Where each value is drawn: the value, or in a stacked chart the running
+     * total, which is unknown (null) above a gap.
+     */
+    tops: (number | null)[];
+    /** In a stacked chart, the total of the series below, which this area fills down to. */
+    base?: (number | null)[];
+    /** The series' y scale: a value's distance down the plot, in percent. */
+    y: (value: number) => number;
+}
+/**
+ * Line chart. The data is the chart's <table>; this class draws it as an SVG
+ * with x labels, a legend for more than one series, and a cursor and tooltip
+ * that follow the pointer or the arrow keys. Styling is CSS.
+ *
+ * Re-run `LineChart.init(el)` after changing the table.
+ */
+export declare class LineChart extends Component<LineChartOptions> {
+    /** The values' x positions and series, read from the table. */
+    labels: string[];
+    series: Series[];
+    /** The highlighted row, or -1. */
+    activeIndex: number;
+    private _generated;
+    /** The table's header cells and body rows, as read. */
+    protected _header: HTMLTableCellElement[];
+    protected _rows: HTMLTableRowElement[];
+    protected _plot: HTMLElement;
+    protected _cursor: HTMLElement;
+    protected _tooltip: HTMLElement;
+    protected _y: (value: number) => number;
+    /**
+     * Whether the rows run right to left: a horizontal row axis in a
+     * right-to-left context, like the labels. Bar chart rows keep their order.
+     */
+    protected _reversed: boolean;
+    /** The class prefix of the generated parts; ColumnChart reuses this class. */
+    protected get _type(): string;
+    /** Whether the y axis always includes zero, as columns grow from it. */
+    protected get _fromZero(): boolean;
+    /**
+     * Whether the rows run down the plot and the values across it, as in a
+     * bar chart. The rows then keep their order in a right-to-left context.
+     */
+    protected get _horizontal(): boolean;
+    /**
+     * Whether the rows go round a circle, as in a pie or radar chart. The
+     * arrows then step round it, wrapping from the last row to the first.
+     */
+    protected get _circular(): boolean;
+    /** Whether the cursor marks each series with a point. */
+    protected get _points(): boolean;
+    protected get _key(): string;
+    constructor(el: HTMLElement, options: Partial<LineChartOptions>);
+    static get defaults(): LineChartOptions;
+    static init(el: HTMLElement, options?: Partial<LineChartOptions>): LineChart;
+    static init(els: InitElements<InitElement>, options?: Partial<LineChartOptions>): LineChart[];
+    static getInstance(el: HTMLElement): LineChart;
+    destroy(): void;
+    /**
+     * Highlights one row: moves the cursor and fills the tooltip.
+     * Pass -1 to hide them. Does nothing for a chart without data.
+     */
+    show(index: number): void;
+    /**
+     * Moves the filled cursor and tooltip to a row: beside its band, with the
+     * tooltip opening back over the plot past the middle.
+     */
+    protected _place(index: number): void;
+    private _read;
+    /** A number from one of the chart's data attributes, or null. */
+    protected _number(name: string): number;
+    /**
+     * Fits a y scale to the series' tops, between `min` and `max` where they
+     * are set, and gives it to each series.
+     */
+    protected _scale(series: Series[], min: number | null, max: number | null, fromZero?: boolean): (value: number) => number;
+    /** Each row sits in the middle of an equal band, beside its label. */
+    private _x;
+    private _render;
+    /**
+     * The <tfoot> row as a total to show over the plot, its value over its
+     * label, or null without one.
+     */
+    protected _total(className: string): HTMLElement | null;
+    /** The parts below the plot: the row labels and the legend. */
+    protected _guides(): Element[];
+    /** The series legend, for more than one series. */
+    protected _legend(): Element[];
+    /** Draws the series, which fill the plot. */
+    protected _draw(drawn?: Series[]): Element;
+    private _onPointerMove;
+    /** The row under the pointer, or -1. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * For a circular chart, the pointer's position from the plot's middle: a
+     * fraction of a turn clockwise from the top, and its distance as a share
+     * of the plot's width.
+     */
+    protected _polarAt(e: PointerEvent): [turn: number, distance: number];
+    /** The keys that move to the next row and to the one before. */
+    protected get _arrows(): [string[], string[]];
+    private _onFocus;
+    private _onLeave;
+    /** The browser took the touch to scroll the page. */
+    private _onCancel;
+    /** The index a key moves to, or undefined for a key the chart ignores. */
+    protected _keyTarget(key: string): number | undefined;
+    private _onKeyDown;
+}

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

@@ -40,6 +40,13 @@ export interface MenuOptions extends BaseOptions {
      * @default false
      */
     hover: boolean;
+    /**
+     * If true, the trigger is a region and the menu is its context menu: it
+     * opens at the pointer on right-click, long-press or the keyboard context
+     * menu key instead of on click. `data-context-menu` on the trigger sets it.
+     * @default false
+     */
+    contextMenu: boolean;
     /**
      * The duration of the transition enter in milliseconds.
      * @default 150
@@ -95,6 +102,14 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _transition;
     private _originalInert;
     private _menuClickTargets;
+    /**
+     * Viewport point the open context menu belongs to. Null outside a
+     * right-click, so a keyboard or programmatic open uses the region's corner
+     * rather than an old pointer position.
+     */
+    private _contextPoint;
+    /** What had focus when a context menu opened; focus goes back there. */
+    private _contextReturn;
     constructor(el: HTMLElement, options: Partial<MenuOptions>);
     static get defaults(): MenuOptions;
     /**
@@ -115,6 +130,8 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _removeEventHandlers(): void;
     _setupTemporaryEventHandlers(): void;
     _removeTemporaryEventHandlers(): void;
+    _handleContextMenu: (e: MouseEvent) => void;
+    _handleDocumentContextMenu: (e: MouseEvent) => void;
     _handleClick: (e: MouseEvent) => void;
     _handleMouseEnter: () => void;
     _handleMouseLeave: (e: MouseEvent) => void;
@@ -157,6 +174,20 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _animateOut(): void;
     private _getClosestAncestor;
     _placeMenu(): void;
+    /** Where a context menu opens without a pointer: the region's start corner. */
+    private _regionCorner;
+    /**
+     * Places a context menu with its start corner on the point, flipping to
+     * the other side of the point where it would not fit. The bounds are the
+     * viewport, narrowed to a scrolling or clipping ancestor the menu sits in;
+     * a menu taller than them gets their height and scrolls.
+     *
+     * The menu rests at left/top 0 of its containing block, so its rect is the
+     * offset to subtract - the same trick _getMenuPosition uses. It is measured
+     * without the entry animation's scale, which a second right-click can catch.
+     */
+    private _placeMenuAtPoint;
+    private _setExpanded;
     /**
      * Open menu.
      */