osi-cards-lib 1.5.32 → 1.5.34

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 (87) hide show
  1. package/fesm2022/osi-cards-lib.mjs +31889 -0
  2. package/fesm2022/osi-cards-lib.mjs.map +1 -0
  3. package/index.d.ts +11528 -0
  4. package/package.json +25 -13
  5. package/scripts/setup-angular-styles.js +169 -0
  6. package/styles/_components.scss +38 -0
  7. package/styles/_index.scss +25 -0
  8. package/styles/_osi-cards-mixins.scss +459 -0
  9. package/styles/_osi-cards-tokens.scss +333 -0
  10. package/styles/_styles-scoped.scss +81 -0
  11. package/styles/_styles.scss +26 -0
  12. package/styles/bundles/_ai-card.scss +245 -0
  13. package/styles/bundles/_all.scss +68 -0
  14. package/styles/bundles/_base.scss +60 -0
  15. package/styles/bundles/_card-skeleton.scss +290 -0
  16. package/styles/bundles/_index.scss +25 -0
  17. package/styles/bundles/_sections.scss +48 -0
  18. package/styles/bundles/_tokens-only.scss +139 -0
  19. package/styles/components/_ai-card-renderer.scss +104 -0
  20. package/styles/components/_badges.scss +317 -0
  21. package/styles/components/_card-actions.scss +169 -0
  22. package/styles/components/_card-footer.scss +47 -0
  23. package/styles/components/_component-styles.scss +205 -0
  24. package/styles/components/_empty-state.scss +630 -0
  25. package/styles/components/_hero-card.scss +422 -0
  26. package/styles/components/_image-fallback.scss +28 -0
  27. package/styles/components/_streaming-effects.scss +518 -0
  28. package/styles/components/cards/_ai-card.scss +718 -0
  29. package/styles/components/sections/_all-sections.generated.scss +41 -0
  30. package/styles/components/sections/_all-sections.scss +1086 -0
  31. package/styles/components/sections/_balanced-compact-system.scss +186 -0
  32. package/styles/components/sections/_compact-mixins.scss +180 -0
  33. package/styles/components/sections/_component-mixins.scss +454 -0
  34. package/styles/components/sections/_design-system.scss +477 -0
  35. package/styles/components/sections/_design-tokens.scss +308 -0
  36. package/styles/components/sections/_enhanced-design-variables.scss +147 -0
  37. package/styles/components/sections/_master-compact-system.scss +302 -0
  38. package/styles/components/sections/_master-dense-system.scss +239 -0
  39. package/styles/components/sections/_minimalistic-design.scss +268 -0
  40. package/styles/components/sections/_modern-effects.scss +392 -0
  41. package/styles/components/sections/_modern-sections.scss +351 -0
  42. package/styles/components/sections/_perfect-system.scss +204 -0
  43. package/styles/components/sections/_section-animations.scss +331 -0
  44. package/styles/components/sections/_section-shell.scss +337 -0
  45. package/styles/components/sections/_section-types.generated.scss +30 -0
  46. package/styles/components/sections/_sections-all.scss +26 -0
  47. package/styles/components/sections/_sections-base.scss +334 -0
  48. package/styles/components/sections/_typography-system.scss +327 -0
  49. package/styles/components/sections/_ultra-compact-tokens.scss +375 -0
  50. package/styles/components/sections/_unified-section-style.scss +157 -0
  51. package/styles/components/sections/_utility-classes.scss +567 -0
  52. package/styles/components/sections/_visual-effects-library.scss +374 -0
  53. package/styles/core/_animations.scss +1498 -0
  54. package/styles/core/_bootstrap-reset.scss +445 -0
  55. package/styles/core/_color-helpers.scss +46 -0
  56. package/styles/core/_global-unified.scss +118 -0
  57. package/styles/core/_global.scss +73 -0
  58. package/styles/core/_mixins.scss +491 -0
  59. package/styles/core/_surface-layers.scss +76 -0
  60. package/styles/core/_utilities.scss +326 -0
  61. package/styles/core/_variables-unified.scss +57 -0
  62. package/styles/core/_variables.scss +36 -0
  63. package/styles/core/variables/_colors-source.scss +34 -0
  64. package/styles/core/variables/_colors-unified.scss +26 -0
  65. package/styles/core/variables/_colors.scss +21 -0
  66. package/styles/critical.scss +353 -0
  67. package/styles/design-system/_compact-theme.scss +159 -0
  68. package/styles/design-system/_section-base.scss +426 -0
  69. package/styles/design-system/_tokens.scss +237 -0
  70. package/styles/design-system/_unified-sections.scss +215 -0
  71. package/styles/layout/_feature-grid.scss +322 -0
  72. package/styles/layout/_masonry.scss +734 -0
  73. package/styles/layout/_tilt.scss +244 -0
  74. package/styles/micro-interactions.scss +583 -0
  75. package/styles/mixins/_section-mixins.scss +280 -0
  76. package/styles/non-critical.scss +643 -0
  77. package/styles/reset/_framework-reset.scss +457 -0
  78. package/styles/reset/_index.scss +14 -0
  79. package/styles/reset/_shadow-reset.scss +383 -0
  80. package/styles/responsive.scss +326 -0
  81. package/styles/themes.scss +573 -0
  82. package/styles/tokens/_index.scss +92 -0
  83. package/styles/tokens/_master.scss +1404 -0
  84. package/styles/tokens/_section-tokens.generated.scss +140 -0
  85. package/postcss.config.js +0 -81
  86. package/section-registry.json +0 -3864
  87. package/section-registry.schema.json +0 -264
