osi-cards-lib 1.5.39 → 1.5.41

package/index.d.ts

@@ -5936,6 +5936,11 @@ declare class SectionNormalizationService {
      * Actual normalization logic (extracted for caching)
      */
     private performNormalization;
+    /**
+     * Get title from section type (fallback when title is missing)
+     * Converts type like "contact-card" to "Contact Card"
+     */
+    private getTitleFromType;
     /**
      * Get the priority band for a section type
      */
@@ -8913,6 +8918,7 @@ declare class AICardRendererComponent implements OnInit, AfterViewInit, OnDestro
     private readonly magneticTiltService;
     private readonly iconService;
     private readonly sectionNormalizationService;
+    private readonly sectionCompletenessService;
     private readonly http;
     /**
      * Optional LLM API endpoint for fallback card generation.
@@ -9018,6 +9024,14 @@ declare class AICardRendererComponent implements OnInit, AfterViewInit, OnDestro
      * Makes an HTTP POST request to the LLM endpoint with a prompt to generate card data.
      */
     private generateFallbackCard;
+    /**
+     * Get the version string for display in tooltip
+     */
+    get versionString(): string;
+    /**
+     * Handle click on the signature to open OSI Cards website
+     */
+    onSignatureClick(): void;
     /**
      * Validates that animation providers are configured.
      * Warns in development mode if animations are not available.
@@ -9403,6 +9417,18 @@ declare class SectionHeaderComponent {
      * Get the heading tag name based on level
      */
     get headingTag(): string;
+    /**
+     * Track expanded state for description
+     */
+    isDescriptionExpanded: boolean;
+    /**
+     * Toggle expanded state for description
+     */
+    toggleDescriptionExpanded(): void;
+    /**
+     * Check if description is long enough to need expansion
+     */
+    shouldShowExpandButton(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeaderComponent, "lib-section-header", never, { "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "level": { "alias": "level"; "required": false; }; "headerClass": { "alias": "headerClass"; "required": false; }; "titleClass": { "alias": "titleClass"; "required": false; }; "descriptionClass": { "alias": "descriptionClass"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -10469,6 +10495,18 @@ declare class InfoSectionComponent extends BaseSectionComponent implements OnIni
      * Get tagline/description from section or fields
      */
     getTagline(): string | null;
+    /**
+     * Track tagline expansion state
+     */
+    isTaglineExpanded: boolean;
+    /**
+     * Toggle tagline expansion
+     */
+    toggleTaglineExpanded(): void;
+    /**
+     * Check if tagline needs "Show more" button
+     */
+    shouldShowTaglineExpandButton(): boolean;
     /**
      * Get website URL from fields
      */
@@ -10577,6 +10615,14 @@ declare class ListSectionComponent extends BaseSectionComponent implements OnIni
     getPriorityVariant(priority?: string): 'error' | 'warning' | 'success' | 'default';
     toggleExpanded(index: number): void;
     onItemKeydown(event: KeyboardEvent, index: number): void;
+    /**
+     * Check if a description is long enough to need expansion
+     */
+    shouldShowExpandButton(item: any): boolean;
+    /**
+     * Check if an item is expanded
+     */
+    isItemExpanded(index: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ListSectionComponent, "lib-list-section", never, {}, {}, never, never, true, never>;
 }
@@ -10640,6 +10686,22 @@ declare class NetworkCardSectionComponent extends BaseSectionComponent implement
      * Get status class
      */
     getStatusClass(status?: unknown): string;
+    /**
+     * Track expanded state for descriptions
+     */
+    descriptionExpandedStates: boolean[];
+    /**
+     * Toggle description expansion
+     */
+    toggleDescriptionExpanded(index: number): void;
+    /**
+     * Check if description is expanded
+     */
+    isDescriptionExpanded(index: number): boolean;
+    /**
+     * Check if description needs "Show more" button
+     */
+    shouldShowExpandButton(node: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NetworkCardSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NetworkCardSectionComponent, "lib-network-card-section", never, {}, {}, never, never, true, never>;
 }
@@ -10670,6 +10732,22 @@ declare class NewsSectionComponent extends BaseSectionComponent implements OnIni
      * Format date for display
      */
     formatDate(dateStr: any): string;
+    /**
+     * Track expanded state for each article
+     */
+    expandedArticles: Set<number>;
+    /**
+     * Toggle expanded state for an article
+     */
+    toggleExpanded(index: number): void;
+    /**
+     * Check if an article is expanded
+     */
+    isExpanded(index: number): boolean;
+    /**
+     * Check if an excerpt is long enough to need expansion
+     */
+    shouldShowExpandButton(item: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NewsSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NewsSectionComponent, "lib-news-section", never, {}, {}, never, never, true, never>;
 }
@@ -10695,6 +10773,22 @@ declare class OverviewSectionComponent extends BaseSectionComponent implements O
      * Check if field should be highlighted
      */
     isHighlighted(field: any): boolean;
+    /**
+     * Track expanded state for each field
+     */
+    expandedFields: Set<number>;
+    /**
+     * Toggle expanded state for a field
+     */
+    toggleExpanded(index: number): void;
+    /**
+     * Check if a field is expanded
+     */
+    isExpanded(index: number): boolean;
+    /**
+     * Check if a value is long enough to need expansion
+     */
+    shouldShowExpandButton(field: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<OverviewSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OverviewSectionComponent, "lib-overview-section", never, {}, {}, never, never, true, never>;
 }
@@ -10758,6 +10852,14 @@ declare class QuotationSectionComponent extends BaseSectionComponent implements
     getAuthorName(field: any): string;
     toggleExpanded(index: number): void;
     onQuoteKeydown(event: KeyboardEvent, index: number): void;
+    /**
+     * Check if a quote is long enough to need expansion
+     */
+    shouldShowExpandButton(field: any): boolean;
+    /**
+     * Check if a quote is expanded
+     */
+    isQuoteExpanded(index: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuotationSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QuotationSectionComponent, "lib-quotation-section", never, {}, {}, never, never, true, never>;
 }
@@ -10801,6 +10903,7 @@ declare class SocialMediaSectionComponent extends BaseSectionComponent implement
 declare class SolutionsSectionComponent extends BaseSectionComponent implements OnInit {
     private readonly layoutService;
     expandedIndex: number | null;
+    descriptionExpandedStates: boolean[];
     ngOnInit(): void;
     /**
      * Calculate layout preferences for solutions section based on content.
@@ -10822,6 +10925,18 @@ declare class SolutionsSectionComponent extends BaseSectionComponent implements
     toggleExpanded(index: number): void;
     isExpanded(index: number): boolean;
     getVisibleBenefits(benefits: string[] | undefined, index: number): string[];
+    /**
+     * Check if description needs "Show more" button
+     */
+    shouldShowExpandButton(solution: any): boolean;
+    /**
+     * Toggle description expansion
+     */
+    toggleDescriptionExpanded(index: number): void;
+    /**
+     * Check if description is expanded
+     */
+    isDescriptionExpanded(index: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SolutionsSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SolutionsSectionComponent, "lib-solutions-section", never, {}, {}, never, never, true, never>;
 }
@@ -10852,6 +10967,22 @@ declare class TextReferenceSectionComponent extends BaseSectionComponent impleme
      * Get reference content
      */
     getReferenceContent(field: any): string;
+    /**
+     * Track expanded state for each reference item
+     */
+    expandedItems: Set<number>;
+    /**
+     * Toggle expanded state for a reference item
+     */
+    toggleExpanded(index: number): void;
+    /**
+     * Check if a reference item is expanded
+     */
+    isExpanded(index: number): boolean;
+    /**
+     * Check if a reference content is long enough to need expansion
+     */
+    shouldShowExpandButton(field: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextReferenceSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextReferenceSectionComponent, "lib-text-reference-section", never, {}, {}, never, never, true, never>;
 }
@@ -11488,11 +11619,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: 2025-12-15T10:19:22.227Z
+ * Last synced: 2025-12-15T18:48:03.906Z
  */
-declare const VERSION = "1.5.39";
-declare const BUILD_DATE = "2025-12-15T10:19:22.227Z";
-declare const BUILD_HASH = "9010f4a";
+declare const VERSION = "1.5.41";
+declare const BUILD_DATE = "2025-12-15T18:48:03.906Z";
+declare const BUILD_HASH = "6071ff4";
 declare const BUILD_BRANCH = "main";
 interface VersionInfo {
     version: string;

package/package.json

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

package/styles/_styles-scoped.scss

@@ -54,7 +54,7 @@
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    padding: 8px;
+    padding: var(--osi-card-padding, 16px) !important;
     background: transparent !important;
     background-color: transparent !important;
     min-height: 0;
@@ -76,7 +76,7 @@
 
     // Responsive: reduce padding on mobile
     @media (max-width: 480px) {
-      padding: 4px;
+      padding: var(--osi-card-padding-mobile, 4px) !important;
     }
 
     // Bootstrap isolation - must come first to reset external Bootstrap variables

package/styles/components/_component-styles.scss

@@ -203,7 +203,3 @@ app-card-streaming-indicator {
   white-space: nowrap;
   border: 0;
 }
-
-
-
-

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

@@ -20,8 +20,10 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  max-width: 100%;
   min-height: 0; // Allow content to determine height
   overflow: visible;
+  box-sizing: border-box !important;
 
   /* CSS Isolation */
   isolation: isolate;
@@ -49,14 +51,17 @@
   box-shadow: var(--osi-card-shadow) !important;
 
   /* Padding - card-specific spacing */
-  padding: var(--osi-card-padding) !important;
-  padding-bottom: var(--osi-card-padding) !important;
+  padding: var(--osi-card-padding, 16px) !important;
+  padding-top: var(--osi-card-padding, 16px) !important;
+  padding-bottom: var(--osi-card-padding, 16px) !important;
+  padding-left: var(--osi-card-padding, 16px) !important;
+  padding-right: var(--osi-card-padding, 16px) !important;
 
   /* Border radius - card-specific (larger than sections) */
   border-radius: var(--osi-card-border-radius) !important;
 
   /* Gap - specific space between header and sections */
-  gap: var(--osi-card-gap) !important;
+  gap: var(--osi-card-gap, 12px) !important;
   /* ========== END CARD SPECIFIC STYLES ========== */
 
   /* Smooth transitions */
@@ -483,8 +488,10 @@
   margin-bottom: 0 !important;
   display: flex;
   flex-direction: column;
-  gap: var(--osi-card-body-gap); /* Constant gap between sections */
+  gap: var(--osi-card-body-gap, 12px) !important; /* Constant gap between sections */
   min-height: 0;
+  max-width: 100%;
+  box-sizing: border-box !important;
   /* Allow content to flow properly - no overflow clipping */
   overflow: visible;
   /* NO BORDER - completely invisible */

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

@@ -328,4 +328,3 @@
     }
   }
 }
-

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

@@ -10,7 +10,7 @@
   --section-background: var(--osi-section-background);
   --section-background-hover: var(--osi-section-background-hover);
   --section-backdrop-filter: var(--osi-section-backdrop-filter);
-  --section-spacing-bottom: var(--osi-section-spacing-bottom);
+  --section-spacing-bottom: var(--osi-section-spacing-bottom, 12px);
   --section-glow-background: var(--osi-section-glow-background);
   --section-glow-opacity-hover: var(--osi-section-glow-opacity-hover);
   --section-title-underline-length: var(--osi-section-title-underline-length);
@@ -18,8 +18,16 @@
   --section-title-underline-height: var(--osi-section-title-underline-height);
   --section-title-underline-offset: var(--osi-section-title-underline-offset);
   --section-title-hover-color: var(--osi-section-title-hover-color);
-  height: 100% !important;
-  margin-bottom: var(--section-spacing-bottom) !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  margin-bottom: var(--section-spacing-bottom, 12px) !important;
+  margin-top: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  box-sizing: border-box !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 
@@ -38,7 +46,8 @@
   .masonry-item & {
     display: flex !important;
     flex-direction: column !important;
-    gap: var(--osi-section-gap) !important;
+    gap: var(--osi-section-gap, 12px) !important;
+    height: auto !important;
   }
 }
 
@@ -335,3 +344,36 @@
 
 /* Theme system handles all light/dark variations automatically */
 /* All colors adapt through CSS variables defined in tokens/_master.scss */
+
+/* ============================================================
+   GLOBAL SECTION CONTENT WIDTH RULES
+   Ensure all section content expands to use full available width
+   ============================================================ */
+
+.section-content {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important; // Allow shrinking for proper resizing
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* Ensure FAQ section specifically resizes properly */
+.ai-section--faq {
+  min-width: 0 !important; // Override any min-width constraints
+  width: 100% !important;
+  max-width: 100% !important;
+
+  .list {
+    min-width: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .item {
+    min-width: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}

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

@@ -18,6 +18,14 @@
   grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
   min-height: 0;
   box-sizing: border-box;
+  max-width: 100%;
+  overflow-x: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
 
   @media (max-width: 420px) {
     grid-template-columns: 1fr;
@@ -34,10 +42,100 @@
   grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
   min-height: 0;
   box-sizing: border-box;
+  max-width: 100%;
+  overflow-x: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   @media (max-width: $tablet-breakpoint) {
     grid-template-columns: 1fr;
   }
+
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// =====================================================================
+// RESPONSIVE SINGLE COLUMN MIXIN
+// =====================================================================
+
+@mixin responsive-single-column($breakpoint: 600px) {
+  @media (max-width: $breakpoint) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+// =====================================================================
+// TEXT OVERFLOW ELLIPSIS MIXIN
+// =====================================================================
+
+@mixin text-overflow-ellipsis($lines: 1) {
+  @if $lines == unset {
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+// =====================================================================
+// EXPANDABLE TEXT MIXIN
+// =====================================================================
+
+@mixin expandable-text($max-lines: 3) {
+  display: -webkit-box;
+  -webkit-line-clamp: $max-lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  &--expanded {
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
+  }
+}
+
+// =====================================================================
+// BUTTON TEXT MINIMAL MIXIN
+// =====================================================================
+
+@mixin button-text-minimal {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 0.7rem;
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  padding: var(--osi-spacing-compact-xs, 2px) 0;
+  transition: opacity 200ms var(--ease-out);
+
+  &:hover {
+    text-decoration: underline;
+    opacity: 0.8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
 }
 
 // =====================================================================
@@ -59,8 +157,12 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+  max-width: 100%;
   box-sizing: border-box;
   text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   transition:
     background var(--duration-base) var(--ease-out),

package/styles/layout/_masonry.scss

@@ -116,14 +116,17 @@
   height: fit-content;
   min-height: fit-content;
   width: 100%;
+  max-width: 100%;
   break-inside: avoid;
   page-break-inside: avoid;
   display: flex;
   flex-direction: column;
   overflow: visible;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
   box-sizing: border-box;
   overflow-wrap: break-word;
   word-wrap: break-word;
+  word-break: break-word; /* Break long unbreakable strings */
 
   /* Performance optimization: CSS containment */
   contain: layout style paint;
@@ -155,6 +158,11 @@
   height: auto !important;
   min-height: fit-content !important;
   max-height: none !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  overflow-x: hidden !important;
 }
 
 /* ============================================================
@@ -290,7 +298,6 @@
   /* Left accent border removed for consistency */
 }
 
-
 /* Flex grow sections - expand to fill space */
 .masonry-item--flex-grow {
   flex-grow: 1 !important;

package/styles/tokens/_master.scss

@@ -649,11 +649,11 @@ $breakpoints: (
   --osi-card-shadow-fullscreen: none;
 
   // Card Spacing - Padding
-  --osi-card-padding: var(--card-main-padding);
-  --osi-card-padding-top: var(--card-main-padding);
-  --osi-card-padding-bottom: var(--card-main-padding);
-  --osi-card-padding-left: var(--card-main-padding);
-  --osi-card-padding-right: var(--card-main-padding);
+  --osi-card-padding: var(--card-main-padding, 16px);
+  --osi-card-padding-top: var(--card-main-padding, 16px);
+  --osi-card-padding-bottom: var(--card-main-padding, 16px);
+  --osi-card-padding-left: var(--card-main-padding, 16px);
+  --osi-card-padding-right: var(--card-main-padding, 16px);
   --osi-card-padding-mobile: 4px; // Fixed padding - no responsive behavior
 
   // Card Spacing - Margins
@@ -663,9 +663,9 @@ $breakpoints: (
   --osi-card-margin-right: 0;
 
   // Card Spacing - Gaps
-  --osi-card-gap: var(--section-card-gap);
-  --osi-card-body-gap: var(--space-3);
-  --osi-card-grid-gap: var(--section-card-gap);
+  --osi-card-gap: var(--section-card-gap, 12px);
+  --osi-card-body-gap: var(--space-3, 12px);
+  --osi-card-grid-gap: var(--section-card-gap, 12px);
 
   // Card Border Radius
   --osi-card-border-radius: var(--card-border-radius);