material-inspired-component-library 5.0.0 → 6.0.0

package/components/slider/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -41,7 +41,7 @@
 @mixin slider-track-disabled() {
     background-image: linear-gradient(
         var(--md-sys-slider-track-direction),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
         transparent calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
         color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
         color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) 100%,
@@ -79,8 +79,8 @@
         var(--md-sys-slider-track-direction),
         transparent 0px,
         transparent var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) 10px,
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), var(--md-sys-color-surface)) 10px,
         transparent 10px,
         transparent 16px
     );
@@ -223,10 +223,10 @@ input[type=range].micl-slider-xl {
         }
         &:focus-visible {
             &::-webkit-slider-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             }
             &::-moz-range-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             }
         }
         &:active {
@@ -273,7 +273,7 @@ input[type=range].micl-slider-xl {
             grid-area: slider-icon;
             inset: 0;
             margin: 6px;
-            font-size: var(--md-sys-layout-icon-size, 24px);
+            font-size: var(--md-sys-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
             z-index: 1;
         }

package/components/stepper/index.scss

@@ -19,8 +19,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
+@use '../../styles/statelayer';
 
 :root {
     --md-sys-stepper-counter-style: decimal;
@@ -38,7 +39,7 @@ body {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    row-gap: var(--md-sys-layout-padding-xl, 24px);
+    row-gap: var(--md-sys-padding-xl, 24px);
     margin: 0;
     background-color: inherit;
 
@@ -119,7 +120,7 @@ body {
         &>:last-child {
             display: flex;
             flex: 1 1 0;
-            column-gap: var(--md-sys-layout-padding-xs, 8px)
+            column-gap: var(--md-sys-padding-xs, 8px)
         }
         &>:last-child {
             justify-content: flex-end;
@@ -139,7 +140,7 @@ body {
         text-align: center;
         background-color: var(--md-sys-color-on-surface);
         color: var(--md-sys-color-surface);
-        opacity: 38%;
+        opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         counter-increment: dotnumber 1;
     }
     .micl-stepper__progress--done.micl-stepper__progress-dot,

package/components/switch/README.md

@@ -59,7 +59,6 @@ You can customize the appearance of the Switch component by overriding its globa
 | --md-sys-switch-handle-selected-size | 24px | The diameter of the handle when the switch is "on" |
 | --md-sys-switch-handle-pressed-size | 28px | The diameter of the handle when the switch is pressed |
 | --md-sys-switch-outline-width | 2px | The width of the border |
-| --md-sys-switch-state-layer-size | 40px | Sets the size of the area that indicates the component's current state (e.g., hover, focus, press) |
 | --md-sys-switch-target-height | 32px | The height of the track |
 | --md-sys-switch-target-width | 52px | The width of the track |
 

package/components/switch/index.scss

@@ -19,6 +19,7 @@
 // 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';
@@ -29,7 +30,6 @@
     --md-sys-switch-handle-selected-size: 24px;
     --md-sys-switch-handle-pressed-size: 28px;
     --md-sys-switch-outline-width: 2px;
-    --md-sys-switch-state-layer-size: 40px;
     --md-sys-switch-target-height: 32px;
     --md-sys-switch-target-width: 52px;
 }
@@ -56,7 +56,7 @@ input[type=checkbox].micl-switch {
         display: block;
         inline-size: var(--md-sys-switch-target-width);
         block-size: var(--md-sys-switch-target-height);
-        margin-block: calc((var(--md-sys-target-size) - var(--md-sys-switch-target-height)) / 2);
+        margin-block: calc((var(--md-sys-target-size, 48px) - var(--md-sys-switch-target-height)) / 2);
         border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
         border-radius: inherit;
         background-color: var(--md-sys-color-surface-container-highest);
@@ -66,17 +66,17 @@ input[type=checkbox].micl-switch {
         content: var(--md-sys-switch-unselected-icon);
         box-sizing: border-box;
         position: absolute;
-        inline-size: var(--md-sys-switch-state-layer-size);
-        block-size: var(--md-sys-switch-state-layer-size);
+        inline-size: var(--md-sys-state-layer-size, 40px);
+        block-size: var(--md-sys-state-layer-size, 40px);
         inset: 0;
-        inset-inline-start: calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px) / 2);
+        inset-inline-start: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px) - 16px) / 2);
         margin: auto 0;
         font: 300 16px / 1rem var(--md-ref-typeface-plain);
         color: var(--md-sys-color-surface-container-highest);
         text-align: center;
         background-color: var(--md-sys-color-outline);
         background-clip: content-box;
-        border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-size)) / 2) solid transparent;
+        border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-size)) / 2) solid transparent;
         border-radius: var(--md-sys-shape-corner-full);
         transform: rotate(135deg);
         transition:
