material-inspired-component-library 1.2.2 → 1.3.0

package/components/menu/index.scss

@@ -21,23 +21,25 @@
 
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
-@use '../../styles/statelayer';
 
-.micl-menu[popover] {
+:root {
     --md-sys-menu-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-sys-menu-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
     --md-sys-menu-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-menu-width-max: 280px;
+    --md-sys-menu-width-min: 112px;
+}
 
+.micl-menu[popover] {
     position: absolute;
     inset: unset;
     inset-block-start: anchor(end);
     inset-inline-start: anchor(start);
-    position-try-fallbacks: flip-block, flip-inline;
-    min-width: 112px;
-    max-width: 280px;
-    padding-inline: 0;
+    position-try: most-block-size flip-block, flip-inline;
+    min-width: var(--md-sys-menu-width-min);
+    max-width: var(--md-sys-menu-width-max);
+    padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-small);
     background-color: var(--md-sys-color-surface-container);
@@ -45,7 +47,7 @@
     opacity: 0;
     overflow: hidden;
     transform: scaleY(0);
-    transform-origin: top left;
+    transform-origin: left top;
     transition:
         opacity var(--md-sys-menu-motion-duration-reverse) linear,
         transform var(--md-sys-menu-motion-duration-reverse) var(--md-sys-menu-motion-spatial),
@@ -61,17 +63,9 @@
             overlay var(--md-sys-menu-motion-duration) linear allow-discrete,
             display var(--md-sys-menu-motion-duration) linear allow-discrete;
 
-        @position-try-on {
-            transform-origin: bottom left;
-        }
-
         @starting-style {
             opacity: 0;
             transform: scaleY(0);
-
-            @position-try-on {
-                transform-origin: bottom left;
-            }
         }
         &::backdrop {
             background-color: rgba(0, 0, 0, 0.2);
@@ -89,7 +83,8 @@
             display var(--md-sys-menu-motion-duration) linear allow-discrete;
     }
 
-    .micl-list {
+    &> .micl-list {
+        --md-sys-list-padding: 4px;
         --md-sys-list-item-one-height: 48px;
         --md-sys-list-item-one-padding: 0;
         --md-sys-list-item-two-padding: 0;
@@ -99,18 +94,6 @@
         .micl-list-item-one,
         .micl-list-item-two,
         .micl-list-item-three {
-            &:not(.micl-list-item--disabled) {
-                --miclripple: 1;
-
-                @include ripple.effect;
-
-                cursor: pointer;
-
-                &:focus-visible {
-                    outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness));
-                    z-index: 1;
-                }
-            }
             &.micl-list-item__divider {
                 position: relative;
                 margin-block-start: 16px;
@@ -126,6 +109,23 @@
                     border-top: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
                 }
             }
+            &> .micl-menu[popover] {
+                transform: scaleX(0);
+
+                &:popover-open {
+                    transform: scaleX(1);
+
+                    @starting-style {
+                        transform: scaleX(0);
+                    }
+                }
+                &:popover-open {
+                    &::backdrop {
+                        background-color: rgba(0, 0, 0, 0);
+                    }
+                }
+            }
         }
     }
 }
+

package/components/menu/index.ts

@@ -21,27 +21,15 @@
 
 export const menuSelector = '.micl-menu[popover]';
 
