material-inspired-component-library 1.0.0 → 1.0.2

package/README.md

@@ -14,14 +14,14 @@ The Material-Inspired Component Library (MICL) offers a free and open-source col
 ## Demo & Documentation 📖
 Explore the components in a live environment and see how they work.
 
-- **Live Demo:** [The MICL Showcase](https://henkpb.github.io/micl/)
+- **Live Demo:** [The MICL Showcase]()
 - **Component Documentation:** [View all component documentation](components/README.md)
 
 ## Quick start 🚀
 
 ### 1. Install via NPM
 ```shell
-npm install micl
+npm install material-inspired-component-library
 ```
 
 ### 2. Add the CSS

package/components/accordion/README.md

@@ -45,9 +45,6 @@ import miclAccordion from 'micl/components/list';
 miclAccordion.initialize(document.querySelector('.micl-list'));
 ```
 
-### Demo
-A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available for you to interact with.
-
 ## Variants
 To ensure that only one accordion item within a group can be open at a time, add a matching `name` attribute to all the `<details>` elements you want to group together.
 

package/components/bottomsheet/README.md

@@ -32,9 +32,6 @@ import miclBottomSheet from 'micl/components/bottomsheet';
 miclBottomSheet.initialize(document.querySelector('.micl-bottomsheet'));
 ```
 
-### Demo
-A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available for you to interact with.
-
 ## Variants
 A **modal** bottom sheet blocks access to the rest of the page and must be dismissed explicitly by the user. This is suitable for critical tasks or information that requires a user's full attention.
 

package/components/button/README.md

@@ -28,9 +28,6 @@ import miclButton from 'micl/components/button';
 miclButton.initialize(document.querySelector('.micl-button-text-s'));
 ```
 
-### Demo
-A live example of the [Button component](https://henkpb.github.io/micl/button.html) is available for you to interact with.
-
 ## Variants
 Buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To specify a size, append the appropriate postfix to the button's style class:
 

package/components/card/README.md

@@ -22,9 +22,6 @@ Import the card styles into your project:
 ### TypeScript
 No custom TypeScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Card component](https://henkpb.github.io/micl/card.html) is available for you to interact with.
-
 ## Variants
 Cards come in **three distinct styles**:
 

package/components/checkbox/README.md

@@ -29,9 +29,6 @@ import miclCheckbox from 'micl/components/checkbox';
 miclCheckbox.initialize(document.querySelector('.micl-checkbox'));
 ```
 
-### Demo
-A live example of the [Checkbox component](https://henkpb.github.io/micl/checkbox.html) is available for you to interact with.
-
 ## Variants
 Adding the `micl-checkbox--error` CSS class to the `<input>` element will create an error-checkbox as specified by the Material Design 3 specification.
 

package/components/dialog/README.md

@@ -31,9 +31,6 @@ Import the dialog styles into your project:
 ### TypeScript
 No custom TypeScript is required for the core functionality of this component, as the native popover attribute handles the open/close behavior.
 
-### Demo
-A live example of the [Dialog component](https://henkpb.github.io/micl/dialog.html) is available for you to interact with.
-
 ## Variants
 When dialogs with the `popover` attribute are opened, they animate from the control element to the center of the screen. They can be easily dismissed by clicking outside or pressing <kbd>Esc</kbd>.
 

package/components/divider/README.md

@@ -20,9 +20,6 @@ Import the divider styles into your project:
 ### TypeScript
 No custom TypeScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Divider component](https://henkpb.github.io/micl/divider.html) is available for you to interact with.
-
 ## Variants
 The Divider component offers five CSS classes for different divider styles:
 

package/components/iconbutton/README.md

@@ -30,9 +30,6 @@ import miclIconButton from 'micl/components/button';
 miclIconButton.initialize(document.querySelector('.micl-iconbutton-standard-s'));
 ```
 
-### Demo
-A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available for you to interact with.
-
 ## Variants
 Icon buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To specify a size, append the appropriate postfix to the button's style class:
 

package/components/list/README.md

@@ -38,9 +38,6 @@ import miclList from 'micl/components/list';
 miclList.initialize(document.querySelector('.micl-list'));
 ```
 
-### Demo
-A live example of the [List component](https://henkpb.github.io/micl/list.html) is available for you to interact with.
-
 ## Variants
 The List component offers three CSS classes to control the height and content capacity of individual list items:
 

package/components/menu/README.md

@@ -40,7 +40,7 @@ miclMenu.initialize(document.querySelector('.micl-menu'));
 ```
 
 ### Demo
-A live example of the [Menu component](https://henkpb.github.io/micl/menu.html) is available for you to interact with.
+A live example of the [Menu component]() is available for you to interact with.
 
 ## Variants
 Since the Menu component is based on the **List component**, all of its list item variants and content features can be used. You can incorporate icons, avatars, images, multiple lines of text, and more.

package/components/radio/README.md

@@ -21,9 +21,6 @@ Import the radio button styles into your project:
 ### TypeScript
 No custom TypeScript is required for the core functionality of this component. However, to enable the ripple effect on interaction, include the Ripple TypeScript in your project.
 
-### Demo
-A live example of the [Radio button component](https://henkpb.github.io/micl/radio.html) is available for you to interact with.
-
 ## Variants
 A radio button can be disabled by adding the `disabled` attribute to the `<input>` element.
 

package/components/select/README.md

@@ -41,7 +41,7 @@ miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
 ```
 
 ### Demo
-A live example of the [Select component](https://henkpb.github.io/micl/select.html) is available for you to interact with.
+A live example of the [Select componen]() is available for you to interact with.
 
 ## Variants
 To display extra information for an option, add the `aria-description` attribute to the `<option>` element. In a two-line list item (`micl-list-item-two`), this displays the attribute's content as supporting text. Do not add a separate text element to the `<option>`, as this will change the text of the selected option.

package/components/sidesheet/README.md

@@ -33,9 +33,6 @@ Import the side sheet styles into your project:
 ### TypeScript
 No custom TypeScript is required for the core functionality of the side sheet component.
 
-### Demo
-A live example of the [Side sheet component](https://henkpb.github.io/micl/sidesheet.html) is available for you to interact with.
-
 ## Variants
 A **modal** side sheet blocks access to the rest of the page and must be dismissed explicitly by the user. This is suitable for critical tasks or information that requires a user's full attention.
 

package/components/slider/README.md

@@ -28,9 +28,6 @@ import miclSlider from 'micl/components/slider';
 miclSlider.initialize(document.querySelector('.micl-slider-m'));
 ```
 
-### Demo
-A live example of the [Slider component](https://henkpb.github.io/micl/slider.html) is available for you to interact with.
-
 ## Variants
 Sliders come in **five different sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To set a specific size, append the appropriate postfix to the `micl-slider` CSS class name:
 

package/components/switch/README.md

@@ -21,9 +21,6 @@ Import the switch styles into your project:
 ### TypeScript
 No custom TypeScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Switch component](https://henkpb.github.io/micl/switch.html) is available for you to interact with.
-
 ## Variants
 By default, the component displays an icon on the switch handle in both the selected and unselected state. To remove the icon in the unselected state, assign an empty string to the following CSS variable:
 

package/components/textfield/README.md

@@ -33,9 +33,6 @@ miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
 document.querySelector('.micl-textfield-outlined').addEventListener('input', miclTextField.input);
 ```
 
-### Demo
-A live example of the [Text field component](https://henkpb.github.io/micl/textfield.html) is available for you to interact with.
-
 ## Variants
 The following example shows a text field with every available feature. You can include any combination of these elements. The order of elements inside the `<div>` does not change the layout.
 

package/docs/accordion.html

@@ -6,8 +6,8 @@
     <title>MICL Accordions</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,person,search,settings&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -279,7 +279,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/bottomsheet.html

@@ -6,8 +6,8 @@
     <title>MICL Bottom Sheets</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,link,share&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -55,16 +55,16 @@
                         <h3 class="md-sys-typescale-title-large">Send</h3>
                         <div class="figures">
                             <figure>
-                                <img alt="John" src="card-names.webp">
+                                <img alt="John" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Portrait-Person-Old-Man-Man-Head-1615262.jpg/330px-Portrait-Person-Old-Man-Man-Head-1615262.jpg">
                                 <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
                             </figure>
                             <figure>
-                                <img alt="Carol" src="card-awards.webp">
+                                <img alt="Carol" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Gambia_girl.jpg/250px-Gambia_girl.jpg">
                                 <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
                             </figure>
                             <figure>
-                                <img alt="Bill" src="card-fingerprint.webp">
-                                <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
+                                <img alt="Lucy" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Mosuo_Woman_-_42723465920.jpg/250px-Mosuo_Woman_-_42723465920.jpg">
+                                <figcaption class="md-sys-typescale-body-small">Lucy Hue</figcaption>
                             </figure>
                             <figure>
                                 <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
@@ -133,16 +133,16 @@
                         <h3 class="md-sys-typescale-title-large">Send</h3>
                         <div class="figures">
                             <figure>
-                                <img alt="John" src="card-names.webp">
+                                <img alt="John" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Portrait-Person-Old-Man-Man-Head-1615262.jpg/330px-Portrait-Person-Old-Man-Man-Head-1615262.jpg">
                                 <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
                             </figure>
                             <figure>
-                                <img alt="Carol" src="card-awards.webp">
+                                <img alt="Carol" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Gambia_girl.jpg/250px-Gambia_girl.jpg">
                                 <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
                             </figure>
                             <figure>
-                                <img alt="Bill" src="card-fingerprint.webp">
-                                <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
+                                <img alt="Lucy" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Mosuo_Woman_-_42723465920.jpg/250px-Mosuo_Woman_-_42723465920.jpg">
+                                <figcaption class="md-sys-typescale-body-small">Lucy Hue</figcaption>
                             </figure>
                             <figure>
                                 <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
@@ -156,7 +156,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/button.html

@@ -6,8 +6,8 @@
     <title>MICL Buttons</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
 </head>
 <body class="light">
@@ -200,7 +200,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/card.html

@@ -6,8 +6,8 @@
     <title>MICL Cards</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
 </head>
 <body class="light">
@@ -47,7 +47,7 @@
 
         <details class="micl-card-elevated">
             <summary>
-                <img alt="holiday" class="micl-card__image" src="card-holiday.webp">
+                <img alt="Large cloud over landscape" class="micl-card__image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg">
                 <span class="micl-card__headline-s">
                     <span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
                 </span>
@@ -62,7 +62,7 @@
         </details>
         <details class="micl-card-filled">
             <summary>
-                <img alt="cabinet" class="micl-card__image" src="card-cabinet.webp">
+                <img alt="Butterfly" class="micl-card__image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg/330px-Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg">
                 <span class="micl-card__headline-m">
                     <span class="micl-heading">Lorem ipsum</span>
                 </span>
@@ -74,7 +74,7 @@
         </details>
         <details class="micl-card-outlined">
             <summary>
-                <img alt="city" class="micl-card__image" src="card-city.webp">
+                <img alt="Balloons" class="micl-card__image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg">
                 <span class="micl-card__headline-l">
                     <span class="micl-heading">Lorem</span>
                 </span>
@@ -85,7 +85,7 @@
         </details>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/checkbox.html

@@ -6,8 +6,8 @@
     <title>MICL Checkboxes</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -93,7 +93,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/dialog.html

@@ -6,8 +6,8 @@
     <title>MICL Dialogs</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,info,logout,person,restart_alt&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -147,7 +147,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/divider.html

@@ -6,8 +6,8 @@
     <title>MICL Dividers</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         p {
@@ -97,7 +97,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/docs.js

@@ -58,7 +58,7 @@ document.getElementById('settings-placeholder').innerHTML =
 document.getElementById('theme').addEventListener('change', event => {
     const themelink = document.getElementById('theme-link');
     if (themelink) {
-        themelink.href = `themes/${event.target.value}/theme.css`
+        themelink.href = `../themes/${event.target.value}/theme.css`
     }
 });
 document.getElementById('mode').addEventListener('change', event => {

package/docs/iconbutton.html

@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,settings&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -191,7 +191,7 @@
         <!-- </div> -->
     <!-- </div> -->
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/index.html

@@ -6,8 +6,8 @@
     <title>MICL Showcase</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,edit,globe,link,more_vert,newspaper,person,share&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         a {
@@ -86,7 +86,7 @@
         </div>
 
         <div class="micl-card-outlined">
-            <img class="micl-card__image" alt="city" src="card-city.webp">
+            <a title="Alexander Gerst, CC BY-SA 2.0 &lt;https://creativecommons.org/licenses/by-sa/2.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Atmosphere_-_2.jpg"><img class="micl-card__image" alt="atmosphere" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715"></a>
             <div class="micl-card__headline-l">
                 <h2>Card</h2>
             </div>
@@ -147,7 +147,7 @@
                         </span>
                     </li>
                     <li class="micl-list-item-three" tabindex="0">
-                        <span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center"></span>
+                        <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></span>
                         <span class="micl-list-item__text">
                             <span class="micl-list-item__headline">Three-line list item</span>
                             <span class="micl-list-item__supporting-text">Supporting text</span>
@@ -313,7 +313,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/list.html

@@ -6,8 +6,8 @@
     <title>MICL Lists</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,person,search,settings&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -218,7 +218,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/menu.html

@@ -6,8 +6,8 @@
     <title>MICL Menus</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-list-item-three:has(.micl-checkbox) .micl-list-item__icon {
@@ -137,7 +137,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/radio.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MICL Radio Buttons</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -95,7 +95,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/select.html

@@ -6,8 +6,8 @@
     <title>MICL Selects</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content > .micl-textfield-outlined, .micl-card__content > .micl-textfield-filled {
@@ -199,7 +199,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/sidesheet.html

@@ -6,8 +6,8 @@
     <title>MICL Side Sheets</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -109,7 +109,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/slider.html

@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,volume_up&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="../dist/micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
@@ -66,7 +66,7 @@
         </div>
     </div>
 
-    <script src="micl.js"></script>
+    <script src="../dist/micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>