@devjuliovilla/jv-ui 1.15.0 → 1.17.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, inject, signal, Injectable, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, TemplateRef, Directive, contentChild, output, effect, forwardRef, viewChild, untracked, contentChildren, HostListener, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef, DestroyRef } from '@angular/core';
+import { input, computed, Component, inject, Renderer2, ElementRef, HostListener, Directive, signal, Injectable, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, TemplateRef, contentChild, output, effect, forwardRef, viewChild, untracked, contentChildren, viewChildren, numberAttribute, afterNextRender, DestroyRef } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -18009,6 +18009,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'jv-button-group', standalone: true, template: `<div class="jv-button-group" role="group"><ng-content></ng-content></div>`, styles: [".jv-button-group{display:inline-flex;flex-wrap:wrap;gap:var(--jv-spacing-sm);align-items:center}\n"] }]
         }] });
 
+let tooltipSequence = 0;
+class JvTooltipDirective {
+    document = inject(DOCUMENT);
+    renderer = inject(Renderer2);
+    hostRef = inject((ElementRef));
+    tooltipElement = null;
+    showTimeout = null;
+    hideTimeout = null;
+    tooltipId = `jv-tooltip-${++tooltipSequence}`;
+    originalDescribedBy = null;
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'jvTooltip' });
+    position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'jvTooltipPosition' });
+    show() {
+        if (!this.text().trim()) {
+            return;
+        }
+        this.clearHideTimeout();
+        if (this.tooltipElement) {
+            return;
+        }
+        this.showTimeout = setTimeout(() => {
+            this.renderTooltip();
+            this.positionTooltip();
+            this.attachTooltipDescription();
+        }, 120);
+    }
+    hide() {
+        this.clearShowTimeout();
+        if (!this.tooltipElement) {
+            return;
+        }
+        this.hideTimeout = setTimeout(() => this.destroyTooltip(), 80);
+    }
+    handleDocumentKeydown(event) {
+        if (event.key === 'Escape') {
+            this.destroyTooltip();
+        }
+    }
+    handleViewportChange() {
+        if (this.tooltipElement) {
+            this.positionTooltip();
+        }
+    }
+    ngOnDestroy() {
+        this.clearShowTimeout();
+        this.clearHideTimeout();
+        this.destroyTooltip();
+    }
+    renderTooltip() {
+        if (this.tooltipElement) {
+            return;
+        }
+        const tooltip = this.renderer.createElement('div');
+        tooltip.textContent = this.text();
+        this.renderer.setAttribute(tooltip, 'id', this.tooltipId);
+        this.renderer.setAttribute(tooltip, 'role', 'tooltip');
+        this.renderer.setStyle(tooltip, 'position', 'fixed');
+        this.renderer.setStyle(tooltip, 'z-index', '1400');
+        this.renderer.setStyle(tooltip, 'max-width', '18rem');
+        this.renderer.setStyle(tooltip, 'padding', '0.5rem 0.75rem');
+        this.renderer.setStyle(tooltip, 'border-radius', '0.5rem');
+        this.renderer.setStyle(tooltip, 'background', 'rgb(15 23 42)');
+        this.renderer.setStyle(tooltip, 'color', '#ffffff');
+        this.renderer.setStyle(tooltip, 'font-size', '0.8125rem');
+        this.renderer.setStyle(tooltip, 'line-height', '1.4');
+        this.renderer.setStyle(tooltip, 'box-shadow', 'var(--jv-shadow-md)');
+        this.renderer.setStyle(tooltip, 'pointer-events', 'none');
+        this.renderer.setStyle(tooltip, 'opacity', '0');
+        this.renderer.setStyle(tooltip, 'transition', 'opacity 120ms ease');
+        this.renderer.appendChild(this.document.body, tooltip);
+        this.tooltipElement = tooltip;
+        requestAnimationFrame(() => {
+            if (this.tooltipElement) {
+                this.renderer.setStyle(this.tooltipElement, 'opacity', '1');
+            }
+        });
+    }
+    positionTooltip() {
+        const tooltip = this.tooltipElement;
+        if (!tooltip) {
+            return;
+        }
+        const hostRect = this.anchorElement().getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const gap = 8;
+        let top = hostRect.top - tooltipRect.height - gap;
+        let left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
+        switch (this.position()) {
+            case 'right':
+                top = hostRect.top + hostRect.height / 2 - tooltipRect.height / 2;
+                left = hostRect.right + gap;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + gap;
+                left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'left':
+                top = hostRect.top + hostRect.height / 2 - tooltipRect.height / 2;
+                left = hostRect.left - tooltipRect.width - gap;
+                break;
+        }
+        this.renderer.setStyle(tooltip, 'top', `${Math.round(top)}px`);
+        this.renderer.setStyle(tooltip, 'left', `${Math.round(left)}px`);
+    }
+    destroyTooltip() {
+        this.clearHideTimeout();
+        this.clearShowTimeout();
+        if (!this.tooltipElement) {
+            return;
+        }
+        this.restoreTooltipDescription();
+        this.renderer.removeChild(this.document.body, this.tooltipElement);
+        this.tooltipElement = null;
+    }
+    attachTooltipDescription() {
+        const anchor = this.anchorElement();
+        this.originalDescribedBy ??= anchor.getAttribute('aria-describedby');
+        const describedBy = [this.originalDescribedBy, this.tooltipId]
+            .filter((value) => !!value)
+            .join(' ')
+            .trim();
+        this.renderer.setAttribute(anchor, 'aria-describedby', describedBy);
+    }
+    restoreTooltipDescription() {
+        const anchor = this.anchorElement();
+        if (this.originalDescribedBy) {
+            this.renderer.setAttribute(anchor, 'aria-describedby', this.originalDescribedBy);
+        }
+        else {
+            this.renderer.removeAttribute(anchor, 'aria-describedby');
+        }
+        this.originalDescribedBy = null;
+    }
+    anchorElement() {
+        const host = this.hostRef.nativeElement;
+        if (isInteractiveElement(host)) {
+            return host;
+        }
+        return host.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? host;
+    }
+    clearShowTimeout() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: JvTooltipDirective, isStandalone: true, selector: "[jvTooltip]", inputs: { text: { classPropertyName: "text", publicName: "jvTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "jvTooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide()", "blur": "hide()", "document:keydown": "handleDocumentKeydown($event)", "window:scroll": "handleViewportChange()", "window:resize": "handleViewportChange()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvTooltip]',
+                    standalone: true,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTooltipPosition", required: false }] }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focusin']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }], handleDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], handleViewportChange: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+function isInteractiveElement(element) {
+    return ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName) || element.tabIndex >= 0;
+}
+
 class JvIconButtonComponent {
     icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -18021,25 +18208,31 @@ class JvIconButtonComponent {
       class="jv-icon-button"
       [class]="'jv-icon-button--' + variant()"
       [attr.aria-label]="ariaLabel()"
+      [attr.title]="ariaLabel()"
+      [jvTooltip]="ariaLabel()"
       [disabled]="disabled()"
     >
       <jv-icon [name]="icon()" [size]="18" />
+      <span class="icon-label">{{ ariaLabel() }}</span>
     </button>
-  `, isInline: true, styles: [".jv-icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.jv-icon-button:disabled{opacity:.6;cursor:not-allowed}.jv-icon-button--primary{background:var(--jv-color-primary);color:#fff}.jv-icon-button--secondary{background:var(--jv-color-secondary);color:#fff}.jv-icon-button--outline{border-color:var(--jv-color-border);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-icon-button--ghost,.jv-icon-button--link{background:transparent;color:var(--jv-color-foreground)}.jv-icon-button--danger{background:var(--jv-color-danger);color:#fff}.jv-icon-button--success{background:var(--jv-color-success);color:#fff}.jv-icon-button--warning{background:var(--jv-color-warning);color:#111827}.jv-icon-button--outline:hover,.jv-icon-button--ghost:hover,.jv-icon-button--link:hover{background:var(--jv-color-surface-muted)}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+  `, isInline: true, styles: [".jv-icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.icon-label{font-size:0}.jv-icon-button:disabled{opacity:.6;cursor:not-allowed}.jv-icon-button--primary{background:var(--jv-color-primary);color:#fff}.jv-icon-button--secondary{background:var(--jv-color-secondary);color:#fff}.jv-icon-button--outline{border-color:var(--jv-color-border);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-icon-button--ghost,.jv-icon-button--link{background:transparent;color:var(--jv-color-foreground)}.jv-icon-button--danger{background:var(--jv-color-danger);color:#fff}.jv-icon-button--success{background:var(--jv-color-success);color:#fff}.jv-icon-button--warning{background:var(--jv-color-warning);color:#111827}.jv-icon-button--outline:hover,.jv-icon-button--ghost:hover,.jv-icon-button--link:hover{background:var(--jv-color-surface-muted)}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: JvTooltipDirective, selector: "[jvTooltip]", inputs: ["jvTooltip", "jvTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-icon-button', standalone: true, imports: [JvIconComponent], template: `
+            args: [{ selector: 'jv-icon-button', standalone: true, imports: [JvIconComponent, JvTooltipDirective], template: `
     <button
       type="button"
       class="jv-icon-button"
       [class]="'jv-icon-button--' + variant()"
       [attr.aria-label]="ariaLabel()"
+      [attr.title]="ariaLabel()"
+      [jvTooltip]="ariaLabel()"
       [disabled]="disabled()"
     >
       <jv-icon [name]="icon()" [size]="18" />
+      <span class="icon-label">{{ ariaLabel() }}</span>
     </button>
-  `, styles: [".jv-icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.jv-icon-button:disabled{opacity:.6;cursor:not-allowed}.jv-icon-button--primary{background:var(--jv-color-primary);color:#fff}.jv-icon-button--secondary{background:var(--jv-color-secondary);color:#fff}.jv-icon-button--outline{border-color:var(--jv-color-border);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-icon-button--ghost,.jv-icon-button--link{background:transparent;color:var(--jv-color-foreground)}.jv-icon-button--danger{background:var(--jv-color-danger);color:#fff}.jv-icon-button--success{background:var(--jv-color-success);color:#fff}.jv-icon-button--warning{background:var(--jv-color-warning);color:#111827}.jv-icon-button--outline:hover,.jv-icon-button--ghost:hover,.jv-icon-button--link:hover{background:var(--jv-color-surface-muted)}\n"] }]
+  `, styles: [".jv-icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.icon-label{font-size:0}.jv-icon-button:disabled{opacity:.6;cursor:not-allowed}.jv-icon-button--primary{background:var(--jv-color-primary);color:#fff}.jv-icon-button--secondary{background:var(--jv-color-secondary);color:#fff}.jv-icon-button--outline{border-color:var(--jv-color-border);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-icon-button--ghost,.jv-icon-button--link{background:transparent;color:var(--jv-color-foreground)}.jv-icon-button--danger{background:var(--jv-color-danger);color:#fff}.jv-icon-button--success{background:var(--jv-color-success);color:#fff}.jv-icon-button--warning{background:var(--jv-color-warning);color:#111827}.jv-icon-button--outline:hover,.jv-icon-button--ghost:hover,.jv-icon-button--link:hover{background:var(--jv-color-surface-muted)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 const JV_UI_DEFAULT_CONFIG = {
@@ -22969,24 +23162,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs);margin:0;padding:0;list-style:none;color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-breadcrumb li{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-breadcrumb a{color:inherit;text-decoration:none}.jv-breadcrumb a:hover{color:var(--jv-color-foreground);text-decoration:underline}.separator{opacity:.7}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
 
-class JvSidebarComponent {
-    router = inject(Router);
-    expandedSections = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedSections" }] : /* istanbul ignore next */ []));
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
-    brandIcon = input('monitor', ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    mobileOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    currentTheme = input('light', ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
-    themeOptions = input([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
-    topbarActions = input([], ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
-    showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : /* istanbul ignore next */ []));
-    collapseToggle = output();
-    mobileClose = output();
-    themeChange = output();
-    actionClick = output();
+class JvNavigationState {
+    items;
+    router;
+    expandActiveSections;
+    sectionOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "sectionOverrides" }] : /* istanbul ignore next */ []));
+    normalizedItems = computed(() => this.items().map((item) => ({
+        ...item,
+        children: item.children ?? [],
+    })), ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
     activeChildParentIds = computed(() => {
         const url = this.router.url;
         const ids = new Set();
@@ -22999,22 +23183,33 @@ class JvSidebarComponent {
         }
         return ids;
     }, ...(ngDevMode ? [{ debugName: "activeChildParentIds" }] : /* istanbul ignore next */ []));
-    normalizedItems = computed(() => this.items().map((item) => ({
-        ...item,
-        children: item.children ?? [],
-    })), ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
-    isExpanded(id) {
-        return this.expandedSections().has(id) || this.activeChildParentIds().has(id);
+    constructor(items, router, expandActiveSections = true) {
+        this.items = items;
+        this.router = router;
+        this.expandActiveSections = expandActiveSections;
     }
-    toggleSection(id) {
-        this.expandedSections.update((current) => {
-            const next = new Set(current);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
+    isExpanded(id) {
+        return this.sectionOverrides().get(id) ?? (this.expandActiveSections && this.activeChildParentIds().has(id));
+    }
+    toggleSection(id, exclusive = false) {
+        this.sectionOverrides.update((current) => {
+            const next = new Map(current);
+            const shouldExpand = !this.isExpanded(id);
+            if (exclusive) {
+                for (const item of this.normalizedItems()) {
+                    if (item.children.length > 0) {
+                        next.set(item.id, false);
+                    }
+                }
             }
+            next.set(id, shouldExpand);
+            return next;
+        });
+    }
+    closeSection(id) {
+        this.sectionOverrides.update((current) => {
+            const next = new Map(current);
+            next.set(id, false);
             return next;
         });
     }
@@ -23028,6 +23223,38 @@ class JvSidebarComponent {
         const target = document.querySelector(href);
         target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
     }
+}
+
+class JvSidebarComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    brandIcon = input('monitor', ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    mobileOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    currentTheme = input('light', ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
+    themeOptions = input([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    topbarActions = input([], ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
+    showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : /* istanbul ignore next */ []));
+    navigation = new JvNavigationState(this.items, inject(Router));
+    collapseToggle = output();
+    mobileClose = output();
+    themeChange = output();
+    actionClick = output();
+    normalizedItems = this.navigation.normalizedItems;
+    isExpanded(id) {
+        return this.navigation.isExpanded(id);
+    }
+    toggleSection(id) {
+        this.navigation.toggleSection(id);
+    }
+    isHashLink(href) {
+        return this.navigation.isHashLink(href);
+    }
+    navigateTo(href) {
+        this.navigation.navigateTo(href);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
     @if (mobileOpen()) {
@@ -23176,19 +23403,20 @@ class JvSidebarComponent {
 
           <div class="mobile-actions">
             @for (action of topbarActions(); track action.id) {
-              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+              <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
                 <jv-icon [name]="action.icon" [size]="18" />
+                <span>{{ action.label }}</span>
               </button>
             }
           </div>
         </div>
       </div>
     </aside>
-  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary);flex:0 0 auto}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:calc(var(--jv-density-control-height) - .25rem);font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary);flex:0 0 auto}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:calc(var(--jv-density-control-height) - .25rem);font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-width:var(--jv-density-control-height);height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: JvTooltipDirective, selector: "[jvTooltip]", inputs: ["jvTooltip", "jvTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
+            args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink, JvTooltipDirective], template: `
     @if (mobileOpen()) {
       <div class="jv-sidebar-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
     }
@@ -23335,15 +23563,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
           <div class="mobile-actions">
             @for (action of topbarActions(); track action.id) {
-              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+              <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
                 <jv-icon [name]="action.icon" [size]="18" />
+                <span>{{ action.label }}</span>
               </button>
             }
           </div>
         </div>
       </div>
     </aside>
-  `, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary);flex:0 0 auto}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:calc(var(--jv-density-control-height) - .25rem);font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"] }]
+  `, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary);flex:0 0 auto}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:calc(var(--jv-density-control-height) - .25rem);font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-width:var(--jv-density-control-height);height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], collapseToggle: [{ type: i0.Output, args: ["collapseToggle"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 class JvTopbarComponent {
@@ -23397,17 +23626,18 @@ class JvTopbarComponent {
         }
 
         @for (action of visibleActions(); track action.id) {
-          <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id)">
+          <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id)">
             <jv-icon [name]="action.icon" [size]="18" />
+            <span class="action-label">{{ action.label }}</span>
           </button>
         }
       </div>
     </header>
-  `, isInline: true, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:999px}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:center;flex-direction:row;justify-content:flex-start}.jv-topbar-end{display:none}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+  `, isInline: true, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--jv-spacing-xs);min-width:var(--jv-density-control-height);height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border-radius:999px;cursor:pointer}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:center;flex-direction:row;justify-content:flex-start}.jv-topbar-end{display:none}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: JvTooltipDirective, selector: "[jvTooltip]", inputs: ["jvTooltip", "jvTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTopbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-topbar', standalone: true, imports: [JvIconComponent], template: `
+            args: [{ selector: 'jv-topbar', standalone: true, imports: [JvIconComponent, JvTooltipDirective], template: `
     <header class="jv-topbar">
       <div class="jv-topbar-start">
         <button type="button" class="icon-button" (click)="menuClick.emit()" aria-label="Toggle navigation menu">
@@ -23446,24 +23676,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }
 
         @for (action of visibleActions(); track action.id) {
-          <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id)">
+          <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id)">
             <jv-icon [name]="action.icon" [size]="18" />
+            <span class="action-label">{{ action.label }}</span>
           </button>
         }
       </div>
     </header>
-  `, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:999px}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:center;flex-direction:row;justify-content:flex-start}.jv-topbar-end{display:none}}\n"] }]
+  `, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--jv-spacing-xs);min-width:var(--jv-density-control-height);height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border-radius:999px;cursor:pointer}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:center;flex-direction:row;justify-content:flex-start}.jv-topbar-end{display:none}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
-class JvDashboardShellComponent {
+class JvTopbarMenuComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    sidebarSubtitle = input('', ...(ngDevMode ? [{ debugName: "sidebarSubtitle" }] : /* istanbul ignore next */ []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     brandIcon = input('monitor', ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
-    navItems = input([], ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
-    sidebarCollapsed = input(false, ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
-    mobileSidebarOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileSidebarOpen" }] : /* istanbul ignore next */ []));
-    topbarTitle = input('', ...(ngDevMode ? [{ debugName: "topbarTitle" }] : /* istanbul ignore next */ []));
-    topbarSubtitle = input('', ...(ngDevMode ? [{ debugName: "topbarSubtitle" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    mobileOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Topbar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    currentTheme = input('light', ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
+    themeOptions = input([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : /* istanbul ignore next */ []));
+    menuClick = output();
+    mobileClose = output();
+    themeChange = output();
+    actionClick = output();
+    navigation = new JvNavigationState(this.items, inject(Router), false);
+    normalizedItems = this.navigation.normalizedItems;
+    isExpanded(id) {
+        return this.navigation.isExpanded(id);
+    }
+    toggleSection(id) {
+        this.navigation.toggleSection(id, true);
+    }
+    isHashLink(href) {
+        return this.navigation.isHashLink(href);
+    }
+    navigateTo(href, parentId) {
+        this.navigation.navigateTo(href);
+        if (parentId) {
+            this.navigation.closeSection(parentId);
+        }
+        this.mobileClose.emit();
+    }
+    closeSection(id) {
+        this.navigation.closeSection(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTopbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvTopbarMenuComponent, isStandalone: true, selector: "jv-topbar-menu", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
+    @if (mobileOpen()) {
+      <div class="jv-topbar-menu-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
+    }
+
+    <header class="jv-topbar-menu" [class.is-mobile-open]="mobileOpen()">
+      <div class="jv-topbar-menu-brand">
+        <div class="brand-mark">
+          <jv-icon [name]="brandIcon()" [size]="18" />
+        </div>
+        <div class="brand-copy">
+          <strong>{{ title() }}</strong>
+          @if (subtitle()) {
+            <span>{{ subtitle() }}</span>
+          }
+        </div>
+      </div>
+
+      <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="menuClick.emit()">
+        <jv-icon name="menu" [size]="18" />
+      </button>
+
+      <nav class="jv-topbar-menu-nav" [attr.aria-label]="ariaLabel()">
+        <ul class="jv-topbar-menu-list">
+          @for (item of normalizedItems(); track item.id) {
+            <li class="jv-topbar-menu-item">
+              @if (item.children.length > 0) {
+                <button
+                  type="button"
+                  class="jv-topbar-menu-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                  [attr.aria-controls]="'jv-topbar-menu-section-' + item.id"
+                  (click)="toggleSection(item.id)"
+                >
+                  @if (item.icon) {
+                    <jv-icon [name]="item.icon" [size]="17" />
+                  }
+                  <span>{{ item.label }}</span>
+                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="15" />
+                </button>
+
+                @if (isExpanded(item.id)) {
+                  <div class="jv-topbar-menu-dropdown" [id]="'jv-topbar-menu-section-' + item.id">
+                    @for (child of item.children; track child.id) {
+                      @if (isHashLink(child.href)) {
+                        <button type="button" class="jv-topbar-menu-child" [class.is-active]="child.active" (click)="navigateTo(child.href, item.id)">
+                          {{ child.label }}
+                        </button>
+                      } @else {
+                        <a class="jv-topbar-menu-child" [class.is-active]="child.active" [routerLink]="child.href" [attr.aria-current]="child.active ? 'page' : null" (click)="closeSection(item.id); mobileClose.emit()">
+                          {{ child.label }}
+                        </a>
+                      }
+                    }
+                  </div>
+                }
+              } @else {
+                @if (isHashLink(item.href)) {
+                  <button type="button" class="jv-topbar-menu-link" [class.is-active]="item.active" (click)="navigateTo(item.href)">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="17" />
+                    }
+                    <span>{{ item.label }}</span>
+                  </button>
+                } @else {
+                  <a class="jv-topbar-menu-link" [class.is-active]="item.active" [routerLink]="item.href" [attr.aria-current]="item.active ? 'page' : null" (click)="mobileClose.emit()">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="17" />
+                    }
+                    <span>{{ item.label }}</span>
+                  </a>
+                }
+              }
+            </li>
+          }
+        </ul>
+      </nav>
+
+      <div class="jv-topbar-menu-actions">
+        @if (showThemeSelector()) {
+          <div class="theme-group" aria-label="Theme selector">
+            @for (option of themeOptions(); track option.value) {
+              <button type="button" class="theme-pill" [class.is-active]="currentTheme() === option.value" (click)="themeChange.emit(option.value)">
+                @if (option.icon) {
+                  <jv-icon [name]="option.icon" [size]="16" />
+                }
+                <span>{{ option.label }}</span>
+              </button>
+            }
+          </div>
+        }
+
+        @for (action of actions(); track action.id) {
+          <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id)">
+            <jv-icon [name]="action.icon" [size]="18" />
+            <span class="action-label">{{ action.label }}</span>
+          </button>
+        }
+      </div>
+    </header>
+  `, isInline: true, styles: [":host{display:block;position:relative;z-index:20}.jv-topbar-menu,.jv-topbar-menu-brand,.jv-topbar-menu-list,.jv-topbar-menu-actions,.theme-group{display:flex;align-items:center}.jv-topbar-menu{gap:var(--jv-spacing-lg);min-height:4.5rem;padding:var(--jv-spacing-md) var(--jv-spacing-xl);min-width:0;border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-menu-brand{gap:var(--jv-spacing-sm);flex:0 0 auto}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.8125rem}.jv-topbar-menu-nav{min-width:0;flex:1 1 0}.jv-topbar-menu-list{gap:var(--jv-spacing-xs);margin:0;padding:0;list-style:none;min-width:0;flex-wrap:wrap}.jv-topbar-menu-item{position:relative;min-width:0;flex:0 1 auto}.jv-topbar-menu-link,.jv-topbar-menu-child,.icon-button,.theme-pill,.mobile-menu-button{border:1px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);cursor:pointer;font:inherit;text-decoration:none}.jv-topbar-menu-link{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);min-width:0;width:100%;max-width:15rem;padding:0 var(--jv-spacing-sm);border-radius:var(--jv-radius-md);white-space:nowrap}.jv-topbar-menu-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jv-topbar-menu-link:hover,.jv-topbar-menu-child:hover,.jv-topbar-menu-link.is-active,.jv-topbar-menu-child.is-active{background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-topbar-menu-dropdown{position:absolute;top:calc(100% + var(--jv-spacing-xs));left:0;display:grid;min-width:14rem;max-height:min(70vh,32rem);gap:var(--jv-spacing-xs);padding:var(--jv-spacing-sm);overflow-y:auto;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);z-index:30}.jv-topbar-menu-child{display:block;padding:var(--jv-spacing-sm) var(--jv-spacing-md);border-radius:var(--jv-radius-sm);text-align:left;white-space:nowrap}.jv-topbar-menu-actions{justify-content:flex-end;gap:var(--jv-spacing-sm);flex:0 0 auto}.theme-group{gap:var(--jv-spacing-xs)}.icon-button,.mobile-menu-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--jv-spacing-xs);min-width:var(--jv-density-control-height);height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border-color:var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{cursor:pointer}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border-color:var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);font-size:.8125rem}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.mobile-menu-button,.jv-topbar-menu-backdrop{display:none}@media(max-width:1100px){.jv-topbar-menu{gap:var(--jv-spacing-md);padding-inline:var(--jv-spacing-lg)}.jv-topbar-menu-link{max-width:12rem;padding-inline:var(--jv-spacing-xs)}}@media(max-width:1400px){.jv-topbar-menu-actions .theme-group{display:none}}@media(max-width:900px){.jv-topbar-menu-backdrop{display:block;position:fixed;inset:0;z-index:19;background:#0006}.jv-topbar-menu{position:relative;justify-content:space-between;min-height:4rem;padding:var(--jv-spacing-sm) var(--jv-spacing-md)}.mobile-menu-button{display:inline-grid;order:3}.jv-topbar-menu-nav{position:fixed;top:4rem;right:0;bottom:0;z-index:21;width:min(22rem,88vw);padding:var(--jv-spacing-lg);overflow-y:auto;border-left:1px solid var(--jv-color-border);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);transform:translate(100%);visibility:hidden;transition:transform .24s ease,visibility .24s}.jv-topbar-menu.is-mobile-open .jv-topbar-menu-nav{transform:translate(0);visibility:visible}.jv-topbar-menu-list{display:grid;align-items:stretch}.jv-topbar-menu-link{width:100%;justify-content:flex-start;padding-inline:var(--jv-spacing-md)}.jv-topbar-menu-dropdown{position:static;min-width:0;margin-left:var(--jv-spacing-md);box-shadow:none}.jv-topbar-menu-actions{margin-left:auto}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: JvTooltipDirective, selector: "[jvTooltip]", inputs: ["jvTooltip", "jvTooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTopbarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-topbar-menu', standalone: true, imports: [JvIconComponent, RouterLink, JvTooltipDirective], template: `
+    @if (mobileOpen()) {
+      <div class="jv-topbar-menu-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
+    }
+
+    <header class="jv-topbar-menu" [class.is-mobile-open]="mobileOpen()">
+      <div class="jv-topbar-menu-brand">
+        <div class="brand-mark">
+          <jv-icon [name]="brandIcon()" [size]="18" />
+        </div>
+        <div class="brand-copy">
+          <strong>{{ title() }}</strong>
+          @if (subtitle()) {
+            <span>{{ subtitle() }}</span>
+          }
+        </div>
+      </div>
+
+      <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="menuClick.emit()">
+        <jv-icon name="menu" [size]="18" />
+      </button>
+
+      <nav class="jv-topbar-menu-nav" [attr.aria-label]="ariaLabel()">
+        <ul class="jv-topbar-menu-list">
+          @for (item of normalizedItems(); track item.id) {
+            <li class="jv-topbar-menu-item">
+              @if (item.children.length > 0) {
+                <button
+                  type="button"
+                  class="jv-topbar-menu-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                  [attr.aria-controls]="'jv-topbar-menu-section-' + item.id"
+                  (click)="toggleSection(item.id)"
+                >
+                  @if (item.icon) {
+                    <jv-icon [name]="item.icon" [size]="17" />
+                  }
+                  <span>{{ item.label }}</span>
+                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="15" />
+                </button>
+
+                @if (isExpanded(item.id)) {
+                  <div class="jv-topbar-menu-dropdown" [id]="'jv-topbar-menu-section-' + item.id">
+                    @for (child of item.children; track child.id) {
+                      @if (isHashLink(child.href)) {
+                        <button type="button" class="jv-topbar-menu-child" [class.is-active]="child.active" (click)="navigateTo(child.href, item.id)">
+                          {{ child.label }}
+                        </button>
+                      } @else {
+                        <a class="jv-topbar-menu-child" [class.is-active]="child.active" [routerLink]="child.href" [attr.aria-current]="child.active ? 'page' : null" (click)="closeSection(item.id); mobileClose.emit()">
+                          {{ child.label }}
+                        </a>
+                      }
+                    }
+                  </div>
+                }
+              } @else {
+                @if (isHashLink(item.href)) {
+                  <button type="button" class="jv-topbar-menu-link" [class.is-active]="item.active" (click)="navigateTo(item.href)">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="17" />
+                    }
+                    <span>{{ item.label }}</span>
+                  </button>
+                } @else {
+                  <a class="jv-topbar-menu-link" [class.is-active]="item.active" [routerLink]="item.href" [attr.aria-current]="item.active ? 'page' : null" (click)="mobileClose.emit()">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="17" />
+                    }
+                    <span>{{ item.label }}</span>
+                  </a>
+                }
+              }
+            </li>
+          }
+        </ul>
+      </nav>
+
+      <div class="jv-topbar-menu-actions">
+        @if (showThemeSelector()) {
+          <div class="theme-group" aria-label="Theme selector">
+            @for (option of themeOptions(); track option.value) {
+              <button type="button" class="theme-pill" [class.is-active]="currentTheme() === option.value" (click)="themeChange.emit(option.value)">
+                @if (option.icon) {
+                  <jv-icon [name]="option.icon" [size]="16" />
+                }
+                <span>{{ option.label }}</span>
+              </button>
+            }
+          </div>
+        }
+
+        @for (action of actions(); track action.id) {
+          <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id)">
+            <jv-icon [name]="action.icon" [size]="18" />
+            <span class="action-label">{{ action.label }}</span>
+          </button>
+        }
+      </div>
+    </header>
+  `, styles: [":host{display:block;position:relative;z-index:20}.jv-topbar-menu,.jv-topbar-menu-brand,.jv-topbar-menu-list,.jv-topbar-menu-actions,.theme-group{display:flex;align-items:center}.jv-topbar-menu{gap:var(--jv-spacing-lg);min-height:4.5rem;padding:var(--jv-spacing-md) var(--jv-spacing-xl);min-width:0;border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-menu-brand{gap:var(--jv-spacing-sm);flex:0 0 auto}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.8125rem}.jv-topbar-menu-nav{min-width:0;flex:1 1 0}.jv-topbar-menu-list{gap:var(--jv-spacing-xs);margin:0;padding:0;list-style:none;min-width:0;flex-wrap:wrap}.jv-topbar-menu-item{position:relative;min-width:0;flex:0 1 auto}.jv-topbar-menu-link,.jv-topbar-menu-child,.icon-button,.theme-pill,.mobile-menu-button{border:1px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);cursor:pointer;font:inherit;text-decoration:none}.jv-topbar-menu-link{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);min-width:0;width:100%;max-width:15rem;padding:0 var(--jv-spacing-sm);border-radius:var(--jv-radius-md);white-space:nowrap}.jv-topbar-menu-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jv-topbar-menu-link:hover,.jv-topbar-menu-child:hover,.jv-topbar-menu-link.is-active,.jv-topbar-menu-child.is-active{background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-topbar-menu-dropdown{position:absolute;top:calc(100% + var(--jv-spacing-xs));left:0;display:grid;min-width:14rem;max-height:min(70vh,32rem);gap:var(--jv-spacing-xs);padding:var(--jv-spacing-sm);overflow-y:auto;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);z-index:30}.jv-topbar-menu-child{display:block;padding:var(--jv-spacing-sm) var(--jv-spacing-md);border-radius:var(--jv-radius-sm);text-align:left;white-space:nowrap}.jv-topbar-menu-actions{justify-content:flex-end;gap:var(--jv-spacing-sm);flex:0 0 auto}.theme-group{gap:var(--jv-spacing-xs)}.icon-button,.mobile-menu-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--jv-spacing-xs);min-width:var(--jv-density-control-height);height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border-color:var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{cursor:pointer}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border-color:var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);font-size:.8125rem}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.mobile-menu-button,.jv-topbar-menu-backdrop{display:none}@media(max-width:1100px){.jv-topbar-menu{gap:var(--jv-spacing-md);padding-inline:var(--jv-spacing-lg)}.jv-topbar-menu-link{max-width:12rem;padding-inline:var(--jv-spacing-xs)}}@media(max-width:1400px){.jv-topbar-menu-actions .theme-group{display:none}}@media(max-width:900px){.jv-topbar-menu-backdrop{display:block;position:fixed;inset:0;z-index:19;background:#0006}.jv-topbar-menu{position:relative;justify-content:space-between;min-height:4rem;padding:var(--jv-spacing-sm) var(--jv-spacing-md)}.mobile-menu-button{display:inline-grid;order:3}.jv-topbar-menu-nav{position:fixed;top:4rem;right:0;bottom:0;z-index:21;width:min(22rem,88vw);padding:var(--jv-spacing-lg);overflow-y:auto;border-left:1px solid var(--jv-color-border);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);transform:translate(100%);visibility:hidden;transition:transform .24s ease,visibility .24s}.jv-topbar-menu.is-mobile-open .jv-topbar-menu-nav{transform:translate(0);visibility:visible}.jv-topbar-menu-list{display:grid;align-items:stretch}.jv-topbar-menu-link{width:100%;justify-content:flex-start;padding-inline:var(--jv-spacing-md)}.jv-topbar-menu-dropdown{position:static;min-width:0;margin-left:var(--jv-spacing-md);box-shadow:none}.jv-topbar-menu-actions{margin-left:auto}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+class JvDashboardShellComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    navigationMode = input('sidebar', ...(ngDevMode ? [{ debugName: "navigationMode" }] : /* istanbul ignore next */ []));
+    sidebarSubtitle = input('', ...(ngDevMode ? [{ debugName: "sidebarSubtitle" }] : /* istanbul ignore next */ []));
+    brandIcon = input('monitor', ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
+    navItems = input([], ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+    sidebarCollapsed = input(false, ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
+    mobileSidebarOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileSidebarOpen" }] : /* istanbul ignore next */ []));
+    topbarTitle = input('', ...(ngDevMode ? [{ debugName: "topbarTitle" }] : /* istanbul ignore next */ []));
+    topbarSubtitle = input('', ...(ngDevMode ? [{ debugName: "topbarSubtitle" }] : /* istanbul ignore next */ []));
     currentTheme = input('light', ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
     themeOptions = input([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
     topbarActions = input([], ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
@@ -23474,90 +23952,130 @@ class JvDashboardShellComponent {
     themeChange = output();
     topbarActionClick = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
-    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
-      <jv-sidebar
-        [title]="title()"
-        [subtitle]="sidebarSubtitle()"
-        [brandIcon]="brandIcon()"
-        [items]="navItems()"
-        [collapsed]="sidebarCollapsed()"
-        [mobileOpen]="mobileSidebarOpen()"
-        [currentTheme]="currentTheme()"
-        [themeOptions]="themeOptions()"
-        [topbarActions]="topbarActions()"
-        [showThemeSelector]="showThemeSelector()"
-        (collapseToggle)="sidebarCollapseToggle.emit()"
-        (mobileClose)="mobileClose.emit()"
-        (themeChange)="themeChange.emit($event)"
-        (actionClick)="topbarActionClick.emit($event)"
-      />
-
-      <div class="jv-dashboard-main">
-        <jv-topbar
-          [title]="topbarTitle()"
-          [subtitle]="topbarSubtitle()"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, navigationMode: { classPropertyName: "navigationMode", publicName: "navigationMode", isSignal: true, isRequired: false, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
+    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()" [class.is-topbar-navigation]="navigationMode() === 'topbar'">
+      @if (navigationMode() === 'sidebar') {
+        <jv-sidebar
+          [title]="title()"
+          [subtitle]="sidebarSubtitle()"
+          [brandIcon]="brandIcon()"
+          [items]="navItems()"
+          [collapsed]="sidebarCollapsed()"
+          [mobileOpen]="mobileSidebarOpen()"
           [currentTheme]="currentTheme()"
           [themeOptions]="themeOptions()"
-          [actions]="topbarActions()"
+          [topbarActions]="topbarActions()"
           [showThemeSelector]="showThemeSelector()"
-          (menuClick)="menuClick.emit()"
+          (collapseToggle)="sidebarCollapseToggle.emit()"
+          (mobileClose)="mobileClose.emit()"
           (themeChange)="themeChange.emit($event)"
           (actionClick)="topbarActionClick.emit($event)"
-        >
-          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
-        </jv-topbar>
+        />
+      }
+
+      <div class="jv-dashboard-main">
+        @if (navigationMode() === 'topbar') {
+          <jv-topbar-menu
+            [title]="title()"
+            [subtitle]="sidebarSubtitle()"
+            [brandIcon]="brandIcon()"
+            [items]="navItems()"
+            [mobileOpen]="mobileSidebarOpen()"
+            [currentTheme]="currentTheme()"
+            [themeOptions]="themeOptions()"
+            [actions]="topbarActions()"
+            [showThemeSelector]="showThemeSelector()"
+            (menuClick)="menuClick.emit()"
+            (mobileClose)="mobileClose.emit()"
+            (themeChange)="themeChange.emit($event)"
+            (actionClick)="topbarActionClick.emit($event)"
+          />
+        } @else {
+          <jv-topbar
+            [title]="topbarTitle()"
+            [subtitle]="topbarSubtitle()"
+            [currentTheme]="currentTheme()"
+            [themeOptions]="themeOptions()"
+            [actions]="topbarActions()"
+            [showThemeSelector]="showThemeSelector()"
+            (menuClick)="menuClick.emit()"
+            (themeChange)="themeChange.emit($event)"
+            (actionClick)="topbarActionClick.emit($event)"
+          >
+            <ng-content select="[topbar-actions]" topbar-actions></ng-content>
+          </jv-topbar>
+        }
 
         <main class="jv-dashboard-content">
           <ng-content></ng-content>
         </main>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel", "currentTheme", "themeOptions", "topbarActions", "showThemeSelector"], outputs: ["collapseToggle", "mobileClose", "themeChange", "actionClick"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-shell.is-topbar-navigation{grid-template-columns:1fr}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel", "currentTheme", "themeOptions", "topbarActions", "showThemeSelector"], outputs: ["collapseToggle", "mobileClose", "themeChange", "actionClick"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }, { kind: "component", type: JvTopbarMenuComponent, selector: "jv-topbar-menu", inputs: ["title", "subtitle", "brandIcon", "items", "mobileOpen", "ariaLabel", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "mobileClose", "themeChange", "actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-dashboard-shell', standalone: true, imports: [JvSidebarComponent, JvTopbarComponent], template: `
