material-inspired-component-library 9.0.2 → 9.1.1

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 (48) hide show
  1. package/README.md +5 -1
  2. package/components/bottomsheet/index.scss +2 -2
  3. package/components/button/_shared.scss +3 -3
  4. package/components/card/README.md +55 -25
  5. package/components/card/index.scss +57 -38
  6. package/components/checkbox/README.md +97 -28
  7. package/components/checkbox/index.scss +29 -19
  8. package/components/chip/index.scss +6 -6
  9. package/components/datepicker/index.scss +1 -1
  10. package/components/iconbutton/index.scss +3 -3
  11. package/components/list/index.scss +9 -5
  12. package/components/navigationrail/README.md +10 -9
  13. package/components/radio/README.md +52 -12
  14. package/components/radio/index.scss +53 -35
  15. package/components/stepper/index.scss +1 -1
  16. package/components/switch/README.md +32 -4
  17. package/components/switch/index.scss +45 -40
  18. package/components/timepicker/index.scss +1 -1
  19. package/dist/appbar.css +1 -1
  20. package/dist/bottomsheet.css +1 -1
  21. package/dist/button.css +1 -1
  22. package/dist/card.css +1 -1
  23. package/dist/checkbox.css +1 -1
  24. package/dist/checkbox.js +1 -1
  25. package/dist/chip.css +1 -1
  26. package/dist/components/checkbox/index.d.ts +1 -0
  27. package/dist/datepicker.css +1 -1
  28. package/dist/foundations/form/index.js +1 -1
  29. package/dist/iconbutton.css +1 -1
  30. package/dist/layout.css +1 -1
  31. package/dist/list.css +1 -1
  32. package/dist/micl.css +1 -1
  33. package/dist/micl.d.ts +0 -1
  34. package/dist/micl.js +1 -1
  35. package/dist/navigationbar.css +1 -1
  36. package/dist/navigationrail.css +1 -1
  37. package/dist/navigationrail.js +1 -1
  38. package/dist/radio.css +1 -1
  39. package/dist/sidesheet.css +1 -1
  40. package/dist/snackbar.css +1 -1
  41. package/dist/stepper.css +1 -1
  42. package/dist/stepper.js +1 -1
  43. package/dist/switch.css +1 -1
  44. package/dist/timepicker.css +1 -1
  45. package/foundations/layout/index.scss +6 -3
  46. package/package.json +3 -3
  47. package/{components/checkbox/_label.scss → styles/togglelabel.scss} +11 -3
  48. package/dist/components/navigationrail/index.d.ts +0 -7
package/components/switch/index.scss CHANGED
@@ -22,8 +22,7 @@
22
22
  @use '../../styles/motion';
23
23
  @use '../../styles/shape';
24
24
  @use '../../styles/statelayer';
25
- @use '../../styles/typography';
26
- @use '../checkbox/label';
25
+ @use '../../styles/togglelabel';
27
26
 
28
27
  @include shape.corner('full');
29
28
 
@@ -33,6 +32,7 @@
33
32
  @include statelayer.token('pressed-state-layer-opacity');
34
33
  @include statelayer.token('disabled-state-layer-opacity');
35
34
  @include statelayer.token('focus-indicator-thickness');
35
+ @include statelayer.token('focus-indicator-outer-offset');
36
36
 
37
37
  $switch: 'input[type=checkbox].micl-switch';
38
38
 
@@ -49,7 +49,9 @@ $switch: 'input[type=checkbox].micl-switch';
49
49
  --_handle-selected-size: var(--md-comp-switch-selected-handle-size, 24px);
50
50
  --_handle-pressed-size: var(--md-comp-switch-pressed-handle-size, 28px);
51
51
  --_layer: var(--md-sys-state-layer-size, 40px);
52
- --_target: var(--md-sys-target-size, 48px);
52
+ --_target: var(--md-sys-state-target-size, 48px);
53
+ --_unselected-layer-color: var(--md-comp-switch-unselected-state-layer-color, var(--md-sys-color-on-surface));
54
+ --_selected-layer-color: var(--md-comp-switch-selected-state-layer-color, var(--md-sys-color-primary));
53
55
 
54
56
  appearance: none;
55
57
  position: relative;
@@ -73,21 +75,20 @@ $switch: 'input[type=checkbox].micl-switch';
73
75
  background-color: var(--md-comp-switch-unselected-track-color, var(--md-sys-color-surface-container-highest));
74
76
  transition: background-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
75
77
  }
76
- // The handle: a state-layer-sized box whose transparent border shrinks the painted
77
- // content box to the handle size; the icon glyphs are rotated typeface characters,
78
- // with their metrics tuned in pixels against a 16px base.
79
78
  &::after {
80
79
  content: var(--md-comp-switch-unselected-icon);
81
80
  box-sizing: border-box;
82
81
  position: absolute;
82
+ display: grid;
83
+ grid-template-rows: auto 3px;
84
+ place-items: center;
83
85
  inline-size: var(--_layer);
84
86
  block-size: var(--_layer);
85
87
  inset: 0;
86
- inset-inline-start: calc((var(--_target) - var(--_layer) - 16px) / 2);
88
+ inset-inline-start: calc((var(--_track-height) - var(--_layer)) / 2);
87
89
  margin: auto 0;
88
- font: 300 16px / 16px var(--md-ref-typeface-plain);
90
+ font: 300 18px / 0 var(--md-ref-typeface-plain);
89
91
  color: var(--md-comp-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest));
90
- text-align: center;
91
92
  background-color: var(--md-comp-switch-unselected-handle-color, var(--md-sys-color-outline));
92
93
  background-clip: content-box;
93
94
  border: calc((var(--_layer) - var(--_handle-size)) / 2) solid transparent;
@@ -96,20 +97,21 @@ $switch: 'input[type=checkbox].micl-switch';
96
97
  transition:
97
98
  inset-inline-start var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
98
99
  border-width var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
99
- line-height var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
100
+ grid-template-rows var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
100
101
  color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
101
102
  border-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
102
103
  background-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
103
104
  }
104
105
  &:checked {
105
106
  &::before {
107
+ border-color: var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));
106
108
  background-color: var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));
107
109
  }
