material-inspired-component-library 5.0.0 → 5.0.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 (98) hide show
  1. package/README.md +10 -0
  2. package/components/alert/index.scss +4 -4
  3. package/components/appbar/index.scss +3 -2
  4. package/components/badge/index.scss +2 -2
  5. package/components/bottomsheet/index.scss +6 -5
  6. package/components/button/index.scss +20 -20
  7. package/components/card/index.scss +10 -9
  8. package/components/checkbox/index.scss +11 -11
  9. package/components/datepicker/index.scss +435 -0
  10. package/components/datepicker/index.ts +600 -0
  11. package/components/dialog/README.md +6 -6
  12. package/components/dialog/index.scss +23 -17
  13. package/components/divider/index.scss +2 -0
  14. package/components/iconbutton/index.scss +18 -17
  15. package/components/list/index.scss +10 -10
  16. package/components/menu/index.scss +2 -1
  17. package/components/navigationrail/index.scss +10 -9
  18. package/components/radio/README.md +0 -1
  19. package/components/radio/index.scss +11 -11
  20. package/components/select/index.scss +2 -1
  21. package/components/sidesheet/index.scss +3 -1
  22. package/components/slider/index.scss +7 -7
  23. package/components/stepper/index.scss +5 -4
  24. package/components/switch/README.md +0 -1
  25. package/components/switch/index.scss +21 -21
  26. package/components/textfield/index.scss +6 -5
  27. package/components/textfield/index.ts +7 -6
  28. package/components/timepicker/index.scss +9 -8
  29. package/components/timepicker/index.ts +12 -12
  30. package/dist/alert.css +1 -1
  31. package/dist/appbar.css +1 -1
  32. package/dist/badge.css +1 -1
  33. package/dist/bottomsheet.css +1 -1
  34. package/dist/button.css +1 -1
  35. package/dist/card.css +1 -1
  36. package/dist/checkbox.css +1 -1
  37. package/dist/components/datepicker/index.d.ts +6 -0
  38. package/dist/datepicker.css +1 -0
  39. package/dist/datepicker.js +1 -0
  40. package/dist/dialog.css +1 -1
  41. package/dist/divider.css +1 -1
  42. package/dist/foundations.css +1 -0
  43. package/dist/foundations.js +1 -0
  44. package/dist/iconbutton.css +1 -1
  45. package/dist/layout.css +1 -1
  46. package/dist/list.css +1 -1
  47. package/dist/menu.css +1 -1
  48. package/dist/micl.css +1 -1
  49. package/dist/micl.js +1 -1
  50. package/dist/navigationrail.css +1 -1
  51. package/dist/radio.css +1 -1
  52. package/dist/scrollbar.css +1 -0
  53. package/dist/scrollbar.js +1 -0
  54. package/dist/select.css +1 -1
  55. package/dist/sidesheet.css +1 -1
  56. package/dist/slider.css +1 -1
  57. package/dist/stepper.css +1 -1
  58. package/dist/switch.css +1 -1
  59. package/dist/textfield.css +1 -1
  60. package/dist/timepicker.css +1 -1
  61. package/docs/accordion.html +3 -1
  62. package/docs/alert.html +3 -1
  63. package/docs/bottomsheet.html +3 -1
  64. package/docs/button.html +3 -1
  65. package/docs/card.html +3 -1
  66. package/docs/checkbox.html +3 -1
  67. package/docs/datepicker.html +151 -0
  68. package/docs/dialog.html +23 -9
  69. package/docs/divider.html +3 -1
  70. package/docs/docs.js +43 -0
  71. package/docs/iconbutton.html +1 -1
  72. package/docs/index.html +3 -1
  73. package/docs/list.html +3 -1
  74. package/docs/menu.html +3 -1
  75. package/docs/micl.css +1 -1
  76. package/docs/micl.js +1 -1
  77. package/docs/navigationrail.html +3 -1
  78. package/docs/radio.html +3 -1
  79. package/docs/select.html +3 -1
  80. package/docs/sidesheet.html +3 -1
  81. package/docs/slider.html +1 -1
  82. package/docs/stepper.html +3 -1
  83. package/docs/switch.html +3 -1
  84. package/docs/textfield.html +3 -1
  85. package/docs/timepicker.html +4 -2
  86. package/foundations/index.scss +102 -0
  87. package/foundations/layout/index.scss +0 -52
  88. package/foundations/scrollbar/index.scss +46 -0
  89. package/intl.d.ts +9 -0
  90. package/micl.ts +18 -8
  91. package/package.json +2 -1
  92. package/styles/README.md +17 -8
  93. package/styles/motion.scss +3 -0
  94. package/styles/shapes.scss +23 -18
  95. package/styles/statelayer.scss +4 -0
  96. package/styles/typography.scss +2 -2
  97. package/styles.scss +3 -26
  98. package/tsconfig.json +2 -2
