material-inspired-component-library 5.0.0 → 6.0.0

package/components/datepicker/README.md

@@ -0,0 +1,146 @@
+# Date picker
+This component implements the [Material Design 3 Expressive Date picker](https://m3.material.io/components/date-pickers/overview) design. It allows users to select a date using either a text input or a calendar interface.
+
+## Basic Usage
+
+### HTML
+The Date Picker component is an extension of the [**Dialog** component](../dialog/README.md). To create a basic date picker, use a `<dialog>` element with both `micl-dialog` and `micl-datepicker` classes.
+
+```HTML
+<dialog id="mydatepicker" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle">
+  <form method="dialog">
+    <div class="micl-dialog__headline">
+      <h2 id="mytitle">Enter date</h2>
+      <span class="micl-dialog__supporting-text">Select date</span>
+      <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
+      <hr class="micl-divider">
+      <div class="micl-datepicker__month-selector">
+        <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
+        <button type="button" class="micl-datepicker__month micl-button-text-xs">
+          <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
+        </button>
+        <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
+      </div>
+      <div class="micl-datepicker__year-selector">
+        <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
+        <button type="button" class="micl-datepicker__year micl-button-text-xs">
+          <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
+        </button>
+        <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
+      </div>
+    </div>
+
+    <div class="micl-dialog__content">
+      <div class="micl-datepicker__calendars"></div>
+      <div class="micl-datepicker__years"></div>
+      <div class="micl-datepicker__months"></div>
+      <div class="micl-datepicker__input micl-textfield-outlined">
+        <label for="mydate">Date</label>
+        <input type="text" id="mydate">
+     </div>
+    </div>
+
+    <div class="micl-dialog__actions">
+      <button class="micl-button-text-s" value="">Cancel</button>
+      <button class="micl-button-text-s" value="OK">OK</button>
+    </div>
+  </form>
+</dialog>
+```
+
+### CSS
+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/datepicker";
+```
+
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
+### JavaScript
+This component requires JavaScript to function:
+
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
+```
+
+This will initialize any Date picker component, including those that will be added to the DOM later on.
+
+### Live Demo
+A live example of the [Date picker component](https://henkpb.github.io/micl/datepicker.html) is available to interact with.
+
+## Variants
+Because the Date picker component relies on the Dialog component, it utilizes the same utility classes for content structure. Refer to the [Dialog component documentation](../dialog/README.md) for structural details.
+
+### Date Picker Structure
+For the picker to function, the `micl-dialog__content` area **must** contain the `<div class="micl-datepicker__calendars">` container. This holds the month-based calendars.
+
+Additionally, the content area may contain:
+
+- A container for selecting a year: `<div class="micl-datepicker__years">`
+
+- A container for selecting a month: `<div class="micl-datepicker__months">`
+
+- A [Text field component](../textfield/README.md) with the `micl-datepicker__input` class for manual date entry.
+
+The `micl-dialog__headline` area may contain:
+
+- **Title**: A heading element (e.g., `<h2>`) to display the selected date.
+
+- **Supporting label**: A text element with the class `micl-dialog__supporting-text`.
+
+- **Month selector**: A container with three [Icon button components](../iconbutton/README.md):
+    - `micl-datepicker__month`: Opens the month selection container.
+    - `micl-datepicker__previous`: Navigates to the previous month.
+    - `micl-datepicker__next`: Navigates to the next month.
+
+- **Year selector**: A container with three [Icon button components](../iconbutton/README.md):
+    - `micl-datepicker__year`: Opens the year selection container.
+    - `micl-datepicker__previous`: Navigates to the previous year.
+    - `micl-datepicker__next`: Navigates to the next year.
+
+Any item not required for your implementation may be omitted.
+
+#### Input Mode Switching
+To allow users to toggle between the calendar view and the manual date input, add an icon button to the `micl-dialog__headline` area:
+
+- Class: `micl-datepicker__inputmode`
+- Data Attribute: `data-miclalt="calendar_today"` (defines the icon to show when toggled).
+
+### Integration
+You can trigger the Date picker component from standard input fields or buttons.
+
+#### Connecting to an Input Field
+To replace the browser's native date picker, add the `data-datepicker` attribute to an `<input>` element. The value of this attribute must match the `id` of your Date picker dialog.
+
+```HTML
+<input type="date" data-datepicker="mydatepicker" value="2025-12-02">
+```
+
+- **Behavior**: Clicking the input opens the picker initialized with the input's current value.
+- **Reusability**: Multiple input fields can target the same Date picker component ID. The picker will automatically update to reflect the date of the specific input field engaged by the user.
+
+**Docked Positioning** By default, the Date picker opens in the center of the screen. To anchor it to the input field, use the `micl-dialog--docked` class and CSS Anchor positioning.
+
+```HTML
+<dialog id="mydatepicker" class="micl-dialog micl-dialog--docked micl-datepicker" style="position-anchor:--myanchor">
+
+<div class="micl-textfield-outlined" style="anchor-name:--myanchor">
+  <label for="mytextfield">Start date</label>
+  <input type="date" id="mytextfield" data-datepicker="mydatepicker">
+</div>
+```
+
+#### Connecting to a Button
+You can trigger the picker from a button using the standard `popovertarget` attribute.
+
+```HTML
+<button type="button" class="micl-button-text-m" popovertarget="mydatepicker" value="2026-01-23">23.01.2026</button>
+```
+
+- **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.

package/components/datepicker/index.scss

@@ -0,0 +1,436 @@
+//
+// 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';
+@use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
+@use '../../styles/typography';
+
+:root {
+    --md-comp-date-picker-docked-container-width: 360px;
+    --md-comp-date-picker-modal-container-width: 360px;
+    --md-comp-date-input-modal-container-width: 328px;
+}
+
+%view-transition-base {
+    block-size: fit-content;
+    opacity: 1;
+    transition-duration: var(--md-comp-date-picker-motion-spatial-duration);
+
+    &.micl-datepicker__view-hidden {
+        block-size: 0;
+        opacity: 0;
+        transition-property: none;
+    }
+
+    &:not(.micl-datepicker__view-hidden) {
+        transition-behavior: allow-discrete;
+        transition-property: opacity, display, block-size;
+        transition-timing-function: linear;
+    }
+}
+
+dialog.micl-dialog.micl-datepicker {
+    --md-comp-date-picker-motion-spatial: #{motion.$md-sys-motion-expressive-fast-effects};
+    --md-comp-date-picker-motion-spatial-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-comp-date-picker-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-comp-date-picker-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-effects-duration};
+    --md-comp-date-picker-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+
+    inline-size: var(--md-comp-date-picker-modal-container-width, 360px);
+
+    &:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) {
+        inline-size: var(--md-comp-date-input-modal-container-width, 328px);
+
+        .micl-divider {
+            margin-block: 9.5px;
+        }
+        .micl-dialog__content {
+            min-block-size: 85px;
+        }
+    }
+
+    form {
+        background-color: inherit;
+    }
+    .micl-dialog__headline {
+        display: grid;
+        gap: 0;
+        grid-template-columns: max-content 1fr var(--md-sys-target-size, 48px);
+        grid-template-areas:
+            "datepicker-supporting datepicker-supporting datepicker-supporting"
+            "datepicker-close datepicker-action datepicker-action"
+            "datepicker-close datepicker-headline datepicker-mode"
+            "datepicker-divider datepicker-divider datepicker-divider"
+            "datepicker-year-selector datepicker-year-selector datepicker-month-selector";
+        padding-inline-end: 12px;
+        padding-block: 16px 4px;
+
+        h1, h2, h3, h4, h5, h6, .micl-heading {
+            @include typography.headline-large;
+
+            grid-area: datepicker-headline;
+            margin-block-start: 36px;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+        .micl-dialog__supporting-text {
+            @include typography.label-large;
+
+            grid-area: datepicker-supporting;
+        }
+        .micl-datepicker__inputmode {
+            grid-area: datepicker-mode;
+            align-self: flex-end;
+            justify-self: center;
+        }
+        .micl-divider {
+            grid-area: datepicker-divider;
+            inline-size: calc(100% + 36px);
+            margin-block-start: 11.5px;
+            margin-inline: -24px;
+        }
+        .micl-datepicker__month-selector,
+        .micl-datepicker__year-selector {
+            display: grid;
+            grid-template-rows: var(--md-sys-target-size, 48px);
+            align-items: center;
+
+            &.micl-datepicker__view-hidden {
+                display: none;
+            }
+        }
+        .micl-datepicker__month-selector {
+            grid-area: datepicker-month-selector;
+            grid-template-areas: "datepicker-month-previous datepicker-month-next";
+            grid-template-columns: var(--md-sys-target-size, 48px) var(--md-sys-target-size, 48px);
+            justify-items: flex-end;
+            justify-content: flex-end;
+
+            .micl-datepicker__previous {
+                grid-area: datepicker-month-previous;
+            }
+            .micl-datepicker__next {
+                grid-area: datepicker-month-next;
+            }
+        }
+        .micl-datepicker__year-selector {
+            grid-area: datepicker-year-selector;
+            grid-template-areas: "datepicker-year";
+            grid-template-columns: 1fr;
+            justify-items: flex-start;
+            margin-inline-start: -8px;
+
+            .micl-datepicker__previous {
+                display: none;
+                grid-area: datepicker-year-previous;
+            }
+            .micl-datepicker__next {
+                display: none;
+                grid-area: datepicker-year-next;
+            }
+        }
+        .micl-datepicker__month {
+            display: none;
+            grid-area: datepicker-month;
+            margin-inline: -12px auto;
+        }
+        .micl-datepicker__year {
+            grid-area: datepicker-year;
+        }
+        .micl-datepicker__month:not(:disabled),
+        .micl-datepicker__year:not(:disabled) {
+            color: var(--md-sys-color-on-surface-variant);
+        }
+    }
+
+    .micl-dialog__content {
+        display: grid;
+        grid-template-areas: "datepicker-view";
+        position: relative;
+        inline-size: 100%;
+        max-block-size: 336px;
+        min-block-size: 330px;
+        padding-inline: 0;
+        overflow: hidden auto;
+        transition: min-block-size var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial);
+
+        .micl-datepicker__calendars {
+            display: flex;
+            grid-area: datepicker-view;
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            block-size: 100%;
+            inline-size: 200%;
+            opacity: 1;
+            overflow: hidden;
+            transform: translateX(0);
+            transition:
+                transform var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial),
+                opacity var(--md-comp-date-picker-motion-duration-reverse) linear,
+                block-size var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete,
+                display var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete;
+
+            &.micl-datepicker__view-hidden {
+                block-size: 0%;
+                opacity: 0;
+                transition-property: none;
+            }
+            &.micl-startleft,
+            &.micl-moveright {
+                transform: translateX(0%);
+            }
+            &.micl-startright,
+            &.micl-moveleft {
+                transform: translateX(-50%);
+            }
+
+            .micl-datepicker__calendar {
+                flex-shrink: 0;
+                block-size: 100%;
+                inline-size: 50%;
+
+                .micl-datepicker__calendar-inner {
+                    @include typography.body-large;
+
+                    box-sizing: border-box;
+                    display: grid;
+                    grid-template-columns: repeat(7, var(--md-sys-target-size, 48px));
+                    grid-template-rows: 40px repeat(6, var(--md-sys-target-size, 48px));
+                    block-size: 100%;
+                    inline-size: 100%;
+                    padding-inline: 12px;
+
+                    span, time {
+                        box-sizing: border-box;
+                        display: inline-flex;
+                        justify-content: center;
+                        border: none;
+                        color: var(--md-sys-color-on-surface);
+                        -webkit-tap-highlight-color: transparent;
+                    }
+                    time {
+                        --statelayer-color: var(--md-sys-color-on-surface-variant);
+                        --statelayer-opacity: 0%;
+
+                        align-items: center;
+                        border: 4px solid transparent;
+                        border-radius: var(--md-sys-shape-corner-full);
+                        background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+                        background-repeat: no-repeat;
+                        background-size: 100%;
+                        background-clip: content-box;
+                        transition: --statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear;
+
+                        &.micl-datepicker__today {
+                            outline: 1px solid var(--md-sys-color-primary);
+                            outline-offset: -5px;
+                            color: var(--md-sys-color-primary);
+
+                            &:hover,
+                            &:focus-visible,
+                            &:active {
+                                --statelayer-color: var(--md-sys-color-primary);
+                            }
+                        }
+                        &.micl-datepicker__selected {
+                            background-color: var(--md-sys-color-primary);
+                            color: var(--md-sys-color-on-primary);
+
+                            &:hover,
+                            &:focus-visible,
+                            &:active {
+                                --statelayer-color: var(--md-sys-color-on-primary);
+                            }
+                        }
+                        &.micl-datepicker__outside {
+                            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
+                        }
+                        &:not(.micl-datepicker__outside) {
+                            cursor: pointer;
+                        }
+                        &:hover {
+                            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+                        }
+                        &:focus-visible {
+                            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
+                        }
+                        &:active {
+                            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+                        }
+                    }
+                }
+            }
+        }
+        .micl-datepicker__months,
+        .micl-datepicker__years,
+        .micl-datepicker__input {
+            grid-area: datepicker-view;
+            @extend %view-transition-base;
+        }
+        .micl-datepicker__months {
+            overflow-y: hidden;
+
+            .micl-datepicker__months-inner {
+                block-size: auto;
+                inline-size: 100%;
+            }
+            label {
+                @include typography.body-large;
+
+                display: flex;
+                align-items: center;
+                block-size: var(--md-sys-target-size, 48px);
+                gap: 8px;
+                padding-inline-start: 16px;
+                color: var(--md-sys-color-on-surface);
+                cursor: pointer;
+
+                input[type=radio] {
+                    appearance: none;
+                    margin: 0;
+                }
+                span {
+                    visibility: hidden;
+                    color: var(--md-sys-color-on-surface);
+                }
+                &:has(input:checked) {
+                    background-color: var(--md-sys-color-surface-variant);
+
+                    span {
+                        visibility: visible;
+                    }
+                }
+            }
+        }
+        .micl-datepicker__years {
+            overflow-y: hidden;
+
+            .micl-datepicker__years-inner {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                block-size: auto;
+                inline-size: 100%;
+            }
+            label {
+                --statelayer-color: var(--md-sys-color-on-surface-variant);
+                --statelayer-opacity: 0%;
+
+                @include typography.body-large;
+
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                block-size: 36px;
+                inline-size: 72px;
+                margin: 8px;
+                border: calc((var(--md-sys-target-size, 48px) - 36px) / 2) solid transparent;
+                border-radius: calc(var(--md-sys-target-size, 48px) / 2);
+                background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+                background-repeat: no-repeat;
+                background-size: 100%;
+                background-clip: content-box;
+                color: var(--md-sys-color-on-surface-variant);
+                cursor: pointer;
+                transition: --statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear;
+
+                &:hover {
+                    --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+                }
+                &:focus-visible {
+                    --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
+                }
+                &:active {
+                    --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+                }
+                &:has(input:checked) {
+                    color: var(--md-sys-color-on-primary);
+                    background-color: var(--md-sys-color-primary);
+
+                    &:hover,
+                    &:focus-visible,
+                    &:active {
+                        --statelayer-color: var(--md-sys-color-on-primary);
+                    }
+                }
+
+                input[type=radio] {
+                    appearance: none;
+                    margin: 0;
+                }
+            }
+        }
+        .micl-datepicker__input {
+            padding-inline: 16px;
+            margin-block-end: 16px;
+
+            &.micl-datepicker__view-hidden,
+            input[type=date]::-webkit-calendar-picker-indicator,
+            input[type=date]::-webkit-inner-spin-button {
+                display: none;
+            }
+        }
+    }
+
+    .micl-dialog__actions {
+        padding: 8px 12px 12px 12px;
+    }
+
+    &.micl-dialog--docked {
+        inline-size: var(--md-comp-date-picker-docked-container-width, 360px);
+        border-radius: var(--md-sys-shape-corner-large);
+
+        .micl-dialog__headline {
+            grid-template-areas: "datepicker-month-selector datepicker-year-selector";
+            grid-template-columns: 1fr 1fr;
+            padding: 8px 12px 18px 12px;
+
+            h1, h2, h3, h4, h5, h6, .micl-heading,
+            .micl-dialog__supporting-text,
+            .micl-datepicker__inputmode {
+                display: none;
+            }
+            .micl-datepicker__month-selector {
+                grid-template-areas: "datepicker-month-previous datepicker-month datepicker-month-next";
+                grid-template-columns: var(--md-sys-target-size, 48px) 1fr var(--md-sys-target-size, 48px);
+
+                .micl-datepicker__month {
+                    display: inline-flex;
+                    margin-inline: 0;
+                }
+            }
+            .micl-datepicker__year-selector {
+                grid-template-areas: "datepicker-year-previous datepicker-year datepicker-year-next";
+                grid-template-columns: var(--md-sys-target-size, 48px) 1fr var(--md-sys-target-size, 48px);
+
+                .micl-datepicker__previous,
+                .micl-datepicker__next {
+                    display: block;
+                }
+            }
+        }
+        .micl-dialog__actions > button {
+            margin-block: -2px;
+        }
+    }
+}