osi-cards-lib 1.5.42 → 1.5.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.5.42",
+  "version": "1.5.43",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",
@@ -38,8 +38,9 @@
     "tslib": "^2.3.0"
   },
   "optionalDependencies": {
-    "chart.js": "^4.4.0",
-    "leaflet": "^1.9.4"
+    "frappe-charts": "^1.7.3",
+    "leaflet": "^1.9.4",
+    "marked": "^17.0.0"
   },
   "exports": {
     "./package.json": {

package/styles/bundles/_ai-card.scss

@@ -170,7 +170,13 @@
 .ai-card-surface {
   // Use theme variables, but ensure they're applied with proper specificity
   // The theme mixins set these, but we need to ensure they're not overridden
-  border: var(--osi-card-border, 1px solid rgba(255, 255, 255, 0.08)) !important;
+  border: var(--osi-card-border, 1px solid rgba(255, 121, 0, 0.2)) !important;
+  @supports (color: color-mix(in srgb, black 50%, white)) {
+    border: var(
+      --osi-card-border,
+      1px solid color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent)
+    ) !important;
+  }
   background: var(--osi-card-background, rgba(20, 20, 20, 0.6)) !important;
   backdrop-filter: var(--osi-card-backdrop-filter, blur(12px)) !important;
   -webkit-backdrop-filter: var(--osi-card-backdrop-filter, blur(12px)) !important;
@@ -179,12 +185,13 @@
 }
 
 .ai-card-surface:hover {
-  border: var(--osi-card-border-hover, 1px solid rgba(255, 121, 0, 0.5)) !important;
+  border: var(--osi-card-border-hover, 1px solid var(--color-brand, #ff7900)) !important;
   background: var(--osi-card-background-hover, rgba(30, 30, 30, 0.8)) !important;
   box-shadow: var(
     --osi-card-shadow-hover,
     0 20px 40px -5px rgba(0, 0, 0, 0.4),
-    0 0 0 1px rgba(255, 121, 0, 0.2)
+    0 0 24px rgba(255, 121, 0, 0.5),
+    0 0 0 1px rgba(255, 121, 0, 0.3)
   ) !important;
 }
 

package/styles/bundles/_card-skeleton.scss

@@ -98,7 +98,7 @@
 }
 
 .skeleton-title {
-  font-size: var(--card-header-title-font-size, 1.25rem);
+  font-size: var(--card-header-title-font-size, 1.125rem);
   font-weight: var(--card-header-title-font-weight, 700);
   color: var(--foreground, #1c1c1f);
   min-height: 2rem;

package/styles/components/_ai-card-renderer.scss

@@ -38,8 +38,6 @@
   gap: var(--spacing-4xl) !important;
 }
 
-/* Overview grid uses compact spacing defined in _overview.scss */
-
 /* Global card styling enforced via variables - remove !important overrides */
 /* All cards now inherit from centralized --card-* variables */
 

package/styles/components/_card-actions.scss

@@ -86,8 +86,7 @@ app-card-actions {
 }
 
 .osi-action-button--primary:focus-visible {
-  outline: var(--border-width-accent-sm) solid var(--color-brand) !important;
-  outline-offset: var(--border-width-accent-sm) !important;
+  outline: none !important;
 }
 
 // Secondary Button - Orange Border (Outline) with WHITE text
@@ -115,8 +114,7 @@ app-card-actions {
 }
 
 .osi-action-button--secondary:focus-visible {
-  outline: var(--border-width-accent-sm) solid var(--color-brand) !important;
-  outline-offset: var(--border-width-accent-sm) !important;
+  outline: none !important;
 }
 
 // Button Content Elements - Always white

package/styles/components/sections/_all-sections.generated.scss

@@ -20,16 +20,13 @@
 @use "../../../components/sections/chart-section/chart-section"; // chart
 @use "../../../components/sections/contact-card-section/contact-card-section"; // contact-card
 @use "../../../components/sections/event-section/event-section"; // event
-@use "../../../components/sections/fallback-section/fallback-section"; // fallback
 @use "../../../components/sections/faq-section/faq-section"; // faq
 @use "../../../components/sections/financials-section/financials-section"; // financials
 @use "../../../components/sections/gallery-section/gallery-section"; // gallery
-@use "../../../components/sections/info-section/info-section"; // info
 @use "../../../components/sections/list-section/list-section"; // list
 @use "../../../components/sections/map-section/map-section"; // map
 @use "../../../components/sections/network-card-section/network-card-section"; // network-card
 @use "../../../components/sections/news-section/news-section"; // news
-@use "../../../components/sections/overview-section/overview-section"; // overview
 @use "../../../components/sections/product-section/product-section"; // product
 @use "../../../components/sections/quotation-section/quotation-section"; // quotation
 @use "../../../components/sections/social-media-section/social-media-section"; // social-media

package/styles/components/sections/_all-sections.scss

@@ -18,8 +18,8 @@
 
 .section-card,
 .unified-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 // =====================================================================
@@ -31,8 +31,8 @@
 }
 
 .analytics-metric {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .analytics-metric__label {
@@ -72,8 +72,8 @@
 }
 
 .financial-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .financial-card__label {
@@ -108,8 +108,8 @@
 }
 
 .overview-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
@@ -135,23 +135,56 @@
 // =====================================================================
 
 .info-matrix {
-  @include stack(var(--gap-xs));
+  @include stack(var(--gap-sm));
+  // Ensure proper spacing and visual separation
+  padding: var(--space-2) 0;
 }
 
 .info-row {
-  @include unified-card;
-  @include stream-animation;
+  // Remove nested card styling - use cleaner, flatter design
+  display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
   gap: var(--space-4);
+  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
+  transition: all 0.2s ease;
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  position: relative;
+
+  // Remove nested white box effect
+  &:last-child {
+    border-bottom: none;
+  }
+
+  // Subtle hover effect
+  &:hover {
+    background: var(--osi-section-item-background-hover, rgba(0, 0, 0, 0.02));
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: 2px solid var(--accent, var(--osi-accent));
+    outline-offset: -2px;
+    border-radius: var(--radius-sm, 4px);
+  }
+
+  @include item-animation;
 }
 
 .info-row__label {
   @include type-label;
   margin-bottom: 0;
-  min-width: 80px;
+  min-width: 100px;
+  font-weight: 600;
+  color: var(--osi-muted-foreground, var(--muted-foreground));
+  font-size: 0.8125rem;
+  letter-spacing: 0.01em;
+  // Remove orange color - use muted foreground for better hierarchy
+  opacity: 0.85;
 }
 
 .info-row__value {
@@ -159,6 +192,12 @@
   text-align: right;
   flex: 1;
   color: var(--foreground);
+  font-weight: 500;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  // Ensure proper text wrapping
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .info-empty {
@@ -174,8 +213,8 @@
 }
 
 .news-item {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .news-item__header {
@@ -219,8 +258,8 @@
 }
 
 .contact-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   flex-direction: row;
   align-items: flex-start;
   gap: var(--space-3);
@@ -283,8 +322,8 @@
 }
 
 .event-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   flex-direction: row;
   align-items: flex-start;
   gap: var(--space-3);
@@ -343,8 +382,8 @@
 }
 
 .quotation-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .quotation-card__icon {
@@ -356,7 +395,6 @@
   font-style: italic;
   line-height: 1.6;
   padding-left: var(--space-3);
-  border-left: 2px solid var(--accent);
   color: var(--foreground);
 }
 
@@ -387,8 +425,8 @@
 }
 
 .reference-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .reference-card__header {
@@ -439,8 +477,8 @@
 }
 
 .network-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .network-card__icon {
@@ -476,8 +514,8 @@
 }
 
 .product-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .product-card__header {
@@ -531,8 +569,8 @@
 }
 
 .solution-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .solution-card__icon {
@@ -597,8 +635,8 @@
 }
 
 .timeline-item {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   position: relative;
 
   &::before {
@@ -642,8 +680,8 @@
 }
 
 .brand-color-tile {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   padding: 0;
   overflow: hidden;
 }
@@ -681,8 +719,8 @@
 }
 
 .social-post {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .social-post__header {
@@ -726,8 +764,8 @@
 }
 
 .gallery-item {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   padding: 0;
   overflow: hidden;
   aspect-ratio: 4/3;
@@ -763,8 +801,8 @@
 }
 
 .video-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   padding: 0;
   overflow: hidden;
 }
@@ -837,7 +875,7 @@
 // =====================================================================
 
 .chart-container {
-  @include unified-card;
+  @include card;
   min-height: 180px;
 
   canvas {
@@ -886,8 +924,8 @@
 }
 
 .list-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   flex-direction: row;
   align-items: center;
   gap: var(--space-3);
@@ -926,7 +964,7 @@
 // =====================================================================
 
 .map-container {
-  @include unified-card;
+  @include card;
   padding: var(--space-5);
   min-height: 120px;
   display: flex;
@@ -942,8 +980,8 @@
 }
 
 .map-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .map-card__icon {
@@ -987,8 +1025,8 @@
 }
 
 .faq-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
 }
 
 .faq-card__question {
@@ -1000,7 +1038,6 @@
   @include type-subtitle;
   margin: 0;
   padding-left: var(--space-3);
-  border-left: 2px solid var(--accent);
   opacity: 0.9;
 }
 
@@ -1017,8 +1054,8 @@
 }
 
 .pricing-card {
-  @include unified-card;
-  @include stream-animation;
+  @include card;
+  @include item-animation;
   text-align: center;
 }
 
@@ -1063,19 +1100,6 @@
   @include empty-state;
 }
 
