material-inspired-component-library 1.0.2 → 1.1.0

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 ✅
@@ -97,3 +97,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,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/slider/{slider.scss → index.scss}

@@ -25,6 +25,7 @@
 @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 +49,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 +105,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 +145,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 +198,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,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,47 +26,83 @@ 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.
 
 ```HTML
 <div class="micl-textfield-filled">
-  <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
+  <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
   <label for="mytextfield">Label text</label>
-  <span class="micl-textfield__prefix">$</span>
-  <input type="text" id="mytextfield" maxlength="20">
-  <span class="micl-textfield__suffix">kg</span>
-  <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
-  <span class="micl-textfield__supporting-text">Supporting text</span>
+  <span class="micl-textfield__prefix" aria-label="US dollars">$</span>
+  <input type="text" id="mytextfield" maxlength="20" aria-describedby="mysupport">
+  <span class="micl-textfield__suffix" aria-label="kilograms">kg</span>
+  <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
+  <span id="mysupport" class="micl-textfield__supporting-text">Supporting text</span>
   <span class="micl-textfield__character-counter"></span>
 </div>
 ```
 
 The `<input>` element can have the following types: `text`, `date`, `datetime-local`, `email`, `month`, `number`, `password`, `tel`, `time`, `url` and `week`.
 
-Two icons may be included in the layout: a **leading icon** (an element containing the `micl-textfield__icon-leading` class), and a **trailing icon** (an element containing the `micl-textfield__icon-trailing` class).
+Adding the `disabled` boolean attribute to the `<input>` element causes the text field to be displayed in a disabled state.
+
+Adding the `micl-textfield--error` class to the text field displays it in an error state.
 
-A **prefix** (e.g., "$") and a **suffix** (e.g., "kg") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+### Leading Content
+The data-input element can be preceded by various elements:
 
-```HTML
-<span class="micl-textfield__prefix" style="--md-sys-textfield-prefix-space:20px">USD</span>
-<span class="micl-textfield__suffix" style="--md-sys-textfield-suffix-space:10em">@gmail.com</span>
-```
+- **Icon**: Use `micl-textfield__icon-leading` with a (Material Symbols) icon.
 
-Use an element with the `micl-textfield__supporting-text` class to add extra information about the text field.
+- **Prefix**: A prefix (e.g., "$", "NOK") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+  ```HTML
+  <span class="micl-textfield__prefix" style="--md-sys-textfield-prefix-space:20px">USD</span>
+  ```
+
+### Trailing Content
+The data-input element may be followed by a trailing text or other element:
+
+- **Icon**: Use `micl-textfield__icon-trailing` with a (Material Symbols) icon.
+
+- **Suffix**: A suffix (e.g., "kg", "@gmail.com") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+  ```HTML
+  <span class="micl-textfield__suffix" style="--md-sys-textfield-suffix-space:10em">@gmail.com</span>
+  ```
+
+### Supporting Content
+Use an element with the `micl-textfield__supporting-text` class to add extra information about the text field. If you want this element only to be visible when the text field is focused, add the `micl-textfield__supporting-text--focus` as well.
 
 If the `<input>` element includes the `maxlength` attribute, the **character counter** will display automatically in the element with the `micl-textfield__character-counter` class.
 
-Adding the `disabled` boolean attribute to the `<input>` element causes the text field to be displayed in a disabled state.
+### Multi-line Text Field
+Replace the `<input>` element with the `<textarea>` element to create a multi-line text field:
 
-Adding the `micl-textfield--error` class to the text field displays it in an error state.
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="mytextfield">Label text</label>
+  <textarea id="mytextfield"></textarea>
+</div>
+```
+
+Add a value to the `rows` attribute of the `<textarea>` element to create a text field of fixed height:
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="mytextfield">Label text</label>
+  <textarea id="mytextfield" rows="4"></textarea>
+</div>
+```
 
 ## Compatibility
 This component uses relative RGB colors, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.
+
+The multi-line text field variant uses the `field-sizing` CSS property, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing#browser_compatibility) for details.