@neuravision/ng-construct 0.3.3 → 0.4.0

package/fesm2022/neuravision-ng-construct.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { input, output, signal, computed, ChangeDetectionStrategy, Component, inject, forwardRef, model, booleanAttribute, viewChild, contentChildren, effect, DOCUMENT, contentChild, ElementRef, TemplateRef, Directive, Injectable, viewChildren, Renderer2, InjectionToken, numberAttribute, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -354,6 +354,464 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AfAccordionItemComponent), { isSignal: true }] }] } });
 
+/**
+ * Skip-link component for keyboard-only navigation bypass.
+ *
+ * Renders an anchor that is visually hidden off-screen and slides into view
+ * when focused. On activation it moves focus to the target element, allowing
+ * keyboard users to skip repetitive navigation blocks.
+ *
+ * Must be placed as the first focusable element in the document.
+ *
+ * @example
+ * <af-skip-link target="main-content" />
+ * <nav>…</nav>
+ * <main id="main-content" tabindex="-1">…</main>
+ */
+class AfSkipLinkComponent {
+    /** ID of the element to skip to (without the leading `#`). */
+    target = input.required(...(ngDevMode ? [{ debugName: "target" }] : []));
+    /** Visible label text shown when the link receives focus. */
+    label = input('Skip to main content', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    document = inject(DOCUMENT);
+    /**
+     * Moves focus to the target element so keyboard navigation
+     * continues from there instead of the top of the page.
+     */
+    focusTarget(event) {
+        event.preventDefault();
+        const el = this.document.getElementById(this.target());
+        if (!el) {
+            return;
+        }
+        if (!el.hasAttribute('tabindex')) {
+            el.setAttribute('tabindex', '-1');
+        }
+        el.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSkipLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfSkipLinkComponent, isStandalone: true, selector: "af-skip-link", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <a
+      class="ct-skip-link"
+      [attr.href]="'#' + target()"
+      (click)="focusTarget($event)"
+    >
+      {{ label() }}
+    </a>
+  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSkipLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-skip-link', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <a
+      class="ct-skip-link"
+      [attr.href]="'#' + target()"
+      (click)="focusTarget($event)"
+    >
+      {{ label() }}
+    </a>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Page header rendered inside the main content area of an App Shell.
+ *
+ * Displays breadcrumbs, page title, and actions in a flex row.
+ * Place inside `<af-app-shell>` without any slot attribute so it
+ * projects into the main area.
+ *
+ * @example
+ * <af-app-shell>
+ *   <af-app-shell-page-header sticky>
+ *     <nav aria-label="Breadcrumb">Home / Dashboard</nav>
+ *     <h1>Dashboard</h1>
+ *     <button class="ct-button">New Item</button>
+ *   </af-app-shell-page-header>
+ *   <p>Main content…</p>
+ * </af-app-shell>
+ */
+class AfAppShellPageHeaderComponent {
+    /** Pin the page header to the top of the scrollable main area. */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), transform: booleanAttribute });
+    classes = computed(() => {
+        const c = ['ct-app-shell__page-header'];
+        if (this.sticky()) {
+            c.push('ct-app-shell__page-header--sticky');
+        }
+        return c.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfAppShellPageHeaderComponent, isStandalone: true, selector: "af-app-shell-page-header", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="classes()">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellPageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-app-shell-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="classes()">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
+/**
+ * Classic CSS-Grid App Shell that orchestrates header, sidebar,
+ * main content, optional panel, and footer.
+ *
+ * Wraps the `ct-app-shell` CSS component from the Construct Design System.
+ * Sidebar and panel states are two-way bindable via `model()` signals.
+ *
+ * Content projection slots:
+ * - `[header]`    — Navbar / top bar
+ * - `[sidebar]`   — Navigation sidebar
+ * - `[panel]`     — Right-side contextual panel
+ * - `[footer]`    — Footer area
+ * - `[bottomNav]` — Mobile bottom navigation (requires `bottomNav` modifier)
+ * - *(default)*   — Main content (including `<af-app-shell-page-header>`)
+ *
+ * @example
+ * <af-app-shell [(sidebarState)]="sidebarState" [(panelState)]="panelState" sidebarFullHeight>
+ *   <af-navbar header ariaLabel="Main">…</af-navbar>
+ *   <af-sidebar sidebar ariaLabel="Navigation">…</af-sidebar>
+ *   <af-app-shell-page-header sticky>
+ *     <h1>Dashboard</h1>
+ *   </af-app-shell-page-header>
+ *   <p>Content goes here</p>
+ *   <div panel>Inspector</div>
+ *   <footer footer>&copy; 2026</footer>
+ * </af-app-shell>
+ */
+class AfAppShellComponent {
+    /** Current sidebar state — two-way bindable. */
+    sidebarState = model('expanded', ...(ngDevMode ? [{ debugName: "sidebarState" }] : []));
+    /** Current panel state — two-way bindable. */
+    panelState = model('closed', ...(ngDevMode ? [{ debugName: "panelState" }] : []));
+    /** Remove the sidebar column entirely. */
+    noSidebar = input(false, { ...(ngDevMode ? { debugName: "noSidebar" } : {}), transform: booleanAttribute });
+    /** Place the sidebar on the right side. */
+    sidebarRight = input(false, { ...(ngDevMode ? { debugName: "sidebarRight" } : {}), transform: booleanAttribute });
+    /** Sidebar spans the full viewport height (header sits beside it). */
+    sidebarFullHeight = input(false, { ...(ngDevMode ? { debugName: "sidebarFullHeight" } : {}), transform: booleanAttribute });
+    /** Stick the footer to the bottom with a top border. */
+    footerSticky = input(false, { ...(ngDevMode ? { debugName: "footerSticky" } : {}), transform: booleanAttribute });
+    /** Enable bottom navigation on mobile (hides sidebar and footer). */
+    bottomNav = input(false, { ...(ngDevMode ? { debugName: "bottomNav" } : {}), transform: booleanAttribute });
+    /** Accessible label for the sidebar landmark. */
+    sidebarLabel = input('Site navigation', ...(ngDevMode ? [{ debugName: "sidebarLabel" }] : []));
+    /** Accessible label for the panel landmark. */
+    panelLabel = input('Details', ...(ngDevMode ? [{ debugName: "panelLabel" }] : []));
+    /** ID of the main content element (used by skip-link). */
+    mainId = input('main-content', ...(ngDevMode ? [{ debugName: "mainId" }] : []));
+    /** Visible text of the skip-link. */
+    skipLinkLabel = input('Skip to content', ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : []));
+    shellClasses = computed(() => {
+        const classes = ['ct-app-shell'];
+        if (this.noSidebar()) {
+            classes.push('ct-app-shell--no-sidebar');
+        }
+        if (this.sidebarRight()) {
+            classes.push('ct-app-shell--sidebar-right');
+        }
+        if (this.sidebarFullHeight()) {
+            classes.push('ct-app-shell--sidebar-full-height');
+        }
+        if (this.footerSticky()) {
+            classes.push('ct-app-shell--footer-sticky');
+        }
+        if (this.bottomNav()) {
+            classes.push('ct-app-shell--bottom-nav');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : []));
+    /** Dismiss the mobile sidebar overlay. */
+    onBackdropClick() {
+        this.sidebarState.set('hidden');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfAppShellComponent, isStandalone: true, selector: "af-app-shell", inputs: { sidebarState: { classPropertyName: "sidebarState", publicName: "sidebarState", isSignal: true, isRequired: false, transformFunction: null }, panelState: { classPropertyName: "panelState", publicName: "panelState", isSignal: true, isRequired: false, transformFunction: null }, noSidebar: { classPropertyName: "noSidebar", publicName: "noSidebar", isSignal: true, isRequired: false, transformFunction: null }, sidebarRight: { classPropertyName: "sidebarRight", publicName: "sidebarRight", isSignal: true, isRequired: false, transformFunction: null }, sidebarFullHeight: { classPropertyName: "sidebarFullHeight", publicName: "sidebarFullHeight", isSignal: true, isRequired: false, transformFunction: null }, footerSticky: { classPropertyName: "footerSticky", publicName: "footerSticky", isSignal: true, isRequired: false, transformFunction: null }, bottomNav: { classPropertyName: "bottomNav", publicName: "bottomNav", isSignal: true, isRequired: false, transformFunction: null }, sidebarLabel: { classPropertyName: "sidebarLabel", publicName: "sidebarLabel", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null }, mainId: { classPropertyName: "mainId", publicName: "mainId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarState: "sidebarStateChange", panelState: "panelStateChange" }, ngImport: i0, template: `
+    <div
+      [class]="shellClasses()"
+      [attr.data-sidebar-state]="sidebarState()"
+      [attr.data-panel-state]="panelState()">
+      <af-skip-link [target]="mainId()" [label]="skipLinkLabel()" />
+
+      <header class="ct-app-shell__header">
+        <ng-content select="[header]" />
+      </header>
+
+      <aside class="ct-app-shell__sidebar" [attr.aria-label]="sidebarLabel()">
+        <ng-content select="[sidebar]" />
+      </aside>
+
+      <main class="ct-app-shell__main" [id]="mainId()" tabindex="0">
+        <ng-content />
+      </main>
+
+      <aside class="ct-app-shell__panel" [attr.aria-label]="panelLabel()">
+        <ng-content select="[panel]" />
+      </aside>
+
+      <footer class="ct-app-shell__footer">
+        <ng-content select="[footer]" />
+      </footer>
+
+      <div class="ct-app-shell__bottom-nav">
+        <ng-content select="[bottomNav]" />
+      </div>
+
+      <div
+        class="ct-app-shell__backdrop"
+        (click)="onBackdropClick()"
+        aria-hidden="true"></div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: AfSkipLinkComponent, selector: "af-skip-link", inputs: ["target", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfSkipLinkComponent], template: `
+    <div
+      [class]="shellClasses()"
+      [attr.data-sidebar-state]="sidebarState()"
+      [attr.data-panel-state]="panelState()">
+      <af-skip-link [target]="mainId()" [label]="skipLinkLabel()" />
+
+      <header class="ct-app-shell__header">
+        <ng-content select="[header]" />
+      </header>
+
+      <aside class="ct-app-shell__sidebar" [attr.aria-label]="sidebarLabel()">
+        <ng-content select="[sidebar]" />
+      </aside>
+
+      <main class="ct-app-shell__main" [id]="mainId()" tabindex="0">
+        <ng-content />
+      </main>
+
+      <aside class="ct-app-shell__panel" [attr.aria-label]="panelLabel()">
+        <ng-content select="[panel]" />
+      </aside>
+
+      <footer class="ct-app-shell__footer">
+        <ng-content select="[footer]" />
+      </footer>
+
+      <div class="ct-app-shell__bottom-nav">
+        <ng-content select="[bottomNav]" />
+      </div>
+
+      <div
+        class="ct-app-shell__backdrop"
+        (click)="onBackdropClick()"
+        aria-hidden="true"></div>
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { sidebarState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarState", required: false }] }, { type: i0.Output, args: ["sidebarStateChange"] }], panelState: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelState", required: false }] }, { type: i0.Output, args: ["panelStateChange"] }], noSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSidebar", required: false }] }], sidebarRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarRight", required: false }] }], sidebarFullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFullHeight", required: false }] }], footerSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerSticky", required: false }] }], bottomNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomNav", required: false }] }], sidebarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], mainId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainId", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
+
+/**
+ * Toolbar rendered inside the main content area of an App Shell V2.
+ *
+ * Replaces the classic full-width page header with a toolbar row
+ * for breadcrumbs, page title, and actions. Place inside
+ * `<af-app-shell-v2>` without any slot attribute so it projects
+ * into the main area.
+ *
+ * @example
+ * <af-app-shell-v2>
+ *   <af-app-shell-v2-toolbar sticky>
+ *     <nav aria-label="Breadcrumb">Home / Dashboard</nav>
+ *     <div>
+ *       <button class="ct-button">Export</button>
+ *     </div>
+ *   </af-app-shell-v2-toolbar>
+ *   <p>Main content…</p>
+ * </af-app-shell-v2>
+ */
+class AfAppShellV2ToolbarComponent {
+    /** Pin the toolbar to the top of the scrollable main area. */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), transform: booleanAttribute });
+    classes = computed(() => {
+        const c = ['ct-app-shell-v2__toolbar'];
+        if (this.sticky()) {
+            c.push('ct-app-shell-v2__toolbar--sticky');
+        }
+        return c.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellV2ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfAppShellV2ToolbarComponent, isStandalone: true, selector: "af-app-shell-v2-toolbar", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="classes()">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellV2ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-app-shell-v2-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="classes()">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
+/**
+ * Floating-canvas App Shell with elevated surfaces, rounded corners,
+ * and optional glass/branded modifiers.
+ *
+ * Wraps the `ct-app-shell-v2` CSS component from the Construct Design System.
+ * Sidebar and panel states are two-way bindable via `model()` signals.
+ *
+ * Content projection slots:
+ * - `[header]`   — Optional floating header bar (requires `withHeader` input)
+ * - `[sidebar]`  — Floating sidebar surface
+ * - `[panel]`    — Right-side contextual panel (inside body flex container)
+ * - `[footer]`   — Footer inside the main area
+ * - *(default)*  — Main content (including `<af-app-shell-v2-toolbar>`)
+ *
+ * @example
+ * <af-app-shell-v2
+ *   [(sidebarState)]="sidebarState"
+ *   [(panelState)]="panelState"
+ *   withHeader
+ *   sidebarBranded
+ *   glass>
+ *   <af-navbar header ariaLabel="Main">…</af-navbar>
+ *   <af-sidebar sidebar ariaLabel="Navigation">…</af-sidebar>
+ *   <af-app-shell-v2-toolbar sticky>
+ *     <h1>Dashboard</h1>
+ *   </af-app-shell-v2-toolbar>
+ *   <p>Content goes here</p>
+ *   <div panel>Inspector</div>
+ *   <footer footer>&copy; 2026</footer>
+ * </af-app-shell-v2>
+ */
+class AfAppShellV2Component {
+    /** Current sidebar state — two-way bindable. */
+    sidebarState = model('expanded', ...(ngDevMode ? [{ debugName: "sidebarState" }] : []));
+    /** Current panel state — two-way bindable. */
+    panelState = model('closed', ...(ngDevMode ? [{ debugName: "panelState" }] : []));
+    /** Remove the sidebar entirely. */
+    noSidebar = input(false, { ...(ngDevMode ? { debugName: "noSidebar" } : {}), transform: booleanAttribute });
+    /** Place the sidebar on the right side. */
+    sidebarRight = input(false, { ...(ngDevMode ? { debugName: "sidebarRight" } : {}), transform: booleanAttribute });
+    /** Sidebar spans the full viewport height (header sits beside it). */
+    sidebarFullHeight = input(false, { ...(ngDevMode ? { debugName: "sidebarFullHeight" } : {}), transform: booleanAttribute });
+    /** Show the optional floating header bar. */
+    withHeader = input(false, { ...(ngDevMode ? { debugName: "withHeader" } : {}), transform: booleanAttribute });
+    /** Dark-branded sidebar (Slack / Linear / Discord aesthetic). */
+    sidebarBranded = input(false, { ...(ngDevMode ? { debugName: "sidebarBranded" } : {}), transform: booleanAttribute });
+    /** Frosted glass morphism effect on all floating surfaces. */
+    glass = input(false, { ...(ngDevMode ? { debugName: "glass" } : {}), transform: booleanAttribute });
+    /** Accessible label for the sidebar landmark. */
+    sidebarLabel = input('Site navigation', ...(ngDevMode ? [{ debugName: "sidebarLabel" }] : []));
+    /** Accessible label for the panel landmark. */
+    panelLabel = input('Details', ...(ngDevMode ? [{ debugName: "panelLabel" }] : []));
+    /** ID of the main content element (used by skip-link). */
+    mainId = input('main-content', ...(ngDevMode ? [{ debugName: "mainId" }] : []));
+    /** Visible text of the skip-link. */
+    skipLinkLabel = input('Skip to content', ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : []));
+    shellClasses = computed(() => {
+        const classes = ['ct-app-shell-v2'];
+        if (this.noSidebar()) {
+            classes.push('ct-app-shell-v2--no-sidebar');
+        }
+        if (this.sidebarRight()) {
+            classes.push('ct-app-shell-v2--sidebar-right');
+        }
+        if (this.sidebarFullHeight()) {
+            classes.push('ct-app-shell-v2--sidebar-full-height');
+        }
+        if (this.withHeader()) {
+            classes.push('ct-app-shell-v2--with-header');
+        }
+        if (this.sidebarBranded()) {
+            classes.push('ct-app-shell-v2--sidebar-branded');
+        }
+        if (this.glass()) {
+            classes.push('ct-app-shell-v2--glass');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : []));
+    /** Dismiss the mobile sidebar overlay. */
+    onBackdropClick() {
+        this.sidebarState.set('hidden');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfAppShellV2Component, isStandalone: true, selector: "af-app-shell-v2", inputs: { sidebarState: { classPropertyName: "sidebarState", publicName: "sidebarState", isSignal: true, isRequired: false, transformFunction: null }, panelState: { classPropertyName: "panelState", publicName: "panelState", isSignal: true, isRequired: false, transformFunction: null }, noSidebar: { classPropertyName: "noSidebar", publicName: "noSidebar", isSignal: true, isRequired: false, transformFunction: null }, sidebarRight: { classPropertyName: "sidebarRight", publicName: "sidebarRight", isSignal: true, isRequired: false, transformFunction: null }, sidebarFullHeight: { classPropertyName: "sidebarFullHeight", publicName: "sidebarFullHeight", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null }, sidebarBranded: { classPropertyName: "sidebarBranded", publicName: "sidebarBranded", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, sidebarLabel: { classPropertyName: "sidebarLabel", publicName: "sidebarLabel", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null }, mainId: { classPropertyName: "mainId", publicName: "mainId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarState: "sidebarStateChange", panelState: "panelStateChange" }, ngImport: i0, template: `
+    <div
+      [class]="shellClasses()"
+      [attr.data-sidebar-state]="sidebarState()"
+      [attr.data-panel-state]="panelState()">
+      <af-skip-link [target]="mainId()" [label]="skipLinkLabel()" />
+
+      @if (withHeader()) {
+        <header class="ct-app-shell-v2__header">
+          <ng-content select="[header]" />
+        </header>
+      }
+
+      <aside class="ct-app-shell-v2__sidebar" [attr.aria-label]="sidebarLabel()">
+        <ng-content select="[sidebar]" />
+      </aside>
+
+      <div class="ct-app-shell-v2__body">
+        <main class="ct-app-shell-v2__main" [id]="mainId()" tabindex="0">
+          <ng-content />
+          <div class="ct-app-shell-v2__footer">
+            <ng-content select="[footer]" />
+          </div>
+        </main>
+
+        <aside class="ct-app-shell-v2__panel" [attr.aria-label]="panelLabel()">
+          <ng-content select="[panel]" />
+        </aside>
+      </div>
+
+      <div
+        class="ct-app-shell-v2__backdrop"
+        (click)="onBackdropClick()"
+        aria-hidden="true"></div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: AfSkipLinkComponent, selector: "af-skip-link", inputs: ["target", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAppShellV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-app-shell-v2', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfSkipLinkComponent], template: `
+    <div
+      [class]="shellClasses()"
+      [attr.data-sidebar-state]="sidebarState()"
+      [attr.data-panel-state]="panelState()">
+      <af-skip-link [target]="mainId()" [label]="skipLinkLabel()" />
+
+      @if (withHeader()) {
+        <header class="ct-app-shell-v2__header">
+          <ng-content select="[header]" />
+        </header>
+      }
+
+      <aside class="ct-app-shell-v2__sidebar" [attr.aria-label]="sidebarLabel()">
+        <ng-content select="[sidebar]" />
+      </aside>
+
+      <div class="ct-app-shell-v2__body">
+        <main class="ct-app-shell-v2__main" [id]="mainId()" tabindex="0">
+          <ng-content />
+          <div class="ct-app-shell-v2__footer">
+            <ng-content select="[footer]" />
+          </div>
+        </main>
+
+        <aside class="ct-app-shell-v2__panel" [attr.aria-label]="panelLabel()">
+          <ng-content select="[panel]" />
+        </aside>
+      </div>
+
+      <div
+        class="ct-app-shell-v2__backdrop"
+        (click)="onBackdropClick()"
+        aria-hidden="true"></div>
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { sidebarState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarState", required: false }] }, { type: i0.Output, args: ["sidebarStateChange"] }], panelState: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelState", required: false }] }, { type: i0.Output, args: ["panelStateChange"] }], noSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSidebar", required: false }] }], sidebarRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarRight", required: false }] }], sidebarFullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFullHeight", required: false }] }], withHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHeader", required: false }] }], sidebarBranded: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarBranded", required: false }] }], glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], sidebarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], mainId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainId", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
+
 /**
  * Avatar component displaying a user image with fallback to initials.
  *
@@ -2506,6 +2964,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], 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 }] }] } });
 
+/**
+ * Router-based tab navigation component.
+ *
+ * Uses the `ct-tabs` CSS classes from the Construct Design System but renders
+ * `<a routerLink>` elements for navigation. Active state is determined
+ * automatically via `routerLinkActive`.
+ *
+ * For content-panel tabs (show/hide content without routing), use `<af-tabs>` instead.
+ *
+ * @example
+ * <af-nav-tabs
+ *   [tabs]="[
+ *     { id: 'my', label: 'My Documents', routerLink: '/documents/my' },
+ *     { id: 'all', label: 'All Documents', routerLink: '/documents/all' }
+ *   ]">
+ * </af-nav-tabs>
+ */
+class AfNavTabsComponent {
+    /** Tab items to render. */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /** Visual variant. `'pill'` renders pill-shaped tabs with background. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Accessible label for the tab navigation. */
+    ariaLabel = input('Sub navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ct-tabs'];
+        const v = this.variant();
+        if (v === 'pill')
+            classes.push('ct-tabs--pill');
+        const s = this.size();
+        if (s !== 'md')
+            classes.push(`ct-tabs--${s}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavTabsComponent, isStandalone: true, selector: "af-nav-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 } }, ngImport: i0, template: `
+    <nav [class]="containerClasses()" [attr.aria-label]="ariaLabel()">
+      <ul class="ct-tabs__list">
+        @for (tab of tabs(); track tab.id) {
+          <li>
+            @if (tab.disabled) {
+              <span
+                class="ct-tabs__trigger"
+                aria-disabled="true"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </span>
+            } @else {
+              <a
+                class="ct-tabs__trigger"
+                [routerLink]="tab.routerLink"
+                routerLinkActive="ct-tabs__trigger--active"
+                #rla="routerLinkActive"
+                [attr.aria-current]="rla.isActive ? 'page' : null"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, isInline: true, styles: [":host{display:block}ul{list-style:none;margin:0;padding:0}li{display:contents}.ct-tabs__trigger--active{color:var(--color-text-primary)}.ct-tabs__trigger--active:after{background:var(--ct-tabs-indicator-color, var(--color-brand-primary))}.ct-tabs--pill .ct-tabs__trigger--active{background:var(--color-bg-elevated);box-shadow:var(--shadow-sm)}.ct-tabs--pill .ct-tabs__trigger--active:after{display:none}.ct-tabs__trigger[aria-disabled=true]{color:var(--color-text-muted);opacity:var(--opacity-disabled, .5);cursor:not-allowed;pointer-events:none}\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: AfNavTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-nav-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], template: `
+    <nav [class]="containerClasses()" [attr.aria-label]="ariaLabel()">
+      <ul class="ct-tabs__list">
+        @for (tab of tabs(); track tab.id) {
+          <li>
+            @if (tab.disabled) {
+              <span
+                class="ct-tabs__trigger"
+                aria-disabled="true"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </span>
+            } @else {
+              <a
+                class="ct-tabs__trigger"
+                [routerLink]="tab.routerLink"
+                routerLinkActive="ct-tabs__trigger--active"
+                #rla="routerLinkActive"
+                [attr.aria-current]="rla.isActive ? 'page' : null"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, styles: [":host{display:block}ul{list-style:none;margin:0;padding:0}li{display:contents}.ct-tabs__trigger--active{color:var(--color-text-primary)}.ct-tabs__trigger--active:after{background:var(--ct-tabs-indicator-color, var(--color-brand-primary))}.ct-tabs--pill .ct-tabs__trigger--active{background:var(--color-bg-elevated);box-shadow:var(--shadow-sm)}.ct-tabs--pill .ct-tabs__trigger--active:after{display:none}.ct-tabs__trigger[aria-disabled=true]{color:var(--color-text-muted);opacity:var(--opacity-disabled, .5);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 /**
  * Dropdown menu component implementing the WAI-ARIA Menu Pattern.
  *
@@ -2526,6 +3082,10 @@ class AfDropdownComponent {
     label = input('Actions', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Trigger button size. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Horizontal alignment of the menu relative to the trigger. */
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Which side of the trigger the menu opens on. */
+    side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : []));
     /** Menu items. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /** Emits the selected item's value. */
@@ -2712,8 +3272,8 @@ class AfDropdownComponent {
         }
     }
     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 }, size: { classPropertyName: "size", publicName: "size", 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'">
+    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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", 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'" [attr.data-align]="align()" [attr.data-side]="side()">
       <button
         #trigger
         [id]="triggerId"
@@ -2761,7 +3321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             args: [{ selector: 'af-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(document:click)': 'onDocumentClick($event)',
                     }, template: `
-    <div class="ct-dropdown" [attr.data-state]="isOpen() ? 'open' : 'closed'">
+    <div class="ct-dropdown" [attr.data-state]="isOpen() ? 'open' : 'closed'" [attr.data-align]="align()" [attr.data-side]="side()">
       <button
         #trigger
         [id]="triggerId"
@@ -2803,7 +3363,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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", 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
@@ -2945,10 +3505,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 /**
- * Breadcrumbs navigation component
+ * Breadcrumbs navigation component with Angular Router support.
+ *
+ * Items with `routerLink` navigate via the Angular Router (no page reload).
+ * Items with `url` render a plain `<a href>` (for external links).
+ * The last item is always rendered as static text (current page).
  *
  * @example
- * <af-breadcrumbs [items]="breadcrumbs"></af-breadcrumbs>
+ * <af-breadcrumbs [items]="[
+ *   { label: 'Home', routerLink: '/' },
+ *   { label: 'Documents', routerLink: '/documents' },
+ *   { label: 'My Documents' }
+ * ]"></af-breadcrumbs>
  */
 class AfBreadcrumbsComponent {
     /** Breadcrumb items */
@@ -2959,34 +3527,50 @@ class AfBreadcrumbsComponent {
       <ol class="ct-breadcrumbs__list">
         @for (item of items(); track $index; let isLast = $last) {
           <li class="ct-breadcrumbs__item">
-            @if (!isLast && item.url) {
+            @if (isLast) {
+              <span class="ct-breadcrumbs__current" aria-current="page">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="ct-breadcrumbs__link" [routerLink]="item.routerLink">
+                {{ item.label }}
+              </a>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
+            } @else if (item.url) {
               <a class="ct-breadcrumbs__link" [href]="item.url">
                 {{ item.label }}
               </a>
-              <span class="ct-breadcrumbs__separator">/</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             } @else {
-              <span class="ct-breadcrumbs__current">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__text">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             }
           </li>
         }
       </ol>
     </nav>
-  `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'af-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: `
     <nav class="ct-breadcrumbs" aria-label="Breadcrumb">
       <ol class="ct-breadcrumbs__list">
         @for (item of items(); track $index; let isLast = $last) {
           <li class="ct-breadcrumbs__item">
-            @if (!isLast && item.url) {
+            @if (isLast) {
+              <span class="ct-breadcrumbs__current" aria-current="page">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="ct-breadcrumbs__link" [routerLink]="item.routerLink">
+                {{ item.label }}
+              </a>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
+            } @else if (item.url) {
               <a class="ct-breadcrumbs__link" [href]="item.url">
                 {{ item.label }}
               </a>
-              <span class="ct-breadcrumbs__separator">/</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             } @else {
-              <span class="ct-breadcrumbs__current">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__text">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             }
           </li>
         }
@@ -6253,6 +6837,10 @@ class AfNavItemComponent {
     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 }, 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">
+      <ng-template #contentTpl>
+        <ng-content>{{ label() }}</ng-content>
+      </ng-template>
+
       @if (routerLink()) {
         <a
           #linkEl
@@ -6263,7 +6851,7 @@ class AfNavItemComponent {
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          <ng-content>{{ label() }}</ng-content>
+          <ng-container [ngTemplateOutlet]="contentTpl" />
         </a>
       } @else if (href()) {
         <a
@@ -6276,7 +6864,7 @@ class AfNavItemComponent {
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          <ng-content>{{ label() }}</ng-content>
+          <ng-container [ngTemplateOutlet]="contentTpl" />
         </a>
       } @else {
         <button
@@ -6289,16 +6877,20 @@ class AfNavItemComponent {
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          <ng-content>{{ label() }}</ng-content>
+          <ng-container [ngTemplateOutlet]="contentTpl" />
         </button>
       }
     </li>
-  `, 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 });
+  `, 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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, imports: [RouterLink, RouterLinkActive], template: `
+            args: [{ selector: 'af-nav-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive, NgTemplateOutlet], template: `
     <li class="ct-navbar__item" role="none">
+      <ng-template #contentTpl>
+        <ng-content>{{ label() }}</ng-content>
+      </ng-template>
+
       @if (routerLink()) {
         <a
           #linkEl
@@ -6309,7 +6901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          <ng-content>{{ label() }}</ng-content>
+          <ng-container [ngTemplateOutlet]="contentTpl" />
         </a>
       } @else if (href()) {
         <a
@@ -6322,7 +6914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          <ng-content>{{ label() }}</ng-content>
+          <ng-container [ngTemplateOutlet]="contentTpl" />
         </a>
       } @else {
         <button
@@ -6335,7 +6927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
           [attr.aria-disabled]="disabled() || null"
           [attr.tabindex]="rovingTabindex()"
           (click)="onClick($event)">
-          <ng-content>{{ label() }}</ng-content>
+          <ng-container [ngTemplateOutlet]="contentTpl" />
         </button>
       }
     </li>
@@ -6537,7 +7129,9 @@ class AfNavbarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavbarComponent, isStandalone: true, selector: "af-navbar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeydown($event)", "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "items", predicate: AfNavItemComponent, isSignal: true }], viewQueries: [{ propertyName: "toggleRef", first: true, predicate: ["toggleBtn"], descendants: true, isSignal: true }, { propertyName: "mobileLinks", predicate: ["mobileLink"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <header [class]="navbarClasses()">
-      <ng-content select="[brand]" />
+      <div class="ct-navbar__brand-wrapper">
+        <ng-content select="[brand]" />
+      </div>
 
       <button
         #toggleBtn
@@ -6622,7 +7216,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         '(document:click)': 'onDocumentClick($event)',
                     }, template: `
     <header [class]="navbarClasses()">
-      <ng-content select="[brand]" />
+      <div class="ct-navbar__brand-wrapper">
+        <ng-content select="[brand]" />
+      </div>
 
       <button
         #toggleBtn
@@ -7117,65 +7713,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:contents}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
-/**
- * Skip-link component for keyboard-only navigation bypass.
- *
- * Renders an anchor that is visually hidden off-screen and slides into view
- * when focused. On activation it moves focus to the target element, allowing
- * keyboard users to skip repetitive navigation blocks.
- *
- * Must be placed as the first focusable element in the document.
- *
- * @example
- * <af-skip-link target="main-content" />
- * <nav>…</nav>
- * <main id="main-content" tabindex="-1">…</main>
- */
-class AfSkipLinkComponent {
-    /** ID of the element to skip to (without the leading `#`). */
-    target = input.required(...(ngDevMode ? [{ debugName: "target" }] : []));
-    /** Visible label text shown when the link receives focus. */
-    label = input('Skip to main content', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    document = inject(DOCUMENT);
-    /**
-     * Moves focus to the target element so keyboard navigation
-     * continues from there instead of the top of the page.
-     */
-    focusTarget(event) {
-        event.preventDefault();
-        const el = this.document.getElementById(this.target());
-        if (!el) {
-            return;
-        }
-        if (!el.hasAttribute('tabindex')) {
-            el.setAttribute('tabindex', '-1');
-        }
-        el.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSkipLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfSkipLinkComponent, isStandalone: true, selector: "af-skip-link", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <a
-      class="ct-skip-link"
-      [attr.href]="'#' + target()"
-      (click)="focusTarget($event)"
-    >
-      {{ label() }}
-    </a>
-  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSkipLinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'af-skip-link', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <a
-      class="ct-skip-link"
-      [attr.href]="'#' + target()"
-      (click)="focusTarget($event)"
-    >
-      {{ label() }}
-    </a>
-  `, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
-
 /**
  * Empty state component for displaying placeholder content when no data is available.
  *
@@ -7738,5 +8275,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, AfRadioGroupComponent, 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, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, 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