-/**
- * Set the origin for menu transformations just before transitions start.
- * By default, the origin is "top left" (the menu opens just below the invoker, left aligned),
- * but could also be "top right", "bottom left" or "bottom right".
- * When the browser needs to apply a position-try-fallbacks, because there is not enough space
- * for the menu in the default location, then the reverse transformation will be applied from
- * the wrong origin.
- * Therefore, when the menu is open, calculate the transformation origin just before the
- * transitions start. When the menu is closed, do the same just after the 'display:none' has
- * been removed by the browser (the 'toggle' event has then been triggered).
- */
 export default (() =>
 {
     const getOrigin = (invoker: Element, popover: Element): string =>
     {
-        const invokerY  = invoker.getBoundingClientRect().y,
-              popoverY  = popover.getBoundingClientRect().y,
-              oldOrigin = window.getComputedStyle(popover).getPropertyValue('transform-origin');
+        const invokerRect = invoker.getBoundingClientRect(),
+              popoverRect = popover.getBoundingClientRect();
 
-        return ((invokerY > popoverY) ? 'bottom ' : 'top ') +
-               ((parseInt(oldOrigin) > 0) ? 'right' : 'left');
+        return ((invokerRect.x > popoverRect.x) ? 'right ' : 'left ') +
+               ((invokerRect.y > popoverRect.y) ? 'bottom' : 'top');
     };
 
     return {
@@ -72,6 +60,49 @@ export default (() =>
                 }
             });
 
+            element.querySelectorAll<HTMLButtonElement>(
+                ':scope > ul.micl-list > li > button[popovertarget]'
+            ).forEach(submenuinvoker =>
+            {
+                if (submenuinvoker.popoverTargetElement?.matches('.micl-menu[popover]')) {
+                    let hoverTimeout: any,
+                        id = `--${submenuinvoker.popoverTargetElement.id}`;
+
+                    if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
+                        submenuinvoker.style.setProperty('anchor-name', id);
+                        submenuinvoker.popoverTargetElement.style.insetBlockStart = `anchor(${id} start)`;
+                        submenuinvoker.popoverTargetElement.style.insetInlineStart = `anchor(${id} end)`;
+                    }
+
+                    submenuinvoker.addEventListener('mouseenter', () =>
+                    {
+                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
+                            submenuinvoker.popoverTargetElement.showPopover();
+                        }
+                    });
+                    submenuinvoker.addEventListener('mouseleave', () =>
+                    {
+                        hoverTimeout = setTimeout(() => {
+                            if (
+                                submenuinvoker.popoverTargetElement instanceof HTMLElement
+                                && !submenuinvoker.popoverTargetElement.matches(':hover')
+                            ) {
+                                submenuinvoker.popoverTargetElement.hidePopover();
+                            }
+                        }, 100);
+                    });
+                    submenuinvoker.popoverTargetElement.addEventListener('mouseenter', () =>
+                    {
+                        clearTimeout(hoverTimeout);
+                    });
+                    submenuinvoker.popoverTargetElement.addEventListener('mouseleave', () =>
+                    {
+                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
+                            submenuinvoker.popoverTargetElement.hidePopover();
+                        }
+                    });
+                }
+            });
         }
     };
 })();

package/components/navigationrail/README.md

