material-inspired-component-library 1.0.3 → 1.1.1

package/components/switch/index.scss

@@ -20,6 +20,9 @@
 // SOFTWARE.
 
 @use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
+@use '../../styles/typography';
 
 input[type=checkbox].micl-switch {
     --md-sys-switch-target-height: 32px;

package/components/textfield/README.md

@@ -17,22 +17,18 @@ A basic text field can be either `filled` or `outlined`. To create one, use the
 Import the text field styles into your project:
 
 ```CSS
-@use "material-inspired-component-library/components/textfield";
+@use "material-inspired-component-library/dist/textfield";
 ```
 
-### TypeScript
-This component requires a TypeScript module for interactive features like the **character counter**. You can import the specific module and handle initialization manually, or use the main MICL library for automatic initialization.
+### JavaScript
+This component requires JavaScript for interactive features like the **character counter**:
 
-To manually initialize the component and attach an event listener for the `input` event:
-
-```TypeScript
-import miclTextField from 'material-inspired-component-library/components/textfield';
-
-miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
-
-document.querySelector('.micl-textfield-outlined').addEventListener('input', miclTextField.input);
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
 ```
 
+This will initialize any Text field component, including those that will be added to the DOM later on.
+
 ### Demo
 A live example of the [Text field component](https://henkpb.github.io/micl/textfield.html) is available for you to interact with.
 
@@ -41,35 +37,68 @@ The following example shows a text field with every available feature. You can i
 
 ```HTML
 <div class="micl-textfield-filled">
-  <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
+  <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
   <label for="mytextfield">Label text</label>
-  <span class="micl-textfield__prefix">$</span>
-  <input type="text" id="mytextfield" maxlength="20">
-  <span class="micl-textfield__suffix">kg</span>
-  <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
-  <span class="micl-textfield__supporting-text">Supporting text</span>
+  <span class="micl-textfield__prefix" aria-label="US dollars">$</span>
+  <input type="text" id="mytextfield" maxlength="20" aria-describedby="mysupport">
+  <span class="micl-textfield__suffix" aria-label="kilograms">kg</span>
+  <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
+  <span id="mysupport" class="micl-textfield__supporting-text">Supporting text</span>
   <span class="micl-textfield__character-counter"></span>
 </div>
 ```
 
 The `<input>` element can have the following types: `text`, `date`, `datetime-local`, `email`, `month`, `number`, `password`, `tel`, `time`, `url` and `week`.
 
-Two icons may be included in the layout: a **leading icon** (an element containing the `micl-textfield__icon-leading` class), and a **trailing icon** (an element containing the `micl-textfield__icon-trailing` class).
+Adding the `disabled` boolean attribute to the `<input>` element causes the text field to be displayed in a disabled state.
 
-A **prefix** (e.g., "$") and a **suffix** (e.g., "kg") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+Adding the `micl-textfield--error` class to the text field displays it in an error state.
 
-```HTML
-<span class="micl-textfield__prefix" style="--md-sys-textfield-prefix-space:20px">USD</span>
-<span class="micl-textfield__suffix" style="--md-sys-textfield-suffix-space:10em">@gmail.com</span>
-```
+### Leading Content
+The data-input element can be preceded by various elements:
+
+- **Icon**: Use `micl-textfield__icon-leading` with a (Material Symbols) icon.
+
+- **Prefix**: A prefix (e.g., "$", "NOK") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+  ```HTML
+  <span class="micl-textfield__prefix" style="--md-sys-textfield-prefix-space:20px">USD</span>
+  ```
+
+### Trailing Content
+The data-input element may be followed by a trailing text or other element:
+
+- **Icon**: Use `micl-textfield__icon-trailing` with a (Material Symbols) icon.
+
+- **Suffix**: A suffix (e.g., "kg", "@gmail.com") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+  ```HTML
+  <span class="micl-textfield__suffix" style="--md-sys-textfield-suffix-space:10em">@gmail.com</span>
+  ```
 
-Use an element with the `micl-textfield__supporting-text` class to add extra information about the text field.
+### Supporting Content
+Use an element with the `micl-textfield__supporting-text` class to add extra information about the text field. If you want this element only to be visible when the text field is focused, add the `micl-textfield__supporting-text--focus` as well.
 
 If the `<input>` element includes the `maxlength` attribute, the **character counter** will display automatically in the element with the `micl-textfield__character-counter` class.
 
-Adding the `disabled` boolean attribute to the `<input>` element causes the text field to be displayed in a disabled state.
+### Multi-line Text Field
+Replace the `<input>` element with the `<textarea>` element to create a multi-line text field:
 
-Adding the `micl-textfield--error` class to the text field displays it in an error state.
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="mytextfield">Label text</label>
+  <textarea id="mytextfield"></textarea>
+</div>
+```
+
+Add a value to the `rows` attribute of the `<textarea>` element to create a text field of fixed height:
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="mytextfield">Label text</label>
+  <textarea id="mytextfield" rows="4"></textarea>
+</div>
+```
 
 ## Compatibility
 This component uses relative RGB colors, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.
+
+The multi-line text field variant uses the `field-sizing` CSS property, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing#browser_compatibility) for details.

package/components/textfield/index.scss

@@ -20,10 +20,13 @@
 // SOFTWARE.
 
 @use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
 .micl-textfield-filled,
 .micl-textfield-outlined {
+    --md-sys-textfield-height: 56px;
     --md-sys-textfield-icon-size: 24px;
     --md-sys-textfield-icon-space: 12px;
     --md-sys-textfield-input-space: 16px;
@@ -40,30 +43,29 @@
 
         box-sizing: content-box;
         grid-area: textfield;
+        align-self: flex-start;
         width: fit-content;
-        line-height: 1;
         padding-inline: 4px;
-        margin-block-start: 0px;
+        margin-block-start: calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height)) / 2);
         margin-inline-start: 12px;
         border-radius: 4px;
         background-color: inherit;
         color: var(--md-sys-color-on-surface-variant);
         z-index: 1;
         transition:
