@francofantomius/material-components 1.1.2 → 1.3.0

package/CHANGELOG.md

@@ -5,8 +5,67 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2026-09-13
+
+### Added
+- **Search Bar (`md-search-bar`, `md-search`) Enhancements**:
+  - Added `search-icon-position` property (`'leading'` | `'trailing'` | `'left'` | `'right'`), enabling placement of the search icon on the right/trailing edge of the search bar.
+  - Added support for leading navigation action buttons (e.g. hamburger drawer menu trigger via `leading-icon="menu"` or custom slotted elements via `slot="leading"` / `slot="leading-icon"`).
+  - Added `leading-icon-click` and `trailing-icon-click` custom events dispatched when respective action buttons are pressed.
+  - Added interactive ripples (`md-ripple`) and focus indicators (`md-focus-ring`) to leading, trailing, and clear icon buttons.
+  - Added smart slot change detection (`@slotchange`) to suppress divider lines and suggestions container when the search bar is active with no suggestions or slotted extra content.
+  - Improved collapsed mobile search bar trigger behavior, properly routing interactions between custom leading actions and trailing search triggers.
+- **Component Documentation & Live Examples (`docs/components/`)**:
+  - Added interactive demonstrations and copyable code snippets for right-aligned search icons and navigation menu triggers in `docs/components/search-bar.md`.
+  - Re-implemented interactive live previews and usage examples across all component documentation pages.
+- **AI Developer Documentation (`llms.txt`)**:
+  - Documented `search-icon-position`, `leading-icon-click`, and `trailing-icon-click` in the Search Bar API reference table.
+  - Added usage examples illustrating right-aligned search icons and hamburger menu triggers.
+- **Development Tooling**:
+  - Added `build:example` script in `package.json` for standalone IIFE bundling with `esbuild`.
+- **Testing**:
+  - Added unit test suites in `tests/search-bar.test.ts` covering right-aligned search icon configuration, hamburger menu leading button interactions, slotted leading elements, and empty active states.
+
+### Changed
+- **Dependencies & Build Infrastructure**:
+  - Upgraded development dependencies across `package.json` and `package-lock.json`.
+  - Tuned Vite build and Vitest testing configurations.
+  - Updated documentation deployment workflow (`.github/workflows/deploy-docs.yml`).
+
+---
+
+## [1.2.0] - 2026-09-09
+
+### Added
+- **Dynamic Palette Generator Utility (`generateTheme`, `generateColorScheme`)**:
+  - Automatically derives full Material Design 3 (M3) light and dark color palettes, CSS variable records, and complete stylesheets from any single seed color hex string (`#RGB` or `#RRGGBB`).
+  - Provides convenience `apply({ dark?: boolean, target?: HTMLElement })` helper to apply dynamic themes at runtime to the document or specific DOM subtrees.
+  - Exported from root `@francofantomius/material-components` and `@francofantomius/material-components/theme`.
+- **Form-Association (FACE) for Remaining Inputs (`md-slider`, `md-date-picker`, `md-time-picker`)**:
+  - **`md-slider`**: Full form participation for single and dual-thumb range sliders with `name-start` and `name-end` (`FormData` support), reactive updates on attribute changes, `min`/`max`/`required` constraint validation, and spec-compliant form reset restoring initial values.
+  - **`md-date-picker`**: Form participation for single dates and ranges, adding `name-start` and `name-end` properties (`FormData`), range constraint validation, and form reset restoring configured defaults.
+  - **`md-time-picker`**: Added native constraint validation (`required`, `min`, `max`, `error`, `error-text`), 24-hour time range validation, disabled state nullification, and form reset restoring initial values.
+  - **`MdFormAssociatedElement`**: Added standard lifecycle hooks `formAssociatedCallback` and `formStateRestoreCallback`.
+- **Security Policy (`SECURITY.md`)**:
+  - Added repository security policy documenting supported versions and private vulnerability reporting channels.
+- **AI Developer Documentation (`llms.txt`)**:
+  - Documented the dynamic palette generator API (`generateTheme`, `generateColorScheme`) with TypeScript code examples.
+  - Expanded Form Integration (FACE) guide and component reference tables for `md-slider`, `md-date-picker`, and `md-time-picker`.
+
+### Changed
+- **Documentation Modernization & Deployment**:
+  - Re-architected documentation to Markdown files (`docs/index.md`, `docs/components/`, `docs/guides/`, `docs/docs.config.json`).
+  - Streamlined GitHub Pages deployment workflow (`.github/workflows/deploy-docs.yml`) using `FrancoFantomius/docs-gen@v1`.
+  - Removed legacy bespoke static site generator scripts (`docs/generate.js`) and bundle configurations (`vite.docs.config.ts`).
+- **Build & Tooling Configuration**:
+  - Streamlined `package.json` build scripts and removed redundant devDependencies.
+  - Configured Dependabot with the `npm` package ecosystem in `.github/dependabot.yml`.
+
+---
+
 ## [1.1.2] - 2026-08-22
 
+
 ### Added
 - **Search Bar Sizing Variants (`md-search-bar`, `md-search`)**:
   - Added `size` property supporting `'small'`, `'compact'`, `'medium'`, and `'large'` variants (`size="small"` / `size="compact"` provides a 40px height ideal for navbars and compact headers).

package/README.md

@@ -2,6 +2,7 @@
 
 <p align="left">
   <a href="https://www.npmjs.com/package/@francofantomius/material-components"><img src="https://img.shields.io/npm/v/@francofantomius/material-components?color=6750A4&label=npm&logo=npm" alt="npm version" /></a>
+  <a href="https://github.com/FrancoFantomius/material-components/releases/tag/v1.3.0"><img src="https://img.shields.io/badge/version-1.3.0-6750A4" alt="version 1.3.0" /></a>
   <a href="https://lit.dev/"><img src="https://img.shields.io/badge/Lit-3.x-324FFF?logo=lit&logoColor=white" alt="Lit 3" /></a>
   <a href="https://vite.dev/"><img src="https://img.shields.io/badge/Vite-8.x-646CFF?logo=vite&logoColor=white" alt="Vite 8" /></a>
   <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white" alt="TypeScript" /></a>
@@ -96,7 +97,7 @@ For quick prototyping or usage directly in HTML without a bundler, import from a
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />
 
     <!-- Import from CDN (esm.sh / jsdelivr / unpkg) -->
-    <script type="module" src="https://esm.sh/@francofantomius/material-components"></script>
+    <script type="module" src="https://esm.sh/@francofantomius/material-components@1.3.0"></script>
   </head>
   <body>
     <md-button variant="filled" icon="send">Get Started</md-button>