material-inspired-component-library 4.0.2 → 5.0.1

package/micl.ts

@@ -22,6 +22,7 @@
 import _bottomsheet, { bottomsheetSelector } from './components/bottomsheet';
 import _button, { buttonSelector } from './components/button';
 import _checkboxgroup, { checkboxGroupSelector } from './components/checkbox';
+import _datepicker, { datepickerSelector } from './components/datepicker';
 import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _navigationrail, { navigationrailSelector } from './components/navigationrail';
@@ -47,6 +48,7 @@ export default (() =>
         [bottomsheetSelector]   : { component: _bottomsheet, type: HTMLDialogElement },
         [buttonSelector]        : { component: _button, type: HTMLButtonElement },
         [checkboxGroupSelector] : { component: _checkboxgroup, type: HTMLElement },
+        [datepickerSelector]    : { component: _datepicker, type: HTMLDialogElement },
         [listSelector]          : { component: _list, type: HTMLElement },
         [menuSelector]          : { component: _menu, type: HTMLElement },
         [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
@@ -60,6 +62,14 @@ export default (() =>
 
     const selector = Object.keys(componentMap).join(',');
 
+    const initializeScrollbars = (): void =>
+    {
+        document.documentElement.style.setProperty(
+            '--md-sys-scrollbar-thumb-color',
+            window.getComputedStyle(document.body).getPropertyValue('--md-sys-color-outline').trim()
+        );
+    };
+
     const initializeComponent = (element: HTMLElement): void =>
     {
         for (const [selector, { component, type }] of Object.entries(componentMap)) {
@@ -94,6 +104,8 @@ export default (() =>
                 });
             }
         });
+
+        initializeScrollbars();
     };
 
     const cleanupComponent = (element: HTMLElement): void =>
@@ -118,14 +130,12 @@ export default (() =>
     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', 'keydown'].includes(event.type)
-                && typeof component[event.type as ComponentKey] === 'function'
-            ) {
-                component[event.type as ComponentKey]?.(event);
-                return;
+            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;
+                }
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "4.0.2",
+  "version": "5.0.1",
   "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",
@@ -21,6 +21,7 @@
     "button",
     "card",
     "checkbox",
+    "date picker",
     "dialog",
     "divider",
     "iconbutton",
@@ -34,7 +35,8 @@
     "slider",
     "stepper",
     "switch",
