material-inspired-component-library 2.0.0 → 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 (71) hide show
  1. package/CODE_OF_CONDUCT.md +128 -0
  2. package/README.md +14 -0
  3. package/components/README.md +2 -0
  4. package/components/appbar/README.md +94 -0
  5. package/components/appbar/index.scss +216 -0
  6. package/components/badge/README.md +5 -5
  7. package/components/badge/index.scss +20 -27
  8. package/components/bottomsheet/README.md +29 -17
  9. package/components/bottomsheet/index.scss +23 -23
  10. package/components/bottomsheet/index.ts +25 -24
  11. package/components/button/README.md +1 -1
  12. package/components/button/index.scss +70 -65
  13. package/components/button/index.ts +1 -1
  14. package/components/card/index.scss +1 -1
  15. package/components/checkbox/index.scss +4 -0
  16. package/components/dialog/README.md +9 -9
  17. package/components/iconbutton/index.scss +111 -111
  18. package/components/iconbutton/index.ts +1 -1
  19. package/components/navigationrail/README.md +16 -16
  20. package/components/navigationrail/index.scss +20 -12
  21. package/components/radio/index.scss +1 -1
  22. package/components/sidesheet/README.md +32 -17
  23. package/components/sidesheet/index.scss +43 -47
  24. package/components/slider/README.md +5 -5
  25. package/dist/appbar.css +1 -0
  26. package/dist/appbar.js +1 -0
  27. package/dist/badge.css +1 -1
  28. package/dist/bottomsheet.css +1 -1
  29. package/dist/button.css +1 -1
  30. package/dist/card.css +1 -1
  31. package/dist/checkbox.css +1 -1
  32. package/dist/dialog.css +1 -1
  33. package/dist/iconbutton.css +1 -1
  34. package/dist/list.css +1 -1
  35. package/dist/micl.css +1 -1
  36. package/dist/micl.js +1 -1
  37. package/dist/navigationrail.css +1 -1
  38. package/dist/radio.css +1 -1
  39. package/dist/select.css +1 -1
  40. package/dist/sidesheet.css +1 -1
  41. package/dist/slider.css +1 -1
  42. package/dist/switch.css +1 -1
  43. package/dist/textfield.css +1 -1
  44. package/docs/accordion.html +298 -254
  45. package/docs/bottomsheet.html +194 -114
  46. package/docs/button.html +210 -182
  47. package/docs/card.html +107 -72
  48. package/docs/checkbox.html +92 -65
  49. package/docs/dialog.html +154 -123
  50. package/docs/divider.html +96 -67
  51. package/docs/docs.css +14 -24
  52. package/docs/docs.js +4 -2
  53. package/docs/iconbutton.html +196 -171
  54. package/docs/index.html +298 -288
  55. package/docs/list.html +260 -216
  56. package/docs/menu.html +260 -220
  57. package/docs/micl.css +1 -1
  58. package/docs/micl.js +1 -1
  59. package/docs/navigationrail.html +38 -36
  60. package/docs/radio.html +93 -68
  61. package/docs/select.html +213 -173
  62. package/docs/sidesheet.html +105 -73
  63. package/docs/slider.html +105 -72
  64. package/docs/switch.html +126 -101
  65. package/docs/textfield.html +181 -138
  66. package/layout/README.md +122 -0
  67. package/layout/index.scss +258 -0
  68. package/package.json +1 -1
  69. package/styles/statelayer.scss +2 -0
  70. package/styles.scss +13 -0
  71. package/styles/layout.scss +0 -74
package/docs/dialog.html CHANGED
@@ -3,9 +3,10 @@
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 Dialogs">
6
7
  <title>MICL Dialogs</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=close,dark_mode,info,person,restart_alt&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,home,person,restart_alt&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">
@@ -13,139 +14,169 @@
13
14
  label {
14
15
  color: var(--md-sys-color-on-surface);
15
16
  }
16
- .micl-card__content {
17
- display: flex;
18
- flex-direction: column;
19
- align-items: flex-start;
20
- padding-block: 32px;
21
- row-gap: 32px;
22
- }
23
17
  </style>
24
18
  </head>
25
- <body class="light">
26
- <div class="headline">
27
- <h1 class="md-sys-typescale-emphasized-display-small">Dialogs</h1>
28
- <div id="settings-placeholder"></div>
29
- </div>
19
+ <body class="micl-window light">
20
+ <main class="micl-body">
21
+ <section class="micl-pane">
22
+ <header class="micl-appbar">
23
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
24
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
25
+ </a>
26
+ <div class="micl-appbar__headline micl-appbar__headline--center">
27
+ <h1>Dialogs</h1>
28
+ <p class="micl-appbar__subtitle">Showcasing MICL dialogs</p>
29
+ </div>
30
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
31
+ </header>
30
32
 