@@ -0,0 +1,99 @@
+# Side sheet
+This component implements the the [Material Design 3 Expressive Side sheet](https://m3.material.io/components/side-sheets/overview) design.
+
+## Basic Usage
+
+### HTML
+To create a standard side sheet, use the `<dialog>` element with the `popover` attribute. The `closedby="any"` attribute allows the user to dismiss the side sheet by clicking anywhere outside of it.
+
+```HTML
+<dialog id="mysidesheet" class="micl-sidesheet" closedby="any" popover>
+  <div class="micl-sidesheet__headline">
+    <h2>Title</h2>
+    <button
+      type="button"
+      class="micl-iconbutton-s material-symbols-outlined"
+      popovertarget="mysidesheet"
+      aria-label="Close"
+    >close</button>
+  </div>
+  <div class="micl-sidesheet__content">
+    ...your content...
+  </div>
+</dialog>
+```
+
+### CSS
+Import the side sheet styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/sidesheet";
+```
+
+### JavaScript
+No custom JavaScript is required for the core functionality of the side sheet component.
+
+### Demo
+A live example of the [Side sheet component](https://henkpb.github.io/micl/sidesheet.html) is available for you to interact with.
+
+## Variants
+A **modal** side 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 side sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the side sheet from being dismissed by clicking outside of it. You'll also need a button or other control with popovertarget to close it.
+
+```HTML
+<dialog id="mysidesheet" class="micl-sidesheet" closedby="closerequest">
+  <div class="micl-sidesheet__headline">
+    <button
+      type="button"
+      class="micl-iconbutton-s material-symbols-outlined"
+      aria-label="Go back"
+    >arrow_back</button>
+    <h2>Title</h2>
+    <button
+      type="button"
+      class="micl-iconbutton-s material-symbols-outlined"
+      popovertarget="mysidesheet"
+      aria-label="Close"
+    >close</button>
+  </div>
+  <div class="micl-sidesheet__content">
+    ...your content...
+  </div>
+  <div class="micl-sidesheet__actions">
+    <button type="button" class="micl-button">Save</button>
+  </div>
+</dialog>
+```
+
+To open either a standard or modal side sheet, link a button to the side sheet's ID using the `popovertarget` attribute:
+```HTML
+<button type="button" popovertarget="mysidesheet">Open Side Sheet</button>
+```
+
+The back-button and the actions-container are optional. To remove the vertical divider of the "standard" side sheet, assign zero to the following CSS variable:
+```CSS
+#mysidesheet {
+  --md-sys-sidesheet-divider-width: 0;
+}
+```
+To remove the horizontal divider of the actions-container:
+```CSS
+#mysidesheet {
+  --md-sys-sidesheet-actions-divider-width: 0;
+}
+```
+
+### Warning
+The **standard** side sheet component adds CSS rules to the `<body>` element to properly resize the main content area when the side sheet is open. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
+
+```CSS
+box-sizing: border-box;
+margin-left: 0px;
+margin-right: 0px;
+max-width: ...varies depending on if the side sheet is opened...
+transition: ...transition on max-width...
+```
+
+## Compatibility
+This component uses the Popover API, which might not be supported in all browsers. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#api.htmlelement.popover) for details.

package/components/navigationrail/index.scss

@@ -0,0 +1,157 @@
+//
+// 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/elevation';
+@use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/typography';
+
+dialog.micl-navigationrail {
+    --md-sys-navigationrail-width: 256px;
+    --md-sys-navigationrail-maxwidth: 400px;
+    --md-sys-navigationrail-spring-buffer: 200px;
+    --md-sys-navigationrail-padding-standard: 24px;
+    --md-sys-navigationrail-padding-modal: 16px;
+    --md-sys-navigationrail-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-sys-navigationrail-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --md-sys-navigationrail-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+
+    box-sizing: border-box;
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: calc(var(--md-sys-navigationrail-width) + var(--md-sys-navigationrail-spring-buffer));
+    max-width: calc(var(--md-sys-navigationrail-maxwidth) + var(--md-sys-navigationrail-spring-buffer));
+    height: 100%;
+    min-height: 100%;
+    margin-block: 0;
+    margin-inline-start: calc(-1 * (var(--md-sys-navigationrail-maxwidth) + var(--md-sys-navigationrail-spring-buffer)));
+    margin-inline-end: auto;
+    padding-block-start: 10px;
+    padding-block-end: var(--md-sys-navigationrail-padding-standard);
+    padding-inline-start: var(--md-sys-navigationrail-spring-buffer);
+    padding-inline-end: 0;
+    background-color: var(--md-sys-color-surface);
+    border: none;
+    box-shadow: var(--md-sys-elevation-level0);
+    opacity: 0;
+    overflow: hidden;
+    transition:
+        opacity var(--md-sys-navigationrail-motion-duration-reverse) linear,
+        margin-inline-start var(--md-sys-navigationrail-motion-duration-reverse) var(--md-sys-navigationrail-motion-spatial),
+        overlay var(--md-sys-navigationrail-motion-duration-reverse) linear allow-discrete,
+        display var(--md-sys-navigationrail-motion-duration-reverse) linear allow-discrete;
+
+    .micl-navigationrail__headline {
+        display: flex;
+        align-items: center;
+        padding-inline-start: 12px;
+        padding-inline-end: 24px;
+        column-gap: 8px;
+        color: var(--md-sys-color-on-surface-variant);
+
+        h1, h2, h3, h4, h5, h6, .micl-heading {
+            @include typography.title-large;
+
+            flex: 1 2 fit-content;
+            margin: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            user-select: none;
+        }
+    }
+    .micl-navigationrail__content {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        align-items: flex-start;
+        row-gap: 8px;
+        width: 100%;
+        max-width: 100%;
+        padding-inline: var(--md-sys-navigationrail-padding-standard);
+        overflow: hidden auto;
+    }
+    .micl-navigationrail__actions {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        width: 100%;
+        max-width: 100%;
+        height: calc(72px - var(--md-sys-navigationrail-padding-standard));
+        margin: auto 0 0 0;
+        padding-block-start: 16px;
+        overflow: hidden;
+        border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+
+        button:active,
+        button:focus-visible,
+        button:hover {
+            color: var(--md-sys-color-primary);
+        }
+    }
+
+    &::backdrop {
+        background-color: rgba(0, 0, 0, 0);
+        transition:
+            background-color var(--md-sys-navigationrail-motion-duration) linear,
+            overlay var(--md-sys-navigationrail-motion-duration) linear allow-discrete,
+            display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
+    }
+    &[open] {
+        background-color: var(--md-sys-color-surface-container-low);
+        border-start-end-radius: var(--md-sys-shape-corner-large);
+        border-end-end-radius: var(--md-sys-shape-corner-large);
+        box-shadow: var(--md-sys-elevation-level1);
+
+        .micl-navigationrail__headline {
+            padding-inline-end: 4px;
+        }
+    }
+    &:popover-open {
+        border-inline-end: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    }
+    &:popover-open,
+    &[open] {
+        display: flex;
+        margin-inline-start: calc(-1 * var(--md-sys-navigationrail-spring-buffer));
+        opacity: 1;
+        transition:
+            opacity var(--md-sys-navigationrail-motion-duration) linear,
+            margin-inline-start var(--md-sys-navigationrail-motion-duration) var(--md-sys-navigationrail-motion-spatial),
+            overlay var(--md-sys-navigationrail-motion-duration) linear allow-discrete,
+            display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
+
+        @starting-style {
+            margin-inline-start: calc(-1 * (var(--md-sys-navigationrail-maxwidth) + var(--md-sys-navigationrail-spring-buffer)));
+            opacity: 0;
+        }
+    }
+    &[open]::backdrop {
+        background-color: rgba(0, 0, 0, 0.2);
+
+        @starting-style {
+            background-color: rgba(0, 0, 0, 0);
+        }
+    }
+}

package/components/radio/index.scss

@@ -20,7 +20,6 @@
 // SOFTWARE.
 
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
@@ -34,7 +33,6 @@ input[type=radio].micl-radio {
     --md-sys-radio-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
     --md-sys-radio-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
     --md-sys-radio-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
-    --md-sys-ripple-background-color: var(--md-sys-color-primary);
 
     appearance: none;
     box-sizing: border-box;
@@ -47,7 +45,6 @@ input[type=radio].micl-radio {
     background-color: transparent;
     border-radius: var(--md-sys-shape-corner-full);
     outline-offset: -7px;
-    transition: background-color var(--md-sys-radio-motion-duration) linear;
 
     &::after {
         content: "";
@@ -76,15 +73,22 @@ input[type=radio].micl-radio {
     &:not(:disabled) {
         --miclripple: 1;
 
-        @include ripple.effect;
-
+        background-image:
+            radial-gradient(circle at var(--x, center) var(--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:
+            background-size 3000ms,
+            --statelayer-opacity var(--md-sys-radio-motion-duration) linear;
 
         &:hover {
-            background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-color: var(--md-sys-color-on-surface);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
             &:checked {
-                background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                --statelayer-color: var(--md-sys-color-primary);
             }
             &::after {
                 border-color: var(--md-sys-color-on-surface);
@@ -94,11 +98,13 @@ input[type=radio].micl-radio {
             }
         }
         &:focus-visible {
-            background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-focus-state-layer-opacity));
+            --statelayer-color: var(--md-sys-color-on-surface);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+
             outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
 
             &:checked {
-                background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
+                --statelayer-color: var(--md-sys-color-primary);
             }
             &::after {
                 border-color: var(--md-sys-color-on-surface);
@@ -108,10 +114,14 @@ input[type=radio].micl-radio {
             }
         }
         &:active {
-            background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            --statelayer-color: var(--md-sys-color-on-surface);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
 
             &:checked {
-                background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                --statelayer-color: var(--md-sys-color-primary);
             }
             &::after {
                 border-color: var(--md-sys-color-on-surface);

package/components/select/index.scss

@@ -20,19 +20,14 @@
 // SOFTWARE.
 
 @use '../../styles/elevation';
-@use '../../styles/ripple';
+@use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 .micl-textfield-filled > select,
 .micl-textfield-outlined > select {
-    --md-sys-option-one-height: var(--md-sys-list-item-one-height);
-    --md-sys-option-one-padding: var(--md-sys-list-item-one-padding);
-    --md-sys-option-two-padding: 8px;
-    --md-sys-option-three-padding: 12px;
-    --md-sys-option-space: 16px;
-    --md-sys-option-padding-inline: 16px;
+    --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
 
     appearance: base-select;
 
@@ -63,10 +58,6 @@
         --md-sys-list-item-space: 12px;
         --md-sys-list-item-padding-inline: 16px;
         --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
-        --md-sys-state-hover-state-layer-opacity: #{statelayer.$md-sys-state-hover-state-layer-opacity};
-        --md-sys-state-focus-state-layer-opacity: #{statelayer.$md-sys-state-focus-state-layer-opacity};
-        --md-sys-state-pressed-state-layer-opacity: #{statelayer.$md-sys-state-pressed-state-layer-opacity};
-        --md-sys-state-focus-indicator-thickness: #{statelayer.$md-sys-state-focus-indicator-thickness};
 
         border-radius: 0px;
 
@@ -102,6 +93,9 @@
             color: var(--md-sys-color-on-surface-variant);
             white-space: normal;
         }
+        &::checkmark {
+            color: var(--md-sys-color-on-surface);
+        }
     }
 }
 

package/components/textfield/index.scss

@@ -253,19 +253,25 @@
         &> input:not(:disabled),
         &> select:not(:disabled),
         &> textarea:not(:disabled) {
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+
             border-block-end-color: var(--md-sys-color-on-surface);
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
         }
     }
     &> input,
     &> select,
     &> textarea {
+        --statelayer-color: var(--md-sys-color-on-surface);
+
         padding-block-start: 18px;
         padding-block-end: 2px;
-        background-color: var(--md-sys-color-surface-container-highest);
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         outline: none;
+        background-color: var(--md-sys-color-surface-container-highest);
+        background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+        background-repeat: no-repeat;
+        transition: --statelayer-opacity var(--md-sys-textfield-motion-duration) linear;
 
         &:disabled {
             background-color: rgb(from var(--md-sys-color-on-surface) r g b / 4%);

package/dist/bottomsheet.css

@@ -1 +1 @@
-:root{--md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;--md-sys-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-sys-bottomsheet-motion-duration: 650ms;--md-sys-bottomsheet-motion-duration-reverse: 500ms;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;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration-reverse) cubic-bezier(0.3, 0, 0.8, 0.15),height 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}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height: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);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,background-color var(--md-sys-bottomsheet-motion-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration) cubic-bezier(0.05, 0.7, 0.1, 1),height 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{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@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);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}}
+:root{--md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;--md-sys-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-sys-bottomsheet-motion-duration: 650ms;--md-sys-bottomsheet-motion-duration-reverse: 500ms;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;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration-reverse) cubic-bezier(0.3, 0, 0.8, 0.15),height 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}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height: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);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,background-color var(--md-sys-bottomsheet-motion-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration) cubic-bezier(0.05, 0.7, 0.1, 1),height 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{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@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);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}}