@eric-emg/symphiq-components 1.2.556 → 1.2.558

package/index.d.ts

@@ -1072,7 +1072,7 @@ declare class ModalComponent {
     private animatedTrendValues;
     private animationFrames;
     isOpen: _angular_core.Signal<boolean>;
-    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>;
+    modalType: _angular_core.Signal<"insight" | "metric" | "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<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    metricsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | 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<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    chartsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | 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<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    recommendationsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | 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<AiChartInterface | PerformanceMetricInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    competitiveAnalysisData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
     competitiveAnalysisContext: _angular_core.Signal<{
         title: string;
         description: string;
@@ -1383,20 +1383,42 @@ declare class ViewModeSwitcherModalComponent {
     modeSelected: _angular_core.OutputEmitterRef<DisplayModeEnum>;
     protected DisplayModeEnum: typeof DisplayModeEnum;
     protected selectMode(mode: DisplayModeEnum): void;
-    protected backdropClasses(): string;
-    protected modalClasses(): string;
-    protected headerClasses(): string;
-    protected titleClasses(): string;
-    protected descriptionClasses(): string;
-    protected closeButtonClasses(): string;
-    protected contentClasses(): string;
-    protected getOptionClasses(mode: DisplayModeEnum): string;
-    protected getIconContainerClasses(mode: DisplayModeEnum): string;
-    protected getOptionTitleClasses(mode: DisplayModeEnum): string;
-    protected getOptionDescriptionClasses(mode: DisplayModeEnum): string;
-    protected getBadgeClasses(): string;
-    protected spinnerClasses(): string;
-    protected loadingTextClasses(): string;
+    private isDark;
+    protected optionsDisplay: _angular_core.Signal<{
+        simplified: {
+            optionClasses: string;
+            iconContainerClasses: string;
+            titleClasses: string;
+            descriptionClasses: string;
+        };
+        compact: {
+            optionClasses: string;
+            iconContainerClasses: string;
+            titleClasses: string;
+            descriptionClasses: string;
+        };
+        expanded: {
+            optionClasses: string;
+            iconContainerClasses: string;
+            titleClasses: string;
+            descriptionClasses: string;
+        };
+    }>;
+    private computeOptionDisplay;
+    private computeOptionClasses;
+    private computeIconContainerClasses;
+    private computeOptionTitleClasses;
+    private computeOptionDescriptionClasses;
+    protected backdropClasses: _angular_core.Signal<"bg-slate-900/15" | "bg-slate-950/25">;
+    protected modalClasses: _angular_core.Signal<"bg-slate-800/95 border border-slate-700/50" | "bg-white/95 border border-slate-200">;
+    protected headerClasses: _angular_core.Signal<"border-slate-200" | "border-slate-700/50">;
+    protected titleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected descriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    protected closeButtonClasses: _angular_core.Signal<"text-slate-600 hover:text-slate-900 hover:bg-slate-100" | "text-slate-400 hover:text-white hover:bg-slate-700">;
+    protected contentClasses: _angular_core.Signal<"bg-slate-800/50" | "bg-slate-50/50">;
+    protected badgeClasses: _angular_core.Signal<"bg-amber-100 text-amber-700 border border-amber-200" | "bg-amber-500/20 text-amber-400 border border-amber-500/30">;
+    protected spinnerClasses: _angular_core.Signal<"border-blue-500" | "border-blue-600">;
+    protected loadingTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewModeSwitcherModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewModeSwitcherModalComponent, "symphiq-view-mode-switcher-modal", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "currentMode": { "alias": "currentMode"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, { "close": "close"; "modeSelected": "modeSelected"; }, never, never, true, never>;
 }
@@ -1489,6 +1511,10 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
     weaknesses: _angular_core.Signal<_jebgem_model_lib_funnel_analysis_performance_overview_structured_v3_interface.FunnelWeaknessInterface[]>;
     currencySymbol: _angular_core.Signal<string>;
     insights: _angular_core.Signal<InsightBlockInterface[]>;
+    insightsDisplay: _angular_core.Signal<{
+        insight: InsightBlockInterface;
+        cardClass: string;
+    }[]>;
     private allBreakdowns;
     breakdowns: _angular_core.Signal<BreakdownMetricInterface[]>;
     allMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
@@ -1505,7 +1531,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-400" | "text-slate-600">;
+    headerSubtitleClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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">;
@@ -1516,6 +1542,15 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
         funnelMetric: PerformanceMetricInterface;
         relatedMetrics: PerformanceMetricInterface[];
     }[]>;
+    groupedMetricsDisplay: _angular_core.Signal<{
+        relatedMetricsDisplay: {
+            metric: PerformanceMetricInterface;
+            bentoCardClass: string;
+        }[];
+        funnelMetric: PerformanceMetricInterface;
+        relatedMetrics: PerformanceMetricInterface[];
+    }[]>;
+    private computeBentoCardClass;
     categories: ({
         value: string;
         label: string;
@@ -1573,8 +1608,6 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
     changeCategoryFilter(newCategory: string): void;
     changeBreakdownFilter(newFilter: string): void;
     changeCompetitiveFilter(newFilter: string): void;
-    getBentoCardClass(metric: PerformanceMetricInterface, index: number): string;
-    getInsightCardClass(insight: InsightBlockInterface): string;
     buttonClass: _angular_core.Signal<"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300" | "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer bg-slate-700 hover:bg-slate-600 text-slate-200 border border-slate-600">;
     onScroll(): void;
     scrollToTop(): void;
@@ -1624,7 +1657,7 @@ declare class MetricCardComponent {
     funnelStageDarkClass: _angular_core.Signal<string>;
     cardClass: _angular_core.Signal<string>;
     relatedInsights: _angular_core.Signal<InsightBlockInterface[]>;
-    trendClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
+    trendClass: _angular_core.Signal<"text-red-400" | "text-emerald-400">;
     statusBadgeLightClass: _angular_core.Signal<string>;
     statusBadgeDarkClass: _angular_core.Signal<string>;
     statusBadgeClass: _angular_core.Signal<string>;
@@ -1638,7 +1671,7 @@ declare class MetricCardComponent {
     glowClass: _angular_core.Signal<"" | "shadow-emerald-500/50 shadow-lg animate-pulse-glow">;
     deltaValue: _angular_core.Signal<number>;
     deltaPercent: _angular_core.Signal<number>;
-    deltaClass: _angular_core.Signal<"text-slate-400" | "text-emerald-400" | "text-red-400">;
+    deltaClass: _angular_core.Signal<"text-slate-400" | "text-red-400" | "text-emerald-400">;
     openInsightModal(insight: InsightBlockInterface): void;
     openInsightsModal(): void;
     openChartModal(chart: AiChartInterface): void;
@@ -1671,7 +1704,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-400" | "text-blue-700" | "text-emerald-600" | "text-orange-600">;
+    competitiveScoreTextClass: _angular_core.Signal<"text-orange-600" | "" | "text-blue-400" | "text-blue-700" | "text-emerald-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;
@@ -1944,12 +1977,12 @@ declare class OverallAssessmentComponent {
     revenueTrendDirection: _angular_core.Signal<TrendDirectionEnum>;
     isRevenueTrendPositive: _angular_core.Signal<boolean>;
     revenueTrendArrowPath: _angular_core.Signal<"M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" | "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" | "M3 10h11m0 0l-4-4m4 4l-4 4">;
-    lightModeTrendIconClass: _angular_core.Signal<"text-emerald-600" | "text-red-600">;
-    darkModeTrendIconClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
-    trendIconClass: _angular_core.Signal<"text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
-    lightModeTrendValueClass: _angular_core.Signal<"text-emerald-600" | "text-red-600">;
-    darkModeTrendValueClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
-    trendValueClass: _angular_core.Signal<"text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
+    lightModeTrendIconClass: _angular_core.Signal<"text-red-600" | "text-emerald-600">;
+    darkModeTrendIconClass: _angular_core.Signal<"text-red-400" | "text-emerald-400">;
+    trendIconClass: _angular_core.Signal<"text-red-600" | "text-red-400" | "text-emerald-400" | "text-emerald-600">;
+    lightModeTrendValueClass: _angular_core.Signal<"text-red-600" | "text-emerald-600">;
+    darkModeTrendValueClass: _angular_core.Signal<"text-red-400" | "text-emerald-400">;
+    trendValueClass: _angular_core.Signal<"text-red-600" | "text-red-400" | "text-emerald-400" | "text-emerald-600">;
     formattedRevenueTrend: _angular_core.Signal<string>;
     formattedRevenueTarget: _angular_core.Signal<string>;
     hasRevenuePacing: _angular_core.Signal<boolean>;
@@ -2088,12 +2121,20 @@ declare class CompetitivePositioningSummaryComponent {
     competitiveStats: _angular_core.Signal<CompetitiveStats>;
     narrativeSummary: _angular_core.Signal<string>;
     containerClass: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800 border-slate-700">;
+    protected scoreDotClasses: _angular_core.Signal<{
+        leading: string;
+        competitive: string;
+        lagging: string;
+    }>;
+    protected competitiveStatusDisplay: _angular_core.Signal<{
+        badgeClass: string;
+        shouldPulse: boolean;
+        icon: string;
+        label: string;
+    }>;
+    private computeCompetitiveStatusBadgeClass;
+    private computeCompetitiveStatusIcon;
     getHealthScoreBadgeClass(): string;
-    getCompetitiveStatusBadgeClass(): string;
-    shouldPulseStatus(): boolean;
-    getCompetitiveStatusIcon(): string;
-    getCompetitiveStatusLabel(): string;
-    getScoreDotClass(type: string): string;
     formatCategoryName(category: string): string;
     competitiveScoreTooltip: _angular_core.Signal<{
         industry: string;
@@ -2243,12 +2284,12 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     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>;
-    overallCompetitiveLabel: _angular_core.Signal<_jebgem_model.CompetitiveScoreEnum | "N/A">;
-    overallCompetitiveIcon: _angular_core.Signal<"↑" | "•" | "↔" | "↓">;
+    overallCompetitiveLabel: _angular_core.Signal<"N/A" | _jebgem_model.CompetitiveScoreEnum>;
+    overallCompetitiveIcon: _angular_core.Signal<"↑" | "↔" | "↓" | "•">;
     competitiveScore: _angular_core.Signal<string>;
     gradeTooltip: _angular_core.Signal<{
         title: string;
@@ -2329,7 +2370,7 @@ 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-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">;
+    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)]">;
     shouldPulseOverallCompetitive: _angular_core.Signal<boolean>;
     statusIconClass: _angular_core.Signal<string>;
     insightsCardClass: _angular_core.Signal<string>;
@@ -2372,20 +2413,21 @@ declare class SymphiqWelcomeDashboardComponent implements AfterViewInit, OnDestr
     onScroll(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    protected getContainerClasses(): string;
-    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;
+    private isDark;
+    protected getContainerClasses: _angular_core.Signal<"" | "relative min-h-screen">;
+    protected containerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/40 border-slate-700/50">;
+    protected contentClasses: _angular_core.Signal<"bg-gradient-to-br from-slate-800/60 via-slate-800/40 to-slate-800/60" | "bg-gradient-to-br from-blue-50/30 via-white to-purple-50/30">;
+    protected iconContainerClasses: _angular_core.Signal<"bg-gradient-to-br from-blue-500/20 to-purple-500/20 text-blue-400" | "bg-gradient-to-br from-blue-100 to-purple-100 text-blue-600">;
+    protected titleClasses: _angular_core.Signal<"text-white" | "bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">;
+    protected textClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected highlightBoxClasses: _angular_core.Signal<"bg-blue-500/10 border-blue-500/30" | "bg-blue-50 border-blue-300">;
+    protected highlightIconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
+    protected highlightTitleClasses: _angular_core.Signal<"text-blue-400" | "text-blue-700">;
+    protected highlightListClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected nextStepsBoxClasses: _angular_core.Signal<"bg-amber-500/10 border-amber-500/30" | "bg-amber-50 border-amber-200">;
+    protected nextStepsIconClasses: _angular_core.Signal<"text-amber-600" | "text-amber-400">;
+    protected nextStepsTitleClasses: _angular_core.Signal<"text-amber-400" | "text-amber-700">;
+    protected nextStepsTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqWelcomeDashboardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqWelcomeDashboardComponent, "symphiq-welcome-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; }; "forDemo": { "alias": "forDemo"; "required": false; "isSignal": true; }; "maxAccessibleStepId": { "alias": "maxAccessibleStepId"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; "nextStepClick": "nextStepClick"; }, never, never, true, never>;
 }
@@ -2498,7 +2540,7 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     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 sectionDescriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected labelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected inputClasses(fieldName: string): string;
     protected urlPrefixClasses: _angular_core.Signal<"bg-slate-100 text-slate-600 border-slate-300" | "bg-slate-600 text-slate-300 border-slate-600">;
@@ -2507,9 +2549,9 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     protected radioIndicatorClasses(platform: ShopPlatformEnum): 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 checkboxLabelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected errorClasses: _angular_core.Signal<string>;
-    protected viewLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected viewLabelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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">;
@@ -2521,9 +2563,9 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     protected groupTitleClasses(type: 'engaged' | 'interested' | 'not-interested'): string;
     protected focusAreaViewCardClasses(type: 'engaged' | 'interested' | 'not-interested'): string;
     protected focusAreaViewTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
-    protected focusAreaViewTitleSmallClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected focusAreaViewTitleSmallClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected statusBadgeClasses(type: 'engaged' | 'interested' | 'not-interested'): string;
-    protected toolsLabelViewClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected toolsLabelViewClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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>;
@@ -2558,9 +2600,9 @@ declare class FocusAreaQuestionComponent {
     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 descriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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 radioDescriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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">;
@@ -2861,7 +2903,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<1 | -1 | 0>;
+    protected targetRotation: _angular_core.Signal<0 | 1 | -1>;
     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">;
@@ -2876,7 +2918,7 @@ declare class PacingStatusBadgeComponent implements OnDestroy {
     protected animatedPercentage: _angular_core.Signal<string>;
     protected extractPercentage: _angular_core.Signal<string>;
     protected displayTextWithoutPercentage: _angular_core.Signal<string>;
-    protected overlayBadgeClasses: _angular_core.Signal<"bg-red-500 text-white" | "bg-amber-500 text-white" | "bg-emerald-500 text-white" | "bg-emerald-600 text-emerald-50" | "bg-amber-600 text-amber-50" | "bg-red-600 text-red-50">;
+    protected overlayBadgeClasses: _angular_core.Signal<"bg-emerald-500 text-white" | "bg-red-500 text-white" | "bg-amber-500 text-white" | "bg-emerald-600 text-emerald-50" | "bg-amber-600 text-amber-50" | "bg-red-600 text-red-50">;
     protected overlaySizeClasses: _angular_core.Signal<"px-2 py-1.5 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-0.5 tabular-nums" | "px-2.5 py-2 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1 tabular-nums">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PacingStatusBadgeComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PacingStatusBadgeComponent, "symphiq-pacing-status-badge", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "pacingPercentage": { "alias": "pacingPercentage"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showAsFullText": { "alias": "showAsFullText"; "required": false; "isSignal": true; }; "isCompact": { "alias": "isCompact"; "required": false; "isSignal": true; }; "showEmphasizedPercentage": { "alias": "showEmphasizedPercentage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -2915,6 +2957,17 @@ declare class MetricReportModalComponent {
     protected currentYear: _angular_core.Signal<number>;
     protected priorYear: _angular_core.Signal<number>;
     protected metricTitle: _angular_core.Signal<string>;
+    protected contributingMetricsDisplay: _angular_core.Signal<{
+        metric: MetricTargetCalculation;
+        title: string;
+        formattedTargetValue: string;
+        markdownTooltip: {
+            title: string;
+            markdown: string;
+        } | null;
+    }[]>;
+    private computeMetricTitle;
+    private computeFormatMetricValue;
     protected pacingInfo: _angular_core.Signal<{
         pacingPercentage: number;
         status: PacingStatus;
@@ -2943,7 +2996,6 @@ declare class MetricReportModalComponent {
     private generatePriorYearData;
     private generateProjectionData;
     protected formatMetricValue(value: number, metric: string, fromUiData?: boolean): string;
-    protected getMetricTitle(metric: MetricTargetCalculation): string;
     protected formatPercentage(value: number, decimals: number): string;
     protected getMarkdownTooltipContent(markdown: string, title?: string): {
         title?: string;
@@ -3642,6 +3694,17 @@ declare class SymphiqProfileShopAnalysisDashboardComponent implements OnInit, On
         quickWins?: _jebgem_model.QuickWinItemInterface[];
         napkinVisual?: _jebgem_model.NapkinVisualInterface;
     } | undefined>;
+    protected quickWinsDisplay: _angular_core.Signal<{
+        win: _jebgem_model.QuickWinItemInterface;
+        index: number;
+        effortBadgeClasses: string;
+        impactBadgeClasses: string;
+        effortLabel: string;
+        impactLabel: string;
+    }[]>;
+    private computeEffortBadgeClasses;
+    private computeImpactBadgeClasses;
+    private computeFormatLabel;
     protected sections: _angular_core.Signal<ProfileAnalysisSectionV3Interface[] | undefined>;
     protected allGoals: _angular_core.Signal<GoalV3Interface[]>;
     protected strategicRoadmapGoals: _angular_core.Signal<GoalV3Interface[]>;
@@ -3736,10 +3799,7 @@ declare class SymphiqProfileShopAnalysisDashboardComponent implements OnInit, On
     protected getQuickWinCardClasses(): string;
     protected getQuickWinTextClasses(): string;
     protected getNumberBadgeClasses(): string;
-    protected getEffortBadgeClasses(effort?: string): string;
-    protected getImpactBadgeClasses(impact?: string): string;
     protected getMetaTextClasses(): string;
-    protected formatLabel(label?: string): string;
     protected getSectionCardClasses(): string;
     protected getSectionIconClasses(): string;
     protected getSectionDescriptionClasses(): string;
@@ -3778,11 +3838,12 @@ declare class ShopWelcomeBannerComponent {
     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;
+    private isDark;
+    protected containerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/40 border-slate-700/50">;
+    protected contentClasses: _angular_core.Signal<"bg-gradient-to-br from-slate-800/60 via-slate-800/40 to-slate-800/60" | "bg-gradient-to-br from-emerald-50/30 via-white to-cyan-50/30">;
+    protected iconContainerClasses: _angular_core.Signal<"bg-gradient-to-br from-emerald-500/20 to-cyan-500/20 text-emerald-400" | "bg-gradient-to-br from-emerald-100 to-cyan-100 text-emerald-600">;
+    protected titleClasses: _angular_core.Signal<"text-white" | "bg-gradient-to-r from-emerald-600 to-cyan-600 bg-clip-text text-transparent">;
+    protected textClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     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>;
 }
@@ -4038,16 +4099,16 @@ declare class SymphiqProfileFocusAreasAnalysesDashboardComponent {
     getValueClasses(): string;
     getProgressBarContainerClasses(): string;
     getCardFooterClasses(): string;
-    getWelcomeBannerContainerClasses(): string;
-    getWelcomeBannerIconClasses(): string;
-    getWelcomeBannerTitleClasses(): string;
-    getWelcomeBannerTextClasses(): string;
-    getWelcomeBannerHighlightClasses(): string;
-    getWelcomeBannerHighlightIconClasses(): string;
-    getWelcomeBannerHighlightTitleClasses(): string;
-    getWelcomeBannerHighlightListClasses(): string;
-    getStatusComponentContainerClasses(): string;
-    getStatusSectionTitleClasses(): string;
+    protected welcomeBannerContainerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/50 border-slate-700/50">;
+    protected welcomeBannerIconClasses: _angular_core.Signal<"bg-purple-100 text-purple-600" | "bg-purple-500/20 text-purple-400">;
+    protected welcomeBannerTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected welcomeBannerTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected welcomeBannerHighlightClasses: _angular_core.Signal<"bg-blue-50/50 border-blue-300" | "bg-blue-500/10 border-blue-500/30">;
+    protected welcomeBannerHighlightIconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
+    protected welcomeBannerHighlightTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected welcomeBannerHighlightListClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected statusComponentContainerClasses: _angular_core.Signal<"bg-slate-50/80 border-slate-200" | "bg-slate-900/40 border-slate-700/50">;
+    protected statusSectionTitleClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     private getIconForDomain;
     getEngagementBadgeClasses(status: FocusAreaDetailStatusEnum): string;
     getEngagementStatusLabel(status: FocusAreaDetailStatusEnum): string;
@@ -4071,6 +4132,9 @@ declare class SymphiqProfileFocusAreaDashboardComponent {
     forDemo: _angular_core.InputSignal<boolean>;
     currentUser: _angular_core.InputSignal<UserInterface | undefined>;
     embedded: _angular_core.InputSignal<boolean>;
+    scrollEvent: _angular_core.InputSignal<ScrollCustomEvent | undefined>;
+    scrollElement: _angular_core.InputSignal<HTMLElement | null>;
+    scrollProgress: _angular_core.WritableSignal<number>;
     startCategoryQuestions: _angular_core.OutputEmitterRef<string>;
     answerSave: _angular_core.OutputEmitterRef<ProfileQuestionAnswerSaveEvent$1>;
     continueClick: _angular_core.OutputEmitterRef<void>;
@@ -4094,7 +4158,7 @@ declare class SymphiqProfileFocusAreaDashboardComponent {
     protected getEmptyStateTitleClasses(): string;
     protected getEmptyStateSubtitleClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqProfileFocusAreaDashboardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqProfileFocusAreaDashboardComponent, "symphiq-profile-focus-area-dashboard", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "profileFocusArea": { "alias": "profileFocusArea"; "required": false; "isSignal": true; }; "profileFocusAreaQuestions": { "alias": "profileFocusAreaQuestions"; "required": false; "isSignal": true; }; "profileAnswers": { "alias": "profileAnswers"; "required": false; "isSignal": true; }; "profileAnswerHistories": { "alias": "profileAnswerHistories"; "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; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; }, { "startCategoryQuestions": "startCategoryQuestions"; "answerSave": "answerSave"; "continueClick": "continueClick"; "adminAnswerAction": "adminAnswerAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqProfileFocusAreaDashboardComponent, "symphiq-profile-focus-area-dashboard", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "profileFocusArea": { "alias": "profileFocusArea"; "required": false; "isSignal": true; }; "profileFocusAreaQuestions": { "alias": "profileFocusAreaQuestions"; "required": false; "isSignal": true; }; "profileAnswers": { "alias": "profileAnswers"; "required": false; "isSignal": true; }; "profileAnswerHistories": { "alias": "profileAnswerHistories"; "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; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "scrollEvent": { "alias": "scrollEvent"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; }, { "startCategoryQuestions": "startCategoryQuestions"; "answerSave": "answerSave"; "continueClick": "continueClick"; "adminAnswerAction": "adminAnswerAction"; }, never, never, true, never>;
 }
 
 type ProfileModalData$1 = {
@@ -4246,12 +4310,12 @@ declare class SymphiqProfileAnalysisFocusAreaDashboardComponent implements OnIni
     } | null;
     protected handleDisplayModeChange(mode: DisplayModeEnum): void;
     protected getAnalysisSubtitle(): string;
-    protected getContainerClasses(): string;
-    protected getProgressCardClasses(): string;
-    protected getSectionTitleClasses(): string;
-    protected getSectionCardClasses(): string;
-    protected getSectionIconClasses(): string;
-    protected getSectionDescriptionClasses(): string;
+    protected containerClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected progressCardClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/40 border-slate-700/50">;
+    protected sectionTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected sectionCardClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
+    protected sectionIconClasses: _angular_core.Signal<"bg-blue-50 text-blue-600" | "bg-blue-500/20 text-blue-400">;
+    protected sectionDescriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     private formatGradeInText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqProfileAnalysisFocusAreaDashboardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqProfileAnalysisFocusAreaDashboardComponent, "symphiq-profile-analysis-focus-area-dashboard", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "profileAnalysis": { "alias": "profileAnalysis"; "required": false; "isSignal": true; }; "funnelAnalysis": { "alias": "funnelAnalysis"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "requestedByUser": { "alias": "requestedByUser"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "scrollEvent": { "alias": "scrollEvent"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; "focusAreaDetails": { "alias": "focusAreaDetails"; "required": false; "isSignal": true; }; "itemStatusProfileAnalysis": { "alias": "itemStatusProfileAnalysis"; "required": false; "isSignal": true; }; "isMarkingAsReviewed": { "alias": "isMarkingAsReviewed"; "required": false; "isSignal": true; }; }, { "nextStepClick": "nextStepClick"; "markAsReviewedClick": "markAsReviewedClick"; }, never, never, true, never>;
@@ -4349,10 +4413,10 @@ declare class SymphiqProfileMetricsAnalysesDashboardComponent {
     handleCardClick(event: CardClickEvent<MetricEnum, ProfileMetricInterface>): void;
     handleSearchClick(): void;
     handleCloseSearchModal(): void;
-    getWelcomeBannerContainerClasses(): string;
-    getWelcomeBannerIconClasses(): string;
-    getWelcomeBannerTitleClasses(): string;
-    getWelcomeBannerTextClasses(): string;
+    protected welcomeBannerContainerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/50 border-slate-700/50">;
+    protected welcomeBannerIconClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-blue-100 text-blue-600">;
+    protected welcomeBannerTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected welcomeBannerTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     private getIconForMetric;
     private getMetricDescription;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqProfileMetricsAnalysesDashboardComponent, never>;
@@ -4372,6 +4436,9 @@ declare class SymphiqProfileMetricDashboardComponent {
     forDemo: _angular_core.InputSignal<boolean>;
     currentUser: _angular_core.InputSignal<UserInterface | undefined>;
     embedded: _angular_core.InputSignal<boolean>;
+    scrollEvent: _angular_core.InputSignal<ScrollCustomEvent | undefined>;
+    scrollElement: _angular_core.InputSignal<HTMLElement | null>;
+    scrollProgress: _angular_core.WritableSignal<number>;
     startCategoryQuestions: _angular_core.OutputEmitterRef<string>;
     answerSave: _angular_core.OutputEmitterRef<ProfileQuestionAnswerSaveEvent$1>;
     continueClick: _angular_core.OutputEmitterRef<void>;
@@ -4395,7 +4462,7 @@ declare class SymphiqProfileMetricDashboardComponent {
     protected getEmptyStateTitleClasses(): string;
     protected getEmptyStateSubtitleClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqProfileMetricDashboardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqProfileMetricDashboardComponent, "symphiq-profile-metric-dashboard", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "profileMetric": { "alias": "profileMetric"; "required": false; "isSignal": true; }; "funnelMetric": { "alias": "funnelMetric"; "required": false; "isSignal": true; }; "profileMetricQuestions": { "alias": "profileMetricQuestions"; "required": false; "isSignal": true; }; "profileAnswers": { "alias": "profileAnswers"; "required": false; "isSignal": true; }; "profileAnswerHistories": { "alias": "profileAnswerHistories"; "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; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; }, { "startCategoryQuestions": "startCategoryQuestions"; "answerSave": "answerSave"; "continueClick": "continueClick"; "adminAnswerAction": "adminAnswerAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqProfileMetricDashboardComponent, "symphiq-profile-metric-dashboard", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "profileMetric": { "alias": "profileMetric"; "required": false; "isSignal": true; }; "funnelMetric": { "alias": "funnelMetric"; "required": false; "isSignal": true; }; "profileMetricQuestions": { "alias": "profileMetricQuestions"; "required": false; "isSignal": true; }; "profileAnswers": { "alias": "profileAnswers"; "required": false; "isSignal": true; }; "profileAnswerHistories": { "alias": "profileAnswerHistories"; "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; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "scrollEvent": { "alias": "scrollEvent"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; }, { "startCategoryQuestions": "startCategoryQuestions"; "answerSave": "answerSave"; "continueClick": "continueClick"; "adminAnswerAction": "adminAnswerAction"; }, never, never, true, never>;
 }
 
 interface ChartDataPoint {
@@ -4647,9 +4714,9 @@ declare class FocusAreaExecutiveSummaryComponent {
     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 topPrioritiesStatLabelClasses: _angular_core.Signal<"text-purple-400" | "text-purple-700">;
     protected topPrioritiesStatValueClasses: _angular_core.Signal<"text-purple-900" | "text-purple-100">;
-    protected topPrioritiesButtonTextClasses: _angular_core.Signal<"text-purple-700" | "text-purple-400">;
+    protected topPrioritiesButtonTextClasses: _angular_core.Signal<"text-purple-400" | "text-purple-700">;
     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">;
@@ -4657,7 +4724,7 @@ declare class FocusAreaExecutiveSummaryComponent {
     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 metaTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected onTopPrioritiesClick(): void;
     protected onPriorityDetailClick(event: {
         priority: FocusAreaTopPriorityInterface;
@@ -4681,6 +4748,17 @@ declare class MetricExecutiveSummaryComponent {
     protected handleViewReportClick(): void;
     protected iconSource: IconSourceEnum;
     protected isDark: _angular_core.Signal<boolean>;
+    protected quickWinsDisplay: _angular_core.Signal<{
+        win: _jebgem_model.QuickWinItemInterface;
+        index: number;
+        effortBadgeClasses: string;
+        impactBadgeClasses: string;
+        effortLabel: string;
+        impactLabel: string;
+    }[]>;
+    private computeEffortBadgeClasses;
+    private computeImpactBadgeClasses;
+    private computeFormatLabel;
     protected projectedValue: _angular_core.Signal<string | undefined>;
     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">;
@@ -4692,16 +4770,16 @@ declare class MetricExecutiveSummaryComponent {
     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-400" | "text-slate-600">;
+    protected metricLabelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected metricValueClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected yoyChangeClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600" | "text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
+    protected yoyChangeClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400" | "text-red-600" | "text-red-400" | "text-emerald-400" | "text-emerald-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-400" | "text-slate-600">;
+    protected narrativeTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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">;
@@ -4709,15 +4787,12 @@ declare class MetricExecutiveSummaryComponent {
     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-600" | "text-blue-400">;
-    protected impactTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected impactTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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-400" | "text-slate-600">;
-    protected getEffortBadgeClasses(effort: string | undefined): string;
-    protected getImpactBadgeClasses(impact: string | undefined): string;
+    protected metaTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected formatMetricName(name: string): string;
-    protected formatLabel(str: string | undefined): string;
     protected formatNumber(value: string | number | undefined): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricExecutiveSummaryComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricExecutiveSummaryComponent, "symphiq-metric-executive-summary", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": true; "isSignal": true; }; "metricName": { "alias": "metricName"; "required": false; "isSignal": true; }; "allGoals": { "alias": "allGoals"; "required": false; "isSignal": true; }; }, { "topPrioritiesClick": "topPrioritiesClick"; "priorityDetailClick": "priorityDetailClick"; "viewMetricDetailsClick": "viewMetricDetailsClick"; "viewReportClick": "viewReportClick"; }, never, never, true, never>;
@@ -5186,10 +5261,17 @@ declare class SearchModalComponent {
     clearSearch(): void;
     closeModal(): void;
     selectResult(result: BusinessSearchResult): void;
-    getResultClass(index: number): string;
-    getTypeIconBgClass(type: string): string;
-    getTypeIconClass(type: string): string;
-    getTypeBadgeText(result: BusinessSearchResult): string;
+    protected resultsDisplay: _angular_core.Signal<{
+        result: BusinessSearchResult;
+        resultClass: string;
+        typeIconBgClass: string;
+        typeIconClass: string;
+        typeBadgeText: string;
+    }[]>;
+    private computeResultClass;
+    private computeTypeIconBgClass;
+    private computeTypeIconClass;
+    private computeTypeBadgeText;
     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">;
@@ -5197,17 +5279,17 @@ declare class SearchModalComponent {
     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-400" | "text-slate-600">;
+    resultDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     breadcrumbClass: _angular_core.Signal<string>;
     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">;
+    emptyIconClass: _angular_core.Signal<"text-slate-300" | "text-slate-600">;
     emptyTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
-    emptyDescClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    emptyDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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-400" | "text-slate-600">;
+    shortcutTextClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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>;
 }
@@ -5227,6 +5309,8 @@ declare class DashboardHeaderComponent implements OnInit {
     showControls: _angular_core.InputSignal<boolean>;
     hasCondensedLeftContent: _angular_core.InputSignal<boolean>;
     size: _angular_core.InputSignal<"default" | "large">;
+    embedded: _angular_core.InputSignal<boolean>;
+    scrollElement: _angular_core.InputSignal<HTMLElement | null | undefined>;
     searchClick: _angular_core.OutputEmitterRef<void>;
     viewModeClick: _angular_core.OutputEmitterRef<void>;
     protected readonly headerScrollService: HeaderScrollService;
@@ -5235,6 +5319,8 @@ declare class DashboardHeaderComponent implements OnInit {
     protected readonly isLargeSize: _angular_core.Signal<boolean>;
     protected readonly expandedHeight: _angular_core.Signal<"140px" | "100px">;
     private dateFormatCache;
+    private readonly COLLAPSE_THRESHOLD;
+    constructor();
     ngOnInit(): void;
     protected onSearchClick(): void;
     protected onViewModeClick(): void;
@@ -5251,7 +5337,7 @@ declare class DashboardHeaderComponent implements OnInit {
     protected getCondensedSubtitleClasses(): string;
     protected getViewModeButtonClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardHeaderComponent, "symphiq-dashboard-header", never, { "requestedByUser": { "alias": "requestedByUser"; "required": false; "isSignal": true; }; "createdDate": { "alias": "createdDate"; "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; }; "viewModeLabel": { "alias": "viewModeLabel"; "required": false; "isSignal": true; }; "currentSection": { "alias": "currentSection"; "required": false; "isSignal": true; }; "currentSubsection": { "alias": "currentSubsection"; "required": false; "isSignal": true; }; "sectionFading": { "alias": "sectionFading"; "required": false; "isSignal": true; }; "subsectionFading": { "alias": "subsectionFading"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "hasCondensedLeftContent": { "alias": "hasCondensedLeftContent"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "searchClick": "searchClick"; "viewModeClick": "viewModeClick"; }, never, ["[expandedControls]", "[condensedLeftContent]", "[condensedControls]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardHeaderComponent, "symphiq-dashboard-header", never, { "requestedByUser": { "alias": "requestedByUser"; "required": false; "isSignal": true; }; "createdDate": { "alias": "createdDate"; "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; }; "viewModeLabel": { "alias": "viewModeLabel"; "required": false; "isSignal": true; }; "currentSection": { "alias": "currentSection"; "required": false; "isSignal": true; }; "currentSubsection": { "alias": "currentSubsection"; "required": false; "isSignal": true; }; "sectionFading": { "alias": "sectionFading"; "required": false; "isSignal": true; }; "subsectionFading": { "alias": "subsectionFading"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "hasCondensedLeftContent": { "alias": "hasCondensedLeftContent"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; }, { "searchClick": "searchClick"; "viewModeClick": "viewModeClick"; }, never, ["[expandedControls]", "[condensedLeftContent]", "[condensedControls]"], true, never>;
 }
 
 declare class GradeBadgeComponent {
@@ -5269,7 +5355,7 @@ declare class GradeBadgeComponent {
         explanation: string;
     }>;
     private formatGrade;
-    badgeLabelClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    badgeLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     gradeBadgeClass: _angular_core.Signal<string>;
     private getGradeBadgeClassLight;
     private getGradeBadgeClassDark;
@@ -5351,15 +5437,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-400" | "text-slate-600">;
+    protected subtitleClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected gradeBadgeContainerClasses: _angular_core.Signal<string>;
-    protected glowEffectClasses: _angular_core.Signal<"bg-emerald-500" | "bg-blue-500" | "bg-orange-500" | "bg-red-500">;
+    protected glowEffectClasses: _angular_core.Signal<"bg-blue-500" | "bg-emerald-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-emerald-300" | "text-blue-300" | "text-orange-700" | "text-red-300" | "text-orange-300">;
+    protected gradeLabelClasses: _angular_core.Signal<"text-blue-700" | "text-emerald-700" | "text-red-700" | "text-blue-300" | "text-emerald-300" | "text-red-300" | "text-orange-700" | "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-600" | "text-blue-400" | "text-emerald-600" | "text-red-600" | "text-orange-600" | "text-orange-400">;
+    protected progressValueClasses: _angular_core.Signal<"text-red-600" | "text-orange-600" | "text-red-400" | "text-orange-400" | "text-blue-600" | "text-blue-400" | "text-emerald-400" | "text-emerald-600">;
     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>;
@@ -5381,12 +5467,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-400" | "text-slate-600">;
+    protected headerClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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-600" | "text-blue-400">;
     protected countClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
-    protected labelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected labelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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;
@@ -5409,7 +5495,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-400" | "text-slate-600">;
+    protected subtitleClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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">;
@@ -5417,7 +5503,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-400" | "text-slate-600">;
+    protected percentageClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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>;
 }
@@ -5447,8 +5533,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<3 | 2 | 2.5>;
-    dotSize: _angular_core.Signal<5 | 10 | 7>;
+    strokeWidth: _angular_core.Signal<2 | 3 | 2.5>;
+    dotSize: _angular_core.Signal<10 | 5 | 7>;
     containerClasses: _angular_core.Signal<{
         'w-10 h-10': boolean;
         'w-[60px] h-[60px]': boolean;
@@ -5510,7 +5596,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-400" | "text-slate-600">;
+    descriptionClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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">;
@@ -5576,7 +5662,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<"500px" | "175px">;
+    chartHeight: _angular_core.Signal<"175px" | "500px">;
     cursorColor: _angular_core.Signal<9741240 | 16777215>;
     tooltipTextColor: _angular_core.Signal<0 | 16777215>;
     chartHash: _angular_core.Signal<string>;
@@ -5613,7 +5699,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<"500px" | "200px">;
+    chartHeight: _angular_core.Signal<"200px" | "500px">;
     chartHash: _angular_core.Signal<string>;
     chartDiv: ElementRef;
     private root?;
@@ -5650,6 +5736,7 @@ declare class AreaChartComponent implements OnInit, AfterViewInit, OnDestroy {
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     currencySymbol: _angular_core.InputSignal<string>;
     height: _angular_core.InputSignal<string | undefined>;
+    disableInteractions: _angular_core.InputSignal<boolean>;
     chartHeight: _angular_core.Signal<string>;
     cursorColor: _angular_core.Signal<9741240 | 16777215>;
     chartHash: _angular_core.Signal<string>;
@@ -5678,7 +5765,7 @@ declare class AreaChartComponent implements OnInit, AfterViewInit, OnDestroy {
     private cleanupIntersectionObserver;
     private createChart;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChartComponent, "symphiq-area-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChartComponent, "symphiq-area-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "disableInteractions": { "alias": "disableInteractions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class TooltipContainerComponent implements AfterViewInit, OnDestroy {
@@ -5949,11 +6036,11 @@ declare class OpportunityHighlightBannerComponent {
     bannerClick: _angular_core.OutputEmitterRef<void>;
     protected iconSource: IconSourceEnum;
     protected bannerClasses: _angular_core.Signal<"bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-l-amber-500 border-r border-t border-b border-amber-500/30" | "bg-gradient-to-r from-amber-50 to-orange-50 border-l-amber-500 border-r border-t border-b border-amber-200">;
-    protected iconContainerClasses: _angular_core.Signal<"bg-amber-500/20 text-amber-400" | "bg-amber-100 text-amber-600">;
+    protected iconContainerClasses: _angular_core.Signal<"bg-amber-100 text-amber-600" | "bg-amber-500/20 text-amber-400">;
     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-400" | "text-amber-600">;
+    protected chevronClasses: _angular_core.Signal<"text-amber-600" | "text-amber-400">;
     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>;