@expressivecss/expressive 0.11.0 → 0.13.1

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/components/slider.d.ts

@@ -23,6 +23,7 @@ export declare class Slider extends Component<SliderOptions> {
     static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<SliderOptions>): Slider[];
     static getInstance(el: HTMLInputElement): Slider;
     destroy(): void;
+    _set(el: HTMLElement, name: string, value: string): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
     _handleRangeChange: () => void;

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

@@ -92,6 +92,11 @@ export declare class Snackbar {
     velocityX: number;
     private _dismissed;
     private _returnFocus;
+    private _events;
+    private _restoreElement;
+    private _transitionTimer;
+    private _dismissTimer;
+    private _focusTimer;
     static _snackbars: Snackbar[];
     static _container: HTMLElement;
     static _draggedSnackbar: Snackbar;
@@ -116,6 +121,7 @@ export declare class Snackbar {
      */
     static dismissAll(): void;
     _createSnackbar(): HTMLElement;
+    private _remove;
     _animateIn(): void;
     /**
      * Arm the dismissal timer.

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

@@ -41,7 +41,7 @@ export interface TimepickerOptions extends BaseOptions {
      *  Autosubmit timepicker selection to input field
      *  @default true
      */
-    autoSubmit: true;
+    autoSubmit: boolean;
     /**
      * Default time to set on the timepicker 'now' or '13:14'.
      * @default 'now';
@@ -143,6 +143,8 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     g: Element;
     toggleViewTimer: ReturnType<typeof setTimeout>;
     vibrateTimer: ReturnType<typeof setTimeout>;
+    private _autoSubmitTimer;
+    private _clockResetTimer;
     private displayPlugin;
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
     private _clockBuilt;
@@ -202,6 +204,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
      * @param delay
      */
     showView: (view: Views, delay?: number) => void;
+    private _cancelClockReset;
     resetClock(delay: any): void;
     _inputFromTextField: (event: Event) => void;
     drawClockFromTimeInput(value: any, isHours: any): void;

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

@@ -70,6 +70,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
     private _exitDelayTimeout;
     private _enterDelayTimeout;
     private _animationTimeout;
+    private _originalContent;
     xMovement: number;
     yMovement: number;
     constructor(el: HTMLElement, options: Partial<TooltipOptions>);
@@ -96,7 +97,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
     /**
      * Show tooltip.
      */
-    open: (isManual: boolean) => void;
+    open: (isManual?: boolean) => void;
     /**
      * Hide tooltip.
      */

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.11.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.11.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()