@expressivecss/expressive 0.12.0 → 0.13.1

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

@@ -0,0 +1,111 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface MessageScrollerOptions extends BaseOptions {
+    /**
+     * If true, the viewport follows new content while the reader is at the
+     * end, and a newly appended scroll anchor is brought to the top.
+     * @default true
+     */
+    autoScroll: boolean;
+    /**
+     * Where the transcript opens: `'end'`, `'start'`, or `'last-anchor'`, the
+     * start of the last anchored turn. `'last-anchor'` opens at the end when
+     * that turn already fits in the viewport.
+     * @default 'end'
+     */
+    defaultScrollPosition: 'start' | 'end' | 'last-anchor';
+    /**
+     * Pixels of the previous message left visible above an anchored turn or a
+     * message reached with `scrollToMessage()`.
+     * @default 64
+     */
+    peek: number;
+}
+/**
+ * A chat scroll container: a `.message-scroller` frame holding a scrolling
+ * `.message-scroller-viewport` of messages and an optional
+ * `.message-scroller-button`. Every child of the viewport is one message.
+ *
+ * While the reader is at the end, the viewport follows streamed output.
+ * Scrolling toward the start releases it; reaching the end again, or the
+ * button, resumes it. An appended message marked `data-scroll-anchor` starts a
+ * turn and is scrolled to the top, with blank space below it until the reply
+ * fills the viewport. Messages added above keep the reader's place.
+ */
+export declare class MessageScroller extends Component<MessageScrollerOptions> {
+    /** The scrolling element. */
+    viewport: HTMLElement;
+    /** The scroll-to-latest button, if present. */
+    button: HTMLButtonElement | null;
+    private _opened;
+    private _following;
+    /** A press is down: it may be a tap or a scrollbar drag. */
+    private _holding;
+    private _lastTop;
+    /** Where a programmatic scroll is heading; null when none is running. */
+    private _target;
+    /** Distance left to the target at the last scroll event. */
+    private _distance;
+    /** The first visible message and its offset from the viewport top. */
+    private _ref;
+    private _refOffset;
+    /** The latest anchored turn, which the spacer lets reach the top. */
+    private _anchor;
+    private _spacer;
+    private _last;
+    private _resizeObserver;
+    private _mutationObserver;
+    constructor(el: HTMLElement, options: Partial<MessageScrollerOptions>);
+    static get defaults(): MessageScrollerOptions;
+    /**
+     * Initializes instance of MessageScroller.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<MessageScrollerOptions>): MessageScroller;
+    /**
+     * Initializes instances of MessageScroller.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<MessageScrollerOptions>): MessageScroller[];
+    static getInstance(el: HTMLElement): MessageScroller;
+    destroy(): void;
+    /** Scrolls to the latest message and resumes following. */
+    scrollToEnd(): void;
+    /** Scrolls to the first message. */
+    scrollToStart(): void;
+    /**
+     * Scrolls the element with this id to the top of the viewport, below the
+     * peek, and stops following.
+     * @returns false when no such element is inside the viewport.
+     */
+    scrollToMessage(id: string): boolean;
+    private _open;
+    /**
+     * Records where the reader is once no programmatic scroll is running.
+     * Content can grow between a scroll and the resize that re-pins the end,
+     * so only moving toward the start releases following.
+     */
+    private _settle;
+    private _handleScroll;
+    private _handleUserScroll;
+    private _handleRelease;
+    private _handleButtonClick;
+    private _handleMutations;
+    private _handleResize;
+    private _scrollTo;
+    private _resolve;
+    private _atEnd;
+    /** Offset of an element from the top of the scrolled content. */
+    private _top;
+    /** Bottom of the content without the spacer, padding included. */
+    private _contentEnd;
+    /** Remembers the first visible message so prepends can keep it in place. */
+    private _capture;
+    /** Moves the remembered message back to where the reader last saw it. */
+    private _restore;
+    /** Sizes the blank space that lets the latest anchored turn reach the top. */
+    private _updateSpacer;
+    /** The button is inert while there is nothing below. */
+    private _sync;
+}

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

