material-inspired-component-library 9.1.1 → 9.1.2

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 (61) hide show
  1. package/components/appbar/index.scss +1 -1
  2. package/components/badge/README.md +43 -12
  3. package/components/badge/index.scss +15 -21
  4. package/components/bottomsheet/README.md +53 -22
  5. package/components/bottomsheet/index.scss +61 -44
  6. package/components/button/_shared.scss +6 -6
  7. package/components/card/README.md +1 -1
  8. package/components/checkbox/index.scss +10 -10
  9. package/components/datepicker/README.md +184 -59
  10. package/components/datepicker/index.scss +84 -20
  11. package/components/dialog/README.md +151 -56
  12. package/components/dialog/index.scss +50 -62
  13. package/components/iconbutton/index.scss +5 -5
  14. package/components/list/index.scss +6 -6
  15. package/components/menu/index.scss +13 -13
  16. package/components/navigationbar/index.scss +7 -1
  17. package/components/navigationrail/index.scss +27 -22
  18. package/components/radio/index.scss +8 -8
  19. package/components/select/index.scss +3 -3
  20. package/components/sidesheet/README.md +90 -37
  21. package/components/sidesheet/index.scss +51 -41
  22. package/components/slider/README.md +35 -9
  23. package/components/slider/index.scss +182 -153
  24. package/components/snackbar/README.md +43 -25
  25. package/components/snackbar/index.scss +22 -27
  26. package/components/stepper/index.scss +4 -4
  27. package/components/switch/index.scss +13 -13
  28. package/components/timepicker/README.md +131 -55
  29. package/components/timepicker/index.scss +46 -25
  30. package/dist/appbar.css +1 -1
  31. package/dist/badge.css +1 -1
  32. package/dist/bottomsheet.css +1 -1
  33. package/dist/bottomsheet.js +1 -1
  34. package/dist/button.css +1 -1
  35. package/dist/checkbox.css +1 -1
  36. package/dist/chip.css +1 -1
  37. package/dist/datepicker.css +1 -1
  38. package/dist/datepicker.js +1 -1
  39. package/dist/dialog.css +1 -1
  40. package/dist/iconbutton.css +1 -1
  41. package/dist/layout.css +1 -1
  42. package/dist/list.css +1 -1
  43. package/dist/menu.css +1 -1
  44. package/dist/micl.css +1 -1
  45. package/dist/micl.js +1 -1
  46. package/dist/navigationbar.css +1 -1
  47. package/dist/navigationrail.css +1 -1
  48. package/dist/radio.css +1 -1
  49. package/dist/select.css +1 -1
  50. package/dist/sidesheet.css +1 -1
  51. package/dist/slider.css +1 -1
  52. package/dist/slider.js +1 -1
  53. package/dist/snackbar.css +1 -1
  54. package/dist/snackbar.js +1 -1
  55. package/dist/stepper.css +1 -1
  56. package/dist/switch.css +1 -1
  57. package/dist/timepicker.css +1 -1
  58. package/dist/timepicker.js +1 -1
  59. package/foundations/layout/_tokens.scss +55 -0
  60. package/foundations/layout/index.scss +2 -35
  61. package/package.json +1 -1
package/components/timepicker/index.scss CHANGED
@@ -40,6 +40,12 @@
40
40
  @include typography.scale('body-small');
41
41
  @include typography.scale('label-medium');
42
42
 
43
+ @property --micl-angle {
44
+ syntax: '<angle>';
45
+ inherits: true;
46
+ initial-value: 0deg;
47
+ }
48
+
43
49
  // State layer background shared by the time fields and the AM/PM toggles.
44
50
  // The state layer color follows the label color of the current state.
