ngx-dev-toolbar 2.0.0 → 2.0.2

package/fesm2022/ngx-dev-toolbar.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, Component, ChangeDetectionStrategy, input, inject, ElementRef, output, ViewEncapsulation, ViewChild, ContentChild, model, DestroyRef } from '@angular/core';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { signal, computed, Injectable, ChangeDetectionStrategy, Component, input, inject, ElementRef, output, viewChild, contentChild, model, DestroyRef, effect, ViewEncapsulation } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -10,7 +11,6 @@ import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/cdk/menu';
 import { CdkMenuModule } from '@angular/cdk/menu';
-import { CommonModule } from '@angular/common';
 
 class DevToolbarStateService {
     constructor() {
@@ -21,6 +21,7 @@ class DevToolbarStateService {
             delay: 3000,
             error: null,
             theme: 'dark',
+            config: {},
         });
         // Selectors
         this.isVisible = computed(() => !this.state().isHidden || this.hasActiveTool());
@@ -33,6 +34,7 @@ class DevToolbarStateService {
          * The delay to hide the toolbar
          */
         this.delay = computed(() => this.state().delay);
+        this.config = computed(() => this.state().config);
     }
     // State updates
     setVisibility(isVisible) {
@@ -82,10 +84,16 @@ class DevToolbarStateService {
             isHidden: !state.isHidden,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, providedIn: 'root' }); }
