@universal-material/web 3.8.0 → 3.9.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 (429) hide show
  1. package/.claude-plugin/plugin.json +12 -0
  2. package/README.md +12 -0
  3. package/app-bar/top-app-bar.d.ts +7 -6
  4. package/app-bar/top-app-bar.d.ts.map +1 -1
  5. package/app-bar/top-app-bar.js +71 -35
  6. package/app-bar/top-app-bar.js.map +1 -1
  7. package/app-bar/top-app-bar.styles.d.ts.map +1 -1
  8. package/app-bar/top-app-bar.styles.js +18 -1
  9. package/app-bar/top-app-bar.styles.js.map +1 -1
  10. package/badge/badge.d.ts +2 -2
  11. package/badge/badge.d.ts.map +1 -1
  12. package/badge/badge.js +6 -6
  13. package/badge/badge.js.map +1 -1
  14. package/badge/badge.styles.d.ts.map +1 -1
  15. package/badge/badge.styles.js +1 -0
  16. package/badge/badge.styles.js.map +1 -1
  17. package/bundle.min.js +4469 -1277
  18. package/button/button-base.d.ts +2 -2
  19. package/button/button-base.d.ts.map +1 -1
  20. package/button/button-base.js +5 -5
  21. package/button/button-base.js.map +1 -1
  22. package/button/button-set.d.ts +3 -3
  23. package/button/button-set.d.ts.map +1 -1
  24. package/button/button-set.js +7 -7
  25. package/button/button-set.js.map +1 -1
  26. package/button/button.d.ts +7 -7
  27. package/button/button.d.ts.map +1 -1
  28. package/button/button.js +14 -14
  29. package/button/button.js.map +1 -1
  30. package/button/fab-menu-color-context.d.ts +2 -2
  31. package/button/fab-menu-color-context.d.ts.map +1 -1
  32. package/button/fab-menu-color-context.js.map +1 -1
  33. package/button/fab-menu-item.d.ts +3 -3
  34. package/button/fab-menu-item.d.ts.map +1 -1
  35. package/button/fab-menu-item.js +11 -11
  36. package/button/fab-menu-item.js.map +1 -1
  37. package/button/fab-menu.d.ts +20 -5
  38. package/button/fab-menu.d.ts.map +1 -1
  39. package/button/fab-menu.js +48 -11
  40. package/button/fab-menu.js.map +1 -1
  41. package/button/fab.d.ts +22 -7
  42. package/button/fab.d.ts.map +1 -1
  43. package/button/fab.js +49 -11
  44. package/button/fab.js.map +1 -1
  45. package/button/icon-button.d.ts +7 -7
  46. package/button/icon-button.d.ts.map +1 -1
  47. package/button/icon-button.js +8 -8
  48. package/button/icon-button.js.map +1 -1
  49. package/button/toggle-button.d.ts +6 -6
  50. package/button/toggle-button.d.ts.map +1 -1
  51. package/button/toggle-button.js +10 -10
  52. package/button/toggle-button.js.map +1 -1
  53. package/button-field/button-field.d.ts +3 -3
  54. package/button-field/button-field.d.ts.map +1 -1
  55. package/button-field/button-field.js +9 -9
  56. package/button-field/button-field.js.map +1 -1
  57. package/calendar/calendar-base.d.ts +1 -1
  58. package/calendar/calendar-base.d.ts.map +1 -1
  59. package/calendar/calendar-base.js +10 -10
  60. package/calendar/calendar-base.js.map +1 -1
  61. package/calendar/calendar.d.ts +2 -2
  62. package/calendar/calendar.d.ts.map +1 -1
  63. package/calendar/calendar.js +8 -8
  64. package/calendar/calendar.js.map +1 -1
  65. package/calendar/range-calendar.d.ts +2 -2
  66. package/calendar/range-calendar.d.ts.map +1 -1
  67. package/calendar/range-calendar.js +9 -9
  68. package/calendar/range-calendar.js.map +1 -1
  69. package/card/card-content.d.ts +2 -2
  70. package/card/card-content.d.ts.map +1 -1
  71. package/card/card-content.js +5 -5
  72. package/card/card-content.js.map +1 -1
  73. package/card/card-media.d.ts +2 -2
  74. package/card/card-media.d.ts.map +1 -1
  75. package/card/card-media.js +5 -5
  76. package/card/card-media.js.map +1 -1
  77. package/card/card.d.ts +4 -4
  78. package/card/card.d.ts.map +1 -1
  79. package/card/card.js +5 -5
  80. package/card/card.js.map +1 -1
  81. package/checkbox/checkbox-list-item.d.ts +4 -4
  82. package/checkbox/checkbox-list-item.d.ts.map +1 -1
  83. package/checkbox/checkbox-list-item.js +5 -5
  84. package/checkbox/checkbox-list-item.js.map +1 -1
  85. package/checkbox/checkbox.d.ts +3 -3
  86. package/checkbox/checkbox.d.ts.map +1 -1
  87. package/checkbox/checkbox.js +7 -7
  88. package/checkbox/checkbox.js.map +1 -1
  89. package/chip/chip-set.d.ts +3 -3
  90. package/chip/chip-set.d.ts.map +1 -1
  91. package/chip/chip-set.js +6 -6
  92. package/chip/chip-set.js.map +1 -1
  93. package/chip/chip.d.ts +5 -5
  94. package/chip/chip.d.ts.map +1 -1
  95. package/chip/chip.js +20 -20
  96. package/chip/chip.js.map +1 -1
  97. package/chip-field/chip-field.d.ts +3 -3
  98. package/chip-field/chip-field.d.ts.map +1 -1
  99. package/chip-field/chip-field.js +9 -9
  100. package/chip-field/chip-field.js.map +1 -1
  101. package/collapse/collapse.d.ts +26 -0
  102. package/collapse/collapse.d.ts.map +1 -0
  103. package/collapse/collapse.js +62 -0
  104. package/collapse/collapse.js.map +1 -0
  105. package/collapse/collapse.styles.d.ts +2 -0
  106. package/collapse/collapse.styles.d.ts.map +1 -0
  107. package/collapse/collapse.styles.js +8 -0
  108. package/collapse/collapse.styles.js.map +1 -0
  109. package/config.js.map +1 -1
  110. package/css/universal-material.css +2 -1
  111. package/css/universal-material.min.css +2 -1
  112. package/custom-elements.json +16615 -12152
  113. package/datepicker/datepicker.d.ts +6 -4
  114. package/datepicker/datepicker.d.ts.map +1 -1
  115. package/datepicker/datepicker.js +33 -19
  116. package/datepicker/datepicker.js.map +1 -1
  117. package/datepicker/datepicker.styles.d.ts.map +1 -1
  118. package/datepicker/datepicker.styles.js +25 -0
  119. package/datepicker/datepicker.styles.js.map +1 -1
  120. package/datepicker/range-datepicker.d.ts +6 -4
  121. package/datepicker/range-datepicker.d.ts.map +1 -1
  122. package/datepicker/range-datepicker.js +33 -19
  123. package/datepicker/range-datepicker.js.map +1 -1
  124. package/dialog/confirm-dialog-builder.d.ts +3 -3
  125. package/dialog/confirm-dialog-builder.d.ts.map +1 -1
  126. package/dialog/confirm-dialog-builder.js.map +1 -1
  127. package/dialog/dialog-builder.d.ts +5 -4
  128. package/dialog/dialog-builder.d.ts.map +1 -1
  129. package/dialog/dialog-builder.js +10 -3
  130. package/dialog/dialog-builder.js.map +1 -1
  131. package/dialog/dialog-button-def.d.ts +3 -3
  132. package/dialog/dialog-button-def.d.ts.map +1 -1
  133. package/dialog/dialog-button-def.js.map +1 -1
  134. package/dialog/dialog.d.ts +2 -2
  135. package/dialog/dialog.d.ts.map +1 -1
  136. package/dialog/dialog.js +14 -14
  137. package/dialog/dialog.js.map +1 -1
  138. package/dialog/message-dialog-builder.d.ts +2 -2
  139. package/dialog/message-dialog-builder.d.ts.map +1 -1
  140. package/dialog/message-dialog-builder.js.map +1 -1
  141. package/elevation/elevation.d.ts +2 -2
  142. package/elevation/elevation.d.ts.map +1 -1
  143. package/elevation/elevation.js +4 -4
  144. package/elevation/elevation.js.map +1 -1
  145. package/expansion-panel/expansion-panel-container.d.ts +24 -0
  146. package/expansion-panel/expansion-panel-container.d.ts.map +1 -0
  147. package/expansion-panel/expansion-panel-container.js +54 -0
  148. package/expansion-panel/expansion-panel-container.js.map +1 -0
  149. package/expansion-panel/expansion-panel-container.styles.d.ts +2 -0
  150. package/expansion-panel/expansion-panel-container.styles.d.ts.map +1 -0
  151. package/expansion-panel/expansion-panel-container.styles.js +9 -0
  152. package/expansion-panel/expansion-panel-container.styles.js.map +1 -0
  153. package/expansion-panel/expansion-panel.d.ts +37 -0
  154. package/expansion-panel/expansion-panel.d.ts.map +1 -0
  155. package/expansion-panel/expansion-panel.js +89 -0
  156. package/expansion-panel/expansion-panel.js.map +1 -0
  157. package/expansion-panel/expansion-panel.styles.d.ts +2 -0
  158. package/expansion-panel/expansion-panel.styles.d.ts.map +1 -0
  159. package/expansion-panel/expansion-panel.styles.js +66 -0
  160. package/expansion-panel/expansion-panel.styles.js.map +1 -0
  161. package/field/field-base.d.ts +3 -3
  162. package/field/field-base.d.ts.map +1 -1
  163. package/field/field-base.js +20 -20
  164. package/field/field-base.js.map +1 -1
  165. package/field/field-defaults-context.d.ts +2 -2
  166. package/field/field-defaults-context.d.ts.map +1 -1
  167. package/field/field-defaults-context.js.map +1 -1
  168. package/field/field-defaults.d.ts +3 -3
  169. package/field/field-defaults.d.ts.map +1 -1
  170. package/field/field-defaults.js.map +1 -1
  171. package/field/field-variant.d.ts +1 -1
  172. package/field/field-variant.d.ts.map +1 -1
  173. package/field/field-variant.js.map +1 -1
  174. package/field/field.d.ts +3 -3
  175. package/field/field.d.ts.map +1 -1
  176. package/field/field.js +6 -6
  177. package/field/field.js.map +1 -1
  178. package/icon/icon.d.ts +2 -2
  179. package/icon/icon.d.ts.map +1 -1
  180. package/icon/icon.js +4 -4
  181. package/icon/icon.js.map +1 -1
  182. package/index.d.ts +24 -1
  183. package/index.d.ts.map +1 -1
  184. package/index.js +24 -1
  185. package/index.js.map +1 -1
  186. package/list/list-item.d.ts +16 -2
  187. package/list/list-item.d.ts.map +1 -1
  188. package/list/list-item.js +26 -6
  189. package/list/list-item.js.map +1 -1
  190. package/list/list-item.styles.d.ts.map +1 -1
  191. package/list/list-item.styles.js +13 -0
  192. package/list/list-item.styles.js.map +1 -1
  193. package/list/list.d.ts +2 -2
  194. package/list/list.d.ts.map +1 -1
  195. package/list/list.js +4 -4
  196. package/list/list.js.map +1 -1
  197. package/menu/menu-item.d.ts +3 -3
  198. package/menu/menu-item.d.ts.map +1 -1
  199. package/menu/menu-item.js +10 -10
  200. package/menu/menu-item.js.map +1 -1
  201. package/menu/menu.d.ts +2 -2
  202. package/menu/menu.d.ts.map +1 -1
  203. package/menu/menu.js +13 -13
  204. package/menu/menu.js.map +1 -1
  205. package/navigation/drawer-headline.d.ts +2 -2
  206. package/navigation/drawer-headline.d.ts.map +1 -1
  207. package/navigation/drawer-headline.js +6 -6
  208. package/navigation/drawer-headline.js.map +1 -1
  209. package/navigation/drawer-item.d.ts +3 -3
  210. package/navigation/drawer-item.d.ts.map +1 -1
  211. package/navigation/drawer-item.js +17 -12
  212. package/navigation/drawer-item.js.map +1 -1
  213. package/navigation/drawer.d.ts +2 -2
  214. package/navigation/drawer.d.ts.map +1 -1
  215. package/navigation/drawer.js +4 -4
  216. package/navigation/drawer.js.map +1 -1
  217. package/navigation/side-navigation.d.ts +9 -2
  218. package/navigation/side-navigation.d.ts.map +1 -1
  219. package/navigation/side-navigation.js +15 -8
  220. package/navigation/side-navigation.js.map +1 -1
  221. package/navigation-bar/navigation-bar-item.d.ts +40 -0
  222. package/navigation-bar/navigation-bar-item.d.ts.map +1 -0
  223. package/navigation-bar/navigation-bar-item.js +113 -0
  224. package/navigation-bar/navigation-bar-item.js.map +1 -0
  225. package/navigation-bar/navigation-bar-item.styles.d.ts +2 -0
  226. package/navigation-bar/navigation-bar-item.styles.d.ts.map +1 -0
  227. package/navigation-bar/navigation-bar-item.styles.js +101 -0
  228. package/navigation-bar/navigation-bar-item.styles.js.map +1 -0
  229. package/navigation-bar/navigation-bar.d.ts +40 -0
  230. package/navigation-bar/navigation-bar.d.ts.map +1 -0
  231. package/navigation-bar/navigation-bar.js +85 -0
  232. package/navigation-bar/navigation-bar.js.map +1 -0
  233. package/navigation-bar/navigation-bar.styles.d.ts +2 -0
  234. package/navigation-bar/navigation-bar.styles.d.ts.map +1 -0
  235. package/navigation-bar/navigation-bar.styles.js +44 -0
  236. package/navigation-bar/navigation-bar.styles.js.map +1 -0
  237. package/navigation-rail/navigation-rail-headline.d.ts +23 -0
  238. package/navigation-rail/navigation-rail-headline.d.ts.map +1 -0
  239. package/navigation-rail/navigation-rail-headline.js +28 -0
  240. package/navigation-rail/navigation-rail-headline.js.map +1 -0
  241. package/navigation-rail/navigation-rail-headline.styles.d.ts +2 -0
  242. package/navigation-rail/navigation-rail-headline.styles.d.ts.map +1 -0
  243. package/navigation-rail/navigation-rail-headline.styles.js +19 -0
  244. package/navigation-rail/navigation-rail-headline.styles.js.map +1 -0
  245. package/navigation-rail/navigation-rail-item.d.ts +58 -0
  246. package/navigation-rail/navigation-rail-item.d.ts.map +1 -0
  247. package/navigation-rail/navigation-rail-item.js +160 -0
  248. package/navigation-rail/navigation-rail-item.js.map +1 -0
  249. package/navigation-rail/navigation-rail-item.styles.d.ts +2 -0
  250. package/navigation-rail/navigation-rail-item.styles.d.ts.map +1 -0
  251. package/navigation-rail/navigation-rail-item.styles.js +182 -0
  252. package/navigation-rail/navigation-rail-item.styles.js.map +1 -0
  253. package/navigation-rail/navigation-rail.d.ts +66 -0
  254. package/navigation-rail/navigation-rail.d.ts.map +1 -0
  255. package/navigation-rail/navigation-rail.js +223 -0
  256. package/navigation-rail/navigation-rail.js.map +1 -0
  257. package/navigation-rail/navigation-rail.styles.d.ts +2 -0
  258. package/navigation-rail/navigation-rail.styles.d.ts.map +1 -0
  259. package/navigation-rail/navigation-rail.styles.js +220 -0
  260. package/navigation-rail/navigation-rail.styles.js.map +1 -0
  261. package/overflow-menu/overflow-menu.d.ts +8 -2
  262. package/overflow-menu/overflow-menu.d.ts.map +1 -1
  263. package/overflow-menu/overflow-menu.js +10 -1
  264. package/overflow-menu/overflow-menu.js.map +1 -1
  265. package/package.json +19 -3
  266. package/progress/circular-progress.d.ts +2 -2
  267. package/progress/circular-progress.d.ts.map +1 -1
  268. package/progress/circular-progress.js +6 -6
  269. package/progress/circular-progress.js.map +1 -1
  270. package/progress/progress-bar.d.ts +2 -2
  271. package/progress/progress-bar.d.ts.map +1 -1
  272. package/progress/progress-bar.js +6 -6
  273. package/progress/progress-bar.js.map +1 -1
  274. package/radio/radio-list-item.d.ts +4 -4
  275. package/radio/radio-list-item.d.ts.map +1 -1
  276. package/radio/radio-list-item.js +5 -5
  277. package/radio/radio-list-item.js.map +1 -1
  278. package/radio/radio.d.ts +3 -3
  279. package/radio/radio.d.ts.map +1 -1
  280. package/radio/radio.js +6 -6
  281. package/radio/radio.js.map +1 -1
  282. package/ripple/ripple.d.ts +2 -2
  283. package/ripple/ripple.d.ts.map +1 -1
  284. package/ripple/ripple.js +9 -9
  285. package/ripple/ripple.js.map +1 -1
  286. package/scaffold/pane.d.ts +127 -0
  287. package/scaffold/pane.d.ts.map +1 -0
  288. package/scaffold/pane.js +220 -0
  289. package/scaffold/pane.js.map +1 -0
  290. package/scaffold/pane.styles.d.ts +2 -0
  291. package/scaffold/pane.styles.d.ts.map +1 -0
  292. package/scaffold/pane.styles.js +1909 -0
  293. package/scaffold/pane.styles.js.map +1 -0
  294. package/scaffold/scaffold.d.ts +45 -0
  295. package/scaffold/scaffold.d.ts.map +1 -0
  296. package/scaffold/scaffold.js +170 -0
  297. package/scaffold/scaffold.js.map +1 -0
  298. package/scaffold/scaffold.styles.d.ts +2 -0
  299. package/scaffold/scaffold.styles.d.ts.map +1 -0
  300. package/scaffold/scaffold.styles.js +69 -0
  301. package/scaffold/scaffold.styles.js.map +1 -0
  302. package/scaffold/scroll-container-context.d.ts +4 -0
  303. package/scaffold/scroll-container-context.d.ts.map +1 -0
  304. package/scaffold/scroll-container-context.js +3 -0
  305. package/scaffold/scroll-container-context.js.map +1 -0
  306. package/scss/utilities/_divider.scss +4 -0
  307. package/search/search.d.ts +3 -3
  308. package/search/search.d.ts.map +1 -1
  309. package/search/search.js +7 -7
  310. package/search/search.js.map +1 -1
  311. package/search/search.styles.d.ts.map +1 -1
  312. package/search/search.styles.js +7 -2
  313. package/search/search.styles.js.map +1 -1
  314. package/select/option.d.ts +3 -3
  315. package/select/option.d.ts.map +1 -1
  316. package/select/option.js +8 -8
  317. package/select/option.js.map +1 -1
  318. package/select/select-navigation-controller.d.ts +4 -4
  319. package/select/select-navigation-controller.d.ts.map +1 -1
  320. package/select/select-navigation-controller.js.map +1 -1
  321. package/select/select.d.ts +18 -12
  322. package/select/select.d.ts.map +1 -1
  323. package/select/select.js +77 -31
  324. package/select/select.js.map +1 -1
  325. package/shared/button-wrapper.d.ts +1 -1
  326. package/shared/button-wrapper.d.ts.map +1 -1
  327. package/shared/button-wrapper.js +8 -8
  328. package/shared/button-wrapper.js.map +1 -1
  329. package/shared/char-count-text-field/native-text-field-wrapper.d.ts +2 -2
  330. package/shared/char-count-text-field/native-text-field-wrapper.d.ts.map +1 -1
  331. package/shared/char-count-text-field/native-text-field-wrapper.js +6 -6
  332. package/shared/char-count-text-field/native-text-field-wrapper.js.map +1 -1
  333. package/shared/menu-field/menu-field-navigation-controller.d.ts +3 -3
  334. package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
  335. package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
  336. package/shared/menu-field/menu-field.d.ts +5 -5
  337. package/shared/menu-field/menu-field.d.ts.map +1 -1
  338. package/shared/menu-field/menu-field.js.map +1 -1
  339. package/shared/selection-control/selection-control-list-item.d.ts +2 -2
  340. package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
  341. package/shared/selection-control/selection-control-list-item.js +10 -1
  342. package/shared/selection-control/selection-control-list-item.js.map +1 -1
  343. package/shared/selection-control/selection-control.d.ts +1 -1
  344. package/shared/selection-control/selection-control.d.ts.map +1 -1
  345. package/shared/selection-control/selection-control.js +15 -7
  346. package/shared/selection-control/selection-control.js.map +1 -1
  347. package/shared/sets/set-base.d.ts +1 -1
  348. package/shared/sets/set-base.d.ts.map +1 -1
  349. package/shared/sets/set-base.js +2 -2
  350. package/shared/sets/set-base.js.map +1 -1
  351. package/shared/text-field-base/text-field-base.d.ts +34 -2
  352. package/shared/text-field-base/text-field-base.d.ts.map +1 -1
  353. package/shared/text-field-base/text-field-base.js +63 -4
  354. package/shared/text-field-base/text-field-base.js.map +1 -1
  355. package/skills/badge/SKILL.md +43 -0
  356. package/skills/buttons/SKILL.md +115 -0
  357. package/skills/card/SKILL.md +162 -0
  358. package/skills/chips/SKILL.md +95 -0
  359. package/skills/collapse/SKILL.md +37 -0
  360. package/skills/datepicker/SKILL.md +110 -0
  361. package/skills/dialog/SKILL.md +92 -0
  362. package/skills/drawer/SKILL.md +94 -0
  363. package/skills/expansion-panel/SKILL.md +65 -0
  364. package/skills/fab/SKILL.md +79 -0
  365. package/skills/list/SKILL.md +105 -0
  366. package/skills/menu/SKILL.md +120 -0
  367. package/skills/navigation-bar/SKILL.md +87 -0
  368. package/skills/navigation-rail/SKILL.md +127 -0
  369. package/skills/overview/SKILL.md +44 -0
  370. package/skills/progress/SKILL.md +63 -0
  371. package/skills/scaffold/SKILL.md +392 -0
  372. package/skills/search/SKILL.md +65 -0
  373. package/skills/select/SKILL.md +120 -0
  374. package/skills/selection-controls/SKILL.md +88 -0
  375. package/skills/setup/SKILL.md +58 -0
  376. package/skills/slider/SKILL.md +119 -0
  377. package/skills/snackbar/SKILL.md +70 -0
  378. package/skills/tab-bar/SKILL.md +55 -0
  379. package/skills/text-field/SKILL.md +114 -0
  380. package/skills/theming/SKILL.md +80 -0
  381. package/skills/top-app-bar/SKILL.md +64 -0
  382. package/skills/typeahead/SKILL.md +113 -0
  383. package/slider/slider.d.ts +73 -0
  384. package/slider/slider.d.ts.map +1 -0
  385. package/slider/slider.js +506 -0
  386. package/slider/slider.js.map +1 -0
  387. package/slider/slider.styles.d.ts +2 -0
  388. package/slider/slider.styles.d.ts.map +1 -0
  389. package/slider/slider.styles.js +292 -0
  390. package/slider/slider.styles.js.map +1 -0
  391. package/snackbar/snackbar.d.ts +4 -4
  392. package/snackbar/snackbar.d.ts.map +1 -1
  393. package/snackbar/snackbar.js +28 -28
  394. package/snackbar/snackbar.js.map +1 -1
  395. package/snackbar/snackbar.styles.js +1 -1
  396. package/snackbar/snackbar.styles.js.map +1 -1
  397. package/switch/switch-list-item.d.ts +4 -4
  398. package/switch/switch-list-item.d.ts.map +1 -1
  399. package/switch/switch-list-item.js +5 -5
  400. package/switch/switch-list-item.js.map +1 -1
  401. package/switch/switch.d.ts +3 -3
  402. package/switch/switch.d.ts.map +1 -1
  403. package/switch/switch.js +5 -5
  404. package/switch/switch.js.map +1 -1
  405. package/tab-bar/tab-bar.d.ts +6 -6
  406. package/tab-bar/tab-bar.d.ts.map +1 -1
  407. package/tab-bar/tab-bar.js +40 -23
  408. package/tab-bar/tab-bar.js.map +1 -1
  409. package/tab-bar/tab.d.ts +5 -5
  410. package/tab-bar/tab.d.ts.map +1 -1
  411. package/tab-bar/tab.js +9 -9
  412. package/tab-bar/tab.js.map +1 -1
  413. package/text-area/text-area.d.ts +3 -3
  414. package/text-area/text-area.d.ts.map +1 -1
  415. package/text-area/text-area.js +9 -9
  416. package/text-area/text-area.js.map +1 -1
  417. package/text-field/text-field.d.ts +15 -3
  418. package/text-field/text-field.d.ts.map +1 -1
  419. package/text-field/text-field.js +46 -13
  420. package/text-field/text-field.js.map +1 -1
  421. package/typeahead/highlight.d.ts +2 -2
  422. package/typeahead/highlight.d.ts.map +1 -1
  423. package/typeahead/highlight.js +7 -7
  424. package/typeahead/highlight.js.map +1 -1
  425. package/typeahead/typeahead.d.ts +7 -7
  426. package/typeahead/typeahead.d.ts.map +1 -1
  427. package/typeahead/typeahead.js +22 -18
  428. package/typeahead/typeahead.js.map +1 -1
  429. package/vscode.html-custom-data.json +870 -481
