material-inspired-component-library 6.0.2 → 6.0.3

package/docs/docs.js

@@ -133,3 +133,7 @@ document.getElementById('directionality').addEventListener('change', event => {
     }
     catch (e) {}
 });
+document.getElementById('copycode')?.addEventListener('click', event => {
+    const code = document.querySelector('code');
+    !!code && navigator.clipboard.writeText(code.textContent).then(() => {}).catch(e => {});
+});

package/docs/iconbutton.html

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <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">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,settings&display=block">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home,settings&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
@@ -288,23 +288,22 @@
             </div>
         </section>
         <section class="micl-pane">
-            <div class="micl-card-filled">
+            <div class="micl-card-filled" style="margin-top:8px">
                 <div class="micl-card__headline-s">
                     <h2>Code example</h2>
+                    <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre tabindex="-1"><code>
-&lt;button type="button"
-        class="micl-iconbutton-standard-s material-symbols-outlined"
-        aria-label="Control Panel"
+                    <pre tabindex="-1"><code>&lt;button type="button"
+  class="micl-iconbutton-standard-s material-symbols-outlined"
+  aria-label="Control Panel"
 &gt;settings&lt;/button&gt;
 
 &lt;button type="button"
-        class="micl-iconbutton-filled-m material-symbols-outlined
-               micl-button--toggle micl-button--selected"
-        aria-label="Control Panel"
-&gt;settings&lt;/button&gt;
-                    </code></pre>
+  class="micl-iconbutton-filled-m material-symbols-outlined
+         micl-button--toggle micl-button--selected"
+  aria-label="Control Panel"
+&gt;settings&lt;/button&gt;</code></pre>
                 </div>
             </div>
         </section>

package/docs/list.html

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <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">
-    <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">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,content_copy,dark_mode,home,keyboard_arrow_right,more_horiz,person,search,settings&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
@@ -255,13 +255,13 @@
             </div>
         </section>
         <section class="micl-pane">
-            <div class="micl-card-filled">
+            <div class="micl-card-filled" style="margin-top:8px">
                 <div class="micl-card__headline-s">
                     <h2>Code example</h2>
+                    <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre tabindex="-1"><code>
-&lt;ul class="micl-list"&gt;
+                    <pre tabindex="-1"><code>&lt;ul class="micl-list"&gt;
   &lt;li class="micl-list-item-two"&gt;
     &lt;span class="micl-list-item__avatar"&gt;17&lt;/span&gt;
     &lt;span class="micl-list-item__text"&gt;
@@ -282,8 +282,7 @@
       &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0" tabindex="-1"&gt;
     &lt;/label&gt;
   &lt;/li&gt;
-&lt;/ul&gt;
-                    </code></pre>
+&lt;/ul&gt;</code></pre>
                 </div>
             </div>
         </section>

package/docs/menu.html

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <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">
-    <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">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,content_copy,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
@@ -334,29 +334,28 @@
                     <div class="micl-card-filled">
                         <div class="micl-card__headline-s">
                             <h2>Code example</h2>
+                            <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
                         </div>
                         <div class="micl-card__content docs-code">
-                            <pre tabindex="-1"><code>
-&lt;nav id="id0" class="micl-menu" popover&gt;
-    &lt;ul class="micl-list"&gt;
-        &lt;li class="micl-list-item-one" tabindex="0"&gt;
-            &lt;span class="micl-list-item__text"&gt;
-                &lt;span class="micl-list-item__headline"&gt;Home&lt;/span&gt;
-            &lt;/span&gt;
-        &lt;/li&gt;
-        &lt;li class="micl-list-item-one"&gt;
-            &lt;span class="micl-list-item__text"&gt;
-                &lt;span class="micl-list-item__headline"&gt;About&lt;/span&gt;
-            &lt;/span&gt;
-        &lt;/li&gt;
-        &lt;li class="micl-list-item-one micl-list-item--disabled"&gt;
-            &lt;span class="micl-list-item__text"&gt;
-                &lt;span class="micl-list-item__headline"&gt;Contact&lt;/span&gt;
-            &lt;/span&gt;
-        &lt;/li&gt;
-    &lt;/ul&gt;
-&lt;/nav&gt;
-                            </code></pre>
+                            <pre tabindex="-1"><code>&lt;nav id="id0" class="micl-menu" popover&gt;
+  &lt;ul class="micl-list"&gt;
+    &lt;li class="micl-list-item-one" tabindex="0"&gt;
+      &lt;span class="micl-list-item__text"&gt;
+        &lt;span class="micl-list-item__headline"&gt;Home&lt;/span&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li class="micl-list-item-one"&gt;
+      &lt;span class="micl-list-item__text"&gt;
+        &lt;span class="micl-list-item__headline"&gt;About&lt;/span&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li class="micl-list-item-one micl-list-item--disabled"&gt;
+      &lt;span class="micl-list-item__text"&gt;
+        &lt;span class="micl-list-item__headline"&gt;Contact&lt;/span&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
                         </div>
                     </div>
                 </div>