material-inspired-component-library 1.2.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +12 -2
  2. package/components/bottomsheet/index.scss +18 -16
  3. package/components/button/README.md +1 -1
  4. package/components/button/index.scss +57 -80
  5. package/components/card/index.scss +33 -31
  6. package/components/checkbox/index.scss +5 -9
  7. package/components/dialog/index.scss +38 -29
  8. package/components/iconbutton/README.md +1 -1
  9. package/components/iconbutton/index.scss +51 -81
  10. package/components/list/index.scss +45 -33
  11. package/components/list/index.ts +10 -9
  12. package/components/menu/README.md +67 -4
  13. package/components/menu/index.scss +43 -39
  14. package/components/menu/index.ts +47 -16
  15. package/components/navigationrail/README.md +99 -0
  16. package/components/navigationrail/index.scss +157 -0
  17. package/components/radio/index.scss +28 -15
  18. package/components/select/index.scss +4 -12
  19. package/components/sidesheet/index.scss +21 -19
  20. package/components/switch/index.scss +11 -8
  21. package/components/textfield/index.scss +16 -7
  22. package/dist/bottomsheet.css +1 -1
  23. package/dist/button.css +1 -1
  24. package/dist/card.css +1 -1
  25. package/dist/checkbox.css +1 -1
  26. package/dist/components/menu/index.d.ts +0 -11
  27. package/dist/dialog.css +1 -1
  28. package/dist/iconbutton.css +1 -1
  29. package/dist/list.css +1 -1
  30. package/dist/menu.css +1 -1
  31. package/dist/micl.css +1 -1
  32. package/dist/micl.js +1 -1
  33. package/dist/navigationrail.css +1 -0
  34. package/dist/navigationrail.js +1 -0
  35. package/dist/radio.css +1 -1
  36. package/dist/select.css +1 -1
  37. package/dist/sidesheet.css +1 -1
  38. package/dist/slider.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/textfield.css +1 -1
  41. package/docs/dialog.html +4 -4
  42. package/docs/docs.js +2 -2
  43. package/docs/index.html +3 -1
  44. package/docs/menu.html +183 -3
  45. package/docs/micl.css +1 -1
  46. package/docs/micl.js +1 -1
  47. package/docs/navigationrail.html +75 -0
  48. package/micl.ts +10 -8
  49. package/package.json +7 -7
  50. package/styles/statelayer.scss +14 -0
  51. package/styles.scss +1 -1
  52. package/webpack.config.js +37 -0
  53. package/styles/ripple.scss +0 -50
package/components/dialog/index.scss CHANGED
@@ -36,6 +36,11 @@
36
36
 
37
37
  dialog.micl-dialog,
