material-inspired-component-library 8.0.4 → 8.1.0

package/CLAUDE.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+MICL is a Material Design 3 (M3 Expressive) UI component library written in Sass and TypeScript.
+
+## Commands
+
+```bash
+npm run build    # Compiles TypeScript + Sass via webpack, outputs to /dist/ and /docs/
+```
+
+There is no test suite, linter script, or dev server configured.
+
+## Architecture
+
+### Entry Points
+
+- **`micl.ts`** — Main orchestrator. Initializes components lazily via a `MutationObserver` that watches for DOM insertions/removals. Handles event delegation for `input`, `change`, and `keydown` events, applies the ripple effect, and sets scrollbar CSS custom properties.
+- **`styles.scss`** — Master stylesheet that imports all component and foundation Sass partials.
+
+### Component Structure
+
+Each component lives in `components/<name>/` and exports:
+- A CSS selector string (e.g., `buttonSelector = 'button.micl-button--toggle'`)
+- A handler object with `initialize(element)` / `cleanup(element)` methods and optional event handlers (`input`, `change`, `keydown`, `command`)
+
+`micl.ts` imports every component handler, maps selectors to handlers, and drives the lifecycle using the MutationObserver + event delegation pattern.
+
+### Styling System
+
+- Sass uses `@use` (not `@import`); partials are namespaced.
+- Theming is done entirely via CSS custom properties with `--md-comp-*` prefixes.
+- `themes/` contains 11 colour themes, each with light, dark, and high-contrast variants.
+- `styles/` contains Material Design tokens: typography, shapes, elevation, motion, state layers.
+- `foundations/` contains the responsive layout system (breakpoints: compact ≤599 px, medium 600–839 px, expanded 840–1199 px, large 1200–1599 px, extra-large ≥1600 px).
+
+### Coding
+
+- The amount of TypeScript code should be minimized. Necessary functionality should be solved using SCSS only.
+– The SCSS code can be verbose, but the compiled CSS code must be as small as possible.
+
+### Documentation
+
+- Component documentation is stored with the SCSS and JavaScript files. Always check if the documentation is up to date with regards to the implementation.
+
+### Build
+
+`webpack.config.js` produces two identical outputs: one to `/dist/` (npm distribution) and one to `/docs/` (live demo). TypeScript target is ES2022 with strict mode and declaration-file generation enabled.
+
+The library compiles to a UMD bundle (`dist/micl.js`) and a CSS file (`dist/micl.css`) with zero runtime dependencies. In addition, a CSS and JavaScript pair of compiled files is created, so that a consumer may load only a subset of components.

package/README.md

@@ -114,6 +114,7 @@ The library currently consists of the following components:
 - [x] [Navigation rail](components/navigationrail/README.md)
 - [x] [Radio button](components/radio/README.md)
 - [x] [Select](components/select/README.md)
