material-inspired-component-library 1.0.0

package/components/checkbox/checkbox.scss

@@ -0,0 +1,275 @@
+//
+// 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-checkbox-container-size: 18px;
+    --md-sys-checkbox-border-width: 2px;
+    --md-sys-checkbox-selected-icon: "\2A3D";
+    --md-sys-checkbox-state-layer-radius: 20px;
+}
+
+@property --checkbox-outline-color {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: false;
+}
+@property --checkbox-state-layer-color {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: false;
+}
+@property --checkbox-container-color {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: false;
+}
+@property --checkbox-container-border-color {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: false;
+}
+
+input[type=checkbox].micl-checkbox {
+    --md-sys-ripple-background-color: var(--md-sys-color-primary);
+    --checkbox-container-color: transparent;
+    --checkbox-container-border-color: var(--md-sys-color-on-surface-variant);
+
+    appearance: none;
+    box-sizing: border-box;
+    position: relative;
+    width: var(--md-sys-target-size);
+    min-width: var(--md-sys-target-size);
+    height: var(--md-sys-target-size);
+    min-height: var(--md-sys-target-size);
+    margin: 0;
+    padding: calc((var(--md-sys-target-size) - var(--md-sys-checkbox-container-size)) / 2);
+    border-radius: calc(var(--md-sys-checkbox-border-width) + ((var(--md-sys-target-size) - var(--md-sys-checkbox-container-size)) / 2));
+    background-clip: border-box, border-box, content-box, content-box, content-box;
+    background-image:
+        radial-gradient(
+            circle var(--md-sys-checkbox-state-layer-radius),
+            transparent 0%,
+            transparent calc(var(--md-sys-checkbox-state-layer-radius) - var(--md-sys-state-focus-indicator-thickness)),
+            var(--checkbox-outline-color) calc(var(--md-sys-checkbox-state-layer-radius) - var(--md-sys-state-focus-indicator-thickness)),
+            var(--checkbox-outline-color) 100%,
+            transparent
+        ),
+        radial-gradient(
+            circle calc(var(--md-sys-checkbox-state-layer-radius) - var(--md-sys-state-focus-indicator-thickness)),
+            var(--checkbox-state-layer-color) 0%,
+            var(--checkbox-state-layer-color) 100%,
+            transparent
+        ),
+        linear-gradient(
+            to right,
+            var(--checkbox-container-color) 0%,
+            var(--checkbox-container-color) 100%,
+            transparent
+        ),
+        linear-gradient(
+            to bottom,
+            var(--checkbox-container-border-color) var(--md-sys-checkbox-border-width),
+            transparent var(--md-sys-checkbox-border-width),
+            transparent 16px,
+            var(--checkbox-container-border-color) 0px,
+            var(--checkbox-container-border-color) var(--md-sys-checkbox-container-size),
+            transparent var(--md-sys-checkbox-container-size)
+        ),
+        linear-gradient(
+            to right,
+            var(--checkbox-container-border-color) var(--md-sys-checkbox-border-width),
+            transparent var(--md-sys-checkbox-border-width),
+            transparent 16px,
+            var(--checkbox-container-border-color) 0px,
+            var(--checkbox-container-border-color) var(--md-sys-checkbox-container-size),
+            transparent var(--md-sys-checkbox-container-size)
+        );
+    background-origin: border-box;
+    background-position: center, center, center, center, center;
+    background-repeat: no-repeat;
+    background-size:
+        auto,
+        auto,
+        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size),
+        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size),
+        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size),
+        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size);
+    clip-path: circle(var(--md-sys-checkbox-state-layer-radius));
+    transition:
+        --checkbox-outline-color var(--md-sys-motion-duration-medium2),
+        --checkbox-state-layer-color var(--md-sys-motion-duration-medium2),
+        --checkbox-container-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short4),
+        --checkbox-container-border-color var(--md-sys-motion-duration-medium2);
+
+    &.micl-checkbox--error {
+        --md-sys-ripple-background-color: var(--md-sys-color-error);
+        --checkbox-container-border-color: var(--md-sys-color-error);
+    }
+    &::after {
+        content: var(--md-sys-checkbox-selected-icon);
+        box-sizing: border-box;
+        position: absolute;
+        width: calc(var(--md-sys-checkbox-container-size) + 2px);
+        height: 0;
+        inset: 0;
+        inset-block-start: 15px;
+        inset-inline-start: 8px;
+        margin: 4px;
+        font: 400 26px/2px var(--md-ref-typeface-plain);
+        color: var(--md-sys-color-on-primary);
+        text-align: center;
+        transform: rotate(-45deg);
+        transform-origin: top;
+        clip-path: rect(0px 4.5px 18px 0px);
+        overflow: hidden;
+        transition:
+          clip-path var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-accelerate,
+          height var(--md-sys-motion-duration-short3) var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-decelerate;
+    }
+    @supports (-moz-appearance:none) {
+        &::after {
+            inset-block-start: 16px;
+            inset-inline-start: 7px;
+            font: 400 27px/3px var(--md-ref-typeface-plain);
+        }
+    }
+    &:checked {
+        --checkbox-container-color: var(--md-sys-color-primary);
+        --checkbox-container-border-color: transparent;
+        transition:
+            --checkbox-container-color var(--md-sys-motion-duration-medium2),
+            --checkbox-container-border-color var(--md-sys-motion-duration-medium2);
+
+        &.micl-checkbox--error {
+            --checkbox-container-color: var(--md-sys-color-error);
+        }
+        &::after {
+            height: 8px;
+            clip-path: rect(0px 16px 18px 0px);
+            transition:
+                height var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-accelerate,
+                clip-path var(--md-sys-motion-duration-long4) var(--md-sys-motion-duration-short3) linear(motion.$md-sys-motion-spring-default-spatial);
+        }
+    }
+    &:not(:disabled) {
+        --miclripple: 1;
+
+        @include ripple.effect;
+
+        cursor: pointer;
+
+        &:hover {
+            &:checked {
+                --checkbox-outline-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                --checkbox-state-layer-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
+
+                &.micl-checkbox--error {
+                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                }
+            }
+            &:not(:checked) {
+                --checkbox-container-border-color: var(--md-sys-color-on-surface);
+                --checkbox-outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                --checkbox-state-layer-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-hover-state-layer-opacity));
+
+                &.micl-checkbox--error {
+                    --checkbox-container-border-color: var(--md-sys-color-error);
+                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
+                }
+            }
+        }
+        &:focus-visible {
+            --checkbox-outline-color: var(--md-sys-color-secondary);
+
+            &:checked {
+                --checkbox-state-layer-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
+
+                &.micl-checkbox--error {
+                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-focus-state-layer-opacity));
+                }
+            }
+            &:not(:checked) {
+                --checkbox-container-border-color: var(--md-sys-color-on-surface);
+                --checkbox-state-layer-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-focus-state-layer-opacity));
+
+                &.micl-checkbox--error {
+                    --checkbox-container-border-color: var(--md-sys-color-error);
+                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-focus-state-layer-opacity));
+                }
+            }
+        }
+        &:active {
+            &:checked {
+                --checkbox-outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                --checkbox-state-layer-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+
+                &.micl-checkbox--error {
+                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                }
+            }
+            &:not(:checked) {
+                --checkbox-container-border-color: var(--md-sys-color-on-surface);
+                --checkbox-outline-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                --checkbox-state-layer-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+
+                &.micl-checkbox--error {
+                    --checkbox-container-border-color: var(--md-sys-color-error);
+                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+                }
+            }
+        }
+    }
+    &:disabled {
+        --checkbox-container-border-color: var(--md-sys-color-on-surface);
+        opacity: 38%;
+
+        &:checked {
+            --checkbox-container-color: var(--md-sys-color-on-surface);
+
+            &::after {
+                color: var(--md-sys-color-surface);
+            }
+        }
+    }
+}
+
+input[type=checkbox].micl-checkbox:not(:disabled) + label,
+label:has(+ input[type=checkbox].micl-checkbox:not(:disabled)) {
+    cursor: pointer;
+}
+
+[dir=rtl] input[type=checkbox].micl-checkbox {
+    &::after {
+        inset-inline-start: 9px;
+        transform: rotate(45deg);
+        clip-path: rect(0px 18px 7.5px 16px);
+    }
+    &:checked::after {
+        clip-path: rect(0px 18px 8px 6px);
+    }
+}

