material-inspired-component-library 3.1.0 → 4.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 (84) hide show
  1. package/README.md +12 -5
  2. package/components/README.md +1 -1
  3. package/components/accordion/README.md +8 -3
  4. package/components/alert/README.md +76 -0
  5. package/components/alert/index.scss +1 -0
  6. package/components/appbar/README.md +9 -4
  7. package/components/appbar/index.scss +1 -1
  8. package/components/badge/README.md +8 -3
  9. package/components/badge/index.scss +1 -0
  10. package/components/bottomsheet/README.md +8 -3
  11. package/components/button/README.md +8 -3
  12. package/components/button/index.scss +7 -0
  13. package/components/card/README.md +10 -4
  14. package/components/card/index.scss +1 -1
  15. package/components/checkbox/README.md +8 -3
  16. package/components/checkbox/index.scss +2 -0
  17. package/components/dialog/README.md +8 -3
  18. package/components/dialog/index.scss +1 -0
  19. package/components/divider/README.md +8 -3
  20. package/components/iconbutton/README.md +8 -3
  21. package/components/iconbutton/index.scss +3 -1
  22. package/components/list/README.md +8 -3
  23. package/components/list/index.scss +2 -0
  24. package/components/menu/README.md +7 -2
  25. package/components/navigationrail/README.md +8 -3
  26. package/components/navigationrail/index.scss +1 -0
  27. package/components/radio/README.md +8 -3
  28. package/components/radio/index.scss +2 -0
  29. package/components/select/README.md +3 -3
  30. package/components/sidesheet/README.md +8 -3
  31. package/components/slider/README.md +8 -3
  32. package/components/slider/index.scss +1 -0
  33. package/components/stepper/README.md +190 -0
  34. package/components/stepper/index.scss +93 -14
  35. package/components/stepper/index.ts +138 -120
  36. package/components/switch/README.md +8 -3
  37. package/components/switch/index.scss +2 -0
  38. package/components/textfield/README.md +8 -3
  39. package/components/textfield/index.ts +8 -40
  40. package/dist/alert.css +1 -1
  41. package/dist/badge.css +1 -1
  42. package/dist/button.css +1 -1
  43. package/dist/card.css +1 -1
  44. package/dist/checkbox.css +1 -1
  45. package/dist/components/textfield/index.d.ts +0 -1
  46. package/dist/dialog.css +1 -1
  47. package/dist/foundations/form/index.d.ts +5 -0
  48. package/dist/iconbutton.css +1 -1
  49. package/dist/list.css +1 -1
  50. package/dist/micl.css +1 -1
  51. package/dist/micl.js +1 -1
  52. package/dist/navigationrail.css +1 -1
  53. package/dist/radio.css +1 -1
  54. package/dist/slider.css +1 -1
  55. package/dist/stepper.css +1 -1
  56. package/dist/switch.css +1 -1
  57. package/docs/accordion.html +1 -1
  58. package/docs/alert.html +3 -8
  59. package/docs/bottomsheet.html +2 -2
  60. package/docs/button.html +2 -2
  61. package/docs/card.html +7 -7
  62. package/docs/checkbox.html +2 -2
  63. package/docs/dialog.html +2 -2
  64. package/docs/divider.html +8 -8
  65. package/docs/iconbutton.html +2 -2
  66. package/docs/index.html +43 -32
  67. package/docs/list.html +2 -2
  68. package/docs/menu.html +2 -2
  69. package/docs/micl.css +1 -1
  70. package/docs/micl.js +1 -1
  71. package/docs/radio.html +2 -2
  72. package/docs/select.html +2 -2
  73. package/docs/sidesheet.html +2 -2
  74. package/docs/slider.html +2 -2
  75. package/docs/stepper.html +318 -0
  76. package/docs/switch.html +8 -4
  77. package/docs/textfield.html +2 -2
  78. package/foundations/form/index.ts +174 -0
  79. package/{layout → foundations/layout}/README.md +5 -0
  80. package/{layout → foundations/layout}/index.scss +1 -1
  81. package/micl.ts +1 -3
  82. package/package.json +3 -1
  83. package/styles.scss +1 -1
  84. package/webpack.config.js +1 -1
