material-inspired-component-library 1.0.0

package/components/menu/index.ts

@@ -0,0 +1,77 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+export const 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');
+
+        return ((invokerY > popoverY) ? 'bottom ' : 'top ') +
+               ((parseInt(oldOrigin) > 0) ? 'right' : 'left');
+    };
+
+    return {
+        initialize: (element: HTMLElement): void =>
+        {
+            if (
+                !element.matches('.micl-menu[popover]')
+                || element.dataset.miclinitialized
+            ) {
+                return;
+            }
+            element.dataset.miclinitialized = '1';
+
+            const invoker = document.querySelector(`[popovertarget="${element.id}"]`);
+
+            invoker && element.addEventListener('beforetoggle', event =>
+            {
+                if ((event as ToggleEvent).oldState === 'open') {
+                    // The popover is about to be closed.
+                    element.style.transformOrigin = getOrigin(invoker, element);
+                }
+            });
+            invoker && element.addEventListener('toggle', event =>
+            {
+                if ((event as ToggleEvent).oldState === 'closed') {
+                    // The popover has just opened.
+                    element.style.transformOrigin = getOrigin(invoker, element);
+                }
+            });
+
+        }
+    };
+})();

package/components/menu/menu.scss

@@ -0,0 +1,124 @@
+//
+// 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/motion';
+@use '../../styles/ripple';
+
+.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-block: 8px;
+    padding-inline: 0;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    background-color: var(--md-sys-color-surface-container);
+    box-shadow: var(--md-sys-elevation-level2);
+    opacity: 0;
+    transform: scaleY(0);
+    transform-origin: top left;
+    transition:
+        opacity var(--md-sys-motion-duration-medium1),
+        transform var(--md-sys-motion-duration-medium1),
+        overlay var(--md-sys-motion-duration-medium1) allow-discrete,
+        display var(--md-sys-motion-duration-medium1) allow-discrete;
+
+    &:popover-open {
+        opacity: 1;
+        transform: scaleY(1);
+        transition:
+            opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate,
+            transform var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial),
+            overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
+            display var(--md-sys-motion-duration-long2) 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);
+
+            @starting-style {
+                background-color: rgba(0, 0, 0, 0);
+            }
+        }
+    }
+    &::backdrop {
+        background-color: rgba(0, 0, 0, 0);
+        transition:
+            background-color var(--md-sys-motion-duration-long2),
+            overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
+            display var(--md-sys-motion-duration-long2) linear allow-discrete;
+    }
+
+    .micl-list {
+        --md-sys-list-item-one-height: 48px;
+        --md-sys-list-item-one-padding: 0;
+        --md-sys-list-item-two-padding: 0;
+        --md-sys-list-item-space: 12px;
+        --md-sys-list-item-background-color: var(--md-sys-color-surface-container);
+
+        .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;
+                overflow: clip;
+                overflow-clip-margin: 8px;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    inset-block-start: -8px;
+                    inset-inline-start: 0;
+                    width: 100%;
+                    border-top: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+                }
+            }
+        }
+    }
+}

package/components/radio/README.md

