osi-cards-lib 1.5.40 → 1.5.42

package/index.d.ts

@@ -268,11 +268,11 @@ declare const isItemId: typeof isValidItemId;
 /**
  * All valid section type identifiers
  */
-type SectionType$1 = 'analytics' | 'brand-colors' | 'chart' | 'contact-card' | 'event' | 'fallback' | 'faq' | 'financials' | 'gallery' | 'info' | 'list' | 'map' | 'network-card' | 'news' | 'overview' | 'product' | 'quotation' | 'social-media' | 'solutions' | 'text-reference' | 'timeline' | 'video';
+type SectionType$1 = 'analytics' | 'brand-colors' | 'chart' | 'contact-card' | 'event' | 'fallback' | 'faq' | 'financials' | 'gallery' | 'info' | 'list' | 'map' | 'network-card' | 'news' | 'overview' | 'product' | 'quotation' | 'social-media' | 'solutions' | 'table' | 'text-reference' | 'timeline' | 'video';
 /**
  * Section type aliases (alternative names that resolve to canonical types)
  */
-type SectionTypeAlias = 'metrics' | 'stats' | 'kpi' | 'brands' | 'colors' | 'palette' | 'graph' | 'visualization' | 'calendar' | 'schedule' | 'questions' | 'help' | 'photos' | 'images' | 'table' | 'checklist' | 'locations' | 'press' | 'articles' | 'summary' | 'executive' | 'quote' | 'testimonial' | 'social' | 'socials' | 'services' | 'offerings' | 'reference' | 'text-ref' | 'documentation' | 'history' | 'milestones' | 'videos' | 'media';
+type SectionTypeAlias = 'metrics' | 'stats' | 'kpi' | 'brands' | 'colors' | 'palette' | 'graph' | 'visualization' | 'calendar' | 'schedule' | 'questions' | 'help' | 'photos' | 'images' | 'checklist' | 'data-table' | 'grid' | 'locations' | 'press' | 'articles' | 'summary' | 'executive' | 'quote' | 'testimonial' | 'social' | 'socials' | 'services' | 'offerings' | 'reference' | 'text-ref' | 'documentation' | 'history' | 'milestones' | 'videos' | 'media';
 /**
  * All accepted section type values (canonical + aliases)
  */
@@ -329,6 +329,29 @@ type CardType = 'all' | 'company' | 'contact' | 'opportunity' | 'product' | 'ana
  */
 type LayoutPriority = 1 | 2 | 3;
 
+/**
+ * Table column definition
+ */
+interface TableColumn {
+    key: string;
+    label: string;
+    type?: 'string' | 'number' | 'date' | 'boolean';
+    sortable?: boolean;
+    width?: string;
+}
+/**
+ * Table row data (key-value pairs matching column keys)
+ */
+interface TableRow {
+    [key: string]: string | number | boolean | Date | null | undefined;
+}
+/**
+ * Table data structure for table sections
+ */
+interface TableData {
+    columns: TableColumn[];
+    rows: TableRow[];
+}
 interface AICardConfig {
     id?: string | undefined;
     cardTitle: string;
@@ -432,6 +455,7 @@ interface CardSection {
             borderWidth?: number;
         }[];
     };
+    tableData?: TableData;
     meta?: Record<string, unknown>;
     [key: string]: unknown;
 }
@@ -1587,7 +1611,7 @@ declare class ActionFactory {
 /**
  * Section types supported by the library
  */
-type SectionType = 'analytics' | 'brand-colors' | 'chart' | 'contact-card' | 'event' | 'fallback' | 'financials' | 'info' | 'list' | 'map' | 'network-card' | 'news' | 'overview' | 'product' | 'quotation' | 'social-media' | 'solutions' | 'text-reference';
+type SectionType = 'analytics' | 'brand-colors' | 'chart' | 'contact-card' | 'event' | 'fallback' | 'financials' | 'info' | 'list' | 'map' | 'network-card' | 'news' | 'overview' | 'product' | 'quotation' | 'social-media' | 'solutions' | 'table' | 'text-reference';
 /**
  * Section metadata
  */
@@ -1900,6 +1924,17 @@ interface ListSection extends BaseSectionProps {
     /** List style */
     listStyle?: 'bullet' | 'numbered' | 'none';
 }
+/**
+ * Table Section - displays structured tabular data
+ */
+interface TableSection extends BaseSectionProps {
+    type: 'table';
+    tableData: TableData;
+    fields?: never;
+    items?: never;
+    chartData?: never;
+    chartType?: never;
+}
 /**
  * Network Card Section - displays network connections
  */
@@ -2062,7 +2097,7 @@ interface FallbackSection extends BaseSectionProps {
  * Use this type when you need exhaustive type checking for section handling.
  * TypeScript will ensure all section types are handled in switch statements.
  */
-type DiscriminatedSection = InfoSection | AnalyticsSection | ContactCardSection | NetworkCardSection | MapSection | FinancialsSection | EventSection | ListSection | ChartSection | ProductSection | SolutionsSection | OverviewSection | QuotationSection | TextReferenceSection | BrandColorsSection | NewsSection | SocialMediaSection | TimelineSection | GallerySection | FaqSection | VideoSection | FallbackSection;
+type DiscriminatedSection = InfoSection | AnalyticsSection | ContactCardSection | NetworkCardSection | MapSection | FinancialsSection | EventSection | ListSection | TableSection | ChartSection | ProductSection | SolutionsSection | OverviewSection | QuotationSection | TextReferenceSection | BrandColorsSection | NewsSection | SocialMediaSection | TimelineSection | GallerySection | FaqSection | VideoSection | FallbackSection;
 /**
  * Type guard for Info Section
  */
@@ -2179,6 +2214,7 @@ type SectionTypeMap = {
     financials: FinancialsSection;
     event: EventSection;
     list: ListSection;
+    table: TableSection;
     chart: ChartSection;
     product: ProductSection;
     solutions: SolutionsSection;
@@ -3524,6 +3560,7 @@ interface SectionManifestEntry {
         usesFields: boolean;
         usesItems: boolean;
         usesChartData?: boolean;
+        usesTableData?: boolean;
         defaultColumns: number;
         supportsCollapse: boolean;
         requiresExternalLib?: string;
@@ -5936,6 +5973,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
      */
@@ -8666,6 +8708,7 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
     private resizeObserver?;
     private resizeThrottleTimeout?;
     private lastWidth;
+    private lastContainerWidth;
     private layoutVersion;
     private itemResizeObservers;
     private absolutePositionUpdateRafId;
@@ -8675,6 +8718,9 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
     private readonly HEIGHT_THRESHOLD;
     private initialLayoutPollingTimeout?;
     private itemElements;
+    private cachedPadding;
+    private isFirstCalculation;
+    private isFirstPositioning;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -8710,7 +8756,22 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
      */
     private determineLayoutVariant;
     private applyLayout;
+    /**
+     * Validate layout prerequisites (padding and gap) before calculations
+     * Returns validation status and values
+     */
+    private validateLayoutPrerequisites;
+    /**
+     * Get container padding with fallback to CSS variable if computed style returns 0
+     * Reads padding from parent .ai-card-surface element (not from masonry container)
+     * Caches padding value to avoid repeated calculations
+     */
     private getContainerPadding;
+    /**
+     * Read padding value from CSS variable --osi-card-padding
+     * Handles various formats: "16px", "var(--other-var)", etc.
+     */
+    private getPaddingFromCSSVariable;
     private setupResizeObserver;
     trackBySection: (index: number, item: SectionWithSpan) => string;
     onSectionEvent(event: SectionRenderEvent): void;
@@ -8750,6 +8811,7 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
     /**
      * Ensure initial layout is calculated with retry mechanism if width is invalid
      * Simplified: Single RAF + one timeout retry
+     * Also validates padding before layout calculation
      */
     private ensureInitialLayout;
     static ɵfac: i0.ɵɵFactoryDeclaration<MasonryGridComponent, never>;
@@ -8913,6 +8975,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 +9474,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>;
 }
@@ -10166,17 +10241,39 @@ declare class BrandColorsSectionComponent extends BaseSectionComponent implement
  *
  * Note: Requires Chart.js to be installed.
  */
-declare class ChartSectionComponent extends BaseSectionComponent implements AfterViewInit, OnDestroy, OnInit {
+declare class ChartSectionComponent extends BaseSectionComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges {
     private readonly layoutService;
     ngOnInit(): void;
     chartCanvas?: ElementRef<HTMLCanvasElement>;
     private chartInstance;
+    protected chartLibraryLoaded: boolean;
+    protected chartError: string | null;
+    private previousChartType;
+    private previousChartDataHash;
+    private isRendering;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     /**
      * Render chart using Chart.js (if available)
      */
     private renderChart;
+    /**
+     * Update existing chart with new data
+     */
+    private updateChart;
+    /**
+     * Detect if chart data contains revenue/monetary values
+     */
+    private detectRevenueData;
+    /**
+     * Get chart options with enhanced configuration
+     */
+    private getChartOptions;
+    /**
+     * Format value as currency
+     */
+    private formatCurrency;
     /**
      * Destroy chart instance
      */
@@ -10477,6 +10574,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 +10694,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 +10765,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 +10811,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 +10852,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 +10931,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 +10982,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 +11004,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 +11046,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 +11698,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-15T21:37:02.720Z
  */
-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.42";
+declare const BUILD_DATE = "2025-12-15T21:37:02.720Z";
+declare const BUILD_HASH = "afbe823";
 declare const BUILD_BRANCH = "main";
 interface VersionInfo {
     version: string;
@@ -11533,4 +11735,4 @@ declare function isProductionBuild(): boolean;
 declare function isPrerelease(): boolean;
 
 export { AICardRendererComponent, ALL_SECTION_TYPES, ANIMATION_PRESETS, ANIMATION_TIMING, AccessibilityService, ActionFactory, AnalyticsSectionComponent, AutoUnsubscribe, BORDER_RADIUS, BREAKPOINTS, BUILD_BRANCH, BUILD_DATE, BUILD_HASH, BadgeComponent, BaseSectionComponent, BrandColorsSectionComponent, BrandedIds, CARD_SIZES, CARD_SPACING, COLUMNS_BY_BREAKPOINT, CONTAINER_CONFIG, CSS_ISOLATION_MODE, CachedSectionNormalizationService, CardActionsComponent, CardBodyComponent, CardFacadeService, CardFactory, CardFooterComponent, CardHeaderComponent, CardPreviewComponent, CardSectionListComponent, CardSkeletonComponent, CardStreamingIndicatorComponent, CardTypeGuards, CardUtil, ChartSectionComponent, ContactCardSectionComponent, CopyToClipboardDirective, DECORATED_SECTION_COMPONENTS, DEFAULT_ACCESSIBILITY_CONFIG, DEFAULT_ANIMATION_CONFIG, DEFAULT_CSS_ISOLATION_MODE, DEFAULT_ERROR_CONFIG, DEFAULT_GRID_CONFIG, DEFAULT_LAYOUT_CONFIG, DEFAULT_LOADING_MESSAGES, DEFAULT_LOGGING_CONFIG, DEFAULT_OSI_CARDS_FULL_CONFIG, DEFAULT_OSI_THEME_CONFIG, DEFAULT_STREAMING_CONFIG, DEFAULT_THEME, DEFAULT_THEME_CONFIG, DynamicSectionLoaderService, EASING, EMPTY_STATE_CONFIG, EmailHandlerService, EmptyStateComponent, ErrorBoundaryComponent, ErrorTrackingService, EventBusService, EventMiddlewareService, EventSectionComponent, FEATURE_FLAG_META, FeatureFlagsService, FieldFactory, FinancialsSectionComponent, FlipAnimator, GRID_CONFIG, I18nService, ICON_SIZE, IconService, InfoSectionComponent, ItemFactory, KeyboardShortcutsService, LayoutCalculationService, LayoutError, LayoutStateManager, LayoutWorkerService, LazyRenderDirective, ListSectionComponent, LogValidationErrors, LoggerService, LucideIconsModule, MANIFEST_META, MASONRY_CONFIG, MagneticTiltService, MapSectionComponent, MasonryGridComponent, Memoize, MemoizeLRU, MemoizeTTL, NetworkCardSectionComponent, NewsSectionComponent, OSICardsError, OSICardsStreamingService, OSI_ACCESSIBILITY_CONFIG, OSI_ANIMATION_CONFIG, ICONS as OSI_CARDS_ICONS, OSI_CUSTOM_SECTIONS, OSI_ERROR_CONFIG, OSI_EVENTS, OSI_FEATURE_FLAGS, OSI_FULL_CONFIG, OSI_LAYOUT_CONFIG, OSI_LOGGING_CONFIG, OSI_STREAMING_CONFIG, OSI_THEME_CONFIG, OSI_THEME_CONFIG_TOKEN, ObjectPool, OsiCardsComponent, OsiCardsContainerComponent, OsiThemeDirective, OverviewSectionComponent, PARTICLE_CONFIG, PLACEHOLDER_TEXT, PUBLIC_SECTION_TYPES, PerfectBinPacker, PluginRegistrationError, PresetFactory, ProductSectionComponent, ProgressBarComponent, QuotationSectionComponent, RequiredFieldError, SCOPED_ANIMATION_SERVICE, SCOPED_SELECTION_SERVICE, SCOPED_STATE_SERVICE, SECTION_MANIFEST, SECTION_METADATA, SECTION_TYPE_ALIASES, SHADOWS, SKELETON_CONFIG, SPACING, STAGGER_DELAYS, STREAMING_CONFIG, STREAMING_PROGRESS, STREAMING_STAGES, ScopedAnimationService, ScopedSelectionService, ScopedStateService, SectionComponent, SectionFactory$1 as SectionConfigFactory, SectionDesignDirective, SectionFactory, SectionHeaderComponent, SectionNormalizationService, SectionPluginRegistry, SectionRenderError, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, StreamingError, StreamingParseError, StreamingTimeoutError, SubscriptionTracker, TILT_CONFIG, TextReferenceSectionComponent, ThemeService, ToastService, TooltipDirective, TrendIndicatorComponent, UnknownSectionTypeError, VERSION, VERSION_INFO, ValidationError, WorkerError, Z_INDEX, assertNever, calculateChunkDelay, calculateColumnWidth, calculateColumns, createActionClickEvent, createActionId, createAnalyticsDashboard, createAnalyticsPreset, createCardId, createCardInteractionEvent, createCompanyCard, createCompanyPreset, createContactCard, createContactPreset, createEmail, createEnhancedCompanyCard, createFieldClickEvent, createFieldId, createFlipList, createHexColor, createItemClickEvent, createItemId, createLogger, createMilliseconds, createPercentage, createPixels, createPluginId, createSafeAsyncFunction, createSafeFunction, createSectionId, createSectionRenderedEvent, createStreamingStateEvent, createThemeChangeEvent, createUrl, debounce, generateActionId, generateCardId, generateFieldId, generateItemId, generateSectionId, generateStreamingId, getAnimationTiming, getBuildInfo, getColumnsForBreakpoint, getCurrentBreakpoint, getEasing, getManifestEntry, getPreferredColumns, getPublicSectionTypes, getRandomLoadingMessage, getRegisteredComponent, getRegisteredSectionComponents, getRegisteredSectionTypes, getSectionMetadata, getSectionsRequiringExternalLibs, getShortVersion, getUserMessage, getVersionString, hasChartData, hasFields, hasItems, hasRegisteredComponent, isAnalyticsSection, isBrandColorsSection, isCardId, isChartSection, isContactCardSection, isDesktopViewport, isEventSection, isFallbackSection, isFieldId, isFinancialsSection, isInfoSection, isItemId, isListSection, isMapSection, isMobileViewport, isNetworkCardSection, isNewsSection, isOSIActionClickEvent, isOSICardInteractionEvent, isOSICardsError, isOSIFieldClickEvent, isOSIItemClickEvent, isOverviewSection, isPrerelease, isProductSection, isProductionBuild, isQuotationSection, isSectionId, isSocialMediaSection, isSolutionsSection, isStreamingPlaceholder, isTabletViewport, isTextReferenceSection, isValidCardId, isValidEmail, isValidFieldId, isValidHexColor, isValidItemId, isValidPercentage, isValidSectionId, isValidSectionType, isValidUrl, packWithZeroGapsGuarantee, prefersReducedMotion, provideLucideIcons, provideOSICardsTheme, provideOsiCards, provideOsiCardsAdvanced, provideOsiCardsCore, provideOsiCardsMinimal, provideOsiCardsTesting, provideScopedAnimationService, provideScopedSelectionService, provideScopedStateService, recordPositions, resolveColumnSpan, resolveSectionType, throttle, tryCatch, useErrorBoundary, validateField, validateSection, wrapError };
-export type { AICardConfig, ActionClickEventDetail, ActionId, AgentActionEvent, AnalyticsDashboardOptions, AnalyticsSection, AnimationItemState, AnimationState, AnimationTrigger, AsyncTransformer, BadgeSize, BadgeVariant, BaseSectionProps, BrandColorsSection, Breakpoint, CSSIsolationMode, Capitalize, CardAction, CardActionVariant, CardBuilder, CardBusEvent, CardChangeType, CardEvent$1 as CardEvent, CardField, CardId, CardInteractionEventDetail, CardItem, CardSection, CardUpdate, CardUpdatePayload, ChartData, ChartSection, ChartType, ColorSchemePreference, CompanyCardOptions, ComplexityLevel, ContactCardOptions, ContactCardSection, DeepMutable, DeepPartial, DeepReadonly, DeepRequired, Discriminant, DiscriminatedSection, Email, EmailConfig$1 as EmailConfig, EmailContact, ErrorBoundaryOptions, ErrorBoundaryState, ErrorSeverity, EventFilter, EventHandler, EventMiddleware, EventSection, EventTransformer, ExcludeByType, Extend, ExtractSectionType, FallbackSection, FaqSection, FeatureFlagKey, FeatureFlagsConfig, FieldClickEventDetail, FieldFormat, FieldId, FieldPriority, FieldStatus, FieldUpdatePayload, FieldValue, FilterByType, FinancialsSection, FlipConfig, FlipState, GallerySection, GetDiscriminatedSection, GridConfig, Head, HexColor, IdentifiedCard, IdentifiedField, IdentifiedItem, IdentifiedSection, ImmutableCardConfig, ImmutableSection, InfoSection, ItemClickEventDetail, ItemId, KebabCase, KeyboardShortcut, KeysOfType, Last, LayoutConfig, LayoutLogEntry, LayoutPhase, LayoutResult, LayoutState, LayoutStatistics, LazyRenderOptions, ListSection, LogEntry, LogLevel, MailCardAction, MapSection, MasonryLayoutInfo, Maybe, Merge, Milliseconds, MinimalCardConfig, MousePosition, NetworkCardSection, NewCardConfig, NewsSection, Nullable, OSIAccessibilityConfig, OSIActionClickEvent, OSIAnimationConfig, OSICardInteractionEvent, OSICardsFullConfig, OSICardsThemeConfig, OSIErrorConfig, OSIEventDetail, OSIEventName, OSIFieldClickEvent, OSIItemClickEvent, OSILayoutConfig, OSILoggingConfig, OSISectionRegistration, OSISectionRenderedEvent, OSIStreamingConfig, OSIStreamingStateEvent, OSIThemeChangeEvent, OSIThemeConfig, OmitByType, Optional, OptionalFields, OsiCardsConfig, OverviewSection, PackingAlgorithm, Parameters$1 as Parameters, Percentage, PerformanceLevel, PickByType, PickDefined, Pixels, PluginId, Position, PositionedSection, PreferredColumns$2 as PreferredColumns, PrefixKeys, PriorityBand$1 as PriorityBand, ProductSection, ProgressBarVariant, QuestionActionEvent, QuotationSection, RegisteredSectionPlugin, Replace, RequiredFields, ReturnType$1 as ReturnType, SectionBuilder, SectionComponentOptions, SectionFields, SectionId, SectionItems, SectionManifestEntry, SectionMetadata, SectionOf, SectionOrientation, SectionPlugin, SectionPluginConfig, SectionPluginMetadata, SectionRenderEvent, SectionRenderedEventDetail, SectionType, SectionTypeAlias, SectionTypeInput, SectionTypeMap, SectionTypeOf, SectionUpdatePayload, SkeletonSection, SkeletonSectionType, SocialMediaSection, SolutionsSection, StateSnapshot, StreamingConfig, StreamingState, StreamingStateEventDetail, SuffixKeys, SupportedLocale, Tail, TextReferenceSection, ThemeChangeEventDetail, ThemeId, ThemeMode, ThemePreset, ThemeServiceConfig, TiltCalculations, TimelineSection, Toast, TrackedError, Transformer, TrendDirection, Tuple, TypedEvent, Uncapitalize, Url, ValidationResult$1 as ValidationResult, ValidationSchema, Validator, VersionInfo, VideoSection };
+export type { AICardConfig, ActionClickEventDetail, ActionId, AgentActionEvent, AnalyticsDashboardOptions, AnalyticsSection, AnimationItemState, AnimationState, AnimationTrigger, AsyncTransformer, BadgeSize, BadgeVariant, BaseSectionProps, BrandColorsSection, Breakpoint, CSSIsolationMode, Capitalize, CardAction, CardActionVariant, CardBuilder, CardBusEvent, CardChangeType, CardEvent$1 as CardEvent, CardField, CardId, CardInteractionEventDetail, CardItem, CardSection, CardUpdate, CardUpdatePayload, ChartData, ChartSection, ChartType, ColorSchemePreference, CompanyCardOptions, ComplexityLevel, ContactCardOptions, ContactCardSection, DeepMutable, DeepPartial, DeepReadonly, DeepRequired, Discriminant, DiscriminatedSection, Email, EmailConfig$1 as EmailConfig, EmailContact, ErrorBoundaryOptions, ErrorBoundaryState, ErrorSeverity, EventFilter, EventHandler, EventMiddleware, EventSection, EventTransformer, ExcludeByType, Extend, ExtractSectionType, FallbackSection, FaqSection, FeatureFlagKey, FeatureFlagsConfig, FieldClickEventDetail, FieldFormat, FieldId, FieldPriority, FieldStatus, FieldUpdatePayload, FieldValue, FilterByType, FinancialsSection, FlipConfig, FlipState, GallerySection, GetDiscriminatedSection, GridConfig, Head, HexColor, IdentifiedCard, IdentifiedField, IdentifiedItem, IdentifiedSection, ImmutableCardConfig, ImmutableSection, InfoSection, ItemClickEventDetail, ItemId, KebabCase, KeyboardShortcut, KeysOfType, Last, LayoutConfig, LayoutLogEntry, LayoutPhase, LayoutResult, LayoutState, LayoutStatistics, LazyRenderOptions, ListSection, LogEntry, LogLevel, MailCardAction, MapSection, MasonryLayoutInfo, Maybe, Merge, Milliseconds, MinimalCardConfig, MousePosition, NetworkCardSection, NewCardConfig, NewsSection, Nullable, OSIAccessibilityConfig, OSIActionClickEvent, OSIAnimationConfig, OSICardInteractionEvent, OSICardsFullConfig, OSICardsThemeConfig, OSIErrorConfig, OSIEventDetail, OSIEventName, OSIFieldClickEvent, OSIItemClickEvent, OSILayoutConfig, OSILoggingConfig, OSISectionRegistration, OSISectionRenderedEvent, OSIStreamingConfig, OSIStreamingStateEvent, OSIThemeChangeEvent, OSIThemeConfig, OmitByType, Optional, OptionalFields, OsiCardsConfig, OverviewSection, PackingAlgorithm, Parameters$1 as Parameters, Percentage, PerformanceLevel, PickByType, PickDefined, Pixels, PluginId, Position, PositionedSection, PreferredColumns$2 as PreferredColumns, PrefixKeys, PriorityBand$1 as PriorityBand, ProductSection, ProgressBarVariant, QuestionActionEvent, QuotationSection, RegisteredSectionPlugin, Replace, RequiredFields, ReturnType$1 as ReturnType, SectionBuilder, SectionComponentOptions, SectionFields, SectionId, SectionItems, SectionManifestEntry, SectionMetadata, SectionOf, SectionOrientation, SectionPlugin, SectionPluginConfig, SectionPluginMetadata, SectionRenderEvent, SectionRenderedEventDetail, SectionType, SectionTypeAlias, SectionTypeInput, SectionTypeMap, SectionTypeOf, SectionUpdatePayload, SkeletonSection, SkeletonSectionType, SocialMediaSection, SolutionsSection, StateSnapshot, StreamingConfig, StreamingState, StreamingStateEventDetail, SuffixKeys, SupportedLocale, TableSection, Tail, TextReferenceSection, ThemeChangeEventDetail, ThemeId, ThemeMode, ThemePreset, ThemeServiceConfig, TiltCalculations, TimelineSection, Toast, TrackedError, Transformer, TrendDirection, Tuple, TypedEvent, Uncapitalize, Url, ValidationResult$1 as ValidationResult, ValidationSchema, Validator, VersionInfo, VideoSection };

package/package.json

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

package/scripts/setup-angular-styles.js

@@ -169,3 +169,4 @@ if (require.main === module) {
 module.exports = { updateAngularJson, findAngularJson };
 
 
+

package/styles/bundles/_ai-card.scss

@@ -106,7 +106,7 @@
   // Section-specific sizing
   --section-card-min-height: 110px;
   --section-card-compact-height: 90px;
-  --section-header-gap: var(--spacing-md);
+  --section-header-gap: 2px;
   --section-content-gap: var(--spacing-sm);
   --section-card-gap: var(--spacing-md);
   --section-card-padding: var(--spacing-md);

package/styles/components/_badges.scss

@@ -3,7 +3,7 @@
  * ============================================================================
  * Standardized badge styling across all sections and card types.
  * Replaces multiple inconsistent badge patterns with unified design.
- * 
+ *
  * Design Spec:
  * - Height: ~20-22px (auto with padding)
  * - Padding: 4px 8px (vertical horizontal)
@@ -275,7 +275,6 @@
 
 @media (max-width: 768px) {
   .badge {
-    font-size: 0.5625rem; /* 9px on mobile */
     padding: 3px 6px;
 
     lucide-icon,

package/styles/components/_card-actions.scss

@@ -14,7 +14,10 @@ app-card-actions {
   margin-top: var(--space-3) !important;
   margin-left: var(--space-1) !important;
   margin-right: var(--space-1) !important;
+  padding-top: 0 !important;
   padding-bottom: var(--osi-card-padding) !important;
+  padding-left: 8px !important;
+  padding-right: 8px !important;
 }
 
 // Base Button Styles

package/styles/components/_component-styles.scss

@@ -23,7 +23,7 @@
   /* Pure CSS Grid - browser handles all positioning */
   display: grid;
   grid-template-columns: repeat(var(--masonry-columns, 4), 1fr);
-  gap: var(--masonry-gap, 12px);
+  gap: var(--masonry-gap, 8px);
   width: 100%;
   min-height: 0;
   align-items: start;

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

@@ -2,17 +2,11 @@
    AI Card Styles - Unified with Docs App
    =================================================================== */
 
-/* Host element styles - transparent container with padding */
+/* Host element styles - transparent container without padding (padding is on .ai-card-surface) */
 :host {
   display: block;
-  padding: var(--osi-card-padding);
   background: transparent !important;
   background-color: transparent !important;
-
-  /* Responsive: reduce padding on mobile */
-  @media (max-width: 480px) {
-    padding: var(--osi-card-padding-mobile);
-  }
 }
 
 .ai-card-surface {
@@ -51,11 +45,11 @@
   box-shadow: var(--osi-card-shadow) !important;
 
   /* Padding - card-specific spacing */
-  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;
+  padding: var(--osi-card-padding, 8px) !important;
+  padding-top: var(--osi-card-padding, 8px) !important;
+  padding-bottom: var(--osi-card-padding, 8px) !important;
+  padding-left: var(--osi-card-padding, 8px) !important;
+  padding-right: var(--osi-card-padding, 8px) !important;
 
   /* Border radius - card-specific (larger than sections) */
   border-radius: var(--osi-card-border-radius) !important;
@@ -488,7 +482,7 @@
   margin-bottom: 0 !important;
   display: flex;
   flex-direction: column;
-  gap: var(--osi-card-body-gap, 12px) !important; /* Constant gap between sections */
+  gap: var(--osi-card-body-gap, 8px) !important; /* Constant gap between sections */
   min-height: 0;
   max-width: 100%;
   box-sizing: border-box !important;

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

@@ -81,7 +81,7 @@
 
 // Section description text
 @mixin section-description-text {
-  font-size: var(--section-description-font-size, 0.8rem);
+  font-size: var(--section-description-font-size, calc(0.8rem - 1px));
   font-weight: 400;
   color: var(--card-text-secondary, #{$foreground-60});
   line-height: 1.4;

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

@@ -73,7 +73,7 @@ $spacing-scale: (
   // Section-specific sizing - BALANCED for good UX
   --section-card-min-height: 110px; // Comfortable (was 120px, not 90px)
   --section-card-compact-height: 90px; // Compact variant
-  --section-header-gap: var(--spacing-md); // 12px - comfortable readability
+  --section-header-gap: 2px; // Reduced gap between title and subtitle
   --section-content-gap: var(--spacing-sm); // 8px - good separation
   --section-card-gap: var(--spacing-md); // 12px - visual breathing room
   --section-card-padding: var(--spacing-md); // 12px - comfortable

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;
@@ -44,7 +46,7 @@
   .masonry-item & {
     display: flex !important;
     flex-direction: column !important;
-    gap: var(--osi-section-gap, 12px) !important;
+    gap: var(--osi-section-gap, 8px) !important;
     height: auto !important;
   }
 }
@@ -342,3 +344,37 @@
 
 /* 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;
+  padding: 4px !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;
+  }
+}