material-inspired-component-library 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +4 -4
  2. package/components/bottomsheet/index.scss +18 -16
  3. package/components/button/index.scss +6 -2
  4. package/components/card/index.scss +5 -2
  5. package/components/checkbox/index.scss +5 -4
  6. package/components/dialog/index.scss +28 -23
  7. package/components/iconbutton/index.scss +6 -2
  8. package/components/list/index.scss +7 -4
  9. package/components/menu/index.scss +15 -11
  10. package/components/radio/index.scss +8 -5
  11. package/components/select/index.scss +0 -2
  12. package/components/sidesheet/index.scss +21 -19
  13. package/components/switch/index.scss +11 -8
  14. package/components/textfield/index.scss +8 -5
  15. package/dist/bottomsheet.css +1 -1
  16. package/dist/button.css +1 -1
  17. package/dist/card.css +1 -1
  18. package/dist/checkbox.css +1 -1
  19. package/dist/dialog.css +1 -1
  20. package/dist/iconbutton.css +1 -1
  21. package/dist/list.css +1 -1
  22. package/dist/menu.css +1 -1
  23. package/dist/micl.css +1 -1
  24. package/dist/radio.css +1 -1
  25. package/dist/select.css +1 -1
  26. package/dist/sidesheet.css +1 -1
  27. package/dist/switch.css +1 -1
  28. package/dist/textfield.css +1 -1
  29. package/docs/dialog.html +4 -4
  30. package/docs/micl.css +1 -1
  31. package/package.json +1 -1
package/README.md CHANGED
@@ -97,10 +97,10 @@ The library currently consists of the following components:
97
97
 
98
98
  ## Change Log
99
99
 
100
- ### 1.1.0 (12.08.2025)
101
- **Features**
102
- - **Text field**: Added support for multi-line text fields.
103
-
104
100
  ### 1.2.0 (17.08.2025)
105
101
  **Features**
106
102
  - **List**: Added support for switches inside list items.
