material-inspired-component-library 1.1.0 → 1.2.1

package/README.md

@@ -28,24 +28,29 @@ npm install material-inspired-component-library
 
 **Sass/SCSS**
 
-To import the styles for a single component:
+To import the styles for a single component (e.g., the [Card component](components/card/README.md)):
 ```SCSS
-@use "material-inspired-component-library/components/card";
+@use "material-inspired-component-library/dist/card";
 ```
 To import all component styles:
 ```SCSS
 @use "material-inspired-component-library/styles";
 ```
+Remember to import your [theme file](themes/README.md) as well:
+```SCSS
+@use "path/to/mytheme";
+```
 
 **Plain CSS**
 
-Add the main CSS file to your project:
+Copy the main `micl.css` file to your distribution folder and include it in your application. Include your [theme file](themes/README.md) as well:
 ```HTML
-<link rel="stylesheet" href="node_modules/material-inspired-component-library/dist/micl.css">
+<link rel="stylesheet" type="text/css" href="path/to/dist/mytheme.css">
+<link rel="stylesheet" type="text/css" href="path/to/dist/micl.css">
 ```
 
 ### 3. Add the HTML & JavaScript
-Here is a simple example of a **Card** component.
+Here is a simple example of a [Card component](components/card/README.md).
 
 ```HTML
 <div class="micl-card-outlined">
@@ -57,27 +62,19 @@ Here is a simple example of a **Card** component.
 </div>
 ```
 
-Some components, list the **List**, require a small amount of JavaScript to handle interactive behaviour.
-
-```TypeScript
-// For components with interactive behaviour
-import list from "material-inspired-component-library/components/lists";
-
-// To import TypeScript for all components
-import components from "material-inspired-component-library/components";
-```
-
-To import all the TypeScript into your project:
-```TypeScript
-import components from "material-inspired-component-library/components";
+Some components, like the [List](components/list/README.md), require a small amount of JavaScript to handle interactive behaviour. Because the JavaScript footprint in MICL is so small, you can import the code for all components at once.
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
+This will initialize all MICL components, including those that will be added to the DOM later on.
 
 **Plain JavaScript**
 
-Add the main JavaScript file to your project:
+Copy the main `micl.js` file to your distribution folder and include it in your application:
 ```HTML
-<script src="node_modules/material-inspired-component-library/dist/micl.js"></script>
+<script src="path/to/dist/micl.js"></script>
 ```
+This will initialize all MICL components, including those that will be added to the DOM later on.
 
 ## Available components ✅
 The library currently consists of the following components:
@@ -100,6 +97,10 @@ The library currently consists of the following components:
 
 ## Change Log
 
-#### 1.1.0 (12.08.2025)
+### 1.1.0 (12.08.2025)
 **Features**
 - **Text field**: Added support for multi-line text fields.
+
+### 1.2.0 (17.08.2025)
+**Features**
+- **List**: Added support for switches inside list items.

package/components/accordion/README.md

@@ -31,20 +31,18 @@ The Accordion component is an extension of the [**List** component](../list/READ
 Import the list styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/list";
+@use "material-inspired-component-library/dist/list";
 ```
 
-### TypeScript
-This component requires a TypeScript module to support keyboard navigation. You can import the specific module or use the main MICL TypeScript library, which handles initialization automatically.
+### JavaScript
+This component requires JavaScript to support keyboard navigation:
 
-To manually initialize the component:
-
-```TypeScript
-import miclAccordion from 'material-inspired-component-library/components/list';
-
-miclAccordion.initialize(document.querySelector('.micl-list'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any List component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available for you to interact with.
 

package/components/bottomsheet/README.md

@@ -18,20 +18,18 @@ To create a standard bottom sheet, use the `<dialog>` element with the `popover`
 Import the bottom sheet styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/bottomsheet";
+@use "material-inspired-component-library/dist/bottomsheet";
 ```
 
-### TypeScript
-This component requires a TypeScript module to support **modal** and **resizable** bottom sheets. You can import the specific bottom sheet module or use the main MICL TypeScript library, which handles initialization automatically.
+### JavaScript
+This component requires JavaScript to support **modal** and **resizable** bottom sheets:
 
