material-inspired-component-library 7.0.2 → 8.0.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 (66) hide show
  1. package/CLAUDE.md +42 -0
  2. package/README.md +6 -0
  3. package/components/accordion/README.md +6 -3
  4. package/components/button/index.scss +10 -6
  5. package/components/card/README.md +4 -0
  6. package/components/card/index.scss +159 -150
  7. package/components/checkbox/index.scss +11 -6
  8. package/components/datepicker/index.ts +9 -9
  9. package/components/dialog/index.scss +5 -6
  10. package/components/iconbutton/index.scss +10 -6
  11. package/components/list/README.md +191 -32
  12. package/components/list/index.scss +256 -190
  13. package/components/list/index.ts +100 -100
  14. package/components/menu/README.md +199 -10
  15. package/components/menu/index.scss +224 -47
  16. package/components/menu/index.ts +74 -37
  17. package/components/navigationrail/index.scss +75 -69
  18. package/components/radio/index.scss +11 -6
  19. package/components/select/README.md +42 -5
  20. package/components/select/index.scss +39 -79
  21. package/components/stepper/index.scss +1 -5
  22. package/components/textfield/index.scss +1 -1
  23. package/components/textfield/index.ts +2 -2
  24. package/dist/alert.css +1 -1
  25. package/dist/appbar.css +1 -1
  26. package/dist/badge.css +1 -1
  27. package/dist/bottomsheet.css +1 -1
  28. package/dist/button.css +1 -1
  29. package/dist/card.css +1 -1
  30. package/dist/checkbox.css +1 -1
  31. package/dist/components/list/index.d.ts +2 -2
  32. package/dist/datepicker.css +1 -1
  33. package/dist/dialog.css +1 -1
  34. package/dist/divider.css +1 -1
  35. package/dist/foundations.css +1 -1
  36. package/dist/iconbutton.css +1 -1
  37. package/dist/list.css +1 -1
  38. package/dist/menu.css +1 -1
  39. package/dist/micl.css +1 -1
  40. package/dist/micl.js +1 -1
  41. package/dist/navigationrail.css +1 -1
  42. package/dist/radio.css +1 -1
  43. package/dist/select.css +1 -1
  44. package/dist/sidesheet.css +1 -1
  45. package/dist/slider.css +1 -1
  46. package/dist/snackbar.css +1 -1
  47. package/dist/stepper.css +1 -1
  48. package/dist/switch.css +1 -1
  49. package/dist/textfield.css +1 -1
  50. package/dist/timepicker.css +1 -1
  51. package/docs/accordion.html +24 -24
  52. package/docs/bottomsheet.html +1 -4
  53. package/docs/dialog.html +1 -1
  54. package/docs/index.html +4 -4
  55. package/docs/list.html +38 -22
  56. package/docs/menu.html +246 -41
  57. package/docs/micl.css +1 -1
  58. package/docs/micl.js +1 -1
  59. package/docs/select.html +68 -19
  60. package/docs/shapes.html +85 -0
  61. package/foundations/index.scss +0 -1
  62. package/micl.ts +6 -1
  63. package/package.json +3 -3
  64. package/styles/README.md +4 -4
  65. package/styles/shapes.scss +81 -0
  66. package/styles/statelayer.scss +10 -0
package/styles/shapes.scss CHANGED
@@ -47,3 +47,84 @@ $md-sys-shape-corner-full: 50%;
47
47
  --md-sys-shape-corner-extra-extra-large: #{$md-sys-shape-corner-value-extra-extra-large};
48
48
  --md-sys-shape-corner-full: #{$md-sys-shape-corner-full};
49
49
  }
