@devjuliovilla/jv-ui 1.7.1 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +91 -2
  2. package/fesm2022/devjuliovilla-jv-ui.mjs +2520 -876
  3. package/fesm2022/devjuliovilla-jv-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/styles/jv-theme.css +135 -135
  6. package/types/devjuliovilla-jv-ui.d.ts +309 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devjuliovilla/jv-ui",
3
- "version": "1.7.1",
3
+ "version": "1.9.0",
4
4
  "description": "Accessibility-first Angular component library — components, forms, data grids, dialogs, layout, services, and i18n infrastructure built with signals and standalone APIs.",
5
5
  "author": "@devjuliovilla",
6
6
  "license": "MIT",
package/styles/jv-theme.css CHANGED
@@ -1,135 +1,135 @@
1
- :root {
2
- --jv-color-primary: #2563eb;
3
- --jv-color-secondary: #475569;
4
- --jv-color-success: #16a34a;
5
- --jv-color-warning: #d97706;
6
- --jv-color-danger: #dc2626;
7
- --jv-color-info: #0891b2;
8
-
9
- --jv-color-background: #f8fafc;
10
- --jv-color-surface: #ffffff;
11
- --jv-color-surface-muted: #f1f5f9;
12
- --jv-color-border: #dbe3ef;
13
- --jv-color-foreground: #0f172a;
14
- --jv-color-foreground-muted: #475569;
15
-
16
- --jv-spacing-xs: 0.25rem;
17
- --jv-spacing-sm: 0.5rem;
18
- --jv-spacing-md: 1rem;
19
- --jv-spacing-lg: 1.5rem;
20
- --jv-spacing-xl: 2rem;
21
-
22
- --jv-radius-sm: 0.375rem;
23
- --jv-radius-md: 0.75rem;
24
- --jv-radius-lg: 1rem;
25
-
26
- --jv-breakpoint-sm: 640px;
27
- --jv-breakpoint-md: 768px;
28
- --jv-breakpoint-lg: 1024px;
29
- --jv-breakpoint-xl: 1280px;
30
-
31
- --jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
32
- --jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
33
- --jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
34
-
35
- --jv-density-control-height: 2.5rem;
36
- --jv-density-padding-y: 0.75rem;
37
- --jv-density-font-size: 0.95rem;
38
- }
39
-
40
- html[data-theme='dark'] {
41
- --jv-color-background: #020617;
42
- --jv-color-surface: #0f172a;
43
- --jv-color-surface-muted: #111c31;
44
- --jv-color-border: #243244;
45
- --jv-color-foreground: #e2e8f0;
46
- --jv-color-foreground-muted: #94a3b8;
47
- }
48
-
49
- html[data-theme='high-contrast'] {
50
- --jv-color-primary: #00ffff;
51
- --jv-color-secondary: #ffffff;
52
- --jv-color-success: #00ff00;
53
- --jv-color-warning: #ffff00;
54
- --jv-color-danger: #ff4d4d;
55
- --jv-color-info: #00ffff;
56
- --jv-color-background: #000000;
57
- --jv-color-surface: #000000;
58
- --jv-color-surface-muted: #111111;
59
- --jv-color-border: #ffffff;
60
- --jv-color-foreground: #ffffff;
61
- --jv-color-foreground-muted: #f5f5f5;
62
- }
63
-
64
- html[data-density='compact'] {
65
- --jv-density-control-height: 2rem;
66
- --jv-density-padding-y: 0.5rem;
67
- --jv-density-font-size: 0.875rem;
68
- }
69
-
70
- html[data-density='comfortable'] {
71
- --jv-density-control-height: 3rem;
72
- --jv-density-padding-y: 0.95rem;
73
- --jv-density-font-size: 1rem;
74
- }
75
-
76
- html,
77
- body {
78
- min-height: 100%;
79
- }
80
-
81
- body {
82
- margin: 0;
83
- background: var(--jv-color-background);
84
- color: var(--jv-color-foreground);
85
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
86
- font-size: var(--jv-density-font-size);
87
- }
88
-
89
- *,
90
- *::before,
91
- *::after {
92
- box-sizing: border-box;
93
- }
94
-
95
- button,
96
- input,
97
- select,
98
- textarea {
99
- font: inherit;
100
- }
101
-
102
- :focus-visible {
103
- outline: 2px solid var(--jv-color-primary);
104
- outline-offset: 2px;
105
- }
106
-
107
- .sr-only,
108
- .screen-reader-only {
109
- position: absolute;
110
- width: 1px;
111
- height: 1px;
112
- padding: 0;
113
- margin: -1px;
114
- overflow: hidden;
115
- clip: rect(0, 0, 0, 0);
116
- white-space: nowrap;
117
- border: 0;
118
- }
119
-
120
- .jv-icon {
121
- display: inline-block;
122
- vertical-align: middle;
123
- flex: none;
124
- }
125
-
126
- @media (prefers-reduced-motion: reduce) {
127
- *,
128
- *::before,
129
- *::after {
130
- animation-duration: 0.01ms !important;
131
- animation-iteration-count: 1 !important;
132
- scroll-behavior: auto !important;
133
- transition-duration: 0.01ms !important;
134
- }
135
- }
1
+ :root {
2
+ --jv-color-primary: #2563eb;
3
+ --jv-color-secondary: #475569;
4
+ --jv-color-success: #16a34a;
5
+ --jv-color-warning: #d97706;
6
+ --jv-color-danger: #dc2626;
7
+ --jv-color-info: #0891b2;
8
+
9
+ --jv-color-background: #f8fafc;
10
+ --jv-color-surface: #ffffff;
11
+ --jv-color-surface-muted: #f1f5f9;
12
+ --jv-color-border: #dbe3ef;
13
+ --jv-color-foreground: #0f172a;
14
+ --jv-color-foreground-muted: #475569;
15
+
16
+ --jv-spacing-xs: 0.25rem;
17
+ --jv-spacing-sm: 0.5rem;
18
+ --jv-spacing-md: 1rem;
19
+ --jv-spacing-lg: 1.5rem;
20
+ --jv-spacing-xl: 2rem;
21
+
22
+ --jv-radius-sm: 0.375rem;
23
+ --jv-radius-md: 0.75rem;
24
+ --jv-radius-lg: 1rem;
25
+
26
+ --jv-breakpoint-sm: 640px;
27
+ --jv-breakpoint-md: 768px;
28
+ --jv-breakpoint-lg: 1024px;
29
+ --jv-breakpoint-xl: 1280px;
30
+
31
+ --jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
32
+ --jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
33
+ --jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
34
+
35
+ --jv-density-control-height: 2.5rem;
36
+ --jv-density-padding-y: 0.75rem;
37
+ --jv-density-font-size: 0.95rem;
38
+ }
39
+
40
+ html[data-theme='dark'] {
41
+ --jv-color-background: #020617;
42
+ --jv-color-surface: #0f172a;
43
+ --jv-color-surface-muted: #111c31;
44
+ --jv-color-border: #243244;
45
+ --jv-color-foreground: #e2e8f0;
46
+ --jv-color-foreground-muted: #94a3b8;
47
+ }
48
+
49
+ html[data-theme='high-contrast'] {
50
+ --jv-color-primary: #00ffff;
51
+ --jv-color-secondary: #ffffff;
52
+ --jv-color-success: #00ff00;
53
+ --jv-color-warning: #ffff00;
54
+ --jv-color-danger: #ff4d4d;
55
+ --jv-color-info: #00ffff;
56
+ --jv-color-background: #000000;
57
+ --jv-color-surface: #000000;
58
+ --jv-color-surface-muted: #111111;
59
+ --jv-color-border: #ffffff;
60
+ --jv-color-foreground: #ffffff;
61
+ --jv-color-foreground-muted: #f5f5f5;
62
+ }
63
+
64
+ html[data-density='compact'] {
65
+ --jv-density-control-height: 2rem;
66
+ --jv-density-padding-y: 0.5rem;
67
+ --jv-density-font-size: 0.875rem;
68
+ }
69
+
70
+ html[data-density='comfortable'] {
71
+ --jv-density-control-height: 3rem;
72
+ --jv-density-padding-y: 0.95rem;
73
+ --jv-density-font-size: 1rem;
74
+ }
75
+
76
+ html,
77
+ body {
78
+ min-height: 100%;
79
+ }
80
+
81
+ body {
82
+ margin: 0;
83
+ background: var(--jv-color-background);
84
+ color: var(--jv-color-foreground);
85
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
86
+ font-size: var(--jv-density-font-size);
87
+ }
88
+
89
+ *,
90
+ *::before,
91
+ *::after {
92
+ box-sizing: border-box;
93
+ }
94
+
95
+ button,
96
+ input,
97
+ select,
98
+ textarea {
99
+ font: inherit;
100
+ }
101
+
102
+ :focus-visible {
103
+ outline: 2px solid var(--jv-color-primary);
104
+ outline-offset: 2px;
105
+ }
106
+
107
+ .sr-only,
108
+ .screen-reader-only {
109
+ position: absolute;
110
+ width: 1px;
111
+ height: 1px;
112
+ padding: 0;
113
+ margin: -1px;
114
+ overflow: hidden;
115
+ clip: rect(0, 0, 0, 0);
116
+ white-space: nowrap;
117
+ border: 0;
118
+ }
119
+
120
+ .jv-icon {
121
+ display: inline-block;
122
+ vertical-align: middle;
123
+ flex: none;
124
+ }
125
+
126
+ @media (prefers-reduced-motion: reduce) {
127
+ *,
128
+ *::before,
129
+ *::after {
130
+ animation-duration: 0.01ms !important;
131
+ animation-iteration-count: 1 !important;
132
+ scroll-behavior: auto !important;
133
+ transition-duration: 0.01ms !important;
134
+ }
135
+ }