-    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
-      <jv-sidebar
-        [title]="title()"
-        [subtitle]="sidebarSubtitle()"
-        [brandIcon]="brandIcon()"
-        [items]="navItems()"
-        [collapsed]="sidebarCollapsed()"
-        [mobileOpen]="mobileSidebarOpen()"
-        [currentTheme]="currentTheme()"
-        [themeOptions]="themeOptions()"
-        [topbarActions]="topbarActions()"
-        [showThemeSelector]="showThemeSelector()"
-        (collapseToggle)="sidebarCollapseToggle.emit()"
-        (mobileClose)="mobileClose.emit()"
-        (themeChange)="themeChange.emit($event)"
-        (actionClick)="topbarActionClick.emit($event)"
-      />
-
-      <div class="jv-dashboard-main">
-        <jv-topbar
-          [title]="topbarTitle()"
-          [subtitle]="topbarSubtitle()"
+            args: [{ selector: 'jv-dashboard-shell', standalone: true, imports: [JvSidebarComponent, JvTopbarComponent, JvTopbarMenuComponent], template: `
+    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()" [class.is-topbar-navigation]="navigationMode() === 'topbar'">
+      @if (navigationMode() === 'sidebar') {
+        <jv-sidebar
+          [title]="title()"
+          [subtitle]="sidebarSubtitle()"
+          [brandIcon]="brandIcon()"
+          [items]="navItems()"
+          [collapsed]="sidebarCollapsed()"
+          [mobileOpen]="mobileSidebarOpen()"
           [currentTheme]="currentTheme()"
           [themeOptions]="themeOptions()"
-          [actions]="topbarActions()"
+          [topbarActions]="topbarActions()"
           [showThemeSelector]="showThemeSelector()"
-          (menuClick)="menuClick.emit()"
+          (collapseToggle)="sidebarCollapseToggle.emit()"
+          (mobileClose)="mobileClose.emit()"
           (themeChange)="themeChange.emit($event)"
           (actionClick)="topbarActionClick.emit($event)"
-        >
-          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
-        </jv-topbar>
+        />
+      }
+
+      <div class="jv-dashboard-main">
+        @if (navigationMode() === 'topbar') {
+          <jv-topbar-menu
+            [title]="title()"
+            [subtitle]="sidebarSubtitle()"
+            [brandIcon]="brandIcon()"
+            [items]="navItems()"
+            [mobileOpen]="mobileSidebarOpen()"
+            [currentTheme]="currentTheme()"
+            [themeOptions]="themeOptions()"
+            [actions]="topbarActions()"
+            [showThemeSelector]="showThemeSelector()"
+            (menuClick)="menuClick.emit()"
+            (mobileClose)="mobileClose.emit()"
+            (themeChange)="themeChange.emit($event)"
+            (actionClick)="topbarActionClick.emit($event)"
+          />
+        } @else {
+          <jv-topbar
+            [title]="topbarTitle()"
+            [subtitle]="topbarSubtitle()"
+            [currentTheme]="currentTheme()"
+            [themeOptions]="themeOptions()"
+            [actions]="topbarActions()"
+            [showThemeSelector]="showThemeSelector()"
+            (menuClick)="menuClick.emit()"
+            (themeChange)="themeChange.emit($event)"
+            (actionClick)="topbarActionClick.emit($event)"
+          >
+            <ng-content select="[topbar-actions]" topbar-actions></ng-content>
+          </jv-topbar>
+        }
 
         <main class="jv-dashboard-content">
           <ng-content></ng-content>
         </main>
       </div>
     </div>
-  `, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
+  `, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-shell.is-topbar-navigation{grid-template-columns:1fr}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], navigationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationMode", required: false }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
 
 class JvPageComponent {
     eyebrow = input('', ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
@@ -24076,209 +24594,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
               [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
               [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
-              [id]="panelId(activeId)"
-              role="tabpanel"
-              [attr.aria-labelledby]="tabButtonId(activeId)"
-              tabindex="0"
-            >
-              <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
-            </div>
-          }
-        }
-      </div>
-    </div>
-  `, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}.jv-tab-panel--hidden{display:none}.jv-tab-panel--fade{transition:opacity .18s ease}.jv-tab-panel--hidden.jv-tab-panel--fade{display:block;opacity:0;pointer-events:none}.jv-tab-panel--slide-left,.jv-tab-panel--slide-right{transition:opacity .18s ease,transform .18s ease}.jv-tab-panel--hidden.jv-tab-panel--slide-left{display:block;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--hidden.jv-tab-panel--slide-right{display:block;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--fade{position:absolute;opacity:0;pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-left{position:absolute;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-right{position:absolute;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--entering{animation:jv-tab-enter .18s ease forwards}.jv-tab-panel--entering.jv-tab-panel--slide-left{animation-name:jv-tab-slide-from-right}.jv-tab-panel--entering.jv-tab-panel--slide-right{animation-name:jv-tab-slide-from-left}@keyframes jv-tab-enter{0%{opacity:0}to{opacity:1}}@keyframes jv-tab-slide-from-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes jv-tab-slide-from-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.jv-tab-panel--fade,.jv-tab-panel--slide-left,.jv-tab-panel--slide-right,.jv-tab-panel--entering{transition:none;animation:none}.jv-tab-panel--hidden.jv-tab-panel--fade,.jv-tab-panel--hidden.jv-tab-panel--slide-left,.jv-tab-panel--hidden.jv-tab-panel--slide-right{opacity:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panelTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => JvTabPanelDirective), { isSignal: true }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], handleWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-let tooltipSequence = 0;
-class JvTooltipDirective {
-    document = inject(DOCUMENT);
-    renderer = inject(Renderer2);
-    hostRef = inject((ElementRef));
-    tooltipElement = null;
-    showTimeout = null;
-    hideTimeout = null;
-    tooltipId = `jv-tooltip-${++tooltipSequence}`;
-    originalDescribedBy = null;
-    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'jvTooltip' });
-    position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'jvTooltipPosition' });
-    show() {
-        if (!this.text().trim()) {
-            return;
-        }
-        this.clearHideTimeout();
-        if (this.tooltipElement) {
-            return;
-        }
-        this.showTimeout = setTimeout(() => {
-            this.renderTooltip();
-            this.positionTooltip();
-            this.attachTooltipDescription();
-        }, 120);
-    }
-    hide() {
-        this.clearShowTimeout();
-        if (!this.tooltipElement) {
-            return;
-        }
-        this.hideTimeout = setTimeout(() => this.destroyTooltip(), 80);
-    }
-    handleDocumentKeydown(event) {
-        if (event.key === 'Escape') {
-            this.destroyTooltip();
-        }
-    }
-    handleViewportChange() {
-        if (this.tooltipElement) {
-            this.positionTooltip();
-        }
-    }
-    ngOnDestroy() {
-        this.clearShowTimeout();
-        this.clearHideTimeout();
-        this.destroyTooltip();
-    }
-    renderTooltip() {
-        if (this.tooltipElement) {
-            return;
-        }
-        const tooltip = this.renderer.createElement('div');
-        tooltip.textContent = this.text();
-        this.renderer.setAttribute(tooltip, 'id', this.tooltipId);
-        this.renderer.setAttribute(tooltip, 'role', 'tooltip');
-        this.renderer.setStyle(tooltip, 'position', 'fixed');
-        this.renderer.setStyle(tooltip, 'z-index', '1400');
-        this.renderer.setStyle(tooltip, 'max-width', '18rem');
-        this.renderer.setStyle(tooltip, 'padding', '0.5rem 0.75rem');
-        this.renderer.setStyle(tooltip, 'border-radius', '0.5rem');
-        this.renderer.setStyle(tooltip, 'background', 'rgb(15 23 42)');
-        this.renderer.setStyle(tooltip, 'color', '#ffffff');
-        this.renderer.setStyle(tooltip, 'font-size', '0.8125rem');
-        this.renderer.setStyle(tooltip, 'line-height', '1.4');
-        this.renderer.setStyle(tooltip, 'box-shadow', 'var(--jv-shadow-md)');
-        this.renderer.setStyle(tooltip, 'pointer-events', 'none');
-        this.renderer.setStyle(tooltip, 'opacity', '0');
-        this.renderer.setStyle(tooltip, 'transition', 'opacity 120ms ease');
-        this.renderer.appendChild(this.document.body, tooltip);
-        this.tooltipElement = tooltip;
-        requestAnimationFrame(() => {
-            if (this.tooltipElement) {
-                this.renderer.setStyle(this.tooltipElement, 'opacity', '1');
-            }
-        });
-    }
-    positionTooltip() {
-        const tooltip = this.tooltipElement;
-        if (!tooltip) {
-            return;
-        }
-        const hostRect = this.anchorElement().getBoundingClientRect();
-        const tooltipRect = tooltip.getBoundingClientRect();
-        const gap = 8;
-        let top = hostRect.top - tooltipRect.height - gap;
-        let left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-        switch (this.position()) {
-            case 'right':
-                top = hostRect.top + hostRect.height / 2 - tooltipRect.height / 2;
-                left = hostRect.right + gap;
-                break;
-            case 'bottom':
-                top = hostRect.bottom + gap;
-                left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-                break;
-            case 'left':
-                top = hostRect.top + hostRect.height / 2 - tooltipRect.height / 2;
-                left = hostRect.left - tooltipRect.width - gap;
-                break;
-        }
-        this.renderer.setStyle(tooltip, 'top', `${Math.round(top)}px`);
-        this.renderer.setStyle(tooltip, 'left', `${Math.round(left)}px`);
-    }
-    destroyTooltip() {
-        this.clearHideTimeout();
-        this.clearShowTimeout();
-        if (!this.tooltipElement) {
-            return;
-        }
-        this.restoreTooltipDescription();
-        this.renderer.removeChild(this.document.body, this.tooltipElement);
-        this.tooltipElement = null;
-    }
-    attachTooltipDescription() {
-        const anchor = this.anchorElement();
-        this.originalDescribedBy ??= anchor.getAttribute('aria-describedby');
-        const describedBy = [this.originalDescribedBy, this.tooltipId]
-            .filter((value) => !!value)
-            .join(' ')
-            .trim();
-        this.renderer.setAttribute(anchor, 'aria-describedby', describedBy);
-    }
-    restoreTooltipDescription() {
-        const anchor = this.anchorElement();
-        if (this.originalDescribedBy) {
-            this.renderer.setAttribute(anchor, 'aria-describedby', this.originalDescribedBy);
-        }
-        else {
-            this.renderer.removeAttribute(anchor, 'aria-describedby');
-        }
-        this.originalDescribedBy = null;
-    }
-    anchorElement() {
-        const host = this.hostRef.nativeElement;
-        if (isInteractiveElement(host)) {
-            return host;
-        }
-        return host.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? host;
-    }
-    clearShowTimeout() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = null;
-        }
-    }
-    clearHideTimeout() {
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
+              [id]="panelId(activeId)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(activeId)"
+              tabindex="0"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
+            </div>
+          }
         }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: JvTooltipDirective, isStandalone: true, selector: "[jvTooltip]", inputs: { text: { classPropertyName: "text", publicName: "jvTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "jvTooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide()", "blur": "hide()", "document:keydown": "handleDocumentKeydown($event)", "window:scroll": "handleViewportChange()", "window:resize": "handleViewportChange()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[jvTooltip]',
-                    standalone: true,
-                }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTooltipPosition", required: false }] }], show: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }, {
-                type: HostListener,
-                args: ['focusin']
-            }], hide: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }, {
-                type: HostListener,
-                args: ['blur']
-            }], handleDocumentKeydown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }], handleViewportChange: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
+      </div>
+    </div>
+  `, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}.jv-tab-panel--hidden{display:none}.jv-tab-panel--fade{transition:opacity .18s ease}.jv-tab-panel--hidden.jv-tab-panel--fade{display:block;opacity:0;pointer-events:none}.jv-tab-panel--slide-left,.jv-tab-panel--slide-right{transition:opacity .18s ease,transform .18s ease}.jv-tab-panel--hidden.jv-tab-panel--slide-left{display:block;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--hidden.jv-tab-panel--slide-right{display:block;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--fade{position:absolute;opacity:0;pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-left{position:absolute;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-right{position:absolute;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--entering{animation:jv-tab-enter .18s ease forwards}.jv-tab-panel--entering.jv-tab-panel--slide-left{animation-name:jv-tab-slide-from-right}.jv-tab-panel--entering.jv-tab-panel--slide-right{animation-name:jv-tab-slide-from-left}@keyframes jv-tab-enter{0%{opacity:0}to{opacity:1}}@keyframes jv-tab-slide-from-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes jv-tab-slide-from-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.jv-tab-panel--fade,.jv-tab-panel--slide-left,.jv-tab-panel--slide-right,.jv-tab-panel--entering{transition:none;animation:none}.jv-tab-panel--hidden.jv-tab-panel--fade,.jv-tab-panel--hidden.jv-tab-panel--slide-left,.jv-tab-panel--hidden.jv-tab-panel--slide-right{opacity:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => JvTabPanelDirective), { isSignal: true }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], handleWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
-function isInteractiveElement(element) {
-    return ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName) || element.tabIndex >= 0;
-}
 
 const JV_GRID_DEFAULT_OPTIONS = {
     searchable: true,
@@ -24583,6 +24914,266 @@ function exportGridToExcel(header, rows, filename = 'export.xlsx') {
     downloadBlob(blob, filename);
 }
 
+function flattenGridColumns(columns) {
+    return columns.flatMap((column) => column.children?.length ? flattenGridColumns(column.children) : [column]);
+}
+function getVisibleGridColumns(columns, columnOrder) {
+    const visibleColumns = flattenGridColumns(columns).filter((column) => !column.hidden);
+    if (columnOrder.length === 0)
+        return visibleColumns;
+    return columnOrder
+        .map((key) => visibleColumns.find((column) => String(column.key) === key))
+        .filter((column) => Boolean(column));
+}
+function getGroupedGridColumns(columns) {
+    return columns.filter((column) => column.children && column.children.length > 0);
+}
+
+function getCellKeyboardTarget(key, rowIndex, columnIndex, rowCount, columnCount) {
+    if (key === 'ArrowUp' && rowIndex === 0) {
+        return { kind: 'header', row: 0, column: columnIndex };
+    }
+    const movement = {
+        ArrowDown: [1, 0],
+        ArrowLeft: [0, -1],
+        ArrowRight: [0, 1],
+        ArrowUp: [-1, 0],
+    };
+    const delta = movement[key];
+    if (!delta)
+        return null;
+    const target = { row: rowIndex + delta[0], column: columnIndex + delta[1] };
+    if (target.row < 0 ||
+        target.row >= rowCount ||
+        target.column < 0 ||
+        target.column >= columnCount) {
+        return null;
+    }
+    return { kind: 'cell', ...target };
+}
+function getHeaderKeyboardTarget(key, columnIndex, columnCount) {
+    if (key === 'ArrowDown')
+        return { kind: 'cell', row: 0, column: columnIndex };
+    const delta = key === 'ArrowLeft' ? -1 : key === 'ArrowRight' ? 1 : 0;
+    if (!delta)
+        return null;
+    const targetColumn = columnIndex + delta;
+    if (targetColumn < 0 || targetColumn >= columnCount)
+        return null;
+    return { kind: 'header', row: 0, column: targetColumn };
+}
+
+function getGridEditType(column) {
+    if (column.editType)
+        return column.editType;
+    switch (column.type) {
+        case 'integer':
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return 'number';
+        case 'date':
+            return 'date';
+        case 'time':
+            return 'time';
+        case 'datetime':
+            return 'datetime';
+        case 'boolean':
+            return 'boolean';
+        default:
+            return 'text';
+    }
+}
+function getGridInputType(column) {
+    switch (getGridEditType(column)) {
+        case 'number':
+            return 'number';
+        case 'date':
+            return 'date';
+        case 'time':
+            return 'time';
+        case 'datetime':
+            return 'datetime-local';
+        default:
+            return 'text';
+    }
+}
+function isGridBooleanTrue(value) {
+    return value === true || value === 'true' || value === 1 || value === '1';
+}
+function getGridEditValue(value, column, toDate) {
+    const editType = getGridEditType(column);
+    if (editType === 'date')
+        return toGridDateInputValue(value, toDate);
+    if (editType === 'datetime')
+        return toGridDateTimeInputValue(value, toDate);
+    if (editType === 'time')
+        return toGridTimeInputValue(value, toDate);
+    return value == null ? '' : String(value);
+}
+function normalizeGridEditValue(column, value, toDate) {
+    switch (getGridEditType(column)) {
+        case 'number': {
+            if (value === '' || value == null)
+                return null;
+            const number = Number(value);
+            return Number.isFinite(number) ? number : null;
+        }
+        case 'date':
+            return toGridDateInputValue(value, toDate) || null;
+        case 'datetime': {
+            if (value === '' || value == null)
+                return null;
+            const date = new Date(String(value));
+            return Number.isNaN(date.getTime()) ? null : date.toISOString();
+        }
+        case 'time': {
+            if (value === '' || value == null)
+                return null;
+            const time = String(value);
+            return /^\d{2}:\d{2}$/.test(time) ? `${time}:00` : time;
+        }
+        case 'boolean':
+            return Boolean(value);
+        default:
+            return value;
+    }
+}
+function toGridDateInputValue(value, toDate) {
+    if (typeof value === 'string') {
+        const match = value.match(/^\d{4}-\d{2}-\d{2}/);
+        if (match)
+            return match[0];
+    }
+    const date = toDate(value);
+    if (!date)
+        return '';
+    return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
+}
+function toGridDateTimeInputValue(value, toDate) {
+    const date = toDate(value);
+    if (!date)
+        return '';
+    const pad = (part) => String(part).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function toGridTimeInputValue(value, toDate) {
+    if (typeof value === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(value))
+        return value.slice(0, 5);
+    const date = toDate(value);
+    if (!date)
+        return '';
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+}
+
+function filterGridData(data, columns, searchTerm, filters, getColumnKey, getRawCellValue, getSearchValue) {
+    let items = data;
+    const term = searchTerm.trim().toLowerCase();
+    if (term) {
+        items = items.filter((row) => columns.some((column) => {
+            if (column.searchable === false)
+                return false;
+            const value = getRawCellValue(row, column);
+            if (value == null)
+                return false;
+            return getSearchValue(value, column).includes(term);
+        }));
+    }
+    const hasFilters = Object.values(filters).some((filter) => filter.value.trim().length > 0);
+    if (!hasFilters)
+        return items;
+    return items.filter((row) => Object.entries(filters).every(([key, filter]) => {
+        if (!filter.value.trim())
+            return true;
+        const column = columns.find((candidate) => getColumnKey(candidate) === key);
+        if (!column || column.filterable === false)
+            return true;
+        const value = getSearchValue(getRawCellValue(row, column), column);
+        const filterValue = filter.value.toLowerCase();
+        switch (filter.operator) {
+            case 'contains':
+                return value.includes(filterValue);
+            case 'equals':
+                return value === filterValue;
+            case 'startsWith':
+                return value.startsWith(filterValue);
+            case 'endsWith':
+                return value.endsWith(filterValue);
+            default:
+                return value.includes(filterValue);
+        }
+    }));
+}
+function sortGridData(data, sortState, findColumn, getRawCellValue, getComparableValue) {
+    const { columnKey, direction } = sortState;
+    if (!columnKey || !direction)
+        return data;
+    const column = findColumn(columnKey);
+    return [...data].sort((a, b) => {
+        const valueA = getComparableValue(getRawCellValue(a, column), column);
+        const valueB = getComparableValue(getRawCellValue(b, column), column);
+        if (valueA == null)
+            return 1;
+        if (valueB == null)
+            return -1;
+        const comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+        return direction === 'asc' ? comparison : -comparison;
+    });
+}
+function paginateGridData(data, pageIndex, pageSize, totalPages) {
+    const page = Math.min(pageIndex, totalPages - 1);
+    return data.slice(page * pageSize, page * pageSize + pageSize);
+}
+
+function resolveGridSelection(controlledIds, internalIds) {
+    return new Set(controlledIds ?? internalIds);
+}
+function areAllGridRowsSelected(rows, selectedIds, getRowId) {
+    return rows.length > 0 && rows.every((row) => selectedIds.has(getRowId(row)));
+}
+function areSomeGridRowsSelected(rows, selectedIds, getRowId) {
+    return (rows.some((row) => selectedIds.has(getRowId(row))) &&
+        !areAllGridRowsSelected(rows, selectedIds, getRowId));
+}
+function toggleGridRowSelection(selectedIds, rowId) {
+    const next = new Set(selectedIds);
+    if (next.has(rowId))
+        next.delete(rowId);
+    else
+        next.add(rowId);
+    return Array.from(next);
+}
+function toggleGridRowsSelection(selectedIds, rows, checked, getRowId) {
+    const next = new Set(selectedIds);
+    rows.forEach((row) => {
+        const id = getRowId(row);
+        if (checked)
+            next.add(id);
+        else
+            next.delete(id);
+    });
+    return Array.from(next);
+}
+
+function getGridVirtualRange(scrollTop, clientHeight, rowHeight, itemCount, buffer = 5) {
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
+    const end = Math.min(itemCount, Math.ceil((scrollTop + clientHeight) / rowHeight) + buffer);
+    return { start, end };
+}
+function getGridVirtualSlice(items, start, end, enabled) {
+    if (!enabled)
+        return items;
+    if (start >= items.length)
+        return [];
+    return items.slice(start, Math.min(end, items.length));
+}
+function getGridVirtualTotalHeight(itemCount, rowHeight) {
+    return itemCount * rowHeight;
+}
+function getGridVirtualOffset(start, rowHeight) {
+    return start * rowHeight;
+}
+
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
@@ -24608,7 +25199,10 @@ class JvGridComponent {
     columnResize = output();
     columnReorder = output();
     rowEdit = output();
-    effectiveOptions = computed(() => ({ ...JV_GRID_DEFAULT_OPTIONS, ...this.options() }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
+    effectiveOptions = computed(() => ({
+        ...JV_GRID_DEFAULT_OPTIONS,
+        ...this.options(),
+    }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
     idKey = computed(() => {
         const tb = this.trackBy();
         if (typeof tb === 'string')
@@ -24622,14 +25216,9 @@ class JvGridComponent {
     columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
     activeCell = signal({ row: 0, column: 0 }, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
     visibleColumns = computed(() => {
-        const cols = this.flattenColumns(this.columns()).filter(col => !col.hidden);
-        const order = this.columnOrder();
-        if (order.length > 0) {
-            return order.map(key => cols.find(c => this.colKey(c) === key)).filter(Boolean);
-        }
-        return cols;
+        return getVisibleGridColumns(this.columns(), this.columnOrder());
     }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
-    groupedHeaders = computed(() => this.columns().filter(col => col.children && col.children.length > 0), ...(ngDevMode ? [{ debugName: "groupedHeaders" }] : /* istanbul ignore next */ []));
+    groupedHeaders = computed(() => getGroupedGridColumns(this.columns()), ...(ngDevMode ? [{ debugName: "groupedHeaders" }] : /* istanbul ignore next */ []));
     internalSelectedIds = signal([], ...(ngDevMode ? [{ debugName: "internalSelectedIds" }] : /* istanbul ignore next */ []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     sortState = signal({ columnKey: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
@@ -24638,8 +25227,8 @@ class JvGridComponent {
     pageSize = computed(() => this.internalPageSize() ?? this.effectiveOptions().pageSize ?? 20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     pageSizeStr = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeStr" }] : /* istanbul ignore next */ []));
     pageSizeOptions = computed(() => (this.effectiveOptions().pageSizeOptions ?? [])
-        .filter(size => Number.isInteger(size) && size > 0)
-        .map(size => ({ label: String(size), value: String(size) })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+        .filter((size) => Number.isInteger(size) && size > 0)
+        .map((size) => ({ label: String(size), value: String(size) })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     pageSizeInputSync = effect(() => {
         void this.options().pageSize;
         this.internalPageSize.set(null);
@@ -24654,71 +25243,18 @@ class JvGridComponent {
             this.pageIndex.set(Math.max(0, lastPage));
     }, ...(ngDevMode ? [{ debugName: "pageBoundsGuard" }] : /* istanbul ignore next */ []));
     selectedIdSet = computed(() => {
-        const fromInput = this.selectedIds();
-        const fromInternal = this.internalSelectedIds();
-        const ids = fromInput !== null ? fromInput : fromInternal;
-        return new Set(ids);
+        return resolveGridSelection(this.selectedIds(), this.internalSelectedIds());
     }, ...(ngDevMode ? [{ debugName: "selectedIdSet" }] : /* istanbul ignore next */ []));
-    hasActiveFilters = computed(() => Object.values(this.colFilters()).some(f => f.value.trim().length > 0), ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => Object.values(this.colFilters()).some((f) => f.value.trim().length > 0), ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
     filteredData = computed(() => {
         if (this.effectiveOptions().serverSide)
             return this.data();
-        let items = this.data();
-        const term = this.searchTerm().trim().toLowerCase();
-        if (term) {
-            items = items.filter(row => {
-                return this.visibleColumns().some(col => {
-                    if (col.searchable === false)
-                        return false;
-                    const value = this.getRawCellValue(row, col);
-                    if (value == null)
-                        return false;
-                    return this.getSearchValue(value, col).includes(term);
-                });
-            });
-        }
-        const filters = this.colFilters();
-        const hasFilters = Object.values(filters).some(f => f.value.trim().length > 0);
-        if (hasFilters) {
-            items = items.filter(row => {
-                return Object.entries(filters).every(([key, filter]) => {
-                    if (!filter.value.trim())
-                        return true;
-                    const col = this.columns().find(c => this.colKey(c) === key);
-                    if (!col || col.filterable === false)
-                        return true;
-                    const value = this.getSearchValue(this.getRawCellValue(row, col), col);
-                    const fv = filter.value.toLowerCase();
-                    switch (filter.operator) {
-                        case 'contains': return value.includes(fv);
-                        case 'equals': return value === fv;
-                        case 'startsWith': return value.startsWith(fv);
-                        case 'endsWith': return value.endsWith(fv);
-                        default: return value.includes(fv);
-                    }
-                });
-            });
-        }
-        return items;
+        return filterGridData(this.data(), this.visibleColumns(), this.searchTerm(), this.colFilters(), (column) => this.colKey(column), (row, column) => this.getRawCellValue(row, column), (value, column) => this.getSearchValue(value, column));
     }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
     sortedData = computed(() => {
         if (this.effectiveOptions().serverSide)
             return this.filteredData();
-        const items = this.filteredData();
-        const { columnKey, direction } = this.sortState();
-        if (!columnKey || !direction)
-            return items;
-        return [...items].sort((a, b) => {
-            const col = this.findColumn(columnKey);
-            const va = this.getComparableValue(this.getRawCellValue(a, col), col);
-            const vb = this.getComparableValue(this.getRawCellValue(b, col), col);
-            if (va == null)
-                return 1;
-            if (vb == null)
-                return -1;
-            const cmp = va < vb ? -1 : va > vb ? 1 : 0;
-            return direction === 'asc' ? cmp : -cmp;
-        });
+        return sortGridData(this.filteredData(), this.sortState(), (key) => this.findColumn(key), (row, column) => this.getRawCellValue(row, column), (value, column) => this.getComparableValue(value, column));
     }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
     effectiveTotalItems = computed(() => {
         if (this.effectiveOptions().serverSide) {
@@ -24732,10 +25268,7 @@ class JvGridComponent {
             return this.virtualDisplayData();
         if (!this.effectiveOptions().pageable)
             return this.sortedData();
-        const items = this.sortedData();
-        const ps = this.pageSize();
-        const page = Math.min(this.pageIndex(), this.effectiveTotalPages() - 1);
-        return items.slice(page * ps, page * ps + ps);
+        return paginateGridData(this.sortedData(), this.pageIndex(), this.pageSize(), this.effectiveTotalPages());
     }, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
     virtualScrollEnabled = computed(() => this.effectiveOptions().virtualScroll && !this.effectiveOptions().serverSide, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : /* istanbul ignore next */ []));
     virtualStartIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualStartIndex" }] : /* istanbul ignore next */ []));
@@ -24746,23 +25279,16 @@ class JvGridComponent {
         this.virtualEndIndex.set(Math.min(20, length));
     }, ...(ngDevMode ? [{ debugName: "virtualRangeResetter" }] : /* istanbul ignore next */ []));
     virtualDisplayData = computed(() => {
-        if (!this.virtualScrollEnabled())
-            return this.sortedData();
-        const items = this.sortedData();
-        const start = this.virtualStartIndex();
-        const end = this.virtualEndIndex();
-        if (start >= items.length)
-            return [];
-        return items.slice(start, Math.min(end, items.length));
+        return getGridVirtualSlice(this.sortedData(), this.virtualStartIndex(), this.virtualEndIndex(), !!this.virtualScrollEnabled());
     }, ...(ngDevMode ? [{ debugName: "virtualDisplayData" }] : /* istanbul ignore next */ []));
     virtualTotalHeight = computed(() => {
         const count = this.effectiveOptions().serverSide
             ? this.effectiveTotalItems()
             : this.sortedData().length;
-        return count * (this.effectiveOptions().virtualScrollRowHeight ?? 48);
+        return getGridVirtualTotalHeight(count, this.effectiveOptions().virtualScrollRowHeight ?? 48);
     }, ...(ngDevMode ? [{ debugName: "virtualTotalHeight" }] : /* istanbul ignore next */ []));
     virtualOffsetY = computed(() => {
-        return this.virtualStartIndex() * (this.effectiveOptions().virtualScrollRowHeight ?? 48);
+        return getGridVirtualOffset(this.virtualStartIndex(), this.effectiveOptions().virtualScrollRowHeight ?? 48);
     }, ...(ngDevMode ? [{ debugName: "virtualOffsetY" }] : /* istanbul ignore next */ []));
     pageStart = computed(() => this.effectiveTotalItems() === 0 ? 0 : this.pageIndex() * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "pageStart" }] : /* istanbul ignore next */ []));
     pageEnd = computed(() => Math.min((this.pageIndex() + 1) * this.pageSize(), this.effectiveTotalItems()), ...(ngDevMode ? [{ debugName: "pageEnd" }] : /* istanbul ignore next */ []));
@@ -24778,11 +25304,11 @@ class JvGridComponent {
     }, ...(ngDevMode ? [{ debugName: "pageRange" }] : /* istanbul ignore next */ []));
     allSelected = computed(() => {
         const rows = this.displayData();
-        return rows.length > 0 && rows.every(r => this.selectedIdSet().has(this.getRowId(r)));
+        return areAllGridRowsSelected(rows, this.selectedIdSet(), (row) => this.getRowId(row));
     }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     someSelected = computed(() => {
         const rows = this.displayData();
-        return rows.some(r => this.selectedIdSet().has(this.getRowId(r))) && !this.allSelected();
+        return areSomeGridRowsSelected(rows, this.selectedIdSet(), (row) => this.getRowId(row));
     }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
     colspan = computed(() => {
         let count = this.visibleColumns().length;
@@ -24800,9 +25326,6 @@ class JvGridComponent {
         const active = this.activeCell();
         return active.row === rowIndex && active.column === columnIndex ? 0 : -1;
     }
-    flattenColumns(columns) {
-        return columns.flatMap(col => col.children?.length ? this.flattenColumns(col.children) : [col]);
-    }
     onCellFocus(rowIndex, columnIndex) {
         if (this.resolvedOptions().keyboardNavigation) {
             this.activeCell.set({ row: rowIndex, column: columnIndex });
@@ -24812,34 +25335,26 @@ class JvGridComponent {
         if (!this.resolvedOptions().keyboardNavigation)
             return;
         const target = event.target;
-        if (target !== event.currentTarget && target.closest('button, input, select, textarea, [contenteditable="true"]')) {
+        if (target !== event.currentTarget &&
+            target.closest('button, input, select, textarea, [contenteditable="true"]')) {
             return;
         }
-        const movement = {
-            ArrowDown: [1, 0],
-            ArrowLeft: [0, -1],
-            ArrowRight: [0, 1],
-        };
-        if (event.key === 'ArrowUp' && rowIndex === 0) {
+        const targetPosition = getCellKeyboardTarget(event.key, rowIndex, columnIndex, this.displayData().length, this.visibleColumns().length);
+        if (!targetPosition)
+            return;
+        if (targetPosition.kind === 'header') {
             event.preventDefault();
-            this.activeCell.set({ row: 0, column: columnIndex });
+            this.activeCell.set({ row: targetPosition.row, column: targetPosition.column });
             const table = event.currentTarget.closest('table');
-            table?.querySelector(`[data-column-index="${columnIndex}"][role="columnheader"]`)?.focus();
+            table
+                ?.querySelector(`[data-column-index="${targetPosition.column}"][role="columnheader"]`)
+                ?.focus();
             return;
         }
-        const delta = event.key === 'ArrowUp' ? [-1, 0] : movement[event.key];
-        if (!delta)
-            return;
-        const nextRow = rowIndex + delta[0];
-        const nextColumn = columnIndex + delta[1];
-        const rows = this.displayData();
-        const columns = this.visibleColumns();
-        if (nextRow < 0 || nextRow >= rows.length || nextColumn < 0 || nextColumn >= columns.length)
-            return;
         event.preventDefault();
-        this.activeCell.set({ row: nextRow, column: nextColumn });
+        this.activeCell.set({ row: targetPosition.row, column: targetPosition.column });
         const table = event.currentTarget.closest('table');
-        const nextCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="${nextRow}"][data-column-index="${nextColumn}"]`);
+        const nextCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="${targetPosition.row}"][data-column-index="${targetPosition.column}"]`);
         nextCell?.focus();
     }
     onCellF2(event, rowIndex, columnIndex) {
@@ -24861,7 +25376,10 @@ class JvGridComponent {
     onHeaderKeydown(event, columnIndex) {
         if (!this.resolvedOptions().keyboardNavigation)
             return;
-        if (event.key === 'ArrowDown') {
+        const targetPosition = getHeaderKeyboardTarget(event.key, columnIndex, this.visibleColumns().length);
+        if (!targetPosition)
+            return;
+        if (targetPosition.kind === 'cell') {
             const table = event.currentTarget.closest('table');
             const firstCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="0"][data-column-index="${columnIndex}"]`);
             if (firstCell) {
@@ -24871,16 +25389,12 @@ class JvGridComponent {
             }
             return;
         }
