material-inspired-component-library 3.0.1 → 3.1.0

package/components/list/index.scss

@@ -308,8 +308,8 @@
 }
 
 .micl-list-item__icon {
-    min-width: 24px;
-    font-size: 24px;
+    min-width: var(--md-sys-layout-icon-size, 24px);
+    font-size: var(--md-sys-layout-icon-size, 24px);
     font-variation-settings: 'FILL' 0;
     color: var(--md-sys-color-on-surface-variant);
     transition: font-variation-settings var(--md-sys-list-motion-duration) linear;

package/components/list/index.ts

@@ -23,9 +23,8 @@ export const listSelector = '.micl-list-item-one,.micl-list-item-two,.micl-list-
 
 export default (() =>
 {
-    const
-        isDisabled = (item: HTMLElement | null): boolean => !!item && item.classList.contains('micl-list-item--disabled'),
-        isSelected = (item: HTMLElement | null): boolean => !!item && item.matches(':has(input[type=checkbox]:checked)');
+    const isDisabled = (item: HTMLElement | null): boolean => !!item && item.classList.contains('micl-list-item--disabled');
+    const isSelected = (item: HTMLElement | null): boolean => !!item && item.matches(':has(input[type=checkbox]:checked)');
 
     return {
         keydown: (event: Event) =>

package/components/menu/index.ts

@@ -25,8 +25,8 @@ export default (() =>
 {
     const getOrigin = (invoker: Element, popover: Element): string =>
     {
-        const invokerRect = invoker.getBoundingClientRect(),
-              popoverRect = popover.getBoundingClientRect();
+        const invokerRect = invoker.getBoundingClientRect();
+        const popoverRect = popover.getBoundingClientRect();
 
         return ((invokerRect.x > popoverRect.x) ? 'right ' : 'left ') +
                ((invokerRect.y > popoverRect.y) ? 'bottom' : 'top');

package/components/navigationrail/index.scss

@@ -43,6 +43,8 @@
     --md-sys-navigationrail-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
     --md-sys-navigationrail-morph-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-navigationrail-morph-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-badge-inline-offset: -16px;
+    --md-sys-badge-block-offset: 4px;
 
     box-sizing: border-box;
     display: flex;
@@ -91,6 +93,7 @@
 
             box-sizing: border-box;
             display: flex;
+            position: relative;
             flex-direction: column;
             align-items: center;
             block-size: var(--md-sys-navigationrail-item-height);
@@ -115,8 +118,8 @@
             &> .micl-navigationrail__icon {
                 --micl-ripple: 1;
 
-                font-size: 24px;
-                inline-size: 24px;
+                font-size: var(--md-sys-layout-icon-size, 24px);
+                inline-size: var(--md-sys-layout-icon-size, 24px);
                 margin: 0;
                 padding-block: 4px;
                 padding-inline: 16px;
@@ -173,7 +176,6 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         row-gap: 0px;
 
         &> label.micl-navigationrail__item {
-            position: relative;
             flex-direction: row;
             inline-size: fit-content;
 

package/components/radio/README.md

@@ -29,7 +29,7 @@ A radio button can be disabled by adding the `disabled` attribute to the `<input
 
 The Radio Button component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
 
-By default, the component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
+The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
 
 ## Customizations
 You can customize the appearance of the Radio Button component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child radio buttons.

package/components/radio/index.scss

@@ -85,9 +85,10 @@ input[type=radio].micl-radio {
             background-size 3000ms,
             --statelayer-opacity var(--md-sys-radio-motion-duration) linear;
 
-        &:hover {
+        &:hover,
+        &:focus-visible,
+        &:active {
             --statelayer-color: var(--md-sys-color-on-surface);
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
             &:checked {
                 --statelayer-color: var(--md-sys-color-primary);
@@ -99,38 +100,19 @@ input[type=radio].micl-radio {
                 border-color: var(--md-sys-color-primary);
             }
         }
+        &:hover {
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+        }
         &:focus-visible {
-            --statelayer-color: var(--md-sys-color-on-surface);
             --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
 
             outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-
-            &:checked {
-                --statelayer-color: var(--md-sys-color-primary);
-            }
-            &::after {
-                border-color: var(--md-sys-color-on-surface);
-            }
-            &:checked::after {
-                border-color: var(--md-sys-color-primary);
-            }
         }
         &:active {
-            --statelayer-color: var(--md-sys-color-on-surface);
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
 
             background-size: 0%, 100%;
             transition: background-size 0ms;
-
-            &:checked {
-                --statelayer-color: var(--md-sys-color-primary);
-            }
-            &::after {
-                border-color: var(--md-sys-color-on-surface);
-            }
-            &:checked::after {
-                border-color: var(--md-sys-color-primary);
-            }
         }
     }
     &:disabled {

package/components/select/index.scss

@@ -62,7 +62,8 @@
         background-color: var(--md-sys-color-surface-container);
         box-shadow: var(--md-sys-elevation-level2);
         opacity: 0;
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
         transform: scaleY(0);
         transform-origin: var(--md-sys-select-picker-origin);
         transition:
@@ -130,7 +131,9 @@
             content: attr(aria-description);
             display: block;
             color: var(--md-sys-color-on-surface-variant);
-            white-space: normal;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
         &::checkmark {
             color: var(--md-sys-color-on-surface-variant);

package/components/slider/index.scss

@@ -261,7 +261,7 @@ input[type=range].micl-slider-xl {
 
 .micl-slider__container {
     display: grid;
-    grid-template-areas: "slidericon";
+    grid-template-areas: "slider-icon";
     flex-shrink: 0;
     align-items: center;
     justify-items: flex-start;
@@ -269,16 +269,16 @@ input[type=range].micl-slider-xl {
 
     &:has(> .micl-slider-m,> .micl-slider-l,> .micl-slider-xl) {
         .micl-slider__icon {
-            grid-area: slidericon;
+            grid-area: slider-icon;
             inset: 0;
             margin: 6px;
-            font-size: 24px;
+            font-size: var(--md-sys-layout-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
             z-index: 1;
         }
     }
     &> input[type=range] {
-        grid-area: slidericon;
+        grid-area: slider-icon;
     }
     .micl-slider__icon:has(+ input[type=range].micl-slider-xl),
     input[type=range].micl-slider-xl + .micl-slider__icon {

package/components/slider/index.ts

@@ -97,18 +97,17 @@ export default (() =>
             setValue(element);
             setVars(element);
 
-            const
-                max  = parseFloat(element.max),
-                min  = parseFloat(element.min),
-                rect = element.getBoundingClientRect(),
-                percentages = getTickValues(element, max, min).sort((a, b) => a - b).map(value => {
-                    return Math.round(100 * (value - min) / (max - min));
-                });
+            const max  = parseFloat(element.max);
+            const min  = parseFloat(element.min);
+            const rect = element.getBoundingClientRect();
+            const percentages = getTickValues(element, max, min).sort((a, b) => a - b).map(value => {
+                return Math.round(100 * (value - min) / (max - min));
+            });
 
             if (percentages.length > 0) {
-                const
-                    canvas = document.createElement('canvas'),
-                    ctx    = canvas.getContext('2d');
+                const canvas = document.createElement('canvas');
+                const ctx    = canvas.getContext('2d');
+
                 if (ctx) {
                     ctx.font = window.getComputedStyle(element).getPropertyValue('font');
                     let blankWidth   = ctx.measureText(blank).width,

package/components/stepper/index.scss

@@ -0,0 +1,85 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../layout';
+@use '../../styles/motion';
+
+:root {
+    --md-sys-stepper-thickness: 1px;
+}
+
+.micl-stepper {
+    --md-sys-stepper-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-sys-stepper-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --md-sys-stepper-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--md-sys-layout-padding-xl, 24px);
+    background-color: inherit;
+
+    .micl-stepper__steps {
+        display: grid;
+        grid-template-areas: "stepper-steps";
+        overflow-x: hidden;
+        background-color: inherit;
+
+        .micl-stepper__step {
+            grid-area: stepper-steps;
+            display: flex;
+            visibility: hidden;
+            flex-direction: column;
+            justify-content: space-between;
+            opacity: 0%;
+            background-color: inherit;
+            transform: translateX(100%);
+            transition:
+                opacity var(--md-sys-stepper-motion-duration) linear,
+                transform var(--md-sys-stepper-motion-duration) var(--md-sys-stepper-motion-spatial);
+
+            &:has(~ .micl-stepper__step--current) {
+                transform: translateX(-100%);
+            }
+            &.micl-stepper__step--tocurrent {
+                visibility: visible;
+            }
+            &.micl-stepper__step--current {
+                visibility: visible;
+                opacity: 100%;
+                transform: translateX(0%);
+            }
+            &.micl-stepper__step--fromcurrent {
+                visibility: visible;
+            }
+
+            .micl-stepper__content {
+                box-sizing: border-box;
+                padding-inline: var(--md-sys-stepper-padding-inline);
+                background-color: inherit;
+            }
+        }
+    }
+    .micl-stepper__actions {
+        display: flex;
+        justify-content: space-between;
+    }
+}

package/components/stepper/index.ts

@@ -0,0 +1,226 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+type StepperAction = HTMLButtonElement & {
+    classList: { contains(token: string): boolean };
+    addEventListener(type: 'click', listener: (this: HTMLButtonElement, ev: MouseEvent) => any): void;
+};
+
+type StepperStep = HTMLElement & {
+    dataset               : { miclstep?: string };
+    nextElementSibling    : Element | null;
+    previousElementSibling: Element | null;
+};
+
+export const stepperSelector = '.micl-stepper';
+
+export default (() =>
+{
+    const getCurrentStep = (stepper: HTMLElement): StepperStep | null =>
+    {
+        let step = stepper.querySelector('.micl-stepper__step--current') as StepperStep;
+        if (step) {
+            return step;
+        }
+        step = stepper.querySelector('.micl-stepper__step') as StepperStep;
+        if (step) {
+            step.classList.add('micl-stepper__step--current');
+        }
+        return step;
+    };
+
+    const endTransitionCurrent = (event: Event): void =>
+    {
+        const target = event.currentTarget as Element;
+        if ((event as TransitionEvent).propertyName !== 'transform' || !target) {
+            return;
+        }
+        target.classList.remove(
+            'micl-stepper__step--fromcurrent',
+            'micl-stepper__step--tocurrent'
+        );
+        target.removeEventListener('transitionend', endTransitionCurrent);
+    };
+
+    const goToSibling = (currentStep: StepperStep, sibling: StepperStep): void =>
+    {
+        currentStep.addEventListener('transitionend', endTransitionCurrent);
+        currentStep.classList.add('micl-stepper__step--fromcurrent');
+        currentStep.offsetHeight;
+
+        sibling.addEventListener('transitionend', endTransitionCurrent);
+        sibling.classList.add('micl-stepper__step--tocurrent');
+        sibling.offsetHeight;
+
+        sibling.classList.add('micl-stepper__step--current');
+        currentStep.classList.remove('micl-stepper__step--current');
+        currentStep.offsetHeight;
+    };
+
+    const showHideActions = (actions: StepperAction[], step: StepperStep, back: boolean): void =>
+    {
+        actions.forEach(action =>
+        {
+            const siblingKey     = back ? 'previousElementSibling' : 'nextElementSibling';
+            const hasSiblingStep = (step[siblingKey] as Element)?.classList.contains('micl-stepper__step');
+
+            action.classList.toggle('micl-hidden', !hasSiblingStep);
+        });
+    };
+
+    const showHideElements = (stepper: HTMLElement, step: StepperStep): void =>
+    {
+        const stepIdentifier = step.dataset.miclstep;
+
+        stepIdentifier && stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
+        {
+            const shouldHide = element.dataset.step !== stepIdentifier;
+            element.classList.toggle('micl-hidden', shouldHide);
+        });
+    };
+
+    const checkGroupValidity= (parent: HTMLElement | null): boolean =>
+    {
+        if (!parent) {
+            return true;
+        }
+        const groups = parent.querySelectorAll<HTMLFieldSetElement>(
+            'fieldset.micl-checkbox-group[data-miclname]'
+        )
+
+        return Array.from(groups).every(fieldset =>
+        {
+            const name = fieldset.dataset.miclname;
+            if (!name) {
+                return;
+            }
+            const checkedCount = fieldset.querySelectorAll<HTMLInputElement>(
+                `input[type="checkbox"][name="${name}"]:checked`
+            ).length;
+
+            return checkedCount > 0;
+        });
+    };
+
+    const checkStepValidity = (stepper: HTMLElement): HTMLElement | null =>
+    {
+        const currentStep = getCurrentStep(stepper);
+        if (!currentStep) {
+            return null;
+        }
+        let isValid = true;
+
+        currentStep.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(
+            'input,select,textarea'
+        ).forEach(element =>
+        {
+            if (!element.checkValidity()) {
+                isValid = false;
+            }
+        });
+
+        if (!checkGroupValidity(currentStep)) {
+            isValid = false;
+        }
+
+        return isValid ? currentStep : null;
+    };
+
+    return {
+        initialize: (stepper: HTMLElement): void =>
+        {
+            if (!stepper.matches(stepperSelector) || stepper.dataset.miclinitialized) {
+                return;
+            }
+            stepper.dataset.miclinitialized = '1';
+
+            stepper.querySelectorAll<HTMLElement>('.micl-stepper__step').forEach((step, index) =>
+            {
+                step.dataset.miclstep = `${index + 1}`;
+            });
+
+            const step = getCurrentStep(stepper);
+            const backActions = Array.from(stepper.querySelectorAll<StepperAction>(
+                'button.micl-stepper--goback'
+            ));
+            const nextActions = Array.from(stepper.querySelectorAll<StepperAction>(
+                'button.micl-stepper--gonext'
+            ));
+
+            if (step) {
+                showHideActions(backActions, step, true);
+                showHideActions(nextActions, step, false);
+                showHideElements(stepper, step);
+            }
+
+            backActions.forEach(action =>
+            {
+                action.addEventListener('click', (event: Event) =>
+                {
+                    const currentStep = getCurrentStep(stepper);
+                    if (!currentStep) {
+                        return;
+                    }
+                    const sibling = currentStep['previousElementSibling'] as StepperStep;
+
+                    if (sibling?.classList.contains('micl-stepper__step')) {
+                        goToSibling(currentStep, sibling);
+                        showHideActions(backActions, sibling, true);
+                        showHideElements(stepper, sibling);
+                    }
+                }, true);
+            });
+            nextActions.forEach(action =>
+            {
+                action.addEventListener('click', (event: Event) =>
+                {
+                    const currentStep = checkStepValidity(stepper);
+                    if (!currentStep) {
+                        event.stopImmediatePropagation();
+                        return;
+                    }
+                    const sibling = currentStep['nextElementSibling'] as StepperStep;
+
+                    if (sibling?.classList.contains('micl-stepper__step')) {
+                        goToSibling(currentStep, sibling);
+                        showHideActions(nextActions, sibling, false);
+                        showHideElements(stepper, sibling);
+                    }
+                }, true);
+            });
+
+            if (stepper instanceof HTMLFormElement) {
+                stepper.addEventListener('submit', (event: SubmitEvent) =>
+                {
+                    if (!event.submitter?.classList.contains('micl-form--dosubmit')) {
+                        event.preventDefault();
+                    }
+
+                    const isValid = stepper.checkValidity() && checkGroupValidity(stepper);
+                    if (!isValid) {
+                        event.stopImmediatePropagation();
+                        return;
+                    }
+                }, true);
+            }
+        }
+    };
+})();

package/components/switch/README.md

@@ -1,5 +1,5 @@
 # Switch
-This component implements the the [Material Design 3 Expressive Switch](https://m3.material.io/components/switch/overview) design.
+This component implements the the [Material Design 3 Expressive Switch](https://m3.material.io/components/switch/overview) design. Switches toggle the state of a single setting on or off.
 
 ## Basic Usage
 
@@ -41,9 +41,31 @@ To remove the icon in the selected state:
 
 A switch can be disabled by adding the `disabled` attribute to the `<input>` element.
 
-The switch component is aware of the `dir` global attribute that indicates the directionality of text.
+The Switch component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
 
-Note that the component assigns a default color and `cursor: pointer` to the `<label>` element immediately preceding or immediately following the `<input>` element. Of course, you may change these CSS settings to something more appropriate.
+The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following the `<input type="checkbox">` with the `micl-switch` class. You are encouraged to customize these CSS settings to match your design system.
+
+## Customizations
+You can customize the appearance of the Switch component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child switches.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-switch-handle-size | 16px | The diameter of the handle when the switch is "off" |
+| --md-sys-switch-handle-selected-size | 24px | The diameter of the handle when the switch is "on" |
+| --md-sys-switch-handle-pressed-size | 28px | The diameter of the handle when the switch is pressed |
+| --md-sys-switch-outline-width | 2px | The width of the border |
+| --md-sys-switch-state-layer-size | 40px | Sets the size of the area that indicates the component's current state (e.g., hover, focus, press) |
+| --md-sys-switch-target-height | 32px | The height of the track |
+| --md-sys-switch-target-width | 52px | The width of the track |
+
+**Example: Changing the width of the switch**
+
+```HTML
+<div style="--md-sys-switch-target-width:64px">
+  <input type="checkbox" id="myswitch" class="micl-switch" role="switch">
+  <label for="myswitch">Long switch</label>
+</div>
+```
 
 ## Compatibility
-This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.
+This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.