package/dist/switch.css CHANGED
@@ -1 +1 @@
1
- :root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-ref-typeface-plain: Roboto, system-ui, sans-serif;--md-ref-typeface-brand: Roboto, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0;--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem;--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}:root{--md-sys-switch-handle-size: 16px;--md-sys-switch-handle-selected-size: 24px;--md-sys-switch-handle-pressed-size: 28px;--md-sys-switch-outline-width: 2px;--md-sys-switch-state-layer-size: 40px;--md-sys-switch-target-height: 32px;--md-sys-switch-target-width: 52px}input[type=checkbox].micl-switch{--md-sys-switch-unselected-icon: "+";--md-sys-switch-selected-icon: "¬";--md-sys-switch-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-switch-motion-duration: 300ms;--md-sys-switch-motion-duration-reverse: 200ms;appearance:none;position:relative;inline-size:var(--md-sys-switch-target-width);block-size:var(--md-sys-target-size);margin:0;border-radius:calc(var(--md-sys-switch-target-height)/2);outline:none}input[type=checkbox].micl-switch::before{content:"";box-sizing:border-box;display:block;inline-size:var(--md-sys-switch-target-width);block-size:var(--md-sys-switch-target-height);margin-block:calc((var(--md-sys-target-size) - var(--md-sys-switch-target-height))/2);border:var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);border-radius:inherit;background-color:var(--md-sys-color-surface-container-highest);transition:background-color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch::after{content:var(--md-sys-switch-unselected-icon);box-sizing:border-box;position:absolute;inline-size:var(--md-sys-switch-state-layer-size);block-size:var(--md-sys-switch-state-layer-size);inset:0;inset-inline-start:calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px)/2);margin:auto 0;font:300 16px/1rem var(--md-ref-typeface-plain);color:var(--md-sys-color-surface-container-highest);text-align:center;background-color:var(--md-sys-color-outline);background-clip:content-box;border:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-size))/2) solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);transform:rotate(135deg);transition:inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1),border-color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1),background-color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch:checked::before{background-color:var(--md-sys-color-primary)}input[type=checkbox].micl-switch:checked::after{content:var(--md-sys-switch-selected-icon);inset-inline-start:calc(var(--md-sys-switch-target-width) - (var(--md-sys-switch-state-layer-size) + var(--md-sys-target-size) - 16px)/2);font-size:1.6rem;line-height:1.3rem;letter-spacing:.1rem;border:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-selected-size))/2) solid rgba(0,0,0,0);color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-on-primary)}input[type=checkbox].micl-switch:not(:disabled){cursor:pointer}input[type=checkbox].micl-switch:not(:disabled):hover::after{border-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);background-color:var(--md-sys-color-on-surface-variant)}input[type=checkbox].micl-switch:not(:disabled):hover:checked::after{border-color:color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);background-color:var(--md-sys-color-primary-container)}input[type=checkbox].micl-switch:not(:disabled):focus-visible::after{border-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity), transparent)}input[type=checkbox].micl-switch:not(:disabled):focus-visible::before{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:2px}input[type=checkbox].micl-switch:not(:disabled):focus-visible:checked::after{border-color:color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);background-color:var(--md-sys-color-primary-container)}input[type=checkbox].micl-switch:not(:disabled):focus-visible:not(:checked)::after{background-color:var(--md-sys-color-on-surface-variant)}input[type=checkbox].micl-switch:not(:disabled):active::after{line-height:1.7rem;border:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size))/2) solid rgba(0,0,0,0);background-color:var(--md-sys-color-on-surface-variant)}input[type=checkbox].micl-switch:not(:disabled):active:checked::after{line-height:1.6rem;border-width:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size))/2);border-color:color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);background-color:var(--md-sys-color-primary-container)}input[type=checkbox].micl-switch:not(:disabled):active:not(:checked)::after{inset-inline-start:calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px)/2);border-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent)}input[type=checkbox].micl-switch:disabled::before{border-color:var(--md-sys-color-on-surface);background-color:var(--md-sys-color-surface-container-highest);opacity:12%}input[type=checkbox].micl-switch:disabled:checked::before{background-color:var(--md-sys-color-on-surface)}input[type=checkbox].micl-switch:disabled::after{color:rgb(from var(--md-sys-color-surface-container-highest) r g b/38%);background-color:var(--md-sys-color-on-surface);opacity:38%}input[type=checkbox].micl-switch:disabled:checked::after{color:rgb(from var(--md-sys-color-on-surface) r g b/38%);background-color:var(--md-sys-color-surface);opacity:100%}input[type=checkbox].micl-switch:not(:disabled)+label,label:has(+input[type=checkbox].micl-switch:not(:disabled)){cursor:pointer}input[type=checkbox].micl-switch+label,label:has(+input[type=checkbox].micl-switch){color:var(--md-sys-color-on-surface)}[dir=rtl] input[type=checkbox].micl-switch::after{transform:rotate(45deg) scaleY(-1)}
1
+ :root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-ref-typeface-plain: Roboto, system-ui, sans-serif;--md-ref-typeface-brand: Roboto, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0;--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem;--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}:root{--md-sys-switch-handle-size: 16px;--md-sys-switch-handle-selected-size: 24px;--md-sys-switch-handle-pressed-size: 28px;--md-sys-switch-outline-width: 2px;--md-sys-switch-state-layer-size: 40px;--md-sys-switch-target-height: 32px;--md-sys-switch-target-width: 52px}input[type=checkbox].micl-switch{--md-sys-switch-unselected-icon: "+";--md-sys-switch-selected-icon: "¬";--md-sys-switch-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-switch-motion-duration: 300ms;--md-sys-switch-motion-duration-reverse: 200ms;appearance:none;position:relative;inline-size:var(--md-sys-switch-target-width);block-size:var(--md-sys-target-size);margin:0;border-radius:calc(var(--md-sys-switch-target-height)/2);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-switch::before{content:"";box-sizing:border-box;display:block;inline-size:var(--md-sys-switch-target-width);block-size:var(--md-sys-switch-target-height);margin-block:calc((var(--md-sys-target-size) - var(--md-sys-switch-target-height))/2);border:var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);border-radius:inherit;background-color:var(--md-sys-color-surface-container-highest);transition:background-color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch::after{content:var(--md-sys-switch-unselected-icon);box-sizing:border-box;position:absolute;inline-size:var(--md-sys-switch-state-layer-size);block-size:var(--md-sys-switch-state-layer-size);inset:0;inset-inline-start:calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px)/2);margin:auto 0;font:300 16px/1rem var(--md-ref-typeface-plain);color:var(--md-sys-color-surface-container-highest);text-align:center;background-color:var(--md-sys-color-outline);background-clip:content-box;border:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-size))/2) solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);transform:rotate(135deg);transition:inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1),border-color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1),background-color var(--md-sys-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch:checked::before{background-color:var(--md-sys-color-primary)}input[type=checkbox].micl-switch:checked::after{content:var(--md-sys-switch-selected-icon);inset-inline-start:calc(var(--md-sys-switch-target-width) - (var(--md-sys-switch-state-layer-size) + var(--md-sys-target-size) - 16px)/2);font-size:1.6rem;line-height:1.3rem;letter-spacing:.1rem;border:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-selected-size))/2) solid rgba(0,0,0,0);color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-on-primary)}input[type=checkbox].micl-switch:not(:disabled){cursor:pointer}input[type=checkbox].micl-switch:not(:disabled):hover::after{border-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);background-color:var(--md-sys-color-on-surface-variant)}input[type=checkbox].micl-switch:not(:disabled):hover:checked::after{border-color:color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);background-color:var(--md-sys-color-primary-container)}input[type=checkbox].micl-switch:not(:disabled):focus-visible::after{border-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity), transparent)}input[type=checkbox].micl-switch:not(:disabled):focus-visible::before{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:2px}input[type=checkbox].micl-switch:not(:disabled):focus-visible:checked::after{border-color:color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);background-color:var(--md-sys-color-primary-container)}input[type=checkbox].micl-switch:not(:disabled):focus-visible:not(:checked)::after{background-color:var(--md-sys-color-on-surface-variant)}input[type=checkbox].micl-switch:not(:disabled):active::after{line-height:1.7rem;border:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size))/2) solid rgba(0,0,0,0);background-color:var(--md-sys-color-on-surface-variant)}input[type=checkbox].micl-switch:not(:disabled):active:checked::after{line-height:1.6rem;border-width:calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size))/2);border-color:color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);background-color:var(--md-sys-color-primary-container)}input[type=checkbox].micl-switch:not(:disabled):active:not(:checked)::after{inset-inline-start:calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px)/2);border-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent)}input[type=checkbox].micl-switch:disabled::before{border-color:var(--md-sys-color-on-surface);background-color:var(--md-sys-color-surface-container-highest);opacity:12%}input[type=checkbox].micl-switch:disabled:checked::before{background-color:var(--md-sys-color-on-surface)}input[type=checkbox].micl-switch:disabled::after{color:rgb(from var(--md-sys-color-surface-container-highest) r g b/38%);background-color:var(--md-sys-color-on-surface);opacity:38%}input[type=checkbox].micl-switch:disabled:checked::after{color:rgb(from var(--md-sys-color-on-surface) r g b/38%);background-color:var(--md-sys-color-surface);opacity:100%}input[type=checkbox].micl-switch:not(:disabled)+label,label:has(+input[type=checkbox].micl-switch:not(:disabled)){-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}input[type=checkbox].micl-switch+label,label:has(+input[type=checkbox].micl-switch){color:var(--md-sys-color-on-surface)}[dir=rtl] input[type=checkbox].micl-switch::after{transform:rotate(45deg) scaleY(-1)}
package/docs/accordion.html CHANGED
@@ -290,7 +290,7 @@
290
290
  <h2>Code example</h2>