-            margin-block-start var(--md-sys-motion-duration-long1) var(--md-sys-motion-duration-short3) linear(motion.$md-sys-motion-spring-default-spatial),
-            margin-inline-start var(--md-sys-motion-duration-long1) var(--md-sys-motion-duration-short3) linear(motion.$md-sys-motion-spring-default-spatial),
-            font-size var(--md-sys-motion-duration-long1),
-            letter-spacing var(--md-sys-motion-duration-long1);
+            margin-block-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
+            margin-inline-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
+            font-size var(--md-sys-motion-duration-medium2),
+            letter-spacing var(--md-sys-motion-duration-medium2);
     }
     &> input,
-    &> select {
+    &> select,
+    &> textarea {
         @include typography.body-large;
 
         box-sizing: border-box;
         grid-area: textfield;
-        height: 56px;
         margin: 0;
-        padding-block: 0;
         padding-inline: var(--md-sys-textfield-input-space);
         border: none;
         border-block-end: 1px solid var(--md-sys-color-on-surface-variant);
@@ -75,7 +77,7 @@
         caret-color: var(--md-sys-color-primary);
 
         &:disabled {
-            border-color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            border-block-end-color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
             color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
         }
         &::placeholder {
@@ -90,13 +92,32 @@
             -moz-appearance: textfield;
         }
     }
+    &> input,
+    &> select {
+        height: var(--md-sys-textfield-height);
+        padding-block: 0;
+    }
+    &> textarea {
+        min-height: var(--md-sys-textfield-height);
+        padding-block: calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height)) / 2);
+        resize: none;
+
+        &[rows] {
+            padding-block-start: 0;
+            border-block-start: 8px solid transparent;
+            overflow: hidden;
+        }
+        &:not([rows]) {
+            field-sizing: content;
+        }
+    }
     &> .micl-textfield__prefix,
     &> .micl-textfield__suffix {
         @include typography.body-large;
 
         grid-area: textfield;
         align-content: center;
-        height: 56px;
+        height: var(--md-sys-textfield-height);
         color: var(--md-sys-color-on-surface-variant);
         opacity: 0;
         z-index: 1;
@@ -124,12 +145,14 @@
         margin-inline: auto var(--md-sys-textfield-icon-space);
     }
     &:has(> .micl-textfield__prefix) {
-        &> input {
+        &> input,
+        &> textarea {
             padding-inline-start: calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-prefix-space));
         }
     }
     &:has(> .micl-textfield__suffix) {
-        &> input {
+        &> input,
+        &> textarea {
             padding-inline-end: calc(var(--md-sys-textfield-suffix-space) + var(--md-sys-textfield-input-space));
         }
     }
@@ -138,19 +161,23 @@
             margin-inline-start: calc(var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-input-space));
         }
         &> .micl-textfield__prefix,