50
+
51
+ /*
52
+ .micl-shape--no-rounding {
53
+ border-radius: var(--md-sys-shape-corner-none, 0px);
54
+ }
55
+ .micl-shape--extra-small-rounding {
56
+ border-radius: var(--md-sys-shape-corner-extra-small, 4px);
57
+ }
58
+ .micl-shape--extra-small-top-rounding {
59
+ border-radius: var(--md-sys-shape-corner-extra-small-top, 4px) var(--md-sys-shape-corner-extra-small-top, 4px) 0 0;
60
+ }
61
+ .micl-shape--small-rounding {
62
+ border-radius: var(--md-sys-shape-corner-small, 8px);
63
+ }
64
+ .micl-shape--medium-rounding {
65
+ border-radius: var(--md-sys-shape-corner-medium, 12px);
66
+ }
67
+ .micl-shape--large-rounding {
68
+ border-radius: var(--md-sys-shape-corner-large, 16px);
69
+ }
70
+ .micl-shape--large-top-rounding {
71
+ border-radius: var(--md-sys-shape-corner-large, 16px) var(--md-sys-shape-corner-large, 16px) 0 0;
72
+ }
73
+ .micl-shape--large-start-rounding {
74
+ border-start-start-radius: var(--md-sys-shape-corner-large, 16px);
75
+ border-start-end-radius: 0;
76
+ border-end-start-radius: var(--md-sys-shape-corner-large, 16px);
77
+ border-end-end-radius: 0;
78
+ }
79
+ .micl-shape--large-end-rounding {
80
+ border-start-start-radius: 0;
81
+ border-start-end-radius: var(--md-sys-shape-corner-large, 16px);
82
+ border-end-start-radius: 0;
83
+ border-end-end-radius: var(--md-sys-shape-corner-large, 16px);
84
+ }
85
+ .micl-shape--large-increased-rounding {
86
+ border-radius: var(--md-sys-shape-corner-large-increased, 20px);
87
+ }
88
+ .micl-shape--extra-large-rounding {
89
+ border-radius: var(--md-sys-shape-corner-extra-large, 28px);
90
+ }
91
+ .micl-shape--extra-large-top-rounding {
92
+ border-radius: var(--md-sys-shape-corner-extra-large, 28px) var(--md-sys-shape-corner-extra-large, 28px) 0 0;
93
+ }
94
+ .micl-shape--extra-large-increased-rounding {
95
+ border-radius: var(--md-sys-shape-corner-extra-large-increased, 32px);
96
+ }
97
+ .micl-shape--extra-extra-large-rounding {
98
+ border-radius: var(--md-sys-shape-corner-extra-extra-large, 48px);
99
+ }
100
+ .micl-shape--full-rounding {
101
+ border-radius: var(--md-sys-shape-corner-full, 50%);
102
+ }
103
+
104
+
105
+ .micl-shape-circle {
106
+ border-radius: var(--md-sys-shape-corner-full, 50%);
107
+ background-color: var(--micl-shape-background-color);
108
+ }
109
+ .micl-shape-square {
110
+ background-color: var(--micl-shape-background-color);
111
+ }
112
+ .micl-shape-slanted {
113
+ position: relative;
114
+ z-index: 1;
115
+ }
116
+ .micl-shape-slanted::before {
117
+ content: "";
118
+ position: absolute;
119
+ inset: 0;
120
+ border-radius: inherit;
121
+ z-index: -1;
122
+ background-color: var(--micl-shape-background-color);
123
+ transform: skewX(-8deg);
124
+ }
125
+ .micl-shape-arch {
126
+ border-start-start-radius: 50% !important;
127
+ border-start-end-radius: 50% !important;
128
+ background-color: var(--micl-shape-background-color);
129
+ }
130
+ */
package/styles/statelayer.scss CHANGED
@@ -33,6 +33,8 @@ $md-sys-state-focus-indicator-inner-offset: -3px;
33
33
  $md-sys-state-focus-indicator-outer-offset: 2px;
34
34
  $md-sys-state-focus-indicator-thickness: 3px;
35
35
 
36
+ $md-sys-state-ripple-duration: 5000ms;
37
+
36
38
  :root {
37
39
  --md-sys-state-layer-size: #{$md-sys-state-layer-size};
38
40
  --md-sys-target-size: #{$md-sys-target-size};
@@ -47,6 +49,9 @@ $md-sys-state-focus-indicator-thickness: 3px;
47
49
  --md-sys-state-focus-indicator-inner-offset: #{$md-sys-state-focus-indicator-inner-offset};
48
50
  --md-sys-state-focus-indicator-outer-offset: #{$md-sys-state-focus-indicator-outer-offset};
49
51
  --md-sys-state-focus-indicator-thickness: #{$md-sys-state-focus-indicator-thickness};
52
+
53
+ --md-sys-state-ripple-opacity-factor: 0.6;
54
+ --md-sys-state-ripple-duration: #{$md-sys-state-ripple-duration};
50
55
  }
51
56
 
52
57
  @property --statelayer-color {
@@ -60,3 +65,8 @@ $md-sys-state-focus-indicator-thickness: 3px;
60
65
  initial-value: 0%;
61
66
  inherits: false;
62
67
  }
68
+
69
+ @keyframes micl-ripple {
70
+ from { background-size: 0%, 100%; }
71
+ to { background-size: 10000%, 100%; }
72
+ }