291
291
  </div>
292
292
  <div class="micl-card__content docs-code">
293
- <pre><code>
293
+ <pre tabindex="-1"><code>
294
294
  &lt;div class="micl-list" role="listbox"&gt;
295
295
  &lt;details name="accordion"&gt;
296
296
  &lt;summary class="micl-list-item-two"&gt;
package/docs/alert.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="description" content="Demonstrating MICL Alerts">
7
7
  <title>MICL Alerts</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=award_star,check,dark_mode,error,home,question_mark&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,dark_mode,error,home,question_mark&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">
@@ -22,7 +22,7 @@
22
22
  <main class="micl-body micl-body--stacked-to-large">
23
23
  <section class="micl-pane">
24
24
  <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
26
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
27
  </a>
28
28
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -87,7 +87,6 @@
87
87
  <span class="micl-alert__icon material-symbols-outlined">check</span>
88
88
  <div class="micl-alert__text">
89
89
  <h4>Your file has been saved</h4>
90
- <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
91
90
  </div>
92
91
  </div>
93
92
  </div>
@@ -100,24 +99,20 @@
100
99
  </div>
101
100
  <div class="micl-card__content">
102
101
  <div class="micl-alert-tonal micl-alert--secondary" role="alert">
103
- <span class="micl-alert__icon material-symbols-outlined">award_star</span>
104
102
  <div class="micl-alert__text">