45
51
  %statelayer-background {
@@ -49,7 +55,7 @@
49
55
  background-repeat: no-repeat;
50
56
  background-size: 100%;
51
57
  -webkit-tap-highlight-color: transparent;
52
- transition: --statelayer-opacity var(--md-comp-time-picker-motion-duration) linear;
58
+ transition: --statelayer-opacity var(--_timepicker-motion-duration) linear;
53
59
 
54
60
  &:hover {
55
61
  --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
@@ -63,7 +69,7 @@
63
69
  }
64
70
 
65
71
  dialog.micl-dialog.micl-timepicker {
66
- --md-comp-time-picker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
72
+ --_timepicker-motion-duration: var(--md-comp-time-picker-motion-duration, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
67
73
 
68
74
  // Internal aliases: each public token is referenced from many descendants.
69
75
  // The keyboard-input mode uses the (smaller) time-input defaults; the
@@ -118,7 +124,7 @@ dialog.micl-dialog.micl-timepicker {
118
124
  }
119
125
  .micl-dialog__content {
120
126
  grid-template-areas:
121
- "x x x dial"
127
+ ". . . dial"
122
128
  "hr sep min dial"
123
129
  "per per per dial";
124
130
  grid-template-rows: 72px var(--_input-height) auto;
@@ -154,6 +160,21 @@ dialog.micl-dialog.micl-timepicker {
154
160
  display: none;
155
161
  }
156
162
  }
163
+
164
+ // A clock face must never mirror, and a time is written hour-first in every
165
+ // locale, so the whole selector runs ltr and only the labels follow the page.
166
+ &:dir(rtl) .micl-dialog__content {
167
+ direction: ltr;
168
+
169
+ .micl-timepicker__supporting-text-hour,
170
+ .micl-timepicker__supporting-text-minute {
171
+ direction: rtl;
172
+ }
173
+ }
174
+
175
+ @media (prefers-reduced-motion: reduce) {
176
+ --_timepicker-motion-duration: 0ms;
177
+ }
157
178
  }
158
179
 
159
180
  .micl-timepicker {
@@ -173,16 +194,7 @@ dialog.micl-dialog.micl-timepicker {
173
194
  background-color: var(--md-comp-time-picker-time-selector-unselected-container-color, var(--md-sys-color-surface-container-highest));
174
195
  color: var(--md-comp-time-picker-time-selector-unselected-label-text-color, var(--md-sys-color-on-surface));
175
196
  text-align: center;
176
- user-select: none;
177
- -moz-appearance: textfield;
178
197
 
179
- &::-webkit-inner-spin-button,
180
- &::-webkit-outer-spin-button {
181
- -webkit-appearance: none;
182
- }
183
- &::selection {
184
- background-color: transparent;
185
- }
186
198
  &.micl-timepicker--selected {
187
199
  background-color: var(--md-comp-time-picker-time-selector-selected-container-color, var(--md-sys-color-primary-container));
188
200
  color: var(--md-comp-time-picker-time-selector-selected-label-text-color, var(--md-sys-color-on-primary-container));
@@ -191,11 +203,13 @@ dialog.micl-dialog.micl-timepicker {
191
203
  }
192
204
  input[name=hour] {
193
205
  grid-area: hr;
194
- justify-self: flex-end;
206
+ justify-self: end;
195
207
  }
196
208
  input[name=minute] {
197
209
  grid-area: min;
198
210
  }
211
+ // In dial mode the fields are read-only read-outs: no caret, no selection.
212
+ // The keyboard mode needs both, so that the select-on-focus is visible.
199
213
  &:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) {
200
214
  input[name=hour],
201
215
  input[name=minute] {
@@ -203,6 +217,11 @@ dialog.micl-dialog.micl-timepicker {
203
217
 
204
218
  border: none;
205
219
  cursor: pointer;
220
+ user-select: none;
221
+
222
+ &::selection {
223
+ background-color: transparent;
224
+ }
206
225
  }
207
226
  }
208
227
  &:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden))) {
@@ -250,8 +269,10 @@ dialog.micl-dialog.micl-timepicker {
250
269
  background-color: transparent;
251
270
  cursor: pointer;
252
271
 
272
+ // The runtime names the radios with the day periods of the user's locale,
273
+ // so the accessible name is also the visible label.
253
274
  &::before {
254
- content: "AM";
275
+ content: attr(aria-label);
255
276
  position: absolute;
256
277
  inline-size: 100%;
257
278
  text-align: center;
@@ -273,10 +294,6 @@ dialog.micl-dialog.micl-timepicker {
273
294
  border-block-start-width: 0px;
274
295
  border-end-start-radius: var(--md-sys-shape-corner-small);
275
296
  border-end-end-radius: var(--md-sys-shape-corner-small);
276
-
277
- &::before {
278
- content: "PM";
279
- }
280
297
  }
281
298
  }
282
299
 
@@ -295,7 +312,7 @@ dialog.micl-dialog.micl-timepicker {
295
312
  .micl-timepicker .micl-timepicker__dial {
296
313
  --micl-dial-radius: calc((var(--_dial-size) - var(--_target)) / 2);
297
314
  --micl-hour-radius: var(--micl-dial-radius);
298
- --micl-angle: 0deg;
315
+ --micl-track-radius: var(--micl-dial-radius);
299
316
 
300
317
  position: relative;
301
318
  grid-area: dial;
@@ -304,10 +321,8 @@ dialog.micl-dialog.micl-timepicker {
304
321
  inline-size: var(--_dial-size);
305
322
  margin-block: 36px 0;
306
323
  margin-inline: 0;
307
- outline: none;
308
324
  border-radius: var(--md-sys-shape-corner-full);
309
325
  background-color: var(--md-comp-time-picker-clock-dial-color, var(--md-sys-color-surface-container-highest));
310
- list-style-type: none;
311
326
  touch-action: none;
312
327
 
313
328
  data.micl-timepicker__dial-inner {
@@ -331,7 +346,6 @@ dialog.micl-dialog.micl-timepicker {
331
346
  inline-size: var(--_target);
332
347
  inset-inline-start: var(--micl-a);
333
348
  inset-block-start: var(--micl-b);
334
- outline: none;
335
349
  border-radius: var(--md-sys-shape-corner-full);
336
350
  color: var(--md-comp-time-picker-clock-dial-unselected-label-text-color, var(--md-sys-color-on-surface));
337
351
  cursor: pointer;
@@ -357,7 +371,8 @@ dialog.micl-dialog.micl-timepicker {
357
371
  }
358
372
 
359
373
  .micl-timepicker__track {
360
- --micl-track-length: 92px;
374
+ // Stops just inside the selected handle, on either ring.
375
+ --micl-track-length: calc(var(--micl-track-radius) - 12px);
361
376
 
362
377
  position: relative;
363
378
  display: block;
@@ -376,14 +391,20 @@ dialog.micl-dialog.micl-timepicker {
376
391
  display: block;
377
392
  block-size: var(--_center-size);
378
393
  inline-size: var(--_center-size);
379
- inset-block-end: -3px;
380
- inset-inline-start: -3px;
394
+ inset-block-end: calc((var(--_center-size) - var(--_track-width)) / -2);
395
+ inset-inline-start: calc((var(--_center-size) - var(--_track-width)) / -2);
381
396
  border-radius: var(--md-sys-shape-corner-full);
382
397
  background-color: var(--md-comp-time-picker-clock-dial-selector-center-container-color, var(--md-sys-color-primary));
383
398
  }
384
399
  }
385
400
  }
386
401
 
402
+ // Only an open picker sweeps: the value the invoker seeds on beforetoggle lands
403
+ // before the dialog opens, so it snaps into place instead of spinning from noon.
404
+ .micl-timepicker[open] .micl-timepicker__dial {
405
+ transition: --micl-angle var(--_timepicker-motion-duration) motion.$md-sys-motion-easing-standard;
406
+ }
407
+
387
408
  .micl-timepicker__dial--hidden {
388
409
  display: none !important;
389
410
  }
package/dist/appbar.css CHANGED
@@ -1 +1 @@
1
- :root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-none: 0px}:root{--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0}:root{--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem}.micl-appbar{--_height: 64px;--_padding-block-start: 0px;--_padding-block-end: 0px;--_padding-inline: 0px;box-sizing:border-box;display:grid;grid-template-areas:"appbar-leading appbar-middle appbar-trailing" "appbar-bottom appbar-bottom appbar-bottom";grid-template-columns:0fr 1fr max-content;grid-template-rows:64px max-content;column-gap:4px;align-items:center;min-block-size:var(--_height);padding-block:var(--_padding-block-start) var(--_padding-block-end);padding-inline:var(--_padding-inline);border-start-start-radius:inherit;border-start-end-radius:inherit;background-color:var(--md-comp-app-bar-container-color, inherit);box-shadow:var(--md-sys-elevation-level0);z-index:8}.micl-appbar.micl-appbar--sticky{position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}.micl-appbar .micl-appbar__leading{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__leading-icon{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-leading-icon-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline{display:flex;grid-area:appbar-middle;flex-direction:column;align-items:flex-start;margin:8px 0;border-radius:var(--md-sys-shape-corner-none);color:var(--md-comp-app-bar-title-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline.micl-appbar__headline--center{align-items:center;text-align:center}.micl-appbar .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);margin:0}.micl-appbar .micl-appbar__headline .micl-appbar__subtitle{font:var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);letter-spacing:var(--md-sys-typescale-label-medium-tracking);margin:0;color:var(--md-comp-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant))}.micl-appbar .micl-appbar__trailing{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__trailing-icon{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant))}.micl-appbar.micl-appbar--medium{--_height: 112px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--medium .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--medium .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle){--_height: 136px}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-appbar.micl-appbar--large{--_height: 120px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--large .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--large .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle){--_height: 152px}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.micl-panes:not(:has(>.micl-pane:nth-child(2))) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}@media(max-width: 600px){.micl-panes:has(>.micl-pane:nth-child(2)) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 600px)and (max-width: 839px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-expanded .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 840px)and (max-width: 1199px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 1200px)and (max-width: 1599px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@keyframes appbar-background{0%{background-color:inherit;border-start-start-radius:inherit;border-start-end-radius:inherit}10%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2)}50%{border-start-start-radius:0;border-start-end-radius:0}100%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2);border-start-start-radius:0;border-start-end-radius:0}}
1
+ :root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-none: 0px}:root{--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0}:root{--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem}.micl-appbar{--_height: 64px;--_padding-block-start: 0px;--_padding-block-end: 0px;--_padding-inline: 0px;box-sizing:border-box;display:grid;grid-template-areas:"appbar-leading appbar-middle appbar-trailing" "appbar-bottom appbar-bottom appbar-bottom";grid-template-columns:0fr 1fr max-content;grid-template-rows:64px max-content;column-gap:4px;align-items:center;min-block-size:var(--_height);padding-block:var(--_padding-block-start) var(--_padding-block-end);padding-inline:var(--_padding-inline);border-start-start-radius:inherit;border-start-end-radius:inherit;background-color:var(--md-comp-app-bar-container-color, inherit);box-shadow:var(--md-sys-elevation-level0);z-index:8}.micl-appbar.micl-appbar--sticky{position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}.micl-appbar .micl-appbar__leading{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__leading-icon{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-leading-icon-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline{display:flex;grid-area:appbar-middle;flex-direction:column;align-items:flex-start;margin:8px 0;border-radius:var(--md-sys-shape-corner-none);color:var(--md-comp-app-bar-title-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline.micl-appbar__headline--center{align-items:center;text-align:center}.micl-appbar .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);margin:0}.micl-appbar .micl-appbar__headline .micl-appbar__subtitle{font:var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);letter-spacing:var(--md-sys-typescale-label-medium-tracking);margin:0;color:var(--md-comp-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant))}.micl-appbar .micl-appbar__trailing{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__trailing-icon{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant))}.micl-appbar.micl-appbar--medium{--_height: 112px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--medium .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--medium .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle){--_height: 136px}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-appbar.micl-appbar--large{--_height: 120px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--large .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--large .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle){--_height: 152px}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.micl-panes:not(:has(>.micl-pane:nth-child(2))) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}@media(max-width: 600px){.micl-panes:has(>.micl-pane:nth-child(2)) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 600px)and (max-width: 839px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-expanded .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 840px)and (max-width: 1199px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 1200px)and (max-width: 1599px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@keyframes appbar-background{0%{background-color:inherit;border-start-start-radius:inherit;border-start-end-radius:inherit}10%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2)}50%{border-start-start-radius:0;border-start-end-radius:0}100%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2);border-start-start-radius:0;border-start-end-radius:0}}
package/dist/badge.css CHANGED
@@ -1 +1 @@
1
- :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}.micl-badge{--_size: var(--md-comp-badge-size, 6px);--_large-size: var(--md-comp-badge-large-size, 16px);--_dx: var(--md-comp-badge-inline-offset, 0px);--_dy: var(--md-comp-badge-block-offset, 0px);box-sizing:border-box;position:fixed;inset:0;margin:0;overflow-x:hidden;background-color:var(--md-comp-badge-color, var(--md-sys-color-error));color:var(--md-comp-badge-large-label-text-color, var(--md-sys-color-on-error))}.micl-badge.micl-badge--small{inline-size:var(--_size);block-size:var(--_size);inset-block-start:calc(anchor(start) + var(--_dy));inset-inline-start:calc(anchor(end) - var(--_size) + var(--_dx));padding:0;border-radius:calc(var(--_size)/2)}.micl-badge:not(.micl-badge--small){font:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);letter-spacing:var(--md-sys-typescale-label-small-tracking);inline-size:fit-content;max-inline-size:34px;min-inline-size:var(--_large-size);block-size:var(--_large-size);inset-block-start:calc(anchor(start) - (var(--_large-size) - 14px) + var(--_dy));inset-inline-start:calc(anchor(end) - 12px + var(--_dx));padding-inline:var(--md-comp-badge-large-padding, 4px);border-radius:calc(var(--_large-size)/2)}@supports not (top: anchor(bottom)){.micl-badge{position:absolute;inset:0 !important;margin-block:calc(12px + var(--_dy)) auto}.micl-badge.micl-badge--small{margin-inline-start:calc(var(--md-sys-icon-size, 24px) - var(--_size) - var(--_dx))}.micl-badge:not(.micl-badge--small){margin-inline-start:calc(12px - var(--_dx))}}
1
+ :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}.micl-badge{--_size: var(--md-comp-badge-size, 6px);--_large-size: var(--md-comp-badge-large-size, 16px);--_icon: var(--md-sys-icon-size, 24px);--_dx: var(--md-comp-badge-inline-offset, 0px);--_dy: var(--md-comp-badge-block-offset, 0px);box-sizing:border-box;position:absolute;inset:auto;margin:0;overflow:clip;background-color:var(--md-comp-badge-color, var(--md-sys-color-error));color:var(--md-comp-badge-large-label-text-color, var(--md-sys-color-on-error))}.micl-badge.micl-badge--small{inline-size:var(--_size);block-size:var(--_size);inset-block-start:calc(anchor(center) - var(--_icon)/2 + var(--_dy));inset-inline-start:calc(anchor(center) + var(--_icon)/2 - var(--_size) + var(--_dx));padding:0;border-radius:calc(var(--_size)/2)}.micl-badge:not(.micl-badge--small){font:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);letter-spacing:var(--md-sys-typescale-label-small-tracking);inline-size:fit-content;max-inline-size:34px;min-inline-size:var(--_large-size);block-size:var(--_large-size);inset-block-start:calc(anchor(center) - var(--_icon)/2 - (var(--_large-size) - 14px) + var(--_dy));inset-inline-start:calc(anchor(center) + var(--_icon)/2 - 12px + var(--_dx));padding-inline:var(--md-comp-badge-large-padding, 4px);border-radius:calc(var(--_large-size)/2)}.micl-badge.micl-badge--trailing{position:static;display:inline-flex;align-items:center;justify-content:center;align-self:center;margin-inline-start:var(--md-comp-badge-trailing-space, 4px)}
package/dist/bottomsheet.css CHANGED
@@ -1 +1 @@
1
- body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}:root{--md-sys-shape-corner-extra-large-top: 28px 28px 0 0}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}:root{--md-sys-state-backdrop-opacity: 32%}dialog.micl-bottomsheet{--md-comp-bottomsheet-height: max-content;--md-comp-bottomsheet-margin: 56px;--md-comp-bottomsheet-margin-top: 72px;--md-comp-bottomsheet-padding: 24px;--md-comp-bottomsheet-drag-handle-width: 32px;--md-comp-bottomsheet-drag-handle-height: 4px;--md-comp-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-bottomsheet-motion-duration: 650ms;--md-comp-bottomsheet-motion-duration-reverse: 500ms;--micl-duration: var(--md-comp-bottomsheet-motion-duration-reverse);--micl-easing: cubic-bezier(0.3, 0, 0.8, 0.15);box-sizing:border-box;position:fixed;inset-block:auto 0;block-size:0;max-block-size:50vh;inline-size:100%}dialog.micl-bottomsheet[data-miclfitheight]{max-block-size:calc(100vh - var(--md-comp-bottomsheet-margin-top))}dialog.micl-bottomsheet{min-inline-size:100%;margin:var(--md-comp-bottomsheet-margin-top) 0 0 0;padding:0;border:none;border-radius:var(--md-comp-bottomsheet-container-shape, var(--md-sys-shape-corner-extra-large-top));background-color:var(--md-comp-bottomsheet-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-bottomsheet-container-elevation, var(--md-sys-elevation-level1));opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--micl-duration) var(--micl-easing),block-size var(--micl-duration) var(--md-comp-bottomsheet-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;inline-size:100%;block-size:var(--md-sys-state-target-size, 48px);justify-content:center;cursor:grab;touch-action:none}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;inline-size:var(--md-comp-bottomsheet-drag-handle-width);block-size:var(--md-comp-bottomsheet-drag-handle-height);padding:16px calc((var(--md-sys-state-target-size, 48px) - var(--md-comp-bottomsheet-drag-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-extra-large);background:none;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle::before{content:"";display:block;block-size:100%;border-radius:calc(var(--md-comp-bottomsheet-drag-handle-height)/2);background-color:var(--md-comp-bottomsheet-drag-handle-color, var(--md-sys-color-on-surface-variant))}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-bottomsheet-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-sys-state-focus-indicator-outer-offset, 2px)}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__content{flex:1 1 auto;padding:0 var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding);overflow:hidden auto}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete,background-color var(--micl-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{--micl-duration: var(--md-comp-bottomsheet-motion-duration);--micl-easing: cubic-bezier(0.05, 0.7, 0.1, 1);display:flex;flex-direction:column;block-size:var(--md-comp-bottomsheet-height);opacity:100%}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{block-size:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@media(min-width: 641px){dialog.micl-bottomsheet{inline-size:min(100vw - 2*var(--md-comp-bottomsheet-margin),640px);max-inline-size:640px;min-inline-size:min(100vw - 2*var(--md-comp-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-comp-bottomsheet-margin),640px))/2 - var(--md-comp-bottomsheet-margin));margin:var(--md-comp-bottomsheet-margin);margin-block-end:0}}
1
+ :root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}:root{--md-sys-shape-corner-extra-large-top: 28px 28px 0 0}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}:root{--md-sys-state-backdrop-opacity: 32%}@property --micl-bottomsheet-scroll{syntax:"<custom-ident>";inherits:true;initial-value:hidden}dialog.micl-bottomsheet{--_height: var(--md-comp-bottomsheet-height, max-content);--_margin: var(--md-comp-bottomsheet-margin, 56px);--_margin-top: var(--md-comp-bottomsheet-margin-top, 72px);--_padding: var(--md-comp-bottomsheet-padding, 24px);--_drag-handle-width: var(--md-comp-bottomsheet-drag-handle-width, 32px);--_drag-handle-height: var(--md-comp-bottomsheet-drag-handle-height, 4px);--_motion-spatial: var(--md-comp-bottomsheet-motion-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));--_motion-duration: var(--md-comp-bottomsheet-motion-duration, 650ms);--_motion-duration-reverse: var(--md-comp-bottomsheet-motion-duration-reverse, 500ms);--micl-duration: var(--_motion-duration-reverse);--micl-easing: cubic-bezier(0.3, 0, 0.8, 0.15);--micl-bottomsheet-scroll: hidden;--_settle-delay: 0s;box-sizing:border-box;position:fixed;inset-block:auto 0;inset-inline:0;block-size:0;max-block-size:50dvb;inline-size:100%;margin:0;padding:0;border:none;border-radius:var(--md-comp-bottomsheet-container-shape, var(--md-sys-shape-corner-extra-large-top));background-color:var(--md-comp-bottomsheet-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-bottomsheet-container-elevation, var(--md-sys-elevation-level1));opacity:0;overflow:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet[data-miclfitheight]{max-block-size:calc(100dvb - var(--_margin-top))}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--micl-duration) var(--micl-easing),block-size var(--micl-duration) var(--_motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete,--micl-bottomsheet-scroll 0s var(--_settle-delay) allow-discrete}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;inline-size:100%;block-size:var(--md-sys-state-target-size, 48px);justify-content:center;cursor:grab;touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;inline-size:var(--_drag-handle-width);block-size:var(--_drag-handle-height);padding:16px calc((var(--md-sys-state-target-size, 48px) - var(--_drag-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-extra-large);background:none;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle::before{content:"";display:block;block-size:100%;border-radius:calc(var(--_drag-handle-height)/2);background-color:var(--md-comp-bottomsheet-drag-handle-color, var(--md-sys-color-on-surface-variant))}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-bottomsheet-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-sys-state-focus-indicator-outer-offset, 2px)}dialog.micl-bottomsheet .micl-bottomsheet__content{flex:1 1 auto;padding:0 var(--_padding) var(--_padding) var(--_padding);overflow:hidden var(--micl-bottomsheet-scroll)}dialog.micl-bottomsheet .micl-bottomsheet__content:first-child{padding-block-start:var(--_padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete,background-color var(--micl-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{--micl-duration: var(--_motion-duration);--micl-easing: cubic-bezier(0.05, 0.7, 0.1, 1);--micl-bottomsheet-scroll: auto;--_settle-delay: var(--_motion-duration);display:flex;flex-direction:column;block-size:var(--_height);opacity:1}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{block-size:0;opacity:0;--micl-bottomsheet-scroll: hidden}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet.micl-bottomsheet--resizing{--micl-bottomsheet-scroll: hidden}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}@media(prefers-reduced-motion: reduce){dialog.micl-bottomsheet{--_motion-duration: 0ms;--_motion-duration-reverse: 0ms}}@media(min-width: 600px){dialog.micl-bottomsheet{inline-size:min(100% - 2*var(--_margin),640px);margin-inline:auto}}
package/dist/bottomsheet.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={56(e,t,n){const o=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(o.map).join(","),r=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],c=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=i();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=r(n),c=e.type;o&&"function"==typeof o.component[c]&&o.component[c]?.(e)},a=()=>{o.activated||(o.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&l(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{o.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const n=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-n.left)/n.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-n.top)/n.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const o=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",o))};e.addEventListener("animationend",o)}),o.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",s),document.addEventListener("input",s),document.addEventListener("keydown",s))},d=()=>{document.removeEventListener("DOMContentLoaded",d),a()};"loading"!==document.readyState?a():document.addEventListener("DOMContentLoaded",d),n.d(t,["register",0,(e,t,n)=>(o.map[e]={component:t,type:n},o.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function n(o){const i=t[o];if(void 0!==i)return i.exports;const r=t[o]={exports:{}};return e[o](r,r.exports,n),r.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var i=t[o++],r=t[o++];n.o(e,i)?0===r&&o++:0===r?Object.defineProperty(e,i,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,i,{enumerable:!0,get:r})}else for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let o={};n.r(o);var i=n(56);const r="dialog.micl-bottomsheet",c=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10);t<1&&(t=e.getBoundingClientRect().height,e.dataset.miclfitheight=`${t}`);let n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),o=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return[...new Set(o.concat([Math.min(t,n)]).sort((e,t)=>e-t))]},l=(e,t)=>{let n=e.getBoundingClientRect().height,o=c(e);return o.filter(e=>e>n+4)[0]||o[t?o.length-1:0]},s=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-comp-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-comp-bottomsheet-height",`${t}px`)},a=(0,i.register)(r,{initialize:e=>{if(!e.matches(r)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=e.querySelector(".micl-bottomsheet__headline");if(!t)return;const n=t.querySelector(".micl-bottomsheet__draghandle");let o,i,a=!1,d=!1,m=!1;function p(t){const n=t.clientY;if(a&&Math.abs(o-n)>4&&(a=!1,d=!0,e.classList.add("micl-bottomsheet--resizing")),d){const t=Math.max(1,i+o-n),r=c(e).find(e=>e>0&&Math.abs(e-t)<=12);s(e,r||t)}}function u(t){a=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",p),document.removeEventListener("pointerup",u),d&&(d=!1,m=!0,t.clientY<o?s(e,l(e,!0)):e.getBoundingClientRect().height<48?s(e,0):s(e,(e=>{let t=e.getBoundingClientRect().height,n=c(e).filter(e=>e>0),o=n.filter(e=>e<t-4);return o[o.length-1]||n[0]})(e)))}n?.addEventListener("click",()=>{m||s(e,l(e,!1))}),t.addEventListener("pointerdown",r=>{r.target!==t&&r.target!==n||(a=!0,m=!1,r.preventDefault(),o=r.clientY,i=e.getBoundingClientRect().height,document.addEventListener("pointermove",p),document.addEventListener("pointerup",u))})},cleanup:e=>{e.matches(r)&&(e.classList.remove("micl-bottomsheet--resizing"),delete e.dataset.miclinitialized,delete e.dataset.miclfitheight)}},HTMLDialogElement);return n.d(o,["bottomsheetSelector",0,r,"default",0,a]),o})());
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={56(e,t,o){const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(n.map).join(","),r=e=>Object.entries(n.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],c=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},a=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=i();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const n=r(o),c=e.type;n&&"function"==typeof n.component[c]&&n.component[c]?.(e)},l=()=>{n.activated||(n.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&a(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(a)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{n.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const o=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-o.left)/o.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-o.top)/o.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const n=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",n))};e.addEventListener("animationend",n)}),n.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",s),document.addEventListener("input",s),document.addEventListener("keydown",s))},d=()=>{document.removeEventListener("DOMContentLoaded",d),l()};"loading"!==document.readyState?l():document.addEventListener("DOMContentLoaded",d),o.d(t,["register",0,(e,t,o)=>(n.map[e]={component:t,type:o},n.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function o(n){const i=t[n];if(void 0!==i)return i.exports;const r=t[n]={exports:{}};return e[n](r,r.exports,o),r.exports}o.d=(e,t)=>{if(Array.isArray(t))for(var n=0;n<t.length;){var i=t[n++],r=t[n++];o.o(e,i)?0===r&&n++:0===r?Object.defineProperty(e,i,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,i,{enumerable:!0,get:r})}else for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let n={};o.r(n);var i=o(56);const r="dialog.micl-bottomsheet",c=new WeakMap,a=e=>{delete e.dataset.miclfitheight,e.style.removeProperty("--md-comp-bottomsheet-height")},s=e=>(e.getAnimations().forEach(e=>e.finish()),e.getBoundingClientRect().height),l=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10);t<1&&(t=s(e),e.dataset.miclfitheight=`${t}`);let o=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10)||1/0,n=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=o);return[...new Set(n.concat([Math.min(t,o)]).sort((e,t)=>e-t))]},d=(e,t)=>{t<1?(a(e),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-comp-bottomsheet-height",`${t}px`)},m=(0,i.register)(r,{initialize:e=>{if(!e.matches(r)||e.dataset.miclinitialized)return;const t=e.querySelector(".micl-bottomsheet__headline");if(!t)return;e.dataset.miclinitialized="1";const o=t.querySelector(".micl-bottomsheet__draghandle"),n=new AbortController,i={signal:n.signal};c.set(e,n);let m,p,u=!1,f=!1,y=!1;function h(t){const o=t.clientY;if(u&&Math.abs(m-o)>4&&(u=!1,f=!0,e.classList.add("micl-bottomsheet--resizing")),f){const t=Math.max(1,p+m-o),n=l(e).find(e=>e>0&&Math.abs(e-t)<=12);d(e,n||t)}}function g(t){const o=f;if(u=!1,f=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",g),document.removeEventListener("pointercancel",g),o){y=!0;const o=e.getBoundingClientRect().height,n=o<48&&"pointerup"===t.type;d(e,n?0:((e,t)=>{const o=l(e).filter(e=>e>0);return o.reduce((e,o)=>Math.abs(o-t)<Math.abs(e-t)?o:e,o[0]??t)})(e,o))}}e.addEventListener("beforetoggle",t=>{"open"===t.newState&&a(e)},i),o?.addEventListener("click",t=>{y&&t.detail||d(e,(e=>{let t=s(e),o=l(e);return o.filter(e=>e>t+4)[0]||o[0]})(e))},i),t.addEventListener("pointerdown",n=>{n.target!==t&&n.target!==o||(u=!0,y=!1,n.preventDefault(),m=n.clientY,p=s(e),document.addEventListener("pointermove",h,i),document.addEventListener("pointerup",g,i),document.addEventListener("pointercancel",g,i))},i)},cleanup:e=>{const t=c.get(e);t&&(t.abort(),c.delete(e)),e.classList.remove("micl-bottomsheet--resizing"),a(e),delete e.dataset.miclinitialized}},HTMLDialogElement);return o.d(n,["bottomsheetSelector",0,r,"default",0,m]),n})());
package/dist/button.css CHANGED
@@ -1 +1 @@
1
- :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--md-comp-button-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-button-motion-duration: 350ms;--micl-ripple: 1;box-sizing:border-box;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:none;border-radius:calc(var(--micl-height)/2);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;transition:border-radius var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),box-shadow var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),background-size 0ms,--statelayer-opacity var(--md-comp-button-motion-duration) linear}:is(:disabled,:has(input:disabled,>button:disabled)):is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){cursor:default}:not(:disabled,:has(input:disabled,>button:disabled)):hover:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}:not(:disabled,:has(input:disabled,>button:disabled)):hover:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon{font-variation-settings:"FILL" 1}:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)):is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}:not(:disabled,:has(input:disabled,>button:disabled)):active:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon{font-variation-settings:"FILL" 0;transition:font-variation-settings var(--md-comp-button-motion-duration) linear}.micl-button--toggle:not([aria-pressed=true]):is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon::before{content:attr(data-miclicon)}.micl-button--toggle[aria-pressed=true]:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon::before{content:attr(data-micliconselected)}:is(.micl-button-text-s,.micl-button-elevated-s,.micl-button-filled-s,.micl-button-tonal-s,.micl-button-outlined-s)::before,:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs)::before{content:"";position:absolute;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-state-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-state-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px))/2);background-color:rgba(0,0,0,0)}:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs){font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 32px;--micl-height: 32px;min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height);column-gap:4px;padding-inline:12px}:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs) .micl-button__icon{font-size:20px;inline-size:20px}[class*=micl-button-elevated-]{--statelayer-color: var(--md-sys-color-primary);background-color:var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));color:var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));box-shadow:var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1))}[class*=micl-button-elevated-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-elevated-button-disabled-container-opacity, 10%)));color:var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));box-shadow:var(--md-sys-elevation-level0)}[class*=micl-button-elevated-]:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level2)}[class*=micl-button-elevated-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary))}[class*=micl-button-elevated-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}[class*=micl-button-outlined-]{--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-label-text-color, var(--md-sys-color-on-surface-variant));border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant))}[class*=micl-button-outlined-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-outlined-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-outlined-]:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{border:none;background-color:var(--md-comp-outlined-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-button-selected-disabled-container-opacity, 10%)))}[class*=micl-button-outlined-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface))}[class*=micl-button-outlined-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0}:root{--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]).micl-button--toggle[aria-pressed=true]{border-radius:var(--_shape-toggle)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]).micl-button--square{border-radius:var(--_shape-toggle)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]).micl-button--square.micl-button--toggle[aria-pressed=true]{border-radius:calc(var(--micl-height)/2)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]):not(:disabled,:has(input:disabled,>button:disabled)):active,:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]):not(:disabled,:has(input:disabled,>button:disabled)):active.micl-button--square{border-radius:var(--_shape-pressed)}:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs){--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small)}:is(.micl-button-text-s,.micl-button-elevated-s,.micl-button-filled-s,.micl-button-tonal-s,.micl-button-outlined-s){font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 40px;--micl-height: 40px;--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small);column-gap:8px;padding-inline:16px}:is(.micl-button-text-s,.micl-button-elevated-s,.micl-button-filled-s,.micl-button-tonal-s,.micl-button-outlined-s) .micl-button__icon{font-size:20px;inline-size:20px}:is(.micl-button-text-m,.micl-button-elevated-m,.micl-button-filled-m,.micl-button-tonal-m,.micl-button-outlined-m){font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);--micl-width: 56px;--micl-height: 56px;--_shape-toggle: var(--md-sys-shape-corner-large);--_shape-pressed: var(--md-sys-shape-corner-medium);column-gap:8px;padding-inline:24px}:is(.micl-button-text-m,.micl-button-elevated-m,.micl-button-filled-m,.micl-button-tonal-m,.micl-button-outlined-m) .micl-button__icon{font-size:var(--md-sys-icon-size, 24px);inline-size:var(--md-sys-icon-size, 24px)}:is(.micl-button-text-l,.micl-button-elevated-l,.micl-button-filled-l,.micl-button-tonal-l,.micl-button-outlined-l){font:var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font);letter-spacing:var(--md-sys-typescale-headline-small-tracking);--micl-width: 96px;--micl-height: 96px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);column-gap:12px;padding-inline:48px}:is(.micl-button-text-l,.micl-button-elevated-l,.micl-button-filled-l,.micl-button-tonal-l,.micl-button-outlined-l) .micl-button__icon{font-size:32px;inline-size:32px}:is(.micl-button-text-xl,.micl-button-elevated-xl,.micl-button-filled-xl,.micl-button-tonal-xl,.micl-button-outlined-xl){font:var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);letter-spacing:var(--md-sys-typescale-headline-large-tracking);--micl-width: 136px;--micl-height: 136px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);column-gap:16px;padding-inline:64px}:is(.micl-button-text-xl,.micl-button-elevated-xl,.micl-button-filled-xl,.micl-button-tonal-xl,.micl-button-outlined-xl) .micl-button__icon{font-size:40px;inline-size:40px}[class*=micl-button-text-]{--statelayer-color: var(--md-sys-color-primary);background-color:rgba(0,0,0,0);color:var(--md-comp-text-button-label-text-color, var(--md-sys-color-primary));text-decoration:none}[class*=micl-button-text-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:rgba(0,0,0,0);color:var(--md-comp-text-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-text-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-filled-]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));color:var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary))}[class*=micl-button-filled-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-filled-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-filled-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-filled-]:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}[class*=micl-button-filled-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}[class*=micl-button-filled-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle:not([aria-pressed=true]){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:var(--md-comp-filled-button-unselected-container-color, var(--md-sys-color-surface-container));color:var(--md-comp-filled-button-unselected-label-text-color, var(--md-sys-color-on-surface-variant))}[class*=micl-button-tonal-]{--statelayer-color: var(--md-sys-color-on-secondary-container);background-color:var(--md-comp-filled-tonal-button-container-color, var(--md-sys-color-secondary-container));color:var(--md-comp-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container))}[class*=micl-button-tonal-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-filled-tonal-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-tonal-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-tonal-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-filled-tonal-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-tonal-]:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}[class*=micl-button-tonal-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-secondary);background-color:var(--md-comp-filled-tonal-button-selected-container-color, var(--md-sys-color-secondary));color:var(--md-comp-filled-tonal-button-selected-label-text-color, var(--md-sys-color-on-secondary))}[class*=micl-button-tonal-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}.micl-button-outlined-l{border-width:2px}.micl-button-outlined-xl{border-width:3px}
1
+ :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--_motion-effects: var(--md-comp-button-motion-effects, cubic-bezier(0.42, 1.67, 0.21, 0.9));--_motion-duration: var(--md-comp-button-motion-duration, 350ms);--micl-ripple: 1;box-sizing:border-box;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:none;border-radius:calc(var(--micl-height)/2);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;transition:border-radius var(--_motion-duration) var(--_motion-effects),box-shadow var(--_motion-duration) var(--_motion-effects),background-size 0ms,--statelayer-opacity var(--_motion-duration) linear}:is(:disabled,:has(input:disabled,>button:disabled)):is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){cursor:default}:not(:disabled,:has(input:disabled,>button:disabled)):hover:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}:not(:disabled,:has(input:disabled,>button:disabled)):hover:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon{font-variation-settings:"FILL" 1}:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)):is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}:not(:disabled,:has(input:disabled,>button:disabled)):active:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon{font-variation-settings:"FILL" 0;transition:font-variation-settings var(--_motion-duration) linear}.micl-button--toggle:not([aria-pressed=true]):is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon::before{content:attr(data-miclicon)}.micl-button--toggle[aria-pressed=true]:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]) .micl-button__icon::before{content:attr(data-micliconselected)}:is(.micl-button-text-s,.micl-button-elevated-s,.micl-button-filled-s,.micl-button-tonal-s,.micl-button-outlined-s)::before,:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs)::before{content:"";position:absolute;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-state-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-state-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px))/2);background-color:rgba(0,0,0,0)}:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs){font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 32px;--micl-height: 32px;min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height);column-gap:4px;padding-inline:12px}:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs) .micl-button__icon{font-size:20px;inline-size:20px}[class*=micl-button-elevated-]{--statelayer-color: var(--md-sys-color-primary);background-color:var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));color:var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));box-shadow:var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1))}[class*=micl-button-elevated-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-elevated-button-disabled-container-opacity, 10%)));color:var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));box-shadow:var(--md-sys-elevation-level0)}[class*=micl-button-elevated-]:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level2)}[class*=micl-button-elevated-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary))}[class*=micl-button-elevated-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}[class*=micl-button-outlined-]{--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-label-text-color, var(--md-sys-color-on-surface-variant));border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant))}[class*=micl-button-outlined-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-outlined-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-outlined-]:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{border:none;background-color:var(--md-comp-outlined-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-button-selected-disabled-container-opacity, 10%)))}[class*=micl-button-outlined-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface))}[class*=micl-button-outlined-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0}:root{--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]){min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]).micl-button--toggle[aria-pressed=true]{border-radius:var(--_shape-toggle)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]).micl-button--square{border-radius:var(--_shape-toggle)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]).micl-button--square.micl-button--toggle[aria-pressed=true]{border-radius:calc(var(--micl-height)/2)}:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]):not(:disabled,:has(input:disabled,>button:disabled)):active,:is([class*=micl-button-text-],[class*=micl-button-elevated-],[class*=micl-button-filled-],[class*=micl-button-tonal-],[class*=micl-button-outlined-]):not(:disabled,:has(input:disabled,>button:disabled)):active.micl-button--square{border-radius:var(--_shape-pressed)}:is(.micl-button-text-xs,.micl-button-elevated-xs,.micl-button-filled-xs,.micl-button-tonal-xs,.micl-button-outlined-xs){--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small)}:is(.micl-button-text-s,.micl-button-elevated-s,.micl-button-filled-s,.micl-button-tonal-s,.micl-button-outlined-s){font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 40px;--micl-height: 40px;--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small);column-gap:8px;padding-inline:16px}:is(.micl-button-text-s,.micl-button-elevated-s,.micl-button-filled-s,.micl-button-tonal-s,.micl-button-outlined-s) .micl-button__icon{font-size:20px;inline-size:20px}:is(.micl-button-text-m,.micl-button-elevated-m,.micl-button-filled-m,.micl-button-tonal-m,.micl-button-outlined-m){font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);--micl-width: 56px;--micl-height: 56px;--_shape-toggle: var(--md-sys-shape-corner-large);--_shape-pressed: var(--md-sys-shape-corner-medium);column-gap:8px;padding-inline:24px}:is(.micl-button-text-m,.micl-button-elevated-m,.micl-button-filled-m,.micl-button-tonal-m,.micl-button-outlined-m) .micl-button__icon{font-size:var(--md-sys-icon-size, 24px);inline-size:var(--md-sys-icon-size, 24px)}:is(.micl-button-text-l,.micl-button-elevated-l,.micl-button-filled-l,.micl-button-tonal-l,.micl-button-outlined-l){font:var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font);letter-spacing:var(--md-sys-typescale-headline-small-tracking);--micl-width: 96px;--micl-height: 96px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);column-gap:12px;padding-inline:48px}:is(.micl-button-text-l,.micl-button-elevated-l,.micl-button-filled-l,.micl-button-tonal-l,.micl-button-outlined-l) .micl-button__icon{font-size:32px;inline-size:32px}:is(.micl-button-text-xl,.micl-button-elevated-xl,.micl-button-filled-xl,.micl-button-tonal-xl,.micl-button-outlined-xl){font:var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);letter-spacing:var(--md-sys-typescale-headline-large-tracking);--micl-width: 136px;--micl-height: 136px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);column-gap:16px;padding-inline:64px}:is(.micl-button-text-xl,.micl-button-elevated-xl,.micl-button-filled-xl,.micl-button-tonal-xl,.micl-button-outlined-xl) .micl-button__icon{font-size:40px;inline-size:40px}[class*=micl-button-text-]{--statelayer-color: var(--md-sys-color-primary);background-color:rgba(0,0,0,0);color:var(--md-comp-text-button-label-text-color, var(--md-sys-color-primary));text-decoration:none}[class*=micl-button-text-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:rgba(0,0,0,0);color:var(--md-comp-text-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-text-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-filled-]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));color:var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary))}[class*=micl-button-filled-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-filled-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-filled-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-filled-]:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}[class*=micl-button-filled-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}[class*=micl-button-filled-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle:not([aria-pressed=true]){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:var(--md-comp-filled-button-unselected-container-color, var(--md-sys-color-surface-container));color:var(--md-comp-filled-button-unselected-label-text-color, var(--md-sys-color-on-surface-variant))}[class*=micl-button-tonal-]{--statelayer-color: var(--md-sys-color-on-secondary-container);background-color:var(--md-comp-filled-tonal-button-container-color, var(--md-sys-color-secondary-container));color:var(--md-comp-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container))}[class*=micl-button-tonal-]:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-filled-tonal-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-tonal-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-tonal-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-filled-tonal-button-disabled-label-text-opacity, 38%)))}[class*=micl-button-tonal-]:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}[class*=micl-button-tonal-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-secondary);background-color:var(--md-comp-filled-tonal-button-selected-container-color, var(--md-sys-color-secondary));color:var(--md-comp-filled-tonal-button-selected-label-text-color, var(--md-sys-color-on-secondary))}[class*=micl-button-tonal-]:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}.micl-button-outlined-l{border-width:2px}.micl-button-outlined-xl{border-width:3px}
package/dist/checkbox.css CHANGED
@@ -1 +1 @@
1
- input[type=checkbox].micl-checkbox:not(:disabled)+label,label:has(+input[type=checkbox].micl-checkbox:not(:disabled)),label:has(input[type=checkbox].micl-checkbox:not(:disabled)){cursor:pointer}input[type=checkbox].micl-checkbox+label,label:has(+input[type=checkbox].micl-checkbox),label:has(input[type=checkbox].micl-checkbox){color:var(--md-sys-color-on-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-checkbox:disabled+label,label:has(+input[type=checkbox].micl-checkbox:disabled){opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}label:has(input[type=checkbox].micl-checkbox:disabled){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-motion-duration-short3: 150ms}:root{--md-sys-motion-duration-long4: 600ms}input[type=checkbox].micl-checkbox{--md-comp-checkbox-motion-duration: 300ms;--md-comp-checkbox-motion-duration-reverse: 200ms;--md-comp-checkbox-motion-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);--_size: var(--md-comp-checkbox-container-size, 18px);--_outline-width: var(--md-comp-checkbox-outline-width, 2px);--_check-thickness: var(--md-comp-checkbox-check-thickness, 2px);--_layer: max(var(--md-sys-state-layer-size, 40px), calc(var(--_size) + 22px));--_target: max(var(--md-sys-state-target-size, 48px), calc(var(--_layer) + 8px));--statelayer-color: var(--md-sys-color-on-surface);appearance:none;box-sizing:border-box;position:relative;inline-size:var(--_target);min-inline-size:var(--_target);block-size:var(--_target);min-block-size:var(--_target);margin:0;border:calc((var(--_target) - var(--_layer))/2) solid rgba(0,0,0,0);background-clip:content-box;background-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);outline-offset:calc(var(--md-sys-state-focus-indicator-outer-offset, 2px) - (var(--_target) - var(--_layer))/2)}input[type=checkbox].micl-checkbox::before{--_check-width: calc(var(--_size) * 5 / 6);--_check-height: calc(0.4667 * var(--_check-width));content:"";box-sizing:border-box;position:absolute;inline-size:var(--_check-width);block-size:0;inset:0;inset-block-start:calc(-0.25*var(--_size));inset-inline-start:calc(var(--_check-thickness)/2);margin:auto;color:var(--md-comp-checkbox-selected-icon-color, var(--md-sys-color-on-primary));border-block-end:var(--_check-thickness) currentColor solid;border-inline-start:var(--_check-thickness) currentColor solid;transform:rotate(-45deg);transform-origin:center;clip-path:rect(0 var(--_check-thickness) 0 0);z-index:1;transition:block-size var(--md-sys-motion-duration-short3) var(--md-sys-motion-duration-short3) cubic-bezier(0, 0, 0, 1),clip-path var(--md-sys-motion-duration-short3) cubic-bezier(0.3, 0, 1, 1),inset-block-start 0ms linear var(--md-sys-motion-duration-short3),inset-inline-start 0ms linear var(--md-sys-motion-duration-short3),border-inline-start-width 0ms linear var(--md-sys-motion-duration-short3),transform 0ms linear var(--md-sys-motion-duration-short3)}input[type=checkbox].micl-checkbox::after{--_container-color: transparent;--_outline-color: var(--md-comp-checkbox-unselected-outline-color, var(--md-sys-color-on-surface-variant));content:"";box-sizing:border-box;position:absolute;inline-size:var(--_size);block-size:var(--_size);inset:0;margin:auto;border:var(--_outline-width) solid var(--_outline-color);border-radius:var(--md-comp-checkbox-container-shape, 2px);background-color:var(--_container-color);transition:background-color var(--md-comp-checkbox-motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1) var(--md-comp-checkbox-motion-duration-reverse),border-color var(--md-comp-checkbox-motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1) var(--md-comp-checkbox-motion-duration-reverse)}input[type=checkbox].micl-checkbox:is(:checked,:indeterminate){--statelayer-color: var(--md-sys-color-primary)}input[type=checkbox].micl-checkbox:is(:checked,:indeterminate)::before{block-size:var(--_check-height);clip-path:rect(0 calc(var(--_check-width) - var(--_check-thickness)) var(--_size) 0);transition:block-size var(--md-sys-motion-duration-short3) var(--md-comp-checkbox-motion-spatial),clip-path var(--md-sys-motion-duration-long4) var(--md-sys-motion-duration-short3) var(--md-comp-checkbox-motion-spatial)}input[type=checkbox].micl-checkbox:is(:checked,:indeterminate)::after{--_container-color: var(--md-comp-checkbox-selected-container-color, var(--md-sys-color-primary));--_outline-color: var(--md-comp-checkbox-selected-container-color, var(--md-sys-color-primary));transition:background-color var(--md-comp-checkbox-motion-duration) linear,border-color var(--md-comp-checkbox-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-checkbox:indeterminate::before{inset-inline-start:var(--_check-thickness);border-inline-start-width:0px;transform:rotate(0deg)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled){--statelayer-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled)::after{--_outline-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate):hover,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate):focus-visible,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate):active{--statelayer-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate)::before{color:var(--md-sys-color-on-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate)::after{--_container-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):hover,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):focus-visible,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):active{--statelayer-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):hover::after,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):focus-visible::after,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):active::after{--_outline-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox:not(:disabled){--micl-ripple: 1;background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;cursor:pointer;transition:background-size 0ms,--statelayer-opacity var(--md-comp-checkbox-motion-duration) linear}input[type=checkbox].micl-checkbox:not(:disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}input[type=checkbox].micl-checkbox:not(:disabled):hover:not(:checked,:indeterminate)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:not(:disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary)}input[type=checkbox].micl-checkbox:not(:disabled):focus-visible:not(:checked,:indeterminate)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:not(:disabled):active{--statelayer-color: var(--md-sys-color-on-surface);--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}input[type=checkbox].micl-checkbox:not(:disabled):active:not(:checked,:indeterminate){--statelayer-color: var(--md-sys-color-primary)}input[type=checkbox].micl-checkbox:not(:disabled):active:not(:checked,:indeterminate)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:not(:disabled).micl-rippling{animation:micl-ripple var(--md-sys-state-ripple-duration)}input[type=checkbox].micl-checkbox:disabled{opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}input[type=checkbox].micl-checkbox:disabled:is(:checked,:indeterminate)::before{color:var(--md-sys-color-surface)}input[type=checkbox].micl-checkbox:disabled:is(:checked,:indeterminate)::after{--_container-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:disabled::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:dir(rtl)::before{clip-path:rect(0 var(--_size) var(--_size) calc(var(--_size) - var(--_check-thickness)))}input[type=checkbox].micl-checkbox:dir(rtl):checked::before{clip-path:rect(0 var(--_size) var(--_size) var(--_check-thickness));transform:rotate(45deg)}input[type=checkbox].micl-checkbox:dir(rtl):indeterminate::before{clip-path:rect(0 var(--_size) var(--_size) var(--_check-thickness));transform:rotate(0deg)}
1
+ input[type=checkbox].micl-checkbox:not(:disabled)+label,label:has(+input[type=checkbox].micl-checkbox:not(:disabled)),label:has(input[type=checkbox].micl-checkbox:not(:disabled)){cursor:pointer}input[type=checkbox].micl-checkbox+label,label:has(+input[type=checkbox].micl-checkbox),label:has(input[type=checkbox].micl-checkbox){color:var(--md-sys-color-on-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-checkbox:disabled+label,label:has(+input[type=checkbox].micl-checkbox:disabled){opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}label:has(input[type=checkbox].micl-checkbox:disabled){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-motion-duration-short3: 150ms}:root{--md-sys-motion-duration-long4: 600ms}input[type=checkbox].micl-checkbox{--_motion-duration: var(--md-comp-checkbox-motion-duration, 300ms);--_motion-duration-reverse: var(--md-comp-checkbox-motion-duration-reverse, 200ms);--_motion-spatial: var(--md-comp-checkbox-motion-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.9));--_size: var(--md-comp-checkbox-container-size, 18px);--_outline-width: var(--md-comp-checkbox-outline-width, 2px);--_check-thickness: var(--md-comp-checkbox-check-thickness, 2px);--_layer: max(var(--md-sys-state-layer-size, 40px), calc(var(--_size) + 22px));--_target: max(var(--md-sys-state-target-size, 48px), calc(var(--_layer) + 8px));--statelayer-color: var(--md-sys-color-on-surface);appearance:none;box-sizing:border-box;position:relative;inline-size:var(--_target);min-inline-size:var(--_target);block-size:var(--_target);min-block-size:var(--_target);margin:0;border:calc((var(--_target) - var(--_layer))/2) solid rgba(0,0,0,0);background-clip:content-box;background-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);outline-offset:calc(var(--md-sys-state-focus-indicator-outer-offset, 2px) - (var(--_target) - var(--_layer))/2)}input[type=checkbox].micl-checkbox::before{--_check-width: calc(var(--_size) * 5 / 6);--_check-height: calc(0.4667 * var(--_check-width));content:"";box-sizing:border-box;position:absolute;inline-size:var(--_check-width);block-size:0;inset:0;inset-block-start:calc(-0.25*var(--_size));inset-inline-start:calc(var(--_check-thickness)/2);margin:auto;color:var(--md-comp-checkbox-selected-icon-color, var(--md-sys-color-on-primary));border-block-end:var(--_check-thickness) currentColor solid;border-inline-start:var(--_check-thickness) currentColor solid;transform:rotate(-45deg);transform-origin:center;clip-path:rect(0 var(--_check-thickness) 0 0);z-index:1;transition:block-size var(--md-sys-motion-duration-short3) var(--md-sys-motion-duration-short3) cubic-bezier(0, 0, 0, 1),clip-path var(--md-sys-motion-duration-short3) cubic-bezier(0.3, 0, 1, 1),inset-block-start 0ms linear var(--md-sys-motion-duration-short3),inset-inline-start 0ms linear var(--md-sys-motion-duration-short3),border-inline-start-width 0ms linear var(--md-sys-motion-duration-short3),transform 0ms linear var(--md-sys-motion-duration-short3)}input[type=checkbox].micl-checkbox::after{--_container-color: transparent;--_outline-color: var(--md-comp-checkbox-unselected-outline-color, var(--md-sys-color-on-surface-variant));content:"";box-sizing:border-box;position:absolute;inline-size:var(--_size);block-size:var(--_size);inset:0;margin:auto;border:var(--_outline-width) solid var(--_outline-color);border-radius:var(--md-comp-checkbox-container-shape, 2px);background-color:var(--_container-color);transition:background-color var(--_motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1) var(--_motion-duration-reverse),border-color var(--_motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1) var(--_motion-duration-reverse)}input[type=checkbox].micl-checkbox:is(:checked,:indeterminate){--statelayer-color: var(--md-sys-color-primary)}input[type=checkbox].micl-checkbox:is(:checked,:indeterminate)::before{block-size:var(--_check-height);clip-path:rect(0 calc(var(--_check-width) - var(--_check-thickness)) var(--_size) 0);transition:block-size var(--md-sys-motion-duration-short3) var(--_motion-spatial),clip-path var(--md-sys-motion-duration-long4) var(--md-sys-motion-duration-short3) var(--_motion-spatial)}input[type=checkbox].micl-checkbox:is(:checked,:indeterminate)::after{--_container-color: var(--md-comp-checkbox-selected-container-color, var(--md-sys-color-primary));--_outline-color: var(--md-comp-checkbox-selected-container-color, var(--md-sys-color-primary));transition:background-color var(--_motion-duration) linear,border-color var(--_motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-checkbox:indeterminate::before{inset-inline-start:var(--_check-thickness);border-inline-start-width:0px;transform:rotate(0deg)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled){--statelayer-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled)::after{--_outline-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate):hover,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate):focus-visible,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate):active{--statelayer-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate)::before{color:var(--md-sys-color-on-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):is(:checked,:indeterminate)::after{--_container-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):hover,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):focus-visible,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):active{--statelayer-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):hover::after,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):focus-visible::after,input[type=checkbox].micl-checkbox.micl-checkbox--error:not(:disabled):not(:checked,:indeterminate):active::after{--_outline-color: var(--md-sys-color-error)}input[type=checkbox].micl-checkbox:not(:disabled){--micl-ripple: 1;background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;cursor:pointer;transition:background-size 0ms,--statelayer-opacity var(--_motion-duration) linear}input[type=checkbox].micl-checkbox:not(:disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}input[type=checkbox].micl-checkbox:not(:disabled):hover:not(:checked,:indeterminate)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:not(:disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary)}input[type=checkbox].micl-checkbox:not(:disabled):focus-visible:not(:checked,:indeterminate)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:not(:disabled):active{--statelayer-color: var(--md-sys-color-on-surface);--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}input[type=checkbox].micl-checkbox:not(:disabled):active:not(:checked,:indeterminate){--statelayer-color: var(--md-sys-color-primary)}input[type=checkbox].micl-checkbox:not(:disabled):active:not(:checked,:indeterminate)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:not(:disabled).micl-rippling{animation:micl-ripple var(--md-sys-state-ripple-duration)}input[type=checkbox].micl-checkbox:disabled{opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}input[type=checkbox].micl-checkbox:disabled:is(:checked,:indeterminate)::before{color:var(--md-sys-color-surface)}input[type=checkbox].micl-checkbox:disabled:is(:checked,:indeterminate)::after{--_container-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:disabled::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=checkbox].micl-checkbox:dir(rtl)::before{clip-path:rect(0 var(--_size) var(--_size) calc(var(--_size) - var(--_check-thickness)))}input[type=checkbox].micl-checkbox:dir(rtl):checked::before{clip-path:rect(0 var(--_size) var(--_size) var(--_check-thickness));transform:rotate(45deg)}input[type=checkbox].micl-checkbox:dir(rtl):indeterminate::before{clip-path:rect(0 var(--_size) var(--_size) var(--_check-thickness));transform:rotate(0deg)}
package/dist/chip.css CHANGED
@@ -1 +1 @@
1
- :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion,.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--md-comp-button-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-button-motion-duration: 350ms;--micl-ripple: 1;box-sizing:border-box;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:none;border-radius:calc(var(--micl-height)/2);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;transition:border-radius var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),box-shadow var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),background-size 0ms,--statelayer-opacity var(--md-comp-button-motion-duration) linear}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__primary:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__remove:is(:disabled,:has(input:disabled,>button:disabled)){cursor:default}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-variation-settings:"FILL" 0;transition:font-variation-settings var(--md-comp-button-motion-duration) linear}.micl-chips .micl-button--toggle.micl-chip-assist:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-filter:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-input:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-suggestion:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__primary:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__remove:not([aria-pressed=true]) .micl-button__icon::before{content:attr(data-miclicon)}.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-assist .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-filter .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-input .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-suggestion .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__primary .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__remove .micl-button__icon::before{content:attr(data-micliconselected)}.micl-chips .micl-chip-assist::before,.micl-chips .micl-chip-filter::before,.micl-chips .micl-chip-input::before,.micl-chips .micl-chip-suggestion::before{content:"";position:absolute;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-state-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-state-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px))/2);background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 32px;--micl-height: 32px;min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height);column-gap:4px;padding-inline:12px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:20px;inline-size:20px}.micl-chips .micl-chip--elevated{--statelayer-color: var(--md-sys-color-primary);background-color:var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));color:var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));box-shadow:var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1))}.micl-chips .micl-chip--elevated:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-elevated-button-disabled-container-opacity, 10%)));color:var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));box-shadow:var(--md-sys-elevation-level0)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level2)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary))}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-label-text-color, var(--md-sys-color-on-surface-variant));border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated){background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-outlined-button-disabled-label-text-opacity, 38%)))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){border:none;background-color:var(--md-comp-outlined-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-button-selected-disabled-container-opacity, 10%)))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon{font-variation-settings:"FILL" 1}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}.micl-chips{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:none}.micl-chips .micl-chips__headline{padding-block-end:4px;color:var(--md-sys-color-on-surface-variant)}.micl-chips .micl-chip-assist{--micl-chip-statelayer: var(--md-sys-color-on-surface);--micl-chip-label: var(--md-comp-assist-chip-label-text-color, var(--md-sys-color-on-surface));--micl-chip-icon: var(--md-comp-assist-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-assist-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-assist-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-assist-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-assist-chip-elevated-container-color)}.micl-chips .micl-chip-filter{--micl-chip-label: var(--md-comp-filter-chip-label-text-color);--micl-chip-icon: var(--md-comp-filter-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-filter-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-filter-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-filter-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-filter-chip-elevated-container-color)}.micl-chips .micl-chip-suggestion{--micl-chip-label: var(--md-comp-suggestion-chip-label-text-color);--micl-chip-icon: var(--md-comp-suggestion-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-suggestion-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-suggestion-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-suggestion-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-suggestion-chip-elevated-container-color)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{--md-comp-elevated-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-disabled-container-opacity: 12%;--md-comp-elevated-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));--md-comp-outlined-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));border-radius:var(--md-sys-shape-corner-small);padding-inline:16px;column-gap:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:last-child){padding-inline-end:8px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:18px;inline-size:18px;overflow:hidden;transition:inline-size 150ms cubic-bezier(0.31, 0.94, 0.34, 1)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon{color:var(--micl-chip-icon, var(--md-sys-color-primary))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-outline-color: var(--micl-chip-outline, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)){border-color:var(--micl-chip-disabled-outline, rgb(from var(--md-sys-color-on-surface) r g b/12%))}.micl-chips .micl-chip-input{--micl-chip-label: var(--md-comp-input-chip-label-text-color);--micl-chip-icon: var(--md-comp-input-chip-leading-icon-color, currentColor);--micl-chip-outline: var(--md-comp-input-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-input-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-input-chip-disabled-outline-color);padding-inline:0;column-gap:0;cursor:default}.micl-chips .micl-chip-input:has(>.micl-chip__primary:focus-visible){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):has(>.micl-chip__remove:is(:hover,:active)){--statelayer-opacity: 0%}.micl-chips .micl-chip-input:has(>:disabled) .micl-chip__avatar{opacity:var(--md-comp-input-chip-disabled-avatar-opacity, 38%)}.micl-chips .micl-chip-input:has(.micl-chip__avatar){border-radius:calc(var(--micl-height)/2)}.micl-chips .micl-chip-input:has(.micl-chip__avatar) .micl-chip__primary{border-start-start-radius:calc(var(--micl-height)/2 - 1px);border-end-start-radius:calc(var(--micl-height)/2 - 1px)}.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));color:inherit;background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-input .micl-chip__primary{background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%);block-size:100%;column-gap:8px;padding-inline:12px 5px;border-start-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-end-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-start-end-radius:0;border-end-end-radius:0;font:inherit}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-chip__avatar:first-child){padding-inline-start:4px}.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){outline:none}.micl-chips .micl-chip-input .micl-chip__primary::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);inset-inline-start:0;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%}.micl-chips .micl-chip-input .micl-chip__remove{inline-size:24px;block-size:24px;margin-inline:0 5px;border-radius:50%;font-size:18px}.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)){color:var(--md-comp-input-chip-trailing-icon-color, var(--md-comp-input-chip-leading-icon-color, currentColor))}.micl-chips .micl-chip-input .micl-chip__remove::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);inset-inline-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);block-size:var(--md-sys-state-target-size, 48px);inline-size:var(--md-sys-state-target-size, 48px)}.micl-chips .micl-chip-input .micl-chip__avatar{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:var(--md-comp-input-chip-avatar-size, 24px);inline-size:var(--md-comp-input-chip-avatar-size, 24px);border-radius:var(--md-comp-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 50%));color:var(--md-comp-input-chip-avatar-label-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-input-chip-avatar-color, var(--md-sys-color-primary-container));object-fit:cover;object-position:center}.micl-chips .micl-chip-filter input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon{margin-inline-start:-8px}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon:dir(rtl){margin-inline:0 -8px}.micl-chips .micl-chip-filter:has(input:not(:checked)) .micl-button__icon:has(+input){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked) .micl-button__icon:not(:has(+input)){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked){--micl-chip-statelayer: var(--md-sys-color-on-secondary-container);--micl-chip-label: var(--md-comp-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container));--micl-chip-icon: var(--md-comp-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));--micl-chip-outline: var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container));border-color:rgba(0,0,0,0);background-color:var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container))}.micl-chips .micl-chip-filter:has(input:checked):not(.micl-chip--elevated):not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}.micl-chips .micl-chip-filter:not(.micl-chip--elevated):has(input:disabled:checked){background-color:var(--md-comp-filter-chip-disabled-selected-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filter-chip-disabled-selected-container-opacity, 12%)))}.micl-chips .micl-chip--elevated{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-container-color: var(--micl-chip-elevated-container, var(--md-sys-color-surface-container-low))}.micl-chips--input{min-inline-size:0;flex-wrap:nowrap;min-inline-size:0;padding:10px 16px 13px;border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));border-radius:var(--md-sys-shape-corner-small);overflow-x:auto;scrollbar-width:thin}.micl-chips .micl-chip__remove:dir(rtl){margin-inline:5px 0}
1
+ :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion,.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--_motion-effects: var(--md-comp-button-motion-effects, cubic-bezier(0.42, 1.67, 0.21, 0.9));--_motion-duration: var(--md-comp-button-motion-duration, 350ms);--micl-ripple: 1;box-sizing:border-box;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:none;border-radius:calc(var(--micl-height)/2);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;transition:border-radius var(--_motion-duration) var(--_motion-effects),box-shadow var(--_motion-duration) var(--_motion-effects),background-size 0ms,--statelayer-opacity var(--_motion-duration) linear}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__primary:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__remove:is(:disabled,:has(input:disabled,>button:disabled)){cursor:default}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-variation-settings:"FILL" 0;transition:font-variation-settings var(--_motion-duration) linear}.micl-chips .micl-button--toggle.micl-chip-assist:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-filter:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-input:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-suggestion:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__primary:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__remove:not([aria-pressed=true]) .micl-button__icon::before{content:attr(data-miclicon)}.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-assist .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-filter .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-input .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-suggestion .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__primary .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__remove .micl-button__icon::before{content:attr(data-micliconselected)}.micl-chips .micl-chip-assist::before,.micl-chips .micl-chip-filter::before,.micl-chips .micl-chip-input::before,.micl-chips .micl-chip-suggestion::before{content:"";position:absolute;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-state-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-state-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px))/2);background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 32px;--micl-height: 32px;min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height);column-gap:4px;padding-inline:12px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:20px;inline-size:20px}.micl-chips .micl-chip--elevated{--statelayer-color: var(--md-sys-color-primary);background-color:var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));color:var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));box-shadow:var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1))}.micl-chips .micl-chip--elevated:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-elevated-button-disabled-container-opacity, 10%)));color:var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));box-shadow:var(--md-sys-elevation-level0)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level2)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary))}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-label-text-color, var(--md-sys-color-on-surface-variant));border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated){background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-outlined-button-disabled-label-text-opacity, 38%)))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){border:none;background-color:var(--md-comp-outlined-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-button-selected-disabled-container-opacity, 10%)))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon{font-variation-settings:"FILL" 1}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}.micl-chips{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:none}.micl-chips .micl-chips__headline{padding-block-end:4px;color:var(--md-sys-color-on-surface-variant)}.micl-chips .micl-chip-assist{--micl-chip-statelayer: var(--md-sys-color-on-surface);--micl-chip-label: var(--md-comp-assist-chip-label-text-color, var(--md-sys-color-on-surface));--micl-chip-icon: var(--md-comp-assist-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-assist-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-assist-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-assist-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-assist-chip-elevated-container-color)}.micl-chips .micl-chip-filter{--micl-chip-label: var(--md-comp-filter-chip-label-text-color);--micl-chip-icon: var(--md-comp-filter-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-filter-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-filter-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-filter-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-filter-chip-elevated-container-color)}.micl-chips .micl-chip-suggestion{--micl-chip-label: var(--md-comp-suggestion-chip-label-text-color);--micl-chip-icon: var(--md-comp-suggestion-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-suggestion-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-suggestion-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-suggestion-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-suggestion-chip-elevated-container-color)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{--md-comp-elevated-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-disabled-container-opacity: 12%;--md-comp-elevated-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));--md-comp-outlined-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));border-radius:var(--md-sys-shape-corner-small);padding-inline:16px;column-gap:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:last-child){padding-inline-end:8px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:18px;inline-size:18px;overflow:hidden;transition:inline-size 150ms cubic-bezier(0.31, 0.94, 0.34, 1)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon{color:var(--micl-chip-icon, var(--md-sys-color-primary))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-outline-color: var(--micl-chip-outline, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)){border-color:var(--micl-chip-disabled-outline, rgb(from var(--md-sys-color-on-surface) r g b/12%))}.micl-chips .micl-chip-input{--micl-chip-label: var(--md-comp-input-chip-label-text-color);--micl-chip-icon: var(--md-comp-input-chip-leading-icon-color, currentColor);--micl-chip-outline: var(--md-comp-input-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-input-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-input-chip-disabled-outline-color);padding-inline:0;column-gap:0;cursor:default}.micl-chips .micl-chip-input:has(>.micl-chip__primary:focus-visible){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):has(>.micl-chip__remove:is(:hover,:active)){--statelayer-opacity: 0%}.micl-chips .micl-chip-input:has(>:disabled) .micl-chip__avatar{opacity:var(--md-comp-input-chip-disabled-avatar-opacity, 38%)}.micl-chips .micl-chip-input:has(.micl-chip__avatar){border-radius:calc(var(--micl-height)/2)}.micl-chips .micl-chip-input:has(.micl-chip__avatar) .micl-chip__primary{border-start-start-radius:calc(var(--micl-height)/2 - 1px);border-end-start-radius:calc(var(--micl-height)/2 - 1px)}.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));color:inherit;background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-input .micl-chip__primary{background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%);block-size:100%;column-gap:8px;padding-inline:12px 5px;border-start-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-end-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-start-end-radius:0;border-end-end-radius:0;font:inherit}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-chip__avatar:first-child){padding-inline-start:4px}.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){outline:none}.micl-chips .micl-chip-input .micl-chip__primary::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);inset-inline-start:0;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%}.micl-chips .micl-chip-input .micl-chip__remove{inline-size:24px;block-size:24px;margin-inline:0 5px;border-radius:50%;font-size:18px}.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)){color:var(--md-comp-input-chip-trailing-icon-color, var(--md-comp-input-chip-leading-icon-color, currentColor))}.micl-chips .micl-chip-input .micl-chip__remove::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);inset-inline-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);block-size:var(--md-sys-state-target-size, 48px);inline-size:var(--md-sys-state-target-size, 48px)}.micl-chips .micl-chip-input .micl-chip__avatar{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:var(--md-comp-input-chip-avatar-size, 24px);inline-size:var(--md-comp-input-chip-avatar-size, 24px);border-radius:var(--md-comp-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 50%));color:var(--md-comp-input-chip-avatar-label-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-input-chip-avatar-color, var(--md-sys-color-primary-container));object-fit:cover;object-position:center}.micl-chips .micl-chip-filter input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon{margin-inline-start:-8px}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon:dir(rtl){margin-inline:0 -8px}.micl-chips .micl-chip-filter:has(input:not(:checked)) .micl-button__icon:has(+input){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked) .micl-button__icon:not(:has(+input)){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked){--micl-chip-statelayer: var(--md-sys-color-on-secondary-container);--micl-chip-label: var(--md-comp-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container));--micl-chip-icon: var(--md-comp-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));--micl-chip-outline: var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container));border-color:rgba(0,0,0,0);background-color:var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container))}.micl-chips .micl-chip-filter:has(input:checked):not(.micl-chip--elevated):not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}.micl-chips .micl-chip-filter:not(.micl-chip--elevated):has(input:disabled:checked){background-color:var(--md-comp-filter-chip-disabled-selected-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filter-chip-disabled-selected-container-opacity, 12%)))}.micl-chips .micl-chip--elevated{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-container-color: var(--micl-chip-elevated-container, var(--md-sys-color-surface-container-low))}.micl-chips--input{min-inline-size:0;flex-wrap:nowrap;min-inline-size:0;padding:10px 16px 13px;border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));border-radius:var(--md-sys-shape-corner-small);overflow-x:auto;scrollbar-width:thin}.micl-chips .micl-chip__remove:dir(rtl){margin-inline:5px 0}