Skip to content

NGXSMK v3.0.0 — Angular 22 Readiness, Accessibility Primitives, Universal Token Engine & AI Developer Tooling

Latest
Latest

Choose a tag to compare

View all tags
@toozuuu toozuuu released this 25 Aug 06:00
3.0.0
137c0e8

Overview

NGXSMK 3.0.0 is a major release advancing the Angular-first design system ecosystem with full Angular 22 compatibility, enhanced accessibility primitives, design token refinement, automated developer toolchains, and AI assistant capabilities.

This release consolidates 150+ standalone, zoneless-ready, signal-native components and behavioral primitives under a unified @ngxsmk/* namespace.

Highlights

1. Angular 22 & Ivy Partial Compilation Readiness

  • Verified and aligned with Angular 22's template type checking, signals-only reactive primitives, and zoneless change detection patterns.
  • Resolved template compilation edge cases with @for track expressions and updated phase-aware rendering lifecycle hooks (afterNextRender).
  • Added robust downlevel iterator compatibility across all package entry points (DOM.Iterable / ES2022).

2. New Accessibility & Behavioral Primitives (@ngxsmk/cdk)

  • Skip Link (@ngxsmk/cdk/skip-link): Off-screen keyboard navigation utility that slides into view upon Tab focus, enabling screen-reader and keyboard users to bypass repetitive header navigation.
  • Roving Focus (@ngxsmk/cdk/roving-focus): Directive suite implementing the WAI-ARIA roving tabindex pattern for composite widgets like menus, toolbars, grids, and listboxes.
  • Enhanced Focus Trap & Live Announcer: Improved focus containment and dynamic screen-reader announcement reliability across modal overlays and alert dialogs.

3. Universal Design Token Engine (@ngxsmk/theme)

  • Multi-Framework Adapters: Extended runtime CSS variable generator with support for Tailwind CSS v3 / v4 integration and Ionic token variable derivation (--ion-*).
  • Runtime Theme Injector (NgxThemeInjectorService): Server-Side Rendering (SSR)-safe runtime theme injection decoupled from class toggling and storage logic.
  • Design Tokens: Standardized --ngxsmk-* custom properties with light, dark, and high-contrast system palettes.

4. CLI, Migration Codemods & Automation (@ngxsmk/cli)

  • Migration Engine: Automated migration codemods for seamless upgrades from v1.x and v2.x to v3.0.0 secondary entry points.
  • Secondary Entry Point Architecture: Every component and primitive is published as an isolated entry point (e.g. @ngxsmk/core/button, @ngxsmk/cdk/focus-trap) for tree-shaking and minimal bundle impact.
  • Cross-Platform Scripting: Hardened publication and build automation scripts with automatic retry logic and Windows file-locking fault tolerance.

5. AI Coding Assistant Surface & MCP Tooling (@ngxsmk/mcp)

  • Model Context Protocol Server (@ngxsmk/mcp): Updated MCP stdio server providing AI agents with live component search (ngxsmk_search_components), API explanation (ngxsmk_explain_api), and layout recommendation (ngxsmk_recommend_layout).
  • AI Documentation Indices: Auto-generated llms.txt and llms-full.txt API reference files synchronized for LLM consumption.
  • Claude Code Plugin & Skills: Bundled canonical skill in plugins/ngxsmk for AI pair programming.

Detailed Changelog

Added

  • Added @ngxsmk/cdk/skip-link standalone component for accessible navigation bypass.
  • Added @ngxsmk/cdk/roving-focus directive suite (NgxsmkRovingFocusGroup, NgxsmkRovingFocusItem).
  • Added audit:a11y, audit:seo, audit:complexity, and audit:consistency automated verification suites in CI.
  • Added complete migration documentation and automated schematics/codemods.

Changed

  • Bumped all packages (@ngxsmk/core, @ngxsmk/theme, @ngxsmk/cdk, @ngxsmk/cli, @ngxsmk/mcp) to 3.0.0.
  • Relaxed @ngxsmk/core peer dependency on @ngxsmk/cdk to >=2.0.0.
  • Updated demo application versioning, headers, sidebars, and release changelog.
  • Automated Linux-rendered visual regression baseline updates via CI GitHub Actions workflows.

Fixed

  • Fixed @for tracking expression in NgxsmkReasoningTimeline to eliminate TypeScript class property lookup errors (TS2339).
  • Fixed invalid projected content fallback in NgxsmkSkipLink resolving NG5002.
  • Fixed type safety, null checking, and DOM reference typing in NgxThemeInjectorService.
  • Fixed afterNextRender phase callback signature in the showcase application root.
  • Fixed rmSync file-lock contentions on Windows environments during build and publish scripts.
  • Resolved ESLint and Angular template accessibility warnings across all packages and demo pages.

Upgrading to v3.0.0

Install the latest version via npm:

npm install @ngxsmk/core@latest @ngxsmk/theme@latest @ngxsmk/cdk@latest
Assets 2
Loading