38
38
  dialog.micl-dialog-fullscreen {
39
+ --statelayer-color: var(--md-sys-color-primary);
40
+ --md-sys-dialog-motion-spatial: #{motion.$md-sys-motion-expressive-fast-spatial};
41
+ --md-sys-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
42
+ --md-sys-dialog-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
43
+
39
44
  box-sizing: border-box;
40
45
  display: none;
41
46
  flex-direction: column;
@@ -50,17 +55,22 @@ dialog.micl-dialog-fullscreen {
50
55
  border: none;
51
56
  border-radius: var(--md-sys-shape-corner-extra-large);
52
57
  background-color: var(--md-sys-color-surface-container-high);
58
+ background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
59
+ background-repeat: no-repeat;
53
60
  box-shadow: var(--md-sys-elevation-level3);
54
61
  opacity: 0;
55
62
  overflow: hidden;
56
63
  interpolate-size: allow-keywords;
57
64
  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;
65
+ inset-block-start var(--md-sys-dialog-motion-duration-reverse) linear,
66
+ inset-inline-start var(--md-sys-dialog-motion-duration-reverse) linear,
67
+ width var(--md-sys-dialog-motion-duration-reverse) linear,
68
+ height var(--md-sys-dialog-motion-duration-reverse) linear,
69
+ transform var(--md-sys-dialog-motion-duration-reverse) linear,
70
+ opacity var(--md-sys-dialog-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-decelerate,
71
+ overlay var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
72
+ display var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
73
+ --statelayer-opacity var(--md-sys-dialog-motion-duration) linear;
64
74
 
65
75
  @starting-style {
66
76
  height: fit-content;
@@ -79,14 +89,14 @@ dialog.micl-dialog-fullscreen {
79
89
  opacity: 1;
80
90
  transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(100%);
81
91
  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;
92
+ inset-block-start var(--md-sys-dialog-motion-duration) linear,
93
+ inset-inline-start var(--md-sys-dialog-motion-duration) linear,
94
+ width var(--md-sys-dialog-motion-duration) linear,
95
+ height var(--md-sys-dialog-motion-duration) linear,
96
+ transform var(--md-sys-dialog-motion-duration) linear,
97
+ opacity var(--md-sys-dialog-motion-duration) motion.$md-sys-motion-easing-emphasized-accelerate,
98
+ overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
99
+ display var(--md-sys-dialog-motion-duration) linear allow-discrete;
90
100
 
91
101
  @starting-style {
92
102
  inset-block-start: anchor(start);
@@ -94,11 +104,6 @@ dialog.micl-dialog-fullscreen {
94
104
  opacity: 0;
95
105
  transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
96
106
  }
97
- &::backdrop {
98
- @starting-style {
99
- background-color: rgba(0, 0, 0, 0);
100
- }
101
- }
102
107
  }
103
108
  &:not([popover]) {
104
109
  inset-block-start: 50%;
@@ -121,16 +126,20 @@ dialog.micl-dialog-fullscreen {
121
126
  &::backdrop {
122
127
  background-color: rgba(0, 0, 0, 0);
123
128
  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;
129
+ background-color var(--md-sys-dialog-motion-duration) linear,
130
+ overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
131
+ display var(--md-sys-dialog-motion-duration) linear allow-discrete;
127
132
  }
128
133
  &[open]::backdrop {
129
134
  background-color: rgba(0, 0, 0, 0.2);
135
+
136
+ @starting-style {
137
+ background-color: rgba(0, 0, 0, 0);
138
+ }
130
139
  }
131
- &:hover {
132
- 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));
133
- }
140
+ // &:hover {
141
+ // --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
142
+ // }
134
143
 
135
144
  .micl-dialog__headline {
136
145
  display: flex;
@@ -194,7 +203,7 @@ dialog.micl-dialog-fullscreen {
194
203
  column-gap: 8px;
195
204
  padding: var(--md-sys-dialog-padding);
196
205
  opacity: 1;
197
- transition: opacity var(--md-sys-motion-duration-medium1) linear;
206
+ transition: opacity var(--md-sys-dialog-motion-duration) linear;
198
207
  }
199
208
  }
200
209
 
@@ -208,9 +217,9 @@ dialog.micl-dialog-fullscreen {
208
217
  box-shadow: var(--md-sys-elevation-level0);
209
218
  timeline-scope: --headlineTimeline;
210
219
 
211
- &:hover {
212
- background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity));
213
- }
220
+ // &:hover {
221
+ // --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
222
+ // }
214
223
  .micl-dialog__headline {
215
224
  height: 56px;
216
225
  flex-direction: row;
package/components/iconbutton/README.md CHANGED
@@ -20,7 +20,7 @@ Import the icon button styles into your project:
20
20
  ```
21
21
 
22
22
  ### JavaScript
23
- This component requires JavaScript for interactive features like the **ripple effect** and **toggle logic**:
23
+ This component requires JavaScript for interactive features like the **toggle logic**:
24
24
 
25
25
  ```JavaScript
26
26
  import micl from "material-inspired-component-library/dist/micl";
package/components/iconbutton/index.scss CHANGED
@@ -21,7 +21,6 @@
21
21
 
22
22
  @use '../../styles/elevation';
23
23
  @use '../../styles/motion';
24
- @use '../../styles/ripple';
25
24
  @use '../../styles/shapes';
26
25
  @use '../../styles/statelayer';
27
26
 
@@ -45,16 +44,28 @@ button.micl-iconbutton-outlined-s,
45
44
  button.micl-iconbutton-outlined-m,
46
45
  button.micl-iconbutton-outlined-l,
47
46
  button.micl-iconbutton-outlined-xl {
47
+ --md-sys-iconbutton-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
48
+ --md-sys-iconbutton-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
49
+ --md-sys-iconbutton-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
50
+ --miclripple: 1;
51
+
48
52
  padding: 0;
49
53
  border: none;
50
54
  border-radius: var(--md-sys-shape-corner-full);
51
55
  background-color: transparent;
56
+ background-image:
57
+ radial-gradient(circle at var(--x, center) var(--y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
58
+ linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
59
+ background-repeat: no-repeat;
60
+ background-size: 10000%, 100%;
52
61
  color: var(--md-sys-color-on-surface-variant);
53
62
  cursor: pointer;
54
63
  font-variation-settings: 'FILL' 0;
55
64
  transition:
56
- font-variation-settings 600ms,
57
- border-radius var(--md-sys-motion-duration-extra-long4) linear(motion.$md-sys-motion-spring-fast-spatial);
65
+ border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
66
+ font-variation-settings var(--md-sys-iconbutton-motion-duration) linear,
67
+ background-size 3000ms,
68
+ --statelayer-opacity var(--md-sys-iconbutton-motion-duration) linear;
58
69
 
59
70
  &:disabled {
60
71
  background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
@@ -62,9 +73,15 @@ button.micl-iconbutton-outlined-xl {
62
73
  box-shadow: var(--md-sys-elevation-level0);
63
74
  cursor: default;
64
75
  }
65
- &:not(:disabled):focus-visible {
66
- outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
67
- outline-offset: 3px;
76
+ &:not(:disabled) {
77
+ &:focus-visible {
78
+ outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
79
+ outline-offset: 3px;
80
+ }
81
+ &:active {
82
+ background-size: 0%, 100%;
83
+ transition: background-size 0ms;
84
+ }
68
85
  }
69
86
  &:hover:not(:disabled),
70
87
  &.micl-button--toggle.micl-button--selected {
@@ -88,9 +105,6 @@ button.micl-iconbutton-outlined-xs {
88
105
  border-radius: var(--md-sys-shape-corner-large);
89
106
  }
90
107
  &:not(:disabled) {
91
- --miclripple: 1;
92
- @include ripple.effect;
93
-
94
108
  &:active {
95
109
  // border-radius: var(--md-sys-shape-corner-small);
96
110
  border-radius: var(--md-sys-shape-corner-medium);
@@ -142,9 +156,6 @@ button.micl-iconbutton-outlined-s {
142
156
  border-radius: var(--md-sys-shape-corner-large);
143
157
  }
144
158
  &:not(:disabled) {
145
- --miclripple: 1;
146
- @include ripple.effect;
147
-
148
159
  &:active {
149
160
  // border-radius: var(--md-sys-shape-corner-small);
150
161
  border-radius: var(--md-sys-shape-corner-medium);
@@ -193,9 +204,6 @@ button.micl-iconbutton-outlined-m {
193
204
  border-radius: var(--md-sys-shape-corner-large);
194
205
  }
195
206
  &:not(:disabled) {
196
- --miclripple: 1;
197
- @include ripple.effect;
198
-
199
207
  &:active {
200
208
  // border-radius: var(--md-sys-shape-corner-small);
201
209
  border-radius: var(--md-sys-shape-corner-medium);
@@ -233,9 +241,6 @@ button.micl-iconbutton-outlined-l {
233
241
  border-radius: var(--md-sys-shape-corner-extra-large);
234
242
  }
235
243
  &:not(:disabled) {
236
- --miclripple: 1;
237
- @include ripple.effect;
238
-
239
244
  &:active {
240
245
  border-radius: var(--md-sys-shape-corner-large);
241
246
  }
@@ -272,9 +277,6 @@ button.micl-iconbutton-outlined-xl {
272
277
  border-radius: var(--md-sys-shape-corner-extra-large);
273
278
  }
274
279
  &:not(:disabled) {
275
- --miclripple: 1;
276
- @include ripple.effect;
277
-
278
280
  &:active {
279
281
  border-radius: var(--md-sys-shape-corner-large);
280
282
  }
@@ -303,30 +305,22 @@ button.micl-iconbutton-standard-s,
303
305
  button.micl-iconbutton-standard-m,
304
306
  button.micl-iconbutton-standard-l,
305
307
  button.micl-iconbutton-standard-xl {
308
+ --statelayer-color: var(--md-sys-color-on-surface-variant);
309
+
306
310
  &:not(:disabled) {
307
311
  &.micl-button--toggle.micl-button--selected {
312
+ --statelayer-color: var(--md-sys-color-primary);
313
+
308
314
  color: var(--md-sys-color-primary);
309
315
  }
310
316
  &:hover {
311
- background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-hover-state-layer-opacity));
312
-
313
- &.micl-button--toggle.micl-button--selected {
314
- background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
315
- }
317
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
316
318
  }
317
319
  &:focus-visible {
318
- background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-focus-state-layer-opacity));
319
-
320
- &.micl-button--toggle.micl-button--selected {
321
- background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
322
- }
320
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
323
321
  }
324
322
  &:active {
325
- background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-pressed-state-layer-opacity));
326
-
327
- &.micl-button--toggle.micl-button--selected {
328
- background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
329
- }
323
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
330
324
  }
331
325
  }
332
326
  }
@@ -337,34 +331,26 @@ button.micl-iconbutton-filled-s,
337
331
  button.micl-iconbutton-filled-m,
338
332
  button.micl-iconbutton-filled-l,
339
333
  button.micl-iconbutton-filled-xl {
334
+ --statelayer-color: var(--md-sys-color-on-primary);
335
+
340
336
  background-color: var(--md-sys-color-primary);
341
337
  color: var(--md-sys-color-on-primary);
342
338
 
343
339
  &:not(:disabled) {
344
340
  &.micl-button--toggle:not(.micl-button--selected) {
341
+ --statelayer-color: var(--md-sys-color-on-surface-variant);
342
+
345
343
  background-color: var(--md-sys-color-surface-container);
346
344
  color: var(--md-sys-color-on-surface-variant);
347
345
  }
348
346
  &:hover {
349
- background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity));
350
-
351
- &.micl-button--toggle:not(.micl-button--selected) {
352
- background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-hover-state-layer-opacity));
353
- }
347
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
354
348
  }
355
349
  &:focus-visible {
356
- background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity));
357
-
358
- &.micl-button--toggle:not(.micl-button--selected) {
359
- background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-focus-state-layer-opacity));
360
- }
350
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
361
351
  }
362
352
  &:active {
363
- background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity));
364
-
365
- &.micl-button--toggle:not(.micl-button--selected) {
366
- background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-pressed-state-layer-opacity));
367
- }
353
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
368
354
  }
369
355
  }
370
356
  }
@@ -374,34 +360,26 @@ button.micl-iconbutton-tonal-s,
374
360
  button.micl-iconbutton-tonal-m,
375
361
  button.micl-iconbutton-tonal-l,
376
362
  button.micl-iconbutton-tonal-xl {
363
+ --statelayer-color: var(--md-sys-color-on-secondary-container);
364
+
377
365
  background-color: var(--md-sys-color-secondary-container);
378
366
  color: var(--md-sys-color-on-secondary-container);
379
367
 
380
368
  &:not(:disabled) {
381
369
  &.micl-button--toggle.micl-button--selected {
370
+ --statelayer-color: var(--md-sys-color-on-secondary);
371
+
382
372
  background-color: var(--md-sys-color-secondary);
383
373
  color: var(--md-sys-color-on-secondary);
384
374
  }
385
375
  &:hover {
386
- background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-state-layer-opacity));
387
-
388
- &.micl-button--toggle.micl-button--selected {
389
- background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-hover-state-layer-opacity));
390
- }
376
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
391
377
  }
