@expressivecss/expressive 0.16.0 → 0.17.0

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

@@ -44,9 +44,8 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     private _createdWrapper;
     private _originalLabels;
     private _labelPlaceholder;
-    private _form;
-    private _resetTimer;
     private _validationMessage;
+    private _bindReset;
     nativeTabIndex: number;
     private _searchable;
     protected _searchInput: HTMLInputElement;
@@ -68,7 +67,6 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     refresh(): void;
     private _restoreOptionFocus;
     _setupEventHandlers(): void;
-    private _bindForm;
     protected _setupOptionHandlers(): void;
     _handleSelectChange: () => void;
     private _handleInvalid;

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

@@ -35,6 +35,8 @@ export declare class ShowMore extends Component<ShowMoreOptions> {
     destroy(): void;
     /** Records what destroy() restores, then points the button at the text. */
     private _wire;
+    /** Whether the constructor found the text and the button, and wired them. */
+    private get _wired();
     private _toggle;
     /**
      * Hides the button while the clamped text fits. Open text keeps it. So does

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

@@ -13,7 +13,6 @@ export declare class Slider extends Component<SliderOptions> {
     destroy(): void;
     _set(el: HTMLElement, name: string, value: string): void;
     _setupEventHandlers(): void;
-    _handleFormReset: () => void;
     _handleRangeChange: () => void;
     _handleRangePointerDown: (e: PointerEvent) => void;
     _handleRangeInput: () => void;

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

@@ -129,6 +129,12 @@ export declare class Snackbar {
      * would otherwise hold the queue for good.
      */
     private static _dropDetached;
+    /**
+     * Ends a snackbar a replacement cuts short, at once, with the events and
+     * callback a dismissal has: they used to be skipped, so code waiting on
+     * completeCallback never heard. One already dismissing has fired `close`.
+     */
+    private _evict;
     /** Throws now, rather than when the snackbar shows, if `snackbarId` names nothing. */
     private _requireBody;
     /** Whether the body a snackbar shows is still there: its own, or `snackbarId`'s. */
@@ -149,7 +155,7 @@ export declare class Snackbar {
      */
     private static _containerIn;
     static get defaults(): SnackbarOptions;
-    static getInstance(el: HTMLElement): Snackbar;
+    static getInstance(el: Element): Snackbar | undefined;
     static _createContainer(root?: HTMLElement | ShadowRoot): void;
     static _removeContainer(): void;
     static _onDragStart(e: PointerEvent): void;

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

@@ -144,14 +144,14 @@ export declare class Tabs extends Component<TabsOptions> {
     private _notifyShow;
     _setupNormalTabs(): void;
     _setTabsAndTabWidth(): void;
-    _calcRightPos(el: any): number;
-    _calcLeftPos(el: any): number;
+    _calcRightPos(el: HTMLElement): number;
+    _calcLeftPos(el: HTMLElement): number;
     /**
      * Recalculate tab indicator position. This is useful when
      * the indicator position is not correct.
      */
     updateTabIndicator(): void;
-    _animateIndicator(prevIndex: any): void;
+    _animateIndicator(prevIndex: number): void;
     /**
      * Show tab content that corresponds to the tab with the id.
      * @param tabId The id of the tab that you want to switch to.

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

@@ -148,14 +148,14 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     hours: number;
     minutes: number;
     seconds: number;
-    /** The selected time. */
+    /** The selected time as the clock shows it. On a 12-hour clock `amOrPm` says which half of the day. */
     time: string;
     /**
      * If the time is AM or PM on twelve-hour clock.
      * @default 'PM'
      */
     amOrPm: 'AM' | 'PM';
-    static _template: any;
+    static _template: string;
     /** Whether this device exposes the Vibration API at all. */
     canVibrate: boolean;
     _canvas: HTMLElement;
@@ -169,6 +169,8 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     toggleViewTimer: ReturnType<typeof setTimeout>;
     vibrateTimer: ReturnType<typeof setTimeout>;
     private _autoSubmitTimer;
+    /** Clear was pressed in a picker that writes on Ok. */
+    private _clearPending;
     private _clockResetTimer;
     private displayPlugin;
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
@@ -252,7 +254,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
      */
     showView: (view: Views, delay?: number) => void;
     private _cancelClockReset;
-    resetClock(delay: any): void;
+    resetClock(delay: number | null): void;
     /**
      * Enter in the hour or minute field commits the typed time. The dial ticks
      * are pointer targets only, and under `autoSubmit` there is no Ok button,
@@ -293,8 +295,8 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     /** A field's value `step` on, with hours on the 24-hour clock. */
     private _stepValue;
     _inputFromTextField: (event: Event) => void;
-    drawClockFromTimeInput(value: any, isHours: any): void;
-    setHand(x: any, y: any, roundBy5?: boolean): void;
+    drawClockFromTimeInput(value: number, isHours: boolean): void;
+    setHand(x: number, y: number, roundBy5?: boolean): void;
     /** The hour at a dial position, 0 to 12 from the top. */
     private _hourAt;
     setClockAttributes(radian: number, radius: number): void;
@@ -304,11 +306,18 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     /** Normalize every field, as leaving it would. */
     private _formatFields;
     setHoursDefault(): void;
-    done: (clearValue?: any) => void;
+    done: (clearValue?: boolean | null) => void;
     /** `HH:MM` for the given hour, or `HH:MM:SS` with a seconds field. */
     private _clockTime;
     private _inputValue;
     confirm: () => void;
     cancel: () => void;
+    /**
+     * Empties the input. A picker with Ok and Cancel, which a modal always is,
+     * empties its fields and waits for Ok, so Cancel keeps the value: it used to
+     * write the empty value at once.
+     */
     clear: () => void;
+    /** Choosing a time after Clear, anywhere but the footer, keeps a time after all. */
+    private _keepTime;
 }

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

@@ -114,7 +114,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
     /** Hide at once, without exitDelay, for an explicit dismissal. */
     private _hideNow;
     _setExitDelayTimeout(): void;
-    _setEnterDelayTimeout(isManual: any): void;
+    _setEnterDelayTimeout(isManual: boolean): void;
     _positionTooltip(): void;
     _place(): void;
     _anchorTooltip(): void;

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

@@ -31,8 +31,8 @@ export declare class TreemapChart extends LineChart {
     show(index: number): void;
     /** The first row from `index` on with a rectangle, or -1. */
     private _drawnFrom;
-    /** Adds the row's share of the whole to its cell in the tooltip, as the pie chart writes it. */
-    private _share;
+    /** The row's share of the whole, written as the pie chart writes it. */
+    protected _share(row: number): string;
     /**
      * Opens the tooltip from the middle of the row's rectangle toward the
      * middle of the plot.

package/dist/types/core/component.d.ts

@@ -24,6 +24,11 @@ export interface NotifyOptions {
     detail?: unknown;
     current?: () => boolean;
 }
+/**
+ * `options` without its keys set to `undefined`, so those keep their
+ * defaults: `{ i18n: { tooShort: t.missing } }` must not erase a message.
+ */
+export declare const defined: <T extends object>(options: T) => T;
 /**
  * Base class implementation for Expressive components.
  */
@@ -67,10 +72,11 @@ export declare class Component<O extends BaseOptions> {
      */
     static get defaults(): BaseOptions;
     /**
-     * Retrieves the instance of the class it is called on for the given element.
+     * Retrieves the instance of the class it is called on for the given element,
+     * or undefined before init and after destroy.
      * @param el Associated HTML Element.
      */
-    static getInstance<C extends ComponentClass>(this: C, el: HTMLElement): InstanceType<C>;
+    static getInstance<C extends ComponentClass>(this: C, el: Element): InstanceType<C> | undefined;
     /**
      * Runs an `on…` option callback, then fires `expressive:<type>` from the
      * element, so pages can listen instead of passing options. The callback gets
@@ -81,7 +87,7 @@ export declare class Component<O extends BaseOptions> {
      * is skipped once it does not, or once the instance is destroyed, and the
      * result says whether to carry on.
      */
-    protected _notify(type: string, callback?: Function | null, { args, detail, current }?: NotifyOptions): boolean;
+    protected _notify(type: string, callback?: ((...args: never[]) => unknown) | null, { args, detail, current }?: NotifyOptions): boolean;
     /**
      * Destroy plugin instance and teardown. A subclass tears down its own state
      * and calls this to remove its listeners and release the element.

package/dist/types/core/imageURL.d.ts

@@ -0,0 +1,2 @@
+/** Accept image URLs without allowing arbitrary URL schemes. */
+export declare function imageURL(value: string | null | undefined, base: string): string | undefined;

package/dist/types/core/utils.d.ts

@@ -1,5 +1,37 @@
 /** Sets an attribute, or removes it for null, as when restoring a value read with getAttribute. */
 export declare function restoreAttribute(el: Element, name: string, value: string | null): void;
+/**
+ * Reads text as one number, which currency or percent signs, grouping commas
+ * and a typographic minus may surround, or null for anything else. Charts and
+ * data tables read their cells with it.
+ */
+export declare function numberValue(raw: string): number | null;
+/**
+ * Where a field listens for its form's events. Neither formdata nor reset
+ * leaves a shadow root, so a field in one listens there. Otherwise the
+ * document, so the listener follows the field into another form.
+ */
+export declare function formEventScope(el: Element): Document | ShadowRoot;
+/**
+ * Runs `restored` after a reset of the field's form. The form restores its
+ * fields after the reset event, so it waits a task. It skips a cancelled
+ * reset, and a field whose listeners `signal` has removed since.
+ *
+ * It listens on the field's root, which hears a form the field moves into
+ * later, and on the form itself, which still hears it after the form moves
+ * into a shadow root. Reset does not leave a shadow root. The returned
+ * function binds both again, for a field that moved into another root;
+ * listeners already bound are not added twice.
+ */
+export declare function afterFormReset(el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, restored: () => void, signal: AbortSignal): () => void;
+/**
+ * Runs `restored(form)` a task after any form in the document resets, once
+ * the form has restored its fields, unless the reset was cancelled. For
+ * document-level behaviors; a component bound to one field uses afterFormReset.
+ */
+export declare function afterAnyFormReset(restored: (form: HTMLFormElement) => void): void;
+/** The focused element, followed down through open shadow roots. */
+export declare function deepActiveElement(root: Document | ShadowRoot): Element | null;
 /**
  * Fills a picker's footer: a Clear button, hidden unless `showClearBtn`,
  * then Cancel and Done unless the picker writes its value without them.
@@ -79,6 +111,12 @@ export declare class Utils {
      * element with no lookup of its own.
      */
     static getElementById(el: Node, id: string): HTMLElement;
+    /**
+     * `querySelector` against the tree `el` lives in, then the document, so a
+     * selector option finds an element in the same shadow root and still finds
+     * one outside it, such as `body`.
+     */
+    static querySelector(el: Node, selector: string): HTMLElement | null;
     /**
      * Adds or removes one name in an element's inline `anchor-name` list. A
      * trigger can anchor a Tooltip and a Menu at once, and writing the whole
@@ -123,7 +161,7 @@ export declare class Utils {
      * it climbs out of shadow roots too, so a press on a shadow-root icon inside
      * a light-DOM button still finds the button.
      */
-    static closestInPath(event: Event, selector: string): Element | null;
+    static closestInPath<T extends Element = Element>(event: Event, selector: string): T | null;
     /**
      * Retrieves target element id from trigger.
      * @param trigger Trigger element.

package/dist/types/modular.d.ts

@@ -15,7 +15,7 @@ export { DataTables } from './behaviors/dataTables';
 export { TransferList } from './behaviors/transferList';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.16.0";
+export declare const version = "0.17.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';

package/dist/types/plugins/modalDisplayPlugin.d.ts

@@ -14,8 +14,15 @@ export declare class ModalDisplayPlugin {
     /** Whether the picker, not the user, is closing the dialog. */
     private _settled;
     private _opener;
+    /** Whether the press that ends in the next click started on the scrim. */
+    private _downOnScrim;
     constructor(el: HTMLElement, container: HTMLElement, onDismiss: () => void);
-    /** The picker fills the dialog, so a press on the dialog itself is on the scrim. */
+    private _handlePointerDown;
+    /**
+     * The picker fills the dialog, so a press on the dialog itself is on the
+     * scrim. A drag that starts on the picker, such as the timepicker hand,
+     * and ends on the scrim also clicks the dialog, so both ends must be there.
+     */
     private _handleClick;
     private _handleClose;
     destroy: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -73,7 +73,7 @@
     "build:css": "run-s build:fonts build:css:expanded build:css:min",
     "build:css:expanded": "sass src/sass/expressive.scss dist/css/expressive.css --style=expanded --source-map --load-path=src/sass",
     "build:css:min": "sass src/sass/expressive.scss dist/css/expressive.min.css --style=compressed --source-map --load-path=src/sass",
-    "build:js": "run-s build:js:esm build:js:cjs build:js:iife build:js:iife-min",
+    "build:js": "node scripts/build-js.mjs",
     "build:js:esm": "node scripts/build-esm.mjs",
     "build:js:cjs": "esbuild src/ts/index.ts --bundle --format=cjs --target=es2020 --outfile=dist/js/expressive.cjs --sourcemap",
     "build:js:iife": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap",
@@ -90,7 +90,7 @@
     "docs:build:astro": "astro build --root docs",
     "docs:preview": "astro preview --root docs",
     "docs:verify": "node scripts/verify-site.mjs",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "tsc -p tsconfig.json --noEmit && npm run typecheck:strict",
     "test": "run-s build:js build:css test:run",
     "test:run": "node --test",
     "test:browser": "run-s build:js build:css test:browser:run",
@@ -104,13 +104,14 @@
     "test:visual:report": "playwright show-report visual/report",
     "watch": "run-p watch:css watch:js",
     "watch:css": "sass --watch src/sass/expressive.scss:dist/css/expressive.css --style=expanded --source-map --load-path=src/sass",
-    "watch:js": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap --watch=forever",
+    "watch:js": "node scripts/build-js.mjs --watch",
     "check:generated": "node scripts/gen-semantics.mjs --check && node scripts/gen-expressivecss-skill.mjs --check",
     "verify": "run-s build typecheck test:run check:generated docs:build:astro docs:verify",
     "verify:packages": "node scripts/verify-packages.mjs",
     "test:node": "node scripts/run-node-tests.mjs",
     "record:capabilities": "node scripts/record-capability-evidence.mjs --record",
-    "verify:consumer": "node scripts/lib/verify-consumer.mjs"
+    "verify:consumer": "node scripts/lib/verify-consumer.mjs",
+    "typecheck:strict": "tsc -p tsconfig.strict.json"
   },
   "engines": {
     "node": ">=20"
@@ -145,6 +146,7 @@
     "smol-toml": "^1.8.0",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "yaml": "^2.9.1"
   }
 }