@expressivecss/expressive 0.1.0-alpha.3 → 0.1.0

package/dist/{js → types}/components/autocomplete.d.ts

@@ -1,5 +1,5 @@
 import { Dropdown, DropdownOptions } from './dropdown';
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface AutocompleteData {
     /**
      * A primitive value that can be converted to string.
@@ -100,6 +100,15 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
      */
     static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
     static getInstance(el: HTMLElement): Autocomplete;
+    /**
+     * The three-dot loading indicator, parsed once and cloned thereafter.
+     *
+     * It is shown on every input change, and it used to be assigned as an
+     * innerHTML string each time - re-running the HTML parser over the same
+     * fixed markup on every keystroke.
+     */
+    private static _loadingTemplate;
+    private static _loadingIndicator;
     destroy(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;

package/dist/{js → types}/components/buttons.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from "../foundation/component";
+import { Component, BaseOptions, InitElements, MElement, Openable } from "../core/component";
 export interface FloatingActionButtonOptions extends BaseOptions {
     /**
      * Direction FAB menu opens.
@@ -25,6 +25,8 @@ export declare class FloatingActionButton extends Component<FloatingActionButton
     private _menu;
     private _floatingBtns;
     private _floatingBtnsReverse;
+    /** Toolbar-mode backdrop, kept so closing can take it back out. */
+    private _backdrop;
     offsetY: number;
     offsetX: number;
     btnBottom: number;
@@ -63,4 +65,12 @@ export declare class FloatingActionButton extends Component<FloatingActionButton
     _animateInFAB(): void;
     _animateOutFAB(): void;
     _animateInToolbar(): void;
+    /**
+     * Reverse {@link _animateInToolbar}.
+     *
+     * Closing used to only unbind the listeners, leaving the FAB stretched
+     * across the viewport with its backdrop still in the DOM - and a fresh
+     * backdrop appended on every subsequent open.
+     */
+    _animateOutToolbar(): void;
 }

package/dist/{js → types}/components/cards.d.ts

@@ -1,10 +1,19 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement, 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.
+ *
+ * Shared with `components/registry.ts` rather than written out twice: the
+ * registry used to claim `.cards`, which matches nothing this component
+ * 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 class Cards extends Component<CardsOptions> implements Openable {
     isOpen: boolean;
     private readonly cardReveal;

package/dist/{js → types}/components/carousel.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface CarouselOptions extends BaseOptions {
     /**
      * Transition duration in milliseconds.
@@ -62,19 +62,18 @@ export declare class Carousel extends Component<CarouselOptions> {
     dim: number;
     _indicators: HTMLUListElement;
     count: number;
-    xform: string;
     verticalDragged: boolean;
     reference: number;
     referenceY: number;
     velocity: number;
     frame: number;
     timestamp: number;
-    ticker: string | number | NodeJS.Timeout;
+    ticker: ReturnType<typeof setTimeout>;
     amplitude: number;
     /** The index of the center carousel item. */
     center: number;
     imageHeight: number;
-    scrollingTimeout: number | NodeJS.Timeout;
+    scrollingTimeout: ReturnType<typeof setTimeout>;
     oneTimeCallback: (current: Element, dragged: boolean) => void | null;
     constructor(el: HTMLElement, options: Partial<CarouselOptions>);
     static get defaults(): CarouselOptions;
@@ -94,7 +93,7 @@ export declare class Carousel extends Component<CarouselOptions> {
     destroy(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
-    _handleThrottledResize: () => void;
+    _handleThrottledResize: (...args: unknown[]) => any;
     _handleCarouselTap: (e: MouseEvent | TouchEvent) => void;
     _handleCarouselDrag: (e: MouseEvent | TouchEvent) => boolean;
     _handleCarouselRelease: (e: MouseEvent | TouchEvent) => boolean;

package/dist/{js/forms/character-counter.d.ts → types/components/characterCounter.d.ts}

@@ -1,4 +1,4 @@
-import { Component, InitElements, MElement } from '../foundation/component';
+import { Component, InitElements, MElement } from '../core/component';
 export interface BaseOptions {
 }
 type InputElement = HTMLInputElement | HTMLTextAreaElement;

package/dist/{js → types}/components/chips.d.ts

@@ -1,5 +1,5 @@
 import { Autocomplete, AutocompleteOptions } from './autocomplete';
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface ChipData {
     /**
      * Unique identifier.

package/dist/{js → types}/components/collapsible.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface CollapsibleOptions extends BaseOptions {
     /**
      * If accordion versus collapsible.

package/dist/{js → types}/components/datepicker.d.ts

@@ -1,4 +1,4 @@
-import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../foundation/component';
+import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../core/component';
 export interface DateI18nOptions extends I18nOptions {
     previousMonth: string;
     nextMonth: string;
@@ -212,6 +212,14 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     private _m;
     private displayPlugin;
     private footer;
+    /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
+    private _drawDepth;
+    /** Whether a draw was requested while batching. */
+    private _drawDirty;
+    /** Shape of the currently rendered controls; see {@link _controlsCacheKey}. */
+    private _controlsKey;
+    /** id linking the controls element to the table's aria-labelledby. */
+    private _randId;
     static _template: string;
     constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>);
     static get defaults(): DatepickerOptions;
@@ -227,6 +235,16 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      * @param options Component options.
      */
     static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<DatepickerOptions>): Datepicker[];
+    /**
+     * Escape a value for interpolation into the calendar markup.
+     *
+     * `draw()` assembles the calendar as an HTML string, so every value that is
+     * not a number this class computed itself has to go through here. In
+     * practice that means the i18n strings: month and weekday names are the one
+     * part of a datepicker that routinely comes from a translation file, and a
+     * translation file is as trustworthy as whatever wrote it.
+     */
+    static _escape(value: unknown): string;
     static _isDate(obj: any): boolean;
     static _isWeekend(date: any): boolean;
     /**
@@ -243,7 +261,8 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     destroySelects(): void;
     _insertHTMLIntoDOM(): void;
     /**
-     * Renders the date input format
+     * Renders the date input format into the optional `.datepicker-format` hint
+     * next to the input, if the consumer provided one.
      */
     _renderDateInputFormat(el: HTMLInputElement): void;
     /**
@@ -310,8 +329,50 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     renderTable(opts: any, data: any, randId: any): string;
     renderHead(opts: any): string;
     renderBody(rows: any): string;
+    /**
+     * Whether each month arrow is usable at this position in the allowed range.
+     *
+     * Depends on the month, which is deliberately *not* part of the controls
+     * cache key - so the reuse path has to recompute and reapply it.
+     */
+    private _arrowState;
+    /**
+     * Identifies the *shape* of the controls - everything that changes which
+     * options the month and year selects contain, as opposed to which one is
+     * picked. While this is stable the two FormSelects can be left alone.
+     *
+     * `year` is in the key because a numeric `yearRange` centres the year list
+     * on the displayed year, so paging across a year boundary does change it.
+     */
+    private _controlsCacheKey;
     renderTitle(instance: any, c: any, year: any, month: any, refYear: any, randId: any): string;
+    /**
+     * Run `fn`, collapsing every draw it triggers into a single one at the end.
+     *
+     * A single input click reaches draw() three times - once through
+     * setDateFromInput -> setDate -> gotoDate, once directly, and once through
+     * the trailing gotoDate - and each one destroys two FormSelect instances,
+     * reparses the calendar and builds two fresh FormSelects. The three calls
+     * cannot simply be deleted: the direct draw() is what covers an empty input
+     * (setDate bails before drawing when the value does not parse), and the
+     * trailing gotoDate re-centres on a date validateDate may have clamped to
+     * minDate/maxDate. So they are collected instead of removed.
+     *
+     * Deliberately synchronous: the constructor and callers read calendarEl
+     * immediately after init(), which a microtask-deferred draw would leave
+     * empty.
+     */
+    private _batchDraws;
     draw(): void;
+    /** Tear down the two FormSelects and render the controls from scratch. */
+    private _rebuildControls;
+    /**
+     * Keep the existing controls and bring them up to date: the selected month,
+     * and the arrow states, which depend on the month rather than on the key.
+     */
+    private _reuseControls;
+    /** Replace just the day grid, leaving the controls in place. */
+    private _renderCalendarTable;
     _setupEventHandlers(): void;
     _setupVariables(): void;
     _removeEventHandlers(): void;

package/dist/{js → types}/components/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
 export interface DropdownOptions extends BaseOptions {
     /**
      * Defines the edge the menu is aligned to.
@@ -85,7 +85,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
     /** The index of the item focused. */
     focusedIndex: number;
     filterQuery: string[];
-    filterTimeout: NodeJS.Timeout | number;
+    filterTimeout: ReturnType<typeof setTimeout>;
     constructor(el: HTMLElement, options: Partial<DropdownOptions>);
     static get defaults(): DropdownOptions;
     /**
@@ -125,7 +125,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
         x: number;
         y: number;
         verticalAlignment: string;
-        horizontalAlignment: "right" | "left";
+        horizontalAlignment: "left" | "right";
         height: number;
         width: number;
     };

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

@@ -0,0 +1,23 @@
+export { Autocomplete } from './autocomplete';
+export { FloatingActionButton } from './buttons';
+export { Cards } from './cards';
+export { Carousel } from './carousel';
+export { CharacterCounter } from './characterCounter';
+export { Chips } from './chips';
+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';
+export { ScrollSpy } from './scrollspy';
+export { FormSelect } from './select';
+export { Sidenav } from './sidenav';
+export { Slider } from './slider';
+export { Tabs } from './tabs';
+export { TapTarget } from './tapTarget';
+export { Timepicker } from './timepicker';
+export { Toast } from './toasts';
+export { Tooltip } from './tooltip';

package/dist/{js/components/materialbox.d.ts → types/components/lightbox.d.ts}

@@ -1,5 +1,5 @@
-import { BaseOptions, Component, InitElements, MElement } from '../foundation/component';
-export interface MaterialboxOptions extends BaseOptions {
+import { BaseOptions, Component, InitElements, MElement } from '../core/component';
+export interface LightboxOptions extends BaseOptions {
     /**
      * Transition in duration in milliseconds.
      * @default 275
@@ -11,30 +11,30 @@ export interface MaterialboxOptions extends BaseOptions {
      */
     outDuration: number;
     /**
-     * Callback function called before materialbox is opened.
+     * Callback function called before lightbox is opened.
      * @default null
      */
     onOpenStart: (el: Element) => void;
     /**
-     * Callback function called after materialbox is opened.
+     * Callback function called after lightbox is opened.
      * @default null
      */
     onOpenEnd: (el: Element) => void;
     /**
-     * Callback function called before materialbox is closed.
+     * Callback function called before lightbox is closed.
      * @default null
      */
     onCloseStart: (el: Element) => void;
     /**
-     * Callback function called after materialbox is closed.
+     * Callback function called after lightbox is closed.
      * @default null
      */
     onCloseEnd: (el: Element) => void;
 }
-export declare class Materialbox extends Component<MaterialboxOptions> {
-    /** If the materialbox overlay is showing. */
+export declare class Lightbox extends Component<LightboxOptions> {
+    /** If the lightbox overlay is showing. */
     overlayActive: boolean;
-    /** If the materialbox is no longer being animated. */
+    /** If the lightbox is no longer being animated. */
     doneAnimating: boolean;
     /** Caption, if specified. */
     caption: string;
@@ -53,27 +53,27 @@ export declare class Materialbox extends Component<MaterialboxOptions> {
     private attrHeight;
     private _overlay;
     private _photoCaption;
-    constructor(el: HTMLElement, options: Partial<MaterialboxOptions>);
-    static get defaults(): MaterialboxOptions;
+    constructor(el: HTMLElement, options: Partial<LightboxOptions>);
+    static get defaults(): LightboxOptions;
     /**
-     * Initializes instance of MaterialBox.
+     * Initializes instance of Lightbox.
      * @param el HTML element.
      * @param options Component options.
      */
-    static init(el: HTMLElement, options?: Partial<MaterialboxOptions>): Materialbox;
+    static init(el: HTMLElement, options?: Partial<LightboxOptions>): Lightbox;
     /**
-     * Initializes instances of MaterialBox.
+     * Initializes instances of Lightbox.
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<MaterialboxOptions>): Materialbox[];
-    static getInstance(el: HTMLElement): Materialbox;
+    static init(els: InitElements<MElement>, options?: Partial<LightboxOptions>): Lightbox[];
+    static getInstance(el: HTMLElement): Lightbox;
     destroy(): void;
     private _setupEventHandlers;
     private _removeEventHandlers;
-    private _handleMaterialboxClick;
-    private _handleMaterialboxKeypress;
-    private _handleMaterialboxToggle;
+    private _handleLightboxClick;
+    private _handleLightboxKeypress;
+    private _handleLightboxToggle;
     private _handleWindowScroll;
     private _handleWindowResize;
     private _handleWindowEscape;
@@ -87,11 +87,11 @@ export declare class Materialbox extends Component<MaterialboxOptions> {
     private _addOverlay;
     private _removeOverlay;
     /**
-     * Open materialbox.
+     * Open lightbox.
      */
     open: () => void;
     /**
-     * Close materialbox.
+     * Close lightbox.
      */
     close: () => void;
 }

package/dist/{js → types}/components/modal.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface ModalOptions extends BaseOptions {
     opacity: number;
     inDuration: number;

package/dist/{js → types}/components/parallax.d.ts

@@ -1,5 +1,4 @@
-import { Utils } from '../foundation/utils';
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface ParallaxOptions extends BaseOptions {
     /**
      * The minimum width of the screen, in pixels, where the parallax functionality starts working.
@@ -11,8 +10,8 @@ export declare class Parallax extends Component<ParallaxOptions> {
     private _enabled;
     private _img;
     static _parallaxes: Parallax[];
-    static _handleScrollThrottled: () => Utils;
-    static _handleWindowResizeThrottled: () => Utils;
+    static _handleWindowResizeThrottled: (...args: unknown[]) => void;
+    private static _scrollFrame;
     constructor(el: HTMLElement, options: Partial<ParallaxOptions>);
     static get defaults(): ParallaxOptions;
     /**
@@ -30,11 +29,18 @@ export declare class Parallax extends Component<ParallaxOptions> {
     static getInstance(el: HTMLElement): Parallax;
     destroy(): void;
     static _handleScroll(): void;
+    /**
+     * Coalesce scroll events onto animation frames.
+     *
+     * The handler reads layout and then writes a transform, so running it more
+     * than once per frame is wasted work - and the 5ms throttle it replaces was
+     * short enough to let several run per frame anyway.
+     */
+    static _requestScrollUpdate: () => void;
     static _handleWindowResize(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
     _setupStyles(): void;
     _handleImageLoad: () => void;
-    private _offset;
     _updateParallax(): void;
 }

package/dist/{js → types}/components/pushpin.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface PushpinOptions extends BaseOptions {
     /**
      * The distance in pixels from the top of the page where

package/dist/{js/forms → types/components}/range.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface RangeOptions extends BaseOptions {
 }
 export declare class Range extends Component<RangeOptions> {
@@ -31,8 +31,8 @@ export declare class Range extends Component<RangeOptions> {
     _handleRangeBlurMouseoutTouchleave: () => void;
     _setupThumb(): void;
     _removeThumb(): void;
-    _showRangeBubble(): void;
-    _calcRangeOffset(): number;
+    _isVertical(): boolean;
+    _sync(): void;
     /**
      * Initializes every range input in the current document.
      */

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

@@ -0,0 +1,107 @@
+import * as Components from './index';
+/**
+ * The components `AutoInit()` starts, in initialization order, with the
+ * selector each one claims.
+ *
+ * This table is the single source of truth: the options type below and the
+ * init calls in `AutoInit()` are both derived from it, so wiring up a new
+ * auto-initialized component means adding one line here (plus its export in
+ * ./index.ts) - not four hand-synchronized edits that fail silently when one
+ * is forgotten.
+ *
+ * A component that should only ever be constructed explicitly (Toast,
+ * CharacterCounter, Range, ...) simply stays out of this table.
+ */
+export declare const AUTO_INIT_COMPONENTS: {
+    Autocomplete: {
+        component: typeof Components.Autocomplete;
+        selector: string;
+    };
+    Cards: {
+        component: typeof Components.Cards;
+        selector: string;
+    };
+    Carousel: {
+        component: typeof Components.Carousel;
+        selector: string;
+    };
+    Chips: {
+        component: typeof Components.Chips;
+        selector: string;
+    };
+    Collapsible: {
+        component: typeof Components.Collapsible;
+        selector: string;
+    };
+    Datepicker: {
+        component: typeof Components.Datepicker;
+        selector: string;
+    };
+    Dropdown: {
+        component: typeof Components.Dropdown;
+        selector: string;
+    };
+    Lightbox: {
+        component: typeof Components.Lightbox;
+        selector: string;
+    };
+    Modal: {
+        component: typeof Components.Modal;
+        selector: string;
+    };
+    Parallax: {
+        component: typeof Components.Parallax;
+        selector: string;
+    };
+    Pushpin: {
+        component: typeof Components.Pushpin;
+        selector: string;
+    };
+    ScrollSpy: {
+        component: typeof Components.ScrollSpy;
+        selector: string;
+    };
+    FormSelect: {
+        component: typeof Components.FormSelect;
+        selector: string;
+    };
+    Sidenav: {
+        component: typeof Components.Sidenav;
+        selector: string;
+    };
+    Tabs: {
+        component: typeof Components.Tabs;
+        selector: string;
+    };
+    TapTarget: {
+        component: typeof Components.TapTarget;
+        selector: string;
+    };
+    Timepicker: {
+        component: typeof Components.Timepicker;
+        selector: string;
+    };
+    Tooltip: {
+        component: typeof Components.Tooltip;
+        selector: string;
+    };
+    FloatingActionButton: {
+        component: typeof Components.FloatingActionButton;
+        selector: string;
+    };
+};
+type Registry = typeof AUTO_INIT_COMPONENTS;
+/**
+ * Per-component options accepted by {@link AutoInit}, derived from the table
+ * above - each key takes that component's own options type.
+ */
+export type AutoInitOptions = {
+    [K in keyof Registry]?: Partial<InstanceType<Registry[K]['component']>['options']>;
+};
+/**
+ * Automatically initialize components.
+ * @param context Root element to initialize. Defaults to `document.body`.
+ * @param options Options for each component.
+ */
+export declare function AutoInit(context?: HTMLElement, options?: Partial<AutoInitOptions>): void;
+export {};

package/dist/{js → types}/components/scrollspy.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface ScrollSpyOptions extends BaseOptions {
     /**
      * Throttle of scroll handler.
@@ -44,6 +44,8 @@ export declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _visibleElements: HTMLElement[];
     static _ticks: number;
     static _keptTopActiveElement: HTMLElement | null;
+    private static _throttledScroll;
+    private static _throttledResize;
     private tickId;
     private id;
     constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
@@ -64,17 +66,12 @@ export declare class ScrollSpy extends Component<ScrollSpyOptions> {
     destroy(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
-    _handleThrottledResize: () => void;
-    _handleTriggerClick: (e: MouseEvent) => void;
-    _handleWindowScroll: () => void;
-    static _offset(el: any): {
-        top: number;
-        left: number;
-    };
+    static _handleTriggerClick: (e: MouseEvent) => void;
+    static _handleWindowScroll: () => void;
     static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
     _enter(): void;
     _exit(): void;
-    private _resetKeptTopActiveElementIfNeeded;
+    private static _resetKeptTopActiveElement;
     private static _getDistanceToViewport;
     private static _smoothScrollIntoView;
 }

package/dist/{js/forms → types/components}/select.d.ts

@@ -1,5 +1,5 @@
-import { Dropdown, DropdownOptions } from '../components/dropdown';
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Dropdown, DropdownOptions } from './dropdown';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface FormSelectOptions extends BaseOptions {
     /**
      * Classes to be added to the select wrapper element.
@@ -52,9 +52,18 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     static init(els: InitElements<HTMLSelectElement | MElement>, options?: Partial<FormSelectOptions>): FormSelect[];
     static getInstance(el: HTMLElement): FormSelect;
     destroy(): void;
+    /**
+     * Re-read the native `<select>` and update the generated dropdown to match.
+     *
+     * 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.
+     */
+    refresh(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
     _handleSelectChange: () => void;
+    _handleOptionKeydown: (e: KeyboardEvent) => void;
     _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;
     _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
     _selectOptionElement(virtualOption: HTMLElement): void;

package/dist/{js → types}/components/sidenav.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
 export interface SidenavOptions extends BaseOptions {
     /**
      * Side of screen on which Sidenav appears.

package/dist/{js → types}/components/slider.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+import { Component, BaseOptions, InitElements, MElement } from '../core/component';
 export interface SliderOptions extends BaseOptions {
     /**
      * Set to false to hide slide indicators.
@@ -42,7 +42,7 @@ export interface SliderOptions extends BaseOptions {
 export declare class Slider extends Component<SliderOptions> {
     /** Index of current slide. */
     activeIndex: number;
-    interval: string | number | NodeJS.Timeout;
+    interval: ReturnType<typeof setTimeout>;
     eventPause: boolean;
     _slider: HTMLUListElement;
     _slides: HTMLLIElement[];
@@ -70,6 +70,7 @@ export declare class Slider extends Component<SliderOptions> {
     destroy(): void;
     private _setupEventHandlers;
     private _removeEventHandlers;
+    private _handleVisibilityChange;
     private _handleIndicatorClick;
     private _handleAutoPauseHover;
     private _handleAutoPauseFocus;