31
- <div class="cards">
32
- <div class="micl-card-outlined">
33
- <div class="micl-card__content">
34
- <dialog id="mydialog1" class="micl-dialog" style="width:300px" closedby="any" popover>
35
- <div class="micl-dialog__headline">
36
- <h2>Basic dialog</h2>
37
- <span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
38
- </div>
39
- <div class="micl-dialog__actions">
40
- <button type="button" class="micl-button-text-s" popovertarget="mydialog1">Cancel</button>
41
- <button type="button" class="micl-button-text-s">Action</button>
42
- </div>
43
- </dialog>
44
- <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
33
+ <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
34
+ <div class="micl-pane__column">
35
+ <div class="micl-card-filled">
36
+ <div class="micl-card__headline-s">
37
+ <h2>Showcase</h2>
38
+ </div>
39
+ <p class="micl-card__supporting-text">Click a button to open one of the MICL dialogs.</p>
40
+ <div class="micl-card__content docs-buttons">
41
+ <dialog id="mydialog1" class="micl-dialog" style="width:300px" closedby="any" popover>
42
+ <div class="micl-dialog__headline">
43
+ <h2>Basic dialog</h2>
44
+ <span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
45
+ </div>
46
+ <div class="micl-dialog__actions">
47
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog1">Cancel</button>
48
+ <button type="button" class="micl-button-text-s">Action</button>
49
+ </div>
50
+ </dialog>
51
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
45
52
 
46
- <dialog id="mydialog2" class="micl-dialog" style="width:400px" closedby="any" popover>
47
- <div class="micl-dialog__headline">
48
- <span class="micl-dialog__icon material-symbols-outlined">restart_alt</span>
49
- <h2>Reset settings?</h2>
50
- <span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
51
- </div>
52
- <div class="micl-dialog__content">
53
- <hr class="micl-divider">
54
- <ul class="micl-list" style="--md-sys-list-item-container-color:transparent;margin-block:24px">
55
- <li class="micl-list-item-one">
56
- <span class="micl-list-item__avatar">JH</span>
57
- <span class="micl-list-item__text">
58
- <span class="micl-list-item__headline">johnny.hanssen@proton.me</span>
59
- </span>
60
- </li>
61
- <li class="micl-list-item-one">
62
- <span class="micl-list-item__avatar">LS</span>
63
- <span class="micl-list-item__text">
64
- <span class="micl-list-item__headline">laura.smith@outlook.com</span>
65
- </span>
66
- </li>
67
- <li class="micl-list-item-one">
68
- <span class="micl-list-item__avatar">LH</span>
69
- <span class="micl-list-item__text">
70
- <span class="micl-list-item__headline">lucy.hong@gmail.com</span>
71
- </span>
72
- </li>
73
- </ul>
74
- <hr class="micl-divider">
75
- </div>
76
- <div class="micl-dialog__actions">
77
- <button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
78
- <button type="button" class="micl-button-text-s">Accept</button>
79
- </div>
80
- </dialog>
81
- <button class="micl-button-tonal-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
53
+ <dialog id="mydialog2" class="micl-dialog" style="width:400px" closedby="any" popover>
54
+ <div class="micl-dialog__headline">
55
+ <span class="micl-dialog__icon material-symbols-outlined">restart_alt</span>
56
+ <h2>Reset settings?</h2>
57
+ <span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
58
+ </div>
59
+ <div class="micl-dialog__content">
60
+ <hr class="micl-divider">
61
+ <ul class="micl-list" style="--md-sys-list-item-container-color:transparent;margin-block:24px">
62
+ <li class="micl-list-item-one">
63
+ <span class="micl-list-item__avatar">JH</span>
64
+ <span class="micl-list-item__text">
65
+ <span class="micl-list-item__headline">johnny.hanssen@proton.me</span>
66
+ </span>
67
+ </li>
68
+ <li class="micl-list-item-one">
69
+ <span class="micl-list-item__avatar">LS</span>
70
+ <span class="micl-list-item__text">
71
+ <span class="micl-list-item__headline">laura.smith@outlook.com</span>
72
+ </span>
73
+ </li>
74
+ <li class="micl-list-item-one">
75
+ <span class="micl-list-item__avatar">LH</span>
76
+ <span class="micl-list-item__text">
77
+ <span class="micl-list-item__headline">lucy.hong@gmail.com</span>
78
+ </span>
79
+ </li>
80
+ </ul>
81
+ <hr class="micl-divider">
82
+ </div>
83
+ <div class="micl-dialog__actions">
84
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
85
+ <button type="button" class="micl-button-text-s">Accept</button>
86
+ </div>
87
+ </dialog>
88
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
82
89
 