@@ -93,11 +93,11 @@ input[type=checkbox].micl-switch {
         }
         &::after {
             content: var(--md-sys-switch-selected-icon);
-            inset-inline-start: calc(var(--md-sys-switch-target-width) - ((var(--md-sys-switch-state-layer-size) + var(--md-sys-target-size) - 16px) / 2));
+            inset-inline-start: calc(var(--md-sys-switch-target-width) - ((var(--md-sys-state-layer-size, 40px) + var(--md-sys-target-size, 48px) - 16px) / 2));
             font-size: 1.6rem;
             line-height: 1.3rem;
             letter-spacing: 0.1rem;
-            border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-selected-size)) / 2) solid transparent;
+            border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-selected-size)) / 2) solid transparent;
             color: var(--md-sys-color-on-primary-container);
             background-color: var(--md-sys-color-on-primary);
         }
@@ -107,24 +107,24 @@ input[type=checkbox].micl-switch {
 
         &:hover {
             &::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
                 background-color: var(--md-sys-color-on-surface-variant);
             }
             &:checked::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
         }
         &:focus-visible {
             &::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
             }
             &::before {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
                 outline-offset: 2px;
             }
             &:checked::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
             &:not(:checked)::after {
@@ -134,18 +134,18 @@ input[type=checkbox].micl-switch {
         &:active {
             &::after {
                 line-height: 1.7rem;
-                border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
+                border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
                 background-color: var(--md-sys-color-on-surface-variant);
             }
             &:checked::after {
                 line-height: 1.6rem;
-                border-width: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2);
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
+                border-width: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-pressed-size)) / 2);
+                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
             &:not(:checked)::after {
-                inset-inline-start: calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px) / 2);
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent);
+                inset-inline-start: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px) - 16px) / 2);
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
             }
         }
     }
