@moatamed-sce/ui-components 0.1.2 → 0.1.3

package/types/moatamed-sce-ui-components.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, OnInit, OnDestroy, ElementRef, AfterViewInit, OnChanges, SimpleChanges, TemplateRef, DestroyRef, PipeTransform } from '@angular/core';
+import { InjectionToken, OnDestroy, ElementRef, AfterViewInit, OnChanges, SimpleChanges, OnInit, Signal, TemplateRef, DestroyRef, PipeTransform } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, ValidatorFn, FormGroup, FormControl, NonNullableFormBuilder, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as _moatamed_sce_ui_components from '@moatamed-sce/ui-components';
@@ -10,6 +10,7 @@ import { Popover } from 'primeng/popover';
 import { ImageTransform, ImageCroppedEvent } from 'ngx-image-cropper';
 import { Map as Map$1 } from 'leaflet';
 import { EChartsOption } from 'echarts';
+import * as echarts from 'echarts/core';
 import { ButtonSeverity } from 'primeng/button';
 import { MenuItem } from 'primeng/api';
 import { ToastPositionType } from 'primeng/toast';
@@ -83,6 +84,10 @@ interface SceFieldValidationMessages {
 }
 
 type SceTextFieldPrefixMode = 'absolute' | 'inline';
+/** Layout when `prefixMode` is `inline`. `inset` = bordered shell + borderless fit-content inner input. */
+type SceTextFieldInlineLayout = 'default' | 'inset';
+/** Prefix+value cluster alignment inside an inline container (logical start/end). */
+type SceTextFieldInlineAlign = 'start' | 'end';
 /** @see SceFieldValidationMode — kept as the published name for this field. */
 type SceTextFieldValidationMode = SceFieldValidationMode;
 /** Single-line text form field built on PrimeNG InputText, with a shared validation engine and an optional inline or absolute prefix; validation is opt-in, since `validationMode` defaults to `'never'`. */
@@ -112,8 +117,10 @@ declare class SceTextFieldComponent {
     /** Optional prefix shown inside the input (e.g. SA for IBAN fields). */
     readonly prefix: _angular_core.InputSignal<string | undefined>;
     readonly prefixMode: _angular_core.InputSignal<SceTextFieldPrefixMode>;
-    /** Text direction for the control (mirrors React TextField `dir`). */
-    readonly dir: _angular_core.InputSignal<"rtl" | "ltr" | undefined>;
+    readonly inlineLayout: _angular_core.InputSignal<SceTextFieldInlineLayout>;
+    readonly inlineAlign: _angular_core.InputSignal<SceTextFieldInlineAlign>;
+    /** Text direction for the control (`auto` follows the value's first strong character). */
+    readonly dir: _angular_core.InputSignal<"rtl" | "ltr" | "auto" | undefined>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     readonly focused: _angular_core.OutputEmitterRef<FocusEvent>;
     readonly blurred: _angular_core.OutputEmitterRef<FocusEvent>;
@@ -124,12 +131,15 @@ declare class SceTextFieldComponent {
     protected readonly computedError: _angular_core.Signal<string | null | undefined>;
     readonly inputClasses: _angular_core.Signal<string>;
     protected readonly isInlinePrefix: _angular_core.Signal<boolean>;
+    protected readonly isLocked: _angular_core.Signal<boolean>;
     protected readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    protected readonly resolvedDir: _angular_core.Signal<"rtl" | "ltr">;
+    protected readonly controlClasses: _angular_core.Signal<string>;
     onValueChange(next: string): void;
     onFocus(event: FocusEvent): void;
     onBlur(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceTextFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceTextFieldComponent, "sce-text-field", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "inputClassName": { "alias": "inputClassName"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "listId": { "alias": "listId"; "required": false; "isSignal": true; }; "validationMode": { "alias": "validationMode"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "prefixMode": { "alias": "prefixMode"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceTextFieldComponent, "sce-text-field", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "inputClassName": { "alias": "inputClassName"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "listId": { "alias": "listId"; "required": false; "isSignal": true; }; "validationMode": { "alias": "validationMode"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "prefixMode": { "alias": "prefixMode"; "required": false; "isSignal": true; }; "inlineLayout": { "alias": "inlineLayout"; "required": false; "isSignal": true; }; "inlineAlign": { "alias": "inlineAlign"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /** Multi-line textarea form field built on PrimeNG Textarea with the shared validation engine; validation is opt-in, since `validationMode` defaults to `'never'`. */
@@ -247,6 +257,8 @@ declare class SceSelectFieldComponent {
     protected readonly validationError: _angular_core.Signal<string | null>;
     protected readonly displayError: _angular_core.Signal<string | null>;
     protected readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    protected readonly selectedLabel: _angular_core.Signal<string>;
+    protected readonly resolvedDir: _angular_core.Signal<"rtl" | "ltr">;
     onBlur(): void;
     onValueChange(next: string | null): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceSelectFieldComponent, never>;
@@ -495,7 +507,6 @@ declare class SceDateFieldComponent {
     readonly draftRange: _angular_core.WritableSignal<DateRangeValue>;
     readonly hoveredDay: _angular_core.WritableSignal<string>;
     constructor();
-    onDocumentKeydown(event: KeyboardEvent): void;
     readonly fieldValue: _angular_core.Signal<string>;
     readonly calendarView: _angular_core.Signal<{
         grid: _moatamed_sce_ui_components.CalendarGrid;
@@ -563,6 +574,7 @@ declare class SceDatePickerModalComponent {
     readonly cancel: _angular_core.OutputEmitterRef<void>;
     readonly confirm: _angular_core.OutputEmitterRef<void>;
     readonly backdropClick: _angular_core.OutputEmitterRef<void>;
+    private userInitiatedHide;
     readonly isRtl: _angular_core.Signal<boolean>;
     readonly monthNames: _angular_core.Signal<string[]>;
     readonly monthLabel: _angular_core.Signal<string>;
@@ -572,12 +584,14 @@ declare class SceDatePickerModalComponent {
     onDayClick(value: string, disabled: boolean): void;
     onBackdropClick(event: MouseEvent): void;
     isDayDisabled(value: string): boolean;
-    /** Per-day view-model for the grid — precomputes disabled state and class string so the template never calls a method during change detection. */
     readonly dayViews: _angular_core.Signal<{
         day: CalendarDay;
         disabled: boolean;
         classes: string;
     }[]>;
+    onDialogHide(): void;
+    onCancel(): void;
+    onConfirm(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDatePickerModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDatePickerModalComponent, "sce-date-picker-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": true; "isSignal": true; }; "system": { "alias": "system"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "hijriOnly": { "alias": "hijriOnly"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "draftSingle": { "alias": "draftSingle"; "required": false; "isSignal": true; }; "draftRange": { "alias": "draftRange"; "required": false; "isSignal": true; }; "hoveredDay": { "alias": "hoveredDay"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "canShowToday": { "alias": "canShowToday"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": true; "isSignal": true; }; "currentMonthIndex": { "alias": "currentMonthIndex"; "required": false; "isSignal": true; }; "currentYearNumber": { "alias": "currentYearNumber"; "required": false; "isSignal": true; }; "yearRange": { "alias": "yearRange"; "required": false; "isSignal": true; }; "yearPageStart": { "alias": "yearPageStart"; "required": false; "isSignal": true; }; "showMonthPicker": { "alias": "showMonthPicker"; "required": false; "isSignal": true; }; "showYearPicker": { "alias": "showYearPicker"; "required": false; "isSignal": true; }; }, { "systemChange": "systemChange"; "showMonthPickerChange": "showMonthPickerChange"; "showYearPickerChange": "showYearPickerChange"; "movePrev": "movePrev"; "moveNext": "moveNext"; "selectDay": "selectDay"; "hoverDay": "hoverDay"; "clearHoverDay": "clearHoverDay"; "selectMonth": "selectMonth"; "selectYear": "selectYear"; "yearPagePrev": "yearPagePrev"; "yearPageNext": "yearPageNext"; "today": "today"; "cancel": "cancel"; "confirm": "confirm"; "backdropClick": "backdropClick"; }, never, never, true, never>;
 }
@@ -594,6 +608,11 @@ declare class ScePaginatorComponent {
     numberFormatter: _angular_core.InputSignal<(value: number) => string>;
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
     readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * A custom formatter has to bypass the `digit` pipe entirely: `digit` parses its input back to a number, so
+     * piping a formatted string through it ("01") would silently undo the formatting ("1").
+     */
+    protected readonly hasCustomNumberFormatter: _angular_core.Signal<boolean>;
     protected effectiveDir: _angular_core.Signal<"rtl" | "ltr">;
     protected isRtl: _angular_core.Signal<boolean>;
     protected totalPages: _angular_core.Signal<number>;
@@ -672,15 +691,41 @@ declare class SceDialogShellComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDialogShellComponent, "sce-dialog-shell", never, { "visible": { "alias": "visible"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "centerHeader": { "alias": "centerHeader"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "dismissableMask": { "alias": "dismissableMask"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "compactBody": { "alias": "compactBody"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "hasBody": { "alias": "hasBody"; "required": false; "isSignal": true; }; "hasFooter": { "alias": "hasFooter"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*", "[dialogFooter]"], true, never>;
 }
 
-/** Design-system demo host that shows `sce-dialog-shell` and reports its visibility back through `visibleChange`. */
-declare class SceDialogShellDemoComponent implements OnInit {
+/**
+ * Preset host for `sce-dialog-shell`: it owns the open/closed state and supplies the standard
+ * cancel/confirm footer, so a caller drives it with a single `[visible]` binding and is told through
+ * `visibleChange` when the dialog closes.
+ *
+ * All copy is an input, and this component holds no translation keys of its own: a library cannot
+ * resolve keys that live in an application's i18n bundle. Pass already-translated strings.
+ */
+declare class SceDialogShellDemoComponent {
+    /** Whether the dialog is open. Re-binding it to true after a close re-opens the dialog. */
     readonly visible: _angular_core.InputSignal<boolean>;
+    /** Active locale; toggles dir and provides the shell's default labels. */
+    readonly locale: _angular_core.InputSignal<"ar" | "en">;
+    /** Dialog title — pass a translated string, never hardcode it. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Secondary line under the title — pass a translated string, never hardcode it. */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Body copy — pass a translated string, never hardcode it. */
+    readonly content: _angular_core.InputSignal<string>;
+    /** Label of the footer's confirm button — pass a translated string, never hardcode it. */
+    readonly confirmLabel: _angular_core.InputSignal<string>;
+    /** Label of the footer's cancel button — pass a translated string, never hardcode it. */
+    readonly cancelLabel: _angular_core.InputSignal<string>;
+    /** Fires with `false` when the dialog closes itself, so the caller can sync its own state. */
     readonly visibleChange: _angular_core.OutputEmitterRef<boolean>;
-    isVisible: boolean;
-    ngOnInit(): void;
+    /**
+     * Mirrors `visible` but stays writable, so the dialog can close itself without a round-trip
+     * through the caller, and re-syncs on every change of the input — which is what makes `[visible]`
+     * genuinely reactive. (It used to be a plain field assigned once in `ngOnInit`: the input was
+     * never read again after the first render, so the dialog could never be re-opened.)
+     */
+    protected readonly isVisible: _angular_core.WritableSignal<boolean>;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDialogShellDemoComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDialogShellDemoComponent, "sce-dialog-shell-demo", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDialogShellDemoComponent, "sce-dialog-shell-demo", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, never, true, never>;
 }
 
 /** Tone of a confirm dialog, selecting both its header icon and the severity of its confirm button. */
@@ -755,16 +800,36 @@ declare class SceConfirmDialogComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceConfirmDialogComponent, "sce-confirm-dialog", never, { "visible": { "alias": "visible"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "confirmDisabled": { "alias": "confirmDisabled"; "required": false; "isSignal": true; }; "cancelDisabled": { "alias": "cancelDisabled"; "required": false; "isSignal": true; }; "hideCancelButton": { "alias": "hideCancelButton"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "centerHeader": { "alias": "centerHeader"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "hasBodySlot": { "alias": "hasBodySlot"; "required": false; "isSignal": true; }; "onConfirmHandler": { "alias": "onConfirmHandler"; "required": false; "isSignal": true; }; }, { "close": "close"; "cancel": "cancel"; "confirm": "confirm"; }, never, ["[confirmIcon]", "[confirmBody]"], true, never>;
 }
 
-/** Design-system demo host that shows `sce-confirm-dialog` and reports its visibility back through `visibleChange`. */
-declare class SceConfirmDialogDemoComponent implements OnInit {
+/**
+ * Preset host for `sce-confirm-dialog`: it owns the open/closed state, so a caller drives it with a
+ * single `[visible]` binding and is told through `visibleChange` when the user dismisses or confirms,
+ * instead of wiring `close` and `confirm` separately.
+ *
+ * All copy is an input, and this component holds no translation keys of its own: a library cannot
+ * resolve keys that live in an application's i18n bundle. Pass already-translated strings.
+ */
+declare class SceConfirmDialogDemoComponent {
+    /** Whether the dialog is open. Re-binding it to true after a close re-opens the dialog. */
     readonly visible: _angular_core.InputSignal<boolean>;
+    /** Active locale; toggles dir and provides the dialog's default button labels. */
+    readonly locale: _angular_core.InputSignal<"ar" | "en">;
+    /** Dialog title — pass a translated string, never hardcode it. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Body copy under the title — pass a translated string, never hardcode it. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Fires with `false` when the dialog closes itself, so the caller can sync its own state. */
     readonly visibleChange: _angular_core.OutputEmitterRef<boolean>;
-    isVisible: boolean;
-    ngOnInit(): void;
+    /**
+     * Mirrors `visible` but stays writable, so the dialog can close itself without a round-trip
+     * through the caller, and re-syncs on every change of the input — which is what makes `[visible]`
+     * genuinely reactive. (It used to be a plain field assigned once in `ngOnInit`: the input was
+     * never read again after the first render, so the dialog could never be re-opened.)
+     */
+    protected readonly isVisible: _angular_core.WritableSignal<boolean>;
     close(): void;
     confirm(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceConfirmDialogDemoComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceConfirmDialogDemoComponent, "sce-confirm-dialog-demo", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceConfirmDialogDemoComponent, "sce-confirm-dialog-demo", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1373,7 +1438,7 @@ declare class SceInfoFieldCardComponent {
 /** Layout wrapper that arranges projected info-field cards into a one- to four-column grid. */
 declare class SceInfoFieldsGridComponent {
     readonly columns: _angular_core.InputSignal<1 | 3 | 4 | 2>;
-    readonly gap: _angular_core.InputSignal<"sm" | "default">;
+    readonly gap: _angular_core.InputSignal<"default" | "sm">;
     readonly dir: _angular_core.InputSignal<"rtl" | "ltr" | undefined>;
     readonly gridClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceInfoFieldsGridComponent, never>;
@@ -1413,7 +1478,7 @@ declare class SceDashboardAccountRoleIconComponent {
     readonly photoUrl: _angular_core.InputSignal<string | null>;
     readonly width: _angular_core.InputSignal<number>;
     readonly height: _angular_core.InputSignal<number>;
-    readonly defaultAvatar = "/assets/images/Avatar.png";
+    readonly defaultAvatar = "/assets/images/Avatar.svg";
     protected readonly showClientPhoto: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDashboardAccountRoleIconComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDashboardAccountRoleIconComponent, "sce-dashboard-account-role-icon", never, { "role": { "alias": "role"; "required": false; "isSignal": true; }; "accountKind": { "alias": "accountKind"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "photoUrl": { "alias": "photoUrl"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1520,16 +1585,19 @@ interface OfficeMetricCardItem {
 declare class SceOfficeMetricCardComponent {
     readonly item: _angular_core.InputSignal<OfficeMetricCardItem>;
     readonly variant: _angular_core.InputSignal<"accent" | "soft">;
+    /** `lg` enlarges the value (title) for dashboard profile stats. */
+    readonly size: _angular_core.InputSignal<"md" | "lg">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOfficeMetricCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeMetricCardComponent, "sce-office-metric-card", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeMetricCardComponent, "sce-office-metric-card", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /** Row of office metric tiles laid out in two or three columns, sharing one variant across all items. */
 declare class SceOfficeMetricCardsRowComponent {
     readonly items: _angular_core.InputSignal<OfficeMetricCardItem[]>;
     readonly variant: _angular_core.InputSignal<"accent" | "soft">;
     readonly columns: _angular_core.InputSignal<3 | 2>;
+    readonly size: _angular_core.InputSignal<"md" | "lg">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOfficeMetricCardsRowComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeMetricCardsRowComponent, "sce-office-metric-cards-row", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeMetricCardsRowComponent, "sce-office-metric-cards-row", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Loading placeholder matching `sce-info-fields-grid`: `count` info-field cards (default 6) with an optional section-title bar. */
@@ -1855,7 +1923,7 @@ interface ServicesTopFiltersChange {
 /** Which of the three dropdowns a change came from. */
 type SceServicesTopFilterField = 'category' | 'target' | 'extra';
 /** Filter bar for the public services and offices listings, rendering a search box plus category, target, extra and sort dropdowns and emitting the resolved filter state via `filtersChange`. */
-declare class SceServicesTopFiltersComponent implements OnInit {
+declare class SceServicesTopFiltersComponent {
     private readonly language;
     private readonly translate;
     readonly q: _angular_core.InputSignal<string>;
@@ -1876,7 +1944,8 @@ declare class SceServicesTopFiltersComponent implements OnInit {
     readonly extraOptions: _angular_core.InputSignal<readonly string[]>;
     readonly extraParamName: _angular_core.InputSignal<string>;
     readonly filtersChange: _angular_core.OutputEmitterRef<ServicesTopFiltersChange>;
-    localQ: string;
+    /** Draft search text — follows the applied `q` input, diverges while the user types. */
+    readonly localQ: _angular_core.WritableSignal<string>;
     readonly locale: _angular_core.WritableSignal<_moatamed_sce_core.AppLocale>;
     readonly badgeKey: _angular_core.Signal<string>;
     readonly categoryLabelKey: _angular_core.Signal<string>;
@@ -1929,7 +1998,6 @@ declare class SceServicesTopFiltersComponent implements OnInit {
     readonly categoryIcon: _angular_core.Signal<"/assets/icons/elements.svg" | "/assets/icons/briefcase.svg">;
     readonly targetIcon: _angular_core.Signal<"/assets/icons/location.svg" | "/assets/icons/building-03.svg">;
     readonly extraIcon: _angular_core.Signal<string>;
-    ngOnInit(): void;
     readonly isRtl: _angular_core.Signal<boolean>;
     readonly dir: _angular_core.Signal<"rtl" | "ltr">;
     readonly wrapClass: _angular_core.Signal<string>;
@@ -1947,6 +2015,12 @@ declare class SceServicesTopFiltersComponent implements OnInit {
         value: string;
     } | null): void;
     submitSearch(): void;
+    /**
+     * Emptying the field (backspace, Esc, or the clear button) resets the
+     * applied search immediately — no Enter or button press required.
+     */
+    onSearchInput(value: string): void;
+    clearSearch(): void;
     private emitChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceServicesTopFiltersComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceServicesTopFiltersComponent, "sce-services-top-filters", never, { "q": { "alias": "q"; "required": false; "isSignal": true; }; "category": { "alias": "category"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "targets": { "alias": "targets"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "extra": { "alias": "extra"; "required": false; "isSignal": true; }; "extraOptions": { "alias": "extraOptions"; "required": false; "isSignal": true; }; "extraParamName": { "alias": "extraParamName"; "required": false; "isSignal": true; }; }, { "filtersChange": "filtersChange"; }, never, never, true, never>;
@@ -2396,7 +2470,7 @@ declare class SceIcon {
 }
 
 /** Visual style of `SceButton`, driving the `btn--*` modifier class. */
-type SceButtonVariant = 'primary' | 'black' | 'neutral' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'text' | 'link';
+type SceButtonVariant = 'primary' | 'cta' | 'black' | 'neutral' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'text' | 'link';
 /** Size preset of `SceButton`; `small-icon-only` is the square icon-button form. */
 type SceButtonSize = 'compact' | 'mini' | 'extra-small' | 'small-icon-only' | 'small' | 'medium' | 'large';
 /** Design-system button that renders an `<a>` when `routerLink` or `href` is set and a `<button>` otherwise; note `fullWidth` defaults to true. */
@@ -2412,6 +2486,14 @@ declare class SceButton {
     readonly iconSize: _angular_core.InputSignal<number>;
     /** Bound to the native button; use for icon-only actions (e.g. delete). */
     readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Toggle state for segmented/filter controls. Without this, a pressed `sce-button` conveys
+     * selection by colour alone, so a screen-reader user cannot tell which option is active
+     * (WCAG 4.1.2) — callers were reduced to faking it with `[disabled]`. Leave `null`
+     * (the default) for ordinary action buttons, which must NOT carry `aria-pressed`.
+     * Only applied in `<button>` mode; the attribute is invalid on the anchor variants.
+     */
+    readonly ariaPressed: _angular_core.InputSignal<boolean | null>;
     /**
      * Renders an `<a>` instead of a `<button>`, keeping real link semantics
      * (href, middle-click, open-in-new-tab). Set exactly one of these.
@@ -2424,7 +2506,7 @@ declare class SceButton {
     readonly isDisabled: _angular_core.Signal<boolean>;
     readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceButton, "sce-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceButton, "sce-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Labelled checkbox implementing `ControlValueAccessor`, so it works with `formControl`/`ngModel` as well as the `changed` output. */
@@ -2767,11 +2849,16 @@ declare class SceDashboardLayoutComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDashboardLayoutComponent, "sce-dashboard-layout", never, { "sidebarCollapsed": { "alias": "sidebarCollapsed"; "required": false; "isSignal": true; }; }, {}, never, ["[sidebar]", "[header]", "*"], true, never>;
 }
 
-/** Page shell for a form: `title`/`subtitle` header, a projected form body, and an action footer; it owns the `<form>` element and re-emits its submit as `submitted`, and uses `ViewEncapsulation.None`. */
+/** Page shell for a form: `title`/`subtitle` header, a projected form body, and an action footer; it owns the `<form>` element and re-emits its native submit as `submitted`, and uses `ViewEncapsulation.None`. */
 declare class SceFormPageLayoutComponent {
     readonly title: _angular_core.InputSignal<string>;
     readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when the projected form is submitted — by a footer `<button type="submit">`, or by
+     * Enter in a field. The native navigation is suppressed, so the parent owns the submit.
+     */
     readonly submitted: _angular_core.OutputEmitterRef<void>;
+    protected onSubmit(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceFormPageLayoutComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceFormPageLayoutComponent, "sce-form-page-layout", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, ["*", "[actions]"], true, never>;
 }
@@ -3273,6 +3360,125 @@ interface ChartTooltipData {
     color?: string;
 }
 
+/**
+ * Shared visual language for every chart in the library.
+ *
+ * Chart colours are painted onto a CANVAS, so they cannot be `var(--color-*)` — a CSS custom
+ * property never resolves inside an ECharts series. Every value here is therefore a literal hex
+ * lifted from the design tokens (`tokens-semantic.scss`) rather than invented: keep the two in
+ * step by hand when a token ramp moves.
+ *
+ * The two categorical palettes are NOT light/dark variants of one another. Dark mode is chosen,
+ * not flipped: each mode's steps were validated independently against that mode's surface for
+ * OKLCH lightness band, chroma floor, colour-vision-deficiency separation between ADJACENT slots,
+ * and contrast. Reordering the slots therefore breaks the CVD guarantee — hues are assigned in
+ * fixed order and never cycled. A 9th series is not a new hue: fold it into "other".
+ */
+type ChartMode = 'light' | 'dark';
+/** Categorical hues, in assignment order. Validated for the light surface. */
+declare const CHART_PALETTE_LIGHT: readonly string[];
+/** Categorical hues, in assignment order. Validated for the dark surface. */
+declare const CHART_PALETTE_DARK: readonly string[];
+/** Single-hue ramp for magnitude (heatmaps, choropleths). Light → dark, one hue only. */
+declare const CHART_SEQUENTIAL: readonly string[];
+/** Two poles + a NEUTRAL grey midpoint, for polarity (correlation, variance vs target). */
+declare const CHART_DIVERGING: readonly string[];
+/** Reserved state colours. Never reuse these as "series 4". */
+declare const CHART_STATUS: {
+    readonly good: "#0f805e";
+    readonly warning: "#855f00";
+    readonly critical: "#d92d20";
+    readonly neutral: "#7b7b84";
+};
+/** Ink + surface per mode, so axes and labels never wear a series colour. */
+declare const CHART_INK: {
+    readonly light: {
+        readonly primary: "#1e1e24";
+        readonly secondary: "#565660";
+        readonly muted: "#7b7b84";
+        readonly grid: "#e7ecf0";
+        readonly surface: "#ffffff";
+    };
+    readonly dark: {
+        readonly primary: "#f7f7f8";
+        readonly secondary: "#d2d2d7";
+        readonly muted: "#a9a9b0";
+        readonly grid: "#3a3a42";
+        readonly surface: "#1e1e24";
+    };
+};
+declare const palette: (mode?: ChartMode) => readonly string[];
+/** Nth series colour, assigned in fixed order. Wraps only past slot 8, where identity is already lost. */
+declare const seriesColor: (index: number, mode?: ChartMode) => string;
+/**
+ * Vertical fade of a series colour, for area fills. `topOpacity`/`bottomOpacity` are hex alpha
+ * suffixes — ECharts accepts 8-digit hex, which keeps this allocation-free.
+ */
+declare const verticalFade: (color: string, topOpacity?: string, bottomOpacity?: string) => echarts.graphic.LinearGradient;
+/** Rounded data-end for a vertical bar: the corners away from the baseline only. */
+declare const BAR_RADIUS_VERTICAL: [number, number, number, number];
+/** Rounded data-end for a horizontal bar. Physical by necessity — this is canvas geometry, not CSS. */
+declare const BAR_RADIUS_HORIZONTAL: [number, number, number, number];
+/** A hairline of surface between adjacent/stacked marks, so they read as separate quantities. */
+declare const MARK_SEPARATOR: (mode?: ChartMode) => {
+    borderColor: "#1e1e24" | "#ffffff";
+    borderWidth: number;
+};
+/**
+ * The tooltip every chart shares: a floating card, not ECharts' default black box.
+ * `confine` keeps it inside the container — without it, a tooltip near the edge of a
+ * dashboard card is clipped by the card's own overflow.
+ */
+declare const tooltipBase: (mode?: ChartMode) => EChartsOption["tooltip"];
+/** Axis styling: recessive by design — the data is the ink, the axis is the paper. */
+declare const axisBase: (mode?: ChartMode) => {
+    axisLine: {
+        show: boolean;
+    };
+    axisTick: {
+        show: boolean;
+    };
+    axisLabel: {
+        color: "#7b7b84" | "#a9a9b0";
+        fontSize: number;
+        fontFamily: string;
+    };
+    splitLine: {
+        lineStyle: {
+            color: "#e7ecf0" | "#3a3a42";
+            type: "dashed";
+        };
+    };
+};
+declare const legendBase: (mode?: ChartMode) => EChartsOption["legend"];
+/** Entrance animation shared by every chart. Short enough to feel responsive, eased to feel intentional. */
+declare const ANIMATION: {
+    animationDuration: number;
+    animationEasing: "cubicOut";
+    animationDelay: (idx: number) => number;
+};
+/**
+ * The base every chart spreads first: text, tooltip, legend, animation.
+ * Series-specific options are layered on top by each component.
+ */
+declare const chartBase: (mode?: ChartMode) => EChartsOption;
+
+/**
+ * A signal that tracks the app's active theme for chart painting.
+ *
+ * The rest of the design system gets dark mode for free: `[data-theme='dark']` on `<html>` reroutes
+ * every CSS custom property. A chart cannot — it is painted onto a `<canvas>`, which inherits no CSS
+ * at all. Its colours are resolved in TypeScript at option-build time, so the chart has to *observe*
+ * the theme and rebuild its options when it flips. Without this, a chart keeps its light-mode axis
+ * ink and tooltip card on a dark surface: legible-ish, but wrong, and the near-black label text all
+ * but disappears.
+ *
+ * `ThemeExtendedService` owns the theme but keeps its signal private and writes the attribute, so the
+ * attribute IS the contract — observing it also picks up a theme set by any other means (SSR markup,
+ * a user preference restored on boot, another app in the monorepo).
+ */
+declare function injectChartMode(): Signal<ChartMode>;
+
 /** Standalone chart legend rendering colour markers and labels in a row or column — used instead of the built-in ECharts legend. */
 declare class SceChartLegendComponent {
     /** List of legend items to display */
@@ -3309,6 +3515,11 @@ interface OverlayLineSeries {
 /** ECharts bar chart with optional stacking, overlay line series and a custom legend; axis side auto-detects RTL unless `isRtl` overrides it. */
 declare class SceBarChartComponent {
     private readonly el;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Manual direction override; null auto-detects from computed style (RTL-first default). */
     readonly isRtl: _angular_core.InputSignal<boolean | null>;
     private readonly detectedIsRtl;
@@ -3319,7 +3530,7 @@ declare class SceBarChartComponent {
     /** Optional line series to overlay on top of bars */
     readonly overlayLineSeries: _angular_core.InputSignal<OverlayLineSeries[]>;
     /** X-axis category labels */
-    readonly categories: _angular_core.InputSignal<string[]>;
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
     /** Chart height in pixels */
     readonly height: _angular_core.InputSignal<number | null>;
     /** Chart width in pixels */
@@ -3335,7 +3546,7 @@ declare class SceBarChartComponent {
     readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceBarChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBarChartComponent, "sce-bar-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "overlayLineSeries": { "alias": "overlayLineSeries"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "barWidth": { "alias": "barWidth"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBarChartComponent, "sce-bar-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "overlayLineSeries": { "alias": "overlayLineSeries"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "barWidth": { "alias": "barWidth"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** One horizontal bar; `maxValue` overrides the chart-wide maximum for this bar only, and `color` overrides the chart's default colour. */
@@ -3352,6 +3563,11 @@ interface ComputedBarItem extends HorizontalBarItem {
 }
 /** Pure-CSS horizontal bar chart (no ECharts) where each bar is split into `segments` that fill proportionally to its value. */
 declare class SceHorizontalBarChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Data items for horizontal bars */
     readonly data: _angular_core.InputSignal<HorizontalBarItem[]>;
     /** Maximum value for all bars (auto-calculated if not provided) */
@@ -3368,14 +3584,21 @@ declare class SceHorizontalBarChartComponent {
     readonly gap: _angular_core.InputSignal<number>;
     /** Number of segments per bar */
     readonly segments: _angular_core.InputSignal<number>;
+    /** Track background colour, mode-aware when `trackColor` is left at its default. */
+    protected readonly resolvedTrackColor: _angular_core.Signal<string>;
     readonly computedItems: _angular_core.Signal<ComputedBarItem[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceHorizontalBarChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceHorizontalBarChartComponent, "sce-horizontal-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceHorizontalBarChartComponent, "sce-horizontal-bar-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** ECharts multi-series line chart with optional area fill and a highlight bar/marker at `highlightIndex`; axis side auto-detects RTL unless `isRtl` overrides it. */
 declare class SceLineChartComponent {
     private readonly el;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Manual direction override; null auto-detects from computed style (RTL-first default). */
     readonly isRtl: _angular_core.InputSignal<boolean | null>;
     private readonly detectedIsRtl;
@@ -3384,7 +3607,7 @@ declare class SceLineChartComponent {
     /** Array of series data to display */
     readonly series: _angular_core.InputSignal<ChartLineSeriesData[]>;
     /** X-axis category labels */
-    readonly categories: _angular_core.InputSignal<string[]>;
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
     /** Chart height in pixels */
     readonly height: _angular_core.InputSignal<number | null>;
     /** Chart width in pixels */
@@ -3404,22 +3627,27 @@ declare class SceLineChartComponent {
     readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceLineChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceLineChartComponent, "sce-line-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXAxisLabels": { "alias": "showXAxisLabels"; "required": false; "isSignal": true; }; "highlightIndex": { "alias": "highlightIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceLineChartComponent, "sce-line-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXAxisLabels": { "alias": "showXAxisLabels"; "required": false; "isSignal": true; }; "highlightIndex": { "alias": "highlightIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** ECharts gradient area chart with hidden axes and an optional highlighted point marker at `highlightIndex`. */
 declare class SceAreaChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Data points for the chart */
     readonly data: _angular_core.InputSignal<number[]>;
     /** X-axis category labels */
-    readonly categories: _angular_core.InputSignal<string[]>;
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
     /** Chart height in pixels */
     readonly height: _angular_core.InputSignal<number>;
     /** Chart width in pixels */
     readonly width: _angular_core.InputSignal<number | null>;
-    /** Start color of the gradient (green area) */
+    /** Start color of the gradient */
     readonly startColor: _angular_core.InputSignal<string>;
-    /** End color of the gradient (red area) */
+    /** End color of the gradient */
     readonly endColor: _angular_core.InputSignal<string>;
     /** Whether to show smooth curves */
     readonly smooth: _angular_core.InputSignal<boolean>;
@@ -3429,11 +3657,16 @@ declare class SceAreaChartComponent {
     readonly highlightIndex: _angular_core.InputSignal<number>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceAreaChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceAreaChartComponent, "sce-area-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "startColor": { "alias": "startColor"; "required": false; "isSignal": true; }; "endColor": { "alias": "endColor"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "tooltipLabel": { "alias": "tooltipLabel"; "required": false; "isSignal": true; }; "highlightIndex": { "alias": "highlightIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceAreaChartComponent, "sce-area-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "startColor": { "alias": "startColor"; "required": false; "isSignal": true; }; "endColor": { "alias": "endColor"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "tooltipLabel": { "alias": "tooltipLabel"; "required": false; "isSignal": true; }; "highlightIndex": { "alias": "highlightIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** ECharts pie chart with optional in-slice percentage labels, an optional centre hole and a custom legend. */
 declare class ScePieChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Data items for the pie segments */
     readonly data: _angular_core.InputSignal<ChartSeriesItem[]>;
     /** Chart height in pixels */
@@ -3457,11 +3690,16 @@ declare class ScePieChartComponent {
     readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScePieChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePieChartComponent, "sce-pie-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "showCenterHole": { "alias": "showCenterHole"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "itemRadius": { "alias": "itemRadius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePieChartComponent, "sce-pie-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "showCenterHole": { "alias": "showCenterHole"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "itemRadius": { "alias": "itemRadius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Concentric ring ("donut") chart where each data item gets its own gauge ring sized against `maxRingValue`, with optional centred value and label. */
 declare class SceDonutChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Data items for the donut rings */
     readonly data: _angular_core.InputSignal<ChartSeriesItem[]>;
     /** Chart height in pixels */
@@ -3470,18 +3708,20 @@ declare class SceDonutChartComponent {
     readonly centerValue: _angular_core.InputSignal<string | number | null>;
     /** Center sub label */
     readonly centerLabel: _angular_core.InputSignal<string | null>;
-    /** Inner radius percentage */
+    /**
+     * Radius of the innermost ring, as a percentage of the chart box. Rings are spread evenly
+     * across the `innerRadius`…`outerRadius` band, so more items pack tighter rather than
+     * overflowing inwards.
+     */
     readonly innerRadius: _angular_core.InputSignal<string>;
-    /** Outer radius percentage */
+    /** Radius of the outermost ring, as a percentage of the chart box. */
     readonly outerRadius: _angular_core.InputSignal<string>;
     /** Whether to show legend */
     readonly showLegend: _angular_core.InputSignal<boolean>;
-    /** Whether to show the gap between items */
+    /** Whether each ring leaves a 20° wedge open at the start angle instead of closing the circle. */
     readonly showGap: _angular_core.InputSignal<boolean>;
     /** Start angle of the donut */
     readonly startAngle: _angular_core.InputSignal<number>;
-    /** Total value for computing arc proportions */
-    readonly total: _angular_core.InputSignal<number>;
     /**
      * Maximum value per ring — each ring's arc = (value / maxRingValue) x 360.
      * If 0, the max value from the data is used.
@@ -3490,7 +3730,7 @@ declare class SceDonutChartComponent {
     readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDonutChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDonutChartComponent, "sce-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGap": { "alias": "showGap"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "maxRingValue": { "alias": "maxRingValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDonutChartComponent, "sce-donut-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGap": { "alias": "showGap"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "maxRingValue": { "alias": "maxRingValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Legend item that includes a displayable value */
@@ -3499,8 +3739,15 @@ interface RingChartLegendItem {
     color: string;
     value: string | number;
 }
-/** ECharts donut ring with a centred label/value and a legend that also shows each item's value; the tooltip unit is hard-coded to Arabic "طلبات". */
+/** ECharts donut ring with a centred label/value and a legend that also shows each item's value; the tooltip's value unit is translated from `unitKey`. */
 declare class SceRingChartComponent {
+    private readonly translate;
+    private readonly language;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Data items for the ring segments */
     readonly data: _angular_core.InputSignal<ChartSeriesItem[]>;
     /** Label displayed above the center value */
@@ -3517,14 +3764,26 @@ declare class SceRingChartComponent {
     readonly height: _angular_core.InputSignal<number>;
     /** Start angle of the ring */
     readonly startAngle: _angular_core.InputSignal<number>;
+    /**
+     * i18n key for the unit appended to each tooltip value (`44 requests`). Defaults to the shared
+     * "requests" unit; pass `''` to render the bare number.
+     */
+    readonly unitKey: _angular_core.InputSignal<string>;
+    /** Translated tooltip unit. Reads the locale signal so it re-resolves on the in-place language toggle. */
+    private readonly unitLabel;
     readonly legendItems: _angular_core.Signal<RingChartLegendItem[]>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRingChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRingChartComponent, "sce-ring-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRingChartComponent, "sce-ring-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "unitKey": { "alias": "unitKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Semicircular tick-mark gauge for a 0-100 value; when `isRtl` is set the chart's own text is hidden so the caller can overlay it unmirrored. */
 declare class SceGaugeChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Current value (0-100) */
     readonly value: _angular_core.InputSignal<number>;
     /** Chart height in pixels */
@@ -3550,7 +3809,7 @@ declare class SceGaugeChartComponent {
     readonly isRtl: _angular_core.InputSignal<boolean>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceGaugeChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceGaugeChartComponent, "sce-gauge-chart", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "endAngle": { "alias": "endAngle"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceGaugeChartComponent, "sce-gauge-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "endAngle": { "alias": "endAngle"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** One segmented bar; unlike `HorizontalBarItem`, its `maxValue` is required and always scopes the fill to this bar alone. */
@@ -3562,7 +3821,12 @@ interface MultiSegmentBarItem {
 }
 /** Pure-CSS horizontal bars (no ECharts), each split into `segmentCount` sub-segments that fill against the item's own `maxValue`. */
 declare class SceMultiSegmentBarChartComponent {
-    private readonly el;
+    private readonly language;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Data items for the bar chart */
     readonly data: _angular_core.InputSignal<MultiSegmentBarItem[]>;
     /** Bar height in pixels */
@@ -3577,10 +3841,14 @@ declare class SceMultiSegmentBarChartComponent {
     readonly defaultColor: _angular_core.InputSignal<string>;
     /** Track background color */
     readonly trackColor: _angular_core.InputSignal<string>;
-    /** Manual override for RTL. Detected from parent if not provided. */
+    /** Track background colour, mode-aware when `trackColor` is left at its default. */
+    protected readonly resolvedTrackColor: _angular_core.Signal<string>;
+    /** Manual override for RTL. Falls back to the app locale when not provided. */
     readonly isRtl: _angular_core.InputSignal<boolean | null>;
-    private readonly detectedIsRtl;
-    constructor();
+    /**
+     * Final RTL status (prop override, else the app locale). Consumed by the template, which
+     * mirrors the bar fill direction and the label/value row.
+     */
     readonly computedIsRtl: _angular_core.Signal<boolean>;
     readonly computedBars: _angular_core.Signal<{
         color: string;
@@ -3592,11 +3860,16 @@ declare class SceMultiSegmentBarChartComponent {
         maxValue: number;
     }[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceMultiSegmentBarChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceMultiSegmentBarChartComponent, "sce-multi-segment-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "segmentCount": { "alias": "segmentCount"; "required": false; "isSignal": true; }; "segmentGap": { "alias": "segmentGap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceMultiSegmentBarChartComponent, "sce-multi-segment-bar-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "segmentCount": { "alias": "segmentCount"; "required": false; "isSignal": true; }; "segmentGap": { "alias": "segmentGap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Half-circle ECharts gauge whose arc is coloured by proportional segment stops, with an optional centred label and value. */
 declare class SceMultiSegmentGaugeComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Segments to display on the gauge arc */
     readonly segments: _angular_core.InputSignal<ChartSeriesItem[]>;
     /** Label shown above the center value */
@@ -3612,7 +3885,7 @@ declare class SceMultiSegmentGaugeComponent {
     readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceMultiSegmentGaugeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceMultiSegmentGaugeComponent, "sce-multi-segment-gauge", never, { "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceMultiSegmentGaugeComponent, "sce-multi-segment-gauge", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** One slice of the stacked bar; `barValue` lets the drawn width differ from the `value` shown in the legend, and `segments` splits the slice into that many sub-segments. */
@@ -3633,7 +3906,12 @@ interface ComputedStackedDistributionChartItem extends StackedDistributionChartI
 }
 /** Single stacked bar showing each item's share of the total plus a legend row per item, with an auto-generated aria summary and RTL auto-detection. */
 declare class SceStackedDistributionChartComponent {
-    private readonly el;
+    private readonly language;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Segments rendered in the distribution bar and legend rows */
     readonly data: _angular_core.InputSignal<StackedDistributionChartItem[]>;
     /** Segment height in pixels */
@@ -3648,16 +3926,20 @@ declare class SceStackedDistributionChartComponent {
     readonly defaultColor: _angular_core.InputSignal<string>;
     /** Placeholder color used when there is no positive data */
     readonly emptyColor: _angular_core.InputSignal<string>;
-    /** Manual override for RTL. Detected from parent if not provided. */
+    /** Empty-state placeholder colour, mode-aware when `emptyColor` is left at its default. */
+    protected readonly resolvedEmptyColor: _angular_core.Signal<string>;
+    /** Manual override for RTL. Falls back to the app locale when not provided. */
     readonly isRtl: _angular_core.InputSignal<boolean | null>;
-    private readonly detectedIsRtl;
-    constructor();
+    /**
+     * Final RTL status (prop override, else the app locale). Consumed by the template, which
+     * mirrors the stacking order of the bar and the legend rows.
+     */
     readonly computedIsRtl: _angular_core.Signal<boolean>;
     readonly total: _angular_core.Signal<number>;
     readonly computedItems: _angular_core.Signal<ComputedStackedDistributionChartItem[]>;
     readonly ariaLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStackedDistributionChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStackedDistributionChartComponent, "sce-stacked-distribution-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "segmentGap": { "alias": "segmentGap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "markerSize": { "alias": "markerSize"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStackedDistributionChartComponent, "sce-stacked-distribution-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "segmentGap": { "alias": "segmentGap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "markerSize": { "alias": "markerSize"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** A single stat row displayed below the gauge */
@@ -3668,6 +3950,11 @@ interface StatGaugeRow {
 }
 /** Half-circle gauge of `value` out of `total`, rendered with a subtitle and a list of colour-coded stat rows below it. */
 declare class SceStatGaugeComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Current (numerator) value, e.g. 120 */
     readonly value: _angular_core.InputSignal<number>;
     /** Total (denominator) value, e.g. 300 */
@@ -3687,12 +3974,17 @@ declare class SceStatGaugeComponent {
     readonly percentage: _angular_core.Signal<number>;
     readonly chartOptions: _angular_core.Signal<EChartsOption>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStatGaugeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStatGaugeComponent, "sce-stat-gauge", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "stats": { "alias": "stats"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "markerSize": { "alias": "markerSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStatGaugeComponent, "sce-stat-gauge", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "stats": { "alias": "stats"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "markerSize": { "alias": "markerSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** SVG progress ring (no ECharts) with a centred label and value, an optional gradient stroke and RTL auto-detection; `progress` may exceed 100. */
 declare class SceStatRingComponent {
-    private readonly el;
+    private readonly language;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
     /** Center label shown above the value */
     readonly label: _angular_core.InputSignal<string>;
     /** Center value shown inside the ring */
@@ -3713,6 +4005,14 @@ declare class SceStatRingComponent {
     readonly gradientEndColor: _angular_core.InputSignal<string>;
     /** Background ring color */
     readonly trackColor: _angular_core.InputSignal<string>;
+    /** Progress arc colour, mode-aware when `color` is left at its default. */
+    protected readonly resolvedColor: _angular_core.Signal<string>;
+    /** Gradient start colour, mode-aware when `gradientStartColor` is left at its default. */
+    protected readonly resolvedGradientStartColor: _angular_core.Signal<string>;
+    /** Gradient end colour, mode-aware when `gradientEndColor` is left at its default. */
+    protected readonly resolvedGradientEndColor: _angular_core.Signal<string>;
+    /** Track background colour, mode-aware when `trackColor` is left at its default. */
+    protected readonly resolvedTrackColor: _angular_core.Signal<string>;
     /**
      * Rotation of the progress arc in degrees.
      * Default is 0 (Right/3 o'clock).
@@ -3720,12 +4020,13 @@ declare class SceStatRingComponent {
     readonly startAngle: _angular_core.InputSignal<number>;
     /** Whether to use a linear gradient for the progress arc */
     readonly useGradient: _angular_core.InputSignal<boolean>;
-    /** Manual override for RTL. Detected from parent if not provided. */
+    /** Manual override for RTL. Falls back to the app locale when not provided. */
     readonly isRtl: _angular_core.InputSignal<boolean | null>;
-    private readonly detectedIsRtl;
     readonly gradientId: _angular_core.WritableSignal<string>;
-    constructor();
-    /** Final RTL status (prop override or detected) */
+    /**
+     * Final RTL status (prop override, else the app locale). Consumed by the template, which flips
+     * the arc's sweep direction so the ring fills mirror-image in Arabic.
+     */
     readonly computedIsRtl: _angular_core.Signal<boolean>;
     /** Normalized progress (can exceed 100) */
     readonly normalizedProgress: _angular_core.Signal<number>;
@@ -3739,17 +4040,275 @@ declare class SceStatRingComponent {
     readonly strokeDashOffset: _angular_core.Signal<number>;
     readonly viewBox: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStatRingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStatRingComponent, "sce-stat-ring", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackStrokeWidth": { "alias": "trackStrokeWidth"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "gradientStartColor": { "alias": "gradientStartColor"; "required": false; "isSignal": true; }; "gradientEndColor": { "alias": "gradientEndColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "useGradient": { "alias": "useGradient"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStatRingComponent, "sce-stat-ring", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackStrokeWidth": { "alias": "trackStrokeWidth"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "gradientStartColor": { "alias": "gradientStartColor"; "required": false; "isSignal": true; }; "gradientEndColor": { "alias": "gradientEndColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "useGradient": { "alias": "useGradient"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Axis-less trend line for inline use inside cards, table cells and stat tiles.
+ *
+ * Unlike `sce-overview-stat-sparkline` — which renders one fixed, hardcoded SVG path — this chart
+ * is driven by real data. Reach for that one only to reproduce the static overview-card artwork.
+ */
+declare class SceSparklineComponent {
+    /** Data points for the sparkline */
+    readonly data: _angular_core.InputSignal<readonly number[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Line color */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Whether to show area fill */
+    readonly showArea: _angular_core.InputSignal<boolean>;
+    /** Line width */
+    readonly lineWidth: _angular_core.InputSignal<number>;
+    /** Whether to use smooth curves */
+    readonly smooth: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceSparklineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceSparklineComponent, "sce-sparkline", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "lineWidth": { "alias": "lineWidth"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * A GeoJSON FeatureCollection, as `echarts.registerMap` accepts it.
+ *
+ * Declared structurally here rather than as `Parameters<typeof echarts.registerMap>[1]`: that alias
+ * resolves to ECharts' INTERNAL `GeoJSON`/`GeoJSONCompressed`/`SVGMapInput` union, which the package
+ * never exports — so TypeScript cannot name it when emitting this library's .d.ts and declaration
+ * build fails with TS4029. Owning the shape keeps the public API nameable, and it is also the honest
+ * contract: this component only ever accepts a GeoJSON FeatureCollection.
+ */
+interface RegionMapGeoJson {
+    readonly type: 'FeatureCollection';
+    readonly features: readonly {
+        readonly type: 'Feature';
+        readonly id?: string | number;
+        readonly properties?: Readonly<Record<string, unknown>>;
+        readonly geometry: {
+            readonly type: string;
+            readonly coordinates: unknown;
+        };
+    }[];
+}
+/**
+ * One shaded region. `name` must match the `nameProperty` field (default `"name"`) on a
+ * feature's `properties` in the supplied `geoJson` — a region with no matching entry simply
+ * renders unfilled, it is not an error.
+ */
+interface RegionMapDatum {
+    readonly name: string;
+    readonly value: number;
+}
+/**
+ * ECharts choropleth: a `map` series shades each GeoJSON region by `value`, through a
+ * `colorRange` gradient driven by a `visualMap` legend — the same magnitude-encoding idea as
+ * `sce-heatmap-chart`, but over real geography instead of a category grid.
+ *
+ * GEOJSON IS NOT BUNDLED — READ THIS BEFORE USING. This chart renders NOTHING until the
+ * `geoJson` input is supplied, and that is a deliberate design boundary, not a bug to work
+ * around: region boundaries are large (a real country's admin-level GeoJSON is hundreds of KB
+ * to megabytes), slow-changing, and encode a political/data decision — which administrative
+ * level, which disputed-border convention, which simplification tolerance — that belongs to the
+ * consuming application, not to a shared design system. Fetch it once in the app (static asset,
+ * CDN, API) and pass it down; this component's only job is registering it with ECharts
+ * (`echarts.registerMap`) and painting it.
+ *
+ * Reach for `sce-flow-map-chart` instead when the story is ROUTES between points (origin ->
+ * destination), not a per-region MAGNITUDE — a choropleth has no notion of a line connecting
+ * two places.
+ */
+declare class SceRegionMapChartComponent {
+    /** GeoJSON `FeatureCollection` describing the region boundaries to shade. See the component
+     *  doc above — this is REQUIRED and the chart is intentionally blank without it. */
+    readonly geoJson: _angular_core.InputSignal<RegionMapGeoJson | null>;
+    /**
+     * The name `echarts.registerMap` files this GeoJSON under. ECharts' map registry is GLOBAL
+     * (keyed by this string across the whole app, not scoped to this component instance) — give
+     * two chart instances a DIFFERENT name if they render different geometry, or the later
+     * registration silently clobbers the earlier one.
+     */
+    readonly mapName: _angular_core.InputSignal<string>;
+    /** GeoJSON feature property read as each region's display name; must match `data[].name`. */
+    readonly nameProperty: _angular_core.InputSignal<string>;
+    /** One `{ name, value }` entry per shaded region. A region with no matching entry renders unfilled. */
+    readonly data: _angular_core.InputSignal<readonly RegionMapDatum[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Colour stops for the magnitude gradient, low to high. Painted to canvas, so literal hex/rgb only. */
+    readonly colorRange: _angular_core.InputSignal<readonly string[]>;
+    /** Value mapped to the start of `colorRange` */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Value mapped to the end of `colorRange` */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Shows the built-in visual map gradient legend, draggable to filter the visible range */
+    readonly showVisualMap: _angular_core.InputSignal<boolean>;
+    /** Enables mouse/touch pan and zoom over the map */
+    readonly roam: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRegionMapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRegionMapChartComponent, "sce-region-map-chart", never, { "geoJson": { "alias": "geoJson"; "required": false; "isSignal": true; }; "mapName": { "alias": "mapName"; "required": false; "isSignal": true; }; "nameProperty": { "alias": "nameProperty"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colorRange": { "alias": "colorRange"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showVisualMap": { "alias": "showVisualMap"; "required": false; "isSignal": true; }; "roam": { "alias": "roam"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * A GeoJSON FeatureCollection, as `echarts.registerMap` accepts it.
+ *
+ * Declared structurally here rather than as `Parameters<typeof echarts.registerMap>[1]`: that alias
+ * resolves to ECharts' INTERNAL `GeoJSON`/`GeoJSONCompressed`/`SVGMapInput` union, which the package
+ * never exports — so TypeScript cannot name it when emitting this library's .d.ts and declaration
+ * build fails with TS4029. Owning the shape keeps the public API nameable, and it is also the honest
+ * contract: this component only ever accepts a GeoJSON FeatureCollection.
+ */
+interface FlowMapGeoJson {
+    readonly type: 'FeatureCollection';
+    readonly features: readonly {
+        readonly type: 'Feature';
+        readonly id?: string | number;
+        readonly properties?: Readonly<Record<string, unknown>>;
+        readonly geometry: {
+            readonly type: string;
+            readonly coordinates: unknown;
+        };
+    }[];
+}
+/**
+ * One origin -> destination route. `from`/`to` are `[longitude, latitude]` pairs in the same
+ * projection as the supplied `geoJson`. `value` is optional and carried through to the tooltip
+ * and data item only — it does not currently scale line weight.
+ */
+interface FlowMapRoute {
+    readonly name?: string;
+    readonly from: readonly [number, number];
+    readonly to: readonly [number, number];
+    readonly value?: number;
+}
+/**
+ * ECharts `lines` series drawn over a `geo` coordinate system: one curved line per
+ * origin -> destination route, with an optional travelling-dot trail effect. This is the
+ * ROUTE chart — reach for `sce-region-map-chart` instead when the story is a per-region
+ * MAGNITUDE (a choropleth), not a connection between two points; a `lines` series has no notion
+ * of "shade this whole region," and a `map` series has no notion of "connect these two points."
+ *
+ * GEOJSON IS NOT BUNDLED — READ THIS BEFORE USING. Exactly like `sce-region-map-chart`, this
+ * chart renders NOTHING until the `geoJson` input is supplied, and that is deliberate: the base
+ * map is large, slow-changing, app-owned data (see that component's doc for the full rationale),
+ * not something a design system should bundle or guess at.
+ *
+ * PERFORMANCE CAVEAT: with `showEffect` on (the default), each route runs a continuous
+ * requestAnimationFrame-driven trail animation for as long as the chart is mounted — it never
+ * settles the way the entrance animation on every other chart in this library does. On a
+ * dashboard rendering several flow maps at once, or a page an operator leaves open all day, turn
+ * `showEffect` off or keep the chart behind `@defer (on viewport)` so it stops animating once
+ * scrolled out of view.
+ */
+declare class SceFlowMapChartComponent {
+    /** GeoJSON `FeatureCollection` rendered as the base map underneath the routes. See the
+     *  component doc above — this is REQUIRED and the chart is intentionally blank without it. */
+    readonly geoJson: _angular_core.InputSignal<FlowMapGeoJson | null>;
+    /**
+     * The name `echarts.registerMap` files this GeoJSON under. ECharts' map registry is GLOBAL —
+     * see `sce-region-map-chart.mapName` for the same caveat: give differently-shaped geoJson a
+     * different name, or a later registration silently clobbers an earlier one.
+     */
+    readonly mapName: _angular_core.InputSignal<string>;
+    /** One curved line per origin -> destination route. */
+    readonly data: _angular_core.InputSignal<readonly FlowMapRoute[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Route line colour. Painted to canvas, so a literal hex/rgb string. */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Route curve amount, 0 (straight) to 1 (near-semicircular) */
+    readonly curveness: _angular_core.InputSignal<number>;
+    /** Route line width in pixels */
+    readonly lineWidth: _angular_core.InputSignal<number>;
+    /** Animates a travelling dot along each route. See the PERFORMANCE CAVEAT in the component doc. */
+    readonly showEffect: _angular_core.InputSignal<boolean>;
+    /** Enables mouse/touch pan and zoom over the base map */
+    readonly roam: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceFlowMapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceFlowMapChartComponent, "sce-flow-map-chart", never, { "geoJson": { "alias": "geoJson"; "required": false; "isSignal": true; }; "mapName": { "alias": "mapName"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "curveness": { "alias": "curveness"; "required": false; "isSignal": true; }; "lineWidth": { "alias": "lineWidth"; "required": false; "isSignal": true; }; "showEffect": { "alias": "showEffect"; "required": false; "isSignal": true; }; "roam": { "alias": "roam"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Captions for the scale's low, mid and high segments; supply already-translated text, as the component does not translate them. */
+/** One column header, given a stable id purely so the template can `@for (track column.id)`. */
+interface ChartTableColumn {
+    readonly id: string;
+    readonly label: string;
+}
+/** One non-header cell in a row: the raw value plus a numeric flag, so the template can isolate
+ * bidi on numbers without re-running `typeof` in the markup. */
+interface ChartTableCell {
+    readonly id: string;
+    readonly value: string | number;
+    readonly isNumeric: boolean;
+}
+/** One full row: its `<th scope="row">` label (+ optional series colour) and its data cells. */
+interface ChartTableRow {
+    readonly id: string;
+    readonly header: string | number;
+    readonly headerIsNumeric: boolean;
+    readonly color: string | null;
+    readonly cells: readonly ChartTableCell[];
+}
+/**
+ * Accessible, non-visual fallback for a canvas-painted chart.
+ *
+ * A chart drawn onto `<canvas>` is a blank box to a screen reader, and any encoding that relies
+ * on colour alone is unreadable in forced-colors mode, print, or to a user with colour-vision
+ * deficiency. This renders the SAME data the chart is showing as a real, semantic `<table>` —
+ * `<caption>`, `<th scope="col">` headers, `<th scope="row">` per row — with an optional colour
+ * swatch next to each row's label so colour reinforces the text label rather than carrying the
+ * meaning on its own.
+ *
+ * Pair it with any chart: pass the chart's own category/series data (and, if it has one, the same
+ * `seriesColor(i)` palette) and render this directly beneath the chart. It stays collapsed inside
+ * a `<details>` disclosure by default so it does not compete with the chart for layout space, but
+ * remains fully reachable by keyboard and screen reader at all times.
+ */
+declare class SceChartDataTableComponent {
+    /** Table caption — describes what the chart shows. Read first by screen readers. */
+    readonly caption: _angular_core.InputSignal<string>;
+    /** Column header labels, including the row-header column (e.g. `['Month', 'Offers', ...]`). */
+    readonly columnHeaders: _angular_core.InputSignal<readonly string[]>;
+    /** Data rows; the first cell of each row becomes that row's `<th scope="row">`. */
+    readonly rows: _angular_core.InputSignal<readonly (string | number)[][]>;
+    /** Per-row colour, in row order — mirrors the chart's own series palette so the swatch and the
+     * chart never disagree. Omit for a single, unstyled series. */
+    readonly seriesColors: _angular_core.InputSignal<readonly string[] | null>;
+    /** Renders the table inside a `<details>` disclosure, collapsed by default, so it sits under a
+     * chart without dominating the layout while staying reachable by keyboard/screen reader. */
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    /** `<summary>` label for the disclosure — translated by the caller, never hardcoded here. */
+    readonly summaryLabel: _angular_core.InputSignal<string>;
+    readonly tableColumns: _angular_core.Signal<readonly ChartTableColumn[]>;
+    readonly tableRows: _angular_core.Signal<readonly ChartTableRow[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceChartDataTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceChartDataTableComponent, "sce-chart-data-table", never, { "caption": { "alias": "caption"; "required": true; "isSignal": true; }; "columnHeaders": { "alias": "columnHeaders"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "seriesColors": { "alias": "seriesColors"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "summaryLabel": { "alias": "summaryLabel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Captions for the scale's low, mid and high segments; supply already-translated text. */
 interface ScaleIndicatorLabels {
     low: string;
     mid: string;
     high: string;
 }
-/** Three-segment scale track showing either a single thumb or a highlighted range when both `start` and `end` are given; the segment labels default to hardcoded Arabic strings. */
+/** Three-segment scale track showing either a single thumb or a highlighted range when both `start` and `end` are given; the segment captions fall back to translated defaults. */
 declare class SceScaleIndicatorComponent {
+    private readonly translate;
+    private readonly language;
     /** Title displayed above the scale */
     readonly title: _angular_core.InputSignal<string>;
     /** Current value (used when start/end not provided, for backward compat) */
@@ -3762,8 +4321,13 @@ declare class SceScaleIndicatorComponent {
     readonly start: _angular_core.InputSignal<number | undefined>;
     /** Highlighted range end (when provided with start, shows range bar instead of thumb) */
     readonly end: _angular_core.InputSignal<number | undefined>;
-    /** Labels for the three segments (right-to-left in RTL: high, mid, low) */
-    readonly labels: _angular_core.InputSignal<ScaleIndicatorLabels>;
+    /**
+     * Captions for the three segments (rendered high → mid → low). Leave `null` to use the
+     * component's translated defaults (`charts.scaleIndicator.*`).
+     */
+    readonly labels: _angular_core.InputSignal<ScaleIndicatorLabels | null>;
+    /** Consumer captions, or the translated defaults. Reads the locale signal so it re-resolves on the in-place language toggle. */
+    readonly resolvedLabels: _angular_core.Signal<ScaleIndicatorLabels>;
     /** Active indicator color */
     readonly activeColor: _angular_core.InputSignal<string>;
     /** Track background color */
@@ -3789,77 +4353,2465 @@ declare class SceScaleIndicatorComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceScaleIndicatorComponent, "sce-scale-indicator", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "start": { "alias": "start"; "required": false; "isSignal": true; }; "end": { "alias": "end"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Dashboard overview tile showing a stat value, translated label, icon on a coloured background and an optional trend sparkline. */
-declare class SceOverviewStatCardComponent {
-    readonly value: _angular_core.InputSignal<string | number>;
-    readonly labelKey: _angular_core.InputSignal<string>;
-    readonly icon: _angular_core.InputSignal<string>;
-    readonly iconBg: _angular_core.InputSignal<string>;
-    readonly trend: _angular_core.InputSignal<string | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOverviewStatCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOverviewStatCardComponent, "sce-overview-stat-card", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "iconBg": { "alias": "iconBg"; "required": true; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+/** A box's five-number summary, in ECharts' own order: `[min, Q1, median, Q3, max]`. */
+type BoxplotSummary = readonly [number, number, number, number, number];
+/**
+ * ECharts box-and-whisker plot: one box per category, showing the five-number summary
+ * (min, Q1, median, Q3, max) as a box with whiskers.
+ *
+ * Accepts either raw sample arrays via `samples` — reduced to a five-number summary per box by
+ * the exported `computeFiveNumberSummary` helper — or already-computed summaries via
+ * `summaries`, selected with `precomputed`. Reach for `sce-histogram-chart` instead when the
+ * question is "what shape does the distribution have" (bin counts) rather than "where do its
+ * quartiles and outer range fall" (this chart).
+ */
+declare class SceBoxplotChartComponent {
+    /** X-axis category labels, one per box */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** Raw sample arrays, one per box; used unless `precomputed` is true */
+    readonly samples: _angular_core.InputSignal<readonly (readonly number[])[]>;
+    /** Precomputed five-number summaries `[min, Q1, median, Q3, max]`, one per box; used when `precomputed` is true */
+    readonly summaries: _angular_core.InputSignal<readonly BoxplotSummary[]>;
+    /** When true, reads `summaries` verbatim instead of computing them from `samples` */
+    readonly precomputed: _angular_core.InputSignal<boolean>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Fill colour of each box */
+    readonly boxColor: _angular_core.InputSignal<string>;
+    /** Border colour of each box and its whiskers — ink, not a series colour, so the outline reads
+     * as structure regardless of which fill hue is in play */
+    readonly borderColor: _angular_core.InputSignal<string>;
+    /** Whether to show horizontal grid lines on the value axis */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    private readonly boxplotData;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceBoxplotChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBoxplotChartComponent, "sce-boxplot-chart", never, { "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "samples": { "alias": "samples"; "required": false; "isSignal": true; }; "summaries": { "alias": "summaries"; "required": false; "isSignal": true; }; "precomputed": { "alias": "precomputed"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "boxColor": { "alias": "boxColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Small dashboard card linking to a service, showing its icon and a count with a role-aware translated suffix. */
-declare class SceServiceMiniCardComponent {
-    readonly title: _angular_core.InputSignal<string>;
-    readonly count: _angular_core.InputSignal<number>;
-    readonly icon: _angular_core.InputSignal<string>;
-    readonly link: _angular_core.InputSignal<string | readonly (string | number)[]>;
-    /** i18n key for the count suffix; role-aware (offices offering vs executed projects). */
-    readonly countSuffix: _angular_core.InputSignal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceServiceMiniCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceServiceMiniCardComponent, "sce-service-mini-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "count": { "alias": "count"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": true; "isSignal": true; }; "countSuffix": { "alias": "countSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+/** One trading period's OHLC values, in ECharts' own order: `[open, close, low, high]`. */
+type OhlcDatum$1 = readonly [number, number, number, number];
+/**
+ * ECharts candlestick chart: one candle per category (typically a date), coloured by whether the
+ * period closed above (`risingColor`) or below (`fallingColor`) its open.
+ *
+ * Pass `[open, close, low, high]` tuples via `data`, aligned to `categories`. Reach for
+ * `sce-ohlc-volume-chart` instead when trading volume needs its own axis under the candles.
+ */
+declare class SceCandlestickChartComponent {
+    /** X-axis category labels, one per candle (typically dates) */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** `[open, close, low, high]` tuples, aligned to `categories` */
+    readonly data: _angular_core.InputSignal<readonly OhlcDatum$1[]>;
+    /** Candle colour when the period closed at or above its open — rising/falling is a STATE, not a
+     * series identity, so this defaults to the shared "good" status colour rather than an arbitrary green */
+    readonly risingColor: _angular_core.InputSignal<string>;
+    /** Candle colour when the period closed below its open — the shared "critical" status colour */
+    readonly fallingColor: _angular_core.InputSignal<string>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Whether to show horizontal grid lines on the price axis */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceCandlestickChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceCandlestickChartComponent, "sce-candlestick-chart", never, { "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "risingColor": { "alias": "risingColor"; "required": false; "isSignal": true; }; "fallingColor": { "alias": "fallingColor"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** View model of a featured-office card, carrying both the raw `reviewCount` (zero triggers the fallback) and its locale-formatted label. */
-interface FeaturedOffice {
-    id: string;
-    title: string;
-    /** Raw review count. Zero renders the "no reviews yet" fallback. */
-    reviewCount: number;
-    /** Locale-formatted `reviewCount`, prepared by the caller. */
-    reviewCountLabel: string;
-    rating: string;
-    country: string;
-    tabs: string[];
-    href: string;
+/** One stage of a conversion funnel, widest (top) to narrowest (bottom). */
+interface FunnelStage {
+    name: string;
+    value: number;
+    color?: string;
 }
-/** Dashboard card for a featured engineering office showing rating, review count, country and service tabs; a zero review count renders the "no reviews yet" fallback. */
-declare class SceFeaturedOfficeCardComponent {
-    readonly office: _angular_core.InputSignal<FeaturedOffice>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceFeaturedOfficeCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceFeaturedOfficeCardComponent, "sce-featured-office-card", never, { "office": { "alias": "office"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+
+/**
+ * Conversion funnel: stages narrow top-to-bottom, each labelled with the percentage of the
+ * previous stage that reached it. For a funnel widening the *other* way (a population/hierarchy
+ * pyramid rather than a conversion path), use `sce-pyramid-chart` instead.
+ */
+declare class SceFunnelChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Ordered funnel stages, widest first (top) narrowing to the smallest (bottom) */
+    readonly stages: _angular_core.InputSignal<readonly FunnelStage[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /**
+     * Fallback stage colour used when a stage has no `color` of its own — `null` (the default) uses
+     * the theme's single-hue `CHART_SEQUENTIAL` progression, one tone per stage, since the stages
+     * are ordered steps of one process rather than unrelated categories.
+     */
+    readonly color: _angular_core.InputSignal<string | null>;
+    /** Gap in pixels between adjacent funnel segments */
+    readonly gap: _angular_core.InputSignal<number>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceFunnelChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceFunnelChartComponent, "sce-funnel-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "stages": { "alias": "stages"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** View model of a contract-request card; `deadline` and `budget` are pre-formatted display strings and `tags` are raw status labels whose tone is resolved at render time. */
-interface ContractRequestCard {
-    id: string;
-    title: string;
-    requestNumber: string;
-    officeName: string;
-    location: string;
-    deadline: string;
-    budget: string;
-    tags: string[];
-    offersCount?: number;
+/** Bin edges (`binCount + 1` values) and per-bin counts computed by `computeHistogramBins`. */
+interface HistogramBins {
+    readonly edges: readonly number[];
+    readonly counts: readonly number[];
 }
-/** Dashboard card summarising a contract request (office, location, deadline, budget) with tone-resolved tags, linking to its detail route. */
-declare class SceContractRequestCardComponent {
-    readonly request: _angular_core.InputSignal<ContractRequestCard>;
-    readonly tagTones: _angular_core.Signal<_moatamed_sce_ui_components.BusinessStatusTone[]>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceContractRequestCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceContractRequestCardComponent, "sce-contract-request-card", never, { "request": { "alias": "request"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+/**
+ * ECharts bar chart with bins computed from a raw sample, for visualising a distribution's shape.
+ *
+ * `values` + `binCount` are reduced to bin edges and per-bin counts by the exported
+ * `computeHistogramBins` helper. Reach for `sce-boxplot-chart` instead when the question is
+ * "where do the quartiles and outliers fall" rather than "what does the distribution look like."
+ */
+declare class SceHistogramChartComponent {
+    /** Raw sample to bucket into bins */
+    readonly values: _angular_core.InputSignal<readonly number[]>;
+    /** Number of equal-width bins to divide the sample's range into */
+    readonly binCount: _angular_core.InputSignal<number>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar fill colour */
+    readonly barColor: _angular_core.InputSignal<string>;
+    /** Bar corner radius in pixels, applied to the end away from the baseline only */
+    readonly borderRadius: _angular_core.InputSignal<number>;
+    /** Whether to show horizontal grid lines on the count axis */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    private readonly bins;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceHistogramChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceHistogramChartComponent, "sce-histogram-chart", never, { "values": { "alias": "values"; "required": false; "isSignal": true; }; "binCount": { "alias": "binCount"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "barColor": { "alias": "barColor"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** One row of the latest-contracts table; `status` is the display label and `statusVariant` the already-resolved `BusinessStatusTone`. */
-interface ContractRow {
-    contractNumber: string;
-    service: string;
-    client: string;
-    endDate: string;
-    status: string;
-    statusVariant: BusinessStatusTone;
+/** One radiating bar: the category positions it around the circle, the value sets how far it reaches from the centre. */
+interface PolarBarSeriesItem {
+    name: string;
+    value: number;
+    color?: string;
+}
+/**
+ * ECharts bar chart drawn on a POLAR coordinate system instead of a cartesian one: each category
+ * occupies a slice of the circle (`angleAxis`) and its bar radiates outward from the centre by
+ * `radiusAxis` value — unlike `sce-bar-chart`, whose bars share a single straight baseline.
+ */
+declare class ScePolarBarChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Data items — one bar per item, positioned around the circle in array order */
+    readonly data: _angular_core.InputSignal<readonly PolarBarSeriesItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Inner radius of the polar coordinate system — the empty circle at the centre */
+    readonly innerRadius: _angular_core.InputSignal<string>;
+    /** Outer radius of the polar coordinate system — how far the longest bar can reach */
+    readonly outerRadius: _angular_core.InputSignal<string>;
+    /** Angle, in degrees, at which the first category starts */
+    readonly startAngle: _angular_core.InputSignal<number>;
+    /** Bar width in pixels — `null` lets ECharts size bars automatically from the category count */
+    readonly barWidth: _angular_core.InputSignal<number | null>;
+    /** Whether bars end in a rounded cap instead of a flat edge */
+    readonly roundCap: _angular_core.InputSignal<boolean>;
+    /** Fixed maximum for the radius (value) axis — `null` derives it from the data */
+    readonly maxValue: _angular_core.InputSignal<number | null>;
+    /** Whether to show the category labels around the circle */
+    readonly showAngleLabels: _angular_core.InputSignal<boolean>;
+    /** Whether to show the value ticks along the radius */
+    readonly showRadiusLabels: _angular_core.InputSignal<boolean>;
+    /** Whether to show the legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScePolarBarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePolarBarChartComponent, "sce-polar-bar-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "barWidth": { "alias": "barWidth"; "required": false; "isSignal": true; }; "roundCap": { "alias": "roundCap"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "showAngleLabels": { "alias": "showAngleLabels"; "required": false; "isSignal": true; }; "showRadiusLabels": { "alias": "showRadiusLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Nightingale ("rose") chart: a `pie` series with `roseType` set, so every slice keeps the SAME
+ * angle and instead encodes its value in the slice's RADIUS.
+ *
+ * Unlike `sce-pie-chart` — where angle is proportional to value and every slice reads at a
+ * glance as "this share of the whole" — a rose chart trades that readability for the ability to
+ * compare many similarly-sized categories side by side without their labels crowding a tiny
+ * sliver. Two `roseType` modes change what "twice the value" looks like:
+ * - `'radius'` (default): radius is proportional to value. Because a slice's rendered AREA grows
+ *   with the SQUARE of its radius, a category with twice the value occupies roughly four times
+ *   the visual area — readers who judge magnitude by area (which most people do) will
+ *   systematically overestimate differences between categories. Use only when the shape/ranking
+ *   matters more than an accurate value comparison.
+ * - `'area'`: slice AREA (not radius) is proportional to value, correcting that distortion — this
+ *   is the more honest choice whenever readers might compare magnitudes visually.
+ */
+declare class SceRoseChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Data items for the rose slices */
+    readonly data: _angular_core.InputSignal<readonly ChartSeriesItem[]>;
+    /**
+     * Radius encoding: `'radius'` scales slice radius linearly with value (area grows with the
+     * square of the value — a perceptual distortion); `'area'` scales slice AREA linearly with
+     * value instead, which reads more honestly when readers compare magnitudes visually.
+     */
+    readonly roseType: _angular_core.InputSignal<"area" | "radius">;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Inner radius percentage — `'0%'` starts every slice at the centre point */
+    readonly innerRadius: _angular_core.InputSignal<string>;
+    /** Outer radius percentage reached by the largest-value slice */
+    readonly outerRadius: _angular_core.InputSignal<string>;
+    /** Start angle of the first slice, in degrees */
+    readonly startAngle: _angular_core.InputSignal<number>;
+    /** Whether to show value labels inside each slice */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Whether to show the legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRoseChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRoseChartComponent, "sce-rose-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "roseType": { "alias": "roseType"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One branch of the nested hierarchy. `value` is optional on a branch with `children` — ECharts
+ * sums the children's values to size it when it is omitted. */
+interface TreemapNode {
+    readonly name: string;
+    readonly value?: number;
+    /** Explicit colour for this node; unset descendants inherit a tint of their top-level ancestor's colour. */
+    readonly color?: string;
+    readonly children?: readonly TreemapNode[];
+}
+/**
+ * ECharts treemap: a nested rectangle hierarchy sized by `value`, coloured per top-level branch
+ * (descendants get an automatic tinted shade of their branch's colour).
+ *
+ * Every level renders simultaneously and `nodeClick` is disabled — this is a static "whole tree
+ * at a glance" view. Past 2-3 levels deep, nested labels get cramped fast; reach for
+ * `sce-treemap-drilldown-chart` instead, which hides depth behind clicks so only one level is
+ * ever on screen at a time.
+ */
+declare class SceTreemapChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Root-level branches of the hierarchy — each becomes its own coloured region. */
+    readonly data: _angular_core.InputSignal<readonly TreemapNode[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Palette cycled across top-level branches that don't set their own `color`. */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** Whether node labels are drawn inside their rectangle. */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Whether mouse-wheel zoom + drag panning is enabled on the canvas. */
+    readonly roam: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceTreemapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceTreemapChartComponent, "sce-treemap-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "roam": { "alias": "roam"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One arc-diagram node, placed on the single horizontal baseline in array order. */
+interface ArcDiagramNode {
+    id: string;
+    name: string;
+    color?: string;
+}
+/** One curved edge between two node ids. */
+interface ArcDiagramLink {
+    source: string;
+    target: string;
+    value?: number;
+}
+/**
+ * ECharts graph chart pinned to `layout: 'none'`, with this component computing every node's
+ * `x`/`y` so all nodes sit on one horizontal baseline joined by edges arcing above it. Unlike
+ * `sce-network-graph-chart`, whose circular/force layouts are free to place nodes anywhere,
+ * reach for this when nodes already have a natural linear order (timeline, alphabet, rank) and
+ * the story is which pairs are adjacent along that order, not the overall cluster shape.
+ *
+ * Because layout `'none'` positions nodes using literal pixel coordinates computed ahead of
+ * render, `width` here — unlike every other `sce-*-chart` — must be a real pixel number, not
+ * `null`: a stretch-to-container width cannot be resolved before the node x-positions are laid
+ * out, so passing `null` would collapse every node onto the same point.
+ */
+declare class SceArcDiagramChartComponent {
+    /** Nodes placed left-to-right on the baseline, in array order */
+    readonly nodes: _angular_core.InputSignal<readonly ArcDiagramNode[]>;
+    /** Curved edges between node ids */
+    readonly links: _angular_core.InputSignal<readonly ArcDiagramLink[]>;
+    /** Chart height in pixels — must leave headroom above the baseline for the tallest arcs */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — a literal pixel value; layout `'none'` cannot resolve `null` */
+    readonly width: _angular_core.InputSignal<number>;
+    /** Node marker diameter in pixels */
+    readonly nodeSize: _angular_core.InputSignal<number>;
+    /** Edge curve amount, 0 (straight) to 1 (tall arc) */
+    readonly curveness: _angular_core.InputSignal<number>;
+    /** Edge line color */
+    readonly linkColor: _angular_core.InputSignal<string>;
+    /** Edge line width in pixels */
+    readonly linkWidth: _angular_core.InputSignal<number>;
+    /** Whether to show each node's name below the baseline */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceArcDiagramChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceArcDiagramChartComponent, "sce-arc-diagram-chart", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "nodeSize": { "alias": "nodeSize"; "required": false; "isSignal": true; }; "curveness": { "alias": "curveness"; "required": false; "isSignal": true; }; "linkColor": { "alias": "linkColor"; "required": false; "isSignal": true; }; "linkWidth": { "alias": "linkWidth"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One bubble series: `[x, y, size]` points, where `size` is the magnitude that drives the bubble's diameter. */
+interface BubbleSeriesData {
+    name: string;
+    data: readonly (readonly [number, number, number])[];
+    color?: string;
+}
+/**
+ * ECharts scatter plot where a third value per point drives its symbol size (a classic bubble
+ * chart). Unlike `sce-scatter-chart` — where every point is the same size — reach for this chart
+ * when the data has a third numeric magnitude (revenue, headcount, volume…) worth encoding
+ * visually alongside the x/y position.
+ */
+declare class SceBubbleChartComponent {
+    private readonly el;
+    /** Manual direction override; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** One or more `[x, y, size]` series to plot */
+    readonly series: _angular_core.InputSignal<readonly BubbleSeriesData[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** `[min, max]` bubble diameter in pixels; the third data value is scaled linearly into this range across ALL series */
+    readonly sizeRange: _angular_core.InputSignal<readonly [number, number]>;
+    /** Whether to show the custom legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to show axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceBubbleChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBubbleChartComponent, "sce-bubble-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "sizeRange": { "alias": "sizeRange"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One bullet row: a single measure against a target, in front of three ascending qualitative
+ * range thresholds (e.g. poor / satisfactory / good), Stephen Few's bullet-graph shape. */
+interface BulletItem {
+    name: string;
+    measure: number;
+    target: number;
+    /** Three ascending, CUMULATIVE thresholds — e.g. `[50, 75, 100]`, not deltas. */
+    ranges: readonly [number, number, number];
+}
+/**
+ * Stephen Few bullet graph: a thin horizontal measure bar drawn over three stacked qualitative
+ * range bands, with a target marker tick. Unlike `sce-horizontal-bar-chart`, the bar length here
+ * is not the whole story — the coloured bands behind it give the value context (is it in the
+ * "good" zone?) and the tick marks a specific target, both absent from a plain bar.
+ */
+declare class SceBulletChartComponent {
+    private readonly el;
+    /** Manual direction override; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** One row per bullet */
+    readonly data: _angular_core.InputSignal<readonly BulletItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Qualitative range band colours, from worst to best — a neutral background scale, deliberately
+     * NOT drawn from the categorical series palette, so it never competes with the measure bar */
+    readonly rangeColors: _angular_core.InputSignal<readonly [string, string, string]>;
+    /** Thin measure bar colour — the chart's one data series */
+    readonly measureColor: _angular_core.InputSignal<string>;
+    /** Target marker tick colour — ink, not a series colour, so it reads as a reference line rather than data */
+    readonly targetColor: _angular_core.InputSignal<string>;
+    /** Range band thickness, in pixels */
+    readonly bandWidth: _angular_core.InputSignal<number>;
+    /** Measure bar thickness, in pixels — kept well under `bandWidth` so the bands remain visible */
+    readonly measureWidth: _angular_core.InputSignal<number>;
+    /** Whether to show the dashed value-axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceBulletChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBulletChartComponent, "sce-bullet-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "rangeColors": { "alias": "rangeColors"; "required": false; "isSignal": true; }; "measureColor": { "alias": "measureColor"; "required": false; "isSignal": true; }; "targetColor": { "alias": "targetColor"; "required": false; "isSignal": true; }; "bandWidth": { "alias": "bandWidth"; "required": false; "isSignal": true; }; "measureWidth": { "alias": "measureWidth"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One entity's rank (1 = best) at every period — `ranks` must align 1:1 with the chart's `categories`. */
+interface BumpChartSeries {
+    label: string;
+    ranks: readonly number[];
+    color?: string;
+}
+/**
+ * ECharts bump chart: one line per entity tracking its RANK across many periods, e.g. weekly
+ * leaderboard position or monthly market-share ranking. Unlike `sce-slope-chart` — which connects
+ * exactly two points and plots a raw VALUE — this chart plots an ordinal RANK across three or more
+ * periods, which is what makes overtakes ("line crosses another line") the whole point of the shape.
+ *
+ * INVERTED Y AXIS: rank 1 is the best placement, so it must render at the TOP of the plot area —
+ * the opposite of ECharts' default value-axis direction, where small numbers sit at the bottom. The
+ * y-axis therefore sets `inverse: true`: rank 1 draws highest, and larger (worse) ranks draw lower,
+ * so the chart reads top-to-bottom exactly like a leaderboard. Forgetting this on a hand-rolled rank
+ * chart is the single most common bump-chart bug — a `min: 1` axis without `inverse: true` puts rank
+ * 1 at the BOTTOM instead.
+ */
+declare class SceBumpChartComponent {
+    private readonly el;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Manual direction override for the rank-axis side; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** One series per entity — each `ranks` array must have one entry per `categories` period */
+    readonly data: _angular_core.InputSignal<readonly BumpChartSeries[]>;
+    /** X-axis period labels (e.g. week numbers, month names) */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Fallback colour palette, cycled by index for entities without an explicit `color` */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** Line width in pixels */
+    readonly lineWidth: _angular_core.InputSignal<number>;
+    /** Data point marker size in pixels */
+    readonly pointSize: _angular_core.InputSignal<number>;
+    /** Whether to render the entity/colour legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to print the entity name next to its final data point */
+    readonly showEndLabels: _angular_core.InputSignal<boolean>;
+    /** Explicit worst-rank axis ceiling; `null` derives it from the highest rank present in `data` */
+    readonly maxRank: _angular_core.InputSignal<number | null>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceBumpChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBumpChartComponent, "sce-bump-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "lineWidth": { "alias": "lineWidth"; "required": false; "isSignal": true; }; "pointSize": { "alias": "pointSize"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showEndLabels": { "alias": "showEndLabels"; "required": false; "isSignal": true; }; "maxRank": { "alias": "maxRank"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One entity tracked between exactly two time points (e.g. a product's rank in Q1 vs Q2). */
+interface SlopeChartItem {
+    label: string;
+    startValue: number;
+    endValue: number;
+    color?: string;
+}
+/**
+ * ECharts slope chart: one two-point line series per entity, connecting its value at a START
+ * period to its value at an END period, with the entity name (and, optionally, its value) printed
+ * at both ends of the line. Built for exactly two time points — for three or more, reach for
+ * `sce-bump-chart` instead, which tracks RANK across many periods on an inverted axis rather than
+ * a raw value between two.
+ *
+ * A rising line reads as "this entity improved between the two periods", a falling one as decline;
+ * crossing lines make rank-swaps between entities visually obvious in a way a table of two columns
+ * of numbers never does.
+ *
+ * RTL CAVEAT: ECharts draws to a `<canvas>`, and canvas has no concept of text direction — it never
+ * mirrors under `dir="rtl"`. The START period always renders at the physical LEFT of the plot area
+ * and the END period always at the physical RIGHT, regardless of `dir`, because the two columns
+ * represent chronological order (earlier → later), not a reading-direction concern. Only the
+ * category axis LABELS ("Q1", "Q2"…) are text and therefore already direction-aware by virtue of
+ * being laid out by the browser's font shaping — the plotted geometry is not.
+ */
+declare class SceSlopeChartComponent {
+    /** Entities to plot — each carries its own start/end value */
+    readonly data: _angular_core.InputSignal<readonly SlopeChartItem[]>;
+    /** Category label for the start period (e.g. 'Q1 2025') */
+    readonly startPeriodLabel: _angular_core.InputSignal<string>;
+    /** Category label for the end period (e.g. 'Q2 2025') */
+    readonly endPeriodLabel: _angular_core.InputSignal<string>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Fallback colour palette, cycled by index for entities without an explicit `color` */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** Suffix appended to every displayed value (e.g. '%') */
+    readonly valueSuffix: _angular_core.InputSignal<string>;
+    /** Whether to print the numeric value alongside the entity name at each end */
+    readonly showValues: _angular_core.InputSignal<boolean>;
+    /** Line width in pixels */
+    readonly lineWidth: _angular_core.InputSignal<number>;
+    /** Endpoint marker size in pixels */
+    readonly pointSize: _angular_core.InputSignal<number>;
+    /** Whether to render the entity/colour legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceSlopeChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceSlopeChartComponent, "sce-slope-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "startPeriodLabel": { "alias": "startPeriodLabel"; "required": false; "isSignal": true; }; "endPeriodLabel": { "alias": "endPeriodLabel"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "valueSuffix": { "alias": "valueSuffix"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "lineWidth": { "alias": "lineWidth"; "required": false; "isSignal": true; }; "pointSize": { "alias": "pointSize"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One day: `[dateString, value]`, where `dateString` is `YYYY-MM-DD`. */
+type CalendarHeatmapEntry = readonly [string, number];
+/**
+ * GitHub-style contribution calendar: a full year of daily values plotted on ECharts' calendar
+ * coordinate system, one cell per day, coloured by value through `colorRange`. Unlike
+ * `sce-heatmap-chart` — which plots `[x, y, value]` cells against two arbitrary category axes —
+ * this component lays out real dates within `year` and needs no category arrays at all. Pick
+ * this one specifically for day-by-day activity over a year; reach for `sce-heatmap-chart` for
+ * any other two-dimensional category grid.
+ */
+declare class SceCalendarHeatmapChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Calendar year to lay out — every week row spans Jan 1 through Dec 31 of this year */
+    readonly year: _angular_core.InputSignal<number>;
+    /** Daily values as `[dateString, value]` pairs, `dateString` in `YYYY-MM-DD` format */
+    readonly data: _angular_core.InputSignal<readonly CalendarHeatmapEntry[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Colour stops for the value gradient, low to high. Painted to canvas, so literal hex/rgb only. */
+    readonly colorRange: _angular_core.InputSignal<readonly string[]>;
+    /** Value mapped to the start of `colorRange`. */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Value mapped to the end of `colorRange` — `null` auto-computes from the highest value in `data`. */
+    readonly max: _angular_core.InputSignal<number | null>;
+    /** Square day-cell size in pixels */
+    readonly cellSize: _angular_core.InputSignal<number>;
+    /** Shows the built-in visual map gradient legend */
+    readonly showVisualMap: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceCalendarHeatmapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceCalendarHeatmapChartComponent, "sce-calendar-heatmap-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "year": { "alias": "year"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colorRange": { "alias": "colorRange"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "showVisualMap": { "alias": "showVisualMap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One chord node — a category arc on the ring, matched to links by `name`. */
+interface ChordNode {
+    name: string;
+    color?: string;
+}
+/** One weighted exchange between two chord node names. */
+interface ChordLink {
+    source: string;
+    target: string;
+    value: number;
+}
+/**
+ * Circular flow diagram built on ECharts 6's native `chord` series — confirmed available in the
+ * pinned `echarts` 6.1 dependency, so this component uses it directly with no fallback series.
+ * Unlike `sce-sankey-chart`, whose links are directional and read left-to-right, chord has no
+ * "start" or "end": every node can exchange with every other node around a shared ring. Reach
+ * for this over `sce-network-graph-chart` when the node count stays small (roughly under 20) and
+ * every node's total exchange volume — the arc length around the ring — is itself meaningful.
+ */
+declare class SceChordChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Category arcs around the ring */
+    readonly nodes: _angular_core.InputSignal<readonly ChordNode[]>;
+    /** Weighted exchanges between node names */
+    readonly links: _angular_core.InputSignal<readonly ChordLink[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Inner radius of the ring, as a CSS percentage string */
+    readonly innerRadius: _angular_core.InputSignal<string>;
+    /** Outer radius of the ring, as a CSS percentage string */
+    readonly outerRadius: _angular_core.InputSignal<string>;
+    /** Angular gap between adjacent arcs, in radians */
+    readonly padAngle: _angular_core.InputSignal<number>;
+    /** Whether to show each node's name label outside the ring */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceChordChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceChordChartComponent, "sce-chord-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "padAngle": { "alias": "padAngle"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One bar series, plotted against the left (`yAxisIndex: 0`) value axis. */
+interface ComboBarSeriesData {
+    name: string;
+    data: readonly number[];
+    color?: string;
+}
+/** One line series, plotted against the right (`yAxisIndex: 1`) value axis. */
+interface ComboLineSeriesData {
+    name: string;
+    data: readonly number[];
+    color?: string;
+}
+/**
+ * ECharts combo chart: bar series on a left value axis, line series on an independent right
+ * value axis, sharing one category axis. Built for pairing two differently-scaled metrics —
+ * a count and a rate, revenue and a margin percentage — that `sce-bar-chart`'s own
+ * `overlayLineSeries` cannot express, because that overlay line shares the bars' single axis
+ * and so must already live on the same numeric scale as the bars.
+ *
+ * Honesty caveat: two independently-scaled axes can be zoomed or offset so their lines happen
+ * to cross or track each other, implying a correlation the data does not actually show. Choose
+ * axis ranges deliberately (e.g. both starting at zero) and say in the surrounding copy what
+ * each axis measures — never rely on the chart shape alone to argue the relationship.
+ *
+ * The left/right physical axis positions are fixed regardless of page direction — mirroring
+ * them under RTL would swap which metric a reader's eye finds "first" without changing what
+ * either axis measures, which is a bigger comprehension cost than an axis sitting on the
+ * document's trailing side.
+ */
+declare class SceComboDualAxisChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Bar series, plotted against the left value axis */
+    readonly barSeries: _angular_core.InputSignal<readonly ComboBarSeriesData[]>;
+    /** Line series, plotted against the right value axis */
+    readonly lineSeries: _angular_core.InputSignal<readonly ComboLineSeriesData[]>;
+    /** X-axis category labels */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar width in pixels */
+    readonly barWidth: _angular_core.InputSignal<string | number>;
+    /** Bar border radius, applied to the top corners */
+    readonly borderRadius: _angular_core.InputSignal<number>;
+    /** Suffix appended to left-axis (bar) labels, e.g. '' for a raw count */
+    readonly leftAxisUnit: _angular_core.InputSignal<string>;
+    /** Suffix appended to right-axis (line) labels, e.g. '%' for a rate */
+    readonly rightAxisUnit: _angular_core.InputSignal<string>;
+    /** Whether to show the standalone legend */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to show left-axis grid split lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceComboDualAxisChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceComboDualAxisChartComponent, "sce-combo-dual-axis-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "barSeries": { "alias": "barSeries"; "required": false; "isSignal": true; }; "lineSeries": { "alias": "lineSeries"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "barWidth": { "alias": "barWidth"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "leftAxisUnit": { "alias": "leftAxisUnit"; "required": false; "isSignal": true; }; "rightAxisUnit": { "alias": "rightAxisUnit"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Heatmap over a symmetric correlation matrix, using a DIVERGING colour scale fixed to
+ * `[-1, +1]` (negative correlations pull toward `negativeColor`, positive toward `positiveColor`,
+ * `0` sits at `neutralColor`) with the coefficient printed inside every cell.
+ *
+ * This is what makes it a correlation matrix rather than a plain `sce-heatmap`-style chart: the
+ * scale is diverging around a meaningful zero and its bounds never adapt to the data — a plain
+ * heatmap's `visualMap` would stretch `min`/`max` to whatever the data's actual range is, which
+ * would make a matrix of weak correlations look just as saturated as one of strong correlations.
+ */
+declare class SceCorrelationMatrixChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Row/column labels for the symmetric matrix, in order */
+    readonly labels: _angular_core.InputSignal<readonly string[]>;
+    /** Symmetric correlation matrix; `matrix[i][j]` should equal `matrix[j][i]` and lie in `[-1, 1]` */
+    readonly matrix: _angular_core.InputSignal<readonly (readonly number[])[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Colour for the strongest negative correlation (-1). The warm pole of the diverging scale. */
+    readonly negativeColor: _angular_core.InputSignal<string>;
+    /**
+     * Colour for zero correlation — the diverging scale's fixed midpoint. It is deliberately a NEUTRAL
+     * grey: putting a hue here would make "no correlation" look like a value of its own.
+     */
+    readonly neutralColor: _angular_core.InputSignal<string>;
+    /** Colour for the strongest positive correlation (+1). The cool pole of the diverging scale. */
+    readonly positiveColor: _angular_core.InputSignal<string>;
+    /** Whether to show the visual-map legend below the grid */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceCorrelationMatrixChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceCorrelationMatrixChartComponent, "sce-correlation-matrix-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "matrix": { "alias": "matrix"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "negativeColor": { "alias": "negativeColor"; "required": false; "isSignal": true; }; "neutralColor": { "alias": "neutralColor"; "required": false; "isSignal": true; }; "positiveColor": { "alias": "positiveColor"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One diverging bar: a signed value plotted from a shared zero baseline (e.g. net sentiment, budget variance). */
+interface DivergingBarItem {
+    category: string;
+    value: number;
+}
+/**
+ * ECharts horizontal bar chart where every bar grows left or right from a shared zero centre line —
+ * built for signed comparisons (positive vs negative sentiment, approval net score, variance from
+ * plan) where the SIGN of the value is the point, not just its magnitude.
+ *
+ * RTL CAVEAT: ECharts draws to a `<canvas>`, and canvas has no concept of text direction — it never
+ * mirrors under `dir="rtl"`. On an Arabic page every other element on screen flips, but a positive
+ * value in this chart always extends toward the same physical pixel direction (positive x = visually
+ * right) regardless of `dir`. The category axis labels DO relocate (`isRtl`/`position` below moves
+ * them to the reading-start side), but the bars themselves do not swap direction. If "positive should
+ * point toward reading-start" matters for the data, set `[inverseAxis]="true"` — it flips ECharts'
+ * `xAxis.inverse`, so positive bars point left instead of right. There is no automatic mode: the
+ * caller must decide, because either behaviour is legitimate depending on what the chart is used for
+ * (e.g. a net-promoter-score chart usually wants "positive = right" universally, to match the sign
+ * convention analysts already read; a physically-mirrored RTL layout wants `inverseAxis`).
+ */
+declare class SceDivergingBarChartComponent {
+    private readonly el;
+    /** Manual direction override for the category axis side; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Diverging bar items — one bar per category, signed value */
+    readonly data: _angular_core.InputSignal<readonly DivergingBarItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar colour for values >= 0 — the "positive" pole of the diverging ramp */
+    readonly positiveColor: _angular_core.InputSignal<string>;
+    /** Bar colour for values < 0 — the "negative" pole of the diverging ramp */
+    readonly negativeColor: _angular_core.InputSignal<string>;
+    /** Whether to print each bar's signed value at its outer end */
+    readonly showValues: _angular_core.InputSignal<boolean>;
+    /** Suffix appended to every displayed value (e.g. '%') */
+    readonly valueSuffix: _angular_core.InputSignal<string>;
+    /** Bar thickness in pixels */
+    readonly barHeight: _angular_core.InputSignal<string | number>;
+    /** Flips `xAxis.inverse` so positive bars point the opposite physical direction — see the class doc's RTL caveat. */
+    readonly inverseAxis: _angular_core.InputSignal<boolean>;
+    /** Whether to draw a solid reference line at the zero baseline */
+    readonly showZeroLine: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDivergingBarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDivergingBarChartComponent, "sce-diverging-bar-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "positiveColor": { "alias": "positiveColor"; "required": false; "isSignal": true; }; "negativeColor": { "alias": "negativeColor"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "valueSuffix": { "alias": "valueSuffix"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "inverseAxis": { "alias": "inverseAxis"; "required": false; "isSignal": true; }; "showZeroLine": { "alias": "showZeroLine"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One dumbbell row: a "before" and an "after" value for the same category. */
+interface DumbbellItem {
+    name: string;
+    before: number;
+    after: number;
+}
+/**
+ * Two dots per category — `before` and `after` — joined by a connecting line, so the reader's eye
+ * lands on the GAP rather than on either absolute value. A grouped `sce-bar-chart` (two bars per
+ * category) shows the same two numbers but forces a comparison of bar LENGTHS from a shared zero
+ * baseline; the change itself has to be inferred. A dumbbell draws the change directly as the
+ * length of the connector, which is what to reach for when the delta — not the absolute levels —
+ * is the point (e.g. "how much did this move", not "which one is bigger").
+ */
+declare class SceDumbbellChartComponent {
+    private readonly el;
+    /** Manual direction override; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** One row per category */
+    readonly data: _angular_core.InputSignal<readonly DumbbellItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** "Before" dot colour */
+    readonly beforeColor: _angular_core.InputSignal<string>;
+    /** "After" dot colour */
+    readonly afterColor: _angular_core.InputSignal<string>;
+    /** Legend label for the "before" series — pass a translated string, the component does not translate its own legend */
+    readonly beforeLabel: _angular_core.InputSignal<string>;
+    /** Legend label for the "after" series */
+    readonly afterLabel: _angular_core.InputSignal<string>;
+    /** Connecting-line colour — recessive ink, not a series colour, so the dots (which carry the
+     * data) stay the only thing the eye reads as coloured */
+    readonly connectorColor: _angular_core.InputSignal<string>;
+    /** Connecting-line thickness in pixels */
+    readonly connectorWidth: _angular_core.InputSignal<number>;
+    /** Dot diameter in pixels */
+    readonly dotSize: _angular_core.InputSignal<number>;
+    /** Whether to show the dashed value-axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Whether to render the custom legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDumbbellChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDumbbellChartComponent, "sce-dumbbell-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "beforeColor": { "alias": "beforeColor"; "required": false; "isSignal": true; }; "afterColor": { "alias": "afterColor"; "required": false; "isSignal": true; }; "beforeLabel": { "alias": "beforeLabel"; "required": false; "isSignal": true; }; "afterLabel": { "alias": "afterLabel"; "required": false; "isSignal": true; }; "connectorColor": { "alias": "connectorColor"; "required": false; "isSignal": true; }; "connectorWidth": { "alias": "connectorWidth"; "required": false; "isSignal": true; }; "dotSize": { "alias": "dotSize"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One rippling "hot spot": an `[x, y]` position, an optional name, and an optional per-point color override. */
+interface EffectScatterPoint {
+    name?: string;
+    value: readonly [number, number];
+    color?: string;
+}
+/**
+ * ECharts `effectScatter` plot: a set of points that pulse with an animated ripple, used to draw
+ * the eye to a handful of "hot spots" against an optional static `context` backdrop. Unlike
+ * `sce-scatter-chart` — where every point is inert — reach for this chart specifically to call
+ * out outliers or highlights, not to plot a full dense dataset (the ripple animation on 100+
+ * points reads as noise, not emphasis).
+ */
+declare class SceEffectScatterChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** The rippling hot-spot points */
+    readonly points: _angular_core.InputSignal<readonly EffectScatterPoint[]>;
+    /** Optional static, non-rippling points rendered underneath for spatial context */
+    readonly context: _angular_core.InputSignal<readonly (readonly [number, number])[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Hot-spot point diameter in pixels */
+    readonly symbolSize: _angular_core.InputSignal<number>;
+    /** Ripple animation scale multiplier applied on top of `symbolSize` */
+    readonly rippleScale: _angular_core.InputSignal<number>;
+    /** Fallback hot-spot color for points that omit their own */
+    readonly color: _angular_core.InputSignal<string>;
+    /** When the ripple animation plays: continuously on render, or only on hover/focus */
+    readonly showEffectOn: _angular_core.InputSignal<"emphasis" | "render">;
+    /** Whether to show axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceEffectScatterChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceEffectScatterChartComponent, "sce-effect-scatter-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "points": { "alias": "points"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "symbolSize": { "alias": "symbolSize"; "required": false; "isSignal": true; }; "rippleScale": { "alias": "rippleScale"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showEffectOn": { "alias": "showEffectOn"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One force-graph node, optionally grouped into a `category` (must match a `ForceGraphCategory.name`). */
+interface ForceGraphNode {
+    id: string;
+    name: string;
+    category?: string;
+    value?: number;
+    color?: string;
+}
+/** One force-graph edge between two node ids. */
+interface ForceGraphLink {
+    source: string;
+    target: string;
+    value?: number;
+}
+/** One legend/colour group referenced by `ForceGraphNode.category`. */
+interface ForceGraphCategory {
+    name: string;
+    color?: string;
+}
+/**
+ * ECharts graph chart pinned to `layout: 'force'`: a physics simulation — repulsion between
+ * every node pair, gravity toward the centre, spring-like edges — spreads nodes apart so
+ * clusters and outliers surface visually. Unlike `sce-network-graph-chart`'s static ring, the
+ * simulation keeps running (and repainting) for as long as the chart stays on screen, which is a
+ * real performance cost, not a cosmetic one: `layoutAnimation` re-renders every simulation tick,
+ * so past a few hundred nodes the chart can visibly drop frames. Reach for this only while the
+ * node count stays small (roughly under 150), or set `layoutAnimation` to `false` to run the
+ * simulation once and freeze the result.
+ */
+declare class SceForceGraphChartComponent {
+    /** Graph nodes */
+    readonly nodes: _angular_core.InputSignal<readonly ForceGraphNode[]>;
+    /** Graph edges between node ids */
+    readonly links: _angular_core.InputSignal<readonly ForceGraphLink[]>;
+    /** Colour/legend groups referenced by node `category` */
+    readonly categories: _angular_core.InputSignal<readonly ForceGraphCategory[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Node marker diameter in pixels */
+    readonly nodeSize: _angular_core.InputSignal<number>;
+    /** Repulsive force between every pair of nodes — higher spreads nodes further apart */
+    readonly repulsion: _angular_core.InputSignal<number>;
+    /** Gravitational pull toward the chart's centre — higher keeps the graph more compact */
+    readonly gravity: _angular_core.InputSignal<number>;
+    /** Target rest length of each edge, in pixels */
+    readonly edgeLength: _angular_core.InputSignal<number>;
+    /**
+     * Whether the simulation keeps animating after its first layout pass. Costly for large graphs
+     * — each tick re-renders every node and edge — set `false` to run the simulation once and
+     * freeze the result in place.
+     */
+    readonly layoutAnimation: _angular_core.InputSignal<boolean>;
+    /** Whether nodes can be panned, zoomed and dragged */
+    readonly roam: _angular_core.InputSignal<boolean>;
+    /** Whether to show each node's name label */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    /** Whether to show the category legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceForceGraphChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceForceGraphChartComponent, "sce-force-graph-chart", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "nodeSize": { "alias": "nodeSize"; "required": false; "isSignal": true; }; "repulsion": { "alias": "repulsion"; "required": false; "isSignal": true; }; "gravity": { "alias": "gravity"; "required": false; "isSignal": true; }; "edgeLength": { "alias": "edgeLength"; "required": false; "isSignal": true; }; "layoutAnimation": { "alias": "layoutAnimation"; "required": false; "isSignal": true; }; "roam": { "alias": "roam"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One task bar spanning `start` to `end` (ISO-8601 date strings) on the shared time axis. */
+interface GanttTask {
+    name: string;
+    start: string;
+    end: string;
+    category?: string;
+}
+/**
+ * Draws one horizontal bar per task from `start` to `end` on a shared time axis — a project
+ * timeline / Gantt chart.
+ *
+ * Backed by ECharts' `custom` series with a `renderItem` callback (the standard way to build a
+ * Gantt chart in ECharts; there is no built-in `gantt` series type). Each task is placed on its
+ * own row of a `category` y-axis and its bar geometry is computed by hand via `api.coord` /
+ * `api.size`, clipped to the plot area with `echarts.graphic.clipRectByRect`.
+ *
+ * RTL: the time (x) axis does NOT mirror on an Arabic page. ECharts' cartesian coordinate system
+ * is not direction-aware — `renderItem` computes pixel coordinates directly from `api.coord`,
+ * which always maps the axis `min` to the chart's physical left edge. Flipping this to a true
+ * right-to-left timeline would require manually inverting the x-axis (`inverse: true`) *and*
+ * mirroring every "start"/"end" pixel calculated inside `renderItem`; neither happens today.
+ */
+declare class SceGanttChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Tasks rendered as horizontal bars, one row per task, top-to-bottom in the given order */
+    readonly tasks: _angular_core.InputSignal<readonly GanttTask[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar colour per task `category` — falls back to `defaultColor` when unmatched */
+    readonly categoryColors: _angular_core.InputSignal<Record<string, string>>;
+    /** Fallback bar colour for tasks with no matching category colour */
+    readonly defaultColor: _angular_core.InputSignal<string>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceGanttChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceGanttChartComponent, "sce-gantt-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "tasks": { "alias": "tasks"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "categoryColors": { "alias": "categoryColors"; "required": false; "isSignal": true; }; "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One cell: `[xIndex, yIndex, value]`, indexing into `xCategories`/`yCategories`. */
+type HeatmapCell = readonly [number, number, number];
+/**
+ * ECharts heatmap on a cartesian grid: `xCategories` x `yCategories`, coloured by `data` cell
+ * values through a `colorRange` gradient. For a calendar-shaped year of daily values, use
+ * `sce-calendar-heatmap-chart` instead — it plots on ECharts' calendar coordinate system, not
+ * this cartesian grid, and expects `[dateString, value]` pairs rather than category indices.
+ */
+declare class SceHeatmapChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Column labels, indexed by each cell's first coordinate */
+    readonly xCategories: _angular_core.InputSignal<readonly string[]>;
+    /** Row labels, indexed by each cell's second coordinate */
+    readonly yCategories: _angular_core.InputSignal<readonly string[]>;
+    /** Cell values as `[xIndex, yIndex, value]` triples */
+    readonly data: _angular_core.InputSignal<readonly HeatmapCell[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Colour stops for the value gradient, low to high. Painted to canvas, so literal hex/rgb only. */
+    readonly colorRange: _angular_core.InputSignal<readonly string[]>;
+    /** Value mapped to the start of `colorRange` */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Value mapped to the end of `colorRange` */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Shows the built-in visual map gradient legend, draggable to filter the visible range */
+    readonly showVisualMap: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceHeatmapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceHeatmapChartComponent, "sce-heatmap-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "xCategories": { "alias": "xCategories"; "required": false; "isSignal": true; }; "yCategories": { "alias": "yCategories"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colorRange": { "alias": "colorRange"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showVisualMap": { "alias": "showVisualMap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * ECharts has no built-in "icicle" series — unlike its sibling `sunburst` (a radial partition),
+ * there is no rectangular partition series in the library. Two honest options exist: fake it
+ * with `treemap` (which lays out nested squarified rectangles, NOT stacked depth bands — a
+ * treemap showing every level is visually a treemap, not an icicle), or hand-build the real
+ * partition layout on a `custom` series. This component takes the second path: `buildPartition`
+ * recursively slices each depth's width in proportion to child `value`, one fixed-height row per
+ * depth, and a `renderItem` callback on a `type: 'custom'` series paints each node as a `rect`
+ * graphic from those precomputed fractions. It is a from-scratch rectangular partition (the
+ * classic "icicle" / flame-graph shape), not a treemap in disguise and not a native ECharts series.
+ */
+interface IcicleNode {
+    readonly name: string;
+    readonly value?: number;
+    /** Explicit colour for this node; unset descendants inherit their top-level ancestor's colour. */
+    readonly color?: string;
+    readonly children?: readonly IcicleNode[];
+}
+/**
+ * Hand-built rectangular partition ("icicle") chart: each depth of the hierarchy is a fixed-height
+ * row, and each node's width is proportional to its `value` within its parent's span. See the
+ * class doc above for why this is a `custom` series rather than a native ECharts series.
+ */
+declare class SceIcicleChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Root-level branches of the hierarchy — each becomes its own coloured column. */
+    readonly data: _angular_core.InputSignal<readonly IcicleNode[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Palette cycled across top-level branches that don't set their own `color`. */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** Gap in pixels drawn between adjacent rectangles. */
+    readonly gap: _angular_core.InputSignal<number>;
+    /** Minimum rectangle width in pixels before its label is hidden. */
+    readonly labelMinWidth: _angular_core.InputSignal<number>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceIcicleChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceIcicleChartComponent, "sce-icicle-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "labelMinWidth": { "alias": "labelMinWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One lollipop: a value drawn as a thin stick topped with a circular head. */
+interface LollipopItem {
+    name: string;
+    value: number;
+    color?: string;
+}
+/**
+ * A bar chart's stick, without the bar's visual weight: a hairline (a `bar` series with a tiny
+ * fixed `barWidth`) topped with a `scatter` marker. At low data density this reads cleaner than
+ * `sce-bar-chart` — solid rectangles compete for attention with each other, while a thin stick and
+ * a dot draw the eye straight to the value.
+ */
+declare class SceLollipopChartComponent {
+    /** Data items — one stick-and-head per item */
+    readonly data: _angular_core.InputSignal<readonly LollipopItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Stick thickness in pixels */
+    readonly stickWidth: _angular_core.InputSignal<number>;
+    /** Head (circle marker) diameter in pixels */
+    readonly headSize: _angular_core.InputSignal<number>;
+    /** Default stick/head colour (used when an item has no `color`) */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Whether to show the dashed value-axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceLollipopChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceLollipopChartComponent, "sce-lollipop-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "stickWidth": { "alias": "stickWidth"; "required": false; "isSignal": true; }; "headSize": { "alias": "headSize"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One network-graph node, optionally grouped into a `category` (must match a `NetworkGraphCategory.name`). */
+interface NetworkGraphNode {
+    id: string;
+    name: string;
+    category?: string;
+    value?: number;
+    color?: string;
+}
+/** One network-graph edge between two node ids. */
+interface NetworkGraphLink {
+    source: string;
+    target: string;
+    value?: number;
+}
+/** One legend/colour group referenced by `NetworkGraphNode.category`. */
+interface NetworkGraphCategory {
+    name: string;
+    color?: string;
+}
+/**
+ * ECharts graph chart pinned to `layout: 'circular'`: every node is placed on a fixed ring, so
+ * the rendering is static and repeatable across renders. Unlike `sce-force-graph-chart`, whose
+ * physics simulation settles into a different arrangement (and keeps animating) every time,
+ * reach for this when the relationships matter more than avoiding edge crossings, or when a
+ * stable, screenshot-safe snapshot is required.
+ */
+declare class SceNetworkGraphChartComponent {
+    /** Graph nodes */
+    readonly nodes: _angular_core.InputSignal<readonly NetworkGraphNode[]>;
+    /** Graph edges between node ids */
+    readonly links: _angular_core.InputSignal<readonly NetworkGraphLink[]>;
+    /** Colour/legend groups referenced by node `category` */
+    readonly categories: _angular_core.InputSignal<readonly NetworkGraphCategory[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Node marker diameter in pixels */
+    readonly nodeSize: _angular_core.InputSignal<number>;
+    /** Whether the chart can be panned and zoomed */
+    readonly roam: _angular_core.InputSignal<boolean>;
+    /** Whether to show each node's name label */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    /** Whether to show the category legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceNetworkGraphChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceNetworkGraphChartComponent, "sce-network-graph-chart", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "nodeSize": { "alias": "nodeSize"; "required": false; "isSignal": true; }; "roam": { "alias": "roam"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One trading period's OHLC values, in ECharts' own order: `[open, close, low, high]`. */
+type OhlcDatum = readonly [number, number, number, number];
+/**
+ * ECharts candlestick chart with a volume bar series on a second grid below it.
+ *
+ * The two grids are two independent cartesian coordinate systems stacked vertically
+ * (`grid[0]` for price, `grid[1]` for volume) but they render **the same category axis data**
+ * on both `xAxis[0]` and `xAxis[1]`, and `axisPointer.link` synchronises the crosshair across
+ * them — so hovering a candle also highlights that day's volume bar, and vice versa. Reach for
+ * `sce-candlestick-chart` instead when there is no volume series to plot.
+ */
+declare class SceOhlcVolumeChartComponent {
+    /** X-axis category labels, shared by both grids (typically dates) */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** `[open, close, low, high]` tuples, aligned to `categories` */
+    readonly data: _angular_core.InputSignal<readonly OhlcDatum[]>;
+    /** Traded volume per period, aligned to `categories` */
+    readonly volume: _angular_core.InputSignal<readonly number[]>;
+    /** Candle and volume-bar colour when the period closed at or above its open — rising/falling is
+     * a STATE, not a series identity, so this defaults to the shared "good" status colour */
+    readonly risingColor: _angular_core.InputSignal<string>;
+    /** Candle and volume-bar colour when the period closed below its open — the shared "critical" status colour */
+    readonly fallingColor: _angular_core.InputSignal<string>;
+    /** Combined chart height in pixels, split ~62% price / ~18% volume with a gap between */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOhlcVolumeChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOhlcVolumeChartComponent, "sce-ohlc-volume-chart", never, { "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "volume": { "alias": "volume"; "required": false; "isSignal": true; }; "risingColor": { "alias": "risingColor"; "required": false; "isSignal": true; }; "fallingColor": { "alias": "fallingColor"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One vertical axis in the parallel coordinate system — `dim` is assigned automatically from array order. */
+interface ParallelAxisDef {
+    name: string;
+    min?: number;
+    max?: number;
+    /** Axis kind — `'category'` requires `data`; defaults to `'value'` */
+    type?: 'value' | 'category' | 'log';
+    /** Category labels, in axis order — required when `type` is `'category'` */
+    data?: readonly string[];
+}
+/** One polyline: `values[i]` is plotted against `axes[i]` — arrays must be the same length and in the same order. */
+interface ParallelRecord {
+    name: string;
+    color?: string;
+    values: readonly number[];
+}
+/**
+ * ECharts parallel-coordinates plot: one vertical axis per dimension in `axes`, and one polyline
+ * per `records` entry connecting its value on each axis in turn — built for spotting correlation
+ * and clusters across MANY numeric dimensions at once, which a scatter plot can only show two (or
+ * three) of at a time.
+ *
+ * Dragging along any axis brushes a range on it (ECharts' built-in `parallelAxis` realtime
+ * selection): only polylines passing through the selected range on every brushed axis stay fully
+ * opaque, so readers can filter records by combining constraints across several axes at once —
+ * no extra wiring is required, brushing is native to the `parallel` coordinate system.
+ */
+declare class SceParallelCoordinatesChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Dimensions — one vertical axis per entry, in display order left-to-right */
+    readonly axes: _angular_core.InputSignal<readonly ParallelAxisDef[]>;
+    /** Records — one polyline per entry; each `values` array must align with `axes` by index */
+    readonly records: _angular_core.InputSignal<readonly ParallelRecord[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Polyline stroke width in pixels */
+    readonly lineWidth: _angular_core.InputSignal<number>;
+    /** Whether to draw curved polylines instead of straight segments between axes */
+    readonly smooth: _angular_core.InputSignal<boolean>;
+    /** Whether to show the legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceParallelCoordinatesChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceParallelCoordinatesChartComponent, "sce-parallel-coordinates-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "axes": { "alias": "axes"; "required": false; "isSignal": true; }; "records": { "alias": "records"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "lineWidth": { "alias": "lineWidth"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One bar's value and its running cumulative percentage after sorting, as produced by `computeParetoData`. */
+interface ParetoDatum {
+    readonly category: string;
+    readonly value: number;
+    readonly cumulativePercent: number;
+}
+/**
+ * ECharts Pareto chart: bars sorted descending by value, with a cumulative percentage line on a
+ * second, independent 0–100% axis — the classic 80/20 chart, used to show which few categories
+ * account for most of the total.
+ *
+ * Note the axis sides are the reverse of the usual Pareto convention: `yAxis[0]` (the bars) is
+ * `position: 'right'` and `yAxis[1]` (the 0–100% line) is `position: 'left'`. The doc comment here
+ * used to claim the conventional layout, which the code has never done. Swapping them is a visual
+ * change to a shipped component, so this describes what it actually renders rather than what it
+ * ought to; if the convention matters, swap the two `position` values, not this comment.
+ *
+ * `categories` + `values` are reordered and reduced to per-bar cumulative percentages by the
+ * exported `computeParetoData` helper. A dashed `thresholdPercent` marker (80 by default) makes
+ * the "vital few" cut-off visible on the percentage axis.
+ */
+declare class SceParetoChartComponent {
+    /** Category labels, aligned to `values` */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** One value per category, aligned to `categories` */
+    readonly values: _angular_core.InputSignal<readonly number[]>;
+    /** Bar fill colour */
+    readonly barColor: _angular_core.InputSignal<string>;
+    /** Cumulative-percentage line colour */
+    readonly lineColor: _angular_core.InputSignal<string>;
+    /** Cumulative-percentage threshold marked with a dashed line; `null` hides the marker */
+    readonly thresholdPercent: _angular_core.InputSignal<number | null>;
+    /** Legend/tooltip label for the bar series — pass a translated string, the component renders it as-is */
+    readonly valueLabel: _angular_core.InputSignal<string>;
+    /** Legend/tooltip label for the cumulative-percentage line series — pass a translated string */
+    readonly cumulativeLabel: _angular_core.InputSignal<string>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    private readonly paretoData;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceParetoChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceParetoChartComponent, "sce-pareto-chart", never, { "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "barColor": { "alias": "barColor"; "required": false; "isSignal": true; }; "lineColor": { "alias": "lineColor"; "required": false; "isSignal": true; }; "thresholdPercent": { "alias": "thresholdPercent"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "cumulativeLabel": { "alias": "cumulativeLabel"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One pictorial bar: a value drawn as a column of repeated symbols instead of a solid rectangle. */
+interface PictorialBarItem {
+    name: string;
+    value: number;
+    color?: string;
+}
+/**
+ * ECharts `pictorialBar` series: each value is drawn as a repeated symbol (a block, a person
+ * silhouette via a custom SVG path, etc.) instead of a solid rectangle, so the reader can literally
+ * count units. Reach for `sce-bar-chart` when the exact value matters more than the unit count —
+ * pictographs are read approximately, by counting whole and partial icons.
+ */
+declare class ScePictorialBarChartComponent {
+    /** Data items — one repeated-symbol column per item */
+    readonly data: _angular_core.InputSignal<readonly PictorialBarItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Symbol shape: an ECharts built-in name (`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`,
+     * `'diamond'`, `'pin'`, `'arrow'`) or a custom shape via `'path://…'` / `'image://…'`. */
+    readonly symbol: _angular_core.InputSignal<string>;
+    /** How the symbol repeats to fill the bar: `true` auto-repeats to fit, a number fixes the
+     * repeat count, `false` stretches a single symbol like a normal bar. */
+    readonly symbolRepeat: _angular_core.InputSignal<number | boolean>;
+    /** Symbol size in pixels, as `[width, height]` */
+    readonly symbolSize: _angular_core.InputSignal<[number, number]>;
+    /** Gap between repeated symbols — a pixel number or an ECharts percentage string */
+    readonly symbolMargin: _angular_core.InputSignal<string | number>;
+    /** When true, the last (partial) symbol is clipped to represent a fractional unit instead of
+     * being rounded up to a whole icon. */
+    readonly symbolClip: _angular_core.InputSignal<boolean>;
+    /** Default symbol colour (used when an item has no `color`) */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Whether to show the dashed value-axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScePictorialBarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePictorialBarChartComponent, "sce-pictorial-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "symbol": { "alias": "symbol"; "required": false; "isSignal": true; }; "symbolRepeat": { "alias": "symbolRepeat"; "required": false; "isSignal": true; }; "symbolSize": { "alias": "symbolSize"; "required": false; "isSignal": true; }; "symbolMargin": { "alias": "symbolMargin"; "required": false; "isSignal": true; }; "symbolClip": { "alias": "symbolClip"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One age band: left-series and right-series counts, both given as ordinary POSITIVE numbers. */
+interface PopulationPyramidBand {
+    ageBand: string;
+    left: number;
+    right: number;
+}
+/**
+ * ECharts back-to-back population pyramid: two horizontal bar series sharing one zero-centred value
+ * axis and one category axis (age bands, or any other paired breakdown). The LEFT series is plotted
+ * as negative numbers under the hood — that is what pushes it to the opposite side of the shared
+ * axis from the right series — but `formatPyramidMagnitude` strips the sign back off everywhere a
+ * human reads a number (axis ticks, tooltip), so nobody sees a population figure reported as "-45".
+ */
+declare class ScePopulationPyramidChartComponent {
+    private readonly el;
+    /** Manual direction override for the category axis side; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Age-band rows — `left`/`right` are given as ordinary positive counts */
+    readonly data: _angular_core.InputSignal<readonly PopulationPyramidBand[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar colour for the left series — the two sides are two categories, not a polarity */
+    readonly leftColor: _angular_core.InputSignal<string>;
+    /** Bar colour for the right series */
+    readonly rightColor: _angular_core.InputSignal<string>;
+    /** Legend / tooltip caption for the left series */
+    readonly leftLabel: _angular_core.InputSignal<string>;
+    /** Legend / tooltip caption for the right series */
+    readonly rightLabel: _angular_core.InputSignal<string>;
+    /** Suffix appended to every displayed value (e.g. ' people') */
+    readonly valueSuffix: _angular_core.InputSignal<string>;
+    /** Bar thickness in pixels */
+    readonly barHeight: _angular_core.InputSignal<string | number>;
+    /** Whether to render the left/right legend */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScePopulationPyramidChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePopulationPyramidChartComponent, "sce-population-pyramid-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "leftColor": { "alias": "leftColor"; "required": false; "isSignal": true; }; "rightColor": { "alias": "rightColor"; "required": false; "isSignal": true; }; "leftLabel": { "alias": "leftLabel"; "required": false; "isSignal": true; }; "rightLabel": { "alias": "rightLabel"; "required": false; "isSignal": true; }; "valueSuffix": { "alias": "valueSuffix"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One cell: `[xIndex, yIndex, value]`, indexing into `xCategories`/`yCategories`. */
+type PunchCardCell = readonly [number, number, number];
+/**
+ * Classic day-of-week x hour-of-day activity chart: a scatter series on a category x category
+ * grid where each cell's VALUE drives its dot's `symbolSize`, not its colour. This is
+ * deliberately not a heatmap — `sce-heatmap-chart` communicates value through colour intensity
+ * on filled cells, which reads well for a handful of rows/columns but turns into visual noise
+ * across 24 hourly columns; the punch card's varying dot sizes stay legible at that density.
+ * Reach for `sce-heatmap-chart` when the grid is small enough that colour alone is clear, or
+ * when the built-in visual-map legend/filtering is needed.
+ */
+declare class ScePunchCardChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Column labels, indexed by each cell's first coordinate — typically hours of day */
+    readonly xCategories: _angular_core.InputSignal<readonly string[]>;
+    /** Row labels, indexed by each cell's second coordinate — typically days of the week */
+    readonly yCategories: _angular_core.InputSignal<readonly string[]>;
+    /** Cell values as `[xIndex, yIndex, value]` triples; `value` drives dot size */
+    readonly data: _angular_core.InputSignal<readonly PunchCardCell[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Dot colour. Painted to canvas, so it must be a literal hex/rgb value. */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Dot diameter in pixels for the lowest value in `data` */
+    readonly minSymbolSize: _angular_core.InputSignal<number>;
+    /** Dot diameter in pixels for the highest value in `data` */
+    readonly maxSymbolSize: _angular_core.InputSignal<number>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScePunchCardChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePunchCardChartComponent, "sce-punch-card-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "xCategories": { "alias": "xCategories"; "required": false; "isSignal": true; }; "yCategories": { "alias": "yCategories"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "minSymbolSize": { "alias": "minSymbolSize"; "required": false; "isSignal": true; }; "maxSymbolSize": { "alias": "maxSymbolSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One level of a hierarchy/population pyramid, top (smallest, e.g. leadership) to bottom (largest, e.g. entry level). */
+interface PyramidLevel {
+    name: string;
+    value: number;
+    color?: string;
+}
+/**
+ * Population/hierarchy pyramid: the same ECharts `funnel` series as `sce-funnel-chart`, but with
+ * `sort: 'ascending'` so it WIDENS downward instead of narrowing. Where the funnel reads as a
+ * conversion path (100% at the top, shrinking to whoever converted), the pyramid reads as a
+ * structure (few at the top, many at the base) — there is no "conversion rate" between levels,
+ * so labels show the raw value rather than a stage-to-stage percentage.
+ * Pick this over `sce-funnel-chart` whenever the data is a headcount/hierarchy breakdown rather
+ * than a sequential drop-off.
+ */
+declare class ScePyramidChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Ordered pyramid levels, smallest first (top) widening to the largest (bottom, the base) */
+    readonly levels: _angular_core.InputSignal<readonly PyramidLevel[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /**
+     * Fallback level colour used when a level has no `color` of its own — `null` (the default) uses
+     * the theme's single-hue `CHART_SEQUENTIAL` progression, one tone per level, since the levels
+     * are ordered steps of one hierarchy rather than unrelated categories.
+     */
+    readonly color: _angular_core.InputSignal<string | null>;
+    /** Gap in pixels between adjacent pyramid segments */
+    readonly gap: _angular_core.InputSignal<number>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScePyramidChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScePyramidChartComponent, "sce-pyramid-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "levels": { "alias": "levels"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One quadrant-chart series: a name plus a list of `[x, y]` numeric points. */
+interface QuadrantSeriesData {
+    name: string;
+    data: readonly (readonly [number, number])[];
+    color?: string;
+}
+/**
+ * ECharts scatter plot split into four labelled quadrants by an `xThreshold`/`yThreshold`
+ * crosshair (`markLine` + `markArea`) — e.g. an effort/impact or risk/value matrix. Unlike
+ * `sce-scatter-chart` — which is a neutral x/y plot — reach for this chart when the four regions
+ * of the plane themselves carry meaning that needs a caption, not just the raw points.
+ *
+ * ## RTL: the plot is NOT mirrored, and the caption names are not a trap
+ *
+ * `isRtl` here does exactly one thing: it moves the **y-axis gutter** (its line, ticks and labels)
+ * to the right-hand side, so it does not sit in the middle of an Arabic reading flow. It does not
+ * touch the data plane. Neither axis is ever `inverse`d, so **x always increases towards the
+ * physical right and y towards the physical top, in Arabic exactly as in English**.
+ *
+ * That is why the four physically-named caption inputs need no RTL remap: for every one of them
+ * the screen corner and the coordinate region are the *same* region in both directions.
+ * `topRightLabel` is simultaneously "the top-right corner" and "x > xThreshold ∧ y > yThreshold".
+ * Swapping them under RTL would be the bug — it would paint the high-x caption over the low-x half.
+ *
+ * ⚠️ The one way to break this is to make the plane direction-dependent. If anyone ever adds
+ * `inverse: isRtl` to `xAxis` (as `sce-dumbbell-chart` and `sce-bullet-chart` legitimately do for
+ * their category axes), the coordinates keep the captions correct but the *names* start lying —
+ * `topRightLabel` would then print in the physically top-*left* corner. Do not invert an axis of
+ * this chart without renaming these four inputs to logical names in the same change.
+ */
+declare class SceQuadrantChartComponent {
+    private readonly el;
+    /**
+     * Manual direction override; null auto-detects from computed style (RTL-first default).
+     * Moves the y-axis gutter to the right — it does NOT mirror the plot. See the class doc.
+     */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** One or more x/y series to plot */
+    readonly series: _angular_core.InputSignal<readonly QuadrantSeriesData[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Point diameter in pixels, applied to every series */
+    readonly symbolSize: _angular_core.InputSignal<number>;
+    /** X value the vertical divider line is drawn at */
+    readonly xThreshold: _angular_core.InputSignal<number>;
+    /** Y value the horizontal divider line is drawn at */
+    readonly yThreshold: _angular_core.InputSignal<number>;
+    /**
+     * Label for the quadrant where x > xThreshold and y > yThreshold — pass a translated string,
+     * never hardcode it. The plane is never mirrored, so this is the physically top-right corner
+     * in Arabic too; do not remap the four captions under RTL.
+     */
+    readonly topRightLabel: _angular_core.InputSignal<string>;
+    /** Label for the quadrant where x < xThreshold and y > yThreshold — pass a translated string, never hardcode it */
+    readonly topLeftLabel: _angular_core.InputSignal<string>;
+    /** Label for the quadrant where x < xThreshold and y < yThreshold — pass a translated string, never hardcode it */
+    readonly bottomLeftLabel: _angular_core.InputSignal<string>;
+    /** Label for the quadrant where x > xThreshold and y < yThreshold — pass a translated string, never hardcode it */
+    readonly bottomRightLabel: _angular_core.InputSignal<string>;
+    /** Whether to show the custom legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceQuadrantChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceQuadrantChartComponent, "sce-quadrant-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "symbolSize": { "alias": "symbolSize"; "required": false; "isSignal": true; }; "xThreshold": { "alias": "xThreshold"; "required": false; "isSignal": true; }; "yThreshold": { "alias": "yThreshold"; "required": false; "isSignal": true; }; "topRightLabel": { "alias": "topRightLabel"; "required": false; "isSignal": true; }; "topLeftLabel": { "alias": "topLeftLabel"; "required": false; "isSignal": true; }; "bottomLeftLabel": { "alias": "bottomLeftLabel"; "required": false; "isSignal": true; }; "bottomRightLabel": { "alias": "bottomRightLabel"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One spoke of the radar: its label and the value that maps to the outer edge. */
+interface RadarIndicator {
+    name: string;
+    max: number;
+    min?: number;
+}
+/** One radar series: values aligned to `indicators`, in the same order. */
+interface RadarSeriesData {
+    name: string;
+    data: readonly number[];
+    color?: string;
+}
+/**
+ * ECharts radar chart: one axis per `RadarIndicator`, plotting one or more `RadarSeriesData`
+ * series across them with an optional area fill. For a two-entity "this vs. benchmark"
+ * comparison, prefer `sce-radar-comparison-chart` — it fixes the palette and legend for that
+ * exact case instead of leaving them generic.
+ */
+declare class SceRadarChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Axis definitions — name and max value for each spoke, in the order series data is read. */
+    readonly indicators: _angular_core.InputSignal<readonly RadarIndicator[]>;
+    /** One or more series plotted across the indicator axes. */
+    readonly series: _angular_core.InputSignal<readonly RadarSeriesData[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Fills the area under each series' polygon at low opacity */
+    readonly showArea: _angular_core.InputSignal<boolean>;
+    /** Radar outline: sharp-cornered polygon following the indicator count, or a smooth circle */
+    readonly shape: _angular_core.InputSignal<"circle" | "polygon">;
+    /** Number of split rings drawn between the centre and each indicator's max value */
+    readonly splitNumber: _angular_core.InputSignal<number>;
+    /** Shows the standalone legend below the chart when more than one series is plotted */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRadarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRadarChartComponent, "sce-radar-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "indicators": { "alias": "indicators"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "splitNumber": { "alias": "splitNumber"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One side of a two-entity radar comparison — e.g. "this office" or "sector average". */
+interface RadarComparisonEntity {
+    name: string;
+    data: readonly number[];
+    color?: string;
+}
+/**
+ * Radar chart tuned for comparing exactly two entities across the same indicator set — a
+ * subject against a benchmark (this office vs. sector average, this period vs. last period).
+ * Unlike `sce-radar-chart`, which accepts an arbitrary number of series with a generic
+ * palette, this component always plots two series in fixed subject/benchmark colours, always
+ * shows the legend (a two-series radar is unreadable without it), and fills both areas at a
+ * low opacity so the overlap stays legible. Reach for `sce-radar-chart` instead once a third
+ * series is needed, or when the built-in legend and colour defaults don't fit the case.
+ */
+declare class SceRadarComparisonChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Axis definitions — name and max value for each spoke, in the order entity data is read. */
+    readonly indicators: _angular_core.InputSignal<readonly RadarIndicator[]>;
+    /** The two entities being compared. Only the first two entries are plotted. */
+    readonly entities: _angular_core.InputSignal<readonly RadarComparisonEntity[]>;
+    /** Colour for the first entity when it does not specify its own `color` */
+    readonly primaryColor: _angular_core.InputSignal<string>;
+    /** Colour for the second entity when it does not specify its own `color` */
+    readonly secondaryColor: _angular_core.InputSignal<string>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Opacity of both filled areas — kept low by default so the overlap between them stays visible */
+    readonly areaOpacity: _angular_core.InputSignal<number>;
+    /** Radar outline: sharp-cornered polygon following the indicator count, or a smooth circle */
+    readonly shape: _angular_core.InputSignal<"circle" | "polygon">;
+    /** Number of split rings drawn between the centre and each indicator's max value */
+    readonly splitNumber: _angular_core.InputSignal<number>;
+    private readonly resolvedEntities;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRadarComparisonChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRadarComparisonChartComponent, "sce-radar-comparison-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "indicators": { "alias": "indicators"; "required": false; "isSignal": true; }; "entities": { "alias": "entities"; "required": false; "isSignal": true; }; "primaryColor": { "alias": "primaryColor"; "required": false; "isSignal": true; }; "secondaryColor": { "alias": "secondaryColor"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "areaOpacity": { "alias": "areaOpacity"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "splitNumber": { "alias": "splitNumber"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One progress track: `value` against `max` (falling back to the chart's global `max`) sets how far its ring fills. */
+interface RadialBarSeriesItem {
+    name: string;
+    value: number;
+    /** Overrides the chart-level `max` for this track only */
+    max?: number;
+    color?: string;
+}
+/**
+ * Multi-track ring gauge: polar bars used as concentric PROGRESS rings, one ring per category,
+ * each filling to its `value / max` percentage — a `radiusAxis` of `type: 'category'` slices the
+ * `[innerRadius, outerRadius]` band into one ring per data item, and a value-type `angleAxis`
+ * (0–100) turns each bar's length into a percentage sweep.
+ *
+ * Distinct from `sce-ring-chart`: that component draws ONE ring broken into slices whose angles
+ * sum to a whole (parts of a total, like a donut). This component draws SEVERAL independent
+ * rings, each measuring its own category's progress against its own target — reach for this one
+ * when comparing several percentages side by side, and for `sce-ring-chart` when showing how one
+ * total splits into parts.
+ */
+declare class SceRadialBarChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Data items — one progress ring per item, innermost-to-outermost in array order */
+    readonly data: _angular_core.InputSignal<readonly RadialBarSeriesItem[]>;
+    /** Default maximum value (100%) for items that do not set their own `max` */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Inner radius of the innermost ring */
+    readonly innerRadius: _angular_core.InputSignal<string>;
+    /** Outer radius of the outermost ring */
+    readonly outerRadius: _angular_core.InputSignal<string>;
+    /** Whether rings end in a rounded cap instead of a flat edge */
+    readonly roundCap: _angular_core.InputSignal<boolean>;
+    /** Background colour of the unfilled portion of each ring */
+    readonly trackColor: _angular_core.InputSignal<string>;
+    /** Angle, in degrees, at which every ring starts filling from */
+    readonly startAngle: _angular_core.InputSignal<number>;
+    /** Whether to show the legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRadialBarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRadialBarChartComponent, "sce-radial-bar-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "innerRadius": { "alias": "innerRadius"; "required": false; "isSignal": true; }; "outerRadius": { "alias": "outerRadius"; "required": false; "isSignal": true; }; "roundCap": { "alias": "roundCap"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "startAngle": { "alias": "startAngle"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * ECharts confidence/min-max band with a central line drawn through it.
+ *
+ * ECharts has no native "band" series, so this is built with the classic trick: an invisible
+ * line series plots the **lower** bound and is stacked with a second, visible line series that
+ * plots only the **difference** (`upper - lower`). Because the second series is stacked on top
+ * of the first, its visible area floats between the two bounds instead of starting from zero —
+ * from the axis's point of view it never sees the real upper values, only the gap. A third,
+ * unstacked line series draws `mid` (or the lower/upper midpoint when `mid` is omitted) through
+ * the middle of the band. The tooltip is a custom formatter that reads the original `lower()` /
+ * `upper()` / resolved `mid` arrays directly by category index, rather than the stacked series
+ * values ECharts would otherwise report — those are an implementation detail, not real data.
+ *
+ * Distinct from `sce-area-chart` (a single trend line with a gradient fill and one highlighted
+ * point) and `sce-stacked-area-chart` (parts of a whole that sum to a total): this chart plots
+ * uncertainty around a single quantity — a forecast range, a confidence interval, a min/max
+ * envelope — not a second data series or a composition.
+ */
+declare class SceRangeAreaChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** X-axis category labels */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** Lower bound of the band, one value per category */
+    readonly lower: _angular_core.InputSignal<readonly number[]>;
+    /** Upper bound of the band, one value per category */
+    readonly upper: _angular_core.InputSignal<readonly number[]>;
+    /** Central line values, one per category. Defaults to the lower/upper midpoint when omitted. */
+    readonly mid: _angular_core.InputSignal<readonly number[] | null>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Fill colour of the band (literal hex — painted to canvas). The band is subordinate to the
+     *  central line, so it defaults to the SAME hue as `lineColor`, just carried at low opacity. */
+    readonly bandColor: _angular_core.InputSignal<string>;
+    /** Stroke colour of the central line (literal hex — painted to canvas) */
+    readonly lineColor: _angular_core.InputSignal<string>;
+    /** Tooltip label for the central line — falls back to a translated key at the call site */
+    readonly midLabel: _angular_core.InputSignal<string>;
+    /** Tooltip label for the band — falls back to a translated key at the call site */
+    readonly rangeLabel: _angular_core.InputSignal<string>;
+    /** Whether to show X-axis labels */
+    readonly showXAxisLabels: _angular_core.InputSignal<boolean>;
+    /** Whether to show grid split lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    private readonly resolvedMid;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceRangeAreaChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRangeAreaChartComponent, "sce-range-area-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "lower": { "alias": "lower"; "required": false; "isSignal": true; }; "upper": { "alias": "upper"; "required": false; "isSignal": true; }; "mid": { "alias": "mid"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "bandColor": { "alias": "bandColor"; "required": false; "isSignal": true; }; "lineColor": { "alias": "lineColor"; "required": false; "isSignal": true; }; "midLabel": { "alias": "midLabel"; "required": false; "isSignal": true; }; "rangeLabel": { "alias": "rangeLabel"; "required": false; "isSignal": true; }; "showXAxisLabels": { "alias": "showXAxisLabels"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One sankey stage — matched to links by `name`. */
+interface SankeyNode {
+    name: string;
+    color?: string;
+}
+/** One weighted flow from a `source` node name to a `target` node name. */
+interface SankeyLink {
+    source: string;
+    target: string;
+    value: number;
+}
+/**
+ * ECharts sankey diagram for weighted flow between named stages (funnels, budget breakdowns,
+ * multi-step conversion paths) — link width is proportional to `value`. Unlike
+ * `sce-network-graph-chart`, where edges express arbitrary peer relationships, a sankey's links
+ * must be acyclic and read left-to-right (or top-to-bottom): reach for this chart when the data
+ * has a directional "flow" between stages, not a symmetric network of connections.
+ */
+declare class SceSankeyChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Flow stages */
+    readonly nodes: _angular_core.InputSignal<readonly SankeyNode[]>;
+    /** Weighted flows between node names */
+    readonly links: _angular_core.InputSignal<readonly SankeyLink[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Node rectangle thickness in pixels */
+    readonly nodeWidth: _angular_core.InputSignal<number>;
+    /** Vertical gap between nodes in the same column, in pixels */
+    readonly nodeGap: _angular_core.InputSignal<number>;
+    /** Flow direction of the diagram */
+    readonly orient: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Link curve amount, 0 (straight) to 1 (fully curved) */
+    readonly curveness: _angular_core.InputSignal<number>;
+    /** Link fill opacity */
+    readonly linkOpacity: _angular_core.InputSignal<number>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceSankeyChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceSankeyChartComponent, "sce-sankey-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "nodeWidth": { "alias": "nodeWidth"; "required": false; "isSignal": true; }; "nodeGap": { "alias": "nodeGap"; "required": false; "isSignal": true; }; "orient": { "alias": "orient"; "required": false; "isSignal": true; }; "curveness": { "alias": "curveness"; "required": false; "isSignal": true; }; "linkOpacity": { "alias": "linkOpacity"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One scatter series: a name plus a list of `[x, y]` numeric points. */
+interface ScatterSeriesData {
+    name: string;
+    data: readonly (readonly [number, number])[];
+    color?: string;
+}
+/**
+ * ECharts scatter plot for one or more numeric x/y series, every point drawn at the same
+ * `symbolSize`. Unlike `sce-bubble-chart` — where a third value drives per-point size — reach
+ * for this chart when only the x/y position carries meaning, not a magnitude.
+ */
+declare class SceScatterChartComponent {
+    private readonly el;
+    /** Manual direction override; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** One or more x/y series to plot */
+    readonly series: _angular_core.InputSignal<readonly ScatterSeriesData[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Point diameter in pixels, applied to every series */
+    readonly symbolSize: _angular_core.InputSignal<number>;
+    /** Whether to show the custom legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to show axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceScatterChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceScatterChartComponent, "sce-scatter-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "symbolSize": { "alias": "symbolSize"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** A single `[x, y]` data point. */
+type RegressionPoint = readonly [number, number];
+/** Result of an ordinary least-squares fit: `y = slope * x + intercept`. */
+interface LinearRegressionResult {
+    slope: number;
+    intercept: number;
+}
+/**
+ * ECharts scatter plot of one point cloud plus a straight trend line fitted to it with ordinary
+ * least squares (`computeLinearRegression`, a pure helper exported from this file). Unlike
+ * `sce-scatter-chart` — which only plots raw points — reach for this chart when the story is the
+ * correlation itself (is `y` trending up or down with `x`?), not the individual points.
+ */
+declare class SceScatterRegressionChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** The point cloud to plot and fit a trend line to */
+    readonly points: _angular_core.InputSignal<readonly RegressionPoint[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — null stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Point diameter in pixels */
+    readonly symbolSize: _angular_core.InputSignal<number>;
+    /** Scatter point color */
+    readonly pointColor: _angular_core.InputSignal<string>;
+    /** Trend line color — an annotation, subordinate to the points it fits */
+    readonly lineColor: _angular_core.InputSignal<string>;
+    /** Legend label for the point series — pass a translated string, never hardcode it */
+    readonly pointsLabel: _angular_core.InputSignal<string>;
+    /** Legend label for the trend-line series — pass a translated string, never hardcode it */
+    readonly trendLabel: _angular_core.InputSignal<string>;
+    /** Whether to show the custom legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to show axis grid lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    readonly regression: _angular_core.Signal<LinearRegressionResult>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceScatterRegressionChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceScatterRegressionChartComponent, "sce-scatter-regression-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "points": { "alias": "points"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "symbolSize": { "alias": "symbolSize"; "required": false; "isSignal": true; }; "pointColor": { "alias": "pointColor"; "required": false; "isSignal": true; }; "lineColor": { "alias": "lineColor"; "required": false; "isSignal": true; }; "pointsLabel": { "alias": "pointsLabel"; "required": false; "isSignal": true; }; "trendLabel": { "alias": "trendLabel"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** `'absolute'` stacks raw values to a variable total; `'percent'` re-scales every category to a 0-100 total. */
+type StackedAreaMode = 'absolute' | 'percent';
+/**
+ * ECharts area chart with every series stacked into a running total per category, unlike
+ * `sce-line-chart`'s areas — which each start from zero and overlap independently, so they
+ * cannot be read as parts of a whole.
+ *
+ * Reach for `sce-stacked-area-chart` when the series are parts of one total that should sum
+ * visually at each category (revenue by channel, requests by status) and either the running
+ * total itself matters (`mode="absolute"`) or only each part's *share* of the total does
+ * (`mode="percent"`, which re-scales every category to 100%).
+ */
+declare class SceStackedAreaChartComponent {
+    /**
+     * Force a palette mode. Defaults to following the app theme (`data-theme` on <html>).
+     * Named `themeMode` — not `mode` — because `mode` is already taken by `StackedAreaMode`
+     * (`'absolute'` | `'percent'`).
+     */
+    readonly themeMode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `themeMode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Which side the value axis sits on; null defaults to the RTL side (this design system's Arabic-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly computedIsRtl;
+    /** Array of series to stack, in stacking order (first series sits closest to the axis). */
+    readonly series: _angular_core.InputSignal<readonly ChartLineSeriesData[]>;
+    /** X-axis category labels */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** `'absolute'` stacks raw values; `'percent'` normalizes each category to a 100% total. */
+    readonly mode: _angular_core.InputSignal<StackedAreaMode>;
+    /** Whether to show smooth curves */
+    readonly smooth: _angular_core.InputSignal<boolean>;
+    /** Whether to show the standalone legend */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to show grid split lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Whether to show X-axis labels */
+    readonly showXAxisLabels: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    /**
+     * Values as ECharts will actually draw them. In `'percent'` mode every category's values are
+     * rescaled so they sum to 100 — the raw input in `series()` is left untouched.
+     */
+    private readonly plottedValues;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStackedAreaChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStackedAreaChartComponent, "sce-stacked-area-chart", never, { "themeMode": { "alias": "themeMode"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXAxisLabels": { "alias": "showXAxisLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Where the step jump happens between two data points. */
+type StepLineEdge = 'start' | 'middle' | 'end';
+/**
+ * ECharts multi-series line chart that holds each value constant and jumps at the step edge,
+ * instead of interpolating a slope between points.
+ *
+ * `sce-line-chart` draws a straight (or smoothed) diagonal between consecutive points, which
+ * implies the value changed gradually between them. Reach for `sce-step-line-chart` instead
+ * whenever the underlying value is actually constant between samples and changes instantly —
+ * tariff bands, plan tiers, on/off statuses, threshold changes — so the chart does not invent
+ * a transition that never happened.
+ */
+declare class SceStepLineChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Which side the value axis sits on; null defaults to the RTL side (this design system's Arabic-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly computedIsRtl;
+    /** Array of series data to display */
+    readonly series: _angular_core.InputSignal<readonly ChartLineSeriesData[]>;
+    /** X-axis category labels */
+    readonly categories: _angular_core.InputSignal<readonly string[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Where the value jumps relative to the two points it sits between. */
+    readonly step: _angular_core.InputSignal<StepLineEdge>;
+    /** Whether to show the area fill under the step line */
+    readonly showArea: _angular_core.InputSignal<boolean>;
+    /** Whether to show the standalone legend */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Whether to show grid split lines */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Whether to show X-axis labels */
+    readonly showXAxisLabels: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStepLineChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStepLineChartComponent, "sce-step-line-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXAxisLabels": { "alias": "showXAxisLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One dated value for a single named stream. */
+interface StreamGraphPoint {
+    date: string;
+    value: number;
+}
+/** One named stream (a river band), plotted as one colour across the whole timeline. */
+interface StreamGraphSeries {
+    name: string;
+    color?: string;
+    points: readonly StreamGraphPoint[];
+}
+/**
+ * ECharts `themeRiver` stream graph: a stacked area centred on a flowing, wiggling baseline
+ * instead of a fixed zero line, so no single band's shape is distorted by sitting on top of
+ * every other band (the effect `sce-stacked-area-chart` has, since its baseline is a hard
+ * zero and every series above the first inherits the noise of everything under it).
+ *
+ * Reach for this only for many overlapping, evolving named categories over time where the
+ * *shape* of ebb and flow per stream is the story (topic volume, tag usage, ticket categories
+ * over months) — not when readers need to read an exact value off an axis, since `themeRiver`
+ * deliberately has none.
+ */
+declare class SceStreamGraphChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Named streams to render, each with its own dated point series */
+    readonly series: _angular_core.InputSignal<readonly StreamGraphSeries[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Whether to show date labels under the flowing axis */
+    readonly showAxisLabels: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStreamGraphChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStreamGraphChartComponent, "sce-stream-graph-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One node of the radial hierarchy. `value` is optional on a node with `children` — ECharts
+ * sums the children's values to size its ring segment when it is omitted. */
+interface SunburstNode {
+    readonly name: string;
+    readonly value?: number;
+    /** Explicit colour for this node; unset descendants inherit a tint of their top-level ancestor's colour. */
+    readonly color?: string;
+    readonly children?: readonly SunburstNode[];
+}
+/**
+ * ECharts sunburst: the same nested `name`/`value`/`children` hierarchy as `sce-treemap-chart`,
+ * drawn as concentric rings instead of nested rectangles — the root is the centre, each ring out
+ * is one depth level, and arc angle encodes `value` within its parent's slice.
+ *
+ * Clicking a ring segment drills in (`nodeClick: 'rootToNode'`, native to ECharts — no Angular
+ * event wiring needed): the clicked node becomes the new centre and its descendants expand to
+ * fill the full circle. Clicking the centre zooms back out one level.
+ *
+ * Choose this over `sce-treemap-chart`/`sce-treemap-drilldown-chart` when the hierarchy's
+ * *relative* proportions at every depth matter more than reading exact rectangle sizes — arcs
+ * compare less precisely than areas, but the radial form reads as "parts of a whole" more
+ * intuitively for shallow-to-medium hierarchies (3-4 levels). Beyond that, inner rings get too
+ * thin to click or label; use the treemap drill-down instead.
+ */
+declare class SceSunburstChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Root-level branches of the hierarchy — each becomes its own coloured wedge. */
+    readonly data: _angular_core.InputSignal<readonly SunburstNode[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Palette cycled across top-level branches that don't set their own `color`. */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** Inner/outer radius as CSS percentage strings — `['0%', ...]` starts the innermost ring at the centre point. */
+    readonly radius: _angular_core.InputSignal<readonly [string, string]>;
+    /** Whether node labels are drawn inside their ring segment. */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Whether clicking a segment drills into it (`rootToNode`) or the chart is display-only. */
+    readonly drillEnabled: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceSunburstChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceSunburstChartComponent, "sce-sunburst-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "drillEnabled": { "alias": "drillEnabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One (date, value) sample for a single named stream — the chart groups points that share `name` into one flowing band. */
+interface ThemeRiverDataPoint {
+    /** ISO-8601 date (or any string ECharts' time axis can parse) */
+    date: string;
+    value: number;
+    /** Stream this point belongs to — becomes one band in the river and one legend entry */
+    name: string;
+}
+/**
+ * ECharts ThemeRiver: several named series flow left-to-right as stacked, wave-shaped bands
+ * along their own time `singleAxis`, each band's thickness at a point in time equal to its
+ * value — built for showing how the RELATIVE proportions of several categories shift over time,
+ * which a stacked `sce-area-chart` also shows but with hard horizontal baselines per band; the
+ * river's organic, vertically-centred bands make simultaneous rises and falls across many
+ * categories easier to scan than stacked-area's shared bottom-up baseline.
+ */
+declare class SceThemeRiverChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Flat list of (date, value, name) samples across every stream */
+    readonly data: _angular_core.InputSignal<readonly ThemeRiverDataPoint[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Colour palette, assigned to streams in the order each stream's name first appears in `data` */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** Whether to show the legend below the chart */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceThemeRiverChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceThemeRiverChartComponent, "sce-theme-river-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One sensitivity variable: its downside (`low`) and upside (`high`) impact from a shared baseline of zero. */
+interface TornadoItem {
+    label: string;
+    low: number;
+    high: number;
+}
+/**
+ * ECharts sensitivity ("tornado") diagram: paired horizontal bars — a downside and an upside —
+ * around a shared zero centre, one row per variable, sorted so the widest swing sits at the top
+ * and the chart narrows toward the bottom. Unlike `sce-diverging-bar-chart` (one signed value per
+ * category), every row here carries TWO values that share a baseline, which is what a sensitivity
+ * or "what changes the outcome most" analysis needs.
+ */
+declare class SceTornadoChartComponent {
+    private readonly el;
+    /** Manual direction override for the category axis side; null auto-detects from computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Sensitivity variables — sorted internally by swing magnitude, not by input order */
+    readonly data: _angular_core.InputSignal<readonly TornadoItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar colour for the downside (`low`) series — the two sides are two categories, not a polarity */
+    readonly lowColor: _angular_core.InputSignal<string>;
+    /** Bar colour for the upside (`high`) series */
+    readonly highColor: _angular_core.InputSignal<string>;
+    /** Legend caption for the downside series */
+    readonly lowLabel: _angular_core.InputSignal<string>;
+    /** Legend caption for the upside series */
+    readonly highLabel: _angular_core.InputSignal<string>;
+    /** Suffix appended to every displayed value (e.g. '%') */
+    readonly valueSuffix: _angular_core.InputSignal<string>;
+    /** Bar thickness in pixels */
+    readonly barHeight: _angular_core.InputSignal<string | number>;
+    /** Whether to render the low/high legend */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    private readonly sortedData;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceTornadoChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceTornadoChartComponent, "sce-tornado-chart", never, { "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "lowColor": { "alias": "lowColor"; "required": false; "isSignal": true; }; "highColor": { "alias": "highColor"; "required": false; "isSignal": true; }; "lowLabel": { "alias": "lowLabel"; "required": false; "isSignal": true; }; "highLabel": { "alias": "highLabel"; "required": false; "isSignal": true; }; "valueSuffix": { "alias": "valueSuffix"; "required": false; "isSignal": true; }; "barHeight": { "alias": "barHeight"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One node of the org-chart-style tree. `collapsed` starts a branch closed under `expandAndCollapse`. */
+interface TreeNode {
+    readonly name: string;
+    readonly value?: number | string;
+    readonly children?: readonly TreeNode[];
+    readonly collapsed?: boolean;
+}
+/**
+ * ECharts tree: a single-root orthogonal hierarchy (org chart, category tree, file tree) with
+ * expandable/collapsible branches — the only one of the five hierarchy charts in this family that
+ * takes one root node instead of a forest of top-level branches.
+ *
+ * RTL is NOT automatic the way it is in `sce-bar-chart`. ECharts' `orient: 'LR'` unconditionally
+ * lays the root on the left with children flowing right — on an Arabic page that reads backwards:
+ * the trunk starts on the wrong side and every branch grows away from the reading direction. This
+ * component auto-detects the host's computed `direction` (like `sce-bar-chart`) and, when RTL,
+ * switches to `orient: 'RL'`, which mirrors the whole layout — root on the right, children flowing
+ * left, matching Arabic reading order. Only position and edge direction mirror this way; label
+ * *text* is not reshaped or reversed by ECharts, it is rendered as given and the browser's own
+ * bidi algorithm handles Arabic glyph shaping within each label. Pass `isRtl` to override the
+ * auto-detected direction explicitly.
+ */
+declare class SceTreeChartComponent {
+    private readonly el;
+    /** The single root node of the tree — `null` renders an empty canvas. */
+    readonly root: _angular_core.InputSignal<TreeNode | null>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Manual direction override; `null` auto-detects from the host's computed style (RTL-first default). */
+    readonly isRtl: _angular_core.InputSignal<boolean | null>;
+    /** Node + edge colour. */
+    readonly color: _angular_core.InputSignal<string>;
+    /** `'curve'` draws rounded connectors; `'polyline'` draws right-angled ones. */
+    readonly edgeShape: _angular_core.InputSignal<"polyline" | "curve">;
+    /** How many levels render expanded on first paint; `-1` expands the whole tree. */
+    readonly initialTreeDepth: _angular_core.InputSignal<number>;
+    /** Whether clicking a branch node toggles its children open/closed. */
+    readonly expandAndCollapse: _angular_core.InputSignal<boolean>;
+    /** Node marker diameter in pixels. */
+    readonly symbolSize: _angular_core.InputSignal<number>;
+    private readonly detectedIsRtl;
+    constructor();
+    private readonly computedIsRtl;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceTreeChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceTreeChartComponent, "sce-tree-chart", never, { "root": { "alias": "root"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "edgeShape": { "alias": "edgeShape"; "required": false; "isSignal": true; }; "initialTreeDepth": { "alias": "initialTreeDepth"; "required": false; "isSignal": true; }; "expandAndCollapse": { "alias": "expandAndCollapse"; "required": false; "isSignal": true; }; "symbolSize": { "alias": "symbolSize"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One branch of the nested hierarchy. `value` is optional on a branch with `children` — ECharts
+ * sums the children's values to size it when it is omitted. */
+interface TreemapDrilldownNode {
+    readonly name: string;
+    readonly value?: number;
+    /** Explicit colour for this node; unset descendants inherit a tint of their top-level ancestor's colour. */
+    readonly color?: string;
+    readonly children?: readonly TreemapDrilldownNode[];
+}
+/**
+ * ECharts treemap with drill-down enabled: only `leafDepth` levels render at once, and clicking a
+ * rectangle zooms into it (`nodeClick: 'zoomToNode'`) while a breadcrumb trail tracks the path
+ * back to the root. Clicking the breadcrumb (or the outermost rectangle) zooms back out.
+ *
+ * This is the opposite trade-off from `sce-treemap-chart`: that component renders every level
+ * simultaneously and disables interaction, which only stays legible for 2-3 levels. This
+ * component hides depth behind clicks, so it scales to hierarchies with 4+ levels or many
+ * siblings per branch — the price is that a user must click to see anything below `leafDepth`.
+ * Prefer the plain treemap when the whole shape needs to be visible at a glance (e.g. a summary
+ * card); prefer this one for an exploratory drill-down view (e.g. a dedicated analytics page).
+ */
+declare class SceTreemapDrilldownChartComponent {
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    /** Root-level branches of the hierarchy — each becomes its own coloured region. */
+    readonly data: _angular_core.InputSignal<readonly TreemapDrilldownNode[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Palette cycled across top-level branches that don't set their own `color`. */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /**
+     * How many levels below the current root render before collapsing into their parent
+     * rectangle. `1` shows only direct children of the root (the most aggressive drill-down);
+     * raise it to reveal more depth per click.
+     */
+    readonly leafDepth: _angular_core.InputSignal<number>;
+    /** Whether the breadcrumb trail (root path) renders above the chart. */
+    readonly showBreadcrumb: _angular_core.InputSignal<boolean>;
+    /** Whether mouse-wheel zoom + drag panning is enabled in addition to click-to-drill. */
+    readonly roam: _angular_core.InputSignal<boolean>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceTreemapDrilldownChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceTreemapDrilldownChartComponent, "sce-treemap-drilldown-chart", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "leafDepth": { "alias": "leafDepth"; "required": false; "isSignal": true; }; "showBreadcrumb": { "alias": "showBreadcrumb"; "required": false; "isSignal": true; }; "roam": { "alias": "roam"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One waterfall step: a signed delta from the running total, or a checkpoint total when `isTotal` is set. */
+interface WaterfallItem {
+    name: string;
+    value: number;
+    /** Draws a bar spanning from zero to the running total instead of a floating delta. The first
+     * item's `value` seeds the baseline when it is marked total; every later total ignores its own
+     * `value` and displays the accumulated sum of everything before it. */
+    isTotal?: boolean;
+}
+/** One resolved waterfall segment: the invisible offset it stacks on, its own bar length, the
+ * running total after this step, and which colour bucket it belongs to. */
+interface WaterfallSegment {
+    name: string;
+    placeholder: number;
+    barValue: number;
+    runningTotal: number;
+    kind: 'increase' | 'decrease' | 'total';
+}
+/**
+ * ECharts running-total waterfall: a stacked bar chart where the lower stack segment is a
+ * transparent placeholder that pushes each visible bar up to (or down from) the previous running
+ * total. Unlike `sce-bar-chart` in stacked mode, segments here are NOT independent quantities that
+ * sum to a whole — each one is a signed step, and the placeholder trick is what makes the steps
+ * float at the right height instead of all starting from zero.
+ */
+declare class SceWaterfallChartComponent {
+    /** Ordered waterfall steps: signed deltas, optionally interspersed with checkpoint totals. */
+    readonly data: _angular_core.InputSignal<readonly WaterfallItem[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar colour for a positive step — increase/decrease is a STATE, so this defaults to the
+     * shared "good" status colour rather than an arbitrary green */
+    readonly increaseColor: _angular_core.InputSignal<string>;
+    /** Bar colour for a negative step — the shared "critical" status colour */
+    readonly decreaseColor: _angular_core.InputSignal<string>;
+    /** Bar colour for a checkpoint total (`isTotal: true`) — a running total is the chart's own
+     * series, not a state, so it takes the primary series colour */
+    readonly totalColor: _angular_core.InputSignal<string>;
+    /** Bar width in pixels */
+    readonly barWidth: _angular_core.InputSignal<string | number>;
+    /** Bar corner radius, in pixels, applied to the visible (non-placeholder) segment */
+    readonly borderRadius: _angular_core.InputSignal<number>;
+    /** Whether to show the dashed grid lines behind the bars */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Whether to draw the dashed connector between the top of one bar and the base of the next */
+    readonly showConnectors: _angular_core.InputSignal<boolean>;
+    /** Whether to print each bar's value above it */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Force a palette mode. Defaults to following the app theme (`data-theme` on <html>). */
+    readonly mode: _angular_core.InputSignal<ChartMode | null>;
+    private readonly appMode;
+    /** The mode actually painted: an explicit `mode` input wins, otherwise the app theme. */
+    protected readonly activeMode: _angular_core.Signal<ChartMode>;
+    private readonly segments;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceWaterfallChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceWaterfallChartComponent, "sce-waterfall-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "increaseColor": { "alias": "increaseColor"; "required": false; "isSignal": true; }; "decreaseColor": { "alias": "decreaseColor"; "required": false; "isSignal": true; }; "totalColor": { "alias": "totalColor"; "required": false; "isSignal": true; }; "barWidth": { "alias": "barWidth"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showConnectors": { "alias": "showConnectors"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** A single outcome: `'win'` renders as a `+1` bar above the axis, `'loss'` as a `-1` bar below it — both the same height, so the chart reads as a streak pattern rather than a magnitude comparison. */
+type WinLossOutcome = 'win' | 'loss';
+/**
+ * Compact axis-less bar sparkline of win/loss outcomes.
+ *
+ * Deliberately has no `mode` input: it paints only the reserved STATUS colours (win/loss), which are
+ * fixed semantics rather than palette slots, and it draws no axis, grid, legend or tooltip ink — so
+ * there is nothing in it that a dark surface would change. — every bar is the same height (a fixed
+ * `+1` above or `-1` below a shared zero baseline), so the chart reads as a streak pattern rather
+ * than a magnitude comparison. Meant to be embedded inline, e.g. inside a `p-table` cell.
+ */
+declare class SceWinLossChartComponent {
+    /** Ordered outcomes, oldest first */
+    readonly results: _angular_core.InputSignal<readonly WinLossOutcome[]>;
+    /** Chart height in pixels */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Chart width in pixels — `null` stretches the chart to the container's inline size */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Bar colour for a win */
+    readonly winColor: _angular_core.InputSignal<string>;
+    /** Bar colour for a loss */
+    readonly lossColor: _angular_core.InputSignal<string>;
+    /** Gap between bars as a percentage of bar width (ECharts `barCategoryGap` syntax) */
+    readonly barGap: _angular_core.InputSignal<string>;
+    readonly chartOptions: _angular_core.Signal<EChartsOption>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceWinLossChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceWinLossChartComponent, "sce-win-loss-chart", never, { "results": { "alias": "results"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "winColor": { "alias": "winColor"; "required": false; "isSignal": true; }; "lossColor": { "alias": "lossColor"; "required": false; "isSignal": true; }; "barGap": { "alias": "barGap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Dashboard overview tile showing a stat value, translated label, icon on a coloured background and an optional trend sparkline. */
+declare class SceOverviewStatCardComponent {
+    readonly value: _angular_core.InputSignal<string | number>;
+    readonly labelKey: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly iconBg: _angular_core.InputSignal<string>;
+    readonly trend: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOverviewStatCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOverviewStatCardComponent, "sce-overview-stat-card", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "iconBg": { "alias": "iconBg"; "required": true; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Small dashboard card linking to a service, showing its icon and a count with a role-aware translated suffix. */
+declare class SceServiceMiniCardComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly count: _angular_core.InputSignal<number>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly link: _angular_core.InputSignal<string | readonly (string | number)[]>;
+    /** i18n key for the count suffix; role-aware (offices offering vs executed projects). */
+    readonly countSuffix: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceServiceMiniCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceServiceMiniCardComponent, "sce-service-mini-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "count": { "alias": "count"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": true; "isSignal": true; }; "countSuffix": { "alias": "countSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** View model of a featured-office card, carrying both the raw `reviewCount` (zero triggers the fallback) and its locale-formatted label. */
+interface FeaturedOffice {
+    id: string;
+    title: string;
+    /** Raw review count. Zero renders the "no reviews yet" fallback. */
+    reviewCount: number;
+    /** Locale-formatted `reviewCount`, prepared by the caller. */
+    reviewCountLabel: string;
+    rating: string;
+    country: string;
+    tabs: string[];
+    href: string;
+}
+/** Dashboard card for a featured engineering office showing rating, review count, country and service tabs; a zero review count renders the "no reviews yet" fallback. */
+declare class SceFeaturedOfficeCardComponent {
+    readonly office: _angular_core.InputSignal<FeaturedOffice>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceFeaturedOfficeCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceFeaturedOfficeCardComponent, "sce-featured-office-card", never, { "office": { "alias": "office"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** View model of a contract-request card; `deadline` and `budget` are pre-formatted display strings and `tags` are raw status labels whose tone is resolved at render time. */
+interface ContractRequestCard {
+    id: string;
+    title: string;
+    requestNumber: string;
+    officeName: string;
+    location: string;
+    deadline: string;
+    budget: string;
+    tags: string[];
+    offersCount?: number;
+}
+/** Dashboard card summarising a contract request (office, location, deadline, budget) with tone-resolved tags, linking to its detail route. */
+declare class SceContractRequestCardComponent {
+    readonly request: _angular_core.InputSignal<ContractRequestCard>;
+    readonly tagTones: _angular_core.Signal<_moatamed_sce_ui_components.BusinessStatusTone[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceContractRequestCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceContractRequestCardComponent, "sce-contract-request-card", never, { "request": { "alias": "request"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One row of the latest-contracts table; `status` is the display label and `statusVariant` the already-resolved `BusinessStatusTone`. */
+interface ContractRow {
+    contractNumber: string;
+    service: string;
+    client: string;
+    endDate: string;
+    status: string;
+    statusVariant: BusinessStatusTone;
 }
 /** Dashboard table of the latest contracts with status tags, showing five skeleton rows while `loading`; the party column header label is caller-supplied. */
 declare class SceLatestContractsTableComponent {
@@ -4236,6 +7188,16 @@ declare class SceGridTableComponent<T extends GridRow = GridRow> {
     readonly expandable: _angular_core.InputSignal<boolean>;
     /** Tracks which row ids are currently expanded. */
     readonly expandedRows: _angular_core.WritableSignal<Record<string, boolean>>;
+    /**
+     * Identity of a row for expansion state.
+     *
+     * This used to read `row['id']` only, while the rest of the component keys on `_id`
+     * (`searchPipeKey` defaults to `'_id'`). A row set that uses `_id` therefore produced
+     * `undefined` for every row, they all collapsed onto the single key `"undefined"`, and
+     * expanding one row expanded them all. Falling back to `_id` keeps existing `id`-keyed
+     * callers on exactly the same path.
+     */
+    private rowKey;
     toggleRow(rowId: string): void;
     protected readonly ColumnsEnum: typeof ColumnsEnum;
     /**
@@ -4561,7 +7523,9 @@ declare class FormInput implements ControlValueAccessor {
  * `InputType` set with the standalone (non-CVA) field components, which the
  * renderer bridges into the `FormGroup` manually.
  */
-type DynamicFieldType = InputType | 'currency' | 'unit' | 'switch' | 'rating' | 'otp';
+type DynamicFieldType = InputType | 'currency' | 'unit' | 'switch' | 'rating' | 'otp' | 'date-field'
+/** Read-only label/value pair — renders no control, value still flows through `initialValue`. */
+ | 'display';
 /**
  * Condition that controls whether a field is shown. Evaluated against the live
  * value of another field. The field is active when ANY provided clause matches.
@@ -4639,6 +7603,14 @@ interface DynamicFieldConfig {
     minDate?: Date | null;
     /** Latest selectable date (date / datetime fields). */
     maxDate?: Date | null;
+    /** Calendar system for `date-field` controls. */
+    calendarSystem?: 'hijri' | 'gregorian';
+    /** Locale for `date-field` controls. */
+    locale?: 'ar' | 'en';
+    /** Display format for `date-field` controls (default `iso`). */
+    dateDisplayFormat?: 'iso' | 'localized';
+    /** Show calendar icon on `date-field` controls (default true). */
+    dateShowIcon?: boolean;
     /** Suffix shown after the value for `unit` fields (e.g. `m²`). */
     unit?: string;
     /** Whether `unit` / numeric fields allow decimals (default true). */
@@ -4653,6 +7625,18 @@ interface DynamicFieldConfig {
     length?: number;
     /** Condition that controls whether this field is shown / included in validation. */
     showWhen?: DynamicShowWhen;
+    /**
+     * Renders the field as a read-only label/value pair instead of an editable control.
+     * Combined with `type: 'display'` for fields that are never editable, or used on an
+     * otherwise-editable field (text/email/select/…) to conditionally lock it based on
+     * another field's value. Read-only fields keep their value in the form but are disabled,
+     * so they are excluded from validation.
+     */
+    readonly?: boolean;
+    /** Condition that forces the field into read-only mode when met (same shape as `showWhen`). */
+    readonlyWhen?: DynamicShowWhen;
+    /** Shows a loading skeleton in place of the control (e.g. async option lists). Disables the control. */
+    loading?: boolean;
     /** Number of grid columns the field spans (defaults to 1). */
     colSpan?: number;
     /** Declarative validators applied to the control. */
@@ -4694,6 +7678,10 @@ interface DynamicFormConfig {
 interface RenderField extends DynamicFieldConfig {
     gridColumn: string;
     isMulti: boolean;
+    /** True when the field must render as a read-only label/value (display type or readonly). */
+    readonly: boolean;
+    /** True when the field should show a loading skeleton in place of its control. */
+    loading: boolean;
 }
 /** A section resolved for rendering: active fields only, with a concrete column count. */
 interface RenderSection {
@@ -4719,6 +7707,9 @@ declare class SceDynamicFormComponent {
     readonly initialValue: _angular_core.InputSignal<Record<string, unknown>>;
     /** External submit flag that forces error display across all fields. */
     readonly submitted: _angular_core.InputSignal<boolean>;
+    /** Literal error messages keyed by field — used for parent-driven validation (e.g. API errors).
+     * Only failing fields are keyed, so a lookup for any other field is `undefined`. */
+    readonly fieldErrorOverrides: _angular_core.InputSignal<Record<string, string | undefined>>;
     /** Emits the raw form value on every change. */
     readonly valueChange: _angular_core.OutputEmitterRef<Record<string, unknown>>;
     /** Emits the raw form value on a valid submit. */
@@ -4754,11 +7745,21 @@ declare class SceDynamicFormComponent {
     readonly renderSections: _angular_core.Signal<RenderSection[]>;
     /** Multi-value selections keyed by field key, kept reactive via `liveValues`. */
     readonly multiValues: _angular_core.Signal<Record<string, string[]>>;
-    /** Translated error message per native field, shown only after a submit attempt. */
+    /**
+     * Error message per field. Parent-provided `fieldErrorOverrides` always win and are shown
+     * immediately (used for API/store-driven errors). Otherwise native field errors are shown
+     * only after a submit attempt, matching the existing inline-error behaviour.
+     */
     readonly fieldErrors: _angular_core.Signal<Record<string, string>>;
     constructor();
     /** Evaluates a field's `showWhen` against the current values (active when no condition). */
     private isActive;
+    /** Evaluates a `showWhen`/`readonlyWhen` condition against the current live values. */
+    private matchesWhen;
+    /** True when a field must render read-only: display type, static `readonly`, or `readonlyWhen` met. */
+    private isReadonly;
+    /** Human-readable value for a read-only / display field, with a `—` fallback for empties. */
+    displayValue(field: DynamicFieldConfig): string;
     private valuesEqual;
     /** Raw value limited to currently-active fields. */
     private pickActiveValue;
@@ -4776,7 +7777,7 @@ declare class SceDynamicFormComponent {
     private bindGroup;
     private translateError;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceDynamicFormComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDynamicFormComponent, "sce-dynamic-form", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "submitted": { "alias": "submitted"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "formSubmit": "formSubmit"; "formInvalid": "formInvalid"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceDynamicFormComponent, "sce-dynamic-form", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "submitted": { "alias": "submitted"; "required": false; "isSignal": true; }; "fieldErrorOverrides": { "alias": "fieldErrorOverrides"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "formSubmit": "formSubmit"; "formInvalid": "formInvalid"; }, never, never, true, never>;
 }
 
 /** Translates a declarative validator spec into Angular `ValidatorFn`s. */
@@ -4887,7 +7888,7 @@ declare class Tabs {
     readonly activeId: _angular_core.InputSignal<string>;
     readonly variant: _angular_core.InputSignal<"default" | "pills" | "underline">;
     readonly size: _angular_core.InputSignal<"small" | "medium" | "large">;
-    readonly justify: _angular_core.InputSignal<"center" | "start" | "end" | "between">;
+    readonly justify: _angular_core.InputSignal<"start" | "end" | "center" | "between">;
     readonly tabChange: _angular_core.OutputEmitterRef<string>;
     readonly underlineStyle: _angular_core.InputSignal<"text" | "full">;
     protected readonly activeValue: _angular_core.WritableSignal<string | number | undefined>;
@@ -5632,6 +8633,13 @@ interface SceResourceListItem {
 /** Titled list of downloadable/linked resources from `items`; `titleKey` defaults to the knowledge-centre resources heading. */
 declare class SceResourcesListComponent {
     readonly items: _angular_core.InputSignal<SceResourceListItem[]>;
+    /**
+     * Defaults to the knowledge-centre resources heading. This was `'knowledgeCenter.resources'`,
+     * a namespace that exists in no i18n bundle — and the one product consumer
+     * (`knowledge-center-topic.html`) does not override it, so the sidebar heading rendered the
+     * literal text `knowledgeCenter.resources`. The real key is `knowledge.resources`, the same
+     * namespace its sibling `titleKey="knowledge.relatedTopics"` already uses.
+     */
     readonly titleKey: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceResourcesListComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceResourcesListComponent, "sce-resources-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "titleKey": { "alias": "titleKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -5837,7 +8845,10 @@ declare class SceFormRichTextComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceFormRichTextComponent, "sce-form-rich-text", never, { "labelTranslateKey": { "alias": "labelTranslateKey"; "required": false; "isSignal": true; }; "editorHeight": { "alias": "editorHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Picks the `<key>Ar`/`<key>En` property of an object matching the active language (falling back to the other language, then to the bare `key`, then to ''); pure, so it does not re-run on a language switch unless the object reference changes. */
+/** Picks the `<key>Ar`/`<key>En` property of an object matching the active language (falling back to the other
+ * language, then to the bare `key`, then to ''). Impure: which field is picked depends on the active language, which a
+ * pure pipe would not observe — the bound object keeps the same reference when the locale flips, so a pure pipe would
+ * keep serving the previous language's field. */
 declare class LocalizedValuePipe implements PipeTransform {
     private readonly translate;
     transform(obj: Record<string, unknown> | null | undefined, key: string, options?: {
@@ -6091,15 +9102,23 @@ declare class SceOfficeProfileHeroComponent {
     readonly updateDataClick: _angular_core.OutputEmitterRef<void>;
     readonly statusChange: _angular_core.OutputEmitterRef<boolean>;
     readonly tabChange: _angular_core.OutputEmitterRef<OfficeProfileTabKey>;
+    /** When a banner URL fails to load, fall back to the empty cover — never image-not-found. */
+    readonly coverFailed: _angular_core.WritableSignal<boolean>;
+    readonly showCoverImage: _angular_core.Signal<boolean>;
+    constructor();
+    onCoverError(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOfficeProfileHeroComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeProfileHeroComponent, "sce-office-profile-hero", never, { "bannerUrl": { "alias": "bannerUrl"; "required": false; "isSignal": true; }; "logoUrl": { "alias": "logoUrl"; "required": false; "isSignal": true; }; "officeName": { "alias": "officeName"; "required": false; "isSignal": true; }; "cityName": { "alias": "cityName"; "required": false; "isSignal": true; }; "rating": { "alias": "rating"; "required": false; "isSignal": true; }; "ratingCount": { "alias": "ratingCount"; "required": false; "isSignal": true; }; "isAvailable": { "alias": "isAvailable"; "required": false; "isSignal": true; }; "verificationStatus": { "alias": "verificationStatus"; "required": false; "isSignal": true; }; "showOfficeStatusSwitch": { "alias": "showOfficeStatusSwitch"; "required": false; "isSignal": true; }; "officeIsActive": { "alias": "officeIsActive"; "required": false; "isSignal": true; }; "officeStatusSaving": { "alias": "officeStatusSaving"; "required": false; "isSignal": true; }; "updateDataChecking": { "alias": "updateDataChecking"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "tabKeys": { "alias": "tabKeys"; "required": false; "isSignal": true; }; "tabLabels": { "alias": "tabLabels"; "required": false; "isSignal": true; }; }, { "updateDataClick": "updateDataClick"; "statusChange": "statusChange"; "tabChange": "tabChange"; }, never, never, true, never>;
 }
 
 /** Row of headline office statistics: years of experience, project count and service count. */
 declare class SceOfficeProfileStatsRowComponent {
+    private readonly translate;
+    private readonly language;
     readonly yearsOfExperience: _angular_core.InputSignal<string>;
     readonly projectsCount: _angular_core.InputSignal<number>;
     readonly servicesCount: _angular_core.InputSignal<number>;
+    readonly metricItems: _angular_core.Signal<OfficeMetricCardItem[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOfficeProfileStatsRowComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeProfileStatsRowComponent, "sce-office-profile-stats-row", never, { "yearsOfExperience": { "alias": "yearsOfExperience"; "required": false; "isSignal": true; }; "projectsCount": { "alias": "projectsCount"; "required": false; "isSignal": true; }; "servicesCount": { "alias": "servicesCount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -6156,11 +9175,12 @@ declare class SceOfficeProfileOfficialTabComponent {
     readonly bankNameDisplay: _angular_core.InputSignal<string>;
     readonly shortNationalAddress: _angular_core.InputSignal<string>;
     readonly ibanNumber: _angular_core.InputSignal<string>;
+    /** Preferred sizes as discrete labels — rendered with `sce-tag` when non-empty. */
     readonly preferredProjectSizesDisplay: _angular_core.InputSignal<string[]>;
+    /** Fallback plain text when `preferredProjectSizesDisplay` is empty. */
     readonly preferredProjectSizesLabel: _angular_core.InputSignal<string>;
-    readonly useTagChips: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOfficeProfileOfficialTabComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeProfileOfficialTabComponent, "sce-office-profile-official-tab", never, { "vatNumber": { "alias": "vatNumber"; "required": false; "isSignal": true; }; "commercialRegistrationNumber": { "alias": "commercialRegistrationNumber"; "required": false; "isSignal": true; }; "cityName": { "alias": "cityName"; "required": false; "isSignal": true; }; "bankNameDisplay": { "alias": "bankNameDisplay"; "required": false; "isSignal": true; }; "shortNationalAddress": { "alias": "shortNationalAddress"; "required": false; "isSignal": true; }; "ibanNumber": { "alias": "ibanNumber"; "required": false; "isSignal": true; }; "preferredProjectSizesDisplay": { "alias": "preferredProjectSizesDisplay"; "required": false; "isSignal": true; }; "preferredProjectSizesLabel": { "alias": "preferredProjectSizesLabel"; "required": false; "isSignal": true; }; "useTagChips": { "alias": "useTagChips"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeProfileOfficialTabComponent, "sce-office-profile-official-tab", never, { "vatNumber": { "alias": "vatNumber"; "required": false; "isSignal": true; }; "commercialRegistrationNumber": { "alias": "commercialRegistrationNumber"; "required": false; "isSignal": true; }; "cityName": { "alias": "cityName"; "required": false; "isSignal": true; }; "bankNameDisplay": { "alias": "bankNameDisplay"; "required": false; "isSignal": true; }; "shortNationalAddress": { "alias": "shortNationalAddress"; "required": false; "isSignal": true; }; "ibanNumber": { "alias": "ibanNumber"; "required": false; "isSignal": true; }; "preferredProjectSizesDisplay": { "alias": "preferredProjectSizesDisplay"; "required": false; "isSignal": true; }; "preferredProjectSizesLabel": { "alias": "preferredProjectSizesLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Collapsible `<details>` panel (open by default) showing the reviewer's rejection note, or an em dash when the note is empty. */
@@ -6605,6 +9625,18 @@ declare class SceAccountUserVerifyDialogComponent {
     readonly nationalIdChange: _angular_core.OutputEmitterRef<string>;
     readonly birthDateChange: _angular_core.OutputEmitterRef<string>;
     readonly submitVerify: _angular_core.OutputEmitterRef<void>;
+    private readonly dynamicForm;
+    readonly initialValue: _angular_core.Signal<{
+        nationalId: string;
+        birthDate: string;
+    }>;
+    readonly formConfig: _angular_core.Signal<DynamicFormConfig>;
+    readonly fieldErrorOverrides: _angular_core.Signal<{
+        birthDate: string;
+    }>;
+    readonly formSubmitted: _angular_core.Signal<boolean>;
+    constructor();
+    onFormValueChange(values: Record<string, unknown>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceAccountUserVerifyDialogComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceAccountUserVerifyDialogComponent, "sce-account-user-verify-dialog", never, { "visible": { "alias": "visible"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": true; "isSignal": true; }; "nationalId": { "alias": "nationalId"; "required": true; "isSignal": true; }; "nationalIdError": { "alias": "nationalIdError"; "required": false; "isSignal": true; }; "birthDate": { "alias": "birthDate"; "required": true; "isSignal": true; }; "birthDateError": { "alias": "birthDateError"; "required": false; "isSignal": true; }; "calendarSystem": { "alias": "calendarSystem"; "required": false; "isSignal": true; }; "submitting": { "alias": "submitting"; "required": false; "isSignal": true; }; "actionError": { "alias": "actionError"; "required": false; "isSignal": true; }; }, { "dialogClose": "dialogClose"; "nationalIdChange": "nationalIdChange"; "birthDateChange": "birthDateChange"; "submitVerify": "submitVerify"; }, never, never, true, never>;
 }
@@ -6625,7 +9657,7 @@ interface AssignRoleOption {
     value: number;
 }
 /** Dialog for assigning an account user roles and contact details; fully controlled — it mutates nothing, emitting every field change and `submitAssign` to the host — and uses `ViewEncapsulation.None`. */
-declare class SceAccountUserAssignDialogComponent {
+declare class SceAccountUserAssignDialogComponent implements OnInit, OnDestroy {
     readonly visible: _angular_core.InputSignal<boolean>;
     readonly locale: _angular_core.InputSignal<"ar" | "en">;
     readonly description: _angular_core.InputSignal<string>;
@@ -6645,6 +9677,30 @@ declare class SceAccountUserAssignDialogComponent {
     readonly roleIdsChange: _angular_core.OutputEmitterRef<number[]>;
     readonly isActiveChange: _angular_core.OutputEmitterRef<boolean>;
     readonly submitAssign: _angular_core.OutputEmitterRef<void>;
+    private readonly dynamicForm;
+    private readonly document;
+    private mediaQuery?;
+    private readonly onMediaChange;
+    /** True when the viewport is ≤ 480 px — drives formConfig columns dynamically. */
+    readonly isMobile: _angular_core.WritableSignal<boolean>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Seed values for every control, read once when the dialog opens. */
+    readonly initialValue: _angular_core.Signal<{
+        nationalId: string;
+        userName: string;
+        birthDate: string;
+        email: string;
+        mobile: string;
+        roleIds: number[];
+        isActive: boolean;
+    }>;
+    /** Surfaces store-driven errors once a submit has been attempted. */
+    readonly submitted: _angular_core.Signal<boolean>;
+    /** Config-driven fields: identity (display) + email/mobile (editable or read-only) + active switch. `roleIds` is rendered separately for design parity. */
+    readonly formConfig: _angular_core.Signal<DynamicFormConfig>;
+    constructor();
+    onFormValueChange(values: Record<string, unknown>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceAccountUserAssignDialogComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceAccountUserAssignDialogComponent, "sce-account-user-assign-dialog", never, { "visible": { "alias": "visible"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": true; "isSignal": true; }; "assignForm": { "alias": "assignForm"; "required": true; "isSignal": true; }; "requireEmail": { "alias": "requireEmail"; "required": false; "isSignal": true; }; "requireMobile": { "alias": "requireMobile"; "required": false; "isSignal": true; }; "emailError": { "alias": "emailError"; "required": false; "isSignal": true; }; "mobileError": { "alias": "mobileError"; "required": false; "isSignal": true; }; "rolesLoading": { "alias": "rolesLoading"; "required": false; "isSignal": true; }; "roleOptions": { "alias": "roleOptions"; "required": false; "isSignal": true; }; "rolesError": { "alias": "rolesError"; "required": false; "isSignal": true; }; "actionError": { "alias": "actionError"; "required": false; "isSignal": true; }; "submitting": { "alias": "submitting"; "required": false; "isSignal": true; }; }, { "dialogClose": "dialogClose"; "emailChange": "emailChange"; "mobileChange": "mobileChange"; "roleIdsChange": "roleIdsChange"; "isActiveChange": "isActiveChange"; "submitAssign": "submitAssign"; }, never, never, true, never>;
 }
@@ -7081,13 +10137,26 @@ declare class SceRadioGroup implements ControlValueAccessor {
     readonly name: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    private readonly destroyRef;
     private readonly options;
     private readonly selectedValue;
     private readonly subscribed;
+    /**
+     * Set by a reactive form through `setDisabledState`. Kept apart from the `disabled` input so a
+     * template-disabled group and a form-disabled one do not overwrite each other.
+     */
+    private readonly formDisabled;
+    /** The group is disabled when either the input or the bound form control says so. */
+    private readonly isGroupDisabled;
     constructor();
     writeValue(value: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
+    /**
+     * Required by `ControlValueAccessor`. Without it, `formControl.disable()` left the group fully
+     * interactive — the control reported itself disabled while the user could still change it.
+     */
+    setDisabledState(isDisabled: boolean): void;
     private handleValueChange;
     private onChange;
     private onTouched;
@@ -8003,5 +11072,5 @@ declare class SceRegisterLayoutComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceRegisterLayoutComponent, "sce-register-layout", never, { "asideTitleKey": { "alias": "asideTitleKey"; "required": false; "isSignal": true; }; "asideDescriptionKey": { "alias": "asideDescriptionKey"; "required": false; "isSignal": true; }; "asideImageSrc": { "alias": "asideImageSrc"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "stepperVariant": { "alias": "stepperVariant"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; }, never, ["*", "[registerFooter]"], true, never>;
 }
 
-export { Alert, Breadcrumb, Card, ColumnsEnum, DYNAMIC_MULTI_TYPES, DYNAMIC_NATIVE_TYPES, DashboardPageHeaderComponent, FileType, FormInput, LocalizedValuePipe, OtpInput, Popup, PopupModalBase, RESULT_STATE_ACTION_META, RESULT_STATE_PRESETS, SCE_MIRROR_LABEL_AS_PLACEHOLDER, SceAccordionComponent, SceAccountSwitcherComponent, SceAccountUserAssignDialogComponent, SceAccountUserDetailHeaderComponent, SceAccountUserEditDialogComponent, SceAccountUserPermissionsSectionComponent, SceAccountUserPersonalSectionComponent, SceAccountUserVerifyDialogComponent, SceAccountUsersTabsBarComponent, SceActionDialogComponent, SceApiErrorStateComponent, SceAreaChartComponent, SceArticleDetailComponent, SceArticleLayoutComponent, SceArticlePageComponent, SceArticleSidebarComponent, SceArticleTagsListComponent, SceAsyncPageGateComponent, SceAttachmentsListComponent, SceAuthLayoutComponent, SceBarChartComponent, SceBasicCardComponent, SceBidiIsolate, SceBrandLoaderComponent, SceBulletListComponent, SceBusinessStatusTagComponent, SceButton, SceButtonWithSelectionCount, SceCaptchaInput, SceCardRadioGroupComponent, SceCardsListPageComponent, SceCardsStatisticsComponent, SceCategoryTile, SceChartLegendComponent, SceCheckItem, SceCheckbox, SceChoiceCard, SceCircularProgress, SceConfirmDialogComponent, SceConfirmDialogDemoComponent, SceContactFormPanelComponent, SceContactInfoPanelComponent, SceContentBlockComponent, SceContractQrCodeComponent, SceContractRequestCardComponent, SceCopyButtonComponent, SceCopyRight, SceCriteriaSectionComponent, SceCurrencyInputComponent, SceCustomColsDirective, SceDashboardAccountRoleIconComponent, SceDashboardFeatureComingSoonComponent, SceDashboardLayoutComponent, SceDashboardTableFiltersComponent, SceDataRequestComparisonTableComponent, SceDataRequestCurrentSummaryComponent, SceDataRequestHeaderCardComponent, SceDataRequestMediaComparisonComponent, SceDataRequestProjectChangesComponent, SceDataRequestRejectionPanelComponent, SceDateFieldComponent, SceDatePickerModalComponent, SceDetailHeaderComponent, SceDialogShellComponent, SceDialogShellDemoComponent, SceDivider, SceDonutChartComponent, SceDynamicFormComponent, SceEmptyStateComponent, SceEngineeringOfficeCardComponent, SceEngineeringOfficeCardSkeletonComponent, SceEngineeringOfficeVerificationBadgeComponent, SceEntityInfoCardComponent, SceEntityProfileEditFormComponent, SceEntitySummaryCardComponent, SceEntityTypeCard, SceExportPdfButton, SceExportPdfContainerComponent, SceFaqItemCard, SceFeaturedOfficeCardComponent, SceFeaturedOfficeCardSkeletonComponent, SceFeedbackSectionComponent, SceFieldComponent, SceFileUploadZoneComponent, SceFileUploadZoneDemoComponent, SceFileViewerComponent, SceFileViewerDirective, SceFileViewerService, SceFilterCalendarComponent, SceFilterCalendarRangeComponent, SceFilterDropdownComponent, SceFilterFieldIconComponent, SceFilterFormComponent, SceFormCheckboxRadio, SceFormDialogComponent, SceFormDialogSectionComponent, SceFormError, SceFormFieldsSkeletonComponent, SceFormHint, SceFormLabel, SceFormPageLayoutComponent, SceFormRichTextComponent, SceGaugeChartComponent, SceGearsLoaderComponent, SceGenericTableComponent, SceGenericTableDemoComponent, SceGeoLocationFieldComponent, SceGlobalLoadingBarComponent, SceGoogleMapsLocationPickerComponent, SceGridExpansionDirective, SceGridTableComponent, SceGuidedTourComponent, SceHorizontalBarChartComponent, SceHorizontalWizardStepperComponent, SceIcon, SceIconCard, SceImageGallerySwapperComponent, SceImagePickerComponent, SceInfoFieldCardComponent, SceInfoFieldsGridComponent, SceInfoFieldsSkeletonComponent, SceInfoRowComponent, SceInlineApiErrorComponent, SceInquiryRequestCardComponent, SceInternalUserFormFieldsComponent, SceInternalUserPermissionsSectionComponent, SceInternalUserVerifySectionComponent, SceKnowledgeCenterCategoryGridComponent, SceLandingHeroHeaderComponent, SceLandingMobileMenuComponent, SceLandingNavComponent, SceLangToggleComponent, SceLatestContractsTableComponent, SceLibraryAccessDeniedComponent, SceLineChartComponent, SceListPageLayoutComponent, SceLocationPickerDialogComponent, SceLoginAccountSelectStepComponent, SceLoginCompleteDataStepComponent, SceLoginCredentialsStepComponent, SceLoginErrorStepComponent, SceLoginOtpStepComponent, SceLoginUserTypeStepComponent, SceLogoutModalComponent, SceModalHostComponent, SceMultiSegmentBarChartComponent, SceMultiSegmentGaugeComponent, SceMultiSelectFieldComponent, SceNavCard, SceNavCardsListComponent, SceNewsletterSubscriptionDialogComponent, SceNotificationListComponent, SceNotificationListSkeletonComponent, SceNotificationTypeBadgeComponent, SceOfficeBrandLogoComponent, SceOfficeDetailHeroBodyComponent, SceOfficeDetailLoadingStateComponent, SceOfficeDetailNotFoundComponent, SceOfficeDetailOverviewPanelComponent, SceOfficeDetailProjectsPanelComponent, SceOfficeDetailReviewsPanelComponent, SceOfficeDetailTabsBarComponent, SceOfficeDetailsSkeletonComponent, SceOfficeLocationMapComponent, SceOfficeMetricCardComponent, SceOfficeMetricCardsRowComponent, SceOfficeProfileContactTabComponent, SceOfficeProfileEditBioSectionComponent, SceOfficeProfileEditContactSectionComponent, SceOfficeProfileEditMediaSectionComponent, SceOfficeProfileEditOfficialSectionComponent, SceOfficeProfileEditProjectsSectionComponent, SceOfficeProfileHeroComponent, SceOfficeProfileOfficialTabComponent, SceOfficeProfileOverviewTabComponent, SceOfficeProfileProjectDeleteDialogComponent, SceOfficeProfileProjectEditorDialogComponent, SceOfficeProfileProjectsTabComponent, SceOfficeProfileStatsRowComponent, SceOfficeProfileSubmitResultComponent, SceOfficeProjectGalleryComponent, SceOfficeProjectsSkeletonComponent, SceOfficesFiltersSidebarComponent, SceOfficesGridPanelComponent, SceOfficesMapPanelComponent, SceOfficesViewToggleComponent, SceOfflineBannerComponent, SceOptionGroup, SceOsmLeafletMapComponent, SceOsmLocationPickerComponent, SceOsmOfficesMapComponent, SceOverviewStatCardComponent, SceOverviewStatSparklineComponent, ScePackageFeatureCard, ScePageErrorComponent, ScePageHeaderComponent, ScePaginatorComponent, ScePaginatorDemoComponent, ScePasswordFieldComponent, ScePendingUpdateBannerComponent, ScePhoneNumberComponent, ScePieChartComponent, ScePlatformSettingsFieldsComponent, SceProfileHeroComponent, SceProfileHeroSkeletonComponent, SceProfileInfoSectionComponent, SceProfilePhotoEditDialogComponent, SceProfilePhotoSectionComponent, SceProgressBar, SceProgressCardComponent, ScePublicLegalProseComponent, SceQuickFilterBarComponent, SceRadioButtonComponent, SceRadioGroup, SceRadioGroupOption, SceRadioOptionCard, SceRangeBar, SceRegisterLayoutComponent, SceRelatedCardsListComponent, SceRequestCardSkeletonComponent, SceRequestDetailsCardComponent, SceRequestHeaderComponent, SceResourcesListComponent, SceResultStateComponent, SceReviewFieldTablePanelComponent, SceRingChartComponent, SceRingLoaderComponent, SceRowActionIconComponent, SceSaveFilterPopupComponent, SceScaleIndicatorComponent, SceScrollToTopButtonComponent, SceSearchableUsersListComponent, SceSelectFieldComponent, SceSelectableListWithSearchComponent, SceSelectionButton, SceServiceCardComponent, SceServiceCardStartButtonComponent, SceServiceDetailSkeletonComponent, SceServiceMiniCardComponent, SceServiceMiniCardSkeletonComponent, SceServicesTopFiltersComponent, SceSettingsLayoutComponent, SceSidebarComponent, SceSkeleton, SceSpinner, SceStackedDistributionChartComponent, SceStamp, SceStarRatingInputComponent, SceStatCardSkeletonComponent, SceStatGaugeComponent, SceStatRingComponent, SceStatsAnalyticsCardComponent, SceStatusPageComponent, SceStoreLocationsComponent, SceSummaryCardComponent, SceSupportContactCard, SceSupportThreadComponent, SceSwitchComponent, SceTabPanel, SceTableSkeletonComponent, SceTagComponent, SceTextFieldComponent, SceTextareaFieldComponent, SceThemeSwitcherComponent, SceThemeToggleButtonComponent, SceTimelineComponent, SceTooltip, SceUnitInputComponent, SceUnitInputFieldComponent, SceUserDropdownPickerComponent, SceUserVerifySectionPanelComponent, SceVerticalStepperComponent, SceVideoPlayerComponent, Stepper, Tabs, TabsInkbarRtlDirective, addHijriMonths, buildCalendarGrid, buildDynamicFormGroup, buildFieldValidators, detectFileType, getHijriYmdFromDate, isDataUri, mimeFromDataUri, parseValueToDate, resolveBusinessStatusPresentation, resolveBusinessStatusTone, scheduleLeafletResize, toBusinessStatusTableCell, toGregorianValue, toHijriValue };
-export type { AccordionItem, AccountSwitcherOption, AccountUserAssignForm, AccountUserEditReadOnlyField, AccountUserEditRoleOption, AccountUsersTab, ActionDialogField, ActionDialogVariant, AppDateLocale, AssignRoleOption, BarSeriesData, BasicCardLayout, BidiIsolateDir, BreadcrumbItem, BusinessStatusPresentation, BusinessStatusTone, CalendarGrid, CalendarSystem, CardRadioOption, ChartLegendItem, ChartLineSeriesData, ChartSeriesItem, ChartTooltipData, ConfirmDialogVariant, ConfirmPayload, ConfirmReasonField, ContractRequestCard, ContractRow, DashboardFilterField, DashboardFilterFieldOption, DashboardNotificationTypeVariant, DashboardRole, DataRequestComparisonRow, DataRequestMediaVariant, DateRangeValue, DetailBreadcrumbItem, DetailHeaderAction, DialogSize, DynamicFieldConfig, DynamicFieldType, DynamicFieldValidators, DynamicFieldValue, DynamicFormConfig, DynamicFormSection, DynamicShowWhen, EChartTooltipParam, EmptyStateTone, EntityInfoCardBadgeTone, FeaturedOffice, FieldSize, FileSource, FileSourceBase64, FileSourceBlob, FileSourceUrl, FileTypeInput, FileUploadExistingItem, FileUploadZoneStrings, FileViewerData, FilterDateRangeValue, FilterDropdownOption, FilterFieldConfig, FilterFieldOption, FilterFieldType, FilterFormConfig, FormDialogSecondaryAction, FormDialogVariant, GeoLocationValue, GoogleMapsLocationValue, GridAction, GridActionType, GridColumn, GridColumnAction, GridMenuAction, GridMenuItem, GridPageEvent, GridRow, GridSortEvent, GuestProjectStatus, GuidedTourStep, HorizontalBarItem, IconSize, ImageGallerySwapperItem, InputFilter, InternalUserFormFieldsMode, InternalUserRoleOption, KnowledgeCategoryItem, LandingBreadcrumbItem, LandingNavItem, LoaderSize, LoaderVariant, LocationPickerValue, LoginAccountOptionView, LoginUserTypeCard, BreadcrumbItem$1 as MoleculeBreadcrumbItem, MultiSegmentBarItem, NewsletterSubscriptionFormValues, TabItem as OfficeDetailTabItem, OfficeEditProjectItem, OfficeGridViewMode, OfficeMetricCardItem, OfficeProfileDisplayProject, OfficeProfileTabKey, OfficeProject, OfficeReview, OfficeSizeFilter, OfficeSizeOption, OfficeSortMode, OfficeSortOption, OfficeTabKey, OfficeViewMode, OsmMapMarker, OverlayLineSeries, ProfileBankOption, ProfileInfoViewData, ProfileViewField, ProfileViewSection, ProgressConfig, ProjectChangeDisplayItem, ProjectChangeDisplayMetric, ProjectChangeDisplayType, PsSettingField, PsSettingForceMajeureDurationsValue, QuickFilterTag as QuickFilterBarTag, QuickFilterTag$1 as QuickFilterTag, RatingDistributionLine, RequestHeaderMetaItem, RequestStatusPresentation, RestrictInput, ResultStateAction, ResultStatePreset, ResultStateStatus, ReviewFieldItem, RingChartLegendItem, SaveFilterMode, ScaleIndicatorLabels, SceArticleTagItem, SceArticleTagVariant, SceAttachmentListItem, SceButtonSize, SceButtonVariant, SceChoiceCardTone, SceCriteriaItem, SceCriteriaObservation, SceCriteriaSectionData, SceCriteriaStatus, SceEngineeringOfficeCardModel, SceEntitySummarySector, SceFaqItemCardForm, SceFieldOption, SceFormCheckboxRadioType, SceIconCardTone, SceImagePickerError, SceInquiryRequest, SceInquiryRequestStatus, SceNavBadgeVariant, SceNavCardItem, SceNavChildItem, SceNavItem, SceNavSection, SceNotificationAction, SceNotificationFilter, SceNotificationItem, SceNotificationTone, SceOptionItem, SceOsmOfficeMapPoint, SceRadioOption, SceRangeBarValue, SceRelatedCardItem, SceResourceListItem, SceSelectOption, SceSidebarBrand, SceSidebarRailAction, SceSupportResponderRole, SceSupportThreadAttachment, SceSupportThreadFeedback, SceSupportThreadReply, SceSupportThreadResponse, SceSupportThreadStatus, SceTableColumn, SceTablePagination, SceTableRow, SceTableRowActions, SceTableSkeletonLayout, SceTableSort, SceTableStatusCell, SceTableSwitchCell, SceTagSize, SceTagVariant, SceTextFieldValidationMode, SceUserDropdownItem, SearchableUserListItem, SelectOption, SelectableListItem, SelectionMode, ServicesTopFiltersChange, SkeletonAnimation, SkeletonVariant, StackedDistributionChartItem, StatGaugeRow, StatusConfig, StatusPageVariant, StatusVariant, StepItem$1 as StepItem, StepItem as StepperStepItem, TabItem$1 as TabItem, TimelineItem, TimelineSegment, TooltipPosition, UserDetailBadge, UserDetailField, UserDetailStatusTag, VerifiedUserData, VerifyPayload, VideoCaption, VideoPreload, VideoSource };
+export { ANIMATION, Alert, BAR_RADIUS_HORIZONTAL, BAR_RADIUS_VERTICAL, Breadcrumb, CHART_DIVERGING, CHART_INK, CHART_PALETTE_DARK, CHART_PALETTE_LIGHT, CHART_SEQUENTIAL, CHART_STATUS, Card, ColumnsEnum, DYNAMIC_MULTI_TYPES, DYNAMIC_NATIVE_TYPES, DashboardPageHeaderComponent, FileType, FormInput, LocalizedValuePipe, MARK_SEPARATOR, OtpInput, Popup, PopupModalBase, RESULT_STATE_ACTION_META, RESULT_STATE_PRESETS, SCE_MIRROR_LABEL_AS_PLACEHOLDER, SceAccordionComponent, SceAccountSwitcherComponent, SceAccountUserAssignDialogComponent, SceAccountUserDetailHeaderComponent, SceAccountUserEditDialogComponent, SceAccountUserPermissionsSectionComponent, SceAccountUserPersonalSectionComponent, SceAccountUserVerifyDialogComponent, SceAccountUsersTabsBarComponent, SceActionDialogComponent, SceApiErrorStateComponent, SceArcDiagramChartComponent, SceAreaChartComponent, SceArticleDetailComponent, SceArticleLayoutComponent, SceArticlePageComponent, SceArticleSidebarComponent, SceArticleTagsListComponent, SceAsyncPageGateComponent, SceAttachmentsListComponent, SceAuthLayoutComponent, SceBarChartComponent, SceBasicCardComponent, SceBidiIsolate, SceBoxplotChartComponent, SceBrandLoaderComponent, SceBubbleChartComponent, SceBulletChartComponent, SceBulletListComponent, SceBumpChartComponent, SceBusinessStatusTagComponent, SceButton, SceButtonWithSelectionCount, SceCalendarHeatmapChartComponent, SceCandlestickChartComponent, SceCaptchaInput, SceCardRadioGroupComponent, SceCardsListPageComponent, SceCardsStatisticsComponent, SceCategoryTile, SceChartDataTableComponent, SceChartLegendComponent, SceCheckItem, SceCheckbox, SceChoiceCard, SceChordChartComponent, SceCircularProgress, SceComboDualAxisChartComponent, SceConfirmDialogComponent, SceConfirmDialogDemoComponent, SceContactFormPanelComponent, SceContactInfoPanelComponent, SceContentBlockComponent, SceContractQrCodeComponent, SceContractRequestCardComponent, SceCopyButtonComponent, SceCopyRight, SceCorrelationMatrixChartComponent, SceCriteriaSectionComponent, SceCurrencyInputComponent, SceCustomColsDirective, SceDashboardAccountRoleIconComponent, SceDashboardFeatureComingSoonComponent, SceDashboardLayoutComponent, SceDashboardTableFiltersComponent, SceDataRequestComparisonTableComponent, SceDataRequestCurrentSummaryComponent, SceDataRequestHeaderCardComponent, SceDataRequestMediaComparisonComponent, SceDataRequestProjectChangesComponent, SceDataRequestRejectionPanelComponent, SceDateFieldComponent, SceDatePickerModalComponent, SceDetailHeaderComponent, SceDialogShellComponent, SceDialogShellDemoComponent, SceDivergingBarChartComponent, SceDivider, SceDonutChartComponent, SceDumbbellChartComponent, SceDynamicFormComponent, SceEffectScatterChartComponent, SceEmptyStateComponent, SceEngineeringOfficeCardComponent, SceEngineeringOfficeCardSkeletonComponent, SceEngineeringOfficeVerificationBadgeComponent, SceEntityInfoCardComponent, SceEntityProfileEditFormComponent, SceEntitySummaryCardComponent, SceEntityTypeCard, SceExportPdfButton, SceExportPdfContainerComponent, SceFaqItemCard, SceFeaturedOfficeCardComponent, SceFeaturedOfficeCardSkeletonComponent, SceFeedbackSectionComponent, SceFieldComponent, SceFileUploadZoneComponent, SceFileUploadZoneDemoComponent, SceFileViewerComponent, SceFileViewerDirective, SceFileViewerService, SceFilterCalendarComponent, SceFilterCalendarRangeComponent, SceFilterDropdownComponent, SceFilterFieldIconComponent, SceFilterFormComponent, SceFlowMapChartComponent, SceForceGraphChartComponent, SceFormCheckboxRadio, SceFormDialogComponent, SceFormDialogSectionComponent, SceFormError, SceFormFieldsSkeletonComponent, SceFormHint, SceFormLabel, SceFormPageLayoutComponent, SceFormRichTextComponent, SceFunnelChartComponent, SceGanttChartComponent, SceGaugeChartComponent, SceGearsLoaderComponent, SceGenericTableComponent, SceGenericTableDemoComponent, SceGeoLocationFieldComponent, SceGlobalLoadingBarComponent, SceGoogleMapsLocationPickerComponent, SceGridExpansionDirective, SceGridTableComponent, SceGuidedTourComponent, SceHeatmapChartComponent, SceHistogramChartComponent, SceHorizontalBarChartComponent, SceHorizontalWizardStepperComponent, SceIcicleChartComponent, SceIcon, SceIconCard, SceImageGallerySwapperComponent, SceImagePickerComponent, SceInfoFieldCardComponent, SceInfoFieldsGridComponent, SceInfoFieldsSkeletonComponent, SceInfoRowComponent, SceInlineApiErrorComponent, SceInquiryRequestCardComponent, SceInternalUserFormFieldsComponent, SceInternalUserPermissionsSectionComponent, SceInternalUserVerifySectionComponent, SceKnowledgeCenterCategoryGridComponent, SceLandingHeroHeaderComponent, SceLandingMobileMenuComponent, SceLandingNavComponent, SceLangToggleComponent, SceLatestContractsTableComponent, SceLibraryAccessDeniedComponent, SceLineChartComponent, SceListPageLayoutComponent, SceLocationPickerDialogComponent, SceLoginAccountSelectStepComponent, SceLoginCompleteDataStepComponent, SceLoginCredentialsStepComponent, SceLoginErrorStepComponent, SceLoginOtpStepComponent, SceLoginUserTypeStepComponent, SceLogoutModalComponent, SceLollipopChartComponent, SceModalHostComponent, SceMultiSegmentBarChartComponent, SceMultiSegmentGaugeComponent, SceMultiSelectFieldComponent, SceNavCard, SceNavCardsListComponent, SceNetworkGraphChartComponent, SceNewsletterSubscriptionDialogComponent, SceNotificationListComponent, SceNotificationListSkeletonComponent, SceNotificationTypeBadgeComponent, SceOfficeBrandLogoComponent, SceOfficeDetailHeroBodyComponent, SceOfficeDetailLoadingStateComponent, SceOfficeDetailNotFoundComponent, SceOfficeDetailOverviewPanelComponent, SceOfficeDetailProjectsPanelComponent, SceOfficeDetailReviewsPanelComponent, SceOfficeDetailTabsBarComponent, SceOfficeDetailsSkeletonComponent, SceOfficeLocationMapComponent, SceOfficeMetricCardComponent, SceOfficeMetricCardsRowComponent, SceOfficeProfileContactTabComponent, SceOfficeProfileEditBioSectionComponent, SceOfficeProfileEditContactSectionComponent, SceOfficeProfileEditMediaSectionComponent, SceOfficeProfileEditOfficialSectionComponent, SceOfficeProfileEditProjectsSectionComponent, SceOfficeProfileHeroComponent, SceOfficeProfileOfficialTabComponent, SceOfficeProfileOverviewTabComponent, SceOfficeProfileProjectDeleteDialogComponent, SceOfficeProfileProjectEditorDialogComponent, SceOfficeProfileProjectsTabComponent, SceOfficeProfileStatsRowComponent, SceOfficeProfileSubmitResultComponent, SceOfficeProjectGalleryComponent, SceOfficeProjectsSkeletonComponent, SceOfficesFiltersSidebarComponent, SceOfficesGridPanelComponent, SceOfficesMapPanelComponent, SceOfficesViewToggleComponent, SceOfflineBannerComponent, SceOhlcVolumeChartComponent, SceOptionGroup, SceOsmLeafletMapComponent, SceOsmLocationPickerComponent, SceOsmOfficesMapComponent, SceOverviewStatCardComponent, SceOverviewStatSparklineComponent, ScePackageFeatureCard, ScePageErrorComponent, ScePageHeaderComponent, ScePaginatorComponent, ScePaginatorDemoComponent, SceParallelCoordinatesChartComponent, SceParetoChartComponent, ScePasswordFieldComponent, ScePendingUpdateBannerComponent, ScePhoneNumberComponent, ScePictorialBarChartComponent, ScePieChartComponent, ScePlatformSettingsFieldsComponent, ScePolarBarChartComponent, ScePopulationPyramidChartComponent, SceProfileHeroComponent, SceProfileHeroSkeletonComponent, SceProfileInfoSectionComponent, SceProfilePhotoEditDialogComponent, SceProfilePhotoSectionComponent, SceProgressBar, SceProgressCardComponent, ScePublicLegalProseComponent, ScePunchCardChartComponent, ScePyramidChartComponent, SceQuadrantChartComponent, SceQuickFilterBarComponent, SceRadarChartComponent, SceRadarComparisonChartComponent, SceRadialBarChartComponent, SceRadioButtonComponent, SceRadioGroup, SceRadioGroupOption, SceRadioOptionCard, SceRangeAreaChartComponent, SceRangeBar, SceRegionMapChartComponent, SceRegisterLayoutComponent, SceRelatedCardsListComponent, SceRequestCardSkeletonComponent, SceRequestDetailsCardComponent, SceRequestHeaderComponent, SceResourcesListComponent, SceResultStateComponent, SceReviewFieldTablePanelComponent, SceRingChartComponent, SceRingLoaderComponent, SceRoseChartComponent, SceRowActionIconComponent, SceSankeyChartComponent, SceSaveFilterPopupComponent, SceScaleIndicatorComponent, SceScatterChartComponent, SceScatterRegressionChartComponent, SceScrollToTopButtonComponent, SceSearchableUsersListComponent, SceSelectFieldComponent, SceSelectableListWithSearchComponent, SceSelectionButton, SceServiceCardComponent, SceServiceCardStartButtonComponent, SceServiceDetailSkeletonComponent, SceServiceMiniCardComponent, SceServiceMiniCardSkeletonComponent, SceServicesTopFiltersComponent, SceSettingsLayoutComponent, SceSidebarComponent, SceSkeleton, SceSlopeChartComponent, SceSparklineComponent, SceSpinner, SceStackedAreaChartComponent, SceStackedDistributionChartComponent, SceStamp, SceStarRatingInputComponent, SceStatCardSkeletonComponent, SceStatGaugeComponent, SceStatRingComponent, SceStatsAnalyticsCardComponent, SceStatusPageComponent, SceStepLineChartComponent, SceStoreLocationsComponent, SceStreamGraphChartComponent, SceSummaryCardComponent, SceSunburstChartComponent, SceSupportContactCard, SceSupportThreadComponent, SceSwitchComponent, SceTabPanel, SceTableSkeletonComponent, SceTagComponent, SceTextFieldComponent, SceTextareaFieldComponent, SceThemeRiverChartComponent, SceThemeSwitcherComponent, SceThemeToggleButtonComponent, SceTimelineComponent, SceTooltip, SceTornadoChartComponent, SceTreeChartComponent, SceTreemapChartComponent, SceTreemapDrilldownChartComponent, SceUnitInputComponent, SceUnitInputFieldComponent, SceUserDropdownPickerComponent, SceUserVerifySectionPanelComponent, SceVerticalStepperComponent, SceVideoPlayerComponent, SceWaterfallChartComponent, SceWinLossChartComponent, Stepper, Tabs, TabsInkbarRtlDirective, addHijriMonths, axisBase, buildCalendarGrid, buildDynamicFormGroup, buildFieldValidators, chartBase, detectFileType, getHijriYmdFromDate, injectChartMode, isDataUri, legendBase, mimeFromDataUri, palette, parseValueToDate, resolveBusinessStatusPresentation, resolveBusinessStatusTone, scheduleLeafletResize, seriesColor, toBusinessStatusTableCell, toGregorianValue, toHijriValue, tooltipBase, verticalFade };
+export type { AccordionItem, AccountSwitcherOption, AccountUserAssignForm, AccountUserEditReadOnlyField, AccountUserEditRoleOption, AccountUsersTab, ActionDialogField, ActionDialogVariant, AppDateLocale, ArcDiagramLink, ArcDiagramNode, AssignRoleOption, AsyncPageGateSkeletonVariant, BarSeriesData, BasicCardLayout, BidiIsolateDir, BoxplotSummary, BreadcrumbItem, BubbleSeriesData, BulletItem, BumpChartSeries, BusinessStatusPresentation, BusinessStatusTone, CalendarGrid, CalendarHeatmapEntry, CalendarSystem, CardRadioOption, ChartLegendItem, ChartLineSeriesData, ChartMode, ChartSeriesItem, ChartTooltipData, ChordLink, ChordNode, ComboBarSeriesData, ComboLineSeriesData, ConfirmDialogVariant, ConfirmPayload, ConfirmReasonField, ContractRequestCard, ContractRow, DashboardFilterField, DashboardFilterFieldOption, DashboardNotificationTypeVariant, DashboardRole, DataRequestComparisonRow, DataRequestMediaVariant, DateRangeValue, DetailBreadcrumbItem, DetailHeaderAction, DialogSize, DivergingBarItem, DumbbellItem, DynamicFieldConfig, DynamicFieldType, DynamicFieldValidators, DynamicFieldValue, DynamicFormConfig, DynamicFormSection, DynamicShowWhen, EChartTooltipParam, EffectScatterPoint, EmptyStateTone, EntityInfoCardBadgeTone, FeaturedOffice, FieldSize, FileSource, FileSourceBase64, FileSourceBlob, FileSourceUrl, FileTypeInput, FileUploadExistingItem, FileUploadZoneStrings, FileViewerData, FilterDateRangeValue, FilterDropdownOption, FilterFieldConfig, FilterFieldOption, FilterFieldType, FilterFormConfig, FlowMapGeoJson, FlowMapRoute, ForceGraphCategory, ForceGraphLink, ForceGraphNode, FormDialogSecondaryAction, FormDialogVariant, FunnelStage, GanttTask, GeoLocationValue, GoogleMapsLocationValue, GridAction, GridActionType, GridColumn, GridColumnAction, GridMenuAction, GridMenuItem, GridPageEvent, GridRow, GridSortEvent, GuestProjectStatus, GuidedTourStep, HeatmapCell, HistogramBins, HorizontalBarItem, IcicleNode, IconSize, ImageGallerySwapperItem, InputFilter, InternalUserFormFieldsMode, InternalUserRoleOption, KnowledgeCategoryItem, LandingBreadcrumbItem, LandingNavItem, LinearRegressionResult, LoaderSize, LoaderVariant, LocationPickerValue, LoginAccountOptionView, LoginUserTypeCard, LollipopItem, BreadcrumbItem$1 as MoleculeBreadcrumbItem, MultiSegmentBarItem, NetworkGraphCategory, NetworkGraphLink, NetworkGraphNode, NewsletterSubscriptionFormValues, TabItem as OfficeDetailTabItem, OfficeEditProjectItem, OfficeGridViewMode, OfficeMetricCardItem, OfficeProfileDisplayProject, OfficeProfileTabKey, OfficeProject, OfficeReview, OfficeSizeFilter, OfficeSizeOption, OfficeSortMode, OfficeSortOption, OfficeTabKey, OfficeViewMode, OhlcDatum$1 as OhlcDatum, OsmMapMarker, OverlayLineSeries, ParallelAxisDef, ParallelRecord, ParetoDatum, PictorialBarItem, PolarBarSeriesItem, PopulationPyramidBand, ProfileBankOption, ProfileInfoViewData, ProfileViewField, ProfileViewSection, ProgressConfig, ProjectChangeDisplayItem, ProjectChangeDisplayMetric, ProjectChangeDisplayType, PsSettingField, PsSettingForceMajeureDurationsValue, PunchCardCell, PyramidLevel, QuadrantSeriesData, QuickFilterTag as QuickFilterBarTag, QuickFilterTag$1 as QuickFilterTag, RadarComparisonEntity, RadarIndicator, RadarSeriesData, RadialBarSeriesItem, RatingDistributionLine, RegionMapDatum, RegionMapGeoJson, RegressionPoint, RequestHeaderMetaItem, RequestStatusPresentation, RestrictInput, ResultStateAction, ResultStatePreset, ResultStateStatus, ReviewFieldItem, RingChartLegendItem, SankeyLink, SankeyNode, SaveFilterMode, ScaleIndicatorLabels, ScatterSeriesData, SceArticleTagItem, SceArticleTagVariant, SceAttachmentListItem, SceButtonSize, SceButtonVariant, SceChoiceCardTone, SceCriteriaItem, SceCriteriaObservation, SceCriteriaSectionData, SceCriteriaStatus, SceEngineeringOfficeCardModel, SceEntitySummarySector, SceFaqItemCardForm, SceFieldOption, SceFormCheckboxRadioType, SceIconCardTone, SceImagePickerError, SceInquiryRequest, SceInquiryRequestStatus, SceNavBadgeVariant, SceNavCardItem, SceNavChildItem, SceNavItem, SceNavSection, SceNotificationAction, SceNotificationFilter, SceNotificationItem, SceNotificationTone, SceOptionItem, SceOsmOfficeMapPoint, SceRadioOption, SceRangeBarValue, SceRelatedCardItem, SceResourceListItem, SceSelectOption, SceSidebarBrand, SceSidebarRailAction, SceSupportResponderRole, SceSupportThreadAttachment, SceSupportThreadFeedback, SceSupportThreadReply, SceSupportThreadResponse, SceSupportThreadStatus, SceTableColumn, SceTablePagination, SceTableRow, SceTableRowActions, SceTableSkeletonLayout, SceTableSort, SceTableStatusCell, SceTableSwitchCell, SceTagSize, SceTagVariant, SceTextFieldInlineAlign, SceTextFieldInlineLayout, SceTextFieldValidationMode, SceUserDropdownItem, SearchableUserListItem, SelectOption, SelectableListItem, SelectionMode, ServicesTopFiltersChange, SkeletonAnimation, SkeletonVariant, SlopeChartItem, StackedAreaMode, StackedDistributionChartItem, StatGaugeRow, StatusConfig, StatusPageVariant, StatusVariant, StepItem$1 as StepItem, StepLineEdge, StepItem as StepperStepItem, StreamGraphPoint, StreamGraphSeries, SunburstNode, TabItem$1 as TabItem, ThemeRiverDataPoint, TimelineItem, TimelineSegment, TooltipPosition, TornadoItem, TreeNode, TreemapDrilldownNode, TreemapNode, UserDetailBadge, UserDetailField, UserDetailStatusTag, VerifiedUserData, VerifyPayload, VideoCaption, VideoPreload, VideoSource, WaterfallItem, WaterfallSegment, WinLossOutcome };