material-inspired-component-library 1.0.0

package/components/slider/slider.scss

@@ -0,0 +1,258 @@
+//
+// 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/typography';
+
+@mixin slider-track() {
+    block-size: var(--md-sys-slider-track-height);
+    border-radius: var(--md-sys-slider-track-radius);
+    background-image: linear-gradient(
+        var(--md-sys-slider-track-direction),
+        var(--md-sys-color-primary) 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))),
+        var(--md-sys-color-secondary-container) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
+        var(--md-sys-color-secondary-container) 100%,
+        transparent
+    );
+}
+@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))),
+        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%,
+        transparent
+    );
+}
+@mixin slider-thumb() {
+    appearance: none;
+    box-sizing: content-box;
+    position: relative;
+    inline-size: 4px;
+    block-size: var(--md-sys-slider-handle-height);
+    inset: 0;
+    inset-block-start: calc(-1 * (var(--md-sys-slider-handle-height) + 2 * var(--md-sys-slider-thumb-space) - var(--md-sys-slider-track-height)) / 2);
+    border: var(--md-sys-slider-thumb-space) solid currentColor;
+    border-radius: 8px;
+    background-color: var(--md-sys-color-primary);
+    cursor: pointer;
+    z-index: 2;
+}
+@mixin slider-thumb-disabled() {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface));
+    cursor: default;
+}
+@mixin slider-progress() {
+    block-size: var(--md-sys-slider-track-height);
+}
+
+input[type=range].micl-slider-xs {
+    --md-sys-slider-handle-height: 44px;
+    --md-sys-slider-track-height: 16px;
+    --md-sys-slider-track-radius: var(--md-sys-shape-corner-small);
+}
+input[type=range].micl-slider-s {
+    --md-sys-slider-handle-height: 44px;
+    --md-sys-slider-track-height: 24px;
+    --md-sys-slider-track-radius: var(--md-sys-shape-corner-small);
+}
+input[type=range].micl-slider-m {
+    --md-sys-slider-handle-height: 52px;
+    --md-sys-slider-track-height: 40px;
+    --md-sys-slider-track-radius: var(--md-sys-shape-corner-medium);
+}
+input[type=range].micl-slider-l {
+    --md-sys-slider-handle-height: 68px;
+    --md-sys-slider-track-height: 56px;
+    --md-sys-slider-track-radius: var(--md-sys-shape-corner-large);
+}
+input[type=range].micl-slider-xl {
+    --md-sys-slider-handle-height: 108px;
+    --md-sys-slider-track-height: 96px;
+    --md-sys-slider-track-radius: var(--md-sys-shape-corner-extra-large);
+}
+
+input[type=range].micl-slider-xs,
+input[type=range].micl-slider-s,
+input[type=range].micl-slider-m,
+input[type=range].micl-slider-l,
+input[type=range].micl-slider-xl {
+    --md-sys-slider-thumb-space: 6px;
+    --md-sys-slider-track-direction: to right;
+
+    appearance: none;
+    position: relative;
+    margin: 0;
+    outline: none;
+    color: var(--md-sys-color-surface-container-low);
+    background-color: transparent;
+    accent-color: var(--md-sys-color-primary);
+
+    &::before {
+        content: attr(data-miclsliderticks);
+        box-sizing: border-box;
+        position: absolute;
+        inline-size: 100%;
+        max-inline-size: 100%;
+        block-size: var(--md-sys-slider-track-height);
+        line-height: var(--md-sys-slider-track-height);
+        padding: 0 4px;
+        inset: 0;
+        color: var(--md-sys-color-on-primary);
+        mix-blend-mode: difference;
+        text-align: end;
+        text-wrap-mode: nowrap;
+    }
+    &::after {
+        --md-sys-slider-tip-space: 4px;
+        @include typography.label-medium;
+        content: var(--md-sys-slider-tip);
+        box-sizing: border-box;
+        position: absolute;
+        inline-size: fit-content;
+        min-inline-size: 48px;
+        block-size: 40px;
+        inset: 0;
+        inset-block-start: calc(-1 * ((var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height)) / 2) - 40px - var(--md-sys-slider-tip-space));
+        inset-inline-start: calc(-16px + (100% - 16px) * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min)));
+        padding-block: 12px;
+        padding-inline: 16px;
+        border-radius: 20px;
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        text-align: center;
+        opacity: 0;
+        z-index: 3;
+        transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+    }
+    &::-webkit-slider-runnable-track {
+        @include slider-track;
+    }
+    &::-moz-range-track {
+        @include slider-track;
+    }
+    &::-webkit-slider-thumb {
+        @include slider-thumb;
+    }
+    &::-moz-range-thumb {
+        @include slider-thumb;
+    }
+    &::-moz-range-progress {
+        @include slider-progress;
+    }
+    &:disabled {
+        &::-webkit-slider-runnable-track {
+            @include slider-track-disabled;
+        }
+        &::-moz-range-track {
+            @include slider-track-disabled;
+        }
+        &::-webkit-slider-thumb {
+            @include slider-thumb-disabled;
+        }
+        &::-moz-range-thumb {
+            @include slider-thumb-disabled;
+        }
+    }
+    &.micl-slider--vertical {
+        --md-sys-slider-track-direction: to top;
+        writing-mode: sideways-lr;
+        &::after {
+            --md-sys-slider-tip-space: 8px;
+            transform: rotate(90deg);
+        }
+    }
+    &:not(:disabled):focus-visible {
+        &::after {
+            opacity: 1;
+        }
+        &::-webkit-slider-thumb {
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+        }
+        &::-moz-range-thumb {
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+        }
+    }
+    &:not(:disabled):active {
+        &::-webkit-slider-thumb {
+            inline-size: 2px;
+            outline: none;
+            cursor: grabbing;
+        }
+        &::-moz-range-thumb {
+            inline-size: 2px;
+            outline: none;
+            cursor: grabbing;
+        }
+        &::after {
+            opacity: 1;
+        }
+    }
+}
+
+.micl-slider__container:has(.micl-slider-m,.micl-slider-l,.micl-slider-xl) {
+    display: grid;
+    grid-template-areas: "slidericon";
+    flex-shrink: 0;
+    align-items: center;
+    justify-items: flex-start;
+
+    .micl-slider__icon {
+        grid-area: slidericon;
+        inset: 0;
+        margin: 6px;
+        font-size: 24px;
+        color: var(--md-sys-color-on-primary);
+        z-index: 1;
+
+    }
+    input[type=range].micl-slider-m,
+    input[type=range].micl-slider-l,
+    input[type=range].micl-slider-xl {
+        grid-area: slidericon;
+    }
+    .micl-slider__icon:has(+ input[type=range].micl-slider-xl),
+    input[type=range].micl-slider-xl + .micl-slider__icon {
+        margin: 8px;
+        font-size: 32px;
+    }
+}
+
+[dir=rtl] input[type=range].micl-slider-xs.micl-slider--vertical,
+[dir=rtl] input[type=range].micl-slider-s.micl-slider--vertical,
+[dir=rtl] input[type=range].micl-slider-m.micl-slider--vertical,
+[dir=rtl] input[type=range].micl-slider-l.micl-slider--vertical,
+[dir=rtl] input[type=range].micl-slider-xl.micl-slider--vertical {
+    writing-mode: sideways-rl;
+    &::after {
+        transform: rotate(-90deg);
+    }
+}
+
+[dir=rtl] input[type=range].micl-slider-xs:not(.micl-slider--vertical),
+[dir=rtl] input[type=range].micl-slider-s:not(.micl-slider--vertical),
+[dir=rtl] input[type=range].micl-slider-m:not(.micl-slider--vertical),
+[dir=rtl] input[type=range].micl-slider-l:not(.micl-slider--vertical),
+[dir=rtl] input[type=range].micl-slider-xl:not(.micl-slider--vertical) {
+    --md-sys-slider-track-direction: to left;
+}

