@expressivecss/expressive 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/CHANGELOG.md +127 -0
  2. package/README.md +4 -9
  3. package/dist/css/expressive.css +2617 -951
  4. package/dist/css/expressive.css.map +1 -1
  5. package/dist/css/expressive.min.css +1 -1
  6. package/dist/css/expressive.min.css.map +1 -1
  7. package/dist/js/expressive.cjs +643 -804
  8. package/dist/js/expressive.cjs.map +4 -4
  9. package/dist/js/expressive.js +643 -804
  10. package/dist/js/expressive.js.map +4 -4
  11. package/dist/js/expressive.min.js +11 -11
  12. package/dist/js/expressive.min.js.map +4 -4
  13. package/dist/js/expressive.mjs +643 -804
  14. package/dist/js/expressive.mjs.map +4 -4
  15. package/dist/types/behaviors/bottomSheets.d.ts +18 -0
  16. package/dist/types/behaviors/sideSheets.d.ts +18 -0
  17. package/dist/types/components/autocomplete.d.ts +11 -11
  18. package/dist/types/components/index.d.ts +3 -5
  19. package/dist/types/components/{dropdown.d.ts → menu.d.ts} +38 -37
  20. package/dist/types/components/navigationRail.d.ts +53 -0
  21. package/dist/types/components/range.d.ts +3 -0
  22. package/dist/types/components/registry.d.ts +7 -15
  23. package/dist/types/components/select.d.ts +12 -12
  24. package/dist/types/components/{toasts.d.ts → snackbar.d.ts} +28 -25
  25. package/dist/types/index.d.ts +3 -1
  26. package/package.json +3 -2
  27. package/src/sass/README.md +13 -11
  28. package/src/sass/abstracts/_breakpoints.scss +14 -3
  29. package/src/sass/abstracts/_mixins.scss +3 -3
  30. package/src/sass/abstracts/_variables.scss +27 -2
  31. package/src/sass/base/_global.scss +1 -1
  32. package/src/sass/base/_grid.scss +66 -116
  33. package/src/sass/base/_index.scss +1 -1
  34. package/src/sass/components/_badges.scss +80 -60
  35. package/src/sass/components/_bottom-sheet.scss +137 -0
  36. package/src/sass/components/_cards.scss +4 -4
  37. package/src/sass/components/_chips.scss +6 -5
  38. package/src/sass/components/_dialog.scss +268 -0
  39. package/src/sass/components/_index.scss +9 -7
  40. package/src/sass/components/_list.scss +253 -0
  41. package/src/sass/components/_menu.scss +341 -0
  42. package/src/sass/components/_navbar.scss +65 -117
  43. package/src/sass/components/_navigation-bar.scss +165 -0
  44. package/src/sass/components/_navigation-rail.scss +308 -0
  45. package/src/sass/components/_page-footer.scss +7 -3
  46. package/src/sass/components/_panes.scss +294 -0
  47. package/src/sass/components/_side-sheet.scss +193 -0
  48. package/src/sass/components/_sidenav.scss +78 -49
  49. package/src/sass/components/{_toast.scss → _snackbar.scss} +35 -34
  50. package/src/sass/components/_tabs.scss +1 -27
  51. package/src/sass/components/_toolbar.scss +91 -25
  52. package/src/sass/components/_tooltip.scss +1 -1
  53. package/src/sass/components/forms/_fieldset.scss +1 -1
  54. package/src/sass/components/forms/_input-fields.scss +3 -3
  55. package/src/sass/components/forms/_range.scss +423 -98
  56. package/src/sass/components/forms/_select.scss +19 -17
  57. package/src/sass/tokens/_reference.scss +37 -13
  58. package/src/sass/tokens/_theme.scss +5 -13
  59. package/src/sass/utilities/_colors.scss +16 -74
  60. package/src/sass/utilities/_visibility.scss +8 -0
  61. package/dist/types/components/collapsible.d.ts +0 -79
  62. package/dist/types/components/pushpin.d.ts +0 -51
  63. package/dist/types/components/tapTarget.d.ts +0 -57
  64. package/src/sass/components/_collapsible.scss +0 -179
  65. package/src/sass/components/_collection.scss +0 -180
  66. package/src/sass/components/_dropdown.scss +0 -225
  67. package/src/sass/components/_modal.scss +0 -190
  68. package/src/sass/components/_pushpin.scss +0 -11
  69. package/src/sass/components/_tapTarget.scss +0 -187
package/dist/css/expressive.css CHANGED
@@ -5,8 +5,14 @@
5
5
  --md-source: #006A79;
6
6
  /* primary, secondary, tertiary, neutral, neutral-variant - all generated */
7
7
  --md-ref-palette-primary0: oklch(from var(--md-source) 0% 0 calc(h + 1));
8
+ --md-ref-palette-primary4: oklch(from var(--md-source) 8.95% 0.123 calc(h + 1));
9
+ --md-ref-palette-primary6: oklch(from var(--md-source) 13.42% 0.123 calc(h + 1));
8
10
  --md-ref-palette-primary10: oklch(from var(--md-source) 22.37% 0.123 calc(h + 1));
11
+ --md-ref-palette-primary12: oklch(from var(--md-source) 24.09% 0.123 calc(h + 1));
12
+ --md-ref-palette-primary17: oklch(from var(--md-source) 28.4% 0.123 calc(h + 1));
9
13
  --md-ref-palette-primary20: oklch(from var(--md-source) 30.99% 0.123 calc(h + 1));
14
+ --md-ref-palette-primary22: oklch(from var(--md-source) 32.7% 0.123 calc(h + 1));
15
+ --md-ref-palette-primary24: oklch(from var(--md-source) 34.41% 0.123 calc(h + 1));
10
16
  --md-ref-palette-primary25: oklch(from var(--md-source) 35.26% 0.123 calc(h + 1));
11
17
  --md-ref-palette-primary30: oklch(from var(--md-source) 39.48% 0.123 calc(h + 1));
12
18
  --md-ref-palette-primary35: oklch(from var(--md-source) 43.79% 0.123 calc(h + 1));
@@ -15,14 +21,24 @@
15
21
  --md-ref-palette-primary60: oklch(from var(--md-source) 65.42% 0.123 calc(h + 1));
16
22
  --md-ref-palette-primary70: oklch(from var(--md-source) 74.04% 0.123 calc(h + 1));
17
23
  --md-ref-palette-primary80: oklch(from var(--md-source) 82.63% 0.123 calc(h + 1));
24
+ --md-ref-palette-primary87: oklch(from var(--md-source) 88.72% 0.123 calc(h + 1));
18
25
  --md-ref-palette-primary90: oklch(from var(--md-source) 91.33% 0.123 calc(h + 1));
26
+ --md-ref-palette-primary92: oklch(from var(--md-source) 93.05% 0.123 calc(h + 1));
27
+ --md-ref-palette-primary94: oklch(from var(--md-source) 94.76% 0.123 calc(h + 1));
19
28
  --md-ref-palette-primary95: oklch(from var(--md-source) 95.62% 0.123 calc(h + 1));
29
+ --md-ref-palette-primary96: oklch(from var(--md-source) 96.5% 0.123 calc(h + 1));
20
30
  --md-ref-palette-primary98: oklch(from var(--md-source) 98.25% 0.123 calc(h + 1));
21
31
  --md-ref-palette-primary99: oklch(from var(--md-source) 99.19% 0.123 calc(h + 1));
22
32
  --md-ref-palette-primary100: oklch(from var(--md-source) 100% 0 calc(h + 1));
23
33
  --md-ref-palette-secondary0: oklch(from var(--md-source) 0% 0 calc(h + 5));
34
+ --md-ref-palette-secondary4: oklch(from var(--md-source) 8.95% 0.03 calc(h + 5));
35
+ --md-ref-palette-secondary6: oklch(from var(--md-source) 13.42% 0.03 calc(h + 5));
24
36
  --md-ref-palette-secondary10: oklch(from var(--md-source) 22.37% 0.03 calc(h + 5));
37
+ --md-ref-palette-secondary12: oklch(from var(--md-source) 24.09% 0.03 calc(h + 5));
38
+ --md-ref-palette-secondary17: oklch(from var(--md-source) 28.4% 0.03 calc(h + 5));
25
39
  --md-ref-palette-secondary20: oklch(from var(--md-source) 30.99% 0.03 calc(h + 5));
40
+ --md-ref-palette-secondary22: oklch(from var(--md-source) 32.7% 0.03 calc(h + 5));
41
+ --md-ref-palette-secondary24: oklch(from var(--md-source) 34.41% 0.03 calc(h + 5));
26
42
  --md-ref-palette-secondary25: oklch(from var(--md-source) 35.26% 0.03 calc(h + 5));
27
43
  --md-ref-palette-secondary30: oklch(from var(--md-source) 39.48% 0.03 calc(h + 5));
28
44
  --md-ref-palette-secondary35: oklch(from var(--md-source) 43.79% 0.03 calc(h + 5));
@@ -31,14 +47,24 @@
31
47
  --md-ref-palette-secondary60: oklch(from var(--md-source) 65.42% 0.03 calc(h + 5));
32
48
  --md-ref-palette-secondary70: oklch(from var(--md-source) 74.04% 0.03 calc(h + 5));
33
49
  --md-ref-palette-secondary80: oklch(from var(--md-source) 82.63% 0.03 calc(h + 5));
50
+ --md-ref-palette-secondary87: oklch(from var(--md-source) 88.72% 0.03 calc(h + 5));
34
51
  --md-ref-palette-secondary90: oklch(from var(--md-source) 91.33% 0.03 calc(h + 5));
52
+ --md-ref-palette-secondary92: oklch(from var(--md-source) 93.05% 0.03 calc(h + 5));
53
+ --md-ref-palette-secondary94: oklch(from var(--md-source) 94.76% 0.03 calc(h + 5));
35
54
  --md-ref-palette-secondary95: oklch(from var(--md-source) 95.62% 0.03 calc(h + 5));
55
+ --md-ref-palette-secondary96: oklch(from var(--md-source) 96.5% 0.03 calc(h + 5));
36
56
  --md-ref-palette-secondary98: oklch(from var(--md-source) 98.25% 0.03 calc(h + 5));
37
57
  --md-ref-palette-secondary99: oklch(from var(--md-source) 99.19% 0.03 calc(h + 5));
38
58
  --md-ref-palette-secondary100: oklch(from var(--md-source) 100% 0 calc(h + 5));
39
59
  --md-ref-palette-tertiary0: oklch(from var(--md-source) 0% 0 calc(h + 62));
60
+ --md-ref-palette-tertiary4: oklch(from var(--md-source) 8.95% 0.058 calc(h + 62));
61
+ --md-ref-palette-tertiary6: oklch(from var(--md-source) 13.42% 0.058 calc(h + 62));
40
62
  --md-ref-palette-tertiary10: oklch(from var(--md-source) 22.37% 0.058 calc(h + 62));
63
+ --md-ref-palette-tertiary12: oklch(from var(--md-source) 24.09% 0.058 calc(h + 62));
64
+ --md-ref-palette-tertiary17: oklch(from var(--md-source) 28.4% 0.058 calc(h + 62));
41
65
  --md-ref-palette-tertiary20: oklch(from var(--md-source) 30.99% 0.058 calc(h + 62));
66
+ --md-ref-palette-tertiary22: oklch(from var(--md-source) 32.7% 0.058 calc(h + 62));
67
+ --md-ref-palette-tertiary24: oklch(from var(--md-source) 34.41% 0.058 calc(h + 62));
42
68
  --md-ref-palette-tertiary25: oklch(from var(--md-source) 35.26% 0.058 calc(h + 62));
43
69
  --md-ref-palette-tertiary30: oklch(from var(--md-source) 39.48% 0.058 calc(h + 62));
44
70
  --md-ref-palette-tertiary35: oklch(from var(--md-source) 43.79% 0.058 calc(h + 62));
@@ -47,14 +73,24 @@
47
73
  --md-ref-palette-tertiary60: oklch(from var(--md-source) 65.42% 0.058 calc(h + 62));
48
74
  --md-ref-palette-tertiary70: oklch(from var(--md-source) 74.04% 0.058 calc(h + 62));
49
75
  --md-ref-palette-tertiary80: oklch(from var(--md-source) 82.63% 0.058 calc(h + 62));
76
+ --md-ref-palette-tertiary87: oklch(from var(--md-source) 88.72% 0.058 calc(h + 62));
50
77
  --md-ref-palette-tertiary90: oklch(from var(--md-source) 91.33% 0.058 calc(h + 62));
78
+ --md-ref-palette-tertiary92: oklch(from var(--md-source) 93.05% 0.058 calc(h + 62));
79
+ --md-ref-palette-tertiary94: oklch(from var(--md-source) 94.76% 0.058 calc(h + 62));
51
80
  --md-ref-palette-tertiary95: oklch(from var(--md-source) 95.62% 0.058 calc(h + 62));
81
+ --md-ref-palette-tertiary96: oklch(from var(--md-source) 96.5% 0.058 calc(h + 62));
52
82
  --md-ref-palette-tertiary98: oklch(from var(--md-source) 98.25% 0.058 calc(h + 62));
53
83
  --md-ref-palette-tertiary99: oklch(from var(--md-source) 99.19% 0.058 calc(h + 62));
54
84
  --md-ref-palette-tertiary100: oklch(from var(--md-source) 100% 0 calc(h + 62));
55
85
  --md-ref-palette-neutral0: oklch(from var(--md-source) 0% 0 calc(h + 17));
86
+ --md-ref-palette-neutral4: oklch(from var(--md-source) 8.95% 0.004 calc(h + 17));
87
+ --md-ref-palette-neutral6: oklch(from var(--md-source) 13.42% 0.004 calc(h + 17));
56
88
  --md-ref-palette-neutral10: oklch(from var(--md-source) 22.37% 0.004 calc(h + 17));
89
+ --md-ref-palette-neutral12: oklch(from var(--md-source) 24.09% 0.004 calc(h + 17));
90
+ --md-ref-palette-neutral17: oklch(from var(--md-source) 28.4% 0.004 calc(h + 17));
57
91
  --md-ref-palette-neutral20: oklch(from var(--md-source) 30.99% 0.004 calc(h + 17));
92
+ --md-ref-palette-neutral22: oklch(from var(--md-source) 32.7% 0.004 calc(h + 17));
93
+ --md-ref-palette-neutral24: oklch(from var(--md-source) 34.41% 0.004 calc(h + 17));
58
94
  --md-ref-palette-neutral25: oklch(from var(--md-source) 35.26% 0.004 calc(h + 17));
59
95
  --md-ref-palette-neutral30: oklch(from var(--md-source) 39.48% 0.004 calc(h + 17));
60
96
  --md-ref-palette-neutral35: oklch(from var(--md-source) 43.79% 0.004 calc(h + 17));
@@ -63,14 +99,24 @@
63
99
  --md-ref-palette-neutral60: oklch(from var(--md-source) 65.42% 0.004 calc(h + 17));
64
100
  --md-ref-palette-neutral70: oklch(from var(--md-source) 74.04% 0.004 calc(h + 17));
65
101
  --md-ref-palette-neutral80: oklch(from var(--md-source) 82.63% 0.004 calc(h + 17));
102
+ --md-ref-palette-neutral87: oklch(from var(--md-source) 88.72% 0.004 calc(h + 17));
66
103
  --md-ref-palette-neutral90: oklch(from var(--md-source) 91.33% 0.004 calc(h + 17));
104
+ --md-ref-palette-neutral92: oklch(from var(--md-source) 93.05% 0.004 calc(h + 17));
105
+ --md-ref-palette-neutral94: oklch(from var(--md-source) 94.76% 0.004 calc(h + 17));
67
106
  --md-ref-palette-neutral95: oklch(from var(--md-source) 95.62% 0.004 calc(h + 17));
107
+ --md-ref-palette-neutral96: oklch(from var(--md-source) 96.5% 0.004 calc(h + 17));
68
108
  --md-ref-palette-neutral98: oklch(from var(--md-source) 98.25% 0.004 calc(h + 17));
69
109
  --md-ref-palette-neutral99: oklch(from var(--md-source) 99.19% 0.004 calc(h + 17));
70
110
  --md-ref-palette-neutral100: oklch(from var(--md-source) 100% 0 calc(h + 17));
71
111
  --md-ref-palette-neutral-variant0: oklch(from var(--md-source) 0% 0 calc(h + 9));
112
+ --md-ref-palette-neutral-variant4: oklch(from var(--md-source) 8.95% 0.013 calc(h + 9));
113
+ --md-ref-palette-neutral-variant6: oklch(from var(--md-source) 13.42% 0.013 calc(h + 9));
72
114
  --md-ref-palette-neutral-variant10: oklch(from var(--md-source) 22.37% 0.013 calc(h + 9));
115
+ --md-ref-palette-neutral-variant12: oklch(from var(--md-source) 24.09% 0.013 calc(h + 9));
116
+ --md-ref-palette-neutral-variant17: oklch(from var(--md-source) 28.4% 0.013 calc(h + 9));
73
117
  --md-ref-palette-neutral-variant20: oklch(from var(--md-source) 30.99% 0.013 calc(h + 9));
118
+ --md-ref-palette-neutral-variant22: oklch(from var(--md-source) 32.7% 0.013 calc(h + 9));
119
+ --md-ref-palette-neutral-variant24: oklch(from var(--md-source) 34.41% 0.013 calc(h + 9));
74
120
  --md-ref-palette-neutral-variant25: oklch(from var(--md-source) 35.26% 0.013 calc(h + 9));
75
121
  --md-ref-palette-neutral-variant30: oklch(from var(--md-source) 39.48% 0.013 calc(h + 9));
76
122
  --md-ref-palette-neutral-variant35: oklch(from var(--md-source) 43.79% 0.013 calc(h + 9));
@@ -79,8 +125,12 @@
79
125
  --md-ref-palette-neutral-variant60: oklch(from var(--md-source) 65.42% 0.013 calc(h + 9));
80
126
  --md-ref-palette-neutral-variant70: oklch(from var(--md-source) 74.04% 0.013 calc(h + 9));
81
127
  --md-ref-palette-neutral-variant80: oklch(from var(--md-source) 82.63% 0.013 calc(h + 9));
128
+ --md-ref-palette-neutral-variant87: oklch(from var(--md-source) 88.72% 0.013 calc(h + 9));
82
129
  --md-ref-palette-neutral-variant90: oklch(from var(--md-source) 91.33% 0.013 calc(h + 9));
130
+ --md-ref-palette-neutral-variant92: oklch(from var(--md-source) 93.05% 0.013 calc(h + 9));
131
+ --md-ref-palette-neutral-variant94: oklch(from var(--md-source) 94.76% 0.013 calc(h + 9));
83
132
  --md-ref-palette-neutral-variant95: oklch(from var(--md-source) 95.62% 0.013 calc(h + 9));
133
+ --md-ref-palette-neutral-variant96: oklch(from var(--md-source) 96.5% 0.013 calc(h + 9));
84
134
  --md-ref-palette-neutral-variant98: oklch(from var(--md-source) 98.25% 0.013 calc(h + 9));
85
135
  --md-ref-palette-neutral-variant99: oklch(from var(--md-source) 99.19% 0.013 calc(h + 9));
86
136
  --md-ref-palette-neutral-variant100: oklch(from var(--md-source) 100% 0 calc(h + 9));
@@ -111,63 +161,101 @@
111
161
  --md-sys-color-on-primary-light: var(--md-ref-palette-primary100);
112
162
  --md-sys-color-primary-container-light: var(--md-ref-palette-primary90);
113
163
  --md-sys-color-on-primary-container-light: var(--md-ref-palette-primary10);
164
+ --md-sys-color-primary-fixed-light: var(--md-ref-palette-primary90);
165
+ --md-sys-color-primary-fixed-dim-light: var(--md-ref-palette-primary80);
166
+ --md-sys-color-on-primary-fixed-light: var(--md-ref-palette-primary10);
167
+ --md-sys-color-on-primary-fixed-variant-light: var(--md-ref-palette-primary30);
114
168
  --md-sys-color-secondary-light: var(--md-ref-palette-secondary40);
115
169
  --md-sys-color-on-secondary-light: var(--md-ref-palette-secondary100);
116
170
  --md-sys-color-secondary-container-light: var(--md-ref-palette-secondary90);
117
171
  --md-sys-color-on-secondary-container-light: var(--md-ref-palette-secondary10);
172
+ --md-sys-color-secondary-fixed-light: var(--md-ref-palette-secondary90);
173
+ --md-sys-color-secondary-fixed-dim-light: var(--md-ref-palette-secondary80);
174
+ --md-sys-color-on-secondary-fixed-light: var(--md-ref-palette-secondary10);
175
+ --md-sys-color-on-secondary-fixed-variant-light: var(--md-ref-palette-secondary30);
118
176
  --md-sys-color-tertiary-light: var(--md-ref-palette-tertiary40);
119
177
  --md-sys-color-on-tertiary-light: var(--md-ref-palette-tertiary100);
120
178
  --md-sys-color-tertiary-container-light: var(--md-ref-palette-tertiary90);
121
179
  --md-sys-color-on-tertiary-container-light: var(--md-ref-palette-tertiary10);
180
+ --md-sys-color-tertiary-fixed-light: var(--md-ref-palette-tertiary90);
181
+ --md-sys-color-tertiary-fixed-dim-light: var(--md-ref-palette-tertiary80);
182
+ --md-sys-color-on-tertiary-fixed-light: var(--md-ref-palette-tertiary10);
183
+ --md-sys-color-on-tertiary-fixed-variant-light: var(--md-ref-palette-tertiary30);
122
184
  --md-sys-color-error-light: var(--md-ref-palette-error40);
123
185
  --md-sys-color-on-error-light: var(--md-ref-palette-error100);
124
186
  --md-sys-color-error-container-light: var(--md-ref-palette-error90);
125
187
  --md-sys-color-on-error-container-light: var(--md-ref-palette-error10);
126
- --md-sys-color-background-light: var(--md-ref-palette-neutral99);
127
- --md-sys-color-on-background-light: var(--md-ref-palette-neutral10);
128
- --md-sys-color-surface-light: var(--md-ref-palette-neutral99);
188
+ --md-sys-color-surface-light: var(--md-ref-palette-neutral98);
129
189
  --md-sys-color-on-surface-light: var(--md-ref-palette-neutral10);
130
- --md-sys-color-surface-variant-light: var(--md-ref-palette-neutral-variant90);
131
190
  --md-sys-color-on-surface-variant-light: var(--md-ref-palette-neutral-variant30);
191
+ --md-sys-color-surface-dim-light: var(--md-ref-palette-neutral87);
192
+ --md-sys-color-surface-bright-light: var(--md-ref-palette-neutral98);
193
+ --md-sys-color-surface-container-lowest-light: var(--md-ref-palette-neutral100);
194
+ --md-sys-color-surface-container-low-light: var(--md-ref-palette-neutral96);
195
+ --md-sys-color-surface-container-light: var(--md-ref-palette-neutral94);
196
+ --md-sys-color-surface-container-high-light: var(--md-ref-palette-neutral92);
197
+ --md-sys-color-surface-container-highest-light: var(--md-ref-palette-neutral90);
132
198
  --md-sys-color-outline-light: var(--md-ref-palette-neutral-variant50);
133
199
  --md-sys-color-outline-variant-light: var(--md-ref-palette-neutral-variant80);
134
200
  --md-sys-color-inverse-surface-light: var(--md-ref-palette-neutral20);
135
201
  --md-sys-color-inverse-on-surface-light: var(--md-ref-palette-neutral95);
136
202
  --md-sys-color-inverse-primary-light: var(--md-ref-palette-primary80);
137
- --md-sys-color-surface-tint-light: var(--md-ref-palette-primary40);
138
- --md-sys-color-shadow-light: var(--md-ref-palette-neutral0);
139
203
  --md-sys-color-scrim-light: var(--md-ref-palette-neutral0);
204
+ --md-sys-color-shadow-light: var(--md-ref-palette-neutral0);
205
+ --md-sys-color-background-light: var(--md-ref-palette-neutral98);
206
+ --md-sys-color-on-background-light: var(--md-ref-palette-neutral10);
207
+ --md-sys-color-surface-variant-light: var(--md-ref-palette-neutral-variant90);
208
+ --md-sys-color-surface-tint-light: var(--md-ref-palette-primary40);
140
209
  /* dark scheme */
141
210
  --md-sys-color-primary-dark: var(--md-ref-palette-primary80);
142
211
  --md-sys-color-on-primary-dark: var(--md-ref-palette-primary20);
143
212
  --md-sys-color-primary-container-dark: var(--md-ref-palette-primary30);
144
213
  --md-sys-color-on-primary-container-dark: var(--md-ref-palette-primary90);
214
+ --md-sys-color-primary-fixed-dark: var(--md-ref-palette-primary90);
215
+ --md-sys-color-primary-fixed-dim-dark: var(--md-ref-palette-primary80);
216
+ --md-sys-color-on-primary-fixed-dark: var(--md-ref-palette-primary10);
217
+ --md-sys-color-on-primary-fixed-variant-dark: var(--md-ref-palette-primary30);
145
218
  --md-sys-color-secondary-dark: var(--md-ref-palette-secondary80);
146
219
  --md-sys-color-on-secondary-dark: var(--md-ref-palette-secondary20);
147
220
  --md-sys-color-secondary-container-dark: var(--md-ref-palette-secondary30);
148
221
  --md-sys-color-on-secondary-container-dark: var(--md-ref-palette-secondary90);
222
+ --md-sys-color-secondary-fixed-dark: var(--md-ref-palette-secondary90);
223
+ --md-sys-color-secondary-fixed-dim-dark: var(--md-ref-palette-secondary80);
224
+ --md-sys-color-on-secondary-fixed-dark: var(--md-ref-palette-secondary10);
225
+ --md-sys-color-on-secondary-fixed-variant-dark: var(--md-ref-palette-secondary30);
149
226
  --md-sys-color-tertiary-dark: var(--md-ref-palette-tertiary80);
150
227
  --md-sys-color-on-tertiary-dark: var(--md-ref-palette-tertiary20);
151
228
  --md-sys-color-tertiary-container-dark: var(--md-ref-palette-tertiary30);
152
229
  --md-sys-color-on-tertiary-container-dark: var(--md-ref-palette-tertiary90);
230
+ --md-sys-color-tertiary-fixed-dark: var(--md-ref-palette-tertiary90);
231
+ --md-sys-color-tertiary-fixed-dim-dark: var(--md-ref-palette-tertiary80);
232
+ --md-sys-color-on-tertiary-fixed-dark: var(--md-ref-palette-tertiary10);
233
+ --md-sys-color-on-tertiary-fixed-variant-dark: var(--md-ref-palette-tertiary30);
153
234
  --md-sys-color-error-dark: var(--md-ref-palette-error80);
154
235
  --md-sys-color-on-error-dark: var(--md-ref-palette-error20);
155
236
  --md-sys-color-error-container-dark: var(--md-ref-palette-error30);
156
237
  --md-sys-color-on-error-container-dark: var(--md-ref-palette-error90);
157
- --md-sys-color-background-dark: var(--md-ref-palette-neutral10);
158
- --md-sys-color-on-background-dark: var(--md-ref-palette-neutral90);
159
- --md-sys-color-surface-dark: var(--md-ref-palette-neutral10);
238
+ --md-sys-color-surface-dark: var(--md-ref-palette-neutral6);
160
239
  --md-sys-color-on-surface-dark: var(--md-ref-palette-neutral90);
161
- --md-sys-color-surface-variant-dark: var(--md-ref-palette-neutral-variant30);
162
240
  --md-sys-color-on-surface-variant-dark: var(--md-ref-palette-neutral-variant80);
241
+ --md-sys-color-surface-dim-dark: var(--md-ref-palette-neutral6);
242
+ --md-sys-color-surface-bright-dark: var(--md-ref-palette-neutral24);
243
+ --md-sys-color-surface-container-lowest-dark: var(--md-ref-palette-neutral4);
244
+ --md-sys-color-surface-container-low-dark: var(--md-ref-palette-neutral10);
245
+ --md-sys-color-surface-container-dark: var(--md-ref-palette-neutral12);
246
+ --md-sys-color-surface-container-high-dark: var(--md-ref-palette-neutral17);
247
+ --md-sys-color-surface-container-highest-dark: var(--md-ref-palette-neutral22);
163
248
  --md-sys-color-outline-dark: var(--md-ref-palette-neutral-variant60);
164
249
  --md-sys-color-outline-variant-dark: var(--md-ref-palette-neutral-variant30);
165
250
  --md-sys-color-inverse-surface-dark: var(--md-ref-palette-neutral90);
166
251
  --md-sys-color-inverse-on-surface-dark: var(--md-ref-palette-neutral10);
