material-inspired-component-library 1.0.0

package/components/dialog/dialog.scss

@@ -0,0 +1,262 @@
+//
+// 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/typography';
+
+:root {
+    --md-sys-dialog-padding: 24px;
+    --md-sys-dialog-dir-factor: 1;
+}
+
+[dir=rtl] {
+    --md-sys-dialog-dir-factor: -1;
+}
+
+dialog.micl-dialog,
+dialog.micl-dialog-fullscreen {
+    box-sizing: border-box;
+    display: none;
+    flex-direction: column;
+    min-width: 280px;
+    max-width: 560px;
+    max-height: 100vh;
+    inset-block-start: anchor(start);
+    inset-inline-start: anchor(start);
+    transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-extra-large);
+    background-color: var(--md-sys-color-surface-container-high);
+    box-shadow: var(--md-sys-elevation-level3);
+    opacity: 0;
+    overflow: hidden;
+    interpolate-size: allow-keywords;
+    transition:
+        display var(--md-sys-motion-duration-medium1) allow-discrete,
+        overlay var(--md-sys-motion-duration-medium1) allow-discrete,
+        inset-block-start var(--md-sys-motion-duration-medium1) linear,
+        inset-inline-start var(--md-sys-motion-duration-medium1) linear,
+        opacity var(--md-sys-motion-duration-medium1) motion.$md-sys-motion-easing-emphasized-decelerate,
+        transform var(--md-sys-motion-duration-medium1) linear;
+
+    @starting-style {
+        height: fit-content;
+        width: fit-content;
+        inset-block-start: anchor(start);
+        inset-inline-start: anchor(start);
+        opacity: 0;
+        transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+    }
+
+    &:popover-open,
+    &[open] {
+        display: flex;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        opacity: 1;
+        transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(100%);
+        transition:
+            display var(--md-sys-motion-duration-medium2) linear allow-discrete,
+            overlay var(--md-sys-motion-duration-medium2) linear allow-discrete,
+            inset-block-start var(--md-sys-motion-duration-medium2) linear,
+            inset-inline-start var(--md-sys-motion-duration-medium2) linear,
+            width var(--md-sys-motion-duration-medium2) linear,
+            height var(--md-sys-motion-duration-medium2) linear,
+            opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate,
+            transform var(--md-sys-motion-duration-medium2) linear;
+
+        @starting-style {
+            inset-block-start: anchor(start);
+            inset-inline-start: anchor(start);
+            opacity: 0;
+            transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+        }
+        &::backdrop {
+            @starting-style {
+                background-color: rgba(0, 0, 0, 0);
+            }
+        }
+    }
+    &:not([popover]) {
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+
+        @starting-style {
+            inset-block-start: 50%;
+            inset-inline-start: 50%;
+        }
+
+        &:popover-open,
+        &[open] {
+            @starting-style {
+                inset-block-start: 50%;
+                inset-inline-start: 50%;
+            }
+        }
+    }
+
+    &::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;
+    }
+    &[open]::backdrop {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+    &:hover {
+        background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high), var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity));
+    }
+
+    .micl-dialog__headline {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        align-items: flex-start;
+        gap: 16px;
+        padding: var(--md-sys-dialog-padding);
+        background-color: transparent;
+
+        h1, h2, h3, h4, h5, h6, .micl-heading {
+            @include typography.headline-small;
+
+            flex: 1 1 100%;
+            margin: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: var(--md-sys-color-on-surface);
+        }
+        .micl-dialog__icon {
+            width: 24px;
+            height: 24px;
+            font-size: 24px;
+            color: var(--md-sys-color-secondary);
+        }
+        button {
+            display: none;
+        }
+        &+ .micl-dialog__actions {
+            padding-block-start: 0;
+        }
+    }
+    .micl-dialog__headline:has(> .micl-dialog__icon) {
+        align-items: center;
+    }
+    .micl-dialog__subhead {
+        @include typography.title-medium;
+
+        padding-inline: var(--md-sys-dialog-padding);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--md-sys-color-on-surface)
+    }
+    .micl-dialog__supporting-text {
+        @include typography.body-medium;
+
+        color: var(--md-sys-color-on-surface-variant);
+    }
+    .micl-dialog__content {
+        flex-shrink: 1;
+        padding-inline: var(--md-sys-dialog-padding);
+        background-color: inherit;
+        overflow-y: auto;
+    }
+    .micl-dialog__actions {
+        display: flex;
+        flex-shrink: 0;
+        justify-content: flex-end;
+        column-gap: 8px;
+        padding: var(--md-sys-dialog-padding);
+        opacity: 1;
+        transition: opacity var(--md-sys-motion-duration-medium1) linear;
+    }
+}
+
+dialog.micl-dialog-fullscreen {
+    @media (max-width: 560px) {
+        width: 100vw;
+        height: 100vh;
+        max-width: 100vw;
+        border-radius: var(--md-sys-shape-corner-none);
+        background-color: var(--md-sys-color-surface);
+        box-shadow: var(--md-sys-elevation-level0);
+        timeline-scope: --headlineTimeline;
+
+        &:hover {
+            background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity));
+        }
+        .micl-dialog__headline {
+            height: 56px;
+            flex-direction: row;
+            align-items: center;
+            gap: 4px;
+            padding: 4px;
+            animation-name: headlineScroll;
+            animation-duration: 1ms;
+            animation-timeline: --headlineTimeline;
+            animation-fill-mode: forwards;
+            animation-range: 0% 20%;
+            z-index: 1;
+
+            h1, h2, h3, h4, h5, h6, .micl-heading {
+                @include typography.title-large;
+
+                margin: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .micl-dialog__icon {
+                display:none;
+            }
+            button {
+                display: inline-block;
+
+                &.micl-button {
+                    margin-right: 16px;
+                }
+            }
+        }
+        .micl-dialog__content {
+            scroll-timeline: --headlineTimeline block;
+            scroll-timeline: --headlineTimeline vertical;
+        }
+        .micl-dialog__actions {
+            opacity: 0;
+        }
+    }
+}
+
+@keyframes headlineScroll {
+    from {
+        background-color: transparent;
+        box-shadow: var(--md-sys-elevation-level0);
+    }
+    to {
+        background-color: var(--md-sys-color-surface-container);
+        box-shadow: var(--md-sys-elevation-level2);
+    }
+}

package/components/divider/README.md

@@ -0,0 +1,52 @@
+# Divider
+This component implements the the [Material Design 3 Expressive Divider](https://m3.material.io/components/divider/overview) design.
+
+## Basic Usage
+
+### HTML
+To add a basic divider, use the `<hr>` element with the `micl-divider` class:
+
+```HTML
+<hr class="micl-divider">
+```
+
+### CSS
+Import the divider styles into your project:
+
+```CSS
+@use "micl/components/divider";
+```
+
+### TypeScript
+No custom TypeScript is required for the core functionality of this component.
+
+### Demo
+A live example of the [Divider component](https://henkpb.github.io/micl/divider.html) is available for you to interact with.
+
+## Variants
+The Divider component offers five CSS classes for different divider styles:
+
+| CSS class | Description |
+| --------- | ----------- |
+| micl-divider | A standard, full-width divider |
+| micl-divider-inset | Indented equally on both the left and right sides |
+| micl-divider-inset--start | Indented only on the left (start) side |
+| micl-divider-inset--end | Indented only on the right (end) side |
+| micl-divider-vertical | A vertical divider |
+
+## Customizations
+You can customize the appearance of the Divider 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 dividers.
+
+| Variable name | Default Value | Description |
+| ------------- | ----- | ----------- |
+| --md-sys-divider-thickness | 1px | Controls the thickness (height for horizontal, width for vertical) of the divider |
+| --md-sys-divider-inset-margin | 16px | Defines the indentation distance for inset dividers |
+| --md-sys-divider-space | 4px | Sets the spacing between the divider and adjacent text or elements |
+
+**Example: Changing the inset margin**
+
+```HTML
+<div style="--md-sys-divider-inset-margin:32px">
+  <hr class="micl-divider-inset">
+</div>
+```

package/components/divider/divider.scss

@@ -0,0 +1,74 @@
+//
+// 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.
+
+:root {
+    --md-sys-divider-thickness: 1px;
+    --md-sys-divider-inset-margin: 16px;
+    --md-sys-divider-space: 4px;
+}
+body {
+    --md-sys-divider-color: var(--md-sys-color-outline-variant);
+}
+
+.micl-divider {
+    width: 100%;
+    height: 0;
+    margin-block: var(--md-sys-divider-space);
+    margin-inline: 0;
+    border: 0;
+    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+}
+
+.micl-divider-inset {
+    width: calc(100% - 2 * var(--md-sys-divider-inset-margin));
+    height: 0;
+    margin-block: var(--md-sys-divider-space);
+    margin-inline: var(--md-sys-divider-inset-margin);
+    border: 0;
+    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+}
+
+.micl-divider-inset--start {
+    width: calc(100% - var(--md-sys-divider-inset-margin));
+    height: 0;
+    margin-block: var(--md-sys-divider-space);
+    margin-inline: var(--md-sys-divider-inset-margin) 0;
+    border: 0;
+    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+}
+
+.micl-divider-inset--end {
+    width: calc(100% - var(--md-sys-divider-inset-margin));
+    height: 0;
+    margin-block: var(--md-sys-divider-space);
+    margin-inline: 0 var(--md-sys-divider-inset-margin);
+    border: 0;
+    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+}
+
+.micl-divider-vertical {
+    min-height: 100%;
+    width: 0;
+    margin-block: 0;
+    margin-inline: calc(2 * var(--md-sys-divider-space));
+    border: 0;
+    border-inline-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+}

package/components/iconbutton/README.md

@@ -0,0 +1,86 @@
+# Icon button
+This component implements the the [Material Design 3 Expressive Icon button](https://m3.material.io/components/icon-buttons/overview) design. Icon buttons allow users to perform a single action with a minimal visual footprint.
+
+## Basic Usage
+
+### HTML
+To create a basic icon button, use the `<button>` element with a class that specifies its style and size. This example uses a small standard icon button with a Material Symbol:
+
+```HTML
+<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel">settings</button>
+```
+
+**Important**: The `aria-label` attribute is crucial for accessibility, as it provides a descriptive text for screen readers.
+
+### CSS
+Import the icon button styles into your project:
+
+```CSS
+@use "micl/components/iconbutton";
+```
+
+### TypeScript
+This component requires a TypeScript module for interactive features like the **ripple effect** and **toggle logic**. 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 miclIconButton from 'micl/components/button';
+
+miclIconButton.initialize(document.querySelector('.micl-iconbutton-standard-s'));
+```
+
+### Demo
+A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available for you to interact with.
+
+## Variants
+Icon buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To specify a size, append the appropriate postfix to the button's style class:
+
+**Example: An extra-large icon button**
+
+```HTML
+<button type="button" class="micl-iconbutton-standard-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
+```
+
+Material Design provides **four distinct styles**: `standard`, `filled`, `tonal` and `outlined`. To use a style other than the `standard` style used above, apply the corresponding class to the button:
+
+**Example: A medium-sized filled icon button**
+
+```HTML
+<button type="button" class="micl-iconbutton-filled-m material-symbols-outlined" aria-label="Control Panel">settings</button>
+```
+
+By default, icon buttons have a **rounded shape**. For a more square-like appearance, add the `micl-button--square` class.
+
+To reduce the width of an icon button, add the `micl-iconbutton--narrow` class. For an increased width, use the `micl-iconbutton--wide` class.
+
+Adding the `disabled` boolean attribute to the button causes the button to be displayed in a disabled state.
+
+### Toggle Button
+A toggle button has two states: **on** (selected) and **off** (unselected). To create one, add the `micl-button--toggle` class.
+- **Off state**: The button has the `micl-button--toggle` class.
+- **On state**: The button has both the `micl-button--toggle` and `micl-button--selected` classes.
+
+**Example: A selected toggle button**
+
+```HTML
+<button type="button" class="micl-iconbutton-outlined-l micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
+```
+
+## Icons
+The examples above use [Google Material Symbols](https://fonts.google.com/icons). For buttons using these icons, a fill-style of `1` is applied when the button is active or hovered over. To enable this effect, ensure your `link` tag includes `FILL@0..1`.
+
+```HTML
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1" rel="stylesheet" />
+```
+
+You can also use other icon libraries. For example, with the [Bootstrap Icons library](https://icons.getbootstrap.com):
+
+```HTML
+<button type="button" class="micl-iconbutton-tonal-m" aria-label="Control Panel">
+  <i class="bi bi-gear"></i>
+</button>
+```
+
+## Compatibility
+This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.