-        &> input {
+        &> input,
+        &> textarea {
             padding-inline-start: calc(var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-input-space));
         }
-        &:has(> .micl-textfield__prefix) > input {
+        &:has(> .micl-textfield__prefix) > input,
+        &:has(> .micl-textfield__prefix) > textarea {
             padding-inline-start: calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-prefix-space));
         }
     }
     &:has(> .micl-textfield__icon-trailing) {
         &> .micl-textfield__suffix,
-        &> input {
+        &> input,
+        &> textarea {
             padding-inline-end: calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space));
         }
-        &:has(> .micl-textfield__suffix) > input {
+        &:has(> .micl-textfield__suffix) > input,
+        &:has(> .micl-textfield__suffix) > textarea {
             padding-inline-end: calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-prefix-space) + var(--md-sys-textfield-icon-space));
         }
     }
@@ -162,28 +189,33 @@
         padding-block: 4px 0;
         padding-inline: 16px;
         color: var(--md-sys-color-on-surface-variant);
+
+        &.micl-textfield__supporting-text--focus {
+            visibility: hidden;
+        }
     }
     &> .micl-textfield__character-counter {
         justify-self: flex-end;
     }
     &:has(> input:active),
     &:has(> select:active),
+    &:has(> textarea:active),
     &:has(> input:focus),
     &:has(> select:focus),
+    &:has(> textarea:focus),
     &:has(> input:focus-visible),
