@expressivecss/expressive 0.3.0 → 0.4.0

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

@@ -1,5 +1,5 @@
 import { Dropdown, DropdownOptions } from './dropdown';
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface AutocompleteData {
     /**
      * A primitive value that can be converted to string.
@@ -98,7 +98,7 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
     static getInstance(el: HTMLElement): Autocomplete;
     /**
      * The three-dot loading indicator, parsed once and cloned thereafter.
@@ -146,16 +146,9 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
      * @param open Option to conditionally open dropdown
      */
     setMenuItems(menuItems: AutocompleteData[], selected?: number[] | string[], open?: boolean): void;
-    /**
-     * Sets selected values.
-     * @deprecated @see https://github.com/materializecss/materialize/issues/552
-     * @param entries
-     */
-    setValues(entries: AutocompleteData[]): void;
     /**
      * Select a specific autocomplete option via id-property.
      * @param id The id of a data-entry.
      */
     selectOption(id: number | string): void;
-    selectOptions(ids: []): void;
 }

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from "../core/component";
+import { Component, BaseOptions, InitElements, InitElement, Openable } from "../core/component";
 export interface FloatingActionButtonOptions extends BaseOptions {
     /**
      * Direction FAB menu opens.
@@ -30,7 +30,7 @@ export declare class FloatingActionButton extends Component<FloatingActionButton
     constructor(el: HTMLElement, options: Partial<FloatingActionButtonOptions>);
     static get defaults(): FloatingActionButtonOptions;
     static init(el: HTMLElement, options?: Partial<FloatingActionButtonOptions>): FloatingActionButton;
-    static init(els: InitElements<MElement>, options?: Partial<FloatingActionButtonOptions>): FloatingActionButton[];
+    static init(els: InitElements<InitElement>, options?: Partial<FloatingActionButtonOptions>): FloatingActionButton[];
     static getInstance(el: HTMLElement): FloatingActionButton;
     destroy(): void;
     /**

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

@@ -1,9 +1,7 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
 export interface CardsOptions extends BaseOptions {
     onOpen: (el: Element) => void;
     onClose: (el: Element) => void;
-    inDuration: number;
-    outDuration: number;
 }
 /**
  * What counts as a card.
@@ -13,11 +11,10 @@ export interface CardsOptions extends BaseOptions {
  * actually initializes, so the AutoInit entry was dead while `Cards.Init()`
  * quietly did the work through the selector below.
  */
-export declare const CARDS_SELECTOR = ".card, article:has(> aside), article:has(.card-reveal)";
+export declare const CARDS_SELECTOR = "article:has(> aside)";
 export declare class Cards extends Component<CardsOptions> implements Openable {
     isOpen: boolean;
     private readonly cardReveal;
-    private readonly initialOverflow;
     private _activators;
     private cardRevealClose;
     constructor(el: HTMLElement, options: Partial<CardsOptions>);
@@ -33,7 +30,7 @@ export declare class Cards extends Component<CardsOptions> implements Openable {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<CardsOptions>): Cards[];
+    static init(els: InitElements<InitElement>, options?: Partial<CardsOptions>): Cards[];
     static getInstance(el: HTMLElement): Cards;
     /**
      * {@inheritDoc}

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface CarouselOptions extends BaseOptions {
     /**
      * Transition duration in milliseconds (coverflow). Snap mode uses CSS.
@@ -27,7 +27,7 @@ export interface CarouselOptions extends BaseOptions {
     numVisible: number;
     /**
      * Linear snap track instead of 3D coverflow.
-     * Also implied by `.flat` / `.carousel-slider`.
+     * Also implied by `.flat`.
      * @default false
      */
     fullWidth: boolean;
@@ -86,7 +86,7 @@ export declare class Carousel extends Component<CarouselOptions> {
     constructor(el: HTMLElement, options: Partial<CarouselOptions>);
     static get defaults(): CarouselOptions;
     static init(el: HTMLElement, options?: Partial<CarouselOptions>): Carousel;
-    static init(els: InitElements<MElement>, options?: Partial<CarouselOptions>): Carousel[];
+    static init(els: InitElements<InitElement>, options?: Partial<CarouselOptions>): Carousel[];
     static getInstance(el: HTMLElement): Carousel;
     destroy(): void;
     private _collectItems;

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

@@ -1,8 +1,6 @@
-import { Component, InitElements, MElement } from '../core/component';
-export interface BaseOptions {
-}
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 type InputElement = HTMLInputElement | HTMLTextAreaElement;
-export declare class CharacterCounter extends Component<object> {
+export declare class CharacterCounter extends Component<BaseOptions> {
     el: InputElement;
     /** Stores the reference to the counter HTML element. */
     counterEl: HTMLSpanElement;
@@ -23,7 +21,7 @@ export declare class CharacterCounter extends Component<object> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<InputElement | MElement>, options?: Partial<BaseOptions>): CharacterCounter[];
+    static init(els: InitElements<InputElement | InitElement>, options?: Partial<BaseOptions>): CharacterCounter[];
     static getInstance(el: InputElement): CharacterCounter;
     destroy(): void;
     _setupEventHandlers(): void;

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

@@ -1,5 +1,5 @@
 import { Autocomplete, AutocompleteOptions } from './autocomplete';
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface ChipData {
     /**
      * Unique identifier.
@@ -96,7 +96,7 @@ export declare class Chips extends Component<ChipsOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<ChipsOptions>): Chips[];
+    static init(els: InitElements<InitElement>, options?: Partial<ChipsOptions>): Chips[];
     static getInstance(el: HTMLElement): Chips;
     getData(): ChipData[];
     destroy(): void;

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

@@ -1,25 +1,13 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface CollapsibleOptions extends BaseOptions {
     /**
      * If accordion versus collapsible. When omitted, `.expandable` on the
      * element turns accordion off. `<details>` with the same `name` already
-     * exclusive-open in the browser; this option is the switch for the
-     * `<ul>/<li>` alias and assigns `name` when it is missing.
+     * exclusive-open in the browser; this option assigns `name` when it
+     * is missing.
      * @default true
      */
     accordion: boolean;
-    /**
-     * @deprecated Duration is CSS (`--md-comp-collapsible-duration`).
-     * Accepted so existing init calls keep compiling, and ignored.
-     * @default 300
-     */
-    inDuration: number;
-    /**
-     * @deprecated Duration is CSS (`--md-comp-collapsible-duration`).
-     * Accepted so existing init calls keep compiling, and ignored.
-     * @default 300
-     */
-    outDuration: number;
     /**
      * Callback function called before collapsible is opened.
      * @default null
@@ -42,9 +30,8 @@ export interface CollapsibleOptions extends BaseOptions {
     onCloseEnd: (el: Element) => void;
 }
 /**
- * Collapsible. Open/close is HTML (`<details>` / `[open]`, or `.active` on
- * the `<li>` alias). Height is CSS. This class is the public API, accordion
- * for the alias, and aria on non-native headers.
+ * Collapsible. Open/close is HTML (`<details>` / `[open]`). Height is CSS.
+ * This class is the public API and accordion `name` assignment.
  */
 export declare class Collapsible extends Component<CollapsibleOptions> {
     private _items;
@@ -64,7 +51,7 @@ export declare class Collapsible extends Component<CollapsibleOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
+    static init(els: InitElements<InitElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
     static getInstance(el: HTMLElement): Collapsible;
     destroy(): void;
     /**
@@ -81,15 +68,11 @@ export declare class Collapsible extends Component<CollapsibleOptions> {
     private _setupItems;
     private _isOpen;
     private _setOpen;
-    private _headerOf;
     private _wrapDetailsBodies;
     private _unwrapDetailsBodies;
     private _bodyOf;
-    private _syncAria;
     private _setupEventHandlers;
     private _removeEventHandlers;
-    private _handleClick;
-    private _handleKeydown;
     private _handleToggle;
     private _notify;
     private _durationMs;

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

@@ -1,4 +1,4 @@
-import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../core/component';
+import { BaseOptions, Component, I18nOptions, InitElements, InitElement } from '../core/component';
 export interface DateI18nOptions extends I18nOptions {
     previousMonth: string;
     nextMonth: string;
@@ -142,10 +142,6 @@ export interface DatepickerOptions extends BaseOptions {
      * @default null
      */
     onSelect: ((selectedDate: Date) => void) | null;
-    /**
-     * Callback function when Datepicker is closed.
-     * @default null
-     */
     /**
      * Callback function when Datepicker HTML is refreshed.
      * @default null
@@ -234,7 +230,7 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<DatepickerOptions>): Datepicker[];
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<DatepickerOptions>): Datepicker[];
     /**
      * Escape a value for interpolation into the calendar markup.
      *
@@ -392,6 +388,4 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     _finishSelection: () => void;
     _confirm: () => void;
     _cancel: () => void;
-    open(): this;
-    close(): this;
 }

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
 export interface DropdownOptions extends BaseOptions {
     /**
      * Defines the edge the menu is aligned to.
@@ -99,7 +99,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<DropdownOptions>): Dropdown[];
+    static init(els: InitElements<InitElement>, options?: Partial<DropdownOptions>): Dropdown[];
     static getInstance(el: HTMLElement): Dropdown;
     destroy(): void;
     _setupEventHandlers(): void;
@@ -113,6 +113,15 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
     _handleTriggerKeydown: (e: KeyboardEvent) => void;
     _handleDocumentTouchmove: (e: TouchEvent) => void;
     _handleDropdownClick: (e: MouseEvent) => void;
+    private _isSubmenuTriggerClick;
+    private _setupSubmenus;
+    private _toggleSubmenu;
+    private _syncSubmenuAria;
+    private _handleSubmenuAlign;
+    private _alignSubmenu;
+    private _closeSubmenus;
+    private _containingSubmenu;
+    private _focusedRow;
     _handleDropdownKeydown: (e: KeyboardEvent) => void;
     _handleWindowResize: () => void;
     _resetFilterQuery: () => void;

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

@@ -8,7 +8,6 @@ export { Collapsible } from './collapsible';
 export { Datepicker } from './datepicker';
 export { Dropdown } from './dropdown';
 export { Lightbox } from './lightbox';
-export { Modal } from './modal';
 export { Parallax } from './parallax';
 export { Pushpin } from './pushpin';
 export { Range } from './range';

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

@@ -1,4 +1,4 @@
-import { BaseOptions, Component, InitElements, MElement } from '../core/component';
+import { BaseOptions, Component, InitElements, InitElement } from '../core/component';
 export interface LightboxOptions extends BaseOptions {
     /**
      * Transition in duration in milliseconds.
@@ -66,7 +66,7 @@ export declare class Lightbox extends Component<LightboxOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<LightboxOptions>): Lightbox[];
+    static init(els: InitElements<InitElement>, options?: Partial<LightboxOptions>): Lightbox[];
     static getInstance(el: HTMLElement): Lightbox;
     destroy(): void;
     private _setupEventHandlers;

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

@@ -1,11 +1,5 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface ParallaxOptions extends BaseOptions {
-    /**
-     * @deprecated Motion is CSS (`animation-timeline: view()`). This value
-     * is accepted so existing AutoInit calls keep compiling, and is ignored.
-     * @default 0
-     */
-    responsiveThreshold: number;
 }
 /**
  * Parallax. The effect is CSS (see components/_parallax.scss). This class
@@ -16,7 +10,7 @@ export declare class Parallax extends Component<ParallaxOptions> {
     constructor(el: HTMLElement, options: Partial<ParallaxOptions>);
     static get defaults(): ParallaxOptions;
     static init(el: HTMLElement, options?: Partial<ParallaxOptions>): Parallax;
-    static init(els: InitElements<MElement>, options?: Partial<ParallaxOptions>): Parallax[];
+    static init(els: InitElements<InitElement>, options?: Partial<ParallaxOptions>): Parallax[];
     static getInstance(el: HTMLElement): Parallax;
     destroy(): void;
 }

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface PushpinOptions extends BaseOptions {
     /**
      * The distance in pixels from the top of the page where
@@ -40,7 +40,7 @@ export declare class Pushpin extends Component<PushpinOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<PushpinOptions>): Pushpin[];
+    static init(els: InitElements<InitElement>, options?: Partial<PushpinOptions>): Pushpin[];
     static getInstance(el: HTMLElement): Pushpin;
     destroy(): void;
     static _updateElements(): void;

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface RangeOptions extends BaseOptions {
 }
 export declare class Range extends Component<RangeOptions> {
@@ -19,7 +19,7 @@ export declare class Range extends Component<RangeOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<RangeOptions>): Range[];
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<RangeOptions>): Range[];
     static getInstance(el: HTMLInputElement): Range;
     destroy(): void;
     _setupEventHandlers(): void;

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

@@ -45,10 +45,6 @@ export declare const AUTO_INIT_COMPONENTS: {
         component: typeof Components.Lightbox;
         selector: string;
     };
-    Modal: {
-        component: typeof Components.Modal;
-        selector: string;
-    };
     Parallax: {
         component: typeof Components.Parallax;
         selector: string;

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

@@ -1,12 +1,8 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface ScrollSpyOptions extends BaseOptions {
     /**
-     * Throttle of scroll handler.
-     * @default 100
-     */
-    throttle: number;
-    /**
-     * Offset for centering element when scrolled to.
+     * Offset used as IntersectionObserver rootMargin and as
+     * `--md-comp-scrollspy-offset` (scroll-margin on the section).
      * @default 200
      */
     scrollOffset: number;
@@ -16,62 +12,42 @@ export interface ScrollSpyOptions extends BaseOptions {
      */
     activeClass: string;
     /**
-     * Used to find active element.
+     * Returns a CSS selector for the TOC link. The default is unused: links
+     * are found by comparing `a[href^="#"]` to `#id`. A custom function
+     * still runs through `querySelector` (escape any author id yourself).
      * @default id => 'a[href="#' + id + '"]'
      */
     getActiveElement: (id: string) => string;
     /**
-     * Used to keep last top element active even if
-     * scrollbar goes outside of scrollspy elements.
-     *
-     * If there is no last top element,
-     * then the active one will be the first element.
-     *
+     * If true, keep the last section above the viewport active when nothing
+     * intersects. If there is no such section, the first one stays active.
      * @default false
      */
     keepTopElementActive: boolean;
-    /**
-     * Used to set scroll animation duration in milliseconds.
-     * @default null (browser's native animation implementation/duration)
-     */
-    animationDuration: number | null;
 }
+/**
+ * ScrollSpy. IntersectionObserver decides which section is current.
+ * Hash links are left to the browser (`scroll-margin` + `scroll-behavior`).
+ */
 export declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _elements: ScrollSpy[];
-    static _count: number;
-    static _increment: number;
-    static _elementsInView: ScrollSpy[];
-    static _visibleElements: HTMLElement[];
-    static _ticks: number;
-    static _keptTopActiveElement: HTMLElement | null;
-    private static _throttledScroll;
-    private static _throttledResize;
-    private tickId;
-    private id;
+    private static _observer;
+    private static _ratios;
+    private static _active;
     constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
     static get defaults(): ScrollSpyOptions;
-    /**
-     * Initializes instance of ScrollSpy.
-     * @param el HTML element.
-     * @param options Component options.
-     */
     static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
-    /**
-     * Initializes instances of ScrollSpy.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<MElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
+    static init(els: InitElements<InitElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
     static getInstance(el: HTMLElement): ScrollSpy;
     destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    static _handleTriggerClick: (e: MouseEvent) => void;
-    static _handleWindowScroll: () => void;
-    static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
-    _enter(): void;
-    _exit(): void;
-    private static _resetKeptTopActiveElement;
-    private static _getDistanceToViewport;
-    private static _smoothScrollIntoView;
+    private static _ensureObserver;
+    private static _onIntersect;
+    private static _syncActive;
+    private static _nearestAbove;
+    private static _clearActive;
+    /**
+     * Default lookup compares href attributes (no interpolated selector).
+     * A custom getActiveElement still returns a selector.
+     */
+    static _linkFor(id: string, options: ScrollSpyOptions): Element | null;
 }

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

@@ -1,5 +1,5 @@
 import { Dropdown, DropdownOptions } from './dropdown';
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface FormSelectOptions extends BaseOptions {
     /**
      * Classes to be added to the select wrapper element.
@@ -25,16 +25,18 @@ export declare class FormSelect extends Component<FormSelectOptions> {
      * Is "null", if not detected.
      */
     labelEl: HTMLLabelElement;
-    /** Dropdown UL element. */
-    dropdownOptions: HTMLUListElement;
+    /** Dropdown menu element. */
+    dropdownOptions: HTMLElement;
     /** Text input that shows current selected option. */
     input: HTMLInputElement;
     /** Instance of the dropdown plugin for this select. */
     dropdown: Dropdown;
-    /** The select wrapper element. */
+    /** The field wrapper around the native select. */
     wrapper: HTMLDivElement;
     selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
     private _values;
+    private _createdWrapper;
+    private _originalLabelFor;
     nativeTabIndex: number;
     constructor(el: HTMLSelectElement, options: FormSelectOptions);
     static get defaults(): FormSelectOptions;
@@ -49,7 +51,7 @@ export declare class FormSelect extends Component<FormSelectOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLSelectElement | MElement>, options?: Partial<FormSelectOptions>): FormSelect[];
+    static init(els: InitElements<HTMLSelectElement | InitElement>, options?: Partial<FormSelectOptions>): FormSelect[];
     static getInstance(el: HTMLElement): FormSelect;
     destroy(): void;
     /**
@@ -57,18 +59,30 @@ export declare class FormSelect extends Component<FormSelectOptions> {
      *
      * Assigning `select.value` from script fires no `change` event, so nothing
      * else syncs the visible input text or the `.selected` state on the virtual
-     * options. Call this after mutating the underlying select programmatically.
+     * options. Adding or removing `<option>`s also requires this — the menu is
+     * rebuilt from the native list, the field and Dropdown instance stay put.
      */
     refresh(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
+    private _setupOptionHandlers;
+    private _removeOptionHandlers;
     _handleSelectChange: () => void;
     _handleOptionKeydown: (e: KeyboardEvent) => void;
     _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;
+    private _handleOptionFocus;
     _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
     _selectOptionElement(virtualOption: HTMLElement): void;
     _handleInputClick: () => void;
     _setupDropdown(): void;
+    private _setupWrapper;
+    private _hideNativeSelect;
+    private _buildInput;
+    private _buildCaret;
+    private _initDropdown;
+    private _nativeOptions;
+    private _buildOptions;
+    private _rebuildOptions;
     _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void;
     _removeDropdown(): void;
     _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement;