material-inspired-component-library 2.0.1 → 3.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 (56) hide show
  1. package/README.md +14 -0
  2. package/components/README.md +2 -0
  3. package/components/appbar/README.md +94 -0
  4. package/components/appbar/index.scss +216 -0
  5. package/components/button/index.scss +70 -65
  6. package/components/button/index.ts +1 -1
  7. package/components/card/index.scss +1 -1
  8. package/components/checkbox/index.scss +4 -0
  9. package/components/iconbutton/index.scss +111 -111
  10. package/components/iconbutton/index.ts +1 -1
  11. package/components/navigationrail/README.md +11 -11
  12. package/components/navigationrail/index.scss +20 -12
  13. package/components/radio/index.scss +1 -1
  14. package/dist/appbar.css +1 -0
  15. package/dist/appbar.js +1 -0
  16. package/dist/bottomsheet.css +1 -1
  17. package/dist/button.css +1 -1
  18. package/dist/card.css +1 -1
  19. package/dist/checkbox.css +1 -1
  20. package/dist/dialog.css +1 -1
  21. package/dist/iconbutton.css +1 -1
  22. package/dist/list.css +1 -1
  23. package/dist/micl.css +1 -1
  24. package/dist/navigationrail.css +1 -1
  25. package/dist/radio.css +1 -1
  26. package/dist/select.css +1 -1
  27. package/dist/slider.css +1 -1
  28. package/dist/switch.css +1 -1
  29. package/dist/textfield.css +1 -1
  30. package/docs/accordion.html +298 -254
  31. package/docs/bottomsheet.html +174 -145
  32. package/docs/button.html +210 -182
  33. package/docs/card.html +107 -72
  34. package/docs/checkbox.html +92 -65
  35. package/docs/dialog.html +154 -123
  36. package/docs/divider.html +96 -67
  37. package/docs/docs.css +14 -24
  38. package/docs/docs.js +4 -2
  39. package/docs/iconbutton.html +196 -171
  40. package/docs/index.html +296 -286
  41. package/docs/list.html +260 -216
  42. package/docs/menu.html +260 -220
  43. package/docs/micl.css +1 -1
  44. package/docs/navigationrail.html +36 -34
  45. package/docs/radio.html +93 -68
  46. package/docs/select.html +213 -173
  47. package/docs/sidesheet.html +104 -87
  48. package/docs/slider.html +105 -72
  49. package/docs/switch.html +126 -101
  50. package/docs/textfield.html +181 -138
  51. package/layout/README.md +122 -0
  52. package/layout/index.scss +258 -0
  53. package/package.json +1 -1
  54. package/styles/statelayer.scss +2 -0
  55. package/styles.scss +13 -0
  56. package/styles/layout.scss +0 -74
package/docs/navigationrail.html CHANGED
@@ -3,26 +3,23 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Demonstrating MICL Navigation Rails">
6
7
  <title>MICL Navigation Rail</title>
7
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,delete,favorite,inbox,menu,menu_open,outbox&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,delete,favorite,home,inbox,menu,menu_open,outbox&display=block">
9
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
11
  <link rel="stylesheet" href="micl.css">
11
12
  <link rel="stylesheet" href="docs.css">
12
13
  <style>