105
103
  <h4>Your efforts have been rewarded</h4>
106
104
  <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
107
105
  </div>
108
106
  </div>
109
107
  <div class="micl-alert-filled micl-alert--secondary" role="alert">
110
- <span class="micl-alert__icon material-symbols-outlined">award_star</span>
111
108
  <div class="micl-alert__text">
112
109
  <h4>Your efforts have been rewarded</h4>
113
110
  <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
114
111
  </div>
115
112
  </div>
116
113
  <div class="micl-alert-outlined micl-alert--secondary" role="alert">
117
- <span class="micl-alert__icon material-symbols-outlined">award_star</span>
118
114
  <div class="micl-alert__text">
119
115
  <h4>Your efforts have been rewarded</h4>
120
- <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
121
116
  </div>
122
117
  </div>
123
118
  </div>
@@ -161,7 +156,7 @@
161
156
  <h2>Code example</h2>
162
157
  </div>
163
158
  <div class="micl-card__content docs-code">
164
- <pre><code>
159
+ <pre tabindex="-1"><code>
165
160
  &lt;div class="micl-alert-tonal" role="alert"&gt;
166
161
  &lt;span class="micl-alert__icon material-symbols-outlined">error&lt;/span&gt;
167
162
  &lt;span class="micl-alert__text"&gt;
package/docs/bottomsheet.html CHANGED
@@ -57,7 +57,7 @@
57
57
  <main class="micl-body">
58
58
  <section class="micl-pane">
59
59
  <header class="micl-appbar">
60
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
60
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
61
61
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
62
62
  </a>
63
63
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -206,7 +206,7 @@
206
206
  <h2>Code example</h2>
207
207
  </div>
208
208
  <div class="micl-card__content docs-code">
209
- <pre><code>
209
+ <pre tabindex="-1"><code>
210
210
  &lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
211
211
  &lt;div class="micl-bottomsheet__headline"&gt;
212
212
  &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
