material-inspired-component-library 3.0.2 → 3.1.0

package/components/checkbox/index.ts

@@ -0,0 +1,148 @@
+//
+// 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.
+
+export const checkboxGroupSelector = '.micl-checkbox-group';
+
+export default (() =>
+{
+    const getParentCheckbox = (checkboxGroup: HTMLElement): HTMLInputElement | null =>
+    {
+        const parentCheckbox = checkboxGroup.querySelector<HTMLInputElement>('.micl-checkbox__parent');
+        return (parentCheckbox?.closest(checkboxGroupSelector) === checkboxGroup) ? parentCheckbox : null;
+    };
+
+    const refreshParentCheckbox = (checkboxGroup: HTMLElement): boolean =>
+    {
+        const parentCheckbox = getParentCheckbox(checkboxGroup);
+        if (!parentCheckbox) {
+            return false;
+        }
+        let nrCheckboxes = 0,
+            nrCheckedCheckboxes = 0;
+
+        checkboxGroup.querySelectorAll<HTMLInputElement>(
+            'input[type="checkbox"].micl-checkbox'
+        ).forEach(cb =>
+        {
+            if (cb !== parentCheckbox) {
+                const group = cb.closest(checkboxGroupSelector) as HTMLElement;
+                if (group === checkboxGroup) {
+                    nrCheckboxes++;
+                    if (cb.checked && !cb.indeterminate) {
+                        nrCheckedCheckboxes++;
+                    }
+                }
+                else if (
+                    cb.classList.contains('micl-checkbox__parent')
+                    && (group?.parentElement?.closest(checkboxGroupSelector) === checkboxGroup)
+                ) {
+                    nrCheckboxes++;
+                    if (refreshParentCheckbox(group)) {
+                        nrCheckedCheckboxes++;
+                    }
+                }
+            }
+        });
+
+        if (nrCheckedCheckboxes === 0) {
+            parentCheckbox.checked = false;
+            parentCheckbox.indeterminate = false;
+        }
+        else if (nrCheckedCheckboxes === nrCheckboxes) {
+            parentCheckbox.checked = true;
+            parentCheckbox.indeterminate = false;
+        }
+        else {
+            parentCheckbox.checked = true;
+            parentCheckbox.indeterminate = true;
+        }
+
+        return nrCheckedCheckboxes === nrCheckboxes;
+    };
+
+    const updateCheckboxGroup = (checkboxGroup: HTMLElement, checked: boolean): void =>
+    {
+        checkboxGroup.querySelectorAll<HTMLInputElement>(
+            'input[type="checkbox"].micl-checkbox'
+        ).forEach(cb =>
+        {
+            const group = cb.closest(checkboxGroupSelector) as HTMLElement;
+            if (group === checkboxGroup) {
+                cb.checked = checked;
+            }
+            else if (
+                cb.classList.contains('micl-checkbox__parent')
+                && (group?.parentElement?.closest(checkboxGroupSelector) === checkboxGroup)
+            ) {
+                cb.checked = checked;
+                updateCheckboxGroup(group, checked);
+            }
+        });
+    };
+
+    const refreshCheckboxGroup = (checkboxGroup: HTMLElement, input: HTMLInputElement | null): void =>
+    {
+        const parentCheckbox = getParentCheckbox(checkboxGroup);
+        if (!parentCheckbox) {
+            return;
+        }
+
+        if (input === parentCheckbox) {
+            updateCheckboxGroup(checkboxGroup, input.checked);
+        }
+
+        let parentCheckboxGroup,
+            cbg = checkboxGroup;
+        do {
+            parentCheckboxGroup = cbg;
+            cbg = cbg.parentElement?.closest(checkboxGroupSelector) as HTMLElement;
+        }
+        while (cbg);
+
+        refreshParentCheckbox(parentCheckboxGroup);
+    };
+
+    return {
+        initialize: (element: HTMLElement): void =>
+        {
+            if (
+                !element.matches(checkboxGroupSelector)
+                || element.dataset.miclinitialized
+            ) {
+                return;
+            }
+            element.dataset.miclinitialized = '1';
+
+            element.addEventListener('change', event =>
+            {
+                const input = event.target as HTMLInputElement;
+                if (!input.classList.contains('micl-checkbox')) {
+                    return;
+                }
+                event.stopPropagation();
+
+                refreshCheckboxGroup(element, input);
+            });
+
+            refreshCheckboxGroup(element, null);
+        }
+    };
+})();

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/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/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.ts

@@ -19,96 +19,135 @@
 // 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): HTMLElement | null =>
+    const getCurrentStep = (stepper: HTMLElement): StepperStep | null =>
     {
-        let step = stepper.querySelector('.micl-stepper__step--current') as HTMLElement;
+        let step = stepper.querySelector('.micl-stepper__step--current') as StepperStep;
         if (step) {
             return step;
         }
-        step = stepper.querySelector('.micl-stepper__step') as HTMLElement;
-        if (!step) {
-            return null;
+        step = stepper.querySelector('.micl-stepper__step') as StepperStep;
+        if (step) {
+            step.classList.add('micl-stepper__step--current');
         }
-        step.classList.add('micl-stepper__step--current');
         return step;
     };
 
     const endTransitionCurrent = (event: Event): void =>
     {
-        if (!event.currentTarget || ((event as TransitionEvent).propertyName !== 'transform')) {
+        const target = event.currentTarget as Element;
+        if ((event as TransitionEvent).propertyName !== 'transform' || !target) {
             return;
         }
-        (event.currentTarget as Element).classList.remove(
+        target.classList.remove(
             'micl-stepper__step--fromcurrent',
             'micl-stepper__step--tocurrent'
         );
-        event.currentTarget.removeEventListener('transitionend', endTransitionCurrent);
+        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 showHideActions = (actions: HTMLElement[], step: HTMLElement | null): void =>
+    const showHideElements = (stepper: HTMLElement, step: StepperStep): void =>
     {
-        step && actions.forEach(action =>
+        const stepIdentifier = step.dataset.miclstep;
+
+        stepIdentifier && stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
         {
-            action.classList.toggle('micl-hidden', !step[
-                action.classList.contains('micl-stepper--gonext') ?
-                'nextElementSibling' : 'previousElementSibling'
-            ]?.classList.contains('micl-stepper__step'));
+            const shouldHide = element.dataset.step !== stepIdentifier;
+            element.classList.toggle('micl-hidden', shouldHide);
         });
     };
 
-    const showHideElements = (stepper: HTMLElement, step: HTMLElement): void =>
+    const checkGroupValidity= (parent: HTMLElement | null): boolean =>
     {
-        stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
+        if (!parent) {
+            return true;
+        }
+        const groups = parent.querySelectorAll<HTMLFieldSetElement>(
+            'fieldset.micl-checkbox-group[data-miclname]'
+        )
+
+        return Array.from(groups).every(fieldset =>
         {
-            element.classList.toggle('micl-hidden', element.dataset.step !== step.dataset.miclstep);
+            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 =>
     {
-        let currentStep = getCurrentStep(stepper);
-        if (currentStep) {
-            currentStep.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(
-                'input:required,select:required,textarea:required'
-            ).forEach(input =>
-            {
-                if (!input.checkValidity()) {
-                    currentStep = null;
-                }
-            });
+        const currentStep = getCurrentStep(stepper);
+        if (!currentStep) {
+            return null;
+        }
+        let isValid = true;
 
-            currentStep?.querySelectorAll<HTMLFieldSetElement>(
-                'fieldset.micl-checkbox-group[data-miclname]'
-            ).forEach(fieldset =>
-            {
-                let nrChecked = 0;
-                fieldset.querySelectorAll<HTMLInputElement>(
-                    `.micl-checkbox[name="${fieldset.dataset.miclname}"]`
-                ).forEach(checkbox =>
-                {
-                    if (checkbox.checked) {
-                        nrChecked++;
-                    }
-                });
-                if (nrChecked === 0) {
-                    console.log("NOT ENGOUGH CHECKS");
-                }
-            });
+        currentStep.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(
+            'input,select,textarea'
+        ).forEach(element =>
+        {
+            if (!element.checkValidity()) {
+                isValid = false;
+            }
+        });
+
+        if (!checkGroupValidity(currentStep)) {
+            isValid = false;
         }
-        return currentStep;
+
+        return isValid ? currentStep : null;
     };
 
     return {
         initialize: (stepper: HTMLElement): void =>
         {
-            if (
-                !stepper.matches(stepperSelector)
-                || stepper.dataset.miclinitialized
-            ) {
+            if (!stepper.matches(stepperSelector) || stepper.dataset.miclinitialized) {
                 return;
             }
             stepper.dataset.miclinitialized = '1';
@@ -118,46 +157,70 @@ export default (() =>
                 step.dataset.miclstep = `${index + 1}`;
             });
 
-            const
-                step    = getCurrentStep(stepper),
-                actions = stepper.querySelectorAll<HTMLButtonElement>(
-                    'button.micl-stepper--goback,button.micl-stepper--gonext'
-                );
-            showHideActions([...actions], step);
-            step && showHideElements(stepper, step);
+            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);
+            }
 
-            actions.forEach(action =>
+            backActions.forEach(action =>
             {
-                action.addEventListener('click', () =>
+                action.addEventListener('click', (event: Event) =>
                 {
-                    const currentStep = checkStepValidity(stepper);
+                    const currentStep = getCurrentStep(stepper);
                     if (!currentStep) {
                         return;
                     }
-                    const
-                        goNext  = action.classList.contains('micl-stepper--gonext'),
-                        sibling = currentStep[
-                            goNext ? 'nextElementSibling' : 'previousElementSibling'
-                        ] as HTMLElement;
+                    const sibling = currentStep['previousElementSibling'] as StepperStep;
 
                     if (sibling?.classList.contains('micl-stepper__step')) {
-                        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;
+                        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;
 
-                        showHideActions([...actions], sibling);
+                    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/textfield/index.ts

@@ -84,10 +84,9 @@ export default (() =>
             if (input instanceof HTMLSelectElement) {
                 input.addEventListener('mousedown', () =>
                 {
-                    const
-                        rect      = input.getBoundingClientRect(),
-                        roomAbove = rect.top,
-                        roomBelow = window.innerHeight - rect.bottom;
+                    const rect      = input.getBoundingClientRect();
+                    const roomAbove = rect.top;
+                    const roomBelow = window.innerHeight - rect.bottom;
 
                     !input.matches(':open') && input.style.setProperty(
                         '--md-sys-select-picker-origin',

package/dist/alert.css

@@ -0,0 +1 @@
+:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-ref-typeface-plain: Roboto, system-ui, sans-serif;--md-ref-typeface-brand: Roboto, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0;--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem;--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}:root{--md-sys-alert-padding: 16px;--md-sys-alert-space: 16px}.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined{--md-sys-alert-background-color: inherit;--md-sys-alert-color: inherit;box-sizing:border-box;display:flex;inline-size:100%;padding:var(--md-sys-alert-padding, 16px);column-gap:var(--md-sys-alert-space, 8px);border:none;outline:none;border-radius:var(--md-sys-shape-corner-small, 8px);background-color:var(--md-sys-alert-background-color);color:var(--md-sys-alert-color)}.micl-alert-filled .micl-alert__icon,.micl-alert-tonal .micl-alert__icon,.micl-alert-outlined .micl-alert__icon{block-size:var(--md-sys-layout-icon-size, 24px);inline-size:var(--md-sys-layout-icon-size, 24px);font-size:var(--md-sys-layout-icon-size, 24px)}.micl-alert-filled .micl-alert__text,.micl-alert-tonal .micl-alert__text,.micl-alert-outlined .micl-alert__text{display:flex;flex-direction:column;row-gap:8px}.micl-alert-filled .micl-alert__text h1,.micl-alert-filled .micl-alert__text h2,.micl-alert-filled .micl-alert__text h3,.micl-alert-filled .micl-alert__text h4,.micl-alert-filled .micl-alert__text h5,.micl-alert-filled .micl-alert__text h6,.micl-alert-filled .micl-alert__text .micl-heading,.micl-alert-tonal .micl-alert__text h1,.micl-alert-tonal .micl-alert__text h2,.micl-alert-tonal .micl-alert__text h3,.micl-alert-tonal .micl-alert__text h4,.micl-alert-tonal .micl-alert__text h5,.micl-alert-tonal .micl-alert__text h6,.micl-alert-tonal .micl-alert__text .micl-heading,.micl-alert-outlined .micl-alert__text h1,.micl-alert-outlined .micl-alert__text h2,.micl-alert-outlined .micl-alert__text h3,.micl-alert-outlined .micl-alert__text h4,.micl-alert-outlined .micl-alert__text h5,.micl-alert-outlined .micl-alert__text h6,.micl-alert-outlined .micl-alert__text .micl-heading{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);margin:0}.micl-alert-filled .micl-alert__text .micl-alert__supporting-text,.micl-alert-tonal .micl-alert__text .micl-alert__supporting-text,.micl-alert-outlined .micl-alert__text .micl-alert__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);margin:0}.micl-alert-filled{--md-sys-alert-background-color: var(--md-sys-color-error);--md-sys-alert-color: var(--md-sys-color-on-error)}.micl-alert-filled.micl-alert--primary{--md-sys-alert-background-color: var(--md-sys-color-primary);--md-sys-alert-color: var(--md-sys-color-on-primary)}.micl-alert-filled.micl-alert--secondary{--md-sys-alert-background-color: var(--md-sys-color-secondary);--md-sys-alert-color: var(--md-sys-color-on-secondary)}.micl-alert-filled.micl-alert--tertiary{--md-sys-alert-background-color: var(--md-sys-color-tertiary);--md-sys-alert-color: var(--md-sys-color-on-tertiary)}.micl-alert-tonal{--md-sys-alert-background-color: var(--md-sys-color-error-container);--md-sys-alert-color: var(--md-sys-color-on-error-container)}.micl-alert-tonal.micl-alert--primary{--md-sys-alert-background-color: var(--md-sys-color-primary-container);--md-sys-alert-color: var(--md-sys-color-on-primary-container)}.micl-alert-tonal.micl-alert--secondary{--md-sys-alert-background-color: var(--md-sys-color-secondary-container);--md-sys-alert-color: var(--md-sys-color-on-secondary-container)}.micl-alert-tonal.micl-alert--tertiary{--md-sys-alert-background-color: var(--md-sys-color-tertiary-container);--md-sys-alert-color: var(--md-sys-color-on-tertiary-container)}.micl-alert-outlined{--md-sys-alert-color: var(--md-sys-color-error);border:1px solid var(--md-sys-alert-color)}.micl-alert-outlined.micl-alert--primary{--md-sys-alert-color: var(--md-sys-color-primary)}.micl-alert-outlined.micl-alert--secondary{--md-sys-alert-color: var(--md-sys-color-secondary)}.micl-alert-outlined.micl-alert--tertiary{--md-sys-alert-color: var(--md-sys-color-tertiary)}

package/dist/alert.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.micl=o():e.micl=o()}(self,()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());