@raintonic/formaui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,7 +1,104 @@
-# Changelog
-
-All notable changes to FormaUI will be documented in this file.
-
-## [0.1.0] - Unreleased
-
-- Initial standalone release
+# Changelog
+
+All notable changes to FormaUI are 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).
+
+## [Unreleased]
+
+### Changed
+
+- **BREAKING** `FuiButtonDirective` variant set reduced to the Figma spec: `primary | secondary | tertiary | tertiary-violet | link | destructive`.
+  - `variant="ghost"` → use `variant="tertiary"`.
+  - `variant="outline"` → use `variant="secondary"`.
+  - `variant="danger"` → use `variant="destructive"`.
+  - `variant="icon"` → use `iconOnly` combined with a variant (typically `tertiary`).
+- **BREAKING** Button `loading` behavior: text is now visible during loading; the spinner occupies a leading slot; user-supplied icons (leading and trailing) are hidden during loading. Previously the entire label was hidden via `color: transparent`.
+
+### Added
+
+- Semantic alias tokens: `--fui-destructive-default`, `--fui-destructive-hover`, `--fui-destructive-text`, `--fui-tertiary-text`, `--fui-tertiary-hover-bg`, `--fui-tertiary-violet-text`, `--fui-tertiary-violet-hover-bg`.
+
+### Fixed
+
+- Destructive variant now uses a saturated red (`--fui-danger-90` = `#e5484d`) instead of the pastel `--fui-danger-60` (`#fdbdbe`) that was incorrectly wired as the button's `danger` background.
+
+## [1.0.0] - YYYY-MM-DD (placeholder — release script will set the date)
+
+First stable release. API is now locked under SemVer from this version forward.
+
+### Breaking
+- Removed experimental `dynamic-form` component and its entry point (`@raintonic/formaui/components/dynamic-form`). No direct migration path — consumers should use reactive forms directly.
+
+### Added
+- Pre-publication component audit (see `.claude/docs/reviews/`)
+- Bundle size budget enforced via `size-limit`
+- Coverage threshold enforced at 60% in CI
+- Explicit `.browserslistrc` for library
+- GitHub Pages deploy for docs at https://formaui.raintonic.com
+- PR validation CI workflow
+- Theming guide page in docs app
+- `.meta.md` metadata for flagship components
+- LICENSE, SECURITY.md, CONTRIBUTING.md
+- Tests for 8 previously uncovered components: breadcrumb, empty-state, list, radio, skeleton, spinner, tag, toggle
+- Auto-sync of `FORMAUI_VERSION` from `package.json` at build time
+- Syntax highlighting in docs code blocks (Prism.js)
+- Custom color support for badges via hex strings or explicit color pairs
+- Type declaration for `AdvancedDataTableHeader.type`
+
+### Fixed
+- README package name in install and import examples (was `formaui/*`, now `@raintonic/formaui/*`)
+- Cross-entry-point import in tree-table (ng-packagr rootDir violation)
+- Topbar layout on mobile viewport (< 768px)
+- Nav panel position on mobile
+- API viewer type-column overflow for long union types
+- Select component keyboard navigation (added PageUp/PageDown)
+- JSDoc examples with stale `rtButton` references
+- Card header spacing handling
+- Checkbox label position when set to `before`
+- Toggle label position when set to `before`
+
+## [0.2.1] - 2026-03-31
+
+### Fixed
+- Dialog padding on overlay and CSS compile pipeline
+- README npm badge link
+
+## [0.2.0] - 2026-03-31
+
+### Added
+- Initial public npm publication as `@raintonic/formaui`
+- Comprehensive README for npm
+- `llms.txt` generator for AI-readable component metadata
+- ESLint strict + Prettier configuration
+- Upgrade to Jest 30 + Angular 21.2.6
+- Publish script with safety checks
+- Playground code generation from knob values
+- Copy-to-clipboard on code blocks
+- Collapsible code panel in playground viewer
+
+### Fixed
+- Number input behavior
+- Module name mapper for publication
+- Package name for publication
+- Test suite alignment with new code
+- Icon config exports aligned with Fui naming
+
+### Changed
+- Standardized all class names to `Fui` prefix (internal rename — no external API was called `Rt*`)
+- Replaced direct `document` access with `DOCUMENT` injection token (SSR groundwork)
+- Overlay subscription cleanup (memory leak fix)
+- Replaced global `@HostListener('document:click')` with conditional subscriptions (performance)
+- Icon CDN made configurable with SRI support via InjectionToken
+- Data table now has generic type parameter and trackBy support
+- Extracted shared form control utilities (11 components simplified)
+- Size tokens normalized (`sm|md|lg`), `readonly` casing normalized, ARIA attributes enriched, live announcements added
+
+### Removed
+- Legacy `holiday`/`RainTonic` references in JSDoc
+- `data-rt*` HTML attributes (renamed to `data-fui*`)
+
+## [0.1.0] - Pre-release (internal)
+
+Initial standalone release.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rain Tonic S.r.l.
+
+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

