osi-cards-lib 1.5.43 → 1.5.45

package/index.d.ts

@@ -10811,7 +10811,7 @@ declare class SocialMediaSectionComponent extends BaseSectionComponent implement
  * Solutions Section Component
  *
  * Displays solution offerings, use cases, and service information.
- * Features: benefits, complexity indicators, delivery timeframes.
+ * Features: benefits, delivery timeframes, expresso links.
  */
 declare class SolutionsSectionComponent extends BaseSectionComponent implements OnInit, AfterViewInit, OnDestroy {
     private readonly layoutService;
@@ -10878,6 +10878,18 @@ declare class SolutionsSectionComponent extends BaseSectionComponent implements
      * Safely converts score to a number and calculates percentage (0-100)
      */
     getScorePercentage(solution: any): number;
+    /**
+     * Handle expresso logo click
+     */
+    onExpressoLogoClick(solution: any): void;
+    /**
+     * Open expresso link in a new tab
+     */
+    openExpressoLink(link: string): void;
+    /**
+     * Get tooltip text for expresso link
+     */
+    getExpressoTooltip(solution: any): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SolutionsSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SolutionsSectionComponent, "lib-solutions-section", never, {}, {}, never, never, true, never>;
 }
@@ -11560,11 +11572,11 @@ declare function packWithZeroGapsGuarantee(sections: CardSection[], columns?: nu
  * Do not edit manually - generated by scripts/generate-version.js
  *
  * Source of truth: version.config.json
- * Last synced: 2026-01-08T09:54:54.239Z
+ * Last synced: 2026-01-08T11:23:10.755Z
  */
-declare const VERSION = "1.5.43";
-declare const BUILD_DATE = "2026-01-08T09:54:54.239Z";
-declare const BUILD_HASH = "8297fa0";
+declare const VERSION = "1.5.45";
+declare const BUILD_DATE = "2026-01-08T11:23:10.755Z";
+declare const BUILD_HASH = "6af2c47";
 declare const BUILD_BRANCH = "main";
 interface VersionInfo {
     version: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.5.43",
+  "version": "1.5.45",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",

package/styles/bundles/_ai-card.scss

@@ -195,43 +195,6 @@
   ) !important;
 }
 
-// Section highlight animation for URL fragment scrolling
-.section-highlight {
-  animation: section-pulse 2s ease-out;
-  position: relative;
-}
-
-.section-highlight::after {
-  content: "";
-  position: absolute;
-  inset: -4px;
-  border: 2px solid rgba(255, 121, 0, 0.6);
-  border-radius: 14px;
-  pointer-events: none;
-  animation: section-border-fade 2s ease-out forwards;
-}
-
-@keyframes section-pulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.01);
-  }
-}
-
-@keyframes section-border-fade {
-  0% {
-    opacity: 1;
-    box-shadow: 0 0 20px rgba(255, 121, 0, 0.4);
-  }
-  100% {
-    opacity: 0;
-    box-shadow: 0 0 0 rgba(255, 121, 0, 0);
-  }
-}
-
 // 10. Action buttons and footer (enforced styles for Shadow DOM)
 @import "../components/card-actions";
 @import "../components/card-footer";

package/styles/components/_streaming-effects.scss

@@ -409,26 +409,6 @@
   font-weight: normal;
 }
 
