material-inspired-component-library 8.0.0 → 8.0.4

package/webpack.config.js

@@ -7,15 +7,29 @@ const docsDir = path.resolve(__dirname, 'docs');
 
 const scssFiles = glob.sync('{./foundations/**/*.scss,./components/**/*.scss}');
 const scssEntries = scssFiles.reduce((entries, filePath) => {
+    // The shape gallery has two SCSS files: index.scss (the partial that
+    // consumers @use to opt into individual shapes) and master.scss (the
+    // 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;
     const componentName = path.dirname(filePath).split('\\').pop();
     entries[componentName] = './' + filePath;
     return entries;
 }, {});
 
+const tsEntries = glob.sync('./foundations/**/*.ts').reduce((entries, filePath) => {
+    const normalized = filePath.replace(/\\/g, '/').replace(/^\.\//, '');
+    if (normalized.endsWith('.d.ts')) return entries;
+    entries[normalized.replace(/\.ts$/, '')] = './' + normalized;
+    return entries;
+}, {});
+
 module.exports = [{
     mode: 'production',
     entry: {
         ...scssEntries,
+        ...tsEntries,
         micl: ['./styles.scss', './micl.ts']
     },
     resolve: {
@@ -53,7 +67,8 @@ module.exports = [{
 }, {
     mode: 'production',
     entry: {
-        micl: ['./styles.scss', './micl.ts']
+        micl: ['./styles.scss', './micl.ts'],
+        shape: './components/shape/master.scss'
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js']

package/CLAUDE.md

@@ -1,42 +0,0 @@
-# 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 UI component library written in TypeScript and Sass. It compiles to a UMD bundle (`dist/micl.js`) and a CSS file (`dist/micl.css`) with zero runtime dependencies.
-
-## 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-sys-*` 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).
-
-### 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.