package/styles/motion.scss CHANGED
@@ -104,6 +104,8 @@ $md-sys-motion-duration-extra-long2: 800ms;
104
104
  $md-sys-motion-duration-extra-long3: 900ms;
105
105
  $md-sys-motion-duration-extra-long4: 1000ms;
106
106
 
107
+ $md-sys-motion-path: linear;
108
+
107
109
  :root {
108
110
  --md-sys-motion-duration-short1: #{$md-sys-motion-duration-short1};
109
111
  --md-sys-motion-duration-short2: #{$md-sys-motion-duration-short2};
@@ -121,4 +123,5 @@ $md-sys-motion-duration-extra-long4: 1000ms;
121
123
  --md-sys-motion-duration-extra-long2: #{$md-sys-motion-duration-extra-long2};
122
124
  --md-sys-motion-duration-extra-long3: #{$md-sys-motion-duration-extra-long3};
123
125
  --md-sys-motion-duration-extra-long4: #{$md-sys-motion-duration-extra-long4};
126
+ --md-sys-motion-path: #{$md-sys-motion-path};
124
127
  }
package/styles/shapes.scss CHANGED
@@ -19,26 +19,31 @@
19
19
  // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20
20
  // SOFTWARE.
21
21
 
22
- $md-sys-shape-corner-none: 0px;
23
- $md-sys-shape-corner-extra-small: 4px;
24
- $md-sys-shape-corner-small: 8px;
25
- $md-sys-shape-corner-medium: 12px;
26
- $md-sys-shape-corner-large: 16px;
27
- $md-sys-shape-corner-large-increased: 20px;
28
- $md-sys-shape-corner-extra-large: 28px;
29
- $md-sys-shape-corner-extra-large-increased: 32px;
30
- $md-sys-shape-corner-extra-extra-large: 48px;
22
+ $md-sys-shape-corner-value-none: 0px;
23
+ $md-sys-shape-corner-value-extra-small: 4px;
24
+ $md-sys-shape-corner-value-small: 8px;
25
+ $md-sys-shape-corner-value-medium: 12px;
26
+ $md-sys-shape-corner-value-large: 16px;
27
+ $md-sys-shape-corner-value-large-increased: 20px;
28
+ $md-sys-shape-corner-value-extra-large: 28px;
29
+ $md-sys-shape-corner-value-extra-large-increased: 32px;
30
+ $md-sys-shape-corner-value-extra-extra-large: 48px;
31
31
  $md-sys-shape-corner-full: 50%;
32
32
 
33
33
  :root {
34
- --md-sys-shape-corner-none: #{$md-sys-shape-corner-none};
35
- --md-sys-shape-corner-extra-small: #{$md-sys-shape-corner-extra-small};
36
- --md-sys-shape-corner-small: #{$md-sys-shape-corner-small};
37
- --md-sys-shape-corner-medium: #{$md-sys-shape-corner-medium};
38
- --md-sys-shape-corner-large: #{$md-sys-shape-corner-large};
39
- --md-sys-shape-corner-large-increased: #{$md-sys-shape-corner-large-increased};
40
- --md-sys-shape-corner-extra-large: #{$md-sys-shape-corner-extra-large};
41
- --md-sys-shape-corner-extra-large-increased: #{$md-sys-shape-corner-extra-large-increased};
42
- --md-sys-shape-corner-extra-extra-large: #{$md-sys-shape-corner-extra-extra-large};
34
+ --md-sys-shape-corner-none: #{$md-sys-shape-corner-value-none};
35
+ --md-sys-shape-corner-extra-small: #{$md-sys-shape-corner-value-extra-small};
36
+ --md-sys-shape-corner-extra-small-top: #{$md-sys-shape-corner-value-extra-small} #{$md-sys-shape-corner-value-extra-small} 0 0;
37
+ --md-sys-shape-corner-small: #{$md-sys-shape-corner-value-small};
38
+ --md-sys-shape-corner-medium: #{$md-sys-shape-corner-value-medium};
39
+ --md-sys-shape-corner-large: #{$md-sys-shape-corner-value-large};
40
+ --md-sys-shape-corner-large-end: 0 #{$md-sys-shape-corner-value-large} #{$md-sys-shape-corner-value-large} 0;
41
+ --md-sys-shape-corner-large-start: #{$md-sys-shape-corner-value-large} 0 0 #{$md-sys-shape-corner-value-large};
42
+ --md-sys-shape-corner-large-top: #{$md-sys-shape-corner-value-large} #{$md-sys-shape-corner-value-large} 0 0;
43
+ --md-sys-shape-corner-large-increased: #{$md-sys-shape-corner-value-large-increased};
44
+ --md-sys-shape-corner-extra-large: #{$md-sys-shape-corner-value-extra-large};
45
+ --md-sys-shape-corner-extra-large-top: #{$md-sys-shape-corner-value-extra-large} #{$md-sys-shape-corner-value-extra-large} 0 0;
46
+ --md-sys-shape-corner-extra-large-increased: #{$md-sys-shape-corner-value-extra-large-increased};
47
+ --md-sys-shape-corner-extra-extra-large: #{$md-sys-shape-corner-value-extra-extra-large};
43
48
  --md-sys-shape-corner-full: #{$md-sys-shape-corner-full};
44
49
  }
