material-inspired-component-library 3.0.0 → 3.0.2

package/micl.ts

@@ -25,17 +25,20 @@ import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _navigationrail, { navigationrailSelector } from './components/navigationrail';
 import _slider, { sliderSelector } from './components/slider';
-import _textfield, { textfieldSelector, selectSelector, textareaSelector } from './components/textfield';
+import _stepper, { stepperSelector } from './components/stepper';
+import _textfield, { textfieldSelector, textareaSelector, selectSelector } from './components/textfield';
 
 interface ComponentEntry<T extends HTMLElement> {
     component: {
         initialize?: (element: T) => void,
         input?     : (event: Event) => void,
+        invalid?   : (event: Event) => void,
         keydown?   : (event: Event) => void,
         cleanup?   : (element: T) => void
     };
     type: new () => T;
 }
+type ComponentKey = keyof ComponentEntry<any>['component'];
 
 export default (() =>
 {
@@ -47,6 +50,7 @@ export default (() =>
         [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
         [selectSelector]        : { component: _textfield, type: HTMLSelectElement },
         [sliderSelector]        : { component: _slider, type: HTMLInputElement },
+        [stepperSelector]       : { component: _stepper, type: HTMLElement },
         [textareaSelector]      : { component: _textfield, type: HTMLTextAreaElement },
         [textfieldSelector]     : { component: _textfield, type: HTMLInputElement }
     };
@@ -108,6 +112,21 @@ export default (() =>
         parent.querySelectorAll<HTMLElement>(selector).forEach(cleanupComponent);
     };
 
+    const handleEvent = (event: Event): void =>
+    {
+        for (const [selector, { component, type }] of Object.entries(componentMap)) {
+            if (
+                (event.target as Element).matches(selector)
+                && event.target instanceof type
+                && ['input', 'invalid', 'keydown'].includes(event.type)
+                && typeof component[event.type as ComponentKey] === 'function'
+            ) {
+                component[event.type as ComponentKey]?.(event);
+                return;
+            }
+        }
+    };
+
     const activate = () =>
     {
         const observer = new MutationObserver(mutations =>
@@ -142,32 +161,9 @@ export default (() =>
         initializeComponents(document);
 
         // Delegated Event Handlers
-        document.addEventListener('input', event =>
-        {
-            for (const [selector, { component, type }] of Object.entries(componentMap)) {
-                if (
-                    (event.target as Element).matches(selector)
-                    && event.target instanceof type
-                    && typeof component.input === 'function'
-                ) {
-                    component.input(event);
-                    return;
-                }
-            }
-        });
-        document.addEventListener('keydown', event =>
-        {
-            for (const [selector, { component, type }] of Object.entries(componentMap)) {
-                if (
-                    (event.target as Element).matches(selector)
-                    && event.target instanceof type
-                    && typeof component.keydown === 'function'
-                ) {
-                    component.keydown(event);
-                    return;
-                }
-            }
-        });
+        document.addEventListener('input', handleEvent);
+        document.addEventListener('keydown', handleEvent);
+        document.addEventListener('invalid', handleEvent, true);
     };
 
     const loaded = () =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -12,7 +12,9 @@
     "UI",
     "UX",
     "CSS",
+    "HTML",
     "accordion",
+    "app bar",
     "badge",
     "bottomsheet",
     "button",
@@ -21,10 +23,12 @@
     "dialog",
     "divider",
     "iconbutton",
+    "layout",
     "list",
     "menu",
     "navigation rail",
     "radio button",
+    "select",
     "sidesheet",
     "slider",
     "switch",

package/styles/shapes.scss

@@ -31,8 +31,6 @@ $md-sys-shape-corner-extra-extra-large: 48px;
 $md-sys-shape-corner-full: 50%;
 
 :root {
-    --md-sys-target-size: 48px;
-
     --md-sys-shape-corner-none: #{$md-sys-shape-corner-none};
     --md-sys-shape-corner-extra-small: #{$md-sys-shape-corner-extra-small};
     --md-sys-shape-corner-small: #{$md-sys-shape-corner-small};

package/styles.scss

@@ -45,6 +45,7 @@
 @use 'components/sidesheet';
 @use 'components/bottomsheet';
 @use 'components/navigationrail';
+@use 'components/stepper';
 
 @property --micl-ripple {
     syntax: '<integer>';

package/webpack.config.js

@@ -5,7 +5,7 @@ const miniCss = require('mini-css-extract-plugin');
 const distDir = path.resolve(__dirname, 'dist');
 const docsDir = path.resolve(__dirname, 'docs');
 
-const scssFiles = glob.sync('./components/**/*.scss');
+const scssFiles = glob.sync('{./layout/*.scss,./components/**/*.scss}');
 const scssEntries = scssFiles.reduce((entries, filePath) => {
     const componentName = path.dirname(filePath).split('\\').pop();
     entries[componentName] = './' + filePath;