-To manually initialize the component:
-
-```TypeScript
-import miclBottomSheet from 'material-inspired-component-library/components/bottomsheet';
-
-miclBottomSheet.initialize(document.querySelector('.micl-bottomsheet'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Bottom sheet component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available for you to interact with.
 

package/components/bottomsheet/index.scss

@@ -19,7 +19,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../styles/elevation';
 @use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 
 dialog.micl-bottomsheet {
     --md-sys-bottomsheet-height: max-content;

package/components/button/README.md

@@ -14,20 +14,18 @@ To create a basic button, use the `<button>` element with a class that specifies
 Import the button styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/button";
+@use "material-inspired-component-library/dist/button";
 ```
 
-### TypeScript
-This component requires a TypeScript module for interactive features like the **ripple effect** and **toggle logic**. You can import the specific button module or use the main MICL TypeScript library, which handles initialization automatically.
+### JavaScript
+This component requires JavaScript for interactive features like the **ripple effect** and **toggle logic**:
 
-To manually initialize the component:
-
-```TypeScript
-import miclButton from 'material-inspired-component-library/components/button';
-
-miclButton.initialize(document.querySelector('.micl-button-text-s'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Button component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Button component](https://henkpb.github.io/micl/button.html) is available for you to interact with.
 

package/components/button/index.scss

@@ -19,8 +19,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/ripple';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
 button.micl-button-text-xs,

package/components/card/README.md

@@ -16,11 +16,11 @@ 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 "material-inspired-component-library/components/card";
+@use "material-inspired-component-library/dist/card";
 ```
 
-### TypeScript
-No custom TypeScript is required for the core functionality of this component.
+### JavaScript
+No custom JavaScript 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.

package/components/card/index.scss