108
110
  &::after {
109
111
  content: var(--md-comp-switch-selected-icon);
110
- inset-inline-start: calc(var(--_track-width) - ((var(--_layer) + var(--_target) - 16px) / 2));
111
- font-size: 25.6px;
112
- line-height: 20.8px;
112
+ grid-template-rows: auto 8px;
113
+ inset-inline-start: calc(var(--_track-width) - ((var(--_layer) + var(--_track-height)) / 2));
114
+ font-size: 32px;
113
115
  letter-spacing: 1.6px;
114
116
  border: calc((var(--_layer) - var(--_handle-selected-size)) / 2) solid transparent;
115
117
  color: var(--md-comp-switch-selected-icon-color, var(--md-sys-color-on-primary-container));
@@ -121,82 +123,85 @@ $switch: 'input[type=checkbox].micl-switch';
121
123
 
122
124
  &:hover {
123
125
  &::after {
124
- border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
125
- background-color: var(--md-sys-color-on-surface-variant);
126
+ border-color: color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
127
+ background-color: var(--md-comp-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant));
126
128
  }
127
129
  &:checked::after {
128
- border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
129
- background-color: var(--md-sys-color-primary-container);
130
+ border-color: color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
131
+ background-color: var(--md-comp-switch-selected-hover-handle-color, var(--md-sys-color-primary-container));
130
132
  }
131
133
  }
132
134
  &:focus-visible {
133
135
  &::after {
134
- border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
136
+ border-color: color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
135
137
  }
136
138
  &::before {
137
- outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
138
- outline-offset: 2px;
139
+ outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-switch-focus-indicator-color, var(--md-sys-color-secondary));
140
+ outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
139
141
  }
140
142
  &:checked::after {
141
- border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
142
- background-color: var(--md-sys-color-primary-container);
143
+ border-color: color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
144
+ background-color: var(--md-comp-switch-selected-focus-handle-color, var(--md-sys-color-primary-container));
143
145
  }
144
146
  &:not(:checked)::after {
145
- background-color: var(--md-sys-color-on-surface-variant);
147
+ background-color: var(--md-comp-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant));
146
148
  }
147
149
  }
148
150
  &:active {
149
151
  &::after {
150
- line-height: 27.2px;
151
152
  border: calc((var(--_layer) - var(--_handle-pressed-size)) / 2) solid transparent;
152
- background-color: var(--md-sys-color-on-surface-variant);
153
+ background-color: var(--md-comp-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant));
153
154
  }
154
155
  &:checked::after {
155
- line-height: 25.6px;
156
156
  border-width: calc((var(--_layer) - var(--_handle-pressed-size)) / 2);
157
- border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
158
- background-color: var(--md-sys-color-primary-container);
157
+ border-color: color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
158
+ background-color: var(--md-comp-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container));
159
159
  }
160
160
  &:not(:checked)::after {
161
- border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
161
+ border-color: color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
162
162
  }
163
163
  }
164
164
  }
165
165
  &:disabled {
166
166
  &::before {
167
- border-color: var(--md-sys-color-on-surface);
168
- background-color: var(--md-sys-color-surface-container-highest);
169
- opacity: 12%;
167
+ border-color: var(--md-comp-switch-disabled-unselected-track-outline-color, var(--md-sys-color-on-surface));
168
+ background-color: var(--md-comp-switch-disabled-unselected-track-color, var(--md-sys-color-surface-container-highest));
169
+ opacity: var(--md-comp-switch-disabled-track-opacity, 12%);
170
170
  }
171
171
  &:checked::before {
172
- background-color: var(--md-sys-color-on-surface);
172
+ border-color: var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface));
173
+ background-color: var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface));
173
174
  }
