ngx-dev-toolbar 4.2.1 → 4.3.0

package/fesm2022/ngx-dev-toolbar.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, signal, computed, model, input, ChangeDetectionStrategy, Component, output, viewChild, contentChild, effect, HostListener, DestroyRef, ViewEncapsulation, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, ApplicationRef, EnvironmentInjector, createComponent, TemplateRef, Directive, contentChildren } from '@angular/core';
-import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { InjectionToken, Injectable, inject, signal, computed, input, output, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, contentChild, effect, HostListener, DestroyRef, ViewContainerRef, ViewEncapsulation, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, ApplicationRef, EnvironmentInjector, createComponent, TemplateRef, Directive, contentChildren } from '@angular/core';
+import { CommonModule, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, map, firstValueFrom, fromEvent } from 'rxjs';
 import { filter, throttleTime } from 'rxjs/operators';
-import * as i1 from '@angular/forms';
+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 * as i1$1 from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
 
 /**
@@ -69,6 +69,29 @@ const TOOLBAR_PERMISSIONS = new InjectionToken('TOOLBAR_PERMISSIONS');
  * ```
  */
 const TOOLBAR_APP_FEATURES = new InjectionToken('TOOLBAR_APP_FEATURES');
+/**
+ * InjectionToken for registering custom tool components with the toolbar.
+ *
+ * Custom tools are Angular components that extend the toolbar with app-specific
+ * functionality. They are dynamically rendered inside the toolbar at runtime.
+ *
+ * Use `provideToolbarCustomTools()` to register custom tool components.
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideToolbar, provideToolbarCustomTools } from 'ngx-dev-toolbar';
+ * import { MyCustomToolComponent } from './my-custom-tool.component';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideToolbar({ ... }),
+ *     provideToolbarCustomTools(MyCustomToolComponent),
+ *   ],
+ * };
+ * ```
+ */
+const TOOLBAR_CUSTOM_TOOLS = new InjectionToken('TOOLBAR_CUSTOM_TOOLS');
 
 class ToolbarStorageService {
     constructor() {
@@ -279,126 +302,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class ToolbarInputComponent {
-    constructor() {
-        this.value = model.required();
-        this.type = input('text');
-        this.placeholder = input('');
-        this.ariaLabel = input('');
-        this.inputClass = input('input');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarInputComponent, 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()"
-      [class]="inputClass()"
-      [ngModel]="value()"
-      [placeholder]="placeholder()"
-      (ngModelChange)="value.set($event)"
-    />
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:28px}.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
-    <input
-      [attr.aria-label]="ariaLabel()"
-      [type]="type()"
-      [class]="inputClass()"
-      [ngModel]="value()"
-      [placeholder]="placeholder()"
-      (ngModelChange)="value.set($event)"
-    />
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:28px}.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"] }]
-        }] });
-
 /**
- * Container component for displaying lists of items with consistent scrolling,
- * empty states, and layout across all tools.
+ * Collapsible group header that wraps a section of list items.
+ *
+ * Renders a clickable header with the group name + item count + a chevron
+ * indicating collapsed/expanded state. Children projected via `<ng-content>`
+ * are hidden when collapsed.
  *
  * @example
  * ```html
- * <ndt-list
- *   [hasItems]="items().length > 0"
- *   [hasResults]="filteredItems().length > 0"
- *   emptyMessage="No items found"
- *   noResultsMessage="No items match your filter"
+ * <ndt-list-group
+ *   name="Authentication"
+ *   [count]="3"
+ *   [collapsed]="isCollapsed"
+ *   (collapsedChange)="onToggle($event)"
  * >
- *   @for (item of filteredItems(); track item.id) {
- *     <ndt-list-item ... />
- *   }
- * </ndt-list>
+ *   <ndt-list-item ... />
+ * </ndt-list-group>
  * ```
  */
-class ToolbarListComponent {
+class ToolbarListGroupComponent {
     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');
+        /** Display name of the group, shown in the header. */
+        this.name = input.required();
+        /** Number of items in the group, shown next to the name. */
+        this.count = input.required();
+        /** Whether the group is currently collapsed. */
+        this.collapsed = input(false);
+        /** Emits the new collapsed value when the user clicks the header. */
+        this.collapsedChange = output();
+        this.ariaLabel = computed(() => `${this.collapsed() ? 'Expand' : 'Collapse'} ${this.name()} group, ${this.count()} items`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListComponent, 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">
+    toggle() {
+        this.collapsedChange.emit(!this.collapsed());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListGroupComponent, isStandalone: true, selector: "ndt-list-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="header"
+      [attr.aria-expanded]="!collapsed()"
+      [attr.aria-label]="ariaLabel()"
+      (click)="toggle()"
+    >
+      <span class="chevron" [class.chevron--expanded]="!collapsed()" aria-hidden="true"></span>
+      <span class="name">{{ name() }}</span>
+      <span class="count" aria-hidden="true">{{ count() }}</span>
+    </button>
+    @if (!collapsed()) {
+      <div class="content">
         <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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);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-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;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 }); }
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;gap:var(--ndt-spacing-xs);flex-shrink:0}.header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);width:100%;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);background:transparent;border:none;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);font-family:inherit;font-size:var(--ndt-font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;text-align:left;transition:background-color .16s ease-out,color .16s ease-out}.header:hover{background:var(--ndt-background-secondary);color:var(--ndt-text-primary)}.header:focus-visible{outline:2px solid var(--ndt-accent, var(--ndt-text-primary));outline-offset:2px}.chevron{flex:0 0 auto;display:inline-block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid currentColor;transition:transform .18s cubic-bezier(.22,1,.36,1)}.chevron--expanded{transform:rotate(90deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:500;color:var(--ndt-text-muted)}.content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);margin-top:var(--ndt-spacing-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListGroupComponent, 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">
+            args: [{ selector: 'ndt-list-group', standalone: true, template: `
+    <button
+      type="button"
+      class="header"
+      [attr.aria-expanded]="!collapsed()"
+      [attr.aria-label]="ariaLabel()"
+      (click)="toggle()"
+    >
+      <span class="chevron" [class.chevron--expanded]="!collapsed()" aria-hidden="true"></span>
+      <span class="name">{{ name() }}</span>
+      <span class="count" aria-hidden="true">{{ count() }}</span>
+    </button>
+    @if (!collapsed()) {
+      <div class="content">
         <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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);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-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;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"] }]
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;gap:var(--ndt-spacing-xs);flex-shrink:0}.header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);width:100%;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);background:transparent;border:none;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);font-family:inherit;font-size:var(--ndt-font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;text-align:left;transition:background-color .16s ease-out,color .16s ease-out}.header:hover{background:var(--ndt-background-secondary);color:var(--ndt-text-primary)}.header:focus-visible{outline:2px solid var(--ndt-accent, var(--ndt-text-primary));outline-offset:2px}.chevron{flex:0 0 auto;display:inline-block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid currentColor;transition:transform .18s cubic-bezier(.22,1,.36,1)}.chevron--expanded{transform:rotate(90deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:500;color:var(--ndt-text-muted)}.content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);margin-top:var(--ndt-spacing-xs)}\n"] }]
         }] });
 
 class AngularIconComponent {
@@ -2050,7 +2027,7 @@ class ToolbarIconButtonComponent {
       }
       <ng-content />
     </button>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-flex}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:0;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out,border-color .15s ease-out;line-height:0;flex-shrink:0;position:relative}.icon-button--sm{width:22px;height:22px}.icon-button--sm ::ng-deep svg{width:12px;height:12px;display:block}.icon-button--md{width:28px;height:28px}.icon-button--md ::ng-deep svg{width:16px;height:16px;display:block}.icon-button--outlined{border:1px solid var(--ndt-border-primary)}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:3px 8px;border-radius:var(--ndt-border-radius-small);font-size:10px;font-weight:500;line-height:normal;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:9999;box-shadow:var(--ndt-shadow-tooltip)}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ndt-tooltip-bg)}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-flex}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:0;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out,border-color .15s ease-out;line-height:0;flex-shrink:0;position:relative}.icon-button--sm{width:22px;height:22px}.icon-button--sm ::ng-deep svg{width:12px;height:12px;display:block}.icon-button--md{width:28px;height:28px}.icon-button--md ::ng-deep svg{width:16px;height:16px;display:block}.icon-button--outlined{border:1px solid var(--ndt-border-primary)}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:3px 8px;border-radius:var(--ndt-border-radius-small);font-size:10px;font-weight:500;line-height:normal;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:9999;box-shadow:var(--ndt-shadow-tooltip)}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ndt-tooltip-bg)}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarIconButtonComponent, decorators: [{
             type: Component,
@@ -2074,7 +2051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       }
       <ng-content />
     </button>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-flex}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:0;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out,border-color .15s ease-out;line-height:0;flex-shrink:0;position:relative}.icon-button--sm{width:22px;height:22px}.icon-button--sm ::ng-deep svg{width:12px;height:12px;display:block}.icon-button--md{width:28px;height:28px}.icon-button--md ::ng-deep svg{width:16px;height:16px;display:block}.icon-button--outlined{border:1px solid var(--ndt-border-primary)}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:3px 8px;border-radius:var(--ndt-border-radius-small);font-size:10px;font-weight:500;line-height:normal;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:9999;box-shadow:var(--ndt-shadow-tooltip)}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ndt-tooltip-bg)}\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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-flex}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:0;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out,border-color .15s ease-out;line-height:0;flex-shrink:0;position:relative}.icon-button--sm{width:22px;height:22px}.icon-button--sm ::ng-deep svg{width:12px;height:12px;display:block}.icon-button--md{width:28px;height:28px}.icon-button--md ::ng-deep svg{width:16px;height:16px;display:block}.icon-button--outlined{border:1px solid var(--ndt-border-primary)}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:3px 8px;border-radius:var(--ndt-border-radius-small);font-size:10px;font-weight:500;line-height:normal;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:9999;box-shadow:var(--ndt-shadow-tooltip)}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ndt-tooltip-bg)}\n"] }]
         }] });
 
 /**
@@ -2130,6 +2107,11 @@ class ToolbarListItemComponent {
          * Whether this item is pinned to the top of the list
          */
         this.isPinned = input(false);
+        /**
+         * Optional identifier that can be copied to clipboard (e.g., flag ID).
+         * When provided, renders a copy button in the action row.
+         */
+        this.copyableId = input(undefined);
         /**
          * Emits when the user clicks the pin/unpin button
          */
@@ -2141,54 +2123,75 @@ class ToolbarListItemComponent {
         this.pinIcon = computed(() => 'pin');
         this.pinAriaLabel = computed(() => this.isPinned() ? 'Unpin item' : 'Pin item');
         /**
-         * 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
+         * Tooltip text explaining the current state, with override context when forced
          */
         this.tooltipText = computed(() => {
-            const value = this.displayValue();
-            const state = value ? 'enabled' : 'disabled';
+            const current = this.currentValue() ? 'enabled' : 'disabled';
             if (this.isForced() && this.originalValue() !== undefined) {
-                return `Originally: ${state}`;
+                const original = this.originalValue() ? 'enabled' : 'disabled';
+                return `Currently ${current} (originally ${original})`;
             }
-            return `Current state: ${state}`;
+            return `Currently ${current}`;
         });
+        this.statusAriaLabel = computed(() => {
+            const current = this.currentValue() ? 'enabled' : 'disabled';
+            return this.isForced() ? `${current}, forced` : current;
+        });
+        this.copyState = signal('idle');
+        this.copyAriaLabel = computed(() => {
+            const id = this.copyableId();
+            return id ? `Copy ID "${id}" to clipboard` : 'Copy ID';
+        });
+    }
+    async copyId(event) {
+        event.stopPropagation();
+        const id = this.copyableId();
+        if (!id)
+            return;
+        try {
+            await navigator.clipboard.writeText(id);
+            this.copyState.set('copied');
+            setTimeout(() => this.copyState.set('idle'), 1500);
+        }
+        catch {
+            this.copyState.set('idle');
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListItemComponent, 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 }, showApply: { classPropertyName: "showApply", publicName: "showApply", isSignal: true, isRequired: false, transformFunction: null }, applyState: { classPropertyName: "applyState", publicName: "applyState", isSignal: true, isRequired: false, transformFunction: null }, isPinned: { classPropertyName: "isPinned", publicName: "isPinned", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pinToggle: "pinToggle", applyToSource: "applyToSource" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListItemComponent, 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 }, showApply: { classPropertyName: "showApply", publicName: "showApply", isSignal: true, isRequired: false, transformFunction: null }, applyState: { classPropertyName: "applyState", publicName: "applyState", isSignal: true, isRequired: false, transformFunction: null }, isPinned: { classPropertyName: "isPinned", publicName: "isPinned", isSignal: true, isRequired: false, transformFunction: null }, copyableId: { classPropertyName: "copyableId", publicName: "copyableId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pinToggle: "pinToggle", applyToSource: "applyToSource" }, ngImport: i0, template: `
     <div class="list-item" [class.list-item--forced]="isForced()">
-      <ndt-icon-button
-        [icon]="pinIcon()"
-        [ariaLabel]="pinAriaLabel()"
-        variant="ghost"
-        class="pin-button"
-        [class.pin-button--pinned]="isPinned()"
-        (click)="pinToggle.emit(); $event.stopPropagation()"
-      />
+      <span
+        class="dot-indicator"
+        [class.dot-indicator--on]="currentValue()"
+        [class.dot-indicator--off]="!currentValue()"
+        [class.dot-indicator--forced]="isForced()"
+        [title]="tooltipText()"
+        [attr.aria-label]="statusAriaLabel()"
+        role="img"
+      ></span>
       <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>
+          <p>{{ description() }}</p>
         }
       </div>
       <div class="actions">
+        @if (copyableId()) {
+          <button
+            type="button"
+            class="copy-button"
+            [class.copy-button--copied]="copyState() === 'copied'"
+            [attr.aria-label]="copyAriaLabel()"
+            [title]="copyState() === 'copied' ? 'Copied!' : 'Copy ID'"
+            (click)="copyId($event)"
+          >
+            @if (copyState() === 'copied') {
+              <span aria-hidden="true">✓</span>
+            } @else {
+              <span aria-hidden="true" class="copy-icon">⧉</span>
+            }
+          </button>
+        }
         @if (showApply() && isForced()) {
           <ndt-icon-button
             [icon]="applyState() === 'idle' ? 'export' : undefined"
@@ -2205,46 +2208,63 @@ class ToolbarListItemComponent {
                 <span class="apply-spinner"></span>
               }
               @case ('success') {
-                <span class="apply-icon">✓</span>
+                <span class="apply-icon" aria-hidden="true">✓</span>
               }
               @case ('error') {
-                <span class="apply-icon">✕</span>
+                <span class="apply-icon" aria-hidden="true">✕</span>
               }
             }
           </ndt-icon-button>
         }
         <ng-content />
+        <ndt-icon-button
+          [icon]="pinIcon()"
+          [ariaLabel]="pinAriaLabel()"
+          variant="ghost"
+          class="pin-button"
+          [class.pin-button--pinned]="isPinned()"
+          (click)="pinToggle.emit(); $event.stopPropagation()"
+        />
       </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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease;position:relative;z-index:1;flex-shrink:0;overflow:visible}.list-item.list-item--forced{background:#3b82f60d}.list-item .info{flex:1 1 auto;min-width:0}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-sm);font-weight:500;color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:flex-start;gap:4px;margin-top:1px}.list-item .info .dot-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease;margin-top:5px}.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-xxs);color:var(--ndt-text-muted);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.list-item .actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible}.pin-button{position:absolute;left:calc(-1 * var(--ndt-spacing-sm) - 2px);top:var(--ndt-spacing-xs);opacity:0;transition:opacity .2s ease;z-index:2}.list-item:hover .pin-button{opacity:.4}.list-item:hover .pin-button:hover{opacity:.7}.pin-button--pinned{opacity:1}.pin-button--pinned ::ng-deep .icon-button{opacity:1;color:var(--ndt-text-primary)}.apply-button--loading ::ng-deep .icon-button{opacity:1;animation:apply-pulse 1s ease-in-out infinite}.apply-button--success ::ng-deep .icon-button{opacity:1;color:#22c55e;border-color:#22c55e4d;background:#22c55e0d}.apply-button--error ::ng-deep .icon-button{opacity:1;color:#ef4444;border-color:#ef44444d;background:#ef44440d}.apply-icon{font-size:10px;line-height:1}.apply-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--ndt-border-primary);border-top-color:var(--ndt-text-primary);border-radius:50%;animation:apply-spin .6s linear infinite}@keyframes apply-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes apply-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarIconButtonComponent, selector: "ndt-icon-button", inputs: ["icon", "tooltip", "ariaLabel", "size", "variant"] }], 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;align-items:flex-start;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);transition:background-color .28s cubic-bezier(.22,1,.36,1);position:relative;z-index:1;flex-shrink:0;overflow:visible}.list-item.list-item--forced{background:rgba(var(--ndt-forced-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--ndt-forced-rgb),.25)}.list-item>.dot-indicator{flex:0 0 auto;display:inline-block;width:8px;height:8px;border-radius:50%;cursor:help;transition:background-color .26s cubic-bezier(.22,1,.36,1),border-color .26s cubic-bezier(.22,1,.36,1),box-shadow .26s cubic-bezier(.22,1,.36,1);margin-top:7px;box-sizing:border-box}@media (prefers-reduced-motion: reduce){.list-item,.list-item>.dot-indicator{transition:none}}.list-item>.dot-indicator.dot-indicator--on{background:var(--ndt-success);box-shadow:0 0 0 2px rgba(var(--ndt-success-rgb),.2)}.list-item>.dot-indicator.dot-indicator--off{background:transparent;border:1.5px solid var(--ndt-danger);box-shadow:0 0 0 2px rgba(var(--ndt-danger-rgb),.12)}.list-item .info{flex:1 1 auto;min-width:0}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-sm);font-weight:500;color:var(--ndt-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item .info p{margin:1px 0 0;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.list-item .actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible}.pin-button{flex:0 0 auto;opacity:0;transition:opacity .2s ease}.pin-button ::ng-deep .icon-button{width:14px;height:14px;padding:0;box-sizing:border-box;background:transparent}.pin-button ::ng-deep .icon-button ::ng-deep svg{width:12px;height:12px}.pin-button ::ng-deep .icon-button:hover{background:transparent;color:var(--ndt-text-primary);opacity:1}.list-item:hover .pin-button,.list-item:focus-within .pin-button{opacity:.5}.list-item:hover .pin-button:hover,.list-item:focus-within .pin-button:focus-visible{opacity:1}.pin-button--pinned{opacity:1}.pin-button--pinned ::ng-deep .icon-button{opacity:1;color:var(--ndt-primary);background:transparent}.copy-button{appearance:none;border:0;background:transparent;color:var(--ndt-text-muted);width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:12px;line-height:1;opacity:0;transition:opacity .2s ease,color .15s ease,background-color .15s ease}.copy-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.copy-button:focus-visible{opacity:1;outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.copy-button .copy-icon{font-family:ui-monospace,monospace}.list-item:hover .copy-button,.list-item:focus-within .copy-button{opacity:.6}.list-item:hover .copy-button:hover{opacity:1}.copy-button--copied{opacity:1!important;color:var(--ndt-success)}.apply-button--loading ::ng-deep .icon-button{opacity:1;animation:apply-pulse 1s ease-in-out infinite}.apply-button--success ::ng-deep .icon-button{opacity:1;color:var(--ndt-success);border-color:rgba(var(--ndt-success-rgb),.3);background:rgba(var(--ndt-success-rgb),.05)}.apply-button--error ::ng-deep .icon-button{opacity:1;color:var(--ndt-danger);border-color:rgba(var(--ndt-danger-rgb),.3);background:rgba(var(--ndt-danger-rgb),.05)}.apply-icon{font-size:10px;line-height:1}.apply-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--ndt-border-primary);border-top-color:var(--ndt-text-primary);border-radius:50%;animation:apply-spin .6s linear infinite}@keyframes apply-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes apply-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarIconButtonComponent, selector: "ndt-icon-button", inputs: ["icon", "tooltip", "ariaLabel", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-list-item', standalone: true, imports: [CommonModule, ToolbarIconComponent, ToolbarIconButtonComponent], template: `
+            args: [{ selector: 'ndt-list-item', standalone: true, imports: [CommonModule, ToolbarIconButtonComponent], template: `
     <div class="list-item" [class.list-item--forced]="isForced()">
-      <ndt-icon-button
-        [icon]="pinIcon()"
-        [ariaLabel]="pinAriaLabel()"
-        variant="ghost"
-        class="pin-button"
-        [class.pin-button--pinned]="isPinned()"
-        (click)="pinToggle.emit(); $event.stopPropagation()"
-      />
+      <span
+        class="dot-indicator"
+        [class.dot-indicator--on]="currentValue()"
+        [class.dot-indicator--off]="!currentValue()"
+        [class.dot-indicator--forced]="isForced()"
+        [title]="tooltipText()"
+        [attr.aria-label]="statusAriaLabel()"
+        role="img"
+      ></span>
       <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>
+          <p>{{ description() }}</p>
         }
       </div>
       <div class="actions">
+        @if (copyableId()) {
+          <button
+            type="button"
+            class="copy-button"
+            [class.copy-button--copied]="copyState() === 'copied'"
+            [attr.aria-label]="copyAriaLabel()"
+            [title]="copyState() === 'copied' ? 'Copied!' : 'Copy ID'"
+            (click)="copyId($event)"
+          >
+            @if (copyState() === 'copied') {
+              <span aria-hidden="true">✓</span>
+            } @else {
+              <span aria-hidden="true" class="copy-icon">⧉</span>
+            }
+          </button>
+        }
         @if (showApply() && isForced()) {
           <ndt-icon-button
             [icon]="applyState() === 'idle' ? 'export' : undefined"
@@ -2261,22 +2281,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 <span class="apply-spinner"></span>
               }
               @case ('success') {
-                <span class="apply-icon">✓</span>
+                <span class="apply-icon" aria-hidden="true">✓</span>
               }
               @case ('error') {
-                <span class="apply-icon">✕</span>
+                <span class="apply-icon" aria-hidden="true">✕</span>
               }
             }
           </ndt-icon-button>
         }
         <ng-content />
+        <ndt-icon-button
+          [icon]="pinIcon()"
+          [ariaLabel]="pinAriaLabel()"
+          variant="ghost"
+          class="pin-button"
+          [class.pin-button--pinned]="isPinned()"
+          (click)="pinToggle.emit(); $event.stopPropagation()"
+        />
       </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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease;position:relative;z-index:1;flex-shrink:0;overflow:visible}.list-item.list-item--forced{background:#3b82f60d}.list-item .info{flex:1 1 auto;min-width:0}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-sm);font-weight:500;color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:flex-start;gap:4px;margin-top:1px}.list-item .info .dot-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease;margin-top:5px}.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-xxs);color:var(--ndt-text-muted);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.list-item .actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible}.pin-button{position:absolute;left:calc(-1 * var(--ndt-spacing-sm) - 2px);top:var(--ndt-spacing-xs);opacity:0;transition:opacity .2s ease;z-index:2}.list-item:hover .pin-button{opacity:.4}.list-item:hover .pin-button:hover{opacity:.7}.pin-button--pinned{opacity:1}.pin-button--pinned ::ng-deep .icon-button{opacity:1;color:var(--ndt-text-primary)}.apply-button--loading ::ng-deep .icon-button{opacity:1;animation:apply-pulse 1s ease-in-out infinite}.apply-button--success ::ng-deep .icon-button{opacity:1;color:#22c55e;border-color:#22c55e4d;background:#22c55e0d}.apply-button--error ::ng-deep .icon-button{opacity:1;color:#ef4444;border-color:#ef44444d;background:#ef44440d}.apply-icon{font-size:10px;line-height:1}.apply-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--ndt-border-primary);border-top-color:var(--ndt-text-primary);border-radius:50%;animation:apply-spin .6s linear infinite}@keyframes apply-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes apply-spin{to{transform:rotate(360deg)}}\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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;align-items:flex-start;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);transition:background-color .28s cubic-bezier(.22,1,.36,1);position:relative;z-index:1;flex-shrink:0;overflow:visible}.list-item.list-item--forced{background:rgba(var(--ndt-forced-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--ndt-forced-rgb),.25)}.list-item>.dot-indicator{flex:0 0 auto;display:inline-block;width:8px;height:8px;border-radius:50%;cursor:help;transition:background-color .26s cubic-bezier(.22,1,.36,1),border-color .26s cubic-bezier(.22,1,.36,1),box-shadow .26s cubic-bezier(.22,1,.36,1);margin-top:7px;box-sizing:border-box}@media (prefers-reduced-motion: reduce){.list-item,.list-item>.dot-indicator{transition:none}}.list-item>.dot-indicator.dot-indicator--on{background:var(--ndt-success);box-shadow:0 0 0 2px rgba(var(--ndt-success-rgb),.2)}.list-item>.dot-indicator.dot-indicator--off{background:transparent;border:1.5px solid var(--ndt-danger);box-shadow:0 0 0 2px rgba(var(--ndt-danger-rgb),.12)}.list-item .info{flex:1 1 auto;min-width:0}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-sm);font-weight:500;color:var(--ndt-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item .info p{margin:1px 0 0;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.list-item .actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible}.pin-button{flex:0 0 auto;opacity:0;transition:opacity .2s ease}.pin-button ::ng-deep .icon-button{width:14px;height:14px;padding:0;box-sizing:border-box;background:transparent}.pin-button ::ng-deep .icon-button ::ng-deep svg{width:12px;height:12px}.pin-button ::ng-deep .icon-button:hover{background:transparent;color:var(--ndt-text-primary);opacity:1}.list-item:hover .pin-button,.list-item:focus-within .pin-button{opacity:.5}.list-item:hover .pin-button:hover,.list-item:focus-within .pin-button:focus-visible{opacity:1}.pin-button--pinned{opacity:1}.pin-button--pinned ::ng-deep .icon-button{opacity:1;color:var(--ndt-primary);background:transparent}.copy-button{appearance:none;border:0;background:transparent;color:var(--ndt-text-muted);width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:12px;line-height:1;opacity:0;transition:opacity .2s ease,color .15s ease,background-color .15s ease}.copy-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.copy-button:focus-visible{opacity:1;outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.copy-button .copy-icon{font-family:ui-monospace,monospace}.list-item:hover .copy-button,.list-item:focus-within .copy-button{opacity:.6}.list-item:hover .copy-button:hover{opacity:1}.copy-button--copied{opacity:1!important;color:var(--ndt-success)}.apply-button--loading ::ng-deep .icon-button{opacity:1;animation:apply-pulse 1s ease-in-out infinite}.apply-button--success ::ng-deep .icon-button{opacity:1;color:var(--ndt-success);border-color:rgba(var(--ndt-success-rgb),.3);background:rgba(var(--ndt-success-rgb),.05)}.apply-button--error ::ng-deep .icon-button{opacity:1;color:var(--ndt-danger);border-color:rgba(var(--ndt-danger-rgb),.3);background:rgba(var(--ndt-danger-rgb),.05)}.apply-icon{font-size:10px;line-height:1}.apply-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--ndt-border-primary);border-top-color:var(--ndt-text-primary);border-radius:50%;animation:apply-spin .6s linear infinite}@keyframes apply-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes apply-spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+/**
+ * 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 ToolbarListComponent {
+    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: ToolbarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListComponent, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);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-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;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: ToolbarListComponent, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);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-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;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"] }]
         }] });
 
 class ToolbarSelectComponent {
     constructor() {
+        this.elementRef = inject(ElementRef);
         this.devToolbarStateService = inject(ToolbarStateService);
         this.value = model();
         this.options = input.required();
@@ -2289,6 +2406,7 @@ class ToolbarSelectComponent {
             .toString(36)
             .slice(2, 11)}`;
         this.isOpen = signal(false);
+        this.triggerWidth = signal(0);
         this.isPlaceholder = computed(() => {
             const options = this.options();
             return !!options?.length && !options.some((opt) => opt.value === this.value());
@@ -2315,6 +2433,8 @@ class ToolbarSelectComponent {
         ];
     }
     toggle() {
+        const selectEl = this.elementRef.nativeElement.querySelector('.ndt-select');
+        this.triggerWidth.set(selectEl?.offsetWidth ?? 0);
         this.isOpen.update((v) => !v);
     }
     close() {
@@ -2352,6 +2472,7 @@ class ToolbarSelectComponent {
       [cdkConnectedOverlayOrigin]="trigger"
       [cdkConnectedOverlayOpen]="isOpen()"
       [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayMinWidth]="triggerWidth()"
       [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-select-overlay']"
       (overlayOutsideClick)="close()"
     >
@@ -2376,7 +2497,7 @@ class ToolbarSelectComponent {
         }
       </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-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:28px;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-xs);height:22px}.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.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:4px;min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:12px;height:12px;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:120px;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-medium);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-xs) var(--ndt-spacing-sm) var(--ndt-spacing-xs) var(--ndt-spacing-md);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.3;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:4px;width:3px;height:calc(100% - 8px);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:0}.select-menu-item:last-child{margin-bottom:0}.select-overlay{backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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$1.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 }); }
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:28px;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-xs);height:22px}.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.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:4px;min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:12px;height:12px;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:120px;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-medium);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-xs) var(--ndt-spacing-sm) var(--ndt-spacing-xs) var(--ndt-spacing-md);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.3;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:4px;width:3px;height:calc(100% - 8px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f;box-shadow:inset 0 0 0 2px rgba(var(--ndt-primary-rgb),.5)}.select-menu-item:first-child{margin-top:0}.select-menu-item:last-child{margin-bottom:0}.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.7", ngImport: i0, type: ToolbarSelectComponent, decorators: [{
             type: Component,