392
378
  &:focus-visible {
393
- background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-focus-state-layer-opacity));
394
-
395
- &.micl-button--toggle.micl-button--selected {
396
- background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-focus-state-layer-opacity));
397
- }
379
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
398
380
  }
399
381
  &:active {
400
- background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-pressed-state-layer-opacity));
401
-
402
- &.micl-button--toggle.micl-button--selected {
403
- background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-pressed-state-layer-opacity));
404
- }
382
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
405
383
  }
406
384
  }
407
385
  }
@@ -411,6 +389,8 @@ button.micl-iconbutton-outlined-s,
411
389
  button.micl-iconbutton-outlined-m,
412
390
  button.micl-iconbutton-outlined-l,
413
391
  button.micl-iconbutton-outlined-xl {
392
+ --statelayer-color: var(--md-sys-color-on-surface-variant);
393
+
414
394
  background-color: transparent;
415
395
  color: var(--md-sys-color-on-surface-variant);
416
396
 
@@ -436,29 +416,19 @@ button.micl-iconbutton-outlined-xl {
436
416
  }
437
417
  &:not(:disabled) {
438
418
  &.micl-button--toggle.micl-button--selected {
419
+ --statelayer-color: var(--md-sys-color-inverse-on-surface);
420
+
439
421
  background-color: var(--md-sys-color-inverse-surface);
440
422
  color: var(--md-sys-color-inverse-on-surface);
441
423
  }
442
424
  &:hover {
443
- background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-hover-state-layer-opacity));
444
-
445
- &.micl-button--toggle.micl-button--selected {
446
- background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity));
447
- }
425
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
448
426
  }