@@ -0,0 +1,53 @@
+# Radio button
+This component implements the the [Material Design 3 Expressive Radio button](https://m3.material.io/components/radio-button/overview) design.
+
+## Basic Usage
+
+### HTML
+To add a basic radio button, use the `<input type="radio">` element with the `micl-radio` class, paired with a `<label>` element:
+
+```HTML
+<input type="radio" id="myradio" class="micl-radio" name="foo" value="bar">
+<label for="myradio">First choice</label>
+```
+
+### CSS
+Import the radio button styles into your project:
+
+```CSS
+@use "micl/components/radio";
+```
+
+### TypeScript
+No custom TypeScript is required for the core functionality of this component. However, to enable the ripple effect on interaction, include the Ripple TypeScript in your project.
+
+### Demo
+A live example of the [Radio button component](https://henkpb.github.io/micl/radio.html) is available for you to interact with.
+
+## Variants
+A radio button can be disabled by adding the `disabled` attribute to the `<input>` element.
+
+The Radio Button component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
+
+By default, the component applies a specific color and `cursor: pointer` to `<label>` elements immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
+
+## Customizations
+You can customize the appearance of the Radio Button 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 radio buttons.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-radio-border-width | 2px | Controls the thickness of the radio button's border |
+| --md-sys-radio-container-size | 20px | Defines the diameter of the radio button itself |
+| --md-sys-radio-state-layer-size | 40px | Sets the size of the interactive area that indicates the component's current state (e.g., hover, focus, press) |
+
+**Example: Changing the size of the radio button**
+
+```HTML
+<div style="--md-sys-radio-container-size:28px">
+    <input type="radio" id="myradio" class="micl-radio">
+    <label for="myradio">Large radio button</label>
+</div>
+```
+
+## Compatibility
+This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.

package/components/radio/radio.scss

@@ -0,0 +1,138 @@
+//
+// 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/motion';
+@use '../../styles/ripple';
+
+:root {
+    --md-sys-radio-border-width: 2px;
+    --md-sys-radio-container-size: 20px;
+    --md-sys-radio-state-layer-size: 40px;
+}
+
+input[type=radio].micl-radio {
+    --md-sys-ripple-background-color: var(--md-sys-color-primary);
+
+    appearance: none;
+    box-sizing: border-box;
+    position: relative;
+    width: var(--md-sys-target-size);
+    height: var(--md-sys-target-size);
+    margin: 0;
+    border: calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size)) / 2) solid transparent;
+    background-clip: content-box;
+    background-color: transparent;
+    border-radius: var(--md-sys-shape-corner-full);
+    outline-offset: -7px;
+    transition: background-color var(--md-sys-motion-duration-long2);
+
+    &::after {
+        content: "";
+        box-sizing: border-box;
+        position: absolute;
+        width: var(--md-sys-radio-container-size);
+        height: var(--md-sys-radio-container-size);
+        inset: 0;
+        margin: auto;
+        padding: calc((var(--md-sys-radio-container-size) / 2) - var(--md-sys-radio-border-width));
+        border: var(--md-sys-radio-border-width) solid var(--md-sys-color-on-surface-variant);
+        background-color: var(--md-sys-color-primary);
+        background-clip: content-box;
+        border-radius: var(--md-sys-shape-corner-full);
+        transition:
+            padding var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized,
+            border-color var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized;
+    }
+    &:checked::after {
+        border-color: var(--md-sys-color-primary);
+        padding: 3px;
+        transition:
+            padding var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
+            border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
+    }
+    &:not(:disabled) {
+        --miclripple: 1;
+
+        @include ripple.effect;
+
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgb(from var(--md-sys-color-on-surface) r g b / 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));
+            }
+            &::after {
+                border-color: var(--md-sys-color-on-surface);
+            }
+            &:checked::after {
+                border-color: var(--md-sys-color-primary);
+            }
+        }
+        &:focus-visible {
+            background-color: rgb(from var(--md-sys-color-on-surface) r g b / 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));
+            }
+            &::after {
+                border-color: var(--md-sys-color-on-surface);
+            }
+            &:checked::after {
+                border-color: var(--md-sys-color-primary);
+            }
+        }
+        &:active {
+            background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+
+            &:checked {
+                background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            }
+            &::after {
+                border-color: var(--md-sys-color-on-surface);
+            }
+            &:checked::after {
+                border-color: var(--md-sys-color-primary);
+            }
+        }
+    }
+    &:disabled {
+        opacity: 38%;
+
+        &::after {
+            border-color: var(--md-sys-color-on-surface);
+        }
+        &:checked::after {
+            background-color: var(--md-sys-color-on-surface);
+        }
+    }
+}
+
+input[type=radio].micl-radio:not(:disabled) + label,
+label:has(+ input[type=radio].micl-radio:not(:disabled)) {
+    cursor: pointer;
+}
+input[type=radio].micl-radio + label,
+label + input[type=radio].micl-radio {
+    color: var(--md-sys-color-on-surface);
+}

package/components/select/README.md

