@neuravision/ng-construct 0.1.0 → 0.3.0

package/fesm2022/neuravision-ng-construct.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, ChangeDetectionStrategy, Component, inject, forwardRef, model, booleanAttribute, viewChild, contentChildren, effect, ElementRef, ContentChild, TemplateRef, Directive, Injectable, viewChildren, Renderer2, InjectionToken, contentChild, DOCUMENT, numberAttribute, Pipe } from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component, inject, forwardRef, model, booleanAttribute, viewChild, contentChildren, effect, contentChild, ElementRef, TemplateRef, Directive, Injectable, viewChildren, Renderer2, InjectionToken, DOCUMENT, numberAttribute, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * Alert component for displaying contextual feedback messages.
@@ -1200,36 +1201,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
+// ── Radio Button ─────────────────────────────────────────────────────────────
 /**
- * Radio button component with form control support
+ * Individual radio button. Use inside `af-radio-group` for full
+ * accessibility, or standalone with its own `ControlValueAccessor`.
  *
  * @example
- * <af-radio name="plan" value="standard" [(ngModel)]="selectedPlan">
- *   Standard
- * </af-radio>
- * <af-radio name="plan" value="premium" [(ngModel)]="selectedPlan">
- *   Premium
- * </af-radio>
+ * <af-radio-group ariaLabel="Plan" name="plan" [(ngModel)]="plan">
+ *   <af-radio value="standard">Standard</af-radio>
+ *   <af-radio value="premium">Premium</af-radio>
+ * </af-radio-group>
  */
 class AfRadioComponent {
-    /** Radio group name */
+    group = inject(forwardRef(() => AfRadioGroupComponent), { optional: true });
+    /** Radio group name (only used without `af-radio-group`). */
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
-    /** Radio value */
+    /** Radio value. */
     value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** Whether radio is disabled */
+    /** Whether this radio is disabled. */
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    inputRef = viewChild.required('inputEl');
     modelValue = signal(undefined, ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
     onChangeCallback = () => { };
     onTouched = () => { };
-    isChecked = computed(() => this.modelValue() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
-    onChangeEvent(event) {
-        const target = event.target;
-        if (target.checked) {
+    resolvedName = computed(() => this.group?.name() || this.name(), ...(ngDevMode ? [{ debugName: "resolvedName" }] : []));
+    isChecked = computed(() => {
+        const selected = this.group ? this.group.selectedValue() : this.modelValue();
+        return selected === this.value();
+    }, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    isDisabled = computed(() => {
+        if (this.group?.disabled())
+            return true;
+        return this.disabled();
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    resolvedTabindex = computed(() => {
+        if (!this.group)
+            return null;
+        return this.group.tabindexFor(this);
+    }, ...(ngDevMode ? [{ debugName: "resolvedTabindex" }] : []));
+    /** Focuses the native input element. */
+    focus() {
+        this.inputRef().nativeElement.focus();
+    }
+    onChangeEvent() {
+        if (this.group) {
+            this.group.selectRadio(this);
+        }
+        else {
             this.modelValue.set(this.value());
             this.onChangeCallback(this.value());
         }
     }
-    /** ControlValueAccessor implementation */
+    onFocus() {
+        this.group?.onRadioFocus(this);
+    }
+    onKeydown(event) {
+        if (this.group) {
+            this.group.onRadioKeydown(event, this);
+        }
+    }
     writeValue(value) {
         this.modelValue.set(value);
     }
@@ -1243,26 +1273,29 @@ class AfRadioComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfRadioComponent, isStandalone: true, selector: "af-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.2", type: AfRadioComponent, isStandalone: true, selector: "af-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AfRadioComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: `
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <label class="ct-radio">
       <input
+        #inputEl
         class="ct-radio__input"
         type="radio"
-        [name]="name()"
+        [name]="resolvedName()"
         [value]="value()"
         [checked]="isChecked()"
-        [disabled]="disabled()"
-        (change)="onChangeEvent($event)"
+        [disabled]="isDisabled()"
+        [attr.tabindex]="resolvedTabindex()"
+        (change)="onChangeEvent()"
         (blur)="onTouched()"
-      />
+        (focus)="onFocus()"
+        (keydown)="onKeydown($event)" />
       <span class="ct-radio__label">
-        <ng-content></ng-content>
+        <ng-content />
       </span>
     </label>
   `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1273,26 +1306,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AfRadioComponent),
-                            multi: true
-                        }
+                            multi: true,
+                        },
                     ], template: `
     <label class="ct-radio">
       <input
+        #inputEl
         class="ct-radio__input"
         type="radio"
-        [name]="name()"
+        [name]="resolvedName()"
         [value]="value()"
         [checked]="isChecked()"
-        [disabled]="disabled()"
-        (change)="onChangeEvent($event)"
+        [disabled]="isDisabled()"
+        [attr.tabindex]="resolvedTabindex()"
+        (change)="onChangeEvent()"
         (blur)="onTouched()"
-      />
+        (focus)="onFocus()"
+        (keydown)="onKeydown($event)" />
       <span class="ct-radio__label">
-        <ng-content></ng-content>
+        <ng-content />
       </span>
     </label>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+// ── Radio Group ──────────────────────────────────────────────────────────────
+/**
+ * Groups `af-radio` components with `role="radiogroup"`, ARIA labeling,
+ * roving tabindex, and arrow-key navigation per WAI-ARIA Radio Group Pattern.
+ *
+ * Implements `ControlValueAccessor` so the group value can be bound via
+ * `[(ngModel)]` or reactive forms.
+ *
+ * @example
+ * <af-radio-group ariaLabel="Select plan" name="plan" [(ngModel)]="plan">
+ *   <af-radio value="standard">Standard</af-radio>
+ *   <af-radio value="premium">Premium</af-radio>
+ * </af-radio-group>
+ */
+class AfRadioGroupComponent {
+    /** Shared `name` attribute for all child radios. */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** Accessible label for the radio group. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** ID of an external element labeling this group. */
+    ariaLabelledBy = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    /** Disables all radios in the group. */
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    radios = contentChildren(AfRadioComponent, ...(ngDevMode ? [{ debugName: "radios" }] : []));
+    selectedValue = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    onChangeCallback = () => { };
+    onTouchedCallback = () => { };
+    syncEffect = effect(() => {
+        const radios = this.radios();
+        const value = this.selectedValue();
+        const checkedIdx = radios.findIndex((r) => r.value() === value);
+        this.focusedIndex.set(checkedIdx >= 0 ? checkedIdx : 0);
+    }, ...(ngDevMode ? [{ debugName: "syncEffect" }] : []));
+    /** Returns the tabindex a child radio should use for roving tabindex. */
+    tabindexFor(radio) {
+        const radios = this.enabledRadios();
+        const idx = radios.indexOf(radio);
+        if (idx === -1)
+            return -1;
+        return idx === this.focusedIndex() ? 0 : -1;
+    }
+    /** Selects a radio and propagates the value. */
+    selectRadio(radio) {
+        const value = radio.value();
+        this.selectedValue.set(value);
+        this.onChangeCallback(value);
+        this.onTouchedCallback();
+    }
+    /** Called when a child radio receives focus. */
+    onRadioFocus(radio) {
+        const idx = this.enabledRadios().indexOf(radio);
+        if (idx >= 0) {
+            this.focusedIndex.set(idx);
+        }
+    }
+    /** Handles keyboard navigation within the group. */
+    onRadioKeydown(event, _current) {
+        const enabled = this.enabledRadios();
+        if (enabled.length === 0)
+            return;
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                nextIndex = (this.focusedIndex() + 1) % enabled.length;
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                event.preventDefault();
+                nextIndex = (this.focusedIndex() - 1 + enabled.length) % enabled.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                nextIndex = enabled.length - 1;
+                break;
+            case ' ':
+                event.preventDefault();
+                this.selectRadio(enabled[this.focusedIndex()]);
+                return;
+        }
+        if (nextIndex !== null) {
+            this.focusedIndex.set(nextIndex);
+            const target = enabled[nextIndex];
+            target.focus();
+            this.selectRadio(target);
+        }
+    }
+    writeValue(value) {
+        this.selectedValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    enabledRadios() {
+        return this.radios().filter((r) => !r.isDisabled());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.2", type: AfRadioGroupComponent, isStandalone: true, selector: "af-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AfRadioGroupComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "radios", predicate: AfRadioComponent, isSignal: true }], ngImport: i0, template: `
+    <div
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledBy() || null"
+      [attr.aria-disabled]="disabled() || null">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AfRadioGroupComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledBy() || null"
+      [attr.aria-disabled]="disabled() || null">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AfRadioComponent), { isSignal: true }] }] } });
 
 /**
  * Switch/Toggle component with form control support
@@ -1303,7 +1482,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * </af-switch>
  */
 class AfSwitchComponent {
-    /** Whether switch is disabled */
+    /** Accessible label for icon-only or unlabeled switches. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Whether switch is disabled. */
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /** Checked state - supports two-way binding via [(checked)] */
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
@@ -1328,7 +1509,7 @@ class AfSwitchComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfSwitchComponent, isStandalone: true, selector: "af-switch", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfSwitchComponent, isStandalone: true, selector: "af-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AfSwitchComponent),
@@ -1342,9 +1523,9 @@ class AfSwitchComponent {
         role="switch"
         [checked]="checked()"
         [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || null"
         (change)="onChange($event)"
-        (blur)="onTouched()"
-      />
+        (blur)="onTouched()" />
       <span class="ct-switch__label">
         <ng-content></ng-content>
       </span>
@@ -1367,57 +1548,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         role="switch"
         [checked]="checked()"
         [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || null"
         (change)="onChange($event)"
-        (blur)="onTouched()"
-      />
+        (blur)="onTouched()" />
       <span class="ct-switch__label">
         <ng-content></ng-content>
       </span>
     </label>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 /**
- * Card component for containing content
+ * Card component for containing content.
+ *
+ * When `interactive` is set the card becomes keyboard-accessible with
+ * `role="button"`, roving `tabindex`, and Enter/Space activation.
  *
  * @example
  * <af-card elevation="md" padding="lg">
- *   <div header>
- *     <h3>Title</h3>
- *   </div>
- *   <div body>
- *     <p>Card content</p>
- *   </div>
+ *   <div header><h3>Title</h3></div>
+ *   <div body><p>Card content</p></div>
+ * </af-card>
+ *
+ * <af-card interactive ariaLabel="Open project" (cardClick)="open()">
+ *   <p body>Click me</p>
  * </af-card>
  */
 class AfCardComponent {
-    /** Whether card is interactive (clickable/hoverable) */
+    /** Makes the card interactive (clickable, keyboard-accessible). */
     interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
-    /** Shadow elevation level */
+    /** Shadow elevation level. */
     elevation = input(null, ...(ngDevMode ? [{ debugName: "elevation" }] : []));
-    /** Content padding level */
+    /** Content padding level. */
     padding = input(null, ...(ngDevMode ? [{ debugName: "padding" }] : []));
-    /** Click event emitter */
+    /** Accessible label for interactive cards. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Emitted when an interactive card is activated (click, Enter, or Space). */
     cardClick = output();
-    hasHeader = signal(false, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
-    hasFooter = signal(false, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
-    set headerContent(value) {
-        this.hasHeader.set(!!value);
-    }
-    set footerContent(value) {
-        this.hasFooter.set(!!value);
-    }
+    headerRef = contentChild('[header]', { ...(ngDevMode ? { debugName: "headerRef" } : {}), read: ElementRef });
+    footerRef = contentChild('[footer]', { ...(ngDevMode ? { debugName: "footerRef" } : {}), read: ElementRef });
+    hasHeader = computed(() => !!this.headerRef(), ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
+    hasFooter = computed(() => !!this.footerRef(), ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
     static ELEVATION_MAP = {
         none: 'none',
         sm: '0 1px 3px rgba(0, 0, 0, 0.08)',
         md: '0 4px 12px rgba(0, 0, 0, 0.08)',
-        lg: '0 8px 24px rgba(0, 0, 0, 0.12)'
+        lg: '0 8px 24px rgba(0, 0, 0, 0.12)',
     };
     static PADDING_MAP = {
         none: '0',
         sm: 'var(--space-3, 0.75rem)',
         md: 'var(--space-5, 1.25rem)',
-        lg: 'var(--space-7, 2rem)'
+        lg: 'var(--space-7, 2rem)',
     };
     cardClasses = computed(() => {
         const classes = ['ct-card'];
@@ -1441,24 +1623,36 @@ class AfCardComponent {
             this.cardClick.emit();
         }
     }
+    onCardKeydown(event) {
+        if (!this.interactive())
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.cardClick.emit();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfCardComponent, isStandalone: true, selector: "af-card", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["[header]"], descendants: true, read: ElementRef }, { propertyName: "footerContent", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfCardComponent, isStandalone: true, selector: "af-card", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["[header]"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <section
       [class]="cardClasses()"
       [style]="cardStyles()"
-      (click)="onCardClick()">
+      [attr.role]="interactive() ? 'button' : null"
+      [attr.tabindex]="interactive() ? 0 : null"
+      [attr.aria-label]="ariaLabel() || null"
+      (click)="onCardClick()"
+      (keydown)="onCardKeydown($event)">
       @if (hasHeader()) {
         <div class="ct-card__header">
-          <ng-content select="[header]"></ng-content>
+          <ng-content select="[header]" />
         </div>
       }
       <div class="ct-card__body">
-        <ng-content select="[body]"></ng-content>
-        <ng-content></ng-content>
+        <ng-content select="[body]" />
+        <ng-content />
       </div>
       @if (hasFooter()) {
         <div class="ct-card__footer">
-          <ng-content select="[footer]"></ng-content>
+          <ng-content select="[footer]" />
         </div>
       }
     </section>
@@ -1470,30 +1664,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
     <section
       [class]="cardClasses()"
       [style]="cardStyles()"
-      (click)="onCardClick()">
+      [attr.role]="interactive() ? 'button' : null"
+      [attr.tabindex]="interactive() ? 0 : null"
+      [attr.aria-label]="ariaLabel() || null"
+      (click)="onCardClick()"
+      (keydown)="onCardKeydown($event)">
       @if (hasHeader()) {
         <div class="ct-card__header">
-          <ng-content select="[header]"></ng-content>
+          <ng-content select="[header]" />
         </div>
       }
       <div class="ct-card__body">
-        <ng-content select="[body]"></ng-content>
-        <ng-content></ng-content>
+        <ng-content select="[body]" />
+        <ng-content />
       </div>
       @if (hasFooter()) {
         <div class="ct-card__footer">
-          <ng-content select="[footer]"></ng-content>
+          <ng-content select="[footer]" />
         </div>
       }
     </section>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], headerContent: [{
-                type: ContentChild,
-                args: ['[header]', { read: ElementRef }]
-            }], footerContent: [{
-                type: ContentChild,
-                args: ['[footer]', { read: ElementRef }]
-            }] } });
+        }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], headerRef: [{ type: i0.ContentChild, args: ['[header]', { ...{ read: ElementRef }, isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['[footer]', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * Directive for defining custom cell templates in AfDataTableComponent.
@@ -1721,6 +1913,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             args: [{ selector: 'af-data-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"ct-data-table ct-data-table--simple\">\n  <div class=\"ct-data-table__table\">\n    <table [class]=\"tableClasses()\">\n      <thead>\n        <tr>\n          @if (isSelectable()) {\n            <th scope=\"col\" class=\"ct-table__cell--checkbox\">\n              <label class=\"ct-check\">\n                <input\n                  class=\"ct-check__input\"\n                  type=\"checkbox\"\n                  [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\"\n                  (change)=\"toggleAll($any($event.target).checked)\"\n                  aria-label=\"Select all rows\" />\n              </label>\n            </th>\n          }\n          @for (col of columns(); track col.key) {\n            <th scope=\"col\" [attr.aria-sort]=\"getAriaSort(col)\">\n              @if (col.sortable) {\n                <button class=\"ct-table__sort\" type=\"button\" (click)=\"toggleSort(col)\">\n                  {{ col.header }}\n                  <span class=\"ct-table__sort-indicator\" aria-hidden=\"true\"></span>\n                </button>\n              } @else {\n                {{ col.header }}\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of sortedData(); track row) {\n          <tr (click)=\"onRowClick(row)\">\n            @if (isSelectable()) {\n              <td class=\"ct-table__cell--checkbox\">\n                <label class=\"ct-check\">\n                  <input\n                    class=\"ct-check__input\"\n                    type=\"checkbox\"\n                    [checked]=\"isSelected(row)\"\n                    (change)=\"toggleSelection(row, $event)\"\n                    aria-label=\"Select row\" />\n                </label>\n              </td>\n            }\n            @for (col of columns(); track col.key) {\n              <td [class]=\"col.cellClass || ''\">\n                @if (getCellTemplate(col.key); as tmpl) {\n                  <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: row, column: col }\"></ng-container>\n                } @else {\n                  {{ row[col.key] }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [":host{display:block}.ct-data-table__table tr{cursor:pointer}.ct-data-table__table tr:hover{background-color:var(--color-neutral-50)}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AfCellDefDirective), { isSignal: true }] }] } });
 
+const FOCUSABLE_SELECTORS = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/**
+ * Manages focus trapping within a container element.
+ *
+ * Handles Tab/Shift+Tab cycling, save/restore of the previously focused
+ * element, and initial focus placement. Create one instance per overlay
+ * (modal, drawer, popover, etc.).
+ */
+class FocusTrap {
+    previousActiveElement = null;
+    /** Saves the currently focused element for later restoration. */
+    saveFocus() {
+        this.previousActiveElement = document.activeElement;
+    }
+    /** Restores focus to the element saved via `saveFocus()`. */
+    restoreFocus() {
+        if (this.previousActiveElement) {
+            this.previousActiveElement.focus();
+            this.previousActiveElement = null;
+        }
+    }
+    /** Overrides the saved focus target (e.g. to return focus to a specific trigger). */
+    setReturnFocus(element) {
+        this.previousActiveElement = element;
+    }
+    /**
+     * Focuses the first focusable element inside the container,
+     * or the fallback element if no focusable children exist.
+     */
+    focusFirst(container, fallback) {
+        const elements = queryFocusableElements(container);
+        const first = elements[0];
+        if (first) {
+            first.focus();
+        }
+        else {
+            fallback?.focus();
+        }
+    }
+    /**
+     * Handles a Tab keydown event to trap focus within the container.
+     * Call this from a `(keydown)` handler when the key is `Tab`.
+     */
+    handleTab(event, container, fallback) {
+        const elements = queryFocusableElements(container);
+        if (elements.length === 0) {
+            event.preventDefault();
+            fallback?.focus();
+            return;
+        }
+        const first = elements[0];
+        const last = elements[elements.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+}
+/** Queries all visible, enabled, focusable elements within a container. */
+function queryFocusableElements(container) {
+    if (!container)
+        return [];
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS)).filter((el) => !el.hasAttribute('disabled') &&
+        el.getAttribute('aria-hidden') !== 'true');
+}
+
 /**
  * Modal/Dialog component with accessibility features
  *
@@ -1740,6 +2011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  */
 class AfModalComponent {
     static nextId = 0;
+    focusTrap = new FocusTrap();
     /** Whether modal is open */
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     /** Modal title */
@@ -1752,12 +2024,8 @@ class AfModalComponent {
     closed = output();
     /** Unique title ID for aria-labelledby */
     titleId = `af-modal-title-${AfModalComponent.nextId++}`;
-    hasFooter = signal(false, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
-    set footerContent(value) {
-        this.hasFooter.set(!!value);
-    }
-    previousActiveElement = null;
-    focusableElements = [];
+    footerRef = contentChild('[footer]', { ...(ngDevMode ? { debugName: "footerRef" } : {}), read: ElementRef });
+    hasFooter = computed(() => !!this.footerRef(), ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
     viewInitialized = signal(false, ...(ngDevMode ? [{ debugName: "viewInitialized" }] : []));
     dialogRef = viewChild('dialog', ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
     openEffect = effect(() => {
@@ -1767,14 +2035,14 @@ class AfModalComponent {
             this.onOpen();
         }
         else if (!isOpen) {
-            this.restoreFocus();
+            this.focusTrap.restoreFocus();
         }
     }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     ngAfterViewInit() {
         this.viewInitialized.set(true);
     }
     ngOnDestroy() {
-        this.restoreFocus();
+        this.focusTrap.restoreFocus();
     }
     onEscapeKey() {
         if (this.open()) {
@@ -1784,23 +2052,7 @@ class AfModalComponent {
     onKeydown(event) {
         if (!this.open() || event.key !== 'Tab')
             return;
-        this.refreshFocusableElements();
-        if (this.focusableElements.length === 0) {
-            event.preventDefault();
-            this.dialogRef()?.nativeElement.focus();
-            return;
-        }
-        const first = this.focusableElements[0];
-        const last = this.focusableElements[this.focusableElements.length - 1];
-        const active = document.activeElement;
-        if (event.shiftKey && active === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        else if (!event.shiftKey && active === last) {
-            event.preventDefault();
-            first.focus();
-        }
+        this.focusTrap.handleTab(event, this.dialogRef()?.nativeElement, this.dialogRef()?.nativeElement);
     }
     onBackdropClick(event) {
         if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
@@ -1811,46 +2063,15 @@ class AfModalComponent {
         this.closed.emit();
     }
     onOpen() {
-        this.previousActiveElement = document.activeElement;
-        this.refreshFocusableElements();
+        this.focusTrap.saveFocus();
         queueMicrotask(() => {
             if (!this.open())
                 return;
-            const first = this.focusableElements[0];
-            if (first) {
-                first.focus();
-            }
-            else {
-                this.dialogRef()?.nativeElement.focus();
-            }
+            this.focusTrap.focusFirst(this.dialogRef()?.nativeElement, this.dialogRef()?.nativeElement);
         });
     }
-    restoreFocus() {
-        if (this.previousActiveElement) {
-            this.previousActiveElement.focus();
-            this.previousActiveElement = null;
-        }
-    }
-    refreshFocusableElements() {
-        const dialog = this.dialogRef()?.nativeElement;
-        if (!dialog) {
-            this.focusableElements = [];
-            return;
-        }
-        const selectors = [
-            'a[href]',
-            'area[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])'
-        ];
-        this.focusableElements = Array.from(dialog.querySelectorAll(selectors.join(',')))
-            .filter(el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true');
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfModalComponent, isStandalone: true, selector: "af-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()", "document:keydown": "onKeydown($event)" } }, queries: [{ propertyName: "footerContent", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfModalComponent, isStandalone: true, selector: "af-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()", "document:keydown": "onKeydown($event)" } }, queries: [{ propertyName: "footerRef", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <div
         class="ct-modal"
@@ -1932,10 +2153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       </div>
     }
   `, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], footerContent: [{
-                type: ContentChild,
-                args: ['[footer]', { read: ElementRef }]
-            }], dialogRef: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], footerRef: [{ type: i0.ContentChild, args: ['[footer]', { ...{ read: ElementRef }, isSignal: true }] }], dialogRef: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
 
 /**
  * Toast notification service
@@ -2297,7 +2515,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AfTabPanelComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
 
 /**
- * Dropdown menu component
+ * Dropdown menu component implementing the WAI-ARIA Menu Pattern.
+ *
+ * Provides full keyboard navigation (Arrow keys, Home/End, type-ahead),
+ * proper ARIA roles (`menu` / `menuitem`), and roving tabindex focus management.
  *
  * @example
  * <af-dropdown
@@ -2308,19 +2529,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  */
 class AfDropdownComponent {
     static nextId = 0;
-    /** Dropdown button label */
+    /** Dropdown button label. */
     label = input('Actions', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Menu items */
+    /** Menu items. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    /** Item selected event */
+    /** Emits the selected item's value. */
     itemSelected = output();
     triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    menuRef = viewChild('menu', ...(ngDevMode ? [{ debugName: "menuRef" }] : []));
     itemButtons = viewChildren('itemButton', ...(ngDevMode ? [{ debugName: "itemButtons" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    menuId = `af-dropdown-menu-${AfDropdownComponent.nextId++}`;
+    focusedItemIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : []));
+    instanceId = AfDropdownComponent.nextId++;
+    menuId = `af-dropdown-menu-${this.instanceId}`;
+    triggerId = `af-dropdown-trigger-${this.instanceId}`;
+    typeAheadBuffer = '';
+    typeAheadTimer = null;
     toggle() {
         if (this.isOpen()) {
-            this.close();
+            this.close(true);
         }
         else {
             this.open();
@@ -2332,46 +2559,180 @@ class AfDropdownComponent {
             this.close(true);
         }
     }
-    open() {
-        this.isOpen.set(true);
-        queueMicrotask(() => this.focusFirstItem());
-    }
-    close(returnFocus = false) {
-        this.isOpen.set(false);
-        if (returnFocus) {
-            this.triggerRef()?.nativeElement.focus();
+    /** Handles keyboard events on the trigger button. */
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open(true);
+                }
+                break;
         }
     }
-    focusFirstItem() {
-        const first = this.itemButtons().find(ref => !ref.nativeElement.disabled);
-        first?.nativeElement.focus();
+    /** Handles keyboard events within the open menu. */
+    onMenuKeydown(event) {
+        const actionableItems = this.getActionableItems();
+        if (actionableItems.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const next = this.nextEnabledIndex(this.focusedItemIndex(), 1);
+                this.focusItem(next);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prev = this.nextEnabledIndex(this.focusedItemIndex(), -1);
+                this.focusItem(prev);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                const first = this.nextEnabledIndex(-1, 1);
+                this.focusItem(first);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                const last = this.nextEnabledIndex(actionableItems.length, -1);
+                this.focusItem(last);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close(true);
+                break;
+            case 'Tab':
+                this.close(false);
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const item = actionableItems[this.focusedItemIndex()];
+                if (item && !item.disabled) {
+                    this.selectItem(item);
+                }
+                break;
+            }
+            default:
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this.handleTypeAhead(event.key);
+                }
+        }
     }
     onDocumentClick(event) {
         const target = event.target;
         if (!target.closest('.ct-dropdown')) {
-            this.close();
+            this.close(false);
         }
     }
-    onEscape() {
-        if (this.isOpen()) {
-            this.close(true);
+    /**
+     * Returns the index of a non-separator item within the list of
+     * actionable (non-separator) items.
+     */
+    getActionableIndex(item) {
+        return this.getActionableItems().indexOf(item);
+    }
+    open(focusLast = false) {
+        this.isOpen.set(true);
+        const actionableItems = this.getActionableItems();
+        const startIndex = focusLast
+            ? this.nextEnabledIndex(actionableItems.length, -1)
+            : this.nextEnabledIndex(-1, 1);
+        this.focusedItemIndex.set(startIndex);
+        queueMicrotask(() => this.focusCurrent());
+    }
+    close(returnFocus) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.typeAheadBuffer = '';
+        if (returnFocus) {
+            this.triggerRef()?.nativeElement.focus();
+        }
+    }
+    focusItem(index) {
+        this.focusedItemIndex.set(index);
+        this.focusCurrent();
+    }
+    focusCurrent() {
+        const buttons = this.itemButtons();
+        const idx = this.focusedItemIndex();
+        buttons[idx]?.nativeElement.focus();
+    }
+    nextEnabledIndex(from, direction) {
+        const actionableItems = this.getActionableItems();
+        const len = actionableItems.length;
+        if (len === 0)
+            return 0;
+        let idx = from + direction;
+        for (let i = 0; i < len; i++) {
+            if (idx < 0)
+                idx = len - 1;
+            if (idx >= len)
+                idx = 0;
+            if (!actionableItems[idx].disabled)
+                return idx;
+            idx += direction;
+        }
+        return from;
+    }
+    getActionableItems() {
+        return this.items().filter((item) => !item.separator);
+    }
+    handleTypeAhead(char) {
+        if (this.typeAheadTimer) {
+            clearTimeout(this.typeAheadTimer);
+        }
+        this.typeAheadBuffer += char.toLowerCase();
+        this.typeAheadTimer = setTimeout(() => {
+            this.typeAheadBuffer = '';
+            this.typeAheadTimer = null;
+        }, 500);
+        const actionableItems = this.getActionableItems();
+        const startIndex = this.focusedItemIndex() + 1;
+        for (let i = 0; i < actionableItems.length; i++) {
+            const idx = (startIndex + i) % actionableItems.length;
+            const item = actionableItems[idx];
+            if (!item.disabled && item.label.toLowerCase().startsWith(this.typeAheadBuffer)) {
+                this.focusItem(idx);
+                return;
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfDropdownComponent, isStandalone: true, selector: "af-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfDropdownComponent, isStandalone: true, selector: "af-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="ct-dropdown" [attr.data-state]="isOpen() ? 'open' : 'closed'">
       <button
         #trigger
         class="ct-button ct-button--secondary ct-dropdown__trigger"
         [attr.aria-expanded]="isOpen()"
         [attr.aria-controls]="menuId"
-        [attr.aria-haspopup]="true"
+        aria-haspopup="menu"
         type="button"
-        (click)="toggle()">
+        (click)="toggle()"
+        (keydown)="onTriggerKeydown($event)">
         {{ label() }}
       </button>
       @if (isOpen()) {
-        <div class="ct-dropdown__menu" [id]="menuId">
+        <div
+          #menu
+          class="ct-dropdown__menu"
+          [id]="menuId"
+          role="menu"
+          aria-orientation="vertical"
+          [attr.aria-labelledby]="triggerId"
+          (keydown)="onMenuKeydown($event)">
           @for (item of items(); track $index) {
             @if (item.separator) {
               <div class="ct-dropdown__separator" role="separator"></div>
@@ -2379,8 +2740,9 @@ class AfDropdownComponent {
               <button
                 #itemButton
                 class="ct-dropdown__item"
-                [disabled]="item.disabled"
-                [attr.aria-disabled]="item.disabled ? true : null"
+                role="menuitem"
+                [attr.tabindex]="focusedItemIndex() === getActionableIndex(item) ? 0 : -1"
+                [attr.aria-disabled]="item.disabled ? 'true' : null"
                 type="button"
                 (click)="selectItem(item)">
                 {{ item.label }}
@@ -2396,7 +2758,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             type: Component,
             args: [{ selector: 'af-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(document:click)': 'onDocumentClick($event)',
-                        '(document:keydown.escape)': 'onEscape()',
                     }, template: `
     <div class="ct-dropdown" [attr.data-state]="isOpen() ? 'open' : 'closed'">
       <button
@@ -2404,13 +2765,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         class="ct-button ct-button--secondary ct-dropdown__trigger"
         [attr.aria-expanded]="isOpen()"
         [attr.aria-controls]="menuId"
-        [attr.aria-haspopup]="true"
+        aria-haspopup="menu"
         type="button"
-        (click)="toggle()">
+        (click)="toggle()"
+        (keydown)="onTriggerKeydown($event)">
         {{ label() }}
       </button>
       @if (isOpen()) {
-        <div class="ct-dropdown__menu" [id]="menuId">
+        <div
+          #menu
+          class="ct-dropdown__menu"
+          [id]="menuId"
+          role="menu"
+          aria-orientation="vertical"
+          [attr.aria-labelledby]="triggerId"
+          (keydown)="onMenuKeydown($event)">
           @for (item of items(); track $index) {
             @if (item.separator) {
               <div class="ct-dropdown__separator" role="separator"></div>
@@ -2418,8 +2787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               <button
                 #itemButton
                 class="ct-dropdown__item"
-                [disabled]="item.disabled"
-                [attr.aria-disabled]="item.disabled ? true : null"
+                role="menuitem"
+                [attr.tabindex]="focusedItemIndex() === getActionableIndex(item) ? 0 : -1"
+                [attr.aria-disabled]="item.disabled ? 'true' : null"
                 type="button"
                 (click)="selectItem(item)">
                 {{ item.label }}
@@ -2430,7 +2800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       }
     </div>
   `, styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], itemButtons: [{ type: i0.ViewChildren, args: ['itemButton', { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menuRef: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], itemButtons: [{ type: i0.ViewChildren, args: ['itemButton', { isSignal: true }] }] } });
 
 /**
  * Pagination component
@@ -3490,7 +3860,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * <af-badge variant="danger">Blocked</af-badge>
  */
 class AfBadgeComponent {
-    /** Color variant */
+    /** Accessible label, useful when the badge has no visible text. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Color variant. */
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /** Icon character to display */
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -3507,32 +3879,32 @@ class AfBadgeComponent {
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfBadgeComponent, isStandalone: true, selector: "af-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span [class]="badgeClasses()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfBadgeComponent, isStandalone: true, selector: "af-badge", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="badgeClasses()" [attr.aria-label]="ariaLabel() || null">
       @if (icon()) {
         <span class="ct-badge__icon" aria-hidden="true">{{ icon() }}</span>
       }
       @if (dot()) {
         <span class="ct-badge__dot" aria-hidden="true"></span>
       }
-      <ng-content></ng-content>
+      <ng-content />
     </span>
   `, isInline: true, styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'af-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <span [class]="badgeClasses()">
+    <span [class]="badgeClasses()" [attr.aria-label]="ariaLabel() || null">
       @if (icon()) {
         <span class="ct-badge__icon" aria-hidden="true">{{ icon() }}</span>
       }
       @if (dot()) {
         <span class="ct-badge__dot" aria-hidden="true"></span>
       }
-      <ng-content></ng-content>
+      <ng-content />
     </span>
   `, styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
 
 /**
  * Progress bar for showing completion state
@@ -4130,6 +4502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  */
 class AfDrawerComponent {
     static nextId = 0;
+    focusTrap = new FocusTrap();
     /** Two-way bindable open state */
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     /** Slide-in position */
@@ -4149,8 +4522,6 @@ class AfDrawerComponent {
     /** Unique ID for aria-labelledby fallback */
     titleId = `af-drawer-title-${AfDrawerComponent.nextId++}`;
     panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : []));
-    previousActiveElement = null;
-    focusableElements = [];
     containerClasses = computed(() => {
         const classes = ['ct-drawer'];
         const pos = this.position();
@@ -4174,7 +4545,7 @@ class AfDrawerComponent {
     }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     ngOnDestroy() {
         this.unlockBodyScroll();
-        this.restoreFocus();
+        this.focusTrap.restoreFocus();
     }
     /** Closes the drawer and emits the closed event */
     close() {
@@ -4194,53 +4565,23 @@ class AfDrawerComponent {
             return;
         }
         if (event.key === 'Tab') {
-            this.trapFocus(event);
+            const panel = this.panelRef()?.nativeElement;
+            this.focusTrap.handleTab(event, panel, panel);
         }
     }
     onOpen() {
-        this.previousActiveElement = document.activeElement;
+        this.focusTrap.saveFocus();
         this.lockBodyScroll();
         queueMicrotask(() => {
             if (!this.open())
                 return;
-            this.refreshFocusableElements();
-            const first = this.focusableElements[0];
-            if (first) {
-                first.focus();
-            }
-            else {
-                this.panelRef()?.nativeElement.focus();
-            }
+            const panel = this.panelRef()?.nativeElement;
+            this.focusTrap.focusFirst(panel, panel);
         });
     }
     onClose() {
         this.unlockBodyScroll();
-        this.restoreFocus();
-    }
-    trapFocus(event) {
-        this.refreshFocusableElements();
-        if (this.focusableElements.length === 0) {
-            event.preventDefault();
-            this.panelRef()?.nativeElement.focus();
-            return;
-        }
-        const first = this.focusableElements[0];
-        const last = this.focusableElements[this.focusableElements.length - 1];
-        const active = document.activeElement;
-        if (event.shiftKey && active === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        else if (!event.shiftKey && active === last) {
-            event.preventDefault();
-            first.focus();
-        }
-    }
-    restoreFocus() {
-        if (this.previousActiveElement) {
-            this.previousActiveElement.focus();
-            this.previousActiveElement = null;
-        }
+        this.focusTrap.restoreFocus();
     }
     lockBodyScroll() {
         document.body.style.overflow = 'hidden';
@@ -4248,24 +4589,6 @@ class AfDrawerComponent {
     unlockBodyScroll() {
         document.body.style.overflow = '';
     }
-    refreshFocusableElements() {
-        const panel = this.panelRef()?.nativeElement;
-        if (!panel) {
-            this.focusableElements = [];
-            return;
-        }
-        const selectors = [
-            'a[href]',
-            'area[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-        ];
-        this.focusableElements = Array.from(panel.querySelectorAll(selectors.join(','))).filter((el) => !el.hasAttribute('disabled') &&
-            el.getAttribute('aria-hidden') !== 'true');
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfDrawerComponent, isStandalone: true, selector: "af-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeButtonAriaLabel: { classPropertyName: "closeButtonAriaLabel", publicName: "closeButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
@@ -5234,7 +5557,7 @@ class AfFileUploadComponent {
         {{ liveAnnouncement() }}
       </span>
     </div>
-  `, isInline: true, styles: [":host{display:block}.af-file-upload__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: AfButtonComponent, selector: "af-button", inputs: ["variant", "size", "type", "disabled", "iconOnly", "ariaLabel", "title"], outputs: ["clicked"] }, { kind: "component", type: AfBadgeComponent, selector: "af-badge", inputs: ["variant", "icon", "dot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.af-file-upload__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: AfButtonComponent, selector: "af-button", inputs: ["variant", "size", "type", "disabled", "iconOnly", "ariaLabel", "title"], outputs: ["clicked"] }, { kind: "component", type: AfBadgeComponent, selector: "af-badge", inputs: ["ariaLabel", "variant", "icon", "dot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfFileUploadComponent, decorators: [{
             type: Component,
@@ -5872,17 +6195,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 
 let nextId = 0;
 /**
- * Individual navigation item used within af-navbar.
+ * Individual navigation item used within af-navbar or af-toolbar.
+ *
+ * Supports Angular Router via `routerLink`, standard links via `href`,
+ * and button mode when neither is provided. Content projection allows
+ * icons and custom markup inside the link.
  *
  * @example
- * <af-nav-item label="Dashboard" href="/dashboard" [active]="true" />
+ * <af-nav-item label="Dashboard" routerLink="/dashboard">
+ *   <af-icon name="dashboard" /> Dashboard
+ * </af-nav-item>
  */
 class AfNavItemComponent {
-    /** Text label for the navigation item. */
+    /** Text label shown as fallback when no content is projected. Also used by the mobile menu. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     /** URL for the navigation link. Renders as `<a>` when provided, `<button>` otherwise. */
     href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
-    /** Marks this item as the currently active page. */
+    /** Angular Router link. Renders as `<a>` with routerLink and auto-active detection. */
+    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
+    /** Marks this item as the currently active page (used for href/button mode, routerLink auto-detects). */
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
     /** Disables interaction with this item. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
@@ -5903,76 +6234,106 @@ class AfNavItemComponent {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavItemComponent, isStandalone: true, selector: "af-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "linkRef", first: true, predicate: ["linkEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavItemComponent, isStandalone: true, selector: "af-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "linkRef", first: true, predicate: ["linkEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <li class="ct-navbar__item" role="none">
-      @if (href()) {
+      @if (routerLink()) {
+        <a
+          #linkEl
+          class="ct-navbar__link"
+          [routerLink]="routerLink()!"
+          routerLinkActive="ct-navbar__link--active"
+          role="menuitem"
+          [attr.aria-disabled]="disabled() || null"
+          [attr.tabindex]="rovingTabindex()"
+          (click)="onClick($event)">
+          <ng-content>{{ label() }}</ng-content>
+        </a>
+      } @else if (href()) {
         <a
           #linkEl
           class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           [href]="href()"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </a>
       } @else {
         <button
           #linkEl
           class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           type="button"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </button>
       }
     </li>
-  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:contents}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-nav-item', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'af-nav-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], template: `
     <li class="ct-navbar__item" role="none">
-      @if (href()) {
+      @if (routerLink()) {
+        <a
+          #linkEl
+          class="ct-navbar__link"
+          [routerLink]="routerLink()!"
+          routerLinkActive="ct-navbar__link--active"
+          role="menuitem"
+          [attr.aria-disabled]="disabled() || null"
+          [attr.tabindex]="rovingTabindex()"
+          (click)="onClick($event)">
+          <ng-content>{{ label() }}</ng-content>
+        </a>
+      } @else if (href()) {
         <a
           #linkEl
           class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           [href]="href()"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </a>
       } @else {
         <button
           #linkEl
           class="ct-navbar__link"
+          [class.ct-navbar__link--active]="active()"
           type="button"
           role="menuitem"
           [attr.aria-current]="active() ? 'page' : null"
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          {{ label() }}
+          <ng-content>{{ label() }}</ng-content>
         </button>
       }
     </li>
   `, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], linkRef: [{ type: i0.ViewChild, args: ['linkEl', { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], linkRef: [{ type: i0.ViewChild, args: ['linkEl', { isSignal: true }] }] } });
 /**
  * Responsive navbar with mobile menu, keyboard navigation, and ARIA landmarks.
  *
  * @example
  * <af-navbar ariaLabel="Main navigation">
  *   <a brand class="ct-navbar__brand" href="/">My App</a>
- *   <af-nav-item label="Dashboard" href="/dashboard" [active]="true" />
- *   <af-nav-item label="Settings" href="/settings" />
+ *   <af-nav-item label="Dashboard" routerLink="/dashboard">
+ *     <af-icon name="dashboard" /> Dashboard
+ *   </af-nav-item>
+ *   <af-nav-item label="Settings" routerLink="/settings" />
  *   <button actions class="ct-button">Profile</button>
  * </af-navbar>
  */
@@ -6195,7 +6556,19 @@ class AfNavbarComponent {
         role="menu"
         aria-label="Mobile navigation">
         @for (item of items(); track item) {
-          @if (item.href()) {
+          @if (item.routerLink(); as rl) {
+            <a
+              #mobileLink
+              class="ct-navbar__link"
+              [routerLink]="rl"
+              routerLinkActive="ct-navbar__link--active"
+              role="menuitem"
+              [attr.aria-disabled]="item.disabled() || null"
+              [attr.tabindex]="mobileMenuOpen() ? 0 : -1"
+              (click)="onMobileItemClick($event, item)">
+              {{ item.label() }}
+            </a>
+          } @else if (item.href()) {
             <a
               #mobileLink
               class="ct-navbar__link"
@@ -6223,11 +6596,11 @@ class AfNavbarComponent {
         }
       </div>
     </header>
-  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-navbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'af-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], host: {
                         '(keydown)': 'handleKeydown($event)',
                         '(document:click)': 'onDocumentClick($event)',
                     }, template: `
@@ -6268,7 +6641,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         role="menu"
         aria-label="Mobile navigation">
         @for (item of items(); track item) {
-          @if (item.href()) {
+          @if (item.routerLink(); as rl) {
+            <a
+              #mobileLink
+              class="ct-navbar__link"
+              [routerLink]="rl"
+              routerLinkActive="ct-navbar__link--active"
+              role="menuitem"
+              [attr.aria-disabled]="item.disabled() || null"
+              [attr.tabindex]="mobileMenuOpen() ? 0 : -1"
+              (click)="onMobileItemClick($event, item)">
+              {{ item.label() }}
+            </a>
+          } @else if (item.href()) {
             <a
               #mobileLink
               class="ct-navbar__link"
@@ -6347,6 +6732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  */
 class AfPopoverComponent {
     static nextId = 0;
+    focusTrap = new FocusTrap();
     /** Two-way bindable open state. */
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     /** Preferred position relative to the trigger. Flips automatically when space is insufficient. */
@@ -6370,8 +6756,6 @@ class AfPopoverComponent {
     wrapperRef = viewChild('wrapper', ...(ngDevMode ? [{ debugName: "wrapperRef" }] : []));
     contentRef = viewChild('popoverContent', ...(ngDevMode ? [{ debugName: "contentRef" }] : []));
     triggerDirective = contentChild(AfPopoverTriggerDirective, ...(ngDevMode ? [{ debugName: "triggerDirective" }] : []));
-    previousActiveElement = null;
-    focusableElements = [];
     flippedSide = signal(null, ...(ngDevMode ? [{ debugName: "flippedSide" }] : []));
     /** Effective side after auto-flip evaluation. */
     activeSide = computed(() => this.flippedSide() ?? this.position(), ...(ngDevMode ? [{ debugName: "activeSide" }] : []));
@@ -6392,7 +6776,7 @@ class AfPopoverComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     ngOnDestroy() {
-        this.restoreFocus();
+        this.focusTrap.restoreFocus();
     }
     /** Toggle the popover open state. */
     toggle() {
@@ -6421,59 +6805,29 @@ class AfPopoverComponent {
             return;
         const trigger = this.triggerDirective()?.elementRef.nativeElement;
         if (trigger) {
-            this.previousActiveElement = trigger;
+            this.focusTrap.setReturnFocus(trigger);
         }
         this.close();
     }
     onKeydown(event) {
         if (!this.open() || event.key !== 'Tab')
             return;
-        this.trapFocus(event);
+        const content = this.contentRef()?.nativeElement;
+        this.focusTrap.handleTab(event, content, content);
     }
     onOpen() {
-        this.previousActiveElement = document.activeElement;
+        this.focusTrap.saveFocus();
         this.flippedSide.set(this.computeFlippedSide());
         queueMicrotask(() => {
             if (!this.open())
                 return;
-            this.refreshFocusableElements();
-            const first = this.focusableElements[0];
-            if (first) {
-                first.focus();
-            }
-            else {
-                this.contentRef()?.nativeElement.focus();
-            }
+            const content = this.contentRef()?.nativeElement;
+            this.focusTrap.focusFirst(content, content);
         });
     }
     onClose() {
         this.flippedSide.set(null);
-        this.restoreFocus();
-    }
-    restoreFocus() {
-        if (this.previousActiveElement) {
-            this.previousActiveElement.focus();
-            this.previousActiveElement = null;
-        }
-    }
-    trapFocus(event) {
-        this.refreshFocusableElements();
-        if (this.focusableElements.length === 0) {
-            event.preventDefault();
-            this.contentRef()?.nativeElement.focus();
-            return;
-        }
-        const first = this.focusableElements[0];
-        const last = this.focusableElements[this.focusableElements.length - 1];
-        const active = document.activeElement;
-        if (event.shiftKey && active === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        else if (!event.shiftKey && active === last) {
-            event.preventDefault();
-            first.focus();
-        }
+        this.focusTrap.restoreFocus();
     }
     computeFlippedSide() {
         const trigger = this.triggerDirective()?.elementRef.nativeElement;
@@ -6508,24 +6862,6 @@ class AfPopoverComponent {
             return opposite;
         return preferred;
     }
-    refreshFocusableElements() {
-        const content = this.contentRef()?.nativeElement;
-        if (!content) {
-            this.focusableElements = [];
-            return;
-        }
-        const selectors = [
-            'a[href]',
-            'area[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-        ];
-        this.focusableElements = Array.from(content.querySelectorAll(selectors.join(','))).filter((el) => !el.hasAttribute('disabled') &&
-            el.getAttribute('aria-hidden') !== 'true');
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfPopoverComponent, isStandalone: true, selector: "af-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey()", "document:keydown": "onKeydown($event)" } }, providers: [
             { provide: AF_POPOVER, useExisting: forwardRef(() => AfPopoverComponent) },
@@ -7385,5 +7721,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
+export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map