@cdevhub/ngx-tw 0.2.0 → 0.3.0

package/fesm2022/cdevhub-ngx-tw-command-palette.mjs

@@ -130,11 +130,12 @@ function findLastEnabled(items) {
 /** Optional explicit grouping wrapper. Items placed inside inherit its label. */
 class CommandPaletteGroupDirective {
     /** Group heading text shown above the items. Required. */
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CommandPaletteGroupDirective, isStandalone: true, selector: "[twCommandPaletteGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: CommandPaletteGroupDirective, isStandalone: true, selector: "[twCommandPaletteGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCommandPaletteGroup]',
@@ -144,25 +145,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 /** A declarative palette item. Consumers project its rendered content as children. */
 class CommandPaletteItemDirective {
     /** Stable identifier for the item. Used as DOM id and in selection payloads. Required. */
-    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** Plain-text label used for filtering and default rendering. Defaults to `''`. */
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Additional search keywords that match the query but are not rendered. Defaults to `[]`. */
-    keywords = input([], ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
+    keywords = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
     /** Explicit group name. Overrides any enclosing `twCommandPaletteGroup`. Defaults to `undefined`. */
-    group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    group = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
     /** Whether the item is disabled. Disabled items render but cannot be activated. Defaults to `false`. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Keyboard shortcut hint. A string renders as one kbd; an array renders each key separately. Defaults to `undefined`. */
-    shortcut = input(undefined, ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    shortcut = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
     /** Secondary description text rendered under the label. Defaults to `''`. */
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     /** Callback run before `activated` emits. Defaults to `undefined`. */
-    run = input(undefined, ...(ngDevMode ? [{ debugName: "run" }] : /* istanbul ignore next */ []));
+    run = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "run" }] : /* istanbul ignore next */ []));
     /** Fires when this specific item is activated (Enter or click). */
     activated = output();
     /** Projected template used by the palette overlay to render this item's content. */
-    contentTemplate = viewChild('content', ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    contentTemplate = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
     parentGroup = inject(CommandPaletteGroupDirective, {
         optional: true,
         skipSelf: true,
@@ -177,11 +187,12 @@ class CommandPaletteItemDirective {
         shortcut: this.shortcut(),
         description: this.description() || undefined,
         run: this.run(),
-    }), ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: CommandPaletteItemDirective, isStandalone: true, selector: "tw-command-palette-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, keywords: { classPropertyName: "keywords", publicName: "keywords", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, run: { classPropertyName: "run", publicName: "run", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: CommandPaletteItemDirective, isStandalone: true, selector: "tw-command-palette-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, keywords: { classPropertyName: "keywords", publicName: "keywords", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, run: { classPropertyName: "run", publicName: "run", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteItemDirective, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-command-palette-item',
@@ -195,10 +206,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 // ── Item decoration directives ──
 /** Styles a leading icon inside a palette item. */
 class CommandPaletteItemIconDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteItemIconDirective, isStandalone: true, selector: "[twCommandPaletteItemIcon]", host: { classAttribute: "size-4 shrink-0 text-fg-muted" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CommandPaletteItemIconDirective, isStandalone: true, selector: "[twCommandPaletteItemIcon]", host: { classAttribute: "size-4 shrink-0 text-fg-muted" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteItemIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCommandPaletteItemIcon]',
@@ -209,10 +220,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 /** Styles secondary description text inside a palette item. */
 class CommandPaletteItemDescriptionDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteItemDescriptionDirective, isStandalone: true, selector: "[twCommandPaletteItemDescription]", host: { classAttribute: "block text-xs text-fg-muted mt-0.5 min-w-0 truncate" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CommandPaletteItemDescriptionDirective, isStandalone: true, selector: "[twCommandPaletteItemDescription]", host: { classAttribute: "block text-xs text-fg-muted mt-0.5 min-w-0 truncate" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteItemDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCommandPaletteItemDescription]',
@@ -225,10 +236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 /** Structural directive — consumer template rendered when no items match the query. */
 class CommandPaletteEmptyDirective {
     template = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteEmptyDirective, isStandalone: true, selector: "[twCommandPaletteEmpty]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CommandPaletteEmptyDirective, isStandalone: true, selector: "[twCommandPaletteEmpty]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteEmptyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteEmptyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCommandPaletteEmpty]',
@@ -237,10 +248,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 /** Structural directive — consumer template rendered as a sticky footer inside the palette. */
 class CommandPaletteFooterDirective {
     template = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteFooterDirective, isStandalone: true, selector: "[twCommandPaletteFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CommandPaletteFooterDirective, isStandalone: true, selector: "[twCommandPaletteFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCommandPaletteFooter]',
@@ -251,25 +262,40 @@ class CommandPaletteOverlayComponent {
     /** Host palette instance — provided via the content injector on attach. */
     palette = inject(CommandPaletteComponent);
     listId = `tw-command-palette-list-${nextPaletteId++}`;
-    searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
-    variantResult = computed(() => commandPaletteVariants({ size: this.palette.size() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    searchInputRef = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => commandPaletteVariants({ size: this.palette.size() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     panelClasses = computed(() => {
         const base = this.variantResult().panel();
         const custom = this.palette.panelClassResolved();
         return custom ? `${base} ${custom}` : base;
-    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
-    searchWrapperClasses = computed(() => this.variantResult().searchWrapper(), ...(ngDevMode ? [{ debugName: "searchWrapperClasses" }] : /* istanbul ignore next */ []));
-    searchInputClasses = computed(() => this.variantResult().searchInput(), ...(ngDevMode ? [{ debugName: "searchInputClasses" }] : /* istanbul ignore next */ []));
-    searchIconClasses = computed(() => this.variantResult().searchIcon(), ...(ngDevMode ? [{ debugName: "searchIconClasses" }] : /* istanbul ignore next */ []));
-    listClasses = computed(() => this.variantResult().list(), ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
-    groupHeaderClasses = computed(() => this.variantResult().groupHeader(), ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
-    itemBodyClasses = computed(() => this.variantResult().itemBody(), ...(ngDevMode ? [{ debugName: "itemBodyClasses" }] : /* istanbul ignore next */ []));
-    itemLabelClasses = computed(() => this.variantResult().itemLabel(), ...(ngDevMode ? [{ debugName: "itemLabelClasses" }] : /* istanbul ignore next */ []));
-    itemDescriptionClasses = computed(() => this.variantResult().itemDescription(), ...(ngDevMode ? [{ debugName: "itemDescriptionClasses" }] : /* istanbul ignore next */ []));
-    itemShortcutClasses = computed(() => this.variantResult().itemShortcut(), ...(ngDevMode ? [{ debugName: "itemShortcutClasses" }] : /* istanbul ignore next */ []));
-    itemKbdClasses = computed(() => this.variantResult().itemKbd(), ...(ngDevMode ? [{ debugName: "itemKbdClasses" }] : /* istanbul ignore next */ []));
-    emptyClasses = computed(() => this.variantResult().empty(), ...(ngDevMode ? [{ debugName: "emptyClasses" }] : /* istanbul ignore next */ []));
-    footerClasses = computed(() => this.variantResult().footer(), ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    searchWrapperClasses = computed(() => this.variantResult().searchWrapper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchWrapperClasses" }] : /* istanbul ignore next */ []));
+    searchInputClasses = computed(() => this.variantResult().searchInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputClasses" }] : /* istanbul ignore next */ []));
+    searchIconClasses = computed(() => this.variantResult().searchIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchIconClasses" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => this.variantResult().list(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    groupHeaderClasses = computed(() => this.variantResult().groupHeader(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
+    itemBodyClasses = computed(() => this.variantResult().itemBody(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemBodyClasses" }] : /* istanbul ignore next */ []));
+    itemLabelClasses = computed(() => this.variantResult().itemLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemLabelClasses" }] : /* istanbul ignore next */ []));
+    itemDescriptionClasses = computed(() => this.variantResult().itemDescription(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemDescriptionClasses" }] : /* istanbul ignore next */ []));
+    itemShortcutClasses = computed(() => this.variantResult().itemShortcut(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemShortcutClasses" }] : /* istanbul ignore next */ []));
+    itemKbdClasses = computed(() => this.variantResult().itemKbd(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemKbdClasses" }] : /* istanbul ignore next */ []));
+    emptyClasses = computed(() => this.variantResult().empty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyClasses" }] : /* istanbul ignore next */ []));
+    footerClasses = computed(() => this.variantResult().footer(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
     itemClasses(active, disabled) {
         return commandPaletteVariants({
             size: this.palette.size(),
@@ -291,46 +317,59 @@ class CommandPaletteOverlayComponent {
     focusSearch() {
         this.searchInputRef()?.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CommandPaletteOverlayComponent, isStandalone: true, selector: "tw-command-palette-overlay", host: { properties: { "attr.data-command-palette-overlay": "\"\"", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" }, classAttribute: "fixed inset-0 flex items-start justify-center p-4 pointer-events-none origin-top" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"'true'\" [attr.aria-label]=\"palette.ariaLabel()\">\n  <div [class]=\"searchWrapperClasses()\">\n    <svg [class]=\"searchIconClasses()\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n    </svg>\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      [class]=\"searchInputClasses()\"\n      [placeholder]=\"palette.placeholder()\"\n      [value]=\"palette.query()\"\n      (input)=\"onSearchInput($event)\"\n      [attr.aria-label]=\"palette.searchAriaLabel()\"\n      [attr.aria-expanded]=\"'true'\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"palette.activeItemId()\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n  </div>\n  <div [class]=\"listClasses()\" role=\"listbox\" [id]=\"listId\">\n    @if (palette.grouped().length === 0) {\n      @if (palette.emptyTemplate(); as emptyTpl) {\n        <div [class]=\"emptyClasses()\">\n          <ng-container [ngTemplateOutlet]=\"emptyTpl\" [ngTemplateOutletContext]=\"{ $implicit: palette.query() }\" />\n        </div>\n      } @else {\n        <div [class]=\"emptyClasses()\">No results found</div>\n      }\n    } @else {\n      @for (group of palette.grouped(); track group.id) {\n        <div role=\"group\" [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label) {\n            <div [class]=\"groupHeaderClasses()\" role=\"presentation\">{{ group.label }}</div>\n          }\n          @for (item of group.items; track item.data.id) {\n            <div\n              [id]=\"item.data.id\"\n              role=\"option\"\n              [class]=\"itemClasses(item.data.id === palette.activeItemId(), item.data.disabled ?? false)\"\n              [attr.aria-selected]=\"item.data.id === palette.activeItemId()\"\n              [attr.aria-disabled]=\"(item.data.disabled ?? false) ? 'true' : null\"\n              (click)=\"onItemClick(item)\"\n              (mousemove)=\"onItemHover(item)\"\n            >\n              <span [class]=\"itemBodyClasses()\">\n                @if (item.template; as tpl) {\n                  <span [class]=\"itemLabelClasses()\">\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                  </span>\n                } @else {\n                  <span [class]=\"itemLabelClasses()\">{{ item.data.label }}</span>\n                }\n                @if (item.data.description) {\n                  <span [class]=\"itemDescriptionClasses()\">{{ item.data.description }}</span>\n                }\n              </span>\n              @if (item.shortcutKeys.length > 0) {\n                <span [class]=\"itemShortcutClasses()\" aria-hidden=\"true\">\n                  @for (key of item.shortcutKeys; track $index) {\n                    <kbd [class]=\"itemKbdClasses()\">{{ key }}</kbd>\n                  }\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n  @if (palette.footerTemplate(); as footerTpl) {\n    <div [class]=\"footerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CommandPaletteOverlayComponent, isStandalone: true, selector: "tw-command-palette-overlay", host: { properties: { "attr.data-command-palette-overlay": "\"\"", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" }, classAttribute: "fixed inset-0 flex items-start justify-center p-4 pointer-events-none origin-top" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"'true'\" [attr.aria-label]=\"palette.ariaLabel()\">\n  <div [class]=\"searchWrapperClasses()\">\n    <svg [class]=\"searchIconClasses()\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n    </svg>\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      [class]=\"searchInputClasses()\"\n      [placeholder]=\"palette.placeholder()\"\n      [value]=\"palette.query()\"\n      (input)=\"onSearchInput($event)\"\n      [attr.aria-label]=\"palette.searchAriaLabel()\"\n      [attr.aria-expanded]=\"'true'\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"palette.activeItemId()\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n  </div>\n  <div [class]=\"listClasses()\" role=\"listbox\" [id]=\"listId\">\n    @if (palette.grouped().length === 0) {\n      @if (palette.emptyTemplate(); as emptyTpl) {\n        <div [class]=\"emptyClasses()\">\n          <ng-container [ngTemplateOutlet]=\"emptyTpl\" [ngTemplateOutletContext]=\"{ $implicit: palette.query() }\" />\n        </div>\n      } @else {\n        <div [class]=\"emptyClasses()\">No results found</div>\n      }\n    } @else {\n      @for (group of palette.grouped(); track group.id) {\n        <div role=\"group\" [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label) {\n            <div [class]=\"groupHeaderClasses()\" role=\"presentation\">{{ group.label }}</div>\n          }\n          @for (item of group.items; track item.data.id) {\n            <!-- ARIA activedescendant listbox: navigation lives on the search\n                 input above; option elements never receive DOM focus and have\n                 no keyboard handlers of their own. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              [id]=\"item.data.id\"\n              role=\"option\"\n              [class]=\"itemClasses(item.data.id === palette.activeItemId(), item.data.disabled ?? false)\"\n              [attr.aria-selected]=\"item.data.id === palette.activeItemId()\"\n              [attr.aria-disabled]=\"(item.data.disabled ?? false) ? 'true' : null\"\n              (click)=\"onItemClick(item)\"\n              (mousemove)=\"onItemHover(item)\"\n            >\n              <span [class]=\"itemBodyClasses()\">\n                @if (item.template; as tpl) {\n                  <span [class]=\"itemLabelClasses()\">\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                  </span>\n                } @else {\n                  <span [class]=\"itemLabelClasses()\">{{ item.data.label }}</span>\n                }\n                @if (item.data.description) {\n                  <span [class]=\"itemDescriptionClasses()\">{{ item.data.description }}</span>\n                }\n              </span>\n              @if (item.shortcutKeys.length > 0) {\n                <span [class]=\"itemShortcutClasses()\" aria-hidden=\"true\">\n                  @for (key of item.shortcutKeys; track $index) {\n                    <kbd [class]=\"itemKbdClasses()\">{{ key }}</kbd>\n                  }\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n  @if (palette.footerTemplate(); as footerTpl) {\n    <div [class]=\"footerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tw-command-palette-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
                         class: 'fixed inset-0 flex items-start justify-center p-4 pointer-events-none origin-top',
                         '[attr.data-command-palette-overlay]': '""',
                         '[animate.enter]': '"scale-in"',
                         '[animate.leave]': '"scale-out"',
-                    }, template: "<div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"'true'\" [attr.aria-label]=\"palette.ariaLabel()\">\n  <div [class]=\"searchWrapperClasses()\">\n    <svg [class]=\"searchIconClasses()\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n    </svg>\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      [class]=\"searchInputClasses()\"\n      [placeholder]=\"palette.placeholder()\"\n      [value]=\"palette.query()\"\n      (input)=\"onSearchInput($event)\"\n      [attr.aria-label]=\"palette.searchAriaLabel()\"\n      [attr.aria-expanded]=\"'true'\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"palette.activeItemId()\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n  </div>\n  <div [class]=\"listClasses()\" role=\"listbox\" [id]=\"listId\">\n    @if (palette.grouped().length === 0) {\n      @if (palette.emptyTemplate(); as emptyTpl) {\n        <div [class]=\"emptyClasses()\">\n          <ng-container [ngTemplateOutlet]=\"emptyTpl\" [ngTemplateOutletContext]=\"{ $implicit: palette.query() }\" />\n        </div>\n      } @else {\n        <div [class]=\"emptyClasses()\">No results found</div>\n      }\n    } @else {\n      @for (group of palette.grouped(); track group.id) {\n        <div role=\"group\" [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label) {\n            <div [class]=\"groupHeaderClasses()\" role=\"presentation\">{{ group.label }}</div>\n          }\n          @for (item of group.items; track item.data.id) {\n            <div\n              [id]=\"item.data.id\"\n              role=\"option\"\n              [class]=\"itemClasses(item.data.id === palette.activeItemId(), item.data.disabled ?? false)\"\n              [attr.aria-selected]=\"item.data.id === palette.activeItemId()\"\n              [attr.aria-disabled]=\"(item.data.disabled ?? false) ? 'true' : null\"\n              (click)=\"onItemClick(item)\"\n              (mousemove)=\"onItemHover(item)\"\n            >\n              <span [class]=\"itemBodyClasses()\">\n                @if (item.template; as tpl) {\n                  <span [class]=\"itemLabelClasses()\">\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                  </span>\n                } @else {\n                  <span [class]=\"itemLabelClasses()\">{{ item.data.label }}</span>\n                }\n                @if (item.data.description) {\n                  <span [class]=\"itemDescriptionClasses()\">{{ item.data.description }}</span>\n                }\n              </span>\n              @if (item.shortcutKeys.length > 0) {\n                <span [class]=\"itemShortcutClasses()\" aria-hidden=\"true\">\n                  @for (key of item.shortcutKeys; track $index) {\n                    <kbd [class]=\"itemKbdClasses()\">{{ key }}</kbd>\n                  }\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n  @if (palette.footerTemplate(); as footerTpl) {\n    <div [class]=\"footerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    </div>\n  }\n</div>\n" }]
+                    }, template: "<div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"'true'\" [attr.aria-label]=\"palette.ariaLabel()\">\n  <div [class]=\"searchWrapperClasses()\">\n    <svg [class]=\"searchIconClasses()\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n    </svg>\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      [class]=\"searchInputClasses()\"\n      [placeholder]=\"palette.placeholder()\"\n      [value]=\"palette.query()\"\n      (input)=\"onSearchInput($event)\"\n      [attr.aria-label]=\"palette.searchAriaLabel()\"\n      [attr.aria-expanded]=\"'true'\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"palette.activeItemId()\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n  </div>\n  <div [class]=\"listClasses()\" role=\"listbox\" [id]=\"listId\">\n    @if (palette.grouped().length === 0) {\n      @if (palette.emptyTemplate(); as emptyTpl) {\n        <div [class]=\"emptyClasses()\">\n          <ng-container [ngTemplateOutlet]=\"emptyTpl\" [ngTemplateOutletContext]=\"{ $implicit: palette.query() }\" />\n        </div>\n      } @else {\n        <div [class]=\"emptyClasses()\">No results found</div>\n      }\n    } @else {\n      @for (group of palette.grouped(); track group.id) {\n        <div role=\"group\" [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label) {\n            <div [class]=\"groupHeaderClasses()\" role=\"presentation\">{{ group.label }}</div>\n          }\n          @for (item of group.items; track item.data.id) {\n            <!-- ARIA activedescendant listbox: navigation lives on the search\n                 input above; option elements never receive DOM focus and have\n                 no keyboard handlers of their own. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              [id]=\"item.data.id\"\n              role=\"option\"\n              [class]=\"itemClasses(item.data.id === palette.activeItemId(), item.data.disabled ?? false)\"\n              [attr.aria-selected]=\"item.data.id === palette.activeItemId()\"\n              [attr.aria-disabled]=\"(item.data.disabled ?? false) ? 'true' : null\"\n              (click)=\"onItemClick(item)\"\n              (mousemove)=\"onItemHover(item)\"\n            >\n              <span [class]=\"itemBodyClasses()\">\n                @if (item.template; as tpl) {\n                  <span [class]=\"itemLabelClasses()\">\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                  </span>\n                } @else {\n                  <span [class]=\"itemLabelClasses()\">{{ item.data.label }}</span>\n                }\n                @if (item.data.description) {\n                  <span [class]=\"itemDescriptionClasses()\">{{ item.data.description }}</span>\n                }\n              </span>\n              @if (item.shortcutKeys.length > 0) {\n                <span [class]=\"itemShortcutClasses()\" aria-hidden=\"true\">\n                  @for (key of item.shortcutKeys; track $index) {\n                    <kbd [class]=\"itemKbdClasses()\">{{ key }}</kbd>\n                  }\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n  @if (palette.footerTemplate(); as footerTpl) {\n    <div [class]=\"footerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 // ── Public palette component ──
 class CommandPaletteComponent {
     /** Controls item density and padding across the palette. Defaults to `'md'`. */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Placeholder text shown inside the search input. Defaults to `'Type a command or search…'`. */
-    placeholder = input('Type a command or search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input('Type a command or search…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Two-way bindable search query. Reads or resets the current filter. Defaults to `''`. */
-    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    query = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     /** Two-way bindable open state. Setting to `true` opens the palette; closing updates it to `false`. Defaults to `false`. */
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Data-driven command list. Merged with projected items and filtered by `query`. Defaults to `[]`. */
-    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : /* istanbul ignore next */ []));
+    commands = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "commands" }] : /* istanbul ignore next */ []));
     /** Custom filter function. Receives the merged item list and current query, returns the filtered result. Defaults to `undefined` (case-insensitive substring match). */
-    filterFn = input(undefined, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    filterFn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
     /** Whether the palette closes automatically after an item is activated. Defaults to `true` — a command palette is a fire-and-dismiss surface; the special case is a "run many" launcher that opts out. */
-    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    closeOnSelect = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
     /** Whether Escape closes the palette. Defaults to `true` — Escape is the universal dismiss key for modal surfaces; the special case is a non-dismissible palette. */
-    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    closeOnEscape = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     /** Whether clicking the backdrop closes the palette. Defaults to `true` — clicking outside a modal is the expected dismiss gesture; the special case is enforcing an explicit choice. */
-    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    closeOnBackdropClick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
     /** Whether the search input is auto-focused when the palette opens. Defaults to `true` — without auto-focus the user must click into the input before typing, defeating the keyboard-first design. */
-    autoFocus = input(true, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    autoFocus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
     /** Accessible label used for the dialog role. Defaults to `'Command palette'`. */
-    ariaLabel = input('Command palette', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Command palette', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Accessible label applied to the search input (`role="combobox"`). Defaults to `'Search commands'`. */
-    searchAriaLabel = input('Search commands', ...(ngDevMode ? [{ debugName: "searchAriaLabel" }] : /* istanbul ignore next */ []));
+    searchAriaLabel = input('Search commands', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchAriaLabel" }] : /* istanbul ignore next */ []));
     /** Additional classes appended to the overlay panel for consumer customization. Defaults to `''`. */
-    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** Fires when a command is activated (via click or Enter). Payload is the resolved `CommandPaletteItem`. */
     itemSelected = output();
     /** Fires after the palette becomes fully visible. */
@@ -344,8 +383,10 @@ class CommandPaletteComponent {
     focusTrapFactory = inject(FocusTrapFactory);
     announcer = inject(LiveAnnouncer);
     declarativeItems = contentChildren(CommandPaletteItemDirective, { ...(ngDevMode ? { debugName: "declarativeItems" } : /* istanbul ignore next */ {}), descendants: true });
-    emptyDirective = contentChild(CommandPaletteEmptyDirective, ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
-    footerDirective = contentChild(CommandPaletteFooterDirective, ...(ngDevMode ? [{ debugName: "footerDirective" }] : /* istanbul ignore next */ []));
+    emptyDirective = contentChild(CommandPaletteEmptyDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
+    footerDirective = contentChild(CommandPaletteFooterDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerDirective" }] : /* istanbul ignore next */ []));
     overlayRef = null;
     overlayInstance = null;
     focusTrap = null;
@@ -354,7 +395,8 @@ class CommandPaletteComponent {
     closing = false;
     closeTimer = null;
     announceTimer = null;
-    isAttached = signal(false, ...(ngDevMode ? [{ debugName: "isAttached" }] : /* istanbul ignore next */ []));
+    isAttached = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAttached" }] : /* istanbul ignore next */ []));
     /** Merged (declarative + data-array) items keyed by id — declarative wins on collision. */
     allItems = computed(() => {
         const declarative = this.declarativeItems();
@@ -377,7 +419,8 @@ class CommandPaletteComponent {
             });
         }
         return [...declarativeResolved, ...arrayResolved];
-    }, ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
     /** Items after applying the filter function. */
     filteredItems = computed(() => {
         const all = this.allItems();
@@ -395,7 +438,8 @@ class CommandPaletteComponent {
                 result.push(resolved);
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     /** Filtered items grouped by their `group` field. */
     grouped = computed(() => {
         const items = this.filteredItems();
@@ -413,7 +457,8 @@ class CommandPaletteComponent {
             g.items.push(item);
         }
         return groups;
-    }, ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
     /**
      * Active item index, auto-resets to the first enabled item when the filtered
      * *id set* changes. Keyed off the id sequence (not the array reference) so a
@@ -440,20 +485,31 @@ class CommandPaletteComponent {
         const idx = this.activeIndex();
         const items = this.filteredItems();
         return items[idx]?.data.id ?? null;
-    }, ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
     /** Template-ref of the projected empty state (if any). */
-    emptyTemplate = computed(() => this.emptyDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    emptyTemplate = computed(() => this.emptyDirective()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
     /** Template-ref of the projected footer (if any). */
-    footerTemplate = computed(() => this.footerDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    footerTemplate = computed(() => this.footerDirective()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
     /** Resolved panel-class string (array merged into a single string). */
     panelClassResolved = computed(() => {
         const raw = this.panelClass();
         return Array.isArray(raw) ? raw.join(' ') : raw;
-    }, ...(ngDevMode ? [{ debugName: "panelClassResolved" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClassResolved" }] : /* istanbul ignore next */ []));
     constructor() {
         // React to model changes from the consumer
         effect(() => {
             const shouldOpen = this.open();
+            if (shouldOpen && this.closing && this.overlayInstance) {
+                // Reopened before the leave animation finished — cancel the pending
+                // close rather than letting its deferred callback write `false` back
+                // over the consumer's `true`. Same shape as `popover.ts`.
+                this.cancelPendingClose();
+                return;
+            }
             if (shouldOpen && !this.overlayInstance && !this.closing) {
                 this.openPalette();
             }
@@ -684,6 +740,17 @@ class CommandPaletteComponent {
         this.overlayRef = null;
         this.overlayInstance = null;
     }
+    /**
+     * Aborts an in-flight close, leaving the palette open.
+     *
+     * The overlay is still attached (only the detach is deferred), so this
+     * restores the focus trap that `closePalette` tore down up front.
+     */
+    cancelPendingClose() {
+        this.clearCloseTimer();
+        this.closing = false;
+        this.setupFocusTrap();
+    }
     clearCloseTimer() {
         if (this.closeTimer !== null) {
             clearTimeout(this.closeTimer);
@@ -696,10 +763,10 @@ class CommandPaletteComponent {
             this.announceTimer = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: CommandPaletteComponent, isStandalone: true, selector: "tw-command-palette", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, searchAriaLabel: { classPropertyName: "searchAriaLabel", publicName: "searchAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", open: "openChange", itemSelected: "itemSelected", opened: "opened", closed: "closed" }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "declarativeItems", predicate: CommandPaletteItemDirective, descendants: true, isSignal: true }, { propertyName: "emptyDirective", first: true, predicate: CommandPaletteEmptyDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: CommandPaletteFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: CommandPaletteComponent, isStandalone: true, selector: "tw-command-palette", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, searchAriaLabel: { classPropertyName: "searchAriaLabel", publicName: "searchAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", open: "openChange", itemSelected: "itemSelected", opened: "opened", closed: "closed" }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "declarativeItems", predicate: CommandPaletteItemDirective, descendants: true, isSignal: true }, { propertyName: "emptyDirective", first: true, predicate: CommandPaletteEmptyDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: CommandPaletteFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CommandPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-command-palette',