material-inspired-component-library 1.3.0 → 2.0.1

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+micl.hermana@proton.me.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

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,7 +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)
-- [ ] [Navigation rail](components/navigationrail/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)
@@ -98,6 +99,13 @@ 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**
 

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` class and add a short text inside. For a small badge, which is a simple dot, add the `micl-badge--small` class and leave the element empty.
+
+```HTML
+<span class="micl-badge">57</span>
+
+<span class="micl-badge 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" 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 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,61 @@
+//
+// 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 {
+    --md-sys-badge-inline-offset: 0px;
+    --md-sys-badge-block-offset: 0px;
+
+    box-sizing: border-box;
+    position: fixed;
+    inset: unset;
+    margin: 0;
+    background-color: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+
+    &.micl-badge--small {
+        inline-size: var(--md-sys-badge-small-size);
+        block-size: var(--md-sys-badge-small-size);
+        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));
+        padding: 0;
+        border-radius: calc(var(--md-sys-badge-small-size) / 2);
+    }
+    &:not(.micl-badge--small) {
+        @include typography.label-small;
+
+        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-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));
+        padding-inline: var(--md-sys-badge-large-padding);
+        border-radius: calc(var(--md-sys-badge-large-size) / 2);
+    }
+}

package/components/bottomsheet/README.md

@@ -1,13 +1,13 @@
 # Bottom sheet
-This component implements the the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design.
+This component implements the the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design. Bottom sheets show secondary content anchored to the bottom of the screen.
 
 ## Basic Usage
 
 ### HTML
-To create a standard bottom sheet, use the `<dialog>` element with the `popover` attribute. The `closedby="any"` attribute allows the user to dismiss the bottom sheet by clicking anywhere outside of it.
+To create a standard bottom sheet, use the `<dialog>` element with the `popover` attribute.
 
 ```HTML
-<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover>
+<dialog id="mybottomsheet" class="micl-bottomsheet" popover>
   <div class="micl-bottomsheet__content">
     ...your content...
   </div>
@@ -22,34 +22,50 @@ Import the bottom sheet styles into your project:
 ```
 
 ### JavaScript
-This component requires JavaScript to support **modal** and **resizable** bottom sheets:
+This component requires JavaScript to support **resizable** bottom sheets. The library will automatically initialize new components as they're added to the DOM.
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
 ```
 
-This will initialize any Bottom sheet component, including those that will be added to the DOM later on.
-
 ### Demo
 A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available for you to interact with.
 
 ## Variants
+Setting the `popover` attribute to `manual` lets a bottom sheet co-exist and be interactive with the rest of the page.
+
+```HTML
+<dialog id="mybottomsheet" class="micl-bottomsheet" popover="manual">
+  <div class="micl-bottomsheet__content">
+    ...your content...
+  </div>
+</dialog>
+```
+
+### Modal Bottom Sheet
 A **modal** bottom sheet blocks access to the rest of the page and must be dismissed explicitly by the user. This is suitable for critical tasks or information that requires a user's full attention.
 
-To create a modal bottom sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the bottom sheet from being dismissed by clicking outside of it. You'll also need a button or other control with popovertarget to close it.
+To create a modal bottom sheet, use the `<dialog>` element without the `popover` attribute. Add the `closedby="any"` to allow the bottom sheet to be dismissed by a user clicking outside of it.
 
 ```HTML
-<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="closerequest">
+<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any">
   <div class="micl-bottomsheet__content">
     ...your content...
   </div>
 </dialog>
 ```
 
-Include the bottom sheet heading (and optionally a drag-handle) to create a **resizable** bottom sheet.
+To open or close a bottom sheet, add the markup of a button that is linked to the bottom sheet using the `popovertarget` attribute:
+
+```HTML
+<button type="button" popovertarget="mybottomsheet">Open Bottom Sheet</button>
+```
+
+### Resizable Bottom Sheet
+To create a **resizable** bottom sheet, include a heading and an optional drag-handle.
 
 ```HTML
-<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover>
+<dialog id="mybottomsheet" class="micl-bottomsheet" popover>
   <div class="micl-bottomsheet__headline">
     <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
   </div>