167
252
  --md-sys-color-inverse-primary-dark: var(--md-ref-palette-primary40);
168
- --md-sys-color-surface-tint-dark: var(--md-ref-palette-primary80);
169
- --md-sys-color-shadow-dark: var(--md-ref-palette-neutral0);
170
253
  --md-sys-color-scrim-dark: var(--md-ref-palette-neutral0);
254
+ --md-sys-color-shadow-dark: var(--md-ref-palette-neutral0);
255
+ --md-sys-color-background-dark: var(--md-ref-palette-neutral6);
256
+ --md-sys-color-on-background-dark: var(--md-ref-palette-neutral90);
257
+ --md-sys-color-surface-variant-dark: var(--md-ref-palette-neutral-variant30);
258
+ --md-sys-color-surface-tint-dark: var(--md-ref-palette-primary80);
171
259
  /* display - large */
172
260
  --md-sys-typescale-display-large-font-family-name: Roboto;
173
261
  --md-sys-typescale-display-large-font-family-style: Regular;
@@ -292,6 +380,22 @@
292
380
  var(--md-sys-color-on-primary-container-light),
293
381
  var(--md-sys-color-on-primary-container-dark)
294
382
  );
383
+ --md-sys-color-primary-fixed: light-dark(
384
+ var(--md-sys-color-primary-fixed-light),
385
+ var(--md-sys-color-primary-fixed-dark)
386
+ );
387
+ --md-sys-color-primary-fixed-dim: light-dark(
388
+ var(--md-sys-color-primary-fixed-dim-light),
389
+ var(--md-sys-color-primary-fixed-dim-dark)
390
+ );
391
+ --md-sys-color-on-primary-fixed: light-dark(
392
+ var(--md-sys-color-on-primary-fixed-light),
393
+ var(--md-sys-color-on-primary-fixed-dark)
394
+ );
395
+ --md-sys-color-on-primary-fixed-variant: light-dark(
396
+ var(--md-sys-color-on-primary-fixed-variant-light),
397
+ var(--md-sys-color-on-primary-fixed-variant-dark)
398
+ );
295
399
  --md-sys-color-secondary: light-dark(
296
400
  var(--md-sys-color-secondary-light),
297
401
  var(--md-sys-color-secondary-dark)
@@ -308,6 +412,22 @@
308
412
  var(--md-sys-color-on-secondary-container-light),
309
413
  var(--md-sys-color-on-secondary-container-dark)
310
414
  );
415
+ --md-sys-color-secondary-fixed: light-dark(
416
+ var(--md-sys-color-secondary-fixed-light),
417
+ var(--md-sys-color-secondary-fixed-dark)
418
+ );
419
+ --md-sys-color-secondary-fixed-dim: light-dark(
420
+ var(--md-sys-color-secondary-fixed-dim-light),
421
+ var(--md-sys-color-secondary-fixed-dim-dark)
422
+ );
423
+ --md-sys-color-on-secondary-fixed: light-dark(
424
+ var(--md-sys-color-on-secondary-fixed-light),
425
+ var(--md-sys-color-on-secondary-fixed-dark)
426
+ );
427
+ --md-sys-color-on-secondary-fixed-variant: light-dark(
428
+ var(--md-sys-color-on-secondary-fixed-variant-light),
429
+ var(--md-sys-color-on-secondary-fixed-variant-dark)
430
+ );
311
431
  --md-sys-color-tertiary: light-dark(
312
432
  var(--md-sys-color-tertiary-light),
313
433
  var(--md-sys-color-tertiary-dark)
@@ -324,6 +444,22 @@
324
444
  var(--md-sys-color-on-tertiary-container-light),
325
445
  var(--md-sys-color-on-tertiary-container-dark)
326
446
  );
447
+ --md-sys-color-tertiary-fixed: light-dark(
448
+ var(--md-sys-color-tertiary-fixed-light),
449
+ var(--md-sys-color-tertiary-fixed-dark)
450
+ );
451
+ --md-sys-color-tertiary-fixed-dim: light-dark(
452
+ var(--md-sys-color-tertiary-fixed-dim-light),
453
+ var(--md-sys-color-tertiary-fixed-dim-dark)
454
+ );
455
+ --md-sys-color-on-tertiary-fixed: light-dark(
456
+ var(--md-sys-color-on-tertiary-fixed-light),
457
+ var(--md-sys-color-on-tertiary-fixed-dark)
458
+ );
459
+ --md-sys-color-on-tertiary-fixed-variant: light-dark(
460
+ var(--md-sys-color-on-tertiary-fixed-variant-light),
461
+ var(--md-sys-color-on-tertiary-fixed-variant-dark)
462
+ );
327
463
  --md-sys-color-error: light-dark(
328
464
  var(--md-sys-color-error-light),
329
465
  var(--md-sys-color-error-dark)
@@ -340,22 +476,6 @@
340
476
  var(--md-sys-color-on-error-container-light),
341
477
  var(--md-sys-color-on-error-container-dark)
342
478
  );
343
- --md-sys-color-outline: light-dark(
344
- var(--md-sys-color-outline-light),
345
- var(--md-sys-color-outline-dark)
346
- );
347
- --md-sys-color-outline-variant: light-dark(
348
- var(--md-sys-color-outline-variant-light),
349
- var(--md-sys-color-outline-variant-dark)
350
- );
351
- --md-sys-color-background: light-dark(
352
- var(--md-sys-color-background-light),
353
- var(--md-sys-color-background-dark)
354
- );
355
- --md-sys-color-on-background: light-dark(
356
- var(--md-sys-color-on-background-light),
357
- var(--md-sys-color-on-background-dark)
358
- );
359
479
  --md-sys-color-surface: light-dark(
360
480
  var(--md-sys-color-surface-light),
361
481
  var(--md-sys-color-surface-dark)
@@ -364,14 +484,46 @@
364
484
  var(--md-sys-color-on-surface-light),
365
485
  var(--md-sys-color-on-surface-dark)
366
486
  );
367
- --md-sys-color-surface-variant: light-dark(
368
- var(--md-sys-color-surface-variant-light),
369
- var(--md-sys-color-surface-variant-dark)
370
- );
371
487
  --md-sys-color-on-surface-variant: light-dark(
372
488
  var(--md-sys-color-on-surface-variant-light),
373
489
  var(--md-sys-color-on-surface-variant-dark)
374
490
  );
491
+ --md-sys-color-surface-dim: light-dark(
492
+ var(--md-sys-color-surface-dim-light),
493
+ var(--md-sys-color-surface-dim-dark)
494
+ );
495
+ --md-sys-color-surface-bright: light-dark(
496
+ var(--md-sys-color-surface-bright-light),
497
+ var(--md-sys-color-surface-bright-dark)
498
+ );
499
+ --md-sys-color-surface-container-lowest: light-dark(
500
+ var(--md-sys-color-surface-container-lowest-light),
501
+ var(--md-sys-color-surface-container-lowest-dark)
502
+ );
503
+ --md-sys-color-surface-container-low: light-dark(
504
+ var(--md-sys-color-surface-container-low-light),
505
+ var(--md-sys-color-surface-container-low-dark)
506
+ );
507
+ --md-sys-color-surface-container: light-dark(
508
+ var(--md-sys-color-surface-container-light),
509
+ var(--md-sys-color-surface-container-dark)
510
+ );
511
+ --md-sys-color-surface-container-high: light-dark(
512
+ var(--md-sys-color-surface-container-high-light),
513
+ var(--md-sys-color-surface-container-high-dark)
514
+ );
515
+ --md-sys-color-surface-container-highest: light-dark(
516
+ var(--md-sys-color-surface-container-highest-light),
517
+ var(--md-sys-color-surface-container-highest-dark)
518
+ );
519
+ --md-sys-color-outline: light-dark(
520
+ var(--md-sys-color-outline-light),
521
+ var(--md-sys-color-outline-dark)
522
+ );
523
+ --md-sys-color-outline-variant: light-dark(
524
+ var(--md-sys-color-outline-variant-light),
525
+ var(--md-sys-color-outline-variant-dark)
526
+ );
375
527
  --md-sys-color-inverse-surface: light-dark(
376
528
  var(--md-sys-color-inverse-surface-light),
377
529
  var(--md-sys-color-inverse-surface-dark)
@@ -384,18 +536,30 @@
384
536
  var(--md-sys-color-inverse-primary-light),
385
537
  var(--md-sys-color-inverse-primary-dark)
386
538
  );
539
+ --md-sys-color-scrim: light-dark(
540
+ var(--md-sys-color-scrim-light),
541
+ var(--md-sys-color-scrim-dark)
542
+ );
387
543
  --md-sys-color-shadow: light-dark(
388
544
  var(--md-sys-color-shadow-light),
389
545
  var(--md-sys-color-shadow-dark)
390
546
  );
547
+ --md-sys-color-background: light-dark(
548
+ var(--md-sys-color-background-light),
549
+ var(--md-sys-color-background-dark)
550
+ );
551
+ --md-sys-color-on-background: light-dark(
552
+ var(--md-sys-color-on-background-light),
553
+ var(--md-sys-color-on-background-dark)
554
+ );
555
+ --md-sys-color-surface-variant: light-dark(
556
+ var(--md-sys-color-surface-variant-light),
557
+ var(--md-sys-color-surface-variant-dark)
558
+ );
391
559
  --md-sys-color-surface-tint: light-dark(
392
560
  var(--md-sys-color-surface-tint-light),
393
561
  var(--md-sys-color-surface-tint-dark)
394
562
  );
395
- --md-sys-color-scrim: light-dark(
396
- var(--md-sys-color-scrim-light),
397
- var(--md-sys-color-scrim-dark)
398
- );
399
563
  }
400
564
  /* ===================================================================== Themes */
401
565
  :root[theme=light] {
@@ -404,6 +568,9 @@
404
568
  :root[theme=dark] {
405
569
  color-scheme: dark;
406
570
  }
571
+ :root[theme=auto] {
572
+ color-scheme: light dark;
573
+ }
407
574
  }
