material-inspired-component-library 3.0.0 → 3.0.2

package/components/select/README.md

@@ -1,5 +1,5 @@
 # Select
-This component implements the the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design.
+This component implements the the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design. A select component is used to offer the user with a set of options from which the user can select a single one. 
 
 ## Basic Usage
 
@@ -11,10 +11,10 @@ The Select component is an extension of the [Text field](../textfield/README.md)
   <label for="myselect">Country</label>
   <select id="myselect">
     <option class="micl-list-item-one" value="AR">
-        <span class="micl-list-item__text">Argentina</span>
+      <span class="micl-list-item__text">Argentina</span>
     </option>
     <option class="micl-list-item-one" value="BO">
-        <span class="micl-list-item__text">Bolivia</span>
+      <span class="micl-list-item__text">Bolivia</span>
     </option>
   </select>
 </div>
@@ -42,7 +42,29 @@ This will initialize any Select component, including those that will be added to
 A live example of the [Select component](https://henkpb.github.io/micl/select.html) is available for you to interact with.
 
 ## Variants
-To display extra information for an option, add the `aria-description` attribute to the `<option>` element. In a two-line list item (`micl-list-item-two`), this displays the attribute's content as supporting text. Do not add a separate text element to the `<option>`, as this will change the text of the selected option.
+A Select Component can be disabled by adding the `disabled` attribute to the `<select>` element. An option within the component can be disabled by adding the `disabled` attribute to the `<option>` element.
+
+You can add [Dividers](../divider/README.md) into the list of options and they will appear as separators to help visually break up the options.
+
+**Example: A select with a divider**
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    <option class="micl-list-item-two" value=""></option>
+    <option class="micl-list-item-two" value="AR">
+      <span class="micl-list-item__text">Argentina</span>
+    </option>
+    <hr class="micl-divider">
+    <option class="micl-list-item-two" value="BO">
+      <span class="micl-list-item__text">Bolivia</span>
+    </option>
+  </select>
+</div>
+```
+
+To display extra information for an option, add the `aria-description` attribute to its `<span class="micl-list-item__text">` element. In a two-line list item (`micl-list-item-two`), this displays the attribute's content as supporting text. Do not add a separate text element to the `<option>`, as this will change the text of the selected option.
 
 **Example: A select with supporting text**
 
@@ -51,10 +73,10 @@ To display extra information for an option, add the `aria-description` attribute
   <label for="myselect">Country</label>
   <select id="myselect">
     <option class="micl-list-item-two" value="AR">
-        <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+      <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
     </option>
     <option class="micl-list-item-two" value="BO">
-        <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
+      <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
     </option>
   </select>
 </div>

package/components/select/index.scss

@@ -25,15 +25,28 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+.micl-textfield-filled > select {
+    --md-sys-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
+}
+.micl-textfield-outlined > select {
+    --md-sys-select-line-height: var(--md-sys-textfield-height);
+}
 .micl-textfield-filled > select,
 .micl-textfield-outlined > select {
+    --md-sys-divider-space: 8px;
     --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-sys-select-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
+    --md-sys-select-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-sys-select-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-select-picker-origin: left top;
 
     appearance: base-select;
+    line-height: var(--md-sys-select-line-height);
 
     &::picker-icon {
       color: var(--md-sys-color-on-surface-variant);
-      transition: 0.4s rotate;
+      transition: motion.$md-sys-motion-duration-medium4 rotate;
+      transform-origin: 50% calc((var(--md-sys-select-line-height) / 2) - 1px);
     }
     &:open::picker-icon {
       rotate: 180deg;
@@ -42,12 +55,37 @@
         appearance: base-select;
         min-inline-size: max(anchor-size(self-inline), 112px);
         max-inline-size: 280px;
-        padding-block: 8px;
-        padding-inline: 0;
+        position-try: most-block-size flip-block;
+        padding: 8px 0;
         border: none;
         border-radius: var(--md-sys-shape-corner-extra-small);
         background-color: var(--md-sys-color-surface-container);
         box-shadow: var(--md-sys-elevation-level2);
+        opacity: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        transform: scaleY(0);
+        transform-origin: var(--md-sys-select-picker-origin);
+        transition:
+            opacity var(--md-sys-select-motion-duration-reverse) linear,
+            transform var(--md-sys-select-motion-duration-reverse) var(--md-sys-select-motion-spatial),
+            overlay var(--md-sys-select-motion-duration-reverse) linear allow-discrete,
+            display var(--md-sys-select-motion-duration-reverse) linear allow-discrete;
+
+        &:popover-open {
+            opacity: 1;
+            transform: scaleY(1);
+            transition:
+                opacity var(--md-sys-select-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
+                transform var(--md-sys-select-motion-duration) var(--md-sys-select-motion-spatial),
+                overlay var(--md-sys-select-motion-duration) linear allow-discrete,
+                display var(--md-sys-select-motion-duration) linear allow-discrete;
+
+            @starting-style {
+                opacity: 0;
+                transform: scaleY(0);
+            }
+        }
     }
 
     option {
@@ -59,7 +97,8 @@
         --md-sys-list-item-padding-inline: 16px;
         --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
 
-        border-radius: 0px;
+        line-height: normal;
+        background-color: transparent;
 
         &:not(:disabled) {
             cursor: pointer;
@@ -84,6 +123,7 @@
             @include typography.body-large;
 
             color: var(--md-sys-color-on-surface);
+            white-space: normal;
         }
         .micl-list-item__text::after {
             @include typography.body-medium;
@@ -91,10 +131,12 @@
             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);
+            color: var(--md-sys-color-on-surface-variant);
         }
     }
 }
@@ -107,10 +149,17 @@ dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select) {
     inset-inline-start: 0;
     margin: auto;
     transform: scale(50%);
+
+    &:popover-open {
+        transform: scale(100%);
+    }
 }
-dialog.micl-dialog:has(.micl-textfield-filled > select):popover-open,
-dialog.micl-dialog:has(.micl-textfield-outlined > select):popover-open,
-dialog.micl-dialog-fullscreen:has(.micl-textfield-filled > select):popover-open,
-dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select):popover-open {
-    transform: scale(100%);
+
+[dir=rtl] {
+    .micl-textfield-filled > select,
+    .micl-textfield-outlined > select {
+        &:open::picker-icon {
+          rotate: -180deg;
+        }
+    }
 }

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/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,163 @@
+//
+// 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 stepperSelector = '.micl-stepper';
+
+export default (() =>
+{
+    const getCurrentStep = (stepper: HTMLElement): HTMLElement | null =>
+    {
+        let step = stepper.querySelector('.micl-stepper__step--current') as HTMLElement;
+        if (step) {
+            return step;
+        }
+        step = stepper.querySelector('.micl-stepper__step') as HTMLElement;
+        if (!step) {
+            return null;
+        }
+        step.classList.add('micl-stepper__step--current');
+        return step;
+    };
+
+    const endTransitionCurrent = (event: Event): void =>
+    {
+        if (!event.currentTarget || ((event as TransitionEvent).propertyName !== 'transform')) {
+            return;
+        }
+        (event.currentTarget as Element).classList.remove(
+            'micl-stepper__step--fromcurrent',
+            'micl-stepper__step--tocurrent'
+        );
+        event.currentTarget.removeEventListener('transitionend', endTransitionCurrent);
+    };
+
+    const showHideActions = (actions: HTMLElement[], step: HTMLElement | null): void =>
+    {
+        step && actions.forEach(action =>
+        {
+            action.classList.toggle('micl-hidden', !step[
+                action.classList.contains('micl-stepper--gonext') ?
+                'nextElementSibling' : 'previousElementSibling'
+            ]?.classList.contains('micl-stepper__step'));
+        });
+    };
+
+    const showHideElements = (stepper: HTMLElement, step: HTMLElement): void =>
+    {
+        stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
+        {
+            element.classList.toggle('micl-hidden', element.dataset.step !== step.dataset.miclstep);
+        });
+    };
+
+    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;
+                }
+            });
+
+            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");
+                }
+            });
+        }
+        return currentStep;
+    };
+
+    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),
+                actions = stepper.querySelectorAll<HTMLButtonElement>(
+                    'button.micl-stepper--goback,button.micl-stepper--gonext'
+                );
+            showHideActions([...actions], step);
+            step && showHideElements(stepper, step);
+
+            actions.forEach(action =>
+            {
+                action.addEventListener('click', () =>
+                {
+                    const currentStep = checkStepValidity(stepper);
+                    if (!currentStep) {
+                        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);
+                    }
+                });
+            });
+        }
+    };
+})();

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.

package/components/switch/index.scss

@@ -24,24 +24,27 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-input[type=checkbox].micl-switch {
-    --md-sys-switch-target-height: 32px;
-    --md-sys-switch-target-width: 52px;
-    --md-sys-switch-state-layer-size: 40px;
+:root {
     --md-sys-switch-handle-size: 16px;
     --md-sys-switch-handle-selected-size: 24px;
     --md-sys-switch-handle-pressed-size: 28px;
+    --md-sys-switch-outline-width: 2px;
+    --md-sys-switch-state-layer-size: 40px;
+    --md-sys-switch-target-height: 32px;
+    --md-sys-switch-target-width: 52px;
+}
+
+input[type=checkbox].micl-switch {
     --md-sys-switch-unselected-icon: "+";
     --md-sys-switch-selected-icon: "\AC";
-    --md-sys-switch-outline-width: 2px;
     --md-sys-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
     --md-sys-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
     --md-sys-switch-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
 
     appearance: none;
     position: relative;
-    width: var(--md-sys-switch-target-width);
-    height: var(--md-sys-target-size);
+    inline-size: var(--md-sys-switch-target-width);
+    block-size: var(--md-sys-target-size);
     margin: 0;
     border-radius: calc(var(--md-sys-switch-target-height) / 2);
     outline: none;
@@ -50,8 +53,8 @@ input[type=checkbox].micl-switch {
         content: "";
         box-sizing: border-box;
         display: block;
-        width: var(--md-sys-switch-target-width);
-        height: var(--md-sys-switch-target-height);
+        inline-size: var(--md-sys-switch-target-width);
+        block-size: var(--md-sys-switch-target-height);
         margin-block: calc((var(--md-sys-target-size) - var(--md-sys-switch-target-height)) / 2);
         border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
         border-radius: inherit;
@@ -62,12 +65,12 @@ input[type=checkbox].micl-switch {
         content: var(--md-sys-switch-unselected-icon);
         box-sizing: border-box;
         position: absolute;
-        width: var(--md-sys-switch-state-layer-size);
-        height: var(--md-sys-switch-state-layer-size);
+        inline-size: var(--md-sys-switch-state-layer-size);
+        block-size: var(--md-sys-switch-state-layer-size);
         inset: 0;
-        inset-inline-start: -4px;
+        inset-inline-start: calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px) / 2);
         margin: auto 0;
-        font: 300 1rem/1rem var(--md-ref-typeface-plain);
+        font: 300 16px / 1rem var(--md-ref-typeface-plain);
         color: var(--md-sys-color-surface-container-highest);
         text-align: center;
         background-color: var(--md-sys-color-outline);
@@ -78,7 +81,6 @@ input[type=checkbox].micl-switch {
         transition:
             inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
             border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
-            font-size var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
             line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
             color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
             border-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
@@ -90,9 +92,10 @@ input[type=checkbox].micl-switch {
         }
         &::after {
             content: var(--md-sys-switch-selected-icon);
-            inset-inline-start: 16px;
-            font-size: 2rem;
-            line-height: 1.4rem;
+            inset-inline-start: calc(var(--md-sys-switch-target-width) - ((var(--md-sys-switch-state-layer-size) + var(--md-sys-target-size) - 16px) / 2));
+            font-size: 1.6rem;
+            line-height: 1.3rem;
+            letter-spacing: 0.1rem;
             border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-selected-size)) / 2) solid transparent;
             color: var(--md-sys-color-on-primary-container);
             background-color: var(--md-sys-color-on-primary);
@@ -129,19 +132,18 @@ input[type=checkbox].micl-switch {
         }
         &:active {
             &::after {
-                font-size: 2rem;
                 line-height: 1.7rem;
                 border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
                 background-color: var(--md-sys-color-on-surface-variant);
             }
             &:checked::after {
-                line-height: 1.7rem;
+                line-height: 1.6rem;
                 border-width: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2);
                 border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
             &:not(:checked)::after {
-                inset-inline-start: -4px;
+                inset-inline-start: calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px) / 2);
                 border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent);
             }
         }
@@ -154,15 +156,14 @@ input[type=checkbox].micl-switch {
         }
         &:checked::before {
             background-color: var(--md-sys-color-on-surface);
-            opacity: 12%;
         }
         &::after {
-            color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
+            color: rgb(from var(--md-sys-color-surface-container-highest) r g b / 38%);
             background-color: var(--md-sys-color-on-surface);
             opacity: 38%;
         }
         &:checked::after {
-            color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
             background-color: var(--md-sys-color-surface);
             opacity: 100%;
         }