@m3e/web 2.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 matraic
+Contact: matraic@yahoo.com
+
+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.

package/README.md

@@ -0,0 +1,85 @@
+# @m3e/web
+
+Material 3 (M3) introduces a new era of expressive design, focusing on personalization, dynamic color, and enhanced accessibility. The `@m3e/web` package provides a comprehensive suite of reusable components, each crafted to deliver seamless integration, consistent theming, and intuitive user experiences.
+
+## 🛡️ Disclaimer
+
+This project is not affiliated with or endorsed by Google. “Material Design” and “Material 3” are trademarks of Google LLC.
+
+## ✨ Features
+
+- **Expressive Components**: Leverage Material 3’s design tokens, dynamic color, shape and motion systems for highly customizable UI elements.
+- **Unified Architecture**: Modularized for easy maintenance, scalability, and rapid development.
+- **Accessibility First**: Built-in support for accessibility standards, ensuring inclusive experiences for all users.
+- **Theming & Personalization**: Effortlessly adapt components to your brand or user preferences with Material 3’s advanced theming capabilities.
+- **Performance Optimized**: Lightweight, fast-loading components designed for modern web platforms.
+- **Security Conscious**: Built with secure-by-default patterns, including XSS-safe templating, Trusted Types compatibility, and support for strong Content Security Policies (CSP) to enforce safe DOM interactions and mitigate injection risks.
+
+## 📦 Modules
+
+Below is a list of all modules in this monorepo, with a short summary and import instructions for each:
+
+| Package                                                                                                                   | Summary                                                                                                                                                               | Import                                  |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| [**@m3e/web/app-bar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/app-bar/README.md)                       | A prominent UI component providing access to key actions, navigation, and contextual info at the top of an app screen.                                                | `import "@m3e/web/app-bar";`            |
+| [**@m3e/web/autocomplete**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/autocomplete/README.md)             | Enhances a text input with a dynamically positioned menu of filterable suggestions, providing real-time filtering and keyboard navigation.                            | `import "@m3e/web/autocomplete";`       |
+| [**@m3e/web/avatar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/avatar/README.md)                         | An image, icon or textual initials representing a user or other identity.                                                                                             | `import "@m3e/web/avatar";`             |
+| [**@m3e/web/badge**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/badge/README.md)                           | A compact visual indicator for counts, presence, or emphasis, attachable to icons, buttons, or other components.                                                      | `import "@m3e/web/badge";`              |
+| [**@m3e/web/bottom-sheet**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/bottom-sheet/README.md)             | A sheet used to show secondary content anchored to the bottom of the screen.                                                                                          | `import "@m3e/web/bottom-sheet";`       |
+| [**@m3e/web/button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/button/README.md)                         | A semantic, expressive UI primitive for actions, supporting five variants and dynamic theming.                                                                        | `import "@m3e/web/button";`             |
+| [**@m3e/web/button-group**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/button-group/README.md)             | Organizes buttons and adds interactions between them.                                                                                                                 | `import "@m3e/web/button-group";`       |
+| [**@m3e/web/card**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/card/README.md)                             | A flexible, expressive container for presenting a unified subject—text, media, and actions—on a distinct surface.                                                     | `import "@m3e/web/card";`               |
+| [**@m3e/web/chips**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/chips/README.md)                           | Expressive, accessible chip components for actions, input, filtering, and suggestions.                                                                                | `import "@m3e/web/chips";`              |
+| [**@m3e/web/checkbox**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/checkbox/README.md)                     | An expressive, accessible control for binary selection—supporting checked, indeterminate, and disabled states.                                                        | `import "@m3e/web/checkbox";`           |
+| [**@m3e/web/core**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/core/README.md)                             | Essential primitives, utilities, and behavioral mixins for building Material 3 web components.                                                                        | `import "@m3e/web/core";`               |
+| [**@m3e/web/dialog**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/dialog/README.md)                         | Presents important prompts, alerts, and actions with ARIA accessibility, focus management, and theming.                                                               | `import "@m3e/web/dialog";`             |
+| [**@m3e/web/divider**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/divider/README.md)                       | Visually separates content within layouts, lists, or containers using a thin, unobtrusive line.                                                                       | `import "@m3e/web/divider";`            |
+| [**@m3e/web/drawer-container**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/drawer-container/README.md)     | Provides a responsive layout container for managing one or two sliding drawers alongside main content.                                                                | `import "@m3e/web/drawer-container";`   |
+| [**@m3e/web/expansion-panel**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/expansion-panel/README.md)       | Expressive, accessible components for organizing content in collapsible sections and coordinated groups.                                                              | `import "@m3e/web/expansion-panel";`    |
+| [**@m3e/web/fab**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/fab/README.md)                               | A prominent, expressive floating action button (FAB) representing the primary action on a screen.                                                                     | `import "@m3e/web/fab";`                |
+| [**@m3e/web/fab-menu**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/fab-menu/README.md)                     | Presents a dynamic menu of related actions, elegantly revealed from a floating action button (FAB).                                                                   | `import "@m3e/web/fab-menu";`           |
+| [**@m3e/web/form-field**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/form-field/README.md)                 | A container for form controls that applies Material Design styling and behavior.                                                                                      | `import "@m3e/web/form-field";`         |
+| [**@m3e/web/heading**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/heading/README.md)                       | Expressive, accessible headings for pages and sections, supporting display, headline, title, and label variants in multiple sizes.                                    | `import "@m3e/web/heading";`            |
+| [**@m3e/web/icon**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/icon/README.md)                             | Makes it easy to use Material Symbols, supporting outlined, rounded, and sharp variants with variable font features.                                                  | `import "@m3e/web/icon";`               |
+| [**@m3e/web/icon-button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/icon-button/README.md)               | A semantic, expressive UI primitive for triggering actions with a single icon, supporting four visual variants.                                                       | `import "@m3e/web/icon-button";`        |
+| [**@m3e/web/list**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/list/README.md)                             | Expressive, accessible components for organizing and displaying lists of items, with rich content and theming.                                                        | `import "@m3e/web/list";`               |
+| [**@m3e/web/loading-indicator**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/loading-indicator/README.md)   | Uses animation to indicate that an activity is in progress, with contained and uncontained variants.                                                                  | `import "@m3e/web/loading-indicator";`  |
+| [**@m3e/web/menu**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/menu/README.md)                             | Anchored, elevated surfaces that present a list of choices—supporting selection, hierarchy, and contextual interaction.                                               | `import "@m3e/web/menu";`               |
+| [**@m3e/web/nav-bar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/nav-bar/README.md)                       | Navigation bar and interactive items for switching between primary destinations, designed for smaller devices.                                                        | `import "@m3e/web/nav-bar";`            |
+| [**@m3e/web/nav-menu**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/nav-menu/README.md)                     | Hierarchical, accessible navigation menu for sidebars, drawers, and complex menu structures.                                                                          | `import "@m3e/web/nav-menu";`           |
+| [**@m3e/web/nav-rail**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/nav-rail/README.md)                     | Extends nav-bar to provide a vertical navigation rail for larger devices, supporting compact and expanded modes.                                                      | `import "@m3e/web/nav-rail";`           |
+| [**@m3e/web/option**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/option/README.md)                         | Provides selectable options and interactive menus for choosing values from a temporary surface.                                                                       | `import "@m3e/web/option";`             |
+| [**@m3e/web/paginator**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/paginator/README.md)                   | Provides navigation for paged information, typically used with a table.                                                                                               | `import "@m3e/web/paginator";`          |
+| [**@m3e/web/progress-indicator**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/progress-indicator/README.md) | Accessible, animated progress indicators for tracking task or process completion.                                                                                     | `import "@m3e/web/progress-indicator";` |
+| [**@m3e/web/radio-group**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/radio-group/README.md)               | A single-selection control for choosing one option from a set—supporting expressive styling, accessible transitions, and validation feedback.                         | `import "@m3e/web/radio-group";`        |
+| [**@m3e/web/segmented-button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/segmented-button/README.md)     | A multi-option control for grouped selection—supporting single or multiple active segments with expressive layout, ripple feedback, and accessible state transitions. | `import "@m3e/web/segmented-button";`   |
+| [**@m3e/web/select**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/select/README.md)                         | A form control for single and multiple selection that integrates with `m3e-option` and `m3e-form-field`.                                                              | `import "@m3e/web/select";`             |
+| [**@m3e/web/shape**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/shape/README.md)                           | Allows use of abstract shapes for emphasis and decorative flair, including built-in shape morphing.                                                                   | `import "@m3e/web/shape";`              |
+| [**@m3e/web/slide-group**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/slide-group/README.md)               | Presents pagination controls used to scroll overflowing content.                                                                                                      | `import "@m3e/web/slide-group";`        |
+| [**@m3e/web/slider**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/slider/README.md)                         | Allows for the selection of numeric values from a range.                                                                                                              | `import "@m3e/web/slider";`             |
+| [**@m3e/web/snackbar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/snackbar/README.md)                     | Provides a global service for presenting short updates about application processes at the bottom of the screen.                                                       | `import "@m3e/web/snackbar";`           |
+| [**@m3e/web/split-button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/split-button/README.md)             | A button used to show an action with a menu of related actions.                                                                                                       | `import "@m3e/web/split-button";`       |
+| [**@m3e/web/stepper**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/stepper/README.md)                       | Provides a wizard-like workflow by dividing content into logical steps.                                                                                               | `import "@m3e/web/stepper";`            |
+| [**@m3e/web/switch**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/switch/README.md)                         | An on/off control that can be toggled by clicking.                                                                                                                    | `import "@m3e/web/switch";`             |
+| [**@m3e/web/tabs**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/tabs/README.md)                             | Organizes content into separate views where only one view can be visible at a time.                                                                                   | `import "@m3e/web/tabs";`               |
+| [**@m3e/web/textarea-autosize**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/textarea-autosize/README.md)   | A non-visual element used to automatically resize a `textarea` to fit its content.                                                                                    | `import "@m3e/web/textarea-autosize";`  |
+| [**@m3e/web/theme**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/theme/README.md)                           | A non-visual element used to apply dynamic color, expressive motion, density, and focus indicators to nested elements.                                                | `import "@m3e/web/theme";`              |
+| [**@m3e/web/toc**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/toc/README.md)                               | Hierarchical, interactive table of contents for in-page navigation, with automatic heading detection.                                                                 | `import "@m3e/web/toc";`                |
+| [**@m3e/web/toolbar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/toolbar/README.md)                       | Presents contextual actions, navigation, and controls, supporting orientation, shape, and variant customization.                                                      | `import "@m3e/web/toolbar";`            |
+| [**@m3e/web/tooltip**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/tooltip/README.md)                       | Provides contextual information in response to user interaction, positioned relative to a target element.                                                             | `import "@m3e/web/tooltip";`            |
+
+## 📍 Roadmap
+
+For a detailed view of current development, planned components, and past milestones, see the [M3E Roadmap](https://github.com/matraic/m3e/tree/HEAD/ROADMAP.md).
+
+## 🤝 Contributing
+
+Contributions from the community are welcome! Please review the [Contributing Guidelines](https://github.com/matraic/m3e/tree/HEAD/CONTRIBUTING.md) and help us advance the future of expressive web design.
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+## 🧪 Testing
+
+This project is tested with BrowserStack