@@ -159,12 +159,12 @@ input[type=checkbox].micl-switch {
             background-color: var(--md-sys-color-on-surface);
         }
         &::after {
-            color: rgb(from var(--md-sys-color-surface-container-highest) r g b / 38%);
+            color: rgb(from var(--md-sys-color-surface-container-highest) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
             background-color: var(--md-sys-color-on-surface);
-            opacity: 38%;
+            opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
         &:checked::after {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
             background-color: var(--md-sys-color-surface);
             opacity: 100%;
         }

package/components/textfield/index.scss

@@ -19,6 +19,7 @@
 // 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';
@@ -80,8 +81,8 @@
         caret-color: var(--md-sys-color-primary);
 
         &:disabled {
-            border-block-end-color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            border-block-end-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         &::placeholder {
             color: var(--md-sys-color-on-surface-variant);
@@ -220,12 +221,12 @@
     &:has(> select:disabled),
     &:has(> textarea:disabled) {
         &> label {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         &> .micl-textfield__icon-leading,
         &> .micl-textfield__icon-trailing,
         &> .micl-textfield__supporting-text {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         &> .micl-textfield__character-counter {
             display: none;
@@ -253,7 +254,7 @@
         &> input:not(:disabled),
         &> select:not(:disabled),
         &> textarea:not(:disabled) {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             border-block-end-color: var(--md-sys-color-on-surface);
         }

package/components/textfield/index.ts

@@ -44,6 +44,59 @@ export default (() =>
         }
     };
 
+    const formatAsDate = (input: HTMLInputElement, inputType: string): void =>
+    {
+        const partsRegex = /([DMY]{2,4})([^DMY])?([DMY]{2,4})([^DMY])?([DMY]{2,4})/;
+        const match      = (input.dataset.micldateformat || '').match(partsRegex);
+        if (!match) {
+            return;
+        }
+
+        const components = [
+            { type: match[1], length: match[1].length, separator: match[2] || '' },
+            { type: match[3], length: match[3].length, separator: match[4] || '' },
+            { type: match[5], length: match[5].length, separator: '' }
+        ];
+
+        input.maxLength = components.reduce((sum, c) => sum + c.length + (c.separator ? 1 : 0), 0);
+
+        let value = input.value.replace(/\D/g, ''); // remove all non-digits
+        let formattedValue = '';
+        let valueIndex = 0;
+        let cursorPosition = input.selectionStart || 0;
+
+        for (let i = 0; i < components.length; i++) {
+            const comp = components[i];
+            if (value.length < valueIndex) break;
+
+            const segment = value.substring(valueIndex, valueIndex + comp.length);
+            formattedValue += segment;
+            valueIndex += segment.length;
+            
+            if (segment.length === comp.length && comp.separator) {
+                formattedValue += comp.separator;
+            }
+        }
+
+        const prevLength = input.value.length;
+        input.value = formattedValue.substring(0, input.maxLength);
+        const newLength = input.value.length;
+
+        if (inputType.startsWith('deleteContent')) {
+            if (cursorPosition > 0) {
+                input.setSelectionRange(cursorPosition, cursorPosition);
+            }
+        }
+        else {
+            if (newLength > prevLength && newLength > cursorPosition) {
+                input.setSelectionRange(newLength, newLength);
+            }
+            else {
+                input.setSelectionRange(cursorPosition, cursorPosition);
+            }
+        }
+    };
+
     return {
         initialize: (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
         {
@@ -70,14 +123,15 @@ export default (() =>
                 });
             }
 
-            if (input.matches('input[type=time][data-timepicker]')) {
-                const timePicker = !input.dataset.timepicker ? null :
-                                   document.getElementById(input.dataset.timepicker);
-                if (timePicker instanceof HTMLDialogElement) {
+            if (input.matches('input[type=time][data-timepicker],input[type=date][data-datepicker]')) {
+                const picker = !input.dataset.timepicker ? (!input.dataset.datepicker ? null :
+                               document.getElementById(input.dataset.datepicker)) :
+                               document.getElementById(input.dataset.timepicker);
+                if (picker instanceof HTMLDialogElement) {
                     input.addEventListener('click', (event: Event) =>
                     {
                         event.preventDefault();
-                        timePicker.showModal();
+                        picker.showModal();
                     });
                     input.addEventListener('keydown', (event: Event) =>
                     {
@@ -88,7 +142,7 @@ export default (() =>
                             case 'Enter':
                             case ' ':
                                 event.preventDefault();
-                                timePicker.showModal();
+                                picker.showModal();
                                 break;
                             default:
                         }
@@ -109,6 +163,9 @@ export default (() =>
                 return;
             }
 
+            if (event.target instanceof HTMLInputElement && event.target.dataset.micldateformat) {
+                formatAsDate(event.target, (event as InputEvent).inputType);
+            }
             if (event.target.value) {
                 event.target.dataset.miclvalue = '1';
             }

package/components/timepicker/README.md

@@ -27,7 +27,7 @@ The Time picker component is an extension of the [**Dialog** component](../dialo
       <button
         type="button"
         class="micl-timepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined"
-        data-alticon="schedule"
+        data-miclalt="schedule"
         aria-label="Switch input mode"
       >keyboard</button>
       <div>
@@ -83,7 +83,7 @@ By default, the layout is **vertical**. To switch to a **horizontal** layout (si
 To allow users to toggle between the text inputs and the analog dial, add a button to the `micl-dialog__actions` container:
 
 - Class: `micl-timepicker__inputmode`
-- Data Attribute: `data-alticon="schedule"` (defines the icon to show when toggled).
+- Data Attribute: `data-miclalt="schedule"` (defines the icon to show when toggled).
 
 ### Integration
 You can trigger the Time picker component from standard input fields or buttons.
@@ -95,19 +95,18 @@ To replace the browser's native time picker, add the `data-timepicker` attribute
 <input type="time" data-timepicker="mytimepicker" value="09:41">
 ```
 
-- **Behavior**: When the input is clicked, the picker opens with the input's current value.
-- **Reusability**: Multiple input fields can target the same Time picker component ID.
-
-You may use the same time picker component for different time-input fields. When the user engages with the input field, the time picker is opened showing the time specified in the `value`-attribute.
+- **Behavior**: Clicking the input opens the picker initialized with the input's current value.
+- **Reusability**: Multiple input fields can target the same Time picker component ID. The picker will automatically update to reflect the time of the specific input field engaged by the user.
 
 #### Connecting to a Button
-You can use a button to trigger the picker using the standard `popovertarget` attribute.
+You can trigger the picker from a button using the standard `popovertarget` attribute.
 
 ```HTML
-<button type="button" class="micl-button-text-m" popovertarget="mytimepicker">09:41</button>
+<button type="button" class="micl-button-text-m" popovertarget="mytimepicker" value="09:41">09:41</button>
 ```
 
-- **Behavior**: The Time picker treats the button's text content as the time value to read from and write to.
+- **Behavior**: The Time picker reads from and writes to the button's value attribute.
+- **Formatting**: The component automatically updates the button's text content with the selected time, formatted according to the user's locale.
 
 ## Customizations
 You can customize the appearance of the Time picker 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 time pickers.

package/components/timepicker/index.scss

@@ -19,6 +19,7 @@
 // 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';
@@ -158,13 +159,13 @@ dialog.micl-dialog.micl-timepicker {
             border: 2px solid var(--md-sys-color-primary);
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
     input[name=hour] {
@@ -258,16 +259,16 @@ dialog.micl-dialog.micl-timepicker {
             }
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
 
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             outline-offset: -2px;
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
     .micl-timepicker__am {
@@ -316,7 +317,7 @@ dialog.micl-dialog.micl-timepicker {
     touch-action: none;
 
     data.micl-timepicker__dial-inner {
-        --micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size) + 12px);
+        --micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);
 
         z-index: 2;
         &::before {

package/components/timepicker/index.ts

@@ -21,7 +21,7 @@
 
 export const timepickerSelector = 'dialog.micl-dialog.micl-timepicker';
 
-type ValueElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+type ValueElement = HTMLInputElement | HTMLButtonElement;
 
 interface TimeLimits {
     max: number,
@@ -49,11 +49,9 @@ export default (() =>
         return parent.querySelector(selector) as T | null;
     };
 
-    const isValueElement = (element: Element): element is ValueElement =>
+    const isValueElement = (element: Element | null): element is ValueElement =>
     {
-        return element instanceof HTMLInputElement ||
-               element instanceof HTMLTextAreaElement ||
-               element instanceof HTMLSelectElement;
+        return element instanceof HTMLInputElement || element instanceof HTMLButtonElement;
     };
 
     const isVisible = (element: Element | null): boolean =>
@@ -302,8 +300,8 @@ export default (() =>
             mode?.addEventListener('click', () =>
             {
                 const icon = mode.textContent;
-                mode.textContent = mode.dataset.alticon || icon;
-                mode.dataset.alticon = icon;
+                mode.textContent = mode.dataset.miclalt || icon;
+                mode.dataset.miclalt = icon;
                 dial?.classList.toggle('micl-hidden');
                 inputs.forEach(input =>
                 {
@@ -353,21 +351,21 @@ export default (() =>
                     return;
                 }
 
-                let invoker = document.activeElement as HTMLInputElement | HTMLButtonElement | null;
+                let invoker = document.activeElement;
                 if (
-                    !invoker
-                    || (!invoker.dataset.timepicker && !invoker.popoverTargetElement)
+                    !isValueElement(invoker)
+                    || (!invoker.dataset.timepicker && !invoker.popoverTargetElement && !(invoker as any).commandForElement)
                 ) {
                     invoker = document.querySelector(
-                        `[data-timepicker="${dialog.id}"],[popovertarget="${dialog.id}"]`
+                        `[data-timepicker="${dialog.id}"],[popovertarget="${dialog.id}"],[commandfor="${dialog.id}"]`
                     );
                 }
-                if (!invoker) {
+                if (!isValueElement(invoker)) {
                     return;
                 }
                 (dialog as any)._miclInvoker = invoker;
 
-                const time = (isValueElement(invoker) ? invoker.value : invoker.textContent).split(':');
+                const time = (invoker.value || invoker.textContent).split(':');
                 if (time.length === 2) {
                     setInputValue(dialog, 'hour', time[0], true);
                     setInputValue(dialog, 'minute', time[1], false, false);
@@ -383,10 +381,10 @@ export default (() =>
                 let invoker = (dialog as any)._miclInvoker;
                 if (!invoker) {
                     invoker = document.querySelector(
-                        `[data-timepicker="${dialog.id}"],[popovertarget="${dialog.id}"]`
+                        `[data-timepicker="${dialog.id}"],[popovertarget="${dialog.id}"],[commandfor="${dialog.id}"]`
                     );
                 }
-                if (!invoker) {
+                if (!isValueElement(invoker)) {
                     return;
                 }
 
@@ -403,9 +401,11 @@ export default (() =>
                     return;
                 }
                 const time = `${h}`.padStart(2, '0') + ':' + `${m}`.padStart(2, '0');
+                invoker.value = time;
 
-                if (isValueElement(invoker)) {
-                    invoker.value = time;
+                if (invoker instanceof HTMLInputElement) {
+                    invoker.dispatchEvent(new Event('change', { bubbles: true }));
+                    invoker.dispatchEvent(new Event('input', { bubbles: true }));
                 }
                 else {
                     invoker.textContent = time;