@@ -0,0 +1,25 @@
+import { InitElements, InitElement } from '../core/component';
+import { ColumnChart } from './columnChart';
+import { LineChartOptions, Series } from './lineChart';
+export type MixedChartOptions = LineChartOptions;
+/**
+ * Mixed chart. It reads its <table> like LineChart, and draws each series
+ * by its header cell's class: `column` as columns from zero, `area` as a
+ * line with a fill under it, and anything else as a line. Series with
+ * `end` are drawn against a second scale, set by `data-end-min` and
+ * `data-end-max`, so values of different sizes or units share the plot.
+ *
+ * Re-run `MixedChart.init(el)` after changing the table.
+ */
+export declare class MixedChart extends ColumnChart {
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _points(): boolean;
+    static init(el: HTMLElement, options?: Partial<MixedChartOptions>): MixedChart;
+    static init(els: InitElements<InitElement>, options?: Partial<MixedChartOptions>): MixedChart[];
+    static getInstance(el: HTMLElement): MixedChart;
+    /** The start scale, then the end scale; each includes zero if it has columns. */
+    protected _scale(series: Series[], min: number | null, max: number | null): (value: number) => number;
+    /** Columns behind, then the lines and areas over them. */
+    protected _draw(): Element;
+}

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

@@ -0,0 +1,40 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type PieChartOptions = LineChartOptions;
+/**
+ * Pie chart. It reads its <table> like LineChart, but draws each row of the
+ * first value column as a slice of the whole, clockwise from the top, with
+ * a legend of every row and its share. With `.donut`, a <tfoot> row is the
+ * total in the middle. Further columns show in the tooltip.
+ *
+ * Re-run `PieChart.init(el)` after changing the table.
+ */
+export declare class PieChart extends LineChart {
+    /** Each row's start and end, as fractions of a turn clockwise from the top. */
+    private _turns;
+    /** Each row's color, or undefined for a row with no slice. */
+    private _colors;
+    private _slices;
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _points(): boolean;
+    protected get _circular(): boolean;
+    static init(el: HTMLElement, options?: Partial<PieChartOptions>): PieChart;
+    static init(els: InitElements<InitElement>, options?: Partial<PieChartOptions>): PieChart[];
+    static getInstance(el: HTMLElement): PieChart;
+    show(index: number): void;
+    /** CSS places the tooltip on the slice's middle from --turn. */
+    protected _place(index: number): void;
+    /** The row's share of the whole as a percentage, or '' for none. */
+    private _share;
+    /** 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. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps
+     * between them and the donut's hole, which CSS sizes. The values and the
+     * total are HTML over it.
+     */
+    protected _draw(): Element;
+}

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