-        const delta = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
-        if (!delta)
-            return;
-        const nextColumn = columnIndex + delta;
-        if (nextColumn < 0 || nextColumn >= this.visibleColumns().length)
-            return;
         event.preventDefault();
-        this.activeCell.set({ row: 0, column: nextColumn });
+        this.activeCell.set({ row: targetPosition.row, column: targetPosition.column });
         const table = event.currentTarget.closest('table');
-        table?.querySelector(`[data-column-index="${nextColumn}"][role="columnheader"]`)?.focus();
+        table
+            ?.querySelector(`[data-column-index="${targetPosition.column}"][role="columnheader"]`)
+            ?.focus();
     }
     editState = signal(null, ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     t = (key, params) => this.translationService.translate(key, params);
@@ -24892,7 +25406,7 @@ class JvGridComponent {
         const tb = this.trackBy();
         if (typeof tb === 'function')
             return tb(row, index ?? 0);
-        if (row && typeof row === 'object' && ('id' in row)) {
+        if (row && typeof row === 'object' && 'id' in row) {
             const id = record['id'];
             if (typeof id === 'string' || typeof id === 'number')
                 return id;
@@ -24912,106 +25426,22 @@ class JvGridComponent {
         return this.getRawCellValue(row, col);
     }
     getEditValue(row, col) {
-        const val = this.getCellValue(row, col);
-        const editType = this.editType(col);
-        if (editType === 'date')
-            return this.toDateInputValue(val);
-        if (editType === 'datetime')
-            return this.toDateTimeInputValue(val);
-        if (editType === 'time')
-            return this.toTimeInputValue(val);
-        return val == null ? '' : String(val);
+        return getGridEditValue(this.getCellValue(row, col), col, (value) => this.formatService.toDate(value));
     }
     getBooleanEditValue(row, col) {
-        const value = this.getCellValue(row, col);
-        return value === true || value === 'true' || value === 1 || value === '1';
+        return isGridBooleanTrue(this.getCellValue(row, col));
     }
     isBooleanTrue(value) {
-        return value === true || value === 'true' || value === 1 || value === '1';
+        return isGridBooleanTrue(value);
     }
     editType(col) {
-        if (col.editType)
-            return col.editType;
-        switch (col.type) {
-            case 'integer':
-            case 'number':
-            case 'currency':
-            case 'percent':
-                return 'number';
-            case 'date':
-                return 'date';
-            case 'time':
-                return 'time';
-            case 'datetime':
-                return 'datetime';
-            case 'boolean':
-                return 'boolean';
-            default:
-                return 'text';
-        }
+        return getGridEditType(col);
     }
     inputType(col) {
-        switch (this.editType(col)) {
-            case 'number': return 'number';
-            case 'date': return 'date';
-            case 'time': return 'time';
-            case 'datetime': return 'datetime-local';
-            default: return 'text';
-        }
+        return getGridInputType(col);
     }
     normalizeEditValue(col, value) {
-        switch (this.editType(col)) {
-            case 'number': {
-                if (value === '' || value == null)
-                    return null;
-                const number = Number(value);
-                return Number.isFinite(number) ? number : null;
-            }
-            case 'date':
-                return this.toDateInputValue(value) || null;
-            case 'datetime': {
-                if (value === '' || value == null)
-                    return null;
-                const date = new Date(String(value));
-                return Number.isNaN(date.getTime()) ? null : date.toISOString();
-            }
-            case 'time': {
-                if (value === '' || value == null)
-                    return null;
-                const time = String(value);
-                return /^\d{2}:\d{2}$/.test(time) ? `${time}:00` : time;
-            }
-            case 'boolean':
-                return Boolean(value);
-            default:
-                return value;
-        }
-    }
-    toDateInputValue(value) {
-        if (typeof value === 'string') {
-            const match = value.match(/^\d{4}-\d{2}-\d{2}/);
-            if (match)
-                return match[0];
-        }
-        const date = this.formatService.toDate(value);
-        if (!date)
-            return '';
-        return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
-    }
-    toDateTimeInputValue(value) {
-        const date = this.formatService.toDate(value);
-        if (!date)
-            return '';
-        const pad = (part) => String(part).padStart(2, '0');
-        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
-    }
-    toTimeInputValue(value) {
-        if (typeof value === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(value))
-            return value.slice(0, 5);
-        const date = this.formatService.toDate(value);
-        if (!date)
-            return '';
-        return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+        return normalizeGridEditValue(col, value, (input) => this.formatService.toDate(input));
     }
     formatValue(value, col, _row) {
         if (value == null)
@@ -25098,7 +25528,7 @@ class JvGridComponent {
         return (this.resolvedOptions().editable || col.editable === true) && col.editable !== false;
     }
     groupColspan(group) {
-        return this.flattenColumns(group.children ?? []).filter(col => !col.hidden).length || 1;
+        return flattenGridColumns(group.children ?? []).filter((col) => !col.hidden).length || 1;
     }
     isEditingCell(row, col) {
         const es = this.editState();
@@ -25109,13 +25539,13 @@ class JvGridComponent {
         return es !== null && es.rowId === this.getRowId(row);
     }
     getEditOptions(col) {
-        return (col.editOptions || []).map(opt => ({
+        return (col.editOptions || []).map((opt) => ({
             label: opt.label,
             value: String(opt.value),
         }));
     }
     findColumn(key) {
-        return this.visibleColumns().find(c => this.colKey(c) === key) ?? { key, header: key };
+        return this.visibleColumns().find((c) => this.colKey(c) === key) ?? { key, header: key };
     }
     toggleSort(col, event) {
         if (col.sortable === false || !this.resolvedOptions().sortable)
@@ -25153,13 +25583,7 @@ class JvGridComponent {
         return this.selectedIdSet().has(this.getRowId(row));
     }
     toggleRow(row) {
-        const id = this.getRowId(row);
-        const set = new Set(this.selectedIdSet());
-        if (set.has(id))
-            set.delete(id);
-        else
-            set.add(id);
-        const nextIds = Array.from(set);
+        const nextIds = toggleGridRowSelection(this.selectedIdSet(), this.getRowId(row));
         if (this.selectedIds() === null)
             this.internalSelectedIds.set(nextIds);
         this.selectionChange.emit(nextIds);
@@ -25173,15 +25597,7 @@ class JvGridComponent {
         this.pageChange.emit({ pageIndex: 0, pageSize });
     }
     toggleSelectAll(checked) {
-        const set = new Set(this.selectedIdSet());
-        const rows = this.displayData();
-        rows.forEach(r => {
-            if (checked)
-                set.add(this.getRowId(r));
-            else
-                set.delete(this.getRowId(r));
-        });
-        const nextIds = Array.from(set);
+        const nextIds = toggleGridRowsSelection(this.selectedIdSet(), this.displayData(), checked, (row) => this.getRowId(row));
         if (this.selectedIds() === null)
             this.internalSelectedIds.set(nextIds);
         this.selectionChange.emit(nextIds);
@@ -25205,7 +25621,7 @@ class JvGridComponent {
     }
     onColumnFilterChange(col, value) {
         const key = this.colKey(col);
-        this.colFilters.update(f => ({
+        this.colFilters.update((f) => ({
             ...f,
             [key]: { key, value, operator: 'contains' },
         }));
@@ -25215,8 +25631,8 @@ class JvGridComponent {
     getRowLabel(row, _index) {
         const label = this.visibleColumns()
             .slice(0, 2)
-            .map(col => this.getCellValue(row, col))
-            .filter(v => v != null)
+            .map((col) => this.getCellValue(row, col))
+            .filter((v) => v != null)
             .join(' - ');
         return `${label}${this.isSelected(row) ? ` (${this.t('grid.selected')})` : ''}`;
     }
@@ -25250,7 +25666,7 @@ class JvGridComponent {
         this.editState.set(null);
     }
     onEditValueChange(row, col, value) {
-        const option = col.editOptions?.find(item => String(item.value) === value);
+        const option = col.editOptions?.find((item) => String(item.value) === value);
         this.commitEdit(row, col, option?.value ?? value);
     }
     // Column resizing
@@ -25275,7 +25691,7 @@ class JvGridComponent {
             return;
         const diff = event.clientX - this.resizeData.startX;
         const newWidth = Math.max(30, this.resizeData.startWidth + diff);
-        this.columnWidths.update(w => ({
+        this.columnWidths.update((w) => ({
             ...w,
             [this.colKey(this.resizeData.col)]: `${newWidth}px`,
         }));
@@ -25310,7 +25726,7 @@ class JvGridComponent {
             return;
         if (this.dragIndex === targetIdx)
             return;
-        const cols = this.visibleColumns().map(c => this.colKey(c));
+        const cols = this.visibleColumns().map((c) => this.colKey(c));
         const [moved] = cols.splice(this.dragIndex, 1);
         cols.splice(targetIdx, 0, moved);
         this.columnOrder.set(cols);
@@ -25325,13 +25741,9 @@ class JvGridComponent {
         if (!this.virtualScrollEnabled())
             return;
         const rowHeight = this.effectiveOptions().virtualScrollRowHeight ?? 48;
-        const buffer = 5;
-        const scrollTop = target.scrollTop;
-        const clientHeight = target.clientHeight;
-        const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
-        const end = Math.min(this.sortedData().length, Math.ceil((scrollTop + clientHeight) / rowHeight) + buffer);
-        this.virtualStartIndex.set(start);
-        this.virtualEndIndex.set(end);
+        const range = getGridVirtualRange(target.scrollTop, target.clientHeight, rowHeight, this.sortedData().length);
+        this.virtualStartIndex.set(range.start);
+        this.virtualEndIndex.set(range.end);
     }
     // Export
     exportCsv() {
@@ -25354,753 +25766,23 @@ class JvGridComponent {
         return configuredName.replace(/\.(csv|xlsx)$/i, '') + `.${extension}`;
     }
     buildExportMatrix() {
-        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header, column: c }));
+        const cols = this.visibleColumns().map((c) => ({
+            key: this.colKey(c),
+            header: c.header,
+            column: c,
+        }));
         const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
         return {
-            header: cols.map(c => c.header),
-            rows: allData.map(row => cols.map(col => this.getExportValue(row[col.key], col.column))),
+            header: cols.map((c) => c.header),
+            rows: allData.map((row) => cols.map((col) => this.getExportValue(row[col.key], col.column))),
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: `
-    <div class="jv-grid" role="region" [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()">
-      @if (resolvedOptions().searchable || resolvedOptions().exportable) {
-        <div class="jv-grid-toolbar">
-          @if (resolvedOptions().searchable) {
-            <div class="jv-grid-search">
-              <jv-icon name="search" [size]="16" />
-              <jv-input
-                [inputId]="gridSearchInputId"
-                [placeholder]="t('grid.searchPlaceholder')"
-                [ngModel]="searchTerm()"
-                (ngModelChange)="onSearchInput($event)"
-              />
-            </div>
-          }
-          @if (resolvedOptions().exportable) {
-            <div class="jv-grid-export-actions">
-              <jv-button variant="outline" icon="download" (click)="exportCsv()">{{ t('grid.exportCsv') }}</jv-button>
-              <jv-button variant="outline" icon="file-spreadsheet" (click)="exportExcel()">{{ t('grid.exportExcel') }}</jv-button>
-            </div>
-          }
-        </div>
-      }
-
-      @if (resolvedOptions().loading) {
-        <div class="jv-grid-loading" role="status" aria-live="polite">
-          <span class="jv-grid-spinner" aria-hidden="true"></span>
-          <span>{{ t('grid.loading') }}</span>
-        </div>
-      } @else {
-        <div
-          class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="virtualScrollEnabled()"
-          #tableWrap
-          (scroll)="onVirtualScroll($any($event.target))"
-        >
-          @if (virtualScrollEnabled()) {
-            <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
-          }
-          <table
-            class="jv-grid-table"
-            role="grid"
-            [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
-            [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="colspan()"
-            [class]="densityClass()"
-            [style.position]="virtualScrollEnabled() ? 'relative' : null"
-            [style.top.px]="virtualOffsetY()"
-          >
-            <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
-
-            @let hasGroupedHeaders = groupedHeaders().length > 0;
-
-            <thead class="jv-grid-thead">
-              @if (hasGroupedHeaders) {
-                <tr>
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select" scope="col" [attr.rowspan]="2">
-                      <input
-                        type="checkbox"
-                        class="jv-grid-checkbox"
-                        [checked]="allSelected()"
-                        (change)="toggleSelectAll($any($event.target).checked)"
-                        [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                        [indeterminate]="someSelected()"
-                      />
-                    </th>
-                  }
-                  @for (group of groupedHeaders(); track colKey(group)) {
-                    <th
-                      class="jv-grid-th"
-                      [class]="group.headerClass || ''"
-                      [class.jv-grid-th-sticky-left]="isStickyLeft(group)"
-                      [class.jv-grid-th-sticky-right]="isStickyRight(group)"
-                      [attr.colspan]="groupColspan(group)"
-                      scope="colgroup"
-                      [style.text-align]="group.align ?? 'start'"
-                    >
-                      <div class="jv-grid-th-content">{{ group.header }}</div>
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions" scope="col" [attr.rowspan]="2">
-                      <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                    </th>
-                  }
-                </tr>
-              }
-
-              <tr>
-                @if (!hasGroupedHeaders && resolvedOptions().selectable) {
-                  <th class="jv-grid-th jv-grid-th-select" scope="col">
-                    <input
-                      type="checkbox"
-                      class="jv-grid-checkbox"
-                      [checked]="allSelected()"
-                      (change)="toggleSelectAll($any($event.target).checked)"
-                      [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                      [indeterminate]="someSelected()"
-                    />
-                  </th>
-                }
-                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                  <th
-                    class="jv-grid-th"
-                    [class]="col.headerClass || ''"
-                    [class.jv-grid-th-sortable]="col.sortable !== false && resolvedOptions().sortable"
-                    [class.jv-grid-th-sticky-left]="isStickyLeft(col)"
-                    [class.jv-grid-th-sticky-right]="isStickyRight(col)"
-                    [class.jv-grid-th-reorderable]="resolvedOptions().reorderableColumns"
-                    [style.text-align]="col.align ?? 'start'"
-                    [style.width]="getColumnWidth(col)"
-                    [style.min-width]="col.minWidth || undefined"
-                    [style.max-width]="col.maxWidth || undefined"
-                     scope="col"
-                     role="columnheader"
-                     [attr.data-column-index]="colIdx"
-                     [attr.aria-sort]="getAriaSort(col)"
-                     [attr.aria-label]="getSortLabel(col)"
-                     [tabindex]="resolvedOptions().keyboardNavigation ? (activeCell().column === colIdx ? 0 : -1) : (col.sortable !== false && resolvedOptions().sortable ? 0 : -1)"
-                     (click)="toggleSort(col)"
-                     (focus)="onHeaderFocus(colIdx)"
-                     (keydown)="onHeaderKeydown($event, colIdx)"
-                     (keydown.enter)="toggleSort(col)"
-                    (keydown.space)="toggleSort(col, $event)"
-                    draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
-                    (dragstart)="onDragStart($event, colIdx)"
-                    (dragover)="onDragOver($event, colIdx)"
-                    (drop)="onDrop($event, colIdx)"
-                    (dragend)="onDragEnd($event)"
-                  >
-                    <div class="jv-grid-th-content">
-                      <span>{{ col.header }}</span>
-                      @if (col.sortable !== false && resolvedOptions().sortable) {
-                        <span class="jv-grid-sort-icon" aria-hidden="true">
-                          @if (sortState().columnKey === colKey(col)) {
-                            @if (sortState().direction === 'asc') { ▲ }
-                            @if (sortState().direction === 'desc') { ▼ }
-                          }
-                        </span>
-                      }
-                    </div>
-                    @if (isColumnResizable(col)) {
-                      <div
-                        class="jv-grid-resize-handle"
-                        (mousedown)="onResizeStart($event, col, colIdx)"
-                      ></div>
-                    }
-                  </th>
-                }
-                @if (!hasGroupedHeaders && actions().length > 0) {
-                  <th class="jv-grid-th jv-grid-th-actions" scope="col">
-                    <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                  </th>
-                }
-              </tr>
-
-              @if (resolvedOptions().columnFilters) {
-                <tr class="jv-grid-filter-row">
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select"></th>
-                  }
-                  @for (col of visibleColumns(); track colKey(col)) {
-                    <th class="jv-grid-th jv-grid-th-filter">
-                      @if (col.filterable !== false) {
-                        <input
-                          class="jv-grid-filter-input"
-                          [placeholder]="t('grid.filterPlaceholder')"
-                          [attr.aria-label]="t('grid.filterForColumn', { column: col.header })"
-                          [ngModel]="colFilters()[colKey(col)]?.value ?? ''"
-                          (ngModelChange)="onColumnFilterChange(col, $event)"
-                        />
-                      }
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions"></th>
-                  }
-                </tr>
-              }
-            </thead>
-
-            <tbody class="jv-grid-tbody">
-              @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}
-                  </td>
-                </tr>
-              } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}
-                  </td>
-                </tr>
-              } @else {
-                @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {
-                  <tr
-                    class="jv-grid-tr"
-                    role="row"
-                    [class.jv-grid-tr-editing]="isRowEditing(row)"
-                    [class.jv-grid-tr-selected]="isSelected(row)"
-                    [attr.aria-selected]="resolvedOptions().selectable ? isSelected(row) : null"
-                    (click)="onRowClick(row)"
-                    (dblclick)="onRowDblClick(row)"
-                    (keydown.enter)="onRowClick(row)"
-                    (keydown.space)="onRowClick($event, row)"
-                    [tabindex]="-1"
-                  >
-                    @if (resolvedOptions().selectable) {
-                      <td
-                        class="jv-grid-td jv-grid-td-select"
-                        [class.jv-grid-td-sticky-left]="resolvedOptions().stickyColumns"
-                      >
-                        <input
-                          type="checkbox"
-                          class="jv-grid-checkbox"
-                          [checked]="isSelected(row)"
-                          (change)="toggleRow(row); $event.stopPropagation()"
-                          (keydown.space)="$event.stopPropagation()"
-                          [attr.aria-label]="getRowLabel(row, $index)"
-                        />
-                      </td>
-                    }
-                    @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                      <td
-                        class="jv-grid-td"
-                        [attr.role]="resolvedOptions().keyboardNavigation ? 'gridcell' : null"
-                        [class]="col.cellClass || ''"
-                        [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
-                        [class.jv-grid-td-sticky-right]="isStickyRight(col)"
-                        [class.jv-grid-td-editable]="isCellEditable(col)"
-                        [style.text-align]="col.align ?? 'start'"
-                        (dblclick)="startEdit(row, col, $event)"
-                        (keydown.enter)="startEdit(row, col, $event)"
-                        [attr.data-row-index]="rowIdx"
-                        [attr.data-column-index]="colIdx"
-                        [class.jv-grid-keyboard-cell]="resolvedOptions().keyboardNavigation"
-                        [attr.tabindex]="cellTabIndex(rowIdx, colIdx, col)"
-                        (focus)="onCellFocus(rowIdx, colIdx)"
-                        (keydown.f2)="onCellF2($event, rowIdx, colIdx)"
-                        (keydown)="onCellKeydown($event, rowIdx, colIdx)"
-                      >
-                        @if (isEditingCell(row, col)) {
-                          @if (editType(col) === 'select' && col.editOptions) {
-                            <jv-select
-                              [options]="getEditOptions(col)"
-                              [modelValue]="getEditValue(row, col)"
-                              (selectionChange)="onEditValueChange(row, col, $event)"
-                            />
-                          } @else if (editType(col) === 'boolean') {
-                            <input
-                              type="checkbox"
-                              class="jv-grid-checkbox"
-                              [checked]="getBooleanEditValue(row, col)"
-                              (change)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.escape)="cancelEdit()"
-                              [attr.aria-label]="col.header"
-                            />
-                          } @else {
-                            <input
-                              class="jv-grid-edit-input"
-                              [type]="inputType(col)"
-                              [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.escape)="cancelEdit()"
-                            />
-                          }
-                        } @else {
-                          @let value = getCellValue(row, col);
-                          @if (col.type === 'boolean') {
-                            @if (isBooleanTrue(value)) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" [attr.aria-label]="t('grid.booleanYes')">{{ t('grid.booleanYes') }}</span>
-                            } @else {
-                              <span class="jv-grid-boolean jv-grid-boolean-false" [attr.aria-label]="t('grid.booleanNo')">{{ t('grid.booleanNo') }}</span>
-                            }
-                          } @else if (col.format) {
-                            {{ col.format(value, row) }}
-                          } @else {
-                            {{ formatValue(value, col, row) }}
-                          }
-                        }
-                      </td>
-                    }
-                    @if (actions().length > 0) {
-                      <td
-                        class="jv-grid-td jv-grid-td-actions"
-                        [class.jv-grid-td-sticky-right]="resolvedOptions().stickyColumns"
-                      >
-                        <div class="jv-grid-actions-group">
-                          @for (action of actions(); track action.id) {
-                            <jv-button
-                              [variant]="actionVariant(action.variant)"
-                              [icon]="action.icon ?? null"
-                              [disabled]="action.disabled?.(row) ?? false"
-                              [attr.aria-label]="action.label"
-                              [title]="action.label"
-                              (click)="onActionClick(action, row); $event.stopPropagation()"
-                            ></jv-button>
-                          }
-                        </div>
-                      </td>
-                    }
-                  </tr>
-                }
-              }
-            </tbody>
-          </table>
-        </div>
-      }
-
-      @if (resolvedOptions().pageable && !virtualScrollEnabled() && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
-        <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
-          <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
-            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
-          </div>
-            <div class="jv-grid-pagination-controls">
-              @if (pageSizeOptions().length > 0) {
-                <jv-select
-                  [options]="pageSizeOptions()"
-                  [modelValue]="pageSizeStr()"
-                  [ariaLabel]="t('grid.itemsPerPage')"
-                  (selectionChange)="onPageSizeChange($event)"
-                />
-              }
-              <jv-button
-              variant="outline"
-              icon="chevrons-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(0)"
-              [attr.aria-label]="t('grid.pageFirst')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevron-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(pageIndex() - 1)"
-              [attr.aria-label]="t('grid.pagePrev')"
-            ></jv-button>
-            @for (p of pageRange(); track p) {
-              <jv-button
-                [variant]="p === pageIndex() ? 'primary' : 'outline'"
-                [attr.aria-current]="p === pageIndex() ? 'page' : null"
-                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })"
-                (click)="goToPage(p)"
-              >{{ p + 1 }}</jv-button>
-            }
-            <jv-button
-              variant="outline"
-              icon="chevron-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(pageIndex() + 1)"
-              [attr.aria-label]="t('grid.pageNext')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevrons-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(effectiveTotalPages() - 1)"
-              [attr.aria-label]="t('grid.pageLast')"
-            ></jv-button>
-          </div>
-        </nav>
-      }
-    </div>
-  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: "<div class=\"jv-grid\" role=\"region\" [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\">\n  @if (resolvedOptions().searchable || resolvedOptions().exportable) {\n    <div class=\"jv-grid-toolbar\">\n      @if (resolvedOptions().searchable) {\n        <div class=\"jv-grid-search\">\n          <jv-icon name=\"search\" [size]=\"16\" />\n          <jv-input\n            [inputId]=\"gridSearchInputId\"\n            [placeholder]=\"t('grid.searchPlaceholder')\"\n            [ngModel]=\"searchTerm()\"\n            (ngModelChange)=\"onSearchInput($event)\"\n          />\n        </div>\n      }\n      @if (resolvedOptions().exportable) {\n        <div class=\"jv-grid-export-actions\">\n          <jv-button variant=\"outline\" icon=\"download\" (click)=\"exportCsv()\">{{\n            t('grid.exportCsv')\n          }}</jv-button>\n          <jv-button variant=\"outline\" icon=\"file-spreadsheet\" (click)=\"exportExcel()\">{{\n            t('grid.exportExcel')\n          }}</jv-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (resolvedOptions().loading) {\n    <div class=\"jv-grid-loading\" role=\"status\" aria-live=\"polite\">\n      <span class=\"jv-grid-spinner\" aria-hidden=\"true\"></span>\n      <span>{{ t('grid.loading') }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"jv-grid-table-wrap\"\n      [class.jv-grid-virtual]=\"virtualScrollEnabled()\"\n      #tableWrap\n      (scroll)=\"onVirtualScroll($any($event.target))\"\n    >\n      @if (virtualScrollEnabled()) {\n        <div class=\"jv-grid-virtual-spacer\" [style.height.px]=\"virtualTotalHeight()\"></div>\n      }\n      <table\n        class=\"jv-grid-table\"\n        role=\"grid\"\n        [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\"\n        [attr.aria-rowcount]=\"effectiveTotalItems()\"\n        [attr.aria-colcount]=\"colspan()\"\n        [class]=\"densityClass()\"\n        [style.position]=\"virtualScrollEnabled() ? 'relative' : null\"\n        [style.top.px]=\"virtualOffsetY()\"\n      >\n        <caption class=\"sr-only\">\n          {{\n            resolvedOptions().ariaLabel || gridLabel()\n          }}\n        </caption>\n\n        @let hasGroupedHeaders = groupedHeaders().length > 0;\n\n        <thead class=\"jv-grid-thead\">\n          @if (hasGroupedHeaders) {\n            <tr>\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"jv-grid-checkbox\"\n                    [checked]=\"allSelected()\"\n                    (change)=\"toggleSelectAll($any($event.target).checked)\"\n                    [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                    [indeterminate]=\"someSelected()\"\n                  />\n                </th>\n              }\n              @for (group of groupedHeaders(); track colKey(group)) {\n                <th\n                  class=\"jv-grid-th\"\n                  [class]=\"group.headerClass || ''\"\n                  [class.jv-grid-th-sticky-left]=\"isStickyLeft(group)\"\n                  [class.jv-grid-th-sticky-right]=\"isStickyRight(group)\"\n                  [attr.colspan]=\"groupColspan(group)\"\n                  scope=\"colgroup\"\n                  [style.text-align]=\"group.align ?? 'start'\"\n                >\n                  <div class=\"jv-grid-th-content\">{{ group.header }}</div>\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n                </th>\n              }\n            </tr>\n          }\n\n          <tr>\n            @if (!hasGroupedHeaders && resolvedOptions().selectable) {\n              <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\">\n                <input\n                  type=\"checkbox\"\n                  class=\"jv-grid-checkbox\"\n                  [checked]=\"allSelected()\"\n                  (change)=\"toggleSelectAll($any($event.target).checked)\"\n                  [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                  [indeterminate]=\"someSelected()\"\n                />\n              </th>\n            }\n            @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n              <th\n                class=\"jv-grid-th\"\n                [class]=\"col.headerClass || ''\"\n                [class.jv-grid-th-sortable]=\"col.sortable !== false && resolvedOptions().sortable\"\n                [class.jv-grid-th-sticky-left]=\"isStickyLeft(col)\"\n                [class.jv-grid-th-sticky-right]=\"isStickyRight(col)\"\n                [class.jv-grid-th-reorderable]=\"resolvedOptions().reorderableColumns\"\n                [style.text-align]=\"col.align ?? 'start'\"\n                [style.width]=\"getColumnWidth(col)\"\n                [style.min-width]=\"col.minWidth || undefined\"\n                [style.max-width]=\"col.maxWidth || undefined\"\n                scope=\"col\"\n                role=\"columnheader\"\n                [attr.data-column-index]=\"colIdx\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.aria-label]=\"getSortLabel(col)\"\n                [tabindex]=\"\n                  resolvedOptions().keyboardNavigation\n                    ? activeCell().column === colIdx\n                      ? 0\n                      : -1\n                    : col.sortable !== false && resolvedOptions().sortable\n                      ? 0\n                      : -1\n                \"\n                (click)=\"toggleSort(col)\"\n                (focus)=\"onHeaderFocus(colIdx)\"\n                (keydown)=\"onHeaderKeydown($event, colIdx)\"\n                (keydown.enter)=\"toggleSort(col)\"\n                (keydown.space)=\"toggleSort(col, $event)\"\n                draggable=\"{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}\"\n                (dragstart)=\"onDragStart($event, colIdx)\"\n                (dragover)=\"onDragOver($event, colIdx)\"\n                (drop)=\"onDrop($event, colIdx)\"\n                (dragend)=\"onDragEnd($event)\"\n              >\n                <div class=\"jv-grid-th-content\">\n                  <span>{{ col.header }}</span>\n                  @if (col.sortable !== false && resolvedOptions().sortable) {\n                    <span class=\"jv-grid-sort-icon\" aria-hidden=\"true\">\n                      @if (sortState().columnKey === colKey(col)) {\n                        @if (sortState().direction === 'asc') {\n                          \u25B2\n                        }\n                        @if (sortState().direction === 'desc') {\n                          \u25BC\n                        }\n                      }\n                    </span>\n                  }\n                </div>\n                @if (isColumnResizable(col)) {\n                  <div\n                    class=\"jv-grid-resize-handle\"\n                    (mousedown)=\"onResizeStart($event, col, colIdx)\"\n                  ></div>\n                }\n              </th>\n            }\n            @if (!hasGroupedHeaders && actions().length > 0) {\n              <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\">\n                <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n              </th>\n            }\n          </tr>\n\n          @if (resolvedOptions().columnFilters) {\n            <tr class=\"jv-grid-filter-row\">\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\"></th>\n              }\n              @for (col of visibleColumns(); track colKey(col)) {\n                <th class=\"jv-grid-th jv-grid-th-filter\">\n                  @if (col.filterable !== false) {\n                    <input\n                      class=\"jv-grid-filter-input\"\n                      [placeholder]=\"t('grid.filterPlaceholder')\"\n                      [attr.aria-label]=\"t('grid.filterForColumn', { column: col.header })\"\n                      [ngModel]=\"colFilters()[colKey(col)]?.value ?? ''\"\n                      (ngModelChange)=\"onColumnFilterChange(col, $event)\"\n                    />\n                  }\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\"></th>\n              }\n            </tr>\n          }\n        </thead>\n\n        <tbody class=\"jv-grid-tbody\">\n          @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}\n              </td>\n            </tr>\n          } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}\n              </td>\n            </tr>\n          } @else {\n            @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {\n              <tr\n                class=\"jv-grid-tr\"\n                role=\"row\"\n                [class.jv-grid-tr-editing]=\"isRowEditing(row)\"\n                [class.jv-grid-tr-selected]=\"isSelected(row)\"\n                [attr.aria-selected]=\"resolvedOptions().selectable ? isSelected(row) : null\"\n                (click)=\"onRowClick(row)\"\n                (dblclick)=\"onRowDblClick(row)\"\n                (keydown.enter)=\"onRowClick(row)\"\n                (keydown.space)=\"onRowClick($event, row)\"\n                [tabindex]=\"-1\"\n              >\n                @if (resolvedOptions().selectable) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-select\"\n                    [class.jv-grid-td-sticky-left]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"jv-grid-checkbox\"\n                      [checked]=\"isSelected(row)\"\n                      (change)=\"toggleRow(row); $event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"getRowLabel(row, $index)\"\n                    />\n                  </td>\n                }\n                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n                  <td\n                    class=\"jv-grid-td\"\n                    [attr.role]=\"resolvedOptions().keyboardNavigation ? 'gridcell' : null\"\n                    [class]=\"col.cellClass || ''\"\n                    [class.jv-grid-td-sticky-left]=\"isStickyLeft(col)\"\n                    [class.jv-grid-td-sticky-right]=\"isStickyRight(col)\"\n                    [class.jv-grid-td-editable]=\"isCellEditable(col)\"\n                    [style.text-align]=\"col.align ?? 'start'\"\n                    (dblclick)=\"startEdit(row, col, $event)\"\n                    (keydown.enter)=\"startEdit(row, col, $event)\"\n                    [attr.data-row-index]=\"rowIdx\"\n                    [attr.data-column-index]=\"colIdx\"\n                    [class.jv-grid-keyboard-cell]=\"resolvedOptions().keyboardNavigation\"\n                    [attr.tabindex]=\"cellTabIndex(rowIdx, colIdx, col)\"\n                    (focus)=\"onCellFocus(rowIdx, colIdx)\"\n                    (keydown.f2)=\"onCellF2($event, rowIdx, colIdx)\"\n                    (keydown)=\"onCellKeydown($event, rowIdx, colIdx)\"\n                  >\n                    @if (isEditingCell(row, col)) {\n                      @if (editType(col) === 'select' && col.editOptions) {\n                        <jv-select\n                          [options]=\"getEditOptions(col)\"\n                          [modelValue]=\"getEditValue(row, col)\"\n                          (selectionChange)=\"onEditValueChange(row, col, $event)\"\n                        />\n                      } @else if (editType(col) === 'boolean') {\n                        <input\n                          type=\"checkbox\"\n                          class=\"jv-grid-checkbox\"\n                          [checked]=\"getBooleanEditValue(row, col)\"\n                          (change)=\"\n                            commitEdit(\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                          [attr.aria-label]=\"col.header\"\n                        />\n                      } @else {\n                        <input\n                          class=\"jv-grid-edit-input\"\n                          [type]=\"inputType(col)\"\n                          [value]=\"getEditValue(row, col)\"\n                          (blur)=\"\n                            commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).value)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                        />\n                      }\n                    } @else {\n                      @let value = getCellValue(row, col);\n                      @if (col.type === 'boolean') {\n                        @if (isBooleanTrue(value)) {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-true\"\n                            [attr.aria-label]=\"t('grid.booleanYes')\"\n                            >{{ t('grid.booleanYes') }}</span\n                          >\n                        } @else {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-false\"\n                            [attr.aria-label]=\"t('grid.booleanNo')\"\n                            >{{ t('grid.booleanNo') }}</span\n                          >\n                        }\n                      } @else if (col.format) {\n                        {{ col.format(value, row) }}\n                      } @else {\n                        {{ formatValue(value, col, row) }}\n                      }\n                    }\n                  </td>\n                }\n                @if (actions().length > 0) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-actions\"\n                    [class.jv-grid-td-sticky-right]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <div class=\"jv-grid-actions-group\">\n                      @for (action of actions(); track action.id) {\n                        <jv-button\n                          [variant]=\"actionVariant(action.variant)\"\n                          [icon]=\"action.icon ?? null\"\n                          [disabled]=\"action.disabled?.(row) ?? false\"\n                          [attr.aria-label]=\"action.label\"\n                          [title]=\"action.label\"\n                          (click)=\"onActionClick(action, row); $event.stopPropagation()\"\n                        ></jv-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  @if (\n    resolvedOptions().pageable &&\n    !virtualScrollEnabled() &&\n    effectiveTotalPages() > 1 &&\n    !resolvedOptions().loading\n  ) {\n    <nav\n      class=\"jv-grid-pagination\"\n      role=\"navigation\"\n      [attr.aria-label]=\"t('grid.paginationLabel', { label: '' })\"\n    >\n      <div class=\"jv-grid-pagination-info\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{\n          t('grid.itemsShowing', {\n            start: pageStart(),\n            end: pageEnd(),\n            total: effectiveTotalItems(),\n          })\n        }}\n      </div>\n      <div class=\"jv-grid-pagination-controls\">\n        @if (pageSizeOptions().length > 0) {\n          <jv-select\n            [options]=\"pageSizeOptions()\"\n            [modelValue]=\"pageSizeStr()\"\n            [ariaLabel]=\"t('grid.itemsPerPage')\"\n            (selectionChange)=\"onPageSizeChange($event)\"\n          />\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(0)\"\n          [attr.aria-label]=\"t('grid.pageFirst')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(pageIndex() - 1)\"\n          [attr.aria-label]=\"t('grid.pagePrev')\"\n        ></jv-button>\n        @for (p of pageRange(); track p) {\n          <jv-button\n            [variant]=\"p === pageIndex() ? 'primary' : 'outline'\"\n            [attr.aria-current]=\"p === pageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })\"\n            (click)=\"goToPage(p)\"\n            >{{ p + 1 }}</jv-button\n          >\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(pageIndex() + 1)\"\n          [attr.aria-label]=\"t('grid.pageNext')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(effectiveTotalPages() - 1)\"\n          [attr.aria-label]=\"t('grid.pageLast')\"\n        ></jv-button>\n      </div>\n    </nav>\n  }\n</div>\n", styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-grid', standalone: true, imports: [FormsModule, JvButtonComponent, JvIconComponent, JvInputComponent, JvSelectComponent], template: `
-    <div class="jv-grid" role="region" [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()">
-      @if (resolvedOptions().searchable || resolvedOptions().exportable) {
-        <div class="jv-grid-toolbar">
-          @if (resolvedOptions().searchable) {
-            <div class="jv-grid-search">
-              <jv-icon name="search" [size]="16" />
-              <jv-input
-                [inputId]="gridSearchInputId"
-                [placeholder]="t('grid.searchPlaceholder')"
-                [ngModel]="searchTerm()"
-                (ngModelChange)="onSearchInput($event)"
-              />
-            </div>
-          }
-          @if (resolvedOptions().exportable) {
-            <div class="jv-grid-export-actions">
-              <jv-button variant="outline" icon="download" (click)="exportCsv()">{{ t('grid.exportCsv') }}</jv-button>
-              <jv-button variant="outline" icon="file-spreadsheet" (click)="exportExcel()">{{ t('grid.exportExcel') }}</jv-button>
-            </div>
-          }
-        </div>
-      }
-
-      @if (resolvedOptions().loading) {
-        <div class="jv-grid-loading" role="status" aria-live="polite">
-          <span class="jv-grid-spinner" aria-hidden="true"></span>
-          <span>{{ t('grid.loading') }}</span>
-        </div>
-      } @else {
-        <div
-          class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="virtualScrollEnabled()"
-          #tableWrap
-          (scroll)="onVirtualScroll($any($event.target))"
-        >
-          @if (virtualScrollEnabled()) {
-            <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
-          }
-          <table
-            class="jv-grid-table"
-            role="grid"
-            [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
-            [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="colspan()"
-            [class]="densityClass()"
-            [style.position]="virtualScrollEnabled() ? 'relative' : null"
-            [style.top.px]="virtualOffsetY()"
-          >
-            <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
-
-            @let hasGroupedHeaders = groupedHeaders().length > 0;
-
-            <thead class="jv-grid-thead">
-              @if (hasGroupedHeaders) {
-                <tr>
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select" scope="col" [attr.rowspan]="2">
-                      <input
-                        type="checkbox"
-                        class="jv-grid-checkbox"
-                        [checked]="allSelected()"
-                        (change)="toggleSelectAll($any($event.target).checked)"
-                        [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                        [indeterminate]="someSelected()"
-                      />
-                    </th>
-                  }
-                  @for (group of groupedHeaders(); track colKey(group)) {
-                    <th
-                      class="jv-grid-th"
-                      [class]="group.headerClass || ''"
-                      [class.jv-grid-th-sticky-left]="isStickyLeft(group)"
-                      [class.jv-grid-th-sticky-right]="isStickyRight(group)"
-                      [attr.colspan]="groupColspan(group)"
-                      scope="colgroup"
-                      [style.text-align]="group.align ?? 'start'"
-                    >
-                      <div class="jv-grid-th-content">{{ group.header }}</div>
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions" scope="col" [attr.rowspan]="2">
-                      <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                    </th>
-                  }
-                </tr>
-              }
-
-              <tr>
-                @if (!hasGroupedHeaders && resolvedOptions().selectable) {
-                  <th class="jv-grid-th jv-grid-th-select" scope="col">
-                    <input
-                      type="checkbox"
-                      class="jv-grid-checkbox"
-                      [checked]="allSelected()"
-                      (change)="toggleSelectAll($any($event.target).checked)"
-                      [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                      [indeterminate]="someSelected()"
-                    />
-                  </th>
-                }
-                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                  <th
-                    class="jv-grid-th"
-                    [class]="col.headerClass || ''"
-                    [class.jv-grid-th-sortable]="col.sortable !== false && resolvedOptions().sortable"
-                    [class.jv-grid-th-sticky-left]="isStickyLeft(col)"
-                    [class.jv-grid-th-sticky-right]="isStickyRight(col)"
-                    [class.jv-grid-th-reorderable]="resolvedOptions().reorderableColumns"
-                    [style.text-align]="col.align ?? 'start'"
-                    [style.width]="getColumnWidth(col)"
-                    [style.min-width]="col.minWidth || undefined"
-                    [style.max-width]="col.maxWidth || undefined"
-                     scope="col"
-                     role="columnheader"
-                     [attr.data-column-index]="colIdx"
-                     [attr.aria-sort]="getAriaSort(col)"
-                     [attr.aria-label]="getSortLabel(col)"
-                     [tabindex]="resolvedOptions().keyboardNavigation ? (activeCell().column === colIdx ? 0 : -1) : (col.sortable !== false && resolvedOptions().sortable ? 0 : -1)"
-                     (click)="toggleSort(col)"
-                     (focus)="onHeaderFocus(colIdx)"
-                     (keydown)="onHeaderKeydown($event, colIdx)"
-                     (keydown.enter)="toggleSort(col)"
-                    (keydown.space)="toggleSort(col, $event)"
-                    draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
-                    (dragstart)="onDragStart($event, colIdx)"
-                    (dragover)="onDragOver($event, colIdx)"
-                    (drop)="onDrop($event, colIdx)"
-                    (dragend)="onDragEnd($event)"
-                  >
-                    <div class="jv-grid-th-content">
-                      <span>{{ col.header }}</span>
-                      @if (col.sortable !== false && resolvedOptions().sortable) {
-                        <span class="jv-grid-sort-icon" aria-hidden="true">
-                          @if (sortState().columnKey === colKey(col)) {
-                            @if (sortState().direction === 'asc') { ▲ }
-                            @if (sortState().direction === 'desc') { ▼ }
-                          }
-                        </span>
-                      }
-                    </div>
-                    @if (isColumnResizable(col)) {
-                      <div
-                        class="jv-grid-resize-handle"
-                        (mousedown)="onResizeStart($event, col, colIdx)"
-                      ></div>
-                    }
-                  </th>
-                }
-                @if (!hasGroupedHeaders && actions().length > 0) {
-                  <th class="jv-grid-th jv-grid-th-actions" scope="col">
-                    <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                  </th>
-                }
-              </tr>
-
-              @if (resolvedOptions().columnFilters) {
-                <tr class="jv-grid-filter-row">
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select"></th>
-                  }
-                  @for (col of visibleColumns(); track colKey(col)) {
-                    <th class="jv-grid-th jv-grid-th-filter">
-                      @if (col.filterable !== false) {
-                        <input
-                          class="jv-grid-filter-input"
-                          [placeholder]="t('grid.filterPlaceholder')"
-                          [attr.aria-label]="t('grid.filterForColumn', { column: col.header })"
-                          [ngModel]="colFilters()[colKey(col)]?.value ?? ''"
-                          (ngModelChange)="onColumnFilterChange(col, $event)"
-                        />
-                      }
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions"></th>
-                  }
-                </tr>
-              }
-            </thead>
-
-            <tbody class="jv-grid-tbody">
-              @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}
-                  </td>
-                </tr>
-              } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}
-                  </td>
-                </tr>
-              } @else {
-                @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {
-                  <tr
-                    class="jv-grid-tr"
-                    role="row"
-                    [class.jv-grid-tr-editing]="isRowEditing(row)"
-                    [class.jv-grid-tr-selected]="isSelected(row)"
-                    [attr.aria-selected]="resolvedOptions().selectable ? isSelected(row) : null"
-                    (click)="onRowClick(row)"
-                    (dblclick)="onRowDblClick(row)"
-                    (keydown.enter)="onRowClick(row)"
-                    (keydown.space)="onRowClick($event, row)"
-                    [tabindex]="-1"
-                  >
-                    @if (resolvedOptions().selectable) {
-                      <td
-                        class="jv-grid-td jv-grid-td-select"
-                        [class.jv-grid-td-sticky-left]="resolvedOptions().stickyColumns"
-                      >
-                        <input
-                          type="checkbox"
-                          class="jv-grid-checkbox"
-                          [checked]="isSelected(row)"
-                          (change)="toggleRow(row); $event.stopPropagation()"
-                          (keydown.space)="$event.stopPropagation()"
-                          [attr.aria-label]="getRowLabel(row, $index)"
-                        />
-                      </td>
-                    }
-                    @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                      <td
-                        class="jv-grid-td"
-                        [attr.role]="resolvedOptions().keyboardNavigation ? 'gridcell' : null"
-                        [class]="col.cellClass || ''"
-                        [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
-                        [class.jv-grid-td-sticky-right]="isStickyRight(col)"
-                        [class.jv-grid-td-editable]="isCellEditable(col)"
-                        [style.text-align]="col.align ?? 'start'"
-                        (dblclick)="startEdit(row, col, $event)"
-                        (keydown.enter)="startEdit(row, col, $event)"
-                        [attr.data-row-index]="rowIdx"
-                        [attr.data-column-index]="colIdx"
-                        [class.jv-grid-keyboard-cell]="resolvedOptions().keyboardNavigation"
-                        [attr.tabindex]="cellTabIndex(rowIdx, colIdx, col)"
-                        (focus)="onCellFocus(rowIdx, colIdx)"
-                        (keydown.f2)="onCellF2($event, rowIdx, colIdx)"
-                        (keydown)="onCellKeydown($event, rowIdx, colIdx)"
-                      >
-                        @if (isEditingCell(row, col)) {
-                          @if (editType(col) === 'select' && col.editOptions) {
-                            <jv-select
-                              [options]="getEditOptions(col)"
-                              [modelValue]="getEditValue(row, col)"
-                              (selectionChange)="onEditValueChange(row, col, $event)"
-                            />
-                          } @else if (editType(col) === 'boolean') {
-                            <input
-                              type="checkbox"
-                              class="jv-grid-checkbox"
-                              [checked]="getBooleanEditValue(row, col)"
-                              (change)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.escape)="cancelEdit()"
-                              [attr.aria-label]="col.header"
-                            />
-                          } @else {
-                            <input
-                              class="jv-grid-edit-input"
-                              [type]="inputType(col)"
-                              [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.escape)="cancelEdit()"
-                            />
-                          }
-                        } @else {
-                          @let value = getCellValue(row, col);
-                          @if (col.type === 'boolean') {
-                            @if (isBooleanTrue(value)) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" [attr.aria-label]="t('grid.booleanYes')">{{ t('grid.booleanYes') }}</span>
-                            } @else {
-                              <span class="jv-grid-boolean jv-grid-boolean-false" [attr.aria-label]="t('grid.booleanNo')">{{ t('grid.booleanNo') }}</span>
-                            }
-                          } @else if (col.format) {
-                            {{ col.format(value, row) }}
-                          } @else {
-                            {{ formatValue(value, col, row) }}
-                          }
-                        }
-                      </td>
-                    }
-                    @if (actions().length > 0) {
-                      <td
-                        class="jv-grid-td jv-grid-td-actions"
-                        [class.jv-grid-td-sticky-right]="resolvedOptions().stickyColumns"
-                      >
-                        <div class="jv-grid-actions-group">
-                          @for (action of actions(); track action.id) {
-                            <jv-button
-                              [variant]="actionVariant(action.variant)"
-                              [icon]="action.icon ?? null"
-                              [disabled]="action.disabled?.(row) ?? false"
-                              [attr.aria-label]="action.label"
-                              [title]="action.label"
-                              (click)="onActionClick(action, row); $event.stopPropagation()"
-                            ></jv-button>
-                          }
-                        </div>
-                      </td>
-                    }
-                  </tr>
-                }
-              }
-            </tbody>
-          </table>
-        </div>
-      }
-
-      @if (resolvedOptions().pageable && !virtualScrollEnabled() && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
-        <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
-          <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
-            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
-          </div>
-            <div class="jv-grid-pagination-controls">
-              @if (pageSizeOptions().length > 0) {
-                <jv-select
-                  [options]="pageSizeOptions()"
-                  [modelValue]="pageSizeStr()"
-                  [ariaLabel]="t('grid.itemsPerPage')"
-                  (selectionChange)="onPageSizeChange($event)"
-                />
-              }
-              <jv-button
-              variant="outline"
-              icon="chevrons-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(0)"
-              [attr.aria-label]="t('grid.pageFirst')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevron-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(pageIndex() - 1)"
-              [attr.aria-label]="t('grid.pagePrev')"
-            ></jv-button>
-            @for (p of pageRange(); track p) {
-              <jv-button
-                [variant]="p === pageIndex() ? 'primary' : 'outline'"
-                [attr.aria-current]="p === pageIndex() ? 'page' : null"
-                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })"
-                (click)="goToPage(p)"
-              >{{ p + 1 }}</jv-button>
-            }
-            <jv-button
-              variant="outline"
-              icon="chevron-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(pageIndex() + 1)"
-              [attr.aria-label]="t('grid.pageNext')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevrons-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(effectiveTotalPages() - 1)"
-              [attr.aria-label]="t('grid.pageLast')"
-            ></jv-button>
-          </div>
-        </nav>
-      }
-    </div>
-  `, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"] }]
+            args: [{ selector: 'jv-grid', standalone: true, imports: [FormsModule, JvButtonComponent, JvIconComponent, JvInputComponent, JvSelectComponent], template: "<div class=\"jv-grid\" role=\"region\" [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\">\n  @if (resolvedOptions().searchable || resolvedOptions().exportable) {\n    <div class=\"jv-grid-toolbar\">\n      @if (resolvedOptions().searchable) {\n        <div class=\"jv-grid-search\">\n          <jv-icon name=\"search\" [size]=\"16\" />\n          <jv-input\n            [inputId]=\"gridSearchInputId\"\n            [placeholder]=\"t('grid.searchPlaceholder')\"\n            [ngModel]=\"searchTerm()\"\n            (ngModelChange)=\"onSearchInput($event)\"\n          />\n        </div>\n      }\n      @if (resolvedOptions().exportable) {\n        <div class=\"jv-grid-export-actions\">\n          <jv-button variant=\"outline\" icon=\"download\" (click)=\"exportCsv()\">{{\n            t('grid.exportCsv')\n          }}</jv-button>\n          <jv-button variant=\"outline\" icon=\"file-spreadsheet\" (click)=\"exportExcel()\">{{\n            t('grid.exportExcel')\n          }}</jv-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (resolvedOptions().loading) {\n    <div class=\"jv-grid-loading\" role=\"status\" aria-live=\"polite\">\n      <span class=\"jv-grid-spinner\" aria-hidden=\"true\"></span>\n      <span>{{ t('grid.loading') }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"jv-grid-table-wrap\"\n      [class.jv-grid-virtual]=\"virtualScrollEnabled()\"\n      #tableWrap\n      (scroll)=\"onVirtualScroll($any($event.target))\"\n    >\n      @if (virtualScrollEnabled()) {\n        <div class=\"jv-grid-virtual-spacer\" [style.height.px]=\"virtualTotalHeight()\"></div>\n      }\n      <table\n        class=\"jv-grid-table\"\n        role=\"grid\"\n        [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\"\n        [attr.aria-rowcount]=\"effectiveTotalItems()\"\n        [attr.aria-colcount]=\"colspan()\"\n        [class]=\"densityClass()\"\n        [style.position]=\"virtualScrollEnabled() ? 'relative' : null\"\n        [style.top.px]=\"virtualOffsetY()\"\n      >\n        <caption class=\"sr-only\">\n          {{\n            resolvedOptions().ariaLabel || gridLabel()\n          }}\n        </caption>\n\n        @let hasGroupedHeaders = groupedHeaders().length > 0;\n\n        <thead class=\"jv-grid-thead\">\n          @if (hasGroupedHeaders) {\n            <tr>\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"jv-grid-checkbox\"\n                    [checked]=\"allSelected()\"\n                    (change)=\"toggleSelectAll($any($event.target).checked)\"\n                    [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                    [indeterminate]=\"someSelected()\"\n                  />\n                </th>\n              }\n              @for (group of groupedHeaders(); track colKey(group)) {\n                <th\n                  class=\"jv-grid-th\"\n                  [class]=\"group.headerClass || ''\"\n                  [class.jv-grid-th-sticky-left]=\"isStickyLeft(group)\"\n                  [class.jv-grid-th-sticky-right]=\"isStickyRight(group)\"\n                  [attr.colspan]=\"groupColspan(group)\"\n                  scope=\"colgroup\"\n                  [style.text-align]=\"group.align ?? 'start'\"\n                >\n                  <div class=\"jv-grid-th-content\">{{ group.header }}</div>\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n                </th>\n              }\n            </tr>\n          }\n\n          <tr>\n            @if (!hasGroupedHeaders && resolvedOptions().selectable) {\n              <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\">\n                <input\n                  type=\"checkbox\"\n                  class=\"jv-grid-checkbox\"\n                  [checked]=\"allSelected()\"\n                  (change)=\"toggleSelectAll($any($event.target).checked)\"\n                  [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                  [indeterminate]=\"someSelected()\"\n                />\n              </th>\n            }\n            @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n              <th\n                class=\"jv-grid-th\"\n                [class]=\"col.headerClass || ''\"\n                [class.jv-grid-th-sortable]=\"col.sortable !== false && resolvedOptions().sortable\"\n                [class.jv-grid-th-sticky-left]=\"isStickyLeft(col)\"\n                [class.jv-grid-th-sticky-right]=\"isStickyRight(col)\"\n                [class.jv-grid-th-reorderable]=\"resolvedOptions().reorderableColumns\"\n                [style.text-align]=\"col.align ?? 'start'\"\n                [style.width]=\"getColumnWidth(col)\"\n                [style.min-width]=\"col.minWidth || undefined\"\n                [style.max-width]=\"col.maxWidth || undefined\"\n                scope=\"col\"\n                role=\"columnheader\"\n                [attr.data-column-index]=\"colIdx\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.aria-label]=\"getSortLabel(col)\"\n                [tabindex]=\"\n                  resolvedOptions().keyboardNavigation\n                    ? activeCell().column === colIdx\n                      ? 0\n                      : -1\n                    : col.sortable !== false && resolvedOptions().sortable\n                      ? 0\n                      : -1\n                \"\n                (click)=\"toggleSort(col)\"\n                (focus)=\"onHeaderFocus(colIdx)\"\n                (keydown)=\"onHeaderKeydown($event, colIdx)\"\n                (keydown.enter)=\"toggleSort(col)\"\n                (keydown.space)=\"toggleSort(col, $event)\"\n                draggable=\"{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}\"\n                (dragstart)=\"onDragStart($event, colIdx)\"\n                (dragover)=\"onDragOver($event, colIdx)\"\n                (drop)=\"onDrop($event, colIdx)\"\n                (dragend)=\"onDragEnd($event)\"\n              >\n                <div class=\"jv-grid-th-content\">\n                  <span>{{ col.header }}</span>\n                  @if (col.sortable !== false && resolvedOptions().sortable) {\n                    <span class=\"jv-grid-sort-icon\" aria-hidden=\"true\">\n                      @if (sortState().columnKey === colKey(col)) {\n                        @if (sortState().direction === 'asc') {\n                          \u25B2\n                        }\n                        @if (sortState().direction === 'desc') {\n                          \u25BC\n                        }\n                      }\n                    </span>\n                  }\n                </div>\n                @if (isColumnResizable(col)) {\n                  <div\n                    class=\"jv-grid-resize-handle\"\n                    (mousedown)=\"onResizeStart($event, col, colIdx)\"\n                  ></div>\n                }\n              </th>\n            }\n            @if (!hasGroupedHeaders && actions().length > 0) {\n              <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\">\n                <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n              </th>\n            }\n          </tr>\n\n          @if (resolvedOptions().columnFilters) {\n            <tr class=\"jv-grid-filter-row\">\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\"></th>\n              }\n              @for (col of visibleColumns(); track colKey(col)) {\n                <th class=\"jv-grid-th jv-grid-th-filter\">\n                  @if (col.filterable !== false) {\n                    <input\n                      class=\"jv-grid-filter-input\"\n                      [placeholder]=\"t('grid.filterPlaceholder')\"\n                      [attr.aria-label]=\"t('grid.filterForColumn', { column: col.header })\"\n                      [ngModel]=\"colFilters()[colKey(col)]?.value ?? ''\"\n                      (ngModelChange)=\"onColumnFilterChange(col, $event)\"\n                    />\n                  }\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\"></th>\n              }\n            </tr>\n          }\n        </thead>\n\n        <tbody class=\"jv-grid-tbody\">\n          @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}\n              </td>\n            </tr>\n          } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}\n              </td>\n            </tr>\n          } @else {\n            @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {\n              <tr\n                class=\"jv-grid-tr\"\n                role=\"row\"\n                [class.jv-grid-tr-editing]=\"isRowEditing(row)\"\n                [class.jv-grid-tr-selected]=\"isSelected(row)\"\n                [attr.aria-selected]=\"resolvedOptions().selectable ? isSelected(row) : null\"\n                (click)=\"onRowClick(row)\"\n                (dblclick)=\"onRowDblClick(row)\"\n                (keydown.enter)=\"onRowClick(row)\"\n                (keydown.space)=\"onRowClick($event, row)\"\n                [tabindex]=\"-1\"\n              >\n                @if (resolvedOptions().selectable) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-select\"\n                    [class.jv-grid-td-sticky-left]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"jv-grid-checkbox\"\n                      [checked]=\"isSelected(row)\"\n                      (change)=\"toggleRow(row); $event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"getRowLabel(row, $index)\"\n                    />\n                  </td>\n                }\n                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n                  <td\n                    class=\"jv-grid-td\"\n                    [attr.role]=\"resolvedOptions().keyboardNavigation ? 'gridcell' : null\"\n                    [class]=\"col.cellClass || ''\"\n                    [class.jv-grid-td-sticky-left]=\"isStickyLeft(col)\"\n                    [class.jv-grid-td-sticky-right]=\"isStickyRight(col)\"\n                    [class.jv-grid-td-editable]=\"isCellEditable(col)\"\n                    [style.text-align]=\"col.align ?? 'start'\"\n                    (dblclick)=\"startEdit(row, col, $event)\"\n                    (keydown.enter)=\"startEdit(row, col, $event)\"\n                    [attr.data-row-index]=\"rowIdx\"\n                    [attr.data-column-index]=\"colIdx\"\n                    [class.jv-grid-keyboard-cell]=\"resolvedOptions().keyboardNavigation\"\n                    [attr.tabindex]=\"cellTabIndex(rowIdx, colIdx, col)\"\n                    (focus)=\"onCellFocus(rowIdx, colIdx)\"\n                    (keydown.f2)=\"onCellF2($event, rowIdx, colIdx)\"\n                    (keydown)=\"onCellKeydown($event, rowIdx, colIdx)\"\n                  >\n                    @if (isEditingCell(row, col)) {\n                      @if (editType(col) === 'select' && col.editOptions) {\n                        <jv-select\n                          [options]=\"getEditOptions(col)\"\n                          [modelValue]=\"getEditValue(row, col)\"\n                          (selectionChange)=\"onEditValueChange(row, col, $event)\"\n                        />\n                      } @else if (editType(col) === 'boolean') {\n                        <input\n                          type=\"checkbox\"\n                          class=\"jv-grid-checkbox\"\n                          [checked]=\"getBooleanEditValue(row, col)\"\n                          (change)=\"\n                            commitEdit(\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                          [attr.aria-label]=\"col.header\"\n                        />\n                      } @else {\n                        <input\n                          class=\"jv-grid-edit-input\"\n                          [type]=\"inputType(col)\"\n                          [value]=\"getEditValue(row, col)\"\n                          (blur)=\"\n                            commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).value)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                        />\n                      }\n                    } @else {\n                      @let value = getCellValue(row, col);\n                      @if (col.type === 'boolean') {\n                        @if (isBooleanTrue(value)) {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-true\"\n                            [attr.aria-label]=\"t('grid.booleanYes')\"\n                            >{{ t('grid.booleanYes') }}</span\n                          >\n                        } @else {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-false\"\n                            [attr.aria-label]=\"t('grid.booleanNo')\"\n                            >{{ t('grid.booleanNo') }}</span\n                          >\n                        }\n                      } @else if (col.format) {\n                        {{ col.format(value, row) }}\n                      } @else {\n                        {{ formatValue(value, col, row) }}\n                      }\n                    }\n                  </td>\n                }\n                @if (actions().length > 0) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-actions\"\n                    [class.jv-grid-td-sticky-right]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <div class=\"jv-grid-actions-group\">\n                      @for (action of actions(); track action.id) {\n                        <jv-button\n                          [variant]=\"actionVariant(action.variant)\"\n                          [icon]=\"action.icon ?? null\"\n                          [disabled]=\"action.disabled?.(row) ?? false\"\n                          [attr.aria-label]=\"action.label\"\n                          [title]=\"action.label\"\n                          (click)=\"onActionClick(action, row); $event.stopPropagation()\"\n                        ></jv-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  @if (\n    resolvedOptions().pageable &&\n    !virtualScrollEnabled() &&\n    effectiveTotalPages() > 1 &&\n    !resolvedOptions().loading\n  ) {\n    <nav\n      class=\"jv-grid-pagination\"\n      role=\"navigation\"\n      [attr.aria-label]=\"t('grid.paginationLabel', { label: '' })\"\n    >\n      <div class=\"jv-grid-pagination-info\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{\n          t('grid.itemsShowing', {\n            start: pageStart(),\n            end: pageEnd(),\n            total: effectiveTotalItems(),\n          })\n        }}\n      </div>\n      <div class=\"jv-grid-pagination-controls\">\n        @if (pageSizeOptions().length > 0) {\n          <jv-select\n            [options]=\"pageSizeOptions()\"\n            [modelValue]=\"pageSizeStr()\"\n            [ariaLabel]=\"t('grid.itemsPerPage')\"\n            (selectionChange)=\"onPageSizeChange($event)\"\n          />\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(0)\"\n          [attr.aria-label]=\"t('grid.pageFirst')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(pageIndex() - 1)\"\n          [attr.aria-label]=\"t('grid.pagePrev')\"\n        ></jv-button>\n        @for (p of pageRange(); track p) {\n          <jv-button\n            [variant]=\"p === pageIndex() ? 'primary' : 'outline'\"\n            [attr.aria-current]=\"p === pageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })\"\n            (click)=\"goToPage(p)\"\n            >{{ p + 1 }}</jv-button\n          >\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(pageIndex() + 1)\"\n          [attr.aria-label]=\"t('grid.pageNext')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(effectiveTotalPages() - 1)\"\n          [attr.aria-label]=\"t('grid.pageLast')\"\n        ></jv-button>\n      </div>\n    </nav>\n  }\n</div>\n", styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnFilter: [{ type: i0.Output, args: ["columnFilter"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }] } });
 
 class JvPaginationComponent {
@@ -26274,5 +25956,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDayPlannerComponent, JvDayPlannerDetailDirective, JvDayPlannerItemDirective, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvImageGalleryComponent, JvImageSliderComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvMonthCalendarComponent, JvMonthCalendarDayDirective, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, JvWindowModalComponent, provideJvUi };
+export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDayPlannerComponent, JvDayPlannerDetailDirective, JvDayPlannerItemDirective, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvImageGalleryComponent, JvImageSliderComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvMonthCalendarComponent, JvMonthCalendarDayDirective, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTopbarMenuComponent, JvTranslationService, JvWindowModalComponent, provideJvUi };
 //# sourceMappingURL=devjuliovilla-jv-ui.mjs.map