material-inspired-component-library 7.0.2 → 8.0.1

package/.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node *)",
+      "WebSearch",
+      "Bash(npm run *)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:android.googlesource.com)",
+      "WebFetch(domain:m3.material.io)",
+      "WebFetch(domain:github.com)",
+      "Bash(xargs grep -l \"body\\\\|html\")"
+    ]
+  }
+}

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

@@ -124,6 +124,12 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 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.
+- **Ripple**: Now starts on pointer-down.
+- **Text field**: Outlined version uses CSS variable instead of inherited background.
+
 ### 7.0.0 (08.03.2026)
 - **BREAKING**: Use `<a>` instead of `<label>` inside Navigation rail.
 - **BREAKING**: Use `inert` for disabled cards instead of `micl-card--disabled`.

package/components/accordion/README.md

@@ -68,9 +68,9 @@ To ensure that only one accordion item within a group can be open at a time, add
       </div>
     </div>
   </details>
-  <hr class="micl-divider">
+  <hr class="micl-divider-inset">
   <details name="mygroup">
-    <summary class="micl-list-item-two" tabindex="-1">
+    <summary class="micl-list-item-two">
       <span class="micl-list-item__text">
         <span class="micl-list-item__headline">Country</span>
         <span class="micl-list-item__supporting-text">The country of residence.</span>
@@ -110,6 +110,9 @@ Use a [Divider component](../divider/README.md) to separate neighbouring accordi
 
 Since the Accordion is based on the List component, you can use the same utility classes for content structure and styling. Refer to the [List component documentation](../list/README.md) for details on how to add icons, avatars, images, and other features to your accordion items.
 
+## Keyboard
+Each `<summary>` is a tab stop in document order — `Tab` and `Shift+Tab` move focus through the accordion headers. While focus is on a header, `Enter` or `Space` toggles the panel open or closed. As an optional enhancement, `ArrowDown` and `ArrowUp` move focus to the next or previous header in the same group; focus wraps around at the ends.
+
 ## Customizations
 You can customize the appearance of the Accordion component by overriding its own global CSS variables and those from the List component. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child accordions.
 
@@ -131,4 +134,4 @@ You can customize the appearance of the Accordion component by overriding its ow
 ```
 
 ## Compatibility
-The Card component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.
+The Accordion component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.

package/components/alert/index.scss

@@ -23,6 +23,11 @@
 @use '../../styles/shapes';
 @use '../../styles/typography';
 
+@include shapes.corner('small');
+
+@include typography.scale('title-medium');
+@include typography.scale('body-medium');
+
 :root {
     --md-sys-alert-padding: 16px;
     --md-sys-alert-space: 16px;

package/components/appbar/index.scss

@@ -26,6 +26,18 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+
+@include shapes.corner('none');
+
+@include typography.scale('display-small');
+@include typography.scale('headline-medium');
+@include typography.scale('title-large');
+@include typography.scale('title-medium');
+@include typography.scale('title-small');
+@include typography.scale('label-medium');
+
 @mixin appbar-sticky() {
     position: sticky;
     inset: unset;

package/components/badge/index.scss

@@ -22,6 +22,8 @@
 @use '../../foundations';
 @use '../../styles/typography';
 
+@include typography.scale('label-small');
+
 :root {
     --md-sys-badge-small-size: 6px;
     --md-sys-badge-large-size: 16px;

package/components/bottomsheet/index.scss

@@ -25,6 +25,15 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include elevation.level(1);
+
+@include shapes.corner('extra-large');
+@include shapes.corner('small');
+
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-outer-offset');
+@include statelayer.token('backdrop-opacity');
+
 dialog.micl-bottomsheet {
     --md-sys-bottomsheet-height: max-content;
     --md-sys-bottomsheet-margin: 56px;

package/components/button/index.scss

@@ -26,6 +26,29 @@
 @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 statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('headline-large');
+@include typography.scale('headline-small');
+@include typography.scale('title-medium');
+@include typography.scale('label-large');
+
 button.micl-button-text-xs,
 a.micl-button-text-xs,
 button.micl-button-text-s,
@@ -69,15 +92,20 @@ button.micl-button-outlined-xl {
     border: none;
     border-radius: calc(var(--micl-height) / 2);
     background-image:
-        radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+        radial-gradient(
+            circle at var(--micl-x, center) var(--micl-y, center),
+            transparent 0%,
+            rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+            transparent 10%
+        ),
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
-    background-size: 10000%, 100%;
+    background-size: 0%, 100%;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition:
         border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects),
-        background-size 3000ms,
+        background-size 0ms,
         --statelayer-opacity var(--md-sys-button-motion-duration) linear;
 
     &:disabled {
@@ -91,9 +119,8 @@ button.micl-button-outlined-xl {
             outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             outline-offset: 3px;
         }
-        &:active {
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
+        &.micl-rippling {
+            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
         }
     }
     .micl-button__icon {

package/components/card/README.md

@@ -126,6 +126,7 @@ The Card component supports the following CSS variables, as defined in the [Mate
 --md-comp-elevated-card-container-shape
 --md-comp-elevated-card-disabled-container-elevation
 --md-comp-elevated-card-disabled-container-color
+--md-comp-elevated-card-disabled-container-opacity
 --md-comp-elevated-card-hover-container-elevation
 --md-comp-elevated-card-hover-state-layer-color
 --md-comp-elevated-card-hover-state-layer-opacity
@@ -146,6 +147,7 @@ The Card component supports the following CSS variables, as defined in the [Mate
 --md-comp-filled-card-container-shape
 --md-comp-filled-card-disabled-container-elevation
 --md-comp-filled-card-disabled-container-color
+--md-comp-filled-card-disabled-container-opacity
 --md-comp-filled-card-hover-container-elevation
 --md-comp-filled-card-hover-state-layer-color
 --md-comp-filled-card-hover-state-layer-opacity
@@ -166,7 +168,9 @@ The Card component supports the following CSS variables, as defined in the [Mate
 --md-comp-outlined-card-container-shape
 --md-comp-outlined-card-outline-width
 --md-comp-outlined-card-outline-color
+--md-comp-outlined-card-disabled-container-color
 --md-comp-outlined-card-disabled-container-elevation
+--md-comp-outlined-card-disabled-container-opacity
 --md-comp-outlined-card-disabled-outline-color
 --md-comp-outlined-card-disabled-outline-opacity
 --md-comp-outlined-card-hover-container-elevation