83
- <dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="closerequest">
84
- <div class="micl-dialog__headline">
85
- <h2>Delete selected images?</h2>
86
- <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
87
- </div>
88
- <form method="dialog" class="micl-dialog__actions">
89
- <button class="micl-button-text-s" value="donotdelete">Cancel</button>
90
- <button class="micl-button-text-s" value="dodelete">Delete</button>
91
- </form>
92
- </dialog>
93
- <button class="micl-button-tonal-m micl-button--square" popovertarget="mydialog3">Open Modal Dialog</button>
90
+ <dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="closerequest">
91
+ <div class="micl-dialog__headline">
92
+ <h2>Delete selected images?</h2>
93
+ <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
94
+ </div>
95
+ <form method="dialog" class="micl-dialog__actions">
96
+ <button class="micl-button-text-s" value="donotdelete">Cancel</button>
97
+ <button class="micl-button-text-s" value="dodelete">Delete</button>
98
+ </form>
99
+ </dialog>
100
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog3">Open Modal Dialog</button>
94
101
 
95
- <dialog id="mydialog4" class="micl-dialog-fullscreen" closedby="none" popover>
96
- <form method="dialog" class="micl-dialog__headline">
97
- <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog4" aria-label="Close">close</button>
98
- <span class="micl-dialog__icon material-symbols-outlined">person</span>
99
- <h2>Personal info</h2>
100
- <button class="micl-button-text-s" value="dosave">Save</button>
101
- </form>
102
- <div class="micl-dialog__content">
103
- <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
104
- <div class="micl-textfield-outlined" style="margin-block:24px">
105
- <label for="mytextfield1">Name</label>
106
- <input type="text" id="mytextfield1" value="Marie Curie">
102
+ <dialog id="mydialog4" class="micl-dialog-fullscreen" closedby="none" popover>
103
+ <form method="dialog" class="micl-dialog__headline">
104
+ <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog4" aria-label="Close">close</button>
105
+ <span class="micl-dialog__icon material-symbols-outlined">person</span>
106
+ <h2>Personal info</h2>
107
+ <button class="micl-button-text-s" value="dosave">Save</button>
108
+ </form>
109
+ <div class="micl-dialog__content">
110
+ <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
111
+ <div class="micl-textfield-outlined" style="margin-block:24px">
112
+ <label for="mytextfield1">Name</label>
113
+ <input type="text" id="mytextfield1" value="Marie Curie">
114
+ </div>
115
+ <div class="micl-textfield-outlined" style="margin-block:24px">
116
+ <label for="mytextfield2">Address</label>
117
+ <input type="text" id="mytextfield2" value="Rue du Boulevard 3, Paris">
118
+ </div>
119
+ <div class="micl-textfield-outlined">
120
+ <label for="myselect">Country</label>
121
+ <select id="myselect">
122
+ <option class="micl-list-item-one" value="AR">
123
+ <span class="micl-list-item__text">Argentina</span>
124
+ </option>
125
+ <option class="micl-list-item-one" value="BO">
126
+ <span class="micl-list-item__text">Bolivia</span>
127
+ </option>
128
+ <option class="micl-list-item-one" value="BR">
129
+ <span class="micl-list-item__text">Brazil</span>
130
+ </option>
131
+ <option class="micl-list-item-one" value="CL" disabled>
132
+ <span class="micl-list-item__text">Chile</span>
133
+ </option>
134
+ <option class="micl-list-item-one" value="CO">
135
+ <span class="micl-list-item__text">Colombia</span>
136
+ </option>
137
+ <option class="micl-list-item-one" value="FR" selected>
138
+ <span class="micl-list-item__text">France</span>
139
+ </option>
140
+ </select>
141
+ </div>
142
+ <div class="micl-textfield-outlined" style="margin-block:24px 4px">
143
+ <label for="mytextfield4">Profession</label>
144
+ <input type="text" id="mytextfield4" value="Physics researcher">
145
+ </div>
146
+ </div>
147
+ <form method="dialog" class="micl-dialog__actions">
148
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog4">Cancel</button>
149
+ <button class="micl-button-text-s" value="dosave">Save</button>
150
+ </form>
151
+ </dialog>
152
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4">Open Full-Screen Dialog</button>
107
153
  </div>
