material-inspired-component-library 8.1.0 → 9.0.0

package/CLAUDE.md

@@ -1,53 +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 (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/CODE_OF_CONDUCT.md

@@ -1,128 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-micl.hermana@proton.me.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.

package/components/bottomsheet/index.ts

@@ -1,153 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const bottomsheetSelector = 'dialog.micl-bottomsheet';
-
-export default (() =>
-{
-    const getSnapHeights = (dialog: HTMLDialogElement): number[] =>
-    {
-        let fitHeight   = parseInt(dialog.dataset.miclfitheight || '0', 10),
-            maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-block-size'), 10),
-            snapHeights = (dialog.dataset.miclsnapheights || '').split(',').map(Number).filter(
-                n => !isNaN(n) && (n >= 0) && (n <= maxHeight)
-            );
-
-        if (fitHeight < 1) {
-            fitHeight = Math.min(dialog.getBoundingClientRect().height, maxHeight);
-            dialog.dataset.miclfitheight = `${fitHeight}`;
-        }
-        return [...new Set(snapHeights.concat([fitHeight]).sort())];
-    };
-
-    const getNextSnapHeight = (dialog: HTMLDialogElement, isResizing: boolean): number =>
-    {
-        let currentHeight = dialog.getBoundingClientRect().height,
-            snapHeights   = getSnapHeights(dialog),
-            largerSnaps   = snapHeights.filter(height => height > currentHeight + 4);
-
-        return largerSnaps[0] || snapHeights[isResizing ? snapHeights.length - 1 : 0];
-    };
-
-    const getPreviousSnapHeight = (dialog: HTMLDialogElement): number =>
-    {
-        let currentHeight = dialog.getBoundingClientRect().height,
-            snapHeights   = getSnapHeights(dialog),
-            smallerSnaps  = snapHeights.filter(height => height < currentHeight - 4);
-
-        return smallerSnaps[smallerSnaps.length - 1] || snapHeights[0];
-    };
-
-    const setHeight = (dialog: HTMLDialogElement, value: number): void =>
-    {
-        if (value < 1) {
-            delete dialog.dataset.miclfitheight;
-            dialog.style.removeProperty('--md-sys-bottomsheet-height');
-            dialog[!dialog.popover ? 'close' : 'hidePopover']();
-        }
-        else {
-            dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
-        }
-    }
-
-    return {
-        initialize: (element: HTMLDialogElement) =>
-        {
-            if (
-                !element.matches(bottomsheetSelector)
-                || element.dataset.miclinitialized
-            ) {
-                return;
-            }
-            element.dataset.miclinitialized = '1';
-
-            const headline = element.querySelector('.micl-bottomsheet__headline') as HTMLElement;
-            if (!headline) {
-                return;
-            }
-            const draghandle = headline.querySelector('.micl-bottomsheet__draghandle') as HTMLElement;
-
-            draghandle?.addEventListener('click', () =>
-            {
-                setHeight(element, getNextSnapHeight(element, false));
-            });
-
-            let isPreparing = false,
-                isResizing  = false,
-                initialMouseY: number,
-                initialHeight: number;
-
-            headline.addEventListener('mousedown', (event: Event) =>
-            {
-                if (event.eventPhase === Event.AT_TARGET) {
-                    isPreparing = true;
-                    event.preventDefault();
-                    initialMouseY = (event as MouseEvent).clientY;
-                    initialHeight = element.getBoundingClientRect().height;
-                    document.addEventListener('mousemove', onMouseMove);
-                    document.addEventListener('mouseup', onMouseUp);
-                }
-            });
-
-            function onMouseMove(event: Event)
-            {
-                const currentMouseY = (event as MouseEvent).clientY;
-                if (isPreparing && (Math.abs(initialMouseY - currentMouseY) > 4)) {
-                    isPreparing = false;
-                    isResizing  = true;
-                    element.classList.add('micl-bottomsheet--resizing');
-                }
-                if (isResizing) {
-                    setHeight(element, initialHeight + initialMouseY - currentMouseY);
-                }
-            }
-            function onMouseUp(event: Event)
-            {
-                isPreparing = false;
-                element.classList.remove('micl-bottomsheet--resizing');
-                if (isResizing) {
-                    isResizing = false;
-
-                    const currentMouseY = (event as MouseEvent).clientY;
-                    if (currentMouseY < initialMouseY) {
-                        setHeight(element, getNextSnapHeight(element, true));
-                    }
-                    else if (element.getBoundingClientRect().height < 48) {
-                        setHeight(element, 0);
-                    }
-                    else {
-                        setHeight(element, getPreviousSnapHeight(element));
-                    }
-                    document.removeEventListener('mousemove', onMouseMove);
-                    document.removeEventListener('mouseup', onMouseUp);
-                }
-            }
-        },
-        cleanup: (element: HTMLDialogElement) =>
-        {
-            if (element.matches(bottomsheetSelector)) {
-                element.classList.remove('micl-bottomsheet--resizing');
-                delete element.dataset.miclinitialized;
-                delete element.dataset.miclfitheight;
-            }
-        }
-    };
-})();

package/components/button/index.ts

@@ -1,79 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const buttonSelector = 'button.micl-button--toggle';
-
-const toggleIcon = (button: HTMLButtonElement): void =>
-{
-    const element = button.querySelector<HTMLElement>('.micl-button__icon') ?? button;
-
-    const selected = button.classList.contains('micl-button--selected');
-    if (element.dataset.micliconselected) {
-        element.classList.toggle(element.dataset.micliconselected, selected);
-    }
-    if (element.dataset.miclicon) {
-        element.classList.toggle(element.dataset.miclicon, !selected);
-    }
-};
-
-export default (() =>
-{
-    return {
-        command: (event: Event): void =>
-        {
-            const target = event.target as HTMLButtonElement;
-
-            if (
-                target.matches(buttonSelector)
-                && !target.disabled
-                && (event as any).command === '--micl-toggle'
-            ) {
-                target.classList.add('micl-button--toggled');
-                target.classList.toggle('micl-button--selected');
-
-                toggleIcon(target);
-            }
-        },
-
-        initialize: function(element: HTMLButtonElement): void
-        {
-            if (
-                !element.matches(buttonSelector)
-                || element.dataset.miclinitialized
-            ) {
-                return;
-            }
-            element.dataset.miclinitialized = '1';
-
-            toggleIcon(element);
-
-            element.addEventListener('command', this.command);
-        },
-
-        cleanup: function(element: HTMLButtonElement): void
-        {
-            if (element.matches(buttonSelector)) {
-                document.removeEventListener('command', this.command);
-                delete element.dataset.miclinitialized;
-            }
-        }
-    };
-})();

package/components/checkbox/index.ts

@@ -1,148 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const checkboxGroupSelector = '.micl-checkbox-group';
-
-export default (() =>
-{
-    const getParentCheckbox = (checkboxGroup: HTMLElement): HTMLInputElement | null =>
-    {
-        const parentCheckbox = checkboxGroup.querySelector<HTMLInputElement>('.micl-checkbox__parent');
-        return (parentCheckbox?.closest(checkboxGroupSelector) === checkboxGroup) ? parentCheckbox : null;
-    };
-
-    const refreshParentCheckbox = (checkboxGroup: HTMLElement): boolean =>
-    {
-        const parentCheckbox = getParentCheckbox(checkboxGroup);
-        if (!parentCheckbox) {
-            return false;
-        }
-        let nrCheckboxes = 0,
-            nrCheckedCheckboxes = 0;
-
-        checkboxGroup.querySelectorAll<HTMLInputElement>(
-            'input[type="checkbox"].micl-checkbox'
-        ).forEach(cb =>
-        {
-            if (cb !== parentCheckbox) {
-                const group = cb.closest(checkboxGroupSelector) as HTMLElement;
-                if (group === checkboxGroup) {
-                    nrCheckboxes++;
-                    if (cb.checked && !cb.indeterminate) {
-                        nrCheckedCheckboxes++;
-                    }
-                }
-                else if (
-                    cb.classList.contains('micl-checkbox__parent')
-                    && (group?.parentElement?.closest(checkboxGroupSelector) === checkboxGroup)
-                ) {
-                    nrCheckboxes++;
-                    if (refreshParentCheckbox(group)) {
-                        nrCheckedCheckboxes++;
-                    }
-                }
-            }
-        });
-
-        if (nrCheckedCheckboxes === 0) {
-            parentCheckbox.checked = false;
-            parentCheckbox.indeterminate = false;
-        }
-        else if (nrCheckedCheckboxes === nrCheckboxes) {
-            parentCheckbox.checked = true;
-            parentCheckbox.indeterminate = false;
-        }
-        else {
-            parentCheckbox.checked = true;
-            parentCheckbox.indeterminate = true;
-        }
-
-        return nrCheckedCheckboxes === nrCheckboxes;
-    };
-
-    const updateCheckboxGroup = (checkboxGroup: HTMLElement, checked: boolean): void =>
-    {
-        checkboxGroup.querySelectorAll<HTMLInputElement>(
-            'input[type="checkbox"].micl-checkbox'
-        ).forEach(cb =>
-        {
-            const group = cb.closest(checkboxGroupSelector) as HTMLElement;
-            if (group === checkboxGroup) {
-                cb.checked = checked;
-            }
-            else if (
-                cb.classList.contains('micl-checkbox__parent')
-                && (group?.parentElement?.closest(checkboxGroupSelector) === checkboxGroup)
-            ) {
-                cb.checked = checked;
-                updateCheckboxGroup(group, checked);
-            }
-        });
-    };
-
-    const refreshCheckboxGroup = (checkboxGroup: HTMLElement, input: HTMLInputElement | null): void =>
-    {
-        const parentCheckbox = getParentCheckbox(checkboxGroup);
-        if (!parentCheckbox) {
-            return;
-        }
-
-        if (input === parentCheckbox) {
-            updateCheckboxGroup(checkboxGroup, input.checked);
-        }
-
-        let parentCheckboxGroup,
-            cbg = checkboxGroup;
-        do {
-            parentCheckboxGroup = cbg;
-            cbg = cbg.parentElement?.closest(checkboxGroupSelector) as HTMLElement;
-        }
-        while (cbg);
-
-        refreshParentCheckbox(parentCheckboxGroup);
-    };
-
-    return {
-        initialize: (element: HTMLElement): void =>
-        {
-            if (
-                !element.matches(checkboxGroupSelector)
-                || element.dataset.miclinitialized
-            ) {
-                return;
-            }
-            element.dataset.miclinitialized = '1';
-
-            element.addEventListener('change', event =>
-            {
-                const input = event.target as HTMLInputElement;
-                if (!input.classList.contains('micl-checkbox')) {
-                    return;
-                }
-                event.stopPropagation();
-
-                refreshCheckboxGroup(element, input);
-            });
-
-            refreshCheckboxGroup(element, null);
-        }
-    };
-})();