package/scaffold/pane.styles.js ADDED
@@ -0,0 +1,1909 @@
1
+ import { css } from 'lit';
2
+ export const styles = css `
3
+ :host {
4
+ display: block;
5
+ min-height: 0;
6
+ --u-pane-transition: 300ms cubic-bezier(0.19, 1, 0.22, 1);
7
+ --_u-pane-variant-bg: transparent;
8
+ --_u-pane-variant-radius: 0;
9
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
10
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
11
+ --_u-pane-box-shadow: none;
12
+ --_u-pane-drawer-width: 100%;
13
+ --_u-pane-slide-distance: -100%;
14
+ --_u-pane-shape-corner-end: 0;
15
+ }
16
+
17
+ .container {
18
+ height: 100%;
19
+ display: flex;
20
+ flex-direction: column;
21
+ min-height: 0;
22
+ overflow: hidden;
23
+ box-sizing: border-box;
24
+ background-color: var(--_u-pane-bg-color);
25
+ border-radius: var(--_u-pane-shape-corner);
26
+ box-shadow: var(--_u-pane-box-shadow);
27
+ }
28
+
29
+ .header {
30
+ flex: 0 0 auto;
31
+ }
32
+
33
+ .content {
34
+ flex: 1 1 auto;
35
+ min-height: 0;
36
+ overflow: auto;
37
+ }
38
+
39
+ :host([variant=filled]) {
40
+ --_u-pane-variant-bg: var(--u-pane-filled-bg-color,
41
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
42
+ --_u-pane-variant-radius: var(--u-pane-filled-shape-corner,
43
+ var(--u-shape-corner-medium, 12px));
44
+ }
45
+
46
+ :host([variant=transparent]) {
47
+ --_u-pane-variant-bg: transparent;
48
+ --_u-pane-variant-radius: 0;
49
+ }
50
+
51
+ @media (max-width: 839.98px) {
52
+ :host([variant=filled]) {
53
+ --_u-pane-variant-radius: 0;
54
+ }
55
+ }
56
+ .scrim {
57
+ position: fixed;
58
+ inset: 0;
59
+ background-color: var(--u-pane-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));
60
+ opacity: 0;
61
+ pointer-events: none;
62
+ transition: opacity var(--u-pane-transition);
63
+ display: none;
64
+ }
65
+
66
+ :host([mode=fixed]) {
67
+ display: block;
68
+ position: relative;
69
+ flex: 0 1 auto;
70
+ height: auto;
71
+ inset: auto;
72
+ z-index: auto;
73
+ pointer-events: auto;
74
+ opacity: 1;
75
+ transition: none;
76
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
77
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
78
+ --_u-pane-box-shadow: none;
79
+ }
80
+
81
+ :host([mode=fixed]) .container {
82
+ position: relative;
83
+ inset: auto;
84
+ width: auto;
85
+ transition: none;
86
+ opacity: 1;
87
+ }
88
+
89
+ :host([mode=fixed]) .scrim {
90
+ display: none;
91
+ }
92
+
93
+ :host([mode=collapsible]) {
94
+ display: block;
95
+ position: relative;
96
+ flex: 0 1 auto;
97
+ height: auto;
98
+ inset: auto;
99
+ z-index: auto;
100
+ pointer-events: auto;
101
+ opacity: 1;
102
+ margin-inline-start: 0;
103
+ margin-inline-end: 0;
104
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
105
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
106
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
107
+ --_u-pane-box-shadow: none;
108
+ --_u-pane-collapsed-offset: calc(
109
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
110
+ );
111
+ }
112
+
113
+ :host([mode=collapsible]:where(:not([open]))) {
114
+ margin-inline-start: var(--_u-pane-collapsed-offset);
115
+ display: none;
116
+ }
117
+
118
+ :host([mode=collapsible]:where([data-align=end]:not([open]))) {
119
+ margin-inline-start: 0;
120
+ margin-inline-end: var(--_u-pane-collapsed-offset);
121
+ }
122
+
123
+ @starting-style {
124
+ :host([mode=collapsible]:where([open])) {
125
+ margin-inline-start: var(--_u-pane-collapsed-offset);
126
+ }
127
+ :host([mode=collapsible]:where([data-align=end][open])) {
128
+ margin-inline-start: 0;
129
+ margin-inline-end: var(--_u-pane-collapsed-offset);
130
+ }
131
+ }
132
+ :host([mode=collapsible]) .container {
133
+ position: relative;
134
+ inset: auto;
135
+ width: auto;
136
+ transition: none;
137
+ opacity: 1;
138
+ }
139
+
140
+ :host([mode=collapsible]) .scrim {
141
+ display: none;
142
+ }
143
+
144
+ :host([mode=sidebar]) {
145
+ display: block;
146
+ position: fixed;
147
+ inset: 0;
148
+ z-index: var(--u-pane-z-index, 1030);
149
+ pointer-events: none;
150
+ flex: none;
151
+ width: auto;
152
+ height: auto;
153
+ opacity: 1;
154
+ transition: none;
155
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
156
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
157
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
158
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
159
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
160
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
161
+ }
162
+
163
+ :host([mode=sidebar]) .container {
164
+ position: absolute;
165
+ inset-block: 0;
166
+ inset-inline-start: var(--_u-pane-slide-distance);
167
+ inset-inline-end: auto;
168
+ width: var(--_u-pane-drawer-width);
169
+ transition: inset var(--u-pane-transition);
170
+ pointer-events: auto;
171
+ border-radius: var(--_u-pane-shape-corner);
172
+ }
173
+
174
+ :host([mode=sidebar]:where([open])) .container {
175
+ inset-inline-start: 0;
176
+ }
177
+
178
+ :host([mode=sidebar]:where([data-align=end])) .container {
179
+ inset-inline-start: auto;
180
+ inset-inline-end: var(--_u-pane-slide-distance);
181
+ border-start-end-radius: 0;
182
+ border-end-end-radius: 0;
183
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
184
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
185
+ }
186
+
187
+ :host([mode=sidebar]:where([data-align=end][open])) .container {
188
+ inset-inline-end: 0;
189
+ }
190
+
191
+ :host([mode=sidebar]) .scrim {
192
+ display: block;
193
+ }
194
+
195
+ :host([mode=sidebar]:where([open])) .scrim {
196
+ opacity: var(--u-pane-scrim-opacity, 0.4);
197
+ pointer-events: auto;
198
+ }
199
+
200
+ :host([mode=fullscreen]) {
201
+ display: block;
202
+ position: fixed;
203
+ inset: 0;
204
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
205
+ pointer-events: none;
206
+ flex: none;
207
+ width: auto;
208
+ height: auto;
209
+ opacity: 1;
210
+ transition: none;
211
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
212
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
213
+ --_u-pane-shape-corner: 0;
214
+ --_u-pane-shape-corner-end: 0;
215
+ --_u-pane-box-shadow: none;
216
+ --_u-pane-drawer-width: 100%;
217
+ --_u-pane-slide-distance: -100%;
218
+ }
219
+
220
+ :host([mode=fullscreen]) .container {
221
+ position: absolute;
222
+ inset-block: 0;
223
+ inset-inline-start: var(--_u-pane-slide-distance);
224
+ inset-inline-end: auto;
225
+ width: 100%;
226
+ transition: inset var(--u-pane-transition);
227
+ pointer-events: auto;
228
+ }
229
+
230
+ :host([mode=fullscreen]:where([open])) .container {
231
+ inset-inline-start: 0;
232
+ }
233
+
234
+ :host([mode=fullscreen]:where([data-align=end])) .container {
235
+ inset-inline-start: auto;
236
+ inset-inline-end: var(--_u-pane-slide-distance);
237
+ }
238
+
239
+ :host([mode=fullscreen]:where([data-align=end][open])) .container {
240
+ inset-inline-end: 0;
241
+ }
242
+
243
+ :host([mode=fullscreen]) .scrim {
244
+ display: none;
245
+ }
246
+
247
+ @media (min-width: 600px) {
248
+ :host(:where(:not([query-context=container]))[mode-sm=fixed]) {
249
+ display: block;
250
+ position: relative;
251
+ flex: 0 1 auto;
252
+ height: auto;
253
+ inset: auto;
254
+ z-index: auto;
255
+ pointer-events: auto;
256
+ opacity: 1;
257
+ transition: none;
258
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
259
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
260
+ --_u-pane-box-shadow: none;
261
+ }
262
+ :host(:where(:not([query-context=container]))[mode-sm=fixed]) .container {
263
+ position: relative;
264
+ inset: auto;
265
+ width: auto;
266
+ transition: none;
267
+ opacity: 1;
268
+ }
269
+ :host(:where(:not([query-context=container]))[mode-sm=fixed]) .scrim {
270
+ display: none;
271
+ }
272
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]) {
273
+ display: block;
274
+ position: relative;
275
+ flex: 0 1 auto;
276
+ height: auto;
277
+ inset: auto;
278
+ z-index: auto;
279
+ pointer-events: auto;
280
+ opacity: 1;
281
+ margin-inline-start: 0;
282
+ margin-inline-end: 0;
283
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
284
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
285
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
286
+ --_u-pane-box-shadow: none;
287
+ --_u-pane-collapsed-offset: calc(
288
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
289
+ );
290
+ }
291
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where(:not([open]))) {
292
+ margin-inline-start: var(--_u-pane-collapsed-offset);
293
+ display: none;
294
+ }
295
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where([data-align=end]:not([open]))) {
296
+ margin-inline-start: 0;
297
+ margin-inline-end: var(--_u-pane-collapsed-offset);
298
+ }
299
+ @starting-style {
300
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where([open])) {
301
+ margin-inline-start: var(--_u-pane-collapsed-offset);
302
+ }
303
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where([data-align=end][open])) {
304
+ margin-inline-start: 0;
305
+ margin-inline-end: var(--_u-pane-collapsed-offset);
306
+ }
307
+ }
308
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]) .container {
309
+ position: relative;
310
+ inset: auto;
311
+ width: auto;
312
+ transition: none;
313
+ opacity: 1;
314
+ }
315
+ :host(:where(:not([query-context=container]))[mode-sm=collapsible]) .scrim {
316
+ display: none;
317
+ }
318
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]) {
319
+ display: block;
320
+ position: fixed;
321
+ inset: 0;
322
+ z-index: var(--u-pane-z-index, 1030);
323
+ pointer-events: none;
324
+ flex: none;
325
+ width: auto;
326
+ height: auto;
327
+ opacity: 1;
328
+ transition: none;
329
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
330
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
331
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
332
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
333
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
334
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
335
+ }
336
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]) .container {
337
+ position: absolute;
338
+ inset-block: 0;
339
+ inset-inline-start: var(--_u-pane-slide-distance);
340
+ inset-inline-end: auto;
341
+ width: var(--_u-pane-drawer-width);
342
+ transition: inset var(--u-pane-transition);
343
+ pointer-events: auto;
344
+ border-radius: var(--_u-pane-shape-corner);
345
+ }
346
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([open])) .container {
347
+ inset-inline-start: 0;
348
+ }
349
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([data-align=end])) .container {
350
+ inset-inline-start: auto;
351
+ inset-inline-end: var(--_u-pane-slide-distance);
352
+ border-start-end-radius: 0;
353
+ border-end-end-radius: 0;
354
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
355
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
356
+ }
357
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([data-align=end][open])) .container {
358
+ inset-inline-end: 0;
359
+ }
360
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]) .scrim {
361
+ display: block;
362
+ }
363
+ :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([open])) .scrim {
364
+ opacity: var(--u-pane-scrim-opacity, 0.4);
365
+ pointer-events: auto;
366
+ }
367
+ :host(:where(:not([query-context=container]))[mode-sm=fullscreen]) {
368
+ display: block;
369
+ position: fixed;
370
+ inset: 0;
371
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
372
+ pointer-events: none;
373
+ flex: none;
374
+ width: auto;
375
+ height: auto;
376
+ opacity: 1;
377
+ transition: none;
378
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
379
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
380
+ --_u-pane-shape-corner: 0;
381
+ --_u-pane-shape-corner-end: 0;
382
+ --_u-pane-box-shadow: none;
383
+ --_u-pane-drawer-width: 100%;
384
+ --_u-pane-slide-distance: -100%;
385
+ }
386
+ :host(:where(:not([query-context=container]))[mode-sm=fullscreen]) .container {
387
+ position: absolute;
388
+ inset-block: 0;
389
+ inset-inline-start: var(--_u-pane-slide-distance);
390
+ inset-inline-end: auto;
391
+ width: 100%;
392
+ transition: inset var(--u-pane-transition);
393
+ pointer-events: auto;
394
+ }
395
+ :host(:where(:not([query-context=container]))[mode-sm=fullscreen]:where([open])) .container {
396
+ inset-inline-start: 0;
397
+ }
398
+ :host(:where(:not([query-context=container]))[mode-sm=fullscreen]:where([data-align=end])) .container {
399
+ inset-inline-start: auto;
400
+ inset-inline-end: var(--_u-pane-slide-distance);
401
+ }
402
+ :host(:where(:not([query-context=container]))[mode-sm=fullscreen]:where([data-align=end][open])) .container {
403
+ inset-inline-end: 0;
404
+ }
405
+ :host(:where(:not([query-context=container]))[mode-sm=fullscreen]) .scrim {
406
+ display: none;
407
+ }
408
+ }
409
+ @container (min-width: 600px) {
410
+ :host(:where([query-context=container])[mode-sm=fixed]) {
411
+ display: block;
412
+ position: relative;
413
+ flex: 0 1 auto;
414
+ height: auto;
415
+ inset: auto;
416
+ z-index: auto;
417
+ pointer-events: auto;
418
+ opacity: 1;
419
+ transition: none;
420
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
421
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
422
+ --_u-pane-box-shadow: none;
423
+ }
424
+ :host(:where([query-context=container])[mode-sm=fixed]) .container {
425
+ position: relative;
426
+ inset: auto;
427
+ width: auto;
428
+ transition: none;
429
+ opacity: 1;
430
+ }
431
+ :host(:where([query-context=container])[mode-sm=fixed]) .scrim {
432
+ display: none;
433
+ }
434
+ :host(:where([query-context=container])[mode-sm=collapsible]) {
435
+ display: block;
436
+ position: relative;
437
+ flex: 0 1 auto;
438
+ height: auto;
439
+ inset: auto;
440
+ z-index: auto;
441
+ pointer-events: auto;
442
+ opacity: 1;
443
+ margin-inline-start: 0;
444
+ margin-inline-end: 0;
445
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
446
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
447
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
448
+ --_u-pane-box-shadow: none;
449
+ --_u-pane-collapsed-offset: calc(
450
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
451
+ );
452
+ }
453
+ :host(:where([query-context=container])[mode-sm=collapsible]:where(:not([open]))) {
454
+ margin-inline-start: var(--_u-pane-collapsed-offset);
455
+ display: none;
456
+ }
457
+ :host(:where([query-context=container])[mode-sm=collapsible]:where([data-align=end]:not([open]))) {
458
+ margin-inline-start: 0;
459
+ margin-inline-end: var(--_u-pane-collapsed-offset);
460
+ }
461
+ @starting-style {
462
+ :host(:where([query-context=container])[mode-sm=collapsible]:where([open])) {
463
+ margin-inline-start: var(--_u-pane-collapsed-offset);
464
+ }
465
+ :host(:where([query-context=container])[mode-sm=collapsible]:where([data-align=end][open])) {
466
+ margin-inline-start: 0;
467
+ margin-inline-end: var(--_u-pane-collapsed-offset);
468
+ }
469
+ }
470
+ :host(:where([query-context=container])[mode-sm=collapsible]) .container {
471
+ position: relative;
472
+ inset: auto;
473
+ width: auto;
474
+ transition: none;
475
+ opacity: 1;
476
+ }
477
+ :host(:where([query-context=container])[mode-sm=collapsible]) .scrim {
478
+ display: none;
479
+ }
480
+ :host(:where([query-context=container])[mode-sm=sidebar]) {
481
+ display: block;
482
+ position: fixed;
483
+ inset: 0;
484
+ z-index: var(--u-pane-z-index, 1030);
485
+ pointer-events: none;
486
+ flex: none;
487
+ width: auto;
488
+ height: auto;
489
+ opacity: 1;
490
+ transition: none;
491
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
492
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
493
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
494
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
495
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
496
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
497
+ }
498
+ :host(:where([query-context=container])[mode-sm=sidebar]) .container {
499
+ position: absolute;
500
+ inset-block: 0;
501
+ inset-inline-start: var(--_u-pane-slide-distance);
502
+ inset-inline-end: auto;
503
+ width: var(--_u-pane-drawer-width);
504
+ transition: inset var(--u-pane-transition);
505
+ pointer-events: auto;
506
+ border-radius: var(--_u-pane-shape-corner);
507
+ }
508
+ :host(:where([query-context=container])[mode-sm=sidebar]:where([open])) .container {
509
+ inset-inline-start: 0;
510
+ }
511
+ :host(:where([query-context=container])[mode-sm=sidebar]:where([data-align=end])) .container {
512
+ inset-inline-start: auto;
513
+ inset-inline-end: var(--_u-pane-slide-distance);
514
+ border-start-end-radius: 0;
515
+ border-end-end-radius: 0;
516
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
517
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
518
+ }
519
+ :host(:where([query-context=container])[mode-sm=sidebar]:where([data-align=end][open])) .container {
520
+ inset-inline-end: 0;
521
+ }
522
+ :host(:where([query-context=container])[mode-sm=sidebar]) .scrim {
523
+ display: block;
524
+ }
525
+ :host(:where([query-context=container])[mode-sm=sidebar]:where([open])) .scrim {
526
+ opacity: var(--u-pane-scrim-opacity, 0.4);
527
+ pointer-events: auto;
528
+ }
529
+ :host(:where([query-context=container])[mode-sm=fullscreen]) {
530
+ display: block;
531
+ position: fixed;
532
+ inset: 0;
533
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
534
+ pointer-events: none;
535
+ flex: none;
536
+ width: auto;
537
+ height: auto;
538
+ opacity: 1;
539
+ transition: none;
540
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
541
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
542
+ --_u-pane-shape-corner: 0;
543
+ --_u-pane-shape-corner-end: 0;
544
+ --_u-pane-box-shadow: none;
545
+ --_u-pane-drawer-width: 100%;
546
+ --_u-pane-slide-distance: -100%;
547
+ }
548
+ :host(:where([query-context=container])[mode-sm=fullscreen]) .container {
549
+ position: absolute;
550
+ inset-block: 0;
551
+ inset-inline-start: var(--_u-pane-slide-distance);
552
+ inset-inline-end: auto;
553
+ width: 100%;
554
+ transition: inset var(--u-pane-transition);
555
+ pointer-events: auto;
556
+ }
557
+ :host(:where([query-context=container])[mode-sm=fullscreen]:where([open])) .container {
558
+ inset-inline-start: 0;
559
+ }
560
+ :host(:where([query-context=container])[mode-sm=fullscreen]:where([data-align=end])) .container {
561
+ inset-inline-start: auto;
562
+ inset-inline-end: var(--_u-pane-slide-distance);
563
+ }
564
+ :host(:where([query-context=container])[mode-sm=fullscreen]:where([data-align=end][open])) .container {
565
+ inset-inline-end: 0;
566
+ }
567
+ :host(:where([query-context=container])[mode-sm=fullscreen]) .scrim {
568
+ display: none;
569
+ }
570
+ }
571
+ @media (min-width: 840px) {
572
+ :host(:where(:not([query-context=container]))[mode-md=fixed]) {
573
+ display: block;
574
+ position: relative;
575
+ flex: 0 1 auto;
576
+ height: auto;
577
+ inset: auto;
578
+ z-index: auto;
579
+ pointer-events: auto;
580
+ opacity: 1;
581
+ transition: none;
582
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
583
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
584
+ --_u-pane-box-shadow: none;
585
+ }
586
+ :host(:where(:not([query-context=container]))[mode-md=fixed]) .container {
587
+ position: relative;
588
+ inset: auto;
589
+ width: auto;
590
+ transition: none;
591
+ opacity: 1;
592
+ }
593
+ :host(:where(:not([query-context=container]))[mode-md=fixed]) .scrim {
594
+ display: none;
595
+ }
596
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]) {
597
+ display: block;
598
+ position: relative;
599
+ flex: 0 1 auto;
600
+ height: auto;
601
+ inset: auto;
602
+ z-index: auto;
603
+ pointer-events: auto;
604
+ opacity: 1;
605
+ margin-inline-start: 0;
606
+ margin-inline-end: 0;
607
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
608
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
609
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
610
+ --_u-pane-box-shadow: none;
611
+ --_u-pane-collapsed-offset: calc(
612
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
613
+ );
614
+ }
615
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]:where(:not([open]))) {
616
+ margin-inline-start: var(--_u-pane-collapsed-offset);
617
+ display: none;
618
+ }
619
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]:where([data-align=end]:not([open]))) {
620
+ margin-inline-start: 0;
621
+ margin-inline-end: var(--_u-pane-collapsed-offset);
622
+ }
623
+ @starting-style {
624
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]:where([open])) {
625
+ margin-inline-start: var(--_u-pane-collapsed-offset);
626
+ }
627
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]:where([data-align=end][open])) {
628
+ margin-inline-start: 0;
629
+ margin-inline-end: var(--_u-pane-collapsed-offset);
630
+ }
631
+ }
632
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]) .container {
633
+ position: relative;
634
+ inset: auto;
635
+ width: auto;
636
+ transition: none;
637
+ opacity: 1;
638
+ }
639
+ :host(:where(:not([query-context=container]))[mode-md=collapsible]) .scrim {
640
+ display: none;
641
+ }
642
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]) {
643
+ display: block;
644
+ position: fixed;
645
+ inset: 0;
646
+ z-index: var(--u-pane-z-index, 1030);
647
+ pointer-events: none;
648
+ flex: none;
649
+ width: auto;
650
+ height: auto;
651
+ opacity: 1;
652
+ transition: none;
653
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
654
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
655
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
656
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
657
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
658
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
659
+ }
660
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]) .container {
661
+ position: absolute;
662
+ inset-block: 0;
663
+ inset-inline-start: var(--_u-pane-slide-distance);
664
+ inset-inline-end: auto;
665
+ width: var(--_u-pane-drawer-width);
666
+ transition: inset var(--u-pane-transition);
667
+ pointer-events: auto;
668
+ border-radius: var(--_u-pane-shape-corner);
669
+ }
670
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([open])) .container {
671
+ inset-inline-start: 0;
672
+ }
673
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([data-align=end])) .container {
674
+ inset-inline-start: auto;
675
+ inset-inline-end: var(--_u-pane-slide-distance);
676
+ border-start-end-radius: 0;
677
+ border-end-end-radius: 0;
678
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
679
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
680
+ }
681
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([data-align=end][open])) .container {
682
+ inset-inline-end: 0;
683
+ }
684
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]) .scrim {
685
+ display: block;
686
+ }
687
+ :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([open])) .scrim {
688
+ opacity: var(--u-pane-scrim-opacity, 0.4);
689
+ pointer-events: auto;
690
+ }
691
+ :host(:where(:not([query-context=container]))[mode-md=fullscreen]) {
692
+ display: block;
693
+ position: fixed;
694
+ inset: 0;
695
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
696
+ pointer-events: none;
697
+ flex: none;
698
+ width: auto;
699
+ height: auto;
700
+ opacity: 1;
701
+ transition: none;
702
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
703
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
704
+ --_u-pane-shape-corner: 0;
705
+ --_u-pane-shape-corner-end: 0;
706
+ --_u-pane-box-shadow: none;
707
+ --_u-pane-drawer-width: 100%;
708
+ --_u-pane-slide-distance: -100%;
709
+ }
710
+ :host(:where(:not([query-context=container]))[mode-md=fullscreen]) .container {
711
+ position: absolute;
712
+ inset-block: 0;
713
+ inset-inline-start: var(--_u-pane-slide-distance);
714
+ inset-inline-end: auto;
715
+ width: 100%;
716
+ transition: inset var(--u-pane-transition);
717
+ pointer-events: auto;
718
+ }
719
+ :host(:where(:not([query-context=container]))[mode-md=fullscreen]:where([open])) .container {
720
+ inset-inline-start: 0;
721
+ }
722
+ :host(:where(:not([query-context=container]))[mode-md=fullscreen]:where([data-align=end])) .container {
723
+ inset-inline-start: auto;
724
+ inset-inline-end: var(--_u-pane-slide-distance);
725
+ }
726
+ :host(:where(:not([query-context=container]))[mode-md=fullscreen]:where([data-align=end][open])) .container {
727
+ inset-inline-end: 0;
728
+ }
729
+ :host(:where(:not([query-context=container]))[mode-md=fullscreen]) .scrim {
730
+ display: none;
731
+ }
732
+ }
733
+ @container (min-width: 840px) {
734
+ :host(:where([query-context=container])[mode-md=fixed]) {
735
+ display: block;
736
+ position: relative;
737
+ flex: 0 1 auto;
738
+ height: auto;
739
+ inset: auto;
740
+ z-index: auto;
741
+ pointer-events: auto;
742
+ opacity: 1;
743
+ transition: none;
744
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
745
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
746
+ --_u-pane-box-shadow: none;
747
+ }
748
+ :host(:where([query-context=container])[mode-md=fixed]) .container {
749
+ position: relative;
750
+ inset: auto;
751
+ width: auto;
752
+ transition: none;
753
+ opacity: 1;
754
+ }
755
+ :host(:where([query-context=container])[mode-md=fixed]) .scrim {
756
+ display: none;
757
+ }
758
+ :host(:where([query-context=container])[mode-md=collapsible]) {
759
+ display: block;
760
+ position: relative;
761
+ flex: 0 1 auto;
762
+ height: auto;
763
+ inset: auto;
764
+ z-index: auto;
765
+ pointer-events: auto;
766
+ opacity: 1;
767
+ margin-inline-start: 0;
768
+ margin-inline-end: 0;
769
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
770
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
771
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
772
+ --_u-pane-box-shadow: none;
773
+ --_u-pane-collapsed-offset: calc(
774
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
775
+ );
776
+ }
777
+ :host(:where([query-context=container])[mode-md=collapsible]:where(:not([open]))) {
778
+ margin-inline-start: var(--_u-pane-collapsed-offset);
779
+ display: none;
780
+ }
781
+ :host(:where([query-context=container])[mode-md=collapsible]:where([data-align=end]:not([open]))) {
782
+ margin-inline-start: 0;
783
+ margin-inline-end: var(--_u-pane-collapsed-offset);
784
+ }
785
+ @starting-style {
786
+ :host(:where([query-context=container])[mode-md=collapsible]:where([open])) {
787
+ margin-inline-start: var(--_u-pane-collapsed-offset);
788
+ }
789
+ :host(:where([query-context=container])[mode-md=collapsible]:where([data-align=end][open])) {
790
+ margin-inline-start: 0;
791
+ margin-inline-end: var(--_u-pane-collapsed-offset);
792
+ }
793
+ }
794
+ :host(:where([query-context=container])[mode-md=collapsible]) .container {
795
+ position: relative;
796
+ inset: auto;
797
+ width: auto;
798
+ transition: none;
799
+ opacity: 1;
800
+ }
801
+ :host(:where([query-context=container])[mode-md=collapsible]) .scrim {
802
+ display: none;
803
+ }
804
+ :host(:where([query-context=container])[mode-md=sidebar]) {
805
+ display: block;
806
+ position: fixed;
807
+ inset: 0;
808
+ z-index: var(--u-pane-z-index, 1030);
809
+ pointer-events: none;
810
+ flex: none;
811
+ width: auto;
812
+ height: auto;
813
+ opacity: 1;
814
+ transition: none;
815
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
816
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
817
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
818
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
819
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
820
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
821
+ }
822
+ :host(:where([query-context=container])[mode-md=sidebar]) .container {
823
+ position: absolute;
824
+ inset-block: 0;
825
+ inset-inline-start: var(--_u-pane-slide-distance);
826
+ inset-inline-end: auto;
827
+ width: var(--_u-pane-drawer-width);
828
+ transition: inset var(--u-pane-transition);
829
+ pointer-events: auto;
830
+ border-radius: var(--_u-pane-shape-corner);
831
+ }
832
+ :host(:where([query-context=container])[mode-md=sidebar]:where([open])) .container {
833
+ inset-inline-start: 0;
834
+ }
835
+ :host(:where([query-context=container])[mode-md=sidebar]:where([data-align=end])) .container {
836
+ inset-inline-start: auto;
837
+ inset-inline-end: var(--_u-pane-slide-distance);
838
+ border-start-end-radius: 0;
839
+ border-end-end-radius: 0;
840
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
841
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
842
+ }
843
+ :host(:where([query-context=container])[mode-md=sidebar]:where([data-align=end][open])) .container {
844
+ inset-inline-end: 0;
845
+ }
846
+ :host(:where([query-context=container])[mode-md=sidebar]) .scrim {
847
+ display: block;
848
+ }
849
+ :host(:where([query-context=container])[mode-md=sidebar]:where([open])) .scrim {
850
+ opacity: var(--u-pane-scrim-opacity, 0.4);
851
+ pointer-events: auto;
852
+ }
853
+ :host(:where([query-context=container])[mode-md=fullscreen]) {
854
+ display: block;
855
+ position: fixed;
856
+ inset: 0;
857
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
858
+ pointer-events: none;
859
+ flex: none;
860
+ width: auto;
861
+ height: auto;
862
+ opacity: 1;
863
+ transition: none;
864
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
865
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
866
+ --_u-pane-shape-corner: 0;
867
+ --_u-pane-shape-corner-end: 0;
868
+ --_u-pane-box-shadow: none;
869
+ --_u-pane-drawer-width: 100%;
870
+ --_u-pane-slide-distance: -100%;
871
+ }
872
+ :host(:where([query-context=container])[mode-md=fullscreen]) .container {
873
+ position: absolute;
874
+ inset-block: 0;
875
+ inset-inline-start: var(--_u-pane-slide-distance);
876
+ inset-inline-end: auto;
877
+ width: 100%;
878
+ transition: inset var(--u-pane-transition);
879
+ pointer-events: auto;
880
+ }
881
+ :host(:where([query-context=container])[mode-md=fullscreen]:where([open])) .container {
882
+ inset-inline-start: 0;
883
+ }
884
+ :host(:where([query-context=container])[mode-md=fullscreen]:where([data-align=end])) .container {
885
+ inset-inline-start: auto;
886
+ inset-inline-end: var(--_u-pane-slide-distance);
887
+ }
888
+ :host(:where([query-context=container])[mode-md=fullscreen]:where([data-align=end][open])) .container {
889
+ inset-inline-end: 0;
890
+ }
891
+ :host(:where([query-context=container])[mode-md=fullscreen]) .scrim {
892
+ display: none;
893
+ }
894
+ }
895
+ @media (min-width: 1200px) {
896
+ :host(:where(:not([query-context=container]))[mode-lg=fixed]) {
897
+ display: block;
898
+ position: relative;
899
+ flex: 0 1 auto;
900
+ height: auto;
901
+ inset: auto;
902
+ z-index: auto;
903
+ pointer-events: auto;
904
+ opacity: 1;
905
+ transition: none;
906
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
907
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
908
+ --_u-pane-box-shadow: none;
909
+ }
910
+ :host(:where(:not([query-context=container]))[mode-lg=fixed]) .container {
911
+ position: relative;
912
+ inset: auto;
913
+ width: auto;
914
+ transition: none;
915
+ opacity: 1;
916
+ }
917
+ :host(:where(:not([query-context=container]))[mode-lg=fixed]) .scrim {
918
+ display: none;
919
+ }
920
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]) {
921
+ display: block;
922
+ position: relative;
923
+ flex: 0 1 auto;
924
+ height: auto;
925
+ inset: auto;
926
+ z-index: auto;
927
+ pointer-events: auto;
928
+ opacity: 1;
929
+ margin-inline-start: 0;
930
+ margin-inline-end: 0;
931
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
932
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
933
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
934
+ --_u-pane-box-shadow: none;
935
+ --_u-pane-collapsed-offset: calc(
936
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
937
+ );
938
+ }
939
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where(:not([open]))) {
940
+ margin-inline-start: var(--_u-pane-collapsed-offset);
941
+ display: none;
942
+ }
943
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where([data-align=end]:not([open]))) {
944
+ margin-inline-start: 0;
945
+ margin-inline-end: var(--_u-pane-collapsed-offset);
946
+ }
947
+ @starting-style {
948
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where([open])) {
949
+ margin-inline-start: var(--_u-pane-collapsed-offset);
950
+ }
951
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where([data-align=end][open])) {
952
+ margin-inline-start: 0;
953
+ margin-inline-end: var(--_u-pane-collapsed-offset);
954
+ }
955
+ }
956
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]) .container {
957
+ position: relative;
958
+ inset: auto;
959
+ width: auto;
960
+ transition: none;
961
+ opacity: 1;
962
+ }
963
+ :host(:where(:not([query-context=container]))[mode-lg=collapsible]) .scrim {
964
+ display: none;
965
+ }
966
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]) {
967
+ display: block;
968
+ position: fixed;
969
+ inset: 0;
970
+ z-index: var(--u-pane-z-index, 1030);
971
+ pointer-events: none;
972
+ flex: none;
973
+ width: auto;
974
+ height: auto;
975
+ opacity: 1;
976
+ transition: none;
977
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
978
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
979
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
980
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
981
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
982
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
983
+ }
984
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]) .container {
985
+ position: absolute;
986
+ inset-block: 0;
987
+ inset-inline-start: var(--_u-pane-slide-distance);
988
+ inset-inline-end: auto;
989
+ width: var(--_u-pane-drawer-width);
990
+ transition: inset var(--u-pane-transition);
991
+ pointer-events: auto;
992
+ border-radius: var(--_u-pane-shape-corner);
993
+ }
994
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([open])) .container {
995
+ inset-inline-start: 0;
996
+ }
997
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([data-align=end])) .container {
998
+ inset-inline-start: auto;
999
+ inset-inline-end: var(--_u-pane-slide-distance);
1000
+ border-start-end-radius: 0;
1001
+ border-end-end-radius: 0;
1002
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1003
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1004
+ }
1005
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([data-align=end][open])) .container {
1006
+ inset-inline-end: 0;
1007
+ }
1008
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]) .scrim {
1009
+ display: block;
1010
+ }
1011
+ :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([open])) .scrim {
1012
+ opacity: var(--u-pane-scrim-opacity, 0.4);
1013
+ pointer-events: auto;
1014
+ }
1015
+ :host(:where(:not([query-context=container]))[mode-lg=fullscreen]) {
1016
+ display: block;
1017
+ position: fixed;
1018
+ inset: 0;
1019
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
1020
+ pointer-events: none;
1021
+ flex: none;
1022
+ width: auto;
1023
+ height: auto;
1024
+ opacity: 1;
1025
+ transition: none;
1026
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1027
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
1028
+ --_u-pane-shape-corner: 0;
1029
+ --_u-pane-shape-corner-end: 0;
1030
+ --_u-pane-box-shadow: none;
1031
+ --_u-pane-drawer-width: 100%;
1032
+ --_u-pane-slide-distance: -100%;
1033
+ }
1034
+ :host(:where(:not([query-context=container]))[mode-lg=fullscreen]) .container {
1035
+ position: absolute;
1036
+ inset-block: 0;
1037
+ inset-inline-start: var(--_u-pane-slide-distance);
1038
+ inset-inline-end: auto;
1039
+ width: 100%;
1040
+ transition: inset var(--u-pane-transition);
1041
+ pointer-events: auto;
1042
+ }
1043
+ :host(:where(:not([query-context=container]))[mode-lg=fullscreen]:where([open])) .container {
1044
+ inset-inline-start: 0;
1045
+ }
1046
+ :host(:where(:not([query-context=container]))[mode-lg=fullscreen]:where([data-align=end])) .container {
1047
+ inset-inline-start: auto;
1048
+ inset-inline-end: var(--_u-pane-slide-distance);
1049
+ }
1050
+ :host(:where(:not([query-context=container]))[mode-lg=fullscreen]:where([data-align=end][open])) .container {
1051
+ inset-inline-end: 0;
1052
+ }
1053
+ :host(:where(:not([query-context=container]))[mode-lg=fullscreen]) .scrim {
1054
+ display: none;
1055
+ }
1056
+ }
1057
+ @container (min-width: 1200px) {
1058
+ :host(:where([query-context=container])[mode-lg=fixed]) {
1059
+ display: block;
1060
+ position: relative;
1061
+ flex: 0 1 auto;
1062
+ height: auto;
1063
+ inset: auto;
1064
+ z-index: auto;
1065
+ pointer-events: auto;
1066
+ opacity: 1;
1067
+ transition: none;
1068
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
1069
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
1070
+ --_u-pane-box-shadow: none;
1071
+ }
1072
+ :host(:where([query-context=container])[mode-lg=fixed]) .container {
1073
+ position: relative;
1074
+ inset: auto;
1075
+ width: auto;
1076
+ transition: none;
1077
+ opacity: 1;
1078
+ }
1079
+ :host(:where([query-context=container])[mode-lg=fixed]) .scrim {
1080
+ display: none;
1081
+ }
1082
+ :host(:where([query-context=container])[mode-lg=collapsible]) {
1083
+ display: block;
1084
+ position: relative;
1085
+ flex: 0 1 auto;
1086
+ height: auto;
1087
+ inset: auto;
1088
+ z-index: auto;
1089
+ pointer-events: auto;
1090
+ opacity: 1;
1091
+ margin-inline-start: 0;
1092
+ margin-inline-end: 0;
1093
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
1094
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
1095
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
1096
+ --_u-pane-box-shadow: none;
1097
+ --_u-pane-collapsed-offset: calc(
1098
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
1099
+ );
1100
+ }
1101
+ :host(:where([query-context=container])[mode-lg=collapsible]:where(:not([open]))) {
1102
+ margin-inline-start: var(--_u-pane-collapsed-offset);
1103
+ display: none;
1104
+ }
1105
+ :host(:where([query-context=container])[mode-lg=collapsible]:where([data-align=end]:not([open]))) {
1106
+ margin-inline-start: 0;
1107
+ margin-inline-end: var(--_u-pane-collapsed-offset);
1108
+ }
1109
+ @starting-style {
1110
+ :host(:where([query-context=container])[mode-lg=collapsible]:where([open])) {
1111
+ margin-inline-start: var(--_u-pane-collapsed-offset);
1112
+ }
1113
+ :host(:where([query-context=container])[mode-lg=collapsible]:where([data-align=end][open])) {
1114
+ margin-inline-start: 0;
1115
+ margin-inline-end: var(--_u-pane-collapsed-offset);
1116
+ }
1117
+ }
1118
+ :host(:where([query-context=container])[mode-lg=collapsible]) .container {
1119
+ position: relative;
1120
+ inset: auto;
1121
+ width: auto;
1122
+ transition: none;
1123
+ opacity: 1;
1124
+ }
1125
+ :host(:where([query-context=container])[mode-lg=collapsible]) .scrim {
1126
+ display: none;
1127
+ }
1128
+ :host(:where([query-context=container])[mode-lg=sidebar]) {
1129
+ display: block;
1130
+ position: fixed;
1131
+ inset: 0;
1132
+ z-index: var(--u-pane-z-index, 1030);
1133
+ pointer-events: none;
1134
+ flex: none;
1135
+ width: auto;
1136
+ height: auto;
1137
+ opacity: 1;
1138
+ transition: none;
1139
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1140
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
1141
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
1142
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
1143
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
1144
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
1145
+ }
1146
+ :host(:where([query-context=container])[mode-lg=sidebar]) .container {
1147
+ position: absolute;
1148
+ inset-block: 0;
1149
+ inset-inline-start: var(--_u-pane-slide-distance);
1150
+ inset-inline-end: auto;
1151
+ width: var(--_u-pane-drawer-width);
1152
+ transition: inset var(--u-pane-transition);
1153
+ pointer-events: auto;
1154
+ border-radius: var(--_u-pane-shape-corner);
1155
+ }
1156
+ :host(:where([query-context=container])[mode-lg=sidebar]:where([open])) .container {
1157
+ inset-inline-start: 0;
1158
+ }
1159
+ :host(:where([query-context=container])[mode-lg=sidebar]:where([data-align=end])) .container {
1160
+ inset-inline-start: auto;
1161
+ inset-inline-end: var(--_u-pane-slide-distance);
1162
+ border-start-end-radius: 0;
1163
+ border-end-end-radius: 0;
1164
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1165
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1166
+ }
1167
+ :host(:where([query-context=container])[mode-lg=sidebar]:where([data-align=end][open])) .container {
1168
+ inset-inline-end: 0;
1169
+ }
1170
+ :host(:where([query-context=container])[mode-lg=sidebar]) .scrim {
1171
+ display: block;
1172
+ }
1173
+ :host(:where([query-context=container])[mode-lg=sidebar]:where([open])) .scrim {
1174
+ opacity: var(--u-pane-scrim-opacity, 0.4);
1175
+ pointer-events: auto;
1176
+ }
1177
+ :host(:where([query-context=container])[mode-lg=fullscreen]) {
1178
+ display: block;
1179
+ position: fixed;
1180
+ inset: 0;
1181
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
1182
+ pointer-events: none;
1183
+ flex: none;
1184
+ width: auto;
1185
+ height: auto;
1186
+ opacity: 1;
1187
+ transition: none;
1188
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1189
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
1190
+ --_u-pane-shape-corner: 0;
1191
+ --_u-pane-shape-corner-end: 0;
1192
+ --_u-pane-box-shadow: none;
1193
+ --_u-pane-drawer-width: 100%;
1194
+ --_u-pane-slide-distance: -100%;
1195
+ }
1196
+ :host(:where([query-context=container])[mode-lg=fullscreen]) .container {
1197
+ position: absolute;
1198
+ inset-block: 0;
1199
+ inset-inline-start: var(--_u-pane-slide-distance);
1200
+ inset-inline-end: auto;
1201
+ width: 100%;
1202
+ transition: inset var(--u-pane-transition);
1203
+ pointer-events: auto;
1204
+ }
1205
+ :host(:where([query-context=container])[mode-lg=fullscreen]:where([open])) .container {
1206
+ inset-inline-start: 0;
1207
+ }
1208
+ :host(:where([query-context=container])[mode-lg=fullscreen]:where([data-align=end])) .container {
1209
+ inset-inline-start: auto;
1210
+ inset-inline-end: var(--_u-pane-slide-distance);
1211
+ }
1212
+ :host(:where([query-context=container])[mode-lg=fullscreen]:where([data-align=end][open])) .container {
1213
+ inset-inline-end: 0;
1214
+ }
1215
+ :host(:where([query-context=container])[mode-lg=fullscreen]) .scrim {
1216
+ display: none;
1217
+ }
1218
+ }
1219
+ @media (min-width: 1600px) {
1220
+ :host(:where(:not([query-context=container]))[mode-xl=fixed]) {
1221
+ display: block;
1222
+ position: relative;
1223
+ flex: 0 1 auto;
1224
+ height: auto;
1225
+ inset: auto;
1226
+ z-index: auto;
1227
+ pointer-events: auto;
1228
+ opacity: 1;
1229
+ transition: none;
1230
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
1231
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
1232
+ --_u-pane-box-shadow: none;
1233
+ }
1234
+ :host(:where(:not([query-context=container]))[mode-xl=fixed]) .container {
1235
+ position: relative;
1236
+ inset: auto;
1237
+ width: auto;
1238
+ transition: none;
1239
+ opacity: 1;
1240
+ }
1241
+ :host(:where(:not([query-context=container]))[mode-xl=fixed]) .scrim {
1242
+ display: none;
1243
+ }
1244
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]) {
1245
+ display: block;
1246
+ position: relative;
1247
+ flex: 0 1 auto;
1248
+ height: auto;
1249
+ inset: auto;
1250
+ z-index: auto;
1251
+ pointer-events: auto;
1252
+ opacity: 1;
1253
+ margin-inline-start: 0;
1254
+ margin-inline-end: 0;
1255
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
1256
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
1257
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
1258
+ --_u-pane-box-shadow: none;
1259
+ --_u-pane-collapsed-offset: calc(
1260
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
1261
+ );
1262
+ }
1263
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where(:not([open]))) {
1264
+ margin-inline-start: var(--_u-pane-collapsed-offset);
1265
+ display: none;
1266
+ }
1267
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where([data-align=end]:not([open]))) {
1268
+ margin-inline-start: 0;
1269
+ margin-inline-end: var(--_u-pane-collapsed-offset);
1270
+ }
1271
+ @starting-style {
1272
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where([open])) {
1273
+ margin-inline-start: var(--_u-pane-collapsed-offset);
1274
+ }
1275
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where([data-align=end][open])) {
1276
+ margin-inline-start: 0;
1277
+ margin-inline-end: var(--_u-pane-collapsed-offset);
1278
+ }
1279
+ }
1280
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]) .container {
1281
+ position: relative;
1282
+ inset: auto;
1283
+ width: auto;
1284
+ transition: none;
1285
+ opacity: 1;
1286
+ }
1287
+ :host(:where(:not([query-context=container]))[mode-xl=collapsible]) .scrim {
1288
+ display: none;
1289
+ }
1290
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]) {
1291
+ display: block;
1292
+ position: fixed;
1293
+ inset: 0;
1294
+ z-index: var(--u-pane-z-index, 1030);
1295
+ pointer-events: none;
1296
+ flex: none;
1297
+ width: auto;
1298
+ height: auto;
1299
+ opacity: 1;
1300
+ transition: none;
1301
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1302
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
1303
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
1304
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
1305
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
1306
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
1307
+ }
1308
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]) .container {
1309
+ position: absolute;
1310
+ inset-block: 0;
1311
+ inset-inline-start: var(--_u-pane-slide-distance);
1312
+ inset-inline-end: auto;
1313
+ width: var(--_u-pane-drawer-width);
1314
+ transition: inset var(--u-pane-transition);
1315
+ pointer-events: auto;
1316
+ border-radius: var(--_u-pane-shape-corner);
1317
+ }
1318
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([open])) .container {
1319
+ inset-inline-start: 0;
1320
+ }
1321
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([data-align=end])) .container {
1322
+ inset-inline-start: auto;
1323
+ inset-inline-end: var(--_u-pane-slide-distance);
1324
+ border-start-end-radius: 0;
1325
+ border-end-end-radius: 0;
1326
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1327
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1328
+ }
1329
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([data-align=end][open])) .container {
1330
+ inset-inline-end: 0;
1331
+ }
1332
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]) .scrim {
1333
+ display: block;
1334
+ }
1335
+ :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([open])) .scrim {
1336
+ opacity: var(--u-pane-scrim-opacity, 0.4);
1337
+ pointer-events: auto;
1338
+ }
1339
+ :host(:where(:not([query-context=container]))[mode-xl=fullscreen]) {
1340
+ display: block;
1341
+ position: fixed;
1342
+ inset: 0;
1343
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
1344
+ pointer-events: none;
1345
+ flex: none;
1346
+ width: auto;
1347
+ height: auto;
1348
+ opacity: 1;
1349
+ transition: none;
1350
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1351
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
1352
+ --_u-pane-shape-corner: 0;
1353
+ --_u-pane-shape-corner-end: 0;
1354
+ --_u-pane-box-shadow: none;
1355
+ --_u-pane-drawer-width: 100%;
1356
+ --_u-pane-slide-distance: -100%;
1357
+ }
1358
+ :host(:where(:not([query-context=container]))[mode-xl=fullscreen]) .container {
1359
+ position: absolute;
1360
+ inset-block: 0;
1361
+ inset-inline-start: var(--_u-pane-slide-distance);
1362
+ inset-inline-end: auto;
1363
+ width: 100%;
1364
+ transition: inset var(--u-pane-transition);
1365
+ pointer-events: auto;
1366
+ }
1367
+ :host(:where(:not([query-context=container]))[mode-xl=fullscreen]:where([open])) .container {
1368
+ inset-inline-start: 0;
1369
+ }
1370
+ :host(:where(:not([query-context=container]))[mode-xl=fullscreen]:where([data-align=end])) .container {
1371
+ inset-inline-start: auto;
1372
+ inset-inline-end: var(--_u-pane-slide-distance);
1373
+ }
1374
+ :host(:where(:not([query-context=container]))[mode-xl=fullscreen]:where([data-align=end][open])) .container {
1375
+ inset-inline-end: 0;
1376
+ }
1377
+ :host(:where(:not([query-context=container]))[mode-xl=fullscreen]) .scrim {
1378
+ display: none;
1379
+ }
1380
+ }
1381
+ @container (min-width: 1600px) {
1382
+ :host(:where([query-context=container])[mode-xl=fixed]) {
1383
+ display: block;
1384
+ position: relative;
1385
+ flex: 0 1 auto;
1386
+ height: auto;
1387
+ inset: auto;
1388
+ z-index: auto;
1389
+ pointer-events: auto;
1390
+ opacity: 1;
1391
+ transition: none;
1392
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
1393
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
1394
+ --_u-pane-box-shadow: none;
1395
+ }
1396
+ :host(:where([query-context=container])[mode-xl=fixed]) .container {
1397
+ position: relative;
1398
+ inset: auto;
1399
+ width: auto;
1400
+ transition: none;
1401
+ opacity: 1;
1402
+ }
1403
+ :host(:where([query-context=container])[mode-xl=fixed]) .scrim {
1404
+ display: none;
1405
+ }
1406
+ :host(:where([query-context=container])[mode-xl=collapsible]) {
1407
+ display: block;
1408
+ position: relative;
1409
+ flex: 0 1 auto;
1410
+ height: auto;
1411
+ inset: auto;
1412
+ z-index: auto;
1413
+ pointer-events: auto;
1414
+ opacity: 1;
1415
+ margin-inline-start: 0;
1416
+ margin-inline-end: 0;
1417
+ transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;
1418
+ --_u-pane-bg-color: var(--_u-pane-variant-bg);
1419
+ --_u-pane-shape-corner: var(--_u-pane-variant-radius);
1420
+ --_u-pane-box-shadow: none;
1421
+ --_u-pane-collapsed-offset: calc(
1422
+ -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))
1423
+ );
1424
+ }
1425
+ :host(:where([query-context=container])[mode-xl=collapsible]:where(:not([open]))) {
1426
+ margin-inline-start: var(--_u-pane-collapsed-offset);
1427
+ display: none;
1428
+ }
1429
+ :host(:where([query-context=container])[mode-xl=collapsible]:where([data-align=end]:not([open]))) {
1430
+ margin-inline-start: 0;
1431
+ margin-inline-end: var(--_u-pane-collapsed-offset);
1432
+ }
1433
+ @starting-style {
1434
+ :host(:where([query-context=container])[mode-xl=collapsible]:where([open])) {
1435
+ margin-inline-start: var(--_u-pane-collapsed-offset);
1436
+ }
1437
+ :host(:where([query-context=container])[mode-xl=collapsible]:where([data-align=end][open])) {
1438
+ margin-inline-start: 0;
1439
+ margin-inline-end: var(--_u-pane-collapsed-offset);
1440
+ }
1441
+ }
1442
+ :host(:where([query-context=container])[mode-xl=collapsible]) .container {
1443
+ position: relative;
1444
+ inset: auto;
1445
+ width: auto;
1446
+ transition: none;
1447
+ opacity: 1;
1448
+ }
1449
+ :host(:where([query-context=container])[mode-xl=collapsible]) .scrim {
1450
+ display: none;
1451
+ }
1452
+ :host(:where([query-context=container])[mode-xl=sidebar]) {
1453
+ display: block;
1454
+ position: fixed;
1455
+ inset: 0;
1456
+ z-index: var(--u-pane-z-index, 1030);
1457
+ pointer-events: none;
1458
+ flex: none;
1459
+ width: auto;
1460
+ height: auto;
1461
+ opacity: 1;
1462
+ transition: none;
1463
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1464
+ var(--u-color-surface-container-low, rgb(247, 242, 250)));
1465
+ --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));
1466
+ --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
1467
+ --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);
1468
+ --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);
1469
+ }
1470
+ :host(:where([query-context=container])[mode-xl=sidebar]) .container {
1471
+ position: absolute;
1472
+ inset-block: 0;
1473
+ inset-inline-start: var(--_u-pane-slide-distance);
1474
+ inset-inline-end: auto;
1475
+ width: var(--_u-pane-drawer-width);
1476
+ transition: inset var(--u-pane-transition);
1477
+ pointer-events: auto;
1478
+ border-radius: var(--_u-pane-shape-corner);
1479
+ }
1480
+ :host(:where([query-context=container])[mode-xl=sidebar]:where([open])) .container {
1481
+ inset-inline-start: 0;
1482
+ }
1483
+ :host(:where([query-context=container])[mode-xl=sidebar]:where([data-align=end])) .container {
1484
+ inset-inline-start: auto;
1485
+ inset-inline-end: var(--_u-pane-slide-distance);
1486
+ border-start-end-radius: 0;
1487
+ border-end-end-radius: 0;
1488
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1489
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1490
+ }
1491
+ :host(:where([query-context=container])[mode-xl=sidebar]:where([data-align=end][open])) .container {
1492
+ inset-inline-end: 0;
1493
+ }
1494
+ :host(:where([query-context=container])[mode-xl=sidebar]) .scrim {
1495
+ display: block;
1496
+ }
1497
+ :host(:where([query-context=container])[mode-xl=sidebar]:where([open])) .scrim {
1498
+ opacity: var(--u-pane-scrim-opacity, 0.4);
1499
+ pointer-events: auto;
1500
+ }
1501
+ :host(:where([query-context=container])[mode-xl=fullscreen]) {
1502
+ display: block;
1503
+ position: fixed;
1504
+ inset: 0;
1505
+ z-index: var(--u-pane-fullscreen-z-index, 1040);
1506
+ pointer-events: none;
1507
+ flex: none;
1508
+ width: auto;
1509
+ height: auto;
1510
+ opacity: 1;
1511
+ transition: none;
1512
+ --_u-pane-bg-color: var(--u-pane-overlay-bg-color,
1513
+ var(--u-color-surface-container-lowest, rgb(255, 255, 255)));
1514
+ --_u-pane-shape-corner: 0;
1515
+ --_u-pane-shape-corner-end: 0;
1516
+ --_u-pane-box-shadow: none;
1517
+ --_u-pane-drawer-width: 100%;
1518
+ --_u-pane-slide-distance: -100%;
1519
+ }
1520
+ :host(:where([query-context=container])[mode-xl=fullscreen]) .container {
1521
+ position: absolute;
1522
+ inset-block: 0;
1523
+ inset-inline-start: var(--_u-pane-slide-distance);
1524
+ inset-inline-end: auto;
1525
+ width: 100%;
1526
+ transition: inset var(--u-pane-transition);
1527
+ pointer-events: auto;
1528
+ }
1529
+ :host(:where([query-context=container])[mode-xl=fullscreen]:where([open])) .container {
1530
+ inset-inline-start: 0;
1531
+ }
1532
+ :host(:where([query-context=container])[mode-xl=fullscreen]:where([data-align=end])) .container {
1533
+ inset-inline-start: auto;
1534
+ inset-inline-end: var(--_u-pane-slide-distance);
1535
+ }
1536
+ :host(:where([query-context=container])[mode-xl=fullscreen]:where([data-align=end][open])) .container {
1537
+ inset-inline-end: 0;
1538
+ }
1539
+ :host(:where([query-context=container])[mode-xl=fullscreen]) .scrim {
1540
+ display: none;
1541
+ }
1542
+ }
1543
+ :host([animation=none]),
1544
+ :host([animation=none]) .container,
1545
+ :host([animation=none]) .scrim {
1546
+ transition: none;
1547
+ }
1548
+
1549
+ :host([animation=fade]) .container {
1550
+ inset-inline-start: 0;
1551
+ inset-inline-end: auto;
1552
+ transition: opacity var(--u-pane-transition);
1553
+ opacity: 1;
1554
+ }
1555
+
1556
+ :host([animation=fade]:where(:not([open]))) .container {
1557
+ opacity: 0;
1558
+ }
1559
+
1560
+ :host([animation=exit-start]) .container {
1561
+ inset-inline-start: var(--_u-pane-slide-distance);
1562
+ inset-inline-end: auto;
1563
+ transition: inset var(--u-pane-transition);
1564
+ border-start-start-radius: 0;
1565
+ border-end-start-radius: 0;
1566
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1567
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1568
+ }
1569
+
1570
+ :host([animation=exit-start]:where([open])) .container {
1571
+ inset-inline-start: 0;
1572
+ }
1573
+
1574
+ :host([animation=exit-end]) .container {
1575
+ inset-inline-start: auto;
1576
+ inset-inline-end: var(--_u-pane-slide-distance);
1577
+ transition: inset var(--u-pane-transition);
1578
+ border-start-end-radius: 0;
1579
+ border-end-end-radius: 0;
1580
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1581
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1582
+ }
1583
+
1584
+ :host([animation=exit-end]:where([open])) .container {
1585
+ inset-inline-end: 0;
1586
+ }
1587
+
1588
+ @media (min-width: 600px) {
1589
+ :host(:where(:not([query-context=container]))[animation-sm=none]),
1590
+ :host(:where(:not([query-context=container]))[animation-sm=none]) .container,
1591
+ :host(:where(:not([query-context=container]))[animation-sm=none]) .scrim {
1592
+ transition: none;
1593
+ }
1594
+ :host(:where(:not([query-context=container]))[animation-sm=fade]) .container {
1595
+ inset-inline-start: 0;
1596
+ inset-inline-end: auto;
1597
+ transition: opacity var(--u-pane-transition);
1598
+ opacity: 1;
1599
+ }
1600
+ :host(:where(:not([query-context=container]))[animation-sm=fade]:where(:not([open]))) .container {
1601
+ opacity: 0;
1602
+ }
1603
+ :host(:where(:not([query-context=container]))[animation-sm=exit-start]) .container {
1604
+ inset-inline-start: var(--_u-pane-slide-distance);
1605
+ inset-inline-end: auto;
1606
+ transition: inset var(--u-pane-transition);
1607
+ border-start-start-radius: 0;
1608
+ border-end-start-radius: 0;
1609
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1610
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1611
+ }
1612
+ :host(:where(:not([query-context=container]))[animation-sm=exit-start]:where([open])) .container {
1613
+ inset-inline-start: 0;
1614
+ }
1615
+ :host(:where(:not([query-context=container]))[animation-sm=exit-end]) .container {
1616
+ inset-inline-start: auto;
1617
+ inset-inline-end: var(--_u-pane-slide-distance);
1618
+ transition: inset var(--u-pane-transition);
1619
+ border-start-end-radius: 0;
1620
+ border-end-end-radius: 0;
1621
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1622
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1623
+ }
1624
+ :host(:where(:not([query-context=container]))[animation-sm=exit-end]:where([open])) .container {
1625
+ inset-inline-end: 0;
1626
+ }
1627
+ }
1628
+ @container (min-width: 600px) {
1629
+ :host(:where([query-context=container])[animation-sm=none]),
1630
+ :host(:where([query-context=container])[animation-sm=none]) .container,
1631
+ :host(:where([query-context=container])[animation-sm=none]) .scrim {
1632
+ transition: none;
1633
+ }
1634
+ :host(:where([query-context=container])[animation-sm=fade]) .container {
1635
+ inset-inline-start: 0;
1636
+ inset-inline-end: auto;
1637
+ transition: opacity var(--u-pane-transition);
1638
+ opacity: 1;
1639
+ }
1640
+ :host(:where([query-context=container])[animation-sm=fade]:where(:not([open]))) .container {
1641
+ opacity: 0;
1642
+ }
1643
+ :host(:where([query-context=container])[animation-sm=exit-start]) .container {
1644
+ inset-inline-start: var(--_u-pane-slide-distance);
1645
+ inset-inline-end: auto;
1646
+ transition: inset var(--u-pane-transition);
1647
+ border-start-start-radius: 0;
1648
+ border-end-start-radius: 0;
1649
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1650
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1651
+ }
1652
+ :host(:where([query-context=container])[animation-sm=exit-start]:where([open])) .container {
1653
+ inset-inline-start: 0;
1654
+ }
1655
+ :host(:where([query-context=container])[animation-sm=exit-end]) .container {
1656
+ inset-inline-start: auto;
1657
+ inset-inline-end: var(--_u-pane-slide-distance);
1658
+ transition: inset var(--u-pane-transition);
1659
+ border-start-end-radius: 0;
1660
+ border-end-end-radius: 0;
1661
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1662
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1663
+ }
1664
+ :host(:where([query-context=container])[animation-sm=exit-end]:where([open])) .container {
1665
+ inset-inline-end: 0;
1666
+ }
1667
+ }
1668
+ @media (min-width: 840px) {
1669
+ :host(:where(:not([query-context=container]))[animation-md=none]),
1670
+ :host(:where(:not([query-context=container]))[animation-md=none]) .container,
1671
+ :host(:where(:not([query-context=container]))[animation-md=none]) .scrim {
1672
+ transition: none;
1673
+ }
1674
+ :host(:where(:not([query-context=container]))[animation-md=fade]) .container {
1675
+ inset-inline-start: 0;
1676
+ inset-inline-end: auto;
1677
+ transition: opacity var(--u-pane-transition);
1678
+ opacity: 1;
1679
+ }
1680
+ :host(:where(:not([query-context=container]))[animation-md=fade]:where(:not([open]))) .container {
1681
+ opacity: 0;
1682
+ }
1683
+ :host(:where(:not([query-context=container]))[animation-md=exit-start]) .container {
1684
+ inset-inline-start: var(--_u-pane-slide-distance);
1685
+ inset-inline-end: auto;
1686
+ transition: inset var(--u-pane-transition);
1687
+ border-start-start-radius: 0;
1688
+ border-end-start-radius: 0;
1689
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1690
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1691
+ }
1692
+ :host(:where(:not([query-context=container]))[animation-md=exit-start]:where([open])) .container {
1693
+ inset-inline-start: 0;
1694
+ }
1695
+ :host(:where(:not([query-context=container]))[animation-md=exit-end]) .container {
1696
+ inset-inline-start: auto;
1697
+ inset-inline-end: var(--_u-pane-slide-distance);
1698
+ transition: inset var(--u-pane-transition);
1699
+ border-start-end-radius: 0;
1700
+ border-end-end-radius: 0;
1701
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1702
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1703
+ }
1704
+ :host(:where(:not([query-context=container]))[animation-md=exit-end]:where([open])) .container {
1705
+ inset-inline-end: 0;
1706
+ }
1707
+ }
1708
+ @container (min-width: 840px) {
1709
+ :host(:where([query-context=container])[animation-md=none]),
1710
+ :host(:where([query-context=container])[animation-md=none]) .container,
1711
+ :host(:where([query-context=container])[animation-md=none]) .scrim {
1712
+ transition: none;
1713
+ }
1714
+ :host(:where([query-context=container])[animation-md=fade]) .container {
1715
+ inset-inline-start: 0;
1716
+ inset-inline-end: auto;
1717
+ transition: opacity var(--u-pane-transition);
1718
+ opacity: 1;
1719
+ }
1720
+ :host(:where([query-context=container])[animation-md=fade]:where(:not([open]))) .container {
1721
+ opacity: 0;
1722
+ }
1723
+ :host(:where([query-context=container])[animation-md=exit-start]) .container {
1724
+ inset-inline-start: var(--_u-pane-slide-distance);
1725
+ inset-inline-end: auto;
1726
+ transition: inset var(--u-pane-transition);
1727
+ border-start-start-radius: 0;
1728
+ border-end-start-radius: 0;
1729
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1730
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1731
+ }
1732
+ :host(:where([query-context=container])[animation-md=exit-start]:where([open])) .container {
1733
+ inset-inline-start: 0;
1734
+ }
1735
+ :host(:where([query-context=container])[animation-md=exit-end]) .container {
1736
+ inset-inline-start: auto;
1737
+ inset-inline-end: var(--_u-pane-slide-distance);
1738
+ transition: inset var(--u-pane-transition);
1739
+ border-start-end-radius: 0;
1740
+ border-end-end-radius: 0;
1741
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1742
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1743
+ }
1744
+ :host(:where([query-context=container])[animation-md=exit-end]:where([open])) .container {
1745
+ inset-inline-end: 0;
1746
+ }
1747
+ }
1748
+ @media (min-width: 1200px) {
1749
+ :host(:where(:not([query-context=container]))[animation-lg=none]),
1750
+ :host(:where(:not([query-context=container]))[animation-lg=none]) .container,
1751
+ :host(:where(:not([query-context=container]))[animation-lg=none]) .scrim {
1752
+ transition: none;
1753
+ }
1754
+ :host(:where(:not([query-context=container]))[animation-lg=fade]) .container {
1755
+ inset-inline-start: 0;
1756
+ inset-inline-end: auto;
1757
+ transition: opacity var(--u-pane-transition);
1758
+ opacity: 1;
1759
+ }
1760
+ :host(:where(:not([query-context=container]))[animation-lg=fade]:where(:not([open]))) .container {
1761
+ opacity: 0;
1762
+ }
1763
+ :host(:where(:not([query-context=container]))[animation-lg=exit-start]) .container {
1764
+ inset-inline-start: var(--_u-pane-slide-distance);
1765
+ inset-inline-end: auto;
1766
+ transition: inset var(--u-pane-transition);
1767
+ border-start-start-radius: 0;
1768
+ border-end-start-radius: 0;
1769
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1770
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1771
+ }
1772
+ :host(:where(:not([query-context=container]))[animation-lg=exit-start]:where([open])) .container {
1773
+ inset-inline-start: 0;
1774
+ }
1775
+ :host(:where(:not([query-context=container]))[animation-lg=exit-end]) .container {
1776
+ inset-inline-start: auto;
1777
+ inset-inline-end: var(--_u-pane-slide-distance);
1778
+ transition: inset var(--u-pane-transition);
1779
+ border-start-end-radius: 0;
1780
+ border-end-end-radius: 0;
1781
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1782
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1783
+ }
1784
+ :host(:where(:not([query-context=container]))[animation-lg=exit-end]:where([open])) .container {
1785
+ inset-inline-end: 0;
1786
+ }
1787
+ }
1788
+ @container (min-width: 1200px) {
1789
+ :host(:where([query-context=container])[animation-lg=none]),
1790
+ :host(:where([query-context=container])[animation-lg=none]) .container,
1791
+ :host(:where([query-context=container])[animation-lg=none]) .scrim {
1792
+ transition: none;
1793
+ }
1794
+ :host(:where([query-context=container])[animation-lg=fade]) .container {
1795
+ inset-inline-start: 0;
1796
+ inset-inline-end: auto;
1797
+ transition: opacity var(--u-pane-transition);
1798
+ opacity: 1;
1799
+ }
1800
+ :host(:where([query-context=container])[animation-lg=fade]:where(:not([open]))) .container {
1801
+ opacity: 0;
1802
+ }
1803
+ :host(:where([query-context=container])[animation-lg=exit-start]) .container {
1804
+ inset-inline-start: var(--_u-pane-slide-distance);
1805
+ inset-inline-end: auto;
1806
+ transition: inset var(--u-pane-transition);
1807
+ border-start-start-radius: 0;
1808
+ border-end-start-radius: 0;
1809
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1810
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1811
+ }
1812
+ :host(:where([query-context=container])[animation-lg=exit-start]:where([open])) .container {
1813
+ inset-inline-start: 0;
1814
+ }
1815
+ :host(:where([query-context=container])[animation-lg=exit-end]) .container {
1816
+ inset-inline-start: auto;
1817
+ inset-inline-end: var(--_u-pane-slide-distance);
1818
+ transition: inset var(--u-pane-transition);
1819
+ border-start-end-radius: 0;
1820
+ border-end-end-radius: 0;
1821
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1822
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1823
+ }
1824
+ :host(:where([query-context=container])[animation-lg=exit-end]:where([open])) .container {
1825
+ inset-inline-end: 0;
1826
+ }
1827
+ }
1828
+ @media (min-width: 1600px) {
1829
+ :host(:where(:not([query-context=container]))[animation-xl=none]),
1830
+ :host(:where(:not([query-context=container]))[animation-xl=none]) .container,
1831
+ :host(:where(:not([query-context=container]))[animation-xl=none]) .scrim {
1832
+ transition: none;
1833
+ }
1834
+ :host(:where(:not([query-context=container]))[animation-xl=fade]) .container {
1835
+ inset-inline-start: 0;
1836
+ inset-inline-end: auto;
1837
+ transition: opacity var(--u-pane-transition);
1838
+ opacity: 1;
1839
+ }
1840
+ :host(:where(:not([query-context=container]))[animation-xl=fade]:where(:not([open]))) .container {
1841
+ opacity: 0;
1842
+ }
1843
+ :host(:where(:not([query-context=container]))[animation-xl=exit-start]) .container {
1844
+ inset-inline-start: var(--_u-pane-slide-distance);
1845
+ inset-inline-end: auto;
1846
+ transition: inset var(--u-pane-transition);
1847
+ border-start-start-radius: 0;
1848
+ border-end-start-radius: 0;
1849
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1850
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1851
+ }
1852
+ :host(:where(:not([query-context=container]))[animation-xl=exit-start]:where([open])) .container {
1853
+ inset-inline-start: 0;
1854
+ }
1855
+ :host(:where(:not([query-context=container]))[animation-xl=exit-end]) .container {
1856
+ inset-inline-start: auto;
1857
+ inset-inline-end: var(--_u-pane-slide-distance);
1858
+ transition: inset var(--u-pane-transition);
1859
+ border-start-end-radius: 0;
1860
+ border-end-end-radius: 0;
1861
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1862
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1863
+ }
1864
+ :host(:where(:not([query-context=container]))[animation-xl=exit-end]:where([open])) .container {
1865
+ inset-inline-end: 0;
1866
+ }
1867
+ }
1868
+ @container (min-width: 1600px) {
1869
+ :host(:where([query-context=container])[animation-xl=none]),
1870
+ :host(:where([query-context=container])[animation-xl=none]) .container,
1871
+ :host(:where([query-context=container])[animation-xl=none]) .scrim {
1872
+ transition: none;
1873
+ }
1874
+ :host(:where([query-context=container])[animation-xl=fade]) .container {
1875
+ inset-inline-start: 0;
1876
+ inset-inline-end: auto;
1877
+ transition: opacity var(--u-pane-transition);
1878
+ opacity: 1;
1879
+ }
1880
+ :host(:where([query-context=container])[animation-xl=fade]:where(:not([open]))) .container {
1881
+ opacity: 0;
1882
+ }
1883
+ :host(:where([query-context=container])[animation-xl=exit-start]) .container {
1884
+ inset-inline-start: var(--_u-pane-slide-distance);
1885
+ inset-inline-end: auto;
1886
+ transition: inset var(--u-pane-transition);
1887
+ border-start-start-radius: 0;
1888
+ border-end-start-radius: 0;
1889
+ border-start-end-radius: var(--_u-pane-shape-corner-end);
1890
+ border-end-end-radius: var(--_u-pane-shape-corner-end);
1891
+ }
1892
+ :host(:where([query-context=container])[animation-xl=exit-start]:where([open])) .container {
1893
+ inset-inline-start: 0;
1894
+ }
1895
+ :host(:where([query-context=container])[animation-xl=exit-end]) .container {
1896
+ inset-inline-start: auto;
1897
+ inset-inline-end: var(--_u-pane-slide-distance);
1898
+ transition: inset var(--u-pane-transition);
1899
+ border-start-end-radius: 0;
1900
+ border-end-end-radius: 0;
1901
+ border-start-start-radius: var(--_u-pane-shape-corner-end);
1902
+ border-end-start-radius: var(--_u-pane-shape-corner-end);
1903
+ }
1904
+ :host(:where([query-context=container])[animation-xl=exit-end]:where([open])) .container {
1905
+ inset-inline-end: 0;
1906
+ }
1907
+ }
1908
+ `;
1909
+ //# sourceMappingURL=pane.styles.js.map