@devjuliovilla/jv-ui 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devjuliovilla/jv-ui",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Accessibility-first Angular component library — components, forms, data grids, dialogs, layout, services, and i18n infrastructure built with signals and standalone APIs.",
   "author": "@devjuliovilla",
   "license": "MIT",

package/styles/jv-theme.css

@@ -1,135 +1,135 @@
-:root {
-  --jv-color-primary: #2563eb;
-  --jv-color-secondary: #475569;
-  --jv-color-success: #16a34a;
-  --jv-color-warning: #d97706;
-  --jv-color-danger: #dc2626;
-  --jv-color-info: #0891b2;
-
-  --jv-color-background: #f8fafc;
-  --jv-color-surface: #ffffff;
-  --jv-color-surface-muted: #f1f5f9;
-  --jv-color-border: #dbe3ef;
-  --jv-color-foreground: #0f172a;
-  --jv-color-foreground-muted: #475569;
-
-  --jv-spacing-xs: 0.25rem;
-  --jv-spacing-sm: 0.5rem;
-  --jv-spacing-md: 1rem;
-  --jv-spacing-lg: 1.5rem;
-  --jv-spacing-xl: 2rem;
-
-  --jv-radius-sm: 0.375rem;
-  --jv-radius-md: 0.75rem;
-  --jv-radius-lg: 1rem;
-
-  --jv-breakpoint-sm: 640px;
-  --jv-breakpoint-md: 768px;
-  --jv-breakpoint-lg: 1024px;
-  --jv-breakpoint-xl: 1280px;
-
-  --jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
-  --jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
-  --jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
-
-  --jv-density-control-height: 2.5rem;
-  --jv-density-padding-y: 0.75rem;
-  --jv-density-font-size: 0.95rem;
-}
-
-html[data-theme='dark'] {
-  --jv-color-background: #020617;
-  --jv-color-surface: #0f172a;
-  --jv-color-surface-muted: #111c31;
-  --jv-color-border: #243244;
-  --jv-color-foreground: #e2e8f0;
-  --jv-color-foreground-muted: #94a3b8;
-}
-
-html[data-theme='high-contrast'] {
-  --jv-color-primary: #00ffff;
-  --jv-color-secondary: #ffffff;
-  --jv-color-success: #00ff00;
-  --jv-color-warning: #ffff00;
-  --jv-color-danger: #ff4d4d;
-  --jv-color-info: #00ffff;
-  --jv-color-background: #000000;
-  --jv-color-surface: #000000;
-  --jv-color-surface-muted: #111111;
-  --jv-color-border: #ffffff;
-  --jv-color-foreground: #ffffff;
-  --jv-color-foreground-muted: #f5f5f5;
-}
-
-html[data-density='compact'] {
-  --jv-density-control-height: 2rem;
-  --jv-density-padding-y: 0.5rem;
-  --jv-density-font-size: 0.875rem;
-}
-
-html[data-density='comfortable'] {
-  --jv-density-control-height: 3rem;
-  --jv-density-padding-y: 0.95rem;
-  --jv-density-font-size: 1rem;
-}
-
-html,
-body {
-  min-height: 100%;
-}
-
-body {
-  margin: 0;
-  background: var(--jv-color-background);
-  color: var(--jv-color-foreground);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  font-size: var(--jv-density-font-size);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-:focus-visible {
-  outline: 2px solid var(--jv-color-primary);
-  outline-offset: 2px;
-}
-
-.sr-only,
-.screen-reader-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.jv-icon {
-  display: inline-block;
-  vertical-align: middle;
-  flex: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-}
+:root {
+  --jv-color-primary: #2563eb;
+  --jv-color-secondary: #475569;
+  --jv-color-success: #16a34a;
+  --jv-color-warning: #d97706;
+  --jv-color-danger: #dc2626;
+  --jv-color-info: #0891b2;
+
+  --jv-color-background: #f8fafc;
+  --jv-color-surface: #ffffff;
+  --jv-color-surface-muted: #f1f5f9;
+  --jv-color-border: #dbe3ef;
+  --jv-color-foreground: #0f172a;
+  --jv-color-foreground-muted: #475569;
+
+  --jv-spacing-xs: 0.25rem;
+  --jv-spacing-sm: 0.5rem;
+  --jv-spacing-md: 1rem;
+  --jv-spacing-lg: 1.5rem;
+  --jv-spacing-xl: 2rem;
+
+  --jv-radius-sm: 0.375rem;
+  --jv-radius-md: 0.75rem;
+  --jv-radius-lg: 1rem;
+
+  --jv-breakpoint-sm: 640px;
+  --jv-breakpoint-md: 768px;
+  --jv-breakpoint-lg: 1024px;
+  --jv-breakpoint-xl: 1280px;
+
+  --jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
+
+  --jv-density-control-height: 2.5rem;
+  --jv-density-padding-y: 0.75rem;
+  --jv-density-font-size: 0.95rem;
+}
+
+html[data-theme='dark'] {
+  --jv-color-background: #020617;
+  --jv-color-surface: #0f172a;
+  --jv-color-surface-muted: #111c31;
+  --jv-color-border: #243244;
+  --jv-color-foreground: #e2e8f0;
+  --jv-color-foreground-muted: #94a3b8;
+}
+
+html[data-theme='high-contrast'] {
+  --jv-color-primary: #00ffff;
+  --jv-color-secondary: #ffffff;
+  --jv-color-success: #00ff00;
+  --jv-color-warning: #ffff00;
+  --jv-color-danger: #ff4d4d;
+  --jv-color-info: #00ffff;
+  --jv-color-background: #000000;
+  --jv-color-surface: #000000;
+  --jv-color-surface-muted: #111111;
+  --jv-color-border: #ffffff;
+  --jv-color-foreground: #ffffff;
+  --jv-color-foreground-muted: #f5f5f5;
+}
+
+html[data-density='compact'] {
+  --jv-density-control-height: 2rem;
+  --jv-density-padding-y: 0.5rem;
+  --jv-density-font-size: 0.875rem;
+}
+
+html[data-density='comfortable'] {
+  --jv-density-control-height: 3rem;
+  --jv-density-padding-y: 0.95rem;
+  --jv-density-font-size: 1rem;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--jv-color-background);
+  color: var(--jv-color-foreground);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: var(--jv-density-font-size);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--jv-color-primary);
+  outline-offset: 2px;
+}
+
+.sr-only,
+.screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.jv-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/types/devjuliovilla-jv-ui.d.ts