package/components/switch/README.md

@@ -0,0 +1,49 @@
+# Switch
+This component implements the the [Material Design 3 Expressive Switch](https://m3.material.io/components/switch/overview) design.
+
+## Basic Usage
+
+### HTML
+To add a basic switch, use the `<input type="checkbox">` element with the `micl-switch` class, paired with a `<label>` element:
+
+```HTML
+<input type="checkbox" id="myswitch" class="micl-switch" role="switch" value="foo">
+<label for="myswitch">My choice</label>
+```
+
+### CSS
+Import the switch styles into your project:
+
+```CSS
+@use "micl/components/switch";
+```
+
+### TypeScript
+No custom TypeScript is required for the core functionality of this component.
+
+### Demo
+A live example of the [Switch component](https://henkpb.github.io/micl/switch.html) is available for you to interact with.
+
+## Variants
+By default, the component displays an icon on the switch handle in both the selected and unselected state. To remove the icon in the unselected state, assign an empty string to the following CSS variable:
+
+```CSS
+#myswitch {
+  --md-sys-switch-unselected-icon: "";
+}
+```
+To remove the icon in the selected state:
+```CSS
+#myswitch {
+  --md-sys-switch-selected-icon: "";
+}
+```
+
+A switch can be disabled by adding the `disabled` attribute to the `<input>` element.
+
+The switch component is aware of the `dir` global attribute that indicates the directionality of text.
+
+Note that the component assigns a default color and `cursor: pointer` to the `<label>` element immediately preceding or immediately following the `<input>` element. Of course, you may change these CSS settings to something more appropriate.
+
+## Compatibility
+This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.

package/components/switch/switch.scss

@@ -0,0 +1,176 @@
+//
+// 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';
+
+input[type=checkbox].micl-switch {
+    --md-sys-switch-target-height: 32px;
+    --md-sys-switch-target-width: 52px;
+    --md-sys-switch-state-layer-size: 40px;
+    --md-sys-switch-handle-size: 16px;
+    --md-sys-switch-handle-selected-size: 24px;
+    --md-sys-switch-handle-pressed-size: 28px;
+    --md-sys-switch-unselected-icon: "+";
+    --md-sys-switch-selected-icon: "\AC";
+    --md-sys-switch-outline-width: 2px;
+
+    appearance: none;
+    position: relative;
+    width: var(--md-sys-switch-target-width);
+    height: var(--md-sys-target-size);
+    margin: 0;
+    border-radius: calc(var(--md-sys-switch-target-height) / 2);
+    outline: none;
+
+    &::before {
+        content: "";
+        box-sizing: border-box;
+        display: block;
+        width: var(--md-sys-switch-target-width);
+        height: var(--md-sys-switch-target-height);
+        margin-block: calc((var(--md-sys-target-size) - 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);
+        transition: background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
+    }
+    &::after {
+        content: var(--md-sys-switch-unselected-icon);
+        box-sizing: border-box;
+        position: absolute;
+        width: var(--md-sys-switch-state-layer-size);
+        height: var(--md-sys-switch-state-layer-size);
+        inset: 0;
+        inset-inline-start: -4px;
+        margin: auto 0;
+        font: 300 1rem/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-radius: var(--md-sys-shape-corner-full);
+        transform: rotate(135deg);
+        transition:
+            inset-inline-start var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
+            border-width var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
+            font-size var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
+            line-height var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
+            color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
+            border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
+            background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
+    }
+    &:checked {
+        &::before {
+            background-color: var(--md-sys-color-primary);
+        }
+        &::after {
+            content: var(--md-sys-switch-selected-icon);
+            inset-inline-start: 16px;
+            font-size: 2rem;
+            line-height: 1.4rem;
+            border: calc((var(--md-sys-switch-state-layer-size) - 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);
+        }
+    }
+    &:not(:disabled) {
+        cursor: pointer;
+
+        &:hover {
+            &::after {
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), 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);
+                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);
+            }
+            &::before {
+                outline: var(--md-sys-state-focus-indicator-thickness) 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);
+                background-color: var(--md-sys-color-primary-container);
+            }
+            &:not(:checked)::after {
+                background-color: var(--md-sys-color-on-surface-variant);
+            }
+        }
+        &:active {
+            &::after {
+                font-size: 2rem;
+                line-height: 1.7rem;
+                border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
+                background-color: var(--md-sys-color-on-surface-variant);
+            }
+            &:checked::after {
+                line-height: 1.7rem;
+                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);
+                background-color: var(--md-sys-color-primary-container);
+            }
+            &:not(:checked)::after {
+                inset-inline-start: -4px;
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent);
+            }
+        }
+    }
+    &:disabled {
+        &::before {
+            border-color: var(--md-sys-color-on-surface);
+            background-color: var(--md-sys-color-surface-container-highest);
+            opacity: 12%;
+        }
+        &:checked::before {
+            background-color: var(--md-sys-color-on-surface);
+            opacity: 12%;
+        }
+        &::after {
+            color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
+            background-color: var(--md-sys-color-on-surface);
+            opacity: 38%;
+        }
+        &:checked::after {
+            color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+            background-color: var(--md-sys-color-surface);
+            opacity: 100%;
+        }
+    }
+}
+
+input[type=checkbox].micl-switch:not(:disabled) + label,
+label:has(+ input[type=checkbox].micl-switch:not(:disabled)) {
+    cursor: pointer;
+}
+input[type=checkbox].micl-switch + label,
+label:has(+ input[type=checkbox].micl-switch) {
+    color: var(--md-sys-color-on-surface);
+}
+[dir=rtl] input[type=checkbox].micl-switch::after {
+    transform: rotate(45deg) scaleY(-1);
+}

