@expressivecss/expressive 0.4.0 → 0.6.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 (69) hide show
  1. package/CHANGELOG.md +127 -0
  2. package/README.md +4 -9
  3. package/dist/css/expressive.css +2617 -951
  4. package/dist/css/expressive.css.map +1 -1
  5. package/dist/css/expressive.min.css +1 -1
  6. package/dist/css/expressive.min.css.map +1 -1
  7. package/dist/js/expressive.cjs +643 -804
  8. package/dist/js/expressive.cjs.map +4 -4
  9. package/dist/js/expressive.js +643 -804
  10. package/dist/js/expressive.js.map +4 -4
  11. package/dist/js/expressive.min.js +11 -11
  12. package/dist/js/expressive.min.js.map +4 -4
  13. package/dist/js/expressive.mjs +643 -804
  14. package/dist/js/expressive.mjs.map +4 -4
  15. package/dist/types/behaviors/bottomSheets.d.ts +18 -0
  16. package/dist/types/behaviors/sideSheets.d.ts +18 -0
  17. package/dist/types/components/autocomplete.d.ts +11 -11
  18. package/dist/types/components/index.d.ts +3 -5
  19. package/dist/types/components/{dropdown.d.ts → menu.d.ts} +38 -37
  20. package/dist/types/components/navigationRail.d.ts +53 -0
  21. package/dist/types/components/range.d.ts +3 -0
  22. package/dist/types/components/registry.d.ts +7 -15
  23. package/dist/types/components/select.d.ts +12 -12
  24. package/dist/types/components/{toasts.d.ts → snackbar.d.ts} +28 -25
  25. package/dist/types/index.d.ts +3 -1
  26. package/package.json +3 -2
  27. package/src/sass/README.md +13 -11
  28. package/src/sass/abstracts/_breakpoints.scss +14 -3
  29. package/src/sass/abstracts/_mixins.scss +3 -3
  30. package/src/sass/abstracts/_variables.scss +27 -2
  31. package/src/sass/base/_global.scss +1 -1
  32. package/src/sass/base/_grid.scss +66 -116
  33. package/src/sass/base/_index.scss +1 -1
  34. package/src/sass/components/_badges.scss +80 -60
  35. package/src/sass/components/_bottom-sheet.scss +137 -0
  36. package/src/sass/components/_cards.scss +4 -4
  37. package/src/sass/components/_chips.scss +6 -5
  38. package/src/sass/components/_dialog.scss +268 -0
  39. package/src/sass/components/_index.scss +9 -7
  40. package/src/sass/components/_list.scss +253 -0
  41. package/src/sass/components/_menu.scss +341 -0
  42. package/src/sass/components/_navbar.scss +65 -117
  43. package/src/sass/components/_navigation-bar.scss +165 -0
  44. package/src/sass/components/_navigation-rail.scss +308 -0
  45. package/src/sass/components/_page-footer.scss +7 -3
  46. package/src/sass/components/_panes.scss +294 -0
  47. package/src/sass/components/_side-sheet.scss +193 -0
  48. package/src/sass/components/_sidenav.scss +78 -49
  49. package/src/sass/components/{_toast.scss → _snackbar.scss} +35 -34
  50. package/src/sass/components/_tabs.scss +1 -27
  51. package/src/sass/components/_toolbar.scss +91 -25
  52. package/src/sass/components/_tooltip.scss +1 -1
  53. package/src/sass/components/forms/_fieldset.scss +1 -1
  54. package/src/sass/components/forms/_input-fields.scss +3 -3
  55. package/src/sass/components/forms/_range.scss +423 -98
  56. package/src/sass/components/forms/_select.scss +19 -17
  57. package/src/sass/tokens/_reference.scss +37 -13
  58. package/src/sass/tokens/_theme.scss +5 -13
  59. package/src/sass/utilities/_colors.scss +16 -74
  60. package/src/sass/utilities/_visibility.scss +8 -0
  61. package/dist/types/components/collapsible.d.ts +0 -79
  62. package/dist/types/components/pushpin.d.ts +0 -51
  63. package/dist/types/components/tapTarget.d.ts +0 -57
  64. package/src/sass/components/_collapsible.scss +0 -179
  65. package/src/sass/components/_collection.scss +0 -180
  66. package/src/sass/components/_dropdown.scss +0 -225
  67. package/src/sass/components/_modal.scss +0 -190
  68. package/src/sass/components/_pushpin.scss +0 -11
  69. package/src/sass/components/_tapTarget.scss +0 -187
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Drag-to-dismiss for `dialog.bottom-sheet` / `dialog.bottom`.
3
+ *
4
+ * The handle is the top 48dp of the sheet (or an explicit `.handle`).
5
+ * A downward drag past 96dp, or a flick, closes. Anything else snaps back.
6
+ * Content below the handle scrolls normally. Light-dismiss on the scrim
7
+ * stays with {@link Dialogs}.
8
+ */
9
+ export declare class BottomSheets {
10
+ private static _drag;
11
+ static Init(): void;
12
+ static _onDown(event: PointerEvent): void;
13
+ static _onMove(event: PointerEvent): void;
14
+ static _onUp(event: PointerEvent): void;
15
+ static _onCancel(): void;
16
+ private static _sheet;
17
+ private static _inHandle;
18
+ }
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Drag-to-dismiss for side sheets (`dialog.side-sheet` / `.right` / `.left`).
3
+ *
4
+ * Grab the header or the inner 24dp edge and drag toward the docked side.
5
+ * Past 96dp, or a flick, closes. Light-dismiss on the scrim stays with
6
+ * {@link Dialogs}.
7
+ */
8
+ export declare class SideSheets {
9
+ private static _drag;
10
+ static Init(): void;
11
+ static _onDown(event: PointerEvent): void;
12
+ static _onMove(event: PointerEvent): void;
13
+ static _onUp(event: PointerEvent): void;
14
+ static _onCancel(): void;
15
+ private static _sheet;
16
+ private static _startDocked;
17
+ private static _inHandle;
18
+ }
@@ -1,4 +1,4 @@
1
- import { Dropdown, DropdownOptions } from './dropdown';
1
+ import { Menu, MenuOptions } from './menu';
2
2
  import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