package/styles/statelayer.scss CHANGED
@@ -26,6 +26,8 @@ $md-sys-state-hover-state-layer-opacity: 8%;
26
26
  $md-sys-state-focus-state-layer-opacity: 10%;
27
27
  $md-sys-state-pressed-state-layer-opacity: 10%;
28
28
  $md-sys-state-dragged-state-layer-opacity: 16%;
29
+ $md-sys-state-disabled-state-layer-opacity: 38%;
30
+ $md-sys-state-backdrop-opacity: 32%;
29
31
 
30
32
  $md-sys-state-focus-indicator-inner-offset: -3px;
31
33
  $md-sys-state-focus-indicator-outer-offset: 2px;
@@ -39,6 +41,8 @@ $md-sys-state-focus-indicator-thickness: 3px;
39
41
  --md-sys-state-focus-state-layer-opacity: #{$md-sys-state-focus-state-layer-opacity};
40
42
  --md-sys-state-pressed-state-layer-opacity: #{$md-sys-state-pressed-state-layer-opacity};
41
43
  --md-sys-state-dragged-state-layer-opacity: #{$md-sys-state-dragged-state-layer-opacity};
44
+ --md-sys-state-disabled-state-layer-opacity: #{$md-sys-state-disabled-state-layer-opacity};
45
+ --md-sys-state-backdrop-opacity: #{$md-sys-state-backdrop-opacity};
42
46
 
43
47
  --md-sys-state-focus-indicator-inner-offset: #{$md-sys-state-focus-indicator-inner-offset};
44
48
  --md-sys-state-focus-indicator-outer-offset: #{$md-sys-state-focus-indicator-outer-offset};
package/styles/typography.scss CHANGED
@@ -20,8 +20,8 @@
20
20
  // SOFTWARE.
21
21
 
22
22
  :root {
23
- --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
24
- --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
23
+ --md-ref-typeface-plain: Google Sans, system-ui, sans-serif;
24
+ --md-ref-typeface-brand: Google Sans, system-ui, sans-serif;
25
25
  --md-ref-typeface-weight-regular: 400;
26
26
  --md-ref-typeface-weight-medium: 500;
27
27
  --md-ref-typeface-weight-bold: 700;
package/styles.scss CHANGED
@@ -19,7 +19,9 @@
19
19
  // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20
20
  // SOFTWARE.
21
21
 
22
+ @use 'foundations';
22
23
  @use 'foundations/layout';
24
+ @use 'foundations/scrollbar';
23
25
 
24
26
  @use 'styles/typography';
25
27
  @use 'styles/shapes';
@@ -47,30 +49,5 @@
47
49
  @use 'components/bottomsheet';
48
50
  @use 'components/navigationrail';
49
51
  @use 'components/stepper';
52
+ @use 'components/datepicker';
50
53
  @use 'components/timepicker';
51
-
52
- @property --micl-ripple {
53
- syntax: '<integer>';
54
- inherits: false;
55
- initial-value: 0;
56
- }
57
- @property --micl-x {
58
- syntax: '<length>';
59
- inherits: false;
60
- initial-value: -100000px;
61
- }
62
- @property --micl-y {
63
- syntax: '<length>';
64
- inherits: false;
65
- initial-value: -100000px;
66
- }
67
- @property --micl-width {
68
- syntax: '<length>';
69
- inherits: true;
70
- initial-value: 0px;
71
- }
72
- @property --micl-height {
73
- syntax: '<length>';
74
- inherits: true;
75
- initial-value: 0px;
76
- }
package/tsconfig.json CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  /* Language and Environment */
14
14
  "target": "es2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15
- // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
15
+ "lib": ["DOM", "es2022"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16
16
  // "jsx": "preserve", /* Specify what JSX code is generated. */
17
17
  // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
18
18
  // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
@@ -27,7 +27,7 @@
27
27
  /* Modules */
28
28
  "module": "es2022", /* Specify what module code is generated. */
29
29
  "rootDir": "./", /* Specify the root folder within your source files. */
30
- "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
30
+ "moduleResolution": "bundler", /* Specify how TypeScript looks up a file from a given module specifier. */
31
31
  // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
32
32
  // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
33
33
  // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */