material-inspired-component-library 3.0.2 → 4.0.0

package/components/stepper/index.scss

@@ -19,11 +19,15 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../layout';
+@use '../../foundations/layout';
 @use '../../styles/motion';
 
 :root {
-    --md-sys-stepper-thickness: 1px;
+    --md-sys-stepper-counter-style: decimal;
+    --md-sys-stepper-dot-size: 12px;
+}
+body {
+    --md-sys-stepper-dot-done-color: var(--md-sys-color-tertiary-container, blue);
 }
 
 .micl-stepper {
@@ -35,8 +39,38 @@
     display: flex;
     flex-direction: column;
     row-gap: var(--md-sys-layout-padding-xl, 24px);
+    margin: 0;
     background-color: inherit;
 
+    .micl-stepper__header {
+        --md-sys-stepper-dot-size: 24px;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-inline: -10px;
+        background-color: inherit;
+        background-image: linear-gradient(90deg, var(--md-sys-divider-color), var(--md-sys-divider-color));
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 1px;
+        counter-reset: dotnumber;
+
+        button {
+            background-color: inherit;
+            pointer-events: none;
+
+            &.micl-stepper__progress--done {
+                pointer-events: inherit;
+            }
+        }
+        .micl-stepper__progress-dot::before {
+            content: counter(dotnumber, var(--md-sys-stepper-counter-style));
+        }
+    }
+    &.micl-stepper--nonlinear .micl-stepper__header button {
+        pointer-events: inherit;
+    }
     .micl-stepper__steps {
         display: grid;
         grid-template-areas: "stepper-steps";
@@ -48,7 +82,9 @@
             display: flex;
             visibility: hidden;
             flex-direction: column;
-            justify-content: space-between;
+            margin: 0;
+            padding: 0;
+            border: none;
             opacity: 0%;
             background-color: inherit;
             transform: translateX(100%);
@@ -56,30 +92,73 @@
                 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) {
+            &:has(~ .micl-stepper__step[aria-current=step]) {
                 transform: translateX(-100%);
             }
-            &.micl-stepper__step--tocurrent {
+            &.micl-stepper__step--toselected {
                 visibility: visible;
             }
-            &.micl-stepper__step--current {
+            &[aria-current=step] {
                 visibility: visible;
                 opacity: 100%;
                 transform: translateX(0%);
             }
-            &.micl-stepper__step--fromcurrent {
+            &.micl-stepper__step--fromselected {
                 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;
+        flex-direction: row;
+        justify-content: center;
+        inline-size: 100%;
+        align-items: center;
+
+        &>:first-child,
+        &>:last-child {
+            display: flex;
+            flex: 1 1 0;
+            column-gap: var(--md-sys-layout-padding-xs, 8px)
+        }
+        &>:last-child {
+            justify-content: flex-end;
+        }
+    }
+    .micl-stepper__progress-dots {
+        display: flex;
+        align-items: center;
+        column-gap: 4px;
+    }
+    .micl-stepper__progress-dot {
+        block-size: var(--md-sys-stepper-dot-size);
+        inline-size: var(--md-sys-stepper-dot-size);
+        min-inline-size: var(--md-sys-stepper-dot-size);
+        line-height: var(--md-sys-stepper-dot-size);
+        border-radius: calc(var(--md-sys-stepper-dot-size) / 2);
+        text-align: center;
+        background-color: var(--md-sys-color-on-surface);
+        color: var(--md-sys-color-surface);
+        opacity: 38%;
+        counter-increment: dotnumber 1;
+    }
+    .micl-stepper__progress--done.micl-stepper__progress-dot,
+    .micl-stepper__progress--done .micl-stepper__progress-dot {
+        background-color: var(--md-sys-stepper-dot-done-color);
+        color: var(--md-sys-color-on-tertiary-container);
+        opacity: 100%;
+    }
+}
+
+[dir=rtl] {
+    .micl-stepper .micl-stepper__steps .micl-stepper__step {
+        transform: translateX(-100%);
+
+        &:has(~ .micl-stepper__step[aria-current=step]) {
+            transform: translateX(100%);
+        }
+        &[aria-current=step] {
+            transform: translateX(0%);
+        }
     }
 }

package/components/stepper/index.ts

@@ -19,145 +19,226 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+import form from '../../foundations/form';
+
 export const stepperSelector = '.micl-stepper';
 
+const ACTIONS_SELECTOR = '.micl-stepper__action-back,.micl-stepper__action-next';
+const BUTTON_SELECTOR  = '.micl-stepper__header button[role=tab][aria-controls]';
+const STEP_CLASS       = 'micl-stepper__step';
+const STEP_SELECTOR    = '.' + STEP_CLASS;
+
 export default (() =>
 {
-    const getCurrentStep = (stepper: HTMLElement): HTMLElement | null =>
+    const getSelectedStep = (stepper: HTMLElement): HTMLElement | null =>
     {
-        let step = stepper.querySelector('.micl-stepper__step--current') as HTMLElement;
+        let step = stepper.querySelector(`${STEP_SELECTOR}[aria-current=step]`);
         if (step) {
-            return step;
+            return step as HTMLElement;
         }
-        step = stepper.querySelector('.micl-stepper__step') as HTMLElement;
+        return setSelectedStep(stepper, stepper.querySelector(STEP_SELECTOR));
+    };
+
+    const getStepNumber = (stepper: HTMLElement, step: HTMLElement): number =>
+    {
+        const allSteps = Array.from(stepper.querySelectorAll(STEP_SELECTOR));
+        const index    = allSteps.indexOf(step);
+
+        return index + 1;
+    };
+
+    const setSelectedStep = (stepper: HTMLElement, step: HTMLElement | null): HTMLElement | null =>
+    {
         if (!step) {
             return null;
         }
-        step.classList.add('micl-stepper__step--current');
+        let index = 0;
+        stepper.querySelectorAll(STEP_SELECTOR).forEach((e, i) =>
+        {
+            e.setAttribute('aria-current', e === step ? 'step' : 'false');
+            if (e === step) {
+                index = i;
+            }
+        });
+        const button = stepper.querySelectorAll(BUTTON_SELECTOR).item(index);
+        stepper.querySelectorAll(BUTTON_SELECTOR).forEach((e, i) =>
+        {
+            e.setAttribute('aria-selected', e === button ? 'true' : 'false');
+        });
+        refresh(stepper, step);
+
         return step;
     };
 
-    const endTransitionCurrent = (event: Event): void =>
+    const endTransitionSelected = (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(
-            'micl-stepper__step--fromcurrent',
-            'micl-stepper__step--tocurrent'
+        target.classList.remove(
+            'micl-stepper__step--fromselected',
+            'micl-stepper__step--toselected'
         );
-        event.currentTarget.removeEventListener('transitionend', endTransitionCurrent);
+        target.removeEventListener('transitionend', endTransitionSelected);
     };
 
-    const showHideActions = (actions: HTMLElement[], step: HTMLElement | null): void =>
+    const goToSibling = (stepper: HTMLElement, selectedStep: HTMLElement, sibling: HTMLElement): void =>
+    {
+        selectedStep.addEventListener('transitionend', endTransitionSelected);
+        selectedStep.classList.add('micl-stepper__step--fromselected');
+        selectedStep.offsetHeight;
+
+        sibling.addEventListener('transitionend', endTransitionSelected);
+        sibling.classList.add('micl-stepper__step--toselected');
+        sibling.offsetHeight;
+
+        setSelectedStep(stepper, sibling);
+    };
+
+    const isBackAction = (action: HTMLElement): boolean =>
+          action.classList.contains('micl-stepper__action-back');
+
+    const showHideActions = (stepper: HTMLElement, step: HTMLElement): void =>
     {
-        step && actions.forEach(action =>
+        Array.from(stepper.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR)).forEach(action =>
         {
-            action.classList.toggle('micl-hidden', !step[
-                action.classList.contains('micl-stepper--gonext') ?
-                'nextElementSibling' : 'previousElementSibling'
-            ]?.classList.contains('micl-stepper__step'));
+            const siblingKey = isBackAction(action) ? 'previousElementSibling' : 'nextElementSibling';
+            const hasSibling = (step[siblingKey] as Element)?.classList.contains(STEP_CLASS);
+
+            action.classList.toggle('micl-hidden', !hasSibling);
         });
     };
 
     const showHideElements = (stepper: HTMLElement, step: HTMLElement): void =>
     {
+        const selectedStep = getStepNumber(stepper, step);
+
         stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
         {
-            element.classList.toggle('micl-hidden', element.dataset.step !== step.dataset.miclstep);
+            const shouldHide = element.dataset.step != `${selectedStep}`;
+            element.classList.toggle('micl-hidden', shouldHide);
         });
     };
 
-    const checkStepValidity = (stepper: HTMLElement): HTMLElement | null =>
+    const updateProgress = (stepper: HTMLElement, step: HTMLElement): void =>
     {
-        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 index      = getStepNumber(stepper, step);
+        const totalSteps = stepper.querySelectorAll(STEP_SELECTOR).length;
+        const linear     = !stepper.classList.contains('micl-stepper--nonlinear');
+        const setText    = (selector: string, content: string): void => {
+            stepper.querySelectorAll(selector).forEach(e => { e.textContent = content; });
+        };
 
-            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");
+        setText('.micl-stepper__progress-current', `${index}`);
+        setText('.micl-stepper__progress-total', `${totalSteps}`);
+
+        stepper.querySelectorAll('.micl-stepper__progress-dots').forEach(dots =>
+        {
+            const fragment = document.createDocumentFragment();
+
+            dots.innerHTML = '';
+            for (let i = 1; i <= totalSteps; i++) {
+                let dot = document.createElement('span');
+                dot.classList.add('micl-stepper__progress-dot');
+                if ((linear && (i <= index)) || (!linear && (i === index))) {
+                    dot.classList.add('micl-stepper__progress--done');
                 }
-            });
-        }
-        return currentStep;
+                fragment.appendChild(dot);
+            }
+            dots.appendChild(fragment);
+        });
+        stepper.querySelectorAll(BUTTON_SELECTOR).forEach((button, i) =>
+        {
+            button.classList.toggle(
+                'micl-stepper__progress--done',
+                linear ? i + 1 <= index : i + 1 === index
+            );
+        });
+    };
+
+    const refresh = (stepper: HTMLElement, step: HTMLElement): void =>
+    {
+        showHideActions(stepper, step);
+        showHideElements(stepper, step);
+        updateProgress(stepper, step);
     };
 
     return {
         initialize: (stepper: HTMLElement): void =>
         {
-            if (
-                !stepper.matches(stepperSelector)
-                || stepper.dataset.miclinitialized
-            ) {
+            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   = getSelectedStep(stepper);
+            const header = stepper.querySelector('.micl-stepper__header');
 
-            const
-                step    = getCurrentStep(stepper),
-                actions = stepper.querySelectorAll<HTMLButtonElement>(
-                    'button.micl-stepper--goback,button.micl-stepper--gonext'
-                );
-            showHideActions([...actions], step);
-            step && showHideElements(stepper, step);
+            if (step) {
+                refresh(stepper, step);
 
-            actions.forEach(action =>
+                header?.querySelectorAll<HTMLButtonElement>(
+                    'button[role=tab][aria-controls]'
+                ).forEach(button =>
+                {
+                    button.addEventListener('click', () =>
+                    {
+                        if (
+                            ('ariaControlsElements' in Element.prototype)
+                            && button.ariaControlsElements
+                        ) {
+                            setSelectedStep(stepper, button.ariaControlsElements[0] as HTMLElement);
+                        }
+                        else {
+                            const id = button.getAttribute('aria-controls');
+                            if (id) {
+                                setSelectedStep(stepper, document.getElementById(id));
+                            }
+                        }
+                    });
+                });
+            }
+
+            Array.from(stepper.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR)).forEach(action =>
             {
-                action.addEventListener('click', () =>
+                action.addEventListener('click', function(event: Event)
                 {
-                    const currentStep = checkStepValidity(stepper);
-                    if (!currentStep) {
+                    const back         = isBackAction(this);
+                    const selectedStep = getSelectedStep(stepper);
+
+                    if (
+                        !selectedStep
+                        || (!back
+                            && selectedStep instanceof HTMLFieldSetElement
+                            && !form.validateFieldSet(selectedStep, true))
+                    ) {
+                        if (!back) {
+                            event.stopImmediatePropagation();
+                        }
                         return;
                     }
-                    const
-                        goNext  = action.classList.contains('micl-stepper--gonext'),
-                        sibling = currentStep[
-                            goNext ? 'nextElementSibling' : 'previousElementSibling'
-                        ] as HTMLElement;
-
-                    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;
-
-                        showHideActions([...actions], sibling);
-                        showHideElements(stepper, sibling);
+                    const sibling = selectedStep[
+                        back ? 'previousElementSibling' : 'nextElementSibling'
+                    ] as HTMLElement;
+
+                    if (sibling?.classList.contains(STEP_CLASS)) {
+                        goToSibling(stepper, selectedStep, sibling);
                     }
-                });
+                }, true);
             });
+
+            if (stepper instanceof HTMLFormElement) {
+                stepper.addEventListener('submit', (event: SubmitEvent) =>
+                {
+                    if (!event.submitter?.classList.contains('micl-form--dosubmit')) {
+                        event.preventDefault();
+                    }
+                    if (!form.validateForm(stepper, true)) {
+                        event.stopImmediatePropagation();
+                    }
+                }, 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. Switches toggle the state of a single setting on or off.
+This component implements 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
 
@@ -18,11 +18,16 @@ Import the switch styles into your project:
 @use "material-inspired-component-library/dist/switch";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Switch component](https://henkpb.github.io/micl/switch.html) is available for you to interact with.
+### Live Demo
+A live example of the [Switch component](https://henkpb.github.io/micl/switch.html) is available 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/switch/index.scss

@@ -48,6 +48,7 @@ input[type=checkbox].micl-switch {
     margin: 0;
     border-radius: calc(var(--md-sys-switch-target-height) / 2);
     outline: none;
+    -webkit-tap-highlight-color: transparent;
 
     &::before {
         content: "";
@@ -172,6 +173,7 @@ input[type=checkbox].micl-switch {
 
 input[type=checkbox].micl-switch:not(:disabled) + label,
 label:has(+ input[type=checkbox].micl-switch:not(:disabled)) {
+    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
 }
 input[type=checkbox].micl-switch + label,

package/components/textfield/README.md

@@ -1,5 +1,5 @@
 # Text field
-This component implements the the [Material Design 3 Expressive Text field](https://m3.material.io/components/text-fields/overview) design.
+This component implements the [Material Design 3 Expressive Text field](https://m3.material.io/components/text-fields/overview) design.
 
 ## Basic Usage
 
@@ -20,6 +20,11 @@ Import the text field styles into your project:
 @use "material-inspired-component-library/dist/textfield";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript for interactive features like the **character counter**:
 
@@ -29,8 +34,8 @@ import micl from "material-inspired-component-library/dist/micl";
 
 This will initialize any Text field component, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Text field component](https://henkpb.github.io/micl/textfield.html) is available for you to interact with.
+### Live Demo
+A live example of the [Text field component](https://henkpb.github.io/micl/textfield.html) is available 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.

package/components/textfield/index.ts

@@ -25,14 +25,9 @@ export const selectSelector = '.micl-textfield-filled > select,.micl-textfield-o
 
 export default (() =>
 {
-    const isRequiredType = (
-        eventTarget: EventTarget | null
-    ): eventTarget is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
-    {
-        return eventTarget instanceof HTMLInputElement ||
-               eventTarget instanceof HTMLSelectElement ||
-               eventTarget instanceof HTMLTextAreaElement;
-    };
+    const isTextFieldElement = (target: EventTarget | null): target is
+        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
+        (target as Element).matches(`${textfieldSelector},${selectSelector},${textareaSelector}`);
 
     const setCounter = (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
     {
@@ -49,26 +44,6 @@ export default (() =>
         }
     };
 
-    const handleInvalid = (
-        input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
-        isValid?: boolean
-    ): void => {
-        if (input.required) {
-            input.parentElement?.classList.toggle('micl-textfield--error', !isValid);
-
-            const supporting = input.parentElement?.querySelector(
-                '.micl-textfield__supporting-text'
-            ) as HTMLElement;
-
-            if (supporting) {
-                if (!isValid && !('micltext' in supporting.dataset)) {
-                    supporting.dataset.micltext = supporting.textContent;
-                }
-                supporting.textContent = input.validationMessage || supporting.dataset.micltext || '';
-            }
-        }
-    };
-
     return {
         initialize: (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
         {
@@ -84,14 +59,13 @@ 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 spaceAbove = rect.top;
+                    const spaceBelow = window.innerHeight - rect.bottom;
 
                     !input.matches(':open') && input.style.setProperty(
                         '--md-sys-select-picker-origin',
-                        roomAbove > roomBelow ? 'left bottom' : 'left top'
+                        spaceAbove > spaceBelow ? 'left bottom' : 'left top'
                     );
                 });
             }
@@ -102,8 +76,7 @@ export default (() =>
         input: (event: Event): void =>
         {
             if (
-                !isRequiredType(event.target)
-                || !event.target.matches(`${textfieldSelector},${selectSelector},${textareaSelector}`)
+                !isTextFieldElement(event.target)
                 || !event.target.dataset.miclinitialized
                 || event.target.disabled
             ) {
@@ -117,13 +90,7 @@ export default (() =>
                 delete event.target.dataset.miclvalue;
             }
 
-            handleInvalid(event.target, true);
             setCounter(event.target);
-        },
-
-        invalid: (event: Event): void =>
-        {
-            isRequiredType(event.target) && handleInvalid(event.target);
         }
     };
 })();