package/components/textfield/README.md

@@ -0,0 +1,75 @@
+# Text field
+This component implements the the [Material Design 3 Expressive Text field](https://m3.material.io/components/text-fields/overview) design.
+
+## Basic Usage
+
+### HTML
+A basic text field can be either `filled` or `outlined`. To create one, use the following HTML and simply swap the class name to change the style.
+
+```HTML
+<div class="micl-textfield-filled">
+  <label for="mytextfield">Label text</label>
+  <input type="text" id="mytextfield">
+</div>
+```
+
+### CSS
+Import the text field styles into your project:
+
+```CSS
+@use "micl/components/textfield";
+```
+
+### TypeScript
+This component requires a TypeScript module for interactive features like the **character counter**. You can import the specific module and handle initialization manually, or use the main MICL library for automatic initialization.
+
+To manually initialize the component and attach an event listener for the `input` event:
+
+```TypeScript
+import miclTextField from 'micl/components/textfield';
+
+miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
+
+document.querySelector('.micl-textfield-outlined').addEventListener('input', miclTextField.input);
+```
+
+### Demo
+A live example of the [Text field component](https://henkpb.github.io/micl/textfield.html) is available for you to interact with.
+
+## Variants
+The following example shows a text field with every available feature. You can include any combination of these elements. The order of elements inside the `<div>` does not change the layout.
+
+```HTML
+<div class="micl-textfield-filled">
+  <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
+  <label for="mytextfield">Label text</label>
+  <span class="micl-textfield__prefix">$</span>
+  <input type="text" id="mytextfield" maxlength="20">
+  <span class="micl-textfield__suffix">kg</span>
+  <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
+  <span class="micl-textfield__supporting-text">Supporting text</span>
+  <span class="micl-textfield__character-counter"></span>
+</div>
+```
+
+The `<input>` element can have the following types: `text`, `date`, `datetime-local`, `email`, `month`, `number`, `password`, `tel`, `time`, `url` and `week`.
+
+Two icons may be included in the layout: a **leading icon** (an element containing the `micl-textfield__icon-leading` class), and a **trailing icon** (an element containing the `micl-textfield__icon-trailing` class).
+
+A **prefix** (e.g., "$") and a **suffix** (e.g., "kg") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+
+```HTML
+<span class="micl-textfield__prefix" style="--md-sys-textfield-prefix-space:20px">USD</span>
+<span class="micl-textfield__suffix" style="--md-sys-textfield-suffix-space:10em">@gmail.com</span>
+```
+
+Use an element with the `micl-textfield__supporting-text` class to add extra information about the text field.
+
+If the `<input>` element includes the `maxlength` attribute, the **character counter** will display automatically in the element with the `micl-textfield__character-counter` class.
+
+Adding the `disabled` boolean attribute to the `<input>` element causes the text field to be displayed in a disabled state.
+
+Adding the `micl-textfield--error` class to the text field displays it in an error state.
+
+## Compatibility
+This component uses relative RGB colors, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.

package/components/textfield/index.ts

@@ -0,0 +1,81 @@
+//
+// 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 textfieldSelector = '.micl-textfield-outlined > input,.micl-textfield-filled > input';
+export const selectSelector    = '.micl-textfield-outlined > select,.micl-textfield-filled > select';
+
+export default (() =>
+{
+    const counterSelector = '.micl-textfield-character-counter';
+
+    return {
+        initialize: (element: HTMLInputElement | HTMLSelectElement): void =>
+        {
+            if (element.dataset.miclinitialized) {
+                return;
+            }
+            element.dataset.miclinitialized = '1';
+
+            if (element.value) {
+                element.dataset.miclvalue = '1';
+            }
+
+            if (
+                (element instanceof HTMLInputElement)
+                && !!element.maxLength
+            ) {
+                const counter = element.parentElement?.querySelector(counterSelector);
+                if (counter) {
+                    counter.textContent = `${element.value.length}/${element.maxLength}`;
+                }
+            }
+        },
+
+        input: (event: Event): void =>
+        {
+            if (
+                !(event.target as Element).matches(`${textfieldSelector},${selectSelector}`)
+                || !((event.target instanceof HTMLInputElement) || (event.target instanceof HTMLSelectElement))
+                || !event.target.dataset.miclinitialized
+                || event.target.disabled
+            ) {
+                return;
+            }
+
+            if (event.target.value) {
+                event.target.dataset.miclvalue = '1';
+            }
+            else {
+                delete event.target.dataset.miclvalue;
+            }
+
+            if (
+                (event.target instanceof HTMLInputElement)
+                && !!event.target.maxLength
+            ) {
+                const counter = event.target.parentElement?.querySelector(counterSelector);
+                if (counter) {
+                    counter.textContent = `${event.target.value.length}/${event.target.maxLength}`;
+                }
+            }
+        }
+    };
+})();