package/docs/button.html CHANGED
@@ -15,7 +15,7 @@
15
15
  <main class="micl-body micl-body--stacked-to-large">
16
16
  <section class="micl-pane">
17
17
  <header class="micl-appbar">
18
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
18
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
19
19
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
20
20
  </a>
21
21
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -213,7 +213,7 @@
213
213
  <h2>Code example</h2>
214
214
  </div>
215
215
  <div class="micl-card__content docs-code">
216
- <pre><code>
216
+ <pre tabindex="-1"><code>
217
217
  &lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
218
218
 
219
219
  &lt;button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
package/docs/card.html CHANGED
@@ -32,7 +32,7 @@
32
32
  <main class="micl-body micl-body--stacked-to-large">
33
33
  <section class="micl-pane">
34
34
  <header class="micl-appbar">
35
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
35
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
36
36
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
37
37
  </a>
38
38
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -44,7 +44,7 @@
44
44
 
45
45
  <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
46
46
  <div class="micl-pane__column">
47
- <div class="micl-card-elevated" tabindex="0">
47
+ <div class="micl-card-elevated" style="margin-top:8px" tabindex="0">
48
48
  <div class="docs-icon" aria-hidden="true">A</div>
49
49
  <div class="micl-card__headline-s">
50
50
  <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
@@ -55,7 +55,7 @@
55
55
  <p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
56
56
  </div>
57
57
  </div>
58
- <div class="micl-card-filled" tabindex="0">
58
+ <div class="micl-card-filled">
59
59
  <div class="micl-card__headline-m">
60
60
  <h2>Lorem ipsum</h2>
61
61
  </div>
@@ -74,7 +74,7 @@
74
74
  </div>
75
75
  </div>
76
76
  <div class="micl-pane__column">
77
- <details class="micl-card-elevated">
77
+ <details class="micl-card-elevated" style="margin-top:8px">
78
78
  <summary>
79
79
  <img alt="holiday" class="micl-card__image" src="card-holiday.webp">
80
80
  <span class="micl-card__headline-s">
@@ -85,8 +85,8 @@
85
85
  </summary>
86
86
  <div class="micl-card__content" style="padding-inline:0">
87
87
  <p class="md-sys-typescale-body-small" style="padding-block-end:var(--md-sys-card-padding-inline);padding-inline:var(--md-sys-card-padding-inline)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
88
- <hr class="micl-divider" style="--md-sys-divider-space:16px">
89
- <button type="button" class="micl-button-text-s">Share</button>
88
+ <hr class="micl-divider" style="--md-sys-divider-space:8px">
89
+ <button type="button" class="micl-button-text-s" style="margin:8px">Share</button>
90
90
  </div>
91
91
  </details>
92
92
  <details class="micl-card-filled">
@@ -121,7 +121,7 @@
121
121
  <h2>Code example</h2>
122
122
  </div>
123
123
  <div class="micl-card__content docs-code">
124
- <pre><code>
124
+ <pre tabindex="-1"><code>
125
125
  &lt;div class="micl-card-elevated" tabindex="0"&gt;
126
126
  &lt;div class="micl-card__headline-s"&gt;
127
127
  &lt;h2&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/h2&gt;
package/docs/checkbox.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <main class="micl-body micl-body--stacked-to-large">
23
23
  <section class="micl-pane">
24
24
  <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
26
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
27
  </a>
28
28
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -129,7 +129,7 @@
129
129
  <h2>Code example</h2>
130
130
  </div>
131
131
  <div class="micl-card__content docs-code">
132
- <pre><code>
132
+ <pre tabindex="-1"><code>
133
133
  &lt;div class="micl-flex--vcenter"&gt;
134
134
  &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0"&gt;
135
135
  &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
package/docs/dialog.html CHANGED
@@ -20,7 +20,7 @@
20
20
  <main class="micl-body">
21
21
  <section class="micl-pane">
22
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">
23
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
24
24
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
25
25
  </a>
26
26
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -159,7 +159,7 @@
159
159
  <h2>Code example</h2>
160
160
  </div>
161
161
  <div class="micl-card__content docs-code">
162
- <pre><code>
162
+ <pre tabindex="-1"><code>
163
163
  &lt;dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover&gt;
164
164
  &lt;div class="micl-dialog__headline"&gt;
165
165
  &lt;h2&gt;Basic dialog&lt;/h2&gt;
