@material/web 1.0.1 → 1.0.2-nightly.6a1fb38.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 (308) hide show
  1. package/all.d.ts +2 -0
  2. package/all.js +2 -0
  3. package/all.js.map +1 -1
  4. package/button/elevated-button.js +5 -1
  5. package/button/elevated-button.js.map +1 -1
  6. package/button/internal/_elevation.scss +32 -32
  7. package/button/internal/_icon.scss +22 -23
  8. package/button/internal/_outlined-button.scss +21 -19
  9. package/button/internal/_shared.scss +84 -77
  10. package/button/internal/_touch-target.scss +4 -0
  11. package/button/internal/button.d.ts +7 -11
  12. package/button/internal/button.js +52 -38
  13. package/button/internal/button.js.map +1 -1
  14. package/button/internal/elevated-button.d.ts +1 -1
  15. package/button/internal/elevated-button.js +1 -1
  16. package/button/internal/elevated-button.js.map +1 -1
  17. package/button/internal/filled-button.d.ts +1 -1
  18. package/button/internal/filled-button.js +1 -1
  19. package/button/internal/filled-button.js.map +1 -1
  20. package/button/internal/filled-tonal-button.d.ts +1 -1
  21. package/button/internal/filled-tonal-button.js +1 -1
  22. package/button/internal/filled-tonal-button.js.map +1 -1
  23. package/button/internal/outlined-button.d.ts +1 -1
  24. package/button/internal/outlined-button.js +2 -2
  25. package/button/internal/outlined-button.js.map +1 -1
  26. package/button/internal/outlined-styles.css.js +1 -1
  27. package/button/internal/outlined-styles.css.js.map +1 -1
  28. package/button/internal/shared-elevation-styles.css.js +1 -1
  29. package/button/internal/shared-elevation-styles.css.js.map +1 -1
  30. package/button/internal/shared-styles.css.js +1 -1
  31. package/button/internal/shared-styles.css.js.map +1 -1
  32. package/checkbox/internal/checkbox.d.ts +16 -23
  33. package/checkbox/internal/checkbox.js +38 -52
  34. package/checkbox/internal/checkbox.js.map +1 -1
  35. package/chips/filter-chip.js +5 -1
  36. package/chips/filter-chip.js.map +1 -1
  37. package/chips/harness.js.map +1 -1
  38. package/chips/input-chip.js +6 -1
  39. package/chips/input-chip.js.map +1 -1
  40. package/chips/internal/assist-chip.js +8 -4
  41. package/chips/internal/assist-chip.js.map +1 -1
  42. package/chips/internal/chip-set.js +6 -4
  43. package/chips/internal/chip-set.js.map +1 -1
  44. package/chips/internal/chip.d.ts +3 -0
  45. package/chips/internal/chip.js +7 -5
  46. package/chips/internal/chip.js.map +1 -1
  47. package/chips/internal/filter-chip.d.ts +2 -0
  48. package/chips/internal/filter-chip.js +11 -5
  49. package/chips/internal/filter-chip.js.map +1 -1
  50. package/chips/internal/input-chip.d.ts +2 -0
  51. package/chips/internal/input-chip.js +10 -4
  52. package/chips/internal/input-chip.js.map +1 -1
  53. package/chips/internal/multi-action-chip.js.map +1 -1
  54. package/chips/internal/trailing-icons.d.ts +1 -1
  55. package/chips/internal/trailing-icons.js +6 -5
  56. package/chips/internal/trailing-icons.js.map +1 -1
  57. package/common.d.ts +2 -0
  58. package/common.js +2 -0
  59. package/common.js.map +1 -1
  60. package/dialog/harness.js +1 -2
  61. package/dialog/harness.js.map +1 -1
  62. package/dialog/internal/_dialog.scss +1 -1
  63. package/dialog/internal/animations.js +14 -12
  64. package/dialog/internal/animations.js.map +1 -1
  65. package/dialog/internal/dialog-styles.css.js +1 -1
  66. package/dialog/internal/dialog-styles.css.js.map +1 -1
  67. package/dialog/internal/dialog.d.ts +6 -6
  68. package/dialog/internal/dialog.js +24 -24
  69. package/dialog/internal/dialog.js.map +1 -1
  70. package/fab/harness.js.map +1 -1
  71. package/fab/internal/fab.js.map +1 -1
  72. package/fab/internal/shared.js +10 -11
  73. package/fab/internal/shared.js.map +1 -1
  74. package/field/harness.js.map +1 -1
  75. package/field/internal/_content.scss +185 -174
  76. package/field/internal/_filled-field.scss +147 -136
  77. package/field/internal/_label.scss +83 -72
  78. package/field/internal/_outlined-field.scss +276 -262
  79. package/field/internal/_supporting-text.scss +53 -42
  80. package/field/internal/field.js +26 -22
  81. package/field/internal/field.js.map +1 -1
  82. package/field/internal/filled-styles.css.js +1 -1
  83. package/field/internal/filled-styles.css.js.map +1 -1
  84. package/field/internal/outlined-styles.css.js +1 -1
  85. package/field/internal/outlined-styles.css.js.map +1 -1
  86. package/field/internal/shared-styles.css.js +1 -1
  87. package/field/internal/shared-styles.css.js.map +1 -1
  88. package/focus/internal/focus-ring.d.ts +2 -0
  89. package/focus/internal/focus-ring.js +3 -3
  90. package/focus/internal/focus-ring.js.map +1 -1
  91. package/icon/internal/_icon.scss +7 -4
  92. package/icon/internal/icon-styles.css.js +1 -1
  93. package/icon/internal/icon-styles.css.js.map +1 -1
  94. package/iconbutton/internal/icon-button.d.ts +9 -4
  95. package/iconbutton/internal/icon-button.js +35 -22
  96. package/iconbutton/internal/icon-button.js.map +1 -1
  97. package/internal/aria/aria.d.ts +4 -26
  98. package/internal/aria/aria.js +10 -28
  99. package/internal/aria/aria.js.map +1 -1
  100. package/internal/aria/delegate.js +2 -2
  101. package/internal/aria/delegate.js.map +1 -1
  102. package/internal/controller/attachable-controller.js +3 -5
  103. package/internal/controller/attachable-controller.js.map +1 -1
  104. package/internal/controller/form-submitter.d.ts +3 -5
  105. package/internal/controller/form-submitter.js +5 -7
  106. package/internal/controller/form-submitter.js.map +1 -1
  107. package/internal/controller/is-rtl.js +2 -2
  108. package/internal/controller/is-rtl.js.map +1 -1
  109. package/internal/controller/string-converter.js +1 -1
  110. package/internal/controller/string-converter.js.map +1 -1
  111. package/internal/motion/animation.js.map +1 -1
  112. package/labs/behaviors/element-internals.d.ts +45 -0
  113. package/labs/behaviors/element-internals.js +50 -0
  114. package/labs/behaviors/element-internals.js.map +1 -0
  115. package/labs/behaviors/focusable.d.ts +39 -0
  116. package/labs/behaviors/focusable.js +82 -0
  117. package/labs/behaviors/focusable.js.map +1 -0
  118. package/labs/behaviors/form-associated.d.ts +199 -0
  119. package/labs/behaviors/form-associated.js +155 -0
  120. package/labs/behaviors/form-associated.js.map +1 -0
  121. package/labs/behaviors/mixin.d.ts +54 -0
  122. package/labs/behaviors/mixin.js +7 -0
  123. package/labs/behaviors/mixin.js.map +1 -0
  124. package/labs/card/_elevated-card.scss +6 -0
  125. package/labs/card/_filled-card.scss +6 -0
  126. package/labs/card/_outlined-card.scss +6 -0
  127. package/labs/card/elevated-card.d.ts +18 -0
  128. package/labs/card/elevated-card.js +21 -0
  129. package/labs/card/elevated-card.js.map +1 -0
  130. package/labs/card/filled-card.d.ts +18 -0
  131. package/labs/card/filled-card.js +21 -0
  132. package/labs/card/filled-card.js.map +1 -0
  133. package/labs/card/internal/_elevated-card.scss +35 -0
  134. package/labs/card/internal/_filled-card.scss +35 -0
  135. package/labs/card/internal/_outlined-card.scss +39 -0
  136. package/labs/card/internal/_shared.scss +40 -0
  137. package/labs/card/internal/card.d.ts +13 -0
  138. package/labs/card/internal/card.js +20 -0
  139. package/labs/card/internal/card.js.map +1 -0
  140. package/labs/card/internal/elevated-styles.css.js +9 -0
  141. package/labs/card/internal/elevated-styles.css.js.map +1 -0
  142. package/labs/card/internal/elevated-styles.scss +10 -0
  143. package/labs/card/internal/filled-styles.css.js +9 -0
  144. package/labs/card/internal/filled-styles.css.js.map +1 -0
  145. package/labs/card/internal/filled-styles.scss +10 -0
  146. package/labs/card/internal/outlined-styles.css.js +9 -0
  147. package/labs/card/internal/outlined-styles.css.js.map +1 -0
  148. package/labs/card/internal/outlined-styles.scss +10 -0
  149. package/labs/card/internal/shared-styles.css.js +9 -0
  150. package/labs/card/internal/shared-styles.css.js.map +1 -0
  151. package/labs/card/internal/shared-styles.scss +10 -0
  152. package/labs/card/outlined-card.d.ts +18 -0
  153. package/labs/card/outlined-card.js +21 -0
  154. package/labs/card/outlined-card.js.map +1 -0
  155. package/labs/item/internal/item.js +8 -8
  156. package/labs/item/internal/item.js.map +1 -1
  157. package/labs/navigationbar/internal/constants.js.map +1 -1
  158. package/labs/navigationbar/internal/navigation-bar.d.ts +3 -0
  159. package/labs/navigationbar/internal/navigation-bar.js +18 -11
  160. package/labs/navigationbar/internal/navigation-bar.js.map +1 -1
  161. package/labs/navigationdrawer/internal/navigation-drawer-modal.d.ts +3 -0
  162. package/labs/navigationdrawer/internal/navigation-drawer-modal.js +10 -3
  163. package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -1
  164. package/labs/navigationdrawer/internal/navigation-drawer.d.ts +3 -0
  165. package/labs/navigationdrawer/internal/navigation-drawer.js +8 -1
  166. package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -1
  167. package/labs/navigationtab/harness.js.map +1 -1
  168. package/labs/navigationtab/internal/navigation-tab.d.ts +6 -0
  169. package/labs/navigationtab/internal/navigation-tab.js +43 -27
  170. package/labs/navigationtab/internal/navigation-tab.js.map +1 -1
  171. package/labs/navigationtab/internal/state.js.map +1 -1
  172. package/labs/segmentedbutton/internal/segmented-button.d.ts +3 -0
  173. package/labs/segmentedbutton/internal/segmented-button.js +26 -12
  174. package/labs/segmentedbutton/internal/segmented-button.js.map +1 -1
  175. package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts +5 -0
  176. package/labs/segmentedbuttonset/internal/segmented-button-set.js +14 -9
  177. package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -1
  178. package/list/harness.d.ts +1 -1
  179. package/list/harness.js.map +1 -1
  180. package/list/internal/list-controller.d.ts +1 -1
  181. package/list/internal/list-controller.js +7 -3
  182. package/list/internal/list-controller.js.map +1 -1
  183. package/list/internal/list-navigation-helpers.js.map +1 -1
  184. package/list/internal/list.d.ts +2 -2
  185. package/list/internal/list.js +8 -6
  186. package/list/internal/list.js.map +1 -1
  187. package/list/internal/listitem/harness.d.ts +1 -1
  188. package/list/internal/listitem/harness.js.map +1 -1
  189. package/list/internal/listitem/list-item.d.ts +3 -2
  190. package/list/internal/listitem/list-item.js +19 -20
  191. package/list/internal/listitem/list-item.js.map +1 -1
  192. package/list/list-item.d.ts +4 -12
  193. package/list/list-item.js +4 -12
  194. package/list/list-item.js.map +1 -1
  195. package/menu/harness.js.map +1 -1
  196. package/menu/internal/_menu.scss +12 -1
  197. package/menu/internal/controllers/menuItemController.js +9 -4
  198. package/menu/internal/controllers/menuItemController.js.map +1 -1
  199. package/menu/internal/controllers/shared.d.ts +9 -1
  200. package/menu/internal/controllers/shared.js +4 -4
  201. package/menu/internal/controllers/shared.js.map +1 -1
  202. package/menu/internal/controllers/surfacePositionController.d.ts +15 -2
  203. package/menu/internal/controllers/surfacePositionController.js +124 -54
  204. package/menu/internal/controllers/surfacePositionController.js.map +1 -1
  205. package/menu/internal/controllers/typeaheadController.js +19 -14
  206. package/menu/internal/controllers/typeaheadController.js.map +1 -1
  207. package/menu/internal/menu-styles.css.js +1 -1
  208. package/menu/internal/menu-styles.css.js.map +1 -1
  209. package/menu/internal/menu.d.ts +43 -12
  210. package/menu/internal/menu.js +124 -57
  211. package/menu/internal/menu.js.map +1 -1
  212. package/menu/internal/menuitem/harness.js.map +1 -1
  213. package/menu/internal/menuitem/menu-item.d.ts +3 -2
  214. package/menu/internal/menuitem/menu-item.js +18 -19
  215. package/menu/internal/menuitem/menu-item.js.map +1 -1
  216. package/menu/internal/submenu/sub-menu.d.ts +8 -8
  217. package/menu/internal/submenu/sub-menu.js +31 -22
  218. package/menu/internal/submenu/sub-menu.js.map +1 -1
  219. package/menu/internal/types.js.map +1 -1
  220. package/package.json +1 -1
  221. package/progress/internal/_circular-progress.scss +2 -2
  222. package/progress/internal/_linear-progress.scss +1 -1
  223. package/progress/internal/circular-progress-styles.css.js +1 -1
  224. package/progress/internal/circular-progress-styles.css.js.map +1 -1
  225. package/progress/internal/circular-progress.js +11 -10
  226. package/progress/internal/circular-progress.js.map +1 -1
  227. package/progress/internal/linear-progress-styles.css.js +1 -1
  228. package/progress/internal/linear-progress-styles.css.js.map +1 -1
  229. package/progress/internal/linear-progress.d.ts +1 -1
  230. package/progress/internal/linear-progress.js +3 -3
  231. package/progress/internal/linear-progress.js.map +1 -1
  232. package/progress/internal/progress.js +4 -2
  233. package/progress/internal/progress.js.map +1 -1
  234. package/radio/internal/radio.d.ts +11 -27
  235. package/radio/internal/radio.js +30 -54
  236. package/radio/internal/radio.js.map +1 -1
  237. package/radio/internal/single-selection-controller.js +1 -1
  238. package/radio/internal/single-selection-controller.js.map +1 -1
  239. package/ripple/internal/ripple.js +14 -9
  240. package/ripple/internal/ripple.js.map +1 -1
  241. package/select/filled-select.js +1 -2
  242. package/select/filled-select.js.map +1 -1
  243. package/select/harness.js +1 -1
  244. package/select/harness.js.map +1 -1
  245. package/select/internal/select.d.ts +25 -34
  246. package/select/internal/select.js +101 -91
  247. package/select/internal/select.js.map +1 -1
  248. package/select/internal/selectoption/select-option.d.ts +8 -6
  249. package/select/internal/selectoption/select-option.js +23 -22
  250. package/select/internal/selectoption/select-option.js.map +1 -1
  251. package/select/internal/selectoption/selectOptionController.js +1 -1
  252. package/select/internal/selectoption/selectOptionController.js.map +1 -1
  253. package/select/outlined-select.js +1 -2
  254. package/select/outlined-select.js.map +1 -1
  255. package/slider/harness.js +5 -5
  256. package/slider/harness.js.map +1 -1
  257. package/slider/internal/slider.d.ts +16 -25
  258. package/slider/internal/slider.js +110 -114
  259. package/slider/internal/slider.js.map +1 -1
  260. package/switch/internal/switch.d.ts +9 -25
  261. package/switch/internal/switch.js +31 -57
  262. package/switch/internal/switch.js.map +1 -1
  263. package/tabs/harness.js +3 -3
  264. package/tabs/harness.js.map +1 -1
  265. package/tabs/internal/_tab.scss +27 -35
  266. package/tabs/internal/primary-tab.d.ts +0 -2
  267. package/tabs/internal/tab-styles.css.js +1 -1
  268. package/tabs/internal/tab-styles.css.js.map +1 -1
  269. package/tabs/internal/tab.d.ts +4 -5
  270. package/tabs/internal/tab.js +34 -22
  271. package/tabs/internal/tab.js.map +1 -1
  272. package/tabs/internal/tabs.d.ts +6 -2
  273. package/tabs/internal/tabs.js +18 -11
  274. package/tabs/internal/tabs.js.map +1 -1
  275. package/textfield/filled-text-field.js +1 -2
  276. package/textfield/filled-text-field.js.map +1 -1
  277. package/textfield/harness.js +3 -2
  278. package/textfield/harness.js.map +1 -1
  279. package/textfield/internal/text-field.d.ts +26 -18
  280. package/textfield/internal/text-field.js +81 -58
  281. package/textfield/internal/text-field.js.map +1 -1
  282. package/textfield/outlined-text-field.js +1 -2
  283. package/textfield/outlined-text-field.js.map +1 -1
  284. package/tokens/_index.scss +3 -0
  285. package/tokens/_md-comp-elevated-card.scss +63 -0
  286. package/tokens/_md-comp-filled-card.scss +63 -0
  287. package/tokens/_md-comp-icon.scss +2 -0
  288. package/tokens/_md-comp-outlined-card.scss +69 -0
  289. package/tokens/_md-comp-test-table.scss +1 -0
  290. package/internal/controller/element-internals.d.ts +0 -35
  291. package/internal/controller/element-internals.js +0 -24
  292. package/internal/controller/element-internals.js.map +0 -1
  293. package/select/internal/filled-forced-colors-styles.css.js +0 -9
  294. package/select/internal/filled-forced-colors-styles.css.js.map +0 -1
  295. package/select/internal/filled-forced-colors-styles.scss +0 -29
  296. package/select/internal/outlined-forced-colors-styles.css.js +0 -9
  297. package/select/internal/outlined-forced-colors-styles.css.js.map +0 -1
  298. package/select/internal/outlined-forced-colors-styles.scss +0 -29
  299. package/textfield/internal/filled-forced-colors-styles.css.js +0 -9
  300. package/textfield/internal/filled-forced-colors-styles.css.js.map +0 -1
  301. package/textfield/internal/filled-forced-colors-styles.scss +0 -29
  302. package/textfield/internal/outlined-forced-colors-styles.css.js +0 -9
  303. package/textfield/internal/outlined-forced-colors-styles.css.js.map +0 -1
  304. package/textfield/internal/outlined-forced-colors-styles.scss +0 -29
  305. /package/{select/internal/filled-forced-colors-styles.css.d.ts → labs/card/internal/elevated-styles.css.d.ts} +0 -0
  306. /package/{select/internal/outlined-forced-colors-styles.css.d.ts → labs/card/internal/filled-styles.css.d.ts} +0 -0
  307. /package/{textfield/internal/filled-forced-colors-styles.css.d.ts → labs/card/internal/outlined-styles.css.d.ts} +0 -0
  308. /package/{textfield/internal/outlined-forced-colors-styles.css.d.ts → labs/card/internal/shared-styles.css.d.ts} +0 -0
