material-inspired-component-library 1.0.3 → 1.1.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:
@@ -97,3 +94,9 @@ The library currently consists of the following components:
 - [x] [Slider](components/slider/README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
+
+## Change Log
+
+### 1.1.0 (12.08.2025)
+**Features**
+- **Text field**: Added support for multi-line text fields.

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.
 

package/components/list/index.scss

@@ -21,6 +21,8 @@
 
 @use '../../styles/motion';
 @use '../../styles/ripple';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
 :root {

package/components/menu/README.md

@@ -24,21 +24,19 @@ 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 "material-inspired-component-library/components/list";
-@use "material-inspired-component-library/components/menu";
+@use "material-inspired-component-library/dist/list";
+@use "material-inspired-component-library/dist/menu";
 ```
 
-### TypeScript
-This component requires the **Menu** TypeScript module for functionality. 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 functionality:
 
-To manually initialize the component:
-
-```TypeScript
-import miclMenu from 'material-inspired-component-library/components/menu';
-
-miclMenu.initialize(document.querySelector('.micl-menu'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Menu component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Menu component](https://henkpb.github.io/micl/menu.html) is available for you to interact with.
 

package/components/menu/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';
 
 .micl-menu[popover] {
     position: absolute;

package/components/radio/README.md

@@ -15,11 +15,11 @@ 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 "material-inspired-component-library/components/radio";
+@use "material-inspired-component-library/dist/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.
+### JavaScript
+No custom JavaScript is required for the core functionality of this component.
 
 ### Demo
 A live example of the [Radio button component](https://henkpb.github.io/micl/radio.html) is available for you to interact with.

package/components/radio/index.scss

@@ -21,6 +21,8 @@
 
 @use '../../styles/motion';
 @use '../../styles/ripple';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 
 :root {
     --md-sys-radio-border-width: 2px;

package/components/select/README.md

@@ -24,22 +24,20 @@ 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 "material-inspired-component-library/components/list";
-@use "material-inspired-component-library/components/textfield";
-@use "material-inspired-component-library/components/select";
+@use "material-inspired-component-library/dist/list";
+@use "material-inspired-component-library/dist/textfield";
+@use "material-inspired-component-library/dist/select";
 ```
 
-### TypeScript
-This component requires the **Text field** TypeScript module for functionality. 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 functionality:
 
-To manually initialize the component:
-
-```TypeScript
-import miclTextField from 'material-inspired-component-library/components/textfield';
-
-miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Select component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Select component](https://henkpb.github.io/micl/select.html) is available for you to interact with.
 

package/components/select/index.scss

@@ -19,8 +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/ripple';
+@use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 

package/components/sidesheet/README.md

@@ -27,11 +27,11 @@ To create a standard side sheet, use the `<dialog>` element with the `popover` a
 Import the side sheet styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/sidesheet";
+@use "material-inspired-component-library/dist/sidesheet";
 ```
 
-### TypeScript
-No custom TypeScript is required for the core functionality of the side sheet component.
+### JavaScript
+No custom JavaScript 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.

package/components/sidesheet/index.scss

@@ -19,7 +19,9 @@
 // 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/typography';
 
 dialog.micl-sidesheet {

package/components/slider/README.md

@@ -14,20 +14,18 @@ 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 "material-inspired-component-library/components/slider";
+@use "material-inspired-component-library/dist/slider";
 ```
 
-### TypeScript
-This component requires the **Slider** TypeScript module for functionality. 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 functionality:
 
-To manually initialize the component:
-
-```TypeScript
-import miclSlider from 'material-inspired-component-library/components/slider';
-
-miclSlider.initialize(document.querySelector('.micl-slider-m'));
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Slider component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Slider component](https://henkpb.github.io/micl/slider.html) is available for you to interact with.
 

package/components/slider/index.scss

@@ -20,11 +20,14 @@
 // SOFTWARE.
 
 @use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @mixin slider-track() {
     block-size: var(--md-sys-slider-track-height);
     border-radius: var(--md-sys-slider-track-radius);
+    background-color: inherit;
     background-image: linear-gradient(
         var(--md-sys-slider-track-direction),
         var(--md-sys-color-primary) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
@@ -48,13 +51,12 @@
     appearance: none;
     box-sizing: content-box;
     position: relative;
-    inline-size: 4px;
+    inline-size: 16px;
     block-size: var(--md-sys-slider-handle-height);
     inset: 0;
-    inset-block-start: calc(-1 * (var(--md-sys-slider-handle-height) + 2 * var(--md-sys-slider-thumb-space) - var(--md-sys-slider-track-height)) / 2);
-    border: var(--md-sys-slider-thumb-space) solid currentColor;
-    border-radius: 8px;
-    background-color: var(--md-sys-color-primary);
+    inset-block-start: calc(-1 * (var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height)) / 2);
+    background-color: inherit;
+    background-image: linear-gradient(to right,transparent 0px,transparent var(--md-sys-slider-thumb-space), var(--md-sys-color-primary) var(--md-sys-slider-thumb-space),var(--md-sys-color-primary) 10px,transparent 10px, transparent 16px);
     cursor: pointer;
     z-index: 2;
 }
@@ -105,7 +107,7 @@ input[type=range].micl-slider-xl {
     margin: 0;
     outline: none;
     color: var(--md-sys-color-surface-container-low);
-    background-color: transparent;
+    background-color: inherit;
     accent-color: var(--md-sys-color-primary);
 
     &::before {
@@ -145,6 +147,9 @@ input[type=range].micl-slider-xl {
         z-index: 3;
         transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
     }
+    &::-webkit-slider-container {
+        background-color: inherit;
+    }
     &::-webkit-slider-runnable-track {
         @include slider-track;
     }
@@ -195,12 +200,12 @@ input[type=range].micl-slider-xl {
     }
     &:not(:disabled):active {
         &::-webkit-slider-thumb {
-            inline-size: 2px;
+            background-image: linear-gradient(to right,transparent 0px, transparent calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px));
             outline: none;
             cursor: grabbing;
         }
         &::-moz-range-thumb {
-            inline-size: 2px;
+            background-image: linear-gradient(to right,transparent 0px, transparent calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px), var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(var(--md-sys-slider-thumb-space) + 3px), transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px));
             outline: none;
             cursor: grabbing;
         }

package/components/switch/README.md

@@ -15,11 +15,11 @@ To add a basic switch, use the `<input type="checkbox">` element with the `micl-
 Import the switch styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/switch";
+@use "material-inspired-component-library/dist/switch";
 ```
 
-### 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 [Switch component](https://henkpb.github.io/micl/switch.html) is available for you to interact with.