+    setConfig(config) {
+        this.state.update((state) => ({
+            ...state,
+            config,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarStateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -93,8 +101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class AngularIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AngularIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AngularIconComponent, isStandalone: true, selector: "ndt-angular-icon", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: AngularIconComponent, isStandalone: true, selector: "ndt-angular-icon", ngImport: i0, template: `
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
       <defs>
         <linearGradient
@@ -122,7 +130,7 @@ class AngularIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AngularIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-angular-icon',
@@ -162,8 +170,8 @@ class BoltIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BoltIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: BoltIconComponent, isStandalone: true, selector: "ndt-bolt-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BoltIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: BoltIconComponent, isStandalone: true, selector: "ndt-bolt-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -181,7 +189,7 @@ class BoltIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BoltIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BoltIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-bolt-icon',
@@ -211,8 +219,8 @@ class BugIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BugIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: BugIconComponent, isStandalone: true, selector: "ndt-bug-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BugIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: BugIconComponent, isStandalone: true, selector: "ndt-bug-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -226,7 +234,7 @@ class BugIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BugIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BugIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-bug-icon',
@@ -252,8 +260,8 @@ class CodeIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: CodeIconComponent, isStandalone: true, selector: "ndt-code-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: CodeIconComponent, isStandalone: true, selector: "ndt-code-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -268,7 +276,7 @@ class CodeIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CodeIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CodeIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-code-icon',
@@ -295,8 +303,8 @@ class DatabaseIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatabaseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DatabaseIconComponent, isStandalone: true, selector: "ndt-database-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DatabaseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DatabaseIconComponent, isStandalone: true, selector: "ndt-database-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -314,7 +322,7 @@ class DatabaseIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatabaseIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DatabaseIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-database-icon',
@@ -344,8 +352,8 @@ class DiscordIconComponent {
     constructor() {
         this.fill = input('#000000');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiscordIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DiscordIconComponent, isStandalone: true, selector: "ndt-discord-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DiscordIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DiscordIconComponent, isStandalone: true, selector: "ndt-discord-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -359,7 +367,7 @@ class DiscordIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiscordIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DiscordIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-discord-icon',
@@ -385,8 +393,8 @@ class DocsIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DocsIconComponent, isStandalone: true, selector: "ndt-docs-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DocsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DocsIconComponent, isStandalone: true, selector: "ndt-docs-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -400,7 +408,7 @@ class DocsIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocsIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DocsIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-docs-icon',
@@ -426,8 +434,8 @@ class ExportIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExportIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ExportIconComponent, isStandalone: true, selector: "ndt-export-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ExportIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ExportIconComponent, isStandalone: true, selector: "ndt-export-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -441,7 +449,7 @@ class ExportIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExportIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ExportIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-export-icon',
@@ -467,8 +475,8 @@ class FilterIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: FilterIconComponent, isStandalone: true, selector: "ndt-filter-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: FilterIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: FilterIconComponent, isStandalone: true, selector: "ndt-filter-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -486,7 +494,7 @@ class FilterIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: FilterIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-filter-icon',
@@ -516,8 +524,8 @@ class GaugeIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GaugeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: GaugeIconComponent, isStandalone: true, selector: "ndt-gauge-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GaugeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: GaugeIconComponent, isStandalone: true, selector: "ndt-gauge-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -535,7 +543,7 @@ class GaugeIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GaugeIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GaugeIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-gauge-icon',
@@ -565,8 +573,8 @@ class GearIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GearIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: GearIconComponent, isStandalone: true, selector: "ndt-gear-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GearIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: GearIconComponent, isStandalone: true, selector: "ndt-gear-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -584,7 +592,7 @@ class GearIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GearIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GearIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-gear-icon',
@@ -614,8 +622,8 @@ class GitBranchIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GitBranchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: GitBranchIconComponent, isStandalone: true, selector: "ndt-git-branch-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GitBranchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: GitBranchIconComponent, isStandalone: true, selector: "ndt-git-branch-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -633,7 +641,7 @@ class GitBranchIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GitBranchIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GitBranchIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-git-branch-icon',
@@ -663,8 +671,8 @@ class ImportIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ImportIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ImportIconComponent, isStandalone: true, selector: "ndt-import-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ImportIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ImportIconComponent, isStandalone: true, selector: "ndt-import-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -678,7 +686,7 @@ class ImportIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ImportIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ImportIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-import-icon',
@@ -704,8 +712,8 @@ class LayoutIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LayoutIconComponent, isStandalone: true, selector: "ndt-layout-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LayoutIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LayoutIconComponent, isStandalone: true, selector: "ndt-layout-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -720,7 +728,7 @@ class LayoutIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LayoutIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-layout-icon',
@@ -747,8 +755,8 @@ class LightbulbIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightbulbIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LightbulbIconComponent, isStandalone: true, selector: "ndt-lightbulb-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LightbulbIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LightbulbIconComponent, isStandalone: true, selector: "ndt-lightbulb-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -762,7 +770,7 @@ class LightbulbIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightbulbIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LightbulbIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-lightbulb-icon',
@@ -788,8 +796,8 @@ class LightingIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LightingIconComponent, isStandalone: true, selector: "ndt-lighting-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LightingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LightingIconComponent, isStandalone: true, selector: "ndt-lighting-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -804,7 +812,7 @@ class LightingIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightingIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LightingIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-lighting-icon',
@@ -831,8 +839,8 @@ class LockIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LockIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LockIconComponent, isStandalone: true, selector: "ndt-lock-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LockIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LockIconComponent, isStandalone: true, selector: "ndt-lock-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -846,7 +854,7 @@ class LockIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LockIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LockIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-lock-icon',
@@ -872,8 +880,8 @@ class MoonIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: MoonIconComponent, isStandalone: true, selector: "ndt-moon-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: MoonIconComponent, isStandalone: true, selector: "ndt-moon-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -891,7 +899,7 @@ class MoonIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MoonIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MoonIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-moon-icon',
@@ -921,8 +929,8 @@ class NetworkIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NetworkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: NetworkIconComponent, isStandalone: true, selector: "ndt-network-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NetworkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: NetworkIconComponent, isStandalone: true, selector: "ndt-network-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -940,7 +948,7 @@ class NetworkIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NetworkIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NetworkIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-network-icon',
@@ -970,8 +978,8 @@ class PuzzleIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PuzzleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: PuzzleIconComponent, isStandalone: true, selector: "ndt-puzzle-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PuzzleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: PuzzleIconComponent, isStandalone: true, selector: "ndt-puzzle-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -989,7 +997,7 @@ class PuzzleIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PuzzleIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PuzzleIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-puzzle-icon',
@@ -1019,8 +1027,8 @@ class RefreshIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RefreshIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: RefreshIconComponent, isStandalone: true, selector: "ndt-refresh-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RefreshIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: RefreshIconComponent, isStandalone: true, selector: "ndt-refresh-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1038,7 +1046,7 @@ class RefreshIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RefreshIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RefreshIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-refresh-icon',
@@ -1068,8 +1076,8 @@ class StarIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: StarIconComponent, isStandalone: true, selector: "ndt-star-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: StarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: StarIconComponent, isStandalone: true, selector: "ndt-star-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1087,7 +1095,7 @@ class StarIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StarIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: StarIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-star-icon',
@@ -1117,8 +1125,8 @@ class SunIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SunIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SunIconComponent, isStandalone: true, selector: "ndt-sun-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SunIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SunIconComponent, isStandalone: true, selector: "ndt-sun-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1136,7 +1144,7 @@ class SunIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SunIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SunIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-sun-icon',
@@ -1166,8 +1174,8 @@ class TerminalIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TerminalIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TerminalIconComponent, isStandalone: true, selector: "ndt-terminal-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TerminalIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: TerminalIconComponent, isStandalone: true, selector: "ndt-terminal-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1185,7 +1193,7 @@ class TerminalIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TerminalIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TerminalIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-terminal-icon',
@@ -1215,8 +1223,8 @@ class ToggleLeftIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ToggleLeftIconComponent, isStandalone: true, selector: "ndt-toggle-left-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToggleLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToggleLeftIconComponent, isStandalone: true, selector: "ndt-toggle-left-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1234,7 +1242,7 @@ class ToggleLeftIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleLeftIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToggleLeftIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-toggle-left-icon',
@@ -1264,8 +1272,8 @@ class TranslateIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TranslateIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TranslateIconComponent, isStandalone: true, selector: "ndt-translate-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TranslateIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: TranslateIconComponent, isStandalone: true, selector: "ndt-translate-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1279,7 +1287,7 @@ class TranslateIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TranslateIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TranslateIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-translate-icon',
@@ -1305,8 +1313,8 @@ class TrashIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TrashIconComponent, isStandalone: true, selector: "ndt-trash-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: TrashIconComponent, isStandalone: true, selector: "ndt-trash-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1320,7 +1328,7 @@ class TrashIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TrashIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TrashIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-trash-icon',
@@ -1346,8 +1354,8 @@ class UsersIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UsersIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: UsersIconComponent, isStandalone: true, selector: "ndt-users-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: UsersIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: UsersIconComponent, isStandalone: true, selector: "ndt-users-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg
       [attr.fill]="fill()"
       xmlns="http://www.w3.org/2000/svg"
@@ -1365,7 +1373,7 @@ class UsersIconComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UsersIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: UsersIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-users-icon',
@@ -1397,8 +1405,8 @@ class DevToolbarIconComponent {
         this.name = input.required();
         this.fill = computed(() => this.stateService.theme() === 'dark' ? '#FFFFFF' : '#000000');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarIconComponent, isStandalone: true, selector: "ndt-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarIconComponent, isStandalone: true, selector: "ndt-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @switch (name()) { @case ('angular') {
     <ndt-angular-icon />
     } @case ('bolt') {
@@ -1458,7 +1466,7 @@ class DevToolbarIconComponent {
     } }
   `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ndt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ndt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ndt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ndt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ndt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ndt-discord-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ndt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ndt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ndt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ndt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ndt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ndt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ndt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ndt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ndt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ndt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ndt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ndt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ndt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ndt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ndt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ndt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ndt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ndt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ndt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ndt-icon',
@@ -1556,6 +1564,206 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+/**
+ * Container component for displaying lists of items with consistent scrolling,
+ * empty states, and layout across all tools.
+ *
+ * @example
+ * ```html
+ * <ndt-list
+ *   [hasItems]="items().length > 0"
+ *   [hasResults]="filteredItems().length > 0"
+ *   emptyMessage="No items found"
+ *   noResultsMessage="No items match your filter"
+ * >
+ *   @for (item of filteredItems(); track item.id) {
+ *     <ndt-list-item ... />
+ *   }
+ * </ndt-list>
+ * ```
+ */
+class DevToolbarListComponent {
+    constructor() {
+        /**
+         * Whether the list has any items at all (before filtering).
+         * When false, shows the emptyMessage.
+         */
+        this.hasItems = input(true);
+        /**
+         * Whether the list has any results after filtering.
+         * When false (but hasItems is true), shows the noResultsMessage.
+         */
+        this.hasResults = input(true);
+        /**
+         * Message to display when there are no items at all.
+         * @example "No feature flags found"
+         */
+        this.emptyMessage = input('No items found');
+        /**
+         * Optional hint text to display below the empty message.
+         * @example "Call setAvailableOptions() to configure features"
+         */
+        this.emptyHint = input(undefined);
+        /**
+         * Message to display when items exist but none match the current filter.
+         * @example "No flags match your filter"
+         */
+        this.noResultsMessage = input('No results match your filter');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarListComponent, isStandalone: true, selector: "ndt-list", inputs: { hasItems: { classPropertyName: "hasItems", publicName: "hasItems", isSignal: true, isRequired: false, transformFunction: null }, hasResults: { classPropertyName: "hasResults", publicName: "hasResults", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!hasItems()) {
+      <div class="empty-state">
+        <p>{{ emptyMessage() }}</p>
+        @if (emptyHint()) {
+          <p class="hint">{{ emptyHint() }}</p>
+        }
+      </div>
+    } @else if (!hasResults()) {
+      <div class="empty-state">
+        <p>{{ noResultsMessage() }}</p>
+      </div>
+    } @else {
+      <div class="list-container">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:flex;flex-direction:column;flex:1;min-height:0}.empty-state{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty-state p{margin:0}.empty-state .hint{font-size:var(--ndt-font-size-xs)}.list-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.list-container::-webkit-scrollbar{width:8px;height:8px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.list-container::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-list', standalone: true, imports: [CommonModule], template: `
+    @if (!hasItems()) {
+      <div class="empty-state">
+        <p>{{ emptyMessage() }}</p>
+        @if (emptyHint()) {
+          <p class="hint">{{ emptyHint() }}</p>
+        }
+      </div>
+    } @else if (!hasResults()) {
+      <div class="empty-state">
+        <p>{{ noResultsMessage() }}</p>
+      </div>
+    } @else {
+      <div class="list-container">
+        <ng-content />
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:flex;flex-direction:column;flex:1;min-height:0}.empty-state{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty-state p{margin:0}.empty-state .hint{font-size:var(--ndt-font-size-xs)}.list-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.list-container::-webkit-scrollbar{width:8px;height:8px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.list-container::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}\n"] }]
+        }] });
+
+/**
+ * List item component with consistent layout, dot badge indicator,
+ * and forced state highlighting.
+ *
+ * @example
+ * ```html
+ * <ndt-list-item
+ *   title="Analytics Dashboard"
+ *   description="Advanced reporting tools"
+ *   [isForced]="false"
+ *   [currentValue]="true"
+ *   [originalValue]="undefined"
+ * >
+ *   <ndt-select ... />
+ * </ndt-list-item>
+ * ```
+ */
+class DevToolbarListItemComponent {
+    constructor() {
+        /**
+         * Display title for the list item
+         * @example "Analytics Dashboard"
+         */
+        this.title = input.required();
+        /**
+         * Optional description text
+         * @example "Advanced reporting and data visualization tools"
+         */
+        this.description = input(undefined);
+        /**
+         * Whether this item's state is forced via the dev toolbar
+         */
+        this.isForced = input(false);
+        /**
+         * Current enabled/granted state of the item
+         */
+        this.currentValue = input.required();
+        /**
+         * Original value before forcing (only present when isForced is true)
+         */
+        this.originalValue = input(undefined);
+        /**
+         * Value to display in the dot indicator.
+         * For forced items: shows originalValue
+         * For non-forced items: shows currentValue
+         */
+        this.displayValue = computed(() => {
+            const originalValue = this.originalValue();
+            return this.isForced() && originalValue !== undefined
+                ? originalValue
+                : this.currentValue();
+        });
+        /**
+         * Tooltip text explaining the indicator state
+         */
+        this.tooltipText = computed(() => {
+            const value = this.displayValue();
+            const state = value ? 'enabled' : 'disabled';
+            if (this.isForced() && this.originalValue() !== undefined) {
+                return `Originally: ${state}`;
+            }
+            return `Current state: ${state}`;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarListItemComponent, isStandalone: true, selector: "ndt-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isForced: { classPropertyName: "isForced", publicName: "isForced", isSignal: true, isRequired: false, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, originalValue: { classPropertyName: "originalValue", publicName: "originalValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="list-item" [class.list-item--forced]="isForced()">
+      <div class="info">
+        <h3>{{ title() }}</h3>
+        @if (description()) {
+          <div class="description-wrapper">
+            <span
+              class="dot-indicator"
+              [class.dot-indicator--on]="displayValue()"
+              [class.dot-indicator--off]="!displayValue()"
+              [title]="tooltipText()"
+            ></span>
+            <p>{{ description() }}</p>
+          </div>
+        }
+      </div>
+      <div class="actions">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.list-item{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease}.list-item.list-item--forced{background:#3b82f60d;border-left:2px solid rgba(59,130,246,.3);padding-left:calc(var(--ndt-spacing-md) - 2px)}.list-item .info{flex:0 0 65%}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:center;gap:8px;margin-top:4px}.list-item .info .dot-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease}.list-item .info .dot-indicator.dot-indicator--on{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.list-item .info .dot-indicator.dot-indicator--off{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.list-item .info p{margin:0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);flex:1}.list-item .actions{flex:0 0 35%;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-list-item', standalone: true, imports: [CommonModule], template: `
+    <div class="list-item" [class.list-item--forced]="isForced()">
+      <div class="info">
+        <h3>{{ title() }}</h3>
+        @if (description()) {
+          <div class="description-wrapper">
+            <span
+              class="dot-indicator"
+              [class.dot-indicator--on]="displayValue()"
+              [class.dot-indicator--off]="!displayValue()"
+              [title]="tooltipText()"
+            ></span>
+            <p>{{ description() }}</p>
+          </div>
+        }
+      </div>
+      <div class="actions">
+        <ng-content />
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.list-item{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease}.list-item.list-item--forced{background:#3b82f60d;border-left:2px solid rgba(59,130,246,.3);padding-left:calc(var(--ndt-spacing-md) - 2px)}.list-item .info{flex:0 0 65%}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:center;gap:8px;margin-top:4px}.list-item .info .dot-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease}.list-item .info .dot-indicator.dot-indicator--on{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.list-item .info .dot-indicator.dot-indicator--off{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.list-item .info p{margin:0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);flex:1}.list-item .actions{flex:0 0 35%;display:flex;align-items:flex-start}\n"] }]
+        }] });
+
 class DevToolbarToolButtonComponent {
     constructor() {
         // Injects
@@ -1596,8 +1804,8 @@ class DevToolbarToolButtonComponent {
     onBlur() {
         this.isFocused.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarToolButtonComponent, isStandalone: true, selector: "ndt-tool-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, toolId: { classPropertyName: "toolId", publicName: "toolId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarToolButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarToolButtonComponent, isStandalone: true, selector: "ndt-tool-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, toolId: { classPropertyName: "toolId", publicName: "toolId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open" }, ngImport: i0, template: `
     <button
       class="tool-button"
       [class.tool-button--active]="isActive()"
@@ -1618,7 +1826,7 @@ class DevToolbarToolButtonComponent {
       }
       <ng-content />
     </button>
-  `, isInline: true, styles: [".tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"], animations: [
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"], animations: [
             trigger('tooltipAnimation', [
                 state('hidden', style({
                     opacity: 0,
@@ -1633,7 +1841,7 @@ class DevToolbarToolButtonComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarToolButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-tool-button', standalone: true, template: `
     <button
@@ -1669,20 +1877,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             transition('hidden => visible', [animate('200ms ease-out')]),
                             transition('visible => hidden', [animate('150ms ease-in')]),
                         ]),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"] }]
         }] });
 
 class DevToolbarWindowComponent {
     constructor() {
         this.devToolbarStateService = inject(DevToolbarStateService);
         this.config = input.required();
-        this.close = output();
+        this.closed = output();
         this.maximize = output();
         this.minimize = output();
         this.theme = computed(() => this.devToolbarStateService.theme());
     }
     onClose() {
-        this.close.emit();
+        this.closed.emit();
     }
     onMaximize() {
         this.maximize.emit();
@@ -1690,9 +1898,9 @@ class DevToolbarWindowComponent {
     onMinimize() {
         this.minimize.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarWindowComponent, isStandalone: true, selector: "ndt-window", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", maximize: "maximize", minimize: "minimize" }, ngImport: i0, template: `
-    <div class="window dev-toolbar" [attr.data-theme]="theme()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarWindowComponent, isStandalone: true, selector: "ndt-window", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", maximize: "maximize", minimize: "minimize" }, ngImport: i0, template: `
+    <div class="ndt-window" [attr.data-theme]="theme()">
       <div class="header">
         <div class="header__content">
           <div class="header__title">
@@ -1729,12 +1937,12 @@ class DevToolbarWindowComponent {
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarWindowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-window', standalone: true, encapsulation: ViewEncapsulation.ShadowDom, template: `
-    <div class="window dev-toolbar" [attr.data-theme]="theme()">
+            args: [{ selector: 'ndt-window', standalone: true, template: `
+    <div class="ndt-window" [attr.data-theme]="theme()">
       <div class="header">
         <div class="header__content">
           <div class="header__title">
@@ -1771,12 +1979,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
         }] });
 
 class DevToolbarToolComponent {
     constructor() {
         this.state = inject(DevToolbarStateService);
+        this.buttonContainer = viewChild.required('buttonContainer');
+        this.buttonComponent = contentChild(DevToolbarToolButtonComponent);
         this.options = input.required();
         this.icon = input.required();
         this.title = input.required();
@@ -1832,14 +2042,14 @@ class DevToolbarToolComponent {
         this.state.setActiveTool(null);
     }
     getButtonContainerXPosition() {
-        const buttonContainerRect = this.buttonContainer?.nativeElement?.getBoundingClientRect();
+        const buttonContainerRect = this.buttonContainer()?.nativeElement?.getBoundingClientRect();
         return buttonContainerRect?.left ?? 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarToolComponent, isStandalone: true, selector: "ndt-toolbar-tool", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "buttonComponent", first: true, predicate: DevToolbarToolButtonComponent, descendants: true }], viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true }], ngImport: i0, template: `
-    <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarToolComponent, isStandalone: true, selector: "ndt-toolbar-tool", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "buttonComponent", first: true, predicate: DevToolbarToolButtonComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #trigger="cdkOverlayOrigin" class="ndt-toolbar-tool" cdkOverlayOrigin>
       <div
-        class="dev-toolbar-tool__icon"
+        class="ndt-toolbar-tool__icon"
         (click)="onOpen()"
         (keydown.enter)="onOpen()"
         (keydown.space)="onOpen()"
@@ -1864,15 +2074,16 @@ class DevToolbarToolComponent {
         [cdkConnectedOverlayPositions]="positions()"
         [cdkConnectedOverlayWidth]="width()"
         [cdkConnectedOverlayHeight]="height()"
+        [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-tool-overlay']"
         cdkConnectedOverlay
       >
-        <ndt-window [@slideAnimation] [config]="options()" (close)="onClose()">
+        <ndt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
           <ng-content />
         </ndt-window>
       </ng-template>
       }
     </div>
-  `, isInline: true, styles: [".tool{position:relative}.trigger{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: DevToolbarWindowComponent, selector: "ndt-window", inputs: ["config"], outputs: ["close", "maximize", "minimize"] }, { kind: "component", type: DevToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["title", "toolId"], outputs: ["open"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], animations: [
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: DevToolbarWindowComponent, selector: "ndt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: DevToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["title", "toolId"], outputs: ["open"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], animations: [
             trigger('slideAnimation', [
                 transition(':enter', [
                     style({
@@ -1897,7 +2108,7 @@ class DevToolbarToolComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-toolbar-tool', standalone: true, imports: [
                         CdkConnectedOverlay,
@@ -1906,9 +2117,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarToolButtonComponent,
                         DevToolbarIconComponent,
                     ], template: `
-    <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
+    <div #trigger="cdkOverlayOrigin" class="ndt-toolbar-tool" cdkOverlayOrigin>
       <div
-        class="dev-toolbar-tool__icon"
+        class="ndt-toolbar-tool__icon"
         (click)="onOpen()"
         (keydown.enter)="onOpen()"
         (keydown.space)="onOpen()"
@@ -1933,9 +2144,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         [cdkConnectedOverlayPositions]="positions()"
         [cdkConnectedOverlayWidth]="width()"
         [cdkConnectedOverlayHeight]="height()"
+        [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-tool-overlay']"
         cdkConnectedOverlay
       >
-        <ndt-window [@slideAnimation] [config]="options()" (close)="onClose()">
+        <ndt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
           <ng-content />
         </ndt-window>
       </ng-template>
@@ -1964,14 +2176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                                 })),
                             ]),
                         ]),
-                    ], styles: [".tool{position:relative}.trigger{cursor:pointer}\n"] }]
-        }], propDecorators: { buttonContainer: [{
-                type: ViewChild,
-                args: ['buttonContainer']
-            }], buttonComponent: [{
-                type: ContentChild,
-                args: [DevToolbarToolButtonComponent]
-            }] } });
+                    ], styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"] }]
+        }] });
 
 class DevToolbarInputComponent {
     constructor() {
@@ -1981,8 +2187,8 @@ class DevToolbarInputComponent {
         this.ariaLabel = input('');
         this.inputClass = input('input');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarInputComponent, isStandalone: true, selector: "ndt-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DevToolbarInputComponent, isStandalone: true, selector: "ndt-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
     <input
       [attr.aria-label]="ariaLabel()"
       [type]="type()"
@@ -1991,9 +2197,9 @@ class DevToolbarInputComponent {
       [placeholder]="placeholder()"
       (ngModelChange)="value.set($event)"
     />
-  `, isInline: true, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
     <input
@@ -2004,7 +2210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       [placeholder]="placeholder()"
       (ngModelChange)="value.set($event)"
     />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
         }] });
 
 class DevToolbarSelectComponent {
@@ -2051,10 +2257,10 @@ class DevToolbarSelectComponent {
         this.value.set(option.value);
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarSelectComponent, isStandalone: true, selector: "ndt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarSelectComponent, isStandalone: true, selector: "ndt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
     <div
-      class="dev-toolbar select"
+      class="ndt-select"
       [class.small]="size() === 'small'"
       [class.open]="isOpen()"
       [attr.aria-label]="ariaLabel()"
@@ -2078,11 +2284,12 @@ class DevToolbarSelectComponent {
       [cdkConnectedOverlayOrigin]="trigger"
       [cdkConnectedOverlayOpen]="isOpen()"
       [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-select-overlay']"
       (overlayOutsideClick)="close()"
     >
       <div
         [id]="selectMenuId"
-        class="dev-toolbar select-menu"
+        class="ndt-select-menu"
         cdkMenu
         role="listbox"
         [attr.data-theme]="theme()"
@@ -2101,13 +2308,13 @@ class DevToolbarSelectComponent {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box}.select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.open .select__arrow{transform:rotate(180deg)}.select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);box-shadow:var(--ndt-shadow-window);color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.select-menu::-webkit-scrollbar{width:8px;height:8px}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:inherit;-webkit-user-select:none;user-select:none;min-width:64px;line-height:36px;padding:0 var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-sm);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-menu-item:hover{background-color:var(--ndt-hover-bg)}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.1);font-weight:500}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:var(--ndt-hover-bg)}.select-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ndt-select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 1px 3px #0000001a}.ndt-select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.ndt-select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.open .select__arrow{transform:rotate(180deg)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.ndt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-sm) 0;border:2px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ndt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ndt-select-menu::-webkit-scrollbar-track{background:transparent}.ndt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.ndt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ndt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md) var(--ndt-spacing-sm) var(--ndt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.5;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ndt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ndt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-select', standalone: true, encapsulation: ViewEncapsulation.ShadowDom, imports: [CommonModule, FormsModule, OverlayModule, CdkMenuModule], template: `
+            args: [{ selector: 'ndt-select', standalone: true, imports: [CommonModule, FormsModule, OverlayModule, CdkMenuModule], template: `
     <div
-      class="dev-toolbar select"
+      class="ndt-select"
       [class.small]="size() === 'small'"
       [class.open]="isOpen()"
       [attr.aria-label]="ariaLabel()"
@@ -2131,11 +2338,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       [cdkConnectedOverlayOrigin]="trigger"
       [cdkConnectedOverlayOpen]="isOpen()"
       [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-select-overlay']"
       (overlayOutsideClick)="close()"
     >
       <div
         [id]="selectMenuId"
-        class="dev-toolbar select-menu"
+        class="ndt-select-menu"
         cdkMenu
         role="listbox"
         [attr.data-theme]="theme()"
@@ -2154,7 +2362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }
       </div>
     </ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box}.select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.open .select__arrow{transform:rotate(180deg)}.select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);box-shadow:var(--ndt-shadow-window);color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.select-menu::-webkit-scrollbar{width:8px;height:8px}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:inherit;-webkit-user-select:none;user-select:none;min-width:64px;line-height:36px;padding:0 var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-sm);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-menu-item:hover{background-color:var(--ndt-hover-bg)}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.1);font-weight:500}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:var(--ndt-hover-bg)}.select-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ndt-select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 1px 3px #0000001a}.ndt-select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.ndt-select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.open .select__arrow{transform:rotate(180deg)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.ndt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-sm) 0;border:2px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ndt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ndt-select-menu::-webkit-scrollbar-track{background:transparent}.ndt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.ndt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ndt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md) var(--ndt-spacing-sm) var(--ndt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.5;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ndt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ndt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"] }]
         }] });
 
 class DevToolsStorageService {
@@ -2222,10 +2430,10 @@ class DevToolsStorageService {
     getToolKey(key) {
         return key.includes(this.PREFIX) ? key : this.PREFIX + key;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolsStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolsStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolsStorageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2398,6 +2606,7 @@ class DevToolbarInternalAppFeaturesService {
                 ...feature,
                 isEnabled: isInEnabled ? true : isInDisabled ? false : feature.isEnabled,
                 isForced,
+                originalValue: isForced ? feature.isEnabled : undefined,
             };
         });
     }
@@ -2452,10 +2661,10 @@ class DevToolbarInternalAppFeaturesService {
             this.saveForcedFeatures(cleanedState);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalAppFeaturesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalAppFeaturesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2484,7 +2693,7 @@ class DevToolbarAppFeaturesToolComponent {
         this.features = this.appFeaturesService.features;
         this.hasNoFeatures = computed(() => this.features().length === 0);
         this.filteredFeatures = computed(() => {
-            return this.features().filter((feature) => {
+            const filtered = this.features().filter((feature) => {
                 const searchTerm = this.searchQuery().toLowerCase();
                 const featureName = feature.name.toLowerCase();
                 const featureDescription = feature.description?.toLowerCase() ?? '';
@@ -2497,6 +2706,8 @@ class DevToolbarAppFeaturesToolComponent {
                     (this.activeFilter() === 'disabled' && !feature.isEnabled);
                 return matchesSearch && matchesFilter;
             });
+            // Sort alphabetically by name
+            return filtered.sort((a, b) => a.name.localeCompare(b.name));
         });
         this.hasNoFilteredFeatures = computed(() => this.filteredFeatures().length === 0);
         // Other properties
@@ -2514,7 +2725,7 @@ class DevToolbarAppFeaturesToolComponent {
             { value: 'disabled', label: 'Disabled' },
         ];
         this.featureValueOptions = [
-            { value: '', label: 'Not Forced' },
+            { value: 'not-forced', label: 'Not Forced' },
             { value: 'off', label: 'Disabled' },
             { value: 'on', label: 'Enabled' },
         ];
@@ -2532,13 +2743,13 @@ class DevToolbarAppFeaturesToolComponent {
     }
     /**
      * Handle feature value change from 3-state dropdown.
-     * - 'not-forced' (empty string): Remove forced override
+     * - 'not-forced': Remove forced override
      * - 'on': Force feature to enabled
      * - 'off': Force feature to disabled
      */
     onFeatureChange(featureId, value) {
         switch (value) {
-            case '':
+            case 'not-forced':
                 this.appFeaturesService.removeFeatureOverride(featureId);
                 break;
             case 'on':
@@ -2568,8 +2779,8 @@ class DevToolbarAppFeaturesToolComponent {
             return '';
         return feature.isEnabled ? 'on' : 'off';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarAppFeaturesToolComponent, isStandalone: true, selector: "ndt-app-features-tool", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarAppFeaturesToolComponent, isStandalone: true, selector: "ndt-app-features-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
       title="App Features"
@@ -2593,42 +2804,36 @@ class DevToolbarAppFeaturesToolComponent {
           </div>
         </div>
 
-        @if (hasNoFeatures()) {
-        <div class="empty">
-          <p>No app features found</p>
-          <small>Call setAvailableOptions() to configure features</small>
-        </div>
-        } @else if (hasNoFilteredFeatures()) {
-        <div class="empty">
-          <p>No features match your filter</p>
-        </div>
-        } @else {
-        <div class="feature-list">
+        <ndt-list
+          [hasItems]="!hasNoFeatures()"
+          [hasResults]="!hasNoFilteredFeatures()"
+          emptyMessage="No app features found"
+          [emptyHint]="'Call setAvailableOptions() to configure features'"
+          noResultsMessage="No features match your filter"
+        >
           @for (feature of filteredFeatures(); track feature.id) {
-          <div class="feature">
-            <div class="info">
-              <h3>{{ feature.name }}</h3>
-              @if (feature.description) {
-              <p>{{ feature.description }}</p>
-              }
-            </div>
-
-            <ndt-select
-              [value]="getFeatureValue(feature)"
-              [options]="featureValueOptions"
-              [ariaLabel]="'Set value for ' + feature.name"
-              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
-              size="small"
-            />
-          </div>
+            <ndt-list-item
+              [title]="feature.name"
+              [description]="feature.description"
+              [isForced]="feature.isForced"
+              [currentValue]="feature.isEnabled"
+              [originalValue]="feature.originalValue"
+            >
+              <ndt-select
+                [value]="getFeatureValue(feature)"
+                [options]="featureValueOptions"
+                [ariaLabel]="'Set value for ' + feature.name"
+                (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+                size="small"
+              />
+            </ndt-list-item>
           }
-        </div>
-        }
+        </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }, { kind: "component", type: DevToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: DevToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-app-features-tool', standalone: true, imports: [
                         FormsModule,
@@ -2636,6 +2841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarInputComponent,
                         DevToolbarSelectComponent,
                         DevToolbarIconComponent,
+                        DevToolbarListComponent,
+                        DevToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
@@ -2660,40 +2867,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
           </div>
         </div>
 
-        @if (hasNoFeatures()) {
-        <div class="empty">
-          <p>No app features found</p>
-          <small>Call setAvailableOptions() to configure features</small>
-        </div>
-        } @else if (hasNoFilteredFeatures()) {
-        <div class="empty">
-          <p>No features match your filter</p>
-        </div>
-        } @else {
-        <div class="feature-list">
+        <ndt-list
+          [hasItems]="!hasNoFeatures()"
+          [hasResults]="!hasNoFilteredFeatures()"
+          emptyMessage="No app features found"
+          [emptyHint]="'Call setAvailableOptions() to configure features'"
+          noResultsMessage="No features match your filter"
+        >
           @for (feature of filteredFeatures(); track feature.id) {
-          <div class="feature">
-            <div class="info">
-              <h3>{{ feature.name }}</h3>
-              @if (feature.description) {
-              <p>{{ feature.description }}</p>
-              }
-            </div>
-
-            <ndt-select
-              [value]="getFeatureValue(feature)"
-              [options]="featureValueOptions"
-              [ariaLabel]="'Set value for ' + feature.name"
-              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
-              size="small"
-            />
-          </div>
+            <ndt-list-item
+              [title]="feature.name"
+              [description]="feature.description"
+              [isForced]="feature.isForced"
+              [currentValue]="feature.isEnabled"
+              [originalValue]="feature.originalValue"
+            >
+              <ndt-select
+                [value]="getFeatureValue(feature)"
+                [options]="featureValueOptions"
+                [ariaLabel]="'Set value for ' + feature.name"
+                (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+                size="small"
+              />
+            </ndt-list-item>
           }
-        </div>
-        }
+        </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
         }] });
 
 class DevToolbarInternalFeatureFlagService {
@@ -2710,15 +2911,19 @@ class DevToolbarInternalFeatureFlagService {
             this.appFlags$,
             this.forcedFlags$,
         ]).pipe(map(([appFlags, { enabled, disabled }]) => {
-            return appFlags.map((flag) => ({
-                ...flag,
-                isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
-                isEnabled: enabled.includes(flag.id)
-                    ? true
-                    : disabled.includes(flag.id)
-                        ? false
-                        : flag.isEnabled,
-            }));
+            return appFlags.map((flag) => {
+                const isForced = enabled.includes(flag.id) || disabled.includes(flag.id);
+                return {
+                    ...flag,
+                    isForced,
+                    isEnabled: enabled.includes(flag.id)
+                        ? true
+                        : disabled.includes(flag.id)
+                            ? false
+                            : flag.isEnabled,
+                    originalValue: isForced ? flag.isEnabled : undefined,
+                };
+            });
         }));
         this.flags = toSignal(this.flags$, { initialValue: [] });
         this.loadForcedFlags();
@@ -2776,10 +2981,10 @@ class DevToolbarInternalFeatureFlagService {
     getCurrentForcedState() {
         return this.forcedFlagsSubject.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalFeatureFlagService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalFeatureFlagService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2794,7 +2999,7 @@ class DevToolbarFeatureFlagsToolComponent {
         this.flags = this.featureFlags.flags;
         this.hasNoFlags = computed(() => this.flags().length === 0);
         this.filteredFlags = computed(() => {
-            return this.flags().filter((flag) => {
+            const filtered = this.flags().filter((flag) => {
                 const searchTerm = this.searchQuery().toLowerCase();
                 const flagName = flag.name.toLowerCase();
                 const flagDescription = flag.description?.toLowerCase() ?? '';
@@ -2807,6 +3012,8 @@ class DevToolbarFeatureFlagsToolComponent {
                     (this.activeFilter() === 'disabled' && !flag.isEnabled);
                 return matchesSearch && matchesFilter;
             });
+            // Sort alphabetically by name
+            return filtered.sort((a, b) => a.name.localeCompare(b.name));
         });
         this.hasNoFilteredFlags = computed(() => this.filteredFlags().length === 0);
         // Other properties
@@ -2859,8 +3066,8 @@ class DevToolbarFeatureFlagsToolComponent {
             return '';
         return flag.isEnabled ? 'on' : 'off';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
       title="Feature Flags"
@@ -2884,39 +3091,35 @@ class DevToolbarFeatureFlagsToolComponent {
           </div>
         </div>
 
-        @if (hasNoFlags()) {
-        <div class="empty">
-          <p>No flags found</p>
-        </div>
-        } @else if (hasNoFilteredFlags()) {
-        <div class="empty">
-          <p>No flags found matching your filter</p>
-        </div>
-        } @else {
-        <div class="flag-list">
+        <ndt-list
+          [hasItems]="!hasNoFlags()"
+          [hasResults]="!hasNoFilteredFlags()"
+          emptyMessage="No flags found"
+          noResultsMessage="No flags found matching your filter"
+        >
           @for (flag of filteredFlags(); track flag.id) {
-          <div class="flag">
-            <div class="info">
-              <h3>{{ flag.name }}</h3>
-              <p>{{ flag?.description }}</p>
-            </div>
-
-            <ndt-select
-              [value]="getFlagValue(flag)"
-              [options]="flagValueOptions"
-              [ariaLabel]="'Set value for ' + flag.name"
-              (valueChange)="onFlagChange(flag.id, $event ?? '')"
-              size="small"
-            />
-          </div>
+            <ndt-list-item
+              [title]="flag.name"
+              [description]="flag.description"
+              [isForced]="flag.isForced"
+              [currentValue]="flag.isEnabled"
+              [originalValue]="flag.originalValue"
+            >
+              <ndt-select
+                [value]="getFlagValue(flag)"
+                [options]="flagValueOptions"
+                [ariaLabel]="'Set value for ' + flag.name"
+                (valueChange)="onFlagChange(flag.id, $event ?? '')"
+                size="small"
+              />
+            </ndt-list-item>
           }
-        </div>
-        }
+        </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }, { kind: "component", type: DevToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: DevToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-feature-flags-tool', standalone: true, imports: [
                         FormsModule,
@@ -2924,6 +3127,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarInputComponent,
                         DevToolbarSelectComponent,
                         DevToolbarIconComponent,
+                        DevToolbarListComponent,
+                        DevToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
@@ -2948,37 +3153,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
           </div>
         </div>
 
-        @if (hasNoFlags()) {
-        <div class="empty">
-          <p>No flags found</p>
-        </div>
-        } @else if (hasNoFilteredFlags()) {
-        <div class="empty">
-          <p>No flags found matching your filter</p>
-        </div>
-        } @else {
-        <div class="flag-list">
+        <ndt-list
+          [hasItems]="!hasNoFlags()"
+          [hasResults]="!hasNoFilteredFlags()"
+          emptyMessage="No flags found"
+          noResultsMessage="No flags found matching your filter"
+        >
           @for (flag of filteredFlags(); track flag.id) {
-          <div class="flag">
-            <div class="info">
-              <h3>{{ flag.name }}</h3>
-              <p>{{ flag?.description }}</p>
-            </div>
-
-            <ndt-select
-              [value]="getFlagValue(flag)"
-              [options]="flagValueOptions"
-              [ariaLabel]="'Set value for ' + flag.name"
-              (valueChange)="onFlagChange(flag.id, $event ?? '')"
-              size="small"
-            />
-          </div>
+            <ndt-list-item
+              [title]="flag.name"
+              [description]="flag.description"
+              [isForced]="flag.isForced"
+              [currentValue]="flag.isEnabled"
+              [originalValue]="flag.originalValue"
+            >
+              <ndt-select
+                [value]="getFlagValue(flag)"
+                [options]="flagValueOptions"
+                [ariaLabel]="'Set value for ' + flag.name"
+                (valueChange)="onFlagChange(flag.id, $event ?? '')"
+                size="small"
+              />
+            </ndt-list-item>
           }
-        </div>
-        }
+        </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
         }] });
 
 class DevToolbarButtonComponent {
@@ -2990,8 +3191,8 @@ class DevToolbarButtonComponent {
         this.ariaLabel = input();
         this.isActive = input(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarButtonComponent, isStandalone: true, selector: "ndt-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarButtonComponent, isStandalone: true, selector: "ndt-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <button
       class="button"
       [attr.aria-label]="ariaLabel()"
@@ -3007,9 +3208,9 @@ class DevToolbarButtonComponent {
       }
       <ng-content />
     </button>
-  `, isInline: true, styles: [".button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-button', standalone: true, imports: [DevToolbarIconComponent], template: `
     <button
@@ -3027,7 +3228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       }
       <ng-content />
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"] }]
         }] });
 
 class DevToolbarCardComponent {
@@ -3038,8 +3239,8 @@ class DevToolbarCardComponent {
     onClick() {
         this.click.set();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DevToolbarCardComponent, isStandalone: true, selector: "ndt-card", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DevToolbarCardComponent, isStandalone: true, selector: "ndt-card", ngImport: i0, template: `
     <div
       class="card"
       role="button"
@@ -3053,9 +3254,9 @@ class DevToolbarCardComponent {
     >
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [".card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-card', standalone: true, template: `
     <div
@@ -3071,7 +3272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     >
       <ng-content></ng-content>
     </div>
-  `, styles: [".card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }]
         }] });
 
 class DevToolbarClickableCardComponent {
@@ -3084,8 +3285,8 @@ class DevToolbarClickableCardComponent {
     onClick() {
         this.click.set();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarClickableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarClickableCardComponent, isStandalone: true, selector: "ndt-clickable-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarClickableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DevToolbarClickableCardComponent, isStandalone: true, selector: "ndt-clickable-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <ndt-card (clicked)="onClick()">
       <div class="clickable-card">
         <div class="clickable-card__icon">
@@ -3097,9 +3298,9 @@ class DevToolbarClickableCardComponent {
         </div>
       </div>
     </ndt-card>
-  `, isInline: true, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "component", type: DevToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }] }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "component", type: DevToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarClickableCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarClickableCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-clickable-card', standalone: true, imports: [DevToolbarCardComponent, DevToolbarIconComponent], template: `
     <ndt-card (clicked)="onClick()">
@@ -3113,7 +3314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         </div>
       </div>
     </ndt-card>
-  `, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
         }] });
 
 class DevToolbarLinkButtonComponent {
@@ -3121,8 +3322,8 @@ class DevToolbarLinkButtonComponent {
         this.url = input.required();
         this.icon = input.required();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarLinkButtonComponent, isStandalone: true, selector: "ndt-link-button", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DevToolbarLinkButtonComponent, isStandalone: true, selector: "ndt-link-button", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <a
       [href]="url()"
       target="_blank"
@@ -3136,9 +3337,9 @@ class DevToolbarLinkButtonComponent {
         <ng-content></ng-content>
       </span>
     </a>
-  `, isInline: true, styles: [".link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }] }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLinkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLinkButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-link-button', standalone: true, imports: [DevToolbarIconComponent], template: `
     <a
@@ -3154,7 +3355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         <ng-content></ng-content>
       </span>
     </a>
-  `, styles: [".link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"] }]
         }] });
 
 class SettingsService {
@@ -3170,10 +3371,10 @@ class SettingsService {
     setSettings(settings) {
         this.storageService.set(this.STORAGE_KEY, settings);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SettingsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3221,11 +3422,6 @@ class DevToolbarHomeToolComponent {
             },
         ];
     }
-    onToggleTheme() {
-        const newTheme = this.state.isDarkTheme() ? 'light' : 'dark';
-        this.settingsService.setSettings({ isDarkMode: newTheme === 'dark' });
-        this.state.setTheme(newTheme);
-    }
     onExportSettings() {
         const settings = this.storageService.getAllSettings();
         const blob = new Blob([JSON.stringify(settings, null, 2)], {
@@ -3268,34 +3464,10 @@ class DevToolbarHomeToolComponent {
         this.storageService.clearAllSettings();
         window.location.reload();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarHomeToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarHomeToolComponent, isStandalone: true, selector: "ndt-home-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarHomeToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarHomeToolComponent, isStandalone: true, selector: "ndt-home-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ndt-toolbar-tool [options]="options" title="Home" icon="angular">
       <section class="settings">
-        <div class="instruction">
-          <div class="instruction__label">
-            <span class="instruction__label-text">Theme</span>
-            <span class="instruction__label-description">
-              Switch between light and dark mode
-            </span>
-          </div>
-          <div class="instruction__control">
-            <div class="instruction__control-button">
-              <ndt-button
-                [isActive]="true"
-                (click)="onToggleTheme()"
-                variant="icon"
-                [ariaLabel]="
-                  state.isDarkTheme()
-                    ? 'Switch to light theme'
-                    : 'Switch to dark theme'
-                "
-                [icon]="state.isDarkTheme() ? 'sun' : 'moon'"
-              />
-            </div>
-          </div>
-        </div>
-
         <div class="settings-container">
           <div class="instruction">
             <div class="instruction__label">
@@ -3340,9 +3512,9 @@ class DevToolbarHomeToolComponent {
         </div>
       </section>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-sm)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: DevToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-sm)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: DevToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarHomeToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarHomeToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-home-tool', standalone: true, imports: [
                         DevToolbarToolComponent,
@@ -3353,30 +3525,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     ], template: `
     <ndt-toolbar-tool [options]="options" title="Home" icon="angular">
       <section class="settings">
-        <div class="instruction">
-          <div class="instruction__label">
-            <span class="instruction__label-text">Theme</span>
-            <span class="instruction__label-description">
-              Switch between light and dark mode
-            </span>
-          </div>
-          <div class="instruction__control">
-            <div class="instruction__control-button">
-              <ndt-button
-                [isActive]="true"
-                (click)="onToggleTheme()"
-                variant="icon"
-                [ariaLabel]="
-                  state.isDarkTheme()
-                    ? 'Switch to light theme'
-                    : 'Switch to dark theme'
-                "
-                [icon]="state.isDarkTheme() ? 'sun' : 'moon'"
-              />
-            </div>
-          </div>
-        </div>
-
         <div class="settings-container">
           <div class="instruction">
             <div class="instruction__label">
@@ -3421,7 +3569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         </div>
       </section>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-sm)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-sm)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
         }] });
 
 class DevToolbarInternalLanguageService {
@@ -3482,10 +3630,10 @@ class DevToolbarInternalLanguageService {
     getCurrentForcedLanguage() {
         return this.forcedLanguage$.value?.id ?? null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalLanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalLanguageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3521,8 +3669,8 @@ class DevToolbarLanguageToolComponent {
             this.languageService.setForcedLanguage(selectedLanguage);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DevToolbarLanguageToolComponent, isStandalone: true, selector: "ndt-language-tool", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLanguageToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DevToolbarLanguageToolComponent, isStandalone: true, selector: "ndt-language-tool", ngImport: i0, template: `
     <ndt-toolbar-tool title="Languages" icon="translate" [options]="options">
       <div class="language-select">
         <label for="language-select">Language</label>
@@ -3535,9 +3683,9 @@ class DevToolbarLanguageToolComponent {
         />
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }] }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLanguageToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-language-tool', standalone: true, imports: [DevToolbarToolComponent, DevToolbarSelectComponent], template: `
     <ndt-toolbar-tool title="Languages" icon="translate" [options]="options">
@@ -3552,7 +3700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         />
       </div>
     </ndt-toolbar-tool>
-  `, styles: [".language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
+  `, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
         }] });
 
 class DevToolbarInternalPermissionsService {
@@ -3569,15 +3717,19 @@ class DevToolbarInternalPermissionsService {
             this.appPermissions$,
             this.forcedState$,
         ]).pipe(map(([appPermissions, { granted, denied }]) => {
-            return appPermissions.map((permission) => ({
-                ...permission,
-                isForced: granted.includes(permission.id) || denied.includes(permission.id),
-                isGranted: granted.includes(permission.id)
-                    ? true
-                    : denied.includes(permission.id)
-                        ? false
-                        : permission.isGranted,
-            }));
+            return appPermissions.map((permission) => {
+                const isForced = granted.includes(permission.id) || denied.includes(permission.id);
+                return {
+                    ...permission,
+                    isForced,
+                    isGranted: granted.includes(permission.id)
+                        ? true
+                        : denied.includes(permission.id)
+                            ? false
+                            : permission.isGranted,
+                    originalValue: isForced ? permission.isGranted : undefined,
+                };
+            });
         }));
         this.permissions = toSignal(this.permissions$, { initialValue: [] });
         this.loadForcedState();
