@eric-emg/symphiq-components 1.2.553 → 1.2.556

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _jebgem_model from '@jebgem/model';
-import { FocusAreaTopPriorityInterface, MetricTopPriorityInterface, ProfileItemInterface, ViewModeEnum, GoalV3Interface, ObjectiveV3Interface, StrategyV3Interface, OperationalCategoryInterface, CategoryStrengthInterface, CategoryGapInterface, CategoryOpportunityInterface, InsightBlockInterface, ProfileAnalysisRecommendationInterface, PerformanceMetricInterface, KeyStrengthInterface, CriticalGapInterface, AiChartInterface, ProfileAnalysisRecommendationActionStepInterface, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ProfileSectionInterface, ProfileSubsectionInterface, ProfileInterface, MetricEnum, FunnelMetricInterface, TargetInterface, UiDataInterface, ProfileAnalysisInterface, FunnelAnalysisInterface, FocusAreaDetailInterface, BreakdownMetricInterface, UserInterface, ItemStatusInterface, AiDynamicContentStatusEnum, PerformanceOverviewStructuredV3Interface, OverallAssessmentInterface, FocusAreaDomainEnum, FocusAreaDetailStatusEnum, GaPropertyInterface, GaAccountInterface, ShopDataLoadStatusEnum, PacingResponseInterface, DataResultsInterface, CalculateRevenueReverseResponseInterface, CalculateRevenueResponseInterface, TargetHistoryInterface, CalculateRevenueRequestInterface, CalculateRevenueReverseRequestInterface, ProfileItemTypeEnum, IconObjectInterface as IconObjectInterface$1, NapkinVisualInterface, HierarchyDataInterface, AbstractItemProfileQuestionInterface, AbstractItemProfileAnswerInterface, AbstractItemProfileAnswerHistoryInterface, AccountInterface, ProfileShopInterface, ProfileShopQuestionInterface, PlanCardInfoInterface, CurrencyCodeEnum, ChargebeeItemPricePeriodUnitEnum, ChargebeeItemPriceInterface, IconSourceEnum, ProfileAnalysisSectionV3Interface, ExecutiveSummaryInterface, ProfileFocusAreaInterface, ProfileFocusAreaQuestionInterface, ProfileAnalysisReviewStatusEnum, ProfileMetricInterface, ProfileMetricQuestionInterface, FocusAreaExecutiveSummaryInterface, MetricExecutiveSummaryInterface, ChartTypeEnum } from '@jebgem/model';
+import { FocusAreaTopPriorityInterface, MetricTopPriorityInterface, ProfileItemInterface, ViewModeEnum, GoalV3Interface, ObjectiveV3Interface, StrategyV3Interface, OperationalCategoryInterface, CategoryStrengthInterface, CategoryGapInterface, CategoryOpportunityInterface, InsightBlockInterface, ProfileAnalysisRecommendationInterface, PerformanceMetricInterface, KeyStrengthInterface, CriticalGapInterface, AiChartInterface, ProfileAnalysisRecommendationActionStepInterface, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ProfileSectionInterface, ProfileSubsectionInterface, ProfileInterface, MetricEnum, FunnelMetricInterface, TargetInterface, UiDataInterface, ProfileAnalysisInterface, FunnelAnalysisInterface, FocusAreaDetailInterface, BreakdownMetricInterface, UserInterface, ItemStatusInterface, AiDynamicContentStatusEnum, PerformanceOverviewStructuredV3Interface, OverallAssessmentInterface, FocusAreaDomainEnum, FocusAreaDetailStatusEnum, GaPropertyInterface, GaAccountInterface, ShopDataLoadStatusEnum, PacingResponseInterface, DataResultsInterface, CalculateRevenueReverseResponseInterface, CalculateRevenueResponseInterface, TargetHistoryInterface, CalculateRevenueRequestInterface, CalculateRevenueReverseRequestInterface, ProfileItemTypeEnum, IconObjectInterface as IconObjectInterface$1, NapkinVisualInterface, HierarchyDataInterface, AbstractItemProfileQuestionInterface, AbstractItemProfileAnswerInterface, AbstractItemProfileAnswerHistoryInterface, AccountInterface, ProfileShopInterface, ProfileShopQuestionInterface, PlanCardInfoInterface, CurrencyCodeEnum, ChargebeeItemPricePeriodUnitEnum, ChargebeeItemPriceInterface, IconSourceEnum, ProfileAnalysisSectionV3Interface, ExecutiveSummaryInterface, ProfileFocusAreaInterface, ProfileFocusAreaQuestionInterface, ProfileAnalysisReviewStatusEnum, ProfileMetricInterface, ProfileMetricQuestionInterface, FocusAreaExecutiveSummaryInterface, QuickWinItemInterface, MetricExecutiveSummaryInterface, ChartTypeEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as _angular_core from '@angular/core';
 import { OnInit, AfterViewInit, ElementRef, WritableSignal, OnDestroy, OnChanges, SimpleChanges, Renderer2 } from '@angular/core';
@@ -1072,7 +1072,7 @@ declare class ModalComponent {
     private animatedTrendValues;
     private animationFrames;
     isOpen: _angular_core.Signal<boolean>;
-    modalType: _angular_core.Signal<"insight" | "metric" | "chart" | "insights-list" | "goal-insights-list" | "goal-business-insights-list" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis" | "funnel-strengths-list" | "funnel-weaknesses-list" | "funnel-strength-detail" | "funnel-weakness-detail" | "business-insight-detail" | null>;
+    modalType: _angular_core.Signal<"metric" | "insight" | "chart" | "insights-list" | "goal-insights-list" | "goal-business-insights-list" | "business-insight-detail" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis" | "funnel-strengths-list" | "funnel-weaknesses-list" | "funnel-strength-detail" | "funnel-weakness-detail" | null>;
     charts: _angular_core.Signal<AiChartInterface[]>;
     modalKey: _angular_core.Signal<number>;
     insightData: _angular_core.Signal<InsightBlockInterface | null>;
@@ -1091,7 +1091,7 @@ declare class ModalComponent {
         description: string;
         icon: string;
     } | null>;
-    metricsListData: _angular_core.Signal<PerformanceMetricInterface | InsightBlockInterface | AiChartInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    metricsListData: _angular_core.Signal<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
     metricsListMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
     metricsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -1099,7 +1099,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    chartsListData: _angular_core.Signal<PerformanceMetricInterface | InsightBlockInterface | AiChartInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    chartsListData: _angular_core.Signal<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
     chartsListCharts: _angular_core.Signal<AiChartInterface[]>;
     chartsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -1107,7 +1107,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    recommendationsListData: _angular_core.Signal<PerformanceMetricInterface | InsightBlockInterface | AiChartInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    recommendationsListData: _angular_core.Signal<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
     recommendationsListRecommendations: _angular_core.Signal<string[]>;
     recommendationsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -1115,7 +1115,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    competitiveAnalysisData: _angular_core.Signal<PerformanceMetricInterface | InsightBlockInterface | AiChartInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    competitiveAnalysisData: _angular_core.Signal<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
     competitiveAnalysisContext: _angular_core.Signal<{
         title: string;
         description: string;
@@ -1505,7 +1505,7 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
     private chartsById;
     headerClass: _angular_core.Signal<string>;
     headerTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
-    headerSubtitleClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    headerSubtitleClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     metaLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-500">;
     sectionTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
     selectClass: _angular_core.Signal<"bg-white text-slate-900 border-slate-300 hover:border-blue-400 transition-all duration-200" | "bg-slate-700 text-white border-slate-600 hover:border-slate-500 transition-all duration-200">;
@@ -1671,7 +1671,7 @@ declare class MetricCardComponent {
     competitiveScoreBadgeLightClass: _angular_core.Signal<string>;
     competitiveScoreBadgeDarkClass: _angular_core.Signal<string>;
     competitiveScoreBadgeClass: _angular_core.Signal<string>;
-    competitiveScoreTextClass: _angular_core.Signal<"" | "text-blue-700" | "text-blue-400" | "text-emerald-600" | "text-orange-600">;
+    competitiveScoreTextClass: _angular_core.Signal<"" | "text-blue-400" | "text-blue-700" | "text-emerald-600" | "text-orange-600">;
     competitiveComparisonDefaultClass: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     competitiveComparisonClass: _angular_core.Signal<"text-slate-700" | "text-slate-300" | "text-emerald-600 font-semibold" | "text-orange-600 font-semibold">;
     getCompetitiveScoreIcon(): string;
@@ -1723,9 +1723,9 @@ declare class InsightCardComponent {
     recommendationsContainerLightClass: _angular_core.Signal<string>;
     recommendationsContainerDarkClass: _angular_core.Signal<string>;
     recommendationsContainerClass: _angular_core.Signal<string>;
-    priorityBadgeLightClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-100/70 text-red-700 border-red-400/60">;
-    priorityBadgeDarkClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-500/20 text-red-400 border-red-500/50">;
-    priorityBadgeClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-500/20 text-red-400 border-red-500/50">;
+    priorityBadgeLightClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60">;
+    priorityBadgeDarkClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-500/20 text-red-400 border-red-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50">;
+    priorityBadgeClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md animate-pulse bg-red-500/20 text-red-400 border-red-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50">;
     containerLightClass: _angular_core.Signal<"transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-white to-blue-50/50 border-2 border-blue-300 hover:border-blue-400 shadow-lg shadow-blue-200/50 hover:shadow-blue-300/60" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-white border-slate-200 hover:border-blue-400 hover:shadow-blue-100/50">;
     containerDarkClass: _angular_core.Signal<"transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-slate-800 to-blue-900/20 border-2 border-blue-500/40 hover:border-blue-400/60 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-slate-800 border-slate-700 hover:border-slate-500 hover:shadow-slate-900/50">;
     containerClass: _angular_core.Signal<"transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-white to-blue-50/50 border-2 border-blue-300 hover:border-blue-400 shadow-lg shadow-blue-200/50 hover:shadow-blue-300/60" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-white border-slate-200 hover:border-blue-400 hover:shadow-blue-100/50" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-slate-800 to-blue-900/20 border-2 border-blue-500/40 hover:border-blue-400/60 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-slate-800 border-slate-700 hover:border-slate-500 hover:shadow-slate-900/50">;
@@ -1824,42 +1824,74 @@ declare class BreakdownSectionComponent {
         metricLabel: string;
         category: string;
     }[]>;
+    groupsDisplay: _angular_core.Signal<{
+        headerClass: string;
+        categoryBadgeClass: string;
+        isExpanded: boolean;
+        topPriorityMetricsDisplay: {
+            metric: PerformanceMetricInterface;
+            formattedDimensionValue: string;
+            priorityBadgeClass: string;
+            priorityBadgeStyle: Record<string, string>;
+            statusBadgeClass: string;
+            statusBadgeStyle: Record<string, string>;
+            statusIcon: string;
+            statusLabel: string;
+            trendClass: string;
+            trendTooltip: TrendIndicatorTooltipContent;
+            breakdownRowTooltip: BreakdownRowTooltipContent;
+            miniSparkline: SafeHtml;
+            trendPercent: number;
+            formattedCurrentValue: string;
+            rowBackgroundClass: string;
+            priorityDividerClass: string;
+        }[];
+        metricsDisplay: {
+            metric: PerformanceMetricInterface;
+            formattedDimensionValue: string;
+            priorityBadgeClass: string;
+            priorityBadgeStyle: Record<string, string>;
+            statusBadgeClass: string;
+            statusBadgeStyle: Record<string, string>;
+            statusIcon: string;
+            statusLabel: string;
+            trendClass: string;
+            trendTooltip: TrendIndicatorTooltipContent;
+            breakdownRowTooltip: BreakdownRowTooltipContent;
+            miniSparkline: SafeHtml;
+            trendPercent: number;
+            formattedCurrentValue: string;
+            rowBackgroundClass: string;
+            priorityDividerClass: string;
+        }[];
+        values: PerformanceMetricInterface[];
+        metric: string;
+        metricLabel: string;
+        category: string;
+    }[]>;
+    private computeMetricDisplay;
+    private computeTopPriorityMetrics;
+    private computeFormatDimensionValue;
+    private computeFormatValue;
+    private computeTrendPercent;
+    private computeTrendClass;
+    private computeStatusIcon;
+    private computeStatusLabel;
+    private computeRowBackgroundClass;
+    private computePriorityDividerClass;
+    private computePriorityBadgeClass;
+    private computePriorityBadgeStyle;
+    private computeMetricGroupHeaderClass;
+    private computeMetricCategoryBadgeClass;
+    private computeStatusBadgeClass;
+    private computeStatusBadgeStyle;
+    private computeMiniSparkline;
     groupMetrics(): MetricGroup[];
     sortMetricValues(values: PerformanceMetricInterface[]): PerformanceMetricInterface[];
-    private getRowBackgroundClassLight;
-    private getRowBackgroundClassDark;
-    getRowBackgroundClass(metric: PerformanceMetricInterface, index: number): string;
-    private getPriorityDividerClassLight;
-    private getPriorityDividerClassDark;
-    getPriorityDividerClass(metric: PerformanceMetricInterface, index: number, values: PerformanceMetricInterface[]): string;
-    private getPriorityBadgeClassLight;
-    private getPriorityBadgeClassDark;
-    getPriorityBadgeClass(priority: number): string;
-    getPriorityBadgeStyle(priority: number): Record<string, string>;
     formatMetricLabel(metric: string): string;
-    private getMetricGroupHeaderClassLight;
-    private getMetricGroupHeaderClassDark;
-    getMetricGroupHeaderClass(category: string): string;
-    private getMetricCategoryBadgeClassLight;
-    private getMetricCategoryBadgeClassDark;
-    getMetricCategoryBadgeClass(category: string): string;
-    formatDimensionValue(value?: string): string;
     formatValue(value: number, category: string | undefined, metric?: string): string;
-    getTrendClass(metric: PerformanceMetricInterface): string;
-    private getStatusBadgeClassLight;
-    private getStatusBadgeClassDark;
-    getStatusBadgeClass(status: string | undefined): string;
-    getStatusBadgeStyle(status: string | undefined): Record<string, string>;
-    getStatusLabel(status: string | undefined): string;
-    getStatusIcon(status: string | undefined): string;
-    getTrendTooltip(metric: PerformanceMetricInterface): TrendIndicatorTooltipContent;
-    getBreakdownRowTooltip(metric: PerformanceMetricInterface): BreakdownRowTooltipContent;
-    calculateTrendPercent(metric: PerformanceMetricInterface): number;
     openChartModal(chart: AiChartInterface): void;
-    getMiniSparkline(metric: PerformanceMetricInterface): SafeHtml;
-    isMetricExpanded(metricKey: string): boolean;
     toggleMetricExpansion(metricKey: string): void;
-    getTopPriorityMetrics(metrics: PerformanceMetricInterface[], count?: number): PerformanceMetricInterface[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreakdownSectionComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreakdownSectionComponent, "symphiq-funnel-analysis-breakdown-section", never, { "breakdown": { "alias": "breakdown"; "required": false; "isSignal": true; }; "charts": { "alias": "charts"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -2195,14 +2227,28 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     insightsCount: _angular_core.Signal<number>;
     revenueMetric: _angular_core.Signal<PerformanceMetricInterface | undefined>;
     topMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
+    topMetricsDisplay: _angular_core.Signal<{
+        metric: PerformanceMetricInterface;
+        label: string;
+        formattedValue: string;
+        formattedTrend: string;
+        miniCardClass: string;
+        statusDotClass: string;
+        shouldPulseDot: boolean;
+        trendClass: string;
+        tooltip: MetricValueTooltipContent;
+    }[]>;
+    private computeFormattedMetricValue;
+    private computeFormattedTrend;
+    private computeMetricTooltip;
     formattedRevenueValue: _angular_core.Signal<string>;
     formattedRevenueTrend: _angular_core.Signal<string>;
-    revenueStatusIcon: _angular_core.Signal<"↑" | "•" | "→" | "⚠">;
+    revenueStatusIcon: _angular_core.Signal<"↑" | "→" | "⚠" | "•">;
     hasCompetitiveData: _angular_core.Signal<boolean>;
     hasOverallCompetitiveBenchmark: _angular_core.Signal<boolean>;
     overallCompetitiveDescription: _angular_core.Signal<string>;
-    getOverallCompetitiveLabel(): string;
-    getOverallCompetitiveIcon(): string;
+    overallCompetitiveLabel: _angular_core.Signal<_jebgem_model.CompetitiveScoreEnum | "N/A">;
+    overallCompetitiveIcon: _angular_core.Signal<"↑" | "•" | "↔" | "↓">;
     competitiveScore: _angular_core.Signal<string>;
     gradeTooltip: _angular_core.Signal<{
         title: string;
@@ -2283,19 +2329,11 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     buttonClass: _angular_core.Signal<string>;
     competitiveBadgeClass: _angular_core.Signal<string>;
     shouldPulseCompetitiveBadge: _angular_core.Signal<boolean>;
-    overallCompetitiveStatusBadgeClass: _angular_core.Signal<"border-2 bg-gradient-to-r from-emerald-500/30 to-emerald-500/20 text-emerald-400 border-emerald-500/40 shadow-lg shadow-emerald-500/20" | "border-2 bg-gradient-to-r from-blue-500/30 to-blue-500/20 text-blue-400 border-blue-500/40 shadow-lg shadow-blue-500/20" | "border-2 bg-gradient-to-r from-orange-500/30 to-orange-500/20 text-orange-400 border-orange-500/40 shadow-lg shadow-orange-500/20" | "border-2 bg-gradient-to-r from-slate-500/20 to-slate-500/10 text-slate-400 border-slate-500/30 shadow-lg shadow-slate-500/20" | "border-2 bg-gradient-to-br from-emerald-100/90 to-emerald-50/90 text-emerald-700 border-emerald-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-br from-blue-100/90 to-blue-50/90 text-blue-700 border-blue-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-br from-orange-100/90 to-orange-50/90 text-orange-700 border-orange-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-br from-slate-100/90 to-slate-50/90 text-slate-700 border-slate-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]">;
+    overallCompetitiveStatusBadgeClass: _angular_core.Signal<"border-2 bg-gradient-to-br from-emerald-100/90 to-emerald-50/90 text-emerald-700 border-emerald-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-br from-blue-100/90 to-blue-50/90 text-blue-700 border-blue-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-br from-orange-100/90 to-orange-50/90 text-orange-700 border-orange-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-br from-slate-100/90 to-slate-50/90 text-slate-700 border-slate-200/50 shadow-[2px_2px_4px_rgba(163,163,163,0.25),-2px_-2px_4px_rgba(255,255,255,0.75)]" | "border-2 bg-gradient-to-r from-emerald-500/30 to-emerald-500/20 text-emerald-400 border-emerald-500/40 shadow-lg shadow-emerald-500/20" | "border-2 bg-gradient-to-r from-blue-500/30 to-blue-500/20 text-blue-400 border-blue-500/40 shadow-lg shadow-blue-500/20" | "border-2 bg-gradient-to-r from-orange-500/30 to-orange-500/20 text-orange-400 border-orange-500/40 shadow-lg shadow-orange-500/20" | "border-2 bg-gradient-to-r from-slate-500/20 to-slate-500/10 text-slate-400 border-slate-500/30 shadow-lg shadow-slate-500/20">;
     shouldPulseOverallCompetitive: _angular_core.Signal<boolean>;
     statusIconClass: _angular_core.Signal<string>;
     insightsCardClass: _angular_core.Signal<string>;
     insightsBadgeClass: _angular_core.Signal<string>;
-    metricMiniCardClass(metric: PerformanceMetricInterface): string;
-    getStatusDotClass(metric: PerformanceMetricInterface): string;
-    shouldPulseMetricDot(metric: PerformanceMetricInterface): boolean;
-    getTrendClass(metric: PerformanceMetricInterface): string;
-    getMetricLabel(metric: PerformanceMetricInterface): string;
-    formatMetricValue(metric: PerformanceMetricInterface): string;
-    formatTrend(metric: PerformanceMetricInterface): string;
-    getMetricTooltip(metric: PerformanceMetricInterface): MetricValueTooltipContent;
     private formatCurrency;
     private formatPercent;
     private getGradeExplanation;
@@ -2407,13 +2445,32 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     private originalFocusAreasMap;
     protected allFocusAreaDomains: _angular_core.WritableSignal<FocusAreaDomainEnum[]>;
     protected totalFocusAreas: _angular_core.Signal<number>;
+    protected focusAreaDomainsDisplay: _angular_core.Signal<{
+        domain: FocusAreaDomainEnum;
+        title: string;
+        description: string;
+        status: FocusAreaDetailStatusEnum | null;
+        tools: string[];
+    }[]>;
     protected focusAreasAnswered: _angular_core.Signal<number>;
     protected allFocusAreasAnswered: _angular_core.Signal<boolean>;
     protected currentEditingFocusAreaTitle: _angular_core.Signal<string>;
     protected currentEditingTools: _angular_core.Signal<string[]>;
     protected engagedFocusAreas: _angular_core.Signal<FocusAreaDetailInterface[]>;
+    protected engagedFocusAreasDisplay: _angular_core.Signal<{
+        focusArea: FocusAreaDetailInterface;
+        title: string;
+    }[]>;
     protected interestedFocusAreas: _angular_core.Signal<FocusAreaDetailInterface[]>;
+    protected interestedFocusAreasDisplay: _angular_core.Signal<{
+        focusArea: FocusAreaDetailInterface;
+        title: string;
+    }[]>;
     protected notInterestedFocusAreas: _angular_core.Signal<FocusAreaDetailInterface[]>;
+    protected notInterestedFocusAreasDisplay: _angular_core.Signal<{
+        focusArea: FocusAreaDetailInterface;
+        title: string;
+    }[]>;
     constructor();
     onScroll(): void;
     ngOnDestroy(): void;
@@ -2429,10 +2486,6 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     private initializeFocusAreasMap;
     private loadFocusAreasFromData;
     private getFocusAreaDetailsFromMap;
-    protected getFocusAreaStatus(domain: FocusAreaDomainEnum): FocusAreaDetailStatusEnum | null;
-    protected getFocusAreaTools(domain: FocusAreaDomainEnum): string[];
-    protected getFocusAreaTitle(domain: FocusAreaDomainEnum): string;
-    protected getFocusAreaDescription(domain: FocusAreaDomainEnum): string;
     protected onFocusAreaStatusChange(domain: FocusAreaDomainEnum, status: FocusAreaDetailStatusEnum): void;
     protected onFocusAreaToolsClick(domain: FocusAreaDomainEnum): void;
     protected onToolsModalClose(): void;
@@ -2440,39 +2493,39 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     protected enableFocusAreasEditMode(): void;
     protected cancelFocusAreasEditMode(): void;
     private focusAreasChanged;
-    protected isLightMode(): boolean;
-    protected getContainerClasses(): string;
-    protected containerClasses(): string;
-    protected contentClasses(): string;
-    protected sectionTitleClasses(): string;
-    protected sectionDescriptionClasses(): string;
-    protected labelClasses(): string;
+    protected isLightMode: _angular_core.Signal<boolean>;
+    protected containerWrapperClasses: _angular_core.Signal<"" | "min-h-screen">;
+    protected containerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800 border-slate-700">;
+    protected contentClasses: _angular_core.Signal<"bg-gradient-to-br from-white to-slate-50" | "bg-gradient-to-br from-slate-800 to-slate-900">;
+    protected sectionTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected sectionDescriptionClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected labelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected inputClasses(fieldName: string): string;
-    protected urlPrefixClasses(): string;
+    protected urlPrefixClasses: _angular_core.Signal<"bg-slate-100 text-slate-600 border-slate-300" | "bg-slate-600 text-slate-300 border-slate-600">;
     protected urlInputClasses(fieldName: string): string;
     protected radioPlatformClasses(platform: ShopPlatformEnum): string;
     protected radioIndicatorClasses(platform: ShopPlatformEnum): string;
-    protected radioLabelClasses(): string;
-    protected checkboxClasses(): string;
-    protected checkboxLabelClasses(): string;
-    protected errorClasses(): string;
-    protected viewLabelClasses(): string;
-    protected viewValueClasses(): string;
-    protected viewLinkClasses(): string;
-    protected editButtonClasses(): string;
-    protected stickyButtonContainerClasses(): string;
-    protected cancelButtonClasses(): string;
-    protected continueButtonClasses(): string;
-    protected progressBadgeClasses(): string;
-    protected dividerClasses(): string;
+    protected radioLabelClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected checkboxClasses: _angular_core.Signal<"text-blue-600 border-slate-300 focus:ring-blue-500" | "text-blue-400 border-slate-600 focus:ring-blue-400 bg-slate-700">;
+    protected checkboxLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected errorClasses: _angular_core.Signal<string>;
+    protected viewLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected viewValueClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected viewLinkClasses: _angular_core.Signal<"text-blue-600 hover:text-blue-700" | "text-blue-400 hover:text-blue-300">;
+    protected editButtonClasses: _angular_core.Signal<"bg-blue-600 text-white hover:bg-blue-700" | "bg-blue-500 text-white hover:bg-blue-600">;
+    protected stickyButtonContainerClasses: _angular_core.Signal<"bg-white/90 border-slate-200" | "bg-slate-900/90 border-slate-700">;
+    protected cancelButtonClasses: _angular_core.Signal<"bg-slate-200 text-slate-700 hover:bg-slate-300" | "bg-slate-700 text-slate-300 hover:bg-slate-600">;
+    protected continueButtonClasses: _angular_core.Signal<"bg-slate-300 text-slate-500" | "bg-slate-700 text-slate-500" | "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white" | "bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white">;
+    protected progressBadgeClasses: _angular_core.Signal<"bg-emerald-100 text-emerald-700 border border-emerald-200" | "bg-blue-100 text-blue-700 border border-blue-200" | "bg-emerald-900/30 text-emerald-400 border border-emerald-700" | "bg-blue-900/30 text-blue-400 border border-blue-700">;
+    protected dividerClasses: _angular_core.Signal<"border-t border-slate-200" | "border-t border-slate-700">;
     protected groupTitleClasses(type: 'engaged' | 'interested' | 'not-interested'): string;
     protected focusAreaViewCardClasses(type: 'engaged' | 'interested' | 'not-interested'): string;
-    protected focusAreaViewTitleClasses(): string;
-    protected focusAreaViewTitleSmallClasses(): string;
+    protected focusAreaViewTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected focusAreaViewTitleSmallClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected statusBadgeClasses(type: 'engaged' | 'interested' | 'not-interested'): string;
-    protected toolsLabelViewClasses(): string;
-    protected toolChipViewClasses(): string;
-    protected validationMessageClasses(): string;
+    protected toolsLabelViewClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected toolChipViewClasses: _angular_core.Signal<"bg-white text-emerald-700 border border-emerald-200" | "bg-slate-800 text-emerald-300 border border-emerald-700">;
+    protected validationMessageClasses: _angular_core.Signal<"bg-orange-50 text-orange-700 border border-orange-200" | "bg-orange-900/30 text-orange-400 border border-orange-700">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqCreateAccountDashboardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqCreateAccountDashboardComponent, "symphiq-create-account-dashboard", never, { "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "parentHeaderOffset": { "alias": "parentHeaderOffset"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "scrollEvent": { "alias": "scrollEvent"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; "accountData": { "alias": "accountData"; "required": false; "isSignal": true; }; "forDemo": { "alias": "forDemo"; "required": false; "isSignal": true; }; "showNextStepAction": { "alias": "showNextStepAction"; "required": false; "isSignal": true; }; "maxAccessibleStepId": { "alias": "maxAccessibleStepId"; "required": false; "isSignal": true; }; }, { "onCreateAccount": "onCreateAccount"; "stepClick": "stepClick"; "nextStepClick": "nextStepClick"; }, never, never, true, never>;
 }
@@ -2489,23 +2542,32 @@ declare class FocusAreaQuestionComponent {
     statusChange: _angular_core.OutputEmitterRef<FocusAreaDetailStatusEnum>;
     toolsClick: _angular_core.OutputEmitterRef<void>;
     protected FocusAreaDetailStatusEnum: typeof FocusAreaDetailStatusEnum;
-    protected isLightMode(): boolean;
+    protected isLight: _angular_core.Signal<boolean>;
+    protected radioOptionsDisplay: _angular_core.Signal<{
+        status: FocusAreaDetailStatusEnum;
+        label: string;
+        description: string;
+        optionClasses: string;
+        indicatorClasses: string;
+        labelClasses: string;
+        isSelected: boolean;
+    }[]>;
+    private computeRadioOptionClasses;
+    private computeRadioIndicatorClasses;
+    private computeRadioLabelClasses;
+    protected containerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800 border-slate-700">;
+    protected contentClasses: _angular_core.Signal<"bg-gradient-to-br from-white to-slate-50" | "bg-gradient-to-br from-slate-800 to-slate-900">;
+    protected titleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected descriptionClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected notAnsweredBadgeClasses: _angular_core.Signal<"bg-orange-900/30 text-orange-400 border border-orange-700" | "bg-orange-100 text-orange-700 border border-orange-200">;
+    protected radioDescriptionClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected toolsLabelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected toolsButtonClasses: _angular_core.Signal<"bg-red-50 border-red-300 hover:border-red-400 hover:bg-red-100 text-slate-900" | "bg-red-900/20 border-red-700 hover:border-red-600 hover:bg-red-900/30 text-white" | "bg-white border-slate-300 hover:border-blue-400 hover:bg-blue-50 text-slate-900" | "bg-slate-700 border-slate-600 hover:border-blue-400 hover:bg-slate-600 text-white">;
+    protected toolChipClasses: _angular_core.Signal<"bg-blue-100 text-blue-700 border border-blue-200" | "bg-blue-900/30 text-blue-300 border border-blue-700">;
+    protected placeholderClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
+    protected editIconClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     protected onStatusChange(status: FocusAreaDetailStatusEnum): void;
     protected onToolsClick(): void;
-    protected containerClasses(): string;
-    protected contentClasses(): string;
-    protected titleClasses(): string;
-    protected descriptionClasses(): string;
-    protected notAnsweredBadgeClasses(): string;
-    protected radioOptionClasses(status: FocusAreaDetailStatusEnum): string;
-    protected radioIndicatorClasses(status: FocusAreaDetailStatusEnum): string;
-    protected radioLabelClasses(status: FocusAreaDetailStatusEnum): string;
-    protected radioDescriptionClasses(): string;
-    protected toolsLabelClasses(): string;
-    protected toolsButtonClasses(): string;
-    protected toolChipClasses(): string;
-    protected placeholderClasses(): string;
-    protected editIconClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FocusAreaQuestionComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FocusAreaQuestionComponent, "symphiq-focus-area-question", never, { "focusAreaDomain": { "alias": "focusAreaDomain"; "required": true; "isSignal": true; }; "selectedStatus": { "alias": "selectedStatus"; "required": false; "isSignal": true; }; "selectedTools": { "alias": "selectedTools"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": true; "isSignal": true; }; }, { "statusChange": "statusChange"; "toolsClick": "toolsClick"; }, never, never, true, never>;
 }
@@ -2522,26 +2584,29 @@ declare class FocusAreaToolsModalComponent {
     protected otherToolsText: _angular_core.WritableSignal<string>;
     protected predefinedTools: _angular_core.WritableSignal<string[]>;
     protected hasAnyToolSelected: _angular_core.Signal<boolean>;
+    protected toolsDisplay: _angular_core.Signal<{
+        tool: string;
+        isSelected: boolean;
+    }[]>;
+    protected isLight: _angular_core.Signal<boolean>;
+    protected backdropClasses: _angular_core.Signal<"bg-black/15" | "bg-black/40">;
+    protected containerClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800 border border-slate-700">;
+    protected headerClasses: _angular_core.Signal<"bg-gradient-to-r from-white to-slate-50 border-slate-200" | "bg-gradient-to-r from-slate-800 to-slate-900 border-slate-700">;
+    protected titleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected closeButtonClasses: _angular_core.Signal<"text-slate-500 hover:bg-slate-100 hover:text-slate-700" | "text-slate-400 hover:bg-slate-700 hover:text-slate-200">;
+    protected labelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected checkboxClasses: _angular_core.Signal<"text-blue-600 border-slate-300 focus:ring-blue-500" | "text-blue-400 border-slate-600 focus:ring-blue-400 bg-slate-700">;
+    protected checkboxLabelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected textareaClasses: _angular_core.Signal<"bg-white text-slate-900 placeholder-slate-400 border-slate-300 focus:border-blue-500 focus:ring-blue-500" | "bg-slate-700 text-white placeholder-slate-500 border-slate-600 focus:border-blue-400 focus:ring-blue-400">;
+    protected footerClasses: _angular_core.Signal<"bg-gradient-to-r from-slate-50 to-white border-slate-200" | "bg-gradient-to-r from-slate-900 to-slate-800 border-slate-700">;
+    protected cancelButtonClasses: _angular_core.Signal<"bg-slate-200 text-slate-700 hover:bg-slate-300" | "bg-slate-700 text-slate-300 hover:bg-slate-600">;
+    protected saveButtonClasses: _angular_core.Signal<"bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white" | "bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white">;
     constructor();
     onEscapeKey(): void;
-    protected isLightMode(): boolean;
-    protected isToolSelected(tool: string): boolean;
     protected onToolToggle(tool: string, event: Event): void;
     protected onBackdropClick(): void;
     protected onClose(): void;
     protected onSave(): void;
-    protected backdropClasses(): string;
-    protected containerClasses(): string;
-    protected headerClasses(): string;
-    protected titleClasses(): string;
-    protected closeButtonClasses(): string;
-    protected labelClasses(): string;
-    protected checkboxClasses(): string;
-    protected checkboxLabelClasses(): string;
-    protected textareaClasses(): string;
-    protected footerClasses(): string;
-    protected cancelButtonClasses(): string;
-    protected saveButtonClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FocusAreaToolsModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FocusAreaToolsModalComponent, "symphiq-focus-area-tools-modal", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "focusAreaDomain": { "alias": "focusAreaDomain"; "required": true; "isSignal": true; }; "focusAreaTitle": { "alias": "focusAreaTitle"; "required": true; "isSignal": true; }; "selectedTools": { "alias": "selectedTools"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, { "close": "close"; "save": "save"; }, never, never, true, never>;
 }
@@ -2576,6 +2641,14 @@ declare class SymphiqConnectGaDashboardComponent implements AfterViewInit, OnDes
     protected currentSelectingPropertyId: _angular_core.WritableSignal<number | undefined>;
     protected isConnecting: _angular_core.Signal<boolean>;
     protected sortedGaProperties: _angular_core.Signal<GaPropertyInterface[] | undefined>;
+    protected propertiesDisplay: _angular_core.Signal<{
+        property: GaPropertyInterface;
+        cardClasses: string;
+        radioClasses: string;
+        isSelected: boolean;
+    }[]>;
+    private computePropertyCardClasses;
+    private computeRadioIndicatorClasses;
     protected isConnectState: _angular_core.Signal<boolean>;
     protected isSelectionState: _angular_core.Signal<boolean | undefined>;
     protected isSelectedState: _angular_core.Signal<boolean | undefined>;
@@ -2623,8 +2696,6 @@ declare class SymphiqConnectGaDashboardComponent implements AfterViewInit, OnDes
     protected chevronClasses(): string;
     protected expandedContentClasses(): string;
     protected expandedTextClasses(): string;
-    protected propertyCardClasses(propertyId: number): string;
-    protected radioIndicatorClasses(propertyId: number): string;
     protected propertyNameClasses(): string;
     protected accountNameClasses(): string;
     protected selectedPropertyCardClasses(): string;
@@ -2790,7 +2861,7 @@ declare class PacingStatusBadgeComponent implements OnDestroy {
     private animateValue;
     protected displayInfo: _angular_core.Signal<PacingDisplayInfo>;
     protected containerClasses: _angular_core.Signal<string>;
-    protected targetRotation: _angular_core.Signal<0 | 1 | -1>;
+    protected targetRotation: _angular_core.Signal<1 | -1 | 0>;
     protected rotationStyle: _angular_core.Signal<string>;
     protected fullBadgeRotationStyle: _angular_core.Signal<string>;
     protected containerSizeClasses: _angular_core.Signal<"inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0 pl-1.5" | "inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0 pl-2">;
@@ -2827,6 +2898,7 @@ declare class MetricReportModalComponent {
     pacingResponse: _angular_core.InputSignal<PacingResponseInterface | undefined>;
     trendChartData: _angular_core.InputSignal<AiChartInterface | null>;
     currencySymbol: _angular_core.InputSignal<string>;
+    showLiveIndicator: _angular_core.InputSignal<boolean>;
     isOpen: _angular_core.InputSignal<boolean>;
     closed: _angular_core.OutputEmitterRef<void>;
     protected showDefinition: _angular_core.WritableSignal<boolean>;
@@ -2910,7 +2982,7 @@ declare class MetricReportModalComponent {
     protected footerClasses(): string;
     protected closeFooterButtonClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricReportModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricReportModalComponent, "symphiq-metric-report-modal", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "metricEnum": { "alias": "metricEnum"; "required": false; "isSignal": true; }; "metricData": { "alias": "metricData"; "required": false; "isSignal": true; }; "contributingMetrics": { "alias": "contributingMetrics"; "required": false; "isSignal": true; }; "pacingResponse": { "alias": "pacingResponse"; "required": false; "isSignal": true; }; "trendChartData": { "alias": "trendChartData"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricReportModalComponent, "symphiq-metric-report-modal", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "metricEnum": { "alias": "metricEnum"; "required": false; "isSignal": true; }; "metricData": { "alias": "metricData"; "required": false; "isSignal": true; }; "contributingMetrics": { "alias": "contributingMetrics"; "required": false; "isSignal": true; }; "pacingResponse": { "alias": "pacingResponse"; "required": false; "isSignal": true; }; "trendChartData": { "alias": "trendChartData"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "showLiveIndicator": { "alias": "showLiveIndicator"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 declare class SymphiqBusinessAnalysisDashboardComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -3257,7 +3329,7 @@ declare class BusinessAnalysisModalComponent implements OnInit, OnDestroy {
     baseZIndex: _angular_core.Signal<number>;
     backdropZIndex: _angular_core.Signal<number>;
     contentZIndex: _angular_core.Signal<number>;
-    visualizationType: _angular_core.Signal<"horizontal-bar" | "circular-progress" | "napkin-visual" | "custom" | null>;
+    visualizationType: _angular_core.Signal<"custom" | "horizontal-bar" | "circular-progress" | "napkin-visual" | null>;
     horizontalBarData: _angular_core.Signal<{
         percentage: number;
         label: string;
@@ -3554,6 +3626,7 @@ declare class SymphiqProfileShopAnalysisDashboardComponent implements OnInit, On
         targetValue?: string;
         projectedValue?: string;
         pacingStatus?: _jebgem_model.PacingStatusEnum;
+        pacingStatusDescription?: string;
         yoyChange?: string;
         topPriorities?: _jebgem_model.MetricTopPriorityInterface[];
         quickWins?: _jebgem_model.QuickWinItemInterface[];
@@ -3693,25 +3766,23 @@ declare class SymphiqProfileShopAnalysisDashboardComponent implements OnInit, On
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqProfileShopAnalysisDashboardComponent, "symphiq-profile-shop-analysis-dashboard", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "requestedByUser": { "alias": "requestedByUser"; "required": false; "isSignal": true; }; "createdDate": { "alias": "createdDate"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "profileAnalysis": { "alias": "profileAnalysis"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "funnelAnalysis": { "alias": "funnelAnalysis"; "required": false; "isSignal": true; }; "focusAreaDetails": { "alias": "focusAreaDetails"; "required": false; "isSignal": true; }; "account": { "alias": "account"; "required": false; "isSignal": true; }; "profileShop": { "alias": "profileShop"; "required": false; "isSignal": true; }; "profileShopQuestions": { "alias": "profileShopQuestions"; "required": false; "isSignal": true; }; "profileAnswers": { "alias": "profileAnswers"; "required": false; "isSignal": true; }; "profileAnswerHistories": { "alias": "profileAnswerHistories"; "required": false; "isSignal": true; }; "itemStatusProfileShop": { "alias": "itemStatusProfileShop"; "required": false; "isSignal": true; }; "itemStatusProfileAnalysis": { "alias": "itemStatusProfileAnalysis"; "required": false; "isSignal": true; }; "planCardInfos": { "alias": "planCardInfos"; "required": false; "isSignal": true; }; "isOnboarded": { "alias": "isOnboarded"; "required": false; "isSignal": true; }; "scrollEvent": { "alias": "scrollEvent"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; "users": { "alias": "users"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "forDemo": { "alias": "forDemo"; "required": false; "isSignal": true; }; "currentUser": { "alias": "currentUser"; "required": false; "isSignal": true; }; "maxAccessibleStepId": { "alias": "maxAccessibleStepId"; "required": false; "isSignal": true; }; "isMarkingAsReviewed": { "alias": "isMarkingAsReviewed"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; "nextStepClick": "nextStepClick"; "currencySelectionClick": "currencySelectionClick"; "editCurrencyClick": "editCurrencyClick"; "periodUnitChanged": "periodUnitChanged"; "planSelected": "planSelected"; "checkoutPlanClick": "checkoutPlanClick"; "answerShopProfileQuestions": "answerShopProfileQuestions"; "continueShopProfileQuestions": "continueShopProfileQuestions"; "profileQuestionAnswerSave": "profileQuestionAnswerSave"; "shopProfileAdminAnswerAction": "shopProfileAdminAnswerAction"; "markAsReviewedClick": "markAsReviewedClick"; }, never, never, true, never>;
 }
 
+interface WhatYoullSeeBelowItem {
+    title: string;
+    description: string;
+}
+
 declare class ShopWelcomeBannerComponent {
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     businessName: _angular_core.InputSignal<string>;
     isOnboarded: _angular_core.InputSignal<boolean>;
     analysisDate: _angular_core.InputSignal<Date | undefined>;
+    protected readonly whatYoullSeeBelowItems: WhatYoullSeeBelowItem[];
     protected formattedAnalysisDate: _angular_core.Signal<string | null>;
     protected containerClasses(): string;
     protected contentClasses(): string;
     protected iconContainerClasses(): string;
     protected titleClasses(): string;
     protected textClasses(): string;
-    protected highlightBoxClasses(): string;
-    protected highlightIconClasses(): string;
-    protected highlightTitleClasses(): string;
-    protected highlightListClasses(): string;
-    protected nextStepsBoxClasses(): string;
-    protected nextStepsIconClasses(): string;
-    protected nextStepsTitleClasses(): string;
-    protected nextStepsTextClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShopWelcomeBannerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShopWelcomeBannerComponent, "symphiq-shop-welcome-banner", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "businessName": { "alias": "businessName"; "required": false; "isSignal": true; }; "isOnboarded": { "alias": "isOnboarded"; "required": false; "isSignal": true; }; "analysisDate": { "alias": "analysisDate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -3928,6 +3999,7 @@ declare class SymphiqProfileFocusAreasAnalysesDashboardComponent {
     protected readonly ProfileAnalysisReviewStatusEnum: typeof ProfileAnalysisReviewStatusEnum;
     protected readonly focusAreaStatusConfig: Partial<ProfileAnalysisStatusConfig>;
     protected readonly focusAreaCardConfig: Partial<ProfileAnalysisCardConfig>;
+    protected readonly whatYoullSeeBelowItems: WhatYoullSeeBelowItem[];
     private readonly COLLAPSE_THRESHOLD;
     private readonly EXPAND_THRESHOLD;
     onScroll(): void;
@@ -3952,6 +4024,7 @@ declare class SymphiqProfileFocusAreasAnalysesDashboardComponent {
         latest: Date;
     } | null>;
     formattedAnalysisDateRange: _angular_core.Signal<string | null>;
+    analysisDatePreposition: _angular_core.Signal<string>;
     genericCardData: _angular_core.Signal<ProfileAnalysisCardData<FocusAreaDomainEnum, ProfileFocusAreaInterface>[]>;
     handleCardClick(event: CardClickEvent<FocusAreaDomainEnum, ProfileFocusAreaInterface>): void;
     handleFooterClick(profileFocusArea: ProfileFocusAreaInterface | null): void;
@@ -3973,10 +4046,6 @@ declare class SymphiqProfileFocusAreasAnalysesDashboardComponent {
     getWelcomeBannerHighlightIconClasses(): string;
     getWelcomeBannerHighlightTitleClasses(): string;
     getWelcomeBannerHighlightListClasses(): string;
-    getWelcomeBannerNextStepsClasses(): string;
-    getWelcomeBannerNextStepsIconClasses(): string;
-    getWelcomeBannerNextStepsTitleClasses(): string;
-    getWelcomeBannerNextStepsTextClasses(): string;
     getStatusComponentContainerClasses(): string;
     getStatusSectionTitleClasses(): string;
     private getIconForDomain;
@@ -4273,6 +4342,8 @@ declare class SymphiqProfileMetricsAnalysesDashboardComponent {
         latest: Date;
     } | null>;
     formattedAnalysisDateRange: _angular_core.Signal<string | null>;
+    analysisDatePreposition: _angular_core.Signal<string>;
+    protected readonly whatYoullSeeBelowItems: WhatYoullSeeBelowItem[];
     genericCardData: _angular_core.Signal<ProfileAnalysisCardData<MetricEnum, ProfileMetricInterface>[]>;
     getCurrentMetricForConfidence(): string | undefined;
     handleCardClick(event: CardClickEvent<MetricEnum, ProfileMetricInterface>): void;
@@ -4282,14 +4353,6 @@ declare class SymphiqProfileMetricsAnalysesDashboardComponent {
     getWelcomeBannerIconClasses(): string;
     getWelcomeBannerTitleClasses(): string;
     getWelcomeBannerTextClasses(): string;
-    getWelcomeBannerHighlightClasses(): string;
-    getWelcomeBannerHighlightIconClasses(): string;
-    getWelcomeBannerHighlightTitleClasses(): string;
-    getWelcomeBannerHighlightListClasses(): string;
-    getWelcomeBannerNextStepsClasses(): string;
-    getWelcomeBannerNextStepsIconClasses(): string;
-    getWelcomeBannerNextStepsTitleClasses(): string;
-    getWelcomeBannerNextStepsTextClasses(): string;
     private getIconForMetric;
     private getMetricDescription;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqProfileMetricsAnalysesDashboardComponent, never>;
@@ -4441,6 +4504,7 @@ declare class SymphiqProfileAnalysisMetricDashboardComponent implements OnInit,
         targetValue?: string;
         projectedValue?: string;
         pacingStatus?: _jebgem_model.PacingStatusEnum;
+        pacingStatusDescription?: string;
         yoyChange?: string;
         topPriorities?: _jebgem_model.MetricTopPriorityInterface[];
         quickWins?: _jebgem_model.QuickWinItemInterface[];
@@ -4541,6 +4605,7 @@ declare class MetricWelcomeBannerComponent {
     analysisDate: _angular_core.InputSignal<Date | undefined>;
     protected readonly IconSourceEnum: typeof IconSourceEnum;
     protected formattedAnalysisDate: _angular_core.Signal<string | null>;
+    protected whatYoullSeeBelowItems: _angular_core.Signal<WhatYoullSeeBelowItem[]>;
     protected metricDisplayName: _angular_core.Signal<string>;
     protected metricIcon: _angular_core.Signal<{
         name: string;
@@ -4551,14 +4616,6 @@ declare class MetricWelcomeBannerComponent {
     protected iconContainerClasses(): string;
     protected titleClasses(): string;
     protected textClasses(): string;
-    protected highlightBoxClasses(): string;
-    protected highlightIconClasses(): string;
-    protected highlightTitleClasses(): string;
-    protected highlightListClasses(): string;
-    protected nextStepsBoxClasses(): string;
-    protected nextStepsIconClasses(): string;
-    protected nextStepsTitleClasses(): string;
-    protected nextStepsTextClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricWelcomeBannerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricWelcomeBannerComponent, "symphiq-metric-welcome-banner", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "metricName": { "alias": "metricName"; "required": false; "isSignal": true; }; "isOnboarded": { "alias": "isOnboarded"; "required": false; "isSignal": true; }; "analysisDate": { "alias": "analysisDate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -4573,32 +4630,40 @@ declare class FocusAreaExecutiveSummaryComponent {
         index: number;
     }>;
     protected readonly IconSourceEnum: typeof IconSourceEnum;
+    protected isLight: _angular_core.Signal<boolean>;
+    protected quickWinsDisplay: _angular_core.Signal<{
+        win: QuickWinItemInterface;
+        effortLabel: string;
+        impactLabel: string;
+        effortBadgeClasses: string;
+        impactBadgeClasses: string;
+    }[]>;
+    private computeFormatLabel;
+    private computeEffortBadgeClasses;
+    private computeImpactBadgeClasses;
+    protected bannerClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
+    protected sectionTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected subheadingClasses: _angular_core.Signal<"text-slate-800" | "text-slate-200">;
+    protected textClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected narrativeClasses: _angular_core.Signal<"bg-slate-50 border border-slate-200" | "bg-slate-900/30 border border-slate-700/50">;
+    protected topPrioritiesStatCardClasses: _angular_core.Signal<"bg-purple-50 border-2 border-purple-200 hover:border-purple-400 hover:shadow-lg hover:shadow-purple-100/50" | "bg-purple-500/10 border-2 border-purple-500/30 hover:border-purple-400/50 hover:shadow-lg hover:shadow-purple-500/10">;
+    protected topPrioritiesStatLabelClasses: _angular_core.Signal<"text-purple-700" | "text-purple-400">;
+    protected topPrioritiesStatValueClasses: _angular_core.Signal<"text-purple-900" | "text-purple-100">;
+    protected topPrioritiesButtonTextClasses: _angular_core.Signal<"text-purple-700" | "text-purple-400">;
+    protected quickWinsStatCardClasses: _angular_core.Signal<"bg-blue-50 border-2 border-blue-200 hover:border-blue-400 hover:shadow-lg hover:shadow-blue-100/50" | "bg-blue-500/10 border-2 border-blue-500/30 hover:border-blue-400/50 hover:shadow-lg hover:shadow-blue-500/10">;
+    protected quickWinsStatLabelClasses: _angular_core.Signal<"text-blue-400" | "text-blue-700">;
+    protected quickWinsStatValueClasses: _angular_core.Signal<"text-blue-900" | "text-blue-100">;
+    protected quickWinsButtonTextClasses: _angular_core.Signal<"text-blue-400" | "text-blue-700">;
+    protected quickWinCardClasses: _angular_core.Signal<"bg-white border border-slate-200 hover:border-blue-300 hover:shadow-xl" | "bg-slate-800/50 border border-slate-700/50 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10">;
+    protected quickWinTextClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
+    protected numberBadgeClasses: _angular_core.Signal<"bg-gradient-to-br from-blue-400 to-cyan-400 text-white" | "bg-gradient-to-br from-blue-500 to-cyan-500 text-white">;
+    protected metaTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected onTopPrioritiesClick(): void;
     protected onPriorityDetailClick(event: {
         priority: FocusAreaTopPriorityInterface;
         index: number;
     }): void;
     protected scrollToQuickWins(): void;
-    protected formatLabel(label?: string): string;
-    protected getBannerClasses(): string;
-    protected getSectionTitleClasses(): string;
-    protected getSubheadingClasses(): string;
-    protected getTextClasses(): string;
-    protected getNarrativeClasses(): string;
-    protected getTopPrioritiesStatCardClasses(): string;
-    protected getTopPrioritiesStatLabelClasses(): string;
-    protected getTopPrioritiesStatValueClasses(): string;
-    protected getTopPrioritiesButtonTextClasses(): string;
-    protected getQuickWinsStatCardClasses(): string;
-    protected getQuickWinsStatLabelClasses(): string;
-    protected getQuickWinsStatValueClasses(): string;
-    protected getQuickWinsButtonTextClasses(): string;
-    protected getQuickWinCardClasses(): string;
-    protected getQuickWinTextClasses(): string;
-    protected getNumberBadgeClasses(): string;
-    protected getEffortBadgeClasses(effort?: string): string;
-    protected getImpactBadgeClasses(impact?: string): string;
-    protected getMetaTextClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FocusAreaExecutiveSummaryComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FocusAreaExecutiveSummaryComponent, "symphiq-focus-area-executive-summary", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "allGoals": { "alias": "allGoals"; "required": false; "isSignal": true; }; }, { "topPrioritiesClick": "topPrioritiesClick"; "priorityDetailClick": "priorityDetailClick"; }, never, never, true, never>;
 }
@@ -4620,35 +4685,35 @@ declare class MetricExecutiveSummaryComponent {
     protected bannerClasses: _angular_core.Signal<"bg-gradient-to-br from-slate-800/50 to-slate-800/30 border border-slate-700/50" | "bg-gradient-to-br from-white to-slate-50/50 border border-slate-200">;
     protected titleClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
     protected textClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
-    protected iconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected iconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected healthBadgeClasses: _angular_core.Signal<string>;
     protected pacingBadgeClasses: _angular_core.Signal<string>;
     protected metricCardClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
-    protected viewDetailsTextClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected viewDetailsTextClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected viewDetailsButtonClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-300 border border-blue-500/40 hover:bg-blue-500/30" | "bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100">;
     protected viewReportButtonClasses: _angular_core.Signal<"bg-slate-700/50 text-slate-300 border border-slate-600 hover:bg-slate-600/50" | "bg-slate-100 text-slate-700 border border-slate-300 hover:bg-slate-200">;
-    protected metricLabelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected metricLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected metricValueClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected yoyChangeClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400" | "text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
+    protected yoyChangeClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600" | "text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
     protected getYoyIcon(): string;
     protected getPacingValueClasses(): string;
     protected getHealthValueClasses(): string;
     protected healthDescriptionClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     protected narrativeClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-600/20">;
     protected narrativeTitleClasses: _angular_core.Signal<"text-slate-800" | "text-slate-200">;
-    protected narrativeTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected narrativeTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected sectionTitleClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
     protected priorityCardClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50 hover:border-slate-600/70" | "bg-white border border-slate-200 hover:border-slate-300">;
     protected priorityNumberClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-300" | "bg-blue-100 text-blue-800">;
     protected priorityTitleClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
     protected priorityTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected impactBoxClasses: _angular_core.Signal<"bg-slate-800/30 border border-slate-700/30" | "bg-slate-50/50 border border-slate-200">;
-    protected impactLabelClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
-    protected impactTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected impactLabelClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
+    protected impactTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected quickWinCardClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
     protected numberBadgeClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-300" | "bg-blue-100 text-blue-800">;
     protected quickWinTextClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected metaTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected metaTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected getEffortBadgeClasses(effort: string | undefined): string;
     protected getImpactBadgeClasses(impact: string | undefined): string;
     protected formatMetricName(name: string): string;
@@ -4960,7 +5025,7 @@ declare class FocusAreaStatusCardComponent {
     protected generatingMessage: _angular_core.Signal<"Generating Profile Questions..." | "Generating Analysis..." | "Generating...">;
     protected hasAnalysis: _angular_core.Signal<boolean>;
     protected hasProfile: _angular_core.Signal<boolean>;
-    protected profileCompletionPercentage: _angular_core.Signal<0 | 50 | 100>;
+    protected profileCompletionPercentage: _angular_core.Signal<0 | 100 | 50>;
     protected isProfileComplete: _angular_core.Signal<boolean>;
     protected handleCardClick(): void;
     protected cardClasses(): string;
@@ -5054,14 +5119,17 @@ declare class VisualizationContainerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VisualizationContainerComponent, "symphiq-visualization-container", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "visualizationType": { "alias": "visualizationType"; "required": false; "isSignal": true; }; "visualizationData": { "alias": "visualizationData"; "required": false; "isSignal": true; }; "disableInteraction": { "alias": "disableInteraction"; "required": false; "isSignal": true; }; }, { "visualizationClick": "visualizationClick"; }, never, ["*"], true, never>;
 }
 
+type ScrollProgressBarColorScheme = 'blue-purple' | 'blue-cyan';
 declare class ScrollProgressBarComponent {
+    viewMode: _angular_core.InputSignal<ViewModeEnum>;
     progress: _angular_core.InputSignal<number>;
-    isLightMode: _angular_core.InputSignal<boolean>;
     embedded: _angular_core.InputSignal<boolean>;
-    protected getContainerClasses(): string;
-    protected getGradientClasses(): string;
+    colorScheme: _angular_core.InputSignal<ScrollProgressBarColorScheme>;
+    protected isLightMode: _angular_core.Signal<boolean>;
+    protected containerClasses: _angular_core.Signal<string>;
+    protected barClasses: _angular_core.Signal<"bg-gradient-to-r from-blue-500 to-cyan-500" | "bg-gradient-to-r from-blue-400 to-cyan-400" | "bg-gradient-to-r from-blue-500 to-purple-500" | "bg-gradient-to-r from-blue-400 to-purple-400">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollProgressBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollProgressBarComponent, "symphiq-scroll-progress-bar", never, { "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollProgressBarComponent, "symphiq-scroll-progress-bar", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface IconObjectInterface {
@@ -5125,21 +5193,21 @@ declare class SearchModalComponent {
     containerClass: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800 border border-slate-700">;
     inputClass: _angular_core.Signal<"bg-white text-slate-900 placeholder-slate-400" | "bg-slate-800 text-white placeholder-slate-500">;
     iconClass: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
-    clearButtonClass: _angular_core.Signal<"bg-slate-100 text-slate-600 hover:bg-slate-200" | "bg-slate-700 text-slate-300 hover:bg-slate-600">;
+    clearButtonClass: _angular_core.Signal<"bg-slate-700 text-slate-300 hover:bg-slate-600" | "bg-slate-100 text-slate-600 hover:bg-slate-200">;
     closeButtonClass: _angular_core.Signal<"text-slate-400 hover:text-slate-600 hover:bg-slate-100" | "text-slate-500 hover:text-slate-300 hover:bg-slate-700">;
     resultsContainerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     resultTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
-    resultDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    resultDescClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     breadcrumbClass: _angular_core.Signal<string>;
-    typeBadgeClass: _angular_core.Signal<"bg-slate-100 text-slate-600" | "bg-slate-700 text-slate-300">;
+    typeBadgeClass: _angular_core.Signal<"bg-slate-700 text-slate-300" | "bg-slate-100 text-slate-600">;
     arrowClass: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     emptyStateClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     emptyIconClass: _angular_core.Signal<"text-slate-600" | "text-slate-300">;
     emptyTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
-    emptyDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
-    shortcutsClass: _angular_core.Signal<"bg-slate-900/50 border-slate-700" | "bg-slate-50 border-slate-200">;
+    emptyDescClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    shortcutsClass: _angular_core.Signal<"bg-slate-50 border-slate-200" | "bg-slate-900/50 border-slate-700">;
     kbdClass: _angular_core.Signal<"bg-white border border-slate-300 text-slate-700 shadow-sm" | "bg-slate-700 border border-slate-600 text-slate-300">;
-    shortcutTextClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    shortcutTextClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchModalComponent, "symphiq-search-modal", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "results": { "alias": "results"; "required": false; "isSignal": true; }; "hasResults": { "alias": "hasResults"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; "resultSelected": "resultSelected"; "close": "close"; }, never, never, true, never>;
 }
@@ -5201,7 +5269,7 @@ declare class GradeBadgeComponent {
         explanation: string;
     }>;
     private formatGrade;
-    badgeLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    badgeLabelClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     gradeBadgeClass: _angular_core.Signal<string>;
     private getGradeBadgeClassLight;
     private getGradeBadgeClassDark;
@@ -5283,15 +5351,15 @@ declare class ConfidenceLevelCardComponent implements OnInit, OnDestroy {
     protected cardContainerClasses: _angular_core.Signal<"border-2 shadow-2xl bg-slate-800/60 border-slate-700/50 backdrop-blur-xl" | "border-2 shadow-2xl bg-white/90 border-slate-200/50 backdrop-blur-xl shadow-slate-200/50">;
     protected backgroundOverlayClasses: _angular_core.Signal<"bg-gradient-to-br from-emerald-500/30 via-teal-500/20 to-emerald-500/30" | "bg-gradient-to-br from-emerald-400/20 via-teal-400/10 to-emerald-400/20" | "bg-gradient-to-br from-blue-500/30 via-cyan-500/20 to-blue-500/30" | "bg-gradient-to-br from-blue-400/20 via-cyan-400/10 to-blue-400/20" | "bg-gradient-to-br from-orange-500/30 via-amber-500/20 to-orange-500/30" | "bg-gradient-to-br from-orange-400/20 via-amber-400/10 to-orange-400/20" | "bg-gradient-to-br from-red-500/30 via-rose-500/20 to-red-500/30" | "bg-gradient-to-br from-red-400/20 via-rose-400/10 to-red-400/20">;
     protected titleClasses: _angular_core.Signal<"text-white" | "bg-gradient-to-r from-slate-700 to-slate-900 bg-clip-text text-transparent">;
-    protected subtitleClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected subtitleClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected gradeBadgeContainerClasses: _angular_core.Signal<string>;
     protected glowEffectClasses: _angular_core.Signal<"bg-emerald-500" | "bg-blue-500" | "bg-orange-500" | "bg-red-500">;
     protected gradeBadgeClasses: _angular_core.Signal<"bg-gradient-to-br from-emerald-500/30 to-teal-500/30 border-2 border-emerald-500/50 shadow-[0_0_20px_rgba(16,185,129,0.3)]" | "bg-gradient-to-br from-emerald-50 to-teal-50 border-2 border-emerald-300/50 shadow-[0_0_20px_rgba(16,185,129,0.2)]" | "bg-gradient-to-br from-blue-500/30 to-cyan-500/30 border-2 border-blue-500/50 shadow-[0_0_20px_rgba(59,130,246,0.3)]" | "bg-gradient-to-br from-blue-50 to-cyan-50 border-2 border-blue-300/50 shadow-[0_0_20px_rgba(59,130,246,0.2)]" | "bg-gradient-to-br from-orange-500/30 to-amber-500/30 border-2 border-orange-500/50 shadow-[0_0_20px_rgba(249,115,22,0.3)]" | "bg-gradient-to-br from-orange-50 to-amber-50 border-2 border-orange-300/50 shadow-[0_0_20px_rgba(249,115,22,0.2)]" | "bg-gradient-to-br from-red-500/30 to-rose-500/30 border-2 border-red-500/50 shadow-[0_0_20px_rgba(239,68,68,0.3)]" | "bg-gradient-to-br from-red-50 to-rose-50 border-2 border-red-300/50 shadow-[0_0_20px_rgba(239,68,68,0.2)]">;
-    protected gradeLabelClasses: _angular_core.Signal<"text-emerald-700" | "text-red-700" | "text-blue-700" | "text-orange-700" | "text-red-300" | "text-blue-300" | "text-emerald-300" | "text-orange-300">;
+    protected gradeLabelClasses: _angular_core.Signal<"text-emerald-700" | "text-red-700" | "text-blue-700" | "text-emerald-300" | "text-blue-300" | "text-orange-700" | "text-red-300" | "text-orange-300">;
     protected gradeValueClasses: _angular_core.Signal<"bg-gradient-to-b from-emerald-300 to-emerald-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-emerald-600 to-emerald-800 bg-clip-text text-transparent" | "bg-gradient-to-b from-blue-300 to-blue-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-blue-600 to-blue-800 bg-clip-text text-transparent" | "bg-gradient-to-b from-orange-300 to-orange-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-orange-600 to-orange-800 bg-clip-text text-transparent" | "bg-gradient-to-b from-red-300 to-red-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-red-600 to-red-800 bg-clip-text text-transparent">;
     protected descriptionClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected progressLabelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
-    protected progressValueClasses: _angular_core.Signal<"text-emerald-400" | "text-red-400" | "text-blue-400" | "text-emerald-600" | "text-red-600" | "text-orange-600" | "text-orange-400" | "text-blue-600">;
+    protected progressValueClasses: _angular_core.Signal<"text-emerald-400" | "text-red-400" | "text-blue-600" | "text-blue-400" | "text-emerald-600" | "text-red-600" | "text-orange-600" | "text-orange-400">;
     protected progressTrackClasses: _angular_core.Signal<"bg-slate-700/50 shadow-inner" | "bg-slate-200 shadow-inner">;
     protected progressBarClasses: _angular_core.Signal<"rounded-full overflow-hidden bg-gradient-to-r from-emerald-500 via-teal-500 to-emerald-600" | "rounded-full overflow-hidden bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-600" | "rounded-full overflow-hidden bg-gradient-to-r from-orange-500 via-amber-500 to-orange-600" | "rounded-full overflow-hidden bg-gradient-to-r from-red-500 via-rose-500 to-red-600">;
     protected shimmerClasses: _angular_core.Signal<string>;
@@ -5313,12 +5381,12 @@ declare class RelatedContentSidebarComponent {
     protected funnelInsightsCount: _angular_core.Signal<number>;
     protected funnelMetricsCount: _angular_core.Signal<number>;
     protected businessInsightsCount: _angular_core.Signal<number>;
-    protected headerClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected headerClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected buttonClasses: _angular_core.Signal<"bg-slate-50 border-slate-200 hover:border-blue-500/50 hover:bg-slate-100" | "bg-slate-800/50 border-slate-700 hover:border-blue-500/50 hover:bg-slate-700/50">;
     protected iconBgClasses: _angular_core.Signal<"bg-blue-100 text-blue-600" | "bg-blue-900/30 text-blue-400">;
-    protected iconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected iconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected countClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
-    protected labelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected labelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected chevronClasses: _angular_core.Signal<"text-slate-500 group-hover:text-blue-400" | "text-slate-400 group-hover:text-blue-600">;
     protected onFunnelInsightsClick(): void;
     protected onFunnelMetricsClick(): void;
@@ -5341,7 +5409,7 @@ declare class ContentGenerationProgressComponent {
     protected containerClasses: _angular_core.Signal<string>;
     protected iconContainerClasses: _angular_core.Signal<"bg-gradient-to-br from-blue-500 to-purple-500 text-white shadow-lg shadow-blue-500/30" | "bg-gradient-to-br from-blue-400 to-purple-400 text-white shadow-lg shadow-blue-400/30">;
     protected titleClasses: _angular_core.Signal<"bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent" | "bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400 bg-clip-text text-transparent">;
-    protected subtitleClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected subtitleClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     protected progressMessageClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected progressBarContainerClasses: _angular_core.Signal<string>;
     protected progressBarBackgroundClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
@@ -5349,7 +5417,7 @@ declare class ContentGenerationProgressComponent {
     protected dotClasses: _angular_core.Signal<"bg-blue-400 shadow-lg shadow-blue-400/60" | "bg-cyan-300 shadow-lg shadow-cyan-300/60">;
     protected dotColor: _angular_core.Signal<"#60a5fa" | "#67e8f9">;
     protected progressGlowClasses: _angular_core.Signal<"bg-blue-400 shadow-xl" | "bg-cyan-300 shadow-xl">;
-    protected percentageClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected percentageClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentGenerationProgressComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentGenerationProgressComponent, "symphiq-content-generation-progress", never, { "itemStatus": { "alias": "itemStatus"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "compactTitle": { "alias": "compactTitle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -5379,8 +5447,8 @@ declare class IndeterminateSpinnerComponent {
     svgSize: _angular_core.Signal<60 | 40 | 80>;
     circleRadius: _angular_core.Signal<16 | 36 | 26>;
     svgCircleRadius: _angular_core.Signal<number>;
-    strokeWidth: _angular_core.Signal<2 | 3 | 2.5>;
-    dotSize: _angular_core.Signal<10 | 5 | 7>;
+    strokeWidth: _angular_core.Signal<3 | 2 | 2.5>;
+    dotSize: _angular_core.Signal<5 | 10 | 7>;
     containerClasses: _angular_core.Signal<{
         'w-10 h-10': boolean;
         'w-[60px] h-[60px]': boolean;
@@ -5442,7 +5510,7 @@ declare class ChartContainerComponent {
     containerClass: _angular_core.Signal<"bg-white border-slate-200 hover:border-blue-300 hover:shadow-blue-100/50" | "bg-slate-800 border-slate-700 hover:border-slate-600 hover:shadow-slate-900/50">;
     headerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     titleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
-    descriptionClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    descriptionClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
     iconClass: _angular_core.Signal<"text-slate-400 group-hover:text-blue-500" | "text-slate-500 group-hover:text-blue-400">;
     chartIconClass: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-blue-100 text-blue-600">;
     expandButtonClass: _angular_core.Signal<"bg-blue-100 text-blue-600 hover:bg-blue-200" | "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30">;
@@ -5508,7 +5576,7 @@ declare class BarChartComponent implements OnInit, AfterViewInit, OnDestroy {
     showAxisLabels: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     currencySymbol: _angular_core.InputSignal<string>;
-    chartHeight: _angular_core.Signal<"175px" | "500px">;
+    chartHeight: _angular_core.Signal<"500px" | "175px">;
     cursorColor: _angular_core.Signal<9741240 | 16777215>;
     tooltipTextColor: _angular_core.Signal<0 | 16777215>;
     chartHash: _angular_core.Signal<string>;
@@ -5545,7 +5613,7 @@ declare class PieChartComponent implements OnInit, AfterViewInit, OnDestroy {
     showAxisLabels: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     currencySymbol: _angular_core.InputSignal<string>;
-    chartHeight: _angular_core.Signal<"200px" | "500px">;
+    chartHeight: _angular_core.Signal<"500px" | "200px">;
     chartHash: _angular_core.Signal<string>;
     chartDiv: ElementRef;
     private root?;
@@ -5651,7 +5719,7 @@ declare class TooltipContainerComponent implements AfterViewInit, OnDestroy {
     shouldCenter: _angular_core.Signal<boolean>;
     containerClass: _angular_core.Signal<"" | "-translate-x-1/2">;
     contentClass: _angular_core.Signal<"bg-white/95 border-slate-300 text-slate-900" | "bg-slate-800/95 border-slate-600 text-white">;
-    textClass: _angular_core.Signal<"text-slate-200" | "text-slate-700">;
+    textClass: _angular_core.Signal<"text-slate-700" | "text-slate-200">;
     viewMoreButtonClass: _angular_core.Signal<"bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-200 hover:border-blue-400 hover:text-blue-800 active:bg-blue-300" | "bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:bg-blue-500/30 hover:border-blue-500/40 hover:text-blue-300 active:bg-blue-500/40">;
     transformStyle: _angular_core.Signal<"none" | "translateX(-192px)">;
     constructor();
@@ -5781,11 +5849,11 @@ declare class FocusAreaDetailCardComponent {
     protected metaLabelClasses: _angular_core.Signal<"text-xs font-medium text-slate-400 uppercase tracking-wide" | "text-xs font-medium text-slate-600 uppercase tracking-wide">;
     protected toolChipClasses: _angular_core.Signal<"px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-300 text-xs border border-emerald-500/30" | "px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-700 text-xs border border-emerald-200">;
     protected expandedSectionClasses: _angular_core.Signal<"p-4 rounded-lg bg-slate-700/30 border border-slate-600/30" | "p-4 rounded-lg bg-slate-50 border border-slate-200">;
-    protected expandedIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected expandedIconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected expandedTitleClasses: _angular_core.Signal<"text-sm font-semibold text-white" | "text-sm font-semibold text-slate-900">;
     protected insightItemClasses: _angular_core.Signal<"text-sm text-slate-300 leading-relaxed flex" | "text-sm text-slate-600 leading-relaxed flex">;
     protected expandButtonClasses: _angular_core.Signal<"text-sm font-medium text-blue-400" | "text-sm font-medium text-blue-600">;
-    protected chevronClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected chevronClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected toggleExpanded(): void;
     protected toggleCompetitiveGap(): void;
     onExpandItem(event: CustomEvent): void;
@@ -5861,11 +5929,11 @@ declare class CompetitorAnalysisCardComponent {
     protected linkClasses: _angular_core.Signal<"text-sm text-blue-400 hover:text-blue-300 underline transition-colors" | "text-sm text-blue-600 hover:text-blue-700 underline transition-colors">;
     protected listItemClasses: _angular_core.Signal<"text-sm text-slate-200 leading-relaxed flex items-start" | "text-sm text-slate-600 leading-relaxed flex items-start">;
     protected expandedSectionClasses: _angular_core.Signal<"p-4 rounded-lg bg-slate-700/30 border border-slate-600/30" | "p-4 rounded-lg bg-slate-50 border border-slate-200">;
-    protected expandedIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected expandedIconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected expandedTitleClasses: _angular_core.Signal<"text-sm font-semibold text-white" | "text-sm font-semibold text-slate-900">;
     protected expandedTextClasses: _angular_core.Signal<"text-sm text-slate-300 leading-relaxed" | "text-sm text-slate-600 leading-relaxed">;
     protected expandButtonClasses: _angular_core.Signal<"text-sm font-medium text-blue-400" | "text-sm font-medium text-blue-600">;
-    protected chevronClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected chevronClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
     protected toggleExpanded(): void;
     protected navigateToItem(item: ProfileItemInterface): void;
     onExpandItem(event: CustomEvent): void;
@@ -5885,7 +5953,7 @@ declare class OpportunityHighlightBannerComponent {
     protected titleClasses: _angular_core.Signal<"text-amber-300" | "text-amber-900">;
     protected badgeClasses: _angular_core.Signal<"bg-amber-500/30 text-amber-300" | "bg-amber-200 text-amber-800">;
     protected messageClasses: _angular_core.Signal<"text-amber-700" | "text-amber-400/90">;
-    protected chevronClasses: _angular_core.Signal<"text-amber-600" | "text-amber-400">;
+    protected chevronClasses: _angular_core.Signal<"text-amber-400" | "text-amber-600">;
     handleClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OpportunityHighlightBannerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OpportunityHighlightBannerComponent, "symphiq-opportunity-highlight-banner", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "isDark": { "alias": "isDark"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; }, { "bannerClick": "bannerClick"; }, never, never, true, never>;
@@ -6138,5 +6206,5 @@ declare function validateRevenueTarget(targetRevenue: number, calculations: Metr
 };
 
 export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DashboardHeaderComponent, DataLoaderService, DisplayModeEnum, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaStatusCardComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionAnswerComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisFocusAreaDashboardComponent, SymphiqProfileAnalysisMetricDashboardComponent, SymphiqProfileFocusAreaDashboardComponent, SymphiqProfileFocusAreasAnalysesDashboardComponent, SymphiqProfileMetricDashboardComponent, SymphiqProfileMetricsAnalysesDashboardComponent, SymphiqProfileShopAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewModeSwitcherModalComponent, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
-export type { AnimationType, AvatarSize, BusinessInsightDetailModalData, BusinessSearchResult, CategoryColorPalette, CategoryDetailModalData, CategoryProgressItem, ChartThemeColors, ConfettiConfig, ConfettiIntensity, CreateAccountData, CriticalGapDetailModalData, CriticalGapsListModalData, CrossDashboardRelationships, DataKey, FocusAreaGapDetailModalData, FocusAreaGapsListModalData, FocusAreaOpportunitiesListModalData, FocusAreaOpportunityDetailModalData, FocusAreaStrengthDetailModalData, FocusAreaStrengthsListModalData, FunnelMetricOrder, FunnelRatio, FunnelStrengthDetailModalData, FunnelStrengthInterface, FunnelStrengthsListModalData, FunnelWeaknessDetailModalData, FunnelWeaknessInterface, FunnelWeaknessesListModalData, GapDetailModalData, GoalBusinessInsightsListModalData, GoalDetailModalData, GoalInsightsListModalData, GoalObjectivesModalData, HeaderScrollConfig, ItemDetailModalData, JourneyStep$1 as JourneyStep, KeyStrengthDetailModalData, KeyStrengthsListModalData, LayoutMode, Metric, MetricAnalysisNavigationData, MetricTargetCalculation, MetricTargetWithPrecision, MetricsListModalData, ModalState, NavSection, NavigationState, ObjectiveStrategiesModalData, OpportunityDetailModalData, ProfileAnalysisNavigationData, ProfileQuestionAnswerSaveEvent, RecommendationBusinessInsightsListModalData, RecommendationInsightsListModalData, RelatedBusinessContent, RelatedFunnelContent, RelatedMetricRatio, RevenueCalculationResult, ReverseCalculationContext, SaveActionType, ScrollBaseCustomEvent, ScrollBaseDetail, ScrollCustomEvent, ScrollDepthInfo, ScrollDetail, SemanticColors, ShadowLevel, ShopProfileViewType, SpinnerSize, StrategyRecommendationsModalData, StrengthDetailModalData, ThemeColorContext, ThemeMode, TooltipPosition, TooltipState, TooltipType, TopPrioritiesListModalData, TopPriorityDetailModalData, TopPriorityInterface, ViewMode, ViewportBounds, VisualizationData, VisualizationType };
+export type { AnimationType, AvatarSize, BusinessInsightDetailModalData, BusinessSearchResult, CategoryColorPalette, CategoryDetailModalData, CategoryProgressItem, ChartThemeColors, ConfettiConfig, ConfettiIntensity, CreateAccountData, CriticalGapDetailModalData, CriticalGapsListModalData, CrossDashboardRelationships, DataKey, FocusAreaGapDetailModalData, FocusAreaGapsListModalData, FocusAreaOpportunitiesListModalData, FocusAreaOpportunityDetailModalData, FocusAreaStrengthDetailModalData, FocusAreaStrengthsListModalData, FunnelMetricOrder, FunnelRatio, FunnelStrengthDetailModalData, FunnelStrengthInterface, FunnelStrengthsListModalData, FunnelWeaknessDetailModalData, FunnelWeaknessInterface, FunnelWeaknessesListModalData, GapDetailModalData, GoalBusinessInsightsListModalData, GoalDetailModalData, GoalInsightsListModalData, GoalObjectivesModalData, HeaderScrollConfig, ItemDetailModalData, JourneyStep$1 as JourneyStep, KeyStrengthDetailModalData, KeyStrengthsListModalData, LayoutMode, Metric, MetricAnalysisNavigationData, MetricTargetCalculation, MetricTargetWithPrecision, MetricsListModalData, ModalState, NavSection, NavigationState, ObjectiveStrategiesModalData, OpportunityDetailModalData, ProfileAnalysisNavigationData, ProfileQuestionAnswerSaveEvent, RecommendationBusinessInsightsListModalData, RecommendationInsightsListModalData, RelatedBusinessContent, RelatedFunnelContent, RelatedMetricRatio, RevenueCalculationResult, ReverseCalculationContext, SaveActionType, ScrollBaseCustomEvent, ScrollBaseDetail, ScrollCustomEvent, ScrollDepthInfo, ScrollDetail, ScrollProgressBarColorScheme, SemanticColors, ShadowLevel, ShopProfileViewType, SpinnerSize, StrategyRecommendationsModalData, StrengthDetailModalData, ThemeColorContext, ThemeMode, TooltipPosition, TooltipState, TooltipType, TopPrioritiesListModalData, TopPriorityDetailModalData, TopPriorityInterface, ViewMode, ViewportBounds, VisualizationData, VisualizationType };
 //# sourceMappingURL=index.d.ts.map