@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (154) hide show
  1. package/LICENSE +82 -2
  2. package/README.md +153 -43
  3. package/dist/css/expressive.css +7121 -9658
  4. package/dist/css/expressive.css.map +1 -0
  5. package/dist/css/expressive.min.css +1 -1
  6. package/dist/css/expressive.min.css.map +1 -0
  7. package/dist/js/expressive.cjs +7521 -0
  8. package/dist/js/expressive.cjs.map +7 -0
  9. package/dist/js/expressive.js +7383 -8099
  10. package/dist/js/expressive.js.map +7 -1
  11. package/dist/js/expressive.min.js +75 -1
  12. package/dist/js/expressive.min.js.map +7 -1
  13. package/dist/js/expressive.mjs +7292 -7998
  14. package/dist/js/expressive.mjs.map +7 -1
  15. package/dist/types/behaviors/dialogs.d.ts +25 -0
  16. package/dist/{js → types}/components/autocomplete.d.ts +10 -1
  17. package/dist/{js → types}/components/buttons.d.ts +11 -1
  18. package/dist/{js → types}/components/cards.d.ts +10 -1
  19. package/dist/{js → types}/components/carousel.d.ts +4 -5
  20. package/dist/{js/forms/character-counter.d.ts → types/components/characterCounter.d.ts} +1 -1
  21. package/dist/{js → types}/components/chips.d.ts +1 -1
  22. package/dist/{js → types}/components/collapsible.d.ts +1 -1
  23. package/dist/{js → types}/components/datepicker.d.ts +63 -2
  24. package/dist/{js → types}/components/dropdown.d.ts +3 -3
  25. package/dist/types/components/index.d.ts +23 -0
  26. package/dist/{js/components/materialbox.d.ts → types/components/lightbox.d.ts} +21 -21
  27. package/dist/{js → types}/components/modal.d.ts +1 -1
  28. package/dist/{js → types}/components/parallax.d.ts +11 -5
  29. package/dist/{js → types}/components/pushpin.d.ts +1 -1
  30. package/dist/{js/forms → types/components}/range.d.ts +3 -3
  31. package/dist/types/components/registry.d.ts +107 -0
  32. package/dist/{js → types}/components/scrollspy.d.ts +6 -9
  33. package/dist/{js/forms → types/components}/select.d.ts +11 -2
  34. package/dist/{js → types}/components/sidenav.d.ts +1 -1
  35. package/dist/{js → types}/components/slider.d.ts +3 -2
  36. package/dist/{js → types}/components/tabs.d.ts +3 -2
  37. package/dist/{js/components/tap-target.d.ts → types/components/tapTarget.d.ts} +2 -2
  38. package/dist/{js → types}/components/timepicker.d.ts +13 -5
  39. package/dist/{js/components/toast.d.ts → types/components/toasts.d.ts} +28 -4
  40. package/dist/{js → types}/components/tooltip.d.ts +2 -2
  41. package/dist/types/core/bounding.d.ts +6 -0
  42. package/dist/{js/foundation → types/core}/component.d.ts +1 -1
  43. package/dist/types/core/edges.d.ts +6 -0
  44. package/dist/{js/foundation → types/core}/utils.d.ts +21 -14
  45. package/dist/types/index.d.ts +7 -0
  46. package/dist/{js/plugins/docked-display.d.ts → types/plugins/dockedDisplayPlugin.d.ts} +7 -0
  47. package/package.json +60 -36
  48. package/src/sass/README.md +200 -0
  49. package/src/sass/abstracts/_breakpoints.scss +69 -0
  50. package/src/sass/abstracts/_elevation.scss +34 -0
  51. package/src/sass/abstracts/_index.scss +7 -0
  52. package/src/sass/abstracts/_mixins.scss +171 -0
  53. package/src/sass/abstracts/_variables.scss +57 -0
  54. package/src/{scss/layout/_table.scss → sass/base/_global.scss} +64 -2
  55. package/src/{scss/layout → sass/base}/_grid.scss +6 -6
  56. package/src/sass/base/_index.scss +6 -0
  57. package/src/{scss/foundation → sass/base}/_normalize.scss +51 -139
  58. package/src/sass/base/_typography.scss +90 -0
  59. package/src/sass/components/_badges.scss +77 -0
  60. package/src/{scss → sass}/components/_breadcrumb.scss +2 -0
  61. package/src/sass/components/_buttons.scss +407 -0
  62. package/src/sass/components/_cards.scss +328 -0
  63. package/src/{scss → sass}/components/_carousel.scss +5 -3
  64. package/src/sass/components/_chips.scss +140 -0
  65. package/src/sass/components/_collapsible.scss +81 -0
  66. package/src/{scss → sass}/components/_collection.scss +2 -2
  67. package/src/{scss/components/_date-picker.scss → sass/components/_datepicker.scss} +51 -44
  68. package/src/sass/components/_docked-display.scss +11 -0
  69. package/src/sass/components/_dropdown.scss +129 -0
  70. package/src/{scss/components/_material-icons.scss → sass/components/_icons-material-design.scss} +2 -0
  71. package/src/sass/components/_index.scss +35 -0
  72. package/src/{scss/components/_material-box.scss → sass/components/_lightbox.scss} +6 -4
  73. package/src/sass/components/_modal.scss +208 -0
  74. package/src/sass/components/_navbar.scss +345 -0
  75. package/src/{scss/layout/_footer.scss → sass/components/_page-footer.scss} +7 -6
  76. package/src/{scss → sass}/components/_pagination.scss +4 -3
  77. package/src/{scss → sass}/components/_parallax.scss +4 -1
  78. package/src/{scss → sass}/components/_preloader.scss +19 -97
  79. package/src/{scss → sass}/components/_pulse.scss +2 -0
  80. package/src/sass/components/_pushpin.scss +11 -0
  81. package/src/{scss → sass}/components/_sidenav.scss +99 -82
  82. package/src/{scss → sass}/components/_slider.scss +3 -1
  83. package/src/{scss/components/_table-of-contents.scss → sass/components/_table_of_contents.scss} +2 -0
  84. package/src/sass/components/_tabs.scss +232 -0
  85. package/src/{scss/components/_tap-target.scss → sass/components/_tapTarget.scss} +24 -22
  86. package/src/{scss/components/_time-picker.scss → sass/components/_timepicker.scss} +56 -56
  87. package/src/sass/components/_toast.scss +260 -0
  88. package/src/sass/components/_toolbar.scss +192 -0
  89. package/src/sass/components/_tooltip.scss +166 -0
  90. package/src/{scss → sass}/components/_transitions.scss +4 -4
  91. package/src/sass/components/forms/_checkboxes.scss +288 -0
  92. package/src/sass/components/forms/_fieldset.scss +128 -0
  93. package/src/{scss → sass/components}/forms/_file-input.scss +11 -9
  94. package/src/{scss → sass/components}/forms/_index.scss +2 -0
  95. package/src/sass/components/forms/_input-fields.scss +326 -0
  96. package/src/sass/components/forms/_radio-buttons.scss +190 -0
  97. package/src/sass/components/forms/_range.scss +310 -0
  98. package/src/sass/components/forms/_select.scss +103 -0
  99. package/src/sass/components/forms/_switches.scss +239 -0
  100. package/src/sass/expressive.scss +60 -0
  101. package/src/sass/tokens/_index.scss +4 -0
  102. package/src/sass/tokens/_reference.scss +265 -0
  103. package/src/sass/tokens/_theme.scss +49 -0
  104. package/src/sass/utilities/_helpers.scss +63 -0
  105. package/src/sass/utilities/_index.scss +8 -0
  106. package/src/{scss → sass}/utilities/_spacing.scss +4 -3
  107. package/src/sass/utilities/_typescale.scss +45 -0
  108. package/src/sass/utilities/_visibility.scss +63 -0
  109. package/src/sass/utilities/_z-depth.scss +18 -0
  110. package/dist/js/components/index.d.ts +0 -21
  111. package/dist/js/forms/index.d.ts +0 -4
  112. package/dist/js/foundation/index.d.ts +0 -2
  113. package/dist/js/index.d.ts +0 -52
  114. package/dist/js/plugins/index.d.ts +0 -1
  115. package/src/scss/components/_appbar.scss +0 -454
  116. package/src/scss/components/_badges.scss +0 -77
  117. package/src/scss/components/_buttons.scss +0 -412
  118. package/src/scss/components/_cards.scss +0 -267
  119. package/src/scss/components/_chips.scss +0 -147
  120. package/src/scss/components/_collapsible.scss +0 -84
  121. package/src/scss/components/_dropdown.scss +0 -98
  122. package/src/scss/components/_index.scss +0 -28
  123. package/src/scss/components/_modal.scss +0 -84
  124. package/src/scss/components/_tabs.scss +0 -176
  125. package/src/scss/components/_toast.scss +0 -70
  126. package/src/scss/components/_tooltip.scss +0 -49
  127. package/src/scss/components/_video.scss +0 -15
  128. package/src/scss/expressive.scss +0 -7
  129. package/src/scss/forms/_checkboxes.scss +0 -199
  130. package/src/scss/forms/_input-fields.scss +0 -360
  131. package/src/scss/forms/_radio-buttons.scss +0 -114
  132. package/src/scss/forms/_range.scss +0 -148
  133. package/src/scss/forms/_select.scss +0 -108
  134. package/src/scss/forms/_switches.scss +0 -127
  135. package/src/scss/foundation/_base.scss +0 -71
  136. package/src/scss/foundation/_color-palette.scss +0 -402
  137. package/src/scss/foundation/_index.scss +0 -10
  138. package/src/scss/foundation/_mixins.scss +0 -198
  139. package/src/scss/foundation/_motion.scss +0 -70
  140. package/src/scss/foundation/_shape.scss +0 -30
  141. package/src/scss/foundation/_state-layers.scss +0 -68
  142. package/src/scss/foundation/_theme.scss +0 -238
  143. package/src/scss/foundation/_tokens.scss +0 -511
  144. package/src/scss/foundation/_variables.scss +0 -57
  145. package/src/scss/layout/_index.scss +0 -3
  146. package/src/scss/utilities/_a11y.scss +0 -77
  147. package/src/scss/utilities/_elevation.scss +0 -63
  148. package/src/scss/utilities/_helpers.scss +0 -50
  149. package/src/scss/utilities/_index.scss +0 -7
  150. package/src/scss/utilities/_responsive.scss +0 -62
  151. package/src/scss/utilities/_typography.scss +0 -115
  152. /package/dist/{js/forms → types/behaviors}/forms.d.ts +0 -0
  153. /package/dist/{js/components → types/behaviors}/waves.d.ts +0 -0
  154. /package/src/{scss → sass}/utilities/_colors.scss +0 -0
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Light-dismiss for native `<dialog>` elements.
3
+ *
4
+ * `showModal()` does not close on a backdrop tap. A naive `click` listener
5
+ * on the dialog (where `::backdrop` events retarget) also fires when the
6
+ * user starts a gesture on the dialog and releases on the scrim — selecting
7
+ * text, missing a button, dragging a thumb. Both ends of the pointer
8
+ * gesture must land outside the dialog's border box.
9
+ *
10
+ * Default is on. Opt out with `closedby="none"` or `closedby="closerequest"`.
11
+ * If the browser already honours `closedby="any"`, we leave that alone.
12
+ */
13
+ export declare class Dialogs {
14
+ private static _down;
15
+ static Init(): void;
16
+ static _onPointerDown(event: PointerEvent): void;
17
+ static _onPointerUp(event: PointerEvent): void;
18
+ static _onPointerCancel(): void;
19
+ /** Backdrop hits retarget to the dialog itself, never a child. */
20
+ private static _backdropDialog;
21
+ private static _outside;
22
+ private static _isPrimaryPress;
23
+ private static _lightDismissible;
24
+ private static _closedBy;
25
+ }
@@ -1,5 +1,5 @@
1
1
  import { Dropdown, DropdownOptions } from './dropdown';