449
427
  &:focus-visible {
450
- background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-focus-state-layer-opacity));
451
-
452
- &.micl-button--toggle.micl-button--selected {
453
- background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-focus-state-layer-opacity));
454
- }
428
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
455
429
  }
456
430
  &:active {
457
- background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-pressed-state-layer-opacity));
458
-
459
- &.micl-button--toggle.micl-button--selected {
460
- background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
461
- }
431
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
462
432
  }
463
433
  }
464
434
  }
package/components/list/index.scss CHANGED
@@ -20,12 +20,12 @@
20
20
  // SOFTWARE.
21
21
 
22
22
  @use '../../styles/motion';
23
- @use '../../styles/ripple';
24
23
  @use '../../styles/shapes';
25
24
  @use '../../styles/statelayer';
26
25
  @use '../../styles/typography';
27
26
 
28
27
  :root {
28
+ --md-sys-list-padding: 8px;
29
29
  --md-sys-list-item-one-height: 56px;
30
30
  --md-sys-list-item-two-height: 72px;
31
31
  --md-sys-list-item-three-height: 88px;
@@ -38,9 +38,12 @@
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
- padding: 8px 0;
46
+ padding: var(--md-sys-list-padding) 0;
44
47
  interpolate-size: allow-keywords;
45
48
  list-style-type: none;
46
49
 
@@ -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;
@@ -68,9 +71,6 @@
68
71
  pointer-events: none;
69
72
  }