108
- <div class="micl-textfield-outlined" style="margin-block:24px">
109
- <label for="mytextfield2">Address</label>
110
- <input type="text" id="mytextfield2" value="Rue du Boulevard 3, Paris">
111
- </div>
112
- <div class="micl-textfield-outlined">
113
- <label for="myselect">Country</label>
114
- <select id="myselect">
115
- <option class="micl-list-item-one" value="AR">
116
- <span class="micl-list-item__text">Argentina</span>
117
- </option>
118
- <option class="micl-list-item-one" value="BO">
119
- <span class="micl-list-item__text">Bolivia</span>
120
- </option>
121
- <option class="micl-list-item-one" value="BR">
122
- <span class="micl-list-item__text">Brazil</span>
123
- </option>
124
- <option class="micl-list-item-one" value="CL" disabled>
125
- <span class="micl-list-item__text">Chile</span>
126
- </option>
127
- <option class="micl-list-item-one" value="CO">
128
- <span class="micl-list-item__text">Colombia</span>
129
- </option>
130
- <option class="micl-list-item-one" value="FR" selected>
131
- <span class="micl-list-item__text">France</span>
132
- </option>
133
- </select>
154
+ </div>
155
+ </div>
156
+ <div class="micl-pane__column">
157
+ <div class="micl-card-filled">
158
+ <div class="micl-card__headline-s">
159
+ <h2>Code example</h2>
134
160
  </div>
135
- <div class="micl-textfield-outlined" style="margin-block:24px 4px">
136
- <label for="mytextfield4">Profession</label>
137
- <input type="text" id="mytextfield4" value="Physics researcher">
161
+ <div class="micl-card__content docs-code">
162
+ <pre><code>
163
+ &lt;dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover&gt;
164
+ &lt;div class="micl-dialog__headline"&gt;
165
+ &lt;h2&gt;Basic dialog&lt;/h2&gt;
166
+ &lt;span class="micl-dialog__supporting-text"&gt;A dialog is a type of modal window.&lt;/span&gt;
167
+ &lt;/div&gt;
168
+ &lt;div class="micl-dialog__actions"&gt;
169
+ &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;Cancel&lt;/button&gt;
170
+ &lt;button type="button" class="micl-button-text-s"&gt;Action&lt;/button&gt;
171
+ &lt;/div&gt;
172
+ &lt;/dialog&gt;
173
+ </code></pre>
138
174
  </div>
139
175
  </div>
140
- <form method="dialog" class="micl-dialog__actions">
141
- <button type="button" class="micl-button-text-s" popovertarget="mydialog4">Cancel</button>
142
- <button class="micl-button-text-s" value="dosave">Save</button>
143
- </form>
144
- </dialog>
145
- <button class="micl-button-tonal-m micl-button--square" popovertarget="mydialog4">Open Full-Screen Dialog</button>
176
+ </div>
146
177
  </div>
147
- </div>
148
- </div>
178
+ </section>
179
+ </main>
149
180
 
150
181
  <script src="micl.js"></script>
151
182
  <script src="docs.js"></script>
package/docs/divider.html CHANGED
@@ -3,9 +3,10 @@
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 Dividers">
6
7
  <title>MICL Dividers</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&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&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">
@@ -13,7 +14,7 @@
13
14
  p {
14
15
  color: var(--md-sys-color-on-surface);
15
16
  }
