@shival99/z-ui 2.4.5 → 2.4.7

package/README.md

@@ -1,10 +1,10 @@
 # Z-UI - Modern Angular Component Library
 
-A comprehensive, high-performance UI component library built with Angular 21+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.
+A comprehensive, high-performance UI component library built with Angular 22+, featuring 45+ customizable components with dark mode, accessibility, and enterprise-ready features.
 
 ## Features
 
-- **40+ Components** - Buttons, Inputs, Tables, Modals, Calendars, and more
+- **45+ Components** - Buttons, Inputs, Tables, Modals, Calendars, and more
 - **Dark Mode** - Built-in theme support with 9 color themes
 - **Accessible** - WCAG 2.1 compliant components
 - **Responsive** - Mobile-first responsive design
@@ -58,7 +58,8 @@ Update your `project.json` or `angular.json` styles:
 ]
 ```
 
-`tailwind.css` includes every Z-UI theme. `ZThemeService` switches themes through the `z-theme` attribute without loading additional runtime assets.
+`tailwind.css` includes every Z-UI theme and the Tailwind radius scale. `ZThemeService` switches themes through the
+`z-theme` attribute without loading additional runtime assets. The base radius is `--radius: 0.375rem`.
 
 ## Quick Start
 
@@ -88,7 +89,7 @@ import { provideZTranslate } from '@shival99/z-ui/providers';
 import { provideZNgxMask } from '@shival99/z-ui/providers';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZTranslate({ defaultLang: 'vi', langPath: '/assets/i18n/' }), provideZNgxMask()],
+  providers: [provideZTranslate({ defaultLang: 'vi', translationPath: '/assets/i18n/' }), provideZNgxMask()],
 };
 ```
 
@@ -118,13 +119,32 @@ import { Z_UI_TRANSLATIONS } from '@shival99/z-ui/i18n';
 
 ## Theming
 
-Available themes: `green`, `orange`, `violet`, `neutral`, `zinc`, `slate`, `stone`, `gray`, `hospital`
+Available themes: `green`, `orange`, `violet`, `neutral`, `zinc`, `slate`, `stone`, `gray`, `hospital`.
+For startup defaults, dark mode, and preference isolation, configure `provideZTheme()`:
+
+```typescript
+import { provideZTheme } from '@shival99/z-ui/providers';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZTheme({
+      defaultTheme: 'green',
+      defaultDarkMode: false,
+      cacheKey: 'MY_APP_THEME_PREFERENCES',
+    }),
+  ],
+};
+```
+
+Change the active theme at runtime with `ZThemeService.setTheme()` and `toggleDarkMode()`. Preferences are read from
+the configured cache key and override provider defaults when present. Themes are bundled in `tailwind.css`; do not
+add per-theme stylesheet entries or new `preloadTheme()` calls.
 
 ```typescript
 import { ZThemeService } from '@shival99/z-ui/services';
 
 export class AppComponent {
-  private themeService = inject(ZThemeService);
+  private readonly themeService = inject(ZThemeService);
 
   ngOnInit() {
     this.themeService.setTheme('violet');
@@ -143,7 +163,7 @@ Override these in your `styles.css` or `styles.scss`:
 
 ```css
 :root {
-  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
+  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
   --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;
 }
 ```
@@ -237,6 +257,26 @@ Example - Using Inter font:
 }
 ```
 
+### Radius and Shadow Scale
+
+`--radius` defaults to `0.375rem` (`6px`). Tailwind derives the component radius scale from it:
+
+```css
+:root {
+  --radius-xs: max(0px, calc(var(--radius) - 6px));
+  --radius-sm: max(0px, calc(var(--radius) - 4px));
+  --radius-md: max(0px, calc(var(--radius) - 2px));
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.2);
+  --radius-2xl: calc(var(--radius) * 1.4);
+  --radius-pill: calc(infinity * 1px);
+}
+```
+
+Popover-backed controls keep a placement-aware `--z-popover-shadow` on their floating panel. Preserve
+`shadow-[var(--z-popover-shadow)]` and avoid putting `overflow-hidden` on the popover content shell, or the
+dropdown/calendar shadow will be clipped.
+
 ### Scrollbar Variables
 
 ```css