material-inspired-component-library 6.0.2 → 6.0.3

package/components/select/index.scss

@@ -49,6 +49,9 @@
       transition: motion.$md-sys-motion-duration-medium4 rotate;
       transform-origin: 50% calc((var(--md-sys-select-line-height) / 2) - 1px);
     }
+    &:disabled::picker-icon {
+        color: rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    }
     &:open::picker-icon {
       rotate: 180deg;
     }

package/components/snackbar/index.scss

@@ -0,0 +1,78 @@
+//
+// 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 '../../foundations';
+
+:root {
+    --md-comp-snackbar-margin: 24px;
+}
+
+.micl-snackbar {
+    position: fixed;
+    display: grid;
+    grid-template-rows: 0fr;
+    align-content: flex-end;
+    inset: auto;
+    inset-block-end: 24px;
+    inset-block-end: calc(var(--md-comp-snackbar-margin) + env(safe-area-inset-bottom));
+    inset-inline-start: 50%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    opacity: 0;
+    overflow: visible;
+    translate: -50% 0;
+    transition:
+        opacity 300ms ease-out,
+        grid-template-rows 0s linear 300ms,
+        display 300ms allow-discrete,
+        overlay 300ms allow-discrete;
+
+    &:popover-open {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        transition:
+            grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
+            opacity 300ms ease-out;
+
+        @starting-style {
+            grid-template-rows: 0fr;
+            opacity: 0;
+        }
+    }
+
+    .micl-snackbar__inner {
+        min-block-size: 0;
+        min-inline-size: 300px;
+        border-radius: 8px;
+        background: darkgray;
+        color: white;
+        overflow: hidden;
+
+        .micl-snackbar__content {
+            display: flex;
+            padding: 16px;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+}

package/components/snackbar/index.ts

@@ -0,0 +1,56 @@
+//
+// 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 snackbarSelector = '.micl-snackbar';
+
+export default (() =>
+{
+    return {
+        initialize: (element: HTMLElement): void =>
+        {
+            if (
+                !element.matches(snackbarSelector)
+                || element.dataset.miclinitialized
+            ) {
+                return;
+            }
+            element.dataset.miclinitialized = '1';
+
+            const delay = parseInt(element.dataset.micldelay || '0', 10);
+            if (!isNaN(delay) && delay > 0) {
+                element.addEventListener('toggle', event =>
+                {
+                    let timeoutid = parseInt(element.dataset.micltimeoutid || '0', 10);
+                    if (timeoutid > 0) {
+                        clearTimeout(timeoutid);
+                        delete element.dataset.micltimeoutid;
+                    }
+
+                    if ((event as ToggleEvent).oldState === 'closed') {
+                        // The snackbar has just opened.
+                        timeoutid = window.setTimeout(() => { element.hidePopover(); }, delay);
+                        element.dataset.micltimeoutid = `${timeoutid}`;
+                    }
+                });
+            }
+        }
+    };
+})();

package/components/stepper/README.md

@@ -157,7 +157,7 @@ To enable built-in **form validation** for each step, use a `<form>` element as
 ```
 
 #### Step-Specific Action Buttons
-Action buttons can be made visible only on a specific step by using the `data-step` attribute, which specifies the step number (starting from 1). This is useful for replacing the default **Next** button with a content-specific action, like a **Submit** button on the final step.
+Action buttons can be made visible only on a specific step by using the `data-step` attribute, which specifies the step number starting from the first step (step 1) or starting from the last step (step -1). This is useful for replacing the default **Next** button with a content-specific action, like a **Submit** button on the final step.
 
 In this example for a three-step stepper, the **Next** button is hidden on step 3, and the **Submit** button is shown instead:
 

package/components/stepper/index.ts

@@ -112,12 +112,16 @@ export default (() =>
 
     const showHideElements = (stepper: HTMLElement, step: HTMLElement): void =>
     {
+        const nrsteps      = stepper.querySelectorAll(STEP_SELECTOR).length;
         const selectedStep = getStepNumber(stepper, step);
 
         stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
         {
-            const shouldHide = element.dataset.step != `${selectedStep}`;
-            element.classList.toggle('micl-hidden', shouldHide);
+            const stepnr = parseInt(element.dataset.step || '0', 10);
+            element.classList.toggle(
+                'micl-hidden',
+                stepnr > 0 ? stepnr != selectedStep : nrsteps + stepnr + 1 != selectedStep
+            );
         });
     };
 

package/components/textfield/index.scss

@@ -51,7 +51,7 @@
         width: fit-content;
         padding-inline: 4px;
         margin-block-start: calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height)) / 2);
-        margin-inline-start: 12px;
+        margin-inline: 12px 4px;
         border-radius: 4px;
         background-color: inherit;
         color: var(--md-sys-color-on-surface-variant);

package/dist/components/snackbar/index.d.ts

@@ -0,0 +1,5 @@
+export declare const snackbarSelector = ".micl-snackbar";
+declare const _default: {
+    initialize: (element: HTMLElement) => void;
+};
+export default _default;