@arsedizioni/ars-utils 22.1.3 → 22.1.4

package/types/arsedizioni-ars-utils-ui.d.ts

@@ -1,6 +1,6 @@
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import * as _angular_core from '@angular/core';
-import { ElementRef, InjectionToken, TemplateRef, Signal, Renderer2 } from '@angular/core';
+import { ElementRef, TemplateRef, InjectionToken, Signal, Renderer2 } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBarRef } from '@angular/material/snack-bar';
@@ -8,6 +8,7 @@ import { Observable } from 'rxjs';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { PasswordStrength } from '@arsedizioni/ars-utils/core';
+import { ConnectedPosition } from '@angular/cdk/overlay';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { ActivatedRoute } from '@angular/router';
 
@@ -412,7 +413,7 @@ declare class BusyDialogComponent {
     /** Current progress value (0–100). Used when `progressMode` is `'determinate'`. */
     readonly progress: _angular_core.WritableSignal<number>;
     /** Progress mode passed to the Material progress components. */
-    readonly progressMode: _angular_core.WritableSignal<"indeterminate" | "determinate">;
+    readonly progressMode: _angular_core.WritableSignal<"determinate" | "indeterminate">;
     /** Message displayed above the progress indicator. */
     readonly message: _angular_core.WritableSignal<string>;
     /**
@@ -628,6 +629,25 @@ declare class PasswordStrengthComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PasswordStrengthComponent, "password-strength", never, { "password": { "alias": "password"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class IfBpDirective {
+    private readonly tpl;
+    private readonly vcr;
+    private readonly media;
+    /** Space-separated list of breakpoint aliases, e.g. `'lg gt-lg handset'` */
+    readonly ifBp: _angular_core.InputSignal<string>;
+    /** Optional else-template shown when no alias is active */
+    readonly ifBpElse: _angular_core.InputSignal<TemplateRef<unknown>>;
+    private readonly _aliases;
+    private readonly _isActive;
+    /** Which template is currently rendered. `undefined` = nothing decided yet. */
+    private _rendered;
+    /** The TemplateRef instance currently rendered (detects [ifBpElse] swaps). */
+    private _renderedTpl;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IfBpDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IfBpDirective, "[ifBp]", never, { "ifBp": { "alias": "ifBp"; "required": true; "isSignal": true; }; "ifBpElse": { "alias": "ifBpElse"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * @file breakpoints.ts
  * Angular CDK (v22) breakpoint definitions.
@@ -683,516 +703,452 @@ declare const ALIAS_FAMILIES: {
 };
 
 /**
- * @file navigation.definitions.ts
+ * @file media-observer.service.ts  (v2 — optimized)
  *
- * Data model shared by every variant of the Material Design 3 (Expressive)
- * navigation component: Navigation bar, Navigation rail (collapsed and
- * expanded) and Navigation drawer (standard and modal).
+ * ── Optimizations over v1 ─────────────────────────────────────────────────
  *
- * Reference: https://m3.material.io/components/navigation-bar/specs
- *            https://m3.material.io/components/navigation-rail/specs
- *            https://m3.material.io/components/navigation-drawer/specs
+ * ✅ Single bo.observe() call for all 5 canonical CDK breakpoints.
+ *    CDK internally uses one MediaQueryList listener per query string.
+ *    Calling observe() N times creates N listeners — here we create only one.
+ *
+ * ✅ currentBp$ is shared (shareReplay(1)): all subscribers (effects in
+ *    directives) receive the same value without redundant re-computations.
+ *
+ * ✅ The currentBp Signal is derived from the Observable via toSignal():
+ *    Angular manages the subscription internally and tears it down with root.
+ *
+ * ✅ isActive() delegates to bo.isMatched() — synchronous, O(1), no extra observer.
+ *
+ * ✅ isActive$() reuses the shared currentBp$ stream instead of opening
+ *    a new bo.observe() for every requested alias.
  */
 
+declare class MediaObserver {
+    private readonly bo;
+    private readonly bp;
+    /**
+     * A SINGLE CDK observation for all 5 canonical CDK breakpoints.
+     * Each breakpoint change emits → we resolve the current alias → shared.
+     *
+     * shareReplay(1): all subscribers (N directives in the DOM) receive
+     * the same value without N separate recomputations.
+     */
+    readonly currentBp$: Observable<BreakpointAlias>;
+    /**
+     * Signal derived from currentBp$.
+     * Directives read it via effect() — zero manual subscriptions.
+     * providedIn: 'root' ensures the Signal is a singleton.
+     */
+    readonly currentBp: Signal<BreakpointAlias>;
+    /**
+     * Returns true if the given alias (or raw media query) is currently active.
+     * Delegates to bo.isMatched() — synchronous, O(1), no extra observer created.
+     *
+     * @example
+     * media.isActive('md')      // true on 960–1279px screens
+     * media.isActive('gt-md')   // true on 1280px+
+     * media.isActive('handset') // CDK device alias (orientation-aware)
+     */
+    isActive(alias: string): boolean;
+    /**
+     * Observable true/false for a specific alias.
+     * Reuses currentBp$ instead of opening a new bo.observe():
+     * no additional MediaQueryList listener is created.
+     */
+    isActive$(alias: string): Observable<boolean>;
+    /** Resolves the active canonical alias (from xl down to xs, mobile-first) */
+    private _resolve;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MediaObserver, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MediaObserver>;
+}
+
 /**
- * Rendering variants supported by the component.
+ * @file responsive-inputs.mixin.ts
  *
- * - `bar`            — Navigation bar, horizontal, anchored to the bottom edge (compact windows).
- * - `rail`           — Collapsed navigation rail, vertical, 96dp wide (medium / expanded windows).
- * - `rail-expanded`  — Expanded navigation rail, 220dp+, labels beside icons, supports sections.
- * - `drawer`         — Standard navigation drawer, 360dp, inline with the page content.
- * - `modal`          — Modal navigation drawer: same as `drawer` but overlaid on a scrim.
- * - `auto`           — Resolved at runtime from the active CDK breakpoint (see `autoVariants`).
+ * Shared type helpers for the full set of breakpoint @Input keys.
+ *
+ * Every responsive directive stores values in two maps:
+ *   _v  — canonical aliases (xs … xl, CDK tiers) + 'default'
+ *   _nc — non-canonical aliases (lt-*, gt-*)
+ *
+ * This file exports the key union types so directives stay type-safe
+ * without repeating the string literals everywhere.
  */
-type NavigationVariant = 'auto' | 'bar' | 'rail' | 'rail-expanded' | 'drawer' | 'modal';
-/** Variants that can actually be rendered, i.e. every variant except `auto`. */
-type ResolvedNavigationVariant = Exclude<NavigationVariant, 'auto'>;
+type CanonicalKey = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type NonCanonicalKey = 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl' | 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg';
+type BpValues<T> = Partial<Record<CanonicalKey, T>>;
+type NcValues<T> = Partial<Record<NonCanonicalKey, T>>;
+
 /**
- * Label visibility policy, mirroring the four Material label visibility modes.
+ * @file responsive-base.directive.ts  (v5 — Angular 21 signals)
  *
- * - `auto`       — Labels are always shown (current M3 guidance).
- * - `labeled`    — Labels are always shown.
- * - `selected`   — Only the active destination shows its label (legacy M3 "auto" behaviour).
- * - `unlabeled`  — Icons only; the accessible name comes from `aria-label` / tooltip.
+ * ── What changed in v5 ────────────────────────────────────────────────────
+ *
+ * Full Angular 21 signals refactor:
+ *
+ *   • resolve(), resolveNonCanonical(), resolveAll() are now PURE EXPORTED
+ *     FUNCTIONS that accept currentBp and isActive as parameters.
+ *     Directives call them from computed() or effect() with no "this" binding.
+ *
+ *   • ResponsiveBaseDirective is now a thin utility base:
+ *     – Only injects ElementRef, Renderer2, MediaObserver, PLATFORM_ID.
+ *     – Exposes safeSetStyle() helper.
+ *     – No lifecycle hooks, no Injector, no EffectRef, no abstract apply().
+ *
+ *   • Each concrete directive uses:
+ *     – input()      for every @Input (signals, no more setters + _v/_nc maps)
+ *     – computed()   to build BpValues / NcValues maps and derive resolved CSS
+ *     – effect()     in the constructor to write to the DOM
+ *
+ *   Benefits vs v4:
+ *     ✅ Zero manual lifecycle/subscription management (no OnInit/OnChanges/EffectRef)
+ *     ✅ Angular's reactive graph provides built-in dirty-checking and memoization
+ *     ✅ DOM writes happen only when the resolved CSS value actually changes
+ *     ✅ No more Injector injection just to create effects
+ *
+ * ── Resolution strategy (unchanged) ──────────────────────────────────────
+ *
+ * Canonical aliases (xs … xl, CDK tiers) → exact match, then the unsuffixed value
+ * Non-canonical (lt-*, gt-*) → point-in-time isActive() checks
+ * Final order: resolveNonCanonical() wins over resolve()
  */
-type NavigationLabelVisibility = 'auto' | 'labeled' | 'selected' | 'unlabeled';
+
 /**
- * Item layout inside a destination.
+ * All non-canonical alias keys in priority order (most specific first).
+ * lt-sm is "below sm" (= xs only), lt-md is "below md" (= xs+sm), etc.
+ * Narrower range = higher priority = checked first.
+ */
+declare const NON_CANONICAL_PRIORITY: readonly ["lt-sm", "lt-md", "lt-lg", "lt-xl", "gt-xs", "gt-sm", "gt-md", "gt-lg"];
+/**
+ * Resolution with two-tier priority:
  *
- * - `vertical`   — Icon stacked above the label (M3 default for compact windows).
- * - `horizontal` — Icon at the start of the label (M3 Expressive, medium windows and above).
- * - `auto`       — `vertical` on compact windows, `horizontal` from 600dp upwards; always
- *                  `horizontal` for the expanded rail and the drawer.
+ * 1. Exact breakpoint match  (e.g. currentBp='sm' → values['sm'])
+ * 2. Generic `default` value (the unsuffixed input, e.g. [fxFlex]="49")
+ *
+ * There is deliberately NO cascade between canonical tiers. A suffixed value belongs to its own
+ * breakpoint and to no other, which is what ngx-layout does and what fxShow/fxHide already did
+ * here. The cascade this replaces made `fxFlex.xs="100"` with no base `fxFlex` apply at every
+ * width — the exact opposite of what the `.xs` suffix reads like.
+ *
+ * So `[fxFlex]="49" [fxFlex.xs]="100"` gives xs→100 and sm+→49, while `[fxFlex.xs]="100"` on its
+ * own gives xs→100 and sm+→no style at all.
+ * @param values - The value declared for each canonical alias, plus the unsuffixed `default`.
+ * @param currentBp - The canonical alias currently active.
+ * @returns The value to apply, or `undefined` when no rule covers the current breakpoint.
  */
-type NavigationItemLayout = 'auto' | 'vertical' | 'horizontal';
-/** Vertical alignment of the destination list inside a rail. */
-type NavigationAlignment = 'top' | 'center' | 'bottom';
-/** Side the rail / drawer is anchored to. Automatically mirrored in RTL. */
-type NavigationPosition = 'start' | 'end';
+declare function resolve<T>(values: BpValues<T>, currentBp: BreakpointAlias): T | undefined;
 /**
- * Badge attached to a destination.
- * When `value` is `undefined` a small dot badge is rendered, otherwise a large
- * badge showing the value (clamped to `max`).
+ * Non-canonical point-in-time check: iterates NON_CANONICAL_PRIORITY and
+ * returns the value for the first alias that isActive().
  */
-interface NavigationBadge {
-    /** Numeric or textual content of the badge. Leave `undefined` for a dot badge. */
-    value?: number | string;
-    /** Upper bound for numeric values; above it the badge renders `${max}+`. Defaults to 999. */
-    max?: number;
-    /** Accessible description announced together with the destination label. */
-    ariaLabel?: string;
-    /** Optional CSS colour override for this badge only. */
-    color?: string;
-}
-/** A single navigation destination. */
-interface NavigationItem {
-    /** Stable unique identifier; used as the `@for` track key and as the selection value. */
-    id: string;
-    /** Visible label. Also used as the accessible name and as the tooltip fallback. */
-    label: string;
-    /** Material Symbols ligature rendered when the destination is NOT selected. */
-    icon?: string;
-    /** Material Symbols ligature rendered when the destination IS selected (usually the filled variant). */
-    activeIcon?: string;
-    /** Name of an SVG icon registered in `MatIconRegistry`; takes precedence over `icon`. */
-    svgIcon?: string;
-    /** SVG icon used when the destination is selected; takes precedence over `activeIcon`. */
-    activeSvgIcon?: string;
-    /** Badge shown on top of the icon (collapsed variants) or at the trailing edge (expanded variants). */
-    badge?: NavigationBadge;
-    /** Short trailing text shown at the end of the row in the expanded rail and in the drawer. */
-    trailing?: string;
-    /** When `true` the destination is rendered dimmed and is not interactive. */
-    disabled?: boolean;
-    /** Tooltip text; defaults to `label` when the label is not visible. */
-    tooltip?: string;
-    /** Router commands used to build the destination URL. */
-    route?: string | readonly unknown[];
-    /** Query parameters appended to `route`. */
-    queryParams?: Record<string, unknown>;
-    /** Fragment appended to `route`. */
-    fragment?: string;
-    /** When `true` the route must match the whole URL to mark the destination active. Defaults to `false`. */
-    exact?: boolean;
-    /** External URL. Rendered as a plain anchor and never matched against the router. */
-    href?: string;
-    /** Anchor target used together with `href`. */
-    target?: string;
-    /** Explicit accessible name, when the visible label is not descriptive enough. */
-    ariaLabel?: string;
-    /** Arbitrary payload echoed back in `NavigationSelection`. */
-    data?: unknown;
-}
+declare function resolveNonCanonical<T>(nc: NcValues<T>, isActive: (alias: string) => boolean): T | undefined;
 /**
- * A group of destinations. Section headlines and dividers are only rendered by
- * the expanded rail and by the drawer, exactly as described by the M3 specs.
+ * Full resolution: non-canonical overrides win over the canonical cascade.
+ *
+ * Usage inside computed():
+ *   const resolved = computed(() =>
+ *     resolveAll(this._v(), this._nc(), this.media.currentBp(), a => this.media.isActive(a))
+ *   );
  */
-interface NavigationSection {
-    /** Stable unique identifier; used as the `@for` track key. */
-    id: string;
-    /** Optional headline rendered above the group. */
-    label?: string;
-    /** Destinations belonging to the section. */
-    items: readonly NavigationItem[];
-    /** When `true` a divider is rendered after the section. */
-    divider?: boolean;
+declare function resolveAll<T>(canonical: BpValues<T>, nonCanonical: NcValues<T>, currentBp: BreakpointAlias, isActive: (alias: string) => boolean): T | undefined;
+declare abstract class ResponsiveBaseDirective {
+    protected readonly el: ElementRef<any>;
+    protected readonly r2: Renderer2;
+    protected readonly media: MediaObserver;
+    /** true in browser, false in SSR */
+    protected readonly isBrowser: boolean;
+    /** SSR-safe style setter. Pass null/empty string to remove the property. */
+    protected safeSetStyle(prop: string, value: string | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResponsiveBaseDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ResponsiveBaseDirective, never, never, {}, {}, never, never, true, never>;
 }
-/** Payload emitted when a destination is activated. */
-interface NavigationSelection {
-    /** The activated destination. */
-    item: NavigationItem;
-    /** The section the destination belongs to, when sections are in use. */
-    section?: NavigationSection;
-    /** Zero-based index of the destination across the whole flattened list. */
-    index: number;
+
+declare class FxFlexOrderDirective extends ResponsiveBaseDirective {
+    readonly fxFlexOrder: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _order;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexOrderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexOrderDirective, "    [fxFlexOrder],    [fxFlexOrder.xs],    [fxFlexOrder.sm],    [fxFlexOrder.md],    [fxFlexOrder.lg],    [fxFlexOrder.xl],    [fxFlexOrder.lt-sm],    [fxFlexOrder.lt-md],    [fxFlexOrder.lt-lg],    [fxFlexOrder.lt-xl],    [fxFlexOrder.gt-xs],    [fxFlexOrder.gt-sm],    [fxFlexOrder.gt-md],    [fxFlexOrder.gt-lg]  ", never, { "fxFlexOrder": { "alias": "fxFlexOrder"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexOrder.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexOrder.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexOrder.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexOrder.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexOrder.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexOrder.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexOrder.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexOrder.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexOrder.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexOrder.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexOrder.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexOrder.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexOrder.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-/** Map of breakpoint alias to the variant used when `variant` is `auto`. */
-type NavigationAutoVariants = Partial<Record<BreakpointAlias, ResolvedNavigationVariant>>;
+declare class FxFlexOffsetDirective extends ResponsiveBaseDirective {
+    /** Ancestor FxLayout (matched to the direct parent inside resolveParentFlow). */
+    private readonly parentLayout;
+    readonly fxFlexOffset: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _offset;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexOffsetDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexOffsetDirective, "    [fxFlexOffset],    [fxFlexOffset.xs],    [fxFlexOffset.sm],    [fxFlexOffset.md],    [fxFlexOffset.lg],    [fxFlexOffset.xl],    [fxFlexOffset.lt-sm],    [fxFlexOffset.lt-md],    [fxFlexOffset.lt-lg],    [fxFlexOffset.lt-xl],    [fxFlexOffset.gt-xs],    [fxFlexOffset.gt-sm],    [fxFlexOffset.gt-md],    [fxFlexOffset.gt-lg]  ", never, { "fxFlexOffset": { "alias": "fxFlexOffset"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexOffset.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexOffset.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexOffset.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexOffset.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexOffset.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexOffset.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexOffset.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexOffset.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexOffset.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexOffset.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexOffset.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexOffset.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexOffset.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type AlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+declare class FxFlexAlignDirective extends ResponsiveBaseDirective {
+    readonly fxFlexAlign: _angular_core.InputSignal<AlignSelf>;
+    readonly xs: _angular_core.InputSignal<AlignSelf>;
+    readonly sm: _angular_core.InputSignal<AlignSelf>;
+    readonly md: _angular_core.InputSignal<AlignSelf>;
+    readonly lg: _angular_core.InputSignal<AlignSelf>;
+    readonly xl: _angular_core.InputSignal<AlignSelf>;
+    readonly ltSm: _angular_core.InputSignal<AlignSelf>;
+    readonly ltMd: _angular_core.InputSignal<AlignSelf>;
+    readonly ltLg: _angular_core.InputSignal<AlignSelf>;
+    readonly ltXl: _angular_core.InputSignal<AlignSelf>;
+    readonly gtXs: _angular_core.InputSignal<AlignSelf>;
+    readonly gtSm: _angular_core.InputSignal<AlignSelf>;
+    readonly gtMd: _angular_core.InputSignal<AlignSelf>;
+    readonly gtLg: _angular_core.InputSignal<AlignSelf>;
+    private readonly _alignSelf;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexAlignDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexAlignDirective, "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ", never, { "fxFlexAlign": { "alias": "fxFlexAlign"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexAlign.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexAlign.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexAlign.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexAlign.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexAlign.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexAlign.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexAlign.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexAlign.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexAlign.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexAlign.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexAlign.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexAlign.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexAlign.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type FillValue = 'fill' | 'none' | '' | boolean;
+declare class FxFlexFillDirective extends ResponsiveBaseDirective {
+    readonly fxFlexFill: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly fxFill: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xs: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly sm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly md: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly lg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltSm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltMd: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltLg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltXl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtXs: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtSm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtMd: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtLg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    private readonly _active;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexFillDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexFillDirective, "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", never, { "fxFlexFill": { "alias": "fxFlexFill"; "required": false; "isSignal": true; }; "fxFill": { "alias": "fxFill"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexFill.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexFill.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexFill.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexFill.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexFill.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexFill.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexFill.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexFill.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexFill.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexFill.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexFill.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexFill.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexFill.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Port of ngx validateBasis(): returns [grow, shrink, basis]. */
+declare function validateBasis(basis: string, grow?: string, shrink?: string): string[];
 /**
- * Default `auto` mapping, aligned with the Material 3 window size classes:
- * compact windows get the navigation bar, medium and expanded windows get the
- * collapsed rail, large and extra-large windows get the expanded rail.
+ * Builds the complete flex style map for a child, given the raw fxFlex value
+ * and the parent flow. `null` values mean "remove this property".
+ * Matches ngx-layout output exactly (useColumnBasisZero = true, the default).
  */
-declare const DEFAULT_NAVIGATION_AUTO_VARIANTS: Required<NavigationAutoVariants>;
-/** Variants that render labels beside the icon and support sections and dividers. */
-declare const EXPANDED_NAVIGATION_VARIANTS: readonly ResolvedNavigationVariant[];
+declare function buildFlexStyles(value: string, direction: string, hasWrap: boolean): Record<string, string | null>;
+/**
+ * Resolves the non-ngx `fxFlex="*"` extension to `grow` (`flex: 1 1 100%`, max-* 100%).
+ * Every other value — including a bare `fxFlex` ('') — is returned unchanged, so a bare
+ * fxFlex keeps the ngx-layout default (`1 1 0%` in row, `1 1 0.000000001px` in column).
+ * @param raw - The resolved fxFlex value for the active breakpoint.
+ * @returns The value to pass to `buildFlexStyles`.
+ */
+declare function resolveFlexInput(raw: string): string;
+declare class FxFlexDirective extends ResponsiveBaseDirective {
+    /** Direct ancestor FxLayout (any level); matched to the direct parent in the effect. */
+    private readonly parentLayout;
+    readonly fxFlex: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _rawFlex;
+    /** CSS properties applied on the last effect run (for stale cleanup). */
+    private _applied;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexDirective, "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", never, { "fxFlex": { "alias": "fxFlex"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlex.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlex.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlex.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlex.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlex.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlex.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlex.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlex.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlex.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlex.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlex.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlex.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlex.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 
-/** Internal, pre-computed render model for a single destination. */
-interface NavigationRenderItem {
-    /** The source destination. */
-    readonly item: NavigationItem;
-    /** Owning section, when sections are in use. */
-    readonly section?: NavigationSection;
-    /** Zero-based index across the whole flattened destination list. */
-    readonly index: number;
-    /** Resolved URL, when the destination is routed or external. */
-    readonly href?: string;
-    /** `true` when the destination navigates through the Angular router. */
-    readonly routed: boolean;
-    /** Material Symbols ligature for the unselected state. */
-    readonly iconOff?: string;
-    /** Material Symbols ligature for the selected state. */
-    readonly iconOn?: string;
-    /** Registered SVG icon name for the unselected state. */
-    readonly svgOff?: string;
-    /** Registered SVG icon name for the selected state. */
-    readonly svgOn?: string;
-    /** Rendered badge text; empty string means "dot badge". */
-    readonly badgeText: string;
-    /** `true` when the destination carries a badge of any kind. */
-    readonly hasBadge: boolean;
-    /** Accessible name announced for the destination. */
-    readonly ariaLabel: string;
-    /** Tooltip text used when the label is not visible. */
-    readonly tooltip: string;
+declare class FxGridDirective extends ResponsiveBaseDirective {
+    readonly fxGrid: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly fxGridRows: _angular_core.InputSignal<string>;
+    readonly rowsXs: _angular_core.InputSignal<string>;
+    readonly rowsSm: _angular_core.InputSignal<string>;
+    readonly rowsMd: _angular_core.InputSignal<string>;
+    readonly rowsLg: _angular_core.InputSignal<string>;
+    readonly rowsXl: _angular_core.InputSignal<string>;
+    readonly rowsLtSm: _angular_core.InputSignal<string>;
+    readonly rowsLtMd: _angular_core.InputSignal<string>;
+    readonly rowsLtLg: _angular_core.InputSignal<string>;
+    readonly rowsLtXl: _angular_core.InputSignal<string>;
+    readonly rowsGtXs: _angular_core.InputSignal<string>;
+    readonly rowsGtSm: _angular_core.InputSignal<string>;
+    readonly rowsGtMd: _angular_core.InputSignal<string>;
+    readonly rowsGtLg: _angular_core.InputSignal<string>;
+    readonly fxGridGap: _angular_core.InputSignal<string>;
+    readonly gapXs: _angular_core.InputSignal<string>;
+    readonly gapSm: _angular_core.InputSignal<string>;
+    readonly gapMd: _angular_core.InputSignal<string>;
+    readonly gapLg: _angular_core.InputSignal<string>;
+    readonly gapXl: _angular_core.InputSignal<string>;
+    readonly gapLtSm: _angular_core.InputSignal<string>;
+    readonly gapLtMd: _angular_core.InputSignal<string>;
+    readonly gapLtLg: _angular_core.InputSignal<string>;
+    readonly gapLtXl: _angular_core.InputSignal<string>;
+    readonly gapGtXs: _angular_core.InputSignal<string>;
+    readonly gapGtSm: _angular_core.InputSignal<string>;
+    readonly gapGtMd: _angular_core.InputSignal<string>;
+    readonly gapGtLg: _angular_core.InputSignal<string>;
+    private readonly _cols;
+    private readonly _rows;
+    private readonly _gap;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridDirective, "    [fxGrid],    [fxGrid.xs],    [fxGrid.sm],    [fxGrid.md],    [fxGrid.lg],    [fxGrid.xl],    [fxGrid.lt-sm],    [fxGrid.lt-md],    [fxGrid.lt-lg],    [fxGrid.lt-xl],    [fxGrid.gt-xs],    [fxGrid.gt-sm],    [fxGrid.gt-md],    [fxGrid.gt-lg]  ", never, { "fxGrid": { "alias": "fxGrid"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGrid.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGrid.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGrid.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGrid.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGrid.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGrid.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGrid.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGrid.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGrid.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGrid.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGrid.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGrid.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGrid.gt-lg"; "required": false; "isSignal": true; }; "fxGridRows": { "alias": "fxGridRows"; "required": false; "isSignal": true; }; "rowsXs": { "alias": "fxGridRows.xs"; "required": false; "isSignal": true; }; "rowsSm": { "alias": "fxGridRows.sm"; "required": false; "isSignal": true; }; "rowsMd": { "alias": "fxGridRows.md"; "required": false; "isSignal": true; }; "rowsLg": { "alias": "fxGridRows.lg"; "required": false; "isSignal": true; }; "rowsXl": { "alias": "fxGridRows.xl"; "required": false; "isSignal": true; }; "rowsLtSm": { "alias": "fxGridRows.lt-sm"; "required": false; "isSignal": true; }; "rowsLtMd": { "alias": "fxGridRows.lt-md"; "required": false; "isSignal": true; }; "rowsLtLg": { "alias": "fxGridRows.lt-lg"; "required": false; "isSignal": true; }; "rowsLtXl": { "alias": "fxGridRows.lt-xl"; "required": false; "isSignal": true; }; "rowsGtXs": { "alias": "fxGridRows.gt-xs"; "required": false; "isSignal": true; }; "rowsGtSm": { "alias": "fxGridRows.gt-sm"; "required": false; "isSignal": true; }; "rowsGtMd": { "alias": "fxGridRows.gt-md"; "required": false; "isSignal": true; }; "rowsGtLg": { "alias": "fxGridRows.gt-lg"; "required": false; "isSignal": true; }; "fxGridGap": { "alias": "fxGridGap"; "required": false; "isSignal": true; }; "gapXs": { "alias": "fxGridGap.xs"; "required": false; "isSignal": true; }; "gapSm": { "alias": "fxGridGap.sm"; "required": false; "isSignal": true; }; "gapMd": { "alias": "fxGridGap.md"; "required": false; "isSignal": true; }; "gapLg": { "alias": "fxGridGap.lg"; "required": false; "isSignal": true; }; "gapXl": { "alias": "fxGridGap.xl"; "required": false; "isSignal": true; }; "gapLtSm": { "alias": "fxGridGap.lt-sm"; "required": false; "isSignal": true; }; "gapLtMd": { "alias": "fxGridGap.lt-md"; "required": false; "isSignal": true; }; "gapLtLg": { "alias": "fxGridGap.lt-lg"; "required": false; "isSignal": true; }; "gapLtXl": { "alias": "fxGridGap.lt-xl"; "required": false; "isSignal": true; }; "gapGtXs": { "alias": "fxGridGap.gt-xs"; "required": false; "isSignal": true; }; "gapGtSm": { "alias": "fxGridGap.gt-sm"; "required": false; "isSignal": true; }; "gapGtMd": { "alias": "fxGridGap.gt-md"; "required": false; "isSignal": true; }; "gapGtLg": { "alias": "fxGridGap.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-/** Internal render model for a section and its destinations. */
-interface NavigationRenderSection {
-    /** The source section. */
-    readonly section: NavigationSection;
-    /** Pre-computed destinations of the section. */
-    readonly items: readonly NavigationRenderItem[];
+declare class FxGridColumnDirective extends ResponsiveBaseDirective {
+    readonly fxGridColumn: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _resolved;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridColumnDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridColumnDirective, "    [fxGridColumn],    [fxGridColumn.xs],    [fxGridColumn.sm],    [fxGridColumn.md],    [fxGridColumn.lg],    [fxGridColumn.xl],    [fxGridColumn.lt-sm],    [fxGridColumn.lt-md],    [fxGridColumn.lt-lg],    [fxGridColumn.lt-xl],    [fxGridColumn.gt-xs],    [fxGridColumn.gt-sm],    [fxGridColumn.gt-md],    [fxGridColumn.gt-lg]  ", never, { "fxGridColumn": { "alias": "fxGridColumn"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGridColumn.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGridColumn.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGridColumn.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGridColumn.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGridColumn.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGridColumn.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGridColumn.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGridColumn.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGridColumn.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGridColumn.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGridColumn.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGridColumn.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGridColumn.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-declare class NavigationBarComponent {
-    private readonly media;
-    private readonly router;
-    private readonly directionality;
-    private readonly destroyRef;
-    /** Flat list of destinations. Ignored when `sections` is provided. */
-    readonly items: _angular_core.InputSignal<readonly NavigationItem[]>;
-    /** Grouped destinations. Section headlines and dividers only render in the expanded variants. */
-    readonly sections: _angular_core.InputSignal<readonly NavigationSection[]>;
-    /** Rendering variant. `auto` resolves from the active breakpoint through `autoVariants`. */
-    readonly variant: _angular_core.InputSignal<NavigationVariant>;
-    /** Breakpoint → variant map used when `variant` is `auto`. Missing entries fall back to the M3 defaults. */
-    readonly autoVariants: _angular_core.InputSignal<Partial<Record<"xs" | "sm" | "md" | "lg" | "xl", ResolvedNavigationVariant>>>;
-    /** Two-way bound id of the selected destination. The router, when active, takes precedence. */
-    readonly selectedId: _angular_core.ModelSignal<string>;
-    /** Two-way bound open state of the modal drawer. Ignored by the other variants. */
-    readonly open: _angular_core.ModelSignal<boolean>;
-    /** Label visibility policy. */
-    readonly labelVisibility: _angular_core.InputSignal<NavigationLabelVisibility>;
-    /** Icon / label arrangement inside a destination. */
-    readonly itemLayout: _angular_core.InputSignal<NavigationItemLayout>;
-    /** Vertical alignment of the destination list inside a rail. */
-    readonly alignment: _angular_core.InputSignal<NavigationAlignment>;
-    /** Edge the rail / drawer is anchored to. Mirrored automatically in RTL. */
-    readonly position: _angular_core.InputSignal<NavigationPosition>;
-    /** Headline rendered above the destinations in the expanded rail and in the drawer. */
-    readonly headline: _angular_core.InputSignal<string>;
-    /** When `true` a leading menu button is rendered; it emits `menuClick`. */
-    readonly showMenuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Material Symbols ligature used by the menu button. */
-    readonly menuIcon: _angular_core.InputSignal<string>;
-    /** Accessible name of the menu button. */
-    readonly menuAriaLabel: _angular_core.InputSignal<string>;
-    /** Accessible name of the navigation landmark. */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    /** When `true` a scrim is rendered behind the modal drawer. */
-    readonly scrim: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** When `true` the modal drawer closes as soon as a destination is activated. */
-    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** When `true` the surface gets the M3 elevation-3 shadow. */
-    readonly elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** When `true` a 1px divider separates the surface from the page content. */
-    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** When `true` tooltips are shown for destinations whose label is not visible. */
-    readonly tooltips: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** When `true` the selection follows the current router URL. */
-    readonly routerSync: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Route used to resolve relative `route` commands. Absolute resolution when omitted. */
-    readonly relativeTo: _angular_core.InputSignal<ActivatedRoute>;
-    /** Explicit surface width in pixels for the rail / drawer variants. `0` keeps the spec default. */
-    readonly width: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** When `true` the whole surface is hidden (animated off-screen) without being destroyed. */
-    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Emitted when a destination is activated by the user. */
-    readonly itemSelected: _angular_core.OutputEmitterRef<NavigationSelection>;
-    /** Emitted when the leading menu button is pressed. */
-    readonly menuClick: _angular_core.OutputEmitterRef<void>;
-    /** Focusable destination elements, in DOM order; used for keyboard roving. */
-    private readonly itemElements;
-    /** Current router URL, kept in a signal so the template stays zoneless-friendly. */
-    private readonly routerUrl;
+declare class FxGridAreaDirective extends ResponsiveBaseDirective {
+    readonly fxGridArea: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _resolved;
     constructor();
-    /** Sections actually rendered: the `sections` input, or a single implicit section wrapping `items`. */
-    private readonly resolvedSections;
-    /** The variant to render, resolving `auto` against the active CDK breakpoint. */
-    protected readonly resolvedVariant: _angular_core.Signal<ResolvedNavigationVariant>;
-    /** `true` for the variants that render labels beside icons and support sections. */
-    protected readonly isExpanded: _angular_core.Signal<boolean>;
-    /** `true` when the surface is the modal drawer. */
-    protected readonly isModal: _angular_core.Signal<boolean>;
-    /** `true` when the modal drawer is currently open. */
-    protected readonly isOverlayOpen: _angular_core.Signal<boolean>;
-    /** `true` when the surface must be visually hidden. */
-    protected readonly isHidden: _angular_core.Signal<boolean>;
-    /** Resolved icon / label arrangement. */
-    protected readonly resolvedLayout: _angular_core.Signal<"horizontal" | "vertical">;
-    /** Resolved label visibility; the expanded variants always show labels. */
-    protected readonly resolvedLabelVisibility: _angular_core.Signal<"selected" | "labeled" | "unlabeled">;
-    /** `true` when the section headline and the divider must be rendered. */
-    protected readonly showsSections: _angular_core.Signal<boolean>;
-    /** `true` when the headline row (menu button, headline text, projected header) is rendered. */
-    protected readonly showsHeader: _angular_core.Signal<boolean>;
-    /**
-     * Geometry of the active indicator:
-     * `compact` wraps the icon only (56x32 pill), `wide` wraps icon and label
-     * together, exactly as described by the M3 Expressive specs.
-     */
-    protected readonly indicatorMode: _angular_core.Signal<"wide" | "compact">;
-    /** Tooltip placement derived from the variant and from the anchoring edge. */
-    protected readonly tooltipPosition: _angular_core.Signal<TooltipPosition>;
-    /** Inline width override for the rail / drawer, or `undefined` to keep the spec default. */
-    protected readonly widthStyle: _angular_core.Signal<string>;
-    /** Map of destination id to resolved URL. Recomputed only when the destinations change. */
-    private readonly hrefs;
-    /** Pre-computed render model, rebuilt only when the destinations or the resolved URLs change. */
-    protected readonly renderSections: _angular_core.Signal<readonly NavigationRenderSection[]>;
-    /** Id of the destination matching the current router URL, using longest-prefix matching. */
-    private readonly routerActiveId;
-    /** Id of the currently active destination: router URL first, explicit selection as fallback. */
-    protected readonly activeId: _angular_core.Signal<string>;
-    /** `true` when the layout runs right-to-left; used to mirror the arrow keys. */
-    private readonly isRtl;
-    /**
-     * Activates a destination: updates the selection, navigates when routed and
-     * emits `itemSelected`.
-     * @param render - The render model of the activated destination.
-     * @param event - The originating mouse or keyboard event.
-     */
-    protected select(render: NavigationRenderItem, event: Event): void;
-    /**
-     * Emits `menuClick` when the leading menu button is pressed.
-     */
-    protected onMenuClick(): void;
-    /**
-     * Closes the modal drawer when the scrim is clicked.
-     */
-    protected onScrimClick(): void;
-    /**
-     * Handles keyboard interaction: arrow keys move the focus between
-     * destinations, `Home` / `End` jump to the first / last one and `Escape`
-     * closes the modal drawer.
-     * @param event - The originating keyboard event.
-     */
-    protected onKeydown(event: KeyboardEvent): void;
-    /**
-     * Opens the modal drawer. No-op for the other variants.
-     */
-    openDrawer(): void;
-    /**
-     * Closes the modal drawer. No-op for the other variants.
-     */
-    closeDrawer(): void;
-    /**
-     * Toggles the modal drawer. No-op for the other variants.
-     */
-    toggleDrawer(): void;
-    /**
-     * Moves the browser focus to the destination with the given id.
-     * @param id - Identifier of the destination to focus.
-     * @returns `true` when a matching destination was found and focused.
-     */
-    focusItem(id: string): boolean;
-    /**
-     * Formats the badge content of a destination.
-     * @param item - The destination whose badge must be formatted.
-     * @returns The badge text, or an empty string for a dot badge / no badge.
-     */
-    private static formatBadge;
-    /**
-     * Strips the query string and the fragment from a URL.
-     * @param url - The URL to normalise.
-     * @returns The path portion of the URL.
-     */
-    private static pathOf;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationBarComponent, "navigation-bar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "autoVariants": { "alias": "autoVariants"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "labelVisibility": { "alias": "labelVisibility"; "required": false; "isSignal": true; }; "itemLayout": { "alias": "itemLayout"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "showMenuButton": { "alias": "showMenuButton"; "required": false; "isSignal": true; }; "menuIcon": { "alias": "menuIcon"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrim": { "alias": "scrim"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "tooltips": { "alias": "tooltips"; "required": false; "isSignal": true; }; "routerSync": { "alias": "routerSync"; "required": false; "isSignal": true; }; "relativeTo": { "alias": "relativeTo"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "selectedId": "selectedIdChange"; "open": "openChange"; "itemSelected": "itemSelected"; "menuClick": "menuClick"; }, never, ["[navHeader]", "[navFab]", "[navFooter]"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridAreaDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridAreaDirective, "    [fxGridArea],    [fxGridArea.xs],    [fxGridArea.sm],    [fxGridArea.md],    [fxGridArea.lg],    [fxGridArea.xl],    [fxGridArea.lt-sm],    [fxGridArea.lt-md],    [fxGridArea.lt-lg],    [fxGridArea.lt-xl],    [fxGridArea.gt-xs],    [fxGridArea.gt-sm],    [fxGridArea.gt-md],    [fxGridArea.gt-lg]  ", never, { "fxGridArea": { "alias": "fxGridArea"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGridArea.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGridArea.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGridArea.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGridArea.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGridArea.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGridArea.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGridArea.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGridArea.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGridArea.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGridArea.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGridArea.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGridArea.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGridArea.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class IfBpDirective {
-    private readonly tpl;
-    private readonly vcr;
-    private readonly media;
-    /** Space-separated list of breakpoint aliases, e.g. `'lg gt-lg handset'` */
-    readonly ifBp: _angular_core.InputSignal<string>;
-    /** Optional else-template shown when no alias is active */
-    readonly ifBpElse: _angular_core.InputSignal<TemplateRef<unknown>>;
-    private readonly _aliases;
-    private readonly _isActive;
-    /** Which template is currently rendered. `undefined` = nothing decided yet. */
-    private _rendered;
-    /** The TemplateRef instance currently rendered (detects [ifBpElse] swaps). */
-    private _renderedTpl;
+/**
+ * Port of ngx LayoutAlignStyleBuilder.buildStyles.
+ * `null` values mean "remove the property".
+ */
+declare function buildAlignStyles(align: string, layoutDirection: string, inline: boolean): Record<string, string | null>;
+declare class FxLayoutAlignDirective extends ResponsiveBaseDirective {
+    /** FxLayout on the same host (optional): direction/inline read reactively. */
+    private readonly selfLayout;
+    readonly fxLayoutAlign: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _align;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IfBpDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IfBpDirective, "[ifBp]", never, { "ifBp": { "alias": "ifBp"; "required": true; "isSignal": true; }; "ifBpElse": { "alias": "ifBpElse"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutAlignDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutAlignDirective, "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", never, { "fxLayoutAlign": { "alias": "fxLayoutAlign"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutAlign.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutAlign.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutAlign.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutAlign.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutAlign.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutAlign.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutAlign.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutAlign.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutAlign.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutAlign.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutAlign.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutAlign.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutAlign.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxLayoutGapDirective extends ResponsiveBaseDirective {
+    readonly fxLayoutGap: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    private readonly _gap;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutGapDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutGapDirective, "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", never, { "fxLayoutGap": { "alias": "fxLayoutGap"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutGap.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutGap.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutGap.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutGap.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutGap.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutGap.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutGap.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutGap.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutGap.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutGap.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutGap.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutGap.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutGap.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare const LAYOUT_VALUES: readonly ["row", "column", "row-reverse", "column-reverse"];
+/** Port of ngx-layout validateWrapValue(). */
+declare function validateWrapValue(value: string): string;
+/** Port of ngx-layout validateValue(): [direction, wrap, inline]. */
+declare function validateLayoutValue(value: string): [string, string, boolean];
+/** Port of ngx-layout buildLayoutCSS(): null values mean "remove the property". */
+declare function buildLayoutCSS(value: string): Record<string, string | null>;
 /**
- * @file media-observer.service.ts  (v2 — optimized)
- *
- * ── Optimizations over v1 ─────────────────────────────────────────────────
- *
- * ✅ Single bo.observe() call for all 5 canonical CDK breakpoints.
- *    CDK internally uses one MediaQueryList listener per query string.
- *    Calling observe() N times creates N listeners — here we create only one.
- *
- * ✅ currentBp$ is shared (shareReplay(1)): all subscribers (effects in
- *    directives) receive the same value without redundant re-computations.
- *
- * ✅ The currentBp Signal is derived from the Observable via toSignal():
- *    Angular manages the subscription internally and tears it down with root.
- *
- * ✅ isActive() delegates to bo.isMatched() — synchronous, O(1), no extra observer.
- *
- * ✅ isActive$() reuses the shared currentBp$ stream instead of opening
- *    a new bo.observe() for every requested alias.
+ * Resolves the flex flow of the parent container for a flex child.
+ * Prefers the reactive FxLayoutDirective instance when it sits on the DIRECT
+ * parent element (signal read → re-evaluates with the parent); falls back to
+ * getComputedStyle for plain-CSS flex parents; SSR-safe defaults.
  */
-
-declare class MediaObserver {
-    private readonly bo;
-    private readonly bp;
-    /**
-     * A SINGLE CDK observation for all 5 canonical CDK breakpoints.
-     * Each breakpoint change emits → we resolve the current alias → shared.
-     *
-     * shareReplay(1): all subscribers (N directives in the DOM) receive
-     * the same value without N separate recomputations.
-     */
-    readonly currentBp$: Observable<BreakpointAlias>;
-    /**
-     * Signal derived from currentBp$.
-     * Directives read it via effect() — zero manual subscriptions.
-     * providedIn: 'root' ensures the Signal is a singleton.
-     */
-    readonly currentBp: Signal<BreakpointAlias>;
-    /**
-     * Returns true if the given alias (or raw media query) is currently active.
-     * Delegates to bo.isMatched() — synchronous, O(1), no extra observer created.
-     *
-     * @example
-     * media.isActive('md')      // true on 960–1279px screens
-     * media.isActive('gt-md')   // true on 1280px+
-     * media.isActive('handset') // CDK device alias (orientation-aware)
-     */
-    isActive(alias: string): boolean;
-    /**
-     * Observable true/false for a specific alias.
-     * Reuses currentBp$ instead of opening a new bo.observe():
-     * no additional MediaQueryList listener is created.
-     */
-    isActive$(alias: string): Observable<boolean>;
-    /** Resolves the active canonical alias (from xl down to xs, mobile-first) */
-    private _resolve;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MediaObserver, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MediaObserver>;
-}
-
-/**
- * @file responsive-inputs.mixin.ts
- *
- * Shared type helpers for the full set of breakpoint @Input keys.
- *
- * Every responsive directive stores values in two maps:
- *   _v  — canonical aliases (xs … xl, CDK tiers) + 'default'
- *   _nc — non-canonical aliases (lt-*, gt-*)
- *
- * This file exports the key union types so directives stay type-safe
- * without repeating the string literals everywhere.
- */
-type CanonicalKey = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type NonCanonicalKey = 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl' | 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg';
-type BpValues<T> = Partial<Record<CanonicalKey, T>>;
-type NcValues<T> = Partial<Record<NonCanonicalKey, T>>;
-
-/**
- * @file responsive-base.directive.ts  (v5 — Angular 21 signals)
- *
- * ── What changed in v5 ────────────────────────────────────────────────────
- *
- * Full Angular 21 signals refactor:
- *
- *   • resolve(), resolveNonCanonical(), resolveAll() are now PURE EXPORTED
- *     FUNCTIONS that accept currentBp and isActive as parameters.
- *     Directives call them from computed() or effect() with no "this" binding.
- *
- *   • ResponsiveBaseDirective is now a thin utility base:
- *     – Only injects ElementRef, Renderer2, MediaObserver, PLATFORM_ID.
- *     – Exposes safeSetStyle() helper.
- *     – No lifecycle hooks, no Injector, no EffectRef, no abstract apply().
- *
- *   • Each concrete directive uses:
- *     – input()      for every @Input (signals, no more setters + _v/_nc maps)
- *     – computed()   to build BpValues / NcValues maps and derive resolved CSS
- *     – effect()     in the constructor to write to the DOM
- *
- *   Benefits vs v4:
- *     ✅ Zero manual lifecycle/subscription management (no OnInit/OnChanges/EffectRef)
- *     ✅ Angular's reactive graph provides built-in dirty-checking and memoization
- *     ✅ DOM writes happen only when the resolved CSS value actually changes
- *     ✅ No more Injector injection just to create effects
- *
- * ── Resolution strategy (unchanged) ──────────────────────────────────────
- *
- * Canonical aliases (xs … xl, CDK tiers) → exact match, then the unsuffixed value
- * Non-canonical (lt-*, gt-*) → point-in-time isActive() checks
- * Final order: resolveNonCanonical() wins over resolve()
- */
-
-/**
- * All non-canonical alias keys in priority order (most specific first).
- * lt-sm is "below sm" (= xs only), lt-md is "below md" (= xs+sm), etc.
- * Narrower range = higher priority = checked first.
- */
-declare const NON_CANONICAL_PRIORITY: readonly ["lt-sm", "lt-md", "lt-lg", "lt-xl", "gt-xs", "gt-sm", "gt-md", "gt-lg"];
-/**
- * Resolution with two-tier priority:
- *
- * 1. Exact breakpoint match  (e.g. currentBp='sm' → values['sm'])
- * 2. Generic `default` value (the unsuffixed input, e.g. [fxFlex]="49")
- *
- * There is deliberately NO cascade between canonical tiers. A suffixed value belongs to its own
- * breakpoint and to no other, which is what ngx-layout does and what fxShow/fxHide already did
- * here. The cascade this replaces made `fxFlex.xs="100"` with no base `fxFlex` apply at every
- * width — the exact opposite of what the `.xs` suffix reads like.
- *
- * So `[fxFlex]="49" [fxFlex.xs]="100"` gives xs→100 and sm+→49, while `[fxFlex.xs]="100"` on its
- * own gives xs→100 and sm+→no style at all.
- * @param values - The value declared for each canonical alias, plus the unsuffixed `default`.
- * @param currentBp - The canonical alias currently active.
- * @returns The value to apply, or `undefined` when no rule covers the current breakpoint.
- */
-declare function resolve<T>(values: BpValues<T>, currentBp: BreakpointAlias): T | undefined;
-/**
- * Non-canonical point-in-time check: iterates NON_CANONICAL_PRIORITY and
- * returns the value for the first alias that isActive().
- */
-declare function resolveNonCanonical<T>(nc: NcValues<T>, isActive: (alias: string) => boolean): T | undefined;
-/**
- * Full resolution: non-canonical overrides win over the canonical cascade.
- *
- * Usage inside computed():
- *   const resolved = computed(() =>
- *     resolveAll(this._v(), this._nc(), this.media.currentBp(), a => this.media.isActive(a))
- *   );
- */
-declare function resolveAll<T>(canonical: BpValues<T>, nonCanonical: NcValues<T>, currentBp: BreakpointAlias, isActive: (alias: string) => boolean): T | undefined;
-declare abstract class ResponsiveBaseDirective {
-    protected readonly el: ElementRef<any>;
-    protected readonly r2: Renderer2;
-    protected readonly media: MediaObserver;
-    /** true in browser, false in SSR */
-    protected readonly isBrowser: boolean;
-    /** SSR-safe style setter. Pass null/empty string to remove the property. */
-    protected safeSetStyle(prop: string, value: string | null): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResponsiveBaseDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ResponsiveBaseDirective, never, never, {}, {}, never, never, true, never>;
-}
-
-declare class FxFlexOrderDirective extends ResponsiveBaseDirective {
-    readonly fxFlexOrder: _angular_core.InputSignal<string>;
+declare function resolveParentFlow(host: HTMLElement, parentLayout: FxLayoutDirective | null, isBrowser: boolean): {
+    direction: string;
+    hasWrap: boolean;
+};
+declare class FxLayoutDirective extends ResponsiveBaseDirective {
+    readonly fxLayout: _angular_core.InputSignal<string>;
     readonly xs: _angular_core.InputSignal<string>;
     readonly sm: _angular_core.InputSignal<string>;
     readonly md: _angular_core.InputSignal<string>;
@@ -1206,15 +1162,19 @@ declare class FxFlexOrderDirective extends ResponsiveBaseDirective {
     readonly gtSm: _angular_core.InputSignal<string>;
     readonly gtMd: _angular_core.InputSignal<string>;
     readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _order;
+    private readonly _parsed;
+    /** Reactive layout parts — readable by FxFlex / FxLayoutAlign / FxFlexOffset. */
+    readonly direction: _angular_core.Signal<string>;
+    readonly wrap: _angular_core.Signal<string>;
+    readonly inline: _angular_core.Signal<boolean>;
+    /** Host element, exposed for direct-parent matching by child directives. */
+    get hostElement(): HTMLElement;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexOrderDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexOrderDirective, "    [fxFlexOrder],    [fxFlexOrder.xs],    [fxFlexOrder.sm],    [fxFlexOrder.md],    [fxFlexOrder.lg],    [fxFlexOrder.xl],    [fxFlexOrder.lt-sm],    [fxFlexOrder.lt-md],    [fxFlexOrder.lt-lg],    [fxFlexOrder.lt-xl],    [fxFlexOrder.gt-xs],    [fxFlexOrder.gt-sm],    [fxFlexOrder.gt-md],    [fxFlexOrder.gt-lg]  ", never, { "fxFlexOrder": { "alias": "fxFlexOrder"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexOrder.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexOrder.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexOrder.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexOrder.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexOrder.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexOrder.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexOrder.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexOrder.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexOrder.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexOrder.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexOrder.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexOrder.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexOrder.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutDirective, "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", never, { "fxLayout": { "alias": "fxLayout"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayout.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayout.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayout.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayout.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayout.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayout.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayout.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayout.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayout.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayout.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayout.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayout.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayout.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-declare class FxFlexOffsetDirective extends ResponsiveBaseDirective {
-    /** Ancestor FxLayout (matched to the direct parent inside resolveParentFlow). */
-    private readonly parentLayout;
-    readonly fxFlexOffset: _angular_core.InputSignal<string>;
+declare class FxLayoutWrapDirective extends ResponsiveBaseDirective {
+    readonly fxLayoutWrap: _angular_core.InputSignal<string>;
     readonly xs: _angular_core.InputSignal<string>;
     readonly sm: _angular_core.InputSignal<string>;
     readonly md: _angular_core.InputSignal<string>;
@@ -1228,305 +1188,17 @@ declare class FxFlexOffsetDirective extends ResponsiveBaseDirective {
     readonly gtSm: _angular_core.InputSignal<string>;
     readonly gtMd: _angular_core.InputSignal<string>;
     readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _offset;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexOffsetDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexOffsetDirective, "    [fxFlexOffset],    [fxFlexOffset.xs],    [fxFlexOffset.sm],    [fxFlexOffset.md],    [fxFlexOffset.lg],    [fxFlexOffset.xl],    [fxFlexOffset.lt-sm],    [fxFlexOffset.lt-md],    [fxFlexOffset.lt-lg],    [fxFlexOffset.lt-xl],    [fxFlexOffset.gt-xs],    [fxFlexOffset.gt-sm],    [fxFlexOffset.gt-md],    [fxFlexOffset.gt-lg]  ", never, { "fxFlexOffset": { "alias": "fxFlexOffset"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexOffset.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexOffset.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexOffset.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexOffset.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexOffset.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexOffset.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexOffset.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexOffset.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexOffset.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexOffset.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexOffset.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexOffset.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexOffset.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-type AlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-declare class FxFlexAlignDirective extends ResponsiveBaseDirective {
-    readonly fxFlexAlign: _angular_core.InputSignal<AlignSelf>;
-    readonly xs: _angular_core.InputSignal<AlignSelf>;
-    readonly sm: _angular_core.InputSignal<AlignSelf>;
-    readonly md: _angular_core.InputSignal<AlignSelf>;
-    readonly lg: _angular_core.InputSignal<AlignSelf>;
-    readonly xl: _angular_core.InputSignal<AlignSelf>;
-    readonly ltSm: _angular_core.InputSignal<AlignSelf>;
-    readonly ltMd: _angular_core.InputSignal<AlignSelf>;
-    readonly ltLg: _angular_core.InputSignal<AlignSelf>;
-    readonly ltXl: _angular_core.InputSignal<AlignSelf>;
-    readonly gtXs: _angular_core.InputSignal<AlignSelf>;
-    readonly gtSm: _angular_core.InputSignal<AlignSelf>;
-    readonly gtMd: _angular_core.InputSignal<AlignSelf>;
-    readonly gtLg: _angular_core.InputSignal<AlignSelf>;
-    private readonly _alignSelf;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexAlignDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexAlignDirective, "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ", never, { "fxFlexAlign": { "alias": "fxFlexAlign"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexAlign.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexAlign.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexAlign.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexAlign.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexAlign.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexAlign.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexAlign.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexAlign.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexAlign.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexAlign.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexAlign.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexAlign.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexAlign.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-type FillValue = 'fill' | 'none' | '' | boolean;
-declare class FxFlexFillDirective extends ResponsiveBaseDirective {
-    readonly fxFlexFill: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly fxFill: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly xs: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly sm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly md: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly lg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly xl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly ltSm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly ltMd: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly ltLg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly ltXl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly gtXs: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly gtSm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly gtMd: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    readonly gtLg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
-    private readonly _active;
+    private readonly _wrap;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexFillDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexFillDirective, "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", never, { "fxFlexFill": { "alias": "fxFlexFill"; "required": false; "isSignal": true; }; "fxFill": { "alias": "fxFill"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexFill.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexFill.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexFill.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexFill.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexFill.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexFill.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexFill.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexFill.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexFill.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexFill.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexFill.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexFill.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexFill.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutWrapDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutWrapDirective, "    [fxLayoutWrap],    [fxLayoutWrap.xs],    [fxLayoutWrap.sm],    [fxLayoutWrap.md],    [fxLayoutWrap.lg],    [fxLayoutWrap.xl],    [fxLayoutWrap.lt-sm],    [fxLayoutWrap.lt-md],    [fxLayoutWrap.lt-lg],    [fxLayoutWrap.lt-xl],    [fxLayoutWrap.gt-xs],    [fxLayoutWrap.gt-sm],    [fxLayoutWrap.gt-md],    [fxLayoutWrap.gt-lg]  ", never, { "fxLayoutWrap": { "alias": "fxLayoutWrap"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutWrap.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutWrap.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutWrap.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutWrap.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutWrap.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutWrap.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutWrap.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutWrap.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutWrap.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutWrap.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutWrap.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutWrap.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutWrap.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Port of ngx validateBasis(): returns [grow, shrink, basis]. */
-declare function validateBasis(basis: string, grow?: string, shrink?: string): string[];
-/**
- * Builds the complete flex style map for a child, given the raw fxFlex value
- * and the parent flow. `null` values mean "remove this property".
- * Matches ngx-layout output exactly (useColumnBasisZero = true, the default).
- */
-declare function buildFlexStyles(value: string, direction: string, hasWrap: boolean): Record<string, string | null>;
 /**
- * Resolves the non-ngx `fxFlex="*"` extension to `grow` (`flex: 1 1 100%`, max-* 100%).
- * Every other value — including a bare `fxFlex` ('') — is returned unchanged, so a bare
- * fxFlex keeps the ngx-layout default (`1 1 0%` in row, `1 1 0.000000001px` in column).
- * @param raw - The resolved fxFlex value for the active breakpoint.
- * @returns The value to pass to `buildFlexStyles`.
- */
-declare function resolveFlexInput(raw: string): string;
-declare class FxFlexDirective extends ResponsiveBaseDirective {
-    /** Direct ancestor FxLayout (any level); matched to the direct parent in the effect. */
-    private readonly parentLayout;
-    readonly fxFlex: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _rawFlex;
-    /** CSS properties applied on the last effect run (for stale cleanup). */
-    private _applied;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexDirective, "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", never, { "fxFlex": { "alias": "fxFlex"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlex.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlex.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlex.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlex.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlex.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlex.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlex.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlex.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlex.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlex.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlex.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlex.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlex.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-declare class FxGridDirective extends ResponsiveBaseDirective {
-    readonly fxGrid: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    readonly fxGridRows: _angular_core.InputSignal<string>;
-    readonly rowsXs: _angular_core.InputSignal<string>;
-    readonly rowsSm: _angular_core.InputSignal<string>;
-    readonly rowsMd: _angular_core.InputSignal<string>;
-    readonly rowsLg: _angular_core.InputSignal<string>;
-    readonly rowsXl: _angular_core.InputSignal<string>;
-    readonly rowsLtSm: _angular_core.InputSignal<string>;
-    readonly rowsLtMd: _angular_core.InputSignal<string>;
-    readonly rowsLtLg: _angular_core.InputSignal<string>;
-    readonly rowsLtXl: _angular_core.InputSignal<string>;
-    readonly rowsGtXs: _angular_core.InputSignal<string>;
-    readonly rowsGtSm: _angular_core.InputSignal<string>;
-    readonly rowsGtMd: _angular_core.InputSignal<string>;
-    readonly rowsGtLg: _angular_core.InputSignal<string>;
-    readonly fxGridGap: _angular_core.InputSignal<string>;
-    readonly gapXs: _angular_core.InputSignal<string>;
-    readonly gapSm: _angular_core.InputSignal<string>;
-    readonly gapMd: _angular_core.InputSignal<string>;
-    readonly gapLg: _angular_core.InputSignal<string>;
-    readonly gapXl: _angular_core.InputSignal<string>;
-    readonly gapLtSm: _angular_core.InputSignal<string>;
-    readonly gapLtMd: _angular_core.InputSignal<string>;
-    readonly gapLtLg: _angular_core.InputSignal<string>;
-    readonly gapLtXl: _angular_core.InputSignal<string>;
-    readonly gapGtXs: _angular_core.InputSignal<string>;
-    readonly gapGtSm: _angular_core.InputSignal<string>;
-    readonly gapGtMd: _angular_core.InputSignal<string>;
-    readonly gapGtLg: _angular_core.InputSignal<string>;
-    private readonly _cols;
-    private readonly _rows;
-    private readonly _gap;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridDirective, "    [fxGrid],    [fxGrid.xs],    [fxGrid.sm],    [fxGrid.md],    [fxGrid.lg],    [fxGrid.xl],    [fxGrid.lt-sm],    [fxGrid.lt-md],    [fxGrid.lt-lg],    [fxGrid.lt-xl],    [fxGrid.gt-xs],    [fxGrid.gt-sm],    [fxGrid.gt-md],    [fxGrid.gt-lg]  ", never, { "fxGrid": { "alias": "fxGrid"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGrid.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGrid.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGrid.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGrid.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGrid.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGrid.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGrid.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGrid.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGrid.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGrid.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGrid.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGrid.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGrid.gt-lg"; "required": false; "isSignal": true; }; "fxGridRows": { "alias": "fxGridRows"; "required": false; "isSignal": true; }; "rowsXs": { "alias": "fxGridRows.xs"; "required": false; "isSignal": true; }; "rowsSm": { "alias": "fxGridRows.sm"; "required": false; "isSignal": true; }; "rowsMd": { "alias": "fxGridRows.md"; "required": false; "isSignal": true; }; "rowsLg": { "alias": "fxGridRows.lg"; "required": false; "isSignal": true; }; "rowsXl": { "alias": "fxGridRows.xl"; "required": false; "isSignal": true; }; "rowsLtSm": { "alias": "fxGridRows.lt-sm"; "required": false; "isSignal": true; }; "rowsLtMd": { "alias": "fxGridRows.lt-md"; "required": false; "isSignal": true; }; "rowsLtLg": { "alias": "fxGridRows.lt-lg"; "required": false; "isSignal": true; }; "rowsLtXl": { "alias": "fxGridRows.lt-xl"; "required": false; "isSignal": true; }; "rowsGtXs": { "alias": "fxGridRows.gt-xs"; "required": false; "isSignal": true; }; "rowsGtSm": { "alias": "fxGridRows.gt-sm"; "required": false; "isSignal": true; }; "rowsGtMd": { "alias": "fxGridRows.gt-md"; "required": false; "isSignal": true; }; "rowsGtLg": { "alias": "fxGridRows.gt-lg"; "required": false; "isSignal": true; }; "fxGridGap": { "alias": "fxGridGap"; "required": false; "isSignal": true; }; "gapXs": { "alias": "fxGridGap.xs"; "required": false; "isSignal": true; }; "gapSm": { "alias": "fxGridGap.sm"; "required": false; "isSignal": true; }; "gapMd": { "alias": "fxGridGap.md"; "required": false; "isSignal": true; }; "gapLg": { "alias": "fxGridGap.lg"; "required": false; "isSignal": true; }; "gapXl": { "alias": "fxGridGap.xl"; "required": false; "isSignal": true; }; "gapLtSm": { "alias": "fxGridGap.lt-sm"; "required": false; "isSignal": true; }; "gapLtMd": { "alias": "fxGridGap.lt-md"; "required": false; "isSignal": true; }; "gapLtLg": { "alias": "fxGridGap.lt-lg"; "required": false; "isSignal": true; }; "gapLtXl": { "alias": "fxGridGap.lt-xl"; "required": false; "isSignal": true; }; "gapGtXs": { "alias": "fxGridGap.gt-xs"; "required": false; "isSignal": true; }; "gapGtSm": { "alias": "fxGridGap.gt-sm"; "required": false; "isSignal": true; }; "gapGtMd": { "alias": "fxGridGap.gt-md"; "required": false; "isSignal": true; }; "gapGtLg": { "alias": "fxGridGap.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-declare class FxGridColumnDirective extends ResponsiveBaseDirective {
-    readonly fxGridColumn: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _resolved;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridColumnDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridColumnDirective, "    [fxGridColumn],    [fxGridColumn.xs],    [fxGridColumn.sm],    [fxGridColumn.md],    [fxGridColumn.lg],    [fxGridColumn.xl],    [fxGridColumn.lt-sm],    [fxGridColumn.lt-md],    [fxGridColumn.lt-lg],    [fxGridColumn.lt-xl],    [fxGridColumn.gt-xs],    [fxGridColumn.gt-sm],    [fxGridColumn.gt-md],    [fxGridColumn.gt-lg]  ", never, { "fxGridColumn": { "alias": "fxGridColumn"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGridColumn.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGridColumn.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGridColumn.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGridColumn.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGridColumn.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGridColumn.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGridColumn.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGridColumn.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGridColumn.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGridColumn.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGridColumn.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGridColumn.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGridColumn.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-declare class FxGridAreaDirective extends ResponsiveBaseDirective {
-    readonly fxGridArea: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _resolved;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridAreaDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridAreaDirective, "    [fxGridArea],    [fxGridArea.xs],    [fxGridArea.sm],    [fxGridArea.md],    [fxGridArea.lg],    [fxGridArea.xl],    [fxGridArea.lt-sm],    [fxGridArea.lt-md],    [fxGridArea.lt-lg],    [fxGridArea.lt-xl],    [fxGridArea.gt-xs],    [fxGridArea.gt-sm],    [fxGridArea.gt-md],    [fxGridArea.gt-lg]  ", never, { "fxGridArea": { "alias": "fxGridArea"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGridArea.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGridArea.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGridArea.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGridArea.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGridArea.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGridArea.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGridArea.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGridArea.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGridArea.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGridArea.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGridArea.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGridArea.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGridArea.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-/**
- * Port of ngx LayoutAlignStyleBuilder.buildStyles.
- * `null` values mean "remove the property".
- */
-declare function buildAlignStyles(align: string, layoutDirection: string, inline: boolean): Record<string, string | null>;
-declare class FxLayoutAlignDirective extends ResponsiveBaseDirective {
-    /** FxLayout on the same host (optional): direction/inline read reactively. */
-    private readonly selfLayout;
-    readonly fxLayoutAlign: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _align;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutAlignDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutAlignDirective, "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", never, { "fxLayoutAlign": { "alias": "fxLayoutAlign"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutAlign.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutAlign.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutAlign.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutAlign.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutAlign.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutAlign.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutAlign.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutAlign.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutAlign.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutAlign.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutAlign.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutAlign.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutAlign.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-declare class FxLayoutGapDirective extends ResponsiveBaseDirective {
-    readonly fxLayoutGap: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _gap;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutGapDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutGapDirective, "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", never, { "fxLayoutGap": { "alias": "fxLayoutGap"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutGap.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutGap.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutGap.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutGap.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutGap.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutGap.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutGap.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutGap.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutGap.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutGap.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutGap.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutGap.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutGap.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-declare const LAYOUT_VALUES: readonly ["row", "column", "row-reverse", "column-reverse"];
-/** Port of ngx-layout validateWrapValue(). */
-declare function validateWrapValue(value: string): string;
-/** Port of ngx-layout validateValue(): [direction, wrap, inline]. */
-declare function validateLayoutValue(value: string): [string, string, boolean];
-/** Port of ngx-layout buildLayoutCSS(): null values mean "remove the property". */
-declare function buildLayoutCSS(value: string): Record<string, string | null>;
-/**
- * Resolves the flex flow of the parent container for a flex child.
- * Prefers the reactive FxLayoutDirective instance when it sits on the DIRECT
- * parent element (signal read → re-evaluates with the parent); falls back to
- * getComputedStyle for plain-CSS flex parents; SSR-safe defaults.
- */
-declare function resolveParentFlow(host: HTMLElement, parentLayout: FxLayoutDirective | null, isBrowser: boolean): {
-    direction: string;
-    hasWrap: boolean;
-};
-declare class FxLayoutDirective extends ResponsiveBaseDirective {
-    readonly fxLayout: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _parsed;
-    /** Reactive layout parts — readable by FxFlex / FxLayoutAlign / FxFlexOffset. */
-    readonly direction: _angular_core.Signal<string>;
-    readonly wrap: _angular_core.Signal<string>;
-    readonly inline: _angular_core.Signal<boolean>;
-    /** Host element, exposed for direct-parent matching by child directives. */
-    get hostElement(): HTMLElement;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutDirective, "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", never, { "fxLayout": { "alias": "fxLayout"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayout.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayout.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayout.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayout.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayout.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayout.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayout.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayout.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayout.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayout.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayout.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayout.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayout.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-declare class FxLayoutWrapDirective extends ResponsiveBaseDirective {
-    readonly fxLayoutWrap: _angular_core.InputSignal<string>;
-    readonly xs: _angular_core.InputSignal<string>;
-    readonly sm: _angular_core.InputSignal<string>;
-    readonly md: _angular_core.InputSignal<string>;
-    readonly lg: _angular_core.InputSignal<string>;
-    readonly xl: _angular_core.InputSignal<string>;
-    readonly ltSm: _angular_core.InputSignal<string>;
-    readonly ltMd: _angular_core.InputSignal<string>;
-    readonly ltLg: _angular_core.InputSignal<string>;
-    readonly ltXl: _angular_core.InputSignal<string>;
-    readonly gtXs: _angular_core.InputSignal<string>;
-    readonly gtSm: _angular_core.InputSignal<string>;
-    readonly gtMd: _angular_core.InputSignal<string>;
-    readonly gtLg: _angular_core.InputSignal<string>;
-    private readonly _wrap;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutWrapDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutWrapDirective, "    [fxLayoutWrap],    [fxLayoutWrap.xs],    [fxLayoutWrap.sm],    [fxLayoutWrap.md],    [fxLayoutWrap.lg],    [fxLayoutWrap.xl],    [fxLayoutWrap.lt-sm],    [fxLayoutWrap.lt-md],    [fxLayoutWrap.lt-lg],    [fxLayoutWrap.lt-xl],    [fxLayoutWrap.gt-xs],    [fxLayoutWrap.gt-sm],    [fxLayoutWrap.gt-md],    [fxLayoutWrap.gt-lg]  ", never, { "fxLayoutWrap": { "alias": "fxLayoutWrap"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutWrap.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutWrap.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutWrap.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutWrap.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutWrap.xl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutWrap.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutWrap.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutWrap.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutWrap.lt-xl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutWrap.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutWrap.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutWrap.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutWrap.gt-lg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-/**
- * Pure visibility transition (exported for tests).
- * Captures the inline display before hiding and restores it when shown again,
- * so display:flex|grid written by FxLayout/FxGrid effects is never lost.
- * @returns the new "previous display" state to carry to the next transition
+ * Pure visibility transition (exported for tests).
+ * Captures the inline display before hiding and restores it when shown again,
+ * so display:flex|grid written by FxLayout/FxGrid effects is never lost.
+ * @returns the new "previous display" state to carry to the next transition
  */
 declare function applyVisibility(el: {
     style: {
@@ -1623,5 +1295,647 @@ declare class FlexLayoutModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FlexLayoutModule>;
 }
 
-export { ALIAS_FAMILIES, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DEFAULT_NAVIGATION_AUTO_VARIANTS, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, EXPANDED_NAVIGATION_VARIANTS, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, NavigationBarComponent, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
-export type { BpValues, BreakpointAlias, CanonicalKey, ConfirmDialogData, ConfirmDialogOption, CredentialsDialogData, CredentialsDialogResult, DeleteDialogData, DialogOption, DialogResult, IDialogService, InfoDialogData, NavigationAlignment, NavigationAutoVariants, NavigationBadge, NavigationItem, NavigationItemLayout, NavigationLabelVisibility, NavigationPosition, NavigationSection, NavigationSelection, NavigationVariant, NcValues, NonCanonicalKey, RecoverPasswordDialogData, RecoverPasswordDialogResult, ResetPasswordDialogData, ResetPasswordDialogMode, ResetPasswordDialogResult, ResolvedNavigationVariant, ToastData };
+/**
+ * @file navigation.definitions.ts
+ *
+ * Data model shared by every variant of the Material Design 3 (Expressive)
+ * navigation component: Navigation bar, Navigation rail (collapsed and
+ * expanded) and Navigation drawer (standard and modal).
+ *
+ * Reference: https://m3.material.io/components/navigation-bar/specs
+ *            https://m3.material.io/components/navigation-rail/specs
+ *            https://m3.material.io/components/navigation-drawer/specs
+ */
+
+/**
+ * Rendering variants supported by the component.
+ *
+ * - `bar`            — Navigation bar, horizontal, anchored to the bottom edge (compact windows).
+ * - `rail`           — Collapsed navigation rail, vertical, 96dp wide (medium / expanded windows).
+ * - `rail-expanded`  — Expanded navigation rail, 220dp+, labels beside icons, supports sections.
+ * - `drawer`         — Standard navigation drawer, 360dp, inline with the page content.
+ * - `modal`          — Modal navigation drawer: same as `drawer` but overlaid on a scrim.
+ * - `auto`           — Resolved at runtime from the active CDK breakpoint (see `autoVariants`).
+ */
+type NavigationVariant = 'auto' | 'bar' | 'rail' | 'rail-expanded' | 'drawer' | 'modal';
+/** Variants that can actually be rendered, i.e. every variant except `auto`. */
+type ResolvedNavigationVariant = Exclude<NavigationVariant, 'auto'>;
+/**
+ * Label visibility policy, mirroring the four Material label visibility modes.
+ *
+ * - `auto`       — Labels are always shown (current M3 guidance).
+ * - `labeled`    — Labels are always shown.
+ * - `selected`   — Only the active destination shows its label (legacy M3 "auto" behaviour).
+ * - `unlabeled`  — Icons only; the accessible name comes from `aria-label` / tooltip.
+ */
+type NavigationLabelVisibility = 'auto' | 'labeled' | 'selected' | 'unlabeled';
+/**
+ * Item layout inside a destination.
+ *
+ * - `vertical`   — Icon stacked above the label (M3 default for compact windows).
+ * - `horizontal` — Icon at the start of the label (M3 Expressive, medium windows and above).
+ * - `auto`       — `vertical` on compact windows, `horizontal` from 600dp upwards; always
+ *                  `horizontal` for the expanded rail and the drawer.
+ */
+type NavigationItemLayout = 'auto' | 'vertical' | 'horizontal';
+/** Vertical alignment of the destination list inside a rail. */
+type NavigationAlignment = 'top' | 'center' | 'bottom';
+/** Side the rail / drawer is anchored to. Automatically mirrored in RTL. */
+type NavigationPosition = 'start' | 'end';
+/**
+ * Badge attached to a destination.
+ * When `value` is `undefined` a small dot badge is rendered, otherwise a large
+ * badge showing the value (clamped to `max`).
+ */
+interface NavigationBadge {
+    /** Numeric or textual content of the badge. Leave `undefined` for a dot badge. */
+    value?: number | string;
+    /** Upper bound for numeric values; above it the badge renders `${max}+`. Defaults to 999. */
+    max?: number;
+    /** Accessible description announced together with the destination label. */
+    ariaLabel?: string;
+    /** Optional CSS colour override for this badge only. */
+    color?: string;
+}
+/**
+ * Frame indices of a sprite sheet, one per interaction state.
+ *
+ * The same shape describes the light set (declared inline on the sprite) and the
+ * dark set (declared under `NavigationIconSprite.dark`), so a sheet holding both
+ * themes needs no duplicated geometry.
+ */
+interface NavigationSpriteFrames {
+    /** Zero-based frame index for the resting state. Defaults to 0. */
+    normal?: number;
+    /** Frame index used on hover and on keyboard focus. Defaults to `normal`. */
+    hover?: number;
+    /** Frame index used when the destination is selected. Defaults to `hover`. */
+    active?: number;
+    /** Frame index used when the destination is disabled. Defaults to `normal`. */
+    disabled?: number;
+}
+/**
+ * Sprite sheet descriptor: a single image holding every state frame of an icon,
+ * revealed by shifting `background-position` — no extra request per state.
+ *
+ * Frames are assumed to be square and evenly spaced, laid out along a single
+ * axis. Two geometries are described, and they are NOT the same thing:
+ *  - `size` is the side of a frame INSIDE the image file;
+ *  - `renderSize` is the side the icon is actually drawn at.
+ * The component rescales the whole sheet through `background-size`, so a strip
+ * of 26px frames can be drawn at the 24px of the surrounding Material icons
+ * without the neighbouring frames bleeding in.
+ *
+ * The frame indices declared inline are the light-theme set; `dark` overrides
+ * the ones that differ when the dark theme is active. A sheet that carries a
+ * single set simply omits `dark`.
+ */
+interface NavigationIconSprite extends NavigationSpriteFrames {
+    /** URL of the sprite sheet. */
+    url: string;
+    /** Side of a single frame inside the image file, in pixels. Defaults to 24. */
+    size?: number;
+    /** Side the icon is drawn at, in pixels. Defaults to `size`. */
+    renderSize?: number;
+    /**
+     * Total number of frames in the sheet, needed to rescale it.
+     * Defaults to the highest referenced frame index plus one, which is correct
+     * for any sheet that has no trailing unused frame.
+     */
+    frames?: number;
+    /** Axis the frames are laid out along. Defaults to `vertical`. */
+    direction?: 'vertical' | 'horizontal';
+    /** Frame indices used when the dark theme is active. Defaults to the light ones. */
+    dark?: NavigationSpriteFrames;
+}
+/** A single navigation destination. */
+interface NavigationItem {
+    /** Stable unique identifier; used as the `@for` track key and as the selection value. */
+    id: string;
+    /** Visible label. Also used as the accessible name and as the tooltip fallback. */
+    label: string;
+    /** Material Symbols ligature rendered when the destination is NOT selected. */
+    icon?: string;
+    /** Material Symbols ligature rendered when the destination IS selected (usually the filled variant). */
+    activeIcon?: string;
+    /** Path of a raster / vector image rendered as the icon. Takes precedence over `icon`. */
+    imageIcon?: string;
+    /** Image used when the destination is selected. Takes precedence over `activeIcon`. */
+    activeImageIcon?: string;
+    /**
+     * Sprite sheet holding every state frame of the icon. Takes precedence over
+     * `imageIcon` and `icon`; state changes cost one `background-position` shift.
+     */
+    sprite?: NavigationIconSprite;
+    /** Name of an SVG icon registered in `MatIconRegistry`; takes precedence over `icon`. */
+    svgIcon?: string;
+    /** SVG icon used when the destination is selected; takes precedence over `activeIcon`. */
+    activeSvgIcon?: string;
+    /** Badge shown on top of the icon (collapsed variants) or at the trailing edge (expanded variants). */
+    badge?: NavigationBadge;
+    /** Short trailing text shown at the end of the row in the expanded rail and in the drawer. */
+    trailing?: string;
+    /** When `true` the destination is rendered dimmed and is not interactive. */
+    disabled?: boolean;
+    /**
+     * When `true` the destination is not rendered inline in the compact variants:
+     * it is moved into the overflow menu instead. Which variants count as compact
+     * is decided by the component's `overflowMode` input.
+     */
+    hideWhenCompact?: boolean;
+    /** Tooltip text; defaults to `label` when the label is not visible. */
+    tooltip?: string;
+    /** Router commands used to build the destination URL. */
+    route?: string | readonly unknown[];
+    /** Query parameters appended to `route`. */
+    queryParams?: Record<string, unknown>;
+    /** Fragment appended to `route`. */
+    fragment?: string;
+    /** When `true` the route must match the whole URL to mark the destination active. Defaults to `false`. */
+    exact?: boolean;
+    /** External URL. Rendered as a plain anchor and never matched against the router. */
+    href?: string;
+    /** Anchor target used together with `href`. */
+    target?: string;
+    /** Explicit accessible name, when the visible label is not descriptive enough. */
+    ariaLabel?: string;
+    /**
+     * Nested destinations. A destination with children never navigates on its own:
+     * clicking it expands the group inline (expanded rail / drawer) or opens it in
+     * a floating panel (bar / collapsed rail).
+     */
+    children?: readonly NavigationItem[];
+    /** Initial expansion state of a destination that has `children`. Defaults to `false`. */
+    expanded?: boolean;
+    /**
+     * Edge the destination is pinned to inside a rail or a drawer.
+     * `bottom` destinations are pushed to the end of the surface. Ignored by the
+     * navigation bar, where every destination shares the same row.
+     */
+    align?: 'top' | 'bottom';
+    /** Arbitrary payload echoed back in `NavigationSelection`. */
+    data?: unknown;
+}
+/**
+ * A group of destinations. Section headlines and dividers are only rendered by
+ * the expanded rail and by the drawer, exactly as described by the M3 specs.
+ */
+interface NavigationSection {
+    /** Stable unique identifier; used as the `@for` track key. */
+    id: string;
+    /** Optional headline rendered above the group. */
+    label?: string;
+    /** Destinations belonging to the section. */
+    items: readonly NavigationItem[];
+    /** When `true` a divider is rendered after the section. */
+    divider?: boolean;
+}
+/** Payload emitted when a destination is activated. */
+interface NavigationSelection {
+    /** The activated destination. */
+    item: NavigationItem;
+    /** The section the destination belongs to, when sections are in use. */
+    section?: NavigationSection;
+    /** The parent destination, when a nested destination was activated. */
+    parent?: NavigationItem;
+    /** Zero-based index of the destination across the whole flattened list. */
+    index: number;
+}
+/**
+ * Policy deciding where `hideWhenCompact` destinations are collapsed into the
+ * overflow menu.
+ *
+ * - `bar`     — only in the navigation bar (default).
+ * - `compact` — in the navigation bar and in the collapsed rail.
+ * - `never`   — `hideWhenCompact` is ignored and every destination stays inline.
+ */
+type NavigationOverflowMode = 'bar' | 'compact' | 'never';
+/**
+ * Identifier of the synthesized overflow destination. Use it to recognise the
+ * overflow entry inside `itemSelected`.
+ */
+declare const NAVIGATION_OVERFLOW_ID = "__overflow";
+/** Map of breakpoint alias to the variant used when `variant` is `auto`. */
+type NavigationAutoVariants = Partial<Record<BreakpointAlias, ResolvedNavigationVariant>>;
+/**
+ * Default `auto` mapping, aligned with the Material 3 window size classes:
+ * compact windows get the navigation bar, medium and expanded windows get the
+ * collapsed rail, large and extra-large windows get the expanded rail.
+ */
+declare const DEFAULT_NAVIGATION_AUTO_VARIANTS: Required<NavigationAutoVariants>;
+/** Variants that render labels beside the icon and support sections and dividers. */
+declare const EXPANDED_NAVIGATION_VARIANTS: readonly ResolvedNavigationVariant[];
+
+/** Internal, pre-computed render model for a single destination. */
+interface NavigationRenderItem {
+    /** The source destination. */
+    readonly item: NavigationItem;
+    /** Owning section, when sections are in use. */
+    readonly section?: NavigationSection;
+    /** Parent destination, for nested destinations. */
+    readonly parent?: NavigationItem;
+    /** Zero-based index across the whole flattened destination list. */
+    readonly index: number;
+    /** Nesting level: `0` for a root destination. */
+    readonly depth: number;
+    /** Resolved URL, when the destination is routed or external. */
+    readonly href?: string;
+    /** `true` when the destination navigates through the Angular router. */
+    readonly routed: boolean;
+    /** Material Symbols ligature for the unselected state. */
+    readonly iconOff?: string;
+    /** Material Symbols ligature for the selected state. */
+    readonly iconOn?: string;
+    /** Registered SVG icon name for the unselected state. */
+    readonly svgOff?: string;
+    /** Registered SVG icon name for the selected state. */
+    readonly svgOn?: string;
+    /** Image URL for the unselected state. */
+    readonly imageOff?: string;
+    /** Image URL for the selected state. */
+    readonly imageOn?: string;
+    /** Inline custom properties driving a sprite-sheet icon, when one is used. */
+    readonly spriteStyle?: Record<string, string>;
+    /** Rendered badge text; empty string means "dot badge". */
+    readonly badgeText: string;
+    /** `true` when the destination carries a badge of any kind. */
+    readonly hasBadge: boolean;
+    /** `true` when the destination never renders its label, whatever the label policy. */
+    readonly iconOnly: boolean;
+    /** `true` when the destination owns nested destinations. */
+    readonly hasChildren: boolean;
+    /** Pre-computed render models of the nested destinations. */
+    readonly children: readonly NavigationRenderItem[];
+    /** Accessible name announced for the destination. */
+    readonly ariaLabel: string;
+    /** Tooltip text used when the label is not visible. */
+    readonly tooltip: string;
+}
+/** Internal render model for a section and its destinations. */
+interface NavigationRenderSection {
+    /** The source section. */
+    readonly section: NavigationSection;
+    /** Destinations of the section. */
+    readonly items: readonly NavigationRenderItem[];
+}
+/** Internal render model for one row of the floating submenu panel. */
+interface NavigationPanelEntry {
+    /** Stable `@for` track key. */
+    readonly key: string;
+    /** Heading text, when the row is a group heading. */
+    readonly label?: string;
+    /** Destination to render, when the row is an actual entry. */
+    readonly render?: NavigationRenderItem;
+}
+/** Internal render model for one of the two anchoring groups of a surface. */
+interface NavigationRenderGroup {
+    /** Edge the group is pinned to. */
+    readonly align: 'top' | 'bottom';
+    /** Sections belonging to the group. */
+    readonly sections: readonly NavigationRenderSection[];
+}
+declare class NavigationBarComponent {
+    private readonly media;
+    private readonly themeService;
+    private readonly router;
+    private readonly directionality;
+    private readonly hostRef;
+    private readonly destroyRef;
+    /** Flat list of destinations. Ignored when `sections` is provided. */
+    readonly items: _angular_core.InputSignal<readonly NavigationItem[]>;
+    /** Grouped destinations. Section headlines and dividers only render in the expanded variants. */
+    readonly sections: _angular_core.InputSignal<readonly NavigationSection[]>;
+    /** Rendering variant. `auto` resolves from the active breakpoint through `autoVariants`. */
+    readonly variant: _angular_core.InputSignal<NavigationVariant>;
+    /** Breakpoint → variant map used when `variant` is `auto`. Missing entries fall back to the M3 defaults. */
+    readonly autoVariants: _angular_core.InputSignal<Partial<Record<"xs" | "sm" | "md" | "lg" | "xl", ResolvedNavigationVariant>>>;
+    /** Two-way bound id of the selected destination. The router, when active, takes precedence. */
+    readonly selectedId: _angular_core.ModelSignal<string>;
+    /**
+     * Two-way bound ids of the expanded parent destinations.
+     * Leave unbound (`undefined`) to let the component manage the expansion state
+     * on its own, seeding it from `NavigationItem.expanded` and auto-opening the
+     * ancestors of the active destination.
+     */
+    readonly expandedIds: _angular_core.ModelSignal<readonly string[]>;
+    /** Two-way bound open state of the modal drawer. Ignored by the other variants. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Label visibility policy. */
+    readonly labelVisibility: _angular_core.InputSignal<NavigationLabelVisibility>;
+    /** Icon / label arrangement inside a destination. */
+    readonly itemLayout: _angular_core.InputSignal<NavigationItemLayout>;
+    /** Vertical alignment of the `top` destination group inside a rail. */
+    readonly alignment: _angular_core.InputSignal<NavigationAlignment>;
+    /** Edge the rail / drawer is anchored to. Mirrored automatically in RTL. */
+    readonly position: _angular_core.InputSignal<NavigationPosition>;
+    /** Headline rendered above the destinations in the expanded rail and in the drawer. */
+    readonly headline: _angular_core.InputSignal<string>;
+    /** When `true` a leading menu button is rendered; it emits `menuClick`. */
+    readonly showMenuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Material Symbols ligature used by the menu button. */
+    readonly menuIcon: _angular_core.InputSignal<string>;
+    /** Material Symbols ligature used by the expand / collapse chevron. */
+    readonly expandIcon: _angular_core.InputSignal<string>;
+    /** Where `hideWhenCompact` destinations are collapsed into the overflow menu. */
+    readonly overflowMode: _angular_core.InputSignal<NavigationOverflowMode>;
+    /** Material Symbols ligature of the overflow destination. */
+    readonly overflowIcon: _angular_core.InputSignal<string>;
+    /** Accessible name and tooltip of the overflow destination, which renders icon-only. */
+    readonly overflowLabel: _angular_core.InputSignal<string>;
+    /**
+     * Hard cap on the destinations rendered inline in the compact variants,
+     * applied per anchoring group. The overflow destination counts as one slot.
+     * `0` disables the cap; the M3 specs recommend 3 to 5 for the navigation bar.
+     */
+    readonly maxVisibleItems: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Accessible name of the menu button. */
+    readonly menuAriaLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the navigation landmark. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** When `true` a scrim is rendered behind the modal drawer. */
+    readonly scrim: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` the modal drawer closes as soon as a destination is activated. */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` the surface gets the M3 elevation-3 shadow. */
+    readonly elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` a 1px divider separates the surface from the page content. */
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` tooltips are shown for destinations whose label is not visible. */
+    readonly tooltips: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` the selection follows the current router URL. */
+    readonly routerSync: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Route used to resolve relative `route` commands. Absolute resolution when omitted. */
+    readonly relativeTo: _angular_core.InputSignal<ActivatedRoute>;
+    /** Explicit surface width in pixels for the rail / drawer variants. `0` keeps the spec default. */
+    readonly width: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** When `true` the whole surface is hidden (animated off-screen) without being destroyed. */
+    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emitted when a destination is activated by the user. */
+    readonly itemSelected: _angular_core.OutputEmitterRef<NavigationSelection>;
+    /** Emitted when the leading menu button is pressed. */
+    readonly menuClick: _angular_core.OutputEmitterRef<void>;
+    /** Focusable destination elements, in DOM order; used for keyboard roving. */
+    private readonly itemElements;
+    /** Focusable entries of the floating submenu panel, in DOM order. */
+    private readonly panelElements;
+    /** Current router URL, kept in a signal so the template stays zoneless-friendly. */
+    private readonly routerUrl;
+    /**
+     * Ticks whenever the application theme moves. The emitted value is ignored on
+     * purpose: it is a change notification, not the answer.
+     *
+     * Reads `themeService`, so it MUST stay below the injected dependencies: moved
+     * above them it would read `undefined`, `?? EMPTY` would swallow it and the
+     * theme would silently stop propagating, with nothing to show for it at
+     * compile time.
+     */
+    private readonly themeChanged;
+    /**
+     * `true` when the dark theme is active; selects the dark frame set of a sprite.
+     *
+     * The answer comes from `getTheme()`, the only one that resolves `auto`
+     * against the OS preference. `getTheme()` already reads a signal for the
+     * explicit modes, so `themeChanged()` is read for the one case that is not
+     * reactive on its own: mode `auto` plus a change of the OS colour scheme,
+     * which leaves the stored mode on `auto` and only travels through `changed`.
+     * Falls back to the light set when no `ThemeService` is provided.
+     */
+    private readonly isDark;
+    /** Id of the destination whose children are currently shown in the floating panel. */
+    private readonly popupId;
+    /**
+     * Destination whose children are currently shown in the floating panel.
+     *
+     * Derived from the id and NOT stored as an object: the render model is rebuilt
+     * whenever the destinations, the resolved URLs or the theme change, and a
+     * stored object would keep the panel painting the sprite frames of the
+     * previous theme until the panel is closed and reopened.
+     *
+     * The search is recursive because a panel entry can itself own children and
+     * open a panel of its own, and those nested render models are not part of the
+     * top level of `visibleGroups`.
+     *
+     * Reads `visibleGroups`, which is declared further down: safe because
+     * `computed` is lazy and nothing reads this before the first render — the
+     * opposite of `themeChanged` above, which reads its dependency immediately.
+     */
+    protected readonly popupItem: _angular_core.Signal<NavigationRenderItem>;
+    /** Element the floating panel is anchored to. */
+    private readonly popupAnchor;
+    constructor();
+    /** Sections actually rendered: the `sections` input, or a single implicit section wrapping `items`. */
+    private readonly resolvedSections;
+    /** Every destination, nested ones included, in depth-first order. */
+    private readonly allItems;
+    /** Map of destination id to the id of its parent destination. */
+    private readonly parentOf;
+    /** The variant to render, resolving `auto` against the active CDK breakpoint. */
+    protected readonly resolvedVariant: _angular_core.Signal<ResolvedNavigationVariant>;
+    /** `true` for the variants that render labels beside icons and support sections. */
+    protected readonly isExpanded: _angular_core.Signal<boolean>;
+    /** `true` when the surface is the modal drawer. */
+    protected readonly isModal: _angular_core.Signal<boolean>;
+    /** `true` when the modal drawer is currently open. */
+    protected readonly isOverlayOpen: _angular_core.Signal<boolean>;
+    /** `true` when the surface must be visually hidden. */
+    protected readonly isHidden: _angular_core.Signal<boolean>;
+    /** Resolved icon / label arrangement. */
+    protected readonly resolvedLayout: _angular_core.Signal<"vertical" | "horizontal">;
+    /** Resolved label visibility; the expanded variants always show labels. */
+    protected readonly resolvedLabelVisibility: _angular_core.Signal<"labeled" | "selected" | "unlabeled">;
+    /** `true` when the headline row (menu button, headline text) is rendered. */
+    protected readonly showsHeader: _angular_core.Signal<boolean>;
+    /**
+     * Geometry of the active indicator:
+     * `compact` wraps the icon only (56x32 pill), `wide` wraps icon and label
+     * together, exactly as described by the M3 Expressive specs.
+     */
+    protected readonly indicatorMode: _angular_core.Signal<"compact" | "wide">;
+    /** Tooltip placement derived from the variant and from the anchoring edge. */
+    protected readonly tooltipPosition: _angular_core.Signal<TooltipPosition>;
+    /** Inline width override for the rail / drawer, or `undefined` to keep the spec default. */
+    protected readonly widthStyle: _angular_core.Signal<string>;
+    /** Map of destination id to resolved URL. Recomputed only when the destinations change. */
+    private readonly hrefs;
+    /**
+     * Static render model, rebuilt only when the destinations, the resolved URLs
+     * or the theme change — never when the selection or the expansion state
+     * changes. The theme is a dependency because sprite icons carry one frame set
+     * per theme, and the frames are baked into the inline style of the icon.
+     */
+    private readonly renderGroups;
+    /** Id of the destination matching the current router URL, using longest-prefix matching. */
+    private readonly routerActiveId;
+    /** Id of the currently active destination: router URL first, explicit selection as fallback. */
+    protected readonly activeId: _angular_core.Signal<string>;
+    /**
+     * Expansion state used when `expandedIds` is left unbound: the destinations
+     * flagged `expanded`, plus every ancestor of the active destination.
+     */
+    private readonly defaultExpandedIds;
+    /** Ids of the parent destinations currently expanded. */
+    protected readonly expandedSet: _angular_core.Signal<ReadonlySet<string>>;
+    /** `true` when the current variant collapses `hideWhenCompact` destinations into the overflow menu. */
+    protected readonly overflowApplies: _angular_core.Signal<boolean>;
+    /**
+     * Render model actually walked by the template: the static model with the
+     * compact-only destinations moved into the overflow menu and the children of
+     * the expanded parents spliced in.
+     */
+    protected readonly visibleGroups: _angular_core.Signal<readonly NavigationRenderGroup[]>;
+    /**
+     * Ids rendered with the selected styling. It is the active destination when it
+     * is on screen, otherwise every rendered parent hiding it — a collapsed branch
+     * or the overflow entry — so the user still sees where they are.
+     */
+    protected readonly highlightedIds: _angular_core.Signal<ReadonlySet<string>>;
+    /**
+     * Rows of the floating submenu panel. Nested destinations one level down are
+     * flattened under a heading, so the overflow menu can hold parents too.
+     */
+    protected readonly popupEntries: _angular_core.Signal<readonly NavigationPanelEntry[]>;
+    /** `true` when the floating submenu panel must be shown. */
+    protected readonly isPopupOpen: _angular_core.Signal<boolean>;
+    /** Element the floating submenu panel is anchored to. */
+    protected readonly popupOrigin: _angular_core.Signal<HTMLElement>;
+    /** Connected positions of the floating submenu panel, derived from the variant. */
+    protected readonly popupPositions: _angular_core.Signal<ConnectedPosition[]>;
+    /** `true` when the layout runs right-to-left; used to mirror the arrow keys. */
+    private readonly isRtl;
+    /**
+     * Activates a destination, or expands it when it owns nested destinations.
+     * A parent never navigates: it toggles its group inline in the wide variants
+     * and opens the floating panel in the compact ones.
+     * @param render - The render model of the activated destination.
+     * @param event - The originating mouse or keyboard event.
+     */
+    protected select(render: NavigationRenderItem, event: Event): void;
+    /**
+     * Emits `menuClick` when the leading menu button is pressed.
+     */
+    protected onMenuClick(): void;
+    /**
+     * Closes the modal drawer when the scrim is clicked.
+     */
+    protected onScrimClick(): void;
+    /**
+     * Handles keyboard interaction: arrow keys move the focus between
+     * destinations, `Home` / `End` jump to the first / last one and `Escape`
+     * closes the floating submenu panel or the modal drawer.
+     *
+     * The same handler serves the surface and the floating panel, and it tells
+     * them apart by `currentTarget`: roving inside an open `role="menu"` must stay
+     * inside it, and a programmatic `focus()` is NOT stopped by the focus trap, so
+     * sharing one element list would send the focus onto the surface behind the
+     * overlay.
+     *
+     * @param event - The originating keyboard event.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * Expands or collapses the parent destination with the given id.
+     * @param id - Identifier of the parent destination to toggle.
+     */
+    toggleExpanded(id: string): void;
+    /**
+     * Opens the floating submenu panel of a parent destination.
+     * @param render - The render model of the parent destination.
+     * @param event - The originating event, used to anchor the panel.
+     */
+    protected openPopup(render: NavigationRenderItem, event: Event): void;
+    /**
+     * Closes the floating submenu panel.
+     */
+    closePopup(): void;
+    /**
+     * Opens the modal drawer. No-op for the other variants.
+     */
+    openDrawer(): void;
+    /**
+     * Closes the modal drawer. No-op for the other variants.
+     */
+    closeDrawer(): void;
+    /**
+     * Toggles the modal drawer. No-op for the other variants.
+     */
+    toggleDrawer(): void;
+    /**
+     * Moves the browser focus to the destination with the given id.
+     * @param id - Identifier of the destination to focus.
+     * @returns `true` when a matching destination was found and focused.
+     */
+    focusItem(id: string): boolean;
+    /**
+     * Moves the compact-only destinations of a group into a synthesized overflow
+     * destination appended at the end of the group.
+     * @param group - The group to process.
+     * @param overflow - `true` when `hideWhenCompact` must be honoured.
+     * @param max - Hard cap on the inline destinations; `0` disables it.
+     * @returns The group with the overflow destination applied.
+     */
+    private applyOverflow;
+    /**
+     * Builds the synthesized, icon-only overflow destination.
+     * @param children - The destinations moved into the overflow menu.
+     * @returns The render model of the overflow destination.
+     */
+    private buildOverflowItem;
+    /**
+     * Merges the `top` and `bottom` groups into a single `top` group, combining
+     * the sections that share an id so `@for` track keys stay unique.
+     * @param groups - The groups to merge.
+     * @returns A single-group array, or the input when there is nothing to merge.
+     */
+    private static mergeGroups;
+    /**
+     * Builds the render model of a destination and, recursively, of its children.
+     * @param item - The source destination.
+     * @param section - The section the destination belongs to.
+     * @param parent - The parent destination, for nested destinations.
+     * @param depth - Nesting level of the destination.
+     * @param counter - Shared counter producing the flat destination index.
+     * @param hrefs - Map of destination id to resolved URL.
+     * @param dark - `true` when the dark theme is active, selecting the dark sprite frames.
+     * @returns The render model of the destination.
+     */
+    private static buildRenderItem;
+    /**
+     * Translates a sprite descriptor into the inline custom properties the
+     * stylesheet uses to size the icon and to shift `background-position` per
+     * interaction state.
+     *
+     * The sheet is rescaled through `background-size` instead of being drawn at
+     * its natural size: that is what lets a strip of 26px frames be painted at the
+     * 24px of the surrounding Material icons without the neighbouring frames
+     * bleeding into the box, and it makes the step between two frames exactly the
+     * rendered side.
+     *
+     * @param item - The destination whose sprite must be translated.
+     * @param dark - `true` when the dark theme is active, selecting the `dark` frame set.
+     * @returns The inline style map, or `undefined` when the destination uses no sprite.
+     */
+    private static buildSpriteStyle;
+    /**
+     * Number of frames a sprite sheet holds, needed to rescale it.
+     * @param sprite - The sprite descriptor to measure.
+     * @returns The declared frame count, or the highest referenced index plus one.
+     */
+    private static spriteFrameCount;
+    /**
+     * Formats the badge content of a destination.
+     * @param item - The destination whose badge must be formatted.
+     * @returns The badge text, or an empty string for a dot badge / no badge.
+     */
+    private static formatBadge;
+    /**
+     * Strips the query string and the fragment from a URL.
+     * @param url - The URL to normalise.
+     * @returns The path portion of the URL.
+     */
+    private static pathOf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationBarComponent, "navigation-bar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "autoVariants": { "alias": "autoVariants"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "labelVisibility": { "alias": "labelVisibility"; "required": false; "isSignal": true; }; "itemLayout": { "alias": "itemLayout"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "showMenuButton": { "alias": "showMenuButton"; "required": false; "isSignal": true; }; "menuIcon": { "alias": "menuIcon"; "required": false; "isSignal": true; }; "expandIcon": { "alias": "expandIcon"; "required": false; "isSignal": true; }; "overflowMode": { "alias": "overflowMode"; "required": false; "isSignal": true; }; "overflowIcon": { "alias": "overflowIcon"; "required": false; "isSignal": true; }; "overflowLabel": { "alias": "overflowLabel"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrim": { "alias": "scrim"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "tooltips": { "alias": "tooltips"; "required": false; "isSignal": true; }; "routerSync": { "alias": "routerSync"; "required": false; "isSignal": true; }; "relativeTo": { "alias": "relativeTo"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "selectedId": "selectedIdChange"; "expandedIds": "expandedIdsChange"; "open": "openChange"; "itemSelected": "itemSelected"; "menuClick": "menuClick"; }, never, ["[navHeader]", "[navFab]", "[navFooter]"], true, never>;
+}
+
+export { ALIAS_FAMILIES, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DEFAULT_NAVIGATION_AUTO_VARIANTS, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, EXPANDED_NAVIGATION_VARIANTS, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NAVIGATION_OVERFLOW_ID, NON_CANONICAL_PRIORITY, NavigationBarComponent, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
+export type { BpValues, BreakpointAlias, CanonicalKey, ConfirmDialogData, ConfirmDialogOption, CredentialsDialogData, CredentialsDialogResult, DeleteDialogData, DialogOption, DialogResult, IDialogService, InfoDialogData, NavigationAlignment, NavigationAutoVariants, NavigationBadge, NavigationIconSprite, NavigationItem, NavigationItemLayout, NavigationLabelVisibility, NavigationOverflowMode, NavigationPosition, NavigationSection, NavigationSelection, NavigationSpriteFrames, NavigationVariant, NcValues, NonCanonicalKey, RecoverPasswordDialogData, RecoverPasswordDialogResult, ResetPasswordDialogData, ResetPasswordDialogMode, ResetPasswordDialogResult, ResolvedNavigationVariant, ToastData };