@@ -8,7 +8,7 @@ type JvIntent = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'succ
 type JvTone = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 
 declare class JvButtonComponent {
-    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     readonly variant: _angular_core.InputSignal<JvIntent>;
     readonly icon: _angular_core.InputSignal<string | null>;
     readonly iconPosition: _angular_core.InputSignal<"start" | "end">;
@@ -55,14 +55,12 @@ declare class JvTranslationService {
 
 declare class JvDayPlannerDetailDirective {
     readonly templateRef: TemplateRef<JvDayPlannerDetailContext>;
-    constructor(templateRef: TemplateRef<JvDayPlannerDetailContext>);
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvDayPlannerDetailDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvDayPlannerDetailDirective, "ng-template[jvDayPlannerDetail]", never, {}, {}, never, never, true, never>;
 }
 
 declare class JvDayPlannerItemDirective {
     readonly templateRef: TemplateRef<JvDayPlannerItemContext>;
-    constructor(templateRef: TemplateRef<JvDayPlannerItemContext>);
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvDayPlannerItemDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvDayPlannerItemDirective, "ng-template[jvDayPlannerItem]", never, {}, {}, never, never, true, never>;
 }
@@ -149,7 +147,6 @@ interface JvModalSelectorOption<T = string> {
 
 declare class JvMonthCalendarDayDirective {
     readonly templateRef: TemplateRef<JvMonthCalendarDayContext>;
-    constructor(templateRef: TemplateRef<JvMonthCalendarDayContext>);
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvMonthCalendarDayDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvMonthCalendarDayDirective, "ng-template[jvMonthCalendarDay]", never, {}, {}, never, never, true, never>;
 }
@@ -333,9 +330,8 @@ declare class JvSectionComponent {
 }
 
 declare class JvAccordionPanelDirective {
-    readonly templateRef: TemplateRef<unknown>;
     readonly id: _angular_core.InputSignal<string>;
-    constructor(templateRef: TemplateRef<unknown>);
+    readonly templateRef: TemplateRef<unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvAccordionPanelDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvAccordionPanelDirective, "ng-template[jvAccordionPanel]", never, { "id": { "alias": "jvAccordionPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -571,7 +567,7 @@ declare class JvFormContainerComponent {
 }
 
 declare class JvInputComponent implements ControlValueAccessor {
-    readonly type: _angular_core.InputSignal<"number" | "text" | "search" | "email" | "password">;
+    readonly type: _angular_core.InputSignal<"number" | "search" | "text" | "email" | "password">;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
@@ -1226,7 +1222,7 @@ declare class JvListItemComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvListItemComponent, "jv-list-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[meta]"], true, never>;
 }
 
-interface JvListItemModel<T = any> {
+interface JvListItemModel<T = unknown> {
     title: string;
     description?: string;
     value?: T;
@@ -1236,9 +1232,8 @@ interface JvListItemModel<T = any> {
 }
 
 declare class JvTabPanelDirective {
-    readonly templateRef: TemplateRef<unknown>;
     readonly id: _angular_core.InputSignal<string>;
-    constructor(templateRef: TemplateRef<unknown>);
+    readonly templateRef: TemplateRef<unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvTabPanelDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvTabPanelDirective, "ng-template[jvTabPanel]", never, { "id": { "alias": "jvTabPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1326,7 +1321,7 @@ interface JvGridSortState {
 type JvGridColumnType = 'text' | 'integer' | 'number' | 'currency' | 'percent' | 'date' | 'time' | 'datetime' | 'boolean';
 type JvGridEditType = 'text' | 'number' | 'date' | 'time' | 'datetime' | 'select' | 'boolean';
 type JvGridColumnFormatOptions = Intl.NumberFormatOptions & Intl.DateTimeFormatOptions;
-interface JvGridColumn<T = any> {
+interface JvGridColumn<T = unknown> {
     key: keyof T | string;
     header: string;
     sortable?: boolean;
@@ -1353,7 +1348,7 @@ interface JvGridColumn<T = any> {
     children?: JvGridColumn<T>[];
     filterValue?: string;
 }
-interface JvGridAction<T = any> {
+interface JvGridAction<T = unknown> {
     id: string;
     label: string;
     icon?: string;
@@ -1377,7 +1372,7 @@ interface JvGridOptions {
     noResultsMessage?: string;
     searchPlaceholder?: string;
     ariaLabel?: string;
-    trackBy?: JvGridTrackBy<any>;
+    trackBy?: JvGridTrackBy<unknown>;
     serverSide?: boolean;
     totalItems?: number;
     stickyColumns?: boolean;
@@ -1404,7 +1399,7 @@ interface JvGridColumnResizeEvent {
     columnKey: string;
     width: string;
 }
-interface JvGridRowEditEvent<T = any> {
+interface JvGridRowEditEvent<T = unknown> {
     row: T;
     column: JvGridColumn<T>;
     value: unknown;
@@ -1417,7 +1412,7 @@ interface JvGridColumnFilter {
 }
 declare const JV_GRID_DEFAULT_OPTIONS: JvGridOptions;
 
-declare class JvGridComponent<T = any> {
+declare class JvGridComponent<T = unknown> {
     private readonly gridId;
     protected readonly gridSearchInputId: string;
     private readonly destroyRef;
@@ -1462,7 +1457,7 @@ declare class JvGridComponent<T = any> {
         noResultsMessage?: string;
         searchPlaceholder?: string;
         ariaLabel?: string;
-        trackBy?: _devjuliovilla_jv_ui.JvGridTrackBy<any>;
+        trackBy?: _devjuliovilla_jv_ui.JvGridTrackBy<unknown>;
         serverSide?: boolean;
         totalItems?: number;
         stickyColumns?: boolean;
@@ -1577,7 +1572,7 @@ declare class JvGridComponent<T = any> {
     protected onRowDblClick(row: T): void;
     protected onActionClick(action: JvGridAction<T>, row: T): void;
     protected onColumnFilterChange(col: JvGridColumn<T>, value: string): void;
-    protected getRowLabel(row: T, index: number): string;
+    protected getRowLabel(row: T, _index: number): string;
     protected startEdit(row: T, col: JvGridColumn<T>, event: Event): void;
     protected commitEdit(row: T, col: JvGridColumn<T>, value: unknown): void;
     protected commitEditFromKeyboard(event: Event, row: T, col: JvGridColumn<T>, value: unknown): void;
@@ -1607,6 +1602,7 @@ interface JvPaginationEvent {
     pageSize: number;
 }
 declare class JvPaginationComponent {
+    protected readonly pageSizeInputId: string;
     private readonly translationService;
     readonly totalItems: _angular_core.InputSignal<number>;
     readonly pageSize: _angular_core.InputSignal<number>;