@@ -3645,10 +3797,12 @@ class DevToolbarInternalPermissionsService {
         }
     }
     isValidForcedState(state) {
-        return (state &&
-            typeof state === 'object' &&
-            Array.isArray(state.granted) &&
-            Array.isArray(state.denied));
+        if (!state || typeof state !== 'object') {
+            return false;
+        }
+        const candidate = state;
+        return (Array.isArray(candidate['granted']) &&
+            Array.isArray(candidate['denied']));
     }
     validateAndCleanForcedState(permissions) {
         const currentState = this.forcedStateSubject.value;
@@ -3673,10 +3827,10 @@ class DevToolbarInternalPermissionsService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalPermissionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalPermissionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3691,7 +3845,7 @@ class DevToolbarPermissionsToolComponent {
         this.permissions = this.permissionsService.permissions;
         this.hasNoPermissions = computed(() => this.permissions().length === 0);
         this.filteredPermissions = computed(() => {
-            return this.permissions().filter((permission) => {
+            const filtered = this.permissions().filter((permission) => {
                 const searchTerm = this.searchQuery().toLowerCase();
                 const permissionName = permission.name.toLowerCase();
                 const permissionDescription = permission.description?.toLowerCase() ?? '';
@@ -3704,6 +3858,8 @@ class DevToolbarPermissionsToolComponent {
                     (this.activeFilter() === 'denied' && !permission.isGranted);
                 return matchesSearch && matchesFilter;
             });
+            // Sort alphabetically by name
+            return filtered.sort((a, b) => a.name.localeCompare(b.name));
         });
         this.hasNoFilteredPermissions = computed(() => this.filteredPermissions().length === 0);
         // Other properties
@@ -3756,8 +3912,8 @@ class DevToolbarPermissionsToolComponent {
             return '';
         return permission.isGranted ? 'granted' : 'denied';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarPermissionsToolComponent, isStandalone: true, selector: "ndt-permissions-tool", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPermissionsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarPermissionsToolComponent, isStandalone: true, selector: "ndt-permissions-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
       title="Permissions"
@@ -3783,40 +3939,36 @@ class DevToolbarPermissionsToolComponent {
           </div>
         </div>
 
-        @if (hasNoPermissions()) {
-        <div class="empty">
-          <p>No permissions found</p>
-          <p class="hint">Call setAvailableOptions() to configure permissions</p>
-        </div>
-        } @else if (hasNoFilteredPermissions()) {
-        <div class="empty">
-          <p>No permissions match your filter</p>
-        </div>
-        } @else {
-        <div class="permission-list">
+        <ndt-list
+          [hasItems]="!hasNoPermissions()"
+          [hasResults]="!hasNoFilteredPermissions()"
+          emptyMessage="No permissions found"
+          [emptyHint]="'Call setAvailableOptions() to configure permissions'"
+          noResultsMessage="No permissions match your filter"
+        >
           @for (permission of filteredPermissions(); track permission.id) {
-          <div class="permission">
-            <div class="info">
-              <h3>{{ permission.name }}</h3>
-              <p>{{ permission?.description }}</p>
-            </div>
-
-            <ndt-select
-              [value]="getPermissionValue(permission)"
-              [options]="permissionValueOptions"
-              [ariaLabel]="'Override state for ' + permission.name"
-              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
-              size="small"
-            />
-          </div>
+            <ndt-list-item
+              [title]="permission.name"
+              [description]="permission.description"
+              [isForced]="permission.isForced"
+              [currentValue]="permission.isGranted"
+              [originalValue]="permission.originalValue"
+            >
+              <ndt-select
+                [value]="getPermissionValue(permission)"
+                [options]="permissionValueOptions"
+                [ariaLabel]="'Override state for ' + permission.name"
+                (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+                size="small"
+              />
+            </ndt-list-item>
           }
-        </div>
-        }
+        </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }, { kind: "component", type: DevToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: DevToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPermissionsToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-permissions-tool', standalone: true, imports: [
                         FormsModule,
@@ -3824,6 +3976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarInputComponent,
                         DevToolbarSelectComponent,
                         DevToolbarIconComponent,
+                        DevToolbarListComponent,
+                        DevToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
@@ -3850,38 +4004,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
           </div>
         </div>
 
-        @if (hasNoPermissions()) {
-        <div class="empty">
-          <p>No permissions found</p>
-          <p class="hint">Call setAvailableOptions() to configure permissions</p>
-        </div>
-        } @else if (hasNoFilteredPermissions()) {
-        <div class="empty">
-          <p>No permissions match your filter</p>
-        </div>
-        } @else {
-        <div class="permission-list">
+        <ndt-list
+          [hasItems]="!hasNoPermissions()"
+          [hasResults]="!hasNoFilteredPermissions()"
+          emptyMessage="No permissions found"
+          [emptyHint]="'Call setAvailableOptions() to configure permissions'"
+          noResultsMessage="No permissions match your filter"
+        >
           @for (permission of filteredPermissions(); track permission.id) {
-          <div class="permission">
-            <div class="info">
-              <h3>{{ permission.name }}</h3>
-              <p>{{ permission?.description }}</p>
-            </div>
-
-            <ndt-select
-              [value]="getPermissionValue(permission)"
-              [options]="permissionValueOptions"
-              [ariaLabel]="'Override state for ' + permission.name"
-              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
-              size="small"
-            />
-          </div>
+            <ndt-list-item
+              [title]="permission.name"
+              [description]="permission.description"
+              [isForced]="permission.isForced"
+              [currentValue]="permission.isGranted"
+              [originalValue]="permission.originalValue"
+            >
+              <ndt-select
+                [value]="getPermissionValue(permission)"
+                [options]="permissionValueOptions"
+                [ariaLabel]="'Override state for ' + permission.name"
+                (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+                size="small"
+              />
+            </ndt-list-item>
           }
-        </div>
-        }
+        </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
         }] });
 
 /**
@@ -3905,14 +4055,14 @@ class DevToolbarInternalPresetsService {
     /**
      * Capture current toolbar state as a new preset
      */
-    saveCurrentAsPreset(name, description) {
+    saveCurrentAsPreset(name, description, categoryOptions) {
         const preset = {
             id: this.generateId(),
             name,
             description,
             createdAt: new Date().toISOString(),
             updatedAt: new Date().toISOString(),
-            config: this.captureCurrentConfig(),
+            config: this.captureCurrentConfig(categoryOptions),
         };
         const presets = [...this.presetsSubject.value, preset];
         this.presetsSubject.next(presets);
@@ -3982,12 +4132,42 @@ class DevToolbarInternalPresetsService {
     /**
      * Capture current configuration from all tools
      */
-    captureCurrentConfig() {
+    captureCurrentConfig(categoryOptions) {
+        // Default to including all categories if not specified
+        const options = {
+            includeFeatureFlags: categoryOptions?.includeFeatureFlags ?? true,
+            includePermissions: categoryOptions?.includePermissions ?? true,
+            includeAppFeatures: categoryOptions?.includeAppFeatures ?? true,
+            includeLanguage: categoryOptions?.includeLanguage ?? true,
+        };
+        // Get current forced states
+        const currentFlags = this.featureFlagsService.getCurrentForcedState();
+        const currentPerms = this.permissionsService.getCurrentForcedState();
+        const currentFeatures = this.appFeaturesService.getCurrentForcedState();
+        // Filter by selected IDs if provided
+        const filterById = (ids, selected) => selected && selected.length > 0 ? ids.filter((id) => selected.includes(id)) : ids;
         return {
-            featureFlags: this.featureFlagsService.getCurrentForcedState(),
-            language: this.languageService.getCurrentForcedLanguage(),
-            permissions: this.permissionsService.getCurrentForcedState(),
-            appFeatures: this.appFeaturesService.getCurrentForcedState(),
+            featureFlags: options.includeFeatureFlags
+                ? {
+                    enabled: filterById(currentFlags.enabled, categoryOptions?.selectedFlagIds),
+                    disabled: filterById(currentFlags.disabled, categoryOptions?.selectedFlagIds),
+                }
+                : { enabled: [], disabled: [] },
+            language: options.includeLanguage
+                ? this.languageService.getCurrentForcedLanguage()
+                : null,
+            permissions: options.includePermissions
+                ? {
+                    granted: filterById(currentPerms.granted, categoryOptions?.selectedPermissionIds),
+                    denied: filterById(currentPerms.denied, categoryOptions?.selectedPermissionIds),
+                }
+                : { granted: [], denied: [] },
+            appFeatures: options.includeAppFeatures
+                ? {
+                    enabled: filterById(currentFeatures.enabled, categoryOptions?.selectedFeatureIds),
+                    disabled: filterById(currentFeatures.disabled, categoryOptions?.selectedFeatureIds),
+                }
+                : { enabled: [], disabled: [] },
         };
     }
     /**
@@ -4010,10 +4190,10 @@ class DevToolbarInternalPresetsService {
     generateId() {
         return `preset-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPresetsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalPresetsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPresetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarInternalPresetsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4026,11 +4206,20 @@ class DevToolbarPresetsToolComponent {
         this.permissionsService = inject(DevToolbarInternalPermissionsService);
         this.appFeaturesService = inject(DevToolbarInternalAppFeaturesService);
         this.languageService = inject(DevToolbarInternalLanguageService);
+        this.state = inject(DevToolbarStateService);
         // Signals
         this.viewMode = signal('list');
         this.searchQuery = signal('');
         this.presetName = signal('');
         this.presetDescription = signal('');
+        this.includeFeatureFlags = signal(true);
+        this.includePermissions = signal(true);
+        this.includeAppFeatures = signal(true);
+        this.includeLanguage = signal(true);
+        // Track selected individual items
+        this.selectedFlagIds = signal(new Set());
+        this.selectedPermissionIds = signal(new Set());
+        this.selectedFeatureIds = signal(new Set());
         this.presets = this.presetsService.presets;
         this.filteredPresets = computed(() => {
             const query = this.searchQuery().toLowerCase();
@@ -4039,6 +4228,21 @@ class DevToolbarPresetsToolComponent {
         });
         this.hasNoPresets = computed(() => this.presets().length === 0);
         this.hasNoFilteredPresets = computed(() => this.filteredPresets().length === 0);
+        // Tool availability (based on config)
+        this.isFeatureFlagsEnabled = computed(() => this.state.config().showFeatureFlagsTool ?? true);
+        this.isPermissionsEnabled = computed(() => this.state.config().showPermissionsTool ?? true);
+        this.isAppFeaturesEnabled = computed(() => this.state.config().showAppFeaturesTool ?? true);
+        this.isLanguageEnabled = computed(() => this.state.config().showLanguageTool ?? true);
+        // Forced items details
+        this.forcedFlags = computed(() => {
+            return this.featureFlagsService.flags().filter((flag) => flag.isForced);
+        });
+        this.forcedPermissions = computed(() => {
+            return this.permissionsService.permissions().filter((perm) => perm.isForced);
+        });
+        this.forcedAppFeatures = computed(() => {
+            return this.appFeaturesService.features().filter((feat) => feat.isForced);
+        });
         // Other properties
         this.options = {
             title: 'Presets',
@@ -4057,6 +4261,16 @@ class DevToolbarPresetsToolComponent {
         this.viewMode.set('create');
         this.presetName.set('');
         this.presetDescription.set('');
+        // Reset checkboxes - only enable categories that have forced items
+        this.includeFeatureFlags.set(this.getCurrentFlagsCount() > 0);
+        this.includePermissions.set(this.getCurrentPermissionsCount() > 0);
+        this.includeAppFeatures.set(this.getCurrentAppFeaturesCount() > 0);
+        const currentLang = this.getCurrentLanguage();
+        this.includeLanguage.set(!!currentLang && currentLang !== 'Not Forced');
+        // Initialize selected items - select all by default
+        this.selectedFlagIds.set(new Set(this.forcedFlags().map((f) => f.id)));
+        this.selectedPermissionIds.set(new Set(this.forcedPermissions().map((p) => p.id)));
+        this.selectedFeatureIds.set(new Set(this.forcedAppFeatures().map((f) => f.id)));
     }
     onSwitchToListMode() {
         this.viewMode.set('list');
@@ -4065,7 +4279,15 @@ class DevToolbarPresetsToolComponent {
         event.preventDefault();
         if (!this.presetName())
             return;
-        this.presetsService.saveCurrentAsPreset(this.presetName(), this.presetDescription());
+        this.presetsService.saveCurrentAsPreset(this.presetName(), this.presetDescription(), {
+            includeFeatureFlags: this.includeFeatureFlags(),
+            includePermissions: this.includePermissions(),
+            includeAppFeatures: this.includeAppFeatures(),
+            includeLanguage: this.includeLanguage(),
+            selectedFlagIds: Array.from(this.selectedFlagIds()),
+            selectedPermissionIds: Array.from(this.selectedPermissionIds()),
+            selectedFeatureIds: Array.from(this.selectedFeatureIds()),
+        });
         this.onSwitchToListMode();
     }
     onApplyPreset(presetId) {
@@ -4111,8 +4333,27 @@ class DevToolbarPresetsToolComponent {
     formatDate(isoString) {
         return new Date(isoString).toLocaleDateString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarPresetsToolComponent, isStandalone: true, selector: "ndt-presets-tool", ngImport: i0, template: `
+    /**
+     * Toggle selection of an individual item
+     */
+    toggleItemSelection(signal, itemId) {
+        const current = new Set(signal());
+        if (current.has(itemId)) {
+            current.delete(itemId);
+        }
+        else {
+            current.add(itemId);
+        }
+        signal.set(current);
+    }
+    /**
+     * Check if an item is selected
+     */
+    isItemSelected(selectedSet, itemId) {
+        return selectedSet.has(itemId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPresetsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarPresetsToolComponent, isStandalone: true, selector: "ndt-presets-tool", ngImport: i0, template: `
     <ndt-toolbar-tool [options]="options" title="Presets" icon="layout">
       <div class="container">
         <!-- Mode Toggle -->
@@ -4160,15 +4401,122 @@ class DevToolbarPresetsToolComponent {
             [ariaLabel]="'Preset description'"
           />
 
-          <!-- Summary of what will be saved -->
+          <!-- Category selection checkboxes -->
           <div class="preset-summary">
-            <h4>Configuration to Save:</h4>
-            <ul>
-              <li>Feature Flags: {{ getCurrentFlagsCount() }} forced</li>
-              <li>Permissions: {{ getCurrentPermissionsCount() }} forced</li>
-              <li>App Features: {{ getCurrentAppFeaturesCount() }} forced</li>
-              <li>Language: {{ getCurrentLanguage() }}</li>
-            </ul>
+            <h4>Select what to include:</h4>
+
+            @if (isFeatureFlagsEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includeFeatureFlags()"
+                  (change)="includeFeatureFlags.set(!includeFeatureFlags())"
+                  [disabled]="getCurrentFlagsCount() === 0"
+                />
+                <span>Feature Flags ({{ getCurrentFlagsCount() }} forced)</span>
+              </label>
+              @if (forcedFlags().length > 0) {
+              <ul class="forced-items-list">
+                @for (flag of forcedFlags(); track flag.id) {
+                <li>
+                  <label class="item-checkbox">
+                    <input
+                      type="checkbox"
+                      [checked]="isItemSelected(selectedFlagIds(), flag.id)"
+                      (change)="toggleItemSelection(selectedFlagIds, flag.id)"
+                    />
+                    <span class="item-name">{{ flag.name }}</span>
+                    <span class="item-status" [class.enabled]="flag.isEnabled" [class.disabled]="!flag.isEnabled">
+                      {{ flag.isEnabled ? 'ON' : 'OFF' }}
+                    </span>
+                  </label>
+                </li>
+                }
+              </ul>
+              }
+            </div>
+            }
+
+            @if (isPermissionsEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includePermissions()"
+                  (change)="includePermissions.set(!includePermissions())"
+                  [disabled]="getCurrentPermissionsCount() === 0"
+                />
+                <span>Permissions ({{ getCurrentPermissionsCount() }} forced)</span>
+              </label>
+              @if (forcedPermissions().length > 0) {
+              <ul class="forced-items-list">
+                @for (perm of forcedPermissions(); track perm.id) {
+                <li>
+                  <label class="item-checkbox">
+                    <input
+                      type="checkbox"
+                      [checked]="isItemSelected(selectedPermissionIds(), perm.id)"
+                      (change)="toggleItemSelection(selectedPermissionIds, perm.id)"
+                    />
+                    <span class="item-name">{{ perm.name }}</span>
+                    <span class="item-status" [class.enabled]="perm.isGranted" [class.disabled]="!perm.isGranted">
+                      {{ perm.isGranted ? 'GRANTED' : 'DENIED' }}
+                    </span>
+                  </label>
+                </li>
+                }
+              </ul>
+              }
+            </div>
+            }
+
+            @if (isAppFeaturesEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includeAppFeatures()"
+                  (change)="includeAppFeatures.set(!includeAppFeatures())"
+                  [disabled]="getCurrentAppFeaturesCount() === 0"
+                />
+                <span>App Features ({{ getCurrentAppFeaturesCount() }} forced)</span>
+              </label>
+              @if (forcedAppFeatures().length > 0) {
+              <ul class="forced-items-list">
+                @for (feat of forcedAppFeatures(); track feat.id) {
+                <li>
+                  <label class="item-checkbox">
+                    <input
+                      type="checkbox"
+                      [checked]="isItemSelected(selectedFeatureIds(), feat.id)"
+                      (change)="toggleItemSelection(selectedFeatureIds, feat.id)"
+                    />
+                    <span class="item-name">{{ feat.name }}</span>
+                    <span class="item-status" [class.enabled]="feat.isEnabled" [class.disabled]="!feat.isEnabled">
+                      {{ feat.isEnabled ? 'ON' : 'OFF' }}
+                    </span>
+                  </label>
+                </li>
+                }
+              </ul>
+              }
+            </div>
+            }
+
+            @if (isLanguageEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includeLanguage()"
+                  (change)="includeLanguage.set(!includeLanguage())"
+                  [disabled]="!getCurrentLanguage() || getCurrentLanguage() === 'Not Forced'"
+                />
+                <span>Language ({{ getCurrentLanguage() }})</span>
+              </label>
+            </div>
+            }
           </div>
 
           <div class="form-actions">
@@ -4279,9 +4627,9 @@ class DevToolbarPresetsToolComponent {
         }
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header ndt-button{flex-shrink:0}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-list::-webkit-scrollbar{width:8px}.preset-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.preset-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.preset-card{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm)}.preset-card__header h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);flex:1}.preset-card__actions{display:flex;gap:var(--ndt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);display:flex;align-items:center;justify-content:center}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.icon-button ndt-icon{width:16px;height:16px}.preset-card__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary)}.preset-card__meta{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.preset-card__meta span{margin-right:var(--ndt-spacing-sm)}.preset-card__preview{display:flex;gap:var(--ndt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ndt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ndt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.preset-form ndt-input{width:100%}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.preset-summary h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.preset-summary ul{margin:0;padding-left:var(--ndt-spacing-md);color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-sm)}.preset-summary ul li{margin-bottom:var(--ndt-spacing-xs)}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}ndt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ndt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px;&:hover{background:var(--ndt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-card{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm);h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);flex:1}}.preset-card__actions{display:flex;gap:var(--ndt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);display:flex;align-items:center;justify-content:center;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}ndt-icon{width:16px;height:16px}}.preset-card__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary)}.preset-card__meta{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);span{margin-right:var(--ndt-spacing-sm)}}.preset-card__preview{display:flex;gap:var(--ndt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ndt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ndt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md);ndt-input{width:100%}}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);h4{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}}.category-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-sm);cursor:pointer;color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-sm);input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--ndt-primary);&:disabled{cursor:not-allowed;opacity:.5}}&:has(input:disabled){opacity:.6;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 var(--ndt-spacing-lg);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);font-size:var(--ndt-font-size-xs);li{background:rgba(var(--ndt-primary-rgb),.05);border-radius:var(--ndt-border-radius-small);border-left:2px solid rgba(var(--ndt-primary-rgb),.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);cursor:pointer;gap:var(--ndt-spacing-sm);input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--ndt-primary);flex-shrink:0}&:hover{background:rgba(var(--ndt-primary-rgb),.08)}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-size:10px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPresetsToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-presets-tool', standalone: true, imports: [
                         FormsModule,
@@ -4289,7 +4637,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarInputComponent,
                         DevToolbarButtonComponent,
                         DevToolbarIconComponent,
-                        DevToolbarWindowComponent,
                     ], template: `
     <ndt-toolbar-tool [options]="options" title="Presets" icon="layout">
       <div class="container">
@@ -4338,15 +4685,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             [ariaLabel]="'Preset description'"
           />
 
-          <!-- Summary of what will be saved -->
+          <!-- Category selection checkboxes -->
           <div class="preset-summary">
-            <h4>Configuration to Save:</h4>
-            <ul>
-              <li>Feature Flags: {{ getCurrentFlagsCount() }} forced</li>
-              <li>Permissions: {{ getCurrentPermissionsCount() }} forced</li>
-              <li>App Features: {{ getCurrentAppFeaturesCount() }} forced</li>
-              <li>Language: {{ getCurrentLanguage() }}</li>
-            </ul>
+            <h4>Select what to include:</h4>
+
+            @if (isFeatureFlagsEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includeFeatureFlags()"
+                  (change)="includeFeatureFlags.set(!includeFeatureFlags())"
+                  [disabled]="getCurrentFlagsCount() === 0"
+                />
+                <span>Feature Flags ({{ getCurrentFlagsCount() }} forced)</span>
+              </label>
+              @if (forcedFlags().length > 0) {
+              <ul class="forced-items-list">
+                @for (flag of forcedFlags(); track flag.id) {
+                <li>
+                  <label class="item-checkbox">
+                    <input
+                      type="checkbox"
+                      [checked]="isItemSelected(selectedFlagIds(), flag.id)"
+                      (change)="toggleItemSelection(selectedFlagIds, flag.id)"
+                    />
+                    <span class="item-name">{{ flag.name }}</span>
+                    <span class="item-status" [class.enabled]="flag.isEnabled" [class.disabled]="!flag.isEnabled">
+                      {{ flag.isEnabled ? 'ON' : 'OFF' }}
+                    </span>
+                  </label>
+                </li>
+                }
+              </ul>
+              }
+            </div>
+            }
+
+            @if (isPermissionsEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includePermissions()"
+                  (change)="includePermissions.set(!includePermissions())"
+                  [disabled]="getCurrentPermissionsCount() === 0"
+                />
+                <span>Permissions ({{ getCurrentPermissionsCount() }} forced)</span>
+              </label>
+              @if (forcedPermissions().length > 0) {
+              <ul class="forced-items-list">
+                @for (perm of forcedPermissions(); track perm.id) {
+                <li>
+                  <label class="item-checkbox">
+                    <input
+                      type="checkbox"
+                      [checked]="isItemSelected(selectedPermissionIds(), perm.id)"
+                      (change)="toggleItemSelection(selectedPermissionIds, perm.id)"
+                    />
+                    <span class="item-name">{{ perm.name }}</span>
+                    <span class="item-status" [class.enabled]="perm.isGranted" [class.disabled]="!perm.isGranted">
+                      {{ perm.isGranted ? 'GRANTED' : 'DENIED' }}
+                    </span>
+                  </label>
+                </li>
+                }
+              </ul>
+              }
+            </div>
+            }
+
+            @if (isAppFeaturesEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includeAppFeatures()"
+                  (change)="includeAppFeatures.set(!includeAppFeatures())"
+                  [disabled]="getCurrentAppFeaturesCount() === 0"
+                />
+                <span>App Features ({{ getCurrentAppFeaturesCount() }} forced)</span>
+              </label>
+              @if (forcedAppFeatures().length > 0) {
+              <ul class="forced-items-list">
+                @for (feat of forcedAppFeatures(); track feat.id) {
+                <li>
+                  <label class="item-checkbox">
+                    <input
+                      type="checkbox"
+                      [checked]="isItemSelected(selectedFeatureIds(), feat.id)"
+                      (change)="toggleItemSelection(selectedFeatureIds, feat.id)"
+                    />
+                    <span class="item-name">{{ feat.name }}</span>
+                    <span class="item-status" [class.enabled]="feat.isEnabled" [class.disabled]="!feat.isEnabled">
+                      {{ feat.isEnabled ? 'ON' : 'OFF' }}
+                    </span>
+                  </label>
+                </li>
+                }
+              </ul>
+              }
+            </div>
+            }
+
+            @if (isLanguageEnabled()) {
+            <div class="category-section">
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  [checked]="includeLanguage()"
+                  (change)="includeLanguage.set(!includeLanguage())"
+                  [disabled]="!getCurrentLanguage() || getCurrentLanguage() === 'Not Forced'"
+                />
+                <span>Language ({{ getCurrentLanguage() }})</span>
+              </label>
+            </div>
+            }
           </div>
 
           <div class="form-actions">
@@ -4457,11 +4911,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header ndt-button{flex-shrink:0}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-list::-webkit-scrollbar{width:8px}.preset-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.preset-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.preset-card{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm)}.preset-card__header h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);flex:1}.preset-card__actions{display:flex;gap:var(--ndt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);display:flex;align-items:center;justify-content:center}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.icon-button ndt-icon{width:16px;height:16px}.preset-card__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary)}.preset-card__meta{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.preset-card__meta span{margin-right:var(--ndt-spacing-sm)}.preset-card__preview{display:flex;gap:var(--ndt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ndt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ndt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.preset-form ndt-input{width:100%}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.preset-summary h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.preset-summary ul{margin:0;padding-left:var(--ndt-spacing-md);color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-sm)}.preset-summary ul li{margin-bottom:var(--ndt-spacing-xs)}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}ndt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ndt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px;&:hover{background:var(--ndt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-card{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm);h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);flex:1}}.preset-card__actions{display:flex;gap:var(--ndt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);display:flex;align-items:center;justify-content:center;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}ndt-icon{width:16px;height:16px}}.preset-card__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary)}.preset-card__meta{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);span{margin-right:var(--ndt-spacing-sm)}}.preset-card__preview{display:flex;gap:var(--ndt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ndt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ndt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md);ndt-input{width:100%}}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);h4{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}}.category-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-sm);cursor:pointer;color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-sm);input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--ndt-primary);&:disabled{cursor:not-allowed;opacity:.5}}&:has(input:disabled){opacity:.6;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 var(--ndt-spacing-lg);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);font-size:var(--ndt-font-size-xs);li{background:rgba(var(--ndt-primary-rgb),.05);border-radius:var(--ndt-border-radius-small);border-left:2px solid rgba(var(--ndt-primary-rgb),.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);cursor:pointer;gap:var(--ndt-spacing-sm);input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--ndt-primary);flex-shrink:0}&:hover{background:rgba(var(--ndt-primary-rgb),.08)}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-size:10px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm)}\n"] }]
         }] });
 
 class DevToolbarComponent {
     constructor() {
+        this.document = inject(DOCUMENT);
         this.state = inject(DevToolbarStateService);
         this.destroyRef = inject(DestroyRef);
         this.settingsService = inject(SettingsService);
@@ -4472,10 +4927,18 @@ class DevToolbarComponent {
         this.mouseLeave = fromEvent(document, 'mouseleave')
             .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.onMouseLeave());
+        // Update state service when config changes
+        effect(() => {
+            this.state.setConfig(this.config());
+        });
     }
     ngOnInit() {
-        const settings = this.settingsService.getSettings();
-        this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
+        this.injectGlobalStyles();
+        // Always use light theme
+        this.state.setTheme('light');
+    }
+    ngOnDestroy() {
+        this.globalStyleElement?.remove();
     }
     onMouseEnter() {
         this.state.setVisibility(true);
@@ -4486,36 +4949,106 @@ class DevToolbarComponent {
     toggleDevTools() {
         this.state.setVisibility(!this.state.isVisible());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    /**
+     * Injects global theme styles into the document head to make CSS variables
+     * available to CDK overlays and other elements rendered outside Shadow DOM.
+     * Uses light theme only.
+     */
+    injectGlobalStyles() {
+        // Check if styles are already injected (e.g., by another toolbar instance)
+        if (this.document.getElementById('ndt-global-theme')) {
+            return;
+        }
+        this.globalStyleElement = this.document.createElement('style');
+        this.globalStyleElement.id = 'ndt-global-theme';
+        this.globalStyleElement.textContent = `
+      /* Global Light Theme for ngx-dev-toolbar overlays */
+      :where(ndt-toolbar),
+      .ndt-overlay-panel,
+      .cdk-overlay-container {
+        --ndt-border-radius-small: 4px;
+        --ndt-border-radius-medium: 8px;
+        --ndt-border-radius-large: 12px;
+        --ndt-transition-default: all 0.2s ease-out;
+        --ndt-transition-smooth: all 0.2s ease-in-out;
+        --ndt-spacing-xs: 4px;
+        --ndt-spacing-sm: 6px;
+        --ndt-spacing-md: 12px;
+        --ndt-spacing-lg: 16px;
+        --ndt-window-padding: 16px;
+        --ndt-font-size-xs: 0.75rem;
+        --ndt-font-size-sm: 0.875rem;
+        --ndt-font-size-md: 1rem;
+        --ndt-font-size-lg: 1.25rem;
+        --ndt-font-size-xl: 2rem;
+        --ndt-primary: #df30d4;
+        --ndt-primary-rgb: 223, 48, 212;
+        --ndt-text-on-primary: rgb(255, 255, 255);
+        --ndt-bg-primary: rgb(255, 255, 255);
+        --ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, 0.88) 100%);
+        --ndt-text-primary: rgb(17, 24, 39);
+        --ndt-text-secondary: rgb(55, 65, 81);
+        --ndt-text-muted: rgb(107, 114, 128);
+        --ndt-border-primary: #e5e7eb;
+        --ndt-border-subtle: rgba(17, 24, 39, 0.1);
+        --ndt-hover-bg: rgba(17, 24, 39, 0.05);
+        --ndt-hover-danger: rgb(239, 68, 68);
+        --ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, 0.2);
+        --ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 4px 8px rgba(107, 114, 128, 0.15), 0 2px 4px rgba(107, 114, 128, 0.1);
+        --ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, 0.1), 0px 1px 2px 0px rgba(156, 163, 175, 0.12), 0px 4px 4px 0px rgba(156, 163, 175, 0.1), 0px 10px 6px 0px rgba(156, 163, 175, 0.08), 0px 17px 7px 0px rgba(156, 163, 175, 0.05), 0px 26px 7px 0px rgba(156, 163, 175, 0.02);
+        --ndt-background-secondary: var(--ndt-bg-primary);
+        --ndt-background-hover: var(--ndt-hover-bg);
+        --ndt-border-color: var(--ndt-border-primary);
+        --ndt-note-background: rgb(219, 234, 254);
+        --ndt-note-border: rgba(37, 99, 235, 0.2);
+        --ndt-warning-background: rgb(254, 249, 195);
+        --ndt-warning-border: rgba(202, 138, 4, 0.2);
+        --ndt-error-background: rgb(254, 226, 226);
+        --ndt-error-border: rgba(220, 38, 38, 0.2);
+      }
+      .ndt-overlay-panel {
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+        box-sizing: border-box;
+      }
+      .ndt-overlay-panel *, .ndt-overlay-panel *::before, .ndt-overlay-panel *::after {
+        box-sizing: border-box;
+      }
+      .cdk-overlay-backdrop.ndt-overlay-backdrop {
+        background: transparent;
+      }
+    `;
+        this.document.head.appendChild(this.globalStyleElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       aria-label="Developer tools"
       role="toolbar"
-      class="dev-toolbar"
+      class="ndt-toolbar"
       [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
       [attr.data-theme]="state.theme()"
-      [class.dev-toolbar--active]="state.isVisible()"
+      [class.ndt-toolbar--active]="state.isVisible()"
       (mouseenter)="onMouseEnter()"
     >
       <ndt-home-tool />
-      @if (config().showLanguageTool ?? true) {
+      <ng-content />
+      @if (config().showLanguageTool ?? false) {
         <ndt-language-tool />
       }
-      @if (config().showFeatureFlagsTool ?? true) {
-        <ndt-feature-flags-tool />
+      @if (config().showPresetsTool ?? false) {
+        <ndt-presets-tool />
       }
-      @if (config().showAppFeaturesTool ?? true) {
+      @if (config().showAppFeaturesTool ?? false) {
         <ndt-app-features-tool />
       }
-      @if (config().showPermissionsTool ?? true) {
+      @if (config().showPermissionsTool ?? false) {
         <ndt-permissions-tool />
       }
-      @if (config().showPresetsTool ?? true) {
-        <ndt-presets-tool />
+      @if (config().showFeatureFlagsTool ?? false) {
+        <ndt-feature-flags-tool />
       }
-      <ng-content />
     </div>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: DevToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], animations: [
+  `, isInline: true, styles: [":host{display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.ndt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: DevToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], animations: [
             trigger('toolbarState', [
                 state('hidden', style({
                     transform: 'translate(-50%, calc(100% + -1.2rem))',
@@ -4529,7 +5062,7 @@ class DevToolbarComponent {
             ]),
         ], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'ndt-toolbar', encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         DevToolbarHomeToolComponent,
@@ -4542,29 +5075,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     <div
       aria-label="Developer tools"
       role="toolbar"
-      class="dev-toolbar"
+      class="ndt-toolbar"
       [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
       [attr.data-theme]="state.theme()"
-      [class.dev-toolbar--active]="state.isVisible()"
+      [class.ndt-toolbar--active]="state.isVisible()"
       (mouseenter)="onMouseEnter()"
     >
       <ndt-home-tool />
-      @if (config().showLanguageTool ?? true) {
+      <ng-content />
+      @if (config().showLanguageTool ?? false) {
         <ndt-language-tool />
       }
-      @if (config().showFeatureFlagsTool ?? true) {
-        <ndt-feature-flags-tool />
+      @if (config().showPresetsTool ?? false) {
+        <ndt-presets-tool />
       }
-      @if (config().showAppFeaturesTool ?? true) {
+      @if (config().showAppFeaturesTool ?? false) {
         <ndt-app-features-tool />
       }
-      @if (config().showPermissionsTool ?? true) {
+      @if (config().showPermissionsTool ?? false) {
         <ndt-permissions-tool />
       }
-      @if (config().showPresetsTool ?? true) {
-        <ndt-presets-tool />
+      @if (config().showFeatureFlagsTool ?? false) {
+        <ndt-feature-flags-tool />
       }
-      <ng-content />
     </div>
   `, animations: [
                         trigger('toolbarState', [
@@ -4578,8 +5111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                                 animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
                             ]),
                         ]),
-                    ], styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
-        }] });
+                    ], styles: [":host{display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.ndt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
+        }], ctorParameters: () => [] });
 
 class DevToolbarFeatureFlagService {
     constructor() {
@@ -4599,10 +5132,36 @@ class DevToolbarFeatureFlagService {
     getForcedValues() {
         return this.internalService.getForcedFlags();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagService, providedIn: 'root' }); }
+    /**
+     * Gets ALL flag values with overrides already applied.
+     * Returns the complete set of flags where overridden values replace base values.
+     * Each flag includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base flags with overrides using combineLatest.
+     *
+     * @returns Observable of all flags with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Get a specific flag value with overrides applied
+     * this.featureFlagsService.getValues().pipe(
+     *   map(flags => flags.find(f => f.id === 'newFeature')),
+     *   map(flag => flag?.isEnabled ?? false)
+     * ).subscribe(isEnabled => {
+     *   if (isEnabled) {
+     *     // Enable feature
+     *   }
+     * });
+     * ```
+     */
+    getValues() {
+        return this.internalService.flags$;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarFeatureFlagService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarFeatureFlagService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4625,10 +5184,19 @@ class DevToolbarLanguageService {
     getForcedValues() {
         return this.internalService.getForcedLanguage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageService, providedIn: 'root' }); }
+    /**
+     * Gets the forced language value.
+     * For the language tool, this returns the same as getForcedValues() since
+     * only one language can be selected at a time.
+     * @returns Observable of forced language array (single item or empty)
+     */
+    getValues() {
+        return this.internalService.getForcedLanguage();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarLanguageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4734,6 +5302,32 @@ class DevToolbarAppFeaturesService {
     getForcedValues() {
         return this.internalService.getForcedFeatures();
     }
+    /**
+     * Gets ALL app feature values with overrides already applied.
+     * Returns the complete set of features where overridden values replace base values.
+     * Each feature includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base features with overrides using combineLatest.
+     *
+     * @returns Observable of all features with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Check if a feature is enabled with overrides applied
+     * this.appFeaturesService.getValues().pipe(
+     *   map(features => features.find(f => f.id === 'premium-analytics')),
+     *   map(feature => feature?.isEnabled ?? false)
+     * ).subscribe(isEnabled => {
+     *   if (isEnabled) {
+     *     // Enable premium analytics
+     *   }
+     * });
+     * ```
+     */
+    getValues() {
+        return this.internalService.features$;
+    }
     /**
      * Apply a preset feature configuration (for preset tool integration).
      *
@@ -4787,10 +5381,10 @@ class DevToolbarAppFeaturesService {
     getCurrentForcedState() {
         return this.internalService.getCurrentForcedState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarAppFeaturesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarAppFeaturesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4861,6 +5455,32 @@ class DevToolbarPermissionsService {
     getForcedValues() {
         return this.internalService.getForcedPermissions();
     }
+    /**
+     * Gets ALL permission values with overrides already applied.
+     * Returns the complete set of permissions where overridden values replace base values.
+     * Each permission includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base permissions with overrides using combineLatest.
+     *
+     * @returns Observable of all permissions with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Simple permission check with overrides applied
+     * this.permissionsService.getValues().pipe(
+     *   map(permissions => permissions.find(p => p.id === 'can-edit')),
+     *   map(permission => permission?.isGranted ?? false)
+     * ).subscribe(canEdit => {
+     *   if (canEdit) {
+     *     // Enable edit functionality
+     *   }
+     * });
+     * ```
+     */
+    getValues() {
+        return this.internalService.permissions$;
+    }
     /**
      * Apply a preset permission state. Useful for automated testing scenarios.
      *
@@ -4885,10 +5505,10 @@ class DevToolbarPermissionsService {
     getCurrentState() {
         return this.internalService.getCurrentForcedState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPermissionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPermissionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4958,10 +5578,87 @@ class DevToolbarPresetsService {
         const preset = JSON.parse(json);
         return this.internalService.addPreset(preset);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsService, providedIn: 'root' }); }
+    /**
+     * Initialize presets with predefined configurations.
+     * Useful for setting up default presets that all developers can use.
+     *
+     * @param presets - Array of preset configurations to initialize
+     * @returns Array of created presets
+     *
+     * @example
+     * ```typescript
+     * const presetsService = inject(DevToolbarPresetsService);
+     *
+     * presetsService.initializePresets([
+     *   {
+     *     name: 'Admin User',
+     *     description: 'Full access admin configuration',
+     *     config: {
+     *       featureFlags: {
+     *         enabled: ['admin-panel', 'advanced-features'],
+     *         disabled: []
+     *       },
+     *       permissions: {
+     *         granted: ['admin', 'write', 'delete'],
+     *         denied: []
+     *       },
+     *       appFeatures: {
+     *         enabled: ['analytics', 'reporting'],
+     *         disabled: []
+     *       },
+     *       language: 'en'
+     *     }
+     *   },
+     *   {
+     *     name: 'Read-Only User',
+     *     description: 'Limited access for viewing only',
+     *     config: {
+     *       featureFlags: {
+     *         enabled: [],
+     *         disabled: ['admin-panel', 'advanced-features']
+     *       },
+     *       permissions: {
+     *         granted: ['read'],
+     *         denied: ['write', 'delete']
+     *       },
+     *       appFeatures: {
+     *         enabled: [],
+     *         disabled: ['analytics', 'reporting']
+     *       },
+     *       language: null
+     *     }
+     *   }
+     * ]);
+     * ```
+     */
+    initializePresets(presets) {
+        return presets.map((preset) => this.internalService.addPreset({
+            id: '', // Will be generated
+            createdAt: '', // Will be generated
+            updatedAt: '', // Will be generated
+            ...preset,
+        }));
+    }
+    /**
+     * Clear all existing presets and set new initial presets.
+     * Use this to replace all presets with a fresh set of configurations.
+     *
+     * @param presets - Array of preset configurations to set as initial
+     * @returns Array of created presets
+     */
+    setInitialPresets(presets) {
+        // Clear existing presets
+        const currentPresets = this.internalService.presets();
+        currentPresets.forEach((preset) => {
+            this.internalService.deletePreset(preset.id);
+        });
+        // Add new presets
+        return this.initializePresets(presets);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPresetsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarPresetsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4970,5 +5667,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DevToolbarAppFeaturesService, DevToolbarAppFeaturesToolComponent, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService, DevToolbarPermissionsService, DevToolbarPermissionsToolComponent, DevToolbarPresetsService, DevToolbarPresetsToolComponent, DevToolbarToolComponent };
+export { DevToolbarAppFeaturesService, DevToolbarAppFeaturesToolComponent, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService, DevToolbarListComponent, DevToolbarListItemComponent, DevToolbarPermissionsService, DevToolbarPermissionsToolComponent, DevToolbarPresetsService, DevToolbarPresetsToolComponent, DevToolbarToolComponent };
 //# sourceMappingURL=ngx-dev-toolbar.mjs.map