@@ -0,0 +1,96 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface QuestionnaireOptions extends BaseOptions {
+    /**
+     * Text above the progress bar. `{current}` and `{total}` are replaced with
+     * the question number and the number of questions. `data-progress-label`
+     * on the form sets it.
+     * @default 'Question {current} of {total}'
+     */
+    progressLabel: string;
+    /**
+     * Error shown when a question has no `.questionnaire-error` of its own and
+     * the browser gives no validation message, as for a `data-required` group
+     * of checkboxes.
+     * @default 'Choose an answer to continue.'
+     */
+    requiredMessage: string;
+}
+/**
+ * A multi-step questionnaire: a <form class="questionnaire"> whose
+ * <fieldset> children are the questions, shown one at a time, and a <footer>
+ * of buttons. `value="previous"`, `value="skip"` and `value="next"` mark the
+ * navigation buttons; a submit button sends the form on the last question.
+ *
+ * A question is required when one of its controls is `required`, or when the
+ * fieldset has `data-required` (at least one enabled checkbox, held as a
+ * custom validity on the first one). Next and every way of submitting check
+ * it with the browser's own validation; an optional question gets Skip, which
+ * clears its answer. A disabled fieldset is left out, so a page can switch
+ * questions on and off from earlier answers.
+ *
+ * Without JavaScript every question shows at once and the submit button sends
+ * the form. The answers are ordinary form controls, so FormData reads them.
+ */
+export declare class Questionnaire extends Component<QuestionnaireOptions> {
+    el: HTMLFormElement;
+    private _active;
+    private _progress;
+    private _progressText;
+    private _progressBar;
+    private _generated;
+    private _generatedIds;
+    private _observer;
+    /** Set while one submission's invalid events arrive, so only the first opens. */
+    private _reporting;
+    constructor(el: HTMLFormElement, options: Partial<QuestionnaireOptions>);
+    static get defaults(): QuestionnaireOptions;
+    /**
+     * Initializes instance of Questionnaire.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<QuestionnaireOptions>): Questionnaire;
+    /**
+     * Initializes instances of Questionnaire.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<QuestionnaireOptions>): Questionnaire[];
+    static getInstance(el: HTMLElement): Questionnaire;
+    /** The questions that apply: every fieldset child that is not disabled. */
+    get items(): HTMLFieldSetElement[];
+    /** Position of the shown question in `items`. */
+    get index(): number;
+    /** Shows the question at `index` without checking the current one. */
+    goTo: (index: number) => void;
+    /** Checks the shown question and moves to the next one if it is answered. */
+    next: () => void;
+    /** Moves to the previous question. */
+    previous: () => void;
+    /** Clears the answer to the shown question and moves to the next one. */
+    skip: () => void;
+    destroy(): void;
+    private _fieldsets;
+    /** The footer's navigation and submit buttons. */
+    private _buttons;
+    private _controls;
+    private _required;
+    private _ensureId;
+    private _render;
+    /**
+     * Puts "choose at least one" on the first enabled checkbox of each
+     * data-required group with none checked, so the browser's validation, and
+     * every way of submitting, sees it. A disabled checkbox is not sent, so it
+     * does not count.
+     */
+    private _syncRequired;
+    /** The first control in the question that still needs an answer. */
+    private _invalidControl;
+    /** Shows the question's error and returns false when it needs an answer. */
+    private _validate;
+    private _setInvalid;
+    private _handleClick;
+    private _handleKeydown;
+    private _handleInvalid;
+    private _handleInput;
+}

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

@@ -0,0 +1,39 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type RadarChartOptions = LineChartOptions;
+/**
+ * Radar chart. It reads its <table> like LineChart, but each row is a spoke,
+ * clockwise from the top, and each value column is a series drawn as a
+ * shape joining its values on the spokes, from zero in the middle to the
+ * scale's top at the rim. The row labels sit round the rim.
+ *
+ * Re-run `RadarChart.init(el)` after changing the table.
+ */
+export declare class RadarChart extends LineChart {
+    protected get _type(): string;
+    protected get _key(): string;
+    /** The scale starts at zero, the middle, so shapes compare by size. */
+    protected get _fromZero(): boolean;
+    protected get _circular(): boolean;
+    static init(el: HTMLElement, options?: Partial<RadarChartOptions>): RadarChart;
+    static init(els: InitElements<InitElement>, options?: Partial<RadarChartOptions>): RadarChart[];
+    static getInstance(el: HTMLElement): RadarChart;
+    /**
+     * The cursor is a spoke turned by --turn, and the tooltip sits past its
+     * tip. LineChart's points on the spoke keep their top, a share of the
+     * radius, which stops at the rim and the middle like the shapes.
+     */
+    protected _place(index: number): void;
+    /** A row's spoke as a fraction of a turn clockwise from the top. */
+    private _turn;
+    /** Only the legend; the labels go round the rim in _draw. */
+    protected _guides(): Element[];
+    /** The nearest spoke to the pointer, by its angle from the middle. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * An SVG in a -50 to 50 box: the rings and spokes of the grid, then each
+     * series' shape, with its points for .points. The rim is the box's edge;
+     * the labels round it are HTML.
+     */
+    protected _draw(): Element;
+}

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