@@ -2407,6 +2528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       [cdkConnectedOverlayOrigin]="trigger"
       [cdkConnectedOverlayOpen]="isOpen()"
       [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayMinWidth]="triggerWidth()"
       [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-select-overlay']"
       (overlayOutsideClick)="close()"
     >
@@ -2431,20 +2553,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", 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-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:28px;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-xs);height:22px}.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.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:4px;min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:12px;height:12px;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:120px;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-medium);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-xs) var(--ndt-spacing-sm) var(--ndt-spacing-xs) var(--ndt-spacing-md);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.3;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:4px;width:3px;height:calc(100% - 8px);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:0}.select-menu-item:last-child{margin-bottom:0}.select-overlay{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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:28px;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-xs);height:22px}.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.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:4px;min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:12px;height:12px;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:120px;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-medium);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-xs) var(--ndt-spacing-sm) var(--ndt-spacing-xs) var(--ndt-spacing-md);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.3;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:4px;width:3px;height:calc(100% - 8px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f;box-shadow:inset 0 0 0 2px rgba(var(--ndt-primary-rgb),.5)}.select-menu-item:first-child{margin-top:0}.select-menu-item:last-child{margin-bottom:0}.select-overlay{backdrop-filter:blur(8px)}\n"] }]
         }] });
 
-class ToolbarToolButtonComponent {
+class ToolbarInputComponent {
     constructor() {
-        // Injects
-        this.state = inject(ToolbarStateService);
-        // Inputs
-        this.toolLabel = input.required();
-        this.toolId = input.required();
-        this.badge = input();
-        this.position = input('bottom');
-        // Outputs
-        this.open = output();
+        this.value = model.required();
+        this.type = input('text');
+        this.placeholder = input('');
+        this.ariaLabel = input('');
+        this.inputClass = input('input');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarInputComponent, 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()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:28px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus-visible{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.7", ngImport: i0, type: ToolbarInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
+    <input
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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-xs) var(--ndt-spacing-sm);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-xs);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:28px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus-visible{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 ToolbarToolHeaderComponent {
+    constructor() {
+        this.searchQuery = model('');
+        this.activeFilter = model('');
+        this.searchPlaceholder = input('Search...');
+        this.searchAriaLabel = input('');
+        this.filterOptions = input([]);
+        this.filterAriaLabel = input('Filter items');
+        /**
+         * Value to set when the user clicks an already-active filter chip
+         * (i.e., to "clear" the filter back to a default no-chip state).
+         * Defaults to 'all'.
+         */
+        this.defaultFilter = input('all');
+    }
+    clearSearch() {
+        this.searchQuery.set('');
+    }
+    onFilterClick(value) {
+        // Click an already-active chip to clear it back to the default
+        // (no chip visually selected when activeFilter === defaultFilter).
+        if (this.activeFilter() === value) {
+            this.activeFilter.set(this.defaultFilter());
+        }
+        else {
+            this.activeFilter.set(value);
+        }
+    }
+    onFilterKeydown(event, value) {
+        const options = this.filterOptions();
+        const index = options.findIndex((o) => o.value === value);
+        if (index === -1)
+            return;
+        let nextIndex = index;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            nextIndex = (index + 1) % options.length;
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            nextIndex = (index - 1 + options.length) % options.length;
+        }
+        else if (event.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (event.key === 'End') {
+            nextIndex = options.length - 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const next = options[nextIndex];
+        this.activeFilter.set(next.value);
+        const buttons = event.currentTarget.parentElement?.querySelectorAll('.filter-segment');
+        buttons?.[nextIndex]?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarToolHeaderComponent, isStandalone: true, selector: "ndt-tool-header", inputs: { searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchAriaLabel: { classPropertyName: "searchAriaLabel", publicName: "searchAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterAriaLabel: { classPropertyName: "filterAriaLabel", publicName: "filterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultFilter: { classPropertyName: "defaultFilter", publicName: "defaultFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchQuery: "searchQueryChange", activeFilter: "activeFilterChange" }, ngImport: i0, template: `
+    <div class="tool-header">
+      <div class="search-wrapper">
+        <ndt-input
+          [(value)]="searchQuery"
+          [placeholder]="searchPlaceholder()"
+          [ariaLabel]="searchAriaLabel() || searchPlaceholder()"
+        />
+        @if (searchQuery()) {
+          <button
+            type="button"
+            class="clear-button"
+            aria-label="Clear search"
+            (click)="clearSearch()"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        }
+      </div>
+
+      @if (filterOptions().length > 0) {
+        <div
+          class="filter-group"
+          role="radiogroup"
+          [attr.aria-label]="filterAriaLabel()"
+        >
+          @for (opt of filterOptions(); track opt.value) {
+            <button
+              type="button"
+              class="filter-segment"
+              [class.filter-segment--active]="opt.value === activeFilter()"
+              role="radio"
+              [attr.aria-checked]="opt.value === activeFilter()"
+              [attr.aria-label]="opt.ariaLabel || opt.label"
+              (click)="onFilterClick(opt.value)"
+              (keydown)="onFilterKeydown($event, opt.value)"
+            >
+              {{ opt.label }}
+            </button>
+          }
+        </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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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}.tool-header{display:flex;align-items:center;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);flex-shrink:0;flex-wrap:wrap}.search-wrapper{position:relative;flex:1 1 180px;min-width:0;display:flex}.search-wrapper ndt-input{flex:1;min-width:0;display:block}.clear-button{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;background:transparent;color:var(--ndt-text-muted);border-radius:50%;cursor:pointer;transition:background-color .15s ease,color .15s ease}.clear-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clear-button:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.clear-button span{font-size:14px;line-height:1}.filter-group{display:inline-flex;padding:2px;background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);flex:0 0 auto}.filter-segment{appearance:none;border:0;background:transparent;color:var(--ndt-text-muted);font-family:inherit;font-size:var(--ndt-font-size-xxs);font-weight:500;padding:3px var(--ndt-spacing-sm);border-radius:calc(var(--ndt-border-radius-medium) - 2px);cursor:pointer;transition:background-color .15s ease,color .15s ease;white-space:nowrap}.filter-segment:hover:not(.filter-segment--active){color:var(--ndt-text-primary)}.filter-segment:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.filter-segment--active{background:var(--ndt-background-secondary);color:var(--ndt-text-primary);box-shadow:0 1px 2px #0000000f}\n"], dependencies: [{ kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-tool-header', standalone: true, imports: [ToolbarInputComponent], template: `
+    <div class="tool-header">
+      <div class="search-wrapper">
+        <ndt-input
+          [(value)]="searchQuery"
+          [placeholder]="searchPlaceholder()"
+          [ariaLabel]="searchAriaLabel() || searchPlaceholder()"
+        />
+        @if (searchQuery()) {
+          <button
+            type="button"
+            class="clear-button"
+            aria-label="Clear search"
+            (click)="clearSearch()"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        }
+      </div>
+
+      @if (filterOptions().length > 0) {
+        <div
+          class="filter-group"
+          role="radiogroup"
+          [attr.aria-label]="filterAriaLabel()"
+        >
+          @for (opt of filterOptions(); track opt.value) {
+            <button
+              type="button"
+              class="filter-segment"
+              [class.filter-segment--active]="opt.value === activeFilter()"
+              role="radio"
+              [attr.aria-checked]="opt.value === activeFilter()"
+              [attr.aria-label]="opt.ariaLabel || opt.label"
+              (click)="onFilterClick(opt.value)"
+              (keydown)="onFilterKeydown($event, opt.value)"
+            >
+              {{ opt.label }}
+            </button>
+          }
+        </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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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}.tool-header{display:flex;align-items:center;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);flex-shrink:0;flex-wrap:wrap}.search-wrapper{position:relative;flex:1 1 180px;min-width:0;display:flex}.search-wrapper ndt-input{flex:1;min-width:0;display:block}.clear-button{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;background:transparent;color:var(--ndt-text-muted);border-radius:50%;cursor:pointer;transition:background-color .15s ease,color .15s ease}.clear-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clear-button:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.clear-button span{font-size:14px;line-height:1}.filter-group{display:inline-flex;padding:2px;background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);flex:0 0 auto}.filter-segment{appearance:none;border:0;background:transparent;color:var(--ndt-text-muted);font-family:inherit;font-size:var(--ndt-font-size-xxs);font-weight:500;padding:3px var(--ndt-spacing-sm);border-radius:calc(var(--ndt-border-radius-medium) - 2px);cursor:pointer;transition:background-color .15s ease,color .15s ease;white-space:nowrap}.filter-segment:hover:not(.filter-segment--active){color:var(--ndt-text-primary)}.filter-segment:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.filter-segment--active{background:var(--ndt-background-secondary);color:var(--ndt-text-primary);box-shadow:0 1px 2px #0000000f}\n"] }]
+        }] });
+
+class ToolbarToolButtonComponent {
+    constructor() {
+        // Injects
+        this.state = inject(ToolbarStateService);
+        // Inputs
+        this.toolLabel = input.required();
+        this.toolId = input.required();
+        this.badge = input();
+        this.position = input('bottom');
+        // Outputs
+        this.open = output();
         // Signals
         this.isActive = computed(() => this.state.activeToolId() === this.toolId());
         this.isToolbarVisible = this.state.isVisible;
@@ -2452,7 +2757,7 @@ class ToolbarToolButtonComponent {
         this.tooltip = computed(() => this.toolLabel());
         this.isTooltipVisible = computed(() => this.tooltip() && !this.isActive() && this.isToolbarVisible());
         // Properties
-        this.tooltipState = false;
+        this.tooltipState = signal(false);
         this.hideDelay = 3000;
     }
     // Public methods
@@ -2461,10 +2766,10 @@ class ToolbarToolButtonComponent {
         this.open.emit();
     }
     onMouseEnter() {
-        this.tooltipState = true;
+        this.tooltipState.set(true);
     }
     onMouseLeave() {
-        this.tooltipState = false;
+        this.tooltipState.set(false);
     }
     onEscape() {
         this.isFocused.set(false);
@@ -2490,7 +2795,7 @@ class ToolbarToolButtonComponent {
       @if (isTooltipVisible()) {
       <span
         class="tooltip"
-        [class.tooltip--visible]="tooltipState"
+        [class.tooltip--visible]="tooltipState()"
       >
         {{ tooltip() }}
       </span>
@@ -2500,7 +2805,7 @@ class ToolbarToolButtonComponent {
         <span class="tool-button__badge">{{ badge() }}</span>
       }
     </button>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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:30px;height:30px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative;border-radius:var(--ndt-border-radius-medium)}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:16px;height:16px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.1875rem;right:.125rem;background:linear-gradient(135deg,#fca5a5,#ef4444);color:#fff;border-radius:50%;width:.6875rem;height:.6875rem;font-size:.4375rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:.375rem .625rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip);opacity:0;transition:opacity .15s ease-out}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;border:5px solid transparent}:host(.tooltip-position-bottom) .tooltip{bottom:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-bottom) .tooltip:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-top) .tooltip{top:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-top) .tooltip:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-left) .tooltip{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-left) .tooltip:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-right) .tooltip{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-right) .tooltip:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ndt-tooltip-bg)}\n"], 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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:30px;height:30px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative;border-radius:var(--ndt-border-radius-medium)}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:16px;height:16px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.1875rem;right:.125rem;background:var(--ndt-danger);color:#fff;border-radius:50%;width:.6875rem;height:.6875rem;font-size:.4375rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:.375rem .625rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip);opacity:0;transition:opacity .15s ease-out}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;border:5px solid transparent}:host(.tooltip-position-bottom) .tooltip{bottom:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-bottom) .tooltip:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-top) .tooltip{top:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-top) .tooltip:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-left) .tooltip{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-left) .tooltip:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-right) .tooltip{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-right) .tooltip:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ndt-tooltip-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolButtonComponent, decorators: [{
             type: Component,
@@ -2520,7 +2825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       @if (isTooltipVisible()) {
       <span
         class="tooltip"
-        [class.tooltip--visible]="tooltipState"
+        [class.tooltip--visible]="tooltipState()"
       >
         {{ tooltip() }}
       </span>
@@ -2530,7 +2835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <span class="tool-button__badge">{{ badge() }}</span>
       }
     </button>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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:30px;height:30px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative;border-radius:var(--ndt-border-radius-medium)}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:16px;height:16px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.1875rem;right:.125rem;background:linear-gradient(135deg,#fca5a5,#ef4444);color:#fff;border-radius:50%;width:.6875rem;height:.6875rem;font-size:.4375rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:.375rem .625rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip);opacity:0;transition:opacity .15s ease-out}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;border:5px solid transparent}:host(.tooltip-position-bottom) .tooltip{bottom:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-bottom) .tooltip:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-top) .tooltip{top:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-top) .tooltip:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-left) .tooltip{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-left) .tooltip:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-right) .tooltip{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-right) .tooltip:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ndt-tooltip-bg)}\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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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:30px;height:30px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative;border-radius:var(--ndt-border-radius-medium)}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:16px;height:16px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.1875rem;right:.125rem;background:var(--ndt-danger);color:#fff;border-radius:50%;width:.6875rem;height:.6875rem;font-size:.4375rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:.375rem .625rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip);opacity:0;transition:opacity .15s ease-out}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;border:5px solid transparent}:host(.tooltip-position-bottom) .tooltip{bottom:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-bottom) .tooltip:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-top) .tooltip{top:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-top) .tooltip:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-left) .tooltip{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-left) .tooltip:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-right) .tooltip{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-right) .tooltip:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ndt-tooltip-bg)}\n"] }]
         }] });
 
 class ToolbarWindowComponent {
@@ -2592,7 +2897,7 @@ class ToolbarWindowComponent {
         <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-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;position:relative;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-spacing-md) var(--ndt-spacing-md) var(--ndt-spacing-xs);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);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:var(--ndt-font-size-md);line-height:1.2;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm);flex-shrink:0;position:relative;z-index:5}.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 }); }
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;position:relative;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-spacing-md) var(--ndt-spacing-md) var(--ndt-spacing-xs);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);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:1.25rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:#fff;padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm);flex-shrink:0;position:relative;z-index:5}.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.7", ngImport: i0, type: ToolbarWindowComponent, decorators: [{
             type: Component,