13
- .micl-card__content {
14
- display: flex;
15
- flex-direction: column;
16
- align-items: flex-start;
17
- padding-block: 32px;
18
- row-gap: 32px;
14
+ .micl-card-filled {
15
+ height: 420px;
16
+ width: 360px;
19
17
  }
20
18
  </style>
21
19
  </head>
22
- <body class="light">
23
- <!-- <dialog id="mynavigationrail1" class="micl-navigationrail" closedby="closerequest"> -->
24
- <!-- <div id="mynavigationrail1" class="micl-navigationrail" popover="manual"> -->
25
- <div id="mynavigationrail1" class="micl-navigationrail">
20
+ <body class="micl-window light">
21
+ <dialog id="mynavigationrail1" class="micl-navigationrail" closedby="closerequest">
22
+ <!-- <nav id="mynavigationrail1" class="micl-navigationrail" popover="manual"> -->
26
23
  <div class="micl-navigationrail__headline">
27
24
  <button type="button" class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" popovertarget="mynavigationrail1" data-miclalt="menu_open" aria-label="Toggle navigation rail">menu</button>
28
25
  </div>
@@ -51,29 +48,34 @@
51
48
 
52
49
  <span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px">97</span>
53
50
  <span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px"></span>
54
- </div>
55
- <!-- </dialog> -->
56
-
57
- <div class="headline">
58
- <!-- <button type="button" class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" style="margin:8px 0 0 8px" popovertarget="mynavigationrail1" aria-label="Toggle navigation rail">menu</button> -->
59
- <h1 class="md-sys-typescale-emphasized-display-small">Navigation rails</h1>
60
- <div id="settings-placeholder"></div>
61
- </div>
62
-
63
- <div class="cards">
64
- <div class="micl-card-filled" style="height:400px"></div>
65
- <div class="micl-card-filled" style="height:400px"></div>
66
- <div class="micl-card-filled" style="height:400px"></div>
67
- <div class="micl-card-filled" style="height:400px"></div>
68
- <div class="micl-card-filled" style="height:400px"></div>
69
- <div class="micl-card-filled" style="height:400px"></div>
70
- <div class="micl-card-filled" style="height:400px"></div>
71
- <div class="micl-card-filled" style="height:400px"></div>
72
- <div class="micl-card-filled" style="height:400px"></div>
73
- <div class="micl-card-filled" style="height:400px"></div>
74
- <div class="micl-card-filled" style="height:400px"></div>
75
- <div class="micl-card-filled" style="height:400px"></div>
76
- </div>
51
+ <!-- </nav> -->
52
+ </dialog>
53
+ <main class="micl-body">
54
+ <section class="micl-pane">
55
+ <header class="micl-appbar micl-appbar--large">
56
+ <button type="button" class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" style="margin:8px 0 0 8px" popovertarget="mynavigationrail1" aria-label="Toggle navigation rail">menu</button>
57
+ <div class="micl-appbar__headline">
58
+ <h1>Navigation rails</h1>
59
+ <p class="micl-appbar__subtitle">Showcasing MICL navigation rails</p>
60
+ </div>
61
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
62
+ </header>
63
+ <div style="display:flex;flex-wrap:wrap">
64
+ <div class="micl-card-filled"></div>
65
+ <div class="micl-card-filled"></div>
66
+ <div class="micl-card-filled"></div>
67
+ <div class="micl-card-filled"></div>
68
+ <div class="micl-card-filled"></div>
69
+ <div class="micl-card-filled"></div>
70
+ <div class="micl-card-filled"></div>
71
+ <div class="micl-card-filled"></div>
72
+ <div class="micl-card-filled"></div>
73
+ <div class="micl-card-filled"></div>
74
+ <div class="micl-card-filled"></div>
75
+ <div class="micl-card-filled"></div>
76
+ </div>
77
+ </section>
78
+ </main>
77
79
 
78
80
  <script src="micl.js"></script>
79
81
  <script src="docs.js"></script>
package/docs/radio.html CHANGED
@@ -3,18 +3,14 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Demonstrating MICL Radio Buttons">
6
7
  <title>MICL Radio Buttons</title>
7
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
8
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
9
11
  <link rel="stylesheet" href="micl.css">
10
12
  <link rel="stylesheet" href="docs.css">
11
13
  <style>
12
- label {
13
- color: var(--md-sys-color-on-surface);
14
- }
15
- .micl-card-filled .micl-card__content {
16
- padding-inline: 0;
17
- }
18
14
  .micl-card-outlined .micl-card__content {
19
15
  display: flex;
20
16
  flex-direction: column;
@@ -26,74 +22,103 @@
26
22
  }
27
23
  </style>
28
24
  </head>
29
- <body class="light">
30
- <div class="headline">
31
- <h1 class="md-sys-typescale-emphasized-display-small">Radio buttons</h1>
32
- <div id="settings-placeholder"></div>
33
- </div>
34
-
35
- <div class="cards">
36
- <div class="micl-card-elevated">
37
- <div class="micl-card__content">
38
- <div class="radio">
39
- <input type="radio" class="micl-radio" id="myradio1" name="choices" checked value="c1">
40
- <label for="myradio1" class="md-sys-typescale-body-medium">First Choice</label>
41
- </div>
42
- <div class="radio">
43
- <input type="radio" class="micl-radio" id="myradio2" name="choices" value="c2">
44
- <label for="myradio2" class="md-sys-typescale-body-medium">Second Choice</label>
45
- </div>
46
- <div class="radio">
47
- <input type="radio" class="micl-radio" id="myradio3" name="choices" value="c3">
48
- <label for="myradio3" class="md-sys-typescale-body-medium">Third Choice</label>
49
- </div>
50
- <div class="radio">
51
- <input type="radio" class="micl-radio" id="myradio4" name="choices" value="c4" disabled>
52
- <label for="myradio4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
25
+ <body class="micl-window light">
26
+ <main class="micl-body micl-body--stacked-to-large">
27
+ <section class="micl-pane">
28
+ <header class="micl-appbar">
29
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
30
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
31
+ </a>
32
+ <div class="micl-appbar__headline micl-appbar__headline--center">
33
+ <h1>Radio buttons</h1>
34
+ <p class="micl-appbar__subtitle">Showcasing MICL radio buttons</p>
53
35
  </div>
54
- </div>
55
- </div>
56
- <div class="micl-card-filled">
57
- <div class="micl-card__content">
58
- <div class="radio">
59
- <input type="radio" class="micl-radio" id="myradio11" name="alternatives" checked value="c1">
60
- <label for="myradio11" class="md-sys-typescale-body-medium">First Choice</label>
61
- </div>
62
- <div class="radio">
63
- <input type="radio" class="micl-radio" id="myradio12" name="alternatives" value="c2">
64
- <label for="myradio12" class="md-sys-typescale-body-medium">Second Choice</label>
65
- </div>
66
- <div class="radio">
67
- <input type="radio" class="micl-radio" id="myradio13" name="alternatives" value="c3">
68
- <label for="myradio13" class="md-sys-typescale-body-medium">Third Choice</label>
36
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
37
+ </header>
38
+
39
+ <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
40
+ <div class="micl-pane__column">
41
+ <div class="micl-card-elevated">
42
+ <div class="micl-card__content">
43
+ <div class="radio">
44
+ <input type="radio" class="micl-radio" id="myradio1" name="choices" checked value="c1">
45
+ <label for="myradio1" class="md-sys-typescale-body-medium">First Choice</label>
46
+ </div>
47
+ <div class="radio">
48
+ <input type="radio" class="micl-radio" id="myradio2" name="choices" value="c2">
49
+ <label for="myradio2" class="md-sys-typescale-body-medium">Second Choice</label>
50
+ </div>
51
+ <div class="radio">
52
+ <input type="radio" class="micl-radio" id="myradio3" name="choices" value="c3">
53
+ <label for="myradio3" class="md-sys-typescale-body-medium">Third Choice</label>
54
+ </div>
55
+ <div class="radio">
56
+ <input type="radio" class="micl-radio" id="myradio4" name="choices" value="c4" disabled>
57
+ <label for="myradio4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div class="micl-card-filled">
62
+ <div class="micl-card__content">
63
+ <div class="radio">
64
+ <input type="radio" class="micl-radio" id="myradio11" name="alternatives" checked value="c1">
65
+ <label for="myradio11" class="md-sys-typescale-body-medium">First Choice</label>
66
+ </div>
67
+ <div class="radio">
68
+ <input type="radio" class="micl-radio" id="myradio12" name="alternatives" value="c2">
69
+ <label for="myradio12" class="md-sys-typescale-body-medium">Second Choice</label>
70
+ </div>
71
+ <div class="radio">
72
+ <input type="radio" class="micl-radio" id="myradio13" name="alternatives" value="c3">
73
+ <label for="myradio13" class="md-sys-typescale-body-medium">Third Choice</label>
74
+ </div>
75
+ <div class="radio">
76
+ <input type="radio" class="micl-radio" id="myradio14" name="alternatives" value="c4" disabled>
77
+ <label for="myradio14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
78
+ </div>
79
+ </div>
80
+ </div>
69
81
  </div>
70
- <div class="radio">
71
- <input type="radio" class="micl-radio" id="myradio14" name="alternatives" value="c4" disabled>
72
- <label for="myradio14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
82
+ <div class="micl-pane__column">
83
+ <div class="micl-card-outlined">
84
+ <div class="micl-card__content">
85
+ <div class="radio">
86
+ <label for="myradio21" class="md-sys-typescale-body-medium">First Choice</label>
87
+ <input type="radio" class="micl-radio" id="myradio21" name="selection" checked value="c1">
88
+ </div>
89
+ <div class="radio">
90
+ <label for="myradio22" class="md-sys-typescale-body-medium">Second Choice</label>
91
+ <input type="radio" class="micl-radio" id="myradio22" name="selection" value="c2">
92
+ </div>
93
+ <div class="radio">
94
+ <label for="myradio23" class="md-sys-typescale-body-medium">Third Choice</label>
95
+ <input type="radio" class="micl-radio" id="myradio23" name="selection" value="c3">
96
+ </div>
97
+ <div class="radio">
98
+ <label for="myradio24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
99
+ <input type="radio" class="micl-radio" id="myradio24" name="selection" value="c4" disabled>
100
+ </div>
101
+ </div>
102
+ </div>
73
103
  </div>
74
104
  </div>
75
- </div>
76
- <div class="micl-card-outlined">
77
- <div class="micl-card__content">
78
- <div class="radio">
79
- <label for="myradio21" class="md-sys-typescale-body-medium">First Choice</label>
80
- <input type="radio" class="micl-radio" id="myradio21" name="selection" checked value="c1">
81
- </div>
82
- <div class="radio">
83
- <label for="myradio22" class="md-sys-typescale-body-medium">Second Choice</label>
84
- <input type="radio" class="micl-radio" id="myradio22" name="selection" value="c2">
85
- </div>
86
- <div class="radio">
87
- <label for="myradio23" class="md-sys-typescale-body-medium">Third Choice</label>
88
- <input type="radio" class="micl-radio" id="myradio23" name="selection" value="c3">
105
+ </section>
106
+ <section class="micl-pane">
107
+ <div class="micl-card-filled">
108
+ <div class="micl-card__headline-s">
109
+ <h2>Code example</h2>
89
110
  </div>
90
- <div class="radio">
91
- <label for="myradio24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
92
- <input type="radio" class="micl-radio" id="myradio24" name="selection" value="c4" disabled>
111
+ <div class="micl-card__content docs-code">
112
+ <pre><code>
113
+ &lt;div style="display:flex;align-items:center"&gt;
114
+ &lt;input type="radio" class="micl-radio" id="id0" name="choices" checked value="v0"&gt;
115
+ &lt;label for="id0" class="md-sys-typescale-body-medium">First Choice&lt;/label&gt;
116
+ &lt;/div&gt;
117
+ </code></pre>
93
118
  </div>
94
119
  </div>
95
- </div>
96
- </div>
120
+ </section>
121
+ </main>
97
122
 
98
123
  <script src="micl.js"></script>
99
124
  <script src="docs.js"></script>