3
3
  export interface AutocompleteData {
4
4
  /**
@@ -44,7 +44,7 @@ export interface AutocompleteOptions extends BaseOptions {
44
44
  * The height of the Menu which can be set via css-property.
45
45
  * @default '300px'
46
46
  */
47
- maxDropDownHeight: string;
47
+ maxMenuHeight: string;
48
48
  /**
49
49
  * Function is called when the input text is altered and data can also be loaded asynchronously.
50
50
  * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems).
@@ -59,10 +59,10 @@ export interface AutocompleteOptions extends BaseOptions {
59
59
  */
60
60
  allowUnsafeHTML: boolean;
61
61
  /**
62
- * Pass options object to select dropdown initialization.
62
+ * Pass options object to select menu initialization.
63
63
  * @default {}
64
64
  */
65
- dropdownOptions: Partial<DropdownOptions>;
65
+ menuOptions: Partial<MenuOptions>;
66
66
  /**
67
67
  * Predefined selected values
68
68
  */
@@ -80,8 +80,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
80
80
  private $active;
81
81
  private _mousedown;
82
82
  container: HTMLElement;
83
- /** Instance of the dropdown plugin for this autocomplete. */
84
- dropdown: Dropdown;
83
+ /** Instance of the menu plugin for this autocomplete. */
84
+ menu: Menu;
85
85
  static _keydown: boolean;
86
86
  selectedValues: AutocompleteData[];
87
87
  menuItems: AutocompleteData[];
@@ -112,8 +112,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
112
112
  destroy(): void;
113
113
  _setupEventHandlers(): void;
114
114
  _removeEventHandlers(): void;
115
- _setupDropdown(): void;
116
- _removeDropdown(): void;
115
+ _setupMenu(): void;
116
+ _removeMenu(): void;
117
117
  _handleInputBlur: () => void;
118
118
  _handleInputKeyup: (e: KeyboardEvent) => void;
119
119
  _handleInputFocus: () => void;
@@ -125,8 +125,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
125
125
  _resetCurrentElementPosition(): void;
126
126
  _resetAutocomplete(): void;
127
127
  _highlightPartialText(input: string, label: string): string[];
128
- _createDropdownItem(entry: AutocompleteData): HTMLLIElement;
129
- _renderDropdown(): void;
128
+ _createMenuItem(entry: AutocompleteData): HTMLLIElement;
129
+ _renderMenu(): void;
130
130
  _setStatusLoading(): void;
131
131
  _updateSelectedInfo(): void;
132
132
  _refreshInputText(): void;
@@ -143,7 +143,7 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
143
143
  * Updates the visible or selectable items shown in the menu.
144
144
  * @param menuItems Items to be available.
145
145
  * @param selected Selected item ids
146
- * @param open Option to conditionally open dropdown
146
+ * @param open Option to conditionally open menu
147
147
  */
148
148
  setMenuItems(menuItems: AutocompleteData[], selected?: number[] | string[], open?: boolean): void;
149
149
  /**
@@ -4,19 +4,17 @@ export { Cards } from './cards';
4
4
  export { Carousel } from './carousel';
5
5
  export { CharacterCounter } from './characterCounter';
6
6
  export { Chips } from './chips';
7
- export { Collapsible } from './collapsible';
8
7
  export { Datepicker } from './datepicker';
9
- export { Dropdown } from './dropdown';
8
+ export { Menu } from './menu';
10
9
  export { Lightbox } from './lightbox';
11
10
  export { Parallax } from './parallax';
12
- export { Pushpin } from './pushpin';
13
11
  export { Range } from './range';
14
12
  export { ScrollSpy } from './scrollspy';
15
13
  export { FormSelect } from './select';
16
14
  export { Sidenav } from './sidenav';
15
+ export { NavigationRail } from './navigationRail';
17
16
  export { Slider } from './slider';
18
17
  export { Tabs } from './tabs';
19
- export { TapTarget } from './tapTarget';
20
18
  export { Timepicker } from './timepicker';
21
- export { Toast } from './toasts';
19
+ export { Snackbar } from './snackbar';
22
20
  export { Tooltip } from './tooltip';
@@ -1,37 +1,38 @@
1
1
  import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
2
- export interface DropdownOptions extends BaseOptions {
2
+ export interface MenuOptions extends BaseOptions {
3
3
  /**
4
4
  * Defines the edge the menu is aligned to.
5
5
  * @default 'left'
6
6
  */
7
7
  alignment: 'left' | 'right';
8
8
  /**
9
- * If true, automatically focus dropdown el for keyboard.
9
+ * If true, automatically focus menu el for keyboard.
10
10
  * @default true
11
11
  */
12
12
  autoFocus: boolean;
13
13
  /**
14
- * If true, constrainWidth to the size of the dropdown activator.
14
+ * If true, constrainWidth to the size of the menu activator.
15
15
  * @default true
16
16
  */
17
17
  constrainWidth: boolean;
18
18
  /**
19
- * Provide an element that will be the bounding container of the dropdown.
19
+ * Provide an element that will be the bounding container of the menu.
20
20
  * @default null
21
21
  */
22
22
  container: Element;
23
23
  /**
24
- * If false, the dropdown will show below the trigger.
25
- * @default true
24
+ * If false, the menu will show below the trigger.
25
+ * That is the M3 placement. Pass `true` to cover the trigger.
26
+ * @default false
26
27
  */
27
28
  coverTrigger: boolean;
28
29
  /**
29
- * If true, close dropdown on item click.
30
+ * If true, close menu on item click.
30
31
  * @default true
31
32
  */
32
33
  closeOnClick: boolean;
33
34
  /**
34
- * If true, the dropdown will open on hover.
35
+ * If true, the menu will open on hover.
35
36
  * @default false
36
37
  */
37
38
  hover: boolean;
@@ -46,22 +47,22 @@ export interface DropdownOptions extends BaseOptions {
46
47
  */
47
48
  outDuration: number;
48
49
  /**
49
- * Function called when dropdown starts entering.
50
+ * Function called when menu starts entering.
50
51
  * @default null
51
52
  */
52
53
  onOpenStart: (el: HTMLElement) => void;
53
54
  /**
54
- * Function called when dropdown finishes entering.
55
+ * Function called when menu finishes entering.
55
56
  * @default null
56
57
  */
57
58
  onOpenEnd: (el: HTMLElement) => void;
58
59
  /**
59
- * Function called when dropdown starts exiting.
60
+ * Function called when menu starts exiting.
60
61
  * @default null
61
62
  */
62
63
  onCloseStart: (el: HTMLElement) => void;
63
64
  /**
64
- * Function called when dropdown finishes exiting.
65
+ * Function called when menu finishes exiting.
65
66
  * @default null
66
67
  */
67
68
  onCloseEnd: (el: HTMLElement) => void;
@@ -71,36 +72,36 @@ export interface DropdownOptions extends BaseOptions {
71
72
  */
72
73
  onItemClick: (el: HTMLLIElement) => void;
73
74
  }
74
- export declare class Dropdown extends Component<DropdownOptions> implements Openable {
75
- static _dropdowns: Dropdown[];
76
- /** ID of the dropdown element. */
75
+ export declare class Menu extends Component<MenuOptions> implements Openable {
76
+ static _menus: Menu[];
77
+ /** ID of the menu element. */
77
78
  id: string;
78
- /** The DOM element of the dropdown. */
79
- dropdownEl: HTMLElement;
80
- /** If the dropdown is open. */
79
+ /** The DOM element of the menu. */
80
+ menuEl: HTMLElement;
81
+ /** If the menu is open. */
81
82
  isOpen: boolean;
82
- /** If the dropdown content is scrollable. */
83
+ /** If the menu content is scrollable. */
83
84
  isScrollable: boolean;
84
85
  isTouchMoving: boolean;
85
86
  /** The index of the item focused. */
86
87
  focusedIndex: number;
87
88
  filterQuery: string[];
88
89
  filterTimeout: ReturnType<typeof setTimeout>;
89
- constructor(el: HTMLElement, options: Partial<DropdownOptions>);
90
- static get defaults(): DropdownOptions;
90
+ constructor(el: HTMLElement, options: Partial<MenuOptions>);
91
+ static get defaults(): MenuOptions;
91
92
  /**
92
- * Initializes instance of Dropdown.
93
+ * Initializes instance of Menu.
93
94
  * @param el HTML element.
94
95
  * @param options Component options.
95
96
  */
96
- static init(el: HTMLElement, options?: Partial<DropdownOptions>): Dropdown;
97
+ static init(el: HTMLElement, options?: Partial<MenuOptions>): Menu;
97
98
  /**
98
- * Initializes instances of Dropdown.
99
+ * Initializes instances of Menu.
99
100
  * @param els HTML elements.
100
101
  * @param options Component options.
101
102
  */
102
- static init(els: InitElements<InitElement>, options?: Partial<DropdownOptions>): Dropdown[];
103
- static getInstance(el: HTMLElement): Dropdown;
103
+ static init(els: InitElements<InitElement>, options?: Partial<MenuOptions>): Menu[];
104
+ static getInstance(el: HTMLElement): Menu;
104
105
  destroy(): void;
105
106
  _setupEventHandlers(): void;
106
107
  _removeEventHandlers(): void;
@@ -112,7 +113,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
112
113
  _handleDocumentClick: (e: MouseEvent) => void;
113
114
  _handleTriggerKeydown: (e: KeyboardEvent) => void;
114
115
  _handleDocumentTouchmove: (e: TouchEvent) => void;
115
- _handleDropdownClick: (e: MouseEvent) => void;
116
+ _handleMenuClick: (e: MouseEvent) => void;
116
117
  private _isSubmenuTriggerClick;
117
118
  private _setupSubmenus;
118
119
  private _toggleSubmenu;
@@ -122,15 +123,15 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
122
123
  private _closeSubmenus;
123
124
  private _containingSubmenu;
124
125
  private _focusedRow;
125
- _handleDropdownKeydown: (e: KeyboardEvent) => void;
126
+ _handleMenuKeydown: (e: KeyboardEvent) => void;
126
127
  _handleWindowResize: () => void;
127
128
  _resetFilterQuery: () => void;
128
- _resetDropdownStyles(): void;
129
- _resetDropdownPositioningStyles(): void;
130
- _moveDropdownToElement(containerEl?: HTMLElement): void;
131
- _makeDropdownFocusable(): void;
129
+ _resetMenuStyles(): void;
130
+ _resetMenuPositioningStyles(): void;
131
+ _moveMenuToElement(containerEl?: HTMLElement): void;
132
+ _makeMenuFocusable(): void;
132
133
  _focusFocusedItem(): void;
133
- _getDropdownPosition(closestOverflowParent: HTMLElement): {
134
+ _getMenuPosition(closestOverflowParent: HTMLElement): {
134
135
  x: number;
135
136
  y: number;
136
137
  verticalAlignment: string;
@@ -141,17 +142,17 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
141
142
  _animateIn(): void;
142
143
  _animateOut(): void;
143
144
  private _getClosestAncestor;
144
- _placeDropdown(): void;
145
+ _placeMenu(): void;
145
146
  /**
146
- * Open dropdown.
147
+ * Open menu.
147
148
  */
148
149
  open: () => void;
149
150
  /**
150
- * Close dropdown.
151
+ * Close menu.
151
152
  */
152
153
  close: () => void;
153
154
  /**
154
- * While dropdown is open, you can recalculate its dimensions if its contents have changed.
155
+ * While menu is open, you can recalculate its dimensions if its contents have changed.
155
156
  */
156
157
  recalculateDimensions: () => void;
157
158
  }
@@ -0,0 +1,53 @@
1
+ import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
2
+ export interface NavigationRailOptions extends BaseOptions {
3
+ /**
4
+ * Called before the rail expands.
5
+ */
6
+ onOpenStart: (el: HTMLElement) => void;
7
+ /**
8
+ * Called after the rail expands.
9
+ */
10
+ onOpenEnd: (el: HTMLElement) => void;
11
+ /**
12
+ * Called before the rail collapses.
13
+ */
14
+ onCloseStart: (el: HTMLElement) => void;
15
+ /**
16
+ * Called after the rail collapses.
17
+ */
18
+ onCloseEnd: (el: HTMLElement) => void;
19
+ }
20
+ /**
21
+ * Navigation rail. Layout is CSS (collapsed / .expanded). This class
22
+ * toggles that class from the menu button, closes a compact overlay on
23
+ * Escape or a scrim tap, and keeps aria-expanded in sync.
24
+ */
25
+ export declare class NavigationRail extends Component<NavigationRailOptions> {
26
+ isExpanded: boolean;
27
+ private _toggle;
28
+ private _mql;
29
+ constructor(el: HTMLElement, options: Partial<NavigationRailOptions>);
30
+ static get defaults(): NavigationRailOptions;
31
+ static init(el: HTMLElement, options?: Partial<NavigationRailOptions>): NavigationRail;
32
+ static init(els: InitElements<InitElement>, options?: Partial<NavigationRailOptions>): NavigationRail[];
33
+ static getInstance(el: HTMLElement): NavigationRail;
34
+ destroy(): void;
35
+ /**
36
+ * Expands the rail. On compact windows the overlay (scrim) is CSS.
37
+ */
38
+ expand: () => void;
39
+ /**
40
+ * Collapses the rail.
41
+ */
42
+ collapse: () => void;
43
+ /**
44
+ * Toggles expanded / collapsed.
45
+ */
46
+ toggle: () => void;
47
+ private _findToggle;
48
+ private _isCompact;
49
+ private _isModal;
50
+ private _sync;
51
+ private _onClick;
52
+ private _onKeyDown;
53
+ }
@@ -32,6 +32,9 @@ export declare class Range extends Component<RangeOptions> {
32
32
  _setupThumb(): void;
33
33
  _removeThumb(): void;
34
34
  _isVertical(): boolean;
35
+ _host(): HTMLElement | null;
36
+ _clampDual(): void;
37
+ _fraction(el: HTMLInputElement): number;
35
38
  _sync(): void;
36
39
  /**
37
40
  * Initializes every range input in the current document.
@@ -9,7 +9,7 @@ import * as Components from './index';
9
9
  * ./index.ts) - not four hand-synchronized edits that fail silently when one
10
10
  * is forgotten.
11
11
  *
12
- * A component that should only ever be constructed explicitly (Toast,
12
+ * A component that should only ever be constructed explicitly (Snackbar,
13
13
  * CharacterCounter, Range, ...) simply stays out of this table.
14
14
  */
15
15
  export declare const AUTO_INIT_COMPONENTS: {
@@ -29,16 +29,12 @@ export declare const AUTO_INIT_COMPONENTS: {
29
29
  component: typeof Components.Chips;
30
30
  selector: string;
31
31
  };
32
- Collapsible: {
33
- component: typeof Components.Collapsible;
34
- selector: string;
35
- };
36
32
  Datepicker: {
37
33
  component: typeof Components.Datepicker;
38
34
  selector: string;
39
35
  };
40
- Dropdown: {
41
- component: typeof Components.Dropdown;
36
+ Menu: {
37
+ component: typeof Components.Menu;
42
38
  selector: string;
43
39
  };
44
40
  Lightbox: {
@@ -49,10 +45,6 @@ export declare const AUTO_INIT_COMPONENTS: {
49
45
  component: typeof Components.Parallax;
50
46
  selector: string;
51
47
  };
52
- Pushpin: {
53
- component: typeof Components.Pushpin;
54
- selector: string;
55
- };
56
48
  ScrollSpy: {
57
49
  component: typeof Components.ScrollSpy;
58
50
  selector: string;
@@ -65,12 +57,12 @@ export declare const AUTO_INIT_COMPONENTS: {
65
57
  component: typeof Components.Sidenav;
66
58
  selector: string;
67
59
  };
68
- Tabs: {
69
- component: typeof Components.Tabs;
60
+ NavigationRail: {
61
+ component: typeof Components.NavigationRail;
70
62
  selector: string;
71
63
  };
72
- TapTarget: {
73
- component: typeof Components.TapTarget;
64
+ Tabs: {
65
+ component: typeof Components.Tabs;
74
66
  selector: string;
75
67
  };
76
68
  Timepicker: {
@@ -1,4 +1,4 @@
1
- import { Dropdown, DropdownOptions } from './dropdown';
1
+ import { Menu, MenuOptions } from './menu';
2
2
  import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
3
3
  export interface FormSelectOptions extends BaseOptions {
4
4
  /**
@@ -7,10 +7,10 @@ export interface FormSelectOptions extends BaseOptions {
7
7
  */
8
8
  classes: string;
9
9
  /**
10
- * Pass options object to select dropdown initialization.
10
+ * Pass options object to select menu initialization.
11
11
  * @default {}
12
12
  */
13
- dropdownOptions: Partial<DropdownOptions>;
13
+ menuOptions: Partial<MenuOptions>;
14
14
  }
15
15
  type ValueStruct = {
16
16
  el: HTMLOptionElement;
@@ -25,12 +25,12 @@ export declare class FormSelect extends Component<FormSelectOptions> {
25
25
  * Is "null", if not detected.
26
26
  */
27
27
  labelEl: HTMLLabelElement;
28
- /** Dropdown menu element. */
29
- dropdownOptions: HTMLElement;
28
+ /** The generated menu element. */
29
+ menuEl: HTMLElement;
30
30
  /** Text input that shows current selected option. */
31
31
  input: HTMLInputElement;
32
- /** Instance of the dropdown plugin for this select. */
33
- dropdown: Dropdown;
32
+ /** Instance of the menu plugin for this select. */
33
+ menu: Menu;
34
34
  /** The field wrapper around the native select. */
35
35
  wrapper: HTMLDivElement;
36
36
  selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
@@ -55,12 +55,12 @@ export declare class FormSelect extends Component<FormSelectOptions> {
55
55
  static getInstance(el: HTMLElement): FormSelect;
56
56
  destroy(): void;
57
57
  /**
58
- * Re-read the native `<select>` and update the generated dropdown to match.
58
+ * Re-read the native `<select>` and update the generated menu to match.
59
59
  *
60
60
  * Assigning `select.value` from script fires no `change` event, so nothing
61
61
  * else syncs the visible input text or the `.selected` state on the virtual
62
62
  * options. Adding or removing `<option>`s also requires this — the menu is
63
- * rebuilt from the native list, the field and Dropdown instance stay put.
63
+ * rebuilt from the native list, the field and Menu instance stay put.
64
64
  */
65
65
  refresh(): void;
66
66
  _setupEventHandlers(): void;
@@ -74,17 +74,17 @@ export declare class FormSelect extends Component<FormSelectOptions> {
74
74
  _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
75
75
  _selectOptionElement(virtualOption: HTMLElement): void;
76
76
  _handleInputClick: () => void;
77
- _setupDropdown(): void;
77
+ _setupMenu(): void;
78
78
  private _setupWrapper;
79
79
  private _hideNativeSelect;
80
80
  private _buildInput;
81
81
  private _buildCaret;
82
- private _initDropdown;
82
+ private _initMenu;
83
83
  private _nativeOptions;
84
84
  private _buildOptions;
85
85
  private _rebuildOptions;
86
86
  _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void;
87
- _removeDropdown(): void;
87
+ _removeMenu(): void;
88
88
  _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement;
89
89
  _selectValue(value: ValueStruct): void;
90
90
  _deselectValue(value: ValueStruct): void;
@@ -1,7 +1,7 @@
1
1
  import { BaseOptions } from '../core/component';
2
- export interface ToastOptions extends BaseOptions {
2
+ export interface SnackbarOptions extends BaseOptions {
3
3
  /**
4
- * The content of the Toast.
4
+ * The content of the Snackbar.
5
5
  * @default ""
6
6
  */
7
7
  text: string;
@@ -11,7 +11,7 @@ export interface ToastOptions extends BaseOptions {
11
11
  */
12
12
  action: string;
13
13
  /**
14
- * Called when the action button is pressed. The toast still dismisses.
14
+ * Called when the action button is pressed. The snackbar still dismisses.
15
15
  * @default null
16
16
  */
17
17
  onAction: () => void;
@@ -21,12 +21,14 @@ export interface ToastOptions extends BaseOptions {
21
21
  */
22
22
  dismissible: boolean;
23
23
  /**
24
- * Element Id for the tooltip.
24
+ * Element id of a `<template>` (or another element) used as the snackbar body.
25
25
  * @default ""
26
26
  */
27
- toastId?: string;
27
+ snackbarId?: string;
28
28
  /**
29
- * Length in ms the Toast stays before dismissal.
29
+ * Length in ms the Snackbar stays before dismissal.
30
+ * `Infinity` keeps it on screen until the user acts.
31
+ * When `action` is set and this is omitted, the default is 10000.
30
32
  * @default 4000
31
33
  */
32
34
  displayLength: number;
@@ -41,38 +43,38 @@ export interface ToastOptions extends BaseOptions {
41
43
  */
42
44
  outDuration: number;
43
45
  /**
44
- * Classes to be added to the toast element.
46
+ * Classes to be added to the snackbar element.
45
47
  * @default ""
46
48
  */
47
49
  classes: string;
48
50
  /**
49
- * Callback function called when toast is dismissed.
51
+ * Callback function called when the snackbar is dismissed.
50
52
  * @default null
51
53
  */
52
54
  completeCallback: () => void;
53
55
  /**
54
- * The percentage of the toast's width it takes fora drag
55
- * to dismiss a Toast.
56
+ * The percentage of the snackbar's width it takes for a drag
57
+ * to dismiss a Snackbar.
56
58
  * @default 0.8
57
59
  */
58
60
  activationPercent: number;
59
61
  }
60
- export declare class Toast {
61
- /** The toast element. */
62
+ export declare class Snackbar {
63
+ /** The snackbar element. */
62
64
  el: HTMLElement;
63
65
  /**
64
- * The remaining amount of time in ms that the toast
66
+ * The remaining amount of time in ms that the snackbar
65
67
  * will stay before dismissal.
66
68
  */
67
69
  timeRemaining: number;
68
70
  /**
69
- * Describes the current pan state of the Toast.
71
+ * Describes the current pan state of the Snackbar.
70
72
  */
71
73
  panning: boolean;
72
- options: ToastOptions;
74
+ options: SnackbarOptions;
73
75
  message: string;
74
76
  counterTimeout: ReturnType<typeof setTimeout>;
75
- /** Wall-clock time the toast is due to dismiss, for pause/resume. */
77
+ /** Wall-clock time the snackbar is due to dismiss, for pause/resume. */
76
78
  private _deadline;
77
79
  wasSwiped: boolean;
78
80
  startingXPos: number;
@@ -80,12 +82,13 @@ export declare class Toast {
80
82
  time: number;
81
83
  deltaX: number;
82
84
  velocityX: number;
83
- static _toasts: Toast[];
85
+ private _dismissed;
86
+ static _snackbars: Snackbar[];
84
87
  static _container: HTMLElement;
85
- static _draggedToast: Toast;
86
- constructor(options: Partial<ToastOptions>);
87
- static get defaults(): ToastOptions;
88
- static getInstance(el: HTMLElement): Toast;
88
+ static _draggedSnackbar: Snackbar;
89
+ constructor(options?: Partial<SnackbarOptions>);
90
+ static get defaults(): SnackbarOptions;
91
+ static getInstance(el: HTMLElement): Snackbar;
89
92
  static _createContainer(): void;
90
93
  static _removeContainer(): void;
91
94
  static _onDragStart(e: TouchEvent | MouseEvent): void;
@@ -93,16 +96,16 @@ export declare class Toast {
93
96
  static _onDragEnd(): void;
94
97
  static _xPos(e: TouchEvent | MouseEvent): number;
95
98
  /**
96
- * dismiss all toasts.
99
+ * dismiss all snackbars.
97
100
  */
98
101
  static dismissAll(): void;
99
- _createToast(): HTMLElement;
102
+ _createSnackbar(): HTMLElement;
100
103
  _animateIn(): void;
101
104
  /**
102
105
  * Arm the dismissal timer.
103
106
  *
104
107
  * One timeout, not a 20ms interval ticking a counter down: the old form woke
105
- * the page up 50 times a second per toast purely to subtract 20 from a
108
+ * the page up 50 times a second per snackbar purely to subtract 20 from a
106
109
  * number. Dragging pauses the countdown via _pauseTimer/_resumeTimer instead.
107
110
  */
108
111
  _setTimer(): void;
@@ -111,7 +114,7 @@ export declare class Toast {
111
114
  /** Restart a countdown stopped by {@link _pauseTimer}. */
112
115
  _resumeTimer(): void;
113
116
  /**
114
- * Dismiss toast with animation.
117
+ * Dismiss snackbar with animation.
115
118
  */
116
119
  dismiss(): void;
117
120
  }
@@ -1,7 +1,9 @@
1
1
  export * from './components';
2
2
  export { Dialogs } from './behaviors/dialogs';
3
+ export { BottomSheets } from './behaviors/bottomSheets';
4
+ export { SideSheets } from './behaviors/sideSheets';
3
5
  export { Forms } from './behaviors/forms';
4
6
  export { Waves } from './behaviors/waves';
5
7
  export { AutoInit } from './components/registry';
6
8
  export type { AutoInitOptions } from './components/registry';
7
- export declare const version = "0.4.0";
9
+ export declare const version = "0.6.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@expressivecss/expressive",
3
- "version": "0.4.0",
3
+ "version": "0.6.0",
4
4
  "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
5
5
  "license": "MIT",
6
6
  "author": "BaezFJ <baezdevs@gmail.com>",
@@ -50,7 +50,8 @@
50
50
  },
51
51
  "files": [
52
52
  "dist",
53
- "src/sass"
53
+ "src/sass",
54
+ "CHANGELOG.md"
54
55
  ],
55
56
  "publishConfig": {
56
57
  "access": "public"