2
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
2
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
3
3
  export interface AutocompleteData {
4
4
  /**
5
5
  * A primitive value that can be converted to string.
@@ -100,6 +100,15 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
100
100
  */
101
101
  static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
102
102
  static getInstance(el: HTMLElement): Autocomplete;
103
+ /**
104
+ * The three-dot loading indicator, parsed once and cloned thereafter.
105
+ *
106
+ * It is shown on every input change, and it used to be assigned as an
107
+ * innerHTML string each time - re-running the HTML parser over the same
108
+ * fixed markup on every keystroke.
109
+ */
110
+ private static _loadingTemplate;
111
+ private static _loadingIndicator;
103
112
  destroy(): void;
104
113
  _setupEventHandlers(): void;
105
114
  _removeEventHandlers(): void;
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement, Openable } from "../foundation/component";
1
+ import { Component, BaseOptions, InitElements, MElement, Openable } from "../core/component";
2
2
  export interface FloatingActionButtonOptions extends BaseOptions {
3
3
  /**
4
4
  * Direction FAB menu opens.
@@ -25,6 +25,8 @@ export declare class FloatingActionButton extends Component<FloatingActionButton
25
25
  private _menu;
26
26
  private _floatingBtns;
27
27
  private _floatingBtnsReverse;
28
+ /** Toolbar-mode backdrop, kept so closing can take it back out. */
29
+ private _backdrop;
28
30
  offsetY: number;
29
31
  offsetX: number;
30
32
  btnBottom: number;
@@ -63,4 +65,12 @@ export declare class FloatingActionButton extends Component<FloatingActionButton
63
65
  _animateInFAB(): void;
64
66
  _animateOutFAB(): void;
65
67
  _animateInToolbar(): void;
68
+ /**
69
+ * Reverse {@link _animateInToolbar}.
70
+ *
71
+ * Closing used to only unbind the listeners, leaving the FAB stretched
72
+ * across the viewport with its backdrop still in the DOM - and a fresh
73
+ * backdrop appended on every subsequent open.
74
+ */
75
+ _animateOutToolbar(): void;
66
76
  }