-// =====================================================================
-// FALLBACK SECTION
-// =====================================================================
-
-.fallback-empty {
-  @include empty-state;
-}
-
-.fallback-message {
-  @include type-subtitle;
-  margin: 0;
-}
-
 // =====================================================================
 // SECTION BODY
 // =====================================================================

package/styles/components/sections/_compact-mixins.scss

@@ -48,21 +48,22 @@
 // COMPACT CARD VARIANTS
 // =====================================================================
 
+// =====================================================================
+// CARD VARIANT: COMPACT
+// =====================================================================
+// Compact spacing variant using standardized tokens
+
 @mixin card-compact {
-  @include base.card;
-  padding: var(--spacing-compact-base) var(--spacing-compact-md);
-  gap: var(--spacing-compact-sm);
-  min-height: var(--section-card-compact-height);
+  @include base.card("compact");
+  // Gap already set by base.card with compact spacing
 }
 
 @mixin card-compact-elevated {
-  @include card-compact;
-  @include effects.elevated-card;
+  @include components.card-elevated("compact");
 }
 
 @mixin card-compact-glass {
-  @include card-compact;
-  @include effects.glass-card;
+  @include components.card-glass("compact");
 }
 
 // =====================================================================

package/styles/components/sections/_component-mixins.scss

@@ -10,30 +10,59 @@
 @use "design-tokens" as *;
 @use "modern-effects" as effects;
 @use "sections-base" as base;
