@neuravision/ng-construct 0.3.2 → 0.3.6

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.
  *
@@ -2521,15 +2979,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  */
 class AfDropdownComponent {
     static nextId = 0;
+    hostRef = inject(ElementRef);
     /** Dropdown button label. */
     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. */
     itemSelected = output();
+    /** Computed CSS classes for the trigger button. */
+    triggerClasses = computed(() => {
+        const classes = ['ct-button', 'ct-button--secondary', 'ct-dropdown__trigger'];
+        if (this.size() !== 'md') {
+            classes.push(`ct-button--${this.size()}`);
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
     menuRef = viewChild('menu', ...(ngDevMode ? [{ debugName: "menuRef" }] : []));
     itemButtons = viewChildren('itemButton', ...(ngDevMode ? [{ debugName: "itemButtons" }] : []));
+    /** Non-separator items that can receive focus and be selected. */
+    actionableItems = computed(() => this.items().filter((item) => !item.separator), ...(ngDevMode ? [{ debugName: "actionableItems" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     focusedItemIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : []));
     instanceId = AfDropdownComponent.nextId++;
@@ -2572,7 +3047,7 @@ class AfDropdownComponent {
     }
     /** Handles keyboard events within the open menu. */
     onMenuKeydown(event) {
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         if (actionableItems.length === 0)
             return;
         switch (event.key) {
@@ -2623,8 +3098,7 @@ class AfDropdownComponent {
         }
     }
     onDocumentClick(event) {
-        const target = event.target;
-        if (!target.closest('.ct-dropdown')) {
+        if (!this.hostRef.nativeElement.contains(event.target)) {
             this.close(false);
         }
     }
@@ -2633,11 +3107,11 @@ class AfDropdownComponent {
      * actionable (non-separator) items.
      */
     getActionableIndex(item) {
-        return this.getActionableItems().indexOf(item);
+        return this.actionableItems().indexOf(item);
     }
     open(focusLast = false) {
         this.isOpen.set(true);
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         const startIndex = focusLast
             ? this.nextEnabledIndex(actionableItems.length, -1)
             : this.nextEnabledIndex(-1, 1);
@@ -2663,7 +3137,7 @@ class AfDropdownComponent {
         buttons[idx]?.nativeElement.focus();
     }
     nextEnabledIndex(from, direction) {
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         const len = actionableItems.length;
         if (len === 0)
             return 0;
@@ -2679,9 +3153,6 @@ class AfDropdownComponent {
         }
         return from;
     }
-    getActionableItems() {
-        return this.items().filter((item) => !item.separator);
-    }
     handleTypeAhead(char) {
         if (this.typeAheadTimer) {
             clearTimeout(this.typeAheadTimer);
@@ -2691,7 +3162,7 @@ class AfDropdownComponent {
             this.typeAheadBuffer = '';
             this.typeAheadTimer = null;
         }, 500);
-        const actionableItems = this.getActionableItems();
+        const actionableItems = this.actionableItems();
         const startIndex = this.focusedItemIndex() + 1;
         for (let i = 0; i < actionableItems.length; i++) {
             const idx = (startIndex + i) % actionableItems.length;
@@ -2703,11 +3174,12 @@ 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 }, 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
-        class="ct-button ct-button--secondary ct-dropdown__trigger"
+        [id]="triggerId"
+        [class]="triggerClasses()"
         [attr.aria-expanded]="isOpen()"
         [attr.aria-controls]="menuId"
         aria-haspopup="menu"
@@ -2751,10 +3223,11 @@ 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
-        class="ct-button ct-button--secondary ct-dropdown__trigger"
+        [id]="triggerId"
+        [class]="triggerClasses()"
         [attr.aria-expanded]="isOpen()"
         [attr.aria-controls]="menuId"
         aria-haspopup="menu"
@@ -2792,7 +3265,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 }] }], 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
@@ -6242,6 +6715,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
@@ -6252,7 +6729,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
@@ -6265,7 +6742,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
@@ -6278,16 +6755,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
@@ -6298,7 +6779,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
@@ -6311,7 +6792,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
@@ -6324,7 +6805,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>
@@ -6526,7 +7007,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
@@ -6611,7 +7094,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
@@ -7106,65 +7591,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.
  *
@@ -7727,5 +8153,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, 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