+- [x] [Shapes](components/shapes/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
 - [x] [Slider](components/slider/README.md)
 - [x] [Snackbar](components/snackbar/README.md)
@@ -124,6 +125,9 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 8.1.0 (24.06.2026)
+- **Shapes**: The Material shape library supported as the 'Shapes' component.
+
 ### 8.0.0 (05.05.2026)
 - **BREAKING**: Renamed many CSS custom properties from --md-sys- to --md-comp-.
 - **List, Menu, Accordion, Select**: Aligned with latest MD3 spec.

package/components/alert/index.scss

@@ -20,10 +20,10 @@
 // SOFTWARE.
 
 @use '../../foundations';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/typography';
 
-@include shapes.corner('small');
+@include shape.corner('small');
 
 @include typography.scale('title-medium');
 @include typography.scale('body-medium');

package/components/appbar/index.scss

@@ -22,14 +22,14 @@
 @use '../../foundations';
 @use '../../foundations/layout';
 @use '../../styles/elevation';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(0);
 @include elevation.level(2);
 
-@include shapes.corner('none');
+@include shape.corner('none');
 
 @include typography.scale('display-small');
 @include typography.scale('headline-medium');

package/components/bottomsheet/index.scss

@@ -22,13 +22,13 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 
 @include elevation.level(1);
 
-@include shapes.corner('extra-large');
-@include shapes.corner('small');
+@include shape.corner('extra-large');
+@include shape.corner('small');
 
 @include statelayer.token('focus-indicator-thickness');
 @include statelayer.token('focus-indicator-outer-offset');

package/components/button/index.scss

@@ -22,17 +22,17 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(0);
 @include elevation.level(1);
 
-@include shapes.corner('small');
-@include shapes.corner('medium');
-@include shapes.corner('large');
-@include shapes.corner('extra-large');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('extra-large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/card/index.scss

@@ -23,7 +23,7 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
@@ -33,7 +33,7 @@
 @include elevation.level(3);
 @include elevation.level(4);
 
-@include shapes.corner('medium');
+@include shape.corner('medium');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');
@@ -236,7 +236,7 @@
 
         .micl-card__image {
             grid-column: 1;
-            grid-row: 1 / -1;
+            grid-row: 1 / span 4;
             block-size: 100%;
             background-size: cover;
         }

package/components/checkbox/index.scss

@@ -21,11 +21,11 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('full');
+@include shape.corner('full');
 
 @include statelayer.token('layer-size');
 @include statelayer.token('hover-state-layer-opacity');

package/components/datepicker/index.scss

@@ -21,12 +21,12 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('large');
-@include shapes.corner('full');
+@include shape.corner('large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/dialog/index.scss

@@ -22,7 +22,7 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
@@ -30,8 +30,8 @@
 @include elevation.level(2);
 @include elevation.level(3);
 
-@include shapes.corner('none');
-@include shapes.corner('extra-large');
+@include shape.corner('none');
+@include shape.corner('extra-large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('backdrop-opacity');

package/components/iconbutton/index.scss

@@ -22,16 +22,16 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 
 @include elevation.level(0);
 
-@include shapes.corner('small');
-@include shapes.corner('medium');
-@include shapes.corner('large');
-@include shapes.corner('extra-large');
-@include shapes.corner('full');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('extra-large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/list/index.scss

@@ -22,17 +22,17 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(4);
 
-@include shapes.corner('extra-small');
-@include shapes.corner('small');
-@include shapes.corner('medium');
-@include shapes.corner('large');
-@include shapes.corner('full');
+@include shape.corner('extra-small');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/menu/index.scss

@@ -22,14 +22,14 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(2);
 
-@include shapes.corner('small');
-@include shapes.corner('large');
+@include shape.corner('small');
+@include shape.corner('large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/navigationrail/index.scss

@@ -23,14 +23,14 @@
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(0);
 @include elevation.level(2);
 
-@include shapes.corner('large');
+@include shape.corner('large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/radio/index.scss

@@ -21,10 +21,10 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 
-@include shapes.corner('full');
+@include shape.corner('full');
 
 @include statelayer.token('layer-size');
 @include statelayer.token('hover-state-layer-opacity');

package/components/select/index.scss

@@ -22,13 +22,13 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(2);
 
-@include shapes.corner('large');
+@include shape.corner('large');
 
 @include statelayer.token('disabled-state-layer-opacity');
 

package/components/shapes/README.md

@@ -0,0 +1,94 @@
+# Shapes
+The Shapes component renders [Material Design 3 Expressive Shapes](https://m3.material.io/styles/shape/overview-principles) as inline SVGs whose `d` attribute is supplied by CSS. Because the path data is set with `d:` rather than baked into the SVG markup, swapping a shape's class triggers a smooth `transition: d` morph between the old and new outline.
+
+## Basic Usage
+
+### HTML
+A shape is an empty `<svg>` with the base class `micl-shapes` plus one of the shape modifier classes:
+
+```HTML
+<svg class="micl-shapes micl-shapes--diamond"><path /></svg>
+```
+
+### CSS
+
+The Shapes component is **opt-in** — it is not included in the master `micl.css` bundle, because most apps don't need 35 decorative shapes. Pick one of three integration paths:
+
+**1. Import only the shapes you actually use:**
+
+```SCSS
+@use "material-inspired-component-library/components/shapes" as shapes;
+
+@include shapes.base;
+@include shapes.use("circle", "heart", "pill");
+```
+
+`shapes.base` emits the shared `.micl-shapes`, `.micl-shapes--outlined`, and `.micl-shapes--shadowed` rules. `shapes.use(<names>...)` emits one `.micl-shapes--<name> > path { d: … }` rule per name.
+
+**2. Import the whole gallery via Sass:**
+
+```SCSS
+@use "material-inspired-component-library/components/shapes" with ($master: true);
+```
+
+Equivalent to calling `shapes.base` plus `shapes.use(…)` with every shape.
+
+**3. Drop in the prebuilt CSS:**
+
+```HTML
+<link rel="stylesheet" href="material-inspired-component-library/dist/shapes.css">
+```
+
+The prebuilt bundle contains all 35 shapes plus the base styles.
+
+### JavaScript
+No JavaScript is required. Morphing between shapes is a pure CSS animation: when you replace `micl-shapes--diamond` with `micl-shapes--pill` on the element, the browser interpolates the `d:` value automatically. The morph timing can be customised via two CSS custom properties on the element:
+
+| Custom property | Default | Description |
+| --------------- | ------- | ----------- |
+| `--micl-shapes-morph-duration` | `0ms` | Length of the morph transition |
+| `--micl-shapes-morph-easing` | `ease-in-out` | Easing curve of the transition |
+
+### Live Demo
+A live example of the [Shapes component](https://henkpb.github.io/micl/shapes.html) is available, with a button per shape that morphs the demo SVGs.
+
+## Variants
+The available shape names (use these as the `micl-shapes--<name>` class and as arguments to `shapes.use(...)`):
+
+```
+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
+```
+
+Optional modifier classes:
+
+| Class | Effect |
+| --- | --- |
+| `micl-shapes--outlined` | Renders the shape as a stroked outline instead of a filled fill |
+| `micl-shapes--shadowed` | Adds a soft drop-shadow filter |
+
+
+## Customizations
+The base styles size the SVG to 100 × 100 px, fill it with the application's primary color, and let it overflow its viewBox horizontally (so wide shapes like *pill* and *fan* are not clipped). Override these on the element or on a parent:
+
+```HTML
+<svg class="micl-shape micl-shape--diamond"
+    viewBox="0 0 100 100"
+    style="inline-size:64px;block-size:64px;fill:var(--md-sys-color-secondary)">
+  <path />
+</svg>
+```
+
+For `micl-shape--outlined`, the stroke colour and width are controlled by the standard SVG `stroke` and `stroke-width` properties:
+
+```HTML
+<svg class="micl-shape micl-shape--outlined micl-shape--pill"
+    viewBox="0 0 100 100"
+    style="stroke:var(--md-sys-color-outline);stroke-width:3">
+  <path />
+</svg>
+```

package/components/{shape → shapes}/_paths.generated.scss

@@ -19,12 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-//
-// GENERATED by tools/shapes/generate.mjs — do not edit by hand.
-// Regenerate with `npm run gen:shapes` after changing the generator
-// or any shape parameter. CI fails (`npm run check:shapes`) if this
-// file is out of date.
-//
 $paths: (
     circle:         'M 50 0 L 52.4533837164 0.0602271897 L 54.9008570165 0.2407636664 L 57.3365237228 0.5411745018 L 59.7545161008 0.9607359798 L 62.1490089952 1.4984373403 L 64.5142338627 2.1529832134 L 66.8444926696 2.9227967408 L 69.1341716183 3.8060233744 L 71.3777546715 4.8005353438 L 73.5698368413 5.9039367826 L 75.7051372097 7.1135695 L 77.778511651 8.4265193849 L 79.7849652246 9.839623426 L 81.7196642082 11.3494773319 L 83.5779477424 12.9524437323 L 85.3553390593 14.6446609407 L 87.0475562677 16.4220522576 L 88.6505226681 18.2803357918 L 90.160376574 20.2150347754 L 91.5734806151 22.221488349 L 92.8864305 24.2948627903 L 94.0960632174 26.4301631587 L 95.1994646562 28.6222453285 L 96.1939766256 30.8658283817 L 97.0772032592 33.1555073304 L 97.8470167866 35.4857661373 L 98.5015626597 37.8509910048 L 99.0392640202 40.2454838992 L 99.4588254982 42.6634762772 L 99.7592363336 45.0991429835 L 99.9397728103 47.5466162836 L 100 50 L 99.9397728103 52.4533837164 L 99.7592363336 54.9008570165 L 99.4588254982 57.3365237228 L 99.0392640202 59.7545161008 L 98.5015626597 62.1490089952 L 97.8470167866 64.5142338627 L 97.0772032592 66.8444926696 L 96.1939766256 69.1341716183 L 95.1994646562 71.3777546715 L 94.0960632174 73.5698368413 L 92.8864305 75.7051372097 L 91.5734806151 77.778511651 L 90.160376574 79.7849652246 L 88.6505226681 81.7196642082 L 87.0475562677 83.5779477424 L 85.3553390593 85.3553390593 L 83.5779477424 87.0475562677 L 81.7196642082 88.6505226681 L 79.7849652246 90.160376574 L 77.778511651 91.5734806151 L 75.7051372097 92.8864305 L 73.5698368413 94.0960632174 L 71.3777546715 95.1994646562 L 69.1341716183 96.1939766256 L 66.8444926696 97.0772032592 L 64.5142338627 97.8470167866 L 62.1490089952 98.5015626597 L 59.7545161008 99.0392640202 L 57.3365237228 99.4588254982 L 54.9008570165 99.7592363336 L 52.4533837164 99.9397728103 L 50 100 L 47.5466162836 99.9397728103 L 45.0991429835 99.7592363336 L 42.6634762772 99.4588254982 L 40.2454838992 99.0392640202 L 37.8509910048 98.5015626597 L 35.4857661373 97.8470167866 L 33.1555073304 97.0772032592 L 30.8658283817 96.1939766256 L 28.6222453285 95.1994646562 L 26.4301631587 94.0960632174 L 24.2948627903 92.8864305 L 22.221488349 91.5734806151 L 20.2150347754 90.160376574 L 18.2803357918 88.6505226681 L 16.4220522576 87.0475562677 L 14.6446609407 85.3553390593 L 12.9524437323 83.5779477424 L 11.3494773319 81.7196642082 L 9.839623426 79.7849652246 L 8.4265193849 77.778511651 L 7.1135695 75.7051372097 L 5.9039367826 73.5698368413 L 4.8005353438 71.3777546715 L 3.8060233744 69.1341716183 L 2.9227967408 66.8444926696 L 2.1529832134 64.5142338627 L 1.4984373403 62.1490089952 L 0.9607359798 59.7545161008 L 0.5411745018 57.3365237228 L 0.2407636664 54.9008570165 L 0.0602271897 52.4533837164 L 0 50 L 0.0602271897 47.5466162836 L 0.2407636664 45.0991429835 L 0.5411745018 42.6634762772 L 0.9607359798 40.2454838992 L 1.4984373403 37.8509910048 L 2.1529832134 35.4857661373 L 2.9227967408 33.1555073304 L 3.8060233744 30.8658283817 L 4.8005353438 28.6222453285 L 5.9039367826 26.4301631587 L 7.1135695 24.2948627903 L 8.4265193849 22.221488349 L 9.839623426 20.2150347754 L 11.3494773319 18.2803357918 L 12.9524437323 16.4220522576 L 14.6446609407 14.6446609407 L 16.4220522576 12.9524437323 L 18.2803357918 11.3494773319 L 20.2150347754 9.839623426 L 22.221488349 8.4265193849 L 24.2948627903 7.1135695 L 26.4301631587 5.9039367826 L 28.6222453285 4.8005353438 L 30.8658283817 3.8060233744 L 33.1555073304 2.9227967408 L 35.4857661373 2.1529832134 L 37.8509910048 1.4984373403 L 40.2454838992 0.9607359798 L 42.6634762772 0.5411745018 L 45.0991429835 0.2407636664 L 47.5466162836 0.0602271897 Z',
     square:         'M 49.0583508946 0 L 51.780972451 0 L 54.5035940073 0 L 57.2262155637 0 L 59.9488371201 0 L 62.6714586764 0 L 65.3940802328 0 L 68.1167017892 0 L 70.8392138549 0.0117402955 L 73.5535819094 0.2112092287 L 76.2387016876 0.6558591665 L 78.872472918 1.3420303525 L 81.4332179608 2.264075154 L 83.899860229 3.4144045466 L 86.2520976622 4.7835505755 L 88.4705698257 6.360244284 L 90.5370172595 8.1315084635 L 92.4344317655 10.0827644649 L 94.1471963956 12.19795219 L 95.6612139899 14.4596622764 L 96.9640232047 16.849279388 L 98.0449010781 19.3471354314 L 98.8949512865 21.9326714365 L 99.5071773671 24.5846067707 L 99.8765403035 27.2811142919 L 100 30 L 100 32.7226215564 L 100 35.4452431127 L 100 38.1678646691 L 100 40.8904862255 L 100 43.6131077819 L 100 46.3357293382 L 100 49.0583508946 L 100 51.780972451 L 100 54.5035940073 L 100 57.2262155637 L 100 59.9488371201 L 100 62.6714586764 L 100 65.3940802328 L 100 68.1167017892 L 99.9882597045 70.8392138549 L 99.7887907713 73.5535819094 L 99.3441408335 76.2387016876 L 98.6579696475 78.872472918 L 97.735924846 81.4332179608 L 96.5855954534 83.899860229 L 95.2164494245 86.2520976622 L 93.639755716 88.4705698257 L 91.8684915365 90.5370172595 L 89.9172355351 92.4344317655 L 87.80204781 94.1471963956 L 85.5403377236 95.6612139899 L 83.150720612 96.9640232047 L 80.6528645686 98.0449010781 L 78.0673285635 98.8949512865 L 75.4153932293 99.5071773671 L 72.7188857081 99.8765403035 L 70 100 L 67.2773784436 100 L 64.5547568873 100 L 61.8321353309 100 L 59.1095137745 100 L 56.3868922181 100 L 53.6642706618 100 L 50.9416491054 100 L 48.219027549 100 L 45.4964059927 100 L 42.7737844363 100 L 40.0511628799 100 L 37.3285413236 100 L 34.6059197672 100 L 31.8832982108 100 L 29.1607861451 99.9882597045 L 26.4464180906 99.7887907713 L 23.7612983124 99.3441408335 L 21.127527082 98.6579696475 L 18.5667820392 97.735924846 L 16.100139771 96.5855954534 L 13.7479023378 95.2164494245 L 11.5294301743 93.639755716 L 9.4629827405 91.8684915365 L 7.5655682345 89.9172355351 L 5.8528036044 87.80204781 L 4.3387860101 85.5403377236 L 3.0359767953 83.150720612 L 1.9550989219 80.6528645686 L 1.1050487135 78.0673285635 L 0.4928226329 75.4153932293 L 0.1234596965 72.7188857081 L 0 70 L 0 67.2773784436 L 0 64.5547568873 L 0 61.8321353309 L 0 59.1095137745 L 0 56.3868922181 L 0 53.6642706618 L 0 50.9416491054 L 0 48.219027549 L 0 45.4964059927 L 0 42.7737844363 L 0 40.0511628799 L 0 37.3285413236 L 0 34.6059197672 L 0 31.8832982108 L 0.0117402955 29.1607861451 L 0.2112092287 26.4464180906 L 0.6558591665 23.7612983124 L 1.3420303525 21.127527082 L 2.264075154 18.5667820392 L 3.4144045466 16.100139771 L 4.7835505755 13.7479023378 L 6.360244284 11.5294301743 L 8.1315084635 9.4629827405 L 10.0827644649 7.5655682345 L 12.19795219 5.8528036044 L 14.4596622764 4.3387860101 L 16.849279388 3.0359767953 L 19.3471354314 1.9550989219 L 21.9326714365 1.1050487135 L 24.5846067707 0.4928226329 L 27.2811142919 0.1234596965 L 30 0 L 32.7226215564 0 L 35.4452431127 0 L 38.1678646691 0 L 40.8904862255 0 L 43.6131077819 0 L 46.3357293382 0 Z',

package/components/{shape → shapes}/index.scss

@@ -24,28 +24,28 @@
 
 //
 // Set $master: true to install the base styles + every shape in one go. When false (default),
-// consumers opt in via `@include shape.base` and `@include shape.use(<names>...)`.
+// consumers opt in via `@include shapes.base` and `@include shapes.use(<names>...)`.
 //
 $master: false !default;
 
 @mixin base {
-    .micl-shape {
-        --md-sys-shape-aspect-ratio: 1;
+    .micl-shapes {
+        --md-sys-shapes-aspect-ratio: 1;
         inline-size: 100px;
         block-size: 100px;
-        fill: green;
+        fill: var(--md-sys-color-primary);
         overflow: visible; 
     }
-    .micl-shape > path {
-        transition: d var(--morph-duration, 0ms) var(--morph-easing, ease-in-out);
+    .micl-shapes > path {
+        transition: d var(--micl-shapes-morph-duration, 0ms) var(--micl-shapes-morph-easing, ease-in-out);
     }
-    .micl-shape--outlined {
+    .micl-shapes--outlined {
         fill: none;
-        stroke: green;
+        stroke: var(--md-sys-color-primary);
         stroke-width: 2;
         stroke-linejoin: round;
     }
-    .micl-shape--shadowed {
+    .micl-shapes--shadowed {
         filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.25));
     }
 }
@@ -56,7 +56,7 @@ $master: false !default;
         @if $d == null {
             @error "Unknown shape '#{$name}'. Available: #{map.keys(paths.$paths)}.";
         }
-        .micl-shape-#{$name} > path { d: path('#{$d}'); }
+        .micl-shapes--#{$name} > path { d: path('#{$d}'); }
     }
 }
 

package/components/{shape → shapes}/master.scss

@@ -20,9 +20,9 @@
 // SOFTWARE.
 
 //
-// Webpack entry for the standalone dist/shape.css bundle. Loads index.scss in master mode so the
-// bundle ships every shape. Consumers who want a subset should @use components/shape directly and
-// call shape.use(<names>...).
+// Webpack entry for the standalone dist/shapes.css bundle. Loads index.scss in master mode so the
+// bundle ships every shape. Consumers who want a subset should @use components/shapes directly and
+// call shapes.use(<names>...).
 //
 
 @use 'index' with ($master: true);

package/components/sidesheet/index.scss

@@ -23,15 +23,15 @@
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(0);
 @include elevation.level(1);
 
-@include shapes.corner('none');
-@include shapes.corner('large');
+@include shape.corner('none');
+@include shape.corner('large');
 
 @include statelayer.token('backdrop-opacity');
 

package/components/slider/index.scss

@@ -21,14 +21,14 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('small');
-@include shapes.corner('medium');
-@include shapes.corner('large');
-@include shapes.corner('extra-large');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('extra-large');
 
 @include statelayer.token('disabled-state-layer-opacity');
 @include statelayer.token('focus-indicator-thickness');

package/components/snackbar/index.scss

@@ -23,13 +23,13 @@
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(3);
 
-@include shapes.corner('extra-small');
+@include shape.corner('extra-small');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/switch/index.scss

@@ -21,11 +21,11 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('full');
+@include shape.corner('full');
 
 @include statelayer.token('layer-size');
 @include statelayer.token('hover-state-layer-opacity');

package/components/textfield/index.scss

@@ -21,11 +21,11 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('extra-small');
+@include shape.corner('extra-small');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('disabled-state-layer-opacity');

package/components/timepicker/index.scss

@@ -21,12 +21,12 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('small');
-@include shapes.corner('full');
+@include shape.corner('small');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');