70
73
  &:not(.micl-list-item--disabled) {
71
- @include ripple.effect;
72
- --miclripple: 1;
73
-
74
74
  cursor: pointer;
75
75
  }
76
76
  }
@@ -95,6 +95,7 @@
95
95
  .micl-list-item-one,
96
96
  .micl-list-item-two,
97
97
  .micl-list-item-three {
98
+ --statelayer-color: var(--md-sys-color-on-surface);
98
99
  --md-sys-list-item-thumbnail-aspect-ratio: 1.778;
99
100
 
100
101
  box-sizing: border-box;
@@ -102,24 +103,39 @@
102
103
  align-items: center;
103
104
  column-gap: var(--md-sys-list-item-space);
104
105
  padding-inline: var(--md-sys-list-item-space);
106
+ border: none;
105
107
  border-radius: var(--md-sys-shape-corner-none);
106
108
  background-color: var(--md-sys-list-item-container-color);
109
+ background-image:
110
+ radial-gradient(circle at var(--x, center) var(--y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
111
+ linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
112
+ background-repeat: no-repeat;
113
+ background-size: 10000%, 100%;
107
114
  list-style: none;
108
- transition: background-color var(--md-sys-motion-duration-long2) linear;
115
+ transition:
116
+ background-size 3000ms,
117
+ --statelayer-opacity var(--md-sys-list-motion-duration) linear;
109
118
 
119
+ &:not(:has(> button)) {
120
+ --miclripple: 1;
121
+ }
110
122
  &> a,
123
+ &> button,
111
124
  &> label {
125
+ box-sizing: border-box;
112
126
  display: inherit;
113
127
  align-items: inherit;
114
128
  column-gap: inherit;
115
- border-radius: inherit;
116
- background-color: inherit;
129
+ min-height: inherit;
117
130
  inline-size: 100%;
118
131
  padding-inline: var(--md-sys-list-item-space);
132
+ border: none;
133
+ border-radius: inherit;
134
+ background-color: transparent;
119
135
  text-decoration: none;
120
136
  cursor: pointer;
121
137
  }
122
- &:has(> a,> label) {
138
+ &:has(> a,> button,> label) {
123
139
  padding-inline: 0;
124
140
  }
125
141
  &:disabled,
@@ -136,14 +152,14 @@
136
152
  .micl-list-item__thumbnail {
137
153
  opacity: 38%;
138
154
  }
139
- a, label {
155
+ a, button, label {
140
156
  pointer-events: none;
141
157
  cursor: auto;
142
158
  }
143
159
  }
144
160
  &:not(:disabled):not(.micl-list-item--disabled) {
145
161
  &:hover {
146
- background-color: color-mix(in srgb, var(--md-sys-list-item-container-color), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
162
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
147
163
 
148
164
  &:has(input[type=checkbox]) {
149
165
  cursor: pointer;
@@ -153,26 +169,25 @@
153
169
  }
154
170
  }
155
171
  &:focus-visible {
172
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
173
+
156
174
  outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
157
- outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness));
158
- background-color: color-mix(in srgb, var(--md-sys-list-item-container-color), var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity));
175
+ outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
159
176
 
160
177
  .micl-list-item__icon {
161
178
  font-variation-settings: 'FILL' 1;
162
179
  }
163
180
  }
164
181
  &:active {
165
- background-color: color-mix(in srgb, var(--md-sys-list-item-container-color), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
182
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
183
+
184
+ background-size: 0%, 100%;
185
+ transition: background-size 0ms;
166
186
 
167
187
  .micl-list-item__icon {
168
188
  font-variation-settings: 'FILL' 1;
169
189
  }
170
190
  }
171
- &:has(input[type=checkbox]) {
172
- @include ripple.effect;
173
- --miclripple: 1;
174
- --md-sys-ripple-background-color: var(--md-sys-color-primary);
175
- }
176
191
  &:has(input[type=checkbox]:checked) {
177
192
  background-color: var(--md-sys-color-secondary-container);
178
193
 
@@ -184,18 +199,11 @@
184
199
  .micl-list-item__trailing-text {
185
200
  color: var(--md-sys-color-on-surface);
186
201
  }
187
- &:focus-visible {
188
- background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity));
189
- }
190
- &:active {
191
- background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
192
- }
193
202
  }
194
203
  input[type=checkbox]:not(:disabled):hover,
195
204
  input[type=checkbox]:not(:disabled):active {
196
205
  --checkbox-state-layer-color: initial;
197
206
  --checkbox-outline-color: initial;
198
- --md-sys-ripple-background-color: transparent;
199
207
  }
200
208
  }
201
209
  }
@@ -203,7 +211,7 @@
203
211
  .micl-list-item-one {
204
212
  min-height: var(--md-sys-list-item-one-height);
205
213
 
206
- &:not(:has(> a,> label)) {
214
+ &:not(:has(> a,> button,> label)) {
207
215
  padding-block-start: var(--md-sys-list-item-one-padding);
208
216
  padding-block-end: var(--md-sys-list-item-one-padding);
209
217
 
@@ -214,6 +222,7 @@
214
222
  }
215
223
  }
216
224
  &> a,
225
+ &> button,
217
226
  &> label {
218
227
  padding-block-start: var(--md-sys-list-item-one-padding);
219
228
  padding-block-end: var(--md-sys-list-item-one-padding);
@@ -228,7 +237,7 @@
228
237
  .micl-list-item-two {
229
238
  min-height: var(--md-sys-list-item-two-height);
230
239
 
231
- &:not(:has(> a, > label)) {
240
+ &:not(:has(> a,> button,> label)) {
232
241
  padding-block-start: var(--md-sys-list-item-two-padding);
233
242
  padding-block-end: var(--md-sys-list-item-two-padding);
234
243
 
@@ -239,6 +248,7 @@
239
248
  }
240
249
  }
241
250
  &> a,
251
+ &> button,
242
252
  &> label {
243
253
  padding-block-start: var(--md-sys-list-item-two-padding);
244
254
  padding-block-end: var(--md-sys-list-item-two-padding);
@@ -258,7 +268,7 @@
258
268
  .micl-list-item-three {
259
269
  min-height: var(--md-sys-list-item-three-height);
260
270
 
261
- &:not(:has(> a, > label)) {
271
+ &:not(:has(> a,> button,> label)) {
262
272
  padding-block-start: var(--md-sys-list-item-three-padding);
263
273
  padding-block-end: var(--md-sys-list-item-three-padding);
264
274
 
@@ -269,6 +279,7 @@
269
279
  }
270
280
  }
271
281
  &> a,
282
+ &> button,
272
283
  &> label {
273
284
  padding-block-start: var(--md-sys-list-item-three-padding);
274
285
  padding-block-end: var(--md-sys-list-item-three-padding);
@@ -297,10 +308,11 @@
297
308
  }
298
309
 
299
310
  .micl-list-item__icon {
300
- color: var(--md-sys-color-on-surface-variant);
311
+ min-width: 24px;
301
312
  font-size: 24px;
302
313
  font-variation-settings: 'FILL' 0;
303
- transition: font-variation-settings var(--md-sys-motion-duration-long2) linear;
314
+ color: var(--md-sys-color-on-surface-variant);
315
+ transition: font-variation-settings var(--md-sys-list-motion-duration) linear;
304
316
  }
305
317
  .micl-list-item__avatar {
306
318
  @include typography.title-medium;
package/components/list/index.ts CHANGED
@@ -58,14 +58,9 @@ export default (() =>
58
58
  return;
59
59
  }
60
60
 
61
- let currentIndex = items.findIndex(item => isSelected(item));
62
- if (currentIndex === -1) {
63
- currentIndex = items.findIndex(item => item.tabIndex === 0);
64
- }
65
- if (currentIndex === -1) {
66
- currentIndex = 0;
67
- }
68
- let nextIndex = currentIndex;
61
+ let selectedIndex = items.findIndex(item => isSelected(item)),
62
+ currentIndex = items.findIndex(item => item.tabIndex === 0),
63
+ nextIndex = currentIndex;
69
64
 
70
65
  switch (event.key) {
71
66
  case 'ArrowDown':
@@ -77,7 +72,6 @@ export default (() =>
77
72
  event.preventDefault();
78
73
  break;
79
74
  case 'Tab':
80
- let selectedIndex = items.findIndex(item => isSelected(item));
81
75
  if (selectedIndex === -1) {
82
76
  if (currentIndex !== 0) {
83
77
  items[currentIndex].tabIndex = -1;
@@ -102,6 +96,13 @@ export default (() =>
102
96
  items[currentIndex].tabIndex = -1;
103
97
  items[nextIndex].tabIndex = 0;
104
98
  items[nextIndex].focus();
99
+
100
+ const btn = items[nextIndex].querySelector(':scope > button');
101
+ btn?.dispatchEvent(new MouseEvent('mouseenter', {
102
+ bubbles : true,
103
+ cancelable: true,
104
+ view : window
105
+ }));
105
106
  }
106
107
  }
107
108
  };