-/* ===================================================================
-   SECTION HIGHLIGHT EFFECT
-   For URL fragment scrolling and attention
-   =================================================================== */
-
-.section-highlight {
-  animation: sectionPulse 2s ease-out;
-  position: relative;
-}
-
-.section-highlight::after {
-  content: "";
-  position: absolute;
-  inset: -4px;
-  border: 2px solid color-mix(in srgb, var(--color-brand, #ff7900) 60%, transparent);
-  border-radius: var(--card-border-radius, 14px);
-  pointer-events: none;
-  animation: sectionBorderFade 2s ease-out forwards;
-}
-
 /* ===================================================================
    NEW SECTION GLOW EFFECT
    For newly added streaming sections

package/styles/components/sections/_design-system.scss

@@ -559,4 +559,14 @@
   }
 }
 
+// Exception: Overview sections with single-text format (Executive Summary) use 7px spacing
+// This override comes after the general rule to ensure it takes precedence
+.ai-section.ai-section--overview .overview-item--single-text .overview-item__value--single-text br {
+  margin-top: 7px !important; // 7px gap for Executive Summary (reduced from 15px)
+  height: 7px !important;
+  line-height: 1.3 !important;
+  display: block !important;
+  content: "";
+}
+
 // =====================================================================

package/styles/components/sections/_section-shell.scss

@@ -88,7 +88,7 @@
 .ai-section__title {
   @include section-heading-text;
   font-size: var(--osi-section-title-font-size) !important;
-  font-weight: var(--osi-section-title-font-weight) !important;
+  font-weight: 700 !important;
   letter-spacing: var(--osi-section-title-letter-spacing) !important;
   line-height: var(--osi-section-title-line-height) !important;
   color: var(--osi-section-title-color) !important;

package/styles/components/sections/_sections-all.scss

@@ -24,10 +24,3 @@
 // ALL SECTION STYLES (Unified)
 // ============================================================================
 @import "all-sections";
-
-// ============================================================================
-// INDIVIDUAL SECTION COMPONENT STYLES
-// ============================================================================
-// Import individual section component SCSS files
-// These are the styles from each section's component styleUrls
-@import "section-types.generated";

package/styles/components/sections/_sections-base.scss

@@ -149,6 +149,7 @@
 @mixin card($spacing: "normal") {
   // Background & Border - using standardized tokens
   background: var(--osi-section-item-background);
+  // Set border on all sides including top
   border: var(--osi-section-item-border);
   border-radius: var(--osi-section-item-border-radius);
   box-shadow: var(--osi-section-item-shadow);

package/styles/core/_animations.scss

@@ -607,27 +607,6 @@
 }
 
 /* Section pulse - subtle scale pulse for highlighted sections */
-@keyframes sectionPulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.01);
-  }
-}
-
-/* Section border fade - fading border highlight */
-@keyframes sectionBorderFade {
-  0% {
-    opacity: 1;
-    box-shadow: 0 0 20px color-mix(in srgb, var(--color-brand, #ff7900) 40%, transparent);
-  }
-  100% {
-    opacity: 0;
-    box-shadow: 0 0 0 transparent;
-  }
-}
 
 /* New section glow - glow effect for newly added sections */
 @keyframes newSectionGlow {
@@ -1263,16 +1242,6 @@
   animation: waveSlide 2s ease-in-out infinite;
 }
 
-/* Section pulse - highlighted section */
-.animate-section-pulse {
-  animation: sectionPulse 2s ease-out;
-}
-
-/* Section border fade - fading highlight */
-.animate-section-border-fade {
-  animation: sectionBorderFade 2s ease-out forwards;
-}
-
 /* New section glow - streaming new sections */
 .animate-new-section-glow {
   animation: newSectionGlow 0.6s ease-out forwards;
@@ -1371,22 +1340,6 @@
   }
 }
 
-/* Section highlight - URL fragment scroll highlight */
-.section-highlight {
-  animation: sectionPulse 2s ease-out;
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: -4px;
-    border: 2px solid color-mix(in srgb, var(--color-brand, #ff7900) 60%, transparent);
-    border-radius: 14px;
-    pointer-events: none;
-    animation: sectionBorderFade 2s ease-out forwards;
-  }
-}
-
 /* ===================================================================
    PERFORMANCE OPTIMIZATION
    Hardware acceleration hints for smooth animations
@@ -1439,8 +1392,6 @@
   .animate-pulse-ring,
   .animate-text-shimmer,
   .animate-wave-slide,
-  .animate-section-pulse,
-  .animate-section-border-fade,
   .animate-new-section-glow,
   .animate-dot-pulse,
   .animate-ring-expand,
@@ -1458,7 +1409,6 @@
   .animate-bounce,
   .section-streaming,
   .section-streaming-glow,
-  .section-highlight,
   .field-streaming,
   .item-streaming,
   .state-transition-enter,
@@ -1476,7 +1426,6 @@
 
   /* Disable pseudo-element animations */
   .animate-spark-travel::before,
-  .section-highlight::after,
   .btn-ripple::after {
     animation: none !important;
     display: none;

package/styles/tokens/_master.scss

@@ -1234,55 +1234,60 @@ $breakpoints: (
       --theme-ai-card-border: 1px solid
         color-mix(in srgb, var(--color-brand, #{$brand-color}) 20%, transparent);
     }
-    --theme-ai-card-border-hover: 1px solid var(--color-brand, #{$brand-color});
-    --theme-ai-card-background: rgba(255, 255, 255, 0.85);
-    --theme-ai-card-background-hover: rgba(255, 255, 255, 0.92);
-    --theme-ai-card-box-shadow:
-      0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 18px rgba(255, 121, 0, 0.15);
-    --theme-ai-card-box-shadow-hover:
-      0 20px 40px -5px rgba(0, 0, 0, 0.15), 0 0 24px rgba(255, 121, 0, 0.5),
-      0 0 0 1px rgba(255, 121, 0, 0.3);
-    --theme-ai-card-backdrop-filter: blur(12px);
-    --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-    --theme-card-border: 1px solid rgba(0, 0, 0, 0.08);
-    --theme-card-border-hover: var(--color-brand);
-    --theme-card-background: var(--background);
-    --theme-card-background-hover: color-mix(
-      in srgb,
-      var(--background) 98%,
-      var(--surface-contrast-color) 2%
-    );
-    --theme-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    --theme-card-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.07);
-
-    --theme-section-border: 1px solid rgba(0, 0, 0, 0.06);
-    --theme-section-border-hover: 1px solid rgba(255, 121, 0, 0.15);
-    --theme-section-border-hover-enhanced-color: rgba(0, 0, 0, 0.13);
-    --theme-section-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-    --theme-section-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05);
-    --theme-section-shadow-hover-enhanced: var(--shadow-lg), 0 0 16px rgba(59, 130, 246, 0.117);
-    --theme-section-transition:
-      border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-    // Flat backgrounds - no color-mix
-    --section-background: var(--background);
-    --section-background-hover: var(--background);
-    --section-surface: var(--background);
-    --section-surface-hover: var(--background);
+    & {
+      --theme-ai-card-border-hover: 1px solid var(--color-brand, #{$brand-color});
+      --theme-ai-card-background: rgba(255, 255, 255, 0.85);
+      --theme-ai-card-background-hover: rgba(255, 255, 255, 0.92);
+      --theme-ai-card-box-shadow:
+        0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 18px rgba(255, 121, 0, 0.15);
+      --theme-ai-card-box-shadow-hover:
+        0 20px 40px -5px rgba(0, 0, 0, 0.15), 0 0 24px rgba(255, 121, 0, 0.5),
+        0 0 0 1px rgba(255, 121, 0, 0.3);
+      --theme-ai-card-backdrop-filter: blur(12px);
+      --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
 
-    --theme-section-item-border: 1px solid rgba(0, 0, 0, 0.06);
-    --theme-section-item-border-hover: 1px solid rgba(255, 121, 0, 0.15);
-    --theme-section-item-background: var(--background);
-    --theme-section-item-background-hover: var(--background);
-    --theme-section-item-box-shadow: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04));
-    --theme-section-item-box-shadow-hover: var(--shadow-lg, 0 1px 3px rgba(0, 0, 0, 0.05));
-    --theme-section-item-border-hover-enhanced-color: rgba(0, 0, 0, 0.195);
-    --theme-section-item-shadow-hover-enhanced:
-      var(--shadow-lg), 0 0 16px rgba(59, 130, 246, 0.1755);
-    --theme-section-item-hover-transform: none;
-    --theme-section-item-transition:
-      border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    & {
+      --theme-card-border: 1px solid rgba(0, 0, 0, 0.08);
+      --theme-card-border-hover: var(--color-brand);
+      --theme-card-background: var(--background);
+      --theme-card-background-hover: color-mix(
+        in srgb,
+        var(--background) 98%,
+        var(--surface-contrast-color) 2%
+      );
+      --theme-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      --theme-card-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.07);
+
+      --theme-section-border: 1px solid rgba(0, 0, 0, 0.06);
+      --theme-section-border-hover: 1px solid rgba(255, 121, 0, 0.15);
+      --theme-section-border-hover-enhanced-color: rgba(0, 0, 0, 0.13);
+      --theme-section-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+      --theme-section-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05);
+      --theme-section-shadow-hover-enhanced: var(--shadow-lg), 0 0 16px rgba(59, 130, 246, 0.117);
+      --theme-section-transition:
+        border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+      // Flat backgrounds - no color-mix
+      --section-background: var(--background);
+      --section-background-hover: var(--background);
+      --section-surface: var(--background);
+      --section-surface-hover: var(--background);
+
+      --theme-section-item-border: 1px solid rgba(0, 0, 0, 0.06);
+      --theme-section-item-border-hover: 1px solid rgba(255, 121, 0, 0.15);
+      --theme-section-item-background: var(--background);
+      --theme-section-item-background-hover: var(--background);
+      --theme-section-item-box-shadow: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04));
+      --theme-section-item-box-shadow-hover: var(--shadow-lg, 0 1px 3px rgba(0, 0, 0, 0.05));
+      --theme-section-item-border-hover-enhanced-color: rgba(0, 0, 0, 0.195);
+      --theme-section-item-shadow-hover-enhanced:
+        var(--shadow-lg), 0 0 16px rgba(59, 130, 246, 0.1755);
+      --theme-section-item-hover-transform: none;
+      --theme-section-item-transition:
+        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
   }
 }
 