@@ -0,0 +1,45 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type RadialChartOptions = LineChartOptions;
+/**
+ * Radial chart. It reads its <table> like LineChart, but draws each row of
+ * the first value column as a ring, outermost first, filled clockwise from
+ * the top as a share of `data-max` above zero (100 by default). With `.gauge` the rings
+ * are half circles over the middle. A <tfoot> row shows in the middle, and
+ * a legend lists the rows when there is more than one. Further columns show
+ * in the tooltip.
+ *
+ * Re-run `RadialChart.init(el)` after changing the table or the ring tokens.
+ */
+export declare class RadialChart extends LineChart {
+    /** Each ring's middle radius, and their shared width. */
+    private _radii;
+    private _width;
+    /** Each row's share of the maximum, from 0 to 1. */
+    private _fractions;
+    private _rings;
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _points(): boolean;
+    protected get _circular(): boolean;
+    private get _gauge();
+    static init(el: HTMLElement, options?: Partial<RadialChartOptions>): RadialChart;
+    static init(els: InitElements<InitElement>, options?: Partial<RadialChartOptions>): RadialChart[];
+    static getInstance(el: HTMLElement): RadialChart;
+    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. */
+    protected _guides(): Element[];
+    /** The ring under the pointer by its distance from the middle, or -1. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row
+     * is a track circle and a fill circle whose dash is its share; CSS draws
+     * them from --radial-chart-dash. The total is HTML over it.
+     */
+    protected _draw(): Element;
+}

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

@@ -43,14 +43,58 @@ export declare const AUTO_INIT_COMPONENTS: {
         component: typeof Components.Chips;
         selector: string;
     };
+    ColumnChart: {
+        component: typeof Components.ColumnChart;
+        selector: string;
+    };
+    BarChart: {
+        component: typeof Components.BarChart;
+        selector: string;
+    };
+    PieChart: {
+        component: typeof Components.PieChart;
+        selector: string;
+    };
+    HeatmapChart: {
+        component: typeof Components.HeatmapChart;
+        selector: string;
+    };
+    RadarChart: {
+        component: typeof Components.RadarChart;
+        selector: string;
+    };
+    RadialChart: {
+        component: typeof Components.RadialChart;
+        selector: string;
+    };
+    MixedChart: {
+        component: typeof Components.MixedChart;
+        selector: string;
+    };
+    CommandPalette: {
+        component: typeof Components.CommandPalette;
+        selector: string;
+    };
+    Questionnaire: {
+        component: typeof Components.Questionnaire;
+        selector: string;
+    };
     Datepicker: {
         component: typeof Components.Datepicker;
         selector: string;
     };
+    LineChart: {
+        component: typeof Components.LineChart;
+        selector: string;
+    };
     Menu: {
         component: typeof Components.Menu;
         selector: string;
     };
