material-inspired-component-library 8.0.4 → 8.1.1

package/.claude/settings.local.json

@@ -8,7 +8,10 @@
       "WebFetch(domain:android.googlesource.com)",
       "WebFetch(domain:m3.material.io)",
       "WebFetch(domain:github.com)",
-      "Bash(xargs grep -l \"body\\\\|html\")"
+      "Bash(xargs grep -l \"body\\\\|html\")",
+      "WebFetch(domain:androidx.tech)",
+      "WebFetch(domain:cs.android.com)",
+      "WebFetch(domain:api.github.com)"
     ]
   }
 }

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/README.md

@@ -23,7 +23,7 @@ Or import all MICL styles:
 ```
 
 ### JavaScript
-This component requires JavaScript for interactive features like the **toggle logic**:
+This component requires JavaScript to support the **toggle logic**:
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
@@ -40,7 +40,7 @@ Buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), l
 **Example: An extra-large text button**
 
 ```HTML
-<button type="button" class="micl-button-text-xl>Save</button>
+<button type="button" class="micl-button-text-xl">Save</button>
 ```
 
 Material Design provides **five distinct styles**: `text`, `elevated`, `filled`, `tonal` and `outlined`. To use a style other than the `text` style used above, apply the corresponding class to the button:
@@ -56,9 +56,9 @@ By default, buttons have a **rounded shape**. For a more square-like appearance,
 Adding the `disabled` boolean attribute to the button causes the button to be displayed in a disabled state.
 
 ### Toggle Button
-A toggle button has two states: **on** (selected) and **off** (unselected). To create one, add the `micl-button--toggle` class.
-- **Off state**: The button has the `micl-button--toggle` class.
-- **On state**: The button has both the `micl-button--toggle` and `micl-button--selected` classes.
+A toggle button has two states: **on** (pressed) and **off** (unpressed). To create one, add the `micl-button--toggle` class and an `aria-pressed` attribute.
+- **Off state**: The button has the `micl-button--toggle` class and `aria-pressed="false"`.
+- **On state**: The button has the `micl-button--toggle` class and `aria-pressed="true"`.
 
 **Example: A selected toggle button**
 
@@ -66,13 +66,14 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 <button
   type="button"
   id="id0"
-  class="micl-button-tonal-s micl-button--toggle micl-button--selected"
+  class="micl-button-tonal-s micl-button--toggle"
+  aria-pressed="true"
   commandfor="id0"
   command="--micl-toggle"
 >Selected</button>
 ```
 
-The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
+The self-targeting `command` property (`--micl-toggle`) flips `aria-pressed` whenever the user interacts with the button.
 
 ## Icons
 To add a leading icon to a button, include an element with the `micl-button__icon` class inside the `<button>`:
@@ -84,14 +85,14 @@ To add a leading icon to a button, include an element with the `micl-button__ico
 </button>
 ```
 
-To use different icons for the **on** state and the **off** state in a toggle button, remove the icon name from the `micl-button__icon` element and add the `data-miclicon` (the name of the **on** icon) and `data-micliconselected` (the name of the **off** icon) attributes:
+To use different icons for the **on** state and the **off** state in a toggle button, remove the icon name from the `micl-button__icon` element and add the `data-miclicon` (the name of the **off** icon) and `data-micliconselected` (the name of the **on** icon) attributes:
 
 ```HTML
   ...
   <span
     class="micl-button__icon material-symbols-outlined"
-    data-miclicon="icon_for_on"
-    data-micliconselected="icon_for_off"
+    data-miclicon="icon_for_off"
+    data-micliconselected="icon_for_on"
     aria-hidden="true"
   ><span>
   ...
@@ -114,5 +115,62 @@ You can also use other icon libraries. For example, with the [Bootstrap Icons li
 </button>
 ```
 
+## Theming
+Each button style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Note that the `selected-*` and `unselected-*` properties only apply to [toggle buttons](#toggle-button).
+
+### Text
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-text-button-label-text-color` | Label & icon colour | `--md-sys-color-primary` |
+| `--md-comp-text-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-text-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Elevated
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-elevated-button-container-color` | Container background | `--md-sys-color-surface-container-low` |
+| `--md-comp-elevated-button-container-elevation` | Container elevation (shadow) | `--md-sys-elevation-level1` |
+| `--md-comp-elevated-button-label-text-color` | Label & icon colour | `--md-sys-color-primary` |
+| `--md-comp-elevated-button-selected-container-color` | Container background when selected | `--md-sys-color-primary` |
+| `--md-comp-elevated-button-selected-label-text-color` | Label & icon colour when selected | `--md-sys-color-on-primary` |
+| `--md-comp-elevated-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-elevated-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Filled
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-button-container-color` | Container background (also the selected state) | `--md-sys-color-primary` |
+| `--md-comp-filled-button-label-text-color` | Label & icon colour (also the selected state) | `--md-sys-color-on-primary` |
+| `--md-comp-filled-button-unselected-container-color` | Container background when an unselected toggle | `--md-sys-color-surface-container` |
+| `--md-comp-filled-button-unselected-label-text-color` | Label & icon colour when an unselected toggle | `--md-sys-color-on-surface-variant` |
+| `--md-comp-filled-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-filled-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Tonal
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-tonal-button-container-color` | Container background | `--md-sys-color-secondary-container` |
+| `--md-comp-filled-tonal-button-label-text-color` | Label & icon colour | `--md-sys-color-on-secondary-container` |
+| `--md-comp-filled-tonal-button-selected-container-color` | Container background when selected | `--md-sys-color-secondary` |
+| `--md-comp-filled-tonal-button-selected-label-text-color` | Label & icon colour when selected | `--md-sys-color-on-secondary` |
+| `--md-comp-filled-tonal-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-tonal-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-filled-tonal-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-tonal-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Outlined
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-outlined-button-outline-color` | Outline (border) colour | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-button-label-text-color` | Label & icon colour | `--md-sys-color-on-surface-variant` |
+| `--md-comp-outlined-button-selected-container-color` | Container background when selected | `--md-sys-color-inverse-surface` |
+| `--md-comp-outlined-button-selected-label-text-color` | Label & icon colour when selected | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-outlined-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
 ## Compatibility
 This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.