@eric-emg/symphiq-components 1.3.47 → 1.3.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eric-emg/symphiq-components",
-  "version": "1.3.47",
+  "version": "1.3.49",
   "description": "A comprehensive Angular library for component dashboards with performance visualization and metrics analysis",
   "author": "Your Organization",
   "license": "MIT",

package/styles.css

@@ -1360,6 +1360,9 @@
   .scroll-mt-24 {
     scroll-margin-top: calc(var(--spacing) * 24);
   }
+  .scroll-mt-48 {
+    scroll-margin-top: calc(var(--spacing) * 48);
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1890,6 +1893,9 @@
       border-color: color-mix(in oklab, var(--color-cyan-400) 50%, transparent);
     }
   }
+  .border-cyan-500 {
+    border-color: var(--color-cyan-500);
+  }
   .border-cyan-500\/30 {
     border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1905,6 +1911,12 @@
   .border-cyan-700 {
     border-color: var(--color-cyan-700);
   }
+  .border-cyan-700\/50 {
+    border-color: color-mix(in srgb, oklch(52% 0.105 223.128) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-cyan-700) 50%, transparent);
+    }
+  }
   .border-emerald-100 {
     border-color: var(--color-emerald-100);
   }
@@ -2436,6 +2448,9 @@
   .border-teal-300 {
     border-color: var(--color-teal-300);
   }
+  .border-teal-500 {
+    border-color: var(--color-teal-500);
+  }
   .border-teal-500\/20 {
     border-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2943,6 +2958,9 @@
   .bg-cyan-300 {
     background-color: var(--color-cyan-300);
   }
+  .bg-cyan-500 {
+    background-color: var(--color-cyan-500);
+  }
   .bg-cyan-500\/20 {
     background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2958,6 +2976,12 @@
       background-color: color-mix(in oklab, var(--color-cyan-800) 50%, transparent);
     }
   }
+  .bg-cyan-900\/20 {
+    background-color: color-mix(in srgb, oklch(39.8% 0.07 227.392) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-cyan-900) 20%, transparent);
+    }
+  }
   .bg-cyan-900\/30 {
     background-color: color-mix(in srgb, oklch(39.8% 0.07 227.392) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3777,6 +3801,9 @@
   .bg-teal-100 {
     background-color: var(--color-teal-100);
   }
+  .bg-teal-500 {
+    background-color: var(--color-teal-500);
+  }
   .bg-teal-500\/10 {
     background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3804,6 +3831,12 @@
       background-color: color-mix(in oklab, var(--color-teal-600) 90%, transparent);
     }
   }
+  .bg-teal-900\/20 {
+    background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-teal-900) 20%, transparent);
+    }
+  }
   .bg-teal-900\/30 {
     background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/types/symphiq-components.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, UnifiedGoalInterface, AiChartInterface, SourceAnalysisReferenceInterface, ProfileAnalysisInterface, RecommendationV3Interface, ProfileAnalysisRecommendationActionStepInterface, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ProfileSectionInterface, ProfileSubsectionInterface, ProfileInterface, MetricEnum, FunnelMetricInterface, TargetInterface, UiDataInterface, 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, ProfileAnalysisTypeEnum, ProfileAnalysisStructuredV3Interface, UnifiedExecutiveSummaryInterface, ProfileMetricInterface, ProfileMetricQuestionInterface, FocusAreaExecutiveSummaryInterface, QuickWinItemInterface, MetricExecutiveSummaryInterface, ChartTypeEnum } from '@jebgem/model';