+@use "section-animations" as *;
 
 // =====================================================================
 // ENHANCED CARD VARIANTS
 // =====================================================================
 
-@mixin card-elevated {
-  @include base.card;
-  @include effects.elevated-card;
-  @include effects.shimmer-effect;
+// =====================================================================
+// CARD VARIANT: ELEVATED
+// =====================================================================
+// Extends base card with shadow and lift effects on hover
+// Uses standardized tokens for consistency
+
+@mixin card-elevated($spacing: "normal") {
+  @include base.card($spacing);
+
+  // Enhanced shadow for elevation
+  box-shadow: var(--osi-section-item-shadow);
+  position: relative;
+
+  // Unified hover effect - no transforms for consistency
+  @include section-card-hover;
 }
 
-@mixin card-glass {
+// =====================================================================
+// CARD VARIANT: GLASS
+// =====================================================================
+// Glass morphism effect
+// Uses standardized tokens for consistency
+
+@mixin card-glass($spacing: "normal") {
+  @include base.card($spacing);
   @include effects.glass-card;
-  padding: var(--spacing-base);
-  border-radius: var(--radius-lg);
 }
 
-@mixin card-neumorphic {
+// =====================================================================
+// CARD VARIANT: NEUMORPHIC
+// =====================================================================
+// Soft UI neumorphic effect
+// Uses standardized tokens for consistency
+
+@mixin card-neumorphic($spacing: "normal") {
+  @include base.card($spacing);
   @include effects.neumorphic-card(true);
-  padding: var(--spacing-base);
 }
 
-@mixin card-with-gradient {
-  @include base.card;
+// =====================================================================
+// CARD VARIANT: WITH GRADIENT
+// =====================================================================
+// Card with gradient background and accent
+// Uses standardized tokens for consistency
+
+@mixin card-with-gradient($spacing: "normal") {
+  @include base.card($spacing);
   @include effects.gradient-background;
   @include effects.gradient-accent-top;
 }