osi-cards-lib 1.5.40 → 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.
@@ -9411,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>;
 }
@@ -10477,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
      */
@@ -10585,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>;
 }
@@ -10648,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>;
 }
@@ -10678,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>;
 }
@@ -10703,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>;
 }
@@ -10766,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>;
 }
@@ -10809,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.
@@ -10830,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>;
 }
@@ -10860,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>;
 }
@@ -11496,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-15T12:34:41.034Z
+ * Last synced: 2025-12-15T18:48:03.906Z
  */
-declare const VERSION = "1.5.40";
-declare const BUILD_DATE = "2025-12-15T12:34:41.034Z";
-declare const BUILD_HASH = "5e74926";
+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.40",
+  "version": "1.5.41",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",

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

@@ -18,6 +18,8 @@
   --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);
+  width: 100% !important;
+  max-width: 100% !important;
   height: auto !important;
   min-height: 0 !important;
   max-height: none !important;
@@ -342,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;
 }
 
 /* ============================================================