osi-cards-lib 1.5.20 → 1.5.21
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.
- package/README.md +20 -1
- package/fesm2022/osi-cards-lib.mjs +4 -4
- package/fesm2022/osi-cards-lib.mjs.map +1 -1
- package/index.d.ts +2 -2
- package/package.json +1 -1
- package/styles/bundles/_ai-card.scss +4 -0
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ A comprehensive Angular library for rendering AI-generated cards with rich secti
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
7
|
- **17+ Section Types** - Info, Analytics, Chart, List, Contact, Network, Map, Event, Product, Solutions, Financials, and more
|
|
8
|
-
- **CSS Encapsulation** - Shadow DOM isolation with
|
|
8
|
+
- **Complete CSS Encapsulation** - Shadow DOM isolation with **all styles and animations** self-contained within each card. Cards look identical in demo and any integration without external style dependencies.
|
|
9
9
|
- **Streaming Support** - Progressive card rendering with LLM-style streaming simulation
|
|
10
10
|
- **Theme System** - Built-in themes (day/night) with full customization via CSS custom properties
|
|
11
11
|
- **Plugin Architecture** - Extend with custom section types
|
|
@@ -13,6 +13,25 @@ A comprehensive Angular library for rendering AI-generated cards with rich secti
|
|
|
13
13
|
- **Performance** - OnPush change detection, virtual scrolling, and optimized rendering
|
|
14
14
|
- **Zero-gap layout utility** - `packWithZeroGapsGuarantee` helper for maximum grid density
|
|
15
15
|
|
|
16
|
+
## Complete Style & Animation Encapsulation
|
|
17
|
+
|
|
18
|
+
**🎯 Cards are fully self-contained!** Each card component uses Shadow DOM encapsulation with **all styles and animations** included within the Shadow DOM boundary. This means:
|
|
19
|
+
|
|
20
|
+
- ✅ **No external style dependencies** - Cards work identically in any application
|
|
21
|
+
- ✅ **All animations included** - Streaming, hover, transitions, and section animations all work out of the box
|
|
22
|
+
- ✅ **Identical appearance everywhere** - Cards look exactly the same in the demo app and any integration
|
|
23
|
+
- ✅ **Complete isolation** - Host app styles cannot affect cards, and card styles cannot leak out
|
|
24
|
+
|
|
25
|
+
The Shadow DOM bundle includes:
|
|
26
|
+
- All core styles (mixins, utilities, surface layers)
|
|
27
|
+
- All animations (keyframes, utility classes, streaming effects)
|
|
28
|
+
- All component styles (masonry grid, section renderer, card actions, etc.)
|
|
29
|
+
- All section styles (all 17+ section types with their animations)
|
|
30
|
+
- Theme support (day/night modes)
|
|
31
|
+
- Accessibility features (reduced motion, high contrast, forced colors)
|
|
32
|
+
|
|
33
|
+
**Result**: When you install `osi-cards-lib` from npm, cards render with the exact same appearance and animations as in the demo app, regardless of your host application's styles.
|
|
34
|
+
|
|
16
35
|
## Installation
|
|
17
36
|
|
|
18
37
|
```bash
|