material-inspired-component-library 7.0.1 → 8.0.0

package/micl.ts

@@ -32,16 +32,21 @@ import _stepper, { stepperSelector } from './components/stepper';
 import _textfield, { textfieldSelector, textareaSelector, selectSelector } from './components/textfield';
 import _timepicker, { timepickerSelector } from './components/timepicker';
 
+interface ComponentEventHandlers {
+    input?  : (event: Event) => void;
+    keydown?: (event: Event) => void;
+    change? : (event: Event) => void;
+}
+
 interface ComponentEntry<T extends HTMLElement> {
-    component: {
-        initialize?: (element: T) => void,
-        input?     : (event: Event) => void,
-        keydown?   : (event: Event) => void,
-        cleanup?   : (element: T) => void
+    component: ComponentEventHandlers & {
+        initialize?: (element: T) => void;
+        cleanup?   : (element: T) => void;
     };
     type: new () => T;
 }
-type ComponentKey = keyof ComponentEntry<any>['component'];
+
+type EventHandlerKey = keyof ComponentEventHandlers;
 
 export default (() =>
 {
@@ -64,6 +69,11 @@ export default (() =>
 
     const selector = Object.keys(componentMap).join(',');
 
+    const findEntry = (element: HTMLElement): ComponentEntry<HTMLElement> | undefined =>
+        Object.entries(componentMap)
+            .find(([selector, { type }]) => element.matches(selector) && element instanceof type)
+            ?.[1];
+
     const initializeScrollbars = (): void =>
     {
         document.documentElement.style.setProperty(
@@ -74,36 +84,51 @@ export default (() =>
 
     const initializeComponent = (element: HTMLElement): void =>
     {
-        for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (
-                element.matches(selector)
-                && element instanceof type
-                && typeof component.initialize === 'function'
-            ) {
-                component.initialize(element);
-                return;
-            }
+        const entry = findEntry(element);
+        if (entry && typeof entry.component.initialize === 'function') {
+            entry.component.initialize(element);
         }
     };
 
+    const rippleInitialized = new WeakSet<HTMLElement>();
+
     const initializeComponents = (parent: HTMLDocument | HTMLElement): void =>
     {
         parent.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
-
-        parent.querySelectorAll<HTMLElement>('[class*="micl-"]').forEach(element =>
+        parent.querySelectorAll<HTMLElement>('[class*="micl-"], [class*="micl-"] > summary').forEach(element =>
         {
+            if (rippleInitialized.has(element)) return;
+
             if (window.getComputedStyle(element).getPropertyValue('--micl-ripple') === '1') {
-                element.addEventListener('pointerdown', e =>
+                element.addEventListener('pointerdown', (e: PointerEvent) =>
                 {
                     if ((e.currentTarget as Element).classList.contains('micl-card--nonactionable')) {
                         return;
                     }
                     e.stopPropagation();
 
-                    let r = element.getBoundingClientRect();
+                    const r = element.getBoundingClientRect();
                     element.style.setProperty('--micl-x', `${e.clientX - r.left}px`);
                     element.style.setProperty('--micl-y', `${e.clientY - r.top}px`);
+
+                    element.classList.remove('micl-rippling');
+                    void element.offsetWidth;
+                    element.classList.add('micl-rippling');
+
+                    const cleanup = (ev: AnimationEvent): void =>
+                    {
+                        if (ev.animationName !== 'micl-ripple') return;
+
+                        element.classList.remove('micl-rippling');
+                        element.style.removeProperty('--micl-x');
+                        element.style.removeProperty('--micl-y');
+                        element.removeEventListener('animationend', cleanup);
+                    };
+
+                    element.addEventListener('animationend', cleanup);
                 });
+
+                rippleInitialized.add(element);
             }
         });
 
@@ -112,15 +137,9 @@ export default (() =>
 
     const cleanupComponent = (element: HTMLElement): void =>
     {
-        for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (
-                element.matches(selector)
-                && element instanceof type
-                && typeof component.cleanup === 'function'
-            ) {
-                component.cleanup(element);
-                return;
-            }
+        const entry = findEntry(element);
+        if (entry && typeof entry.component.cleanup === 'function') {
+            entry.component.cleanup(element);
         }
     };
 
@@ -131,14 +150,13 @@ export default (() =>
 
     const handleEvent = (event: Event): void =>
     {
-        for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (typeof component[event.type as ComponentKey] === 'function') {
-                const e = (event.target as Element).closest(selector);
-                if (e instanceof type) {
-                    component[event.type as ComponentKey]?.(event);
-                    return;
-                }
-            }
+        const target = (event.target as Element).closest(selector);
+        if (!(target instanceof HTMLElement)) return;
+
+        const entry = findEntry(target);
+        const key   = event.type as EventHandlerKey;
+        if (entry && typeof entry.component[key] === 'function') {
+            entry.component[key]?.(event);
         }
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "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",
@@ -54,7 +54,7 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "autoprefixer": "^10.4",
+    "autoprefixer": "^10.5",
     "css-loader": "^7.1",
     "extract-loader": "^5.1",
     "file-loader": "^6.2",
@@ -65,7 +65,7 @@
     "sass-loader": "^16.0",
     "ts-loader": "^9.5",
     "typescript": "^6.0",
-    "webpack": "^5.105",
+    "webpack": "^5.106",
     "webpack-cli": "^7.0"
   }
 }

package/styles/README.md

@@ -23,7 +23,7 @@ You can customize elevation levels by overriding their global CSS variables.
 </div>
 ```
 
-  
+
 ## Motion
 Motion brings your UI to life, making it expressive and intuitive to use. The motion styles are based on the [Material Design 3 Motion](https://m3.material.io/styles/motion/overview/how-it-works) guidelines.
 
@@ -34,7 +34,7 @@ Import the motion styles into your project:
 @use "material-inspired-component-library/styles/motion";
 ```
 
-  
+
 ## Shapes
 Shapes add decorative flair and help emphasize elements. These styles adhere to the [Material Design 3 Shape](https://m3.material.io/styles/shape/overview-principles) principles.
 
@@ -57,7 +57,7 @@ You can customize a component's shape by overriding its global CSS variables, su
 </div>
 ```
 
-  
+
 ## State layers
 State layers are visual overlays that communicate the interaction status of a component, such as when it's hovered over or pressed. These are based on [Material Design 3 States](https://m3.material.io/foundations/interaction/states/overview).
 
@@ -78,7 +78,7 @@ Customize the appearance of state layers by overriding their global CSS variable
 </div>
 ```
 
-  
+
 ## Typography
 Typography is the foundation of text styling. The typography styles in this library are based on the [Material Design 3 Typography](https://m3.material.io/styles/typography/overview) specifications.
 
@@ -106,3 +106,13 @@ And include a reference to the font in your application.
 ```HTML
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
 ```
+
+**Font width and letter spacing**
+
+The default typography styles apply natural letter spacing (`0px` or `normal`) optimized for the default MICL font, [**Google Sans**](https://fonts.google.com/specimen/Google+Sans). If you opt to use a narrower geometric font, such as [**Roboto**](https://fonts.google.com/specimen/Roboto), you can enable positive letter spacing to improve legibility at smaller sizes. To do this, set the `--md-ref-typeface-plain-narrow` variable to `1` in your root stylesheet:
+
+```CSS
+:root {
+    --md-ref-typeface-plain-narrow: 1;
+}
+```

package/styles/shapes.scss

@@ -47,3 +47,84 @@ $md-sys-shape-corner-full: 50%;
     --md-sys-shape-corner-extra-extra-large: #{$md-sys-shape-corner-value-extra-extra-large};
     --md-sys-shape-corner-full: #{$md-sys-shape-corner-full};
 }
+
+/*
+.micl-shape--no-rounding {
+    border-radius: var(--md-sys-shape-corner-none, 0px);
+}
+.micl-shape--extra-small-rounding {
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+}
+.micl-shape--extra-small-top-rounding {
+    border-radius: var(--md-sys-shape-corner-extra-small-top, 4px) var(--md-sys-shape-corner-extra-small-top, 4px) 0 0;
+}
+.micl-shape--small-rounding {
+    border-radius: var(--md-sys-shape-corner-small, 8px);
+}
+.micl-shape--medium-rounding {
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+}
+.micl-shape--large-rounding {
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+}
+.micl-shape--large-top-rounding {
+    border-radius: var(--md-sys-shape-corner-large, 16px) var(--md-sys-shape-corner-large, 16px) 0 0;
+}
+.micl-shape--large-start-rounding {
+    border-start-start-radius: var(--md-sys-shape-corner-large, 16px);
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--md-sys-shape-corner-large, 16px);
+    border-end-end-radius: 0;
+}
+.micl-shape--large-end-rounding {
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--md-sys-shape-corner-large, 16px);
+    border-end-start-radius: 0;
+    border-end-end-radius: var(--md-sys-shape-corner-large, 16px);
+}
+.micl-shape--large-increased-rounding {
+    border-radius: var(--md-sys-shape-corner-large-increased, 20px);
+}
+.micl-shape--extra-large-rounding {
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+}
+.micl-shape--extra-large-top-rounding {
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px) var(--md-sys-shape-corner-extra-large, 28px) 0 0;
+}
+.micl-shape--extra-large-increased-rounding {
+    border-radius: var(--md-sys-shape-corner-extra-large-increased, 32px);
+}
+.micl-shape--extra-extra-large-rounding {
+    border-radius: var(--md-sys-shape-corner-extra-extra-large, 48px);
+}
+.micl-shape--full-rounding {
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+}
+
+
+.micl-shape-circle {
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+    background-color: var(--micl-shape-background-color);
+}
+.micl-shape-square {
+    background-color: var(--micl-shape-background-color);
+}
+.micl-shape-slanted {
+    position: relative;
+    z-index: 1;
+}
+.micl-shape-slanted::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    z-index: -1;
+    background-color: var(--micl-shape-background-color);
+    transform: skewX(-8deg);
+}
+.micl-shape-arch {
+    border-start-start-radius: 50% !important;
+    border-start-end-radius: 50% !important;
+    background-color: var(--micl-shape-background-color);
+}
+*/

package/styles/statelayer.scss

@@ -33,6 +33,8 @@ $md-sys-state-focus-indicator-inner-offset: -3px;
 $md-sys-state-focus-indicator-outer-offset: 2px;
 $md-sys-state-focus-indicator-thickness: 3px;
 
+$md-sys-state-ripple-duration: 5000ms;
+
 :root {
     --md-sys-state-layer-size: #{$md-sys-state-layer-size};
     --md-sys-target-size: #{$md-sys-target-size};
@@ -47,6 +49,9 @@ $md-sys-state-focus-indicator-thickness: 3px;
     --md-sys-state-focus-indicator-inner-offset: #{$md-sys-state-focus-indicator-inner-offset};
     --md-sys-state-focus-indicator-outer-offset: #{$md-sys-state-focus-indicator-outer-offset};
     --md-sys-state-focus-indicator-thickness: #{$md-sys-state-focus-indicator-thickness};
+
+    --md-sys-state-ripple-opacity-factor: 0.6;
+    --md-sys-state-ripple-duration: #{$md-sys-state-ripple-duration};
 }
 
 @property --statelayer-color {
@@ -60,3 +65,8 @@ $md-sys-state-focus-indicator-thickness: 3px;
     initial-value: 0%;
     inherits: false;
 }
+
+@keyframes micl-ripple {
+    from { background-size: 0%, 100%; }
+    to   { background-size: 10000%, 100%; }
+}

package/styles/typography.scss

@@ -21,6 +21,7 @@
 
 :root {
     --md-ref-typeface-plain: Google Sans, system-ui, sans-serif;
+    --md-ref-typeface-plain-narrow: 0;
     --md-ref-typeface-brand: Google Sans, system-ui, sans-serif;
     --md-ref-typeface-weight-regular: 400;
     --md-ref-typeface-weight-medium: 500;
@@ -72,7 +73,7 @@
     --md-sys-typescale-title-medium-size: 1rem; // 16px
     --md-sys-typescale-title-medium-line-height: 1.5rem; // 24px
     --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
-    --md-sys-typescale-title-medium-tracking: 0,009375rem; // ~0.15px letter-spacing
+    --md-sys-typescale-title-medium-tracking: 0.009375rem; // ~0.15px letter-spacing
 
     --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
     --md-sys-typescale-title-small-size: 0.875rem; // 14px
@@ -92,6 +93,12 @@
     --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
     --md-sys-typescale-body-medium-tracking: 0.015625rem; // ~0.25px letter-spacing
 
+    --md-sys-typescale-body-smallmedium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-body-smallmedium-size: 0.8125rem; // 13px
+    --md-sys-typescale-body-smallmedium-line-height: 1.125rem; // 18px
+    --md-sys-typescale-body-smallmedium-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-body-smallmedium-tracking: 0.025rem; // ~0.4px letter-spacing
+
     --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
     --md-sys-typescale-body-small-size: 0.75rem; // 12px
     --md-sys-typescale-body-small-line-height: 1rem; // 16px
@@ -162,7 +169,7 @@
     --md-sys-typescale-emphasized-title-medium-size: 1rem; // 16px
     --md-sys-typescale-emphasized-title-medium-line-height: 1.5rem; // 24px
     --md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);
-    --md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem; // ~0.15px letter-spacing
+    --md-sys-typescale-emphasized-title-medium-tracking: 0.009375rem; // ~0.15px letter-spacing
 
     --md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);
     --md-sys-typescale-emphasized-title-small-size: 0.875rem; // 14px
@@ -206,6 +213,27 @@
     --md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);
     --md-sys-typescale-emphasized-label-small-tracking: 0.03125rem; // ~0.5px letter-spacing
 }
+@supports (letter-spacing: if(style(--md-ref-typeface-plain-narrow: 1): 0; else: 0)) {
+    :root {
+        --md-sys-typescale-title-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.009375rem; else: 0px);
+        --md-sys-typescale-title-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);
+        --md-sys-typescale-body-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);
+        --md-sys-typescale-body-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.015625rem; else: 0px);
+        --md-sys-typescale-body-smallmedium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.025rem; else: 0px);
+        --md-sys-typescale-body-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.025rem; else: 0px);
+        --md-sys-typescale-label-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);
+        --md-sys-typescale-label-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);
+        --md-sys-typescale-label-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);
+        --md-sys-typescale-emphasized-title-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.009375rem; else: 0px);
+        --md-sys-typescale-emphasized-title-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);
+        --md-sys-typescale-emphasized-body-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);
+        --md-sys-typescale-emphasized-body-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.015625rem; else: 0px);
+        --md-sys-typescale-emphasized-body-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.025rem; else: 0px);
+        --md-sys-typescale-emphasized-label-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);
+        --md-sys-typescale-emphasized-label-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);
+        --md-sys-typescale-emphasized-label-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);
+    }
+}
 
 @mixin display-large {
     font-family: var(--md-sys-typescale-display-large-font);
@@ -295,6 +323,14 @@
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
 }
 
+@mixin body-smallmedium {
+    font-family: var(--md-sys-typescale-body-smallmedium-font);
+    font-size: var(--md-sys-typescale-body-smallmedium-size);
+    line-height: var(--md-sys-typescale-body-smallmedium-line-height);
+    font-weight: var(--md-sys-typescale-body-smallmedium-weight);
+    letter-spacing: var(--md-sys-typescale-body-smallmedium-tracking);
+}
+
 @mixin body-small {
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);

package/tsconfig.json

@@ -53,7 +53,7 @@
     "declaration": true,                                 /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    "sourceMap": true,                                   /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
@@ -92,10 +92,10 @@
     // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
     // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    "noUnusedLocals": true,                              /* Enable error reporting when local variables aren't read. */
+    "noUnusedParameters": true,                          /* Raise an error when a function parameter isn't read. */
     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noImplicitReturns": true,                           /* Enable error reporting for codepaths that do not explicitly return in a function. */
     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */