material-inspired-component-library 5.0.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/README.md +10 -0
  2. package/components/alert/index.scss +4 -4
  3. package/components/appbar/index.scss +3 -2
  4. package/components/badge/index.scss +2 -2
  5. package/components/bottomsheet/index.scss +6 -5
  6. package/components/button/index.scss +20 -20
  7. package/components/card/index.scss +10 -9
  8. package/components/checkbox/index.scss +11 -11
  9. package/components/datepicker/index.scss +435 -0
  10. package/components/datepicker/index.ts +600 -0
  11. package/components/dialog/README.md +6 -6
  12. package/components/dialog/index.scss +23 -17
  13. package/components/divider/index.scss +2 -0
  14. package/components/iconbutton/index.scss +18 -17
  15. package/components/list/index.scss +10 -10
  16. package/components/menu/index.scss +2 -1
  17. package/components/navigationrail/index.scss +10 -9
  18. package/components/radio/README.md +0 -1
  19. package/components/radio/index.scss +11 -11
  20. package/components/select/index.scss +2 -1
  21. package/components/sidesheet/index.scss +3 -1
  22. package/components/slider/index.scss +7 -7
  23. package/components/stepper/index.scss +5 -4
  24. package/components/switch/README.md +0 -1
  25. package/components/switch/index.scss +21 -21
  26. package/components/textfield/index.scss +6 -5
  27. package/components/textfield/index.ts +7 -6
  28. package/components/timepicker/index.scss +9 -8
  29. package/components/timepicker/index.ts +12 -12
  30. package/dist/alert.css +1 -1
  31. package/dist/appbar.css +1 -1
  32. package/dist/badge.css +1 -1
  33. package/dist/bottomsheet.css +1 -1
  34. package/dist/button.css +1 -1
  35. package/dist/card.css +1 -1
  36. package/dist/checkbox.css +1 -1
  37. package/dist/components/datepicker/index.d.ts +6 -0
  38. package/dist/datepicker.css +1 -0
  39. package/dist/datepicker.js +1 -0
  40. package/dist/dialog.css +1 -1
  41. package/dist/divider.css +1 -1
  42. package/dist/foundations.css +1 -0
  43. package/dist/foundations.js +1 -0
  44. package/dist/iconbutton.css +1 -1
  45. package/dist/layout.css +1 -1
  46. package/dist/list.css +1 -1
  47. package/dist/menu.css +1 -1
  48. package/dist/micl.css +1 -1
  49. package/dist/micl.js +1 -1
  50. package/dist/navigationrail.css +1 -1
  51. package/dist/radio.css +1 -1
  52. package/dist/scrollbar.css +1 -0
  53. package/dist/scrollbar.js +1 -0
  54. package/dist/select.css +1 -1
  55. package/dist/sidesheet.css +1 -1
  56. package/dist/slider.css +1 -1
  57. package/dist/stepper.css +1 -1
  58. package/dist/switch.css +1 -1
  59. package/dist/textfield.css +1 -1
  60. package/dist/timepicker.css +1 -1
  61. package/docs/accordion.html +3 -1
  62. package/docs/alert.html +3 -1
  63. package/docs/bottomsheet.html +3 -1
  64. package/docs/button.html +3 -1
  65. package/docs/card.html +3 -1
  66. package/docs/checkbox.html +3 -1
  67. package/docs/datepicker.html +151 -0
  68. package/docs/dialog.html +23 -9
  69. package/docs/divider.html +3 -1
  70. package/docs/docs.js +43 -0
  71. package/docs/iconbutton.html +1 -1
  72. package/docs/index.html +3 -1
  73. package/docs/list.html +3 -1
  74. package/docs/menu.html +3 -1
  75. package/docs/micl.css +1 -1
  76. package/docs/micl.js +1 -1
  77. package/docs/navigationrail.html +3 -1
  78. package/docs/radio.html +3 -1
  79. package/docs/select.html +3 -1
  80. package/docs/sidesheet.html +3 -1
  81. package/docs/slider.html +1 -1
  82. package/docs/stepper.html +3 -1
  83. package/docs/switch.html +3 -1
  84. package/docs/textfield.html +3 -1
  85. package/docs/timepicker.html +4 -2
  86. package/foundations/index.scss +102 -0
  87. package/foundations/layout/index.scss +0 -52
  88. package/foundations/scrollbar/index.scss +46 -0
  89. package/intl.d.ts +9 -0
  90. package/micl.ts +18 -8
  91. package/package.json +2 -1
  92. package/styles/README.md +17 -8
  93. package/styles/motion.scss +3 -0
  94. package/styles/shapes.scss +23 -18
  95. package/styles/statelayer.scss +4 -0
  96. package/styles/typography.scss +2 -2
  97. package/styles.scss +3 -26
  98. package/tsconfig.json +2 -2
