material-inspired-component-library 4.0.1 → 5.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 (38) hide show
  1. package/README.md +4 -0
  2. package/components/accordion/README.md +20 -0
  3. package/components/alert/README.md +19 -7
  4. package/components/button/README.md +1 -1
  5. package/components/button/index.scss +24 -20
  6. package/components/dialog/README.md +14 -12
  7. package/components/dialog/index.scss +63 -52
  8. package/components/divider/index.scss +7 -1
  9. package/components/iconbutton/README.md +1 -1
  10. package/components/iconbutton/index.scss +20 -17
  11. package/components/list/index.scss +2 -5
  12. package/components/textfield/index.ts +26 -0
  13. package/components/timepicker/README.md +135 -0
  14. package/components/timepicker/index.scss +390 -0
  15. package/components/timepicker/index.ts +416 -0
  16. package/dist/button.css +1 -1
  17. package/dist/components/timepicker/index.d.ts +5 -0
  18. package/dist/dialog.css +1 -1
  19. package/dist/divider.css +1 -1
  20. package/dist/iconbutton.css +1 -1
  21. package/dist/list.css +1 -1
  22. package/dist/micl.css +1 -1
  23. package/dist/micl.js +1 -1
  24. package/dist/switch.css +1 -1
  25. package/dist/timepicker.css +1 -0
  26. package/dist/timepicker.js +1 -0
  27. package/docs/accordion.html +1 -1
  28. package/docs/bottomsheet.html +1 -1
  29. package/docs/button.html +42 -15
  30. package/docs/dialog.html +12 -12
  31. package/docs/iconbutton.html +258 -164
  32. package/docs/index.html +31 -7
  33. package/docs/micl.css +1 -1
  34. package/docs/micl.js +1 -1
  35. package/docs/timepicker.html +150 -0
  36. package/micl.ts +3 -1
  37. package/package.json +16 -15
  38. package/styles.scss +1 -0
package/docs/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="description" content="The Material-Inspired Component Library (MICL) Showcase">
7
7
  <title>MICL Showcase</title>
8
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=close,dark_mode,delete,edit,error,favorite,globe,inbox,keyboard_arrow_down,link,menu,menu_open,more_vert,newspaper,outbox,person,share&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,error,favorite,globe,inbox,keyboard,keyboard_arrow_down,link,menu,menu_open,more_vert,newspaper,outbox,person,schedule,share&display=block">
10
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
11
  <link rel="stylesheet" href="micl.css">
12
12
  <link rel="stylesheet" href="docs.css">
@@ -229,9 +229,32 @@
229
229
  </summary>
230
230
  <div class="micl-list-item__content" style="padding-block:16px">
231
231
  <div class="micl-textfield-filled">
232
- <label for="tf2">Date</label>
233
- <input type="date" id="tf2" value="">
232
+ <label for="tf2">Time</label>
233
+ <input type="time" id="tf2" data-timepicker="mytimepicker" value="10:05">
234
234
  </div>
235
+ <dialog id="mytimepicker" class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="mytime">
236
+ <form method="dialog">
237
+ <div class="micl-dialog__headline">
238
+ <h2 id="mytime">Enter time</h2>
239
+ </div>
240
+ <div class="micl-dialog__content">
241
+ <input type="number" name="hour" value="00" aria-labelledby="myhour">
242
+ <span class="micl-timepicker__separator">:</span>
243
+ <input type="number" name="minute" value="00" aria-labelledby="myminute">
244
+ <div class="micl-timepicker__period"></div>
245
+ <span id="myhour" class="micl-timepicker__supporting-text-hour">Hour</span>
246
+ <span id="myminute" class="micl-timepicker__supporting-text-minute">Minute</span>
247
+ <div class="micl-timepicker__dial"></div>
248
+ </div>
249
+ <div class="micl-dialog__actions">
250
+ <button type="button" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--square material-symbols-outlined" data-alticon="schedule">keyboard</button>
251
+ <div>
252
+ <button class="micl-button-text-s" value="">Cancel</button>
253
+ <button class="micl-button-text-s" value="OK">OK</button>
254
+ </div>
255
+ </div>
256
+ </form>
257
+ </dialog>
235
258
  </div>
236
259
  </details>
237
260
  </div>
@@ -243,10 +266,10 @@
243
266
  <h2>Button actions</h2>
244
267
  </div>
245
268
  <div class="micl-card__content" style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;padding-block-start:16px">
246
- <dialog id="mydialog" class="micl-dialog" closedby="none" popover>
269
+ <dialog id="mydialog" class="micl-dialog" popover closedby="none" aria-labelledby="mytitle">
247
270
  <form method="dialog" class="micl-dialog__headline">
248
271
  <span class="micl-dialog__icon material-symbols-outlined">person</span>
249
- <h2>Personal info</h2>
272
+ <h2 id="mytitle">Personal info</h2>
250
273
  </form>
251
274
  <div class="micl-dialog__content">
252
275
  <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
@@ -293,9 +316,9 @@
293
316
  </dialog>
294
317
  <button class="micl-button-elevated-s" popovertarget="mydialog">Open Dialog</button>
295
318
 
296
- <dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mytitle">
319
+ <dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mysidesheettitle">
297
320
  <div class="micl-sidesheet__headline">
298
- <h2 id="mytitle">Lorum ipsum</h2>
321
+ <h2 id="mysidesheettitle">Lorum ipsum</h2>
299
322
  <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet">close</button>
300
323
  </div>
301
324
  <div class="micl-sidesheet__content">
@@ -362,6 +385,7 @@
362
385
  <p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
363
386
  <p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
364
387
  <p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
388
+ <p><a href="timepicker.html" class="md-sys-typescale-body-large">Time pickers</a></p>
365
389
  </div>
366
390
  </div>
367
391
  </div>