408
575
  @layer base {
409
576
  /*! Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -596,7 +763,7 @@
596
763
  box-sizing: inherit;
597
764
  }
598
765
  body {
599
- background-color: var(--md-sys-color-background);
766
+ background-color: var(--md-sys-color-surface);
600
767
  color: var(--md-sys-color-on-background);
601
768
  }
602
769
  button,
@@ -841,26 +1008,45 @@
841
1008
  font-size: clamp(1.2rem, 0.912rem + 1.12vw, 1.68rem);
842
1009
  }
843
1010
  .container {
1011
+ --md-comp-container-max-width: 1280px;
1012
+ --md-comp-container-width: 90%;
844
1013
  margin: 0 auto;
845
- max-width: 1280px;
846
- width: 90%;
1014
+ width: var(--md-comp-container-width);
1015
+ max-width: var(--md-comp-container-max-width);
847
1016
  }
848
1017
  @media (width >= 601px) {
849
1018
  .container {
850
- width: 85%;
1019
+ --md-comp-container-width: 85%;
851
1020
  }
852
1021
  }
853
1022
  @media (width >= 993px) {
854
1023
  .container {
855
- width: 70%;
1024
+ --md-comp-container-width: 70%;
1025
+ }
1026
+ }
1027
+ @media (width >= 1601px) {
1028
+ .container {
1029
+ --md-comp-container-width: 75%;
1030
+ --md-comp-container-max-width: 1920px;
856
1031
  }
857
1032
  }
1033
+ .container.wide {
1034
+ --md-comp-container-max-width: 2400px;
1035
+ }
1036
+ .container.max {
1037
+ --md-comp-container-max-width: none;
1038
+ }
858
1039
  .section {
859
1040
  padding: 1rem 0;
860
1041
  }
861
1042
  body {
862
1043
  --gap-size: 1.5rem;
863
1044
  }
1045
+ @media (width >= 1601px) {
1046
+ body {
1047
+ --gap-size: 2rem;
1048
+ }
1049
+ }
864
1050
  .row {
865
1051
  display: grid;
866
1052
  grid-template-columns: repeat(12, 1fr);
@@ -903,10 +1089,10 @@
903
1089
  grid-column: auto/span 12;
904
1090
  }
905
1091
  .row .offset-s1 {
906
- grid-column-start: 3;
1092
+ grid-column-start: 2;
907
1093
  }
908
1094
  .row .offset-s2 {
909
- grid-column-start: 2;
1095
+ grid-column-start: 3;
910
1096
  }
911
1097
  .row .offset-s3 {
912
1098
  grid-column-start: 4;
@@ -1148,6 +1334,77 @@
1148
1334
  grid-column-start: 12;
1149
1335
  }
1150
1336
  }
1337
+ @media (width >= 1601px) {
1338
+ .row .xxl1 {
1339
+ grid-column: auto/span 1;
1340
+ }
1341
+ .row .xxl2 {
1342
+ grid-column: auto/span 2;
1343
+ }
1344
+ .row .xxl3 {
1345
+ grid-column: auto/span 3;
1346
+ }
1347
+ .row .xxl4 {
1348
+ grid-column: auto/span 4;
1349
+ }
1350
+ .row .xxl5 {
1351
+ grid-column: auto/span 5;
1352
+ }
1353
+ .row .xxl6 {
1354
+ grid-column: auto/span 6;
1355
+ }
1356
+ .row .xxl7 {
1357
+ grid-column: auto/span 7;
1358
+ }
1359
+ .row .xxl8 {
1360
+ grid-column: auto/span 8;
1361
+ }
1362
+ .row .xxl9 {
1363
+ grid-column: auto/span 9;
1364
+ }
1365
+ .row .xxl10 {
1366
+ grid-column: auto/span 10;
1367
+ }
1368
+ .row .xxl11 {
1369
+ grid-column: auto/span 11;
1370
+ }
1371
+ .row .xxl12 {
1372
+ grid-column: auto/span 12;
1373
+ }
1374
+ .row .offset-xxl1 {
1375
+ grid-column-start: 2;
1376
+ }
1377
+ .row .offset-xxl2 {
1378
+ grid-column-start: 3;
1379
+ }
1380
+ .row .offset-xxl3 {
1381
+ grid-column-start: 4;
1382
+ }
1383
+ .row .offset-xxl4 {
1384
+ grid-column-start: 5;
1385
+ }
1386
+ .row .offset-xxl5 {
1387
+ grid-column-start: 6;
1388
+ }
1389
+ .row .offset-xxl6 {
1390
+ grid-column-start: 7;
1391
+ }
1392
+ .row .offset-xxl7 {
1393
+ grid-column-start: 8;
1394
+ }
1395
+ .row .offset-xxl8 {
1396
+ grid-column-start: 9;
1397
+ }
1398
+ .row .offset-xxl9 {
1399
+ grid-column-start: 10;
1400
+ }
1401
+ .row .offset-xxl10 {
1402
+ grid-column-start: 11;
1403
+ }
1404
+ .row .offset-xxl11 {
1405
+ grid-column-start: 12;
1406
+ }
1407
+ }
1151
1408
  .g-0 {
1152
1409
  gap: 0;
1153
1410
  }
@@ -1274,16 +1531,16 @@
1274
1531
  }
1275
1532
  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated {
1276
1533
  color: var(--md-sys-color-primary);
1277
- background-color: var(--md-sys-color-surface);
1534
+ background-color: var(--md-sys-color-surface-container-low);
1278
1535
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1279
1536
  }
1280
1537
  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:hover {
1281
1538
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
1282
- background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
1539
+ background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
1283
1540
  }
1284
1541
  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:focus {
1285
1542
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1286
- background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface));
1543
+ background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container-low));
1287
1544
  }
1288
1545
  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:focus-visible {
1289
1546
  outline: 3px solid var(--md-sys-color-secondary);
@@ -1655,73 +1912,99 @@
1655
1912
  --md-comp-fab-stagger: 0s;
1656
1913
  }
1657
1914
  }
1658
- .collection {
1659
- --md-comp-collection-shape: 12px;
1660
- --md-comp-collection-container-color: var(--md-sys-color-surface);
1661
- --md-comp-collection-outline-color: var(--md-sys-color-outline-variant);
1662
- --md-comp-collection-item-height: 56px;
1663
- --md-comp-collection-item-padding: 16px;
1664
- --md-comp-collection-avatar-size: 40px;
1915
+ .list {
1916
+ --md-comp-list-item-height: 56px;
1917
+ --md-comp-list-item-two-line-height: 72px;
1918
+ --md-comp-list-item-padding: 16px;
1919
+ --md-comp-list-item-shape: 100px;
1920
+ --md-comp-list-item-container-color: transparent;
1921
+ --md-comp-list-selected-container-color: var(--md-sys-color-secondary-container);
1922
+ --md-comp-list-selected-color: var(--md-sys-color-on-secondary-container);
1923
+ --md-comp-list-gap: 16px;
1924
+ --md-comp-list-leading-icon-size: 24px;
1925
+ --md-comp-list-trailing-icon-size: 24px;
1926
+ --md-comp-list-avatar-size: 40px;
1927
+ --md-comp-list-image-size: 56px;
1928
+ --md-comp-list-segmented-gap: 2px;
1665
1929
  box-sizing: border-box;
1666
- padding: 0;
1667
1930
  margin: 0.5rem 0 1rem;
1668
- overflow: hidden;
1931
+ padding: 0;
1669
1932
  list-style: none;
1670
- border: 1px solid var(--md-comp-collection-outline-color);
1671
- border-radius: var(--md-comp-collection-shape);
1672
- background-color: var(--md-comp-collection-container-color);
1673
1933
  color: var(--md-sys-color-on-surface);
1674
1934
  }
1675
- .collection > * + * {
1676
- border-top: 1px solid var(--md-comp-collection-outline-color);
1935
+ .list > li {
1936
+ box-sizing: border-box;
1937
+ margin: 0;
1938
+ border-radius: var(--md-comp-list-item-shape);
1939
+ background-color: var(--md-comp-list-item-container-color);
1940
+ color: inherit;
1941
+ transition: background-color 0.2s ease-out;
1677
1942
  }
1678
- .collection > :is(li, a) {
1943
+ .list > li:not(:has(> :is(a, label):only-child)),
1944
+ .list > li > :is(a, label):only-child {
1679
1945
  display: grid;
1680
- grid-template-columns: auto 1fr auto;
1946
+ grid-template-columns: auto minmax(0, 1fr) auto;
1681
1947
  grid-template-rows: auto auto;
1682
1948
  align-items: center;
1683
- column-gap: 16px;
1949
+ column-gap: var(--md-comp-list-gap);
1684
1950
  box-sizing: border-box;
1685
- min-height: var(--md-comp-collection-item-height);
1686
- margin: 0;
1687
- padding: 8px var(--md-comp-collection-item-padding);
1688
- background-color: transparent;
1689
- color: inherit;
1690
- text-decoration: none;
1691
- transition: background-color 0.2s ease-out;
1951
+ min-height: var(--md-comp-list-item-height);
1952
+ padding: 8px var(--md-comp-list-item-padding);
1953
+ font-family: var(--md-sys-typescale-body-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
1954
+ font-size: var(--md-sys-typescale-body-large-font-size);
1955
+ font-weight: var(--md-sys-typescale-body-large-font-weight);
1956
+ line-height: var(--md-sys-typescale-body-large-line-height);
1957
+ letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
1692
1958
  }
1693
- .collection > :is(li, a) > :is(img, i).circle {
1959
+ .list > li:not(:has(> :is(a, label):only-child)) > :is(i, img, input):first-child,
1960
+ .list > li > :is(a, label):only-child > :is(i, img, input):first-child {
1694
1961
  grid-column: 1;
1695
1962
  grid-row: 1/-1;
1696
- box-sizing: border-box;
1697
- width: var(--md-comp-collection-avatar-size);
1698
- height: var(--md-comp-collection-avatar-size);
1699
- overflow: hidden;
1963
+ align-self: center;
1964
+ flex-shrink: 0;
1965
+ }
1966
+ .list > li:not(:has(> :is(a, label):only-child)) > i:first-child:not(.circle),
1967
+ .list > li > :is(a, label):only-child > i:first-child:not(.circle) {
1968
+ font-size: var(--md-comp-list-leading-icon-size);
1969
+ width: var(--md-comp-list-leading-icon-size);
1970
+ height: var(--md-comp-list-leading-icon-size);
1971
+ color: var(--md-sys-color-on-surface-variant);
1972
+ }
1973
+ .list > li:not(:has(> :is(a, label):only-child)) > img:first-child,
1974
+ .list > li > :is(a, label):only-child > img:first-child {
1975
+ width: var(--md-comp-list-image-size);
1976
+ height: var(--md-comp-list-image-size);
1977
+ object-fit: cover;
1978
+ border-radius: 8px;
1979
+ }
1980
+ .list > li:not(:has(> :is(a, label):only-child)) > :is(img, i).circle,
1981
+ .list > li > :is(a, label):only-child > :is(img, i).circle {
1982
+ width: var(--md-comp-list-avatar-size);
1983
+ height: var(--md-comp-list-avatar-size);
1984
+ border-radius: 50%;
1700
1985
  object-fit: cover;
1701
1986
  }
1702
- .collection > :is(li, a) > i.circle {
1987
+ .list > li:not(:has(> :is(a, label):only-child)) > i.circle,
1988
+ .list > li > :is(a, label):only-child > i.circle {
1703
1989
  display: inline-flex;
1704
1990
  align-items: center;
1705
1991
  justify-content: center;
1706
1992
  font-size: 20px;
1707
1993
  line-height: 1;
1708
- color: var(--md-sys-color-on-primary-container);
1709
1994
  background-color: var(--md-sys-color-primary-container);
1710
- text-align: center;
1995
+ color: var(--md-sys-color-on-primary-container);
1711
1996
  }
1712
- .collection > :is(li, a) > .title {
1997
+ .list > li:not(:has(> :is(a, label):only-child)) > div:not(.meta),
1998
+ .list > li:not(:has(> :is(a, label):only-child)) > span,
1999
+ .list > li > :is(a, label):only-child > div:not(.meta),
2000
+ .list > li > :is(a, label):only-child > span {
1713
2001
  grid-column: 2;
1714
- grid-row: 1;
1715
2002
  min-width: 0;
1716
- font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
1717
- font-size: var(--md-sys-typescale-title-medium-font-size);
1718
- font-weight: var(--md-sys-typescale-title-medium-font-weight);
1719
- line-height: var(--md-sys-typescale-title-medium-line-height);
1720
- letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
1721
2003
  }
1722
- .collection > :is(li, a) > p {
2004
+ .list > li:not(:has(> :is(a, label):only-child)) > p,
2005
+ .list > li > :is(a, label):only-child > p {
1723
2006
  grid-column: 2;
1724
- grid-row: 1;
2007
+ grid-row: 2;
1725
2008
  min-width: 0;
1726
2009
  margin: 0;
1727
2010
  color: var(--md-sys-color-on-surface-variant);
@@ -1731,144 +2014,260 @@
1731
2014
  line-height: var(--md-sys-typescale-body-medium-line-height);
1732
2015
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
1733
2016
  }
1734
- .collection > :is(li, a) > .title ~ p {
1735
- grid-row: 2;
1736
- }
1737
- .collection > :is(li, a) > :is(a:last-child, .badge) {
2017
+ .list > li:not(:has(> :is(a, label):only-child)) > :is(i, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child),
2018
+ .list > li > :is(a, label):only-child > :is(i, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child) {
1738
2019
  grid-column: 3;
1739
2020
  grid-row: 1/-1;
1740
- align-self: center;
1741
2021
  justify-self: end;
2022
+ align-self: center;
1742
2023
  }
1743
- .collection > :is(li, a) > a:not(.badge) {
1744
- grid-column: 1/-1;
1745
- display: flex;
2024
+ .list > li:not(:has(> :is(a, label):only-child)) > i:last-child:not(:first-child),
2025
+ .list > li > :is(a, label):only-child > i:last-child:not(:first-child) {
2026
+ font-size: var(--md-comp-list-trailing-icon-size);
2027
+ width: var(--md-comp-list-trailing-icon-size);
2028
+ height: var(--md-comp-list-trailing-icon-size);
2029
+ color: var(--md-sys-color-on-surface-variant);
2030
+ }
2031
+ .list > li:not(:has(> :is(a, label):only-child)) > :is(kbd, time, .meta):last-child,
2032
+ .list > li > :is(a, label):only-child > :is(kbd, time, .meta):last-child {
2033
+ color: var(--md-sys-color-on-surface-variant);
2034
+ font-family: var(--md-sys-typescale-label-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2035
+ font-size: var(--md-sys-typescale-label-small-font-size);
2036
+ font-weight: var(--md-sys-typescale-label-small-font-weight);
2037
+ line-height: var(--md-sys-typescale-label-small-line-height);
2038
+ letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
2039
+ }
2040
+ .list > li:not(:has(> :is(a, label):only-child)) > kbd:last-child,
2041
+ .list > li > :is(a, label):only-child > kbd:last-child {
2042
+ font-family: inherit;
2043
+ border: 0;
2044
+ background: none;
2045
+ padding: 0;
2046
+ }
2047
+ .list > li:not(:has(> :is(a, label):only-child)) > button:last-child:not(:first-child):not(.button),
2048
+ .list > li:not(:has(> :is(a, label):only-child)) > a:last-child:not(:first-child):not(.button):has(> i:only-child),
2049
+ .list > li > :is(a, label):only-child > button:last-child:not(:first-child):not(.button),
2050
+ .list > li > :is(a, label):only-child > a:last-child:not(:first-child):not(.button):has(> i:only-child) {
2051
+ display: inline-flex;
1746
2052
  align-items: center;
1747
- gap: 16px;
1748
- min-width: 0;
2053
+ justify-content: center;
2054
+ padding: 0;
2055
+ border: 0;
2056
+ background: transparent;
1749
2057
  color: inherit;
1750
- text-decoration: none;
2058
+ cursor: pointer;
2059
+ appearance: none;
1751
2060
  }
1752
- .collection > :is(li, a) > a:not(.badge) > .badge {
1753
- margin-inline-start: auto;
2061
+ .list > li:not(:has(> :is(a, label):only-child)) > button:last-child:not(:first-child):not(.button):focus-visible,
2062
+ .list > li:not(:has(> :is(a, label):only-child)) > a:last-child:not(:first-child):not(.button):has(> i:only-child):focus-visible,
2063
+ .list > li > :is(a, label):only-child > button:last-child:not(:first-child):not(.button):focus-visible,
2064
+ .list > li > :is(a, label):only-child > a:last-child:not(:first-child):not(.button):has(> i:only-child):focus-visible {
2065
+ outline: 3px solid var(--md-sys-color-secondary);
2066
+ outline-offset: 2px;
1754
2067
  }
1755
- .collection > :is(li, a):has(> .circle) {
1756
- min-height: 72px;
2068
+ .list > li:not(:has(> :is(a, label):only-child)):has(> p), .list > li:not(:has(> :is(a, label):only-child)):has(> div:not(.meta) > p),
2069
+ .list > li > :is(a, label):only-child:has(> p),
2070
+ .list > li > :is(a, label):only-child:has(> div:not(.meta) > p) {
2071
+ min-height: var(--md-comp-list-item-two-line-height);
1757
2072
  }
1758
- .collection > li:has(> :is(h1, h2, h3, h4, h5, h6)) {
1759
- min-height: 0;
1760
- padding-block: 12px;
2073
+ .list > li:not(:has(> :is(a, label):only-child)):has(> img:first-child:not(.circle)),
2074
+ .list > li > :is(a, label):only-child:has(> img:first-child:not(.circle)) {
2075
+ min-height: calc(var(--md-comp-list-image-size) + 16px);
1761
2076
  }
1762
- .collection > li:has(> :is(h1, h2, h3, h4, h5, h6)) > :is(h1, h2, h3, h4, h5, h6) {
1763
- grid-column: 1/-1;
1764
- margin: 0;
1765
- font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
1766
- font-size: var(--md-sys-typescale-title-medium-font-size);
1767
- font-weight: var(--md-sys-typescale-title-medium-font-weight);
1768
- line-height: var(--md-sys-typescale-title-medium-line-height);
1769
- letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
2077
+ .list > li > :is(a, label):only-child {
2078
+ color: inherit;
2079
+ text-decoration: none;
2080
+ border-radius: inherit;
2081
+ cursor: pointer;
1770
2082
  }
1771
- .collection > a:focus-visible,
1772
- .collection > li > a:focus-visible {
2083
+ .list > li > :is(a, label):only-child:focus-visible {
1773
2084
  outline: 3px solid var(--md-sys-color-secondary);
1774
2085
  outline-offset: 2px;
1775
2086
  }
1776
- .collection > a:hover,
1777
- .collection > li:has(> a:hover) {
1778
- background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
1779
- }
1780
- .collection > :is(.active, [aria-current=page]),
1781
- .collection > li:has(> [aria-current=page]) {
1782
- background-color: var(--md-sys-color-secondary-container);
1783
- color: var(--md-sys-color-on-secondary-container);
1784
- }
1785
- .collection > :is(.active, [aria-current=page]) > a:last-child,
1786
- .collection > li:has(> [aria-current=page]) > a:last-child {
1787
- color: var(--md-sys-color-on-secondary-container);
2087
+ .list > li:not(.active):not([aria-selected=true]):not([aria-current]):not(:has(> [aria-current])):not(:has([aria-selected=true])):not(:has(:checked)):hover {
2088
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, var(--md-comp-list-item-container-color));
2089
+ }
2090
+ .list > li.active,
2091
+ .list > li[aria-selected=true],
2092
+ .list > li[aria-current],
2093
+ .list > li:has(> [aria-current]),
2094
+ .list > li:has([aria-selected=true]),
2095
+ .list > li:has(:checked) {
2096
+ background-color: var(--md-comp-list-selected-container-color);
2097
+ color: var(--md-comp-list-selected-color);
2098
+ }
2099
+ .list > li.active i,
2100
+ .list > li.active p,
2101
+ .list > li.active kbd,
2102
+ .list > li.active time,
2103
+ .list > li.active .meta,
2104
+ .list > li[aria-selected=true] i,
2105
+ .list > li[aria-selected=true] p,
2106
+ .list > li[aria-selected=true] kbd,
2107
+ .list > li[aria-selected=true] time,
2108
+ .list > li[aria-selected=true] .meta,
2109
+ .list > li[aria-current] i,
2110
+ .list > li[aria-current] p,
2111
+ .list > li[aria-current] kbd,
2112
+ .list > li[aria-current] time,
2113
+ .list > li[aria-current] .meta,
2114
+ .list > li:has(> [aria-current]) i,
2115
+ .list > li:has(> [aria-current]) p,
2116
+ .list > li:has(> [aria-current]) kbd,
2117
+ .list > li:has(> [aria-current]) time,
2118
+ .list > li:has(> [aria-current]) .meta,
2119
+ .list > li:has([aria-selected=true]) i,
2120
+ .list > li:has([aria-selected=true]) p,
2121
+ .list > li:has([aria-selected=true]) kbd,
2122
+ .list > li:has([aria-selected=true]) time,
2123
+ .list > li:has([aria-selected=true]) .meta,
2124
+ .list > li:has(:checked) i,
2125
+ .list > li:has(:checked) p,
2126
+ .list > li:has(:checked) kbd,
2127
+ .list > li:has(:checked) time,
2128
+ .list > li:has(:checked) .meta {
2129
+ color: inherit;
1788
2130
  }
1789
- .collection > :is(.active, [aria-current=page]) span.badge:not(.new),
1790
- .collection > li:has(> [aria-current=page]) span.badge:not(.new) {
1791
- color: var(--md-sys-color-on-secondary-container);
2131
+ .list > li.active > i:first-child,
2132
+ .list > li.active > :is(a, label):only-child > i:first-child,
2133
+ .list > li[aria-selected=true] > i:first-child,
2134
+ .list > li[aria-selected=true] > :is(a, label):only-child > i:first-child,
2135
+ .list > li[aria-current] > i:first-child,
2136
+ .list > li[aria-current] > :is(a, label):only-child > i:first-child,
2137
+ .list > li:has(> [aria-current]) > i:first-child,
2138
+ .list > li:has(> [aria-current]) > :is(a, label):only-child > i:first-child,
2139
+ .list > li:has([aria-selected=true]) > i:first-child,
2140
+ .list > li:has([aria-selected=true]) > :is(a, label):only-child > i:first-child,
2141
+ .list > li:has(:checked) > i:first-child,
2142
+ .list > li:has(:checked) > :is(a, label):only-child > i:first-child {
2143
+ --md-icon-fill: 1;
1792
2144
  }
1793
- .collection > :is(.disabled, [aria-disabled=true]) {
2145
+ .list > li:has(> :is(h1, h2, h3, h4, h5, h6):only-child) {
2146
+ min-height: 0;
2147
+ padding: 16px var(--md-comp-list-item-padding) 8px;
2148
+ background: transparent;
1794
2149
  pointer-events: none;
1795
- color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
2150
+ color: var(--md-sys-color-on-surface-variant);
1796
2151
  }
1797
- .collection span.badge {
1798
- float: none;
1799
- margin-block: 0;
1800
- margin-inline-start: auto;
2152
+ .list > li:has(> :is(h1, h2, h3, h4, h5, h6):only-child) > :is(h1, h2, h3, h4, h5, h6) {
2153
+ margin: 0;
2154
+ font-family: var(--md-sys-typescale-title-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2155
+ font-size: var(--md-sys-typescale-title-small-font-size);
2156
+ font-weight: var(--md-sys-typescale-title-small-font-weight);
2157
+ line-height: var(--md-sys-typescale-title-small-line-height);
2158
+ letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
1801
2159
  }
1802
- .collection.flush {
1803
- border: 0;
2160
+ .list > li.divider {
2161
+ height: 1px;
2162
+ min-height: 0;
2163
+ padding: 0;
2164
+ margin: 8px var(--md-comp-list-item-padding);
1804
2165
  border-radius: 0;
2166
+ background-color: var(--md-sys-color-outline-variant);
2167
+ pointer-events: none;
1805
2168
  }
1806
- .collapsible .collection {
1807
- margin: 0;
1808
- border: none;
1809
- border-radius: 0;
1810
- }
1811
- :root {
1812
- --bagde-height: 22px;
2169
+ .list > li.disabled,
2170
+ .list > li[aria-disabled=true] {
2171
+ pointer-events: none;
2172
+ color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
1813
2173
  }
1814
- span.badge {
1815
- min-width: 3rem;
1816
- padding: 0 6px;
1817
- margin-left: 14px;
1818
- text-align: center;
1819
- font-size: 1rem;
1820
- line-height: var(--bagde-height);
1821
- height: var(--bagde-height);
1822
- color: var(--md-sys-color-on-surface-variant);
1823
- float: right;
2174
+ .list.segmented {
2175
+ --md-comp-list-item-container-color: color-mix(
2176
+ in oklab,
2177
+ var(--md-sys-color-on-surface) 8%,
2178
+ var(--md-sys-color-surface)
2179
+ );
2180
+ --md-comp-list-item-shape: 20px;
2181
+ display: flex;
2182
+ flex-direction: column;
2183
+ gap: var(--md-comp-list-segmented-gap);
2184
+ }
2185
+ .badge {
2186
+ --md-comp-badge-color: var(--md-sys-color-error);
2187
+ --md-comp-badge-label-text-color: var(--md-sys-color-on-error);
2188
+ --md-comp-badge-large-size: 16px;
2189
+ --md-comp-badge-small-size: 6px;
2190
+ --md-comp-badge-large-shape: 8px;
2191
+ --md-comp-badge-icon-size: 24px;
1824
2192
  box-sizing: border-box;
2193
+ display: inline-flex;
2194
+ flex-shrink: 0;
2195
+ align-items: center;
2196
+ justify-content: center;
2197
+ min-width: var(--md-comp-badge-large-size);
2198
+ height: var(--md-comp-badge-large-size);
2199
+ max-width: calc(4ch + 8px);
2200
+ margin: 0;
2201
+ padding: 0 4px;
2202
+ overflow: hidden;
2203
+ border-radius: var(--md-comp-badge-large-shape);
2204
+ background-color: var(--md-comp-badge-color);
2205
+ color: var(--md-comp-badge-label-text-color);
2206
+ white-space: nowrap;
2207
+ font-family: var(--md-sys-typescale-label-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2208
+ font-size: var(--md-sys-typescale-label-small-font-size);
2209
+ font-weight: var(--md-sys-typescale-label-small-font-weight);
2210
+ line-height: var(--md-sys-typescale-label-small-line-height);
2211
+ letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
2212
+ line-height: var(--md-comp-badge-large-size);
2213
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1825
2214
  }
1826
- span.badge.new {
1827
- font-weight: 300;
1828
- font-size: 0.8rem;
1829
- color: var(--md-sys-color-on-primary);
1830
- background-color: var(--md-sys-color-primary);
1831
- border-radius: 2px;
2215
+ .badge:empty {
2216
+ width: var(--md-comp-badge-small-size);
2217
+ min-width: var(--md-comp-badge-small-size);
2218
+ max-width: var(--md-comp-badge-small-size);
2219
+ height: var(--md-comp-badge-small-size);
2220
+ padding: 0;
2221
+ border-radius: 50%;
2222
+ font-size: 0;
2223
+ line-height: 0;
2224
+ color: transparent;
1832
2225
  }
1833
- span.badge.new:after {
1834
- content: " new";
2226
+ :is(i,
2227
+ .material-symbols,
2228
+ .material-symbols-outlined,
2229
+ .material-symbols-rounded,
2230
+ .material-symbols-sharp,
2231
+ .material-icons) {
2232
+ position: relative;
2233
+ overflow: visible;
1835
2234
  }
1836
- span.badge[data-badge-caption]::after {
1837
- content: " " attr(data-badge-caption);
2235
+ :is(i,
2236
+ .material-symbols,
2237
+ .material-symbols-outlined,
2238
+ .material-symbols-rounded,
2239
+ .material-symbols-sharp,
2240
+ .material-icons) > .badge {
2241
+ position: absolute;
2242
+ z-index: 1;
2243
+ inset-block-start: calc((100% - var(--md-comp-badge-icon-size)) / 2);
2244
+ inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
2245
+ transform: translate(50%, -50%);
1838
2246
  }
1839
- .active span.badge {
1840
- color: var(--md-sys-color-on-primary);
2247
+ :is(i,
2248
+ .material-symbols,
2249
+ .material-symbols-outlined,
2250
+ .material-symbols-rounded,
2251
+ .material-symbols-sharp,
2252
+ .material-icons) > .badge:dir(rtl), [dir=rtl] :is(i,
2253
+ .material-symbols,
2254
+ .material-symbols-outlined,
2255
+ .material-symbols-rounded,
2256
+ .material-symbols-sharp,
2257
+ .material-icons) > .badge {
2258
+ transform: translate(-50%, -50%);
1841
2259
  }
1842
- header:has(> nav) nav a span.badge {
1843
- display: inline-block;
1844
- float: none;
1845
- margin-left: 4px;
1846
- line-height: var(--bagde-height);
1847
- height: var(--bagde-height);
1848
- -webkit-font-smoothing: auto;
2260
+ .list .badge,
2261
+ .sidenav .badge,
2262
+ menu .badge {
2263
+ position: static;
2264
+ transform: none;
1849
2265
  }
1850
- .collection span.badge {
1851
- float: none;
1852
- margin-block: 0;
2266
+ .list .badge {
1853
2267
  margin-inline-start: auto;
1854
2268
  }
1855
- .collapsible span.badge {
1856
- margin-left: auto;
1857
- }
1858
- .collapsible span.badge.leading {
1859
- margin-right: 7px;
1860
- order: -1;
1861
- }
1862
- .collapsible :is(.active, [open]) span.badge:not(.new) {
1863
- color: var(--md-sys-color-on-surface-variant);
1864
- }
1865
- .sidenav span.badge {
1866
- margin-top: calc(var(--md-comp-nav-drawer-line-height) * 0.5 - 11px);
1867
- }
1868
- table span.badge {
1869
- display: inline-block;
1870
- float: none;
1871
- margin-left: auto;
2269
+ .sidenav summary .badge {
2270
+ margin-inline-start: 14px;
1872
2271
  }
1873
2272
  :root {
1874
2273
  --md-icon-font-outlined: "Material Symbols Outlined";
@@ -1935,20 +2334,26 @@
1935
2334
  .icon-filled {
1936
2335
  --md-icon-fill: 1;
1937
2336
  }
1938
- header:has(> nav) {
2337
+ @property --md-comp-top-app-bar-scroll {
2338
+ syntax: "<number>";
2339
+ inherits: false;
2340
+ initial-value: 0;
2341
+ }
2342
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
1939
2343
  --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
2344
+ --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
1940
2345
  --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
1941
2346
  --md-comp-top-app-bar-leading-icon-color: inherit;
1942
2347
  --md-comp-top-app-bar-trailing-icon-color: inherit;
1943
2348
  --md-comp-top-app-bar-container-height: 64px;
1944
2349
  --md-comp-top-app-bar-leading-icon-size: 24px;
1945
2350
  --md-comp-top-app-bar-container-shape: 0;
1946
- background-color: var(--md-comp-top-app-bar-container-color);
2351
+ background-color: color-mix(in oklab, var(--md-comp-top-app-bar-scrolled-container-color) calc(100% * var(--md-comp-top-app-bar-scroll)), var(--md-comp-top-app-bar-container-color));
1947
2352
  color: var(--md-comp-top-app-bar-headline-color);
1948
2353
  border-radius: var(--md-comp-top-app-bar-container-shape);
1949
2354
  width: 100%;
1950
2355
  }
1951
- header:has(> nav) > nav:not(.tabs) {
2356
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
1952
2357
  display: flex;
1953
2358
  align-items: center;
1954
2359
  box-sizing: border-box;
@@ -1957,16 +2362,16 @@
1957
2362
  padding-inline: 4px;
1958
2363
  margin: 0;
1959
2364
  }
1960
- header:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
2365
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
1961
2366
  flex: 1 1 auto;
1962
2367
  min-width: 0;
1963
2368
  margin: 0;
1964
2369
  padding-inline: 4px 12px;
1965
2370
  }
1966
- header:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6):first-child {
2371
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6):first-child {
1967
2372
  padding-inline-start: 12px;
1968
2373
  }
1969
- header:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
2374
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
1970
2375
  overflow: hidden;
1971
2376
  text-overflow: ellipsis;
1972
2377
  white-space: nowrap;
@@ -1977,7 +2382,7 @@
1977
2382
  line-height: var(--md-sys-typescale-title-large-line-height);
1978
2383
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
1979
2384
  }
1980
- header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
2385
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
1981
2386
  display: inline-flex;
1982
2387
  flex: 0 0 auto;
1983
2388
  align-items: center;
@@ -1985,7 +2390,8 @@
1985
2390
  width: 48px;
1986
2391
  height: 48px;
1987
2392
  padding: 0;
1988
- margin: 0;
2393
+ margin-block: 0;
2394
+ margin-inline-end: 0;
1989
2395
  border: 0;
1990
2396
  border-radius: 50%;
1991
2397
  background: transparent;
@@ -1995,24 +2401,24 @@
1995
2401
  font: inherit;
1996
2402
  text-decoration: none;
1997
2403
  }
1998
- header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):focus-visible {
2404
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):focus-visible {
1999
2405
  outline: 3px solid var(--md-sys-color-secondary);
2000
2406
  outline-offset: 2px;
2001
2407
  }
2002
- header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) > i {
2408
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) > i {
2003
2409
  display: block;
2004
2410
  font-size: var(--md-comp-top-app-bar-leading-icon-size);
2005
2411
  width: var(--md-comp-top-app-bar-leading-icon-size);
2006
2412
  height: var(--md-comp-top-app-bar-leading-icon-size);
2007
2413
  line-height: var(--md-comp-top-app-bar-leading-icon-size);
2008
2414
  }
2009
- header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):hover {
2415
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):hover {
2010
2416
  background-color: color-mix(in oklab, currentColor 8%, transparent);
2011
2417
  }
2012
- header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):active {
2418
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):active {
2013
2419
  background-color: color-mix(in oklab, currentColor 10%, transparent);
2014
2420
  }
2015
- header:has(> nav) > nav:not(.tabs) > :is(menu, ul) {
2421
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) {
2016
2422
  display: flex;
2017
2423
  align-items: stretch;
2018
2424
  align-self: stretch;
@@ -2020,11 +2426,11 @@
2020
2426
  margin: 0;
2021
2427
  padding: 0;
2022
2428
  }
2023
- header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li {
2429
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li {
2024
2430
  display: flex;
2025
2431
  align-items: stretch;
2026
2432
  }
2027
- header:has(> nav) > nav:not(.tabs) > ol {
2433
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > ol {
2028
2434
  display: flex;
2029
2435
  flex-wrap: wrap;
2030
2436
  align-items: center;
@@ -2035,7 +2441,7 @@
2035
2441
  margin: 0;
2036
2442
  padding-inline: 12px;
2037
2443
  }
2038
- header:has(> nav) > nav:not(.tabs) > form {
2444
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form {
2039
2445
  display: flex;
2040
2446
  flex: 1 1 auto;
2041
2447
  align-items: center;
@@ -2043,7 +2449,7 @@
2043
2449
  min-width: 0;
2044
2450
  margin: 0;
2045
2451
  }
2046
- header:has(> nav) > nav:not(.tabs) > form input {
2452
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form input {
2047
2453
  flex: 1 1 auto;
2048
2454
  min-width: 0;
2049
2455
  height: 100%;
@@ -2058,24 +2464,12 @@
2058
2464
  font-weight: var(--md-sys-typescale-body-large-font-weight);
2059
2465
  line-height: var(--md-sys-typescale-body-large-line-height);
2060
2466
  }
2061
- header:has(> nav) > nav:not(.tabs) > form input:focus, header:has(> nav) > nav:not(.tabs) > form input:focus-visible {
2467
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form input:focus, header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form input:focus-visible {
2062
2468
  outline: none;
2063
2469
  border: 0;
2064
2470
  box-shadow: none;
2065
2471
  }
2066
- header:has(> nav) > .tabs {
2067
- background-color: transparent;
2068
- width: 100%;
2069
- }
2070
- @media (width >= 993px) {
2071
- header:has(> nav) > nav:not(.tabs) > .sidenav-trigger {
2072
- display: none !important;
2073
- }
2074
- header:has(> nav) > nav:not(.tabs) > .sidenav-trigger + :is(h1, h2, h3, h4, h5, h6) {
2075
- padding-inline-start: 12px;
2076
- }
2077
- }
2078
- header:has(> nav) > nav:not(.tabs) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a {
2472
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a {
2079
2473
  display: inline-flex;
2080
2474
  align-items: center;
2081
2475
  padding: 0 12px;
@@ -2087,21 +2481,21 @@
2087
2481
  line-height: var(--md-sys-typescale-label-large-line-height);
2088
2482
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
2089
2483
  }
2090
- header:has(> nav) > nav:not(.tabs) > a:focus-visible:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a:focus-visible {
2484
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:focus-visible:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a:focus-visible {
2091
2485
  outline: 3px solid var(--md-sys-color-secondary);
2092
2486
  outline-offset: 2px;
2093
2487
  }
2094
- header:has(> nav) > nav:not(.tabs) > a:hover:not(.active):not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a:hover:not(.active) {
2488
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:hover:not(.active):not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a:hover:not(.active) {
2095
2489
  background-color: color-mix(in oklab, currentColor 8%, transparent);
2096
2490
  }
2097
- header:has(> nav) > nav:not(.tabs) > a.active:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a.active {
2491
+ header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a.active:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a.active {
2098
2492
  background-color: color-mix(in oklab, currentColor 10%, transparent);
2099
2493
  }
2100
- header.center:has(> nav) > nav:not(.tabs) {
2494
+ header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
2101
2495
  position: relative;
2102
2496
  justify-content: space-between;
2103
2497
  }
2104
- header.center:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
2498
+ header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
2105
2499
  position: absolute;
2106
2500
  left: 50%;
2107
2501
  transform: translateX(-50%);
@@ -2111,25 +2505,31 @@
2111
2505
  text-align: center;
2112
2506
  pointer-events: none;
2113
2507
  }
2114
- header.medium:has(> nav) > nav:not(.tabs),
2115
- header.large:has(> nav) > nav:not(.tabs) {
2508
+ header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail),
2509
+ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
2116
2510
  flex-wrap: wrap;
2117
- align-content: flex-start;
2511
+ align-content: space-between;
2512
+ align-items: flex-start;
2118
2513
  height: auto;
2514
+ padding-top: 4px;
2119
2515
  }
2120
- header.medium:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6),
2121
- header.large:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
2516
+ header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6),
2517
+ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
2122
2518
  order: 1;
2123
2519
  flex: 1 0 100%;
2124
2520
  white-space: normal;
2125
2521
  overflow: visible;
2126
2522
  text-overflow: unset;
2127
2523
  }
2128
- header.medium:has(> nav) > nav:not(.tabs) {
2524
+ header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) + *,
2525
+ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) + * {
2526
+ margin-inline-start: auto;
2527
+ }
2528
+ header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
2129
2529
  min-height: 112px;
2130
2530
  padding-bottom: 16px;
2131
2531
  }
2132
- header.medium:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
2532
+ header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
2133
2533
  padding: 4px 12px 0 16px;
2134
2534
  font-family: var(--md-sys-typescale-headline-small-font-family-name);
2135
2535
  font-size: var(--md-sys-typescale-headline-small-font-size);
@@ -2137,11 +2537,11 @@
2137
2537
  line-height: var(--md-sys-typescale-headline-small-line-height);
2138
2538
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
2139
2539
  }
2140
- header.large:has(> nav) > nav:not(.tabs) {
2540
+ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
2141
2541
  min-height: 152px;
2142
2542
  padding-bottom: 28px;
2143
2543
  }
2144
- header.large:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
2544
+ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
2145
2545
  padding: 12px 12px 0 16px;
2146
2546
  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
2147
2547
  font-size: var(--md-sys-typescale-headline-medium-font-size);
@@ -2149,7 +2549,7 @@
2149
2549
  line-height: var(--md-sys-typescale-headline-medium-line-height);
2150
2550
  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
2151
2551
  }
2152
- header.fixed:has(> nav) {
2552
+ header.fixed:has(> nav:not(.navigation-bar, .navigation-rail)) {
2153
2553
  position: sticky;
2154
2554
  top: 0;
2155
2555
  z-index: 997;
@@ -2159,166 +2559,533 @@
2159
2559
  }
2160
2560
  @keyframes top-app-bar-scroll {
2161
2561
  to {
2162
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
2163
- }
2164
- }
2165
- footer:has(> nav:only-child) {
2166
- --md-comp-bottom-app-bar-container-color: var(--md-sys-color-surface);
2167
- --md-comp-bottom-app-bar-container-height: 80px;
2168
- background-color: var(--md-comp-bottom-app-bar-container-color);
2169
- color: var(--md-sys-color-on-surface);
2170
- width: 100%;
2171
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
2172
- }
2173
- footer:has(> nav:only-child) > nav:not(.tabs) {
2562
+ --md-comp-top-app-bar-scroll: 1;
2563
+ }
2564
+ }
2565
+ .navigation-bar {
2566
+ --md-comp-nav-bar-container-color: var(--md-sys-color-surface-container);
2567
+ --md-comp-nav-bar-container-height: 64px;
2568
+ --md-comp-nav-bar-icon-size: 24px;
2569
+ --md-comp-nav-bar-indicator-width: 56px;
2570
+ --md-comp-nav-bar-indicator-height: 32px;
2571
+ --md-comp-nav-bar-indicator-shape: 16px;
2572
+ --md-comp-nav-bar-active-indicator-color: var(--md-sys-color-secondary-container);
2573
+ --md-comp-nav-bar-active-color: var(--md-sys-color-on-secondary-container);
2574
+ box-sizing: border-box;
2174
2575
  display: flex;
2175
2576
  align-items: center;
2176
- box-sizing: border-box;
2577
+ justify-content: space-evenly;
2177
2578
  width: 100%;
2178
- min-height: var(--md-comp-bottom-app-bar-container-height);
2179
- padding: 12px 4px;
2579
+ min-height: var(--md-comp-nav-bar-container-height);
2180
2580
  margin: 0;
2581
+ padding: 6px 8px;
2582
+ padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
2583
+ background-color: var(--md-comp-nav-bar-container-color);
2584
+ color: var(--md-sys-color-on-surface);
2181
2585
  }
2182
- footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
2183
- display: inline-flex;
2184
- flex: 0 0 auto;
2586
+ .navigation-bar > :is(a, button) {
2587
+ position: relative;
2588
+ box-sizing: border-box;
2589
+ display: flex;
2590
+ flex: 1 1 0;
2591
+ flex-direction: column;
2185
2592
  align-items: center;
2186
2593
  justify-content: center;
2187
- width: 48px;
2188
- height: 48px;
2189
- padding: 0;
2594
+ gap: 4px;
2595
+ min-width: 0;
2190
2596
  margin: 0;
2597
+ padding: 4px 0 6px;
2191
2598
  border: 0;
2192
- border-radius: 50%;
2193
2599
  background: transparent;
2194
2600
  color: var(--md-sys-color-on-surface-variant);
2195
2601
  cursor: pointer;
2196
2602
  appearance: none;
2197
- font: inherit;
2198
2603
  text-decoration: none;
2604
+ font-family: var(--md-sys-typescale-label-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2605
+ font-size: var(--md-sys-typescale-label-medium-font-size);
2606
+ font-weight: var(--md-sys-typescale-label-medium-font-weight);
2607
+ line-height: var(--md-sys-typescale-label-medium-line-height);
2608
+ letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
2199
2609
  }
2200
- footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):focus-visible {
2610
+ .navigation-bar > :is(a, button):focus-visible {
2201
2611
  outline: 3px solid var(--md-sys-color-secondary);
2202
2612
  outline-offset: 2px;
2203
2613
  }
2204
- footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) > i {
2205
- display: block;
2206
- font-size: 24px;
2207
- width: 24px;
2208
- height: 24px;
2209
- line-height: 24px;
2614
+ .navigation-bar > :is(a, button) > i {
2615
+ display: flex;
2616
+ flex-shrink: 0;
2617
+ align-items: center;
2618
+ justify-content: center;
2619
+ box-sizing: border-box;
2620
+ width: var(--md-comp-nav-bar-indicator-width);
2621
+ height: var(--md-comp-nav-bar-indicator-height);
2622
+ border-radius: var(--md-comp-nav-bar-indicator-shape);
2623
+ font-size: var(--md-comp-nav-bar-icon-size);
2624
+ color: inherit;
2625
+ transition: background-color 0.2s ease-out;
2210
2626
  }
2211
- footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):hover {
2212
- background-color: color-mix(in oklab, currentColor 8%, transparent);
2627
+ .navigation-bar > :is(a, button):hover:not(.active, [aria-current]) > i {
2628
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
2213
2629
  }
2214
- footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):active {
2215
- background-color: color-mix(in oklab, currentColor 10%, transparent);
2630
+ .navigation-bar > :is(a, button).active, .navigation-bar > :is(a, button)[aria-current] {
2631
+ color: var(--md-sys-color-on-surface);
2216
2632
  }
2217
- footer:has(> nav:only-child) > nav:not(.tabs) > :is(.button, .circle, .extra) {
2218
- margin-inline-start: auto;
2633
+ .navigation-bar > :is(a, button).active > i, .navigation-bar > :is(a, button)[aria-current] > i {
2634
+ background-color: var(--md-comp-nav-bar-active-indicator-color);
2635
+ color: var(--md-comp-nav-bar-active-color);
2636
+ --md-icon-fill: 1;
2637
+ }
2638
+ .navigation-bar > :is(a, button).disabled, .navigation-bar > :is(a, button)[aria-disabled=true] {
2639
+ pointer-events: none;
2640
+ color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
2641
+ }
2642
+ .navigation-bar > :is(a, button) > .badge {
2643
+ position: absolute;
2644
+ z-index: 1;
2645
+ top: calc(4px + (var(--md-comp-nav-bar-indicator-height) - 24px) / 2);
2646
+ left: calc(50% + 12px);
2647
+ transform: translate(-50%, -50%);
2648
+ }
2649
+ .navigation-bar.horizontal {
2650
+ --md-comp-nav-bar-indicator-shape: 100px;
2651
+ min-height: 56px;
2652
+ }
2653
+ .navigation-bar.horizontal > :is(a, button) {
2654
+ flex: 0 1 auto;
2655
+ flex-direction: row;
2656
+ gap: 8px;
2657
+ min-height: 40px;
2658
+ padding: 8px 16px;
2659
+ border-radius: var(--md-comp-nav-bar-indicator-shape);
2660
+ }
2661
+ .navigation-bar.horizontal > :is(a, button) > i {
2662
+ width: var(--md-comp-nav-bar-icon-size);
2663
+ height: var(--md-comp-nav-bar-icon-size);
2664
+ border-radius: 0;
2665
+ }
2666
+ .navigation-bar.horizontal > :is(a, button) > .badge {
2667
+ top: calc(50% - 12px);
2668
+ left: auto;
2669
+ inset-inline-start: 40px;
2670
+ transform: translate(-50%, -50%);
2671
+ }
2672
+ .navigation-bar.horizontal > :is(a, button):hover:not(.active, [aria-current]) {
2673
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
2674
+ }
2675
+ .navigation-bar.horizontal > :is(a, button):hover:not(.active, [aria-current]) > i {
2676
+ background-color: transparent;
2677
+ }
2678
+ .navigation-bar.horizontal > :is(a, button).active, .navigation-bar.horizontal > :is(a, button)[aria-current] {
2679
+ background-color: var(--md-comp-nav-bar-active-indicator-color);
2680
+ color: var(--md-comp-nav-bar-active-color);
2219
2681
  }
2220
- footer:has(> nav:only-child).fixed {
2682
+ .navigation-bar.horizontal > :is(a, button).active > i, .navigation-bar.horizontal > :is(a, button)[aria-current] > i {
2683
+ background-color: transparent;
2684
+ color: inherit;
2685
+ }
2686
+ .navigation-bar.fixed {
2221
2687
  position: sticky;
2222
2688
  bottom: 0;
2223
2689
  z-index: 997;
2224
2690
  }
2225
- nav.toolbar {
2226
- --md-comp-toolbar-container-color: var(--md-sys-color-surface-variant);
2227
- --md-comp-toolbar-container-shape: 32px;
2228
- --md-comp-toolbar-container-height: 64px;
2229
- --md-comp-toolbar-leading-space: 12px;
2230
- --md-comp-toolbar-action-size: 48px;
2231
- --md-comp-toolbar-icon-size: 24px;
2691
+ :root {
2692
+ --md-comp-nav-rail-collapsed-width: 96px;
2693
+ --md-comp-nav-rail-expanded-width: 280px;
2694
+ }
2695
+ .navigation-rail {
2696
+ --md-comp-nav-rail-icon-size: 24px;
2697
+ --md-comp-nav-rail-indicator-width: 56px;
2698
+ --md-comp-nav-rail-indicator-height: 32px;
2699
+ --md-comp-nav-rail-indicator-shape: 16px;
2700
+ --md-comp-nav-rail-fab-size: 56px;
2701
+ --md-comp-nav-rail-active-indicator-color: var(--md-sys-color-secondary-container);
2702
+ --md-comp-nav-rail-active-color: var(--md-sys-color-on-secondary-container);
2703
+ --md-comp-nav-rail-duration: 250ms;
2232
2704
  box-sizing: border-box;
2233
- display: inline-flex;
2705
+ display: flex;
2706
+ flex-direction: column;
2234
2707
  align-items: center;
2235
- justify-content: center;
2236
2708
  gap: 4px;
2237
- min-height: var(--md-comp-toolbar-container-height);
2238
- min-width: var(--md-comp-toolbar-container-height);
2709
+ width: var(--md-comp-nav-rail-collapsed-width);
2710
+ min-width: var(--md-comp-nav-rail-collapsed-width);
2711
+ min-height: 100dvh;
2239
2712
  margin: 0;
2240
- padding: 8px var(--md-comp-toolbar-leading-space);
2241
- border: none;
2242
- border-radius: var(--md-comp-toolbar-container-shape);
2243
- background-color: var(--md-comp-toolbar-container-color);
2713
+ padding: 20px 8px 16px;
2714
+ overflow-x: hidden;
2715
+ overflow-y: auto;
2716
+ overscroll-behavior: contain;
2717
+ background-color: var(--md-sys-color-surface-container);
2244
2718
  color: var(--md-sys-color-on-surface);
2245
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
2246
- }
2247
- nav.toolbar + nav.toolbar {
2248
- margin-block-start: 16px;
2719
+ transition: width var(--md-comp-nav-rail-duration) ease, min-width var(--md-comp-nav-rail-duration) ease, padding var(--md-comp-nav-rail-duration) ease;
2249
2720
  }
2250
- nav.toolbar > :is(a, button):not(.extra) {
2251
- box-sizing: border-box;
2252
- display: inline-flex;
2721
+ .navigation-rail > button:not(.button):first-child {
2722
+ display: flex;
2253
2723
  flex: 0 0 auto;
2254
2724
  align-items: center;
2255
2725
  justify-content: center;
2256
- gap: 8px;
2257
- min-width: var(--md-comp-toolbar-action-size);
2258
- min-height: var(--md-comp-toolbar-action-size);
2259
- height: var(--md-comp-toolbar-action-size);
2260
- margin: 0;
2261
- padding: 0 12px;
2262
- border: none;
2263
- border-radius: calc(var(--md-comp-toolbar-action-size) / 2);
2264
- background-color: transparent;
2265
- color: inherit;
2266
- box-shadow: none;
2267
- text-decoration: none;
2726
+ width: var(--md-comp-nav-rail-indicator-width);
2727
+ height: 48px;
2728
+ margin: 0 0 8px;
2729
+ padding: 0;
2730
+ border: 0;
2731
+ border-radius: var(--md-comp-nav-rail-indicator-shape);
2732
+ background: transparent;
2733
+ color: var(--md-sys-color-on-surface-variant);
2268
2734
  cursor: pointer;
2269
2735
  appearance: none;
2270
- font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2271
- font-size: var(--md-sys-typescale-label-large-font-size);
2272
- font-weight: var(--md-sys-typescale-label-large-font-weight);
2273
- line-height: var(--md-sys-typescale-label-large-line-height);
2274
- letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
2275
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2276
2736
  }
2277
- nav.toolbar > :is(a, button):not(.extra):focus-visible {
2737
+ .navigation-rail > button:not(.button):first-child:focus-visible {
2278
2738
  outline: 3px solid var(--md-sys-color-secondary);
2279
2739
  outline-offset: 2px;
2280
2740
  }
2281
- nav.toolbar > :is(a, button):not(.extra) > i {
2282
- flex: 0 0 auto;
2283
- font-size: var(--md-comp-toolbar-icon-size);
2284
- width: var(--md-comp-toolbar-icon-size);
2285
- height: var(--md-comp-toolbar-icon-size);
2286
- line-height: var(--md-comp-toolbar-icon-size);
2287
- }
2288
- nav.toolbar > :is(a, button):not(.extra):hover:not(.active) {
2289
- background-color: color-mix(in oklab, currentColor 8%, transparent);
2290
- }
2291
- nav.toolbar > :is(a, button):not(.extra):active:not(.active) {
2292
- background-color: color-mix(in oklab, currentColor 10%, transparent);
2293
- }
2294
- nav.toolbar > :is(a, button):not(.extra).active {
2295
- background-color: var(--md-sys-color-secondary-container);
2296
- color: var(--md-sys-color-on-secondary-container);
2741
+ .navigation-rail > button:not(.button):first-child > i {
2742
+ font-size: var(--md-comp-nav-rail-icon-size);
2743
+ width: var(--md-comp-nav-rail-icon-size);
2744
+ height: var(--md-comp-nav-rail-icon-size);
2297
2745
  }
2298
- nav.toolbar > :is(a, button):not(.extra):disabled {
2299
- color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
2300
- background-color: transparent;
2301
- box-shadow: none;
2302
- cursor: default;
2746
+ .navigation-rail > button:not(.button):first-child:hover {
2747
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
2303
2748
  }
2304
- nav.toolbar > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
2305
- width: var(--md-comp-toolbar-action-size);
2749
+ .navigation-rail > :is(a, button).button {
2750
+ display: inline-flex;
2751
+ flex: 0 0 auto;
2752
+ align-items: center;
2753
+ justify-content: center;
2754
+ gap: 8px;
2755
+ box-sizing: border-box;
2756
+ width: var(--md-comp-nav-rail-fab-size);
2757
+ height: var(--md-comp-nav-rail-fab-size);
2758
+ margin: 4px 0 16px;
2306
2759
  padding: 0;
2307
- border-radius: 50%;
2308
- }
2309
- nav.toolbar > .max {
2310
- flex: 1 1 auto;
2311
- align-self: stretch;
2312
- min-width: 0;
2313
- min-height: 0;
2314
- }
2315
- nav.toolbar.filled {
2316
- --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
2760
+ overflow: hidden;
2761
+ border-radius: 16px;
2317
2762
  color: var(--md-sys-color-on-primary-container);
2763
+ background-color: var(--md-sys-color-primary-container);
2764
+ text-decoration: none;
2318
2765
  }
2319
- nav.toolbar.filled > :is(a, button).active {
2320
- background-color: var(--md-sys-color-surface-variant);
2321
- color: var(--md-sys-color-on-surface);
2766
+ .navigation-rail > :is(a, button).button > :not(i) {
2767
+ position: absolute;
2768
+ width: 1px;
2769
+ height: 1px;
2770
+ overflow: hidden;
2771
+ clip-path: inset(50%);
2772
+ }
2773
+ .navigation-rail > a:not(.button),
2774
+ .navigation-rail > button:not(.button):not(:first-child) {
2775
+ position: relative;
2776
+ display: flex;
2777
+ flex: 0 0 auto;
2778
+ flex-direction: column;
2779
+ align-items: center;
2780
+ justify-content: center;
2781
+ gap: 4px;
2782
+ box-sizing: border-box;
2783
+ width: 100%;
2784
+ margin: 0;
2785
+ padding: 6px 0;
2786
+ border: 0;
2787
+ background: transparent;
2788
+ color: var(--md-sys-color-on-surface-variant);
2789
+ cursor: pointer;
2790
+ appearance: none;
2791
+ text-decoration: none;
2792
+ text-align: center;
2793
+ font-family: var(--md-sys-typescale-label-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2794
+ font-size: var(--md-sys-typescale-label-medium-font-size);
2795
+ font-weight: var(--md-sys-typescale-label-medium-font-weight);
2796
+ line-height: var(--md-sys-typescale-label-medium-line-height);
2797
+ letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
2798
+ }
2799
+ .navigation-rail > a:not(.button):focus-visible,
2800
+ .navigation-rail > button:not(.button):not(:first-child):focus-visible {
2801
+ outline: 3px solid var(--md-sys-color-secondary);
2802
+ outline-offset: 2px;
2803
+ }
2804
+ .navigation-rail > a:not(.button) > i,
2805
+ .navigation-rail > button:not(.button):not(:first-child) > i {
2806
+ display: flex;
2807
+ flex-shrink: 0;
2808
+ align-items: center;
2809
+ justify-content: center;
2810
+ box-sizing: border-box;
2811
+ width: var(--md-comp-nav-rail-indicator-width);
2812
+ height: var(--md-comp-nav-rail-indicator-height);
2813
+ border-radius: var(--md-comp-nav-rail-indicator-shape);
2814
+ font-size: var(--md-comp-nav-rail-icon-size);
2815
+ color: inherit;
2816
+ transition: background-color var(--md-comp-nav-rail-duration) ease;
2817
+ }
2818
+ .navigation-rail > a:not(.button):hover:not(.active, [aria-current]) > i,
2819
+ .navigation-rail > button:not(.button):not(:first-child):hover:not(.active, [aria-current]) > i {
2820
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
2821
+ }
2822
+ .navigation-rail > a:not(.button).active, .navigation-rail > a:not(.button)[aria-current],
2823
+ .navigation-rail > button:not(.button):not(:first-child).active,
2824
+ .navigation-rail > button:not(.button):not(:first-child)[aria-current] {
2825
+ color: var(--md-sys-color-on-surface);
2826
+ }
2827
+ .navigation-rail > a:not(.button).active > i, .navigation-rail > a:not(.button)[aria-current] > i,
2828
+ .navigation-rail > button:not(.button):not(:first-child).active > i,
2829
+ .navigation-rail > button:not(.button):not(:first-child)[aria-current] > i {
2830
+ background-color: var(--md-comp-nav-rail-active-indicator-color);
2831
+ color: var(--md-comp-nav-rail-active-color);
2832
+ --md-icon-fill: 1;
2833
+ }
2834
+ .navigation-rail > a:not(.button) > .badge,
2835
+ .navigation-rail > button:not(.button):not(:first-child) > .badge {
2836
+ position: absolute;
2837
+ z-index: 1;
2838
+ top: calc(6px + (var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
2839
+ left: calc(50% + 12px);
2840
+ transform: translate(-50%, -50%);
2841
+ }
2842
+ .navigation-rail > :is(h1, h2, h3, h4, h5, h6) {
2843
+ display: none;
2844
+ box-sizing: border-box;
2845
+ width: 100%;
2846
+ margin: 0;
2847
+ padding: 12px 16px 8px;
2848
+ color: var(--md-sys-color-on-surface-variant);
2849
+ font-family: var(--md-sys-typescale-title-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2850
+ font-size: var(--md-sys-typescale-title-small-font-size);
2851
+ font-weight: var(--md-sys-typescale-title-small-font-weight);
2852
+ line-height: var(--md-sys-typescale-title-small-line-height);
2853
+ letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
2854
+ }
2855
+ .navigation-rail.expanded {
2856
+ --md-comp-nav-rail-indicator-height: 56px;
2857
+ --md-comp-nav-rail-indicator-shape: 28px;
2858
+ align-items: stretch;
2859
+ width: clamp(220px, var(--md-comp-nav-rail-expanded-width), 360px);
2860
+ min-width: 220px;
2861
+ padding-inline: 16px;
2862
+ }
2863
+ .navigation-rail.expanded > button:not(.button):first-child {
2864
+ justify-content: flex-start;
2865
+ width: auto;
2866
+ padding-inline: 16px;
2867
+ }
2868
+ .navigation-rail.expanded > :is(a, button).button {
2869
+ width: 100%;
2870
+ justify-content: flex-start;
2871
+ padding-inline: 16px 20px;
2872
+ color: var(--md-sys-color-on-primary-container);
2873
+ background-color: var(--md-sys-color-primary-container);
2874
+ }
2875
+ .navigation-rail.expanded > :is(a, button).button > :not(i) {
2876
+ position: static;
2877
+ width: auto;
2878
+ height: auto;
2879
+ overflow: visible;
2880
+ clip-path: none;
2881
+ font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
2882
+ font-size: var(--md-sys-typescale-label-large-font-size);
2883
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
2884
+ line-height: var(--md-sys-typescale-label-large-line-height);
2885
+ letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
2886
+ }
2887
+ .navigation-rail.expanded > a:not(.button),
2888
+ .navigation-rail.expanded > button:not(.button):not(:first-child) {
2889
+ flex-direction: row;
2890
+ justify-content: flex-start;
2891
+ gap: 12px;
2892
+ min-height: var(--md-comp-nav-rail-indicator-height);
2893
+ padding: 0 16px;
2894
+ border-radius: var(--md-comp-nav-rail-indicator-shape);
2895
+ text-align: start;
2896
+ }
2897
+ .navigation-rail.expanded > a:not(.button) > i,
2898
+ .navigation-rail.expanded > button:not(.button):not(:first-child) > i {
2899
+ width: var(--md-comp-nav-rail-icon-size);
2900
+ height: var(--md-comp-nav-rail-icon-size);
2901
+ border-radius: 0;
2902
+ }
2903
+ .navigation-rail.expanded > a:not(.button):hover:not(.active, [aria-current]),
2904
+ .navigation-rail.expanded > button:not(.button):not(:first-child):hover:not(.active, [aria-current]) {
2905
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
2906
+ }
2907
+ .navigation-rail.expanded > a:not(.button):hover:not(.active, [aria-current]) > i,
2908
+ .navigation-rail.expanded > button:not(.button):not(:first-child):hover:not(.active, [aria-current]) > i {
2909
+ background-color: transparent;
2910
+ }
2911
+ .navigation-rail.expanded > a:not(.button).active, .navigation-rail.expanded > a:not(.button)[aria-current],
2912
+ .navigation-rail.expanded > button:not(.button):not(:first-child).active,
2913
+ .navigation-rail.expanded > button:not(.button):not(:first-child)[aria-current] {
2914
+ background-color: var(--md-comp-nav-rail-active-indicator-color);
2915
+ color: var(--md-comp-nav-rail-active-color);
2916
+ }
2917
+ .navigation-rail.expanded > a:not(.button).active > i, .navigation-rail.expanded > a:not(.button)[aria-current] > i,
2918
+ .navigation-rail.expanded > button:not(.button):not(:first-child).active > i,
2919
+ .navigation-rail.expanded > button:not(.button):not(:first-child)[aria-current] > i {
2920
+ background-color: transparent;
2921
+ color: inherit;
2922
+ }
2923
+ .navigation-rail.expanded > a:not(.button) > .badge,
2924
+ .navigation-rail.expanded > button:not(.button):not(:first-child) > .badge {
2925
+ top: calc((var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
2926
+ left: auto;
2927
+ inset-inline-start: 40px;
2928
+ transform: translate(-50%, -50%);
2929
+ }
2930
+ .navigation-rail.expanded > :is(h1, h2, h3, h4, h5, h6) {
2931
+ display: block;
2932
+ }
2933
+ .navigation-rail.expanded.modal {
2934
+ position: fixed;
2935
+ inset: 0 auto 0 0;
2936
+ z-index: 998;
2937
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
2938
+ }
2939
+ .navigation-rail.expanded.modal::before {
2940
+ content: "";
2941
+ position: fixed;
2942
+ inset: 0;
2943
+ background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
2944
+ z-index: -1;
2945
+ }
2946
+ @media (width < 601px) {
2947
+ .navigation-rail.expanded:not(.modal) {
2948
+ position: fixed;
2949
+ inset: 0 auto 0 0;
2950
+ z-index: 998;
2951
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
2952
+ }
2953
+ .navigation-rail.expanded:not(.modal)::before {
2954
+ content: "";
2955
+ position: fixed;
2956
+ inset: 0;
2957
+ background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
2958
+ z-index: -1;
2959
+ }
2960
+ }
2961
+ @media (prefers-reduced-motion: reduce) {
2962
+ .navigation-rail {
2963
+ transition: none;
2964
+ }
2965
+ }
2966
+ nav.toolbar {
2967
+ --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
2968
+ --md-comp-toolbar-container-shape: 32px;
2969
+ --md-comp-toolbar-container-height: 64px;
2970
+ --md-comp-toolbar-leading-space: 12px;
2971
+ --md-comp-toolbar-action-size: 48px;
2972
+ --md-comp-toolbar-icon-size: 24px;
2973
+ --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
2974
+ --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
2975
+ box-sizing: border-box;
2976
+ display: inline-flex;
2977
+ align-items: center;
2978
+ justify-content: center;
2979
+ gap: 4px;
2980
+ min-height: var(--md-comp-toolbar-container-height);
2981
+ min-width: var(--md-comp-toolbar-container-height);
2982
+ margin: 0;
2983
+ padding: 8px var(--md-comp-toolbar-leading-space);
2984
+ border: none;
2985
+ border-radius: var(--md-comp-toolbar-container-shape);
2986
+ background-color: var(--md-comp-toolbar-container-color);
2987
+ color: var(--md-sys-color-on-surface);
2988
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
2989
+ }
2990
+ nav.toolbar + nav.toolbar {
2991
+ margin-block-start: 16px;
2992
+ }
2993
+ nav.toolbar > :is(a, button):not(.extra) {
2994
+ box-sizing: border-box;
2995
+ display: inline-flex;
2996
+ flex: 0 0 auto;
2997
+ align-items: center;
2998
+ justify-content: center;
2999
+ gap: 8px;
3000
+ min-width: var(--md-comp-toolbar-action-size);
3001
+ min-height: var(--md-comp-toolbar-action-size);
3002
+ height: var(--md-comp-toolbar-action-size);
3003
+ margin: 0;
3004
+ padding: 0 12px;
3005
+ border: none;
3006
+ border-radius: calc(var(--md-comp-toolbar-action-size) / 2);
3007
+ background-color: transparent;
3008
+ color: inherit;
3009
+ box-shadow: none;
3010
+ text-decoration: none;
3011
+ cursor: pointer;
3012
+ appearance: none;
3013
+ font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
3014
+ font-size: var(--md-sys-typescale-label-large-font-size);
3015
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
3016
+ line-height: var(--md-sys-typescale-label-large-line-height);
3017
+ letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
3018
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3019
+ }
3020
+ nav.toolbar > :is(a, button):not(.extra):focus-visible {
3021
+ outline: 3px solid var(--md-sys-color-secondary);
3022
+ outline-offset: 2px;
3023
+ }
3024
+ nav.toolbar > :is(a, button):not(.extra) > i {
3025
+ flex: 0 0 auto;
3026
+ font-size: var(--md-comp-toolbar-icon-size);
3027
+ width: var(--md-comp-toolbar-icon-size);
3028
+ height: var(--md-comp-toolbar-icon-size);
3029
+ line-height: var(--md-comp-toolbar-icon-size);
3030
+ }
3031
+ nav.toolbar > :is(a, button):not(.extra):hover:not(.active, .filled) {
3032
+ background-color: color-mix(in oklab, currentColor 8%, transparent);
3033
+ }
3034
+ nav.toolbar > :is(a, button):not(.extra):active:not(.active, .filled) {
3035
+ background-color: color-mix(in oklab, currentColor 10%, transparent);
3036
+ }
3037
+ nav.toolbar > :is(a, button):not(.extra).active {
3038
+ background-color: var(--md-comp-toolbar-selected-container-color);
3039
+ color: var(--md-comp-toolbar-selected-color);
3040
+ }
3041
+ nav.toolbar > :is(a, button):not(.extra):disabled {
3042
+ color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
3043
+ background-color: transparent;
3044
+ box-shadow: none;
3045
+ cursor: default;
3046
+ }
3047
+ nav.toolbar > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
3048
+ width: var(--md-comp-toolbar-action-size);
3049
+ padding: 0;
3050
+ border-radius: 50%;
3051
+ }
3052
+ nav.toolbar > :is(a, button).filled:not(.extra) {
3053
+ background-color: var(--md-sys-color-primary);
3054
+ color: var(--md-sys-color-on-primary);
3055
+ border-radius: 16px;
3056
+ box-shadow: none;
3057
+ }
3058
+ nav.toolbar > :is(a, button).filled:not(.extra):hover {
3059
+ background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
3060
+ }
3061
+ nav.toolbar > :is(a, button).filled:not(.extra):active {
3062
+ background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary));
3063
+ }
3064
+ nav.toolbar > :is(a, button).filled:not(.extra):has(> span) {
3065
+ height: 40px;
3066
+ min-height: 40px;
3067
+ padding: 0 24px;
3068
+ border-radius: 20px;
3069
+ width: auto;
3070
+ }
3071
+ nav.toolbar > .field {
3072
+ flex: 1 1 auto;
3073
+ align-self: center;
3074
+ min-width: 0;
3075
+ margin: 0;
3076
+ }
3077
+ nav.toolbar > .max {
3078
+ flex: 1 1 auto;
3079
+ align-self: stretch;
3080
+ min-width: 0;
3081
+ min-height: 0;
3082
+ }
3083
+ nav.toolbar.vibrant,
3084
+ nav.toolbar.filled {
3085
+ --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
3086
+ --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface);
3087
+ --md-comp-toolbar-selected-color: var(--md-sys-color-on-surface);
3088
+ color: var(--md-sys-color-on-primary-container);
2322
3089
  }
2323
3090
  nav.toolbar.vertical {
2324
3091
  flex-direction: column;
@@ -2339,6 +3106,17 @@
2339
3106
  justify-content: space-around;
2340
3107
  box-shadow: none !important;
2341
3108
  }
3109
+ .toolbar-group {
3110
+ display: inline-flex;
3111
+ align-items: center;
3112
+ gap: 8px;
3113
+ }
3114
+ .toolbar-group.vertical {
3115
+ flex-direction: column;
3116
+ }
3117
+ .toolbar-group > nav.toolbar {
3118
+ margin: 0;
3119
+ }
2342
3120
  nav.toolbar.fixed {
2343
3121
  position: fixed;
2344
3122
  z-index: 996;
@@ -2362,10 +3140,12 @@
2362
3140
  nav.toolbar:is(.max, .docked).fixed.bottom {
2363
3141
  inset: auto 0 0 0;
2364
3142
  transform: none;
3143
+ padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
2365
3144
  }
2366
3145
  nav.toolbar:is(.max, .docked).fixed.top {
2367
3146
  inset: 0 0 auto 0;
2368
3147
  transform: none;
3148
+ padding-bottom: 8px;
2369
3149
  }
2370
3150
  .scale-transition {
2371
3151
  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
@@ -2378,7 +3158,7 @@
2378
3158
  transform: scale(1);
2379
3159
  }
2380
3160
  :where(article) {
2381
- --md-comp-elevated-card-container-color: var(--md-sys-color-surface);
3161
+ --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
2382
3162
  --md-comp-elevated-card-container-shape: 12px;
2383
3163
  position: relative;
2384
3164
  box-sizing: border-box;
@@ -2396,7 +3176,7 @@
2396
3176
  }
2397
3177
  :where(article).filled {
2398
3178
  box-shadow: none !important;
2399
- background-color: var(--md-sys-color-surface-variant);
3179
+ background-color: var(--md-sys-color-surface-container-highest);
2400
3180
  }
2401
3181
  :where(article).outlined,
2402
3182
  :where(article).border {
@@ -2578,7 +3358,7 @@
2578
3358
  bottom: auto;
2579
3359
  height: calc(100% - 52px);
2580
3360
  }
2581
- #toast-container {
3361
+ #snackbar-container {
2582
3362
  --md-comp-snackbar-container-margin-leading: 8px;
2583
3363
  --md-comp-snackbar-container-margin-trailing: 8px;
2584
3364
  --md-comp-snackbar-container-margin-bottom: 8px;
@@ -2589,33 +3369,32 @@
2589
3369
  gap: 8px;
2590
3370
  position: fixed;
2591
3371
  z-index: 10000;
2592
- inset: auto var(--md-comp-snackbar-container-margin-trailing) var(--md-comp-snackbar-container-margin-bottom) var(--md-comp-snackbar-container-margin-leading);
3372
+ inset: auto var(--md-comp-snackbar-container-margin-trailing) max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px)) var(--md-comp-snackbar-container-margin-leading);
2593
3373
  width: auto;
2594
3374
  max-width: calc(100% - var(--md-comp-snackbar-container-margin-leading) - var(--md-comp-snackbar-container-margin-trailing));
2595
3375
  pointer-events: none;
2596
3376
  }
2597
- #toast-container > * {
3377
+ #snackbar-container > * {
2598
3378
  pointer-events: auto;
2599
3379
  }
2600
3380
  @media (width >= 601px) {
2601
- #toast-container {
3381
+ #snackbar-container {
2602
3382
  --md-comp-snackbar-container-margin-leading: 24px;
2603
3383
  --md-comp-snackbar-container-margin-trailing: 24px;
2604
3384
  --md-comp-snackbar-container-margin-bottom: 24px;
2605
3385
  --md-comp-snackbar-container-margin-top: 24px;
2606
- align-items: flex-start;
3386
+ align-items: center;
3387
+ left: 50%;
3388
+ right: auto;
2607
3389
  width: max-content;
2608
3390
  min-width: min(344px, 100% - 48px);
2609
3391
  max-width: min(672px, 100% - 48px);
3392
+ transform: translateX(-50%);
2610
3393
  }
2611
3394
  }
2612
- #toast-container:has(> .top), #toast-container.top {
2613
- inset: var(--md-comp-snackbar-container-margin-top) var(--md-comp-snackbar-container-margin-trailing) auto var(--md-comp-snackbar-container-margin-leading);
2614
- }
2615
- #toast-container:has(> .center), #toast-container.center {
2616
- left: 50%;
2617
- right: auto;
2618
- transform: translateX(-50%);
3395
+ #snackbar-container:has(> .top), #snackbar-container.top {
3396
+ inset-block-start: var(--md-comp-snackbar-container-margin-top);
3397
+ inset-block-end: auto;
2619
3398
  }
2620
3399
  .snackbar {
2621
3400
  --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
@@ -2761,39 +3540,42 @@
2761
3540
  .snackbar + .snackbar {
2762
3541
  margin-top: 8px;
2763
3542
  }
2764
- #toast-container .snackbar {
3543
+ #snackbar-container .snackbar {
2765
3544
  position: relative;
2766
- top: 35px;
2767
3545
  margin-top: 0;
2768
3546
  }
2769
3547
  .snackbar.active {
2770
3548
  position: fixed;
2771
3549
  z-index: 10000;
2772
- inset: auto auto 16px 16px;
3550
+ left: 50%;
3551
+ right: auto;
3552
+ bottom: 24px;
2773
3553
  top: auto;
3554
+ transform: translateX(-50%);
2774
3555
  width: max-content;
2775
- max-width: min(672px, 100% - 32px);
3556
+ max-width: min(672px, 100% - 48px);
2776
3557
  }
2777
3558
  @media (width < 601px) {
2778
3559
  .snackbar.active {
2779
- inset: auto 8px 8px 8px;
3560
+ left: 8px;
3561
+ right: 8px;
3562
+ bottom: max(8px, env(safe-area-inset-bottom, 0px));
3563
+ transform: none;
2780
3564
  width: auto;
2781
3565
  max-width: none;
2782
3566
  }
2783
3567
  }
2784
3568
  .snackbar.active.top {
2785
- inset: 16px auto auto 16px;
3569
+ top: 24px;
3570
+ bottom: auto;
2786
3571
  }
2787
3572
  @media (width < 601px) {
2788
3573
  .snackbar.active.top {
2789
- inset: 8px 8px auto 8px;
3574
+ top: 8px;
3575
+ left: 8px;
3576
+ right: 8px;
2790
3577
  }
2791
3578
  }
2792
- .snackbar.active.center {
2793
- left: 50%;
2794
- right: auto;
2795
- transform: translateX(-50%);
2796
- }
2797
3579
  .tabs {
2798
3580
  --md-comp-primary-tab-container-color: var(--md-sys-color-surface);
2799
3581
  --md-comp-primary-tab-container-height: 48px;
@@ -2949,24 +3731,6 @@
2949
3731
  padding-inline: 12px;
2950
3732
  }
2951
3733
  }
2952
- .tabs.transparent {
2953
- --md-comp-primary-tab-container-color: transparent;
2954
- --md-comp-primary-tab-label-text-color: color-mix(
2955
- in oklab,
2956
- var(--md-sys-color-on-primary) 74%,
2957
- transparent
2958
- );
2959
- --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-on-primary);
2960
- --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-on-primary);
2961
- border-block-end-color: color-mix(in oklab, var(--md-sys-color-on-primary) 20%, transparent);
2962
- }
2963
- .tabs.transparent > a:hover, .tabs.transparent > a:focus, .tabs.transparent > .tab > a:hover, .tabs.transparent > .tab > a:focus {
2964
- color: var(--md-sys-color-on-primary);
2965
- background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, transparent);
2966
- }
2967
- .tabs.transparent > a.active:hover, .tabs.transparent > a.active:focus, .tabs.transparent > .tab > a.active:hover, .tabs.transparent > .tab > a.active:focus {
2968
- background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, transparent);
2969
- }
2970
3734
  .tooltip {
2971
3735
  --md-comp-plain-tooltip-container-color: var(--md-sys-color-inverse-surface);
2972
3736
  --md-comp-plain-tooltip-supporting-text-color: var(--md-sys-color-inverse-on-surface);
@@ -3053,7 +3817,7 @@
3053
3817
  }
3054
3818
  .tooltip.rich,
3055
3819
  .tooltip.max {
3056
- --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
3820
+ --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface-container);
3057
3821
  --md-comp-rich-tooltip-container-shape: 12px;
3058
3822
  display: flex;
3059
3823
  flex-direction: column;
@@ -3106,36 +3870,48 @@
3106
3870
  border: none;
3107
3871
  }
3108
3872
  menu[id] {
3109
- --md-comp-menu-container-color: var(--md-sys-color-surface);
3110
- --md-comp-menu-container-shape: 1rem;
3873
+ --md-comp-menu-container-color: var(--md-sys-color-surface-container);
3874
+ --md-comp-menu-container-shape: 16px;
3111
3875
  --md-comp-menu-item-container-height: 48px;
3876
+ --md-comp-menu-item-container-shape: 4px;
3877
+ --md-comp-menu-item-selected-container-shape: 12px;
3878
+ --md-comp-menu-item-label-text-color: var(--md-sys-color-on-surface);
3879
+ --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
3880
+ --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
3881
+ --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary-container);
3882
+ --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary-container);
3883
+ --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary-container);
3884
+ --md-comp-menu-item-icon-size: 20px;
3885
+ --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
3112
3886
  box-sizing: border-box;
3113
- display: none;
3114
- position: absolute;
3115
- left: 0;
3116
- top: 0;
3117
- z-index: 9999;
3118
3887
  min-width: 112px;
3119
3888
  margin: 0;
3120
- padding: 8px 0;
3889
+ padding: 4px;
3121
3890
  list-style: none;
3122
- overflow-y: auto;
3123
- opacity: 0;
3124
- user-select: none;
3125
- transform-origin: 0 0;
3126
3891
  background-color: var(--md-comp-menu-container-color);
3127
3892
  border-radius: var(--md-comp-menu-container-shape);
3128
- color: var(--md-sys-color-on-surface);
3893
+ color: var(--md-comp-menu-item-label-text-color);
3129
3894
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
3895
+ transition: border-radius 200ms ease;
3896
+ }
3897
+ menu[id].vibrant {
3898
+ --md-comp-menu-container-color: var(--md-sys-color-tertiary-container);
3899
+ --md-comp-menu-item-label-text-color: var(--md-sys-color-on-tertiary-container);
3900
+ --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-tertiary-container);
3901
+ --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-tertiary-container);
3902
+ --md-comp-menu-supporting-text-color: var(--md-sys-color-on-tertiary-container);
3903
+ --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary);
3904
+ --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary);
3905
+ --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary);
3130
3906
  }
3131
3907
  menu[id] > li {
3132
3908
  box-sizing: border-box;
3133
3909
  margin: 0;
3134
3910
  padding: 0;
3135
3911
  width: 100%;
3136
- min-height: var(--md-comp-menu-item-container-height);
3137
3912
  cursor: pointer;
3138
3913
  text-align: left;
3914
+ border-radius: var(--md-comp-menu-item-container-shape);
3139
3915
  }
3140
3916
  menu[id] > li > a,
3141
3917
  menu[id] > li > button,
@@ -3147,10 +3923,10 @@
3147
3923
  width: 100%;
3148
3924
  min-height: var(--md-comp-menu-item-container-height);
3149
3925
  margin: 0;
3150
- padding: 0 12px;
3926
+ padding: 0 8px;
3151
3927
  border: 0;
3152
3928
  background: none;
3153
- color: var(--md-sys-color-on-surface);
3929
+ color: var(--md-comp-menu-item-label-text-color);
3154
3930
  text-decoration: none;
3155
3931
  cursor: pointer;
3156
3932
  }
@@ -3174,21 +3950,63 @@
3174
3950
  menu[id] > li > a > i,
3175
3951
  menu[id] > li > button > i,
3176
3952
  menu[id] > li > i {
3177
- flex: 0 0 24px;
3178
- font-size: 24px;
3179
- width: 24px;
3180
- height: 24px;
3181
- line-height: 24px;
3182
- color: var(--md-sys-color-on-surface-variant);
3953
+ flex: 0 0 var(--md-comp-menu-item-icon-size);
3954
+ font-size: var(--md-comp-menu-item-icon-size);
3955
+ width: var(--md-comp-menu-item-icon-size);
3956
+ height: var(--md-comp-menu-item-icon-size);
3957
+ line-height: var(--md-comp-menu-item-icon-size);
3958
+ color: var(--md-comp-menu-item-leading-icon-color);
3959
+ }
3960
+ menu[id] > li > :is(a, button) > i:last-child:not(:only-child) {
3961
+ margin-inline-start: auto;
3962
+ color: var(--md-comp-menu-item-trailing-icon-color);
3183
3963
  }
3184
- menu[id] > li:not(.disabled, .divider, .optgroup) {
3185
- width: calc(100% - 16px);
3186
- margin-inline: 8px;
3187
- border-radius: 2rem;
3964
+ menu[id] > li > :is(a, button) > :is(kbd, .shortcut) {
3965
+ margin-inline-start: auto;
3966
+ padding: 0;
3967
+ border: 0;
3968
+ background: none;
3969
+ color: var(--md-comp-menu-supporting-text-color);
3970
+ font-family: inherit;
3971
+ font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
3972
+ font-size: var(--md-sys-typescale-label-large-font-size);
3973
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
3974
+ line-height: var(--md-sys-typescale-label-large-line-height);
3975
+ letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
3188
3976
  }
3189
- menu[id] > li:not(.disabled, .divider):hover,
3190
- menu[id] > li.active {
3191
- background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
3977
+ menu[id] > li:not(.disabled, .divider, .optgroup, .gap, .label) {
3978
+ min-height: var(--md-comp-menu-item-container-height);
3979
+ }
3980
+ menu[id] > li:not(.disabled, .divider, .optgroup, .gap, .label):hover,
3981
+ menu[id] > li.active:not(.selected, [aria-selected=true]) {
3982
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
3983
+ }
3984
+ menu[id] > li:not(.disabled, .divider, .optgroup, .gap, .label):active {
3985
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
3986
+ }
3987
+ menu[id] > li.selected,
3988
+ menu[id] > li[aria-selected=true] {
3989
+ border-radius: var(--md-comp-menu-item-selected-container-shape);
3990
+ background-color: var(--md-comp-menu-item-selected-container-color);
3991
+ color: var(--md-comp-menu-item-selected-label-text-color);
3992
+ }
3993
+ menu[id] > li.selected > :is(a, button, span),
3994
+ menu[id] > li[aria-selected=true] > :is(a, button, span) {
3995
+ color: var(--md-comp-menu-item-selected-label-text-color);
3996
+ }
3997
+ menu[id] > li.selected > :is(a, button, span) > i,
3998
+ menu[id] > li.selected > i,
3999
+ menu[id] > li[aria-selected=true] > :is(a, button, span) > i,
4000
+ menu[id] > li[aria-selected=true] > i {
4001
+ color: var(--md-comp-menu-item-selected-leading-icon-color);
4002
+ }
4003
+ menu[id] > li.selected:hover,
4004
+ menu[id] > li[aria-selected=true]:hover {
4005
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
4006
+ }
4007
+ menu[id] > li:focus-visible {
4008
+ outline: 3px solid var(--md-sys-color-secondary);
4009
+ outline-offset: -3px;
3192
4010
  }
3193
4011
  menu[id] > li.disabled {
3194
4012
  pointer-events: none;
@@ -3197,75 +4015,248 @@
3197
4015
  menu[id] > hr,
3198
4016
  menu[id] > li.divider {
3199
4017
  display: block;
3200
- width: 100%;
4018
+ width: calc(100% - 8px);
3201
4019
  height: 1px;
3202
4020
  min-height: 0;
3203
- margin: 8px 0;
4021
+ margin: 4px auto;
3204
4022
  padding: 0;
3205
4023
  border: 0;
3206
4024
  background-color: var(--md-sys-color-outline-variant);
3207
4025
  cursor: default;
4026
+ pointer-events: none;
4027
+ border-radius: 0;
3208
4028
  }
3209
- menu[id]:has(> li > menu) {
3210
- overflow: visible;
4029
+ menu[id] > li.gap {
4030
+ height: 6px;
4031
+ min-height: 6px;
4032
+ margin: 0 -4px;
4033
+ padding: 0;
4034
+ pointer-events: none;
4035
+ cursor: default;
4036
+ background: transparent;
4037
+ border-radius: 0;
4038
+ box-shadow: none;
4039
+ }
4040
+ menu[id] > li.label {
4041
+ display: flex;
4042
+ align-items: center;
4043
+ min-height: 32px;
4044
+ padding: 0 8px;
4045
+ pointer-events: none;
4046
+ cursor: default;
4047
+ color: var(--md-comp-menu-supporting-text-color);
4048
+ font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
4049
+ font-size: var(--md-sys-typescale-label-large-font-size);
4050
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
4051
+ line-height: var(--md-sys-typescale-label-large-line-height);
4052
+ letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
4053
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3211
4054
  }
3212
4055
  menu[id] li:has(> menu) {
3213
4056
  position: relative;
3214
4057
  }
3215
4058
  menu[id] li:has(> menu) > :is(a, button, span)::after {
3216
4059
  content: "";
3217
- flex: 0 0 24px;
3218
- width: 24px;
3219
- height: 24px;
4060
+ flex: 0 0 var(--md-comp-menu-item-icon-size);
4061
+ width: var(--md-comp-menu-item-icon-size);
4062
+ height: var(--md-comp-menu-item-icon-size);
3220
4063
  margin-inline-start: auto;
3221
- background-color: var(--md-sys-color-on-surface-variant);
3222
- mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat;
4064
+ background-color: var(--md-comp-menu-item-trailing-icon-color);
4065
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
4066
+ }
4067
+ menu[id] {
4068
+ display: none;
4069
+ position: absolute;
4070
+ left: 0;
4071
+ top: 0;
4072
+ z-index: 9999;
4073
+ overflow-y: auto;
4074
+ opacity: 0;
4075
+ user-select: none;
4076
+ transform-origin: 0 0;
4077
+ }
4078
+ menu[id]:has(> li > menu) {
4079
+ overflow: visible;
4080
+ }
4081
+ menu[id]:has(> li:is(:hover, :focus-within, .open) > menu) {
4082
+ --md-comp-menu-container-shape: 8px;
3223
4083
  }
3224
4084
  menu[id] li > menu {
3225
- --md-comp-menu-container-color: var(--md-sys-color-surface);
3226
- --md-comp-menu-container-shape: 1rem;
4085
+ --md-comp-menu-container-color: var(--md-sys-color-surface-container);
4086
+ --md-comp-menu-container-shape: 16px;
3227
4087
  --md-comp-menu-item-container-height: 48px;
4088
+ --md-comp-menu-item-container-shape: 4px;
4089
+ --md-comp-menu-item-selected-container-shape: 12px;
4090
+ --md-comp-menu-item-label-text-color: var(--md-sys-color-on-surface);
4091
+ --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
4092
+ --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
4093
+ --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary-container);
4094
+ --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary-container);
4095
+ --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary-container);
4096
+ --md-comp-menu-item-icon-size: 20px;
4097
+ --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
3228
4098
  box-sizing: border-box;
3229
- display: none;
3230
- position: absolute;
3231
- inset-block-start: 0;
3232
- inset-inline-start: 100%;
3233
- z-index: 1;
3234
4099
  min-width: 112px;
3235
4100
  margin: 0;
3236
- padding: 8px 0;
4101
+ padding: 4px;
3237
4102
  list-style: none;
3238
- overflow: visible;
3239
- opacity: 1;
3240
- transform: none;
3241
4103
  background-color: var(--md-comp-menu-container-color);
3242
4104
  border-radius: var(--md-comp-menu-container-shape);
3243
- color: var(--md-sys-color-on-surface);
4105
+ color: var(--md-comp-menu-item-label-text-color);
3244
4106
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
4107
+ transition: border-radius 200ms ease;
4108
+ }
4109
+ menu[id] li > menu.vibrant {
4110
+ --md-comp-menu-container-color: var(--md-sys-color-tertiary-container);
4111
+ --md-comp-menu-item-label-text-color: var(--md-sys-color-on-tertiary-container);
4112
+ --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-tertiary-container);
4113
+ --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-tertiary-container);
4114
+ --md-comp-menu-supporting-text-color: var(--md-sys-color-on-tertiary-container);
4115
+ --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary);
4116
+ --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary);
4117
+ --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary);
3245
4118
  }
3246
4119
  menu[id] li > menu > li {
3247
4120
  box-sizing: border-box;
3248
- min-height: var(--md-comp-menu-item-container-height);
3249
- }
3250
- menu[id] li > menu > li:not(.disabled, .divider, .optgroup) {
3251
- width: calc(100% - 16px);
3252
- margin-inline: 8px;
3253
- border-radius: 2rem;
3254
- }
3255
- menu[id] li > menu > li:not(.disabled, .divider):hover,
3256
- menu[id] li > menu > li.active {
3257
- background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
4121
+ margin: 0;
4122
+ padding: 0;
4123
+ width: 100%;
4124
+ cursor: pointer;
4125
+ text-align: left;
4126
+ border-radius: var(--md-comp-menu-item-container-shape);
3258
4127
  }
3259
- menu[id] li > menu > li > :is(a, button, span) {
4128
+ menu[id] li > menu > li > a,
4129
+ menu[id] li > menu > li > button,
4130
+ menu[id] li > menu > li > span {
3260
4131
  display: flex;
3261
4132
  align-items: center;
3262
4133
  gap: 12px;
3263
4134
  box-sizing: border-box;
3264
4135
  width: 100%;
3265
4136
  min-height: var(--md-comp-menu-item-container-height);
3266
- padding: 0 12px;
3267
- color: var(--md-sys-color-on-surface);
4137
+ margin: 0;
4138
+ padding: 0 8px;
4139
+ border: 0;
4140
+ background: none;
4141
+ color: var(--md-comp-menu-item-label-text-color);
3268
4142
  text-decoration: none;
4143
+ cursor: pointer;
4144
+ }
4145
+ menu[id] li > menu > li > a:hover, menu[id] li > menu > li > a:focus,
4146
+ menu[id] li > menu > li > button:hover,
4147
+ menu[id] li > menu > li > button:focus,
4148
+ menu[id] li > menu > li > span:hover,
4149
+ menu[id] li > menu > li > span:focus {
4150
+ background: none;
4151
+ }
4152
+ menu[id] li > menu > li > a,
4153
+ menu[id] li > menu > li > button,
4154
+ menu[id] li > menu > li > span {
4155
+ font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
4156
+ font-size: var(--md-sys-typescale-label-large-font-size);
4157
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
4158
+ line-height: var(--md-sys-typescale-label-large-line-height);
4159
+ letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
4160
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4161
+ }
4162
+ menu[id] li > menu > li > a > i,
4163
+ menu[id] li > menu > li > button > i,
4164
+ menu[id] li > menu > li > i {
4165
+ flex: 0 0 var(--md-comp-menu-item-icon-size);
4166
+ font-size: var(--md-comp-menu-item-icon-size);
4167
+ width: var(--md-comp-menu-item-icon-size);
4168
+ height: var(--md-comp-menu-item-icon-size);
4169
+ line-height: var(--md-comp-menu-item-icon-size);
4170
+ color: var(--md-comp-menu-item-leading-icon-color);
4171
+ }
4172
+ menu[id] li > menu > li > :is(a, button) > i:last-child:not(:only-child) {
4173
+ margin-inline-start: auto;
4174
+ color: var(--md-comp-menu-item-trailing-icon-color);
4175
+ }
4176
+ menu[id] li > menu > li > :is(a, button) > :is(kbd, .shortcut) {
4177
+ margin-inline-start: auto;
4178
+ padding: 0;
4179
+ border: 0;
4180
+ background: none;
4181
+ color: var(--md-comp-menu-supporting-text-color);
4182
+ font-family: inherit;
4183
+ font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
4184
+ font-size: var(--md-sys-typescale-label-large-font-size);
4185
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
4186
+ line-height: var(--md-sys-typescale-label-large-line-height);
4187
+ letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
4188
+ }
4189
+ menu[id] li > menu > li:not(.disabled, .divider, .optgroup, .gap, .label) {
4190
+ min-height: var(--md-comp-menu-item-container-height);
4191
+ }
4192
+ menu[id] li > menu > li:not(.disabled, .divider, .optgroup, .gap, .label):hover,
4193
+ menu[id] li > menu > li.active:not(.selected, [aria-selected=true]) {
4194
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
4195
+ }
4196
+ menu[id] li > menu > li:not(.disabled, .divider, .optgroup, .gap, .label):active {
4197
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
4198
+ }
4199
+ menu[id] li > menu > li.selected,
4200
+ menu[id] li > menu > li[aria-selected=true] {
4201
+ border-radius: var(--md-comp-menu-item-selected-container-shape);
4202
+ background-color: var(--md-comp-menu-item-selected-container-color);
4203
+ color: var(--md-comp-menu-item-selected-label-text-color);
4204
+ }
4205
+ menu[id] li > menu > li.selected > :is(a, button, span),
4206
+ menu[id] li > menu > li[aria-selected=true] > :is(a, button, span) {
4207
+ color: var(--md-comp-menu-item-selected-label-text-color);
4208
+ }
4209
+ menu[id] li > menu > li.selected > :is(a, button, span) > i,
4210
+ menu[id] li > menu > li.selected > i,
4211
+ menu[id] li > menu > li[aria-selected=true] > :is(a, button, span) > i,
4212
+ menu[id] li > menu > li[aria-selected=true] > i {
4213
+ color: var(--md-comp-menu-item-selected-leading-icon-color);
4214
+ }
4215
+ menu[id] li > menu > li.selected:hover,
4216
+ menu[id] li > menu > li[aria-selected=true]:hover {
4217
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
4218
+ }
4219
+ menu[id] li > menu > li:focus-visible {
4220
+ outline: 3px solid var(--md-sys-color-secondary);
4221
+ outline-offset: -3px;
4222
+ }
4223
+ menu[id] li > menu > li.disabled {
4224
+ pointer-events: none;
4225
+ opacity: 0.38;
4226
+ }
4227
+ menu[id] li > menu > hr,
4228
+ menu[id] li > menu > li.divider {
4229
+ display: block;
4230
+ width: calc(100% - 8px);
4231
+ height: 1px;
4232
+ min-height: 0;
4233
+ margin: 4px auto;
4234
+ padding: 0;
4235
+ border: 0;
4236
+ background-color: var(--md-sys-color-outline-variant);
4237
+ cursor: default;
4238
+ pointer-events: none;
4239
+ border-radius: 0;
4240
+ }
4241
+ menu[id] li > menu > li.gap {
4242
+ height: 6px;
4243
+ min-height: 6px;
4244
+ margin: 0 -4px;
4245
+ padding: 0;
4246
+ pointer-events: none;
4247
+ cursor: default;
4248
+ background: transparent;
4249
+ border-radius: 0;
4250
+ box-shadow: none;
4251
+ }
4252
+ menu[id] li > menu > li.label {
4253
+ display: flex;
4254
+ align-items: center;
4255
+ min-height: 32px;
4256
+ padding: 0 8px;
4257
+ pointer-events: none;
4258
+ cursor: default;
4259
+ color: var(--md-comp-menu-supporting-text-color);
3269
4260
  font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
3270
4261
  font-size: var(--md-sys-typescale-label-large-font-size);
3271
4262
  font-weight: var(--md-sys-typescale-label-large-font-weight);
@@ -3273,30 +4264,76 @@
3273
4264
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
3274
4265
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3275
4266
  }
4267
+ menu[id] li > menu li:has(> menu) {
4268
+ position: relative;
4269
+ }
4270
+ menu[id] li > menu li:has(> menu) > :is(a, button, span)::after {
4271
+ content: "";
4272
+ flex: 0 0 var(--md-comp-menu-item-icon-size);
4273
+ width: var(--md-comp-menu-item-icon-size);
4274
+ height: var(--md-comp-menu-item-icon-size);
4275
+ margin-inline-start: auto;
4276
+ background-color: var(--md-comp-menu-item-trailing-icon-color);
4277
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
4278
+ }
4279
+ menu[id] li > menu {
4280
+ display: block;
4281
+ position: absolute;
4282
+ inset-block-start: 0;
4283
+ inset-inline-start: 100%;
4284
+ z-index: 1;
4285
+ overflow: visible;
4286
+ visibility: hidden;
4287
+ opacity: 0;
4288
+ pointer-events: none;
4289
+ transform: translateX(-4px) scale(0.96);
4290
+ transform-origin: 0 0;
4291
+ transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, border-radius 200ms ease;
4292
+ }
3276
4293
  @media (hover: hover) and (pointer: fine) {
3277
4294
  menu[id] li:is(:hover, :focus-within) > menu {
3278
- display: block;
4295
+ visibility: visible;
4296
+ opacity: 1;
4297
+ pointer-events: auto;
4298
+ transform: none;
4299
+ --md-comp-menu-container-shape: 20px;
3279
4300
  }
3280
4301
  }
3281
4302
  menu[id] li.open > menu {
3282
- display: block;
4303
+ visibility: visible;
4304
+ opacity: 1;
4305
+ pointer-events: auto;
4306
+ transform: none;
4307
+ --md-comp-menu-container-shape: 20px;
3283
4308
  }
3284
4309
  menu[id] li.submenu-start > menu {
3285
4310
  inset-inline-start: auto;
3286
4311
  inset-inline-end: 100%;
4312
+ transform-origin: 100% 0;
4313
+ }
4314
+ menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
4315
+ transform: none;
3287
4316
  }
3288
4317
  body.keyboard-focused menu[id] > li:focus {
3289
- background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
4318
+ background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
4319
+ }
4320
+ body.keyboard-focused menu[id] > li:focus:not(.selected, [aria-selected=true]) {
4321
+ outline: 3px solid var(--md-sys-color-secondary);
4322
+ outline-offset: -3px;
4323
+ }
4324
+ @media (prefers-reduced-motion: reduce) {
4325
+ menu[id] li > menu {
4326
+ transition: none;
4327
+ }
3290
4328
  }
3291
- .dropdown-trigger {
4329
+ .menu-trigger {
3292
4330
  cursor: pointer;
3293
4331
  }
3294
4332
  dialog {
3295
- --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
4333
+ --md-comp-basic-dialog-container-color: var(--md-sys-color-surface-container-high);
3296
4334
  --md-comp-basic-dialog-container-shape: 28px;
3297
4335
  --md-comp-basic-dialog-container-min-width: 280px;
3298
4336
  --md-comp-basic-dialog-container-max-width: 560px;
3299
- --md-comp-basic-dialog-sheet-width: 400px;
3300
4337
  --md-comp-basic-dialog-scrim-blur: 12px;
3301
4338
  box-sizing: border-box;
3302
4339
  width: min(var(--md-comp-basic-dialog-container-max-width), 100% - 48px);
@@ -3338,12 +4375,12 @@
3338
4375
  flex: 0 0 auto;
3339
4376
  margin: 0;
3340
4377
  padding: 24px 24px 16px;
3341
- font-family: var(--md-sys-typescale-headline-small-font-family-name);
4378
+ color: var(--md-sys-color-on-surface);
4379
+ font-family: var(--md-sys-typescale-headline-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
3342
4380
  font-size: var(--md-sys-typescale-headline-small-font-size);
3343
4381
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
3344
4382
  line-height: var(--md-sys-typescale-headline-small-line-height);
3345
4383
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
3346
- color: var(--md-sys-color-on-surface);
3347
4384
  }
3348
4385
  dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
3349
4386
  padding-top: 16px;
@@ -3356,17 +4393,39 @@
3356
4393
  overflow: auto;
3357
4394
  overscroll-behavior: contain;
3358
4395
  margin: 0;
3359
- padding: 0 24px 16px;
3360
- font-family: var(--md-sys-typescale-body-medium-font-family-name);
4396
+ padding: 0 24px 24px;
4397
+ }
4398
+ dialog > p {
4399
+ color: var(--md-sys-color-on-surface-variant);
4400
+ font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
3361
4401
  font-size: var(--md-sys-typescale-body-medium-font-size);
3362
4402
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
3363
4403
  line-height: var(--md-sys-typescale-body-medium-line-height);
3364
4404
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
3365
- color: color-mix(in oklab, currentColor 72%, transparent);
4405
+ }
4406
+ dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) + p {
4407
+ text-align: center;
3366
4408
  }
3367
4409
  dialog > :is(h1, h2, h3, h4, h5, h6) + p {
3368
4410
  padding-top: 0;
3369
4411
  }
4412
+ dialog > hr {
4413
+ flex: 0 0 auto;
4414
+ box-sizing: border-box;
4415
+ width: 100%;
4416
+ height: 1px;
4417
+ margin: 0;
4418
+ padding: 0;
4419
+ border: 0;
4420
+ background-color: var(--md-sys-color-outline-variant);
4421
+ }
4422
+ dialog > .list {
4423
+ flex: 1 1 auto;
4424
+ min-height: 0;
4425
+ overflow: auto;
4426
+ margin: 0;
4427
+ --md-comp-list-item-padding: 24px;
4428
+ }
3370
4429
  dialog > :is(form, nav):last-child {
3371
4430
  display: flex;
3372
4431
  flex-wrap: wrap;
@@ -3375,11 +4434,68 @@
3375
4434
  gap: 8px;
3376
4435
  flex: 0 0 auto;
3377
4436
  margin: 0;
3378
- padding: 8px 16px 16px;
4437
+ padding: 0 24px 24px;
3379
4438
  border: 0;
3380
4439
  background: none;
3381
4440
  }
4441
+ dialog:not(.bottom,
4442
+ .bottom-sheet,
4443
+ .side-sheet,
4444
+ .right,
4445
+ .right-sheet,
4446
+ .left,
4447
+ .left-sheet,
4448
+ .sidenav,
4449
+ .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled) {
4450
+ box-shadow: none !important;
4451
+ color: var(--md-sys-color-primary);
4452
+ background-color: transparent;
4453
+ border-color: transparent;
4454
+ }
4455
+ dialog:not(.bottom,
4456
+ .bottom-sheet,
4457
+ .side-sheet,
4458
+ .right,
4459
+ .right-sheet,
4460
+ .left,
4461
+ .left-sheet,
4462
+ .sidenav,
4463
+ .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):hover {
4464
+ background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
4465
+ }
4466
+ dialog:not(.bottom,
4467
+ .bottom-sheet,
4468
+ .side-sheet,
4469
+ .right,
4470
+ .right-sheet,
4471
+ .left,
4472
+ .left-sheet,
4473
+ .sidenav,
4474
+ .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):active, dialog:not(.bottom,
4475
+ .bottom-sheet,
4476
+ .side-sheet,
4477
+ .right,
4478
+ .right-sheet,
4479
+ .left,
4480
+ .left-sheet,
4481
+ .sidenav,
4482
+ .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):focus {
4483
+ background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
4484
+ }
4485
+ dialog:not(.bottom,
4486
+ .bottom-sheet,
4487
+ .side-sheet,
4488
+ .right,
4489
+ .right-sheet,
4490
+ .left,
4491
+ .left-sheet,
4492
+ .sidenav,
4493
+ .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):focus-visible {
4494
+ outline: 3px solid var(--md-sys-color-secondary);
4495
+ outline-offset: 2px;
4496
+ }
3382
4497
  dialog.max {
4498
+ --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
3383
4499
  width: 100%;
3384
4500
  max-width: none;
3385
4501
  height: 100%;
@@ -3387,176 +4503,351 @@
3387
4503
  max-height: none;
3388
4504
  margin: 0;
3389
4505
  border-radius: 0;
4506
+ box-shadow: none !important;
4507
+ }
4508
+ dialog.max::backdrop {
4509
+ background: none;
4510
+ backdrop-filter: none;
4511
+ }
4512
+ dialog.max > header {
4513
+ display: flex;
4514
+ align-items: center;
4515
+ gap: 4px;
4516
+ flex: 0 0 auto;
4517
+ box-sizing: border-box;
4518
+ min-height: 64px;
4519
+ margin: 0;
4520
+ padding: 8px 4px;
4521
+ background: none;
4522
+ box-shadow: none;
4523
+ }
4524
+ dialog.max > header > :is(h1, h2, h3, h4, h5, h6) {
4525
+ flex: 1 1 auto;
4526
+ min-width: 0;
4527
+ margin: 0;
4528
+ padding: 0 12px;
4529
+ text-align: start;
4530
+ color: var(--md-sys-color-on-surface);
4531
+ font-family: var(--md-sys-typescale-title-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
4532
+ font-size: var(--md-sys-typescale-title-large-font-size);
4533
+ font-weight: var(--md-sys-typescale-title-large-font-weight);
4534
+ line-height: var(--md-sys-typescale-title-large-line-height);
4535
+ letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
4536
+ }
4537
+ dialog.max > header > form {
4538
+ display: flex;
4539
+ flex: 0 0 auto;
4540
+ align-items: center;
4541
+ margin: 0;
4542
+ padding: 0 8px 0 0;
4543
+ border: 0;
4544
+ background: none;
4545
+ box-shadow: none;
4546
+ }
4547
+ dialog.max > header > :is(button, a):has(> i:only-child) {
4548
+ display: inline-flex;
4549
+ flex: 0 0 48px;
4550
+ align-items: center;
4551
+ justify-content: center;
4552
+ box-sizing: border-box;
4553
+ width: 48px;
4554
+ height: 48px;
4555
+ min-width: 48px;
4556
+ padding: 0;
4557
+ border: none;
4558
+ border-radius: 50%;
4559
+ background-color: transparent;
4560
+ color: var(--md-sys-color-on-surface-variant);
4561
+ box-shadow: none;
4562
+ }
4563
+ dialog.max > header > :is(button, a):has(> i:only-child) > i {
4564
+ font-size: 24px;
4565
+ width: 24px;
4566
+ height: 24px;
4567
+ line-height: 24px;
4568
+ }
4569
+ dialog.max > header > :is(button, a):has(> i:only-child):hover {
4570
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
4571
+ }
4572
+ dialog.max > header > :is(button, a):has(> i:only-child):focus-visible {
4573
+ outline: 3px solid var(--md-sys-color-secondary);
4574
+ outline-offset: 2px;
4575
+ }
4576
+ dialog.max > header :is(button, a.button):not(:has(> i:only-child)) {
4577
+ box-shadow: none !important;
4578
+ color: var(--md-sys-color-primary);
4579
+ background-color: transparent;
4580
+ border-color: transparent;
4581
+ }
4582
+ dialog.max > header :is(button, a.button):not(:has(> i:only-child)):hover {
4583
+ background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
4584
+ }
4585
+ dialog.max > header :is(button, a.button):not(:has(> i:only-child)):active, dialog.max > header :is(button, a.button):not(:has(> i:only-child)):focus {
4586
+ background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
4587
+ }
4588
+ dialog.max > header :is(button, a.button):not(:has(> i:only-child)):focus-visible {
4589
+ outline: 3px solid var(--md-sys-color-secondary);
4590
+ outline-offset: 2px;
4591
+ }
4592
+ dialog.max > header :is(button, a.button):not(:has(> i:only-child)) {
4593
+ width: auto;
4594
+ min-width: 0;
4595
+ height: 40px;
4596
+ padding-inline: 12px;
4597
+ border-radius: 20px;
4598
+ }
4599
+ dialog.max > :is(p, div) {
4600
+ padding: 8px 24px 24px;
4601
+ }
4602
+ dialog.max > .list {
4603
+ padding-block: 8px;
3390
4604
  }
3391
4605
  dialog.bottom,
3392
4606
  dialog.bottom-sheet {
4607
+ --md-comp-bottom-sheet-container-color: var(--md-sys-color-surface-container-low);
4608
+ --md-comp-bottom-sheet-container-shape: 28px;
4609
+ --md-comp-bottom-sheet-container-max-width: 640px;
4610
+ --md-comp-bottom-sheet-margin-inline: 56px;
4611
+ --md-comp-bottom-sheet-top-inset: 72px;
4612
+ --md-comp-bottom-sheet-drag-handle-color: color-mix(
4613
+ in oklab,
4614
+ var(--md-sys-color-on-surface-variant) 40%,
4615
+ transparent
4616
+ );
4617
+ --md-comp-bottom-sheet-shift: 0px;
4618
+ box-sizing: border-box;
4619
+ position: fixed;
4620
+ inset: auto 0 0;
3393
4621
  width: 100%;
3394
4622
  min-width: 0;
3395
4623
  max-width: none;
3396
- max-height: 50%;
3397
- margin: auto 0 0;
3398
- border-radius: var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape) 0 0;
4624
+ height: auto;
4625
+ max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset));
4626
+ margin: 0;
4627
+ padding: 0;
4628
+ border: none;
4629
+ border-radius: var(--md-comp-bottom-sheet-container-shape) var(--md-comp-bottom-sheet-container-shape) 0 0;
4630
+ background-color: var(--md-comp-bottom-sheet-container-color);
4631
+ color: var(--md-sys-color-on-surface);
4632
+ outline: none;
4633
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
4634
+ translate: 0 var(--md-comp-bottom-sheet-shift);
4635
+ transition: translate 280ms ease;
3399
4636
  }
3400
- dialog.top,
3401
- dialog.top-sheet {
3402
- width: 100%;
3403
- min-width: 0;
3404
- max-width: none;
3405
- max-height: 50%;
3406
- margin: 0 0 auto;
3407
- border-radius: 0 0 var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape);
3408
- }
3409
- dialog.left,
3410
- dialog.left-sheet,
3411
- dialog.right,
3412
- dialog.right-sheet {
4637
+ dialog.bottom:not(:modal),
4638
+ dialog.bottom-sheet:not(:modal) {
4639
+ z-index: 1100;
4640
+ }
4641
+ @media (width >= 601px) {
4642
+ dialog.bottom,
4643
+ dialog.bottom-sheet {
4644
+ width: min(var(--md-comp-bottom-sheet-container-max-width), 100% - 2 * var(--md-comp-bottom-sheet-margin-inline));
4645
+ max-width: var(--md-comp-bottom-sheet-container-max-width);
4646
+ margin-inline: auto;
4647
+ }
4648
+ }
4649
+ dialog.bottom:not(:modal)::backdrop,
4650
+ dialog.bottom-sheet:not(:modal)::backdrop {
4651
+ background: none;
4652
+ backdrop-filter: none;
4653
+ }
4654
+ dialog.bottom::before,
4655
+ dialog.bottom-sheet::before {
4656
+ content: "";
4657
+ box-sizing: border-box;
4658
+ flex: 0 0 48px;
4659
+ width: 48px;
4660
+ height: 48px;
4661
+ align-self: center;
4662
+ margin: 0;
4663
+ padding: 0;
4664
+ background-color: var(--md-comp-bottom-sheet-drag-handle-color);
4665
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E") center/32px 4px no-repeat;
4666
+ pointer-events: none;
4667
+ }
4668
+ dialog.bottom:has(> .handle)::before,
4669
+ dialog.bottom-sheet:has(> .handle)::before {
4670
+ content: none;
4671
+ display: none;
4672
+ }
4673
+ dialog.bottom > .handle,
4674
+ dialog.bottom-sheet > .handle {
4675
+ box-sizing: border-box;
4676
+ flex: 0 0 48px;
4677
+ align-self: center;
4678
+ width: 48px;
4679
+ height: 48px;
4680
+ margin: 0;
4681
+ padding: 0;
4682
+ border: 0;
4683
+ border-radius: 0;
4684
+ background-color: var(--md-comp-bottom-sheet-drag-handle-color);
4685
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E") center/32px 4px no-repeat;
4686
+ cursor: grab;
4687
+ appearance: none;
4688
+ }
4689
+ dialog.bottom > :is(h1, h2, h3, h4, h5, h6),
4690
+ dialog.bottom-sheet > :is(h1, h2, h3, h4, h5, h6) {
4691
+ padding-top: 8px;
4692
+ }
4693
+ dialog.bottom[open],
4694
+ dialog.bottom-sheet[open] {
4695
+ display: flex;
4696
+ flex-direction: column;
4697
+ }
4698
+ @starting-style {
4699
+ dialog.bottom[open],
4700
+ dialog.bottom-sheet[open] {
4701
+ translate: 0 100%;
4702
+ }
4703
+ }
4704
+ @media (prefers-reduced-motion: reduce) {
4705
+ dialog.bottom,
4706
+ dialog.bottom-sheet {
4707
+ transition: none;
4708
+ }
4709
+ }
4710
+ dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet {
4711
+ --md-comp-side-sheet-container-color: var(--md-sys-color-surface-container-low);
4712
+ --md-comp-side-sheet-container-shape: 28px;
4713
+ --md-comp-side-sheet-container-width: 400px;
4714
+ --md-comp-side-sheet-shift: 0px;
4715
+ box-sizing: border-box;
4716
+ position: fixed;
3413
4717
  float: none !important;
3414
- width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
3415
- max-width: none;
4718
+ inset-block: 0;
4719
+ inset-inline-start: auto;
4720
+ inset-inline-end: 0;
4721
+ width: min(var(--md-comp-side-sheet-container-width), 85%);
4722
+ max-width: var(--md-comp-side-sheet-container-width);
3416
4723
  height: auto;
3417
4724
  max-height: none;
3418
4725
  min-width: 0;
3419
4726
  min-height: 0;
3420
4727
  margin: 0;
3421
- inset-block: 0;
4728
+ padding: 0;
4729
+ border: none;
4730
+ background-color: var(--md-comp-side-sheet-container-color);
4731
+ color: var(--md-sys-color-on-surface);
4732
+ outline: none;
4733
+ translate: var(--md-comp-side-sheet-shift) 0;
4734
+ transition: translate 280ms ease, border-radius 200ms ease;
4735
+ }
4736
+ dialog.side-sheet:not(:modal), dialog.right:not(:modal), dialog.right-sheet:not(:modal), dialog.left:not(:modal), dialog.left-sheet:not(:modal) {
4737
+ z-index: 1100;
4738
+ border-radius: 0;
4739
+ box-shadow: none;
4740
+ border-inline-start: 1px solid var(--md-sys-color-outline-variant);
4741
+ }
4742
+ dialog.side-sheet:modal, dialog.right:modal, dialog.right-sheet:modal, dialog.left:modal, dialog.left-sheet:modal {
4743
+ border-radius: var(--md-comp-side-sheet-container-shape) 0 0 var(--md-comp-side-sheet-container-shape);
4744
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
3422
4745
  }
3423
- dialog.left,
3424
- dialog.left-sheet {
4746
+ dialog.side-sheet:not(:modal)::backdrop, dialog.right:not(:modal)::backdrop, dialog.right-sheet:not(:modal)::backdrop, dialog.left:not(:modal)::backdrop, dialog.left-sheet:not(:modal)::backdrop {
4747
+ background: none;
4748
+ backdrop-filter: none;
4749
+ }
4750
+ dialog.side-sheet.left, dialog.side-sheet.left-sheet, dialog.side-sheet.start, dialog.right.left, dialog.right.left-sheet, dialog.right.start, dialog.right-sheet.left, dialog.right-sheet.left-sheet, dialog.right-sheet.start, dialog.left.left, dialog.left.left-sheet, dialog.left.start, dialog.left-sheet.left, dialog.left-sheet.left-sheet, dialog.left-sheet.start {
3425
4751
  inset-inline-start: 0;
3426
4752
  inset-inline-end: auto;
3427
- border-radius: 0 var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape) 0;
3428
4753
  }
3429
- dialog.right,
3430
- dialog.right-sheet {
3431
- inset-inline-start: auto;
3432
- inset-inline-end: 0;
3433
- border-radius: var(--md-comp-basic-dialog-container-shape) 0 0 var(--md-comp-basic-dialog-container-shape);
3434
- }
3435
- .collapsible {
3436
- --md-comp-collapsible-shape: 12px;
3437
- --md-comp-collapsible-container-color: var(--md-sys-color-surface);
3438
- --md-comp-collapsible-outline-color: var(--md-sys-color-outline-variant);
3439
- --md-comp-collapsible-header-padding: 1rem;
3440
- --md-comp-collapsible-body-padding: 0 1rem;
3441
- --md-comp-collapsible-duration: 500ms;
3442
- --md-comp-collapsible-easing-open: cubic-bezier(0.65, 0, 0.35, 1);
3443
- --md-comp-collapsible-easing-close: cubic-bezier(0.65, 0, 0.35, 1);
3444
- --md-comp-collapsible-icon-size: 24px;
3445
- --md-comp-collapsible-popout-inset: 24px;
3446
- --md-comp-collapsible-popout-gap: 16px;
3447
- box-sizing: border-box;
3448
- padding: 0;
3449
- margin: 0.5rem 0 1rem;
3450
- list-style: none;
3451
- overflow: hidden;
3452
- border: 1px solid var(--md-comp-collapsible-outline-color);
3453
- border-radius: var(--md-comp-collapsible-shape);
3454
- background-color: var(--md-comp-collapsible-container-color);
3455
- color: var(--md-sys-color-on-surface);
3456
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
4754
+ dialog.side-sheet.left:not(:modal), dialog.side-sheet.left-sheet:not(:modal), dialog.side-sheet.start:not(:modal), dialog.right.left:not(:modal), dialog.right.left-sheet:not(:modal), dialog.right.start:not(:modal), dialog.right-sheet.left:not(:modal), dialog.right-sheet.left-sheet:not(:modal), dialog.right-sheet.start:not(:modal), dialog.left.left:not(:modal), dialog.left.left-sheet:not(:modal), dialog.left.start:not(:modal), dialog.left-sheet.left:not(:modal), dialog.left-sheet.left-sheet:not(:modal), dialog.left-sheet.start:not(:modal) {
4755
+ border-inline-start: 0;
4756
+ border-inline-end: 1px solid var(--md-sys-color-outline-variant);
3457
4757
  }
3458
- .collapsible > details + details {
3459
- border-top: 1px solid var(--md-comp-collapsible-outline-color);
4758
+ dialog.side-sheet.left:modal, dialog.side-sheet.left-sheet:modal, dialog.side-sheet.start:modal, dialog.right.left:modal, dialog.right.left-sheet:modal, dialog.right.start:modal, dialog.right-sheet.left:modal, dialog.right-sheet.left-sheet:modal, dialog.right-sheet.start:modal, dialog.left.left:modal, dialog.left.left-sheet:modal, dialog.left.start:modal, dialog.left-sheet.left:modal, dialog.left-sheet.left-sheet:modal, dialog.left-sheet.start:modal {
4759
+ border-radius: 0 var(--md-comp-side-sheet-container-shape) var(--md-comp-side-sheet-container-shape) 0;
3460
4760
  }
3461
- .collapsible summary {
4761
+ dialog.side-sheet > header, dialog.right > header, dialog.right-sheet > header, dialog.left > header, dialog.left-sheet > header {
3462
4762
  display: flex;
3463
4763
  align-items: center;
4764
+ gap: 12px;
4765
+ flex: 0 0 auto;
3464
4766
  box-sizing: border-box;
3465
- width: 100%;
4767
+ min-height: 64px;
3466
4768
  margin: 0;
3467
- padding: var(--md-comp-collapsible-header-padding);
3468
- border: 0;
4769
+ padding: 8px 12px 8px 24px;
3469
4770
  background: none;
3470
- color: inherit;
3471
- font: inherit;
3472
- font-weight: inherit;
3473
- line-height: 1.5;
3474
- text-align: start;
3475
- list-style: none;
3476
- cursor: pointer;
3477
- -webkit-tap-highlight-color: transparent;
3478
- }
3479
- .collapsible summary::-webkit-details-marker {
3480
- display: none;
3481
- }
3482
- .collapsible summary:focus-visible {
3483
- outline: 3px solid var(--md-sys-color-secondary);
3484
- outline-offset: 2px;
4771
+ box-shadow: none;
3485
4772
  }
3486
- .collapsible summary > i {
3487
- width: 2rem;
3488
- margin-right: 1rem;
3489
- font-size: 1.6rem;
3490
- line-height: 1;
3491
- text-align: center;
4773
+ dialog.side-sheet > header:has(> :is(button, a):first-child), dialog.right > header:has(> :is(button, a):first-child), dialog.right-sheet > header:has(> :is(button, a):first-child), dialog.left > header:has(> :is(button, a):first-child), dialog.left-sheet > header:has(> :is(button, a):first-child) {
4774
+ padding-inline-start: 8px;
3492
4775
  }
3493
- .collapsible summary::after {
3494
- content: "expand_more";
3495
- flex-shrink: 0;
3496
- margin-inline-start: auto;
3497
- font-family: var(--md-icon-font);
3498
- font-size: var(--md-comp-collapsible-icon-size);
3499
- font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
3500
- line-height: 1;
3501
- -webkit-font-smoothing: antialiased;
3502
- transition: transform var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
3503
- }
3504
- .collapsible details[open] > summary::after {
3505
- transform: rotate(180deg);
3506
- transition-timing-function: var(--md-comp-collapsible-easing-open);
4776
+ dialog.side-sheet > header > :is(h1, h2, h3, h4, h5, h6), dialog.right > header > :is(h1, h2, h3, h4, h5, h6), dialog.right-sheet > header > :is(h1, h2, h3, h4, h5, h6), dialog.left > header > :is(h1, h2, h3, h4, h5, h6), dialog.left-sheet > header > :is(h1, h2, h3, h4, h5, h6) {
4777
+ flex: 1 1 auto;
4778
+ min-width: 0;
4779
+ margin: 0;
4780
+ padding: 0;
4781
+ color: var(--md-sys-color-on-surface);
4782
+ font-family: var(--md-sys-typescale-title-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
4783
+ font-size: var(--md-sys-typescale-title-large-font-size);
4784
+ font-weight: var(--md-sys-typescale-title-large-font-weight);
4785
+ line-height: var(--md-sys-typescale-title-large-line-height);
4786
+ letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
3507
4787
  }
3508
- .collapsible .collapsible-header-content {
3509
- flex-grow: 1;
4788
+ dialog.side-sheet > header > form, dialog.right > header > form, dialog.right-sheet > header > form, dialog.left > header > form, dialog.left-sheet > header > form {
4789
+ display: flex;
4790
+ flex: 0 0 auto;
4791
+ align-items: center;
4792
+ margin: 0;
4793
+ padding: 0;
4794
+ border: 0;
4795
+ background: none;
4796
+ box-shadow: none;
3510
4797
  }
3511
- .collapsible details > :not(summary) {
3512
- display: grid;
3513
- grid-template-rows: 0fr;
4798
+ dialog.side-sheet > header :is(button, a.button), dialog.right > header :is(button, a.button), dialog.right-sheet > header :is(button, a.button), dialog.left > header :is(button, a.button), dialog.left-sheet > header :is(button, a.button) {
4799
+ flex: 0 0 48px;
3514
4800
  box-sizing: border-box;
3515
- padding: var(--md-comp-collapsible-body-padding);
3516
- overflow: hidden;
3517
- transition: grid-template-rows var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
3518
- }
3519
- .collapsible details > :not(summary) > * {
3520
- min-height: 0;
3521
- overflow: hidden;
4801
+ width: 48px;
4802
+ height: 48px;
4803
+ min-width: 48px;
4804
+ padding: 0;
4805
+ border: none;
4806
+ border-radius: 50%;
4807
+ background-color: transparent;
4808
+ color: var(--md-sys-color-on-surface-variant);
4809
+ box-shadow: none;
3522
4810
  }
3523
- .collapsible details[open] > :not(summary) {
3524
- grid-template-rows: 1fr;
3525
- transition-timing-function: var(--md-comp-collapsible-easing-open);
4811
+ dialog.side-sheet > header :is(button, a.button) > i, dialog.right > header :is(button, a.button) > i, dialog.right-sheet > header :is(button, a.button) > i, dialog.left > header :is(button, a.button) > i, dialog.left-sheet > header :is(button, a.button) > i {
4812
+ font-size: 24px;
4813
+ width: 24px;
4814
+ height: 24px;
4815
+ line-height: 24px;
3526
4816
  }
3527
- .collapsible details:not([open]) > :not(summary) {
3528
- display: grid;
4817
+ dialog.side-sheet > header :is(button, a.button):hover, dialog.right > header :is(button, a.button):hover, dialog.right-sheet > header :is(button, a.button):hover, dialog.left > header :is(button, a.button):hover, dialog.left-sheet > header :is(button, a.button):hover {
4818
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
3529
4819
  }
3530
- .collapsible.no-icon summary::after {
3531
- content: none;
4820
+ dialog.side-sheet > header :is(button, a.button):focus-visible, dialog.right > header :is(button, a.button):focus-visible, dialog.right-sheet > header :is(button, a.button):focus-visible, dialog.left > header :is(button, a.button):focus-visible, dialog.left-sheet > header :is(button, a.button):focus-visible {
4821
+ outline: 3px solid var(--md-sys-color-secondary);
4822
+ outline-offset: 2px;
3532
4823
  }
3533
- .collapsible.popout {
3534
- overflow: visible;
3535
- border: 0;
3536
- background: transparent;
3537
- box-shadow: none !important;
4824
+ dialog.side-sheet > :is(form, nav):last-child, dialog.right > :is(form, nav):last-child, dialog.right-sheet > :is(form, nav):last-child, dialog.left > :is(form, nav):last-child, dialog.left-sheet > :is(form, nav):last-child {
4825
+ justify-content: flex-start;
4826
+ gap: 8px;
4827
+ padding: 16px 24px;
4828
+ border-block-start: 1px solid var(--md-sys-color-outline-variant);
3538
4829
  }
3539
- .collapsible.popout > details {
3540
- margin-inline: var(--md-comp-collapsible-popout-inset);
3541
- overflow: hidden;
3542
- border: 0;
3543
- border-radius: var(--md-comp-collapsible-shape);
3544
- background-color: var(--md-comp-collapsible-container-color);
3545
- transition: margin var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
3546
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
4830
+ :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet):not([open]) {
4831
+ display: none;
3547
4832
  }
3548
- .collapsible.popout > details + details {
3549
- border-top: 0;
4833
+ :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet)[open] {
4834
+ display: flex;
4835
+ flex-direction: column;
3550
4836
  }
3551
- .collapsible.popout > details[open] {
3552
- margin-block: var(--md-comp-collapsible-popout-gap);
3553
- margin-inline: 0;
3554
- transition-timing-function: var(--md-comp-collapsible-easing-open);
3555
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
4837
+ @starting-style {
4838
+ dialog.side-sheet[open],
4839
+ dialog.right[open],
4840
+ dialog.right-sheet[open] {
4841
+ translate: 100% 0;
4842
+ }
4843
+ dialog.left[open],
4844
+ dialog.left-sheet[open] {
4845
+ translate: -100% 0;
4846
+ }
3556
4847
  }
3557
4848
  @media (prefers-reduced-motion: reduce) {
3558
- .collapsible {
3559
- --md-comp-collapsible-duration: 0s;
4849
+ dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet {
4850
+ transition: none;
3560
4851
  }
3561
4852
  }
3562
4853
  .chip {
@@ -3564,7 +4855,7 @@
3564
4855
  --font-size-icon: 18px;
3565
4856
  --padding: 8px;
3566
4857
  color: var(--md-sys-color-on-surface-variant);
3567
- background-color: rgba(0, 0, 0, 0.09);
4858
+ background-color: var(--md-sys-color-surface-container-low);
3568
4859
  display: inline-flex;
3569
4860
  white-space: nowrap;
3570
4861
  gap: 8px;
@@ -3579,10 +4870,10 @@
3579
4870
  user-select: none;
3580
4871
  vertical-align: top;
3581
4872
  }
3582
- .chip:focus {
4873
+ .chip:focus, .chip.active {
3583
4874
  outline: none;
3584
- background-color: var(--md-sys-color-primary);
3585
- color: var(--md-sys-color-on-primary);
4875
+ background-color: var(--md-sys-color-secondary-container);
4876
+ color: var(--md-sys-color-on-secondary-container);
3586
4877
  }
3587
4878
  .chip.outlined {
3588
4879
  background-color: transparent;
@@ -3612,7 +4903,7 @@
3612
4903
  cursor: pointer;
3613
4904
  }
3614
4905
  .chip .close:hover {
3615
- background-color: rgba(136, 136, 136, 0.5333333333);
4906
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) 8%, transparent);
3616
4907
  }
3617
4908
  .chips {
3618
4909
  display: flex;
@@ -3789,14 +5080,8 @@
3789
5080
  transform: translateY(var(--md-comp-parallax-travel));
3790
5081
  }
3791
5082
  to {
3792
- transform: translateY(calc(-1 * var(--md-comp-parallax-travel)));
3793
- }
3794
- }
3795
- .pin-top, .pin-bottom {
3796
- position: relative;
3797
- }
3798
- .pinned {
3799
- position: fixed !important;
5083
+ transform: translateY(calc(-1 * var(--md-comp-parallax-travel)));
5084
+ }
3800
5085
  }
3801
5086
  .display-docked {
3802
5087
  position: absolute;
@@ -3804,7 +5089,7 @@
3804
5089
  z-index: 9999;
3805
5090
  visibility: hidden;
3806
5091
  }
3807
- footer:not(:has(> nav:only-child)) {
5092
+ footer:not(:has(> .navigation-bar:only-child)) {
3808
5093
  --md-comp-footer-padding-block: 3rem;
3809
5094
  --md-comp-footer-padding-inline: 1rem;
3810
5095
  --md-comp-footer-gap: 2rem;
@@ -3815,7 +5100,7 @@
3815
5100
  border-top: 1px dashed var(--md-sys-color-outline-variant);
3816
5101
  color: var(--md-sys-color-on-surface);
3817
5102
  }
3818
- footer:not(:has(> nav:only-child)) p {
5103
+ footer:not(:has(> .navigation-bar:only-child)) p {
3819
5104
  margin: 0 0 8px;
3820
5105
  color: var(--md-sys-color-on-surface-variant);
3821
5106
  font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -3825,15 +5110,15 @@
3825
5110
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
3826
5111
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3827
5112
  }
3828
- footer:not(:has(> nav:only-child)) a:not(.button, .circle, .extra) {
5113
+ footer:not(:has(> .navigation-bar:only-child)) a:not(.button, .circle, .extra) {
3829
5114
  color: var(--md-sys-color-primary);
3830
5115
  text-decoration: none;
3831
5116
  }
3832
- footer:not(:has(> nav:only-child)) a:not(.button, .circle, .extra):focus-visible {
5117
+ footer:not(:has(> .navigation-bar:only-child)) a:not(.button, .circle, .extra):focus-visible {
3833
5118
  outline: 3px solid var(--md-sys-color-secondary);
3834
5119
  outline-offset: 2px;
3835
5120
  }
3836
- footer:not(:has(> nav:only-child)) :is(h1, h2, h3, h4, h5, h6) {
5121
+ footer:not(:has(> .navigation-bar:only-child)) :is(h1, h2, h3, h4, h5, h6) {
3837
5122
  margin: 0 0 8px;
3838
5123
  color: var(--md-sys-color-on-surface);
3839
5124
  font-family: var(--md-sys-typescale-title-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -3843,7 +5128,7 @@
3843
5128
  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
3844
5129
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3845
5130
  }
3846
- footer:not(:has(> nav:only-child)) ul {
5131
+ footer:not(:has(> .navigation-bar:only-child)) ul {
3847
5132
  margin: 0;
3848
5133
  padding: 0;
3849
5134
  list-style: none;
@@ -3877,6 +5162,12 @@
3877
5162
  grid-template-columns: repeat(5, 1fr);
3878
5163
  }
3879
5164
  }
5165
+ @media (width >= 1601px) {
5166
+ footer:not(:has(> nav:only-child)) > .container,
5167
+ footer:not(:has(> nav:only-child)):not(:has(> .container)) {
5168
+ grid-template-columns: repeat(6, 1fr);
5169
+ }
5170
+ }
3880
5171
  footer:not(:has(> nav:only-child)) > .container > .row,
3881
5172
  footer:not(:has(> nav:only-child)) > .row {
3882
5173
  grid-column: 1/-1;
@@ -3956,7 +5247,7 @@
3956
5247
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3957
5248
  }
3958
5249
  .field {
3959
- --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
5250
+ --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
3960
5251
  --md-comp-filled-text-field-container-shape: 1rem;
3961
5252
  --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
3962
5253
  --input-color: var(--md-comp-filled-text-field-caret-color);
@@ -4785,7 +6076,7 @@
4785
6076
  left: 24px;
4786
6077
  }
4787
6078
  select {
4788
- --md-comp-filled-select-container-color: var(--md-sys-color-surface-variant);
6079
+ --md-comp-filled-select-container-color: var(--md-sys-color-surface-container-highest);
4789
6080
  --md-comp-filled-select-container-shape: 1rem;
4790
6081
  --md-comp-filled-select-input-text-color: var(--md-sys-color-on-surface);
4791
6082
  box-sizing: border-box;
@@ -4839,10 +6130,10 @@
4839
6130
  position: relative;
4840
6131
  border-radius: var(--md-comp-filled-select-container-shape);
4841
6132
  }
4842
- .field:has(> .hide-select) > input.dropdown-trigger {
6133
+ .field:has(> .hide-select) > input.menu-trigger {
4843
6134
  border-radius: inherit;
4844
6135
  }
4845
- .field:has(> .hide-select) > input.dropdown-trigger {
6136
+ .field:has(> .hide-select) > input.menu-trigger {
4846
6137
  padding-inline-end: 52px;
4847
6138
  }
4848
6139
  .field:has(> .hide-select) .caret {
@@ -4885,7 +6176,7 @@
4885
6176
  .field:has(> .hide-select).disabled > label {
4886
6177
  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
4887
6178
  }
4888
- .field:has(> .hide-select) > input.dropdown-trigger:disabled {
6179
+ .field:has(> .hide-select) > input.menu-trigger:disabled {
4889
6180
  cursor: default;
4890
6181
  user-select: none;
4891
6182
  }
@@ -4899,17 +6190,19 @@
4899
6190
  align-items: center;
4900
6191
  }
4901
6192
  menu[role=listbox] > li.selected:not(.disabled, .optgroup) {
4902
- background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
6193
+ background-color: var(--md-comp-menu-item-selected-container-color, var(--md-sys-color-tertiary-container));
6194
+ color: var(--md-comp-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary-container));
6195
+ border-radius: var(--md-comp-menu-item-selected-container-shape, 12px);
4903
6196
  }
4904
- menu[role=listbox]:not(.multiple-select-dropdown) > li.selected:not(.disabled, .optgroup)::after {
6197
+ menu[role=listbox]:not(.multiple-select-menu) > li.selected:not(.disabled, .optgroup)::after {
4905
6198
  content: "";
4906
- flex: 0 0 24px;
4907
- width: 24px;
4908
- height: 24px;
6199
+ flex: 0 0 20px;
6200
+ width: 20px;
6201
+ height: 20px;
4909
6202
  margin-inline-start: auto;
4910
- margin-inline-end: 12px;
4911
- background-color: var(--md-sys-color-on-surface);
4912
- mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/24px no-repeat;
6203
+ margin-inline-end: 8px;
6204
+ background-color: var(--md-comp-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary-container));
6205
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/20px no-repeat;
4913
6206
  }
4914
6207
  menu[role=listbox] li img {
4915
6208
  box-sizing: border-box;
@@ -4979,18 +6272,29 @@
4979
6272
  .file-field input[type=file]::file-selector-button {
4980
6273
  display: none;
4981
6274
  }
4982
- .range,
4983
- .range-field,
4984
- label:has(> [type=range]) {
6275
+ :is(.range, .range-field, label:has(> [type=range])),
6276
+ input[type=range] {
4985
6277
  --md-comp-slider-track-height: 16px;
4986
6278
  --md-comp-slider-handle-width: 4px;
4987
6279
  --md-comp-slider-handle-width-pressed: 2px;
4988
6280
  --md-comp-slider-handle-height: 44px;
4989
6281
  --md-comp-slider-gap: 6px;
6282
+ --md-comp-slider-stop-size: 2px;
6283
+ --md-comp-slider-stop-inset: 8px;
6284
+ --md-comp-slider-icon-size: 24px;
4990
6285
  --md-comp-slider-active-track-color: var(--md-sys-color-primary);
4991
6286
  --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
4992
6287
  --md-comp-slider-handle-color: var(--md-sys-color-primary);
6288
+ --md-comp-slider-stop-color: var(--md-sys-color-primary);
4993
6289
  --md-comp-slider-gradient: to right;
6290
+ --md-comp-slider-stop-at-start: var(--md-comp-slider-stop-inset) 50%;
6291
+ --md-comp-slider-stop-at-end: calc(100% - var(--md-comp-slider-stop-inset)) 50%;
6292
+ --md-comp-slider-active-fraction: 0%;
6293
+ --md-comp-slider-start-fraction: 0%;
6294
+ --md-comp-slider-end-fraction: 100%;
6295
+ --md-comp-slider-stop-count: 6;
6296
+ }
6297
+ :is(.range, .range-field, label:has(> [type=range])) {
4994
6298
  position: relative;
4995
6299
  display: block;
4996
6300
  overflow: visible;
@@ -5002,49 +6306,73 @@
5002
6306
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
5003
6307
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5004
6308
  }
5005
- .range.small,
5006
- .range-field.small,
5007
- label.small:has(> [type=range]),
5008
- .range.small [type=range],
5009
- .range-field.small [type=range],
5010
- label.small > [type=range] {
5011
- --md-comp-slider-track-height: 8px;
5012
- --md-comp-slider-handle-height: 32px;
5013
- }
5014
- .range.large,
5015
- .range-field.large,
5016
- label.large:has(> [type=range]),
5017
- .range.large [type=range],
5018
- .range-field.large [type=range],
5019
- label.large > [type=range] {
6309
+ :is(.range, .range-field, label:has(> [type=range])).s,
6310
+ :is(.range, .range-field, label:has(> [type=range])).small,
6311
+ :is(.range, .range-field, label:has(> [type=range])).s [type=range],
6312
+ :is(.range, .range-field, label:has(> [type=range])).small [type=range] {
5020
6313
  --md-comp-slider-track-height: 24px;
5021
- --md-comp-slider-handle-height: 52px;
6314
+ --md-comp-slider-handle-height: 44px;
6315
+ --md-comp-slider-stop-inset: 8px;
5022
6316
  }
5023
- .range.vertical,
5024
- .range-field.vertical,
5025
- label.vertical:has(> [type=range]) {
6317
+ :is(.range, .range-field, label:has(> [type=range])).m,
6318
+ :is(.range, .range-field, label:has(> [type=range])).medium,
6319
+ :is(.range, .range-field, label:has(> [type=range])).m [type=range],
6320
+ :is(.range, .range-field, label:has(> [type=range])).medium [type=range] {
6321
+ --md-comp-slider-track-height: 40px;
6322
+ --md-comp-slider-handle-height: 52px;
6323
+ --md-comp-slider-stop-inset: 12px;
6324
+ --md-comp-slider-icon-size: 24px;
6325
+ }
6326
+ :is(.range, .range-field, label:has(> [type=range])).l,
6327
+ :is(.range, .range-field, label:has(> [type=range])).large,
6328
+ :is(.range, .range-field, label:has(> [type=range])).l [type=range],
6329
+ :is(.range, .range-field, label:has(> [type=range])).large [type=range] {
6330
+ --md-comp-slider-track-height: 56px;
6331
+ --md-comp-slider-handle-height: 68px;
6332
+ --md-comp-slider-stop-inset: 16px;
6333
+ --md-comp-slider-icon-size: 24px;
6334
+ }
6335
+ :is(.range, .range-field, label:has(> [type=range])).xl,
6336
+ :is(.range, .range-field, label:has(> [type=range])).xl [type=range] {
6337
+ --md-comp-slider-track-height: 96px;
6338
+ --md-comp-slider-handle-height: 108px;
6339
+ --md-comp-slider-stop-inset: 28px;
6340
+ --md-comp-slider-icon-size: 32px;
6341
+ }
6342
+ :is(.range, .range-field, label:has(> [type=range])).vertical {
5026
6343
  --md-comp-slider-gradient: to top;
6344
+ --md-comp-slider-stop-at-start: 50% var(--md-comp-slider-stop-inset);
6345
+ --md-comp-slider-stop-at-end: 50% calc(100% - var(--md-comp-slider-stop-inset));
5027
6346
  display: inline-flex;
5028
6347
  flex-direction: column;
5029
6348
  align-items: center;
5030
6349
  width: auto;
5031
6350
  }
5032
- .range.vertical [type=range],
5033
- .range-field.vertical [type=range],
5034
- label.vertical > [type=range] {
6351
+ :is(.range, .range-field, label:has(> [type=range])).vertical [type=range] {
5035
6352
  --md-comp-slider-gradient: to top;
6353
+ --md-comp-slider-stop-at-start: 50% var(--md-comp-slider-stop-inset);
6354
+ --md-comp-slider-stop-at-end: 50% calc(100% - var(--md-comp-slider-stop-inset));
6355
+ }
6356
+ :is(.range, .range-field, label:has(> [type=range])) > i:first-child {
6357
+ position: absolute;
6358
+ z-index: 1;
6359
+ left: var(--md-comp-slider-stop-inset);
6360
+ top: 50%;
6361
+ translate: 0 -50%;
6362
+ font-size: var(--md-comp-slider-icon-size);
6363
+ width: var(--md-comp-slider-icon-size);
6364
+ height: var(--md-comp-slider-icon-size);
6365
+ line-height: 1;
6366
+ color: var(--md-sys-color-on-primary);
6367
+ pointer-events: none;
6368
+ }
6369
+ :is(.range, .range-field, label:has(> [type=range])).vertical > i:first-child {
6370
+ left: 50%;
6371
+ top: auto;
6372
+ bottom: var(--md-comp-slider-stop-inset);
6373
+ translate: -50% 0;
5036
6374
  }
5037
6375
  input[type=range] {
5038
- --md-comp-slider-track-height: 16px;
5039
- --md-comp-slider-handle-width: 4px;
5040
- --md-comp-slider-handle-width-pressed: 2px;
5041
- --md-comp-slider-handle-height: 44px;
5042
- --md-comp-slider-gap: 6px;
5043
- --md-comp-slider-active-track-color: var(--md-sys-color-primary);
5044
- --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
5045
- --md-comp-slider-handle-color: var(--md-sys-color-primary);
5046
- --md-comp-slider-gradient: to right;
5047
- --md-comp-slider-active-fraction: 0%;
5048
6376
  appearance: none;
5049
6377
  box-sizing: border-box;
5050
6378
  display: block;
@@ -5065,9 +6393,7 @@
5065
6393
  cursor: default;
5066
6394
  opacity: 0.38;
5067
6395
  }
5068
- .range.vertical > [type=range],
5069
- .range-field.vertical > [type=range],
5070
- label.vertical > [type=range] {
6396
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range] {
5071
6397
  writing-mode: vertical-lr;
5072
6398
  direction: rtl;
5073
6399
  width: var(--md-comp-slider-handle-height);
@@ -5081,7 +6407,7 @@
5081
6407
  border: none;
5082
6408
  border-radius: calc(var(--md-comp-slider-track-height) / 2);
5083
6409
  background-color: transparent;
5084
- background-image: linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
6410
+ background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
5085
6411
  }
5086
6412
  input[type=range]::-webkit-slider-thumb {
5087
6413
  appearance: none;
@@ -5107,25 +6433,22 @@
5107
6433
  input[type=range]:active:not(:disabled)::-webkit-slider-thumb {
5108
6434
  width: var(--md-comp-slider-handle-width-pressed);
5109
6435
  }
5110
- .range.vertical > [type=range]::-webkit-slider-runnable-track,
5111
- .range-field.vertical > [type=range]::-webkit-slider-runnable-track,
5112
- label.vertical > [type=range]::-webkit-slider-runnable-track {
6436
+ :is(.range, .range-field, label:has(> [type=range])).centered [type=range]::-webkit-slider-runnable-track {
6437
+ background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
6438
+ }
6439
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-webkit-slider-runnable-track {
5113
6440
  width: var(--md-comp-slider-track-height);
5114
6441
  height: 100%;
5115
6442
  margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
5116
6443
  }
5117
- .range.vertical > [type=range]::-webkit-slider-thumb,
5118
- .range-field.vertical > [type=range]::-webkit-slider-thumb,
5119
- label.vertical > [type=range]::-webkit-slider-thumb {
6444
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-webkit-slider-thumb {
5120
6445
  width: var(--md-comp-slider-handle-height);
5121
6446
  height: var(--md-comp-slider-handle-width);
5122
6447
  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
5123
6448
  margin-top: 0;
5124
6449
  margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
5125
6450
  }
5126
- .range.vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb,
5127
- .range-field.vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb,
5128
- label.vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb {
6451
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb {
5129
6452
  width: var(--md-comp-slider-handle-height);
5130
6453
  height: var(--md-comp-slider-handle-width-pressed);
5131
6454
  }
@@ -5136,7 +6459,7 @@
5136
6459
  border: none;
5137
6460
  border-radius: calc(var(--md-comp-slider-track-height) / 2);
5138
6461
  background-color: transparent;
5139
- background-image: linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
6462
+ background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
5140
6463
  }
5141
6464
  input[type=range]::-moz-range-thumb {
5142
6465
  appearance: none;
@@ -5161,27 +6484,87 @@
5161
6484
  input[type=range]:active:not(:disabled)::-moz-range-thumb {
5162
6485
  width: var(--md-comp-slider-handle-width-pressed);
5163
6486
  }
5164
- .range.vertical > [type=range]::-moz-range-track,
5165
- .range-field.vertical > [type=range]::-moz-range-track,
5166
- label.vertical > [type=range]::-moz-range-track {
6487
+ :is(.range, .range-field, label:has(> [type=range])).centered [type=range]::-moz-range-track {
6488
+ background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
6489
+ }
6490
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-moz-range-track {
5167
6491
  width: var(--md-comp-slider-track-height);
5168
6492
  height: 100%;
5169
6493
  margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
5170
6494
  }
5171
- .range.vertical > [type=range]::-moz-range-thumb,
5172
- .range-field.vertical > [type=range]::-moz-range-thumb,
5173
- label.vertical > [type=range]::-moz-range-thumb {
6495
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-moz-range-thumb {
5174
6496
  width: var(--md-comp-slider-handle-height);
5175
6497
  height: var(--md-comp-slider-handle-width);
5176
6498
  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
5177
6499
  margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
5178
6500
  }
5179
- .range.vertical > [type=range]:active:not(:disabled)::-moz-range-thumb,
5180
- .range-field.vertical > [type=range]:active:not(:disabled)::-moz-range-thumb,
5181
- label.vertical > [type=range]:active:not(:disabled)::-moz-range-thumb {
6501
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]:active:not(:disabled)::-moz-range-thumb {
5182
6502
  width: var(--md-comp-slider-handle-height);
5183
6503
  height: var(--md-comp-slider-handle-width-pressed);
5184
6504
  }
6505
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) {
6506
+ display: grid;
6507
+ align-items: center;
6508
+ min-height: var(--md-comp-slider-handle-height);
6509
+ }
6510
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range])::before {
6511
+ content: "";
6512
+ grid-area: 1/1;
6513
+ height: var(--md-comp-slider-track-height);
6514
+ border-radius: calc(var(--md-comp-slider-track-height) / 2);
6515
+ pointer-events: none;
6516
+ background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, var(--md-comp-slider-start-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-start-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-start-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, var(--md-comp-slider-start-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-end-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-end-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-end-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-end-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
6517
+ }
6518
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range] {
6519
+ grid-area: 1/1;
6520
+ width: 100%;
6521
+ margin: 0;
6522
+ background: none;
6523
+ pointer-events: none;
6524
+ }
6525
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-webkit-slider-runnable-track {
6526
+ background-image: none;
6527
+ background-color: transparent;
6528
+ }
6529
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-webkit-slider-thumb {
6530
+ pointer-events: auto;
6531
+ position: relative;
6532
+ z-index: 2;
6533
+ }
6534
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-moz-range-track {
6535
+ background-image: none;
6536
+ background-color: transparent;
6537
+ }
6538
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-moz-range-thumb {
6539
+ pointer-events: auto;
6540
+ }
6541
+ :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > .thumb {
6542
+ grid-area: 1/1;
6543
+ }
6544
+ :is(.range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range])::before {
6545
+ width: var(--md-comp-slider-track-height);
6546
+ height: 200px;
6547
+ justify-self: center;
6548
+ }
6549
+ :is(.range, .range-field, label:has(> [type=range])).stops::after {
6550
+ content: "";
6551
+ position: absolute;
6552
+ z-index: 1;
6553
+ left: 0;
6554
+ top: 50%;
6555
+ width: max(0px, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
6556
+ height: var(--md-comp-slider-track-height);
6557
+ translate: 0 -50%;
6558
+ pointer-events: none;
6559
+ background-image: radial-gradient(circle var(--md-comp-slider-stop-size), var(--md-sys-color-on-primary) 99%, transparent);
6560
+ background-size: calc(100% / max(1, var(--md-comp-slider-stop-count) - 1)) 100%;
6561
+ background-repeat: repeat-x;
6562
+ background-position: center;
6563
+ }
6564
+ :is(.range, .range-field, label:has(> [type=range])).stops.centered::after {
6565
+ left: min(50%, var(--md-comp-slider-active-fraction));
6566
+ width: max(0%, abs(50% - var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
6567
+ }
5185
6568
  input[type=range] + .thumb {
5186
6569
  position: absolute;
5187
6570
  left: 0;
@@ -5191,16 +6574,16 @@
5191
6574
  display: flex;
5192
6575
  align-items: center;
5193
6576
  justify-content: center;
5194
- min-width: 28px;
5195
- min-height: 28px;
5196
- padding: 4px 8px;
6577
+ min-width: 40px;
6578
+ height: 40px;
6579
+ padding: 0 12px;
5197
6580
  border: none;
5198
- border-radius: 14px;
6581
+ border-radius: 20px;
5199
6582
  background-color: var(--md-sys-color-inverse-surface);
5200
6583
  color: var(--md-sys-color-inverse-on-surface);
5201
6584
  pointer-events: none;
5202
6585
  opacity: 0;
5203
- transform: translate(-50%, calc(-100% - 12px)) scale(0.9);
6586
+ transform: translate(-50%, calc(-100% - 4px)) scale(0.9);
5204
6587
  transform-origin: center bottom;
5205
6588
  transition: opacity 0.15s ease, transform 0.15s ease;
5206
6589
  font-family: var(--md-sys-typescale-body-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -5216,18 +6599,14 @@
5216
6599
  }
5217
6600
  input[type=range] + .thumb.active {
5218
6601
  opacity: 1;
5219
- transform: translate(-50%, calc(-100% - 12px)) scale(1);
6602
+ transform: translate(-50%, calc(-100% - 4px)) scale(1);
5220
6603
  }
5221
- .range.vertical > [type=range] + .thumb,
5222
- .range-field.vertical > [type=range] + .thumb,
5223
- label.vertical > [type=range] + .thumb {
5224
- transform: translate(calc(100% + 12px), -50%) scale(0.9);
6604
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range] + .thumb {
6605
+ transform: translate(calc(100% + 4px), -50%) scale(0.9);
5225
6606
  transform-origin: left center;
5226
6607
  }
5227
- .range.vertical > [type=range] + .thumb.active,
5228
- .range-field.vertical > [type=range] + .thumb.active,
5229
- label.vertical > [type=range] + .thumb.active {
5230
- transform: translate(calc(100% + 12px), -50%) scale(1);
6608
+ :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range] + .thumb.active {
6609
+ transform: translate(calc(100% + 4px), -50%) scale(1);
5231
6610
  }
5232
6611
  fieldset {
5233
6612
  --md-comp-fieldset-container-color: transparent;
@@ -5294,7 +6673,7 @@
5294
6673
  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
5295
6674
  }
5296
6675
  fieldset.filled {
5297
- --md-comp-fieldset-container-color: var(--md-sys-color-surface-variant);
6676
+ --md-comp-fieldset-container-color: var(--md-sys-color-surface-container-highest);
5298
6677
  --md-comp-fieldset-outline-color: transparent;
5299
6678
  }
5300
6679
  fieldset.outlined,
@@ -5411,7 +6790,7 @@
5411
6790
  inset: 0 auto 0 0;
5412
6791
  overflow: hidden;
5413
6792
  color: var(--md-sys-color-on-surface);
5414
- background-color: var(--md-sys-color-surface);
6793
+ background-color: var(--md-sys-color-surface-container-low);
5415
6794
  outline: none;
5416
6795
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
5417
6796
  transform: translateX(calc(-100% + var(--md-comp-nav-drawer-shift)));
@@ -5486,7 +6865,7 @@
5486
6865
  overscroll-behavior: contain;
5487
6866
  user-select: none;
5488
6867
  color: var(--md-sys-color-on-surface);
5489
- background-color: var(--md-sys-color-surface);
6868
+ background-color: var(--md-sys-color-surface-container-low);
5490
6869
  transform: translateX(-100%);
5491
6870
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
5492
6871
  }
@@ -5494,21 +6873,16 @@
5494
6873
  inset: 0 0 0 auto;
5495
6874
  transform: translateX(100%);
5496
6875
  }
5497
- .sidenav .collapsible {
5498
- margin: 0;
5499
- }
5500
6876
  .sidenav li {
5501
6877
  list-style: none;
5502
6878
  display: grid;
5503
6879
  align-content: center;
5504
6880
  }
5505
6881
  .sidenav li.active > a:not(.button, .circle, .extra) {
5506
- background-color: color-mix(in oklab, var(--md-sys-color-secondary) 10%, transparent);
5507
- }
5508
- .sidenav details > div > ul {
5509
- padding-left: 10px;
6882
+ background-color: var(--md-sys-color-secondary-container);
6883
+ color: var(--md-sys-color-on-secondary-container);
5510
6884
  }
5511
- .sidenav li > a {
6885
+ .sidenav :is(li > a, summary) {
5512
6886
  display: flex;
5513
6887
  align-items: center;
5514
6888
  margin: 0 12px;
@@ -5519,27 +6893,72 @@
5519
6893
  font-size: var(--md-comp-nav-drawer-font-size);
5520
6894
  font-weight: 500;
5521
6895
  }
5522
- .sidenav li > a:not(.button, .circle, .extra) {
5523
- color: var(--md-sys-color-on-secondary-container);
6896
+ .sidenav :is(li > a, summary) > :is(.material-symbols,
6897
+ .material-symbols-outlined,
6898
+ .material-symbols-rounded,
6899
+ .material-symbols-sharp,
6900
+ .material-icons) {
6901
+ display: inline-flex;
6902
+ flex-shrink: 0;
6903
+ margin-right: 12px;
6904
+ }
6905
+ .sidenav li > a:not(.button, .circle, .extra),
6906
+ .sidenav summary {
6907
+ color: var(--md-sys-color-on-surface-variant);
5524
6908
  }
5525
- .sidenav li > a:not(.button, .circle, .extra):hover {
6909
+ .sidenav li > a:not(.button, .circle, .extra):hover,
6910
+ .sidenav summary:hover {
5526
6911
  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
5527
6912
  }
5528
- .sidenav li > a:not(.button, .circle, .extra):focus-visible {
6913
+ .sidenav li > a:not(.button, .circle, .extra):focus-visible,
6914
+ .sidenav summary:focus-visible {
5529
6915
  outline: 3px solid var(--md-sys-color-secondary);
5530
6916
  outline-offset: 2px;
5531
6917
  }
5532
- .sidenav li > a.button, .sidenav li > a.circle, .sidenav li > a.extra {
6918
+ .sidenav li > a.button,
6919
+ .sidenav li > a.circle,
6920
+ .sidenav li > a.extra {
5533
6921
  margin: 10px 15px;
5534
6922
  }
5535
- .sidenav li > a > :is(.material-symbols,
5536
- .material-symbols-outlined,
5537
- .material-symbols-rounded,
5538
- .material-symbols-sharp,
5539
- .material-icons) {
5540
- display: inline-flex;
6923
+ .sidenav summary {
6924
+ box-sizing: border-box;
6925
+ border: 0;
6926
+ background: transparent;
6927
+ font: inherit;
6928
+ text-align: start;
6929
+ list-style: none;
6930
+ cursor: pointer;
6931
+ appearance: none;
6932
+ }
6933
+ .sidenav summary::-webkit-details-marker {
6934
+ display: none;
6935
+ }
6936
+ .sidenav summary::marker {
6937
+ content: none;
6938
+ }
6939
+ .sidenav summary::after {
6940
+ content: "expand_more";
5541
6941
  flex-shrink: 0;
5542
- margin-right: 12px;
6942
+ margin-inline-start: auto;
6943
+ font-family: var(--md-icon-font);
6944
+ font-size: 24px;
6945
+ font-style: normal;
6946
+ font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
6947
+ line-height: 1;
6948
+ -webkit-font-smoothing: antialiased;
6949
+ transition: transform var(--md-comp-nav-drawer-duration, 250ms) var(--md-comp-nav-drawer-easing, ease);
6950
+ }
6951
+ .sidenav details {
6952
+ margin: 0;
6953
+ }
6954
+ .sidenav details[open] > summary::after {
6955
+ transform: rotate(180deg);
6956
+ }
6957
+ .sidenav details > ul {
6958
+ margin: 0;
6959
+ padding: 0;
6960
+ padding-inline-start: 10px;
6961
+ list-style: none;
5543
6962
  }
5544
6963
  .sidenav .divider {
5545
6964
  margin: calc(var(--md-comp-nav-drawer-padding) * 0.5) 0 0;
@@ -5636,25 +7055,6 @@
5636
7055
  pointer-events: none;
5637
7056
  }
5638
7057
  }
5639
- .sidenav details > :not(summary) {
5640
- padding: 0;
5641
- }
5642
- .sidenav .collapsible,
5643
- .sidenav.sidenav-fixed .collapsible {
5644
- overflow: visible;
5645
- border: none;
5646
- border-radius: 0;
5647
- background: transparent;
5648
- box-shadow: none;
5649
- }
5650
- .sidenav summary,
5651
- .sidenav.sidenav-fixed summary {
5652
- border: none;
5653
- }
5654
- .sidenav details > :not(summary),
5655
- .sidenav.sidenav-fixed details > :not(summary) {
5656
- border: none;
5657
- }
5658
7058
  .progress,
5659
7059
  .preloader {
5660
7060
  --md-comp-progress-track: var(--md-sys-color-secondary-container);
@@ -6019,176 +7419,26 @@
6019
7419
  font-size: var(--md-sys-typescale-headline-small-font-size);
6020
7420
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
6021
7421
  line-height: var(--md-sys-typescale-headline-small-line-height);
6022
- letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
6023
- margin: 0 0 8px;
6024
- }
6025
- .carousel.flat .carousel-item p {
6026
- font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
6027
- font-size: var(--md-sys-typescale-body-medium-font-size);
6028
- font-weight: var(--md-sys-typescale-body-medium-font-weight);
6029
- line-height: var(--md-sys-typescale-body-medium-line-height);
6030
- letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
6031
- margin: 0;
6032
- }
6033
- @media (prefers-reduced-motion: reduce) {
6034
- .carousel.flat > .carousel-track {
6035
- scroll-behavior: auto;
6036
- }
6037
- }
6038
- .carousel.scrolling .carousel-item .lightboxed,
6039
- .carousel-item:not(.active) .lightboxed {
6040
- pointer-events: none;
6041
- }
6042
- .tap-target-wrapper {
6043
- --md-comp-tap-target-size: 480px;
6044
- --md-comp-tap-target-z: 1000;
6045
- --md-comp-tap-target-container-color: var(--md-sys-color-primary-container);
6046
- --md-comp-tap-target-supporting-color: var(--md-sys-color-on-primary-container);
6047
- --md-comp-tap-target-duration: 300ms;
6048
- --md-comp-tap-target-easing: cubic-bezier(0.65, 0, 0.35, 1);
6049
- --md-comp-tap-target-x: 50%;
6050
- --md-comp-tap-target-y: 50%;
6051
- --md-comp-tap-target-origin-size: 56px;
6052
- box-sizing: border-box;
6053
- position: fixed;
6054
- inset: auto;
6055
- left: var(--md-comp-tap-target-x);
6056
- top: var(--md-comp-tap-target-y);
6057
- translate: -50% -50%;
6058
- width: var(--md-comp-tap-target-size);
6059
- height: var(--md-comp-tap-target-size);
6060
- margin: 0;
6061
- padding: 0;
6062
- overflow: visible;
6063
- border: 0;
6064
- background: transparent;
6065
- color: var(--md-comp-tap-target-supporting-color);
6066
- visibility: hidden;
6067
- pointer-events: none;
6068
- z-index: var(--md-comp-tap-target-z);
6069
- transition: visibility 0s var(--md-comp-tap-target-duration), overlay var(--md-comp-tap-target-duration) allow-discrete, display var(--md-comp-tap-target-duration) allow-discrete;
6070
- }
6071
- .tap-target-wrapper:is(.open, :popover-open) {
6072
- visibility: visible;
6073
- pointer-events: none;
6074
- transition-delay: 0s;
6075
- }
6076
- .tap-target-wrapper:is(.open, :popover-open) .tap-target {
6077
- transform: scale(1);
6078
- opacity: 1;
6079
- }
6080
- .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::before {
6081
- transform: scale(1);
6082
- }
6083
- .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
6084
- visibility: visible;
6085
- animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
6086
- }
6087
- .tap-target {
6088
- position: absolute;
6089
- inset: 0;
6090
- display: grid;
6091
- box-sizing: border-box;
6092
- width: 100%;
6093
- height: 100%;
6094
- overflow: hidden;
6095
- border-radius: 50%;
6096
- background-color: var(--md-comp-tap-target-container-color);
6097
- color: var(--md-comp-tap-target-supporting-color);
6098
- opacity: 0;
6099
- transform: scale(0);
6100
- transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing), opacity var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
6101
- box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
6102
- font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
6103
- font-size: var(--md-sys-typescale-body-medium-font-size);
6104
- font-weight: var(--md-sys-typescale-body-medium-font-weight);
6105
- line-height: var(--md-sys-typescale-body-medium-line-height);
6106
- letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
6107
- }
6108
- .tap-target-content {
6109
- position: relative;
6110
- z-index: 1;
6111
- display: grid;
6112
- align-content: start;
6113
- gap: 8px;
6114
- box-sizing: border-box;
6115
- max-width: min(18rem, 52%);
6116
- padding: calc(var(--md-comp-tap-target-origin-size) * 0.5 + 20px);
6117
- pointer-events: auto;
6118
- }
6119
- .tap-target-content > :is(h1, h2, h3, h4, h5, h6) {
6120
- margin: 0;
6121
- color: inherit;
6122
- font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
6123
- font-size: var(--md-sys-typescale-title-medium-font-size);
6124
- font-weight: var(--md-sys-typescale-title-medium-font-weight);
6125
- line-height: var(--md-sys-typescale-title-medium-line-height);
6126
- letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
6127
- }
6128
- .tap-target-content > p {
6129
- margin: 0;
6130
- color: inherit;
6131
- }
6132
- .tap-target-wrapper[data-edge^=top] .tap-target-content {
6133
- align-self: end;
6134
- }
6135
- .tap-target-wrapper[data-edge^=bottom] .tap-target-content {
6136
- align-self: start;
6137
- }
6138
- .tap-target-wrapper[data-edge$=left] .tap-target-content {
6139
- justify-self: end;
6140
- }
6141
- .tap-target-wrapper[data-edge$=right] .tap-target-content {
6142
- justify-self: start;
6143
- }
6144
- .tap-target-wrapper[data-edge$=center] .tap-target-content {
6145
- justify-self: center;
6146
- max-width: min(22rem, 80%);
6147
- text-align: center;
6148
- }
6149
- .tap-target-wave {
6150
- position: absolute;
6151
- top: 50%;
6152
- left: 50%;
6153
- z-index: 0;
6154
- width: calc(var(--md-comp-tap-target-origin-size) * 2);
6155
- height: calc(var(--md-comp-tap-target-origin-size) * 2);
6156
- translate: -50% -50%;
6157
- border-radius: 50%;
6158
- pointer-events: none;
6159
- }
6160
- .tap-target-wave::before, .tap-target-wave::after {
6161
- content: "";
6162
- position: absolute;
6163
- inset: 0;
6164
- display: block;
6165
- border-radius: 50%;
6166
- background-color: var(--md-sys-color-surface);
6167
- }
6168
- .tap-target-wave::before {
6169
- transform: scale(0);
6170
- transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
6171
- }
6172
- .tap-target-wave::after {
6173
- visibility: hidden;
6174
- z-index: -1;
6175
- }
6176
- .tap-target-origin {
6177
- z-index: calc(var(--md-comp-tap-target-z, 1000) + 2);
7422
+ letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
7423
+ margin: 0 0 8px;
6178
7424
  }
6179
- @media (width < 601px) {
6180
- .tap-target-wrapper {
6181
- --md-comp-tap-target-size: 360px;
6182
- }
7425
+ .carousel.flat .carousel-item p {
7426
+ font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
7427
+ font-size: var(--md-sys-typescale-body-medium-font-size);
7428
+ font-weight: var(--md-sys-typescale-body-medium-font-weight);
7429
+ line-height: var(--md-sys-typescale-body-medium-line-height);
7430
+ letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
7431
+ margin: 0;
6183
7432
  }
6184
7433
  @media (prefers-reduced-motion: reduce) {
6185
- .tap-target-wrapper {
6186
- --md-comp-tap-target-duration: 0s;
6187
- }
6188
- .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
6189
- animation: none;
7434
+ .carousel.flat > .carousel-track {
7435
+ scroll-behavior: auto;
6190
7436
  }
6191
7437
  }
7438
+ .carousel.scrolling .carousel-item .lightboxed,
7439
+ .carousel-item:not(.active) .lightboxed {
7440
+ pointer-events: none;
7441
+ }
6192
7442
  .pulse {
6193
7443
  overflow: visible;
6194
7444
  position: relative;
@@ -6878,6 +8128,298 @@
6878
8128
  margin: 0;
6879
8129
  padding: 0;
6880
8130
  }
8131
+ .panes,
8132
+ .pane-layout,
8133
+ .list-detail,
8134
+ .supporting-pane-layout {
8135
+ --md-comp-pane-gap: 24px;
8136
+ --md-comp-pane-divider-color: var(--md-sys-color-outline-variant);
8137
+ --md-comp-pane-container-color: var(--md-sys-color-surface);
8138
+ --md-comp-pane-container-shape: 0px;
8139
+ --md-comp-pane-list-width: 360px;
8140
+ --md-comp-pane-supporting-width: 360px;
8141
+ --md-comp-pane-primary-min-width: 360px;
8142
+ box-sizing: border-box;
8143
+ display: grid;
8144
+ width: 100%;
8145
+ height: 100%;
8146
+ min-height: 0;
8147
+ margin: 0;
8148
+ padding: 0;
8149
+ container-type: inline-size;
8150
+ background-color: var(--md-comp-pane-container-color);
8151
+ color: var(--md-sys-color-on-surface);
8152
+ grid-template-columns: 1fr;
8153
+ gap: 0;
8154
+ }
8155
+ .panes > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8156
+ .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8157
+ .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8158
+ .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
8159
+ display: none;
8160
+ min-width: 0;
8161
+ min-height: 0;
8162
+ overflow: hidden;
8163
+ }
8164
+ .panes > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active,
8165
+ .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active,
8166
+ .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active,
8167
+ .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active {
8168
+ display: flex;
8169
+ }
8170
+ .panes:not(:has(> :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active)) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):first-child,
8171
+ .pane-layout:not(:has(> :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active)) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):first-child,
8172
+ .list-detail:not(:has(> :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active)) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):first-child,
8173
+ .supporting-pane-layout:not(:has(> :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active)) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):first-child {
8174
+ display: flex;
8175
+ }
8176
+ @media (width >= 840px) {
8177
+ .panes,
8178
+ .pane-layout,
8179
+ .list-detail,
8180
+ .supporting-pane-layout {
8181
+ grid-template-columns: var(--md-comp-pane-list-width) 1fr;
8182
+ gap: 0;
8183
+ }
8184
+ .panes > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8185
+ .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8186
+ .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8187
+ .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
8188
+ display: flex !important;
8189
+ }
8190
+ }
8191
+ @container (min-width: 840px) {
8192
+ .panes,
8193
+ .pane-layout,
8194
+ .list-detail,
8195
+ .supporting-pane-layout {
8196
+ grid-template-columns: var(--md-comp-pane-list-width) 1fr;
8197
+ gap: 0;
8198
+ }
8199
+ .panes > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8200
+ .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8201
+ .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8202
+ .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
8203
+ display: flex !important;
8204
+ }
8205
+ }
8206
+ @media (width >= 840px) {
8207
+ .supporting-pane-layout,
8208
+ .panes.supporting {
8209
+ grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
8210
+ }
8211
+ }
8212
+ @container (min-width: 840px) {
8213
+ .supporting-pane-layout,
8214
+ .panes.supporting {
8215
+ grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
8216
+ }
8217
+ }
8218
+ @media (width >= 840px) {
8219
+ .supporting-pane-layout.start, .supporting-pane-layout.left,
8220
+ .panes.supporting.start,
8221
+ .panes.supporting.left {
8222
+ grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
8223
+ }
8224
+ }
8225
+ @container (min-width: 840px) {
8226
+ .supporting-pane-layout.start, .supporting-pane-layout.left,
8227
+ .panes.supporting.start,
8228
+ .panes.supporting.left {
8229
+ grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
8230
+ }
8231
+ }
8232
+ @media (width >= 840px) {
8233
+ .panes.equal,
8234
+ .pane-layout.equal {
8235
+ grid-template-columns: 1fr 1fr;
8236
+ }
8237
+ }
8238
+ @container (min-width: 840px) {
8239
+ .panes.equal,
8240
+ .pane-layout.equal {
8241
+ grid-template-columns: 1fr 1fr;
8242
+ }
8243
+ }
8244
+ @media (width >= 1200px) {
8245
+ .panes.three-pane,
8246
+ .pane-layout.three-pane {
8247
+ grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
8248
+ }
8249
+ }
8250
+ @container (min-width: 1200px) {
8251
+ .panes.three-pane,
8252
+ .pane-layout.three-pane {
8253
+ grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
8254
+ }
8255
+ }
8256
+ .panes.separated,
8257
+ .panes.floating,
8258
+ .pane-layout.separated,
8259
+ .pane-layout.floating {
8260
+ --md-comp-pane-container-shape: 16px;
8261
+ --md-comp-pane-container-color: transparent;
8262
+ gap: var(--md-comp-pane-gap);
8263
+ padding: var(--md-comp-pane-gap);
8264
+ }
8265
+ .panes.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8266
+ .panes.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8267
+ .pane-layout.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
8268
+ .pane-layout.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
8269
+ border: none;
8270
+ border-radius: var(--md-comp-pane-container-shape);
8271
+ background-color: var(--md-sys-color-surface-container-low);
8272
+ box-shadow: none !important;
8273
+ }
8274
+ .panes.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
8275
+ .panes.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
8276
+ .pane-layout.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
8277
+ .pane-layout.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated {
8278
+ background-color: var(--md-sys-color-surface-container-low);
8279
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
8280
+ }
8281
+ .panes.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).outlined,
8282
+ .panes.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).outlined,
8283
+ .pane-layout.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).outlined,
8284
+ .pane-layout.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).outlined {
8285
+ background-color: var(--md-sys-color-surface);
8286
+ border: 1px solid var(--md-comp-pane-divider-color);
8287
+ }
8288
+ @media (width >= 840px) {
8289
+ :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
8290
+ border-inline-end: 1px solid var(--md-comp-pane-divider-color);
8291
+ }
8292
+ }
8293
+ @container (min-width: 840px) {
8294
+ :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
8295
+ border-inline-end: 1px solid var(--md-comp-pane-divider-color);
8296
+ }
8297
+ }
8298
+ .pane,
8299
+ .list-pane,
8300
+ .primary-pane,
8301
+ .detail-pane,
8302
+ .supporting-pane {
8303
+ box-sizing: border-box;
8304
+ flex-direction: column;
8305
+ position: relative;
8306
+ width: 100%;
8307
+ height: 100%;
8308
+ min-width: 0;
8309
+ min-height: 0;
8310
+ }
8311
+ .pane > :is(header, .pane-header),
8312
+ .list-pane > :is(header, .pane-header),
8313
+ .primary-pane > :is(header, .pane-header),
8314
+ .detail-pane > :is(header, .pane-header),
8315
+ .supporting-pane > :is(header, .pane-header) {
8316
+ display: flex;
8317
+ align-items: center;
8318
+ gap: 12px;
8319
+ flex: 0 0 auto;
8320
+ box-sizing: border-box;
8321
+ min-height: 64px;
8322
+ margin: 0;
8323
+ padding: 8px 16px;
8324
+ background: none;
8325
+ }
8326
+ .pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title),
8327
+ .list-pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title),
8328
+ .primary-pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title),
8329
+ .detail-pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title),
8330
+ .supporting-pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title) {
8331
+ flex: 1 1 auto;
8332
+ min-width: 0;
8333
+ margin: 0;
8334
+ padding: 0;
8335
+ color: var(--md-sys-color-on-surface);
8336
+ font-family: var(--md-sys-typescale-title-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
8337
+ font-size: var(--md-sys-typescale-title-large-font-size);
8338
+ font-weight: var(--md-sys-typescale-title-large-font-weight);
8339
+ line-height: var(--md-sys-typescale-title-large-line-height);
8340
+ letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
8341
+ white-space: nowrap;
8342
+ overflow: hidden;
8343
+ text-overflow: ellipsis;
8344
+ }
8345
+ .pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child),
8346
+ .list-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child),
8347
+ .primary-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child),
8348
+ .detail-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child),
8349
+ .supporting-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child) {
8350
+ flex: 0 0 48px;
8351
+ box-sizing: border-box;
8352
+ width: 48px;
8353
+ height: 48px;
8354
+ min-width: 48px;
8355
+ padding: 0;
8356
+ border: none;
8357
+ border-radius: 50%;
8358
+ background-color: transparent;
8359
+ color: var(--md-sys-color-on-surface-variant);
8360
+ box-shadow: none;
8361
+ }
8362
+ .pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child) > i,
8363
+ .list-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child) > i,
8364
+ .primary-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child) > i,
8365
+ .detail-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child) > i,
8366
+ .supporting-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child) > i {
8367
+ font-size: 24px;
8368
+ width: 24px;
8369
+ height: 24px;
8370
+ line-height: 24px;
8371
+ }
8372
+ .pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):hover,
8373
+ .list-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):hover,
8374
+ .primary-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):hover,
8375
+ .detail-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):hover,
8376
+ .supporting-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):hover {
8377
+ background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
8378
+ }
8379
+ .pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):focus-visible,
8380
+ .list-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):focus-visible,
8381
+ .primary-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):focus-visible,
8382
+ .detail-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):focus-visible,
8383
+ .supporting-pane > :is(header, .pane-header) > :is(button, a.button):has(> i:only-child):focus-visible {
8384
+ outline: 3px solid var(--md-sys-color-secondary);
8385
+ outline-offset: 2px;
8386
+ }
8387
+ .pane > :is(main, .pane-content, .pane-body, div:not(.pane-header, .pane-footer)),
8388
+ .list-pane > :is(main, .pane-content, .pane-body, div:not(.pane-header, .pane-footer)),
8389
+ .primary-pane > :is(main, .pane-content, .pane-body, div:not(.pane-header, .pane-footer)),
8390
+ .detail-pane > :is(main, .pane-content, .pane-body, div:not(.pane-header, .pane-footer)),
8391
+ .supporting-pane > :is(main, .pane-content, .pane-body, div:not(.pane-header, .pane-footer)) {
8392
+ flex: 1 1 auto;
8393
+ min-height: 0;
8394
+ overflow-y: auto;
8395
+ overscroll-behavior: contain;
8396
+ padding: 16px 24px;
8397
+ }
8398
+ .pane > .list,
8399
+ .list-pane > .list,
8400
+ .primary-pane > .list,
8401
+ .detail-pane > .list,
8402
+ .supporting-pane > .list {
8403
+ flex: 1 1 auto;
8404
+ min-height: 0;
8405
+ overflow-y: auto;
8406
+ overscroll-behavior: contain;
8407
+ margin: 0;
8408
+ }
8409
+ .pane > :is(footer, .pane-footer, nav:last-child),
8410
+ .list-pane > :is(footer, .pane-footer, nav:last-child),
8411
+ .primary-pane > :is(footer, .pane-footer, nav:last-child),
8412
+ .detail-pane > :is(footer, .pane-footer, nav:last-child),
8413
+ .supporting-pane > :is(footer, .pane-footer, nav:last-child) {
8414
+ display: flex;
8415
+ align-items: center;
8416
+ gap: 8px;
8417
+ flex: 0 0 auto;
8418
+ box-sizing: border-box;
8419
+ min-height: 56px;
8420
+ padding: 8px 16px;
8421
+ border-block-start: 1px solid var(--md-comp-pane-divider-color);
8422
+ }
6881
8423
  }
6882
8424
  @layer utilities {
6883
8425
  .primary {
@@ -6904,6 +8446,30 @@
6904
8446
  .on-primary-container-text {
6905
8447
  color: var(--md-sys-color-on-primary-container);
6906
8448
  }
8449
+ .primary-fixed {
8450
+ background-color: var(--md-sys-color-primary-fixed);
8451
+ }
8452
+ .primary-fixed-text {
8453
+ color: var(--md-sys-color-primary-fixed);
8454
+ }
8455
+ .primary-fixed-dim {
8456
+ background-color: var(--md-sys-color-primary-fixed-dim);
8457
+ }
8458
+ .primary-fixed-dim-text {
8459
+ color: var(--md-sys-color-primary-fixed-dim);
8460
+ }
8461
+ .on-primary-fixed {
8462
+ background-color: var(--md-sys-color-on-primary-fixed);
8463
+ }
8464
+ .on-primary-fixed-text {
8465
+ color: var(--md-sys-color-on-primary-fixed);
8466
+ }
8467
+ .on-primary-fixed-variant {
8468
+ background-color: var(--md-sys-color-on-primary-fixed-variant);
8469
+ }
8470
+ .on-primary-fixed-variant-text {
8471
+ color: var(--md-sys-color-on-primary-fixed-variant);
8472
+ }
6907
8473
  .secondary {
6908
8474
  background-color: var(--md-sys-color-secondary);
6909
8475
  }
@@ -6928,6 +8494,30 @@
6928
8494
  .on-secondary-container-text {
6929
8495
  color: var(--md-sys-color-on-secondary-container);
6930
8496
  }
8497
+ .secondary-fixed {
8498
+ background-color: var(--md-sys-color-secondary-fixed);
8499
+ }
8500
+ .secondary-fixed-text {
8501
+ color: var(--md-sys-color-secondary-fixed);
8502
+ }
8503
+ .secondary-fixed-dim {
8504
+ background-color: var(--md-sys-color-secondary-fixed-dim);
8505
+ }
8506
+ .secondary-fixed-dim-text {
8507
+ color: var(--md-sys-color-secondary-fixed-dim);
8508
+ }
8509
+ .on-secondary-fixed {
8510
+ background-color: var(--md-sys-color-on-secondary-fixed);
8511
+ }
8512
+ .on-secondary-fixed-text {
8513
+ color: var(--md-sys-color-on-secondary-fixed);
8514
+ }
8515
+ .on-secondary-fixed-variant {
8516
+ background-color: var(--md-sys-color-on-secondary-fixed-variant);
8517
+ }
8518
+ .on-secondary-fixed-variant-text {
8519
+ color: var(--md-sys-color-on-secondary-fixed-variant);
8520
+ }
6931
8521
  .tertiary {
6932
8522
  background-color: var(--md-sys-color-tertiary);
6933
8523
  }
@@ -6952,6 +8542,30 @@
6952
8542
  .on-tertiary-container-text {
6953
8543
  color: var(--md-sys-color-on-tertiary-container);
6954
8544
  }
8545
+ .tertiary-fixed {
8546
+ background-color: var(--md-sys-color-tertiary-fixed);
8547
+ }
8548
+ .tertiary-fixed-text {
8549
+ color: var(--md-sys-color-tertiary-fixed);
8550
+ }
8551
+ .tertiary-fixed-dim {
8552
+ background-color: var(--md-sys-color-tertiary-fixed-dim);
8553
+ }
8554
+ .tertiary-fixed-dim-text {
8555
+ color: var(--md-sys-color-tertiary-fixed-dim);
8556
+ }
8557
+ .on-tertiary-fixed {
8558
+ background-color: var(--md-sys-color-on-tertiary-fixed);
8559
+ }
8560
+ .on-tertiary-fixed-text {
8561
+ color: var(--md-sys-color-on-tertiary-fixed);
8562
+ }
8563
+ .on-tertiary-fixed-variant {
8564
+ background-color: var(--md-sys-color-on-tertiary-fixed-variant);
8565
+ }
8566
+ .on-tertiary-fixed-variant-text {
8567
+ color: var(--md-sys-color-on-tertiary-fixed-variant);
8568
+ }
6955
8569
  .error {
6956
8570
  background-color: var(--md-sys-color-error);
6957
8571
  }
@@ -6976,18 +8590,6 @@
6976
8590
  .on-error-container-text {
6977
8591
  color: var(--md-sys-color-on-error-container);
6978
8592
  }
6979
- .background {
6980
- background-color: var(--md-sys-color-background);
6981
- }
6982
- .background-text {
6983
- color: var(--md-sys-color-background);
6984
- }
6985
- .on-background {
6986
- background-color: var(--md-sys-color-on-background);
6987
- }
6988
- .on-background-text {
6989
- color: var(--md-sys-color-on-background);
6990
- }
6991
8593
  .surface {
6992
8594
  background-color: var(--md-sys-color-surface);
6993
8595
  }
@@ -7000,29 +8602,65 @@
7000
8602
  .on-surface-text {
7001
8603
  color: var(--md-sys-color-on-surface);
7002
8604
  }
7003
- .surface-variant {
7004
- background-color: var(--md-sys-color-surface-variant);
7005
- }
7006
- .surface-variant-text {
7007
- color: var(--md-sys-color-surface-variant);
7008
- }
7009
8605
  .on-surface-variant {
7010
8606
  background-color: var(--md-sys-color-on-surface-variant);
7011
8607
  }
7012
8608
  .on-surface-variant-text {
7013
8609
  color: var(--md-sys-color-on-surface-variant);
7014
8610
  }
8611
+ .surface-dim {
8612
+ background-color: var(--md-sys-color-surface-dim);
8613
+ }
8614
+ .surface-dim-text {
8615
+ color: var(--md-sys-color-surface-dim);
8616
+ }
8617
+ .surface-bright {
8618
+ background-color: var(--md-sys-color-surface-bright);
8619
+ }
8620
+ .surface-bright-text {
8621
+ color: var(--md-sys-color-surface-bright);
8622
+ }
8623
+ .surface-container-lowest {
8624
+ background-color: var(--md-sys-color-surface-container-lowest);
8625
+ }
8626
+ .surface-container-lowest-text {
8627
+ color: var(--md-sys-color-surface-container-lowest);
8628
+ }
8629
+ .surface-container-low {
8630
+ background-color: var(--md-sys-color-surface-container-low);
8631
+ }
8632
+ .surface-container-low-text {
8633
+ color: var(--md-sys-color-surface-container-low);
8634
+ }
8635
+ .surface-container {
8636
+ background-color: var(--md-sys-color-surface-container);
8637
+ }
8638
+ .surface-container-text {
8639
+ color: var(--md-sys-color-surface-container);
8640
+ }
8641
+ .surface-container-high {
8642
+ background-color: var(--md-sys-color-surface-container-high);
8643
+ }
8644
+ .surface-container-high-text {
8645
+ color: var(--md-sys-color-surface-container-high);
8646
+ }
8647
+ .surface-container-highest {
8648
+ background-color: var(--md-sys-color-surface-container-highest);
8649
+ }
8650
+ .surface-container-highest-text {
8651
+ color: var(--md-sys-color-surface-container-highest);
8652
+ }
7015
8653
  .outline {
7016
8654
  background-color: var(--md-sys-color-outline);
7017
8655
  }
7018
8656
  .outline-text {
7019
8657
  color: var(--md-sys-color-outline);
7020
8658
  }
7021
- .inverse-on-surface {
7022
- background-color: var(--md-sys-color-inverse-on-surface);
8659
+ .outline-variant {
8660
+ background-color: var(--md-sys-color-outline-variant);
7023
8661
  }
7024
- .inverse-on-surface-text {
7025
- color: var(--md-sys-color-inverse-on-surface);
8662
+ .outline-variant-text {
8663
+ color: var(--md-sys-color-outline-variant);
7026
8664
  }
7027
8665
  .inverse-surface {
7028
8666
  background-color: var(--md-sys-color-inverse-surface);
@@ -7030,35 +8668,53 @@
7030
8668
  .inverse-surface-text {
7031
8669
  color: var(--md-sys-color-inverse-surface);
7032
8670
  }
8671
+ .inverse-on-surface {
8672
+ background-color: var(--md-sys-color-inverse-on-surface);
8673
+ }
8674
+ .inverse-on-surface-text {
8675
+ color: var(--md-sys-color-inverse-on-surface);
8676
+ }
7033
8677
  .inverse-primary {
7034
8678
  background-color: var(--md-sys-color-inverse-primary);
7035
8679
  }
7036
8680
  .inverse-primary-text {
7037
8681
  color: var(--md-sys-color-inverse-primary);
7038
8682
  }
8683
+ .scrim {
8684
+ background-color: var(--md-sys-color-scrim);
8685
+ }
8686
+ .scrim-text {
8687
+ color: var(--md-sys-color-scrim);
8688
+ }
7039
8689
  .shadow {
7040
8690
  background-color: var(--md-sys-color-shadow);
7041
8691
  }
7042
8692
  .shadow-text {
7043
8693
  color: var(--md-sys-color-shadow);
7044
8694
  }
7045
- .surface-tint {
7046
- background-color: var(--md-sys-color-surface-tint);
8695
+ .background {
8696
+ background-color: var(--md-sys-color-background);
7047
8697
  }
7048
- .surface-tint-text {
7049
- color: var(--md-sys-color-surface-tint);
8698
+ .background-text {
8699
+ color: var(--md-sys-color-background);
7050
8700
  }
7051
- .outline-variant {
7052
- background-color: var(--md-sys-color-outline-variant);
8701
+ .on-background {
8702
+ background-color: var(--md-sys-color-on-background);
7053
8703
  }
7054
- .outline-variant-text {
7055
- color: var(--md-sys-color-outline-variant);
8704
+ .on-background-text {
8705
+ color: var(--md-sys-color-on-background);
7056
8706
  }
7057
- .scrim {
7058
- background-color: var(--md-sys-color-scrim);
8707
+ .surface-variant {
8708
+ background-color: var(--md-sys-color-surface-variant);
7059
8709
  }
7060
- .scrim-text {
7061
- color: var(--md-sys-color-scrim);
8710
+ .surface-variant-text {
8711
+ color: var(--md-sys-color-surface-variant);
8712
+ }
8713
+ .surface-tint {
8714
+ background-color: var(--md-sys-color-surface-tint);
8715
+ }
8716
+ .surface-tint-text {
8717
+ color: var(--md-sys-color-surface-tint);
7062
8718
  }
7063
8719
  .display-large {
7064
8720
  font-family: var(--md-sys-typescale-display-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -7620,11 +9276,21 @@
7620
9276
  display: none !important;
7621
9277
  }
7622
9278
  }
9279
+ @media (width >= 1601px) {
9280
+ .hide-on-xxl-only {
9281
+ display: none !important;
9282
+ }
9283
+ }
7623
9284
  @media (width >= 1201px) {
7624
9285
  .show-on-extra-large {
7625
9286
  display: block !important;
7626
9287
  }
7627
9288
  }
9289
+ @media (width >= 1601px) {
9290
+ .show-on-xxl {
9291
+ display: block !important;
9292
+ }
9293
+ }
7628
9294
  @media (width >= 993px) {
7629
9295
  .show-on-large {
7630
9296
  display: block !important;