osi-cards-lib 1.5.25 → 1.5.27

package/index.d.ts

@@ -4255,7 +4255,7 @@ declare class SectionRendererComponent implements OnChanges {
     protected isLazyLoading: boolean;
     protected lazyLoadError: Error | null;
     protected lazyType: LazySectionType;
-    theme: string;
+    theme?: string;
     ngOnChanges(changes: SimpleChanges): void;
     /**
      * Load the appropriate component for the current section
@@ -11482,10 +11482,10 @@ 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: 2025-12-12T17:56:50.132Z
+ * Last synced: 2025-12-12T18:53:19.261Z
  */
 declare const VERSION = "1.5.19";
-declare const BUILD_DATE = "2025-12-12T17:56:50.132Z";
+declare const BUILD_DATE = "2025-12-12T18:53:19.261Z";
 declare const BUILD_HASH = "fbe56c9";
 declare const BUILD_BRANCH = "main";
 interface VersionInfo {

package/package.json

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

package/styles/bundles/_ai-card.scss

@@ -25,6 +25,7 @@
   // Block display - let content determine height
   display: block;
   width: 100%;
+  min-height: 0; // Allow flex children to shrink
 }
 
 // Primary: Use :host([data-theme]) for explicit Shadow DOM scope (most reliable)
@@ -74,6 +75,9 @@
 @import "../components/cards/ai-card";
 @import "../components/_empty-state";
 
+// 6a. Utility classes (w-full, h-full, flex-1, min-h-0, etc.)
+@import "../components/sections/_utility-classes";
+
 // 7. Section Styles (consolidated)
 // Design system + sections base + section shell + all section types
 @import "../components/sections/sections-all";
@@ -122,6 +126,123 @@
   --leading-loose: 1.75;
 }
 
+// 8. Component-specific optimizations (from demo app)
+// Register CSS custom properties for browser-native interpolation
+@supports (background: paint(id)) {
+  @property --tilt-x {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+  @property --tilt-y {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+  @property --glow-blur {
+    syntax: "<length>";
+    initial-value: 8px;
+    inherits: false;
+  }
+  @property --glow-color {
+    syntax: "<color>";
+    initial-value: rgba(255, 121, 0, 0.225);
+    inherits: false;
+  }
+  @property --reflection-opacity {
+    syntax: "<number>";
+    initial-value: 0;
+    inherits: false;
+  }
+}
+
+// Card container wrapper - CSS containment for performance
+.card-container-wrapper {
+  contain: layout style;
+}
+
+// Tilt container optimizations (additional to _tilt.scss)
+.tilt-container {
+  // Hint to browser about upcoming transform changes
+  will-change: transform;
+  // Force GPU compositing layer
+  transform: translate3d(0, 0, 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
+  transform-style: preserve-3d;
+  // CSS transitions for smooth glow (faster than JS per-frame updates)
+  transition: transform 0.1s ease-out;
+}
+
+// Glow container containment
+.glow-container {
+  contain: layout style;
+  // Simplified box-shadow during idle - JS will add glow dynamically
+  box-shadow: 0 0 var(--glow-blur, 8px) var(--glow-color, rgba(255, 121, 0, 0.225));
+  transition: box-shadow 0.15s ease-out;
+}
+
+// Enhanced glow on hover
+.card-container-wrapper:hover .glow-container {
+  // Enhanced glow on hover - CSS handles transition
+  box-shadow:
+    0 0 var(--glow-blur, 8px) var(--glow-color, rgba(255, 121, 0, 0.225)),
+    0 0 calc(var(--glow-blur, 8px) * 2) rgba(255, 121, 0, calc(var(--reflection-opacity, 0) * 0.5));
+}
+
+// Force border and background on card surface (matching demo app exactly)
+.ai-card-surface {
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  background: rgba(20, 20, 20, 0.6) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2) !important;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.ai-card-surface:hover {
+  border-color: rgba(255, 121, 0, 0.5) !important;
+  background: rgba(30, 30, 30, 0.8) !important;
+  box-shadow:
+    0 20px 40px -5px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 121, 0, 0.2) !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/cards/_ai-card.scss

@@ -19,7 +19,8 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  width: 100%;
+  min-height: 0; // Allow content to determine height
   overflow: visible;
 
   /* CSS Isolation */

package/styles/reset/_shadow-reset.scss

@@ -21,9 +21,13 @@
   all: initial;
 
   // Re-establish essential display properties
-  display: block;
+  display: block !important;
   position: relative;
   box-sizing: border-box;
+  width: 100% !important;
+  min-height: 0; // Allow content to determine height
+  visibility: visible !important;
+  opacity: 1 !important;
 
   // Transparent container with 8px padding (library default)
   // Must be set here immediately after all:initial to ensure application