package/styles/critical.scss ADDED
@@ -0,0 +1,353 @@
1
+ /**
2
+ * OSI Cards - Critical CSS
3
+ *
4
+ * This stylesheet contains above-the-fold critical styles that should be
5
+ * inlined or loaded synchronously for optimal First Contentful Paint (FCP).
6
+ *
7
+ * Include these styles in your HTML <head> for best performance:
8
+ *
9
+ * @example
10
+ * ```html
11
+ * <style>
12
+ * @import 'osi-cards-lib/styles/critical';
13
+ * </style>
14
+ * ```
15
+ *
16
+ * Or inline via build tooling:
17
+ * ```js
18
+ * // In your build config
19
+ * const criticalCSS = require('osi-cards-lib/styles/critical.css');
20
+ * ```
21
+ */
22
+
23
+ // =============================================================================
24
+ // CSS CUSTOM PROPERTIES (CRITICAL)
25
+ // =============================================================================
26
+
27
+ :root {
28
+ // Core colors
29
+ --osi-color-brand: #ff7900;
30
+ --osi-color-brand-rgb: 255, 121, 0;
31
+ --osi-color-brand-dark: #e66a00;
32
+ --osi-color-text: #333333;
33
+ --osi-color-text-secondary: #666666;
34
+ --osi-color-background: #ffffff;
35
+ --osi-color-background-soft: #f8f9fa;
36
+ --osi-color-border: #e9ecef;
37
+
38
+ // Spacing (critical only)
39
+ --osi-spacing-xs: 4px;
40
+ --osi-spacing-sm: 8px;
41
+ --osi-spacing-md: 16px;
42
+ --osi-spacing-lg: 24px;
43
+
44
+ // Typography (critical)
45
+ --osi-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
46
+ --osi-font-size-sm: 0.875rem;
47
+ --osi-font-size-base: 1rem;
48
+ --osi-font-size-lg: 1.125rem;
49
+ --osi-font-size-xl: 1.25rem;
50
+ --osi-font-size-2xl: 1.5rem;
51
+
52
+ // Border radius
53
+ --osi-border-radius-sm: 4px;
54
+ --osi-border-radius-md: 8px;
55
+ --osi-border-radius-lg: 12px;
56
+
57
+ // Shadows (critical only)
58
+ --osi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
59
+ --osi-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
60
+
61
+ // Z-index
62
+ --osi-z-index-card: 1;
63
+ --osi-z-index-dropdown: 100;
64
+ --osi-z-index-modal: 1000;
65
+ }
66
+
67
+ // Dark mode critical variables
68
+ @media (prefers-color-scheme: dark) {
69
+ :root {
70
+ --osi-color-text: #f0f0f0;
71
+ --osi-color-text-secondary: #a0a0a0;
72
+ --osi-color-background: #1a1a1a;
73
+ --osi-color-background-soft: #2a2a2a;
74
+ --osi-color-border: #3a3a3a;
75
+ }
76
+ }
77
+
78
+ // =============================================================================
79
+ // CONTAINER CRITICAL STYLES
80
+ // =============================================================================
81
+
82
+ .osi-cards-container {
83
+ font-family: var(--osi-font-family);
84
+ font-size: var(--osi-font-size-base);
85
+ line-height: 1.5;
86
+ color: var(--osi-color-text);
87
+ -webkit-font-smoothing: antialiased;
88
+ -moz-osx-font-smoothing: grayscale;
89
+ }
90
+
91
+ // =============================================================================
92
+ // CARD CRITICAL STYLES
93
+ // =============================================================================
94
+
95
+ .osi-card {
96
+ position: relative;
97
+ background: var(--osi-color-background);
98
+ border-radius: var(--osi-border-radius-lg);
99
+ box-shadow: var(--osi-shadow-md);
100
+ overflow: hidden;
101
+ }
102
+
103
+ .osi-card-surface {
104
+ position: relative;
105
+ width: 100%;
106
+ height: 100%;
107
+ background: var(--osi-color-background);
108
+ border-radius: inherit;
109
+ overflow: hidden;
110
+ will-change: transform;
111
+ }
112
+
113
+ .osi-card-content {
114
+ padding: var(--osi-spacing-lg);
115
+ }
116
+
117
+ // =============================================================================
118
+ // CARD HEADER CRITICAL STYLES
119
+ // =============================================================================
120
+
121
+ .osi-card-header {
122
+ display: flex;
123
+ align-items: flex-start;
124
+ justify-content: space-between;
125
+ padding: var(--osi-spacing-lg);
126
+ padding-bottom: var(--osi-spacing-md);
127
+ }
128
+
129
+ .osi-card-title {
130
+ margin: 0;
131
+ font-size: var(--osi-font-size-2xl);
132
+ font-weight: 700;
133
+ line-height: 1.2;
134
+ color: var(--osi-color-text);
135
+ }
136
+
137
+ .osi-card-subtitle {
138
+ margin-top: var(--osi-spacing-xs);
139
+ font-size: var(--osi-font-size-sm);
140
+ color: var(--osi-color-text-secondary);
141
+ }
142
+
143
+ // =============================================================================
144
+ // SECTION CRITICAL STYLES
145
+ // =============================================================================
146
+
147
+ .osi-section {
148
+ padding: var(--osi-spacing-md) var(--osi-spacing-lg);
149
+ border-top: 1px solid var(--osi-color-border);
150
+
151
+ &:first-of-type {
152
+ border-top: none;
153
+ }
154
+ }
155
+
156
+ .osi-section-title {
157
+ margin: 0 0 var(--osi-spacing-sm);
158
+ font-size: var(--osi-font-size-lg);
159
+ font-weight: 600;
160
+ color: var(--osi-color-text);
161
+ }
162
+
163
+ .osi-section-content {
164
+ font-size: var(--osi-font-size-base);
165
+ }
166
+
167
+ // =============================================================================
168
+ // FIELD CRITICAL STYLES
169
+ // =============================================================================
170
+
171
+ .osi-field {
172
+ display: flex;
173
+ justify-content: space-between;
174
+ align-items: baseline;
175
+ padding: var(--osi-spacing-sm) 0;
176
+ gap: var(--osi-spacing-md);
177
+ }
178
+
179
+ .osi-field-label {
180
+ font-size: var(--osi-font-size-sm);
181
+ color: var(--osi-color-text-secondary);
182
+ flex-shrink: 0;
183
+ }
184
+
185
+ .osi-field-value {
186
+ font-weight: 500;
187
+ text-align: right;
188
+ word-break: break-word;
189
+ }
190
+
191
+ // =============================================================================
192
+ // ITEM CRITICAL STYLES
193
+ // =============================================================================
194
+
195
+ .osi-item {
196
+ display: flex;
197
+ align-items: flex-start;
198
+ padding: var(--osi-spacing-sm) 0;
199
+ gap: var(--osi-spacing-md);
200
+ }
201
+
202
+ .osi-item-icon {
203
+ flex-shrink: 0;
204
+ width: 24px;
205
+ height: 24px;
206
+ font-size: 20px;
207
+ line-height: 24px;
208
+ text-align: center;
209
+ }
210
+
211
+ .osi-item-content {
212
+ flex: 1;
213
+ min-width: 0;
214
+ }
215
+
216
+ .osi-item-title {
217
+ font-weight: 500;
218
+ margin: 0;
219
+ }
220
+
221
+ .osi-item-description {
222
+ font-size: var(--osi-font-size-sm);
223
+ color: var(--osi-color-text-secondary);
224
+ margin: var(--osi-spacing-xs) 0 0;
225
+ }
226
+
227
+ // =============================================================================
228
+ // ACTION BUTTON CRITICAL STYLES
229
+ // =============================================================================
230
+
231
+ .osi-card-actions {
232
+ display: flex;
233
+ flex-wrap: wrap;
234
+ gap: var(--osi-spacing-sm);
235
+ padding: var(--osi-spacing-md) var(--osi-spacing-lg);
236
+ border-top: 1px solid var(--osi-color-border);
237
+ }
238
+
239
+ .osi-action-button {
240
+ display: inline-flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ gap: var(--osi-spacing-xs);
244
+ padding: var(--osi-spacing-sm) var(--osi-spacing-md);
245
+ font-family: inherit;
246
+ font-size: var(--osi-font-size-sm);
247
+ font-weight: 500;
248
+ text-decoration: none;
249
+ border-radius: var(--osi-border-radius-md);
250
+ cursor: pointer;
251
+ transition: none; // Start with no transition for critical
252
+
253
+ // Primary variant (default)
254
+ &--primary {
255
+ background: var(--osi-color-brand);
256
+ color: white;
257
+ border: none;
258
+ }
259
+
260
+ // Secondary variant
261
+ &--secondary {
262
+ background: var(--osi-color-background-soft);
263
+ color: var(--osi-color-text);
264
+ border: 1px solid var(--osi-color-border);
265
+ }
266
+
267
+ // Outline variant
268
+ &--outline {
269
+ background: transparent;
270
+ color: var(--osi-color-brand);
271
+ border: 1px solid var(--osi-color-brand);
272
+ }
273
+
274
+ // Ghost variant
275
+ &--ghost {
276
+ background: transparent;
277
+ color: var(--osi-color-text-secondary);
278
+ border: none;
279
+ }
280
+ }
281
+
282
+ // =============================================================================
283
+ // SKELETON/LOADING CRITICAL STYLES
284
+ // =============================================================================
285
+
286
+ .osi-skeleton {
287
+ background: var(--osi-color-background-soft);
288
+ border-radius: var(--osi-border-radius-sm);
289
+ // Animation added in non-critical CSS
290
+ }
291
+
292
+ .osi-skeleton-text {
293
+ height: 16px;
294
+ margin-bottom: var(--osi-spacing-sm);
295
+
296
+ &:last-child {
297
+ width: 70%;
298
+ margin-bottom: 0;
299
+ }
300
+ }
301
+
302
+ .osi-skeleton-title {
303
+ height: 24px;
304
+ width: 60%;
305
+ margin-bottom: var(--osi-spacing-md);
306
+ }
307
+
308
+ // =============================================================================
309
+ // FOCUS & ACCESSIBILITY CRITICAL STYLES
310
+ // =============================================================================
311
+
312
+ // Focus visible for keyboard users
313
+ :focus-visible {
314
+ outline: 2px solid var(--osi-color-brand);
315
+ outline-offset: 2px;
316
+ }
317
+
318
+ // Reduced motion support
319
+ @media (prefers-reduced-motion: reduce) {
320
+ *,
321
+ *::before,
322
+ *::after {
323
+ animation-duration: 0.01ms !important;
324
+ animation-iteration-count: 1 !important;
325
+ transition-duration: 0.01ms !important;
326
+ }
327
+ }
328
+
329
+ // =============================================================================
330
+ // UTILITY CLASSES (CRITICAL ONLY)
331
+ // =============================================================================
332
+
333
+ .osi-visually-hidden {
334
+ position: absolute !important;
335
+ width: 1px !important;
336
+ height: 1px !important;
337
+ padding: 0 !important;
338
+ margin: -1px !important;
339
+ overflow: hidden !important;
340
+ clip: rect(0, 0, 0, 0) !important;
341
+ white-space: nowrap !important;
342
+ border: 0 !important;
343
+ }
344
+
345
+ .osi-truncate {
346
+ overflow: hidden;
347
+ text-overflow: ellipsis;
348
+ white-space: nowrap;
349
+ }
350
+
351
+ .osi-sr-only {
352
+ @extend .osi-visually-hidden;
353
+ }
package/styles/design-system/_compact-theme.scss ADDED
@@ -0,0 +1,159 @@
1
+ // =====================================================================
2
+ // COMPACT THEME - Tighter Spacing for Dense Information Display
3
+ // =====================================================================
4
+
5
+ @use "./tokens" as *;
6
+
7
+ // ═══════════════════════════════════════════════════════════════════
8
+ // COMPACT SPACING TOKENS
9
+ // ═══════════════════════════════════════════════════════════════════
10
+
11
+ :root {
12
+ // Compact spacing scale (reduce by ~33%)
13
+ --osi-spacing-compact-xs: 2px;
14
+ --osi-spacing-compact-sm: 6px;
15
+ --osi-spacing-compact-md: 8px;
16
+ --osi-spacing-compact-lg: 10px;
17
+ --osi-spacing-compact-xl: 16px;
18
+
19
+ // Compact section-specific
20
+ --osi-section-header-gap-compact: var(--osi-spacing-compact-sm);
21
+ --osi-section-padding-compact: var(--osi-spacing-compact-md);
22
+ --osi-item-padding-compact: var(--osi-spacing-compact-md);
23
+ --osi-item-gap-compact: var(--osi-spacing-compact-sm);
24
+ --osi-element-gap-compact: var(--osi-spacing-compact-xs);
25
+ }
26
+
27
+ // ═══════════════════════════════════════════════════════════════════
28
+ // COMPACT TYPOGRAPHY (Slightly smaller, tighter)
29
+ // ═══════════════════════════════════════════════════════════════════
30
+
31
+ @mixin compact-section-title {
32
+ font-size: var(--osi-text-base); // 16px (was 18px)
33
+ font-weight: var(--osi-font-bold);
34
+ line-height: var(--osi-leading-tight);
35
+ margin: 0;
36
+ }
37
+
38
+ @mixin compact-section-description {
39
+ font-size: var(--osi-text-sm); // 14px
40
+ font-weight: var(--osi-font-normal);
41
+ line-height: var(--osi-leading-snug);
42
+ margin: 0;
43
+ }
44
+
45
+ @mixin compact-item-title {
46
+ font-size: var(--osi-text-sm); // 14px (was 16px)
47
+ font-weight: var(--osi-font-semibold);
48
+ line-height: var(--osi-leading-snug);
49
+ margin: 0;
50
+ }
51
+
52
+ @mixin compact-item-label {
53
+ font-size: 0.7rem; // 11.2px (was 12px)
54
+ font-weight: var(--osi-font-medium);
55
+ line-height: var(--osi-leading-tight);
56
+ text-transform: uppercase;
57
+ letter-spacing: 0.04em;
58
+ }
59
+
60
+ @mixin compact-item-value {
61
+ font-size: var(--osi-text-sm); // 14px (was 16px)
62
+ font-weight: var(--osi-font-semibold);
63
+ line-height: var(--osi-leading-normal);
64
+ }
65
+
66
+ @mixin compact-number-display {
67
+ font-size: var(--osi-text-xl); // 24px (was 30px)
68
+ font-weight: var(--osi-font-bold);
69
+ line-height: 1;
70
+ letter-spacing: var(--osi-tracking-tight);
71
+ font-variant-numeric: tabular-nums;
72
+ }
73
+
74
+ // ═══════════════════════════════════════════════════════════════════
75
+ // COMPACT CARD & ITEM MIXINS
76
+ // ═══════════════════════════════════════════════════════════════════
77
+
78
+ @mixin compact-card {
79
+ padding: var(--osi-spacing-compact-md);
80
+ border-radius: var(--osi-radius-sm);
81
+ gap: var(--osi-spacing-compact-sm);
82
+ min-height: auto; // Remove fixed heights
83
+ }
84
+
85
+ @mixin compact-item {
86
+ padding: var(--osi-spacing-compact-md);
87
+ gap: var(--osi-spacing-compact-sm);
88
+ }
89
+
90
+ @mixin compact-grid {
91
+ gap: var(--osi-spacing-compact-md);
92
+ }
93
+
94
+ @mixin compact-list {
95
+ gap: var(--osi-spacing-compact-sm);
96
+ padding: var(--osi-spacing-compact-sm);
97
+ }
98
+
99
+ // ═══════════════════════════════════════════════════════════════════
100
+ // APPLY COMPACT THEME
101
+ // ═══════════════════════════════════════════════════════════════════
102
+
103
+ // Apply to host element with [data-compact] attribute
104
+ :host-context([data-compact]),
105
+ :host([data-compact]) {
106
+ // Override spacing tokens
107
+ --osi-section-header-gap: var(--osi-section-header-gap-compact);
108
+ --osi-section-padding: var(--osi-section-padding-compact);
109
+ --osi-item-padding: var(--osi-item-padding-compact);
110
+ --osi-item-gap: var(--osi-item-gap-compact);
111
+ --osi-element-gap: var(--osi-element-gap-compact);
112
+
113
+ // Reduce min-heights
114
+ .metric-card,
115
+ .contact-card,
116
+ .solution-card {
117
+ min-height: auto;
118
+ }
119
+ }
120
+
121
+ // ═══════════════════════════════════════════════════════════════════
122
+ // COMPACT MODIFIER CLASS
123
+ // ═══════════════════════════════════════════════════════════════════
124
+
125
+ .section-compact {
126
+ // Section-level compact mode
127
+ --osi-section-header-gap: var(--osi-section-header-gap-compact);
128
+ --osi-section-padding: var(--osi-section-padding-compact);
129
+ --osi-item-padding: var(--osi-item-padding-compact);
130
+ --osi-item-gap: var(--osi-item-gap-compact);
131
+
132
+ // Typography adjustments
133
+ .section-title,
134
+ h3 {
135
+ font-size: var(--osi-text-base);
136
+ margin-bottom: var(--osi-spacing-compact-xs);
137
+ }
138
+
139
+ .section-description {
140
+ font-size: var(--osi-text-sm);
141
+ line-height: var(--osi-leading-snug);
142
+ }
143
+
144
+ // Card/item adjustments
145
+ .metric-card,
146
+ .contact-card,
147
+ .list-item,
148
+ .info-item {
149
+ padding: var(--osi-spacing-compact-md);
150
+ min-height: auto;
151
+ }
152
+
153
+ // Grid adjustments
154
+ .analytics-grid,
155
+ .contacts-grid,
156
+ .news-grid {
157
+ gap: var(--osi-spacing-compact-md);
158
+ }
159
+ }