@raintonic/formaui 0.3.1 → 0.9.0

package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs

@@ -0,0 +1,774 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, Injector, signal, effect, afterNextRender } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
+
+/**
+ * Renders a single top-level trigger item for the dual-tier navigation bar.
+ * Extracted so the main component stays under 200 lines.
+ */
+class DualTierNavTriggerComponent {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    isExpanded = input(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    flyoutId = input('', ...(ngDevMode ? [{ debugName: "flyoutId" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    toggle = output();
+    keydown = output();
+    hasChildren = computed(() => !!this.item().items?.length, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        const it = this.item();
+        if (it.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (this.hasChildren()) {
+            this.toggle.emit(event);
+            return;
+        }
+        it.command?.(event);
+        this.itemClick.emit(it);
+    }
+    onKeydown(event) {
+        if (this.item().disabled) {
+            return;
+        }
+        // bubble up and handle in dual-tier-navigation
+        this.keydown.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: DualTierNavTriggerComponent, isStandalone: true, selector: "fui-dual-tier-nav-trigger", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, flyoutId: { classPropertyName: "flyoutId", publicName: "flyoutId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", toggle: "toggle", keydown: "keydown" }, host: { attributes: { "role": "none" }, classAttribute: "fui-dual-tier-nav__bar-item" }, ngImport: i0, template: `
+    @if (hasChildren()) {
+      <button
+        class="fui-dual-tier-nav__trigger"
+        type="button"
+        role="menuitem"
+        [class.fui-dual-tier-nav__trigger--expanded]="isExpanded()"
+        [class.fui-dual-tier-nav__trigger--disabled]="item().disabled"
+        [attr.aria-haspopup]="true"
+        [attr.aria-expanded]="isExpanded()"
+        [attr.aria-controls]="isExpanded() ? 'fui-dtn-flyout-' + flyoutId() : null"
+        [disabled]="item().disabled"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        [fuiTooltip]="item().label ?? ''"
+      >
+        <div class="fui-dual-tier-nav__trigger-content">
+          @if (item().icon) {
+            <fui-icon class="fui-dual-tier-nav__trigger-icon" [name]="item().icon ?? ''" size="md" aria-hidden="true" />
+          }
+          <span class="fui-dual-tier-nav__trigger-label">{{ item().label }}</span>
+        </div>
+      </button>
+    } @else if (item().routerLink) {
+      <a
+        class="fui-dual-tier-nav__trigger"
+        role="menuitem"
+        [class.fui-dual-tier-nav__trigger--disabled]="item().disabled"
+        [attr.aria-disabled]="item().disabled || null"
+        [routerLink]="item().routerLink"
+        [queryParams]="item().queryParams || undefined"
+        [fragment]="item().fragment || undefined"
+        [target]="item().target"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        [fuiTooltip]="item().label ?? ''"
+      >
+        <span class="fui-dual-tier-nav__trigger-content">
+          @if (item().icon) {
+            <fui-icon class="fui-dual-tier-nav__trigger-icon" [name]="item().icon ?? ''" size="md" aria-hidden="true" />
+          }
+          <span class="fui-dual-tier-nav__trigger-label">{{ item().label }}</span>
+        </span>
+      </a>
+    } @else {
+      <button
+        class="fui-dual-tier-nav__trigger"
+        type="button"
+        role="menuitem"
+        [class.fui-dual-tier-nav__trigger--disabled]="item().disabled"
+        [attr.aria-disabled]="item().disabled || null"
+        [title]="item().title"
+        [disabled]="item().disabled"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        [fuiTooltip]="item().label ?? ''"
+      >
+        <span class="fui-dual-tier-nav__trigger-content">
+          @if (item().icon) {
+            <fui-icon class="fui-dual-tier-nav__trigger-icon" [name]="item().icon ?? ''" size="md" aria-hidden="true" />
+          }
+          <span class="fui-dual-tier-nav__trigger-label">{{ item().label }}</span>
+        </span>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:contents}.fui-dual-tier-nav__trigger{display:flex;align-items:center;gap:var(--fui-spacing-2);padding:var(--fui-spacing-5) var(--fui-spacing-5);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-text-secondary);background:transparent;border:none;border-radius:var(--fui-radius-xs);font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);font-weight:var(--fui-weight-medium);line-height:var(--fui-leading-normal);text-align:left;white-space:nowrap;outline:none;transition:background-color var(--fui-duration-fast) var(--fui-ease-out),color var(--fui-duration-fast) var(--fui-ease-out)}.fui-dual-tier-nav__trigger:hover:not(.fui-dual-tier-nav__trigger--disabled){color:var(--fui-text-primary)}.fui-dual-tier-nav__trigger:hover:not(.fui-dual-tier-nav__trigger--disabled) fui-icon{background-color:var(--fui-bg-muted)}.fui-dual-tier-nav__trigger:active:not(.fui-dual-tier-nav__trigger--disabled),.fui-dual-tier-nav__trigger--expanded{color:var(--fui-text-primary)}.fui-dual-tier-nav__trigger:active:not(.fui-dual-tier-nav__trigger--disabled) fui-icon,.fui-dual-tier-nav__trigger--expanded fui-icon{background-color:var(--fui-bg-primary);color:var(--fui-text-link)}.fui-dual-tier-nav__trigger--expanded:hover fui-icon{background-color:var(--fui-state-selected-bg)}.fui-dual-tier-nav__trigger:hover{text-decoration:none}.fui-dual-tier-nav__trigger:focus-visible{outline:2px solid var(--fui-state-focus-ring);outline-offset:-2px}.fui-dual-tier-nav__trigger--disabled{color:var(--fui-text-disabled);opacity:var(--fui-state-disabled-opacity);pointer-events:none;cursor:default}.fui-dual-tier-nav__trigger-content{display:flex;flex-direction:column;align-items:stretch;gap:var(--fui-spacing-2);max-width:44px}.fui-dual-tier-nav__trigger-icon{width:44px;height:44px;flex-shrink:0;align-self:center;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--fui-radius-xs)}.fui-dual-tier-nav__trigger-label{max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dual-tier-nav-trigger', standalone: true, imports: [RouterLink, FuiIconComponent, FuiTooltipDirective], template: `
+    @if (hasChildren()) {
+      <button
+        class="fui-dual-tier-nav__trigger"
+        type="button"
+        role="menuitem"
+        [class.fui-dual-tier-nav__trigger--expanded]="isExpanded()"
+        [class.fui-dual-tier-nav__trigger--disabled]="item().disabled"
+        [attr.aria-haspopup]="true"
+        [attr.aria-expanded]="isExpanded()"
+        [attr.aria-controls]="isExpanded() ? 'fui-dtn-flyout-' + flyoutId() : null"
+        [disabled]="item().disabled"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        [fuiTooltip]="item().label ?? ''"
+      >
+        <div class="fui-dual-tier-nav__trigger-content">
+          @if (item().icon) {
+            <fui-icon class="fui-dual-tier-nav__trigger-icon" [name]="item().icon ?? ''" size="md" aria-hidden="true" />
+          }
+          <span class="fui-dual-tier-nav__trigger-label">{{ item().label }}</span>
+        </div>
+      </button>
+    } @else if (item().routerLink) {
+      <a
+        class="fui-dual-tier-nav__trigger"
+        role="menuitem"
+        [class.fui-dual-tier-nav__trigger--disabled]="item().disabled"
+        [attr.aria-disabled]="item().disabled || null"
+        [routerLink]="item().routerLink"
+        [queryParams]="item().queryParams || undefined"
+        [fragment]="item().fragment || undefined"
+        [target]="item().target"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        [fuiTooltip]="item().label ?? ''"
+      >
+        <span class="fui-dual-tier-nav__trigger-content">
+          @if (item().icon) {
+            <fui-icon class="fui-dual-tier-nav__trigger-icon" [name]="item().icon ?? ''" size="md" aria-hidden="true" />
+          }
+          <span class="fui-dual-tier-nav__trigger-label">{{ item().label }}</span>
+        </span>
+      </a>
+    } @else {
+      <button
+        class="fui-dual-tier-nav__trigger"
+        type="button"
+        role="menuitem"
+        [class.fui-dual-tier-nav__trigger--disabled]="item().disabled"
+        [attr.aria-disabled]="item().disabled || null"
+        [title]="item().title"
+        [disabled]="item().disabled"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        [fuiTooltip]="item().label ?? ''"
+      >
+        <span class="fui-dual-tier-nav__trigger-content">
+          @if (item().icon) {
+            <fui-icon class="fui-dual-tier-nav__trigger-icon" [name]="item().icon ?? ''" size="md" aria-hidden="true" />
+          }
+          <span class="fui-dual-tier-nav__trigger-label">{{ item().label }}</span>
+        </span>
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fui-dual-tier-nav__bar-item', role: 'none' }, styles: [":host{display:contents}.fui-dual-tier-nav__trigger{display:flex;align-items:center;gap:var(--fui-spacing-2);padding:var(--fui-spacing-5) var(--fui-spacing-5);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-text-secondary);background:transparent;border:none;border-radius:var(--fui-radius-xs);font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);font-weight:var(--fui-weight-medium);line-height:var(--fui-leading-normal);text-align:left;white-space:nowrap;outline:none;transition:background-color var(--fui-duration-fast) var(--fui-ease-out),color var(--fui-duration-fast) var(--fui-ease-out)}.fui-dual-tier-nav__trigger:hover:not(.fui-dual-tier-nav__trigger--disabled){color:var(--fui-text-primary)}.fui-dual-tier-nav__trigger:hover:not(.fui-dual-tier-nav__trigger--disabled) fui-icon{background-color:var(--fui-bg-muted)}.fui-dual-tier-nav__trigger:active:not(.fui-dual-tier-nav__trigger--disabled),.fui-dual-tier-nav__trigger--expanded{color:var(--fui-text-primary)}.fui-dual-tier-nav__trigger:active:not(.fui-dual-tier-nav__trigger--disabled) fui-icon,.fui-dual-tier-nav__trigger--expanded fui-icon{background-color:var(--fui-bg-primary);color:var(--fui-text-link)}.fui-dual-tier-nav__trigger--expanded:hover fui-icon{background-color:var(--fui-state-selected-bg)}.fui-dual-tier-nav__trigger:hover{text-decoration:none}.fui-dual-tier-nav__trigger:focus-visible{outline:2px solid var(--fui-state-focus-ring);outline-offset:-2px}.fui-dual-tier-nav__trigger--disabled{color:var(--fui-text-disabled);opacity:var(--fui-state-disabled-opacity);pointer-events:none;cursor:default}.fui-dual-tier-nav__trigger-content{display:flex;flex-direction:column;align-items:stretch;gap:var(--fui-spacing-2);max-width:44px}.fui-dual-tier-nav__trigger-icon{width:44px;height:44px;flex-shrink:0;align-self:center;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--fui-radius-xs)}.fui-dual-tier-nav__trigger-label{max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], flyoutId: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyoutId", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], keydown: [{ type: i0.Output, args: ["keydown"] }] } });
+
+class DualTierNavSubmenuHeaderComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    close = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavSubmenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: DualTierNavSubmenuHeaderComponent, isStandalone: true, selector: "fui-dual-tier-nav-submenu-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { classAttribute: "fui-dtn-submenu__header-wrapper" }, ngImport: i0, template: `
+    <div class="fui-dtn-submenu__header">
+      <h6 class="fui-dtn-submenu__title">{{ title() }}</h6>
+      @if (closable()) {
+        <button type="button" class="fui-dtn-submenu__close" aria-label="Close menu" (click)="close.emit()">
+          <fui-icon name="caret-double-left" size="sm" aria-hidden="true" />
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".fui-dtn-submenu__header{display:flex;justify-content:space-between;margin-top:var(--fui-spacing-8);align-items:center;padding:0 var(--fui-spacing-2)}.fui-dtn-submenu__title{margin:0;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-semibold);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-text-primary)}.fui-dtn-submenu__close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);outline:none;transition:background-color var(--fui-duration-fast) var(--fui-ease-out),color var(--fui-duration-fast) var(--fui-ease-out)}.fui-dtn-submenu__close:hover{background-color:var(--fui-bg-muted);color:var(--fui-text-primary)}.fui-dtn-submenu__close:focus-visible{outline:2px solid var(--fui-state-focus-ring);outline-offset:-2px}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavSubmenuHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dual-tier-nav-submenu-header', standalone: true, imports: [FuiIconComponent], template: `
+    <div class="fui-dtn-submenu__header">
+      <h6 class="fui-dtn-submenu__title">{{ title() }}</h6>
+      @if (closable()) {
+        <button type="button" class="fui-dtn-submenu__close" aria-label="Close menu" (click)="close.emit()">
+          <fui-icon name="caret-double-left" size="sm" aria-hidden="true" />
+        </button>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fui-dtn-submenu__header-wrapper' }, styles: [".fui-dtn-submenu__header{display:flex;justify-content:space-between;margin-top:var(--fui-spacing-8);align-items:center;padding:0 var(--fui-spacing-2)}.fui-dtn-submenu__title{margin:0;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-semibold);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-text-primary)}.fui-dtn-submenu__close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);outline:none;transition:background-color var(--fui-duration-fast) var(--fui-ease-out),color var(--fui-duration-fast) var(--fui-ease-out)}.fui-dtn-submenu__close:hover{background-color:var(--fui-bg-muted);color:var(--fui-text-primary)}.fui-dtn-submenu__close:focus-visible{outline:2px solid var(--fui-state-focus-ring);outline-offset:-2px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+class DualTierNavSubmenuItemComponent {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    isExpanded = input(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    clickItem = output();
+    toggleExpand = output();
+    keydown = output();
+    hasChildren() {
+        return !!this.item()?.items?.length;
+    }
+    _onClick(event) {
+        const it = this.item();
+        if (it?.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (this.hasChildren()) {
+            this.toggleExpand.emit({ item: it, sourceEl: event.currentTarget });
+        }
+        else {
+            if (it.command)
+                it.command(event);
+            this.clickItem.emit(it);
+        }
+    }
+    _onKeydown(event) {
+        if (this.item()?.disabled)
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                if (this.hasChildren())
+                    this.toggleExpand.emit({ item: this.item(), sourceEl: event.currentTarget });
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                // Delegate to parent: collapse if expanded, close panel otherwise
+                this.keydown.emit(event);
+                break;
+            case 'ArrowDown':
+            case 'ArrowUp':
+                // Let the list-level handler navigate between items
+                break;
+            case 'Enter':
+            case ' ':
+                if (this.hasChildren()) {
+                    event.preventDefault();
+                    this.toggleExpand.emit({ item: this.item(), sourceEl: event.currentTarget });
+                }
+                break;
+            default:
+                this.keydown.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: DualTierNavSubmenuItemComponent, isStandalone: true, selector: "fui-dual-tier-nav-submenu-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickItem: "clickItem", toggleExpand: "toggleExpand", keydown: "keydown" }, host: { attributes: { "role": "none" } }, ngImport: i0, template: `
+    @if (hasChildren()) {
+      <button
+        class="fui-dtn-item fui-dtn-item--parent"
+        type="button"
+        role="menuitem"
+        [class.fui-dtn-item--disabled]="item().disabled"
+        [class.fui-dtn-item--parent-expanded]="isExpanded()"
+        [attr.aria-haspopup]="true"
+        [attr.aria-expanded]="isExpanded()"
+        [disabled]="item().disabled"
+        (click)="_onClick($event)"
+        (keydown)="_onKeydown($event)"
+      >
+        <span class="fui-dtn-item__label">{{ item().label }}</span>
+        <fui-icon
+          class="fui-dtn-item__chevron"
+          [class.fui-dtn-item__chevron--expanded]="isExpanded()"
+          name="caret-right"
+          size="sm"
+          aria-hidden="true"
+        />
+      </button>
+    } @else if (item().routerLink) {
+      <a
+        class="fui-dtn-item"
+        role="menuitem"
+        routerLinkActive="fui-dtn-item--active"
+        [class.fui-dtn-item--disabled]="item().disabled"
+        [tabindex]="item().disabled ? -1 : 0"
+        [attr.aria-disabled]="item().disabled || null"
+        [routerLink]="item().routerLink"
+        [queryParams]="item().queryParams ?? undefined"
+        [fragment]="item().fragment ?? undefined"
+        [target]="item().target"
+        [title]="item().title"
+        (click)="_onClick($event)"
+        (keydown)="_onKeydown($event)"
+      >
+        <span class="fui-dtn-item__label">{{ item().label }}</span>
+      </a>
+    } @else {
+      <button
+        class="fui-dtn-item"
+        type="button"
+        role="menuitem"
+        [class.fui-dtn-item--disabled]="item().disabled"
+        [tabindex]="item().disabled ? -1 : 0"
+        [attr.aria-disabled]="item().disabled || null"
+        [title]="item().title"
+        [disabled]="item().disabled"
+        (click)="_onClick($event)"
+        (keydown)="_onKeydown($event)"
+      >
+        <span class="fui-dtn-item__label">{{ item().label }}</span>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.fui-dtn-item{display:flex;align-items:center;gap:var(--fui-spacing-6);padding:var(--fui-spacing-4) var(--fui-spacing-6) var(--fui-spacing-4) var(--fui-spacing-3);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-text-secondary);background:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);line-height:var(--fui-leading-normal);text-align:left;width:100%;box-sizing:border-box;outline:none;transition:background-color var(--fui-duration-fast) var(--fui-ease-out),color var(--fui-duration-fast) var(--fui-ease-out)}.fui-dtn-item:hover{background-color:var(--fui-bg-muted);text-decoration:none}.fui-dtn-item:active{background-color:var(--fui-bg-primary)}.fui-dtn-item:focus-visible{outline:2px solid var(--fui-state-focus-ring);outline-offset:-2px}.fui-dtn-item--active{color:var(--fui-text-primary);background-color:var(--fui-state-selected-bg)}.fui-dtn-item--disabled{color:var(--fui-text-disabled);opacity:var(--fui-state-disabled-opacity);pointer-events:none;cursor:default}.fui-dtn-item--parent-expanded{color:var(--fui-text-primary);background-color:var(--fui-bg-muted)}.fui-dtn-item__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fui-dtn-item__chevron{flex-shrink:0;color:inherit;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--fui-duration-base) var(--fui-ease-out)}.fui-dtn-item__chevron--expanded{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavSubmenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dual-tier-nav-submenu-item', standalone: true, imports: [RouterLink, RouterLinkActive, FuiIconComponent], template: `
+    @if (hasChildren()) {
+      <button
+        class="fui-dtn-item fui-dtn-item--parent"
+        type="button"
+        role="menuitem"
+        [class.fui-dtn-item--disabled]="item().disabled"
+        [class.fui-dtn-item--parent-expanded]="isExpanded()"
+        [attr.aria-haspopup]="true"
+        [attr.aria-expanded]="isExpanded()"
+        [disabled]="item().disabled"
+        (click)="_onClick($event)"
+        (keydown)="_onKeydown($event)"
+      >
+        <span class="fui-dtn-item__label">{{ item().label }}</span>
+        <fui-icon
+          class="fui-dtn-item__chevron"
+          [class.fui-dtn-item__chevron--expanded]="isExpanded()"
+          name="caret-right"
+          size="sm"
+          aria-hidden="true"
+        />
+      </button>
+    } @else if (item().routerLink) {
+      <a
+        class="fui-dtn-item"
+        role="menuitem"
+        routerLinkActive="fui-dtn-item--active"
+        [class.fui-dtn-item--disabled]="item().disabled"
+        [tabindex]="item().disabled ? -1 : 0"
+        [attr.aria-disabled]="item().disabled || null"
+        [routerLink]="item().routerLink"
+        [queryParams]="item().queryParams ?? undefined"
+        [fragment]="item().fragment ?? undefined"
+        [target]="item().target"
+        [title]="item().title"
+        (click)="_onClick($event)"
+        (keydown)="_onKeydown($event)"
+      >
+        <span class="fui-dtn-item__label">{{ item().label }}</span>
+      </a>
+    } @else {
+      <button
+        class="fui-dtn-item"
+        type="button"
+        role="menuitem"
+        [class.fui-dtn-item--disabled]="item().disabled"
+        [tabindex]="item().disabled ? -1 : 0"
+        [attr.aria-disabled]="item().disabled || null"
+        [title]="item().title"
+        [disabled]="item().disabled"
+        (click)="_onClick($event)"
+        (keydown)="_onKeydown($event)"
+      >
+        <span class="fui-dtn-item__label">{{ item().label }}</span>
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'none' }, styles: [":host{display:flex;flex-direction:column}.fui-dtn-item{display:flex;align-items:center;gap:var(--fui-spacing-6);padding:var(--fui-spacing-4) var(--fui-spacing-6) var(--fui-spacing-4) var(--fui-spacing-3);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-text-secondary);background:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);line-height:var(--fui-leading-normal);text-align:left;width:100%;box-sizing:border-box;outline:none;transition:background-color var(--fui-duration-fast) var(--fui-ease-out),color var(--fui-duration-fast) var(--fui-ease-out)}.fui-dtn-item:hover{background-color:var(--fui-bg-muted);text-decoration:none}.fui-dtn-item:active{background-color:var(--fui-bg-primary)}.fui-dtn-item:focus-visible{outline:2px solid var(--fui-state-focus-ring);outline-offset:-2px}.fui-dtn-item--active{color:var(--fui-text-primary);background-color:var(--fui-state-selected-bg)}.fui-dtn-item--disabled{color:var(--fui-text-disabled);opacity:var(--fui-state-disabled-opacity);pointer-events:none;cursor:default}.fui-dtn-item--parent-expanded{color:var(--fui-text-primary);background-color:var(--fui-bg-muted)}.fui-dtn-item__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fui-dtn-item__chevron{flex-shrink:0;color:inherit;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--fui-duration-base) var(--fui-ease-out)}.fui-dtn-item__chevron--expanded{transform:rotate(90deg)}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], clickItem: [{ type: i0.Output, args: ["clickItem"] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }], keydown: [{ type: i0.Output, args: ["keydown"] }] } });
+
+class DualTierNavSubmenuComponent {
+    _injector = inject(Injector);
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    closePanel = output();
+    visibleItems = computed(() => this.items().filter((it) => it.visible !== false), ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    _expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const expanded = new Set();
+            const walk = (list) => {
+                for (const it of list) {
+                    if (it.expanded && it.items?.length)
+                        expanded.add(it.id);
+                    if (it.items)
+                        walk(it.items);
+                }
+            };
+            walk(this.items());
+            this._expanded.set(expanded);
+        });
+    }
+    _hasChildren(item) {
+        return !!item.items?.length;
+    }
+    _isExpanded(item) {
+        return this._hasChildren(item) && this._expanded().has(item.id);
+    }
+    _onClose() {
+        this.closePanel.emit();
+    }
+    _onClickItem(item) {
+        this.itemClick.emit(item);
+    }
+    _onToggleExpand(item, toggleSourceEl) {
+        const id = item.id;
+        if (!id)
+            return;
+        const wasExpanded = this._expanded().has(id);
+        this._expanded.update((s) => {
+            const next = new Set(s);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+        // ponytail: afterNextRender to wait for the nested submenu to be rendered.
+        // Ceiling: if the nested submenu has no visible items, focus stays on the toggle.
+        if (!wasExpanded && toggleSourceEl) {
+            afterNextRender(() => {
+                const li = toggleSourceEl.closest('li');
+                const selector = '.fui-dtn-item:not(.fui-dtn-item--disabled)';
+                const nested = li?.querySelector(':scope > .fui-dtn-submenu__nested ' + selector);
+                nested?.focus();
+            }, { injector: this._injector });
+        }
+    }
+    _onListKeydown(event) {
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
+            return;
+        event.stopPropagation();
+        const listEl = event.currentTarget?.closest('ul');
+        if (!listEl)
+            return;
+        // ponytail: querySelectorAll on every keydown — acceptable for small submenu lists (<50 items).
+        // Upgrade path: precompute items list on mutation and reuse.
+        const items = Array.from(listEl.querySelectorAll(':scope > li > fui-dual-tier-nav-submenu-item > .fui-dtn-item'));
+        const idx = items.indexOf(document.activeElement);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusItem(items, idx + 1, 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusItem(items, idx - 1, -1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusItem(items, 0, 1);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusItem(items, items.length - 1, -1);
+                break;
+        }
+    }
+    _onItemKeydown(event, item) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (this._hasChildren(item) && this._isExpanded(item)) {
+                    this._expanded.update((s) => {
+                        const next = new Set(s);
+                        next.delete(item.id);
+                        return next;
+                    });
+                }
+                else {
+                    this.closePanel.emit();
+                }
+                break;
+        }
+    }
+    _focusItem(items, start, step) {
+        let i = start;
+        while (i >= 0 && i < items.length) {
+            if (!items[i].classList.contains('fui-dtn-item--disabled')) {
+                items[i].focus();
+                return;
+            }
+            i += step;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: DualTierNavSubmenuComponent, isStandalone: true, selector: "fui-dual-tier-nav-submenu", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", closePanel: "closePanel" }, ngImport: i0, template: `
+    <div class="fui-dtn-submenu">
+      @if (showHeader()) {
+        <fui-dual-tier-nav-submenu-header [title]="title()" [closable]="closable()" (close)="_onClose()" />
+      }
+      <ul class="fui-dtn-submenu__list" role="menu" aria-orientation="vertical" (keydown)="_onListKeydown($event)">
+        @for (item of visibleItems(); track item.id) {
+          <li role="none">
+            <fui-dual-tier-nav-submenu-item
+              [item]="item"
+              [isExpanded]="_isExpanded(item)"
+              (clickItem)="_onClickItem($event)"
+              (toggleExpand)="_onToggleExpand($event.item, $event.sourceEl)"
+              (keydown)="_onItemKeydown($event, item)"
+            />
+            @if (_hasChildren(item) && _isExpanded(item)) {
+              <div
+                class="fui-dtn-submenu__nested"
+                animate.enter="fui-dtn-nested--enter"
+                animate.leave="fui-dtn-nested--leave"
+              >
+                <fui-dual-tier-nav-submenu
+                  [title]="item.label ?? ''"
+                  [items]="item.items ?? []"
+                  [showHeader]="false"
+                  [closable]="false"
+                  (itemClick)="itemClick.emit($event)"
+                  (closePanel)="closePanel.emit()"
+                />
+              </div>
+            }
+          </li>
+        }
+      </ul>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.fui-dtn-submenu{display:flex;flex-direction:column;padding-top:var(--fui-spacing-2);padding-left:var(--fui-spacing-4)}.fui-dtn-submenu__list{display:flex;flex-direction:column;list-style:none;margin:0;gap:var(--fui-spacing-2)}\n", "@keyframes fui-dtn-nested-enter{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes fui-dtn-nested-leave{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}.fui-dtn-nested--enter{animation:fui-dtn-nested-enter var(--fui-duration-moderate) var(--fui-ease-out);overflow:hidden}.fui-dtn-nested--leave{animation:fui-dtn-nested-leave var(--fui-duration-fast) var(--fui-ease-in);overflow:hidden}\n"], dependencies: [{ kind: "component", type: DualTierNavSubmenuComponent, selector: "fui-dual-tier-nav-submenu", inputs: ["title", "items", "showHeader", "closable"], outputs: ["itemClick", "closePanel"] }, { kind: "component", type: DualTierNavSubmenuHeaderComponent, selector: "fui-dual-tier-nav-submenu-header", inputs: ["title", "closable"], outputs: ["close"] }, { kind: "component", type: DualTierNavSubmenuItemComponent, selector: "fui-dual-tier-nav-submenu-item", inputs: ["item", "isExpanded"], outputs: ["clickItem", "toggleExpand", "keydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DualTierNavSubmenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dual-tier-nav-submenu', standalone: true, imports: [DualTierNavSubmenuHeaderComponent, DualTierNavSubmenuItemComponent], template: `
+    <div class="fui-dtn-submenu">
+      @if (showHeader()) {
+        <fui-dual-tier-nav-submenu-header [title]="title()" [closable]="closable()" (close)="_onClose()" />
+      }
+      <ul class="fui-dtn-submenu__list" role="menu" aria-orientation="vertical" (keydown)="_onListKeydown($event)">
+        @for (item of visibleItems(); track item.id) {
+          <li role="none">
+            <fui-dual-tier-nav-submenu-item
+              [item]="item"
+              [isExpanded]="_isExpanded(item)"
+              (clickItem)="_onClickItem($event)"
+              (toggleExpand)="_onToggleExpand($event.item, $event.sourceEl)"
+              (keydown)="_onItemKeydown($event, item)"
+            />
+            @if (_hasChildren(item) && _isExpanded(item)) {
+              <div
+                class="fui-dtn-submenu__nested"
+                animate.enter="fui-dtn-nested--enter"
+                animate.leave="fui-dtn-nested--leave"
+              >
+                <fui-dual-tier-nav-submenu
+                  [title]="item.label ?? ''"
+                  [items]="item.items ?? []"
+                  [showHeader]="false"
+                  [closable]="false"
+                  (itemClick)="itemClick.emit($event)"
+                  (closePanel)="closePanel.emit()"
+                />
+              </div>
+            }
+          </li>
+        }
+      </ul>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.fui-dtn-submenu{display:flex;flex-direction:column;padding-top:var(--fui-spacing-2);padding-left:var(--fui-spacing-4)}.fui-dtn-submenu__list{display:flex;flex-direction:column;list-style:none;margin:0;gap:var(--fui-spacing-2)}\n", "@keyframes fui-dtn-nested-enter{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes fui-dtn-nested-leave{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}.fui-dtn-nested--enter{animation:fui-dtn-nested-enter var(--fui-duration-moderate) var(--fui-ease-out);overflow:hidden}.fui-dtn-nested--leave{animation:fui-dtn-nested-leave var(--fui-duration-fast) var(--fui-ease-in);overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }] } });
+
+class FuiDualTierNavigationComponent {
+    _injector = inject(Injector);
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Dual tier navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    _readyItems = computed(() => {
+        let counter = 0;
+        const assignIds = (list) => list
+            .filter((it) => it.visible !== false)
+            .map((it) => {
+            const copy = { ...it, id: it.id ?? `fui-dtn-${++counter}` };
+            if (copy.items) {
+                return { ...copy, items: assignIds(copy.items) };
+            }
+            return copy;
+        });
+        return assignIds(this.items());
+    }, ...(ngDevMode ? [{ debugName: "_readyItems" }] : /* istanbul ignore next */ []));
+    _expandedId = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandedId" }] : /* istanbul ignore next */ []));
+    _expandedItem = computed(() => {
+        const id = this._expandedId();
+        if (!id)
+            return undefined;
+        return this._findItemById(this._readyItems(), id);
+    }, ...(ngDevMode ? [{ debugName: "_expandedItem" }] : /* istanbul ignore next */ []));
+    _findItemById(items, id) {
+        for (const item of items) {
+            if (item.id === id)
+                return item;
+            if (item.items?.length) {
+                const found = this._findItemById(item.items, id);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    }
+    _closeFlyout() {
+        const activeId = this._expandedId();
+        this._expandedId.set(undefined);
+        if (activeId) {
+            afterNextRender(() => {
+                document.querySelector('[aria-controls="fui-dtn-flyout-' + activeId + '"]')?.focus();
+            }, { injector: this._injector });
+        }
+    }
+    _onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    _onToggle(event, item) {
+        event.stopPropagation();
+        this._expandedId.update((current) => (current === item.id ? undefined : item.id));
+        this.itemClick.emit(item);
+    }
+    _onTriggerKeydown(event, item) {
+        const triggerEl = event.currentTarget?.closest('[role="menuitem"]');
+        if (!triggerEl)
+            return;
+        const barEl = triggerEl.closest('.fui-dual-tier-nav__bar');
+        if (!barEl)
+            return;
+        // ponytail: querySelectorAll on every keydown — acceptable for small trigger lists (<20 items).
+        // Upgrade path: precompute triggers list on mutation and reuse.
+        const triggers = Array.from(barEl.querySelectorAll('[role="menuitem"]'));
+        const idx = triggers.indexOf(triggerEl);
+        const closeFlyout = () => {
+            if (this._expandedId()) {
+                this._expandedId.set(undefined);
+                triggerEl.focus();
+            }
+        };
+        const focusFirstFlyoutItem = () => {
+            afterNextRender(() => {
+                const selector = '.fui-dtn-item:not(.fui-dtn-item--disabled)';
+                const el = document.getElementById(`fui-dtn-flyout-${item.id}`)?.querySelector(selector);
+                el?.focus();
+            }, { injector: this._injector });
+        };
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+            case 'ArrowRight':
+                event.preventDefault();
+                if (item.items?.length) {
+                    this._expandedId.set(item.id);
+                    focusFirstFlyoutItem();
+                }
+                else {
+                    // Leaf item: forward click-like activation
+                    if (item.command)
+                        item.command(event);
+                    this.itemClick.emit(item);
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                triggers[idx + 1]?.focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                triggers[idx - 1]?.focus();
+                break;
+            case 'ArrowLeft':
+            case 'Escape':
+                event.preventDefault();
+                closeFlyout();
+                break;
+            case 'Home':
+                event.preventDefault();
+                triggers[0]?.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                triggers[triggers.length - 1]?.focus();
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDualTierNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDualTierNavigationComponent, isStandalone: true, selector: "fui-dual-tier-navigation", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "fui-dual-tier-navigation" }, ngImport: i0, template: `
+    <ul class="fui-dual-tier-nav__bar" role="menu" aria-orientation="vertical">
+      @for (item of _readyItems(); track item.id) {
+        <fui-dual-tier-nav-trigger
+          [item]="item"
+          [isExpanded]="_expandedId() === item.id"
+          [flyoutId]="item.id ?? ''"
+          (toggle)="_onToggle($event, item)"
+          (itemClick)="_onItemClick($event)"
+          (keydown)="_onTriggerKeydown($event, item)"
+        />
+      }
+    </ul>
+    <div
+      class="fui-dual-tier-nav__flyout"
+      role="menu"
+      [class.fui-dual-tier-nav__flyout--open]="!!_expandedItem()"
+      [id]="_expandedItem() ? 'fui-dtn-flyout-' + (_expandedItem()!.id ?? '') : null"
+      [attr.aria-label]="_expandedItem()?.label ?? null"
+    >
+      @if (_expandedItem(); as expanded) {
+        <div animate.enter="fui-dtn-flyout-content--enter" animate.leave="fui-dtn-flyout-content--leave">
+          <fui-dual-tier-nav-submenu
+            [title]="expanded.label ?? ''"
+            [items]="expanded.items ?? []"
+            (itemClick)="_onItemClick($event)"
+            (closePanel)="_closeFlyout()"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{--fui-dtn-bg: var(--fui-bg-subtle);--fui-dtn-flyout-width: 200px;display:flex;flex-direction:row;background-color:var(--fui-dtn-bg);box-sizing:border-box}.fui-dual-tier-nav__bar{display:flex;flex-direction:column;list-style:none;margin:0;padding:var(--fui-spacing-4) var(--fui-spacing-4);gap:var(--fui-spacing-2);flex-shrink:0;border-right:1px solid var(--fui-border-default)}.fui-dual-tier-nav__flyout{display:flex;flex-direction:column;width:0;flex-shrink:0;background:var(--fui-dtn-bg);clip-path:inset(0 100% 0 0);overflow:hidden;transition:width var(--fui-duration-moderate) cubic-bezier(.16,1,.3,1),clip-path var(--fui-duration-moderate) cubic-bezier(.16,1,.3,1)}.fui-dual-tier-nav__flyout--open{width:var(--fui-dtn-flyout-width);clip-path:inset(0 0 0 0);overflow-y:auto;padding-right:var(--fui-spacing-2)}@keyframes fui-dtn-flyout-content-enter{0%{opacity:0}to{opacity:1}}@keyframes fui-dtn-flyout-content-leave{0%{opacity:1}to{opacity:0}}.fui-dtn-flyout-content--enter{animation:fui-dtn-flyout-content-enter var(--fui-duration-fast) var(--fui-ease-out)}.fui-dtn-flyout-content--leave{animation:fui-dtn-flyout-content-leave var(--fui-duration-fast) var(--fui-ease-in)}\n"], dependencies: [{ kind: "component", type: DualTierNavTriggerComponent, selector: "fui-dual-tier-nav-trigger", inputs: ["item", "isExpanded", "flyoutId"], outputs: ["itemClick", "toggle", "keydown"] }, { kind: "component", type: DualTierNavSubmenuComponent, selector: "fui-dual-tier-nav-submenu", inputs: ["title", "items", "showHeader", "closable"], outputs: ["itemClick", "closePanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDualTierNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dual-tier-navigation', standalone: true, imports: [DualTierNavTriggerComponent, DualTierNavSubmenuComponent], template: `
+    <ul class="fui-dual-tier-nav__bar" role="menu" aria-orientation="vertical">
+      @for (item of _readyItems(); track item.id) {
+        <fui-dual-tier-nav-trigger
+          [item]="item"
+          [isExpanded]="_expandedId() === item.id"
+          [flyoutId]="item.id ?? ''"
+          (toggle)="_onToggle($event, item)"
+          (itemClick)="_onItemClick($event)"
+          (keydown)="_onTriggerKeydown($event, item)"
+        />
+      }
+    </ul>
+    <div
+      class="fui-dual-tier-nav__flyout"
+      role="menu"
+      [class.fui-dual-tier-nav__flyout--open]="!!_expandedItem()"
+      [id]="_expandedItem() ? 'fui-dtn-flyout-' + (_expandedItem()!.id ?? '') : null"
+      [attr.aria-label]="_expandedItem()?.label ?? null"
+    >
+      @if (_expandedItem(); as expanded) {
+        <div animate.enter="fui-dtn-flyout-content--enter" animate.leave="fui-dtn-flyout-content--leave">
+          <fui-dual-tier-nav-submenu
+            [title]="expanded.label ?? ''"
+            [items]="expanded.items ?? []"
+            (itemClick)="_onItemClick($event)"
+            (closePanel)="_closeFlyout()"
+          />
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        class: 'fui-dual-tier-navigation',
+                    }, styles: [":host{--fui-dtn-bg: var(--fui-bg-subtle);--fui-dtn-flyout-width: 200px;display:flex;flex-direction:row;background-color:var(--fui-dtn-bg);box-sizing:border-box}.fui-dual-tier-nav__bar{display:flex;flex-direction:column;list-style:none;margin:0;padding:var(--fui-spacing-4) var(--fui-spacing-4);gap:var(--fui-spacing-2);flex-shrink:0;border-right:1px solid var(--fui-border-default)}.fui-dual-tier-nav__flyout{display:flex;flex-direction:column;width:0;flex-shrink:0;background:var(--fui-dtn-bg);clip-path:inset(0 100% 0 0);overflow:hidden;transition:width var(--fui-duration-moderate) cubic-bezier(.16,1,.3,1),clip-path var(--fui-duration-moderate) cubic-bezier(.16,1,.3,1)}.fui-dual-tier-nav__flyout--open{width:var(--fui-dtn-flyout-width);clip-path:inset(0 0 0 0);overflow-y:auto;padding-right:var(--fui-spacing-2)}@keyframes fui-dtn-flyout-content-enter{0%{opacity:0}to{opacity:1}}@keyframes fui-dtn-flyout-content-leave{0%{opacity:1}to{opacity:0}}.fui-dtn-flyout-content--enter{animation:fui-dtn-flyout-content-enter var(--fui-duration-fast) var(--fui-ease-out)}.fui-dtn-flyout-content--leave{animation:fui-dtn-flyout-content-leave var(--fui-duration-fast) var(--fui-ease-in)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DualTierNavSubmenuComponent, DualTierNavSubmenuHeaderComponent, DualTierNavSubmenuItemComponent, DualTierNavTriggerComponent, FuiDualTierNavigationComponent };
+//# sourceMappingURL=raintonic-formaui-components-dual-tier-navigation.mjs.map