@@ -1,10 +1,19 @@
1
- import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
2
2
  export interface CardsOptions extends BaseOptions {
3
3
  onOpen: (el: Element) => void;
4
4
  onClose: (el: Element) => void;
5
5
  inDuration: number;
6
6
  outDuration: number;
7
7
  }
8
+ /**
9
+ * What counts as a card.
10
+ *
11
+ * Shared with `components/registry.ts` rather than written out twice: the
12
+ * registry used to claim `.cards`, which matches nothing this component
13
+ * actually initializes, so the AutoInit entry was dead while `Cards.Init()`
14
+ * quietly did the work through the selector below.
15
+ */
16
+ export declare const CARDS_SELECTOR = ".card, article:has(> aside), article:has(.card-reveal)";
8
17
  export declare class Cards extends Component<CardsOptions> implements Openable {
9
18
  isOpen: boolean;
10
19
  private readonly cardReveal;
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
2
2
  export interface CarouselOptions extends BaseOptions {
3
3
  /**
4
4
  * Transition duration in milliseconds.
@@ -62,19 +62,18 @@ export declare class Carousel extends Component<CarouselOptions> {
62
62
  dim: number;
63
63
  _indicators: HTMLUListElement;
64
64
  count: number;
65
- xform: string;
66
65
  verticalDragged: boolean;
67
66
  reference: number;
68
67
  referenceY: number;
69
68
  velocity: number;
70
69
  frame: number;
71
70
  timestamp: number;
72
- ticker: string | number | NodeJS.Timeout;
71
+ ticker: ReturnType<typeof setTimeout>;
73
72
  amplitude: number;
74
73
  /** The index of the center carousel item. */
75
74
  center: number;
76
75
  imageHeight: number;
77
- scrollingTimeout: number | NodeJS.Timeout;
76
+ scrollingTimeout: ReturnType<typeof setTimeout>;
78
77
  oneTimeCallback: (current: Element, dragged: boolean) => void | null;
79
78
  constructor(el: HTMLElement, options: Partial<CarouselOptions>);
80
79
  static get defaults(): CarouselOptions;
@@ -94,7 +93,7 @@ export declare class Carousel extends Component<CarouselOptions> {
94
93
  destroy(): void;
95
94
  _setupEventHandlers(): void;
96
95
  _removeEventHandlers(): void;
97
- _handleThrottledResize: () => void;
96
+ _handleThrottledResize: (...args: unknown[]) => any;
98
97
  _handleCarouselTap: (e: MouseEvent | TouchEvent) => void;
99
98
  _handleCarouselDrag: (e: MouseEvent | TouchEvent) => boolean;
100
99
  _handleCarouselRelease: (e: MouseEvent | TouchEvent) => boolean;
@@ -1,4 +1,4 @@
1
- import { Component, InitElements, MElement } from '../foundation/component';
1
+ import { Component, InitElements, MElement } from '../core/component';
2
2
  export interface BaseOptions {
3
3
  }
4
4
  type InputElement = HTMLInputElement | HTMLTextAreaElement;
@@ -1,5 +1,5 @@
1
1
  import { Autocomplete, AutocompleteOptions } from './autocomplete';
2
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
2
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
3
3
  export interface ChipData {
4
4
  /**
5
5
  * Unique identifier.
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
2
2
  export interface CollapsibleOptions extends BaseOptions {
3
3
  /**
4
4
  * If accordion versus collapsible.
@@ -1,4 +1,4 @@
1
- import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../foundation/component';
1
+ import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../core/component';
2
2
  export interface DateI18nOptions extends I18nOptions {
3
3
  previousMonth: string;
4
4
  nextMonth: string;
@@ -212,6 +212,14 @@ export declare class Datepicker extends Component<DatepickerOptions> {
212
212
  private _m;
213
213
  private displayPlugin;
214
214
  private footer;
215
+ /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
216
+ private _drawDepth;
217
+ /** Whether a draw was requested while batching. */
218
+ private _drawDirty;
219
+ /** Shape of the currently rendered controls; see {@link _controlsCacheKey}. */
220
+ private _controlsKey;
221
+ /** id linking the controls element to the table's aria-labelledby. */
222
+ private _randId;
215
223
  static _template: string;
216
224
  constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>);
217
225
  static get defaults(): DatepickerOptions;
@@ -227,6 +235,16 @@ export declare class Datepicker extends Component<DatepickerOptions> {
227
235
  * @param options Component options.
228
236
  */
229
237
  static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<DatepickerOptions>): Datepicker[];
238
+ /**
239
+ * Escape a value for interpolation into the calendar markup.
240
+ *
241
+ * `draw()` assembles the calendar as an HTML string, so every value that is
242
+ * not a number this class computed itself has to go through here. In
243
+ * practice that means the i18n strings: month and weekday names are the one
244
+ * part of a datepicker that routinely comes from a translation file, and a
245
+ * translation file is as trustworthy as whatever wrote it.
246
+ */
247
+ static _escape(value: unknown): string;
230
248
  static _isDate(obj: any): boolean;
231
249
  static _isWeekend(date: any): boolean;
232
250
  /**
@@ -243,7 +261,8 @@ export declare class Datepicker extends Component<DatepickerOptions> {
243
261
  destroySelects(): void;
244
262
  _insertHTMLIntoDOM(): void;
245
263
  /**
246
- * Renders the date input format
264
+ * Renders the date input format into the optional `.datepicker-format` hint
265
+ * next to the input, if the consumer provided one.
247
266
  */
248
267
  _renderDateInputFormat(el: HTMLInputElement): void;
249
268
  /**
@@ -310,8 +329,50 @@ export declare class Datepicker extends Component<DatepickerOptions> {
310
329
  renderTable(opts: any, data: any, randId: any): string;
311
330
  renderHead(opts: any): string;
312
331
  renderBody(rows: any): string;
332
+ /**
333
+ * Whether each month arrow is usable at this position in the allowed range.
334
+ *
335
+ * Depends on the month, which is deliberately *not* part of the controls
336
+ * cache key - so the reuse path has to recompute and reapply it.
337
+ */
338
+ private _arrowState;
339
+ /**
340
+ * Identifies the *shape* of the controls - everything that changes which
341
+ * options the month and year selects contain, as opposed to which one is
342
+ * picked. While this is stable the two FormSelects can be left alone.
343
+ *
344
+ * `year` is in the key because a numeric `yearRange` centres the year list
345
+ * on the displayed year, so paging across a year boundary does change it.
346
+ */
347
+ private _controlsCacheKey;
313
348
  renderTitle(instance: any, c: any, year: any, month: any, refYear: any, randId: any): string;
349
+ /**
350
+ * Run `fn`, collapsing every draw it triggers into a single one at the end.
351
+ *
352
+ * A single input click reaches draw() three times - once through
353
+ * setDateFromInput -> setDate -> gotoDate, once directly, and once through
354
+ * the trailing gotoDate - and each one destroys two FormSelect instances,
355
+ * reparses the calendar and builds two fresh FormSelects. The three calls
356
+ * cannot simply be deleted: the direct draw() is what covers an empty input
357
+ * (setDate bails before drawing when the value does not parse), and the
358
+ * trailing gotoDate re-centres on a date validateDate may have clamped to
359
+ * minDate/maxDate. So they are collected instead of removed.
360
+ *
361
+ * Deliberately synchronous: the constructor and callers read calendarEl
362
+ * immediately after init(), which a microtask-deferred draw would leave
363
+ * empty.
364
+ */
365
+ private _batchDraws;
314
366
  draw(): void;
367
+ /** Tear down the two FormSelects and render the controls from scratch. */
368
+ private _rebuildControls;
369
+ /**
370
+ * Keep the existing controls and bring them up to date: the selected month,
371
+ * and the arrow states, which depend on the month rather than on the key.
372
+ */
373
+ private _reuseControls;
374
+ /** Replace just the day grid, leaving the controls in place. */
375
+ private _renderCalendarTable;
315
376
  _setupEventHandlers(): void;
316
377
  _setupVariables(): void;
317
378
  _removeEventHandlers(): void;
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
2
2
  export interface DropdownOptions extends BaseOptions {
3
3
  /**
4
4
  * Defines the edge the menu is aligned to.
@@ -85,7 +85,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
85
85
  /** The index of the item focused. */
86
86
  focusedIndex: number;
87
87
  filterQuery: string[];
88
- filterTimeout: NodeJS.Timeout | number;
88
+ filterTimeout: ReturnType<typeof setTimeout>;
89
89
  constructor(el: HTMLElement, options: Partial<DropdownOptions>);
90
90
  static get defaults(): DropdownOptions;
91
91
  /**
@@ -125,7 +125,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
125
125
  x: number;
126
126
  y: number;
127
127
  verticalAlignment: string;
128
- horizontalAlignment: "right" | "left";
128
+ horizontalAlignment: "left" | "right";
129
129
  height: number;
130
130
  width: number;
131
131
  };
@@ -0,0 +1,23 @@
1
+ export { Autocomplete } from './autocomplete';
2
+ export { FloatingActionButton } from './buttons';
3
+ export { Cards } from './cards';
4
+ export { Carousel } from './carousel';
5
+ export { CharacterCounter } from './characterCounter';
6
+ export { Chips } from './chips';
7
+ export { Collapsible } from './collapsible';
8
+ export { Datepicker } from './datepicker';
9
+ export { Dropdown } from './dropdown';
10
+ export { Lightbox } from './lightbox';
11
+ export { Modal } from './modal';
12
+ export { Parallax } from './parallax';
13
+ export { Pushpin } from './pushpin';
14
+ export { Range } from './range';
15
+ export { ScrollSpy } from './scrollspy';
16
+ export { FormSelect } from './select';
17
+ export { Sidenav } from './sidenav';
18
+ export { Slider } from './slider';
19
+ export { Tabs } from './tabs';
20
+ export { TapTarget } from './tapTarget';
21
+ export { Timepicker } from './timepicker';
22
+ export { Toast } from './toasts';
23
+ export { Tooltip } from './tooltip';
@@ -1,5 +1,5 @@
1
- import { BaseOptions, Component, InitElements, MElement } from '../foundation/component';
2
- export interface MaterialboxOptions extends BaseOptions {
1
+ import { BaseOptions, Component, InitElements, MElement } from '../core/component';
2
+ export interface LightboxOptions extends BaseOptions {
3
3
  /**
4
4
  * Transition in duration in milliseconds.
5
5
  * @default 275
@@ -11,30 +11,30 @@ export interface MaterialboxOptions extends BaseOptions {
11
11
  */
12
12
  outDuration: number;
13
13
  /**
14
- * Callback function called before materialbox is opened.
14
+ * Callback function called before lightbox is opened.
15
15
  * @default null
16
16
  */
17
17
  onOpenStart: (el: Element) => void;
18
18
  /**
19
- * Callback function called after materialbox is opened.
19
+ * Callback function called after lightbox is opened.
20
20
  * @default null
21
21
  */
22
22
  onOpenEnd: (el: Element) => void;
23
23
  /**
24
- * Callback function called before materialbox is closed.
24
+ * Callback function called before lightbox is closed.
25
25
  * @default null
26
26
  */
27
27
  onCloseStart: (el: Element) => void;
28
28
  /**
29
- * Callback function called after materialbox is closed.
29
+ * Callback function called after lightbox is closed.
30
30
  * @default null
31
31
  */
32
32
  onCloseEnd: (el: Element) => void;
33
33
  }
34
- export declare class Materialbox extends Component<MaterialboxOptions> {
35
- /** If the materialbox overlay is showing. */
34
+ export declare class Lightbox extends Component<LightboxOptions> {
35
+ /** If the lightbox overlay is showing. */
36
36
  overlayActive: boolean;
37
- /** If the materialbox is no longer being animated. */
37
+ /** If the lightbox is no longer being animated. */
38
38
  doneAnimating: boolean;
39
39
  /** Caption, if specified. */
40
40
  caption: string;
@@ -53,27 +53,27 @@ export declare class Materialbox extends Component<MaterialboxOptions> {
53
53
  private attrHeight;
54
54
  private _overlay;
55
55
  private _photoCaption;
56
- constructor(el: HTMLElement, options: Partial<MaterialboxOptions>);
57
- static get defaults(): MaterialboxOptions;
56
+ constructor(el: HTMLElement, options: Partial<LightboxOptions>);
57
+ static get defaults(): LightboxOptions;
58
58
  /**
59
- * Initializes instance of MaterialBox.
59
+ * Initializes instance of Lightbox.
60
60
  * @param el HTML element.
61
61
  * @param options Component options.
62
62
  */
63
- static init(el: HTMLElement, options?: Partial<MaterialboxOptions>): Materialbox;
63
+ static init(el: HTMLElement, options?: Partial<LightboxOptions>): Lightbox;
64
64
  /**
65
- * Initializes instances of MaterialBox.
65
+ * Initializes instances of Lightbox.
66
66
  * @param els HTML elements.
67
67
  * @param options Component options.
68
68
  */
69
- static init(els: InitElements<MElement>, options?: Partial<MaterialboxOptions>): Materialbox[];
70
- static getInstance(el: HTMLElement): Materialbox;
69
+ static init(els: InitElements<MElement>, options?: Partial<LightboxOptions>): Lightbox[];
70
+ static getInstance(el: HTMLElement): Lightbox;
71
71
  destroy(): void;
72
72
  private _setupEventHandlers;
73
73
  private _removeEventHandlers;
74
- private _handleMaterialboxClick;
75
- private _handleMaterialboxKeypress;
76
- private _handleMaterialboxToggle;
74
+ private _handleLightboxClick;
75
+ private _handleLightboxKeypress;
76
+ private _handleLightboxToggle;
77
77
  private _handleWindowScroll;
78
78
  private _handleWindowResize;
79
79
  private _handleWindowEscape;
@@ -87,11 +87,11 @@ export declare class Materialbox extends Component<MaterialboxOptions> {
87
87
  private _addOverlay;
88
88
  private _removeOverlay;
89
89
  /**
90
- * Open materialbox.
90
+ * Open lightbox.
91
91
  */
92
92
  open: () => void;
93
93
  /**
94
- * Close materialbox.
94
+ * Close lightbox.
95
95
  */
96
96
  close: () => void;
97
97
  }
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
2
2
  export interface ModalOptions extends BaseOptions {
3
3
  opacity: number;
4
4
  inDuration: number;
@@ -1,5 +1,4 @@
1
- import { Utils } from '../foundation/utils';
2
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
3
2
  export interface ParallaxOptions extends BaseOptions {
4
3
  /**
5
4
  * 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> {
11
10
  private _enabled;
12
11
  private _img;
13
12
  static _parallaxes: Parallax[];
14
- static _handleScrollThrottled: () => Utils;
15
- static _handleWindowResizeThrottled: () => Utils;
13
+ static _handleWindowResizeThrottled: (...args: unknown[]) => void;
14
+ private static _scrollFrame;
16
15
  constructor(el: HTMLElement, options: Partial<ParallaxOptions>);
17
16
  static get defaults(): ParallaxOptions;
18
17
  /**
@@ -30,11 +29,18 @@ export declare class Parallax extends Component<ParallaxOptions> {
30
29
  static getInstance(el: HTMLElement): Parallax;
31
30
  destroy(): void;
32
31
  static _handleScroll(): void;
32
+ /**
33
+ * Coalesce scroll events onto animation frames.
34
+ *
35
+ * The handler reads layout and then writes a transform, so running it more
36
+ * than once per frame is wasted work - and the 5ms throttle it replaces was
37
+ * short enough to let several run per frame anyway.
38
+ */
39
+ static _requestScrollUpdate: () => void;
33
40
  static _handleWindowResize(): void;
34
41
  _setupEventHandlers(): void;
35
42
  _removeEventHandlers(): void;
36
43
  _setupStyles(): void;
37
44
  _handleImageLoad: () => void;
38
- private _offset;
39
45
  _updateParallax(): void;
40
46
  }
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
2
2
  export interface PushpinOptions extends BaseOptions {
3
3
  /**
4
4
  * The distance in pixels from the top of the page where
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
2
2
  export interface RangeOptions extends BaseOptions {
3
3
  }
4
4
  export declare class Range extends Component<RangeOptions> {
@@ -31,8 +31,8 @@ export declare class Range extends Component<RangeOptions> {
31
31
  _handleRangeBlurMouseoutTouchleave: () => void;
32
32
  _setupThumb(): void;
33
33
  _removeThumb(): void;
34
- _showRangeBubble(): void;
35
- _calcRangeOffset(): number;
34
+ _isVertical(): boolean;
35
+ _sync(): void;
36
36
  /**
37
37
  * Initializes every range input in the current document.
38
38
  */
@@ -0,0 +1,107 @@
1
+ import * as Components from './index';
2
+ /**
3
+ * The components `AutoInit()` starts, in initialization order, with the
4
+ * selector each one claims.
5
+ *
6
+ * This table is the single source of truth: the options type below and the
7
+ * init calls in `AutoInit()` are both derived from it, so wiring up a new
8
+ * auto-initialized component means adding one line here (plus its export in
9
+ * ./index.ts) - not four hand-synchronized edits that fail silently when one
10
+ * is forgotten.
11
+ *
12
+ * A component that should only ever be constructed explicitly (Toast,
13
+ * CharacterCounter, Range, ...) simply stays out of this table.
14
+ */
15
+ export declare const AUTO_INIT_COMPONENTS: {
16
+ Autocomplete: {
17
+ component: typeof Components.Autocomplete;
18
+ selector: string;
19
+ };
20
+ Cards: {
21
+ component: typeof Components.Cards;
22
+ selector: string;
23
+ };
24
+ Carousel: {
25
+ component: typeof Components.Carousel;
26
+ selector: string;
27
+ };
28
+ Chips: {
29
+ component: typeof Components.Chips;
30
+ selector: string;
31
+ };
32
+ Collapsible: {
33
+ component: typeof Components.Collapsible;
34
+ selector: string;
35
+ };
36
+ Datepicker: {
37
+ component: typeof Components.Datepicker;
38
+ selector: string;
39
+ };
40
+ Dropdown: {
41
+ component: typeof Components.Dropdown;
42
+ selector: string;
43
+ };
44
+ Lightbox: {
45
+ component: typeof Components.Lightbox;
46
+ selector: string;
47
+ };
48
+ Modal: {
49
+ component: typeof Components.Modal;
50
+ selector: string;
51
+ };
52
+ Parallax: {
53
+ component: typeof Components.Parallax;
54
+ selector: string;
55
+ };
56
+ Pushpin: {
57
+ component: typeof Components.Pushpin;
58
+ selector: string;
59
+ };
60
+ ScrollSpy: {
61
+ component: typeof Components.ScrollSpy;
62
+ selector: string;
63
+ };
64
+ FormSelect: {
65
+ component: typeof Components.FormSelect;
66
+ selector: string;
67
+ };
68
+ Sidenav: {
69
+ component: typeof Components.Sidenav;
70
+ selector: string;
71
+ };
72
+ Tabs: {
73
+ component: typeof Components.Tabs;
74
+ selector: string;
75
+ };
76
+ TapTarget: {
77
+ component: typeof Components.TapTarget;
78
+ selector: string;
79
+ };
80
+ Timepicker: {
81
+ component: typeof Components.Timepicker;
82
+ selector: string;
83
+ };
84
+ Tooltip: {
85
+ component: typeof Components.Tooltip;
86
+ selector: string;
87
+ };
88
+ FloatingActionButton: {
89
+ component: typeof Components.FloatingActionButton;
90
+ selector: string;
91
+ };
92
+ };
93
+ type Registry = typeof AUTO_INIT_COMPONENTS;
94
+ /**
95
+ * Per-component options accepted by {@link AutoInit}, derived from the table
96
+ * above - each key takes that component's own options type.
97
+ */
98
+ export type AutoInitOptions = {
99
+ [K in keyof Registry]?: Partial<InstanceType<Registry[K]['component']>['options']>;
100
+ };
101
+ /**
102
+ * Automatically initialize components.
103
+ * @param context Root element to initialize. Defaults to `document.body`.
104
+ * @param options Options for each component.
105
+ */
106
+ export declare function AutoInit(context?: HTMLElement, options?: Partial<AutoInitOptions>): void;
107
+ export {};
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
2
2
  export interface ScrollSpyOptions extends BaseOptions {
3
3
  /**
4
4
  * Throttle of scroll handler.
@@ -44,6 +44,8 @@ export declare class ScrollSpy extends Component<ScrollSpyOptions> {
44
44
  static _visibleElements: HTMLElement[];
45
45
  static _ticks: number;
46
46
  static _keptTopActiveElement: HTMLElement | null;
47
+ private static _throttledScroll;
48
+ private static _throttledResize;
47
49
  private tickId;
48
50
  private id;
49
51
  constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
@@ -64,17 +66,12 @@ export declare class ScrollSpy extends Component<ScrollSpyOptions> {
64
66
  destroy(): void;
65
67
  _setupEventHandlers(): void;
66
68
  _removeEventHandlers(): void;
67
- _handleThrottledResize: () => void;
68
- _handleTriggerClick: (e: MouseEvent) => void;
69
- _handleWindowScroll: () => void;
70
- static _offset(el: any): {
71
- top: number;
72
- left: number;
73
- };
69
+ static _handleTriggerClick: (e: MouseEvent) => void;
70
+ static _handleWindowScroll: () => void;
74
71
  static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
75
72
  _enter(): void;
76
73
  _exit(): void;
77
- private _resetKeptTopActiveElementIfNeeded;
74
+ private static _resetKeptTopActiveElement;
78
75
  private static _getDistanceToViewport;
79
76
  private static _smoothScrollIntoView;
80
77
  }
@@ -1,5 +1,5 @@
1
- import { Dropdown, DropdownOptions } from '../components/dropdown';
2
- import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
1
+ import { Dropdown, DropdownOptions } from './dropdown';
2
+ import { Component, BaseOptions, InitElements, MElement } from '../core/component';
3
3
  export interface FormSelectOptions extends BaseOptions {
4
4
  /**
5
5
  * Classes to be added to the select wrapper element.
@@ -52,9 +52,18 @@ export declare class FormSelect extends Component<FormSelectOptions> {
52
52
  static init(els: InitElements<HTMLSelectElement | MElement>, options?: Partial<FormSelectOptions>): FormSelect[];
53
53
  static getInstance(el: HTMLElement): FormSelect;
54
54
  destroy(): void;
55
+ /**
56
+ * Re-read the native `<select>` and update the generated dropdown to match.
57
+ *
58
+ * Assigning `select.value` from script fires no `change` event, so nothing
59
+ * else syncs the visible input text or the `.selected` state on the virtual
60
+ * options. Call this after mutating the underlying select programmatically.
61
+ */
62
+ refresh(): void;
55
63
  _setupEventHandlers(): void;
56
64
  _removeEventHandlers(): void;
57
65
  _handleSelectChange: () => void;
66
+ _handleOptionKeydown: (e: KeyboardEvent) => void;
58
67
  _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;
59
68
  _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
60
69
  _selectOptionElement(virtualOption: HTMLElement): void;
@@ -1,4 +1,4 @@
1
- import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
1
+ import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
2
2
  export interface SidenavOptions extends BaseOptions {
3
3
  /**
4
4
  * Side of screen on which Sidenav appears.