@a.nemreen/dga-ui 0.2.8 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a.nemreen/dga-ui",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "DGA Angular UI library — standalone forms, overlays, navigation, and portal shell with RTL-first Tailwind styling",
   "license": "MIT",
   "author": {
@@ -42,7 +42,7 @@
     "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
     "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
     "@angular/platform-browser": "^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
-    "@a.nemreen/dga-tokens": "^0.2.0",
+    "@a.nemreen/dga-tokens": "^0.2.0 || ^0.3.0",
     "@platformscode/icons": "^0.0.11"
   },
   "engines": {

package/types/a.nemreen-dga-ui.d.ts

@@ -19,6 +19,11 @@ declare class DgaButton {
     readonly cooldownMs: _angular_core.InputSignal<number>;
     /** Manual loading state — shows spinner and disables the control. */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Extra classes merged with variant styles.
+     * Prefer this over a bare `[class]` on the host — the directive owns `[class]`.
+     */
+    readonly buttonClass: _angular_core.InputSignal<string>;
     /** Exposed for host bindings (Angular 22 requires public host expressions). */
     readonly cooling: _angular_core.WritableSignal<boolean>;
     private cooldownTimer;
@@ -31,7 +36,7 @@ declare class DgaButton {
     private detachSpinner;
     private clearCooldown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaButton, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DgaButton, "button[dgaButton], a[dgaButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "cooldownMs": { "alias": "cooldownMs"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DgaButton, "button[dgaButton], a[dgaButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "cooldownMs": { "alias": "cooldownMs"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "dgaButtonClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type DgaBadgeVariant = 'neutral' | 'primary' | 'success' | 'info' | 'warning' | 'error';
@@ -1037,8 +1042,10 @@ declare class DgaToast implements OnDestroy {
     readonly closed: _angular_core.OutputEmitterRef<void>;
     private timer;
     readonly classes: _angular_core.Signal<string>;
+    /** Clear sticky announcement / reserved chrome, then a small gap. */
+    readonly topOffset: _angular_core.Signal<string>;
     readonly iconName: _angular_core.Signal<DgaIconName>;
-    readonly iconTone: _angular_core.Signal<"error" | "success" | "warning" | "current" | "muted">;
+    readonly iconTone: _angular_core.Signal<"success" | "warning" | "error" | "muted" | "current">;
     constructor();
     ngOnDestroy(): void;
     dismiss(): void;
@@ -1337,7 +1344,7 @@ declare class DgaAlert {
     readonly titleClasses: _angular_core.Signal<string>;
     readonly descriptionClasses: _angular_core.Signal<string>;
     readonly iconName: _angular_core.Signal<DgaIconName>;
-    readonly iconTone: _angular_core.Signal<"error" | "success" | "warning" | "current" | "muted">;
+    readonly iconTone: _angular_core.Signal<"success" | "warning" | "error" | "muted" | "current">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaAlert, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DgaAlert, "dga-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*", "[dgaAlertActions]"], true, never>;
 }
@@ -1856,6 +1863,7 @@ type DgaA11yLetterSpacing = '0' | '0.04em' | '0.08em' | '0.12em';
 type DgaA11yWordSpacing = '0' | '0.16em' | '0.32em' | '0.48em';
 declare class DgaAccessibilityService {
     private readonly doc;
+    private readonly zone;
     private liveRegion;
     private opener;
     private mqMotion;
@@ -1872,15 +1880,20 @@ declare class DgaAccessibilityService {
     readonly maskBand: _angular_core.WritableSignal<number>;
     /** Center Y of the reading-mask band in px. */
     readonly maskY: _angular_core.WritableSignal<number>;
-    readonly reduceMotion: _angular_core.WritableSignal<boolean>;
-    readonly highlightLinks: _angular_core.WritableSignal<boolean>;
-    readonly highlightTitles: _angular_core.WritableSignal<boolean>;
-    readonly highContrast: _angular_core.WritableSignal<boolean>;
-    readonly dyslexia: _angular_core.WritableSignal<boolean>;
-    readonly readingMask: _angular_core.WritableSignal<boolean>;
-    readonly motorTargets: _angular_core.WritableSignal<boolean>;
-    /** Signal bumped when locale attrs change (for computed copy). */
-    readonly localeEpoch: _angular_core.WritableSignal<number>;
+    readonly reduceMotion: _angular_core.Signal<boolean>;
+    readonly highlightLinks: _angular_core.Signal<boolean>;
+    readonly highlightTitles: _angular_core.Signal<boolean>;
+    readonly highContrast: _angular_core.Signal<boolean>;
+    readonly dyslexia: _angular_core.Signal<boolean>;
+    readonly readingMask: _angular_core.Signal<boolean>;
+    readonly motorTargets: _angular_core.Signal<boolean>;
+    /**
+     * Reactive UI locale — kept in sync with `<html lang>` / `data-locale`
+     * (including when `DgaLocaleService` updates the document).
+     */
+    readonly locale: _angular_core.WritableSignal<"ar" | "en">;
+    private readonly effectiveModes;
+    private localeObserver;
     constructor();
     open(opener?: HTMLElement | null): void;
     close(): void;
@@ -1896,23 +1909,29 @@ declare class DgaAccessibilityService {
     cycleLineHeight(): void;
     cycleLetterSpacing(): void;
     cycleWordSpacing(): void;
+    /** Step font size (−1 / +1), wrapping within available levels. */
+    stepFontStep(delta: number): void;
+    stepTextAlign(delta: number): void;
+    stepLineHeight(delta: number): void;
+    stepLetterSpacing(delta: number): void;
+    stepWordSpacing(delta: number): void;
     adjustMaskBand(delta: number): void;
     setMaskY(y: number): void;
     reset(): void;
     announce(msg: string): void;
-    /** Current UI locale inferred from `<html lang>`. */
-    get locale(): 'ar' | 'en';
+    /** Current UI locale inferred from `<html lang>` / `data-locale`. */
+    private readDomLocale;
+    /** Keep `locale` reactive when portal / DgaLocaleService mutates `<html>`. */
+    private bindLocaleObserver;
     /**
      * Toggle AR/EN on `<html>` (`lang` / `dir` / `data-locale`).
      * Compatible with DgaLocaleService attribute contract.
      */
     toggleLocale(): 'ar' | 'en';
     activeModeCount(section: 'modes' | 'readable' | 'visual'): number;
+    /** Total active settings across profiles + tools + filters (for FAB badge). */
+    activeSettingCount(): number;
     private applyBundleExtras;
-    /** Primitive left on by direct toggle (not only via a bundle). */
-    private userKeptPrimitive;
-    private syncDerived;
-    /** Lazily inject OpenDyslexic (Latin). Arabic falls through to Readex Pro. */
     private ensureDyslexiaFont;
     private applyToDocument;
     private persist;
@@ -1924,8 +1943,8 @@ declare class DgaAccessibilityService {
 }
 
 type DgaAccessibilityPosition = 'end' | 'start' | 'left' | 'right';
-type SectionId = 'modes' | 'readable' | 'visual';
-type SectionOpen = SectionId | null;
+type AdjustToggleId = 'dyslexia' | 'highlight-titles' | 'highlight-links' | 'reading-mask' | 'reduce-motion';
+type AdjustStepperId = 'font' | 'align' | 'line' | 'letter' | 'word';
 declare class DgaAccessibility {
     readonly a11y: DgaAccessibilityService;
     readonly position: _angular_core.InputSignal<DgaAccessibilityPosition>;
@@ -1937,7 +1956,6 @@ declare class DgaAccessibility {
     readonly panelId = "dga-accessibility-panel";
     private readonly panelRef;
     readonly fabBottom: _angular_core.Signal<string>;
-    readonly sectionOpen: _angular_core.WritableSignal<SectionOpen>;
     readonly resetArmed: _angular_core.WritableSignal<boolean>;
     readonly liveMsg: _angular_core.WritableSignal<string>;
     private resetTimer;
@@ -1947,10 +1965,14 @@ declare class DgaAccessibility {
         close: string;
         panelLabel: string;
         title: string;
-        sectionModes: string;
-        sectionReadable: string;
-        sectionVisual: string;
-        langToggle: string;
+        sectionActive: string;
+        sectionProfiles: string;
+        sectionAdjust: string;
+        sectionFilters: string;
+        profilesHint: string;
+        chipJump: string;
+        stepDecrease: string;
+        stepIncrease: string;
         reset: string;
         resetConfirm: string;
         announcedReset: string;
@@ -2020,23 +2042,32 @@ declare class DgaAccessibility {
         label: string;
         desc: string;
     }[]>;
-    readonly readableTiles: _angular_core.Signal<{
-        id: string;
+    readonly adjustToggles: _angular_core.Signal<{
+        id: AdjustToggleId;
+        mode: DgaA11yMode;
+        icon: DgaIconName;
+        label: string;
+        active: boolean;
+    }[]>;
+    readonly adjustSteppers: _angular_core.Signal<{
+        id: AdjustStepperId;
         icon: DgaIconName;
         label: string;
-        kind: "cycle" | "toggle";
         active: boolean;
-        level: number;
         valueLabel: string;
-        ariaLabel: string;
-        onClick: () => void;
     }[]>;
     readonly visualTiles: _angular_core.Signal<{
-        value: DgaA11yVisualFilter;
+        value: Exclude<DgaA11yVisualFilter, "none">;
         label: string;
         icon: DgaIconName;
         active: boolean;
     }[]>;
+    readonly activeChips: _angular_core.Signal<{
+        id: string;
+        label: string;
+        controlId: string;
+    }[]>;
+    readonly activeBadgeCount: _angular_core.Signal<number>;
     readonly fabClasses: _angular_core.Signal<string>;
     readonly panelClasses: _angular_core.Signal<string>;
     constructor();
@@ -2044,14 +2075,13 @@ declare class DgaAccessibility {
     onPointerMove(event: PointerEvent): void;
     onPointerUp(): void;
     onFabClick(event: MouseEvent): void;
-    toggleSection(id: SectionId): void;
     onBundle(id: DgaA11yBundle, enabled: boolean): void;
-    onToggleMode(mode: DgaA11yMode): void;
+    onToggleMode(mode: DgaA11yMode, enabled?: boolean): void;
+    onStep(id: AdjustStepperId, delta: number): void;
     onFilter(value: DgaA11yVisualFilter): void;
-    onLocale(): void;
+    focusControl(controlId: string): void;
     onReset(): void;
     onMaskDragStart(event: PointerEvent): void;
-    tileClasses(active: boolean): string;
     private panelPositionClass;
     private announce;
     private onMaskKeys;
@@ -2394,7 +2424,7 @@ declare class DgaNavRail {
     readonly smoothScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly select: _angular_core.OutputEmitterRef<DgaNavRailItem>;
     readonly expandChange: _angular_core.OutputEmitterRef<boolean>;
-    readonly edgeAttr: _angular_core.Signal<"left" | "right" | "start" | "end" | null>;
+    readonly edgeAttr: _angular_core.Signal<"start" | "end" | "left" | "right" | null>;
     readonly offsetCss: _angular_core.Signal<string>;
     readonly tooltipPlacement: _angular_core.Signal<"start" | "end">;
     readonly iconSize: _angular_core.Signal<"sm" | "md" | "lg">;
@@ -3337,7 +3367,14 @@ declare class DgaAnnouncementBar {
     /** Fired when the action control has no `actionHref` (button / chip / link-as-button). */
     readonly action: _angular_core.OutputEmitterRef<void>;
     readonly dismissed: _angular_core.WritableSignal<boolean>;
+    private readonly doc;
+    private readonly hostEl;
+    private readonly destroyRef;
+    private resizeObserver;
     constructor();
+    private bindLayoutOffset;
+    private syncLayoutOffset;
+    private clearLayoutOffset;
     readonly iconTone: _angular_core.Signal<DgaIconTone>;
     readonly iconShellClasses: _angular_core.Signal<string>;
     readonly barClasses: _angular_core.Signal<string>;