+    MessageScroller: {
+        component: typeof Components.MessageScroller;
+        selector: string;
+    };
     Lightbox: {
         component: typeof Components.Lightbox;
         selector: string;

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

@@ -0,0 +1,71 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+/**
+ * The parts of a Tiptap `Editor` this component uses. Declared here so the
+ * published types do not depend on Tiptap.
+ */
+export interface RichTextEditorInstance {
+    commands: object;
+    isEditable: boolean;
+    isEmpty: boolean;
+    chain(): any;
+    can(): any;
+    isActive(name: string, attributes?: object): boolean;
+    getHTML(): string;
+    on(event: string, callback: () => void): unknown;
+    off(event: string, callback: () => void): unknown;
+    destroy(): void;
+}
+export interface RichTextEditorOptions extends BaseOptions {
+    /**
+     * Tiptap's `Editor` class. ExpressiveCSS does not bundle Tiptap, so the
+     * page imports it and passes it in.
+     * @default null
+     */
+    Editor: (new (options: any) => RichTextEditorInstance) | null;
+    /**
+     * Tiptap extensions, usually `[StarterKit]`.
+     * @default []
+     */
+    extensions: unknown[];
+}
+/**
+ * A rich text editor built on Tiptap: a `.rich-text-editor` holding a
+ * `<textarea>` and, usually, a `.toolbar` of `[data-command]` buttons.
+ *
+ * The textarea's value is the starting HTML. The component hides it, mounts
+ * the editor after it and writes the editor's HTML back on every change, so
+ * the textarea still submits with its form. A button's `data-command` names a
+ * Tiptap command and `data-attributes` holds its JSON argument. Buttons are
+ * disabled when their command cannot run, and `toggle*` commands report their
+ * state with `aria-pressed` and `.active`.
+ */
+export declare class RichTextEditor extends Component<RichTextEditorOptions> {
+    /** The Tiptap editor. */
+    editor: RichTextEditorInstance | null;
+    /** The form value. */
+    textarea: HTMLTextAreaElement | null;
+    /** The element the editor is mounted in. */
+    content: HTMLElement | null;
+    private _actions;
+    private _label;
+    constructor(el: HTMLElement, options: Partial<RichTextEditorOptions>);
+    static get defaults(): RichTextEditorOptions;
+    /**
+     * Initializes instance of RichTextEditor.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<RichTextEditorOptions>): RichTextEditor;
+    /**
+     * Initializes instances of RichTextEditor.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<RichTextEditorOptions>): RichTextEditor[];
+    static getInstance(el: HTMLElement): RichTextEditor;
+    destroy(): void;
+    private _handleClick;
+    private _handleLabelClick;
+    private _handleUpdate;
+    private _handleTransaction;
+}

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.12.0";
+export declare const version = "0.13.1";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';
@@ -15,6 +15,15 @@ export type * from './components/expandingCard';
 export type * from './components/carousel';
 export type * from './components/characterCounter';
 export type * from './components/chips';
+export type * from './components/lineChart';
+export type * from './components/columnChart';
+export type * from './components/barChart';
+export type * from './components/pieChart';
+export type * from './components/heatmapChart';
+export type * from './components/radarChart';
+export type * from './components/radialChart';
+export type * from './components/mixedChart';
+export type * from './components/questionnaire';
 export type * from './components/datepicker';
 export type * from './components/menu';
 export type * from './components/lightbox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -130,6 +130,9 @@
     "@fontsource/noto-sans": "^5.3.0",
     "@fontsource/roboto": "^5.3.0",
     "@playwright/test": "^1.56.0",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/starter-kit": "^3.31.4",
     "astro": "^7.2.8",
     "esbuild": "^0.28.2",
     "fallow": "^3.23.0",

package/src/sass/README.md

@@ -102,12 +102,9 @@ comparators, so each boundary is written once without fractional max-widths.
 each pair onto the live `--md-sys-color-<role>` name with `light-dark()`, in one
 `@each` over `$sys-color-roles`.
 
-The shipped seed is `#006A79`, a teal. It is chosen, not arbitrary: the error
-ramp is pinned at hue 27.7°, and both primary and tertiary (source + 62°) derive
-from the seed, so the seed has to keep both clear of red. Warm "appetising" hues
-(0–60°) put primary on top of error — ΔEok 0.07–0.12 against ~0.28 for teal.
-Green is avoided so it stays available for a "settled/paid" role, which Material
-does not supply. See the comment above `$md-source`.
+The shipped seed is `#c6a0f6`, named Mist Iris in the docs picker. The ramps
+derive their hues from this seed, with fixed chroma and tone values. The error
+ramp stays fixed when the seed changes.
 
 Setting `--md-source` re-themes the whole system at runtime, with no rebuild:
 

package/src/sass/abstracts/_index.scss

@@ -4,4 +4,4 @@
 @forward "elevation";    // z-depth() mixin
 @forward "breakpoints";  // $breakpoints map + bp-up()/bp-down()/bp-between()
 @forward "variables";    // Sass-time knobs: grid, font sizes, flow text
-@forward "mixins";       // btn-*, focus-visible
+@forward "mixins";       // btn-*, focus-visible, chart()