ngxsmk-datepicker 2.2.0 → 2.2.3

package/README.md

@@ -24,15 +24,15 @@
 
 ---
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 ### **Overview**
 
 **ngxsmk-datepicker** is a high-performance, enterprise-ready date and range picker engineered for the modern Angular ecosystem (v17+). Built from the ground up with **Angular Signals**, it delivers a seamless, zoneless-ready experience for both desktop and mobile (Ionic) applications.
 
-> **Stable Release**: `v2.2.0` is live! This release brings a **TypeScript Strictness Overhaul** (eliminating `any` types and ensuring `exactOptionalPropertyTypes` compatibility), fixes **appendToBody** popover positioning, datepicker-in-modal first-open behavior, and popover width matching the input; it also reduces loading time and cleans up CSS. No breaking changes.
+> **Stable Release**: `v2.2.3` is live! This release brings a **TypeScript Strictness Overhaul** (eliminating `any` types), **Cognitive Complexity & Linting Fixes** for Material integration, and improved **Test Coverage (~68.2%)**. It also fixes **appendToBody** popover positioning, datepicker-in-modal behavior, and touch interaction regressions. No breaking changes.
 >
-> ⚠️ **Important**: Versions 2.0.10 and 2.0.11 are broken and have been unpublished. Please use v2.2.0 or later.
+> ⚠️ **Important**: Versions 2.0.10 and 2.0.11 are broken and have been unpublished. Please use v2.2.3 or later.
 
 ---
 
