material-inspired-component-library 8.1.1 → 9.0.0

package/components/chip/index.scss

@@ -0,0 +1,285 @@
+//
+// Copyright © 2026 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/shape';
+@use '../../styles/typography';
+@use '../button/shared' as button;
+
+@include shape.corner('small');
+@include shape.corner('full');
+
+@include typography.scale('title-medium');
+
+.micl-chips {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    .micl-chips__headline {
+        padding-block-end: 4px;
+        color: var(--md-sys-color-on-surface-variant);
+    }
+    .micl-chip-assist {
+        --micl-chip-statelayer: var(--md-sys-color-on-surface);
+        --micl-chip-label: var(--md-comp-assist-chip-label-text-color, var(--md-sys-color-on-surface));
+        --micl-chip-icon: var(--md-comp-assist-chip-leading-icon-color);
+        --micl-chip-outline: var(--md-comp-assist-chip-outline-color);
+        --micl-chip-disabled-label: var(--md-comp-assist-chip-disabled-label-text-color);
+        --micl-chip-disabled-outline: var(--md-comp-assist-chip-disabled-outline-color);
+        --micl-chip-elevated-container: var(--md-comp-assist-chip-elevated-container-color);
+    }
+    .micl-chip-filter {
+        --micl-chip-label: var(--md-comp-filter-chip-label-text-color);
+        --micl-chip-icon: var(--md-comp-filter-chip-leading-icon-color);
+        --micl-chip-outline: var(--md-comp-filter-chip-outline-color);
+        --micl-chip-disabled-label: var(--md-comp-filter-chip-disabled-label-text-color);
+        --micl-chip-disabled-outline: var(--md-comp-filter-chip-disabled-outline-color);
+        --micl-chip-elevated-container: var(--md-comp-filter-chip-elevated-container-color);
+    }
+    .micl-chip-suggestion {
+        --micl-chip-label: var(--md-comp-suggestion-chip-label-text-color);
+        --micl-chip-icon: var(--md-comp-suggestion-chip-leading-icon-color);
+        --micl-chip-outline: var(--md-comp-suggestion-chip-outline-color);
+        --micl-chip-disabled-label: var(--md-comp-suggestion-chip-disabled-label-text-color);
+        --micl-chip-disabled-outline: var(--md-comp-suggestion-chip-disabled-outline-color);
+        --micl-chip-elevated-container: var(--md-comp-suggestion-chip-elevated-container-color);
+    }
+    .micl-chip-assist, .micl-chip-filter, .micl-chip-input, .micl-chip-suggestion {
+        @extend %micl-button-base;
+        @extend %micl-button-xs;
+
+        --md-comp-elevated-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));
+        --md-comp-outlined-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));
+        --md-comp-elevated-button-disabled-container-opacity: 12%;
+        --md-comp-elevated-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));
+        --md-comp-outlined-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));
+
+        border-radius: var(--md-sys-shape-corner-small);
+        padding-inline: 16px;
+        column-gap: 8px;
+
+        &:has(> .micl-button__icon:first-child) {
+            padding-inline-start: 8px;
+        }
+        &:has(> .micl-button__icon:last-child) {
+            padding-inline-end: 8px;
+        }
+        .micl-button__icon {
+            font-size: 18px;
+            inline-size: 18px;
+            overflow: hidden;
+            transition: inline-size #{motion.$md-sys-motion-expressive-fast-effects-duration} #{motion.$md-sys-motion-expressive-fast-effects};
+        }
+        &#{button.$enabled} .micl-button__icon {
+            color: var(--micl-chip-icon, var(--md-sys-color-primary));
+        }
+        &:not(.micl-chip--elevated) {
+            @extend %micl-button-outlined;
+
+            --statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));
+            --md-comp-outlined-button-outline-color: var(--micl-chip-outline, var(--md-sys-color-outline-variant));
+
+            &#{button.$disabled} {
+                border-color: var(--micl-chip-disabled-outline, rgb(from var(--md-sys-color-on-surface) r g b / 12%));
+            }
+        }
+    }
+    .micl-chip-input {
+        --micl-chip-label: var(--md-comp-input-chip-label-text-color);
+        --micl-chip-icon: var(--md-comp-input-chip-leading-icon-color, currentColor);
+        --micl-chip-outline: var(--md-comp-input-chip-outline-color);
+        --micl-chip-disabled-label: var(--md-comp-input-chip-disabled-label-text-color);
+        --micl-chip-disabled-outline: var(--md-comp-input-chip-disabled-outline-color);
+
+        padding-inline: 0;
+        column-gap: 0;
+        cursor: default;
+
+        &:has(> .micl-chip__primary:focus-visible) {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
+
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+            outline-offset: 2px;
+        }
+        &#{button.$enabled}:has(> .micl-chip__remove:is(:hover, :active)) {
+            --statelayer-opacity: 0%;
+        }
+        &:has(> :disabled) .micl-chip__avatar {
+            opacity: var(--md-comp-input-chip-disabled-avatar-opacity, 38%);
+        }
+        &:has(.micl-chip__avatar) {
+            border-radius: calc(var(--micl-height) / 2);
+
+            .micl-chip__primary {
+                border-start-start-radius: calc(var(--micl-height) / 2 - 1px);
+                border-end-start-radius: calc(var(--micl-height) / 2 - 1px);
+            }
+        }
+        .micl-chip__primary,
+        .micl-chip__remove {
+            @extend %micl-button-base;
+
+            --statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));
+
+            color: inherit;
+            background-color: transparent;
+        }
+        .micl-chip__primary {
+            background-image:
+                radial-gradient(
+                    circle at var(--micl-x, center) var(--micl-y, center),
+                    transparent 0%,
+                    rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                    transparent 10%
+                );
+            block-size: 100%;
+            column-gap: 8px;
+            padding-inline: 12px 5px;
+            border-start-start-radius: calc(var(--md-sys-shape-corner-small) - 1px);
+            border-end-start-radius: calc(var(--md-sys-shape-corner-small) - 1px);
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            font: inherit;
+
+            &:has(> .micl-button__icon:first-child) {
+                padding-inline-start: 8px;
+            }
+            &:has(> .micl-chip__avatar:first-child) {
+                padding-inline-start: 4px;
+            }
+            &#{button.$enabled}#{button.$focused} {
+                outline: none;
+            }
+            &::before {
+                content: "";
+                position: absolute;
+                inset-block-start: calc((100% - var(--md-sys-target-size, 48px)) / 2);
+                inset-inline-start: 0;
+                block-size: var(--md-sys-target-size, 48px);
+                inline-size: 100%;
+            }
+        }
+        .micl-chip__remove {
+            inline-size: 24px;
+            block-size: 24px;
+            margin-inline: 0 5px;
+            border-radius: 50%;
+            font-size: 18px;
+
+            &#{button.$enabled} {
+                color: var(--md-comp-input-chip-trailing-icon-color, var(--md-comp-input-chip-leading-icon-color, currentColor));
+            }
+            &::before {
+                content: "";
+                position: absolute;
+                inset-block-start: calc((100% - var(--md-sys-target-size, 48px)) / 2);
+                inset-inline-start: calc((100% - var(--md-sys-target-size, 48px)) / 2);
+                block-size: var(--md-sys-target-size, 48px);
+                inline-size: var(--md-sys-target-size, 48px);
+            }
+        }
+        .micl-chip__avatar {
+            @include typography.title-medium;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            block-size: var(--md-comp-input-chip-avatar-size, 24px);
+            inline-size: var(--md-comp-input-chip-avatar-size, 24px);
+            border-radius: var(--md-comp-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 50%));
+            color: var(--md-comp-input-chip-avatar-label-color, var(--md-sys-color-on-primary-container));
+            background-color: var(--md-comp-input-chip-avatar-color, var(--md-sys-color-primary-container));
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .micl-chip-filter {
+        input {
+            position: absolute;
+            inset: 0;
+            margin: 0;
+            opacity: 0;
+            cursor: inherit;
+        }
+        .micl-button__icon + .micl-button__icon {
+            margin-inline-start: -8px;
+        }
+        // If icons have direction:ltr (like Material Symbols), the collapsing margin above always
+        // lands on their physical left; in a RTL context it must sit on the right to keep
+        // cancelling the gap between the two icons.
+        .micl-button__icon + .micl-button__icon:dir(rtl) {
+            margin-inline: 0 -8px;
+        }
+        &:has(input:not(:checked)) {
+            .micl-button__icon:has(+ input) {
+                inline-size: 0px;
+            }
+        }
+        &:has(input:checked) {
+            .micl-button__icon:not(:has(+ input)) {
+                inline-size: 0px;
+            }
+        }
+        &:has(input:checked) {
+            --micl-chip-statelayer: var(--md-sys-color-on-secondary-container);
+            --micl-chip-label: var(--md-comp-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container));
+            --micl-chip-icon: var(--md-comp-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));
+            --micl-chip-outline: var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container));
+
+            border-color: transparent;
+            background-color: var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container));
+
+            &:not(.micl-chip--elevated)#{button.$enabled}:hover:not(:active) {
+                box-shadow: var(--md-sys-elevation-level1);
+            }
+        }
+        &:not(.micl-chip--elevated):has(input:disabled:checked) {
+            background-color: var(--md-comp-filter-chip-disabled-selected-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filter-chip-disabled-selected-container-opacity, 12%)));
+        }
+    }
+    .micl-chip--elevated {
+        @extend %micl-button-elevated;
+
+        --statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));
+        --md-comp-elevated-button-container-color: var(--micl-chip-elevated-container, var(--md-sys-color-surface-container-low));
+    }
+}
+.micl-chips--input {
+    min-inline-size: 0;
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+    padding: 10px 16px 13px;
+    border: 1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));
+    border-radius: var(--md-sys-shape-corner-small);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+// If the remove button is direction:ltr (like Material Symbols), its margin-inline resolves
+// against LTR and does not flip with the page direction — mirror the outer margin explicitly.
+.micl-chips .micl-chip__remove:dir(rtl) {
+    margin-inline: 5px 0;
+}