package/docs/datepicker.html ADDED
@@ -0,0 +1,151 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Demonstrating MICL Date Pickers">
7
+ <title>MICL Date Pickers</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,dark_mode,edit,home&display=block">
12
+ <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
+ <link rel="stylesheet" href="micl.css">
14
+ <link rel="stylesheet" href="docs.css">
15
+ <style>
16
+ .micl-card__content {
17
+ display: flex;
18
+ flex-direction: column;
19
+ row-gap: 8px;
20
+ }
21
+ p {
22
+ margin-block: 24px 0px;
23
+ color: var(--md-sys-color-on-surface);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="micl-window light">
28
+ <main class="micl-body micl-body--stacked-to-large">
29
+ <section class="micl-pane">
30
+ <header class="micl-appbar">
31
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
32
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
33
+ </a>
34
+ <div class="micl-appbar__headline micl-appbar__headline--center">
35
+ <h1>Date Pickers</h1>
36
+ <p class="micl-appbar__subtitle">Showcasing MICL date pickers</p>
37
+ </div>
38
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
39
+ </header>
40
+
41
+ <div class="micl-pane__columns">
42
+ <div class="micl-pane__column" style="gap:24px">
43
+ <div class="micl-card-outlined">
44
+ <div class="micl-card__content">
45
+ <p class="md-sys-typescale-body-medium">Default non-MICL date input field</p>
46
+ <input type="date" name="t0" style="width:fit-content" value="2025-12-01">
47
+ <p class="md-sys-typescale-body-medium">MICL date textfield component without the MICL date picker component</p>
48
+ <div class="micl-textfield-outlined" style="width:fit-content">
49
+ <label for="mytextfield0">Select date</label>
50
+ <input type="date" id="mytextfield0" value="2026-01-10">
51
+ </div>
52
+ <p class="md-sys-typescale-body-medium">MICL date textfield component with the MICL date picker component</p>
53
+ <div class="micl-textfield-outlined" style="width:fit-content;anchor-name:--myanchor">
54
+ <label for="mytextfield1">Start date</label>
55
+ <input type="date" id="mytextfield1" min="2025-10-01" max="2026-04-30" data-datepicker="mydatepicker1" value="2025-12-02">
56
+ </div>
57
+ <dialog id="mydatepicker1" class="micl-dialog micl-dialog--docked micl-datepicker" style="position-anchor:--myanchor" popover closedby="closerequest" aria-labelledby="mytitle1">
58
+ <form method="dialog">
59
+ <div class="micl-dialog__headline">
60
+ <span class="micl-dialog__supporting-text">Enter date</span>
61
+ <div class="micl-datepicker__month-selector">
62
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
63
+ <button type="button" class="micl-datepicker__month micl-button-text-xs">
64
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
65
+ </button>
66
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
67
+ </div>
68
+ <div class="micl-datepicker__year-selector">
69
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
70
+ <button type="button" class="micl-datepicker__year micl-button-text-xs">
71
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
72
+ </button>
73
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
74
+ </div>
75
+ </div>
76
+ <div class="micl-dialog__content">
77
+ <div class="micl-datepicker__calendars"></div>
78
+ <div class="micl-datepicker__years"></div>
79
+ <div class="micl-datepicker__months"></div>
80
+ </div>
81
+ <div class="micl-dialog__actions">
82
+ <button class="micl-button-text-s" value="">Cancel</button>
83
+ <button class="micl-button-text-s" value="OK">OK</button>
84
+ </div>
85
+ </form>
86
+ </dialog>
87
+
88
+ <p class="md-sys-typescale-body-medium">Date input using a MICL button component that opens the MICL date picker</p>
89
+ <div class="micl-flex--vcenter" style="column-gap:8px">
90
+ <label for="mydate" class="md-sys-typescale-body-large">Start date:</label>
91
+ <button type="button" id="mydate" class="micl-button-text-m" popovertarget="mydatepicker2" value="2026-01-23">23.01.2026</button>
92
+ </div>
93
+ <dialog id="mydatepicker2" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle2">
94
+ <form method="dialog">
95
+ <div class="micl-dialog__headline">
96
+ <h2 id="mytitle2">Enter dates</h2>
97
+ <span class="micl-dialog__supporting-text">Select date</span>
98
+ <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-alticon="calendar_today">edit</button>
99
+ <hr class="micl-divider">
100
+ <div class="micl-datepicker__month-selector">
101
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
102
+ <button type="button" class="micl-datepicker__month micl-button-text-xs">
103
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
104
+ </button>
105
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
106
+ </div>
107
+ <div class="micl-datepicker__year-selector">
108
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
109
+ <button type="button" class="micl-datepicker__year micl-button-text-xs">
110
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
111
+ </button>
112
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
113
+ </div>
114
+ </div>
115
+ <div class="micl-dialog__content">
116
+ <div class="micl-datepicker__calendars"></div>
117
+ <div class="micl-datepicker__years"></div>
118
+ <div class="micl-datepicker__months"></div>
119
+ <div class="micl-datepicker__input micl-textfield-outlined">
120
+ <label for="mydate2">Date</label>
121
+ <input type="date" id="mydate2">
122
+ </div>
123
+ </div>
124
+ <div class="micl-dialog__actions">
125
+ <button class="micl-button-text-s" value="">Cancel</button>
126
+ <button class="micl-button-text-s" value="OK">OK</button>
127
+ </div>
128
+ </form>
129
+ </dialog>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+ <section class="micl-pane">
136
+ <div class="micl-card-filled">
137
+ <div class="micl-card__headline-s">
138
+ <h2>Code example</h2>
139
+ </div>
140
+ <div class="micl-card__content docs-code">
141
+ <pre tabindex="-1"><code>
142
+ </code></pre>
143
+ </div>
144
+ </div>
145
+ </section>
146
+ </main>
147
+
148
+ <script src="micl.js"></script>
149
+ <script src="docs.js"></script>
150
+ </body>
151
+ </html>
package/docs/dialog.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta name="description" content="Demonstrating MICL Dialogs">
7
7
  <title>MICL Dialogs</title>
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="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
9
11
  <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">
10
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
13
  <link rel="stylesheet" href="micl.css">
@@ -99,12 +101,24 @@
99
101
  </dialog>
100
102
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog3">Open Modal Dialog</button>
101
103
 
102
- <dialog id="mydialog4" class="micl-dialog micl-dialog--fullscreen" popover closedby="none" aria-labelledby="mytitle4">
104
+ <dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" role="alertdialog" closedby="closerequest" aria-labelledby="mytitle4">
105
+ <div class="micl-dialog__headline">
106
+ <h2 id="mytitle4">Delete selected images?</h2>
107
+ <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
108
+ </div>
109
+ <form method="dialog" class="micl-dialog__actions">
110
+ <button class="micl-button-text-s" value="donotdelete">Cancel</button>
111
+ <button class="micl-button-text-s" value="dodelete">Delete</button>
112
+ </form>
113
+ </dialog>
114
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4" style="anchor-name:--myanchor">Open Anchored Dialog</button>
115
+
116
+ <dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" popover closedby="none" aria-labelledby="mytitle5">
103
117
  <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>
118
+ <button type="button" class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog5" aria-label="Close">close</button>
105
119
  <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
106
- <h2 id="mytitle4">Personal info</h2>
107
- <button class="micl-button-text-s" value="dosave">Save</button>
120
+ <h2 id="mytitle5">Personal info</h2>
121
+ <button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
108
122
  </form>
109
123
  <div class="micl-dialog__content">
110
124
  <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
@@ -140,16 +154,16 @@
140
154
  </select>
141
155
  </div>
142
156
  <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">
157
+ <label for="mytextfield5">Profession</label>
158
+ <input type="text" id="mytextfield5" value="Physics researcher">
145
159
  </div>
146
160
  </div>
147
161
  <form method="dialog" class="micl-dialog__actions">
148
- <button type="button" class="micl-button-text-s" popovertarget="mydialog4">Cancel</button>
162
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog5">Cancel</button>
149
163
  <button class="micl-button-text-s" value="dosave">Save</button>
150
164
  </form>
151
165
  </dialog>
152
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4">Open Full-Screen Dialog</button>
166
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog5">Open Full-Screen Dialog</button>
153
167
  </div>
154
168
  </div>
155
169
  </div>
package/docs/divider.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta name="description" content="Demonstrating MICL Dividers">
7
7
  <title>MICL Dividers</title>
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="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
9
11
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
10
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
13
  <link rel="stylesheet" href="micl.css">
package/docs/docs.js CHANGED
@@ -55,17 +55,60 @@ document.getElementById('settings-placeholder').innerHTML =
55
55
  </div>
56
56
  </dialog>`;
57
57
 
58
+ try {
59
+ const savedTheme = localStorage.getItem('theme');
60
+ const themelink = document.getElementById('theme-link');
61
+ if (savedTheme && themelink) {
62
+ themelink.href = `themes/${savedTheme}/theme.css`
63
+ const theme = document.getElementById('theme');
64
+ if (theme) {
65
+ theme.value = savedTheme;
66
+ }
67
+ }
68
+ const savedMode = localStorage.getItem('mode');
69
+ if (savedMode) {
70
+ document.body.setAttribute('class', document.body.classList.toString().split(' ').filter(
71
+ c => c.startsWith('micl')
72
+ ) + ' ' + savedMode);
73
+ const mode = document.getElementById('mode');
74
+ if (mode) {
75
+ mode.value = savedMode;
76
+ }
77
+ }
78
+ const savedDir = localStorage.getItem('dir');
79
+ if (savedDir) {
80
+ document.documentElement.setAttribute('dir', savedDir);
81
+ const directionality = document.getElementById('directionality');
82
+ if (directionality) {
83
+ directionality.checked = savedDir === 'rtl';
84
+ }
85
+ }
86
+ }
87
+ catch (e) {}
88
+
58
89
  document.getElementById('theme').addEventListener('change', event => {
59
90
  const themelink = document.getElementById('theme-link');
60
91
  if (themelink) {
61
92
  themelink.href = `themes/${event.target.value}/theme.css`
93
+ try {
94
+ localStorage.setItem('theme', event.target.value);
95
+ }
96
+ catch (e) {}
62
97
  }
63
98
  });
64
99
  document.getElementById('mode').addEventListener('change', event => {
65
100
  document.body.setAttribute('class', document.body.classList.toString().split(' ').filter(
66
101
  c => c.startsWith('micl')
67
102
  ) + ' ' + event.target.value);
103
+ try {
104
+ localStorage.setItem('mode', event.target.value);
105
+ }
106
+ catch (e) {}
68
107
  });
69
108
  document.getElementById('directionality').addEventListener('change', event => {
70
109
  document.documentElement.setAttribute('dir', event.target.checked ? 'rtl' : 'ltr');
110
+ try {
111
+ localStorage.setItem('dir', event.target.checked ? 'rtl' : 'ltr');
112
+ }
113
+ catch (e) {}
71
114
  });
package/docs/iconbutton.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <title>MICL Icon Buttons</title>
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
11
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,settings&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
package/docs/index.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta name="description" content="The Material-Inspired Component Library (MICL) Showcase">
7
7
  <title>MICL Showcase</title>
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="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
9
11
  <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
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
13
  <link rel="stylesheet" href="micl.css">
package/docs/list.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta name="description" content="Demonstrating MICL Lists">
7
7
  <title>MICL Lists</title>
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="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
9
11
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,keyboard_arrow_right,more_horiz,person,search,settings&display=block">
10
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
13
  <link rel="stylesheet" href="micl.css">
package/docs/menu.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta name="description" content="Demonstrating MICL Menus">
7
7
  <title>MICL Menus</title>
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="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
9
11
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
10
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
13
  <link rel="stylesheet" href="micl.css">