@@ -2636,7 +2941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <ng-content></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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;position:relative;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-spacing-md) var(--ndt-spacing-md) var(--ndt-spacing-xs);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);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:var(--ndt-font-size-md);line-height:1.2;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm);flex-shrink:0;position:relative;z-index:5}.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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;position:relative;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-spacing-md) var(--ndt-spacing-md) var(--ndt-spacing-xs);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);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:1.25rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:#fff;padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm);flex-shrink:0;position:relative;z-index:5}.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 ToolbarToolComponent {
@@ -2791,7 +3096,7 @@ class ToolbarToolComponent {
       </ng-template>
       }
     </div>
-  `, isInline: true, styles: [":host{display:flex;--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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ToolbarWindowComponent, selector: "ndt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: ToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["toolLabel", "toolId", "badge", "position"], outputs: ["open"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;--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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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: ToolbarWindowComponent, selector: "ndt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: ToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["toolLabel", "toolId", "badge", "position"], outputs: ["open"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolComponent, decorators: [{
             type: Component,
@@ -2838,9 +3143,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       </ng-template>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;--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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;--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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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"] }]
         }] });
 
+/**
+ * Partitions items into pinned + named groups + ungrouped sections, applying
+ * the same alphabetical-name ordering used elsewhere in the toolbar.
+ *
+ * Backward-compatible: if no item has a `group`, `groups` is `[]` and the
+ * result is equivalent to the legacy pinned-first flat list.
+ *
+ * Pure function — no side effects, returns a new object.
+ */
+function groupItems(items, pinnedIds) {
+    const byName = (a, b) => a.name.localeCompare(b.name);
+    const pinned = [];
+    const grouped = new Map();
+    const ungrouped = [];
+    for (const item of items) {
+        if (pinnedIds.has(item.id)) {
+            pinned.push(item);
+            continue;
+        }
+        if (item.group) {
+            const bucket = grouped.get(item.group);
+            if (bucket) {
+                bucket.push(item);
+            }
+            else {
+                grouped.set(item.group, [item]);
+            }
+        }
+        else {
+            ungrouped.push(item);
+        }
+    }
+    pinned.sort(byName);
+    ungrouped.sort(byName);
+    const groups = [...grouped.entries()]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([name, list]) => ({ name, items: list.sort(byName) }));
+    return { pinned, groups, ungrouped };
+}
+
 /**
  * Internal service for managing app features state and forced overrides.
  *
@@ -3130,6 +3475,7 @@ class ToolbarAppFeaturesToolComponent {
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
         this.pinnedIds = signal(new Set());
+        this.collapsedGroups = signal(new Set());
         this.features = this.appFeaturesService.features;
         // Computed badge count for forced values
         this.badgeCount = computed(() => {
@@ -3142,7 +3488,7 @@ class ToolbarAppFeaturesToolComponent {
         });
         this.hasNoFeatures = computed(() => this.features().length === 0);
         this.filteredFeatures = computed(() => {
-            const filtered = this.features().filter((feature) => {
+            return this.features().filter((feature) => {
                 const searchTerm = this.searchQuery().toLowerCase();
                 const featureName = feature.name.toLowerCase();
                 const featureDescription = feature.description?.toLowerCase() ?? '';
@@ -3155,16 +3501,13 @@ class ToolbarAppFeaturesToolComponent {
                     (this.activeFilter() === 'disabled' && !feature.isEnabled);
                 return matchesSearch && matchesFilter;
             });
-            const pinned = this.pinnedIds();
-            // Sort pinned first, then alphabetically within each group
-            return filtered.sort((a, b) => {
-                const aPinned = pinned.has(a.id);
-                const bPinned = pinned.has(b.id);
-                if (aPinned !== bPinned)
-                    return aPinned ? -1 : 1;
-                return a.name.localeCompare(b.name);
-            });
         });
+        this.groupedFeatures = computed(() => groupItems(this.filteredFeatures(), this.pinnedIds()));
+        this.flatFeatures = computed(() => {
+            const { pinned, ungrouped } = this.groupedFeatures();
+            return [...pinned, ...ungrouped];
+        });
+        this.hasAnyGroups = computed(() => this.groupedFeatures().groups.length > 0);
         this.hasNoFilteredFeatures = computed(() => this.filteredFeatures().length === 0);
         // Other properties
         this.options = {
@@ -3175,7 +3518,6 @@ class ToolbarAppFeaturesToolComponent {
             id: 'ndt-app-features',
         };
         this.filterOptions = [
-            { value: 'all', label: 'All Features' },
             { value: 'forced', label: 'Forced' },
             { value: 'enabled', label: 'Enabled' },
             { value: 'disabled', label: 'Disabled' },
@@ -3195,6 +3537,7 @@ class ToolbarAppFeaturesToolComponent {
                 filter: this.activeFilter(),
                 sortOrder: 'asc',
                 pinnedIds: [...this.pinnedIds()],
+                collapsedGroups: [...this.collapsedGroups()],
             };
             this.storageService.set(this.VIEW_STATE_KEY, state);
         });
@@ -3211,6 +3554,9 @@ class ToolbarAppFeaturesToolComponent {
                 if (saved.pinnedIds?.length) {
                     this.pinnedIds.set(new Set(saved.pinnedIds));
                 }
+                if (saved.collapsedGroups?.length) {
+                    this.collapsedGroups.set(new Set(saved.collapsedGroups));
+                }
             }
         }
         catch {
@@ -3272,6 +3618,21 @@ class ToolbarAppFeaturesToolComponent {
             return next;
         });
     }
+    isCollapsed(name) {
+        return this.collapsedGroups().has(name);
+    }
+    setCollapsed(name, collapsed) {
+        this.collapsedGroups.update((set) => {
+            const next = new Set(set);
+            if (collapsed) {
+                next.add(name);
+            }
+            else {
+                next.delete(name);
+            }
+            return next;
+        });
+    }
     // Protected methods
     /**
      * Get the dropdown value for a feature's current state.
@@ -3293,21 +3654,15 @@ class ToolbarAppFeaturesToolComponent {
       [badge]="badgeCount()"
     >
       <div class="container">
-        <div class="tool-header">
-          <ndt-input
-            [value]="searchQuery()"
-            (valueChange)="onSearchChange($event)"
-            placeholder="Search features..."
-          />
-          <div class="filter-wrapper">
-            <ndt-select
-              [value]="activeFilter()"
-              [options]="filterOptions"
-              [size]="'medium'"
-              (valueChange)="onFilterChange($event)"
-            />
-          </div>
-        </div>
+        <ndt-tool-header
+          [(searchQuery)]="searchQuery"
+          [activeFilter]="activeFilter()"
+          (activeFilterChange)="onFilterChange($event)"
+          searchPlaceholder="Search features by name or description"
+          searchAriaLabel="Search app features"
+          filterAriaLabel="Filter app features by state"
+          [filterOptions]="filterOptions"
+        />
 
         <ndt-list
           [hasItems]="!hasNoFeatures()"
@@ -3316,41 +3671,107 @@ class ToolbarAppFeaturesToolComponent {
           [emptyHint]="'Call setAvailableOptions() to configure features'"
           noResultsMessage="No features match your filter"
         >
-          @for (feature of filteredFeatures(); track feature.id) {
-            <ndt-list-item
-              [title]="feature.name"
-              [description]="feature.description"
-              [isForced]="feature.isForced"
-              [currentValue]="feature.isEnabled"
-              [originalValue]="feature.originalValue"
-              [isPinned]="pinnedIds().has(feature.id)"
-              (pinToggle)="togglePin(feature.id)"
-              [showApply]="hasApplyCallback()"
-              [applyState]="getApplyState(feature.id)"
-              (applyToSource)="onApplyToSource(feature.id, feature.isEnabled)"
-            >
-              <ndt-select
-                [value]="getFeatureValue(feature)"
-                [options]="featureValueOptions"
-                [ariaLabel]="'Set value for ' + feature.name"
-                (valueChange)="onFeatureChange(feature.id, $event ?? '')"
-                size="small"
+          @if (hasAnyGroups()) {
+            @if (groupedFeatures().pinned.length) {
+              <ndt-list-group
+                name="Pinned"
+                [count]="groupedFeatures().pinned.length"
+                [collapsed]="isCollapsed('Pinned')"
+                (collapsedChange)="setCollapsed('Pinned', $event)"
+              >
+                @for (feature of groupedFeatures().pinned; track feature.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      featureItem;
+                      context: { $implicit: feature }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @for (group of groupedFeatures().groups; track group.name) {
+              <ndt-list-group
+                [name]="group.name"
+                [count]="group.items.length"
+                [collapsed]="isCollapsed(group.name)"
+                (collapsedChange)="setCollapsed(group.name, $event)"
+              >
+                @for (feature of group.items; track feature.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      featureItem;
+                      context: { $implicit: feature }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @if (groupedFeatures().ungrouped.length) {
+              <ndt-list-group
+                name="Other"
+                [count]="groupedFeatures().ungrouped.length"
+                [collapsed]="isCollapsed('Other')"
+                (collapsedChange)="setCollapsed('Other', $event)"
+              >
+                @for (feature of groupedFeatures().ungrouped; track feature.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      featureItem;
+                      context: { $implicit: feature }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+          } @else {
+            @for (feature of flatFeatures(); track feature.id) {
+              <ng-container
+                *ngTemplateOutlet="
+                  featureItem;
+                  context: { $implicit: feature }
+                "
               />
-            </ndt-list-item>
+            }
           }
         </ndt-list>
+
+        <ng-template #featureItem let-feature>
+          <ndt-list-item
+            [title]="feature.name"
+            [description]="feature.description"
+            [isForced]="feature.isForced"
+            [currentValue]="feature.isEnabled"
+            [originalValue]="feature.originalValue"
+            [isPinned]="pinnedIds().has(feature.id)"
+            [copyableId]="feature.id"
+            (pinToggle)="togglePin(feature.id)"
+            [showApply]="hasApplyCallback()"
+            [applyState]="getApplyState(feature.id)"
+            (applyToSource)="onApplyToSource(feature.id, feature.isEnabled)"
+          >
+            <ndt-select
+              [value]="getFeatureValue(feature)"
+              [options]="featureValueOptions"
+              [ariaLabel]="'Set value for ' + feature.name"
+              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+              size="small"
+            />
+          </ndt-list-item>
+        </ng-template>
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarToolHeaderComponent, selector: "ndt-tool-header", inputs: ["searchQuery", "activeFilter", "searchPlaceholder", "searchAriaLabel", "filterOptions", "filterAriaLabel", "defaultFilter"], outputs: ["searchQueryChange", "activeFilterChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListGroupComponent, selector: "ndt-list-group", inputs: ["name", "count", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned", "copyableId"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-app-features-tool', standalone: true, imports: [
+                        NgTemplateOutlet,
                         FormsModule,
                         ToolbarToolComponent,
-                        ToolbarInputComponent,
+                        ToolbarToolHeaderComponent,
                         ToolbarSelectComponent,
                         ToolbarListComponent,
+                        ToolbarListGroupComponent,
                         ToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
@@ -3360,21 +3781,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       [badge]="badgeCount()"
     >
       <div class="container">
-        <div class="tool-header">
-          <ndt-input
-            [value]="searchQuery()"
-            (valueChange)="onSearchChange($event)"
-            placeholder="Search features..."
-          />
-          <div class="filter-wrapper">
-            <ndt-select
-              [value]="activeFilter()"
-              [options]="filterOptions"
-              [size]="'medium'"
-              (valueChange)="onFilterChange($event)"
-            />
-          </div>
-        </div>
+        <ndt-tool-header
+          [(searchQuery)]="searchQuery"
+          [activeFilter]="activeFilter()"
+          (activeFilterChange)="onFilterChange($event)"
+          searchPlaceholder="Search features by name or description"
+          searchAriaLabel="Search app features"
+          filterAriaLabel="Filter app features by state"
+          [filterOptions]="filterOptions"
+        />
 
         <ndt-list
           [hasItems]="!hasNoFeatures()"
@@ -3383,32 +3798,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
           [emptyHint]="'Call setAvailableOptions() to configure features'"
           noResultsMessage="No features match your filter"
         >
-          @for (feature of filteredFeatures(); track feature.id) {
-            <ndt-list-item
-              [title]="feature.name"
-              [description]="feature.description"
-              [isForced]="feature.isForced"
-              [currentValue]="feature.isEnabled"
-              [originalValue]="feature.originalValue"
-              [isPinned]="pinnedIds().has(feature.id)"
-              (pinToggle)="togglePin(feature.id)"
-              [showApply]="hasApplyCallback()"
-              [applyState]="getApplyState(feature.id)"
-              (applyToSource)="onApplyToSource(feature.id, feature.isEnabled)"
-            >
-              <ndt-select
-                [value]="getFeatureValue(feature)"
-                [options]="featureValueOptions"
-                [ariaLabel]="'Set value for ' + feature.name"
-                (valueChange)="onFeatureChange(feature.id, $event ?? '')"
-                size="small"
+          @if (hasAnyGroups()) {
+            @if (groupedFeatures().pinned.length) {
+              <ndt-list-group
+                name="Pinned"
+                [count]="groupedFeatures().pinned.length"
+                [collapsed]="isCollapsed('Pinned')"
+                (collapsedChange)="setCollapsed('Pinned', $event)"
+              >
+                @for (feature of groupedFeatures().pinned; track feature.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      featureItem;
+                      context: { $implicit: feature }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @for (group of groupedFeatures().groups; track group.name) {
+              <ndt-list-group
+                [name]="group.name"
+                [count]="group.items.length"
+                [collapsed]="isCollapsed(group.name)"
+                (collapsedChange)="setCollapsed(group.name, $event)"
+              >
+                @for (feature of group.items; track feature.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      featureItem;
+                      context: { $implicit: feature }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @if (groupedFeatures().ungrouped.length) {
+              <ndt-list-group
+                name="Other"
+                [count]="groupedFeatures().ungrouped.length"
+                [collapsed]="isCollapsed('Other')"
+                (collapsedChange)="setCollapsed('Other', $event)"
+              >
+                @for (feature of groupedFeatures().ungrouped; track feature.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      featureItem;
+                      context: { $implicit: feature }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+          } @else {
+            @for (feature of flatFeatures(); track feature.id) {
+              <ng-container
+                *ngTemplateOutlet="
+                  featureItem;
+                  context: { $implicit: feature }
+                "
               />
-            </ndt-list-item>
+            }
           }
         </ndt-list>
+
+        <ng-template #featureItem let-feature>
+          <ndt-list-item
+            [title]="feature.name"
+            [description]="feature.description"
+            [isForced]="feature.isForced"
+            [currentValue]="feature.isEnabled"
+            [originalValue]="feature.originalValue"
+            [isPinned]="pinnedIds().has(feature.id)"
+            [copyableId]="feature.id"
+            (pinToggle)="togglePin(feature.id)"
+            [showApply]="hasApplyCallback()"
+            [applyState]="getApplyState(feature.id)"
+            (applyToSource)="onApplyToSource(feature.id, feature.isEnabled)"
+          >
+            <ndt-select
+              [value]="getFeatureValue(feature)"
+              [options]="featureValueOptions"
+              [ariaLabel]="'Set value for ' + feature.name"
+              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+              size="small"
+            />
+          </ndt-list-item>
+        </ng-template>
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToolbarInternalFeatureFlagService {
@@ -3547,6 +4026,7 @@ class ToolbarFeatureFlagsToolComponent {
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
         this.pinnedIds = signal(new Set());
+        this.collapsedGroups = signal(new Set());
         this.flags = this.featureFlags.flags;
         // Computed badge count for forced values
         this.badgeCount = computed(() => {
@@ -3558,30 +4038,30 @@ class ToolbarFeatureFlagsToolComponent {
             return count.toString();
         });
         this.hasNoFlags = computed(() => this.flags().length === 0);
+        // Filter step — search + filter applied to the raw flag list
         this.filteredFlags = computed(() => {
-            const filtered = this.flags().filter((flag) => {
+            return this.flags().filter((flag) => {
                 const searchTerm = this.searchQuery().toLowerCase();
                 const flagName = flag.name.toLowerCase();
                 const flagDescription = flag.description?.toLowerCase() ?? '';
                 const matchesSearch = !this.searchQuery() ||
-                    flagName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    flagDescription.toLowerCase().includes(searchTerm.toLowerCase());
+                    flagName.includes(searchTerm) ||
+                    flagDescription.includes(searchTerm);
                 const matchesFilter = this.activeFilter() === 'all' ||
                     (this.activeFilter() === 'forced' && flag.isForced) ||
                     (this.activeFilter() === 'enabled' && flag.isEnabled) ||
                     (this.activeFilter() === 'disabled' && !flag.isEnabled);
                 return matchesSearch && matchesFilter;
             });
-            const pinned = this.pinnedIds();
-            // Sort pinned first, then alphabetically within each group
-            return filtered.sort((a, b) => {
-                const aPinned = pinned.has(a.id);
-                const bPinned = pinned.has(b.id);
-                if (aPinned !== bPinned)
-                    return aPinned ? -1 : 1;
-                return a.name.localeCompare(b.name);
-            });
         });
+        // Grouped view — pinned + named groups + ungrouped
+        this.groupedFlags = computed(() => groupItems(this.filteredFlags(), this.pinnedIds()));
+        // Backward-compat flat list (pinned-first then ungrouped) used when no item has a group
+        this.flatFlags = computed(() => {
+            const { pinned, ungrouped } = this.groupedFlags();
+            return [...pinned, ...ungrouped];
+        });
+        this.hasAnyGroups = computed(() => this.groupedFlags().groups.length > 0);
         this.hasNoFilteredFlags = computed(() => this.filteredFlags().length === 0);
         // Other properties
         this.options = {
@@ -3592,7 +4072,6 @@ class ToolbarFeatureFlagsToolComponent {
             id: 'ndt-feature-flags',
         };
         this.filterOptions = [
-            { value: 'all', label: 'All Flags' },
             { value: 'forced', label: 'Forced' },
             { value: 'enabled', label: 'Enabled' },
             { value: 'disabled', label: 'Disabled' },
@@ -3612,6 +4091,7 @@ class ToolbarFeatureFlagsToolComponent {
                 filter: this.activeFilter(),
                 sortOrder: 'asc',
                 pinnedIds: [...this.pinnedIds()],
+                collapsedGroups: [...this.collapsedGroups()],
             };
             this.storageService.set(this.VIEW_STATE_KEY, state);
         });
@@ -3628,6 +4108,9 @@ class ToolbarFeatureFlagsToolComponent {
                 if (saved.pinnedIds?.length) {
                     this.pinnedIds.set(new Set(saved.pinnedIds));
                 }
+                if (saved.collapsedGroups?.length) {
+                    this.collapsedGroups.set(new Set(saved.collapsedGroups));
+                }
             }
         }
         catch {
@@ -3675,6 +4158,21 @@ class ToolbarFeatureFlagsToolComponent {
             return next;
         });
     }
+    isCollapsed(name) {
+        return this.collapsedGroups().has(name);
+    }
+    setCollapsed(name, collapsed) {
+        this.collapsedGroups.update((set) => {
+            const next = new Set(set);
+            if (collapsed) {
+                next.add(name);
+            }
+            else {
+                next.delete(name);
+            }
+            return next;
+        });
+    }
     // Protected methods
     getFlagValue(flag) {
         if (!flag.isForced)
@@ -3693,21 +4191,15 @@ class ToolbarFeatureFlagsToolComponent {
       [badge]="badgeCount()"
     >
       <div class="container">
-        <div class="tool-header">
-          <ndt-input
-            [value]="searchQuery()"
-            (valueChange)="onSearchChange($event)"
-            placeholder="Search..."
-          />
-          <div class="filter-wrapper">
-            <ndt-select
-              [value]="activeFilter()"
-              [options]="filterOptions"
-              [size]="'medium'"
-              (valueChange)="onFilterChange($event)"
-            />
-          </div>
-        </div>
+        <ndt-tool-header
+          [(searchQuery)]="searchQuery"
+          [activeFilter]="activeFilter()"
+          (activeFilterChange)="onFilterChange($event)"
+          searchPlaceholder="Search flags by name or description"
+          searchAriaLabel="Search feature flags"
+          filterAriaLabel="Filter feature flags by state"
+          [filterOptions]="filterOptions"
+        />
 
         <ndt-list
           [hasItems]="!hasNoFlags()"
@@ -3715,7 +4207,59 @@ class ToolbarFeatureFlagsToolComponent {
           emptyMessage="No flags found"
           noResultsMessage="No flags found matching your filter"
         >
-          @for (flag of filteredFlags(); track flag.id) {
+          @if (hasAnyGroups()) {
+            @if (groupedFlags().pinned.length) {
+              <ndt-list-group
+                name="Pinned"
+                [count]="groupedFlags().pinned.length"
+                [collapsed]="isCollapsed('Pinned')"
+                (collapsedChange)="setCollapsed('Pinned', $event)"
+              >
+                @for (flag of groupedFlags().pinned; track flag.id) {
+                  <ng-container
+                    *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+                  />
+                }
+              </ndt-list-group>
+            }
+            @for (group of groupedFlags().groups; track group.name) {
+              <ndt-list-group
+                [name]="group.name"
+                [count]="group.items.length"
+                [collapsed]="isCollapsed(group.name)"
+                (collapsedChange)="setCollapsed(group.name, $event)"
+              >
+                @for (flag of group.items; track flag.id) {
+                  <ng-container
+                    *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+                  />
+                }
+              </ndt-list-group>
+            }
+            @if (groupedFlags().ungrouped.length) {
+              <ndt-list-group
+                name="Other"
+                [count]="groupedFlags().ungrouped.length"
+                [collapsed]="isCollapsed('Other')"
+                (collapsedChange)="setCollapsed('Other', $event)"
+              >
+                @for (flag of groupedFlags().ungrouped; track flag.id) {
+                  <ng-container
+                    *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+                  />
+                }
+              </ndt-list-group>
+            }
+          } @else {
+            @for (flag of flatFlags(); track flag.id) {
+              <ng-container
+                *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+              />
+            }
+          }
+        </ndt-list>
+
+        <ng-template #flagItem let-flag>
           <ndt-list-item
             [title]="flag.name"
             [description]="flag.description"
@@ -3723,6 +4267,7 @@ class ToolbarFeatureFlagsToolComponent {
             [currentValue]="flag.isEnabled"
             [originalValue]="flag.originalValue"
             [isPinned]="pinnedIds().has(flag.id)"
+            [copyableId]="flag.id"
             (pinToggle)="togglePin(flag.id)"
             [showApply]="hasApplyCallback()"
             [applyState]="getApplyState(flag.id)"
@@ -3737,20 +4282,21 @@ class ToolbarFeatureFlagsToolComponent {
               size="small"
             />
           </ndt-list-item>
-          }
-        </ndt-list>
+        </ng-template>
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarToolHeaderComponent, selector: "ndt-tool-header", inputs: ["searchQuery", "activeFilter", "searchPlaceholder", "searchAriaLabel", "filterOptions", "filterAriaLabel", "defaultFilter"], outputs: ["searchQueryChange", "activeFilterChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListGroupComponent, selector: "ndt-list-group", inputs: ["name", "count", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned", "copyableId"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagsToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-feature-flags-tool', standalone: true, imports: [
+                        NgTemplateOutlet,
                         FormsModule,
                         ToolbarToolComponent,
-                        ToolbarInputComponent,
+                        ToolbarToolHeaderComponent,
                         ToolbarSelectComponent,
                         ToolbarListComponent,
+                        ToolbarListGroupComponent,
                         ToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
@@ -3760,21 +4306,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       [badge]="badgeCount()"
     >
       <div class="container">
-        <div class="tool-header">
-          <ndt-input
-            [value]="searchQuery()"
-            (valueChange)="onSearchChange($event)"
-            placeholder="Search..."
-          />
-          <div class="filter-wrapper">
-            <ndt-select
-              [value]="activeFilter()"
-              [options]="filterOptions"
-              [size]="'medium'"
-              (valueChange)="onFilterChange($event)"
-            />
-          </div>
-        </div>
+        <ndt-tool-header
+          [(searchQuery)]="searchQuery"
+          [activeFilter]="activeFilter()"
+          (activeFilterChange)="onFilterChange($event)"
+          searchPlaceholder="Search flags by name or description"
+          searchAriaLabel="Search feature flags"
+          filterAriaLabel="Filter feature flags by state"
+          [filterOptions]="filterOptions"
+        />
 
         <ndt-list
           [hasItems]="!hasNoFlags()"
@@ -3782,7 +4322,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
           emptyMessage="No flags found"
           noResultsMessage="No flags found matching your filter"
         >
-          @for (flag of filteredFlags(); track flag.id) {
+          @if (hasAnyGroups()) {
+            @if (groupedFlags().pinned.length) {
+              <ndt-list-group
+                name="Pinned"
+                [count]="groupedFlags().pinned.length"
+                [collapsed]="isCollapsed('Pinned')"
+                (collapsedChange)="setCollapsed('Pinned', $event)"
+              >
+                @for (flag of groupedFlags().pinned; track flag.id) {
+                  <ng-container
+                    *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+                  />
+                }
+              </ndt-list-group>
+            }
+            @for (group of groupedFlags().groups; track group.name) {
+              <ndt-list-group
+                [name]="group.name"
+                [count]="group.items.length"
+                [collapsed]="isCollapsed(group.name)"
+                (collapsedChange)="setCollapsed(group.name, $event)"
+              >
+                @for (flag of group.items; track flag.id) {
+                  <ng-container
+                    *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+                  />
+                }
+              </ndt-list-group>
+            }
+            @if (groupedFlags().ungrouped.length) {
+              <ndt-list-group
+                name="Other"
+                [count]="groupedFlags().ungrouped.length"
+                [collapsed]="isCollapsed('Other')"
+                (collapsedChange)="setCollapsed('Other', $event)"
+              >
+                @for (flag of groupedFlags().ungrouped; track flag.id) {
+                  <ng-container
+                    *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+                  />
+                }
+              </ndt-list-group>
+            }
+          } @else {
+            @for (flag of flatFlags(); track flag.id) {
+              <ng-container
+                *ngTemplateOutlet="flagItem; context: { $implicit: flag }"
+              />
+            }
+          }
+        </ndt-list>
+
+        <ng-template #flagItem let-flag>
           <ndt-list-item
             [title]="flag.name"
             [description]="flag.description"
@@ -3790,6 +4382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             [currentValue]="flag.isEnabled"
             [originalValue]="flag.originalValue"
             [isPinned]="pinnedIds().has(flag.id)"
+            [copyableId]="flag.id"
             (pinToggle)="togglePin(flag.id)"
             [showApply]="hasApplyCallback()"
             [applyState]="getApplyState(flag.id)"
@@ -3804,11 +4397,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               size="small"
             />
           </ndt-list-item>
-          }
-        </ndt-list>
+        </ng-template>
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToolbarButtonComponent {
@@ -3837,7 +4429,7 @@ class ToolbarButtonComponent {
       }
       <ng-content />
     </button>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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: ToolbarIconComponent, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarButtonComponent, decorators: [{
             type: Component,
@@ -3857,93 +4449,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       }
       <ng-content />
     </button>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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"] }]
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 ToolbarCardComponent {
+class ToolbarConfirmDialogComponent {
     constructor() {
-        this.click = signal(undefined);
-        this.isHovered = signal(false);
+        this.title = input.required();
+        this.message = input('');
+        this.confirmLabel = input('Confirm');
+        this.cancelLabel = input('Cancel');
+        this.danger = input(false);
+        this.confirmed = output();
+        this.cancelled = output();
+        this.dialogRef = viewChild.required('dialog');
+        this.result = null;
     }
-    onClick() {
-        this.click.set();
+    show() {
+        this.result = null;
+        this.dialogRef().nativeElement.showModal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ToolbarCardComponent, isStandalone: true, selector: "ndt-card", ngImport: i0, template: `
-    <div
-      class="card"
-      role="button"
-      tabindex="0"
-      (click)="onClick()"
-      (keydown.enter)="onClick()"
-      (keydown.space)="onClick()"
-      [class.card--hover]="isHovered()"
-      (mouseenter)="isHovered.set(true)"
-      (mouseleave)="isHovered.set(false)"
-    >
-      <ng-content></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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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.7", ngImport: i0, type: ToolbarCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ndt-card', standalone: true, template: `
-    <div
-      class="card"
-      role="button"
-      tabindex="0"
-      (click)="onClick()"
-      (keydown.enter)="onClick()"
-      (keydown.space)="onClick()"
-      [class.card--hover]="isHovered()"
-      (mouseenter)="isHovered.set(true)"
-      (mouseleave)="isHovered.set(false)"
-    >
-      <ng-content></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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 ToolbarClickableCardComponent {
-    constructor() {
-        this.icon = input.required();
-        this.title = input.required();
-        this.subtitle = input.required();
-        this.click = signal(undefined);
+    confirm() {
+        this.result = 'confirm';
+        this.dialogRef().nativeElement.close();
     }
-    onClick() {
-        this.click.set();
+    cancel() {
+        this.result = 'cancel';
+        this.dialogRef().nativeElement.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarClickableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarClickableCardComponent, 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">
-          <ndt-icon [name]="icon()" />
-        </div>
-        <div class="clickable-card__content">
-          <div class="clickable-card__title">{{ title() }}</div>
-          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
+    onBackdropClick(event) {
+        if (event.target === this.dialogRef().nativeElement) {
+            this.cancel();
+        }
+    }
+    onDialogClose() {
+        if (this.result === 'confirm') {
+            this.confirmed.emit();
+        }
+        else {
+            this.cancelled.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarConfirmDialogComponent, isStandalone: true, selector: "ndt-confirm-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <dialog
+      #dialog
+      class="confirm-dialog"
+      tabindex="-1"
+      [class.confirm-dialog--danger]="danger()"
+      (click)="onBackdropClick($event)"
+      (keydown.escape)="cancel()"
+      (close)="onDialogClose()"
+    >
+      <div class="confirm-dialog__content">
+        <h2 class="confirm-dialog__title">{{ title() }}</h2>
+        @if (message()) {
+          <p class="confirm-dialog__message">{{ message() }}</p>
+        }
+        <div class="confirm-dialog__actions">
+          <button
+            type="button"
+            class="confirm-dialog__btn confirm-dialog__btn--secondary"
+            (click)="cancel()"
+          >
+            {{ cancelLabel() }}
+          </button>
+          <button
+            type="button"
+            class="confirm-dialog__btn"
+            [class.confirm-dialog__btn--danger]="danger()"
+            [class.confirm-dialog__btn--primary]="!danger()"
+            (click)="confirm()"
+          >
+            {{ confirmLabel() }}
+          </button>
         </div>
       </div>
-    </ndt-card>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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: ToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    </dialog>
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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)}.confirm-dialog{padding:0;border:0;background:var(--ndt-bg-primary);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-window);max-width:380px;width:calc(100vw - 2rem);font-family:inherit;contain:layout style}.confirm-dialog::backdrop{background:#00000059;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.confirm-dialog__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-lg)}.confirm-dialog__title{margin:0;font-size:var(--ndt-font-size-md);font-weight:600;color:var(--ndt-text-primary);line-height:1.3}.confirm-dialog__message{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs)}.confirm-dialog__btn{appearance:none;border:1px solid transparent;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.confirm-dialog__btn:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.confirm-dialog__btn--secondary{background:transparent;border-color:var(--ndt-border-primary);color:var(--ndt-text-primary)}.confirm-dialog__btn--secondary:hover{background:var(--ndt-hover-bg)}.confirm-dialog__btn--primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary)}.confirm-dialog__btn--primary:hover{filter:brightness(.95)}.confirm-dialog__btn--danger{background:var(--ndt-danger);color:#fff}.confirm-dialog__btn--danger:hover{filter:brightness(.95)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarClickableCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-clickable-card', standalone: true, imports: [ToolbarCardComponent, ToolbarIconComponent], template: `
-    <ndt-card (clicked)="onClick()">
-      <div class="clickable-card">
-        <div class="clickable-card__icon">
-          <ndt-icon [name]="icon()" />
-        </div>
-        <div class="clickable-card__content">
-          <div class="clickable-card__title">{{ title() }}</div>
-          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
+            args: [{ selector: 'ndt-confirm-dialog', standalone: true, template: `
+    <dialog
+      #dialog
+      class="confirm-dialog"
+      tabindex="-1"
+      [class.confirm-dialog--danger]="danger()"
+      (click)="onBackdropClick($event)"
+      (keydown.escape)="cancel()"
+      (close)="onDialogClose()"
+    >
+      <div class="confirm-dialog__content">
+        <h2 class="confirm-dialog__title">{{ title() }}</h2>
+        @if (message()) {
+          <p class="confirm-dialog__message">{{ message() }}</p>
+        }
+        <div class="confirm-dialog__actions">
+          <button
+            type="button"
+            class="confirm-dialog__btn confirm-dialog__btn--secondary"
+            (click)="cancel()"
+          >
+            {{ cancelLabel() }}
+          </button>
+          <button
+            type="button"
+            class="confirm-dialog__btn"
+            [class.confirm-dialog__btn--danger]="danger()"
+            [class.confirm-dialog__btn--primary]="!danger()"
+            (click)="confirm()"
+          >
+            {{ confirmLabel() }}
+          </button>
         </div>
       </div>
-    </ndt-card>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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"] }]
+    </dialog>
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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)}.confirm-dialog{padding:0;border:0;background:var(--ndt-bg-primary);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-window);max-width:380px;width:calc(100vw - 2rem);font-family:inherit;contain:layout style}.confirm-dialog::backdrop{background:#00000059;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.confirm-dialog__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-lg)}.confirm-dialog__title{margin:0;font-size:var(--ndt-font-size-md);font-weight:600;color:var(--ndt-text-primary);line-height:1.3}.confirm-dialog__message{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs)}.confirm-dialog__btn{appearance:none;border:1px solid transparent;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.confirm-dialog__btn:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.confirm-dialog__btn--secondary{background:transparent;border-color:var(--ndt-border-primary);color:var(--ndt-text-primary)}.confirm-dialog__btn--secondary:hover{background:var(--ndt-hover-bg)}.confirm-dialog__btn--primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary)}.confirm-dialog__btn--primary:hover{filter:brightness(.95)}.confirm-dialog__btn--danger{background:var(--ndt-danger);color:#fff}.confirm-dialog__btn--danger:hover{filter:brightness(.95)}\n"] }]
         }] });
 
 class ToolbarLinkButtonComponent {
@@ -3966,7 +4587,7 @@ class ToolbarLinkButtonComponent {
         <ng-content></ng-content>
       </span>
     </a>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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: ToolbarIconComponent, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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:color .15s ease}.link-button:hover{color:var(--ndt-text-primary)}.link-button:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px;border-radius:var(--ndt-border-radius-small)}.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:background-color .15s ease}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLinkButtonComponent, decorators: [{
             type: Component,
@@ -3984,7 +4605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <ng-content></ng-content>
       </span>
     </a>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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"] }]
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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:color .15s ease}.link-button:hover{color:var(--ndt-text-primary)}.link-button:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px;border-radius:var(--ndt-border-radius-small)}.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:background-color .15s ease}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"] }]
         }] });
 
 const TOOLBAR_POSITIONS = [
@@ -4062,6 +4683,7 @@ class ToolbarHomeToolComponent {
                 label: 'Community',
             },
         ];
+        this.resetDialog = viewChild('resetDialog');
     }
     onPositionChange(position) {
         this.state.setPosition(position);
@@ -4105,11 +4727,14 @@ class ToolbarHomeToolComponent {
         input.click();
     }
     onResetSettings() {
+        this.resetDialog()?.show();
+    }
+    confirmReset() {
         this.storageService.clearAllSettings();
         window.location.reload();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarHomeToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarHomeToolComponent, isStandalone: true, selector: "ndt-home-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarHomeToolComponent, isStandalone: true, selector: "ndt-home-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resetDialog", first: true, predicate: ["resetDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ndt-toolbar-tool [options]="options" toolTitle="Home" icon="angular">
       <section class="settings">
         <div class="settings-container">
@@ -4136,35 +4761,53 @@ class ToolbarHomeToolComponent {
 
           <div class="instruction">
             <div class="instruction__label">
-              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-text">Export Settings</span>
               <span class="instruction__label-description">
-                Reset all settings to their default values
+                Download the current setup to share or reproduce in tests
               </span>
             </div>
             <div class="instruction__control">
-              <div class="instruction__control-button">
-                <ndt-button
-                  variant="icon"
-                  icon="trash"
-                  ariaLabel="Reset all settings"
-                  (click)="onResetSettings()"
-                />
-              </div>
+              <ndt-button
+                variant="icon"
+                icon="export"
+                ariaLabel="Export settings"
+                (click)="onExportSettings()"
+              />
             </div>
           </div>
-          <div class="settings-actions">
-            <ndt-clickable-card
-              icon="export"
-              title="Export Settings"
-              subtitle="Export the current settings to share with other devs or use in your tests"
-              (click)="onExportSettings()"
-            />
-            <ndt-clickable-card
-              icon="import"
-              title="Import Settings"
-              subtitle="Import settings to reproduce a scenario"
-              (click)="onImportSettings()"
-            />
+
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Import Settings</span>
+              <span class="instruction__label-description">
+                Load a settings file to reproduce a scenario
+              </span>
+            </div>
+            <div class="instruction__control">
+              <ndt-button
+                variant="icon"
+                icon="import"
+                ariaLabel="Import settings"
+                (click)="onImportSettings()"
+              />
+            </div>
+          </div>
+
+          <div class="instruction instruction--danger-zone">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-description">
+                Clear all forced values, presets, and stored preferences
+              </span>
+            </div>
+            <div class="instruction__control">
+              <ndt-button
+                variant="icon"
+                icon="trash"
+                ariaLabel="Reset all settings"
+                (click)="onResetSettings()"
+              />
+            </div>
           </div>
         </div>
 
@@ -4177,7 +4820,17 @@ class ToolbarHomeToolComponent {
         </div>
       </section>
     </ndt-toolbar-tool>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;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;gap:var(--ndt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.position-selector{display:flex;gap:var(--ndt-spacing-sm)}.position-selector .position-option{flex:1;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:transparent;color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-xs);font-family:inherit;cursor:pointer;transition:all .15s ease;text-transform:capitalize}.position-selector .position-option:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.position-selector .position-option--active{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.position-selector .position-option--active:hover{background:var(--ndt-primary);color:var(--ndt-text-on-primary)}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-lg);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: ToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+
+    <ndt-confirm-dialog
+      #resetDialog
+      title="Reset all settings?"
+      message="This will clear all forced values, presets, and stored preferences for this session. The page will reload. This cannot be undone."
+      confirmLabel="Reset settings"
+      cancelLabel="Cancel"
+      [danger]="true"
+      (confirmed)="confirmReset()"
+    />
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{flex:1 1 auto;min-width:0;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:0 0 auto}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.instruction__control ::ng-deep .button{border-color:transparent;background:transparent;width:32px;height:32px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}.instruction__control ::ng-deep .button:hover{background:var(--ndt-hover-bg);border-color:transparent}.instruction--danger-zone{margin-top:var(--ndt-spacing-sm);padding-top:var(--ndt-spacing-md);border-top:1px solid var(--ndt-border-subtle)}.instruction--danger-zone .instruction__control ::ng-deep .button:hover{background:rgba(var(--ndt-danger-rgb),.1);color:var(--ndt-danger)}.settings-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md)}.position-selector{display:inline-flex;padding:2px;background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);align-self:stretch;width:100%}.position-selector .position-option{flex:1;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:0;background:transparent;color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .15s ease,color .15s ease;text-transform:capitalize;border-radius:calc(var(--ndt-border-radius-medium) - 2px);white-space:nowrap}.position-selector .position-option:hover:not(.position-option--active){color:var(--ndt-text-primary)}.position-selector .position-option:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.position-selector .position-option--active{background:var(--ndt-bg-primary);color:var(--ndt-text-primary);box-shadow:0 1px 2px #0000000f}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-md);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap}.footer-links ::ng-deep .link-button{flex-direction:row;align-items:center;gap:var(--ndt-spacing-xs);color:var(--ndt-text-muted);transition:color .15s ease}.footer-links ::ng-deep .link-button:hover{color:var(--ndt-text-primary)}.footer-links ::ng-deep .link-button__icon{width:auto;height:auto;background:transparent;padding:0}.footer-links ::ng-deep .link-button__icon svg{width:12px;height:12px}.footer-links ::ng-deep .link-button__text{font-size:var(--ndt-font-size-xs)}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarConfirmDialogComponent, selector: "ndt-confirm-dialog", inputs: ["title", "message", "confirmLabel", "cancelLabel", "danger"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: ToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarHomeToolComponent, decorators: [{
             type: Component,
@@ -4185,7 +4838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ToolbarToolComponent,
                         FormsModule,
                         ToolbarButtonComponent,
-                        ToolbarClickableCardComponent,
+                        ToolbarConfirmDialogComponent,
                         ToolbarLinkButtonComponent,
                     ], template: `
     <ndt-toolbar-tool [options]="options" toolTitle="Home" icon="angular">
@@ -4214,35 +4867,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 
           <div class="instruction">
             <div class="instruction__label">
-              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-text">Export Settings</span>
               <span class="instruction__label-description">
-                Reset all settings to their default values
+                Download the current setup to share or reproduce in tests
               </span>
             </div>
             <div class="instruction__control">
-              <div class="instruction__control-button">
-                <ndt-button
-                  variant="icon"
-                  icon="trash"
-                  ariaLabel="Reset all settings"
-                  (click)="onResetSettings()"
-                />
-              </div>
+              <ndt-button
+                variant="icon"
+                icon="export"
+                ariaLabel="Export settings"
+                (click)="onExportSettings()"
+              />
             </div>
           </div>
-          <div class="settings-actions">
-            <ndt-clickable-card
-              icon="export"
-              title="Export Settings"
-              subtitle="Export the current settings to share with other devs or use in your tests"
-              (click)="onExportSettings()"
-            />
-            <ndt-clickable-card
-              icon="import"
-              title="Import Settings"
-              subtitle="Import settings to reproduce a scenario"
-              (click)="onImportSettings()"
-            />
+
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Import Settings</span>
+              <span class="instruction__label-description">
+                Load a settings file to reproduce a scenario
+              </span>
+            </div>
+            <div class="instruction__control">
+              <ndt-button
+                variant="icon"
+                icon="import"
+                ariaLabel="Import settings"
+                (click)="onImportSettings()"
+              />
+            </div>
+          </div>
+
+          <div class="instruction instruction--danger-zone">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-description">
+                Clear all forced values, presets, and stored preferences
+              </span>
+            </div>
+            <div class="instruction__control">
+              <ndt-button
+                variant="icon"
+                icon="trash"
+                ariaLabel="Reset all settings"
+                (click)="onResetSettings()"
+              />
+            </div>
           </div>
         </div>
 
@@ -4255,7 +4926,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         </div>
       </section>
     </ndt-toolbar-tool>
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;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;gap:var(--ndt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.position-selector{display:flex;gap:var(--ndt-spacing-sm)}.position-selector .position-option{flex:1;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:transparent;color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-xs);font-family:inherit;cursor:pointer;transition:all .15s ease;text-transform:capitalize}.position-selector .position-option:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.position-selector .position-option--active{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.position-selector .position-option--active:hover{background:var(--ndt-primary);color:var(--ndt-text-on-primary)}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-lg);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
+
+    <ndt-confirm-dialog
+      #resetDialog
+      title="Reset all settings?"
+      message="This will clear all forced values, presets, and stored preferences for this session. The page will reload. This cannot be undone."
+      confirmLabel="Reset settings"
+      cancelLabel="Cancel"
+      [danger]="true"
+      (confirmed)="confirmReset()"
+    />
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{flex:1 1 auto;min-width:0;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:0 0 auto}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.instruction__control ::ng-deep .button{border-color:transparent;background:transparent;width:32px;height:32px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}.instruction__control ::ng-deep .button:hover{background:var(--ndt-hover-bg);border-color:transparent}.instruction--danger-zone{margin-top:var(--ndt-spacing-sm);padding-top:var(--ndt-spacing-md);border-top:1px solid var(--ndt-border-subtle)}.instruction--danger-zone .instruction__control ::ng-deep .button:hover{background:rgba(var(--ndt-danger-rgb),.1);color:var(--ndt-danger)}.settings-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md)}.position-selector{display:inline-flex;padding:2px;background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);align-self:stretch;width:100%}.position-selector .position-option{flex:1;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:0;background:transparent;color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .15s ease,color .15s ease;text-transform:capitalize;border-radius:calc(var(--ndt-border-radius-medium) - 2px);white-space:nowrap}.position-selector .position-option:hover:not(.position-option--active){color:var(--ndt-text-primary)}.position-selector .position-option:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:1px}.position-selector .position-option--active{background:var(--ndt-bg-primary);color:var(--ndt-text-primary);box-shadow:0 1px 2px #0000000f}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-md);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap}.footer-links ::ng-deep .link-button{flex-direction:row;align-items:center;gap:var(--ndt-spacing-xs);color:var(--ndt-text-muted);transition:color .15s ease}.footer-links ::ng-deep .link-button:hover{color:var(--ndt-text-primary)}.footer-links ::ng-deep .link-button__icon{width:auto;height:auto;background:transparent;padding:0}.footer-links ::ng-deep .link-button__icon svg{width:12px;height:12px}.footer-links ::ng-deep .link-button__text{font-size:var(--ndt-font-size-xs)}\n"] }]
         }] });
 
 const DEFAULT_TIMEZONES = [
@@ -4804,6 +5485,13 @@ class ToolbarI18nToolComponent {
         this.rtlEnabled = this.i18nService.rtlEnabled;
         // --- Computed ---
         this.toolConfig = computed(() => this.i18nService.toolConfig());
+        this.hasAdvancedFormatSettings = computed(() => {
+            const cfg = this.toolConfig();
+            return (cfg.showUnits !== false ||
+                cfg.showDateFormat !== false ||
+                cfg.showNumberFormat !== false ||
+                cfg.showFirstDayOfWeek !== false);
+        });
         this.localeOptions = toSignal(this.i18nService.getAvailableLocales().pipe(map((locales) => [
             { value: NOT_FORCED, label: 'Not Forced' },
             ...locales.map(({ id: value, name: label }) => ({ value, label })),
@@ -4966,10 +5654,9 @@ class ToolbarI18nToolComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarI18nToolComponent, isStandalone: true, selector: "ndt-i18n-tool", ngImport: i0, template: `
     <ndt-toolbar-tool toolTitle="i18n" icon="globe" [options]="options">
       <div class="i18n-section">
-        <!-- Formatting Preview (at top for immediate feedback) -->
+        <!-- Formatting Preview (immediate feedback, always visible) -->
         @if (toolConfig().showFormattingPreview !== false) {
-          <div class="i18n-section-header">FORMATTING PREVIEW</div>
-          <div class="i18n-preview">
+          <div class="i18n-preview" aria-label="Formatting preview">
             <div class="i18n-preview-row">
               <span class="preview-label">Number</span>
               <span class="preview-value">{{ previewNumber() }}</span>
@@ -4989,7 +5676,7 @@ class ToolbarI18nToolComponent {
           </div>
         }
 
-        <!-- Settings (flat 2-column grid) -->
+        <!-- Core settings: locale, timezone, currency -->
         <div class="i18n-select-grid">
           @if (toolConfig().showLocale !== false) {
             <div class="i18n-select-group">
@@ -5027,108 +5714,118 @@ class ToolbarI18nToolComponent {
               />
             </div>
           }
-          @if (toolConfig().showUnits !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-units">Units</label>
-              <ndt-select
-                id="i18n-units"
-                [value]="activeUnitSystem()"
-                [options]="unitSystemOptions"
-                [size]="'medium'"
-                (valueChange)="onUnitSystemChange($event ?? '')"
-              />
-            </div>
-          }
-          @if (toolConfig().showDateFormat !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-date-format">Date Format</label>
-              <ndt-select
-                id="i18n-date-format"
-                [value]="activeDateFormat()"
-                [options]="dateFormatOptions"
-                [size]="'medium'"
-                (valueChange)="onDateFormatChange($event ?? '')"
-              />
-            </div>
-          }
-          @if (toolConfig().showNumberFormat !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-number-format">Number Format</label>
-              <ndt-select
-                id="i18n-number-format"
-                [value]="activeNumberFormat()"
-                [options]="numberFormatOptions"
-                [size]="'medium'"
-                (valueChange)="onNumberFormatChange($event ?? '')"
-              />
-            </div>
-          }
-          @if (toolConfig().showFirstDayOfWeek !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-first-day">First Day of Week</label>
-              <ndt-select
-                id="i18n-first-day"
-                [value]="activeFirstDayOfWeek()"
-                [options]="firstDayOptions"
-                [size]="'medium'"
-                (valueChange)="onFirstDayOfWeekChange($event ?? '')"
-              />
-            </div>
-          }
         </div>
 
-        <!-- Stress Testing -->
-        @if (toolConfig().showStressTesting !== false) {
-          <div class="i18n-section-header">STRESS TESTING</div>
-          <div class="i18n-toggle-section">
-            <div class="i18n-toggle-row">
-              <div class="toggle-info">
-                <span class="toggle-label">Pseudo-Localization</span>
-                <span class="toggle-hint">Detect hardcoded strings</span>
-              </div>
-              <label class="toggle-switch">
-                <input
-                  type="checkbox"
-                  [checked]="pseudoLocEnabled()"
-                  (change)="onPseudoLocToggle($event)"
-                />
-                <span class="toggle-track"></span>
-              </label>
+        <!-- Advanced format options (progressive disclosure) -->
+        @if (hasAdvancedFormatSettings()) {
+          <details class="i18n-disclosure">
+            <summary>Advanced format options</summary>
+            <div class="i18n-select-grid">
+              @if (toolConfig().showUnits !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-units">Units</label>
+                  <ndt-select
+                    id="i18n-units"
+                    [value]="activeUnitSystem()"
+                    [options]="unitSystemOptions"
+                    [size]="'medium'"
+                    (valueChange)="onUnitSystemChange($event ?? '')"
+                  />
+                </div>
+              }
+              @if (toolConfig().showDateFormat !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-date-format">Date Format</label>
+                  <ndt-select
+                    id="i18n-date-format"
+                    [value]="activeDateFormat()"
+                    [options]="dateFormatOptions"
+                    [size]="'medium'"
+                    (valueChange)="onDateFormatChange($event ?? '')"
+                  />
+                </div>
+              }
+              @if (toolConfig().showNumberFormat !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-number-format">Number Format</label>
+                  <ndt-select
+                    id="i18n-number-format"
+                    [value]="activeNumberFormat()"
+                    [options]="numberFormatOptions"
+                    [size]="'medium'"
+                    (valueChange)="onNumberFormatChange($event ?? '')"
+                  />
+                </div>
+              }
+              @if (toolConfig().showFirstDayOfWeek !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-first-day">First Day of Week</label>
+                  <ndt-select
+                    id="i18n-first-day"
+                    [value]="activeFirstDayOfWeek()"
+                    [options]="firstDayOptions"
+                    [size]="'medium'"
+                    (valueChange)="onFirstDayOfWeekChange($event ?? '')"
+                  />
+                </div>
+              }
             </div>
-            @if (pseudoLocEnabled()) {
-              <div class="i18n-pseudo-preview">
-                {{ pseudoPreview() }}
+          </details>
+        }
+
+        <!-- Stress Testing (separate collapsible section) -->
+        @if (toolConfig().showStressTesting !== false) {
+          <details class="i18n-disclosure">
+            <summary>Stress testing</summary>
+            <div class="i18n-toggle-section">
+              <div class="i18n-toggle-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">Pseudo-Localization</span>
+                  <span class="toggle-hint">Detect hardcoded strings</span>
+                </div>
+                <label class="toggle-switch">
+                  <input
+                    type="checkbox"
+                    [checked]="pseudoLocEnabled()"
+                    (change)="onPseudoLocToggle($event)"
+                  />
+                  <span class="toggle-track"></span>
+                </label>
               </div>
-            }
-            <div class="i18n-toggle-row">
-              <div class="toggle-info">
-                <span class="toggle-label">RTL Mirroring</span>
-                <span class="toggle-hint">Set document direction to RTL</span>
+              @if (pseudoLocEnabled()) {
+                <div class="i18n-pseudo-preview">
+                  {{ pseudoPreview() }}
+                </div>
+              }
+              <div class="i18n-toggle-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">RTL Mirroring</span>
+                  <span class="toggle-hint">Set document direction to RTL</span>
+                </div>
+                <label class="toggle-switch">
+                  <input
+                    type="checkbox"
+                    [checked]="rtlEnabled()"
+                    (change)="onRtlToggle($event)"
+                  />
+                  <span class="toggle-track"></span>
+                </label>
               </div>
-              <label class="toggle-switch">
-                <input
-                  type="checkbox"
-                  [checked]="rtlEnabled()"
-                  (change)="onRtlToggle($event)"
-                />
-                <span class="toggle-track"></span>
-              </label>
             </div>
-          </div>
+          </details>
         }
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [":host{display:block}.i18n-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);padding-top:0}.i18n-section-header{font-size:var(--ndt-font-size-xxs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ndt-text-muted);margin-top:var(--ndt-spacing-md);padding:var(--ndt-spacing-xs) 0 var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-left:2px solid rgba(var(--ndt-primary-rgb),.4)}.i18n-section-header:first-child{margin-top:0}.i18n-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndt-spacing-sm) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs)}.i18n-select-group{display:flex;flex-direction:column;gap:2px}.i18n-select-group label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:600}.i18n-standalone-select{margin-top:var(--ndt-spacing-sm)}.i18n-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);border-left:2px solid var(--ndt-border-primary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs);display:flex;flex-direction:column;gap:1px}.i18n-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--ndt-font-size-xxs);gap:var(--ndt-spacing-xs);padding:2px 0}.i18n-preview-row .preview-label{color:var(--ndt-text-muted);flex-shrink:0}.i18n-preview-row .preview-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-toggle-section{display:flex;flex-direction:column;gap:0;margin-top:var(--ndt-spacing-xs)}.i18n-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);gap:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);transition:background .15s ease}.i18n-toggle-row:hover{background:var(--ndt-hover-bg)}.i18n-toggle-row .toggle-info{display:flex;flex-direction:column;gap:1px;min-width:0}.i18n-toggle-row .toggle-label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:500}.i18n-toggle-row .toggle-hint{font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);line-height:1.3}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.toggle-switch .toggle-track{position:absolute;inset:0;background:var(--ndt-border-primary);border-radius:9px;transition:background .2s ease}.toggle-switch .toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001f}.toggle-switch input:checked+.toggle-track{background:var(--ndt-primary)}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px)}.i18n-pseudo-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-small);border-left:2px solid rgba(var(--ndt-primary-rgb),.3);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);margin:0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);font-family:JetBrains Mono,ui-monospace,monospace;word-break:break-word;line-height:1.5}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.i18n-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding-top:0}.i18n-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndt-spacing-sm)}.i18n-disclosure{margin:0}.i18n-disclosure summary{font-size:var(--ndt-font-size-xs);font-weight:500;color:var(--ndt-text-secondary);padding:var(--ndt-spacing-xs) 0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--ndt-spacing-xs);-webkit-user-select:none;user-select:none;border-radius:var(--ndt-border-radius-small)}.i18n-disclosure summary::-webkit-details-marker{display:none}.i18n-disclosure summary:before{content:\"\";display:inline-block;width:0;height:0;border-left:4px solid var(--ndt-text-muted);border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform .15s ease}.i18n-disclosure summary:hover{color:var(--ndt-text-primary)}.i18n-disclosure summary:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.i18n-disclosure[open] summary:before{transform:rotate(90deg)}.i18n-disclosure>:not(summary){margin-top:var(--ndt-spacing-sm)}.i18n-select-group{display:flex;flex-direction:column;gap:2px}.i18n-select-group label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:600}.i18n-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);display:flex;flex-direction:column;gap:1px}.i18n-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--ndt-font-size-xxs);gap:var(--ndt-spacing-xs);padding:2px 0}.i18n-preview-row .preview-label{color:var(--ndt-text-muted);flex-shrink:0}.i18n-preview-row .preview-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-toggle-section{display:flex;flex-direction:column;gap:0}.i18n-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);gap:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);transition:background .15s ease}.i18n-toggle-row:hover{background:var(--ndt-hover-bg)}.i18n-toggle-row .toggle-info{display:flex;flex-direction:column;gap:1px;min-width:0}.i18n-toggle-row .toggle-label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:500}.i18n-toggle-row .toggle-hint{font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);line-height:1.3}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.toggle-switch .toggle-track{position:absolute;inset:0;background:var(--ndt-border-primary);border-radius:9px;transition:background .2s ease}.toggle-switch .toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001f}.toggle-switch input:checked+.toggle-track{background:var(--ndt-primary)}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px)}.i18n-pseudo-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-small);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);margin:0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);font-family:JetBrains Mono,ui-monospace,monospace;word-break:break-word;line-height:1.5}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarI18nToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-i18n-tool', standalone: true, imports: [ToolbarToolComponent, ToolbarSelectComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ndt-toolbar-tool toolTitle="i18n" icon="globe" [options]="options">
       <div class="i18n-section">
-        <!-- Formatting Preview (at top for immediate feedback) -->
+        <!-- Formatting Preview (immediate feedback, always visible) -->
         @if (toolConfig().showFormattingPreview !== false) {
-          <div class="i18n-section-header">FORMATTING PREVIEW</div>
-          <div class="i18n-preview">
+          <div class="i18n-preview" aria-label="Formatting preview">
             <div class="i18n-preview-row">
               <span class="preview-label">Number</span>
               <span class="preview-value">{{ previewNumber() }}</span>
@@ -5148,7 +5845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
           </div>
         }
 
-        <!-- Settings (flat 2-column grid) -->
+        <!-- Core settings: locale, timezone, currency -->
         <div class="i18n-select-grid">
           @if (toolConfig().showLocale !== false) {
             <div class="i18n-select-group">
@@ -5186,98 +5883,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               />
             </div>
           }
-          @if (toolConfig().showUnits !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-units">Units</label>
-              <ndt-select
-                id="i18n-units"
-                [value]="activeUnitSystem()"
-                [options]="unitSystemOptions"
-                [size]="'medium'"
-                (valueChange)="onUnitSystemChange($event ?? '')"
-              />
-            </div>
-          }
-          @if (toolConfig().showDateFormat !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-date-format">Date Format</label>
-              <ndt-select
-                id="i18n-date-format"
-                [value]="activeDateFormat()"
-                [options]="dateFormatOptions"
-                [size]="'medium'"
-                (valueChange)="onDateFormatChange($event ?? '')"
-              />
-            </div>
-          }
-          @if (toolConfig().showNumberFormat !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-number-format">Number Format</label>
-              <ndt-select
-                id="i18n-number-format"
-                [value]="activeNumberFormat()"
-                [options]="numberFormatOptions"
-                [size]="'medium'"
-                (valueChange)="onNumberFormatChange($event ?? '')"
-              />
-            </div>
-          }
-          @if (toolConfig().showFirstDayOfWeek !== false) {
-            <div class="i18n-select-group">
-              <label for="i18n-first-day">First Day of Week</label>
-              <ndt-select
-                id="i18n-first-day"
-                [value]="activeFirstDayOfWeek()"
-                [options]="firstDayOptions"
-                [size]="'medium'"
-                (valueChange)="onFirstDayOfWeekChange($event ?? '')"
-              />
-            </div>
-          }
         </div>
 
-        <!-- Stress Testing -->
-        @if (toolConfig().showStressTesting !== false) {
-          <div class="i18n-section-header">STRESS TESTING</div>
-          <div class="i18n-toggle-section">
-            <div class="i18n-toggle-row">
-              <div class="toggle-info">
-                <span class="toggle-label">Pseudo-Localization</span>
-                <span class="toggle-hint">Detect hardcoded strings</span>
-              </div>
-              <label class="toggle-switch">
-                <input
-                  type="checkbox"
-                  [checked]="pseudoLocEnabled()"
-                  (change)="onPseudoLocToggle($event)"
-                />
-                <span class="toggle-track"></span>
-              </label>
+        <!-- Advanced format options (progressive disclosure) -->
+        @if (hasAdvancedFormatSettings()) {
+          <details class="i18n-disclosure">
+            <summary>Advanced format options</summary>
+            <div class="i18n-select-grid">
+              @if (toolConfig().showUnits !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-units">Units</label>
+                  <ndt-select
+                    id="i18n-units"
+                    [value]="activeUnitSystem()"
+                    [options]="unitSystemOptions"
+                    [size]="'medium'"
+                    (valueChange)="onUnitSystemChange($event ?? '')"
+                  />
+                </div>
+              }
+              @if (toolConfig().showDateFormat !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-date-format">Date Format</label>
+                  <ndt-select
+                    id="i18n-date-format"
+                    [value]="activeDateFormat()"
+                    [options]="dateFormatOptions"
+                    [size]="'medium'"
+                    (valueChange)="onDateFormatChange($event ?? '')"
+                  />
+                </div>
+              }
+              @if (toolConfig().showNumberFormat !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-number-format">Number Format</label>
+                  <ndt-select
+                    id="i18n-number-format"
+                    [value]="activeNumberFormat()"
+                    [options]="numberFormatOptions"
+                    [size]="'medium'"
+                    (valueChange)="onNumberFormatChange($event ?? '')"
+                  />
+                </div>
+              }
+              @if (toolConfig().showFirstDayOfWeek !== false) {
+                <div class="i18n-select-group">
+                  <label for="i18n-first-day">First Day of Week</label>
+                  <ndt-select
+                    id="i18n-first-day"
+                    [value]="activeFirstDayOfWeek()"
+                    [options]="firstDayOptions"
+                    [size]="'medium'"
+                    (valueChange)="onFirstDayOfWeekChange($event ?? '')"
+                  />
+                </div>
+              }
             </div>
-            @if (pseudoLocEnabled()) {
-              <div class="i18n-pseudo-preview">
-                {{ pseudoPreview() }}
+          </details>
+        }
+
+        <!-- Stress Testing (separate collapsible section) -->
+        @if (toolConfig().showStressTesting !== false) {
+          <details class="i18n-disclosure">
+            <summary>Stress testing</summary>
+            <div class="i18n-toggle-section">
+              <div class="i18n-toggle-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">Pseudo-Localization</span>
+                  <span class="toggle-hint">Detect hardcoded strings</span>
+                </div>
+                <label class="toggle-switch">
+                  <input
+                    type="checkbox"
+                    [checked]="pseudoLocEnabled()"
+                    (change)="onPseudoLocToggle($event)"
+                  />
+                  <span class="toggle-track"></span>
+                </label>
               </div>
-            }
-            <div class="i18n-toggle-row">
-              <div class="toggle-info">
-                <span class="toggle-label">RTL Mirroring</span>
-                <span class="toggle-hint">Set document direction to RTL</span>
+              @if (pseudoLocEnabled()) {
+                <div class="i18n-pseudo-preview">
+                  {{ pseudoPreview() }}
+                </div>
+              }
+              <div class="i18n-toggle-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">RTL Mirroring</span>
+                  <span class="toggle-hint">Set document direction to RTL</span>
+                </div>
+                <label class="toggle-switch">
+                  <input
+                    type="checkbox"
+                    [checked]="rtlEnabled()"
+                    (change)="onRtlToggle($event)"
+                  />
+                  <span class="toggle-track"></span>
+                </label>
               </div>
-              <label class="toggle-switch">
-                <input
-                  type="checkbox"
-                  [checked]="rtlEnabled()"
-                  (change)="onRtlToggle($event)"
-                />
-                <span class="toggle-track"></span>
-              </label>
             </div>
-          </div>
+          </details>
         }
       </div>
     </ndt-toolbar-tool>
-  `, styles: [":host{display:block}.i18n-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);padding-top:0}.i18n-section-header{font-size:var(--ndt-font-size-xxs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ndt-text-muted);margin-top:var(--ndt-spacing-md);padding:var(--ndt-spacing-xs) 0 var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-left:2px solid rgba(var(--ndt-primary-rgb),.4)}.i18n-section-header:first-child{margin-top:0}.i18n-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndt-spacing-sm) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs)}.i18n-select-group{display:flex;flex-direction:column;gap:2px}.i18n-select-group label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:600}.i18n-standalone-select{margin-top:var(--ndt-spacing-sm)}.i18n-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);border-left:2px solid var(--ndt-border-primary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs);display:flex;flex-direction:column;gap:1px}.i18n-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--ndt-font-size-xxs);gap:var(--ndt-spacing-xs);padding:2px 0}.i18n-preview-row .preview-label{color:var(--ndt-text-muted);flex-shrink:0}.i18n-preview-row .preview-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-toggle-section{display:flex;flex-direction:column;gap:0;margin-top:var(--ndt-spacing-xs)}.i18n-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);gap:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);transition:background .15s ease}.i18n-toggle-row:hover{background:var(--ndt-hover-bg)}.i18n-toggle-row .toggle-info{display:flex;flex-direction:column;gap:1px;min-width:0}.i18n-toggle-row .toggle-label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:500}.i18n-toggle-row .toggle-hint{font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);line-height:1.3}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.toggle-switch .toggle-track{position:absolute;inset:0;background:var(--ndt-border-primary);border-radius:9px;transition:background .2s ease}.toggle-switch .toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001f}.toggle-switch input:checked+.toggle-track{background:var(--ndt-primary)}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px)}.i18n-pseudo-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-small);border-left:2px solid rgba(var(--ndt-primary-rgb),.3);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);margin:0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);font-family:JetBrains Mono,ui-monospace,monospace;word-break:break-word;line-height:1.5}\n"] }]
+  `, styles: [":host{display:block}.i18n-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding-top:0}.i18n-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndt-spacing-sm)}.i18n-disclosure{margin:0}.i18n-disclosure summary{font-size:var(--ndt-font-size-xs);font-weight:500;color:var(--ndt-text-secondary);padding:var(--ndt-spacing-xs) 0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--ndt-spacing-xs);-webkit-user-select:none;user-select:none;border-radius:var(--ndt-border-radius-small)}.i18n-disclosure summary::-webkit-details-marker{display:none}.i18n-disclosure summary:before{content:\"\";display:inline-block;width:0;height:0;border-left:4px solid var(--ndt-text-muted);border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform .15s ease}.i18n-disclosure summary:hover{color:var(--ndt-text-primary)}.i18n-disclosure summary:focus-visible{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.i18n-disclosure[open] summary:before{transform:rotate(90deg)}.i18n-disclosure>:not(summary){margin-top:var(--ndt-spacing-sm)}.i18n-select-group{display:flex;flex-direction:column;gap:2px}.i18n-select-group label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:600}.i18n-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);display:flex;flex-direction:column;gap:1px}.i18n-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--ndt-font-size-xxs);gap:var(--ndt-spacing-xs);padding:2px 0}.i18n-preview-row .preview-label{color:var(--ndt-text-muted);flex-shrink:0}.i18n-preview-row .preview-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-toggle-section{display:flex;flex-direction:column;gap:0}.i18n-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);gap:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);transition:background .15s ease}.i18n-toggle-row:hover{background:var(--ndt-hover-bg)}.i18n-toggle-row .toggle-info{display:flex;flex-direction:column;gap:1px;min-width:0}.i18n-toggle-row .toggle-label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:500}.i18n-toggle-row .toggle-hint{font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);line-height:1.3}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.toggle-switch .toggle-track{position:absolute;inset:0;background:var(--ndt-border-primary);border-radius:9px;transition:background .2s ease}.toggle-switch .toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001f}.toggle-switch input:checked+.toggle-track{background:var(--ndt-primary)}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px)}.i18n-pseudo-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-small);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);margin:0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);font-family:JetBrains Mono,ui-monospace,monospace;word-break:break-word;line-height:1.5}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToolbarInternalPermissionsService {
@@ -5456,6 +6164,7 @@ class ToolbarPermissionsToolComponent {
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
         this.pinnedIds = signal(new Set());
+        this.collapsedGroups = signal(new Set());
         this.permissions = this.permissionsService.permissions;
         // Computed badge count for forced values
         this.badgeCount = computed(() => {
@@ -5468,7 +6177,7 @@ class ToolbarPermissionsToolComponent {
         });
         this.hasNoPermissions = computed(() => this.permissions().length === 0);
         this.filteredPermissions = computed(() => {
-            const filtered = this.permissions().filter((permission) => {
+            return this.permissions().filter((permission) => {
                 const searchTerm = this.searchQuery().toLowerCase();
                 const permissionName = permission.name.toLowerCase();
                 const permissionDescription = permission.description?.toLowerCase() ?? '';
@@ -5481,16 +6190,13 @@ class ToolbarPermissionsToolComponent {
                     (this.activeFilter() === 'denied' && !permission.isGranted);
                 return matchesSearch && matchesFilter;
             });
-            const pinned = this.pinnedIds();
-            // Sort pinned first, then alphabetically within each group
-            return filtered.sort((a, b) => {
-                const aPinned = pinned.has(a.id);
-                const bPinned = pinned.has(b.id);
-                if (aPinned !== bPinned)
-                    return aPinned ? -1 : 1;
-                return a.name.localeCompare(b.name);
-            });
         });
+        this.groupedPermissions = computed(() => groupItems(this.filteredPermissions(), this.pinnedIds()));
+        this.flatPermissions = computed(() => {
+            const { pinned, ungrouped } = this.groupedPermissions();
+            return [...pinned, ...ungrouped];
+        });
+        this.hasAnyGroups = computed(() => this.groupedPermissions().groups.length > 0);
         this.hasNoFilteredPermissions = computed(() => this.filteredPermissions().length === 0);
         // Other properties
         this.options = {
@@ -5501,7 +6207,6 @@ class ToolbarPermissionsToolComponent {
             id: 'ndt-permissions',
         };
         this.filterOptions = [
-            { value: 'all', label: 'All Permissions' },
             { value: 'forced', label: 'Forced' },
             { value: 'granted', label: 'Granted' },
             { value: 'denied', label: 'Denied' },
@@ -5521,6 +6226,7 @@ class ToolbarPermissionsToolComponent {
                 filter: this.activeFilter(),
                 sortOrder: 'asc',
                 pinnedIds: [...this.pinnedIds()],
+                collapsedGroups: [...this.collapsedGroups()],
             };
             this.storageService.set(this.VIEW_STATE_KEY, state);
         });
@@ -5537,6 +6243,9 @@ class ToolbarPermissionsToolComponent {
                 if (saved.pinnedIds?.length) {
                     this.pinnedIds.set(new Set(saved.pinnedIds));
                 }
+                if (saved.collapsedGroups?.length) {
+                    this.collapsedGroups.set(new Set(saved.collapsedGroups));
+                }
             }
         }
         catch {
@@ -5584,6 +6293,21 @@ class ToolbarPermissionsToolComponent {
             return next;
         });
     }
+    isCollapsed(name) {
+        return this.collapsedGroups().has(name);
+    }
+    setCollapsed(name, collapsed) {
+        this.collapsedGroups.update((set) => {
+            const next = new Set(set);
+            if (collapsed) {
+                next.add(name);
+            }
+            else {
+                next.delete(name);
+            }
+            return next;
+        });
+    }
     // Protected methods
     getPermissionValue(permission) {
         if (!permission.isForced)
@@ -5599,23 +6323,15 @@ class ToolbarPermissionsToolComponent {
       [badge]="badgeCount()"
     >
       <div class="container">
-        <div class="tool-header">
-          <ndt-input
-            [value]="searchQuery()"
-            (valueChange)="onSearchChange($event)"
-            placeholder="Search permissions..."
-            [ariaLabel]="'Search permissions'"
-          />
-          <div class="filter-wrapper">
-            <ndt-select
-              [value]="activeFilter()"
-              [options]="filterOptions"
-              [size]="'medium'"
-              (valueChange)="onFilterChange($event)"
-              [ariaLabel]="'Filter permissions by state'"
-            />
-          </div>
-        </div>
+        <ndt-tool-header
+          [(searchQuery)]="searchQuery"
+          [activeFilter]="activeFilter()"
+          (activeFilterChange)="onFilterChange($event)"
+          searchPlaceholder="Search permissions by name or description"
+          searchAriaLabel="Search permissions"
+          filterAriaLabel="Filter permissions by state"
+          [filterOptions]="filterOptions"
+        />
 
         <ndt-list
           [hasItems]="!hasNoPermissions()"
@@ -5624,41 +6340,115 @@ class ToolbarPermissionsToolComponent {
           [emptyHint]="'Call setAvailableOptions() to configure permissions'"
           noResultsMessage="No permissions match your filter"
         >
-          @for (permission of filteredPermissions(); track permission.id) {
-            <ndt-list-item
-              [title]="permission.name"
-              [description]="permission.description"
-              [isForced]="permission.isForced"
-              [currentValue]="permission.isGranted"
-              [originalValue]="permission.originalValue"
-              [isPinned]="pinnedIds().has(permission.id)"
-              (pinToggle)="togglePin(permission.id)"
-              [showApply]="hasApplyCallback()"
-              [applyState]="getApplyState(permission.id)"
-              (applyToSource)="onApplyToSource(permission.id, permission.isGranted)"
-            >
-              <ndt-select
-                [value]="getPermissionValue(permission)"
-                [options]="permissionValueOptions"
-                [ariaLabel]="'Override state for ' + permission.name"
-                (valueChange)="onPermissionChange(permission.id, $event ?? '')"
-                size="small"
+          @if (hasAnyGroups()) {
+            @if (groupedPermissions().pinned.length) {
+              <ndt-list-group
+                name="Pinned"
+                [count]="groupedPermissions().pinned.length"
+                [collapsed]="isCollapsed('Pinned')"
+                (collapsedChange)="setCollapsed('Pinned', $event)"
+              >
+                @for (
+                  permission of groupedPermissions().pinned;
+                  track permission.id
+                ) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      permissionItem;
+                      context: { $implicit: permission }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @for (group of groupedPermissions().groups; track group.name) {
+              <ndt-list-group
+                [name]="group.name"
+                [count]="group.items.length"
+                [collapsed]="isCollapsed(group.name)"
+                (collapsedChange)="setCollapsed(group.name, $event)"
+              >
+                @for (permission of group.items; track permission.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      permissionItem;
+                      context: { $implicit: permission }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @if (groupedPermissions().ungrouped.length) {
+              <ndt-list-group
+                name="Other"
+                [count]="groupedPermissions().ungrouped.length"
+                [collapsed]="isCollapsed('Other')"
+                (collapsedChange)="setCollapsed('Other', $event)"
+              >
+                @for (
+                  permission of groupedPermissions().ungrouped;
+                  track permission.id
+                ) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      permissionItem;
+                      context: { $implicit: permission }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+          } @else {
+            @for (permission of flatPermissions(); track permission.id) {
+              <ng-container
+                *ngTemplateOutlet="
+                  permissionItem;
+                  context: { $implicit: permission }
+                "
               />
-            </ndt-list-item>
+            }
           }
         </ndt-list>
+
+        <ng-template #permissionItem let-permission>
+          <ndt-list-item
+            [title]="permission.name"
+            [description]="permission.description"
+            [isForced]="permission.isForced"
+            [currentValue]="permission.isGranted"
+            [originalValue]="permission.originalValue"
+            [isPinned]="pinnedIds().has(permission.id)"
+            [copyableId]="permission.id"
+            (pinToggle)="togglePin(permission.id)"
+            [showApply]="hasApplyCallback()"
+            [applyState]="getApplyState(permission.id)"
+            (applyToSource)="
+              onApplyToSource(permission.id, permission.isGranted)
+            "
+          >
+            <ndt-select
+              [value]="getPermissionValue(permission)"
+              [options]="permissionValueOptions"
+              [ariaLabel]="'Override state for ' + permission.name"
+              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+              size="small"
+            />
+          </ndt-list-item>
+        </ng-template>
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarToolHeaderComponent, selector: "ndt-tool-header", inputs: ["searchQuery", "activeFilter", "searchPlaceholder", "searchAriaLabel", "filterOptions", "filterAriaLabel", "defaultFilter"], outputs: ["searchQueryChange", "activeFilterChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListGroupComponent, selector: "ndt-list-group", inputs: ["name", "count", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned", "copyableId"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndt-permissions-tool', standalone: true, imports: [
+                        NgTemplateOutlet,
                         FormsModule,
                         ToolbarToolComponent,
-                        ToolbarInputComponent,
+                        ToolbarToolHeaderComponent,
                         ToolbarSelectComponent,
                         ToolbarListComponent,
+                        ToolbarListGroupComponent,
                         ToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
@@ -5668,23 +6458,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       [badge]="badgeCount()"
     >
       <div class="container">
-        <div class="tool-header">
-          <ndt-input
-            [value]="searchQuery()"
-            (valueChange)="onSearchChange($event)"
-            placeholder="Search permissions..."
-            [ariaLabel]="'Search permissions'"
-          />
-          <div class="filter-wrapper">
-            <ndt-select
-              [value]="activeFilter()"
-              [options]="filterOptions"
-              [size]="'medium'"
-              (valueChange)="onFilterChange($event)"
-              [ariaLabel]="'Filter permissions by state'"
-            />
-          </div>
-        </div>
+        <ndt-tool-header
+          [(searchQuery)]="searchQuery"
+          [activeFilter]="activeFilter()"
+          (activeFilterChange)="onFilterChange($event)"
+          searchPlaceholder="Search permissions by name or description"
+          searchAriaLabel="Search permissions"
+          filterAriaLabel="Filter permissions by state"
+          [filterOptions]="filterOptions"
+        />
 
         <ndt-list
           [hasItems]="!hasNoPermissions()"
@@ -5693,32 +6475,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
           [emptyHint]="'Call setAvailableOptions() to configure permissions'"
           noResultsMessage="No permissions match your filter"
         >
-          @for (permission of filteredPermissions(); track permission.id) {
-            <ndt-list-item
-              [title]="permission.name"
-              [description]="permission.description"
-              [isForced]="permission.isForced"
-              [currentValue]="permission.isGranted"
-              [originalValue]="permission.originalValue"
-              [isPinned]="pinnedIds().has(permission.id)"
-              (pinToggle)="togglePin(permission.id)"
-              [showApply]="hasApplyCallback()"
-              [applyState]="getApplyState(permission.id)"
-              (applyToSource)="onApplyToSource(permission.id, permission.isGranted)"
-            >
-              <ndt-select
-                [value]="getPermissionValue(permission)"
-                [options]="permissionValueOptions"
-                [ariaLabel]="'Override state for ' + permission.name"
-                (valueChange)="onPermissionChange(permission.id, $event ?? '')"
-                size="small"
+          @if (hasAnyGroups()) {
+            @if (groupedPermissions().pinned.length) {
+              <ndt-list-group
+                name="Pinned"
+                [count]="groupedPermissions().pinned.length"
+                [collapsed]="isCollapsed('Pinned')"
+                (collapsedChange)="setCollapsed('Pinned', $event)"
+              >
+                @for (
+                  permission of groupedPermissions().pinned;
+                  track permission.id
+                ) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      permissionItem;
+                      context: { $implicit: permission }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @for (group of groupedPermissions().groups; track group.name) {
+              <ndt-list-group
+                [name]="group.name"
+                [count]="group.items.length"
+                [collapsed]="isCollapsed(group.name)"
+                (collapsedChange)="setCollapsed(group.name, $event)"
+              >
+                @for (permission of group.items; track permission.id) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      permissionItem;
+                      context: { $implicit: permission }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+            @if (groupedPermissions().ungrouped.length) {
+              <ndt-list-group
+                name="Other"
+                [count]="groupedPermissions().ungrouped.length"
+                [collapsed]="isCollapsed('Other')"
+                (collapsedChange)="setCollapsed('Other', $event)"
+              >
+                @for (
+                  permission of groupedPermissions().ungrouped;
+                  track permission.id
+                ) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      permissionItem;
+                      context: { $implicit: permission }
+                    "
+                  />
+                }
+              </ndt-list-group>
+            }
+          } @else {
+            @for (permission of flatPermissions(); track permission.id) {
+              <ng-container
+                *ngTemplateOutlet="
+                  permissionItem;
+                  context: { $implicit: permission }
+                "
               />
-            </ndt-list-item>
+            }
           }
         </ndt-list>
+
+        <ng-template #permissionItem let-permission>
+          <ndt-list-item
+            [title]="permission.name"
+            [description]="permission.description"
+            [isForced]="permission.isForced"
+            [currentValue]="permission.isGranted"
+            [originalValue]="permission.originalValue"
+            [isPinned]="pinnedIds().has(permission.id)"
+            [copyableId]="permission.id"
+            (pinToggle)="togglePin(permission.id)"
+            [showApply]="hasApplyCallback()"
+            [applyState]="getApplyState(permission.id)"
+            (applyToSource)="
+              onApplyToSource(permission.id, permission.isGranted)
+            "
+          >
+            <ndt-select
+              [value]="getPermissionValue(permission)"
+              [options]="permissionValueOptions"
+              [ariaLabel]="'Override state for ' + permission.name"
+              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+              size="small"
+            />
+          </ndt-list-item>
+        </ng-template>
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6954,7 +7808,7 @@ class ToolbarPresetsToolComponent {
         }
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:#22c55e;color:#fff}.toast--error{background:#ef4444;color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;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-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-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:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px;position:relative}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:36px}.preset-card__row--badges{padding-left:36px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:2px;flex-shrink:0}.more-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out;line-height:1;font-size:14px;font-weight:700;position:relative;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}}.action-menu{position:absolute;top:28px;right:var(--ndt-spacing-sm);background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-tooltip);z-index:20;min-width:180px;padding:4px;display:flex;flex-direction:column;gap:2px}.action-menu__item{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:background .15s ease-out;white-space:nowrap;&:hover{background:var(--ndt-hover-bg)}ndt-icon{display:block;width:14px;height:14px;flex-shrink:0;color:var(--ndt-text-muted)}}.action-menu__item--danger{color:#ef4444;ndt-icon{color:#ef4444}&:hover{background:#ef44441a}}.expand-toggle{appearance:none;background:none;border:none;cursor:pointer;padding:0 4px;margin-right:2px;font-size:10px;color:var(--ndt-text-muted);line-height:1;opacity:.6;transition:opacity .15s ease-out;flex-shrink:0;&:hover{opacity:1}}.preset-card__details{padding:var(--ndt-spacing-sm) var(--ndt-spacing-sm) var(--ndt-spacing-xs);margin-top:2px;border-top:1px solid var(--ndt-border-primary);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.details-section__title{font-size:10px;font-weight:600;color:var(--ndt-text-muted);text-transform:uppercase;letter-spacing:.5px}.details-section__items{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.detail-badge{font-size:10px;padding:1px 6px;border-radius:var(--ndt-border-radius-small);white-space:nowrap}.detail-badge--on{background:#22c55e1a;color:#22c55e}.detail-badge--off{background:#ef44441a;color:#ef4444}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:#22c55e26;color:#22c55e}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:#ef4444;font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:#6366f10d;border-radius:3px;border-left:2px solid rgba(99,102,241,.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;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);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:#22c55e1a;color:#22c55e}.config-item--off{background:#ef44441a;color:#ef4444}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:#22c55e26;color:#22c55e}.diff-item__value--off{background:#ef444426;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:var(--ndt-success);color:#fff}.toast--error{background:var(--ndt-danger);color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:var(--ndt-danger);color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;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-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-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:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px;position:relative}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:36px}.preset-card__row--badges{padding-left:36px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:2px;flex-shrink:0}.more-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out;line-height:1;font-size:14px;font-weight:700;position:relative;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}}.action-menu{position:absolute;top:28px;right:var(--ndt-spacing-sm);background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-tooltip);z-index:20;min-width:180px;padding:4px;display:flex;flex-direction:column;gap:2px}.action-menu__item{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:background .15s ease-out;white-space:nowrap;&:hover{background:var(--ndt-hover-bg)}ndt-icon{display:block;width:14px;height:14px;flex-shrink:0;color:var(--ndt-text-muted)}}.action-menu__item--danger{color:var(--ndt-danger);ndt-icon{color:var(--ndt-danger)}&:hover{background:rgba(var(--ndt-danger-rgb),.1)}}.expand-toggle{appearance:none;background:none;border:none;cursor:pointer;padding:0 4px;margin-right:2px;font-size:10px;color:var(--ndt-text-muted);line-height:1;opacity:.6;transition:opacity .15s ease-out;flex-shrink:0;&:hover{opacity:1}}.preset-card__details{padding:var(--ndt-spacing-sm) var(--ndt-spacing-sm) var(--ndt-spacing-xs);margin-top:2px;border-top:1px solid var(--ndt-border-primary);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.details-section__title{font-size:10px;font-weight:600;color:var(--ndt-text-muted);text-transform:uppercase;letter-spacing:.5px}.details-section__items{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.detail-badge{font-size:10px;padding:1px 6px;border-radius:var(--ndt-border-radius-small);white-space:nowrap}.detail-badge--on{background:rgba(var(--ndt-success-rgb),.1);color:var(--ndt-success)}.detail-badge--off{background:rgba(var(--ndt-danger-rgb),.1);color:var(--ndt-danger)}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:rgba(var(--ndt-success-rgb),.15);color:var(--ndt-success)}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:var(--ndt-danger);font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:rgba(var(--ndt-primary-rgb),.05);border-radius:3px;padding-left:6px}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;&.enabled{background:rgba(var(--ndt-success-rgb),.15);color:var(--ndt-success)}&.disabled{background:rgba(var(--ndt-danger-rgb),.15);color:var(--ndt-danger)}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:rgba(var(--ndt-success-rgb),.1);color:var(--ndt-success)}.config-item--off{background:rgba(var(--ndt-danger-rgb),.1);color:var(--ndt-danger)}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:rgba(var(--ndt-success-rgb),.15);color:var(--ndt-success)}.diff-item__value--off{background:rgba(var(--ndt-danger-rgb),.15);color:var(--ndt-danger)}\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: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPresetsToolComponent, decorators: [{
             type: Component,
@@ -7548,7 +8402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:#22c55e;color:#fff}.toast--error{background:#ef4444;color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;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-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-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:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px;position:relative}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:36px}.preset-card__row--badges{padding-left:36px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:2px;flex-shrink:0}.more-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out;line-height:1;font-size:14px;font-weight:700;position:relative;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}}.action-menu{position:absolute;top:28px;right:var(--ndt-spacing-sm);background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-tooltip);z-index:20;min-width:180px;padding:4px;display:flex;flex-direction:column;gap:2px}.action-menu__item{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:background .15s ease-out;white-space:nowrap;&:hover{background:var(--ndt-hover-bg)}ndt-icon{display:block;width:14px;height:14px;flex-shrink:0;color:var(--ndt-text-muted)}}.action-menu__item--danger{color:#ef4444;ndt-icon{color:#ef4444}&:hover{background:#ef44441a}}.expand-toggle{appearance:none;background:none;border:none;cursor:pointer;padding:0 4px;margin-right:2px;font-size:10px;color:var(--ndt-text-muted);line-height:1;opacity:.6;transition:opacity .15s ease-out;flex-shrink:0;&:hover{opacity:1}}.preset-card__details{padding:var(--ndt-spacing-sm) var(--ndt-spacing-sm) var(--ndt-spacing-xs);margin-top:2px;border-top:1px solid var(--ndt-border-primary);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.details-section__title{font-size:10px;font-weight:600;color:var(--ndt-text-muted);text-transform:uppercase;letter-spacing:.5px}.details-section__items{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.detail-badge{font-size:10px;padding:1px 6px;border-radius:var(--ndt-border-radius-small);white-space:nowrap}.detail-badge--on{background:#22c55e1a;color:#22c55e}.detail-badge--off{background:#ef44441a;color:#ef4444}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:#22c55e26;color:#22c55e}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:#ef4444;font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:#6366f10d;border-radius:3px;border-left:2px solid rgba(99,102,241,.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;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);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:#22c55e1a;color:#22c55e}.config-item--off{background:#ef44441a;color:#ef4444}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:#22c55e26;color:#22c55e}.diff-item__value--off{background:#ef444426;color:#ef4444}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:var(--ndt-success);color:#fff}.toast--error{background:var(--ndt-danger);color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:var(--ndt-danger);color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;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-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-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:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px;position:relative}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:36px}.preset-card__row--badges{padding-left:36px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:2px;flex-shrink:0}.more-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out;line-height:1;font-size:14px;font-weight:700;position:relative;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}}.action-menu{position:absolute;top:28px;right:var(--ndt-spacing-sm);background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-tooltip);z-index:20;min-width:180px;padding:4px;display:flex;flex-direction:column;gap:2px}.action-menu__item{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:background .15s ease-out;white-space:nowrap;&:hover{background:var(--ndt-hover-bg)}ndt-icon{display:block;width:14px;height:14px;flex-shrink:0;color:var(--ndt-text-muted)}}.action-menu__item--danger{color:var(--ndt-danger);ndt-icon{color:var(--ndt-danger)}&:hover{background:rgba(var(--ndt-danger-rgb),.1)}}.expand-toggle{appearance:none;background:none;border:none;cursor:pointer;padding:0 4px;margin-right:2px;font-size:10px;color:var(--ndt-text-muted);line-height:1;opacity:.6;transition:opacity .15s ease-out;flex-shrink:0;&:hover{opacity:1}}.preset-card__details{padding:var(--ndt-spacing-sm) var(--ndt-spacing-sm) var(--ndt-spacing-xs);margin-top:2px;border-top:1px solid var(--ndt-border-primary);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.details-section__title{font-size:10px;font-weight:600;color:var(--ndt-text-muted);text-transform:uppercase;letter-spacing:.5px}.details-section__items{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.detail-badge{font-size:10px;padding:1px 6px;border-radius:var(--ndt-border-radius-small);white-space:nowrap}.detail-badge--on{background:rgba(var(--ndt-success-rgb),.1);color:var(--ndt-success)}.detail-badge--off{background:rgba(var(--ndt-danger-rgb),.1);color:var(--ndt-danger)}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:rgba(var(--ndt-success-rgb),.15);color:var(--ndt-success)}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:var(--ndt-danger);font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:rgba(var(--ndt-primary-rgb),.05);border-radius:3px;padding-left:6px}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;&.enabled{background:rgba(var(--ndt-success-rgb),.15);color:var(--ndt-success)}&.disabled{background:rgba(var(--ndt-danger-rgb),.15);color:var(--ndt-danger)}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:rgba(var(--ndt-success-rgb),.1);color:var(--ndt-success)}.config-item--off{background:rgba(var(--ndt-danger-rgb),.1);color:var(--ndt-danger)}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:rgba(var(--ndt-success-rgb),.15);color:var(--ndt-success)}.diff-item__value--off{background:rgba(var(--ndt-danger-rgb),.15);color:var(--ndt-danger)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click']
@@ -7560,6 +8414,8 @@ class ToolbarComponent {
         this.state = inject(ToolbarStateService);
         this.destroyRef = inject(DestroyRef);
         this.settingsService = inject(SettingsService);
+        this.customToolTypes = inject(TOOLBAR_CUSTOM_TOOLS, { optional: true }) ?? [];
+        this.customToolsContainer = viewChild('customTools', { read: ViewContainerRef });
         this.config = input({});
         this.keyboardShortcut = fromEvent(window, 'keydown')
             .pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
@@ -7579,6 +8435,15 @@ class ToolbarComponent {
         effect(() => {
             this.state.setConfig(this.config());
         });
+        // Dynamically render registered custom tool components
+        effect(() => {
+            const container = this.customToolsContainer();
+            if (container && container.length === 0 && this.customToolTypes.length > 0) {
+                for (const toolType of this.customToolTypes) {
+                    container.createComponent(toolType);
+                }
+            }
+        });
     }
     ngOnInit() {
         this.injectGlobalStyles();
@@ -7630,8 +8495,8 @@ class ToolbarComponent {
         --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-primary: #635BFF;
+        --ndt-primary-rgb: 99, 91, 255;
         --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%);
@@ -7656,6 +8521,12 @@ class ToolbarComponent {
         --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-success: rgb(34, 197, 94);
+        --ndt-success-rgb: 34, 197, 94;
+        --ndt-danger: rgb(239, 68, 68);
+        --ndt-danger-rgb: 239, 68, 68;
+        --ndt-forced: #f59e0b;
+        --ndt-forced-rgb: 245, 158, 11;
       }
       .ndt-overlay-panel {
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
@@ -7673,7 +8544,7 @@ class ToolbarComponent {
         this.document.head.appendChild(this.globalStyleElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customToolsContainer", first: true, predicate: ["customTools"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     @if ((config().enabled ?? true) && !state.isCompletelyHidden()) {
       <div
         aria-label="Developer tools"
@@ -7689,6 +8560,7 @@ class ToolbarComponent {
       >
         <ndt-home-tool />
         <ng-content />
+        <ng-container #customTools />
         @if (config().showI18nTool ?? false) {
           <ndt-i18n-tool />
         }
@@ -7706,7 +8578,7 @@ class ToolbarComponent {
         }
       </div>
     }
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;z-index:999999;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);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ndt-toolbar--bottom{bottom:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(100% - .5rem))}.ndt-toolbar--bottom.ndt-toolbar--visible{transform:translate(-50%) translateY(-10px)}.ndt-toolbar--top{top:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(-100% + .5rem))}.ndt-toolbar--top.ndt-toolbar--visible{transform:translate(-50%) translateY(10px)}.ndt-toolbar--left{left:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(-100% + .5rem))}.ndt-toolbar--left.ndt-toolbar--visible{transform:translateY(-50%) translate(10px)}.ndt-toolbar--right{right:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(100% - .5rem))}.ndt-toolbar--right.ndt-toolbar--visible{transform:translateY(-50%) translate(-10px)}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: ToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: ToolbarI18nToolComponent, selector: "ndt-i18n-tool" }, { kind: "component", type: ToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: ToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: ToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: ToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;z-index:999999;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);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ndt-toolbar--bottom{bottom:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(100% - .5rem))}.ndt-toolbar--bottom.ndt-toolbar--visible{transform:translate(-50%) translateY(-10px)}.ndt-toolbar--top{top:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(-100% + .5rem))}.ndt-toolbar--top.ndt-toolbar--visible{transform:translate(-50%) translateY(10px)}.ndt-toolbar--left{left:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(-100% + .5rem))}.ndt-toolbar--left.ndt-toolbar--visible{transform:translateY(-50%) translate(10px)}.ndt-toolbar--right{right:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(100% - .5rem))}.ndt-toolbar--right.ndt-toolbar--visible{transform:translateY(-50%) translate(-10px)}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: ToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: ToolbarI18nToolComponent, selector: "ndt-i18n-tool" }, { kind: "component", type: ToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: ToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: ToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: ToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -7733,6 +8605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       >
         <ndt-home-tool />
         <ng-content />
+        <ng-container #customTools />
         @if (config().showI18nTool ?? false) {
           <ndt-i18n-tool />
         }
@@ -7750,7 +8623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }
       </div>
     }
-  `, 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-xxs: .65rem;--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-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;z-index:999999;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);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ndt-toolbar--bottom{bottom:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(100% - .5rem))}.ndt-toolbar--bottom.ndt-toolbar--visible{transform:translate(-50%) translateY(-10px)}.ndt-toolbar--top{top:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(-100% + .5rem))}.ndt-toolbar--top.ndt-toolbar--visible{transform:translate(-50%) translateY(10px)}.ndt-toolbar--left{left:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(-100% + .5rem))}.ndt-toolbar--left.ndt-toolbar--visible{transform:translateY(-50%) translate(10px)}.ndt-toolbar--right{right:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(100% - .5rem))}.ndt-toolbar--right.ndt-toolbar--visible{transform:translateY(-50%) translate(-10px)}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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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;z-index:999999;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);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ndt-toolbar--bottom{bottom:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(100% - .5rem))}.ndt-toolbar--bottom.ndt-toolbar--visible{transform:translate(-50%) translateY(-10px)}.ndt-toolbar--top{top:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(-100% + .5rem))}.ndt-toolbar--top.ndt-toolbar--visible{transform:translate(-50%) translateY(10px)}.ndt-toolbar--left{left:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(-100% + .5rem))}.ndt-toolbar--left.ndt-toolbar--visible{transform:translateY(-50%) translate(10px)}.ndt-toolbar--right{right:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(100% - .5rem))}.ndt-toolbar--right.ndt-toolbar--visible{transform:translateY(-50%) translate(-10px)}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 ToolbarFeatureFlagService {
@@ -8205,11 +9078,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * @returns Angular EnvironmentProviders for all toolbar services
  */
 function provideToolbar(config) {
+    const { customTools, ...configWithoutTools } = config ?? {};
     return makeEnvironmentProviders([
         { provide: TOOLBAR_FEATURE_FLAGS, useClass: ToolbarFeatureFlagService },
         { provide: TOOLBAR_PERMISSIONS, useClass: ToolbarPermissionsService },
         { provide: TOOLBAR_APP_FEATURES, useClass: ToolbarAppFeaturesService },
-        { provide: TOOLBAR_CONFIG, useValue: config ?? {} },
+        { provide: TOOLBAR_CONFIG, useValue: configWithoutTools },
+        { provide: TOOLBAR_CUSTOM_TOOLS, useValue: customTools ?? [] },
         {
             provide: ENVIRONMENT_INITIALIZER,
             multi: true,
@@ -8241,6 +9116,92 @@ function provideToolbar(config) {
     ]);
 }
 
+class ToolbarCardComponent {
+    constructor() {
+        this.click = signal(undefined);
+        this.isHovered = signal(false);
+    }
+    onClick() {
+        this.click.set();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ToolbarCardComponent, isStandalone: true, selector: "ndt-card", ngImport: i0, template: `
+    <div
+      class="card"
+      role="button"
+      tabindex="0"
+      (click)="onClick()"
+      (keydown.enter)="onClick()"
+      (keydown.space)="onClick()"
+      [class.card--hover]="isHovered()"
+      (mouseenter)="isHovered.set(true)"
+      (mouseleave)="isHovered.set(false)"
+    >
+      <ng-content></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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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.7", ngImport: i0, type: ToolbarCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-card', standalone: true, template: `
+    <div
+      class="card"
+      role="button"
+      tabindex="0"
+      (click)="onClick()"
+      (keydown.enter)="onClick()"
+      (keydown.space)="onClick()"
+      [class.card--hover]="isHovered()"
+      (mouseenter)="isHovered.set(true)"
+      (mouseleave)="isHovered.set(false)"
+    >
+      <ng-content></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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 ToolbarClickableCardComponent {
+    constructor() {
+        this.icon = input.required();
+        this.title = input.required();
+        this.subtitle = input.required();
+        this.click = signal(undefined);
+    }
+    onClick() {
+        this.click.set();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarClickableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarClickableCardComponent, 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">
+          <ndt-icon [name]="icon()" />
+        </div>
+        <div class="clickable-card__content">
+          <div class="clickable-card__title">{{ title() }}</div>
+          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
+        </div>
+      </div>
+    </ndt-card>
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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: ToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarClickableCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-clickable-card', standalone: true, imports: [ToolbarCardComponent, ToolbarIconComponent], template: `
+    <ndt-card (clicked)="onClick()">
+      <div class="clickable-card">
+        <div class="clickable-card__icon">
+          <ndt-icon [name]="icon()" />
+        </div>
+        <div class="clickable-card__content">
+          <div class="clickable-card__title">{{ title() }}</div>
+          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
+        </div>
+      </div>
+    </ndt-card>
+  `, 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-xxs: .65rem;--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: #635BFF;--ndt-primary-rgb: 99, 91, 255;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--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 ToolbarStepDirective {
     constructor() {
         this.ndtStep = input.required();
@@ -8303,6 +9264,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column}.step-header{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding-bottom:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);border-bottom:1px solid var(--ndt-border-primary)}.step-title{font-size:var(--ndt-font-size-md);font-weight:600;color:var(--ndt-text-primary)}\n"] }]
         }] });
 
+class ToolbarTabComponent {
+    constructor() {
+        this.label = input.required();
+        this.isActive = signal(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarTabComponent, isStandalone: true, selector: "ndt-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (isActive()) {
+      <ng-content />
+    }
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-tab', standalone: true, template: `
+    @if (isActive()) {
+      <ng-content />
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }] });
+
+class ToolbarTabsComponent {
+    constructor() {
+        this.tabs = contentChildren(ToolbarTabComponent);
+        this.activeIndex = signal(0);
+        this.activeIndexChange = output();
+        this.instanceId = Math.random().toString(36).slice(2, 9);
+        effect(() => {
+            const tabs = this.tabs();
+            const active = this.activeIndex();
+            tabs.forEach((tab, i) => tab.isActive.set(i === active));
+        });
+    }
+    selectTab(index) {
+        this.activeIndex.set(index);
+        this.activeIndexChange.emit(index);
+    }
+    onKeydown(event, currentIndex) {
+        const count = this.tabs().length;
+        let newIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                newIndex = (currentIndex + 1) % count;
+                break;
+            case 'ArrowLeft':
+                newIndex = (currentIndex - 1 + count) % count;
+                break;
+            case 'Home':
+                newIndex = 0;
+                break;
+            case 'End':
+                newIndex = count - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.selectTab(newIndex);
+        const button = event.target
+            .parentElement?.querySelectorAll('[role="tab"]')[newIndex];
+        button?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarTabsComponent, isStandalone: true, selector: "ndt-tabs", outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: ToolbarTabComponent, isSignal: true }], ngImport: i0, template: `
+    <div class="tab-bar" role="tablist">
+      @for (tab of tabs(); track $index) {
+        <button
+          class="tab-button"
+          [class.tab-button--active]="$index === activeIndex()"
+          role="tab"
+          [attr.aria-selected]="$index === activeIndex()"
+          [attr.tabindex]="$index === activeIndex() ? 0 : -1"
+          [attr.id]="'tab-' + instanceId + '-' + $index"
+          [attr.aria-controls]="'tabpanel-' + instanceId"
+          (click)="selectTab($index)"
+          (keydown)="onKeydown($event, $index)"
+        >
+          {{ tab.label() }}
+        </button>
+      }
+    </div>
+    <div
+      class="tab-panel"
+      role="tabpanel"
+      [attr.id]="'tabpanel-' + instanceId"
+      [attr.aria-labelledby]="'tab-' + instanceId + '-' + activeIndex()"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.tab-bar{display:flex;gap:var(--ndt-spacing-xs);padding:0;margin:0;border-bottom:1px solid var(--ndt-border-primary);flex-shrink:0}.tab-button{all:unset;display:inline-flex;align-items:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);font-size:var(--ndt-font-size-sm);font-weight:500;color:var(--ndt-text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;box-sizing:border-box}.tab-button:hover{color:var(--ndt-text-primary)}.tab-button:focus-visible{outline:2px solid var(--ndt-text-primary);outline-offset:-2px;border-radius:var(--ndt-border-radius-small)}.tab-button--active{color:var(--ndt-text-primary);border-bottom-color:var(--ndt-text-primary);font-weight:600}.tab-panel{flex:1;min-height:0;overflow:auto;padding-top:var(--ndt-spacing-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-tabs', standalone: true, template: `
+    <div class="tab-bar" role="tablist">
+      @for (tab of tabs(); track $index) {
+        <button
+          class="tab-button"
+          [class.tab-button--active]="$index === activeIndex()"
+          role="tab"
+          [attr.aria-selected]="$index === activeIndex()"
+          [attr.tabindex]="$index === activeIndex() ? 0 : -1"
+          [attr.id]="'tab-' + instanceId + '-' + $index"
+          [attr.aria-controls]="'tabpanel-' + instanceId"
+          (click)="selectTab($index)"
+          (keydown)="onKeydown($event, $index)"
+        >
+          {{ tab.label() }}
+        </button>
+      }
+    </div>
+    <div
+      class="tab-panel"
+      role="tabpanel"
+      [attr.id]="'tabpanel-' + instanceId"
+      [attr.aria-labelledby]="'tab-' + instanceId + '-' + activeIndex()"
+    >
+      <ng-content />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column}.tab-bar{display:flex;gap:var(--ndt-spacing-xs);padding:0;margin:0;border-bottom:1px solid var(--ndt-border-primary);flex-shrink:0}.tab-button{all:unset;display:inline-flex;align-items:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);font-size:var(--ndt-font-size-sm);font-weight:500;color:var(--ndt-text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;box-sizing:border-box}.tab-button:hover{color:var(--ndt-text-primary)}.tab-button:focus-visible{outline:2px solid var(--ndt-text-primary);outline-offset:-2px;border-radius:var(--ndt-border-radius-small)}.tab-button--active{color:var(--ndt-text-primary);border-bottom-color:var(--ndt-text-primary);font-weight:600}.tab-panel{flex:1;min-height:0;overflow:auto;padding-top:var(--ndt-spacing-md)}\n"] }]
+        }], ctorParameters: () => [] });
+
 class ToolbarI18nService {
     constructor() {
         this.internalService = inject(ToolbarInternalI18nService);
@@ -8591,5 +9674,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CURRENCY_SYMBOLS, DEFAULT_CURRENCIES, DEFAULT_TIMEZONES, TOOLBAR_APP_FEATURES, TOOLBAR_CONFIG, TOOLBAR_FEATURE_FLAGS, TOOLBAR_PERMISSIONS, TOOLBAR_POSITIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarButtonComponent, ToolbarCardComponent, ToolbarClickableCardComponent, ToolbarComponent, ToolbarFeatureFlagService, ToolbarI18nService, ToolbarI18nToolComponent, ToolbarIconButtonComponent, ToolbarIconComponent, ToolbarInputComponent, ToolbarLinkButtonComponent, ToolbarListComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarSelectComponent, ToolbarStepDirective, ToolbarStepViewComponent, ToolbarToolComponent, expandText, formatCurrency, formatCustomDate, formatCustomNumber, formatDate, formatNumber, formatTime, isHorizontalPosition, provideToolbar, pseudoLocalize };
+export { CURRENCY_SYMBOLS, DEFAULT_CURRENCIES, DEFAULT_TIMEZONES, TOOLBAR_APP_FEATURES, TOOLBAR_CONFIG, TOOLBAR_FEATURE_FLAGS, TOOLBAR_PERMISSIONS, TOOLBAR_POSITIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarButtonComponent, ToolbarCardComponent, ToolbarClickableCardComponent, ToolbarComponent, ToolbarConfirmDialogComponent, ToolbarFeatureFlagService, ToolbarI18nService, ToolbarI18nToolComponent, ToolbarIconButtonComponent, ToolbarIconComponent, ToolbarInputComponent, ToolbarLinkButtonComponent, ToolbarListComponent, ToolbarListGroupComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarSelectComponent, ToolbarStepDirective, ToolbarStepViewComponent, ToolbarTabComponent, ToolbarTabsComponent, ToolbarToolComponent, ToolbarToolHeaderComponent, expandText, formatCurrency, formatCustomDate, formatCustomNumber, formatDate, formatNumber, formatTime, isHorizontalPosition, provideToolbar, pseudoLocalize };
 //# sourceMappingURL=ngx-dev-toolbar.mjs.map