@@ -19,8 +19,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/ripple';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
 :root {

package/components/checkbox/README.md

@@ -15,20 +15,18 @@ To add a basic checkbox, use the `<input type="checkbox">` element with the `mic
 Import the checkbox styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/checkbox";
+@use "material-inspired-component-library/dist/checkbox";
 ```
 
-### TypeScript
-This component requires a TypeScript module to support checking and unchecking using a keyboard. You can import the specific module or use the main MICL TypeScript library, which handles initialization automatically.
+### JavaScript
+This component requires JavaScript to support checking and unchecking using a keyboard:
 
-To manually initialize the component:
-
-```TypeScript
-import miclCheckbox from 'material-inspired-component-library/components/checkbox';
-
-miclCheckbox.initialize(document.querySelector('.micl-checkbox'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Checkbox component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Checkbox component](https://henkpb.github.io/micl/checkbox.html) is available for you to interact with.
 

package/components/checkbox/index.scss

@@ -21,6 +21,8 @@
 
 @use '../../styles/motion';
 @use '../../styles/ripple';
+@use '../../styles/statelayer';
+@use '../../styles/typography';
 
 :root {
     --md-sys-checkbox-container-size: 18px;

package/components/dialog/README.md

@@ -25,11 +25,11 @@ To create a basic dialog, use the `<dialog>` element with the `micl-dialog` clas
 Import the dialog styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/dialog";
+@use "material-inspired-component-library/dist/dialog";
 ```
 
-### TypeScript
-No custom TypeScript is required for the core functionality of this component, as the native popover attribute handles the open/close behavior.
+### JavaScript
+No custom JavaScript 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.

package/components/dialog/index.scss

@@ -19,7 +19,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../styles/elevation';
 @use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
 :root {

package/components/divider/README.md

@@ -14,11 +14,11 @@ To add a basic divider, use the `<hr>` element with the `micl-divider` class:
 Import the divider styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/divider";
+@use "material-inspired-component-library/dist/divider";
 ```
 
-### TypeScript
-No custom TypeScript is required for the core functionality of this component.
+### JavaScript
+No custom JavaScript 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.

package/components/iconbutton/README.md

@@ -16,20 +16,18 @@ 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 "material-inspired-component-library/components/iconbutton";
+@use "material-inspired-component-library/dist/iconbutton";
 ```
 
-### TypeScript
-This component requires a TypeScript module for interactive features like the **ripple effect** and **toggle logic**. You can import the specific module and handle initialization manually, or use the main MICL library for automatic initialization.
+### JavaScript
+This component requires JavaScript for interactive features like the **ripple effect** and **toggle logic**:
 
-To manually initialize the component:
-
-```TypeScript
-import miclIconButton from 'material-inspired-component-library/components/button';
-
-miclIconButton.initialize(document.querySelector('.micl-iconbutton-standard-s'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Icon button component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available for you to interact with.
 

package/components/iconbutton/index.scss

@@ -19,8 +19,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/ripple';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 
 button.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,

package/components/list/README.md

@@ -24,20 +24,18 @@ 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 "material-inspired-component-library/components/list";
+@use "material-inspired-component-library/dist/list";
 ```
 
-### TypeScript
-This component requires a TypeScript module to support keyboard navigation. You can import the specific module or use the main MICL TypeScript library, which handles initialization automatically.
+### JavaScript
+This component requires JavaScript to support keyboard navigation:
 
-To manually initialize the component:
-
-```TypeScript
-import miclList from 'material-inspired-component-library/components/list';
-
-miclList.initialize(document.querySelector('.micl-list'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any List component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [List component](https://henkpb.github.io/micl/list.html) is available for you to interact with.
 
@@ -61,6 +59,20 @@ The List component offers three CSS classes to control the height and content ca
 </ul>
 ```
 
+Use the anchor element to convert a list item into a hyperlink:
+
+```HTML
+<ul class="micl-list" role="listbox">
+  <li class="micl-list-item-one" tabindex="0">
+    <a href="https://www.thetimes.com" tabindex="-1">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">The Times</span>
+      </span>
+    </a>
+  </li>
+</ul>
+```
+
 Adding the `micl-list-item--disabled` class to the `<li>` element causes the list item to be displayed in a disabled state.
 
 Add the `micl-list__divider` class to the `<ul>` element to automatically place a divider between each list item.
@@ -79,10 +91,10 @@ The text content of a list item can be preceded by various media elements:
   </li>
   ```
 
-- **Avatar**: Use `micl-list-item__avatar` with an avatar image (or icon).
+- **Avatar**: Use `micl-list-item__avatar` with a text.
   ```HTML
   <li class="micl-list-item-two" tabindex="0">
-    <span class="material-symbols-outlined micl-list-item__avatar">account_circle</span>
+    <span class="micl-list-item__avatar">BJ</span>
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">Bill Jones</span>
       <span class="micl-list-item__supporting-text">bill.jones@email.com</span>
@@ -113,35 +125,51 @@ The text content of a list item can be preceded by various media elements:
   ```
 
 ### Trailing Content
-The text of a list item may be followed by a trailing text or other elements (like a checkbox).
+The text of a list item may be followed by a trailing text, imagery or other elements (like a checkbox).
 
-```HTML
-<li class="micl-list-item-one" tabindex="0">
-  <span class="micl-list-item__text">
-    <span class="micl-list-item__headline">To-do items</span>
-  </span>
-  <span class="micl-list-item__trailing-text">100+</span>
-</li>
-````
+- **Icon**: Use `micl-list-item__icon` with a (Material Symbols) icon.
+  ```HTML
+  <li class="micl-list-item-two" tabindex="0">
+    <span class="micl-list-item__text">
+      <span class="micl-list-item__headline">Date and time</span>
+      <span class="micl-list-item__supporting-text">Timezones, calendar display</span>
+    </span>
+    <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">more_horiz</span>
+  </li>
+  ```
+
+- **Text**: Use `micl-list-item__trailing-text` with a short text.
+  ```HTML
+  <li class="micl-list-item-one" tabindex="0">
+    <span class="micl-list-item__text">
+      <span class="micl-list-item__headline">To-do items</span>
+    </span>
+    <span class="micl-list-item__trailing-text">100+</span>
+  </li>
+  ````
 
 ### Selecting List Items
-To enable selection of list items, integrate a checkbox component within the `<li>` element. The `micl-list-item__text` should typically wrap the headline and supporting text, acting as the label for the checkbox.
+To enable selection of list items, integrate a checkbox or switch component within the `<li>` element.
 
 ```HTML
 <ul class="micl-list micl-list__divider" role="listbox">
   <li class="micl-list-item-two" tabindex="0">
-    <label for="checkbox1" class="micl-list-item__text">
-      <span class="micl-list-item__headline">Blue car</span>
-      <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
-    </label>
-    <input type="checkbox" id="checkbox1" class="micl-checkbox" value="cb1" tabindex="-1">
+    <label>
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Blue car</span>
+        <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
+      </label>
+      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1">
+    </span>
   </li>
   <li class="micl-list-item-two" tabindex="0">
-    <label for="checkbox2" class="micl-list-item__text">
-      <span class="micl-list-item__headline">Red car</span>
-      <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
+    <label>
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Red car</span>
+        <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
+      </label>
+      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1">
     </label>
-    <input type="checkbox" id="checkbox2" class="micl-checkbox" value="cb2" tabindex="-1">
   </li>
 </ul>
 ```