material-inspired-component-library 8.0.4 → 8.1.1

package/docs/shapes.html

@@ -11,16 +11,24 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
-    <link rel="stylesheet" href="shape.css">
+    <link rel="stylesheet" href="shapes.css">
     <link rel="stylesheet" href="docs.css">
     <style>
-        figure {
-            margin: 24px;
+        .shapes {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            margin-inline-end: 16px;
         }
-        .shape-primary {
-            --micl-shape-background-color: var(--md-sys-color-primary-container);
-            block-size: 96px;
-            inline-size: 96px;
+        .buttons {
+            display: flex;
+            align-content: flex-start;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        .micl-shapes {
+            block-size: 140px;
+            inline-size: 140px;
         }
     </style>
 </head>
@@ -42,17 +50,20 @@
                 <div class="micl-pane__column">
                     <div class="micl-card-elevated">
                         <div class="micl-card__content" style="display:flex">
-                            <svg class="micl-shape micl-shape-square" viewBox="-10 0 120 100" style="inline-size:120px;block-size:100px"><path /></svg>
-                            <svg class="micl-shape micl-shape-square" viewBox="-10 0 120 100" style="inline-size:120px;block-size:100px">
-                                <defs>
-                                    <pattern id="photo-1" patternUnits="userSpaceOnUse" x="-10" y="0" width="120" height="100">
-                                        <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/A_Brouhot_car_in_Paris%2C_1910.jpg/330px-A_Brouhot_car_in_Paris%2C_1910.jpg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=thumbnail" width="120" height="100" preserveAspectRatio="xMidYMid slice" />
-                                    </pattern>
-                                </defs>
-                                <path fill="url(#photo-1)" />
-                            </svg>
-
-                            <div style="display:flex;gap:8px;align-self:center;flex-wrap:wrap">
+                            <div class="shapes">
+                                <svg class="micl-shapes micl-shapes--square" viewBox="-10 0 120 100"><path /></svg>
+                                <svg class="micl-shapes micl-shapes--square micl-shapes--outlined" viewBox="-10 0 120 100"><path /></svg>
+                                <svg class="micl-shapes micl-shapes--square" viewBox="-10 0 120 100">
+                                    <defs>
+                                        <pattern id="photo-1" patternUnits="userSpaceOnUse" x="-10" y="0" width="120" height="100">
+                                            <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Sibirischer_tiger_de_edit02.jpg/330px-Sibirischer_tiger_de_edit02.jpg" width="120" height="100" preserveAspectRatio="xMidYMid slice" />
+                                        </pattern>
+                                    </defs>
+                                    <path fill="url(#photo-1)" />
+                                </svg>
+                                <svg class="micl-shapes micl-shapes--square micl-shapes--shadowed" viewBox="-10 0 120 100" style="fill:var(--md-sys-color-tertiary)"><path /></svg>
+                            </div>
+                            <div class="buttons">
                                 <button type="button" data-target="circle"         class="micl-button-outlined-s">Circle</button>
                                 <button type="button" data-target="square"         class="micl-button-outlined-s">Square</button>
                                 <button type="button" data-target="slanted"        class="micl-button-outlined-s">Slanted</button>
@@ -94,14 +105,14 @@
                 </div>
             </div>
         </section>
-        <section class="micl-pane">
+        <section class="micl-pane" style="min-inline-size:328px">
             <div class="micl-card-filled" style="margin-top:8px">
                 <div class="micl-card__headline-s">
                     <h2>Code example</h2>
                     <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre tabindex="-1"><code>&lt;hr class="micl-divider"&gt;</code></pre>
+                    <pre tabindex="-1"><code>&lt;svg class="micl-shapes micl-shapes--square" viewBox="-10 0 120 100"&gt;&lt;path /&gt;&lt;/svg&gt;</code></pre>
                 </div>
             </div>
         </section>
@@ -111,35 +122,33 @@
     <script src="docs.js"></script>
     <script>
         const SHAPES = [
-            'circle', 'square', 'slanted', 'arch', 'semicircle',
-            'oval', 'pill', 'triangle', 'arrow', 'fan',
-            'diamond', 'clamshell', 'pentagon', 'gem', 'very-sunny',
-            'sunny', 'cookie-4', 'cookie-6', 'cookie-7', 'cookie-9',
-            'cookie-12', 'clover-4', 'clover-8', 'burst', 'soft-burst',
-            'boom', 'soft-boom', 'flower', 'puffy', 'puffy-diamond',
+            'circle', 'square', 'slanted', 'arch', 'semicircle', 'oval', 'pill', 'triangle',
+            'arrow', 'fan', 'diamond', 'clamshell', 'pentagon', 'gem', 'very-sunny', 'sunny',
+            'cookie-4', 'cookie-6', 'cookie-7', 'cookie-9', 'cookie-12', 'clover-4', 'clover-8',
+            'burst', 'soft-burst', 'boom', 'soft-boom', 'flower', 'puffy', 'puffy-diamond',
             'ghost-ish', 'pixel-circle', 'pixel-triangle', 'bun', 'heart'
         ];
 
-        document.querySelector('.micl-shape').addEventListener('morph', event =>
-        {
-            const el = event.currentTarget;
-            el.style.setProperty('--morph-duration', `${event.detail.duration}ms`);
-            if (event.detail.easing) {
-                el.style.setProperty('--morph-easing', event.detail.easing);
-            }
-            SHAPES.forEach(shape => el.classList.remove(`micl-shape-${shape}`));
-            el.classList.add(`micl-shape-${event.detail.shape}`);
+        document.querySelectorAll('.micl-shapes').forEach(el => {
+            el.addEventListener('morph', event => {
+                const target = event.currentTarget;
+                target.style.setProperty('--micl-shapes-morph-duration', `${event.detail.duration}ms`);
+                if (event.detail.easing) {
+                    target.style.setProperty('--micl-shapes-morph-easing', event.detail.easing);
+                }
+                SHAPES.forEach(shape => target.classList.remove(`micl-shapes--${shape}`));
+                target.classList.add(`micl-shapes--${event.detail.shape}`);
+            });
         });
 
-        document.querySelectorAll('button[data-target]').forEach(button =>
-        {
+        document.querySelectorAll('button[data-target]').forEach(button => {
             button.addEventListener('click', () => {
-                document.querySelectorAll('.micl-shape').forEach(el => {
+                document.querySelectorAll('.micl-shapes').forEach(el => {
                     el.dispatchEvent(new CustomEvent('morph', {
                         detail: {
-                            shape:    button.dataset.target,
+                            shape   : button.dataset.target,
                             duration: 2000,
-                            easing:   'cubic-bezier(0.34, 1.56, 0.64, 1)'
+                            easing  : 'cubic-bezier(0.34, 1.56, 0.64, 1)'
                         }
                     }));
                 });

package/foundations/layout/index.scss

@@ -19,9 +19,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../styles/shapes';
+@use '../../styles/shape';
 
-@include shapes.corner('medium');
+@include shape.corner('medium');
 
 $md-sys-window-compact-max: 599px;
 $md-sys-window-medium-min: 600px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "8.0.4",
+  "version": "8.1.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",
@@ -31,6 +31,7 @@
     "navigation rail",
     "radio button",
     "select",
+    "shapes",
     "sidesheet",
     "slider",
     "snackbar",

package/styles/elevation.scss

@@ -22,9 +22,9 @@
 @use 'sass:map';
 
 //
-// Set $master: true (via @use ... with) to install all six levels in a single :root block —
-// used by the master bundle. When false (default), components opt into individual levels via
-// @include level($n), so per-component CSS bundles only carry the levels they actually reference.
+// Set $master: true (@use 'styles/elevation' with ($master: true)) to install all six levels in
+// a single body block — used by the master bundle. When false (default), components opt into
+// individual levels via @include level($n).
 //
 $master: false !default;
 
@@ -54,16 +54,19 @@ $_levels: (
 
 @if $master {
     body {
-        @each $n, $v in $_levels {
-            --md-sys-elevation-level#{$n}: #{$v};
+        @each $name, $value in $_levels {
+            --md-sys-elevation-level#{$name}: #{$value};
         }
     }
 }
 
-@mixin level($n) {
+@mixin level($name) {
     @if not $master {
+        @if not map.has-key($_levels, $name) {
+            @error "Unknown elevation level '#{$name}'. Available: #{map.keys($_levels)}.";
+        }
         body {
-            --md-sys-elevation-level#{$n}: #{map.get($_levels, $n)};
+            --md-sys-elevation-level#{$name}: #{map.get($_levels, $name)};
         }
     }
 }

package/styles/motion.scss

@@ -22,19 +22,12 @@
 @use 'sass:map';
 
 //
-// Set $master: true (via @use ... with) to install every duration token + path on :root —
-// used by the master bundle. When false (default), components opt into individual duration
-// tokens via @include duration('medium2'), so per-component CSS bundles only carry what they
-// reference via var(--md-sys-motion-duration-...).
+// Set $master: true (via @use 'styles/motion' with ($master: true)) to install every duration
+// token + path on :root — used by the master bundle. When false (default), components opt into
+// individual duration tokens via @include duration('medium2').
 //
 $master: false !default;
 
-//
-// Project-tuned cubic-bezier approximations of M3 spring-based motion. M3 itself defines
-// fast/default/slow × spatial/effects motion as spring physics (damping/stiffness pairs),
-// but CSS transitions don't have a native spring() timing function, so these bezier curves
-// stand in. Y values >1 in the spatial easings produce the characteristic M3 Expressive overshoot.
-//
 $md-sys-motion-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.90);
 $md-sys-motion-expressive-fast-spatial-duration: 350ms;
 $md-sys-motion-expressive-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
@@ -110,6 +103,15 @@ $_durations: (
     extra-long4:  $md-sys-motion-duration-extra-long4,
 );
 
+@if $master {
+    :root {
+        @each $name, $value in $_durations {
+            --md-sys-motion-duration-#{$name}: #{$value};
+        }
+        --md-sys-motion-path: #{$md-sys-motion-path};
+    }
+}
+
 @mixin duration($name) {
     @if not $master {
         @if not map.has-key($_durations, $name) {
@@ -120,12 +122,3 @@ $_durations: (
         }
     }
 }
-
-@if $master {
-    :root {
-        @each $name, $value in $_durations {
-            --md-sys-motion-duration-#{$name}: #{$value};
-        }
-        --md-sys-motion-path: #{$md-sys-motion-path};
-    }
-}

package/styles/{shapes.scss → shape.scss}

@@ -22,10 +22,9 @@
 @use 'sass:map';
 
 //
-// Set $master: true (via @use ... with) to install every corner token in a single body block —
-// used by the master bundle. When false (default), components opt into individual tokens via
-// @include corner('medium'), so per-component CSS bundles only carry the tokens they actually
-// reference.
+// Set $master: true (via @use 'styles/shape' with ($master: true)) to install every corner token
+// in a single root block — used by the master bundle. When false (default), components opt into
+// individual tokens via @include corner('medium').
 //
 $master: false !default;
 
@@ -57,6 +56,9 @@ $_corners: (
 
 @mixin corner($name) {
     @if not $master {
+        @if not map.has-key($_corners, $name) {
+            @error "Unknown corner rounding '#{$name}'. Available: #{map.keys($_corners)}.";
+        }
         :root {
             --md-sys-shape-corner-#{$name}: #{map.get($_corners, $name)};
         }

package/styles/statelayer.scss

@@ -22,11 +22,11 @@
 @use 'sass:map';
 
 //
-// Set $master: true (via @use ... with) to install every state-layer token, the @property
-// registrations, and the ripple keyframes — used by the master bundle. When false (default),
-// components opt into individual tokens via @include token('hover-state-layer-opacity'),
-// the animatable @property registrations via @include property, and the ripple keyframes via
-// @include keyframes — so per-component CSS bundles only carry what they actually reference.
+// Set $master: true (via @use 'styles/statelayer' with ($master: true)) to install every
+// state-layer token, the @property registrations, and the ripple keyframes — used by the
+// master bundle. When false (default), components opt into individual tokens via
+// @include token('hover-state-layer-opacity'), the animatable @property registrations via
+// @include property, and the ripple keyframes via @include keyframes.
 //
 $master: false !default;
 
@@ -37,35 +37,50 @@ $_tokens: (
     focus-state-layer-opacity:     10%,
     pressed-state-layer-opacity:   10%,
     dragged-state-layer-opacity:   16%,
-    // TODO: misnamed vs M3 spec — value 38% matches DisabledLabelTextOpacity / DisabledIconOpacity
-    // (content fade), but M3's `disabled.state-layer.opacity` is 12% (container background).
-    // Either rename to --md-sys-state-disabled-opacity (breaking) or split into two tokens.
     disabled-state-layer-opacity:  38%,
     focus-indicator-inner-offset:  -3px,
     focus-indicator-outer-offset:  2px,
     focus-indicator-thickness:     3px,
     backdrop-opacity:              32%,
     ripple-opacity-factor:         0.6,
-    // TODO: 5000ms is well outside M3's motion scale (max DurationExtraLong4 = 1000ms;
-    // standard ripples ~300ms). Used here as an upper-bound cap on the @keyframes spread,
-    // not as a perceived animation duration. Consider renaming to ripple-spread-cap or
-    // aligning with an M3 motion token.
     ripple-duration:               5000ms,
 );
 
+@if $master {
+    :root {
+        @each $name, $value in $_tokens {
+            --md-sys-state-#{$name}: #{$value};
+        }
+    }
+
+    @property --statelayer-color {
+        syntax: '<color>';
+        initial-value: transparent;
+        inherits: false;
+    }
+    @property --statelayer-opacity {
+        syntax: '<percentage>';
+        initial-value: 0%;
+        inherits: false;
+    }
+
+    @keyframes micl-ripple {
+        from { background-size: 0%, 100%; }
+        to   { background-size: 10000%, 100%; }
+    }
+}
+
 @mixin token($name) {
     @if not $master {
+        @if not map.has-key($_tokens, $name) {
+            @error "Unknown state-layer token '#{$name}'. Available: #{map.keys($_tokens)}.";
+        }
         :root {
             --md-sys-state-#{$name}: #{map.get($_tokens, $name)};
         }
     }
 }
 
-//
-// CSS @property registrations for the ripple animation. Components that animate --statelayer-color
-// or --statelayer-opacity (typed-property interpolation) must include this mixin; otherwise the
-// variables fall back to untyped strings and the browser cannot transition between values.
-//
 @mixin property {
     @if not $master {
         @property --statelayer-color {
@@ -81,10 +96,6 @@ $_tokens: (
     }
 }
 
-//
-// Ripple keyframes only required by components that actually run the ripple background-size
-// animation.
-//
 @mixin keyframes {
     @if not $master {
         @keyframes micl-ripple {
@@ -93,27 +104,3 @@ $_tokens: (
         }
     }
 }
-
-@if $master {
-    :root {
-        @each $name, $value in $_tokens {
-            --md-sys-state-#{$name}: #{$value};
-        }
-    }
-
-    @property --statelayer-color {
-        syntax: '<color>';
-        initial-value: transparent;
-        inherits: false;
-    }
-    @property --statelayer-opacity {
-        syntax: '<percentage>';
-        initial-value: 0%;
-        inherits: false;
-    }
-
-    @keyframes micl-ripple {
-        from { background-size: 0%, 100%; }
-        to   { background-size: 10000%, 100%; }
-    }
-}

package/styles/typography.scss

@@ -22,11 +22,10 @@
 @use 'sass:map';
 
 //
-// Set $master: true (via @use ... with) to install every typescale token, the @supports
-// narrow-tracking overrides, and the .md-sys-typescale-* utility classes — used by the
-// master bundle. When false (default), components opt into individual typescales via @include
-// scale('body-large'), so per-component CSS bundles only carry the typescale tokens they
-// actually reference.
+// Set $master: true (@use 'styles/typography' with ($master: true)) to install every typescale
+// token, the @supports narrow-tracking overrides, and the .md-sys-typescale-* utility classes —
+// used by the master bundle. When false (default), components opt into individual typescales via
+// @include scale('body-large').
 //
 $master: false !default;
 

package/styles.scss

@@ -19,10 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-// Configured imports first: $master must be set on each module before any
-// transitive consumer (e.g. foundations/layout) loads it with defaults,
-// otherwise Sass errors with "module already loaded".
-@use 'styles/shapes' with ($master: true);
+@use 'styles/shape' with ($master: true);
 @use 'styles/elevation' with ($master: true);
 @use 'styles/statelayer' with ($master: true);
 @use 'styles/typography' with ($master: true);

package/tools/shapes/check.mjs

@@ -24,7 +24,7 @@ import path from 'node:path';
 import { generatePathsScss, TARGET_PATH } from './generate.mjs';
 
 //
-// CI staleness gate. Compares the on-disk components/shape/_paths.generated.scss
+// CI staleness gate. Compares the on-disk components/shapes/_paths.generated.scss
 // against what the generator would produce now. Exits non-zero if they differ,
 // instructing the developer to run `npm run gen:shapes` and commit the result.
 //

package/tools/shapes/generate.mjs

@@ -25,19 +25,13 @@ import { fileURLToPath } from 'node:url';
 
 //
 // Shape-path generator. Run via `npm run gen:shapes`. Writes
-// components/shape/_paths.generated.scss with one map entry per shape; the
+// components/shapes/_paths.generated.scss with one map entry per shape; the
 // SCSS partial then looks up the path strings without doing any math at
 // compile time.
 //
-// This file is a faithful port of the Sass math that previously lived in
-// styles/shapes.scss / components/shape/index.scss. Numeric output is
-// formatted to match Sass's default $number-precision: 10 with trailing
-// zeros stripped, so the emitted `d` strings are byte-identical to the
-// Sass-rendered ones.
-//
 
 const __dirname  = path.dirname(fileURLToPath(import.meta.url));
-const targetPath = path.resolve(__dirname, '../../components/shape/_paths.generated.scss');
+const targetPath = path.resolve(__dirname, '../../components/shapes/_paths.generated.scss');
 
 // Sass's default precision is 10 decimal places. Match that, then strip
 // trailing zeros so e.g. 50.0000000000 → 50, 3.1400000000 → 3.14.

package/webpack.config.js

@@ -1,4 +1,5 @@
 const path    = require('path');
+const fs      = require('fs');
 const glob    = require('glob');
 const webpack = require('webpack');
 const miniCss = require('mini-css-extract-plugin');
@@ -12,9 +13,19 @@ const scssEntries = scssFiles.reduce((entries, filePath) => {
     // dist-bundle entry that installs all shapes). Only the latter should
     // be compiled as a webpack entry.
     const normalized = filePath.replace(/\\/g, '/');
-    if (normalized.endsWith('components/shape/index.scss')) return entries;
+    if (normalized.endsWith('components/shapes/index.scss')) return entries;
     const componentName = path.dirname(filePath).split('\\').pop();
-    entries[componentName] = './' + filePath;
+
+    // Pair each component's stylesheet with its sibling TypeScript handler (if
+    // present) so the standalone <component>.js contains the component logic
+    // instead of an empty UMD stub. Foundations TS are built via tsEntries.
+    const sources = ['./' + filePath];
+    const tsSibling = path.dirname(normalized) + '/index.ts';
+    if (normalized.startsWith('components/') && fs.existsSync(tsSibling)) {
+        sources.push('./' + tsSibling);
+    }
+
+    entries[componentName] = sources.length > 1 ? sources : sources[0];
     return entries;
 }, {});
 
@@ -26,11 +37,14 @@ const tsEntries = glob.sync('./foundations/**/*.ts').reduce((entries, filePath)
 }, {});
 
 module.exports = [{
+    // Standalone per-component / per-foundation files. Built first and on its
+    // own (clean: true) so the micl bundle below can scope-hoist component
+    // modules instead of treating them as entry points.
+    name: 'parts',
     mode: 'production',
     entry: {
         ...scssEntries,
-        ...tsEntries,
-        micl: ['./styles.scss', './micl.ts']
+        ...tsEntries
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js']
@@ -64,11 +78,52 @@ module.exports = [{
             filename: '[name].css'
         })
     ]
+}, {
+    // Full dist bundle. Separate compilation (after 'parts', without cleaning)
+    // so component modules imported by micl.ts are concatenated into micl.js.
+    name: 'bundle',
+    dependencies: ['parts'],
+    mode: 'production',
+    entry: {
+        micl: ['./styles.scss', './micl.ts']
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
+    output: {
+        path: distDir,
+        filename: '[name].js',
+        clean: false,
+        library: {
+            name: 'micl',
+            type: 'umd'
+        }
+    },
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use : [
+                miniCss.loader,
+                'css-loader',
+                'postcss-loader',
+                'sass-loader'
+            ]
+        }, {
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/
+        }]
+    },
+    plugins: [
+        new miniCss({
+            filename: '[name].css'
+        })
+    ]
 }, {
     mode: 'production',
     entry: {
         micl: ['./styles.scss', './micl.ts'],
-        shape: './components/shape/master.scss'
+        shapes: './components/shapes/master.scss'
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js']