package/components/datepicker/README.md

@@ -53,6 +53,10 @@ Import both the date picker and the dialog styles into your project:
 
 ```CSS
 @use "material-inspired-component-library/dist/dialog";
+@use "material-inspired-component-library/dist/textfield";
+@use "material-inspired-component-library/dist/button";
+@use "material-inspired-component-library/dist/iconbutton";
+@use "material-inspired-component-library/dist/divider";
 @use "material-inspired-component-library/dist/datepicker";
 ```
 
@@ -67,6 +71,7 @@ This component requires JavaScript to function:
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
 ```
+When loading individual JavaScript files, also load `dist/textfield` — it wires the input field that opens the picker.
 
 This will initialize any Date picker component, including those that will be added to the DOM later on.
 
@@ -145,3 +150,77 @@ You can trigger the picker from a button using the standard `popovertarget` attr
 
 - **Behavior**: The Date picker reads from and writes to the button's value attribute.
 - **Formatting**: The component automatically updates the button's text content with the selected date, formatted according to the user's locale.
+
+## Date Range Selection
+Add the `micl-datepicker--range` class to the dialog to let users select a range of dates instead of a single date:
+
+```HTML
+<dialog id="myrangepicker" class="micl-dialog micl-datepicker micl-datepicker--range" closedby="closerequest">
+```
+
+The first selected date becomes the start of the range and the second one its end. Selecting a date before the start moves the start, and any selection after a completed range starts a new one. Confirming before an end date has been chosen commits a single-day range.
+
+### Connecting a Pair of Input Fields
+Connect two date input fields — both referring to the picker in their `data-datepicker` attribute — and identify the field holding the end date in the `data-miclrangeto` attribute of the start field:
+
+```HTML
+<input type="date" id="from" data-datepicker="myrangepicker" data-miclrangeto="to">
+<input type="date" id="to" data-datepicker="myrangepicker">
+```
+
+- **Behavior**: Clicking either field opens the picker with the range loaded from both fields; reversed values are swapped. Confirming writes both fields and fires their change-events.
+- **Limits**: The earliest allowed date is taken from the `min` attribute of the start field, the latest from the `max` attribute of the end field.
+
+### Connecting to a Button
+A single button invoker holds the range in its value attribute as an ISO 8601 time interval. The component updates the button's text content with the localized range:
+
+```HTML
+<button type="button" class="micl-button-text-m" popovertarget="myrangepicker" value="2026-01-23/2026-02-06">23.01.2026 – 06.02.2026</button>
+```
+
+### Text Input Mode
+In range mode, the manual input area holds two [Text field components](../textfield/README.md) instead of being one itself:
+
+```HTML
+<div class="micl-datepicker__input">
+  <div class="micl-textfield-outlined">
+    <label for="rangestart">From</label>
+    <input type="text" id="rangestart">
+  </div>
+  <div class="micl-textfield-outlined">
+    <label for="rangeend">To</label>
+    <input type="text" id="rangeend">
+  </div>
+</div>
+```
+
+Entering a start date that lies after the end date swaps the two. The fields cannot be emptied: to discard the end of a range, return to the calendar view and start a new range by selecting any date.
+
+## Theming
+Each date picker can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. The container color, shape and elevation are inherited from the [Dialog component](../dialog/README.md).
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-date-picker-modal-container-width` | The width of the modal date picker | `360px` |
+| `--md-comp-date-input-modal-container-width` | The width of the modal date picker in text input mode | `328px` |
+| `--md-comp-date-picker-docked-container-width` | The width of the docked date picker | `360px` |
+| `--md-comp-date-picker-header-headline-color` | The text color of the headline showing the selected date | `--md-sys-color-on-surface-variant` |
+| `--md-comp-date-picker-weekdays-label-text-color` | The text color of the weekday labels | `--md-sys-color-on-surface` |
+| `--md-comp-date-picker-date-unselected-label-text-color` | The text color of the selectable dates | `--md-sys-color-on-surface` |
+| `--md-comp-date-picker-date-selected-container-color` | The background color of the selected date | `--md-sys-color-primary` |
+| `--md-comp-date-picker-date-selected-label-text-color` | The text color of the selected date | `--md-sys-color-on-primary` |
+| `--md-comp-date-picker-date-today-container-outline-color` | The outline color of today's date | `--md-sys-color-primary` |
+| `--md-comp-date-picker-date-today-label-text-color` | The text color of today's date | `--md-sys-color-primary` |
+| `--md-comp-date-picker-selection-year-unselected-label-text-color` | The text color of the selectable years | `--md-sys-color-on-surface-variant` |
+| `--md-comp-date-picker-selection-year-selected-container-color` | The background color of the selected year | `--md-sys-color-primary` |
+| `--md-comp-date-picker-selection-year-selected-label-text-color` | The text color of the selected year | `--md-sys-color-on-primary` |
+| `--md-comp-date-picker-range-selection-active-indicator-container-color` | The background color of the band connecting the endpoints of a range | `--md-sys-color-secondary-container` |
+| `--md-comp-date-picker-selection-date-in-range-label-text-color` | The text color of the dates inside a range | `--md-sys-color-on-secondary-container` |
+
+**Example: Changing the width of the modal date picker**
+
+```CSS
+#mydatepicker {
+  --md-comp-date-picker-modal-container-width: 400px;
+}
+```