package/docs/divider.html CHANGED
@@ -36,7 +36,7 @@
36
36
  <main class="micl-body micl-body--stacked-to-large">
37
37
  <section class="micl-pane">
38
38
  <header class="micl-appbar">
39
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
39
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
40
40
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
41
41
  </a>
42
42
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -55,9 +55,9 @@
55
55
  <p class="md-sys-typescale-label-large">Inset:</p>
56
56
  <hr class="micl-divider-inset">
57
57
  <p class="md-sys-typescale-label-large">Inset start:</p>
58
- <hr class="micl-divider-inset--start">
58
+ <hr class="micl-divider-inset-start">
59
59
  <p class="md-sys-typescale-label-large">Inset end:</p>
60
- <hr class="micl-divider-inset--end">
60
+ <hr class="micl-divider-inset-end">
61
61
  <p></p>
62
62
  </div>
63
63
  </div>
@@ -78,9 +78,9 @@
78
78
  <p class="md-sys-typescale-label-large">Inset:</p>
79
79
  <hr class="micl-divider-inset">
80
80
  <p class="md-sys-typescale-label-large">Inset start:</p>
81
- <hr class="micl-divider-inset--start">
81
+ <hr class="micl-divider-inset-start">
82
82
  <p class="md-sys-typescale-label-large">Inset end:</p>
83
- <hr class="micl-divider-inset--end">
83
+ <hr class="micl-divider-inset-end">
84
84
  <p></p>
85
85
  </div>
86
86
  </div>
@@ -101,9 +101,9 @@
101
101
  <p class="md-sys-typescale-label-large">Inset:</p>
102
102
  <hr class="micl-divider-inset">
103
103
  <p class="md-sys-typescale-label-large">Inset start:</p>
104
- <hr class="micl-divider-inset--start">
104
+ <hr class="micl-divider-inset-start">
105
105
  <p class="md-sys-typescale-label-large">Inset end:</p>
106
- <hr class="micl-divider-inset--end">
106
+ <hr class="micl-divider-inset-end">
107
107
  <p></p>
108
108
  </div>
109
109
  </div>
@@ -124,7 +124,7 @@
124
124
  <h2>Code example</h2>
125
125
  </div>
126
126
  <div class="micl-card__content docs-code">
127
- <pre><code>
127
+ <pre tabindex="-1"><code>
128
128
  &lt;hr class="micl-divider"&gt;
129
129
  </code></pre>
130
130
  </div>
package/docs/iconbutton.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <main class="micl-body micl-body--stacked-to-large">
23
23
  <section class="micl-pane">
24
24
  <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
26
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
27
  </a>
28
28
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -206,7 +206,7 @@
206
206
  <h2>Code example</h2>
207
207
  </div>
208
208
  <div class="micl-card__content docs-code">
209
- <pre><code>
209
+ <pre tabindex="-1"><code>
210
210
  &lt;button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;
211
211
 
212
212
  &lt;button class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;
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,favorite,globe,inbox,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,link,menu,menu_open,more_vert,newspaper,outbox,person,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">
@@ -128,39 +128,48 @@
128
128
  <h2>Card</h2>
129
129
  </div>
130
130
  <span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
131
- <div class="micl-card__content" style="display:flex;justify-content:space-between;padding-block-start:16px">
132
- <button type="button" class="micl-button-filled-s">Action</button>
133
- <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
134
- <nav id="mymenu" class="micl-menu" popover>
135
- <ul class="micl-list">
136
- <li class="micl-list-item-one" tabindex="0">
137
- <span class="micl-list-item__text">
138
- <span class="micl-list-item__headline">Menu item without graphics</span>
139
- </span>
140
- </li>
141
- <li class="micl-list-item-one" tabindex="0">
142
- <span class="micl-list-item__icon material-symbols-outlined">globe</span>
143
- <span class="micl-list-item__text">
144
- <span class="micl-list-item__headline">Menu item with an icon</span>
145
- </span>
146
- </li>
147
- <li class="micl-list-item-three">
148
- <a href="https://www.nytimes.com" tabindex="-1">
149
- <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
131
+ <div class="micl-card__content">
132
+ <div class="micl-alert-outlined" role="alert">
133
+ <span class="micl-alert__icon material-symbols-outlined">error</span>
134
+ <div class="micl-alert__text">
135
+ <h4>This is an alert</h4>
136
+ <span class="micl-alert__supporting-text">An error has occurred</span>
137
+ </div>
138
+ </div>
139
+ <div style="display:flex;justify-content:space-between;padding-block-start:16px">
140
+ <button type="button" class="micl-button-filled-s">Action</button>
141
+ <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
142
+ <nav id="mymenu" class="micl-menu" popover>
143
+ <ul class="micl-list">
144
+ <li class="micl-list-item-one" tabindex="0">
150
145
  <span class="micl-list-item__text">
