material-inspired-component-library 5.0.1 → 6.0.0

package/README.md

@@ -102,7 +102,7 @@ The library currently consists of the following components:
 - [x] [Button](components/button/README.md)
 - [x] [Card](components/card/README.md)
 - [x] [Checkbox](components/checkbox/README.md)
-- [ ] [Date picker]()
+- [x] [Date picker](components/datepicker/README.md)
 - [x] [Dialog](components/dialog/README.md)
 - [x] [Divider](components/divider/README.md)
 - [x] [Icon button](components/iconbutton/README.md)
@@ -120,11 +120,15 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 6.0.0 (23.12.2025)
+- **BREAKING**: Use command-attribute to control toggle buttons.
+- **Date picker**: New component.
+
 ### 5.0.0 (02.12.2025)
 - **Time picker**: New component.
 
 ### 4.0.0 (27.10.2025)
-- **BREAKING**: Moved layout.scss til sub-folder.
+- **BREAKING**: Moved layout.scss to sub-folder.
 - **Alert**: New component.
 - **Stepper**: New component.
 

package/components/button/README.md

@@ -63,9 +63,17 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 **Example: A selected toggle button**
 
 ```HTML
-<button type="button" class="micl-button-tonal-s micl-button--toggle micl-button--selected">Selected</button>
+<button
+  type="button"
+  id="id0"
+  class="micl-button-tonal-s micl-button--toggle micl-button--selected"
+  commandfor="id0"
+  command="--micl-toggle"
+>Selected</button>
 ```
 
+The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
+
 ## Icons
 To add a leading icon to a button, include an element with the `micl-button__icon` class inside the `<button>`:
 

package/components/button/index.ts

@@ -19,58 +19,42 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const buttonSelector = 'button[popovertarget],button.micl-button--toggle';
+export const buttonSelector = 'button.micl-button--toggle';
 
 export default (() =>
 {
-    const onClick = (event: Event) =>
-    {
-        if (!event.target || !(event.target instanceof HTMLButtonElement)) {
-            return;
-        }
-        if (event.target.popoverTargetElement instanceof HTMLDialogElement) {
-            if (event.target.popoverTargetElement.open) {
-                event.target.popoverTargetElement.close();
-            }
-            else {
-                event.target.popoverTargetElement.showModal();
-            }
-        }
-        if (event.target.classList.contains('micl-button--toggle')) {
-            event.target.classList.add('micl-button--toggled');
-            event.target.classList.toggle('micl-button--selected');
-            if (!!event.target.dataset.miclalt) {
-                [event.target.textContent, event.target.dataset.miclalt] =
-                [event.target.dataset.miclalt, event.target.textContent];
+    return {
+        command: (event: Event): void =>
+        {
+            const target = event.target as HTMLButtonElement;
+
+            if (
+                target.matches(buttonSelector)
+                && !target.disabled
+                && (event as any).command === '--micl-toggle'
+            ) {
+                target.classList.add('micl-button--toggled');
+                target.classList.toggle('micl-button--selected');
             }
-        }
-    };
+        },
 
-    return {
-        initialize: (element: HTMLButtonElement) =>
+        initialize: function(element: HTMLButtonElement): void
         {
             if (
-                !element.matches('button[popovertarget],button.micl-button--toggle')
+                !element.matches(buttonSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
             }
             element.dataset.miclinitialized = '1';
 
-            if (
-                (element.popoverTargetElement instanceof HTMLDialogElement)
-                && !element.popoverTargetElement.hasAttribute('popover')
-            ) {
-                element.addEventListener('click', onClick);
-            }
-            else if (element.classList.contains('micl-button--toggle')) {
-                element.addEventListener('click', onClick);
-            }
+            element.addEventListener('command', this.command);
         },
-        cleanup: (element: HTMLButtonElement) =>
+
+        cleanup: function(element: HTMLButtonElement): void
         {
-            if (element.matches('button[popovertarget],button.micl-button--toggle')) {
-                document.removeEventListener('click', onClick);
+            if (element.matches(buttonSelector)) {
+                document.removeEventListener('command', this.command);
                 delete element.dataset.miclinitialized;
             }
         }

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

@@ -385,7 +385,8 @@ dialog.micl-dialog.micl-datepicker {
             margin-block-end: 16px;
 
             &.micl-datepicker__view-hidden,
-            input[type=date]::-webkit-calendar-picker-indicator {
+            input[type=date]::-webkit-calendar-picker-indicator,
+            input[type=date]::-webkit-inner-spin-button {
                 display: none;
             }
         }