16
- .micl-card__content {
17
+ section:first-child .micl-card__content {
17
18
  padding-inline: 0;
18
19
  }
19
20
  p.md-sys-typescale-label-large {
@@ -25,77 +26,105 @@
25
26
  }
26
27
  </style>
27
28
  </head>
28
- <body class="light">
29
- <div class="headline">
30
- <h1 class="md-sys-typescale-emphasized-display-small">Dividers</h1>
31
- <div id="settings-placeholder"></div>
32
- </div>
29
+ <body class="micl-window light">
30
+ <main class="micl-body micl-body--stacked-to-large">
31
+ <section class="micl-pane">
32
+ <header class="micl-appbar">
33
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
34
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
35
+ </a>
36
+ <div class="micl-appbar__headline micl-appbar__headline--center">
37
+ <h1>Dividers</h1>
38
+ <p class="micl-appbar__subtitle">Showcasing MICL dividers</p>
39
+ </div>
40
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
41
+ </header>
33
42
 
34
- <div class="cards">
35
- <div class="micl-card-elevated">
36
- <div class="micl-card__content">
37
- <p class="md-sys-typescale-label-large">Full width:</p>
38
- <hr class="micl-divider">
39
- <p class="md-sys-typescale-label-large">Inset:</p>
40
- <hr class="micl-divider-inset">
41
- <p class="md-sys-typescale-label-large">Inset start:</p>
42
- <hr class="micl-divider-inset--start">
43
- <p class="md-sys-typescale-label-large">Inset end:</p>
44
- <hr class="micl-divider-inset--end">
45
- <p></p>
46
- </div>
47
- </div>
48
- <div class="micl-card-filled">
49
- <div class="micl-card__content">
50
- <p class="md-sys-typescale-label-large">Full width:</p>
51
- <hr class="micl-divider">
52
- <p class="md-sys-typescale-label-large">Inset:</p>
53
- <hr class="micl-divider-inset">
54
- <p class="md-sys-typescale-label-large">Inset start:</p>
55
- <hr class="micl-divider-inset--start">
56
- <p class="md-sys-typescale-label-large">Inset end:</p>
57
- <hr class="micl-divider-inset--end">
58
- <p></p>
59
- </div>
60
- </div>
61
- <div class="micl-card-outlined">
62
- <div class="micl-card__content">
63
- <p class="md-sys-typescale-label-large">Full width:</p>
64
- <hr class="micl-divider">
65
- <p class="md-sys-typescale-label-large">Inset:</p>
66
- <hr class="micl-divider-inset">
67
- <p class="md-sys-typescale-label-large">Inset start:</p>
68
- <hr class="micl-divider-inset--start">
69
- <p class="md-sys-typescale-label-large">Inset end:</p>
70
- <hr class="micl-divider-inset--end">
71
- <p></p>
72
- </div>
73
- </div>
74
- <div class="micl-card-elevated">
75
- <div class="micl-card__content">
76
- <div class="verticalbox">
77
- <p class="md-sys-typescale-label-large">Full height:</p>
78
- <hr class="micl-divider-vertical">
43
+ <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
44
+ <div class="micl-pane__column">
45
+ <div class="micl-card-elevated">
46
+ <div class="micl-card__content">
47
+ <p class="md-sys-typescale-label-large">Full width:</p>
48
+ <hr class="micl-divider">
49
+ <p class="md-sys-typescale-label-large">Inset:</p>
50
+ <hr class="micl-divider-inset">
51
+ <p class="md-sys-typescale-label-large">Inset start:</p>
52
+ <hr class="micl-divider-inset--start">
53
+ <p class="md-sys-typescale-label-large">Inset end:</p>
54
+ <hr class="micl-divider-inset--end">
55
+ <p></p>
56
+ </div>
57
+ </div>
58
+ <div class="micl-card-elevated">
59
+ <div class="micl-card__content">
60
+ <div class="verticalbox">
61
+ <p class="md-sys-typescale-label-large">Full height:</p>
62
+ <hr class="micl-divider-vertical">
63
+ </div>
64
+ </div>
65
+ </div>
79
66
  </div>
80
- </div>
81
- </div>
82
- <div class="micl-card-filled">
83
- <div class="micl-card__content">
84
- <div class="verticalbox">
85
- <p class="md-sys-typescale-label-large">Full height:</p>
86
- <hr class="micl-divider-vertical">
67
+ <div class="micl-pane__column">
68
+ <div class="micl-card-filled">
69
+ <div class="micl-card__content">
70
+ <p class="md-sys-typescale-label-large">Full width:</p>
71
+ <hr class="micl-divider">
72
+ <p class="md-sys-typescale-label-large">Inset:</p>
73
+ <hr class="micl-divider-inset">
74
+ <p class="md-sys-typescale-label-large">Inset start:</p>
75
+ <hr class="micl-divider-inset--start">
76
+ <p class="md-sys-typescale-label-large">Inset end:</p>
77
+ <hr class="micl-divider-inset--end">
78
+ <p></p>
79
+ </div>
80
+ </div>
81
+ <div class="micl-card-filled">
82
+ <div class="micl-card__content">
83
+ <div class="verticalbox">
84
+ <p class="md-sys-typescale-label-large">Full height:</p>
85
+ <hr class="micl-divider-vertical">
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <div class="micl-pane__column">
91
+ <div class="micl-card-outlined">
92
+ <div class="micl-card__content">
93
+ <p class="md-sys-typescale-label-large">Full width:</p>
94
+ <hr class="micl-divider">
95
+ <p class="md-sys-typescale-label-large">Inset:</p>
96
+ <hr class="micl-divider-inset">
97
+ <p class="md-sys-typescale-label-large">Inset start:</p>
98
+ <hr class="micl-divider-inset--start">
99
+ <p class="md-sys-typescale-label-large">Inset end:</p>
100
+ <hr class="micl-divider-inset--end">
101
+ <p></p>
102
+ </div>
103
+ </div>
104
+ <div class="micl-card-outlined">
105
+ <div class="micl-card__content">
106
+ <div class="verticalbox">
107
+ <p class="md-sys-typescale-label-large">Full height:</p>
108
+ <hr class="micl-divider-vertical">
109
+ </div>
110
+ </div>
111
+ </div>
87
112
  </div>
88
113
  </div>
89
- </div>
90
- <div class="micl-card-outlined">
91
- <div class="micl-card__content">
92
- <div class="verticalbox">
93
- <p class="md-sys-typescale-label-large">Full height:</p>
94
- <hr class="micl-divider-vertical">
114
+ </section>
115
+ <section class="micl-pane">
116
+ <div class="micl-card-filled">
117
+ <div class="micl-card__headline-s">
118
+ <h2>Code example</h2>
119
+ </div>
120
+ <div class="micl-card__content docs-code">
121
+ <pre><code>
122
+ &lt;hr class="micl-divider"&gt;
123
+ </code></pre>
95
124
  </div>
96
125
  </div>
97
- </div>
98
- </div>
126
+ </section>
127
+ </main>
99
128
 
100
129
  <script src="micl.js"></script>
101
130
  <script src="docs.js"></script>
package/docs/docs.css CHANGED
@@ -1,35 +1,25 @@
1
- body {
2
- margin: 0;
3
- background-color: var(--md-sys-color-background);
4
- }
5
- .headline {
1
+ #settings-directionality {
6
2
  display: flex;
7
3
  align-items: center;
8
- padding: 16px;
9
4
  column-gap: 16px;
5
+ margin-block: 24px 4px;
10
6
  }
11
7
  h1 {
12
8
  color: var(--md-sys-color-on-surface);
13
9
  }
14
- #settings-theme {
15
- padding-block: 16px;
16
-
17
- label {
18
- color: var(--md-sys-color-on-surface);
19
- }
20
- }
21
- #settings-directionality {
22
- display: flex;
23
- align-items: center;
24
- column-gap: 16px;
25
- margin-block: 24px 4px;
10
+ pre {
11
+ width: 100%;
12
+ margin: 0;
13
+ overflow: auto;
26
14
  }