package/menu/internal/menu.d.ts CHANGED
@@ -3,8 +3,8 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import '../../focus/md-focus-ring.js';
7
6
  import '../../elevation/elevation.js';
7
+ import '../../focus/md-focus-ring.js';
8
8
  import { LitElement, PropertyValues } from 'lit';
9
9
  import { MenuItem } from './controllers/menuItemController.js';
10
10
  import { FocusState } from './controllers/shared.js';
@@ -16,10 +16,10 @@ export { Corner } from './controllers/surfacePositionController.js';
16
16
  */
17
17
  export declare const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
18
18
  /**
19
- * @fires opening Fired before the opening animation begins
20
- * @fires opened Fired once the menu is open, after any animations
21
- * @fires closing Fired before the closing animation begins
22
- * @fires closed Fired once the menu is closed, after any animations
19
+ * @fires opening {Event} Fired before the opening animation begins
20
+ * @fires opened {Event} Fired once the menu is open, after any animations
21
+ * @fires closing {Event} Fired before the closing animation begins
22
+ * @fires closed {Event} Fired once the menu is closed, after any animations
23
23
  */
24
24
  export declare abstract class Menu extends LitElement {
25
25
  private readonly surfaceEl;
@@ -34,9 +34,12 @@ export declare abstract class Menu extends LitElement {
34
34
  anchor: string;
35
35
  /**
36
36
  * Whether the positioning algorithim should calculate relative to the parent
37
- * of the anchor element (absolute) or relative to the window (fixed).
37
+ * of the anchor element (`absolute`), relative to the window (`fixed`), or
38
+ * relative to the document (`document`). `popover` will use the popover API
39
+ * to render the menu in the top-layer. If your browser does not support the
40
+ * popover API, it will fall back to `fixed`.
38
41
  *
39
- * Examples for `position = 'fixed'`:
42
+ * __Examples for `position = 'fixed'`:__
40
43
  *
41
44
  * - If there is no `position:relative` in the given parent tree and the
42
45
  * surface is `position:absolute`
@@ -45,20 +48,36 @@ export declare abstract class Menu extends LitElement {
45
48
  * - The anchor and the surface do not share a common `position:relative`
46
49
  * ancestor
47
50
  *
48
- * When using positioning = fixed, in most cases, the menu should position
51
+ * When using `positioning=fixed`, in most cases, the menu should position
49
52
  * itself above most other `position:absolute` or `position:fixed` elements
50
53
  * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
51
54
  *
52
55
  * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
53
56
  * the window instead.
57
+ *
58
+ * __Examples for `position = 'document'`:__
59
+ *
60
+ * - There is no parent that creates a relative positioning context e.g.
61
+ * `position: relative`, `position: absolute`, `transform: translate(x, y)`,
62
+ * etc.
63
+ * - You put the effort into hoisting the menu to the top of the DOM like the
64
+ * end of the `<body>` to render over everything or in a top-layer.
65
+ * - You are reusing a single `md-menu` element that dynamically renders
66
+ * content.
67
+ *
68
+ * __Examples for `position = 'popover'`:__
69
+ *
70
+ * - Your browser supports `popover`.
71
+ * - Most cases. Once popover is in browsers, this will become the default.
54
72
  */
55
- positioning: 'absolute' | 'fixed';
73
+ positioning: 'absolute' | 'fixed' | 'document' | 'popover';
56
74
  /**
57
75
  * Skips the opening and closing animations.
58
76
  */
59
77
  quick: boolean;
60
78
  /**
61
- * Displays overflow content like a submenu.
79
+ * Displays overflow content like a submenu. Not required in most cases when
80
+ * using `positioning="popover"`.
62
81
  *
63
82
  * __NOTE__: This may cause adverse effects if you set
64
83
  * `md-menu {max-height:...}`
@@ -147,6 +166,10 @@ export declare abstract class Menu extends LitElement {
147
166
  * The event path of the last window pointerdown event.
148
167
  */
149
168
  private pointerPath;
169
+ /**
170
+ * Whether or not the menu is repositoining due to window / document resize
171
+ */
172
+ private isRepositioning;
150
173
  private readonly openCloseAnimationSignal;
151
174
  private readonly listController;
152
175
  /**
@@ -168,8 +191,8 @@ export declare abstract class Menu extends LitElement {
168
191
  * non-empty idref string, then `anchorEl` will resolve to the element with
169
192
  * the given id in the same root node. Otherwise, `null`.
170
193
  */
171
- get anchorElement(): HTMLElement & Partial<SurfacePositionTarget> | null;
172
- set anchorElement(element: HTMLElement & Partial<SurfacePositionTarget> | null);
194
+ get anchorElement(): (HTMLElement & Partial<SurfacePositionTarget>) | null;
195
+ set anchorElement(element: (HTMLElement & Partial<SurfacePositionTarget>) | null);
173
196
  private readonly internals;
174
197
  constructor();
175
198
  /**
@@ -184,6 +207,7 @@ export declare abstract class Menu extends LitElement {
184
207
  get items(): MenuItem[];
185
208
  protected willUpdate(changed: PropertyValues<Menu>): void;
186
209
  update(changed: PropertyValues<Menu>): void;
210
+ private readonly onWindowResize;
187
211
  connectedCallback(): void;
188
212
  disconnectedCallback(): void;
189
213
  protected render(): import("lit-html").TemplateResult<1>;
@@ -263,4 +287,11 @@ export declare abstract class Menu extends LitElement {
263
287
  * @return The activated menu item or `null` if there are no items.
264
288
  */
265
289
  activatePreviousItem(): MenuItem;
290
+ /**
291
+ * Repositions the menu if it is open.
292
+ *
293
+ * Useful for the case where document or window-positioned menus have their
294
+ * anchors moved while open.
295
+ */
296
+ reposition(): void;
266
297
  }
package/menu/internal/menu.js CHANGED
@@ -4,18 +4,18 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { __decorate } from "tslib";
7
- import '../../focus/md-focus-ring.js';
8
7
  import '../../elevation/elevation.js';
9
- import { html, isServer, LitElement } from 'lit';
8
+ import '../../focus/md-focus-ring.js';
9
+ import { LitElement, html, isServer, nothing } from 'lit';
10
10
  import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
11
11
  import { classMap } from 'lit/directives/class-map.js';
12
12
  import { styleMap } from 'lit/directives/style-map.js';
13
- import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
14
- import { createAnimationSignal, EASING } from '../../internal/motion/animation.js';
15
- import { ListController, NavigableKeys } from '../../list/internal/list-controller.js';
16
- import { getActiveItem, getFirstActivatableItem, getLastActivatableItem } from '../../list/internal/list-navigation-helpers.js';
17
- import { FocusState, isClosableKey, isElementInSubtree } from './controllers/shared.js';
18
- import { Corner, SurfacePositionController } from './controllers/surfacePositionController.js';
13
+ import { polyfillARIAMixin, polyfillElementInternalsAria, } from '../../internal/aria/aria.js';
14
+ import { EASING, createAnimationSignal } from '../../internal/motion/animation.js';
15
+ import { ListController, NavigableKeys, } from '../../list/internal/list-controller.js';
16
+ import { getActiveItem, getFirstActivatableItem, getLastActivatableItem, } from '../../list/internal/list-navigation-helpers.js';
17
+ import { FocusState, isClosableKey, isElementInSubtree, } from './controllers/shared.js';
18
+ import { Corner, SurfacePositionController, } from './controllers/surfacePositionController.js';
19
19
  import { TypeaheadController } from './controllers/typeaheadController.js';
20
20
  export { Corner } from './controllers/surfacePositionController.js';
21
21
  /**
@@ -50,10 +50,10 @@ function getFocusedElement(activeDoc = document) {
50
50
  return activeEl;
51
51
  }
52
52
  /**
53
- * @fires opening Fired before the opening animation begins
54
- * @fires opened Fired once the menu is open, after any animations
55
- * @fires closing Fired before the closing animation begins
56
- * @fires closed Fired once the menu is closed, after any animations
53
+ * @fires opening {Event} Fired before the opening animation begins
54
+ * @fires opened {Event} Fired once the menu is open, after any animations
55
+ * @fires closing {Event} Fired before the closing animation begins
56
+ * @fires closed {Event} Fired once the menu is closed, after any animations
57
57
  */
58
58
  export class Menu extends LitElement {
59
59
  /**
@@ -71,8 +71,7 @@ export class Menu extends LitElement {
71
71
  */
72
72
  get anchorElement() {
73
73
  if (this.anchor) {
74
- return this.getRootNode()
75
- .querySelector(`#${this.anchor}`);
74
+ return this.getRootNode().querySelector(`#${this.anchor}`);
76
75
  }
77
76
  return this.currentAnchorElement;
78
77
  }
@@ -92,9 +91,12 @@ export class Menu extends LitElement {
92
91
  this.anchor = '';
93
92
  /**
94
93
  * Whether the positioning algorithim should calculate relative to the parent
95
- * of the anchor element (absolute) or relative to the window (fixed).
94
+ * of the anchor element (`absolute`), relative to the window (`fixed`), or
95
+ * relative to the document (`document`). `popover` will use the popover API
96
+ * to render the menu in the top-layer. If your browser does not support the
97
+ * popover API, it will fall back to `fixed`.
96
98
  *
97
- * Examples for `position = 'fixed'`:
99
+ * __Examples for `position = 'fixed'`:__
98
100
  *
99
101
  * - If there is no `position:relative` in the given parent tree and the
100
102
  * surface is `position:absolute`
@@ -103,12 +105,27 @@ export class Menu extends LitElement {
103
105
  * - The anchor and the surface do not share a common `position:relative`
104
106
  * ancestor
105
107
  *
106
- * When using positioning = fixed, in most cases, the menu should position
108
+ * When using `positioning=fixed`, in most cases, the menu should position
107
109
  * itself above most other `position:absolute` or `position:fixed` elements
108
110
  * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
109
111
  *
110
112
  * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
111
113
  * the window instead.
114
+ *
115
+ * __Examples for `position = 'document'`:__
116
+ *
117
+ * - There is no parent that creates a relative positioning context e.g.
118
+ * `position: relative`, `position: absolute`, `transform: translate(x, y)`,
119
+ * etc.
120
+ * - You put the effort into hoisting the menu to the top of the DOM like the
121
+ * end of the `<body>` to render over everything or in a top-layer.
122
+ * - You are reusing a single `md-menu` element that dynamically renders
123
+ * content.
124
+ *
125
+ * __Examples for `position = 'popover'`:__
126
+ *
127
+ * - Your browser supports `popover`.
128
+ * - Most cases. Once popover is in browsers, this will become the default.
112
129
  */
113
130
  this.positioning = 'absolute';
114
131
  /**
@@ -116,7 +133,8 @@ export class Menu extends LitElement {
116
133
  */
117
134
  this.quick = false;
118
135
  /**
119
- * Displays overflow content like a submenu.
136
+ * Displays overflow content like a submenu. Not required in most cases when
137
+ * using `positioning="popover"`.
120
138
  *
121
139
  * __NOTE__: This may cause adverse effects if you set
122
140
  * `md-menu {max-height:...}`
@@ -204,13 +222,17 @@ export class Menu extends LitElement {
204
222
  * The event path of the last window pointerdown event.
205
223
  */
206
224
  this.pointerPath = [];
225
+ /**
226
+ * Whether or not the menu is repositoining due to window / document resize
227
+ */
228
+ this.isRepositioning = false;
207
229
  this.openCloseAnimationSignal = createAnimationSignal();
208
230
  this.listController = new ListController({
209
231
  isItem: (maybeItem) => {
210
232
  return maybeItem.hasAttribute('md-menu-item');
211
233
  },
212
234
  getPossibleItems: () => this.slotItems,
213
- isRtl: () => (getComputedStyle(this).direction === 'rtl'),
235
+ isRtl: () => getComputedStyle(this).direction === 'rtl',
214
236
  deactivateItem: (item) => {
215
237
  item.selected = false;
216
238
  item.tabIndex = -1;
@@ -228,7 +250,9 @@ export class Menu extends LitElement {
228
250
  // key so it can close the menu instead of navigate the list.
229
251
  // Therefore we need to include all keys but left/right arrow close
230
252
  // key
231
- const arrowOpen = isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
253
+ const arrowOpen = isRtl
254
+ ? NavigableKeys.ArrowLeft
255
+ : NavigableKeys.ArrowRight;
232
256
  if (key === arrowOpen) {
233
257
  return true;
234
258
  }
@@ -246,11 +270,13 @@ export class Menu extends LitElement {
246
270
  return {
247
271
  getItems: () => this.items,
248
272
  typeaheadBufferTime: this.typeaheadDelay,
249
- active: this.typeaheadActive
273
+ active: this.typeaheadActive,
250
274
  };
251
275
  });
252
276
  this.currentAnchorElement = null;
253
- this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
277
+ this.internals = polyfillElementInternalsAria(this,
278
+ // Cast needed for closure
279
+ this.attachInternals());
254
280
  /**
255
281
  * Handles positioning the surface and aligning it to the anchor as well as
256
282
  * keeping it in the viewport.
@@ -261,7 +287,7 @@ export class Menu extends LitElement {
261
287
  surfaceCorner: this.menuCorner,
262
288
  surfaceEl: this.surfaceEl,
263
289
  anchorEl: this.anchorElement,
264
- positioning: this.positioning,
290
+ positioning: this.positioning === 'popover' ? 'document' : this.positioning,
265
291
  isOpen: this.open,
266
292
  xOffset: this.xOffset,
267
293
  yOffset: this.yOffset,
@@ -270,16 +296,32 @@ export class Menu extends LitElement {
270
296
  onClose: this.onClosed,
271
297
  // We can't resize components that have overflow like menus with
272
298
  // submenus because the overflow-y will show menu items / content
273
- // outside the bounds of the menu. (to be fixed w/ popover API)
274
- repositionStrategy: this.hasOverflow ? 'move' : 'resize',
299
+ // outside the bounds of the menu. Popover API fixes this because each
300
+ // submenu is hoisted to the top-layer and are not considered overflow
301
+ // content.
302
+ repositionStrategy: this.hasOverflow && this.positioning !== 'popover'
303
+ ? 'move'
304
+ : 'resize',
275
305
  };
276
306
  });
307
+ this.onWindowResize = () => {
308
+ if (this.isRepositioning ||
309
+ (this.positioning !== 'document' &&
310
+ this.positioning !== 'fixed' &&
311
+ this.positioning !== 'popover')) {
312
+ return;
313
+ }
314
+ this.isRepositioning = true;
315
+ this.reposition();
316
+ this.isRepositioning = false;
317
+ };
277
318
  this.handleFocusout = async (event) => {
278
319
  const anchorEl = this.anchorElement;
279
320
  // Do not close if we focused out by clicking on the anchor element. We
280
321
  // can't assume anchor buttons can be the related target because of iOS does
281
322
  // not focus buttons.
282
- if (this.stayOpenOnFocusout || !this.open ||
323
+ if (this.stayOpenOnFocusout ||
324
+ !this.open ||
283
325
  this.pointerPath.includes(anchorEl)) {
284
326
  return;
285
327
  }
@@ -321,7 +363,7 @@ export class Menu extends LitElement {
321
363
  this.dispatchEvent(new Event('opening'));
322
364
  }
323
365
  else {
324
- animationAborted = !!await this.animateOpen();
366
+ animationAborted = !!(await this.animateOpen());
325
367
  }
326
368
  // This must come after the opening animation or else it may focus one of
327
369
  // the items before the animation has begun and causes the list to slide
@@ -389,7 +431,8 @@ export class Menu extends LitElement {
389
431
  return;
390
432
  }
391
433
  const path = event.composedPath();
392
- if (!this.stayOpenOnOutsideClick && !path.includes(this) &&
434
+ if (!this.stayOpenOnOutsideClick &&
435
+ !path.includes(this) &&
393
436
  !path.includes(this.anchorElement)) {
394
437
  this.open = false;
395
438
  }
@@ -430,6 +473,13 @@ export class Menu extends LitElement {
430
473
  this.cleanUpGlobalEventListeners();
431
474
  }
432
475
  }
476
+ // Firefox does not support popover. Fall-back to using fixed.
477
+ if (changed.has('positioning') &&
478
+ this.positioning === 'popover' &&
479
+ // type required for Google JS conformance
480
+ !this.showPopover) {
481
+ this.positioning = 'fixed';
482
+ }
433
483
  super.update(changed);
434
484
  }
435
485
  connectedCallback() {
@@ -450,31 +500,30 @@ export class Menu extends LitElement {
450
500
  */
451
501
  renderSurface() {
452
502
  return html `
453
- <div
454
- class="menu ${classMap(this.getSurfaceClasses())}"
455
- style=${styleMap(this.menuPositionController.surfaceStyles)}>
503
+ <div
504
+ class="menu ${classMap(this.getSurfaceClasses())}"
505
+ style=${styleMap(this.menuPositionController.surfaceStyles)}
506
+ popover=${this.positioning === 'popover' ? 'manual' : nothing}>
456
507
  ${this.renderElevation()}
457
508
  <div class="items">
458
- <div class="item-padding">
459
- ${this.renderMenuItems()}
460
- </div>
509
+ <div class="item-padding"> ${this.renderMenuItems()} </div>
461
510
  </div>
462
- </div>
463
- `;
511
+ </div>
512
+ `;
464
513
  }
465
514
  /**
466
515
  * Renders the menu items' slot
467
516
  */
468
517
  renderMenuItems() {
469
518
  return html `<slot
470
- @close-menu=${this.onCloseMenu}
471
- @deactivate-items=${this.onDeactivateItems}
472
- @request-activation=${this.onRequestActivation}
473
- @deactivate-typeahead=${this.handleDeactivateTypeahead}
474
- @activate-typeahead=${this.handleActivateTypeahead}
475
- @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
476
- @close-on-focusout=${this.handleCloseOnFocusout}
477
- @slotchange=${this.listController.onSlotchange}></slot>`;
519
+ @close-menu=${this.onCloseMenu}
520
+ @deactivate-items=${this.onDeactivateItems}
521
+ @request-activation=${this.onRequestActivation}
522
+ @deactivate-typeahead=${this.handleDeactivateTypeahead}
523
+ @activate-typeahead=${this.handleActivateTypeahead}
524
+ @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
525
+ @close-on-focusout=${this.handleCloseOnFocusout}
526
+ @slotchange=${this.listController.onSlotchange}></slot>`;
478
527
  }
479
528
  /**
480
529
  * Renders the elevation component.
@@ -490,7 +539,8 @@ export class Menu extends LitElement {
490
539
  };
491
540
  }
492
541
  captureKeydown(event) {
493
- if (event.target === this && !event.defaultPrevented &&
542
+ if (event.target === this &&
543
+ !event.defaultPrevented &&
494
544
  isClosableKey(event.code)) {
495
545
  event.preventDefault();
496
546
  this.close();
@@ -534,7 +584,7 @@ export class Menu extends LitElement {
534
584
  // height animation
535
585
  const upPositionCorrectionAnimation = slotEl.animate([
536
586
  { transform: openingUpwards ? `translateY(-${height}px)` : '' },
537
- { transform: '' }
587
+ { transform: '' },
538
588
  ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED });
539
589
  const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 0 }, { opacity: 1 }], SURFACE_OPACITY_DURATION);
540
590
  const childrenAnimations = [];
@@ -610,7 +660,7 @@ export class Menu extends LitElement {
610
660
  const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;
611
661
  const ITEM_OPACITY_DURATION = 50;
612
662
  const ITEM_OPACITY_INITIAL_DELAY = 50;
613
- const END_HEIGHT_PERCENTAGE = .35;
663
+ const END_HEIGHT_PERCENTAGE = 0.35;
614
664
  // We want to fit every child fade-out animation within the full duration of
615
665
  // the animation.
616
666
  const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
@@ -618,7 +668,7 @@ export class Menu extends LitElement {
618
668
  // The mock has the animation shrink to 35%
619
669
  const surfaceHeightAnimation = surfaceEl.animate([
620
670
  { height: `${height}px` },
621
- { height: `${height * END_HEIGHT_PERCENTAGE}px` }
671
+ { height: `${height * END_HEIGHT_PERCENTAGE}px` },
622
672
  ], {
623
673
  duration: FULL_DURATION,
624
674
  easing: EASING.EMPHASIZED_ACCELERATE,
@@ -627,11 +677,12 @@ export class Menu extends LitElement {
627
677
  // always in view, so we need to translate it upwards the opposite direction
628
678
  // of the height animation
629
679
  const downPositionCorrectionAnimation = slotEl.animate([
630
- { transform: '' }, {
631
- transform: closingDownwards ?
632
- `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)` :
633
- ''
634
- }
680
+ { transform: '' },
681
+ {
682
+ transform: closingDownwards
683
+ ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
684
+ : '',
685
+ },
635
686
  ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE });
636
687
  const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 1 }, { opacity: 0 }], { duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY });
637
688
  const childrenAnimations = [];
@@ -682,10 +733,16 @@ export class Menu extends LitElement {
682
733
  setUpGlobalEventListeners() {
683
734
  document.addEventListener('click', this.onDocumentClick, { capture: true });
684
735
  window.addEventListener('pointerdown', this.onWindowPointerdown);
736
+ document.addEventListener('resize', this.onWindowResize, { passive: true });
737
+ window.addEventListener('resize', this.onWindowResize, { passive: true });
685
738
  }
686
739
  cleanUpGlobalEventListeners() {
687
- document.removeEventListener('click', this.onDocumentClick, { capture: true });
740
+ document.removeEventListener('click', this.onDocumentClick, {
741
+ capture: true,
742
+ });
688
743
  window.removeEventListener('pointerdown', this.onWindowPointerdown);
744
+ document.removeEventListener('resize', this.onWindowResize);
745
+ window.removeEventListener('resize', this.onWindowResize);
689
746
  }
690
747
  onCloseMenu() {
691
748
  this.close();
@@ -721,7 +778,7 @@ export class Menu extends LitElement {
721
778
  close() {
722
779
  this.open = false;
723
780
  const maybeSubmenu = this.slotItems;
724
- maybeSubmenu.forEach(item => {
781
+ maybeSubmenu.forEach((item) => {
725
782
  item.close?.();
726
783
  });
727
784
  }
@@ -746,10 +803,20 @@ export class Menu extends LitElement {
746
803
  activatePreviousItem() {
747
804
  return this.listController.activatePreviousItem() ?? null;
748
805
  }
806
+ /**
807
+ * Repositions the menu if it is open.
808
+ *
809
+ * Useful for the case where document or window-positioned menus have their
810
+ * anchors moved while open.
811
+ */
812
+ reposition() {
813
+ if (this.open) {
814
+ this.menuPositionController.position();
815
+ }
816
+ }
749
817
  }
750
818
  (() => {
751
- // We want to manage tabindex ourselves.
752
- setupHostAria(Menu, { focusable: false });
819
+ polyfillARIAMixin(Menu);
753
820
  })();
754
821
  __decorate([
755
822
  query('.menu')