-    "textfield"
+    "textfield",
+    "time picker"
   ],
   "repository": {
     "type": "git",
@@ -51,18 +53,18 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "autoprefixer": "^10.4.21",
-    "css-loader": "^7.1.2",
-    "extract-loader": "^5.1.0",
-    "file-loader": "^6.2.0",
-    "glob": "^11.0.3",
-    "mini-css-extract-plugin": "^2.9.4",
-    "postcss-loader": "^8.1.1",
-    "sass": "^1.90.0",
-    "sass-loader": "^16.0.5",
-    "ts-loader": "^9.5.2",
-    "typescript": "^5.9.2",
-    "webpack": "^5.101.3",
-    "webpack-cli": "^6.0.1"
+    "autoprefixer": "^10.4",
+    "css-loader": "^7.1",
+    "extract-loader": "^5.1",
+    "file-loader": "^6.2",
+    "glob": "^13.0",
+    "mini-css-extract-plugin": "^2.9",
+    "postcss-loader": "^8.2",
+    "sass": "^1.94",
+    "sass-loader": "^16.0",
+    "ts-loader": "^9.5",
+    "typescript": "^5.9",
+    "webpack": "^5.103",
+    "webpack-cli": "^6.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.
 
@@ -90,10 +90,19 @@ Import the typography styles into your project:
 ```
 
 ### Customizations
-You can customize font settings by overriding their global CSS variables.
+You can customize font settings by overriding their global CSS variables on the **:root** CSS pseudo-class.
+
+**Changing both the plain and brand style font:**
 
-**Changing the brand style font:**
+```CSS
+:root {
+  --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
+  --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
+}
+```
+
+And include a reference to the font in your application.
 
 ```HTML
-<div style="--md-ref-typeface-brand:Helvetica, Arial, sans-serif">
-</div>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+```

package/styles/motion.scss

@@ -104,6 +104,8 @@ $md-sys-motion-duration-extra-long2: 800ms;
 $md-sys-motion-duration-extra-long3: 900ms;
 $md-sys-motion-duration-extra-long4: 1000ms;
 
+$md-sys-motion-path: linear;
+
 :root {
     --md-sys-motion-duration-short1: #{$md-sys-motion-duration-short1};
     --md-sys-motion-duration-short2: #{$md-sys-motion-duration-short2};
@@ -121,4 +123,5 @@ $md-sys-motion-duration-extra-long4: 1000ms;
     --md-sys-motion-duration-extra-long2: #{$md-sys-motion-duration-extra-long2};
     --md-sys-motion-duration-extra-long3: #{$md-sys-motion-duration-extra-long3};
     --md-sys-motion-duration-extra-long4: #{$md-sys-motion-duration-extra-long4};
+    --md-sys-motion-path: #{$md-sys-motion-path};
 }

package/styles/shapes.scss

@@ -19,26 +19,31 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-$md-sys-shape-corner-none: 0px;
-$md-sys-shape-corner-extra-small: 4px;
-$md-sys-shape-corner-small: 8px;
-$md-sys-shape-corner-medium: 12px;
-$md-sys-shape-corner-large: 16px;
-$md-sys-shape-corner-large-increased: 20px;
-$md-sys-shape-corner-extra-large: 28px;
-$md-sys-shape-corner-extra-large-increased: 32px;
-$md-sys-shape-corner-extra-extra-large: 48px;
+$md-sys-shape-corner-value-none: 0px;
+$md-sys-shape-corner-value-extra-small: 4px;
+$md-sys-shape-corner-value-small: 8px;
+$md-sys-shape-corner-value-medium: 12px;
+$md-sys-shape-corner-value-large: 16px;
+$md-sys-shape-corner-value-large-increased: 20px;
+$md-sys-shape-corner-value-extra-large: 28px;
+$md-sys-shape-corner-value-extra-large-increased: 32px;
+$md-sys-shape-corner-value-extra-extra-large: 48px;
 $md-sys-shape-corner-full: 50%;
 
 :root {
-    --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};
-    --md-sys-shape-corner-medium: #{$md-sys-shape-corner-medium};
-    --md-sys-shape-corner-large: #{$md-sys-shape-corner-large};
-    --md-sys-shape-corner-large-increased: #{$md-sys-shape-corner-large-increased};
-    --md-sys-shape-corner-extra-large: #{$md-sys-shape-corner-extra-large};
-    --md-sys-shape-corner-extra-large-increased: #{$md-sys-shape-corner-extra-large-increased};
-    --md-sys-shape-corner-extra-extra-large: #{$md-sys-shape-corner-extra-extra-large};
+    --md-sys-shape-corner-none: #{$md-sys-shape-corner-value-none};
+    --md-sys-shape-corner-extra-small: #{$md-sys-shape-corner-value-extra-small};
+    --md-sys-shape-corner-extra-small-top: #{$md-sys-shape-corner-value-extra-small} #{$md-sys-shape-corner-value-extra-small} 0 0;
+    --md-sys-shape-corner-small: #{$md-sys-shape-corner-value-small};
+    --md-sys-shape-corner-medium: #{$md-sys-shape-corner-value-medium};
+    --md-sys-shape-corner-large: #{$md-sys-shape-corner-value-large};
+    --md-sys-shape-corner-large-end: 0 #{$md-sys-shape-corner-value-large} #{$md-sys-shape-corner-value-large} 0;
+    --md-sys-shape-corner-large-start: #{$md-sys-shape-corner-value-large} 0 0 #{$md-sys-shape-corner-value-large};
+    --md-sys-shape-corner-large-top: #{$md-sys-shape-corner-value-large} #{$md-sys-shape-corner-value-large} 0 0;
+    --md-sys-shape-corner-large-increased: #{$md-sys-shape-corner-value-large-increased};
+    --md-sys-shape-corner-extra-large: #{$md-sys-shape-corner-value-extra-large};
+    --md-sys-shape-corner-extra-large-top: #{$md-sys-shape-corner-value-extra-large} #{$md-sys-shape-corner-value-extra-large} 0 0;
+    --md-sys-shape-corner-extra-large-increased: #{$md-sys-shape-corner-value-extra-large-increased};
+    --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};
 }

package/styles/statelayer.scss

@@ -26,6 +26,8 @@ $md-sys-state-hover-state-layer-opacity: 8%;
 $md-sys-state-focus-state-layer-opacity: 10%;
 $md-sys-state-pressed-state-layer-opacity: 10%;
 $md-sys-state-dragged-state-layer-opacity: 16%;
+$md-sys-state-disabled-state-layer-opacity: 38%;
+$md-sys-state-backdrop-opacity: 32%;
 
 $md-sys-state-focus-indicator-inner-offset: -3px;
 $md-sys-state-focus-indicator-outer-offset: 2px;
@@ -39,6 +41,8 @@ $md-sys-state-focus-indicator-thickness: 3px;
     --md-sys-state-focus-state-layer-opacity: #{$md-sys-state-focus-state-layer-opacity};
     --md-sys-state-pressed-state-layer-opacity: #{$md-sys-state-pressed-state-layer-opacity};
     --md-sys-state-dragged-state-layer-opacity: #{$md-sys-state-dragged-state-layer-opacity};
+    --md-sys-state-disabled-state-layer-opacity: #{$md-sys-state-disabled-state-layer-opacity};
+    --md-sys-state-backdrop-opacity: #{$md-sys-state-backdrop-opacity};
 
     --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};

package/styles/typography.scss

@@ -20,8 +20,8 @@
 // SOFTWARE.
 
 :root {
-    --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
-    --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
+    --md-ref-typeface-plain: Google Sans, system-ui, sans-serif;
+    --md-ref-typeface-brand: Google Sans, system-ui, sans-serif;
     --md-ref-typeface-weight-regular: 400;
     --md-ref-typeface-weight-medium: 500;
     --md-ref-typeface-weight-bold: 700;

package/styles.scss

@@ -19,7 +19,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use 'foundations';
 @use 'foundations/layout';
+@use 'foundations/scrollbar';
 
 @use 'styles/typography';
 @use 'styles/shapes';
@@ -47,30 +49,5 @@
 @use 'components/bottomsheet';
 @use 'components/navigationrail';
 @use 'components/stepper';
+@use 'components/datepicker';
 @use 'components/timepicker';
-
-@property --micl-ripple {
-    syntax: '<integer>';
-    inherits: false;
-    initial-value: 0;
-}
-@property --micl-x {
-    syntax: '<length>';
-    inherits: false;
-    initial-value: -100000px;
-}
-@property --micl-y {
-    syntax: '<length>';
-    inherits: false;
-    initial-value: -100000px;
-}
-@property --micl-width {
-    syntax: '<length>';
-    inherits: true;
-    initial-value: 0px;
-}
-@property --micl-height {
-    syntax: '<length>';
-    inherits: true;
-    initial-value: 0px;
-}

package/tsconfig.json

@@ -12,7 +12,7 @@
 
     /* Language and Environment */
     "target": "es2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "lib": ["DOM", "es2022"],                             /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -27,7 +27,7 @@
     /* Modules */
     "module": "es2022",                                  /* Specify what module code is generated. */
     "rootDir": "./",                                     /* Specify the root folder within your source files. */
-    "moduleResolution": "node10",                        /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "bundler",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */