osi-cards-lib 1.5.41 → 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;
@@ -8671,6 +8708,7 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
     private resizeObserver?;
     private resizeThrottleTimeout?;
     private lastWidth;
+    private lastContainerWidth;
     private layoutVersion;
     private itemResizeObservers;
     private absolutePositionUpdateRafId;
@@ -8680,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;
@@ -8715,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;
@@ -8755,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>;
@@ -10184,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
      */
@@ -11619,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-15T18:48:03.906Z
+ * Last synced: 2025-12-15T21:37:02.720Z
  */
-declare const VERSION = "1.5.41";
-declare const BUILD_DATE = "2025-12-15T18:48:03.906Z";
-declare const BUILD_HASH = "6071ff4";
+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;
@@ -11656,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.41",
+  "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

@@ -46,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;
   }
 }
@@ -357,6 +357,7 @@
   box-sizing: border-box !important;
   display: flex !important;
   flex-direction: column !important;
+  padding: 4px !important;
 }
 
 /* Ensure FAQ section specifically resizes properly */

package/styles/core/_bootstrap-reset.scss

@@ -339,7 +339,7 @@ article.ai-card-surface {
   /* Section card variables */
   --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/core/_mixins.scss

@@ -299,7 +299,7 @@ $osi-use-important: true !default;
 /// @param {Length} $gap - Gap between items
 @mixin osi-grid(
   $min-width: var(--section-grid-min-width, 200px),
-  $gap: var(--section-card-gap, 12px)
+  $gap: var(--section-card-gap, 8px)
 ) {
   @include display(grid);
   @include grid-columns(repeat(auto-fit, minmax($min-width, 1fr)));
@@ -315,7 +315,7 @@ $osi-use-important: true !default;
 
 /// Flex column stack for vertical lists
 /// @param {Length} $gap - Gap between items
-@mixin osi-stack($gap: var(--section-stack-gap, 12px)) {
+@mixin osi-stack($gap: var(--section-stack-gap, 8px)) {
   @include display(flex);
   @include flex-direction(column);
   @include gap($gap);
@@ -326,7 +326,7 @@ $osi-use-important: true !default;
 /// Fixed column grid
 /// @param {Number} $columns - Number of columns
 /// @param {Length} $gap - Gap between items
-@mixin osi-grid-fixed($columns: 2, $gap: var(--section-card-gap, 12px)) {
+@mixin osi-grid-fixed($columns: 2, $gap: var(--section-card-gap, 8px)) {
   @include display(grid);
   @include grid-columns(repeat($columns, 1fr));
   @include gap($gap);

package/styles/design-system/_tokens.scss

@@ -17,7 +17,7 @@
   --osi-spacing-3xl: 48px;
 
   // Section-specific spacing (More compact by default)
-  --osi-section-header-gap: var(--osi-spacing-sm); // 8px (was 12px)
+  --osi-section-header-gap: 2px; // Reduced gap between title and subtitle
   --osi-section-padding: var(--osi-spacing-sm); // 8px (was 12px)
   --osi-section-gap: var(--osi-spacing-md); // 12px (was 16px)
   --osi-item-padding: var(--osi-spacing-sm); // 8px (was 12px)

package/styles/design-system/_unified-sections.scss

@@ -16,24 +16,16 @@
   font-weight: var(--osi-font-semibold); // 600
   line-height: var(--osi-leading-snug); // 1.375
   color: var(--osi-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-sm); // Keep same on mobile
-  }
 }
 
 // Item labels (small uppercase text)
 @mixin unified-item-label {
-  font-size: 0.7rem; // 11.2px - Compact
+  font-size: 0.7rem; // 11.2px - Compact, fixed size
   font-weight: var(--osi-font-medium); // 500
   line-height: var(--osi-leading-tight); // 1.25
   color: var(--osi-muted-foreground);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-
-  @include mobile {
-    font-size: 0.65rem; // 10.4px on mobile
-  }
 }
 
 // Item values (prominent text/numbers)
@@ -42,10 +34,6 @@
   font-weight: var(--osi-font-semibold); // 600
   line-height: var(--osi-leading-normal); // 1.5
   color: var(--osi-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-sm); // Keep same on mobile
-  }
 }
 
 // Item descriptions (secondary text)
@@ -54,25 +42,16 @@
   font-weight: var(--osi-font-normal); // 400
   line-height: var(--osi-leading-relaxed); // 1.625
   color: var(--osi-muted-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-xs); // Keep same on mobile
-    line-height: var(--osi-leading-normal); // Tighter on mobile
-  }
 }
 
 // Number displays (metrics, analytics)
 @mixin unified-number-display {
-  font-size: var(--osi-text-xl); // 24px - Compact (was 30px)
+  font-size: var(--osi-text-xl); // 24px - Fixed size for all screen sizes
   font-weight: var(--osi-font-bold); // 700
   line-height: 1;
   letter-spacing: var(--osi-tracking-tight);
   font-variant-numeric: tabular-nums;
   color: var(--osi-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-lg); // 20px on mobile
-  }
 }
 
 // ═══════════════════════════════════════════════════════════════════

package/styles/layout/_masonry.scss

@@ -17,7 +17,7 @@
     display: grid !important;
     grid-template-columns: repeat(auto-fill, minmax(var(--section-grid-min-width, 260px), 1fr));
     grid-template-rows: masonry;
-    gap: var(--section-card-gap, 12px);
+    gap: var(--section-card-gap, 8px);
     align-tracks: stretch;
 
     /* Native masonry doesn't need absolute positioning */
@@ -292,12 +292,6 @@
   }
 }
 
-.masonry-item[data-priority="2"],
-.masonry-item[data-priority="3"] {
-  /* Priority 2 and 3 sections - no special border, use unified styling */
-  /* Left accent border removed for consistency */
-}
-
 /* Flex grow sections - expand to fill space */
 .masonry-item--flex-grow {
   flex-grow: 1 !important;
@@ -559,17 +553,17 @@
 }
 
 .masonry-skeleton--single {
-  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4);
+  width: calc((100% - var(--masonry-gap, 8px) * 3) / 4);
   height: 180px;
 }
 
 .masonry-skeleton--double {
-  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4 * 2 + var(--masonry-gap, 12px));
+  width: calc((100% - var(--masonry-gap, 8px) * 3) / 4 * 2 + var(--masonry-gap, 8px));
   height: 200px;
 }
 
 .masonry-skeleton--triple {
-  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4 * 3 + var(--masonry-gap, 12px) * 2);
+  width: calc((100% - var(--masonry-gap, 8px) * 3) / 4 * 3 + var(--masonry-gap, 8px) * 2);
   height: 220px;
 }
 

package/styles/tokens/_master.scss

@@ -466,15 +466,14 @@ $breakpoints: (
 @mixin osi-card-typography($variant: "demo") {
   // Both demo and integration now use the same compact values
   // Section Titles
-  --section-title-font-size: 0.92rem;
+  --section-title-font-size: calc(0.92rem - 6px);
   --section-title-font-weight: 700;
   --section-title-letter-spacing: -0.02em;
   --section-title-line-height: 1.3;
   --section-title-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 
   // Card Header Title (main card title - larger)
-  --card-header-title-font-size: 1.25rem; /* 20px - main card header (reduced by 2px from 22px) */
-  --card-header-title-font-size-mobile: 1rem; /* 16px - mobile (reduced by 2px from 18px) */
+  --card-header-title-font-size: 1rem; /* 16px - fixed size for all screen sizes */
   --card-header-title-font-weight: 700;
   --card-header-title-letter-spacing: -0.02em;
   --card-header-title-line-height: 1.3;
@@ -526,23 +525,23 @@ $breakpoints: (
 
 /// Generate card layout tokens
 @mixin osi-card-layout() {
-  --card-main-padding: 16px;
+  --card-main-padding: 8px;
   --card-padding-vertical: 12px;
-  --card-padding-horizontal: 16px;
-  --card-padding: 16px;
+  --card-padding-horizontal: 12px;
+  --card-padding: 12px;
   --card-padding-large: 20px;
   --section-padding: 12px;
-  --section-container-padding: 12px;
+  --section-container-padding: 16px;
   --card-min-height: auto;
   --card-gap: 6px;
   --card-gap-large: 10px;
   --card-nested-gap: 3px;
-  --section-header-gap: 3px;
+  --section-header-gap: 2px;
   --section-header-padding-bottom: 0px;
   --section-title-margin-bottom: 0;
   --card-border-radius: 12px;
   --card-border-radius-large: 16px;
-  --section-card-gap: 12px;
+  --section-card-gap: 8px;
   --section-card-border-radius: 10px;
 
   // Element gaps within cards
@@ -649,11 +648,11 @@ $breakpoints: (
   --osi-card-shadow-fullscreen: none;
 
   // Card Spacing - 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: var(--card-main-padding, 8px);
+  --osi-card-padding-top: var(--card-main-padding, 8px);
+  --osi-card-padding-bottom: var(--card-main-padding, 8px);
+  --osi-card-padding-left: var(--card-main-padding, 8px);
+  --osi-card-padding-right: var(--card-main-padding, 8px);
   --osi-card-padding-mobile: 4px; // Fixed padding - no responsive behavior
 
   // Card Spacing - Margins
@@ -663,9 +662,9 @@ $breakpoints: (
   --osi-card-margin-right: 0;
 
   // Card Spacing - Gaps
-  --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);
+  --osi-card-gap: var(--section-card-gap, 8px);
+  --osi-card-body-gap: var(--space-4, 8px);
+  --osi-card-grid-gap: var(--section-card-gap, 8px);
 
   // Card Border Radius
   --osi-card-border-radius: var(--card-border-radius);
@@ -801,7 +800,7 @@ $breakpoints: (
   --osi-section-border-radius: var(--section-card-border-radius);
 
   // Section Typography
-  --osi-section-title-font-size: var(--section-title-font-size, 1.1rem);
+  --osi-section-title-font-size: calc(1.1rem - 4px);
   --osi-section-title-font-weight: var(--section-title-font-weight, 700);
   --osi-section-title-letter-spacing: var(--section-title-letter-spacing, -0.02em);
   --osi-section-title-line-height: var(--section-title-line-height, 1.3);