@@ -59,17 +75,13 @@ Include the bottom sheet heading (and optionally a drag-handle) to create a **re
 </dialog>
 ```
 
-The height of a bottom sheet is determined by its contents, initially capped at 50% of the screen height. You can set multiple preset heights for the bottom sheet by adding the `data-snapheights` attribute:
+The initial height is determined by its content and capped at 50% of the screen's height. You can define specific preset heights by using the `data-miclsnapheights` attribute.
 
 ```HTML
-<dialog data-snapheights="200,420" ...>
+<dialog data-miclsnapheights="0,200,420" ...>
 ```
 
-To open or close a bottom sheet, add the markup of a button that is linked to the bottom sheet using the `popovertarget` attribute:
-
-```HTML
-<button type="button" popovertarget="mybottomsheet">Open Bottom Sheet</button>
-```
+The value `0` is equivalent to closing the bottom sheet. When a user clicks the drag-handle, the bottom sheet toggles between these preset heights and its initial height. The bottom sheet will also snap to these preset heights as a user drags the heading.
 
 ## Compatibility
 This component uses the Popover API, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#api.htmlelement.popover) for details.

package/components/bottomsheet/index.scss

@@ -27,6 +27,7 @@
 dialog.micl-bottomsheet {
     --md-sys-bottomsheet-height: max-content;
     --md-sys-bottomsheet-margin: 56px;
+    --md-sys-bottomsheet-margin-top: 72px;
     --md-sys-bottomsheet-padding: 24px;
     --md-sys-bottomsheet-handle-width: 32px;
     --md-sys-bottomsheet-handle-height: 4px;
@@ -36,13 +37,12 @@ dialog.micl-bottomsheet {
 
     box-sizing: border-box;
     position: fixed;
-    top: auto;
-    bottom: 0;
-    height: 0;
-    max-height: 50vh;
-    width: 100%;
-    min-width: 100%;
-    margin: 72px 0 0 0 ;
+    inset-block: auto 0;
+    block-size: 0;
+    max-block-size: 50vh;
+    inline-size: 100%;
+    min-inline-size: 100%;
+    margin: var(--md-sys-bottomsheet-margin-top) 0 0 0 ;
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
@@ -55,26 +55,23 @@ dialog.micl-bottomsheet {
     &:not(.micl-bottomsheet--resizing) {
         transition:
             opacity var(--md-sys-bottomsheet-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-accelerate,
-            height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
+            block-size var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
             overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,
             display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete;
     }
-    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
-        cursor: grabbing;
-    }
     .micl-bottomsheet__headline {
         box-sizing: border-box;
         display: flex;
         align-items: center;
-        width: 100%;
-        height: var(--md-sys-target-size);
+        inline-size: 100%;
+        block-size: var(--md-sys-target-size);
         justify-content: center;
         cursor: grab;
 
         .micl-bottomsheet__draghandle {
             box-sizing: content-box;
-            width: var(--md-sys-bottomsheet-handle-width);
-            height: var(--md-sys-bottomsheet-handle-height);
+            inline-size: var(--md-sys-bottomsheet-handle-width);
+            block-size: var(--md-sys-bottomsheet-handle-height);
             padding: 16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width)) / 2);
             border: none;
             border-radius: var(--md-sys-shape-corner-small);
@@ -88,6 +85,9 @@ dialog.micl-bottomsheet {
             }
         }
     }
+    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
+        cursor: grabbing;
+    }
 
     .micl-bottomsheet__content {
         padding: 0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding);
@@ -102,19 +102,19 @@ dialog.micl-bottomsheet {
     }
     &:popover-open,
     &[open] {
-        height: var(--md-sys-bottomsheet-height);
-        opacity: 1;
+        block-size: var(--md-sys-bottomsheet-height);
+        opacity: 100%;
         // overflow-y: auto;
 
         &:not(.micl-bottomsheet--resizing) {
             transition:
                 opacity var(--md-sys-bottomsheet-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-                height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
+                block-size var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
                 overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
                 display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete;
         }
         @starting-style {
-            height: 0;
+            block-size: 0;
             opacity: 0;
         }
     }
@@ -129,11 +129,11 @@ dialog.micl-bottomsheet {
 
 @media (min-width: 641px) {
     dialog.micl-bottomsheet {
-        width: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
-        max-width: 640px;
-        min-width: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
+        inline-size: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
+        max-inline-size: 640px;
+        min-inline-size: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
         inset-inline-start: calc(((100vw - min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px)) / 2) - var(--md-sys-bottomsheet-margin));
         margin: var(--md-sys-bottomsheet-margin);
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 }

package/components/bottomsheet/index.ts

@@ -23,19 +23,19 @@ export const bottomsheetSelector = 'dialog.micl-bottomsheet';
 
 export default (() =>
 {
-    var fitHeight = 0;
-
     const getSnapHeights = (dialog: HTMLDialogElement): number[] =>
     {
-        let maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-height')),
-            snapHeights = (dialog.dataset.snapheights || '').split(',').map(Number).filter(
-                n => !isNaN(n) && (n > 0) && (n <= maxHeight)
+        let fitHeight   = parseInt(dialog.dataset.miclfitheight || '0', 10),
+            maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-block-size'), 10),
+            snapHeights = (dialog.dataset.miclsnapheights || '').split(',').map(Number).filter(
+                n => !isNaN(n) && (n >= 0) && (n <= maxHeight)
             );
 
-        if (!fitHeight) {
-            fitHeight = dialog.getBoundingClientRect().height;
+        if (fitHeight < 1) {
+            fitHeight = Math.min(dialog.getBoundingClientRect().height, maxHeight);
+            dialog.dataset.miclfitheight = `${fitHeight}`;
         }
-        return [...new Set(snapHeights.concat([fitHeight, maxHeight]).sort())];
+        return [...new Set(snapHeights.concat([fitHeight]).sort())];
     };
 
     const getNextSnapHeight = (dialog: HTMLDialogElement, isResizing: boolean): number =>
@@ -58,14 +58,21 @@ export default (() =>
 
     const setHeight = (dialog: HTMLDialogElement, value: number): void =>
     {
-        dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+        if (value < 1) {
+            delete dialog.dataset.miclfitheight;
+            dialog.style.removeProperty('--md-sys-bottomsheet-height');
+            dialog[!dialog.popover ? 'close' : 'hidePopover']();
+        }
+        else {
+            dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+        }
     }
 
     return {
         initialize: (element: HTMLDialogElement) =>
         {
             if (
-                !element.matches('dialog.micl-bottomsheet')
+                !element.matches(bottomsheetSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
@@ -80,10 +87,7 @@ export default (() =>
 
             draghandle?.addEventListener('click', () =>
             {
-                const nextSnapHeight = getNextSnapHeight(element, false);
-                if (nextSnapHeight > 4) {
-                    setHeight(element, nextSnapHeight);
-                }
+                setHeight(element, getNextSnapHeight(element, false));
             });
 
             let isPreparing = false,
@@ -126,16 +130,11 @@ export default (() =>
                     if (currentMouseY < initialMouseY) {
                         setHeight(element, getNextSnapHeight(element, true));
                     }
+                    else if (element.getBoundingClientRect().height < 48) {
+                        setHeight(element, 0);
+                    }
                     else {
-                        if (element.getBoundingClientRect().height < 48) {
-                            if (!!element.popover) {
-                                element.hidePopover();
-                            }
-                            setHeight(element, initialHeight);
-                        }
-                        else {
-                            setHeight(element, getPreviousSnapHeight(element));
-                        }
+                        setHeight(element, getPreviousSnapHeight(element));
                     }
                     document.removeEventListener('mousemove', onMouseMove);
                     document.removeEventListener('mouseup', onMouseUp);
@@ -144,8 +143,10 @@ export default (() =>
         },
         cleanup: (element: HTMLDialogElement) =>
         {
-            if (element.matches('dialog.micl-bottomsheet')) {
+            if (element.matches(bottomsheetSelector)) {
+                element.classList.remove('micl-bottomsheet--resizing');
                 delete element.dataset.miclinitialized;
+                delete element.dataset.miclfitheight;
             }
         }
     };

package/components/button/README.md

@@ -66,7 +66,7 @@ To add a leading icon to a button, include an element with the `micl-button__ico
 
 ```HTML
 <button type="button" class="micl-button-filled-m">
-  <span class="micl-button__icon material-symbols-outlined">save</span>
+  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">save</span>
   Save
 </button>
 ```