material-inspired-component-library 1.2.2 → 2.0.0

package/README.md

@@ -79,6 +79,7 @@ This will initialize all MICL components, including those that will be added to
 ## Available components ✅
 The library currently consists of the following components:
 - [x] [Accordion](components/accordion/README.md)
+- [x] [Badge](components/badge/README.md)
 - [x] [Bottom sheet](components/bottomsheet/README.md)
 - [x] [Button](components/button/README.md)
 - [x] [Card](components/card/README.md)
@@ -88,6 +89,7 @@ The library currently consists of the following components:
 - [x] [Icon button](components/iconbutton/README.md)
 - [x] [List](components/list/README.md)
 - [x] [Menu](components/menu/README.md)
+- [x] [Navigation rail](components/navigationrail/README.md)
 - [x] [Radio button](components/radio/README.md)
 - [x] [Select](components/select/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
@@ -97,10 +99,26 @@ The library currently consists of the following components:
 
 ## Change Log
 
+### 2.0.0 (04.09.2025)
+**Features**
+
+- **Navigation rail**: New component.
+- **Badge**: New component.
+- **Ripple**: Now uses custom CSS properties.
+
+### 1.3.0 (23.08.2025)
+**Features**
+
+- **Menu**: Added support for submenus.
+- **Ripple**: The ripple-effect does not use a pseudo-element anymore.
+- **State layer**: Rewrite for simpler styling.
+
 ### 1.2.0 (17.08.2025)
 **Features**
+
 - **List**: Added support for switches inside list items.
 
 ### 1.1.0 (12.08.2025)
 **Features**
+
 - **Text field**: Added support for multi-line text fields.

package/components/badge/README.md

@@ -0,0 +1,65 @@
+# Badge
+This component implements the the [Material Design 3 Expressive Badge](https://m3.material.io/components/badges/overview) design. Badges are small status indicators that can show a count or simply signal new information.
+
+## Basic Usage
+
+### HTML
+To add a large badge, use a `<span>` element with the `micl-badge-large` class and add a short text inside. For a small badge, which is a simple dot, use a `<span>` with the `micl-badge-small` class and leave the element empty.
+
+```HTML
+<span class="micl-badge-large">57</span>
+
+<span class="micl-badge-small"></span>
+```
+
+### CSS
+Import the badge styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/badge";
+```
+
+### JavaScript
+No custom JavaScript is required for the core functionality of this component.
+
+### Demo
+A live example of the [Badge component](https://henkpb.github.io/micl/index.html) is available for you to interact with.
+
+## Anchoring
+Badges are typically placed on top of other elements, like icons. To anchor a badge to a specific element, use CSS `anchor positioning`.
+
+1. Assign a unique `anchor-name` to the element you want to anchor the badge to. The value should start with `--`.
+2. Use the `position-anchor` CSS property on the badge and set its value to the `anchor-name` of the target element.
+
+```HTML
+<span class="material-symbols-outlined" style="anchor-name:--inbox">inbox</span>
+<span class="micl-badge-large" style="position-anchor:--inbox">57</span>
+```
+
+You can fine-tune the badge's position relative to its anchor using the following CSS variables:
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-badge-inline-offset | 0px | Adjusts the horizontal position of the badge |
+| --md-sys-badge-block-offset | 0px | Adjusts the vertical position of the badge |
+
+
+## Customizations
+You can customize the appearance of the Badge 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 badges.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-badge-small-size | 6px | The height and width of the small badge |
+| --md-sys-badge-large-size | 16px | The height and minimum width of the large badge |
+| --md-sys-badge-large-padding | 4px | The horizontal padding used for the large badge |
+
+**Example: Changing the size of the small badge**
+
+```HTML
+<div style="--md-sys-badge-small-size:8px">
+  <span class="micl-badge-small"></span>
+</div>
+```
+
+## Compatibility
+This component uses **anchor positioning**, a modern CSS feature that may not be fully supported in all browsers. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility) for details.

package/components/badge/index.scss

@@ -0,0 +1,68 @@
+//
+// 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 '../../styles/typography';
+
+:root {
+    --md-sys-badge-small-size: 6px;
+    --md-sys-badge-large-size: 16px;
+    --md-sys-badge-large-padding: 4px;
+}
+
+.micl-badge-small {
+    --md-sys-badge-inline-offset: 0px;
+    --md-sys-badge-block-offset: 0px;
+
+    box-sizing: border-box;
+    position: fixed;
+    inline-size: var(--md-sys-badge-small-size);
+    block-size: var(--md-sys-badge-small-size);
+    inset: unset;
+    inset-block-start: calc(anchor(start) + var(--md-sys-badge-block-offset));
+    inset-inline-start: calc(anchor(end) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+    border-radius: calc(var(--md-sys-badge-small-size) / 2);
+    margin: 0;
+    padding: 0;
+    background-color: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.micl-badge-large {
+    --md-sys-badge-inline-offset: 0px;
+    --md-sys-badge-block-offset: 0px;
+
+    @include typography.label-small;
+
+    box-sizing: border-box;
+    position: fixed;
+    inline-size: fit-content;
+    max-inline-size: 34px;
+    min-inline-size: var(--md-sys-badge-large-size);
+    block-size: var(--md-sys-badge-large-size);
+    inset: unset;
+    inset-block-start: calc(anchor(start) - 2px + var(--md-sys-badge-block-offset));
+    inset-inline-start: calc(anchor(end) - 12px - var(--md-sys-badge-inline-offset));
+    margin: 0;
+    padding-inline: var(--md-sys-badge-large-padding);
+    border-radius: calc(var(--md-sys-badge-large-size) / 2);
+    background-color: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}

package/components/button/README.md

@@ -18,7 +18,7 @@ Import the button styles into your project:
 ```
 
 ### JavaScript
-This component requires JavaScript for interactive features like the **ripple effect** and **toggle logic**:
+This component requires JavaScript for interactive features like the **toggle logic**:
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";

package/components/button/index.scss

@@ -21,7 +21,6 @@
 
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
@@ -54,11 +53,23 @@ button.micl-button-outlined-xl {
     --md-sys-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-button-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --micl-ripple: 1;
 
+    position: relative;
+    display: inline-flex;
+    align-items: center;
     padding: 0;
     border: none;
+    background-image:
+        radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+        linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+    background-repeat: no-repeat;
+    background-size: 10000%, 100%;
     cursor: pointer;
-    transition: border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects);
+    transition:
+        border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects),
+        background-size 3000ms,
+        --statelayer-opacity var(--md-sys-button-motion-duration) linear;
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
@@ -66,9 +77,15 @@ button.micl-button-outlined-xl {
         box-shadow: var(--md-sys-elevation-level0);
         cursor: default;
     }
-    &:not(:disabled):focus-visible {
-        outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-        outline-offset: 3px;
+    &:not(:disabled) {
+        &:focus-visible {
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline-offset: 3px;
+        }
+        &:active {
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
+        }
     }
     .micl-button__icon {
         font-variation-settings: 'FILL' 0;
@@ -83,6 +100,7 @@ button.micl-button-tonal-xs,
 button.micl-button-outlined-xs {
     @include typography.label-large;
 
+    column-gap: 8px;
     min-width: var(--md-sys-target-size);
     height: var(--md-sys-target-size);
     padding-inline: 12px;
@@ -105,9 +123,6 @@ button.micl-button-outlined-xs {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             &.micl-button-elevated-xs {
                 border-radius: var(--md-sys-shape-corner-small);
@@ -123,8 +138,6 @@ button.micl-button-outlined-xs {
     .micl-button__icon {
         font-size: 20px;
         width: 20px;
-        margin-right: 8px;
-        vertical-align: text-bottom;
     }
 }
 
@@ -135,6 +148,7 @@ button.micl-button-tonal-s,
 button.micl-button-outlined-s {
     @include typography.label-large;
 
+    column-gap: 8px;
     min-width: var(--md-sys-target-size);
     height: var(--md-sys-target-size);
     padding-inline: 16px;
@@ -157,9 +171,6 @@ button.micl-button-outlined-s {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             &.micl-button-elevated-s {
                 border-radius: var(--md-sys-shape-corner-small);
@@ -175,8 +186,6 @@ button.micl-button-outlined-s {
     .micl-button__icon {
         font-size: 20px;
         width: 20px;
-        margin-right: 8px;
-        vertical-align: text-bottom;
     }
 }
 
@@ -187,6 +196,7 @@ button.micl-button-tonal-m,
 button.micl-button-outlined-m {
     @include typography.title-medium;
 
+    column-gap: 8px;
     min-width: 56px;
     height: 56px;
     padding-inline: 24px;
@@ -203,9 +213,6 @@ button.micl-button-outlined-m {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             border-radius: var(--md-sys-shape-corner-medium);
         }
@@ -213,8 +220,6 @@ button.micl-button-outlined-m {
     .micl-button__icon {
         font-size: 24px;
         width: 24px;
-        margin-right: 8px;
-        vertical-align: text-bottom;
     }
 }
 
@@ -225,6 +230,7 @@ button.micl-button-tonal-l,
 button.micl-button-outlined-l {
     @include typography.headline-small;
 
+    column-gap: 12px;
     min-width: 96px;
     height: 96px;
     padding-inline: 48px;
@@ -241,9 +247,6 @@ button.micl-button-outlined-l {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             border-radius: var(--md-sys-shape-corner-large);
         }
@@ -251,8 +254,6 @@ button.micl-button-outlined-l {
     .micl-button__icon {
         font-size: 32px;
         width: 32px;
-        margin-right: 12px;
-        vertical-align: text-bottom;
     }
 }
 
@@ -263,6 +264,7 @@ button.micl-button-tonal-xl,
 button.micl-button-outlined-xl {
     @include typography.headline-large;
 
+    column-gap: 16px;
     min-width: 136px;
     height: 136px;
     padding-inline: 64px;
@@ -279,9 +281,6 @@ button.micl-button-outlined-xl {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             border-radius: var(--md-sys-shape-corner-large);
         }
@@ -289,8 +288,6 @@ button.micl-button-outlined-xl {
     .micl-button__icon {
         font-size: 40px;
         width: 40px;
-        margin-right: 16px;
-        vertical-align: text-bottom;
     }
 }
 
@@ -299,22 +296,24 @@ button.micl-button-text-s,
 button.micl-button-text-m,
 button.micl-button-text-l,
 button.micl-button-text-xl {
+    --statelayer-color: var(--md-sys-color-primary);
+
     background-color: transparent;
     color: var(--md-sys-color-primary);
 
     &:not(:disabled) {
         &:hover {
-            background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -324,12 +323,16 @@ button.micl-button-elevated-s,
 button.micl-button-elevated-m,
 button.micl-button-elevated-l,
 button.micl-button-elevated-xl {
+    --statelayer-color: var(--md-sys-color-primary);
+
     background-color: var(--md-sys-color-surface-container-low);
     color: var(--md-sys-color-primary);
     box-shadow: var(--md-sys-elevation-level1);
 
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-on-primary);
+
             background-color: var(--md-sys-color-primary);
             color: var(--md-sys-color-on-primary);
 
@@ -338,28 +341,17 @@ button.micl-button-elevated-xl {
             }
         }
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -377,6 +369,8 @@ button.micl-button-filled-s,
 button.micl-button-filled-m,
 button.micl-button-filled-l,
 button.micl-button-filled-xl {
+    --statelayer-color: var(--md-sys-color-on-primary);
+
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
 
@@ -387,32 +381,23 @@ button.micl-button-filled-xl {
             }
         }
         &.micl-button--toggle:not(.micl-button--selected) {
+            --statelayer-color: var(--md-sys-color-on-surface-variant);
+
             background-color: var(--md-sys-color-surface-container);
             color: var(--md-sys-color-on-surface-variant);
         }
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle:not(.micl-button--selected) {
-                background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle:not(.micl-button--selected) {
-                background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle:not(.micl-button--selected) {
-                background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -422,11 +407,15 @@ button.micl-button-tonal-s,
 button.micl-button-tonal-m,
 button.micl-button-tonal-l,
 button.micl-button-tonal-xl {
+    --statelayer-color: var(--md-sys-color-on-secondary-container);
+
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
 
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-on-secondary);
+
             background-color: var(--md-sys-color-secondary);
             color: var(--md-sys-color-on-secondary);
 
@@ -435,28 +424,17 @@ button.micl-button-tonal-xl {
             }
         }
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -466,11 +444,15 @@ button.micl-button-outlined-s,
 button.micl-button-outlined-m,
 button.micl-button-outlined-l,
 button.micl-button-outlined-xl {
+    --statelayer-color: var(--md-sys-color-on-surface-variant);
+
     background-color: transparent;
     color: var(--md-sys-color-on-surface-variant);
 
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-inverse-on-surface);
+
             background-color: var(--md-sys-color-inverse-surface);
             color: var(--md-sys-color-inverse-on-surface);
 
@@ -479,28 +461,17 @@ button.micl-button-outlined-xl {
             }
         }
         &:hover {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }

package/components/button/index.ts

@@ -37,7 +37,12 @@ export default (() =>
             }
         }
         if (event.target.classList.contains('micl-button--toggle')) {
+            event.target.classList.add('micl-button--toggled');
             event.target.classList.toggle('micl-button--selected');
+            if (!!event.target.dataset.miclalt) {
+                [event.target.textContent, event.target.dataset.miclalt] = 
+                [event.target.dataset.miclalt, event.target.textContent];
+            }
         }
     };