103
+
104
+ ### 1.1.0 (12.08.2025)
105
+ **Features**
106
+ - **Text field**: Added support for multi-line text fields.
package/components/bottomsheet/index.scss CHANGED
@@ -30,6 +30,9 @@ dialog.micl-bottomsheet {
30
30
  --md-sys-bottomsheet-padding: 24px;
31
31
  --md-sys-bottomsheet-handle-width: 32px;
32
32
  --md-sys-bottomsheet-handle-height: 4px;
33
+ --md-sys-bottomsheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
34
+ --md-sys-bottomsheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
35
+ --md-sys-bottomsheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
33
36
 
34
37
  box-sizing: border-box;
35
38
  position: fixed;
@@ -51,10 +54,10 @@ dialog.micl-bottomsheet {
51
54
 
52
55
  &:not(.micl-bottomsheet--resizing) {
53
56
  transition:
54
- display var(--md-sys-motion-duration-medium1) allow-discrete,
55
- overlay var(--md-sys-motion-duration-medium1) allow-discrete,
56
- height var(--md-sys-motion-duration-medium1) linear(motion.$md-sys-motion-spring-default-spatial),
57
- opacity var(--md-sys-motion-duration-medium1) motion.$md-sys-motion-easing-emphasized-accelerate;
57
+ opacity var(--md-sys-bottomsheet-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-accelerate,
58
+ height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
59
+ overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,
60
+ display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete;
58
61
  }
59
62
  &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
60
63
  cursor: grabbing;
@@ -93,9 +96,9 @@ dialog.micl-bottomsheet {
93
96
  &::backdrop {
94
97
  background-color: rgba(0, 0, 0, 0);
95
98
  transition:
96
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
97
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
98
- background-color var(--md-sys-motion-duration-long2) linear;
99
+ overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
100
+ display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
101
+ background-color var(--md-sys-bottomsheet-motion-duration) linear;
99
102
  }
100
103
  &:popover-open,
101
104
  &[open] {
@@ -105,23 +108,22 @@ dialog.micl-bottomsheet {
105
108
 
106
109
  &:not(.micl-bottomsheet--resizing) {
107
110
  transition:
108
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
109
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
110
- height var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial),
111
- opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
111
+ opacity var(--md-sys-bottomsheet-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
112
+ height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
113
+ overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
114
+ display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete;
112
115
  }
113
116
  @starting-style {
114
117
  height: 0;
115
118
  opacity: 0;
116
119
  }
117
- &::backdrop {
118
- @starting-style {
119
- background-color: rgba(0, 0, 0, 0);
120
- }
121
- }
122
120
  }
123
121
  &[open]::backdrop {
124
122
  background-color: rgba(0, 0, 0, 0.2);
123
+
124
+ @starting-style {
125
+ background-color: rgba(0, 0, 0, 0);
126
+ }
125
127
  }
126
128
  }
127
129
 
package/components/button/index.scss CHANGED
@@ -51,10 +51,14 @@ button.micl-button-outlined-s,
51
51
  button.micl-button-outlined-m,
52
52
  button.micl-button-outlined-l,
53
53
  button.micl-button-outlined-xl {
54
+ --md-sys-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
55
+ --md-sys-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
56
+ --md-sys-button-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
57
+
54
58
  padding: 0;
55
59
  border: none;
56
60
  cursor: pointer;
57
- transition: border-radius var(--md-sys-motion-duration-extra-long4) linear(motion.$md-sys-motion-spring-fast-spatial);
61
+ transition: border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects);
58
62
 
59
63
  &:disabled {
60
64
  background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
@@ -68,7 +72,7 @@ button.micl-button-outlined-xl {
68
72
  }
69
73
  .micl-button__icon {
70
74
  font-variation-settings: 'FILL' 0;
71
- transition: font-variation-settings 600ms;
75
+ transition: font-variation-settings var(--md-sys-button-motion-duration) linear;
72
76
  }
73
77
  }
74
78
 
package/components/card/index.scss CHANGED
@@ -34,6 +34,9 @@
34
34
  .micl-card-elevated,
35
35
  .micl-card-filled,
36
36
  .micl-card-outlined {
37
+ --md-sys-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
38
+ --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
39
+
37
40
  height: fit-content;
38
41
  margin: var(--md-sys-card-margin);
39
42
  border-radius: var(--md-sys-shape-corner-medium);
@@ -63,8 +66,8 @@
63
66
  height: 0;
64
67
  overflow: hidden;
65
68
  transition:
66
- content-visibility var(--md-sys-motion-duration-medium4) allow-discrete,
67
- height var(--md-sys-motion-duration-medium4) linear(motion.$md-sys-motion-spring-default-spatial);
69
+ height var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
70
+ content-visibility var(--md-sys-card-motion-duration) linear allow-discrete;
68
71
  }
69
72
  &[open]::details-content {
70
73
  height: auto;
package/components/checkbox/index.scss CHANGED
@@ -53,6 +53,7 @@
53
53
  }
54
54
 
55
55
  input[type=checkbox].micl-checkbox {
56
+ --md-sys-checkbox-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
56
57
  --md-sys-ripple-background-color: var(--md-sys-color-primary);
57
58
  --checkbox-container-color: transparent;
58
59
  --checkbox-container-border-color: var(--md-sys-color-on-surface-variant);
@@ -119,10 +120,10 @@ input[type=checkbox].micl-checkbox {
119
120
  var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size);
120
121
  clip-path: circle(var(--md-sys-checkbox-state-layer-radius));
121
122
  transition:
122
- --checkbox-outline-color var(--md-sys-motion-duration-medium2),
123
- --checkbox-state-layer-color var(--md-sys-motion-duration-medium2),
124
- --checkbox-container-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short4),
125
- --checkbox-container-border-color var(--md-sys-motion-duration-medium2);
123
+ --checkbox-outline-color var(--md-sys-checkbox-motion-duration),
124
+ --checkbox-state-layer-color var(--md-sys-checkbox-motion-duration),
125
+ --checkbox-container-color var(--md-sys-checkbox-motion-duration) var(--md-sys-motion-duration-short4),
126
+ --checkbox-container-border-color var(--md-sys-checkbox-motion-duration);
126
127
 
127
128
  &.micl-checkbox--error {
128
129
  --md-sys-ripple-background-color: var(--md-sys-color-error);
package/components/dialog/index.scss CHANGED
@@ -36,6 +36,10 @@
36
36
 
37
37
  dialog.micl-dialog,
38
38
  dialog.micl-dialog-fullscreen {
39
+ --md-sys-dialog-motion-spatial: #{motion.$md-sys-motion-expressive-fast-spatial};
40
+ --md-sys-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
41
+ --md-sys-dialog-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
42
+
39
43
  box-sizing: border-box;
40
44
  display: none;
41
45
  flex-direction: column;
@@ -55,12 +59,14 @@ dialog.micl-dialog-fullscreen {
55
59
  overflow: hidden;
56
60
  interpolate-size: allow-keywords;
57
61
  transition:
58
- display var(--md-sys-motion-duration-medium1) allow-discrete,
59
- overlay var(--md-sys-motion-duration-medium1) allow-discrete,
60
- inset-block-start var(--md-sys-motion-duration-medium1) linear,
61
- inset-inline-start var(--md-sys-motion-duration-medium1) linear,
62
- opacity var(--md-sys-motion-duration-medium1) motion.$md-sys-motion-easing-emphasized-decelerate,
63
- transform var(--md-sys-motion-duration-medium1) linear;
62
+ inset-block-start var(--md-sys-dialog-motion-duration-reverse) linear,
63
+ inset-inline-start var(--md-sys-dialog-motion-duration-reverse) linear,
64
+ width var(--md-sys-dialog-motion-duration-reverse) linear,
65
+ height var(--md-sys-dialog-motion-duration-reverse) linear,
66
+ transform var(--md-sys-dialog-motion-duration-reverse) linear,
67
+ opacity var(--md-sys-dialog-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-decelerate,
68
+ overlay var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
69
+ display var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete;
64
70
 
65
71
  @starting-style {
66
72
  height: fit-content;
@@ -79,14 +85,14 @@ dialog.micl-dialog-fullscreen {
79
85
  opacity: 1;
80
86
  transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(100%);
81
87
  transition:
82
- display var(--md-sys-motion-duration-medium2) linear allow-discrete,
83
- overlay var(--md-sys-motion-duration-medium2) linear allow-discrete,
84
- inset-block-start var(--md-sys-motion-duration-medium2) linear,
85
- inset-inline-start var(--md-sys-motion-duration-medium2) linear,
86
- width var(--md-sys-motion-duration-medium2) linear,
87
- height var(--md-sys-motion-duration-medium2) linear,
88
- opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate,
89
- transform var(--md-sys-motion-duration-medium2) linear;
88
+ inset-block-start var(--md-sys-dialog-motion-duration) linear,
89
+ inset-inline-start var(--md-sys-dialog-motion-duration) linear,
90
+ width var(--md-sys-dialog-motion-duration) linear,
91
+ height var(--md-sys-dialog-motion-duration) linear,
92
+ transform var(--md-sys-dialog-motion-duration) linear,
93
+ opacity var(--md-sys-dialog-motion-duration) motion.$md-sys-motion-easing-emphasized-accelerate,
94
+ overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
95
+ display var(--md-sys-dialog-motion-duration) linear allow-discrete;
90
96
 
91
97
  @starting-style {
92
98
  inset-block-start: anchor(start);
@@ -94,11 +100,6 @@ dialog.micl-dialog-fullscreen {
94
100
  opacity: 0;
95
101
  transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
96
102
  }
97
- &::backdrop {
98
- @starting-style {
99
- background-color: rgba(0, 0, 0, 0);
100
- }
101
- }
102
103
  }
103
104
  &:not([popover]) {
104
105
  inset-block-start: 50%;
@@ -121,12 +122,16 @@ dialog.micl-dialog-fullscreen {
121
122
  &::backdrop {
122
123
  background-color: rgba(0, 0, 0, 0);
123
124
  transition:
124
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
125
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
126
- background-color var(--md-sys-motion-duration-long2) linear;
125
+ background-color var(--md-sys-dialog-motion-duration) linear,
126
+ overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
127
+ display var(--md-sys-dialog-motion-duration) linear allow-discrete;
127
128
  }
128
129
  &[open]::backdrop {
129
130
  background-color: rgba(0, 0, 0, 0.2);
131
+
132
+ @starting-style {
133
+ background-color: rgba(0, 0, 0, 0);
134
+ }
130
135
  }
131
136
  &:hover {
132
137
  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high), var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity));
@@ -194,7 +199,7 @@ dialog.micl-dialog-fullscreen {
194
199
  column-gap: 8px;
195
200
  padding: var(--md-sys-dialog-padding);
196
201
  opacity: 1;
197
- transition: opacity var(--md-sys-motion-duration-medium1) linear;
202
+ transition: opacity var(--md-sys-dialog-motion-duration) linear;
198
203
  }
199
204
  }
200
205
 
package/components/iconbutton/index.scss CHANGED
@@ -45,6 +45,10 @@ button.micl-iconbutton-outlined-s,
45
45
  button.micl-iconbutton-outlined-m,
46
46
  button.micl-iconbutton-outlined-l,
47
47
  button.micl-iconbutton-outlined-xl {
48
+ --md-sys-iconbutton-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
49
+ --md-sys-iconbutton-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
50
+ --md-sys-iconbutton-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
51
+
48
52
  padding: 0;
49
53
  border: none;
50
54
  border-radius: var(--md-sys-shape-corner-full);
@@ -53,8 +57,8 @@ button.micl-iconbutton-outlined-xl {
53
57
  cursor: pointer;
54
58
  font-variation-settings: 'FILL' 0;
55
59
  transition:
56
- font-variation-settings 600ms,
57
- border-radius var(--md-sys-motion-duration-extra-long4) linear(motion.$md-sys-motion-spring-fast-spatial);
60
+ border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
61
+ font-variation-settings var(--md-sys-iconbutton-motion-duration) linear;
58
62
 
59
63
  &:disabled {
60
64
  background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
package/components/list/index.scss CHANGED
@@ -38,6 +38,9 @@
38
38
 
39
39
  .micl-list {
40
40
  --md-sys-list-item-container-color: var(--md-sys-color-surface);
41
+ --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
42
+ --md-sys-accordion-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
43
+ --md-sys-accordion-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
41
44
 
42
45
  margin: 0;
43
46
  padding: 8px 0;
@@ -49,8 +52,8 @@
49
52
  height: 0;
50
53
  overflow: hidden;
51
54
  transition:
52
- content-visibility var(--md-sys-motion-duration-medium4) allow-discrete,
53
- height var(--md-sys-motion-duration-medium4) linear(motion.$md-sys-motion-spring-default-spatial);
55
+ height var( --md-sys-accordion-motion-duration) var(--md-sys-accordion-motion-spatial),
56
+ content-visibility var(--md-sys-accordion-motion-duration) linear allow-discrete;
54
57
  }
55
58
  &[open]::details-content {
56
59
  height: auto;
@@ -105,7 +108,7 @@
105
108
  border-radius: var(--md-sys-shape-corner-none);
106
109
  background-color: var(--md-sys-list-item-container-color);
107
110
  list-style: none;
108
- transition: background-color var(--md-sys-motion-duration-long2) linear;
111
+ transition: background-color var(--md-sys-list-motion-duration) linear;
109
112
 
110
113
  &> a,
111
114
  &> label {
@@ -300,7 +303,7 @@
300
303
  color: var(--md-sys-color-on-surface-variant);
301
304
  font-size: 24px;
302
305
  font-variation-settings: 'FILL' 0;
303
- transition: font-variation-settings var(--md-sys-motion-duration-long2) linear;
306
+ transition: font-variation-settings var(--md-sys-list-motion-duration) linear;
304
307
  }
305
308
  .micl-list-item__avatar {
306
309
  @include typography.title-medium;
package/components/menu/index.scss CHANGED
@@ -26,6 +26,10 @@
26
26
  @use '../../styles/statelayer';
27
27
 
28
28
  .micl-menu[popover] {
29
+ --md-sys-menu-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
30
+ --md-sys-menu-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
31
+ --md-sys-menu-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
32
+
29
33
  position: absolute;
30
34
  inset: unset;
31
35
  inset-block-start: anchor(end);
@@ -43,19 +47,19 @@
43
47
  transform: scaleY(0);
44
48
  transform-origin: top left;
45
49
  transition:
46
- opacity var(--md-sys-motion-duration-medium1),
47
- transform var(--md-sys-motion-duration-medium1),
48
- overlay var(--md-sys-motion-duration-medium1) allow-discrete,
49
- display var(--md-sys-motion-duration-medium1) allow-discrete;
50
+ opacity var(--md-sys-menu-motion-duration-reverse) linear,
51
+ transform var(--md-sys-menu-motion-duration-reverse) var(--md-sys-menu-motion-spatial),
52
+ overlay var(--md-sys-menu-motion-duration-reverse) linear allow-discrete,
53
+ display var(--md-sys-menu-motion-duration-reverse) linear allow-discrete;
50
54
 
51
55
  &:popover-open {
52
56
  opacity: 1;
53
57
  transform: scaleY(1);
54
58
  transition:
55
- opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate,
56
- transform var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial),
57
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
58
- display var(--md-sys-motion-duration-long2) linear allow-discrete;
59
+ opacity var(--md-sys-menu-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
60
+ transform var(--md-sys-menu-motion-duration) var(--md-sys-menu-motion-spatial),
61
+ overlay var(--md-sys-menu-motion-duration) linear allow-discrete,
62
+ display var(--md-sys-menu-motion-duration) linear allow-discrete;
59
63
 
60
64
  @position-try-on {
61
65
  transform-origin: bottom left;
@@ -80,9 +84,9 @@
80
84
  &::backdrop {
81
85
  background-color: rgba(0, 0, 0, 0);
82
86
  transition:
83
- background-color var(--md-sys-motion-duration-long2),
84
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
85
- display var(--md-sys-motion-duration-long2) linear allow-discrete;
87
+ background-color var(--md-sys-menu-motion-duration) linear,
88
+ overlay var(--md-sys-menu-motion-duration) linear allow-discrete,
89
+ display var(--md-sys-menu-motion-duration) linear allow-discrete;
86
90
  }
87
91
 
88
92
  .micl-list {
package/components/radio/index.scss CHANGED
@@ -31,6 +31,9 @@
31
31
  }
32
32
 
33
33
  input[type=radio].micl-radio {
34
+ --md-sys-radio-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
35
+ --md-sys-radio-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
36
+ --md-sys-radio-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
34
37
  --md-sys-ripple-background-color: var(--md-sys-color-primary);
35
38
 
36
39
  appearance: none;
@@ -44,7 +47,7 @@ input[type=radio].micl-radio {
44
47
  background-color: transparent;
45
48
  border-radius: var(--md-sys-shape-corner-full);
46
49
  outline-offset: -7px;
47
- transition: background-color var(--md-sys-motion-duration-long2);
50
+ transition: background-color var(--md-sys-radio-motion-duration) linear;
48
51
 
49
52
  &::after {
50
53
  content: "";
@@ -60,15 +63,15 @@ input[type=radio].micl-radio {
60
63
  background-clip: content-box;
61
64
  border-radius: var(--md-sys-shape-corner-full);
62
65
  transition:
63
- padding var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized,
64
- border-color var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized;
66
+ padding var(--md-sys-radio-motion-duration-reverse) var(--md-sys-radio-motion-effects),
67
+ border-color var(--md-sys-radio-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized;
65
68
  }
66
69
  &:checked::after {
67
70
  border-color: var(--md-sys-color-primary);
68
71
  padding: 3px;
69
72
  transition:
70
- padding var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
71
- border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
73
+ padding var(--md-sys-radio-motion-duration) var(--md-sys-radio-motion-effects),
74
+ border-color var(--md-sys-radio-motion-duration) motion.$md-sys-motion-easing-emphasized;
72
75
  }
73
76
  &:not(:disabled) {
74
77
  --miclripple: 1;
package/components/select/index.scss CHANGED
@@ -20,7 +20,6 @@
20
20
  // SOFTWARE.
21
21
 
22
22
  @use '../../styles/elevation';
23
- @use '../../styles/motion';
24
23
  @use '../../styles/ripple';
25
24
  @use '../../styles/shapes';
26
25
  @use '../../styles/statelayer';
@@ -64,7 +63,6 @@
64
63
  --md-sys-list-item-space: 12px;
65
64
  --md-sys-list-item-padding-inline: 16px;
66
65
  --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
67
- --md-sys-motion-duration-long2: 500ms;
68
66
  --md-sys-state-hover-state-layer-opacity: #{statelayer.$md-sys-state-hover-state-layer-opacity};
69
67
  --md-sys-state-focus-state-layer-opacity: #{statelayer.$md-sys-state-focus-state-layer-opacity};
70
68
  --md-sys-state-pressed-state-layer-opacity: #{statelayer.$md-sys-state-pressed-state-layer-opacity};
package/components/sidesheet/index.scss CHANGED
@@ -30,6 +30,9 @@ dialog.micl-sidesheet {
30
30
  --md-sys-sidesheet-spring-buffer: 200px;
31
31
  --md-sys-sidesheet-padding-standard: 24px;
32
32
  --md-sys-sidesheet-padding-modal: 16px;
33
+ --md-sys-sidesheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
34
+ --md-sys-sidesheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
35
+ --md-sys-sidesheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
33
36
 
34
37
  box-sizing: border-box;
35
38
  display: none;
@@ -53,10 +56,10 @@ dialog.micl-sidesheet {
53
56
  opacity: 0;
54
57
  overflow: hidden;
55
58
  transition:
56
- display var(--md-sys-motion-duration-medium1) allow-discrete,
57
- overlay var(--md-sys-motion-duration-medium1) allow-discrete,
58
- opacity var(--md-sys-motion-duration-medium1),
59
- margin-inline-end var(--md-sys-motion-duration-medium1);
59
+ opacity var(--md-sys-sidesheet-motion-duration-reverse) linear,
60
+ margin-inline-end var(--md-sys-sidesheet-motion-duration-reverse) var(--md-sys-sidesheet-motion-spatial),
61
+ overlay var(--md-sys-sidesheet-motion-duration-reverse) linear allow-discrete,
62
+ display var(--md-sys-sidesheet-motion-duration-reverse) linear allow-discrete;
60
63
 
61
64
  .micl-sidesheet__headline {
62
65
  display: flex;
@@ -109,9 +112,9 @@ dialog.micl-sidesheet {
109
112
  &::backdrop {
110
113
  background-color: rgba(0, 0, 0, 0);
111
114
  transition:
112
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
113
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
114
- background-color var(--md-sys-motion-duration-long2);
115
+ background-color var(--md-sys-sidesheet-motion-duration) linear,
116
+ overlay var(--md-sys-sidesheet-motion-duration) linear allow-discrete,
117
+ display var(--md-sys-sidesheet-motion-duration) linear allow-discrete;
115
118
  }
116
119
  &[open] {
117
120
  background-color: var(--md-sys-color-surface-container-low);
@@ -132,23 +135,22 @@ dialog.micl-sidesheet {
132
135
  margin-inline-end: calc(-1 * var(--md-sys-sidesheet-spring-buffer));
133
136
  opacity: 1;
134
137
  transition:
135
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
136
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
137
- opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate,
138
- margin-inline-end var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial);
138
+ opacity var(--md-sys-sidesheet-motion-duration) linear,
139
+ margin-inline-end var(--md-sys-sidesheet-motion-duration) var(--md-sys-sidesheet-motion-spatial),
140
+ overlay var(--md-sys-sidesheet-motion-duration) linear allow-discrete,
141
+ display var(--md-sys-sidesheet-motion-duration) linear allow-discrete;
139
142
 
140
143
  @starting-style {
141
- opacity: 0;
142
144
  margin-inline-end: calc(-1 * (var(--md-sys-sidesheet-maxwidth) + var(--md-sys-sidesheet-spring-buffer)));
143
- }
144
- &::backdrop {
145
- @starting-style {
146
- background-color: rgba(0, 0, 0, 0);
147
- }
145
+ opacity: 0;
148
146
  }
149
147
  }
150
148
  &[open]::backdrop {
151
149
  background-color: rgba(0, 0, 0, 0.2);
150
+
151
+ @starting-style {
152
+ background-color: rgba(0, 0, 0, 0);
153
+ }
152
154
  }
153
155
  }
154
156
 
@@ -156,9 +158,9 @@ body:has(dialog.micl-sidesheet[popover]) {
156
158
  box-sizing: border-box;
157
159
  max-width: 100%;
158
160
  margin: 0;
159
- transition: max-width var(--md-sys-motion-duration-medium1);
161
+ transition: max-width var(--md-sys-sidesheet-motion-duration-reverse);
160
162
  }
161
163
  body:has(dialog.micl-sidesheet:popover-open) {
162
164
  max-width: calc(100vw - 400px);
163
- transition: max-width var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial);
165
+ transition: max-width var(--md-sys-sidesheet-motion-duration) var(--md-sys-sidesheet-motion-spatial);
164
166
  }
package/components/switch/index.scss CHANGED
@@ -34,6 +34,9 @@ input[type=checkbox].micl-switch {
34
34
  --md-sys-switch-unselected-icon: "+";
35
35
  --md-sys-switch-selected-icon: "\AC";
36
36
  --md-sys-switch-outline-width: 2px;
37
+ --md-sys-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
38
+ --md-sys-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
39
+ --md-sys-switch-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
37
40
 
38
41
  appearance: none;
39
42
  position: relative;
@@ -53,7 +56,7 @@ input[type=checkbox].micl-switch {
53
56
  border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
54
57
  border-radius: inherit;
55
58
  background-color: var(--md-sys-color-surface-container-highest);
56
- transition: background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
59
+ transition: background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
57
60
  }
58
61
  &::after {
59
62
  content: var(--md-sys-switch-unselected-icon);
@@ -73,13 +76,13 @@ input[type=checkbox].micl-switch {
73
76
  border-radius: var(--md-sys-shape-corner-full);
74
77
  transform: rotate(135deg);
75
78
  transition:
76
- inset-inline-start var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
77
- border-width var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
78
- font-size var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
79
- line-height var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
80
- color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
81
- border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
82
- background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
79
+ inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
80
+ border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
81
+ font-size var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
82
+ line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
83
+ color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
84
+ border-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
85
+ background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
83
86
  }
84
87
  &:checked {
85
88
  &::before {
package/components/textfield/index.scss CHANGED
@@ -32,6 +32,9 @@
32
32
  --md-sys-textfield-input-space: 16px;
33
33
  --md-sys-textfield-prefix-space: 1em;
34
34
  --md-sys-textfield-suffix-space: 1em;
35
+ --md-sys-textfield-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
36
+ --md-sys-textfield-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
37
+ --md-sys-textfield-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
35
38
 
36
39
  display: grid;
37
40
  grid-template-areas: "textfield" "supporting";
@@ -53,10 +56,10 @@
53
56
  color: var(--md-sys-color-on-surface-variant);
54
57
  z-index: 1;
55
58
  transition:
56
- margin-block-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
57
- margin-inline-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
58
- font-size var(--md-sys-motion-duration-medium2),
59
- letter-spacing var(--md-sys-motion-duration-medium2);
59
+ margin-block-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),
60
+ margin-inline-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),
61
+ font-size var(--md-sys-textfield-motion-duration) linear,
62
+ letter-spacing var(--md-sys-textfield-motion-duration) linear;
60
63
  }
61
64
  &> input,
62
65
  &> select,
@@ -121,7 +124,7 @@
121
124
  color: var(--md-sys-color-on-surface-variant);
122
125
  opacity: 0;
123
126
  z-index: 1;
124
- transition: opacity var(--md-sys-motion-duration-long1);
127
+ transition: opacity var(--md-sys-textfield-motion-duration-reverse) linear;
125
128
  }
126
129
  &> .micl-textfield__prefix {
127
130
  width: var(--md-sys-textfield-prefix-space);
package/dist/bottomsheet.css CHANGED
@@ -1 +1 @@
1
- :root{--md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;box-sizing:border-box;position:fixed;top:auto;bottom:0;height:0;max-height:50vh;width:100%;min-width:100%;margin:72px 0 0 0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:display var(--md-sys-motion-duration-medium1) allow-discrete,overlay var(--md-sys-motion-duration-medium1) allow-discrete,height var(--md-sys-motion-duration-medium1) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-medium1) cubic-bezier(0.3, 0, 0.8, 0.15)}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height:var(--md-sys-bottomsheet-handle-height);padding:16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,background-color var(--md-sys-motion-duration-long2) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,height var(--md-sys-motion-duration-long2) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}@starting-style{dialog.micl-bottomsheet:popover-open::backdrop,dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@media(min-width: 641px){dialog.micl-bottomsheet{width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);max-width:640px;min-width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-sys-bottomsheet-margin),640px))/2 - var(--md-sys-bottomsheet-margin));margin:var(--md-sys-bottomsheet-margin);margin-bottom:0}}
1
+ :root{--md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;--md-sys-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-sys-bottomsheet-motion-duration: 650ms;--md-sys-bottomsheet-motion-duration-reverse: 500ms;box-sizing:border-box;position:fixed;top:auto;bottom:0;height:0;max-height:50vh;width:100%;min-width:100%;margin:72px 0 0 0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration-reverse) cubic-bezier(0.3, 0, 0.8, 0.15),height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height:var(--md-sys-bottomsheet-handle-height);padding:16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,background-color var(--md-sys-bottomsheet-motion-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration) cubic-bezier(0.05, 0.7, 0.1, 1),height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@media(min-width: 641px){dialog.micl-bottomsheet{width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);max-width:640px;min-width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-sys-bottomsheet-margin),640px))/2 - var(--md-sys-bottomsheet-margin));margin:var(--md-sys-bottomsheet-margin);margin-bottom:0}}