-    &:has(> select:focus-visible) {
+    &:has(> select:focus-visible),
+    &:has(> textarea:focus-visible) {
         &> label {
             color: var(--md-sys-color-primary);
         }
-        &> .micl-textfield__icon-leading,
-        &> .micl-textfield__icon-trailing,
-        &> .micl-textfield__supporting-text,
-        &> .micl-textfield__character-counter {
-            color: var(--md-sys-color-on-surface-variant);
+        &> .micl-textfield__supporting-text.micl-textfield__supporting-text--focus {
+            visibility: visible;
         }
     }
     &:has(> input:disabled),
-    &:has(> select:disabled) {
+    &:has(> select:disabled),
+    &:has(> textarea:disabled) {
         &> label {
             color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
         }
@@ -196,12 +228,14 @@
             display: none;
         }
     }
-    &:has(> input:not([maxlength])) {
+    &:has(> input:not([maxlength])),
+    &:has(> textarea:not([maxlength])) {
         &> .micl-textfield__character-counter {
             display: none;
         }
     }
-    &:has(> input[maxlength]:not(:disabled)):has(> .micl-textfield__character-counter) {
+    &:has(> input[maxlength]:not(:disabled)):has(> .micl-textfield__character-counter),
+    &:has(> textarea[maxlength]:not(:disabled)):has(> .micl-textfield__character-counter) {
         &> .micl-textfield__supporting-text {
             padding-inline-end: 64px;
         }
@@ -214,14 +248,17 @@
     }
     &:hover {
         &> input:not(:disabled),
-        &> select:not(:disabled) {
-            border-color: var(--md-sys-color-on-surface);
+        &> select:not(:disabled),
+        &> textarea:not(:disabled) {
+            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 {
-        padding-block-start: 16px;
+    &> select,
+    &> textarea {
+        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;
@@ -233,14 +270,17 @@
         &:not(:disabled):focus,
         &:not(:disabled):focus-visible,
         &:not(:disabled):active {
-            padding-block-start: 18px;
-            border-width: 3px;
-            border-color: var(--md-sys-color-primary);
+            padding-block-end: 0px;
+            border-block-end-width: 3px;
+            border-block-end-color: var(--md-sys-color-primary);
         }
     }
     &> select {
         line-height: 28px;
     }
+    &> textarea {
+        padding-block-start: 24px;
+    }
     &:has(
         > input:focus,
         > input[value]:not([value='']):not([data-miclinitialized]),
@@ -252,12 +292,15 @@
         > input[type=week],
         > select:focus,
         > select[value]:not([value='']):not([data-miclinitialized]),
-        > select[data-miclvalue]
+        > select[data-miclvalue],
+        > textarea:focus,
+        > textarea:not(:empty):not([data-miclinitialized]),
+        > textarea[data-miclvalue]
     ) {
         &> label {
             @include typography.body-small;
 
-            margin-block-start: -24px;
+            margin-block-start: 8px;
             margin-inline-start: 12px;
         }
         &:has(> .micl-textfield__icon-leading) > label {
@@ -279,13 +322,15 @@
             color: var(--md-sys-color-on-surface);
         }
         &> input:not(:disabled),
-        &> select:not(:disabled) {
+        &> select:not(:disabled),
+        &> textarea:not(:disabled) {
             outline-color: var(--md-sys-color-on-surface);
             color: var(--md-sys-color-on-surface);
         }
     }
     &> input,
-    &> select {
+    &> select,
+    &> textarea {
         border: none;
         outline: 1px solid var(--md-sys-color-outline);
 
@@ -300,7 +345,7 @@
         }
     }
     &> select {
-        line-height: 56px;
+        line-height: var(--md-sys-textfield-height);
     }
     &:has(
         > input:focus,
@@ -313,12 +358,15 @@
         > input[type=week],
         > select:focus,
         > select[value]:not([value='']):not([data-miclinitialized]),
-        > select[data-miclvalue]
+        > select[data-miclvalue],
+        > textarea:focus,
+        > textarea:not(:empty):not([data-miclinitialized]),
+        > textarea[data-miclvalue]
     ) {
         &> label {
             @include typography.body-small;
 
-            margin-block-start: -56px;
+            margin-block-start: calc(-2px - var(--md-sys-typescale-body-small-line-height) / 2);
             margin-inline-start: 12px;
         }
         &> .micl-textfield__prefix,
@@ -336,18 +384,17 @@
     &> .micl-textfield__character-counter {
         color: var(--md-sys-color-error);
     }
-    &> input {
-        border-color: var(--md-sys-color-error);
+    &> input,
+    &> textarea {
+        border-block-end-color: var(--md-sys-color-error);
         outline-color: var(--md-sys-color-error);
-        color: var(--md-sys-color-on-surface);
         caret-color: var(--md-sys-color-error);
 
         &:active,
         &:focus,
         &:focus-visible {
-            border-color: var(--md-sys-color-error);
+            border-block-end-color: var(--md-sys-color-error);
             outline-color: var(--md-sys-color-error);
-            color: var(--md-sys-color-on-surface);
         }
     }
     &:hover {
@@ -355,22 +402,20 @@
         &> .micl-textfield__icon-trailing {
             color: var(--md-sys-color-on-error-container);
         }
-        &> input {
-            border-color: var(--md-sys-color-on-error-container);
+        &> input,
+        &> textarea {
+            border-block-end-color: var(--md-sys-color-on-error-container);
             outline-color: var(--md-sys-color-on-error-container);
         }
-        &> .micl-textfield__supporting-text,
-        &> .micl-textfield__character-counter {
-            color: var(--md-sys-color-error);
-        }
     }
     &:has(> input:active),
     &:has(> input:focus),
-    &:has(> input:focus-visible) {
+    &:has(> input:focus-visible),
+    &:has(> textarea:active),
+    &:has(> textarea:focus),
+    &:has(> textarea:focus-visible) {
         &> label,
-        &> .micl-textfield__icon-trailing,
-        &> .micl-textfield__supporting-text,
-        &> .micl-textfield__character-counter {
+        &> .micl-textfield__icon-trailing {
             color: var(--md-sys-color-error);
         }
     }

package/components/textfield/index.ts

@@ -21,13 +21,14 @@
 
 export const textfieldSelector = '.micl-textfield-outlined > input,.micl-textfield-filled > input';
 export const selectSelector    = '.micl-textfield-outlined > select,.micl-textfield-filled > select';
+export const textareaSelector  = '.micl-textfield-outlined > textarea,.micl-textfield-filled > textarea';
 
 export default (() =>
 {
-    const counterSelector = '.micl-textfield-character-counter';
+    const counterSelector = '.micl-textfield__character-counter';
 
     return {
-        initialize: (element: HTMLInputElement | HTMLSelectElement): void =>
+        initialize: (element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
         {
             if (element.dataset.miclinitialized) {
                 return;
@@ -39,21 +40,25 @@ export default (() =>
             }
 
             if (
-                (element instanceof HTMLInputElement)
-                && !!element.maxLength
+                (element instanceof HTMLSelectElement)
+                || !element.maxLength
             ) {
-                const counter = element.parentElement?.querySelector(counterSelector);
-                if (counter) {
-                    counter.textContent = `${element.value.length}/${element.maxLength}`;
-                }
+                return;
+            }
+
+            const counter = element.parentElement?.querySelector(counterSelector);
+            if (counter) {
+                counter.textContent = `${element.value.length}/${element.maxLength}`;
             }
         },
 
         input: (event: Event): void =>
         {
             if (
-                !(event.target as Element).matches(`${textfieldSelector},${selectSelector}`)
-                || !((event.target instanceof HTMLInputElement) || (event.target instanceof HTMLSelectElement))
+                !(event.target as Element).matches(`${textfieldSelector},${selectSelector},${textareaSelector}`)
+                || !((event.target instanceof HTMLInputElement)
+                    || (event.target instanceof HTMLSelectElement)
+                    || (event.target instanceof HTMLTextAreaElement))
                 || !event.target.dataset.miclinitialized
                 || event.target.disabled
             ) {
@@ -68,13 +73,15 @@ export default (() =>
             }
 
             if (
-                (event.target instanceof HTMLInputElement)
-                && !!event.target.maxLength
+                (event.target instanceof HTMLSelectElement)
+                || !event.target.maxLength
             ) {
-                const counter = event.target.parentElement?.querySelector(counterSelector);
-                if (counter) {
-                    counter.textContent = `${event.target.value.length}/${event.target.maxLength}`;
-                }
+                return;
+            }
+
+            const counter = event.target.parentElement?.querySelector(counterSelector);
+            if (counter) {
+                counter.textContent = `${event.target.value.length}/${event.target.maxLength}`;
             }
         }
     };

package/dist/bottomsheet.css

@@ -1 +1 @@
-: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}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;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:display var(--md-sys-motion-duration-medium1) allow-discrete,overlay var(--md-sys-motion-duration-medium1) allow-discrete,height var(--md-sys-motion-duration-medium1) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-medium1) cubic-bezier(0.3, 0, 0.8, 0.15)}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:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,background-color var(--md-sys-motion-duration-long2) 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:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,height var(--md-sys-motion-duration-long2) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}@starting-style{dialog.micl-bottomsheet:popover-open::backdrop,dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@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-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;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:display var(--md-sys-motion-duration-medium1) allow-discrete,overlay var(--md-sys-motion-duration-medium1) allow-discrete,height var(--md-sys-motion-duration-medium1) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-medium1) cubic-bezier(0.3, 0, 0.8, 0.15)}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:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,background-color var(--md-sys-motion-duration-long2) 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:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,height var(--md-sys-motion-duration-long2) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}@starting-style{dialog.micl-bottomsheet:popover-open::backdrop,dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@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}}

package/dist/bottomsheet.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.micl=o():e.micl=o()}(self,()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());