@@ -1320,15 +1325,17 @@ $breakpoints: (
       --theme-ai-card-border: 1px solid
         color-mix(in srgb, var(--color-brand, #{$brand-color}) 20%, transparent);
     }
-    --theme-ai-card-border-hover: 1px solid var(--color-brand, #{$brand-color});
-    --theme-ai-card-background: rgba(20, 20, 20, 0.6);
-    --theme-ai-card-background-hover: rgba(25, 25, 25, 0.7);
-    --theme-ai-card-box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
-    --theme-ai-card-box-shadow-hover:
-      0 12px 32px -4px rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 121, 0, 0.5),
-      0 0 0 1px rgba(255, 121, 0, 0.3);
-    --theme-ai-card-backdrop-filter: blur(12px);
-    --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    & {
+      --theme-ai-card-border-hover: 1px solid var(--color-brand, #{$brand-color});
+      --theme-ai-card-background: rgba(20, 20, 20, 0.6);
+      --theme-ai-card-background-hover: rgba(25, 25, 25, 0.7);
+      --theme-ai-card-box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
+      --theme-ai-card-box-shadow-hover:
+        0 12px 32px -4px rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 121, 0, 0.5),
+        0 0 0 1px rgba(255, 121, 0, 0.3);
+      --theme-ai-card-backdrop-filter: blur(12px);
+      --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
 
     // Card backgrounds (matches preset)
     --theme-card-border: 1px solid rgba(255, 255, 255, 0.08);
@@ -1434,16 +1441,18 @@ $breakpoints: (
       --theme-ai-card-border: 1px solid
         color-mix(in srgb, var(--color-brand, #{$brand-color}) 20%, transparent);
     }
-    --theme-ai-card-border-hover: 1px solid var(--color-brand, #{$brand-color});
-    --theme-ai-card-background: rgba(255, 255, 255, 0.85);
-    --theme-ai-card-background-hover: rgba(255, 255, 255, 0.88);
-    --theme-ai-card-box-shadow:
-      0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 18px rgba(255, 121, 0, 0.15);
-    --theme-ai-card-box-shadow-hover:
-      0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 0 20px rgba(255, 121, 0, 0.45),
-      0 0 0 1px rgba(255, 121, 0, 0.25);
-    --theme-ai-card-backdrop-filter: blur(12px);
-    --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    & {
+      --theme-ai-card-border-hover: 1px solid var(--color-brand, #{$brand-color});
+      --theme-ai-card-background: rgba(255, 255, 255, 0.85);
+      --theme-ai-card-background-hover: rgba(255, 255, 255, 0.88);
+      --theme-ai-card-box-shadow:
+        0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 18px rgba(255, 121, 0, 0.15);
+      --theme-ai-card-box-shadow-hover:
+        0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 0 20px rgba(255, 121, 0, 0.45),
+        0 0 0 1px rgba(255, 121, 0, 0.25);
+      --theme-ai-card-backdrop-filter: blur(12px);
+      --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
 
     // Card backgrounds (matches preset)
     --theme-card-border: 1px solid rgba(0, 0, 0, 0.08);