@@ -0,0 +1,84 @@
+# Select
+This component implements the the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design.
+
+## Basic Usage
+
+### HTML
+The Select component is an extension of the [Text field](../textfield/README.md) and the [List](../list/README.md). It can be either `filled` or `outlined`. To create a basic select, use the following HTML and swap the class name to change the style.
+
+```HTML
+<div class="micl-textfield-filled">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    <option class="micl-list-item-one" value="AR">
+        <span class="micl-list-item__text">Argentina</span>
+    </option>
+    <option class="micl-list-item-one" value="BO">
+        <span class="micl-list-item__text">Bolivia</span>
+    </option>
+  </select>
+</div>
+```
+
+### CSS
+The Select component relies on styles from the text field and list components. Be sure to import all three styles into your project.
+
+```CSS
+@use "micl/components/list";
+@use "micl/components/textfield";
+@use "micl/components/select";
+```
+
+### TypeScript
+This component requires the **Text field** TypeScript module for functionality. You can import the specific module and handle initialization manually, or use the main MICL library for automatic initialization.
+
+To manually initialize the component:
+
+```TypeScript
+import miclTextField from 'micl/components/textfield';
+
+miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
+```
+
+### Demo
+A live example of the [Select component](https://henkpb.github.io/micl/select.html) is available for you to interact with.
+
+## Variants
+To display extra information for an option, add the `aria-description` attribute to the `<option>` element. In a two-line list item (`micl-list-item-two`), this displays the attribute's content as supporting text. Do not add a separate text element to the `<option>`, as this will change the text of the selected option.
+
+**Example: A select with supporting text**
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    <option class="micl-list-item-two" value="AR">
+        <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+    </option>
+    <option class="micl-list-item-two" value="BO">
+        <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
+    </option>
+  </select>
+</div>
+```
+
+The text content of an option can be preceded by various media elements:
+
+- **Image**: Use `micl-list-item__image` with a background image.
+  ```HTML
+  <option class="micl-list-item-two" value="AR">
+    <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
+    <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+  </option>
+  ```
+
+- **Thumbnail**: Use `micl-list-item__thumbnail` for video previews with a background-image.
+  ```HTML
+  <option class="micl-list-item-two" value="AR">
+    <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
+    <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+  </option>
+  ```
+
+## Compatibility
+This component uses modern browser features to style the `<select>` element, which may not be fully supported in all browsers. Browsers that do not support these features will display a default select menu. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/::picker#browser_compatibility) for details.

package/components/select/select.scss

@@ -0,0 +1,122 @@
+//
+// 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/motion';
+@use '../../styles/ripple';
+@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;
+
+    appearance: base-select;
+
+    &::picker-icon {
+      color: var(--md-sys-color-on-surface-variant);
+      transition: 0.4s rotate;
+    }
+    &:open::picker-icon {
+      rotate: 180deg;
+    }
+    &::picker(select) {
+        appearance: base-select;
+        min-inline-size: max(anchor-size(self-inline), 112px);
+        max-inline-size: 280px;
+        padding-block: 8px;
+        padding-inline: 0;
+        border: none;
+        border-radius: var(--md-sys-shape-corner-extra-small);
+        background-color: var(--md-sys-color-surface-container);
+        box-shadow: var(--md-sys-elevation-level2);
+    }
+
+    option {
+        --md-sys-list-item-one-height: 48px;
+        --md-sys-list-item-two-height: 64px;
+        --md-sys-list-item-one-padding: 0;
+        --md-sys-list-item-two-padding: 0;
+        --md-sys-list-item-space: 12px;
+        --md-sys-list-item-padding-inline: 16px;
+        --md-sys-list-item-background-color: var(--md-sys-color-surface-container);
+        --md-sys-motion-duration-long2: 500ms;
+        --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;
+
+        &:not(:disabled) {
+            cursor: pointer;
+        }
+        &:checked {
+            background-color: var(--md-sys-color-secondary-container);
+
+            .micl-list-item__text {
+                color: var(--md-sys-color-on-secondary-container);
+
+                &::after {
+                    color: var(--md-sys-color-on-surface);
+                }
+            }
+        }
+        &:focus-visible {
+            outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness));
+            z-index: 1;
+        }
+
+        .micl-list-item__text {
+            @include typography.body-large;
+
+            color: var(--md-sys-color-on-surface);
+        }
+        .micl-list-item__text::after {
+            @include typography.body-medium;
+
+            content: attr(aria-description);
+            display: block;
+            color: var(--md-sys-color-on-surface-variant);
+            white-space: normal;
+        }
+    }
+}
+
+dialog.micl-dialog:has(.micl-textfield-filled > select),
+dialog.micl-dialog:has(.micl-textfield-outlined > select),
+dialog.micl-dialog-fullscreen:has(.micl-textfield-filled > select),
+dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select) {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    margin: auto;
+    transform: scale(50%);
+}
+dialog.micl-dialog:has(.micl-textfield-filled > select):popover-open,
+dialog.micl-dialog:has(.micl-textfield-outlined > select):popover-open,
+dialog.micl-dialog-fullscreen:has(.micl-textfield-filled > select):popover-open,
+dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select):popover-open {
+    transform: scale(100%);
+}