151
- <span class="micl-list-item__headline">The New York Times</span>
152
- <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
146
+ <span class="micl-list-item__headline">Menu item without graphics</span>
153
147
  </span>
154
- </a>
155
- </li>
156
- <li class="micl-list-item-one" tabindex="0">
157
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715)"></span>
158
- <span class="micl-list-item__text">
159
- <span class="micl-list-item__headline">Item with an image</span>
160
- </span>
161
- </li>
162
- </ul>
163
- </nav>
148
+ </li>
149
+ <li class="micl-list-item-one" tabindex="0">
150
+ <span class="micl-list-item__icon material-symbols-outlined">globe</span>
151
+ <span class="micl-list-item__text">
152
+ <span class="micl-list-item__headline">Menu item with an icon</span>
153
+ </span>
154
+ </li>
155
+ <li class="micl-list-item-three">
156
+ <a href="https://www.nytimes.com" tabindex="-1">
157
+ <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
158
+ <span class="micl-list-item__text">
159
+ <span class="micl-list-item__headline">The New York Times</span>
160
+ <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
161
+ </span>
162
+ </a>
163
+ </li>
164
+ <li class="micl-list-item-one" tabindex="0">
165
+ <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715)"></span>
166
+ <span class="micl-list-item__text">
167
+ <span class="micl-list-item__headline">Item with an image</span>
168
+ </span>
169
+ </li>
170
+ </ul>
171
+ </nav>
172
+ </div>
164
173
  </div>
165
174
  </div>
166
175
  </div>
@@ -332,6 +341,7 @@
332
341
  </div>
333
342
  <div class="micl-card__content" style="column-count:2;padding-block-start:16px">
334
343
  <p><a href="accordion.html" class="md-sys-typescale-body-large">Accordions</a></p>
344
+ <p><a href="alert.html" class="md-sys-typescale-body-large">Alerts</a></p>
335
345
  <p><a href="bottomsheet.html" class="md-sys-typescale-body-large">Bottom sheets</a></p>
336
346
  <p><a href="button.html" class="md-sys-typescale-body-large">Buttons</a></p>
337
347
  <p><a href="card.html" class="md-sys-typescale-body-large">Cards</a></p>
@@ -346,6 +356,7 @@
346
356
  <p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
347
357
  <p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
348
358
  <p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
359
+ <p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
349
360
  <p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
350
361
  <p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
351
362
  </div>
package/docs/list.html CHANGED
@@ -21,7 +21,7 @@
21
21
  <main class="micl-body micl-body--stacked-to-extralarge">
22
22
  <section class="micl-pane">
23
23
  <header class="micl-appbar">
24
- <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
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
25
25
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
26
26
  </a>
27
27
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -250,7 +250,7 @@
250
250
  <h2>Code example</h2>
251
251
  </div>
252
252
  <div class="micl-card__content docs-code">
253
- <pre><code>
253
+ <pre tabindex="-1"><code>
254
254
  &lt;ul class="micl-list" role="listbox"&gt;
255
255
  &lt;li class="micl-list-item-two" tabindex="0"&gt;
256
256
  &lt;span class="micl-list-item__avatar"&gt;17&lt;/span&gt;
package/docs/menu.html CHANGED
@@ -23,7 +23,7 @@
23
23
  <main class="micl-body">
24
24
  <section class="micl-pane">
25
25
  <header class="micl-appbar">
26
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
26
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
27
27
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
28
28
  </a>
29
29
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -333,7 +333,7 @@
333
333
  <h2>Code example</h2>
334
334
  </div>
335
335
  <div class="micl-card__content docs-code">
336
- <pre><code>
336
+ <pre tabindex="-1"><code>
337
337
  &lt;nav id="id0" class="micl-menu" popover&gt;
338
338
  &lt;ul class="micl-list"&gt;
339
339
  &lt;li class="micl-list-item-one" tabindex="0"&gt;