174
175
  &::after {
175
- color: rgb(from var(--md-sys-color-surface-container-highest) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
176
- background-color: var(--md-sys-color-on-surface);
176
+ color: var(--md-comp-switch-disabled-unselected-icon-color, var(--md-sys-color-surface-container-highest));
177
+ background-color: var(--md-comp-switch-disabled-unselected-handle-color, var(--md-sys-color-on-surface));
177
178
  opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
178
179
  }
179
180
  &:checked::after {
180
- color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
181
- background-color: var(--md-sys-color-surface);
181
+ color: rgb(from var(--md-comp-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
182
+ background-color: var(--md-comp-switch-disabled-selected-handle-color, var(--md-sys-color-surface));
182
183
  opacity: 100%;
183
184
  }
184
185
  }
185
186
  }
186
187
 
187
188
  #{$switch}:not(:disabled) + label,
188
- label:has(+ #{$switch}:not(:disabled)) {
189
+ label:has(+ #{$switch}:not(:disabled)),
190
+ label:has(#{$switch}:not(:disabled)) {
189
191
  @extend %micl-toggle-label-pointer;
190
192
  }
191
193
  #{$switch} + label,
192
- label:has(+ #{$switch}) {
194
+ label:has(+ #{$switch}),
195
+ label:has(#{$switch}) {
193
196
  @extend %micl-toggle-label;
194
197
  }
195
198
  #{$switch}:disabled + label,
196
199
  label:has(+ #{$switch}:disabled) {
197
200
  @extend %micl-toggle-label-disabled;
198
201
  }
199
-
202
+ label:has(#{$switch}:disabled) {
203
+ @extend %micl-toggle-label-disabled-text;
204
+ }
200
205
  #{$switch}:dir(rtl)::after {
201
206
  transform: rotate(45deg) scaleY(-1);
202
207
  }
package/components/timepicker/index.scss CHANGED
@@ -76,7 +76,7 @@ dialog.micl-dialog.micl-timepicker {
76
76
  --_dial-size: var(--md-comp-time-picker-clock-dial-container-size, 256px);
77
77
  --_center-size: var(--md-comp-time-picker-clock-dial-selector-center-container-size, 8px);
78
78
  --_track-width: var(--md-comp-time-picker-clock-dial-selector-track-container-width, 2px);
79
- --_target: var(--md-sys-target-size, 48px);
79
+ --_target: var(--md-sys-state-target-size, 48px);
80
80
 
81
81
  .micl-dialog__headline {
82
82
  padding-block-end: 20px;
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}@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-comp-card-margin, 8px)}.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-comp-card-margin, 8px)}.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-comp-card-margin, 8px)}.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-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}}
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-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-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
+ 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}}
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-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-target-size, 48px)) - var(--md-sys-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-]){--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}
package/dist/card.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}body{--md-sys-elevation-level3: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 4px 8px 3px}body{--md-sys-elevation-level4: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 2px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 6px 10px 4px}:root{--md-sys-shape-corner-medium: 12px}: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-dragged-state-layer-opacity: 16%}: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-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-body-smallmedium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-smallmedium-size: 0.8125rem;--md-sys-typescale-body-smallmedium-line-height: 1.125rem;--md-sys-typescale-body-smallmedium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-smallmedium-tracking: 0.025rem}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined){--md-comp-card-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-card-motion-duration: 500ms;--_card-color: var(--md-sys-color-on-surface-variant);display:flex;flex-direction:column;block-size:fit-content;margin:0;outline:none;overflow:hidden;interpolate-size:allow-keywords;border-radius:var(--_card-shape);background-color:var(--_card-background-color);box-shadow:var(--_card-elevation);border:var(--_card-border, none);opacity:var(--_card-opacity, 1);pointer-events:var(--_card-pointer-events, auto)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not(.micl-card--compact):not(:has(>summary)){row-gap:var(--md-comp-card-gap, 8px)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]),:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary{--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%;transition:background-size 0ms,--statelayer-opacity var(--md-comp-card-motion-duration) linear}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):is(:hover,:focus-visible,:active,.micl-card--dragging),:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:is(:hover,:focus-visible,:active,.micl-card--dragging){--_card-color: var(--md-sys-color-on-surface)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):hover,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:hover{--statelayer-color: var(--_card-hover-state-color);--statelayer-opacity: var(--_card-hover-state-opacity);cursor:pointer}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):focus-visible,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:focus-visible{--statelayer-color: var(--_card-focus-state-color);--statelayer-opacity: var(--_card-focus-state-opacity)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):active,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:active{--statelayer-color: var(--_card-pressed-state-color);--statelayer-opacity: var(--_card-pressed-state-opacity)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]).micl-card--dragging,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary.micl-card--dragging{--statelayer-color: var(--_card-dragged-state-color);--statelayer-opacity: var(--_card-dragged-state-opacity);cursor:grabbing}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]).micl-rippling,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary.micl-rippling{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.722)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]) .micl-card__content,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary .micl-card__content{background-color:rgba(0,0,0,0)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):hover,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([tabindex="0"]):not([inert]):has(>summary:hover){box-shadow:var(--_card-hover-elevation);border-color:var(--_card-hover-border-color, var(--_card-border-color, transparent))}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):focus-visible,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([tabindex="0"]):not([inert]):has(>summary:focus-visible){box-shadow:var(--_card-focus-elevation);border-color:var(--_card-focus-border-color, transparent);outline:var(--_card-focus-outline-thickness, 0px) solid var(--_card-focus-outline-color, transparent);outline-offset:var(--_card-focus-outline-offset, 0px)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]):active,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([tabindex="0"]):not([inert]):has(>summary:active){box-shadow:var(--_card-pressed-elevation);border-color:var(--_card-pressed-border-color, transparent)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[tabindex="0"]:not([inert]).micl-card--dragging{box-shadow:var(--_card-dragged-elevation);border-color:var(--_card-dragged-border-color, transparent)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)::details-content{block-size:0;overflow:hidden;transition:block-size var(--md-comp-card-motion-duration) var(--md-comp-card-motion-spatial),content-visibility var(--md-comp-card-motion-duration) linear allow-discrete}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[open]::details-content{block-size:auto}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>summary{display:flex;flex-direction:column;padding-block-end:var(--md-comp-card-content-padding-block, 16px);outline:none;list-style:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>summary:not(.micl-card--compact){row-gap:var(--md-comp-card-gap, 8px)}.micl-card-elevated{--_card-shape: var(--md-comp-elevated-card-container-shape, var(--md-sys-shape-corner-medium));--_card-background-color: var(--md-comp-elevated-card-container-color, var(--md-sys-color-surface-container-low));--_card-elevation: var(--md-comp-elevated-card-container-elevation, var(--md-sys-elevation-level1));--_card-hover-state-color: var(--md-comp-elevated-card-hover-state-layer-color, var(--md-sys-color-on-surface));--_card-hover-state-opacity: var(--md-comp-elevated-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));--_card-hover-elevation: var(--md-comp-elevated-card-hover-container-elevation, var(--md-sys-elevation-level2));--_card-focus-state-color: var(--md-comp-elevated-card-focus-state-layer-color, var(--md-sys-color-on-surface));--_card-focus-state-opacity: var(--md-comp-elevated-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));--_card-focus-elevation: var(--md-comp-elevated-card-focus-container-elevation, var(--md-sys-elevation-level1));--_card-pressed-state-color: var(--md-comp-elevated-card-pressed-state-layer-color, var(--md-sys-color-on-surface));--_card-pressed-state-opacity: var(--md-comp-elevated-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));--_card-pressed-elevation: var(--md-comp-elevated-card-pressed-container-elevation, var(--md-sys-elevation-level1));--_card-dragged-state-color: var(--md-comp-elevated-card-dragged-state-layer-color, var(--md-sys-color-on-surface));--_card-dragged-state-opacity: var(--md-comp-elevated-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));--_card-dragged-elevation: var(--md-comp-elevated-card-dragged-container-elevation, var(--md-sys-elevation-level4))}.micl-card-elevated[inert]{--_card-background-color: var(--md-comp-elevated-card-disabled-container-color, var(--md-sys-color-surface));--_card-elevation: var(--md-comp-elevated-card-disabled-container-elevation, var(--md-sys-elevation-level1));--_card-opacity: var(--md-comp-elevated-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));--_card-pointer-events: none}.micl-card-elevated{--_card-focus-outline-thickness: var(--md-comp-elevated-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));--_card-focus-outline-color: var(--md-comp-elevated-card-focus-indicator-color, var(--md-sys-color-secondary));--_card-focus-outline-offset: var(--md-comp-elevated-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset))}.micl-card-filled{--_card-shape: var(--md-comp-filled-card-container-shape, var(--md-sys-shape-corner-medium));--_card-background-color: var(--md-comp-filled-card-container-color, var(--md-sys-color-surface-container-highest));--_card-elevation: var(--md-comp-filled-card-container-elevation, var(--md-sys-elevation-level0));--_card-hover-state-color: var(--md-comp-filled-card-hover-state-layer-color, var(--md-sys-color-on-surface));--_card-hover-state-opacity: var(--md-comp-filled-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));--_card-hover-elevation: var(--md-comp-filled-card-hover-container-elevation, var(--md-sys-elevation-level1));--_card-focus-state-color: var(--md-comp-filled-card-focus-state-layer-color, var(--md-sys-color-on-surface));--_card-focus-state-opacity: var(--md-comp-filled-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));--_card-focus-elevation: var(--md-comp-filled-card-focus-container-elevation, var(--md-sys-elevation-level0));--_card-pressed-state-color: var(--md-comp-filled-card-pressed-state-layer-color, var(--md-sys-color-on-surface));--_card-pressed-state-opacity: var(--md-comp-filled-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));--_card-pressed-elevation: var(--md-comp-filled-card-pressed-container-elevation, var(--md-sys-elevation-level0));--_card-dragged-state-color: var(--md-comp-filled-card-dragged-state-layer-color, var(--md-sys-color-on-surface));--_card-dragged-state-opacity: var(--md-comp-filled-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));--_card-dragged-elevation: var(--md-comp-filled-card-dragged-container-elevation, var(--md-sys-elevation-level3))}.micl-card-filled[inert]{--_card-background-color: var(--md-comp-filled-card-disabled-container-color, var(--md-sys-color-surface-variant));--_card-elevation: var(--md-comp-filled-card-disabled-container-elevation, var(--md-sys-elevation-level0));--_card-opacity: var(--md-comp-filled-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));--_card-pointer-events: none}.micl-card-filled{--_card-focus-outline-thickness: var(--md-comp-filled-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));--_card-focus-outline-color: var(--md-comp-filled-card-focus-indicator-color, var(--md-sys-color-secondary));--_card-focus-outline-offset: var(--md-comp-filled-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset))}.micl-card-outlined{--_card-shape: var(--md-comp-outlined-card-container-shape, var(--md-sys-shape-corner-medium));--_card-background-color: var(--md-comp-outlined-card-container-color, var(--md-sys-color-surface));--_card-elevation: var(--md-comp-outlined-card-container-elevation, var(--md-sys-elevation-level0));--_card-hover-state-color: var(--md-comp-outlined-card-hover-state-layer-color, var(--md-sys-color-on-surface));--_card-hover-state-opacity: var(--md-comp-outlined-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));--_card-hover-elevation: var(--md-comp-outlined-card-hover-container-elevation, var(--md-sys-elevation-level1));--_card-focus-state-color: var(--md-comp-outlined-card-focus-state-layer-color, var(--md-sys-color-on-surface));--_card-focus-state-opacity: var(--md-comp-outlined-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));--_card-focus-elevation: var(--md-comp-outlined-card-focus-container-elevation, var(--md-sys-elevation-level0));--_card-pressed-state-color: var(--md-comp-outlined-card-pressed-state-layer-color, var(--md-sys-color-on-surface));--_card-pressed-state-opacity: var(--md-comp-outlined-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));--_card-pressed-elevation: var(--md-comp-outlined-card-pressed-container-elevation, var(--md-sys-elevation-level0));--_card-dragged-state-color: var(--md-comp-outlined-card-dragged-state-layer-color, var(--md-sys-color-on-surface));--_card-dragged-state-opacity: var(--md-comp-outlined-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));--_card-dragged-elevation: var(--md-comp-outlined-card-dragged-container-elevation, var(--md-sys-elevation-level3))}.micl-card-outlined[inert]{--_card-background-color: var(--md-comp-outlined-card-disabled-container-color, var(--md-sys-color-surface));--_card-elevation: var(--md-comp-outlined-card-disabled-container-elevation, var(--md-sys-elevation-level0));--_card-opacity: var(--md-comp-outlined-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));--_card-pointer-events: none}.micl-card-outlined{--_card-focus-outline-thickness: var(--md-comp-outlined-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));--_card-focus-outline-color: var(--md-comp-outlined-card-focus-indicator-color, var(--md-sys-color-secondary));--_card-focus-outline-offset: var(--md-comp-outlined-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset));--_card-border-width: var(--md-comp-outlined-card-outline-width, 1px);--_card-border: var(--_card-border-width) solid var(--_card-border-color, var(--md-comp-outlined-card-outline-color, var(--md-sys-color-outline-variant)));--_card-hover-border-color: var(--md-comp-outlined-card-hover-outline-color, var(--md-sys-color-outline-variant));--_card-focus-border-color: var(--md-comp-outlined-card-focus-outline-color, var(--md-sys-color-on-surface));--_card-pressed-border-color: var(--md-comp-outlined-card-pressed-outline-color, var(--md-sys-color-outline-variant));--_card-dragged-border-color: var(--md-comp-outlined-card-dragged-outline-color, var(--md-sys-color-outline-variant))}.micl-card-outlined[inert]{--_card-border-color: rgb(from var(--md-comp-outlined-card-disabled-outline-color, var(--md-sys-color-outline)) r g b / var(--md-comp-outlined-card-disabled-outline-opacity, 12%))}.micl-card__image{display:block;inline-size:100%;background-position:center;background-repeat:no-repeat;background-size:contain;border-radius:var(--_card-shape)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>[class*=micl-card__headline-]:first-child,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>summary>[class*=micl-card__headline-]:first-child{padding-block-start:var(--md-comp-card-content-padding-block, 16px)}[class*=micl-card__headline-]{display:flex;align-items:center;column-gap:var(--md-comp-card-gap, 8px);color:var(--_card-color)}[class*=micl-card__headline-] :is(h1,h2,h3,h4,h5,h6,.micl-heading){flex:1 2 fit-content;margin:0;padding-inline:var(--md-comp-card-padding-inline, 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[class*=micl-card__headline-] :is(h1,h2,h3,h4,h5,h6,.micl-heading):has(+button){padding-inline-end:0}[class*=micl-card__headline-]:has(button){margin-block:0}.micl-card__headline-s :is(h1,h2,h3,h4,h5,h6,.micl-heading){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-card__headline-m :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-card__headline-l :is(h1,h2,h3,h4,h5,h6,.micl-heading){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-card__subhead{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:block;margin:calc(-1*var(--md-comp-card-gap, 8px)) 0 var(--md-comp-card-gap, 8px) 0;padding:0 var(--md-comp-card-padding-inline, 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_card-color)}.micl-card__supporting-text{font:var(--md-sys-typescale-body-smallmedium-weight) var(--md-sys-typescale-body-smallmedium-size)/var(--md-sys-typescale-body-smallmedium-line-height) var(--md-sys-typescale-body-smallmedium-font);letter-spacing:var(--md-sys-typescale-body-smallmedium-tracking);display:block;margin:0;padding:0 var(--md-comp-card-padding-inline, 16px);color:var(--_card-color)}.micl-card__content{box-sizing:border-box;padding-block:var(--md-comp-card-content-padding-block, 16px);padding-inline:var(--md-comp-card-padding-inline, 16px);overflow:clip visible}.micl-card__actions{box-sizing:border-box;display:flex;flex-shrink:0;flex-wrap:wrap;gap:8px;padding-block:0 var(--md-comp-card-content-padding-block, 16px);padding-inline:var(--md-comp-card-padding-inline, 16px)}.micl-card__actions.micl-card__actions--outset-start{padding-inline-start:calc(var(--md-comp-card-padding-inline, 16px) - 16px)}.micl-card__actions.micl-card__actions--outset-end{padding-inline-end:calc(var(--md-comp-card-padding-inline, 16px) - 16px)}.micl-card--compact,summary.micl-card--compact{display:grid;grid-template-columns:20% 1fr;padding-block-end:0}.micl-card--compact .micl-card__image,summary.micl-card--compact .micl-card__image{grid-column:1;grid-row:1/span 4;block-size:100%;background-size:cover}.micl-card--compact [class*=micl-card__headline-],.micl-card--compact .micl-card__subhead,.micl-card--compact .micl-card__supporting-text,summary.micl-card--compact [class*=micl-card__headline-],summary.micl-card--compact .micl-card__subhead,summary.micl-card--compact .micl-card__supporting-text{grid-column:2;min-inline-size:0}.micl-card--compact [class*=micl-card__headline-],.micl-card--compact .micl-card__supporting-text,summary.micl-card--compact [class*=micl-card__headline-],summary.micl-card--compact .micl-card__supporting-text{margin-block-start:var(--md-comp-card-gap, 8px)}.micl-card--compact .micl-card__subhead,summary.micl-card--compact .micl-card__subhead{margin-block-start:0}.micl-card--compact .micl-card__content,summary.micl-card--compact .micl-card__content{grid-column:1/span 2}.micl-card--compact:not(:has(.micl-card__content))>:last-child,summary.micl-card--compact:not(:has(.micl-card__content))>:last-child{margin-block-end:var(--md-comp-card-gap, 8px)}
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}body{--md-sys-elevation-level3: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 4px 8px 3px}body{--md-sys-elevation-level4: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 2px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 6px 10px 4px}:root{--md-sys-shape-corner-medium: 12px}: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-dragged-state-layer-opacity: 16%}: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-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-body-smallmedium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-smallmedium-size: 0.8125rem;--md-sys-typescale-body-smallmedium-line-height: 1.125rem;--md-sys-typescale-body-smallmedium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-smallmedium-tracking: 0.025rem}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined){--_card-motion-spatial: var(--md-comp-card-motion-spatial, cubic-bezier(0.38, 1.21, 0.22, 1));--_card-motion-duration: var(--md-comp-card-motion-duration, 500ms);--_card-ripple-duration: var(--md-sys-state-ripple-duration);--_card-color: var(--md-sys-color-on-surface-variant);display:flex;flex-direction:column;block-size:fit-content;margin:0;border:var(--_card-border, none);border-radius:var(--_card-shape);outline:none;background-color:var(--_card-background-color);box-shadow:var(--_card-elevation);text-decoration:none;opacity:var(--_card-opacity, 1);color:inherit;overflow:hidden;interpolate-size:allow-keywords}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not(.micl-card--compact):not(:has(>summary)){row-gap:var(--md-comp-card-gap, 8px)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]),:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary{--micl-ripple: 1;--statelayer-color: var(--_card-hover-state-color);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);transition:background-size 0ms,--statelayer-opacity var(--_card-motion-duration) linear}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):is(:hover,:focus-visible,:active,.micl-card--dragging),:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:is(:hover,:focus-visible,:active,.micl-card--dragging){--_card-color: var(--md-sys-color-on-surface)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):hover,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:hover{--statelayer-color: var(--_card-hover-state-color);--statelayer-opacity: var(--_card-hover-state-opacity);cursor:pointer}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):focus-visible,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:focus-visible{--statelayer-color: var(--_card-focus-state-color);--statelayer-opacity: var(--_card-focus-state-opacity)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):active,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary:active{--statelayer-color: var(--_card-pressed-state-color);--statelayer-opacity: var(--_card-pressed-state-opacity)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]).micl-card--dragging,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary.micl-card--dragging{--statelayer-color: var(--_card-dragged-state-color);--statelayer-opacity: var(--_card-dragged-state-opacity);cursor:grabbing}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]).micl-rippling,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary.micl-rippling{animation:micl-ripple calc(var(--_card-ripple-duration)*1.722)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]) .micl-card__content,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not([inert])>summary .micl-card__content{background-color:rgba(0,0,0,0)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):hover,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not(:is([tabindex="0"],a[href])):not([inert]):has(>summary:hover){box-shadow:var(--_card-hover-elevation);border-color:var(--_card-hover-border-color, var(--_card-border-color, transparent))}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):focus-visible,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not(:is([tabindex="0"],a[href])):not([inert]):has(>summary:focus-visible){box-shadow:var(--_card-focus-elevation);border-color:var(--_card-focus-border-color, transparent);outline:var(--_card-focus-outline-thickness) solid var(--_card-focus-outline-color);outline-offset:var(--_card-focus-outline-offset)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]):active,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):not(:is([tabindex="0"],a[href])):not([inert]):has(>summary:active){box-shadow:var(--_card-pressed-elevation);border-color:var(--_card-pressed-border-color, transparent)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined):is([tabindex="0"],a[href]):not([inert]).micl-card--dragging{box-shadow:var(--_card-dragged-elevation);border-color:var(--_card-dragged-border-color, transparent)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)::details-content{block-size:0;overflow:hidden;transition:block-size var(--_card-motion-duration) var(--_card-motion-spatial),content-visibility var(--_card-motion-duration) linear allow-discrete}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)[open]::details-content{block-size:auto}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>summary{display:flex;flex-direction:column;padding-block-end:var(--md-comp-card-content-padding-block, 16px);outline:none;list-style:none;cursor:pointer}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>summary:not(.micl-card--compact){row-gap:var(--md-comp-card-gap, 8px)}@media(prefers-reduced-motion: reduce){:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined){--_card-motion-duration: 0ms;--_card-ripple-duration: 0ms}}.micl-card-elevated{--_card-shape: var(--md-comp-elevated-card-container-shape, var(--md-sys-shape-corner-medium));--_card-background-color: var(--md-comp-elevated-card-container-color, var(--md-sys-color-surface-container-low));--_card-elevation: var(--md-comp-elevated-card-container-elevation, var(--md-sys-elevation-level1));--_card-hover-state-color: var(--md-comp-elevated-card-hover-state-layer-color, var(--md-sys-color-on-surface));--_card-hover-state-opacity: var(--md-comp-elevated-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));--_card-hover-elevation: var(--md-comp-elevated-card-hover-container-elevation, var(--md-sys-elevation-level2));--_card-focus-state-color: var(--md-comp-elevated-card-focus-state-layer-color, var(--md-sys-color-on-surface));--_card-focus-state-opacity: var(--md-comp-elevated-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));--_card-focus-elevation: var(--md-comp-elevated-card-focus-container-elevation, var(--md-sys-elevation-level1));--_card-pressed-state-color: var(--md-comp-elevated-card-pressed-state-layer-color, var(--md-sys-color-on-surface));--_card-pressed-state-opacity: var(--md-comp-elevated-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));--_card-pressed-elevation: var(--md-comp-elevated-card-pressed-container-elevation, var(--md-sys-elevation-level1));--_card-dragged-state-color: var(--md-comp-elevated-card-dragged-state-layer-color, var(--md-sys-color-on-surface));--_card-dragged-state-opacity: var(--md-comp-elevated-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));--_card-dragged-elevation: var(--md-comp-elevated-card-dragged-container-elevation, var(--md-sys-elevation-level4))}.micl-card-elevated[inert]{--_card-background-color: var(--md-comp-elevated-card-disabled-container-color, var(--md-sys-color-surface));--_card-elevation: var(--md-comp-elevated-card-disabled-container-elevation, var(--md-sys-elevation-level1));--_card-opacity: var(--md-comp-elevated-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));pointer-events:none}.micl-card-elevated{--_card-focus-outline-thickness: var(--md-comp-elevated-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));--_card-focus-outline-color: var(--md-comp-elevated-card-focus-indicator-color, var(--md-sys-color-secondary));--_card-focus-outline-offset: var(--md-comp-elevated-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset))}.micl-card-filled{--_card-shape: var(--md-comp-filled-card-container-shape, var(--md-sys-shape-corner-medium));--_card-background-color: var(--md-comp-filled-card-container-color, var(--md-sys-color-surface-container-highest));--_card-elevation: var(--md-comp-filled-card-container-elevation, var(--md-sys-elevation-level0));--_card-hover-state-color: var(--md-comp-filled-card-hover-state-layer-color, var(--md-sys-color-on-surface));--_card-hover-state-opacity: var(--md-comp-filled-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));--_card-hover-elevation: var(--md-comp-filled-card-hover-container-elevation, var(--md-sys-elevation-level1));--_card-focus-state-color: var(--md-comp-filled-card-focus-state-layer-color, var(--md-sys-color-on-surface));--_card-focus-state-opacity: var(--md-comp-filled-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));--_card-focus-elevation: var(--md-comp-filled-card-focus-container-elevation, var(--md-sys-elevation-level0));--_card-pressed-state-color: var(--md-comp-filled-card-pressed-state-layer-color, var(--md-sys-color-on-surface));--_card-pressed-state-opacity: var(--md-comp-filled-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));--_card-pressed-elevation: var(--md-comp-filled-card-pressed-container-elevation, var(--md-sys-elevation-level0));--_card-dragged-state-color: var(--md-comp-filled-card-dragged-state-layer-color, var(--md-sys-color-on-surface));--_card-dragged-state-opacity: var(--md-comp-filled-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));--_card-dragged-elevation: var(--md-comp-filled-card-dragged-container-elevation, var(--md-sys-elevation-level3))}.micl-card-filled[inert]{--_card-background-color: var(--md-comp-filled-card-disabled-container-color, var(--md-sys-color-surface-variant));--_card-elevation: var(--md-comp-filled-card-disabled-container-elevation, var(--md-sys-elevation-level0));--_card-opacity: var(--md-comp-filled-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));pointer-events:none}.micl-card-filled{--_card-focus-outline-thickness: var(--md-comp-filled-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));--_card-focus-outline-color: var(--md-comp-filled-card-focus-indicator-color, var(--md-sys-color-secondary));--_card-focus-outline-offset: var(--md-comp-filled-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset))}.micl-card-outlined{--_card-shape: var(--md-comp-outlined-card-container-shape, var(--md-sys-shape-corner-medium));--_card-background-color: var(--md-comp-outlined-card-container-color, var(--md-sys-color-surface));--_card-elevation: var(--md-comp-outlined-card-container-elevation, var(--md-sys-elevation-level0));--_card-hover-state-color: var(--md-comp-outlined-card-hover-state-layer-color, var(--md-sys-color-on-surface));--_card-hover-state-opacity: var(--md-comp-outlined-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));--_card-hover-elevation: var(--md-comp-outlined-card-hover-container-elevation, var(--md-sys-elevation-level1));--_card-focus-state-color: var(--md-comp-outlined-card-focus-state-layer-color, var(--md-sys-color-on-surface));--_card-focus-state-opacity: var(--md-comp-outlined-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));--_card-focus-elevation: var(--md-comp-outlined-card-focus-container-elevation, var(--md-sys-elevation-level0));--_card-pressed-state-color: var(--md-comp-outlined-card-pressed-state-layer-color, var(--md-sys-color-on-surface));--_card-pressed-state-opacity: var(--md-comp-outlined-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));--_card-pressed-elevation: var(--md-comp-outlined-card-pressed-container-elevation, var(--md-sys-elevation-level0));--_card-dragged-state-color: var(--md-comp-outlined-card-dragged-state-layer-color, var(--md-sys-color-on-surface));--_card-dragged-state-opacity: var(--md-comp-outlined-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));--_card-dragged-elevation: var(--md-comp-outlined-card-dragged-container-elevation, var(--md-sys-elevation-level3))}.micl-card-outlined[inert]{--_card-background-color: var(--md-comp-outlined-card-disabled-container-color, var(--md-sys-color-surface));--_card-elevation: var(--md-comp-outlined-card-disabled-container-elevation, var(--md-sys-elevation-level0));--_card-opacity: var(--md-comp-outlined-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));pointer-events:none}.micl-card-outlined{--_card-focus-outline-thickness: var(--md-comp-outlined-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));--_card-focus-outline-color: var(--md-comp-outlined-card-focus-indicator-color, var(--md-sys-color-secondary));--_card-focus-outline-offset: var(--md-comp-outlined-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset));--_card-border-width: var(--md-comp-outlined-card-outline-width, 1px);--_card-border: var(--_card-border-width) solid var(--_card-border-color, var(--md-comp-outlined-card-outline-color, var(--md-sys-color-outline-variant)));--_card-hover-border-color: var(--md-comp-outlined-card-hover-outline-color, var(--md-sys-color-outline-variant));--_card-focus-border-color: var(--md-comp-outlined-card-focus-outline-color, var(--md-sys-color-on-surface));--_card-pressed-border-color: var(--md-comp-outlined-card-pressed-outline-color, var(--md-sys-color-outline-variant));--_card-dragged-border-color: var(--md-comp-outlined-card-dragged-outline-color, var(--md-sys-color-outline-variant))}.micl-card-outlined[inert]{--_card-border-color: rgb(from var(--md-comp-outlined-card-disabled-outline-color, var(--md-sys-color-outline)) r g b / var(--md-comp-outlined-card-disabled-outline-opacity, 12%))}.micl-card__image{display:block;inline-size:100%;object-fit:contain;background-position:center;background-repeat:no-repeat;background-size:contain;border-radius:var(--_card-shape)}:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>:is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l):first-child,:is(.micl-card-elevated,.micl-card-filled,.micl-card-outlined)>summary>:is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l):first-child{padding-block-start:var(--md-comp-card-content-padding-block, 16px)}:is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l){display:flex;align-items:center;column-gap:var(--md-comp-card-gap, 8px);color:var(--_card-color)}:is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l) :is(h1,h2,h3,h4,h5,h6,.micl-heading){flex:1 2 fit-content;margin:0;padding-inline:var(--md-comp-card-padding-inline, 16px);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--md-comp-card-headline-line-clamp, 1)}:is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l) :is(h1,h2,h3,h4,h5,h6,.micl-heading):has(+button){padding-inline-end:0}.micl-card__headline-s :is(h1,h2,h3,h4,h5,h6,.micl-heading){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-card__headline-m :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-card__headline-l :is(h1,h2,h3,h4,h5,h6,.micl-heading){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-card__subhead{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:-webkit-box;overflow:hidden;margin:0 0 var(--md-comp-card-gap, 8px) 0;padding:0 var(--md-comp-card-padding-inline, 16px);-webkit-box-orient:vertical;-webkit-line-clamp:var(--md-comp-card-subhead-line-clamp, 1);color:var(--_card-color)}.micl-card__subhead:not(:first-child){margin-block-start:calc(-1*var(--md-comp-card-gap, 8px))}.micl-card__supporting-text{font:var(--md-sys-typescale-body-smallmedium-weight) var(--md-sys-typescale-body-smallmedium-size)/var(--md-sys-typescale-body-smallmedium-line-height) var(--md-sys-typescale-body-smallmedium-font);letter-spacing:var(--md-sys-typescale-body-smallmedium-tracking);display:block;margin:0;padding:0 var(--md-comp-card-padding-inline, 16px);color:var(--_card-color)}.micl-card__content{box-sizing:border-box;padding-block:var(--md-comp-card-content-padding-block, 16px);padding-inline:var(--md-comp-card-padding-inline, 16px);overflow:clip visible}.micl-card__actions{box-sizing:border-box;display:flex;flex-shrink:0;flex-wrap:wrap;gap:var(--md-comp-card-gap, 8px);padding-block:0 var(--md-comp-card-content-padding-block, 16px);padding-inline:var(--md-comp-card-padding-inline, 16px)}.micl-card__actions.micl-card__actions--outset-start{padding-inline-start:calc(var(--md-comp-card-padding-inline, 16px) - 16px)}.micl-card__actions.micl-card__actions--outset-end{padding-inline-end:calc(var(--md-comp-card-padding-inline, 16px) - 16px)}.micl-card--compact{display:grid;grid-template-columns:20% 1fr}.micl-card--compact .micl-card__image{grid-column:1;grid-row:1/span 4;block-size:100%;object-fit:cover;background-size:cover}.micl-card--compact :is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l),.micl-card--compact .micl-card__subhead,.micl-card--compact .micl-card__supporting-text{grid-column:2;min-inline-size:0}.micl-card--compact :is(.micl-card__headline-s,.micl-card__headline-m,.micl-card__headline-l),.micl-card--compact .micl-card__supporting-text{margin-block-start:var(--md-comp-card-gap, 8px)}.micl-card--compact .micl-card__subhead{margin-block-start:0}.micl-card--compact .micl-card__content{grid-column:1/span 2}.micl-card--compact:not(:has(.micl-card__content))>:last-child{margin-block-end:var(--md-comp-card-gap, 8px)}summary.micl-card--compact{display:grid;padding-block-end:0}
package/dist/checkbox.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}input[type=checkbox].micl-checkbox:not(:disabled)+label,label:has(+input[type=checkbox].micl-checkbox:not(:disabled)){-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}input[type=checkbox].micl-checkbox+label,label:has(+input[type=checkbox].micl-checkbox){color:var(--md-sys-color-on-surface)}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%)}: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-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);--statelayer-color: var(--md-sys-color-on-surface);appearance:none;box-sizing:border-box;position:relative;inline-size:var(--md-sys-target-size, 48px);min-inline-size:var(--md-sys-target-size, 48px);block-size:var(--md-sys-target-size, 48px);min-block-size:var(--md-sys-target-size, 48px);margin:0;border:calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px))/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:-4px}input[type=checkbox].micl-checkbox::before{--_check-width: calc(var(--_size) - 3px);--_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:1px;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 2px 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: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(--_size) - 5px) 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:2px;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) - 2px))}input[type=checkbox].micl-checkbox:dir(rtl):checked::before{clip-path:rect(0 var(--_size) var(--_size) 2px);transform:rotate(45deg)}input[type=checkbox].micl-checkbox:dir(rtl):indeterminate::before{clip-path:rect(0 var(--_size) var(--_size) 2px);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{--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)}
package/dist/checkbox.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,o){const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},c=()=>Object.keys(n.map).join(","),r=e=>Object.entries(n.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],i=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=c();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const n=r(o),i=e.type;n&&"function"==typeof n.component[i]&&n.component[i]?.(e)},a=()=>{n.activated||(n.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=c();t&&e.matches(t)&&i(e),t&&e.querySelectorAll(t).forEach(i)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=c();t&&e.matches(t)&&l(e),(e=>{const t=c();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=c();t&&e.querySelectorAll(t).forEach(i),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),a()};"loading"!==document.readyState?a():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(i),t)])}};const t={};function o(n){const c=t[n];if(void 0!==c)return c.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 c=t[n++],r=t[n++];o.o(e,c)?0===r&&n++:0===r?Object.defineProperty(e,c,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,c,{enumerable:!0,get:r})}else for(var c in t)o.o(t,c)&&!o.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:t[c]})},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 c=o(56);const r=".micl-checkbox-group",i=e=>{const t=e.querySelector(".micl-checkbox__parent");return t?.closest(r)===e?t:null},l=e=>{const t=i(e);if(!t)return!1;let o=0,n=0;return e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(c=>{if(c!==t){const t=c.closest(r);t===e?(o++,c.checked&&!c.indeterminate&&n++):c.classList.contains("micl-checkbox__parent")&&t?.parentElement?.closest(r)===e&&(o++,l(t)&&n++)}}),0===n?(t.checked=!1,t.indeterminate=!1):n===o?(t.checked=!0,t.indeterminate=!1):(t.checked=!0,t.indeterminate=!0),n===o},s=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(o=>{const n=o.closest(r);n===e?o.checked=t:o.classList.contains("micl-checkbox__parent")&&n?.parentElement?.closest(r)===e&&(o.checked=t,s(n,t))})},a=(e,t)=>{const o=i(e);if(!o)return;t===o&&s(e,t.checked);let n,c=e;do{n=c,c=c.parentElement?.closest(r)}while(c);l(n)},d=(0,c.register)(r,{initialize:e=>{e.matches(r)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",t=>{const o=t.target;o.classList.contains("micl-checkbox")&&(t.stopPropagation(),a(e,o))}),a(e,null))}},HTMLElement);return o.d(n,["checkboxGroupSelector",0,r,"default",0,d]),n})());
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},c=()=>Object.keys(o.map).join(","),r=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],i=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=c();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=r(n),i=e.type;o&&"function"==typeof o.component[i]&&o.component[i]?.(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=c();t&&e.matches(t)&&i(e),t&&e.querySelectorAll(t).forEach(i)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=c();t&&e.matches(t)&&l(e),(e=>{const t=c();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=c();t&&e.querySelectorAll(t).forEach(i),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(i),t)])}};const t={};function n(o){const c=t[o];if(void 0!==c)return c.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 c=t[o++],r=t[o++];n.o(e,c)?0===r&&o++:0===r?Object.defineProperty(e,c,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,c,{enumerable:!0,get:r})}else for(var c in t)n.o(t,c)&&!n.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:t[c]})},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 c=n(56);const r=".micl-checkbox-group";let i=!1;const l=e=>{for(const t of e.querySelectorAll(".micl-checkbox__parent"))if(t.closest(r)===e)return t;return null},s=(e,t,n,o)=>{e.checked===t&&e.indeterminate===n||(e.checked=t,e.indeterminate=n,o.push(e))},a=(e,t)=>{const n=l(e);if(!n)return"empty";let o=0,c=0,i=0;e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(l=>{if(l!==n){const n=l.closest(r);if(n===e)l.disabled||(o++,l.indeterminate?i++:l.checked&&c++);else if(l.classList.contains("micl-checkbox__parent")&&n?.parentElement?.closest(r)===e){const e=a(n,t);"empty"!==e&&(o++,"all"===e?c++:"some"===e&&i++)}}});let d=o>0?"none":"empty";return i>0||c>0&&c<o?d="some":o>0&&c===o&&(d="all"),s(n,"all"===d,"some"===d,t),d},d=(e,t,n)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(o=>{const c=o.closest(r);c===e?o.disabled||s(o,t,!1,n):o.classList.contains("micl-checkbox__parent")&&c?.parentElement?.closest(r)===e&&d(c,t,n)})},m=(e,t)=>{const n=l(e);if(!n)return;const o=[];t===n&&d(e,t.checked,o);let c,s=e;do{c=s,s=s.parentElement?.closest(r)}while(s);if(a(c,o),t&&o.length){i=!0;try{o.forEach(e=>e.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})))}finally{i=!1}}},p=e=>{const t=e.currentTarget,n=e.target;!i&&n.classList.contains("micl-checkbox")&&n.closest(r)===t&&m(t,n)},u=(0,c.register)(r,{initialize:e=>{e.matches(r)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",p),m(e,null))},cleanup:e=>{e.matches(r)&&(e.removeEventListener("change",p),delete e.dataset.miclinitialized)}},HTMLElement);return n.d(o,["checkboxGroupSelector",0,r,"default",0,u]),o})());