27
- .cards {
15
+ .docs-buttons {
28
16
  display: flex;
29
- flex-direction: row;
30
- flex-wrap: wrap;
31
- padding: 8px;
17
+ flex-direction: column;
18
+ align-items: flex-start;
19
+ padding-block: 16px;
20
+ row-gap: 16px;
32
21
  }
33
- .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
34
- width: 360px;
22
+ .docs-code {
23
+ background-color: var(--md-sys-color-secondary);
24
+ color: var(--md-sys-color-on-secondary);
35
25
  }
package/docs/docs.js CHANGED
@@ -1,5 +1,5 @@
1
1
  document.getElementById('settings-placeholder').innerHTML =
2
- `<button class="micl-iconbutton-standard-m material-symbols-outlined" popovertarget="settings" popovertargetaction="toggle">dark_mode</button>
2
+ `<button class="micl-iconbutton-tonal-s micl-iconbutton--wide material-symbols-outlined" popovertarget="settings" popovertargetaction="toggle">dark_mode</button>
3
3
  <dialog id="settings" class="micl-dialog" closedby="any" popover>
4
4
  <div class="micl-dialog__headline">
5
5
  <h2>Settings</h2>
@@ -62,7 +62,9 @@ document.getElementById('theme').addEventListener('change', event => {
62
62
  }
63
63
  });
64
64
  document.getElementById('mode').addEventListener('change', event => {
65
- document.body.setAttribute('class', event.target.value);
65
+ document.body.setAttribute('class', document.body.classList.toString().split(' ').filter(
66
+ c => c.startsWith('micl')
67
+ ) + ' ' + event.target.value);
66
68
  });
67
69
  document.getElementById('directionality').addEventListener('change', event => {
68
70
  document.documentElement.setAttribute('dir', event.target.checked ? 'rtl' : 'ltr');