@@ -1,145 +1,199 @@
-# FormaUI
-
-A modern, standalone Angular UI component library with built-in theming, CDK primitives, and tree-shakable imports.
-
-[![npm version](https://img.shields.io/npm/v/formaui.svg)](https://www.npmjs.com/package/formaui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-[![Angular](https://img.shields.io/badge/Angular-21+-dd0031.svg)](https://angular.dev)
-
-## Features
-
-- **45 standalone components** — no NgModules, just import and use
-- **Tree-shakable** — secondary entry points via ng-packagr, import only what you need
-- **Theming system** — CSS custom properties with light/dark themes out of the box
-- **CDK layer** — overlay/portal system, drag-drop, virtual-scroll, form-field primitives
-- **Signals-first** — reactive state management with Angular signals
-- **Accessible** — built-in a11y support with testing utilities (axe-core)
-- **Form integration** — components implement `RtFormFieldControl` for seamless `fui-form-field` integration
-
-## Installation
-
-```bash
-npm install formaui
-```
-
-### Peer Dependencies
-
-```json
-{
-  "@angular/common": "^21.0.0",
-  "@angular/core": "^21.0.0",
-  "@angular/forms": "^21.0.0"
-}
-```
-
-## Setup
-
-Import the base styles in your `styles.scss`:
-
-```scss
-@use '@raintonic/formaui/styles' as fui;
-```
-
-## Usage
-
-All imports use secondary entry points:
-
-```typescript
-import { ButtonDirective } from '@raintonic/formaui/components/button';
-import { RtFormFieldComponent } from '@raintonic/formaui/components/form-field';
-import { InputDirective } from '@raintonic/formaui/components/input';
-import { ThemeService } from '@raintonic/formaui/services/theme';
-```
-
-### Button
-
-```html
-<button fui-button variant="primary">Save</button>
-<button fui-button variant="outlined">Cancel</button>
-```
-
-### Form Field
-
-```html
-<fui-form-field>
-  <fui-label>Email</fui-label>
-  <input fuiInput type="email" />
-</fui-form-field>
-```
-
-### Theme Switching
-
-```typescript
-import { ThemeService } from '@raintonic/formaui/services/theme';
-
-export class AppComponent {
-  private theme = inject(ThemeService);
-
-  toggleDark() {
-    this.theme.toggleTheme();
-  }
-}
-```
-
-## Components
-
-All components use the `fui` prefix and are standalone.
-
-| Category | Components |
-|---|---|
-| **Forms** | `autocomplete` `checkbox` `date-picker` `dynamic-form` `file-upload` `form-field` `input` `number-input` `password-input` `radio` `select` `slider` `time-picker` `toggle` `tree-select` |
-| **Data** | `data-table` `list` `paginator` `tree` `tree-table` |
-| **Layout** | `accordion` `card` `divider` `sidebar` `side-panel` `tab` `toolbar` |
-| **Navigation** | `breadcrumb` `menu` `big-menu` `stepper` |
-| **Feedback** | `alert` `badge` `empty-state` `progressbar` `skeleton` `spinner` `tag` `tooltip` |
-| **Actions** | `button` `button-group` `drawer` `popover` |
-| **Display** | `avatar` `icon` |
-
-### Import Pattern
-
-```typescript
-import { <Component> } from '@raintonic/formaui/components/<name>';
-```
-
-## CDK
-
-Low-level primitives for building custom components.
-
-| Module | Description |
-|---|---|
-| `formaui/cdk/overlay` | Overlay and portal positioning system |
-| `formaui/cdk/drag-drop` | Drag and drop functionality |
-| `formaui/cdk/virtual-scroll` | Virtual scrolling for large lists |
-| `formaui/cdk/form-field` | Form field infrastructure and control interface |
-
-## Services
-
-| Service | Import | Description |
-|---|---|---|
-| **Dialog** | `formaui/services/dialog` | Modal dialog management |
-| **Notification** | `formaui/services/notification` | Toast notifications |
-| **Theme** | `formaui/services/theme` | Runtime theme switching |
-
-## Theming
-
-FormaUI uses CSS custom properties (`--fui-*`) for all design tokens. Two themes are included:
-
-- **Light** (default) — applied to `:root`
-- **Dark** — toggled via `ThemeService`
-
-Tokens cover spacing, typography, colors, motion, and elevation. Override any `--fui-*` variable to customize.
-
-## Development
-
-```bash
-npm run build:lib       # Build the library
-npm test                # Run tests (Jest)
-npm run lint            # Lint
-npm run serve:docs      # Serve docs app locally
-```
-
-Requires Node >= 22.16.0.
-
-## License
-
-[MIT](https://opensource.org/licenses/MIT)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/RainTonic/formaui/main/resources/logo_black.svg" alt="FormaUI" width="360">
+</p>
+
+<h1 align="center">FormaUI</h1>
+
+<p align="center">A modern, standalone Angular UI component library with built-in theming, CDK primitives, and tree-shakable imports.</p>
+
+[![npm version](https://img.shields.io/npm/v/@raintonic/formaui.svg)](https://www.npmjs.com/package/@raintonic/formaui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Angular](https://img.shields.io/badge/Angular-21+-dd0031.svg)](https://angular.dev)
+
+## Features
+
+- **44 standalone components** — no NgModules, just import and use
+- **Tree-shakable** — secondary entry points via ng-packagr, import only what you need
+- **Theming system** — CSS custom properties with light/dark themes out of the box
+- **CDK layer** — overlay/portal system, drag-drop, virtual-scroll, form-field primitives
+- **Signals-first** — reactive state management with Angular signals
+- **Accessible** — built-in a11y support with testing utilities (axe-core)
+- **Form integration** — components implement `FuiFormFieldControl` for seamless `fui-form-field` integration
+
+## Installation
+
+```bash
+npm install @raintonic/formaui
+```
+
+### Peer Dependencies
+
+```json
+{
+  "@angular/common": "^21.0.0",
+  "@angular/core": "^21.0.0",
+  "@angular/forms": "^21.0.0"
+}
+```
+
+## Browser support
+
+FormaUI supports the last 2 versions of Chrome, Firefox, Safari, Edge, and iOS Safari. Internet Explorer is not supported.
+
+Exact matrix: see `.browserslistrc`.
+
+## Versioning
+
+FormaUI follows [Semantic Versioning](https://semver.org/). From v1.0.0 onwards:
+
+- **MAJOR** — breaking API changes
+- **MINOR** — new features, backwards-compatible
+- **PATCH** — bug fixes, backwards-compatible
+
+Versions prior to 1.0.0 (`0.x.x`) did not carry a stability guarantee.
+
+## Quick start
+
+Install:
+
+```bash
+npm install @raintonic/formaui
+```
+
+Import base styles in `src/styles.scss`:
+
+```scss
+@use '@raintonic/formaui/styles' as fui;
+```
+
+Use components in a standalone component:
+
+```typescript
+import { Component } from '@angular/core';
+import { FuiButtonDirective } from '@raintonic/formaui/components/button';
+import { FuiFormFieldComponent, FuiLabelComponent } from '@raintonic/formaui/components/form-field';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
+
+@Component({
+  standalone: true,
+  imports: [FuiButtonDirective, FuiFormFieldComponent, FuiLabelComponent, FuiInputDirective],
+  template: `
+    <fui-form-field>
+      <fui-label>Email</fui-label>
+      <input fuiInput type="email" />
+    </fui-form-field>
+    <button fuiButton variant="primary">Save</button>
+  `,
+})
+export class MyFormComponent {}
+```
+
+See the full docs at [formaui.raintonic.com](https://formaui.raintonic.com).
+
+## Usage
+
+All imports use secondary entry points:
+
+```typescript
+import { FuiButtonDirective } from '@raintonic/formaui/components/button';
+import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
+import { FuiThemeService } from '@raintonic/formaui/services/theme';
+```
+
+### Button
+
+```html
+<button fuiButton variant="primary">Save</button>
+<button fuiButton variant="secondary">Cancel</button>
+```
+
+### Form Field
+
+```html
+<fui-form-field>
+  <fui-label>Email</fui-label>
+  <input fuiInput type="email" />
+</fui-form-field>
+```
+
+### Theme Switching
+
+```typescript
+import { FuiThemeService } from '@raintonic/formaui/services/theme';
+
+export class AppComponent {
+  private theme = inject(FuiThemeService);
+
+  toggleDark() {
+    this.theme.toggleTheme();
+  }
+}
+```
+
+## Components
+
+All components use the `fui` prefix and are standalone.
+
+| Category | Components |
+|---|---|
+| **Forms** | `autocomplete` `checkbox` `date-picker` `file-upload` `form-field` `input` `number-input` `password-input` `radio` `select` `slider` `time-picker` `toggle` `tree-select` |
+| **Data** | `data-table` `list` `paginator` `tree` `tree-table` |
+| **Layout** | `accordion` `card` `divider` `sidebar` `side-panel` `tab` `toolbar` |
+| **Navigation** | `breadcrumb` `menu` `big-menu` `stepper` |
+| **Feedback** | `alert` `badge` `empty-state` `progressbar` `skeleton` `spinner` `tag` `tooltip` |
+| **Actions** | `button` `button-group` `drawer` `popover` |
+| **Display** | `avatar` `icon` |
+
+### Import Pattern
+
+```typescript
+import { Fui<Component> } from '@raintonic/formaui/components/<name>';
+```
+
+## CDK
+
+Low-level primitives for building custom components.
+
+| Module | Description |
+|---|---|
+| `@raintonic/formaui/cdk/overlay` | Overlay and portal positioning system |
+| `@raintonic/formaui/cdk/drag-drop` | Drag and drop functionality |
+| `@raintonic/formaui/cdk/virtual-scroll` | Virtual scrolling for large lists |
+| `@raintonic/formaui/cdk/form-field` | Form field infrastructure and control interface |
+
+## Services
+
+| Service | Import | Description |
+|---|---|---|
+| **Dialog** | `@raintonic/formaui/services/dialog` | Modal dialog management |
+| **Notification** | `@raintonic/formaui/services/notification` | Toast notifications |
+| **Theme** | `@raintonic/formaui/services/theme` | Runtime theme switching |
+
+## Theming
+
+FormaUI uses CSS custom properties (`--fui-*`) for all design tokens. Two themes are included:
+
+- **Light** (default) — applied to `:root`
+- **Dark** — toggled via `FuiThemeService`
+
+Tokens cover spacing, typography, colors, motion, and elevation. Override any `--fui-*` variable to customize.
+
+## Development
+
+```bash
+npm run build:lib       # Build the library
+npm test                # Run tests (Jest)
+npm run lint            # Lint
+npm run serve:docs      # Serve docs app locally
+```
+
+Requires Node >= 22.16.0.
+
+## Documentation
+
+Full documentation and live component demos at [formaui.raintonic.com](https://formaui.raintonic.com).
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT) — Copyright © Rain Tonic S.r.l.