@@ -136,30 +136,21 @@ Features marked as experimental may change:
 
 For details, see [CONTRIBUTING.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CONTRIBUTING.md#deprecation-policy).
 
-## **📦 Installation**
+## **🚀 Installation**
+
+Install the package using npm:
 
 ```bash
-npm install ngxsmk-datepicker@2.2.0
+npm install ngxsmk-datepicker@latest
 ```
 
 ### Alternative installation
 
-You can install without npm using any of these methods (peer dependencies must still be installed in your app):
-
-| Method | Command |
-|--------|--------|
-| **Yarn** | `yarn add ngxsmk-datepicker@2.2.0` |
-| **pnpm** | `pnpm add ngxsmk-datepicker@2.2.0` |
-| **Bun** | `bun add ngxsmk-datepicker@2.2.0` |
-| **From Git** | `npm install github:NGXSMK/ngxsmk-datepicker#v2.2.0` (requires the repo to have built output or you build from source) |
-| **Local path** | Build the library in the repo (`npx ng build ngxsmk-datepicker`), then `npm install /path/to/ngxsmk-datepicker/dist/ngxsmk-datepicker` |
-| **CDN (ESM)** | Use [unpkg](https://unpkg.com/ngxsmk-datepicker@2.2.0/) or [jsDelivr](https://cdn.jsdelivr.net/npm/ngxsmk-datepicker@2.2.0/) in your bundler or import map; peer dependencies (Angular, etc.) must be installed in your app. |
-
-For all options and caveats, see [docs/INSTALLATION.md](docs/INSTALLATION.md).
+You can install without npm using Yarn, pnpm, Bun, from Git, a local path, or via CDN (ESM). Peer dependencies must still be installed in your app. For all options and caveats, see [INSTALLATION.md](../../docs/INSTALLATION.md) in the repo root.
 
 ## **Usage**
 
-ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.
+ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module. If you see **NG1010** (`'imports' must be an array... Value could not be determined statically`) when using the Angular compiler plugin or in strict AOT builds, use `NgxsmkDatepickerModule` in your `imports` array instead of `NgxsmkDatepickerComponent` (same template: `<ngxsmk-datepicker>`).
 
 ### Signal Forms (Angular 21)
 
@@ -229,7 +220,7 @@ For detailed Signal Forms integration including dirty state tracking, see the [S
 
 #### **1. Import the Component**
 
-In your component file (e.g., app.component.ts), import the component (or the module—see troubleshooting below).
+In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponent.
 
     import { Component } from '@angular/core';
     import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';
@@ -259,8 +250,6 @@ In your component file (e.g., app.component.ts), import the component (or the mo
       }
     }
 
-**If you see NG1010** (`'imports' must be an array... Value could not be determined statically`) when using the Angular compiler plugin or in strict AOT builds, use the wrapper module instead: `import { NgxsmkDatepickerModule } from 'ngxsmk-datepicker'` and set `imports: [NgxsmkDatepickerModule]`. The template stays the same (`<ngxsmk-datepicker>`).
-
 #### **2. Add it to Your Template**
 
 Use the `<ngxsmk-datepicker>` selector in your HTML template.
@@ -341,22 +330,7 @@ export class MaterialFormComponent {
 }
 ```
 
-**Non-Standalone Components (NgModules):**
-
-```typescript
-import { NgModule } from "@angular/core";
-import { MAT_FORM_FIELD_CONTROL } from "@angular/material/form-field";
-import { NgxsmkDatepickerComponent, provideMaterialFormFieldControl } from "ngxsmk-datepicker";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { ReactiveFormsModule } from "@angular/forms";
-
-@NgModule({
-  imports: [NgxsmkDatepickerComponent, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
-  providers: [provideMaterialFormFieldControl(MAT_FORM_FIELD_CONTROL)],
-})
-export class MyModule {}
-```
+**Non-Standalone (NgModules):** Add the directive file from [INTEGRATION.md § Angular Material](docs/INTEGRATION.md#angular-material), then add it to your module `imports` (with `NgxsmkDatepickerComponent`, `MatFormFieldModule`, etc.) and use `ngxsmkMatFormFieldControl` on the datepicker in templates.
 
 **With Date Range:**
 
@@ -375,9 +349,6 @@ For best integration with Ionic, import the integration styles in your global CS
 @import "ngxsmk-datepicker/styles/ionic-integration.css";
 ```
 
-**Automatic Theming:**
-The datepicker automatically detects and uses Ionic CSS variables (e.g., `--ion-color-primary`, `--ion-background-color`) so it matches your app's theme out of the box without extra configuration.
-
 Works seamlessly with Ionic form components and follows Ionic design patterns:
 
 ```typescript
@@ -619,16 +590,16 @@ The `locale` input controls all internationalization. It automatically formats m
 
 ### **Global Language Support**
 
-ngxsmk-datepicker v2.2.0 now features **full localization synchronization** for:
+ngxsmk-datepicker v2.2.3 now features **full localization synchronization** for:
 
-- �� English (`en`)
-- �� German (`de`)
-- �� French (`fr`)
-- �� Spanish (`es`)
+- 🇺🇸 English (`en`)
+- 🇩🇪 German (`de`)
+- 🇫🇷 French (`fr`)
+- 🇪🇸 Spanish (`es`)
 - 🇸🇪 Swedish (`sv`)
-- �� Korean (`ko`)
-- �� Chinese (`zh`)
-- �� Japanese (`ja`)
+- 🇰🇷 Korean (`ko`)
+- 🇨🇳 Chinese (`zh`)
+- 🇯🇵 Japanese (`ja`)
 
 ### **Usage Example**
 
@@ -712,16 +683,14 @@ This library has been optimized for maximum performance:
 
 ## **🐛 Bug Fixes & Improvements**
 
-### **Critical Bug Fixes in v1.4.15:**
+### **Critical Updates in v2.2.3:**
 
-- ✅ **Change Detection**: Fixed OnPush change detection issues with proper `markForCheck()` triggers
-- ✅ **Date Comparison**: Fixed null safety issues in date range comparisons
-- ✅ **Memory Leaks**: Added cache size limits to prevent memory leaks
-- ✅ **Type Safety**: Improved TypeScript types and null safety checks
-- ✅ **Mobile UX**: Enhanced mobile interactions and touch feedback
-- ✅ **Performance**: Optimized template bindings with memoized functions
-- ✅ **Accessibility**: Better focus states and keyboard navigation
-- ✅ **Build System**: Improved build configuration and optimization
+- ✅ **Validation messages**: User-facing i18n strings for invalid date, min/max; `validationError` output and on-screen error display
+- ✅ **Calendar loading state**: Visual spinner + text and screen-reader announcement while calendar opens/generates
+- ✅ **Demo theme**: Light/dark theme toggle and system preference now correctly switch the demo UI
+- ✅ **Installation options**: Full install guide (npm, Yarn, pnpm, Bun, Git, CDN, etc.) and demo page updates
+- ✅ **Accessibility**: Loading state announced via live region; validation errors exposed for a11y
+- ✅ **Type Safety**: New translation keys and strictly typed inputs/outputs
 
 ### **Performance Enhancements:**
 
@@ -877,16 +846,16 @@ We welcome and appreciate contributions from the community! Whether it's reporti
 
 For a full list of changes, please refer to the [CHANGELOG.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CHANGELOG.md) file.
 
-### **v2.2.0** (Current Stable)
+### **v2.2.3** (Current Stable)
 
-- 🎉 **Version Update**: Updated to version 2.2.0.
+- 🎉 **Version Update**: Updated to version 2.2.3.
 - ✨ **Key Updates**: Optimized loading times, refined mobile header layout, and improved dropdown accessibility.
 - ✅ **Stable Release**: Full synchronization of header components with `ViewEncapsulation.None`.
 
 ### **v1.9.24**
 
 - 🎉 **Version Update**: Updated to version 1.9.24
-- ✅ **Stable Release**: Version 1.9.24 is the current stable version
+- ✅ **Stable Release**: Version 2.2.3 is the current stable version
 
 ### **v1.9.23**
 

package/docs/API.md

@@ -2,7 +2,12 @@
 
 This document describes the stable public API of ngxsmk-datepicker with comprehensive real-world examples. APIs marked as **stable** are guaranteed to remain backward-compatible within the same major version. APIs marked as **experimental** may change in future releases.
 
-**Version**: 2.2.0+ | **Last updated**: February 25, 2026
+**Version**: 2.2.3+ | **Last updated**: March 9, 2026
+
+## Stable vs experimental
+
+- **Stable**: All inputs/outputs in the reference tables below are stable unless marked **Experimental**. Stable APIs will not change in a breaking way within the same major version.
+- **Experimental**: Marked in the tables; may change in minor releases. Use with awareness.
 
 ## Versioning Policy
 
@@ -40,7 +45,7 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | Input | Type | Default | Status | Description | Example |
 |-------|------|---------|--------|-------------|---------|
 | `mode` | `'single' \| 'range' \| 'multiple'` | `'single'` | Stable | Selection mode | `mode="single"` or `[mode]="'range'"` |
-| `value` | `DatepickerValue` | `null` | Stable | Current value (one-way binding) | `[value]="selectedDate"` |
+| `value` | `DatepickerValue` | `null` | Stable | Current value (one-way binding). For two-way binding with a signal, use `[value]="dateSignal()"` and `(valueChange)="dateSignal.set($event)"`. | `[value]="selectedDate"` |
 | `field` | `SignalFormField \| SignalFormFieldConfig` | `null` | Stable | Signal form field (Angular 21+). Automatically tracks dirty state when using `[field]` binding. Supports direct signals, signals with properties, and resolution of nested signals. | `[field]="myForm.dateField"` |
 | `placeholder` | `string \| null` | `'Select Date'` or `'Select Time'` | Stable | Input placeholder text | `placeholder="Choose a date"` |
 | `inputId` | `string` | `''` | Stable | Custom ID for the input element | `inputId="my-date-input"` |
@@ -59,7 +64,7 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | `timeOnly` | `boolean` | `false` | Stable | Display time picker only (no calendar). Automatically enables `showTime`. | `[timeOnly]="true"` |
 | `allowTyping` | `boolean` | `false` | Stable | Enable manual typing in the input field. Required for native validation. | `[allowTyping]="true"` |
 | `displayFormat` | `string` | `null` | Stable | Custom date format string (e.g., 'MM/DD/YYYY'). | `displayFormat="DD.MM.YYYY"` |
-| `showCalendarButton` | `boolean` | `true` | Stable | Show/hide the calendar icon button. When `false`, users can still open calendar by clicking the input field. | `[showCalendarButton]="false"` |
+| `showCalendarButton` | `boolean` | `false` | Stable | Show/hide the calendar icon button. When `false`, users can still open calendar by clicking the input field. | `[showCalendarButton]="true"` |
 | `minuteInterval` | `number` | `1` | Stable | Minute selection interval | `[minuteInterval]="15"` |
 | `showSeconds` | `boolean` | `false` | Stable | Show seconds in time selection | `[showSeconds]="true"` |
 | `secondInterval` | `number` | `1` | Stable | Second selection interval (e.g. 1, 5, 15) | `[secondInterval]="5"` |
@@ -2339,6 +2344,27 @@ export function getDaysInMonth(year: number, month: number): number;
 export function getFirstDayOfMonth(year: number, month: number): number;
 ```
 
+## Virtual scrolling
+
+Year and decade views use the internal `calculateVirtualScroll` utility and visible-index signals so that only visible items are rendered when year ranges are large (e.g. 100+ years). The main calendar grid uses lazy month rendering via `_visibleCalendarIndicesSignal`. For very large ranges, consider limiting `yearRange` for optimal performance.
+
+## Animation and reduced motion
+
+Animation duration and transitions can be configured via `provideDatepickerConfig` or the global config. The component respects the `prefers-reduced-motion` media query when `animations.respectReducedMotion` is `true` (default): transitions are disabled for users who request reduced motion.
+
+```typescript
+import { provideDatepickerConfig, DEFAULT_ANIMATION_CONFIG } from 'ngxsmk-datepicker';
+
+// In app config or providers
+provideDatepickerConfig({
+  animations: {
+    ...DEFAULT_ANIMATION_CONFIG,
+    duration: 200,
+    respectReducedMotion: true,
+  },
+})
+```
+
 ## Keyboard Support
  
 The datepicker comes with comprehensive keyboard support:

package/docs/COMPATIBILITY.md

@@ -1,6 +1,6 @@
 # Version Compatibility Matrix
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 This document provides comprehensive compatibility information for `ngxsmk-datepicker` across different Angular versions, Zone.js configurations, and SSR/CSR setups.
 

package/docs/INTEGRATION.md

@@ -1,19 +1,44 @@
 # Integration Guides
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 This document provides integration examples for using ngxsmk-datepicker with popular frameworks and libraries.
 
 ## Table of Contents
 
+- [Theming](#theming)
+- [Accessibility](#accessibility)
+- [Input sanitization and CSP](#input-sanitization-and-csp)
 - [Angular Material](#angular-material)
 - [Ionic](#ionic)
 - [Tailwind CSS](#tailwind-css)
 - [React, Vue, & Vanilla JS (Web Components)](#react-vue--vanilla-js-web-components)
 - [Modals and overlays](#modals-and-overlays)
 
+## Theming
+
+Two different mechanisms apply:
+
+- **Component input `[theme]`**: Accepts only `'light'` or `'dark'`. Use it to switch the built-in light/dark color set (e.g. `[theme]="'dark'"` or `[theme]="isDark() ? 'dark' : 'light'"`).
+- **ThemeBuilderService.applyTheme(themeObject, element?)**: Accepts a theme **object** (colors, spacing, borderRadius, shadows, etc.) and applies it as CSS variables to the given element (or globally if no element). Use it for custom brand colors and full design tokens. See [THEME-TOKENS.md](THEME-TOKENS.md).
+  - When `element` is a **wrapper** (not the `ngxsmk-datepicker` host), the theme is applied to the wrapper and all descendant `ngxsmk-datepicker` elements so library defaults are overridden.
+  - Use `theme.shadows.focus` to customize the input focus ring (e.g. `'0 0 0 3px color-mix(in srgb, var(--datepicker-primary-color) 15%, transparent)'`). Internal `--ngxsmk-color-*` variables are bridged from your theme colors automatically.
+
+Do not pass a theme object to the `[theme]` input; use `ThemeBuilderService` for that.
+
+## Accessibility
+
+The datepicker is built with **accessibility in mind**: keyboard navigation (arrows, Enter, Escape, T/Y/N/W, etc.), ARIA roles and labels on interactive elements, and live regions for screen reader announcements. For keyboard shortcuts and ARIA options see [API.md – Keyboard Support](API.md#keyboard-support) and the ARIA-related inputs in the API reference.
+
+## Input sanitization and CSP
+
+- **Input sanitization**: The library sanitizes user-provided date/time strings (e.g. from the input field) before use: it strips HTML delimiters, script handlers, and dangerous protocols. Template bindings do not use `innerHTML` for user content, so Angular's `DomSanitizer` is not required for normal usage.
+- **CSP**: If your app enforces a Content-Security-Policy, ensure it allows the same directives required by Angular (e.g. `script-src` for your app and Angular, `style-src` for component styles). The datepicker does not use `eval`, inline scripts, or nonce-based scripts; it uses standard Angular templates and styles. No extra CSP directives are required specifically for ngxsmk-datepicker.
+
 ## Angular Material
 
+The main `ngxsmk-datepicker` bundle does **not** import `@angular/material`, so non-Material apps are not forced to install it. If you use `mat-form-field`, install Material and add the directive as below.
+
 ### Installation
 
 ```bash
@@ -22,6 +47,46 @@ npm install @angular/material @angular/cdk ngxsmk-datepicker
 
 ### Basic Integration (Standalone Components)
 
+**Recommended:** Use the **`ngxsmkMatFormFieldControl`** directive on the datepicker so `mat-form-field` finds it. Add this directive file to your project (e.g. `ngxsmk-mat-form-field.directive.ts`) so only Material apps pull in `@angular/material`:
+
+```typescript
+// ngxsmk-mat-form-field.directive.ts
+import { Directive, forwardRef } from '@angular/core';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
+
+@Directive({
+  selector: 'ngxsmk-datepicker[ngxsmkMatFormFieldControl]',
+  standalone: true,
+  providers: [
+    { provide: MatFormFieldControl, useExisting: forwardRef(() => NgxsmkDatepickerComponent) },
+  ],
+})
+export class NgxsmkDatepickerMatFormFieldControlDirective {}
+```
+
+Then in your component:
+
+```typescript
+import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
+import { NgxsmkDatepickerMatFormFieldControlDirective } from './ngxsmk-mat-form-field.directive'; // your local file
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+@Component({
+  imports: [MatFormFieldModule, NgxsmkDatepickerComponent, NgxsmkDatepickerMatFormFieldControlDirective, ...],
+  template: `
+    <mat-form-field appearance="outline">
+      <mat-label>Select Date</mat-label>
+      <ngxsmk-datepicker ngxsmkMatFormFieldControl [value]="dateControl.value" (valueChange)="dateControl.setValue($event)" ... />
+    </mat-form-field>
+  `
+})
+```
+
+If you see "mat-form-field must contain a MatFormFieldControl", add the directive to the datepicker host (see Issue #187).
+
+**Alternative (legacy / when directive is not used):** In `main.ts` before bootstrap, call `NgxsmkDatepickerComponent.withMaterialSupport(MatFormFieldControl)` (and optionally set `globalThis.__NGXSMK_MAT_FORM_FIELD_CONTROL__ = MatFormFieldControl`). Then use the datepicker inside `mat-form-field` without the directive. Prefer the directive above.
+
 ```typescript
 import { Component } from '@angular/core';
 import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
@@ -68,14 +133,16 @@ export class DatepickerComponent {
 }
 ```
 
+**If you see "mat-form-field must contain a MatFormFieldControl":** Add the **`ngxsmkMatFormFieldControl`** directive to the datepicker (Option A above). Do not use `MAT_FORM_FIELD` or pass the wrong token; the directive is the supported path.
+
 ### Integration with Non-Standalone Components (NgModules)
 
-For non-standalone components, you need to provide the Material form field control token using the `provideMaterialFormFieldControl` helper:
+Add the same directive file (see snippet above) to your project, then import it in your NgModule:
 
 ```typescript
 import { NgModule } from '@angular/core';
-import { MAT_FORM_FIELD_CONTROL } from '@angular/material/form-field';
-import { NgxsmkDatepickerComponent, provideMaterialFormFieldControl } from 'ngxsmk-datepicker';
+import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
+import { NgxsmkDatepickerMatFormFieldControlDirective } from './ngxsmk-mat-form-field.directive'; // your local file
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -83,15 +150,17 @@ import { ReactiveFormsModule } from '@angular/forms';
 @NgModule({
   imports: [
     NgxsmkDatepickerComponent,
+    NgxsmkDatepickerMatFormFieldControlDirective,
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule
-  ],
-  providers: [provideMaterialFormFieldControl(MAT_FORM_FIELD_CONTROL)]
+  ]
 })
 export class MyModule { }
 ```
 
+Use `ngxsmkMatFormFieldControl` on the datepicker in your templates.
+
 Then use it in your component:
 
 ```typescript
@@ -161,9 +230,8 @@ export class MaterialFormComponent {
 ### With Material Datepicker Styling
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component, inject, ElementRef } from '@angular/core';
 import { NgxsmkDatepickerComponent, ThemeBuilderService } from 'ngxsmk-datepicker';
-import { inject } from '@angular/core';
 
 @Component({
   selector: 'app-material-datepicker',
@@ -174,7 +242,7 @@ import { inject } from '@angular/core';
       <ngxsmk-datepicker
         [value]="selectedDate"
         (valueChange)="selectedDate = $event"
-        [theme]="materialTheme"
+        theme="light"
         [classes]="materialClasses">
       </ngxsmk-datepicker>
     </div>
@@ -203,6 +271,7 @@ import { inject } from '@angular/core';
 })
 export class MaterialDatepickerComponent {
   private themeBuilder = inject(ThemeBuilderService);
+  private hostEl = inject(ElementRef).nativeElement;
   selectedDate: Date | null = null;
   
   materialTheme = {
@@ -214,12 +283,13 @@ export class MaterialDatepickerComponent {
       border: '#e0e0e0',
       hover: '#f5f5f5'
     },
-    borderRadius: {
-      md: '4px',
-      lg: '8px'
-    }
+    borderRadius: { md: '4px', lg: '8px' }
   };
   
+  ngOnInit() {
+    this.themeBuilder.applyTheme(this.materialTheme, this.hostEl);
+  }
+  
   materialClasses = {
     wrapper: 'material-datepicker',
     inputGroup: 'material-input-group',

package/docs/IONIC_INTEGRATION.md

@@ -1,6 +1,6 @@
 # Ionic Framework Integration Guide
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 This guide provides step-by-step instructions for integrating ngxsmk-datepicker with Ionic Angular applications.
 

package/docs/IONIC_TESTING.md

@@ -1,6 +1,6 @@
 # Ionic Integration Testing Guide
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 This document provides comprehensive testing instructions for verifying ngxsmk-datepicker compatibility with Ionic Framework.
 

package/docs/LOCALE-GUIDE.md

@@ -1,6 +1,6 @@
 # Locale Packs & i18n Contributor Guide
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 Guide for adding locale support and contributing translations to ngxsmk-datepicker.
 
@@ -14,8 +14,8 @@ The component uses the `locale` input property to determine:
 - Month names
 - Weekday names
 - Week start day
-- Date formatting
-- Number formatting
+- Date formatting (locale-aware when using Intl; override with `[displayFormat]` for custom patterns)
+- Number formatting (locale-aware via `formatLocaleNumber` and translation registry)
 
 ```typescript
 <ngxsmk-datepicker [locale]="'en-US'"></ngxsmk-datepicker>

package/docs/PLUGIN-ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # Plugin Architecture
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 ngxsmk-datepicker features a powerful **plugin architecture** that allows you to extend and customize the component's behavior without modifying its core code. This architecture is built on a **hook-based system** that provides extension points throughout the component's lifecycle.
 

package/docs/SEO.md

@@ -1,6 +1,6 @@
 # SEO Optimization Guide
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 This document outlines the SEO optimizations implemented for ngxsmk-datepicker to improve search engine visibility and discoverability.
 

package/docs/SSR-EXAMPLE.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR) Example
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 Complete example demonstrating ngxsmk-datepicker with Angular Universal (SSR).
 

package/docs/THEME-TOKENS.md

@@ -1,6 +1,6 @@
 # Theme Tokens & CSS Custom Properties
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 Complete reference for all CSS custom properties (CSS variables) available in ngxsmk-datepicker.
 

package/docs/TIMEZONE.md

@@ -1,6 +1,6 @@
 # Timezone Support
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 ## Overview
 

package/docs/extension-points.md

@@ -1,6 +1,6 @@
 # Extension Points and Hooks
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 ngxsmk-datepicker provides comprehensive extension points through the `hooks` input, allowing you to customize rendering, validation, keyboard shortcuts, formatting, and event handling.
 

package/docs/signal-forms.md

@@ -1,6 +1,6 @@
 # Signal Forms Integration
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 This guide covers using ngxsmk-datepicker with Angular 21+ Signal Forms API.
 

package/docs/signals.md

@@ -1,6 +1,6 @@
 # Signals Integration Guide
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 ngxsmk-datepicker is fully compatible with Angular Signals, providing seamless integration with both traditional reactive forms and modern signal-based patterns.
 

package/docs/ssr.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR) Guide
 
-**Last updated:** February 25, 2026 · **Current stable:** v2.2.0
+**Last updated:** March 9, 2026 · **Current stable:** v2.2.3
 
 ngxsmk-datepicker is fully compatible with Angular Universal and server-side rendering. This guide covers SSR setup, best practices, and troubleshooting.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxsmk-datepicker",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "author": {
     "name": "Sachin Dilshan",
     "url": "https://www.linkedin.com/in/sachindilshan/"
@@ -81,13 +81,6 @@
   "exports": {
     "./styles/*": {
       "default": "./styles/*"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngxsmk-datepicker.d.ts",
-      "default": "./fesm2022/ngxsmk-datepicker.mjs"
     }
   }
 }

package/styles/ionic-integration.css

@@ -64,7 +64,6 @@ ion-content .ngxsmk-popover-container.ngxsmk-popover-open:not(.ngxsmk-inline-con
 
 /* Alternative: Use inline mode in ion-content (recommended) */
 
-
 /* ============================================
    4. SAFE AREA INSETS (iOS)
    ============================================ */
@@ -116,7 +115,6 @@ ion-app.ion-theme-dark ngxsmk-datepicker {
 
 /* Allow Ionic gestures to work when datepicker is in inline mode */
 
-
 /* Prevent touch event conflicts in popover mode */
 .ngxsmk-popover-container.ngxsmk-popover-open:not(.ngxsmk-inline-container) {
   /* Ionic gestures may be blocked - use inline mode instead */
@@ -130,14 +128,12 @@ ion-app.ion-theme-dark ngxsmk-datepicker {
 
 /* When inside ion-modal, let Ionic handle focus */
 
-
 /* ============================================
    8. KEYBOARD BEHAVIOR
    ============================================ */
 
 /* Prevent keyboard from covering datepicker on iOS */
 @supports (-webkit-touch-callout: none) {
-
   /* iOS Safari */
   .ngxsmk-popover-container.ngxsmk-popover-open:not(.ngxsmk-inline-container) {
     /* Adjust position when keyboard is visible */
@@ -151,7 +147,6 @@ ion-app.ion-theme-dark ngxsmk-datepicker {
 
 /* Ensure variables cascade into Shadow DOM */
 
-
 /* Global variables for Shadow DOM */
 :root {
   --datepicker-primary-color: var(--ion-color-primary, #6d28d9);
@@ -182,7 +177,6 @@ ion-item ngxsmk-datepicker .ngxsmk-input-group {
 
 /* On mobile, prefer inline mode in Ionic */
 
-
 /* ============================================
    12. CAPACITOR SPECIFIC
    ============================================ */
@@ -223,4 +217,4 @@ ion-item ngxsmk-datepicker .ngxsmk-input-group {
   max-width: 100% !important;
   border-radius: 0 !important;
   margin: 0 !important;
-}
+}