+import { FocusAreaTopPriorityInterface, MetricTopPriorityInterface, ProfileItemInterface, ViewModeEnum, GoalV3Interface, ObjectiveV3Interface, StrategyV3Interface, OperationalCategoryInterface, CategoryStrengthInterface, CategoryGapInterface, CategoryOpportunityInterface, InsightBlockInterface, ProfileAnalysisRecommendationInterface, PerformanceMetricInterface, KeyStrengthInterface, CriticalGapInterface, UnifiedGoalInterface, AiChartInterface, SourceAnalysisReferenceInterface, ProfileAnalysisInterface, RecommendationV3Interface, ProfileAnalysisRecommendationActionStepInterface, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ProfileSectionInterface, ProfileSubsectionInterface, ProfileInterface, MetricEnum, FunnelMetricInterface, TargetInterface, UiDataInterface, 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, ProfileAnalysisTypeEnum, ProfileAnalysisStructuredV3Interface, UnifiedExecutiveSummaryInterface, ProfileMetricInterface, ProfileMetricQuestionInterface, FocusAreaExecutiveSummaryInterface, 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';
@@ -11,7 +11,6 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import * as node_modules__jebgem_model_lib_funnel_analysis_performance_overview_structured_v3_interface from 'node_modules/@jebgem/model/lib/funnel-analysis/performance-overview-structured-v3.interface';
 import { FormGroup } from '@angular/forms';
 import * as _eric_emg_symphiq_components from '@eric-emg/symphiq-components';
-import { ScrollCustomEvent as ScrollCustomEvent$1 } from '@symphiq-components/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component';
 
 interface FunnelMetricOrder {
     metric: string;
@@ -1136,7 +1135,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>;
@@ -1768,7 +1767,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-emerald-600" | "text-blue-700" | "text-orange-600">;
+    competitiveScoreTextClass: _angular_core.Signal<"" | "text-emerald-600" | "text-blue-700" | "text-blue-400" | "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;
@@ -2485,8 +2484,8 @@ declare class SymphiqWelcomeDashboardComponent implements AfterViewInit, OnDestr
     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 highlightIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected highlightTitleClasses: _angular_core.Signal<"text-blue-700" | "text-blue-400">;
     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">;
@@ -2625,7 +2624,7 @@ declare class SymphiqCreateAccountDashboardComponent implements OnDestroy {
     protected cancelButtonClasses: _angular_core.Signal<"bg-slate-700 text-slate-300 hover:bg-slate-600" | "bg-slate-200 text-slate-700 hover:bg-slate-300">;
     protected continueButtonClasses: _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" | "bg-slate-300 text-slate-500" | "bg-slate-700 text-slate-500">;
     protected focusAreaProgressLabelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
-    protected focusAreaProgressCountClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400" | "text-emerald-600" | "text-emerald-400">;
+    protected focusAreaProgressCountClasses: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-blue-400" | "text-blue-600">;
     protected focusAreaProgressBarBgClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
     protected focusAreaProgressBarFillClasses: _angular_core.Signal<"bg-gradient-to-r from-emerald-500 to-teal-500" | "bg-gradient-to-r from-blue-500 to-cyan-500" | "bg-gradient-to-r from-emerald-400 to-teal-400" | "bg-gradient-to-r from-blue-400 to-cyan-400">;
     protected progressBadgeClasses: _angular_core.Signal<"bg-blue-100 text-blue-700 border border-blue-200" | "bg-emerald-100 text-emerald-700 border border-emerald-200" | "bg-emerald-900/30 text-emerald-400 border border-emerald-700" | "bg-blue-900/30 text-blue-400 border border-blue-700">;
@@ -2988,7 +2987,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-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 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 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>;
@@ -3213,9 +3212,6 @@ declare class ProfileSectionComponent {
     protected visibleSubsections: _angular_core.Signal<ProfileSubsectionInterface[]>;
     protected isDark: _angular_core.Signal<boolean>;
     protected containerClasses: _angular_core.Signal<"relative" | "relative bg-slate-50/50">;
-    protected iconContainerClasses: _angular_core.Signal<"p-4 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 text-blue-400" | "p-4 rounded-2xl bg-gradient-to-br from-blue-100 to-purple-100 text-blue-600">;
-    protected titleClasses: _angular_core.Signal<"text-3xl font-bold text-white" | "text-3xl font-bold text-slate-900">;
-    protected dividerClasses: _angular_core.Signal<"h-1 w-24 rounded-full mt-3 bg-gradient-to-r from-blue-500 to-purple-500" | "h-1 w-24 rounded-full mt-3 bg-gradient-to-r from-blue-600 to-purple-600">;
     protected subsectionHasContent(subsection: ProfileSubsectionInterface): boolean;
     protected trackBySubsectionId(index: number, subsection: ProfileSubsectionInterface): string | number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileSectionComponent, never>;
@@ -4189,7 +4185,7 @@ declare class SymphiqProfileFocusAreasAnalysesDashboardComponent {
     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-500/10 border-blue-500/30" | "bg-blue-50/50 border-blue-300">;
-    protected welcomeBannerHighlightIconClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
+    protected welcomeBannerHighlightIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     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">;
@@ -4281,7 +4277,7 @@ declare class SymphiqProfileAnalysisFocusAreaDashboardComponent implements OnIni
     isLoading: _angular_core.InputSignal<boolean | undefined>;
     requestedByUser: _angular_core.InputSignal<UserInterface | undefined>;
     embedded: _angular_core.InputSignal<boolean>;
-    scrollEvent: _angular_core.InputSignal<ScrollCustomEvent$1 | null | undefined>;
+    scrollEvent: _angular_core.InputSignal<ScrollCustomEvent | null | undefined>;
     scrollElement: _angular_core.InputSignal<HTMLElement | null | undefined>;
     focusAreaDetails: _angular_core.InputSignal<FocusAreaDetailInterface[] | undefined>;
     itemStatusProfileAnalysis: _angular_core.InputSignal<ItemStatusInterface | undefined>;
@@ -4395,14 +4391,34 @@ declare class SymphiqProfileAnalysisFocusAreaDashboardComponent implements OnIni
     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-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
-    protected sectionIconClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-blue-50 text-blue-600">;
+    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>;
 }
 
+interface TimelineMilestoneInterface {
+    title: string;
+    description: string;
+    priority: string;
+}
+interface TimelinePhaseInterface {
+    id: string;
+    title: string;
+    description: string;
+    focusTheme: string;
+    goalIds?: string[];
+    milestones: TimelineMilestoneInterface[];
+}
+interface TimelineDataInterface {
+    phase30Day?: TimelinePhaseInterface;
+    phase90Day?: TimelinePhaseInterface;
+    phase6Month?: TimelinePhaseInterface;
+    phase12Month?: TimelinePhaseInterface;
+}
+
 interface SourceAnalysisRequestEvent {
     analysisType?: ProfileAnalysisTypeEnum;
     analysisId?: number;
@@ -4481,18 +4497,12 @@ declare class SymphiqProfileAnalysisUnifiedDashboardComponent implements OnChang
     protected allMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
     protected allCharts: _angular_core.Signal<AiChartInterface[]>;
     protected allInsights: _angular_core.Signal<_jebgem_model.InsightBlockInterface[]>;
-    protected unifiedTimeline: _angular_core.Signal<{
-        id: string;
-        title: string | undefined;
-        timeframe: string | undefined;
-        priority: string | undefined;
-        objectives: ObjectiveV3Interface[];
-    }[]>;
+    protected unifiedTimeline: _angular_core.Signal<TimelineDataInterface>;
     protected priorityMatrix: _angular_core.Signal<{
-        high: UnifiedGoalInterface[];
-        medium: UnifiedGoalInterface[];
-        low: UnifiedGoalInterface[];
-        unassigned: UnifiedGoalInterface[];
+        quickWins: UnifiedGoalInterface[];
+        majorProjects: UnifiedGoalInterface[];
+        fillIns: UnifiedGoalInterface[];
+        thankless: UnifiedGoalInterface[];
     }>;
     protected nextSteps: _angular_core.Signal<{
         title: string;
@@ -4505,10 +4515,10 @@ declare class SymphiqProfileAnalysisUnifiedDashboardComponent implements OnChang
     protected welcomeTitleClasses: _angular_core.Signal<string>;
     protected welcomeSubtitleClasses: _angular_core.Signal<string>;
     protected welcomeDescriptionClasses: _angular_core.Signal<string>;
-    protected bannerClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
+    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 textClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
-    protected subheadingClasses: _angular_core.Signal<"text-slate-800" | "text-slate-200">;
+    protected subheadingClasses: _angular_core.Signal<"text-slate-200" | "text-slate-800">;
     protected narrativeClasses: _angular_core.Signal<"bg-slate-50 border border-slate-200" | "bg-slate-900/50 border border-slate-700">;
     protected goalTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
     protected goalDescriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
@@ -4516,15 +4526,15 @@ declare class SymphiqProfileAnalysisUnifiedDashboardComponent implements OnChang
     protected cardBorderClasses: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     protected moreBadgeClasses: _angular_core.Signal<"bg-slate-100 text-slate-600" | "bg-slate-700 text-slate-400">;
     protected relatedMetricsButtonClasses: _angular_core.Signal<"bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100" | "bg-blue-900/30 text-blue-300 border border-blue-700 hover:bg-blue-900/50">;
-    protected timelineContainerClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
+    protected timelineContainerClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
     protected timelineLineClasses: _angular_core.Signal<"bg-gradient-to-b from-blue-400 via-cyan-400 to-teal-400" | "bg-gradient-to-b from-blue-600 via-cyan-600 to-teal-600">;
     protected timelineItemTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
     protected timeframeDisplayClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected objectivesLabelClasses: _angular_core.Signal<string>;
     protected objectiveItemClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected moreObjectivesClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
-    protected phaseIndicatorClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
-    protected matrixContainerClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
+    protected phaseIndicatorClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected matrixContainerClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
     protected matrixAxisLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     protected quadrantTitleClasses: _angular_core.Signal<"text-white" | "text-slate-800">;
     protected quadrantSubtitleClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
@@ -4532,11 +4542,11 @@ declare class SymphiqProfileAnalysisUnifiedDashboardComponent implements OnChang
     protected moreGoalsClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     protected emptyQuadrantClasses: _angular_core.Signal<"text-slate-400 italic" | "text-slate-500 italic">;
     protected stepTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
-    protected stepDescriptionClasses: _angular_core.Signal<"text-slate-300" | "text-slate-600">;
+    protected stepDescriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-300">;
     protected stepBorderClasses: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     protected strategiesLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     protected strategyItemClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
-    protected goalCardBaseClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
+    protected goalCardBaseClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
     private readonly COLLAPSE_THRESHOLD;
     private readonly EXPAND_THRESHOLD;
     private embeddedScrollEffect;
@@ -4558,17 +4568,14 @@ declare class SymphiqProfileAnalysisUnifiedDashboardComponent implements OnChang
         goal: UnifiedGoalInterface;
     }): void;
     protected onRelatedMetricsClickFromCard(goal: UnifiedGoalInterface): void;
+    protected onShopGoalsClick(): void;
+    protected onOtherGoalsClick(): void;
+    protected scrollToQuickWins(): void;
     protected getSourceCountCardClasses(type: 'SHOP' | 'FOCUS_AREA' | 'METRIC'): string;
     protected getGoalCardClasses(goal: UnifiedGoalInterface): string;
     protected getPriorityBadgeClasses(priority: string | undefined): string;
     protected getSourceBadgeClasses(type: ProfileAnalysisTypeEnum | undefined): string;
-    protected onTimelineItemClick(item: {
-        id: string;
-        title: string | undefined;
-        timeframe: string | undefined;
-        priority: string | undefined;
-        objectives: ObjectiveV3Interface[];
-    }): void;
+    protected onTimelinePhaseClick(phase: TimelinePhaseInterface): void;
     protected getTimelineNodeClasses(priority: string | undefined): string;
     protected getTimelineNodeInnerClasses(priority: string | undefined): string;
     protected getTimelineCardClasses(priority: string | undefined): string;
@@ -4679,7 +4686,7 @@ declare class SymphiqProfileMetricsAnalysesDashboardComponent {
     handleSearchClick(): void;
     handleCloseSearchModal(): void;
     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-100 text-blue-600" | "bg-blue-500/20 text-blue-400">;
+    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;
@@ -4771,7 +4778,7 @@ declare class SymphiqProfileAnalysisMetricDashboardComponent implements OnInit,
     isLoading: _angular_core.InputSignal<boolean | undefined>;
     requestedByUser: _angular_core.InputSignal<UserInterface | undefined>;
     embedded: _angular_core.InputSignal<boolean>;
-    scrollEvent: _angular_core.InputSignal<ScrollCustomEvent$1 | null | undefined>;
+    scrollEvent: _angular_core.InputSignal<ScrollCustomEvent | null | undefined>;
     scrollElement: _angular_core.InputSignal<HTMLElement | null | undefined>;
     funnelMetric: _angular_core.InputSignal<FunnelMetricInterface | undefined>;
     itemStatusProfileAnalysis: _angular_core.InputSignal<ItemStatusInterface | undefined>;
@@ -4960,19 +4967,9 @@ declare class FocusAreaExecutiveSummaryComponent {
     }>;
     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-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
+    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 subheadingClasses: _angular_core.Signal<"text-slate-200" | "text-slate-800">;
     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">;
@@ -4980,13 +4977,9 @@ declare class FocusAreaExecutiveSummaryComponent {
     protected topPrioritiesStatValueClasses: _angular_core.Signal<"text-purple-900" | "text-purple-100">;
     protected topPrioritiesButtonTextClasses: _angular_core.Signal<"text-purple-400" | "text-purple-700">;
     protected quickWinsStatCardClasses: _angular_core.Signal<"bg-blue-500/10 border-2 border-blue-500/30 hover:border-blue-400/50 hover:shadow-lg hover:shadow-blue-500/10" | "bg-blue-50 border-2 border-blue-200 hover:border-blue-400 hover:shadow-lg hover:shadow-blue-100/50">;
-    protected quickWinsStatLabelClasses: _angular_core.Signal<"text-blue-400" | "text-blue-700">;
+    protected quickWinsStatLabelClasses: _angular_core.Signal<"text-blue-700" | "text-blue-400">;
     protected quickWinsStatValueClasses: _angular_core.Signal<"text-blue-100" | "text-blue-900">;
-    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-100" | "text-slate-900">;
-    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-600" | "text-slate-400">;
+    protected quickWinsButtonTextClasses: _angular_core.Signal<"text-blue-700" | "text-blue-400">;
     protected onTopPrioritiesClick(): void;
     protected onPriorityDetailClick(event: {
         priority: FocusAreaTopPriorityInterface;
@@ -5023,36 +5016,36 @@ declare class MetricExecutiveSummaryComponent {
     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-100" | "text-slate-900">;
+    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-600" | "text-blue-400">;
+    protected iconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     protected healthBadgeClasses: _angular_core.Signal<string>;
     protected pacingBadgeClasses: _angular_core.Signal<string>;
-    protected metricCardClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
-    protected viewDetailsTextClasses: _angular_core.Signal<"text-blue-600" | "text-blue-400">;
-    protected viewDetailsButtonClasses: _angular_core.Signal<"bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100" | "bg-blue-500/20 text-blue-300 border border-blue-500/40 hover:bg-blue-500/30">;
+    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 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 metricValueClasses: _angular_core.Signal<"text-slate-100" | "text-slate-900">;
+    protected metricValueClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
     protected yoyChangeClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400" | "text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400">;
     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 narrativeTitleClasses: _angular_core.Signal<"text-slate-200" | "text-slate-800">;
     protected narrativeTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
-    protected sectionTitleClasses: _angular_core.Signal<"text-slate-100" | "text-slate-900">;
+    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-100" | "text-slate-900">;
+    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-600" | "text-blue-400">;
+    protected impactLabelClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     protected impactTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
-    protected quickWinCardClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
+    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-100" | "text-slate-900">;
+    protected quickWinTextClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
     protected metaTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected formatMetricName(name: string): string;
     protected formatNumber(value: string | number | undefined): string;
@@ -5581,7 +5574,7 @@ declare class SearchModalComponent {
     typeBadgeClass: _angular_core.Signal<"bg-slate-100 text-slate-600" | "bg-slate-700 text-slate-300">;
     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-300" | "text-slate-600">;
+    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">;
@@ -5752,24 +5745,24 @@ declare class ConfidenceLevelCardComponent implements OnInit, OnDestroy {
     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 gradeBadgeContainerClasses: _angular_core.Signal<string>;
-    protected glowEffectClasses: _angular_core.Signal<"bg-red-500" | "bg-blue-500" | "bg-emerald-500" | "bg-orange-500">;
+    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-blue-700" | "text-red-700" | "text-orange-700" | "text-red-300" | "text-blue-300" | "text-emerald-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-blue-600" | "text-blue-400" | "text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400" | "text-orange-600" | "text-orange-400">;
+    protected progressValueClasses: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400" | "text-blue-400" | "text-orange-600" | "text-orange-400" | "text-blue-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>;
     protected progressGlowClasses: _angular_core.Signal<"bg-gradient-to-r from-emerald-500 to-teal-500" | "bg-gradient-to-r from-blue-500 to-cyan-500" | "bg-gradient-to-r from-orange-500 to-amber-500" | "bg-gradient-to-r from-red-500 to-rose-500">;
     protected potentialProgressBarClasses: _angular_core.Signal<"opacity-40 bg-gradient-to-r from-emerald-500/50 via-teal-500/50 to-emerald-600/50" | "opacity-40 bg-gradient-to-r from-emerald-400/50 via-teal-400/50 to-emerald-500/50" | "opacity-40 bg-gradient-to-r from-blue-500/50 via-cyan-500/50 to-blue-600/50" | "opacity-40 bg-gradient-to-r from-blue-400/50 via-cyan-400/50 to-blue-500/50" | "opacity-40 bg-gradient-to-r from-orange-500/50 via-amber-500/50 to-orange-600/50" | "opacity-40 bg-gradient-to-r from-orange-400/50 via-amber-400/50 to-orange-500/50" | "opacity-40 bg-gradient-to-r from-red-500/50 via-rose-500/50 to-red-600/50" | "opacity-40 bg-gradient-to-r from-red-400/50 via-rose-400/50 to-red-500/50">;
     protected nextStepCalloutClasses: _angular_core.Signal<"bg-slate-100 text-slate-700 border border-slate-200" | "bg-slate-700/50 text-slate-300 border border-slate-600/50">;
-    protected nextStepBadgeClasses: _angular_core.Signal<"bg-red-100 text-red-700" | "bg-blue-500/20 text-blue-400" | "bg-emerald-100 text-emerald-700" | "bg-emerald-500/20 text-emerald-400" | "bg-blue-100 text-blue-700" | "bg-orange-100 text-orange-700" | "bg-orange-500/20 text-orange-400" | "bg-red-500/20 text-red-400">;
+    protected nextStepBadgeClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-emerald-100 text-emerald-700" | "bg-emerald-500/20 text-emerald-400" | "bg-blue-100 text-blue-700" | "bg-orange-100 text-orange-700" | "bg-orange-500/20 text-orange-400" | "bg-red-100 text-red-700" | "bg-red-500/20 text-red-400">;
     protected currentStepCalloutClasses: _angular_core.Signal<"bg-slate-100 text-slate-700 border border-slate-200" | "bg-slate-700/50 text-slate-300 border border-slate-600/50">;
-    protected currentStepBadgeClasses: _angular_core.Signal<"bg-red-100 text-red-700" | "bg-blue-500/20 text-blue-400" | "bg-emerald-100 text-emerald-700" | "bg-emerald-500/20 text-emerald-400" | "bg-blue-100 text-blue-700" | "bg-orange-100 text-orange-700" | "bg-orange-500/20 text-orange-400" | "bg-red-500/20 text-red-400">;
+    protected currentStepBadgeClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-emerald-100 text-emerald-700" | "bg-emerald-500/20 text-emerald-400" | "bg-blue-100 text-blue-700" | "bg-orange-100 text-orange-700" | "bg-orange-500/20 text-orange-400" | "bg-red-100 text-red-700" | "bg-red-500/20 text-red-400">;
     protected nextDashboardCalloutClasses: _angular_core.Signal<"bg-slate-800/30 text-slate-400 border border-slate-700/30" | "bg-slate-50 text-slate-500 border border-slate-100">;
-    protected nextDashboardBadgeClasses: _angular_core.Signal<"bg-emerald-500/10 text-emerald-500" | "bg-emerald-50 text-emerald-600" | "bg-blue-500/10 text-blue-500" | "bg-blue-50 text-blue-600" | "bg-orange-500/10 text-orange-500" | "bg-orange-50 text-orange-600" | "bg-red-500/10 text-red-500" | "bg-red-50 text-red-600">;
+    protected nextDashboardBadgeClasses: _angular_core.Signal<"bg-blue-50 text-blue-600" | "bg-emerald-500/10 text-emerald-500" | "bg-emerald-50 text-emerald-600" | "bg-blue-500/10 text-blue-500" | "bg-orange-500/10 text-orange-500" | "bg-orange-50 text-orange-600" | "bg-red-500/10 text-red-500" | "bg-red-50 text-red-600">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfidenceLevelCardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfidenceLevelCardComponent, "symphiq-confidence-level-card", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "currentStepId": { "alias": "currentStepId"; "required": false; "isSignal": true; }; "focusAreaDetails": { "alias": "focusAreaDetails"; "required": false; "isSignal": true; }; "currentFocusAreaDomain": { "alias": "currentFocusAreaDomain"; "required": false; "isSignal": true; }; "currentMetric": { "alias": "currentMetric"; "required": false; "isSignal": true; }; "targets": { "alias": "targets"; "required": false; "isSignal": true; }; "isCurrentStepComplete": { "alias": "isCurrentStepComplete"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -5850,7 +5843,7 @@ declare class IndeterminateSpinnerComponent {
     svgSize: _angular_core.Signal<40 | 80 | 60>;
     circleRadius: _angular_core.Signal<16 | 36 | 26>;
     svgCircleRadius: _angular_core.Signal<number>;
-    strokeWidth: _angular_core.Signal<3 | 2 | 2.5>;
+    strokeWidth: _angular_core.Signal<2 | 3 | 2.5>;
     dotSize: _angular_core.Signal<10 | 5 | 7>;
     containerClasses: _angular_core.Signal<{
         'w-10 h-10': boolean;
@@ -5915,7 +5908,7 @@ declare class ChartContainerComponent {
     titleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
     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-100 text-blue-600" | "bg-blue-500/20 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">;
     closeButtonClass: _angular_core.Signal<"bg-slate-100 text-slate-600 hover:bg-slate-200" | "bg-slate-700/50 text-slate-400 hover:bg-slate-600/50">;
     isCollapsible: _angular_core.Signal<boolean>;
@@ -6253,11 +6246,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-600" | "text-blue-400">;
+    protected expandedIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     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-600" | "text-blue-400">;
+    protected chevronClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     protected toggleExpanded(): void;
     protected toggleCompetitiveGap(): void;
     onExpandItem(event: Event): void;
@@ -6333,11 +6326,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-600" | "text-blue-400">;
+    protected expandedIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     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-600" | "text-blue-400">;
+    protected chevronClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     protected toggleExpanded(): void;
     protected navigateToItem(item: ProfileItemInterface): void;
     onExpandItem(event: Event): void;