package/components/checkbox/index.ts

@@ -0,0 +1,48 @@
+//
+// 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 checkboxSelector = '.micl-checkbox';
+
+export default (() =>
+{
+    return {
+        keydown: (event: Event) =>
+        {
+            if (
+                !(event.target as Element).matches(checkboxSelector)
+                || !(event instanceof KeyboardEvent)
+                || !(event.target instanceof HTMLInputElement)
+                || (event.target as HTMLInputElement).disabled
+            ) {
+                return;
+            }
+
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.target.checked = !event.target.checked;
+                    event.preventDefault() // prevent page scrolling
+                    break;
+                default:
+            }
+        }
+    };
+})();

package/components/dialog/README.md

@@ -0,0 +1,133 @@
+# Dialog
+This component implements the the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design.
+
+## Basic Usage
+
+### HTML
+To create a basic dialog, use the `<dialog>` element with the `micl-dialog` class. You can open and close the dialog using JavaScript, or you can use a control element, such as a button, to open and close the dialog.
+
+```HTML
+<dialog id="mydialog" class="micl-dialog" closedby="any" popover>
+  <div class="micl-dialog__headline">
+    <h2>Basic dialog</h2>
+    <span class="micl-dialog__supporting-text">An example of a basic dialog</span>
+  </div>
+</dialog>
+
+<button type="button" popovertarget="mydialog">Open Basic Dialog</button>
+```
+
+- The `popover` attribute makes the dialog a non-modal (light dismiss) popover.
+
+- The `closedby="any"` attribute allows the dialog to be closed by clicking or tapping outside of it, or by pressing the <kbd>Esc</kbd> key.
+
+### CSS
+Import the dialog styles into your project:
+
+```CSS
+@use "micl/components/dialog";
+```
+
+### TypeScript
+No custom TypeScript is required for the core functionality of this component, as the native popover attribute handles the open/close behavior.
+
+### Demo
+A live example of the [Dialog component](https://henkpb.github.io/micl/dialog.html) is available for you to interact with.
+
+## Variants
+When dialogs with the `popover` attribute are opened, they animate from the control element to the center of the screen. They can be easily dismissed by clicking outside or pressing <kbd>Esc</kbd>.
+
+Removing the `popover` attribute creates a more intrusive **modal** dialog. This type of dialog requires the user to interact with its buttons or press the <kbd>Esc</kbd> key to close it.
+
+```HTML
+<dialog id="mydialog" class="micl-dialog" closedby="closerequest">
+  <div class="micl-dialog__headline">
+    <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">info</span>
+    <h2>Modal dialog</h2>
+    <span class="micl-dialog__supporting-text">An example of a modal dialog</span>
+  </div>
+  <div class="micl-dialog__actions">
+    <form method="dialog">
+      <button class="micl-button">Cancel</button>
+      <button class="micl-button">Save</button>
+    </form>
+  </div>
+</dialog>
+
+<button type="button" popovertarget="mydialog">Open Modal Dialog</button>
+```
+
+- The `closedby="closerequest"` attribute restricts closing methods, typically requiring an explicit action within the dialog.
+
+By default, modal dialogs open in the center of the screen. You can anchor a modal dialog to a control element, causing it to open relative to that element:
+
+```HTML
+<dialog id="mydialog" class="micl-dialog" closedby="closerequest" style="position-anchor:--myanchor">
+</dialog>
+
+<button type="button" popovertarget="mydialog" style="anchor-name:--myanchor">Open Modal Dialog</button>
+```
+
+### Dialog Structure Sections
+
+A dialog typically consists of three main sections to organize its content:
+
+- `micl-dialog__headline`: The header of the dialog. It usually contains:
+
+  - A heading element (`<h1>`-`<h6>`).
+
+  - An optional icon (use `micl-dialog__icon`).
+
+  - An optional sub-header (e.g., `<span class="micl-dialog__subhead">`).
+
+  - An optional `micl-dialog__supporting-text` element, describing the dialog's purpose.
+
+- `micl-dialog__content`: The optional main content area of the dialog, where additional information can be placed.
+
+- `micl-dialog__actions`: A container for action buttons that allow the user to perform actions related to the dialog or close it. Actions are typically placed in a `<form method="dialog">` for native HTML dialog closing.
+
+### Full-screen dialog
+A full-screen dialog covers the entire viewport, primarily on smaller screens. On screens wider than 560 pixels, a full-screen dialog behaves like a basic dialog. Use the `micl-dialog-fullscreen` class for this variant:
+
+```HTML
+<dialog id="mydialog" class="micl-dialog-fullscreen" closedby="none" popover>
+  <form method="dialog" class="micl-dialog__headline">
+    <button type="button" class="micl-iconbutton-s material-symbols-outlined" popovertarget="mydialog" aria-label="Close">close</button>
+    <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
+    <h2>Full-screen dialog</h2>
+    <button class="micl-button" value="dosave">Save</button>
+  </form>
+  <div class="micl-dialog__content">
+    <span class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
+  </div>
+  <form method="dialog" class="micl-dialog__actions">
+    <button type="button" class="micl-button" popovertarget="mydialog">Cancel</button>
+    <button class="micl-button" value="dosave">Save</button>
+  </form>
+</dialog>
+
+<button type="button" popovertarget="mydialog">Open Full-Screen Dialog</button>
+```
+
+- In full-screen mode, buttons placed directly within the `micl-dialog__headline` become visible, while the `micl-dialog__icon` and `micl-dialog__actions` at the bottom are hidden.
+
+- When not in full-screen mode (e.g., on wider screens), the `micl-dialog__headline` buttons are hidden, and the standard dialog actions (`micl-dialog__actions`) are visible.
+
+## Customizations
+You can customize the appearance of the Dialog 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 dialogs.
+
+| Variable name | Default Value | Description |
+| ------------- | ----- | ----------- |
+| --md-sys-dialog-padding | 24px | The inner padding between the dialog's edge and its content |
+
+**Example: Changing the dialog padding**
+
+```HTML
+<div style="--md-sys-dialog-padding:16px">
+  <dialog class="micl-dialog">
+  </dialog>
+</div>
+```
+
+## Compatibility
+This component uses **popover anchor positioning** to place the dialog in relation to its invoker. This is a modern CSS feature that may not be fully supported in all browsers. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility) for details.