material-inspired-component-library 1.0.2 → 1.0.3

package/README.md

@@ -14,7 +14,7 @@ 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]()
+- **Live Demo:** [The MICL Showcase](https://henkpb.github.io/micl/)
 - **Component Documentation:** [View all component documentation](components/README.md)
 
 ## Quick start 🚀
@@ -30,18 +30,18 @@ npm install material-inspired-component-library
 
 To import the styles for a single component:
 ```SCSS
-@use "micl/components/card";
+@use "material-inspired-component-library/components/card";
 ```
 To import all component styles:
 ```SCSS
-@use "micl/styles";
+@use "material-inspired-component-library/styles";
 ```
 
 **Plain CSS**
 
 Add the main CSS file to your project:
 ```HTML
-<link rel="stylesheet" href="node_modules/micl/dist/micl.css">
+<link rel="stylesheet" href="node_modules/material-inspired-component-library/dist/micl.css">
 ```
 
 ### 3. Add the HTML & JavaScript
@@ -61,22 +61,22 @@ Some components, list the **List**, require a small amount of JavaScript to hand
 
 ```TypeScript
 // For components with interactive behaviour
-import list from "micl/components/lists";
+import list from "material-inspired-component-library/components/lists";
 
 // To import TypeScript for all components
-import components from "micl/components";
+import components from "material-inspired-component-library/components";
 ```
 
 To import all the TypeScript into your project:
 ```TypeScript
-import components from "micl/components";
+import components from "material-inspired-component-library/components";
 ```
 
 **Plain JavaScript**
 
 Add the main JavaScript file to your project:
 ```HTML
-<script src="node_modules/micl/dist/micl.js"></script>
+<script src="node_modules/material-inspired-component-library/dist/micl.js"></script>
 ```
 
 ## Available components ✅

package/components/accordion/README.md

@@ -31,7 +31,7 @@ The Accordion component is an extension of the [**List** component](../list/READ
 Import the list styles into your project:
 
 ```CSS
-@use "micl/components/list";
+@use "material-inspired-component-library/components/list";
 ```
 
 ### TypeScript
@@ -40,11 +40,14 @@ This component requires a TypeScript module to support keyboard navigation. You
 To manually initialize the component:
 
 ```TypeScript
-import miclAccordion from 'micl/components/list';
+import miclAccordion from 'material-inspired-component-library/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

@@ -18,7 +18,7 @@ To create a standard bottom sheet, use the `<dialog>` element with the `popover`
 Import the bottom sheet styles into your project:
 
 ```CSS
-@use "micl/components/bottomsheet";
+@use "material-inspired-component-library/components/bottomsheet";
 ```
 
 ### TypeScript
@@ -27,11 +27,14 @@ This component requires a TypeScript module to support **modal** and **resizable
 To manually initialize the component:
 
 ```TypeScript
-import miclBottomSheet from 'micl/components/bottomsheet';
+import miclBottomSheet from 'material-inspired-component-library/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

@@ -14,7 +14,7 @@ To create a basic button, use the `<button>` element with a class that specifies
 Import the button styles into your project:
 
 ```CSS
-@use "micl/components/button";
+@use "material-inspired-component-library/components/button";
 ```
 
 ### TypeScript
@@ -23,11 +23,14 @@ This component requires a TypeScript module for interactive features like the **
 To manually initialize the component:
 
 ```TypeScript
-import miclButton from 'micl/components/button';
+import miclButton from 'material-inspired-component-library/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

@@ -16,12 +16,15 @@ To add a basic card, use a `<div>` element with one of the primary card style cl
 Import the card styles into your project:
 
 ```CSS
-@use "micl/components/card";
+@use "material-inspired-component-library/components/card";
 ```
 
 ### 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

@@ -15,7 +15,7 @@ To add a basic checkbox, use the `<input type="checkbox">` element with the `mic
 Import the checkbox styles into your project:
 
 ```CSS
-@use "micl/components/checkbox";
+@use "material-inspired-component-library/components/checkbox";
 ```
 
 ### TypeScript
@@ -24,11 +24,14 @@ This component requires a TypeScript module to support checking and unchecking u
 To manually initialize the component:
 
 ```TypeScript
-import miclCheckbox from 'micl/components/checkbox';
+import miclCheckbox from 'material-inspired-component-library/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

@@ -25,12 +25,15 @@ To create a basic dialog, use the `<dialog>` element with the `micl-dialog` clas
 Import the dialog styles into your project:
 
 ```CSS
-@use "micl/components/dialog";
+@use "material-inspired-component-library/components/dialog";
 ```
 
 ### 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

@@ -14,12 +14,15 @@ To add a basic divider, use the `<hr>` element with the `micl-divider` class:
 Import the divider styles into your project:
 
 ```CSS
-@use "micl/components/divider";
+@use "material-inspired-component-library/components/divider";
 ```
 
 ### 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

@@ -16,7 +16,7 @@ To create a basic icon button, use the `<button>` element with a class that spec
 Import the icon button styles into your project:
 
 ```CSS
-@use "micl/components/iconbutton";
+@use "material-inspired-component-library/components/iconbutton";
 ```
 
 ### TypeScript
@@ -25,11 +25,14 @@ This component requires a TypeScript module for interactive features like the **
 To manually initialize the component:
 
 ```TypeScript
-import miclIconButton from 'micl/components/button';
+import miclIconButton from 'material-inspired-component-library/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

@@ -24,7 +24,7 @@ To create a basic list, use the `<ul>` element with the `micl-list` class and in
 Import the list styles into your project:
 
 ```CSS
-@use "micl/components/list";
+@use "material-inspired-component-library/components/list";
 ```
 
 ### TypeScript
@@ -33,11 +33,14 @@ This component requires a TypeScript module to support keyboard navigation. You
 To manually initialize the component:
 
 ```TypeScript
-import miclList from 'micl/components/list';
+import miclList from 'material-inspired-component-library/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

@@ -24,8 +24,8 @@ The Menu component is an extension of the [List component](../list/README.md). I
 Import the styles for both the menu and list components into your project:
 
 ```CSS
-@use "micl/components/list";
-@use "micl/components/menu";
+@use "material-inspired-component-library/components/list";
+@use "material-inspired-component-library/components/menu";
 ```
 
 ### TypeScript
@@ -34,13 +34,13 @@ This component requires the **Menu** TypeScript module for functionality. You ca
 To manually initialize the component:
 
 ```TypeScript
-import miclMenu from 'micl/components/menu';
+import miclMenu from 'material-inspired-component-library/components/menu';
 
 miclMenu.initialize(document.querySelector('.micl-menu'));
 ```
 
 ### Demo
-A live example of the [Menu component]() is available for you to interact with.
+A live example of the [Menu component](https://henkpb.github.io/micl/menu.html) 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

@@ -15,12 +15,15 @@ To add a basic radio button, use the `<input type="radio">` element with the `mi
 Import the radio button styles into your project:
 
 ```CSS
-@use "micl/components/radio";
+@use "material-inspired-component-library/components/radio";
 ```
 
 ### 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

@@ -24,9 +24,9 @@ The Select component is an extension of the [Text field](../textfield/README.md)
 The Select component relies on styles from the text field and list components. Be sure to import all three styles into your project.
 
 ```CSS
-@use "micl/components/list";
-@use "micl/components/textfield";
-@use "micl/components/select";
+@use "material-inspired-component-library/components/list";
+@use "material-inspired-component-library/components/textfield";
+@use "material-inspired-component-library/components/select";
 ```
 
 ### TypeScript
@@ -35,13 +35,13 @@ This component requires the **Text field** TypeScript module for functionality.
 To manually initialize the component:
 
 ```TypeScript
-import miclTextField from 'micl/components/textfield';
+import miclTextField from 'material-inspired-component-library/components/textfield';
 
 miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
 ```
 
 ### Demo
-A live example of the [Select componen]() is available for you to interact with.
+A live example of the [Select component](https://henkpb.github.io/micl/select.html) 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

@@ -27,12 +27,15 @@ To create a standard side sheet, use the `<dialog>` element with the `popover` a
 Import the side sheet styles into your project:
 
 ```CSS
-@use "micl/components/sidesheet";
+@use "material-inspired-component-library/components/sidesheet";
 ```
 
 ### 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

@@ -14,7 +14,7 @@ To add a basic slider, use the `<input type="range">` element with one of the pr
 Import the slider styles into your project:
 
 ```CSS
-@use "micl/components/slider";
+@use "material-inspired-component-library/components/slider";
 ```
 
 ### TypeScript
@@ -23,11 +23,14 @@ This component requires the **Slider** TypeScript module for functionality. You
 To manually initialize the component:
 
 ```TypeScript
-import miclSlider from 'micl/components/slider';
+import miclSlider from 'material-inspired-component-library/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

@@ -15,12 +15,15 @@ To add a basic switch, use the `<input type="checkbox">` element with the `micl-
 Import the switch styles into your project:
 
 ```CSS
-@use "micl/components/switch";
+@use "material-inspired-component-library/components/switch";
 ```
 
 ### 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

@@ -17,7 +17,7 @@ A basic text field can be either `filled` or `outlined`. To create one, use the
 Import the text field styles into your project:
 
 ```CSS
-@use "micl/components/textfield";
+@use "material-inspired-component-library/components/textfield";
 ```
 
 ### TypeScript
@@ -26,13 +26,16 @@ This component requires a TypeScript module for interactive features like the **
 To manually initialize the component and attach an event listener for the `input` event:
 
 ```TypeScript
-import miclTextField from 'micl/components/textfield';
+import miclTextField from 'material-inspired-component-library/components/textfield';
 
 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="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -279,7 +279,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="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="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="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="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">
+                                <img alt="John" src="card-names.webp">
                                 <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
                             </figure>
                             <figure>
-                                <img alt="Carol" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Gambia_girl.jpg/250px-Gambia_girl.jpg">
+                                <img alt="Carol" src="card-awards.webp">
                                 <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
                             </figure>
                             <figure>
-                                <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>
+                                <img alt="Bill" src="card-fingerprint.webp">
+                                <figcaption class="md-sys-typescale-body-small">Bill Graves</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="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">
+                                <img alt="John" src="card-names.webp">
                                 <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
                             </figure>
                             <figure>
-                                <img alt="Carol" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Gambia_girl.jpg/250px-Gambia_girl.jpg">
+                                <img alt="Carol" src="card-awards.webp">
                                 <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
                             </figure>
                             <figure>
-                                <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>
+                                <img alt="Bill" src="card-fingerprint.webp">
+                                <figcaption class="md-sys-typescale-body-small">Bill Graves</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="../dist/micl.js"></script>
+    <script src="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="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
 </head>
 <body class="light">
@@ -200,7 +200,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="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="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
 </head>
 <body class="light">
@@ -47,7 +47,7 @@
 
         <details class="micl-card-elevated">
             <summary>
-                <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">
+                <img alt="holiday" class="micl-card__image" src="card-holiday.webp">
                 <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="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">
+                <img alt="cabinet" class="micl-card__image" src="card-cabinet.webp">
                 <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="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">
+                <img alt="city" class="micl-card__image" src="card-city.webp">
                 <span class="micl-card__headline-l">
                     <span class="micl-heading">Lorem</span>
                 </span>
@@ -85,7 +85,7 @@
         </details>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="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="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -93,7 +93,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="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="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -147,7 +147,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>